diff options
Diffstat (limited to '')
| -rw-r--r-- | wp-includes/js/dist/components.js | 22956 |
1 files changed, 11687 insertions, 11269 deletions
diff --git a/wp-includes/js/dist/components.js b/wp-includes/js/dist/components.js index 70bfb3d..13b98ab 100644 --- a/wp-includes/js/dist/components.js +++ b/wp-includes/js/dist/components.js @@ -1,72 +1,6 @@ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ -/***/ 5755: -/***/ ((module, exports) => { - -var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! - Copyright (c) 2018 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames -*/ -/* global define */ - -(function () { - 'use strict'; - - var hasOwn = {}.hasOwnProperty; - var nativeCodeString = '[native code]'; - - function classNames() { - var classes = []; - - for (var i = 0; i < arguments.length; i++) { - var arg = arguments[i]; - if (!arg) continue; - - var argType = typeof arg; - - if (argType === 'string' || argType === 'number') { - classes.push(arg); - } else if (Array.isArray(arg)) { - if (arg.length) { - var inner = classNames.apply(null, arg); - if (inner) { - classes.push(inner); - } - } - } else if (argType === 'object') { - if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) { - classes.push(arg.toString()); - continue; - } - - for (var key in arg) { - if (hasOwn.call(arg, key) && arg[key]) { - classes.push(key); - } - } - } - } - - return classes.join(' '); - } - - if ( true && module.exports) { - classNames.default = classNames; - module.exports = classNames; - } else if (true) { - // register as 'classnames', consistent with npm package name - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { - return classNames; - }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), - __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } else {} -}()); - - -/***/ }), - /***/ 66: /***/ ((module) => { @@ -208,598 +142,6 @@ module.exports = deepmerge_1; /***/ }), -/***/ 1637: -/***/ ((module, __unused_webpack_exports, __webpack_require__) => { - -"use strict"; - - -var util = __webpack_require__(3062); - -function scrollIntoView(elem, container, config) { - config = config || {}; - // document 归一化到 window - if (container.nodeType === 9) { - container = util.getWindow(container); - } - - var allowHorizontalScroll = config.allowHorizontalScroll; - var onlyScrollIfNeeded = config.onlyScrollIfNeeded; - var alignWithTop = config.alignWithTop; - var alignWithLeft = config.alignWithLeft; - var offsetTop = config.offsetTop || 0; - var offsetLeft = config.offsetLeft || 0; - var offsetBottom = config.offsetBottom || 0; - var offsetRight = config.offsetRight || 0; - - allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll; - - var isWin = util.isWindow(container); - var elemOffset = util.offset(elem); - var eh = util.outerHeight(elem); - var ew = util.outerWidth(elem); - var containerOffset = undefined; - var ch = undefined; - var cw = undefined; - var containerScroll = undefined; - var diffTop = undefined; - var diffBottom = undefined; - var win = undefined; - var winScroll = undefined; - var ww = undefined; - var wh = undefined; - - if (isWin) { - win = container; - wh = util.height(win); - ww = util.width(win); - winScroll = { - left: util.scrollLeft(win), - top: util.scrollTop(win) - }; - // elem 相对 container 可视视窗的距离 - diffTop = { - left: elemOffset.left - winScroll.left - offsetLeft, - top: elemOffset.top - winScroll.top - offsetTop - }; - diffBottom = { - left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight, - top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom - }; - containerScroll = winScroll; - } else { - containerOffset = util.offset(container); - ch = container.clientHeight; - cw = container.clientWidth; - containerScroll = { - left: container.scrollLeft, - top: container.scrollTop - }; - // elem 相对 container 可视视窗的距离 - // 注意边框, offset 是边框到根节点 - diffTop = { - left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft, - top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop - }; - diffBottom = { - left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight, - top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom - }; - } - - if (diffTop.top < 0 || diffBottom.top > 0) { - // 强制向上 - if (alignWithTop === true) { - util.scrollTop(container, containerScroll.top + diffTop.top); - } else if (alignWithTop === false) { - util.scrollTop(container, containerScroll.top + diffBottom.top); - } else { - // 自动调整 - if (diffTop.top < 0) { - util.scrollTop(container, containerScroll.top + diffTop.top); - } else { - util.scrollTop(container, containerScroll.top + diffBottom.top); - } - } - } else { - if (!onlyScrollIfNeeded) { - alignWithTop = alignWithTop === undefined ? true : !!alignWithTop; - if (alignWithTop) { - util.scrollTop(container, containerScroll.top + diffTop.top); - } else { - util.scrollTop(container, containerScroll.top + diffBottom.top); - } - } - } - - if (allowHorizontalScroll) { - if (diffTop.left < 0 || diffBottom.left > 0) { - // 强制向上 - if (alignWithLeft === true) { - util.scrollLeft(container, containerScroll.left + diffTop.left); - } else if (alignWithLeft === false) { - util.scrollLeft(container, containerScroll.left + diffBottom.left); - } else { - // 自动调整 - if (diffTop.left < 0) { - util.scrollLeft(container, containerScroll.left + diffTop.left); - } else { - util.scrollLeft(container, containerScroll.left + diffBottom.left); - } - } - } else { - if (!onlyScrollIfNeeded) { - alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft; - if (alignWithLeft) { - util.scrollLeft(container, containerScroll.left + diffTop.left); - } else { - util.scrollLeft(container, containerScroll.left + diffBottom.left); - } - } - } - } -} - -module.exports = scrollIntoView; - -/***/ }), - -/***/ 5428: -/***/ ((module, __unused_webpack_exports, __webpack_require__) => { - -"use strict"; - - -module.exports = __webpack_require__(1637); - -/***/ }), - -/***/ 3062: -/***/ ((module) => { - -"use strict"; - - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; - -var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source; - -function getClientPosition(elem) { - var box = undefined; - var x = undefined; - var y = undefined; - var doc = elem.ownerDocument; - var body = doc.body; - var docElem = doc && doc.documentElement; - // 根据 GBS 最新数据，A-Grade Browsers 都已支持 getBoundingClientRect 方法，不用再考虑传统的实现方式 - box = elem.getBoundingClientRect(); - - // 注：jQuery 还考虑减去 docElem.clientLeft/clientTop - // 但测试发现，这样反而会导致当 html 和 body 有边距/边框样式时，获取的值不正确 - // 此外，ie6 会忽略 html 的 margin 值，幸运地是没有谁会去设置 html 的 margin - - x = box.left; - y = box.top; - - // In IE, most of the time, 2 extra pixels are added to the top and left - // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and - // IE6 standards mode, this border can be overridden by setting the - // document element's border to zero -- thus, we cannot rely on the - // offset always being 2 pixels. - - // In quirks mode, the offset can be determined by querying the body's - // clientLeft/clientTop, but in standards mode, it is found by querying - // the document element's clientLeft/clientTop. Since we already called - // getClientBoundingRect we have already forced a reflow, so it is not - // too expensive just to query them all. - - // ie 下应该减去窗口的边框吧，毕竟默认 absolute 都是相对窗口定位的 - // 窗口边框标准是设 documentElement ,quirks 时设置 body - // 最好禁止在 body 和 html 上边框 ，但 ie < 9 html 默认有 2px ，减去 - // 但是非 ie 不可能设置窗口边框，body html 也不是窗口 ,ie 可以通过 html,body 设置 - // 标准 ie 下 docElem.clientTop 就是 border-top - // ie7 html 即窗口边框改变不了。永远为 2 - // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框，即使设了 border-top 也为 0 - - x -= docElem.clientLeft || body.clientLeft || 0; - y -= docElem.clientTop || body.clientTop || 0; - - return { - left: x, - top: y - }; -} - -function getScroll(w, top) { - var ret = w['page' + (top ? 'Y' : 'X') + 'Offset']; - var method = 'scroll' + (top ? 'Top' : 'Left'); - if (typeof ret !== 'number') { - var d = w.document; - // ie6,7,8 standard mode - ret = d.documentElement[method]; - if (typeof ret !== 'number') { - // quirks mode - ret = d.body[method]; - } - } - return ret; -} - -function getScrollLeft(w) { - return getScroll(w); -} - -function getScrollTop(w) { - return getScroll(w, true); -} - -function getOffset(el) { - var pos = getClientPosition(el); - var doc = el.ownerDocument; - var w = doc.defaultView || doc.parentWindow; - pos.left += getScrollLeft(w); - pos.top += getScrollTop(w); - return pos; -} -function _getComputedStyle(elem, name, computedStyle_) { - var val = ''; - var d = elem.ownerDocument; - var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null); - - // https://github.com/kissyteam/kissy/issues/61 - if (computedStyle) { - val = computedStyle.getPropertyValue(name) || computedStyle[name]; - } - - return val; -} - -var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i'); -var RE_POS = /^(top|right|bottom|left)$/; -var CURRENT_STYLE = 'currentStyle'; -var RUNTIME_STYLE = 'runtimeStyle'; -var LEFT = 'left'; -var PX = 'px'; - -function _getComputedStyleIE(elem, name) { - // currentStyle maybe null - // http://msdn.microsoft.com/en-us/library/ms535231.aspx - var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name]; - - // 当 width/height 设置为百分比时，通过 pixelLeft 方式转换的 width/height 值 - // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19 - // 在 ie 下不对，需要直接用 offset 方式 - // borderWidth 等值也有问题，但考虑到 borderWidth 设为百分比的概率很小，这里就不考虑了 - - // From the awesome hack by Dean Edwards - // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 - // If we're not dealing with a regular pixel number - // but a number that has a weird ending, we need to convert it to pixels - // exclude left right for relativity - if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) { - // Remember the original values - var style = elem.style; - var left = style[LEFT]; - var rsLeft = elem[RUNTIME_STYLE][LEFT]; - - // prevent flashing of content - elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT]; - - // Put in the new values to get a computed value out - style[LEFT] = name === 'fontSize' ? '1em' : ret || 0; - ret = style.pixelLeft + PX; - - // Revert the changed values - style[LEFT] = left; - - elem[RUNTIME_STYLE][LEFT] = rsLeft; - } - return ret === '' ? 'auto' : ret; -} - -var getComputedStyleX = undefined; -if (typeof window !== 'undefined') { - getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE; -} - -function each(arr, fn) { - for (var i = 0; i < arr.length; i++) { - fn(arr[i]); - } -} - -function isBorderBoxFn(elem) { - return getComputedStyleX(elem, 'boxSizing') === 'border-box'; -} - -var BOX_MODELS = ['margin', 'border', 'padding']; -var CONTENT_INDEX = -1; -var PADDING_INDEX = 2; -var BORDER_INDEX = 1; -var MARGIN_INDEX = 0; - -function swap(elem, options, callback) { - var old = {}; - var style = elem.style; - var name = undefined; - - // Remember the old values, and insert the new ones - for (name in options) { - if (options.hasOwnProperty(name)) { - old[name] = style[name]; - style[name] = options[name]; - } - } - - callback.call(elem); - - // Revert the old values - for (name in options) { - if (options.hasOwnProperty(name)) { - style[name] = old[name]; - } - } -} - -function getPBMWidth(elem, props, which) { - var value = 0; - var prop = undefined; - var j = undefined; - var i = undefined; - for (j = 0; j < props.length; j++) { - prop = props[j]; - if (prop) { - for (i = 0; i < which.length; i++) { - var cssProp = undefined; - if (prop === 'border') { - cssProp = prop + which[i] + 'Width'; - } else { - cssProp = prop + which[i]; - } - value += parseFloat(getComputedStyleX(elem, cssProp)) || 0; - } - } - } - return value; -} - -/** - * A crude way of determining if an object is a window - * @member util - */ -function isWindow(obj) { - // must use == for ie8 - /* eslint eqeqeq:0 */ - return obj != null && obj == obj.window; -} - -var domUtils = {}; - -each(['Width', 'Height'], function (name) { - domUtils['doc' + name] = function (refWin) { - var d = refWin.document; - return Math.max( - // firefox chrome documentElement.scrollHeight< body.scrollHeight - // ie standard mode : documentElement.scrollHeight> body.scrollHeight - d.documentElement['scroll' + name], - // quirks : documentElement.scrollHeight 最大等于可视窗口多一点？ - d.body['scroll' + name], domUtils['viewport' + name](d)); - }; - - domUtils['viewport' + name] = function (win) { - // pc browser includes scrollbar in window.innerWidth - var prop = 'client' + name; - var doc = win.document; - var body = doc.body; - var documentElement = doc.documentElement; - var documentElementProp = documentElement[prop]; - // 标准模式取 documentElement - // backcompat 取 body - return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp; - }; -}); - -/* - 得到元素的大小信息 - @param elem - @param name - @param {String} [extra] 'padding' : (css width) + padding - 'border' : (css width) + padding + border - 'margin' : (css width) + padding + border + margin - */ -function getWH(elem, name, extra) { - if (isWindow(elem)) { - return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem); - } else if (elem.nodeType === 9) { - return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem); - } - var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; - var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight; - var computedStyle = getComputedStyleX(elem); - var isBorderBox = isBorderBoxFn(elem, computedStyle); - var cssBoxValue = 0; - if (borderBoxValue == null || borderBoxValue <= 0) { - borderBoxValue = undefined; - // Fall back to computed then un computed css if necessary - cssBoxValue = getComputedStyleX(elem, name); - if (cssBoxValue == null || Number(cssBoxValue) < 0) { - cssBoxValue = elem.style[name] || 0; - } - // Normalize '', auto, and prepare for extra - cssBoxValue = parseFloat(cssBoxValue) || 0; - } - if (extra === undefined) { - extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX; - } - var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox; - var val = borderBoxValue || cssBoxValue; - if (extra === CONTENT_INDEX) { - if (borderBoxValueOrIsBorderBox) { - return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle); - } - return cssBoxValue; - } - if (borderBoxValueOrIsBorderBox) { - var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle); - return val + (extra === BORDER_INDEX ? 0 : padding); - } - return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle); -} - -var cssShow = { - position: 'absolute', - visibility: 'hidden', - display: 'block' -}; - -// fix #119 : https://github.com/kissyteam/kissy/issues/119 -function getWHIgnoreDisplay(elem) { - var val = undefined; - var args = arguments; - // in case elem is window - // elem.offsetWidth === undefined - if (elem.offsetWidth !== 0) { - val = getWH.apply(undefined, args); - } else { - swap(elem, cssShow, function () { - val = getWH.apply(undefined, args); - }); - } - return val; -} - -function css(el, name, v) { - var value = v; - if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') { - for (var i in name) { - if (name.hasOwnProperty(i)) { - css(el, i, name[i]); - } - } - return undefined; - } - if (typeof value !== 'undefined') { - if (typeof value === 'number') { - value += 'px'; - } - el.style[name] = value; - return undefined; - } - return getComputedStyleX(el, name); -} - -each(['width', 'height'], function (name) { - var first = name.charAt(0).toUpperCase() + name.slice(1); - domUtils['outer' + first] = function (el, includeMargin) { - return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX); - }; - var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; - - domUtils[name] = function (elem, val) { - if (val !== undefined) { - if (elem) { - var computedStyle = getComputedStyleX(elem); - var isBorderBox = isBorderBoxFn(elem); - if (isBorderBox) { - val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle); - } - return css(elem, name, val); - } - return undefined; - } - return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX); - }; -}); - -// 设置 elem 相对 elem.ownerDocument 的坐标 -function setOffset(elem, offset) { - // set position first, in-case top/left are set even on static elem - if (css(elem, 'position') === 'static') { - elem.style.position = 'relative'; - } - - var old = getOffset(elem); - var ret = {}; - var current = undefined; - var key = undefined; - - for (key in offset) { - if (offset.hasOwnProperty(key)) { - current = parseFloat(css(elem, key)) || 0; - ret[key] = current + offset[key] - old[key]; - } - } - css(elem, ret); -} - -module.exports = _extends({ - getWindow: function getWindow(node) { - var doc = node.ownerDocument || node; - return doc.defaultView || doc.parentWindow; - }, - offset: function offset(el, value) { - if (typeof value !== 'undefined') { - setOffset(el, value); - } else { - return getOffset(el); - } - }, - - isWindow: isWindow, - each: each, - css: css, - clone: function clone(obj) { - var ret = {}; - for (var i in obj) { - if (obj.hasOwnProperty(i)) { - ret[i] = obj[i]; - } - } - var overflow = obj.overflow; - if (overflow) { - for (var i in obj) { - if (obj.hasOwnProperty(i)) { - ret.overflow[i] = obj.overflow[i]; - } - } - } - return ret; - }, - scrollLeft: function scrollLeft(w, v) { - if (isWindow(w)) { - if (v === undefined) { - return getScrollLeft(w); - } - window.scrollTo(v, getScrollTop(w)); - } else { - if (v === undefined) { - return w.scrollLeft; - } - w.scrollLeft = v; - } - }, - scrollTop: function scrollTop(w, v) { - if (isWindow(w)) { - if (v === undefined) { - return getScrollTop(w); - } - window.scrollTo(getScrollLeft(w), v); - } else { - if (v === undefined) { - return w.scrollTop; - } - w.scrollTop = v; - } - }, - - viewportWidth: 0, - viewportHeight: 0 -}, domUtils); - -/***/ }), - /***/ 2287: /***/ ((__unused_webpack_module, exports) => { @@ -1783,38 +1125,6 @@ module.exports = ReactPropTypesSecret; /***/ }), -/***/ 3394: -/***/ ((__unused_webpack_module, exports, __webpack_require__) => { - -"use strict"; -/** - * @license React - * react-jsx-runtime.production.min.js - * - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -var f=__webpack_require__(1609),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0}; -function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q; - - -/***/ }), - -/***/ 4922: -/***/ ((module, __unused_webpack_exports, __webpack_require__) => { - -"use strict"; - - -if (true) { - module.exports = __webpack_require__(3394); -} else {} - - -/***/ }), - /***/ 9681: /***/ ((module) => { @@ -2525,6 +1835,7 @@ __webpack_require__.d(__webpack_exports__, { Placeholder: () => (/* reexport */ placeholder), Polygon: () => (/* reexport */ external_wp_primitives_namespaceObject.Polygon), Popover: () => (/* reexport */ popover), + ProgressBar: () => (/* reexport */ progress_bar), QueryControls: () => (/* reexport */ query_controls), RadioControl: () => (/* reexport */ radio_control), RangeControl: () => (/* reexport */ range_control), @@ -2546,7 +1857,7 @@ __webpack_require__.d(__webpack_exports__, { TextControl: () => (/* reexport */ text_control), TextHighlight: () => (/* reexport */ text_highlight), TextareaControl: () => (/* reexport */ textarea_control), - TimePicker: () => (/* reexport */ time), + TimePicker: () => (/* reexport */ date_time_time), Tip: () => (/* reexport */ build_module_tip), ToggleControl: () => (/* reexport */ toggle_control), Toolbar: () => (/* reexport */ toolbar), @@ -2668,17 +1979,16 @@ __webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, { ;// CONCATENATED MODULE: external ["wp","primitives"] const external_wp_primitives_namespaceObject = window["wp"]["primitives"]; -// EXTERNAL MODULE: external "React" -var external_React_ = __webpack_require__(1609); -var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2); -var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_); -// EXTERNAL MODULE: ./node_modules/classnames/index.js -var classnames = __webpack_require__(5755); -var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames); +;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.mjs +function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx); ;// CONCATENATED MODULE: external ["wp","i18n"] const external_wp_i18n_namespaceObject = window["wp"]["i18n"]; ;// CONCATENATED MODULE: external ["wp","compose"] const external_wp_compose_namespaceObject = window["wp"]["compose"]; +// EXTERNAL MODULE: external "React" +var external_React_ = __webpack_require__(1609); +var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2); +var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_); ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SHA3WOPI.js "use client"; @@ -3538,8 +2848,8 @@ function resetMouseMoving() { -// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js -var jsx_runtime = __webpack_require__(4922); +;// CONCATENATED MODULE: external "ReactJSXRuntime" +const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"]; ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3ORBWXWF.js "use client"; @@ -3577,7 +2887,7 @@ function _3ORBWXWF_createElement(Type, props) { const mergedRef = useMergeRefs(props.ref, getRefProperty(render)); if (false) {} if (As && typeof As !== "string") { - element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rest), { render })); + element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(As, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rest), { render })); } else if (external_React_.isValidElement(render)) { const renderProps = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, render.props), { ref: mergedRef }); element = external_React_.cloneElement(render, mergeProps(rest, renderProps)); @@ -3588,9 +2898,9 @@ function _3ORBWXWF_createElement(Type, props) { const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]); element = props.children(otherProps); } else if (As) { - element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, _4R3V3JGP_spreadValues({}, rest)); + element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(As, _4R3V3JGP_spreadValues({}, rest)); } else { - element = /* @__PURE__ */ (0,jsx_runtime.jsx)(Type, _4R3V3JGP_spreadValues({}, rest)); + element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Type, _4R3V3JGP_spreadValues({}, rest)); } if (wrapElement) { return wrapElement(element); @@ -3630,14 +2940,14 @@ function createStoreContext(providers = [], scopedProviders = []) { }; const ContextProvider = (props) => { return providers.reduceRight( - (children, Provider) => /* @__PURE__ */ (0,jsx_runtime.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })), - /* @__PURE__ */ (0,jsx_runtime.jsx)(context.Provider, _4R3V3JGP_spreadValues({}, props)) + (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })), + /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, _4R3V3JGP_spreadValues({}, props)) ); }; const ScopedContextProvider = (props) => { - return /* @__PURE__ */ (0,jsx_runtime.jsx)(ContextProvider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children: scopedProviders.reduceRight( - (children, Provider) => /* @__PURE__ */ (0,jsx_runtime.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })), - /* @__PURE__ */ (0,jsx_runtime.jsx)(scopedContext.Provider, _4R3V3JGP_spreadValues({}, props)) + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextProvider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children: scopedProviders.reduceRight( + (children, Provider) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })), + /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(scopedContext.Provider, _4R3V3JGP_spreadValues({}, props)) ) })); }; return { @@ -4691,7 +4001,7 @@ function init(store, ...args) { return; return getInternal(store, "init")(...args); } -function EAHJFCU4_subscribe(store, ...args) { +function subscribe(store, ...args) { if (!store) return; return getInternal(store, "subscribe")(...args); @@ -4786,7 +4096,7 @@ function useStoreState(store, keyOrSelector = identity) { (callback) => { if (!store) return noopSubscribe(); - return EAHJFCU4_subscribe(store, null, callback); + return subscribe(store, null, callback); }, [store] ); @@ -5141,7 +4451,7 @@ var useCompositeItem = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }), [providerValue] ); const isActiveItem = useStoreState( @@ -5266,7 +4576,7 @@ function createDisclosureStore(props = {}) { ); setup( disclosure, - () => EAHJFCU4_subscribe(disclosure, ["open"], () => { + () => subscribe(disclosure, ["open"], () => { if (!disclosure.getState().animated) return; disclosure.setState("animating", true); @@ -6318,7 +5628,7 @@ var useDisclosureContent = createHook( }, [store, animated, contentElement, open, transition]); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: element }), [store] ); const hidden = isHidden(mounted, props.hidden, alwaysVisible); @@ -6352,7 +5662,7 @@ var DisclosureContent = createComponent( ); if (mounted === false) return null; - return /* @__PURE__ */ (0,jsx_runtime.jsx)(DisclosureContentImpl, _4R3V3JGP_spreadValues({}, props)); + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContentImpl, _4R3V3JGP_spreadValues({}, props)); } ); if (false) {} @@ -6420,10 +5730,10 @@ function DialogBackdrop({ if (!backdrop) return null; if ((0,external_React_.isValidElement)(backdrop)) { - return /* @__PURE__ */ (0,jsx_runtime.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: backdrop })); + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: backdrop })); } const Component = typeof backdrop !== "boolean" ? backdrop : "div"; - return /* @__PURE__ */ (0,jsx_runtime.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, {}) })); + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, {}) })); } @@ -6668,7 +5978,7 @@ function useNestedDialogs(store) { }, [store, context]); const providerValue = (0,external_React_.useMemo)(() => ({ store, add }), [store, add]); const wrapElement = (0,external_React_.useCallback)( - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }), [providerValue] ); return { wrapElement, nestedDialogs: dialogs }; @@ -6887,7 +6197,7 @@ var useFocusableContainer = createHook( var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }), [autoFocusOnShow] ); return props; @@ -6925,7 +6235,7 @@ function HeadingLevel({ level, children }) { Math.min(level || contextLevel + 1, 6), 1 ); - return /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingContext.Provider, { value: nextLevel, children }); + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingContext.Provider, { value: nextLevel, children }); } @@ -7137,11 +6447,11 @@ var usePortal = createHook( element = // While the portal node is not in the DOM, we need to pass the // current context to the portal context, otherwise it's going to // reset to the body element on nested portals. - /* @__PURE__ */ (0,jsx_runtime.jsx)(PortalContext.Provider, { value: portalNode || context, children: element }); + /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PortalContext.Provider, { value: portalNode || context, children: element }); if (!portal) return element; if (!portalNode) { - return /* @__PURE__ */ (0,jsx_runtime.jsx)( + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( "span", { ref: refProp, @@ -7151,8 +6461,8 @@ var usePortal = createHook( } ); } - element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ - preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( + element = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ + preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( FocusTrap, { ref: innerBeforeRef, @@ -7167,7 +6477,7 @@ var usePortal = createHook( } ), element, - preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( + preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( FocusTrap, { ref: innerAfterRef, @@ -7185,8 +6495,8 @@ var usePortal = createHook( if (portalNode) { element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode); } - let preserveTabOrderElement = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ - preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( + let preserveTabOrderElement = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ + preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( FocusTrap, { ref: outerBeforeRef, @@ -7203,8 +6513,8 @@ var usePortal = createHook( ), preserveTabOrder && // We're using position: fixed here so that the browser doesn't // add margin to the element when setting gap on a parent element. - /* @__PURE__ */ (0,jsx_runtime.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }), - preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( + /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }), + preserveTabOrder && portalNode && /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( FocusTrap, { ref: outerAfterRef, @@ -7233,7 +6543,7 @@ var usePortal = createHook( anchorPortalNode ); } - return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ preserveTabOrderElement, element ] }); @@ -7644,7 +6954,7 @@ var useDialog = createHook( }, [store, domReady, mounted, hideOnEscapeProp]); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }), [modal] ); const hiddenProp = props.hidden; @@ -7654,8 +6964,8 @@ var useDialog = createHook( (element) => { if (!backdrop) return element; - return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ - /* @__PURE__ */ (0,jsx_runtime.jsx)( + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: [ + /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( DialogBackdrop, { store, @@ -7674,7 +6984,7 @@ var useDialog = createHook( const [descriptionId, setDescriptionId] = (0,external_React_.useState)(); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }), [store] ); props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ @@ -7706,7 +7016,7 @@ function createDialogComponent(Component, useProviderContext = useDialogProvider ); if (!mounted) return null; - return /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, _4R3V3JGP_spreadValues({}, props)); + return /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, _4R3V3JGP_spreadValues({}, props)); }); } var Dialog = createDialogComponent( @@ -10098,7 +9408,7 @@ var usePopover = createHook( const position = fixed ? "fixed" : "absolute"; props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)( + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( "div", _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ role: "presentation" @@ -10118,7 +9428,7 @@ var usePopover = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }), [store] ); props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ @@ -10394,7 +9704,7 @@ var useHovercard = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }), [store, registerNestedHovercard] ); props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { @@ -10509,7 +9819,7 @@ var useTooltip = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TooltipScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipScopedContextProvider, { value: store, children: element }), [store] ); const role = store.useState( @@ -10596,10 +9906,11 @@ function Shortcut(props) { displayText = shortcut.display; ariaLabel = shortcut.ariaLabel; } - return (0,external_React_.createElement)("span", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { className: className, - "aria-label": ariaLabel - }, displayText); + "aria-label": ariaLabel, + children: displayText + }); } /* harmony default export */ const build_module_shortcut = (Shortcut); @@ -10854,7 +10165,6 @@ const getReferenceElement = ({ const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tooltip/index.js - /** * External dependencies */ @@ -10874,6 +10184,8 @@ const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : + + const TooltipInternalContext = (0,external_wp_element_namespaceObject.createContext)({ isNestedInTooltip: false }); @@ -10922,39 +10234,38 @@ function UnforwardedTooltip(props, ref) { }); } computedPlacement = computedPlacement || 'bottom'; - - // Removing the `Ariakit` namespace from the hook name allows ESLint to - // properly identify the hook, and apply the correct linting rules. - const useAriakitTooltipStore = useTooltipStore; - const tooltipStore = useAriakitTooltipStore({ + const tooltipStore = useTooltipStore({ placement: computedPlacement, showTimeout: delay }); if (isNestedInTooltip) { - return isOnlyChild ? (0,external_React_.createElement)(Role, { + return isOnlyChild ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Role, { ...restProps, render: children }) : children; } - return (0,external_React_.createElement)(TooltipInternalContext.Provider, { - value: CONTEXT_VALUE - }, (0,external_React_.createElement)(TooltipAnchor, { - onClick: hideOnClick ? tooltipStore.hide : undefined, - store: tooltipStore, - render: isOnlyChild ? children : undefined, - ref: ref - }, isOnlyChild ? undefined : children), isOnlyChild && (text || shortcut) && (0,external_React_.createElement)(Tooltip, { - ...restProps, - className: "components-tooltip", - unmountOnHide: true, - gutter: 4, - id: describedById, - overflowPadding: 0.5, - store: tooltipStore - }, text, shortcut && (0,external_React_.createElement)(build_module_shortcut, { - className: text ? 'components-tooltip__shortcut' : '', - shortcut: shortcut - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TooltipInternalContext.Provider, { + value: CONTEXT_VALUE, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipAnchor, { + onClick: hideOnClick ? tooltipStore.hide : undefined, + store: tooltipStore, + render: isOnlyChild ? children : undefined, + ref: ref, + children: isOnlyChild ? undefined : children + }), isOnlyChild && (text || shortcut) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tooltip, { + ...restProps, + className: "components-tooltip", + unmountOnHide: true, + gutter: 4, + id: describedById, + overflowPadding: 0.5, + store: tooltipStore, + children: [text, shortcut && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_shortcut, { + className: text ? 'components-tooltip__shortcut' : '', + shortcut: shortcut + })] + })] + }); } const tooltip_Tooltip = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTooltip); /* harmony default export */ const tooltip = (tooltip_Tooltip); @@ -11036,7 +10347,6 @@ function use_update_effect_useUpdateEffect(effect, deps) { /* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-system-provider.js - /** * External dependencies */ @@ -11054,6 +10364,7 @@ function use_update_effect_useUpdateEffect(effect, deps) { * Internal dependencies */ + const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{}); const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext); @@ -11126,9 +10437,10 @@ const BaseContextSystemProvider = ({ const contextValue = useContextSystemBridge({ value }); - return (0,external_React_.createElement)(ComponentsContext.Provider, { - value: contextValue - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ComponentsContext.Provider, { + value: contextValue, + children: children + }); }; const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider); @@ -13971,7 +13283,7 @@ var createEmotion = function createEmotion(options) { args[_key4] = arguments[_key4]; } - return merge(cache.registered, css, emotion_css_create_instance_esm_classnames(args)); + return merge(cache.registered, css, classnames(args)); }; return { @@ -13997,7 +13309,7 @@ var createEmotion = function createEmotion(options) { }; }; -var emotion_css_create_instance_esm_classnames = function classnames(args) { +var classnames = function classnames(args) { var cls = ''; for (var i = 0; i < args.length; i++) { @@ -14275,7 +13587,9 @@ function _contextConnect(Component, namespace, options) { * @return The connected namespaces. */ function getConnectNamespace(Component) { - if (!Component) return []; + if (!Component) { + return []; + } let namespaces = []; // @ts-ignore internal property @@ -14299,7 +13613,9 @@ function getConnectNamespace(Component) { * @param match The namespace to check. */ function hasConnectNamespace(Component, match) { - if (!Component) return false; + if (!Component) { + return false; + } if (typeof match === 'string') { return getConnectNamespace(Component).includes(match); } @@ -14547,6 +13863,29 @@ var createStyled = function createStyled(tag, options) { */ /** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + +const PolymorphicDiv = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { + target: "e19lxcc00" +} : 0)( true ? "" : 0); +function UnforwardedView({ + as, + ...restProps +}, ref) { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PolymorphicDiv, { + as: as, + ref: ref, + ...restProps + }); +} + +/** * `View` is a core component that renders everything in the library. * It is the principle component in the entire library. * @@ -14562,15 +13901,12 @@ var createStyled = function createStyled(tag, options) { * } * ``` */ -const View = emotion_styled_base_browser_esm("div", true ? { - target: "e19lxcc00" -} : 0)( true ? "" : 0); -View.selector = '.components-view'; -View.displayName = 'View'; +const View = Object.assign((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedView), { + selector: '.components-view' +}); /* harmony default export */ const component = (View); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/component.js - /** * External dependencies */ @@ -14582,12 +13918,13 @@ View.displayName = 'View'; + function UnconnectedVisuallyHidden(props, forwardedRef) { const { style: styleProp, ...contextProps } = useContextSystem(props, 'VisuallyHidden'); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: forwardedRef, ...contextProps, style: { @@ -14672,7 +14009,9 @@ function normalize(value) { */ function getItemId(prefixId, value) { const normalized = normalize(value); - if (!normalized) return; + if (!normalized) { + return; + } const id = normalized.replace(' ', '-'); return `${prefixId}-${id}`; } @@ -14698,7 +14037,9 @@ function getItemValue(prefixId, id) { */ function getAlignmentIndex(alignment = 'center') { const normalized = normalize(alignment); - if (!normalized) return undefined; + if (!normalized) { + return undefined; + } const index = ALIGNMENTS.indexOf(normalized); return index > -1 ? index : undefined; } @@ -15160,35 +14501,6 @@ const COLORS = Object.freeze({ }); /* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS))); -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/reduce-motion.js -/** - * Allows users to opt-out of animations via OS-level preferences. - * - * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name - * @return {string} Generated CSS code for the reduced style - */ -function reduceMotion(prop = 'transition') { - let style; - switch (prop) { - case 'transition': - style = 'transition-duration: 0ms;'; - break; - case 'animation': - style = 'animation-duration: 1ms;'; - break; - default: - style = ` - animation-duration: 1ms; - transition-duration: 0ms; - `; - } - return ` - @media ( prefers-reduced-motion: reduce ) { - ${style}; - } - `; -} - ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } @@ -15214,10 +14526,10 @@ const rootSize = ({ }) => { return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0), true ? "" : 0); }; -const Root = emotion_styled_base_browser_esm("div", true ? { +const Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ecapk1j3" } : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0)); -const Row = emotion_styled_base_browser_esm("div", true ? { +const Row = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ecapk1j2" } : 0)( true ? { name: "1x5gbbj", @@ -15232,12 +14544,12 @@ const pointActive = ({ return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0), true ? "" : 0); }; const pointBase = props => { - return /*#__PURE__*/emotion_react_browser_esm_css("background:currentColor;box-sizing:border-box;display:grid;margin:auto;transition:all 120ms linear;", reduceMotion('transition'), " ", pointActive(props), ";" + ( true ? "" : 0), true ? "" : 0); + return /*#__PURE__*/emotion_react_browser_esm_css("background:currentColor;box-sizing:border-box;display:grid;margin:auto;@media not ( prefers-reduced-motion ){transition:all 120ms linear;}", pointActive(props), ";" + ( true ? "" : 0), true ? "" : 0); }; -const Point = emotion_styled_base_browser_esm("span", true ? { +const Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "ecapk1j1" } : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0)); -const Cell = emotion_styled_base_browser_esm("span", true ? { +const Cell = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "ecapk1j0" } : 0)( true ? { name: "rjf3ub", @@ -15245,7 +14557,6 @@ const Cell = emotion_styled_base_browser_esm("span", true ? { } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js - /** * Internal dependencies */ @@ -15258,6 +14569,8 @@ const Cell = emotion_styled_base_browser_esm("span", true ? { */ + + function cell_Cell({ id, isActive = false, @@ -15265,18 +14578,22 @@ function cell_Cell({ ...props }) { const tooltipText = ALIGNMENT_LABEL[value]; - return (0,external_React_.createElement)(tooltip, { - text: tooltipText - }, (0,external_React_.createElement)(CompositeItem, { - id: id, - render: (0,external_React_.createElement)(Cell, { - ...props, - role: "gridcell" + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + text: tooltipText, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CompositeItem, { + id: id, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Cell, { + ...props, + role: "gridcell" + }), + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + children: value + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Point, { + isActive: isActive, + role: "presentation" + })] }) - }, (0,external_React_.createElement)(visually_hidden_component, null, value), (0,external_React_.createElement)(Point, { - isActive: isActive, - role: "presentation" - }))); + }); } ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Y6GYTNQ2.js @@ -16122,7 +15439,7 @@ var useComposite = createHook( }); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeContextProvider, { value: store, children: element }), [store] ); const activeDescendant = store.useState((state) => { @@ -16199,7 +15516,7 @@ var useCompositeRow = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }), [providerValue] ); props = _4R3V3JGP_spreadValues({ id }, props); @@ -16244,13 +15561,13 @@ const rootPointerEvents = ({ pointerEvents: disablePointerEvents ? 'none' : undefined }, true ? "" : 0, true ? "" : 0); }; -const Wrapper = emotion_styled_base_browser_esm("div", true ? { +const Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "erowt52" } : 0)( true ? { name: "ogl07i", styles: "box-sizing:border-box;padding:2px" } : 0); -const alignment_matrix_control_icon_styles_Root = emotion_styled_base_browser_esm("div", true ? { +const alignment_matrix_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "erowt51" } : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0)); const alignment_matrix_control_icon_styles_pointActive = ({ @@ -16259,13 +15576,12 @@ const alignment_matrix_control_icon_styles_pointActive = ({ const boxShadow = isActive ? `0 0 0 1px currentColor` : null; return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0), true ? "" : 0); }; -const alignment_matrix_control_icon_styles_Point = emotion_styled_base_browser_esm("span", true ? { +const alignment_matrix_control_icon_styles_Point = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "erowt50" } : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0)); const alignment_matrix_control_icon_styles_Cell = Cell; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js - /** * External dependencies */ @@ -16276,6 +15592,7 @@ const alignment_matrix_control_icon_styles_Cell = Cell; */ + const BASE_SIZE = 24; function AlignmentMatrixControlIcon({ className, @@ -16287,30 +15604,30 @@ function AlignmentMatrixControlIcon({ }) { const alignIndex = getAlignmentIndex(value); const scale = (size / BASE_SIZE).toFixed(2); - const classes = classnames_default()('component-alignment-matrix-control-icon', className); + const classes = dist_clsx('component-alignment-matrix-control-icon', className); const styles = { ...style, transform: `scale(${scale})` }; - return (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Root, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Root, { ...props, className: classes, disablePointerEvents: disablePointerEvents, role: "presentation", - style: styles - }, ALIGNMENTS.map((align, index) => { - const isActive = alignIndex === index; - return (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Cell, { - key: align - }, (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Point, { - isActive: isActive - })); - })); + style: styles, + children: ALIGNMENTS.map((align, index) => { + const isActive = alignIndex === index; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Cell, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(alignment_matrix_control_icon_styles_Point, { + isActive: isActive + }) + }, align); + }) + }); } /* harmony default export */ const icon = (AlignmentMatrixControlIcon); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js - /** * External dependencies */ @@ -16330,6 +15647,7 @@ function AlignmentMatrixControlIcon({ + /** * * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI. @@ -16366,37 +15684,39 @@ function AlignmentMatrixControl({ activeId: getItemId(baseId, value), setActiveId: nextActiveId => { const nextValue = getItemValue(baseId, nextActiveId); - if (nextValue) onChange?.(nextValue); + if (nextValue) { + onChange?.(nextValue); + } }, rtl: (0,external_wp_i18n_namespaceObject.isRTL)() }); const activeId = compositeStore.useState('activeId'); - const classes = classnames_default()('component-alignment-matrix-control', className); - return (0,external_React_.createElement)(Composite, { + const classes = dist_clsx('component-alignment-matrix-control', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, { store: compositeStore, - render: (0,external_React_.createElement)(Root, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Root, { ...props, "aria-label": label, className: classes, id: baseId, role: "grid", size: width - }) - }, GRID.map((cells, index) => (0,external_React_.createElement)(CompositeRow, { - render: (0,external_React_.createElement)(Row, { - role: "row" }), - key: index - }, cells.map(cell => { - const cellId = getItemId(baseId, cell); - const isActive = cellId === activeId; - return (0,external_React_.createElement)(cell_Cell, { - id: cellId, - isActive: isActive, - key: cell, - value: cell - }); - })))); + children: GRID.map((cells, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeRow, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Row, { + role: "row" + }), + children: cells.map(cell => { + const cellId = getItemId(baseId, cell); + const isActive = cellId === activeId; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(cell_Cell, { + id: cellId, + isActive: isActive, + value: cell + }, cell); + }) + }, index)) + }); } AlignmentMatrixControl.Icon = icon; /* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl); @@ -16426,7 +15746,7 @@ function getDefaultOrigin(type) { */ function getAnimateClassName(options) { if (options.type === 'loading') { - return classnames_default()('components-animate__loading'); + return 'components-animate__loading'; } const { type, @@ -16434,13 +15754,13 @@ function getAnimateClassName(options) { } = options; if (type === 'appear') { const [yAxis, xAxis = 'center'] = origin.split(' '); - return classnames_default()('components-animate__appear', { + return dist_clsx('components-animate__appear', { ['is-from-' + xAxis]: xAxis !== 'center', ['is-from-' + yAxis]: yAxis !== 'middle' }); } if (type === 'slide-in') { - return classnames_default()('components-animate__slide-in', 'is-from-' + origin); + return dist_clsx('components-animate__slide-in', 'is-from-' + origin); } return undefined; } @@ -16527,6 +15847,210 @@ const LazyContext = (0,external_React_.createContext)({ strict: false }); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs +/** + * Convert camelCase to dash-case properties. + */ +const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs + + +const optimizedAppearDataId = "framerAppearId"; +const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs +const MotionGlobalConfig = { + skipAnimations: false, + useManualTiming: false, +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs +class Queue { + constructor() { + this.order = []; + this.scheduled = new Set(); + } + add(process) { + if (!this.scheduled.has(process)) { + this.scheduled.add(process); + this.order.push(process); + return true; + } + } + remove(process) { + const index = this.order.indexOf(process); + if (index !== -1) { + this.order.splice(index, 1); + this.scheduled.delete(process); + } + } + clear() { + this.order.length = 0; + this.scheduled.clear(); + } +} +function createRenderStep(runNextFrame) { + /** + * We create and reuse two queues, one to queue jobs for the current frame + * and one for the next. We reuse to avoid triggering GC after x frames. + */ + let thisFrame = new Queue(); + let nextFrame = new Queue(); + let numToRun = 0; + /** + * Track whether we're currently processing jobs in this step. This way + * we can decide whether to schedule new jobs for this frame or next. + */ + let isProcessing = false; + let flushNextFrame = false; + /** + * A set of processes which were marked keepAlive when scheduled. + */ + const toKeepAlive = new WeakSet(); + const step = { + /** + * Schedule a process to run on the next frame. + */ + schedule: (callback, keepAlive = false, immediate = false) => { + const addToCurrentFrame = immediate && isProcessing; + const queue = addToCurrentFrame ? thisFrame : nextFrame; + if (keepAlive) + toKeepAlive.add(callback); + if (queue.add(callback) && addToCurrentFrame && isProcessing) { + // If we're adding it to the currently running queue, update its measured size + numToRun = thisFrame.order.length; + } + return callback; + }, + /** + * Cancel the provided callback from running on the next frame. + */ + cancel: (callback) => { + nextFrame.remove(callback); + toKeepAlive.delete(callback); + }, + /** + * Execute all schedule callbacks. + */ + process: (frameData) => { + /** + * If we're already processing we've probably been triggered by a flushSync + * inside an existing process. Instead of executing, mark flushNextFrame + * as true and ensure we flush the following frame at the end of this one. + */ + if (isProcessing) { + flushNextFrame = true; + return; + } + isProcessing = true; + [thisFrame, nextFrame] = [nextFrame, thisFrame]; + // Clear the next frame queue + nextFrame.clear(); + // Execute this frame + numToRun = thisFrame.order.length; + if (numToRun) { + for (let i = 0; i < numToRun; i++) { + const callback = thisFrame.order[i]; + if (toKeepAlive.has(callback)) { + step.schedule(callback); + runNextFrame(); + } + callback(frameData); + } + } + isProcessing = false; + if (flushNextFrame) { + flushNextFrame = false; + step.process(frameData); + } + }, + }; + return step; +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs + + + +const stepsOrder = [ + "read", // Read + "resolveKeyframes", // Write/Read/Write/Read + "update", // Compute + "preRender", // Compute + "render", // Write + "postRender", // Compute +]; +const maxElapsed = 40; +function createRenderBatcher(scheduleNextBatch, allowKeepAlive) { + let runNextFrame = false; + let useDefaultElapsed = true; + const state = { + delta: 0, + timestamp: 0, + isProcessing: false, + }; + const steps = stepsOrder.reduce((acc, key) => { + acc[key] = createRenderStep(() => (runNextFrame = true)); + return acc; + }, {}); + const processStep = (stepId) => { + steps[stepId].process(state); + }; + const processBatch = () => { + const timestamp = MotionGlobalConfig.useManualTiming + ? state.timestamp + : performance.now(); + runNextFrame = false; + state.delta = useDefaultElapsed + ? 1000 / 60 + : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1); + state.timestamp = timestamp; + state.isProcessing = true; + stepsOrder.forEach(processStep); + state.isProcessing = false; + if (runNextFrame && allowKeepAlive) { + useDefaultElapsed = false; + scheduleNextBatch(processBatch); + } + }; + const wake = () => { + runNextFrame = true; + useDefaultElapsed = true; + if (!state.isProcessing) { + scheduleNextBatch(processBatch); + } + }; + const schedule = stepsOrder.reduce((acc, key) => { + const step = steps[key]; + acc[key] = (process, keepAlive = false, immediate = false) => { + if (!runNextFrame) + wake(); + return step.schedule(process, keepAlive, immediate); + }; + return acc; + }, {}); + const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process)); + return { schedule, cancel, state, steps }; +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/microtask.mjs + + +const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false); + + + ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs @@ -16535,6 +16059,8 @@ const LazyContext = (0,external_React_.createContext)({ strict: false }); + + function useVisualElement(Component, visualState, props, createVisualElement) { const { visualElement: parent } = (0,external_React_.useContext)(MotionContext); const lazyContext = (0,external_React_.useContext)(LazyContext); @@ -16565,11 +16091,12 @@ function useVisualElement(Component, visualState, props, createVisualElement) { * Cache this value as we want to know whether HandoffAppearAnimations * was present on initial render - it will be deleted after this. */ - const canHandoff = (0,external_React_.useRef)(Boolean(window.HandoffAppearAnimations)); + const wantsHandoff = (0,external_React_.useRef)(Boolean(props[optimizedAppearDataAttribute] && + !window.HandoffComplete)); useIsomorphicLayoutEffect(() => { if (!visualElement) return; - visualElement.render(); + microtask.render(visualElement.render); /** * Ideally this function would always run in a useEffect. * @@ -16580,7 +16107,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) { * So if we detect a situtation where optimised appear animations * are running, we use useLayoutEffect to trigger animations. */ - if (canHandoff.current && visualElement.animationState) { + if (wantsHandoff.current && visualElement.animationState) { visualElement.animationState.animateChanges(); } }); @@ -16588,16 +16115,14 @@ function useVisualElement(Component, visualState, props, createVisualElement) { if (!visualElement) return; visualElement.updateFeatures(); - if (!canHandoff.current && visualElement.animationState) { + if (!wantsHandoff.current && visualElement.animationState) { visualElement.animationState.animateChanges(); } - /** - * Once we've handed off animations we can delete HandoffAppearAnimations - * so components added after the initial render can animate changes - * in useEffect vs useLayoutEffect. - */ - window.HandoffAppearAnimations = undefined; - canHandoff.current = false; + if (wantsHandoff.current) { + wantsHandoff.current = false; + // This ensures all future calls to animateChanges() will run in useEffect + window.HandoffComplete = true; + } }); return visualElement; } @@ -16606,7 +16131,8 @@ function useVisualElement(Component, visualState, props, createVisualElement) { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs function isRefObject(ref) { - return (typeof ref === "object" && + return (ref && + typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current")); } @@ -16659,7 +16185,9 @@ function isVariantLabel(v) { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs function isAnimationControls(v) { - return typeof v === "object" && typeof v.start === "function"; + return (v !== null && + typeof v === "object" && + typeof v.start === "function"); } @@ -16857,9 +16385,7 @@ function motion_createMotionComponent({ preloadedFeatures, createVisualElement, * The mount order and hierarchy is specific to ensure our element ref * is hydrated by the time features fire their effects. */ - return (external_React_.createElement(MotionContext.Provider, { value: context }, - MeasureLayout && context.visualElement ? (external_React_.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, - useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))); + return ((0,external_ReactJSXRuntime_namespaceObject.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? ((0,external_ReactJSXRuntime_namespaceObject.jsx)(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] })); } const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent); ForwardRefComponent[motionComponentSymbol] = Component; @@ -16982,7 +16508,7 @@ function isSVGComponent(Component) { /** * If it contains a capital letter, it's an SVG component */ - /[A-Z]/.test(Component)) { + /[A-Z]/u.test(Component)) { return true; } return false; @@ -17096,8 +16622,15 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token); const isCSSVariableName = checkStringStartsWith("--"); -const isCSSVariableToken = checkStringStartsWith("var(--"); -const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g; +const startsAsVariableToken = checkStringStartsWith("var(--"); +const isCSSVariableToken = (value) => { + const startsWithToken = startsAsVariableToken(value); + if (!startsWithToken) + return false; + // Ensure any comments are stripped from the value as this can harm performance of the regex. + return singleCssVariableRegex.test(value.split("/*")[0].trim()); +}; +const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu; @@ -17114,7 +16647,13 @@ const getValueAsType = (value, type) => { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/clamp.mjs -const clamp_clamp = (min, max, v) => Math.min(Math.max(v, min), max); +const clamp_clamp = (min, max, v) => { + if (v > max) + return max; + if (v < min) + return min; + return v; +}; @@ -17145,9 +16684,9 @@ const scale = { // If this number is a decimal, make it just five decimal places // to avoid exponents const sanitize = (v) => Math.round(v * 100000) / 100000; -const floatRegex = /(-)?([\d]*\.?[\d])+/g; -const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi; -const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i; +const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu; +const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu; +const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu; function isString(v) { return typeof v === "string"; } @@ -17251,6 +16790,8 @@ const numberValueTypes = { originZ: px, // Misc zIndex: type_int_int, + backgroundPositionX: px, + backgroundPositionY: px, // SVG fillOpacity: alpha, strokeOpacity: alpha, @@ -17374,7 +16915,7 @@ function useStyle(props, visualState, isStatic) { */ copyRawValuesOnly(style, styleProp, props); Object.assign(style, useInitialMotionValues(props, visualState, isStatic)); - return props.transformValues ? props.transformValues(style) : style; + return style; } function useHTMLProps(props, visualState, isStatic) { // The `any` isn't ideal but it is the type of createElement props argument @@ -17421,12 +16962,8 @@ const validMotionProps = new Set([ "variants", "transition", "transformTemplate", - "transformValues", "custom", "inherit", - "onLayoutAnimationStart", - "onLayoutAnimationComplete", - "onLayoutMeasure", "onBeforeLayoutMeasure", "onAnimationStart", "onAnimationComplete", @@ -17443,6 +16980,7 @@ const validMotionProps = new Set([ "onHoverEnd", "onViewportEnter", "onViewportLeave", + "globalTapTarget", "ignoreStrict", "viewport", ]); @@ -17460,6 +16998,7 @@ function isValidMotionProp(key) { key.startsWith("layout") || key.startsWith("onTap") || key.startsWith("onPan") || + key.startsWith("onLayout") || validMotionProps.has(key)); } @@ -17515,8 +17054,10 @@ function filterProps(props, isDom, forwardMotionProps) { (forwardMotionProps === true && isValidMotionProp(key)) || (!isDom && !isValidMotionProp(key)) || // If trying to use native HTML drag events, forward drag listeners - (props["draggable"] && key.startsWith("onDrag"))) { - filteredProps[key] = props[key]; + (props["draggable"] && + key.startsWith("onDrag"))) { + filteredProps[key] = + props[key]; } } return filteredProps; @@ -17688,11 +17229,9 @@ function createUseRender(forwardMotionProps = false) { : useHTMLProps; const visualProps = useVisualProps(props, latestValues, isStatic, Component); const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps); - const elementProps = { - ...filteredProps, - ...visualProps, - ref, - }; + const elementProps = Component !== external_React_.Fragment + ? { ...filteredProps, ...visualProps, ref } + : {}; /** * If component has been handed a motion value as its child, * memoise its initial value and render that. Subsequent updates @@ -17710,14 +17249,6 @@ function createUseRender(forwardMotionProps = false) { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs -/** - * Convert camelCase to dash-case properties. - */ -const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs function renderHTML(element, { style, vars }, styleProp, projection) { Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp)); @@ -17779,13 +17310,16 @@ function renderSVG(element, renderState, _styleProp, projection) { -function scrapeMotionValuesFromProps(props, prevProps) { +function scrapeMotionValuesFromProps(props, prevProps, visualElement) { + var _a; const { style } = props; const newValues = {}; for (const key in style) { if (isMotionValue(style[key]) || - (prevProps.style && isMotionValue(prevProps.style[key])) || - isForcedMotionValue(key, props)) { + (prevProps.style && + isMotionValue(prevProps.style[key])) || + isForcedMotionValue(key, props) || + ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) { newValues[key] = style[key]; } } @@ -17799,10 +17333,11 @@ function scrapeMotionValuesFromProps(props, prevProps) { -function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) { - const newValues = scrapeMotionValuesFromProps(props, prevProps); +function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement) { + const newValues = scrapeMotionValuesFromProps(props, prevProps, visualElement); for (const key in props) { - if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) { + if (isMotionValue(props[key]) || + isMotionValue(prevProps[key])) { const targetKey = transformPropOrder.indexOf(key) !== -1 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) : key; @@ -17815,12 +17350,21 @@ function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs -function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) { +function getValueState(visualElement) { + const state = [{}, {}]; + visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => { + state[0][key] = value.get(); + state[1][key] = value.getVelocity(); + }); + return state; +} +function resolveVariantFromProps(props, definition, custom, visualElement) { /** * If the variant definition is a function, resolve. */ if (typeof definition === "function") { - definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity); + const [current, velocity] = getValueState(visualElement); + definition = definition(custom !== undefined ? custom : props.custom, current, velocity); } /** * If the variant definition is a variant label, or @@ -17835,7 +17379,8 @@ function resolveVariantFromProps(props, definition, custom, currentValues = {}, * If so, resolve. This can only have returned a valid target object. */ if (typeof definition === "function") { - definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity); + const [current, velocity] = getValueState(visualElement); + definition = definition(custom !== undefined ? custom : props.custom, current, velocity); } return definition; } @@ -17988,174 +17533,6 @@ const noop_noop = (any) => any; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs -class Queue { - constructor() { - this.order = []; - this.scheduled = new Set(); - } - add(process) { - if (!this.scheduled.has(process)) { - this.scheduled.add(process); - this.order.push(process); - return true; - } - } - remove(process) { - const index = this.order.indexOf(process); - if (index !== -1) { - this.order.splice(index, 1); - this.scheduled.delete(process); - } - } - clear() { - this.order.length = 0; - this.scheduled.clear(); - } -} -function createRenderStep(runNextFrame) { - /** - * We create and reuse two queues, one to queue jobs for the current frame - * and one for the next. We reuse to avoid triggering GC after x frames. - */ - let thisFrame = new Queue(); - let nextFrame = new Queue(); - let numToRun = 0; - /** - * Track whether we're currently processing jobs in this step. This way - * we can decide whether to schedule new jobs for this frame or next. - */ - let isProcessing = false; - let flushNextFrame = false; - /** - * A set of processes which were marked keepAlive when scheduled. - */ - const toKeepAlive = new WeakSet(); - const step = { - /** - * Schedule a process to run on the next frame. - */ - schedule: (callback, keepAlive = false, immediate = false) => { - const addToCurrentFrame = immediate && isProcessing; - const queue = addToCurrentFrame ? thisFrame : nextFrame; - if (keepAlive) - toKeepAlive.add(callback); - if (queue.add(callback) && addToCurrentFrame && isProcessing) { - // If we're adding it to the currently running queue, update its measured size - numToRun = thisFrame.order.length; - } - return callback; - }, - /** - * Cancel the provided callback from running on the next frame. - */ - cancel: (callback) => { - nextFrame.remove(callback); - toKeepAlive.delete(callback); - }, - /** - * Execute all schedule callbacks. - */ - process: (frameData) => { - /** - * If we're already processing we've probably been triggered by a flushSync - * inside an existing process. Instead of executing, mark flushNextFrame - * as true and ensure we flush the following frame at the end of this one. - */ - if (isProcessing) { - flushNextFrame = true; - return; - } - isProcessing = true; - [thisFrame, nextFrame] = [nextFrame, thisFrame]; - // Clear the next frame queue - nextFrame.clear(); - // Execute this frame - numToRun = thisFrame.order.length; - if (numToRun) { - for (let i = 0; i < numToRun; i++) { - const callback = thisFrame.order[i]; - callback(frameData); - if (toKeepAlive.has(callback)) { - step.schedule(callback); - runNextFrame(); - } - } - } - isProcessing = false; - if (flushNextFrame) { - flushNextFrame = false; - step.process(frameData); - } - }, - }; - return step; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs - - -const stepsOrder = [ - "prepare", - "read", - "update", - "preRender", - "render", - "postRender", -]; -const maxElapsed = 40; -function createRenderBatcher(scheduleNextBatch, allowKeepAlive) { - let runNextFrame = false; - let useDefaultElapsed = true; - const state = { - delta: 0, - timestamp: 0, - isProcessing: false, - }; - const steps = stepsOrder.reduce((acc, key) => { - acc[key] = createRenderStep(() => (runNextFrame = true)); - return acc; - }, {}); - const processStep = (stepId) => steps[stepId].process(state); - const processBatch = () => { - const timestamp = performance.now(); - runNextFrame = false; - state.delta = useDefaultElapsed - ? 1000 / 60 - : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1); - state.timestamp = timestamp; - state.isProcessing = true; - stepsOrder.forEach(processStep); - state.isProcessing = false; - if (runNextFrame && allowKeepAlive) { - useDefaultElapsed = false; - scheduleNextBatch(processBatch); - } - }; - const wake = () => { - runNextFrame = true; - useDefaultElapsed = true; - if (!state.isProcessing) { - scheduleNextBatch(processBatch); - } - }; - const schedule = stepsOrder.reduce((acc, key) => { - const step = steps[key]; - acc[key] = (process, keepAlive = false, immediate = false) => { - if (!runNextFrame) - wake(); - return step.schedule(process, keepAlive, immediate); - }; - return acc; - }, {}); - const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process)); - return { schedule, cancel, state, steps }; -} - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/frame.mjs @@ -18275,8 +17652,8 @@ const isPrimaryPointer = (event) => { function extractEventInfo(event, pointType = "page") { return { point: { - x: event[pointType + "X"], - y: event[pointType + "Y"], + x: event[`${pointType}X`], + y: event[`${pointType}Y`], }, }; } @@ -18383,17 +17760,18 @@ class Feature { function addHoverEvent(node, isActive) { - const eventName = "pointer" + (isActive ? "enter" : "leave"); - const callbackName = "onHover" + (isActive ? "Start" : "End"); + const eventName = isActive ? "pointerenter" : "pointerleave"; + const callbackName = isActive ? "onHoverStart" : "onHoverEnd"; const handleEvent = (event, info) => { - if (event.type === "touch" || isDragActive()) + if (event.pointerType === "touch" || isDragActive()) return; const props = node.getProps(); if (node.animationState && props.whileHover) { node.animationState.setActive("whileHover", isActive); } - if (props[callbackName]) { - frame_frame.update(() => props[callbackName](event, info)); + const callback = props[callbackName]; + if (callback) { + frame_frame.postRender(() => callback(event, info)); } }; return addPointerEvent(node.current, eventName, handleEvent, { @@ -18498,26 +17876,33 @@ class PressGesture extends Feature { this.removeEndListeners = noop_noop; this.removeAccessibleListeners = noop_noop; this.startPointerPress = (startEvent, startInfo) => { - this.removeEndListeners(); if (this.isPressing) return; + this.removeEndListeners(); const props = this.node.getProps(); const endPointerPress = (endEvent, endInfo) => { if (!this.checkPressEnd()) return; - const { onTap, onTapCancel } = this.node.getProps(); - frame_frame.update(() => { - /** - * We only count this as a tap gesture if the event.target is the same - * as, or a child of, this component's element - */ + const { onTap, onTapCancel, globalTapTarget } = this.node.getProps(); + /** + * We only count this as a tap gesture if the event.target is the same + * as, or a child of, this component's element + */ + const handler = !globalTapTarget && !isNodeOrChild(this.node.current, endEvent.target) - ? onTapCancel && onTapCancel(endEvent, endInfo) - : onTap && onTap(endEvent, endInfo); - }); + ? onTapCancel + : onTap; + if (handler) { + frame_frame.update(() => handler(endEvent, endInfo)); + } }; - const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) }); - const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) }); + const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { + passive: !(props.onTap || props["onPointerUp"]), + }); + const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { + passive: !(props.onTapCancel || + props["onPointerCancel"]), + }); this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener); this.startPress(startEvent, startInfo); }; @@ -18531,7 +17916,7 @@ class PressGesture extends Feature { fireSyntheticPointerEvent("up", (event, info) => { const { onTap } = this.node.getProps(); if (onTap) { - frame_frame.update(() => onTap(event, info)); + frame_frame.postRender(() => onTap(event, info)); } }); }; @@ -18561,7 +17946,7 @@ class PressGesture extends Feature { this.node.animationState.setActive("whileTap", true); } if (onTapStart) { - frame_frame.update(() => onTapStart(event, info)); + frame_frame.postRender(() => onTapStart(event, info)); } } checkPressEnd() { @@ -18578,12 +17963,15 @@ class PressGesture extends Feature { return; const { onTapCancel } = this.node.getProps(); if (onTapCancel) { - frame_frame.update(() => onTapCancel(event, info)); + frame_frame.postRender(() => onTapCancel(event, info)); } } mount() { const props = this.node.getProps(); - const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) }); + const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, { + passive: !(props.onTapStart || + props["onPointerStart"]), + }); const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress); this.removeStartListeners = pipe(removePointerListener, removeFocusListener); } @@ -18763,46 +18151,13 @@ function shallowCompare(next, prev) { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs -/** - * Creates an object containing the latest state of every MotionValue on a VisualElement - */ -function getCurrent(visualElement) { - const current = {}; - visualElement.values.forEach((value, key) => (current[key] = value.get())); - return current; -} -/** - * Creates an object containing the latest velocity of every MotionValue on a VisualElement - */ -function getVelocity(visualElement) { - const velocity = {}; - visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity())); - return velocity; -} function resolveVariant(visualElement, definition, custom) { const props = visualElement.getProps(); - return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement)); + return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement); } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs - - -const optimizedAppearDataId = "framerAppearId"; -const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId); - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/errors.mjs - - -let warning = noop_noop; -let errors_invariant = noop_noop; -if (false) {} - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs /** * Converts seconds to milliseconds @@ -18815,233 +18170,471 @@ const millisecondsToSeconds = (milliseconds) => milliseconds / 1000; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs -const instantAnimationState = { - current: false, -}; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs +const underDampedSpring = { + type: "spring", + stiffness: 500, + damping: 25, + restSpeed: 10, +}; +const criticallyDampedSpring = (target) => ({ + type: "spring", + stiffness: 550, + damping: target === 0 ? 2 * Math.sqrt(550) : 30, + restSpeed: 10, +}); +const keyframesTransition = { + type: "keyframes", + duration: 0.8, +}; +/** + * Default easing curve is a slightly shallower version of + * the default browser easing curve. + */ +const ease = { + type: "keyframes", + ease: [0.25, 0.1, 0.35, 1], + duration: 0.3, +}; +const getDefaultTransition = (valueKey, { keyframes }) => { + if (keyframes.length > 2) { + return keyframesTransition; + } + else if (transformProps.has(valueKey)) { + return valueKey.startsWith("scale") + ? criticallyDampedSpring(keyframes[1]) + : underDampedSpring; + } + return ease; +}; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs -const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs +/** + * Decide whether a transition is defined on a given Transition. + * This filters out orchestration options and returns true + * if any options are left. + */ +function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) { + return !!Object.keys(transition).length; +} +function getValueTransition(transition, key) { + return (transition[key] || + transition["default"] || + transition); +} -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs -function isWaapiSupportedEasing(easing) { - return Boolean(!easing || - (typeof easing === "string" && supportedWaapiEasing[easing]) || - isBezierDefinition(easing) || - (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))); -} -const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`; -const supportedWaapiEasing = { - linear: "linear", - ease: "ease", - easeIn: "ease-in", - easeOut: "ease-out", - easeInOut: "ease-in-out", - circIn: cubicBezierAsString([0, 0.65, 0.55, 1]), - circOut: cubicBezierAsString([0.55, 0, 1, 0.45]), - backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]), - backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]), +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs +const instantAnimationState = { + current: false, }; -function mapEasingToNativeEasing(easing) { - if (!easing) - return undefined; - return isBezierDefinition(easing) - ? cubicBezierAsString(easing) - : Array.isArray(easing) - ? easing.map(mapEasingToNativeEasing) - : supportedWaapiEasing[easing]; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs +const isNotNull = (value) => value !== null; +function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) { + const resolvedKeyframes = keyframes.filter(isNotNull); + const index = repeat && repeatType !== "loop" && repeat % 2 === 1 + ? 0 + : resolvedKeyframes.length - 1; + return !index || finalKeyframe === undefined + ? resolvedKeyframes[index] + : finalKeyframe; } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/sync-time.mjs -function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) { - const keyframeOptions = { [valueName]: keyframes }; - if (times) - keyframeOptions.offset = times; - const easing = mapEasingToNativeEasing(ease); - /** - * If this is an easing array, apply to keyframes, not animation as a whole - */ - if (Array.isArray(easing)) - keyframeOptions.easing = easing; - return element.animate(keyframeOptions, { - delay, - duration, - easing: !Array.isArray(easing) ? easing : "linear", - fill: "both", - iterations: repeat + 1, - direction: repeatType === "reverse" ? "alternate" : "normal", - }); + +let now; +function clearTime() { + now = undefined; } +/** + * An eventloop-synchronous alternative to performance.now(). + * + * Ensures that time measurements remain consistent within a synchronous context. + * Usually calling performance.now() twice within the same synchronous context + * will return different values which isn't useful for animations when we're usually + * trying to sync animations to the same frame. + */ +const time = { + now: () => { + if (now === undefined) { + time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming + ? frameData.timestamp + : performance.now()); + } + return now; + }, + set: (newTime) => { + now = newTime; + queueMicrotask(clearTime); + }, +}; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs -function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) { - const index = repeat && repeatType !== "loop" && repeat % 2 === 1 - ? 0 - : keyframes.length - 1; - return keyframes[index]; -} +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs +/** + * Check if the value is a zero value string like "0px" or "0%" + */ +const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v); -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs -/* - Bezier function generator - This has been modified from Gaëtan Renaudeau's BezierEasing - https://github.com/gre/bezier-easing/blob/master/src/index.js - https://github.com/gre/bezier-easing/blob/master/LICENSE - - I've removed the newtonRaphsonIterate algo because in benchmarking it - wasn't noticiably faster than binarySubdivision, indeed removing it - usually improved times, depending on the curve. - I also removed the lookup table, as for the added bundle size and loop we're - only cutting ~4 or so subdivision iterations. I bumped the max iterations up - to 12 to compensate and this still tended to be faster for no perceivable - loss in accuracy. - Usage - const easeOut = cubicBezier(.17,.67,.83,.67); - const x = easeOut(0.5); // returns 0.627... -*/ -// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. -const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * - t; -const subdivisionPrecision = 0.0000001; -const subdivisionMaxIterations = 12; -function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) { - let currentX; - let currentT; - let i = 0; - do { - currentT = lowerBound + (upperBound - lowerBound) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - x; - if (currentX > 0.0) { - upperBound = currentT; - } - else { - lowerBound = currentT; - } - } while (Math.abs(currentX) > subdivisionPrecision && - ++i < subdivisionMaxIterations); - return currentT; -} -function cubicBezier(mX1, mY1, mX2, mY2) { - // If this is a linear gradient, return linear easing - if (mX1 === mY1 && mX2 === mY2) - return noop_noop; - const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2); - // If animation is at start/end, return t without easing - return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); +function isNone(value) { + if (typeof value === "number") { + return value === 0; + } + else if (value !== null) { + return value === "none" || value === "0" || isZeroValueString(value); + } + else { + return true; + } } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/ease.mjs - +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/errors.mjs -const easeIn = cubicBezier(0.42, 0, 1, 1); -const easeOut = cubicBezier(0, 0, 0.58, 1); -const easeInOut = cubicBezier(0.42, 0, 0.58, 1); +let warning = noop_noop; +let errors_invariant = noop_noop; +if (false) {} -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs -const isEasingArray = (ease) => { - return Array.isArray(ease) && typeof ease[0] !== "number"; -}; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs +/** + * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" + */ +const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v); -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs -// Accepts an easing function and returns a new one that outputs mirrored values for -// the second half of the animation. Turns easeIn into easeInOut. -const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs -// Accepts an easing function and returns a new one that outputs reversed values. -// Turns easeIn into easeOut. -const reverseEasing = (easing) => (p) => 1 - easing(1 - p); +/** + * Parse Framer's special CSS variable format into a CSS token and a fallback. + * + * ``` + * `var(--foo, #fff)` => [`--foo`, '#fff'] + * ``` + * + * @param current + */ +const splitCSSVariableRegex = +// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words +/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u; +function parseCSSVariable(current) { + const match = splitCSSVariableRegex.exec(current); + if (!match) + return [,]; + const [, token1, token2, fallback] = match; + return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback]; +} +const maxDepth = 4; +function getVariableValue(current, element, depth = 1) { + errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`); + const [token, fallback] = parseCSSVariable(current); + // No CSS variable detected + if (!token) + return; + // Attempt to read this CSS variable off the element + const resolved = window.getComputedStyle(element).getPropertyValue(token); + if (resolved) { + const trimmed = resolved.trim(); + return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed; + } + return isCSSVariableToken(fallback) + ? getVariableValue(fallback, element, depth + 1) + : fallback; +} -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/circ.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs -const circIn = (p) => 1 - Math.sin(Math.acos(p)); -const circOut = reverseEasing(circIn); -const circInOut = mirrorEasing(circOut); -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/back.mjs +const positionalKeys = new Set([ + "width", + "height", + "top", + "left", + "right", + "bottom", + "x", + "y", + "translateX", + "translateY", +]); +const isNumOrPxType = (v) => v === number || v === px; +const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]); +const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => { + if (transform === "none" || !transform) + return 0; + const matrix3d = transform.match(/^matrix3d\((.+)\)$/u); + if (matrix3d) { + return getPosFromMatrix(matrix3d[1], pos3); + } + else { + const matrix = transform.match(/^matrix\((.+)\)$/u); + if (matrix) { + return getPosFromMatrix(matrix[1], pos2); + } + else { + return 0; + } + } +}; +const transformKeys = new Set(["x", "y", "z"]); +const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key)); +function removeNonTranslationalTransform(visualElement) { + const removedTransforms = []; + nonTranslationalTransformKeys.forEach((key) => { + const value = visualElement.getValue(key); + if (value !== undefined) { + removedTransforms.push([key, value.get()]); + value.set(key.startsWith("scale") ? 1 : 0); + } + }); + return removedTransforms; +} +const positionalValues = { + // Dimensions + width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight), + height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom), + top: (_bbox, { top }) => parseFloat(top), + left: (_bbox, { left }) => parseFloat(left), + bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min), + right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min), + // Transform + x: getTranslateFromMatrix(4, 13), + y: getTranslateFromMatrix(5, 14), +}; +// Alias translate longform names +positionalValues.translateX = positionalValues.x; +positionalValues.translateY = positionalValues.y; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs +/** + * Tests a provided value against a ValueType + */ +const testValueType = (v) => (type) => type.test(v); -const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99); -const backIn = reverseEasing(backOut); -const backInOut = mirrorEasing(backIn); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs +/** + * ValueType for "auto" + */ +const auto = { + test: (v) => v === "auto", + parse: (v) => v, +}; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/anticipate.mjs -const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/map.mjs +/** + * A list of value types commonly used for dimensions + */ +const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; +/** + * Tests a dimensional value against the list of dimension ValueTypes + */ +const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v)); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs -const easingLookup = { - linear: noop_noop, - easeIn: easeIn, - easeInOut: easeInOut, - easeOut: easeOut, - circIn: circIn, - circInOut: circInOut, - circOut: circOut, - backIn: backIn, - backInOut: backInOut, - backOut: backOut, - anticipate: anticipate, -}; -const easingDefinitionToFunction = (definition) => { - if (Array.isArray(definition)) { - // If cubic bezier definition, create bezier curve - errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`); - const [x1, y1, x2, y2] = definition; - return cubicBezier(x1, y1, x2, y2); +const toResolve = new Set(); +let isScheduled = false; +let anyNeedsMeasurement = false; +function measureAllKeyframes() { + if (anyNeedsMeasurement) { + const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement); + const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element)); + const transformsToRestore = new Map(); + /** + * Write pass + * If we're measuring elements we want to remove bounding box-changing transforms. + */ + elementsToMeasure.forEach((element) => { + const removedTransforms = removeNonTranslationalTransform(element); + if (!removedTransforms.length) + return; + transformsToRestore.set(element, removedTransforms); + element.render(); + }); + // Read + resolversToMeasure.forEach((resolver) => resolver.measureInitialState()); + // Write + elementsToMeasure.forEach((element) => { + element.render(); + const restore = transformsToRestore.get(element); + if (restore) { + restore.forEach(([key, value]) => { + var _a; + (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value); + }); + } + }); + // Read + resolversToMeasure.forEach((resolver) => resolver.measureEndState()); + // Write + resolversToMeasure.forEach((resolver) => { + if (resolver.suspendedScrollY !== undefined) { + window.scrollTo(0, resolver.suspendedScrollY); + } + }); } - else if (typeof definition === "string") { - // Else lookup from table - errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`); - return easingLookup[definition]; + anyNeedsMeasurement = false; + isScheduled = false; + toResolve.forEach((resolver) => resolver.complete()); + toResolve.clear(); +} +function readAllKeyframes() { + toResolve.forEach((resolver) => { + resolver.readKeyframes(); + if (resolver.needsMeasurement) { + anyNeedsMeasurement = true; + } + }); +} +function flushKeyframeResolvers() { + readAllKeyframes(); + measureAllKeyframes(); +} +class KeyframeResolver { + constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) { + /** + * Track whether this resolver has completed. Once complete, it never + * needs to attempt keyframe resolution again. + */ + this.isComplete = false; + /** + * Track whether this resolver is async. If it is, it'll be added to the + * resolver queue and flushed in the next frame. Resolvers that aren't going + * to trigger read/write thrashing don't need to be async. + */ + this.isAsync = false; + /** + * Track whether this resolver needs to perform a measurement + * to resolve its keyframes. + */ + this.needsMeasurement = false; + /** + * Track whether this resolver is currently scheduled to resolve + * to allow it to be cancelled and resumed externally. + */ + this.isScheduled = false; + this.unresolvedKeyframes = [...unresolvedKeyframes]; + this.onComplete = onComplete; + this.name = name; + this.motionValue = motionValue; + this.element = element; + this.isAsync = isAsync; + } + scheduleResolve() { + this.isScheduled = true; + if (this.isAsync) { + toResolve.add(this); + if (!isScheduled) { + isScheduled = true; + frame_frame.read(readAllKeyframes); + frame_frame.resolveKeyframes(measureAllKeyframes); + } + } + else { + this.readKeyframes(); + this.complete(); + } } - return definition; -}; + readKeyframes() { + const { unresolvedKeyframes, name, element, motionValue } = this; + /** + * If a keyframe is null, we hydrate it either by reading it from + * the instance, or propagating from previous keyframes. + */ + for (let i = 0; i < unresolvedKeyframes.length; i++) { + if (unresolvedKeyframes[i] === null) { + /** + * If the first keyframe is null, we need to find its value by sampling the element + */ + if (i === 0) { + const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get(); + const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; + if (currentValue !== undefined) { + unresolvedKeyframes[0] = currentValue; + } + else if (element && name) { + const valueAsRead = element.readValue(name, finalKeyframe); + if (valueAsRead !== undefined && valueAsRead !== null) { + unresolvedKeyframes[0] = valueAsRead; + } + } + if (unresolvedKeyframes[0] === undefined) { + unresolvedKeyframes[0] = finalKeyframe; + } + if (motionValue && currentValue === undefined) { + motionValue.set(unresolvedKeyframes[0]); + } + } + else { + unresolvedKeyframes[i] = unresolvedKeyframes[i - 1]; + } + } + } + } + setFinalKeyframe() { } + measureInitialState() { } + renderEndStyles() { } + measureEndState() { } + complete() { + this.isComplete = true; + this.onComplete(this.unresolvedKeyframes, this.finalKeyframe); + toResolve.delete(this); + } + cancel() { + if (!this.isComplete) { + this.isScheduled = false; + toResolve.delete(this); + } + } + resume() { + if (!this.isComplete) + this.scheduleResolve(); + } +} @@ -19193,125 +18786,10 @@ const color = { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix.mjs -/* - Value in range from progress - - Given a lower limit and an upper limit, we return the value within - that range as expressed by progress (usually a number from 0 to 1) - - So progress = 0.5 would change - - from -------- to - - to - - from ---- to - - E.g. from = 10, to = 20, progress = 0.5 => 15 - - @param [number]: Lower limit of range - @param [number]: Upper limit of range - @param [number]: The progress between lower and upper limits expressed 0-1 - @return [number]: Value as calculated from progress within range (not limited within range) -*/ -const mix = (from, to, progress) => -progress * from + progress * to + from; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs -// Adapted from https://gist.github.com/mjackson/5311256 -function hueToRgb(p, q, t) { - if (t < 0) - t += 1; - if (t > 1) - t -= 1; - if (t < 1 / 6) - return p + (q - p) * 6 * t; - if (t < 1 / 2) - return q; - if (t < 2 / 3) - return p + (q - p) * (2 / 3 - t) * 6; - return p; -} -function hslaToRgba({ hue, saturation, lightness, alpha }) { - hue /= 360; - saturation /= 100; - lightness /= 100; - let red = 0; - let green = 0; - let blue = 0; - if (!saturation) { - red = green = blue = lightness; - } - else { - const q = lightness < 0.5 - ? lightness * (1 + saturation) - : lightness + saturation - lightness * saturation; - const p = 2 * lightness - q; - red = hueToRgb(p, q, hue + 1 / 3); - green = hueToRgb(p, q, hue); - blue = hueToRgb(p, q, hue - 1 / 3); - } - return { - red: Math.round(red * 255), - green: Math.round(green * 255), - blue: Math.round(blue * 255), - alpha, - }; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix-color.mjs - - - - - - - -// Linear color space blending -// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw -// Demonstrated http://codepen.io/osublake/pen/xGVVaN -const mixLinearColor = (from, to, v) => { - const fromExpo = from * from; - return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo)); -}; -const colorTypes = [hex, rgba, hsla]; -const getColorType = (v) => colorTypes.find((type) => type.test(v)); -function asRGBA(color) { - const type = getColorType(color); - errors_invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`); - let model = type.parse(color); - if (type === hsla) { - // TODO Remove this cast - needed since Framer Motion's stricter typing - model = hslaToRgba(model); - } - return model; -} -const mixColor = (from, to) => { - const fromRGBA = asRGBA(from); - const toRGBA = asRGBA(to); - const blended = { ...fromRGBA }; - return (v) => { - blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v); - blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v); - blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v); - blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v); - return rgba.transform(blended); - }; -}; - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/index.mjs - - - function test(v) { var _a, _b; return (isNaN(v) && @@ -19320,65 +18798,66 @@ function test(v) { (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0); } -const cssVarTokeniser = { - regex: cssVariableRegex, - countKey: "Vars", - token: "${v}", - parse: noop_noop, -}; -const colorTokeniser = { - regex: colorRegex, - countKey: "Colors", - token: "${c}", - parse: color.parse, -}; -const numberTokeniser = { - regex: floatRegex, - countKey: "Numbers", - token: "${n}", - parse: number.parse, -}; -function tokenise(info, { regex, countKey, token, parse }) { - const matches = info.tokenised.match(regex); - if (!matches) - return; - info["num" + countKey] = matches.length; - info.tokenised = info.tokenised.replace(regex, token); - info.values.push(...matches.map(parse)); -} +const NUMBER_TOKEN = "number"; +const COLOR_TOKEN = "color"; +const VAR_TOKEN = "var"; +const VAR_FUNCTION_TOKEN = "var("; +const SPLIT_TOKEN = "${}"; +// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex` +const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu; function analyseComplexValue(value) { const originalValue = value.toString(); - const info = { - value: originalValue, - tokenised: originalValue, - values: [], - numVars: 0, - numColors: 0, - numNumbers: 0, + const values = []; + const indexes = { + color: [], + number: [], + var: [], }; - if (info.value.includes("var(--")) - tokenise(info, cssVarTokeniser); - tokenise(info, colorTokeniser); - tokenise(info, numberTokeniser); - return info; + const types = []; + let i = 0; + const tokenised = originalValue.replace(complexRegex, (parsedValue) => { + if (color.test(parsedValue)) { + indexes.color.push(i); + types.push(COLOR_TOKEN); + values.push(color.parse(parsedValue)); + } + else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) { + indexes.var.push(i); + types.push(VAR_TOKEN); + values.push(parsedValue); + } + else { + indexes.number.push(i); + types.push(NUMBER_TOKEN); + values.push(parseFloat(parsedValue)); + } + ++i; + return SPLIT_TOKEN; + }); + const split = tokenised.split(SPLIT_TOKEN); + return { values, split, indexes, types }; } function parseComplexValue(v) { return analyseComplexValue(v).values; } function createTransformer(source) { - const { values, numColors, numVars, tokenised } = analyseComplexValue(source); - const numValues = values.length; + const { split, types } = analyseComplexValue(source); + const numSections = split.length; return (v) => { - let output = tokenised; - for (let i = 0; i < numValues; i++) { - if (i < numVars) { - output = output.replace(cssVarTokeniser.token, v[i]); - } - else if (i < numVars + numColors) { - output = output.replace(colorTokeniser.token, color.transform(v[i])); - } - else { - output = output.replace(numberTokeniser.token, sanitize(v[i])); + let output = ""; + for (let i = 0; i < numSections; i++) { + output += split[i]; + if (v[i] !== undefined) { + const type = types[i]; + if (type === NUMBER_TOKEN) { + output += sanitize(v[i]); + } + else if (type === COLOR_TOKEN) { + output += color.transform(v[i]); + } + else { + output += v[i]; + } } } return output; @@ -19399,267 +18878,416 @@ const complex = { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix-complex.mjs - - - - +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs -const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`; -function getMixer(origin, target) { - if (typeof origin === "number") { - return (v) => mix(origin, target, v); - } - else if (color.test(origin)) { - return mixColor(origin, target); - } - else { - return origin.startsWith("var(") - ? mixImmediate(origin, target) - : mixComplex(origin, target); - } +/** + * Properties that should default to 1 or 100% + */ +const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]); +function applyDefaultFilter(v) { + const [name, value] = v.slice(0, -1).split("("); + if (name === "drop-shadow") + return v; + const [number] = value.match(floatRegex) || []; + if (!number) + return v; + const unit = value.replace(number, ""); + let defaultValue = maxDefaults.has(name) ? 1 : 0; + if (number !== value) + defaultValue *= 100; + return name + "(" + defaultValue + unit + ")"; } -const mixArray = (from, to) => { - const output = [...from]; - const numValues = output.length; - const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i])); - return (v) => { - for (let i = 0; i < numValues; i++) { - output[i] = blendValue[i](v); - } - return output; - }; -}; -const mixObject = (origin, target) => { - const output = { ...origin, ...target }; - const blendValue = {}; - for (const key in output) { - if (origin[key] !== undefined && target[key] !== undefined) { - blendValue[key] = getMixer(origin[key], target[key]); - } - } - return (v) => { - for (const key in blendValue) { - output[key] = blendValue[key](v); - } - return output; - }; -}; -const mixComplex = (origin, target) => { - const template = complex.createTransformer(target); - const originStats = analyseComplexValue(origin); - const targetStats = analyseComplexValue(target); - const canInterpolate = originStats.numVars === targetStats.numVars && - originStats.numColors === targetStats.numColors && - originStats.numNumbers >= targetStats.numNumbers; - if (canInterpolate) { - return pipe(mixArray(originStats.values, targetStats.values), template); - } - else { - warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`); - return mixImmediate(origin, target); - } +const functionRegex = /\b([a-z-]*)\(.*?\)/gu; +const filter = { + ...complex, + getAnimatableNone: (v) => { + const functions = v.match(functionRegex); + return functions ? functions.map(applyDefaultFilter).join(" ") : v; + }, }; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/progress.mjs -/* - Progress within given range +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs - Given a lower limit and an upper limit, we return the progress - (expressed as a number 0-1) represented by the given value, and - limit that progress to within 0-1. - @param [number]: Lower limit - @param [number]: Upper limit - @param [number]: Value to find progress within given range - @return [number]: Progress of value within range as expressed 0-1 -*/ -const progress = (from, to, value) => { - const toFromDifference = to - from; - return toFromDifference === 0 ? 1 : (value - from) / toFromDifference; + + +/** + * A map of default value types for common values + */ +const defaultValueTypes = { + ...numberValueTypes, + // Color props + color: color, + backgroundColor: color, + outlineColor: color, + fill: color, + stroke: color, + // Border props + borderColor: color, + borderTopColor: color, + borderRightColor: color, + borderBottomColor: color, + borderLeftColor: color, + filter: filter, + WebkitFilter: filter, }; +/** + * Gets the default ValueType for the provided value key + */ +const getDefaultValueType = (key) => defaultValueTypes[key]; -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/interpolate.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs +function animatable_none_getAnimatableNone(key, value) { + let defaultValueType = getDefaultValueType(key); + if (defaultValueType !== filter) + defaultValueType = complex; + // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target + return defaultValueType.getAnimatableNone + ? defaultValueType.getAnimatableNone(value) + : undefined; +} +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs -const mixNumber = (from, to) => (p) => mix(from, to, p); -function detectMixerFactory(v) { - if (typeof v === "number") { - return mixNumber; - } - else if (typeof v === "string") { - return color.test(v) ? mixColor : mixComplex; - } - else if (Array.isArray(v)) { - return mixArray; - } - else if (typeof v === "object") { - return mixObject; - } - return mixNumber; -} -function createMixers(output, ease, customMixer) { - const mixers = []; - const mixerFactory = customMixer || detectMixerFactory(output[0]); - const numMixers = output.length - 1; - for (let i = 0; i < numMixers; i++) { - let mixer = mixerFactory(output[i], output[i + 1]); - if (ease) { - const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease; - mixer = pipe(easingFunction, mixer); - } - mixers.push(mixer); - } - return mixers; -} /** - * Create a function that maps from a numerical input array to a generic output array. - * - * Accepts: - * - Numbers - * - Colors (hex, hsl, hsla, rgb, rgba) - * - Complex (combinations of one or more numbers or strings) - * - * ```jsx - * const mixColor = interpolate([0, 1], ['#fff', '#000']) - * - * mixColor(0.5) // 'rgba(128, 128, 128, 1)' - * ``` - * - * TODO Revist this approach once we've moved to data models for values, - * probably not needed to pregenerate mixer functions. - * - * @public + * If we encounter keyframes like "none" or "0" and we also have keyframes like + * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for + * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into + * zero equivalents, i.e. "#fff0" or "0px 0px". */ -function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { - const inputLength = input.length; - errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length"); - /** - * If we're only provided a single input, we can just make a function - * that returns the output. - */ - if (inputLength === 1) - return () => output[0]; - // If input runs highest -> lowest, reverse both arrays - if (input[0] > input[inputLength - 1]) { - input = [...input].reverse(); - output = [...output].reverse(); +const invalidTemplates = new Set(["auto", "none", "0"]); +function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) { + let i = 0; + let animatableTemplate = undefined; + while (i < unresolvedKeyframes.length && !animatableTemplate) { + const keyframe = unresolvedKeyframes[i]; + if (typeof keyframe === "string" && + !invalidTemplates.has(keyframe) && + analyseComplexValue(keyframe).values.length) { + animatableTemplate = unresolvedKeyframes[i]; + } + i++; } - const mixers = createMixers(output, ease, mixer); - const numMixers = mixers.length; - const interpolator = (v) => { - let i = 0; - if (numMixers > 1) { - for (; i < input.length - 2; i++) { - if (v < input[i + 1]) - break; - } + if (animatableTemplate && name) { + for (const noneIndex of noneKeyframeIndexes) { + unresolvedKeyframes[noneIndex] = animatable_none_getAnimatableNone(name, animatableTemplate); } - const progressInRange = progress(input[i], input[i + 1], v); - return mixers[i](progressInRange); - }; - return isClamp - ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v)) - : interpolator; + } } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs -function fillOffset(offset, remaining) { - const min = offset[offset.length - 1]; - for (let i = 1; i <= remaining; i++) { - const offsetProgress = progress(0, remaining, i); - offset.push(mix(min, 1, offsetProgress)); - } -} -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs -function defaultOffset(arr) { - const offset = [0]; - fillOffset(offset, arr.length - 1); - return offset; +class DOMKeyframesResolver extends KeyframeResolver { + constructor(unresolvedKeyframes, onComplete, name, motionValue) { + super(unresolvedKeyframes, onComplete, name, motionValue, motionValue === null || motionValue === void 0 ? void 0 : motionValue.owner, true); + } + readKeyframes() { + const { unresolvedKeyframes, element, name } = this; + if (!element.current) + return; + super.readKeyframes(); + /** + * If any keyframe is a CSS variable, we need to find its value by sampling the element + */ + for (let i = 0; i < unresolvedKeyframes.length; i++) { + const keyframe = unresolvedKeyframes[i]; + if (typeof keyframe === "string" && isCSSVariableToken(keyframe)) { + const resolved = getVariableValue(keyframe, element.current); + if (resolved !== undefined) { + unresolvedKeyframes[i] = resolved; + } + if (i === unresolvedKeyframes.length - 1) { + this.finalKeyframe = keyframe; + } + } + } + /** + * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes. + * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which + * have a far bigger performance impact. + */ + this.resolveNoneKeyframes(); + /** + * Check to see if unit type has changed. If so schedule jobs that will + * temporarily set styles to the destination keyframes. + * Skip if we have more than two keyframes or this isn't a positional value. + * TODO: We can throw if there are multiple keyframes and the value type changes. + */ + if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) { + return; + } + const [origin, target] = unresolvedKeyframes; + const originType = findDimensionValueType(origin); + const targetType = findDimensionValueType(target); + /** + * Either we don't recognise these value types or we can animate between them. + */ + if (originType === targetType) + return; + /** + * If both values are numbers or pixels, we can animate between them by + * converting them to numbers. + */ + if (isNumOrPxType(originType) && isNumOrPxType(targetType)) { + for (let i = 0; i < unresolvedKeyframes.length; i++) { + const value = unresolvedKeyframes[i]; + if (typeof value === "string") { + unresolvedKeyframes[i] = parseFloat(value); + } + } + } + else { + /** + * Else, the only way to resolve this is by measuring the element. + */ + this.needsMeasurement = true; + } + } + resolveNoneKeyframes() { + const { unresolvedKeyframes, name } = this; + const noneKeyframeIndexes = []; + for (let i = 0; i < unresolvedKeyframes.length; i++) { + if (isNone(unresolvedKeyframes[i])) { + noneKeyframeIndexes.push(i); + } + } + if (noneKeyframeIndexes.length) { + makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name); + } + } + measureInitialState() { + const { element, unresolvedKeyframes, name } = this; + if (!element.current) + return; + if (name === "height") { + this.suspendedScrollY = window.pageYOffset; + } + this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); + unresolvedKeyframes[0] = this.measuredOrigin; + // Set final key frame to measure after next render + const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; + if (measureKeyframe !== undefined) { + element.getValue(name, measureKeyframe).jump(measureKeyframe, false); + } + } + measureEndState() { + var _a; + const { element, name, unresolvedKeyframes } = this; + if (!element.current) + return; + const value = element.getValue(name); + value && value.jump(this.measuredOrigin, false); + const finalKeyframeIndex = unresolvedKeyframes.length - 1; + const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex]; + unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); + if (finalKeyframe !== null && this.finalKeyframe === undefined) { + this.finalKeyframe = finalKeyframe; + } + // If we removed transform values, reapply them before the next render + if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) { + this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => { + element + .getValue(unsetTransformName) + .set(unsetTransformValue); + }); + } + this.resolveNoneKeyframes(); + } } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs -function convertOffsetToTimes(offset, duration) { - return offset.map((o) => o * duration); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/memo.mjs +function memo(callback) { + let result; + return () => { + if (result === undefined) + result = callback(); + return result; + }; } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs +/** + * Check if a value is animatable. Examples: + * + * ✅: 100, "100px", "#fff" + * ❌: "block", "url(2.jpg)" + * @param value + * + * @internal + */ +const isAnimatable = (value, name) => { + // If the list of keys tat might be non-animatable grows, replace with Set + if (name === "zIndex") + return false; + // If it's a number or a keyframes array, we can animate it. We might at some point + // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, + // but for now lets leave it like this for performance reasons + if (typeof value === "number" || Array.isArray(value)) + return true; + if (typeof value === "string" && // It's animatable if we have a string + (complex.test(value) || value === "0") && // And it contains numbers and/or colors + !value.startsWith("url(") // Unless it starts with "url(" + ) { + return true; + } + return false; +}; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs -function defaultEasing(values, easing) { - return values.map(() => easing || easeInOut).splice(0, values.length - 1); + +function hasKeyframesChanged(keyframes) { + const current = keyframes[0]; + if (keyframes.length === 1) + return true; + for (let i = 0; i < keyframes.length; i++) { + if (keyframes[i] !== current) + return true; + } } -function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) { +function canAnimate(keyframes, name, type, velocity) { /** - * Easing functions can be externally defined as strings. Here we convert them - * into actual functions. + * Check if we're able to animate between the start and end keyframes, + * and throw a warning if we're attempting to animate between one that's + * animatable and another that isn't. */ - const easingFunctions = isEasingArray(ease) - ? ease.map(easingDefinitionToFunction) - : easingDefinitionToFunction(ease); + const originKeyframe = keyframes[0]; + if (originKeyframe === null) + return false; /** - * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator - * to reduce GC during animation. + * These aren't traditionally animatable but we do support them. + * In future we could look into making this more generic or replacing + * this function with mix() === mixImmediate */ - const state = { - done: false, - value: keyframeValues[0], - }; + if (name === "display" || name === "visibility") + return true; + const targetKeyframe = keyframes[keyframes.length - 1]; + const isOriginAnimatable = isAnimatable(originKeyframe, name); + const isTargetAnimatable = isAnimatable(targetKeyframe, name); + warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`); + // Always skip if any of these are true + if (!isOriginAnimatable || !isTargetAnimatable) { + return false; + } + return hasKeyframesChanged(keyframes) || (type === "spring" && velocity); +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs + + + + + +class BaseAnimation { + constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) { + // Track whether the animation has been stopped. Stopped animations won't restart. + this.isStopped = false; + this.hasAttemptedResolve = false; + this.options = { + autoplay, + delay, + type, + repeat, + repeatDelay, + repeatType, + ...options, + }; + this.updateFinishedPromise(); + } /** - * Create a times array based on the provided 0-1 offsets + * A getter for resolved data. If keyframes are not yet resolved, accessing + * this.resolved will synchronously flush all pending keyframe resolvers. + * This is a deoptimisation, but at its worst still batches read/writes. */ - const absoluteTimes = convertOffsetToTimes( - // Only use the provided offsets if they're the correct length - // TODO Maybe we should warn here if there's a length mismatch - times && times.length === keyframeValues.length - ? times - : defaultOffset(keyframeValues), duration); - const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, { - ease: Array.isArray(easingFunctions) - ? easingFunctions - : defaultEasing(keyframeValues, easingFunctions), - }); - return { - calculatedDuration: duration, - next: (t) => { - state.value = mapTimeToKeyframe(t); - state.done = t >= duration; - return state; - }, - }; + get resolved() { + if (!this._resolved && !this.hasAttemptedResolve) { + flushKeyframeResolvers(); + } + return this._resolved; + } + /** + * A method to be called when the keyframes resolver completes. This method + * will check if its possible to run the animation and, if not, skip it. + * Otherwise, it will call initPlayback on the implementing class. + */ + onKeyframesResolved(keyframes, finalKeyframe) { + this.hasAttemptedResolve = true; + const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options; + /** + * If we can't animate this value with the resolved keyframes + * then we should complete it immediately. + */ + if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) { + // Finish immediately + if (instantAnimationState.current || !delay) { + onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe)); + onComplete === null || onComplete === void 0 ? void 0 : onComplete(); + this.resolveFinishedPromise(); + return; + } + // Finish after a delay + else { + this.options.duration = 0; + } + } + const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe); + if (resolvedAnimation === false) + return; + this._resolved = { + keyframes, + finalKeyframe, + ...resolvedAnimation, + }; + this.onPostResolved(); + } + onPostResolved() { } + /** + * Allows the returned animation to be awaited or promise-chained. Currently + * resolves when the animation finishes at all but in a future update could/should + * reject if its cancels. + */ + then(resolve, reject) { + return this.currentFinishedPromise.then(resolve, reject); + } + updateFinishedPromise() { + this.currentFinishedPromise = new Promise((resolve) => { + this.resolveFinishedPromise = resolve; + }); + } } @@ -19805,7 +19433,6 @@ function getSpringOptions(options) { springOptions = { ...springOptions, ...derived, - velocity: 0.0, mass: 1.0, }; springOptions.isResolvedFromDuration = true; @@ -19820,8 +19447,11 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) { * to reduce GC during animation. */ const state = { done: false, value: origin }; - const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options); - const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0; + const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({ + ...options, + velocity: -millisecondsToSeconds(options.velocity || 0), + }); + const initialVelocity = velocity || 0.0; const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass)); const initialDelta = target - origin; const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass)); @@ -19959,7 +19589,7 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b timeReachedBoundary = t; spring$1 = spring({ keyframes: [state.value, nearestBoundary(state.value)], - velocity: calcGeneratorVelocity(calcLatest, t, state.value), + velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000 damping: bounceDamping, stiffness: bounceStiffness, restDelta, @@ -19986,7 +19616,7 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b * If we have a spring and the provided t is beyond the moment the friction * animation crossed the min/max boundary, use the spring. */ - if (timeReachedBoundary !== undefined && t > timeReachedBoundary) { + if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) { return spring$1.next(t - timeReachedBoundary); } else { @@ -19999,24 +19629,585 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs -const frameloopDriver = (update) => { - const passTimestamp = ({ timestamp }) => update(timestamp); +/* + Bezier function generator + This has been modified from Gaëtan Renaudeau's BezierEasing + https://github.com/gre/bezier-easing/blob/master/src/index.js + https://github.com/gre/bezier-easing/blob/master/LICENSE + + I've removed the newtonRaphsonIterate algo because in benchmarking it + wasn't noticiably faster than binarySubdivision, indeed removing it + usually improved times, depending on the curve. + I also removed the lookup table, as for the added bundle size and loop we're + only cutting ~4 or so subdivision iterations. I bumped the max iterations up + to 12 to compensate and this still tended to be faster for no perceivable + loss in accuracy. + Usage + const easeOut = cubicBezier(.17,.67,.83,.67); + const x = easeOut(0.5); // returns 0.627... +*/ +// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. +const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * + t; +const subdivisionPrecision = 0.0000001; +const subdivisionMaxIterations = 12; +function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) { + let currentX; + let currentT; + let i = 0; + do { + currentT = lowerBound + (upperBound - lowerBound) / 2.0; + currentX = calcBezier(currentT, mX1, mX2) - x; + if (currentX > 0.0) { + upperBound = currentT; + } + else { + lowerBound = currentT; + } + } while (Math.abs(currentX) > subdivisionPrecision && + ++i < subdivisionMaxIterations); + return currentT; +} +function cubicBezier(mX1, mY1, mX2, mY2) { + // If this is a linear gradient, return linear easing + if (mX1 === mY1 && mX2 === mY2) + return noop_noop; + const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2); + // If animation is at start/end, return t without easing + return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/ease.mjs + + +const easeIn = cubicBezier(0.42, 0, 1, 1); +const easeOut = cubicBezier(0, 0, 0.58, 1); +const easeInOut = cubicBezier(0.42, 0, 0.58, 1); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs +const isEasingArray = (ease) => { + return Array.isArray(ease) && typeof ease[0] !== "number"; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs +// Accepts an easing function and returns a new one that outputs mirrored values for +// the second half of the animation. Turns easeIn into easeInOut. +const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs +// Accepts an easing function and returns a new one that outputs reversed values. +// Turns easeIn into easeOut. +const reverseEasing = (easing) => (p) => 1 - easing(1 - p); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/circ.mjs + + + +const circIn = (p) => 1 - Math.sin(Math.acos(p)); +const circOut = reverseEasing(circIn); +const circInOut = mirrorEasing(circIn); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/back.mjs + + + + +const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99); +const backIn = reverseEasing(backOut); +const backInOut = mirrorEasing(backIn); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/anticipate.mjs + + +const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/map.mjs + + + + + + + + +const easingLookup = { + linear: noop_noop, + easeIn: easeIn, + easeInOut: easeInOut, + easeOut: easeOut, + circIn: circIn, + circInOut: circInOut, + circOut: circOut, + backIn: backIn, + backInOut: backInOut, + backOut: backOut, + anticipate: anticipate, +}; +const easingDefinitionToFunction = (definition) => { + if (Array.isArray(definition)) { + // If cubic bezier definition, create bezier curve + errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`); + const [x1, y1, x2, y2] = definition; + return cubicBezier(x1, y1, x2, y2); + } + else if (typeof definition === "string") { + // Else lookup from table + errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`); + return easingLookup[definition]; + } + return definition; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/progress.mjs +/* + Progress within given range + + Given a lower limit and an upper limit, we return the progress + (expressed as a number 0-1) represented by the given value, and + limit that progress to within 0-1. + + @param [number]: Lower limit + @param [number]: Upper limit + @param [number]: Value to find progress within given range + @return [number]: Progress of value within range as expressed 0-1 +*/ +const progress = (from, to, value) => { + const toFromDifference = to - from; + return toFromDifference === 0 ? 1 : (value - from) / toFromDifference; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/number.mjs +/* + Value in range from progress + + Given a lower limit and an upper limit, we return the value within + that range as expressed by progress (usually a number from 0 to 1) + + So progress = 0.5 would change + + from -------- to + + to + + from ---- to + + E.g. from = 10, to = 20, progress = 0.5 => 15 + + @param [number]: Lower limit of range + @param [number]: Upper limit of range + @param [number]: The progress between lower and upper limits expressed 0-1 + @return [number]: Value as calculated from progress within range (not limited within range) +*/ +const mixNumber = (from, to, progress) => { + return from + (to - from) * progress; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs +// Adapted from https://gist.github.com/mjackson/5311256 +function hueToRgb(p, q, t) { + if (t < 0) + t += 1; + if (t > 1) + t -= 1; + if (t < 1 / 6) + return p + (q - p) * 6 * t; + if (t < 1 / 2) + return q; + if (t < 2 / 3) + return p + (q - p) * (2 / 3 - t) * 6; + return p; +} +function hslaToRgba({ hue, saturation, lightness, alpha }) { + hue /= 360; + saturation /= 100; + lightness /= 100; + let red = 0; + let green = 0; + let blue = 0; + if (!saturation) { + red = green = blue = lightness; + } + else { + const q = lightness < 0.5 + ? lightness * (1 + saturation) + : lightness + saturation - lightness * saturation; + const p = 2 * lightness - q; + red = hueToRgb(p, q, hue + 1 / 3); + green = hueToRgb(p, q, hue); + blue = hueToRgb(p, q, hue - 1 / 3); + } return { - start: () => frame_frame.update(passTimestamp, true), - stop: () => cancelFrame(passTimestamp), - /** - * If we're processing this frame we can use the - * framelocked timestamp to keep things in sync. - */ - now: () => frameData.isProcessing ? frameData.timestamp : performance.now(), + red: Math.round(red * 255), + green: Math.round(green * 255), + blue: Math.round(blue * 255), + alpha, + }; +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/color.mjs + + + + + + + +// Linear color space blending +// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw +// Demonstrated http://codepen.io/osublake/pen/xGVVaN +const mixLinearColor = (from, to, v) => { + const fromExpo = from * from; + const expo = v * (to * to - fromExpo) + fromExpo; + return expo < 0 ? 0 : Math.sqrt(expo); +}; +const colorTypes = [hex, rgba, hsla]; +const getColorType = (v) => colorTypes.find((type) => type.test(v)); +function asRGBA(color) { + const type = getColorType(color); + errors_invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`); + let model = type.parse(color); + if (type === hsla) { + // TODO Remove this cast - needed since Framer Motion's stricter typing + model = hslaToRgba(model); + } + return model; +} +const mixColor = (from, to) => { + const fromRGBA = asRGBA(from); + const toRGBA = asRGBA(to); + const blended = { ...fromRGBA }; + return (v) => { + blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v); + blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v); + blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v); + blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v); + return rgba.transform(blended); + }; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/visibility.mjs +const invisibleValues = new Set(["none", "hidden"]); +/** + * Returns a function that, when provided a progress value between 0 and 1, + * will return the "none" or "hidden" string only when the progress is that of + * the origin or target. + */ +function mixVisibility(origin, target) { + if (invisibleValues.has(origin)) { + return (p) => (p <= 0 ? origin : target); + } + else { + return (p) => (p >= 1 ? target : origin); + } +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/complex.mjs + + + + + + + + + +function mixImmediate(a, b) { + return (p) => (p > 0 ? b : a); +} +function complex_mixNumber(a, b) { + return (p) => mixNumber(a, b, p); +} +function getMixer(a) { + if (typeof a === "number") { + return complex_mixNumber; + } + else if (typeof a === "string") { + return isCSSVariableToken(a) + ? mixImmediate + : color.test(a) + ? mixColor + : mixComplex; + } + else if (Array.isArray(a)) { + return mixArray; + } + else if (typeof a === "object") { + return color.test(a) ? mixColor : mixObject; + } + return mixImmediate; +} +function mixArray(a, b) { + const output = [...a]; + const numValues = output.length; + const blendValue = a.map((v, i) => getMixer(v)(v, b[i])); + return (p) => { + for (let i = 0; i < numValues; i++) { + output[i] = blendValue[i](p); + } + return output; + }; +} +function mixObject(a, b) { + const output = { ...a, ...b }; + const blendValue = {}; + for (const key in output) { + if (a[key] !== undefined && b[key] !== undefined) { + blendValue[key] = getMixer(a[key])(a[key], b[key]); + } + } + return (v) => { + for (const key in blendValue) { + output[key] = blendValue[key](v); + } + return output; }; +} +function matchOrder(origin, target) { + var _a; + const orderedOrigin = []; + const pointers = { color: 0, var: 0, number: 0 }; + for (let i = 0; i < target.values.length; i++) { + const type = target.types[i]; + const originIndex = origin.indexes[type][pointers[type]]; + const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0; + orderedOrigin[i] = originValue; + pointers[type]++; + } + return orderedOrigin; +} +const mixComplex = (origin, target) => { + const template = complex.createTransformer(target); + const originStats = analyseComplexValue(origin); + const targetStats = analyseComplexValue(target); + const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && + originStats.indexes.color.length === targetStats.indexes.color.length && + originStats.indexes.number.length >= targetStats.indexes.number.length; + if (canInterpolate) { + if ((invisibleValues.has(origin) && + !targetStats.values.length) || + (invisibleValues.has(target) && + !originStats.values.length)) { + return mixVisibility(origin, target); + } + return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template); + } + else { + warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`); + return mixImmediate(origin, target); + } }; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix/index.mjs + + + +function mix(from, to, p) { + if (typeof from === "number" && + typeof to === "number" && + typeof p === "number") { + return mixNumber(from, to, p); + } + const mixer = getMixer(from); + return mixer(from, to); +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/interpolate.mjs + + + + + + + +function createMixers(output, ease, customMixer) { + const mixers = []; + const mixerFactory = customMixer || mix; + const numMixers = output.length - 1; + for (let i = 0; i < numMixers; i++) { + let mixer = mixerFactory(output[i], output[i + 1]); + if (ease) { + const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease; + mixer = pipe(easingFunction, mixer); + } + mixers.push(mixer); + } + return mixers; +} +/** + * Create a function that maps from a numerical input array to a generic output array. + * + * Accepts: + * - Numbers + * - Colors (hex, hsl, hsla, rgb, rgba) + * - Complex (combinations of one or more numbers or strings) + * + * ```jsx + * const mixColor = interpolate([0, 1], ['#fff', '#000']) + * + * mixColor(0.5) // 'rgba(128, 128, 128, 1)' + * ``` + * + * TODO Revist this approach once we've moved to data models for values, + * probably not needed to pregenerate mixer functions. + * + * @public + */ +function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { + const inputLength = input.length; + errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length"); + /** + * If we're only provided a single input, we can just make a function + * that returns the output. + */ + if (inputLength === 1) + return () => output[0]; + if (inputLength === 2 && input[0] === input[1]) + return () => output[1]; + // If input runs highest -> lowest, reverse both arrays + if (input[0] > input[inputLength - 1]) { + input = [...input].reverse(); + output = [...output].reverse(); + } + const mixers = createMixers(output, ease, mixer); + const numMixers = mixers.length; + const interpolator = (v) => { + let i = 0; + if (numMixers > 1) { + for (; i < input.length - 2; i++) { + if (v < input[i + 1]) + break; + } + } + const progressInRange = progress(input[i], input[i + 1], v); + return mixers[i](progressInRange); + }; + return isClamp + ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v)) + : interpolator; +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs + + + +function fillOffset(offset, remaining) { + const min = offset[offset.length - 1]; + for (let i = 1; i <= remaining; i++) { + const offsetProgress = progress(0, remaining, i); + offset.push(mixNumber(min, 1, offsetProgress)); + } +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs + + +function defaultOffset(arr) { + const offset = [0]; + fillOffset(offset, arr.length - 1); + return offset; +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs +function convertOffsetToTimes(offset, duration) { + return offset.map((o) => o * duration); +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs + + + + + + + +function defaultEasing(values, easing) { + return values.map(() => easing || easeInOut).splice(0, values.length - 1); +} +function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) { + /** + * Easing functions can be externally defined as strings. Here we convert them + * into actual functions. + */ + const easingFunctions = isEasingArray(ease) + ? ease.map(easingDefinitionToFunction) + : easingDefinitionToFunction(ease); + /** + * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator + * to reduce GC during animation. + */ + const state = { + done: false, + value: keyframeValues[0], + }; + /** + * Create a times array based on the provided 0-1 offsets + */ + const absoluteTimes = convertOffsetToTimes( + // Only use the provided offsets if they're the correct length + // TODO Maybe we should warn here if there's a length mismatch + times && times.length === keyframeValues.length + ? times + : defaultOffset(keyframeValues), duration); + const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, { + ease: Array.isArray(easingFunctions) + ? easingFunctions + : defaultEasing(keyframeValues, easingFunctions), + }); + return { + calculatedDuration: duration, + next: (t) => { + state.value = mapTimeToKeyframe(t); + state.done = t >= duration; + return state; + }, + }; +} + + + ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs /** * Implement a practical max duration for keyframe generation @@ -20036,7 +20227,31 @@ function calcGeneratorDuration(generator) { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/js/index.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs + + + +const frameloopDriver = (update) => { + const passTimestamp = ({ timestamp }) => update(timestamp); + return { + start: () => frame_frame.update(passTimestamp, true), + stop: () => cancelFrame(passTimestamp), + /** + * If we're processing this frame we can use the + * framelocked timestamp to keep things in sync. + */ + now: () => (frameData.isProcessing ? frameData.timestamp : time.now()), + }; +}; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs + + + + + @@ -20046,117 +20261,182 @@ function calcGeneratorDuration(generator) { -const types = { +const generators = { decay: inertia, inertia: inertia, tween: keyframes_keyframes, keyframes: keyframes_keyframes, spring: spring, }; +const percentToProgress = (percent) => percent / 100; /** - * Animate a single value on the main thread. - * - * This function is written, where functionality overlaps, - * to be largely spec-compliant with WAAPI to allow fungibility - * between the two. + * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of + * features we expose publically. Mostly the compatibility is to ensure visual identity + * between both WAAPI and main thread animations. */ -function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) { - let speed = 1; - let hasStopped = false; - let resolveFinishedPromise; - let currentFinishedPromise; - /** - * Resolve the current Promise every time we enter the - * finished state. This is WAAPI-compatible behaviour. - */ - const updateFinishedPromise = () => { - currentFinishedPromise = new Promise((resolve) => { - resolveFinishedPromise = resolve; - }); - }; - // Create the first finished promise - updateFinishedPromise(); - let animationDriver; - const generatorFactory = types[type] || keyframes_keyframes; - /** - * If this isn't the keyframes generator and we've been provided - * strings as keyframes, we need to interpolate these. - * TODO: Support velocity for units and complex value types/ - */ - let mapNumbersToKeyframes; - if (generatorFactory !== keyframes_keyframes && - typeof keyframes$1[0] !== "number") { - mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, { - clamp: false, - }); - keyframes$1 = [0, 100]; +class MainThreadAnimation extends BaseAnimation { + constructor({ KeyframeResolver: KeyframeResolver$1 = KeyframeResolver, ...options }) { + super(options); + /** + * The time at which the animation was paused. + */ + this.holdTime = null; + /** + * The time at which the animation was started. + */ + this.startTime = null; + /** + * The time at which the animation was cancelled. + */ + this.cancelTime = null; + /** + * The current time of the animation. + */ + this.currentTime = 0; + /** + * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed. + */ + this.playbackSpeed = 1; + /** + * The state of the animation to apply when the animation is resolved. This + * allows calls to the public API to control the animation before it is resolved, + * without us having to resolve it first. + */ + this.pendingPlayState = "running"; + this.state = "idle"; + /** + * This method is bound to the instance to fix a pattern where + * animation.stop is returned as a reference from a useEffect. + */ + this.stop = () => { + this.resolver.cancel(); + this.isStopped = true; + if (this.state === "idle") + return; + this.teardown(); + const { onStop } = this.options; + onStop && onStop(); + }; + const { name, motionValue, keyframes } = this.options; + const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe); + if (name && motionValue && motionValue.owner) { + this.resolver = motionValue.owner.resolveKeyframes(keyframes, onResolved, name, motionValue); + } + else { + this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue); + } + this.resolver.scheduleResolve(); } - const generator = generatorFactory({ ...options, keyframes: keyframes$1 }); - let mirroredGenerator; - if (repeatType === "mirror") { - mirroredGenerator = generatorFactory({ - ...options, - keyframes: [...keyframes$1].reverse(), - velocity: -(options.velocity || 0), - }); + initPlayback(keyframes$1) { + const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options; + const generatorFactory = generators[type] || keyframes_keyframes; + /** + * If our generator doesn't support mixing numbers, we need to replace keyframes with + * [0, 100] and then make a function that maps that to the actual keyframes. + * + * 100 is chosen instead of 1 as it works nicer with spring animations. + */ + let mapPercentToKeyframes; + let mirroredGenerator; + if (generatorFactory !== keyframes_keyframes && + typeof keyframes$1[0] !== "number") { + if (false) {} + mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1])); + keyframes$1 = [0, 100]; + } + const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 }); + /** + * If we have a mirror repeat type we need to create a second generator that outputs the + * mirrored (not reversed) animation and later ping pong between the two generators. + */ + if (repeatType === "mirror") { + mirroredGenerator = generatorFactory({ + ...this.options, + keyframes: [...keyframes$1].reverse(), + velocity: -velocity, + }); + } + /** + * If duration is undefined and we have repeat options, + * we need to calculate a duration from the generator. + * + * We set it to the generator itself to cache the duration. + * Any timeline resolver will need to have already precalculated + * the duration by this step. + */ + if (generator.calculatedDuration === null) { + generator.calculatedDuration = calcGeneratorDuration(generator); + } + const { calculatedDuration } = generator; + const resolvedDuration = calculatedDuration + repeatDelay; + const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay; + return { + generator, + mirroredGenerator, + mapPercentToKeyframes, + calculatedDuration, + resolvedDuration, + totalDuration, + }; } - let playState = "idle"; - let holdTime = null; - let startTime = null; - let cancelTime = null; - /** - * If duration is undefined and we have repeat options, - * we need to calculate a duration from the generator. - * - * We set it to the generator itself to cache the duration. - * Any timeline resolver will need to have already precalculated - * the duration by this step. - */ - if (generator.calculatedDuration === null && repeat) { - generator.calculatedDuration = calcGeneratorDuration(generator); - } - const { calculatedDuration } = generator; - let resolvedDuration = Infinity; - let totalDuration = Infinity; - if (calculatedDuration !== null) { - resolvedDuration = calculatedDuration + repeatDelay; - totalDuration = resolvedDuration * (repeat + 1) - repeatDelay; - } - let currentTime = 0; - const tick = (timestamp) => { - if (startTime === null) - return; + onPostResolved() { + const { autoplay = true } = this.options; + this.play(); + if (this.pendingPlayState === "paused" || !autoplay) { + this.pause(); + } + else { + this.state = this.pendingPlayState; + } + } + tick(timestamp, sample = false) { + const { resolved } = this; + // If the animations has failed to resolve, return the final keyframe. + if (!resolved) { + const { keyframes } = this.options; + return { done: true, value: keyframes[keyframes.length - 1] }; + } + const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved; + if (this.startTime === null) + return generator.next(0); + const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options; /** * requestAnimationFrame timestamps can come through as lower than * the startTime as set by performance.now(). Here we prevent this, * though in the future it could be possible to make setting startTime * a pending operation that gets resolved here. */ - if (speed > 0) - startTime = Math.min(startTime, timestamp); - if (speed < 0) - startTime = Math.min(timestamp - totalDuration / speed, startTime); - if (holdTime !== null) { - currentTime = holdTime; + if (this.speed > 0) { + this.startTime = Math.min(this.startTime, timestamp); + } + else if (this.speed < 0) { + this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime); + } + // Update currentTime + if (sample) { + this.currentTime = timestamp; + } + else if (this.holdTime !== null) { + this.currentTime = this.holdTime; } else { // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 = // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for // example. - currentTime = Math.round(timestamp - startTime) * speed; + this.currentTime = + Math.round(timestamp - this.startTime) * this.speed; } // Rebase on delay - const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1); - const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration; - currentTime = Math.max(timeWithoutDelay, 0); - /** - * If this animation has finished, set the current time - * to the total duration. - */ - if (playState === "finished" && holdTime === null) { - currentTime = totalDuration; + const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1); + const isInDelayPhase = this.speed >= 0 + ? timeWithoutDelay < 0 + : timeWithoutDelay > totalDuration; + this.currentTime = Math.max(timeWithoutDelay, 0); + // If this animation has finished, set the current time to the total duration. + if (this.state === "finished" && this.holdTime === null) { + this.currentTime = totalDuration; } - let elapsed = currentTime; + let elapsed = this.currentTime; let frameGenerator = generator; if (repeat) { /** @@ -20164,7 +20444,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke * than duration we'll get values like 2.5 (midway through the * third iteration) */ - const progress = currentTime / resolvedDuration; + const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration; /** * Get the current iteration (0 indexed). For instance the floor of * 2.5 is 2. @@ -20187,8 +20467,8 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke /** * Reverse progress if we're not running in "normal" direction */ - const iterationIsOdd = Boolean(currentIteration % 2); - if (iterationIsOdd) { + const isOddIteration = Boolean(currentIteration % 2); + if (isOddIteration) { if (repeatType === "reverse") { iterationProgress = 1 - iterationProgress; if (repeatDelay) { @@ -20199,11 +20479,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke frameGenerator = mirroredGenerator; } } - let p = clamp_clamp(0, 1, iterationProgress); - if (currentTime > totalDuration) { - p = repeatType === "reverse" && iterationIsOdd ? 1 : 0; - } - elapsed = p * resolvedDuration; + elapsed = clamp_clamp(0, 1, iterationProgress) * resolvedDuration; } /** * If we're in negative time, set state as the initial keyframe. @@ -20211,149 +20487,222 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke * instantly. */ const state = isInDelayPhase - ? { done: false, value: keyframes$1[0] } + ? { done: false, value: keyframes[0] } : frameGenerator.next(elapsed); - if (mapNumbersToKeyframes) { - state.value = mapNumbersToKeyframes(state.value); + if (mapPercentToKeyframes) { + state.value = mapPercentToKeyframes(state.value); } let { done } = state; if (!isInDelayPhase && calculatedDuration !== null) { - done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0; + done = + this.speed >= 0 + ? this.currentTime >= totalDuration + : this.currentTime <= 0; + } + const isAnimationFinished = this.holdTime === null && + (this.state === "finished" || (this.state === "running" && done)); + if (isAnimationFinished && finalKeyframe !== undefined) { + state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe); } - const isAnimationFinished = holdTime === null && - (playState === "finished" || (playState === "running" && done)); if (onUpdate) { onUpdate(state.value); } if (isAnimationFinished) { - finish(); + this.finish(); } return state; - }; - const stopAnimationDriver = () => { - animationDriver && animationDriver.stop(); - animationDriver = undefined; - }; - const cancel = () => { - playState = "idle"; - stopAnimationDriver(); - resolveFinishedPromise(); - updateFinishedPromise(); - startTime = cancelTime = null; - }; - const finish = () => { - playState = "finished"; - onComplete && onComplete(); - stopAnimationDriver(); - resolveFinishedPromise(); - }; - const play = () => { - if (hasStopped) + } + get duration() { + const { resolved } = this; + return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0; + } + get time() { + return millisecondsToSeconds(this.currentTime); + } + set time(newTime) { + newTime = secondsToMilliseconds(newTime); + this.currentTime = newTime; + if (this.holdTime !== null || this.speed === 0) { + this.holdTime = newTime; + } + else if (this.driver) { + this.startTime = this.driver.now() - newTime / this.speed; + } + } + get speed() { + return this.playbackSpeed; + } + set speed(newSpeed) { + const hasChanged = this.playbackSpeed !== newSpeed; + this.playbackSpeed = newSpeed; + if (hasChanged) { + this.time = millisecondsToSeconds(this.currentTime); + } + } + play() { + if (!this.resolver.isScheduled) { + this.resolver.resume(); + } + if (!this._resolved) { + this.pendingPlayState = "running"; + return; + } + if (this.isStopped) return; - if (!animationDriver) - animationDriver = driver(tick); - const now = animationDriver.now(); + const { driver = frameloopDriver, onPlay } = this.options; + if (!this.driver) { + this.driver = driver((timestamp) => this.tick(timestamp)); + } onPlay && onPlay(); - if (holdTime !== null) { - startTime = now - holdTime; + const now = this.driver.now(); + if (this.holdTime !== null) { + this.startTime = now - this.holdTime; } - else if (!startTime || playState === "finished") { - startTime = now; + else if (!this.startTime || this.state === "finished") { + this.startTime = now; } - if (playState === "finished") { - updateFinishedPromise(); + if (this.state === "finished") { + this.updateFinishedPromise(); } - cancelTime = startTime; - holdTime = null; + this.cancelTime = this.startTime; + this.holdTime = null; /** * Set playState to running only after we've used it in * the previous logic. */ - playState = "running"; - animationDriver.start(); - }; - if (autoplay) { - play(); + this.state = "running"; + this.driver.start(); } - const controls = { - then(resolve, reject) { - return currentFinishedPromise.then(resolve, reject); - }, - get time() { - return millisecondsToSeconds(currentTime); - }, - set time(newTime) { - newTime = secondsToMilliseconds(newTime); - currentTime = newTime; - if (holdTime !== null || !animationDriver || speed === 0) { - holdTime = newTime; - } - else { - startTime = animationDriver.now() - newTime / speed; - } - }, - get duration() { - const duration = generator.calculatedDuration === null - ? calcGeneratorDuration(generator) - : generator.calculatedDuration; - return millisecondsToSeconds(duration); - }, - get speed() { - return speed; - }, - set speed(newSpeed) { - if (newSpeed === speed || !animationDriver) - return; - speed = newSpeed; - controls.time = millisecondsToSeconds(currentTime); - }, - get state() { - return playState; - }, - play, - pause: () => { - playState = "paused"; - holdTime = currentTime; - }, - stop: () => { - hasStopped = true; - if (playState === "idle") - return; - playState = "idle"; - onStop && onStop(); - cancel(); - }, - cancel: () => { - if (cancelTime !== null) - tick(cancelTime); - cancel(); - }, - complete: () => { - playState = "finished"; - }, - sample: (elapsed) => { - startTime = 0; - return tick(elapsed); - }, - }; - return controls; + pause() { + var _a; + if (!this._resolved) { + this.pendingPlayState = "paused"; + return; + } + this.state = "paused"; + this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0; + } + complete() { + if (this.state !== "running") { + this.play(); + } + this.pendingPlayState = this.state = "finished"; + this.holdTime = null; + } + finish() { + this.teardown(); + this.state = "finished"; + const { onComplete } = this.options; + onComplete && onComplete(); + } + cancel() { + if (this.cancelTime !== null) { + this.tick(this.cancelTime); + } + this.teardown(); + this.updateFinishedPromise(); + } + teardown() { + this.state = "idle"; + this.stopDriver(); + this.resolveFinishedPromise(); + this.updateFinishedPromise(); + this.startTime = this.cancelTime = null; + this.resolver.cancel(); + } + stopDriver() { + if (!this.driver) + return; + this.driver.stop(); + this.driver = undefined; + } + sample(time) { + this.startTime = 0; + return this.tick(time, true); + } +} +// Legacy interface +function animateValue(options) { + return new MainThreadAnimation(options); } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/memo.mjs -function memo(callback) { - let result; - return () => { - if (result === undefined) - result = callback(); - return result; - }; +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs + + +function isWaapiSupportedEasing(easing) { + return Boolean(!easing || + (typeof easing === "string" && easing in supportedWaapiEasing) || + isBezierDefinition(easing) || + (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))); } +const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`; +const supportedWaapiEasing = { + linear: "linear", + ease: "ease", + easeIn: "ease-in", + easeOut: "ease-out", + easeInOut: "ease-in-out", + circIn: cubicBezierAsString([0, 0.65, 0.55, 1]), + circOut: cubicBezierAsString([0.55, 0, 1, 0.45]), + backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]), + backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]), +}; +function mapEasingToNativeEasingWithDefault(easing) { + return (mapEasingToNativeEasing(easing) || + supportedWaapiEasing.easeOut); +} +function mapEasingToNativeEasing(easing) { + if (!easing) { + return undefined; + } + else if (isBezierDefinition(easing)) { + return cubicBezierAsString(easing); + } + else if (Array.isArray(easing)) { + return easing.map(mapEasingToNativeEasingWithDefault); + } + else { + return supportedWaapiEasing[easing]; + } +} + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs + + +function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) { + const keyframeOptions = { [valueName]: keyframes }; + if (times) + keyframeOptions.offset = times; + const easing = mapEasingToNativeEasing(ease); + /** + * If this is an easing array, apply to keyframes, not animation as a whole + */ + if (Array.isArray(easing)) + keyframeOptions.easing = easing; + return element.animate(keyframeOptions, { + delay, + duration, + easing: !Array.isArray(easing) ? easing : "linear", + fill: "both", + iterations: repeat + 1, + direction: repeatType === "reverse" ? "alternate" : "normal", + }); +} + + + +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs + -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.mjs @@ -20372,7 +20721,9 @@ const acceleratedValues = new Set([ "clipPath", "filter", "transform", - "backgroundColor", + // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved + // or until we implement support for linear() easing. + // "background-color" ]); /** * 10ms is chosen here as it strikes a balance between smooth @@ -20384,453 +20735,264 @@ const sampleDelta = 10; //ms * Implement a practical max duration for keyframe generation * to prevent infinite loops */ -const create_accelerated_animation_maxDuration = 20000; -const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" || - valueName === "backgroundColor" || - !isWaapiSupportedEasing(options.ease); -function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) { - const canAccelerateAnimation = supportsWaapi() && - acceleratedValues.has(valueName) && - !options.repeatDelay && - options.repeatType !== "mirror" && - options.damping !== 0 && - options.type !== "inertia"; - if (!canAccelerateAnimation) - return false; +const AcceleratedAnimation_maxDuration = 20000; +/** + * Check if an animation can run natively via WAAPI or requires pregenerated keyframes. + * WAAPI doesn't support spring or function easings so we run these as JS animation before + * handing off. + */ +function requiresPregeneratedKeyframes(options) { + return (options.type === "spring" || + options.name === "backgroundColor" || + !isWaapiSupportedEasing(options.ease)); +} +function pregenerateKeyframes(keyframes, options) { /** - * TODO: Unify with js/index + * Create a main-thread animation to pregenerate keyframes. + * We sample this at regular intervals to generate keyframes that we then + * linearly interpolate between. */ - let hasStopped = false; - let resolveFinishedPromise; - let currentFinishedPromise; + const sampleAnimation = new MainThreadAnimation({ + ...options, + keyframes, + repeat: 0, + delay: 0, + isGenerator: true, + }); + let state = { done: false, value: keyframes[0] }; + const pregeneratedKeyframes = []; /** - * Resolve the current Promise every time we enter the - * finished state. This is WAAPI-compatible behaviour. + * Bail after 20 seconds of pre-generated keyframes as it's likely + * we're heading for an infinite loop. */ - const updateFinishedPromise = () => { - currentFinishedPromise = new Promise((resolve) => { - resolveFinishedPromise = resolve; - }); + let t = 0; + while (!state.done && t < AcceleratedAnimation_maxDuration) { + state = sampleAnimation.sample(t); + pregeneratedKeyframes.push(state.value); + t += sampleDelta; + } + return { + times: undefined, + keyframes: pregeneratedKeyframes, + duration: t - sampleDelta, + ease: "linear", }; - // Create the first finished promise - updateFinishedPromise(); - let { keyframes, duration = 300, ease, times } = options; - /** - * If this animation needs pre-generated keyframes then generate. - */ - if (requiresPregeneratedKeyframes(valueName, options)) { - const sampleAnimation = animateValue({ - ...options, - repeat: 0, - delay: 0, - }); - let state = { done: false, value: keyframes[0] }; - const pregeneratedKeyframes = []; +} +class AcceleratedAnimation extends BaseAnimation { + constructor(options) { + super(options); + const { name, motionValue, keyframes } = this.options; + this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue); + this.resolver.scheduleResolve(); + } + initPlayback(keyframes, finalKeyframe) { + var _a; + let { duration = 300, times, ease, type, motionValue, name, } = this.options; /** - * Bail after 20 seconds of pre-generated keyframes as it's likely - * we're heading for an infinite loop. + * If element has since been unmounted, return false to indicate + * the animation failed to initialised. */ - let t = 0; - while (!state.done && t < create_accelerated_animation_maxDuration) { - state = sampleAnimation.sample(t); - pregeneratedKeyframes.push(state.value); - t += sampleDelta; + if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) { + return false; } - times = undefined; - keyframes = pregeneratedKeyframes; - duration = t - sampleDelta; - ease = "linear"; - } - const animation = animateStyle(value.owner.current, valueName, keyframes, { - ...options, - duration, /** - * This function is currently not called if ease is provided - * as a function so the cast is safe. - * - * However it would be possible for a future refinement to port - * in easing pregeneration from Motion One for browsers that - * support the upcoming `linear()` easing function. + * If this animation needs pre-generated keyframes then generate. */ - ease: ease, - times, - }); - /** - * WAAPI animations don't resolve startTime synchronously. But a blocked - * thread could delay the startTime resolution by a noticeable amount. - * For synching handoff animations with the new Motion animation we want - * to ensure startTime is synchronously set. - */ - if (options.syncStart) { - animation.startTime = frameData.isProcessing - ? frameData.timestamp - : document.timeline - ? document.timeline.currentTime - : performance.now(); - } - const cancelAnimation = () => animation.cancel(); - const safeCancel = () => { - frame_frame.update(cancelAnimation); - resolveFinishedPromise(); - updateFinishedPromise(); - }; - /** - * Prefer the `onfinish` prop as it's more widely supported than - * the `finished` promise. - * - * Here, we synchronously set the provided MotionValue to the end - * keyframe. If we didn't, when the WAAPI animation is finished it would - * be removed from the element which would then revert to its old styles. - */ - animation.onfinish = () => { - value.set(getFinalKeyframe(keyframes, options)); - onComplete && onComplete(); - safeCancel(); - }; - /** - * Animation interrupt callback. - */ - const controls = { - then(resolve, reject) { - return currentFinishedPromise.then(resolve, reject); - }, - attachTimeline(timeline) { - animation.timeline = timeline; - animation.onfinish = null; - return noop_noop; - }, - get time() { - return millisecondsToSeconds(animation.currentTime || 0); - }, - set time(newTime) { - animation.currentTime = secondsToMilliseconds(newTime); - }, - get speed() { - return animation.playbackRate; - }, - set speed(newSpeed) { - animation.playbackRate = newSpeed; - }, - get duration() { - return millisecondsToSeconds(duration); - }, - play: () => { - if (hasStopped) - return; - animation.play(); - /** - * Cancel any pending cancel tasks - */ - cancelFrame(cancelAnimation); - }, - pause: () => animation.pause(), - stop: () => { - hasStopped = true; - if (animation.playState === "idle") - return; + if (requiresPregeneratedKeyframes(this.options)) { + const { onComplete, onUpdate, motionValue, ...options } = this.options; + const pregeneratedAnimation = pregenerateKeyframes(keyframes, options); + keyframes = pregeneratedAnimation.keyframes; + // If this is a very short animation, ensure we have + // at least two keyframes to animate between as older browsers + // can't animate between a single keyframe. + if (keyframes.length === 1) { + keyframes[1] = keyframes[0]; + } + duration = pregeneratedAnimation.duration; + times = pregeneratedAnimation.times; + ease = pregeneratedAnimation.ease; + type = "keyframes"; + } + const animation = animateStyle(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease }); + // Override the browser calculated startTime with one synchronised to other JS + // and WAAPI animations starting this event loop. + animation.startTime = time.now(); + if (this.pendingTimeline) { + animation.timeline = this.pendingTimeline; + this.pendingTimeline = undefined; + } + else { /** - * WAAPI doesn't natively have any interruption capabilities. + * Prefer the `onfinish` prop as it's more widely supported than + * the `finished` promise. * - * Rather than read commited styles back out of the DOM, we can - * create a renderless JS animation and sample it twice to calculate - * its current value, "previous" value, and therefore allow - * Motion to calculate velocity for any subsequent animation. + * Here, we synchronously set the provided MotionValue to the end + * keyframe. If we didn't, when the WAAPI animation is finished it would + * be removed from the element which would then revert to its old styles. */ - const { currentTime } = animation; - if (currentTime) { - const sampleAnimation = animateValue({ - ...options, - autoplay: false, - }); - value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta); - } - safeCancel(); - }, - complete: () => animation.finish(), - cancel: safeCancel, - }; - return controls; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/instant.mjs - - - -function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) { - const setValue = () => { - onUpdate && onUpdate(keyframes[keyframes.length - 1]); - onComplete && onComplete(); - /** - * TODO: As this API grows it could make sense to always return - * animateValue. This will be a bigger project as animateValue - * is frame-locked whereas this function resolves instantly. - * This is a behavioural change and also has ramifications regarding - * assumptions within tests. - */ + animation.onfinish = () => { + const { onComplete } = this.options; + motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe)); + onComplete && onComplete(); + this.cancel(); + this.resolveFinishedPromise(); + }; + } return { - time: 0, - speed: 1, - duration: 0, - play: (noop_noop), - pause: (noop_noop), - stop: (noop_noop), - then: (resolve) => { - resolve(); - return Promise.resolve(); - }, - cancel: (noop_noop), - complete: (noop_noop), + animation, + duration, + times, + type, + ease, + keyframes: keyframes, }; - }; - return delay - ? animateValue({ - keyframes: [0, 1], - duration: 0, - delay, - onComplete: setValue, - }) - : setValue(); -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs - - -const underDampedSpring = { - type: "spring", - stiffness: 500, - damping: 25, - restSpeed: 10, -}; -const criticallyDampedSpring = (target) => ({ - type: "spring", - stiffness: 550, - damping: target === 0 ? 2 * Math.sqrt(550) : 30, - restSpeed: 10, -}); -const keyframesTransition = { - type: "keyframes", - duration: 0.8, -}; -/** - * Default easing curve is a slightly shallower version of - * the default browser easing curve. - */ -const ease = { - type: "keyframes", - ease: [0.25, 0.1, 0.35, 1], - duration: 0.3, -}; -const getDefaultTransition = (valueKey, { keyframes }) => { - if (keyframes.length > 2) { - return keyframesTransition; } - else if (transformProps.has(valueKey)) { - return valueKey.startsWith("scale") - ? criticallyDampedSpring(keyframes[1]) - : underDampedSpring; + get duration() { + const { resolved } = this; + if (!resolved) + return 0; + const { duration } = resolved; + return millisecondsToSeconds(duration); } - return ease; -}; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs - - -/** - * Check if a value is animatable. Examples: - * - * ✅: 100, "100px", "#fff" - * ❌: "block", "url(2.jpg)" - * @param value - * - * @internal - */ -const isAnimatable = (key, value) => { - // If the list of keys tat might be non-animatable grows, replace with Set - if (key === "zIndex") - return false; - // If it's a number or a keyframes array, we can animate it. We might at some point - // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, - // but for now lets leave it like this for performance reasons - if (typeof value === "number" || Array.isArray(value)) - return true; - if (typeof value === "string" && // It's animatable if we have a string - (complex.test(value) || value === "0") && // And it contains numbers and/or colors - !value.startsWith("url(") // Unless it starts with "url(" - ) { - return true; + get time() { + const { resolved } = this; + if (!resolved) + return 0; + const { animation } = resolved; + return millisecondsToSeconds(animation.currentTime || 0); } - return false; -}; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs - - - -/** - * Properties that should default to 1 or 100% - */ -const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]); -function applyDefaultFilter(v) { - const [name, value] = v.slice(0, -1).split("("); - if (name === "drop-shadow") - return v; - const [number] = value.match(floatRegex) || []; - if (!number) - return v; - const unit = value.replace(number, ""); - let defaultValue = maxDefaults.has(name) ? 1 : 0; - if (number !== value) - defaultValue *= 100; - return name + "(" + defaultValue + unit + ")"; -} -const functionRegex = /([a-z-]*)\(.*?\)/g; -const filter = { - ...complex, - getAnimatableNone: (v) => { - const functions = v.match(functionRegex); - return functions ? functions.map(applyDefaultFilter).join(" ") : v; - }, -}; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs - - - - -/** - * A map of default value types for common values - */ -const defaultValueTypes = { - ...numberValueTypes, - // Color props - color: color, - backgroundColor: color, - outlineColor: color, - fill: color, - stroke: color, - // Border props - borderColor: color, - borderTopColor: color, - borderRightColor: color, - borderBottomColor: color, - borderLeftColor: color, - filter: filter, - WebkitFilter: filter, -}; -/** - * Gets the default ValueType for the provided value key - */ -const getDefaultValueType = (key) => defaultValueTypes[key]; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs - - - - -function animatable_none_getAnimatableNone(key, value) { - let defaultValueType = getDefaultValueType(key); - if (defaultValueType !== filter) - defaultValueType = complex; - // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target - return defaultValueType.getAnimatableNone - ? defaultValueType.getAnimatableNone(value) - : undefined; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs -/** - * Check if the value is a zero value string like "0px" or "0%" - */ -const isZeroValueString = (v) => /^0[^.\s]+$/.test(v); - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs - - -function isNone(value) { - if (typeof value === "number") { - return value === 0; + set time(newTime) { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.currentTime = secondsToMilliseconds(newTime); } - else if (value !== null) { - return value === "none" || value === "0" || isZeroValueString(value); + get speed() { + const { resolved } = this; + if (!resolved) + return 1; + const { animation } = resolved; + return animation.playbackRate; } -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/keyframes.mjs - - - - -function getKeyframes(value, valueName, target, transition) { - const isTargetAnimatable = isAnimatable(valueName, target); - let keyframes; - if (Array.isArray(target)) { - keyframes = [...target]; + set speed(newSpeed) { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.playbackRate = newSpeed; } - else { - keyframes = [null, target]; + get state() { + const { resolved } = this; + if (!resolved) + return "idle"; + const { animation } = resolved; + return animation.playState; } - const defaultOrigin = transition.from !== undefined ? transition.from : value.get(); - let animatableTemplateValue = undefined; - const noneKeyframeIndexes = []; - for (let i = 0; i < keyframes.length; i++) { - /** - * Fill null/wildcard keyframes - */ - if (keyframes[i] === null) { - keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1]; + /** + * Replace the default DocumentTimeline with another AnimationTimeline. + * Currently used for scroll animations. + */ + attachTimeline(timeline) { + if (!this._resolved) { + this.pendingTimeline = timeline; } - if (isNone(keyframes[i])) { - noneKeyframeIndexes.push(i); + else { + const { resolved } = this; + if (!resolved) + return noop_noop; + const { animation } = resolved; + animation.timeline = timeline; + animation.onfinish = null; } - // TODO: Clean this conditional, it works for now - if (typeof keyframes[i] === "string" && - keyframes[i] !== "none" && - keyframes[i] !== "0") { - animatableTemplateValue = keyframes[i]; + return noop_noop; + } + play() { + if (this.isStopped) + return; + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + if (animation.playState === "finished") { + this.updateFinishedPromise(); } + animation.play(); + } + pause() { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.pause(); } - if (isTargetAnimatable && - noneKeyframeIndexes.length && - animatableTemplateValue) { - for (let i = 0; i < noneKeyframeIndexes.length; i++) { - const index = noneKeyframeIndexes[i]; - keyframes[index] = animatable_none_getAnimatableNone(valueName, animatableTemplateValue); + stop() { + this.resolver.cancel(); + this.isStopped = true; + if (this.state === "idle") + return; + const { resolved } = this; + if (!resolved) + return; + const { animation, keyframes, duration, type, ease, times } = resolved; + if (animation.playState === "idle" || + animation.playState === "finished") { + return; + } + /** + * WAAPI doesn't natively have any interruption capabilities. + * + * Rather than read commited styles back out of the DOM, we can + * create a renderless JS animation and sample it twice to calculate + * its current value, "previous" value, and therefore allow + * Motion to calculate velocity for any subsequent animation. + */ + if (this.time) { + const { motionValue, onUpdate, onComplete, ...options } = this.options; + const sampleAnimation = new MainThreadAnimation({ + ...options, + keyframes, + duration, + type, + ease, + times, + isGenerator: true, + }); + const sampleTime = secondsToMilliseconds(this.time); + motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta); } + this.cancel(); + } + complete() { + const { resolved } = this; + if (!resolved) + return; + resolved.animation.finish(); + } + cancel() { + const { resolved } = this; + if (!resolved) + return; + resolved.animation.cancel(); + } + static supports(options) { + const { motionValue, name, repeatDelay, repeatType, damping, type } = options; + return (supportsWaapi() && + name && + acceleratedValues.has(name) && + motionValue && + motionValue.owner && + motionValue.owner.current instanceof HTMLElement && + /** + * If we're outputting values to onUpdate then we can't use WAAPI as there's + * no way to read the value from WAAPI every frame. + */ + !motionValue.owner.getProps().onUpdate && + !repeatDelay && + repeatType !== "mirror" && + damping !== 0 && + type !== "inertia"); } - return keyframes; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs -/** - * Decide whether a transition is defined on a given Transition. - * This filters out orchestration options and returns true - * if any options are left. - */ -function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) { - return !!Object.keys(transition).length; -} -function getValueTransition(transition, key) { - return transition[key] || transition["default"] || transition; } @@ -20846,96 +21008,102 @@ function getValueTransition(transition, key) { - -const animateMotionValue = (valueName, value, target, transition = {}) => { - return (onComplete) => { - const valueTransition = getValueTransition(transition, valueName) || {}; - /** - * Most transition values are currently completely overwritten by value-specific - * transitions. In the future it'd be nicer to blend these transitions. But for now - * delay actually does inherit from the root transition if not value-specific. - */ - const delay = valueTransition.delay || transition.delay || 0; - /** - * Elapsed isn't a public transition option but can be passed through from - * optimized appear effects in milliseconds. - */ - let { elapsed = 0 } = transition; - elapsed = elapsed - secondsToMilliseconds(delay); - const keyframes = getKeyframes(value, valueName, target, valueTransition); - /** - * Check if we're able to animate between the start and end keyframes, - * and throw a warning if we're attempting to animate between one that's - * animatable and another that isn't. - */ - const originKeyframe = keyframes[0]; - const targetKeyframe = keyframes[keyframes.length - 1]; - const isOriginAnimatable = isAnimatable(valueName, originKeyframe); - const isTargetAnimatable = isAnimatable(valueName, targetKeyframe); - warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`); - let options = { - keyframes, - velocity: value.getVelocity(), - ease: "easeOut", - ...valueTransition, - delay: -elapsed, - onUpdate: (v) => { - value.set(v); - valueTransition.onUpdate && valueTransition.onUpdate(v); - }, - onComplete: () => { - onComplete(); - valueTransition.onComplete && valueTransition.onComplete(); - }, +const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => { + const valueTransition = getValueTransition(transition, name) || {}; + /** + * Most transition values are currently completely overwritten by value-specific + * transitions. In the future it'd be nicer to blend these transitions. But for now + * delay actually does inherit from the root transition if not value-specific. + */ + const delay = valueTransition.delay || transition.delay || 0; + /** + * Elapsed isn't a public transition option but can be passed through from + * optimized appear effects in milliseconds. + */ + let { elapsed = 0 } = transition; + elapsed = elapsed - secondsToMilliseconds(delay); + let options = { + keyframes: Array.isArray(target) ? target : [null, target], + ease: "easeOut", + velocity: value.getVelocity(), + ...valueTransition, + delay: -elapsed, + onUpdate: (v) => { + value.set(v); + valueTransition.onUpdate && valueTransition.onUpdate(v); + }, + onComplete: () => { + onComplete(); + valueTransition.onComplete && valueTransition.onComplete(); + }, + name, + motionValue: value, + element: isHandoff ? undefined : element, + }; + /** + * If there's no transition defined for this value, we can generate + * unqiue transition settings for this value. + */ + if (!isTransitionDefined(valueTransition)) { + options = { + ...options, + ...getDefaultTransition(name, options), }; - /** - * If there's no transition defined for this value, we can generate - * unqiue transition settings for this value. - */ - if (!isTransitionDefined(valueTransition)) { - options = { - ...options, - ...getDefaultTransition(valueName, options), - }; - } - /** - * Both WAAPI and our internal animation functions use durations - * as defined by milliseconds, while our external API defines them - * as seconds. - */ - if (options.duration) { - options.duration = secondsToMilliseconds(options.duration); - } - if (options.repeatDelay) { - options.repeatDelay = secondsToMilliseconds(options.repeatDelay); - } - if (!isOriginAnimatable || - !isTargetAnimatable || - instantAnimationState.current || - valueTransition.type === false) { - /** - * If we can't animate this value, or the global instant animation flag is set, - * or this is simply defined as an instant transition, return an instant transition. - */ - return createInstantAnimation(instantAnimationState.current - ? { ...options, delay: 0 } - : options); + } + /** + * Both WAAPI and our internal animation functions use durations + * as defined by milliseconds, while our external API defines them + * as seconds. + */ + if (options.duration) { + options.duration = secondsToMilliseconds(options.duration); + } + if (options.repeatDelay) { + options.repeatDelay = secondsToMilliseconds(options.repeatDelay); + } + if (options.from !== undefined) { + options.keyframes[0] = options.from; + } + let shouldSkip = false; + if (options.type === false || + (options.duration === 0 && !options.repeatDelay)) { + options.duration = 0; + if (options.delay === 0) { + shouldSkip = true; } - /** - * Animate via WAAPI if possible. - */ - if (value.owner && - value.owner.current instanceof HTMLElement && - !value.owner.getProps().onUpdate) { - const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options); - if (acceleratedAnimation) - return acceleratedAnimation; + } + if (instantAnimationState.current || + MotionGlobalConfig.skipAnimations) { + shouldSkip = true; + options.duration = 0; + options.delay = 0; + } + /** + * If we can or must skip creating the animation, and apply only + * the final keyframe, do so. We also check once keyframes are resolved but + * this early check prevents the need to create an animation at all. + */ + if (shouldSkip && !isHandoff && value.get() !== undefined) { + const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition); + if (finalKeyframe !== undefined) { + frame_frame.update(() => { + options.onUpdate(finalKeyframe); + options.onComplete(); + }); + return; } - /** - * If we didn't create an accelerated animation, create a JS animation - */ - return animateValue(options); - }; + } + /** + * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via + * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the + * optimised animation. + */ + if (!isHandoff && AcceleratedAnimation.supports(options)) { + return new AcceleratedAnimation(options); + } + else { + return new MainThreadAnimation(options); + } }; @@ -20949,14 +21117,6 @@ function isWillChangeMotionValue(value) { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs -/** - * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" - */ -const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v); - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/array.mjs function addUniqueItem(arr, item) { if (arr.indexOf(item) === -1) @@ -21028,6 +21188,12 @@ class SubscriptionManager { + +/** + * Maximum time between the value of two frames, beyond which we + * assume the velocity has since been 0. + */ +const MAX_VELOCITY_DELTA = 30; const isFloat = (value) => { return !isNaN(parseFloat(value)); }; @@ -21053,19 +21219,7 @@ class MotionValue { * This will be replaced by the build step with the latest version number. * When MotionValues are provided to motion components, warn if versions are mixed. */ - this.version = "10.16.4"; - /** - * Duration, in milliseconds, since last updating frame. - * - * @internal - */ - this.timeDelta = 0; - /** - * Timestamp of the last time this `MotionValue` was updated. - * - * @internal - */ - this.lastUpdated = 0; + this.version = "11.2.6"; /** * Tracks whether this value can output a velocity. Currently this is only true * if the value is numerical, but we might be able to widen the scope here and support @@ -21073,65 +21227,47 @@ class MotionValue { * * @internal */ - this.canTrackVelocity = false; + this.canTrackVelocity = null; /** * An object containing a SubscriptionManager for each active event. */ this.events = {}; this.updateAndNotify = (v, render = true) => { - this.prev = this.current; - this.current = v; - // Update timestamp - const { delta, timestamp } = frameData; - if (this.lastUpdated !== timestamp) { - this.timeDelta = delta; - this.lastUpdated = timestamp; - frame_frame.postRender(this.scheduleVelocityCheck); + const currentTime = time.now(); + /** + * If we're updating the value during another frame or eventloop + * than the previous frame, then the we set the previous frame value + * to current. + */ + if (this.updatedAt !== currentTime) { + this.setPrevFrameValue(); } + this.prev = this.current; + this.setCurrent(v); // Update update subscribers - if (this.prev !== this.current && this.events.change) { + if (this.current !== this.prev && this.events.change) { this.events.change.notify(this.current); } - // Update velocity subscribers - if (this.events.velocityChange) { - this.events.velocityChange.notify(this.getVelocity()); - } // Update render subscribers if (render && this.events.renderRequest) { this.events.renderRequest.notify(this.current); } }; - /** - * Schedule a velocity check for the next frame. - * - * This is an instanced and bound function to prevent generating a new - * function once per frame. - * - * @internal - */ - this.scheduleVelocityCheck = () => frame_frame.postRender(this.velocityCheck); - /** - * Updates `prev` with `current` if the value hasn't been updated this frame. - * This ensures velocity calculations return `0`. - * - * This is an instanced and bound function to prevent generating a new - * function once per frame. - * - * @internal - */ - this.velocityCheck = ({ timestamp }) => { - if (timestamp !== this.lastUpdated) { - this.prev = this.current; - if (this.events.velocityChange) { - this.events.velocityChange.notify(this.getVelocity()); - } - } - }; this.hasAnimated = false; - this.prev = this.current = init; - this.canTrackVelocity = isFloat(this.current); + this.setCurrent(init); this.owner = options.owner; } + setCurrent(current) { + this.current = current; + this.updatedAt = time.now(); + if (this.canTrackVelocity === null && current !== undefined) { + this.canTrackVelocity = isFloat(this.current); + } + } + setPrevFrameValue(prevFrameValue = this.current) { + this.prevFrameValue = prevFrameValue; + this.prevUpdatedAt = this.updatedAt; + } /** * Adds a function that will be notified when the `MotionValue` is updated. * @@ -21236,17 +21372,19 @@ class MotionValue { } setWithVelocity(prev, current, delta) { this.set(current); - this.prev = prev; - this.timeDelta = delta; + this.prev = undefined; + this.prevFrameValue = prev; + this.prevUpdatedAt = this.updatedAt - delta; } /** * Set the state of the `MotionValue`, stopping any active animations, * effects, and resets velocity to `0`. */ - jump(v) { + jump(v, endAnimation = true) { this.updateAndNotify(v); this.prev = v; - this.stop(); + this.prevUpdatedAt = this.prevFrameValue = undefined; + endAnimation && this.stop(); if (this.stopPassiveEffect) this.stopPassiveEffect(); } @@ -21277,12 +21415,16 @@ class MotionValue { * @public */ getVelocity() { - // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful - return this.canTrackVelocity - ? // These casts could be avoided if parseFloat would be typed better - velocityPerSecond(parseFloat(this.current) - - parseFloat(this.prev), this.timeDelta) - : 0; + const currentTime = time.now(); + if (!this.canTrackVelocity || + this.prevFrameValue === undefined || + currentTime - this.updatedAt > MAX_VELOCITY_DELTA) { + return 0; + } + const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA); + // Casts because of parseFloat's poor typing + return velocityPerSecond(parseFloat(this.current) - + parseFloat(this.prevFrameValue), delta); } /** * Registers a new animation to control this `MotionValue`. Only one @@ -21359,69 +21501,11 @@ function motionValue(init, options) { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs -/** - * Tests a provided value against a ValueType - */ -const testValueType = (v) => (type) => type.test(v); - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs -/** - * ValueType for "auto" - */ -const auto = { - test: (v) => v === "auto", - parse: (v) => v, -}; - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs - - - - - -/** - * A list of value types commonly used for dimensions - */ -const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; -/** - * Tests a dimensional value against the list of dimension ValueTypes - */ -const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v)); - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs - - - - - -/** - * A list of all ValueTypes - */ -const valueTypes = [...dimensionValueTypes, color, complex]; -/** - * Tests a value against the list of ValueTypes - */ -const findValueType = (v) => valueTypes.find(testValueType(v)); - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/setters.mjs - - - - - /** * Set VisualElement's MotionValue, creating a new MotionValue for it if * it doesn't exist. @@ -21436,105 +21520,13 @@ function setMotionValue(visualElement, key, value) { } function setTarget(visualElement, definition) { const resolved = resolveVariant(visualElement, definition); - let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}; + let { transitionEnd = {}, transition = {}, ...target } = resolved || {}; target = { ...target, ...transitionEnd }; for (const key in target) { const value = resolveFinalValueInKeyframes(target[key]); setMotionValue(visualElement, key, value); } } -function setVariants(visualElement, variantLabels) { - const reversedLabels = [...variantLabels].reverse(); - reversedLabels.forEach((key) => { - const variant = visualElement.getVariant(key); - variant && setTarget(visualElement, variant); - if (visualElement.variantChildren) { - visualElement.variantChildren.forEach((child) => { - setVariants(child, variantLabels); - }); - } - }); -} -function setValues(visualElement, definition) { - if (Array.isArray(definition)) { - return setVariants(visualElement, definition); - } - else if (typeof definition === "string") { - return setVariants(visualElement, [definition]); - } - else { - setTarget(visualElement, definition); - } -} -function checkTargetForNewValues(visualElement, target, origin) { - var _a, _b; - const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key)); - const numNewValues = newValueKeys.length; - if (!numNewValues) - return; - for (let i = 0; i < numNewValues; i++) { - const key = newValueKeys[i]; - const targetValue = target[key]; - let value = null; - /** - * If the target is a series of keyframes, we can use the first value - * in the array. If this first value is null, we'll still need to read from the DOM. - */ - if (Array.isArray(targetValue)) { - value = targetValue[0]; - } - /** - * If the target isn't keyframes, or the first keyframe was null, we need to - * first check if an origin value was explicitly defined in the transition as "from", - * if not read the value from the DOM. As an absolute fallback, take the defined target value. - */ - if (value === null) { - value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key]; - } - /** - * If value is still undefined or null, ignore it. Preferably this would throw, - * but this was causing issues in Framer. - */ - if (value === undefined || value === null) - continue; - if (typeof value === "string" && - (isNumericalString(value) || isZeroValueString(value))) { - // If this is a number read as a string, ie "0" or "200", convert it to a number - value = parseFloat(value); - } - else if (!findValueType(value) && complex.test(targetValue)) { - value = animatable_none_getAnimatableNone(key, targetValue); - } - visualElement.addValue(key, motionValue(value, { owner: visualElement })); - if (origin[key] === undefined) { - origin[key] = value; - } - if (value !== null) - visualElement.setBaseTarget(key, value); - } -} -function getOriginFromTransition(key, transition) { - if (!transition) - return; - const valueTransition = transition[key] || transition["default"] || transition; - return valueTransition.from; -} -function getOrigin(target, transition, visualElement) { - const origin = {}; - for (const key in target) { - const transitionOrigin = getOriginFromTransition(key, transition); - if (transitionOrigin !== undefined) { - origin[key] = transitionOrigin; - } - else { - const value = visualElement.getValue(key); - if (value) { - origin[key] = value.get(); - } - } - } - return origin; -} @@ -21546,6 +21538,7 @@ function getOrigin(target, transition, visualElement) { + /** * Decide whether we should block this animation. Previously, we achieved this * just by checking whether the key was listed in protectedKeys, but this @@ -21557,8 +21550,9 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) { needsAnimating[key] = false; return shouldBlock; } -function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) { - let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition); +function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) { + var _a; + let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition; const willChange = visualElement.getValue("willChange"); if (transitionOverride) transition = transitionOverride; @@ -21567,10 +21561,9 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid visualElement.animationState && visualElement.animationState.getState()[type]; for (const key in target) { - const value = visualElement.getValue(key); + const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null); const valueTarget = target[key]; - if (!value || - valueTarget === undefined || + if (valueTarget === undefined || (animationTypeState && shouldBlockAnimation(animationTypeState, key))) { continue; @@ -21578,32 +21571,41 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid const valueTransition = { delay, elapsed: 0, - ...transition, + ...getValueTransition(transition || {}, key), }; /** * If this is the first time a value is being animated, check * to see if we're handling off from an existing animation. */ - if (window.HandoffAppearAnimations && !value.hasAnimated) { - const appearId = visualElement.getProps()[optimizedAppearDataAttribute]; + let isHandoff = false; + if (window.HandoffAppearAnimations) { + const props = visualElement.getProps(); + const appearId = props[optimizedAppearDataAttribute]; if (appearId) { - valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame); - valueTransition.syncStart = true; + const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame); + if (elapsed !== null) { + valueTransition.elapsed = elapsed; + isHandoff = true; + } } } value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } - : valueTransition)); + : valueTransition, visualElement, isHandoff)); const animation = value.animation; - if (isWillChangeMotionValue(willChange)) { - willChange.add(key); - animation.then(() => willChange.remove(key)); + if (animation) { + if (isWillChangeMotionValue(willChange)) { + willChange.add(key); + animation.then(() => willChange.remove(key)); + } + animations.push(animation); } - animations.push(animation); } if (transitionEnd) { Promise.all(animations).then(() => { - transitionEnd && setTarget(visualElement, transitionEnd); + frame_frame.update(() => { + transitionEnd && setTarget(visualElement, transitionEnd); + }); }); } return animations; @@ -21616,7 +21618,10 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid function animateVariant(visualElement, variant, options = {}) { - const resolved = resolveVariant(visualElement, variant, options.custom); + var _a; + const resolved = resolveVariant(visualElement, variant, options.type === "exit" + ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom + : undefined); let { transition = visualElement.getDefaultTransition() || {} } = resolved || {}; if (options.transitionOverride) { transition = options.transitionOverride; @@ -21681,6 +21686,7 @@ function sortByTreeOrder(a, b) { + function animateVisualElement(visualElement, definition, options = {}) { visualElement.notify("AnimationStart", definition); let animation; @@ -21697,7 +21703,11 @@ function animateVisualElement(visualElement, definition, options = {}) { : definition; animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options)); } - return animation.then(() => visualElement.notify("AnimationComplete", definition)); + return animation.then(() => { + frame_frame.postRender(() => { + visualElement.notify("AnimationComplete", definition); + }); + }); } @@ -21724,8 +21734,11 @@ function createAnimationState(visualElement) { * This function will be used to reduce the animation definitions for * each active animation type into an object of resolved values for it. */ - const buildResolvedTypeValues = (acc, definition) => { - const resolved = resolveVariant(visualElement, definition); + const buildResolvedTypeValues = (type) => (acc, definition) => { + var _a; + const resolved = resolveVariant(visualElement, definition, type === "exit" + ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom + : undefined); if (resolved) { const { transition, transitionEnd, ...target } = resolved; acc = { ...acc, ...target, ...transitionEnd }; @@ -21749,7 +21762,7 @@ function createAnimationState(visualElement) { * 3. Determine if any values have been removed from a type and figure out * what to animate those to. */ - function animateChanges(options, changedActiveType) { + function animateChanges(changedActiveType) { const props = visualElement.getProps(); const context = visualElement.getVariantContext(true) || {}; /** @@ -21782,7 +21795,9 @@ function createAnimationState(visualElement) { for (let i = 0; i < numAnimationTypes; i++) { const type = reversePriorityOrder[i]; const typeState = state[type]; - const prop = props[type] !== undefined ? props[type] : context[type]; + const prop = props[type] !== undefined + ? props[type] + : context[type]; const propIsVariant = isVariantLabel(prop); /** * If this type has *just* changed isActive status, set activeDelta @@ -21797,7 +21812,9 @@ function createAnimationState(visualElement) { * * TODO: Can probably change this to a !isControllingVariants check */ - let isInherited = prop === context[type] && prop !== props[type] && propIsVariant; + let isInherited = prop === context[type] && + prop !== props[type] && + propIsVariant; /** * */ @@ -21836,6 +21853,7 @@ function createAnimationState(visualElement) { propIsVariant) || // If we removed a higher-priority variant (i is in reverse order) (i > removedVariantIndex && propIsVariant); + let handledRemovedValues = false; /** * As animations can be set as variant lists, variants or target objects, we * coerce everything to an array if it isn't one already @@ -21845,7 +21863,7 @@ function createAnimationState(visualElement) { * Build an object of all the resolved values. We'll use this in the subsequent * animateChanges calls to determine whether a value has changed. */ - let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {}); + let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {}); if (activeDelta === false) resolvedValues = {}; /** @@ -21864,8 +21882,14 @@ function createAnimationState(visualElement) { }; const markToAnimate = (key) => { shouldAnimateType = true; - removedKeys.delete(key); + if (removedKeys.has(key)) { + handledRemovedValues = true; + removedKeys.delete(key); + } typeState.needsAnimating[key] = true; + const motionValue = visualElement.getValue(key); + if (motionValue) + motionValue.liveStyle = false; }; for (const key in allKeys) { const next = resolvedValues[key]; @@ -21876,24 +21900,15 @@ function createAnimationState(visualElement) { /** * If the value has changed, we probably want to animate it. */ - if (next !== prev) { - /** - * If both values are keyframes, we need to shallow compare them to - * detect whether any value has changed. If it has, we animate it. - */ - if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { - if (!shallowCompare(next, prev) || variantDidChange) { - markToAnimate(key); - } - else { - /** - * If it hasn't changed, we want to ensure it doesn't animate by - * adding it to the list of protected keys. - */ - typeState.protectedKeys[key] = true; - } - } - else if (next !== undefined) { + let valueHasChanged = false; + if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { + valueHasChanged = !shallowCompare(next, prev); + } + else { + valueHasChanged = next !== prev; + } + if (valueHasChanged) { + if (next !== undefined && next !== null) { // If next is defined and doesn't equal prev, it needs animating markToAnimate(key); } @@ -21934,13 +21949,11 @@ function createAnimationState(visualElement) { } /** * If this is an inherited prop we want to hard-block animations - * TODO: Test as this should probably still handle animations triggered - * by removed values? */ - if (shouldAnimateType && !isInherited) { + if (shouldAnimateType && (!isInherited || handledRemovedValues)) { animations.push(...definitionList.map((animation) => ({ animation: animation, - options: { type, ...options }, + options: { type }, }))); } } @@ -21953,15 +21966,17 @@ function createAnimationState(visualElement) { const fallbackAnimation = {}; removedKeys.forEach((key) => { const fallbackTarget = visualElement.getBaseTarget(key); - if (fallbackTarget !== undefined) { - fallbackAnimation[key] = fallbackTarget; - } + const motionValue = visualElement.getValue(key); + if (motionValue) + motionValue.liveStyle = true; + // @ts-expect-error - @mattgperry to figure if we should do something here + fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null; }); animations.push({ animation: fallbackAnimation }); } let shouldAnimate = Boolean(animations.length); if (isInitialRender && - props.initial === false && + (props.initial === false || props.initial === props.animate) && !visualElement.manuallyAnimateOnMount) { shouldAnimate = false; } @@ -21971,7 +21986,7 @@ function createAnimationState(visualElement) { /** * Change whether a certain animation type is active. */ - function setActive(type, isActive, options) { + function setActive(type, isActive) { var _a; // If the active state hasn't changed, we can safely do nothing here if (state[type].isActive === isActive) @@ -21979,7 +21994,7 @@ function createAnimationState(visualElement) { // Propagate active change to children (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); }); state[type].isActive = isActive; - const animations = animateChanges(options, type); + const animations = animateChanges(type); for (const key in state) { state[key].protectedKeys = {}; } @@ -22075,12 +22090,12 @@ class ExitAnimationFeature extends Feature { update() { if (!this.node.presenceContext) return; - const { isPresent, onExitComplete, custom } = this.node.presenceContext; + const { isPresent, onExitComplete } = this.node.presenceContext; const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {}; if (!this.node.animationState || isPresent === prevIsPresent) { return; } - const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom }); + const exitAnimation = this.node.animationState.setActive("exit", !isPresent); if (onExitComplete && !isPresent) { exitAnimation.then(() => onExitComplete(this.id)); } @@ -22135,7 +22150,7 @@ function distance2D(a, b) { * @internal */ class PanSession { - constructor(event, handlers, { transformPagePoint } = {}) { + constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) { /** * @internal */ @@ -22152,6 +22167,10 @@ class PanSession { * @internal */ this.handlers = {}; + /** + * @internal + */ + this.contextWindow = window; this.updatePoint = () => { if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return; @@ -22181,9 +22200,11 @@ class PanSession { }; this.handlePointerUp = (event, info) => { this.end(); + const { onEnd, onSessionEnd, resumeAnimation } = this.handlers; + if (this.dragSnapToOrigin) + resumeAnimation && resumeAnimation(); if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return; - const { onEnd, onSessionEnd } = this.handlers; const panInfo = getPanInfo(event.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info, this.transformPagePoint), this.history); @@ -22195,8 +22216,10 @@ class PanSession { // If we have more than one touch, don't start detecting this gesture if (!isPrimaryPointer(event)) return; + this.dragSnapToOrigin = dragSnapToOrigin; this.handlers = handlers; this.transformPagePoint = transformPagePoint; + this.contextWindow = contextWindow || window; const info = extractEventInfo(event); const initialInfo = transformPoint(info, this.transformPagePoint); const { point } = initialInfo; @@ -22205,7 +22228,7 @@ class PanSession { const { onSessionStart } = handlers; onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history)); - this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp)); + this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp)); } updateHandlers(handlers) { this.handlers = handlers; @@ -22226,7 +22249,7 @@ function getPanInfo({ point }, history) { point, delta: subtractPoint(point, lastDevicePoint(history)), offset: subtractPoint(point, startDevicePoint(history)), - velocity: PanSession_getVelocity(history, 0.1), + velocity: getVelocity(history, 0.1), }; } function startDevicePoint(history) { @@ -22235,7 +22258,7 @@ function startDevicePoint(history) { function lastDevicePoint(history) { return history[history.length - 1]; } -function PanSession_getVelocity(history, timeDelta) { +function getVelocity(history, timeDelta) { if (history.length < 2) { return { x: 0, y: 0 }; } @@ -22283,12 +22306,12 @@ function isNear(value, target = 0, maxDistance = 0.01) { } function calcAxisDelta(delta, source, target, origin = 0.5) { delta.origin = origin; - delta.originPoint = mix(source.min, source.max, delta.origin); + delta.originPoint = mixNumber(source.min, source.max, delta.origin); delta.scale = calcLength(target) / calcLength(source); if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale)) delta.scale = 1; delta.translate = - mix(target.min, target.max, delta.origin) - delta.originPoint; + mixNumber(target.min, target.max, delta.origin) - delta.originPoint; if (isNear(delta.translate) || isNaN(delta.translate)) delta.translate = 0; } @@ -22329,11 +22352,15 @@ function calcRelativePosition(target, layout, parent) { function applyConstraints(point, { min, max }, elastic) { if (min !== undefined && point < min) { // If we have a min point defined, and this is outside of that, constrain - point = elastic ? mix(min, point, elastic.min) : Math.max(point, min); + point = elastic + ? mixNumber(min, point, elastic.min) + : Math.max(point, min); } else if (max !== undefined && point > max) { // If we have a max point defined, and this is outside of that, constrain - point = elastic ? mix(max, point, elastic.max) : Math.min(point, max); + point = elastic + ? mixNumber(max, point, elastic.max) + : Math.min(point, max); } return point; } @@ -22518,7 +22545,9 @@ function hasTransform(values) { values.z || values.rotate || values.rotateX || - values.rotateY); + values.rotateY || + values.skewX || + values.skewY); } function has2DTranslate(values) { return is2DTranslate(values.x) || is2DTranslate(values.y); @@ -22634,7 +22663,7 @@ function translateAxis(axis, distance) { */ function transformAxis(axis, transforms, [key, scaleKey, originKey]) { const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5; - const originPoint = mix(axis.min, axis.max, axisOrigin); + const originPoint = mixNumber(axis.min, axis.max, axisOrigin); // Apply the axis delta to the final axis applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale); } @@ -22672,6 +22701,14 @@ function measurePageBox(element, rootProjectionNode, transformPagePoint) { +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/get-context-window.mjs +// Fixes https://github.com/framer/motion/issues/2270 +const getContextWindow = ({ current }) => { + return current ? current.ownerDocument.defaultView : null; +}; + + + ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs @@ -22691,6 +22728,7 @@ function measurePageBox(element, rootProjectionNode, transformPagePoint) { + const elementDragControls = new WeakMap(); /** * @@ -22724,9 +22762,10 @@ class VisualElementDragControls { if (presenceContext && presenceContext.isPresent === false) return; const onSessionStart = (event) => { - // Stop any animations on both axis values immediately. This allows the user to throw and catch + const { dragSnapToOrigin } = this.getProps(); + // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch // the component. - this.stopAnimation(); + dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation(); if (snapToCursor) { this.snapToCursor(extractEventInfo(event, "page").point); } @@ -22771,7 +22810,7 @@ class VisualElementDragControls { }); // Fire onDragStart event if (onDragStart) { - frame_frame.update(() => onDragStart(event, info), false, true); + frame_frame.postRender(() => onDragStart(event, info)); } const { animationState } = this.visualElement; animationState && animationState.setActive("whileDrag", true); @@ -22809,12 +22848,23 @@ class VisualElementDragControls { onDrag && onDrag(event, info); }; const onSessionEnd = (event, info) => this.stop(event, info); + const resumeAnimation = () => eachAxis((axis) => { + var _a; + return this.getAnimationState(axis) === "paused" && + ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play()); + }); + const { dragSnapToOrigin } = this.getProps(); this.panSession = new PanSession(originEvent, { onSessionStart, onStart, onMove, onSessionEnd, - }, { transformPagePoint: this.visualElement.getTransformPagePoint() }); + resumeAnimation, + }, { + transformPagePoint: this.visualElement.getTransformPagePoint(), + dragSnapToOrigin, + contextWindow: getContextWindow(this.visualElement), + }); } stop(event, info) { const isDragging = this.isDragging; @@ -22825,7 +22875,7 @@ class VisualElementDragControls { this.startAnimation(velocity); const { onDragEnd } = this.getProps(); if (onDragEnd) { - frame_frame.update(() => onDragEnd(event, info)); + frame_frame.postRender(() => onDragEnd(event, info)); } } cancel() { @@ -22857,8 +22907,12 @@ class VisualElementDragControls { axisValue.set(next); } resolveConstraints() { + var _a; const { dragConstraints, dragElastic } = this.getProps(); - const { layout } = this.visualElement.projection || {}; + const layout = this.visualElement.projection && + !this.visualElement.projection.layout + ? this.visualElement.projection.measure(false) + : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout; const prevConstraints = this.constraints; if (dragConstraints && isRefObject(dragConstraints)) { if (!this.constraints) { @@ -22883,7 +22937,8 @@ class VisualElementDragControls { this.constraints && !this.hasMutatedConstraints) { eachAxis((axis) => { - if (this.getAxisMotionValue(axis)) { + if (this.constraints !== false && + this.getAxisMotionValue(axis)) { this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]); } }); @@ -22953,11 +23008,18 @@ class VisualElementDragControls { } startAxisValueAnimation(axis, transition) { const axisValue = this.getAxisMotionValue(axis); - return axisValue.start(animateMotionValue(axis, axisValue, 0, transition)); + return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement)); } stopAnimation() { eachAxis((axis) => this.getAxisMotionValue(axis).stop()); } + pauseAnimation() { + eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); }); + } + getAnimationState(axis) { + var _a; + return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state; + } /** * Drag works differently depending on which props are provided. * @@ -22965,12 +23027,14 @@ class VisualElementDragControls { * - Otherwise, we apply the delta to the x/y motion values. */ getAxisMotionValue(axis) { - const dragKey = "_drag" + axis.toUpperCase(); + const dragKey = `_drag${axis.toUpperCase()}`; const props = this.visualElement.getProps(); const externalMotionValue = props[dragKey]; return externalMotionValue ? externalMotionValue - : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0); + : this.visualElement.getValue(axis, (props.initial + ? props.initial[axis] + : undefined) || 0); } snapToCursor(point) { eachAxis((axis) => { @@ -22982,7 +23046,7 @@ class VisualElementDragControls { const axisValue = this.getAxisMotionValue(axis); if (projection && projection.layout) { const { min, max } = projection.layout.layoutBox[axis]; - axisValue.set(point[axis] - mix(min, max, 0.5)); + axisValue.set(point[axis] - mixNumber(min, max, 0.5)); } }); } @@ -23010,7 +23074,7 @@ class VisualElementDragControls { const boxProgress = { x: 0, y: 0 }; eachAxis((axis) => { const axisValue = this.getAxisMotionValue(axis); - if (axisValue) { + if (axisValue && this.constraints !== false) { const latest = axisValue.get(); boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, this.constraints[axis]); } @@ -23037,7 +23101,7 @@ class VisualElementDragControls { */ const axisValue = this.getAxisMotionValue(axis); const { min, max } = this.constraints[axis]; - axisValue.set(mix(min, max, boxProgress[axis])); + axisValue.set(mixNumber(min, max, boxProgress[axis])); }); } addListeners() { @@ -23167,9 +23231,10 @@ class DragGesture extends Feature { + const asyncHandler = (handler) => (event, info) => { if (handler) { - frame_frame.update(() => handler(event, info)); + frame_frame.postRender(() => handler(event, info)); } }; class PanGesture extends Feature { @@ -23178,7 +23243,10 @@ class PanGesture extends Feature { this.removePointerDownListener = noop_noop; } onPointerDown(pointerDownEvent) { - this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() }); + this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { + transformPagePoint: this.node.getTransformPagePoint(), + contextWindow: getContextWindow(this.node), + }); } createPanHandlers() { const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps(); @@ -23189,7 +23257,7 @@ class PanGesture extends Feature { onEnd: (event, info) => { delete this.session; if (onPanEnd) { - frame_frame.update(() => onPanEnd(event, info)); + frame_frame.postRender(() => onPanEnd(event, info)); } }, }; @@ -23364,7 +23432,7 @@ const correctBoxShadow = { * We could potentially improve the outcome of this by incorporating the ratio between * the two scales. */ - const averageScale = mix(xScale, yScale, 0.5); + const averageScale = mixNumber(xScale, yScale, 0.5); // Blur if (typeof shadow[2 + offset] === "number") shadow[2 + offset] /= averageScale; @@ -23388,6 +23456,8 @@ const correctBoxShadow = { + + class MeasureLayoutWithContext extends external_React_.Component { /** * This only mounts projection nodes for components that @@ -23460,7 +23530,7 @@ class MeasureLayoutWithContext extends external_React_.Component { const { projection } = this.props.visualElement; if (projection) { projection.root.didUpdate(); - queueMicrotask(() => { + microtask.postRender(() => { if (!projection.currentAnimation && projection.isLead()) { this.safeToRemove(); } @@ -23489,7 +23559,7 @@ class MeasureLayoutWithContext extends external_React_.Component { function MeasureLayout(props) { const [isPresent, safeToRemove] = usePresence(); const layoutGroup = (0,external_React_.useContext)(LayoutGroupContext); - return (external_React_.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })); } const defaultScaleCorrectors = { borderRadius: { @@ -23523,13 +23593,13 @@ const asNumber = (value) => typeof value === "string" ? parseFloat(value) : valu const isPx = (value) => typeof value === "number" || px.test(value); function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) { if (shouldCrossfadeOpacity) { - target.opacity = mix(0, + target.opacity = mixNumber(0, // TODO Reinstate this if only child lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress)); - target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress)); + target.opacityExit = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress)); } else if (isOnlyMember) { - target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress); + target.opacity = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress); } /** * Mix border radius @@ -23546,7 +23616,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl leadRadius === 0 || isPx(followRadius) === isPx(leadRadius); if (canMix) { - target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0); + target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress), 0); if (percent.test(leadRadius) || percent.test(followRadius)) { target[borderLabel] += "%"; } @@ -23559,7 +23629,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl * Mix rotation */ if (follow.rotate || lead.rotate) { - target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress); + target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress); } } function getRadius(values, radiusName) { @@ -23649,12 +23719,12 @@ function removePointDelta(point, translate, scale, originPoint, boxScale) { function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) { if (percent.test(translate)) { translate = parseFloat(translate); - const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100); + const relativeProgress = mixNumber(sourceAxis.min, sourceAxis.max, translate / 100); translate = relativeProgress - sourceAxis.min; } if (typeof translate !== "number") return; - let originPoint = mix(originAxis.min, originAxis.max, origin); + let originPoint = mixNumber(originAxis.min, originAxis.max, origin); if (axis === originAxis) originPoint -= translate; axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale); @@ -23835,8 +23905,9 @@ function buildProjectionTransform(delta, treeScale, latestTransform) { */ const xTranslate = delta.x.translate / treeScale.x; const yTranslate = delta.y.translate / treeScale.y; - if (xTranslate || yTranslate) { - transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `; + const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0; + if (xTranslate || yTranslate || zTranslate) { + transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `; } /** * Apply scale correction for the tree transform. @@ -23846,13 +23917,19 @@ function buildProjectionTransform(delta, treeScale, latestTransform) { transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `; } if (latestTransform) { - const { rotate, rotateX, rotateY } = latestTransform; + const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform; + if (transformPerspective) + transform = `perspective(${transformPerspective}px) ${transform}`; if (rotate) transform += `rotate(${rotate}deg) `; if (rotateX) transform += `rotateX(${rotateX}deg) `; if (rotateY) transform += `rotateY(${rotateY}deg) `; + if (skewX) + transform += `skewX(${skewX}deg) `; + if (skewY) + transform += `skewY(${skewY}deg) `; } /** * Apply scale to match the size of the element to the size we want it. @@ -23902,11 +23979,12 @@ class FlatTree { ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/delay.mjs + /** * Timeout defined in ms */ function delay(callback, timeout) { - const start = performance.now(); + const start = time.now(); const checkElapsed = ({ timestamp }) => { const elapsed = timestamp - start; if (elapsed >= timeout) { @@ -23976,7 +24054,10 @@ function animateSingleValue(value, keyframes, options) { + + const transformAxes = ["", "X", "Y", "Z"]; +const hiddenVisibility = { visibility: "hidden" }; /** * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1 * which has a noticeable difference in spring animations @@ -23993,6 +24074,17 @@ const projectionFrameData = { resolvedTargetDeltas: 0, recalculatedProjection: 0, }; +function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) { + const { latestValues } = visualElement; + // Record the distorting transform and then temporarily set it to 0 + if (latestValues[key]) { + values[key] = latestValues[key]; + visualElement.setStaticValue(key, 0); + if (sharedAnimationValues) { + sharedAnimationValues[key] = 0; + } + } +} function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) { return class ProjectionNode { constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) { @@ -24084,6 +24176,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro this.hasTreeAnimated = false; // Note: Currently only running on root node this.updateScheduled = false; + this.projectionUpdateScheduled = false; this.checkUpdateFailed = () => { if (this.isUpdating) { this.isUpdating = false; @@ -24096,6 +24189,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro * the next step. */ this.updateProjection = () => { + this.projectionUpdateScheduled = false; /** * Reset debug counts. Manually resetting rather than creating a new * object each frame. @@ -24271,7 +24365,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro if (this.isUpdateBlocked()) return; this.isUpdating = true; - this.nodes && this.nodes.forEach(resetRotation); + /** + * If we're running optimised appear animations then these must be + * cancelled before measuring the DOM. This is so we can measure + * the true layout of the element rather than the WAAPI animation + * which will be unaffected by the resetSkewAndRotate step. + */ + if (window.HandoffCancelAllAnimations) { + window.HandoffCancelAllAnimations(); + } + this.nodes && this.nodes.forEach(resetSkewAndRotation); this.animationId++; } getTransformTemplate() { @@ -24342,7 +24445,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro * we could leave this to the following requestAnimationFrame but this seems * to leave a flash of incorrectly styled content. */ - const now = performance.now(); + const now = time.now(); frameData.delta = clamp_clamp(0, 1000 / 60, now - frameData.timestamp); frameData.timestamp = now; frameData.isProcessing = true; @@ -24354,7 +24457,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro didUpdate() { if (!this.updateScheduled) { this.updateScheduled = true; - queueMicrotask(() => this.update()); + microtask.read(() => this.update()); } } clearAllSnapshots() { @@ -24362,7 +24465,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro this.sharedNodes.forEach(removeLeadSnapshots); } scheduleUpdateProjection() { - frame_frame.preRender(this.updateProjection, false, true); + if (!this.projectionUpdateScheduled) { + this.projectionUpdateScheduled = true; + frame_frame.preRender(this.updateProjection, false, true); + } } scheduleCheckAfterUnmount() { /** @@ -24633,9 +24739,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro * a relativeParent. This will allow a component to perform scale correction * even if no animation has started. */ - // TODO If this is unsuccessful this currently happens every frame if (!this.targetDelta && !this.relativeTarget) { - // TODO: This is a semi-repetition of further down this function, make DRY const relativeParent = this.getClosestProjectingParent(); if (relativeParent && relativeParent.layout && @@ -24805,6 +24909,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro !lead.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1)) { lead.target = lead.layout.layoutBox; + lead.targetWithTransforms = createBox(); } const { target } = lead; if (!target) { @@ -25068,65 +25173,68 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro return false; } } - resetRotation() { + resetSkewAndRotation() { const { visualElement } = this.options; if (!visualElement) return; - // If there's no detected rotation values, we can early return without a forced render. - let hasRotate = false; + // If there's no detected skew or rotation values, we can early return without a forced render. + let hasDistortingTransform = false; /** * An unrolled check for rotation values. Most elements don't have any rotation and * skipping the nested loop and new object creation is 50% faster. */ const { latestValues } = visualElement; - if (latestValues.rotate || + if (latestValues.z || + latestValues.rotate || latestValues.rotateX || latestValues.rotateY || - latestValues.rotateZ) { - hasRotate = true; + latestValues.rotateZ || + latestValues.skewX || + latestValues.skewY) { + hasDistortingTransform = true; } - // If there's no rotation values, we don't need to do any more. - if (!hasRotate) + // If there's no distorting values, we don't need to do any more. + if (!hasDistortingTransform) return; const resetValues = {}; - // Check the rotate value of all axes and reset to 0 + if (latestValues.z) { + resetDistortingTransform("z", visualElement, resetValues, this.animationValues); + } + // Check the skew and rotate value of all axes and reset to 0 for (let i = 0; i < transformAxes.length; i++) { - const key = "rotate" + transformAxes[i]; - // Record the rotation and then temporarily set it to 0 - if (latestValues[key]) { - resetValues[key] = latestValues[key]; - visualElement.setStaticValue(key, 0); - } + resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues); + resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues); } - // Force a render of this element to apply the transform with all rotations + // Force a render of this element to apply the transform with all skews and rotations // set to 0. visualElement.render(); // Put back all the values we reset for (const key in resetValues) { visualElement.setStaticValue(key, resetValues[key]); + if (this.animationValues) { + this.animationValues[key] = resetValues[key]; + } } // Schedule a render for the next frame. This ensures we won't visually // see the element with the reset rotate value applied. visualElement.scheduleRender(); } - getProjectionStyles(styleProp = {}) { + getProjectionStyles(styleProp) { var _a, _b; - // TODO: Return lifecycle-persistent object - const styles = {}; if (!this.instance || this.isSVG) - return styles; + return undefined; if (!this.isVisible) { - return { visibility: "hidden" }; - } - else { - styles.visibility = ""; + return hiddenVisibility; } + const styles = { + visibility: "", + }; const transformTemplate = this.getTransformTemplate(); if (this.needsReset) { this.needsReset = false; styles.opacity = ""; styles.pointerEvents = - resolveMotionValue(styleProp.pointerEvents) || ""; + resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""; styles.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none"; @@ -25141,7 +25249,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro ? this.latestValues.opacity : 1; emptyStyles.pointerEvents = - resolveMotionValue(styleProp.pointerEvents) || ""; + resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""; } if (this.hasProjected && !hasTransform(this.latestValues)) { emptyStyles.transform = transformTemplate @@ -25219,7 +25327,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro if (this.options.layoutId) { styles.pointerEvents = lead === this - ? resolveMotionValue(styleProp.pointerEvents) || "" + ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none"; } return styles; @@ -25391,21 +25499,21 @@ function resolveTargetDelta(node) { function calcProjection(node) { node.calcProjection(); } -function resetRotation(node) { - node.resetRotation(); +function resetSkewAndRotation(node) { + node.resetSkewAndRotation(); } function removeLeadSnapshots(stack) { stack.removeLeadSnapshot(); } function mixAxisDelta(output, delta, p) { - output.translate = mix(delta.translate, 0, p); - output.scale = mix(delta.scale, 1, p); + output.translate = mixNumber(delta.translate, 0, p); + output.scale = mixNumber(delta.scale, 1, p); output.origin = delta.origin; output.originPoint = delta.originPoint; } function mixAxis(output, from, to, p) { - output.min = mix(from.min, to.min, p); - output.max = mix(from.max, to.max, p); + output.min = mixNumber(from.min, to.min, p); + output.max = mixNumber(from.max, to.max, p); } function mixBox(output, from, to, p) { mixAxis(output.x, from.x, to.x, p); @@ -25419,6 +25527,7 @@ const defaultLayoutTransition = { ease: [0.4, 0, 0.1, 1], }; const userAgentContains = (string) => typeof navigator !== "undefined" && + navigator.userAgent && navigator.userAgent.toLowerCase().includes(string); /** * Measured bounding boxes must be rounded in Safari and @@ -25508,346 +25617,6 @@ const drag = { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs - - - - -/** - * Parse Framer's special CSS variable format into a CSS token and a fallback. - * - * ``` - * `var(--foo, #fff)` => [`--foo`, '#fff'] - * ``` - * - * @param current - */ -const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/; -function parseCSSVariable(current) { - const match = splitCSSVariableRegex.exec(current); - if (!match) - return [,]; - const [, token, fallback] = match; - return [token, fallback]; -} -const maxDepth = 4; -function getVariableValue(current, element, depth = 1) { - errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`); - const [token, fallback] = parseCSSVariable(current); - // No CSS variable detected - if (!token) - return; - // Attempt to read this CSS variable off the element - const resolved = window.getComputedStyle(element).getPropertyValue(token); - if (resolved) { - const trimmed = resolved.trim(); - return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed; - } - else if (isCSSVariableToken(fallback)) { - // The fallback might itself be a CSS variable, in which case we attempt to resolve it too. - return getVariableValue(fallback, element, depth + 1); - } - else { - return fallback; - } -} -/** - * Resolve CSS variables from - * - * @internal - */ -function resolveCSSVariables(visualElement, { ...target }, transitionEnd) { - const element = visualElement.current; - if (!(element instanceof Element)) - return { target, transitionEnd }; - // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd` - // only if they change but I think this reads clearer and this isn't a performance-critical path. - if (transitionEnd) { - transitionEnd = { ...transitionEnd }; - } - // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved - visualElement.values.forEach((value) => { - const current = value.get(); - if (!isCSSVariableToken(current)) - return; - const resolved = getVariableValue(current, element); - if (resolved) - value.set(resolved); - }); - // Cycle through every target property and resolve CSS variables. Currently - // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)` - for (const key in target) { - const current = target[key]; - if (!isCSSVariableToken(current)) - continue; - const resolved = getVariableValue(current, element); - if (!resolved) - continue; - // Clone target if it hasn't already been - target[key] = resolved; - if (!transitionEnd) - transitionEnd = {}; - // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved - // CSS variable. This will ensure that after the animation the component will reflect - // changes in the value of the CSS variable. - if (transitionEnd[key] === undefined) { - transitionEnd[key] = current; - } - } - return { target, transitionEnd }; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs - - - - - - - - -const positionalKeys = new Set([ - "width", - "height", - "top", - "left", - "right", - "bottom", - "x", - "y", - "translateX", - "translateY", -]); -const isPositionalKey = (key) => positionalKeys.has(key); -const hasPositionalKey = (target) => { - return Object.keys(target).some(isPositionalKey); -}; -const isNumOrPxType = (v) => v === number || v === px; -const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]); -const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => { - if (transform === "none" || !transform) - return 0; - const matrix3d = transform.match(/^matrix3d\((.+)\)$/); - if (matrix3d) { - return getPosFromMatrix(matrix3d[1], pos3); - } - else { - const matrix = transform.match(/^matrix\((.+)\)$/); - if (matrix) { - return getPosFromMatrix(matrix[1], pos2); - } - else { - return 0; - } - } -}; -const transformKeys = new Set(["x", "y", "z"]); -const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key)); -function removeNonTranslationalTransform(visualElement) { - const removedTransforms = []; - nonTranslationalTransformKeys.forEach((key) => { - const value = visualElement.getValue(key); - if (value !== undefined) { - removedTransforms.push([key, value.get()]); - value.set(key.startsWith("scale") ? 1 : 0); - } - }); - // Apply changes to element before measurement - if (removedTransforms.length) - visualElement.render(); - return removedTransforms; -} -const positionalValues = { - // Dimensions - width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight), - height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom), - top: (_bbox, { top }) => parseFloat(top), - left: (_bbox, { left }) => parseFloat(left), - bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min), - right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min), - // Transform - x: getTranslateFromMatrix(4, 13), - y: getTranslateFromMatrix(5, 14), -}; -// Alias translate longform names -positionalValues.translateX = positionalValues.x; -positionalValues.translateY = positionalValues.y; -const convertChangedValueTypes = (target, visualElement, changedKeys) => { - const originBbox = visualElement.measureViewportBox(); - const element = visualElement.current; - const elementComputedStyle = getComputedStyle(element); - const { display } = elementComputedStyle; - const origin = {}; - // If the element is currently set to display: "none", make it visible before - // measuring the target bounding box - if (display === "none") { - visualElement.setStaticValue("display", target.display || "block"); - } - /** - * Record origins before we render and update styles - */ - changedKeys.forEach((key) => { - origin[key] = positionalValues[key](originBbox, elementComputedStyle); - }); - // Apply the latest values (as set in checkAndConvertChangedValueTypes) - visualElement.render(); - const targetBbox = visualElement.measureViewportBox(); - changedKeys.forEach((key) => { - // Restore styles to their **calculated computed style**, not their actual - // originally set style. This allows us to animate between equivalent pixel units. - const value = visualElement.getValue(key); - value && value.jump(origin[key]); - target[key] = positionalValues[key](targetBbox, elementComputedStyle); - }); - return target; -}; -const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => { - target = { ...target }; - transitionEnd = { ...transitionEnd }; - const targetPositionalKeys = Object.keys(target).filter(isPositionalKey); - // We want to remove any transform values that could affect the element's bounding box before - // it's measured. We'll reapply these later. - let removedTransformValues = []; - let hasAttemptedToRemoveTransformValues = false; - const changedValueTypeKeys = []; - targetPositionalKeys.forEach((key) => { - const value = visualElement.getValue(key); - if (!visualElement.hasValue(key)) - return; - let from = origin[key]; - let fromType = findDimensionValueType(from); - const to = target[key]; - let toType; - // TODO: The current implementation of this basically throws an error - // if you try and do value conversion via keyframes. There's probably - // a way of doing this but the performance implications would need greater scrutiny, - // as it'd be doing multiple resize-remeasure operations. - if (isKeyframesTarget(to)) { - const numKeyframes = to.length; - const fromIndex = to[0] === null ? 1 : 0; - from = to[fromIndex]; - fromType = findDimensionValueType(from); - for (let i = fromIndex; i < numKeyframes; i++) { - /** - * Don't allow wildcard keyframes to be used to detect - * a difference in value types. - */ - if (to[i] === null) - break; - if (!toType) { - toType = findDimensionValueType(to[i]); - errors_invariant(toType === fromType || - (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value"); - } - else { - errors_invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type"); - } - } - } - else { - toType = findDimensionValueType(to); - } - if (fromType !== toType) { - // If they're both just number or px, convert them both to numbers rather than - // relying on resize/remeasure to convert (which is wasteful in this situation) - if (isNumOrPxType(fromType) && isNumOrPxType(toType)) { - const current = value.get(); - if (typeof current === "string") { - value.set(parseFloat(current)); - } - if (typeof to === "string") { - target[key] = parseFloat(to); - } - else if (Array.isArray(to) && toType === px) { - target[key] = to.map(parseFloat); - } - } - else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) && - (toType === null || toType === void 0 ? void 0 : toType.transform) && - (from === 0 || to === 0)) { - // If one or the other value is 0, it's safe to coerce it to the - // type of the other without measurement - if (from === 0) { - value.set(toType.transform(from)); - } - else { - target[key] = fromType.transform(to); - } - } - else { - // If we're going to do value conversion via DOM measurements, we first - // need to remove non-positional transform values that could affect the bbox measurements. - if (!hasAttemptedToRemoveTransformValues) { - removedTransformValues = - removeNonTranslationalTransform(visualElement); - hasAttemptedToRemoveTransformValues = true; - } - changedValueTypeKeys.push(key); - transitionEnd[key] = - transitionEnd[key] !== undefined - ? transitionEnd[key] - : target[key]; - value.jump(to); - } - } - }); - if (changedValueTypeKeys.length) { - const scrollY = changedValueTypeKeys.indexOf("height") >= 0 - ? window.pageYOffset - : null; - const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys); - // If we removed transform values, reapply them before the next render - if (removedTransformValues.length) { - removedTransformValues.forEach(([key, value]) => { - visualElement.getValue(key).set(value); - }); - } - // Reapply original values - visualElement.render(); - // Restore scroll position - if (is_browser_isBrowser && scrollY !== null) { - window.scrollTo({ top: scrollY }); - } - return { target: convertedTarget, transitionEnd }; - } - else { - return { target, transitionEnd }; - } -}; -/** - * Convert value types for x/y/width/height/top/left/bottom/right - * - * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'` - * - * @internal - */ -function unitConversion(visualElement, target, origin, transitionEnd) { - return hasPositionalKey(target) - ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd) - : { target, transitionEnd }; -} - - - -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs - - - -/** - * Parse a DOM variant to make it animatable. This involves resolving CSS variables - * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels. - */ -const parseDomVariant = (visualElement, target, origin, transitionEnd) => { - const resolved = resolveCSSVariables(visualElement, target, transitionEnd); - target = resolved.target; - transitionEnd = resolved.transitionEnd; - return unitConversion(visualElement, target, origin, transitionEnd); -}; - - - ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs // Does this device prefer reduced motion? Returns `null` server-side. const prefersReducedMotion = { current: null }; @@ -25920,8 +25689,12 @@ function updateMotionValuesFromProps(element, next, prev) { */ if (element.hasValue(key)) { const existingValue = element.getValue(key); - // TODO: Only update values that aren't being animated or even looked at - !existingValue.hasAnimated && existingValue.set(nextValue); + if (existingValue.liveStyle === true) { + existingValue.jump(nextValue); + } + else if (!existingValue.hasAnimated) { + existingValue.set(nextValue); + } } else { const latestValue = element.getStaticValue(key); @@ -25944,6 +25717,23 @@ const visualElementStore = new WeakMap(); +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs + + + + + +/** + * A list of all ValueTypes + */ +const valueTypes = [...dimensionValueTypes, color, complex]; +/** + * Tests a value against the list of ValueTypes + */ +const findValueType = (v) => valueTypes.find(testValueType(v)); + + + ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/VisualElement.mjs @@ -25965,6 +25755,12 @@ const visualElementStore = new WeakMap(); + + + + + + const featureNames = Object.keys(featureDefinitions); const numFeatures = featureNames.length; const propEventHandlers = [ @@ -25977,12 +25773,36 @@ const propEventHandlers = [ "LayoutAnimationComplete", ]; const numVariantProps = variantProps.length; +function getClosestProjectingNode(visualElement) { + if (!visualElement) + return undefined; + return visualElement.options.allowProjection !== false + ? visualElement.projection + : getClosestProjectingNode(visualElement.parent); +} /** * A VisualElement is an imperative abstraction around UI elements such as * HTMLElement, SVGElement, Three.Object3D etc. */ class VisualElement { - constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) { + /** + * This method takes React props and returns found MotionValues. For example, HTML + * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays. + * + * This isn't an abstract method as it needs calling in the constructor, but it is + * intended to be one. + */ + scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) { + return {}; + } + constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) { + this.resolveKeyframes = (keyframes, + // We use an onComplete callback here rather than a Promise as a Promise + // resolution is a microtask and we want to retain the ability to force + // the resolution of keyframes synchronously. + onComplete, name, value) => { + return new this.KeyframeResolver(keyframes, onComplete, name, value, this); + }; /** * A reference to the current underlying Instance, e.g. a HTMLElement * or Three.Mesh etc. @@ -26011,6 +25831,7 @@ class VisualElement { * value might be provided externally by the component via props. */ this.values = new Map(); + this.KeyframeResolver = KeyframeResolver; /** * Cleanup functions for active features (hover/tap/exit etc) */ @@ -26055,6 +25876,7 @@ class VisualElement { this.depth = parent ? parent.depth + 1 : 0; this.reducedMotionConfig = reducedMotionConfig; this.options = options; + this.blockInitialAnimation = Boolean(blockInitialAnimation); this.isControllingVariants = isControllingVariants(props); this.isVariantNode = isVariantNode(props); if (this.isVariantNode) { @@ -26071,7 +25893,7 @@ class VisualElement { * Doing so will break some tests but this isn't neccessarily a breaking change, * more a reflection of the test. */ - const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}); + const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this); for (const key in initialMotionValues) { const value = initialMotionValues[key]; if (latestValues[key] !== undefined && isMotionValue(value)) { @@ -26082,16 +25904,6 @@ class VisualElement { } } } - /** - * This method takes React props and returns found MotionValues. For example, HTML - * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays. - * - * This isn't an abstract method as it needs calling in the constructor, but it is - * intended to be one. - */ - scrapeMotionValuesFromProps(_props, _prevProps) { - return {}; - } mount(instance) { this.current = instance; visualElementStore.set(instance, this); @@ -26117,6 +25929,7 @@ class VisualElement { this.update(this.props, this.presenceContext); } unmount() { + var _a; visualElementStore.delete(this.current); this.projection && this.projection.unmount(); cancelFrame(this.notifyUpdate); @@ -26128,7 +25941,7 @@ class VisualElement { this.events[key].clear(); } for (const key in this.features) { - this.features[key].unmount(); + (_a = this.features[key]) === null || _a === void 0 ? void 0 : _a.unmount(); } this.current = null; } @@ -26136,8 +25949,7 @@ class VisualElement { const valueIsTransform = transformProps.has(key); const removeOnChange = value.on("change", (latestValue) => { this.latestValues[key] = latestValue; - this.props.onUpdate && - frame_frame.update(this.notifyUpdate, false, true); + this.props.onUpdate && frame_frame.preRender(this.notifyUpdate); if (valueIsTransform && this.projection) { this.projection.isTransformDirty = true; } @@ -26146,6 +25958,8 @@ class VisualElement { this.valueSubscriptions.set(key, () => { removeOnChange(); removeOnRenderRequest(); + if (value.owner) + value.stop(); }); } sortNodePosition(other) { @@ -26181,9 +25995,13 @@ class VisualElement { } } } - if (!this.projection && ProjectionNodeConstructor) { - this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection); + if ((this.type === "html" || this.type === "svg") && + !this.projection && + ProjectionNodeConstructor) { const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps; + this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps["data-framer-portal-id"] + ? undefined + : getClosestProjectingNode(this.parent)); this.projection.setOptions({ layoutId, layout, @@ -26238,16 +26056,6 @@ class VisualElement { this.latestValues[key] = value; } /** - * Make a target animatable by Popmotion. For instance, if we're - * trying to animate width from 100px to 100vw we need to measure 100vw - * in pixels to determine what we really need to animate to. This is also - * pluggable to support Framer's custom value types like Color, - * and CSS variables. - */ - makeTargetAnimatable(target, canMutate = true) { - return this.makeTargetAnimatableFromInstance(target, this.props, canMutate); - } - /** * Update the provided props. Ensure any newly-added motion values are * added to our map, old ones removed, and listeners updated. */ @@ -26268,12 +26076,13 @@ class VisualElement { this.propEventSubscriptions[key](); delete this.propEventSubscriptions[key]; } - const listener = props["on" + key]; + const listenerName = ("on" + key); + const listener = props[listenerName]; if (listener) { this.propEventSubscriptions[key] = this.on(key, listener); } } - this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues); + this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues); if (this.handleChildMotionValue) { this.handleChildMotionValue(); } @@ -26342,12 +26151,14 @@ class VisualElement { */ addValue(key, value) { // Remove existing value if it exists - if (value !== this.values.get(key)) { - this.removeValue(key); + const existingValue = this.values.get(key); + if (value !== existingValue) { + if (existingValue) + this.removeValue(key); this.bindToMotionValue(key, value); + this.values.set(key, value); + this.latestValues[key] = value.get(); } - this.values.set(key, value); - this.latestValues[key] = value.get(); } /** * Remove a motion value and unbind any active subscriptions. @@ -26374,7 +26185,7 @@ class VisualElement { } let value = this.values.get(key); if (value === undefined && defaultValue !== undefined) { - value = motionValue(defaultValue, { owner: this }); + value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this }); this.addValue(key, value); } return value; @@ -26384,11 +26195,23 @@ class VisualElement { * we need to check for it in our state and as a last resort read it * directly from the instance (which might have performance implications). */ - readValue(key) { + readValue(key, target) { var _a; - return this.latestValues[key] !== undefined || !this.current + let value = this.latestValues[key] !== undefined || !this.current ? this.latestValues[key] : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options); + if (value !== undefined && value !== null) { + if (typeof value === "string" && + (isNumericalString(value) || isZeroValueString(value))) { + // If this is a number read as a string, ie "0" or "200", convert it to a number + value = parseFloat(value); + } + else if (!findValueType(value) && complex.test(target)) { + value = animatable_none_getAnimatableNone(key, target); + } + this.setBaseTarget(key, isMotionValue(value) ? value.get() : value); + } + return isMotionValue(value) ? value.get() : value; } /** * Set the base target to later animate back to. This is currently @@ -26404,9 +26227,13 @@ class VisualElement { getBaseTarget(key) { var _a; const { initial } = this.props; - const valueFromInitial = typeof initial === "string" || typeof initial === "object" - ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key] - : undefined; + let valueFromInitial; + if (typeof initial === "string" || typeof initial === "object") { + const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom); + if (variant) { + valueFromInitial = variant[key]; + } + } /** * If this value still exists in the current initial variant, read that. */ @@ -26448,8 +26275,11 @@ class VisualElement { - class DOMVisualElement extends VisualElement { + constructor() { + super(...arguments); + this.KeyframeResolver = DOMKeyframesResolver; + } sortInstanceNodePosition(a, b) { /** * compareDocumentPosition returns a bitmask, by using the bitwise & @@ -26459,37 +26289,14 @@ class DOMVisualElement extends VisualElement { return a.compareDocumentPosition(b) & 2 ? 1 : -1; } getBaseTargetFromProps(props, key) { - return props.style ? props.style[key] : undefined; + return props.style + ? props.style[key] + : undefined; } removeValueFromRenderState(key, { vars, style }) { delete vars[key]; delete style[key]; } - makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) { - let origin = getOrigin(target, transition || {}, this); - /** - * If Framer has provided a function to convert `Color` etc value types, convert them - */ - if (transformValues) { - if (transitionEnd) - transitionEnd = transformValues(transitionEnd); - if (target) - target = transformValues(target); - if (origin) - origin = transformValues(origin); - } - if (isMounted) { - checkTargetForNewValues(this, target, origin); - const parsed = parseDomVariant(this, target, origin, transitionEnd); - transitionEnd = parsed.transitionEnd; - target = parsed.target; - } - return { - transition, - transitionEnd, - ...target, - }; - } } @@ -26509,6 +26316,10 @@ function HTMLVisualElement_getComputedStyle(element) { return window.getComputedStyle(element); } class HTMLVisualElement extends DOMVisualElement { + constructor() { + super(...arguments); + this.type = "html"; + } readValueFromInstance(instance, key) { if (transformProps.has(key)) { const defaultType = getDefaultValueType(key); @@ -26528,8 +26339,8 @@ class HTMLVisualElement extends DOMVisualElement { build(renderState, latestValues, options, props) { buildHTMLStyles(renderState, latestValues, options, props.transformTemplate); } - scrapeMotionValuesFromProps(props, prevProps) { - return scrapeMotionValuesFromProps(props, prevProps); + scrapeMotionValuesFromProps(props, prevProps, visualElement) { + return scrapeMotionValuesFromProps(props, prevProps, visualElement); } handleChildMotionValue() { if (this.childSubscription) { @@ -26566,6 +26377,7 @@ class HTMLVisualElement extends DOMVisualElement { class SVGVisualElement extends DOMVisualElement { constructor() { super(...arguments); + this.type = "svg"; this.isSVGTag = false; } getBaseTargetFromProps(props, key) { @@ -26582,8 +26394,8 @@ class SVGVisualElement extends DOMVisualElement { measureInstanceViewportBox() { return createBox(); } - scrapeMotionValuesFromProps(props, prevProps) { - return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps); + scrapeMotionValuesFromProps(props, prevProps, visualElement) { + return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement); } build(renderState, latestValues, options, props) { buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate); @@ -26604,10 +26416,14 @@ class SVGVisualElement extends DOMVisualElement { + const create_visual_element_createDomVisualElement = (Component, options) => { return isSVGComponent(Component) ? new SVGVisualElement(options, { enableHardwareAcceleration: false }) - : new HTMLVisualElement(options, { enableHardwareAcceleration: true }); + : new HTMLVisualElement(options, { + allowProjection: Component !== external_React_.Fragment, + enableHardwareAcceleration: true, + }); }; @@ -26711,6 +26527,8 @@ function use_force_update_useForceUpdate() { + + /** * Measurement functionality has to be within a separate component * to leverage snapshot lifecycle. @@ -26744,6 +26562,7 @@ function PopChild({ children, isPresent }) { top: 0, left: 0, }); + const { nonce } = (0,external_React_.useContext)(MotionConfigContext); /** * We create and inject a style block so we can apply this explicit * sizing in a non-destructive manner by just deleting the style block. @@ -26759,6 +26578,8 @@ function PopChild({ children, isPresent }) { return; ref.current.dataset.motionPopId = id; const style = document.createElement("style"); + if (nonce) + style.nonce = nonce; document.head.appendChild(style); if (style.sheet) { style.sheet.insertRule(` @@ -26775,7 +26596,7 @@ function PopChild({ children, isPresent }) { document.head.removeChild(style); }; }, [isPresent]); - return (external_React_.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, external_React_.cloneElement(children, { ref }))); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: external_React_.cloneElement(children, { ref }) })); } @@ -26787,6 +26608,7 @@ function PopChild({ children, isPresent }) { + const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => { const presenceChildren = useConstant(newChildrenMap); const id = (0,external_React_.useId)(); @@ -26813,7 +26635,7 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p * we want to make a new context value to ensure they get re-rendered * so they can detect that layout change. */ - presenceAffectsLayout ? undefined : [isPresent]); + presenceAffectsLayout ? [Math.random()] : [isPresent]); (0,external_React_.useMemo)(() => { presenceChildren.forEach((_, key) => presenceChildren.set(key, false)); }, [isPresent]); @@ -26828,9 +26650,9 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p onExitComplete(); }, [isPresent]); if (mode === "popLayout") { - children = external_React_.createElement(PopChild, { isPresent: isPresent }, children); + children = (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopChild, { isPresent: isPresent, children: children }); } - return (external_React_.createElement(PresenceContext_PresenceContext.Provider, { value: context }, children)); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceContext_PresenceContext.Provider, { value: context, children: children })); }; function newChildrenMap() { return new Map(); @@ -26936,7 +26758,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi exitingChildren.clear(); }); if (isInitialRender.current) { - return (external_React_.createElement(external_React_.Fragment, null, childrenToRender.map((child) => (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child))))); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: childrenToRender.map((child) => ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child)))) })); } // If this is a subsequent render, deal with entering and exiting children childrenToRender = [...childrenToRender]; @@ -26970,21 +26792,32 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi let exitingComponent = component; if (!exitingComponent) { const onExit = () => { - allChildren.delete(key); + // clean up the exiting children map exitingChildren.delete(key); - // Remove this child from the present children - const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key); - presentChildren.current.splice(removeIndex, 1); + // compute the keys of children that were rendered once but are no longer present + // this could happen in case of too many fast consequent renderings + // @link https://github.com/framer/motion/issues/2023 + const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey)); + // clean up the all children map + leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey)); + // make sure to render only the children that are actually visible + presentChildren.current = filteredChildren.filter((presentChild) => { + const presentChildKey = getChildKey(presentChild); + return ( + // filter out the node exiting + presentChildKey === key || + // filter out the leftover children + leftOverKeys.includes(presentChildKey)); + }); // Defer re-rendering until all exiting children have indeed left if (!exitingChildren.size) { - presentChildren.current = filteredChildren; if (isMounted.current === false) return; forceRender(); onExitComplete && onExitComplete(); } }; - exitingComponent = (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)); + exitingComponent = ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child))); exitingChildren.set(key, exitingComponent); } childrenToRender.splice(insertionIndex, 0, exitingComponent); @@ -26993,12 +26826,12 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi // the same tree between renders childrenToRender = childrenToRender.map((child) => { const key = child.key; - return exitingChildren.has(key) ? (child) : (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)); + return exitingChildren.has(key) ? (child) : ((0,external_ReactJSXRuntime_namespaceObject.jsx)(PresenceChild, { isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode, children: child }, getChildKey(child))); }); if (false) {} - return (external_React_.createElement(external_React_.Fragment, null, exitingChildren.size - ? childrenToRender - : childrenToRender.map((child) => (0,external_React_.cloneElement)(child)))); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { children: exitingChildren.size + ? childrenToRender + : childrenToRender.map((child) => (0,external_React_.cloneElement)(child)) })); }; @@ -27045,7 +26878,9 @@ function useResponsiveValue(values, options = {}) { const index = useBreakpointIndex(options); // Allow calling the function with a "normal" value without having to check on the outside. - if (!Array.isArray(values) && typeof values !== 'function') return values; + if (!Array.isArray(values) && typeof values !== 'function') { + return values; + } const array = values || []; /* eslint-disable jsdoc/no-undefined-types */ @@ -27218,7 +27053,6 @@ const FlexContext = (0,external_wp_element_namespaceObject.createContext)({ const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/component.js - /** * External dependencies */ @@ -27231,20 +27065,23 @@ const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)( + function UnconnectedFlex(props, forwardedRef) { const { children, isColumn, ...otherProps } = useFlex(props); - return (0,external_React_.createElement)(FlexContext.Provider, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexContext.Provider, { value: { flexItemDisplay: isColumn ? 'block' : undefined - } - }, (0,external_React_.createElement)(component, { - ...otherProps, - ref: forwardedRef - }, children)); + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + ...otherProps, + ref: forwardedRef, + children: children + }) + }); } /** @@ -27327,7 +27164,6 @@ function useFlexBlock(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js - /** * External dependencies */ @@ -27339,9 +27175,10 @@ function useFlexBlock(props) { + function UnconnectedFlexBlock(props, forwardedRef) { const flexBlockProps = useFlexBlock(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...flexBlockProps, ref: forwardedRef }); @@ -27433,11 +27270,11 @@ function rtl(ltrStyles = {}, rtlStyles) { return () => { if (rtlStyles) { // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css - return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(rtlStyles, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0); + return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(rtlStyles, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0, true ? "" : 0); } // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css - return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(convertLTRToRTL(ltrStyles), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0); + return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(convertLTRToRTL(ltrStyles), true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0, true ? "" : 0); }; } @@ -27505,7 +27342,6 @@ function useSpacer(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/component.js - /** * External dependencies */ @@ -27517,9 +27353,10 @@ function useSpacer(props) { + function UnconnectedSpacer(props, forwardedRef) { const spacerProps = useSpacer(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...spacerProps, ref: forwardedRef }); @@ -27553,35 +27390,36 @@ const Spacer = contextConnect(UnconnectedSpacer, 'Spacer'); /* harmony default export */ const spacer_component = (Spacer); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js - /** * WordPress dependencies */ -const plus = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const plus = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" + }) +}); /* harmony default export */ const library_plus = (plus); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/reset.js - /** * WordPress dependencies */ -const reset_reset = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const reset_reset = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M7 11.5h10V13H7z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M7 11.5h10V13H7z" + }) +}); /* harmony default export */ const library_reset = (reset_reset); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js - /** * External dependencies */ @@ -27593,9 +27431,10 @@ const reset_reset = (0,external_React_.createElement)(external_wp_primitives_nam + function UnconnectedFlexItem(props, forwardedRef) { const flexItemProps = useFlexItem(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...flexItemProps, ref: forwardedRef }); @@ -27812,7 +27651,10 @@ function useTruncate(props) { }) : children; const shouldTruncate = !!childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto; const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { - const truncateLines = /*#__PURE__*/emotion_react_browser_esm_css("-webkit-box-orient:vertical;-webkit-line-clamp:", numberOfLines, ";display:-webkit-box;overflow:hidden;" + ( true ? "" : 0), true ? "" : 0); + // The `word-break: break-all` property first makes sure a text line + // breaks even when it contains 'unbreakable' content such as long URLs. + // See https://github.com/WordPress/gutenberg/issues/60860. + const truncateLines = /*#__PURE__*/emotion_react_browser_esm_css(numberOfLines === 1 ? 'word-break: break-all;' : '', " -webkit-box-orient:vertical;-webkit-line-clamp:", numberOfLines, ";display:-webkit-box;overflow:hidden;" + ( true ? "" : 0), true ? "" : 0); return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && truncateLines, className); }, [className, cx, numberOfLines, shouldTruncate]); return { @@ -27823,7 +27665,7 @@ function useTruncate(props) { } ;// CONCATENATED MODULE: ./node_modules/colord/index.mjs -var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})}; +var colord_r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(colord_r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})}; ;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs /* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])} @@ -27859,7 +27701,9 @@ function colors_rgba(hexValue = '', alpha = 1) { * @return {HTMLDivElement | undefined} The HTML element for color computation. */ function getColorComputationNode() { - if (typeof document === 'undefined') return; + if (typeof document === 'undefined') { + return; + } if (!colorComputationNode) { // Create a temporary element for style computation. const el = document.createElement('div'); @@ -27877,7 +27721,9 @@ function getColorComputationNode() { * @return {boolean} Whether the value is a valid color. */ function isColor(value) { - if (typeof value !== 'string') return false; + if (typeof value !== 'string') { + return false; + } const test = w(value); return test.isValid(); } @@ -27891,14 +27737,24 @@ function isColor(value) { * @return {string} The computed background color. */ function _getComputedBackgroundColor(backgroundColor) { - if (typeof backgroundColor !== 'string') return ''; - if (isColor(backgroundColor)) return backgroundColor; - if (!backgroundColor.includes('var(')) return ''; - if (typeof document === 'undefined') return ''; + if (typeof backgroundColor !== 'string') { + return ''; + } + if (isColor(backgroundColor)) { + return backgroundColor; + } + if (!backgroundColor.includes('var(')) { + return ''; + } + if (typeof document === 'undefined') { + return ''; + } // Attempts to gracefully handle CSS variables color values. const el = getColorComputationNode(); - if (!el) return ''; + if (!el) { + return ''; + } el.style.background = backgroundColor; // Grab the style. const computedColor = window?.getComputedStyle(el).background; @@ -27989,7 +27845,7 @@ const TOGGLE_GROUP_CONTROL_PROPS = { fontSizeMobile: '15px', fontSizeSmall: 'calc(0.92 * 13px)', fontSizeXSmall: 'calc(0.75 * 13px)', - fontLineHeightBase: '1.2', + fontLineHeightBase: '1.4', fontWeight: 'normal', fontWeightHeading: '600', gridBase: '4px', @@ -28026,7 +27882,7 @@ function text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t * Internal dependencies */ -const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;" + ( true ? "" : 0), true ? "" : 0); +const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;text-wrap:balance;text-wrap:pretty;" + ( true ? "" : 0), true ? "" : 0); const styles_block = true ? { name: "4zleql", styles: "display:block" @@ -28125,8 +27981,12 @@ function createHighlighterText({ unhighlightClassName = '', unhighlightStyle }) { - if (!children) return null; - if (typeof children !== 'string') return children; + if (!children) { + return null; + } + if (typeof children !== 'string') { + return children; + } const textToHighlight = children; const chunks = (0,dist.findAll)({ autoEscape, @@ -28207,7 +28067,9 @@ function getFontSize(size = BASE_FONT_SIZE) { } if (typeof size !== 'number') { const parsed = parseFloat(size); - if (Number.isNaN(parsed)) return size; + if (Number.isNaN(parsed)) { + return size; + } size = parsed; } const ratio = `(${size} / ${BASE_FONT_SIZE})`; @@ -28233,8 +28095,12 @@ function getHeadingFontSize(size = 3) { function getLineHeight(adjustLineHeightForInnerControls, lineHeight) { - if (lineHeight) return lineHeight; - if (!adjustLineHeightForInnerControls) return; + if (lineHeight) { + return lineHeight; + } + if (!adjustLineHeightForInnerControls) { + return; + } let value = `calc(${config_values.controlHeight} + ${space(2)})`; switch (adjustLineHeightForInnerControls) { case 'large': @@ -28389,7 +28255,6 @@ function useText(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/component.js - /** * Internal dependencies */ @@ -28397,13 +28262,14 @@ function useText(props) { + /** * @param props * @param forwardedRef */ function UnconnectedText(props, forwardedRef) { const textProps = useText(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { as: "span", ...textProps, ref: forwardedRef @@ -28445,30 +28311,53 @@ const baseLabelTypography = true ? { ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js - function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /** * External dependencies */ +/** + * Internal dependencies + */ -var _ref2 = true ? { - name: "1739oy8", - styles: "z-index:1" -} : 0; -const rootFocusedStyles = ({ - isFocused + + +const Prefix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { + target: "em5sgkm7" +} : 0)( true ? { + name: "pvvbxf", + styles: "box-sizing:border-box;display:block" +} : 0); +const Suffix = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { + target: "em5sgkm6" +} : 0)( true ? { + name: "jgf79h", + styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex" +} : 0); +const backdropBorderColor = ({ + disabled, + isBorderless }) => { - if (!isFocused) return ''; - return _ref2; + if (isBorderless) { + return 'transparent'; + } + if (disabled) { + return COLORS.ui.borderDisabled; + } + return COLORS.ui.border; }; +const BackdropUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { + target: "em5sgkm5" +} : 0)("&&&{box-sizing:border-box;border-color:", backdropBorderColor, ";border-radius:inherit;border-style:solid;border-width:1px;bottom:0;left:0;margin:0;padding:0;pointer-events:none;position:absolute;right:0;top:0;", rtl({ + paddingLeft: 2 +}), ";}" + ( true ? "" : 0)); const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { - target: "em5sgkm7" -} : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;", rootFocusedStyles, ";" + ( true ? "" : 0)); + target: "em5sgkm4" +} : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;&:focus-within:not( :has( :is( ", Prefix, ", ", Suffix, " ):focus-within ) ){", BackdropUI, "{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";outline:2px solid transparent;outline-offset:-2px;}}" + ( true ? "" : 0)); const containerDisabledStyles = ({ disabled }) => { @@ -28485,8 +28374,12 @@ const containerWidthStyles = ({ __unstableInputWidth, labelPosition }) => { - if (!__unstableInputWidth) return input_control_styles_ref; - if (labelPosition === 'side') return ''; + if (!__unstableInputWidth) { + return input_control_styles_ref; + } + if (labelPosition === 'side') { + return ''; + } if (labelPosition === 'edge') { return /*#__PURE__*/emotion_react_browser_esm_css({ flex: `0 0 ${__unstableInputWidth}` @@ -28496,13 +28389,15 @@ const containerWidthStyles = ({ width: __unstableInputWidth }, true ? "" : 0, true ? "" : 0); }; -const Container = emotion_styled_base_browser_esm("div", true ? { - target: "em5sgkm6" +const Container = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { + target: "em5sgkm3" } : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0)); const disabledStyles = ({ disabled }) => { - if (!disabled) return ''; + if (!disabled) { + return ''; + } return /*#__PURE__*/emotion_react_browser_esm_css({ color: COLORS.ui.textDisabled }, true ? "" : 0, true ? "" : 0); @@ -28518,7 +28413,9 @@ const fontSizeStyles = ({ }; const fontSize = sizes[size] || sizes.default; const fontSizeMobile = '16px'; - if (!fontSize) return ''; + if (!fontSize) { + return ''; + } return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); }; const getSizeConfig = ({ @@ -28591,70 +28488,24 @@ const dragStyles = ({ // TODO: Resolve need to use &&& to increase specificity // https://github.com/WordPress/gutenberg/issues/18483 -const Input = emotion_styled_base_browser_esm("input", true ? { - target: "em5sgkm5" +const Input = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? { + target: "em5sgkm2" } : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.theme.foreground, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0)); const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { - target: "em5sgkm4" + target: "em5sgkm1" } : 0)("&&&{", baseLabelTypography, ";box-sizing:border-box;display:block;padding-top:0;padding-bottom:0;max-width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" + ( true ? "" : 0)); -const Label = props => (0,external_React_.createElement)(BaseLabel, { +const Label = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseLabel, { ...props, as: "label" }); const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component, true ? { - target: "em5sgkm3" + target: "em5sgkm0" } : 0)( true ? { name: "1b6uupn", styles: "max-width:calc( 100% - 10px )" } : 0); -const backdropFocusedStyles = ({ - disabled, - isBorderless, - isFocused -}) => { - let borderColor = isBorderless ? 'transparent' : COLORS.ui.border; - let boxShadow; - let outline; - let outlineOffset; - if (isFocused) { - borderColor = COLORS.ui.borderFocus; - boxShadow = config_values.controlBoxShadowFocus; - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline = `2px solid transparent`; - outlineOffset = `-2px`; - } - if (disabled) { - borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled; - } - return /*#__PURE__*/emotion_react_browser_esm_css({ - boxShadow, - borderColor, - borderStyle: 'solid', - borderWidth: 1, - outline, - outlineOffset - }, true ? "" : 0, true ? "" : 0); -}; -const BackdropUI = emotion_styled_base_browser_esm("div", true ? { - target: "em5sgkm2" -} : 0)("&&&{box-sizing:border-box;border-radius:inherit;bottom:0;left:0;margin:0;padding:0;pointer-events:none;position:absolute;right:0;top:0;", backdropFocusedStyles, " ", rtl({ - paddingLeft: 2 -}), ";}" + ( true ? "" : 0)); -const Prefix = emotion_styled_base_browser_esm("span", true ? { - target: "em5sgkm1" -} : 0)( true ? { - name: "pvvbxf", - styles: "box-sizing:border-box;display:block" -} : 0); -const Suffix = emotion_styled_base_browser_esm("span", true ? { - target: "em5sgkm0" -} : 0)( true ? { - name: "jgf79h", - styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex" -} : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/backdrop.js - /** * WordPress dependencies */ @@ -28663,46 +28514,51 @@ const Suffix = emotion_styled_base_browser_esm("span", true ? { * Internal dependencies */ + function Backdrop({ disabled = false, - isBorderless = false, - isFocused = false + isBorderless = false }) { - return (0,external_React_.createElement)(BackdropUI, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BackdropUI, { "aria-hidden": "true", className: "components-input-control__backdrop", disabled: disabled, - isBorderless: isBorderless, - isFocused: isFocused + isBorderless: isBorderless }); } const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop); /* harmony default export */ const backdrop = (MemoizedBackdrop); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/label.js - /** * Internal dependencies */ + function label_Label({ children, hideLabelFromVision, htmlFor, ...props }) { - if (!children) return null; + if (!children) { + return null; + } if (hideLabelFromVision) { - return (0,external_React_.createElement)(visually_hidden_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { as: "label", - htmlFor: htmlFor - }, children); + htmlFor: htmlFor, + children: children + }); } - return (0,external_React_.createElement)(LabelWrapper, null, (0,external_React_.createElement)(Label, { - htmlFor: htmlFor, - ...props - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabelWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Label, { + htmlFor: htmlFor, + ...props, + children: children + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/use-deprecated-props.js @@ -28719,7 +28575,6 @@ function useDeprecated36pxDefaultSizeProp(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-base.js - /** * External dependencies */ @@ -28738,6 +28593,8 @@ function useDeprecated36pxDefaultSizeProp(props) { + + function useUniqueId(idProp) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase); const id = `input-base-control-${instanceId}`; @@ -28775,7 +28632,6 @@ function InputBase(props, ref) { labelPosition, id: idProp, isBorderless = false, - isFocused = false, label, prefix, size = 'default', @@ -28802,39 +28658,48 @@ function InputBase(props, ref) { }; }, [paddingLeft, paddingRight]); return ( + /*#__PURE__*/ // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions. - (0,external_React_.createElement)(input_control_styles_Root, { + (0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_control_styles_Root, { ...restProps, ...getUIFlexProps(labelPosition), className: className, gap: 2, - isFocused: isFocused, - labelPosition: labelPosition, - ref: ref - }, (0,external_React_.createElement)(label_Label, { - className: "components-input-control__label", - hideLabelFromVision: hideLabelFromVision, - labelPosition: labelPosition, - htmlFor: id - }, label), (0,external_React_.createElement)(Container, { - __unstableInputWidth: __unstableInputWidth, - className: "components-input-control__container", - disabled: disabled, - hideLabel: hideLabel, - labelPosition: labelPosition - }, (0,external_React_.createElement)(ContextSystemProvider, { - value: prefixSuffixContextValue - }, prefix && (0,external_React_.createElement)(Prefix, { - className: "components-input-control__prefix" - }, prefix), children, suffix && (0,external_React_.createElement)(Suffix, { - className: "components-input-control__suffix" - }, suffix)), (0,external_React_.createElement)(backdrop, { - disabled: disabled, - isBorderless: isBorderless, - isFocused: isFocused - }))) + ref: ref, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(label_Label, { + className: "components-input-control__label", + hideLabelFromVision: hideLabelFromVision, + labelPosition: labelPosition, + htmlFor: id, + children: label + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Container, { + __unstableInputWidth: __unstableInputWidth, + className: "components-input-control__container", + disabled: disabled, + hideLabel: hideLabel, + labelPosition: labelPosition, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ContextSystemProvider, { + value: prefixSuffixContextValue, + children: [prefix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Prefix, { + className: "components-input-control__prefix", + children: prefix + }), children, suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Suffix, { + className: "components-input-control__suffix", + children: suffix + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(backdrop, { + disabled: disabled, + isBorderless: isBorderless + })] + })] + }) ); } + +/** + * `InputBase` is an internal component used to style the standard borders for an input, + * as well as handle the layout for prefix/suffix elements. + */ /* harmony default export */ const input_base = (contextConnect(InputBase, 'InputBase')); ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js @@ -28878,7 +28743,7 @@ function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) { -;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-b1cc53c2.esm.js +;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-fe213e88.esm.js function _toPrimitive(input, hint) { @@ -28912,26 +28777,26 @@ function _defineProperty(obj, key, value) { return obj; } -function ownKeys(object, enumerableOnly) { - var keys = Object.keys(object); +function ownKeys(e, r) { + var t = Object.keys(e); if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - enumerableOnly && (symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - })), keys.push.apply(keys, symbols); - } - return keys; -} -function _objectSpread2(target) { - for (var i = 1; i < arguments.length; i++) { - var source = null != arguments[i] ? arguments[i] : {}; - i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { - _defineProperty(target, key, source[key]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + var o = Object.getOwnPropertySymbols(e); + r && (o = o.filter(function (r) { + return Object.getOwnPropertyDescriptor(e, r).enumerable; + })), t.push.apply(t, o); + } + return t; +} +function _objectSpread2(e) { + for (var r = 1; r < arguments.length; r++) { + var t = null != arguments[r] ? arguments[r] : {}; + r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { + _defineProperty(e, r, t[r]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { + Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } - return target; + return e; } const EVENT_TYPE_MAP = { @@ -28999,7 +28864,7 @@ function getPointerType(event) { function getCurrentTargetTouchList(event) { return Array.from(event.touches).filter(e => { var _event$currentTarget, _event$currentTarget$; - return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target)); + return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target)); }); } function getTouchList(event) { @@ -29009,18 +28874,21 @@ function getValueEvent(event) { return isTouch(event) ? getTouchList(event)[0] : event; } function distanceAngle(P1, P2) { - const dx = P2.clientX - P1.clientX; - const dy = P2.clientY - P1.clientY; - const cx = (P2.clientX + P1.clientX) / 2; - const cy = (P2.clientY + P1.clientY) / 2; - const distance = Math.hypot(dx, dy); - const angle = -(Math.atan2(dx, dy) * 180) / Math.PI; - const origin = [cx, cy]; - return { - angle, - distance, - origin - }; + try { + const dx = P2.clientX - P1.clientX; + const dy = P2.clientY - P1.clientY; + const cx = (P2.clientX + P1.clientX) / 2; + const cy = (P2.clientY + P1.clientY) / 2; + const distance = Math.hypot(dx, dy); + const angle = -(Math.atan2(dx, dy) * 180) / Math.PI; + const origin = [cx, cy]; + return { + angle, + distance, + origin + }; + } catch (_unused) {} + return null; } function touchIds(event) { return getCurrentTargetTouchList(event).map(touch => touch.identifier); @@ -29091,9 +28959,9 @@ function call(v, ...args) { return v; } } -function actions_b1cc53c2_esm_noop() {} -function actions_b1cc53c2_esm_chain(...fns) { - if (fns.length === 0) return actions_b1cc53c2_esm_noop; +function actions_fe213e88_esm_noop() {} +function actions_fe213e88_esm_chain(...fns) { + if (fns.length === 0) return actions_fe213e88_esm_noop; if (fns.length === 1) return fns[0]; return function () { let result; @@ -29163,7 +29031,7 @@ class Engine { state.args = args; state.axis = undefined; state.memo = undefined; - state.elapsedTime = 0; + state.elapsedTime = state.timeDelta = 0; state.direction = [0, 0]; state.distance = [0, 0]; state.overflow = [0, 0]; @@ -29184,8 +29052,8 @@ class Engine { state.currentTarget = event.currentTarget; state.lastOffset = config.from ? call(config.from, state) : state.offset; state.offset = state.lastOffset; + state.startTime = state.timeStamp = event.timeStamp; } - state.startTime = state.timeStamp = event.timeStamp; } computeValues(values) { const state = this.state; @@ -29279,6 +29147,7 @@ class Engine { state._direction = state._delta.map(Math.sign); if (!state.first && dt > 0) { state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]; + state.timeDelta = dt; } } } @@ -29352,7 +29221,7 @@ class CoordinatesEngine extends Engine { } } -const actions_b1cc53c2_esm_identity = v => v; +const actions_fe213e88_esm_identity = v => v; const DEFAULT_RUBBERBAND = 0.15; const commonConfigResolver = { enabled(value = true) { @@ -29385,7 +29254,7 @@ const commonConfigResolver = { const transform = value || config.shared.transform; this.hasCustomTransform = !!transform; if (false) {} - return transform || actions_b1cc53c2_esm_identity; + return transform || actions_fe213e88_esm_identity; }, threshold(value) { return V.toVector(value, 0); @@ -29521,7 +29390,6 @@ class DragEngine extends CoordinatesEngine { const state = this.state; const config = this.config; if (!state._pointerActive) return; - if (state.type === event.type && event.timeStamp === state.timeStamp) return; const id = pointerId(event); if (state._pointerId !== undefined && id !== state._pointerId) return; const _values = pointerValues(event); @@ -29579,15 +29447,16 @@ class DragEngine extends CoordinatesEngine { if (state.tap && config.filterTaps) { state._force = true; } else { - const [dirx, diry] = state.direction; - const [vx, vy] = state.velocity; - const [mx, my] = state.movement; + const [_dx, _dy] = state._delta; + const [_mx, _my] = state._movement; const [svx, svy] = config.swipe.velocity; const [sx, sy] = config.swipe.distance; const sdt = config.swipe.duration; if (state.elapsedTime < sdt) { - if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx; - if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry; + const _vx = Math.abs(_dx / state.timeDelta); + const _vy = Math.abs(_dy / state.timeDelta); + if (_vx > svx && Math.abs(_mx) > sx) state.swipe[0] = Math.sign(_dx); + if (_vy > svy && Math.abs(_my) > sy) state.swipe[1] = Math.sign(_dy); } } this.emit(); @@ -29683,18 +29552,18 @@ function persistEvent(event) { 'persist' in event && typeof event.persist === 'function' && event.persist(); } -const actions_b1cc53c2_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; +const actions_fe213e88_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; function supportsTouchEvents() { - return actions_b1cc53c2_esm_isBrowser && 'ontouchstart' in window; + return actions_fe213e88_esm_isBrowser && 'ontouchstart' in window; } function isTouchScreen() { - return supportsTouchEvents() || actions_b1cc53c2_esm_isBrowser && window.navigator.maxTouchPoints > 1; + return supportsTouchEvents() || actions_fe213e88_esm_isBrowser && window.navigator.maxTouchPoints > 1; } function supportsPointerEvents() { - return actions_b1cc53c2_esm_isBrowser && 'onpointerdown' in window; + return actions_fe213e88_esm_isBrowser && 'onpointerdown' in window; } function supportsPointerLock() { - return actions_b1cc53c2_esm_isBrowser && 'exitPointerLock' in window.document; + return actions_fe213e88_esm_isBrowser && 'exitPointerLock' in window.document; } function supportsGestureEvents() { try { @@ -29704,9 +29573,9 @@ function supportsGestureEvents() { } } const SUPPORT = { - isBrowser: actions_b1cc53c2_esm_isBrowser, + isBrowser: actions_fe213e88_esm_isBrowser, gesture: supportsGestureEvents(), - touch: isTouchScreen(), + touch: supportsTouchEvents(), touchscreen: isTouchScreen(), pointer: supportsPointerEvents(), pointerLock: supportsPointerLock() @@ -29883,6 +29752,7 @@ class PinchEngine extends Engine { this.start(event); state._touchIds = Array.from(ctrlTouchIds).slice(0, 2); const payload = touchDistanceAngle(event, state._touchIds); + if (!payload) return; this.pinchStart(event, payload); } pointerStart(event) { @@ -29901,6 +29771,7 @@ class PinchEngine extends Engine { if (state._pointerEvents.size < 2) return; this.start(event); const payload = distanceAngle(...Array.from(_pointerEvents.values())); + if (!payload) return; this.pinchStart(event, payload); } pinchStart(event, payload) { @@ -29914,6 +29785,7 @@ class PinchEngine extends Engine { touchMove(event) { if (!this.state._active) return; const payload = touchDistanceAngle(event, this.state._touchIds); + if (!payload) return; this.pinchMove(event, payload); } pointerMove(event) { @@ -29923,6 +29795,7 @@ class PinchEngine extends Engine { } if (!this.state._active) return; const payload = distanceAngle(...Array.from(_pointerEvents.values())); + if (!payload) return; this.pinchMove(event, payload); } pinchMove(event, payload) { @@ -29993,7 +29866,7 @@ class PinchEngine extends Engine { } wheel(event) { const modifierKey = this.config.modifierKey; - if (modifierKey && !event[modifierKey]) return; + if (modifierKey && (Array.isArray(modifierKey) ? !modifierKey.find(k => event[k]) : !event[modifierKey])) return; if (!this.state._active) this.wheelStart(event);else this.wheelChange(event); this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); } @@ -30030,6 +29903,7 @@ class PinchEngine extends Engine { bindFunction(device, 'change', this[device + 'Move'].bind(this)); bindFunction(device, 'end', this[device + 'End'].bind(this)); bindFunction(device, 'cancel', this[device + 'End'].bind(this)); + bindFunction('lostPointerCapture', '', this[device + 'End'].bind(this)); } if (this.config.pinchOnWheel) { bindFunction('wheel', '', this.wheel.bind(this), { @@ -30230,38 +30104,38 @@ const hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigR mouseOnly: (value = true) => value }); -const actions_b1cc53c2_esm_EngineMap = new Map(); +const actions_fe213e88_esm_EngineMap = new Map(); const ConfigResolverMap = new Map(); -function actions_b1cc53c2_esm_registerAction(action) { - actions_b1cc53c2_esm_EngineMap.set(action.key, action.engine); +function actions_fe213e88_esm_registerAction(action) { + actions_fe213e88_esm_EngineMap.set(action.key, action.engine); ConfigResolverMap.set(action.key, action.resolver); } -const actions_b1cc53c2_esm_dragAction = { +const actions_fe213e88_esm_dragAction = { key: 'drag', engine: DragEngine, resolver: dragConfigResolver }; -const actions_b1cc53c2_esm_hoverAction = { +const actions_fe213e88_esm_hoverAction = { key: 'hover', engine: HoverEngine, resolver: hoverConfigResolver }; -const actions_b1cc53c2_esm_moveAction = { +const actions_fe213e88_esm_moveAction = { key: 'move', engine: MoveEngine, resolver: moveConfigResolver }; -const actions_b1cc53c2_esm_pinchAction = { +const actions_fe213e88_esm_pinchAction = { key: 'pinch', engine: PinchEngine, resolver: pinchConfigResolver }; -const actions_b1cc53c2_esm_scrollAction = { +const actions_fe213e88_esm_scrollAction = { key: 'scroll', engine: ScrollEngine, resolver: scrollConfigResolver }; -const actions_b1cc53c2_esm_wheelAction = { +const actions_fe213e88_esm_wheelAction = { key: 'wheel', engine: WheelEngine, resolver: wheelConfigResolver @@ -30487,7 +30361,7 @@ class Controller { const gestureConfig = this.config[gestureKey]; const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target); if (gestureConfig.enabled) { - const Engine = actions_b1cc53c2_esm_EngineMap.get(gestureKey); + const Engine = actions_fe213e88_esm_EngineMap.get(gestureKey); new Engine(this, args, gestureKey).bind(bindFunction); } } @@ -30500,7 +30374,7 @@ class Controller { } } for (const handlerProp in props) { - props[handlerProp] = actions_b1cc53c2_esm_chain(...props[handlerProp]); + props[handlerProp] = actions_fe213e88_esm_chain(...props[handlerProp]); } if (!target) return props; for (const handlerProp in props) { @@ -30613,7 +30487,7 @@ function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) { } function useDrag(handler, config) { - actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_dragAction); + actions_fe213e88_esm_registerAction(actions_fe213e88_esm_dragAction); return useRecognizers({ drag: handler }, config || {}, 'drag'); @@ -30741,10 +30615,14 @@ function useDraft(props) { current: previousValue } = refPreviousValue; refPreviousValue.current = props.value; - if (draft.value !== undefined && !draft.isStale) setDraft({ - ...draft, - isStale: true - });else if (draft.isStale && props.value !== previousValue) setDraft({}); + if (draft.value !== undefined && !draft.isStale) { + setDraft({ + ...draft, + isStale: true + }); + } else if (draft.isStale && props.value !== previousValue) { + setDraft({}); + } }, [props.value, draft]); const onChange = (nextValue, extra) => { // Mutates the draft value to avoid an extra effect run. @@ -31037,8 +30915,36 @@ function useInputControlStateReducer(stateReducer = initialStateReducer, initial }; } -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-field.js +;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/with-ignore-ime-events.js +/** + * A higher-order function that wraps a keydown event handler to ensure it is not an IME event. + * + * In CJK languages, an IME (Input Method Editor) is used to input complex characters. + * During an IME composition, keydown events (e.g. Enter or Escape) can be fired + * which are intended to control the IME and not the application. + * These events should be ignored by any application logic. + * + * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event. + * + * @return A wrapped version of the given event handler that ignores IME events. + */ +function withIgnoreIMEEvents(keydownHandler) { + return event => { + const { + isComposing + } = 'nativeEvent' in event ? event.nativeEvent : event; + if (isComposing || + // Workaround for Mac Safari where the final Enter/Backspace of an IME composition + // is `isComposing=false`, even though it's technically still part of the composition. + // These can only be detected by keyCode. + event.keyCode === 229) { + return; + } + keydownHandler(event); + }; +} +;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-field.js /** * External dependencies */ @@ -31054,6 +30960,8 @@ function useInputControlStateReducer(stateReducer = initialStateReducer, initial + + const input_field_noop = () => {}; function InputField({ disabled = false, @@ -31061,18 +30969,15 @@ function InputField({ dragThreshold = 10, id, isDragEnabled = false, - isFocused, isPressEnterToChange = false, onBlur = input_field_noop, onChange = input_field_noop, onDrag = input_field_noop, onDragEnd = input_field_noop, onDragStart = input_field_noop, - onFocus = input_field_noop, onKeyDown = input_field_noop, onValidate = input_field_noop, size = 'default', - setIsFocused, stateReducer = state => state, value: valueProp, type, @@ -31106,7 +31011,6 @@ function InputField({ const dragCursor = useDragCursor(isDragging, dragDirection); const handleOnBlur = event => { onBlur(event); - setIsFocused?.(false); /** * If isPressEnterToChange is set, this commits the value to @@ -31117,10 +31021,6 @@ function InputField({ handleOnCommit(event); } }; - const handleOnFocus = event => { - onFocus(event); - setIsFocused?.(true); - }; const handleOnChange = event => { const nextValue = event.target.value; change(nextValue, event); @@ -31179,7 +31079,9 @@ function InputField({ ...dragProps.event, target }; - if (!distance) return; + if (!distance) { + return; + } event.stopPropagation(); /** @@ -31219,7 +31121,7 @@ function InputField({ } }; } - return (0,external_React_.createElement)(Input, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Input, { ...props, ...dragProps, className: "components-input-control__input", @@ -31229,8 +31131,7 @@ function InputField({ id: id, onBlur: handleOnBlur, onChange: handleOnChange, - onFocus: handleOnFocus, - onKeyDown: handleOnKeyDown, + onKeyDown: withIgnoreIMEEvents(handleOnKeyDown), onMouseDown: handleOnMouseDown, ref: ref, inputSize: size @@ -31293,7 +31194,7 @@ function base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have */ -const base_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { +const base_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ej5x27r4" } : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0)); const deprecatedMarginField = ({ @@ -31301,11 +31202,11 @@ const deprecatedMarginField = ({ }) => { return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0); }; -const StyledField = emotion_styled_base_browser_esm("div", true ? { +const StyledField = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ej5x27r3" } : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0)); const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0), true ? "" : 0); -const StyledLabel = emotion_styled_base_browser_esm("label", true ? { +const StyledLabel = /*#__PURE__*/emotion_styled_base_browser_esm("label", true ? { target: "ej5x27r2" } : 0)(labelStyles, ";" + ( true ? "" : 0)); var base_control_styles_ref = true ? { @@ -31317,15 +31218,14 @@ const deprecatedMarginHelp = ({ }) => { return !__nextHasNoMarginBottom && base_control_styles_ref; }; -const StyledHelp = emotion_styled_base_browser_esm("p", true ? { +const StyledHelp = /*#__PURE__*/emotion_styled_base_browser_esm("p", true ? { target: "ej5x27r1" } : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + ( true ? "" : 0)); -const StyledVisualLabel = emotion_styled_base_browser_esm("span", true ? { +const StyledVisualLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "ej5x27r0" } : 0)(labelStyles, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/index.js - /** * External dependencies */ @@ -31339,6 +31239,8 @@ const StyledVisualLabel = emotion_styled_base_browser_esm("span", true ? { + + /** * `BaseControl` is a component used to generate labels and help text for components handling user inputs. * @@ -31372,26 +31274,34 @@ const UnconnectedBaseControl = props => { className, children } = useContextSystem(props, 'BaseControl'); - return (0,external_React_.createElement)(base_control_styles_Wrapper, { - className: className - }, (0,external_React_.createElement)(StyledField, { - className: "components-base-control__field" - // TODO: Official deprecation for this should start after all internal usages have been migrated - , - __nextHasNoMarginBottom: __nextHasNoMarginBottom - }, label && id && (hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, { - as: "label", - htmlFor: id - }, label) : (0,external_React_.createElement)(StyledLabel, { - className: "components-base-control__label", - htmlFor: id - }, label)), label && !id && (hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, { - as: "label" - }, label) : (0,external_React_.createElement)(VisualLabel, null, label)), children), !!help && (0,external_React_.createElement)(StyledHelp, { - id: id ? id + '__help' : undefined, - className: "components-base-control__help", - __nextHasNoMarginBottom: __nextHasNoMarginBottom - }, help)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control_styles_Wrapper, { + className: className, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledField, { + className: "components-base-control__field" + // TODO: Official deprecation for this should start after all internal usages have been migrated + , + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + children: [label && id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "label", + htmlFor: id, + children: label + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + className: "components-base-control__label", + htmlFor: id, + children: label + })), label && !id && (hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "label", + children: label + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabel, { + children: label + })), children] + }), !!help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { + id: id ? id + '__help' : undefined, + className: "components-base-control__help", + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + children: help + })] + }); }; /** @@ -31416,10 +31326,11 @@ const VisualLabel = ({ children, ...props }) => { - return (0,external_React_.createElement)(StyledVisualLabel, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledVisualLabel, { ...props, - className: classnames_default()('components-base-control__label', className) - }, children); + className: dist_clsx('components-base-control__label', className), + children: children + }); }; const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), { VisualLabel @@ -31427,7 +31338,6 @@ const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseContro /* harmony default export */ const base_control = (BaseControl); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/index.js - /** * External dependencies */ @@ -31447,6 +31357,7 @@ const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseContro + const input_control_noop = () => {}; function input_control_useUniqueId(idProp) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl); @@ -31476,59 +31387,54 @@ function UnforwardedInputControl(props, ref) { value, ...restProps } = useDeprecated36pxDefaultSizeProp(props); - const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); const id = input_control_useUniqueId(idProp); - const classes = classnames_default()('components-input-control', className); + const classes = dist_clsx('components-input-control', className); const draftHookProps = useDraft({ value, onBlur: restProps.onBlur, onChange }); - - // ARIA descriptions can only contain plain text, so fall back to aria-details if not. - const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details'; const helpProp = !!help ? { - [helpPropName]: `${id}__help` + 'aria-describedby': `${id}__help` } : {}; - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { className: classes, help: help, id: id, - __nextHasNoMarginBottom: true - }, (0,external_React_.createElement)(input_base, { - __next40pxDefaultSize: __next40pxDefaultSize, - __unstableInputWidth: __unstableInputWidth, - disabled: disabled, - gap: 3, - hideLabelFromVision: hideLabelFromVision, - id: id, - isFocused: isFocused, - justify: "left", - label: label, - labelPosition: labelPosition, - prefix: prefix, - size: size, - style: style, - suffix: suffix - }, (0,external_React_.createElement)(input_field, { - ...restProps, - ...helpProp, - __next40pxDefaultSize: __next40pxDefaultSize, - className: "components-input-control__input", - disabled: disabled, - id: id, - isFocused: isFocused, - isPressEnterToChange: isPressEnterToChange, - onKeyDown: onKeyDown, - onValidate: onValidate, - paddingInlineStart: prefix ? space(2) : undefined, - paddingInlineEnd: suffix ? space(2) : undefined, - ref: ref, - setIsFocused: setIsFocused, - size: size, - stateReducer: stateReducer, - ...draftHookProps - }))); + __nextHasNoMarginBottom: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_base, { + __next40pxDefaultSize: __next40pxDefaultSize, + __unstableInputWidth: __unstableInputWidth, + disabled: disabled, + gap: 3, + hideLabelFromVision: hideLabelFromVision, + id: id, + justify: "left", + label: label, + labelPosition: labelPosition, + prefix: prefix, + size: size, + style: style, + suffix: suffix, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_field, { + ...restProps, + ...helpProp, + __next40pxDefaultSize: __next40pxDefaultSize, + className: "components-input-control__input", + disabled: disabled, + id: id, + isPressEnterToChange: isPressEnterToChange, + onKeyDown: onKeyDown, + onValidate: onValidate, + paddingInlineStart: prefix ? space(2) : undefined, + paddingInlineEnd: suffix ? space(2) : undefined, + ref: ref, + size: size, + stateReducer: stateReducer, + ...draftHookProps + }) + }) + }); } /** @@ -31537,7 +31443,7 @@ function UnforwardedInputControl(props, ref) { * * ```jsx * import { __experimentalInputControl as InputControl } from '@wordpress/components'; - * import { useState } from '@wordpress/compose'; + * import { useState } from 'react'; * * const Example = () => { * const [ value, setValue ] = useState( '' ); @@ -31590,7 +31496,7 @@ function Dashicon({ ...sizeStyles, ...style }; - return (0,external_React_.createElement)("span", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { className: iconClass, style: styles, ...extraProps @@ -31613,13 +31519,14 @@ function Dashicon({ * Internal dependencies */ + function Icon({ icon = null, size = 'string' === typeof icon ? 20 : 24, ...additionalProps }) { if ('string' === typeof icon) { - return (0,external_wp_element_namespaceObject.createElement)(dashicon, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dashicon, { icon: icon, size: size, ...additionalProps @@ -31643,7 +31550,7 @@ function Icon({ height: size, ...additionalProps }; - return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { ...appliedProps }); } @@ -31659,7 +31566,6 @@ function Icon({ /* harmony default export */ const build_module_icon = (Icon); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/index.js - /** * External dependencies */ @@ -31678,6 +31584,9 @@ function Icon({ + + + const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick']; function button_useDeprecatedProps({ isDefault, @@ -31694,7 +31603,7 @@ function button_useDeprecatedProps({ let computedSize = size; let computedVariant = variant; const newProps = { - // @TODO Mark `isPressed` as deprecated + // @todo Mark `isPressed` as deprecated 'aria-pressed': isPressed }; if (isSmall) { @@ -31715,10 +31624,9 @@ function button_useDeprecatedProps({ } if (isDefault) { var _computedVariant4; - external_wp_deprecated_default()('Button isDefault prop', { + external_wp_deprecated_default()('wp.components.Button `isDefault` prop', { since: '5.4', - alternative: 'variant="secondary"', - version: '6.2' + alternative: 'variant="secondary"' }); (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary'; } @@ -31772,7 +31680,7 @@ function UnforwardedButton(props, ref) { // Tooltip should not considered as a child children?.[0]?.props?.className !== 'components-tooltip'; const truthyAriaPressedValues = [true, 'true', 'mixed']; - const classes = classnames_default()('components-button', className, { + const classes = dist_clsx('components-button', className, { 'is-next-40px-default-size': __next40pxDefaultSize, 'is-secondary': variant === 'secondary', 'is-primary': variant === 'primary', @@ -31800,13 +31708,14 @@ function UnforwardedButton(props, ref) { href, target } : {}; + const disableEventProps = {}; if (disabled && isFocusable) { // In this case, the button will be disabled, but still focusable and // perceivable by screen reader users. buttonProps['aria-disabled'] = true; anchorProps['aria-disabled'] = true; for (const disabledEvent of disabledEventsOnDisabledButton) { - additionalProps[disabledEvent] = event => { + disableEventProps[disabledEvent] = event => { if (event) { event.stopPropagation(); event.preventDefault(); @@ -31835,22 +31744,30 @@ function UnforwardedButton(props, ref) { 'aria-describedby': describedById, ref }; - const elementChildren = (0,external_React_.createElement)(external_React_.Fragment, null, icon && iconPosition === 'left' && (0,external_React_.createElement)(build_module_icon, { - icon: icon, - size: iconSize - }), text && (0,external_React_.createElement)(external_React_.Fragment, null, text), icon && iconPosition === 'right' && (0,external_React_.createElement)(build_module_icon, { - icon: icon, - size: iconSize - }), children); - const element = Tag === 'a' ? (0,external_React_.createElement)("a", { + const elementChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [icon && iconPosition === 'left' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon, + size: iconSize + }), text && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: text + }), children, icon && iconPosition === 'right' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon, + size: iconSize + })] + }); + const element = Tag === 'a' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("a", { ...anchorProps, ...additionalProps, - ...commonProps - }, elementChildren) : (0,external_React_.createElement)("button", { + ...disableEventProps, + ...commonProps, + children: elementChildren + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { ...buttonProps, ...additionalProps, - ...commonProps - }, elementChildren); + ...disableEventProps, + ...commonProps, + children: elementChildren + }); // In order to avoid some React reconciliation issues, we are always rendering // the `Tooltip` component even when `shouldShowTooltip` is `false`. @@ -31863,11 +31780,17 @@ function UnforwardedButton(props, ref) { // Convert legacy `position` values to be used with the new `placement` prop positionToPlacement(tooltipPosition) } : {}; - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(tooltip, { - ...tooltipProps - }, element), describedBy && (0,external_React_.createElement)(visually_hidden_component, null, (0,external_React_.createElement)("span", { - id: descriptionId - }, describedBy))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + ...tooltipProps, + children: element + }), describedBy && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + id: descriptionId, + children: describedBy + }) + })] + }); } /** @@ -32140,12 +32063,13 @@ function getAlignmentProps(alignment, direction = 'row') { * @return An array of available children. */ function getValidChildren(children) { - if (typeof children === 'string') return [children]; + if (typeof children === 'string') { + return [children]; + } return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child)); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/hook.js - /** * External dependencies */ @@ -32158,6 +32082,7 @@ function getValidChildren(children) { + function useHStack(props) { const { alignment = 'edge', @@ -32173,11 +32098,10 @@ function useHStack(props) { if (_isSpacer) { const childElement = child; const _key = childElement.key || `hstack-${index}`; - return (0,external_React_.createElement)(flex_item_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { isBlock: true, - key: _key, ...childElement.props - }); + }, _key); } return child; }); @@ -32189,12 +32113,16 @@ function useHStack(props) { ...otherProps, gap: spacing }; - const flexProps = useFlex(propsForFlex); + + // Omit `isColumn` because it's not used in HStack. + const { + isColumn, + ...flexProps + } = useFlex(propsForFlex); return flexProps; } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js - /** * Internal dependencies */ @@ -32202,9 +32130,10 @@ function useHStack(props) { + function UnconnectedHStack(props, forwardedRef) { const hStackProps = useHStack(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...hStackProps, ref: forwardedRef }); @@ -32236,7 +32165,6 @@ const HStack = contextConnect(UnconnectedHStack, 'HStack'); /* harmony default export */ const h_stack_component = (HStack); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/index.js - /** * External dependencies */ @@ -32261,6 +32189,9 @@ const HStack = contextConnect(UnconnectedHStack, 'HStack'); + + + const number_control_noop = () => {}; function UnforwardedNumberControl(props, forwardedRef) { const { @@ -32304,7 +32235,7 @@ function UnforwardedNumberControl(props, forwardedRef) { return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep); }; const autoComplete = typeProp === 'number' ? 'off' : undefined; - const classes = classnames_default()('components-number-control', className); + const classes = dist_clsx('components-number-control', className); const cx = useCx(); const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons); const spinValue = (value, direction, event) => { @@ -32400,7 +32331,7 @@ function UnforwardedNumberControl(props, forwardedRef) { target: inputRef.current } }); - return (0,external_React_.createElement)(number_control_styles_Input, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control_styles_Input, { autoComplete: autoComplete, inputMode: "numeric", ...restProps, @@ -32424,24 +32355,28 @@ function UnforwardedNumberControl(props, forwardedRef) { return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState; }, size: size, - suffix: spinControls === 'custom' ? (0,external_React_.createElement)(external_React_.Fragment, null, suffix, (0,external_React_.createElement)(spacer_component, { - marginBottom: 0, - marginRight: 2 - }, (0,external_React_.createElement)(h_stack_component, { - spacing: 1 - }, (0,external_React_.createElement)(SpinButton, { - className: spinButtonClasses, - icon: library_plus, - size: "small", - label: (0,external_wp_i18n_namespaceObject.__)('Increment'), - onClick: buildSpinButtonClickHandler('up') - }), (0,external_React_.createElement)(SpinButton, { - className: spinButtonClasses, - icon: library_reset, - size: "small", - label: (0,external_wp_i18n_namespaceObject.__)('Decrement'), - onClick: buildSpinButtonClickHandler('down') - })))) : suffix, + suffix: spinControls === 'custom' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + marginBottom: 0, + marginRight: 2, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + spacing: 1, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, { + className: spinButtonClasses, + icon: library_plus, + size: "small", + label: (0,external_wp_i18n_namespaceObject.__)('Increment'), + onClick: buildSpinButtonClickHandler('up') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinButton, { + className: spinButtonClasses, + icon: library_reset, + size: "small", + label: (0,external_wp_i18n_namespaceObject.__)('Decrement'), + onClick: buildSpinButtonClickHandler('down') + })] + }) + })] + }) : suffix, onChange: onChange }); } @@ -32464,16 +32399,16 @@ function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return " const CIRCLE_SIZE = 32; const INNER_CIRCLE_SIZE = 6; -const CircleRoot = emotion_styled_base_browser_esm("div", true ? { +const CircleRoot = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eln3bjz3" } : 0)("border-radius:50%;border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + ( true ? "" : 0)); -const CircleIndicatorWrapper = emotion_styled_base_browser_esm("div", true ? { +const CircleIndicatorWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eln3bjz2" } : 0)( true ? { name: "1r307gh", styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}" } : 0); -const CircleIndicator = emotion_styled_base_browser_esm("div", true ? { +const CircleIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eln3bjz1" } : 0)("background:", COLORS.theme.accent, ";border-radius:50%;box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0)); const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { @@ -32481,7 +32416,6 @@ const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, t } : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js - /** * WordPress dependencies */ @@ -32492,6 +32426,7 @@ const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, t * Internal dependencies */ + function AngleCircle({ value, onChange, @@ -32550,20 +32485,22 @@ function AngleCircle({ previousCursorValue.current = undefined; } }, [isDragging]); - return (0,external_React_.createElement)(CircleRoot, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleRoot, { ref: angleCircleRef, onMouseDown: startDrag, className: "components-angle-picker-control__angle-circle", - ...props - }, (0,external_React_.createElement)(CircleIndicatorWrapper, { - style: value ? { - transform: `rotate(${value}deg)` - } : undefined, - className: "components-angle-picker-control__angle-circle-indicator-wrapper", - tabIndex: -1 - }, (0,external_React_.createElement)(CircleIndicator, { - className: "components-angle-picker-control__angle-circle-indicator" - }))); + ...props, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicatorWrapper, { + style: value ? { + transform: `rotate(${value}deg)` + } : undefined, + className: "components-angle-picker-control__angle-circle-indicator-wrapper", + tabIndex: -1, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CircleIndicator, { + className: "components-angle-picker-control__angle-circle-indicator" + }) + }) + }); } function getAngle(centerX, centerY, pointX, pointY) { const y = pointY - centerY; @@ -32578,7 +32515,6 @@ function getAngle(centerX, centerY, pointX, pointY) { /* harmony default export */ const angle_circle = (AngleCircle); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js - /** * External dependencies */ @@ -32599,6 +32535,8 @@ function getAngle(centerX, centerY, pointX, pointY) { + + function UnforwardedAnglePickerControl(props, ref) { const { className, @@ -32614,34 +32552,40 @@ function UnforwardedAnglePickerControl(props, ref) { const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0; onChange(inputValue); }; - const classes = classnames_default()('components-angle-picker-control', className); - const unitText = (0,external_React_.createElement)(UnitText, null, "\xB0"); + const classes = dist_clsx('components-angle-picker-control', className); + const unitText = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitText, { + children: "\xB0" + }); const [prefixedUnitText, suffixedUnitText] = (0,external_wp_i18n_namespaceObject.isRTL)() ? [unitText, null] : [null, unitText]; - return (0,external_React_.createElement)(flex_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { ...restProps, ref: ref, className: classes, - gap: 2 - }, (0,external_React_.createElement)(flex_block_component, null, (0,external_React_.createElement)(number_control, { - label: label, - className: "components-angle-picker-control__input-field", - max: 360, - min: 0, - onChange: handleOnNumberChange, - size: "__unstable-large", - step: "1", - value: value, - spinControls: "none", - prefix: prefixedUnitText, - suffix: suffixedUnitText - })), (0,external_React_.createElement)(spacer_component, { - marginBottom: "1", - marginTop: "auto" - }, (0,external_React_.createElement)(angle_circle, { - "aria-hidden": "true", - value: value, - onChange: onChange - }))); + gap: 2, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(number_control, { + label: label, + className: "components-angle-picker-control__input-field", + max: 360, + min: 0, + onChange: handleOnNumberChange, + size: "__unstable-large", + step: "1", + value: value, + spinControls: "none", + prefix: prefixedUnitText, + suffix: suffixedUnitText + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + marginBottom: "1", + marginTop: "auto", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(angle_circle, { + "aria-hidden": "true", + value: value, + onChange: onChange + }) + })] + }); } /** @@ -32683,63 +32627,18 @@ const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"]; */ -const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[ -// - (hyphen-minus) -'\u002d', -// ~ (tilde) -'\u007e', -// (soft hyphen) -'\u00ad', -// ֊ (armenian hyphen) -'\u058a', -// ־ (hebrew punctuation maqaf) -'\u05be', -// ᐀ (canadian syllabics hyphen) -'\u1400', -// ᠆ (mongolian todo soft hyphen) -'\u1806', -// ‐ (hyphen) -'\u2010', -// non-breaking hyphen) -'\u2011', -// ‒ (figure dash) -'\u2012', -// – (en dash) -'\u2013', -// — (em dash) -'\u2014', -// ― (horizontal bar) -'\u2015', -// ⁓ (swung dash) -'\u2053', -// superscript minus) -'\u207b', -// subscript minus) -'\u208b', -// − (minus sign) -'\u2212', -// ⸗ (double oblique hyphen) -'\u2e17', -// ⸺ (two-em dash) -'\u2e3a', -// ⸻ (three-em dash) -'\u2e3b', -// 〜 (wave dash) -'\u301c', -// 〰 (wavy dash) -'\u3030', -// ゠ (katakana-hiragana double hyphen) -'\u30a0', -// ︱ (presentation form for vertical em dash) -'\ufe31', -// ︲ (presentation form for vertical en dash) -'\ufe32', -// ﹘ (small em dash) -'\ufe58', -// ﹣ (small hyphen-minus) -'\ufe63', -// － (fullwidth hyphen-minus) -'\uff0d'].join('')}]`, 'g'); + +/** + * All unicode characters that we consider "dash-like": + * - `\u007e`: ~ (tilde) + * - `\u00ad`: (soft hyphen) + * - `\u2053`: ⁓ (swung dash) + * - `\u207b`: ⁻ (superscript minus) + * - `\u208b`: ₋ (subscript minus) + * - `\u2212`: − (minus sign) + * - `\\p{Pd}`: any other Unicode dash character + */ +const ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu); const normalizeTextString = value => { return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-'); }; @@ -33150,65 +33049,19 @@ function useFloating(options) { -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs - - - - - -/** - * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting. - * - * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing - * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion. - * - * It will actively respond to changes and re-render your components with the latest setting. - * - * ```jsx - * export function Sidebar({ isOpen }) { - * const shouldReduceMotion = useReducedMotion() - * const closedX = shouldReduceMotion ? 0 : "-100%" - * - * return ( - * <motion.div animate={{ - * opacity: isOpen ? 1 : 0, - * x: isOpen ? 0 : closedX - * }} /> - * ) - * } - * ``` - * - * @return boolean - * - * @public - */ -function useReducedMotion() { - /** - * Lazy initialisation of prefersReducedMotion - */ - !hasReducedMotionListener.current && initPrefersReducedMotion(); - const [shouldReduceMotion] = (0,external_React_.useState)(prefersReducedMotion.current); - if (false) {} - /** - * TODO See if people miss automatically updating shouldReduceMotion setting - */ - return shouldReduceMotion; -} - - - ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close.js - /** * WordPress dependencies */ -const close_close = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const close_close = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z" + }) +}); /* harmony default export */ const library_close = (close_close); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scroll-lock/index.js @@ -33291,883 +33144,21 @@ function ScrollLock() { } /* harmony default export */ const scroll_lock = (ScrollLock); -;// CONCATENATED MODULE: ./node_modules/proxy-compare/dist/index.modern.js -const index_modern_e=Symbol(),index_modern_t=Symbol(),index_modern_r=Symbol();let index_modern_n=(e,t)=>new Proxy(e,t);const index_modern_o=Object.getPrototypeOf,index_modern_s=new WeakMap,index_modern_c=e=>e&&(index_modern_s.has(e)?index_modern_s.get(e):index_modern_o(e)===Object.prototype||index_modern_o(e)===Array.prototype),index_modern_l=e=>"object"==typeof e&&null!==e,index_modern_a=new WeakMap,index_modern_f=e=>e[index_modern_r]||e,index_modern_i=(s,l,p)=>{if(!index_modern_c(s))return s;const y=index_modern_f(s),u=(e=>Object.isFrozen(e)||Object.values(Object.getOwnPropertyDescriptors(e)).some(e=>!e.writable))(y);let g=p&&p.get(y);return g&&g[1].f===u||(g=((n,o)=>{const s={f:o};let c=!1;const l=(t,r)=>{if(!c){let o=s.a.get(n);o||(o=new Set,s.a.set(n,o)),r&&o.has(index_modern_e)||o.add(t)}},a={get:(e,t)=>t===index_modern_r?n:(l(t),index_modern_i(e[t],s.a,s.c)),has:(e,r)=>r===index_modern_t?(c=!0,s.a.delete(n),!0):(l(r),r in e),getOwnPropertyDescriptor:(e,t)=>(l(t,!0),Object.getOwnPropertyDescriptor(e,t)),ownKeys:t=>(l(index_modern_e),Reflect.ownKeys(t))};return o&&(a.set=a.deleteProperty=()=>!1),[a,s]})(y,u),g[1].p=index_modern_n(u?(e=>{let t=index_modern_a.get(e);if(!t){if(Array.isArray(e))t=Array.from(e);else{const r=Object.getOwnPropertyDescriptors(e);Object.values(r).forEach(e=>{e.configurable=!0}),t=Object.create(index_modern_o(e),r)}index_modern_a.set(e,t)}return t})(y):y,g[0]),p&&p.set(y,g)),g[1].a=l,g[1].c=p,g[1].p},index_modern_p=(e,t)=>{const r=Reflect.ownKeys(e),n=Reflect.ownKeys(t);return r.length!==n.length||r.some((e,t)=>e!==n[t])},index_modern_y=(t,r,n,o)=>{if(Object.is(t,r))return!1;if(!index_modern_l(t)||!index_modern_l(r))return!0;const s=n.get(index_modern_f(t));if(!s)return!0;if(o){const e=o.get(t);if(e&&e.n===r)return e.g;o.set(t,{n:r,g:!1})}let c=null;for(const l of s){const s=l===index_modern_e?index_modern_p(t,r):index_modern_y(t[l],r[l],n,o);if(!0!==s&&!1!==s||(c=s),c)break}return null===c&&(c=!0),o&&o.set(t,{n:r,g:c}),c},index_modern_u=e=>!!index_modern_c(e)&&index_modern_t in e,index_modern_g=e=>index_modern_c(e)&&e[index_modern_r]||null,index_modern_b=(e,t=!0)=>{index_modern_s.set(e,t)},O=(e,t)=>{const r=[],n=new WeakSet,o=(e,s)=>{if(n.has(e))return;index_modern_l(e)&&n.add(e);const c=index_modern_l(e)&&t.get(index_modern_f(e));c?c.forEach(t=>{o(e[t],s?[...s,t]:[t])}):s&&r.push(s)};return o(e),r},index_modern_w=e=>{index_modern_n=e}; - -;// CONCATENATED MODULE: ./node_modules/valtio/esm/vanilla.js - - -const vanilla_isObject = (x) => typeof x === "object" && x !== null; -const refSet = /* @__PURE__ */ new WeakSet(); -const VERSION = true ? Symbol("VERSION") : 0; -const LISTENERS = true ? Symbol("LISTENERS") : 0; -const SNAPSHOT = true ? Symbol("SNAPSHOT") : 0; -const buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), canProxy = (x) => vanilla_isObject(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer), PROMISE_RESULT = true ? Symbol("PROMISE_RESULT") : 0, PROMISE_ERROR = true ? Symbol("PROMISE_ERROR") : 0, snapshotCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (version, target, receiver) => { - const cache = snapshotCache.get(receiver); - if ((cache == null ? void 0 : cache[0]) === version) { - return cache[1]; - } - const snapshot2 = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target)); - index_modern_b(snapshot2, true); - snapshotCache.set(receiver, [version, snapshot2]); - Reflect.ownKeys(target).forEach((key) => { - const value = Reflect.get(target, key, receiver); - if (refSet.has(value)) { - index_modern_b(value, false); - snapshot2[key] = value; - } else if (value instanceof Promise) { - if (PROMISE_RESULT in value) { - snapshot2[key] = value[PROMISE_RESULT]; - } else { - const errorOrPromise = value[PROMISE_ERROR] || value; - Object.defineProperty(snapshot2, key, { - get() { - if (PROMISE_RESULT in value) { - return value[PROMISE_RESULT]; - } - throw errorOrPromise; - } - }); - } - } else if (value == null ? void 0 : value[LISTENERS]) { - snapshot2[key] = value[SNAPSHOT]; - } else { - snapshot2[key] = value; - } - }); - return Object.freeze(snapshot2); -}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1], proxyFunction2 = (initialObject) => { - if (!vanilla_isObject(initialObject)) { - throw new Error("object required"); - } - const found = proxyCache.get(initialObject); - if (found) { - return found; - } - let version = versionHolder[0]; - const listeners = /* @__PURE__ */ new Set(); - const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => { - if (version !== nextVersion) { - version = nextVersion; - listeners.forEach((listener) => listener(op, nextVersion)); - } - }; - const propListeners = /* @__PURE__ */ new Map(); - const getPropListener = (prop) => { - let propListener = propListeners.get(prop); - if (!propListener) { - propListener = (op, nextVersion) => { - const newOp = [...op]; - newOp[1] = [prop, ...newOp[1]]; - notifyUpdate(newOp, nextVersion); - }; - propListeners.set(prop, propListener); - } - return propListener; - }; - const popPropListener = (prop) => { - const propListener = propListeners.get(prop); - propListeners.delete(prop); - return propListener; - }; - const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject)); - const handler = { - get(target, prop, receiver) { - if (prop === VERSION) { - return version; - } - if (prop === LISTENERS) { - return listeners; - } - if (prop === SNAPSHOT) { - return createSnapshot(version, target, receiver); - } - return Reflect.get(target, prop, receiver); - }, - deleteProperty(target, prop) { - const prevValue = Reflect.get(target, prop); - const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS]; - if (childListeners) { - childListeners.delete(popPropListener(prop)); - } - const deleted = Reflect.deleteProperty(target, prop); - if (deleted) { - notifyUpdate(["delete", [prop], prevValue]); - } - return deleted; - }, - set(target, prop, value, receiver) { - var _a; - const hasPrevValue = Reflect.has(target, prop); - const prevValue = Reflect.get(target, prop, receiver); - if (hasPrevValue && objectIs(prevValue, value)) { - return true; - } - const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS]; - if (childListeners) { - childListeners.delete(popPropListener(prop)); - } - if (vanilla_isObject(value)) { - value = index_modern_g(value) || value; - } - let nextValue; - if ((_a = Object.getOwnPropertyDescriptor(target, prop)) == null ? void 0 : _a.set) { - nextValue = value; - } else if (value instanceof Promise) { - nextValue = value.then((v) => { - nextValue[PROMISE_RESULT] = v; - notifyUpdate(["resolve", [prop], v]); - return v; - }).catch((e) => { - nextValue[PROMISE_ERROR] = e; - notifyUpdate(["reject", [prop], e]); - }); - } else if (value == null ? void 0 : value[LISTENERS]) { - nextValue = value; - nextValue[LISTENERS].add(getPropListener(prop)); - } else if (canProxy(value)) { - nextValue = vanilla_proxy(value); - nextValue[LISTENERS].add(getPropListener(prop)); - } else { - nextValue = value; - } - Reflect.set(target, prop, nextValue, receiver); - notifyUpdate(["set", [prop], value, prevValue]); - return true; - } - }; - const proxyObject = newProxy(baseObject, handler); - proxyCache.set(initialObject, proxyObject); - Reflect.ownKeys(initialObject).forEach((key) => { - const desc = Object.getOwnPropertyDescriptor( - initialObject, - key - ); - if (desc.get || desc.set) { - Object.defineProperty(baseObject, key, desc); - } else { - proxyObject[key] = initialObject[key]; - } - }); - return proxyObject; -}) => [ - proxyFunction2, - refSet, - VERSION, - LISTENERS, - SNAPSHOT, - objectIs, - newProxy, - canProxy, - PROMISE_RESULT, - PROMISE_ERROR, - snapshotCache, - createSnapshot, - proxyCache, - versionHolder -]; -const [proxyFunction] = buildProxyFunction(); -function vanilla_proxy(initialObject = {}) { - return proxyFunction(initialObject); -} -function vanilla_getVersion(proxyObject) { - return vanilla_isObject(proxyObject) ? proxyObject[VERSION] : void 0; -} -function vanilla_subscribe(proxyObject, callback, notifyInSync) { - if ( true && !(proxyObject == null ? void 0 : proxyObject[LISTENERS])) { - console.warn("Please use proxy object"); - } - let promise; - const ops = []; - const listener = (op) => { - ops.push(op); - if (notifyInSync) { - callback(ops.splice(0)); - return; - } - if (!promise) { - promise = Promise.resolve().then(() => { - promise = void 0; - callback(ops.splice(0)); - }); - } - }; - proxyObject[LISTENERS].add(listener); - return () => { - proxyObject[LISTENERS].delete(listener); - }; -} -function vanilla_snapshot(proxyObject) { - if ( true && !(proxyObject == null ? void 0 : proxyObject[SNAPSHOT])) { - console.warn("Please use proxy object"); - } - return proxyObject[SNAPSHOT]; -} -function vanilla_ref(obj) { - refSet.add(obj); - return obj; -} -const unstable_buildProxyFunction = (/* unused pure expression or super */ null && (buildProxyFunction)); - - - -;// CONCATENATED MODULE: ./node_modules/valtio/esm/index.js - - - - - - -const { useSyncExternalStore: esm_useSyncExternalStore } = shim; -const useAffectedDebugValue = (state, affected) => { - const pathList = (0,external_React_.useRef)(); - (0,external_React_.useEffect)(() => { - pathList.current = O(state, affected); - }); - (0,external_React_.useDebugValue)(pathList.current); -}; -function useSnapshot(proxyObject, options) { - const notifyInSync = options == null ? void 0 : options.sync; - const lastSnapshot = (0,external_React_.useRef)(); - const lastAffected = (0,external_React_.useRef)(); - let inRender = true; - const currSnapshot = esm_useSyncExternalStore( - (0,external_React_.useCallback)( - (callback) => { - const unsub = vanilla_subscribe(proxyObject, callback, notifyInSync); - callback(); - return unsub; - }, - [proxyObject, notifyInSync] - ), - () => { - const nextSnapshot = vanilla_snapshot(proxyObject); - try { - if (!inRender && lastSnapshot.current && lastAffected.current && !index_modern_y( - lastSnapshot.current, - nextSnapshot, - lastAffected.current, - /* @__PURE__ */ new WeakMap() - )) { - return lastSnapshot.current; - } - } catch (e) { - } - return nextSnapshot; - }, - () => vanilla_snapshot(proxyObject) - ); - inRender = false; - const currAffected = /* @__PURE__ */ new WeakMap(); - (0,external_React_.useEffect)(() => { - lastSnapshot.current = currSnapshot; - lastAffected.current = currAffected; - }); - if (true) { - useAffectedDebugValue(currSnapshot, currAffected); - } - const proxyCache = (0,external_React_.useMemo)(() => /* @__PURE__ */ new WeakMap(), []); - return index_modern_i(currSnapshot, currAffected, proxyCache); -} - - - -;// CONCATENATED MODULE: ./node_modules/valtio/esm/utils.js - - -function subscribeKey(proxyObject, key, callback, notifyInSync) { - return subscribe( - proxyObject, - (ops) => { - if (ops.some((op) => op[1][0] === key)) { - callback(proxyObject[key]); - } - }, - notifyInSync - ); -} - -let currentCleanups; -function watch(callback, options) { - let alive = true; - const cleanups = /* @__PURE__ */ new Set(); - const subscriptions = /* @__PURE__ */ new Map(); - const cleanup = () => { - if (alive) { - alive = false; - cleanups.forEach((clean) => clean()); - cleanups.clear(); - subscriptions.forEach((unsubscribe) => unsubscribe()); - subscriptions.clear(); - } - }; - const revalidate = () => { - if (!alive) { - return; - } - cleanups.forEach((clean) => clean()); - cleanups.clear(); - const proxiesToSubscribe = /* @__PURE__ */ new Set(); - const parent = currentCleanups; - currentCleanups = cleanups; - try { - const cleanupReturn = callback((proxyObject) => { - proxiesToSubscribe.add(proxyObject); - return proxyObject; - }); - if (cleanupReturn) { - cleanups.add(cleanupReturn); - } - } finally { - currentCleanups = parent; - } - subscriptions.forEach((unsubscribe, proxyObject) => { - if (proxiesToSubscribe.has(proxyObject)) { - proxiesToSubscribe.delete(proxyObject); - } else { - subscriptions.delete(proxyObject); - unsubscribe(); - } - }); - proxiesToSubscribe.forEach((proxyObject) => { - const unsubscribe = subscribe(proxyObject, revalidate, options == null ? void 0 : options.sync); - subscriptions.set(proxyObject, unsubscribe); - }); - }; - if (currentCleanups) { - currentCleanups.add(cleanup); - } - revalidate(); - return cleanup; -} - -const DEVTOOLS = Symbol(); -function devtools(proxyObject, options) { - if (typeof options === "string") { - console.warn( - "string name option is deprecated, use { name }. https://github.com/pmndrs/valtio/pull/400" - ); - options = { name: options }; - } - const { enabled, name = "" } = options || {}; - let extension; - try { - extension = (enabled != null ? enabled : (/* unsupported import.meta.env */ undefined && 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__; - } catch { - } - if (!extension) { - if ( true && enabled) { - console.warn("[Warning] Please install/enable Redux devtools extension"); - } - return; - } - let isTimeTraveling = false; - const devtools2 = extension.connect({ name }); - const unsub1 = subscribe(proxyObject, (ops) => { - const action = ops.filter(([_, path]) => path[0] !== DEVTOOLS).map(([op, path]) => `${op}:${path.map(String).join(".")}`).join(", "); - if (!action) { - return; - } - if (isTimeTraveling) { - isTimeTraveling = false; - } else { - const snapWithoutDevtools = Object.assign({}, snapshot(proxyObject)); - delete snapWithoutDevtools[DEVTOOLS]; - devtools2.send( - { - type: action, - updatedAt: new Date().toLocaleString() - }, - snapWithoutDevtools - ); - } - }); - const unsub2 = devtools2.subscribe((message) => { - var _a, _b, _c, _d, _e, _f; - if (message.type === "ACTION" && message.payload) { - try { - Object.assign(proxyObject, JSON.parse(message.payload)); - } catch (e) { - console.error( - "please dispatch a serializable value that JSON.parse() and proxy() support\n", - e - ); - } - } - if (message.type === "DISPATCH" && message.state) { - if (((_a = message.payload) == null ? void 0 : _a.type) === "JUMP_TO_ACTION" || ((_b = message.payload) == null ? void 0 : _b.type) === "JUMP_TO_STATE") { - isTimeTraveling = true; - const state = JSON.parse(message.state); - Object.assign(proxyObject, state); - } - proxyObject[DEVTOOLS] = message; - } else if (message.type === "DISPATCH" && ((_c = message.payload) == null ? void 0 : _c.type) === "COMMIT") { - devtools2.init(snapshot(proxyObject)); - } else if (message.type === "DISPATCH" && ((_d = message.payload) == null ? void 0 : _d.type) === "IMPORT_STATE") { - const actions = (_e = message.payload.nextLiftedState) == null ? void 0 : _e.actionsById; - const computedStates = ((_f = message.payload.nextLiftedState) == null ? void 0 : _f.computedStates) || []; - isTimeTraveling = true; - computedStates.forEach(({ state }, index) => { - const action = actions[index] || "No action found"; - Object.assign(proxyObject, state); - if (index === 0) { - devtools2.init(snapshot(proxyObject)); - } else { - devtools2.send(action, snapshot(proxyObject)); - } - }); - } - }); - devtools2.init(snapshot(proxyObject)); - return () => { - unsub1(); - unsub2 == null ? void 0 : unsub2(); - }; -} - -const sourceObjectMap = /* @__PURE__ */ new WeakMap(); -const derivedObjectMap = /* @__PURE__ */ new WeakMap(); -const markPending = (sourceObject, callback) => { - const sourceObjectEntry = sourceObjectMap.get(sourceObject); - if (sourceObjectEntry) { - sourceObjectEntry[0].forEach((subscription) => { - const { d: derivedObject } = subscription; - if (sourceObject !== derivedObject) { - markPending(derivedObject); - } - }); - ++sourceObjectEntry[2]; - if (callback) { - sourceObjectEntry[3].add(callback); - } - } -}; -const checkPending = (sourceObject, callback) => { - const sourceObjectEntry = sourceObjectMap.get(sourceObject); - if (sourceObjectEntry == null ? void 0 : sourceObjectEntry[2]) { - sourceObjectEntry[3].add(callback); - return true; - } - return false; -}; -const unmarkPending = (sourceObject) => { - const sourceObjectEntry = sourceObjectMap.get(sourceObject); - if (sourceObjectEntry) { - --sourceObjectEntry[2]; - if (!sourceObjectEntry[2]) { - sourceObjectEntry[3].forEach((callback) => callback()); - sourceObjectEntry[3].clear(); - } - sourceObjectEntry[0].forEach((subscription) => { - const { d: derivedObject } = subscription; - if (sourceObject !== derivedObject) { - unmarkPending(derivedObject); - } - }); - } -}; -const addSubscription = (subscription) => { - const { s: sourceObject, d: derivedObject } = subscription; - let derivedObjectEntry = derivedObjectMap.get(derivedObject); - if (!derivedObjectEntry) { - derivedObjectEntry = [/* @__PURE__ */ new Set()]; - derivedObjectMap.set(subscription.d, derivedObjectEntry); - } - derivedObjectEntry[0].add(subscription); - let sourceObjectEntry = sourceObjectMap.get(sourceObject); - if (!sourceObjectEntry) { - const subscriptions = /* @__PURE__ */ new Set(); - const unsubscribe = vanilla_subscribe( - sourceObject, - (ops) => { - subscriptions.forEach((subscription2) => { - const { - d: derivedObject2, - c: callback, - n: notifyInSync, - i: ignoreKeys - } = subscription2; - if (sourceObject === derivedObject2 && ops.every( - (op) => op[1].length === 1 && ignoreKeys.includes(op[1][0]) - )) { - return; - } - if (subscription2.p) { - return; - } - markPending(sourceObject, callback); - if (notifyInSync) { - unmarkPending(sourceObject); - } else { - subscription2.p = Promise.resolve().then(() => { - delete subscription2.p; - unmarkPending(sourceObject); - }); - } - }); - }, - true - ); - sourceObjectEntry = [subscriptions, unsubscribe, 0, /* @__PURE__ */ new Set()]; - sourceObjectMap.set(sourceObject, sourceObjectEntry); - } - sourceObjectEntry[0].add(subscription); -}; -const removeSubscription = (subscription) => { - const { s: sourceObject, d: derivedObject } = subscription; - const derivedObjectEntry = derivedObjectMap.get(derivedObject); - derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].delete(subscription); - if ((derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].size) === 0) { - derivedObjectMap.delete(derivedObject); - } - const sourceObjectEntry = sourceObjectMap.get(sourceObject); - if (sourceObjectEntry) { - const [subscriptions, unsubscribe] = sourceObjectEntry; - subscriptions.delete(subscription); - if (!subscriptions.size) { - unsubscribe(); - sourceObjectMap.delete(sourceObject); - } - } -}; -const listSubscriptions = (derivedObject) => { - const derivedObjectEntry = derivedObjectMap.get(derivedObject); - if (derivedObjectEntry) { - return Array.from(derivedObjectEntry[0]); - } - return []; -}; -const unstable_deriveSubscriptions = { - add: addSubscription, - remove: removeSubscription, - list: listSubscriptions -}; -function derive(derivedFns, options) { - const proxyObject = (options == null ? void 0 : options.proxy) || proxy({}); - const notifyInSync = !!(options == null ? void 0 : options.sync); - const derivedKeys = Object.keys(derivedFns); - derivedKeys.forEach((key) => { - if (Object.getOwnPropertyDescriptor(proxyObject, key)) { - throw new Error("object property already defined"); - } - const fn = derivedFns[key]; - let lastDependencies = null; - const evaluate = () => { - if (lastDependencies) { - if (Array.from(lastDependencies).map(([p]) => checkPending(p, evaluate)).some((isPending) => isPending)) { - return; - } - if (Array.from(lastDependencies).every( - ([p, entry]) => getVersion(p) === entry.v - )) { - return; - } - } - const dependencies = /* @__PURE__ */ new Map(); - const get = (p) => { - dependencies.set(p, { v: getVersion(p) }); - return p; - }; - const value = fn(get); - const subscribeToDependencies = () => { - dependencies.forEach((entry, p) => { - var _a; - const lastSubscription = (_a = lastDependencies == null ? void 0 : lastDependencies.get(p)) == null ? void 0 : _a.s; - if (lastSubscription) { - entry.s = lastSubscription; - } else { - const subscription = { - s: p, - d: proxyObject, - k: key, - c: evaluate, - n: notifyInSync, - i: derivedKeys - }; - addSubscription(subscription); - entry.s = subscription; - } - }); - lastDependencies == null ? void 0 : lastDependencies.forEach((entry, p) => { - if (!dependencies.has(p) && entry.s) { - removeSubscription(entry.s); - } - }); - lastDependencies = dependencies; - }; - if (value instanceof Promise) { - value.finally(subscribeToDependencies); - } else { - subscribeToDependencies(); - } - proxyObject[key] = value; - }; - evaluate(); - }); - return proxyObject; -} -function underive(proxyObject, options) { - const keysToDelete = (options == null ? void 0 : options.delete) ? /* @__PURE__ */ new Set() : null; - listSubscriptions(proxyObject).forEach((subscription) => { - const { k: key } = subscription; - if (!(options == null ? void 0 : options.keys) || options.keys.includes(key)) { - removeSubscription(subscription); - if (keysToDelete) { - keysToDelete.add(key); - } - } - }); - if (keysToDelete) { - keysToDelete.forEach((key) => { - delete proxyObject[key]; - }); - } -} - -function addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject = proxyObject) { - console.warn( - "addComputed is deprecated. Please consider using `derive` or `proxyWithComputed` instead. Falling back to emulation with derive. https://github.com/pmndrs/valtio/pull/201" - ); - const derivedFns = {}; - Object.keys(computedFns_FAKE).forEach((key) => { - derivedFns[key] = (get) => computedFns_FAKE[key](get(proxyObject)); - }); - return derive(derivedFns, { proxy: targetObject }); -} - -function proxyWithComputed(initialObject, computedFns) { - Object.keys(computedFns).forEach((key) => { - if (Object.getOwnPropertyDescriptor(initialObject, key)) { - throw new Error("object property already defined"); - } - const computedFn = computedFns[key]; - const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn; - const desc = {}; - desc.get = () => get(snapshot(proxyObject)); - if (set) { - desc.set = (newValue) => set(proxyObject, newValue); - } - Object.defineProperty(initialObject, key, desc); - }); - const proxyObject = proxy(initialObject); - return proxyObject; -} - -const utils_isObject = (x) => typeof x === "object" && x !== null; -const deepClone = (obj) => { - if (!utils_isObject(obj)) { - return obj; - } - const baseObject = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj)); - Reflect.ownKeys(obj).forEach((key) => { - baseObject[key] = deepClone(obj[key]); - }); - return baseObject; -}; -function proxyWithHistory(initialValue, skipSubscribe = false) { - const proxyObject = proxy({ - value: initialValue, - history: ref({ - wip: void 0, - snapshots: [], - index: -1 - }), - canUndo: () => proxyObject.history.index > 0, - undo: () => { - if (proxyObject.canUndo()) { - proxyObject.value = proxyObject.history.wip = deepClone( - proxyObject.history.snapshots[--proxyObject.history.index] - ); - } - }, - canRedo: () => proxyObject.history.index < proxyObject.history.snapshots.length - 1, - redo: () => { - if (proxyObject.canRedo()) { - proxyObject.value = proxyObject.history.wip = deepClone( - proxyObject.history.snapshots[++proxyObject.history.index] - ); - } - }, - saveHistory: () => { - proxyObject.history.snapshots.splice(proxyObject.history.index + 1); - proxyObject.history.snapshots.push(snapshot(proxyObject).value); - ++proxyObject.history.index; - }, - subscribe: () => subscribe(proxyObject, (ops) => { - if (ops.every( - (op) => op[1][0] === "value" && (op[0] !== "set" || op[2] !== proxyObject.history.wip) - )) { - proxyObject.saveHistory(); - } - }) - }); - proxyObject.saveHistory(); - if (!skipSubscribe) { - proxyObject.subscribe(); - } - return proxyObject; -} - -function proxySet(initialValues) { - const set = proxy({ - data: Array.from(new Set(initialValues)), - has(value) { - return this.data.indexOf(value) !== -1; - }, - add(value) { - let hasProxy = false; - if (typeof value === "object" && value !== null) { - hasProxy = this.data.indexOf(proxy(value)) !== -1; - } - if (this.data.indexOf(value) === -1 && !hasProxy) { - this.data.push(value); - } - return this; - }, - delete(value) { - const index = this.data.indexOf(value); - if (index === -1) { - return false; - } - this.data.splice(index, 1); - return true; - }, - clear() { - this.data.splice(0); - }, - get size() { - return this.data.length; - }, - forEach(cb) { - this.data.forEach((value) => { - cb(value, value, this); - }); - }, - get [Symbol.toStringTag]() { - return "Set"; - }, - toJSON() { - return {}; - }, - [Symbol.iterator]() { - return this.data[Symbol.iterator](); - }, - values() { - return this.data.values(); - }, - keys() { - return this.data.values(); - }, - entries() { - return new Set(this.data).entries(); - } - }); - Object.defineProperties(set, { - data: { - enumerable: false - }, - size: { - enumerable: false - }, - toJSON: { - enumerable: false - } - }); - Object.seal(set); - return set; -} - -function proxyMap(entries) { - const map = vanilla_proxy({ - data: Array.from(entries || []), - has(key) { - return this.data.some((p) => p[0] === key); - }, - set(key, value) { - const record = this.data.find((p) => p[0] === key); - if (record) { - record[1] = value; - } else { - this.data.push([key, value]); - } - return this; - }, - get(key) { - var _a; - return (_a = this.data.find((p) => p[0] === key)) == null ? void 0 : _a[1]; - }, - delete(key) { - const index = this.data.findIndex((p) => p[0] === key); - if (index === -1) { - return false; - } - this.data.splice(index, 1); - return true; - }, - clear() { - this.data.splice(0); - }, - get size() { - return this.data.length; - }, - toJSON() { - return {}; - }, - forEach(cb) { - this.data.forEach((p) => { - cb(p[1], p[0], this); - }); - }, - keys() { - return this.data.map((p) => p[0]).values(); - }, - values() { - return this.data.map((p) => p[1]).values(); - }, - entries() { - return new Map(this.data).entries(); - }, - get [Symbol.toStringTag]() { - return "Map"; - }, - [Symbol.iterator]() { - return this.entries(); - } - }); - Object.defineProperties(map, { - data: { - enumerable: false - }, - size: { - enumerable: false - }, - toJSON: { - enumerable: false - } - }); - Object.seal(map); - return map; -} - - - ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js /** - * External dependencies - */ - -/** * WordPress dependencies */ + + /** * Internal dependencies */ const initialContextValue = { - slots: proxyMap(), - fills: proxyMap(), + slots: (0,external_wp_compose_namespaceObject.observableMap)(), + fills: (0,external_wp_compose_namespaceObject.observableMap)(), registerSlot: () => { true ? external_wp_warning_default()('Components must be wrapped within `SlotFillProvider`. ' + 'See https://developer.wordpress.org/block-editor/components/slot-fill/') : 0; }, @@ -34183,28 +33174,18 @@ const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(in ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js /** - * External dependencies - */ - - -/** * WordPress dependencies */ + /** * Internal dependencies */ function useSlot(name) { const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); - const slots = useSnapshot(registry.slots, { - sync: true - }); - // The important bit here is that the `useSnapshot` call ensures that the - // hook only causes a re-render if the slot with the given name changes, - // not any other slot. - const slot = slots.get(name); + const slot = (0,external_wp_compose_namespaceObject.useObservableValue)(registry.slots, name); const api = (0,external_wp_element_namespaceObject.useMemo)(() => ({ updateSlot: fillProps => registry.updateSlot(name, fillProps), unregisterSlot: ref => registry.unregisterSlot(name, ref), @@ -34320,7 +33301,6 @@ function Fill({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/slot.js - /** * External dependencies */ @@ -34334,6 +33314,8 @@ function Fill({ * Internal dependencies */ + + /** * Whether the argument is a function. * @@ -34406,19 +33388,23 @@ class SlotComponent extends external_wp_element_namespaceObject.Component { // This ensures that we only use non-empty fills when rendering, i.e., // it allows us to render wrappers only when the fills are actually present. element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element)); - return (0,external_React_.createElement)(external_React_.Fragment, null, isFunction(children) ? children(fills) : fills); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: isFunction(children) ? children(fills) : fills + }); } } -const Slot = props => (0,external_React_.createElement)(context.Consumer, null, ({ - registerSlot, - unregisterSlot, - getFills -}) => (0,external_React_.createElement)(SlotComponent, { - ...props, - registerSlot: registerSlot, - unregisterSlot: unregisterSlot, - getFills: getFills -})); +const Slot = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Consumer, { + children: ({ + registerSlot, + unregisterSlot, + getFills + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SlotComponent, { + ...props, + registerSlot: registerSlot, + unregisterSlot: unregisterSlot, + getFills: getFills + }) +}); /* harmony default export */ const slot = (Slot); ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/native.js @@ -34510,7 +33496,6 @@ function v4(options, buf, offset) { /* harmony default export */ const esm_browser_v4 = (v4); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/style-provider/index.js - /** * External dependencies */ @@ -34554,14 +33539,14 @@ function StyleProvider(props) { return null; } const cache = memoizedCreateCacheWithContainer(document.head); - return (0,external_React_.createElement)(CacheProvider, { - value: cache - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CacheProvider, { + value: cache, + children: children + }); } /* harmony default export */ const style_provider = (StyleProvider); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js - /** * WordPress dependencies */ @@ -34572,6 +33557,7 @@ function StyleProvider(props) { */ + function fill_useForceUpdate() { const [, setState] = (0,external_wp_element_namespaceObject.useState)({}); const mounted = (0,external_wp_element_namespaceObject.useRef)(true); @@ -34619,14 +33605,14 @@ function fill_Fill(props) { // `Slot`. This means that we need to wrap the `children` in a `StyleProvider` // to make sure we're referencing the right document/iframe (instead of the // context of the `Fill`'s parent). - const wrappedChildren = (0,external_React_.createElement)(style_provider, { - document: slot.ref.current.ownerDocument - }, typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children); + const wrappedChildren = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, { + document: slot.ref.current.ownerDocument, + children: typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children + }); return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js - /** * External dependencies */ @@ -34642,6 +33628,7 @@ function fill_Fill(props) { */ + function slot_Slot(props, forwardedRef) { const { name, @@ -34675,7 +33662,7 @@ function slot_Slot(props, forwardedRef) { (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { registry.updateSlot(name, fillProps); }); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { as: as, ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]), ...restProps @@ -34687,33 +33674,28 @@ function slot_Slot(props, forwardedRef) { const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"]; var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js - -/** - * External dependencies - */ - - - /** * WordPress dependencies */ + /** * Internal dependencies */ + function createSlotRegistry() { - const slots = proxyMap(); - const fills = proxyMap(); + const slots = (0,external_wp_compose_namespaceObject.observableMap)(); + const fills = (0,external_wp_compose_namespaceObject.observableMap)(); const registerSlot = (name, ref, fillProps) => { const slot = slots.get(name); - slots.set(name, vanilla_ref({ + slots.set(name, { ...slot, ref: ref || slot?.ref, fillProps: fillProps || slot?.fillProps || {} - })); + }); }; const unregisterSlot = (name, ref) => { // Make sure we're not unregistering a slot registered by another element @@ -34738,14 +33720,14 @@ function createSlotRegistry() { } }; const registerFill = (name, ref) => { - fills.set(name, vanilla_ref([...(fills.get(name) || []), ref])); + fills.set(name, [...(fills.get(name) || []), ref]); }; const unregisterFill = (name, ref) => { const fillsForName = fills.get(name); if (!fillsForName) { return; } - fills.set(name, vanilla_ref(fillsForName.filter(fillRef => fillRef !== ref))); + fills.set(name, fillsForName.filter(fillRef => fillRef !== ref)); }; return { slots, @@ -34760,14 +33742,14 @@ function createSlotRegistry() { function SlotFillProvider({ children }) { - const registry = (0,external_wp_element_namespaceObject.useMemo)(createSlotRegistry, []); - return (0,external_React_.createElement)(slot_fill_context.Provider, { - value: registry - }, children); + const [registry] = (0,external_wp_element_namespaceObject.useState)(createSlotRegistry); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_context.Provider, { + value: registry, + children: children + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/provider.js - /** * WordPress dependencies */ @@ -34778,6 +33760,7 @@ function SlotFillProvider({ * Internal dependencies */ + function provider_createSlotRegistry() { const slots = {}; const fills = {}; @@ -34857,15 +33840,15 @@ function provider_createSlotRegistry() { function provider_SlotFillProvider({ children }) { - const contextValue = (0,external_wp_element_namespaceObject.useMemo)(provider_createSlotRegistry, []); - return (0,external_React_.createElement)(context.Provider, { - value: contextValue - }, children); + const [contextValue] = (0,external_wp_element_namespaceObject.useState)(provider_createSlotRegistry); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(context.Provider, { + value: contextValue, + children: children + }); } /* harmony default export */ const provider = (provider_SlotFillProvider); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/index.js - /** * External dependencies */ @@ -34887,15 +33870,20 @@ function provider_SlotFillProvider({ + + + function slot_fill_Fill(props) { // We're adding both Fills here so they can register themselves before // their respective slot has been registered. Only the Fill that has a slot // will render. The other one will return null. - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Fill, { - ...props - }), (0,external_React_.createElement)(fill_Fill, { - ...props - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Fill, { + ...props + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(fill_Fill, { + ...props + })] + }); } function UnforwardedSlot(props, ref) { const { @@ -34903,12 +33891,12 @@ function UnforwardedSlot(props, ref) { ...restProps } = props; if (bubblesVirtually) { - return (0,external_React_.createElement)(bubbles_virtually_slot, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(bubbles_virtually_slot, { ...restProps, ref: ref }); } - return (0,external_React_.createElement)(slot, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot, { ...restProps }); } @@ -34919,18 +33907,24 @@ function Provider({ }) { const parent = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); if (!parent.isDefault && passthrough) { - return (0,external_React_.createElement)(external_React_.Fragment, null, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: children + }); } - return (0,external_React_.createElement)(provider, null, (0,external_React_.createElement)(SlotFillProvider, null, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(provider, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SlotFillProvider, { + children: children + }) + }); } function createSlotFill(key) { const baseName = typeof key === 'symbol' ? key.description : key; - const FillComponent = props => (0,external_React_.createElement)(slot_fill_Fill, { + const FillComponent = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, { name: key, ...props }); FillComponent.displayName = `${baseName}Fill`; - const SlotComponent = props => (0,external_React_.createElement)(slot_fill_Slot, { + const SlotComponent = props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Slot, { name: key, ...props }); @@ -34975,7 +33969,9 @@ function overlayMiddlewares() { } = (_elements$floating = elements.floating) !== null && _elements$floating !== void 0 ? _elements$floating : {}; // Only HTMLElement instances have the `style` property. - if (!(firstElementChild instanceof HTMLElement)) return; + if (!(firstElementChild instanceof HTMLElement)) { + return; + } // Reduce the height of the popover to the available space. Object.assign(firstElementChild.style, { @@ -34987,7 +33983,6 @@ function overlayMiddlewares() { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/index.js - /** * External dependencies */ @@ -35024,25 +34019,29 @@ function overlayMiddlewares() { * * @type {string} */ + + + const SLOT_NAME = 'Popover'; // An SVG displaying a triangle facing down, filled with a solid // color and bordered in such a way to create an arrow-like effect. // Keeping the SVG's viewbox squared simplify the arrow positioning // calculations. -const ArrowTriangle = () => (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { +const ArrowTriangle = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: `0 0 100 100`, + viewBox: "0 0 100 100", className: "components-popover__triangle", - role: "presentation" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - className: "components-popover__triangle-bg", - d: "M 0 0 L 50 50 L 100 0" -}), (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - className: "components-popover__triangle-border", - d: "M 0 0 L 50 50 L 100 0", - vectorEffect: "non-scaling-stroke" -})); + role: "presentation", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + className: "components-popover__triangle-bg", + d: "M 0 0 L 50 50 L 100 0" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + className: "components-popover__triangle-border", + d: "M 0 0 L 50 50 L 100 0", + vectorEffect: "non-scaling-stroke" + })] +}); const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined); const fallbackContainerClassname = 'components-popover__fallback-container'; const getPopoverFallbackContainer = () => { @@ -35054,7 +34053,7 @@ const getPopoverFallbackContainer = () => { } return container; }; -const UnconnectedPopover = (props, forwardedRef) => { +const UnforwardedPopover = (props, forwardedRef) => { const { animate = true, headerTitle, @@ -35141,7 +34140,9 @@ const UnconnectedPopover = (props, forwardedRef) => { } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {}; // Only HTMLElement instances have the `style` property. - if (!(firstElementChild instanceof HTMLElement)) return; + if (!(firstElementChild instanceof HTMLElement)) { + return; + } // Reduce the height of the popover to the available space. Object.assign(firstElementChild.style, { @@ -35233,7 +34234,7 @@ const UnconnectedPopover = (props, forwardedRef) => { x: computePopoverPosition(x), y: computePopoverPosition(y) }; - const shouldReduceMotion = useReducedMotion(); + const shouldReduceMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); const shouldAnimate = animate && !isExpanded && !shouldReduceMotion; const [animationFinished, setAnimationFinished] = (0,external_wp_element_namespaceObject.useState)(false); const { @@ -35255,33 +34256,8 @@ const UnconnectedPopover = (props, forwardedRef) => { // When Floating UI has finished positioning and Framer Motion has finished animating // the popover, add the `is-positioned` class to signal that all transitions have finished. const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null; - - // In case a `ColorPicker` component is rendered as a child of `Popover`, - // the `Popover` component can be notified of when the user is dragging - // parts of the `ColorPicker` UI (this is possible because the `ColorPicker` - // component exposes the `onPickerDragStart` and `onPickerDragEnd` props - // via internal context). - // While the user is performing a pointer drag, the `Popover` will render - // a transparent backdrop element that will serve as a "pointer events trap", - // making sure that no pointer events reach any potential `iframe` element - // underneath (like, for example, the editor canvas in the WordPress editor). - const [showBackdrop, setShowBackdrop] = (0,external_wp_element_namespaceObject.useState)(false); - const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ - ColorPicker: { - onPickerDragStart() { - setShowBackdrop(true); - }, - onPickerDragEnd() { - setShowBackdrop(false); - } - } - }), []); - let content = (0,external_React_.createElement)(external_React_.Fragment, null, showBackdrop && (0,external_React_.createElement)("div", { - className: "components-popover-pointer-events-trap", - "aria-hidden": "true", - onClick: () => setShowBackdrop(false) - }), (0,external_React_.createElement)(motion.div, { - className: classnames_default()('components-popover', className, { + let content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(motion.div, { + className: dist_clsx(className, { 'is-expanded': isExpanded, 'is-positioned': isPositioned, // Use the 'alternate' classname for 'toolbar' variant for back compat. @@ -35291,44 +34267,51 @@ const UnconnectedPopover = (props, forwardedRef) => { ...contentProps, ref: mergedFloatingRef, ...dialogProps, - tabIndex: -1 - }, isExpanded && (0,external_React_.createElement)(scroll_lock, null), isExpanded && (0,external_React_.createElement)("div", { - className: "components-popover__header" - }, (0,external_React_.createElement)("span", { - className: "components-popover__header-title" - }, headerTitle), (0,external_React_.createElement)(build_module_button, { - className: "components-popover__close", - icon: library_close, - onClick: onClose - })), (0,external_React_.createElement)("div", { - className: "components-popover__content" - }, (0,external_React_.createElement)(ContextSystemProvider, { - value: contextValue - }, children)), hasArrow && (0,external_React_.createElement)("div", { - ref: arrowCallbackRef, - className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '), - style: { - left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '', - top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : '' - } - }, (0,external_React_.createElement)(ArrowTriangle, null)))); + tabIndex: -1, + children: [isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(scroll_lock, {}), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-popover__header", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-popover__header-title", + children: headerTitle + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-popover__close", + icon: library_close, + onClick: onClose + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-popover__content", + children: children + }), hasArrow && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + ref: arrowCallbackRef, + className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '), + style: { + left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '', + top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : '' + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ArrowTriangle, {}) + })] + }); const shouldRenderWithinSlot = slot.ref && !inline; const hasAnchor = anchorRef || anchorRect || anchor; if (shouldRenderWithinSlot) { - content = (0,external_React_.createElement)(slot_fill_Fill, { - name: slotName - }, content); + content = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Fill, { + name: slotName, + children: content + }); } else if (!inline) { - content = (0,external_wp_element_namespaceObject.createPortal)((0,external_React_.createElement)(StyleProvider, { - document: document - }, content), getPopoverFallbackContainer()); + content = (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyleProvider, { + document: document, + children: content + }), getPopoverFallbackContainer()); } if (hasAnchor) { return content; } - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)("span", { - ref: anchorRefFallback - }), content); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + ref: anchorRefFallback + }), content] + }); }; /** @@ -35354,11 +34337,11 @@ const UnconnectedPopover = (props, forwardedRef) => { * ``` * */ -const popover_Popover = contextConnect(UnconnectedPopover, 'Popover'); +const popover_Popover = contextConnect(UnforwardedPopover, 'Popover'); function PopoverSlot({ name = SLOT_NAME }, ref) { - return (0,external_React_.createElement)(slot_fill_Slot, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(slot_fill_Slot, { bubblesVirtually: true, name: name, className: "popover-slot", @@ -35373,7 +34356,6 @@ popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider; /* harmony default export */ const popover = (popover_Popover); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js - /** * External dependencies */ @@ -35396,8 +34378,38 @@ popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider; + + + +function ListBox({ + items, + onSelect, + selectedIndex, + instanceId, + listBoxId, + className, + Component = 'div' +}) { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { + id: listBoxId, + role: "listbox", + className: "components-autocomplete__results", + children: items.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + id: `components-autocomplete-item-${instanceId}-${option.key}`, + role: "option", + "aria-selected": index === selectedIndex, + disabled: option.isDisabled, + className: dist_clsx('components-autocomplete__result', className, { + 'is-selected': index === selectedIndex + }), + onClick: () => onSelect(option), + children: option.label + }, option.key)) + }); +} function getAutoCompleterUI(autocompleter) { - const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter); + var _autocompleter$useIte; + const useItems = (_autocompleter$useIte = autocompleter.useItems) !== null && _autocompleter$useIte !== void 0 ? _autocompleter$useIte : getDefaultUseItems(autocompleter); function AutocompleterUI({ filterValue, instanceId, @@ -35417,12 +34429,14 @@ function getAutoCompleterUI(autocompleter) { const [needsA11yCompat, setNeedsA11yCompat] = (0,external_wp_element_namespaceObject.useState)(false); const popoverRef = (0,external_wp_element_namespaceObject.useRef)(null); const popoverRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([popoverRef, (0,external_wp_compose_namespaceObject.useRefEffect)(node => { - if (!contentRef.current) return; + if (!contentRef.current) { + return; + } // If the popover is rendered in a different document than // the content, we need to duplicate the options list in the // content document so that it's available to the screen - // readers, which check the DOM ID based aira-* attributes. + // readers, which check the DOM ID based aria-* attributes. setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument); }, [contentRef])]); useOnClickOutside(popoverRef, reset); @@ -35453,33 +34467,32 @@ function getAutoCompleterUI(autocompleter) { if (items.length === 0) { return null; } - const ListBox = ({ - Component = 'div' - }) => (0,external_React_.createElement)(Component, { - id: listBoxId, - role: "listbox", - className: "components-autocomplete__results" - }, items.map((option, index) => (0,external_React_.createElement)(build_module_button, { - key: option.key, - id: `components-autocomplete-item-${instanceId}-${option.key}`, - role: "option", - "aria-selected": index === selectedIndex, - disabled: option.isDisabled, - className: classnames_default()('components-autocomplete__result', className, { - 'is-selected': index === selectedIndex - }), - onClick: () => onSelect(option) - }, option.label))); - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(popover, { - focusOnMount: false, - onClose: onReset, - placement: "top-start", - className: "components-autocomplete__popover", - anchor: popoverAnchor, - ref: popoverRefs - }, (0,external_React_.createElement)(ListBox, null)), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)((0,external_React_.createElement)(ListBox, { - Component: visually_hidden_component - }), contentRef.current.ownerDocument.body)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, { + focusOnMount: false, + onClose: onReset, + placement: "top-start", + className: "components-autocomplete__popover", + anchor: popoverAnchor, + ref: popoverRefs, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, { + items: items, + onSelect: onSelect, + selectedIndex: selectedIndex, + instanceId: instanceId, + listBoxId: listBoxId, + className: className + }) + }), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ListBox, { + items: items, + onSelect: onSelect, + selectedIndex: selectedIndex, + instanceId: instanceId, + listBoxId: listBoxId, + className: className, + Component: visually_hidden_component + }), contentRef.current.ownerDocument.body)] + }); } return AutocompleterUI; } @@ -35505,7 +34518,6 @@ function useOnClickOutside(ref, handler) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/index.js - /** * External dependencies */ @@ -35525,6 +34537,10 @@ function useOnClickOutside(ref, handler) { */ + + + + const getNodeText = node => { if (node === null) { return ''; @@ -35633,13 +34649,7 @@ function useAutocomplete({ if (filteredOptions.length === 0) { return; } - if (event.defaultPrevented || - // Ignore keydowns from IMEs - event.isComposing || - // Workaround for Mac Safari where the final Enter/Backspace of an IME composition - // is `isComposing=false`, even though it's technically still part of the composition. - // These can only be detected by keyCode. - event.keyCode === 229) { + if (event.defaultPrevented) { return; } switch (event.key) { @@ -35694,7 +34704,9 @@ function useAutocomplete({ }, [record]); (0,external_wp_element_namespaceObject.useEffect)(() => { if (!textContent) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } @@ -35706,7 +34718,9 @@ function useAutocomplete({ return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger; }, null); if (!completer) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } const { @@ -35721,7 +34735,9 @@ function useAutocomplete({ // significantly. This could happen, for example, if `matchingWhileBackspacing` // is true and one of the "words" end up being too long. If that's the case, // it will be caught by this guard. - if (tooDistantFromTrigger) return; + if (tooDistantFromTrigger) { + return; + } const mismatch = filteredOptions.length === 0; const wordsFromTrigger = textWithoutTrigger.split(/\s/); // We need to allow the effect to run when not backspacing and if there @@ -35743,20 +34759,28 @@ function useAutocomplete({ // if the user presses backspace here, it will show the completion popup again. const matchingWhileBackspacing = backspacing.current && wordsFromTrigger.length <= 3; if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length)); if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } if (!/[\u0000-\uFFFF]*$/.test(textWithoutTrigger)) { - if (autocompleter) reset(); + if (autocompleter) { + reset(); + } return; } const safeTrigger = escapeRegExp(completer.triggerPrefix); @@ -35783,8 +34807,8 @@ function useAutocomplete({ return { listBoxId, activeId, - onKeyDown: handleKeyDown, - popover: hasSelection && AutocompleterUI && (0,external_React_.createElement)(AutocompleterUI, { + onKeyDown: withIgnoreIMEEvents(handleKeyDown), + popover: hasSelection && AutocompleterUI && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AutocompleterUI, { className: className, filterValue: filterValue, instanceId: instanceId, @@ -35859,7 +34883,9 @@ function Autocomplete({ popover, ...props } = useAutocomplete(options); - return (0,external_React_.createElement)(external_React_.Fragment, null, children(props), isSelected && popover); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [children(props), isSelected && popover] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/hooks.js @@ -35886,9 +34912,6 @@ function useBaseControlProps(props) { ...restProps } = props; const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId); - - // ARIA descriptions can only contain plain text, so fall back to aria-details if not. - const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details'; return { baseControlProps: { id: uniqueId, @@ -35898,38 +34921,40 @@ function useBaseControlProps(props) { controlProps: { id: uniqueId, ...(!!help ? { - [helpPropName]: `${uniqueId}__help` + 'aria-describedby': `${uniqueId}__help` } : {}) } }; } ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js - /** * WordPress dependencies */ -const link_link = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const link_link = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z" + }) +}); /* harmony default export */ const library_link = (link_link); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link-off.js - /** * WordPress dependencies */ -const linkOff = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const linkOff = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z" + }) +}); /* harmony default export */ const link_off = (linkOff); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/styles.js @@ -36014,7 +35039,6 @@ function useBorderBoxControlLinkedButton(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js - /** * WordPress dependencies */ @@ -36029,6 +35053,7 @@ function useBorderBoxControlLinkedButton(props) { + const BorderBoxControlLinkedButton = (props, forwardedRef) => { const { className, @@ -36036,18 +35061,20 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => { ...buttonProps } = useBorderBoxControlLinkedButton(props); const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); - return (0,external_React_.createElement)(tooltip, { - text: label - }, (0,external_React_.createElement)(component, { - className: className - }, (0,external_React_.createElement)(build_module_button, { - ...buttonProps, - size: "small", - icon: isLinked ? library_link : link_off, - iconSize: 24, - "aria-label": label, - ref: forwardedRef - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + text: label, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + className: className, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + ...buttonProps, + size: "small", + icon: isLinked ? library_link : link_off, + iconSize: 24, + "aria-label": label, + ref: forwardedRef + }) + }) + }); }; const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton'); /* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton); @@ -36085,7 +35112,6 @@ function useBorderBoxControlVisualizer(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js - /** * WordPress dependencies */ @@ -36096,12 +35122,13 @@ function useBorderBoxControlVisualizer(props) { + const BorderBoxControlVisualizer = (props, forwardedRef) => { const { value, ...otherProps } = useBorderBoxControlVisualizer(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...otherProps, ref: forwardedRef }); @@ -36110,63 +35137,67 @@ const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisua /* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close-small.js - /** * WordPress dependencies */ -const closeSmall = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const closeSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z" + }) +}); /* harmony default export */ const close_small = (closeSmall); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-solid.js - /** * WordPress dependencies */ -const lineSolid = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const lineSolid = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M5 11.25h14v1.5H5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M5 11.25h14v1.5H5z" + }) +}); /* harmony default export */ const line_solid = (lineSolid); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dashed.js - /** * WordPress dependencies */ -const lineDashed = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const lineDashed = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - fillRule: "evenodd", - d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z", - clipRule: "evenodd" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + fillRule: "evenodd", + d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z", + clipRule: "evenodd" + }) +}); /* harmony default export */ const line_dashed = (lineDashed); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dotted.js - /** * WordPress dependencies */ -const lineDotted = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const lineDotted = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - fillRule: "evenodd", - d: "M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z", - clipRule: "evenodd" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + fillRule: "evenodd", + d: "M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z", + clipRule: "evenodd" + }) +}); /* harmony default export */ const line_dotted = (lineDotted); ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs @@ -36235,7 +35266,7 @@ const LayoutGroup = ({ children, id, inherit = true }) => { }; } const memoizedContext = (0,external_React_.useMemo)(() => ({ ...context.current, forceRender }), [key]); - return (external_React_.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children)); + return ((0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutGroupContext.Provider, { value: memoizedContext, children: children })); }; @@ -36264,13 +35295,13 @@ var styles_ref = true ? { name: "1aqh2c7", styles: "min-height:40px;padding:3px" } : 0; -var styles_ref2 = true ? { +var _ref2 = true ? { name: "1ndywgm", styles: "min-height:36px;padding:2px" } : 0; const toggleGroupControlSize = size => { const styles = { - default: styles_ref2, + default: _ref2, '__unstable-large': styles_ref }; return styles[size]; @@ -36279,7 +35310,7 @@ const toggle_group_control_styles_block = true ? { name: "7whenc", styles: "display:flex;width:100%" } : 0; -const VisualLabelWrapper = emotion_styled_base_browser_esm("div", true ? { +const VisualLabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eakva830" } : 0)( true ? { name: "zjik7", @@ -36384,7 +35415,7 @@ var useRadioGroup = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(RadioScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioScopedContextProvider, { value: store, children: element }), [store] ); props = _4R3V3JGP_spreadValues({ @@ -36465,7 +35496,6 @@ function useComputeControlledOrUncontrolledValue(valueProp) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js - /** * External dependencies */ @@ -36485,6 +35515,7 @@ function useComputeControlledOrUncontrolledValue(valueProp) { + function UnforwardedToggleGroupControlAsRadioGroup({ children, isAdaptiveWidth, @@ -36526,16 +35557,18 @@ function UnforwardedToggleGroupControlAsRadioGroup({ value: selectedValue, setValue }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]); - return (0,external_React_.createElement)(toggle_group_control_context.Provider, { - value: groupContextValue - }, (0,external_React_.createElement)(RadioGroup, { - store: radio, - "aria-label": label, - render: (0,external_React_.createElement)(component, null), - ...otherProps, - id: baseId, - ref: forwardedRef - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, { + value: groupContextValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, { + store: radio, + "aria-label": label, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, {}), + ...otherProps, + id: baseId, + ref: forwardedRef, + children: children + }) + }); } const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup); @@ -36577,7 +35610,6 @@ function useControlledValue({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js - /** * WordPress dependencies */ @@ -36591,6 +35623,7 @@ function useControlledValue({ + function UnforwardedToggleGroupControlAsButtonGroup({ children, isAdaptiveWidth, @@ -36625,19 +35658,20 @@ function UnforwardedToggleGroupControlAsButtonGroup({ isDeselectable: true, size }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]); - return (0,external_React_.createElement)(toggle_group_control_context.Provider, { - value: groupContextValue - }, (0,external_React_.createElement)(component, { - "aria-label": label, - ...otherProps, - ref: forwardedRef, - role: "group" - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_context.Provider, { + value: groupContextValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + "aria-label": label, + ...otherProps, + ref: forwardedRef, + role: "group", + children: children + }) + }); } const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js - /** * External dependencies */ @@ -36662,6 +35696,8 @@ const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.f + + function UnconnectedToggleGroupControl(props, forwardedRef) { const { __nextHasNoMarginBottom = false, @@ -36688,21 +35724,28 @@ function UnconnectedToggleGroupControl(props, forwardedRef) { size: normalizedSize }), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, normalizedSize]); const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup; - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, { help: help, - __nextHasNoMarginBottom: __nextHasNoMarginBottom - }, !hideLabelFromVision && (0,external_React_.createElement)(VisualLabelWrapper, null, (0,external_React_.createElement)(base_control.VisualLabel, null, label)), (0,external_React_.createElement)(MainControl, { - ...otherProps, - className: classes, - isAdaptiveWidth: isAdaptiveWidth, - label: label, - onChange: onChange, - ref: forwardedRef, - size: normalizedSize, - value: value - }, (0,external_React_.createElement)(LayoutGroup, { - id: baseId - }, children))); + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + children: [!hideLabelFromVision && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(VisualLabelWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { + children: label + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MainControl, { + ...otherProps, + className: classes, + isAdaptiveWidth: isAdaptiveWidth, + label: label, + onChange: onChange, + ref: forwardedRef, + size: normalizedSize, + value: value, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutGroup, { + id: baseId, + children: children + }) + })] + }); } /** @@ -36880,7 +35923,7 @@ function toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_( * Internal dependencies */ -const LabelView = emotion_styled_base_browser_esm("div", true ? { +const LabelView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "et6ln9s1" } : 0)( true ? { name: "sln1fl", @@ -36895,12 +35938,12 @@ const buttonView = ({ isIcon, isPressed, size -}) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;", reduceMotion('transition'), " user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", config_values.toggleGroupControlBackgroundColor, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({ +}) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;@media not ( prefers-reduced-motion ){transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;}user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", config_values.toggleGroupControlBackgroundColor, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({ size }), " ", isPressed && pressed, ";" + ( true ? "" : 0), true ? "" : 0); const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0); const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.white, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0), true ? "" : 0); -const ButtonContentView = emotion_styled_base_browser_esm("div", true ? { +const ButtonContentView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "et6ln9s0" } : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0)); const isIconStyles = ({ @@ -36915,7 +35958,6 @@ const isIconStyles = ({ const backdropView = /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.gray[900], ";border-radius:", config_values.controlBorderRadius, ";position:absolute;inset:0;z-index:1;outline:2px solid transparent;outline-offset:-3px;" + ( true ? "" : 0), true ? "" : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js - /** * External dependencies */ @@ -36940,6 +35982,9 @@ const backdropView = /*#__PURE__*/emotion_react_browser_esm_css("background:", C + + + const { ButtonContentView: component_ButtonContentView, LabelView: component_LabelView @@ -36954,15 +35999,18 @@ const WithToolTip = ({ children }) => { if (showTooltip && text) { - return (0,external_React_.createElement)(tooltip, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { text: text, - placement: "top" - }, children); + placement: "top", + children: children + }); } - return (0,external_React_.createElement)(external_React_.Fragment, null, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: children + }); }; function ToggleGroupControlOptionBase(props, forwardedRef) { - const shouldReduceMotion = useReducedMotion(); + const shouldReduceMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); const toggleGroupControlContext = useToggleGroupControlContext(); const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base'); const buttonProps = useContextSystem({ @@ -37006,34 +36054,48 @@ function ToggleGroupControlOptionBase(props, forwardedRef) { 'data-value': value, ref: forwardedRef }; - return (0,external_React_.createElement)(component_LabelView, { - className: labelViewClasses - }, (0,external_React_.createElement)(WithToolTip, { - showTooltip: showTooltip, - text: otherButtonProps['aria-label'] - }, isDeselectable ? (0,external_React_.createElement)("button", { - ...commonProps, - onFocus: onFocusProp, - "aria-pressed": isPressed, - type: "button", - onClick: buttonOnClick - }, (0,external_React_.createElement)(component_ButtonContentView, null, children)) : (0,external_React_.createElement)(Radio, { - render: (0,external_React_.createElement)("button", { - type: "button", - ...commonProps, - onFocus: event => { - onFocusProp?.(event); - if (event.defaultPrevented) return; - toggleGroupControlContext.setValue(value); - } - }), - value: value - }, (0,external_React_.createElement)(component_ButtonContentView, null, children))), isPressed ? (0,external_React_.createElement)(motion.div, { - className: backdropClasses, - transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined, - role: "presentation", - layoutId: LAYOUT_ID - }) : null); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component_LabelView, { + className: labelViewClasses, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolTip, { + showTooltip: showTooltip, + text: otherButtonProps['aria-label'], + children: isDeselectable ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { + ...commonProps, + onFocus: onFocusProp, + "aria-pressed": isPressed, + type: "button", + onClick: buttonOnClick, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, { + children: children + }) + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { + type: "button", + ...commonProps, + onFocus: event => { + onFocusProp?.(event); + if (event.defaultPrevented) { + return; + } + toggleGroupControlContext.setValue(value); + } + }), + value: value, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_ButtonContentView, { + children: children + }) + }) + }), isPressed ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, { + layout: true, + layoutRoot: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, { + className: backdropClasses, + transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined, + role: "presentation", + layoutId: LAYOUT_ID + }) + }) : null] + }); } /** @@ -37061,7 +36123,6 @@ const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlO /* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js - /** * External dependencies */ @@ -37077,21 +36138,23 @@ const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlO + function UnforwardedToggleGroupControlOptionIcon(props, ref) { const { icon, label, ...restProps } = props; - return (0,external_React_.createElement)(toggle_group_control_option_base_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, { ...restProps, isIcon: true, "aria-label": label, showTooltip: true, - ref: ref - }, (0,external_React_.createElement)(build_module_icon, { - icon: icon - })); + ref: ref, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon + }) + }); } /** @@ -37128,7 +36191,6 @@ const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forw /* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js - /** * WordPress dependencies */ @@ -37140,6 +36202,7 @@ const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forw */ + const BORDER_STYLES = [{ label: (0,external_wp_i18n_namespaceObject.__)('Solid'), icon: line_solid, @@ -37157,7 +36220,7 @@ function UnconnectedBorderControlStylePicker({ onChange, ...restProps }, forwardedRef) { - return (0,external_React_.createElement)(toggle_group_control_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_component, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, ref: forwardedRef, @@ -37165,19 +36228,18 @@ function UnconnectedBorderControlStylePicker({ onChange: value => { onChange?.(value); }, - ...restProps - }, BORDER_STYLES.map(borderStyle => (0,external_React_.createElement)(toggle_group_control_option_icon_component, { - key: borderStyle.value, - value: borderStyle.value, - icon: borderStyle.icon, - label: borderStyle.label - }))); + ...restProps, + children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_icon_component, { + value: borderStyle.value, + icon: borderStyle.icon, + label: borderStyle.label + }, borderStyle.value)) + }); } const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker'); /* harmony default export */ const border_control_style_picker_component = (BorderControlStylePicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-indicator/index.js - /** * External dependencies */ @@ -37197,8 +36259,8 @@ function UnforwardedColorIndicator(props, forwardedRef) { colorValue, ...additionalProps } = props; - return (0,external_React_.createElement)("span", { - className: classnames_default()('component-color-indicator', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: dist_clsx('component-color-indicator', className), style: { background: colorValue }, @@ -37225,7 +36287,6 @@ const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(Unforw var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}} ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/index.js - /** * External dependencies */ @@ -37243,6 +36304,8 @@ var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.0 + + const UnconnectedDropdown = (props, forwardedRef) => { const { renderContent, @@ -37312,7 +36375,7 @@ const UnconnectedDropdown = (props, forwardedRef) => { // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and // be removed from `Popover` from WordPress 6.3 !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect; - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { className: className, ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor]) // Some UAs focus the closest focusable parent when the toggle is @@ -37320,23 +36383,25 @@ const UnconnectedDropdown = (props, forwardedRef) => { // it and `closeIfFocusOutside` can tell if the toggle was clicked. , tabIndex: -1, - style: style - }, renderToggle(args), isOpen && (0,external_React_.createElement)(popover, { - position: position, - onClose: close, - onFocusOutside: closeIfFocusOutside, - expandOnMobile: expandOnMobile, - headerTitle: headerTitle, - focusOnMount: focusOnMount - // This value is used to ensure that the dropdowns - // align with the editor header by default. - , - offset: 13, - anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined, - variant: variant, - ...popoverProps, - className: classnames_default()('components-dropdown__content', popoverProps?.className, contentClassName) - }, renderContent(args))); + style: style, + children: [renderToggle(args), isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(popover, { + position: position, + onClose: close, + onFocusOutside: closeIfFocusOutside, + expandOnMobile: expandOnMobile, + headerTitle: headerTitle, + focusOnMount: focusOnMount + // This value is used to ensure that the dropdowns + // align with the editor header by default. + , + offset: 13, + anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined, + variant: variant, + ...popoverProps, + className: dist_clsx('components-dropdown__content', popoverProps?.className, contentClassName), + children: renderContent(args) + })] + }); }; /** @@ -37368,7 +36433,6 @@ const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown'); /* harmony default export */ const dropdown = (Dropdown); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js - /** * External dependencies */ @@ -37378,9 +36442,10 @@ const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown'); */ + function UnconnectedInputControlSuffixWrapper(props, forwardedRef) { const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper'); - return (0,external_React_.createElement)(spacer_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { marginBottom: 0, ...derivedProps, ref: forwardedRef @@ -37421,7 +36486,9 @@ const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWr const select_control_styles_disabledStyles = ({ disabled }) => { - if (!disabled) return ''; + if (!disabled) { + return ''; + } return /*#__PURE__*/emotion_react_browser_esm_css({ color: COLORS.ui.textDisabled }, true ? "" : 0, true ? "" : 0); @@ -37504,10 +36571,10 @@ const overflowStyles = ({ // TODO: Resolve need to use &&& to increase specificity // https://github.com/WordPress/gutenberg/issues/18483 -const Select = emotion_styled_base_browser_esm("select", true ? { +const Select = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? { target: "e1mv6sxx2" } : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;width:100%;max-width:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;", select_control_styles_disabledStyles, ";", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0)); -const DownArrowWrapper = emotion_styled_base_browser_esm("div", true ? { +const DownArrowWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1mv6sxx1" } : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0)); const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper, true ? { @@ -37549,21 +36616,21 @@ function icon_Icon({ /* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js - /** * WordPress dependencies */ -const chevronDown = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const chevronDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" -})); + xmlns: "http://www.w3.org/2000/svg", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" + }) +}); /* harmony default export */ const chevron_down = (chevronDown); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js - /** * WordPress dependencies */ @@ -37573,16 +36640,20 @@ const chevronDown = (0,external_React_.createElement)(external_wp_primitives_nam * Internal dependencies */ + const SelectControlChevronDown = () => { - return (0,external_React_.createElement)(InputControlSuffixWrapperWithClickThrough, null, (0,external_React_.createElement)(DownArrowWrapper, null, (0,external_React_.createElement)(icons_build_module_icon, { - icon: chevron_down, - size: chevronIconSize - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputControlSuffixWrapperWithClickThrough, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DownArrowWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: chevron_down, + size: chevronIconSize + }) + }) + }); }; /* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/index.js - /** * External dependencies */ @@ -37602,7 +36673,7 @@ const SelectControlChevronDown = () => { -const select_control_noop = () => {}; + function select_control_useUniqueId(idProp) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl); const id = `inspector-select-control-${instanceId}`; @@ -37617,9 +36688,7 @@ function UnforwardedSelectControl(props, ref) { id: idProp, label, multiple = false, - onBlur = select_control_noop, onChange, - onFocus = select_control_noop, options = [], size = 'default', value: valueProp, @@ -37631,20 +36700,13 @@ function UnforwardedSelectControl(props, ref) { __nextHasNoMarginBottom = false, ...restProps } = useDeprecated36pxDefaultSizeProp(props); - const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); const id = select_control_useUniqueId(idProp); const helpId = help ? `${id}__help` : undefined; // Disable reason: A select with an onchange throws a warning. - if (!options?.length && !children) return null; - const handleOnBlur = event => { - onBlur(event); - setIsFocused(false); - }; - const handleOnFocus = event => { - onFocus(event); - setIsFocused(true); - }; + if (!options?.length && !children) { + return null; + } const handleOnChange = event => { if (props.multiple) { const selectedOptions = Array.from(event.target.options).filter(({ @@ -37662,46 +36724,46 @@ function UnforwardedSelectControl(props, ref) { event }); }; - const classes = classnames_default()('components-select-control', className); - return (0,external_React_.createElement)(base_control, { + const classes = dist_clsx('components-select-control', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { help: help, id: id, - __nextHasNoMarginBottom: __nextHasNoMarginBottom - }, (0,external_React_.createElement)(input_base, { - className: classes, - disabled: disabled, - hideLabelFromVision: hideLabelFromVision, - id: id, - isFocused: isFocused, - label: label, - size: size, - suffix: suffix || !multiple && (0,external_React_.createElement)(select_control_chevron_down, null), - prefix: prefix, - labelPosition: labelPosition, - __next40pxDefaultSize: __next40pxDefaultSize - }, (0,external_React_.createElement)(Select, { - ...restProps, - __next40pxDefaultSize: __next40pxDefaultSize, - "aria-describedby": helpId, - className: "components-select-control__input", - disabled: disabled, - id: id, - multiple: multiple, - onBlur: handleOnBlur, - onChange: handleOnChange, - onFocus: handleOnFocus, - ref: ref, - selectSize: size, - value: valueProp - }, children || options.map((option, index) => { - const key = option.id || `${option.label}-${option.value}-${index}`; - return (0,external_React_.createElement)("option", { - key: key, - value: option.value, - disabled: option.disabled, - hidden: option.hidden - }, option.label); - })))); + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_base, { + className: classes, + disabled: disabled, + hideLabelFromVision: hideLabelFromVision, + id: id, + label: label, + size: size, + suffix: suffix || !multiple && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}), + prefix: prefix, + labelPosition: labelPosition, + __next40pxDefaultSize: __next40pxDefaultSize, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Select, { + ...restProps, + __next40pxDefaultSize: __next40pxDefaultSize, + "aria-describedby": helpId, + className: "components-select-control__input", + disabled: disabled, + id: id, + multiple: multiple, + onChange: handleOnChange, + ref: ref, + selectSize: size, + value: valueProp, + children: children || options.map((option, index) => { + const key = option.id || `${option.label}-${option.value}-${index}`; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { + value: option.value, + disabled: option.disabled, + hidden: option.hidden, + children: option.label + }, key); + }) + }) + }) + }); } /** @@ -37900,7 +36962,7 @@ const deprecatedHeight = ({ }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({ minHeight: rangeHeightValue }, true ? "" : 0, true ? "" : 0); -const range_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { +const range_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1epgpqk14" } : 0)("-webkit-tap-highlight-color:transparent;align-items:center;display:flex;justify-content:flex-start;padding:0;position:relative;touch-action:none;width:100%;min-height:40px;", deprecatedHeight, ";" + ( true ? "" : 0)); const wrapperColor = ({ @@ -37919,15 +36981,15 @@ const wrapperMargin = ({ } return ''; }; -const range_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { +const range_control_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1epgpqk13" } : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0)); -const BeforeIconWrapper = emotion_styled_base_browser_esm("span", true ? { +const BeforeIconWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk12" } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ marginRight: 6 }), ";" + ( true ? "" : 0)); -const AfterIconWrapper = emotion_styled_base_browser_esm("span", true ? { +const AfterIconWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk11" } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ marginLeft: 6 @@ -37944,7 +37006,7 @@ const railBackgroundColor = ({ background }, true ? "" : 0, true ? "" : 0); }; -const Rail = emotion_styled_base_browser_esm("span", true ? { +const Rail = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk10" } : 0)("background-color:", COLORS.gray[300], ";left:0;pointer-events:none;right:0;display:block;height:", railHeight, "px;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;border-radius:", railHeight, "px;", railBackgroundColor, ";" + ( true ? "" : 0)); const trackBackgroundColor = ({ @@ -37959,10 +37021,10 @@ const trackBackgroundColor = ({ background }, true ? "" : 0, true ? "" : 0); }; -const Track = emotion_styled_base_browser_esm("span", true ? { +const Track = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk9" } : 0)("background-color:currentColor;border-radius:", railHeight, "px;height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;", trackBackgroundColor, ";" + ( true ? "" : 0)); -const MarksWrapper = emotion_styled_base_browser_esm("span", true ? { +const MarksWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk8" } : 0)( true ? { name: "l7tjj5", @@ -37980,7 +37042,7 @@ const markFill = ({ backgroundColor }, true ? "" : 0, true ? "" : 0); }; -const Mark = emotion_styled_base_browser_esm("span", true ? { +const Mark = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk7" } : 0)("height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0)); const markLabelFill = ({ @@ -37990,13 +37052,13 @@ const markLabelFill = ({ color: isFilled ? COLORS.gray[700] : COLORS.gray[300] }, true ? "" : 0, true ? "" : 0); }; -const MarkLabel = emotion_styled_base_browser_esm("span", true ? { +const MarkLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk6" } : 0)("color:", COLORS.gray[300], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0)); const thumbColor = ({ disabled }) => disabled ? /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.gray[400], ";" + ( true ? "" : 0), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.theme.accent, ";" + ( true ? "" : 0), true ? "" : 0); -const ThumbWrapper = emotion_styled_base_browser_esm("span", true ? { +const ThumbWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk5" } : 0)("align-items:center;display:flex;height:", thumbSize, "px;justify-content:center;margin-top:", (rangeHeightValue - thumbSize) / 2, "px;outline:0;pointer-events:none;position:absolute;top:0;user-select:none;width:", thumbSize, "px;border-radius:50%;", thumbColor, ";", rtl({ marginLeft: -10 @@ -38010,10 +37072,10 @@ const thumbFocus = ({ }) => { return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:", COLORS.theme.accent, ";opacity:0.4;border-radius:50%;height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : ''; }; -const Thumb = emotion_styled_base_browser_esm("span", true ? { +const Thumb = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk4" } : 0)("align-items:center;border-radius:50%;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0)); -const InputRange = emotion_styled_base_browser_esm("input", true ? { +const InputRange = /*#__PURE__*/emotion_styled_base_browser_esm("input", true ? { target: "e1epgpqk3" } : 0)("box-sizing:border-box;cursor:pointer;display:block;height:100%;left:0;margin:0 -", thumbSize / 2, "px;opacity:0;outline:none;position:absolute;right:0;top:0;width:calc( 100% + ", thumbSize, "px );" + ( true ? "" : 0)); const tooltipShow = ({ @@ -38040,29 +37102,28 @@ const tooltipPosition = ({ } return range_control_styles_ref; }; -const range_control_styles_Tooltip = emotion_styled_base_browser_esm("span", true ? { +const range_control_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk2" -} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;color:white;display:inline-block;font-size:12px;min-width:32px;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;transition:opacity 120ms ease;user-select:none;line-height:1.4;", tooltipShow, ";", tooltipPosition, ";", reduceMotion('transition'), ";", rtl({ +} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;color:white;display:inline-block;font-size:12px;min-width:32px;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;user-select:none;line-height:1.4;@media not ( prefers-reduced-motion ){transition:opacity 120ms ease;}", tooltipShow, ";", tooltipPosition, ";", rtl({ transform: 'translateX(-50%)' }, { transform: 'translateX(50%)' }), ";" + ( true ? "" : 0)); -// @todo: Refactor RangeControl with latest HStack configuration +// @todo Refactor RangeControl with latest HStack configuration // @see: packages/components/src/h-stack const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { target: "e1epgpqk1" } : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({ marginLeft: `${space(4)} !important` }), ";" + ( true ? "" : 0)); -const ActionRightWrapper = emotion_styled_base_browser_esm("span", true ? { +const ActionRightWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1epgpqk0" } : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({ marginLeft: 8 }), ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/input-range.js - /** * WordPress dependencies */ @@ -38072,6 +37133,7 @@ const ActionRightWrapper = emotion_styled_base_browser_esm("span", true ? { * Internal dependencies */ + function input_range_InputRange(props, ref) { const { describedBy, @@ -38079,7 +37141,7 @@ function input_range_InputRange(props, ref) { value, ...otherProps } = props; - return (0,external_React_.createElement)(InputRange, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputRange, { ...otherProps, "aria-describedby": describedBy, "aria-label": label, @@ -38094,7 +37156,6 @@ const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.fo /* harmony default export */ const input_range = (input_range_ForwardedComponent); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/mark.js - /** * External dependencies */ @@ -38104,6 +37165,9 @@ const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.fo * Internal dependencies */ + + + function RangeMark(props) { const { className, @@ -38112,24 +37176,26 @@ function RangeMark(props) { style = {}, ...otherProps } = props; - const classes = classnames_default()('components-range-control__mark', isFilled && 'is-filled', className); - const labelClasses = classnames_default()('components-range-control__mark-label', isFilled && 'is-filled'); - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Mark, { - ...otherProps, - "aria-hidden": "true", - className: classes, - isFilled: isFilled, - style: style - }), label && (0,external_React_.createElement)(MarkLabel, { - "aria-hidden": "true", - className: labelClasses, - isFilled: isFilled, - style: style - }, label)); + const classes = dist_clsx('components-range-control__mark', isFilled && 'is-filled', className); + const labelClasses = dist_clsx('components-range-control__mark-label', isFilled && 'is-filled'); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Mark, { + ...otherProps, + "aria-hidden": "true", + className: classes, + isFilled: isFilled, + style: style + }), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarkLabel, { + "aria-hidden": "true", + className: labelClasses, + isFilled: isFilled, + style: style, + children: label + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/rail.js - /** * WordPress dependencies */ @@ -38140,6 +37206,10 @@ function RangeMark(props) { */ + + + + function RangeRail(props) { const { disabled = false, @@ -38150,17 +37220,19 @@ function RangeRail(props) { value = 0, ...restProps } = props; - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Rail, { - disabled: disabled, - ...restProps - }), marks && (0,external_React_.createElement)(Marks, { - disabled: disabled, - marks: marks, - min: min, - max: max, - step: step, - value: value - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Rail, { + disabled: disabled, + ...restProps + }), marks && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Marks, { + disabled: disabled, + marks: marks, + min: min, + max: max, + step: step, + value: value + })] + }); } function Marks(props) { const { @@ -38179,15 +37251,16 @@ function Marks(props) { step, value }); - return (0,external_React_.createElement)(MarksWrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MarksWrapper, { "aria-hidden": "true", - className: "components-range-control__marks" - }, marksData.map(mark => (0,external_React_.createElement)(RangeMark, { - ...mark, - key: mark.key, - "aria-hidden": "true", - disabled: disabled - }))); + className: "components-range-control__marks", + children: marksData.map(mark => /*#__PURE__*/(0,external_React_.createElement)(RangeMark, { + ...mark, + key: mark.key, + "aria-hidden": "true", + disabled: disabled + })) + }); } function useMarks({ marks, @@ -38205,7 +37278,7 @@ function useMarks({ const count = 1 + Math.round(range / step); while (count > marks.push({ value: step * marks.length + min - })); + })) {} } const placedMarks = []; marks.forEach((mark, index) => { @@ -38229,7 +37302,6 @@ function useMarks({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/tooltip.js - /** * External dependencies */ @@ -38244,6 +37316,7 @@ function useMarks({ * Internal dependencies */ + function SimpleTooltip(props) { const { className, @@ -38260,20 +37333,21 @@ function SimpleTooltip(props) { inputRef, tooltipPosition }); - const classes = classnames_default()('components-simple-tooltip', className); + const classes = dist_clsx('components-simple-tooltip', className); const styles = { ...style, zIndex }; - return (0,external_React_.createElement)(range_control_styles_Tooltip, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control_styles_Tooltip, { ...restProps, "aria-hidden": show, className: classes, position: position, show: show, role: "tooltip", - style: styles - }, renderTooltipContent(value)); + style: styles, + children: renderTooltipContent(value) + }); } function useTooltipPosition({ inputRef, @@ -38298,7 +37372,6 @@ function useTooltipPosition({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/index.js - /** * External dependencies */ @@ -38324,6 +37397,8 @@ function useTooltipPosition({ + + const range_control_noop = () => {}; function UnforwardedRangeControl(props, forwardedRef) { const { @@ -38386,8 +37461,8 @@ function UnforwardedRangeControl(props, forwardedRef) { const rangeFillValue = isValueReset ? (max - min) / 2 + min : value; const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100; const fillValueOffset = `${math_clamp(fillValue, 0, 100)}%`; - const classes = classnames_default()('components-range-control', className); - const wrapperClasses = classnames_default()('components-range-control__wrapper', !!marks && 'is-marked'); + const classes = dist_clsx('components-range-control', className); + const wrapperClasses = dist_clsx('components-range-control__wrapper', !!marks && 'is-marked'); const id = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control'); const describedBy = !!help ? `${id}__help` : undefined; const enableTooltip = hasTooltip !== false && Number.isFinite(value); @@ -38461,99 +37536,110 @@ function UnforwardedRangeControl(props, forwardedRef) { const offsetStyle = { [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset }; - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { __nextHasNoMarginBottom: __nextHasNoMarginBottom, className: classes, label: label, hideLabelFromVision: hideLabelFromVision, id: `${id}`, - help: help - }, (0,external_React_.createElement)(range_control_styles_Root, { - className: "components-range-control__root", - __next40pxDefaultSize: __next40pxDefaultSize - }, beforeIcon && (0,external_React_.createElement)(BeforeIconWrapper, null, (0,external_React_.createElement)(build_module_icon, { - icon: beforeIcon - })), (0,external_React_.createElement)(range_control_styles_Wrapper, { - __nextHasNoMarginBottom: __nextHasNoMarginBottom, - className: wrapperClasses, - color: colorProp, - marks: !!marks - }, (0,external_React_.createElement)(input_range, { - ...otherProps, - className: "components-range-control__slider", - describedBy: describedBy, - disabled: disabled, - id: `${id}`, - label: label, - max: max, - min: min, - onBlur: handleOnBlur, - onChange: handleOnRangeChange, - onFocus: handleOnFocus, - onMouseMove: onMouseMove, - onMouseLeave: onMouseLeave, - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]), - step: step, - value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined - }), (0,external_React_.createElement)(RangeRail, { - "aria-hidden": true, - disabled: disabled, - marks: marks, - max: max, - min: min, - railColor: railColor, - step: step, - value: rangeFillValue - }), (0,external_React_.createElement)(Track, { - "aria-hidden": true, - className: "components-range-control__track", - disabled: disabled, - style: { - width: fillValueOffset - }, - trackColor: trackColor - }), (0,external_React_.createElement)(ThumbWrapper, { - className: "components-range-control__thumb-wrapper", - style: offsetStyle, - disabled: disabled - }, (0,external_React_.createElement)(Thumb, { - "aria-hidden": true, - isFocused: isThumbFocused, - disabled: disabled - })), enableTooltip && (0,external_React_.createElement)(SimpleTooltip, { - className: "components-range-control__tooltip", - inputRef: inputRef, - tooltipPosition: "bottom", - renderTooltipContent: renderTooltipContent, - show: isCurrentlyFocused || showTooltip, - style: offsetStyle, - value: value - })), afterIcon && (0,external_React_.createElement)(AfterIconWrapper, null, (0,external_React_.createElement)(build_module_icon, { - icon: afterIcon - })), hasInputField && (0,external_React_.createElement)(InputNumber, { - "aria-label": label, - className: "components-range-control__number", - disabled: disabled, - inputMode: "decimal", - isShiftStepEnabled: isShiftStepEnabled, - max: max, - min: min, - onBlur: handleOnInputNumberBlur, - onChange: handleOnChange, - shiftStep: shiftStep, - size: __next40pxDefaultSize ? '__unstable-large' : 'default', - __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16), - step: step - // @ts-expect-error TODO: Investigate if the `null` value is necessary - , - value: inputSliderValue - }), allowReset && (0,external_React_.createElement)(ActionRightWrapper, null, (0,external_React_.createElement)(build_module_button, { - className: "components-range-control__reset", - disabled: disabled || value === undefined, - variant: "secondary", - size: "small", - onClick: handleOnReset - }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))); + help: help, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Root, { + className: "components-range-control__root", + __next40pxDefaultSize: __next40pxDefaultSize, + children: [beforeIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BeforeIconWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: beforeIcon + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Wrapper, { + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + className: wrapperClasses, + color: colorProp, + marks: !!marks, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_range, { + ...otherProps, + className: "components-range-control__slider", + describedBy: describedBy, + disabled: disabled, + id: `${id}`, + label: label, + max: max, + min: min, + onBlur: handleOnBlur, + onChange: handleOnRangeChange, + onFocus: handleOnFocus, + onMouseMove: onMouseMove, + onMouseLeave: onMouseLeave, + ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]), + step: step, + value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RangeRail, { + "aria-hidden": true, + disabled: disabled, + marks: marks, + max: max, + min: min, + railColor: railColor, + step: step, + value: rangeFillValue + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Track, { + "aria-hidden": true, + className: "components-range-control__track", + disabled: disabled, + style: { + width: fillValueOffset + }, + trackColor: trackColor + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ThumbWrapper, { + className: "components-range-control__thumb-wrapper", + style: offsetStyle, + disabled: disabled, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Thumb, { + "aria-hidden": true, + isFocused: isThumbFocused, + disabled: disabled + }) + }), enableTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SimpleTooltip, { + className: "components-range-control__tooltip", + inputRef: inputRef, + tooltipPosition: "bottom", + renderTooltipContent: renderTooltipContent, + show: isCurrentlyFocused || showTooltip, + style: offsetStyle, + value: value + })] + }), afterIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AfterIconWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: afterIcon + }) + }), hasInputField && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputNumber, { + "aria-label": label, + className: "components-range-control__number", + disabled: disabled, + inputMode: "decimal", + isShiftStepEnabled: isShiftStepEnabled, + max: max, + min: min, + onBlur: handleOnInputNumberBlur, + onChange: handleOnChange, + shiftStep: shiftStep, + size: __next40pxDefaultSize ? '__unstable-large' : 'default', + __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16), + step: step + // @ts-expect-error TODO: Investigate if the `null` value is necessary + , + value: inputSliderValue + }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ActionRightWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-range-control__reset", + disabled: disabled || value === undefined, + variant: "secondary", + size: "small", + onClick: handleOnReset, + children: (0,external_wp_i18n_namespaceObject.__)('Reset') + }) + })] + }) + }); } /** @@ -38599,13 +37685,12 @@ const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(Unforwar - const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { target: "ez9hsf47" -} : 0)(Container, "{width:", space(24), ";}" + ( true ? "" : 0)); +} : 0)("width:", space(24), ";" + ( true ? "" : 0)); const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? { target: "ez9hsf46" -} : 0)("margin-left:", space(-2), ";width:5em;select:not( :focus )~", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;}" + ( true ? "" : 0)); +} : 0)("margin-left:", space(-2), ";width:5em;" + ( true ? "" : 0)); const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? { target: "ez9hsf45" } : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0)); @@ -38616,7 +37701,7 @@ const interactiveHueStyles = ` width: calc( 100% - ${space(2)} ); margin-left: ${space(1)}; }`; -const AuxiliaryColorArtefactWrapper = emotion_styled_base_browser_esm("div", true ? { +const AuxiliaryColorArtefactWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ez9hsf44" } : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0)); const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { @@ -38625,7 +37710,7 @@ const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_brow const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { target: "ez9hsf42" } : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0)); -const ColorfulWrapper = emotion_styled_base_browser_esm("div", true ? { +const ColorfulWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ez9hsf41" } : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0)); const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { @@ -38633,23 +37718,23 @@ const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_but } : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy.js - /** * WordPress dependencies */ -const copy_copy = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const copy_copy = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - fillRule: "evenodd", - clipRule: "evenodd", - d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + fillRule: "evenodd", + clipRule: "evenodd", + d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z" + }) +}); /* harmony default export */ const library_copy = (copy_copy); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js - /** * WordPress dependencies */ @@ -38663,6 +37748,7 @@ const copy_copy = (0,external_React_.createElement)(external_wp_primitives_names */ + const ColorCopyButton = props => { const { color, @@ -38704,20 +37790,20 @@ const ColorCopyButton = props => { } }; }, []); - return (0,external_React_.createElement)(tooltip, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { delay: 0, hideOnClick: false, - text: copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy') - }, (0,external_React_.createElement)(CopyButton, { - size: "small", - ref: copyRef, - icon: library_copy, - showTooltip: false - })); + text: copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy'), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CopyButton, { + size: "small", + ref: copyRef, + icon: library_copy, + showTooltip: false + }) + }); }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js - /** * Internal dependencies */ @@ -38727,6 +37813,8 @@ const ColorCopyButton = props => { + + const InputWithSlider = ({ min, max, @@ -38746,40 +37834,41 @@ const InputWithSlider = ({ } onChange(newValue); }; - return (0,external_React_.createElement)(h_stack_component, { - spacing: 4 - }, (0,external_React_.createElement)(NumberControlWrapper, { - min: min, - max: max, - label: label, - hideLabelFromVision: true, - value: value, - onChange: onNumberControlChange, - prefix: (0,external_React_.createElement)(spacer_component, { - as: text_component, - paddingLeft: space(4), - color: COLORS.theme.accent, - lineHeight: 1 - }, abbreviation), - spinControls: "none", - size: "__unstable-large" - }), (0,external_React_.createElement)(styles_RangeControl, { - __nextHasNoMarginBottom: true, - label: label, - hideLabelFromVision: true, - min: min, - max: max, - value: value - // @ts-expect-error - // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185 - , - onChange: onChange, - withInputField: false - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + spacing: 4, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NumberControlWrapper, { + min: min, + max: max, + label: label, + hideLabelFromVision: true, + value: value, + onChange: onNumberControlChange, + prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + as: text_component, + paddingLeft: space(4), + color: COLORS.theme.accent, + lineHeight: 1, + children: abbreviation + }), + spinControls: "none", + size: "__unstable-large" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_RangeControl, { + __nextHasNoMarginBottom: true, + label: label, + hideLabelFromVision: true, + min: min, + max: max, + value: value + // @ts-expect-error + // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185 + , + onChange: onChange, + withInputField: false + })] + }); }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js - /** * External dependencies */ @@ -38789,6 +37878,9 @@ const InputWithSlider = ({ * Internal dependencies */ + + + const RgbInput = ({ color, onChange, @@ -38800,59 +37892,60 @@ const RgbInput = ({ b, a } = color.toRgb(); - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 255, - label: "Red", - abbreviation: "R", - value: r, - onChange: nextR => onChange(w({ - r: nextR, - g, - b, - a - })) - }), (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 255, - label: "Green", - abbreviation: "G", - value: g, - onChange: nextG => onChange(w({ - r, - g: nextG, - b, - a - })) - }), (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 255, - label: "Blue", - abbreviation: "B", - value: b, - onChange: nextB => onChange(w({ - r, - g, - b: nextB, - a - })) - }), enableAlpha && (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 100, - label: "Alpha", - abbreviation: "A", - value: Math.trunc(a * 100), - onChange: nextA => onChange(w({ - r, - g, - b, - a: nextA / 100 - })) - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 255, + label: "Red", + abbreviation: "R", + value: r, + onChange: nextR => onChange(w({ + r: nextR, + g, + b, + a + })) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 255, + label: "Green", + abbreviation: "G", + value: g, + onChange: nextG => onChange(w({ + r, + g: nextG, + b, + a + })) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 255, + label: "Blue", + abbreviation: "B", + value: b, + onChange: nextB => onChange(w({ + r, + g, + b: nextB, + a + })) + }), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 100, + label: "Alpha", + abbreviation: "A", + value: Math.trunc(a * 100), + onChange: nextA => onChange(w({ + r, + g, + b, + a: nextA / 100 + })) + })] + }); }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js - /** * External dependencies */ @@ -38867,6 +37960,9 @@ const RgbInput = ({ * Internal dependencies */ + + + const HslInput = ({ color, onChange, @@ -38907,55 +38003,56 @@ const HslInput = ({ })); } }; - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 359, - label: "Hue", - abbreviation: "H", - value: colorValue.h, - onChange: nextH => { - updateHSLAValue({ - h: nextH - }); - } - }), (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 100, - label: "Saturation", - abbreviation: "S", - value: colorValue.s, - onChange: nextS => { - updateHSLAValue({ - s: nextS - }); - } - }), (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 100, - label: "Lightness", - abbreviation: "L", - value: colorValue.l, - onChange: nextL => { - updateHSLAValue({ - l: nextL - }); - } - }), enableAlpha && (0,external_React_.createElement)(InputWithSlider, { - min: 0, - max: 100, - label: "Alpha", - abbreviation: "A", - value: Math.trunc(100 * colorValue.a), - onChange: nextA => { - updateHSLAValue({ - a: nextA / 100 - }); - } - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 359, + label: "Hue", + abbreviation: "H", + value: colorValue.h, + onChange: nextH => { + updateHSLAValue({ + h: nextH + }); + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 100, + label: "Saturation", + abbreviation: "S", + value: colorValue.s, + onChange: nextS => { + updateHSLAValue({ + s: nextS + }); + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 100, + label: "Lightness", + abbreviation: "L", + value: colorValue.l, + onChange: nextL => { + updateHSLAValue({ + l: nextL + }); + } + }), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, { + min: 0, + max: 100, + label: "Alpha", + abbreviation: "A", + value: Math.trunc(100 * colorValue.a), + onChange: nextA => { + updateHSLAValue({ + a: nextA / 100 + }); + } + })] + }); }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js - /** * External dependencies */ @@ -38974,13 +38071,16 @@ const HslInput = ({ + const HexInput = ({ color, onChange, enableAlpha }) => { const handleChange = nextValue => { - if (!nextValue) return; + if (!nextValue) { + return; + } const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue; onChange(w(hexValue)); }; @@ -38997,13 +38097,14 @@ const HexInput = ({ value }; }; - return (0,external_React_.createElement)(InputControl, { - prefix: (0,external_React_.createElement)(spacer_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputControl, { + prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { as: text_component, marginLeft: space(4), color: COLORS.theme.accent, - lineHeight: 1 - }, "#"), + lineHeight: 1, + children: "#" + }), value: color.toHex().slice(1).toUpperCase(), onChange: handleChange, maxLength: enableAlpha ? 9 : 7, @@ -39016,13 +38117,13 @@ const HexInput = ({ }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-input.js - /** * Internal dependencies */ + const ColorInput = ({ colorType, color, @@ -39036,27 +38137,26 @@ const ColorInput = ({ }; switch (colorType) { case 'hsl': - return (0,external_React_.createElement)(HslInput, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HslInput, { ...props }); case 'rgb': - return (0,external_React_.createElement)(RgbInput, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RgbInput, { ...props }); default: case 'hex': - return (0,external_React_.createElement)(HexInput, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HexInput, { ...props }); } }; ;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.mjs -function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},dist_O=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=dist_O,z=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:dist_O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))}; +function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},O=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=O,z=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))}; //# sourceMappingURL=index.module.js.map ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/picker.js - /** * External dependencies */ @@ -39071,99 +38171,39 @@ function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<argumen * Internal dependencies */ -/** - * Track the start and the end of drag pointer events related to controlling - * the picker's saturation / hue / alpha, and fire the corresponding callbacks. - * This is particularly useful to implement synergies like the one with the - * `Popover` component, where a pointer events "trap" is rendered while - * the user is dragging the pointer to avoid potential interference with iframe - * elements. - * - * @param props - * @param props.containerEl - * @param props.onDragStart - * @param props.onDragEnd - */ -const useOnPickerDrag = ({ - containerEl, - onDragStart, - onDragEnd -}) => { - const isDragging = (0,external_wp_element_namespaceObject.useRef)(false); - const leftWhileDragging = (0,external_wp_element_namespaceObject.useRef)(false); - (0,external_wp_element_namespaceObject.useEffect)(() => { - if (!containerEl || !onDragStart && !onDragEnd) { - return; - } - const interactiveElements = [containerEl.querySelector('.react-colorful__saturation'), containerEl.querySelector('.react-colorful__hue'), containerEl.querySelector('.react-colorful__alpha')].filter(el => !!el); - if (interactiveElements.length === 0) { - return; - } - const doc = containerEl.ownerDocument; - const onPointerUp = event => { - isDragging.current = false; - leftWhileDragging.current = false; - onDragEnd?.(event); - }; - const onPointerDown = event => { - isDragging.current = true; - onDragStart?.(event); - }; - const onPointerLeave = () => { - leftWhileDragging.current = isDragging.current; - }; - - // Try to detect if the user released the pointer while away from the - // current window. If the check is successfull, the dragEnd callback will - // called as soon as the pointer re-enters the window (better late than never) - const onPointerEnter = event => { - const noPointerButtonsArePressed = event.buttons === 0; - if (leftWhileDragging.current && noPointerButtonsArePressed) { - onPointerUp(event); - } - }; - - // The pointerdown event is added on the interactive elements, - // while the remaining events are added on the document object since - // the pointer wouldn't necessarily be hovering the initial interactive - // element at that point. - interactiveElements.forEach(el => el.addEventListener('pointerdown', onPointerDown)); - doc.addEventListener('pointerup', onPointerUp); - doc.addEventListener('pointerenter', onPointerEnter); - doc.addEventListener('pointerleave', onPointerLeave); - return () => { - interactiveElements.forEach(el => el.removeEventListener('pointerdown', onPointerDown)); - doc.removeEventListener('pointerup', onPointerUp); - doc.removeEventListener('pointerenter', onPointerEnter); - doc.removeEventListener('pointerleave', onPointerUp); - }; - }, [onDragStart, onDragEnd, containerEl]); -}; const Picker = ({ color, enableAlpha, - onChange, - onDragStart, - onDragEnd, - containerEl + onChange }) => { const Component = enableAlpha ? He : ye; const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]); - useOnPickerDrag({ - containerEl, - onDragStart, - onDragEnd - }); - return (0,external_React_.createElement)(Component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { color: rgbColor, onChange: nextColor => { onChange(w(nextColor)); } + // Pointer capture fortifies drag gestures so that they continue to + // work while dragging outside the component over objects like + // iframes. If a newer version of react-colorful begins to employ + // pointer capture this will be redundant and should be removed. + , + onPointerDown: ({ + currentTarget, + pointerId + }) => { + currentTarget.setPointerCapture(pointerId); + }, + onPointerUp: ({ + currentTarget, + pointerId + }) => { + currentTarget.releasePointerCapture(pointerId); + } }); }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/component.js - /** * External dependencies */ @@ -39187,6 +38227,8 @@ const Picker = ({ + + k([names]); const options = [{ label: 'RGB', @@ -39198,6 +38240,13 @@ const options = [{ label: 'Hex', value: 'hex' }]; + +// `isBorderless` is still experimental and not a public prop for InputControl yet. +const BORDERLESS_SELECT_CONTROL_CONTEXT = { + InputBase: { + isBorderless: true + } +}; const UnconnectedColorPicker = (props, forwardedRef) => { const { enableAlpha = false, @@ -39205,15 +38254,8 @@ const UnconnectedColorPicker = (props, forwardedRef) => { onChange, defaultValue = '#fff', copyFormat, - // Context - onPickerDragStart, - onPickerDragEnd, ...divProps } = useContextSystem(props, 'ColorPicker'); - const [containerEl, setContainerEl] = (0,external_wp_element_namespaceObject.useState)(null); - const containerRef = node => { - setContainerEl(node); - }; // Use a safe default value for the color and remove the possibility of `undefined`. const [color, setColor] = useControlledValue({ @@ -39229,37 +38271,42 @@ const UnconnectedColorPicker = (props, forwardedRef) => { debouncedSetColor(nextValue.toHex()); }, [debouncedSetColor]); const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex'); - return (0,external_React_.createElement)(ColorfulWrapper, { - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef]), - ...divProps - }, (0,external_React_.createElement)(Picker, { - containerEl: containerEl, - onChange: handleChange, - color: safeColordColor, - enableAlpha: enableAlpha, - onDragStart: onPickerDragStart, - onDragEnd: onPickerDragEnd - }), (0,external_React_.createElement)(AuxiliaryColorArtefactWrapper, null, (0,external_React_.createElement)(AuxiliaryColorArtefactHStackHeader, { - justify: "space-between" - }, (0,external_React_.createElement)(styles_SelectControl, { - __nextHasNoMarginBottom: true, - options: options, - value: colorType, - onChange: nextColorType => setColorType(nextColorType), - label: (0,external_wp_i18n_namespaceObject.__)('Color format'), - hideLabelFromVision: true - }), (0,external_React_.createElement)(ColorCopyButton, { - color: safeColordColor, - colorType: copyFormat || colorType - })), (0,external_React_.createElement)(ColorInputWrapper, { - direction: "column", - gap: 2 - }, (0,external_React_.createElement)(ColorInput, { - colorType: colorType, - color: safeColordColor, - onChange: handleChange, - enableAlpha: enableAlpha - })))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ColorfulWrapper, { + ref: forwardedRef, + ...divProps, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Picker, { + onChange: handleChange, + color: safeColordColor, + enableAlpha: enableAlpha + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(AuxiliaryColorArtefactHStackHeader, { + justify: "space-between", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { + value: BORDERLESS_SELECT_CONTROL_CONTEXT, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_SelectControl, { + __nextHasNoMarginBottom: true, + options: options, + value: colorType, + onChange: nextColorType => setColorType(nextColorType), + label: (0,external_wp_i18n_namespaceObject.__)('Color format'), + hideLabelFromVision: true + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorCopyButton, { + color: safeColordColor, + colorType: copyFormat || colorType + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInputWrapper, { + direction: "column", + gap: 2, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorInput, { + colorType: colorType, + color: safeColordColor, + onChange: handleChange, + enableAlpha: enableAlpha + }) + })] + })] + }); }; const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker'); /* harmony default export */ const color_picker_component = (ColorPicker); @@ -39284,9 +38331,15 @@ function isLegacyProps(props) { return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof props.color?.hex === 'string'; } function getColorFromLegacyProps(color) { - if (color === undefined) return; - if (typeof color === 'string') return color; - if (color.hex) return color.hex; + if (color === undefined) { + return; + } + if (typeof color === 'string') { + return color; + } + if (color.hex) { + return color.hex; + } return undefined; } const transformColorStringToLegacyColor = memize(color => { @@ -39327,14 +38380,14 @@ function use_deprecated_props_useDeprecatedProps(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js - /** * Internal dependencies */ + const LegacyAdapter = props => { - return (0,external_React_.createElement)(color_picker_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_picker_component, { ...use_deprecated_props_useDeprecatedProps(props) }); }; @@ -39352,21 +38405,21 @@ const LegacyAdapter = props => { const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({}); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js - /** * WordPress dependencies */ -const check = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const check = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" + }) +}); /* harmony default export */ const library_check = (check); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js - /** * External dependencies */ @@ -39385,12 +38438,14 @@ const check = (0,external_React_.createElement)(external_wp_primitives_namespace + + function UnforwardedOptionAsButton(props, forwardedRef) { const { isPressed, ...additionalProps } = props; - return (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { ...additionalProps, "aria-pressed": isPressed, ref: forwardedRef @@ -39408,8 +38463,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) { if (isSelected && !activeId) { compositeStore.setActiveId(id); } - return (0,external_React_.createElement)(CompositeItem, { - render: (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItem, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { ...additionalProps, role: "option", "aria-selected": !!isSelected, @@ -39437,26 +38492,27 @@ function Option({ className: 'components-circular-option-picker__option', ...additionalProps }; - const optionControl = compositeStore ? (0,external_React_.createElement)(OptionAsOption, { + const optionControl = compositeStore ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsOption, { ...commonProps, compositeStore: compositeStore, isSelected: isSelected - }) : (0,external_React_.createElement)(OptionAsButton, { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionAsButton, { ...commonProps, isPressed: isSelected }); - return (0,external_React_.createElement)("div", { - className: classnames_default()(className, 'components-circular-option-picker__option-wrapper') - }, tooltipText ? (0,external_React_.createElement)(tooltip, { - text: tooltipText - }, optionControl) : optionControl, isSelected && (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_check, - ...selectedIconProps - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: dist_clsx(className, 'components-circular-option-picker__option-wrapper'), + children: [tooltipText ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + text: tooltipText, + children: optionControl + }) : optionControl, isSelected && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_check, + ...selectedIconProps + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js - /** * External dependencies */ @@ -39472,15 +38528,15 @@ function OptionGroup({ ...additionalProps }) { const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined; - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ...additionalProps, role: role, - className: classnames_default()('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className) - }, options); + className: dist_clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className), + children: options + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js - /** * External dependencies */ @@ -39491,24 +38547,26 @@ function OptionGroup({ */ + function DropdownLinkAction({ buttonProps, className, dropdownProps, linkText }) { - return (0,external_React_.createElement)(dropdown, { - className: classnames_default()('components-circular-option-picker__dropdown-link-action', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { + className: dist_clsx('components-circular-option-picker__dropdown-link-action', className), renderToggle: ({ isOpen, onToggle - }) => (0,external_React_.createElement)(build_module_button, { + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { "aria-expanded": isOpen, "aria-haspopup": "true", onClick: onToggle, variant: "link", - ...buttonProps - }, linkText), + ...buttonProps, + children: linkText + }), ...dropdownProps }); } @@ -39517,15 +38575,15 @@ function ButtonAction({ children, ...additionalProps }) { - return (0,external_React_.createElement)(build_module_button, { - className: classnames_default()('components-circular-option-picker__clear', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: dist_clsx('components-circular-option-picker__clear', className), variant: "tertiary", - ...additionalProps - }, children); + ...additionalProps, + children: children + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js - /** * External dependencies */ @@ -39592,6 +38650,7 @@ function ButtonAction({ * ``` */ + function ListboxCircularOptionPicker(props) { const { actions, @@ -39610,16 +38669,19 @@ function ListboxCircularOptionPicker(props) { baseId, compositeStore }; - return (0,external_React_.createElement)("div", { - className: className - }, (0,external_React_.createElement)(CircularOptionPickerContext.Provider, { - value: compositeContext - }, (0,external_React_.createElement)(Composite, { - ...additionalProps, - id: baseId, - store: compositeStore, - role: 'listbox' - }, options), children, actions)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: className, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, { + value: compositeContext, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, { + ...additionalProps, + id: baseId, + store: compositeStore, + role: "listbox", + children: options + }), children, actions] + }) + }); } function ButtonsCircularOptionPicker(props) { const { @@ -39629,14 +38691,16 @@ function ButtonsCircularOptionPicker(props) { baseId, ...additionalProps } = props; - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ...additionalProps, - id: baseId - }, (0,external_React_.createElement)(CircularOptionPickerContext.Provider, { - value: { - baseId - } - }, options, children, actions)); + id: baseId, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(CircularOptionPickerContext.Provider, { + value: { + baseId + }, + children: [options, children, actions] + }) + }); } function CircularOptionPicker(props) { const { @@ -39649,19 +38713,22 @@ function CircularOptionPicker(props) { } = props; const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id); const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker; - const actions = actionsProp ? (0,external_React_.createElement)("div", { - className: "components-circular-option-picker__custom-clear-wrapper" - }, actionsProp) : undefined; - const options = (0,external_React_.createElement)("div", { - className: 'components-circular-option-picker__swatches' - }, optionsProp); - return (0,external_React_.createElement)(OptionPickerImplementation, { + const actions = actionsProp ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-circular-option-picker__custom-clear-wrapper", + children: actionsProp + }) : undefined; + const options = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-circular-option-picker__swatches", + children: optionsProp + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionPickerImplementation, { ...additionalProps, baseId: baseId, - className: classnames_default()('components-circular-option-picker', className), + className: dist_clsx('components-circular-option-picker', className), actions: actions, - options: options - }, children); + options: options, + children: children + }); } CircularOptionPicker.Option = Option; CircularOptionPicker.OptionGroup = OptionGroup; @@ -39702,7 +38769,6 @@ function useVStack(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/component.js - /** * External dependencies */ @@ -39714,9 +38780,10 @@ function useVStack(props) { + function UnconnectedVStack(props, forwardedRef) { const vStackProps = useVStack(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...vStackProps, ref: forwardedRef }); @@ -39749,7 +38816,6 @@ const VStack = contextConnect(UnconnectedVStack, 'VStack'); /* harmony default export */ const v_stack_component = (VStack); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/component.js - /** * External dependencies */ @@ -39761,9 +38827,10 @@ const VStack = contextConnect(UnconnectedVStack, 'VStack'); + function UnconnectedTruncate(props, forwardedRef) { const truncateProps = useTruncate(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { as: "span", ...truncateProps, ref: forwardedRef @@ -39833,7 +38900,6 @@ function useHeading(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/component.js - /** * External dependencies */ @@ -39845,9 +38911,10 @@ function useHeading(props) { + function UnconnectedHeading(props, forwardedRef) { const headerProps = useHeading(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...headerProps, ref: forwardedRef }); @@ -39898,19 +38965,20 @@ const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_compon const padding = ({ paddingSize = 'small' }) => { - if (paddingSize === 'none') return; + if (paddingSize === 'none') { + return; + } const paddingValues = { small: space(2), medium: space(4) }; return /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + ( true ? "" : 0), true ? "" : 0); }; -const DropdownContentWrapperDiv = emotion_styled_base_browser_esm("div", true ? { +const DropdownContentWrapperDiv = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eovvns30" } : 0)("margin-left:", space(-2), ";margin-right:", space(-2), ";&:first-of-type{margin-top:", space(-2), ";}&:last-of-type{margin-bottom:", space(-2), ";}", padding, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/dropdown-content-wrapper.js - /** * External dependencies */ @@ -39921,12 +38989,13 @@ const DropdownContentWrapperDiv = emotion_styled_base_browser_esm("div", true ? + function UnconnectedDropdownContentWrapper(props, forwardedRef) { const { paddingSize = 'small', ...derivedProps } = useContextSystem(props, 'DropdownContentWrapper'); - return (0,external_React_.createElement)(DropdownContentWrapperDiv, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownContentWrapperDiv, { ...derivedProps, paddingSize: paddingSize, ref: forwardedRef @@ -40033,7 +39102,6 @@ const normalizeColorValue = (value, element) => { }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/index.js - /** * External dependencies */ @@ -40061,6 +39129,8 @@ const normalizeColorValue = (value, element) => { + + k([names, a11y]); function SinglePalette({ className, @@ -40077,8 +39147,7 @@ function SinglePalette({ }, index) => { const colordColor = w(color); const isSelected = value === color; - return (0,external_React_.createElement)(build_module_circular_option_picker.Option, { - key: `${color}-${index}`, + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { isSelected: isSelected, selectedIconProps: isSelected ? { fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000' @@ -40096,10 +39165,10 @@ function SinglePalette({ (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00". (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color) - }); + }, `${color}-${index}`); }); }, [colors, value, onChange, clearColor]); - return (0,external_React_.createElement)(build_module_circular_option_picker.OptionGroup, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, { className: className, options: colorOptions, ...additionalProps @@ -40117,28 +39186,30 @@ function MultiplePalettes({ if (colors.length === 0) { return null; } - return (0,external_React_.createElement)(v_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { spacing: 3, - className: className - }, colors.map(({ - name, - colors: colorPalette - }, index) => { - const id = `${instanceId}-${index}`; - return (0,external_React_.createElement)(v_stack_component, { - spacing: 2, - key: index - }, (0,external_React_.createElement)(ColorHeading, { - id: id, - level: headingLevel - }, name), (0,external_React_.createElement)(SinglePalette, { - clearColor: clearColor, - colors: colorPalette, - onChange: newColor => onChange(newColor, index), - value: value, - "aria-labelledby": id - })); - })); + className: className, + children: colors.map(({ + name, + colors: colorPalette + }, index) => { + const id = `${instanceId}-${index}`; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + spacing: 2, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, { + id: id, + level: headingLevel, + children: name + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, { + clearColor: clearColor, + colors: colorPalette, + onChange: newColor => onChange(newColor, index), + value: value, + "aria-labelledby": id + })] + }, index); + }) + }); } function CustomColorPickerDropdown({ isRenderedInSidebar, @@ -40163,7 +39234,7 @@ function CustomColorPickerDropdown({ }), ...receivedPopoverProps }), [isRenderedInSidebar, receivedPopoverProps]); - return (0,external_React_.createElement)(dropdown, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { contentClassName: "components-color-palette__custom-color-dropdown-content", popoverProps: popoverProps, ...props @@ -40192,13 +39263,14 @@ function UnforwardedColorPalette(props, forwardedRef) { }, [value]); const hasMultipleColorOrigins = isMultiplePaletteArray(colors); const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]); - const renderCustomColorPicker = () => (0,external_React_.createElement)(dropdown_content_wrapper, { - paddingSize: "none" - }, (0,external_React_.createElement)(LegacyAdapter, { - color: normalizedColorValue, - onChange: color => onChange(color), - enableAlpha: enableAlpha - })); + const renderCustomColorPicker = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { + paddingSize: "none", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { + color: normalizedColorValue, + onChange: color => onChange(color), + enableAlpha: enableAlpha + }) + }); const isHex = value?.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. @@ -40211,9 +39283,10 @@ function UnforwardedColorPalette(props, forwardedRef) { onChange, value }; - const actions = !!clearable && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, { - onClick: clearColor - }, (0,external_wp_i18n_namespaceObject.__)('Clear')); + const actions = !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { + onClick: clearColor, + children: (0,external_wp_i18n_namespaceObject.__)('Clear') + }); let metaProps; if (asButtons) { metaProps = { @@ -40241,54 +39314,59 @@ function UnforwardedColorPalette(props, forwardedRef) { }; } } - return (0,external_React_.createElement)(v_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { spacing: 3, ref: forwardedRef, - ...additionalProps - }, !disableCustomColors && (0,external_React_.createElement)(CustomColorPickerDropdown, { - isRenderedInSidebar: __experimentalIsRenderedInSidebar, - renderContent: renderCustomColorPicker, - renderToggle: ({ - isOpen, - onToggle - }) => (0,external_React_.createElement)(v_stack_component, { - className: "components-color-palette__custom-color-wrapper", - spacing: 0 - }, (0,external_React_.createElement)("button", { - ref: customColorPaletteCallbackRef, - className: "components-color-palette__custom-color-button", - "aria-expanded": isOpen, - "aria-haspopup": "true", - onClick: onToggle, - "aria-label": customColorAccessibleLabel, - style: { - background: value - }, - type: "button" - }), (0,external_React_.createElement)(v_stack_component, { - className: "components-color-palette__custom-color-text-wrapper", - spacing: 0.5 - }, (0,external_React_.createElement)(truncate_component, { - className: "components-color-palette__custom-color-name" - }, value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected')), (0,external_React_.createElement)(truncate_component, { - className: classnames_default()('components-color-palette__custom-color-value', { - 'components-color-palette__custom-color-value--is-hex': isHex + ...additionalProps, + children: [!disableCustomColors && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, { + isRenderedInSidebar: __experimentalIsRenderedInSidebar, + renderContent: renderCustomColorPicker, + renderToggle: ({ + isOpen, + onToggle + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + className: "components-color-palette__custom-color-wrapper", + spacing: 0, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("button", { + ref: customColorPaletteCallbackRef, + className: "components-color-palette__custom-color-button", + "aria-expanded": isOpen, + "aria-haspopup": "true", + onClick: onToggle, + "aria-label": customColorAccessibleLabel, + style: { + background: value + }, + type: "button" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + className: "components-color-palette__custom-color-text-wrapper", + spacing: 0.5, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, { + className: "components-color-palette__custom-color-name", + children: value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(truncate_component, { + className: dist_clsx('components-color-palette__custom-color-value', { + 'components-color-palette__custom-color-value--is-hex': isHex + }), + children: displayValue + })] + })] }) - }, displayValue))) - }), (0,external_React_.createElement)(build_module_circular_option_picker, { - ...metaProps, - actions: actions, - options: hasMultipleColorOrigins ? (0,external_React_.createElement)(MultiplePalettes, { - ...paletteCommonProps, - headingLevel: headingLevel, - colors: colors, - value: value - }) : (0,external_React_.createElement)(SinglePalette, { - ...paletteCommonProps, - colors: colors, - value: value - }) - })); + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { + ...metaProps, + actions: actions, + options: hasMultipleColorOrigins ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiplePalettes, { + ...paletteCommonProps, + headingLevel: headingLevel, + colors: colors, + value: value + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SinglePalette, { + ...paletteCommonProps, + colors: colors, + value: value + }) + })] + }); } /** @@ -40350,7 +39428,7 @@ const baseUnitLabelStyles = ({ }; return sizes[selectSize]; }; -const UnitLabel = emotion_styled_base_browser_esm("div", true ? { +const UnitLabel = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1bagdl31" } : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0)); const unitSelectSizes = ({ @@ -40365,7 +39443,7 @@ const unitSelectSizes = ({ }; return sizes[selectSize]; }; -const UnitSelect = emotion_styled_base_browser_esm("select", true ? { +const UnitSelect = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? { target: "e1bagdl30" } : 0)("&&&{appearance:none;background:transparent;border-radius:2px;border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0)); @@ -40923,7 +40001,6 @@ function useBorderControlDropdown(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js - /** * External dependencies */ @@ -40949,6 +40026,9 @@ function useBorderControlDropdown(props) { + + + const getAriaLabelColorValue = colorValue => { // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. return colorValue.replace(/^var\((.+)\)$/, '$1'); @@ -41037,56 +40117,68 @@ const BorderControlDropdown = (props, forwardedRef) => { const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined; const renderToggle = ({ onToggle - }) => (0,external_React_.createElement)(build_module_button, { + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { onClick: onToggle, variant: "tertiary", "aria-label": toggleAriaLabel, tooltipPosition: dropdownPosition, label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'), showTooltip: true, - __next40pxDefaultSize: size === '__unstable-large' ? true : false - }, (0,external_React_.createElement)("span", { - className: indicatorWrapperClassName - }, (0,external_React_.createElement)(color_indicator, { - className: indicatorClassName, - colorValue: color - }))); + __next40pxDefaultSize: size === '__unstable-large' ? true : false, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: indicatorWrapperClassName, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { + className: indicatorClassName, + colorValue: color + }) + }) + }); const renderContent = ({ onClose - }) => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(dropdown_content_wrapper, { - paddingSize: "medium" - }, (0,external_React_.createElement)(v_stack_component, { - className: popoverControlsClassName, - spacing: 6 - }, showDropdownHeader ? (0,external_React_.createElement)(h_stack_component, null, (0,external_React_.createElement)(StyledLabel, null, (0,external_wp_i18n_namespaceObject.__)('Border color')), (0,external_React_.createElement)(build_module_button, { - size: "small", - label: (0,external_wp_i18n_namespaceObject.__)('Close border color'), - icon: close_small, - onClick: onClose - })) : undefined, (0,external_React_.createElement)(color_palette, { - className: popoverContentClassName, - value: color, - onChange: onColorChange, - colors, - disableCustomColors, - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - clearable: false, - enableAlpha: enableAlpha - }), enableStyle && isStyleSettable && (0,external_React_.createElement)(border_control_style_picker_component, { - label: (0,external_wp_i18n_namespaceObject.__)('Style'), - value: style, - onChange: onStyleChange - }))), showResetButton && (0,external_React_.createElement)(dropdown_content_wrapper, { - paddingSize: "none" - }, (0,external_React_.createElement)(build_module_button, { - className: resetButtonClassName, - variant: "tertiary", - onClick: () => { - onReset(); - onClose(); - } - }, (0,external_wp_i18n_namespaceObject.__)('Reset')))); - return (0,external_React_.createElement)(dropdown, { + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { + paddingSize: "medium", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + className: popoverControlsClassName, + spacing: 6, + children: [showDropdownHeader ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + children: (0,external_wp_i18n_namespaceObject.__)('Border color') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + size: "small", + label: (0,external_wp_i18n_namespaceObject.__)('Close border color'), + icon: close_small, + onClick: onClose + })] + }) : undefined, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { + className: popoverContentClassName, + value: color, + onChange: onColorChange, + colors, + disableCustomColors, + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + clearable: false, + enableAlpha: enableAlpha + }), enableStyle && isStyleSettable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_style_picker_component, { + label: (0,external_wp_i18n_namespaceObject.__)('Style'), + value: style, + onChange: onStyleChange + })] + }) + }), showResetButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { + paddingSize: "none", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: resetButtonClassName, + variant: "tertiary", + onClick: () => { + onReset(); + onClose(); + }, + children: (0,external_wp_i18n_namespaceObject.__)('Reset') + }) + })] + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { renderToggle: renderToggle, renderContent: renderContent, popoverProps: { @@ -41100,7 +40192,6 @@ const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'Bo /* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js - /** * External dependencies */ @@ -41116,6 +40207,7 @@ const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'Bo + function UnitSelectControl({ className, isUnitSelectTabbable: isTabbable = true, @@ -41126,10 +40218,11 @@ function UnitSelectControl({ ...props }, ref) { if (!hasUnits(units) || units?.length === 1) { - return (0,external_React_.createElement)(UnitLabel, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitLabel, { className: "components-unit-control__unit-label", - selectSize: size - }, unit); + selectSize: size, + children: unit + }); } const handleOnChange = event => { const { @@ -41141,24 +40234,24 @@ function UnitSelectControl({ data }); }; - const classes = classnames_default()('components-unit-control__select', className); - return (0,external_React_.createElement)(UnitSelect, { + const classes = dist_clsx('components-unit-control__select', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(UnitSelect, { ref: ref, className: classes, onChange: handleOnChange, selectSize: size, tabIndex: isTabbable ? undefined : -1, value: unit, - ...props - }, units.map(option => (0,external_React_.createElement)("option", { - value: option.value, - key: option.value - }, option.label))); + ...props, + children: units.map(option => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", { + value: option.value, + children: option.label + }, option.value)) + }); } /* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/index.js - /** * External dependencies */ @@ -41182,6 +40275,7 @@ function UnitSelectControl({ + function UnforwardedUnitControl(unitControlProps, forwardedRef) { const { __unstableStateReducer, @@ -41239,7 +40333,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) { setUnit(parsedUnit); } }, [parsedUnit, setUnit]); - const classes = classnames_default()('components-unit-control', + const classes = dist_clsx('components-unit-control', // This class is added for legacy purposes to maintain it on the outer // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139 'components-unit-control-wrapper', className); @@ -41275,11 +40369,13 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) { // Unless the meta key was pressed (to avoid interfering with // shortcuts, e.g. pastes), moves focus to the unit select if a key // matches the first character of a unit. - if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus(); + if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) { + refInputSuffix.current?.focus(); + } }; } const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null); - const inputSuffix = !disableUnits ? (0,external_React_.createElement)(unit_select_control, { + const inputSuffix = !disableUnits ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_select_control, { ref: refInputSuffix, "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'), disabled: disabled, @@ -41302,7 +40398,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) { const activeUnit = units.find(option => option.value === unit); step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1; } - return (0,external_React_.createElement)(ValueInput, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ValueInput, { ...props, autoComplete: autoComplete, className: classes, @@ -41475,7 +40571,6 @@ function useBorderControl(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js - /** * WordPress dependencies */ @@ -41493,6 +40588,8 @@ function useBorderControl(props) { + + const BorderLabel = props => { const { label, @@ -41501,11 +40598,13 @@ const BorderLabel = props => { if (!label) { return null; } - return hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, { - as: "legend" - }, label) : (0,external_React_.createElement)(StyledLabel, { - as: "legend" - }, label); + return hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "legend", + children: label + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + as: "legend", + children: label + }); }; const UnconnectedBorderControl = (props, forwardedRef) => { const { @@ -41536,54 +40635,56 @@ const UnconnectedBorderControl = (props, forwardedRef) => { __experimentalIsRenderedInSidebar, ...otherProps } = useBorderControl(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { as: "fieldset", ...otherProps, - ref: forwardedRef - }, (0,external_React_.createElement)(BorderLabel, { - label: label, - hideLabelFromVision: hideLabelFromVision - }), (0,external_React_.createElement)(h_stack_component, { - spacing: 4, - className: innerWrapperClassName - }, (0,external_React_.createElement)(unit_control, { - prefix: (0,external_React_.createElement)(border_control_dropdown_component, { - border: border, - colors: colors, - __unstablePopoverProps: __unstablePopoverProps, - disableCustomColors: disableCustomColors, - enableAlpha: enableAlpha, - enableStyle: enableStyle, - isStyleSettable: isStyleSettable, - onChange: onBorderChange, - previousStyleSelection: previousStyleSelection, - showDropdownHeader: showDropdownHeader, - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - size: size - }), - label: (0,external_wp_i18n_namespaceObject.__)('Border width'), - hideLabelFromVision: true, - min: 0, - onChange: onWidthChange, - value: border?.width || '', - placeholder: placeholder, - disableUnits: disableUnits, - __unstableInputWidth: inputWidth, - size: size - }), withSlider && (0,external_React_.createElement)(range_control, { - __nextHasNoMarginBottom: true, - label: (0,external_wp_i18n_namespaceObject.__)('Border width'), - hideLabelFromVision: true, - className: sliderClassName, - initialPosition: 0, - max: 100, - min: 0, - onChange: onSliderChange, - step: ['px', '%'].includes(widthUnit) ? 1 : 0.1, - value: widthValue || undefined, - withInputField: false, - __next40pxDefaultSize: __next40pxDefaultSize - }))); + ref: forwardedRef, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderLabel, { + label: label, + hideLabelFromVision: hideLabelFromVision + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + spacing: 4, + className: innerWrapperClassName, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, { + prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_dropdown_component, { + border: border, + colors: colors, + __unstablePopoverProps: __unstablePopoverProps, + disableCustomColors: disableCustomColors, + enableAlpha: enableAlpha, + enableStyle: enableStyle, + isStyleSettable: isStyleSettable, + onChange: onBorderChange, + previousStyleSelection: previousStyleSelection, + showDropdownHeader: showDropdownHeader, + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + size: size + }), + label: (0,external_wp_i18n_namespaceObject.__)('Border width'), + hideLabelFromVision: true, + min: 0, + onChange: onWidthChange, + value: border?.width || '', + placeholder: placeholder, + disableUnits: disableUnits, + __unstableInputWidth: inputWidth, + size: size + }), withSlider && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { + __nextHasNoMarginBottom: true, + label: (0,external_wp_i18n_namespaceObject.__)('Border width'), + hideLabelFromVision: true, + className: sliderClassName, + initialPosition: 0, + max: 100, + min: 0, + onChange: onSliderChange, + step: ['px', '%'].includes(widthUnit) ? 1 : 0.1, + value: widthValue || undefined, + withInputField: false, + __next40pxDefaultSize: __next40pxDefaultSize + })] + })] + }); }; /** @@ -41744,7 +40845,6 @@ function useGrid(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/component.js - /** * External dependencies */ @@ -41756,9 +40856,10 @@ function useGrid(props) { + function UnconnectedGrid(props, forwardedRef) { const gridProps = useGrid(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...gridProps, ref: forwardedRef }); @@ -41835,7 +40936,6 @@ function useBorderBoxControlSplitControls(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js - /** * WordPress dependencies */ @@ -41851,6 +40951,8 @@ function useBorderBoxControlSplitControls(props) { + + const BorderBoxControlSplitControls = (props, forwardedRef) => { const { centeredClassName, @@ -41889,45 +40991,46 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => { size }; const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); - return (0,external_React_.createElement)(grid_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, { ...otherProps, ref: mergedRef, - gap: 4 - }, (0,external_React_.createElement)(border_box_control_visualizer_component, { - value: value, - size: size - }), (0,external_React_.createElement)(border_control_component, { - className: centeredClassName, - hideLabelFromVision: true, - label: (0,external_wp_i18n_namespaceObject.__)('Top border'), - onChange: newBorder => onChange(newBorder, 'top'), - __unstablePopoverProps: popoverProps, - value: value?.top, - ...sharedBorderControlProps - }), (0,external_React_.createElement)(border_control_component, { - hideLabelFromVision: true, - label: (0,external_wp_i18n_namespaceObject.__)('Left border'), - onChange: newBorder => onChange(newBorder, 'left'), - __unstablePopoverProps: popoverProps, - value: value?.left, - ...sharedBorderControlProps - }), (0,external_React_.createElement)(border_control_component, { - className: rightAlignedClassName, - hideLabelFromVision: true, - label: (0,external_wp_i18n_namespaceObject.__)('Right border'), - onChange: newBorder => onChange(newBorder, 'right'), - __unstablePopoverProps: popoverProps, - value: value?.right, - ...sharedBorderControlProps - }), (0,external_React_.createElement)(border_control_component, { - className: centeredClassName, - hideLabelFromVision: true, - label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'), - onChange: newBorder => onChange(newBorder, 'bottom'), - __unstablePopoverProps: popoverProps, - value: value?.bottom, - ...sharedBorderControlProps - })); + gap: 4, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_visualizer_component, { + value: value, + size: size + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { + className: centeredClassName, + hideLabelFromVision: true, + label: (0,external_wp_i18n_namespaceObject.__)('Top border'), + onChange: newBorder => onChange(newBorder, 'top'), + __unstablePopoverProps: popoverProps, + value: value?.top, + ...sharedBorderControlProps + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { + hideLabelFromVision: true, + label: (0,external_wp_i18n_namespaceObject.__)('Left border'), + onChange: newBorder => onChange(newBorder, 'left'), + __unstablePopoverProps: popoverProps, + value: value?.left, + ...sharedBorderControlProps + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { + className: rightAlignedClassName, + hideLabelFromVision: true, + label: (0,external_wp_i18n_namespaceObject.__)('Right border'), + onChange: newBorder => onChange(newBorder, 'right'), + __unstablePopoverProps: popoverProps, + value: value?.right, + ...sharedBorderControlProps + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { + className: centeredClassName, + hideLabelFromVision: true, + label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'), + onChange: newBorder => onChange(newBorder, 'bottom'), + __unstablePopoverProps: popoverProps, + value: value?.bottom, + ...sharedBorderControlProps + })] + }); }; const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls'); /* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls); @@ -42233,7 +41336,6 @@ function useBorderBoxControl(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js - /** * WordPress dependencies */ @@ -42252,6 +41354,8 @@ function useBorderBoxControl(props) { + + const component_BorderLabel = props => { const { label, @@ -42260,9 +41364,12 @@ const component_BorderLabel = props => { if (!label) { return null; } - return hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, { - as: "label" - }, label) : (0,external_React_.createElement)(StyledLabel, null, label); + return hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "label", + children: label + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + children: label + }); }; const UnconnectedBorderBoxControl = (props, forwardedRef) => { const { @@ -42302,48 +41409,50 @@ const UnconnectedBorderBoxControl = (props, forwardedRef) => { shift: true } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]); const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { className: className, ...otherProps, - ref: mergedRef - }, (0,external_React_.createElement)(component_BorderLabel, { - label: label, - hideLabelFromVision: hideLabelFromVision - }), (0,external_React_.createElement)(component, { - className: wrapperClassName - }, isLinked ? (0,external_React_.createElement)(border_control_component, { - className: linkedControlClassName, - colors: colors, - disableUnits: disableUnits, - disableCustomColors: disableCustomColors, - enableAlpha: enableAlpha, - enableStyle: enableStyle, - onChange: onLinkedChange, - placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined, - __unstablePopoverProps: popoverProps, - shouldSanitizeBorder: false // This component will handle that. - , - value: linkedValue, - withSlider: true, - width: size === '__unstable-large' ? '116px' : '110px', - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - size: size - }) : (0,external_React_.createElement)(border_box_control_split_controls_component, { - colors: colors, - disableCustomColors: disableCustomColors, - enableAlpha: enableAlpha, - enableStyle: enableStyle, - onChange: onSplitChange, - popoverPlacement: popoverPlacement, - popoverOffset: popoverOffset, - value: splitValue, - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - size: size - }), (0,external_React_.createElement)(border_box_control_linked_button_component, { - onClick: toggleLinked, - isLinked: isLinked, - size: size - }))); + ref: mergedRef, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component_BorderLabel, { + label: label, + hideLabelFromVision: hideLabelFromVision + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { + className: wrapperClassName, + children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, { + className: linkedControlClassName, + colors: colors, + disableUnits: disableUnits, + disableCustomColors: disableCustomColors, + enableAlpha: enableAlpha, + enableStyle: enableStyle, + onChange: onLinkedChange, + placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined, + __unstablePopoverProps: popoverProps, + shouldSanitizeBorder: false // This component will handle that. + , + value: linkedValue, + withSlider: true, + width: size === '__unstable-large' ? '116px' : '110px', + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + size: size + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_split_controls_component, { + colors: colors, + disableCustomColors: disableCustomColors, + enableAlpha: enableAlpha, + enableStyle: enableStyle, + onChange: onSplitChange, + popoverPlacement: popoverPlacement, + popoverOffset: popoverOffset, + value: splitValue, + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + size: size + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_box_control_linked_button_component, { + onClick: toggleLinked, + isLinked: isLinked, + size: size + })] + })] + }); }; /** @@ -42405,13 +41514,13 @@ function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You * External dependencies */ -const box_control_icon_styles_Root = emotion_styled_base_browser_esm("span", true ? { +const box_control_icon_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1j5nr4z8" } : 0)( true ? { name: "1w884gc", styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px" } : 0); -const Viewbox = emotion_styled_base_browser_esm("span", true ? { +const Viewbox = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1j5nr4z7" } : 0)( true ? { name: "i6vjox", @@ -42425,7 +41534,7 @@ const strokeFocus = ({ opacity: isFocused ? 1 : 0.3 }, true ? "" : 0, true ? "" : 0); }; -const Stroke = emotion_styled_base_browser_esm("span", true ? { +const Stroke = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1j5nr4z6" } : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0)); const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { @@ -42466,12 +41575,13 @@ const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/icon.js - /** * Internal dependencies */ + + const BASE_ICON_SIZE = 24; function BoxControlIcon({ size = 24, @@ -42493,20 +41603,23 @@ function BoxControlIcon({ // Simulates SVG Icon scaling. const scale = size / BASE_ICON_SIZE; - return (0,external_React_.createElement)(box_control_icon_styles_Root, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(box_control_icon_styles_Root, { style: { transform: `scale(${scale})` }, - ...props - }, (0,external_React_.createElement)(Viewbox, null, (0,external_React_.createElement)(TopStroke, { - isFocused: top - }), (0,external_React_.createElement)(RightStroke, { - isFocused: right - }), (0,external_React_.createElement)(BottomStroke, { - isFocused: bottom - }), (0,external_React_.createElement)(LeftStroke, { - isFocused: left - }))); + ...props, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Viewbox, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TopStroke, { + isFocused: top + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RightStroke, { + isFocused: right + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BottomStroke, { + isFocused: bottom + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LeftStroke, { + isFocused: left + })] + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js @@ -42543,7 +41656,7 @@ const ResetButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_bu name: "tkya7b", styles: "grid-area:1/2;justify-self:end" } : 0); -const LinkedButtonWrapper = emotion_styled_base_browser_esm("div", true ? { +const LinkedButtonWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1jovhle2" } : 0)( true ? { name: "1dfa8al", @@ -42870,7 +41983,6 @@ function applyValueToSides(currentValues, newValue, sides) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/all-input-control.js - /** * WordPress dependencies */ @@ -42883,6 +41995,8 @@ function applyValueToSides(currentValues, newValue, sides) { + + const all_input_control_noop = () => {}; function AllInputControl({ __next40pxDefaultSize, @@ -42922,37 +42036,38 @@ function AllInputControl({ const newUnits = applyValueToSides(selectedUnits, unit, sides); setSelectedUnits(newUnits); }; - return (0,external_React_.createElement)(h_stack_component, null, (0,external_React_.createElement)(StyledUnitControl, { - ...props, - __next40pxDefaultSize: __next40pxDefaultSize, - className: "component-box-control__unit-control", - disableUnits: isMixed, - id: inputId, - isPressEnterToChange: true, - value: allValue, - onChange: onValueChange, - onUnitChange: handleOnUnitChange, - onFocus: handleOnFocus, - placeholder: allPlaceholder, - label: LABELS.all, - hideLabelFromVision: true - }), (0,external_React_.createElement)(FlexedRangeControl, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - "aria-controls": inputId, - label: LABELS.all, - hideLabelFromVision: true, - onChange: sliderOnChange, - min: 0, - max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, - step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, - value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, - withInputField: false - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, { + ...props, + __next40pxDefaultSize: __next40pxDefaultSize, + className: "component-box-control__unit-control", + disableUnits: isMixed, + id: inputId, + isPressEnterToChange: true, + value: allValue, + onChange: onValueChange, + onUnitChange: handleOnUnitChange, + onFocus: handleOnFocus, + placeholder: allPlaceholder, + label: LABELS.all, + hideLabelFromVision: true + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + "aria-controls": inputId, + label: LABELS.all, + hideLabelFromVision: true, + onChange: sliderOnChange, + min: 0, + max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, + step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, + value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, + withInputField: false + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js - /** * WordPress dependencies */ @@ -42964,6 +42079,9 @@ function AllInputControl({ + + + const input_controls_noop = () => {}; function BoxInputControls({ __next40pxDefaultSize, @@ -43027,52 +42145,54 @@ function BoxInputControls({ // Filter sides if custom configuration provided, maintaining default order. const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES; - return (0,external_React_.createElement)(external_React_.Fragment, null, filteredSides.map(side => { - var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2; - const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]); - const computedUnit = values[side] ? parsedUnit : selectedUnits[side]; - const inputId = [generatedId, side].join('-'); - return (0,external_React_.createElement)(InputWrapper, { - key: `box-control-${side}`, - expanded: true - }, (0,external_React_.createElement)(FlexedBoxControlIcon, { - side: side, - sides: sides - }), (0,external_React_.createElement)(tooltip, { - placement: "top-end", - text: LABELS[side] - }, (0,external_React_.createElement)(StyledUnitControl, { - ...props, - __next40pxDefaultSize: __next40pxDefaultSize, - className: "component-box-control__unit-control", - id: inputId, - isPressEnterToChange: true, - value: [parsedQuantity, computedUnit].join(''), - onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra), - onUnitChange: createHandleOnUnitChange(side), - onFocus: createHandleOnFocus(side), - label: LABELS[side], - hideLabelFromVision: true - })), (0,external_React_.createElement)(FlexedRangeControl, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - "aria-controls": inputId, - label: LABELS[side], - hideLabelFromVision: true, - onChange: newValue => { - handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined); - }, - min: 0, - max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, - step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, - value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, - withInputField: false - })); - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: filteredSides.map(side => { + var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2; + const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]); + const computedUnit = values[side] ? parsedUnit : selectedUnits[side]; + const inputId = [generatedId, side].join('-'); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, { + expanded: true, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, { + side: side, + sides: sides + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + placement: "top-end", + text: LABELS[side], + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, { + ...props, + __next40pxDefaultSize: __next40pxDefaultSize, + className: "component-box-control__unit-control", + id: inputId, + isPressEnterToChange: true, + value: [parsedQuantity, computedUnit].join(''), + onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra), + onUnitChange: createHandleOnUnitChange(side), + onFocus: createHandleOnFocus(side), + label: LABELS[side], + hideLabelFromVision: true + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + "aria-controls": inputId, + label: LABELS[side], + hideLabelFromVision: true, + onChange: newValue => { + handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined); + }, + min: 0, + max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, + step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, + value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, + withInputField: false + })] + }, `box-control-${side}`); + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js - /** * WordPress dependencies */ @@ -43084,6 +42204,10 @@ function BoxInputControls({ + + + + const groupedSides = ['vertical', 'horizontal']; function AxialInputControls({ __next40pxDefaultSize, @@ -43140,50 +42264,52 @@ function AxialInputControls({ // Filter sides if custom configuration provided, maintaining default order. const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides; - return (0,external_React_.createElement)(external_React_.Fragment, null, filteredSides.map(side => { - var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2; - const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left); - const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left; - const inputId = [generatedId, side].join('-'); - return (0,external_React_.createElement)(InputWrapper, { - key: side - }, (0,external_React_.createElement)(FlexedBoxControlIcon, { - side: side, - sides: sides - }), (0,external_React_.createElement)(tooltip, { - placement: "top-end", - text: LABELS[side] - }, (0,external_React_.createElement)(StyledUnitControl, { - ...props, - __next40pxDefaultSize: __next40pxDefaultSize, - className: "component-box-control__unit-control", - id: inputId, - isPressEnterToChange: true, - value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''), - onChange: newValue => handleOnValueChange(side, newValue), - onUnitChange: createHandleOnUnitChange(side), - onFocus: createHandleOnFocus(side), - label: LABELS[side], - hideLabelFromVision: true, - key: side - })), (0,external_React_.createElement)(FlexedRangeControl, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - "aria-controls": inputId, - label: LABELS[side], - hideLabelFromVision: true, - onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined), - min: 0, - max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, - step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, - value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, - withInputField: false - })); - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: filteredSides.map(side => { + var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2; + const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left); + const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left; + const inputId = [generatedId, side].join('-'); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, { + side: side, + sides: sides + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + placement: "top-end", + text: LABELS[side], + children: /*#__PURE__*/(0,external_React_.createElement)(StyledUnitControl, { + ...props, + __next40pxDefaultSize: __next40pxDefaultSize, + className: "component-box-control__unit-control", + id: inputId, + isPressEnterToChange: true, + value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''), + onChange: newValue => handleOnValueChange(side, newValue), + onUnitChange: createHandleOnUnitChange(side), + onFocus: createHandleOnFocus(side), + label: LABELS[side], + hideLabelFromVision: true, + key: side + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + "aria-controls": inputId, + label: LABELS[side], + hideLabelFromVision: true, + onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined), + min: 0, + max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10, + step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1, + value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0, + withInputField: false + })] + }, side); + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js - /** * WordPress dependencies */ @@ -43195,25 +42321,26 @@ function AxialInputControls({ */ + function LinkedButton({ isLinked, ...props }) { const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); - return (0,external_React_.createElement)(tooltip, { - text: label - }, (0,external_React_.createElement)(build_module_button, { - ...props, - className: "component-box-control__linked-button", - size: "small", - icon: isLinked ? library_link : link_off, - iconSize: 24, - "aria-label": label - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { + text: label, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + ...props, + className: "component-box-control__linked-button", + size: "small", + icon: isLinked ? library_link : link_off, + iconSize: 24, + "aria-label": label + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js - /** * WordPress dependencies */ @@ -43234,6 +42361,8 @@ function LinkedButton({ + + const defaultInputProps = { min: 0 }; @@ -43338,39 +42467,45 @@ function BoxControl({ onMouseOut, __next40pxDefaultSize }; - return (0,external_React_.createElement)(grid_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, { id: id, columns: 3, templateColumns: "1fr min-content min-content", role: "group", - "aria-labelledby": headingId - }, (0,external_React_.createElement)(BaseControl.VisualLabel, { - id: headingId - }, label), isLinked && (0,external_React_.createElement)(InputWrapper, null, (0,external_React_.createElement)(FlexedBoxControlIcon, { - side: side, - sides: sides - }), (0,external_React_.createElement)(AllInputControl, { - ...inputControlProps - })), !hasOneSide && (0,external_React_.createElement)(LinkedButtonWrapper, null, (0,external_React_.createElement)(LinkedButton, { - onClick: toggleLinked, - isLinked: isLinked - })), !isLinked && splitOnAxis && (0,external_React_.createElement)(AxialInputControls, { - ...inputControlProps - }), !isLinked && !splitOnAxis && (0,external_React_.createElement)(BoxInputControls, { - ...inputControlProps - }), allowReset && (0,external_React_.createElement)(ResetButton, { - className: "component-box-control__reset-button", - variant: "secondary", - size: "small", - onClick: handleOnReset, - disabled: !isDirty - }, (0,external_wp_i18n_namespaceObject.__)('Reset'))); + "aria-labelledby": headingId, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseControl.VisualLabel, { + id: headingId, + children: label + }), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, { + side: side, + sides: sides + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, { + ...inputControlProps + })] + }), !hasOneSide && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButtonWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, { + onClick: toggleLinked, + isLinked: isLinked + }) + }), !isLinked && splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, { + ...inputControlProps + }), !isLinked && !splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, { + ...inputControlProps + }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, { + className: "component-box-control__reset-button", + variant: "secondary", + size: "small", + onClick: handleOnReset, + disabled: !isDirty, + children: (0,external_wp_i18n_namespaceObject.__)('Reset') + })] + }); } /* harmony default export */ const box_control = (BoxControl); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button-group/index.js - /** * External dependencies */ @@ -43389,8 +42524,8 @@ function UnforwardedButtonGroup(props, ref) { className, ...restProps } = props; - const classes = classnames_default()('components-button-group', className); - return (0,external_React_.createElement)("div", { + const classes = dist_clsx('components-button-group', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ref: ref, role: "group", className: classes, @@ -43483,9 +42618,8 @@ function useElevation(props) { opacity: config_values.elevationIntensity, left: offset, right: offset, - top: offset, - transition - }, reduceMotion('transition'), true ? "" : 0, true ? "" : 0); + top: offset + }, /*#__PURE__*/emotion_react_browser_esm_css("@media not ( prefers-reduced-motion ){transition:", transition, ";}" + ( true ? "" : 0), true ? "" : 0), true ? "" : 0, true ? "" : 0); if (isValueDefined(hoverValue)) { sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0), true ? "" : 0); } @@ -43505,7 +42639,6 @@ function useElevation(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/component.js - /** * External dependencies */ @@ -43517,9 +42650,10 @@ function useElevation(props) { + function UnconnectedElevation(props, forwardedRef) { const elevationProps = useElevation(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...elevationProps, ref: forwardedRef }); @@ -43789,7 +42923,6 @@ function useCard(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/component.js - /** * External dependencies */ @@ -43810,6 +42943,8 @@ function useCard(props) { + + function UnconnectedCard(props, forwardedRef) { const { children, @@ -43835,22 +42970,25 @@ function UnconnectedCard(props, forwardedRef) { CardFooter: contextProps }; }, [isBorderless, size]); - return (0,external_React_.createElement)(ContextSystemProvider, { - value: contextProviderValue - }, (0,external_React_.createElement)(component, { - ...otherProps, - ref: forwardedRef - }, (0,external_React_.createElement)(component, { - className: cx(Content) - }, children), (0,external_React_.createElement)(elevation_component, { - className: elevationClassName, - isInteractive: false, - value: elevation ? 1 : 0 - }), (0,external_React_.createElement)(elevation_component, { - className: elevationClassName, - isInteractive: false, - value: elevation - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { + value: contextProviderValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(component, { + ...otherProps, + ref: forwardedRef, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + className: cx(Content), + children: children + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(elevation_component, { + className: elevationClassName, + isInteractive: false, + value: elevation ? 1 : 0 + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(elevation_component, { + className: elevationClassName, + isInteractive: false, + value: elevation + })] + }) + }); } /** @@ -43954,7 +43092,6 @@ function useScrollable(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/component.js - /** * External dependencies */ @@ -43966,9 +43103,10 @@ function useScrollable(props) { + function UnconnectedScrollable(props, forwardedRef) { const scrollableProps = useScrollable(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...scrollableProps, ref: forwardedRef }); @@ -44025,7 +43163,6 @@ function useCardBody(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/component.js - /** * External dependencies */ @@ -44038,18 +43175,19 @@ function useCardBody(props) { + function UnconnectedCardBody(props, forwardedRef) { const { isScrollable, ...otherProps } = useCardBody(props); if (isScrollable) { - return (0,external_React_.createElement)(scrollable_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(scrollable_component, { ...otherProps, ref: forwardedRef }); } - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...otherProps, ref: forwardedRef }); @@ -44155,23 +43293,28 @@ const renderSize = ({ height: orientation === 'vertical' ? 'auto' : 0, width: orientation === 'vertical' ? 0 : 'auto' }, true ? "" : 0, true ? "" : 0); -const DividerView = emotion_styled_base_browser_esm("hr", true ? { +const DividerView = /*#__PURE__*/emotion_styled_base_browser_esm("hr", true ? { target: "e19on6iw0" } : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/component.js - /** * External dependencies */ // eslint-disable-next-line no-restricted-imports +/** + * Internal dependencies + */ + + + function UnconnectedDivider(props, forwardedRef) { const contextProps = useContextSystem(props, 'Divider'); - return (0,external_React_.createElement)(Separator, { - render: (0,external_React_.createElement)(DividerView, null), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Separator, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DividerView, {}), ...contextProps, ref: forwardedRef }); @@ -44230,7 +43373,6 @@ function useCardDivider(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/component.js - /** * External dependencies */ @@ -44242,9 +43384,10 @@ function useCardDivider(props) { + function UnconnectedCardDivider(props, forwardedRef) { const dividerProps = useCardDivider(props); - return (0,external_React_.createElement)(divider_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(divider_component, { ...dividerProps, ref: forwardedRef }); @@ -44301,7 +43444,6 @@ function useCardFooter(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/component.js - /** * External dependencies */ @@ -44313,9 +43455,10 @@ function useCardFooter(props) { + function UnconnectedCardFooter(props, forwardedRef) { const footerProps = useCardFooter(props); - return (0,external_React_.createElement)(flex_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, { ...footerProps, ref: forwardedRef }); @@ -44368,7 +43511,6 @@ function useCardHeader(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/component.js - /** * External dependencies */ @@ -44380,9 +43522,10 @@ function useCardHeader(props) { + function UnconnectedCardHeader(props, forwardedRef) { const headerProps = useCardHeader(props); - return (0,external_React_.createElement)(flex_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_component, { ...headerProps, ref: forwardedRef }); @@ -44432,7 +43575,6 @@ function useCardMedia(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/component.js - /** * External dependencies */ @@ -44444,9 +43586,10 @@ function useCardMedia(props) { + function UnconnectedCardMedia(props, forwardedRef) { const cardMediaProps = useCardMedia(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...cardMediaProps, ref: forwardedRef }); @@ -44474,7 +43617,6 @@ const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia'); /* harmony default export */ const card_media_component = (CardMedia); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/checkbox-control/index.js - /** * External dependencies */ @@ -44491,6 +43633,9 @@ const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia'); * Internal dependencies */ + + + /** * Checkboxes allow the user to select one or more items from a set. * @@ -44547,41 +43692,51 @@ function CheckboxControl(props) { }, [checked, indeterminate]); const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp); const onChangeValue = event => onChange(event.target.checked); - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { __nextHasNoMarginBottom: __nextHasNoMarginBottom, label: heading, id: id, - help: help, - className: classnames_default()('components-checkbox-control', className) - }, (0,external_React_.createElement)("span", { - className: "components-checkbox-control__input-container" - }, (0,external_React_.createElement)("input", { - ref: ref, - id: id, - className: "components-checkbox-control__input", - type: "checkbox", - value: "1", - onChange: onChangeValue, - checked: checked, - "aria-describedby": !!help ? id + '__help' : undefined, - ...additionalProps - }), showIndeterminateIcon ? (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_reset, - className: "components-checkbox-control__indeterminate", - role: "presentation" - }) : null, showCheckedIcon ? (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_check, - className: "components-checkbox-control__checked", - role: "presentation" - }) : null), label && (0,external_React_.createElement)("label", { - className: "components-checkbox-control__label", - htmlFor: id - }, label)); + help: help && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-checkbox-control__help", + children: help + }), + className: dist_clsx('components-checkbox-control', className), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + spacing: 0, + justify: "start", + alignment: "top", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { + className: "components-checkbox-control__input-container", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { + ref: ref, + id: id, + className: "components-checkbox-control__input", + type: "checkbox", + value: "1", + onChange: onChangeValue, + checked: checked, + "aria-describedby": !!help ? id + '__help' : undefined, + ...additionalProps + }), showIndeterminateIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_reset, + className: "components-checkbox-control__indeterminate", + role: "presentation" + }) : null, showCheckedIcon ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_check, + className: "components-checkbox-control__checked", + role: "presentation" + }) : null] + }), label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", { + className: "components-checkbox-control__label", + htmlFor: id, + children: label + })] + }) + }); } /* harmony default export */ const checkbox_control = (CheckboxControl); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/clipboard-button/index.js - /** * External dependencies */ @@ -44598,6 +43753,7 @@ function CheckboxControl(props) { * Internal dependencies */ + const TIMEOUT = 4000; function ClipboardButton({ className, @@ -44626,7 +43782,7 @@ function ClipboardButton({ clearTimeout(timeoutId.current); } }, []); - const classes = classnames_default()('components-clipboard-button', className); + const classes = dist_clsx('components-clipboard-button', className); // Workaround for inconsistent behavior in Safari, where <textarea> is not // the document.activeElement at the moment when the copy event fires. @@ -44637,26 +43793,28 @@ function ClipboardButton({ // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated. event.target.focus(); }; - return (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { ...buttonProps, className: classes, ref: ref, - onCopy: focusOnCopyEventTarget - }, children); + onCopy: focusOnCopyEventTarget, + children: children + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js - /** * WordPress dependencies */ -const moreVertical = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const moreVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" + }) +}); /* harmony default export */ const more_vertical = (moreVertical); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/styles.js @@ -44752,7 +43910,6 @@ const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({ const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js - /** * External dependencies */ @@ -44765,6 +43922,7 @@ const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useCont + function UnconnectedItemGroup(props, forwardedRef) { const { isBordered, @@ -44781,12 +43939,13 @@ function UnconnectedItemGroup(props, forwardedRef) { spacedAround, size }; - return (0,external_React_.createElement)(ItemGroupContext.Provider, { - value: contextValue - }, (0,external_React_.createElement)(component, { - ...otherProps, - ref: forwardedRef - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemGroupContext.Provider, { + value: contextValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + ...otherProps, + ref: forwardedRef + }) + }); } /** @@ -44979,7 +44138,6 @@ function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElemen } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js - /** * External dependencies */ @@ -45005,6 +44163,9 @@ function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElemen + + + function ControlPointButton({ isOpen, position, @@ -45013,20 +44174,23 @@ function ControlPointButton({ }) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton); const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`; - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(build_module_button, { - "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151). - (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color), - "aria-describedby": descriptionId, - "aria-haspopup": "true", - "aria-expanded": isOpen, - className: classnames_default()('components-custom-gradient-picker__control-point-button', { - 'is-active': isOpen - }), - ...additionalProps - }), (0,external_React_.createElement)(visually_hidden_component, { - id: descriptionId - }, (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151). + (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color), + "aria-describedby": descriptionId, + "aria-haspopup": "true", + "aria-expanded": isOpen, + className: dist_clsx('components-custom-gradient-picker__control-point-button', { + 'is-active': isOpen + }), + ...additionalProps + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + id: descriptionId, + children: (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.') + })] + }); } function GradientColorPickerDropdown({ isRenderedInSidebar, @@ -45042,8 +44206,8 @@ function GradientColorPickerDropdown({ // popover edge. resize: false }), []); - const mergedClassName = classnames_default()('components-custom-gradient-picker__control-point-dropdown', className); - return (0,external_React_.createElement)(CustomColorPickerDropdown, { + const mergedClassName = dist_clsx('components-custom-gradient-picker__control-point-dropdown', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, { isRenderedInSidebar: isRenderedInSidebar, popoverProps: popoverProps, className: mergedClassName, @@ -45096,84 +44260,87 @@ function ControlPoints({ cleanEventListenersRef.current?.(); }; }, []); - return (0,external_React_.createElement)(external_React_.Fragment, null, controlPoints.map((point, index) => { - const initialPosition = point?.position; - return ignoreMarkerPosition !== initialPosition && (0,external_React_.createElement)(GradientColorPickerDropdown, { - isRenderedInSidebar: __experimentalIsRenderedInSidebar, - key: index, - onClose: onStopControlPointChange, - renderToggle: ({ - isOpen, - onToggle - }) => (0,external_React_.createElement)(ControlPointButton, { - key: index, - onClick: () => { - if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) { - return; - } - if (isOpen) { - onStopControlPointChange(); - } else { - onStartControlPointChange(); - } - onToggle(); - }, - onMouseDown: () => { - if (window && window.addEventListener) { - controlPointMoveState.current = { - initialPosition, - index, - significantMoveHappened: false, - listenersActivated: true - }; - onStartControlPointChange(); - window.addEventListener('mousemove', onMouseMove); - window.addEventListener('mouseup', cleanEventListeners); - } - }, - onKeyDown: event => { - if (event.code === 'ArrowLeft') { - // Stop propagation of the key press event to avoid focus moving - // to another editor area. - event.stopPropagation(); - onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION))); - } else if (event.code === 'ArrowRight') { - // Stop propagation of the key press event to avoid focus moving - // to another editor area. - event.stopPropagation(); - onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION))); - } - }, - isOpen: isOpen, - position: point.position, - color: point.color - }), - renderContent: ({ - onClose - }) => (0,external_React_.createElement)(dropdown_content_wrapper, { - paddingSize: "none" - }, (0,external_React_.createElement)(LegacyAdapter, { - enableAlpha: !disableAlpha, - color: point.color, - onChange: color => { - onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString())); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: controlPoints.map((point, index) => { + const initialPosition = point?.position; + return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, { + isRenderedInSidebar: __experimentalIsRenderedInSidebar, + onClose: onStopControlPointChange, + renderToggle: ({ + isOpen, + onToggle + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ControlPointButton, { + onClick: () => { + if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) { + return; + } + if (isOpen) { + onStopControlPointChange(); + } else { + onStartControlPointChange(); + } + onToggle(); + }, + onMouseDown: () => { + if (window && window.addEventListener) { + controlPointMoveState.current = { + initialPosition, + index, + significantMoveHappened: false, + listenersActivated: true + }; + onStartControlPointChange(); + window.addEventListener('mousemove', onMouseMove); + window.addEventListener('mouseup', cleanEventListeners); + } + }, + onKeyDown: event => { + if (event.code === 'ArrowLeft') { + // Stop propagation of the key press event to avoid focus moving + // to another editor area. + event.stopPropagation(); + onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION))); + } else if (event.code === 'ArrowRight') { + // Stop propagation of the key press event to avoid focus moving + // to another editor area. + event.stopPropagation(); + onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION))); + } + }, + isOpen: isOpen, + position: point.position, + color: point.color + }, index), + renderContent: ({ + onClose + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, { + paddingSize: "none", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { + enableAlpha: !disableAlpha, + color: point.color, + onChange: color => { + onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString())); + } + }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, { + className: "components-custom-gradient-picker__remove-control-point-wrapper", + alignment: "center", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + onClick: () => { + onChange(removeControlPoint(controlPoints, index)); + onClose(); + }, + variant: "link", + children: (0,external_wp_i18n_namespaceObject.__)('Remove Control Point') + }) + })] + }), + style: { + left: `${point.position}%`, + transform: 'translateX( -50% )' } - }), !disableRemove && controlPoints.length > 2 && (0,external_React_.createElement)(h_stack_component, { - className: "components-custom-gradient-picker__remove-control-point-wrapper", - alignment: "center" - }, (0,external_React_.createElement)(build_module_button, { - onClick: () => { - onChange(removeControlPoint(controlPoints, index)); - onClose(); - }, - variant: "link" - }, (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')))), - style: { - left: `${point.position}%`, - transform: 'translateX( -50% )' - } - }); - })); + }, index); + }) + }); } function InsertPoint({ value: controlPoints, @@ -45185,7 +44352,7 @@ function InsertPoint({ __experimentalIsRenderedInSidebar }) { const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false); - return (0,external_React_.createElement)(GradientColorPickerDropdown, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, { isRenderedInSidebar: __experimentalIsRenderedInSidebar, className: "components-custom-gradient-picker__inserter", onClose: () => { @@ -45194,7 +44361,7 @@ function InsertPoint({ renderToggle: ({ isOpen, onToggle - }) => (0,external_React_.createElement)(build_module_button, { + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { "aria-expanded": isOpen, "aria-haspopup": "true", onClick: () => { @@ -45209,19 +44376,20 @@ function InsertPoint({ className: "components-custom-gradient-picker__insert-point-dropdown", icon: library_plus }), - renderContent: () => (0,external_React_.createElement)(dropdown_content_wrapper, { - paddingSize: "none" - }, (0,external_React_.createElement)(LegacyAdapter, { - enableAlpha: !disableAlpha, - onChange: color => { - if (!alreadyInsertedPoint) { - onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString())); - setAlreadyInsertedPoint(true); - } else { - onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString())); + renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, { + paddingSize: "none", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { + enableAlpha: !disableAlpha, + onChange: color => { + if (!alreadyInsertedPoint) { + onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString())); + setAlreadyInsertedPoint(true); + } else { + onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString())); + } } - } - })), + }) + }), style: insertPosition !== null ? { left: `${insertPosition}%`, transform: 'translateX( -50% )' @@ -45232,7 +44400,6 @@ ControlPoints.InsertPoint = InsertPoint; /* harmony default export */ const control_points = (ControlPoints); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js - /** * External dependencies */ @@ -45249,6 +44416,8 @@ ControlPoints.InsertPoint = InsertPoint; + + const customGradientBarReducer = (state, action) => { switch (action.type) { case 'MOVE_INSERTER': @@ -45343,57 +44512,59 @@ function CustomGradientBar({ }; const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER'; const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT'; - return (0,external_React_.createElement)("div", { - className: classnames_default()('components-custom-gradient-picker__gradient-bar', { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: dist_clsx('components-custom-gradient-picker__gradient-bar', { 'has-gradient': hasGradient }), onMouseEnter: onMouseEnterAndMove, onMouseMove: onMouseEnterAndMove, - onMouseLeave: onMouseLeave - }, (0,external_React_.createElement)("div", { - className: "components-custom-gradient-picker__gradient-bar-background", - style: { - background, - opacity: hasGradient ? 1 : 0.4 - } - }), (0,external_React_.createElement)("div", { - ref: gradientMarkersContainerDomRef, - className: "components-custom-gradient-picker__markers-container" - }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0,external_React_.createElement)(control_points.InsertPoint, { - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - disableAlpha: disableAlpha, - insertPosition: gradientBarState.insertPosition, - value: controlPoints, - onChange: onChange, - onOpenInserter: () => { - gradientBarStateDispatch({ - type: 'OPEN_INSERTER' - }); - }, - onCloseInserter: () => { - gradientBarStateDispatch({ - type: 'CLOSE_INSERTER' - }); - } - }), (0,external_React_.createElement)(control_points, { - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - disableAlpha: disableAlpha, - disableRemove: disableInserter, - gradientPickerDomRef: gradientMarkersContainerDomRef, - ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined, - value: controlPoints, - onChange: onChange, - onStartControlPointChange: () => { - gradientBarStateDispatch({ - type: 'START_CONTROL_CHANGE' - }); - }, - onStopControlPointChange: () => { - gradientBarStateDispatch({ - type: 'STOP_CONTROL_CHANGE' - }); - } - }))); + onMouseLeave: onMouseLeave, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-custom-gradient-picker__gradient-bar-background", + style: { + background, + opacity: hasGradient ? 1 : 0.4 + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + ref: gradientMarkersContainerDomRef, + className: "components-custom-gradient-picker__markers-container", + children: [!disableInserter && (isMovingInserter || isInsertingControlPoint) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points.InsertPoint, { + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + disableAlpha: disableAlpha, + insertPosition: gradientBarState.insertPosition, + value: controlPoints, + onChange: onChange, + onOpenInserter: () => { + gradientBarStateDispatch({ + type: 'OPEN_INSERTER' + }); + }, + onCloseInserter: () => { + gradientBarStateDispatch({ + type: 'CLOSE_INSERTER' + }); + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control_points, { + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + disableAlpha: disableAlpha, + disableRemove: disableInserter, + gradientPickerDomRef: gradientMarkersContainerDomRef, + ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined, + value: controlPoints, + onChange: onChange, + onStartControlPointChange: () => { + gradientBarStateDispatch({ + type: 'START_CONTROL_CHANGE' + }); + }, + onStopControlPointChange: () => { + gradientBarStateDispatch({ + type: 'STOP_CONTROL_CHANGE' + }); + } + })] + })] + }); } // EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js @@ -45615,7 +44786,6 @@ const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js - /** * External dependencies */ @@ -45637,6 +44807,8 @@ const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block + + const GradientAnglePicker = ({ gradientAST, hasGradient, @@ -45653,7 +44825,7 @@ const GradientAnglePicker = ({ } })); }; - return (0,external_React_.createElement)(angle_picker_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(angle_picker_control, { onChange: onAngleChange, value: hasGradient ? angle : '' }); @@ -45691,7 +44863,7 @@ const GradientTypePicker = ({ onSetRadialGradient(); } }; - return (0,external_React_.createElement)(select_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { __nextHasNoMarginBottom: true, className: "components-custom-gradient-picker__type-picker", label: (0,external_wp_i18n_namespaceObject.__)('Type'), @@ -45750,34 +44922,39 @@ function CustomGradientPicker({ position: parseInt(colorStop.length.value) }; }); - return (0,external_React_.createElement)(v_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { spacing: 4, - className: "components-custom-gradient-picker" - }, (0,external_React_.createElement)(CustomGradientBar, { - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - background: background, - hasGradient: hasGradient, - value: controlPoints, - onChange: newControlPoints => { - onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints))); - } - }), (0,external_React_.createElement)(flex_component, { - gap: 3, - className: "components-custom-gradient-picker__ui-line" - }, (0,external_React_.createElement)(SelectWrapper, null, (0,external_React_.createElement)(GradientTypePicker, { - gradientAST: gradientAST, - hasGradient: hasGradient, - onChange: onChange - })), (0,external_React_.createElement)(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0,external_React_.createElement)(GradientAnglePicker, { - gradientAST: gradientAST, - hasGradient: hasGradient, - onChange: onChange - })))); + className: "components-custom-gradient-picker", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, { + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + background: background, + hasGradient: hasGradient, + value: controlPoints, + onChange: newControlPoints => { + onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints))); + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { + gap: 3, + className: "components-custom-gradient-picker__ui-line", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientTypePicker, { + gradientAST: gradientAST, + hasGradient: hasGradient, + onChange: onChange + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AccessoryWrapper, { + children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientAnglePicker, { + gradientAST: gradientAST, + hasGradient: hasGradient, + onChange: onChange + }) + })] + })] + }); } /* harmony default export */ const custom_gradient_picker = (CustomGradientPicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/gradient-picker/index.js - /** * WordPress dependencies */ @@ -45792,6 +44969,8 @@ function CustomGradientPicker({ + + // The Multiple Origin Gradients have a `gradients` property (an array of // gradient objects), while Single Origin ones have a `gradient` property. const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj); @@ -45811,8 +44990,7 @@ function SingleOrigin({ gradient, name, slug - }, index) => (0,external_React_.createElement)(build_module_circular_option_picker.Option, { - key: slug, + }, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { value: gradient, isSelected: value === gradient, tooltipText: name || @@ -45828,9 +45006,9 @@ function SingleOrigin({ (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient) - })); + }, slug)); }, [gradients, value, onChange, clearGradient]); - return (0,external_React_.createElement)(build_module_circular_option_picker.OptionGroup, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.OptionGroup, { className: className, options: gradientOptions, ...additionalProps @@ -45845,28 +45023,30 @@ function MultipleOrigin({ headingLevel }) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin); - return (0,external_React_.createElement)(v_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { spacing: 3, - className: className - }, gradients.map(({ - name, - gradients: gradientSet - }, index) => { - const id = `color-palette-${instanceId}-${index}`; - return (0,external_React_.createElement)(v_stack_component, { - spacing: 2, - key: index - }, (0,external_React_.createElement)(ColorHeading, { - level: headingLevel, - id: id - }, name), (0,external_React_.createElement)(SingleOrigin, { - clearGradient: clearGradient, - gradients: gradientSet, - onChange: gradient => onChange(gradient, index), - value: value, - "aria-labelledby": id - })); - })); + className: className, + children: gradients.map(({ + name, + gradients: gradientSet + }, index) => { + const id = `color-palette-${instanceId}-${index}`; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + spacing: 2, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorHeading, { + level: headingLevel, + id: id, + children: name + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, { + clearGradient: clearGradient, + gradients: gradientSet, + onChange: gradient => onChange(gradient, index), + value: value, + "aria-labelledby": id + })] + }, index); + }) + }); } function gradient_picker_Component(props) { const { @@ -45878,10 +45058,10 @@ function gradient_picker_Component(props) { 'aria-labelledby': ariaLabelledby, ...additionalProps } = props; - const options = isMultipleOriginArray(props.gradients) ? (0,external_React_.createElement)(MultipleOrigin, { + const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultipleOrigin, { headingLevel: headingLevel, ...additionalProps - }) : (0,external_React_.createElement)(SingleOrigin, { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleOrigin, { ...additionalProps }); let metaProps; @@ -45911,7 +45091,7 @@ function gradient_picker_Component(props) { }; } } - return (0,external_React_.createElement)(build_module_circular_option_picker, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { ...metaProps, actions: actions, options: options @@ -45972,45 +45152,47 @@ function GradientPicker({ ...additionalProps }) { const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]); - return (0,external_React_.createElement)(v_stack_component, { - spacing: gradients.length ? 4 : 0 - }, !disableCustomGradients && (0,external_React_.createElement)(custom_gradient_picker, { - __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, - value: value, - onChange: onChange - }), (gradients.length > 0 || clearable) && (0,external_React_.createElement)(gradient_picker_Component, { - ...additionalProps, - className: className, - clearGradient: clearGradient, - gradients: gradients, - onChange: onChange, - value: value, - actions: clearable && !disableCustomGradients && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, { - onClick: clearGradient - }, (0,external_wp_i18n_namespaceObject.__)('Clear')), - headingLevel: headingLevel - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + spacing: gradients.length ? 4 : 0, + children: [!disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, { + __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, + value: value, + onChange: onChange + }), (gradients.length > 0 || clearable) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker_Component, { + ...additionalProps, + className: className, + clearGradient: clearGradient, + gradients: gradients, + onChange: onChange, + value: value, + actions: clearable && !disableCustomGradients && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { + onClick: clearGradient, + children: (0,external_wp_i18n_namespaceObject.__)('Clear') + }), + headingLevel: headingLevel + })] + }); } /* harmony default export */ const gradient_picker = (GradientPicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/menu.js - /** * WordPress dependencies */ -const menu = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const menu = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" + }) +}); /* harmony default export */ const library_menu = (menu); ;// CONCATENATED MODULE: external ["wp","dom"] const external_wp_dom_namespaceObject = window["wp"]["dom"]; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/container.js - /** * External dependencies */ @@ -46164,14 +45346,15 @@ class NavigableContainer extends external_wp_element_namespaceObject.Component { forwardedRef, ...restProps } = this.props; - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ref: this.bindContainer, - ...restProps - }, children); + ...restProps, + children: children + }); } } const forwardedNavigableContainer = (props, ref) => { - return (0,external_React_.createElement)(NavigableContainer, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigableContainer, { ...props, forwardedRef: ref }); @@ -46180,7 +45363,6 @@ forwardedNavigableContainer.displayName = 'NavigableContainer'; /* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/menu.js - /** * External dependencies */ @@ -46194,6 +45376,7 @@ forwardedNavigableContainer.displayName = 'NavigableContainer'; * Internal dependencies */ + function UnforwardedNavigableMenu({ role = 'menu', orientation = 'vertical', @@ -46225,7 +45408,7 @@ function UnforwardedNavigableMenu({ } return undefined; }; - return (0,external_React_.createElement)(container, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(container, { ref: ref, stopNavigationEvents: true, onlyBrowserTabstops: false, @@ -46265,7 +45448,6 @@ const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(Unforwa /* harmony default export */ const navigable_container_menu = (NavigableMenu); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js - /** * External dependencies */ @@ -46283,13 +45465,15 @@ const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(Unforwa + + function dropdown_menu_mergeProps(defaultProps = {}, props = {}) { const mergedProps = { ...defaultProps, ...props }; if (props.className && defaultProps.className) { - mergedProps.className = classnames_default()(props.className, defaultProps.className); + mergedProps.className = dist_clsx(props.className, defaultProps.className); } return mergedProps; } @@ -46335,7 +45519,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) { className: 'components-dropdown-menu__popover', variant }, popoverProps); - return (0,external_React_.createElement)(dropdown, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown, { className: className, popoverProps: mergedPopoverProps, renderToggle: ({ @@ -46357,11 +45541,11 @@ function UnconnectedDropdownMenu(dropdownMenuProps) { ...restToggleProps } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {}; const mergedToggleProps = dropdown_menu_mergeProps({ - className: classnames_default()('components-dropdown-menu__toggle', { + className: dist_clsx('components-dropdown-menu__toggle', { 'is-opened': isOpen }) }, restToggleProps); - return (0,external_React_.createElement)(Toggle, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Toggle, { ...mergedToggleProps, icon: icon, onClick: event => { @@ -46380,39 +45564,41 @@ function UnconnectedDropdownMenu(dropdownMenuProps) { "aria-expanded": isOpen, label: label, text: text, - showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true - }, mergedToggleProps.children); + showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true, + children: mergedToggleProps.children + }); }, renderContent: props => { const mergedMenuProps = dropdown_menu_mergeProps({ 'aria-label': label, - className: classnames_default()('components-dropdown-menu__menu', { + className: dist_clsx('components-dropdown-menu__menu', { 'no-icons': noIcons }) }, menuProps); - return (0,external_React_.createElement)(navigable_container_menu, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, { ...mergedMenuProps, - role: "menu" - }, dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_React_.createElement)(build_module_button, { - key: [indexOfSet, indexOfControl].join(), - onClick: event => { - event.stopPropagation(); - props.onClose(); - if (control.onClick) { - control.onClick(); - } - }, - className: classnames_default()('components-dropdown-menu__menu-item', { - 'has-separator': indexOfSet > 0 && indexOfControl === 0, - 'is-active': control.isActive, - 'is-icon-only': !control.title - }), - icon: control.icon, - label: control.label, - "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined, - role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem', - disabled: control.isDisabled - }, control.title)))); + role: "menu", + children: [dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + onClick: event => { + event.stopPropagation(); + props.onClose(); + if (control.onClick) { + control.onClick(); + } + }, + className: dist_clsx('components-dropdown-menu__menu-item', { + 'has-separator': indexOfSet > 0 && indexOfControl === 0, + 'is-active': control.isActive, + 'is-icon-only': !control.title + }), + icon: control.icon, + label: control.label, + "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined, + role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem', + disabled: control.isDisabled, + children: control.title + }, [indexOfSet, indexOfControl].join())))] + }); }, open: open, defaultOpen: defaultOpen, @@ -46523,7 +45709,6 @@ function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have - const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(color_indicator, true ? { target: "e1lpqc909" } : 0)("&&{flex-shrink:0;width:", space(6), ";height:", space(6), ";}" + ( true ? "" : 0)); @@ -46541,7 +45726,7 @@ const buttonStyleReset = ({ const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { target: "e1lpqc907" } : 0)(buttonStyleReset, " padding-block:3px;padding-inline-start:", space(3), ";border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;font-size:", font('default.fontSize'), ";&:focus-visible{border-color:transparent;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";&+&{border-top-left-radius:0;border-top-right-radius:0;}&:last-child{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); -const NameContainer = emotion_styled_base_browser_esm("div", true ? { +const NameContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1lpqc906" } : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;" + ( true ? "" : 0)); const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { @@ -46550,9 +45735,9 @@ const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_comp const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { target: "e1lpqc904" } : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0)); -const PaletteHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { +const PaletteEditContents = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { target: "e1lpqc903" -} : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0)); +} : 0)("margin-top:", space(2), ";" + ( true ? "" : 0)); const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { target: "e1lpqc902" } : 0)( true ? { @@ -46567,7 +45752,6 @@ const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_b } : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js - /** * External dependencies */ @@ -46599,13 +45783,16 @@ const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_b + + + const DEFAULT_COLOR = '#000'; function NameInput({ value, onChange, label }) { - return (0,external_React_.createElement)(NameInputControl, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInputControl, { label: label, hideLabelFromVision: true, value: value, @@ -46614,7 +45801,7 @@ function NameInput({ } /** - * Returns a name for a palette item in the format "Color + id". + * Returns a name and slug for a palette item. The name takes the format "Color + id". * To ensure there are no duplicate ids, this function checks all slugs. * It expects slugs to be in the format: slugPrefix + color- + number. * It then sets the id component of the new name based on the incremented id of the highest existing slug id. @@ -46622,9 +45809,9 @@ function NameInput({ * @param elements An array of color palette items. * @param slugPrefix The slug prefix used to match the element slug. * - * @return A unique name for a palette item. + * @return A name and slug for the new palette item. */ -function getNameForPosition(elements, slugPrefix) { +function getNameAndSlugForPosition(elements, slugPrefix) { const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`); const position = elements.reduce((previousValue, currentValue) => { if (typeof currentValue?.slug === 'string') { @@ -46638,8 +45825,11 @@ function getNameForPosition(elements, slugPrefix) { } return previousValue; }, 1); - return (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */ - (0,external_wp_i18n_namespaceObject.__)('Color %s'), position); + return { + name: (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */ + (0,external_wp_i18n_namespaceObject.__)('Color %s'), position), + slug: `${slugPrefix}color-${position}` + }; } function ColorPickerPopover({ isGradient, @@ -46657,47 +45847,46 @@ function ColorPickerPopover({ resize: false, placement: 'left-start', ...receivedPopoverProps, - className: classnames_default()('components-palette-edit__popover', receivedPopoverProps?.className) + className: dist_clsx('components-palette-edit__popover', receivedPopoverProps?.className) }), [receivedPopoverProps]); - return (0,external_React_.createElement)(popover, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(popover, { ...popoverProps, - onClose: onClose - }, !isGradient && (0,external_React_.createElement)(LegacyAdapter, { - color: element.color, - enableAlpha: true, - onChange: newColor => { - onChange({ - ...element, - color: newColor - }); - } - }), isGradient && (0,external_React_.createElement)("div", { - className: "components-palette-edit__popover-gradient-picker" - }, (0,external_React_.createElement)(custom_gradient_picker, { - __experimentalIsRenderedInSidebar: true, - value: element.gradient, - onChange: newGradient => { - onChange({ - ...element, - gradient: newGradient - }); - } - }))); + onClose: onClose, + children: [!isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, { + color: element.color, + enableAlpha: true, + onChange: newColor => { + onChange({ + ...element, + color: newColor + }); + } + }), isGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-palette-edit__popover-gradient-picker", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(custom_gradient_picker, { + __experimentalIsRenderedInSidebar: true, + value: element.gradient, + onChange: newGradient => { + onChange({ + ...element, + gradient: newGradient + }); + } + }) + })] + }); } function palette_edit_Option({ canOnlyChangeValues, element, onChange, - isEditing, - onStartEditing, onRemove, - onStopEditing, popoverProps: receivedPopoverProps, slugPrefix, isGradient }) { - const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onStopEditing); const value = isGradient ? element.gradient : element.color; + const [isEditingColor, setIsEditingColor] = (0,external_wp_element_namespaceObject.useState)(false); // Use internal state instead of a ref to make sure that the component // re-renders when the popover's anchor updates. @@ -46707,51 +45896,64 @@ function palette_edit_Option({ // Use the custom palette color item as the popover anchor. anchor: popoverAnchor }), [popoverAnchor, receivedPopoverProps]); - return (0,external_React_.createElement)(PaletteItem, { - className: isEditing ? 'is-selected' : undefined, - as: isEditing ? 'div' : 'button', - onClick: onStartEditing, - "aria-label": isEditing ? undefined : (0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s is a color or gradient name, e.g. "Red". - (0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteItem, { ref: setPopoverAnchor, - ...(isEditing ? { - ...focusOutsideProps - } : {}) - }, (0,external_React_.createElement)(h_stack_component, { - justify: "flex-start" - }, (0,external_React_.createElement)(IndicatorStyled, { - colorValue: value - }), (0,external_React_.createElement)(flex_item_component, null, isEditing && !canOnlyChangeValues ? (0,external_React_.createElement)(NameInput, { - label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'), - value: element.name, - onChange: nextName => onChange({ - ...element, - name: nextName, - slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '') - }) - }) : (0,external_React_.createElement)(NameContainer, null, element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */ - '\u00A0')), isEditing && !canOnlyChangeValues && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(RemoveButton, { - size: "small", - icon: line_solid, - label: (0,external_wp_i18n_namespaceObject.__)('Remove color'), - onClick: onRemove - }))), isEditing && (0,external_React_.createElement)(ColorPickerPopover, { - isGradient: isGradient, - onChange: onChange, - element: element, - popoverProps: popoverProps - })); + as: "div", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + justify: "flex-start", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + onClick: () => { + setIsEditingColor(true); + }, + "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s is a color or gradient name, e.g. "Red". + (0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value), + style: { + padding: 0 + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(IndicatorStyled, { + colorValue: value + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + children: !canOnlyChangeValues ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameInput, { + label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'), + value: element.name, + onChange: nextName => onChange({ + ...element, + name: nextName, + slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '') + }) + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NameContainer, { + children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */ + '\u00A0' + }) + }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RemoveButton, { + size: "small", + icon: line_solid, + label: (0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s is a color or gradient name, e.g. "Red". + (0,external_wp_i18n_namespaceObject.__)('Remove color: %s'), element.name.trim().length ? element.name : value), + onClick: onRemove + }) + })] + }), isEditingColor && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, { + isGradient: isGradient, + onChange: onChange, + element: element, + popoverProps: popoverProps, + onClose: () => setIsEditingColor(false) + })] + }); } function PaletteEditListView({ elements, onChange, - editingElement, - setEditingElement, canOnlyChangeValues, slugPrefix, isGradient, - popoverProps + popoverProps, + addColorRef }) { // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. const elementsReference = (0,external_wp_element_namespaceObject.useRef)(); @@ -46759,47 +45961,37 @@ function PaletteEditListView({ elementsReference.current = elements; }, [elements]); const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100); - return (0,external_React_.createElement)(v_stack_component, { - spacing: 3 - }, (0,external_React_.createElement)(item_group_component, { - isRounded: true - }, elements.map((element, index) => (0,external_React_.createElement)(palette_edit_Option, { - isGradient: isGradient, - canOnlyChangeValues: canOnlyChangeValues, - key: index, - element: element, - onStartEditing: () => { - if (editingElement !== index) { - setEditingElement(index); - } - }, - onChange: newElement => { - debounceOnChange(elements.map((currentElement, currentIndex) => { - if (currentIndex === index) { - return newElement; - } - return currentElement; - })); - }, - onRemove: () => { - setEditingElement(null); - const newElements = elements.filter((_currentElement, currentIndex) => { - if (currentIndex === index) { - return false; - } - return true; - }); - onChange(newElements.length ? newElements : undefined); - }, - isEditing: index === editingElement, - onStopEditing: () => { - if (index === editingElement) { - setEditingElement(null); - } - }, - slugPrefix: slugPrefix, - popoverProps: popoverProps - })))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { + spacing: 3, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(item_group_component, { + isRounded: true, + children: elements.map((element, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(palette_edit_Option, { + isGradient: isGradient, + canOnlyChangeValues: canOnlyChangeValues, + element: element, + onChange: newElement => { + debounceOnChange(elements.map((currentElement, currentIndex) => { + if (currentIndex === index) { + return newElement; + } + return currentElement; + })); + }, + onRemove: () => { + const newElements = elements.filter((_currentElement, currentIndex) => { + if (currentIndex === index) { + return false; + } + return true; + }); + onChange(newElements.length ? newElements : undefined); + addColorRef.current?.focus(); + }, + slugPrefix: slugPrefix, + popoverProps: popoverProps + }, index)) + }) + }); } const EMPTY_ARRAY = []; @@ -46853,107 +46045,130 @@ function PaletteEdit({ setIsEditing(true); } }, [isGradient, elements]); - return (0,external_React_.createElement)(PaletteEditStyles, null, (0,external_React_.createElement)(PaletteHStackHeader, null, (0,external_React_.createElement)(PaletteHeading, { - level: paletteLabelHeadingLevel - }, paletteLabel), (0,external_React_.createElement)(PaletteActionsContainer, null, hasElements && isEditing && (0,external_React_.createElement)(DoneButton, { - size: "small", - onClick: () => { - setIsEditing(false); - setEditingElement(null); - } - }, (0,external_wp_i18n_namespaceObject.__)('Done')), !canOnlyChangeValues && (0,external_React_.createElement)(build_module_button, { - size: "small", - isPressed: isAdding, - icon: library_plus, - label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'), - onClick: () => { - const optionName = getNameForPosition(elements, slugPrefix); - if (!!gradients) { - onChange([...gradients, { - gradient: DEFAULT_GRADIENT, - name: optionName, - slug: slugPrefix + kebabCase(optionName) - }]); - } else { - onChange([...colors, { - color: DEFAULT_COLOR, - name: optionName, - slug: slugPrefix + kebabCase(optionName) - }]); - } - setIsEditing(true); - setEditingElement(elements.length); - } - }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0,external_React_.createElement)(dropdown_menu, { - icon: more_vertical, - label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'), - toggleProps: { - isSmall: true - } - }, ({ - onClose - }) => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(navigable_container_menu, { - role: "menu" - }, !isEditing && (0,external_React_.createElement)(build_module_button, { - variant: "tertiary", - onClick: () => { - setIsEditing(true); - onClose(); - }, - className: "components-palette-edit__menu-button" - }, (0,external_wp_i18n_namespaceObject.__)('Show details')), !canOnlyChangeValues && (0,external_React_.createElement)(build_module_button, { - variant: "tertiary", - onClick: () => { - setEditingElement(null); - setIsEditing(false); - onChange(); - onClose(); - }, - className: "components-palette-edit__menu-button" - }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')), canReset && (0,external_React_.createElement)(build_module_button, { - variant: "tertiary", - onClick: () => { - setEditingElement(null); - onChange(); - onClose(); - } - }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors'))))))), hasElements && (0,external_React_.createElement)(external_React_.Fragment, null, isEditing && (0,external_React_.createElement)(PaletteEditListView, { - canOnlyChangeValues: canOnlyChangeValues, - elements: elements - // @ts-expect-error TODO: Don't know how to resolve - , - onChange: onChange, - editingElement: editingElement, - setEditingElement: setEditingElement, - slugPrefix: slugPrefix, - isGradient: isGradient, - popoverProps: popoverProps - }), !isEditing && editingElement !== null && (0,external_React_.createElement)(ColorPickerPopover, { - isGradient: isGradient, - onClose: () => setEditingElement(null), - onChange: newElement => { - debounceOnChange( - // @ts-expect-error TODO: Don't know how to resolve - elements.map((currentElement, currentIndex) => { - if (currentIndex === editingElement) { - return newElement; - } - return currentElement; - })); - }, - element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1], - popoverProps: popoverProps - }), !isEditing && (isGradient ? (0,external_React_.createElement)(gradient_picker, { - gradients: gradients, - onChange: onSelectPaletteItem, - clearable: false, - disableCustomGradients: true - }) : (0,external_React_.createElement)(color_palette, { - colors: colors, - onChange: onSelectPaletteItem, - clearable: false, - disableCustomColors: true - }))), !hasElements && emptyMessage); + const addColorRef = (0,external_wp_element_namespaceObject.useRef)(null); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditStyles, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteHeading, { + level: paletteLabelHeadingLevel, + children: paletteLabel + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteActionsContainer, { + children: [hasElements && isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DoneButton, { + size: "small", + onClick: () => { + setIsEditing(false); + setEditingElement(null); + }, + children: (0,external_wp_i18n_namespaceObject.__)('Done') + }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + ref: addColorRef, + size: "small", + isPressed: isAdding, + icon: library_plus, + label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'), + onClick: () => { + const { + name, + slug + } = getNameAndSlugForPosition(elements, slugPrefix); + if (!!gradients) { + onChange([...gradients, { + gradient: DEFAULT_GRADIENT, + name, + slug + }]); + } else { + onChange([...colors, { + color: DEFAULT_COLOR, + name, + slug + }]); + } + setIsEditing(true); + setEditingElement(elements.length); + } + }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { + icon: more_vertical, + label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'), + toggleProps: { + size: 'small' + }, + children: ({ + onClose + }) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(navigable_container_menu, { + role: "menu", + children: [!isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + variant: "tertiary", + onClick: () => { + setIsEditing(true); + onClose(); + }, + className: "components-palette-edit__menu-button", + children: (0,external_wp_i18n_namespaceObject.__)('Show details') + }), !canOnlyChangeValues && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + variant: "tertiary", + onClick: () => { + setEditingElement(null); + setIsEditing(false); + onChange(); + onClose(); + }, + className: "components-palette-edit__menu-button", + children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors') + }), canReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + variant: "tertiary", + onClick: () => { + setEditingElement(null); + onChange(); + onClose(); + }, + children: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors') + })] + }) + }) + })] + })] + }), hasElements && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(PaletteEditContents, { + children: [isEditing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditListView, { + canOnlyChangeValues: canOnlyChangeValues, + elements: elements + // @ts-expect-error TODO: Don't know how to resolve + , + onChange: onChange, + slugPrefix: slugPrefix, + isGradient: isGradient, + popoverProps: popoverProps, + addColorRef: addColorRef + }), !isEditing && editingElement !== null && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorPickerPopover, { + isGradient: isGradient, + onClose: () => setEditingElement(null), + onChange: newElement => { + debounceOnChange( + // @ts-expect-error TODO: Don't know how to resolve + elements.map((currentElement, currentIndex) => { + if (currentIndex === editingElement) { + return newElement; + } + return currentElement; + })); + }, + element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1], + popoverProps: popoverProps + }), !isEditing && (isGradient ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(gradient_picker, { + gradients: gradients, + onChange: onSelectPaletteItem, + clearable: false, + disableCustomGradients: true + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { + colors: colors, + onChange: onSelectPaletteItem, + clearable: false, + disableCustomColors: true + }))] + }), !hasElements && emptyMessage && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PaletteEditContents, { + children: emptyMessage + })] + }); } /* harmony default export */ const palette_edit = (PaletteEdit); @@ -46978,7 +46193,6 @@ const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_compo } : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js - /** * External dependencies */ @@ -47021,7 +46235,7 @@ function UnForwardedTokenInput(props, ref) { setHasFocus(false); onBlur?.(e); }; - return (0,external_React_.createElement)("input", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { ref: ref, id: `components-form-token-input-${instanceId}`, type: "text", @@ -47031,7 +46245,7 @@ function UnForwardedTokenInput(props, ref) { onFocus: onFocusHandler, onBlur: onBlurHandler, size: size, - className: classnames_default()(className, 'components-form-token-field__input'), + className: dist_clsx(className, 'components-form-token-field__input'), autoComplete: "off", role: "combobox", "aria-expanded": isExpanded, @@ -47049,26 +46263,21 @@ function UnForwardedTokenInput(props, ref) { const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput); /* harmony default export */ const token_input = (TokenInput); -// EXTERNAL MODULE: ./node_modules/dom-scroll-into-view/lib/index.js -var lib = __webpack_require__(5428); -var lib_default = /*#__PURE__*/__webpack_require__.n(lib); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js - /** * External dependencies */ - /** * WordPress dependencies */ - /** * Internal dependencies */ + const handleMouseDown = e => { // By preventing default here, we will not lose focus of <input> when clicking a suggestion. e.preventDefault(); @@ -47084,18 +46293,15 @@ function SuggestionsList({ instanceId, __experimentalRenderItem }) { - const [scrollingIntoView, setScrollingIntoView] = (0,external_wp_element_namespaceObject.useState)(false); const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => { // only have to worry about scrolling selected suggestion into view // when already expanded. let rafId; if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) { - setScrollingIntoView(true); - lib_default()(listNode.children[selectedIndex], listNode, { - onlyScrollIfNeeded: true - }); - rafId = requestAnimationFrame(() => { - setScrollingIntoView(false); + listNode.children[selectedIndex].scrollIntoView({ + behavior: 'instant', + block: 'nearest', + inline: 'nearest' }); } return () => { @@ -47106,9 +46312,7 @@ function SuggestionsList({ }, [selectedIndex, scrollIntoView]); const handleHover = suggestion => { return () => { - if (!scrollingIntoView) { - onHover?.(suggestion); - } + onHover?.(suggestion); }; }; const handleClick = suggestion => { @@ -47129,67 +46333,74 @@ function SuggestionsList({ suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length) }; }; - return (0,external_React_.createElement)("ul", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { ref: listRef, className: "components-form-token-field__suggestions-list", id: `components-form-token-suggestions-${instanceId}`, - role: "listbox" - }, suggestions.map((suggestion, index) => { - const matchText = computeSuggestionMatch(suggestion); - const className = classnames_default()('components-form-token-field__suggestion', { - 'is-selected': index === selectedIndex - }); - let output; - if (typeof __experimentalRenderItem === 'function') { - output = __experimentalRenderItem({ - item: suggestion + role: "listbox", + children: suggestions.map((suggestion, index) => { + const matchText = computeSuggestionMatch(suggestion); + const isSelected = index === selectedIndex; + const isDisabled = typeof suggestion === 'object' && suggestion?.disabled; + const key = typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion); + const className = dist_clsx('components-form-token-field__suggestion', { + 'is-selected': isSelected }); - } else if (matchText) { - output = (0,external_React_.createElement)("span", { - "aria-label": displayTransform(suggestion) - }, matchText.suggestionBeforeMatch, (0,external_React_.createElement)("strong", { - className: "components-form-token-field__suggestion-match" - }, matchText.suggestionMatch), matchText.suggestionAfterMatch); - } else { - output = displayTransform(suggestion); - } + let output; + if (typeof __experimentalRenderItem === 'function') { + output = __experimentalRenderItem({ + item: suggestion + }); + } else if (matchText) { + output = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { + "aria-label": displayTransform(suggestion), + children: [matchText.suggestionBeforeMatch, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", { + className: "components-form-token-field__suggestion-match", + children: matchText.suggestionMatch + }), matchText.suggestionAfterMatch] + }); + } else { + output = displayTransform(suggestion); + } - /* eslint-disable jsx-a11y/click-events-have-key-events */ - return (0,external_React_.createElement)("li", { - id: `components-form-token-suggestions-${instanceId}-${index}`, - role: "option", - className: className, - key: typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion), - onMouseDown: handleMouseDown, - onClick: handleClick(suggestion), - onMouseEnter: handleHover(suggestion), - "aria-selected": index === selectedIndex - }, output); - /* eslint-enable jsx-a11y/click-events-have-key-events */ - })); + /* eslint-disable jsx-a11y/click-events-have-key-events */ + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", { + id: `components-form-token-suggestions-${instanceId}-${index}`, + role: "option", + className: className, + onMouseDown: handleMouseDown, + onClick: handleClick(suggestion), + onMouseEnter: handleHover(suggestion), + "aria-selected": index === selectedIndex, + "aria-disabled": isDisabled, + children: output + }, key); + /* eslint-enable jsx-a11y/click-events-have-key-events */ + }) + }); } /* harmony default export */ const suggestions_list = (SuggestionsList); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js - /** * WordPress dependencies */ + /* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => { const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined); const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []); - return (0,external_React_.createElement)("div", { - ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside) - }, (0,external_React_.createElement)(WrappedComponent, { - ref: bindFocusOutsideHandler, - ...props - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { + ref: bindFocusOutsideHandler, + ...props + }) + }); }, 'withFocusOutside')); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js - /** * External dependencies */ @@ -47217,6 +46428,9 @@ function SuggestionsList({ + + + const combobox_control_noop = () => {}; const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component { handleFocusOutside(event) { @@ -47244,10 +46458,12 @@ const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) = * { * value: 'normal', * label: 'Normal', + * disabled: true, * }, * { * value: 'large', * label: 'Large', + * disabled: false, * }, * ]; * @@ -47291,7 +46507,8 @@ function ComboboxControl(props) { messages = { selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.') }, - __experimentalRenderItem + __experimentalRenderItem, + expandOnFocus = true } = useDeprecated36pxDefaultSizeProp(props); const [value, setValue] = useControlledValue({ value: valueProp, @@ -47323,6 +46540,9 @@ function ComboboxControl(props) { return startsWithMatch.concat(containsMatch); }, [inputValue, options]); const onSuggestionSelected = newSelectedSuggestion => { + if (newSelectedSuggestion.disabled) { + return; + } setValue(newSelectedSuggestion.value); (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive'); setSelectedSuggestion(newSelectedSuggestion); @@ -47340,15 +46560,9 @@ function ComboboxControl(props) { setSelectedSuggestion(matchingSuggestions[nextIndex]); setIsExpanded(true); }; - const onKeyDown = event => { + const onKeyDown = withIgnoreIMEEvents(event => { let preventDefault = false; - if (event.defaultPrevented || - // Ignore keydowns from IMEs - event.nativeEvent.isComposing || - // Workaround for Mac Safari where the final Enter/Backspace of an IME composition - // is `isComposing=false`, even though it's technically still part of the composition. - // These can only be detected by keyCode. - event.keyCode === 229) { + if (event.defaultPrevented) { return; } switch (event.code) { @@ -47377,16 +46591,21 @@ function ComboboxControl(props) { if (preventDefault) { event.preventDefault(); } - }; + }); const onBlur = () => { setInputHasFocus(false); }; const onFocus = () => { setInputHasFocus(true); - setIsExpanded(true); + if (expandOnFocus) { + setIsExpanded(true); + } onFilterValueChange(''); setInputValue(''); }; + const onClick = () => { + setIsExpanded(true); + }; const onFocusOutside = () => { setIsExpanded(false); }; @@ -47427,55 +46646,64 @@ function ComboboxControl(props) { // input container intended accessible usability. // TODO: Refactor click detection to use blur to stop propagation. /* eslint-disable jsx-a11y/no-static-element-interactions */ - return (0,external_React_.createElement)(DetectOutside, { - onFocusOutside: onFocusOutside - }, (0,external_React_.createElement)(base_control, { - __nextHasNoMarginBottom: __nextHasNoMarginBottom, - className: classnames_default()(className, 'components-combobox-control'), - label: label, - id: `components-form-token-input-${instanceId}`, - hideLabelFromVision: hideLabelFromVision, - help: help - }, (0,external_React_.createElement)("div", { - className: "components-combobox-control__suggestions-container", - tabIndex: -1, - onKeyDown: onKeyDown - }, (0,external_React_.createElement)(InputWrapperFlex, { - __next40pxDefaultSize: __next40pxDefaultSize - }, (0,external_React_.createElement)(flex_block_component, null, (0,external_React_.createElement)(token_input, { - className: "components-combobox-control__input", - instanceId: instanceId, - ref: inputContainer, - value: isExpanded ? inputValue : currentLabel, - onFocus: onFocus, - onBlur: onBlur, - isExpanded: isExpanded, - selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), - onChange: onInputChange - })), allowReset && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(build_module_button, { - className: "components-combobox-control__reset", - icon: close_small, - disabled: !value, - onClick: handleOnReset, - label: (0,external_wp_i18n_namespaceObject.__)('Reset') - }))), isExpanded && (0,external_React_.createElement)(suggestions_list, { - instanceId: instanceId - // The empty string for `value` here is not actually used, but is - // just a quick way to satisfy the TypeScript requirements of SuggestionsList. - // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330 - , - match: { - label: inputValue, - value: '' - }, - displayTransform: suggestion => suggestion.label, - suggestions: matchingSuggestions, - selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), - onHover: setSelectedSuggestion, - onSelect: onSuggestionSelected, - scrollIntoView: true, - __experimentalRenderItem: __experimentalRenderItem - })))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DetectOutside, { + onFocusOutside: onFocusOutside, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + className: dist_clsx(className, 'components-combobox-control'), + label: label, + id: `components-form-token-input-${instanceId}`, + hideLabelFromVision: hideLabelFromVision, + help: help, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-combobox-control__suggestions-container", + tabIndex: -1, + onKeyDown: onKeyDown, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapperFlex, { + __next40pxDefaultSize: __next40pxDefaultSize, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(token_input, { + className: "components-combobox-control__input", + instanceId: instanceId, + ref: inputContainer, + value: isExpanded ? inputValue : currentLabel, + onFocus: onFocus, + onBlur: onBlur, + onClick: onClick, + isExpanded: isExpanded, + selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), + onChange: onInputChange + }) + }), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-combobox-control__reset", + icon: close_small, + disabled: !value, + onClick: handleOnReset, + label: (0,external_wp_i18n_namespaceObject.__)('Reset') + }) + })] + }), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, { + instanceId: instanceId + // The empty string for `value` here is not actually used, but is + // just a quick way to satisfy the TypeScript requirements of SuggestionsList. + // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330 + , + match: { + label: inputValue, + value: '' + }, + displayTransform: suggestion => suggestion.label, + suggestions: matchingSuggestions, + selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), + onHover: setSelectedSuggestion, + onSelect: onSuggestionSelected, + scrollIntoView: true, + __experimentalRenderItem: __experimentalRenderItem + })] + }) + }) + }); /* eslint-enable jsx-a11y/no-static-element-interactions */ } /* harmony default export */ const combobox_control = (ComboboxControl); @@ -47503,7 +46731,7 @@ var useGroup = createHook((props) => { const [labelId, setLabelId] = (0,external_React_.useState)(); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }), [] ); props = _4R3V3JGP_spreadValues({ @@ -47545,7 +46773,6 @@ if (false) {} ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/composite/legacy/index.js - /** * Composite is a component that may contain navigable items represented by * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements @@ -47566,6 +46793,12 @@ if (false) {} */ + +// Legacy composite components can either provide state through a +// single `state` prop, or via individual props, usually through +// spreading the state generated by `useCompositeState`. +// That is, `<Composite* { ...state }>`. + function mapLegacyStatePropsToComponentProps(legacyProps) { // If a `state` prop is provided, we unpack that; otherwise, // the necessary props are provided directly in `legacyProps`. @@ -47604,7 +46837,7 @@ function proxyComposite(ProxiedComponent, propMap = {}) { } }); delete props.baseId; - return (0,external_React_.createElement)(ProxiedComponent, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ProxiedComponent, { ...props, store: store }); @@ -47622,7 +46855,7 @@ const unproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRe ...props }, ref) => { const Component = role === 'row' ? CompositeRow : CompositeGroup; - return (0,external_React_.createElement)(Component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { ref: ref, role: role, ...props @@ -47683,7 +46916,9 @@ function modalize(modalElement) { const hiddenElements = []; hiddenElementsByDepth.push(hiddenElements); for (const element of elements) { - if (element === modalElement) continue; + if (element === modalElement) { + continue; + } if (elementShouldBeHidden(element)) { element.setAttribute('aria-hidden', 'true'); hiddenElements.push(element); @@ -47708,12 +46943,15 @@ function elementShouldBeHidden(element) { */ function unmodalize() { const hiddenElements = hiddenElementsByDepth.pop(); - if (!hiddenElements) return; - for (const element of hiddenElements) element.removeAttribute('aria-hidden'); + if (!hiddenElements) { + return; + } + for (const element of hiddenElements) { + element.removeAttribute('aria-hidden'); + } } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/index.js - /** * External dependencies */ @@ -47733,7 +46971,11 @@ function unmodalize() { + + // Used to track and dismiss the prior modal when another opens unless nested. + + const ModalContext = (0,external_wp_element_namespaceObject.createContext)([]); // Used to track body class names applied while modals are open. @@ -47828,7 +47070,9 @@ function UnforwardedModal(props, forwardedRef) { (0,external_wp_element_namespaceObject.useEffect)(() => { dismissers.push(refOnRequestClose); const [first, second] = dismissers; - if (second) first?.current?.(); + if (second) { + first?.current?.(); + } const nested = nestedDismissers.current; return () => { nested[0]?.current?.(); @@ -47867,15 +47111,6 @@ function UnforwardedModal(props, forwardedRef) { }; }, [isContentScrollable, childrenContainerRef]); function handleEscapeKeyDown(event) { - if ( - // Ignore keydowns from IMEs - event.nativeEvent.isComposing || - // Workaround for Mac Safari where the final Enter/Backspace of an IME composition - // is `isComposing=false`, even though it's technically still part of the composition. - // These can only be detected by keyCode. - event.keyCode === 229) { - return; - } if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) { event.preventDefault(); if (onRequestClose) { @@ -47913,59 +47148,72 @@ function UnforwardedModal(props, forwardedRef) { }) => { const isSameTarget = target === pressTarget; pressTarget = null; - if (button === 0 && isSameTarget) onRequestClose(); + if (button === 0 && isSameTarget) { + onRequestClose(); + } } }; const modal = + /*#__PURE__*/ // eslint-disable-next-line jsx-a11y/no-static-element-interactions - (0,external_React_.createElement)("div", { + (0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]), - className: classnames_default()('components-modal__screen-overlay', overlayClassName), - onKeyDown: handleEscapeKeyDown, - ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}) - }, (0,external_React_.createElement)(style_provider, { - document: document - }, (0,external_React_.createElement)("div", { - className: classnames_default()('components-modal__frame', sizeClass, className), - style: style, - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]), - role: role, - "aria-label": contentLabel, - "aria-labelledby": contentLabel ? undefined : headingId, - "aria-describedby": aria.describedby, - tabIndex: -1, - onKeyDown: onKeyDown - }, (0,external_React_.createElement)("div", { - className: classnames_default()('components-modal__content', { - 'hide-header': __experimentalHideHeader, - 'is-scrollable': hasScrollableContent, - 'has-scrolled-content': hasScrolledContent - }), - role: "document", - onScroll: onContentContainerScroll, - ref: contentRef, - "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined, - tabIndex: hasScrollableContent ? 0 : undefined - }, !__experimentalHideHeader && (0,external_React_.createElement)("div", { - className: "components-modal__header" - }, (0,external_React_.createElement)("div", { - className: "components-modal__header-heading-container" - }, icon && (0,external_React_.createElement)("span", { - className: "components-modal__icon-container", - "aria-hidden": true - }, icon), title && (0,external_React_.createElement)("h1", { - id: headingId, - className: "components-modal__header-heading" - }, title)), headerActions, isDismissible && (0,external_React_.createElement)(build_module_button, { - onClick: onRequestClose, - icon: library_close, - label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close') - })), (0,external_React_.createElement)("div", { - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]) - }, children))))); - return (0,external_wp_element_namespaceObject.createPortal)((0,external_React_.createElement)(ModalContext.Provider, { - value: nestedDismissers.current - }, modal), document.body); + className: dist_clsx('components-modal__screen-overlay', overlayClassName), + onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown), + ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(style_provider, { + document: document, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: dist_clsx('components-modal__frame', sizeClass, className), + style: style, + ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]), + role: role, + "aria-label": contentLabel, + "aria-labelledby": contentLabel ? undefined : headingId, + "aria-describedby": aria.describedby, + tabIndex: -1, + onKeyDown: onKeyDown, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: dist_clsx('components-modal__content', { + 'hide-header': __experimentalHideHeader, + 'is-scrollable': hasScrollableContent, + 'has-scrolled-content': hasScrolledContent + }), + role: "document", + onScroll: onContentContainerScroll, + ref: contentRef, + "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined, + tabIndex: hasScrollableContent ? 0 : undefined, + children: [!__experimentalHideHeader && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-modal__header", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-modal__header-heading-container", + children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-modal__icon-container", + "aria-hidden": true, + children: icon + }), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h1", { + id: headingId, + className: "components-modal__header-heading", + children: title + })] + }), headerActions, isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + onClick: onRequestClose, + icon: library_close, + label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close') + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]), + children: children + })] + }) + }) + }) + }); + return (0,external_wp_element_namespaceObject.createPortal)( /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ModalContext.Provider, { + value: nestedDismissers.current, + children: modal + }), document.body); } /** @@ -48023,7 +47271,6 @@ const styles_wrapper = true ? { } : 0; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js - /** * WordPress dependencies */ @@ -48041,6 +47288,9 @@ const styles_wrapper = true ? { + + + const UnconnectedConfirmDialog = (props, forwardedRef) => { const { isOpen: isOpenProp, @@ -48082,31 +47332,40 @@ const UnconnectedConfirmDialog = (props, forwardedRef) => { }, [handleEvent, onConfirm]); const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel'); const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK'); - return (0,external_React_.createElement)(external_React_.Fragment, null, isOpen && (0,external_React_.createElement)(modal, { - onRequestClose: handleEvent(onCancel), - onKeyDown: handleEnter, - closeButtonLabel: cancelLabel, - isDismissible: true, - ref: forwardedRef, - overlayClassName: wrapperClassName, - __experimentalHideHeader: true, - ...otherProps - }, (0,external_React_.createElement)(v_stack_component, { - spacing: 8 - }, (0,external_React_.createElement)(text_component, null, children), (0,external_React_.createElement)(flex_component, { - direction: "row", - justify: "flex-end" - }, (0,external_React_.createElement)(build_module_button, { - __next40pxDefaultSize: true, - ref: cancelButtonRef, - variant: "tertiary", - onClick: handleEvent(onCancel) - }, cancelLabel), (0,external_React_.createElement)(build_module_button, { - __next40pxDefaultSize: true, - ref: confirmButtonRef, - variant: "primary", - onClick: handleEvent(onConfirm) - }, confirmLabel))))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(modal, { + onRequestClose: handleEvent(onCancel), + onKeyDown: handleEnter, + closeButtonLabel: cancelLabel, + isDismissible: true, + ref: forwardedRef, + overlayClassName: wrapperClassName, + __experimentalHideHeader: true, + ...otherProps, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + spacing: 8, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(text_component, { + children: children + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { + direction: "row", + justify: "flex-end", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + __next40pxDefaultSize: true, + ref: cancelButtonRef, + variant: "tertiary", + onClick: handleEvent(onCancel), + children: cancelLabel + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + __next40pxDefaultSize: true, + ref: confirmButtonRef, + variant: "primary", + onClick: handleEvent(onConfirm), + children: confirmLabel + })] + })] + }) + }) + }); }; /** @@ -52360,24 +51619,7 @@ function useMultipleSelection(userProps) { -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/styles.js - -/** - * External dependencies - */ - -/** - * Internal dependencies - */ - - -const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/emotion_react_browser_esm_css(Container, "{min-width:130px;}" + ( true ? "" : 0), true ? "" : 0) : ''; -const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser_esm(input_base, true ? { - target: "eswuck60" -} : 0)(backCompatMinWidth, ";" + ( true ? "" : 0)); - ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/index.js - // @ts-nocheck /** * External dependencies @@ -52392,7 +51634,6 @@ const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser - /** * Internal dependencies */ @@ -52402,6 +51643,8 @@ const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser + + const custom_select_control_itemToString = item => item?.name; // This is needed so that in Windows, where // the menu does not necessarily open on @@ -52437,8 +51680,6 @@ function CustomSelectControl(props) { const { /** Start opting into the larger default height that will become the default size in a future version. */ __next40pxDefaultSize = false, - /** Start opting into the unconstrained width that will become the default in a future version. */ - __nextUnconstrainedWidth = false, className, hideLabelFromVision, label, @@ -52472,22 +51713,6 @@ function CustomSelectControl(props) { } : undefined), stateReducer: custom_select_control_stateReducer }); - const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); - function handleOnFocus(e) { - setIsFocused(true); - onFocus?.(e); - } - function handleOnBlur(e) { - setIsFocused(false); - onBlur?.(e); - } - if (!__nextUnconstrainedWidth) { - external_wp_deprecated_default()('Constrained width styles for wp.components.CustomSelectControl', { - since: '6.1', - version: '6.4', - hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version' - }); - } function getDescribedBy() { if (describedBy) { return describedBy; @@ -52499,7 +51724,7 @@ function CustomSelectControl(props) { // translators: %s: The selected option. return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name); } - const menuProps = getMenuProps({ + let menuProps = getMenuProps({ className: 'components-custom-select-control__menu', 'aria-hidden': !isOpen }); @@ -52510,69 +51735,80 @@ function CustomSelectControl(props) { // We need this here, because the null active descendant is not fully ARIA compliant. if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) { - delete menuProps['aria-activedescendant']; - } - return (0,external_React_.createElement)("div", { - className: classnames_default()('components-custom-select-control', className) - }, hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, { - as: "label", - ...getLabelProps() - }, label) : /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ - (0,external_React_.createElement)(StyledLabel, { - ...getLabelProps({ - className: 'components-custom-select-control__label' - }) - }, label), (0,external_React_.createElement)(InputBaseWithBackCompatMinWidth, { - __next40pxDefaultSize: __next40pxDefaultSize, - __nextUnconstrainedWidth: __nextUnconstrainedWidth, - isFocused: isOpen || isFocused, - __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto', - labelPosition: __nextUnconstrainedWidth ? undefined : 'top', - size: size, - suffix: (0,external_React_.createElement)(select_control_chevron_down, null) - }, (0,external_React_.createElement)(Select, { - onMouseOver: onMouseOver, - onMouseOut: onMouseOut, - as: "button", - onFocus: handleOnFocus, - onBlur: handleOnBlur, - selectSize: size, - __next40pxDefaultSize: __next40pxDefaultSize, - ...getToggleButtonProps({ - // This is needed because some speech recognition software don't support `aria-labelledby`. - 'aria-label': label, - 'aria-labelledby': undefined, - className: 'components-custom-select-control__button', - describedBy: getDescribedBy() - }) - }, custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0,external_React_.createElement)("span", { - className: "components-custom-select-control__hint" - }, selectedItem.__experimentalHint))), (0,external_React_.createElement)("ul", { - ...menuProps, - onKeyDown: onKeyDownHandler - }, isOpen && items.map((item, index) => - // eslint-disable-next-line react/jsx-key - (0,external_React_.createElement)("li", { - ...getItemProps({ - item, - index, - key: item.key, - className: classnames_default()(item.className, 'components-custom-select-control__item', { - 'is-highlighted': index === highlightedIndex, - 'has-hint': !!item.__experimentalHint, - 'is-next-40px-default-size': __next40pxDefaultSize + const { + 'aria-activedescendant': ariaActivedescendant, + ...restMenuProps + } = menuProps; + menuProps = restMenuProps; + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: dist_clsx('components-custom-select-control', className), + children: [hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "label", + ...getLabelProps(), + children: label + }) : + /*#__PURE__*/ + /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ + (0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + ...getLabelProps({ + className: 'components-custom-select-control__label' }), - style: item.style - }) - }, item.name, item.__experimentalHint && (0,external_React_.createElement)("span", { - className: "components-custom-select-control__item-hint" - }, item.__experimentalHint), item === selectedItem && (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_check, - className: "components-custom-select-control__item-icon" - }))))); + children: label + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(input_base, { + __next40pxDefaultSize: __next40pxDefaultSize, + size: size, + suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}), + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Select, { + onMouseOver: onMouseOver, + onMouseOut: onMouseOut, + as: "button", + onFocus: onFocus, + onBlur: onBlur, + selectSize: size, + __next40pxDefaultSize: __next40pxDefaultSize, + ...getToggleButtonProps({ + // This is needed because some speech recognition software don't support `aria-labelledby`. + 'aria-label': label, + 'aria-labelledby': undefined, + className: 'components-custom-select-control__button', + describedBy: getDescribedBy() + }), + children: [custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-custom-select-control__hint", + children: selectedItem.__experimentalHint + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-custom-select-control__menu-wrapper", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { + ...menuProps, + onKeyDown: onKeyDownHandler, + children: isOpen && items.map((item, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", { + ...getItemProps({ + item, + index, + className: dist_clsx(item.className, 'components-custom-select-control__item', { + 'is-highlighted': index === highlightedIndex, + 'has-hint': !!item.__experimentalHint, + 'is-next-40px-default-size': __next40pxDefaultSize + }), + style: item.style + }), + children: [item.name, item.__experimentalHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-custom-select-control__item-hint", + children: item.__experimentalHint + }), item === selectedItem && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_check, + className: "components-custom-select-control__item-icon" + })] + }, item.key)) + }) + })] + })] + }); } function StableCustomSelectControl(props) { - return (0,external_React_.createElement)(CustomSelectControl, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectControl, { ...props, __experimentalShowSelectedHint: false }); @@ -52581,26 +51817,6 @@ function StableCustomSelectControl(props) { ;// CONCATENATED MODULE: ./node_modules/use-lilius/build/index.es.js -function toInteger(dirtyNumber) { - if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) { - return NaN; - } - - var number = Number(dirtyNumber); - - if (isNaN(number)) { - return number; - } - - return number < 0 ? Math.ceil(number) : Math.floor(number); -} - -function requiredArgs(required, args) { - if (args.length < required) { - throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present'); - } -} - /** * @name toDate * @category Common Helpers @@ -52617,9 +51833,11 @@ function requiredArgs(required, args) { * * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. * - * @param {Date|Number} argument - the value to convert - * @returns {Date} the parsed date in the local time zone - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param argument - The value to convert + * + * @returns The parsed date in the local time zone * * @example * // Clone the date: @@ -52631,29 +51849,69 @@ function requiredArgs(required, args) { * const result = toDate(1392098430000) * //=> Tue Feb 11 2014 11:30:30 */ - function toDate(argument) { - requiredArgs(1, arguments); - var argStr = Object.prototype.toString.call(argument); // Clone the date + const argStr = Object.prototype.toString.call(argument); - if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') { + // Clone the date + if ( + argument instanceof Date || + (typeof argument === "object" && argStr === "[object Date]") + ) { // Prevent the date to lose the milliseconds when passed to new Date() in IE10 - return new Date(argument.getTime()); - } else if (typeof argument === 'number' || argStr === '[object Number]') { + return new argument.constructor(+argument); + } else if ( + typeof argument === "number" || + argStr === "[object Number]" || + typeof argument === "string" || + argStr === "[object String]" + ) { + // TODO: Can we get rid of as? return new Date(argument); } else { - if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') { - // eslint-disable-next-line no-console - console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console - - console.warn(new Error().stack); - } - + // TODO: Can we get rid of as? return new Date(NaN); } } /** + * @name constructFrom + * @category Generic Helpers + * @summary Constructs a date using the reference date and the value + * + * @description + * The function constructs a new date using the constructor from the reference + * date and the given value. It helps to build generic functions that accept + * date extensions. + * + * It defaults to `Date` if the passed reference date is a number or a string. + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The reference date to take constructor from + * @param value - The value to create the date + * + * @returns Date initialized using the given date and value + * + * @example + * import { constructFrom } from 'date-fns' + * + * // A function that clones a date preserving the original type + * function cloneDate<DateType extends Date(date: DateType): DateType { + * return constructFrom( + * date, // Use contrustor from the given date + * date.getTime() // Use the date value to create a new date + * ) + * } + */ +function constructFrom(date, value) { + if (date instanceof Date) { + return new date.constructor(value); + } else { + return new Date(value); + } +} + +/** * @name addDays * @category Day Helpers * @summary Add the specified number of days to the given date. @@ -52661,33 +51919,27 @@ function toDate(argument) { * @description * Add the specified number of days to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} - the new date with the days added - * @throws {TypeError} - 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of days to be added. + * + * @returns The new date with the days added * * @example * // Add 10 days to 1 September 2014: * const result = addDays(new Date(2014, 8, 1), 10) * //=> Thu Sep 11 2014 00:00:00 */ - -function addDays(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var amount = toInteger(dirtyAmount); - - if (isNaN(amount)) { - return new Date(NaN); - } - +function addDays(date, amount) { + const _date = toDate(date); + if (isNaN(amount)) return constructFrom(date, NaN); if (!amount) { // If 0 days, no-op to avoid changing times in the hour before end of DST - return date; + return _date; } - - date.setDate(date.getDate() + amount); - return date; + _date.setDate(_date.getDate() + amount); + return _date; } /** @@ -52698,32 +51950,32 @@ function addDays(dirtyDate, dirtyAmount) { * @description * Add the specified number of months to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the months added - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of months to be added. + * + * @returns The new date with the months added * * @example * // Add 5 months to 1 September 2014: * const result = addMonths(new Date(2014, 8, 1), 5) * //=> Sun Feb 01 2015 00:00:00 + * + * // Add one month to 30 January 2023: + * const result = addMonths(new Date(2023, 0, 30), 1) + * //=> Tue Feb 28 2023 00:00:00 */ - -function addMonths(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var amount = toInteger(dirtyAmount); - - if (isNaN(amount)) { - return new Date(NaN); - } - +function addMonths(date, amount) { + const _date = toDate(date); + if (isNaN(amount)) return constructFrom(date, NaN); if (!amount) { // If 0 months, no-op to avoid changing times in the hour before end of DST - return date; + return _date; } + const dayOfMonth = _date.getDate(); - var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for + // The JS Date object supports date math by accepting out-of-bounds values for // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we // want except that dates will wrap around the end of a month, meaning that @@ -52731,11 +51983,9 @@ function addMonths(dirtyDate, dirtyAmount) { // we'll default to the end of the desired month by adding 1 to the desired // month and using a date of 0 to back up one day to the end of the desired // month. - - var endOfDesiredMonth = new Date(date.getTime()); - endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0); - var daysInMonth = endOfDesiredMonth.getDate(); - + const endOfDesiredMonth = constructFrom(date, _date.getTime()); + endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0); + const daysInMonth = endOfDesiredMonth.getDate(); if (dayOfMonth >= daysInMonth) { // If we're already at the end of the month, then this is the correct date // and we're done. @@ -52748,17 +51998,26 @@ function addMonths(dirtyDate, dirtyAmount) { // the last day of the month and its local time was in the hour skipped or // repeated next to a DST transition. So we use `date` instead which is // guaranteed to still have the original time. - date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth); - return date; + _date.setFullYear( + endOfDesiredMonth.getFullYear(), + endOfDesiredMonth.getMonth(), + dayOfMonth, + ); + return _date; } } -var index_es_defaultOptions = {}; +let index_es_defaultOptions = {}; + function getDefaultOptions() { return index_es_defaultOptions; } /** + * The {@link startOfWeek} function options. + */ + +/** * @name startOfWeek * @category Week Helpers * @summary Return the start of a week for the given date. @@ -52767,13 +52026,12 @@ function getDefaultOptions() { * Return the start of a week for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @returns {Date} the start of a week - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param options - An object with options + * + * @returns The start of a week * * @example * // The start of a week for 2 September 2014 11:55:00: @@ -52785,24 +52043,22 @@ function getDefaultOptions() { * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) * //=> Mon Sep 01 2014 00:00:00 */ +function startOfWeek(date, options) { + const defaultOptions = getDefaultOptions(); + const weekStartsOn = + options?.weekStartsOn ?? + options?.locale?.options?.weekStartsOn ?? + defaultOptions.weekStartsOn ?? + defaultOptions.locale?.options?.weekStartsOn ?? + 0; -function startOfWeek(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; - - requiredArgs(1, arguments); - var defaultOptions = getDefaultOptions(); - var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN + const _date = toDate(date); + const day = _date.getDay(); + const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } - - var date = toDate(dirtyDate); - var day = date.getDay(); - var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; - date.setDate(date.getDate() - diff); - date.setHours(0, 0, 0, 0); - return date; + _date.setDate(_date.getDate() - diff); + _date.setHours(0, 0, 0, 0); + return _date; } /** @@ -52814,21 +52070,21 @@ function startOfWeek(dirtyDate, options) { * Return the start of a day for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @returns {Date} the start of a day - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of a day * * @example * // The start of a day for 2 September 2014 11:55:00: * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0)) * //=> Tue Sep 02 2014 00:00:00 */ - -function startOfDay(dirtyDate) { - requiredArgs(1, arguments); - var date = toDate(dirtyDate); - date.setHours(0, 0, 0, 0); - return date; +function startOfDay(date) { + const _date = toDate(date); + _date.setHours(0, 0, 0, 0); + return _date; } /** @@ -52839,22 +52095,21 @@ function startOfDay(dirtyDate) { * @description * Add the specified number of week to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the weeks added - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of weeks to be added. + * + * @returns The new date with the weeks added * * @example * // Add 4 weeks to 1 September 2014: * const result = addWeeks(new Date(2014, 8, 1), 4) * //=> Mon Sep 29 2014 00:00:00 */ - -function addWeeks(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - var days = amount * 7; - return addDays(dirtyDate, days); +function addWeeks(date, amount) { + const days = amount * 7; + return addDays(date, days); } /** @@ -52865,21 +52120,20 @@ function addWeeks(dirtyDate, dirtyAmount) { * @description * Add the specified number of years to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of years to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the years added - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of years to be added. + * + * @returns The new date with the years added * * @example * // Add 5 years to 1 September 2014: * const result = addYears(new Date(2014, 8, 1), 5) * //=> Sun Sep 01 2019 00:00:00 */ - -function addYears(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - return addMonths(dirtyDate, amount * 12); +function addYears(date, amount) { + return addMonths(date, amount * 12); } /** @@ -52891,26 +52145,30 @@ function addYears(dirtyDate, dirtyAmount) { * Return the end of a month for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @returns {Date} the end of a month - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The end of a month * * @example * // The end of a month for 2 September 2014 11:55:00: * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0)) * //=> Tue Sep 30 2014 23:59:59.999 */ - -function endOfMonth(dirtyDate) { - requiredArgs(1, arguments); - var date = toDate(dirtyDate); - var month = date.getMonth(); - date.setFullYear(date.getFullYear(), month + 1, 0); - date.setHours(23, 59, 59, 999); - return date; +function endOfMonth(date) { + const _date = toDate(date); + const month = _date.getMonth(); + _date.setFullYear(_date.getFullYear(), month + 1, 0); + _date.setHours(23, 59, 59, 999); + return _date; } /** + * The {@link eachDayOfInterval} function options. + */ + +/** * @name eachDayOfInterval * @category Interval Helpers * @summary Return the array of dates within the specified time interval. @@ -52918,14 +52176,12 @@ function endOfMonth(dirtyDate) { * @description * Return the array of dates within the specified time interval. * - * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} - * @param {Object} [options] - an object with options. - * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1. - * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.step` must be a number greater than 1 - * @throws {RangeError} The start of an interval cannot be after its end - * @throws {RangeError} Date in interval cannot be `Invalid Date` + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param interval - The interval. + * @param options - An object with options. + * + * @returns The array with starts of days from the day of the interval start to the day of the interval end * * @example * // Each day between 6 October 2014 and 10 October 2014: @@ -52941,36 +52197,38 @@ function endOfMonth(dirtyDate) { * // Fri Oct 10 2014 00:00:00 * // ] */ +function eachDayOfInterval(interval, options) { + const startDate = toDate(interval.start); + const endDate = toDate(interval.end); -function eachDayOfInterval(dirtyInterval, options) { - var _options$step; - - requiredArgs(1, arguments); - var interval = dirtyInterval || {}; - var startDate = toDate(interval.start); - var endDate = toDate(interval.end); - var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date` + let reversed = +startDate > +endDate; + const endTime = reversed ? +startDate : +endDate; + const currentDate = reversed ? endDate : startDate; + currentDate.setHours(0, 0, 0, 0); - if (!(startDate.getTime() <= endTime)) { - throw new RangeError('Invalid interval'); + let step = options?.step ?? 1; + if (!step) return []; + if (step < 0) { + step = -step; + reversed = !reversed; } - var dates = []; - var currentDate = startDate; - currentDate.setHours(0, 0, 0, 0); - var step = Number((_options$step = options === null || options === void 0 ? void 0 : options.step) !== null && _options$step !== void 0 ? _options$step : 1); - if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1'); + const dates = []; - while (currentDate.getTime() <= endTime) { + while (+currentDate <= endTime) { dates.push(toDate(currentDate)); currentDate.setDate(currentDate.getDate() + step); currentDate.setHours(0, 0, 0, 0); } - return dates; + return reversed ? dates.reverse() : dates; } /** + * The {@link eachMonthOfInterval} function options. + */ + +/** * @name eachMonthOfInterval * @category Interval Helpers * @summary Return the array of months within the specified time interval. @@ -52978,11 +52236,11 @@ function eachDayOfInterval(dirtyInterval, options) { * @description * Return the array of months within the specified time interval. * - * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} - * @returns {Date[]} the array with starts of months from the month of the interval start to the month of the interval end - * @throws {TypeError} 1 argument required - * @throws {RangeError} The start of an interval cannot be after its end - * @throws {RangeError} Date in interval cannot be `Invalid Date` + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param interval - The interval + * + * @returns The array with starts of months from the month of the interval start to the month of the interval end * * @example * // Each month between 6 February 2014 and 10 August 2014: @@ -53000,32 +52258,38 @@ function eachDayOfInterval(dirtyInterval, options) { * // Fri Aug 01 2014 00:00:00 * // ] */ +function eachMonthOfInterval(interval, options) { + const startDate = toDate(interval.start); + const endDate = toDate(interval.end); -function eachMonthOfInterval(dirtyInterval) { - requiredArgs(1, arguments); - var interval = dirtyInterval || {}; - var startDate = toDate(interval.start); - var endDate = toDate(interval.end); - var endTime = endDate.getTime(); - var dates = []; // Throw an exception if start date is after end date or if any date is `Invalid Date` + let reversed = +startDate > +endDate; + const endTime = reversed ? +startDate : +endDate; + const currentDate = reversed ? endDate : startDate; + currentDate.setHours(0, 0, 0, 0); + currentDate.setDate(1); - if (!(startDate.getTime() <= endTime)) { - throw new RangeError('Invalid interval'); + let step = options?.step ?? 1; + if (!step) return []; + if (step < 0) { + step = -step; + reversed = !reversed; } - var currentDate = startDate; - currentDate.setHours(0, 0, 0, 0); - currentDate.setDate(1); + const dates = []; - while (currentDate.getTime() <= endTime) { + while (+currentDate <= endTime) { dates.push(toDate(currentDate)); - currentDate.setMonth(currentDate.getMonth() + 1); + currentDate.setMonth(currentDate.getMonth() + step); } - return dates; + return reversed ? dates.reverse() : dates; } /** + * The {@link eachWeekOfInterval} function options. + */ + +/** * @name eachWeekOfInterval * @category Interval Helpers * @summary Return the array of weeks within the specified time interval. @@ -53033,15 +52297,12 @@ function eachMonthOfInterval(dirtyInterval) { * @description * Return the array of weeks within the specified time interval. * - * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @returns {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.weekStartsOn` must be 0, 1, ..., 6 - * @throws {RangeError} The start of an interval cannot be after its end - * @throws {RangeError} Date in interval cannot be `Invalid Date` + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param interval - The interval. + * @param options - An object with options. + * + * @returns The array with starts of weeks from the week of the interval start to the week of the interval end * * @example * // Each week within interval 6 October 2014 - 23 November 2014: @@ -53060,35 +52321,42 @@ function eachMonthOfInterval(dirtyInterval) { * // Sun Nov 23 2014 00:00:00 * // ] */ +function eachWeekOfInterval(interval, options) { + const startDate = toDate(interval.start); + const endDate = toDate(interval.end); -function eachWeekOfInterval(dirtyInterval, options) { - requiredArgs(1, arguments); - var interval = dirtyInterval || {}; - var startDate = toDate(interval.start); - var endDate = toDate(interval.end); - var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date` - - if (!(startDate.getTime() <= endTime)) { - throw new RangeError('Invalid interval'); - } - - var startDateWeek = startOfWeek(startDate, options); - var endDateWeek = startOfWeek(endDate, options); // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet + let reversed = +startDate > +endDate; + const startDateWeek = reversed + ? startOfWeek(endDate, options) + : startOfWeek(startDate, options); + const endDateWeek = reversed + ? startOfWeek(startDate, options) + : startOfWeek(endDate, options); + // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet startDateWeek.setHours(15); endDateWeek.setHours(15); - endTime = endDateWeek.getTime(); - var weeks = []; - var currentWeek = startDateWeek; - while (currentWeek.getTime() <= endTime) { - currentWeek.setHours(0); - weeks.push(toDate(currentWeek)); - currentWeek = addWeeks(currentWeek, 1); - currentWeek.setHours(15); + const endTime = +endDateWeek.getTime(); + let currentDate = startDateWeek; + + let step = options?.step ?? 1; + if (!step) return []; + if (step < 0) { + step = -step; + reversed = !reversed; } - return weeks; + const dates = []; + + while (+currentDate <= endTime) { + currentDate.setHours(0); + dates.push(toDate(currentDate)); + currentDate = addWeeks(currentDate, step); + currentDate.setHours(15); + } + + return reversed ? dates.reverse() : dates; } /** @@ -53100,25 +52368,29 @@ function eachWeekOfInterval(dirtyInterval, options) { * Return the start of a month for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @returns {Date} the start of a month - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of a month * * @example * // The start of a month for 2 September 2014 11:55:00: * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0)) * //=> Mon Sep 01 2014 00:00:00 */ - -function startOfMonth(dirtyDate) { - requiredArgs(1, arguments); - var date = toDate(dirtyDate); - date.setDate(1); - date.setHours(0, 0, 0, 0); - return date; +function startOfMonth(date) { + const _date = toDate(date); + _date.setDate(1); + _date.setHours(0, 0, 0, 0); + return _date; } /** + * The {@link endOfWeek} function options. + */ + +/** * @name endOfWeek * @category Week Helpers * @summary Return the end of a week for the given date. @@ -53127,13 +52399,12 @@ function startOfMonth(dirtyDate) { * Return the end of a week for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @returns {Date} the end of a week - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param options - An object with options + * + * @returns The end of a week * * @example * // The end of a week for 2 September 2014 11:55:00: @@ -53145,23 +52416,22 @@ function startOfMonth(dirtyDate) { * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) * //=> Sun Sep 07 2014 23:59:59.999 */ -function endOfWeek(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; +function endOfWeek(date, options) { + const defaultOptions = getDefaultOptions(); + const weekStartsOn = + options?.weekStartsOn ?? + options?.locale?.options?.weekStartsOn ?? + defaultOptions.weekStartsOn ?? + defaultOptions.locale?.options?.weekStartsOn ?? + 0; - requiredArgs(1, arguments); - var defaultOptions = getDefaultOptions(); - var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN + const _date = toDate(date); + const day = _date.getDay(); + const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } - - var date = toDate(dirtyDate); - var day = date.getDay(); - var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); - date.setDate(date.getDate() + diff); - date.setHours(23, 59, 59, 999); - return date; + _date.setDate(_date.getDate() + diff); + _date.setHours(23, 59, 59, 999); + return _date; } /** @@ -53172,22 +52442,22 @@ function endOfWeek(dirtyDate, options) { * @description * Get the number of days in a month of the given date. * - * @param {Date|Number} date - the given date - * @returns {Number} the number of days in a month - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * + * @returns The number of days in a month * * @example * // How many days are in February 2000? * const result = getDaysInMonth(new Date(2000, 1)) * //=> 29 */ - -function getDaysInMonth(dirtyDate) { - requiredArgs(1, arguments); - var date = toDate(dirtyDate); - var year = date.getFullYear(); - var monthIndex = date.getMonth(); - var lastDayOfMonth = new Date(0); +function getDaysInMonth(date) { + const _date = toDate(date); + const year = _date.getFullYear(); + const monthIndex = _date.getMonth(); + const lastDayOfMonth = constructFrom(date, 0); lastDayOfMonth.setFullYear(year, monthIndex + 1, 0); lastDayOfMonth.setHours(0, 0, 0, 0); return lastDayOfMonth.getDate(); @@ -53201,22 +52471,22 @@ function getDaysInMonth(dirtyDate) { * @description * Is the first date after the second one? * - * @param {Date|Number} date - the date that should be after the other one to return true - * @param {Date|Number} dateToCompare - the date to compare with - * @returns {Boolean} the first date is after the second date - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date that should be after the other one to return true + * @param dateToCompare - The date to compare with + * + * @returns The first date is after the second date * * @example * // Is 10 July 1989 after 11 February 1987? * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11)) * //=> true */ - -function isAfter(dirtyDate, dirtyDateToCompare) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var dateToCompare = toDate(dirtyDateToCompare); - return date.getTime() > dateToCompare.getTime(); +function isAfter(date, dateToCompare) { + const _date = toDate(date); + const _dateToCompare = toDate(dateToCompare); + return _date.getTime() > _dateToCompare.getTime(); } /** @@ -53227,22 +52497,22 @@ function isAfter(dirtyDate, dirtyDateToCompare) { * @description * Is the first date before the second one? * - * @param {Date|Number} date - the date that should be before the other one to return true - * @param {Date|Number} dateToCompare - the date to compare with - * @returns {Boolean} the first date is before the second date - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date that should be before the other one to return true + * @param dateToCompare - The date to compare with + * + * @returns The first date is before the second date * * @example * // Is 10 July 1989 before 11 February 1987? * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11)) * //=> false */ - -function isBefore(dirtyDate, dirtyDateToCompare) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var dateToCompare = toDate(dirtyDateToCompare); - return date.getTime() < dateToCompare.getTime(); +function isBefore(date, dateToCompare) { + const _date = toDate(date); + const _dateToCompare = toDate(dateToCompare); + return +_date < +_dateToCompare; } /** @@ -53253,10 +52523,12 @@ function isBefore(dirtyDate, dirtyDateToCompare) { * @description * Are the given dates equal? * - * @param {Date|Number} dateLeft - the first date to compare - * @param {Date|Number} dateRight - the second date to compare - * @returns {Boolean} the dates are equal - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param dateLeft - The first date to compare + * @param dateRight - The second date to compare + * + * @returns The dates are equal * * @example * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal? @@ -53266,12 +52538,10 @@ function isBefore(dirtyDate, dirtyDateToCompare) { * ) * //=> false */ - -function isEqual(dirtyLeftDate, dirtyRightDate) { - requiredArgs(2, arguments); - var dateLeft = toDate(dirtyLeftDate); - var dateRight = toDate(dirtyRightDate); - return dateLeft.getTime() === dateRight.getTime(); +function isEqual(leftDate, rightDate) { + const _dateLeft = toDate(leftDate); + const _dateRight = toDate(rightDate); + return +_dateLeft === +_dateRight; } /** @@ -53282,31 +52552,31 @@ function isEqual(dirtyLeftDate, dirtyRightDate) { * @description * Set the month to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} month - the month of the new date - * @returns {Date} the new date with the month set - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param month - The month index to set (0-11) + * + * @returns The new date with the month set * * @example * // Set February to 1 September 2014: * const result = setMonth(new Date(2014, 8, 1), 1) * //=> Sat Feb 01 2014 00:00:00 */ +function setMonth(date, month) { + const _date = toDate(date); + const year = _date.getFullYear(); + const day = _date.getDate(); -function setMonth(dirtyDate, dirtyMonth) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var month = toInteger(dirtyMonth); - var year = date.getFullYear(); - var day = date.getDate(); - var dateWithDesiredMonth = new Date(0); + const dateWithDesiredMonth = constructFrom(date, 0); dateWithDesiredMonth.setFullYear(year, month, 15); dateWithDesiredMonth.setHours(0, 0, 0, 0); - var daysInMonth = getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month + const daysInMonth = getDaysInMonth(dateWithDesiredMonth); + // Set the last day of the new month // if the original date was the last day of the longer month - - date.setMonth(month, Math.min(day, daysInMonth)); - return date; + _date.setMonth(month, Math.min(day, daysInMonth)); + return _date; } /** @@ -53324,18 +52594,12 @@ function setMonth(dirtyDate, dirtyMonth) { * to use native `Date#setX` methods. If you use this function, you may not want to include the * other `setX` functions that date-fns provides if you are concerned about the bundle size. * - * @param {Date|Number} date - the date to be changed - * @param {Object} values - an object with options - * @param {Number} [values.year] - the number of years to be set - * @param {Number} [values.month] - the number of months to be set - * @param {Number} [values.date] - the number of days to be set - * @param {Number} [values.hours] - the number of hours to be set - * @param {Number} [values.minutes] - the number of minutes to be set - * @param {Number} [values.seconds] - the number of seconds to be set - * @param {Number} [values.milliseconds] - the number of milliseconds to be set - * @returns {Date} the new date with options set - * @throws {TypeError} 2 arguments required - * @throws {RangeError} `values` must be an object + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param values - The date values to be set + * + * @returns The new date with options set * * @example * // Transform 1 September 2014 into 20 October 2015 in a single line: @@ -53347,48 +52611,44 @@ function setMonth(dirtyDate, dirtyMonth) { * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 }) * //=> Mon Sep 01 2014 12:23:45 */ -function set(dirtyDate, values) { - requiredArgs(2, arguments); - - if (typeof values !== 'object' || values === null) { - throw new RangeError('values parameter must be an object'); - } - var date = toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date +function set(date, values) { + let _date = toDate(date); - if (isNaN(date.getTime())) { - return new Date(NaN); + // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date + if (isNaN(+_date)) { + return constructFrom(date, NaN); } if (values.year != null) { - date.setFullYear(values.year); + _date.setFullYear(values.year); } if (values.month != null) { - date = setMonth(date, values.month); + _date = setMonth(_date, values.month); } if (values.date != null) { - date.setDate(toInteger(values.date)); + _date.setDate(values.date); } if (values.hours != null) { - date.setHours(toInteger(values.hours)); + _date.setHours(values.hours); } if (values.minutes != null) { - date.setMinutes(toInteger(values.minutes)); + _date.setMinutes(values.minutes); } if (values.seconds != null) { - date.setSeconds(toInteger(values.seconds)); + _date.setSeconds(values.seconds); } if (values.milliseconds != null) { - date.setMilliseconds(toInteger(values.milliseconds)); + _date.setMilliseconds(values.milliseconds); } - return date; + return _date; } /** @@ -53399,28 +52659,28 @@ function set(dirtyDate, values) { * @description * Set the year to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} year - the year of the new date - * @returns {Date} the new date with the year set - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param year - The year of the new date + * + * @returns The new date with the year set * * @example * // Set year 2013 to 1 September 2014: * const result = setYear(new Date(2014, 8, 1), 2013) * //=> Sun Sep 01 2013 00:00:00 */ +function setYear(date, year) { + const _date = toDate(date); -function setYear(dirtyDate, dirtyYear) { - requiredArgs(2, arguments); - var date = toDate(dirtyDate); - var year = toInteger(dirtyYear); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date - - if (isNaN(date.getTime())) { - return new Date(NaN); + // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date + if (isNaN(+_date)) { + return constructFrom(date, NaN); } - date.setFullYear(year); - return date; + _date.setFullYear(year); + return _date; } /** @@ -53432,17 +52692,13 @@ function setYear(dirtyDate, dirtyYear) { * @description * Return the start of today. * - * > ⚠️ Please note that this function is not present in the FP submodule as - * > it uses `Date.now()` internally hence impure and can't be safely curried. - * - * @returns {Date} the start of today + * @returns The start of today * * @example * // If today is 6 October 2014: * const result = startOfToday() * //=> Mon Oct 6 2014 00:00:00 */ - function startOfToday() { return startOfDay(Date.now()); } @@ -53455,21 +52711,20 @@ function startOfToday() { * @description * Subtract the specified number of months from the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the months subtracted - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of months to be subtracted. + * + * @returns The new date with the months subtracted * * @example * // Subtract 5 months from 1 February 2015: * const result = subMonths(new Date(2015, 1, 1), 5) * //=> Mon Sep 01 2014 00:00:00 */ - -function subMonths(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - return addMonths(dirtyDate, -amount); +function subMonths(date, amount) { + return addMonths(date, -amount); } /** @@ -53480,21 +52735,20 @@ function subMonths(dirtyDate, dirtyAmount) { * @description * Subtract the specified number of years from the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of years to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the years subtracted - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of years to be subtracted. + * + * @returns The new date with the years subtracted * * @example * // Subtract 5 years from 1 September 2014: * const result = subYears(new Date(2014, 8, 1), 5) * //=> Tue Sep 01 2009 00:00:00 */ - -function subYears(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - return addYears(dirtyDate, -amount); +function subYears(date, amount) { + return addYears(date, -amount); } var Month;
@@ -53525,7 +52779,7 @@ var Day; var inRange = function (date, min, max) {
return (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max));
};
-var clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); };
+var index_es_clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); };
var useLilius = function (_a) {
var _b = _a === void 0 ? {} : _a, _c = _b.weekStartsOn, weekStartsOn = _c === void 0 ? Day.SUNDAY : _c, _d = _b.viewing, initialViewing = _d === void 0 ? new Date() : _d, _e = _b.selected, initialSelected = _e === void 0 ? [] : _e, _f = _b.numberOfMonths, numberOfMonths = _f === void 0 ? 1 : _f;
var _g = (0,external_React_.useState)(initialViewing), viewing = _g[0], setViewing = _g[1];
@@ -53536,7 +52790,7 @@ var useLilius = function (_a) { var viewYear = (0,external_React_.useCallback)(function (year) { return setViewing(function (v) { return setYear(v, year); }); }, []);
var viewPreviousYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subYears(v, 1); }); }, []);
var viewNextYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addYears(v, 1); }); }, []);
- var _h = (0,external_React_.useState)(initialSelected.map(clearTime)), selected = _h[0], setSelected = _h[1];
+ var _h = (0,external_React_.useState)(initialSelected.map(index_es_clearTime)), selected = _h[0], setSelected = _h[1];
var clearSelected = function () { return setSelected([]); };
var isSelected = (0,external_React_.useCallback)(function (date) { return selected.findIndex(function (s) { return isEqual(s, date); }) > -1; }, [selected]);
var select = (0,external_React_.useCallback)(function (date, replaceExisting) {
@@ -53589,7 +52843,7 @@ var useLilius = function (_a) { });
}, [viewing, weekStartsOn, numberOfMonths]);
return {
- clearTime: clearTime,
+ clearTime: index_es_clearTime,
inRange: inRange,
viewing: viewing,
setViewing: setViewing,
@@ -53615,16 +52869,7 @@ var useLilius = function (_a) { -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/requiredArgs/index.js -function requiredArgs_requiredArgs(required, args) { - if (args.length < required) { - throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present'); - } -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/toDate/index.js -function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - - +;// CONCATENATED MODULE: ./node_modules/date-fns/toDate.mjs /** * @name toDate * @category Common Helpers @@ -53641,9 +52886,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi * * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. * - * @param {Date|Number} argument - the value to convert - * @returns {Date} the parsed date in the local time zone - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param argument - The value to convert + * + * @returns The parsed date in the local time zone * * @example * // Clone the date: @@ -53655,28 +52902,34 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi * const result = toDate(1392098430000) * //=> Tue Feb 11 2014 11:30:30 */ - function toDate_toDate(argument) { - requiredArgs_requiredArgs(1, arguments); - var argStr = Object.prototype.toString.call(argument); // Clone the date + const argStr = Object.prototype.toString.call(argument); - if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') { + // Clone the date + if ( + argument instanceof Date || + (typeof argument === "object" && argStr === "[object Date]") + ) { // Prevent the date to lose the milliseconds when passed to new Date() in IE10 - return new Date(argument.getTime()); - } else if (typeof argument === 'number' || argStr === '[object Number]') { + return new argument.constructor(+argument); + } else if ( + typeof argument === "number" || + argStr === "[object Number]" || + typeof argument === "string" || + argStr === "[object String]" + ) { + // TODO: Can we get rid of as? return new Date(argument); } else { - if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') { - // eslint-disable-next-line no-console - console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console - - console.warn(new Error().stack); - } - + // TODO: Can we get rid of as? return new Date(NaN); } } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfDay/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_toDate = ((/* unused pure expression or super */ null && (toDate_toDate))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfDay.mjs /** @@ -53688,37 +52941,69 @@ function toDate_toDate(argument) { * Return the start of a day for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @returns {Date} the start of a day - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of a day * * @example * // The start of a day for 2 September 2014 11:55:00: * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0)) * //=> Tue Sep 02 2014 00:00:00 */ - -function startOfDay_startOfDay(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - date.setHours(0, 0, 0, 0); - return date; +function startOfDay_startOfDay(date) { + const _date = toDate_toDate(date); + _date.setHours(0, 0, 0, 0); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/toInteger/index.js -function toInteger_toInteger(dirtyNumber) { - if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) { - return NaN; - } - var number = Number(dirtyNumber); +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfDay = ((/* unused pure expression or super */ null && (startOfDay_startOfDay))); - if (isNaN(number)) { - return number; +;// CONCATENATED MODULE: ./node_modules/date-fns/constructFrom.mjs +/** + * @name constructFrom + * @category Generic Helpers + * @summary Constructs a date using the reference date and the value + * + * @description + * The function constructs a new date using the constructor from the reference + * date and the given value. It helps to build generic functions that accept + * date extensions. + * + * It defaults to `Date` if the passed reference date is a number or a string. + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The reference date to take constructor from + * @param value - The value to create the date + * + * @returns Date initialized using the given date and value + * + * @example + * import { constructFrom } from 'date-fns' + * + * // A function that clones a date preserving the original type + * function cloneDate<DateType extends Date(date: DateType): DateType { + * return constructFrom( + * date, // Use contrustor from the given date + * date.getTime() // Use the date value to create a new date + * ) + * } + */ +function constructFrom_constructFrom(date, value) { + if (date instanceof Date) { + return new date.constructor(value); + } else { + return new Date(value); } - - return number < 0 ? Math.ceil(number) : Math.floor(number); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMonths/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_constructFrom = ((/* unused pure expression or super */ null && (constructFrom_constructFrom))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/addMonths.mjs @@ -53730,32 +53015,32 @@ function toInteger_toInteger(dirtyNumber) { * @description * Add the specified number of months to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the months added - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of months to be added. + * + * @returns The new date with the months added * * @example * // Add 5 months to 1 September 2014: * const result = addMonths(new Date(2014, 8, 1), 5) * //=> Sun Feb 01 2015 00:00:00 + * + * // Add one month to 30 January 2023: + * const result = addMonths(new Date(2023, 0, 30), 1) + * //=> Tue Feb 28 2023 00:00:00 */ - -function addMonths_addMonths(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var date = toDate_toDate(dirtyDate); - var amount = toInteger_toInteger(dirtyAmount); - - if (isNaN(amount)) { - return new Date(NaN); - } - +function addMonths_addMonths(date, amount) { + const _date = toDate_toDate(date); + if (isNaN(amount)) return constructFrom_constructFrom(date, NaN); if (!amount) { // If 0 months, no-op to avoid changing times in the hour before end of DST - return date; + return _date; } + const dayOfMonth = _date.getDate(); - var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for + // The JS Date object supports date math by accepting out-of-bounds values for // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we // want except that dates will wrap around the end of a month, meaning that @@ -53763,11 +53048,9 @@ function addMonths_addMonths(dirtyDate, dirtyAmount) { // we'll default to the end of the desired month by adding 1 to the desired // month and using a date of 0 to back up one day to the end of the desired // month. - - var endOfDesiredMonth = new Date(date.getTime()); - endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0); - var daysInMonth = endOfDesiredMonth.getDate(); - + const endOfDesiredMonth = constructFrom_constructFrom(date, _date.getTime()); + endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0); + const daysInMonth = endOfDesiredMonth.getDate(); if (dayOfMonth >= daysInMonth) { // If we're already at the end of the month, then this is the correct date // and we're done. @@ -53780,12 +53063,19 @@ function addMonths_addMonths(dirtyDate, dirtyAmount) { // the last day of the month and its local time was in the hour skipped or // repeated next to a DST transition. So we use `date` instead which is // guaranteed to still have the original time. - date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth); - return date; + _date.setFullYear( + endOfDesiredMonth.getFullYear(), + endOfDesiredMonth.getMonth(), + dayOfMonth, + ); + return _date; } } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMonths/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_addMonths = ((/* unused pure expression or super */ null && (addMonths_addMonths))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/subMonths.mjs /** @@ -53796,359 +53086,1498 @@ function addMonths_addMonths(dirtyDate, dirtyAmount) { * @description * Subtract the specified number of months from the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the months subtracted - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of months to be subtracted. + * + * @returns The new date with the months subtracted * * @example * // Subtract 5 months from 1 February 2015: * const result = subMonths(new Date(2015, 1, 1), 5) * //=> Mon Sep 01 2014 00:00:00 */ +function subMonths_subMonths(date, amount) { + return addMonths_addMonths(date, -amount); +} + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_subMonths = ((/* unused pure expression or super */ null && (subMonths_subMonths))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs +const formatDistanceLocale = { + lessThanXSeconds: { + one: "less than a second", + other: "less than {{count}} seconds", + }, + + xSeconds: { + one: "1 second", + other: "{{count}} seconds", + }, + + halfAMinute: "half a minute", + + lessThanXMinutes: { + one: "less than a minute", + other: "less than {{count}} minutes", + }, + + xMinutes: { + one: "1 minute", + other: "{{count}} minutes", + }, -function subMonths_subMonths(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var amount = toInteger_toInteger(dirtyAmount); - return addMonths_addMonths(dirtyDate, -amount); + aboutXHours: { + one: "about 1 hour", + other: "about {{count}} hours", + }, + + xHours: { + one: "1 hour", + other: "{{count}} hours", + }, + + xDays: { + one: "1 day", + other: "{{count}} days", + }, + + aboutXWeeks: { + one: "about 1 week", + other: "about {{count}} weeks", + }, + + xWeeks: { + one: "1 week", + other: "{{count}} weeks", + }, + + aboutXMonths: { + one: "about 1 month", + other: "about {{count}} months", + }, + + xMonths: { + one: "1 month", + other: "{{count}} months", + }, + + aboutXYears: { + one: "about 1 year", + other: "about {{count}} years", + }, + + xYears: { + one: "1 year", + other: "{{count}} years", + }, + + overXYears: { + one: "over 1 year", + other: "over {{count}} years", + }, + + almostXYears: { + one: "almost 1 year", + other: "almost {{count}} years", + }, +}; + +const formatDistance = (token, count, options) => { + let result; + + const tokenValue = formatDistanceLocale[token]; + if (typeof tokenValue === "string") { + result = tokenValue; + } else if (count === 1) { + result = tokenValue.one; + } else { + result = tokenValue.other.replace("{{count}}", count.toString()); + } + + if (options?.addSuffix) { + if (options.comparison && options.comparison > 0) { + return "in " + result; + } else { + return result + " ago"; + } + } + + return result; +}; + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs +function buildFormatLongFn(args) { + return (options = {}) => { + // TODO: Remove String() + const width = options.width ? String(options.width) : args.defaultWidth; + const format = args.formats[width] || args.formats[args.defaultWidth]; + return format; + }; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isDate/index.js -function isDate_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { isDate_typeof = function _typeof(obj) { return typeof obj; }; } else { isDate_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return isDate_typeof(obj); } +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatLong.mjs + + +const dateFormats = { + full: "EEEE, MMMM do, y", + long: "MMMM do, y", + medium: "MMM d, y", + short: "MM/dd/yyyy", +}; + +const timeFormats = { + full: "h:mm:ss a zzzz", + long: "h:mm:ss a z", + medium: "h:mm:ss a", + short: "h:mm a", +}; + +const dateTimeFormats = { + full: "{{date}} 'at' {{time}}", + long: "{{date}} 'at' {{time}}", + medium: "{{date}}, {{time}}", + short: "{{date}}, {{time}}", +}; + +const formatLong = { + date: buildFormatLongFn({ + formats: dateFormats, + defaultWidth: "full", + }), + + time: buildFormatLongFn({ + formats: timeFormats, + defaultWidth: "full", + }), + + dateTime: buildFormatLongFn({ + formats: dateTimeFormats, + defaultWidth: "full", + }), +}; + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs +const formatRelativeLocale = { + lastWeek: "'last' eeee 'at' p", + yesterday: "'yesterday at' p", + today: "'today at' p", + tomorrow: "'tomorrow at' p", + nextWeek: "eeee 'at' p", + other: "P", +}; + +const formatRelative = (token, _date, _baseDate, _options) => + formatRelativeLocale[token]; + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs +/* eslint-disable no-unused-vars */ /** - * @name isDate - * @category Common Helpers - * @summary Is the given value a date? + * The localize function argument callback which allows to convert raw value to + * the actual type. * + * @param value - The value to convert + * + * @returns The converted value + */ + +/** + * The map of localized values for each width. + */ + +/** + * The index type of the locale unit value. It types conversion of units of + * values that don't start at 0 (i.e. quarters). + */ + +/** + * Converts the unit value to the tuple of values. + */ + +/** + * The tuple of localized era values. The first element represents BC, + * the second element represents AD. + */ + +/** + * The tuple of localized quarter values. The first element represents Q1. + */ + +/** + * The tuple of localized day values. The first element represents Sunday. + */ + +/** + * The tuple of localized month values. The first element represents January. + */ + +function buildLocalizeFn(args) { + return (value, options) => { + const context = options?.context ? String(options.context) : "standalone"; + + let valuesArray; + if (context === "formatting" && args.formattingValues) { + const defaultWidth = args.defaultFormattingWidth || args.defaultWidth; + const width = options?.width ? String(options.width) : defaultWidth; + + valuesArray = + args.formattingValues[width] || args.formattingValues[defaultWidth]; + } else { + const defaultWidth = args.defaultWidth; + const width = options?.width ? String(options.width) : args.defaultWidth; + + valuesArray = args.values[width] || args.values[defaultWidth]; + } + const index = args.argumentCallback ? args.argumentCallback(value) : value; + + // @ts-expect-error - For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it! + return valuesArray[index]; + }; +} + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/localize.mjs + + +const eraValues = { + narrow: ["B", "A"], + abbreviated: ["BC", "AD"], + wide: ["Before Christ", "Anno Domini"], +}; + +const quarterValues = { + narrow: ["1", "2", "3", "4"], + abbreviated: ["Q1", "Q2", "Q3", "Q4"], + wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"], +}; + +// Note: in English, the names of days of the week and months are capitalized. +// If you are making a new locale based on this one, check if the same is true for the language you're working on. +// Generally, formatted dates should look like they are in the middle of a sentence, +// e.g. in Spanish language the weekdays and months should be in the lowercase. +const monthValues = { + narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], + abbreviated: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + + wide: [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ], +}; + +const dayValues = { + narrow: ["S", "M", "T", "W", "T", "F", "S"], + short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], + abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + wide: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ], +}; + +const dayPeriodValues = { + narrow: { + am: "a", + pm: "p", + midnight: "mi", + noon: "n", + morning: "morning", + afternoon: "afternoon", + evening: "evening", + night: "night", + }, + abbreviated: { + am: "AM", + pm: "PM", + midnight: "midnight", + noon: "noon", + morning: "morning", + afternoon: "afternoon", + evening: "evening", + night: "night", + }, + wide: { + am: "a.m.", + pm: "p.m.", + midnight: "midnight", + noon: "noon", + morning: "morning", + afternoon: "afternoon", + evening: "evening", + night: "night", + }, +}; + +const formattingDayPeriodValues = { + narrow: { + am: "a", + pm: "p", + midnight: "mi", + noon: "n", + morning: "in the morning", + afternoon: "in the afternoon", + evening: "in the evening", + night: "at night", + }, + abbreviated: { + am: "AM", + pm: "PM", + midnight: "midnight", + noon: "noon", + morning: "in the morning", + afternoon: "in the afternoon", + evening: "in the evening", + night: "at night", + }, + wide: { + am: "a.m.", + pm: "p.m.", + midnight: "midnight", + noon: "noon", + morning: "in the morning", + afternoon: "in the afternoon", + evening: "in the evening", + night: "at night", + }, +}; + +const ordinalNumber = (dirtyNumber, _options) => { + const number = Number(dirtyNumber); + + // If ordinal numbers depend on context, for example, + // if they are different for different grammatical genders, + // use `options.unit`. + // + // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear', + // 'day', 'hour', 'minute', 'second'. + + const rem100 = number % 100; + if (rem100 > 20 || rem100 < 10) { + switch (rem100 % 10) { + case 1: + return number + "st"; + case 2: + return number + "nd"; + case 3: + return number + "rd"; + } + } + return number + "th"; +}; + +const localize = { + ordinalNumber, + + era: buildLocalizeFn({ + values: eraValues, + defaultWidth: "wide", + }), + + quarter: buildLocalizeFn({ + values: quarterValues, + defaultWidth: "wide", + argumentCallback: (quarter) => quarter - 1, + }), + + month: buildLocalizeFn({ + values: monthValues, + defaultWidth: "wide", + }), + + day: buildLocalizeFn({ + values: dayValues, + defaultWidth: "wide", + }), + + dayPeriod: buildLocalizeFn({ + values: dayPeriodValues, + defaultWidth: "wide", + formattingValues: formattingDayPeriodValues, + defaultFormattingWidth: "wide", + }), +}; + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildMatchFn.mjs +function buildMatchFn(args) { + return (string, options = {}) => { + const width = options.width; + + const matchPattern = + (width && args.matchPatterns[width]) || + args.matchPatterns[args.defaultMatchWidth]; + const matchResult = string.match(matchPattern); + + if (!matchResult) { + return null; + } + const matchedString = matchResult[0]; + + const parsePatterns = + (width && args.parsePatterns[width]) || + args.parsePatterns[args.defaultParseWidth]; + + const key = Array.isArray(parsePatterns) + ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) + : // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type + findKey(parsePatterns, (pattern) => pattern.test(matchedString)); + + let value; + + value = args.valueCallback ? args.valueCallback(key) : key; + value = options.valueCallback + ? // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type + options.valueCallback(value) + : value; + + const rest = string.slice(matchedString.length); + + return { value, rest }; + }; +} + +function findKey(object, predicate) { + for (const key in object) { + if ( + Object.prototype.hasOwnProperty.call(object, key) && + predicate(object[key]) + ) { + return key; + } + } + return undefined; +} + +function findIndex(array, predicate) { + for (let key = 0; key < array.length; key++) { + if (predicate(array[key])) { + return key; + } + } + return undefined; +} + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs +function buildMatchPatternFn(args) { + return (string, options = {}) => { + const matchResult = string.match(args.matchPattern); + if (!matchResult) return null; + const matchedString = matchResult[0]; + + const parseResult = string.match(args.parsePattern); + if (!parseResult) return null; + let value = args.valueCallback + ? args.valueCallback(parseResult[0]) + : parseResult[0]; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type + value = options.valueCallback ? options.valueCallback(value) : value; + + const rest = string.slice(matchedString.length); + + return { value, rest }; + }; +} + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US/_lib/match.mjs + + + +const matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i; +const parseOrdinalNumberPattern = /\d+/i; + +const matchEraPatterns = { + narrow: /^(b|a)/i, + abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i, + wide: /^(before christ|before common era|anno domini|common era)/i, +}; +const parseEraPatterns = { + any: [/^b/i, /^(a|c)/i], +}; + +const matchQuarterPatterns = { + narrow: /^[1234]/i, + abbreviated: /^q[1234]/i, + wide: /^[1234](th|st|nd|rd)? quarter/i, +}; +const parseQuarterPatterns = { + any: [/1/i, /2/i, /3/i, /4/i], +}; + +const matchMonthPatterns = { + narrow: /^[jfmasond]/i, + abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i, + wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i, +}; +const parseMonthPatterns = { + narrow: [ + /^j/i, + /^f/i, + /^m/i, + /^a/i, + /^m/i, + /^j/i, + /^j/i, + /^a/i, + /^s/i, + /^o/i, + /^n/i, + /^d/i, + ], + + any: [ + /^ja/i, + /^f/i, + /^mar/i, + /^ap/i, + /^may/i, + /^jun/i, + /^jul/i, + /^au/i, + /^s/i, + /^o/i, + /^n/i, + /^d/i, + ], +}; + +const matchDayPatterns = { + narrow: /^[smtwf]/i, + short: /^(su|mo|tu|we|th|fr|sa)/i, + abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i, + wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i, +}; +const parseDayPatterns = { + narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i], + any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i], +}; + +const matchDayPeriodPatterns = { + narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i, + any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i, +}; +const parseDayPeriodPatterns = { + any: { + am: /^a/i, + pm: /^p/i, + midnight: /^mi/i, + noon: /^no/i, + morning: /morning/i, + afternoon: /afternoon/i, + evening: /evening/i, + night: /night/i, + }, +}; + +const match_match = { + ordinalNumber: buildMatchPatternFn({ + matchPattern: matchOrdinalNumberPattern, + parsePattern: parseOrdinalNumberPattern, + valueCallback: (value) => parseInt(value, 10), + }), + + era: buildMatchFn({ + matchPatterns: matchEraPatterns, + defaultMatchWidth: "wide", + parsePatterns: parseEraPatterns, + defaultParseWidth: "any", + }), + + quarter: buildMatchFn({ + matchPatterns: matchQuarterPatterns, + defaultMatchWidth: "wide", + parsePatterns: parseQuarterPatterns, + defaultParseWidth: "any", + valueCallback: (index) => index + 1, + }), + + month: buildMatchFn({ + matchPatterns: matchMonthPatterns, + defaultMatchWidth: "wide", + parsePatterns: parseMonthPatterns, + defaultParseWidth: "any", + }), + + day: buildMatchFn({ + matchPatterns: matchDayPatterns, + defaultMatchWidth: "wide", + parsePatterns: parseDayPatterns, + defaultParseWidth: "any", + }), + + dayPeriod: buildMatchFn({ + matchPatterns: matchDayPeriodPatterns, + defaultMatchWidth: "any", + parsePatterns: parseDayPeriodPatterns, + defaultParseWidth: "any", + }), +}; + +;// CONCATENATED MODULE: ./node_modules/date-fns/locale/en-US.mjs + + + + + + +/** + * @category Locales + * @summary English locale (United States). + * @language English + * @iso-639-2 eng + * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp) + * @author Lesha Koss [@leshakoss](https://github.com/leshakoss) + */ +const enUS = { + code: "en-US", + formatDistance: formatDistance, + formatLong: formatLong, + formatRelative: formatRelative, + localize: localize, + match: match_match, + options: { + weekStartsOn: 0 /* Sunday */, + firstWeekContainsDate: 1, + }, +}; + +// Fallback for modularized imports: +/* harmony default export */ const en_US = ((/* unused pure expression or super */ null && (enUS))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/defaultOptions.mjs +let defaultOptions_defaultOptions = {}; + +function defaultOptions_getDefaultOptions() { + return defaultOptions_defaultOptions; +} + +function setDefaultOptions(newOptions) { + defaultOptions_defaultOptions = newOptions; +} + +;// CONCATENATED MODULE: ./node_modules/date-fns/constants.mjs +/** + * @module constants + * @summary Useful constants * @description - * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes. + * Collection of useful date constants. * - * @param {*} value - the value to check - * @returns {boolean} true if the given value is a date - * @throws {TypeError} 1 arguments required + * The constants could be imported from `date-fns/constants`: * - * @example - * // For a valid date: - * const result = isDate(new Date()) - * //=> true + * ```ts + * import { maxTime, minTime } from "./constants/date-fns/constants"; * - * @example - * // For an invalid date: - * const result = isDate(new Date(NaN)) - * //=> true + * function isAllowedTime(time) { + * return time <= maxTime && time >= minTime; + * } + * ``` + */ + +/** + * @constant + * @name daysInWeek + * @summary Days in 1 week. + */ +const daysInWeek = 7; + +/** + * @constant + * @name daysInYear + * @summary Days in 1 year. + * + * @description + * How many days in a year. + * + * One years equals 365.2425 days according to the formula: + * + * > Leap year occures every 4 years, except for years that are divisable by 100 and not divisable by 400. + * > 1 mean year = (365+1/4-1/100+1/400) days = 365.2425 days + */ +const daysInYear = 365.2425; + +/** + * @constant + * @name maxTime + * @summary Maximum allowed time. * * @example - * // For some value: - * const result = isDate('2014-02-31') + * import { maxTime } from "./constants/date-fns/constants"; + * + * const isValid = 8640000000000001 <= maxTime; * //=> false * + * new Date(8640000000000001); + * //=> Invalid Date + */ +const maxTime = Math.pow(10, 8) * 24 * 60 * 60 * 1000; + +/** + * @constant + * @name minTime + * @summary Minimum allowed time. + * * @example - * // For an object: - * const result = isDate({}) + * import { minTime } from "./constants/date-fns/constants"; + * + * const isValid = -8640000000000001 >= minTime; * //=> false + * + * new Date(-8640000000000001) + * //=> Invalid Date */ +const minTime = -maxTime; -function isDate(value) { - requiredArgs_requiredArgs(1, arguments); - return value instanceof Date || isDate_typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]'; +/** + * @constant + * @name millisecondsInWeek + * @summary Milliseconds in 1 week. + */ +const millisecondsInWeek = 604800000; + +/** + * @constant + * @name millisecondsInDay + * @summary Milliseconds in 1 day. + */ +const millisecondsInDay = 86400000; + +/** + * @constant + * @name millisecondsInMinute + * @summary Milliseconds in 1 minute + */ +const millisecondsInMinute = 60000; + +/** + * @constant + * @name millisecondsInHour + * @summary Milliseconds in 1 hour + */ +const millisecondsInHour = 3600000; + +/** + * @constant + * @name millisecondsInSecond + * @summary Milliseconds in 1 second + */ +const millisecondsInSecond = 1000; + +/** + * @constant + * @name minutesInYear + * @summary Minutes in 1 year. + */ +const minutesInYear = 525600; + +/** + * @constant + * @name minutesInMonth + * @summary Minutes in 1 month. + */ +const minutesInMonth = 43200; + +/** + * @constant + * @name minutesInDay + * @summary Minutes in 1 day. + */ +const minutesInDay = 1440; + +/** + * @constant + * @name minutesInHour + * @summary Minutes in 1 hour. + */ +const minutesInHour = 60; + +/** + * @constant + * @name monthsInQuarter + * @summary Months in 1 quarter. + */ +const monthsInQuarter = 3; + +/** + * @constant + * @name monthsInYear + * @summary Months in 1 year. + */ +const monthsInYear = 12; + +/** + * @constant + * @name quartersInYear + * @summary Quarters in 1 year + */ +const quartersInYear = 4; + +/** + * @constant + * @name secondsInHour + * @summary Seconds in 1 hour. + */ +const secondsInHour = 3600; + +/** + * @constant + * @name secondsInMinute + * @summary Seconds in 1 minute. + */ +const secondsInMinute = 60; + +/** + * @constant + * @name secondsInDay + * @summary Seconds in 1 day. + */ +const secondsInDay = secondsInHour * 24; + +/** + * @constant + * @name secondsInWeek + * @summary Seconds in 1 week. + */ +const secondsInWeek = secondsInDay * 7; + +/** + * @constant + * @name secondsInYear + * @summary Seconds in 1 year. + */ +const secondsInYear = secondsInDay * daysInYear; + +/** + * @constant + * @name secondsInMonth + * @summary Seconds in 1 month + */ +const secondsInMonth = secondsInYear / 12; + +/** + * @constant + * @name secondsInQuarter + * @summary Seconds in 1 quarter. + */ +const secondsInQuarter = secondsInMonth * 3; + +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.mjs + + +/** + * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds. + * They usually appear for dates that denote time before the timezones were introduced + * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891 + * and GMT+01:00:00 after that date) + * + * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above, + * which would lead to incorrect calculations. + * + * This function returns the timezone offset in milliseconds that takes seconds in account. + */ +function getTimezoneOffsetInMilliseconds(date) { + const _date = toDate_toDate(date); + const utcDate = new Date( + Date.UTC( + _date.getFullYear(), + _date.getMonth(), + _date.getDate(), + _date.getHours(), + _date.getMinutes(), + _date.getSeconds(), + _date.getMilliseconds(), + ), + ); + utcDate.setUTCFullYear(_date.getFullYear()); + return +date - +utcDate; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isValid/index.js + +;// CONCATENATED MODULE: ./node_modules/date-fns/differenceInCalendarDays.mjs + /** - * @name isValid - * @category Common Helpers - * @summary Is the given date valid? + * @name differenceInCalendarDays + * @category Day Helpers + * @summary Get the number of calendar days between the given dates. * * @description - * Returns false if argument is Invalid Date and true otherwise. - * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate} - * Invalid Date is a Date, whose time value is NaN. + * Get the number of calendar days between the given dates. This means that the times are removed + * from the dates and then the difference in days is calculated. * - * Time value of Date: http://es5.github.io/#x15.9.1.1 + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). * - * @param {*} date - the date to check - * @returns {Boolean} the date is valid - * @throws {TypeError} 1 argument required + * @param dateLeft - The later date + * @param dateRight - The earlier date * - * @example - * // For the valid date: - * const result = isValid(new Date(2014, 1, 31)) - * //=> true + * @returns The number of calendar days * * @example - * // For the value, convertable into a date: - * const result = isValid(1393804800000) - * //=> true + * // How many calendar days are between + * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00? + * const result = differenceInCalendarDays( + * new Date(2012, 6, 2, 0, 0), + * new Date(2011, 6, 2, 23, 0) + * ) + * //=> 366 + * // How many calendar days are between + * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00? + * const result = differenceInCalendarDays( + * new Date(2011, 6, 3, 0, 1), + * new Date(2011, 6, 2, 23, 59) + * ) + * //=> 1 + */ +function differenceInCalendarDays(dateLeft, dateRight) { + const startOfDayLeft = startOfDay_startOfDay(dateLeft); + const startOfDayRight = startOfDay_startOfDay(dateRight); + + const timestampLeft = + +startOfDayLeft - getTimezoneOffsetInMilliseconds(startOfDayLeft); + const timestampRight = + +startOfDayRight - getTimezoneOffsetInMilliseconds(startOfDayRight); + + // Round the number of days to the nearest integer because the number of + // milliseconds in a day is not constant (e.g. it's different in the week of + // the daylight saving time clock shift). + return Math.round((timestampLeft - timestampRight) / millisecondsInDay); +} + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_differenceInCalendarDays = ((/* unused pure expression or super */ null && (differenceInCalendarDays))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfYear.mjs + + + +/** + * @name startOfYear + * @category Year Helpers + * @summary Return the start of a year for the given date. + * + * @description + * Return the start of a year for the given date. + * The result will be in the local timezone. + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of a year * * @example - * // For the invalid date: - * const result = isValid(new Date('')) - * //=> false + * // The start of a year for 2 September 2014 11:55:00: + * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00)) + * //=> Wed Jan 01 2014 00:00:00 */ +function startOfYear(date) { + const cleanDate = toDate_toDate(date); + const _date = constructFrom_constructFrom(date, 0); + _date.setFullYear(cleanDate.getFullYear(), 0, 1); + _date.setHours(0, 0, 0, 0); + return _date; +} -function isValid(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfYear = ((/* unused pure expression or super */ null && (startOfYear))); - if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') { - return false; - } +;// CONCATENATED MODULE: ./node_modules/date-fns/getDayOfYear.mjs - var date = toDate_toDate(dirtyDate); - return !isNaN(Number(date)); -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMilliseconds/index.js /** - * @name addMilliseconds - * @category Millisecond Helpers - * @summary Add the specified number of milliseconds to the given date. + * @name getDayOfYear + * @category Day Helpers + * @summary Get the day of the year of the given date. * * @description - * Add the specified number of milliseconds to the given date. + * Get the day of the year of the given date. + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the milliseconds added - * @throws {TypeError} 2 arguments required + * @param date - The given date + * + * @returns The day of year * * @example - * // Add 750 milliseconds to 10 July 2014 12:45:30.000: - * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750) - * //=> Thu Jul 10 2014 12:45:30.750 + * // Which day of the year is 2 July 2014? + * const result = getDayOfYear(new Date(2014, 6, 2)) + * //=> 183 */ - -function addMilliseconds(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var timestamp = toDate_toDate(dirtyDate).getTime(); - var amount = toInteger_toInteger(dirtyAmount); - return new Date(timestamp + amount); +function getDayOfYear(date) { + const _date = toDate_toDate(date); + const diff = differenceInCalendarDays(_date, startOfYear(_date)); + const dayOfYear = diff + 1; + return dayOfYear; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMilliseconds/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getDayOfYear = ((/* unused pure expression or super */ null && (getDayOfYear))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfWeek.mjs /** - * @name subMilliseconds - * @category Millisecond Helpers - * @summary Subtract the specified number of milliseconds from the given date. + * The {@link startOfWeek} function options. + */ + +/** + * @name startOfWeek + * @category Week Helpers + * @summary Return the start of a week for the given date. * * @description - * Subtract the specified number of milliseconds from the given date. + * Return the start of a week for the given date. + * The result will be in the local timezone. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the milliseconds subtracted - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param options - An object with options + * + * @returns The start of a week + * + * @example + * // The start of a week for 2 September 2014 11:55:00: + * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0)) + * //=> Sun Aug 31 2014 00:00:00 * * @example - * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000: - * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750) - * //=> Thu Jul 10 2014 12:45:29.250 + * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00: + * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) + * //=> Mon Sep 01 2014 00:00:00 */ +function startOfWeek_startOfWeek(date, options) { + const defaultOptions = defaultOptions_getDefaultOptions(); + const weekStartsOn = + options?.weekStartsOn ?? + options?.locale?.options?.weekStartsOn ?? + defaultOptions.weekStartsOn ?? + defaultOptions.locale?.options?.weekStartsOn ?? + 0; -function subMilliseconds(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var amount = toInteger_toInteger(dirtyAmount); - return addMilliseconds(dirtyDate, -amount); + const _date = toDate_toDate(date); + const day = _date.getDay(); + const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; + + _date.setDate(_date.getDate() - diff); + _date.setHours(0, 0, 0, 0); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCDayOfYear/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfWeek = ((/* unused pure expression or super */ null && (startOfWeek_startOfWeek))); -var MILLISECONDS_IN_DAY = 86400000; -function getUTCDayOfYear(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var timestamp = date.getTime(); - date.setUTCMonth(0, 1); - date.setUTCHours(0, 0, 0, 0); - var startOfYearTimestamp = date.getTime(); - var difference = timestamp - startOfYearTimestamp; - return Math.floor(difference / MILLISECONDS_IN_DAY) + 1; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeek/index.js +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfISOWeek.mjs -function startOfUTCISOWeek(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var weekStartsOn = 1; - var date = toDate_toDate(dirtyDate); - var day = date.getUTCDay(); - var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; - date.setUTCDate(date.getUTCDate() - diff); - date.setUTCHours(0, 0, 0, 0); - return date; +/** + * @name startOfISOWeek + * @category ISO Week Helpers + * @summary Return the start of an ISO week for the given date. + * + * @description + * Return the start of an ISO week for the given date. + * The result will be in the local timezone. + * + * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of an ISO week + * + * @example + * // The start of an ISO week for 2 September 2014 11:55:00: + * const result = startOfISOWeek(new Date(2014, 8, 2, 11, 55, 0)) + * //=> Mon Sep 01 2014 00:00:00 + */ +function startOfISOWeek(date) { + return startOfWeek_startOfWeek(date, { weekStartsOn: 1 }); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeekYear/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfISOWeek = ((/* unused pure expression or super */ null && (startOfISOWeek))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/getISOWeekYear.mjs + + + + +/** + * @name getISOWeekYear + * @category ISO Week-Numbering Year Helpers + * @summary Get the ISO week-numbering year of the given date. + * + * @description + * Get the ISO week-numbering year of the given date, + * which always starts 3 days before the year's first Thursday. + * + * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * + * @returns The ISO week-numbering year + * + * @example + * // Which ISO-week numbering year is 2 January 2005? + * const result = getISOWeekYear(new Date(2005, 0, 2)) + * //=> 2004 + */ +function getISOWeekYear(date) { + const _date = toDate_toDate(date); + const year = _date.getFullYear(); + const fourthOfJanuaryOfNextYear = constructFrom_constructFrom(date, 0); + fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4); + fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0); + const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear); -function getUTCISOWeekYear(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var year = date.getUTCFullYear(); - var fourthOfJanuaryOfNextYear = new Date(0); - fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4); - fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0); - var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear); - var fourthOfJanuaryOfThisYear = new Date(0); - fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4); - fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0); - var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear); + const fourthOfJanuaryOfThisYear = constructFrom_constructFrom(date, 0); + fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4); + fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0); + const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear); - if (date.getTime() >= startOfNextYear.getTime()) { + if (_date.getTime() >= startOfNextYear.getTime()) { return year + 1; - } else if (date.getTime() >= startOfThisYear.getTime()) { + } else if (_date.getTime() >= startOfThisYear.getTime()) { return year; } else { return year - 1; } } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeekYear/index.js - +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getISOWeekYear = ((/* unused pure expression or super */ null && (getISOWeekYear))); -function startOfUTCISOWeekYear(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var year = getUTCISOWeekYear(dirtyDate); - var fourthOfJanuary = new Date(0); - fourthOfJanuary.setUTCFullYear(year, 0, 4); - fourthOfJanuary.setUTCHours(0, 0, 0, 0); - var date = startOfUTCISOWeek(fourthOfJanuary); - return date; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeek/index.js - +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfISOWeekYear.mjs -var MILLISECONDS_IN_WEEK = 604800000; -function getUTCISOWeek(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime(); // Round the number of days to the nearest integer - // because the number of milliseconds in a week is not constant - // (e.g. it's different in the week of the daylight saving time clock shift) - return Math.round(diff / MILLISECONDS_IN_WEEK) + 1; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultOptions/index.js -var defaultOptions_defaultOptions = {}; -function defaultOptions_getDefaultOptions() { - return defaultOptions_defaultOptions; -} -function setDefaultOptions(newOptions) { - defaultOptions_defaultOptions = newOptions; +/** + * @name startOfISOWeekYear + * @category ISO Week-Numbering Year Helpers + * @summary Return the start of an ISO week-numbering year for the given date. + * + * @description + * Return the start of an ISO week-numbering year, + * which always starts 3 days before the year's first Thursday. + * The result will be in the local timezone. + * + * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of an ISO week-numbering year + * + * @example + * // The start of an ISO week-numbering year for 2 July 2005: + * const result = startOfISOWeekYear(new Date(2005, 6, 2)) + * //=> Mon Jan 03 2005 00:00:00 + */ +function startOfISOWeekYear(date) { + const year = getISOWeekYear(date); + const fourthOfJanuary = constructFrom_constructFrom(date, 0); + fourthOfJanuary.setFullYear(year, 0, 4); + fourthOfJanuary.setHours(0, 0, 0, 0); + return startOfISOWeek(fourthOfJanuary); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeek/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfISOWeekYear = ((/* unused pure expression or super */ null && (startOfISOWeekYear))); +;// CONCATENATED MODULE: ./node_modules/date-fns/getISOWeek.mjs -function startOfUTCWeek(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; - requiredArgs_requiredArgs(1, arguments); - var defaultOptions = defaultOptions_getDefaultOptions(); - var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } - var date = toDate_toDate(dirtyDate); - var day = date.getUTCDay(); - var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; - date.setUTCDate(date.getUTCDate() - diff); - date.setUTCHours(0, 0, 0, 0); - return date; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeekYear/index.js +/** + * @name getISOWeek + * @category ISO Week Helpers + * @summary Get the ISO week of the given date. + * + * @description + * Get the ISO week of the given date. + * + * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * + * @returns The ISO week + * + * @example + * // Which week of the ISO-week numbering year is 2 January 2005? + * const result = getISOWeek(new Date(2005, 0, 2)) + * //=> 53 + */ +function getISOWeek(date) { + const _date = toDate_toDate(date); + const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date); + // Round the number of weeks to the nearest integer because the number of + // milliseconds in a week is not constant (e.g. it's different in the week of + // the daylight saving time clock shift). + return Math.round(diff / millisecondsInWeek) + 1; +} +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getISOWeek = ((/* unused pure expression or super */ null && (getISOWeek))); +;// CONCATENATED MODULE: ./node_modules/date-fns/getWeekYear.mjs -function getUTCWeekYear(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var year = date.getUTCFullYear(); - var defaultOptions = defaultOptions_getDefaultOptions(); - var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN - if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) { - throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively'); - } - var firstWeekOfNextYear = new Date(0); - firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate); - firstWeekOfNextYear.setUTCHours(0, 0, 0, 0); - var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options); - var firstWeekOfThisYear = new Date(0); - firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate); - firstWeekOfThisYear.setUTCHours(0, 0, 0, 0); - var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options); +/** + * The {@link getWeekYear} function options. + */ - if (date.getTime() >= startOfNextYear.getTime()) { +/** + * @name getWeekYear + * @category Week-Numbering Year Helpers + * @summary Get the local week-numbering year of the given date. + * + * @description + * Get the local week-numbering year of the given date. + * The exact calculation depends on the values of + * `options.weekStartsOn` (which is the index of the first day of the week) + * and `options.firstWeekContainsDate` (which is the day of January, which is always in + * the first week of the week-numbering year) + * + * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * @param options - An object with options. + * + * @returns The local week-numbering year + * + * @example + * // Which week numbering year is 26 December 2004 with the default settings? + * const result = getWeekYear(new Date(2004, 11, 26)) + * //=> 2005 + * + * @example + * // Which week numbering year is 26 December 2004 if week starts on Saturday? + * const result = getWeekYear(new Date(2004, 11, 26), { weekStartsOn: 6 }) + * //=> 2004 + * + * @example + * // Which week numbering year is 26 December 2004 if the first week contains 4 January? + * const result = getWeekYear(new Date(2004, 11, 26), { firstWeekContainsDate: 4 }) + * //=> 2004 + */ +function getWeekYear(date, options) { + const _date = toDate_toDate(date); + const year = _date.getFullYear(); + + const defaultOptions = defaultOptions_getDefaultOptions(); + const firstWeekContainsDate = + options?.firstWeekContainsDate ?? + options?.locale?.options?.firstWeekContainsDate ?? + defaultOptions.firstWeekContainsDate ?? + defaultOptions.locale?.options?.firstWeekContainsDate ?? + 1; + + const firstWeekOfNextYear = constructFrom_constructFrom(date, 0); + firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate); + firstWeekOfNextYear.setHours(0, 0, 0, 0); + const startOfNextYear = startOfWeek_startOfWeek(firstWeekOfNextYear, options); + + const firstWeekOfThisYear = constructFrom_constructFrom(date, 0); + firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate); + firstWeekOfThisYear.setHours(0, 0, 0, 0); + const startOfThisYear = startOfWeek_startOfWeek(firstWeekOfThisYear, options); + + if (_date.getTime() >= startOfNextYear.getTime()) { return year + 1; - } else if (date.getTime() >= startOfThisYear.getTime()) { + } else if (_date.getTime() >= startOfThisYear.getTime()) { return year; } else { return year - 1; } } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeekYear/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getWeekYear = ((/* unused pure expression or super */ null && (getWeekYear))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfWeekYear.mjs + +/** + * The {@link startOfWeekYear} function options. + */ -function startOfUTCWeekYear(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; +/** + * @name startOfWeekYear + * @category Week-Numbering Year Helpers + * @summary Return the start of a local week-numbering year for the given date. + * + * @description + * Return the start of a local week-numbering year. + * The exact calculation depends on the values of + * `options.weekStartsOn` (which is the index of the first day of the week) + * and `options.firstWeekContainsDate` (which is the day of January, which is always in + * the first week of the week-numbering year) + * + * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param options - An object with options + * + * @returns The start of a week-numbering year + * + * @example + * // The start of an a week-numbering year for 2 July 2005 with default settings: + * const result = startOfWeekYear(new Date(2005, 6, 2)) + * //=> Sun Dec 26 2004 00:00:00 + * + * @example + * // The start of a week-numbering year for 2 July 2005 + * // if Monday is the first day of week + * // and 4 January is always in the first week of the year: + * const result = startOfWeekYear(new Date(2005, 6, 2), { + * weekStartsOn: 1, + * firstWeekContainsDate: 4 + * }) + * //=> Mon Jan 03 2005 00:00:00 + */ +function startOfWeekYear(date, options) { + const defaultOptions = defaultOptions_getDefaultOptions(); + const firstWeekContainsDate = + options?.firstWeekContainsDate ?? + options?.locale?.options?.firstWeekContainsDate ?? + defaultOptions.firstWeekContainsDate ?? + defaultOptions.locale?.options?.firstWeekContainsDate ?? + 1; - requiredArgs_requiredArgs(1, arguments); - var defaultOptions = defaultOptions_getDefaultOptions(); - var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1); - var year = getUTCWeekYear(dirtyDate, options); - var firstWeek = new Date(0); - firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate); - firstWeek.setUTCHours(0, 0, 0, 0); - var date = startOfUTCWeek(firstWeek, options); - return date; + const year = getWeekYear(date, options); + const firstWeek = constructFrom_constructFrom(date, 0); + firstWeek.setFullYear(year, 0, firstWeekContainsDate); + firstWeek.setHours(0, 0, 0, 0); + const _date = startOfWeek_startOfWeek(firstWeek, options); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeek/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfWeekYear = ((/* unused pure expression or super */ null && (startOfWeekYear))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/getWeek.mjs + + + +/** + * The {@link getWeek} function options. + */ +/** + * @name getWeek + * @category Week Helpers + * @summary Get the local week index of the given date. + * + * @description + * Get the local week index of the given date. + * The exact calculation depends on the values of + * `options.weekStartsOn` (which is the index of the first day of the week) + * and `options.firstWeekContainsDate` (which is the day of January, which is always in + * the first week of the week-numbering year) + * + * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * @param options - An object with options + * + * @returns The week + * + * @example + * // Which week of the local week numbering year is 2 January 2005 with default options? + * const result = getWeek(new Date(2005, 0, 2)) + * //=> 2 + * + * @example + * // Which week of the local week numbering year is 2 January 2005, + * // if Monday is the first day of the week, + * // and the first week of the year always contains 4 January? + * const result = getWeek(new Date(2005, 0, 2), { + * weekStartsOn: 1, + * firstWeekContainsDate: 4 + * }) + * //=> 53 + */ -var getUTCWeek_MILLISECONDS_IN_WEEK = 604800000; -function getUTCWeek(dirtyDate, options) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime(); // Round the number of days to the nearest integer - // because the number of milliseconds in a week is not constant - // (e.g. it's different in the week of the daylight saving time clock shift) +function getWeek(date, options) { + const _date = toDate_toDate(date); + const diff = +startOfWeek_startOfWeek(_date, options) - +startOfWeekYear(_date, options); - return Math.round(diff / getUTCWeek_MILLISECONDS_IN_WEEK) + 1; + // Round the number of weeks to the nearest integer because the number of + // milliseconds in a week is not constant (e.g. it's different in the week of + // the daylight saving time clock shift). + return Math.round(diff / millisecondsInWeek) + 1; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/addLeadingZeros/index.js -function addLeadingZeros(number, targetLength) { - var sign = number < 0 ? '-' : ''; - var output = Math.abs(number).toString(); - while (output.length < targetLength) { - output = '0' + output; - } +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getWeek = ((/* unused pure expression or super */ null && (getWeek))); +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/addLeadingZeros.mjs +function addLeadingZeros(number, targetLength) { + const sign = number < 0 ? "-" : ""; + const output = Math.abs(number).toString().padStart(targetLength, "0"); return sign + output; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/lightFormatters/index.js + +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/lightFormatters.mjs + /* * | | Unit | | Unit | @@ -54163,9 +54592,9 @@ function addLeadingZeros(number, targetLength) { * Letters marked by * are not implemented but reserved by Unicode standard. */ -var formatters = { +const lightFormatters = { // Year - y: function y(date, token) { + y(date, token) { // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens // | Year | y | yy | yyy | yyyy | yyyyy | // |----------|-------|----|-------|-------|-------| @@ -54174,66 +54603,74 @@ var formatters = { // | AD 123 | 123 | 23 | 123 | 0123 | 00123 | // | AD 1234 | 1234 | 34 | 1234 | 1234 | 01234 | // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 | - var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript) - var year = signedYear > 0 ? signedYear : 1 - signedYear; - return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length); + const signedYear = date.getFullYear(); + // Returns 1 for 1 BC (which is year 0 in JavaScript) + const year = signedYear > 0 ? signedYear : 1 - signedYear; + return addLeadingZeros(token === "yy" ? year % 100 : year, token.length); }, + // Month - M: function M(date, token) { - var month = date.getUTCMonth(); - return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2); + M(date, token) { + const month = date.getMonth(); + return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2); }, + // Day of the month - d: function d(date, token) { - return addLeadingZeros(date.getUTCDate(), token.length); + d(date, token) { + return addLeadingZeros(date.getDate(), token.length); }, + // AM or PM - a: function a(date, token) { - var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am'; + a(date, token) { + const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am"; switch (token) { - case 'a': - case 'aa': + case "a": + case "aa": return dayPeriodEnumValue.toUpperCase(); - - case 'aaa': + case "aaa": return dayPeriodEnumValue; - - case 'aaaaa': + case "aaaaa": return dayPeriodEnumValue[0]; - - case 'aaaa': + case "aaaa": default: - return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.'; + return dayPeriodEnumValue === "am" ? "a.m." : "p.m."; } }, + // Hour [1-12] - h: function h(date, token) { - return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length); + h(date, token) { + return addLeadingZeros(date.getHours() % 12 || 12, token.length); }, + // Hour [0-23] - H: function H(date, token) { - return addLeadingZeros(date.getUTCHours(), token.length); + H(date, token) { + return addLeadingZeros(date.getHours(), token.length); }, + // Minute - m: function m(date, token) { - return addLeadingZeros(date.getUTCMinutes(), token.length); + m(date, token) { + return addLeadingZeros(date.getMinutes(), token.length); }, + // Second - s: function s(date, token) { - return addLeadingZeros(date.getUTCSeconds(), token.length); + s(date, token) { + return addLeadingZeros(date.getSeconds(), token.length); }, + // Fraction of second - S: function S(date, token) { - var numberOfDigits = token.length; - var milliseconds = date.getUTCMilliseconds(); - var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3)); + S(date, token) { + const numberOfDigits = token.length; + const milliseconds = date.getMilliseconds(); + const fractionalSeconds = Math.trunc( + milliseconds * Math.pow(10, numberOfDigits - 3), + ); return addLeadingZeros(fractionalSeconds, token.length); - } + }, }; -/* harmony default export */ const lightFormatters = (formatters); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/formatters/index.js + +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/formatters.mjs @@ -54241,15 +54678,16 @@ var formatters = { -var dayPeriodEnum = { - am: 'am', - pm: 'pm', - midnight: 'midnight', - noon: 'noon', - morning: 'morning', - afternoon: 'afternoon', - evening: 'evening', - night: 'night' + +const dayPeriodEnum = { + am: "am", + pm: "pm", + midnight: "midnight", + noon: "noon", + morning: "morning", + afternoon: "afternoon", + evening: "evening", + night: "night", }; /* @@ -54297,75 +54735,69 @@ var dayPeriodEnum = { * - `P` is long localized date format * - `p` is long localized time format */ -var formatters_formatters = { - // Era - G: function G(date, token, localize) { - var era = date.getUTCFullYear() > 0 ? 1 : 0; +const formatters = { + // Era + G: function (date, token, localize) { + const era = date.getFullYear() > 0 ? 1 : 0; switch (token) { // AD, BC - case 'G': - case 'GG': - case 'GGG': - return localize.era(era, { - width: 'abbreviated' - }); + case "G": + case "GG": + case "GGG": + return localize.era(era, { width: "abbreviated" }); // A, B - - case 'GGGGG': - return localize.era(era, { - width: 'narrow' - }); + case "GGGGG": + return localize.era(era, { width: "narrow" }); // Anno Domini, Before Christ - - case 'GGGG': + case "GGGG": default: - return localize.era(era, { - width: 'wide' - }); + return localize.era(era, { width: "wide" }); } }, + // Year - y: function y(date, token, localize) { + y: function (date, token, localize) { // Ordinal number - if (token === 'yo') { - var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript) - - var year = signedYear > 0 ? signedYear : 1 - signedYear; - return localize.ordinalNumber(year, { - unit: 'year' - }); + if (token === "yo") { + const signedYear = date.getFullYear(); + // Returns 1 for 1 BC (which is year 0 in JavaScript) + const year = signedYear > 0 ? signedYear : 1 - signedYear; + return localize.ordinalNumber(year, { unit: "year" }); } return lightFormatters.y(date, token); }, - // Local week-numbering year - Y: function Y(date, token, localize, options) { - var signedWeekYear = getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript) - var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; // Two digit year - - if (token === 'YY') { - var twoDigitYear = weekYear % 100; + // Local week-numbering year + Y: function (date, token, localize, options) { + const signedWeekYear = getWeekYear(date, options); + // Returns 1 for 1 BC (which is year 0 in JavaScript) + const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; + + // Two digit year + if (token === "YY") { + const twoDigitYear = weekYear % 100; return addLeadingZeros(twoDigitYear, 2); - } // Ordinal number - - - if (token === 'Yo') { - return localize.ordinalNumber(weekYear, { - unit: 'year' - }); - } // Padding + } + // Ordinal number + if (token === "Yo") { + return localize.ordinalNumber(weekYear, { unit: "year" }); + } + // Padding return addLeadingZeros(weekYear, token.length); }, + // ISO week-numbering year - R: function R(date, token) { - var isoWeekYear = getUTCISOWeekYear(date); // Padding + R: function (date, token) { + const isoWeekYear = getISOWeekYear(date); + // Padding return addLeadingZeros(isoWeekYear, token.length); }, + // Extended year. This is a single number designating the year of this calendar system. // The main difference between `y` and `u` localizers are B.C. years: // | Year | `y` | `u` | @@ -54375,484 +54807,419 @@ var formatters_formatters = { // | BC 2 | 2 | -1 | // Also `yy` always returns the last two digits of a year, // while `uu` pads single digit years to 2 characters and returns other years unchanged. - u: function u(date, token) { - var year = date.getUTCFullYear(); + u: function (date, token) { + const year = date.getFullYear(); return addLeadingZeros(year, token.length); }, - // Quarter - Q: function Q(date, token, localize) { - var quarter = Math.ceil((date.getUTCMonth() + 1) / 3); + // Quarter + Q: function (date, token, localize) { + const quarter = Math.ceil((date.getMonth() + 1) / 3); switch (token) { // 1, 2, 3, 4 - case 'Q': + case "Q": return String(quarter); // 01, 02, 03, 04 - - case 'QQ': + case "QQ": return addLeadingZeros(quarter, 2); // 1st, 2nd, 3rd, 4th - - case 'Qo': - return localize.ordinalNumber(quarter, { - unit: 'quarter' - }); + case "Qo": + return localize.ordinalNumber(quarter, { unit: "quarter" }); // Q1, Q2, Q3, Q4 - - case 'QQQ': + case "QQQ": return localize.quarter(quarter, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); // 1, 2, 3, 4 (narrow quarter; could be not numerical) - - case 'QQQQQ': + case "QQQQQ": return localize.quarter(quarter, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); // 1st quarter, 2nd quarter, ... - - case 'QQQQ': + case "QQQQ": default: return localize.quarter(quarter, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, - // Stand-alone quarter - q: function q(date, token, localize) { - var quarter = Math.ceil((date.getUTCMonth() + 1) / 3); + // Stand-alone quarter + q: function (date, token, localize) { + const quarter = Math.ceil((date.getMonth() + 1) / 3); switch (token) { // 1, 2, 3, 4 - case 'q': + case "q": return String(quarter); // 01, 02, 03, 04 - - case 'qq': + case "qq": return addLeadingZeros(quarter, 2); // 1st, 2nd, 3rd, 4th - - case 'qo': - return localize.ordinalNumber(quarter, { - unit: 'quarter' - }); + case "qo": + return localize.ordinalNumber(quarter, { unit: "quarter" }); // Q1, Q2, Q3, Q4 - - case 'qqq': + case "qqq": return localize.quarter(quarter, { - width: 'abbreviated', - context: 'standalone' + width: "abbreviated", + context: "standalone", }); // 1, 2, 3, 4 (narrow quarter; could be not numerical) - - case 'qqqqq': + case "qqqqq": return localize.quarter(quarter, { - width: 'narrow', - context: 'standalone' + width: "narrow", + context: "standalone", }); // 1st quarter, 2nd quarter, ... - - case 'qqqq': + case "qqqq": default: return localize.quarter(quarter, { - width: 'wide', - context: 'standalone' + width: "wide", + context: "standalone", }); } }, - // Month - M: function M(date, token, localize) { - var month = date.getUTCMonth(); + // Month + M: function (date, token, localize) { + const month = date.getMonth(); switch (token) { - case 'M': - case 'MM': + case "M": + case "MM": return lightFormatters.M(date, token); // 1st, 2nd, ..., 12th - - case 'Mo': - return localize.ordinalNumber(month + 1, { - unit: 'month' - }); + case "Mo": + return localize.ordinalNumber(month + 1, { unit: "month" }); // Jan, Feb, ..., Dec - - case 'MMM': + case "MMM": return localize.month(month, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); // J, F, ..., D - - case 'MMMMM': + case "MMMMM": return localize.month(month, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); // January, February, ..., December - - case 'MMMM': + case "MMMM": default: - return localize.month(month, { - width: 'wide', - context: 'formatting' - }); + return localize.month(month, { width: "wide", context: "formatting" }); } }, - // Stand-alone month - L: function L(date, token, localize) { - var month = date.getUTCMonth(); + // Stand-alone month + L: function (date, token, localize) { + const month = date.getMonth(); switch (token) { // 1, 2, ..., 12 - case 'L': + case "L": return String(month + 1); // 01, 02, ..., 12 - - case 'LL': + case "LL": return addLeadingZeros(month + 1, 2); // 1st, 2nd, ..., 12th - - case 'Lo': - return localize.ordinalNumber(month + 1, { - unit: 'month' - }); + case "Lo": + return localize.ordinalNumber(month + 1, { unit: "month" }); // Jan, Feb, ..., Dec - - case 'LLL': + case "LLL": return localize.month(month, { - width: 'abbreviated', - context: 'standalone' + width: "abbreviated", + context: "standalone", }); // J, F, ..., D - - case 'LLLLL': + case "LLLLL": return localize.month(month, { - width: 'narrow', - context: 'standalone' + width: "narrow", + context: "standalone", }); // January, February, ..., December - - case 'LLLL': + case "LLLL": default: - return localize.month(month, { - width: 'wide', - context: 'standalone' - }); + return localize.month(month, { width: "wide", context: "standalone" }); } }, + // Local week of year - w: function w(date, token, localize, options) { - var week = getUTCWeek(date, options); + w: function (date, token, localize, options) { + const week = getWeek(date, options); - if (token === 'wo') { - return localize.ordinalNumber(week, { - unit: 'week' - }); + if (token === "wo") { + return localize.ordinalNumber(week, { unit: "week" }); } return addLeadingZeros(week, token.length); }, + // ISO week of year - I: function I(date, token, localize) { - var isoWeek = getUTCISOWeek(date); + I: function (date, token, localize) { + const isoWeek = getISOWeek(date); - if (token === 'Io') { - return localize.ordinalNumber(isoWeek, { - unit: 'week' - }); + if (token === "Io") { + return localize.ordinalNumber(isoWeek, { unit: "week" }); } return addLeadingZeros(isoWeek, token.length); }, + // Day of the month - d: function d(date, token, localize) { - if (token === 'do') { - return localize.ordinalNumber(date.getUTCDate(), { - unit: 'date' - }); + d: function (date, token, localize) { + if (token === "do") { + return localize.ordinalNumber(date.getDate(), { unit: "date" }); } return lightFormatters.d(date, token); }, + // Day of year - D: function D(date, token, localize) { - var dayOfYear = getUTCDayOfYear(date); + D: function (date, token, localize) { + const dayOfYear = getDayOfYear(date); - if (token === 'Do') { - return localize.ordinalNumber(dayOfYear, { - unit: 'dayOfYear' - }); + if (token === "Do") { + return localize.ordinalNumber(dayOfYear, { unit: "dayOfYear" }); } return addLeadingZeros(dayOfYear, token.length); }, - // Day of week - E: function E(date, token, localize) { - var dayOfWeek = date.getUTCDay(); + // Day of week + E: function (date, token, localize) { + const dayOfWeek = date.getDay(); switch (token) { // Tue - case 'E': - case 'EE': - case 'EEE': + case "E": + case "EE": + case "EEE": return localize.day(dayOfWeek, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); // T - - case 'EEEEE': + case "EEEEE": return localize.day(dayOfWeek, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); // Tu - - case 'EEEEEE': + case "EEEEEE": return localize.day(dayOfWeek, { - width: 'short', - context: 'formatting' + width: "short", + context: "formatting", }); // Tuesday - - case 'EEEE': + case "EEEE": default: return localize.day(dayOfWeek, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, - // Local day of week - e: function e(date, token, localize, options) { - var dayOfWeek = date.getUTCDay(); - var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; + // Local day of week + e: function (date, token, localize, options) { + const dayOfWeek = date.getDay(); + const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; switch (token) { // Numerical value (Nth day of week with current locale or weekStartsOn) - case 'e': + case "e": return String(localDayOfWeek); // Padded numerical value - - case 'ee': + case "ee": return addLeadingZeros(localDayOfWeek, 2); // 1st, 2nd, ..., 7th - - case 'eo': - return localize.ordinalNumber(localDayOfWeek, { - unit: 'day' - }); - - case 'eee': + case "eo": + return localize.ordinalNumber(localDayOfWeek, { unit: "day" }); + case "eee": return localize.day(dayOfWeek, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); // T - - case 'eeeee': + case "eeeee": return localize.day(dayOfWeek, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); // Tu - - case 'eeeeee': + case "eeeeee": return localize.day(dayOfWeek, { - width: 'short', - context: 'formatting' + width: "short", + context: "formatting", }); // Tuesday - - case 'eeee': + case "eeee": default: return localize.day(dayOfWeek, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, - // Stand-alone local day of week - c: function c(date, token, localize, options) { - var dayOfWeek = date.getUTCDay(); - var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; + // Stand-alone local day of week + c: function (date, token, localize, options) { + const dayOfWeek = date.getDay(); + const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; switch (token) { // Numerical value (same as in `e`) - case 'c': + case "c": return String(localDayOfWeek); // Padded numerical value - - case 'cc': + case "cc": return addLeadingZeros(localDayOfWeek, token.length); // 1st, 2nd, ..., 7th - - case 'co': - return localize.ordinalNumber(localDayOfWeek, { - unit: 'day' - }); - - case 'ccc': + case "co": + return localize.ordinalNumber(localDayOfWeek, { unit: "day" }); + case "ccc": return localize.day(dayOfWeek, { - width: 'abbreviated', - context: 'standalone' + width: "abbreviated", + context: "standalone", }); // T - - case 'ccccc': + case "ccccc": return localize.day(dayOfWeek, { - width: 'narrow', - context: 'standalone' + width: "narrow", + context: "standalone", }); // Tu - - case 'cccccc': + case "cccccc": return localize.day(dayOfWeek, { - width: 'short', - context: 'standalone' + width: "short", + context: "standalone", }); // Tuesday - - case 'cccc': + case "cccc": default: return localize.day(dayOfWeek, { - width: 'wide', - context: 'standalone' + width: "wide", + context: "standalone", }); } }, - // ISO day of week - i: function i(date, token, localize) { - var dayOfWeek = date.getUTCDay(); - var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; + // ISO day of week + i: function (date, token, localize) { + const dayOfWeek = date.getDay(); + const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; switch (token) { // 2 - case 'i': + case "i": return String(isoDayOfWeek); // 02 - - case 'ii': + case "ii": return addLeadingZeros(isoDayOfWeek, token.length); // 2nd - - case 'io': - return localize.ordinalNumber(isoDayOfWeek, { - unit: 'day' - }); + case "io": + return localize.ordinalNumber(isoDayOfWeek, { unit: "day" }); // Tue - - case 'iii': + case "iii": return localize.day(dayOfWeek, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); // T - - case 'iiiii': + case "iiiii": return localize.day(dayOfWeek, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); // Tu - - case 'iiiiii': + case "iiiiii": return localize.day(dayOfWeek, { - width: 'short', - context: 'formatting' + width: "short", + context: "formatting", }); // Tuesday - - case 'iiii': + case "iiii": default: return localize.day(dayOfWeek, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, + // AM or PM - a: function a(date, token, localize) { - var hours = date.getUTCHours(); - var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am'; + a: function (date, token, localize) { + const hours = date.getHours(); + const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; switch (token) { - case 'a': - case 'aa': + case "a": + case "aa": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); - - case 'aaa': - return localize.dayPeriod(dayPeriodEnumValue, { - width: 'abbreviated', - context: 'formatting' - }).toLowerCase(); - - case 'aaaaa': + case "aaa": + return localize + .dayPeriod(dayPeriodEnumValue, { + width: "abbreviated", + context: "formatting", + }) + .toLowerCase(); + case "aaaaa": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); - - case 'aaaa': + case "aaaa": default: return localize.dayPeriod(dayPeriodEnumValue, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, - // AM, PM, midnight, noon - b: function b(date, token, localize) { - var hours = date.getUTCHours(); - var dayPeriodEnumValue; + // AM, PM, midnight, noon + b: function (date, token, localize) { + const hours = date.getHours(); + let dayPeriodEnumValue; if (hours === 12) { dayPeriodEnumValue = dayPeriodEnum.noon; } else if (hours === 0) { dayPeriodEnumValue = dayPeriodEnum.midnight; } else { - dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am'; + dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; } switch (token) { - case 'b': - case 'bb': + case "b": + case "bb": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); - - case 'bbb': - return localize.dayPeriod(dayPeriodEnumValue, { - width: 'abbreviated', - context: 'formatting' - }).toLowerCase(); - - case 'bbbbb': + case "bbb": + return localize + .dayPeriod(dayPeriodEnumValue, { + width: "abbreviated", + context: "formatting", + }) + .toLowerCase(); + case "bbbbb": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); - - case 'bbbb': + case "bbbb": default: return localize.dayPeriod(dayPeriodEnumValue, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, - // in the morning, in the afternoon, in the evening, at night - B: function B(date, token, localize) { - var hours = date.getUTCHours(); - var dayPeriodEnumValue; + // in the morning, in the afternoon, in the evening, at night + B: function (date, token, localize) { + const hours = date.getHours(); + let dayPeriodEnumValue; if (hours >= 17) { dayPeriodEnumValue = dayPeriodEnum.evening; } else if (hours >= 12) { @@ -54864,896 +55231,407 @@ var formatters_formatters = { } switch (token) { - case 'B': - case 'BB': - case 'BBB': + case "B": + case "BB": + case "BBB": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'abbreviated', - context: 'formatting' + width: "abbreviated", + context: "formatting", }); - - case 'BBBBB': + case "BBBBB": return localize.dayPeriod(dayPeriodEnumValue, { - width: 'narrow', - context: 'formatting' + width: "narrow", + context: "formatting", }); - - case 'BBBB': + case "BBBB": default: return localize.dayPeriod(dayPeriodEnumValue, { - width: 'wide', - context: 'formatting' + width: "wide", + context: "formatting", }); } }, + // Hour [1-12] - h: function h(date, token, localize) { - if (token === 'ho') { - var hours = date.getUTCHours() % 12; + h: function (date, token, localize) { + if (token === "ho") { + let hours = date.getHours() % 12; if (hours === 0) hours = 12; - return localize.ordinalNumber(hours, { - unit: 'hour' - }); + return localize.ordinalNumber(hours, { unit: "hour" }); } return lightFormatters.h(date, token); }, + // Hour [0-23] - H: function H(date, token, localize) { - if (token === 'Ho') { - return localize.ordinalNumber(date.getUTCHours(), { - unit: 'hour' - }); + H: function (date, token, localize) { + if (token === "Ho") { + return localize.ordinalNumber(date.getHours(), { unit: "hour" }); } return lightFormatters.H(date, token); }, + // Hour [0-11] - K: function K(date, token, localize) { - var hours = date.getUTCHours() % 12; + K: function (date, token, localize) { + const hours = date.getHours() % 12; - if (token === 'Ko') { - return localize.ordinalNumber(hours, { - unit: 'hour' - }); + if (token === "Ko") { + return localize.ordinalNumber(hours, { unit: "hour" }); } return addLeadingZeros(hours, token.length); }, + // Hour [1-24] - k: function k(date, token, localize) { - var hours = date.getUTCHours(); + k: function (date, token, localize) { + let hours = date.getHours(); if (hours === 0) hours = 24; - if (token === 'ko') { - return localize.ordinalNumber(hours, { - unit: 'hour' - }); + if (token === "ko") { + return localize.ordinalNumber(hours, { unit: "hour" }); } return addLeadingZeros(hours, token.length); }, + // Minute - m: function m(date, token, localize) { - if (token === 'mo') { - return localize.ordinalNumber(date.getUTCMinutes(), { - unit: 'minute' - }); + m: function (date, token, localize) { + if (token === "mo") { + return localize.ordinalNumber(date.getMinutes(), { unit: "minute" }); } return lightFormatters.m(date, token); }, + // Second - s: function s(date, token, localize) { - if (token === 'so') { - return localize.ordinalNumber(date.getUTCSeconds(), { - unit: 'second' - }); + s: function (date, token, localize) { + if (token === "so") { + return localize.ordinalNumber(date.getSeconds(), { unit: "second" }); } return lightFormatters.s(date, token); }, + // Fraction of second - S: function S(date, token) { + S: function (date, token) { return lightFormatters.S(date, token); }, + // Timezone (ISO-8601. If offset is 0, output is always `'Z'`) - X: function X(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timezoneOffset = originalDate.getTimezoneOffset(); + X: function (date, token, _localize) { + const timezoneOffset = date.getTimezoneOffset(); if (timezoneOffset === 0) { - return 'Z'; + return "Z"; } switch (token) { // Hours and optional minutes - case 'X': + case "X": return formatTimezoneWithOptionalMinutes(timezoneOffset); + // Hours, minutes and optional seconds without `:` delimiter // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets // so this token always has the same output as `XX` - - case 'XXXX': - case 'XX': - // Hours and minutes without `:` delimiter + case "XXXX": + case "XX": // Hours and minutes without `:` delimiter return formatTimezone(timezoneOffset); + // Hours, minutes and optional seconds with `:` delimiter // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets // so this token always has the same output as `XXX` - - case 'XXXXX': - case 'XXX': // Hours and minutes with `:` delimiter - + case "XXXXX": + case "XXX": // Hours and minutes with `:` delimiter default: - return formatTimezone(timezoneOffset, ':'); + return formatTimezone(timezoneOffset, ":"); } }, + // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent) - x: function x(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timezoneOffset = originalDate.getTimezoneOffset(); + x: function (date, token, _localize) { + const timezoneOffset = date.getTimezoneOffset(); switch (token) { // Hours and optional minutes - case 'x': + case "x": return formatTimezoneWithOptionalMinutes(timezoneOffset); + // Hours, minutes and optional seconds without `:` delimiter // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets // so this token always has the same output as `xx` - - case 'xxxx': - case 'xx': - // Hours and minutes without `:` delimiter + case "xxxx": + case "xx": // Hours and minutes without `:` delimiter return formatTimezone(timezoneOffset); + // Hours, minutes and optional seconds with `:` delimiter // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets // so this token always has the same output as `xxx` - - case 'xxxxx': - case 'xxx': // Hours and minutes with `:` delimiter - + case "xxxxx": + case "xxx": // Hours and minutes with `:` delimiter default: - return formatTimezone(timezoneOffset, ':'); + return formatTimezone(timezoneOffset, ":"); } }, + // Timezone (GMT) - O: function O(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timezoneOffset = originalDate.getTimezoneOffset(); + O: function (date, token, _localize) { + const timezoneOffset = date.getTimezoneOffset(); switch (token) { // Short - case 'O': - case 'OO': - case 'OOO': - return 'GMT' + formatTimezoneShort(timezoneOffset, ':'); + case "O": + case "OO": + case "OOO": + return "GMT" + formatTimezoneShort(timezoneOffset, ":"); // Long - - case 'OOOO': + case "OOOO": default: - return 'GMT' + formatTimezone(timezoneOffset, ':'); + return "GMT" + formatTimezone(timezoneOffset, ":"); } }, + // Timezone (specific non-location) - z: function z(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timezoneOffset = originalDate.getTimezoneOffset(); + z: function (date, token, _localize) { + const timezoneOffset = date.getTimezoneOffset(); switch (token) { // Short - case 'z': - case 'zz': - case 'zzz': - return 'GMT' + formatTimezoneShort(timezoneOffset, ':'); + case "z": + case "zz": + case "zzz": + return "GMT" + formatTimezoneShort(timezoneOffset, ":"); // Long - - case 'zzzz': + case "zzzz": default: - return 'GMT' + formatTimezone(timezoneOffset, ':'); + return "GMT" + formatTimezone(timezoneOffset, ":"); } }, + // Seconds timestamp - t: function t(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timestamp = Math.floor(originalDate.getTime() / 1000); + t: function (date, token, _localize) { + const timestamp = Math.trunc(date.getTime() / 1000); return addLeadingZeros(timestamp, token.length); }, + // Milliseconds timestamp - T: function T(date, token, _localize, options) { - var originalDate = options._originalDate || date; - var timestamp = originalDate.getTime(); + T: function (date, token, _localize) { + const timestamp = date.getTime(); return addLeadingZeros(timestamp, token.length); - } + }, }; -function formatTimezoneShort(offset, dirtyDelimiter) { - var sign = offset > 0 ? '-' : '+'; - var absOffset = Math.abs(offset); - var hours = Math.floor(absOffset / 60); - var minutes = absOffset % 60; - +function formatTimezoneShort(offset, delimiter = "") { + const sign = offset > 0 ? "-" : "+"; + const absOffset = Math.abs(offset); + const hours = Math.trunc(absOffset / 60); + const minutes = absOffset % 60; if (minutes === 0) { return sign + String(hours); } - - var delimiter = dirtyDelimiter || ''; return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2); } -function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) { +function formatTimezoneWithOptionalMinutes(offset, delimiter) { if (offset % 60 === 0) { - var sign = offset > 0 ? '-' : '+'; + const sign = offset > 0 ? "-" : "+"; return sign + addLeadingZeros(Math.abs(offset) / 60, 2); } - - return formatTimezone(offset, dirtyDelimiter); + return formatTimezone(offset, delimiter); } -function formatTimezone(offset, dirtyDelimiter) { - var delimiter = dirtyDelimiter || ''; - var sign = offset > 0 ? '-' : '+'; - var absOffset = Math.abs(offset); - var hours = addLeadingZeros(Math.floor(absOffset / 60), 2); - var minutes = addLeadingZeros(absOffset % 60, 2); +function formatTimezone(offset, delimiter = "") { + const sign = offset > 0 ? "-" : "+"; + const absOffset = Math.abs(offset); + const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2); + const minutes = addLeadingZeros(absOffset % 60, 2); return sign + hours + delimiter + minutes; } -/* harmony default export */ const format_formatters = (formatters_formatters); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/longFormatters/index.js -var dateLongFormatter = function dateLongFormatter(pattern, formatLong) { +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/format/longFormatters.mjs +const dateLongFormatter = (pattern, formatLong) => { switch (pattern) { - case 'P': - return formatLong.date({ - width: 'short' - }); - - case 'PP': - return formatLong.date({ - width: 'medium' - }); - - case 'PPP': - return formatLong.date({ - width: 'long' - }); - - case 'PPPP': + case "P": + return formatLong.date({ width: "short" }); + case "PP": + return formatLong.date({ width: "medium" }); + case "PPP": + return formatLong.date({ width: "long" }); + case "PPPP": default: - return formatLong.date({ - width: 'full' - }); + return formatLong.date({ width: "full" }); } }; -var timeLongFormatter = function timeLongFormatter(pattern, formatLong) { +const timeLongFormatter = (pattern, formatLong) => { switch (pattern) { - case 'p': - return formatLong.time({ - width: 'short' - }); - - case 'pp': - return formatLong.time({ - width: 'medium' - }); - - case 'ppp': - return formatLong.time({ - width: 'long' - }); - - case 'pppp': + case "p": + return formatLong.time({ width: "short" }); + case "pp": + return formatLong.time({ width: "medium" }); + case "ppp": + return formatLong.time({ width: "long" }); + case "pppp": default: - return formatLong.time({ - width: 'full' - }); + return formatLong.time({ width: "full" }); } }; -var dateTimeLongFormatter = function dateTimeLongFormatter(pattern, formatLong) { - var matchResult = pattern.match(/(P+)(p+)?/) || []; - var datePattern = matchResult[1]; - var timePattern = matchResult[2]; +const dateTimeLongFormatter = (pattern, formatLong) => { + const matchResult = pattern.match(/(P+)(p+)?/) || []; + const datePattern = matchResult[1]; + const timePattern = matchResult[2]; if (!timePattern) { return dateLongFormatter(pattern, formatLong); } - var dateTimeFormat; + let dateTimeFormat; switch (datePattern) { - case 'P': - dateTimeFormat = formatLong.dateTime({ - width: 'short' - }); + case "P": + dateTimeFormat = formatLong.dateTime({ width: "short" }); break; - - case 'PP': - dateTimeFormat = formatLong.dateTime({ - width: 'medium' - }); + case "PP": + dateTimeFormat = formatLong.dateTime({ width: "medium" }); break; - - case 'PPP': - dateTimeFormat = formatLong.dateTime({ - width: 'long' - }); + case "PPP": + dateTimeFormat = formatLong.dateTime({ width: "long" }); break; - - case 'PPPP': + case "PPPP": default: - dateTimeFormat = formatLong.dateTime({ - width: 'full' - }); + dateTimeFormat = formatLong.dateTime({ width: "full" }); break; } - return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong)); + return dateTimeFormat + .replace("{{date}}", dateLongFormatter(datePattern, formatLong)) + .replace("{{time}}", timeLongFormatter(timePattern, formatLong)); }; -var longFormatters = { +const longFormatters = { p: timeLongFormatter, - P: dateTimeLongFormatter + P: dateTimeLongFormatter, }; -/* harmony default export */ const format_longFormatters = (longFormatters); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getTimezoneOffsetInMilliseconds/index.js -/** - * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds. - * They usually appear for dates that denote time before the timezones were introduced - * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891 - * and GMT+01:00:00 after that date) - * - * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above, - * which would lead to incorrect calculations. - * - * This function returns the timezone offset in milliseconds that takes seconds in account. - */ -function getTimezoneOffsetInMilliseconds(date) { - var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())); - utcDate.setUTCFullYear(date.getFullYear()); - return date.getTime() - utcDate.getTime(); -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/protectedTokens/index.js -var protectedDayOfYearTokens = ['D', 'DD']; -var protectedWeekYearTokens = ['YY', 'YYYY']; -function isProtectedDayOfYearToken(token) { - return protectedDayOfYearTokens.indexOf(token) !== -1; -} -function isProtectedWeekYearToken(token) { - return protectedWeekYearTokens.indexOf(token) !== -1; -} -function throwProtectedError(token, format, input) { - if (token === 'YYYY') { - throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); - } else if (token === 'YY') { - throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); - } else if (token === 'D') { - throw new RangeError("Use `d` instead of `D` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); - } else if (token === 'DD') { - throw new RangeError("Use `dd` instead of `DD` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); - } -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatDistance/index.js -var formatDistanceLocale = { - lessThanXSeconds: { - one: 'less than a second', - other: 'less than {{count}} seconds' - }, - xSeconds: { - one: '1 second', - other: '{{count}} seconds' - }, - halfAMinute: 'half a minute', - lessThanXMinutes: { - one: 'less than a minute', - other: 'less than {{count}} minutes' - }, - xMinutes: { - one: '1 minute', - other: '{{count}} minutes' - }, - aboutXHours: { - one: 'about 1 hour', - other: 'about {{count}} hours' - }, - xHours: { - one: '1 hour', - other: '{{count}} hours' - }, - xDays: { - one: '1 day', - other: '{{count}} days' - }, - aboutXWeeks: { - one: 'about 1 week', - other: 'about {{count}} weeks' - }, - xWeeks: { - one: '1 week', - other: '{{count}} weeks' - }, - aboutXMonths: { - one: 'about 1 month', - other: 'about {{count}} months' - }, - xMonths: { - one: '1 month', - other: '{{count}} months' - }, - aboutXYears: { - one: 'about 1 year', - other: 'about {{count}} years' - }, - xYears: { - one: '1 year', - other: '{{count}} years' - }, - overXYears: { - one: 'over 1 year', - other: 'over {{count}} years' - }, - almostXYears: { - one: 'almost 1 year', - other: 'almost {{count}} years' - } -}; - -var formatDistance = function formatDistance(token, count, options) { - var result; - var tokenValue = formatDistanceLocale[token]; - - if (typeof tokenValue === 'string') { - result = tokenValue; - } else if (count === 1) { - result = tokenValue.one; - } else { - result = tokenValue.other.replace('{{count}}', count.toString()); - } - if (options !== null && options !== void 0 && options.addSuffix) { - if (options.comparison && options.comparison > 0) { - return 'in ' + result; - } else { - return result + ' ago'; - } - } +;// CONCATENATED MODULE: ./node_modules/date-fns/_lib/protectedTokens.mjs +const dayOfYearTokenRE = /^D+$/; +const weekYearTokenRE = /^Y+$/; - return result; -}; +const throwTokens = ["D", "DD", "YY", "YYYY"]; -/* harmony default export */ const _lib_formatDistance = (formatDistance); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildFormatLongFn/index.js -function buildFormatLongFn(args) { - return function () { - var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - // TODO: Remove String() - var width = options.width ? String(options.width) : args.defaultWidth; - var format = args.formats[width] || args.formats[args.defaultWidth]; - return format; - }; +function isProtectedDayOfYearToken(token) { + return dayOfYearTokenRE.test(token); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatLong/index.js - -var dateFormats = { - full: 'EEEE, MMMM do, y', - long: 'MMMM do, y', - medium: 'MMM d, y', - short: 'MM/dd/yyyy' -}; -var timeFormats = { - full: 'h:mm:ss a zzzz', - long: 'h:mm:ss a z', - medium: 'h:mm:ss a', - short: 'h:mm a' -}; -var dateTimeFormats = { - full: "{{date}} 'at' {{time}}", - long: "{{date}} 'at' {{time}}", - medium: '{{date}}, {{time}}', - short: '{{date}}, {{time}}' -}; -var formatLong = { - date: buildFormatLongFn({ - formats: dateFormats, - defaultWidth: 'full' - }), - time: buildFormatLongFn({ - formats: timeFormats, - defaultWidth: 'full' - }), - dateTime: buildFormatLongFn({ - formats: dateTimeFormats, - defaultWidth: 'full' - }) -}; -/* harmony default export */ const _lib_formatLong = (formatLong); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatRelative/index.js -var formatRelativeLocale = { - lastWeek: "'last' eeee 'at' p", - yesterday: "'yesterday at' p", - today: "'today at' p", - tomorrow: "'tomorrow at' p", - nextWeek: "eeee 'at' p", - other: 'P' -}; - -var formatRelative = function formatRelative(token, _date, _baseDate, _options) { - return formatRelativeLocale[token]; -}; - -/* harmony default export */ const _lib_formatRelative = (formatRelative); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildLocalizeFn/index.js -function buildLocalizeFn(args) { - return function (dirtyIndex, options) { - var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone'; - var valuesArray; - - if (context === 'formatting' && args.formattingValues) { - var defaultWidth = args.defaultFormattingWidth || args.defaultWidth; - var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth; - valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth]; - } else { - var _defaultWidth = args.defaultWidth; - - var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth; - - valuesArray = args.values[_width] || args.values[_defaultWidth]; - } - var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it! - - return valuesArray[index]; - }; +function isProtectedWeekYearToken(token) { + return weekYearTokenRE.test(token); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/localize/index.js - -var eraValues = { - narrow: ['B', 'A'], - abbreviated: ['BC', 'AD'], - wide: ['Before Christ', 'Anno Domini'] -}; -var quarterValues = { - narrow: ['1', '2', '3', '4'], - abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'], - wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter'] -}; // Note: in English, the names of days of the week and months are capitalized. -// If you are making a new locale based on this one, check if the same is true for the language you're working on. -// Generally, formatted dates should look like they are in the middle of a sentence, -// e.g. in Spanish language the weekdays and months should be in the lowercase. - -var monthValues = { - narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], - abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] -}; -var dayValues = { - narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], - short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], - abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] -}; -var dayPeriodValues = { - narrow: { - am: 'a', - pm: 'p', - midnight: 'mi', - noon: 'n', - morning: 'morning', - afternoon: 'afternoon', - evening: 'evening', - night: 'night' - }, - abbreviated: { - am: 'AM', - pm: 'PM', - midnight: 'midnight', - noon: 'noon', - morning: 'morning', - afternoon: 'afternoon', - evening: 'evening', - night: 'night' - }, - wide: { - am: 'a.m.', - pm: 'p.m.', - midnight: 'midnight', - noon: 'noon', - morning: 'morning', - afternoon: 'afternoon', - evening: 'evening', - night: 'night' - } -}; -var formattingDayPeriodValues = { - narrow: { - am: 'a', - pm: 'p', - midnight: 'mi', - noon: 'n', - morning: 'in the morning', - afternoon: 'in the afternoon', - evening: 'in the evening', - night: 'at night' - }, - abbreviated: { - am: 'AM', - pm: 'PM', - midnight: 'midnight', - noon: 'noon', - morning: 'in the morning', - afternoon: 'in the afternoon', - evening: 'in the evening', - night: 'at night' - }, - wide: { - am: 'a.m.', - pm: 'p.m.', - midnight: 'midnight', - noon: 'noon', - morning: 'in the morning', - afternoon: 'in the afternoon', - evening: 'in the evening', - night: 'at night' - } -}; - -var ordinalNumber = function ordinalNumber(dirtyNumber, _options) { - var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example, - // if they are different for different grammatical genders, - // use `options.unit`. - // - // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear', - // 'day', 'hour', 'minute', 'second'. - - var rem100 = number % 100; - - if (rem100 > 20 || rem100 < 10) { - switch (rem100 % 10) { - case 1: - return number + 'st'; - - case 2: - return number + 'nd'; - - case 3: - return number + 'rd'; - } - } - return number + 'th'; -}; - -var localize = { - ordinalNumber: ordinalNumber, - era: buildLocalizeFn({ - values: eraValues, - defaultWidth: 'wide' - }), - quarter: buildLocalizeFn({ - values: quarterValues, - defaultWidth: 'wide', - argumentCallback: function argumentCallback(quarter) { - return quarter - 1; - } - }), - month: buildLocalizeFn({ - values: monthValues, - defaultWidth: 'wide' - }), - day: buildLocalizeFn({ - values: dayValues, - defaultWidth: 'wide' - }), - dayPeriod: buildLocalizeFn({ - values: dayPeriodValues, - defaultWidth: 'wide', - formattingValues: formattingDayPeriodValues, - defaultFormattingWidth: 'wide' - }) -}; -/* harmony default export */ const _lib_localize = (localize); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchFn/index.js -function buildMatchFn(args) { - return function (string) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - var width = options.width; - var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth]; - var matchResult = string.match(matchPattern); - - if (!matchResult) { - return null; - } - - var matchedString = matchResult[0]; - var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth]; - var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) { - return pattern.test(matchedString); - }) : findKey(parsePatterns, function (pattern) { - return pattern.test(matchedString); - }); - var value; - value = args.valueCallback ? args.valueCallback(key) : key; - value = options.valueCallback ? options.valueCallback(value) : value; - var rest = string.slice(matchedString.length); - return { - value: value, - rest: rest - }; - }; +function warnOrThrowProtectedError(token, format, input) { + const _message = message(token, format, input); + console.warn(_message); + if (throwTokens.includes(token)) throw new RangeError(_message); } -function findKey(object, predicate) { - for (var key in object) { - if (object.hasOwnProperty(key) && predicate(object[key])) { - return key; - } - } - - return undefined; +function message(token, format, input) { + const subject = token[0] === "Y" ? "years" : "days of the month"; + return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`; } -function findIndex(array, predicate) { - for (var key = 0; key < array.length; key++) { - if (predicate(array[key])) { - return key; - } - } - - return undefined; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchPatternFn/index.js -function buildMatchPatternFn(args) { - return function (string) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - var matchResult = string.match(args.matchPattern); - if (!matchResult) return null; - var matchedString = matchResult[0]; - var parseResult = string.match(args.parsePattern); - if (!parseResult) return null; - var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0]; - value = options.valueCallback ? options.valueCallback(value) : value; - var rest = string.slice(matchedString.length); - return { - value: value, - rest: rest - }; - }; +;// CONCATENATED MODULE: ./node_modules/date-fns/isDate.mjs +/** + * @name isDate + * @category Common Helpers + * @summary Is the given value a date? + * + * @description + * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes. + * + * @param value - The value to check + * + * @returns True if the given value is a date + * + * @example + * // For a valid date: + * const result = isDate(new Date()) + * //=> true + * + * @example + * // For an invalid date: + * const result = isDate(new Date(NaN)) + * //=> true + * + * @example + * // For some value: + * const result = isDate('2014-02-31') + * //=> false + * + * @example + * // For an object: + * const result = isDate({}) + * //=> false + */ +function isDate(value) { + return ( + value instanceof Date || + (typeof value === "object" && + Object.prototype.toString.call(value) === "[object Date]") + ); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/match/index.js - - -var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i; -var parseOrdinalNumberPattern = /\d+/i; -var matchEraPatterns = { - narrow: /^(b|a)/i, - abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i, - wide: /^(before christ|before common era|anno domini|common era)/i -}; -var parseEraPatterns = { - any: [/^b/i, /^(a|c)/i] -}; -var matchQuarterPatterns = { - narrow: /^[1234]/i, - abbreviated: /^q[1234]/i, - wide: /^[1234](th|st|nd|rd)? quarter/i -}; -var parseQuarterPatterns = { - any: [/1/i, /2/i, /3/i, /4/i] -}; -var matchMonthPatterns = { - narrow: /^[jfmasond]/i, - abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i, - wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i -}; -var parseMonthPatterns = { - narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i], - any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i] -}; -var matchDayPatterns = { - narrow: /^[smtwf]/i, - short: /^(su|mo|tu|we|th|fr|sa)/i, - abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i, - wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i -}; -var parseDayPatterns = { - narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i], - any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i] -}; -var matchDayPeriodPatterns = { - narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i, - any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i -}; -var parseDayPeriodPatterns = { - any: { - am: /^a/i, - pm: /^p/i, - midnight: /^mi/i, - noon: /^no/i, - morning: /morning/i, - afternoon: /afternoon/i, - evening: /evening/i, - night: /night/i - } -}; -var match_match = { - ordinalNumber: buildMatchPatternFn({ - matchPattern: matchOrdinalNumberPattern, - parsePattern: parseOrdinalNumberPattern, - valueCallback: function valueCallback(value) { - return parseInt(value, 10); - } - }), - era: buildMatchFn({ - matchPatterns: matchEraPatterns, - defaultMatchWidth: 'wide', - parsePatterns: parseEraPatterns, - defaultParseWidth: 'any' - }), - quarter: buildMatchFn({ - matchPatterns: matchQuarterPatterns, - defaultMatchWidth: 'wide', - parsePatterns: parseQuarterPatterns, - defaultParseWidth: 'any', - valueCallback: function valueCallback(index) { - return index + 1; - } - }), - month: buildMatchFn({ - matchPatterns: matchMonthPatterns, - defaultMatchWidth: 'wide', - parsePatterns: parseMonthPatterns, - defaultParseWidth: 'any' - }), - day: buildMatchFn({ - matchPatterns: matchDayPatterns, - defaultMatchWidth: 'wide', - parsePatterns: parseDayPatterns, - defaultParseWidth: 'any' - }), - dayPeriod: buildMatchFn({ - matchPatterns: matchDayPeriodPatterns, - defaultMatchWidth: 'any', - parsePatterns: parseDayPeriodPatterns, - defaultParseWidth: 'any' - }) -}; -/* harmony default export */ const _lib_match = (match_match); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/index.js - +// Fallback for modularized imports: +/* harmony default export */ const date_fns_isDate = ((/* unused pure expression or super */ null && (isDate))); +;// CONCATENATED MODULE: ./node_modules/date-fns/isValid.mjs /** - * @type {Locale} - * @category Locales - * @summary English locale (United States). - * @language English - * @iso-639-2 eng - * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp} - * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss} - */ -var locale = { - code: 'en-US', - formatDistance: _lib_formatDistance, - formatLong: _lib_formatLong, - formatRelative: _lib_formatRelative, - localize: _lib_localize, - match: _lib_match, - options: { - weekStartsOn: 0 - /* Sunday */ - , - firstWeekContainsDate: 1 + * @name isValid + * @category Common Helpers + * @summary Is the given date valid? + * + * @description + * Returns false if argument is Invalid Date and true otherwise. + * Argument is converted to Date using `toDate`. See [toDate](https://date-fns.org/docs/toDate) + * Invalid Date is a Date, whose time value is NaN. + * + * Time value of Date: http://es5.github.io/#x15.9.1.1 + * + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to check + * + * @returns The date is valid + * + * @example + * // For the valid date: + * const result = isValid(new Date(2014, 1, 31)) + * //=> true + * + * @example + * // For the value, convertable into a date: + * const result = isValid(1393804800000) + * //=> true + * + * @example + * // For the invalid date: + * const result = isValid(new Date('')) + * //=> false + */ +function isValid(date) { + if (!isDate(date) && typeof date !== "number") { + return false; } -}; -/* harmony default export */ const en_US = (locale); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultLocale/index.js + const _date = toDate_toDate(date); + return !isNaN(Number(_date)); +} + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_isValid = ((/* unused pure expression or super */ null && (isValid))); -/* harmony default export */ const defaultLocale = (en_US); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/format/index.js +;// CONCATENATED MODULE: ./node_modules/date-fns/format.mjs @@ -55762,9 +55640,11 @@ var locale = { +// Rexports of internal for libraries to use. +// See: https://github.com/date-fns/date-fns/issues/3638#issuecomment-1877082874 - // This RegExp consists of three parts separated by `|`: +// This RegExp consists of three parts separated by `|`: // - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token // (one of the certain letters followed by `o`) // - (\w)\1* matches any sequences of the same letter @@ -55775,16 +55655,26 @@ var locale = { // If there is no matching single quote // then the sequence will continue until the end of the string. // - . matches any single character unmatched by previous parts of the RegExps +const formattingTokensRegExp = + /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; -var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; // This RegExp catches symbols escaped by quotes, and also +// This RegExp catches symbols escaped by quotes, and also // sequences of symbols P, p, and the combinations like `PPPPPPPppppp` +const longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; + +const escapedStringRegExp = /^'([^]*?)'?$/; +const doubleQuoteRegExp = /''/g; +const unescapedLatinCharacterRegExp = /[a-zA-Z]/; + + + +/** + * The {@link format} function options. + */ -var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; -var escapedStringRegExp = /^'([^]*?)'?$/; -var doubleQuoteRegExp = /''/g; -var unescapedLatinCharacterRegExp = /[a-zA-Z]/; /** * @name format + * @alias formatDate * @category Common Helpers * @summary Format the date. * @@ -56011,8 +55901,8 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/; * * The same difference is true for local and ISO week-numbering years (`Y` and `R`), * except local week-numbering years are dependent on `options.weekStartsOn` - * and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear} - * and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}). + * and `options.firstWeekContainsDate` (compare [getISOWeekYear](https://date-fns.org/docs/getISOWeekYear) + * and [getWeekYear](https://date-fns.org/docs/getWeekYear)). * * 6. Specific non-location timezones are currently unavailable in `date-fns`, * so right now these tokens fall back to GMT timezones. @@ -56033,28 +55923,22 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/; * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month. * You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md * - * @param {Date|Number} date - the original date - * @param {String} format - the string of tokens - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is - * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`; - * see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`; - * see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @returns {String} the formatted date string - * @throws {TypeError} 2 arguments required - * @throws {RangeError} `date` must not be Invalid Date - * @throws {RangeError} `options.locale` must contain `localize` property - * @throws {RangeError} `options.locale` must contain `formatLong` property - * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 - * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7 - * @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @throws {RangeError} use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @throws {RangeError} use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @throws {RangeError} use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md - * @throws {RangeError} format string contains an unescaped latin alphabet character + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param format - The string of tokens + * @param options - An object with options + * + * @returns The formatted date string + * + * @throws `date` must not be Invalid Date + * @throws `options.locale` must contain `localize` property + * @throws `options.locale` must contain `formatLong` property + * @throws use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md + * @throws use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md + * @throws use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md + * @throws use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md + * @throws format string contains an unescaped latin alphabet character * * @example * // Represent 11 February 2014 in middle-endian format: @@ -56074,97 +55958,102 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/; * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'") * //=> "3 o'clock" */ +function format(date, formatStr, options) { + const defaultOptions = defaultOptions_getDefaultOptions(); + const locale = options?.locale ?? defaultOptions.locale ?? enUS; -function format(dirtyDate, dirtyFormatStr, options) { - var _ref, _options$locale, _ref2, _ref3, _ref4, _options$firstWeekCon, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2, _ref5, _ref6, _ref7, _options$weekStartsOn, _options$locale3, _options$locale3$opti, _defaultOptions$local3, _defaultOptions$local4; - - requiredArgs_requiredArgs(2, arguments); - var formatStr = String(dirtyFormatStr); - var defaultOptions = defaultOptions_getDefaultOptions(); - var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale; - var firstWeekContainsDate = toInteger_toInteger((_ref2 = (_ref3 = (_ref4 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.firstWeekContainsDate) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : 1); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN + const firstWeekContainsDate = + options?.firstWeekContainsDate ?? + options?.locale?.options?.firstWeekContainsDate ?? + defaultOptions.firstWeekContainsDate ?? + defaultOptions.locale?.options?.firstWeekContainsDate ?? + 1; - if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) { - throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively'); - } - - var weekStartsOn = toInteger_toInteger((_ref5 = (_ref6 = (_ref7 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale3 = options.locale) === null || _options$locale3 === void 0 ? void 0 : (_options$locale3$opti = _options$locale3.options) === null || _options$locale3$opti === void 0 ? void 0 : _options$locale3$opti.weekStartsOn) !== null && _ref7 !== void 0 ? _ref7 : defaultOptions.weekStartsOn) !== null && _ref6 !== void 0 ? _ref6 : (_defaultOptions$local3 = defaultOptions.locale) === null || _defaultOptions$local3 === void 0 ? void 0 : (_defaultOptions$local4 = _defaultOptions$local3.options) === null || _defaultOptions$local4 === void 0 ? void 0 : _defaultOptions$local4.weekStartsOn) !== null && _ref5 !== void 0 ? _ref5 : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN + const weekStartsOn = + options?.weekStartsOn ?? + options?.locale?.options?.weekStartsOn ?? + defaultOptions.weekStartsOn ?? + defaultOptions.locale?.options?.weekStartsOn ?? + 0; - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } + const originalDate = toDate_toDate(date); - if (!locale.localize) { - throw new RangeError('locale must contain localize property'); + if (!isValid(originalDate)) { + throw new RangeError("Invalid time value"); } - if (!locale.formatLong) { - throw new RangeError('locale must contain formatLong property'); - } + let parts = formatStr + .match(longFormattingTokensRegExp) + .map((substring) => { + const firstCharacter = substring[0]; + if (firstCharacter === "p" || firstCharacter === "P") { + const longFormatter = longFormatters[firstCharacter]; + return longFormatter(substring, locale.formatLong); + } + return substring; + }) + .join("") + .match(formattingTokensRegExp) + .map((substring) => { + // Replace two single quote characters with one single quote character + if (substring === "''") { + return { isToken: false, value: "'" }; + } - var originalDate = toDate_toDate(dirtyDate); + const firstCharacter = substring[0]; + if (firstCharacter === "'") { + return { isToken: false, value: cleanEscapedString(substring) }; + } - if (!isValid(originalDate)) { - throw new RangeError('Invalid time value'); - } // Convert the date in system timezone to the same date in UTC+00:00 timezone. - // This ensures that when UTC functions will be implemented, locales will be compatible with them. - // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376 - - - var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate); - var utcDate = subMilliseconds(originalDate, timezoneOffset); - var formatterOptions = { - firstWeekContainsDate: firstWeekContainsDate, - weekStartsOn: weekStartsOn, - locale: locale, - _originalDate: originalDate - }; - var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) { - var firstCharacter = substring[0]; + if (formatters[firstCharacter]) { + return { isToken: true, value: substring }; + } - if (firstCharacter === 'p' || firstCharacter === 'P') { - var longFormatter = format_longFormatters[firstCharacter]; - return longFormatter(substring, locale.formatLong); - } + if (firstCharacter.match(unescapedLatinCharacterRegExp)) { + throw new RangeError( + "Format string contains an unescaped latin alphabet character `" + + firstCharacter + + "`", + ); + } - return substring; - }).join('').match(formattingTokensRegExp).map(function (substring) { - // Replace two single quote characters with one single quote character - if (substring === "''") { - return "'"; - } + return { isToken: false, value: substring }; + }); - var firstCharacter = substring[0]; + // invoke localize preprocessor (only for french locales at the moment) + if (locale.localize.preprocessor) { + parts = locale.localize.preprocessor(originalDate, parts); + } - if (firstCharacter === "'") { - return cleanEscapedString(substring); - } + const formatterOptions = { + firstWeekContainsDate, + weekStartsOn, + locale, + }; - var formatter = format_formatters[firstCharacter]; + return parts + .map((part) => { + if (!part.isToken) return part.value; - if (formatter) { - if (!(options !== null && options !== void 0 && options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(substring)) { - throwProtectedError(substring, dirtyFormatStr, String(dirtyDate)); - } + const token = part.value; - if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(substring)) { - throwProtectedError(substring, dirtyFormatStr, String(dirtyDate)); + if ( + (!options?.useAdditionalWeekYearTokens && + isProtectedWeekYearToken(token)) || + (!options?.useAdditionalDayOfYearTokens && + isProtectedDayOfYearToken(token)) + ) { + warnOrThrowProtectedError(token, formatStr, String(date)); } - return formatter(utcDate, substring, locale.localize, formatterOptions); - } - - if (firstCharacter.match(unescapedLatinCharacterRegExp)) { - throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`'); - } - - return substring; - }).join(''); - return result; + const formatter = formatters[token[0]]; + return formatter(originalDate, token, locale.localize, formatterOptions); + }) + .join(""); } function cleanEscapedString(input) { - var matched = input.match(escapedStringRegExp); + const matched = input.match(escapedStringRegExp); if (!matched) { return input; @@ -56172,7 +56061,11 @@ function cleanEscapedString(input) { return matched[1].replace(doubleQuoteRegExp, "'"); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameMonth/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_format = ((/* unused pure expression or super */ null && (format))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/isSameMonth.mjs /** @@ -56183,10 +56076,12 @@ function cleanEscapedString(input) { * @description * Are the given dates in the same month (and year)? * - * @param {Date|Number} dateLeft - the first date to check - * @param {Date|Number} dateRight - the second date to check - * @returns {Boolean} the dates are in the same month (and year) - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param dateLeft - The first date to check + * @param dateRight - The second date to check + * + * @returns The dates are in the same month (and year) * * @example * // Are 2 September 2014 and 25 September 2014 in the same month? @@ -56198,14 +56093,19 @@ function cleanEscapedString(input) { * const result = isSameMonth(new Date(2014, 8, 2), new Date(2015, 8, 25)) * //=> false */ - -function isSameMonth(dirtyDateLeft, dirtyDateRight) { - requiredArgs_requiredArgs(2, arguments); - var dateLeft = toDate_toDate(dirtyDateLeft); - var dateRight = toDate_toDate(dirtyDateRight); - return dateLeft.getFullYear() === dateRight.getFullYear() && dateLeft.getMonth() === dateRight.getMonth(); +function isSameMonth(dateLeft, dateRight) { + const _dateLeft = toDate_toDate(dateLeft); + const _dateRight = toDate_toDate(dateRight); + return ( + _dateLeft.getFullYear() === _dateRight.getFullYear() && + _dateLeft.getMonth() === _dateRight.getMonth() + ); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isEqual/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_isSameMonth = ((/* unused pure expression or super */ null && (isSameMonth))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/isEqual.mjs /** @@ -56216,10 +56116,12 @@ function isSameMonth(dirtyDateLeft, dirtyDateRight) { * @description * Are the given dates equal? * - * @param {Date|Number} dateLeft - the first date to compare - * @param {Date|Number} dateRight - the second date to compare - * @returns {Boolean} the dates are equal - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param dateLeft - The first date to compare + * @param dateRight - The second date to compare + * + * @returns The dates are equal * * @example * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal? @@ -56229,14 +56131,16 @@ function isSameMonth(dirtyDateLeft, dirtyDateRight) { * ) * //=> false */ - -function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) { - requiredArgs_requiredArgs(2, arguments); - var dateLeft = toDate_toDate(dirtyLeftDate); - var dateRight = toDate_toDate(dirtyRightDate); - return dateLeft.getTime() === dateRight.getTime(); +function isEqual_isEqual(leftDate, rightDate) { + const _dateLeft = toDate_toDate(leftDate); + const _dateRight = toDate_toDate(rightDate); + return +_dateLeft === +_dateRight; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameDay/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_isEqual = ((/* unused pure expression or super */ null && (isEqual_isEqual))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/isSameDay.mjs /** @@ -56247,10 +56151,12 @@ function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) { * @description * Are the given dates in the same day (and year and month)? * - * @param {Date|Number} dateLeft - the first date to check - * @param {Date|Number} dateRight - the second date to check - * @returns {Boolean} the dates are in the same day (and year and month) - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param dateLeft - The first date to check + * @param dateRight - The second date to check + + * @returns The dates are in the same day (and year and month) * * @example * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day? @@ -56267,14 +56173,17 @@ function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) { * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4)) * //=> false */ +function isSameDay(dateLeft, dateRight) { + const dateLeftStartOfDay = startOfDay_startOfDay(dateLeft); + const dateRightStartOfDay = startOfDay_startOfDay(dateRight); -function isSameDay(dirtyDateLeft, dirtyDateRight) { - requiredArgs_requiredArgs(2, arguments); - var dateLeftStartOfDay = startOfDay_startOfDay(dirtyDateLeft); - var dateRightStartOfDay = startOfDay_startOfDay(dirtyDateRight); - return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime(); + return +dateLeftStartOfDay === +dateRightStartOfDay; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addDays/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_isSameDay = ((/* unused pure expression or super */ null && (isSameDay))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/addDays.mjs @@ -56286,36 +56195,33 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) { * @description * Add the specified number of days to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} - the new date with the days added - * @throws {TypeError} - 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of days to be added. + * + * @returns The new date with the days added * * @example * // Add 10 days to 1 September 2014: * const result = addDays(new Date(2014, 8, 1), 10) * //=> Thu Sep 11 2014 00:00:00 */ - -function addDays_addDays(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var date = toDate_toDate(dirtyDate); - var amount = toInteger_toInteger(dirtyAmount); - - if (isNaN(amount)) { - return new Date(NaN); - } - +function addDays_addDays(date, amount) { + const _date = toDate_toDate(date); + if (isNaN(amount)) return constructFrom_constructFrom(date, NaN); if (!amount) { // If 0 days, no-op to avoid changing times in the hour before end of DST - return date; + return _date; } - - date.setDate(date.getDate() + amount); - return date; + _date.setDate(_date.getDate() + amount); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addWeeks/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_addDays = ((/* unused pure expression or super */ null && (addDays_addDays))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/addWeeks.mjs /** @@ -56326,25 +56232,27 @@ function addDays_addDays(dirtyDate, dirtyAmount) { * @description * Add the specified number of week to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the weeks added - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of weeks to be added. + * + * @returns The new date with the weeks added * * @example * // Add 4 weeks to 1 September 2014: * const result = addWeeks(new Date(2014, 8, 1), 4) * //=> Mon Sep 29 2014 00:00:00 */ - -function addWeeks_addWeeks(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var amount = toInteger_toInteger(dirtyAmount); - var days = amount * 7; - return addDays_addDays(dirtyDate, days); +function addWeeks_addWeeks(date, amount) { + const days = amount * 7; + return addDays_addDays(date, days); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subWeeks/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_addWeeks = ((/* unused pure expression or super */ null && (addWeeks_addWeeks))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/subWeeks.mjs /** @@ -56355,79 +56263,33 @@ function addWeeks_addWeeks(dirtyDate, dirtyAmount) { * @description * Subtract the specified number of weeks from the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of weeks to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the weeks subtracted - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param amount - The amount of weeks to be subtracted. + * + * @returns The new date with the weeks subtracted * * @example * // Subtract 4 weeks from 1 September 2014: * const result = subWeeks(new Date(2014, 8, 1), 4) * //=> Mon Aug 04 2014 00:00:00 */ - -function subWeeks(dirtyDate, dirtyAmount) { - requiredArgs_requiredArgs(2, arguments); - var amount = toInteger_toInteger(dirtyAmount); - return addWeeks_addWeeks(dirtyDate, -amount); +function subWeeks(date, amount) { + return addWeeks_addWeeks(date, -amount); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfWeek/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_subWeeks = ((/* unused pure expression or super */ null && (subWeeks))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/endOfWeek.mjs /** - * @name startOfWeek - * @category Week Helpers - * @summary Return the start of a week for the given date. - * - * @description - * Return the start of a week for the given date. - * The result will be in the local timezone. - * - * @param {Date|Number} date - the original date - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @returns {Date} the start of a week - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 - * - * @example - * // The start of a week for 2 September 2014 11:55:00: - * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0)) - * //=> Sun Aug 31 2014 00:00:00 - * - * @example - * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00: - * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) - * //=> Mon Sep 01 2014 00:00:00 + * The {@link endOfWeek} function options. */ -function startOfWeek_startOfWeek(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; - - requiredArgs_requiredArgs(1, arguments); - var defaultOptions = defaultOptions_getDefaultOptions(); - var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN - - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } - - var date = toDate_toDate(dirtyDate); - var day = date.getDay(); - var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; - date.setDate(date.getDate() - diff); - date.setHours(0, 0, 0, 0); - return date; -} -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/endOfWeek/index.js - - - - - /** * @name endOfWeek * @category Week Helpers @@ -56437,13 +56299,12 @@ function startOfWeek_startOfWeek(dirtyDate, options) { * Return the end of a week for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @param {Object} [options] - an object with options. - * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} - * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) - * @returns {Date} the end of a week - * @throws {TypeError} 1 argument required - * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * @param options - An object with options + * + * @returns The end of a week * * @example * // The end of a week for 2 September 2014 11:55:00: @@ -56455,50 +56316,55 @@ function startOfWeek_startOfWeek(dirtyDate, options) { * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) * //=> Sun Sep 07 2014 23:59:59.999 */ -function endOfWeek_endOfWeek(dirtyDate, options) { - var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; +function endOfWeek_endOfWeek(date, options) { + const defaultOptions = defaultOptions_getDefaultOptions(); + const weekStartsOn = + options?.weekStartsOn ?? + options?.locale?.options?.weekStartsOn ?? + defaultOptions.weekStartsOn ?? + defaultOptions.locale?.options?.weekStartsOn ?? + 0; - requiredArgs_requiredArgs(1, arguments); - var defaultOptions = defaultOptions_getDefaultOptions(); - var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN - - if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { - throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); - } + const _date = toDate_toDate(date); + const day = _date.getDay(); + const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); - var date = toDate_toDate(dirtyDate); - var day = date.getDay(); - var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); - date.setDate(date.getDate() + diff); - date.setHours(23, 59, 59, 999); - return date; + _date.setDate(_date.getDate() + diff); + _date.setHours(23, 59, 59, 999); + return _date; } -;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-right.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_endOfWeek = ((/* unused pure expression or super */ null && (endOfWeek_endOfWeek))); + +;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-right.js /** * WordPress dependencies */ -const arrowRight = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const arrowRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z" + }) +}); /* harmony default export */ const arrow_right = (arrowRight); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-left.js - /** * WordPress dependencies */ -const arrowLeft = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const arrowLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z" + }) +}); /* harmony default export */ const arrow_left = (arrowLeft); ;// CONCATENATED MODULE: external ["wp","date"] @@ -56518,7 +56384,7 @@ function date_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t -const styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { +const styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e105ri6r5" } : 0)( true ? { name: "1khn195", @@ -56530,10 +56396,10 @@ const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component const NavigatorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { target: "e105ri6r3" } : 0)("font-size:", config_values.fontSize, ";font-weight:", config_values.fontWeight, ";strong{font-weight:", config_values.fontWeightHeading, ";}" + ( true ? "" : 0)); -const Calendar = emotion_styled_base_browser_esm("div", true ? { +const Calendar = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e105ri6r2" } : 0)("column-gap:", space(2), ";display:grid;grid-template-columns:0.5fr repeat( 5, 1fr ) 0.5fr;justify-items:center;row-gap:", space(2), ";" + ( true ? "" : 0)); -const DayOfWeek = emotion_styled_base_browser_esm("div", true ? { +const DayOfWeek = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e105ri6r1" } : 0)("color:", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0)); const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { @@ -56587,7 +56453,6 @@ function inputToDate(input) { const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss"; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date/index.js - /** * External dependencies */ @@ -56629,6 +56494,8 @@ const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss"; * }; * ``` */ + + function DatePicker({ currentDate, onChange, @@ -56669,93 +56536,99 @@ function DatePicker({ setViewing(startOfDay_startOfDay(date)); setFocusable(startOfDay_startOfDay(date)); } - return (0,external_React_.createElement)(styles_Wrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Wrapper, { className: "components-datetime__date", role: "application", - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar') - }, (0,external_React_.createElement)(Navigator, null, (0,external_React_.createElement)(build_module_button, { - icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left, - variant: "tertiary", - "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'), - onClick: () => { - viewPreviousMonth(); - setFocusable(subMonths_subMonths(focusable, 1)); - onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT)); - } - }), (0,external_React_.createElement)(NavigatorHeading, { - level: 3 - }, (0,external_React_.createElement)("strong", null, (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset())), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())), (0,external_React_.createElement)(build_module_button, { - icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right, - variant: "tertiary", - "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'), - onClick: () => { - viewNextMonth(); - setFocusable(addMonths_addMonths(focusable, 1)); - onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT)); - } - })), (0,external_React_.createElement)(Calendar, { - onFocus: () => setIsFocusWithinCalendar(true), - onBlur: () => setIsFocusWithinCalendar(false) - }, calendar[0][0].map(day => (0,external_React_.createElement)(DayOfWeek, { - key: day.toString() - }, (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => { - if (!isSameMonth(day, viewing)) { - return null; - } - return (0,external_React_.createElement)(date_Day, { - key: day.toString(), - day: day, - column: index + 1, - isSelected: isSelected(day), - isFocusable: isEqual_isEqual(day, focusable), - isFocusAllowed: isFocusWithinCalendar, - isToday: isSameDay(day, new Date()), - isInvalid: isInvalidDate ? isInvalidDate(day) : false, - numEvents: events.filter(event => isSameDay(event.date, day)).length, - onClick: () => { - setSelected([day]); - setFocusable(day); - onChange?.(format( - // Don't change the selected date's time fields. - new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT)); - }, - onKeyDown: event => { - let nextFocusable; - if (event.key === 'ArrowLeft') { - nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1); - } - if (event.key === 'ArrowRight') { - nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1); - } - if (event.key === 'ArrowUp') { - nextFocusable = subWeeks(day, 1); - } - if (event.key === 'ArrowDown') { - nextFocusable = addWeeks_addWeeks(day, 1); - } - if (event.key === 'PageUp') { - nextFocusable = subMonths_subMonths(day, 1); - } - if (event.key === 'PageDown') { - nextFocusable = addMonths_addMonths(day, 1); + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar'), + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Navigator, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left, + variant: "tertiary", + "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'), + onClick: () => { + viewPreviousMonth(); + setFocusable(subMonths_subMonths(focusable, 1)); + onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT)); } - if (event.key === 'Home') { - nextFocusable = startOfWeek_startOfWeek(day); + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(NavigatorHeading, { + level: 3, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("strong", { + children: (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset()) + }), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right, + variant: "tertiary", + "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'), + onClick: () => { + viewNextMonth(); + setFocusable(addMonths_addMonths(focusable, 1)); + onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT)); } - if (event.key === 'End') { - nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day)); + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Calendar, { + onFocus: () => setIsFocusWithinCalendar(true), + onBlur: () => setIsFocusWithinCalendar(false), + children: [calendar[0][0].map(day => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayOfWeek, { + children: (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()) + }, day.toString())), calendar[0].map(week => week.map((day, index) => { + if (!isSameMonth(day, viewing)) { + return null; } - if (nextFocusable) { - event.preventDefault(); - setFocusable(nextFocusable); - if (!isSameMonth(nextFocusable, viewing)) { - setViewing(nextFocusable); - onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_Day, { + day: day, + column: index + 1, + isSelected: isSelected(day), + isFocusable: isEqual_isEqual(day, focusable), + isFocusAllowed: isFocusWithinCalendar, + isToday: isSameDay(day, new Date()), + isInvalid: isInvalidDate ? isInvalidDate(day) : false, + numEvents: events.filter(event => isSameDay(event.date, day)).length, + onClick: () => { + setSelected([day]); + setFocusable(day); + onChange?.(format( + // Don't change the selected date's time fields. + new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT)); + }, + onKeyDown: event => { + let nextFocusable; + if (event.key === 'ArrowLeft') { + nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1); + } + if (event.key === 'ArrowRight') { + nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1); + } + if (event.key === 'ArrowUp') { + nextFocusable = subWeeks(day, 1); + } + if (event.key === 'ArrowDown') { + nextFocusable = addWeeks_addWeeks(day, 1); + } + if (event.key === 'PageUp') { + nextFocusable = subMonths_subMonths(day, 1); + } + if (event.key === 'PageDown') { + nextFocusable = addMonths_addMonths(day, 1); + } + if (event.key === 'Home') { + nextFocusable = startOfWeek_startOfWeek(day); + } + if (event.key === 'End') { + nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day)); + } + if (nextFocusable) { + event.preventDefault(); + setFocusable(nextFocusable); + if (!isSameMonth(nextFocusable, viewing)) { + setViewing(nextFocusable); + onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT)); + } + } } - } - } - }); - })))); + }, day.toString()); + }))] + })] + }); } function date_Day({ day, @@ -56782,7 +56655,7 @@ function date_Day({ // an already focused element. // eslint-disable-next-line react-hooks/exhaustive-deps }, [isFocusable]); - return (0,external_React_.createElement)(DayButton, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayButton, { ref: ref, className: "components-datetime__date__day" // Unused, for backwards compatibility. , @@ -56794,8 +56667,9 @@ function date_Day({ isToday: isToday, hasEvents: numEvents > 0, onClick: onClick, - onKeyDown: onKeyDown - }, (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset())); + onKeyDown: onKeyDown, + children: (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset()) + }); } function getDayLabel(date, isSelected, numEvents) { const { @@ -56819,7 +56693,7 @@ function getDayLabel(date, isSelected, numEvents) { } /* harmony default export */ const date = (DatePicker); -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfMinute/index.js +;// CONCATENATED MODULE: ./node_modules/date-fns/startOfMinute.mjs /** @@ -56831,23 +56705,28 @@ function getDayLabel(date, isSelected, numEvents) { * Return the start of a minute for the given date. * The result will be in the local timezone. * - * @param {Date|Number} date - the original date - * @returns {Date} the start of a minute - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The original date + * + * @returns The start of a minute * * @example * // The start of a minute for 1 December 2014 22:15:45.400: * const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400)) * //=> Mon Dec 01 2014 22:15:00 */ - -function startOfMinute(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - date.setSeconds(0, 0); - return date; +function startOfMinute(date) { + const _date = toDate_toDate(date); + _date.setSeconds(0, 0); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/getDaysInMonth/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_startOfMinute = ((/* unused pure expression or super */ null && (startOfMinute))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/getDaysInMonth.mjs + /** @@ -56858,27 +56737,31 @@ function startOfMinute(dirtyDate) { * @description * Get the number of days in a month of the given date. * - * @param {Date|Number} date - the given date - * @returns {Number} the number of days in a month - * @throws {TypeError} 1 argument required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The given date + * + * @returns The number of days in a month * * @example * // How many days are in February 2000? * const result = getDaysInMonth(new Date(2000, 1)) * //=> 29 */ - -function getDaysInMonth_getDaysInMonth(dirtyDate) { - requiredArgs_requiredArgs(1, arguments); - var date = toDate_toDate(dirtyDate); - var year = date.getFullYear(); - var monthIndex = date.getMonth(); - var lastDayOfMonth = new Date(0); +function getDaysInMonth_getDaysInMonth(date) { + const _date = toDate_toDate(date); + const year = _date.getFullYear(); + const monthIndex = _date.getMonth(); + const lastDayOfMonth = constructFrom_constructFrom(date, 0); lastDayOfMonth.setFullYear(year, monthIndex + 1, 0); lastDayOfMonth.setHours(0, 0, 0, 0); return lastDayOfMonth.getDate(); } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setMonth/index.js + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_getDaysInMonth = ((/* unused pure expression or super */ null && (getDaysInMonth_getDaysInMonth))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/setMonth.mjs @@ -56891,36 +56774,37 @@ function getDaysInMonth_getDaysInMonth(dirtyDate) { * @description * Set the month to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} month - the month of the new date - * @returns {Date} the new date with the month set - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param month - The month index to set (0-11) + * + * @returns The new date with the month set * * @example * // Set February to 1 September 2014: * const result = setMonth(new Date(2014, 8, 1), 1) * //=> Sat Feb 01 2014 00:00:00 */ +function setMonth_setMonth(date, month) { + const _date = toDate_toDate(date); + const year = _date.getFullYear(); + const day = _date.getDate(); -function setMonth_setMonth(dirtyDate, dirtyMonth) { - requiredArgs_requiredArgs(2, arguments); - var date = toDate_toDate(dirtyDate); - var month = toInteger_toInteger(dirtyMonth); - var year = date.getFullYear(); - var day = date.getDate(); - var dateWithDesiredMonth = new Date(0); + const dateWithDesiredMonth = constructFrom_constructFrom(date, 0); dateWithDesiredMonth.setFullYear(year, month, 15); dateWithDesiredMonth.setHours(0, 0, 0, 0); - var daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month + const daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth); + // Set the last day of the new month // if the original date was the last day of the longer month - - date.setMonth(month, Math.min(day, daysInMonth)); - return date; + _date.setMonth(month, Math.min(day, daysInMonth)); + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/set/index.js -function set_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { set_typeof = function _typeof(obj) { return typeof obj; }; } else { set_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return set_typeof(obj); } +// Fallback for modularized imports: +/* harmony default export */ const date_fns_setMonth = ((/* unused pure expression or super */ null && (setMonth_setMonth))); +;// CONCATENATED MODULE: ./node_modules/date-fns/set.mjs @@ -56940,18 +56824,12 @@ function set_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "fun * to use native `Date#setX` methods. If you use this function, you may not want to include the * other `setX` functions that date-fns provides if you are concerned about the bundle size. * - * @param {Date|Number} date - the date to be changed - * @param {Object} values - an object with options - * @param {Number} [values.year] - the number of years to be set - * @param {Number} [values.month] - the number of months to be set - * @param {Number} [values.date] - the number of days to be set - * @param {Number} [values.hours] - the number of hours to be set - * @param {Number} [values.minutes] - the number of minutes to be set - * @param {Number} [values.seconds] - the number of seconds to be set - * @param {Number} [values.milliseconds] - the number of milliseconds to be set - * @returns {Date} the new date with options set - * @throws {TypeError} 2 arguments required - * @throws {RangeError} `values` must be an object + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param values - The date values to be set + * + * @returns The new date with options set * * @example * // Transform 1 September 2014 into 20 October 2015 in a single line: @@ -56963,51 +56841,50 @@ function set_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "fun * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 }) * //=> Mon Sep 01 2014 12:23:45 */ -function set_set(dirtyDate, values) { - requiredArgs_requiredArgs(2, arguments); - - if (set_typeof(values) !== 'object' || values === null) { - throw new RangeError('values parameter must be an object'); - } - var date = toDate_toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date +function set_set(date, values) { + let _date = toDate_toDate(date); - if (isNaN(date.getTime())) { - return new Date(NaN); + // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date + if (isNaN(+_date)) { + return constructFrom_constructFrom(date, NaN); } if (values.year != null) { - date.setFullYear(values.year); + _date.setFullYear(values.year); } if (values.month != null) { - date = setMonth_setMonth(date, values.month); + _date = setMonth_setMonth(_date, values.month); } if (values.date != null) { - date.setDate(toInteger_toInteger(values.date)); + _date.setDate(values.date); } if (values.hours != null) { - date.setHours(toInteger_toInteger(values.hours)); + _date.setHours(values.hours); } if (values.minutes != null) { - date.setMinutes(toInteger_toInteger(values.minutes)); + _date.setMinutes(values.minutes); } if (values.seconds != null) { - date.setSeconds(toInteger_toInteger(values.seconds)); + _date.setSeconds(values.seconds); } if (values.milliseconds != null) { - date.setMilliseconds(toInteger_toInteger(values.milliseconds)); + _date.setMilliseconds(values.milliseconds); } - return date; + return _date; } -;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setHours/index.js +// Fallback for modularized imports: +/* harmony default export */ const date_fns_set = ((/* unused pure expression or super */ null && (set_set))); + +;// CONCATENATED MODULE: ./node_modules/date-fns/setHours.mjs /** @@ -57018,24 +56895,27 @@ function set_set(dirtyDate, values) { * @description * Set the hours to the given date. * - * @param {Date|Number} date - the date to be changed - * @param {Number} hours - the hours of the new date - * @returns {Date} the new date with the hours set - * @throws {TypeError} 2 arguments required + * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc). + * + * @param date - The date to be changed + * @param hours - The hours of the new date + * + * @returns The new date with the hours set * * @example * // Set 4 hours to 1 September 2014 11:30:00: * const result = setHours(new Date(2014, 8, 1, 11, 30), 4) * //=> Mon Sep 01 2014 04:30:00 */ - -function setHours(dirtyDate, dirtyHours) { - requiredArgs_requiredArgs(2, arguments); - var date = toDate_toDate(dirtyDate); - var hours = toInteger_toInteger(dirtyHours); - date.setHours(hours); - return date; +function setHours(date, hours) { + const _date = toDate_toDate(date); + _date.setHours(hours); + return _date; } + +// Fallback for modularized imports: +/* harmony default export */ const date_fns_setHours = ((/* unused pure expression or super */ null && (setHours))); + ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/styles.js function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } @@ -57052,13 +56932,13 @@ function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t -const time_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { +const time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "evcr2319" } : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0)); -const Fieldset = emotion_styled_base_browser_esm("fieldset", true ? { +const Fieldset = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? { target: "evcr2318" } : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0)); -const TimeWrapper = emotion_styled_base_browser_esm("div", true ? { +const TimeWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "evcr2317" } : 0)( true ? { name: "pd0mhc", @@ -57068,7 +56948,7 @@ const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{pa const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { target: "evcr2316" } : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0)); -const TimeSeparator = emotion_styled_base_browser_esm("span", true ? { +const TimeSeparator = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "evcr2315" } : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0)); const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { @@ -57077,7 +56957,7 @@ const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control // Ideally we wouldn't need a wrapper, but can't otherwise target the // <BaseControl> in <SelectControl> -const MonthSelectWrapper = emotion_styled_base_browser_esm("div", true ? { +const MonthSelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "evcr2313" } : 0)( true ? { name: "1ff36h2", @@ -57089,7 +56969,7 @@ const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, t const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { target: "evcr2311" } : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0)); -const TimeZone = emotion_styled_base_browser_esm("div", true ? { +const TimeZone = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "evcr2310" } : 0)( true ? { name: "ebu3jh", @@ -57097,7 +56977,6 @@ const TimeZone = emotion_styled_base_browser_esm("div", true ? { } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js - /** * WordPress dependencies */ @@ -57114,6 +56993,7 @@ const TimeZone = emotion_styled_base_browser_esm("div", true ? { * Displays timezone information when user timezone is different from site * timezone. */ + const timezone_TimeZone = () => { const { timezone @@ -57137,19 +57017,21 @@ const timezone_TimeZone = () => { // When the prettyTimezoneString is empty, there is no additional timezone // detail information to show in a Tooltip. const hasNoAdditionalTimezoneDetail = prettyTimezoneString.trim().length === 0; - return hasNoAdditionalTimezoneDetail ? (0,external_React_.createElement)(TimeZone, { - className: "components-datetime__timezone" - }, zoneAbbr) : (0,external_React_.createElement)(tooltip, { + return hasNoAdditionalTimezoneDetail ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeZone, { + className: "components-datetime__timezone", + children: zoneAbbr + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, { placement: "top", - text: timezoneDetail - }, (0,external_React_.createElement)(TimeZone, { - className: "components-datetime__timezone" - }, zoneAbbr)); + text: timezoneDetail, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeZone, { + className: "components-datetime__timezone", + children: zoneAbbr + }) + }); }; /* harmony default export */ const timezone = (timezone_TimeZone); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/index.js - /** * External dependencies */ @@ -57175,6 +57057,9 @@ const timezone_TimeZone = () => { + + + function from12hTo24h(hours, isPm) { return isPm ? (hours % 12 + 12) % 24 : hours % 12; } @@ -57293,7 +57178,7 @@ function TimePicker({ onChange?.(format(newDate, TIMEZONELESS_FORMAT)); }; } - const dayField = (0,external_React_.createElement)(DayInput, { + const dayField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DayInput, { className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility. , label: (0,external_wp_i18n_namespaceObject.__)('Day'), @@ -57310,143 +57195,170 @@ function TimePicker({ isShiftStepEnabled: false, onChange: buildNumberControlChangeCallback('date') }); - const monthField = (0,external_React_.createElement)(MonthSelectWrapper, null, (0,external_React_.createElement)(select_control, { - className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility. - , - label: (0,external_wp_i18n_namespaceObject.__)('Month'), - hideLabelFromVision: true, - __next40pxDefaultSize: true, - __nextHasNoMarginBottom: true, - value: month, - options: [{ - value: '01', - label: (0,external_wp_i18n_namespaceObject.__)('January') - }, { - value: '02', - label: (0,external_wp_i18n_namespaceObject.__)('February') - }, { - value: '03', - label: (0,external_wp_i18n_namespaceObject.__)('March') - }, { - value: '04', - label: (0,external_wp_i18n_namespaceObject.__)('April') - }, { - value: '05', - label: (0,external_wp_i18n_namespaceObject.__)('May') - }, { - value: '06', - label: (0,external_wp_i18n_namespaceObject.__)('June') - }, { - value: '07', - label: (0,external_wp_i18n_namespaceObject.__)('July') - }, { - value: '08', - label: (0,external_wp_i18n_namespaceObject.__)('August') - }, { - value: '09', - label: (0,external_wp_i18n_namespaceObject.__)('September') - }, { - value: '10', - label: (0,external_wp_i18n_namespaceObject.__)('October') - }, { - value: '11', - label: (0,external_wp_i18n_namespaceObject.__)('November') - }, { - value: '12', - label: (0,external_wp_i18n_namespaceObject.__)('December') - }], - onChange: value => { - const newDate = setMonth_setMonth(date, Number(value) - 1); - setDate(newDate); - onChange?.(format(newDate, TIMEZONELESS_FORMAT)); - } - })); - return (0,external_React_.createElement)(time_styles_Wrapper, { + const monthField = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MonthSelectWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { + className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility. + , + label: (0,external_wp_i18n_namespaceObject.__)('Month'), + hideLabelFromVision: true, + __next40pxDefaultSize: true, + __nextHasNoMarginBottom: true, + value: month, + options: [{ + value: '01', + label: (0,external_wp_i18n_namespaceObject.__)('January') + }, { + value: '02', + label: (0,external_wp_i18n_namespaceObject.__)('February') + }, { + value: '03', + label: (0,external_wp_i18n_namespaceObject.__)('March') + }, { + value: '04', + label: (0,external_wp_i18n_namespaceObject.__)('April') + }, { + value: '05', + label: (0,external_wp_i18n_namespaceObject.__)('May') + }, { + value: '06', + label: (0,external_wp_i18n_namespaceObject.__)('June') + }, { + value: '07', + label: (0,external_wp_i18n_namespaceObject.__)('July') + }, { + value: '08', + label: (0,external_wp_i18n_namespaceObject.__)('August') + }, { + value: '09', + label: (0,external_wp_i18n_namespaceObject.__)('September') + }, { + value: '10', + label: (0,external_wp_i18n_namespaceObject.__)('October') + }, { + value: '11', + label: (0,external_wp_i18n_namespaceObject.__)('November') + }, { + value: '12', + label: (0,external_wp_i18n_namespaceObject.__)('December') + }], + onChange: value => { + const newDate = setMonth_setMonth(date, Number(value) - 1); + setDate(newDate); + onChange?.(format(newDate, TIMEZONELESS_FORMAT)); + } + }) + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(time_styles_Wrapper, { className: "components-datetime__time" // Unused, for backwards compatibility. - }, (0,external_React_.createElement)(Fieldset, null, (0,external_React_.createElement)(base_control.VisualLabel, { - as: "legend", - className: "components-datetime__time-legend" // Unused, for backwards compatibility. - }, (0,external_wp_i18n_namespaceObject.__)('Time')), (0,external_React_.createElement)(h_stack_component, { - className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. - }, (0,external_React_.createElement)(TimeWrapper, { - className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility. - }, (0,external_React_.createElement)(HoursInput, { - className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility. - , - label: (0,external_wp_i18n_namespaceObject.__)('Hours'), - hideLabelFromVision: true, - __next40pxDefaultSize: true, - value: hours, - step: 1, - min: is12Hour ? 1 : 0, - max: is12Hour ? 12 : 23, - required: true, - spinControls: "none", - isPressEnterToChange: true, - isDragEnabled: false, - isShiftStepEnabled: false, - onChange: buildNumberControlChangeCallback('hours'), - __unstableStateReducer: buildPadInputStateReducer(2) - }), (0,external_React_.createElement)(TimeSeparator, { - className: "components-datetime__time-separator" // Unused, for backwards compatibility. - , - "aria-hidden": "true" - }, ":"), (0,external_React_.createElement)(MinutesInput, { - className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility. - , - label: (0,external_wp_i18n_namespaceObject.__)('Minutes'), - hideLabelFromVision: true, - __next40pxDefaultSize: true, - value: minutes, - step: 1, - min: 0, - max: 59, - required: true, - spinControls: "none", - isPressEnterToChange: true, - isDragEnabled: false, - isShiftStepEnabled: false, - onChange: buildNumberControlChangeCallback('minutes'), - __unstableStateReducer: buildPadInputStateReducer(2) - })), is12Hour && (0,external_React_.createElement)(button_group, { - className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility. - }, (0,external_React_.createElement)(build_module_button, { - className: "components-datetime__time-am-button" // Unused, for backwards compatibility. - , - variant: am === 'AM' ? 'primary' : 'secondary', - __next40pxDefaultSize: true, - onClick: buildAmPmChangeCallback('AM') - }, (0,external_wp_i18n_namespaceObject.__)('AM')), (0,external_React_.createElement)(build_module_button, { - className: "components-datetime__time-pm-button" // Unused, for backwards compatibility. - , - variant: am === 'PM' ? 'primary' : 'secondary', - __next40pxDefaultSize: true, - onClick: buildAmPmChangeCallback('PM') - }, (0,external_wp_i18n_namespaceObject.__)('PM'))), (0,external_React_.createElement)(spacer_component, null), (0,external_React_.createElement)(timezone, null))), (0,external_React_.createElement)(Fieldset, null, (0,external_React_.createElement)(base_control.VisualLabel, { - as: "legend", - className: "components-datetime__time-legend" // Unused, for backwards compatibility. - }, (0,external_wp_i18n_namespaceObject.__)('Date')), (0,external_React_.createElement)(h_stack_component, { - className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. - }, is12Hour ? (0,external_React_.createElement)(external_React_.Fragment, null, monthField, dayField) : (0,external_React_.createElement)(external_React_.Fragment, null, dayField, monthField), (0,external_React_.createElement)(YearInput, { - className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility. , - label: (0,external_wp_i18n_namespaceObject.__)('Year'), - hideLabelFromVision: true, - __next40pxDefaultSize: true, - value: year, - step: 1, - min: 1, - max: 9999, - required: true, - spinControls: "none", - isPressEnterToChange: true, - isDragEnabled: false, - isShiftStepEnabled: false, - onChange: buildNumberControlChangeCallback('year'), - __unstableStateReducer: buildPadInputStateReducer(4) - })))); + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { + as: "legend", + className: "components-datetime__time-legend" // Unused, for backwards compatibility. + , + children: (0,external_wp_i18n_namespaceObject.__)('Time') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. + , + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(TimeWrapper, { + className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility. + , + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HoursInput, { + className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility. + , + label: (0,external_wp_i18n_namespaceObject.__)('Hours'), + hideLabelFromVision: true, + __next40pxDefaultSize: true, + value: hours, + step: 1, + min: is12Hour ? 1 : 0, + max: is12Hour ? 12 : 23, + required: true, + spinControls: "none", + isPressEnterToChange: true, + isDragEnabled: false, + isShiftStepEnabled: false, + onChange: buildNumberControlChangeCallback('hours'), + __unstableStateReducer: buildPadInputStateReducer(2) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TimeSeparator, { + className: "components-datetime__time-separator" // Unused, for backwards compatibility. + , + "aria-hidden": "true", + children: ":" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MinutesInput, { + className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility. + , + label: (0,external_wp_i18n_namespaceObject.__)('Minutes'), + hideLabelFromVision: true, + __next40pxDefaultSize: true, + value: minutes, + step: 1, + min: 0, + max: 59, + required: true, + spinControls: "none", + isPressEnterToChange: true, + isDragEnabled: false, + isShiftStepEnabled: false, + onChange: buildNumberControlChangeCallback('minutes'), + __unstableStateReducer: buildPadInputStateReducer(2) + })] + }), is12Hour && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(button_group, { + className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility. + , + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-datetime__time-am-button" // Unused, for backwards compatibility. + , + variant: am === 'AM' ? 'primary' : 'secondary', + __next40pxDefaultSize: true, + onClick: buildAmPmChangeCallback('AM'), + children: (0,external_wp_i18n_namespaceObject.__)('AM') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-datetime__time-pm-button" // Unused, for backwards compatibility. + , + variant: am === 'PM' ? 'primary' : 'secondary', + __next40pxDefaultSize: true, + onClick: buildAmPmChangeCallback('PM'), + children: (0,external_wp_i18n_namespaceObject.__)('PM') + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(timezone, {})] + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Fieldset, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control.VisualLabel, { + as: "legend", + className: "components-datetime__time-legend" // Unused, for backwards compatibility. + , + children: (0,external_wp_i18n_namespaceObject.__)('Date') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. + , + children: [is12Hour ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [monthField, dayField] + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [dayField, monthField] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(YearInput, { + className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility. + , + label: (0,external_wp_i18n_namespaceObject.__)('Year'), + hideLabelFromVision: true, + __next40pxDefaultSize: true, + value: year, + step: 1, + min: 1, + max: 9999, + required: true, + spinControls: "none", + isPressEnterToChange: true, + isDragEnabled: false, + isShiftStepEnabled: false, + onChange: buildNumberControlChangeCallback('year'), + __unstableStateReducer: buildPadInputStateReducer(4) + })] + })] + })] + }); } -/* harmony default export */ const time = (TimePicker); +/* harmony default export */ const date_time_time = (TimePicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/styles.js @@ -57467,7 +57379,6 @@ const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_ } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/index.js - /** * External dependencies */ @@ -57483,6 +57394,9 @@ const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_ + + + const date_time_noop = () => {}; function UnforwardedDateTimePicker({ currentDate, @@ -57493,22 +57407,25 @@ function UnforwardedDateTimePicker({ events, startOfWeek }, ref) { - return (0,external_React_.createElement)(date_time_styles_Wrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_time_styles_Wrapper, { ref: ref, className: "components-datetime", - spacing: 4 - }, (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(time, { - currentTime: currentDate, - onChange: onChange, - is12Hour: is12Hour - }), (0,external_React_.createElement)(date, { - currentDate: currentDate, - onChange: onChange, - isInvalidDate: isInvalidDate, - events: events, - onMonthPreviewed: onMonthPreviewed, - startOfWeek: startOfWeek - }))); + spacing: 4, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date_time_time, { + currentTime: currentDate, + onChange: onChange, + is12Hour: is12Hour + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(date, { + currentDate: currentDate, + onChange: onChange, + isInvalidDate: isInvalidDate, + events: events, + onMonthPreviewed: onMonthPreviewed, + startOfWeek: startOfWeek + })] + }) + }); } /** @@ -57591,7 +57508,6 @@ const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug); }]); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/index.js - /** * External dependencies */ @@ -57608,6 +57524,9 @@ const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug); + + + /** * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. * @@ -57662,12 +57581,14 @@ function DimensionControl(props) { value: '' }, ...options]; }; - const selectLabel = (0,external_React_.createElement)(external_React_.Fragment, null, icon && (0,external_React_.createElement)(build_module_icon, { - icon: icon - }), label); - return (0,external_React_.createElement)(select_control, { + const selectLabel = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon + }), label] + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { __next40pxDefaultSize: __next40pxDefaultSize, - className: classnames_default()(className, 'block-editor-dimension-control'), + className: dist_clsx(className, 'block-editor-dimension-control'), label: selectLabel, hideLabelFromVision: false, value: value, @@ -57689,7 +57610,6 @@ const disabled_styles_disabledStyles = true ? { } : 0; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/index.js - /** * WordPress dependencies */ @@ -57700,6 +57620,7 @@ const disabled_styles_disabledStyles = true ? { */ + const Context = (0,external_wp_element_namespaceObject.createContext)(false); const { Consumer, @@ -57750,21 +57671,22 @@ function Disabled({ ...props }) { const cx = useCx(); - return (0,external_React_.createElement)(disabled_Provider, { - value: isDisabled - }, (0,external_React_.createElement)("div", { - // @ts-ignore Reason: inert is a recent HTML attribute - inert: isDisabled ? 'true' : undefined, - className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined, - ...props - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(disabled_Provider, { + value: isDisabled, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + // @ts-ignore Reason: inert is a recent HTML attribute + inert: isDisabled ? 'true' : undefined, + className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined, + ...props, + children: children + }) + }); } Disabled.Context = Context; Disabled.Consumer = Consumer; /* harmony default export */ const disabled = (Disabled); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disclosure/index.js - /** * External dependencies */ @@ -57792,17 +57714,17 @@ const UnforwardedDisclosureContent = ({ const disclosure = useDisclosureStore({ open: visible }); - return (0,external_React_.createElement)(DisclosureContent, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DisclosureContent, { store: disclosure, ref: ref, - ...props - }, children); + ...props, + children: children + }); }; const disclosure_DisclosureContent = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDisclosureContent); /* harmony default export */ const disclosure = ((/* unused pure expression or super */ null && (disclosure_DisclosureContent))); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/draggable/index.js - /** * External dependencies */ @@ -57817,6 +57739,8 @@ const disclosure_DisclosureContent = (0,external_wp_element_namespaceObject.forw * Internal dependencies */ + + const dragImageClass = 'components-draggable__invisible-drag-image'; const cloneWrapperClass = 'components-draggable__clone'; const clonePadding = 0; @@ -58014,35 +57938,38 @@ function Draggable({ (0,external_wp_element_namespaceObject.useEffect)(() => () => { cleanup.current(); }, []); - return (0,external_React_.createElement)(external_React_.Fragment, null, children({ - onDraggableStart: start, - onDraggableEnd: end - }), dragComponent && (0,external_React_.createElement)("div", { - className: "components-draggable-drag-component-root", - style: { - display: 'none' - }, - ref: dragComponentRef - }, dragComponent)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [children({ + onDraggableStart: start, + onDraggableEnd: end + }), dragComponent && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-draggable-drag-component-root", + style: { + display: 'none' + }, + ref: dragComponentRef, + children: dragComponent + })] + }); } /* harmony default export */ const draggable = (Draggable); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/upload.js - /** * WordPress dependencies */ -const upload = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const upload = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z" + }) +}); /* harmony default export */ const library_upload = (upload); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/index.js - /** * External dependencies */ @@ -58061,6 +57988,82 @@ const upload = (0,external_React_.createElement)(external_wp_primitives_namespac * Internal dependencies */ + + +const drop_zone_backdrop = { + hidden: { + opacity: 0 + }, + show: { + opacity: 1, + transition: { + type: 'tween', + duration: 0.2, + delay: 0, + delayChildren: 0.1 + } + }, + exit: { + opacity: 0, + transition: { + duration: 0.2, + delayChildren: 0 + } + } +}; +const foreground = { + hidden: { + opacity: 0, + scale: 0.9 + }, + show: { + opacity: 1, + scale: 1, + transition: { + duration: 0.1 + } + }, + exit: { + opacity: 0, + scale: 0.9 + } +}; +function DropIndicator({ + label +}) { + const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); + const children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, { + variants: drop_zone_backdrop, + initial: disableMotion ? 'show' : 'hidden', + animate: "show", + exit: disableMotion ? 'show' : 'exit', + className: "components-drop-zone__content" + // Without this, when this div is shown, + // Safari calls a onDropZoneLeave causing a loop because of this bug + // https://bugs.webkit.org/show_bug.cgi?id=66547 + , + style: { + pointerEvents: 'none' + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(motion.div, { + variants: foreground, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_upload, + className: "components-drop-zone__content-icon" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-drop-zone__content-text", + children: label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload') + })] + }) + }); + if (disableMotion) { + return children; + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatePresence, { + children: children + }); +} + /** * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. * @@ -58141,80 +58144,20 @@ function DropZoneComponent({ setIsDraggingOverElement(false); } }); - const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); - let children; - const backdrop = { - hidden: { - opacity: 0 - }, - show: { - opacity: 1, - transition: { - type: 'tween', - duration: 0.2, - delay: 0, - delayChildren: 0.1 - } - }, - exit: { - opacity: 0, - transition: { - duration: 0.2, - delayChildren: 0 - } - } - }; - const foreground = { - hidden: { - opacity: 0, - scale: 0.9 - }, - show: { - opacity: 1, - scale: 1, - transition: { - duration: 0.1 - } - }, - exit: { - opacity: 0, - scale: 0.9 - } - }; - if (isDraggingOverElement) { - children = (0,external_React_.createElement)(motion.div, { - variants: backdrop, - initial: disableMotion ? 'show' : 'hidden', - animate: "show", - exit: disableMotion ? 'show' : 'exit', - className: "components-drop-zone__content" - // Without this, when this div is shown, - // Safari calls a onDropZoneLeave causing a loop because of this bug - // https://bugs.webkit.org/show_bug.cgi?id=66547 - , - style: { - pointerEvents: 'none' - } - }, (0,external_React_.createElement)(motion.div, { - variants: foreground - }, (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_upload, - className: "components-drop-zone__content-icon" - }), (0,external_React_.createElement)("span", { - className: "components-drop-zone__content-text" - }, label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload')))); - } - const classes = classnames_default()('components-drop-zone', className, { + const classes = dist_clsx('components-drop-zone', className, { 'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop), 'is-dragging-over-document': isDraggingOverDocument, 'is-dragging-over-element': isDraggingOverElement, [`is-dragging-${type}`]: !!type }); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ...restProps, ref: ref, - className: classes - }, disableMotion ? children : (0,external_React_.createElement)(AnimatePresence, null, children)); + className: classes, + children: isDraggingOverElement && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropIndicator, { + label: label + }) + }); } /* harmony default export */ const drop_zone = (DropZoneComponent); @@ -58234,17 +58177,18 @@ function DropZoneProvider({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/swatch.js - /** * WordPress dependencies */ -const swatch = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const swatch = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" + }) +}); /* harmony default export */ const library_swatch = (swatch); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js @@ -58278,7 +58222,9 @@ k([names]); */ function getDefaultColors(palette) { // A default dark and light color are required. - if (!palette || palette.length < 2) return ['#000', '#fff']; + if (!palette || palette.length < 2) { + return ['#000', '#fff']; + } return palette.map(({ color }) => ({ @@ -58339,7 +58285,6 @@ function getColorsFromColorStops(colorStops = []) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js - /** * WordPress dependencies */ @@ -58351,19 +58296,19 @@ function getColorsFromColorStops(colorStops = []) { + function DuotoneSwatch({ values }) { - return values ? (0,external_React_.createElement)(color_indicator, { + return values ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { colorValue: getGradientFromCSSColors(values, '135deg') - }) : (0,external_React_.createElement)(build_module_icon, { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { icon: library_swatch }); } /* harmony default export */ const duotone_swatch = (DuotoneSwatch); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/color-list-picker/index.js - /** * WordPress dependencies */ @@ -58380,6 +58325,9 @@ function DuotoneSwatch({ + + + function ColorOption({ label, value, @@ -58392,36 +58340,42 @@ function ColorOption({ const idRoot = (0,external_wp_compose_namespaceObject.useInstanceId)(ColorOption, 'color-list-picker-option'); const labelId = `${idRoot}__label`; const contentId = `${idRoot}__content`; - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(build_module_button, { - className: "components-color-list-picker__swatch-button", - onClick: () => setIsOpen(prev => !prev), - "aria-expanded": isOpen, - "aria-controls": contentId - }, (0,external_React_.createElement)(h_stack_component, { - justify: "flex-start", - spacing: 2 - }, value ? (0,external_React_.createElement)(color_indicator, { - colorValue: value, - className: "components-color-list-picker__swatch-color" - }) : (0,external_React_.createElement)(build_module_icon, { - icon: library_swatch - }), (0,external_React_.createElement)("span", { - id: labelId - }, label))), (0,external_React_.createElement)("div", { - role: "group", - id: contentId, - "aria-labelledby": labelId, - "aria-hidden": !isOpen - }, isOpen && (0,external_React_.createElement)(color_palette, { - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'), - className: "components-color-list-picker__color-picker", - colors: colors, - value: value, - clearable: false, - onChange: onChange, - disableCustomColors: disableCustomColors, - enableAlpha: enableAlpha - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-color-list-picker__swatch-button", + onClick: () => setIsOpen(prev => !prev), + "aria-expanded": isOpen, + "aria-controls": contentId, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + justify: "flex-start", + spacing: 2, + children: [value ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_indicator, { + colorValue: value, + className: "components-color-list-picker__swatch-color" + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: library_swatch + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + id: labelId, + children: label + })] + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + role: "group", + id: contentId, + "aria-labelledby": labelId, + "aria-hidden": !isOpen, + children: isOpen && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, { + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'), + className: "components-color-list-picker__color-picker", + colors: colors, + value: value, + clearable: false, + onChange: onChange, + disableCustomColors: disableCustomColors, + enableAlpha: enableAlpha + }) + })] + }); } function ColorListPicker({ colors, @@ -58431,31 +58385,31 @@ function ColorListPicker({ enableAlpha, onChange }) { - return (0,external_React_.createElement)("div", { - className: "components-color-list-picker" - }, labels.map((label, index) => (0,external_React_.createElement)(ColorOption, { - key: index, - label: label, - value: value[index], - colors: colors, - disableCustomColors: disableCustomColors, - enableAlpha: enableAlpha, - onChange: newColor => { - const newColors = value.slice(); - newColors[index] = newColor; - onChange(newColors); - } - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-color-list-picker", + children: labels.map((label, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorOption, { + label: label, + value: value[index], + colors: colors, + disableCustomColors: disableCustomColors, + enableAlpha: enableAlpha, + onChange: newColor => { + const newColors = value.slice(); + newColors[index] = newColor; + onChange(newColors); + } + }, index)) + }); } /* harmony default export */ const color_list_picker = (ColorListPicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js - /** * Internal dependencies */ + const PLACEHOLDER_VALUES = ['#333', '#CCC']; function CustomDuotoneBar({ value, @@ -58465,7 +58419,7 @@ function CustomDuotoneBar({ const values = hasGradient ? value : PLACEHOLDER_VALUES; const background = getGradientFromCSSColors(values); const controlPoints = getColorStopsFromColors(values); - return (0,external_React_.createElement)(CustomGradientBar, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomGradientBar, { disableInserter: true, background: background, hasGradient: hasGradient, @@ -58478,7 +58432,6 @@ function CustomDuotoneBar({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js - /** * External dependencies */ @@ -58499,6 +58452,8 @@ function CustomDuotoneBar({ + + /** * ```jsx * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components'; @@ -58550,8 +58505,7 @@ function DuotonePicker({ const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]); const isUnset = value === 'unset'; const unsetOptionLabel = (0,external_wp_i18n_namespaceObject.__)('Unset'); - const unsetOption = (0,external_React_.createElement)(build_module_circular_option_picker.Option, { - key: "unset", + const unsetOption = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { value: "unset", isSelected: isUnset, tooltipText: unsetOptionLabel, @@ -58560,7 +58514,7 @@ function DuotonePicker({ onClick: () => { onChange(isUnset ? undefined : 'unset'); } - }); + }, "unset"); const duotoneOptions = duotonePalette.map(({ colors, slug, @@ -58577,8 +58531,7 @@ function DuotonePicker({ // translators: %s: The name of the option e.g: "Dark grayscale". (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText; const isSelected = es6_default()(colors, value); - return (0,external_React_.createElement)(build_module_circular_option_picker.Option, { - key: slug, + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.Option, { value: colors, isSelected: isSelected, "aria-label": label, @@ -58587,7 +58540,7 @@ function DuotonePicker({ onClick: () => { onChange(isSelected ? undefined : colors); } - }); + }, slug); }); let metaProps; if (asButtons) { @@ -58617,77 +58570,48 @@ function DuotonePicker({ } } const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions; - return (0,external_React_.createElement)(build_module_circular_option_picker, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker, { ...otherProps, ...metaProps, options: options, - actions: !!clearable && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, { - onClick: () => onChange(undefined) - }, (0,external_wp_i18n_namespaceObject.__)('Clear')) - }, (0,external_React_.createElement)(spacer_component, { - paddingTop: options.length === 0 ? 0 : 4 - }, (0,external_React_.createElement)(v_stack_component, { - spacing: 3 - }, !disableCustomColors && !disableCustomDuotone && (0,external_React_.createElement)(CustomDuotoneBar, { - value: isUnset ? undefined : value, - onChange: onChange - }), !disableCustomDuotone && (0,external_React_.createElement)(color_list_picker, { - labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')], - colors: colorPalette, - value: isUnset ? undefined : value, - disableCustomColors: disableCustomColors, - enableAlpha: true, - onChange: newColors => { - if (!newColors[0]) { - newColors[0] = defaultDark; - } - if (!newColors[1]) { - newColors[1] = defaultLight; - } - const newValue = newColors.length >= 2 ? newColors : undefined; - // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors, - // but it's currently typed as a string[]. - // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035 - onChange(newValue); - } - })))); + actions: !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, { + onClick: () => onChange(undefined), + children: (0,external_wp_i18n_namespaceObject.__)('Clear') + }), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + paddingTop: options.length === 0 ? 0 : 4, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, { + spacing: 3, + children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomDuotoneBar, { + value: isUnset ? undefined : value, + onChange: onChange + }), !disableCustomDuotone && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_list_picker, { + labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')], + colors: colorPalette, + value: isUnset ? undefined : value, + disableCustomColors: disableCustomColors, + enableAlpha: true, + onChange: newColors => { + if (!newColors[0]) { + newColors[0] = defaultDark; + } + if (!newColors[1]) { + newColors[1] = defaultLight; + } + const newValue = newColors.length >= 2 ? newColors : undefined; + // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors, + // but it's currently typed as a string[]. + // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035 + onChange(newValue); + } + })] + }) + }) + }); } /* harmony default export */ const duotone_picker = (DuotonePicker); -;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/external.js - -/** - * WordPress dependencies - */ - -const external = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { - xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z" -})); -/* harmony default export */ const library_external = (external); - -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/styles/external-link-styles.js - -function external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } -/** - * External dependencies - */ - -/** - * WordPress dependencies - */ - -const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_module_icon, true ? { - target: "esh4a730" -} : 0)( true ? { - name: "rvs7bx", - styles: "width:1em;height:1em;margin:0;vertical-align:middle;fill:currentColor" -} : 0); - ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/index.js - /** * External dependencies */ @@ -58698,7 +58622,6 @@ const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_modu - /** * Internal dependencies */ @@ -58713,7 +58636,7 @@ function UnforwardedExternalLink(props, ref) { ...additionalProps } = props; const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' '); - const classes = classnames_default()('components-external-link', className); + const classes = dist_clsx('components-external-link', className); /* Anchor links are perceived as external links. This constant helps check for on page anchor links, to prevent them from being opened in the editor. */ @@ -58726,22 +58649,27 @@ function UnforwardedExternalLink(props, ref) { props.onClick(event); } }; - return /* eslint-disable react/jsx-no-target-blank */( - (0,external_React_.createElement)("a", { + return ( + /*#__PURE__*/ + /* eslint-disable react/jsx-no-target-blank */ + (0,external_ReactJSXRuntime_namespaceObject.jsxs)("a", { ...additionalProps, className: classes, href: href, onClick: onClickHandler, target: "_blank", rel: optimizedRel, - ref: ref - }, children, (0,external_React_.createElement)(visually_hidden_component, { - as: "span" - }, /* translators: accessibility text */ - (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)')), (0,external_React_.createElement)(StyledIcon, { - icon: library_external, - className: "components-external-link__icon" - })) + ref: ref, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-external-link__contents", + children: children + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-external-link__icon", + "aria-label": /* translators: accessibility text */ + (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)'), + children: "\u2197" + })] + }) /* eslint-enable react/jsx-no-target-blank */ ); } @@ -58785,7 +58713,9 @@ function getExtension(filename = '') { * @return Whether the file is a video. */ function isVideoType(filename = '') { - if (!filename) return false; + if (!filename) { + return false; + } return filename.startsWith('data:video/') || VIDEO_EXTENSIONS.includes(getExtension(filename)); } @@ -58813,16 +58743,16 @@ function focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You -const MediaWrapper = emotion_styled_base_browser_esm("div", true ? { +const MediaWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeew7dm8" } : 0)( true ? { name: "jqnsxy", styles: "background-color:transparent;display:flex;text-align:center;width:100%" } : 0); -const MediaContainer = emotion_styled_base_browser_esm("div", true ? { +const MediaContainer = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeew7dm7" } : 0)("align-items:center;border-radius:", config_values.radiusBlockUi, ";cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;&:after{border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );content:'';left:0;pointer-events:none;position:absolute;right:0;top:0;}img,video{border-radius:inherit;box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" + ( true ? "" : 0)); -const MediaPlaceholder = emotion_styled_base_browser_esm("div", true ? { +const MediaPlaceholder = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeew7dm6" } : 0)("background:", COLORS.gray[100], ";border-radius:inherit;box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0)); const focal_point_picker_style_StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { @@ -58852,12 +58782,12 @@ const extraHelpTextMargin = ({ const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { target: "eeew7dm4" } : 0)("max-width:320px;padding-top:1em;", extraHelpTextMargin, " ", deprecatedBottomMargin, ";" + ( true ? "" : 0)); -const GridView = emotion_styled_base_browser_esm("div", true ? { +const GridView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeew7dm3" -} : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 100ms linear;z-index:1;", reduceMotion('transition'), " opacity:", ({ +} : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );z-index:1;@media not ( prefers-reduced-motion ){transition:opacity 100ms linear;}opacity:", ({ showOverlay }) => showOverlay ? 1 : 0, ";" + ( true ? "" : 0)); -const GridLine = emotion_styled_base_browser_esm("div", true ? { +const GridLine = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeew7dm2" } : 0)( true ? { name: "1yzbo24", @@ -58877,7 +58807,6 @@ const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? } : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js - /** * WordPress dependencies */ @@ -58888,6 +58817,8 @@ const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? */ + + const TEXTCONTROL_MIN = 0; const TEXTCONTROL_MAX = 100; const controls_noop = () => {}; @@ -58904,7 +58835,9 @@ function FocalPointPickerControls({ const valueX = fractionToPercentage(point.x); const valueY = fractionToPercentage(point.y); const handleChange = (value, axis) => { - if (value === undefined) return; + if (value === undefined) { + return; + } const num = parseInt(value, 10); if (!isNaN(num)) { onChange({ @@ -58913,29 +58846,30 @@ function FocalPointPickerControls({ }); } }; - return (0,external_React_.createElement)(ControlWrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ControlWrapper, { className: "focal-point-picker__controls", __nextHasNoMarginBottom: __nextHasNoMarginBottom, hasHelpText: hasHelpText, - gap: 4 - }, (0,external_React_.createElement)(FocalPointUnitControl, { - __next40pxDefaultSize: __next40pxDefaultSize, - label: (0,external_wp_i18n_namespaceObject.__)('Left'), - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'), - value: [valueX, '%'].join(''), - onChange: next => handleChange(next, 'x'), - dragDirection: "e" - }), (0,external_React_.createElement)(FocalPointUnitControl, { - __next40pxDefaultSize: __next40pxDefaultSize, - label: (0,external_wp_i18n_namespaceObject.__)('Top'), - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'), - value: [valueY, '%'].join(''), - onChange: next => handleChange(next, 'y'), - dragDirection: "s" - })); + gap: 4, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, { + __next40pxDefaultSize: __next40pxDefaultSize, + label: (0,external_wp_i18n_namespaceObject.__)('Left'), + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'), + value: [valueX, '%'].join(''), + onChange: next => handleChange(next, 'x'), + dragDirection: "e" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointUnitControl, { + __next40pxDefaultSize: __next40pxDefaultSize, + label: (0,external_wp_i18n_namespaceObject.__)('Top'), + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'), + value: [valueY, '%'].join(''), + onChange: next => handleChange(next, 'y'), + dragDirection: "s" + })] + }); } function FocalPointUnitControl(props) { - return (0,external_React_.createElement)(focal_point_picker_style_StyledUnitControl, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(focal_point_picker_style_StyledUnitControl, { className: "focal-point-picker__controls-position-unit-control", labelPosition: "top", max: TEXTCONTROL_MAX, @@ -58954,13 +58888,9 @@ function FocalPointUnitControl(props) { * External dependencies */ -/** - * Internal dependencies - */ - -const PointerCircle = emotion_styled_base_browser_esm("div", true ? { +const PointerCircle = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e19snlhg0" -} : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:50%;backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;transition:transform 100ms linear;", reduceMotion('transition'), " ", ({ +} : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:50%;backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;@media not ( prefers-reduced-motion ){transition:transform 100ms linear;}", ({ isDragging }) => isDragging && ` box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px; @@ -58969,7 +58899,6 @@ const PointerCircle = emotion_styled_base_browser_esm("div", true ? { `, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js - /** * Internal dependencies */ @@ -58984,56 +58913,56 @@ function FocalPoint({ top = '50%', ...props }) { - const classes = classnames_default()('components-focal-point-picker__icon_container'); const style = { left, top }; - return (0,external_React_.createElement)(PointerCircle, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PointerCircle, { ...props, - className: classes, + className: "components-focal-point-picker__icon_container", style: style }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js - /** * Internal dependencies */ + + function FocalPointPickerGrid({ bounds, ...props }) { - return (0,external_React_.createElement)(GridView, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(GridView, { ...props, className: "components-focal-point-picker__grid", style: { width: bounds.width, height: bounds.height - } - }, (0,external_React_.createElement)(GridLineX, { - style: { - top: '33%' - } - }), (0,external_React_.createElement)(GridLineX, { - style: { - top: '66%' - } - }), (0,external_React_.createElement)(GridLineY, { - style: { - left: '33%' - } - }), (0,external_React_.createElement)(GridLineY, { - style: { - left: '66%' - } - })); + }, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineX, { + style: { + top: '33%' + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineX, { + style: { + top: '66%' + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineY, { + style: { + left: '33%' + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridLineY, { + style: { + left: '66%' + } + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js - /** * External dependencies */ @@ -59043,6 +58972,7 @@ function FocalPointPickerGrid({ */ + function media_Media({ alt, autoPlay, @@ -59055,14 +58985,14 @@ function media_Media({ ...props }) { if (!src) { - return (0,external_React_.createElement)(MediaPlaceholder, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaPlaceholder, { className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder", ref: mediaRef, ...props }); } const isVideo = isVideoType(src); - return isVideo ? (0,external_React_.createElement)("video", { + return isVideo ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("video", { ...props, autoPlay: autoPlay, className: "components-focal-point-picker__media components-focal-point-picker__media--video", @@ -59071,7 +59001,7 @@ function media_Media({ onLoadedData: onLoad, ref: mediaRef, src: src - }) : (0,external_React_.createElement)("img", { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("img", { ...props, alt: alt, className: "components-focal-point-picker__media components-focal-point-picker__media--image", @@ -59082,7 +59012,6 @@ function media_Media({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js - /** * External dependencies */ @@ -59106,6 +59035,8 @@ function media_Media({ + + const GRID_OVERLAY_TIMEOUT = 600; /** @@ -59185,7 +59116,9 @@ function FocalPointPicker({ // `value` can technically be undefined if getValueWithinDragArea() is // called before dragAreaRef is set, but this shouldn't happen in reality. - if (!value) return; + if (!value) { + return; + } onDragStart?.(value, event); setPoint(value); }, @@ -59193,7 +59126,9 @@ function FocalPointPicker({ // Prevents text-selection when dragging. event.preventDefault(); const value = getValueWithinDragArea(event); - if (!value) return; + if (!value) { + return; + } onDrag?.(value, event); setPoint(value); }, @@ -59211,7 +59146,9 @@ function FocalPointPicker({ const dragAreaRef = (0,external_wp_element_namespaceObject.useRef)(null); const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS); const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => { - if (!dragAreaRef.current) return; + if (!dragAreaRef.current) { + return; + } const { clientWidth: width, clientHeight: height @@ -59228,7 +59165,9 @@ function FocalPointPicker({ }); (0,external_wp_element_namespaceObject.useEffect)(() => { const updateBounds = refUpdateBounds.current; - if (!dragAreaRef.current) return; + if (!dragAreaRef.current) { + return; + } const { defaultView } = dragAreaRef.current.ownerDocument; @@ -59246,7 +59185,9 @@ function FocalPointPicker({ clientY, shiftKey }) => { - if (!dragAreaRef.current) return; + if (!dragAreaRef.current) { + return; + } const { top, left @@ -59279,7 +59220,9 @@ function FocalPointPicker({ code, shiftKey } = event; - if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return; + if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) { + return; + } event.preventDefault(); const value = { x, @@ -59295,7 +59238,7 @@ function FocalPointPicker({ left: x !== undefined ? x * bounds.width : 0.5 * bounds.width, top: y !== undefined ? y * bounds.height : 0.5 * bounds.height }; - const classes = classnames_default()('components-focal-point-picker-control', className); + const classes = dist_clsx('components-focal-point-picker-control', className); const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker); const id = `inspector-focal-point-picker-control-${instanceId}`; use_update_effect(() => { @@ -59305,53 +59248,57 @@ function FocalPointPicker({ }, GRID_OVERLAY_TIMEOUT); return () => window.clearTimeout(timeout); }, [x, y]); - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(base_control, { ...restProps, __nextHasNoMarginBottom: __nextHasNoMarginBottom, label: label, id: id, help: help, - className: classes - }, (0,external_React_.createElement)(MediaWrapper, { - className: "components-focal-point-picker-wrapper" - }, (0,external_React_.createElement)(MediaContainer, { - className: "components-focal-point-picker", - onKeyDown: arrowKeyStep, - onMouseDown: startDrag, - onBlur: () => { - if (isDragging) endDrag(); - }, - ref: dragAreaRef, - role: "button", - tabIndex: -1 - }, (0,external_React_.createElement)(FocalPointPickerGrid, { - bounds: bounds, - showOverlay: showGridOverlay - }), (0,external_React_.createElement)(media_Media, { - alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'), - autoPlay: autoPlay, - onLoad: refUpdateBounds.current, - src: url - }), (0,external_React_.createElement)(FocalPoint, { - ...focalPointPosition, - isDragging: isDragging - }))), (0,external_React_.createElement)(FocalPointPickerControls, { - __nextHasNoMarginBottom: __nextHasNoMarginBottom, - __next40pxDefaultSize: __next40pxDefaultSize, - hasHelpText: !!help, - point: { - x, - y - }, - onChange: value => { - onChange?.(getFinalValue(value)); - } - })); + className: classes, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MediaWrapper, { + className: "components-focal-point-picker-wrapper", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MediaContainer, { + className: "components-focal-point-picker", + onKeyDown: arrowKeyStep, + onMouseDown: startDrag, + onBlur: () => { + if (isDragging) { + endDrag(); + } + }, + ref: dragAreaRef, + role: "button", + tabIndex: -1, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointPickerGrid, { + bounds: bounds, + showOverlay: showGridOverlay + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(media_Media, { + alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'), + autoPlay: autoPlay, + onLoad: refUpdateBounds.current, + src: url + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPoint, { + ...focalPointPosition, + isDragging: isDragging + })] + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FocalPointPickerControls, { + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + __next40pxDefaultSize: __next40pxDefaultSize, + hasHelpText: !!help, + point: { + x, + y + }, + onChange: value => { + onChange?.(getFinalValue(value)); + } + })] + }); } /* harmony default export */ const focal_point_picker = (FocalPointPicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js - /** * WordPress dependencies */ @@ -59374,26 +59321,28 @@ function FocusableIframe({ // assigning props inherited from the rendering parent. It's the // responsibility of the parent to assign a title. // eslint-disable-next-line jsx-a11y/iframe-has-title - return (0,external_React_.createElement)("iframe", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", { ref: ref, ...props }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js - /** * WordPress dependencies */ -const settings = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + + +const settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" -}), (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" -})); + viewBox: "0 0 24 24", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" + })] +}); /* harmony default export */ const library_settings = (settings); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js @@ -59454,7 +59403,7 @@ function font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You -const styles_Container = emotion_styled_base_browser_esm("fieldset", true ? { +const styles_Container = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? { target: "e8tqeku4" } : 0)( true ? { name: "1t1ytme", @@ -59469,12 +59418,11 @@ const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_b const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel, true ? { target: "e8tqeku1" } : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0)); -const HeaderHint = emotion_styled_base_browser_esm("span", true ? { +const HeaderHint = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e8tqeku0" } : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js - /** * WordPress dependencies */ @@ -59486,6 +59434,7 @@ const HeaderHint = emotion_styled_base_browser_esm("span", true ? { + const DEFAULT_OPTION = { key: 'default', name: (0,external_wp_i18n_namespaceObject.__)('Default'), @@ -59525,9 +59474,8 @@ const FontSizePickerSelect = props => { }; }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])]; const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION; - return (0,external_React_.createElement)(CustomSelectControl, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomSelectControl, { __next40pxDefaultSize: __next40pxDefaultSize, - __nextUnconstrainedWidth: true, className: "components-font-size-picker__select", label: (0,external_wp_i18n_namespaceObject.__)('Font size'), hideLabelFromVision: true, @@ -59552,7 +59500,6 @@ const FontSizePickerSelect = props => { /* harmony default export */ const font_size_picker_select = (FontSizePickerSelect); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js - /** * External dependencies */ @@ -59567,17 +59514,19 @@ const FontSizePickerSelect = props => { */ + function UnforwardedToggleGroupControlOption(props, ref) { const { label, ...restProps } = props; const optionLabel = restProps['aria-label'] || label; - return (0,external_React_.createElement)(toggle_group_control_option_base_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_base_component, { ...restProps, "aria-label": optionLabel, - ref: ref - }, label); + ref: ref, + children: label + }); } /** @@ -59631,7 +59580,6 @@ const T_SHIRT_ABBREVIATIONS = [/* translators: S stands for 'small' and is a siz const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')]; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-toggle-group.js - /** * WordPress dependencies */ @@ -59642,6 +59590,7 @@ const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,exte */ + const FontSizePickerToggleGroup = props => { const { fontSizes, @@ -59650,7 +59599,7 @@ const FontSizePickerToggleGroup = props => { size, onChange } = props; - return (0,external_React_.createElement)(toggle_group_control_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_component, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: __next40pxDefaultSize, label: (0,external_wp_i18n_namespaceObject.__)('Font size'), @@ -59658,19 +59607,18 @@ const FontSizePickerToggleGroup = props => { value: value, onChange: onChange, isBlock: true, - size: size - }, fontSizes.map((fontSize, index) => (0,external_React_.createElement)(toggle_group_control_option_component, { - key: fontSize.slug, - value: fontSize.size, - label: T_SHIRT_ABBREVIATIONS[index], - "aria-label": fontSize.name || T_SHIRT_NAMES[index], - showTooltip: true - }))); + size: size, + children: fontSizes.map((fontSize, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toggle_group_control_option_component, { + value: fontSize.size, + label: T_SHIRT_ABBREVIATIONS[index], + "aria-label": fontSize.name || T_SHIRT_NAMES[index], + showTooltip: true + }, fontSize.slug)) + }); }; /* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/index.js - /** * External dependencies */ @@ -59696,6 +59644,9 @@ const FontSizePickerToggleGroup = props => { + + +const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh']; const UnforwardedFontSizePicker = (props, ref) => { const { __next40pxDefaultSize = false, @@ -59704,13 +59655,13 @@ const UnforwardedFontSizePicker = (props, ref) => { disableCustomFontSizes = false, onChange, size = 'default', - units: unitsProp, + units: unitsProp = DEFAULT_UNITS, value, withSlider = false, withReset = true } = props; const units = useCustomUnits({ - availableUnits: unitsProp || ['px', 'em', 'rem'] + availableUnits: unitsProp }); const shouldUseSelectControl = fontSizes.length > 5; const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value); @@ -59741,115 +59692,130 @@ const UnforwardedFontSizePicker = (props, ref) => { // to select px values and onChange() is always called with number values. const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string'; const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units); - const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit); + const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit); const isDisabled = value === undefined; - return (0,external_React_.createElement)(styles_Container, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Container, { ref: ref, - className: "components-font-size-picker" - }, (0,external_React_.createElement)(visually_hidden_component, { - as: "legend" - }, (0,external_wp_i18n_namespaceObject.__)('Font size')), (0,external_React_.createElement)(spacer_component, null, (0,external_React_.createElement)(styles_Header, { - className: "components-font-size-picker__header" - }, (0,external_React_.createElement)(HeaderLabel, { - "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} ${headerHint || ''}` - }, (0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && (0,external_React_.createElement)(HeaderHint, { - className: "components-font-size-picker__header__hint" - }, headerHint)), !disableCustomFontSizes && (0,external_React_.createElement)(HeaderToggle, { - label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), - icon: library_settings, - onClick: () => { - setShowCustomValueControl(!showCustomValueControl); - }, - isPressed: showCustomValueControl, - size: "small" - }))), (0,external_React_.createElement)("div", null, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0,external_React_.createElement)(font_size_picker_select, { - __next40pxDefaultSize: __next40pxDefaultSize, - fontSizes: fontSizes, - value: value, - disableCustomFontSizes: disableCustomFontSizes, - size: size, - onChange: newValue => { - if (newValue === undefined) { - onChange?.(undefined); - } else { - onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); - } - }, - onSelectCustom: () => setShowCustomValueControl(true) - }), !shouldUseSelectControl && !showCustomValueControl && (0,external_React_.createElement)(font_size_picker_toggle_group, { - fontSizes: fontSizes, - value: value, - __next40pxDefaultSize: __next40pxDefaultSize, - size: size, - onChange: newValue => { - if (newValue === undefined) { - onChange?.(undefined); - } else { - onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); - } - } - }), !disableCustomFontSizes && showCustomValueControl && (0,external_React_.createElement)(flex_component, { - className: "components-font-size-picker__custom-size-control" - }, (0,external_React_.createElement)(flex_item_component, { - isBlock: true - }, (0,external_React_.createElement)(unit_control, { - __next40pxDefaultSize: __next40pxDefaultSize, - label: (0,external_wp_i18n_namespaceObject.__)('Custom'), - labelPosition: "top", - hideLabelFromVision: true, - value: value, - onChange: newValue => { - if (newValue === undefined) { - onChange?.(undefined); - } else { - onChange?.(hasUnits ? newValue : parseInt(newValue, 10)); - } - }, - size: size, - units: hasUnits ? units : [], - min: 0 - })), withSlider && (0,external_React_.createElement)(flex_item_component, { - isBlock: true - }, (0,external_React_.createElement)(spacer_component, { - marginX: 2, - marginBottom: 0 - }, (0,external_React_.createElement)(range_control, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - className: "components-font-size-picker__custom-input", - label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'), - hideLabelFromVision: true, - value: valueQuantity, - initialPosition: fallbackFontSize, - withInputField: false, - onChange: newValue => { - if (newValue === undefined) { - onChange?.(undefined); - } else if (hasUnits) { - onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px')); - } else { - onChange?.(newValue); - } - }, - min: 0, - max: isValueUnitRelative ? 10 : 100, - step: isValueUnitRelative ? 0.1 : 1 - }))), withReset && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(Button, { - disabled: isDisabled, - __experimentalIsFocusable: true, - onClick: () => { - onChange?.(undefined); - }, - variant: "secondary", - __next40pxDefaultSize: true, - size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small' - }, (0,external_wp_i18n_namespaceObject.__)('Reset')))))); + className: "components-font-size-picker", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "legend", + children: (0,external_wp_i18n_namespaceObject.__)('Font size') + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Header, { + className: "components-font-size-picker__header", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(HeaderLabel, { + "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} ${headerHint || ''}`, + children: [(0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeaderHint, { + className: "components-font-size-picker__header__hint", + children: headerHint + })] + }), !disableCustomFontSizes && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(HeaderToggle, { + label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), + icon: library_settings, + onClick: () => { + setShowCustomValueControl(!showCustomValueControl); + }, + isPressed: showCustomValueControl, + size: "small" + })] + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + children: [!!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_select, { + __next40pxDefaultSize: __next40pxDefaultSize, + fontSizes: fontSizes, + value: value, + disableCustomFontSizes: disableCustomFontSizes, + size: size, + onChange: newValue => { + if (newValue === undefined) { + onChange?.(undefined); + } else { + onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); + } + }, + onSelectCustom: () => setShowCustomValueControl(true) + }), !shouldUseSelectControl && !showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(font_size_picker_toggle_group, { + fontSizes: fontSizes, + value: value, + __next40pxDefaultSize: __next40pxDefaultSize, + size: size, + onChange: newValue => { + if (newValue === undefined) { + onChange?.(undefined); + } else { + onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); + } + } + }), !disableCustomFontSizes && showCustomValueControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(flex_component, { + className: "components-font-size-picker__custom-size-control", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + isBlock: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_control, { + __next40pxDefaultSize: __next40pxDefaultSize, + label: (0,external_wp_i18n_namespaceObject.__)('Custom'), + labelPosition: "top", + hideLabelFromVision: true, + value: value, + onChange: newValue => { + if (newValue === undefined) { + onChange?.(undefined); + } else { + onChange?.(hasUnits ? newValue : parseInt(newValue, 10)); + } + }, + size: size, + units: hasUnits ? units : [], + min: 0 + }) + }), withSlider && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + isBlock: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + marginX: 2, + marginBottom: 0, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + className: "components-font-size-picker__custom-input", + label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'), + hideLabelFromVision: true, + value: valueQuantity, + initialPosition: fallbackFontSize, + withInputField: false, + onChange: newValue => { + if (newValue === undefined) { + onChange?.(undefined); + } else if (hasUnits) { + onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px')); + } else { + onChange?.(newValue); + } + }, + min: 0, + max: isValueUnitRelative ? 10 : 100, + step: isValueUnitRelative ? 0.1 : 1 + }) + }) + }), withReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Button, { + disabled: isDisabled, + __experimentalIsFocusable: true, + onClick: () => { + onChange?.(undefined); + }, + variant: "secondary", + __next40pxDefaultSize: true, + size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small', + children: (0,external_wp_i18n_namespaceObject.__)('Reset') + }) + })] + })] + })] + }); }; const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker); /* harmony default export */ const font_size_picker = (FontSizePicker); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-file-upload/index.js - /** * WordPress dependencies */ @@ -59859,6 +59825,8 @@ const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(Unforw * Internal dependencies */ + + /** * FormFileUpload is a component that allows users to select files from their local device. * @@ -59890,38 +59858,44 @@ function FormFileUpload({ }; const ui = render ? render({ openFileDialog - }) : (0,external_React_.createElement)(build_module_button, { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { onClick: openFileDialog, - ...props - }, children); - return (0,external_React_.createElement)("div", { - className: "components-form-file-upload" - }, ui, (0,external_React_.createElement)("input", { - type: "file", - ref: ref, - multiple: multiple, - style: { - display: 'none' - }, - accept: accept, - onChange: onChange, - onClick: onClick, - "data-testid": "form-file-upload-input" - })); + ...props, + children: children + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-form-file-upload", + children: [ui, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { + type: "file", + ref: ref, + multiple: multiple, + style: { + display: 'none' + }, + accept: accept, + onChange: onChange, + onClick: onClick, + "data-testid": "form-file-upload-input" + })] + }); } /* harmony default export */ const form_file_upload = (FormFileUpload); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-toggle/index.js - /** * External dependencies */ +/** + * WordPress dependencies + */ + /** * Internal dependencies */ + const form_toggle_noop = () => {}; /** @@ -59943,7 +59917,7 @@ const form_toggle_noop = () => {}; * }; * ``` */ -function FormToggle(props) { +function FormToggle(props, ref) { const { className, checked, @@ -59952,30 +59926,31 @@ function FormToggle(props) { onChange = form_toggle_noop, ...additionalProps } = props; - const wrapperClasses = classnames_default()('components-form-toggle', className, { + const wrapperClasses = dist_clsx('components-form-toggle', className, { 'is-checked': checked, 'is-disabled': disabled }); - return (0,external_React_.createElement)("span", { - className: wrapperClasses - }, (0,external_React_.createElement)("input", { - className: "components-form-toggle__input", - id: id, - type: "checkbox", - checked: checked, - onChange: onChange, - disabled: disabled, - ...additionalProps - }), (0,external_React_.createElement)("span", { - className: "components-form-toggle__track" - }), (0,external_React_.createElement)("span", { - className: "components-form-toggle__thumb" - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { + className: wrapperClasses, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { + className: "components-form-toggle__input", + id: id, + type: "checkbox", + checked: checked, + onChange: onChange, + disabled: disabled, + ...additionalProps, + ref: ref + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-form-toggle__track" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-form-toggle__thumb" + })] + }); } -/* harmony default export */ const form_toggle = (FormToggle); +/* harmony default export */ const form_toggle = ((0,external_wp_element_namespaceObject.forwardRef)(FormToggle)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token.js - /** * External dependencies */ @@ -59993,6 +59968,8 @@ function FormToggle(props) { */ + + const token_noop = () => {}; function Token({ value, @@ -60009,7 +59986,7 @@ function Token({ termsCount }) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token); - const tokenClasses = classnames_default()('components-form-token-field__token', { + const tokenClasses = dist_clsx('components-form-token-field__token', { 'is-error': 'error' === status, 'is-success': 'success' === status, 'is-validating': 'validating' === status, @@ -60022,26 +59999,30 @@ function Token({ const transformedValue = displayTransform(value); const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */ (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount); - return (0,external_React_.createElement)("span", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { className: tokenClasses, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, - title: title - }, (0,external_React_.createElement)("span", { - className: "components-form-token-field__token-text", - id: `components-form-token-field__token-text-${instanceId}` - }, (0,external_React_.createElement)(visually_hidden_component, { - as: "span" - }, termPositionAndCount), (0,external_React_.createElement)("span", { - "aria-hidden": "true" - }, transformedValue)), (0,external_React_.createElement)(build_module_button, { - className: "components-form-token-field__remove-token", - icon: close_small, - onClick: !disabled ? onClick : undefined, - disabled: disabled, - label: messages.remove, - "aria-describedby": `components-form-token-field__token-text-${instanceId}` - })); + title: title, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { + className: "components-form-token-field__token-text", + id: `components-form-token-field__token-text-${instanceId}`, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + as: "span", + children: termPositionAndCount + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + "aria-hidden": "true", + children: transformedValue + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-form-token-field__remove-token", + icon: close_small, + onClick: !disabled ? onClick : undefined, + disabled: disabled, + label: messages.remove, + "aria-describedby": `components-form-token-field__token-text-${instanceId}` + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/styles.js @@ -60067,7 +60048,6 @@ const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(f } : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/index.js - /** * External dependencies */ @@ -60092,6 +60072,9 @@ const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(f + + + const form_token_field_identity = value => value; /** @@ -60102,7 +60085,7 @@ const form_token_field_identity = value => value; * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key. * * The `value` property is handled in a manner similar to controlled form components. - * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information. + * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information. */ function FormTokenField(props) { const { @@ -60229,13 +60212,7 @@ function FormTokenField(props) { } function onKeyDown(event) { let preventDefault = false; - if (event.defaultPrevented || - // Ignore keydowns from IMEs - event.nativeEvent.isComposing || - // Workaround for Mac Safari where the final Enter/Backspace of an IME composition - // is `isComposing=false`, even though it's technically still part of the composition. - // These can only be detected by keyCode. - event.keyCode === 229) { + if (event.defaultPrevented) { return; } switch (event.key) { @@ -60527,22 +60504,22 @@ function FormTokenField(props) { const status = typeof token !== 'string' ? token.status : undefined; const termPosition = index + 1; const termsCount = tokens.length; - return (0,external_React_.createElement)(flex_item_component, { - key: 'token-' + _value - }, (0,external_React_.createElement)(Token, { - value: _value, - status: status, - title: typeof token !== 'string' ? token.title : undefined, - displayTransform: displayTransform, - onClickRemove: onTokenClickRemove, - isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless, - onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined, - onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined, - disabled: 'error' !== status && disabled, - messages: messages, - termsCount: termsCount, - termPosition: termPosition - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_item_component, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Token, { + value: _value, + status: status, + title: typeof token !== 'string' ? token.title : undefined, + displayTransform: displayTransform, + onClickRemove: onTokenClickRemove, + isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless, + onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined, + onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined, + disabled: 'error' !== status && disabled, + messages: messages, + termsCount: termsCount, + termPosition: termPosition + }) + }, 'token-' + _value); } function renderInput() { const inputProps = { @@ -60550,20 +60527,19 @@ function FormTokenField(props) { autoCapitalize, autoComplete, placeholder: value.length === 0 ? placeholder : '', - key: 'input', disabled, value: incompleteTokenValue, onBlur, isExpanded, selectedSuggestionIndex }; - return (0,external_React_.createElement)(token_input, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(token_input, { ...inputProps, onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined, ref: input - }); + }, "input"); } - const classes = classnames_default()(className, 'components-form-token-field__input-container', { + const classes = dist_clsx(className, 'components-form-token-field__input-container', { 'is-active': isActive, 'is-disabled': disabled }); @@ -60574,7 +60550,7 @@ function FormTokenField(props) { const matchingSuggestions = getMatchingSuggestions(); if (!disabled) { tokenFieldProps = Object.assign({}, tokenFieldProps, { - onKeyDown, + onKeyDown: withIgnoreIMEEvents(onKeyDown), onKeyPress, onFocus: onFocusHandler }); @@ -60584,64 +60560,69 @@ function FormTokenField(props) { // input container intended accessible usability. // TODO: Refactor click detection to use blur to stop propagation. /* eslint-disable jsx-a11y/no-static-element-interactions */ - return (0,external_React_.createElement)("div", { - ...tokenFieldProps - }, (0,external_React_.createElement)(StyledLabel, { - htmlFor: `components-form-token-input-${instanceId}`, - className: "components-form-token-field__label" - }, label), (0,external_React_.createElement)("div", { - ref: tokensAndInput, - className: classes, - tabIndex: -1, - onMouseDown: onContainerTouched, - onTouchStart: onContainerTouched - }, (0,external_React_.createElement)(TokensAndInputWrapperFlex, { - justify: "flex-start", - align: "center", - gap: 1, - wrap: true, - __next40pxDefaultSize: __next40pxDefaultSize, - hasTokens: !!value.length - }, renderTokensAndInput()), isExpanded && (0,external_React_.createElement)(suggestions_list, { - instanceId: instanceId, - match: saveTransform(incompleteTokenValue), - displayTransform: displayTransform, - suggestions: matchingSuggestions, - selectedIndex: selectedSuggestionIndex, - scrollIntoView: selectedSuggestionScroll, - onHover: onSuggestionHovered, - onSelect: onSuggestionSelected, - __experimentalRenderItem: __experimentalRenderItem - })), !__nextHasNoMarginBottom && (0,external_React_.createElement)(spacer_component, { - marginBottom: 2 - }), __experimentalShowHowTo && (0,external_React_.createElement)(StyledHelp, { - id: `components-form-token-suggestions-howto-${instanceId}`, - className: "components-form-token-field__help", - __nextHasNoMarginBottom: __nextHasNoMarginBottom - }, tokenizeOnSpace ? (0,external_wp_i18n_namespaceObject.__)('Separate with commas, spaces, or the Enter key.') : (0,external_wp_i18n_namespaceObject.__)('Separate with commas or the Enter key.'))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + ...tokenFieldProps, + children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledLabel, { + htmlFor: `components-form-token-input-${instanceId}`, + className: "components-form-token-field__label", + children: label + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + ref: tokensAndInput, + className: classes, + tabIndex: -1, + onMouseDown: onContainerTouched, + onTouchStart: onContainerTouched, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TokensAndInputWrapperFlex, { + justify: "flex-start", + align: "center", + gap: 1, + wrap: true, + __next40pxDefaultSize: __next40pxDefaultSize, + hasTokens: !!value.length, + children: renderTokensAndInput() + }), isExpanded && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(suggestions_list, { + instanceId: instanceId, + match: saveTransform(incompleteTokenValue), + displayTransform: displayTransform, + suggestions: matchingSuggestions, + selectedIndex: selectedSuggestionIndex, + scrollIntoView: selectedSuggestionScroll, + onHover: onSuggestionHovered, + onSelect: onSuggestionSelected, + __experimentalRenderItem: __experimentalRenderItem + })] + }), !__nextHasNoMarginBottom && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { + marginBottom: 2 + }), __experimentalShowHowTo && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledHelp, { + id: `components-form-token-suggestions-howto-${instanceId}`, + className: "components-form-token-field__help", + __nextHasNoMarginBottom: __nextHasNoMarginBottom, + children: tokenizeOnSpace ? (0,external_wp_i18n_namespaceObject.__)('Separate with commas, spaces, or the Enter key.') : (0,external_wp_i18n_namespaceObject.__)('Separate with commas or the Enter key.') + })] + }); /* eslint-enable jsx-a11y/no-static-element-interactions */ } /* harmony default export */ const form_token_field = (FormTokenField); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/icons.js - /** * WordPress dependencies */ -const PageControlIcon = () => (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const PageControlIcon = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { width: "8", height: "8", fill: "none", - xmlns: "http://www.w3.org/2000/svg" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Circle, { - cx: "4", - cy: "4", - r: "4" -})); + xmlns: "http://www.w3.org/2000/svg", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, { + cx: "4", + cy: "4", + r: "4" + }) +}); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page-control.js - /** * WordPress dependencies */ @@ -60652,32 +60633,31 @@ const PageControlIcon = () => (0,external_React_.createElement)(external_wp_prim */ + function PageControl({ currentPage, numberOfPages, setCurrentPage }) { - return (0,external_React_.createElement)("ul", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { className: "components-guide__page-control", - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls') - }, Array.from({ - length: numberOfPages - }).map((_, page) => (0,external_React_.createElement)("li", { - key: page - // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current - , - "aria-current": page === currentPage ? 'step' : undefined - }, (0,external_React_.createElement)(build_module_button, { - key: page, - icon: (0,external_React_.createElement)(PageControlIcon, null), - "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */ - (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages), - onClick: () => setCurrentPage(page) - })))); + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls'), + children: Array.from({ + length: numberOfPages + }).map((_, page) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("li", { + // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current + "aria-current": page === currentPage ? 'step' : undefined, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + icon: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PageControlIcon, {}), + "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */ + (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages), + onClick: () => setCurrentPage(page) + }, page) + }, page)) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/index.js - /** * External dependencies */ @@ -60696,6 +60676,8 @@ function PageControl({ + + /** * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide. * @@ -60774,8 +60756,8 @@ function Guide({ if (pages.length === 0) { return null; } - return (0,external_React_.createElement)(modal, { - className: classnames_default()('components-guide', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(modal, { + className: dist_clsx('components-guide', className), contentLabel: contentLabel, isDismissible: pages.length > 1, onRequestClose: onFinish, @@ -60790,35 +60772,41 @@ function Guide({ event.preventDefault(); } }, - ref: ref - }, (0,external_React_.createElement)("div", { - className: "components-guide__container" - }, (0,external_React_.createElement)("div", { - className: "components-guide__page" - }, pages[currentPage].image, pages.length > 1 && (0,external_React_.createElement)(PageControl, { - currentPage: currentPage, - numberOfPages: pages.length, - setCurrentPage: setCurrentPage - }), pages[currentPage].content), (0,external_React_.createElement)("div", { - className: "components-guide__footer" - }, canGoBack && (0,external_React_.createElement)(build_module_button, { - className: "components-guide__back-button", - variant: "tertiary", - onClick: goBack - }, (0,external_wp_i18n_namespaceObject.__)('Previous')), canGoForward && (0,external_React_.createElement)(build_module_button, { - className: "components-guide__forward-button", - variant: "primary", - onClick: goForward - }, (0,external_wp_i18n_namespaceObject.__)('Next')), !canGoForward && (0,external_React_.createElement)(build_module_button, { - className: "components-guide__finish-button", - variant: "primary", - onClick: onFinish - }, finishButtonText)))); + ref: ref, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-guide__container", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-guide__page", + children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PageControl, { + currentPage: currentPage, + numberOfPages: pages.length, + setCurrentPage: setCurrentPage + }), pages[currentPage].content] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-guide__footer", + children: [canGoBack && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-guide__back-button", + variant: "tertiary", + onClick: goBack, + children: (0,external_wp_i18n_namespaceObject.__)('Previous') + }), canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-guide__forward-button", + variant: "primary", + onClick: goForward, + children: (0,external_wp_i18n_namespaceObject.__)('Next') + }), !canGoForward && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-guide__finish-button", + variant: "primary", + onClick: onFinish, + children: finishButtonText + })] + })] + }) + }); } /* harmony default export */ const guide = (Guide); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page.js - /** * WordPress dependencies */ @@ -60836,13 +60824,12 @@ function GuidePage(props) { alternative: 'the `pages` prop in <Guide>' }); }, []); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ...props }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/deprecated.js - /** * External dependencies */ @@ -60857,6 +60844,7 @@ function GuidePage(props) { * Internal dependencies */ + function UnforwardedIconButton({ label, labelPosition, @@ -60869,7 +60857,7 @@ function UnforwardedIconButton({ alternative: 'wp.components.Button', version: '6.2' }); - return (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { ...props, ref: ref, tooltipPosition: labelPosition, @@ -60882,10 +60870,6 @@ function UnforwardedIconButton({ ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/hook.js /** - * External dependencies - */ - -/** * WordPress dependencies */ @@ -60927,7 +60911,6 @@ function useItem(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/component.js - /** * External dependencies */ @@ -60939,19 +60922,21 @@ function useItem(props) { + function UnconnectedItem(props, forwardedRef) { const { role, wrapperClassName, ...otherProps } = useItem(props); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { role: role, - className: wrapperClassName - }, (0,external_React_.createElement)(component, { - ...otherProps, - ref: forwardedRef - })); + className: wrapperClassName, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { + ...otherProps, + ref: forwardedRef + }) + }); } /** @@ -60979,7 +60964,6 @@ const component_Item = contextConnect(UnconnectedItem, 'Item'); /* harmony default export */ const item_component = (component_Item); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-prefix-wrapper.js - /** * External dependencies */ @@ -60989,9 +60973,10 @@ const component_Item = contextConnect(UnconnectedItem, 'Item'); */ + function UnconnectedInputControlPrefixWrapper(props, forwardedRef) { const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper'); - return (0,external_React_.createElement)(spacer_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, { marginBottom: 0, ...derivedProps, ref: forwardedRef @@ -61017,7 +61002,6 @@ const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWr /* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js - /** * WordPress dependencies */ @@ -61028,6 +61012,8 @@ const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWr * Internal dependencies */ + + function KeyboardShortcut({ target, callback, @@ -61080,28 +61066,29 @@ function KeyboardShortcuts({ eventName }) { const target = (0,external_wp_element_namespaceObject.useRef)(null); - const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => (0,external_React_.createElement)(KeyboardShortcut, { - key: shortcut, + const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(KeyboardShortcut, { shortcut: shortcut, callback: callback, bindGlobal: bindGlobal, eventName: eventName, target: target - })); + }, shortcut)); // Render as non-visual if there are no children pressed. Keyboard // events will be bound to the document instead. if (!external_wp_element_namespaceObject.Children.count(children)) { - return (0,external_React_.createElement)(external_React_.Fragment, null, element); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: element + }); } - return (0,external_React_.createElement)("div", { - ref: target - }, element, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + ref: target, + children: [element, children] + }); } /* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-group/index.js - /** * External dependencies */ @@ -61117,6 +61104,7 @@ function KeyboardShortcuts({ * Internal dependencies */ + /** * `MenuGroup` wraps a series of related `MenuItem` components into a common * section. @@ -61144,24 +61132,26 @@ function MenuGroup(props) { return null; } const labelId = `components-menu-group-label-${instanceId}`; - const classNames = classnames_default()(className, 'components-menu-group', { + const classNames = dist_clsx(className, 'components-menu-group', { 'has-hidden-separator': hideSeparator }); - return (0,external_React_.createElement)("div", { - className: classNames - }, label && (0,external_React_.createElement)("div", { - className: "components-menu-group__label", - id: labelId, - "aria-hidden": "true" - }, label), (0,external_React_.createElement)("div", { - role: "group", - "aria-labelledby": label ? labelId : undefined - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: classNames, + children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-menu-group__label", + id: labelId, + "aria-hidden": "true", + children: label + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + role: "group", + "aria-labelledby": label ? labelId : undefined, + children: children + })] + }); } /* harmony default export */ const menu_group = (MenuGroup); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-item/index.js - /** * External dependencies */ @@ -61179,6 +61169,8 @@ function MenuGroup(props) { + + function UnforwardedMenuItem(props, ref) { let { children, @@ -61192,24 +61184,27 @@ function UnforwardedMenuItem(props, ref) { suffix, ...buttonProps } = props; - className = classnames_default()('components-menu-item__button', className); + className = dist_clsx('components-menu-item__button', className); if (info) { - children = (0,external_React_.createElement)("span", { - className: "components-menu-item__info-wrapper" - }, (0,external_React_.createElement)("span", { - className: "components-menu-item__item" - }, children), (0,external_React_.createElement)("span", { - className: "components-menu-item__info" - }, info)); + children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("span", { + className: "components-menu-item__info-wrapper", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-menu-item__item", + children: children + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-menu-item__info", + children: info + })] + }); } if (icon && typeof icon !== 'string') { icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, { - className: classnames_default()('components-menu-items__item-icon', { + className: dist_clsx('components-menu-items__item-icon', { 'has-icon-right': iconPosition === 'right' }) }); } - return (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, { ref: ref // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked , @@ -61217,15 +61212,17 @@ function UnforwardedMenuItem(props, ref) { role: role, icon: iconPosition === 'left' ? icon : undefined, className: className, - ...buttonProps - }, (0,external_React_.createElement)("span", { - className: "components-menu-item__item" - }, children), !suffix && (0,external_React_.createElement)(build_module_shortcut, { - className: "components-menu-item__shortcut", - shortcut: shortcut - }), !suffix && icon && iconPosition === 'right' && (0,external_React_.createElement)(build_module_icon, { - icon: icon - }), suffix); + ...buttonProps, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + className: "components-menu-item__item", + children: children + }), !suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_shortcut, { + className: "components-menu-item__shortcut", + shortcut: shortcut + }), !suffix && icon && iconPosition === 'right' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon + }), suffix] + }); } /** @@ -61255,7 +61252,6 @@ const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedM /* harmony default export */ const menu_item = (MenuItem); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js - /** * WordPress dependencies */ @@ -61265,6 +61261,8 @@ const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedM * Internal dependencies */ + + const menu_items_choice_noop = () => {}; /** @@ -61306,32 +61304,33 @@ function MenuItemsChoice({ onSelect, value }) { - return (0,external_React_.createElement)(external_React_.Fragment, null, choices.map(item => { - const isSelected = value === item.value; - return (0,external_React_.createElement)(menu_item, { - key: item.value, - role: "menuitemradio", - disabled: item.disabled, - icon: isSelected ? library_check : null, - info: item.info, - isSelected: isSelected, - shortcut: item.shortcut, - className: "components-menu-items-choice", - onClick: () => { - if (!isSelected) { - onSelect(item.value); - } - }, - onMouseEnter: () => onHover(item.value), - onMouseLeave: () => onHover(null), - "aria-label": item['aria-label'] - }, item.label); - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: choices.map(item => { + const isSelected = value === item.value; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { + role: "menuitemradio", + disabled: item.disabled, + icon: isSelected ? library_check : null, + info: item.info, + isSelected: isSelected, + shortcut: item.shortcut, + className: "components-menu-items-choice", + onClick: () => { + if (!isSelected) { + onSelect(item.value); + } + }, + onMouseEnter: () => onHover(item.value), + onMouseLeave: () => onHover(null), + "aria-label": item['aria-label'], + children: item.label + }, item.value); + }) + }); } /* harmony default export */ const menu_items_choice = (MenuItemsChoice); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js - /** * External dependencies */ @@ -61345,6 +61344,7 @@ function MenuItemsChoice({ * Internal dependencies */ + function UnforwardedTabbableContainer({ eventToOffset, ...props @@ -61374,7 +61374,7 @@ function UnforwardedTabbableContainer({ } return undefined; }; - return (0,external_React_.createElement)(container, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(container, { ref: ref, stopNavigationEvents: true, onlyBrowserTabstops: true, @@ -61478,10 +61478,10 @@ function navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t -const NavigationUI = emotion_styled_base_browser_esm("div", true ? { +const NavigationUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeiismy11" } : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0)); -const MenuUI = emotion_styled_base_browser_esm("div", true ? { +const MenuUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeiismy10" } : 0)("margin-top:", space(6), ";margin-bottom:", space(6), ";display:flex;flex-direction:column;ul{padding:0;margin:0;list-style:none;}.components-navigation__back-button{margin-bottom:", space(6), ";}.components-navigation__group+.components-navigation__group{margin-top:", space(6), ";}" + ( true ? "" : 0)); const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { @@ -61490,40 +61490,40 @@ const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_modu name: "26l0q2", styles: "&.is-tertiary{color:inherit;opacity:0.7;&:hover:not( :disabled ){opacity:1;box-shadow:none;color:inherit;}&:active:not( :disabled ){background:transparent;opacity:1;color:inherit;}}" } : 0); -const MenuTitleUI = emotion_styled_base_browser_esm("div", true ? { +const MenuTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeiismy8" } : 0)( true ? { name: "1aubja5", styles: "overflow:hidden;width:100%" } : 0); -const MenuTitleSearchControlWrapper = emotion_styled_base_browser_esm("div", true ? { +const MenuTitleSearchControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeiismy7" } : 0)( true ? { name: "rgorny", styles: "margin:11px 0;padding:1px" } : 0); -const MenuTitleActionsUI = emotion_styled_base_browser_esm("span", true ? { +const MenuTitleActionsUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "eeiismy6" } : 0)("height:", space(6), ";.components-button.is-small{color:inherit;opacity:0.7;margin-right:", space(1), ";padding:0;&:active:not( :disabled ){background:none;opacity:1;color:inherit;}&:hover:not( :disabled ){box-shadow:none;opacity:1;color:inherit;}}" + ( true ? "" : 0)); const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { target: "eeiismy5" } : 0)("min-height:", space(12), ";align-items:center;color:inherit;display:flex;justify-content:space-between;margin-bottom:", space(2), ";padding:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? `${space(1)} ${space(4)} ${space(1)} ${space(2)}` : `${space(1)} ${space(2)} ${space(1)} ${space(4)}`, ";" + ( true ? "" : 0)); -const ItemBaseUI = emotion_styled_base_browser_esm("li", true ? { +const ItemBaseUI = /*#__PURE__*/emotion_styled_base_browser_esm("li", true ? { target: "eeiismy4" } : 0)("border-radius:2px;color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({ textAlign: 'left' }, { textAlign: 'right' }), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";>button,>a{color:", COLORS.white, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0)); -const ItemUI = emotion_styled_base_browser_esm("div", true ? { +const ItemUI = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "eeiismy3" } : 0)("display:flex;align-items:center;height:auto;min-height:40px;margin:0;padding:", space(1.5), " ", space(4), ";font-weight:400;line-height:20px;width:100%;color:inherit;opacity:0.7;" + ( true ? "" : 0)); -const ItemIconUI = emotion_styled_base_browser_esm("span", true ? { +const ItemIconUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "eeiismy2" } : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0)); -const ItemBadgeUI = emotion_styled_base_browser_esm("span", true ? { +const ItemBadgeUI = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "eeiismy1" -} : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:2px;animation:fade-in 250ms ease-out;@keyframes fade-in{from{opacity:0;}to{opacity:1;}}", reduceMotion('animation'), ";" + ( true ? "" : 0)); +} : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:2px;@keyframes fade-in{from{opacity:0;}to{opacity:1;}}@media not ( prefers-reduced-motion ){animation:fade-in 250ms ease-out;}" + ( true ? "" : 0)); const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { target: "eeiismy0" } : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0)); @@ -61655,7 +61655,6 @@ const useCreateNavigationTree = () => { }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/index.js - /** * External dependencies */ @@ -61675,11 +61674,14 @@ const useCreateNavigationTree = () => { + const navigation_noop = () => {}; /** * Render a navigation list with optional groupings and hierarchy. * + * @deprecated Use `Navigator` instead. + * * ```jsx * import { * __experimentalNavigation as Navigation, @@ -61758,54 +61760,57 @@ function Navigation({ setActiveMenu, navigationTree }; - const classes = classnames_default()('components-navigation', className); + const classes = dist_clsx('components-navigation', className); const animateClassName = getAnimateClassName({ type: 'slide-in', origin: slideOrigin }); - return (0,external_React_.createElement)(NavigationUI, { - className: classes - }, (0,external_React_.createElement)("div", { - key: menu, - className: animateClassName ? classnames_default()({ - [animateClassName]: isMounted.current && slideOrigin - }) : undefined - }, (0,external_React_.createElement)(NavigationContext.Provider, { - value: context - }, children))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationUI, { + className: classes, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: animateClassName ? dist_clsx({ + [animateClassName]: isMounted.current && slideOrigin + }) : undefined, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationContext.Provider, { + value: context, + children: children + }) + }, menu) + }); } /* harmony default export */ const navigation = (Navigation); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js - /** * WordPress dependencies */ -const chevronRight = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const chevronRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" + }) +}); /* harmony default export */ const chevron_right = (chevronRight); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js - /** * WordPress dependencies */ -const chevronLeft = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const chevronLeft = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" + }) +}); /* harmony default export */ const chevron_left = (chevronLeft); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js - /** * External dependencies */ @@ -61822,6 +61827,8 @@ const chevronLeft = (0,external_React_.createElement)(external_wp_primitives_nam */ + + function UnforwardedNavigationBackButton({ backButtonLabel, className, @@ -61833,7 +61840,7 @@ function UnforwardedNavigationBackButton({ setActiveMenu, navigationTree } = useNavigationContext(); - const classes = classnames_default()('components-navigation__back-button', className); + const classes = dist_clsx('components-navigation__back-button', className); const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined; const handleOnClick = event => { if (typeof onClick === 'function') { @@ -61845,16 +61852,21 @@ function UnforwardedNavigationBackButton({ } }; const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left; - return (0,external_React_.createElement)(MenuBackButtonUI, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuBackButtonUI, { className: classes, href: href, variant: "tertiary", ref: ref, - onClick: handleOnClick - }, (0,external_React_.createElement)(icons_build_module_icon, { - icon: icon - }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back')); + onClick: handleOnClick, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: icon + }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back')] + }); } + +/** + * @deprecated Use `Navigator` instead. + */ const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton); /* harmony default export */ const back_button = (NavigationBackButton); @@ -61874,7 +61886,6 @@ const NavigationGroupContext = (0,external_wp_element_namespaceObject.createCont const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/index.js - /** * External dependencies */ @@ -61891,7 +61902,13 @@ const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.u + + let uniqueId = 0; + +/** + * @deprecated Use `Navigator` instead. + */ function NavigationGroup({ children, className, @@ -61909,44 +61926,55 @@ function NavigationGroup({ // Keep the children rendered to make sure invisible items are included in the navigation tree. if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) { - return (0,external_React_.createElement)(NavigationGroupContext.Provider, { - value: context - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationGroupContext.Provider, { + value: context, + children: children + }); } const groupTitleId = `components-navigation__group-title-${groupId}`; - const classes = classnames_default()('components-navigation__group', className); - return (0,external_React_.createElement)(NavigationGroupContext.Provider, { - value: context - }, (0,external_React_.createElement)("li", { - className: classes - }, title && (0,external_React_.createElement)(GroupTitleUI, { - className: "components-navigation__group-title", - id: groupTitleId, - level: 3 - }, title), (0,external_React_.createElement)("ul", { - "aria-labelledby": groupTitleId, - role: "group" - }, children))); + const classes = dist_clsx('components-navigation__group', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationGroupContext.Provider, { + value: context, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("li", { + className: classes, + children: [title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GroupTitleUI, { + className: "components-navigation__group-title", + id: groupTitleId, + level: 3, + children: title + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("ul", { + "aria-labelledby": groupTitleId, + role: "group", + children: children + })] + }) + }); } /* harmony default export */ const group = (NavigationGroup); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js - /** * Internal dependencies */ + + + function NavigationItemBaseContent(props) { const { badge, title } = props; - return (0,external_React_.createElement)(external_React_.Fragment, null, title && (0,external_React_.createElement)(ItemTitleUI, { - className: "components-navigation__item-title", - as: "span" - }, title), badge && (0,external_React_.createElement)(ItemBadgeUI, { - className: "components-navigation__item-badge" - }, badge)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemTitleUI, { + className: "components-navigation__item-title", + as: "span", + children: title + }), badge && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBadgeUI, { + className: "components-navigation__item-badge", + children: badge + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/context.js @@ -62021,7 +62049,6 @@ const useNavigationTreeItem = (itemId, props) => { }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base.js - /** * External dependencies */ @@ -62038,6 +62065,7 @@ const useNavigationTreeItem = (itemId, props) => { + let base_uniqueId = 0; function NavigationItemBase(props) { // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component. @@ -62056,15 +62084,15 @@ function NavigationItemBase(props) { if (!navigationTree.getItem(itemId)?._isVisible) { return null; } - const classes = classnames_default()('components-navigation__item', className); - return (0,external_React_.createElement)(ItemBaseUI, { + const classes = dist_clsx('components-navigation__item', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBaseUI, { className: classes, - ...restProps - }, children); + ...restProps, + children: children + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/index.js - /** * External dependencies */ @@ -62084,7 +62112,13 @@ function NavigationItemBase(props) { + + const item_noop = () => {}; + +/** + * @deprecated Use `Navigator` instead. + */ function NavigationItem(props) { const { badge, @@ -62115,7 +62149,7 @@ function NavigationItem(props) { return null; } const isActive = item && activeItem === item; - const classes = classnames_default()(className, { + const classes = dist_clsx(className, { 'is-active': isActive }); const onItemClick = event => { @@ -62136,19 +62170,23 @@ function NavigationItem(props) { 'aria-current': isActive ? 'page' : undefined, ...restProps }; - return (0,external_React_.createElement)(NavigationItemBase, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationItemBase, { ...baseProps, - className: classes - }, children || (0,external_React_.createElement)(ItemUI, { - ...itemProps - }, icon && (0,external_React_.createElement)(ItemIconUI, null, (0,external_React_.createElement)(icons_build_module_icon, { - icon: icon - })), (0,external_React_.createElement)(NavigationItemBaseContent, { - title: title, - badge: badge - }), navigateToMenu && (0,external_React_.createElement)(icons_build_module_icon, { - icon: navigationIcon - }))); + className: classes, + children: children || /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemUI, { + ...itemProps, + children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemIconUI, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: icon + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationItemBaseContent, { + title: title, + badge: badge + }), navigateToMenu && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: navigationIcon + })] + }) + }); } /* harmony default export */ const navigation_item = (NavigationItem); @@ -62185,21 +62223,21 @@ const useNavigationTreeMenu = props => { }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/search.js - /** * WordPress dependencies */ -const search = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const search = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" + }) +}); /* harmony default export */ const library_search = (search); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js - /** * WordPress dependencies */ @@ -62218,7 +62256,8 @@ const search = (0,external_React_.createElement)(external_wp_primitives_namespac * * @return {ComponentType} The wrapped component. */ -/* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => (0,external_React_.createElement)(Component, { + +/* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { ...props, speak: external_wp_a11y_namespaceObject.speak, debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500) @@ -62241,7 +62280,7 @@ const inlinePadding = ({ }) => { return space(size === 'compact' ? 1 : 2); }; -const SuffixItemWrapper = emotion_styled_base_browser_esm("div", true ? { +const SuffixItemWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "effl84m1" } : 0)("display:flex;padding-inline-end:", inlinePadding, ";svg{fill:currentColor;}" + ( true ? "" : 0)); const StyledInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { @@ -62249,7 +62288,6 @@ const StyledInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_co } : 0)("input[type='search']{&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}}&:not( :focus-within ){--wp-components-color-background:", COLORS.theme.gray[100], ";}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/index.js - /** * External dependencies */ @@ -62269,6 +62307,7 @@ const StyledInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_co + function SuffixItem({ searchRef, value, @@ -62276,7 +62315,7 @@ function SuffixItem({ onClose }) { if (!onClose && !value) { - return (0,external_React_.createElement)(icons_build_module_icon, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { icon: library_search }); } @@ -62284,7 +62323,7 @@ function SuffixItem({ onChange(''); searchRef.current?.focus(); }; - return (0,external_React_.createElement)(build_module_button, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { size: "small", icon: close_small, label: onClose ? (0,external_wp_i18n_namespaceObject.__)('Close search') : (0,external_wp_i18n_namespaceObject.__)('Reset search'), @@ -62322,31 +62361,33 @@ function UnforwardedSearchControl({ isBorderless: true } }), [__nextHasNoMarginBottom]); - return (0,external_React_.createElement)(ContextSystemProvider, { - value: contextValue - }, (0,external_React_.createElement)(StyledInputControl, { - __next40pxDefaultSize: true, - id: instanceId, - hideLabelFromVision: hideLabelFromVision, - label: label, - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]), - type: "search", - size: size, - className: classnames_default()('components-search-control', className), - onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''), - autoComplete: "off", - placeholder: placeholder, - value: value !== null && value !== void 0 ? value : '', - suffix: (0,external_React_.createElement)(SuffixItemWrapper, { - size: size - }, (0,external_React_.createElement)(SuffixItem, { - searchRef: searchRef, - value: value, - onChange: onChange, - onClose: onClose - })), - ...restProps - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { + value: contextValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledInputControl, { + __next40pxDefaultSize: true, + id: instanceId, + hideLabelFromVision: hideLabelFromVision, + label: label, + ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]), + type: "search", + size: size, + className: dist_clsx('components-search-control', className), + onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''), + autoComplete: "off", + placeholder: placeholder, + value: value !== null && value !== void 0 ? value : '', + suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SuffixItemWrapper, { + size: size, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SuffixItem, { + searchRef: searchRef, + value: value, + onChange: onChange, + onClose: onClose + }) + }), + ...restProps + }) + }); } /** @@ -62373,7 +62414,6 @@ const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(Unforwa /* harmony default export */ const search_control = (SearchControl); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js - /** * WordPress dependencies */ @@ -62389,6 +62429,7 @@ const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(Unforwa + function MenuTitleSearch({ debouncedSpeak, onCloseSearch, @@ -62440,22 +62481,23 @@ function MenuTitleSearch({ const inputId = `components-navigation__menu-title-search-${menu}`; const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: placeholder for menu search box. %s: menu title */ (0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim(); - return (0,external_React_.createElement)(MenuTitleSearchControlWrapper, null, (0,external_React_.createElement)(search_control, { - __nextHasNoMarginBottom: true, - className: "components-navigation__menu-search-input", - id: inputId, - onChange: value => onSearch?.(value), - onKeyDown: onKeyDown, - placeholder: placeholder, - onClose: onClose, - ref: inputRef, - value: search - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuTitleSearchControlWrapper, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(search_control, { + __nextHasNoMarginBottom: true, + className: "components-navigation__menu-search-input", + id: inputId, + onChange: value => onSearch?.(value), + onKeyDown: onKeyDown, + placeholder: placeholder, + onClose: onClose, + ref: inputRef, + value: search + }) + }); } /* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js - /** * WordPress dependencies */ @@ -62472,6 +62514,8 @@ function MenuTitleSearch({ + + function NavigationMenuTitle({ hasSearch, onSearch, @@ -62499,37 +62543,43 @@ function NavigationMenuTitle({ const menuTitleId = `components-navigation__menu-title-${menu}`; /* translators: search button label for menu search box. %s: menu title */ const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title); - return (0,external_React_.createElement)(MenuTitleUI, { - className: "components-navigation__menu-title" - }, !isSearching && (0,external_React_.createElement)(GroupTitleUI, { - as: "h2", - className: "components-navigation__menu-title-heading", - level: 3 - }, (0,external_React_.createElement)("span", { - id: menuTitleId - }, title), (hasSearch || titleAction) && (0,external_React_.createElement)(MenuTitleActionsUI, null, titleAction, hasSearch && (0,external_React_.createElement)(build_module_button, { - size: "small", - variant: "tertiary", - label: searchButtonLabel, - onClick: () => setIsSearching(true), - ref: searchButtonRef - }, (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_search - })))), isSearching && (0,external_React_.createElement)("div", { - className: getAnimateClassName({ - type: 'slide-in', - origin: 'left' - }) - }, (0,external_React_.createElement)(menu_title_search, { - onCloseSearch: onCloseSearch, - onSearch: onSearch, - search: search, - title: title - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuTitleUI, { + className: "components-navigation__menu-title", + children: [!isSearching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(GroupTitleUI, { + as: "h2", + className: "components-navigation__menu-title-heading", + level: 3, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + id: menuTitleId, + children: title + }), (hasSearch || titleAction) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuTitleActionsUI, { + children: [titleAction, hasSearch && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + size: "small", + variant: "tertiary", + label: searchButtonLabel, + onClick: () => setIsSearching(true), + ref: searchButtonRef, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_search + }) + })] + })] + }), isSearching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: getAnimateClassName({ + type: 'slide-in', + origin: 'left' + }), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_title_search, { + onCloseSearch: onCloseSearch, + onSearch: onSearch, + search: search, + title: title + }) + })] + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js - /** * WordPress dependencies */ @@ -62540,6 +62590,8 @@ function NavigationMenuTitle({ */ + + function NavigationSearchNoResultsFound({ search }) { @@ -62552,11 +62604,14 @@ function NavigationSearchNoResultsFound({ if (!search || !!resultsCount) { return null; } - return (0,external_React_.createElement)(ItemBaseUI, null, (0,external_React_.createElement)(ItemUI, null, (0,external_wp_i18n_namespaceObject.__)('No results found.'), " ")); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemBaseUI, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ItemUI, { + children: [(0,external_wp_i18n_namespaceObject.__)('No results found.'), " "] + }) + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/index.js - /** * External dependencies */ @@ -62579,6 +62634,11 @@ function NavigationSearchNoResultsFound({ + + +/** + * @deprecated Use `Navigator` instead. + */ function NavigationMenu(props) { const { backButtonLabel, @@ -62606,34 +62666,40 @@ function NavigationMenu(props) { // Keep the children rendered to make sure invisible items are included in the navigation tree. if (activeMenu !== menu) { - return (0,external_React_.createElement)(NavigationMenuContext.Provider, { - value: context - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuContext.Provider, { + value: context, + children: children + }); } const isControlledSearch = !!setControlledSearch; const search = isControlledSearch ? controlledSearch : uncontrolledSearch; const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch; const menuTitleId = `components-navigation__menu-title-${menu}`; - const classes = classnames_default()('components-navigation__menu', className); - return (0,external_React_.createElement)(NavigationMenuContext.Provider, { - value: context - }, (0,external_React_.createElement)(MenuUI, { - className: classes - }, (parentMenu || onBackButtonClick) && (0,external_React_.createElement)(back_button, { - backButtonLabel: backButtonLabel, - parentMenu: parentMenu, - onClick: onBackButtonClick - }), title && (0,external_React_.createElement)(NavigationMenuTitle, { - hasSearch: hasSearch, - onSearch: onSearch, - search: search, - title: title, - titleAction: titleAction - }), (0,external_React_.createElement)(navigable_container_menu, null, (0,external_React_.createElement)("ul", { - "aria-labelledby": menuTitleId - }, children, search && !isSearchDebouncing && (0,external_React_.createElement)(NavigationSearchNoResultsFound, { - search: search - }))))); + const classes = dist_clsx('components-navigation__menu', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuContext.Provider, { + value: context, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(MenuUI, { + className: classes, + children: [(parentMenu || onBackButtonClick) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(back_button, { + backButtonLabel: backButtonLabel, + parentMenu: parentMenu, + onClick: onBackButtonClick + }), title && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationMenuTitle, { + hasSearch: hasSearch, + onSearch: onSearch, + search: search, + title: title, + titleAction: titleAction + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(navigable_container_menu, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("ul", { + "aria-labelledby": menuTitleId, + children: [children, search && !isSearchDebouncing && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigationSearchNoResultsFound, { + search: search + })] + }) + })] + }) + }); } /* harmony default export */ const navigation_menu = (NavigationMenu); @@ -63149,7 +63215,6 @@ const navigatorScreenAnimation = ({ const navigatorScreen = props => /*#__PURE__*/emotion_react_browser_esm_css("overflow-x:auto;max-height:100%;", navigatorScreenAnimation(props), ";" + ( true ? "" : 0), true ? "" : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-provider/component.js - /** * External dependencies */ @@ -63170,15 +63235,133 @@ const navigatorScreen = props => /*#__PURE__*/emotion_react_browser_esm_css("ove + const MAX_HISTORY_LENGTH = 50; -function screensReducer(state = [], action) { +function addScreen({ + screens +}, screen) { + return [...screens, screen]; +} +function removeScreen({ + screens +}, screen) { + return screens.filter(s => s.id !== screen.id); +} +function goBack({ + locationHistory +}) { + if (locationHistory.length <= 1) { + return locationHistory; + } + return [...locationHistory.slice(0, -2), { + ...locationHistory[locationHistory.length - 2], + isBack: true, + hasRestoredFocus: false + }]; +} +function goTo(state, path, options = {}) { + const { + locationHistory + } = state; + const { + focusTargetSelector, + isBack = false, + skipFocus = false, + replace = false, + ...restOptions + } = options; + const isNavigatingToSamePath = locationHistory.length > 0 && locationHistory[locationHistory.length - 1].path === path; + if (isNavigatingToSamePath) { + return locationHistory; + } + const isNavigatingToPreviousPath = isBack && locationHistory.length > 1 && locationHistory[locationHistory.length - 2].path === path; + if (isNavigatingToPreviousPath) { + return goBack(state); + } + const newLocation = { + ...restOptions, + path, + isBack, + hasRestoredFocus: false, + skipFocus + }; + if (locationHistory.length === 0) { + return replace ? [] : [newLocation]; + } + const newLocationHistory = locationHistory.slice(locationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1); + if (!replace) { + newLocationHistory.push( + // Assign `focusTargetSelector` to the previous location in history + // (the one we just navigated from). + { + ...locationHistory[locationHistory.length - 1], + focusTargetSelector + }); + } + newLocationHistory.push(newLocation); + return newLocationHistory; +} +function goToParent(state, options = {}) { + const { + locationHistory, + screens + } = state; + const currentPath = locationHistory[locationHistory.length - 1].path; + if (currentPath === undefined) { + return locationHistory; + } + const parentPath = findParent(currentPath, screens); + if (parentPath === undefined) { + return locationHistory; + } + return goTo(state, parentPath, { + ...options, + isBack: true + }); +} +function routerReducer(state, action) { + let { + screens, + locationHistory, + matchedPath + } = state; switch (action.type) { case 'add': - return [...state, action.screen]; + screens = addScreen(state, action.screen); + break; case 'remove': - return state.filter(s => s.id !== action.screen.id); + screens = removeScreen(state, action.screen); + break; + case 'goback': + locationHistory = goBack(state); + break; + case 'goto': + locationHistory = goTo(state, action.path, action.options); + break; + case 'gotoparent': + locationHistory = goToParent(state, action.options); + break; } - return state; + + // Return early in case there is no change + if (screens === state.screens && locationHistory === state.locationHistory) { + return state; + } + + // Compute the matchedPath + const currentPath = locationHistory.length > 0 ? locationHistory[locationHistory.length - 1].path : undefined; + matchedPath = currentPath !== undefined ? patternMatch(currentPath, screens) : undefined; + + // If the new match is the same as the previous match, + // return the previous one to keep immutability. + if (matchedPath && state.matchedPath && matchedPath.id === state.matchedPath.id && external_wp_isShallowEqual_default()(matchedPath.params, state.matchedPath.params)) { + matchedPath = state.matchedPath; + } + return { + screens, + locationHistory, + matchedPath + }; } function UnconnectedNavigatorProvider(props, forwardedRef) { const { @@ -63187,133 +63370,64 @@ function UnconnectedNavigatorProvider(props, forwardedRef) { className, ...otherProps } = useContextSystem(props, 'NavigatorProvider'); - const [locationHistory, setLocationHistory] = (0,external_wp_element_namespaceObject.useState)([{ - path: initialPath - }]); - const currentLocationHistory = (0,external_wp_element_namespaceObject.useRef)([]); - const [screens, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(screensReducer, []); - const currentScreens = (0,external_wp_element_namespaceObject.useRef)([]); - (0,external_wp_element_namespaceObject.useEffect)(() => { - currentScreens.current = screens; - }, [screens]); - (0,external_wp_element_namespaceObject.useEffect)(() => { - currentLocationHistory.current = locationHistory; - }, [locationHistory]); - const currentMatch = (0,external_wp_element_namespaceObject.useRef)(); - const matchedPath = (0,external_wp_element_namespaceObject.useMemo)(() => { - let currentPath; - if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) { - currentMatch.current = undefined; - return undefined; - } - const resolvePath = path => { - const newMatch = patternMatch(path, screens); + const [routerState, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(routerReducer, initialPath, path => ({ + screens: [], + locationHistory: [{ + path + }], + matchedPath: undefined + })); - // If the new match is the same as the current match, - // return the previous one for performance reasons. - if (currentMatch.current && newMatch && external_wp_isShallowEqual_default()(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) { - return currentMatch.current; - } - return newMatch; - }; - const newMatch = resolvePath(currentPath); - currentMatch.current = newMatch; - return newMatch; - }, [screens, locationHistory]); - const addScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({ - type: 'add', - screen - }), []); - const removeScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({ - type: 'remove', - screen + // The methods are constant forever, create stable references to them. + const methods = (0,external_wp_element_namespaceObject.useMemo)(() => ({ + goBack: () => dispatch({ + type: 'goback' + }), + goTo: (path, options) => dispatch({ + type: 'goto', + path, + options + }), + goToParent: options => dispatch({ + type: 'gotoparent', + options + }), + addScreen: screen => dispatch({ + type: 'add', + screen + }), + removeScreen: screen => dispatch({ + type: 'remove', + screen + }) }), []); - const goBack = (0,external_wp_element_namespaceObject.useCallback)(() => { - setLocationHistory(prevLocationHistory => { - if (prevLocationHistory.length <= 1) { - return prevLocationHistory; - } - return [...prevLocationHistory.slice(0, -2), { - ...prevLocationHistory[prevLocationHistory.length - 2], - isBack: true, - hasRestoredFocus: false - }]; - }); - }, []); - const goTo = (0,external_wp_element_namespaceObject.useCallback)((path, options = {}) => { - const { - focusTargetSelector, - isBack = false, - skipFocus = false, - replace = false, - ...restOptions - } = options; - const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path; - if (isNavigatingToPreviousPath) { - goBack(); - return; - } - setLocationHistory(prevLocationHistory => { - const newLocation = { - ...restOptions, - path, - isBack, - hasRestoredFocus: false, - skipFocus - }; - if (prevLocationHistory.length === 0) { - return replace ? [] : [newLocation]; - } - const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1); - if (!replace) { - newLocationHistory.push( - // Assign `focusTargetSelector` to the previous location in history - // (the one we just navigated from). - { - ...prevLocationHistory[prevLocationHistory.length - 1], - focusTargetSelector - }); - } - newLocationHistory.push(newLocation); - return newLocationHistory; - }); - }, [goBack]); - const goToParent = (0,external_wp_element_namespaceObject.useCallback)((options = {}) => { - const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path; - if (currentPath === undefined) { - return; - } - const parentPath = findParent(currentPath, currentScreens.current); - if (parentPath === undefined) { - return; - } - goTo(parentPath, { - ...options, - isBack: true - }); - }, [goTo]); - const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ - location: { - ...locationHistory[locationHistory.length - 1], - isInitial: locationHistory.length === 1 - }, - params: matchedPath ? matchedPath.params : {}, - match: matchedPath ? matchedPath.id : undefined, - goTo, - goBack, - goToParent, - addScreen, - removeScreen - }), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]); + const { + locationHistory, + matchedPath + } = routerState; + const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => { + var _matchedPath$params; + return { + location: { + ...locationHistory[locationHistory.length - 1], + isInitial: locationHistory.length === 1 + }, + params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {}, + match: matchedPath?.id, + ...methods + }; + }, [locationHistory, matchedPath, methods]); const cx = useCx(); const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorProviderWrapper, className), [className, cx]); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: forwardedRef, className: classes, - ...otherProps - }, (0,external_React_.createElement)(NavigatorContext.Provider, { - value: navigatorContextValue - }, children)); + ...otherProps, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NavigatorContext.Provider, { + value: navigatorContextValue, + children: children + }) + }); } /** @@ -63355,7 +63469,6 @@ const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'Navigato ;// CONCATENATED MODULE: external ["wp","escapeHtml"] const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"]; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js - /** * External dependencies */ @@ -63378,6 +63491,7 @@ const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"]; + function UnconnectedNavigatorScreen(props, forwardedRef) { const screenId = (0,external_wp_element_namespaceObject.useId)(); const { @@ -63441,25 +63555,26 @@ function UnconnectedNavigatorScreen(props, forwardedRef) { // When navigating back, if a selector is provided, use it to look for the // target element (assumed to be a node inside the current NavigatorScreen) - if (location.isBack && location?.focusTargetSelector) { + if (location.isBack && location.focusTargetSelector) { elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector); } // If the previous query didn't run or find any element to focus, fallback // to the first tabbable element in the screen (or the screen itself). if (!elementToFocus) { - const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current)[0]; + const [firstTabbable] = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current); elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current; } locationRef.current.hasRestoredFocus = true; elementToFocus.focus(); }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]); const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]); - return isMatch ? (0,external_React_.createElement)(component, { + return isMatch ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: mergedWrapperRef, className: classes, - ...otherProps - }, children) : null; + ...otherProps, + children: children + }) : null; } /** @@ -63573,7 +63688,6 @@ function useNavigatorButton(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js - /** * External dependencies */ @@ -63585,9 +63699,10 @@ function useNavigatorButton(props) { + function UnconnectedNavigatorButton(props, forwardedRef) { const navigatorButtonProps = useNavigatorButton(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: forwardedRef, ...navigatorButtonProps }); @@ -63670,7 +63785,6 @@ function useNavigatorBackButton(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js - /** * External dependencies */ @@ -63682,9 +63796,10 @@ function useNavigatorBackButton(props) { + function UnconnectedNavigatorBackButton(props, forwardedRef) { const navigatorBackButtonProps = useNavigatorBackButton(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: forwardedRef, ...navigatorBackButtonProps }); @@ -63728,7 +63843,6 @@ const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'Navi /* harmony default export */ const navigator_back_button_component = (NavigatorBackButton); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-to-parent-button/component.js - /** * External dependencies */ @@ -63740,12 +63854,13 @@ const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'Navi + function UnconnectedNavigatorToParentButton(props, forwardedRef) { const navigatorToParentButtonProps = useNavigatorBackButton({ ...props, goToParent: true }); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ref: forwardedRef, ...navigatorToParentButtonProps }); @@ -63789,7 +63904,6 @@ const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButto /* harmony default export */ const navigator_to_parent_button_component = (NavigatorToParentButton); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/index.js - /** * External dependencies */ @@ -63808,6 +63922,8 @@ const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButto */ + + const notice_noop = () => {}; /** @@ -63874,56 +63990,62 @@ function Notice({ onDismiss = notice_noop }) { useSpokenMessage(spokenMessage, politeness); - const classes = classnames_default()(className, 'components-notice', 'is-' + status, { + const classes = dist_clsx(className, 'components-notice', 'is-' + status, { 'is-dismissible': isDismissible }); if (__unstableHTML && typeof children === 'string') { - children = (0,external_React_.createElement)(external_wp_element_namespaceObject.RawHTML, null, children); + children = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_element_namespaceObject.RawHTML, { + children: children + }); } const onDismissNotice = () => { onDismiss(); onRemove(); }; - return (0,external_React_.createElement)("div", { - className: classes - }, (0,external_React_.createElement)(visually_hidden_component, null, getStatusLabel(status)), (0,external_React_.createElement)("div", { - className: "components-notice__content" - }, children, (0,external_React_.createElement)("div", { - className: "components-notice__actions" - }, actions.map(({ - className: buttonCustomClasses, - label, - isPrimary, - variant, - noDefaultClasses = false, - onClick, - url - }, index) => { - let computedVariant = variant; - if (variant !== 'primary' && !noDefaultClasses) { - computedVariant = !url ? 'secondary' : 'link'; - } - if (typeof computedVariant === 'undefined' && isPrimary) { - computedVariant = 'primary'; - } - return (0,external_React_.createElement)(build_module_button, { - key: index, - href: url, - variant: computedVariant, - onClick: url ? undefined : onClick, - className: classnames_default()('components-notice__action', buttonCustomClasses) - }, label); - }))), isDismissible && (0,external_React_.createElement)(build_module_button, { - className: "components-notice__dismiss", - icon: library_close, - label: (0,external_wp_i18n_namespaceObject.__)('Close'), - onClick: onDismissNotice - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: classes, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, { + children: getStatusLabel(status) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-notice__content", + children: [children, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-notice__actions", + children: actions.map(({ + className: buttonCustomClasses, + label, + isPrimary, + variant, + noDefaultClasses = false, + onClick, + url + }, index) => { + let computedVariant = variant; + if (variant !== 'primary' && !noDefaultClasses) { + computedVariant = !url ? 'secondary' : 'link'; + } + if (typeof computedVariant === 'undefined' && isPrimary) { + computedVariant = 'primary'; + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + href: url, + variant: computedVariant, + onClick: url ? undefined : onClick, + className: dist_clsx('components-notice__action', buttonCustomClasses), + children: label + }, index); + }) + })] + }), isDismissible && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + className: "components-notice__dismiss", + icon: library_close, + label: (0,external_wp_i18n_namespaceObject.__)('Close'), + onClick: onDismissNotice + })] + }); } /* harmony default export */ const build_module_notice = (Notice); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/list.js - /** * External dependencies */ @@ -63933,6 +64055,8 @@ function Notice({ * Internal dependencies */ + + const list_noop = () => {}; /** @@ -63968,25 +64092,27 @@ function NoticeList({ children }) { const removeNotice = id => () => onRemove(id); - className = classnames_default()('components-notice-list', className); - return (0,external_React_.createElement)("div", { - className: className - }, children, [...notices].reverse().map(notice => { - const { - content, - ...restNotice - } = notice; - return (0,external_React_.createElement)(build_module_notice, { - ...restNotice, - key: notice.id, - onRemove: removeNotice(notice.id) - }, notice.content); - })); + className = dist_clsx('components-notice-list', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: className, + children: [children, [...notices].reverse().map(notice => { + const { + content, + ...restNotice + } = notice; + return /*#__PURE__*/(0,external_React_.createElement)(build_module_notice, { + ...restNotice, + key: notice.id, + onRemove: removeNotice(notice.id) + }, notice.content); + })] + }); } /* harmony default export */ const list = (NoticeList); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/header.js + /** * Internal dependencies */ @@ -64000,14 +64126,16 @@ function PanelHeader({ label, children }) { - return (0,external_React_.createElement)("div", { - className: "components-panel__header" - }, label && (0,external_React_.createElement)("h2", null, label), children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-panel__header", + children: [label && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", { + children: label + }), children] + }); } /* harmony default export */ const panel_header = (PanelHeader); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/index.js - /** * External dependencies */ @@ -64022,18 +64150,21 @@ function PanelHeader({ * Internal dependencies */ + + function UnforwardedPanel({ header, className, children }, ref) { - const classNames = classnames_default()(className, 'components-panel'); - return (0,external_React_.createElement)("div", { + const classNames = dist_clsx(className, 'components-panel'); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { className: classNames, - ref: ref - }, header && (0,external_React_.createElement)(panel_header, { - label: header - }), children); + ref: ref, + children: [header && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(panel_header, { + label: header + }), children] + }); } /** @@ -64056,21 +64187,21 @@ const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPane /* harmony default export */ const panel = (Panel); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-up.js - /** * WordPress dependencies */ -const chevronUp = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const chevronUp = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" -})); + xmlns: "http://www.w3.org/2000/svg", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" + }) +}); /* harmony default export */ const chevron_up = (chevronUp); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/body.js - /** * External dependencies */ @@ -64090,6 +64221,8 @@ const chevronUp = (0,external_React_.createElement)(external_wp_primitives_names + + const body_noop = () => {}; function UnforwardedPanelBody(props, ref) { const { @@ -64137,21 +64270,22 @@ function UnforwardedPanelBody(props, ref) { }); } }, [isOpened, scrollBehavior]); - const classes = classnames_default()('components-panel__body', className, { + const classes = dist_clsx('components-panel__body', className, { 'is-opened': isOpened }); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { className: classes, - ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref]) - }, (0,external_React_.createElement)(PanelBodyTitle, { - icon: icon, - isOpened: Boolean(isOpened), - onClick: handleOnToggle, - title: title, - ...buttonProps - }), typeof children === 'function' ? children({ - opened: Boolean(isOpened) - }) : isOpened && children); + ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref]), + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelBodyTitle, { + icon: icon, + isOpened: Boolean(isOpened), + onClick: handleOnToggle, + title: title, + ...buttonProps + }), typeof children === 'function' ? children({ + opened: Boolean(isOpened) + }) : isOpened && children] + }); } const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({ isOpened, @@ -64159,30 +64293,34 @@ const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({ title, ...props }, ref) => { - if (!title) return null; - return (0,external_React_.createElement)("h2", { - className: "components-panel__body-title" - }, (0,external_React_.createElement)(build_module_button, { - className: "components-panel__body-toggle", - "aria-expanded": isOpened, - ref: ref, - ...props - }, (0,external_React_.createElement)("span", { - "aria-hidden": "true" - }, (0,external_React_.createElement)(build_module_icon, { - className: "components-panel__arrow", - icon: isOpened ? chevron_up : chevron_down - })), title, icon && (0,external_React_.createElement)(build_module_icon, { - icon: icon, - className: "components-panel__icon", - size: 20 - }))); + if (!title) { + return null; + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("h2", { + className: "components-panel__body-title", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(build_module_button, { + className: "components-panel__body-toggle", + "aria-expanded": isOpened, + ref: ref, + ...props, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + "aria-hidden": "true", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + className: "components-panel__arrow", + icon: isOpened ? chevron_up : chevron_down + }) + }), title, icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon, + className: "components-panel__icon", + size: 20 + })] + }) + }); }); const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody); /* harmony default export */ const body = (PanelBody); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/row.js - /** * External dependencies */ @@ -64192,14 +64330,20 @@ const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(Unforwarded * WordPress dependencies */ + +/** + * Internal dependencies + */ + function UnforwardedPanelRow({ className, children }, ref) { - return (0,external_React_.createElement)("div", { - className: classnames_default()('components-panel__row', className), - ref: ref - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: dist_clsx('components-panel__row', className), + ref: ref, + children: children + }); } /** @@ -64210,7 +64354,6 @@ const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedP /* harmony default export */ const row = (PanelRow); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/placeholder/index.js - /** * External dependencies */ @@ -64228,16 +64371,19 @@ const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedP * Internal dependencies */ -const PlaceholderIllustration = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + + +const PlaceholderIllustration = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { className: "components-placeholder__illustration", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 60 60", - preserveAspectRatio: "none" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - vectorEffect: "non-scaling-stroke", - d: "M60 60 0 0" -})); + preserveAspectRatio: "none", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + vectorEffect: "non-scaling-stroke", + d: "M60 60 0 0" + }) +}); /** * Renders a placeholder. Normally used by blocks to render their empty state. @@ -64276,8 +64422,8 @@ function Placeholder(props) { 'is-small': width < 160 }; } - const classes = classnames_default()('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null); - const fieldsetClasses = classnames_default()('components-placeholder__fieldset', { + const classes = dist_clsx('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null); + const fieldsetClasses = dist_clsx('components-placeholder__fieldset', { 'is-column-layout': isColumnLayout }); (0,external_wp_element_namespaceObject.useEffect)(() => { @@ -64285,23 +64431,136 @@ function Placeholder(props) { (0,external_wp_a11y_namespaceObject.speak)(instructions); } }, [instructions]); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { ...additionalProps, - className: classes - }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0,external_React_.createElement)("div", { - className: "components-placeholder__preview" - }, preview), (0,external_React_.createElement)("div", { - className: "components-placeholder__label" - }, (0,external_React_.createElement)(build_module_icon, { - icon: icon - }), label), !!instructions && (0,external_React_.createElement)("div", { - className: "components-placeholder__instructions" - }, instructions), (0,external_React_.createElement)("div", { - className: fieldsetClasses - }, children)); + className: classes, + children: [withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-placeholder__preview", + children: preview + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-placeholder__label", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: icon + }), label] + }), !!instructions && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-placeholder__instructions", + children: instructions + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: fieldsetClasses, + children: children + })] + }); } /* harmony default export */ const placeholder = (Placeholder); +;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/styles.js + +function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } +/** + * External dependencies + */ + + + +/** + * Internal dependencies + */ + +const animateProgressBar = emotion_react_browser_esm_keyframes({ + '0%': { + left: '-50%' + }, + '100%': { + left: '100%' + } +}); + +// Width of the indicator for the indeterminate progress bar +const INDETERMINATE_TRACK_WIDTH = 50; +const styles_Track = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { + target: "e15u147w2" +} : 0)("position:relative;overflow:hidden;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusBlockUi, ";outline:2px solid transparent;outline-offset:2px;:where( & ){width:160px;}" + ( true ? "" : 0)); +var progress_bar_styles_ref = true ? { + name: "152sa26", + styles: "width:var(--indicator-width);transition:width 0.4s ease-in-out" +} : 0; +const Indicator = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { + target: "e15u147w1" +} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusBlockUi, ";background-color:color-mix(\n\t\tin srgb,\n\t\t", COLORS.theme.foreground, ",\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({ + isIndeterminate +}) => isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({ + animationDuration: '1.5s', + animationTimingFunction: 'ease-in-out', + animationIterationCount: 'infinite', + animationName: animateProgressBar, + width: `${INDETERMINATE_TRACK_WIDTH}%` +}, true ? "" : 0, true ? "" : 0) : progress_bar_styles_ref, ";" + ( true ? "" : 0)); +const ProgressElement = /*#__PURE__*/emotion_styled_base_browser_esm("progress", true ? { + target: "e15u147w0" +} : 0)( true ? { + name: "11fb690", + styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%" +} : 0); + +;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/index.js +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + + +function UnforwardedProgressBar(props, ref) { + const { + className, + value, + ...progressProps + } = props; + const isIndeterminate = !Number.isFinite(value); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_Track, { + className: className, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Indicator, { + style: { + '--indicator-width': !isIndeterminate ? `${value}%` : undefined + }, + isIndeterminate: isIndeterminate + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ProgressElement, { + max: 100, + value: value, + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading …'), + ref: ref, + ...progressProps + })] + }); +} + +/** + * A simple horizontal progress bar component. + * + * Supports two modes: determinate and indeterminate. A progress bar is determinate + * when a specific progress value has been specified (from 0 to 100), and indeterminate + * when a value hasn't been specified. + * + * ```jsx + * import { ProgressBar } from '@wordpress/components'; + * + * const MyLoadingComponent = () => { + * return <ProgressBar />; + * }; + * ``` + */ +const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar); +/* harmony default export */ const progress_bar = (ProgressBar); + ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/terms.js /** * Internal dependencies @@ -64357,7 +64616,6 @@ function buildTermsTree(flatTerms) { ;// CONCATENATED MODULE: external ["wp","htmlEntities"] const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"]; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-select/index.js - /** * WordPress dependencies */ @@ -64369,6 +64627,7 @@ const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"]; */ + function getSelectOptions(tree, level = 0) { return tree.flatMap(treeNode => [{ value: treeNode.id, @@ -64439,7 +64698,7 @@ function TreeSelect(props) { label: noOptionLabel }, ...getSelectOptions(tree)].filter(option => !!option); }, [noOptionLabel, tree]); - return (0,external_React_.createElement)(SelectControl, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SelectControl, { label, options, onChange, @@ -64450,12 +64709,12 @@ function TreeSelect(props) { /* harmony default export */ const tree_select = (TreeSelect); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/author-select.js - /** * Internal dependencies */ + function AuthorSelect({ __next40pxDefaultSize, label, @@ -64464,9 +64723,11 @@ function AuthorSelect({ selectedAuthorId, onChange: onChangeProp }) { - if (!authorList) return null; + if (!authorList) { + return null; + } const termsTree = buildTermsTree(authorList); - return (0,external_React_.createElement)(tree_select, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_select, { label, noOptionLabel, onChange: onChangeProp, @@ -64478,7 +64739,6 @@ function AuthorSelect({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/category-select.js - /** * Internal dependencies */ @@ -64489,6 +64749,7 @@ function AuthorSelect({ * WordPress dependencies */ + function CategorySelect({ __next40pxDefaultSize, label, @@ -64501,7 +64762,7 @@ function CategorySelect({ const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => { return buildTermsTree(categoriesList); }, [categoriesList]); - return (0,external_React_.createElement)(tree_select, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_select, { label, noOptionLabel, onChange: onChangeProp, @@ -64514,7 +64775,6 @@ function CategorySelect({ } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/index.js - /** * WordPress dependencies */ @@ -64529,6 +64789,7 @@ function CategorySelect({ + const DEFAULT_MIN_ITEMS = 1; const DEFAULT_MAX_ITEMS = 100; const MAX_CATEGORIES_SUGGESTIONS = 20; @@ -64581,85 +64842,81 @@ function QueryControls({ // but instead are destructured inline where necessary. ...props }) { - return (0,external_React_.createElement)(v_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { spacing: "4", - className: "components-query-controls" - }, [onOrderChange && onOrderByChange && (0,external_React_.createElement)(select_control, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - key: "query-controls-order-select", - label: (0,external_wp_i18n_namespaceObject.__)('Order by'), - value: `${orderBy}/${order}`, - options: [{ - label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'), - value: 'date/desc' - }, { - label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'), - value: 'date/asc' - }, { - /* translators: Label for ordering posts by title in ascending order. */ - label: (0,external_wp_i18n_namespaceObject.__)('A → Z'), - value: 'title/asc' - }, { - /* translators: Label for ordering posts by title in descending order. */ - label: (0,external_wp_i18n_namespaceObject.__)('Z → A'), - value: 'title/desc' - }], - onChange: value => { - if (typeof value !== 'string') { - return; - } - const [newOrderBy, newOrder] = value.split('/'); - if (newOrder !== order) { - onOrderChange(newOrder); - } - if (newOrderBy !== orderBy) { - onOrderByChange(newOrderBy); + className: "components-query-controls", + children: [onOrderChange && onOrderByChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + label: (0,external_wp_i18n_namespaceObject.__)('Order by'), + value: `${orderBy}/${order}`, + options: [{ + label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'), + value: 'date/desc' + }, { + label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'), + value: 'date/asc' + }, { + /* translators: Label for ordering posts by title in ascending order. */ + label: (0,external_wp_i18n_namespaceObject.__)('A → Z'), + value: 'title/asc' + }, { + /* translators: Label for ordering posts by title in descending order. */ + label: (0,external_wp_i18n_namespaceObject.__)('Z → A'), + value: 'title/desc' + }], + onChange: value => { + if (typeof value !== 'string') { + return; + } + const [newOrderBy, newOrder] = value.split('/'); + if (newOrder !== order) { + onOrderChange(newOrder); + } + if (newOrderBy !== orderBy) { + onOrderByChange(newOrderBy); + } } - } - }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && (0,external_React_.createElement)(CategorySelect, { - __next40pxDefaultSize: __next40pxDefaultSize, - key: "query-controls-category-select", - categoriesList: props.categoriesList, - label: (0,external_wp_i18n_namespaceObject.__)('Category'), - noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'categories'), - selectedCategoryId: props.selectedCategoryId, - onChange: props.onCategoryChange - }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && (0,external_React_.createElement)(form_token_field, { - __next40pxDefaultSize: __next40pxDefaultSize, - __nextHasNoMarginBottom: true, - key: "query-controls-categories-select", - label: (0,external_wp_i18n_namespaceObject.__)('Categories'), - value: props.selectedCategories && props.selectedCategories.map(item => ({ - id: item.id, - // Keeping the fallback to `item.value` for legacy reasons, - // even if items of `selectedCategories` should not have a - // `value` property. - // @ts-expect-error - value: item.name || item.value - })), - suggestions: Object.keys(props.categorySuggestions), - onChange: props.onCategoryChange, - maxSuggestions: MAX_CATEGORIES_SUGGESTIONS - }), onAuthorChange && (0,external_React_.createElement)(AuthorSelect, { - __next40pxDefaultSize: __next40pxDefaultSize, - key: "query-controls-author-select", - authorList: authorList, - label: (0,external_wp_i18n_namespaceObject.__)('Author'), - noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'authors'), - selectedAuthorId: selectedAuthorId, - onChange: onAuthorChange - }), onNumberOfItemsChange && (0,external_React_.createElement)(range_control, { - __nextHasNoMarginBottom: true, - __next40pxDefaultSize: __next40pxDefaultSize, - key: "query-controls-range-control", - label: (0,external_wp_i18n_namespaceObject.__)('Number of items'), - value: numberOfItems, - onChange: onNumberOfItemsChange, - min: minItems, - max: maxItems, - required: true - })]); + }, "query-controls-order-select"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CategorySelect, { + __next40pxDefaultSize: __next40pxDefaultSize, + categoriesList: props.categoriesList, + label: (0,external_wp_i18n_namespaceObject.__)('Category'), + noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'categories'), + selectedCategoryId: props.selectedCategoryId, + onChange: props.onCategoryChange + }, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_token_field, { + __next40pxDefaultSize: __next40pxDefaultSize, + __nextHasNoMarginBottom: true, + label: (0,external_wp_i18n_namespaceObject.__)('Categories'), + value: props.selectedCategories && props.selectedCategories.map(item => ({ + id: item.id, + // Keeping the fallback to `item.value` for legacy reasons, + // even if items of `selectedCategories` should not have a + // `value` property. + // @ts-expect-error + value: item.name || item.value + })), + suggestions: Object.keys(props.categorySuggestions), + onChange: props.onCategoryChange, + maxSuggestions: MAX_CATEGORIES_SUGGESTIONS + }, "query-controls-categories-select"), onAuthorChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AuthorSelect, { + __next40pxDefaultSize: __next40pxDefaultSize, + authorList: authorList, + label: (0,external_wp_i18n_namespaceObject.__)('Author'), + noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'authors'), + selectedAuthorId: selectedAuthorId, + onChange: onAuthorChange + }, "query-controls-author-select"), onNumberOfItemsChange && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(range_control, { + __nextHasNoMarginBottom: true, + __next40pxDefaultSize: __next40pxDefaultSize, + label: (0,external_wp_i18n_namespaceObject.__)('Number of items'), + value: numberOfItems, + onChange: onNumberOfItemsChange, + min: minItems, + max: maxItems, + required: true + }, "query-controls-range-control")] + }); } /* harmony default export */ const query_controls = (QueryControls); @@ -64679,7 +64936,6 @@ const RadioGroupContext = (0,external_wp_element_namespaceObject.createContext)( }); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/radio.js - /** * WordPress dependencies */ @@ -64696,6 +64952,7 @@ const RadioGroupContext = (0,external_wp_element_namespaceObject.createContext)( */ + function UnforwardedRadio({ value, children, @@ -64707,16 +64964,17 @@ function UnforwardedRadio({ } = (0,external_wp_element_namespaceObject.useContext)(RadioGroupContext); const selectedValue = store?.useState('value'); const isChecked = selectedValue !== undefined && selectedValue === value; - return (0,external_React_.createElement)(Radio, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Radio, { disabled: disabled, store: store, ref: ref, value: value, - render: (0,external_React_.createElement)(build_module_button, { + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { variant: isChecked ? 'primary' : 'secondary', ...props - }) - }, children || value); + }), + children: children || value + }); } /** @@ -64726,7 +64984,6 @@ const radio_Radio = (0,external_wp_element_namespaceObject.forwardRef)(Unforward /* harmony default export */ const radio_group_radio = (radio_Radio); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/index.js - /** * External dependencies */ @@ -64743,6 +65000,7 @@ const radio_Radio = (0,external_wp_element_namespaceObject.forwardRef)(Unforward */ + function UnforwardedRadioGroup({ label, checked, @@ -64763,15 +65021,18 @@ function UnforwardedRadioGroup({ store: radioStore, disabled }), [radioStore, disabled]); - return (0,external_React_.createElement)(RadioGroupContext.Provider, { - value: contextValue - }, (0,external_React_.createElement)(RadioGroup, { - store: radioStore, - render: (0,external_React_.createElement)(button_group, null, children), - "aria-label": label, - ref: ref, - ...props - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroupContext.Provider, { + value: contextValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RadioGroup, { + store: radioStore, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(button_group, { + children: children + }), + "aria-label": label, + ref: ref, + ...props + }) + }); } /** @@ -64781,7 +65042,6 @@ const radio_group_RadioGroup = (0,external_wp_element_namespaceObject.forwardRef /* harmony default export */ const radio_group = (radio_group_RadioGroup); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-control/index.js - /** * External dependencies */ @@ -64822,6 +65082,8 @@ const radio_group_RadioGroup = (0,external_wp_element_namespaceObject.forwardRef * }; * ``` */ + + function RadioControl(props) { const { label, @@ -64839,32 +65101,35 @@ function RadioControl(props) { if (!options?.length) { return null; } - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { __nextHasNoMarginBottom: true, label: label, id: id, hideLabelFromVision: hideLabelFromVision, help: help, - className: classnames_default()(className, 'components-radio-control') - }, (0,external_React_.createElement)(v_stack_component, { - spacing: 1 - }, options.map((option, index) => (0,external_React_.createElement)("div", { - key: `${id}-${index}`, - className: "components-radio-control__option" - }, (0,external_React_.createElement)("input", { - id: `${id}-${index}`, - className: "components-radio-control__input", - type: "radio", - name: id, - value: option.value, - onChange: onChangeValue, - checked: option.value === selected, - "aria-describedby": !!help ? `${id}__help` : undefined, - ...additionalProps - }), (0,external_React_.createElement)("label", { - className: "components-radio-control__label", - htmlFor: `${id}-${index}` - }, option.label))))); + className: dist_clsx(className, 'components-radio-control'), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(v_stack_component, { + spacing: 1, + children: options.map((option, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-radio-control__option", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { + id: `${id}-${index}`, + className: "components-radio-control__input", + type: "radio", + name: id, + value: option.value, + onChange: onChangeValue, + checked: option.value === selected, + "aria-describedby": !!help ? `${id}__help` : undefined, + ...additionalProps + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("label", { + className: "components-radio-control__label", + htmlFor: `${id}-${index}`, + children: option.label + })] + }, `${id}-${index}`)) + }) + }); } /* harmony default export */ const radio_control = (RadioControl); @@ -65773,7 +66038,9 @@ function useResizeLabel({ * If axis is controlled, we will avoid resetting the moveX and moveY values. * This will allow for the preferred axis values to persist in the label. */ - if (isAxisControlled) return; + if (isAxisControlled) { + return; + } setMoveX(false); setMoveY(false); }; @@ -65788,10 +66055,14 @@ function useResizeLabel({ * null. They are calculated then set using via an internal useEffect hook. */ const isRendered = width !== null || height !== null; - if (!isRendered) return; + if (!isRendered) { + return; + } const didWidthChange = width !== widthRef.current; const didHeightChange = height !== heightRef.current; - if (!didWidthChange && !didHeightChange) return; + if (!didWidthChange && !didHeightChange) { + return; + } /* * After the initial render, the useResizeAware will set the first @@ -65859,7 +66130,9 @@ function getSizeLabel({ showPx = false, width }) { - if (!moveX && !moveY) return undefined; + if (!moveX && !moveY) { + return undefined; + } /* * Corner position... @@ -65910,19 +66183,19 @@ function resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You ha */ -const resize_tooltip_styles_Root = emotion_styled_base_browser_esm("div", true ? { +const resize_tooltip_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1wq7y4k3" } : 0)( true ? { name: "1cd7zoc", styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0" } : 0); -const TooltipWrapper = emotion_styled_base_browser_esm("div", true ? { +const TooltipWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1wq7y4k2" } : 0)( true ? { name: "ajymcs", styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear" } : 0); -const resize_tooltip_styles_Tooltip = emotion_styled_base_browser_esm("div", true ? { +const resize_tooltip_styles_Tooltip = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1wq7y4k1" } : 0)("background:", COLORS.theme.foreground, ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0)); @@ -65934,7 +66207,6 @@ const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, } : 0)("&&&{color:", COLORS.theme.foregroundInverted, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js - /** * External dependencies */ @@ -65951,6 +66223,7 @@ const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, + const CORNER_OFFSET = 4; const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5; function resize_tooltip_label_Label({ @@ -65962,7 +66235,9 @@ function resize_tooltip_label_Label({ const showLabel = !!label; const isBottom = position === POSITIONS.bottom; const isCorner = position === POSITIONS.corner; - if (!showLabel) return null; + if (!showLabel) { + return null; + } let style = { opacity: showLabel ? 1 : undefined, zIndex @@ -65989,24 +66264,26 @@ function resize_tooltip_label_Label({ left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined }; } - return (0,external_React_.createElement)(TooltipWrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TooltipWrapper, { "aria-hidden": "true", className: "components-resizable-tooltip__tooltip-wrapper", ref: ref, style: style, - ...props - }, (0,external_React_.createElement)(resize_tooltip_styles_Tooltip, { - className: "components-resizable-tooltip__tooltip", - style: labelStyle - }, (0,external_React_.createElement)(LabelText, { - as: "span" - }, label))); + ...props, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip_styles_Tooltip, { + className: "components-resizable-tooltip__tooltip", + style: labelStyle, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LabelText, { + as: "span", + children: label + }) + }) + }); } const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label); /* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js - /** * External dependencies */ @@ -66022,6 +66299,8 @@ const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardR + + const resize_tooltip_noop = () => {}; function ResizeTooltip({ axis, @@ -66045,26 +66324,28 @@ function ResizeTooltip({ showPx, position }); - if (!isVisible) return null; - const classes = classnames_default()('components-resize-tooltip', className); - return (0,external_React_.createElement)(resize_tooltip_styles_Root, { + if (!isVisible) { + return null; + } + const classes = dist_clsx('components-resize-tooltip', className); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(resize_tooltip_styles_Root, { "aria-hidden": "true", className: classes, ref: ref, - ...props - }, resizeListener, (0,external_React_.createElement)(resize_tooltip_label, { - "aria-hidden": props['aria-hidden'], - label: label, - position: position, - ref: labelRef, - zIndex: zIndex - })); + ...props, + children: [resizeListener, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip_label, { + "aria-hidden": props['aria-hidden'], + label: label, + position: position, + ref: labelRef, + zIndex: zIndex + })] + }); } const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip); /* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/index.js - /** * WordPress dependencies */ @@ -66079,18 +66360,20 @@ const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject * Internal dependencies */ + + const HANDLE_CLASS_NAME = 'components-resizable-box__handle'; const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle'; const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle'; const HANDLE_CLASSES = { - top: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'), - right: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'), - bottom: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'), - left: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'), - topLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'), - topRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'), - bottomRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'), - bottomLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left') + top: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'), + right: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'), + bottom: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'), + left: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'), + topLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'), + topRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'), + bottomRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'), + bottomLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left') }; // Removes the inline styles in the drag handles. @@ -66120,21 +66403,21 @@ function UnforwardedResizableBox({ __experimentalTooltipProps: tooltipProps = {}, ...props }, ref) { - return (0,external_React_.createElement)(Resizable, { - className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Resizable, { + className: dist_clsx('components-resizable-box__container', showHandle && 'has-show-handle', className), handleClasses: HANDLE_CLASSES, handleStyles: HANDLE_STYLES, ref: ref, - ...props - }, children, showTooltip && (0,external_React_.createElement)(resize_tooltip, { - ...tooltipProps - })); + ...props, + children: [children, showTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip, { + ...tooltipProps + })] + }); } const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox); /* harmony default export */ const resizable_box = (ResizableBox); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js - /** * External dependencies */ @@ -66179,20 +66462,22 @@ function ResponsiveWrapper({ if (naturalWidth && naturalHeight) { aspectRatio = `${naturalWidth} / ${naturalHeight}`; } - return (0,external_React_.createElement)(TagName, { - className: "components-responsive-wrapper" - }, (0,external_React_.createElement)("div", null, (0,external_wp_element_namespaceObject.cloneElement)(children, { - className: classnames_default()('components-responsive-wrapper__content', children.props.className), - style: { - ...children.props.style, - aspectRatio - } - }))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TagName, { + className: "components-responsive-wrapper", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + children: (0,external_wp_element_namespaceObject.cloneElement)(children, { + className: dist_clsx('components-responsive-wrapper__content', children.props.className), + style: { + ...children.props.style, + aspectRatio + } + }) + }) + }); } /* harmony default export */ const responsive_wrapper = (ResponsiveWrapper); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/sandbox/index.js - /** * WordPress dependencies */ @@ -66203,6 +66488,7 @@ function ResponsiveWrapper({ * Internal dependencies */ + const observeAndResizeJS = function () { const { MutationObserver @@ -66325,34 +66611,38 @@ function SandBox({ // we can use this in the future to inject custom styles or scripts. // Scripts go into the body rather than the head, to support embedded content such as Instagram // that expect the scripts to be part of the body. - const htmlDoc = (0,external_React_.createElement)("html", { + const htmlDoc = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("html", { lang: ownerDocument.documentElement.lang, - className: type - }, (0,external_React_.createElement)("head", null, (0,external_React_.createElement)("title", null, title), (0,external_React_.createElement)("style", { - dangerouslySetInnerHTML: { - __html: style - } - }), styles.map((rules, i) => (0,external_React_.createElement)("style", { - key: i, - dangerouslySetInnerHTML: { - __html: rules - } - }))), (0,external_React_.createElement)("body", { - "data-resizable-iframe-connected": "data-resizable-iframe-connected", - className: type - }, (0,external_React_.createElement)("div", { - dangerouslySetInnerHTML: { - __html: html - } - }), (0,external_React_.createElement)("script", { - type: "text/javascript", - dangerouslySetInnerHTML: { - __html: `(${observeAndResizeJS.toString()})();` - } - }), scripts.map(src => (0,external_React_.createElement)("script", { - key: src, - src: src - })))); + className: type, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("head", { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("title", { + children: title + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", { + dangerouslySetInnerHTML: { + __html: style + } + }), styles.map((rules, i) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("style", { + dangerouslySetInnerHTML: { + __html: rules + } + }, i))] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("body", { + "data-resizable-iframe-connected": "data-resizable-iframe-connected", + className: type, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + dangerouslySetInnerHTML: { + __html: html + } + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("script", { + type: "text/javascript", + dangerouslySetInnerHTML: { + __html: `(${observeAndResizeJS.toString()})();` + } + }), scripts.map(src => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("script", { + src: src + }, src))] + })] + }); // Writing the document like this makes it act in the same way as if it was // loaded over the network, so DOM creation and mutation, script execution, etc. @@ -66419,7 +66709,7 @@ function SandBox({ // See https://github.com/WordPress/gutenberg/pull/44378 // eslint-disable-next-line react-hooks/exhaustive-deps }, [html, type]); - return (0,external_React_.createElement)("iframe", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("iframe", { ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]), title: title, tabIndex: tabIndex, @@ -66433,7 +66723,6 @@ function SandBox({ /* harmony default export */ const sandbox = (SandBox); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/index.js - /** * External dependencies */ @@ -66452,6 +66741,8 @@ function SandBox({ * Internal dependencies */ + + const NOTICE_TIMEOUT = 10000; /** @@ -66525,7 +66816,7 @@ function UnforwardedSnackbar({ }, NOTICE_TIMEOUT); return () => clearTimeout(timeoutHandle); }, [explicitDismiss]); - const classes = classnames_default()(className, 'components-snackbar', { + const classes = dist_clsx(className, 'components-snackbar', { 'components-snackbar-explicit-dismiss': !!explicitDismiss }); if (actions && actions.length > 1) { @@ -66534,41 +66825,46 @@ function UnforwardedSnackbar({ // return first element only while keeping it inside an array actions = [actions[0]]; } - const snackbarContentClassnames = classnames_default()('components-snackbar__content', { + const snackbarContentClassnames = dist_clsx('components-snackbar__content', { 'components-snackbar__content-with-icon': !!icon }); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ref: ref, className: classes, onClick: !explicitDismiss ? dismissMe : undefined, tabIndex: 0, - role: !explicitDismiss ? 'button' : '', + role: !explicitDismiss ? 'button' : undefined, onKeyPress: !explicitDismiss ? dismissMe : undefined, - "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : '' - }, (0,external_React_.createElement)("div", { - className: snackbarContentClassnames - }, icon && (0,external_React_.createElement)("div", { - className: "components-snackbar__icon" - }, icon), children, actions.map(({ - label, - onClick, - url - }, index) => { - return (0,external_React_.createElement)(build_module_button, { - key: index, - href: url, - variant: "tertiary", - onClick: event => onActionClick(event, onClick), - className: "components-snackbar__action" - }, label); - }), explicitDismiss && (0,external_React_.createElement)("span", { - role: "button", - "aria-label": "Dismiss this notice", - tabIndex: 0, - className: "components-snackbar__dismiss-button", - onClick: dismissMe, - onKeyPress: dismissMe - }, "\u2715"))); + "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : undefined, + "data-testid": "snackbar", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: snackbarContentClassnames, + children: [icon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-snackbar__icon", + children: icon + }), children, actions.map(({ + label, + onClick, + url + }, index) => { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + href: url, + variant: "tertiary", + onClick: event => onActionClick(event, onClick), + className: "components-snackbar__action", + children: label + }, index); + }), explicitDismiss && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", { + role: "button", + "aria-label": (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice'), + tabIndex: 0, + className: "components-snackbar__dismiss-button", + onClick: dismissMe, + onKeyPress: dismissMe, + children: "\u2715" + })] + }) + }); } /** @@ -66587,7 +66883,6 @@ const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedS /* harmony default export */ const snackbar = (Snackbar); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/list.js - /** * External dependencies */ @@ -66604,6 +66899,8 @@ const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedS */ + + const SNACKBAR_VARIANTS = { init: { height: 0, @@ -66656,33 +66953,39 @@ function SnackbarList({ }) { const listRef = (0,external_wp_element_namespaceObject.useRef)(null); const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); - className = classnames_default()('components-snackbar-list', className); + className = dist_clsx('components-snackbar-list', className); const removeNotice = notice => () => onRemove?.(notice.id); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { className: className, tabIndex: -1, - ref: listRef - }, children, (0,external_React_.createElement)(AnimatePresence, null, notices.map(notice => { - const { - content, - ...restNotice - } = notice; - return (0,external_React_.createElement)(motion.div, { - layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations - , - initial: 'init', - animate: 'open', - exit: 'exit', - key: notice.id, - variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS - }, (0,external_React_.createElement)("div", { - className: "components-snackbar-list__notice-container" - }, (0,external_React_.createElement)(snackbar, { - ...restNotice, - onRemove: removeNotice(notice), - listRef: listRef - }, notice.content))); - }))); + ref: listRef, + "data-testid": "snackbar-list", + children: [children, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AnimatePresence, { + children: notices.map(notice => { + const { + content, + ...restNotice + } = notice; + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(motion.div, { + layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations + , + initial: "init", + animate: "open", + exit: "exit", + variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: "components-snackbar-list__notice-container", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(snackbar, { + ...restNotice, + onRemove: removeNotice(notice), + listRef: listRef, + children: notice.content + }) + }) + }, notice.id); + }) + })] + }); } /* harmony default export */ const snackbar_list = (SnackbarList); @@ -66707,22 +67010,21 @@ const spinAnimation = emotion_react_browser_esm_keyframes` transform: rotate(360deg); } `; -const StyledSpinner = emotion_styled_base_browser_esm("svg", true ? { +const StyledSpinner = /*#__PURE__*/emotion_styled_base_browser_esm("svg", true ? { target: "ea4tfvq2" } : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0)); const commonPathProps = true ? { name: "9s4963", styles: "fill:transparent;stroke-width:1.5px" } : 0; -const SpinnerTrack = emotion_styled_base_browser_esm("circle", true ? { +const SpinnerTrack = /*#__PURE__*/emotion_styled_base_browser_esm("circle", true ? { target: "ea4tfvq1" } : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0)); -const SpinnerIndicator = emotion_styled_base_browser_esm("path", true ? { +const SpinnerIndicator = /*#__PURE__*/emotion_styled_base_browser_esm("path", true ? { target: "ea4tfvq0" } : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/index.js - /** * External dependencies */ @@ -66735,12 +67037,14 @@ const SpinnerIndicator = emotion_styled_base_browser_esm("path", true ? { * WordPress dependencies */ + + function UnforwardedSpinner({ className, ...props }, forwardedRef) { - return (0,external_React_.createElement)(StyledSpinner, { - className: classnames_default()('components-spinner', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(StyledSpinner, { + className: dist_clsx('components-spinner', className), viewBox: "0 0 100 100", width: "16", height: "16", @@ -66748,16 +67052,17 @@ function UnforwardedSpinner({ role: "presentation", focusable: "false", ...props, - ref: forwardedRef - }, (0,external_React_.createElement)(SpinnerTrack, { - cx: "50", - cy: "50", - r: "50", - vectorEffect: "non-scaling-stroke" - }), (0,external_React_.createElement)(SpinnerIndicator, { - d: "m 50 0 a 50 50 0 0 1 50 50", - vectorEffect: "non-scaling-stroke" - })); + ref: forwardedRef, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerTrack, { + cx: "50", + cy: "50", + r: "50", + vectorEffect: "non-scaling-stroke" + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SpinnerIndicator, { + d: "m 50 0 a 50 50 0 0 1 50 50", + vectorEffect: "non-scaling-stroke" + })] + }); } /** * `Spinner` is a component used to notify users that their action is being processed. @@ -66774,7 +67079,6 @@ const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSp /* harmony default export */ const spinner = (Spinner); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/component.js - /** * External dependencies */ @@ -66785,9 +67089,10 @@ const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSp + function UnconnectedSurface(props, forwardedRef) { const surfaceProps = useSurface(props); - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...surfaceProps, ref: forwardedRef }); @@ -67002,7 +67307,7 @@ var useTabList = createHook((_a) => { ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }), [store] ); props = _4R3V3JGP_spreadValues({ @@ -67162,7 +67467,7 @@ var useTabPanel = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(TabScopedContextProvider, { value: store, children: element }), [store] ); const tabId = store.panels.useState( @@ -67196,7 +67501,6 @@ if (false) {} ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tab-panel/index.js - /** * External dependencies */ @@ -67214,6 +67518,8 @@ if (false) {} */ + + // Separate the actual tab name from the instance ID. This is // necessary because Ariakit internally uses the element ID when // a new tab is selected, but our implementation looks specifically @@ -67352,39 +67658,41 @@ const UnforwardedTabPanel = ({ setTabStoreSelectedId(firstEnabledTab.name); } }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { className: className, - ref: ref - }, (0,external_React_.createElement)(tab_list_TabList, { - store: tabStore, - className: "components-tab-panel__tabs" - }, tabs.map(tab => { - return (0,external_React_.createElement)(Tab, { - key: tab.name, - id: prependInstanceId(tab.name), - className: classnames_default()('components-tab-panel__tabs-item', tab.className, { - [activeClass]: tab.name === selectedTabName - }), - disabled: tab.disabled, - "aria-controls": `${prependInstanceId(tab.name)}-view`, - render: (0,external_React_.createElement)(build_module_button, { - icon: tab.icon, - label: tab.icon && tab.title, - showTooltip: !!tab.icon + ref: ref, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tab_list_TabList, { + store: tabStore, + className: "components-tab-panel__tabs", + children: tabs.map(tab => { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tab, { + id: prependInstanceId(tab.name), + className: dist_clsx('components-tab-panel__tabs-item', tab.className, { + [activeClass]: tab.name === selectedTabName + }), + disabled: tab.disabled, + "aria-controls": `${prependInstanceId(tab.name)}-view`, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + icon: tab.icon, + label: tab.icon && tab.title, + showTooltip: !!tab.icon + }), + children: !tab.icon && tab.title + }, tab.name); }) - }, !tab.icon && tab.title); - })), selectedTab && (0,external_React_.createElement)(TabPanel, { - id: `${prependInstanceId(selectedTab.name)}-view`, - store: tabStore, - tabId: prependInstanceId(selectedTab.name), - className: 'components-tab-panel__tab-content' - }, children(selectedTab))); + }), selectedTab && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabPanel, { + id: `${prependInstanceId(selectedTab.name)}-view`, + store: tabStore, + tabId: prependInstanceId(selectedTab.name), + className: "components-tab-panel__tab-content", + children: children(selectedTab) + })] + }); }; const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel); /* harmony default export */ const tab_panel = (tab_panel_TabPanel); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-control/index.js - /** * External dependencies */ @@ -67401,6 +67709,7 @@ const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(Un * Internal dependencies */ + function UnforwardedTextControl(props, ref) { const { __nextHasNoMarginBottom, @@ -67417,25 +67726,26 @@ function UnforwardedTextControl(props, ref) { } = props; const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp); const onChangeValue = event => onChange(event.target.value); - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { __nextHasNoMarginBottom: __nextHasNoMarginBottom, label: label, hideLabelFromVision: hideLabelFromVision, id: id, help: help, - className: className - }, (0,external_React_.createElement)("input", { - className: classnames_default()('components-text-control__input', { - 'is-next-40px-default-size': __next40pxDefaultSize - }), - type: type, - id: id, - value: value, - onChange: onChangeValue, - "aria-describedby": !!help ? id + '__help' : undefined, - ref: ref, - ...additionalProps - })); + className: className, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("input", { + className: dist_clsx('components-text-control__input', { + 'is-next-40px-default-size': __next40pxDefaultSize + }), + type: type, + id: id, + value: value, + onChange: onChangeValue, + "aria-describedby": !!help ? id + '__help' : undefined, + ref: ref, + ...additionalProps + }) + }); } /** @@ -67472,8 +67782,7 @@ const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(Unforward */ - -const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";" + ( true ? "" : 0), true ? "" : 0); +const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";@media not ( prefers-reduced-motion ){transition:box-shadow 0.1s linear;}" + ( true ? "" : 0), true ? "" : 0); const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js @@ -67527,12 +67836,11 @@ const inputControl = /*#__PURE__*/emotion_react_browser_esm_css("display:block;f * Internal dependencies */ -const StyledTextarea = emotion_styled_base_browser_esm("textarea", true ? { +const StyledTextarea = /*#__PURE__*/emotion_styled_base_browser_esm("textarea", true ? { target: "e1w5nnrk0" } : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/index.js - /** * WordPress dependencies */ @@ -67544,6 +67852,7 @@ const StyledTextarea = emotion_styled_base_browser_esm("textarea", true ? { */ + function UnforwardedTextareaControl(props, ref) { const { __nextHasNoMarginBottom, @@ -67559,23 +67868,24 @@ function UnforwardedTextareaControl(props, ref) { const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl); const id = `inspector-textarea-control-${instanceId}`; const onChangeValue = event => onChange(event.target.value); - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { __nextHasNoMarginBottom: __nextHasNoMarginBottom, label: label, hideLabelFromVision: hideLabelFromVision, id: id, help: help, - className: className - }, (0,external_React_.createElement)(StyledTextarea, { - className: "components-textarea-control__input", - id: id, - rows: rows, - onChange: onChangeValue, - "aria-describedby": !!help ? id + '__help' : undefined, - value: value, - ref: ref, - ...additionalProps - })); + className: className, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledTextarea, { + className: "components-textarea-control__input", + id: id, + rows: rows, + onChange: onChangeValue, + "aria-describedby": !!help ? id + '__help' : undefined, + value: value, + ref: ref, + ...additionalProps + }) + }); } /** @@ -67605,7 +67915,6 @@ const TextareaControl = (0,external_wp_element_namespaceObject.forwardRef)(Unfor /* harmony default export */ const textarea_control = (TextareaControl); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-highlight/index.js - /** * WordPress dependencies */ @@ -67615,6 +67924,8 @@ const TextareaControl = (0,external_wp_element_namespaceObject.forwardRef)(Unfor * Internal dependencies */ + + /** * Highlights occurrences of a given string within another string of text. Wraps * each match with a `<mark>` tag which provides browser default styling. @@ -67637,31 +67948,33 @@ const TextHighlight = props => { } = props; const trimmedHighlightText = highlight.trim(); if (!trimmedHighlightText) { - return (0,external_React_.createElement)(external_React_.Fragment, null, text); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: text + }); } const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi'); return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), { - mark: (0,external_React_.createElement)("mark", null) + mark: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("mark", {}) }); }; /* harmony default export */ const text_highlight = (TextHighlight); ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/tip.js - /** * WordPress dependencies */ -const tip = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const tip = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" + }) +}); /* harmony default export */ const library_tip = (tip); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tip/index.js - /** * WordPress dependencies */ @@ -67671,20 +67984,23 @@ const tip = (0,external_React_.createElement)(external_wp_primitives_namespaceOb * Internal dependencies */ + function Tip(props) { const { children } = props; - return (0,external_React_.createElement)("div", { - className: "components-tip" - }, (0,external_React_.createElement)(icons_build_module_icon, { - icon: library_tip - }), (0,external_React_.createElement)("p", null, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + className: "components-tip", + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(icons_build_module_icon, { + icon: library_tip + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("p", { + children: children + })] + }); } /* harmony default export */ const build_module_tip = (Tip); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-control/index.js - /** * External dependencies */ @@ -67696,6 +68012,7 @@ function Tip(props) { */ + /** * Internal dependencies */ @@ -67726,6 +68043,8 @@ function Tip(props) { * }; * ``` */ + + function ToggleControl({ __nextHasNoMarginBottom, label, @@ -67734,7 +68053,7 @@ function ToggleControl({ className, onChange, disabled -}) { +}, ref) { function onChangeToggle(event) { onChange(event.target.checked); } @@ -67760,27 +68079,31 @@ function ToggleControl({ describedBy = id + '__help'; } } - return (0,external_React_.createElement)(base_control, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, { id: id, help: helpLabel, className: classes, - __nextHasNoMarginBottom: true - }, (0,external_React_.createElement)(h_stack_component, { - justify: "flex-start", - spacing: 3 - }, (0,external_React_.createElement)(form_toggle, { - id: id, - checked: checked, - onChange: onChangeToggle, - "aria-describedby": describedBy, - disabled: disabled - }), (0,external_React_.createElement)(flex_block_component, { - as: "label", - htmlFor: id, - className: "components-toggle-control__label" - }, label))); + __nextHasNoMarginBottom: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { + justify: "flex-start", + spacing: 3, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(form_toggle, { + id: id, + checked: checked, + onChange: onChangeToggle, + "aria-describedby": describedBy, + disabled: disabled, + ref: ref + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(flex_block_component, { + as: "label", + htmlFor: id, + className: "components-toggle-control__label", + children: label + })] + }) + }); } -/* harmony default export */ const toggle_control = (ToggleControl); +/* harmony default export */ const toggle_control = ((0,external_wp_element_namespaceObject.forwardRef)(ToggleControl)); ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SOK7T35T.js "use client"; @@ -67839,7 +68162,6 @@ const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(und /* harmony default export */ const toolbar_context = (ToolbarContext); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-item/index.js - /** * External dependencies */ @@ -67855,6 +68177,7 @@ const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(und * Internal dependencies */ + function toolbar_item_ToolbarItem({ children, as: Component, @@ -67873,17 +68196,20 @@ function toolbar_item_ToolbarItem({ }; if (!accessibleToolbarStore) { if (Component) { - return (0,external_React_.createElement)(Component, { - ...allProps - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { + ...allProps, + children: children + }); } if (!isRenderProp) { return null; } return children(allProps); } - const render = isRenderProp ? children : Component && (0,external_React_.createElement)(Component, null, children); - return (0,external_React_.createElement)(ToolbarItem, { + const render = isRenderProp ? children : Component && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { + children: children + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarItem, { ...allProps, store: accessibleToolbarStore, render: render @@ -67900,13 +68226,13 @@ function toolbar_item_ToolbarItem({ const ToolbarButtonContainer = ({ children, className -}) => (0,external_React_.createElement)("div", { - className: className -}, children); +}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + className: className, + children: children +}); /* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/index.js - /** * External dependencies */ @@ -67923,6 +68249,7 @@ const ToolbarButtonContainer = ({ + function UnforwardedToolbarButton({ children, className, @@ -67935,44 +68262,48 @@ function UnforwardedToolbarButton({ }, ref) { const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); if (!accessibleToolbarState) { - return (0,external_React_.createElement)(toolbar_button_container, { - className: containerClassName - }, (0,external_React_.createElement)(build_module_button, { - ref: ref, - icon: props.icon, - label: title, - shortcut: props.shortcut, - "data-subscript": props.subscript, - onClick: event => { - event.stopPropagation(); - // TODO: Possible bug; maybe use onClick instead of props.onClick. - if (props.onClick) { - props.onClick(event); - } - }, - className: classnames_default()('components-toolbar__control', className), - isPressed: isActive, - disabled: isDisabled, - "data-toolbar-item": true, - ...extraProps, - ...props - }, children)); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_button_container, { + className: containerClassName, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + ref: ref, + icon: props.icon, + label: title, + shortcut: props.shortcut, + "data-subscript": props.subscript, + onClick: event => { + event.stopPropagation(); + // TODO: Possible bug; maybe use onClick instead of props.onClick. + if (props.onClick) { + props.onClick(event); + } + }, + className: dist_clsx('components-toolbar__control', className), + isPressed: isActive, + disabled: isDisabled, + "data-toolbar-item": true, + ...extraProps, + ...props, + children: children + }) + }); } // ToobarItem will pass all props to the render prop child, which will pass // all props to Button. This means that ToolbarButton has the same API as // Button. - return (0,external_React_.createElement)(toolbar_item, { - className: classnames_default()('components-toolbar-button', className), + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { + className: dist_clsx('components-toolbar-button', className), ...extraProps, ...props, - ref: ref - }, toolbarItemProps => (0,external_React_.createElement)(build_module_button, { - label: title, - isPressed: isActive, - disabled: isDisabled, - ...toolbarItemProps - }, children)); + ref: ref, + children: toolbarItemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, { + label: title, + isPressed: isActive, + disabled: isDisabled, + ...toolbarItemProps, + children: children + }) + }); } /** @@ -68009,14 +68340,14 @@ const ToolbarGroupContainer = ({ className, children, ...props -}) => (0,external_React_.createElement)("div", { +}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { className: className, - ...props -}, children); + ...props, + children: children +}); /* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js - /** * WordPress dependencies */ @@ -68028,6 +68359,7 @@ const ToolbarGroupContainer = ({ + function ToolbarGroupCollapsed({ controls = [], toggleProps, @@ -68036,7 +68368,7 @@ function ToolbarGroupCollapsed({ // It'll contain state if `ToolbarGroup` is being used within // `<Toolbar label="label" />` const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); - const renderDropdownMenu = internalToggleProps => (0,external_React_.createElement)(dropdown_menu, { + const renderDropdownMenu = internalToggleProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { controls: controls, toggleProps: { ...internalToggleProps, @@ -68045,16 +68377,16 @@ function ToolbarGroupCollapsed({ ...props }); if (accessibleToolbarState) { - return (0,external_React_.createElement)(toolbar_item, { - ...toggleProps - }, renderDropdownMenu); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { + ...toggleProps, + children: renderDropdownMenu + }); } return renderDropdownMenu(toggleProps); } /* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/index.js - /** * External dependencies */ @@ -68072,6 +68404,8 @@ function ToolbarGroupCollapsed({ + + function isNestedArray(arr) { return Array.isArray(arr) && Array.isArray(arr[0]); } @@ -68120,7 +68454,7 @@ function ToolbarGroup({ if ((!controls || !controls.length) && !children) { return null; } - const finalClassName = classnames_default()( + const finalClassName = dist_clsx( // Unfortunately, there's legacy code referencing to `.components-toolbar` // So we can't get rid of it accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className); @@ -68133,7 +68467,7 @@ function ToolbarGroup({ controlSets = [controls]; } if (isCollapsed) { - return (0,external_React_.createElement)(toolbar_group_collapsed, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_group_collapsed, { label: title, controls: controlSets, className: finalClassName, @@ -68141,14 +68475,14 @@ function ToolbarGroup({ ...props }); } - return (0,external_React_.createElement)(toolbar_group_container, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(toolbar_group_container, { className: finalClassName, - ...props - }, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_React_.createElement)(toolbar_button, { - key: [indexOfSet, indexOfControl].join(), - containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined, - ...control - }))), children); + ...props, + children: [controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_button, { + containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined, + ...control + }, [indexOfSet, indexOfControl].join()))), children] + }); } /* harmony default export */ const toolbar_group = (ToolbarGroup); @@ -68243,7 +68577,7 @@ var useToolbar = createHook( ); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(ToolbarScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(ToolbarScopedContextProvider, { value: store, children: element }), [store] ); props = _4R3V3JGP_spreadValues({ @@ -68262,7 +68596,6 @@ if (false) {} ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/toolbar-container.js - /** * External dependencies */ @@ -68278,6 +68611,7 @@ if (false) {} * Internal dependencies */ + function UnforwardedToolbarContainer({ label, ...props @@ -68287,22 +68621,23 @@ function UnforwardedToolbarContainer({ rtl: (0,external_wp_i18n_namespaceObject.isRTL)() }); return ( + /*#__PURE__*/ // This will provide state for `ToolbarButton`'s - (0,external_React_.createElement)(toolbar_context.Provider, { - value: toolbarStore - }, (0,external_React_.createElement)(Toolbar, { - ref: ref, - "aria-label": label, - store: toolbarStore, - ...props - })) + (0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_context.Provider, { + value: toolbarStore, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Toolbar, { + ref: ref, + "aria-label": label, + store: toolbarStore, + ...props + }) + }) ); } const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer); /* harmony default export */ const toolbar_container = (ToolbarContainer); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/index.js - /** * External dependencies */ @@ -68319,6 +68654,7 @@ const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(Unfo + function UnforwardedToolbar({ className, label, @@ -68350,22 +68686,23 @@ function UnforwardedToolbar({ title: _title, ...restProps } = props; - return (0,external_React_.createElement)(toolbar_group, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_group, { isCollapsed: false, ...restProps, className: className }); } // `ToolbarGroup` already uses components-toolbar for compatibility reasons. - const finalClassName = classnames_default()('components-accessible-toolbar', className, variant && `is-${variant}`); - return (0,external_React_.createElement)(ContextSystemProvider, { - value: contextSystemValue - }, (0,external_React_.createElement)(toolbar_container, { - className: finalClassName, - label: label, - ref: ref, - ...props - })); + const finalClassName = dist_clsx('components-accessible-toolbar', className, variant && `is-${variant}`); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ContextSystemProvider, { + value: contextSystemValue, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_container, { + className: finalClassName, + label: label, + ref: ref, + ...props + }) + }); } /** @@ -68392,7 +68729,6 @@ const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(Unfor /* harmony default export */ const toolbar = (toolbar_Toolbar); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-dropdown-menu/index.js - /** * WordPress dependencies */ @@ -68408,10 +68744,11 @@ const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(Unfor + function ToolbarDropdownMenu(props, ref) { const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); if (!accessibleToolbarState) { - return (0,external_React_.createElement)(dropdown_menu, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { ...props }); } @@ -68419,16 +68756,17 @@ function ToolbarDropdownMenu(props, ref) { // ToolbarItem will pass all props to the render prop child, which will pass // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu // has the same API as DropdownMenu. - return (0,external_React_.createElement)(toolbar_item, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(toolbar_item, { ref: ref, - ...props.toggleProps - }, toolbarItemProps => (0,external_React_.createElement)(dropdown_menu, { - ...props, - popoverProps: { - ...props.popoverProps - }, - toggleProps: toolbarItemProps - })); + ...props.toggleProps, + children: toolbarItemProps => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { + ...props, + popoverProps: { + ...props.popoverProps + }, + toggleProps: toolbarItemProps + }) + }); } /* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu)); @@ -68487,7 +68825,7 @@ const styles_DropdownMenu = true ? { name: "16gsvie", styles: "min-width:200px" } : 0; -const ResetLabel = emotion_styled_base_browser_esm("span", true ? { +const ResetLabel = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "ews648u0" } : 0)("color:", COLORS.theme.accentDarker10, ";font-size:11px;font-weight:500;line-height:1.4;", rtl({ marginLeft: space(3) @@ -68573,7 +68911,6 @@ function useToolsPanelHeader(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js - /** * External dependencies */ @@ -68596,6 +68933,9 @@ function useToolsPanelHeader(props) { + + + const DefaultControlsGroup = ({ itemClassName, items, @@ -68604,36 +68944,39 @@ const DefaultControlsGroup = ({ if (!items.length) { return null; } - const resetSuffix = (0,external_React_.createElement)(ResetLabel, { - "aria-hidden": true - }, (0,external_wp_i18n_namespaceObject.__)('Reset')); - return (0,external_React_.createElement)(external_React_.Fragment, null, items.map(([label, hasValue]) => { - if (hasValue) { - return (0,external_React_.createElement)(menu_item, { - key: label, - className: itemClassName, - role: "menuitem", - label: (0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s: The name of the control being reset e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label), - onClick: () => { - toggleItem(label); - (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( + const resetSuffix = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetLabel, { + "aria-hidden": true, + children: (0,external_wp_i18n_namespaceObject.__)('Reset') + }); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: items.map(([label, hasValue]) => { + if (hasValue) { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { + className: itemClassName, + role: "menuitem", + label: (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive'); - }, - suffix: resetSuffix + (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label), + onClick: () => { + toggleItem(label); + (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s: The name of the control being reset e.g. "Padding". + (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive'); + }, + suffix: resetSuffix, + children: label + }, label); + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { + icon: library_check, + className: itemClassName, + role: "menuitemcheckbox", + isSelected: true, + "aria-disabled": true, + children: label }, label); - } - return (0,external_React_.createElement)(menu_item, { - key: label, - icon: library_check, - className: itemClassName, - role: "menuitemcheckbox", - isSelected: true, - "aria-disabled": true - }, label); - })); + }) + }); }; const OptionalControlsGroup = ({ items, @@ -68642,32 +68985,34 @@ const OptionalControlsGroup = ({ if (!items.length) { return null; } - return (0,external_React_.createElement)(external_React_.Fragment, null, items.map(([label, isSelected]) => { - const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s: The name of the control being hidden and reset e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s: The name of the control to display e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('Show %s'), label); - return (0,external_React_.createElement)(menu_item, { - key: label, - icon: isSelected ? library_check : null, - isSelected: isSelected, - label: itemLabel, - onClick: () => { - if (isSelected) { - (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s: The name of the control being reset e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive'); - } else { - (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( - // translators: %s: The name of the control being reset e.g. "Padding". - (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive'); - } - toggleItem(label); - }, - role: "menuitemcheckbox" - }, label); - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: items.map(([label, isSelected]) => { + const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s: The name of the control being hidden and reset e.g. "Padding". + (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s: The name of the control to display e.g. "Padding". + (0,external_wp_i18n_namespaceObject.__)('Show %s'), label); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { + icon: isSelected ? library_check : null, + isSelected: isSelected, + label: itemLabel, + onClick: () => { + if (isSelected) { + (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s: The name of the control being reset e.g. "Padding". + (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive'); + } else { + (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( + // translators: %s: The name of the control being reset e.g. "Padding". + (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive'); + } + toggleItem(label); + }, + role: "menuitemcheckbox", + children: label + }, label); + }) + }); }; const component_ToolsPanelHeader = (props, forwardedRef) => { const { @@ -68695,46 +69040,55 @@ const component_ToolsPanelHeader = (props, forwardedRef) => { (0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal tool panel options'), labelText); const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject.__)('All options are currently hidden') : undefined; const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected); - return (0,external_React_.createElement)(h_stack_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, { ...headerProps, - ref: forwardedRef - }, (0,external_React_.createElement)(heading_component, { - level: headingLevel, - className: headingClassName - }, labelText), hasMenuItems && (0,external_React_.createElement)(dropdown_menu, { - ...dropdownMenuProps, - icon: dropDownMenuIcon, - label: dropDownMenuLabelText, - menuProps: { - className: dropdownMenuClassName - }, - toggleProps: { - isSmall: true, - describedBy: dropdownMenuDescriptionText - } - }, () => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(menu_group, { - label: labelText - }, (0,external_React_.createElement)(DefaultControlsGroup, { - items: defaultItems, - toggleItem: toggleItem, - itemClassName: defaultControlsItemClassName - }), (0,external_React_.createElement)(OptionalControlsGroup, { - items: optionalItems, - toggleItem: toggleItem - })), (0,external_React_.createElement)(menu_group, null, (0,external_React_.createElement)(menu_item, { - "aria-disabled": !canResetAll - // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem, - // we should rename it and explicitly allow it as an official API. All the other Button variants - // don't make sense in a MenuItem context, and should be disallowed. - , - variant: 'tertiary', - onClick: () => { - if (canResetAll) { - resetAll(); - (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive'); - } - } - }, (0,external_wp_i18n_namespaceObject.__)('Reset all')))))); + ref: forwardedRef, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(heading_component, { + level: headingLevel, + className: headingClassName, + children: labelText + }), hasMenuItems && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu, { + ...dropdownMenuProps, + icon: dropDownMenuIcon, + label: dropDownMenuLabelText, + menuProps: { + className: dropdownMenuClassName + }, + toggleProps: { + size: 'small', + describedBy: dropdownMenuDescriptionText + }, + children: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(menu_group, { + label: labelText, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DefaultControlsGroup, { + items: defaultItems, + toggleItem: toggleItem, + itemClassName: defaultControlsItemClassName + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OptionalControlsGroup, { + items: optionalItems, + toggleItem: toggleItem + })] + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_group, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(menu_item, { + "aria-disabled": !canResetAll + // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem, + // we should rename it and explicitly allow it as an official API. All the other Button variants + // don't make sense in a MenuItem context, and should be disallowed. + , + variant: "tertiary", + onClick: () => { + if (canResetAll) { + resetAll(); + (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive'); + } + }, + children: (0,external_wp_i18n_namespaceObject.__)('Reset all') + }) + })] + }) + })] + }); }; const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader'); /* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader); @@ -68904,17 +69258,16 @@ function useToolsPanel(props) { }); }, [panelItems, setMenuItems, menuItemOrder]); - // Force a menu item to be checked. - // This is intended for use with default panel items. They are displayed - // separately to optional items and have different display states, - // we need to update that when their value is customized. - const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((label, group = 'default') => { + // Updates the status of the panel’s menu items. For default items the + // value represents whether it differs from the default and for optional + // items whether the item is shown. + const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((value, label, group = 'default') => { setMenuItems(items => { const newState = { ...items, [group]: { ...items[group], - [label]: true + [label]: value } }; return newState; @@ -69010,7 +69363,6 @@ function useToolsPanel(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js - /** * External dependencies */ @@ -69023,6 +69375,8 @@ function useToolsPanel(props) { + + const UnconnectedToolsPanel = (props, forwardedRef) => { const { children, @@ -69034,19 +69388,21 @@ const UnconnectedToolsPanel = (props, forwardedRef) => { dropdownMenuProps, ...toolsPanelProps } = useToolsPanel(props); - return (0,external_React_.createElement)(grid_component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(grid_component, { ...toolsPanelProps, columns: 2, - ref: forwardedRef - }, (0,external_React_.createElement)(ToolsPanelContext.Provider, { - value: panelContext - }, (0,external_React_.createElement)(tools_panel_header_component, { - label: label, - resetAll: resetAllItems, - toggleItem: toggleItem, - headingLevel: headingLevel, - dropdownMenuProps: dropdownMenuProps - }), children)); + ref: forwardedRef, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(ToolsPanelContext.Provider, { + value: panelContext, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tools_panel_header_component, { + label: label, + resetAll: resetAllItems, + toggleItem: toggleItem, + headingLevel: headingLevel, + dropdownMenuProps: dropdownMenuProps + }), children] + }) + }); }; /** @@ -69196,16 +69552,14 @@ function useToolsPanelItem(props) { const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked); const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined; const isValueSet = hasValue(); - const wasValueSet = (0,external_wp_compose_namespaceObject.usePrevious)(isValueSet); - const newValueSet = isValueSet && !wasValueSet; - - // Notify the panel when an item's value has been set. + // Notify the panel when an item's value has changed except for optional + // items without value because the item should not cause itself to hide. (0,external_wp_element_namespaceObject.useEffect)(() => { - if (!newValueSet) { + if (!isShownByDefault && !isValueSet) { return; } - flagItemCustomization(label, menuGroup); - }, [newValueSet, menuGroup, label, flagItemCustomization]); + flagItemCustomization(isValueSet, label, menuGroup); + }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]); // Determine if the panel item's corresponding menu is being toggled and // trigger appropriate callback if it is. @@ -69219,7 +69573,7 @@ function useToolsPanelItem(props) { if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) { onSelect?.(); } - if (!isMenuItemChecked && wasMenuItemChecked) { + if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) { onDeselect?.(); } }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]); @@ -69244,7 +69598,6 @@ function useToolsPanelItem(props) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js - /** * External dependencies */ @@ -69255,6 +69608,7 @@ function useToolsPanelItem(props) { + // This wraps controls to be conditionally displayed within a tools panel. It // prevents props being applied to HTML elements that would make them invalid. const UnconnectedToolsPanelItem = (props, forwardedRef) => { @@ -69265,15 +69619,16 @@ const UnconnectedToolsPanelItem = (props, forwardedRef) => { ...toolsPanelItemProps } = useToolsPanelItem(props); if (!isShown) { - return shouldRenderPlaceholder ? (0,external_React_.createElement)(component, { + return shouldRenderPlaceholder ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...toolsPanelItemProps, ref: forwardedRef }) : null; } - return (0,external_React_.createElement)(component, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(component, { ...toolsPanelItemProps, - ref: forwardedRef - }, children); + ref: forwardedRef, + children: children + }); }; const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem'); /* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem); @@ -69288,7 +69643,6 @@ const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.us const RovingTabIndexProvider = RovingTabIndexContext.Provider; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js - /** * WordPress dependencies */ @@ -69304,6 +69658,7 @@ const RovingTabIndexProvider = RovingTabIndexContext.Provider; * * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md */ + function RovingTabIndex({ children }) { @@ -69316,13 +69671,13 @@ function RovingTabIndex({ lastFocusedElement, setLastFocusedElement }), [lastFocusedElement]); - return (0,external_React_.createElement)(RovingTabIndexProvider, { - value: providerValue - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RovingTabIndexProvider, { + value: providerValue, + children: children + }); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/index.js - /** * WordPress dependencies */ @@ -69334,6 +69689,7 @@ function RovingTabIndex({ * Internal dependencies */ + /** * Return focusables in a row element, excluding those from other branches * nested within the row. @@ -69555,15 +69911,21 @@ ref) { /* Disable reason: A treegrid is implemented using a table element. */ /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ - return (0,external_React_.createElement)(RovingTabIndex, null, (0,external_React_.createElement)("div", { - role: "application", - "aria-label": applicationAriaLabel - }, (0,external_React_.createElement)("table", { - ...props, - role: "treegrid", - onKeyDown: onKeyDown, - ref: ref - }, (0,external_React_.createElement)("tbody", null, children)))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RovingTabIndex, { + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + role: "application", + "aria-label": applicationAriaLabel, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("table", { + ...props, + role: "treegrid", + onKeyDown: onKeyDown, + ref: ref, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tbody", { + children: children + }) + }) + }) + }); /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */ } @@ -69636,7 +69998,6 @@ const TreeGrid = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedT ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/row.js - /** * WordPress dependencies */ @@ -69654,15 +70015,16 @@ function UnforwardedTreeGridRow({ isExpanded, ...props }, ref) { - return (0,external_React_.createElement)("tr", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("tr", { ...props, ref: ref, role: "row", "aria-level": level, "aria-posinset": positionInSet, "aria-setsize": setSize, - "aria-expanded": isExpanded - }, children); + "aria-expanded": isExpanded, + children: children + }); } /** @@ -69676,7 +70038,6 @@ const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(Unforward /* harmony default export */ const tree_grid_row = (TreeGridRow); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js - /** * WordPress dependencies */ @@ -69686,6 +70047,7 @@ const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(Unforward * Internal dependencies */ + const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({ children, as: Component, @@ -69717,15 +70079,17 @@ const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(fu if (typeof children === 'function') { return children(allProps); } - if (!Component) return null; - return (0,external_React_.createElement)(Component, { - ...allProps - }, children); + if (!Component) { + return null; + } + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { + ...allProps, + children: children + }); }); /* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/item.js - /** * WordPress dependencies */ @@ -69735,14 +70099,16 @@ const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(fu * Internal dependencies */ + function UnforwardedTreeGridItem({ children, ...props }, ref) { - return (0,external_React_.createElement)(roving_tab_index_item, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(roving_tab_index_item, { ref: ref, - ...props - }, children); + ...props, + children: children + }); } /** @@ -69756,7 +70122,6 @@ const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(Unforwar /* harmony default export */ const tree_grid_item = (TreeGridItem); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/cell.js - /** * WordPress dependencies */ @@ -69766,17 +70131,23 @@ const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(Unforwar * Internal dependencies */ + + function UnforwardedTreeGridCell({ children, withoutGridItem = false, ...props }, ref) { - return (0,external_React_.createElement)("td", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("td", { ...props, - role: "gridcell" - }, withoutGridItem ? (0,external_React_.createElement)(external_React_.Fragment, null, children) : (0,external_React_.createElement)(tree_grid_item, { - ref: ref - }, children)); + role: "gridcell", + children: withoutGridItem ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: children + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tree_grid_item, { + ref: ref, + children: children + }) + }); } /** @@ -69790,7 +70161,6 @@ const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(Unforwar /* harmony default export */ const cell = (TreeGridCell); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js - /** * External dependencies */ @@ -69800,6 +70170,7 @@ const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(Unforwar */ + function stopPropagation(event) { event.stopPropagation(); } @@ -69811,7 +70182,7 @@ const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef // Disable reason: this stops certain events from propagating outside of the component. // - onMouseDown is disabled as this can cause interactions with other DOM elements. /* eslint-disable jsx-a11y/no-static-element-interactions */ - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ...props, ref: ref, onMouseDown: stopPropagation @@ -69822,28 +70193,18 @@ const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js /** - * External dependencies - */ - - -/** * WordPress dependencies */ + /** * Internal dependencies */ function useSlotFills(name) { const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); - const fills = useSnapshot(registry.fills, { - sync: true - }); - // The important bit here is that this call ensures that the hook - // only causes a re-render if the "fills" of a given slot name - // change, not any fills. - return fills.get(name); + return (0,external_wp_compose_namespaceObject.useObservableValue)(registry.fills, name); } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/styles.js @@ -69853,7 +70214,7 @@ function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have trie * External dependencies */ -const ZStackChildView = emotion_styled_base_browser_esm("div", true ? { +const ZStackChildView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ebn2ljm1" } : 0)("&:not( :first-of-type ){", ({ offsetAmount @@ -69868,7 +70229,7 @@ var z_stack_styles_ref = true ? { name: "rs0gp6", styles: "grid-row-start:1;grid-column-start:1" } : 0; -const ZStackView = emotion_styled_base_browser_esm("div", true ? { +const ZStackView = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "ebn2ljm0" } : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({ isLayered @@ -69876,7 +70237,6 @@ const ZStackView = emotion_styled_base_browser_esm("div", true ? { z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/component.js - /** * External dependencies */ @@ -69892,6 +70252,7 @@ z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0)); + function UnconnectedZStack(props, forwardedRef) { const { children, @@ -69909,18 +70270,19 @@ function UnconnectedZStack(props, forwardedRef) { // the item's index, so that items can correctly stack at the right distance const offsetAmount = isLayered ? offset * index : offset; const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index; - return (0,external_React_.createElement)(ZStackChildView, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackChildView, { offsetAmount: offsetAmount, zIndex: zIndex, - key: key - }, child); + children: child + }, key); }); - return (0,external_React_.createElement)(ZStackView, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ZStackView, { ...otherProps, className: className, isLayered: isLayered, - ref: forwardedRef - }, clonedChildren); + ref: forwardedRef, + children: clonedChildren + }); } /** @@ -69944,13 +70306,13 @@ const ZStack = contextConnect(UnconnectedZStack, 'ZStack'); /* harmony default export */ const z_stack_component = (ZStack); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js - /** * WordPress dependencies */ + const defaultShortcuts = { previous: [{ modifier: 'ctrlShift', @@ -70053,14 +70415,14 @@ function useNavigateRegions(shortcuts = defaultShortcuts) { /* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({ shortcuts, ...props -}) => (0,external_React_.createElement)("div", { - ...useNavigateRegions(shortcuts) -}, (0,external_React_.createElement)(Component, { - ...props -})), 'navigateRegions')); +}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + ...useNavigateRegions(shortcuts), + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Component, { + ...props + }) +}), 'navigateRegions')); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js - /** * WordPress dependencies */ @@ -70074,19 +70436,20 @@ function useNavigateRegions(shortcuts = defaultShortcuts) { * navigate away from the wrapped component is implemented by other means, usually by pressing * the Escape key or using a specific UI control, e.g. a "Close" button. */ + const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) { const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); - return (0,external_React_.createElement)("div", { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { ref: ref, - tabIndex: -1 - }, (0,external_React_.createElement)(WrappedComponent, { - ...props - })); + tabIndex: -1, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { + ...props + }) + }); }, 'withConstrainedTabbing'); /* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js - /** * External dependencies */ @@ -70097,6 +70460,8 @@ const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigh */ + + /* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { return class extends external_wp_element_namespaceObject.Component { constructor(props) { @@ -70136,13 +70501,14 @@ const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigh } } render() { - const wrappedComponent = (0,external_React_.createElement)(WrappedComponent, { + const wrappedComponent = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { ...this.props, ...this.state.fallbackStyles }); - return this.props.node ? wrappedComponent : (0,external_React_.createElement)("div", { - ref: this.bindRef - }, " ", wrappedComponent, " "); + return this.props.node ? wrappedComponent : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", { + ref: this.bindRef, + children: [" ", wrappedComponent, " "] + }); } }; }, 'withFallbackStyles')); @@ -70150,13 +70516,13 @@ const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigh ;// CONCATENATED MODULE: external ["wp","hooks"] const external_wp_hooks_namespaceObject = window["wp"]["hooks"]; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js - /** * WordPress dependencies */ + const ANIMATION_FRAME_PERIOD = 16; /** @@ -70241,7 +70607,7 @@ function withFilters(hookName) { } } render() { - return (0,external_React_.createElement)(FilteredComponent, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FilteredComponent, { ...this.props }); } @@ -70280,7 +70646,6 @@ function withFilters(hookName) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js - /** * WordPress dependencies */ @@ -70296,6 +70661,7 @@ function withFilters(hookName) { * * @return Whether object is component-like. */ + function isComponentLike(object) { return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function'; } @@ -70320,11 +70686,12 @@ options => { } = {}) => WrappedComponent => { const WithFocusReturn = props => { const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn); - return (0,external_React_.createElement)("div", { - ref: ref - }, (0,external_React_.createElement)(WrappedComponent, { - ...props - })); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", { + ref: ref, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { + ...props + }) + }); }; return WithFocusReturn; }; @@ -70345,7 +70712,6 @@ const with_focus_return_Provider = ({ }; ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js - /** * External dependencies */ @@ -70361,6 +70727,7 @@ const with_focus_return_Provider = ({ * Internal dependencies */ + /** * Override the default edit UI to include notices if supported. * @@ -70422,16 +70789,16 @@ const with_focus_return_Provider = ({ ...props, noticeList, noticeOperations, - noticeUI: noticeList.length > 0 && (0,external_React_.createElement)(list, { + noticeUI: noticeList.length > 0 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(list, { className: "components-with-notices-ui", notices: noticeList, onRemove: noticeOperations.removeNotice }) }; - return isForwardRef ? (0,external_React_.createElement)(OriginalComponent, { + return isForwardRef ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, { ...propsOut, ref: ref - }) : (0,external_React_.createElement)(OriginalComponent, { + }) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(OriginalComponent, { ...propsOut }); } @@ -70448,94 +70815,6 @@ const with_focus_return_Provider = ({ return Component; }, 'withNotices')); -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/styles.js - -function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } -/** - * External dependencies - */ - - - -/** - * Internal dependencies - */ - -const animateProgressBar = emotion_react_browser_esm_keyframes({ - '0%': { - left: '-50%' - }, - '100%': { - left: '100%' - } -}); - -// Width of the indicator for the indeterminate progress bar -const INDETERMINATE_TRACK_WIDTH = 50; -const styles_Track = emotion_styled_base_browser_esm("div", true ? { - target: "e15u147w2" -} : 0)("position:relative;overflow:hidden;width:100%;max-width:160px;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusBlockUi, ";outline:2px solid transparent;outline-offset:2px;" + ( true ? "" : 0)); -const Indicator = emotion_styled_base_browser_esm("div", true ? { - target: "e15u147w1" -} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusBlockUi, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({ - isIndeterminate, - value -}) => isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({ - animationDuration: '1.5s', - animationTimingFunction: 'ease-in-out', - animationIterationCount: 'infinite', - animationName: animateProgressBar, - width: `${INDETERMINATE_TRACK_WIDTH}%` -}, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({ - width: `${value}%`, - transition: 'width 0.4s ease-in-out' -}, true ? "" : 0, true ? "" : 0), ";" + ( true ? "" : 0)); -const ProgressElement = emotion_styled_base_browser_esm("progress", true ? { - target: "e15u147w0" -} : 0)( true ? { - name: "11fb690", - styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%" -} : 0); - -;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/index.js - -/** - * External dependencies - */ - -/** - * WordPress dependencies - */ - - - -/** - * Internal dependencies - */ - -function UnforwardedProgressBar(props, ref) { - const { - className, - value, - ...progressProps - } = props; - const isIndeterminate = !Number.isFinite(value); - return (0,external_React_.createElement)(styles_Track, { - className: className - }, (0,external_React_.createElement)(Indicator, { - isIndeterminate: isIndeterminate, - value: value - }), (0,external_React_.createElement)(ProgressElement, { - max: 100, - value: value, - "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading …'), - ref: ref, - ...progressProps - })); -} -const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar); -/* harmony default export */ const progress_bar = (ProgressBar); - ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YGMEBI3A.js "use client"; @@ -70583,7 +70862,7 @@ var CheckboxCheckedContext = (0,external_React_.createContext)(false); // src/checkbox/checkbox-check.tsx -var checkmark = /* @__PURE__ */ (0,jsx_runtime.jsx)( +var checkmark = /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)( "svg", { display: "block", @@ -70595,7 +70874,7 @@ var checkmark = /* @__PURE__ */ (0,jsx_runtime.jsx)( viewBox: "0 0 16 16", height: "1em", width: "1em", - children: /* @__PURE__ */ (0,jsx_runtime.jsx)("polyline", { points: "4,8 7,12 12,4" }) + children: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)("polyline", { points: "4,8 7,12 12,4" }) } ); function getChildren(props) { @@ -71069,7 +71348,7 @@ var usePopoverDisclosure = createHook( }); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(PopoverScopedContextProvider, { value: store, children: element }), [store] ); props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { @@ -71341,12 +71620,12 @@ var useMenuButton = createHook( }); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuContextProvider, { value: store, children: element }), [store] ); if (hasParentMenu) { props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { - render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Role.div, { render: props.render }) + render: /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(Role.div, { render: props.render }) }); } const id = useId(props.id); @@ -71415,17 +71694,18 @@ if (false) {} ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js - /** * WordPress dependencies */ -const chevronRightSmall = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { + +const chevronRightSmall = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, { - d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z" -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, { + d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z" + }) +}); /* harmony default export */ const chevron_right_small = (chevronRightSmall); ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HHNFDKU2.js @@ -71542,7 +71822,7 @@ var useMenuList = createHook( }); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuScopedContextProvider, { value: store, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuScopedContextProvider, { value: store, children: element }), [store] ); const ariaLabelledBy = useAriaLabelledBy(_4R3V3JGP_spreadValues({ store }, props)); @@ -72247,7 +72527,7 @@ var useCheckbox = createHook( }); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }), [isChecked] ); props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ @@ -72486,7 +72766,7 @@ var useMenuItemRadio = createHook( const isChecked = store.useState((state) => state.values[name] === value); props = useWrapElement( props, - (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }), + (element) => /* @__PURE__ */ (0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }), [isChecked] ); props = _4R3V3JGP_spreadValues({ @@ -72698,16 +72978,16 @@ const styles_DropdownMenuCheckboxItem = /*#__PURE__*/emotion_styled_base_browser const styles_DropdownMenuRadioItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemRadio, true ? { target: "e1kdzosf9" } : 0)(baseItem, ";" + ( true ? "" : 0)); -const ItemPrefixWrapper = emotion_styled_base_browser_esm("span", true ? { +const ItemPrefixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1kdzosf8" } : 0)("grid-column:1;", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&{min-width:", space(6), ";}", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&,&:not( :empty ){margin-inline-end:", space(2), ";}display:flex;align-items:center;justify-content:center;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] )>&,[aria-disabled='true']>&{color:inherit;}" + ( true ? "" : 0)); -const DropdownMenuItemContentWrapper = emotion_styled_base_browser_esm("div", true ? { +const DropdownMenuItemContentWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1kdzosf7" } : 0)("grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:", space(3), ";pointer-events:none;" + ( true ? "" : 0)); -const DropdownMenuItemChildrenWrapper = emotion_styled_base_browser_esm("div", true ? { +const DropdownMenuItemChildrenWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1kdzosf6" } : 0)("flex:1;display:inline-flex;flex-direction:column;gap:", space(1), ";" + ( true ? "" : 0)); -const ItemSuffixWrapper = emotion_styled_base_browser_esm("span", true ? { +const ItemSuffixWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? { target: "e1kdzosf5" } : 0)("flex:0 1 fit-content;min-width:0;width:fit-content;display:flex;align-items:center;justify-content:center;gap:", space(3), ";color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &,[aria-disabled='true'] *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &{color:inherit;}" + ( true ? "" : 0)); const styles_DropdownMenuGroup = /*#__PURE__*/emotion_styled_base_browser_esm(menu_group_MenuGroup, true ? { @@ -72734,7 +73014,6 @@ const styles_DropdownMenuItemHelpText = /*#__PURE__*/emotion_styled_base_browser } : 0)("font-size:", font('helpText.fontSize'), ";line-height:16px;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &,[aria-disabled='true'] *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &{color:inherit;}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu-v2/index.js - /** * External dependencies */ @@ -72755,6 +73034,9 @@ const styles_DropdownMenuItemHelpText = /*#__PURE__*/emotion_styled_base_browser + + + const DropdownMenuContext = (0,external_wp_element_namespaceObject.createContext)(undefined); const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItem({ prefix, @@ -72764,13 +73046,22 @@ const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(func ...props }, ref) { const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext); - return (0,external_React_.createElement)(styles_DropdownMenuItem, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuItem, { ref: ref, ...props, accessibleWhenDisabled: true, hideOnClick: hideOnClick, - store: dropdownMenuContext?.store - }, (0,external_React_.createElement)(ItemPrefixWrapper, null, prefix), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix))); + store: dropdownMenuContext?.store, + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, { + children: prefix + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, { + children: children + }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { + children: suffix + })] + })] + }); }); const DropdownMenuCheckboxItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuCheckboxItem({ suffix, @@ -72779,34 +73070,43 @@ const DropdownMenuCheckboxItem = (0,external_wp_element_namespaceObject.forwardR ...props }, ref) { const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext); - return (0,external_React_.createElement)(styles_DropdownMenuCheckboxItem, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuCheckboxItem, { ref: ref, ...props, accessibleWhenDisabled: true, hideOnClick: hideOnClick, - store: dropdownMenuContext?.store - }, (0,external_React_.createElement)(MenuItemCheck, { store: dropdownMenuContext?.store, - render: (0,external_React_.createElement)(ItemPrefixWrapper, null) - // Override some ariakit inline styles - , - style: { - width: 'auto', - height: 'auto' - } - }, (0,external_React_.createElement)(build_module_icon, { - icon: library_check, - size: 24 - })), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix))); + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, { + store: dropdownMenuContext?.store, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {}) + // Override some ariakit inline styles + , + style: { + width: 'auto', + height: 'auto' + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: library_check, + size: 24 + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, { + children: children + }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { + children: suffix + })] + })] + }); }); -const radioCheck = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, { +const radioCheck = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, { xmlns: "http://www.w3.org/2000/svg", - viewBox: "0 0 24 24" -}, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Circle, { - cx: 12, - cy: 12, - r: 3 -})); + viewBox: "0 0 24 24", + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Circle, { + cx: 12, + cy: 12, + r: 3 + }) +}); const DropdownMenuRadioItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuRadioItem({ suffix, children, @@ -72814,29 +73114,37 @@ const DropdownMenuRadioItem = (0,external_wp_element_namespaceObject.forwardRef) ...props }, ref) { const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext); - return (0,external_React_.createElement)(styles_DropdownMenuRadioItem, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(styles_DropdownMenuRadioItem, { ref: ref, ...props, accessibleWhenDisabled: true, hideOnClick: hideOnClick, - store: dropdownMenuContext?.store - }, (0,external_React_.createElement)(MenuItemCheck, { store: dropdownMenuContext?.store, - render: (0,external_React_.createElement)(ItemPrefixWrapper, null) - // Override some ariakit inline styles - , - style: { - width: 'auto', - height: 'auto' - } - }, (0,external_React_.createElement)(build_module_icon, { - icon: radioCheck, - size: 24 - })), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix))); + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuItemCheck, { + store: dropdownMenuContext?.store, + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemPrefixWrapper, {}) + // Override some ariakit inline styles + , + style: { + width: 'auto', + height: 'auto' + }, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, { + icon: radioCheck, + size: 24 + }) + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(DropdownMenuItemContentWrapper, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuItemChildrenWrapper, { + children: children + }), suffix && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ItemSuffixWrapper, { + children: suffix + })] + })] + }); }); const DropdownMenuGroup = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuGroup(props, ref) { const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext); - return (0,external_React_.createElement)(styles_DropdownMenuGroup, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuGroup, { ref: ref, ...props, store: dropdownMenuContext?.store @@ -72912,44 +73220,50 @@ const dropdown_menu_v2_UnconnectedDropdownMenu = (props, ref) => { direction: computedDirection } }), [computedDirection]); - return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(MenuButton, { - ref: ref, - store: dropdownMenuStore, - render: dropdownMenuStore.parent ? (0,external_wp_element_namespaceObject.cloneElement)(trigger, { - // Add submenu arrow, unless a `suffix` is explicitly specified - suffix: (0,external_React_.createElement)(external_React_.Fragment, null, trigger.props.suffix, (0,external_React_.createElement)(SubmenuChevronIcon, { - "aria-hidden": "true", - icon: chevron_right_small, - size: 24, - preserveAspectRatio: "xMidYMid slice" - })) - }) : trigger - }), (0,external_React_.createElement)(dropdown_menu_v2_styles_DropdownMenu, { - ...otherProps, - modal: modal, - store: dropdownMenuStore - // Root menu has an 8px distance from its trigger, - // otherwise 0 (which causes the submenu to slightly overlap) - , - gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8 - // Align nested menu by the same (but opposite) amount - // as the menu container's padding. - , - shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0, - hideOnHoverOutside: false, - "data-side": appliedPlacementSide, - variant: variant, - wrapperProps: wrapperProps, - hideOnEscape: hideOnEscape, - unmountOnHide: true - }, (0,external_React_.createElement)(DropdownMenuContext.Provider, { - value: contextValue - }, children))); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MenuButton, { + ref: ref, + store: dropdownMenuStore, + render: dropdownMenuStore.parent ? (0,external_wp_element_namespaceObject.cloneElement)(trigger, { + // Add submenu arrow, unless a `suffix` is explicitly specified + suffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, { + children: [trigger.props.suffix, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SubmenuChevronIcon, { + "aria-hidden": "true", + icon: chevron_right_small, + size: 24, + preserveAspectRatio: "xMidYMid slice" + })] + }) + }) : trigger + }), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_menu_v2_styles_DropdownMenu, { + ...otherProps, + modal: modal, + store: dropdownMenuStore + // Root menu has an 8px distance from its trigger, + // otherwise 0 (which causes the submenu to slightly overlap) + , + gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8 + // Align nested menu by the same (but opposite) amount + // as the menu container's padding. + , + shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0, + hideOnHoverOutside: false, + "data-side": appliedPlacementSide, + variant: variant, + wrapperProps: wrapperProps, + hideOnEscape: hideOnEscape, + unmountOnHide: true, + children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(DropdownMenuContext.Provider, { + value: contextValue, + children: children + }) + })] + }); }; const dropdown_menu_v2_DropdownMenu = contextConnect(dropdown_menu_v2_UnconnectedDropdownMenu, 'DropdownMenu'); const DropdownMenuSeparator = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuSeparator(props, ref) { const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext); - return (0,external_React_.createElement)(styles_DropdownMenuSeparator, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuSeparator, { ref: ref, ...props, store: dropdownMenuContext?.store, @@ -72957,14 +73271,14 @@ const DropdownMenuSeparator = (0,external_wp_element_namespaceObject.forwardRef) }); }); const DropdownMenuItemLabel = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemLabel(props, ref) { - return (0,external_React_.createElement)(styles_DropdownMenuItemLabel, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuItemLabel, { numberOfLines: 1, ref: ref, ...props }); }); const DropdownMenuItemHelpText = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemHelpText(props, ref) { - return (0,external_React_.createElement)(styles_DropdownMenuItemHelpText, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_DropdownMenuItemHelpText, { numberOfLines: 2, ref: ref, ...props @@ -72990,7 +73304,7 @@ const colorVariables = ({ const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join(''); return [/*#__PURE__*/emotion_react_browser_esm_css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + ( true ? "" : 0), true ? "" : 0)]; }; -const theme_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { +const theme_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "e1krjpvb0" } : 0)( true ? { name: "1a3idx0", @@ -73053,7 +73367,9 @@ function warnContrastIssues(issues) { } } function generateAccentDependentColors(accent) { - if (!accent) return {}; + if (!accent) { + return {}; + } return { accent, accentDarker10: w(accent).darken(0.1).toHex(), @@ -73062,7 +73378,9 @@ function generateAccentDependentColors(accent) { }; } function generateBackgroundDependentColors(background) { - if (!background) return {}; + if (!background) { + return {}; + } const foreground = getForegroundForColor(background); return { background, @@ -73100,7 +73418,6 @@ function generateShades(background, foreground) { } ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/index.js - /** * WordPress dependencies */ @@ -73133,6 +73450,7 @@ function generateShades(background, foreground) { * }; * ``` */ + function Theme({ accent, background, @@ -73144,7 +73462,7 @@ function Theme({ accent, background })), className), [accent, background, className, cx]); - return (0,external_React_.createElement)(theme_styles_Wrapper, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(theme_styles_Wrapper, { className: classes, ...props }); @@ -73166,7 +73484,6 @@ const useTabsContext = () => (0,external_wp_element_namespaceObject.useContext)( ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/styles.js -function tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /** * External dependencies */ @@ -73179,22 +73496,17 @@ function tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t */ - -const TabListWrapper = emotion_styled_base_browser_esm("div", true ? { +const TabListWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? { target: "enfox0g2" -} : 0)( true ? { - name: "xbm4q1", - styles: "display:flex;align-items:stretch;flex-direction:row;&[aria-orientation='vertical']{flex-direction:column;}" -} : 0); +} : 0)("position:relative;display:flex;align-items:stretch;flex-direction:row;&[aria-orientation='vertical']{flex-direction:column;}@media not ( prefers-reduced-motion: reduce ){&.is-animation-enabled::after{transition-property:left,top,width,height;transition-duration:0.2s;transition-timing-function:ease-out;}}&::after{content:'';position:absolute;pointer-events:none;outline:2px solid transparent;outline-offset:-1px;}&:not( [aria-orientation='vertical'] )::after{left:var( --indicator-left );bottom:0;width:var( --indicator-width );height:0;border-bottom:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}&[aria-orientation='vertical']::after{opacity:0;right:0;top:var( --indicator-top );height:var( --indicator-height );border-right:var( --wp-admin-border-width-focus ) solid ", COLORS.theme.accent, ";}" + ( true ? "" : 0)); const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab, true ? { target: "enfox0g1" -} : 0)("&{display:inline-flex;align-items:center;position:relative;border-radius:0;height:", space(12), ";background:transparent;border:none;box-shadow:none;cursor:pointer;padding:3px ", space(4), ";margin-left:0;font-weight:500;&[aria-disabled='true']{cursor:default;opacity:0.3;}&:hover{color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){position:relative;box-shadow:none;outline:none;}&::after{content:'';position:absolute;right:0;bottom:0;left:0;pointer-events:none;background:", COLORS.theme.accent, ";height:calc( 0 * var( --wp-admin-border-width-focus ) );border-radius:0;transition:all 0.1s linear;", reduceMotion('transition'), ";}&[aria-selected='true']::after{height:calc( 1 * var( --wp-admin-border-width-focus ) );outline:2px solid transparent;outline-offset:-1px;}&::before{content:'';position:absolute;top:", space(3), ";right:", space(3), ";bottom:", space(3), ";left:", space(3), ";pointer-events:none;box-shadow:0 0 0 0 transparent;border-radius:2px;transition:all 0.1s linear;", reduceMotion('transition'), ";}&:focus-visible::before{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;}}" + ( true ? "" : 0)); +} : 0)("&{display:inline-flex;align-items:center;position:relative;border-radius:0;height:", space(12), ";background:transparent;border:none;box-shadow:none;cursor:pointer;padding:3px ", space(4), ";margin-left:0;font-weight:500;&[aria-disabled='true']{cursor:default;opacity:0.3;}&:hover{color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){position:relative;box-shadow:none;outline:none;}&::before{content:'';position:absolute;top:", space(3), ";right:", space(3), ";bottom:", space(3), ";left:", space(3), ";pointer-events:none;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";border-radius:2px;opacity:0;@media not ( prefers-reduced-motion ){transition:opacity 0.1s linear;}}&:focus-visible::before{opacity:1;outline:2px solid transparent;}}" + ( true ? "" : 0)); const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel, true ? { target: "enfox0g0" } : 0)("&:focus{box-shadow:none;outline:none;}&:focus-visible{border-radius:2px;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0)); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tab.js - /** * WordPress dependencies */ @@ -73208,6 +73520,7 @@ const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel, + const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab({ children, tabId, @@ -73225,18 +73538,18 @@ const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab( instanceId } = context; const instancedTabId = `${instanceId}-${tabId}`; - return (0,external_React_.createElement)(styles_Tab, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_Tab, { ref: ref, store: store, id: instancedTabId, disabled: disabled, render: render, - ...otherProps - }, children); + ...otherProps, + children: children + }); }); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tablist.js - /** * External dependencies */ @@ -73255,11 +73568,94 @@ const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab( + + +function useTrackElementOffset(targetElement, onUpdate) { + const [indicatorPosition, setIndicatorPosition] = (0,external_wp_element_namespaceObject.useState)({ + left: 0, + top: 0, + width: 0, + height: 0 + }); + + // TODO: replace with useEventCallback or similar when officially available. + const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate); + (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { + updateCallbackRef.current = onUpdate; + }); + const observedElementRef = (0,external_wp_element_namespaceObject.useRef)(); + const resizeObserverRef = (0,external_wp_element_namespaceObject.useRef)(); + (0,external_wp_element_namespaceObject.useEffect)(() => { + if (targetElement === observedElementRef.current) { + return; + } + observedElementRef.current = targetElement !== null && targetElement !== void 0 ? targetElement : undefined; + function updateIndicator(element) { + setIndicatorPosition({ + // Workaround to prevent unwanted scrollbars, see: + // https://github.com/WordPress/gutenberg/pull/61979 + left: Math.max(element.offsetLeft - 1, 0), + top: Math.max(element.offsetTop - 1, 0), + width: parseFloat(getComputedStyle(element).width), + height: parseFloat(getComputedStyle(element).height) + }); + updateCallbackRef.current?.(); + } + + // Set up a ResizeObserver. + if (!resizeObserverRef.current) { + resizeObserverRef.current = new ResizeObserver(() => { + if (observedElementRef.current) { + updateIndicator(observedElementRef.current); + } + }); + } + const { + current: resizeObserver + } = resizeObserverRef; + + // Observe new element. + if (targetElement) { + updateIndicator(targetElement); + resizeObserver.observe(targetElement); + } + return () => { + // Unobserve previous element. + if (observedElementRef.current) { + resizeObserver.unobserve(observedElementRef.current); + } + }; + }, [targetElement]); + return indicatorPosition; +} +function useOnValueUpdate(value, onUpdate) { + const previousValueRef = (0,external_wp_element_namespaceObject.useRef)(value); + + // TODO: replace with useEventCallback or similar when officially available. + const updateCallbackRef = (0,external_wp_element_namespaceObject.useRef)(onUpdate); + (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { + updateCallbackRef.current = onUpdate; + }); + (0,external_wp_element_namespaceObject.useEffect)(() => { + if (previousValueRef.current !== value) { + updateCallbackRef.current({ + previousValue: previousValueRef.current + }); + previousValueRef.current = value; + } + }, [value]); +} const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({ children, ...otherProps }, ref) { const context = useTabsContext(); + const selectedId = context?.store.useState('selectedId'); + const indicatorPosition = useTrackElementOffset(context?.store.item(selectedId)?.element); + const [animationEnabled, setAnimationEnabled] = (0,external_wp_element_namespaceObject.useState)(false); + useOnValueUpdate(selectedId, ({ + previousValue + }) => previousValue && setAnimationEnabled(true)); if (!context) { true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0; return null; @@ -73268,7 +73664,6 @@ const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabL store } = context; const { - selectedId, activeId, selectOnMove } = store.useState(); @@ -73288,17 +73683,31 @@ const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabL setActiveId(selectedId); } }; - return (0,external_React_.createElement)(tab_list_TabList, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tab_list_TabList, { ref: ref, store: store, - render: (0,external_React_.createElement)(TabListWrapper, null), + render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabListWrapper, { + onTransitionEnd: event => { + if (event.pseudoElement === '::after') { + setAnimationEnabled(false); + } + } + }), onBlur: onBlur, - ...otherProps - }, children); + ...otherProps, + style: { + '--indicator-left': `${indicatorPosition.left}px`, + '--indicator-top': `${indicatorPosition.top}px`, + '--indicator-width': `${indicatorPosition.width}px`, + '--indicator-height': `${indicatorPosition.height}px`, + ...otherProps.style + }, + className: dist_clsx(animationEnabled ? 'is-animation-enabled' : '', otherProps.className), + children: children + }); }); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js - /** * WordPress dependencies */ @@ -73312,6 +73721,7 @@ const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabL + const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(function TabPanel({ children, tabId, @@ -73329,7 +73739,7 @@ const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(fun } = context; const instancedTabId = `${instanceId}-${tabId}`; const selectedId = store.useState(state => state.selectedId); - return (0,external_React_.createElement)(styles_TabPanel, { + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_TabPanel, { ref: ref, store: store // For TabPanel, the id passed here is the id attribute of the DOM @@ -73339,12 +73749,12 @@ const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(fun id: `${instancedTabId}-view`, tabId: instancedTabId, focusable: focusable, - ...otherProps - }, selectedId === instancedTabId && children); + ...otherProps, + children: selectedId === instancedTabId && children + }); }); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/index.js - /** * External dependencies */ @@ -73365,9 +73775,10 @@ const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(fun + function Tabs({ selectOnMove = true, - initialTabId, + defaultTabId, orientation = 'horizontal', onSelect, children, @@ -73377,7 +73788,7 @@ function Tabs({ const store = useTabStore({ selectOnMove, orientation, - defaultSelectedId: initialTabId && `${instanceId}-${initialTabId}`, + defaultSelectedId: defaultTabId && `${instanceId}-${defaultTabId}`, setSelectedId: selectedId => { const strippedDownId = typeof selectedId === 'string' ? selectedId.replace(`${instanceId}-`, '') : selectedId; onSelect?.(strippedDownId); @@ -73407,7 +73818,7 @@ function Tabs({ // Ariakit internally refers to disabled tabs as `dimmed`. return !item.dimmed; }); - const initialTab = items.find(item => item.id === `${instanceId}-${initialTabId}`); + const initialTab = items.find(item => item.id === `${instanceId}-${defaultTabId}`); // Handle selecting the initial tab. (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { @@ -73418,8 +73829,8 @@ function Tabs({ // Wait for the denoted initial tab to be declared before making a // selection. This ensures that if a tab is declared lazily it can // still receive initial selection, as well as ensuring no tab is - // selected if an invalid `initialTabId` is provided. - if (initialTabId && !initialTab) { + // selected if an invalid `defaultTabId` is provided. + if (defaultTabId && !initialTab) { return; } @@ -73437,7 +73848,7 @@ function Tabs({ setSelectedId(null); } } - }, [firstEnabledTab, initialTab, initialTabId, isControlled, items, selectedId, setSelectedId]); + }, [firstEnabledTab, initialTab, defaultTabId, isControlled, items, selectedId, setSelectedId]); // Handle the currently selected tab becoming disabled. (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { @@ -73453,7 +73864,7 @@ function Tabs({ } // If the currently selected tab becomes disabled, fall back to the - // `initialTabId` if possible. Otherwise select the first + // `defaultTabId` if possible. Otherwise select the first // enabled tab (if there is one). if (initialTab && !initialTab.dimmed) { setSelectedId(initialTab.id); @@ -73477,6 +73888,13 @@ function Tabs({ } }, [isControlled, selectedTab, selectedTabId, setSelectedId]); (0,external_wp_element_namespaceObject.useEffect)(() => { + // If there is no active tab, fallback to place focus on the first enabled tab + // so there is always an active element + if (selectedTabId === null && !activeId && firstEnabledTab?.id) { + setActiveId(firstEnabledTab.id); + } + }, [selectedTabId, activeId, firstEnabledTab?.id, setActiveId]); + (0,external_wp_element_namespaceObject.useEffect)(() => { if (!isControlled) { return; } @@ -73499,9 +73917,10 @@ function Tabs({ store, instanceId }), [store, instanceId]); - return (0,external_React_.createElement)(TabsContext.Provider, { - value: contextValue - }, children); + return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(TabsContext.Provider, { + value: contextValue, + children: children + }); } Tabs.TabList = TabList; Tabs.Tab = tab_Tab; @@ -73519,7 +73938,7 @@ const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"]; const { lock, unlock -} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/components'); +} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/components'); ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/private-apis.js /** @@ -73539,7 +73958,6 @@ const { - const privateApis = {}; lock(privateApis, { CompositeV2: Composite, @@ -73551,7 +73969,6 @@ lock(privateApis, { __experimentalPopoverLegacyPositionToPlacement: positionToPlacement, createPrivateSlotFill: createPrivateSlotFill, ComponentsContext: ComponentsContext, - ProgressBar: progress_bar, Tabs: tabs, Theme: theme, DropdownMenuV2: dropdown_menu_v2_DropdownMenu, @@ -73688,6 +74105,7 @@ lock(privateApis, { + // Higher-Order Components. |