From fc0a79914946dac00ccd51b1aacffe267de7210e Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Thu, 19 Sep 2024 06:51:22 +0200 Subject: Merging upstream version 6.6.1+dfsg1. Signed-off-by: Daniel Baumann --- wp-includes/js/dist/components.js | 23166 ++++++++++++++++++------------------ 1 file changed, 11792 insertions(+), 11374 deletions(-) (limited to 'wp-includes/js/dist/components.js') 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) => { @@ -206,598 +140,6 @@ var deepmerge_1 = deepmerge; 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: @@ -1781,38 +1123,6 @@ var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; 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: @@ -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 { 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} */{}); 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); } @@ -14546,6 +13862,29 @@ var createStyled = function createStyled(tag, options) { * External dependencies */ +/** + * 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/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/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/animation/animators/waapi/easing.mjs -function isWaapiSupportedEasing(easing) { - return Boolean(!easing || - (typeof easing === "string" && supportedWaapiEasing[easing]) || - isBezierDefinition(easing) || - (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))); +;// 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; } -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 mapEasingToNativeEasing(easing) { - if (!easing) - return undefined; - return isBezierDefinition(easing) - ? cubicBezierAsString(easing) - : Array.isArray(easing) - ? easing.map(mapEasingToNativeEasing) - : supportedWaapiEasing[easing]; +function getValueTransition(transition, key) { + return (transition[key] || + transition["default"] || + transition); } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.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", - }); -} +;// 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/animators/waapi/utils/get-final-keyframe.mjs -function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) { +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 - : keyframes.length - 1; - return keyframes[index]; + : resolvedKeyframes.length - 1; + return !index || finalKeyframe === undefined + ? resolvedKeyframes[index] + : finalKeyframe; } -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/sync-time.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); + +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/easing/ease.mjs +;// 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); -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/animation/utils/is-none.mjs -;// 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"; -}; +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/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/utils/errors.mjs +let warning = noop_noop; +let errors_invariant = noop_noop; +if (false) {} -;// 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/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/circ.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-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 +/** + * 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/render/dom/utils/unit-conversion.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 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; -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/test.mjs +/** + * Tests a provided value against a ValueType + */ +const testValueType = (v) => (type) => type.test(v); -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/map.mjs +;// 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 -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); + +/** + * 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 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", }) { - /** - * Easing functions can be externally defined as strings. Here we convert them - * into actual functions. - */ - const easingFunctions = isEasingArray(ease) - ? ease.map(easingDefinitionToFunction) - : easingDefinitionToFunction(ease); +function canAnimate(keyframes, name, type, velocity) { /** - * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator - * to reduce GC during animation. + * 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 state = { - done: false, - value: keyframeValues[0], - }; + const originKeyframe = keyframes[0]; + if (originKeyframe === null) + return false; /** - * Create a times array based on the provided 0-1 offsets + * 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 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; - }, - }; + 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(); + } + /** + * 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. + */ + 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,27 @@ 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 +20257,186 @@ 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,626 +20487,512 @@ 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 (!animationDriver) - animationDriver = driver(tick); - const now = animationDriver.now(); + } + if (this.isStopped) + return; + 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(); - } - 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; -} - - - -;// 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/animators/waapi/create-accelerated-animation.mjs - - - - - - - - - -const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")); -/** - * A list of values that can be hardware-accelerated. - */ -const acceleratedValues = new Set([ - "opacity", - "clipPath", - "filter", - "transform", - "backgroundColor", -]); -/** - * 10ms is chosen here as it strikes a balance between smooth - * results (more than one keyframe per frame at 60fps) and - * keyframe quantity. - */ -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; - /** - * TODO: Unify with js/index - */ - 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 { 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 = []; - /** - * Bail after 20 seconds of pre-generated keyframes as it's likely - * we're heading for an infinite loop. - */ - let t = 0; - while (!state.done && t < create_accelerated_animation_maxDuration) { - state = sampleAnimation.sample(t); - pregeneratedKeyframes.push(state.value); - t += sampleDelta; - } - 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. - */ - 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; - /** - * 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. - */ - 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. - */ - 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), - }; - }; - 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; - } - 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; + */ + this.state = "running"; + this.driver.start(); + } + 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); } - 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; - }, -}; - +// Legacy interface +function animateValue(options) { + return new MainThreadAnimation(options); +} -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; -/** - * 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/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/render/dom/value-types/animatable-none.mjs +;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.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; +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/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/animators/AcceleratedAnimation.mjs -;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs -function isNone(value) { - if (typeof value === "number") { - return value === 0; - } - else if (value !== null) { - return value === "none" || value === "0" || isZeroValueString(value); - } -} -;// 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]; +const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")); +/** + * A list of values that can be hardware-accelerated. + */ +const acceleratedValues = new Set([ + "opacity", + "clipPath", + "filter", + "transform", + // 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 + * results (more than one keyframe per frame at 60fps) and + * keyframe quantity. + */ +const sampleDelta = 10; //ms +/** + * Implement a practical max duration for keyframe generation + * to prevent infinite loops + */ +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) { + /** + * Create a main-thread animation to pregenerate keyframes. + * We sample this at regular intervals to generate keyframes that we then + * linearly interpolate between. + */ + const sampleAnimation = new MainThreadAnimation({ + ...options, + keyframes, + repeat: 0, + delay: 0, + isGenerator: true, + }); + let state = { done: false, value: keyframes[0] }; + const pregeneratedKeyframes = []; + /** + * Bail after 20 seconds of pre-generated keyframes as it's likely + * we're heading for an infinite loop. + */ + let t = 0; + while (!state.done && t < AcceleratedAnimation_maxDuration) { + state = sampleAnimation.sample(t); + pregeneratedKeyframes.push(state.value); + t += sampleDelta; } - else { - keyframes = [null, target]; + return { + times: undefined, + keyframes: pregeneratedKeyframes, + duration: t - sampleDelta, + ease: "linear", + }; +} +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(); } - const defaultOrigin = transition.from !== undefined ? transition.from : value.get(); - let animatableTemplateValue = undefined; - const noneKeyframeIndexes = []; - for (let i = 0; i < keyframes.length; i++) { + initPlayback(keyframes, finalKeyframe) { + var _a; + let { duration = 300, times, ease, type, motionValue, name, } = this.options; + /** + * If element has since been unmounted, return false to indicate + * the animation failed to initialised. + */ + if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) { + return false; + } /** - * Fill null/wildcard keyframes + * If this animation needs pre-generated keyframes then generate. */ - if (keyframes[i] === null) { - keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1]; + 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 { + /** + * 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 = () => { + const { onComplete } = this.options; + motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe)); + onComplete && onComplete(); + this.cancel(); + this.resolveFinishedPromise(); + }; + } + return { + animation, + duration, + times, + type, + ease, + keyframes: keyframes, + }; + } + get duration() { + const { resolved } = this; + if (!resolved) + return 0; + const { duration } = resolved; + return millisecondsToSeconds(duration); + } + get time() { + const { resolved } = this; + if (!resolved) + return 0; + const { animation } = resolved; + return millisecondsToSeconds(animation.currentTime || 0); + } + set time(newTime) { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.currentTime = secondsToMilliseconds(newTime); + } + get speed() { + const { resolved } = this; + if (!resolved) + return 1; + const { animation } = resolved; + return animation.playbackRate; + } + set speed(newSpeed) { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.playbackRate = newSpeed; + } + get state() { + const { resolved } = this; + if (!resolved) + return "idle"; + const { animation } = resolved; + return animation.playState; + } + /** + * 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(); } - if (isTargetAnimatable && - noneKeyframeIndexes.length && - animatableTemplateValue) { - for (let i = 0; i < noneKeyframeIndexes.length; i++) { - const index = noneKeyframeIndexes[i]; - keyframes[index] = animatable_none_getAnimatableNone(valueName, animatableTemplateValue); + pause() { + const { resolved } = this; + if (!resolved) + return; + const { animation } = resolved; + animation.pause(); + } + 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) { @@ -23973,10 +24051,13 @@ 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 @@ -25959,6 +25749,12 @@ const visualElementStore = new WeakMap(); + + + + + + @@ -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, @@ -26237,16 +26055,6 @@ class VisualElement { setStaticValue(key, value) { 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=.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=.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 { - 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 ( - * - * ) - * } - * ``` - * - * @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; }, @@ -34182,29 +33173,19 @@ const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(in /* harmony default export */ const slot_fill_context = (SlotFillContext); ;// 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=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:e0: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,\')}.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=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:e0: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,\')}.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 { - 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