PageSourceSearch

https://www.wing2x4.co.jp/modules/contrib/gutenberg/js/vendor/gutenberg/components/index.js?tm6kjg

js wing2x4.co.jp collected 2026-10-08 20:41:43 UTC 2,807,108 bytes, 82,084 lines download raw bytes

1/******/ (() => { // webpackBootstrap
2/******/ 	var __webpack_modules__ = ({
3
4/***/ 4403:
5/***/ ((module, exports) => {
6
7var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
8  Copyright (c) 2018 Jed Watson.
9  Licensed under the MIT License (MIT), see
10  http://jedwatson.github.io/classnames
11*/
12/* global define */
13
14(function () {
15	'use strict';
16
17	var hasOwn = {}.hasOwnProperty;
18
19	function classNames() {
20		var classes = [];
21
22		for (var i = 0; i < arguments.length; i++) {
23			var arg = arguments[i];
24			if (!arg) continue;
25
26			var argType = typeof arg;
27
28			if (argType === 'string' || argType === 'number') {
29				classes.push(arg);
30			} else if (Array.isArray(arg)) {
31				if (arg.length) {
32					var inner = classNames.apply(null, arg);
33					if (inner) {
34						classes.push(inner);
35					}
36				}
37			} else if (argType === 'object') {
38				if (arg.toString === Object.prototype.toString) {
39					for (var key in arg) {
40						if (hasOwn.call(arg, key) && arg[key]) {
41							classes.push(key);
42						}
43					}
44				} else {
45					classes.push(arg.toString());
46				}
47			}
48		}
49
50		return classes.join(' ');
51	}
52
53	if ( true && module.exports) {
54		classNames.default = classNames;
55		module.exports = classNames;
56	} else if (true) {
57		// register as 'classnames', consistent with npm package name
58		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
59			return classNames;
60		}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
61		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
62	} else {}
63}());
64
65
66/***/ }),
67
68/***/ 1919:
69/***/ ((module) => {
70
71"use strict";
72
73
74var isMergeableObject = function isMergeableObject(value) {
75	return isNonNullObject(value)
76		&& !isSpecial(value)
77};
78
79function isNonNullObject(value) {
80	return !!value && typeof value === 'object'
81}
82
83function isSpecial(value) {
84	var stringValue = Object.prototype.toString.call(value);
85
86	return stringValue === '[object RegExp]'
87		|| stringValue === '[object Date]'
88		|| isReactElement(value)
89}
90
91// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
92var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
93var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
94
95function isReactElement(value) {
96	return value.$$typeof === REACT_ELEMENT_TYPE
97}
98
99function emptyTarget(val) {
100	return Array.isArray(val) ? [] : {}
101}
102
103function cloneUnlessOtherwiseSpecified(value, options) {
104	return (options.clone !== false && options.isMergeableObject(value))
105		? deepmerge(emptyTarget(value), value, options)
106		: value
107}
108
109function defaultArrayMerge(target, source, options) {
110	return target.concat(source).map(function(element) {
111		return cloneUnlessOtherwiseSpecified(element, options)
112	})
113}
114
115function getMergeFunction(key, options) {
116	if (!options.customMerge) {
117		return deepmerge
118	}
119	var customMerge = options.customMerge(key);
120	return typeof customMerge === 'function' ? customMerge : deepmerge
121}
122
123function getEnumerableOwnPropertySymbols(target) {
124	return Object.getOwnPropertySymbols
125		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
126			return Object.propertyIsEnumerable.call(target, symbol)
127		})
128		: []
129}
130
131function getKeys(target) {
132	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
133}
134
135function propertyIsOnObject(object, property) {
136	try {
137		return property in object
138	} catch(_) {
139		return false
140	}
141}
142
143// Protects from prototype poisoning and unexpected merging up the prototype chain.
144function propertyIsUnsafe(target, key) {
145	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
146		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
147			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
148}
149
150function mergeObject(target, source, options) {
151	var destination = {};
152	if (options.isMergeableObject(target)) {
153		getKeys(target).forEach(function(key) {
154			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
155		});
156	}
157	getKeys(source).forEach(function(key) {
158		if (propertyIsUnsafe(target, key)) {
159			return
160		}
161
162		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
163			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
164		} else {
165			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
166		}
167	});
168	return destination
169}
170
171function deepmerge(target, source, options) {
172	options = options || {};
173	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
174	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
175	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
176	// implementations can use it. The caller may not replace it.
177	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
178
179	var sourceIsArray = Array.isArray(source);
180	var targetIsArray = Array.isArray(target);
181	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
182
183	if (!sourceAndTargetTypesMatch) {
184		return cloneUnlessOtherwiseSpecified(source, options)
185	} else if (sourceIsArray) {
186		return options.arrayMerge(target, source, options)
187	} else {
188		return mergeObject(target, source, options)
189	}
190}
191
192deepmerge.all = function deepmergeAll(array, options) {
193	if (!Array.isArray(array)) {
194		throw new Error('first argument should be an array')
195	}
196
197	return array.reduce(function(prev, next) {
198		return deepmerge(prev, next, options)
199	}, {})
200};
201
202var deepmerge_1 = deepmerge;
203
204module.exports = deepmerge_1;
205
206
207/***/ }),
208
209/***/ 1345:
210/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
211
212"use strict";
213
214
215var util = __webpack_require__(5022);
216
217function scrollIntoView(elem, container, config) {
218  config = config || {};
219  // document 归一化到 window
220  if (container.nodeType === 9) {
221    container = util.getWindow(container);
222  }
223
224  var allowHorizontalScroll = config.allowHorizontalScroll;
225  var onlyScrollIfNeeded = config.onlyScrollIfNeeded;
226  var alignWithTop = config.alignWithTop;
227  var alignWithLeft = config.alignWithLeft;
228  var offsetTop = config.offsetTop || 0;
229  var offsetLeft = config.offsetLeft || 0;
230  var offsetBottom = config.offsetBottom || 0;
231  var offsetRight = config.offsetRight || 0;
232
233  allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll;
234
235  var isWin = util.isWindow(container);
236  var isFramed = !!(isWin && container.frameElement);
237  var elemOffset = util.offset(elem);
238  var eh = util.outerHeight(elem);
239  var ew = util.outerWidth(elem);
240  var containerOffset = undefined;
241  var ch = undefined;
242  var cw = undefined;
243  var containerScroll = undefined;
244  var diffTop = undefined;
245  var diffBottom = undefined;
246  var win = undefined;
247  var winScroll = undefined;
248  var ww = undefined;
249  var wh = undefined;
250
251  if (isFramed) {
252    container = container.document.scrollingElement || container.document.body;
253  }
254
255  if (isWin || isFramed) {
256    win = container;
257    wh = util.height(win);
258    ww = util.width(win);
259    winScroll = {
260      left: util.scrollLeft(win),
261      top: util.scrollTop(win)
262    };
263    // elem 相对 container 可视视窗的距离
264    diffTop = {
265      left: elemOffset.left - winScroll.left - offsetLeft,
266      top: elemOffset.top - winScroll.top - offsetTop
267    };
268    diffBottom = {
269      left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight,
270      top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom
271    };
272    containerScroll = winScroll;
273  } else {
274    containerOffset = util.offset(container);
275    ch = container.clientHeight;
276    cw = container.clientWidth;
277    containerScroll = {
278      left: container.scrollLeft,
279      top: container.scrollTop
280    };
281    // elem 相对 container 可视视窗的距离
282    // 注意边框, offset 是边框到根节点
283    diffTop = {
284      left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft,
285      top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop
286    };
287    diffBottom = {
288      left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight,
289      top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom
290    };
291  }
292
293  if (diffTop.top < 0 || diffBottom.top > 0) {
294    // 强制向上
295    if (alignWithTop === true) {
296      util.scrollTop(container, containerScroll.top + diffTop.top);
297    } else if (alignWithTop === false) {
298      util.scrollTop(container, containerScroll.top + diffBottom.top);
299    } else {
300      // 自动调整
301      if (diffTop.top < 0) {
302        util.scrollTop(container, containerScroll.top + diffTop.top);
303      } else {
304        util.scrollTop(container, containerScroll.top + diffBottom.top);
305      }
306    }
307  } else {
308    if (!onlyScrollIfNeeded) {
309      alignWithTop = alignWithTop === undefined ? true : !!alignWithTop;
310      if (alignWithTop) {
311        util.scrollTop(container, containerScroll.top + diffTop.top);
312      } else {
313        util.scrollTop(container, containerScroll.top + diffBottom.top);
314      }
315    }
316  }
317
318  if (allowHorizontalScroll) {
319    if (diffTop.left < 0 || diffBottom.left > 0) {
320      // 强制向上
321      if (alignWithLeft === true) {
322        util.scrollLeft(container, containerScroll.left + diffTop.left);
323      } else if (alignWithLeft === false) {
324        util.scrollLeft(container, containerScroll.left + diffBottom.left);
325      } else {
326        // 自动调整
327        if (diffTop.left < 0) {
328          util.scrollLeft(container, containerScroll.left + diffTop.left);
329        } else {
330          util.scrollLeft(container, containerScroll.left + diffBottom.left);
331        }
332      }
333    } else {
334      if (!onlyScrollIfNeeded) {
335        alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft;
336        if (alignWithLeft) {
337          util.scrollLeft(container, containerScroll.left + diffTop.left);
338        } else {
339          util.scrollLeft(container, containerScroll.left + diffBottom.left);
340        }
341      }
342    }
343  }
344}
345
346module.exports = scrollIntoView;
347
348/***/ }),
349
350/***/ 5425:
351/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
352
353"use strict";
354
355
356module.exports = __webpack_require__(1345);
357
358/***/ }),
359
360/***/ 5022:
361/***/ ((module) => {
362
363"use strict";
364
365
366var _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; };
367
368var _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; };
369
370var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source;
371
372function getClientPosition(elem) {
373  var box = undefined;
374  var x = undefined;
375  var y = undefined;
376  var doc = elem.ownerDocument;
377  var body = doc.body;
378  var docElem = doc && doc.documentElement;
379  // 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式
380  box = elem.getBoundingClientRect();
381
382  // 注:jQuery 还考虑减去 docElem.clientLeft/clientTop
383  // 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确
384  // 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin
385
386  x = box.left;
387  y = box.top;
388
389  // In IE, most of the time, 2 extra pixels are added to the top and left
390  // due to the implicit 2-pixel inset border.  In IE6/7 quirks mode and
391  // IE6 standards mode, this border can be overridden by setting the
392  // document element's border to zero -- thus, we cannot rely on the
393  // offset always being 2 pixels.
394
395  // In quirks mode, the offset can be determined by querying the body's
396  // clientLeft/clientTop, but in standards mode, it is found by querying
397  // the document element's clientLeft/clientTop.  Since we already called
398  // getClientBoundingRect we have already forced a reflow, so it is not
399  // too expensive just to query them all.
400
401  // ie 下应该减去窗口的边框吧,毕竟默认 absolute 都是相对窗口定位的
402  // 窗口边框标准是设 documentElement ,quirks 时设置 body
403  // 最好禁止在 body 和 html 上边框 ,但 ie < 9 html 默认有 2px ,减去
404  // 但是非 ie 不可能设置窗口边框,body html 也不是窗口 ,ie 可以通过 html,body 设置
405  // 标准 ie 下 docElem.clientTop 就是 border-top
406  // ie7 html 即窗口边框改变不了。永远为 2
407  // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框,即使设了 border-top 也为 0
408
409  x -= docElem.clientLeft || body.clientLeft || 0;
410  y -= docElem.clientTop || body.clientTop || 0;
411
412  return {
413    left: x,
414    top: y
415  };
416}
417
418function getScroll(w, top) {
419  var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
420  var method = 'scroll' + (top ? 'Top' : 'Left');
421  if (typeof ret !== 'number') {
422    var d = w.document;
423    // ie6,7,8 standard mode
424    ret = d.documentElement[method];
425    if (typeof ret !== 'number') {
426      // quirks mode
427      ret = d.body[method];
428    }
429  }
430  return ret;
431}
432
433function getScrollLeft(w) {
434  return getScroll(w);
435}
436
437function getScrollTop(w) {
438  return getScroll(w, true);
439}
440
441function getOffset(el) {
442  var pos = getClientPosition(el);
443  var doc = el.ownerDocument;
444  var w = doc.defaultView || doc.parentWindow;
445  pos.left += getScrollLeft(w);
446  pos.top += getScrollTop(w);
447  return pos;
448}
449function _getComputedStyle(elem, name, computedStyle_) {
450  var val = '';
451  var d = elem.ownerDocument;
452  var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null);
453
454  // https://github.com/kissyteam/kissy/issues/61
455  if (computedStyle) {
456    val = computedStyle.getPropertyValue(name) || computedStyle[name];
457  }
458
459  return val;
460}
461
462var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i');
463var RE_POS = /^(top|right|bottom|left)$/;
464var CURRENT_STYLE = 'currentStyle';
465var RUNTIME_STYLE = 'runtimeStyle';
466var LEFT = 'left';
467var PX = 'px';
468
469function _getComputedStyleIE(elem, name) {
470  // currentStyle maybe null
471  // http://msdn.microsoft.com/en-us/library/ms535231.aspx
472  var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name];
473
474  // 当 width/height 设置为百分比时,通过 pixelLeft 方式转换的 width/height 值
475  // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19
476  // 在 ie 下不对,需要直接用 offset 方式
477  // borderWidth 等值也有问题,但考虑到 borderWidth 设为百分比的概率很小,这里就不考虑了
478
479  // From the awesome hack by Dean Edwards
480  // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
481  // If we're not dealing with a regular pixel number
482  // but a number that has a weird ending, we need to convert it to pixels
483  // exclude left right for relativity
484  if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {
485    // Remember the original values
486    var style = elem.style;
487    var left = style[LEFT];
488    var rsLeft = elem[RUNTIME_STYLE][LEFT];
489
490    // prevent flashing of content
491    elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT];
492
493    // Put in the new values to get a computed value out
494    style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;
495    ret = style.pixelLeft + PX;
496
497    // Revert the changed values
498    style[LEFT] = left;
499
500    elem[RUNTIME_STYLE][LEFT] = rsLeft;
501  }
502  return ret === '' ? 'auto' : ret;
503}
504
505var getComputedStyleX = undefined;
506if (typeof window !== 'undefined') {
507  getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
508}
509
510function each(arr, fn) {
511  for (var i = 0; i < arr.length; i++) {
512    fn(arr[i]);
513  }
514}
515
516function isBorderBoxFn(elem) {
517  return getComputedStyleX(elem, 'boxSizing') === 'border-box';
518}
519
520var BOX_MODELS = ['margin', 'border', 'padding'];
521var CONTENT_INDEX = -1;
522var PADDING_INDEX = 2;
523var BORDER_INDEX = 1;
524var MARGIN_INDEX = 0;
525
526function swap(elem, options, callback) {
527  var old = {};
528  var style = elem.style;
529  var name = undefined;
530
531  // Remember the old values, and insert the new ones
532  for (name in options) {
533    if (options.hasOwnProperty(name)) {
534      old[name] = style[name];
535      style[name] = options[name];
536    }
537  }
538
539  callback.call(elem);
540
541  // Revert the old values
542  for (name in options) {
543    if (options.hasOwnProperty(name)) {
544      style[name] = old[name];
545    }
546  }
547}
548
549function getPBMWidth(elem, props, which) {
550  var value = 0;
551  var prop = undefined;
552  var j = undefined;
553  var i = undefined;
554  for (j = 0; j < props.length; j++) {
555    prop = props[j];
556    if (prop) {
557      for (i = 0; i < which.length; i++) {
558        var cssProp = undefined;
559        if (prop === 'border') {
560          cssProp = prop + which[i] + 'Width';
561        } else {
562          cssProp = prop + which[i];
563        }
564        value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;
565      }
566    }
567  }
568  return value;
569}
570
571/**
572 * A crude way of determining if an object is a window
573 * @member util
574 */
575function isWindow(obj) {
576  // must use == for ie8
577  /* eslint eqeqeq:0 */
578  return obj != null && obj == obj.window;
579}
580
581var domUtils = {};
582
583each(['Width', 'Height'], function (name) {
584  domUtils['doc' + name] = function (refWin) {
585    var d = refWin.document;
586    return Math.max(
587    // firefox chrome documentElement.scrollHeight< body.scrollHeight
588    // ie standard mode : documentElement.scrollHeight> body.scrollHeight
589    d.documentElement['scroll' + name],
590    // quirks : documentElement.scrollHeight 最大等于可视窗口多一点?
591    d.body['scroll' + name], domUtils['viewport' + name](d));
592  };
593
594  domUtils['viewport' + name] = function (win) {
595    // pc browser includes scrollbar in window.innerWidth
596    var prop = 'client' + name;
597    var doc = win.document;
598    var body = doc.body;
599    var documentElement = doc.documentElement;
600    var documentElementProp = documentElement[prop];
601    // 标准模式取 documentElement
602    // backcompat 取 body
603    return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;
604  };
605});
606
607/*
608 得到元素的大小信息
609 @param elem
610 @param name
611 @param {String} [extra]  'padding' : (css width) + padding
612 'border' : (css width) + padding + border
613 'margin' : (css width) + padding + border + margin
614 */
615function getWH(elem, name, extra) {
616  if (isWindow(elem)) {
617    return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHe
617ight(elem);
618  } else if (elem.nodeType === 9) {
619    return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);
620  }
621  var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
622  var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight;
623  var computedStyle = getComputedStyleX(elem);
624  var isBorderBox = isBorderBoxFn(elem, computedStyle);
625  var cssBoxValue = 0;
626  if (borderBoxValue == null || borderBoxValue <= 0) {
627    borderBoxValue = undefined;
628    // Fall back to computed then un computed css if necessary
629    cssBoxValue = getComputedStyleX(elem, name);
630    if (cssBoxValue == null || Number(cssBoxValue) < 0) {
631      cssBoxValue = elem.style[name] || 0;
632    }
633    // Normalize '', auto, and prepare for extra
634    cssBoxValue = parseFloat(cssBoxValue) || 0;
635  }
636  if (extra === undefined) {
637    extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;
638  }
639  var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;
640  var val = borderBoxValue || cssBoxValue;
641  if (extra === CONTENT_INDEX) {
642    if (borderBoxValueOrIsBorderBox) {
643      return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle);
644    }
645    return cssBoxValue;
646  }
647  if (borderBoxValueOrIsBorderBox) {
648    var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle);
649    return val + (extra === BORDER_INDEX ? 0 : padding);
650  }
651  return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle);
652}
653
654var cssShow = {
655  position: 'absolute',
656  visibility: 'hidden',
657  display: 'block'
658};
659
660// fix #119 : https://github.com/kissyteam/kissy/issues/119
661function getWHIgnoreDisplay(elem) {
662  var val = undefined;
663  var args = arguments;
664  // in case elem is window
665  // elem.offsetWidth === undefined
666  if (elem.offsetWidth !== 0) {
667    val = getWH.apply(undefined, args);
668  } else {
669    swap(elem, cssShow, function () {
670      val = getWH.apply(undefined, args);
671    });
672  }
673  return val;
674}
675
676function css(el, name, v) {
677  var value = v;
678  if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
679    for (var i in name) {
680      if (name.hasOwnProperty(i)) {
681        css(el, i, name[i]);
682      }
683    }
684    return undefined;
685  }
686  if (typeof value !== 'undefined') {
687    if (typeof value === 'number') {
688      value += 'px';
689    }
690    el.style[name] = value;
691    return undefined;
692  }
693  return getComputedStyleX(el, name);
694}
695
696each(['width', 'height'], function (name) {
697  var first = name.charAt(0).toUpperCase() + name.slice(1);
698  domUtils['outer' + first] = function (el, includeMargin) {
699    return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
700  };
701  var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
702
703  domUtils[name] = function (elem, val) {
704    if (val !== undefined) {
705      if (elem) {
706        var computedStyle = getComputedStyleX(elem);
707        var isBorderBox = isBorderBoxFn(elem);
708        if (isBorderBox) {
709          val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle);
710        }
711        return css(elem, name, val);
712      }
713      return undefined;
714    }
715    return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);
716  };
717});
718
719// 设置 elem 相对 elem.ownerDocument 的坐标
720function setOffset(elem, offset) {
721  // set position first, in-case top/left are set even on static elem
722  if (css(elem, 'position') === 'static') {
723    elem.style.position = 'relative';
724  }
725
726  var old = getOffset(elem);
727  var ret = {};
728  var current = undefined;
729  var key = undefined;
730
731  for (key in offset) {
732    if (offset.hasOwnProperty(key)) {
733      current = parseFloat(css(elem, key)) || 0;
734      ret[key] = current + offset[key] - old[key];
735    }
736  }
737  css(elem, ret);
738}
739
740module.exports = _extends({
741  getWindow: function getWindow(node) {
742    var doc = node.ownerDocument || node;
743    return doc.defaultView || doc.parentWindow;
744  },
745  offset: function offset(el, value) {
746    if (typeof value !== 'undefined') {
747      setOffset(el, value);
748    } else {
749      return getOffset(el);
750    }
751  },
752
753  isWindow: isWindow,
754  each: each,
755  css: css,
756  clone: function clone(obj) {
757    var ret = {};
758    for (var i in obj) {
759      if (obj.hasOwnProperty(i)) {
760        ret[i] = obj[i];
761      }
762    }
763    var overflow = obj.overflow;
764    if (overflow) {
765      for (var i in obj) {
766        if (obj.hasOwnProperty(i)) {
767          ret.overflow[i] = obj.overflow[i];
768        }
769      }
770    }
771    return ret;
772  },
773  scrollLeft: function scrollLeft(w, v) {
774    if (isWindow(w)) {
775      if (v === undefined) {
776        return getScrollLeft(w);
777      }
778      window.scrollTo(v, getScrollTop(w));
779    } else {
780      if (v === undefined) {
781        return w.scrollLeft;
782      }
783      w.scrollLeft = v;
784    }
785  },
786  scrollTop: function scrollTop(w, v) {
787    if (isWindow(w)) {
788      if (v === undefined) {
789        return getScrollTop(w);
790      }
791      window.scrollTo(getScrollLeft(w), v);
792    } else {
793      if (v === undefined) {
794        return w.scrollTop;
795      }
796      w.scrollTop = v;
797    }
798  },
799
800  viewportWidth: 0,
801  viewportHeight: 0
802}, domUtils);
803
804/***/ }),
805
806/***/ 9214:
807/***/ ((__unused_webpack_module, exports) => {
808
809"use strict";
810var __webpack_unused_export__;
811/** @license React v17.0.2
812 * react-is.production.min.js
813 *
814 * Copyright (c) Facebook, Inc. and its affiliates.
815 *
816 * This source code is licensed under the MIT license found in the
817 * LICENSE file in the root directory of this source tree.
818 */
819var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;
820if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden")}
821function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;__webpack_unused_export__=h;__webpack_unused_export__=z;__webpack_unused_export__=A;__webpack_unused_export__=B;__webpack_unused_export__=C;__webpack_unused_export__=D;__webpack_unused_export__=E;__webpack_unused_export__=F;__webpack_unused_export__=G;__webpack_unused_export__=H;
822__webpack_unused_export__=I;__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(a){return y(a)===h};__webpack_unused_export__=function(a){return y(a)===g};__webpack_unused_export__=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===b};__webpack_unused_export__=function(a){return y(a)===k};__webpack_unused_export__=function(a){return y(a)===d};__webpack_unused_export__=function(a){return y(a)===p};__webpack_unused_export__=function(a){return y(a)===n};
823__webpack_unused_export__=function(a){return y(a)===c};__webpack_unused_export__=function(a){return y(a)===f};__webpack_unused_export__=function(a){return y(a)===e};__webpack_unused_export__=function(a){return y(a)===l};__webpack_unused_export__=function(a){return"string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?!0:!1};
824__webpack_unused_export__=y;
825
826
827/***/ }),
828
829/***/ 2797:
830/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
831
832"use strict";
833
834
835if (true) {
836  /* unused reexport */ __webpack_require__(9214);
837} else {}
838
839
840/***/ }),
841
842/***/ 5619:
843/***/ ((module) => {
844
845"use strict";
846
847
848// do not edit .js files directly - edit src/index.jst
849
850
851  var envHasBigInt64Array = typeof BigInt64Array !== 'undefined';
852
853
854module.exports = function equal(a, b) {
855  if (a === b) return true;
856
857  if (a && b && typeof a == 'object' && typeof b == 'object') {
858    if (a.constructor !== b.constructor) return false;
859
860    var length, i, keys;
861    if (Array.isArray(a)) {
862      length = a.length;
863      if (length != b.length) return false;
864      for (i = length; i-- !== 0;)
865        if (!equal(a[i], b[i])) return false;
866      return true;
867    }
868
869
870    if ((a instanceof Map) && (b instanceof Map)) {
871      if (a.size !== b.size) return false;
872      for (i of a.entries())
873        if (!b.has(i[0])) return false;
874      for (i of a.entries())
875        if (!equal(i[1], b.get(i[0]))) return false;
876      return true;
877    }
878
879    if ((a instanceof Set) && (b instanceof Set)) {
880      if (a.size !== b.size) return false;
881      for (i of a.entries())
882        if (!b.has(i[0])) return false;
883      return true;
884    }
885
886    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
887      length = a.length;
888      if (length != b.length) return false;
889      for (i = length; i-- !== 0;)
890        if (a[i] !== b[i]) return false;
891      return true;
892    }
893
894
895    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
896    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
897    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
898
899    keys = Object.keys(a);
900    length = keys.length;
901    if (length !== Object.keys(b).length) return false;
902
903    for (i = length; i-- !== 0;)
904      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
905
906    for (i = length; i-- !== 0;) {
907      var key = keys[i];
908
909      if (!equal(a[key], b[key])) return false;
910    }
911
912    return true;
913  }
914
915  // true if both NaN, false otherwise
916  return a!==a && b!==b;
917};
918
919
920/***/ }),
921
922/***/ 2920:
923/***/ ((module) => {
924
925//
926// Main
927//
928
929function memoize (fn, options) {
930  var cache = options && options.cache
931    ? options.cache
932    : cacheDefault
933
934  var serializer = options && options.serializer
935    ? options.serializer
936    : serializerDefault
937
938  var strategy = options && options.strategy
939    ? options.strategy
940    : strategyDefault
941
942  return strategy(fn, {
943    cache: cache,
944    serializer: serializer
945  })
946}
947
948//
949// Strategy
950//
951
952function isPrimitive (value) {
953  return value == null || typeof value === 'number' || typeof value === 'boolean' // || typeof value === "string" 'unsafe' primitive for our needs
954}
955
956function monadic (fn, cache, serializer, arg) {
957  var cacheKey = isPrimitive(arg) ? arg : serializer(arg)
958
959  var computedValue = cache.get(cacheKey)
960  if (typeof computedValue === 'undefined') {
961    computedValue = fn.call(this, arg)
962    cache.set(cacheKey, computedValue)
963  }
964
965  return computedValue
966}
967
968function variadic (fn, cache, serializer) {
969  var args = Array.prototype.slice.call(arguments, 3)
970  var cacheKey = serializer(args)
971
972  var computedValue = cache.get(cacheKey)
973  if (typeof computedValue === 'undefined') {
974    computedValue = fn.apply(this, args)
975    cache.set(cacheKey, computedValue)
976  }
977
978  return computedValue
979}
980
981function assemble (fn, context, strategy, cache, serialize) {
982  return strategy.bind(
983    context,
984    fn,
985    cache,
986    serialize
987  )
988}
989
990function strategyDefault (fn, options) {
991  var strategy = fn.length === 1 ? monadic : variadic
992
993  return assemble(
994    fn,
995    this,
996    strategy,
997    options.cache.create(),
998    options.serializer
999  )
1000}
1001
1002function strategyVariadic (fn, options) {
1003  var strategy = variadic
1004
1005  return assemble(
1006    fn,
1007    this,
1008    strategy,
1009    options.cache.create(),
1010    options.serializer
1011  )
1012}
1013
1014function strategyMonadic (fn, options) {
1015  var strategy = monadic
1016
1017  return assemble(
1018    fn,
1019    this,
1020    strategy,
1021    options.cache.create(),
1022    options.serializer
1023  )
1024}
1025
1026//
1027// Serializer
1028//
1029
1030function serializerDefault () {
1031  return JSON.stringify(arguments)
1032}
1033
1034//
1035// Cache
1036//
1037
1038function ObjectWithoutPrototypeCache () {
1039  this.cache = Object.create(null)
1040}
1041
1042ObjectWithoutPrototypeCache.prototype.has = function (key) {
1043  return (key in this.cache)
1044}
1045
1046ObjectWithoutPrototypeCache.prototype.get = function (key) {
1047  return this.cache[key]
1048}
1049
1050ObjectWithoutPrototypeCache.prototype.set = function (key, value) {
1051  this.cache[key] = value
1052}
1053
1054var cacheDefault = {
1055  create: function create () {
1056    return new ObjectWithoutPrototypeCache()
1057  }
1058}
1059
1060//
1061// API
1062//
1063
1064module.exports = memoize
1065module.exports.strategies = {
1066  variadic: strategyVariadic,
1067  monadic: strategyMonadic
1068}
1069
1070
1071/***/ }),
1072
1073/***/ 7115:
1074/***/ ((__unused_webpack_module, exports) => {
1075
1076// Copyright (c) 2014 Rafael Caricio. All rights reserved.
1077// Use of this source code is governed by a BSD-style license that can be
1078// found in the LICENSE file.
1079
1080var GradientParser = {};
1081
1082GradientParser.parse = (function() {
1083
1084  var tokens = {
1085    linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
1086    repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
1087    radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
1088    repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
1089    sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
1090    extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
1091    positionKeywords: /^(left|center|right|top|bottom)/i,
1092    pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
1093    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
1094    emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
1095    angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
1096    startCall: /^\(/,
1097    endCall: /^\)/,
1098    comma: /^,/,
1099    hexColor: /^\#([0-9a-fA-F]+)/,
1100    literalColor: /^([a-zA-Z]+)/,
1101    rgbColor: /^rgb/i,
1102    rgbaColor: /^rgba/i,
1103    number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
1104  };
1105
1106  var input = '';
1107
1108  function error(msg) {
1109    var err = new Error(input + ': ' + msg);
1110    err.source = input;
1111    throw err;
1112  }
1113
1114  function getAST() {
1115    var ast = matchListDefinitions();
1116
1117    if (input.length > 0) {
1118      error('Invalid input not EOF');
1119    }
1120
1121    return ast;
1122  }
1123
1124  function matchListDefinitions() {
1125    return matchListing(matchDefinition);
1126  }
1127
1128  function matchDefinition() {
1129    return matchGradient(
1130            'linear-gradient',
1131            tokens.linearGradient,
1132            matchLinearOrientation) ||
1133
1134          matchGradient(
1135            'repeating-linear-gradient',
1136            tokens.repeatingLinearGradient,
1137            matchLinearOrientation) ||
1138
1139          matchGradient(
1140            'radial-gradient',
1141            tokens.radialGradient,
1142            matchListRadialOrientations) ||
1143
1144          matchGradient(
1145            'repeating-radial-gradient',
1146            tokens.repeatingRadialGradient,
1147            matchListRadialOrientations);
1148  }
1149
1150  function matchGradient(gradientType, pattern, orientationMatcher) {
1151    return matchCall(pattern, function(captures) {
1152
1153      var orientation = orientationMatcher();
1154      if (orientation) {
1155        if (!scan(tokens.comma)) {
1156          error('Missing comma before color stops');
1157        }
1158      }
1159
1160      return {
1161        type: gradientType,
1162        orientation: orientation,
1163        colorStops: matchListing(matchColorStop)
1164      };
1165    });
1166  }
1167
1168  function matchCall(pattern, callback) {
1169    var captures = scan(pattern);
1170
1171    if (captures) {
1172      if (!scan(tokens.startCall)) {
1173        error('Missing (');
1174      }
1175
1176      result = callback(captures);
1177
1178      if (!scan(tokens.endCall)) {
1179        error('Missing )');
1180      }
1181
1182      return result;
1183    }
1184  }
1185
1186  function matchLinearOrientation() {
1187    return matchSideOrCorner() ||
1188      matchAngle();
1189  }
1190
1191  function matchSideOrCorner() {
1192    return match('directional', tokens.sideOrCorner, 1);
1193  }
1194
1195  function matchAngle() {
1196    return match('angular', tokens.angleValue, 1);
1197  }
1198
1199  function matchListRadialOrientations() {
1200    var radialOrientations,
1201        radialOrientation = matchRadialOrientation(),
1202        lookaheadCache;
1203
1204    if (radialOrientation) {
1205      radialOrientations = [];
1206      radialOrientations.push(radialOrientation);
1207
1208      lookaheadCache = input;
1209      if (scan(tokens.comma)) {
1210        radialOrientation = matchRadialOrientation();
1211        if (radialOrientation) {
1212          radialOrientations.push(radialOrientation);
1213        } else {
1214          input = lookaheadCache;
1215        }
1216      }
1217    }
1218
1219    return radialOrientations;
1220  }
1221
1222  function matchRadialOrientation() {
1223    var radialType = matchCircle() ||
1224      matchEllipse();
1225
1226    if (radialType) {
1227      radialType.at = matchAtPosition();
1228    } else {
1229      var defaultPosition = matchPositioning();
1230      if (defaultPosition) {
1231        radialType = {
1232          type: 'default-radial',
1233          at: defaultPosition
1234        };
1235      }
1236    }
1237
1238    return radialType;
1239  }
1240
1241  function matchCircle() {
1242    var circle = match('shape', /^(circle)/i, 0);
1243
1244    if (circle) {
1245      circle.style = matchLength() || matchExtentKeyword();
1246    }
1247
1248    return circle;
1249  }
1250
1251  function matchEllipse() {
1252    var ellipse = match('shape', /^(ellipse)/i, 0);
1253
1254    if (ellipse) {
1255      ellipse.style =  matchDistance() || matchExtentKeyword();
1256    }
1257
1258    return ellipse;
1259  }
1260
1261  function matchExtentKeyword() {
1262    return match('extent-keyword', tokens.extentKeywords, 1);
1263  }
1264
1265  function matchAtPosition() {
1266    if (match('position', /^at/, 0)) {
1267      var positioning = matchPositioning();
1268
1269      if (!positioning) {
1270        error('Missing positioning value');
1271      }
1272
1273      return positioning;
1274    }
1275  }
1276
1277  function matchPositioning() {
1278    var location = matchCoordinates();
1279
1280    if (location.x || location.y) {
1281      return {
1282        type: 'position',
1283        value: location
1284      };
1285    }
1286  }
1287
1288  function matchCoordinates() {
1289    return {
1290      x: matchDistance(),
1291      y: matchDistance()
1292    };
1293  }
1294
1295  function matchListing(matcher) {
1296    var captures = matcher(),
1297      result = [];
1298
1299    if (captures) {
1300      result.push(captures);
1301      while (scan(tokens.comma)) {
1302        captures = matcher();
1303        if (captures) {
1304          result.push(captures);
1305        } else {
1306          error('One extra comma');
1307        }
1308      }
1309    }
1310
1311    return result;
1312  }
1313
1314  function matchColorStop() {
1315    var color = matchColor();
1316
1317    if (!color) {
1318      error('Expected color definition');
1319    }
1320
1321    color.length = matchDistance();
1322    return color;
1323  }
1324
1325  function matchColor() {
1326    return matchHexColor() ||
1327      matchRGBAColor() ||
1328      matchRGBColor() ||
1329      matchLiteralColor();
1330  }
1331
1332  function matchLiteralColor() {
1333    return match('literal', tokens.literalColor, 0);
1334  }
1335
1336  function matchHexColor() {
1337    return match('hex', tokens.hexColor, 1);
1338  }
1339
1340  function matchRGBColor() {
1341    return matchCall(tokens.rgbColor, function() {
1342      return  {
1343        type: 'rgb',
1344        value: matchListing(matchNumber)
1345      };
1346    });
1347  }
1348
1349  function matchRGBAColor() {
1350    return matchCall(tokens.rgbaColor, function() {
1351      return  {
1352        type: 'rgba',
1353        value: matchListing(matchNumber)
1354      };
1355    });
1356  }
1357
1358  function matchNumber() {
1359    return scan(tokens.number)[1];
1360  }
1361
1362  function matchDistance() {
1363    return match('%', tokens.percentageValue, 1) ||
1364      matchPositionKeyword() ||
1365      matchLength();
1366  }
1367
1368  function matchPositionKeyword() {
1369    return match('position-keyword', tokens.positionKeywords, 1);
1370  }
1371
1372  function matchLength() {
1373    return match('px', tokens.pixelValue, 1) ||
1374      match('em', tokens.emValue, 1);
1375  }
1376
1377  function match(type, pattern, captureIndex) {
1378    var captures = scan(pattern);
1379    if (captures) {
1380      return {
1381        type: type,
1382        value: captures[captureIndex]
1383      };
1384    }
1385  }
1386
1387  function scan(regexp) {
1388    var captures,
1389        blankCaptures;
1390
1391    blankCaptures = /^[\n\r\t\s]+/.exec(input);
1392    if (blankCaptures) {
1393        consume(blankCaptures[0].length);
1394    }
1395
1396    captures = regexp.exec(input);
1397    if (captures) {
1398        consume(captures[0].length);
1399    }
1400
1401    return captures;
1402  }
1403
1404  function consume(size) {
1405    input = input.substr(size);
1406  }
1407
1408  return function(code) {
1409    input = code.toString();
1410    return getAST();
1411  };
1412})();
1413
1414exports.parse = (GradientParser || {}).parse;
1415
1416
1417/***/ }),
1418
1419/***/ 3138:
1420/***/ ((module) => {
1421
1422module.exports =
1423/******/ (function(modules) { // webpackBootstrap
1424/******/ 	// The module cache
1425/******/ 	var installedModules = {};
1426/******/
1427/******/ 	// The require function
1428/******/ 	function __nested_webpack_require_187__(moduleId) {
1429/******/
1430/******/ 		// Check if module is in cache
1431/******/ 		if(installedModules[moduleId])
1432/******/ 			return installedModules[moduleId].exports;
1433/******/
1434/******/ 		// Create a new module (and put it into the cache)
1435/******/ 		var module = installedModules[moduleId] = {
1436/******/ 			exports: {},
1437/******/ 			id: moduleId,
1438/******/ 			loaded: false
1439/******/ 		};
1440/******/
1441/******/ 		// Execute the module function
1442/******/ 		modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_187__);
1443/******/
1444/******/ 		// Flag the module as loaded
1445/******/ 		module.loaded = true;
1446/******/
1447/******/ 		// Return the exports of the module
1448/******/ 		return module.exports;
1449/******/ 	}
1450/******/
1451/******/
1452/******/ 	// expose the modules object (__webpack_modules__)
1453/******/ 	__nested_webpack_require_187__.m = modules;
1454/******/
1455/******/ 	// expose the module cache
1456/******/ 	__nested_webpack_require_187__.c = installedModules;
1457/******/
1458/******/ 	// __webpack_public_path__
1459/******/ 	__nested_webpack_require_187__.p = "";
1460/******/
1461/******/ 	// Load entry module and return exports
1462/******/ 	return __nested_webpack_require_187__(0);
1463/******/ })
1464/************************************************************************/
1465/******/ ([
1466/* 0 */
1467/***/ (function(module, exports, __nested_webpack_require_1468__) {
1468
1469	module.exports = __nested_webpack_require_1468__(1);
1470
1471
1472/***/ }),
1473/* 1 */
1474/***/ (function(module, exports, __nested_webpack_require_1587__) {
1475
1476	'use strict';
1477	
1478	Object.defineProperty(exports, "__esModule", {
1479	  value: true
1480	});
1481	
1482	var _utils = __nested_webpack_require_1587__(2);
1483	
1484	Object.defineProperty(exports, 'combineChunks', {
1485	  enumerable: true,
1486	  get: function get() {
1487	    return _utils.combineChunks;
1488	  }
1489	});
1490	Object.defineProperty(exports, 'fillInChunks', {
1491	  enumerable: true,
1492	  get: function get() {
1493	    return _utils.fillInChunks;
1494	  }
1495	});
1496	Object.defineProperty(exports, 'findAll', {
1497	  enumerable: true,
1498	  get: function get() {
1499	    return _utils.findAll;
1500	  }
1501	});
1502	Object.defineProperty(exports, 'findChunks', {
1503	  enumerable: true,
1504	  get: function get() {
1505	    return _utils.findChunks;
1506	  }
1507	});
1508
1509/***/ }),
1510/* 2 */
1511/***/ (function(module, exports) {
1512
1513	'use strict';
1514	
1515	Object.defineProperty(exports, "__esModule", {
1516	  value: true
1517	});
1518	
1519	
1520	/**
1521	 * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word.
1522	 * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean })
1523	 */
1524	var findAll = exports.findAll = function findAll(_ref) {
1525	  var autoEscape = _ref.autoEscape,
1526	      _ref$caseSensitive = _ref.caseSensitive,
1527	      caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive,
1528	      _ref$findChunks = _ref.findChunks,
1529	      findChunks = _ref$findChunks === undefined ? defaultFindChunks : _ref$findChunks,
1530	      sanitize = _ref.sanitize,
1531	      searchWords = _ref.searchWords,
1532	      textToHighlight = _ref.textToHighlight;
1533	  return fillInChunks({
1534	    chunksToHighlight: combineChunks({
1535	      chunks: findChunks({
1536	        autoEscape: autoEscape,
1537	        caseSensitive: caseSensitive,
1538	        sanitize: sanitize,
1539	        searchWords: searchWords,
1540	        textToHighlight: textToHighlight
1541	      })
1542	    }),
1543	    totalLength: textToHighlight ? textToHighlight.length : 0
1544	  });
1545	};
1546	
1547	/**
1548	 * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks.
1549	 * @return {start:number, end:number}[]
1550	 */
1551	
1552	
1553	var combineChunks = exports.combineChunks = function combineChunks(_ref2) {
1554	  var chunks = _ref2.chunks;
1555	
1556	  chunks = chunks.sort(function (first, second) {
1557	    return first.start - second.start;
1558	  }).reduce(function (processedChunks, nextChunk) {
1559	    // First chunk just goes straight in the array...
1560	    if (processedChunks.length === 0) {
1561	      return [nextChunk];
1562	    } else {
1563	      // ... subsequent chunks get checked to see if they overlap...
1564	      var prevChunk = processedChunks.pop();
1565	      if (nextChunk.start <= prevChunk.end) {
1566	        // It may be the case that prevChunk completely surrounds nextChunk, so take the
1567	        // largest of the end indeces.
1568	        var endIndex = Math.max(prevChunk.end, nextChunk.end);
1569	        processedChunks.push({ highlight: false, start: prevChunk.start, end: endIndex });
1570	      } else {
1571	        processedChunks.push(prevChunk, nextChunk);
1572	      }
1573	      return processedChunks;
1574	    }
1575	  }, []);
1576	
1577	  return chunks;
1578	};
1579	
1580	/**
1581	 * Examine text for any matches.
1582	 * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}).
1583	 * @return {start:number, end:number}[]
1584	 */
1585	var defaultFindChunks = function defaultFindChunks(_ref3) {
1586	  var autoEscape = _ref3.autoEscape,
1587	      caseSensitive = _ref3.caseSensitive,
1588	      _ref3$sanitize = _ref3.sanitize,
1589	      sanitize = _ref3$sanitize === undefined ? defaultSanitize : _ref3$sanitize,
1590	      searchWords = _ref3.searchWords,
1591	      textToHighlight = _ref3.textToHighlight;
1592	
1593	  textToHighlight = sanitize(textToHighlight);
1594	
1595	  return searchWords.filter(function (searchWord) {
1596	    return searchWord;
1597	  }) // Remove empty words
1598	  .reduce(function (chunks, searchWord) {
1599	    searchWord = sanitize(searchWord);
1600	
1601	    if (autoEscape) {
1602	      searchWord = escapeRegExpFn(searchWord);
1603	    }
1604	
1605	    var regex = new RegExp(searchWord, caseSensitive ? 'g' : 'gi');
1606	
1607	    var match = void 0;
1608	    while (match = regex.exec(textToHighlight)) {
1609	      var _start = match.index;
1610	      var _end = regex.lastIndex;
1611	      // We do not return zero-length matches
1612	      if (_end > _start) {
1613	        chunks.push({ highlight: false, start: _start, end: _end });
1614	      }
1615	
1616	      // Prevent browsers like Firefox from getting stuck in an infinite loop
1617	      // See http://www.regexguru.com/2008/04/watch-out-for-zero-length-matches/
1618	      if (match.index === regex.lastIndex) {
1619	        regex.lastIndex++;
1620	      }
1621	    }
1622	
1623	    return chunks;
1624	  }, []);
1625	};
1626	// Allow the findChunks to be overridden in findAll,
1627	// but for backwards compatibility we export as the old name
1628	exports.findChunks = defaultFindChunks;
1629	
1630	/**
1631	 * Given a set of chunks to highlight, create an additional set of chunks
1632	 * to represent the bits of text between the highlighted text.
1633	 * @param chunksToHighlight {start:number, end:number}[]
1634	 * @param totalLength number
1635	 * @return {start:number, end:number, highlight:boolean}[]
1636	 */
1637	
1638	var fillInChunks = exports.fillInChunks = function fillInChunks(_ref4) {
1639	  var chunksToHighlight = _ref4.chunksToHighlight,
1640	      totalLength = _ref4.totalLength;
1641	
1642	  var allChunks = [];
1643	  var append = function append(start, end, highlight) {
1644	    if (end - start > 0) {
1645	      allChunks.push({
1646	        start: start,
1647	        end: end,
1648	        highlight: highlight
1649	      });
1650	    }
1651	  };
1652	
1653	  if (chunksToHighlight.length === 0) {
1654	    append(0, totalLength, false);
1655	  } else {
1656	    var lastIndex = 0;
1657	    chunksToHighlight.forEach(function (chunk) {
1658	      append(lastIndex, chunk.start, false);
1659	      append(chunk.start, chunk.end, true);
1660	      lastIndex = chunk.end;
1661	    });
1662	    append(lastIndex, totalLength, false);
1663	  }
1664	  return allChunks;
1665	};
1666	
1667	function defaultSanitize(string) {
1668	  return string;
1669	}
1670	
1671	function escapeRegExpFn(string) {
1672	  return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
1673	}
1674
1675/***/ })
1676/******/ ]);
1677
1678
1679/***/ }),
1680
1681/***/ 1281:
1682/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1683
1684"use strict";
1685
1686
1687var reactIs = __webpack_require__(338);
1688
1689/**
1690 * Copyright 2015, Yahoo! Inc.
1691 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
1692 */
1693var REACT_STATICS = {
1694  childContextTypes: true,
1695  contextType: true,
1696  contextTypes: true,
1697  defaultProps: true,
1698  displayName: true,
1699  getDefaultProps: true,
1700  getDerivedStateFromError: true,
1701  getDerivedStateFromProps: true,
1702  mixins: true,
1703  propTypes: true,
vendor: 4,890 bytes, lines 1704-1903
1704  type: true
1705};
1706var KNOWN_STATICS = {
1707  name: true,
1708  length: true,
1709  prototype: true,
1710  caller: true,
1711  callee: true,
1712  arguments: true,
1713  arity: true
1714};
1715var FORWARD_REF_STATICS = {
1716  '$$typeof': true,
1717  render: true,
1718  defaultProps: true,
1719  displayName: true,
1720  propTypes: true
1721};
1722var MEMO_STATICS = {
1723  '$$typeof': true,
1724  compare: true,
1725  defaultProps: true,
1726  displayName: true,
1727  propTypes: true,
1728  type: true
1729};
1730var TYPE_STATICS = {};
1731TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
1732TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
1733
1734function getStatics(component) {
1735  // React v16.11 and below
1736  if (reactIs.isMemo(component)) {
1737    return MEMO_STATICS;
1738  } // React v16.12 and above
1739
1740
1741  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
1742}
1743
1744var defineProperty = Object.defineProperty;
1745var getOwnPropertyNames = Object.getOwnPropertyNames;
1746var getOwnPropertySymbols = Object.getOwnPropertySymbols;
1747var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
1748var getPrototypeOf = Object.getPrototypeOf;
1749var objectPrototype = Object.prototype;
1750function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
1751  if (typeof sourceComponent !== 'string') {
1752    // don't hoist over string (html) components
1753    if (objectPrototype) {
1754      var inheritedComponent = getPrototypeOf(sourceComponent);
1755
1756      if (inheritedComponent && inheritedComponent !== objectPrototype) {
1757        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
1758      }
1759    }
1760
1761    var keys = getOwnPropertyNames(sourceComponent);
1762
1763    if (getOwnPropertySymbols) {
1764      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
1765    }
1766
1767    var targetStatics = getStatics(targetComponent);
1768    var sourceStatics = getStatics(sourceComponent);
1769
1770    for (var i = 0; i < keys.length; ++i) {
1771      var key = keys[i];
1772
1773      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
1774        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
1775
1776        try {
1777          // Avoid failures from read-only properties
1778          defineProperty(targetComponent, key, descriptor);
1779        } catch (e) {}
1780      }
1781    }
1782  }
1783
1784  return targetComponent;
1785}
1786
1787module.exports = hoistNonReactStatics;
1788
1789
1790/***/ }),
1791
1792/***/ 5372:
1793/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1794
1795"use strict";
1796/**
1797 * Copyright (c) 2013-present, Facebook, Inc.
1798 *
1799 * This source code is licensed under the MIT license found in the
1800 * LICENSE file in the root directory of this source tree.
1801 */
1802
1803
1804
1805var ReactPropTypesSecret = __webpack_require__(9567);
1806
1807function emptyFunction() {}
1808function emptyFunctionWithReset() {}
1809emptyFunctionWithReset.resetWarningCache = emptyFunction;
1810
1811module.exports = function() {
1812  function shim(props, propName, componentName, location, propFullName, secret) {
1813    if (secret === ReactPropTypesSecret) {
1814      // It is still safe when called from React.
1815      return;
1816    }
1817    var err = new Error(
1818      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1819      'Use PropTypes.checkPropTypes() to call them. ' +
1820      'Read more at http://fb.me/use-check-prop-types'
1821    );
1822    err.name = 'Invariant Violation';
1823    throw err;
1824  };
1825  shim.isRequired = shim;
1826  function getShim() {
1827    return shim;
1828  };
1829  // Important!
1830  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
1831  var ReactPropTypes = {
1832    array: shim,
1833    bool: shim,
1834    func: shim,
1835    number: shim,
1836    object: shim,
1837    string: shim,
1838    symbol: shim,
1839
1840    any: shim,
1841    arrayOf: getShim,
1842    element: shim,
1843    elementType: shim,
1844    instanceOf: getShim,
1845    node: shim,
1846    objectOf: getShim,
1847    oneOf: getShim,
1848    oneOfType: getShim,
1849    shape: getShim,
1850    exact: getShim,
1851
1852    checkPropTypes: emptyFunctionWithReset,
1853    resetWarningCache: emptyFunction
1854  };
1855
1856  ReactPropTypes.PropTypes = ReactPropTypes;
1857
1858  return ReactPropTypes;
1859};
1860
1861
1862/***/ }),
1863
1864/***/ 2652:
1865/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1866
1867/**
1868 * Copyright (c) 2013-present, Facebook, Inc.
1869 *
1870 * This source code is licensed under the MIT license found in the
1871 * LICENSE file in the root directory of this source tree.
1872 */
1873
1874if (false) { var throwOnDirectAccess, ReactIs; } else {
1875  // By explicitly using `prop-types` you are opting into new production behavior.
1876  // http://fb.me/prop-types-in-prod
1877  module.exports = __webpack_require__(5372)();
1878}
1879
1880
1881/***/ }),
1882
1883/***/ 9567:
1884/***/ ((module) => {
1885
1886"use strict";
1887/**
1888 * Copyright (c) 2013-present, Facebook, Inc.
1889 *
1890 * This source code is licensed under the MIT license found in the
1891 * LICENSE file in the root directory of this source tree.
1892 */
1893
1894
1895
1896var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
1897
1898module.exports = ReactPropTypesSecret;
1899
1900
1901/***/ }),
1902
1903/***/ 4821:
vendor: 4,341 bytes, lines 1904-2002
1904/***/ ((__unused_webpack_module, exports) => {
1905
1906"use strict";
1907/** @license React v16.13.1
1908 * react-is.production.min.js
1909 *
1910 * Copyright (c) Facebook, Inc. and its affiliates.
1911 *
1912 * This source code is licensed under the MIT license found in the
1913 * LICENSE file in the root directory of this source tree.
1914 */
1915
1916var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
1917Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
1918function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;
1919exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};
1920exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};
1921exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;
1922
1923
1924/***/ }),
1925
1926/***/ 338:
1927/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1928
1929"use strict";
1930
1931
1932if (true) {
1933  module.exports = __webpack_require__(4821);
1934} else {}
1935
1936
1937/***/ }),
1938
1939/***/ 2455:
1940/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1941
1942"use strict";
1943/**
1944 * @license React
1945 * react-jsx-runtime.production.min.js
1946 *
1947 * Copyright (c) Facebook, Inc. and its affiliates.
1948 *
1949 * This source code is licensed under the MIT license found in the
1950 * LICENSE file in the root directory of this source tree.
1951 */
1952var f=__webpack_require__(9196),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};
1953function 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;
1954
1955
1956/***/ }),
1957
1958/***/ 7557:
1959/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1960
1961"use strict";
1962
1963
1964if (true) {
1965  module.exports = __webpack_require__(2455);
1966} else {}
1967
1968
1969/***/ }),
1970
1971/***/ 4793:
1972/***/ ((module) => {
1973
1974var characterMap = {
1975	"À": "A",
1976	"Á": "A",
1977	"Â": "A",
1978	"Ã": "A",
1979	"Ä": "A",
1980	"Å": "A",
1981	"Ấ": "A",
1982	"Ắ": "A",
1983	"Ẳ": "A",
1984	"Ẵ": "A",
1985	"Ặ": "A",
1986	"Æ": "AE",
1987	"Ầ": "A",
1988	"Ằ": "A",
1989	"Ȃ": "A",
1990	"Ả": "A",
1991	"Ạ": "A",
1992	"Ẩ": "A",
1993	"Ẫ": "A",
1994	"Ậ": "A",
1995	"Ç": "C",
1996	"Ḉ": "C",
1997	"È": "E",
1998	"É": "E",
1999	"Ê": "E",
2000	"Ë": "E",
2001	"Ế": "E",
2002	"Ḗ": "E",
2003	"Ề": "E",
2004	"Ḕ": "E",
2005	"Ḝ": "E",
2006	"Ȇ": "E",
2007	"Ẻ": "E",
2008	"Ẽ": "E",
2009	"Ẹ": "E",
2010	"Ể": "E",
2011	"Ễ": "E",
2012	"Ệ": "E",
2013	"Ì": "I",
2014	"Í": "I",
2015	"Î": "I",
2016	"Ï": "I",
2017	"Ḯ": "I",
2018	"Ȋ": "I",
2019	"Ỉ": "I",
2020	"Ị": "I",
2021	"Ð": "D",
2022	"Ñ": "N",
2023	"Ò": "O",
2024	"Ó": "O",
2025	"Ô": "O",
2026	"Õ": "O",
2027	"Ö": "O",
2028	"Ø": "O",
2029	"Ố": "O",
2030	"Ṍ": "O",
2031	"Ṓ": "O",
2032	"Ȏ": "O",
2033	"Ỏ": "O",
2034	"Ọ": "O",
2035	"Ổ": "O",
2036	"Ỗ": "O",
2037	"Ộ": "O",
2038	"Ờ": "O",
2039	"Ở": "O",
2040	"á» ": "O",
2041	"Ớ": "O",
2042	"Ợ": "O",
2043	"Ù": "U",
2044	"Ú": "U",
2045	"Û": "U",
2046	"Ü": "U",
2047	"Ủ": "U",
2048	"Ụ": "U",
2049	"Ử": "U",
2050	"á»®": "U",
2051	"á»°": "U",
2052	"Ý": "Y",
2053	"à": "a",
2054	"á": "a",
2055	"â": "a",
2056	"ã": "a",
2057	"ä": "a",
2058	"Ã¥": "a",
2059	"ấ": "a",
2060	"ắ": "a",
2061	"ẳ": "a",
2062	"ẵ": "a",
2063	"ặ": "a",
2064	"æ": "ae",
2065	"ầ": "a",
2066	"ằ": "a",
2067	"ȃ": "a",
2068	"ả": "a",
2069	"ạ": "a",
2070	"ẩ": "a",
2071	"ẫ": "a",
2072	"ậ": "a",
2073	"ç": "c",
2074	"ḉ": "c",
2075	"è": "e",
2076	"é": "e",
2077	"ê": "e",
2078	"ë": "e",
2079	"ế": "e",
2080	"ḗ": "e",
2081	"ề": "e",
2082	"ḕ": "e",
2083	"ḝ": "e",
2084	"ȇ": "e",
2085	"ẻ": "e",
2086	"ẽ": "e",
2087	"ẹ": "e",
2088	"ể": "e",
2089	"ễ": "e",
2090	"ệ": "e",
2091	"ì": "i",
2092	"í": "i",
2093	"î": "i",
2094	"ï": "i",
2095	"ḯ": "i",
2096	"ȋ": "i",
2097	"ỉ": "i",
2098	"ị": "i",
2099	"ð": "d",
2100	"ñ": "n",
2101	"ò": "o",
2102	"ó": "o",
2103	"ô": "o",
2104	"õ": "o",
2105	"ö": "o",
2106	"ø": "o",
2107	"ố": "o",
2108	"ṍ": "o",
2109	"ṓ": "o",
2110	"ȏ": "o",
2111	"ỏ": "o",
2112	"ọ": "o",
2113	"ổ": "o",
2114	"ỗ": "o",
2115	"ộ": "o",
2116	"ờ": "o",
2117	"ở": "o",
2118	"ỡ": "o",
2119	"ớ": "o",
2120	"ợ": "o",
2121	"ù": "u",
2122	"ú": "u",
2123	"û": "u",
2124	"ü": "u",
2125	"á»§": "u",
2126	"ụ": "u",
2127	"á»­": "u",
2128	"ữ": "u",
2129	"á»±": "u",
2130	"ý": "y",
2131	"ÿ": "y",
2132	"Ā": "A",
2133	"ā": "a",
2134	"Ă": "A",
2135	"ă": "a",
2136	"Ą": "A",
2137	"ą": "a",
2138	"Ć": "C",
2139	"ć": "c",
2140	"Ĉ": "C",
2141	"ĉ": "c",
2142	"Ċ": "C",
2143	"ċ": "c",
2144	"Č": "C",
2145	"č": "c",
2146	"C̆": "C",
2147	"c̆": "c",
2148	"Ď": "D",
2149	"ď": "d",
2150	"Đ": "D",
2151	"đ": "d",
2152	"Ē": "E",
2153	"ē": "e",
2154	"Ĕ": "E",
2155	"ĕ": "e",
2156	"Ė": "E",
2157	"ė": "e",
2158	"Ę": "E",
2159	"ę": "e",
2160	"Ě": "E",
2161	"ě": "e",
2162	"Ĝ": "G",
2163	"Ç´": "G",
2164	"ĝ": "g",
2165	"ǵ": "g",
2166	"Ğ": "G",
2167	"ğ": "g",
2168	"Ä ": "G",
2169	"Ä¡": "g",
2170	"Ä¢": "G",
2171	"Ä£": "g",
2172	"Ĥ": "H",
2173	"Ä¥": "h",
2174	"Ħ": "H",
2175	"ħ": "h",
2176	"Ḫ": "H",
2177	"ḫ": "h",
2178	"Ĩ": "I",
2179	"Ä©": "i",
2180	"Ī": "I",
2181	"Ä«": "i",
2182	"Ĭ": "I",
2183	"Ä­": "i",
2184	"Ä®": "I",
2185	"į": "i",
2186	"İ": "I",
2187	"ı": "i",
2188	"IJ": "IJ",
2189	"ij": "ij",
2190	"Ä´": "J",
2191	"ĵ": "j",
2192	"Ķ": "K",
2193	"Ä·": "k",
2194	"Ḱ": "K",
2195	"ḱ": "k",
2196	"K̆": "K",
2197	"k̆": "k",
2198	"Ĺ": "L",
2199	"ĺ": "l",
2200	"Ä»": "L",
2201	"ļ": "l",
2202	"Ľ": "L",
2203	"ľ": "l",
2204	"Ä¿": "L",
2205	"ŀ": "l",
2206	"Ł": "l",
2207	"ł": "l",
2208	"Ḿ": "M",
2209	"ḿ": "m",
2210	"M̆": "M",
2211	"m̆": "m",
2212	"Ń": "N",
2213	"ń": "n",
2214	"Ņ": "N",
2215	"ņ": "n",
2216	"Ň": "N",
2217	"ň": "n",
2218	"ʼn": "n",
2219	"N̆": "N",
2220	"n̆": "n",
2221	"Ō": "O",
2222	"ō": "o",
2223	"Ŏ": "O",
2224	"ŏ": "o",
2225	"Ő": "O",
2226	"ő": "o",
2227	"Œ": "OE",
2228	"œ": "oe",
2229	"P̆": "P",
2230	"p̆": "p",
2231	"Ŕ": "R",
2232	"ŕ": "r",
2233	"Ŗ": "R",
2234	"ŗ": "r",
2235	"Ř": "R",
2236	"ř": "r",
2237	"R̆": "R",
2238	"r̆": "r",
2239	"Ȓ": "R",
2240	"ȓ": "r",
2241	"Ś": "S",
2242	"ś": "s",
2243	"Ŝ": "S",
2244	"ŝ": "s",
2245	"Ş": "S",
2246	"Ș": "S",
2247	"ș": "s",
2248	"ş": "s",
2249	"Å ": "S",
2250	"Å¡": "s",
2251	"Å¢": "T",
2252	"Å£": "t",
2253	"ț": "t",
2254	"Ț": "T",
2255	"Ť": "T",
2256	"Å¥": "t",
2257	"Ŧ": "T",
2258	"ŧ": "t",
2259	"T̆": "T",
2260	"t̆": "t",
2261	"Ũ": "U",
2262	"Å©": "u",
2263	"Ū": "U",
2264	"Å«": "u",
2265	"Ŭ": "U",
2266	"Å­": "u",
2267	"Å®": "U",
2268	"ů": "u",
2269	"Ű": "U",
2270	"ű": "u",
2271	"Ų": "U",
2272	"ų": "u",
2273	"Ȗ": "U",
2274	"ȗ": "u",
2275	"V̆": "V",
2276	"v̆": "v",
2277	"Å´": "W",
2278	"ŵ": "w",
2279	"Ẃ": "W",
2280	"ẃ": "w",
2281	"X̆": "X",
2282	"x̆": "x",
2283	"Ŷ": "Y",
2284	"Å·": "y",
2285	"Ÿ": "Y",
2286	"Y̆": "Y",
2287	"y̆": "y",
2288	"Ź": "Z",
2289	"ź": "z",
2290	"Å»": "Z",
2291	"ż": "z",
2292	"Ž": "Z",
2293	"ž": "z",
2294	"Å¿": "s",
2295	"ƒ": "f",
2296	"Æ ": "O",
2297	"Æ¡": "o",
2298	"Ư": "U",
2299	"ư": "u",
2300	"Ǎ": "A",
2301	"ǎ": "a",
2302	"Ǐ": "I",
2303	"ǐ": "i",
2304	"Ǒ": "O",
2305	"ǒ": "o",
2306	"Ǔ": "U",
2307	"ǔ": "u",
2308	"Ǖ": "U",
2309	"ǖ": "u",
2310	"Ǘ": "U",
2311	"ǘ": "u",
2312	"Ǚ": "U",
2313	"ǚ": "u",
2314	"Ǜ": "U",
2315	"ǜ": "u",
2316	"Ứ": "U",
2317	"ứ": "u",
2318	"Ṹ": "U",
2319	"á¹¹": "u",
2320	"Ǻ": "A",
2321	"Ç»": "a",
2322	"Ǽ": "AE",
2323	"ǽ": "ae",
2324	"Ǿ": "O",
2325	"Ç¿": "o",
2326	"Þ": "TH",
2327	"þ": "th",
2328	"Ṕ": "P",
2329	"ṕ": "p",
2330	"Ṥ": "S",
2331	"á¹¥": "s",
2332	"X́": "X",
2333	"x́": "x",
2334	"Ѓ": "Г",
2335	"ѓ": "г",
2336	"Ќ": "К",
2337	"ќ": "к",
2338	"A̋": "A",
2339	"a̋": "a",
2340	"E̋": "E",
2341	"e̋": "e",
2342	"I̋": "I",
2343	"i̋": "i",
2344	"Ǹ": "N",
2345	"ǹ": "n",
2346	"Ồ": "O",
2347	"ồ": "o",
2348	"Ṑ": "O",
2349	"ṑ": "o",
2350	"Ừ": "U",
2351	"ừ": "u",
2352	"Ẁ": "W",
2353	"ẁ": "w",
2354	"Ỳ": "Y",
2355	"ỳ": "y",
2356	"Ȁ": "A",
2357	"ȁ": "a",
2358	"Ȅ": "E",
2359	"ȅ": "e",
2360	"Ȉ": "I",
2361	"ȉ": "i",
2362	"Ȍ": "O",
2363	"ȍ": "o",
2364	"Ȑ": "R",
2365	"ȑ": "r",
2366	"Ȕ": "U",
2367	"ȕ": "u",
2368	"B̌": "B",
2369	"b̌": "b",
2370	"Č̣": "C",
2371	"č̣": "c",
2372	"Ê̌": "E",
2373	"ê̌": "e",
2374	"F̌": "F",
2375	"f̌": "f",
2376	"Ǧ": "G",
2377	"ǧ": "g",
2378	"Ȟ": "H",
2379	"ȟ": "h",
2380	"J̌": "J",
2381	"ǰ": "j",
2382	"Ǩ": "K",
2383	"Ç©": "k",
2384	"M̌": "M",
2385	"m̌": "m",
2386	"P̌": "P",
2387	"p̌": "p",
2388	"Q̌": "Q",
2389	"q̌": "q",
2390	"Ř̩": "R",
2391	"ř̩": "r",
2392	"Ṧ": "S",
2393	"á¹§": "s",
2394	"V̌": "V",
2395	"v̌": "v",
2396	"W̌": "W",
2397	"w̌": "w",
2398	"X̌": "X",
2399	"x̌": "x",
2400	"Y̌": "Y",
2401	"y̌": "y",
2402	"A̧": "A",
2403	"a̧": "a",
2404	"B̧": "B",
2405	"b̧": "b",
2406	"Ḑ": "D",
2407	"ḑ": "d",
2408	"Ȩ": "E",
2409	"È©": "e",
2410	"Ɛ̧": "E",
2411	"ɛ̧": "e",
2412	"Ḩ": "H",
2413	"ḩ": "h",
2414	"I̧": "I",
2415	"i̧": "i",
2416	"Ɨ̧": "I",
2417	"ɨ̧": "i",
2418	"M̧": "M",
2419	"m̧": "m",
2420	"O̧": "O",
2421	"o̧": "o",
2422	"Q̧": "Q",
2423	"q̧": "q",
2424	"U̧": "U",
2425	"u̧": "u",
2426	"X̧": "X",
2427	"x̧": "x",
2428	"Z̧": "Z",
2429	"z̧": "z",
2430	"й":"и",
2431	"Й":"И",
2432	"ё":"е",
2433	"Ё":"Е",
2434};
2435
2436var chars = Object.keys(characterMap).join('|');
2437var allAccents = new RegExp(chars, 'g');
2438var firstAccent = new RegExp(chars, '');
2439
2440function matcher(match) {
2441	return characterMap[match];
2442}
2443
2444var removeAccents = function(string) {
2445	return string.replace(allAccents, matcher);
2446};
2447
2448var hasAccents = function(string) {
2449	return !!string.match(firstAccent);
2450};
2451
2452module.exports = removeAccents;
2453module.exports.has = hasAccents;
2454module.exports.remove = removeAccents;
2455
2456
2457/***/ }),
2458
2459/***/ 7755:
2460/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2461
2462"use strict";
2463/**
2464 * @license React
2465 * use-sync-external-store-shim.production.min.js
2466 *
2467 * Copyright (c) Facebook, Inc. and its affiliates.
2468 *
2469 * This source code is licensed under the MIT license found in the
2470 * LICENSE file in the root directory of this source tree.
2471 */
2472var e=__webpack_require__(9196);function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
2473function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
2474
2475
2476/***/ }),
2477
2478/***/ 635:
2479/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
2480
2481"use strict";
2482
2483
2484if (true) {
2485  module.exports = __webpack_require__(7755);
2486} else {}
2487
2488
2489/***/ }),
2490
2491/***/ 9196:
2492/***/ ((module) => {
2493
2494"use strict";
2495module.exports = window["React"];
2496
2497/***/ })
2498
2499/******/ 	});
2500/************************************************************************/
2501/******/ 	// The module cache
2502/******/ 	var __webpack_module_cache__ = {};
2503/******/ 	
2504/******/ 	// The require function
2505/******/ 	function __webpack_require__(moduleId) {
2506/******/ 		// Check if module is in cache
2507/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
2508/******/ 		if (cachedModule !== undefined) {
2509/******/ 			return cachedModule.exports;
2510/******/ 		}
2511/******/ 		// Create a new module (and put it into the cache)
2512/******/ 		var module = __webpack_module_cache__[moduleId] = {
2513/******/ 			// no module.id needed
2514/******/ 			// no module.loaded needed
2515/******/ 			exports: {}
2516/******/ 		};
2517/******/ 	
2518/******/ 		// Execute the module function
2519/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
2520/******/ 	
2521/******/ 		// Return the exports of the module
2522/******/ 		return module.exports;
2523/******/ 	}
2524/******/ 	
2525/************************************************************************/
2526/******/ 	/* webpack/runtime/compat get default export */
2527/******/ 	(() => {
2528/******/ 		// getDefaultExport function for compatibility with non-harmony modules
2529/******/ 		__webpack_require__.n = (module) => {
vendor: 3,281 bytes, lines 2530-2605
2530/******/ 			var getter = module && module.__esModule ?
2531/******/ 				() => (module['default']) :
2532/******/ 				() => (module);
2533/******/ 			__webpack_require__.d(getter, { a: getter });
2534/******/ 			return getter;
2535/******/ 		};
2536/******/ 	})();
2537/******/ 	
2538/******/ 	/* webpack/runtime/create fake namespace object */
2539/******/ 	(() => {
2540/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
2541/******/ 		var leafPrototypes;
2542/******/ 		// create a fake namespace object
2543/******/ 		// mode & 1: value is a module id, require it
2544/******/ 		// mode & 2: merge all properties of value into the ns
2545/******/ 		// mode & 4: return value when already ns object
2546/******/ 		// mode & 16: return value when it's Promise-like
2547/******/ 		// mode & 8|1: behave like require
2548/******/ 		__webpack_require__.t = function(value, mode) {
2549/******/ 			if(mode & 1) value = this(value);
2550/******/ 			if(mode & 8) return value;
2551/******/ 			if(typeof value === 'object' && value) {
2552/******/ 				if((mode & 4) && value.__esModule) return value;
2553/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
2554/******/ 			}
2555/******/ 			var ns = Object.create(null);
2556/******/ 			__webpack_require__.r(ns);
2557/******/ 			var def = {};
2558/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
2559/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
2560/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
2561/******/ 			}
2562/******/ 			def['default'] = () => (value);
2563/******/ 			__webpack_require__.d(ns, def);
2564/******/ 			return ns;
2565/******/ 		};
2566/******/ 	})();
2567/******/ 	
2568/******/ 	/* webpack/runtime/define property getters */
2569/******/ 	(() => {
2570/******/ 		// define getter functions for harmony exports
2571/******/ 		__webpack_require__.d = (exports, definition) => {
2572/******/ 			for(var key in definition) {
2573/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
2574/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
2575/******/ 				}
2576/******/ 			}
2577/******/ 		};
2578/******/ 	})();
2579/******/ 	
2580/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
2581/******/ 	(() => {
2582/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
2583/******/ 	})();
2584/******/ 	
2585/******/ 	/* webpack/runtime/make namespace object */
2586/******/ 	(() => {
2587/******/ 		// define __esModule on exports
2588/******/ 		__webpack_require__.r = (exports) => {
2589/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
2590/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2591/******/ 			}
2592/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
2593/******/ 		};
2594/******/ 	})();
2595/******/ 	
2596/******/ 	/* webpack/runtime/nonce */
2597/******/ 	(() => {
2598/******/ 		__webpack_require__.nc = undefined;
2599/******/ 	})();
2600/******/ 	
2601/************************************************************************/
2602var __webpack_exports__ = {};
2603// This entry need to be wrapped in an IIFE because it need to be in strict mode.
2604(() => {
2605"use strict";
2606// ESM COMPAT FLAG
2607__webpack_require__.r(__webpack_exports__);
2608
2609// EXPORTS
2610__webpack_require__.d(__webpack_exports__, {
2611  "AnglePickerControl": () => (/* reexport */ angle_picker_control),
2612  "Animate": () => (/* reexport */ animate),
2613  "Autocomplete": () => (/* reexport */ Autocomplete),
2614  "BaseControl": () => (/* reexport */ base_control),
2615  "BlockQuotation": () => (/* reexport */ external_wp_primitives_namespaceObject.BlockQuotation),
2616  "Button": () => (/* reexport */ build_module_button),
2617  "ButtonGroup": () => (/* reexport */ button_group),
2618  "Card": () => (/* reexport */ card_component),
2619  "CardBody": () => (/* reexport */ card_body_component),
2620  "CardDivider": () => (/* reexport */ card_divider_component),
2621  "CardFooter": () => (/* reexport */ card_footer_component),
2622  "CardHeader": () => (/* reexport */ card_header_component),
2623  "CardMedia": () => (/* reexport */ card_media_component),
2624  "CheckboxControl": () => (/* reexport */ checkbox_control),
2625  "Circle": () => (/* reexport */ external_wp_primitives_namespaceObject.Circle),
2626  "ClipboardButton": () => (/* reexport */ ClipboardButton),
2627  "ColorIndicator": () => (/* reexport */ color_indicator),
2628  "ColorPalette": () => (/* reexport */ color_palette),
2629  "ColorPicker": () => (/* reexport */ LegacyAdapter),
2630  "ComboboxControl": () => (/* reexport */ combobox_control),
2631  "CustomGradientPicker": () => (/* reexport */ custom_gradient_picker),
2632  "CustomSelectControl": () => (/* reexport */ StableCustomSelectControl),
2633  "Dashicon": () => (/* reexport */ dashicon),
2634  "DatePicker": () => (/* reexport */ date),
2635  "DateTimePicker": () => (/* reexport */ build_module_date_time),
2636  "Disabled": () => (/* reexport */ disabled),
2637  "Draggable": () => (/* reexport */ draggable),
2638  "DropZone": () => (/* reexport */ drop_zone),
2639  "DropZoneProvider": () => (/* reexport */ DropZoneProvider),
2640  "Dropdown": () => (/* reexport */ dropdown),
2641  "DropdownMenu": () => (/* reexport */ dropdown_menu),
2642  "DuotonePicker": () => (/* reexport */ duotone_picker),
2643  "DuotoneSwatch": () => (/* reexport */ duotone_swatch),
2644  "ExternalLink": () => (/* reexport */ external_link),
2645  "Fill": () => (/* reexport */ slot_fill_Fill),
2646  "Flex": () => (/* reexport */ flex_component),
2647  "FlexBlock": () => (/* reexport */ flex_block_component),
2648  "FlexItem": () => (/* reexport */ flex_item_component),
2649  "FocalPointPicker": () => (/* reexport */ focal_point_picker),
2650  "FocusReturnProvider": () => (/* reexport */ with_focus_return_Provider),
2651  "FocusableIframe": () => (/* reexport */ FocusableIframe),
2652  "FontSizePicker": () => (/* reexport */ font_size_picker),
2653  "FormFileUpload": () => (/* reexport */ form_file_upload),
2654  "FormToggle": () => (/* reexport */ form_toggle),
2655  "FormTokenField": () => (/* reexport */ form_token_field),
2656  "G": () => (/* reexport */ external_wp_primitives_namespaceObject.G),
2657  "GradientPicker": () => (/* reexport */ gradient_picker),
2658  "Guide": () => (/* reexport */ guide),
2659  "GuidePage": () => (/* reexport */ GuidePage),
2660  "HorizontalRule": () => (/* reexport */ external_wp_primitives_namespaceObject.HorizontalRule),
2661  "Icon": () => (/* reexport */ build_module_icon),
2662  "IconButton": () => (/* reexport */ deprecated),
2663  "IsolatedEventContainer": () => (/* reexport */ isolated_event_container),
2664  "KeyboardShortcuts": () => (/* reexport */ keyboard_shortcuts),
2665  "Line": () => (/* reexport */ external_wp_primitives_namespaceObject.Line),
2666  "MenuGroup": () => (/* reexport */ menu_group),
2667  "MenuItem": () => (/* reexport */ menu_item),
2668  "MenuItemsChoice": () => (/* reexport */ menu_items_choice),
2669  "Modal": () => (/* reexport */ modal),
2670  "NavigableMenu": () => (/* reexport */ navigable_container_menu),
2671  "Notice": () => (/* reexport */ build_module_notice),
2672  "NoticeList": () => (/* reexport */ list),
2673  "Panel": () => (/* reexport */ panel),
2674  "PanelBody": () => (/* reexport */ body),
2675  "PanelHeader": () => (/* reexport */ panel_header),
2676  "PanelRow": () => (/* reexport */ row),
2677  "Path": () => (/* reexport */ external_wp_primitives_namespaceObject.Path),
2678  "Placeholder": () => (/* reexport */ placeholder),
2679  "Polygon": () => (/* reexport */ external_wp_primitives_namespaceObject.Polygon),
2680  "Popover": () => (/* reexport */ popover),
2681  "QueryControls": () => (/* reexport */ query_controls),
2682  "RadioControl": () => (/* reexport */ radio_control),
2683  "RangeControl": () => (/* reexport */ range_control),
2684  "Rect": () => (/* reexport */ external_wp_primitives_namespaceObject.Rect),
2685  "ResizableBox": () => (/* reexport */ resizable_box),
2686  "ResponsiveWrapper": () => (/* reexport */ responsive_wrapper),
2687  "SVG": () => (/* reexport */ external_wp_primitives_namespaceObject.SVG),
2688  "SandBox": () => (/* reexport */ sandbox),
2689  "ScrollLock": () => (/* reexport */ scroll_lock),
2690  "SearchControl": () => (/* reexport */ search_control),
2691  "SelectControl": () => (/* reexport */ select_control),
2692  "Slot": () => (/* reexport */ slot_fill_Slot),
2693  "SlotFillProvider": () => (/* reexport */ Provider),
2694  "Snackbar": () => (/* reexport */ snackbar),
2695  "SnackbarList": () => (/* reexport */ snackbar_list),
2696  "Spinner": () => (/* reexport */ spinner),
2697  "TabPanel": () => (/* reexport */ tab_panel),
2698  "TabbableContainer": () => (/* reexport */ tabbable),
2699  "TextControl": () => (/* reexport */ text_control),
2700  "TextHighlight": () => (/* reexport */ text_highlight),
2701  "TextareaControl": () => (/* reexport */ textarea_control),
2702  "TimePicker": () => (/* reexport */ time),
2703  "Tip": () => (/* reexport */ build_module_tip),
2704  "ToggleControl": () => (/* reexport */ toggle_control),
2705  "Toolbar": () => (/* reexport */ toolbar),
2706  "ToolbarButton": () => (/* reexport */ toolbar_button),
2707  "ToolbarDropdownMenu": () => (/* reexport */ toolbar_dropdown_menu),
2708  "ToolbarGroup": () => (/* reexport */ toolbar_group),
2709  "ToolbarItem": () => (/* reexport */ toolbar_item),
2710  "Tooltip": () => (/* reexport */ tooltip),
2711  "TreeSelect": () => (/* reexport */ tree_select),
2712  "VisuallyHidden": () => (/* reexport */ visually_hidden_component),
2713  "__experimentalAlignmentMatrixControl": () => (/* reexport */ alignment_matrix_control),
2714  "__experimentalApplyValueToSides": () => (/* reexport */ applyValueToSides),
2715  "__experimentalBorderBoxControl": () => (/* reexport */ border_box_control_component),
2716  "__experimentalBorderControl": () => (/* reexport */ border_control_component),
2717  "__experimentalBoxControl": () => (/* reexport */ box_control),
2718  "__experimentalConfirmDialog": () => (/* reexport */ confirm_dialog_component),
2719  "__experimentalDimensionControl": () => (/* reexport */ dimension_control),
2720  "__experimentalDivider": () => (/* reexport */ divider_component),
2721  "__experimentalDropdownContentWrapper": () => (/* reexport */ dropdown_content_wrapper),
2722  "__experimentalElevation": () => (/* reexport */ elevation_component),
2723  "__experimentalGrid": () => (/* reexport */ grid_component),
2724  "__experimentalHStack": () => (/* reexport */ h_stack_component),
2725  "__experimentalHasSplitBorders": () => (/* reexport */ hasSplitBorders),
2726  "__experimentalHeading": () => (/* reexport */ heading_component),
2727  "__experimentalInputControl": () => (/* reexport */ input_control),
2728  "__experimentalInputControlPrefixWrapper": () => (/* reexport */ input_prefix_wrapper),
2729  "__experimentalInputControlSuffixWrapper": () => (/* reexport */ input_suffix_wrapper),
2730  "__experimentalIsDefinedBorder": () => (/* reexport */ isDefinedBorder),
2731  "__experimentalIsEmptyBorder": () => (/* reexport */ isEmptyBorder),
2732  "__experimentalItem": () => (/* reexport */ item_component),
2733  "__experimentalItemGroup": () => (/* reexport */ item_group_component),
2734  "__experimentalNavigation": () => (/* reexport */ navigation),
2735  "__experimentalNavigationBackButton": () => (/* reexport */ back_button),
2736  "__experimentalNavigationGroup": () => (/* reexport */ group),
2737  "__experimentalNavigationItem": () => (/* reexport */ navigation_item),
2738  "__experimentalNavigationMenu": () => (/* reexport */ navigation_menu),
2739  "__experimentalNavigatorBackButton": () => (/* reexport */ navigator_back_button_component),
2740  "__experimentalNavigatorButton": () => (/* reexport */ navigator_button_component),
2741  "__experimentalNavigatorProvider": () => (/* reexport */ navigator_provider_component),
2742  "__experimentalNavigatorScreen": () => (/* reexport */ navigator_screen_component),
2743  "__experimentalNavigatorToParentButton": () => (/* reexport */ navigator_to_parent_button_component),
2744  "__experimentalNumberControl": () => (/* reexport */ number_control),
2745  "__experimentalPaletteEdit": () => (/* reexport */ palette_edit),
2746  "__experimentalParseQuantityAndUnitFromRawValue": () => (/* reexport */ parseQuantityAndUnitFromRawValue),
2747  "__experimentalRadio": () => (/* reexport */ radio_group_radio),
2748  "__experimentalRadioGroup": () => (/* reexport */ radio_group),
2749  "__experimentalScrollable": () => (/* reexport */ scrollable_component),
2750  "__experimentalSpacer": () => (/* reexport */ spacer_component),
2751  "__experimentalStyleProvider": () => (/* reexport */ style_provider),
2752  "__experimentalSurface": () => (/* reexport */ surface_component),
2753  "__experimentalText": () => (/* reexport */ text_component),
2754  "__experimentalToggleGroupControl": () => (/* reexport */ toggle_group_control_component),
2755  "__experimentalToggleGroupControlOption": () => (/* reexport */ toggle_group_control_option_component),
2756  "__experimentalToggleGroupControlOptionIcon": () => (/* reexport */ toggle_group_control_option_icon_component),
2757  "__experimentalToolbarContext": () => (/* reexport */ toolbar_context),
2758  "__experimentalToolsPanel": () => (/* reexport */ tools_panel_component),
2759  "__experimentalToolsPanelContext": () => (/* reexport */ ToolsPanelContext),
2760  "__experimentalToolsPanelItem": () => (/* reexport */ tools_panel_item_component),
2761  "__experimentalTreeGrid": () => (/* reexport */ tree_grid),
2762  "__experimentalTreeGridCell": () => (/* reexport */ cell),
2763  "__experimentalTreeGridItem": () => (/* reexport */ tree_grid_item),
2764  "__experimentalTreeGridRow": () => (/* reexport */ tree_grid_row),
2765  "__experimentalTruncate": () => (/* reexport */ truncate_component),
2766  "__experimentalUnitControl": () => (/* reexport */ unit_control),
2767  "__experimentalUseCustomUnits": () => (/* reexport */ useCustomUnits),
2768  "__experimentalUseNavigator": () => (/* reexport */ use_navigator),
2769  "__experimentalUseSlot": () => (/* reexport */ useSlot),
2770  "__experimentalUseSlotFills": () => (/* reexport */ useSlotFills),
2771  "__experimentalVStack": () => (/* reexport */ v_stack_component),
2772  "__experimentalView": () => (/* reexport */ component),
2773  "__experimentalZStack": () => (/* reexport */ z_stack_component),
2774  "__unstableAnimatePresence": () => (/* reexport */ AnimatePresence),
2775  "__unstableComposite": () => (/* reexport */ Composite),
2776  "__unstableCompositeGroup": () => (/* reexport */ CompositeGroup),
2777  "__unstableCompositeItem": () => (/* reexport */ CompositeItem),
2778  "__unstableDisclosureContent": () => (/* reexport */ DisclosureContent_DisclosureContent),
2779  "__unstableGetAnimateClassName": () => (/* reexport */ getAnimateClassName),
2780  "__unstableMotion": () => (/* reexport */ motion),
2781  "__unstableMotionContext": () => (/* reexport */ MotionContext),
2782  "__unstableUseAutocompleteProps": () => (/* reexport */ useAutocompleteProps),
2783  "__unstableUseCompositeState": () => (/* reexport */ useCompositeState),
2784  "__unstableUseNavigateRegions": () => (/* reexport */ useNavigateRegions),
2785  "createSlotFill": () => (/* reexport */ createSlotFill),
2786  "navigateRegions": () => (/* reexport */ navigate_regions),
2787  "privateApis": () => (/* reexport */ privateApis),
2788  "useBaseControlProps": () => (/* reexport */ useBaseControlProps),
2789  "withConstrainedTabbing": () => (/* reexport */ with_constrained_tabbing),
2790  "withFallbackStyles": () => (/* reexport */ with_fallback_styles),
2791  "withFilters": () => (/* reexport */ withFilters),
2792  "withFocusOutside": () => (/* reexport */ with_focus_outside),
2793  "withFocusReturn": () => (/* reexport */ with_focus_return),
2794  "withNotices": () => (/* reexport */ with_notices),
2795  "withSpokenMessages": () => (/* reexport */ with_spoken_messages)
2796});
2797
2798// NAMESPACE OBJECT: ./packages/components/build-module/text/styles.js
2799var text_styles_namespaceObject = {};
2800__webpack_require__.r(text_styles_namespaceObject);
2801__webpack_require__.d(text_styles_namespaceObject, {
2802  "Text": () => (Text),
2803  "block": () => (styles_block),
2804  "destructive": () => (destructive),
2805  "highlighterText": () => (highlighterText),
2806  "muted": () => (muted),
2807  "positive": () => (positive),
2808  "upperCase": () => (upperCase)
2809});
2810
2811// NAMESPACE OBJECT: ./packages/components/build-module/ui/tooltip/styles.js
2812var tooltip_styles_namespaceObject = {};
2813__webpack_require__.r(tooltip_styles_namespaceObject);
2814__webpack_require__.d(tooltip_styles_namespaceObject, {
2815  "TooltipContent": () => (TooltipContent),
2816  "TooltipPopoverView": () => (TooltipPopoverView),
2817  "TooltipShortcut": () => (TooltipShortcut),
2818  "noOutline": () => (noOutline)
2819});
2820
2821// NAMESPACE OBJECT: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
2822var toggle_group_control_option_base_styles_namespaceObject = {};
2823__webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject);
2824__webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, {
2825  "ButtonContentView": () => (ButtonContentView),
2826  "LabelView": () => (LabelView),
2827  "backdropView": () => (backdropView),
2828  "buttonView": () => (buttonView),
2829  "labelBlock": () => (labelBlock)
2830});
2831
2832;// CONCATENATED MODULE: external ["wp","primitives"]
2833const external_wp_primitives_namespaceObject = window["wp"]["primitives"];
2834;// CONCATENATED MODULE: external ["wp","element"]
2835const external_wp_element_namespaceObject = window["wp"]["element"];
2836// EXTERNAL MODULE: ./node_modules/classnames/index.js
2837var classnames = __webpack_require__(4403);
2838var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
2839;// CONCATENATED MODULE: external ["wp","i18n"]
2840const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
2841;// CONCATENATED MODULE: external ["wp","compose"]
2842const external_wp_compose_namespaceObject = window["wp"]["compose"];
2843;// CONCATENATED MODULE: ./node_modules/reakit/es/_rollupPluginBabelHelpers-1f0bf8c2.js
2844function _defineProperty(obj, key, value) {
2845  if (key in obj) {
2846    Object.defineProperty(obj, key, {
2847      value: value,
2848      enumerable: true,
2849      configurable: true,
2850      writable: true
2851    });
2852  } else {
2853    obj[key] = value;
2854  }
2855
2856  return obj;
2857}
2858
2859function ownKeys(object, enumerableOnly) {
2860  var keys = Object.keys(object);
2861
2862  if (Object.getOwnPropertySymbols) {
2863    var symbols = Object.getOwnPropertySymbols(object);
2864    if (enumerableOnly) symbols = symbols.filter(function (sym) {
2865      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
2866    });
2867    keys.push.apply(keys, symbols);
2868  }
2869
2870  return keys;
2871}
2872
2873function _objectSpread2(target) {
2874  for (var i = 1; i < arguments.length; i++) {
2875    var source = arguments[i] != null ? arguments[i] : {};
2876
2877    if (i % 2) {
2878      ownKeys(Object(source), true).forEach(function (key) {
2879        _defineProperty(target, key, source[key]);
2880      });
2881    } else if (Object.getOwnPropertyDescriptors) {
2882      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
2883    } else {
2884      ownKeys(Object(source)).forEach(function (key) {
2885        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
2886      });
2887    }
2888  }
2889
2890  return target;
2891}
2892
2893function _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) {
2894  if (source == null) return {};
2895  var target = {};
2896  var sourceKeys = Object.keys(source);
2897  var key, i;
2898
2899  for (i = 0; i < sourceKeys.length; i++) {
2900    key = sourceKeys[i];
2901    if (excluded.indexOf(key) >= 0) continue;
2902    target[key] = source[key];
2903  }
2904
2905  return target;
2906}
2907
2908function _unsupportedIterableToArray(o, minLen) {
2909  if (!o) return;
2910  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
2911  var n = Object.prototype.toString.call(o).slice(8, -1);
2912  if (n === "Object" && o.constructor) n = o.constructor.name;
2913  if (n === "Map" || n === "Set") return Array.from(o);
2914  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
2915}
2916
2917function _arrayLikeToArray(arr, len) {
2918  if (len == null || len > arr.length) len = arr.length;
2919
2920  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
2921
2922  return arr2;
2923}
2924
2925function _createForOfIteratorHelperLoose(o, allowArrayLike) {
2926  var it;
2927
2928  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
2929    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
2930      if (it) o = it;
2931      var i = 0;
2932      return function () {
2933        if (i >= o.length) return {
2934          done: true
2935        };
2936        return {
2937          done: false,
2938          value: o[i++]
2939        };
2940      };
2941    }
2942
2943    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2944  }
2945
2946  it = o[Symbol.iterator]();
2947  return it.next.bind(it);
2948}
2949
2950
2951
2952// EXTERNAL MODULE: external "React"
2953var external_React_ = __webpack_require__(9196);
2954var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2);
2955var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
2956;// CONCATENATED MODULE: ./node_modules/reakit-system/es/_rollupPluginBabelHelpers-0c84a174.js
2957function _rollupPluginBabelHelpers_0c84a174_defineProperty(obj, key, value) {
2958  if (key in obj) {
2959    Object.defineProperty(obj, key, {
2960      value: value,
2961      enumerable: true,
2962      configurable: true,
2963      writable: true
2964    });
2965  } else {
2966    obj[key] = value;
2967  }
2968
2969  return obj;
2970}
2971
2972function _rollupPluginBabelHelpers_0c84a174_ownKeys(object, enumerableOnly) {
2973  var keys = Object.keys(object);
2974
2975  if (Object.getOwnPropertySymbols) {
2976    var symbols = Object.getOwnPropertySymbols(object);
2977    if (enumerableOnly) symbols = symbols.filter(function (sym) {
2978      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
2979    });
2980    keys.push.apply(keys, symbols);
2981  }
2982
2983  return keys;
2984}
2985
2986function _rollupPluginBabelHelpers_0c84a174_objectSpread2(target) {
2987  for (var i = 1; i < arguments.length; i++) {
2988    var source = arguments[i] != null ? arguments[i] : {};
2989
2990    if (i % 2) {
2991      _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source), true).forEach(function (key) {
2992        _rollupPluginBabelHelpers_0c84a174_defineProperty(target, key, source[key]);
2993      });
2994    } else if (Object.getOwnPropertyDescriptors) {
2995      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
2996    } else {
2997      _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source)).forEach(function (key) {
2998        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
2999      });
3000    }
3001  }
3002
3003  return target;
3004}
3005
3006function _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(source, excluded) {
3007  if (source == null) return {};
3008  var target = {};
3009  var sourceKeys = Object.keys(source);
3010  var key, i;
3011
3012  for (i = 0; i < sourceKeys.length; i++) {
3013    key = sourceKeys[i];
3014    if (excluded.indexOf(key) >= 0) continue;
3015    target[key] = source[key];
3016  }
3017
3018  return target;
3019}
3020
3021function _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o, minLen) {
3022  if (!o) return;
3023  if (typeof o === "string") return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen);
3024  var n = Object.prototype.toString.call(o).slice(8, -1);
3025  if (n === "Object" && o.constructor) n = o.constructor.name;
3026  if (n === "Map" || n === "Set") return Array.from(o);
3027  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen);
3028}
3029
3030function _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(arr, len) {
3031  if (len == null || len > arr.length) len = arr.length;
3032
3033  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
3034
3035  return arr2;
3036}
3037
3038function _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(o, allowArrayLike) {
3039  var it;
3040
3041  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
3042    if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
3043      if (it) o = it;
3044      var i = 0;
3045      return function () {
3046        if (i >= o.length) return {
3047          done: true
3048        };
3049        return {
3050          done: false,
3051          value: o[i++]
3052        };
3053      };
3054    }
3055
3056    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
3057  }
3058
3059  it = o[Symbol.iterator]();
3060  return it.next.bind(it);
3061}
3062
3063
3064
3065;// CONCATENATED MODULE: ./node_modules/reakit-system/es/SystemContext.js
3066
3067
3068var SystemContext = /*#__PURE__*/(0,external_React_.createContext)({});
3069
3070
3071
3072;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useCreateElement.js
3073
3074
3075
3076
3077function isRenderProp(children) {
3078  return typeof children === "function";
3079}
3080
3081/**
3082 * Custom hook that will call `children` if it's a function. If
3083 * `useCreateElement` has been passed to the context, it'll be used instead.
3084 *
3085 * @example
3086 * import React from "react";
3087 * import { SystemProvider, useCreateElement } from "reakit-system";
3088 *
3089 * const system = {
3090 *   useCreateElement(type, props, children = props.children) {
3091 *     // very similar to what `useCreateElement` does already
3092 *     if (typeof children === "function") {
3093 *       const { children: _, ...rest } = props;
3094 *       return children(rest);
3095 *     }
3096 *     return React.createElement(type, props, children);
3097 *   },
3098 * };
3099 *
3100 * function Component(props) {
3101 *   return useCreateElement("div", props);
3102 * }
3103 *
3104 * function App() {
3105 *   return (
3106 *     <SystemProvider unstable_system={system}>
3107 *       <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
3108 *     </SystemProvider>
3109 *   );
3110 * }
3111 */
3112
3113var useCreateElement = function useCreateElement(type, props, children) {
3114  if (children === void 0) {
3115    children = props.children;
3116  }
3117
3118  var context = (0,external_React_.useContext)(SystemContext);
3119
3120  if (context.useCreateElement) {
3121    return context.useCreateElement(type, props, children);
3122  }
3123
3124  if (typeof type === "string" && isRenderProp(children)) {
3125    var _ = props.children,
3126        rest = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(props, ["children"]);
3127
3128    return children(rest);
3129  }
3130
3131  return /*#__PURE__*/(0,external_React_.createElement)(type, props, children);
3132};
3133
3134
3135
3136;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/_rollupPluginBabelHelpers-1f0bf8c2.js
3137function _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(obj, key, value) {
3138  if (key in obj) {
3139    Object.defineProperty(obj, key, {
3140      value: value,
3141      enumerable: true,
3142      configurable: true,
3143      writable: true
3144    });
3145  } else {
3146    obj[key] = value;
3147  }
3148
3149  return obj;
3150}
3151
3152function _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(object, enumerableOnly) {
3153  var keys = Object.keys(object);
3154
3155  if (Object.getOwnPropertySymbols) {
3156    var symbols = Object.getOwnPropertySymbols(object);
3157    if (enumerableOnly) symbols = symbols.filter(function (sym) {
3158      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
3159    });
3160    keys.push.apply(keys, symbols);
3161  }
3162
3163  return keys;
3164}
3165
3166function _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(target) {
3167  for (var i = 1; i < arguments.length; i++) {
3168    var source = arguments[i] != null ? arguments[i] : {};
3169
3170    if (i % 2) {
3171      _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source), true).forEach(function (key) {
3172        _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(target, key, source[key]);
3173      });
3174    } else if (Object.getOwnPropertyDescriptors) {
3175      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
3176    } else {
3177      _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source)).forEach(function (key) {
3178        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
3179      });
3180    }
3181  }
3182
3183  return target;
3184}
3185
3186function es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) {
3187  if (source == null) return {};
3188  var target = {};
3189  var sourceKeys = Object.keys(source);
3190  var key, i;
3191
3192  for (i = 0; i < sourceKeys.length; i++) {
3193    key = sourceKeys[i];
3194    if (excluded.indexOf(key) >= 0) continue;
3195    target[key] = source[key];
3196  }
3197
3198  return target;
3199}
3200
3201function _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o, minLen) {
3202  if (!o) return;
3203  if (typeof o === "string") return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen);
3204  var n = Object.prototype.toString.call(o).slice(8, -1);
3205  if (n === "Object" && o.constructor) n = o.constructor.name;
3206  if (n === "Map" || n === "Set") return Array.from(o);
3207  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen);
3208}
3209
3210function _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(arr, len) {
3211  if (len == null || len > arr.length) len = arr.length;
3212
3213  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
3214
3215  return arr2;
3216}
3217
3218function _rollupPluginBabelHelpers_1f0bf8c2_createForOfIteratorHelperLoose(o, allowArrayLike) {
3219  var it;
3220
3221  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
3222    if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
3223      if (it) o = it;
3224      var i = 0;
3225      return function () {
3226        if (i >= o.length) return {
3227          done: true
3228        };
3229        return {
3230          done: false,
3231          value: o[i++]
3232        };
3233      };
3234    }
3235
3236    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
3237  }
3238
3239  it = o[Symbol.iterator]();
3240  return it.next.bind(it);
3241}
3242
3243
3244
3245;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isObject.js
3246/**
3247 * Checks whether `arg` is an object or not.
3248 *
3249 * @returns {boolean}
3250 */
3251function isObject_isObject(arg) {
3252  return typeof arg === "object" && arg != null;
3253}
3254
3255
3256
3257;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPlainObject.js
3258
3259
3260/**
3261 * Checks whether `arg` is a plain object or not.
3262 *
3263 * @returns {boolean}
3264 */
3265
3266function isPlainObject(arg) {
3267  var _proto$constructor;
3268
3269  if (!isObject_isObject(arg)) return false;
3270  var proto = Object.getPrototypeOf(arg);
3271  if (proto == null) return true;
3272  return ((_proto$constructor = proto.constructor) === null || _proto$constructor === void 0 ? void 0 : _proto$constructor.toString()) === Object.toString();
3273}
3274
3275
3276
3277;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/splitProps.js
3278
3279
3280
3281
3282/**
3283 * Splits an object (`props`) into a tuple where the first item is an object
3284 * with the passed `keys`, and the second item is an object with these keys
3285 * omitted.
3286 *
3287 * @deprecated will be removed in version 2
3288 *
3289 * @example
3290 * import { splitProps } from "reakit-utils";
3291 *
3292 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
3293 */
3294
3295function __deprecatedSplitProps(props, keys) {
3296  var propsKeys = Object.keys(props);
3297  var picked = {};
3298  var omitted = {};
3299
3300  for (var _i = 0, _propsKeys = propsKeys; _i < _propsKeys.length; _i++) {
3301    var key = _propsKeys[_i];
3302
3303    if (keys.indexOf(key) >= 0) {
3304      picked[key] = props[key];
3305    } else {
3306      omitted[key] = props[key];
3307    }
3308  }
3309
3310  return [picked, omitted];
3311}
3312/**
3313 * Splits an object (`props`) into a tuple where the first item
3314 * is the `state` property, and the second item is the rest of the properties.
3315 *
3316 * It is also backward compatible with version 1. If `keys` are passed then
3317 * splits an object (`props`) into a tuple where the first item is an object
3318 * with the passed `keys`, and the second item is an object with these keys
3319 * omitted.
3320 *
3321 * @example
3322 * import { splitProps } from "reakit-utils";
3323 *
3324 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
3325 *
3326 * @example
3327 * import { splitProps } from "reakit-utils";
3328 *
3329 * splitProps({ state: { a: "a" }, b: "b" }); // [{ a: "a" }, { b: "b" }]
3330 */
3331
3332
3333function splitProps(props, keys) {
3334  if (keys === void 0) {
3335    keys = [];
3336  }
3337
3338  if (!isPlainObject(props.state)) {
3339    return __deprecatedSplitProps(props, keys);
3340  }
3341
3342  var _deprecatedSplitProp = __deprecatedSplitProps(props, [].concat(keys, ["state"])),
3343      picked = _deprecatedSplitProp[0],
3344      omitted = _deprecatedSplitProp[1];
3345
3346  var state = picked.state,
3347      restPicked = es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(picked, ["state"]);
3348
3349  return [_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, state), restPicked), omitted];
3350}
3351
3352
3353
3354;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/shallowEqual.js
3355/**
3356 * Compares two objects.
3357 *
3358 * @example
3359 * import { shallowEqual } from "reakit-utils";
3360 *
3361 * shallowEqual({ a: "a" }, {}); // false
3362 * shallowEqual({ a: "a" }, { b: "b" }); // false
3363 * shallowEqual({ a: "a" }, { a: "a" }); // true
3364 * shallowEqual({ a: "a" }, { a: "a", b: "b" }); // false
3365 */
3366function shallowEqual(objA, objB) {
3367  if (objA === objB) return true;
3368  if (!objA) return false;
3369  if (!objB) return false;
3370  if (typeof objA !== "object") return false;
3371  if (typeof objB !== "object") return false;
3372  var aKeys = Object.keys(objA);
3373  var bKeys = Object.keys(objB);
3374  var length = aKeys.length;
3375  if (bKeys.length !== length) return false;
3376
3377  for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
3378    var key = _aKeys[_i];
3379
3380    if (objA[key] !== objB[key]) {
3381      return false;
3382    }
3383  }
3384
3385  return true;
3386}
3387
3388
3389
3390;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/normalizePropsAreEqual.js
3391
3392
3393
3394
3395/**
3396 * This higher order functions take `propsAreEqual` function and
3397 * returns a new function which normalizes the props.
3398 *
3399 * Normalizing in our case is making sure the `propsAreEqual` works with
3400 * both version 1 (object spreading) and version 2 (state object) state passing.
3401 *
3402 * To achieve this, the returned function in case of a state object
3403 * will spread the state object in both `prev` and `next props.
3404 *
3405 * Other case it just returns the function as is which makes sure
3406 * that we are still backward compatible
3407 */
3408function normalizePropsAreEqual(propsAreEqual) {
3409  if (propsAreEqual.name === "normalizePropsAreEqualInner") {
3410    return propsAreEqual;
3411  }
3412
3413  return function normalizePropsAreEqualInner(prev, next) {
3414    if (!isPlainObject(prev.state) || !isPlainObject(next.state)) {
3415      return propsAreEqual(prev, next);
3416    }
3417
3418    return propsAreEqual(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, prev.state), prev), _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, next.state), next));
3419  };
3420}
3421
3422
3423
3424;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createComponent.js
3425
3426
3427
3428
3429
3430
3431
3432
3433function createComponent_forwardRef(component) {
3434  return /*#__PURE__*/(0,external_React_.forwardRef)(component);
3435}
3436
3437function memo(component, propsAreEqual) {
3438  return /*#__PURE__*/(0,external_React_.memo)(component, propsAreEqual);
3439}
3440
3441/**
3442 * Creates a React component.
3443 *
3444 * @example
3445 * import { createComponent } from "reakit-system";
3446 *
3447 * const A = createComponent({ as: "a" });
3448 *
3449 * @param options
3450 */
3451function createComponent(_ref) {
3452  var type = _ref.as,
3453      useHook = _ref.useHook,
3454      shouldMemo = _ref.memo,
3455      _ref$propsAreEqual = _ref.propsAreEqual,
3456      propsAreEqual = _ref$propsAreEqual === void 0 ? useHook === null || useHook === void 0 ? void 0 : useHook.unstable_propsAreEqual : _ref$propsAreEqual,
3457      _ref$keys = _ref.keys,
3458      keys = _ref$keys === void 0 ? (useHook === null || useHook === void 0 ? void 0 : useHook.__keys) || [] : _ref$keys,
3459      _ref$useCreateElement = _ref.useCreateElement,
3460      useCreateElement$1 = _ref$useCreateElement === void 0 ? useCreateElement : _ref$useCreateElement;
3461
3462  var Comp = function Comp(_ref2, ref) {
3463    var _ref2$as = _ref2.as,
3464        as = _ref2$as === void 0 ? type : _ref2$as,
3465        props = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_ref2, ["as"]);
3466
3467    if (useHook) {
3468      var _as$render;
3469
3470      var _splitProps = splitProps(props, keys),
3471          _options = _splitProps[0],
3472          htmlProps = _splitProps[1];
3473
3474      var _useHook = useHook(_options, _rollupPluginBabelHelpers_0c84a174_objectSpread2({
3475        ref: ref
3476      }, htmlProps)),
3477          wrapElement = _useHook.wrapElement,
3478          elementProps = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_useHook, ["wrapElement"]); // @ts-ignore
3479
3480
3481      var asKeys = ((_as$render = as.render) === null || _as$render === void 0 ? void 0 : _as$render.__keys) || as.__keys;
3482      var asOptions = asKeys && splitProps(props, asKeys)[0];
3483      var allProps = asOptions ? _rollupPluginBabelHelpers_0c84a174_objectSpread2
3483(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, elementProps), asOptions) : elementProps;
3484
3485      var _element = useCreateElement$1(as, allProps);
3486
3487      if (wrapElement) {
3488        return wrapElement(_element);
3489      }
3490
3491      return _element;
3492    }
3493
3494    return useCreateElement$1(as, _rollupPluginBabelHelpers_0c84a174_objectSpread2({
3495      ref: ref
3496    }, props));
3497  };
3498
3499  if (false) {}
3500
3501  Comp = createComponent_forwardRef(Comp);
3502
3503  if (shouldMemo) {
3504    Comp = memo(Comp, propsAreEqual && normalizePropsAreEqual(propsAreEqual));
3505  }
3506
3507  Comp.__keys = keys;
3508  Comp.unstable_propsAreEqual = normalizePropsAreEqual(propsAreEqual || shallowEqual);
3509  return Comp;
3510}
3511
3512
3513
3514;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useToken.js
3515
3516
3517
3518/**
3519 * React custom hook that returns the value of any token defined in the
3520 * SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
3521 * and [`useProps`](#useprops).
3522 *
3523 * @example
3524 * import { SystemProvider, useToken } from "reakit-system";
3525 *
3526 * const system = {
3527 *   token: "value",
3528 * };
3529 *
3530 * function Component(props) {
3531 *   const token = useToken("token", "default value");
3532 *   return <div {...props}>{token}</div>;
3533 * }
3534 *
3535 * function App() {
3536 *   return (
3537 *     <SystemProvider unstable_system={system}>
3538 *       <Component />
3539 *     </SystemProvider>
3540 *   );
3541 * }
3542 */
3543
3544function useToken(token, defaultValue) {
3545  (0,external_React_.useDebugValue)(token);
3546  var context = (0,external_React_.useContext)(SystemContext);
3547  return context[token] != null ? context[token] : defaultValue;
3548}
3549
3550
3551
3552;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useProps.js
3553
3554
3555
3556
3557/**
3558 * React custom hook that returns the props returned by a given
3559 * `use${name}Props` in the SystemContext.
3560 *
3561 * @example
3562 * import { SystemProvider, useProps } from "reakit-system";
3563 *
3564 * const system = {
3565 *   useAProps(options, htmlProps) {
3566 *     return {
3567 *       ...htmlProps,
3568 *       href: options.url,
3569 *     };
3570 *   },
3571 * };
3572 *
3573 * function A({ url, ...htmlProps }) {
3574 *   const props = useProps("A", { url }, htmlProps);
3575 *   return <a {...props} />;
3576 * }
3577 *
3578 * function App() {
3579 *   return (
3580 *     <SystemProvider unstable_system={system}>
3581 *       <A url="url">It will convert url into href in useAProps</A>
3582 *     </SystemProvider>
3583 *   );
3584 * }
3585 */
3586
3587function useProps(name, options, htmlProps) {
3588  if (options === void 0) {
3589    options = {};
3590  }
3591
3592  if (htmlProps === void 0) {
3593    htmlProps = {};
3594  }
3595
3596  var hookName = "use" + name + "Props";
3597  (0,external_React_.useDebugValue)(hookName);
3598  var useHook = useToken(hookName);
3599
3600  if (useHook) {
3601    return useHook(options, htmlProps);
3602  }
3603
3604  return htmlProps;
3605}
3606
3607
3608
3609;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useOptions.js
3610
3611
3612
3613
3614
3615/**
3616 * React custom hook that returns the options returned by a given
3617 * `use${name}Options` in the SystemContext.
3618 *
3619 * @example
3620 * import React from "react";
3621 * import { SystemProvider, useOptions } from "reakit-system";
3622 *
3623 * const system = {
3624 *   useAOptions(options, htmlProps) {
3625 *     return {
3626 *       ...options,
3627 *       url: htmlProps.href,
3628 *     };
3629 *   },
3630 * };
3631 *
3632 * function A({ url, ...htmlProps }) {
3633 *   const options = useOptions("A", { url }, htmlProps);
3634 *   return <a href={options.url} {...htmlProps} />;
3635 * }
3636 *
3637 * function App() {
3638 *   return (
3639 *     <SystemProvider unstable_system={system}>
3640 *       <A href="url">
3641 *         It will convert href into url in useAOptions and then url into href in A
3642 *       </A>
3643 *     </SystemProvider>
3644 *   );
3645 * }
3646 */
3647
3648function useOptions(name, options, htmlProps) {
3649  if (options === void 0) {
3650    options = {};
3651  }
3652
3653  if (htmlProps === void 0) {
3654    htmlProps = {};
3655  }
3656
3657  var hookName = "use" + name + "Options";
3658  (0,external_React_.useDebugValue)(hookName);
3659  var useHook = useToken(hookName);
3660
3661  if (useHook) {
3662    return _rollupPluginBabelHelpers_0c84a174_objectSpread2(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, options), useHook(options, htmlProps));
3663  }
3664
3665  return options;
3666}
3667
3668
3669
3670;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/toArray.js
3671/**
3672 * Transforms `arg` into an array if it's not already.
3673 *
3674 * @example
3675 * import { toArray } from "reakit-utils";
3676 *
3677 * toArray("a"); // ["a"]
3678 * toArray(["a"]); // ["a"]
3679 */
3680function toArray(arg) {
3681  if (Array.isArray(arg)) {
3682    return arg;
3683  }
3684
3685  return typeof arg !== "undefined" ? [arg] : [];
3686}
3687
3688
3689
3690;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createHook.js
3691
3692
3693
3694
3695
3696
3697
3698
3699
3700/**
3701 * Creates a React custom hook that will return component props.
3702 *
3703 * @example
3704 * import { createHook } from "reakit-system";
3705 *
3706 * const useA = createHook({
3707 *   name: "A",
3708 *   keys: ["url"], // custom props/options keys
3709 *   useProps(options, htmlProps) {
3710 *     return {
3711 *       ...htmlProps,
3712 *       href: options.url,
3713 *     };
3714 *   },
3715 * });
3716 *
3717 * function A({ url, ...htmlProps }) {
3718 *   const props = useA({ url }, htmlProps);
3719 *   return <a {...props} />;
3720 * }
3721 *
3722 * @param options
3723 */
3724function createHook(options) {
3725  var _options$useState, _composedHooks$;
3726
3727  var composedHooks = toArray(options.compose);
3728
3729  var __useOptions = function __useOptions(hookOptions, htmlProps) {
3730    // Call the current hook's useOptions first
3731    if (options.useOptions) {
3732      hookOptions = options.useOptions(hookOptions, htmlProps);
3733    } // If there's name, call useOptions from the system context
3734
3735
3736    if (options.name) {
3737      hookOptions = useOptions(options.name, hookOptions, htmlProps);
3738    } // Run composed hooks useOptions
3739
3740
3741    if (options.compose) {
3742      for (var _iterator = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step; !(_step = _iterator()).done;) {
3743        var hook = _step.value;
3744        hookOptions = hook.__useOptions(hookOptions, htmlProps);
3745      }
3746    }
3747
3748    return hookOptions;
3749  };
3750
3751  var useHook = function useHook(hookOptions, htmlProps, unstable_ignoreUseOptions) {
3752    if (hookOptions === void 0) {
3753      hookOptions = {};
3754    }
3755
3756    if (htmlProps === void 0) {
3757      htmlProps = {};
3758    }
3759
3760    if (unstable_ignoreUseOptions === void 0) {
3761      unstable_ignoreUseOptions = false;
3762    }
3763
3764    // This won't execute when useHook was called from within another useHook
3765    if (!unstable_ignoreUseOptions) {
3766      hookOptions = __useOptions(hookOptions, htmlProps);
3767    } // Call the current hook's useProps
3768
3769
3770    if (options.useProps) {
3771      htmlProps = options.useProps(hookOptions, htmlProps);
3772    } // If there's name, call useProps from the system context
3773
3774
3775    if (options.name) {
3776      htmlProps = useProps(options.name, hookOptions, htmlProps);
3777    }
3778
3779    if (options.compose) {
3780      if (options.useComposeOptions) {
3781        hookOptions = options.useComposeOptions(hookOptions, htmlProps);
3782      }
3783
3784      if (options.useComposeProps) {
3785        htmlProps = options.useComposeProps(hookOptions, htmlProps);
3786      } else {
3787        for (var _iterator2 = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step2; !(_step2 = _iterator2()).done;) {
3788          var hook = _step2.value;
3789          htmlProps = hook(hookOptions, htmlProps, true);
3790        }
3791      }
3792    } // Remove undefined values from htmlProps
3793
3794
3795    var finalHTMLProps = {};
3796    var definedHTMLProps = htmlProps || {};
3797
3798    for (var prop in definedHTMLProps) {
3799      if (definedHTMLProps[prop] !== undefined) {
3800        finalHTMLProps[prop] = definedHTMLProps[prop];
3801      }
3802    }
3803
3804    return finalHTMLProps;
3805  };
3806
3807  useHook.__useOptions = __useOptions;
3808  var composedKeys = composedHooks.reduce(function (keys, hook) {
3809    keys.push.apply(keys, hook.__keys || []);
3810    return keys;
3811  }, []); // It's used by createComponent to split option props (keys) and html props
3812
3813  useHook.__keys = [].concat(composedKeys, ((_options$useState = options.useState) === null || _options$useState === void 0 ? void 0 : _options$useState.__keys) || [], options.keys || []);
3814  useHook.unstable_propsAreEqual = options.propsAreEqual || ((_composedHooks$ = composedHooks[0]) === null || _composedHooks$ === void 0 ? void 0 : _composedHooks$.unstable_propsAreEqual) || shallowEqual;
3815
3816  if (false) {}
3817
3818  return useHook;
3819}
3820
3821
3822
3823;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useForkRef.js
3824
3825
3826// https://github.com/mui-org/material-ui/blob/2bcc874cf07b81202968f769cb9c2398c7c11311/packages/material-ui/src/utils/useForkRef.js
3827
3828function setRef(ref, value) {
3829  if (value === void 0) {
3830    value = null;
3831  }
3832
3833  if (!ref) return;
3834
3835  if (typeof ref === "function") {
3836    ref(value);
3837  } else {
3838    ref.current = value;
3839  }
3840}
3841/**
3842 * Merges up to two React Refs into a single memoized function React Ref so you
3843 * can pass it to an element.
3844 *
3845 * @example
3846 * import React from "react";
3847 * import { useForkRef } from "reakit-utils";
3848 *
3849 * const Component = React.forwardRef((props, ref) => {
3850 *   const internalRef = React.useRef();
3851 *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
3852 * });
3853 */
3854
3855
3856function useForkRef(refA, refB) {
3857  return (0,external_React_.useMemo)(function () {
3858    if (refA == null && refB == null) {
3859      return null;
3860    }
3861
3862    return function (value) {
3863      setRef(refA, value);
3864      setRef(refB, value);
3865    };
3866  }, [refA, refB]);
3867}
3868
3869
3870
3871;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/useWarning.js
3872
3873
3874
3875
3876
3877function isRefObject(ref) {
3878  return isObject(ref) && "current" in ref;
3879}
3880/**
3881 * Logs `messages` to the console using `console.warn` based on a `condition`.
3882 * This should be used inside components.
3883 */
3884
3885
3886function useWarning(condition) {
3887  for (var _len = arguments.length, messages = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
3888    messages[_key - 1] = arguments[_key];
3889  }
3890
3891  if (false) {}
3892}
3893
3894
3895
3896;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/index.js
3897
3898
3899
3900
3901
3902
3903;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getDocument.js
3904/**
3905 * Returns `element.ownerDocument || document`.
3906 */
3907function getDocument_getDocument(element) {
3908  return element ? element.ownerDocument || element : document;
3909}
3910
3911
3912
3913;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getWindow.js
3914
3915
3916// Thanks to Fluent UI for doing the [research on IE11 memory leak](https://github.com/microsoft/fluentui/pull/9010#issuecomment-490768427)
3917
3918var _window; // Note: Accessing "window" in IE11 is somewhat expensive, and calling "typeof window"
3919// hits a memory leak, whereas aliasing it and calling "typeof _window" does not.
3920// Caching the window value at the file scope lets us minimize the impact.
3921
3922
3923try {
3924  _window = window;
3925} catch (e) {
3926  /* no-op */
3927}
3928/**
3929 * Returns `element.ownerDocument.defaultView || window`.
3930 */
3931
3932
3933function getWindow(element) {
3934  if (!element) {
3935    return _window;
3936  }
3937
3938  return getDocument_getDocument(element).defaultView || _window;
3939}
3940
3941
3942
3943;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/canUseDOM.js
3944
3945
3946
3947function checkIsBrowser() {
3948  var _window = getWindow();
3949
3950  return Boolean(typeof _window !== "undefined" && _window.document && _window.document.createElement);
3951}
3952/**
3953 * It's `true` if it is running in a browser environment or `false` if it is not (SSR).
3954 *
3955 * @example
3956 * import { canUseDOM } from "reakit-utils";
3957 *
3958 * const title = canUseDOM ? document.title : "";
3959 */
3960
3961
3962var canUseDOM = checkIsBrowser();
3963
3964
3965
3966;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useIsomorphicEffect.js
3967
3968
3969
3970
3971
3972/**
3973 * `React.useLayoutEffect` that fallbacks to `React.useEffect` on server side
3974 * rendering.
3975 */
3976
3977var useIsomorphicEffect = !canUseDOM ? external_React_.useEffect : external_React_.useLayoutEffect;
3978
3979
3980
3981;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useLiveRef.js
3982
3983
3984
3985
3986
3987
3988/**
3989 * A `React.Ref` that keeps track of the passed `value`.
3990 */
3991
3992function useLiveRef(value) {
3993  var ref = (0,external_React_.useRef)(value);
3994  useIsomorphicEffect(function () {
3995    ref.current = value;
3996  });
3997  return ref;
3998}
3999
4000
4001
4002;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isSelfTarget.js
4003/**
4004 * Returns `true` if `event.target` and `event.currentTarget` are the same.
4005 */
4006function isSelfTarget(event) {
4007  return event.target === event.currentTarget;
4008}
4009
4010
4011
4012;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getActiveElement.js
4013
4014
4015/**
4016 * Returns `element.ownerDocument.activeElement`.
4017 */
4018
4019function getActiveElement_getActiveElement(element) {
4020  var _getDocument = getDocument_getDocument(element),
4021      activeElement = _getDocument.activeElement;
4022
4023  if (!(activeElement !== null && activeElement !== void 0 && activeElement.nodeName)) {
4024    // In IE11, activeElement might be an empty object if we're interacting
4025    // with elements inside of an iframe.
4026    return null;
4027  }
4028
4029  return activeElement;
4030}
4031
4032
4033
4034;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/contains.js
4035/**
4036 * Similar to `Element.prototype.contains`, but a little bit faster when
4037 * `element` is the same as `child`.
4038 *
4039 * @example
4040 * import { contains } from "reakit-utils";
4041 *
4042 * contains(document.getElementById("parent"), document.getElementById("child"));
4043 */
4044function contains(parent, child) {
4045  return parent === child || parent.contains(child);
4046}
4047
4048
4049
4050;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocusWithin.js
4051
4052
4053
4054
4055/**
4056 * Checks if `element` has focus within. Elements that are referenced by
4057 * `aria-activedescendant` are also considered.
4058 *
4059 * @example
4060 * import { hasFocusWithin } from "reakit-utils";
4061 *
4062 * hasFocusWithin(document.getElementById("id"));
4063 */
4064
4065function hasFocusWithin(element) {
4066  var activeElement = getActiveElement_getActiveElement(element);
4067  if (!activeElement) return false;
4068  if (contains(element, activeElement)) return true;
4069  var activeDescendant = activeElement.getAttribute("aria-activedescendant");
4070  if (!activeDescendant) return false;
4071  if (activeDescendant === element.id) return true;
4072  return !!element.querySelector("#" + activeDescendant);
4073}
4074
4075
4076
4077;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPortalEvent.js
4078
4079
4080/**
4081 * Returns `true` if `event` has been fired within a React Portal element.
4082 */
4083
4084function isPortalEvent(event) {
4085  return !contains(event.currentTarget, event.target);
4086}
4087
4088
4089
4090;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isButton.js
4091var buttonInputTypes = ["button", "color", "file", "image", "reset", "submit"];
4092/**
4093 * Checks whether `element` is a native HTML button element.
4094 *
4095 * @example
4096 * import { isButton } from "reakit-utils";
4097 *
4098 * isButton(document.querySelector("button")); // true
4099 * isButton(document.querySelector("input[type='button']")); // true
4100 * isButton(document.querySelector("div")); // false
4101 * isButton(document.querySelector("input[type='text']")); // false
4102 * isButton(document.querySelector("div[role='button']")); // false
4103 *
4104 * @returns {boolean}
4105 */
4106
4107function isButton(element) {
4108  if (element.tagName === "BUTTON") return true;
4109
4110  if (element.tagName === "INPUT") {
4111    var input = element;
4112    return buttonInputTypes.indexOf(input.type) !== -1;
4113  }
4114
4115  return false;
4116}
4117
4118
4119
4120;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/dom.js
4121
4122
4123
4124
4125/**
4126 * Checks if a given string exists in the user agent string.
4127 */
4128
4129function isUA(string) {
4130  if (!canUseDOM) return false;
4131  return window.navigator.userAgent.indexOf(string) !== -1;
4132}
4133
4134
4135
4136;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/matches.js
4137/**
4138 * Ponyfill for `Element.prototype.matches`
4139 *
4140 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
4141 */
4142function matches(element, selectors) {
4143  if ("matches" in element) {
4144    return element.matches(selectors);
4145  }
4146
4147  if ("msMatchesSelector" in element) {
4148    return element.msMatchesSelector(selectors);
4149  }
4150
4151  return element.webkitMatchesSelector(selectors);
4152}
4153
4154
4155
4156;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/tabbable.js
4157
4158
4159
4160
4161
4162/** @module tabbable */
4163var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), " + "textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], " + "iframe, object, embed, area[href], audio[controls], video[controls], " + "[contenteditable]:not([contenteditable='false'])";
4164
4165function isVisible(element) {
4166  var htmlElement = element;
4167  return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
4168}
4169
4170function hasNegativeTabIndex(element) {
4171  var tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
4172  return tabIndex < 0;
4173}
4174/**
4175 * Checks whether `element` is focusable or not.
4176 *
4177 * @memberof tabbable
4178 *
4179 * @example
4180 * import { isFocusable } from "reakit-utils";
4181 *
4182 * isFocusable(document.querySelector("input")); // true
4183 * isFocusable(document.querySelector("input[tabindex='-1']")); // true
4184 * isFocusable(document.querySelector("input[hidden]")); // false
4185 * isFocusable(document.querySelector("input:disabled")); // false
4186 */
4187
4188
4189function isFocusable(element) {
4190  return matches(element, selector) && isVisible(element);
4191}
4192/**
4193 * Checks whether `element` is tabbable or not.
4194 *
4195 * @memberof tabbable
4196 *
4197 * @example
4198 * import { isTabbable } from "reakit-utils";
4199 *
4200 * isTabbable(document.querySelector("input")); // true
4201 * isTabbable(document.querySelector("input[tabindex='-1']")); // false
4202 * isTabbable(document.querySelector("input[hidden]")); // false
4203 * isTabbable(document.querySelector("input:disabled")); // false
4204 */
4205
4206function isTabbable(element) {
4207  return isFocusable(element) && !hasNegativeTabIndex(element);
4208}
4209/**
4210 * Returns all the focusable elements in `container`.
4211 *
4212 * @memberof tabbable
4213 *
4214 * @param {Element} container
4215 *
4216 * @returns {Element[]}
4217 */
4218
4219function getAllFocusableIn(container) {
4220  var allFocusable = Array.from(container.querySelectorAll(selector));
4221  allFocusable.unshift(container);
4222  return allFocusable.filter(isFocusable);
4223}
4224/**
4225 * Returns the first focusable element in `container`.
4226 *
4227 * @memberof tabbable
4228 *
4229 * @param {Element} container
4230 *
4231 * @returns {Element|null}
4232 */
4233
4234function getFirstFocusableIn(container) {
4235  var _getAllFocusableIn = getAllFocusableIn(container),
4236      first = _getAllFocusableIn[0];
4237
4238  return first || null;
4239}
4240/**
4241 * Returns all the tabbable elements in `container`, including the container
4242 * itself.
4243 *
4244 * @memberof tabbable
4245 *
4246 * @param {Element} container
4247 * @param fallbackToFocusable If `true`, it'll return focusable elements if there are no tabbable ones.
4248 *
4249 * @returns {Element[]}
4250 */
4251
4252function getAllTabbableIn(container, fallbackToFocusable) {
4253  var allFocusable = Array.from(container.querySelectorAll(selector));
4254  var allTabbable = allFocusable.filter(isTabbable);
4255
4256  if (isTabbable(container)) {
4257    allTabbable.unshift(container);
4258  }
4259
4260  if (!allTabbable.length && fallbackToFocusable) {
4261    return allFocusable;
4262  }
4263
4264  return allTabbable;
4265}
4266/**
4267 * Returns the first tabbable element in `container`, including the container
4268 * itself if it's tabbable.
4269 *
4270 * @memberof tabbable
4271 *
4272 * @param {Element} container
4273 * @param fallbackToFocusable If `true`, it'll return the first focusable element if there are no tabbable ones.
4274 *
4275 * @returns {Element|null}
4276 */
4277
4278function getFirstTabbableIn(container, fallbackToFocusable) {
4279  var _getAllTabbableIn = getAllTabbableIn(container, fallbackToFocusable),
4280      first = _getAllTabbableIn[0];
4281
4282  return first || null;
4283}
4284/**
4285 * Returns the last tabbable element in `container`, including the container
4286 * itself if it's tabbable.
4287 *
4288 * @memberof tabbable
4289 *
4290 * @param {Element} container
4291 * @param fallbackToFocusable If `true`, it'll return the last focusable element if there are no tabbable ones.
4292 *
4293 * @returns {Element|null}
4294 */
4295
4296function getLastTabbableIn(container, fallbackToFocusable) {
4297  var allTabbable = getAllTabbableIn(container, fallbackToFocusable);
4298  return allTabbable[allTabbable.length - 1] || null;
4299}
4300/**
4301 * Returns the next tabbable element in `container`.
4302 *
4303 * @memberof tabbable
4304 *
4305 * @param {Element} container
4306 * @param fallbackToFocusable If `true`, it'll return the next focusable element if there are no tabbable ones.
4307 *
4308 * @returns {Element|null}
4309 */
4310
4311function getNextTabbableIn(container, fallbackToFocusable) {
4312  var activeElement = getActiveElement(container);
4313  var allFocusable = getAllFocusableIn(container);
4314  var index = allFocusable.indexOf(activeElement);
4315  var slice = allFocusable.slice(index + 1);
4316  return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null);
4317}
4318/**
4319 * Returns the previous tabbable element in `container`.
4320 *
4321 * @memberof tabbable
4322 *
4323 * @param {Element} container
4324 * @param fallbackToFocusable If `true`, it'll return the previous focu
4324sable element if there are no tabbable ones.
4325 *
4326 * @returns {Element|null}
4327 */
4328
4329function getPreviousTabbableIn(container, fallbackToFocusable) {
4330  var activeElement = getActiveElement(container);
4331  var allFocusable = getAllFocusableIn(container).reverse();
4332  var index = allFocusable.indexOf(activeElement);
4333  var slice = allFocusable.slice(index + 1);
4334  return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null);
4335}
4336/**
4337 * Returns the closest focusable element.
4338 *
4339 * @memberof tabbable
4340 *
4341 * @param {Element} container
4342 *
4343 * @returns {Element|null}
4344 */
4345
4346function getClosestFocusable(element) {
4347  while (element && !isFocusable(element)) {
4348    element = closest(element, selector);
4349  }
4350
4351  return element;
4352}
4353
4354
4355
4356;// CONCATENATED MODULE: ./node_modules/reakit/es/Role/Role.js
4357
4358
4359
4360
4361
4362// Automatically generated
4363var ROLE_KEYS = ["unstable_system"];
4364
4365var useRole = createHook({
4366  name: "Role",
4367  keys: ROLE_KEYS,
4368  propsAreEqual: function propsAreEqual(prev, next) {
4369    var prevSystem = prev.unstable_system,
4370        prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["unstable_system"]);
4371
4372    var nextSystem = next.unstable_system,
4373        nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["unstable_system"]);
4374
4375    if (prevSystem !== nextSystem && !shallowEqual(prevSystem, nextSystem)) {
4376      return false;
4377    }
4378
4379    return shallowEqual(prevProps, nextProps);
4380  }
4381});
4382var Role = createComponent({
4383  as: "div",
4384  useHook: useRole
4385});
4386
4387
4388
4389;// CONCATENATED MODULE: ./node_modules/reakit/es/Tabbable/Tabbable.js
4390
4391
4392
4393
4394
4395
4396
4397
4398
4399
4400
4401
4402
4403
4404
4405
4406// Automatically generated
4407var TABBABLE_KEYS = ["disabled", "focusable"];
4408
4409var isSafariOrFirefoxOnMac = isUA("Mac") && !isUA("Chrome") && (isUA("Safari") || isUA("Firefox"));
4410
4411function focusIfNeeded(element) {
4412  if (!hasFocusWithin(element) && isFocusable(element)) {
4413    element.focus();
4414  }
4415}
4416
4417function isNativeTabbable(element) {
4418  return ["BUTTON", "INPUT", "SELECT", "TEXTAREA", "A"].includes(element.tagName);
4419}
4420
4421function supportsDisabledAttribute(element) {
4422  return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName);
4423}
4424
4425function getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex) {
4426  if (trulyDisabled) {
4427    if (nativeTabbable && !supportsDisabled) {
4428      // Anchor, audio and video tags don't support the `disabled` attribute.
4429      // We must pass tabIndex={-1} so they don't receive focus on tab.
4430      return -1;
4431    } // Elements that support the `disabled` attribute don't need tabIndex.
4432
4433
4434    return undefined;
4435  }
4436
4437  if (nativeTabbable) {
4438    // If the element is enabled and it's natively tabbable, we don't need to
4439    // specify a tabIndex attribute unless it's explicitly set by the user.
4440    return htmlTabIndex;
4441  } // If the element is enabled and is not natively tabbable, we have to
4442  // fallback tabIndex={0}.
4443
4444
4445  return htmlTabIndex || 0;
4446}
4447
4448function useDisableEvent(htmlEventRef, disabled) {
4449  return (0,external_React_.useCallback)(function (event) {
4450    var _htmlEventRef$current;
4451
4452    (_htmlEventRef$current = htmlEventRef.current) === null || _htmlEventRef$current === void 0 ? void 0 : _htmlEventRef$current.call(htmlEventRef, event);
4453    if (event.defaultPrevented) return;
4454
4455    if (disabled) {
4456      event.stopPropagation();
4457      event.preventDefault();
4458    }
4459  }, [htmlEventRef, disabled]);
4460}
4461
4462var useTabbable = createHook({
4463  name: "Tabbable",
4464  compose: useRole,
4465  keys: TABBABLE_KEYS,
4466  useOptions: function useOptions(options, _ref) {
4467    var disabled = _ref.disabled;
4468    return _objectSpread2({
4469      disabled: disabled
4470    }, options);
4471  },
4472  useProps: function useProps(options, _ref2) {
4473    var htmlRef = _ref2.ref,
4474        htmlTabIndex = _ref2.tabIndex,
4475        htmlOnClickCapture = _ref2.onClickCapture,
4476        htmlOnMouseDownCapture = _ref2.onMouseDownCapture,
4477        htmlOnMouseDown = _ref2.onMouseDown,
4478        htmlOnKeyPressCapture = _ref2.onKeyPressCapture,
4479        htmlStyle = _ref2.style,
4480        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "tabIndex", "onClickCapture", "onMouseDownCapture", "onMouseDown", "onKeyPressCapture", "style"]);
4481
4482    var ref = (0,external_React_.useRef)(null);
4483    var onClickCaptureRef = useLiveRef(htmlOnClickCapture);
4484    var onMouseDownCaptureRef = useLiveRef(htmlOnMouseDownCapture);
4485    var onMouseDownRef = useLiveRef(htmlOnMouseDown);
4486    var onKeyPressCaptureRef = useLiveRef(htmlOnKeyPressCapture);
4487    var trulyDisabled = !!options.disabled && !options.focusable;
4488
4489    var _React$useState = (0,external_React_.useState)(true),
4490        nativeTabbable = _React$useState[0],
4491        setNativeTabbable = _React$useState[1];
4492
4493    var _React$useState2 = (0,external_React_.useState)(true),
4494        supportsDisabled = _React$useState2[0],
4495        setSupportsDisabled = _React$useState2[1];
4496
4497    var style = options.disabled ? _objectSpread2({
4498      pointerEvents: "none"
4499    }, htmlStyle) : htmlStyle;
4500    useIsomorphicEffect(function () {
4501      var tabbable = ref.current;
4502
4503      if (!tabbable) {
4504         false ? 0 : void 0;
4505        return;
4506      }
4507
4508      if (!isNativeTabbable(tabbable)) {
4509        setNativeTabbable(false);
4510      }
4511
4512      if (!supportsDisabledAttribute(tabbable)) {
4513        setSupportsDisabled(false);
4514      }
4515    }, []);
4516    var onClickCapture = useDisableEvent(onClickCaptureRef, options.disabled);
4517    var onMouseDownCapture = useDisableEvent(onMouseDownCaptureRef, options.disabled);
4518    var onKeyPressCapture = useDisableEvent(onKeyPressCaptureRef, options.disabled);
4519    var onMouseDown = (0,external_React_.useCallback)(function (event) {
4520      var _onMouseDownRef$curre;
4521
4522      (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event);
4523      var element = event.currentTarget;
4524      if (event.defaultPrevented) return; // Safari and Firefox on MacOS don't focus on buttons on mouse down
4525      // like other browsers/platforms. Instead, they focus on the closest
4526      // focusable ancestor element, which is ultimately the body element. So
4527      // we make sure to give focus to the tabbable element on mouse down so
4528      // it works consistently across browsers.
4529
4530      if (!isSafariOrFirefoxOnMac) return;
4531      if (isPortalEvent(event)) return;
4532      if (!isButton(element)) return; // We can't focus right away after on mouse down, otherwise it would
4533      // prevent drag events from happening. So we schedule the focus to the
4534      // next animation frame.
4535
4536      var raf = requestAnimationFrame(function () {
4537        element.removeEventListener("mouseup", focusImmediately, true);
4538        focusIfNeeded(element);
4539      }); // If mouseUp happens before the next animation frame (which is common
4540      // on touch screens or by just tapping the trackpad on MacBook's), we
4541      // cancel the animation frame and immediately focus on the element.
4542
4543      var focusImmediately = function focusImmediately() {
4544        cancelAnimationFrame(raf);
4545        focusIfNeeded(element);
4546      }; // By listening to the event in the capture phase, we make sure the
4547      // focus event is fired before the onMouseUp and onMouseUpCapture React
4548      // events, which is aligned with the default browser behavior.
4549
4550
4551      element.addEventListener("mouseup", focusImmediately, {
4552        once: true,
4553        capture: true
4554      });
4555    }, []);
4556    return _objectSpread2({
4557      ref: useForkRef(ref, htmlRef),
4558      style: style,
4559      tabIndex: getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex),
4560      disabled: trulyDisabled && supportsDisabled ? true : undefined,
4561      "aria-disabled": options.disabled ? true : undefined,
4562      onClickCapture: onClickCapture,
4563      onMouseDownCapture: onMouseDownCapture,
4564      onMouseDown: onMouseDown,
4565      onKeyPressCapture: onKeyPressCapture
4566    }, htmlProps);
4567  }
4568});
4569var Tabbable = createComponent({
4570  as: "div",
4571  useHook: useTabbable
4572});
4573
4574
4575
4576;// CONCATENATED MODULE: ./node_modules/reakit/es/Clickable/Clickable.js
4577
4578
4579
4580
4581
4582
4583
4584
4585
4586
4587
4588
4589
4590
4591
4592
4593
4594
4595// Automatically generated
4596var CLICKABLE_KEYS = ["unstable_clickOnEnter", "unstable_clickOnSpace"];
4597
4598function isNativeClick(event) {
4599  var element = event.currentTarget;
4600  if (!event.isTrusted) return false; // istanbul ignore next: can't test trusted events yet
4601
4602  return isButton(element) || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "A" || element.tagName === "SELECT";
4603}
4604
4605var useClickable = createHook({
4606  name: "Clickable",
4607  compose: useTabbable,
4608  keys: CLICKABLE_KEYS,
4609  useOptions: function useOptions(_ref) {
4610    var _ref$unstable_clickOn = _ref.unstable_clickOnEnter,
4611        unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? true : _ref$unstable_clickOn,
4612        _ref$unstable_clickOn2 = _ref.unstable_clickOnSpace,
4613        unstable_clickOnSpace = _ref$unstable_clickOn2 === void 0 ? true : _ref$unstable_clickOn2,
4614        options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_clickOnSpace"]);
4615
4616    return _objectSpread2({
4617      unstable_clickOnEnter: unstable_clickOnEnter,
4618      unstable_clickOnSpace: unstable_clickOnSpace
4619    }, options);
4620  },
4621  useProps: function useProps(options, _ref2) {
4622    var htmlOnKeyDown = _ref2.onKeyDown,
4623        htmlOnKeyUp = _ref2.onKeyUp,
4624        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["onKeyDown", "onKeyUp"]);
4625
4626    var _React$useState = (0,external_React_.useState)(false),
4627        active = _React$useState[0],
4628        setActive = _React$useState[1];
4629
4630    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
4631    var onKeyUpRef = useLiveRef(htmlOnKeyUp);
4632    var onKeyDown = (0,external_React_.useCallback)(function (event) {
4633      var _onKeyDownRef$current;
4634
4635      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
4636      if (event.defaultPrevented) return;
4637      if (options.disabled) return;
4638      if (event.metaKey) return;
4639      if (!isSelfTarget(event)) return;
4640      var isEnter = options.unstable_clickOnEnter && event.key === "Enter";
4641      var isSpace = options.unstable_clickOnSpace && event.key === " ";
4642
4643      if (isEnter || isSpace) {
4644        if (isNativeClick(event)) return;
4645        event.preventDefault();
4646
4647        if (isEnter) {
4648          event.currentTarget.click();
4649        } else if (isSpace) {
4650          setActive(true);
4651        }
4652      }
4653    }, [options.disabled, options.unstable_clickOnEnter, options.unstable_clickOnSpace]);
4654    var onKeyUp = (0,external_React_.useCallback)(function (event) {
4655      var _onKeyUpRef$current;
4656
4657      (_onKeyUpRef$current = onKeyUpRef.current) === null || _onKeyUpRef$current === void 0 ? void 0 : _onKeyUpRef$current.call(onKeyUpRef, event);
4658      if (event.defaultPrevented) return;
4659      if (options.disabled) return;
4660      if (event.metaKey) return;
4661      var isSpace = options.unstable_clickOnSpace && event.key === " ";
4662
4663      if (active && isSpace) {
4664        setActive(false);
4665        event.currentTarget.click();
4666      }
4667    }, [options.disabled, options.unstable_clickOnSpace, active]);
4668    return _objectSpread2({
4669      "data-active": active || undefined,
4670      onKeyDown: onKeyDown,
4671      onKeyUp: onKeyUp
4672    }, htmlProps);
4673  }
4674});
4675var Clickable = createComponent({
4676  as: "button",
4677  memo: true,
4678  useHook: useClickable
4679});
4680
4681
4682
4683;// CONCATENATED MODULE: ./node_modules/reakit/es/getCurrentId-5aa9849e.js
4684function findFirstEnabledItem(items, excludeId) {
4685  if (excludeId) {
4686    return items.find(function (item) {
4687      return !item.disabled && item.id !== excludeId;
4688    });
4689  }
4690
4691  return items.find(function (item) {
4692    return !item.disabled;
4693  });
4694}
4695
4696function getCurrentId(options, passedId) {
4697  var _findFirstEnabledItem;
4698
4699  if (passedId || passedId === null) {
4700    return passedId;
4701  }
4702
4703  if (options.currentId || options.currentId === null) {
4704    return options.currentId;
4705  }
4706
4707  return (_findFirstEnabledItem = findFirstEnabledItem(options.items || [])) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id;
4708}
4709
4710
4711
4712;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-6742f591.js
4713// Automatically generated
4714var COMPOSITE_STATE_KEYS = ["baseId", "unstable_idCountRef", "setBaseId", "unstable_virtual", "rtl", "orientation", "items", "groups", "currentId", "loop", "wrap", "shift", "unstable_moves", "unstable_hasActiveWidget", "unstable_includesBaseElement", "registerItem", "unregisterItem", "registerGroup", "unregisterGroup", "move", "next", "previous", "up", "down", "first", "last", "sort", "unstable_setVirtual", "setRTL", "setOrientation", "setCurrentId", "setLoop", "setWrap", "setShift", "reset", "unstable_setIncludesBaseElement", "unstable_setHasActiveWidget"];
4715var COMPOSITE_KEYS = COMPOSITE_STATE_KEYS;
4716var COMPOSITE_GROUP_KEYS = COMPOSITE_KEYS;
4717var COMPOSITE_ITEM_KEYS = COMPOSITE_GROUP_KEYS;
4718var COMPOSITE_ITEM_WIDGET_KEYS = (/* unused pure expression or super */ null && (COMPOSITE_ITEM_KEYS));
4719
4720
4721
4722;// CONCATENATED MODULE: ./node_modules/reakit/es/userFocus-e16425e3.js
4723function userFocus(element) {
4724  element.userFocus = true;
4725  element.focus();
4726  element.userFocus = false;
4727}
4728function hasUserFocus(element) {
4729  return !!element.userFocus;
4730}
4731function setUserFocus(element, value) {
4732  element.userFocus = value;
4733}
4734
4735
4736
4737;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isTextField.js
4738/**
4739 * Check whether the given element is a text field, where text field is defined
4740 * by the ability to select within the input, or that it is contenteditable.
4741 *
4742 * @example
4743 * import { isTextField } from "reakit-utils";
4744 *
4745 * isTextField(document.querySelector("div")); // false
4746 * isTextField(document.querySelector("input")); // true
4747 * isTextField(document.querySelector("input[type='button']")); // false
4748 * isTextField(document.querySelector("textarea")); // true
4749 * isTextField(document.querySelector("div[contenteditable='true']")); // true
4750 */
4751function isTextField_isTextField(element) {
4752  try {
4753    var isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
4754    var isTextArea = element.tagName === "TEXTAREA";
4755    var isContentEditable = element.contentEditable === "true";
4756    return isTextInput || isTextArea || isContentEditable || false;
4757  } catch (error) {
4758    // Safari throws an exception when trying to get `selectionStart`
4759    // on non-text <input> elements (which, understandably, don't
4760    // have the text selection API). We catch this via a try/catch
4761    // block, as opposed to a more explicit check of the element's
4762    // input types, because of Safari's non-standard behavior. This
4763    // also means we don't have to worry about the list of input
4764    // types that support `selectionStart` changing as the HTML spec
4765    // evolves over time.
4766    return false;
4767  }
4768}
4769
4770
4771
4772;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocus.js
4773
4774
4775
4776/**
4777 * Checks if `element` has focus. Elements that are referenced by
4778 * `aria-activedescendant` are also considered.
4779 *
4780 * @example
4781 * import { hasFocus } from "reakit-utils";
4782 *
4783 * hasFocus(document.getElementById("id"));
4784 */
4785
4786function hasFocus(element) {
4787  var activeElement = getActiveElement_getActiveElement(element);
4788  if (!activeElement) return false;
4789  if (activeElement === element) return true;
4790  var activeDescendant = activeElement.getAttribute("aria-activedescendant");
4791  if (!activeDescendant) return false;
4792  return activeDescendant === element.id;
4793}
4794
4795
4796
4797;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/ensureFocus.js
4798
4799
4800
4801
4802/**
4803 * Ensures `element` will receive focus if it's not already.
4804 *
4805 * @example
4806 * import { ensureFocus } from "reakit-utils";
4807 *
4808 * ensureFocus(document.activeElement); // does nothing
4809 *
4810 * const element = document.querySelector("input");
4811 *
4812 * ensureFocus(element); // focuses element
4813 * ensureFocus(element, { preventScroll: true }); // focuses element preventing scroll jump
4814 *
4815 * function isActive(el) {
4816 *   return el.dataset.active === "true";
4817 * }
4818 *
4819 * ensureFocus(document.querySelector("[data-active='true']"), { isActive }); // does nothing
4820 *
4821 * @returns {number} `requestAnimationFrame` call ID so it can be passed to `cancelAnimationFrame` if needed.
4822 */
4823function ensureFocus(element, _temp) {
4824  var _ref = _temp === void 0 ? {} : _temp,
4825      preventScroll = _ref.preventScroll,
4826      _ref$isActive = _ref.isActive,
4827      isActive = _ref$isActive === void 0 ? hasFocus : _ref$isActive;
4828
4829  if (isActive(element)) return -1;
4830  element.focus({
4831    preventScroll: preventScroll
4832  });
4833  if (isActive(element)) return -1;
4834  return requestAnimationFrame(function () {
4835    element.focus({
4836      preventScroll: preventScroll
4837    });
4838  });
4839}
4840
4841
4842
4843;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdProvider.js
4844
4845
4846var defaultPrefix = "id";
4847function generateRandomString(prefix) {
4848  if (prefix === void 0) {
4849    prefix = defaultPrefix;
4850  }
4851
4852  return "" + (prefix ? prefix + "-" : "") + Math.random().toString(32).substr(2, 6);
4853}
4854
4855var unstable_IdContext = /*#__PURE__*/(0,external_React_.createContext)(generateRandomString);
4856function unstable_IdProvider(_ref) {
4857  var children = _ref.children,
4858      _ref$prefix = _ref.prefix,
4859      prefix = _ref$prefix === void 0 ? defaultPrefix : _ref$prefix;
4860  var count = useRef(0);
4861  var generateId = useCallback(function (localPrefix) {
4862    if (localPrefix === void 0) {
4863      localPrefix = prefix;
4864    }
4865
4866    return "" + (localPrefix ? localPrefix + "-" : "") + ++count.current;
4867  }, [prefix]);
4868  return /*#__PURE__*/createElement(unstable_IdContext.Provider, {
4869    value: generateId
4870  }, children);
4871}
4872
4873
4874
4875;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/Id.js
4876
4877
4878
4879
4880
4881
4882// Automatically generated
4883var ID_STATE_KEYS = ["baseId", "unstable_idCountRef", "setBaseId"];
4884var ID_KEYS = [].concat(ID_STATE_KEYS, ["id"]);
4885
4886var unstable_useId = createHook({
4887  keys: ID_KEYS,
4888  useOptions: function useOptions(options, htmlProps) {
4889    var generateId = (0,external_React_.useContext)(unstable_IdContext);
4890
4891    var _React$useState = (0,external_React_.useState)(function () {
4892      // This comes from useIdState
4893      if (options.unstable_idCountRef) {
4894        options.unstable_idCountRef.current += 1;
4895        return "-" + options.unstable_idCountRef.current;
4896      } // If there's no useIdState, we check if `baseId` was passed (as a prop,
4897      // not from useIdState).
4898
4899
4900      if (options.baseId) {
4901        return "-" + generateId("");
4902      }
4903
4904      return "";
4905    }),
4906        suffix = _React$useState[0]; // `baseId` will be the prop passed directly as a prop or via useIdState.
4907    // If there's neither, then it'll fallback to Context's generateId.
4908    // This generateId can result in a sequential ID (if there's a Provider)
4909    // or a random string (without Provider).
4910
4911
4912    var baseId = (0,external_React_.useMemo)(function () {
4913      return options.baseId || generateId();
4914    }, [options.baseId, generateId]);
4915    var id = htmlProps.id || options.id || "" + baseId + suffix;
4916    return _objectSpread2(_objectSpread2({}, options), {}, {
4917      id: id
4918    });
4919  },
4920  useProps: function useProps(options, htmlProps) {
4921    return _objectSpread2({
4922      id: options.id
4923    }, htmlProps);
4924  }
4925});
4926var unstable_Id = createComponent({
4927  as: "div",
4928  useHook: unstable_useId
4929});
4930
4931
4932
4933;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/createEvent.js
4934
4935
4936/**
4937 * Creates an `Event` in a way that also works on IE 11.
4938 *
4939 * @example
4940 * import { createEvent } from "reakit-utils";
4941 *
4942 * const el = document.getElementById("id");
4943 * el.dispatchEvent(createEvent(el, "blur", { bubbles: false }));
4944 */
4945
4946function createEvent(element, type, eventInit) {
4947  if (typeof Event === "function") {
4948    return new Event(type, eventInit);
4949  } // IE 11 doesn't support Event constructors
4950
4951
4952  var event = getDocument_getDocument(element).createEvent("Event");
4953  event.initEvent(type, eventInit === null || eventInit === void 0 ? void 0 : eventInit.bubbles, eventInit === null || eventInit === void 0 ? void 0 : eventInit.cancelable);
4954  return event;
4955}
4956
4957
4958
4959;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireEvent.js
4960
4961
4962
4963/**
4964 * Creates and dispatches `Event` in a way that also works on IE 11.
4965 *
4966 * @example
4967 * import { fireEvent } from "reakit-utils";
4968 *
4969 * fireEvent(document.getElementById("id"), "blur", {
4970 *   bubbles: true,
4971 *   cancelable: true,
4972 * });
4973 */
4974
4975function fireEvent(element, type, eventInit) {
4976  return element.dispatchEvent(createEvent(element, type, eventInit));
4977}
4978
4979
4980
4981;// CONCATENATED MODULE: ./node_modules/reakit/es/setTextFieldValue-0a221f4e.js
4982
4983
4984function setTextFieldValue(element, value) {
4985  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
4986    var _Object$getOwnPropert;
4987
4988    var proto = Object.getPrototypeOf(element);
4989    var setValue = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(proto, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
4990
4991    if (setValue) {
4992      setValue.call(element, value);
4993      fireEvent(element, "input", {
4994        bubbles: true
4995      });
4996    }
4997  }
4998}
4999
5000
5001
5002;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeItem.js
5003
5004
5005
5006
5007
5008
5009
5010
5011
5012
5013
5014
5015
5016
5017
5018
5019
5020
5021
5022
5023
5024
5025
5026
5027
5028
5029
5030
5031
5032function getWidget(itemElement) {
5033  return itemElement.querySelector("[data-composite-item-widget]");
5034}
5035
5036function useItem(options) {
5037  return (0,external_React_.useMemo)(function () {
5038    var _options$items;
5039
5040    return (_options$items = options.items) === null || _options$items === void 0 ? void 0 : _options$items.find(function (item) {
5041      return options.id && item.id === options.id;
5042    });
5043  }, [options.items, options.id]);
5044}
5045
5046function targetIsAnotherItem(event, items) {
5047  if (isSelfTarget(event)) return false;
5048
5049  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
5050    var item = _step.value;
5051
5052    if (item.ref.current === event.target) {
5053      return true;
5054    }
5055  }
5056
5057  return false;
5058}
5059
5060var useCompositeItem = createHook({
5061  name: "CompositeItem",
5062  compose: [useClickable, unstable_useId],
5063  keys: COMPOSITE_ITEM_KEYS,
5064  propsAreEqual: function propsAreEqual(prev, next) {
5065    if (!next.id || prev.id !== next.id) {
5066      return useClickable.unstable_propsAreEqual(prev, next);
5067    }
5068
5069    var prevCurrentId = prev.currentId,
5070        prevMoves = prev.unstable_moves,
5071        prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]);
5072
5073    var nextCurrentId = next.currentId,
5074        nextMoves = next.unstable_moves,
5075        nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]);
5076
5077    if (nextCurrentId !== prevCurrentId) {
5078      if (next.id === nextCurrentId || next.id === prevCurrentId) {
5079        return false;
5080      }
5081    } else if (prevMoves !== nextMoves) {
5082      return false;
5083    }
5084
5085    return useClickable.unstable_propsAreEqual(prevProps, nextProps);
5086  },
5087  useOptions: function useOptions(options) {
5088    return _objectSpread2(_objectSpread2({}, options), {}, {
5089      id: options.id,
5090      currentId: getCurrentId(options),
5091      unstable_clickOnSpace: options.unstable_hasActiveWidget ? false : options.unstable_clickOnSpace
5092    });
5093  },
5094  useProps: function useProps(options, _ref) {
5095    var _options$items2;
5096
5097    var htmlRef = _ref.ref,
5098        _ref$tabIndex = _ref.tabIndex,
5099        htmlTabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
5100        htmlOnMouseDown = _ref.onMouseDown,
5101        htmlOnFocus = _ref.onFocus,
5102        htmlOnBlurCapture = _ref.onBlurCapture,
5103        htmlOnKeyDown = _ref.onKeyDown,
5104        htmlOnClick = _ref.onClick,
5105        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "tabIndex", "onMouseDown", "onFocus", "onBlurCapture", "onKeyDown", "onClick"]);
5106
5107    var ref = (0,external_React_.useRef)(null);
5108    var id = options.id;
5109    var trulyDisabled = options.disabled && !options.focusable;
5110    var isCurrentItem = options.currentId === id;
5111    var isCurrentItemRef = useLiveRef(isCurrentItem);
5112    var hasFocusedComposite = (0,external_React_.useRef)(false);
5113    var item = useItem(options);
5114    var onMouseDownRef = useLiveRef(htmlOnMouseDown);
5115    var onFocusRef = useLiveRef(htmlOnFocus);
5116    var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture);
5117    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
5118    var onClickRef = useLiveRef(htmlOnClick);
5119    var shouldTabIndex = !options.unstable_virtual && !options.unstable_hasActiveWidget && isCurrentItem || // We don't want to set tabIndex="-1" when using CompositeItem as a
5120    // standalone component, without state props.
5121    !((_options$items2 = options.items) !== null && _options$items2 !== void 0 && _options$items2.length);
5122    (0,external_React_.useEffect)(function () {
5123      var _options$registerItem;
5124
5125      if (!id) return undefined;
5126      (_options$registerItem = options.registerItem) === null || _options$registerItem === void 0 ? void 0 : _options$registerItem.call(options, {
5127        id: id,
5128        ref: ref,
5129        disabled: !!trulyDisabled
5130      });
5131      return function () {
5132        var _options$unregisterIt;
5133
5134        (_options$unregisterIt = options.unregisterItem) === null || _options$unregisterIt === void 0 ? void 0 : _options$unregisterIt.call(options, id);
5135      };
5136    }, [id, trulyDisabled, options.registerItem, options.unregisterItem]);
5137    (0,external_React_.useEffect)(function () {
5138      var element = ref.current;
5139
5140      if (!element) {
5141         false ? 0 : void 0;
5142        return;
5143      } // `moves` will be incremented whenever next, previous, up, down, first,
5144      // last or move have been called. This means that the composite item will
5145      // be focused whenever some of these functions are called. We're using
5146      // isCurrentItemRef instead of isCurrentItem because we don't want to
5147      // focus the item if isCurrentItem changes (and options.moves doesn't).
5148
5149
5150      if (options.unstable_moves && isCurrentItemRef.current) {
5151        userFocus(element);
5152      }
5153    }, [options.unstable_moves]);
5154    var onMouseDown = (0,external_React_.useCallback)(function (event) {
5155      var _onMouseDownRef$curre;
5156
5157      (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event);
5158      setUserFocus(event.currentTarget, true);
5159    }, []);
5160    var onFocus = (0,external_React_.useCallback)(function (event) {
5161      var _onFocusRef$current, _options$setCurrentId;
5162
5163      var shouldFocusComposite = hasUserFocus(event.currentTarget);
5164      setUserFocus(event.currentTarget, false);
5165      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
5166      if (event.defaultPrevented) return;
5167      if (isPortalEvent(event)) return;
5168      if (!id) return;
5169      if (targetIsAnotherItem(event, options.items)) return;
5170      (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, id); // When using aria-activedescendant, we want to make sure that the
5171      // composite container receives focus, not the composite item.
5172      // But we don't want to do this if the target is another focusable
5173      // element inside the composite item, such as CompositeItemWidget.
5174
5175      if (shouldFocusComposite && options.unstable_virtual && options.baseId && isSelfTarget(event)) {
5176        var target = event.target;
5177        var composite = getDocument_getDocument(target).getElementById(options.baseId);
5178
5179        if (composite) {
5180          hasFocusedComposite.current = true;
5181          ensureFocus(composite);
5182        }
5183      }
5184    }, [id, options.items, options.setCurrentId, options.unstable_virtual, options.baseId]);
5185    var onBlurCapture = (0,external_React_.useCallback)(function (event) {
5186      var _onBlurCaptureRef$cur;
5187
5188      (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event);
5189      if (event.defaultPrevented) return;
5190
5191      if (options.unstable_virtual && hasFocusedComposite.current) {
5192        // When hasFocusedComposite is true, composite has been focused right
5193        // after focusing this item. This is an intermediate blur event, so
5194        // we ignore it.
5195        hasFocusedComposite.current = false;
5196        event.preventDefault();
5197        event.stopPropagation();
5198      }
5199    }, [options.unstable_virtual]);
5200    var onKeyDown = (0,external_React_.useCallback)(function (event) {
5201      var _onKeyDownRef$current;
5202
5203      if (!isSelfTarget(event)) return;
5204      var isVertical = options.orientation !== "horizontal";
5205      var isHorizontal = options.orientation !== "vertical";
5206      var isGrid = !!(item !== null && item !== void 0 && item.groupId);
5207      var keyMap = {
5208        ArrowUp: (isGrid || isVertical) && options.up,
5209        ArrowRight: (isGrid || isHorizontal) && options.next,
5210        ArrowDown: (isGrid || isVertical) && options.down,
5211        ArrowLeft: (isGrid || isHorizontal) && options.previous,
5212        Home: function Home() {
5213          if (!isGrid || event.ctrlKey) {
5214            var _options$first;
5215
5216            (_options$first = options.first) === null || _options$first === void 0 ? void 0 : _options$first.call(options);
5217          } else {
5218            var _options$previous;
5219
5220            (_options$previous = options.previous) === null || _options$previous === void 0 ? void 0 : _options$previous.call(options, true);
5221          }
5222        },
5223        End: function End() {
5224          if (!isGrid || event.ctrlKey) {
5225            var _options$last;
5226
5227            (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options);
5228          } else {
5229            var _options$next;
5230
5231            (_options$next = options.next) === null || _options$next === void 0 ? void 0 : _options$next.call(options, true);
5232          }
5233        },
5234        PageUp: function PageUp() {
5235          if (isGrid) {
5236            var _options$up;
5237
5238            (_options$up = options.up) === null || _options$up === void 0 ? void 0 : _options$up.call(options, true);
5239          } else {
5240            var _options$first2;
5241
5242            (_options$first2 = options.first) === null || _options$first2 === void 0 ? void 0 : _options$first2.call(options);
5243          }
5244        },
5245        PageDown: function PageDown() {
5246          if (isGrid) {
5247            var _options$down;
5248
5249            (_options$down = options.down) === null || _options$down === void 0 ? void 0 : _options$down.call(options, true);
5250          } else {
5251            var _options$last2;
5252
5253            (_options$last2 = options.last) === null || _options$last2 === void 0 ? void 0 : _options$last2.call(options);
5254          }
5255        }
5256      };
5257      var action = keyMap[event.key];
5258
5259      if (action) {
5260        event.preventDefault();
5261        action();
5262        return;
5263      }
5264
5265      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
5266      if (event.defaultPrevented) return;
5267
5268      if (event.key.length === 1 && event.key !== " ") {
5269        var widget = getWidget(event.currentTarget);
5270
5271        if (widget && isTextField_isTextField(widget)) {
5272          widget.focus();
5273          setTextFieldValue(widget, "");
5274        }
5275      } else if (event.key === "Delete" || event.key === "Backspace") {
5276        var _widget = getWidget(event.currentTarget);
5277
5278        if (_widget && isTextField_isTextField(_widget)) {
5279          event.preventDefault();
5280          setTextFieldValue(_widget, "");
5281        }
5282      }
5283    }, [options.orientation, item, options.up, options.next, options.down, options.previous, options.first, options.last]);
5284    var onClick = (0,external_React_.useCallback)(function (event) {
5285      var _onClickRef$current;
5286
5287      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event);
5288      if (event.defaultPrevented) return;
5289      var element = event.currentTarget;
5290      var widget = getWidget(element);
5291
5292      if (widget && !hasFocusWithin(widget)) {
5293        // If there's a widget inside the composite item, we make sure it's
5294        // focused when pressing enter, space or clicking on the composite item.
5295        widget.focus();
5296      }
5297    }, []);
5298    return _objectSpread2({
5299      ref: useForkRef(ref, htmlRef),
5300      id: id,
5301      tabIndex: shouldTabIndex ? htmlTabIndex : -1,
5302      "aria-selected": options.unstable_virtual && isCurrentItem ? true : undefined,
5303      onMouseDown: onMouseDown,
5304      onFocus: onFocus,
5305      onBlurCapture: onBlurCapture,
5306      onKeyDown: onKeyDown,
5307      onClick: onClick
5308    }, htmlProps);
5309  }
5310});
5311var CompositeItem = createComponent({
5312  as: "button",
5313  memo: true,
5314  useHook: useCompositeItem
5315});
5316
5317
5318
5319;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/PNRLI7OV.js
5320var __defProp = Object.defineProperty;
5321var __defProps = Object.defineProperties;
5322var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5323var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5324var __hasOwnProp = Object.prototype.hasOwnProperty;
5325var __propIsEnum = Object.prototype.propertyIsEnumerable;
5326var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
5327var PNRLI7OV_spreadValues = (a, b) => {
5328  for (var prop in b || (b = {}))
5329    if (__hasOwnProp.call(b, prop))
5330      __defNormalProp(a, prop, b[prop]);
5331  if (__getOwnPropSymbols)
5332    for (var prop of __getOwnPropSymbols(b)) {
5333      if (__propIsEnum.call(b, prop))
5334        __defNormalProp(a, prop, b[prop]);
5335    }
5336  return a;
5337};
5338var PNRLI7OV_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
5339var __objRest = (source, exclude) => {
5340  var target = {};
5341  for (var prop in source)
5342    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
5343      target[prop] = source[prop];
5344  if (source != null && __getOwnPropSymbols)
5345    for (var prop of __getOwnPropSymbols(source)) {
5346      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
5347        target[prop] = source[prop];
5348    }
5349  return target;
5350};
5351
5352
5353
5354;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/PNRLI7OV.js
5355var PNRLI7OV_defProp = Object.defineProperty;
5356var PNRLI7OV_defProps = Object.defineProperties;
5357var PNRLI7OV_getOwnPropDescs = Object.getOwnPropertyDescriptors;
5358var PNRLI7OV_getOwnPropSymbols = Object.getOwnPropertySymbols;
5359var PNRLI7OV_hasOwnProp = Object.prototype.hasOwnProperty;
5360var PNRLI7OV_propIsEnum = Object.prototype.propertyIsEnumerable;
5361var PNRLI7OV_defNormalProp = (obj, key, value) => key in obj ? PNRLI7OV_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
5362var _chunks_PNRLI7OV_spreadValues = (a, b) => {
5363  for (var prop in b || (b = {}))
5364    if (PNRLI7OV_hasOwnProp.call(b, prop))
5365      PNRLI7OV_defNormalProp(a, prop, b[prop]);
5366  if (PNRLI7OV_getOwnPropSymbols)
5367    for (var prop of PNRLI7OV_getOwnPropSymbols(b)) {
5368      if (PNRLI7OV_propIsEnum.call(b, prop))
5369        PNRLI7OV_defNormalProp(a, prop, b[prop]);
5370    }
5371  return a;
5372};
5373var _chunks_PNRLI7OV_spreadProps = (a, b) => PNRLI7OV_defProps(a, PNRLI7OV_getOwnPropDescs(b));
5374var PNRLI7OV_objRest = (source, exclude) => {
5375  var target = {};
5376  for (var prop in source)
5377    if (PNRLI7OV_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
5378      target[prop] = source[prop];
5379  if (source != null && PNRLI7OV_getOwnPropSymbols)
5380    for (var prop of PNRLI7OV_getOwnPropSymbols(source)) {
5381      if (exclude.indexOf(prop) < 0 && PNRLI7OV_propIsEnum.call(source, prop))
5382        target[prop] = source[prop];
5383    }
5384  return target;
5385};
5386
5387
5388
5389;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/WVTCK5PV.js
5390
5391
5392// src/utils/misc.ts
5393function noop(..._) {
5394}
5395function WVTCK5PV_shallowEqual(a, b) {
5396  if (a === b)
5397    return true;
5398  if (!a)
5399    return false;
5400  if (!b)
5401    return false;
5402  if (typeof a !== "object")
5403    return false;
5404  if (typeof b !== "object")
5405    return false;
5406  const aKeys = Object.keys(a);
5407  const bKeys = Object.keys(b);
5408  const { length } = aKeys;
5409  if (bKeys.length !== length)
5410    return false;
5411  for (const key of aKeys) {
5412    if (a[key] !== b[key]) {
5413      return false;
5414    }
5415  }
5416  return true;
5417}
5418function WVTCK5PV_applyState(argument, currentValue) {
5419  if (isUpdater(argument)) {
5420    const value = isLazyValue(currentValue) ? currentValue() : currentValue;
5421    return argument(value);
5422  }
5423  return argument;
5424}
5425function isUpdater(argument) {
5426  return typeof argument === "function";
5427}
5428function isLazyValue(value) {
5429  return typeof value === "function";
5430}
5431function WVTCK5PV_isObject(arg) {
5432  return typeof arg === "object" && arg != null;
5433}
5434function isEmpty(arg) {
5435  if (Array.isArray(arg))
5436    return !arg.length;
5437  if (WVTCK5PV_isObject(arg))
5438    return !Object.keys(arg).length;
5439  if (arg == null)
5440    return true;
5441  if (arg === "")
5442    return true;
5443  return false;
5444}
5445function isInteger(arg) {
5446  if (typeof arg === "number") {
5447    return Math.floor(arg) === arg;
5448  }
5449  return String(Math.floor(Number(arg))) === arg;
5450}
5451function WVTCK5PV_hasOwnProperty(object, prop) {
5452  return Object.prototype.hasOwnProperty.call(object, prop);
5453}
5454function chain(...fns) {
5455  return (...args) => {
5456    for (const fn of fns) {
5457      if (typeof fn === "function") {
5458        fn(...args);
5459      }
5460    }
5461  };
5462}
5463function cx(...args) {
5464  return args.filter(Boolean).join(" ") || void 0;
5465}
5466function normalizeString(str) {
5467  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
5468}
5469function omit(object, keys) {
5470  const result = _chunks_PNRLI7OV_spreadValues({}, object);
5471  for (const key of keys) {
5472    if (WVTCK5PV_hasOwnProperty(result, key)) {
5473      delete result[key];
5474    }
5475  }
5476  return result;
5477}
5478function pick(object, paths) {
5479  const result = {};
5480  for (const key of paths) {
5481    if (WVTCK5PV_hasOwnProperty(object, key)) {
5482      result[key] = object[key];
5483    }
5484  }
5485  return result;
5486}
5487function identity(value) {
5488  return value;
5489}
5490function beforePaint(cb = noop) {
5491  const raf = requestAnimationFrame(cb);
5492  return () => cancelAnimationFrame(raf);
5493}
5494function afterPaint(cb = noop) {
5495  let raf = requestAnimationFrame(() => {
5496    raf = requestAnimationFrame(cb);
5497  });
5498  return () => cancelAnimationFrame(raf);
5499}
5500function invariant(condition, message) {
5501  if (condition)
5502    return;
5503  if (typeof message !== "string")
5504    throw new Error("Invariant failed");
5505  throw new Error(message);
5506}
5507function getKeys(obj) {
5508  return Object.keys(obj);
5509}
5510function isFalsyBooleanCallback(booleanOrCallback, ...args) {
5511  const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback;
5512  if (result == null)
5513    return false;
5514  return !result;
5515}
5516function defaultValue(...values) {
5517  for (const value of values) {
5518    if (value !== void 0)
5519      return value;
5520  }
5521  return void 0;
5522}
5523
5524
5525
5526;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CP3U4HPL.js
5527
5528
vendor: 1,525 bytes, lines 5529-5586
5529// src/utils/misc.ts
5530
5531
5532function CP3U4HPL_setRef(ref, value) {
5533  if (typeof ref === "function") {
5534    ref(value);
5535  } else if (ref) {
5536    ref.current = value;
5537  }
5538}
5539function isValidElementWithRef(element) {
5540  if (!element)
5541    return false;
5542  if (!(0,external_React_.isValidElement)(element))
5543    return false;
5544  if (!("ref" in element))
5545    return false;
5546  return true;
5547}
5548function getRefProperty(element) {
5549  if (!isValidElementWithRef(element))
5550    return null;
5551  return element.ref;
5552}
5553function mergeProps(base, overrides) {
5554  const props = PNRLI7OV_spreadValues({}, base);
5555  for (const key in overrides) {
5556    if (!WVTCK5PV_hasOwnProperty(overrides, key))
5557      continue;
5558    if (key === "className") {
5559      const prop = "className";
5560      props[prop] = base[prop] ? `${base[prop]} ${overrides[prop]}` : overrides[prop];
5561      continue;
5562    }
5563    if (key === "style") {
5564      const prop = "style";
5565      props[prop] = base[prop] ? PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop];
5566      continue;
5567    }
5568    const overrideValue = overrides[key];
5569    if (typeof overrideValue === "function" && key.startsWith("on")) {
5570      const baseValue = base[key];
5571      if (typeof baseValue === "function") {
5572        props[key] = (...args) => {
5573          overrideValue(...args);
5574          baseValue(...args);
5575        };
5576        continue;
5577      }
5578    }
5579    props[key] = overrideValue;
5580  }
5581  return props;
5582}
5583
5584
5585
5586;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/O35LWD4W.js
vendor: 5,236 bytes, lines 5587-5743
5587// src/utils/dom.ts
5588var O35LWD4W_canUseDOM = O35LWD4W_checkIsBrowser();
5589function O35LWD4W_checkIsBrowser() {
5590  var _a;
5591  return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement);
5592}
5593function O35LWD4W_getDocument(node) {
5594  return node ? node.ownerDocument || node : document;
5595}
5596function O35LWD4W_getWindow(node) {
5597  return O35LWD4W_getDocument(node).defaultView || window;
5598}
5599function O35LWD4W_getActiveElement(node, activeDescendant = false) {
5600  const { activeElement } = O35LWD4W_getDocument(node);
5601  if (!(activeElement == null ? void 0 : activeElement.nodeName)) {
5602    return null;
5603  }
5604  if (isFrame(activeElement) && activeElement.contentDocument) {
5605    return O35LWD4W_getActiveElement(
5606      activeElement.contentDocument.body,
5607      activeDescendant
5608    );
5609  }
5610  if (activeDescendant) {
5611    const id = activeElement.getAttribute("aria-activedescendant");
5612    if (id) {
5613      const element = O35LWD4W_getDocument(activeElement).getElementById(id);
5614      if (element) {
5615        return element;
5616      }
5617    }
5618  }
5619  return activeElement;
5620}
5621function O35LWD4W_contains(parent, child) {
5622  return parent === child || parent.contains(child);
5623}
5624function isFrame(element) {
5625  return element.tagName === "IFRAME";
5626}
5627function O35LWD4W_isButton(element) {
5628  const tagName = element.tagName.toLowerCase();
5629  if (tagName === "button")
5630    return true;
5631  if (tagName === "input" && element.type) {
5632    return O35LWD4W_buttonInputTypes.indexOf(element.type) !== -1;
5633  }
5634  return false;
5635}
5636var O35LWD4W_buttonInputTypes = [
5637  "button",
5638  "color",
5639  "file",
5640  "image",
5641  "reset",
5642  "submit"
5643];
5644function O35LWD4W_matches(element, selectors) {
5645  if ("matches" in element) {
5646    return element.matches(selectors);
5647  }
5648  if ("msMatchesSelector" in element) {
5649    return element.msMatchesSelector(selectors);
5650  }
5651  return element.webkitMatchesSelector(selectors);
5652}
5653function O35LWD4W_isVisible(element) {
5654  const htmlElement = element;
5655  return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
5656}
5657function O35LWD4W_closest(element, selectors) {
5658  if ("closest" in element)
5659    return element.closest(selectors);
5660  do {
5661    if (O35LWD4W_matches(element, selectors))
5662      return element;
5663    element = element.parentElement || element.parentNode;
5664  } while (element !== null && element.nodeType === 1);
5665  return null;
5666}
5667function O35LWD4W_isTextField(element) {
5668  try {
5669    const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
5670    const isTextArea = element.tagName === "TEXTAREA";
5671    return isTextInput || isTextArea || false;
5672  } catch (error) {
5673    return false;
5674  }
5675}
5676function getPopupRole(element, fallback) {
5677  const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"];
5678  const role = element == null ? void 0 : element.getAttribute("role");
5679  if (role && allowedPopupRoles.indexOf(role) !== -1) {
5680    return role;
5681  }
5682  return fallback;
5683}
5684function getPopupItemRole(element, fallback) {
5685  var _a;
5686  const itemRoleByPopupRole = {
5687    menu: "menuitem",
5688    listbox: "option",
5689    tree: "treeitem",
5690    grid: "gridcell"
5691  };
5692  const popupRole = getPopupRole(element);
5693  if (!popupRole)
5694    return fallback;
5695  const key = popupRole;
5696  return (_a = itemRoleByPopupRole[key]) != null ? _a : fallback;
5697}
5698function getTextboxSelection(element) {
5699  let start = 0;
5700  let end = 0;
5701  if (O35LWD4W_isTextField(element)) {
5702    start = element.selectionStart || 0;
5703    end = element.selectionEnd || 0;
5704  } else if (element.isContentEditable) {
5705    const selection = O35LWD4W_getDocument(element).getSelection();
5706    if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && O35LWD4W_contains(element, selection.anchorNode) && selection.focusNode && O35LWD4W_contains(element, selection.focusNode)) {
5707      const range = selection.getRangeAt(0);
5708      const nextRange = range.cloneRange();
5709      nextRange.selectNodeContents(element);
5710      nextRange.setEnd(range.startContainer, range.startOffset);
5711      start = nextRange.toString().length;
5712      nextRange.setEnd(range.endContainer, range.endOffset);
5713      end = nextRange.toString().length;
5714    }
5715  }
5716  return { start, end };
5717}
5718function scrollIntoViewIfNeeded(element, arg) {
5719  if (isPartiallyHidden(element) && "scrollIntoView" in element) {
5720    element.scrollIntoView(arg);
5721  }
5722}
5723function getScrollingElement(element) {
5724  if (!element)
5725    return null;
5726  if (element.clientHeight && element.scrollHeight > element.clientHeight) {
5727    const { overflowY } = getComputedStyle(element);
5728    const isScrollable = overflowY !== "visible" && overflowY !== "hidden";
5729    if (isScrollable)
5730      return element;
5731  } else if (element.clientWidth && element.scrollWidth > element.clientWidth) {
5732    const { overflowX } = getComputedStyle(element);
5733    const isScrollable = overflowX !== "visible" && overflowX !== "hidden";
5734    if (isScrollable)
5735      return element;
5736  }
5737  return getScrollingElement(element.parentElement) || document.scrollingElement || document.body;
5738}
5739function isPartiallyHidden(element) {
5740  const elementRect = element.getBoundingClientRect();
5741  const scroller = getScrollingElement(element);
5742  if (!scroller)
5743    return false;
5744  const scrollerRect = scroller.getBoundingClientRect();
5745  const isHTML = scroller.tagName === "HTML";
5746  const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top;
5747  const scrollerBottom = isHTML ? scroller.clientHeight : scrollerRect.bottom;
5748  const scrollerLeft = isHTML ? scrollerRect.left + scroller.scrollLeft : scrollerRect.left;
5749  const scrollerRight = isHTML ? scroller.clientWidth : scrollerRect.right;
5750  const top = elementRect.top < scrollerTop;
5751  const left = elementRect.left < scrollerLeft;
5752  const bottom = elementRect.bottom > scrollerBottom;
5753  const right = elementRect.right > scrollerRight;
5754  return top || left || bottom || right;
5755}
5756
5757
5758
5759;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/events.js
5760
5761
5762
5763
5764// src/utils/events.ts
5765function events_isPortalEvent(event) {
5766  return Boolean(
5767    event.currentTarget && !O35LWD4W_contains(event.currentTarget, event.target)
5768  );
5769}
5770function events_isSelfTarget(event) {
5771  return event.target === event.currentTarget;
5772}
5773function isOpeningInNewTab(event) {
5774  const element = event.currentTarget;
5775  if (!element)
5776    return false;
5777  const isAppleDevice = isApple();
5778  if (isAppleDevice && !event.metaKey)
5779    return false;
5780  if (!isAppleDevice && !event.ctrlKey)
5781    return false;
5782  const tagName = element.tagName.toLowerCase();
5783  if (tagName === "a")
5784    return true;
5785  if (tagName === "button" && element.type === "submit")
5786    return true;
5787  if (tagName === "input" && element.type === "submit")
5788    return true;
5789  return false;
5790}
5791function isDownloading(event) {
5792  const element = event.currentTarget;
5793  if (!element)
5794    return false;
5795  const tagName = element.tagName.toLowerCase();
5796  if (!event.altKey)
5797    return false;
5798  if (tagName === "a")
5799    return true;
5800  if (tagName === "button" && element.type === "submit")
5801    return true;
5802  if (tagName === "input" && element.type === "submit")
5803    return true;
5804  return false;
5805}
5806function events_fireEvent(element, type, eventInit) {
5807  const event = new Event(type, eventInit);
5808  return element.dispatchEvent(event);
5809}
5810function fireBlurEvent(element, eventInit) {
5811  const event = new FocusEvent("blur", eventInit);
5812  const defaultAllowed = element.dispatchEvent(event);
5813  const bubbleInit = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, eventInit), { bubbles: true });
5814  element.dispatchEvent(new FocusEvent("focusout", bubbleInit));
5815  return defaultAllowed;
5816}
5817function fireFocusEvent(element, eventInit) {
5818  const event = new FocusEvent("focus", eventInit);
5819  const defaultAllowed = element.dispatchEvent(event);
5820  const bubbleInit = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, eventInit), { bubbles: true });
5821  element.dispatchEvent(new FocusEvent("focusin", bubbleInit));
5822  return defaultAllowed;
5823}
5824function fireKeyboardEvent(element, type, eventInit) {
5825  const event = new KeyboardEvent(type, eventInit);
5826  return element.dispatchEvent(event);
5827}
5828function fireClickEvent(element, eventInit) {
5829  const event = new MouseEvent("click", eventInit);
5830  return element.dispatchEvent(event);
5831}
5832function isFocusEventOutside(event, container) {
5833  const containerElement = container || event.currentTarget;
5834  const relatedTarget = event.relatedTarget;
5835  return !relatedTarget || !O35LWD4W_contains(containerElement, relatedTarget);
5836}
5837function queueBeforeEvent(element, type, callback) {
5838  const raf = requestAnimationFrame(() => {
5839    element.removeEventListener(type, callImmediately, true);
5840    callback();
5841  });
5842  const callImmediately = () => {
5843    cancelAnimationFrame(raf);
5844    callback();
5845  };
5846  element.addEventListener(type, callImmediately, {
5847    once: true,
5848    capture: true
5849  });
5850  return raf;
5851}
5852function addGlobalEventListener(type, listener, options, scope = window) {
5853  var _a;
5854  try {
5855    scope.document.addEventListener(type, listener, options);
5856  } catch (e) {
5857  }
5858  const listeners = [];
5859  for (let i = 0; i < ((_a = scope.frames) == null ? void 0 : _a.length); i += 1) {
5860    const frameWindow = scope.frames[i];
5861    if (frameWindow) {
5862      listeners.push(
5863        addGlobalEventListener(type, listener, options, frameWindow)
5864      );
5865    }
5866  }
5867  const removeEventListener = () => {
5868    try {
5869      scope.document.removeEventListener(type, listener, options);
5870    } catch (e) {
5871    }
5872    listeners.forEach((listener2) => listener2());
5873  };
5874  return removeEventListener;
5875}
5876
5877
5878;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/J7Q2EO23.js
5879
5880
5881
5882// src/utils/hooks.ts
5883
5884
5885
5886
5887
5888var _React = PNRLI7OV_spreadValues({}, external_React_namespaceObject);
5889var useReactId = _React.useId;
5890var useReactDeferredValue = _React.useDeferredValue;
5891var useReactInsertionEffect = _React.useInsertionEffect;
5892var useSafeLayoutEffect = O35LWD4W_canUseDOM ? external_React_.useLayoutEffect : external_React_.useEffect;
5893function useInitialValue(value) {
5894  const [initialValue] = useState(value);
5895  return initialValue;
5896}
5897function useLazyValue(init) {
5898  const ref = (0,external_React_.useRef)();
5899  if (ref.current === void 0) {
5900    ref.current = init();
5901  }
5902  return ref.current;
5903}
5904function J7Q2EO23_useLiveRef(value) {
5905  const ref = (0,external_React_.useRef)(value);
5906  useSafeLayoutEffect(() => {
5907    ref.current = value;
5908  });
5909  return ref;
5910}
5911function usePreviousValue(value) {
5912  const [previousValue, setPreviousValue] = useState(value);
5913  if (value !== previousValue) {
5914    setPreviousValue(value);
5915  }
5916  return previousValue;
5917}
5918function useEvent(callback) {
5919  const ref = (0,external_React_.useRef)(() => {
5920    throw new Error("Cannot call an event handler while rendering.");
5921  });
5922  if (useReactInsertionEffect) {
5923    useReactInsertionEffect(() => {
5924      ref.current = callback;
5925    });
5926  } else {
5927    ref.current = callback;
5928  }
5929  return (0,external_React_.useCallback)((...args) => {
5930    var _a;
5931    return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
5932  }, []);
5933}
5934function useMergeRefs(...refs) {
5935  return (0,external_React_.useMemo)(() => {
5936    if (!refs.some(Boolean))
5937      return;
5938    return (value) => {
5939      refs.forEach((ref) => CP3U4HPL_setRef(ref, value));
5940    };
5941  }, refs);
5942}
5943function useRefId(ref, deps) {
5944  const [id, setId] = useState(void 0);
5945  useSafeLayoutEffect(() => {
5946    var _a;
5947    setId((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id);
5948  }, deps);
5949  return id;
5950}
5951function useId(defaultId) {
5952  if (useReactId) {
5953    const reactId = useReactId();
5954    if (defaultId)
5955      return defaultId;
5956    return reactId;
5957  }
5958  const [id, setId] = (0,external_React_.useState)(defaultId);
5959  useSafeLayoutEffect(() => {
5960    if (defaultId || id)
5961      return;
5962    const random = Math.random().toString(36).substr(2, 6);
5963    setId(`id-${random}`);
5964  }, [defaultId, id]);
5965  return defaultId || id;
5966}
5967function useDeferredValue(value) {
5968  if (useReactDeferredValue) {
5969    return useReactDeferredValue(value);
5970  }
5971  const [deferredValue, setDeferredValue] = useState(value);
5972  useEffect(() => {
5973    const raf = requestAnimationFrame(() => setDeferredValue(value));
5974    return () => cancelAnimationFrame(raf);
5975  }, [value]);
5976  return deferredValue;
5977}
5978function useTagName(refOrElement, type) {
5979  const stringOrUndefined = (type2) => {
5980    if (typeof type2 !== "string")
5981      return;
5982    return type2;
5983  };
5984  const [tagName, setTagName] = (0,external_React_.useState)(() => stringOrUndefined(type));
5985  useSafeLayoutEffect(() => {
5986    const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
5987    setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type));
5988  }, [refOrElement, type]);
5989  return tagName;
5990}
5991function useAttribute(refOrElement, attributeName, defaultValue) {
5992  const [attribute, setAttribute] = useState(defaultValue);
5993  useSafeLayoutEffect(() => {
5994    const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
5995    const value = element == null ? void 0 : element.getAttribute(attributeName);
5996    if (value == null)
5997      return;
5998    setAttribute(value);
5999  }, [refOrElement, attributeName]);
6000  return attribute;
6001}
6002function useUpdateEffect(effect, deps) {
6003  const mounted = useRef(false);
6004  useEffect(() => {
6005    if (mounted.current) {
6006      return effect();
6007    }
6008    mounted.current = true;
6009  }, deps);
6010  useEffect(
6011    () => () => {
6012      mounted.current = false;
6013    },
6014    []
6015  );
6016}
6017function useUpdateLayoutEffect(effect, deps) {
6018  const mounted = useRef(false);
6019  useSafeLayoutEffect(() => {
6020    if (mounted.current) {
6021      return effect();
6022    }
6023    mounted.current = true;
6024  }, deps);
6025  useSafeLayoutEffect(
6026    () => () => {
6027      mounted.current = false;
6028    },
6029    []
6030  );
6031}
6032function useControlledState(defaultState, state, setState) {
6033  const [localState, setLocalState] = useState(defaultState);
6034  const nextState = state !== void 0 ? state : localState;
6035  const stateRef = J7Q2EO23_useLiveRef(state);
6036  const setStateRef = J7Q2EO23_useLiveRef(setState);
6037  const nextStateRef = J7Q2EO23_useLiveRef(nextState);
6038  const setNextState = useCallback((prevValue) => {
6039    const setStateProp = setStateRef.current;
6040    if (setStateProp) {
6041      if (isSetNextState(setStateProp)) {
6042        setStateProp(prevValue);
6043      } else {
6044        const nextValue = applyState(prevValue, nextStateRef.current);
6045        nextStateRef.current = nextValue;
6046        setStateProp(nextValue);
6047      }
6048    }
6049    if (stateRef.current === void 0) {
6050      setLocalState(prevValue);
6051    }
6052  }, []);
6053  defineSetNextState(setNextState);
6054  return [nextState, setNextState];
6055}
6056var SET_NEXT_STATE = Symbol("setNextState");
6057function isSetNextState(arg) {
6058  return arg[SET_NEXT_STATE] === true;
6059}
6060function defineSetNextState(arg) {
6061  if (!isSetNextState(arg)) {
6062    Object.defineProperty(arg, SET_NEXT_STATE, { value: true });
6063  }
6064}
6065function useForceUpdate() {
6066  return (0,external_React_.useReducer)(() => [], []);
6067}
6068function useBooleanEvent(booleanOrCallback) {
6069  return useEvent(
6070    typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback
6071  );
6072}
6073function useWrapElement(props, callback, deps = []) {
6074  const wrapElement = (0,external_React_.useCallback)(
6075    (element) => {
6076      if (props.wrapElement) {
6077        element = props.wrapElement(element);
6078      }
6079      return callback(element);
6080    },
6081    [...deps, props.wrapElement]
6082  );
6083  return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { wrapElement });
6084}
6085function usePortalRef(portalProp = false, portalRefProp) {
6086  const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
6087  const portalRef = useMergeRefs(setPortalNode, portalRefProp);
6088  const domReady = !portalProp || portalNode;
6089  return { portalRef, portalNode, domReady };
6090}
6091function useIsMouseMoving() {
6092  (0,external_React_.useEffect)(() => {
6093    addGlobalEventListener("mousemove", setMouseMoving, true);
6094    addGlobalEventListener("mousedown", resetMouseMoving, true);
6095    addGlobalEventListener("mouseup", resetMouseMoving, true);
6096    addGlobalEventListener("keydown", resetMouseMoving, true);
6097    addGlobalEventListener("scroll", resetMouseMoving, true);
6098  }, []);
6099  const isMouseMoving = useEvent(() => mouseMoving);
6100  return isMouseMoving;
6101}
6102var mouseMoving = false;
6103var previousScreenX = 0;
6104var previousScreenY = 0;
6105function hasMouseMovement(event) {
6106  const movementX = event.movementX || event.screenX - previousScreenX;
6107  const movementY = event.movementY || event.screenY - previousScreenY;
6108  previousScreenX = event.screenX;
6109  previousScreenY = event.screenY;
6110  return movementX || movementY || "production" === "test";
6111}
6112function setMouseMoving(event) {
6113  if (!hasMouseMovement(event))
6114    return;
6115  mouseMoving = true;
6116}
6117function resetMouseMoving() {
6118  mouseMoving = false;
6119}
6120
6121
6122
6123// EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js
6124var shim = __webpack_require__(635);
6125;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FHQZ2KRN.js
6126
6127
6128
6129// src/utils/store.tsx
6130
6131
6132
6133var noopSubscribe = () => () => {
6134};
6135function useStoreState(store, keyOrSelector = identity) {
6136  const getSnapshot = () => {
6137    if (!store)
6138      return;
6139    const state = store.getState();
6140    const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
6141    const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
6142    if (selector)
6143      return selector(state);
6144    if (!key)
6145      return;
6146    if (!WVTCK5PV_hasOwnProperty(state, key))
6147      return;
6148    return state[key];
6149  };
6150  return (0,shim.useSyncExternalStore)(
6151    (store == null ? void 0 : store.subscribe) || noopSubscribe,
6152    getSnapshot,
6153    getSnapshot
6154  );
6155}
6156function useStoreProps(store, props, key, setKey) {
6157  const value = WVTCK5PV_hasOwnProperty(props, key) ? props[key] : void 0;
6158  const propsRef = J7Q2EO23_useLiveRef({
6159    value,
6160    setValue: setKey ? props[setKey] : void 0
6161  });
6162  useSafeLayoutEffect(() => {
6163    return store.sync(
6164      (state, prev) => {
6165        const { value: value2, setValue } = propsRef.current;
6166        if (!setValue)
6167          return;
6168        if (state[key] === prev[key])
6169          return;
6170        if (state[key] === value2)
6171          return;
6172        setValue(state[key]);
6173      },
6174      [key]
6175    );
6176  }, [store, key]);
6177  useSafeLayoutEffect(() => {
6178    return store.sync(() => {
6179      if (value === void 0)
6180        return;
6181      store.setState(key, value);
6182    }, [key]);
6183  }, [store, key, value]);
6184}
6185function FHQZ2KRN_useStore(createStore) {
6186  const store = useLazyValue(createStore);
6187  useSafeLayoutEffect(() => store.init(), [store]);
6188  const useState = (0,external_React_.useCallback)(
6189    (keyOrSelector) => useStoreState(store, keyOrSelector),
6190    [store]
6191  );
6192  return (0,external_React_.useMemo)(() => PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, store), { useState }), [store, useState]);
6193}
6194
6195
6196
6197;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/FQL4TRMX.js
6198
6199
6200
6201// src/utils/store.ts
6202function createStore(initialState, ...stores) {
6203  let state = initialState;
6204  let prevStateBatch = state;
6205  let lastUpdate = Symbol();
6206  let initialized = false;
6207  const updatedKeys = /* @__PURE__ */ new Set();
6208  const setups = /* @__PURE__ */ new Set();
6209  const listeners = /* @__PURE__ */ new Set();
6210  const listenersBatch = /* @__PURE__ */ new Set();
6211  const disposables = /* @__PURE__ */ new WeakMap();
6212  const listenerKeys = /* @__PURE__ */ new WeakMap();
6213  const setup = (callback) => {
6214    setups.add(callback);
6215    return () => setups.delete(callback);
6216  };
6217  const init = () => {
6218    if (initialized)
6219      return noop;
6220    if (!stores.length)
6221      return noop;
6222    initialized = true;
6223    const desyncs = getKeys(state).map(
6224      (key) => chain(
6225        ...stores.map((store) => {
6226          var _a, _b;
6227          const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store);
6228          if (!storeState)
6229            return;
6230          if (!WVTCK5PV_hasOwnProperty(storeState, key))
6231            return;
6232          return (_b = store == null ? void 0 : store.sync) == null ? void 0 : _b.call(store, (state2) => setState(key, state2[key]), [key]);
6233        })
6234      )
6235    );
6236    const teardowns = [];
6237    setups.forEach((setup2) => teardowns.push(setup2()));
6238    const cleanups = stores.map((store) => {
6239      var _a;
6240      return (_a = store == null ? void 0 : store.init) == null ? void 0 : _a.call(store);
6241    });
6242    return chain(...desyncs, ...teardowns, ...cleanups, () => {
6243      initialized = false;
6244    });
6245  };
6246  const sub = (listener, keys, batch = false) => {
6247    const set = batch ? listenersBatch : listeners;
6248    set.add(listener);
6249    listenerKeys.set(listener, keys);
6250    return () => {
6251      var _a;
6252      (_a = disposables.get(listener)) == null ? void 0 : _a();
6253      disposables.delete(listener);
6254      listenerKeys.delete(listener);
6255      set.delete(listener);
6256    };
6257  };
6258  const subscribe = (listener, keys) => sub(listener, keys);
6259  const sync = (listener, keys) => {
6260    disposables.set(listener, listener(state, state));
6261    return sub(listener, keys);
6262  };
6263  const syncBatch = (listener, keys) => {
6264    disposables.set(listener, listener(state, prevStateBatch));
6265    return sub(listener, keys, true);
6266  };
6267  const getState = () => state;
6268  const setState = (key, value) => {
6269    if (!WVTCK5PV_hasOwnProperty(state, key))
6270      return;
6271    const nextValue = WVTCK5PV_applyState(value, state[key]);
6272    if (nextValue === state[key])
6273      return;
6274    stores.forEach((store) => {
6275      var _a;
6276      (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue);
6277    });
6278    const prevState = state;
6279    state = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, state), { [key]: nextValue });
6280    const thisUpdate = Symbol();
6281    lastUpdate = thisUpdate;
6282    updatedKeys.add(key);
6283    const run = (listener, prev, uKeys) => {
6284      var _a;
6285      const keys = listenerKeys.get(listener);
6286      const updated = (k) => uKeys ? uKeys.has(k) : k === key;
6287      if (!keys || keys.some(updated)) {
6288        (_a = disposables.get(listener)) == null ? void 0 : _a();
6289        disposables.set(listener, listener(state, prev));
6290      }
6291    };
6292    listeners.forEach((listener) => run(listener, prevState));
6293    queueMicrotask(() => {
6294      if (lastUpdate !== thisUpdate)
6295        return;
6296      const snapshot = state;
6297      listenersBatch.forEach((listener) => {
6298        run(listener, prevStateBatch, updatedKeys);
6299      });
6300      prevStateBatch = snapshot;
6301      updatedKeys.clear();
6302    });
6303  };
6304  const pick2 = (...keys) => createStore(pick(state, keys), finalStore);
6305  const omit2 = (...keys) => createStore(omit(state, keys), finalStore);
6306  const finalStore = {
6307    setup,
6308    init,
6309    subscribe,
6310    sync,
6311    syncBatch,
6312    getState,
6313    setState,
6314    pick: pick2,
6315    omit: omit2
6316  };
6317  return finalStore;
6318}
6319function mergeStore(...stores) {
6320  const initialState = stores.reduce((state, store2) => {
6321    var _a;
6322    const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2);
6323    if (!nextState)
6324      return state;
6325    return _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, state), nextState);
6326  }, {});
6327  const store = createStore(initialState, ...stores);
6328  return store;
6329}
6330
6331
6332
6333;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/L5RO76KW.js
6334
6335
6336
6337
6338// src/disclosure/disclosure-store.ts
6339function createDisclosureStore(props = {}) {
6340  var _a;
6341  const store = mergeStore(
6342    props.store,
6343    (_a = props.disclosure) == null ? void 0 : _a.omit("contentElement", "disclosureElement")
6344  );
6345  const syncState = store == null ? void 0 : store.getState();
6346  const open = defaultValue(
6347    props.open,
6348    syncState == null ? void 0 : syncState.open,
6349    props.defaultOpen,
6350    false
6351  );
6352  const animated = defaultValue(props.animated, syncState == null ? void 0 : syncState.animated, false);
6353  const initialState = {
6354    open,
6355    animated,
6356    animating: !!animated && open,
6357    mounted: open,
6358    contentElement: defaultValue(syncState == null ? void 0 : syncState.contentElement, null),
6359    disclosureElement: defaultValue(syncState == null ? void 0 : syncState.disclosureElement, null)
6360  };
6361  const disclosure = createStore(initialState, store);
6362  disclosure.setup(
6363    () => disclosure.sync(
6364      (state) => {
6365        if (state.animated)
6366          return;
6367        disclosure.setState("animating", false);
6368      },
6369      ["animated", "animating"]
6370    )
6371  );
6372  disclosure.setup(
6373    () => disclosure.sync(
6374      (state, prev) => {
6375        if (!state.animated)
6376          return;
6377        const mounting = state === prev;
6378        const animating = mounting ? state.open : state.open !== prev.open;
6379        disclosure.setState("animating", animating);
6380      },
6381      ["open", "animated"]
6382    )
6383  );
6384  disclosure.setup(
6385    () => disclosure.sync(
6386      (state) => {
6387        disclosure.setState("mounted", state.open || state.animating);
6388      },
6389      ["open", "animating"]
6390    )
6391  );
6392  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, disclosure), {
6393    setOpen: (value) => disclosure.setState("open", value),
6394    show: () => disclosure.setState("open", true),
6395    hide: () => disclosure.setState("open", false),
6396    toggle: () => disclosure.setState("open", (open2) => !open2),
6397    stopAnimation: () => disclosure.setState("animating", false),
6398    setContentElement: (value) => disclosure.setState("contentElement", value),
6399    setDisclosureElement: (value) => disclosure.setState("disclosureElement", value)
6400  });
6401}
6402
6403
6404
6405;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/54LBRJ55.js
6406
6407
6408
6409// src/disclosure/disclosure-store.ts
6410
6411function useDisclosureStoreOptions(_props) {
6412  return {};
6413}
6414function useDisclosureStoreProps(store, props) {
6415  useStoreProps(store, props, "open", "setOpen");
6416  useStoreProps(store, props, "animated");
6417  return store;
6418}
6419function useDisclosureStore(props = {}) {
6420  const options = useDisclosureStoreOptions(props);
6421  const store = FHQZ2KRN_useStore(
6422    () => createDisclosureStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options))
6423  );
6424  return useDisclosureStoreProps(store, props);
6425}
6426
6427
6428
6429;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TALTYI5G.js
6430
6431
6432
6433
6434// src/dialog/dialog-store.ts
6435
6436function useDialogStoreOptions(props) {
6437  return useDisclosureStoreOptions(props);
6438}
6439function useDialogStoreProps(store, props) {
6440  return useDisclosureStoreProps(store, props);
6441}
6442function useDialogStore(props = {}) {
6443  const options = useDialogStoreOptions(props);
6444  const store = useStore(
6445    () => Core.createDialogStore(__spreadValues(__spreadValues({}, props), options))
6446  );
6447  return useDialogStoreProps(store, props);
6448}
6449
6450
6451
6452;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/5QJYOWLQ.js
6453
6454
6455
6456
6457// src/popover/popover-store.ts
6458
6459function usePopoverStoreOptions(props) {
6460  return useDialogStoreOptions(props);
6461}
6462function usePopoverStoreProps(store, props) {
6463  store = useDialogStoreProps(store, props);
6464  useStoreProps(store, props, "placement");
6465  return store;
6466}
6467function usePopoverStore(props = {}) {
6468  const options = usePopoverStoreOptions(props);
6469  const store = useStore(
6470    () => Core.createPopoverStore(__spreadValues(__spreadValues({}, props), options))
6471  );
6472  return usePopoverStoreProps(store, props);
6473}
6474
6475
6476
6477;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JFHRFFJJ.js
6478
6479
6480
6481
6482// src/hovercard/hovercard-store.ts
6483
6484function useHovercardStoreOptions(props) {
6485  return usePopoverStoreOptions(props);
6486}
6487function useHovercardStoreProps(store, props) {
6488  store = usePopoverStoreProps(store, props);
6489  useStoreProps(store, props, "timeout");
6490  useStoreProps(store, props, "showTimeout");
6491  useStoreProps(store, props, "hideTimeout");
6492  return store;
6493}
6494function useHovercardStore(props = {}) {
6495  const options = useHovercardStoreOptions(props);
6496  const store = useStore(
6497    () => Core.createHovercardStore(__spreadValues(__spreadValues({}, props), options))
6498  );
6499  return useHovercardStoreProps(store, props);
6500}
6501
6502
6503
6504;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/UWW2ZP3K.js
6505
6506
6507// src/dialog/dialog-store.ts
6508function createDialogStore(props = {}) {
6509  return createDisclosureStore(props);
6510}
6511
6512
6513
6514;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/LM4QG55U.js
6515
6516
6517
6518
6519
vendor: 4,179 bytes, lines 6520-6634
6520// src/popover/popover-store.ts
6521function createPopoverStore(_a = {}) {
6522  var _b = _a, {
6523    popover: otherPopover
6524  } = _b, props = PNRLI7OV_objRest(_b, [
6525    "popover"
6526  ]);
6527  const store = mergeStore(
6528    props.store,
6529    otherPopover == null ? void 0 : otherPopover.omit(
6530      "arrowElement",
6531      "anchorElement",
6532      "contentElement",
6533      "popoverElement",
6534      "disclosureElement"
6535    )
6536  );
6537  const syncState = store == null ? void 0 : store.getState();
6538  const dialog = createDialogStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { store }));
6539  const placement = defaultValue(
6540    props.placement,
6541    syncState == null ? void 0 : syncState.placement,
6542    "bottom"
6543  );
6544  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, dialog.getState()), {
6545    placement,
6546    currentPlacement: placement,
6547    anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null),
6548    popoverElement: defaultValue(syncState == null ? void 0 : syncState.popoverElement, null),
6549    arrowElement: defaultValue(syncState == null ? void 0 : syncState.arrowElement, null),
6550    rendered: Symbol("rendered")
6551  });
6552  const popover = createStore(initialState, dialog, store);
6553  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, dialog), popover), {
6554    setAnchorElement: (element) => popover.setState("anchorElement", element),
6555    setPopoverElement: (element) => popover.setState("popoverElement", element),
6556    setArrowElement: (element) => popover.setState("arrowElement", element),
6557    render: () => popover.setState("rendered", Symbol("rendered"))
6558  });
6559}
6560
6561
6562
6563;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/XJGRXN57.js
6564
6565
6566
6567
6568
6569// src/hovercard/hovercard-store.ts
6570function createHovercardStore(props = {}) {
6571  var _a;
6572  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
6573  const popover = createPopoverStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), {
6574    placement: defaultValue(
6575      props.placement,
6576      syncState == null ? void 0 : syncState.placement,
6577      "bottom"
6578    )
6579  }));
6580  const timeout = defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 500);
6581  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, popover.getState()), {
6582    timeout,
6583    showTimeout: defaultValue(props.showTimeout, syncState == null ? void 0 : syncState.showTimeout),
6584    hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout),
6585    autoFocusOnShow: defaultValue(syncState == null ? void 0 : syncState.autoFocusOnShow, false)
6586  });
6587  const hovercard = createStore(initialState, popover, props.store);
6588  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, popover), hovercard), {
6589    setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value)
6590  });
6591}
6592
6593
6594
6595;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js
6596
6597
6598
6599
6600
6601
6602
6603
6604// src/tooltip/tooltip-store.ts
6605function createTooltipStore(props = {}) {
6606  var _a;
6607  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
6608  const hovercard = createHovercardStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), {
6609    placement: defaultValue(
6610      props.placement,
6611      syncState == null ? void 0 : syncState.placement,
6612      "top"
6613    ),
6614    hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0)
6615  }));
6616  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, hovercard.getState()), {
6617    type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"),
6618    skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
6619  });
6620  const tooltip = createStore(initialState, hovercard, props.store);
6621  return _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, hovercard), tooltip);
6622}
6623
6624
6625;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-store.js
6626
6627
6628
6629
6630
6631
6632
6633
6634
6635// src/tooltip/tooltip-store.ts
6636
6637function useTooltipStoreOptions(props) {
6638  return useHovercardStoreOptions(props);
6639}
6640function useTooltipStoreProps(store, props) {
6641  store = useHovercardStoreProps(store, props);
6642  useStoreProps(store, props, "type");
6643  useStoreProps(store, props, "skipTimeout");
6644  return store;
6645}
6646function useTooltipStore(props = {}) {
6647  const options = useTooltipStoreOptions(props);
6648  const store = FHQZ2KRN_useStore(
6649    () => createTooltipStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options))
6650  );
6651  return useTooltipStoreProps(store, props);
6652}
6653
6654
6655;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BMLNRUFQ.js
6656// src/focusable/focusable-context.ts
6657
6658var FocusableContext = (0,external_React_.createContext)(true);
6659
6660
6661
6662// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
6663var jsx_runtime = __webpack_require__(7557);
6664;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NQJBHION.js
6665
6666
6667
6668
6669// src/utils/system.tsx
6670
6671
6672
6673function NQJBHION_isRenderProp(children) {
6674  return typeof children === "function";
6675}
6676function forwardRef2(render) {
6677  const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
6678  Role.displayName = render.displayName || render.name;
6679  return Role;
6680}
6681function memo2(Component, propsAreEqual) {
6682  const Role = React.memo(Component, propsAreEqual);
6683  Role.displayName = Component.displayName || Component.name;
6684  return Role;
6685}
6686function NQJBHION_createComponent(render) {
6687  const Role = (props, ref) => render(PNRLI7OV_spreadValues({ ref }, props));
6688  return external_React_.forwardRef(Role);
6689}
6690function createMemoComponent(render) {
6691  const Role = NQJBHION_createComponent(render);
6692  return external_React_.memo(Role);
6693}
6694function NQJBHION_createElement(Type, props) {
6695  const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
6696  let element;
6697  const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
6698  if (As && typeof As !== "string") {
6699    element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, rest), { render }));
6700  } else if (external_React_.isValidElement(render)) {
6701    const renderProps = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, render.props), { ref: mergedRef });
6702    element = external_React_.cloneElement(render, mergeProps(rest, renderProps));
6703  } else if (render) {
6704    element = render(rest);
6705  } else if (NQJBHION_isRenderProp(props.children)) {
6706    const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
6707    element = props.children(otherProps);
6708  } else if (As) {
6709    element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, PNRLI7OV_spreadValues({}, rest));
6710  } else {
6711    element = /* @__PURE__ */ (0,jsx_runtime.jsx)(Type, PNRLI7OV_spreadValues({}, rest));
6712  }
6713  if (wrapElement) {
6714    return wrapElement(element);
6715  }
6716  return element;
6717}
6718function NQJBHION_createHook(useProps) {
6719  const useRole = (props = {}) => {
6720    const htmlProps = useProps(props);
6721    const copy = {};
6722    for (const prop in htmlProps) {
6723      if (WVTCK5PV_hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
6724        copy[prop] = htmlProps[prop];
6725      }
6726    }
6727    return copy;
6728  };
6729  return useRole;
6730}
6731
6732
6733
6734;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/focus.js
6735
6736
6737
vendor: 7,116 bytes, lines 6738-6933
6738// src/utils/focus.ts
6739var focus_selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
6740function focus_hasNegativeTabIndex(element) {
6741  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
6742  return tabIndex < 0;
6743}
6744function focus_isFocusable(element) {
6745  if (!O35LWD4W_matches(element, focus_selector))
6746    return false;
6747  if (!O35LWD4W_isVisible(element))
6748    return false;
6749  if (O35LWD4W_closest(element, "[inert]"))
6750    return false;
6751  return true;
6752}
6753function focus_isTabbable(element) {
6754  if (!focus_isFocusable(element))
6755    return false;
6756  if (focus_hasNegativeTabIndex(element))
6757    return false;
6758  if (!("form" in element))
6759    return true;
6760  if (!element.form)
6761    return true;
6762  if (element.checked)
6763    return true;
6764  if (element.type !== "radio")
6765    return true;
6766  const radioGroup = element.form.elements.namedItem(element.name);
6767  if (!radioGroup)
6768    return true;
6769  if (!("length" in radioGroup))
6770    return true;
6771  const activeElement = O35LWD4W_getActiveElement(element);
6772  if (!activeElement)
6773    return true;
6774  if (activeElement === element)
6775    return true;
6776  if (!("form" in activeElement))
6777    return true;
6778  if (activeElement.form !== element.form)
6779    return true;
6780  if (activeElement.name !== element.name)
6781    return true;
6782  return false;
6783}
6784function focus_getAllFocusableIn(container, includeContainer) {
6785  const elements = Array.from(
6786    container.querySelectorAll(focus_selector)
6787  );
6788  if (includeContainer) {
6789    elements.unshift(container);
6790  }
6791  const focusableElements = elements.filter(focus_isFocusable);
6792  focusableElements.forEach((element, i) => {
6793    if (isFrame(element) && element.contentDocument) {
6794      const frameBody = element.contentDocument.body;
6795      focusableElements.splice(i, 1, ...focus_getAllFocusableIn(frameBody));
6796    }
6797  });
6798  return focusableElements;
6799}
6800function getAllFocusable(includeBody) {
6801  return focus_getAllFocusableIn(document.body, includeBody);
6802}
6803function focus_getFirstFocusableIn(container, includeContainer) {
6804  const [first] = focus_getAllFocusableIn(container, includeContainer);
6805  return first || null;
6806}
6807function getFirstFocusable(includeBody) {
6808  return focus_getFirstFocusableIn(document.body, includeBody);
6809}
6810function focus_getAllTabbableIn(container, includeContainer, fallbackToFocusable) {
6811  const elements = Array.from(
6812    container.querySelectorAll(focus_selector)
6813  );
6814  const tabbableElements = elements.filter(focus_isTabbable);
6815  if (includeContainer && focus_isTabbable(container)) {
6816    tabbableElements.unshift(container);
6817  }
6818  tabbableElements.forEach((element, i) => {
6819    if (isFrame(element) && element.contentDocument) {
6820      const frameBody = element.contentDocument.body;
6821      const allFrameTabbable = focus_getAllTabbableIn(
6822        frameBody,
6823        false,
6824        fallbackToFocusable
6825      );
6826      tabbableElements.splice(i, 1, ...allFrameTabbable);
6827    }
6828  });
6829  if (!tabbableElements.length && fallbackToFocusable) {
6830    return elements;
6831  }
6832  return tabbableElements;
6833}
6834function getAllTabbable(fallbackToFocusable) {
6835  return focus_getAllTabbableIn(document.body, false, fallbackToFocusable);
6836}
6837function focus_getFirstTabbableIn(container, includeContainer, fallbackToFocusable) {
6838  const [first] = focus_getAllTabbableIn(
6839    container,
6840    includeContainer,
6841    fallbackToFocusable
6842  );
6843  return first || null;
6844}
6845function getFirstTabbable(fallbackToFocusable) {
6846  return focus_getFirstTabbableIn(document.body, false, fallbackToFocusable);
6847}
6848function focus_getLastTabbableIn(container, includeContainer, fallbackToFocusable) {
6849  const allTabbable = focus_getAllTabbableIn(
6850    container,
6851    includeContainer,
6852    fallbackToFocusable
6853  );
6854  return allTabbable[allTabbable.length - 1] || null;
6855}
6856function getLastTabbable(fallbackToFocusable) {
6857  return focus_getLastTabbableIn(document.body, false, fallbackToFocusable);
6858}
6859function focus_getNextTabbableIn(container, includeContainer, fallbackToFirst, fallbackToFocusable) {
6860  const activeElement = O35LWD4W_getActiveElement(container);
6861  const allFocusable = focus_getAllFocusableIn(container, includeContainer);
6862  const activeIndex = allFocusable.indexOf(activeElement);
6863  const nextFocusableElements = allFocusable.slice(activeIndex + 1);
6864  return nextFocusableElements.find(focus_isTabbable) || (fallbackToFirst ? allFocusable.find(focus_isTabbable) : null) || (fallbackToFocusable ? nextFocusableElements[0] : null) || null;
6865}
6866function getNextTabbable(fallbackToFirst, fallbackToFocusable) {
6867  return focus_getNextTabbableIn(
6868    document.body,
6869    false,
6870    fallbackToFirst,
6871    fallbackToFocusable
6872  );
6873}
6874function focus_getPreviousTabbableIn(container, includeContainer, fallbackToLast, fallbackToFocusable) {
6875  const activeElement = O35LWD4W_getActiveElement(container);
6876  const allFocusable = focus_getAllFocusableIn(container, includeContainer).reverse();
6877  const activeIndex = allFocusable.indexOf(activeElement);
6878  const previousFocusableElements = allFocusable.slice(activeIndex + 1);
6879  return previousFocusableElements.find(focus_isTabbable) || (fallbackToLast ? allFocusable.find(focus_isTabbable) : null) || (fallbackToFocusable ? previousFocusableElements[0] : null) || null;
6880}
6881function getPreviousTabbable(fallbackToFirst, fallbackToFocusable) {
6882  return focus_getPreviousTabbableIn(
6883    document.body,
6884    false,
6885    fallbackToFirst,
6886    fallbackToFocusable
6887  );
6888}
6889function focus_getClosestFocusable(element) {
6890  while (element && !focus_isFocusable(element)) {
6891    element = closest(element, focus_selector);
6892  }
6893  return element || null;
6894}
6895function focus_hasFocus(element) {
6896  const activeElement = O35LWD4W_getActiveElement(element);
6897  if (!activeElement)
6898    return false;
6899  if (activeElement === element)
6900    return true;
6901  const activeDescendant = activeElement.getAttribute("aria-activedescendant");
6902  if (!activeDescendant)
6903    return false;
6904  return activeDescendant === element.id;
6905}
6906function focus_hasFocusWithin(element) {
6907  const activeElement = O35LWD4W_getActiveElement(element);
6908  if (!activeElement)
6909    return false;
6910  if (O35LWD4W_contains(element, activeElement))
6911    return true;
6912  const activeDescendant = activeElement.getAttribute("aria-activedescendant");
6913  if (!activeDescendant)
6914    return false;
6915  if (!("id" in element))
6916    return false;
6917  if (activeDescendant === element.id)
6918    return true;
6919  return !!element.querySelector(`#${CSS.escape(activeDescendant)}`);
6920}
6921function focus_focusIfNeeded(element) {
6922  if (!focus_hasFocusWithin(element) && focus_isFocusable(element)) {
6923    element.focus();
6924  }
6925}
6926function disableFocus(element) {
6927  var _a;
6928  const currentTabindex = (_a = element.getAttribute("tabindex")) != null ? _a : "";
6929  element.setAttribute("data-tabindex", currentTabindex);
6930  element.setAttribute("tabindex", "-1");
6931}
6932function disableFocusIn(container, includeContainer) {
6933  const tabbableElements = focus_getAllTabbableIn(container, includeContainer);
6934  tabbableElements.forEach(disableFocus);
6935}
6936function restoreFocusIn(container) {
6937  const elements = container.querySelectorAll("[data-tabindex]");
6938  const restoreTabIndex = (element) => {
6939    const tabindex = element.getAttribute("data-tabindex");
6940    element.removeAttribute("data-tabindex");
6941    if (tabindex) {
6942      element.setAttribute("tabindex", tabindex);
6943    } else {
6944      element.removeAttribute("tabindex");
6945    }
6946  };
6947  if (container.hasAttribute("data-tabindex")) {
6948    restoreTabIndex(container);
6949  }
6950  elements.forEach(restoreTabIndex);
6951}
6952function focusIntoView(element, options) {
6953  if (!("scrollIntoView" in element)) {
6954    element.focus();
6955  } else {
6956    element.focus({ preventScroll: true });
6957    element.scrollIntoView(_chunks_PNRLI7OV_spreadValues({ block: "nearest", inline: "nearest" }, options));
6958  }
6959}
6960
6961
6962;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/UCFCIHEU.js
6963
6964
6965// src/utils/platform.ts
6966function isTouchDevice() {
6967  return O35LWD4W_canUseDOM && !!navigator.maxTouchPoints;
6968}
6969function UCFCIHEU_isApple() {
6970  if (!O35LWD4W_canUseDOM)
6971    return false;
6972  return /mac|iphone|ipad|ipod/i.test(navigator.platform);
6973}
6974function isSafari() {
6975  return O35LWD4W_canUseDOM && UCFCIHEU_isApple() && /apple/i.test(navigator.vendor);
6976}
6977function isFirefox() {
6978  return O35LWD4W_canUseDOM && /firefox\//i.test(navigator.userAgent);
6979}
6980function isMac() {
6981  return O35LWD4W_canUseDOM && navigator.platform.startsWith("Mac") && !isTouchDevice();
6982}
6983
6984
6985
6986;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MYID4V27.js
6987
6988
6989
6990
6991
vendor: 5,566 bytes, lines 6992-7192
6992// src/focusable/focusable.ts
6993
6994
6995
6996
6997
6998var isSafariBrowser = isSafari();
6999var alwaysFocusVisibleInputTypes = [
7000  "text",
7001  "search",
7002  "url",
7003  "tel",
7004  "email",
7005  "password",
7006  "number",
7007  "date",
7008  "month",
7009  "week",
7010  "time",
7011  "datetime",
7012  "datetime-local"
7013];
7014function isAlwaysFocusVisible(element) {
7015  const { tagName, readOnly, type } = element;
7016  if (tagName === "TEXTAREA" && !readOnly)
7017    return true;
7018  if (tagName === "SELECT" && !readOnly)
7019    return true;
7020  if (tagName === "INPUT" && !readOnly) {
7021    return alwaysFocusVisibleInputTypes.includes(type);
7022  }
7023  if (element.isContentEditable)
7024    return true;
7025  return false;
7026}
7027function isAlwaysFocusVisibleDelayed(element) {
7028  const role = element.getAttribute("role");
7029  if (role !== "combobox")
7030    return false;
7031  return !!element.dataset.name;
7032}
7033function getLabels(element) {
7034  if ("labels" in element) {
7035    return element.labels;
7036  }
7037  return null;
7038}
7039function isNativeCheckboxOrRadio(element) {
7040  const tagName = element.tagName.toLowerCase();
7041  if (tagName === "input" && element.type) {
7042    return element.type === "radio" || element.type === "checkbox";
7043  }
7044  return false;
7045}
7046function MYID4V27_isNativeTabbable(tagName) {
7047  if (!tagName)
7048    return true;
7049  return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
7050}
7051function MYID4V27_supportsDisabledAttribute(tagName) {
7052  if (!tagName)
7053    return true;
7054  return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
7055}
7056function MYID4V27_getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
7057  if (!focusable) {
7058    return tabIndexProp;
7059  }
7060  if (trulyDisabled) {
7061    if (nativeTabbable && !supportsDisabled) {
7062      return -1;
7063    }
7064    return;
7065  }
7066  if (nativeTabbable) {
7067    return tabIndexProp;
7068  }
7069  return tabIndexProp || 0;
7070}
7071function MYID4V27_useDisableEvent(onEvent, disabled) {
7072  return useEvent((event) => {
7073    onEvent == null ? void 0 : onEvent(event);
7074    if (event.defaultPrevented)
7075      return;
7076    if (disabled) {
7077      event.stopPropagation();
7078      event.preventDefault();
7079    }
7080  });
7081}
7082var isKeyboardModality = true;
7083function onGlobalMouseDown(event) {
7084  const target = event.target;
7085  if (target && "hasAttribute" in target) {
7086    if (!target.hasAttribute("data-focus-visible")) {
7087      isKeyboardModality = false;
7088    }
7089  }
7090}
7091function onGlobalKeyDown(event) {
7092  if (event.metaKey)
7093    return;
7094  if (event.ctrlKey)
7095    return;
7096  if (event.altKey)
7097    return;
7098  isKeyboardModality = true;
7099}
7100var useFocusable = NQJBHION_createHook(
7101  (_a) => {
7102    var _b = _a, {
7103      focusable = true,
7104      accessibleWhenDisabled,
7105      autoFocus,
7106      onFocusVisible
7107    } = _b, props = __objRest(_b, [
7108      "focusable",
7109      "accessibleWhenDisabled",
7110      "autoFocus",
7111      "onFocusVisible"
7112    ]);
7113    const ref = (0,external_React_.useRef)(null);
7114    (0,external_React_.useEffect)(() => {
7115      if (!focusable)
7116        return;
7117      addGlobalEventListener("mousedown", onGlobalMouseDown, true);
7118      addGlobalEventListener("keydown", onGlobalKeyDown, true);
7119    }, [focusable]);
7120    if (isSafariBrowser) {
7121      (0,external_React_.useEffect)(() => {
7122        if (!focusable)
7123          return;
7124        const element = ref.current;
7125        if (!element)
7126          return;
7127        if (!isNativeCheckboxOrRadio(element))
7128          return;
7129        const labels = getLabels(element);
7130        if (!labels)
7131          return;
7132        const onMouseUp = () => queueMicrotask(() => element.focus());
7133        labels.forEach((label) => label.addEventListener("mouseup", onMouseUp));
7134        return () => {
7135          labels.forEach(
7136            (label) => label.removeEventListener("mouseup", onMouseUp)
7137          );
7138        };
7139      }, [focusable]);
7140    }
7141    const disabled = focusable && props.disabled;
7142    const trulyDisabled = !!disabled && !accessibleWhenDisabled;
7143    const [focusVisible, setFocusVisible] = (0,external_React_.useState)(false);
7144    (0,external_React_.useEffect)(() => {
7145      if (!focusable)
7146        return;
7147      if (trulyDisabled && focusVisible) {
7148        setFocusVisible(false);
7149      }
7150    }, [focusable, trulyDisabled, focusVisible]);
7151    (0,external_React_.useEffect)(() => {
7152      if (!focusable)
7153        return;
7154      if (!focusVisible)
7155        return;
7156      const element = ref.current;
7157      if (!element)
7158        return;
7159      if (typeof IntersectionObserver === "undefined")
7160        return;
7161      const observer = new IntersectionObserver(() => {
7162        if (!focus_isFocusable(element)) {
7163          setFocusVisible(false);
7164        }
7165      });
7166      observer.observe(element);
7167      return () => observer.disconnect();
7168    }, [focusable, focusVisible]);
7169    const onKeyPressCapture = MYID4V27_useDisableEvent(
7170      props.onKeyPressCapture,
7171      disabled
7172    );
7173    const onMouseDownCapture = MYID4V27_useDisableEvent(
7174      props.onMouseDownCapture,
7175      disabled
7176    );
7177    const onClickCapture = MYID4V27_useDisableEvent(props.onClickCapture, disabled);
7178    const onMouseDownProp = props.onMouseDown;
7179    const onMouseDown = useEvent((event) => {
7180      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
7181      if (event.defaultPrevented)
7182        return;
7183      if (!focusable)
7184        return;
7185      const element = event.currentTarget;
7186      if (!isSafariBrowser)
7187        return;
7188      if (events_isPortalEvent(event))
7189        return;
7190      if (!O35LWD4W_isButton(element) && !isNativeCheckboxOrRadio(element))
7191        return;
7192      let receivedFocus = false;
7193      const onFocus = () => {
7194        receivedFocus = true;
7195      };
7196      const options = { capture: true, once: true };
7197      element.addEventListener("focusin", onFocus, options);
7198      queueBeforeEvent(element, "mouseup", () => {
7199        element.removeEventListener("focusin", onFocus, true);
7200        if (receivedFocus)
7201          return;
7202        focus_focusIfNeeded(element);
7203      });
7204    });
7205    const handleFocusVisible = (event, currentTarget) => {
7206      if (currentTarget) {
7207        event.currentTarget = currentTarget;
7208      }
7209      onFocusVisible == null ? void 0 : onFocusVisible(event);
7210      if (event.defaultPrevented)
7211        return;
7212      if (!focusable)
7213        return;
7214      const element = event.currentTarget;
7215      if (!element)
7216        return;
7217      if (!focus_hasFocus(element))
7218        return;
7219      setFocusVisible(true);
7220    };
7221    const onKeyDownCaptureProp = props.onKeyDownCapture;
7222    const onKeyDownCapture = useEvent(
7223      (event) => {
7224        onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
7225        if (event.defaultPrevented)
7226          return;
7227        if (!focusable)
7228          return;
7229        if (focusVisible)
7230          return;
7231        if (event.metaKey)
7232          return;
7233        if (event.altKey)
7234          return;
7235        if (event.ctrlKey)
7236          return;
7237        if (!events_isSelfTarget(event))
7238          return;
7239        const element = event.currentTarget;
7240        queueMicrotask(() => handleFocusVisible(event, element));
7241      }
7242    );
7243    const onFocusCaptureProp = props.onFocusCapture;
7244    const onFocusCapture = useEvent((event) => {
7245      onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
7246      if (event.defaultPrevented)
7247        return;
7248      if (!focusable)
7249        return;
7250      if (!events_isSelfTarget(event)) {
7251        setFocusVisible(false);
7252        return;
7253      }
7254      const element = event.currentTarget;
7255      const applyFocusVisible = () => handleFocusVisible(event, element);
7256      if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
7257        queueMicrotask(applyFocusVisible);
7258      } else if (isAlwaysFocusVisibleDelayed(event.target)) {
7259        queueBeforeEvent(event.target, "focusout", applyFocusVisible);
7260      } else {
7261        setFocusVisible(false);
7262      }
7263    });
7264    const onBlurProp = props.onBlur;
7265    const onBlur = useEvent((event) => {
7266      onBlurProp == null ? void 0 : onBlurProp(event);
7267      if (!focusable)
7268        return;
7269      if (!isFocusEventOutside(event))
7270        return;
7271      setFocusVisible(false);
7272    });
7273    const autoFocusOnShow = (0,external_React_.useContext)(FocusableContext);
7274    const autoFocusRef = useEvent((element) => {
7275      if (!focusable)
7276        return;
7277      if (!autoFocus)
7278        return;
7279      if (!element)
7280        return;
7281      if (!autoFocusOnShow)
7282        return;
7283      queueMicrotask(() => {
7284        if (focus_hasFocus(element))
7285          return;
7286        if (!focus_isFocusable(element))
7287          return;
7288        element.focus();
7289      });
7290    });
7291    const tagName = useTagName(ref, props.as);
7292    const nativeTabbable = focusable && MYID4V27_isNativeTabbable(tagName);
7293    const supportsDisabled = focusable && MYID4V27_supportsDisabledAttribute(tagName);
7294    const style = trulyDisabled ? PNRLI7OV_spreadValues({ pointerEvents: "none" }, props.style) : props.style;
7295    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
7296      "data-focus-visible": focusable && focusVisible ? "" : void 0,
7297      "data-autofocus": autoFocus ? true : void 0,
7298      "aria-disabled": disabled ? true : void 0
7299    }, props), {
7300      ref: useMergeRefs(ref, autoFocusRef, props.ref),
7301      style,
7302      tabIndex: MYID4V27_getTabIndex(
7303        focusable,
7304        trulyDisabled,
7305        nativeTabbable,
7306        supportsDisabled,
7307        props.tabIndex
7308      ),
7309      disabled: supportsDisabled && trulyDisabled ? true : void 0,
7310      // TODO: Test Focusable contentEditable.
7311      contentEditable: disabled ? void 0 : props.contentEditable,
7312      onKeyPressCapture,
7313      onClickCapture,
7314      onMouseDownCapture,
7315      onMouseDown,
7316      onKeyDownCapture,
7317      onFocusCapture,
7318      onBlur
7319    });
7320    return props;
7321  }
7322);
7323var Focusable = NQJBHION_createComponent((props) => {
7324  props = useFocusable(props);
7325  return NQJBHION_createElement("div", props);
7326});
7327if (false) {}
7328
7329
7330
7331;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/I3PXTXPI.js
7332
7333
7334
7335
7336
7337// src/hovercard/hovercard-anchor.ts
7338
7339
7340var useHovercardAnchor = NQJBHION_createHook(
7341  (_a) => {
7342    var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
7343    const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
7344    const showTimeoutRef = (0,external_React_.useRef)(0);
7345    (0,external_React_.useEffect)(() => () => window.clearTimeout(showTimeoutRef.current), []);
7346    (0,external_React_.useEffect)(() => {
7347      const onMouseLeave = (event) => {
7348        const { anchorElement } = store.getState();
7349        if (!anchorElement)
7350          return;
7351        if (event.target !== anchorElement)
7352          return;
7353        window.clearTimeout(showTimeoutRef.current);
7354        showTimeoutRef.current = 0;
7355      };
7356      return addGlobalEventListener("mouseleave", onMouseLeave, true);
7357    }, [store]);
7358    const onMouseMoveProp = props.onMouseMove;
7359    const showOnHoverProp = useBooleanEvent(showOnHover);
7360    const isMouseMoving = useIsMouseMoving();
7361    const onMouseMove = useEvent(
7362      (event) => {
7363        store.setAnchorElement(event.currentTarget);
7364        onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
7365        if (disabled)
7366          return;
7367        if (event.defaultPrevented)
7368          return;
7369        if (showTimeoutRef.current)
7370          return;
7371        if (!isMouseMoving())
7372          return;
7373        if (!showOnHoverProp(event))
7374          return;
7375        const { showTimeout, timeout } = store.getState();
7376        showTimeoutRef.current = window.setTimeout(() => {
7377          showTimeoutRef.current = 0;
7378          if (!isMouseMoving())
7379            return;
7380          store.show();
7381        }, showTimeout != null ? showTimeout : timeout);
7382      }
7383    );
7384    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
7385      ref: useMergeRefs(store.setAnchorElement, props.ref),
7386      onMouseMove
7387    });
7388    props = useFocusable(props);
7389    return props;
7390  }
7391);
7392var HovercardAnchor = NQJBHION_createComponent(
7393  (props) => {
7394    const htmlProps = useHovercardAnchor(props);
7395    return NQJBHION_createElement("a", htmlProps);
7396  }
7397);
7398if (false) {}
7399
7400
7401
7402;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js
7403
7404
7405
7406
7407
7408
7409
7410
7411// src/tooltip/tooltip-anchor.ts
7412
7413
7414
7415var globalStore = createStore({
7416  activeStore: null
7417});
7418var useTooltipAnchor = NQJBHION_createHook(
7419  (_a) => {
7420    var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
7421    (0,external_React_.useEffect)(() => {
7422      return store.sync(
7423        (state) => {
7424          if (state.mounted) {
7425            const { activeStore } = globalStore.getState();
7426            if (activeStore !== store) {
7427              activeStore == null ? void 0 : activeStore.hide();
7428            }
7429            return globalStore.setState("activeStore", store);
7430          }
7431          const id = setTimeout(() => {
7432            const { activeStore } = globalStore.getState();
7433            if (activeStore !== store)
7434              return;
7435            globalStore.setState("activeStore", null);
7436          }, state.skipTimeout);
7437          return () => clearTimeout(id);
7438        },
7439        ["mounted", "skipTimeout"]
7440      );
7441    }, [store]);
7442    const onFocusVisibleProp = props.onFocusVisible;
7443    const onFocusVisible = useEvent((event) => {
7444      onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
7445      if (event.defaultPrevented)
7446        return;
7447      store.setAnchorElement(event.currentTarget);
7448      store.show();
7449    });
7450    const onBlurProp = props.onBlur;
7451    const onBlur = useEvent((event) => {
7452      onBlurProp == null ? void 0 : onBlurProp(event);
7453      if (event.defaultPrevented)
7454        return;
7455      const { activeStore } = globalStore.getState();
7456      if (activeStore === store) {
7457        globalStore.setState("activeStore", null);
7458      }
7459    });
7460    const type = store.useState("type");
7461    const contentId = store.useState((state) => {
7462      var _a2;
7463      return (_a2 = state.contentElement) == null ? void 0 : _a2.id;
7464    });
7465    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
7466      "aria-labelledby": type === "label" ? contentId : void 0,
7467      "aria-describedby": type === "description" ? contentId : void 0
7468    }, props), {
7469      onFocusVisible,
7470      onBlur
7471    });
7472    props = useHovercardAnchor(PNRLI7OV_spreadValues({
7473      store,
7474      showOnHover: (event) => {
7475        if (isFalsyBooleanCallback(showOnHover, event))
7476          return false;
7477        const { activeStore } = globalStore.getState();
7478        if (!activeStore)
7479          return true;
7480        store.show();
7481        return false;
7482      }
7483    }, props));
7484    return props;
7485  }
7486);
7487var TooltipAnchor = NQJBHION_createComponent((props) => {
7488  const htmlProps = useTooltipAnchor(props);
7489  return NQJBHION_createElement("div", htmlProps);
7490});
7491if (false) {}
7492
7493
7494;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X7FKJQME.js
vendor: 2,458 bytes, lines 7495-7579
7495// src/hovercard/utils/polygon.ts
7496function getEventPoint(event) {
7497  return [event.clientX, event.clientY];
7498}
7499function isPointInPolygon(point, polygon) {
7500  const [x, y] = point;
7501  let inside = false;
7502  const length = polygon.length;
7503  for (let l = length, i = 0, j = l - 1; i < l; j = i++) {
7504    const [xi, yi] = polygon[i];
7505    const [xj, yj] = polygon[j];
7506    const [, vy] = polygon[j === 0 ? l - 1 : j - 1] || [0, 0];
7507    const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);
7508    if (yj < yi) {
7509      if (y >= yj && y < yi) {
7510        if (where === 0)
7511          return true;
7512        if (where > 0) {
7513          if (y === yj) {
7514            if (y > vy) {
7515              inside = !inside;
7516            }
7517          } else {
7518            inside = !inside;
7519          }
7520        }
7521      }
7522    } else if (yi < yj) {
7523      if (y > yi && y <= yj) {
7524        if (where === 0)
7525          return true;
7526        if (where < 0) {
7527          if (y === yj) {
7528            if (y < vy) {
7529              inside = !inside;
7530            }
7531          } else {
7532            inside = !inside;
7533          }
7534        }
7535      }
7536    } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) {
7537      return true;
7538    }
7539  }
7540  return inside;
7541}
7542function getEnterPointPlacement(enterPoint, rect) {
7543  const { top, right, bottom, left } = rect;
7544  const [x, y] = enterPoint;
7545  const placementX = x < left ? "left" : x > right ? "right" : null;
7546  const placementY = y < top ? "top" : y > bottom ? "bottom" : null;
7547  return [placementX, placementY];
7548}
7549function getElementPolygon(element, enterPoint) {
7550  const rect = element.getBoundingClientRect();
7551  const { top, right, bottom, left } = rect;
7552  const [x, y] = getEnterPointPlacement(enterPoint, rect);
7553  const polygon = [enterPoint];
7554  if (x) {
7555    if (y !== "top") {
7556      polygon.push([x === "left" ? left : right, top]);
7557    }
7558    polygon.push([x === "left" ? right : left, top]);
7559    polygon.push([x === "left" ? right : left, bottom]);
7560    if (y !== "bottom") {
7561      polygon.push([x === "left" ? left : right, bottom]);
7562    }
7563  } else if (y === "top") {
7564    polygon.push([left, top]);
7565    polygon.push([left, bottom]);
7566    polygon.push([right, bottom]);
7567    polygon.push([right, top]);
7568  } else {
7569    polygon.push([left, bottom]);
7570    polygon.push([left, top]);
7571    polygon.push([right, top]);
7572    polygon.push([right, bottom]);
7573  }
7574  return polygon;
7575}
7576
7577
7578
7579;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IXXFVVA2.js
7580// src/dialog/utils/is-backdrop.ts
7581function isBackdrop(element, ...ids) {
7582  if (!element)
7583    return false;
7584  const backdrop = element.getAttribute("data-backdrop");
7585  if (backdrop == null)
7586    return false;
7587  if (backdrop === "")
7588    return true;
7589  if (backdrop === "true")
7590    return true;
7591  if (!ids.length)
7592    return true;
7593  return ids.some((id) => backdrop === id);
7594}
7595
7596
7597
7598;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FW6QFGFT.js
vendor: 2,517 bytes, lines 7599-7692
7599// src/dialog/utils/orchestrate.ts
7600var cleanups = /* @__PURE__ */ new WeakMap();
7601function orchestrate(element, key, setup) {
7602  if (!cleanups.has(element)) {
7603    cleanups.set(element, /* @__PURE__ */ new Map());
7604  }
7605  const elementCleanups = cleanups.get(element);
7606  const prevCleanup = elementCleanups.get(key);
7607  if (!prevCleanup) {
7608    elementCleanups.set(key, setup());
7609    return () => {
7610      var _a;
7611      (_a = elementCleanups.get(key)) == null ? void 0 : _a();
7612      elementCleanups.delete(key);
7613    };
7614  }
7615  const cleanup = setup();
7616  const nextCleanup = () => {
7617    cleanup();
7618    prevCleanup();
7619    elementCleanups.delete(key);
7620  };
7621  elementCleanups.set(key, nextCleanup);
7622  return () => {
7623    const isCurrent = elementCleanups.get(key) === nextCleanup;
7624    if (!isCurrent)
7625      return;
7626    cleanup();
7627    elementCleanups.set(key, prevCleanup);
7628  };
7629}
7630function setAttribute(element, attr, value) {
7631  const setup = () => {
7632    const previousValue = element.getAttribute(attr);
7633    element.setAttribute(attr, value);
7634    return () => {
7635      if (previousValue == null) {
7636        element.removeAttribute(attr);
7637      } else {
7638        element.setAttribute(attr, previousValue);
7639      }
7640    };
7641  };
7642  return orchestrate(element, attr, setup);
7643}
7644function setProperty(element, property, value) {
7645  const setup = () => {
7646    const exists = property in element;
7647    const previousValue = element[property];
7648    element[property] = value;
7649    return () => {
7650      if (!exists) {
7651        delete element[property];
7652      } else {
7653        element[property] = previousValue;
7654      }
7655    };
7656  };
7657  return orchestrate(element, property, setup);
7658}
7659function assignStyle(element, style) {
7660  if (!element)
7661    return () => {
7662    };
7663  const setup = () => {
7664    const prevStyle = element.style.cssText;
7665    Object.assign(element.style, style);
7666    return () => {
7667      element.style.cssText = prevStyle;
7668    };
7669  };
7670  return orchestrate(element, "style", setup);
7671}
7672function setCSSProperty(element, property, value) {
7673  if (!element)
7674    return () => {
7675    };
7676  const setup = () => {
7677    const previousValue = element.style.getPropertyValue(property);
7678    element.style.setProperty(property, value);
7679    return () => {
7680      if (previousValue) {
7681        element.style.setProperty(property, previousValue);
7682      } else {
7683        element.style.removeProperty(property);
7684      }
7685    };
7686  };
7687  return orchestrate(element, property, setup);
7688}
7689
7690
7691
7692;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FV23EKJL.js
7693// src/dialog/utils/walk-tree-outside.ts
7694
7695var ignoreTags = ["SCRIPT", "STYLE"];
7696function isValidElement(element, ignoredElements) {
7697  if (ignoreTags.includes(element.tagName))
7698    return false;
7699  return !ignoredElements.some(
7700    (enabledElement) => enabledElement && O35LWD4W_contains(element, enabledElement)
7701  );
7702}
7703function walkTreeOutside(elements, callback, ancestorCallback) {
7704  for (let element of elements) {
7705    if (!(element == null ? void 0 : element.isConnected))
7706      continue;
7707    const hasAncestorAlready = elements.some((maybeAncestor) => {
7708      if (!maybeAncestor)
7709        return false;
7710      if (maybeAncestor === element)
7711        return false;
7712      return maybeAncestor.contains(element);
7713    });
7714    const doc = O35LWD4W_getDocument(element);
7715    while (element.parentElement && element !== doc.body) {
7716      ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement);
7717      if (!hasAncestorAlready) {
7718        for (const child of element.parentElement.children) {
7719          if (isValidElement(child, elements)) {
7720            callback(child);
7721          }
7722        }
7723      }
7724      element = element.parentElement;
7725    }
7726  }
7727}
7728
7729
7730
7731;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HCZMY53N.js
7732
7733
7734
7735
7736// src/dialog/utils/mark-tree-outside.ts
7737
7738function getPropertyName(id = "", ancestor = false) {
7739  return `__ariakit-dialog-${ancestor ? "ancestor" : "outside"}${id ? `-${id}` : ""}`;
7740}
7741function markElement(element, id = "") {
7742  return chain(
7743    setProperty(element, getPropertyName(), true),
7744    setProperty(element, getPropertyName(id), true)
7745  );
7746}
7747function markAncestor(element, id = "") {
7748  return chain(
7749    setProperty(element, getPropertyName("", true), true),
7750    setProperty(element, getPropertyName(id, true), true)
7751  );
7752}
7753function isElementMarked(element, id) {
7754  const ancestorProperty = getPropertyName(id, true);
7755  if (element[ancestorProperty])
7756    return true;
7757  const elementProperty = getPropertyName(id);
7758  do {
7759    if (element[elementProperty])
7760      return true;
7761    if (!element.parentElement)
7762      return false;
7763    element = element.parentElement;
7764  } while (true);
7765}
7766function markTreeOutside(dialogId, ...elements) {
7767  const cleanups = [];
7768  const ids = elements.map((el) => el == null ? void 0 : el.id);
7769  walkTreeOutside(
7770    elements,
7771    (element) => {
7772      if (isBackdrop(element, ...ids))
7773        return;
7774      cleanups.unshift(markElement(element, dialogId));
7775    },
7776    (ancestor) => cleanups.unshift(markAncestor(ancestor, dialogId))
7777  );
7778  const restoreAccessibilityTree = () => {
7779    cleanups.forEach((fn) => fn());
7780  };
7781  return restoreAccessibilityTree;
7782}
7783
7784
7785
7786;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4PKIGBPJ.js
7787
7788
7789// src/role/role.ts
7790var _4PKIGBPJ_useRole = NQJBHION_createHook((props) => {
7791  return props;
7792});
7793var _4PKIGBPJ_Role = NQJBHION_createComponent((props) => {
7794  return NQJBHION_createElement("div", props);
7795});
7796if (false) {}
7797
7798
7799
7800;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WHEEIXMF.js
7801
7802
7803
7804
7805// src/disclosure/disclosure-content.ts
7806
7807function afterTimeout(timeoutMs, cb) {
7808  const timeoutId = setTimeout(cb, timeoutMs);
7809  return () => clearTimeout(timeoutId);
7810}
7811function WHEEIXMF_afterPaint(cb) {
7812  let raf = requestAnimationFrame(() => {
7813    raf = requestAnimationFrame(cb);
7814  });
7815  return () => cancelAnimationFrame(raf);
7816}
7817function parseCSSTime(...times) {
7818  return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => {
7819    const currentTime = parseFloat(currentTimeString || "0s") * 1e3;
7820    if (currentTime > longestTime)
7821      return currentTime;
7822    return longestTime;
7823  }, 0);
7824}
7825function isHidden(mounted, hidden, alwaysVisible) {
7826  return !alwaysVisible && hidden !== false && (!mounted || !!hidden);
7827}
7828var useDisclosureContent = NQJBHION_createHook(
7829  (_a) => {
7830    var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
7831    const id = useId(props.id);
7832    const [transition, setTransition] = (0,external_React_.useState)(null);
7833    const open = store.useState("open");
7834    const mounted = store.useState("mounted");
7835    const animated = store.useState("animated");
7836    const contentElement = store.useState("contentElement");
7837    useSafeLayoutEffect(() => {
7838      if (!animated)
7839        return;
7840      if (!(contentElement == null ? void 0 : contentElement.isConnected)) {
7841        setTransition(null);
7842        return;
7843      }
7844      return WHEEIXMF_afterPaint(() => {
7845        setTransition(open ? "enter" : "leave");
7846      });
7847    }, [animated, contentElement, open]);
7848    useSafeLayoutEffect(() => {
7849      if (!animated)
7850        return;
7851      if (!contentElement)
7852        return;
7853      if (!transition)
7854        return;
7855      if (transition === "enter" && !open)
7856        return;
7857      if (transition === "leave" && open)
7858        return;
7859      if (typeof animated === "number") {
7860        const timeoutMs2 = animated;
7861        return afterTimeout(timeoutMs2, store.stopAnimation);
7862      }
7863      const {
7864        transitionDuration,
7865        animationDuration,
7866        transitionDelay,
7867        animationDelay
7868      } = getComputedStyle(contentElement);
7869      const delay = parseCSSTime(transitionDelay, animationDelay);
7870      const duration = parseCSSTime(transitionDuration, animationDuration);
7871      const timeoutMs = delay + duration;
7872      if (!timeoutMs)
7873        return;
7874      return afterTimeout(timeoutMs, store.stopAnimation);
7875    }, [animated, contentElement, open, transition]);
7876    const hidden = isHidden(mounted, props.hidden, alwaysVisible);
7877    const style = hidden ? PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props.style), { display: "none" }) : props.style;
7878    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
7879      id,
7880      "data-enter": transition === "enter" ? "" : void 0,
7881      "data-leave": transition === "leave" ? "" : void 0,
7882      hidden
7883    }, props), {
7884      ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
7885      style
7886    });
7887    return props;
7888  }
7889);
7890var DisclosureContent = NQJBHION_createComponent(
7891  (props) => {
7892    const htmlProps = useDisclosureContent(props);
7893    return NQJBHION_createElement("div", htmlProps);
7894  }
7895);
7896if (false) {}
7897
7898
7899
7900;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/53MSBYTF.js
7901
7902
7903
7904
7905
7906
7907
7908// src/dialog/dialog-backdrop.tsx
7909
7910
7911function DialogBackdrop({
7912  store,
7913  backdrop,
7914  backdropProps,
7915  alwaysVisible,
7916  hidden
7917}) {
7918  const ref = (0,external_React_.useRef)(null);
7919  const disclosure = useDisclosureStore({ disclosure: store });
7920  const contentElement = store.useState("contentElement");
7921  useSafeLayoutEffect(() => {
7922    const backdrop2 = ref.current;
7923    const dialog = contentElement;
7924    if (!backdrop2)
7925      return;
7926    if (!dialog)
7927      return;
7928    backdrop2.style.zIndex = getComputedStyle(dialog).zIndex;
7929  }, [contentElement]);
7930  useSafeLayoutEffect(() => {
7931    const id = contentElement == null ? void 0 : contentElement.id;
7932    if (!id)
7933      return;
7934    const backdrop2 = ref.current;
7935    if (!backdrop2)
7936      return;
7937    return markAncestor(backdrop2, id);
7938  }, [contentElement]);
7939  if (hidden != null) {
7940    backdropProps = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, backdropProps), { hidden });
7941  }
7942  const props = useDisclosureContent(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
7943    store: disclosure,
7944    role: "presentation",
7945    "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
7946    alwaysVisible
7947  }, backdropProps), {
7948    ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
7949    style: PNRLI7OV_spreadValues({
7950      position: "fixed",
7951      top: 0,
7952      right: 0,
7953      bottom: 0,
7954      left: 0
7955    }, backdropProps == null ? void 0 : backdropProps.style)
7956  }));
7957  if (!backdrop)
7958    return null;
7959  if ((0,external_React_.isValidElement)(backdrop)) {
7960    return /* @__PURE__ */ (0,jsx_runtime.jsx)(_4PKIGBPJ_Role, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { render: backdrop }));
7961  }
7962  const Component = typeof backdrop !== "boolean" ? backdrop : "div";
7963  return /* @__PURE__ */ (0,jsx_runtime.jsx)(_4PKIGBPJ_Role, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, {}) }));
7964}
7965
7966
7967
7968;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CYJJUQU3.js
7969
7970
7971
7972
7973// src/dialog/utils/disable-accessibility-tree-outside.ts
7974function hideElementFromAccessibilityTree(element) {
7975  return setAttribute(element, "aria-hidden", "true");
7976}
7977function disableAccessibilityTreeOutside(...elements) {
7978  const cleanups = [];
7979  const ids = elements.map((el) => el == null ? void 0 : el.id);
7980  walkTreeOutside(elements, (element) => {
7981    if (isBackdrop(element, ...ids))
7982      return;
7983    cleanups.unshift(hideElementFromAccessibilityTree(element));
7984  });
7985  const restoreAccessibilityTree = () => {
7986    cleanups.forEach((fn) => fn());
7987  };
7988  return restoreAccessibilityTree;
7989}
7990
7991
7992
7993;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KOVUJERF.js
7994// src/dialog/utils/supports-inert.ts
7995function supportsInert() {
7996  return "inert" in HTMLElement.prototype;
7997}
7998
7999
8000
8001;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/AR6DTI3S.js
8002
8003
8004
8005
8006
8007
8008// src/dialog/utils/disable-tree-outside.ts
8009
8010
8011
8012function disableElement(element) {
8013  if (!("style" in element))
8014    return noop;
8015  if (supportsInert()) {
8016    return setProperty(element, "inert", true);
8017  }
8018  return chain(
8019    hideElementFromAccessibilityTree(element),
8020    assignStyle(element, {
8021      pointerEvents: "none",
8022      userSelect: "none",
8023      cursor: "default"
8024    })
8025  );
8026}
8027function disableTreeOutside(...elements) {
8028  const cleanups = [];
8029  const ids = elements.map((el) => el == null ? void 0 : el.id);
8030  if (!supportsInert()) {
8031    getAllTabbable().forEach((element) => {
8032      if (elements.some((el) => el && O35LWD4W_contains(el, element)))
8033        return;
8034      cleanups.unshift(setAttribute(element, "tabindex", "-1"));
8035    });
8036  }
8037  walkTreeOutside(elements, (element) => {
8038    if (isBackdrop(element, ...ids))
8039      return;
8040    cleanups.unshift(disableElement(element));
8041  });
8042  const restoreTreeOutside = () => {
8043    cleanups.forEach((fn) => fn());
8044  };
8045  return restoreTreeOutside;
8046}
8047
8048
8049
8050;// CONCATENATED MODULE: external "ReactDOM"
8051const external_ReactDOM_namespaceObject = window["ReactDOM"];
8052var external_ReactDOM_default = /*#__PURE__*/__webpack_require__.n(external_ReactDOM_namespaceObject);
8053;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CJI67A3R.js
8054
8055
vendor: 2,801 bytes, lines 8056-8141
8056// src/dialog/utils/use-root-dialog.ts
8057
8058
8059
8060function useRootDialog({
8061  attribute,
8062  contentId,
8063  contentElement,
8064  enabled
8065}) {
8066  const [updated, retry] = useForceUpdate();
8067  const isRootDialog = (0,external_React_.useCallback)(() => {
8068    if (!enabled)
8069      return false;
8070    if (!contentElement)
8071      return false;
8072    const { body } = O35LWD4W_getDocument(contentElement);
8073    const id = body.getAttribute(attribute);
8074    return !id || id === contentId;
8075  }, [updated, enabled, contentElement, attribute, contentId]);
8076  (0,external_React_.useEffect)(() => {
8077    if (!enabled)
8078      return;
8079    if (!contentId)
8080      return;
8081    if (!contentElement)
8082      return;
8083    const { body } = O35LWD4W_getDocument(contentElement);
8084    if (isRootDialog()) {
8085      body.setAttribute(attribute, contentId);
8086      return () => body.removeAttribute(attribute);
8087    }
8088    const observer = new MutationObserver(() => (0,external_ReactDOM_namespaceObject.flushSync)(retry));
8089    observer.observe(body, { attributeFilter: [attribute] });
8090    return () => observer.disconnect();
8091  }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]);
8092  return isRootDialog;
8093}
8094
8095
8096
8097;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3LAWLNOX.js
8098
8099
8100
8101// src/dialog/utils/use-prevent-body-scroll.ts
8102
8103
8104
8105
8106function getPaddingProperty(documentElement) {
8107  const documentLeft = documentElement.getBoundingClientRect().left;
8108  const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
8109  return scrollbarX ? "paddingLeft" : "paddingRight";
8110}
8111function usePreventBodyScroll(contentElement, contentId, enabled) {
8112  const isRootDialog = useRootDialog({
8113    attribute: "data-dialog-prevent-body-scroll",
8114    contentElement,
8115    contentId,
8116    enabled
8117  });
8118  (0,external_React_.useEffect)(() => {
8119    if (!isRootDialog())
8120      return;
8121    if (!contentElement)
8122      return;
8123    const doc = O35LWD4W_getDocument(contentElement);
8124    const win = O35LWD4W_getWindow(contentElement);
8125    const { documentElement, body } = doc;
8126    const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width");
8127    const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
8128    const setScrollbarWidthProperty = () => setCSSProperty(
8129      documentElement,
8130      "--scrollbar-width",
8131      `${scrollbarWidth}px`
8132    );
8133    const paddingProperty = getPaddingProperty(documentElement);
8134    const setStyle = () => assignStyle(body, {
8135      overflow: "hidden",
8136      [paddingProperty]: `${scrollbarWidth}px`
8137    });
8138    const setIOSStyle = () => {
8139      var _a, _b;
8140      const { scrollX, scrollY, visualViewport } = win;
8141      const offsetLeft = (_a = visualViewport == null ? void 0 : visualViewport.offsetLeft) != null ? _a : 0;
8142      const offsetTop = (_b = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _b : 0;
8143      const restoreStyle = assignStyle(body, {
8144        position: "fixed",
8145        overflow: "hidden",
8146        top: `${-(scrollY - Math.floor(offsetTop))}px`,
8147        left: `${-(scrollX - Math.floor(offsetLeft))}px`,
8148        right: "0",
8149        [paddingProperty]: `${scrollbarWidth}px`
8150      });
8151      return () => {
8152        restoreStyle();
8153        if (true) {
8154          win.scrollTo(scrollX, scrollY);
8155        }
8156      };
8157    };
8158    const isIOS = UCFCIHEU_isApple() && !isMac();
8159    return chain(
8160      setScrollbarWidthProperty(),
8161      isIOS ? setIOSStyle() : setStyle()
8162    );
8163  }, [isRootDialog, contentElement]);
8164}
8165
8166
8167
8168;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OEA63YXU.js
8169
8170
8171// src/dialog/utils/use-nested-dialogs.tsx
8172
8173
8174
8175var NestedDialogsContext = (0,external_React_.createContext)({});
8176function useNestedDialogs(store) {
8177  const context = (0,external_React_.useContext)(NestedDialogsContext);
8178  const [dialogs, setDialogs] = (0,external_React_.useState)([]);
8179  const add = (0,external_React_.useCallback)(
8180    (dialog) => {
8181      var _a;
8182      setDialogs((dialogs2) => [...dialogs2, dialog]);
8183      return chain((_a = context.add) == null ? void 0 : _a.call(context, dialog), () => {
8184        setDialogs((dialogs2) => dialogs2.filter((d) => d !== dialog));
8185      });
8186    },
8187    [context]
8188  );
8189  useSafeLayoutEffect(() => {
8190    return store.sync(
8191      (state) => {
8192        var _a;
8193        if (!state.open)
8194          return;
8195        if (!state.contentElement)
8196          return;
8197        return (_a = context.add) == null ? void 0 : _a.call(context, store);
8198      },
8199      ["open", "contentElement"]
8200    );
8201  }, [store, context]);
8202  useSafeLayoutEffect(() => {
8203    var _a;
8204    return (_a = context.store) == null ? void 0 : _a.sync(
8205      (state) => {
8206        if (state.open)
8207          return;
8208        store.hide();
8209      },
8210      ["open"]
8211    );
8212  }, [context, store]);
8213  const providerValue = (0,external_React_.useMemo)(() => ({ store, add }), [store, add]);
8214  const wrapElement = (0,external_React_.useCallback)(
8215    (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }),
8216    [providerValue]
8217  );
8218  return { wrapElement, nestedDialogs: dialogs };
8219}
8220
8221
8222
8223;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7JNF6I52.js
8224// src/dialog/utils/use-previous-mouse-down-ref.ts
8225
8226
8227function usePreviousMouseDownRef(enabled) {
8228  const previousMouseDownRef = (0,external_React_.useRef)();
8229  (0,external_React_.useEffect)(() => {
8230    if (!enabled) {
8231      previousMouseDownRef.current = null;
8232      return;
8233    }
8234    const onMouseDown = (event) => {
8235      previousMouseDownRef.current = event.target;
8236    };
8237    return addGlobalEventListener("mousedown", onMouseDown, true);
8238  }, [enabled]);
8239  return previousMouseDownRef;
8240}
8241
8242
8243
8244;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4XWTU3WN.js
8245
8246
8247
8248
8249
vendor: 3,686 bytes, lines 8250-8367
8250// src/dialog/utils/use-hide-on-interact-outside.ts
8251
8252
8253
8254function isInDocument(target) {
8255  if (target.tagName === "HTML")
8256    return true;
8257  return O35LWD4W_contains(O35LWD4W_getDocument(target).body, target);
8258}
8259function isDisclosure(disclosure, target) {
8260  if (!disclosure)
8261    return false;
8262  if (O35LWD4W_contains(disclosure, target))
8263    return true;
8264  const activeId = target.getAttribute("aria-activedescendant");
8265  if (activeId) {
8266    const activeElement = O35LWD4W_getDocument(disclosure).getElementById(activeId);
8267    if (activeElement) {
8268      return O35LWD4W_contains(disclosure, activeElement);
8269    }
8270  }
8271  return false;
8272}
8273function isMouseEventOnDialog(event, dialog) {
8274  if (!("clientY" in event))
8275    return false;
8276  const rect = dialog.getBoundingClientRect();
8277  if (rect.width === 0 || rect.height === 0)
8278    return false;
8279  return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
8280}
8281function useEventOutside({
8282  store,
8283  type,
8284  listener,
8285  capture
8286}) {
8287  const callListener = useEvent(listener);
8288  const open = store.useState("open");
8289  (0,external_React_.useEffect)(() => {
8290    if (!open)
8291      return;
8292    const onEvent = (event) => {
8293      const { contentElement, disclosureElement } = store.getState();
8294      const target = event.target;
8295      if (!contentElement)
8296        return;
8297      if (!target)
8298        return;
8299      if (!isInDocument(target))
8300        return;
8301      if (O35LWD4W_contains(contentElement, target))
8302        return;
8303      if (isDisclosure(disclosureElement, target))
8304        return;
8305      if (target.hasAttribute("data-focus-trap"))
8306        return;
8307      if (isMouseEventOnDialog(event, contentElement))
8308        return;
8309      if (!isElementMarked(target, contentElement.id))
8310        return;
8311      callListener(event);
8312    };
8313    return addGlobalEventListener(type, onEvent, capture);
8314  }, [open, capture]);
8315}
8316function shouldHideOnInteractOutside(hideOnInteractOutside, event) {
8317  if (typeof hideOnInteractOutside === "function") {
8318    return hideOnInteractOutside(event);
8319  }
8320  return !!hideOnInteractOutside;
8321}
8322function useHideOnInteractOutside(store, hideOnInteractOutside) {
8323  const open = store.useState("open");
8324  const previousMouseDownRef = usePreviousMouseDownRef(open);
8325  const props = { store, capture: true };
8326  useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
8327    type: "click",
8328    listener: (event) => {
8329      const { contentElement } = store.getState();
8330      const previousMouseDown = previousMouseDownRef.current;
8331      if (!previousMouseDown)
8332        return;
8333      if (!O35LWD4W_isVisible(previousMouseDown))
8334        return;
8335      if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id))
8336        return;
8337      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
8338        return;
8339      store.hide();
8340    }
8341  }));
8342  useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
8343    type: "focusin",
8344    listener: (event) => {
8345      const { contentElement } = store.getState();
8346      if (!contentElement)
8347        return;
8348      if (event.target === O35LWD4W_getDocument(contentElement))
8349        return;
8350      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
8351        return;
8352      store.hide();
8353    }
8354  }));
8355  useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
8356    type: "contextmenu",
8357    listener: (event) => {
8358      if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
8359        return;
8360      store.hide();
8361    }
8362  }));
8363}
8364
8365
8366
8367;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/62DFK33R.js
8368// src/dialog/utils/prepend-hidden-dismiss.ts
8369
8370function prependHiddenDismiss(container, onClick) {
8371  const document = O35LWD4W_getDocument(container);
8372  const button = document.createElement("button");
8373  button.type = "button";
8374  button.tabIndex = -1;
8375  button.textContent = "Dismiss popup";
8376  Object.assign(button.style, {
8377    border: "0px",
8378    clip: "rect(0 0 0 0)",
8379    height: "1px",
8380    margin: "-1px",
8381    overflow: "hidden",
8382    padding: "0px",
8383    position: "absolute",
8384    whiteSpace: "nowrap",
8385    width: "1px"
8386  });
8387  button.addEventListener("click", onClick);
8388  container.prepend(button);
8389  const removeHiddenDismiss = () => {
8390    button.removeEventListener("click", onClick);
8391    button.remove();
8392  };
8393  return removeHiddenDismiss;
8394}
8395
8396
8397
8398;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IYNN2ZO5.js
8399
8400
8401
8402
8403
8404// src/focusable/focusable-container.tsx
8405
8406var useFocusableContainer = NQJBHION_createHook(
8407  (_a) => {
8408    var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
8409    props = useWrapElement(
8410      props,
8411      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
8412      [autoFocusOnShow]
8413    );
8414    return props;
8415  }
8416);
8417var FocusableContainer = NQJBHION_createComponent(
8418  (props) => {
8419    const htmlProps = useFocusableContainer(props);
8420    return NQJBHION_createElement("div", htmlProps);
8421  }
8422);
8423if (false) {}
8424
8425
8426
8427;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/COQHFAEN.js
8428// src/heading/heading-context.ts
8429
8430var HeadingContext = (0,external_React_.createContext)(0);
8431
8432
8433
8434;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6OMX4H3W.js
8435
8436
8437// src/heading/heading-level.tsx
8438
8439
8440function HeadingLevel({ level, children }) {
8441  const contextLevel = (0,external_React_.useContext)(HeadingContext);
8442  const nextLevel = Math.max(
8443    Math.min(level || contextLevel + 1, 6),
8444    1
8445  );
8446  return /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingContext.Provider, { value: nextLevel, children });
8447}
8448
8449
8450
8451;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FL2AU7YJ.js
8452
8453
8454
8455// src/visually-hidden/visually-hidden.ts
8456var useVisuallyHidden = NQJBHION_createHook((props) => {
8457  props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
8458    style: PNRLI7OV_spreadValues({
8459      border: 0,
8460      clip: "rect(0 0 0 0)",
8461      height: "1px",
8462      margin: "-1px",
8463      overflow: "hidden",
8464      padding: 0,
8465      position: "absolute",
8466      whiteSpace: "nowrap",
8467      width: "1px"
8468    }, props.style)
8469  });
8470  return props;
8471});
8472var VisuallyHidden = NQJBHION_createComponent(
8473  (props) => {
8474    const htmlProps = useVisuallyHidden(props);
8475    return NQJBHION_createElement("span", htmlProps);
8476  }
8477);
8478if (false) {}
8479
8480
8481
8482;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/EJ3GIT5B.js
8483
8484
8485
8486
8487// src/focus-trap/focus-trap.ts
8488var useFocusTrap = NQJBHION_createHook((props) => {
8489  props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
8490    "data-focus-trap": "",
8491    tabIndex: 0,
8492    "aria-hidden": true
8493  }, props), {
8494    style: PNRLI7OV_spreadValues({
8495      // Prevents unintended scroll jumps.
8496      position: "fixed",
8497      top: 0,
8498      left: 0
8499    }, props.style)
8500  });
8501  props = useVisuallyHidden(props);
8502  return props;
8503});
8504var FocusTrap = NQJBHION_createComponent((props) => {
8505  const htmlProps = useFocusTrap(props);
8506  return NQJBHION_createElement("span", htmlProps);
8507});
8508if (false) {}
8509
8510
8511
8512;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LDDPB3PY.js
8513// src/portal/portal-context.ts
8514
8515var PortalContext = (0,external_React_.createContext)(null);
8516
8517
8518
8519;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LL3AE4N4.js
8520
8521
8522
8523
8524
8525
8526
vendor: 3,286 bytes, lines 8527-8622
8527// src/portal/portal.tsx
8528
8529
8530
8531
8532
8533
8534function getRootElement(element) {
8535  return O35LWD4W_getDocument(element).body;
8536}
8537function getPortalElement(element, portalElement) {
8538  if (!portalElement) {
8539    return O35LWD4W_getDocument(element).createElement("div");
8540  }
8541  if (typeof portalElement === "function") {
8542    return portalElement(element);
8543  }
8544  return portalElement;
8545}
8546function getRandomId(prefix = "id") {
8547  return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).substr(2, 6)}`;
8548}
8549function queueFocus(element) {
8550  queueMicrotask(() => {
8551    element == null ? void 0 : element.focus();
8552  });
8553}
8554var usePortal = NQJBHION_createHook(
8555  (_a) => {
8556    var _b = _a, { preserveTabOrder, portalElement, portalRef, portal = true } = _b, props = __objRest(_b, ["preserveTabOrder", "portalElement", "portalRef", "portal"]);
8557    const ref = (0,external_React_.useRef)(null);
8558    const refProp = useMergeRefs(ref, props.ref);
8559    const context = (0,external_React_.useContext)(PortalContext);
8560    const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
8561    const outerBeforeRef = (0,external_React_.useRef)(null);
8562    const innerBeforeRef = (0,external_React_.useRef)(null);
8563    const innerAfterRef = (0,external_React_.useRef)(null);
8564    const outerAfterRef = (0,external_React_.useRef)(null);
8565    useSafeLayoutEffect(() => {
8566      const element = ref.current;
8567      if (!element || !portal) {
8568        setPortalNode(null);
8569        return;
8570      }
8571      const portalEl = getPortalElement(element, portalElement);
8572      if (!portalEl) {
8573        setPortalNode(null);
8574        return;
8575      }
8576      const isPortalInDocument = portalEl.isConnected;
8577      if (!isPortalInDocument) {
8578        const rootElement = context || getRootElement(element);
8579        rootElement.appendChild(portalEl);
8580      }
8581      if (!portalEl.id) {
8582        portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
8583      }
8584      setPortalNode(portalEl);
8585      CP3U4HPL_setRef(portalRef, portalEl);
8586      if (isPortalInDocument)
8587        return;
8588      return () => {
8589        portalEl.remove();
8590        CP3U4HPL_setRef(portalRef, null);
8591      };
8592    }, [portal, portalElement, context, portalRef]);
8593    (0,external_React_.useEffect)(() => {
8594      if (!portalNode)
8595        return;
8596      if (!preserveTabOrder)
8597        return;
8598      let raf = 0;
8599      const onFocus = (event) => {
8600        if (!isFocusEventOutside(event))
8601          return;
8602        const focusing = event.type === "focusin";
8603        if (focusing)
8604          return restoreFocusIn(portalNode);
8605        cancelAnimationFrame(raf);
8606        raf = requestAnimationFrame(() => {
8607          disableFocusIn(portalNode, true);
8608        });
8609      };
8610      portalNode.addEventListener("focusin", onFocus, true);
8611      portalNode.addEventListener("focusout", onFocus, true);
8612      return () => {
8613        portalNode.removeEventListener("focusin", onFocus, true);
8614        portalNode.removeEventListener("focusout", onFocus, true);
8615      };
8616    }, [portalNode, preserveTabOrder]);
8617    props = useWrapElement(
8618      props,
8619      (element) => {
8620        element = // While the portal node is not in the DOM, we need to pass the
8621        // current context to the portal context, otherwise it's going to
8622        // reset to the body element on nested portals.
8623        /* @__PURE__ */ (0,jsx_runtime.jsx)(PortalContext.Provider, { value: portalNode || context, children: element });
8624        if (!portal)
8625          return element;
8626        if (!portalNode) {
8627          return /* @__PURE__ */ (0,jsx_runtime.jsx)(
8628            "span",
8629            {
8630              ref: refProp,
8631              id: props.id,
8632              style: { position: "fixed" },
8633              hidden: true
8634            }
8635          );
8636        }
8637        element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
8638          preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
8639            FocusTrap,
8640            {
8641              ref: innerBeforeRef,
8642              className: "__focus-trap-inner-before",
8643              onFocus: (event) => {
8644                if (isFocusEventOutside(event, portalNode)) {
8645                  queueFocus(getNextTabbable());
8646                } else {
8647                  queueFocus(outerBeforeRef.current);
8648                }
8649              }
8650            }
8651          ),
8652          element,
8653          preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
8654            FocusTrap,
8655            {
8656              ref: innerAfterRef,
8657              className: "__focus-trap-inner-after",
8658              onFocus: (event) => {
8659                if (isFocusEventOutside(event, portalNode)) {
8660                  queueFocus(getPreviousTabbable());
8661                } else {
8662                  queueFocus(outerAfterRef.current);
8663                }
8664              }
8665            }
8666          )
8667        ] });
8668        if (portalNode) {
8669          element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode);
8670        }
8671        element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
8672          preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
8673            FocusTrap,
8674            {
8675              ref: outerBeforeRef,
8676              className: "__focus-trap-outer-before",
8677              onFocus: (event) => {
8678                const fromOuter = event.relatedTarget === outerAfterRef.current;
8679                if (!fromOuter && isFocusEventOutside(event, portalNode)) {
8680                  queueFocus(innerBeforeRef.current);
8681                } else {
8682                  queueFocus(getPreviousTabbable());
8683                }
8684              }
8685            }
8686          ),
8687          preserveTabOrder && // We're using position: fixed here so that the browser doesn't
8688          // add margin to the element when setting gap on a parent element.
8689          /* @__PURE__ */ (0,jsx_runtime.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
8690          element,
8691          preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
8692            FocusTrap,
8693            {
8694              ref: outerAfterRef,
8695              className: "__focus-trap-outer-after",
8696              onFocus: (event) => {
8697                if (isFocusEventOutside(event, portalNode)) {
8698                  queueFocus(innerAfterRef.current);
8699                } else {
8700                  const nextTabbable = getNextTabbable();
8701                  if (nextTabbable === innerBeforeRef.current) {
8702                    requestAnimationFrame(() => {
8703                      var _a2;
8704                      return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
8705                    });
8706                    return;
8707                  }
8708                  queueFocus(nextTabbable);
8709                }
8710              }
8711            }
8712          )
8713        ] });
8714        return element;
8715      },
8716      [portalNode, context, portal, props.id, preserveTabOrder]
8717    );
8718    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
8719      ref: refProp
8720    });
8721    return props;
8722  }
8723);
8724var Portal = NQJBHION_createComponent((props) => {
8725  const htmlProps = usePortal(props);
8726  return NQJBHION_createElement("div", htmlProps);
8727});
8728if (false) {}
8729
8730
8731
8732;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LNHZLQEK.js
8733// src/dialog/dialog-context.ts
8734
8735var DialogContext = (0,external_React_.createContext)(void 0);
8736var DialogHeadingContext = (0,external_React_.createContext)(void 0);
8737var DialogDescriptionContext = (0,external_React_.createContext)(void 0);
8738
8739
8740
8741;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/DTAO6DRL.js
8742
8743
8744
8745
8746
8747
8748
8749
8750
8751
8752
8753
8754
8755
8756
8757
8758
8759
vendor: 7,342 bytes, lines 8760-8970
8760// src/dialog/dialog.tsx
8761
8762
8763
8764
8765
8766
8767
8768var DTAO6DRL_isSafariBrowser = isSafari();
8769function isAlreadyFocusingAnotherElement(dialog) {
8770  const activeElement = O35LWD4W_getActiveElement();
8771  if (!activeElement)
8772    return false;
8773  if (dialog && O35LWD4W_contains(dialog, activeElement))
8774    return false;
8775  if (focus_isFocusable(activeElement))
8776    return true;
8777  return false;
8778}
8779function getElementFromProp(prop, focusable = false) {
8780  if (!prop)
8781    return null;
8782  const element = "current" in prop ? prop.current : prop;
8783  if (!element)
8784    return null;
8785  if (focusable)
8786    return focus_isFocusable(element) ? element : null;
8787  return element;
8788}
8789var useDialog = NQJBHION_createHook(
8790  (_a) => {
8791    var _b = _a, {
8792      store,
8793      focusable = true,
8794      modal = true,
8795      portal = !!modal,
8796      backdrop = !!modal,
8797      backdropProps,
8798      hideOnEscape = true,
8799      hideOnInteractOutside = true,
8800      getPersistentElements,
8801      preventBodyScroll = !!modal,
8802      autoFocusOnShow = true,
8803      autoFocusOnHide = true,
8804      initialFocus,
8805      finalFocus
8806    } = _b, props = __objRest(_b, [
8807      "store",
8808      "focusable",
8809      "modal",
8810      "portal",
8811      "backdrop",
8812      "backdropProps",
8813      "hideOnEscape",
8814      "hideOnInteractOutside",
8815      "getPersistentElements",
8816      "preventBodyScroll",
8817      "autoFocusOnShow",
8818      "autoFocusOnHide",
8819      "initialFocus",
8820      "finalFocus"
8821    ]);
8822    const ref = (0,external_React_.useRef)(null);
8823    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
8824    const preserveTabOrderProp = props.preserveTabOrder;
8825    const preserveTabOrder = store.useState(
8826      (state) => preserveTabOrderProp && !modal && state.mounted
8827    );
8828    const id = useId(props.id);
8829    const open = store.useState("open");
8830    const mounted = store.useState("mounted");
8831    const contentElement = store.useState("contentElement");
8832    const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
8833    usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
8834    useHideOnInteractOutside(store, hideOnInteractOutside);
8835    const { wrapElement, nestedDialogs } = useNestedDialogs(store);
8836    props = useWrapElement(props, wrapElement, [wrapElement]);
8837    useSafeLayoutEffect(() => {
8838      if (!open)
8839        return;
8840      const dialog = ref.current;
8841      const activeElement = O35LWD4W_getActiveElement(dialog, true);
8842      if (!activeElement)
8843        return;
8844      if (activeElement.tagName === "BODY")
8845        return;
8846      if (dialog && O35LWD4W_contains(dialog, activeElement))
8847        return;
8848      store.setDisclosureElement(activeElement);
8849    }, [open]);
8850    if (DTAO6DRL_isSafariBrowser) {
8851      (0,external_React_.useEffect)(() => {
8852        if (!mounted)
8853          return;
8854        const { disclosureElement } = store.getState();
8855        if (!disclosureElement)
8856          return;
8857        if (!O35LWD4W_isButton(disclosureElement))
8858          return;
8859        const onMouseDown = () => {
8860          let receivedFocus = false;
8861          const onFocus = () => {
8862            receivedFocus = true;
8863          };
8864          const options = { capture: true, once: true };
8865          disclosureElement.addEventListener("focusin", onFocus, options);
8866          queueBeforeEvent(disclosureElement, "mouseup", () => {
8867            disclosureElement.removeEventListener("focusin", onFocus, true);
8868            if (receivedFocus)
8869              return;
8870            focus_focusIfNeeded(disclosureElement);
8871          });
8872        };
8873        disclosureElement.addEventListener("mousedown", onMouseDown);
8874        return () => {
8875          disclosureElement.removeEventListener("mousedown", onMouseDown);
8876        };
8877      }, [mounted]);
8878    }
8879    const shouldDisableAccessibilityTree = modal || // Usually, we only want to disable the accessibility tree outside if the
8880    // dialog is a modal. But the Portal component can't preserve the tab
8881    // order on Safari/VoiceOver. By allowing only the dialog/portal to be
8882    // accessible, we provide a similar tab order flow. We don't need to
8883    // disable pointer events because it's just for screen readers.
8884    portal && preserveTabOrder && isSafari();
8885    (0,external_React_.useEffect)(() => {
8886      if (!mounted)
8887        return;
8888      if (!domReady)
8889        return;
8890      const dialog = ref.current;
8891      if (!dialog)
8892        return;
8893      if (!shouldDisableAccessibilityTree)
8894        return;
8895      const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
8896      if (existingDismiss)
8897        return;
8898      return prependHiddenDismiss(dialog, store.hide);
8899    }, [mounted, domReady, shouldDisableAccessibilityTree]);
8900    const getPersistentElementsProp = useEvent(getPersistentElements);
8901    useSafeLayoutEffect(() => {
8902      if (!domReady)
8903        return;
8904      if (!id)
8905        return;
8906      if (!open)
8907        return;
8908      const { disclosureElement } = store.getState();
8909      const dialog = ref.current;
8910      const persistentElements = getPersistentElementsProp() || [];
8911      const allElements = [
8912        dialog,
8913        ...persistentElements,
8914        ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
8915      ];
8916      if (!shouldDisableAccessibilityTree) {
8917        return markTreeOutside(id, disclosureElement, ...allElements);
8918      }
8919      if (modal) {
8920        return chain(
8921          markTreeOutside(id, ...allElements),
8922          disableTreeOutside(...allElements)
8923        );
8924      }
8925      return chain(
8926        markTreeOutside(id, disclosureElement, ...allElements),
8927        disableAccessibilityTreeOutside(...allElements)
8928      );
8929    }, [
8930      domReady,
8931      id,
8932      open,
8933      store,
8934      getPersistentElementsProp,
8935      nestedDialogs,
8936      shouldDisableAccessibilityTree,
8937      modal
8938    ]);
8939    const mayAutoFocusOnShow = !!autoFocusOnShow;
8940    const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
8941    const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false);
8942    (0,external_React_.useEffect)(() => {
8943      if (!open)
8944        return;
8945      if (!mayAutoFocusOnShow)
8946        return;
8947      if (!domReady)
8948        return;
8949      if (!(contentElement == null ? void 0 : contentElement.isConnected))
8950        return;
8951      const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
8952      // with the autofocus attribute. If it's an Ariakit component, the
8953      // Focusable component will consume the autoFocus prop and add the
8954      // data-autofocus attribute to the element instead.
8955      contentElement.querySelector(
8956        "[data-autofocus=true],[autofocus]"
8957      ) || // We have to fallback to the first focusable element otherwise portaled
8958      // dialogs with preserveTabOrder set to true will not receive focus
8959      // properly because the elements aren't tabbable until the dialog
8960      // receives focus.
8961      focus_getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
8962      contentElement;
8963      const isElementFocusable = focus_isFocusable(element);
8964      if (!autoFocusOnShowProp(isElementFocusable ? element : null))
8965        return;
8966      setAutoFocusEnabled(true);
8967      queueMicrotask(() => {
8968        element.focus();
8969        if (!DTAO6DRL_isSafariBrowser)
8970          return;
8971        element.scrollIntoView({ block: "nearest", inline: "nearest" });
8972      });
8973    }, [
8974      open,
8975      mayAutoFocusOnShow,
8976      domReady,
8977      contentElement,
8978      initialFocus,
8979      portal,
8980      preserveTabOrder,
8981      autoFocusOnShowProp
8982    ]);
8983    const mayAutoFocusOnHide = !!autoFocusOnHide;
8984    const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
8985    const [hasOpened, setHasOpened] = (0,external_React_.useState)(false);
8986    (0,external_React_.useEffect)(() => {
8987      if (!open)
8988        return;
8989      setHasOpened(true);
8990      return () => setHasOpened(false);
8991    }, [open]);
8992    useSafeLayoutEffect(() => {
8993      if (!hasOpened)
8994        return;
8995      if (!mayAutoFocusOnHide)
8996        return;
8997      const dialog = ref.current;
8998      const focusOnHide = (retry = true) => {
8999        if (isAlreadyFocusingAnotherElement(dialog))
9000          return;
9001        const { disclosureElement } = store.getState();
9002        let element = getElementFromProp(finalFocus) || disclosureElement;
9003        if (element == null ? void 0 : element.id) {
9004          const doc = O35LWD4W_getDocument(element);
9005          const selector = `[aria-activedescendant="${element.id}"]`;
9006          const composite = doc.querySelector(selector);
9007          if (composite) {
9008            element = composite;
9009          }
9010        }
9011        if (element && !focus_isFocusable(element)) {
9012          const maybeParentDialog = O35LWD4W_closest(element, "[data-dialog]");
9013          if (maybeParentDialog && maybeParentDialog.id) {
9014            const doc = O35LWD4W_getDocument(maybeParentDialog);
9015            const selector = `[aria-controls~="${maybeParentDialog.id}"]`;
9016            const control = doc.querySelector(selector);
9017            if (control) {
9018              element = control;
9019            }
9020          }
9021        }
9022        const isElementFocusable = element && focus_isFocusable(element);
9023        if (!isElementFocusable && retry) {
9024          requestAnimationFrame(() => focusOnHide(false));
9025          return;
9026        }
9027        if (!autoFocusOnHideProp(isElementFocusable ? element : null))
9028          return;
9029        if (!isElementFocusable)
9030          return;
9031        element == null ? void 0 : element.focus();
9032      };
9033      if (!open) {
9034        return focusOnHide();
9035      }
9036      return focusOnHide;
9037    }, [hasOpened, open, mayAutoFocusOnHide, finalFocus, autoFocusOnHideProp]);
9038    const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
9039    (0,external_React_.useEffect)(() => {
9040      if (!domReady)
9041        return;
9042      if (!mounted)
9043        return;
9044      const onKeyDown = (event) => {
9045        if (event.key !== "Escape")
9046          return;
9047        if (event.defaultPrevented)
9048          return;
9049        const dialog = ref.current;
9050        if (!dialog)
9051          return;
9052        if (isElementMarked(dialog))
9053          return;
9054        const target = event.target;
9055        if (!target)
9056          return;
9057        const { disclosureElement } = store.getState();
9058        const isValidTarget = () => {
9059          if (target.tagName === "BODY")
9060            return true;
9061          if (O35LWD4W_contains(dialog, target))
9062            return true;
9063          if (!disclosureElement)
9064            return false;
9065          if (O35LWD4W_contains(disclosureElement, target))
9066            return true;
9067          return false;
9068        };
9069        if (!isValidTarget())
9070          return;
9071        if (!hideOnEscapeProp(event))
9072          return;
9073        store.hide();
9074      };
9075      return addGlobalEventListener("keydown", onKeyDown);
9076    }, [mounted, domReady, hideOnEscapeProp]);
9077    props = useWrapElement(
9078      props,
9079      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
9080      [modal]
9081    );
9082    const hiddenProp = props.hidden;
9083    const alwaysVisible = props.alwaysVisible;
9084    props = useWrapElement(
9085      props,
9086      (element) => {
9087        if (!backdrop)
9088          return element;
9089        return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
9090          /* @__PURE__ */ (0,jsx_runtime.jsx)(
9091            DialogBackdrop,
9092            {
9093              store,
9094              backdrop,
9095              backdropProps,
9096              hidden: hiddenProp,
9097              alwaysVisible
9098            }
9099          ),
9100          element
9101        ] });
9102      },
9103      [store, backdrop, backdropProps, hiddenProp, alwaysVisible]
9104    );
9105    const [headingId, setHeadingId] = (0,external_React_.useState)();
9106    const [descriptionId, setDescriptionId] = (0,external_React_.useState)();
9107    props = useWrapElement(
9108      props,
9109      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogContext.Provider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
9110      [store]
9111    );
9112    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
9113      id,
9114      "data-dialog": "",
9115      role: "dialog",
9116      tabIndex: focusable ? -1 : void 0,
9117      "aria-labelledby": headingId,
9118      "aria-describedby": descriptionId
9119    }, props), {
9120      ref: useMergeRefs(ref, props.ref)
9121    });
9122    props = useFocusableContainer(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
9123      autoFocusOnShow: autoFocusEnabled
9124    }));
9125    props = useDisclosureContent(PNRLI7OV_spreadValues({ store }, props));
9126    props = useFocusable(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { focusable }));
9127    props = usePortal(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
9128    return props;
9129  }
9130);
9131var Dialog = NQJBHION_createComponent((props) => {
9132  const htmlProps = useDialog(props);
9133  return NQJBHION_createElement("div", htmlProps);
9134});
9135if (false) {}
9136
9137
9138
9139;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6GS36SYX.js
vendor: 5,954 bytes, lines 9140-9335
9140// src/popover/popover-context.ts
9141
9142var PopoverContext = (0,external_React_.createContext)(
9143  void 0
9144);
9145
9146
9147
9148;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
9149const floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left']));
9150const alignments = (/* unused pure expression or super */ null && (['start', 'end']));
9151const floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), [])));
9152const floating_ui_utils_min = Math.min;
9153const floating_ui_utils_max = Math.max;
9154const round = Math.round;
9155const floor = Math.floor;
9156const createCoords = v => ({
9157  x: v,
9158  y: v
9159});
9160const oppositeSideMap = {
9161  left: 'right',
9162  right: 'left',
9163  bottom: 'top',
9164  top: 'bottom'
9165};
9166const oppositeAlignmentMap = {
9167  start: 'end',
9168  end: 'start'
9169};
9170function clamp(start, value, end) {
9171  return floating_ui_utils_max(start, floating_ui_utils_min(value, end));
9172}
9173function floating_ui_utils_evaluate(value, param) {
9174  return typeof value === 'function' ? value(param) : value;
9175}
9176function floating_ui_utils_getSide(placement) {
9177  return placement.split('-')[0];
9178}
9179function floating_ui_utils_getAlignment(placement) {
9180  return placement.split('-')[1];
9181}
9182function getOppositeAxis(axis) {
9183  return axis === 'x' ? 'y' : 'x';
9184}
9185function getAxisLength(axis) {
9186  return axis === 'y' ? 'height' : 'width';
9187}
9188function floating_ui_utils_getSideAxis(placement) {
9189  return ['top', 'bottom'].includes(floating_ui_utils_getSide(placement)) ? 'y' : 'x';
9190}
9191function getAlignmentAxis(placement) {
9192  return getOppositeAxis(floating_ui_utils_getSideAxis(placement));
9193}
9194function floating_ui_utils_getAlignmentSides(placement, rects, rtl) {
9195  if (rtl === void 0) {
9196    rtl = false;
9197  }
9198  const alignment = floating_ui_utils_getAlignment(placement);
9199  const alignmentAxis = getAlignmentAxis(placement);
9200  const length = getAxisLength(alignmentAxis);
9201  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
9202  if (rects.reference[length] > rects.floating[length]) {
9203    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
9204  }
9205  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
9206}
9207function getExpandedPlacements(placement) {
9208  const oppositePlacement = getOppositePlacement(placement);
9209  return [floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)];
9210}
9211function floating_ui_utils_getOppositeAlignmentPlacement(placement) {
9212  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
9213}
9214function getSideList(side, isStart, rtl) {
9215  const lr = ['left', 'right'];
9216  const rl = ['right', 'left'];
9217  const tb = ['top', 'bottom'];
9218  const bt = ['bottom', 'top'];
9219  switch (side) {
9220    case 'top':
9221    case 'bottom':
9222      if (rtl) return isStart ? rl : lr;
9223      return isStart ? lr : rl;
9224    case 'left':
9225    case 'right':
9226      return isStart ? tb : bt;
9227    default:
9228      return [];
9229  }
9230}
9231function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
9232  const alignment = floating_ui_utils_getAlignment(placement);
9233  let list = getSideList(floating_ui_utils_getSide(placement), direction === 'start', rtl);
9234  if (alignment) {
9235    list = list.map(side => side + "-" + alignment);
9236    if (flipAlignment) {
9237      list = list.concat(list.map(floating_ui_utils_getOppositeAlignmentPlacement));
9238    }
9239  }
9240  return list;
9241}
9242function getOppositePlacement(placement) {
9243  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
9244}
9245function expandPaddingObject(padding) {
9246  return {
9247    top: 0,
9248    right: 0,
9249    bottom: 0,
9250    left: 0,
9251    ...padding
9252  };
9253}
9254function floating_ui_utils_getPaddingObject(padding) {
9255  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
9256    top: padding,
9257    right: padding,
9258    bottom: padding,
9259    left: padding
9260  };
9261}
9262function floating_ui_utils_rectToClientRect(rect) {
9263  return {
9264    ...rect,
9265    top: rect.y,
9266    left: rect.x,
9267    right: rect.x + rect.width,
9268    bottom: rect.y + rect.height
9269  };
9270}
9271
9272
9273
9274;// CONCATENATED MODULE: ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs
9275
9276
9277
9278function computeCoordsFromPlacement(_ref, placement, rtl) {
9279  let {
9280    reference,
9281    floating
9282  } = _ref;
9283  const sideAxis = floating_ui_utils_getSideAxis(placement);
9284  const alignmentAxis = getAlignmentAxis(placement);
9285  const alignLength = getAxisLength(alignmentAxis);
9286  const side = floating_ui_utils_getSide(placement);
9287  const isVertical = sideAxis === 'y';
9288  const commonX = reference.x + reference.width / 2 - floating.width / 2;
9289  const commonY = reference.y + reference.height / 2 - floating.height / 2;
9290  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
9291  let coords;
9292  switch (side) {
9293    case 'top':
9294      coords = {
9295        x: commonX,
9296        y: reference.y - floating.height
9297      };
9298      break;
9299    case 'bottom':
9300      coords = {
9301        x: commonX,
9302        y: reference.y + reference.height
9303      };
9304      break;
9305    case 'right':
9306      coords = {
9307        x: reference.x + reference.width,
9308        y: commonY
9309      };
9310      break;
9311    case 'left':
9312      coords = {
9313        x: reference.x - floating.width,
9314        y: commonY
9315      };
9316      break;
9317    default:
9318      coords = {
9319        x: reference.x,
9320        y: reference.y
9321      };
9322  }
9323  switch (floating_ui_utils_getAlignment(placement)) {
9324    case 'start':
9325      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
9326      break;
9327    case 'end':
9328      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
9329      break;
9330  }
9331  return coords;
9332}
9333
9334/**
9335 * Computes the `x` and `y` coordinates that will place the floating element
vendor: 5,244 bytes, lines 9336-9513
9336 * next to a reference element when it is given a certain positioning strategy.
9337 *
9338 * This export does not have any `platform` interface logic. You will need to
9339 * write one for the platform you are using Floating UI with.
9340 */
9341const computePosition = async (reference, floating, config) => {
9342  const {
9343    placement = 'bottom',
9344    strategy = 'absolute',
9345    middleware = [],
9346    platform
9347  } = config;
9348  const validMiddleware = middleware.filter(Boolean);
9349  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
9350  let rects = await platform.getElementRects({
9351    reference,
9352    floating,
9353    strategy
9354  });
9355  let {
9356    x,
9357    y
9358  } = computeCoordsFromPlacement(rects, placement, rtl);
9359  let statefulPlacement = placement;
9360  let middlewareData = {};
9361  let resetCount = 0;
9362  for (let i = 0; i < validMiddleware.length; i++) {
9363    const {
9364      name,
9365      fn
9366    } = validMiddleware[i];
9367    const {
9368      x: nextX,
9369      y: nextY,
9370      data,
9371      reset
9372    } = await fn({
9373      x,
9374      y,
9375      initialPlacement: placement,
9376      placement: statefulPlacement,
9377      strategy,
9378      middlewareData,
9379      rects,
9380      platform,
9381      elements: {
9382        reference,
9383        floating
9384      }
9385    });
9386    x = nextX != null ? nextX : x;
9387    y = nextY != null ? nextY : y;
9388    middlewareData = {
9389      ...middlewareData,
9390      [name]: {
9391        ...middlewareData[name],
9392        ...data
9393      }
9394    };
9395    if (reset && resetCount <= 50) {
9396      resetCount++;
9397      if (typeof reset === 'object') {
9398        if (reset.placement) {
9399          statefulPlacement = reset.placement;
9400        }
9401        if (reset.rects) {
9402          rects = reset.rects === true ? await platform.getElementRects({
9403            reference,
9404            floating,
9405            strategy
9406          }) : reset.rects;
9407        }
9408        ({
9409          x,
9410          y
9411        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
9412      }
9413      i = -1;
9414      continue;
9415    }
9416  }
9417  return {
9418    x,
9419    y,
9420    placement: statefulPlacement,
9421    strategy,
9422    middlewareData
9423  };
9424};
9425
9426/**
9427 * Resolves with an object of overflow side offsets that determine how much the
9428 * element is overflowing a given clipping boundary on each side.
9429 * - positive = overflowing the boundary by that number of pixels
9430 * - negative = how many pixels left before it will overflow
9431 * - 0 = lies flush with the boundary
9432 * @see https://floating-ui.com/docs/detectOverflow
9433 */
9434async function detectOverflow(state, options) {
9435  var _await$platform$isEle;
9436  if (options === void 0) {
9437    options = {};
9438  }
9439  const {
9440    x,
9441    y,
9442    platform,
9443    rects,
9444    elements,
9445    strategy
9446  } = state;
9447  const {
9448    boundary = 'clippingAncestors',
9449    rootBoundary = 'viewport',
9450    elementContext = 'floating',
9451    altBoundary = false,
9452    padding = 0
9453  } = floating_ui_utils_evaluate(options, state);
9454  const paddingObject = floating_ui_utils_getPaddingObject(padding);
9455  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
9456  const element = elements[altBoundary ? altContext : elementContext];
9457  const clippingClientRect = floating_ui_utils_rectToClientRect(await platform.getClippingRect({
9458    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
9459    boundary,
9460    rootBoundary,
9461    strategy
9462  }));
9463  const rect = elementContext === 'floating' ? {
9464    ...rects.floating,
9465    x,
9466    y
9467  } : rects.reference;
9468  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
9469  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
9470    x: 1,
9471    y: 1
9472  } : {
9473    x: 1,
9474    y: 1
9475  };
9476  const elementClientRect = floating_ui_utils_rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
9477    rect,
9478    offsetParent,
9479    strategy
9480  }) : rect);
9481  return {
9482    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
9483    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
9484    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
9485    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
9486  };
9487}
9488
9489/**
9490 * Provides data to position an inner element of the floating element so that it
9491 * appears centered to the reference element.
9492 * @see https://floating-ui.com/docs/arrow
9493 */
9494const arrow = options => ({
9495  name: 'arrow',
9496  options,
9497  async fn(state) {
9498    const {
9499      x,
9500      y,
9501      placement,
9502      rects,
9503      platform,
9504      elements
9505    } = state;
9506    // Since `element` is required, we don't Partial<> the type.
9507    const {
9508      element,
9509      padding = 0
9510    } = floating_ui_utils_evaluate(options, state) || {};
9511    if (element == null) {
9512      return {};
9513    }
vendor: 28,475 bytes, lines 9514-10304
9514    const paddingObject = floating_ui_utils_getPaddingObject(padding);
9515    const coords = {
9516      x,
9517      y
9518    };
9519    const axis = getAlignmentAxis(placement);
9520    const length = getAxisLength(axis);
9521    const arrowDimensions = await platform.getDimensions(element);
9522    const isYAxis = axis === 'y';
9523    const minProp = isYAxis ? 'top' : 'left';
9524    const maxProp = isYAxis ? 'bottom' : 'right';
9525    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
9526    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
9527    const startDiff = coords[axis] - rects.reference[axis];
9528    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
9529    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
9530
9531    // DOM platform can return `window` as the `offsetParent`.
9532    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
9533      clientSize = elements.floating[clientProp] || rects.floating[length];
9534    }
9535    const centerToReference = endDiff / 2 - startDiff / 2;
9536
9537    // If the padding is large enough that it causes the arrow to no longer be
9538    // centered, modify the padding so that it is centered.
9539    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
9540    const minPadding = floating_ui_utils_min(paddingObject[minProp], largestPossiblePadding);
9541    const maxPadding = floating_ui_utils_min(paddingObject[maxProp], largestPossiblePadding);
9542
9543    // Make sure the arrow doesn't overflow the floating element if the center
9544    // point is outside the floating element's bounds.
9545    const min$1 = minPadding;
9546    const max = clientSize - arrowDimensions[length] - maxPadding;
9547    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
9548    const offset = clamp(min$1, center, max);
9549
9550    // If the reference is small enough that the arrow's padding causes it to
9551    // to point to nothing for an aligned placement, adjust the offset of the
9552    // floating element itself. This stops `shift()` from taking action, but can
9553    // be worked around by calling it again after the `arrow()` if desired.
9554    const shouldAddOffset = floating_ui_utils_getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
9555    const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
9556    return {
9557      [axis]: coords[axis] - alignmentOffset,
9558      data: {
9559        [axis]: offset,
9560        centerOffset: center - offset + alignmentOffset
9561      }
9562    };
9563  }
9564});
9565
9566function getPlacementList(alignment, autoAlignment, allowedPlacements) {
9567  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
9568  return allowedPlacementsSortedByAlignment.filter(placement => {
9569    if (alignment) {
9570      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
9571    }
9572    return true;
9573  });
9574}
9575/**
9576 * Optimizes the visibility of the floating element by choosing the placement
9577 * that has the most space available automatically, without needing to specify a
9578 * preferred placement. Alternative to `flip`.
9579 * @see https://floating-ui.com/docs/autoPlacement
9580 */
9581const autoPlacement = function (options) {
9582  if (options === void 0) {
9583    options = {};
9584  }
9585  return {
9586    name: 'autoPlacement',
9587    options,
9588    async fn(state) {
9589      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
9590      const {
9591        rects,
9592        middlewareData,
9593        placement,
9594        platform,
9595        elements
9596      } = state;
9597      const {
9598        crossAxis = false,
9599        alignment,
9600        allowedPlacements = placements,
9601        autoAlignment = true,
9602        ...detectOverflowOptions
9603      } = evaluate(options, state);
9604      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
9605      const overflow = await detectOverflow(state, detectOverflowOptions);
9606      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
9607      const currentPlacement = placements$1[currentIndex];
9608      if (currentPlacement == null) {
9609        return {};
9610      }
9611      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
9612
9613      // Make `computeCoords` start from the right place.
9614      if (placement !== currentPlacement) {
9615        return {
9616          reset: {
9617            placement: placements$1[0]
9618          }
9619        };
9620      }
9621      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
9622      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
9623        placement: currentPlacement,
9624        overflows: currentOverflows
9625      }];
9626      const nextPlacement = placements$1[currentIndex + 1];
9627
9628      // There are more placements to check.
9629      if (nextPlacement) {
9630        return {
9631          data: {
9632            index: currentIndex + 1,
9633            overflows: allOverflows
9634          },
9635          reset: {
9636            placement: nextPlacement
9637          }
9638        };
9639      }
9640      const placementsSortedByMostSpace = allOverflows.map(d => {
9641        const alignment = getAlignment(d.placement);
9642        return [d.placement, alignment && crossAxis ?
9643        // Check along the mainAxis and main crossAxis side.
9644        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
9645        // Check only the mainAxis.
9646        d.overflows[0], d.overflows];
9647      }).sort((a, b) => a[1] - b[1]);
9648      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
9649      // Aligned placements should not check their opposite crossAxis
9650      // side.
9651      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
9652      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
9653      if (resetPlacement !== placement) {
9654        return {
9655          data: {
9656            index: currentIndex + 1,
9657            overflows: allOverflows
9658          },
9659          reset: {
9660            placement: resetPlacement
9661          }
9662        };
9663      }
9664      return {};
9665    }
9666  };
9667};
9668
9669/**
9670 * Optimizes the visibility of the floating element by flipping the `placement`
9671 * in order to keep it in view when the preferred placement(s) will overflow the
9672 * clipping boundary. Alternative to `autoPlacement`.
9673 * @see https://floating-ui.com/docs/flip
9674 */
9675const floating_ui_core_flip = function (options) {
9676  if (options === void 0) {
9677    options = {};
9678  }
9679  return {
9680    name: 'flip',
9681    options,
9682    async fn(state) {
9683      var _middlewareData$flip;
9684      const {
9685        placement,
9686        middlewareData,
9687        rects,
9688        initialPlacement,
9689        platform,
9690        elements
9691      } = state;
9692      const {
9693        mainAxis: checkMainAxis = true,
9694        crossAxis: checkCrossAxis = true,
9695        fallbackPlacements: specifiedFallbackPlacements,
9696        fallbackStrategy = 'bestFit',
9697        fallbackAxisSideDirection = 'none',
9698        flipAlignment = true,
9699        ...detectOverflowOptions
9700      } = floating_ui_utils_evaluate(options, state);
9701      const side = floating_ui_utils_getSide(placement);
9702      const isBasePlacement = floating_ui_utils_getSide(initialPlacement) === initialPlacement;
9703      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
9704      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
9705      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
9706        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
9707      }
9708      const placements = [initialPlacement, ...fallbackPlacements];
9709      const overflow = await detectOverflow(state, detectOverflowOptions);
9710      const overflows = [];
9711      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
9712      if (checkMainAxis) {
9713        overflows.push(overflow[side]);
9714      }
9715      if (checkCrossAxis) {
9716        const sides = floating_ui_utils_getAlignmentSides(placement, rects, rtl);
9717        overflows.push(overflow[sides[0]], overflow[sides[1]]);
9718      }
9719      overflowsData = [...overflowsData, {
9720        placement,
9721        overflows
9722      }];
9723
9724      // One or more sides is overflowing.
9725      if (!overflows.every(side => side <= 0)) {
9726        var _middlewareData$flip2, _overflowsData$filter;
9727        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
9728        const nextPlacement = placements[nextIndex];
9729        if (nextPlacement) {
9730          // Try next placement and re-run the lifecycle.
9731          return {
9732            data: {
9733              index: nextIndex,
9734              overflows: overflowsData
9735            },
9736            reset: {
9737              placement: nextPlacement
9738            }
9739          };
9740        }
9741
9742        // First, find the candidates that fit on the mainAxis side of overflow,
9743        // then find the placement that fits the best on the main crossAxis side.
9744        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
9745
9746        // Otherwise fallback.
9747        if (!resetPlacement) {
9748          switch (fallbackStrategy) {
9749            case 'bestFit':
9750              {
9751                var _overflowsData$map$so;
9752                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
9753                if (placement) {
9754                  resetPlacement = placement;
9755                }
9756                break;
9757              }
9758            case 'initialPlacement':
9759              resetPlacement = initialPlacement;
9760              break;
9761          }
9762        }
9763        if (placement !== resetPlacement) {
9764          return {
9765            reset: {
9766              placement: resetPlacement
9767            }
9768          };
9769        }
9770      }
9771      return {};
9772    }
9773  };
9774};
9775
9776function getSideOffsets(overflow, rect) {
9777  return {
9778    top: overflow.top - rect.height,
9779    right: overflow.right - rect.width,
9780    bottom: overflow.bottom - rect.height,
9781    left: overflow.left - rect.width
9782  };
9783}
9784function isAnySideFullyClipped(overflow) {
9785  return sides.some(side => overflow[side] >= 0);
9786}
9787/**
9788 * Provides data to hide the floating element in applicable situations, such as
9789 * when it is not in the same clipping context as the reference element.
9790 * @see https://floating-ui.com/docs/hide
9791 */
9792const hide = function (options) {
9793  if (options === void 0) {
9794    options = {};
9795  }
9796  return {
9797    name: 'hide',
9798    options,
9799    async fn(state) {
9800      const {
9801        rects
9802      } = state;
9803      const {
9804        strategy = 'referenceHidden',
9805        ...detectOverflowOptions
9806      } = evaluate(options, state);
9807      switch (strategy) {
9808        case 'referenceHidden':
9809          {
9810            const overflow = await detectOverflow(state, {
9811              ...detectOverflowOptions,
9812              elementContext: 'reference'
9813            });
9814            const offsets = getSideOffsets(overflow, rects.reference);
9815            return {
9816              data: {
9817                referenceHiddenOffsets: offsets,
9818                referenceHidden: isAnySideFullyClipped(offsets)
9819              }
9820            };
9821          }
9822        case 'escaped':
9823          {
9824            const overflow = await detectOverflow(state, {
9825              ...detectOverflowOptions,
9826              altBoundary: true
9827            });
9828            const offsets = getSideOffsets(overflow, rects.floating);
9829            return {
9830              data: {
9831                escapedOffsets: offsets,
9832                escaped: isAnySideFullyClipped(offsets)
9833              }
9834            };
9835          }
9836        default:
9837          {
9838            return {};
9839          }
9840      }
9841    }
9842  };
9843};
9844
9845function getBoundingRect(rects) {
9846  const minX = min(...rects.map(rect => rect.left));
9847  const minY = min(...rects.map(rect => rect.top));
9848  const maxX = max(...rects.map(rect => rect.right));
9849  const maxY = max(...rects.map(rect => rect.bottom));
9850  return {
9851    x: minX,
9852    y: minY,
9853    width: maxX - minX,
9854    height: maxY - minY
9855  };
9856}
9857function getRectsByLine(rects) {
9858  const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
9859  const groups = [];
9860  let prevRect = null;
9861  for (let i = 0; i < sortedRects.length; i++) {
9862    const rect = sortedRects[i];
9863    if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
9864      groups.push([rect]);
9865    } else {
9866      groups[groups.length - 1].push(rect);
9867    }
9868    prevRect = rect;
9869  }
9870  return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
9871}
9872/**
9873 * Provides improved positioning for inline reference elements that can span
9874 * over multiple lines, such as hyperlinks or range selections.
9875 * @see https://floating-ui.com/docs/inline
9876 */
9877const inline = function (options) {
9878  if (options === void 0) {
9879    options = {};
9880  }
9881  return {
9882    name: 'inline',
9883    options,
9884    async fn(state) {
9885      const {
9886        placement,
9887        elements,
9888        rects,
9889        platform,
9890        strategy
9891      } = state;
9892      // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
9893      // ClientRect's bounds, despite the event listener being triggered. A
9894      // padding of 2 seems to handle this issue.
9895      const {
9896        padding = 2,
9897        x,
9898        y
9899      } = evaluate(options, state);
9900      const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
9901      const clientRects = getRectsByLine(nativeClientRects);
9902      const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
9903      const paddingObject = getPaddingObject(padding);
9904      function getBoundingClientRect() {
9905        // There are two rects and they are disjoined.
9906        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
9907          // Find the first rect in which the point is fully inside.
9908          return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
9909        }
9910
9911        // There are 2 or more connected rects.
9912        if (clientRects.length >= 2) {
9913          if (getSideAxis(placement) === 'y') {
9914            const firstRect = clientRects[0];
9915            const lastRect = clientRects[clientRects.length - 1];
9916            const isTop = getSide(placement) === 'top';
9917            const top = firstRect.top;
9918            const bottom = lastRect.bottom;
9919            const left = isTop ? firstRect.left : lastRect.left;
9920            const right = isTop ? firstRect.right : lastRect.right;
9921            const width = right - left;
9922            const height = bottom - top;
9923            return {
9924              top,
9925              bottom,
9926              left,
9927              right,
9928              width,
9929              height,
9930              x: left,
9931              y: top
9932            };
9933          }
9934          const isLeftSide = getSide(placement) === 'left';
9935          const maxRight = max(...clientRects.map(rect => rect.right));
9936          const minLeft = min(...clientRects.map(rect => rect.left));
9937          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
9938          const top = measureRects[0].top;
9939          const bottom = measureRects[measureRects.length - 1].bottom;
9940          const left = minLeft;
9941          const right = maxRight;
9942          const width = right - left;
9943          const height = bottom - top;
9944          return {
9945            top,
9946            bottom,
9947            left,
9948            right,
9949            width,
9950            height,
9951            x: left,
9952            y: top
9953          };
9954        }
9955        return fallback;
9956      }
9957      const resetRects = await platform.getElementRects({
9958        reference: {
9959          getBoundingClientRect
9960        },
9961        floating: elements.floating,
9962        strategy
9963      });
9964      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
9965        return {
9966          reset: {
9967            rects: resetRects
9968          }
9969        };
9970      }
9971      return {};
9972    }
9973  };
9974};
9975
9976// For type backwards-compatibility, the `OffsetOptions` type was also
9977// Derivable.
9978async function convertValueToCoords(state, options) {
9979  const {
9980    placement,
9981    platform,
9982    elements
9983  } = state;
9984  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
9985  const side = floating_ui_utils_getSide(placement);
9986  const alignment = floating_ui_utils_getAlignment(placement);
9987  const isVertical = floating_ui_utils_getSideAxis(placement) === 'y';
9988  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
9989  const crossAxisMulti = rtl && isVertical ? -1 : 1;
9990  const rawValue = floating_ui_utils_evaluate(options, state);
9991
9992  // eslint-disable-next-line prefer-const
9993  let {
9994    mainAxis,
9995    crossAxis,
9996    alignmentAxis
9997  } = typeof rawValue === 'number' ? {
9998    mainAxis: rawValue,
9999    crossAxis: 0,
10000    alignmentAxis: null
10001  } : {
10002    mainAxis: 0,
10003    crossAxis: 0,
10004    alignmentAxis: null,
10005    ...rawValue
10006  };
10007  if (alignment && typeof alignmentAxis === 'number') {
10008    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
10009  }
10010  return isVertical ? {
10011    x: crossAxis * crossAxisMulti,
10012    y: mainAxis * mainAxisMulti
10013  } : {
10014    x: mainAxis * mainAxisMulti,
10015    y: crossAxis * crossAxisMulti
10016  };
10017}
10018
10019/**
10020 * Modifies the placement by translating the floating element along the
10021 * specified axes.
10022 * A number (shorthand for `mainAxis` or distance), or an axes configuration
10023 * object may be passed.
10024 * @see https://floating-ui.com/docs/offset
10025 */
10026const offset = function (options) {
10027  if (options === void 0) {
10028    options = 0;
10029  }
10030  return {
10031    name: 'offset',
10032    options,
10033    async fn(state) {
10034      const {
10035        x,
10036        y
10037      } = state;
10038      const diffCoords = await convertValueToCoords(state, options);
10039      return {
10040        x: x + diffCoords.x,
10041        y: y + diffCoords.y,
10042        data: diffCoords
10043      };
10044    }
10045  };
10046};
10047
10048/**
10049 * Optimizes the visibility of the floating element by shifting it in order to
10050 * keep it in view when it will overflow the clipping boundary.
10051 * @see https://floating-ui.com/docs/shift
10052 */
10053const floating_ui_core_shift = function (options) {
10054  if (options === void 0) {
10055    options = {};
10056  }
10057  return {
10058    name: 'shift',
10059    options,
10060    async fn(state) {
10061      const {
10062        x,
10063        y,
10064        placement
10065      } = state;
10066      const {
10067        mainAxis: checkMainAxis = true,
10068        crossAxis: checkCrossAxis = false,
10069        limiter = {
10070          fn: _ref => {
10071            let {
10072              x,
10073              y
10074            } = _ref;
10075            return {
10076              x,
10077              y
10078            };
10079          }
10080        },
10081        ...detectOverflowOptions
10082      } = floating_ui_utils_evaluate(options, state);
10083      const coords = {
10084        x,
10085        y
10086      };
10087      const overflow = await detectOverflow(state, detectOverflowOptions);
10088      const crossAxis = floating_ui_utils_getSideAxis(floating_ui_utils_getSide(placement));
10089      const mainAxis = getOppositeAxis(crossAxis);
10090      let mainAxisCoord = coords[mainAxis];
10091      let crossAxisCoord = coords[crossAxis];
10092      if (checkMainAxis) {
10093        const minSide = mainAxis === 'y' ? 'top' : 'left';
10094        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
10095        const min = mainAxisCoord + overflow[minSide];
10096        const max = mainAxisCoord - overflow[maxSide];
10097        mainAxisCoord = clamp(min, mainAxisCoord, max);
10098      }
10099      if (checkCrossAxis) {
10100        const minSide = crossAxis === 'y' ? 'top' : 'left';
10101        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
10102        const min = crossAxisCoord + overflow[minSide];
10103        const max = crossAxisCoord - overflow[maxSide];
10104        crossAxisCoord = clamp(min, crossAxisCoord, max);
10105      }
10106      const limitedCoords = limiter.fn({
10107        ...state,
10108        [mainAxis]: mainAxisCoord,
10109        [crossAxis]: crossAxisCoord
10110      });
10111      return {
10112        ...limitedCoords,
10113        data: {
10114          x: limitedCoords.x - x,
10115          y: limitedCoords.y - y
10116        }
10117      };
10118    }
10119  };
10120};
10121/**
10122 * Built-in `limiter` that will stop `shift()` at a certain point.
10123 */
10124const limitShift = function (options) {
10125  if (options === void 0) {
10126    options = {};
10127  }
10128  return {
10129    options,
10130    fn(state) {
10131      const {
10132        x,
10133        y,
10134        placement,
10135        rects,
10136        middlewareData
10137      } = state;
10138      const {
10139        offset = 0,
10140        mainAxis: checkMainAxis = true,
10141        crossAxis: checkCrossAxis = true
10142      } = floating_ui_utils_evaluate(options, state);
10143      const coords = {
10144        x,
10145        y
10146      };
10147      const crossAxis = floating_ui_utils_getSideAxis(placement);
10148      const mainAxis = getOppositeAxis(crossAxis);
10149      let mainAxisCoord = coords[mainAxis];
10150      let crossAxisCoord = coords[crossAxis];
10151      const rawOffset = floating_ui_utils_evaluate(offset, state);
10152      const computedOffset = typeof rawOffset === 'number' ? {
10153        mainAxis: rawOffset,
10154        crossAxis: 0
10155      } : {
10156        mainAxis: 0,
10157        crossAxis: 0,
10158        ...rawOffset
10159      };
10160      if (checkMainAxis) {
10161        const len = mainAxis === 'y' ? 'height' : 'width';
10162        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
10163        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
10164        if (mainAxisCoord < limitMin) {
10165          mainAxisCoord = limitMin;
10166        } else if (mainAxisCoord > limitMax) {
10167          mainAxisCoord = limitMax;
10168        }
10169      }
10170      if (checkCrossAxis) {
10171        var _middlewareData$offse, _middlewareData$offse2;
10172        const len = mainAxis === 'y' ? 'width' : 'height';
10173        const isOriginSide = ['top', 'left'].includes(floating_ui_utils_getSide(placement));
10174        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
10175        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
10176        if (crossAxisCoord < limitMin) {
10177          crossAxisCoord = limitMin;
10178        } else if (crossAxisCoord > limitMax) {
10179          crossAxisCoord = limitMax;
10180        }
10181      }
10182      return {
10183        [mainAxis]: mainAxisCoord,
10184        [crossAxis]: crossAxisCoord
10185      };
10186    }
10187  };
10188};
10189
10190/**
10191 * Provides data that allows you to change the size of the floating element —
10192 * for instance, prevent it from overflowing the clipping boundary or match the
10193 * width of the reference element.
10194 * @see https://floating-ui.com/docs/size
10195 */
10196const size = function (options) {
10197  if (options === void 0) {
10198    options = {};
10199  }
10200  return {
10201    name: 'size',
10202    options,
10203    async fn(state) {
10204      const {
10205        placement,
10206        rects,
10207        platform,
10208        elements
10209      } = state;
10210      const {
10211        apply = () => {},
10212        ...detectOverflowOptions
10213      } = floating_ui_utils_evaluate(options, state);
10214      const overflow = await detectOverflow(state, detectOverflowOptions);
10215      const side = floating_ui_utils_getSide(placement);
10216      const alignment = floating_ui_utils_getAlignment(placement);
10217      const isYAxis = floating_ui_utils_getSideAxis(placement) === 'y';
10218      const {
10219        width,
10220        height
10221      } = rects.floating;
10222      let heightSide;
10223      let widthSide;
10224      if (side === 'top' || side === 'bottom') {
10225        heightSide = side;
10226        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
10227      } else {
10228        widthSide = side;
10229        heightSide = alignment === 'end' ? 'top' : 'bottom';
10230      }
10231      const overflowAvailableHeight = height - overflow[heightSide];
10232      const overflowAvailableWidth = width - overflow[widthSide];
10233      const noShift = !state.middlewareData.shift;
10234      let availableHeight = overflowAvailableHeight;
10235      let availableWidth = overflowAvailableWidth;
10236      if (isYAxis) {
10237        const maximumClippingWidth = width - overflow.left - overflow.right;
10238        availableWidth = alignment || noShift ? floating_ui_utils_min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
10239      } else {
10240        const maximumClippingHeight = height - overflow.top - overflow.bottom;
10241        availableHeight = alignment || noShift ? floating_ui_utils_min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
10242      }
10243      if (noShift && !alignment) {
10244        const xMin = floating_ui_utils_max(overflow.left, 0);
10245        const xMax = floating_ui_utils_max(overflow.right, 0);
10246        const yMin = floating_ui_utils_max(overflow.top, 0);
10247        const yMax = floating_ui_utils_max(overflow.bottom, 0);
10248        if (isYAxis) {
10249          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : floating_ui_utils_max(overflow.left, overflow.right));
10250        } else {
10251          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : floating_ui_utils_max(overflow.top, overflow.bottom));
10252        }
10253      }
10254      await apply({
10255        ...state,
10256        availableWidth,
10257        availableHeight
10258      });
10259      const nextDimensions = await platform.getDimensions(elements.floating);
10260      if (width !== nextDimensions.width || height !== nextDimensions.height) {
10261        return {
10262          reset: {
10263            rects: true
10264          }
10265        };
10266      }
10267      return {};
10268    }
10269  };
10270};
10271
10272
10273
10274;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.mjs
10275function getNodeName(node) {
10276  if (isNode(node)) {
10277    return (node.nodeName || '').toLowerCase();
10278  }
10279  // Mocked nodes in testing environments may not be instances of Node. By
10280  // returning `#document` an infinite loop won't occur.
10281  // https://github.com/floating-ui/floating-ui/issues/2317
10282  return '#document';
10283}
10284function floating_ui_utils_dom_getWindow(node) {
10285  var _node$ownerDocument;
10286  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
10287}
10288function getDocumentElement(node) {
10289  var _ref;
10290  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
10291}
10292function isNode(value) {
10293  return value instanceof Node || value instanceof floating_ui_utils_dom_getWindow(value).Node;
10294}
10295function isElement(value) {
10296  return value instanceof Element || value instanceof floating_ui_utils_dom_getWindow(value).Element;
10297}
10298function isHTMLElement(value) {
10299  return value instanceof HTMLElement || value instanceof floating_ui_utils_dom_getWindow(value).HTMLElement;
10300}
10301function isShadowRoot(value) {
10302  // Browsers without `ShadowRoot` support.
10303  if (typeof ShadowRoot === 'undefined') {
10304    return false;
vendor: 4,745 bytes, lines 10305-10443
10305  }
10306  return value instanceof ShadowRoot || value instanceof floating_ui_utils_dom_getWindow(value).ShadowRoot;
10307}
10308function isOverflowElement(element) {
10309  const {
10310    overflow,
10311    overflowX,
10312    overflowY,
10313    display
10314  } = floating_ui_utils_dom_getComputedStyle(element);
10315  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
10316}
10317function isTableElement(element) {
10318  return ['table', 'td', 'th'].includes(getNodeName(element));
10319}
10320function isContainingBlock(element) {
10321  const webkit = isWebKit();
10322  const css = floating_ui_utils_dom_getComputedStyle(element);
10323
10324  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
10325  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
10326}
10327function getContainingBlock(element) {
10328  let currentNode = getParentNode(element);
10329  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
10330    if (isContainingBlock(currentNode)) {
10331      return currentNode;
10332    } else {
10333      currentNode = getParentNode(currentNode);
10334    }
10335  }
10336  return null;
10337}
10338function isWebKit() {
10339  if (typeof CSS === 'undefined' || !CSS.supports) return false;
10340  return CSS.supports('-webkit-backdrop-filter', 'none');
10341}
10342function isLastTraversableNode(node) {
10343  return ['html', 'body', '#document'].includes(getNodeName(node));
10344}
10345function floating_ui_utils_dom_getComputedStyle(element) {
10346  return floating_ui_utils_dom_getWindow(element).getComputedStyle(element);
10347}
10348function getNodeScroll(element) {
10349  if (isElement(element)) {
10350    return {
10351      scrollLeft: element.scrollLeft,
10352      scrollTop: element.scrollTop
10353    };
10354  }
10355  return {
10356    scrollLeft: element.pageXOffset,
10357    scrollTop: element.pageYOffset
10358  };
10359}
10360function getParentNode(node) {
10361  if (getNodeName(node) === 'html') {
10362    return node;
10363  }
10364  const result =
10365  // Step into the shadow DOM of the parent of a slotted node.
10366  node.assignedSlot ||
10367  // DOM Element detected.
10368  node.parentNode ||
10369  // ShadowRoot detected.
10370  isShadowRoot(node) && node.host ||
10371  // Fallback.
10372  getDocumentElement(node);
10373  return isShadowRoot(result) ? result.host : result;
10374}
10375function getNearestOverflowAncestor(node) {
10376  const parentNode = getParentNode(node);
10377  if (isLastTraversableNode(parentNode)) {
10378    return node.ownerDocument ? node.ownerDocument.body : node.body;
10379  }
10380  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
10381    return parentNode;
10382  }
10383  return getNearestOverflowAncestor(parentNode);
10384}
10385function getOverflowAncestors(node, list) {
10386  var _node$ownerDocument2;
10387  if (list === void 0) {
10388    list = [];
10389  }
10390  const scrollableAncestor = getNearestOverflowAncestor(node);
10391  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
10392  const win = floating_ui_utils_dom_getWindow(scrollableAncestor);
10393  if (isBody) {
10394    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement ? getOverflowAncestors(win.frameElement) : []);
10395  }
10396  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
10397}
10398
10399
10400
10401;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
10402
10403
10404
10405
10406
10407
10408function getCssDimensions(element) {
10409  const css = floating_ui_utils_dom_getComputedStyle(element);
10410  // In testing environments, the `width` and `height` properties are empty
10411  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
10412  let width = parseFloat(css.width) || 0;
10413  let height = parseFloat(css.height) || 0;
10414  const hasOffset = isHTMLElement(element);
10415  const offsetWidth = hasOffset ? element.offsetWidth : width;
10416  const offsetHeight = hasOffset ? element.offsetHeight : height;
10417  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
10418  if (shouldFallback) {
10419    width = offsetWidth;
10420    height = offsetHeight;
10421  }
10422  return {
10423    width,
10424    height,
10425    $: shouldFallback
10426  };
10427}
10428
10429function unwrapElement(element) {
10430  return !isElement(element) ? element.contextElement : element;
10431}
10432
10433function getScale(element) {
10434  const domElement = unwrapElement(element);
10435  if (!isHTMLElement(domElement)) {
10436    return createCoords(1);
10437  }
10438  const rect = domElement.getBoundingClientRect();
10439  const {
10440    width,
10441    height,
10442    $
10443  }
vendor: 2,002 bytes, lines 10443-10508
10443 = getCssDimensions(domElement);
10444  let x = ($ ? round(rect.width) : rect.width) / width;
10445  let y = ($ ? round(rect.height) : rect.height) / height;
10446
10447  // 0, NaN, or Infinity should always fallback to 1.
10448
10449  if (!x || !Number.isFinite(x)) {
10450    x = 1;
10451  }
10452  if (!y || !Number.isFinite(y)) {
10453    y = 1;
10454  }
10455  return {
10456    x,
10457    y
10458  };
10459}
10460
10461const noOffsets = /*#__PURE__*/createCoords(0);
10462function getVisualOffsets(element) {
10463  const win = floating_ui_utils_dom_getWindow(element);
10464  if (!isWebKit() || !win.visualViewport) {
10465    return noOffsets;
10466  }
10467  return {
10468    x: win.visualViewport.offsetLeft,
10469    y: win.visualViewport.offsetTop
10470  };
10471}
10472function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
10473  if (isFixed === void 0) {
10474    isFixed = false;
10475  }
10476  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== floating_ui_utils_dom_getWindow(element)) {
10477    return false;
10478  }
10479  return isFixed;
10480}
10481
10482function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
10483  if (includeScale === void 0) {
10484    includeScale = false;
10485  }
10486  if (isFixedStrategy === void 0) {
10487    isFixedStrategy = false;
10488  }
10489  const clientRect = element.getBoundingClientRect();
10490  const domElement = unwrapElement(element);
10491  let scale = createCoords(1);
10492  if (includeScale) {
10493    if (offsetParent) {
10494      if (isElement(offsetParent)) {
10495        scale = getScale(offsetParent);
10496      }
10497    } else {
10498      scale = getScale(element);
10499    }
10500  }
10501  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
10502  let x = (clientRect.left + visualOffsets.x) / scale.x;
10503  let y = (clientRect.top + visualOffsets.y) / scale.y;
10504  let width = clientRect.width / scale.x;
10505  let height = clientRect.height / scale.y;
10506  if (domElement) {
10507    const win = floating_ui_utils_dom_getWindow(domElement);
10508    const offsetWin = offsetParent && isElement(offsetParent) ? floating_ui_utils_dom_getWindow(offsetParent) : offsetParent;
vendor: 11,964 bytes, lines 10509-10838
10509    let currentIFrame = win.frameElement;
10510    while (currentIFrame && offsetParent && offsetWin !== win) {
10511      const iframeScale = getScale(currentIFrame);
10512      const iframeRect = currentIFrame.getBoundingClientRect();
10513      const css = floating_ui_utils_dom_getComputedStyle(currentIFrame);
10514      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
10515      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
10516      x *= iframeScale.x;
10517      y *= iframeScale.y;
10518      width *= iframeScale.x;
10519      height *= iframeScale.y;
10520      x += left;
10521      y += top;
10522      currentIFrame = floating_ui_utils_dom_getWindow(currentIFrame).frameElement;
10523    }
10524  }
10525  return floating_ui_utils_rectToClientRect({
10526    width,
10527    height,
10528    x,
10529    y
10530  });
10531}
10532
10533function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
10534  let {
10535    rect,
10536    offsetParent,
10537    strategy
10538  } = _ref;
10539  const isOffsetParentAnElement = isHTMLElement(offsetParent);
10540  const documentElement = getDocumentElement(offsetParent);
10541  if (offsetParent === documentElement) {
10542    return rect;
10543  }
10544  let scroll = {
10545    scrollLeft: 0,
10546    scrollTop: 0
10547  };
10548  let scale = createCoords(1);
10549  const offsets = createCoords(0);
10550  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
10551    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
10552      scroll = getNodeScroll(offsetParent);
10553    }
10554    if (isHTMLElement(offsetParent)) {
10555      const offsetRect = getBoundingClientRect(offsetParent);
10556      scale = getScale(offsetParent);
10557      offsets.x = offsetRect.x + offsetParent.clientLeft;
10558      offsets.y = offsetRect.y + offsetParent.clientTop;
10559    }
10560  }
10561  return {
10562    width: rect.width * scale.x,
10563    height: rect.height * scale.y,
10564    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
10565    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
10566  };
10567}
10568
10569function getClientRects(element) {
10570  return Array.from(element.getClientRects());
10571}
10572
10573function getWindowScrollBarX(element) {
10574  // If <html> has a CSS width greater than the viewport, then this will be
10575  // incorrect for RTL.
10576  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
10577}
10578
10579// Gets the entire size of the scrollable document area, even extending outside
10580// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
10581function getDocumentRect(element) {
10582  const html = getDocumentElement(element);
10583  const scroll = getNodeScroll(element);
10584  const body = element.ownerDocument.body;
10585  const width = floating_ui_utils_max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
10586  const height = floating_ui_utils_max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
10587  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
10588  const y = -scroll.scrollTop;
10589  if (floating_ui_utils_dom_getComputedStyle(body).direction === 'rtl') {
10590    x += floating_ui_utils_max(html.clientWidth, body.clientWidth) - width;
10591  }
10592  return {
10593    width,
10594    height,
10595    x,
10596    y
10597  };
10598}
10599
10600function getViewportRect(element, strategy) {
10601  const win = floating_ui_utils_dom_getWindow(element);
10602  const html = getDocumentElement(element);
10603  const visualViewport = win.visualViewport;
10604  let width = html.clientWidth;
10605  let height = html.clientHeight;
10606  let x = 0;
10607  let y = 0;
10608  if (visualViewport) {
10609    width = visualViewport.width;
10610    height = visualViewport.height;
10611    const visualViewportBased = isWebKit();
10612    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
10613      x = visualViewport.offsetLeft;
10614      y = visualViewport.offsetTop;
10615    }
10616  }
10617  return {
10618    width,
10619    height,
10620    x,
10621    y
10622  };
10623}
10624
10625// Returns the inner client rect, subtracting scrollbars if present.
10626function getInnerBoundingClientRect(element, strategy) {
10627  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
10628  const top = clientRect.top + element.clientTop;
10629  const left = clientRect.left + element.clientLeft;
10630  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
10631  const width = element.clientWidth * scale.x;
10632  const height = element.clientHeight * scale.y;
10633  const x = left * scale.x;
10634  const y = top * scale.y;
10635  return {
10636    width,
10637    height,
10638    x,
10639    y
10640  };
10641}
10642function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
10643  let rect;
10644  if (clippingAncestor === 'viewport') {
10645    rect = getViewportRect(element, strategy);
10646  } else if (clippingAncestor === 'document') {
10647    rect = getDocumentRect(getDocumentElement(element));
10648  } else if (isElement(clippingAncestor)) {
10649    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
10650  } else {
10651    const visualOffsets = getVisualOffsets(element);
10652    rect = {
10653      ...clippingAncestor,
10654      x: clippingAncestor.x - visualOffsets.x,
10655      y: clippingAncestor.y - visualOffsets.y
10656    };
10657  }
10658  return floating_ui_utils_rectToClientRect(rect);
10659}
10660function hasFixedPositionAncestor(element, stopNode) {
10661  const parentNode = getParentNode(element);
10662  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
10663    return false;
10664  }
10665  return floating_ui_utils_dom_getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
10666}
10667
10668// A "clipping ancestor" is an `overflow` element with the characteristic of
10669// clipping (or hiding) child elements. This returns all clipping ancestors
10670// of the given element up the tree.
10671function getClippingElementAncestors(element, cache) {
10672  const cachedResult = cache.get(element);
10673  if (cachedResult) {
10674    return cachedResult;
10675  }
10676  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
10677  let currentContainingBlockComputedStyle = null;
10678  const elementIsFixed = floating_ui_utils_dom_getComputedStyle(element).position === 'fixed';
10679  let currentNode = elementIsFixed ? getParentNode(element) : element;
10680
10681  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
10682  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
10683    const computedStyle = floating_ui_utils_dom_getComputedStyle(currentNode);
10684    const currentNodeIsContaining = isContainingBlock(currentNode);
10685    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
10686      currentContainingBlockComputedStyle = null;
10687    }
10688    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
10689    if (shouldDropCurrentNode) {
10690      // Drop non-containing blocks.
10691      result = result.filter(ancestor => ancestor !== currentNode);
10692    } else {
10693      // Record last containing block for next iteration.
10694      currentContainingBlockComputedStyle = computedStyle;
10695    }
10696    currentNode = getParentNode(currentNode);
10697  }
10698  cache.set(element, result);
10699  return result;
10700}
10701
10702// Gets the maximum area that the element is visible in due to any number of
10703// clipping ancestors.
10704function getClippingRect(_ref) {
10705  let {
10706    element,
10707    boundary,
10708    rootBoundary,
10709    strategy
10710  } = _ref;
10711  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
10712  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
10713  const firstClippingAncestor = clippingAncestors[0];
10714  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
10715    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
10716    accRect.top = floating_ui_utils_max(rect.top, accRect.top);
10717    accRect.right = floating_ui_utils_min(rect.right, accRect.right);
10718    accRect.bottom = floating_ui_utils_min(rect.bottom, accRect.bottom);
10719    accRect.left = floating_ui_utils_max(rect.left, accRect.left);
10720    return accRect;
10721  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
10722  return {
10723    width: clippingRect.right - clippingRect.left,
10724    height: clippingRect.bottom - clippingRect.top,
10725    x: clippingRect.left,
10726    y: clippingRect.top
10727  };
10728}
10729
10730function getDimensions(element) {
10731  return getCssDimensions(element);
10732}
10733
10734function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
10735  const isOffsetParentAnElement = isHTMLElement(offsetParent);
10736  const documentElement = getDocumentElement(offsetParent);
10737  const isFixed = strategy === 'fixed';
10738  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
10739  let scroll = {
10740    scrollLeft: 0,
10741    scrollTop: 0
10742  };
10743  const offsets = createCoords(0);
10744  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
10745    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
10746      scroll = getNodeScroll(offsetParent);
10747    }
10748    if (isOffsetParentAnElement) {
10749      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
10750      offsets.x = offsetRect.x + offsetParent.clientLeft;
10751      offsets.y = offsetRect.y + offsetParent.clientTop;
10752    } else if (documentElement) {
10753      offsets.x = getWindowScrollBarX(documentElement);
10754    }
10755  }
10756  return {
10757    x: rect.left + scroll.scrollLeft - offsets.x,
10758    y: rect.top + scroll.scrollTop - offsets.y,
10759    width: rect.width,
10760    height: rect.height
10761  };
10762}
10763
10764function getTrueOffsetParent(element, polyfill) {
10765  if (!isHTMLElement(element) || floating_ui_utils_dom_getComputedStyle(element).position === 'fixed') {
10766    return null;
10767  }
10768  if (polyfill) {
10769    return polyfill(element);
10770  }
10771  return element.offsetParent;
10772}
10773
10774// Gets the closest ancestor positioned element. Handles some edge cases,
10775// such as table ancestors and cross browser bugs.
10776function getOffsetParent(element, polyfill) {
10777  const window = floating_ui_utils_dom_getWindow(element);
10778  if (!isHTMLElement(element)) {
10779    return window;
10780  }
10781  let offsetParent = getTrueOffsetParent(element, polyfill);
10782  while (offsetParent && isTableElement(offsetParent) && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static') {
10783    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
10784  }
10785  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
10786    return window;
10787  }
10788  return offsetParent || getContainingBlock(element) || window;
10789}
10790
10791const getElementRects = async function (_ref) {
10792  let {
10793    reference,
10794    floating,
10795    strategy
10796  } = _ref;
10797  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
10798  const getDimensionsFn = this.getDimensions;
10799  return {
10800    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
10801    floating: {
10802      x: 0,
10803      y: 0,
10804      ...(await getDimensionsFn(floating))
10805    }
10806  };
10807};
10808
10809function isRTL(element) {
10810  return floating_ui_utils_dom_getComputedStyle(element).direction === 'rtl';
10811}
10812
10813const platform = {
10814  convertOffsetParentRelativeRectToViewportRelativeRect,
10815  getDocumentElement: getDocumentElement,
10816  getClippingRect,
10817  getOffsetParent,
10818  getElementRects,
10819  getClientRects,
10820  getDimensions,
10821  getScale,
10822  isElement: isElement,
10823  isRTL
10824};
10825
10826// https://samthor.au/2021/observing-dom/
10827function observeMove(element, onMove) {
10828  let io = null;
10829  let timeoutId;
10830  const root = getDocumentElement(element);
10831  function cleanup() {
10832    clearTimeout(timeoutId);
10833    io && io.disconnect();
10834    io = null;
10835  }
10836  function refresh(skip, threshold) {
10837    if (skip === void 0) {
10838      skip = false;
vendor: 4,494 bytes, lines 10839-10978
10839    }
10840    if (threshold === void 0) {
10841      threshold = 1;
10842    }
10843    cleanup();
10844    const {
10845      left,
10846      top,
10847      width,
10848      height
10849    } = element.getBoundingClientRect();
10850    if (!skip) {
10851      onMove();
10852    }
10853    if (!width || !height) {
10854      return;
10855    }
10856    const insetTop = floor(top);
10857    const insetRight = floor(root.clientWidth - (left + width));
10858    const insetBottom = floor(root.clientHeight - (top + height));
10859    const insetLeft = floor(left);
10860    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
10861    const options = {
10862      rootMargin,
10863      threshold: floating_ui_utils_max(0, floating_ui_utils_min(1, threshold)) || 1
10864    };
10865    let isFirstUpdate = true;
10866    function handleObserve(entries) {
10867      const ratio = entries[0].intersectionRatio;
10868      if (ratio !== threshold) {
10869        if (!isFirstUpdate) {
10870          return refresh();
10871        }
10872        if (!ratio) {
10873          timeoutId = setTimeout(() => {
10874            refresh(false, 1e-7);
10875          }, 100);
10876        } else {
10877          refresh(false, ratio);
10878        }
10879      }
10880      isFirstUpdate = false;
10881    }
10882
10883    // Older browsers don't support a `document` as the root and will throw an
10884    // error.
10885    try {
10886      io = new IntersectionObserver(handleObserve, {
10887        ...options,
10888        // Handle <iframe>s
10889        root: root.ownerDocument
10890      });
10891    } catch (e) {
10892      io = new IntersectionObserver(handleObserve, options);
10893    }
10894    io.observe(element);
10895  }
10896  refresh(true);
10897  return cleanup;
10898}
10899
10900/**
10901 * Automatically updates the position of the floating element when necessary.
10902 * Should only be called when the floating element is mounted on the DOM or
10903 * visible on the screen.
10904 * @returns cleanup function that should be invoked when the floating element is
10905 * removed from the DOM or hidden from the screen.
10906 * @see https://floating-ui.com/docs/autoUpdate
10907 */
10908function autoUpdate(reference, floating, update, options) {
10909  if (options === void 0) {
10910    options = {};
10911  }
10912  const {
10913    ancestorScroll = true,
10914    ancestorResize = true,
10915    elementResize = typeof ResizeObserver === 'function',
10916    layoutShift = typeof IntersectionObserver === 'function',
10917    animationFrame = false
10918  } = options;
10919  const referenceEl = unwrapElement(reference);
10920  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
10921  ancestors.forEach(ancestor => {
10922    ancestorScroll && ancestor.addEventListener('scroll', update, {
10923      passive: true
10924    });
10925    ancestorResize && ancestor.addEventListener('resize', update);
10926  });
10927  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
10928  let reobserveFrame = -1;
10929  let resizeObserver = null;
10930  if (elementResize) {
10931    resizeObserver = new ResizeObserver(_ref => {
10932      let [firstEntry] = _ref;
10933      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
10934        // Prevent update loops when using the `size` middleware.
10935        // https://github.com/floating-ui/floating-ui/issues/1740
10936        resizeObserver.unobserve(floating);
10937        cancelAnimationFrame(reobserveFrame);
10938        reobserveFrame = requestAnimationFrame(() => {
10939          resizeObserver && resizeObserver.observe(floating);
10940        });
10941      }
10942      update();
10943    });
10944    if (referenceEl && !animationFrame) {
10945      resizeObserver.observe(referenceEl);
10946    }
10947    resizeObserver.observe(floating);
10948  }
10949  let frameId;
10950  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
10951  if (animationFrame) {
10952    frameLoop();
10953  }
10954  function frameLoop() {
10955    const nextRefRect = getBoundingClientRect(reference);
10956    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
10957      update();
10958    }
10959    prevRefRect = nextRefRect;
10960    frameId = requestAnimationFrame(frameLoop);
10961  }
10962  update();
10963  return () => {
10964    ancestors.forEach(ancestor => {
10965      ancestorScroll && ancestor.removeEventListener('scroll', update);
10966      ancestorResize && ancestor.removeEventListener('resize', update);
10967    });
10968    cleanupIo && cleanupIo();
10969    resizeObserver && resizeObserver.disconnect();
10970    resizeObserver = null;
10971    if (animationFrame) {
10972      cancelAnimationFrame(frameId);
10973    }
10974  };
10975}
10976
10977/**
10978 * Computes the `x` and `y` coordinates that will place the floating element
10979 * next to a reference element when it is given a certain CSS positioning
10980 * strategy.
10981 */
10982const floating_ui_dom_computePosition = (reference, floating, options) => {
10983  // This caches the expensive `getClippingElementAncestors` function so that
10984  // multiple lifecycle resets re-use the same result. It only lives for a
10985  // single call. If other functions become expensive, we can add them as well.
10986  const cache = new Map();
10987  const mergedOptions = {
10988    platform,
10989    ...options
10990  };
10991  const platformWithCache = {
10992    ...mergedOptions.platform,
10993    _c: cache
10994  };
10995  return computePosition(reference, floating, {
10996    ...mergedOptions,
10997    platform: platformWithCache
10998  });
10999};
11000
11001
11002
11003;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SAES3ZFU.js
11004
11005
11006
11007
11008
11009
vendor: 4,395 bytes, lines 11010-11172
11010// src/popover/popover.tsx
11011
11012
11013
11014
11015function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
11016  if (typeof DOMRect === "function") {
11017    return new DOMRect(x, y, width, height);
11018  }
11019  const rect = {
11020    x,
11021    y,
11022    width,
11023    height,
11024    top: y,
11025    right: x + width,
11026    bottom: y + height,
11027    left: x
11028  };
11029  return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, rect), { toJSON: () => rect });
11030}
11031function getDOMRect(anchorRect) {
11032  if (!anchorRect)
11033    return createDOMRect();
11034  const { x, y, width, height } = anchorRect;
11035  return createDOMRect(x, y, width, height);
11036}
11037function getAnchorElement(anchorElement, getAnchorRect) {
11038  const contextElement = anchorElement || void 0;
11039  return {
11040    contextElement,
11041    getBoundingClientRect: () => {
11042      const anchor = anchorElement;
11043      const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor);
11044      if (anchorRect || !anchor) {
11045        return getDOMRect(anchorRect);
11046      }
11047      return anchor.getBoundingClientRect();
11048    }
11049  };
11050}
11051function isValidPlacement(flip2) {
11052  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2);
11053}
11054function roundByDPR(value) {
11055  const dpr = window.devicePixelRatio || 1;
11056  return Math.round(value * dpr) / dpr;
11057}
11058function getOffsetMiddleware(arrowElement, props) {
11059  return offset(({ placement }) => {
11060    var _a;
11061    const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2;
11062    const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset;
11063    const hasAlignment = !!placement.split("-")[1];
11064    return {
11065      crossAxis: !hasAlignment ? props.shift : void 0,
11066      mainAxis: finalGutter,
11067      alignmentAxis: props.shift
11068    };
11069  });
11070}
11071function getFlipMiddleware(props) {
11072  if (props.flip === false)
11073    return;
11074  const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
11075  invariant(
11076    !fallbackPlacements || fallbackPlacements.every(isValidPlacement),
11077     false && 0
11078  );
11079  return floating_ui_core_flip({
11080    padding: props.overflowPadding,
11081    fallbackPlacements
11082  });
11083}
11084function getShiftMiddleware(props) {
11085  if (!props.slide && !props.overlap)
11086    return;
11087  return floating_ui_core_shift({
11088    mainAxis: props.slide,
11089    crossAxis: props.overlap,
11090    padding: props.overflowPadding
11091  });
11092}
11093function getSizeMiddleware(props) {
11094  return size({
11095    padding: props.overflowPadding,
11096    apply({ elements, availableWidth, availableHeight, rects }) {
11097      const wrapper = elements.floating;
11098      const referenceWidth = Math.round(rects.reference.width);
11099      availableWidth = Math.floor(availableWidth);
11100      availableHeight = Math.floor(availableHeight);
11101      wrapper.style.setProperty(
11102        "--popover-anchor-width",
11103        `${referenceWidth}px`
11104      );
11105      wrapper.style.setProperty(
11106        "--popover-available-width",
11107        `${availableWidth}px`
11108      );
11109      wrapper.style.setProperty(
11110        "--popover-available-height",
11111        `${availableHeight}px`
11112      );
11113      if (props.sameWidth) {
11114        wrapper.style.width = `${referenceWidth}px`;
11115      }
11116      if (props.fitViewport) {
11117        wrapper.style.maxWidth = `${availableWidth}px`;
11118        wrapper.style.maxHeight = `${availableHeight}px`;
11119      }
11120    }
11121  });
11122}
11123function getArrowMiddleware(arrowElement, props) {
11124  if (!arrowElement)
11125    return;
11126  return arrow({
11127    element: arrowElement,
11128    padding: props.arrowPadding
11129  });
11130}
11131var usePopover = NQJBHION_createHook(
11132  (_a) => {
11133    var _b = _a, {
11134      store,
11135      modal = false,
11136      portal = !!modal,
11137      preserveTabOrder = true,
11138      autoFocusOnShow = true,
11139      wrapperProps,
11140      fixed = false,
11141      flip: flip2 = true,
11142      shift: shift2 = 0,
11143      slide = true,
11144      overlap = false,
11145      sameWidth = false,
11146      fitViewport = false,
11147      gutter,
11148      arrowPadding = 4,
11149      overflowPadding = 8,
11150      getAnchorRect,
11151      updatePosition
11152    } = _b, props = __objRest(_b, [
11153      "store",
11154      "modal",
11155      "portal",
11156      "preserveTabOrder",
11157      "autoFocusOnShow",
11158      "wrapperProps",
11159      "fixed",
11160      "flip",
11161      "shift",
11162      "slide",
11163      "overlap",
11164      "sameWidth",
11165      "fitViewport",
11166      "gutter",
11167      "arrowPadding",
11168      "overflowPadding",
11169      "getAnchorRect",
11170      "updatePosition"
11171    ]);
11172    const arrowElement = store.useState("arrowElement");
vendor: 5,834 bytes, lines 11173-11351
11173    const anchorElement = store.useState("anchorElement");
11174    const popoverElement = store.useState("popoverElement");
11175    const contentElement = store.useState("contentElement");
11176    const placement = store.useState("placement");
11177    const mounted = store.useState("mounted");
11178    const rendered = store.useState("rendered");
11179    const [positioned, setPositioned] = (0,external_React_.useState)(false);
11180    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
11181    const getAnchorRectProp = useEvent(getAnchorRect);
11182    const updatePositionProp = useEvent(updatePosition);
11183    const hasCustomUpdatePosition = !!updatePosition;
11184    useSafeLayoutEffect(() => {
11185      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
11186        return;
11187      popoverElement.style.setProperty(
11188        "--popover-overflow-padding",
11189        `${overflowPadding}px`
11190      );
11191      const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
11192      const updatePosition2 = async () => {
11193        if (!mounted)
11194          return;
11195        const middleware = [
11196          getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
11197          getFlipMiddleware({ flip: flip2, overflowPadding }),
11198          getShiftMiddleware({ slide, overlap, overflowPadding }),
11199          getArrowMiddleware(arrowElement, { arrowPadding }),
11200          getSizeMiddleware({
11201            sameWidth,
11202            fitViewport,
11203            overflowPadding
11204          })
11205        ];
11206        const pos = await floating_ui_dom_computePosition(anchor, popoverElement, {
11207          placement,
11208          strategy: fixed ? "fixed" : "absolute",
11209          middleware
11210        });
11211        store.setState("currentPlacement", pos.placement);
11212        setPositioned(true);
11213        const x = roundByDPR(pos.x);
11214        const y = roundByDPR(pos.y);
11215        Object.assign(popoverElement.style, {
11216          top: "0",
11217          left: "0",
11218          transform: `translate3d(${x}px,${y}px,0)`
11219        });
11220        if (arrowElement && pos.middlewareData.arrow) {
11221          const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
11222          const dir = pos.placement.split("-")[0];
11223          Object.assign(arrowElement.style, {
11224            left: arrowX != null ? `${arrowX}px` : "",
11225            top: arrowY != null ? `${arrowY}px` : "",
11226            [dir]: "100%"
11227          });
11228        }
11229      };
11230      const update = async () => {
11231        if (hasCustomUpdatePosition) {
11232          await updatePositionProp({ updatePosition: updatePosition2 });
11233          setPositioned(true);
11234        } else {
11235          await updatePosition2();
11236        }
11237      };
11238      const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, {
11239        // JSDOM doesn't support ResizeObserver
11240        elementResize: typeof ResizeObserver === "function"
11241      });
11242      return () => {
11243        setPositioned(false);
11244        cancelAutoUpdate();
11245      };
11246    }, [
11247      store,
11248      rendered,
11249      popoverElement,
11250      arrowElement,
11251      anchorElement,
11252      popoverElement,
11253      placement,
11254      mounted,
11255      domReady,
11256      fixed,
11257      flip2,
11258      shift2,
11259      slide,
11260      overlap,
11261      sameWidth,
11262      fitViewport,
11263      gutter,
11264      arrowPadding,
11265      overflowPadding,
11266      getAnchorRectProp,
11267      hasCustomUpdatePosition,
11268      updatePositionProp
11269    ]);
11270    useSafeLayoutEffect(() => {
11271      if (!mounted)
11272        return;
11273      if (!domReady)
11274        return;
11275      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
11276        return;
11277      if (!(contentElement == null ? void 0 : contentElement.isConnected))
11278        return;
11279      const applyZIndex = () => {
11280        popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
11281      };
11282      applyZIndex();
11283      let raf = requestAnimationFrame(() => {
11284        raf = requestAnimationFrame(applyZIndex);
11285      });
11286      return () => cancelAnimationFrame(raf);
11287    }, [mounted, domReady, popoverElement, contentElement]);
11288    const position = fixed ? "fixed" : "absolute";
11289    props = useWrapElement(
11290      props,
11291      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(
11292        "div",
11293        PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
11294          role: "presentation"
11295        }, wrapperProps), {
11296          style: PNRLI7OV_spreadValues({
11297            // https://floating-ui.com/docs/computeposition#initial-layout
11298            position,
11299            top: 0,
11300            left: 0,
11301            width: "max-content"
11302          }, wrapperProps == null ? void 0 : wrapperProps.style),
11303          ref: store.setPopoverElement,
11304          children: element
11305        })
11306      ),
11307      [store, position, wrapperProps]
11308    );
11309    props = useWrapElement(
11310      props,
11311      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverContext.Provider, { value: store, children: element }),
11312      [store]
11313    );
11314    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
11315      // data-placing is not part of the public API. We're setting this here so
11316      // we can wait for the popover to be positioned before other components
11317      // move focus into it. For example, this attribute is observed by the
11318      // Combobox component with the autoSelect behavior.
11319      "data-placing": !positioned ? "" : void 0
11320    }, props), {
11321      style: PNRLI7OV_spreadValues({
11322        position: "relative"
11323      }, props.style)
11324    });
11325    props = useDialog(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
11326      store,
11327      modal,
11328      preserveTabOrder,
11329      portal,
11330      autoFocusOnShow: positioned && autoFocusOnShow
11331    }, props), {
11332      portalRef
11333    }));
11334    return props;
11335  }
11336);
11337var Popover = NQJBHION_createComponent((props) => {
11338  const htmlProps = usePopover(props);
11339  return NQJBHION_createElement("div", htmlProps);
11340});
11341if (false) {}
11342
11343
11344
11345;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BB7NHN6A.js
11346
11347
11348
11349
11350
11351
11352// src/hovercard/hovercard.tsx
11353
11354
11355
11356
11357
11358
11359function isMovingOnHovercard(target, card, anchor, nested) {
11360  if (focus_hasFocusWithin(card))
11361    return true;
11362  if (!target)
11363    return false;
11364  if (O35LWD4W_contains(card, target))
11365    return true;
11366  if (anchor && O35LWD4W_contains(anchor, target))
11367    return true;
11368  if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) {
11369    return true;
11370  }
11371  return false;
11372}
11373function useAutoFocusOnShow(_a) {
11374  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
11375  const open = store.useState("open");
11376  const openRef = J7Q2EO23_useLiveRef(open);
11377  (0,external_React_.useEffect)(() => {
11378    if (!open) {
11379      store.setAutoFocusOnShow(false);
11380    }
11381  }, [open, store]);
11382  (0,external_React_.useEffect)(
11383    () => () => {
11384      if (!openRef.current) {
11385        store.setAutoFocusOnShow(false);
11386      }
11387    },
11388    [store]
11389  );
11390  const modal = !!props.modal;
11391  const autoFocusOnShow = store.useState(
11392    (state) => modal || state.autoFocusOnShow
11393  );
11394  return PNRLI7OV_spreadValues({ autoFocusOnShow }, props);
11395}
11396function useAutoFocusOnHide(_a) {
11397  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
11398  const [autoFocusOnHide, setAutoFocusOnHide] = (0,external_React_.useState)(false);
11399  const mounted = store.useState("mounted");
11400  (0,external_React_.useEffect)(() => {
11401    if (!mounted) {
11402      setAutoFocusOnHide(false);
11403    }
11404  }, [mounted]);
11405  const onFocusProp = props.onFocus;
11406  const onFocus = useEvent((event) => {
11407    onFocusProp == null ? void 0 : onFocusProp(event);
11408    if (event.defaultPrevented)
11409      return;
11410    setAutoFocusOnHide(true);
11411  });
11412  const finalFocusRef = (0,external_React_.useRef)(null);
11413  (0,external_React_.useEffect)(() => {
11414    return store.sync(
11415      (state) => {
11416        finalFocusRef.current = state.anchorElement;
11417      },
11418      ["anchorElement"]
11419    );
11420  }, []);
11421  props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
11422    autoFocusOnHide,
11423    finalFocus: finalFocusRef
11424  }, props), {
11425    onFocus
11426  });
11427  return props;
11428}
11429var NestedHovercardContext = (0,external_React_.createContext)(null);
11430var useHovercard = NQJBHION_createHook(
11431  (_a) => {
11432    var _b = _a, {
11433      store,
11434      modal = false,
11435      portal = !!modal,
11436      hideOnEscape = true,
11437      hideOnHoverOutside = true,
11438      disablePointerEventsOnApproach = !!hideOnHoverOutside
11439    } = _b, props = __objRest(_b, [
11440      "store",
11441      "modal",
11442      "portal",
11443      "hideOnEscape",
11444      "hideOnHoverOutside",
11445      "disablePointerEventsOnApproach"
11446    ]);
11447    const ref = (0,external_React_.useRef)(null);
11448    const [nestedHovercards, setNestedHovercards] = (0,external_React_.useState)([]);
11449    const hideTimeoutRef = (0,external_React_.useRef)(0);
11450    const enterPointRef = (0,external_React_.useRef)(null);
11451    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
11452    const mayHideOnHoverOutside = !!hideOnHoverOutside;
11453    const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
11454    const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
11455    const disablePointerEventsProp = useBooleanEvent(
11456      disablePointerEventsOnApproach
11457    );
11458    const mounted = store.useState("mounted");
11459    (0,external_React_.useEffect)(() => {
11460      if (!domReady)
11461        return;
11462      if (!mounted)
11463        return;
11464      if (!mayHideOnHoverOutside && !mayDisablePointerEvents)
11465        return;
11466      const element = ref.current;
11467      if (!element)
11468        return;
11469      const onMouseMove = (event) => {
11470        const { anchorElement, hideTimeout, timeout } = store.getState();
11471        const enterPoint = enterPointRef.current;
11472        const target = event.target;
11473        const anchor = anchorElement;
11474        if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {
11475          enterPointRef.current = target && anchor && O35LWD4W_contains(anchor, target) ? getEventPoint(event) : null;
11476          window.clearTimeout(hideTimeoutRef.current);
11477          hideTimeoutRef.current = 0;
11478          return;
11479        }
11480        if (hideTimeoutRef.current)
11481          return;
11482        if (enterPoint) {
11483          const currentPoint = getEventPoint(event);
11484          const polygon = getElementPolygon(element, enterPoint);
11485          if (isPointInPolygon(currentPoint, polygon)) {
11486            enterPointRef.current = currentPoint;
11487            if (!disablePointerEventsProp(event))
11488              return;
11489            event.preventDefault();
11490            event.stopPropagation();
11491            return;
11492          }
11493        }
11494        if (!hideOnHoverOutsideProp(event))
11495          return;
11496        hideTimeoutRef.current = window.setTimeout(() => {
11497          hideTimeoutRef.current = 0;
11498          store.hide();
11499        }, hideTimeout != null ? hideTimeout : timeout);
11500      };
11501      return chain(
11502        addGlobalEventListener("mousemove", onMouseMove, true),
11503        () => clearTimeout(hideTimeoutRef.current)
11504      );
11505    }, [
11506      store,
11507      domReady,
11508      mounted,
11509      mayHideOnHoverOutside,
11510      mayDisablePointerEvents,
11511      nestedHovercards,
11512      disablePointerEventsProp,
11513      hideOnHoverOutsideProp
11514    ]);
11515    (0,external_React_.useEffect)(() => {
11516      if (!domReady)
11517        return;
11518      if (!mounted)
11519        return;
11520      if (!mayDisablePointerEvents)
11521        return;
11522      const disableEvent = (event) => {
11523        const element = ref.current;
11524        if (!element)
11525          return;
11526        const enterPoint = enterPointRef.current;
11527        if (!enterPoint)
11528          return;
11529        const polygon = getElementPolygon(element, enterPoint);
11530        if (isPointInPolygon(getEventPoint(event), polygon)) {
11531          if (!disablePointerEventsProp(event))
11532            return;
11533          event.preventDefault();
11534          event.stopPropagation();
11535        }
11536      };
11537      return chain(
11538        // Note: we may need to add pointer events here in the future.
11539        addGlobalEventListener("mouseenter", disableEvent, true),
11540        addGlobalEventListener("mouseover", disableEvent, true),
11541        addGlobalEventListener("mouseout", disableEvent, true),
11542        addGlobalEventListener("mouseleave", disableEvent, true)
11543      );
11544    }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
11545    const registerOnParent = (0,external_React_.useContext)(NestedHovercardContext);
11546    useSafeLayoutEffect(() => {
11547      if (modal)
11548        return;
11549      if (!portal)
11550        return;
11551      if (!mounted)
11552        return;
11553      if (!domReady)
11554        return;
11555      const element = ref.current;
11556      if (!element)
11557        return;
11558      return registerOnParent == null ? void 0 : registerOnParent(element);
11559    }, [modal, portal, mounted, domReady]);
11560    const registerNestedHovercard = (0,external_React_.useCallback)(
11561      (element) => {
11562        setNestedHovercards((prevElements) => [...prevElements, element]);
11563        const parentUnregister = registerOnParent == null ? void 0 : registerOnParent(element);
11564        return () => {
11565          setNestedHovercards(
11566            (prevElements) => prevElements.filter((item) => item !== element)
11567          );
11568          parentUnregister == null ? void 0 : parentUnregister();
11569        };
11570      },
11571      [registerOnParent]
11572    );
11573    props = useWrapElement(
11574      props,
11575      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }),
11576      [registerNestedHovercard]
11577    );
11578    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
11579      ref: useMergeRefs(ref, props.ref)
11580    });
11581    props = useAutoFocusOnHide(PNRLI7OV_spreadValues({ store }, props));
11582    props = useAutoFocusOnShow(PNRLI7OV_spreadValues({ store, modal }, props));
11583    props = usePopover(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
11584      store,
11585      modal,
11586      portal
11587    }, props), {
11588      portalRef,
11589      hideOnEscape(event) {
11590        if (isFalsyBooleanCallback(hideOnEscape, event))
11591          return false;
11592        requestAnimationFrame(() => requestAnimationFrame(store.hide));
11593        return true;
11594      }
11595    }));
11596    return props;
11597  }
11598);
11599var Hovercard = NQJBHION_createComponent((props) => {
11600  const htmlProps = useHovercard(props);
11601  return NQJBHION_createElement("div", htmlProps);
11602});
11603if (false) {}
11604
11605
11606
11607;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Z5BJMNGY.js
11608// src/tooltip/tooltip-context.ts
11609
11610var TooltipContext = (0,external_React_.createContext)(
11611  void 0
11612);
11613
11614
11615
11616;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js
11617
11618
11619
11620
11621
11622
11623
11624
11625
11626
11627
11628
11629
11630
11631
11632
11633
11634
11635
11636
11637
11638
11639
11640
11641
11642
11643
11644
11645
11646
11647
11648
11649
11650
11651
11652
11653
11654
11655
11656// src/tooltip/tooltip.tsx
11657
11658
11659
11660var useTooltip = NQJBHION_createHook(
11661  (_a) => {
11662    var _b = _a, {
11663      store,
11664      portal = true,
11665      gutter = 8,
11666      preserveTabOrder = false,
11667      hideOnHoverOutside = true,
11668      hideOnInteractOutside = true
11669    } = _b, props = __objRest(_b, [
11670      "store",
11671      "portal",
11672      "gutter",
11673      "preserveTabOrder",
11674      "hideOnHoverOutside",
11675      "hideOnInteractOutside"
11676    ]);
11677    props = useWrapElement(
11678      props,
11679      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TooltipContext.Provider, { value: store, children: element }),
11680      [store]
11681    );
11682    const role = store.useState(
11683      (state) => state.type === "description" ? "tooltip" : "none"
11684    );
11685    props = PNRLI7OV_spreadValues({ role }, props);
11686    props = useHovercard(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
11687      store,
11688      portal,
11689      gutter,
11690      preserveTabOrder,
11691      hideOnHoverOutside: (event) => {
11692        if (isFalsyBooleanCallback(hideOnHoverOutside, event))
11693          return false;
11694        const { anchorElement } = store.getState();
11695        if (!anchorElement)
11696          return true;
11697        if ("focusVisible" in anchorElement.dataset)
11698          return false;
11699        return true;
11700      },
11701      hideOnInteractOutside: (event) => {
11702        if (isFalsyBooleanCallback(hideOnInteractOutside, event))
11703          return false;
11704        const { anchorElement } = store.getState();
11705        if (!anchorElement)
11706          return true;
11707        if (O35LWD4W_contains(anchorElement, event.target))
11708          return false;
11709        return true;
11710      }
11711    }));
11712    return props;
11713  }
11714);
11715var Tooltip = NQJBHION_createComponent((props) => {
11716  const htmlProps = useTooltip(props);
11717  return NQJBHION_createElement("div", htmlProps);
11718});
11719if (false) {}
11720
11721
11722;// CONCATENATED MODULE: external ["wp","deprecated"]
11723const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
11724var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
11725;// CONCATENATED MODULE: ./packages/components/build-module/shortcut/index.js
11726
11727/**
11728 * Internal dependencies
11729 */
11730
11731/**
11732 * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
11733 *
11734 * ```jsx
11735 * import { Shortcut } from '@wordpress/components';
11736 *
11737 * const MyShortcut = () => {
11738 * 	return (
11739 * 		<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
11740 * 	);
11741 * };
11742 * ```
11743 */
11744function Shortcut(props) {
11745  const {
11746    shortcut,
11747    className
11748  } = props;
11749  if (!shortcut) {
11750    return null;
11751  }
11752  let displayText;
11753  let ariaLabel;
11754  if (typeof shortcut === 'string') {
11755    displayText = shortcut;
11756  }
11757  if (shortcut !== null && typeof shortcut === 'object') {
11758    displayText = shortcut.display;
11759    ariaLabel = shortcut.ariaLabel;
11760  }
11761  return (0,external_wp_element_namespaceObject.createElement)("span", {
11762    className: className,
11763    "aria-label": ariaLabel
11764  }, displayText);
11765}
11766/* harmony default export */ const build_module_shortcut = (Shortcut);
11767
11768;// CONCATENATED MODULE: ./packages/components/build-module/popover/utils.js
11769/**
11770 * External dependencies
11771 */
11772// eslint-disable-next-line no-restricted-imports
11773
11774/**
11775 * Internal dependencies
11776 */
11777
11778const POSITION_TO_PLACEMENT = {
11779  bottom: 'bottom',
11780  top: 'top',
11781  'middle left': 'left',
11782  'middle right': 'right',
11783  'bottom left': 'bottom-end',
11784  'bottom center': 'bottom',
11785  'bottom right': 'bottom-start',
11786  'top left': 'top-end',
11787  'top center': 'top',
11788  'top right': 'top-start',
11789  'middle left left': 'left',
11790  'middle left right': 'left',
11791  'middle left bottom': 'left-end',
11792  'middle left top': 'left-start',
11793  'middle right left': 'right',
11794  'middle right right': 'right',
11795  'middle right bottom': 'right-end',
11796  'middle right top': 'right-start',
11797  'bottom left left': 'bottom-end',
11798  'bottom left right': 'bottom-end',
11799  'bottom left bottom': 'bottom-end',
11800  'bottom left top': 'bottom-end',
11801  'bottom center left': 'bottom',
11802  'bottom center right': 'bottom',
11803  'bottom center bottom': 'bottom',
11804  'bottom center top': 'bottom',
11805  'bottom right left': 'bottom-start',
11806  'bottom right right': 'bottom-start',
11807  'bottom right bottom': 'bottom-start',
11808  'bottom right top': 'bottom-start',
11809  'top left left': 'top-end',
11810  'top left right': 'top-end',
11811  'top left bottom': 'top-end',
11812  'top left top': 'top-end',
11813  'top center left': 'top',
11814  'top center right': 'top',
11815  'top center bottom': 'top',
11816  'top center top': 'top',
11817  'top right left': 'top-start',
11818  'top right right': 'top-start',
11819  'top right bottom': 'top-start',
11820  'top right top': 'top-start',
11821  // `middle`/`middle center [corner?]` positions are associated to a fallback
11822  // `bottom` placement because there aren't any corresponding placement values.
11823  middle: 'bottom',
11824  'middle center': 'bottom',
11825  'middle center bottom': 'bottom',
11826  'middle center left': 'bottom',
11827  'middle center right': 'bottom',
11828  'middle center top': 'bottom'
11829};
11830
11831/**
11832 * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
11833 * (used by `floating-ui`).
11834 *
11835 * @param position The legacy position
11836 * @return The corresponding placement
11837 */
11838const positionToPlacement = position => {
11839  var _POSITION_TO_PLACEMEN;
11840  return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom';
11841};
11842
11843/**
11844 * @typedef AnimationOrigin
11845 * @type {Object}
11846 * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end")
11847 * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
11848 */
11849
11850const PLACEMENT_TO_ANIMATION_ORIGIN = {
11851  top: {
11852    originX: 0.5,
11853    originY: 1
11854  },
11855  // open from bottom, center
11856  'top-start': {
11857    originX: 0,
11858    originY: 1
11859  },
11860  // open from bottom, left
11861  'top-end': {
11862    originX: 1,
11863    originY: 1
11864  },
11865  // open from bottom, right
11866  right: {
11867    originX: 0,
11868    originY: 0.5
11869  },
11870  // open from middle, left
11871  'right-start': {
11872    originX: 0,
11873    originY: 0
11874  },
11875  // open from top, left
11876  'right-end': {
11877    originX: 0,
11878    originY: 1
11879  },
11880  // open from bottom, left
11881  bottom: {
11882    originX: 0.5,
11883    originY: 0
11884  },
11885  // open from top, center
11886  'bottom-start': {
11887    originX: 0,
11888    originY: 0
11889  },
11890  // open from top, left
11891  'bottom-end': {
11892    originX: 1,
11893    originY: 0
11894  },
11895  // open from top, right
11896  left: {
11897    originX: 1,
11898    originY: 0.5
11899  },
11900  // open from middle, right
11901  'left-start': {
11902    originX: 1,
11903    originY: 0
11904  },
11905  // open from top, right
11906  'left-end': {
11907    originX: 1,
11908    originY: 1
11909  },
11910  // open from bottom, right
11911  overlay: {
11912    originX: 0.5,
11913    originY: 0.5
11914  } // open from center, center
11915};
11916
11917/**
11918 * Given the floating-ui `placement`, compute the framer-motion props for the
11919 * popover's entry animation.
11920 *
11921 * @param placement A placement string from floating ui
11922 * @return The object containing the motion props
11923 */
11924const placementToMotionAnimationProps = placement => {
11925  const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX';
11926  const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1;
11927  return {
11928    style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],
11929    initial: {
11930      opacity: 0,
11931      scale: 0,
11932      [translateProp]: `${2 * translateDirection}em`
11933    },
11934    animate: {
11935      opacity: 1,
11936      scale: 1,
11937      [translateProp]: 0
11938    },
11939    transition: {
11940      duration: 0.1,
11941      ease: [0, 0, 0.2, 1]
11942    }
11943  };
11944};
11945function isTopBottom(anchorRef) {
11946  return !!anchorRef?.top;
11947}
11948function isRef(anchorRef) {
11949  return !!anchorRef?.current;
11950}
11951const getReferenceElement = ({
11952  anchor,
11953  anchorRef,
11954  anchorRect,
11955  getAnchorRect,
11956  fallbackReferenceElement
11957}) => {
11958  var _referenceElement;
11959  let referenceElement = null;
11960  if (anchor) {
11961    referenceElement = anchor;
11962  } else if (isTopBottom(anchorRef)) {
11963    // Create a virtual element for the ref. The expectation is that
11964    // if anchorRef.top is defined, then anchorRef.bottom is defined too.
11965    // Seems to be used by the block toolbar, when multiple blocks are selected
11966    // (top and bottom blocks are used to calculate the resulting rect).
11967    referenceElement = {
11968      getBoundingClientRect() {
11969        const topRect = anchorRef.top.getBoundingClientRect();
11970        const bottomRect = anchorRef.bottom.getBoundingClientRect();
11971        return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
11972      }
11973    };
11974  } else if (isRef(anchorRef)) {
11975    // Standard React ref.
11976    referenceElement = anchorRef.current;
11977  } else if (anchorRef) {
11978    // If `anchorRef` holds directly the element's value (no `current` key)
11979    // This is a weird scenario and should be deprecated.
11980    referenceElement = anchorRef;
11981  } else if (anchorRect) {
11982    // Create a virtual element for the ref.
11983    referenceElement = {
11984      getBoundingClientRect() {
11985        return anchorRect;
11986      }
11987    };
11988  } else if (getAnchorRect) {
11989    // Create a virtual element for the ref.
11990    referenceElement = {
11991      getBoundingClientRect() {
11992        var _rect$x, _rect$y, _rect$width, _rect$height;
11993        const rect = getAnchorRect(fallbackReferenceElement);
11994        return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);
11995      }
11996    };
11997  } else if (fallbackReferenceElement) {
11998    // If no explicit ref is passed via props, fall back to
11999    // anchoring to the popover's parent node.
12000    referenceElement = fallbackReferenceElement.parentElement;
12001  }
12002
12003  // Convert any `undefined` value to `null`.
12004  return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;
12005};
12006
12007/**
12008 * Computes the final coordinate that needs to be applied to the floating
12009 * element when applying transform inline styles, defaulting to `undefined`
12010 * if the provided value is `null` or `NaN`.
12011 *
12012 * @param c input coordinate (usually as returned from floating-ui)
12013 * @return The coordinate's value to be used for inline styles. An `undefined`
12014 *         return value means "no style set" for this coordinate.
12015 */
12016const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);
12017
12018;// CONCATENATED MODULE: ./packages/components/build-module/tooltip/index.js
12019
12020/**
12021 * External dependencies
12022 */
12023
12024
12025/**
12026 * WordPress dependencies
12027 */
12028
12029
12030
12031
12032/**
12033 * Internal dependencies
12034 */
12035
12036
12037
12038
12039/**
12040 * Time over anchor to wait before showing tooltip
12041 */
12042const TOOLTIP_DELAY = 700;
12043function tooltip_Tooltip(props) {
12044  const {
12045    children,
12046    delay = TOOLTIP_DELAY,
12047    hideOnClick = true,
12048    placement,
12049    position,
12050    shortcut,
12051    text
12052  } = props;
12053  const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(tooltip_Tooltip, 'tooltip');
12054  const describedById = text || shortcut ? baseId : undefined;
12055  const isOnlyChild = external_wp_element_namespaceObject.Children.count(children) === 1;
12056  // console error if more than one child element is added
12057  if (!isOnlyChild) {
12058    if (false) {}
12059  }
12060
12061  // Compute tooltip's placement:
12062  // - give priority to `placement` prop, if defined
12063  // - otherwise, compute it from the legacy `position` prop (if defined)
12064  // - finally, fallback to the default placement: 'bottom'
12065  let computedPlacement;
12066  if (placement !== undefined) {
12067    computedPlacement = placement;
12068  } else if (position !== undefined) {
12069    computedPlacement = positionToPlacement(position);
12070    external_wp_deprecated_default()('`position` prop in wp.components.tooltip', {
12071      since: '6.4',
12072      alternative: '`placement` prop'
12073    });
12074  }
12075  computedPlacement = computedPlacement || 'bottom';
12076  const tooltipStore = useTooltipStore({
12077    placement: computedPlacement,
12078    timeout: delay
12079  });
12080  const isTooltipOpen = tooltipStore.useState('open');
12081  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(TooltipAnchor, {
12082    onBlur: tooltipStore.hide,
12083    onClick: hideOnClick ? tooltipStore.hide : undefined,
12084    store: tooltipStore,
12085    render: isOnlyChild ? children : undefined
12086  }, isOnlyChild ? undefined : children), isOnlyChild && (text || shortcut) && isTooltipOpen && (0,external_wp_element_namespaceObject.createElement)(Tooltip, {
12087    className: "components-tooltip",
12088    gutter: 4,
12089    id: describedById,
12090    overflowPadding: 0.5,
12091    store: tooltipStore
12092  }, text, shortcut && (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, {
12093    className: text ? 'components-tooltip__shortcut' : '',
12094    shortcut: shortcut
12095  })));
12096}
12097/* harmony default export */ const tooltip = (tooltip_Tooltip);
12098
12099;// CONCATENATED MODULE: external ["wp","warning"]
12100const external_wp_warning_namespaceObject = window["wp"]["warning"];
12101// EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js
12102var cjs = __webpack_require__(1919);
12103var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs);
12104// EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js
12105var es6 = __webpack_require__(5619);
12106var es6_default = /*#__PURE__*/__webpack_require__.n(es6);
12107;// CONCATENATED MODULE: ./node_modules/is-plain-object/dist/is-plain-object.mjs
12108/*!
12109 * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
12110 *
12111 * Copyright (c) 2014-2017, Jon Schlinkert.
12112 * Released under the MIT License.
12113 */
12114
12115function is_plain_object_isObject(o) {
12116  return Object.prototype.toString.call(o) === '[object Object]';
12117}
12118
12119function is_plain_object_isPlainObject(o) {
12120  var ctor,prot;
12121
12122  if (is_plain_object_isObject(o) === false) return false;
12123
12124  // If has modified constructor
12125  ctor = o.constructor;
12126  if (ctor === undefined) return true;
12127
12128  // If has modified prototype
12129  prot = ctor.prototype;
12130  if (is_plain_object_isObject(prot) === false) return false;
12131
12132  // If constructor does not have an Object-specific method
12133  if (prot.hasOwnProperty('isPrototypeOf') === false) {
12134    return false;
12135  }
12136
12137  // Most likely a plain Object
12138  return true;
12139}
12140
12141
12142
12143;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-update-effect.js
12144/**
12145 * WordPress dependencies
12146 */
12147
12148
12149/**
12150 * A `React.useEffect` that will not run on the first render.
12151 * Source:
12152 * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts
12153 *
12154 * @param {import('react').EffectCallback} effect
12155 * @param {import('react').DependencyList} deps
12156 */
12157function use_update_effect_useUpdateEffect(effect, deps) {
12158  const mounted = (0,external_wp_element_namespaceObject.useRef)(false);
12159  (0,external_wp_element_namespaceObject.useEffect)(() => {
12160    if (mounted.current) {
12161      return effect();
12162    }
12163    mounted.current = true;
12164    return undefined;
12165    // Disable reasons:
12166    // 1. This hook needs to pass a dep list that isn't an array literal
12167    // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
12168    // see https://github.com/WordPress/gutenberg/pull/41166
12169    // eslint-disable-next-line react-hooks/exhaustive-deps
12170  }, deps);
12171}
12172/* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect);
12173
12174;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/context-system-provider.js
12175
12176/**
12177 * External dependencies
12178 */
12179
12180
12181
12182
12183/**
12184 * WordPress dependencies
12185 */
12186
12187
12188
12189/**
12190 * Internal dependencies
12191 */
12192
12193const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{});
12194const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext);
12195
12196/**
12197 * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
12198 *
12199 * Note: This function will warn if it detects an un-memoized `value`
12200 *
12201 * @param {Object}              props
12202 * @param {Record<string, any>} props.value
12203 * @return {Record<string, any>} The consolidated value.
12204 */
12205function useContextSystemBridge({
12206  value
12207}) {
12208  const parentContext = useComponentsContext();
12209  const valueRef = (0,external_wp_element_namespaceObject.useRef)(value);
12210  use_update_effect(() => {
12211    if (
12212    // Objects are equivalent.
12213    es6_default()(valueRef.current, value) &&
12214    // But not the same reference.
12215    valueRef.current !== value) {
12216       false ? 0 : void 0;
12217    }
12218  }, [value]);
12219
12220  // `parentContext` will always be memoized (i.e., the result of this hook itself)
12221  // or the default value from when the `ComponentsContext` was originally
12222  // initialized (which will never change, it's a static variable)
12223  // so this memoization will prevent `deepmerge()` from rerunning unless
12224  // the references to `value` change OR the `parentContext` has an actual material change
12225  // (because again, it's guaranteed to be memoized or a static reference to the empty object
12226  // so we know that the only changes for `parentContext` are material ones... i.e., why we
12227  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
12228  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
12229  // correctly warning when the `value` isn't being properly memoized. All of that to say
12230  // that this should be super safe to assume that `useMemo` will only run on actual
12231  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!
12232  const config = (0,external_wp_element_namespaceObject.useMemo)(() => {
12233    // Deep clone `parentContext` to avoid mutating it later.
12234    return cjs_default()(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
12235      isMergeableObject: is_plain_object_isPlainObject
12236    });
12237  }, [parentContext, value]);
12238  return config;
12239}
12240
12241/**
12242 * A Provider component that can modify props for connected components within
12243 * the Context system.
12244 *
12245 * @example
12246 * ```jsx
12247 * <ContextSystemProvider value={{ Button: { size: 'small' }}}>
12248 *   <Button>...</Button>
12249 * </ContextSystemProvider>
12250 * ```
12251 *
12252 * @template {Record<string, any>} T
12253 * @param {Object}                    options
12254 * @param {import('react').ReactNode} options.children Children to render.
12255 * @param {T}                         options.value    Props to render into connected components.
12256 * @return {JSX.Element} A Provider wrapped component.
12257 */
12258const BaseContextSystemProvider = ({
12259  children,
12260  value
12261}) => {
12262  const contextValue = useContextSystemBridge({
12263    value
12264  });
12265  return (0,external_wp_element_namespaceObject.createElement)(ComponentsContext.Provider, {
12266    value: contextValue
12267  }, children);
12268};
12269const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider);
12270
12271;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/constants.js
12272const COMPONENT_NAMESPACE = 'data-wp-component';
12273const CONNECTED_NAMESPACE = 'data-wp-c16t';
12274
12275/**
12276 * Special key where the connected namespaces are stored.
12277 * This is attached to Context connected components as a static property.
12278 */
12279const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
12280
12281;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/utils.js
12282/**
12283 * Internal dependencies
12284 */
12285
12286
12287/**
12288 * Creates a dedicated context namespace HTML attribute for components.
12289 * ns is short for "namespace"
12290 *
12291 * @example
12292 * ```jsx
12293 * <div {...ns('Container')} />
12294 * ```
12295 *
12296 * @param {string} componentName The name for the component.
12297 * @return {Record<string, any>} A props object with the namespaced HTML attribute.
12298 */
12299function getNamespace(componentName) {
12300  return {
12301    [COMPONENT_NAMESPACE]: componentName
12302  };
12303}
12304
12305/**
12306 * Creates a dedicated connected context namespace HTML attribute for components.
12307 * ns is short for "namespace"
12308 *
12309 * @example
12310 * ```jsx
12311 * <div {...cns()} />
12312 * ```
12313 *
12314 * @return {Record<string, any>} A props object with the namespaced HTML attribute.
12315 */
12316function getConnectedNamespace() {
12317  return {
12318    [CONNECTED_NAMESPACE]: true
12319  };
12320}
12321
12322;// CONCATENATED MODULE: .
vendor: 14,781 bytes, lines 12322-12638
12322/node_modules/tslib/tslib.es6.mjs
12323/******************************************************************************
12324Copyright (c) Microsoft Corporation.
12325
12326Permission to use, copy, modify, and/or distribute this software for any
12327purpose with or without fee is hereby granted.
12328
12329THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
12330REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
12331AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12332INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12333LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12334OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
12335PERFORMANCE OF THIS SOFTWARE.
12336***************************************************************************** */
12337/* global Reflect, Promise, SuppressedError, Symbol */
12338
12339var extendStatics = function(d, b) {
12340  extendStatics = Object.setPrototypeOf ||
12341      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
12342      function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
12343  return extendStatics(d, b);
12344};
12345
12346function __extends(d, b) {
12347  if (typeof b !== "function" && b !== null)
12348      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12349  extendStatics(d, b);
12350  function __() { this.constructor = d; }
12351  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12352}
12353
12354var __assign = function() {
12355  __assign = Object.assign || function __assign(t) {
12356      for (var s, i = 1, n = arguments.length; i < n; i++) {
12357          s = arguments[i];
12358          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
12359      }
12360      return t;
12361  }
12362  return __assign.apply(this, arguments);
12363}
12364
12365function __rest(s, e) {
12366  var t = {};
12367  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
12368      t[p] = s[p];
12369  if (s != null && typeof Object.getOwnPropertySymbols === "function")
12370      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
12371          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
12372              t[p[i]] = s[p[i]];
12373      }
12374  return t;
12375}
12376
12377function __decorate(decorators, target, key, desc) {
12378  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
12379  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
12380  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
12381  return c > 3 && r && Object.defineProperty(target, key, r), r;
12382}
12383
12384function __param(paramIndex, decorator) {
12385  return function (target, key) { decorator(target, key, paramIndex); }
12386}
12387
12388function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
12389  function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
12390  var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
12391  var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
12392  var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
12393  var _, done = false;
12394  for (var i = decorators.length - 1; i >= 0; i--) {
12395      var context = {};
12396      for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
12397      for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12398      context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
12399      var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
12400      if (kind === "accessor") {
12401          if (result === void 0) continue;
12402          if (result === null || typeof result !== "object") throw new TypeError("Object expected");
12403          if (_ = accept(result.get)) descriptor.get = _;
12404          if (_ = accept(result.set)) descriptor.set = _;
12405          if (_ = accept(result.init)) initializers.unshift(_);
12406      }
12407      else if (_ = accept(result)) {
12408          if (kind === "field") initializers.unshift(_);
12409          else descriptor[key] = _;
12410      }
12411  }
12412  if (target) Object.defineProperty(target, contextIn.name, descriptor);
12413  done = true;
12414};
12415
12416function __runInitializers(thisArg, initializers, value) {
12417  var useValue = arguments.length > 2;
12418  for (var i = 0; i < initializers.length; i++) {
12419      value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
12420  }
12421  return useValue ? value : void 0;
12422};
12423
12424function __propKey(x) {
12425  return typeof x === "symbol" ? x : "".concat(x);
12426};
12427
12428function __setFunctionName(f, name, prefix) {
12429  if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
12430  return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
12431};
12432
12433function __metadata(metadataKey, metadataValue) {
12434  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
12435}
12436
12437function __awaiter(thisArg, _arguments, P, generator) {
12438  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
12439  return new (P || (P = Promise))(function (resolve, reject) {
12440      function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
12441      function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
12442      function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
12443      step((generator = generator.apply(thisArg, _arguments || [])).next());
12444  });
12445}
12446
12447function __generator(thisArg, body) {
12448  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
12449  return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
12450  function verb(n) { return function (v) { return step([n, v]); }; }
12451  function step(op) {
12452      if (f) throw new TypeError("Generator is already executing.");
12453      while (g && (g = 0, op[0] && (_ = 0)), _) try {
12454          if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
12455          if (y = 0, t) op = [op[0] & 2, t.value];
12456          switch (op[0]) {
12457              case 0: case 1: t = op; break;
12458              case 4: _.label++; return { value: op[1], done: false };
12459              case 5: _.label++; y = op[1]; op = [0]; continue;
12460              case 7: op = _.ops.pop(); _.trys.pop(); continue;
12461              default:
12462                  if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
12463                  if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
12464                  if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
12465                  if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
12466                  if (t[2]) _.ops.pop();
12467                  _.trys.pop(); continue;
12468          }
12469          op = body.call(thisArg, _);
12470      } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
12471      if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
12472  }
12473}
12474
12475var __createBinding = Object.create ? (function(o, m, k, k2) {
12476  if (k2 === undefined) k2 = k;
12477  var desc = Object.getOwnPropertyDescriptor(m, k);
12478  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
12479      desc = { enumerable: true, get: function() { return m[k]; } };
12480  }
12481  Object.defineProperty(o, k2, desc);
12482}) : (function(o, m, k, k2) {
12483  if (k2 === undefined) k2 = k;
12484  o[k2] = m[k];
12485});
12486
12487function __exportStar(m, o) {
12488  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
12489}
12490
12491function __values(o) {
12492  var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
12493  if (m) return m.call(o);
12494  if (o && typeof o.length === "number") return {
12495      next: function () {
12496          if (o && i >= o.length) o = void 0;
12497          return { value: o && o[i++], done: !o };
12498      }
12499  };
12500  throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
12501}
12502
12503function __read(o, n) {
12504  var m = typeof Symbol === "function" && o[Symbol.iterator];
12505  if (!m) return o;
12506  var i = m.call(o), r, ar = [], e;
12507  try {
12508      while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
12509  }
12510  catch (error) { e = { error: error }; }
12511  finally {
12512      try {
12513          if (r && !r.done && (m = i["return"])) m.call(i);
12514      }
12515      finally { if (e) throw e.error; }
12516  }
12517  return ar;
12518}
12519
12520/** @deprecated */
12521function __spread() {
12522  for (var ar = [], i = 0; i < arguments.length; i++)
12523      ar = ar.concat(__read(arguments[i]));
12524  return ar;
12525}
12526
12527/** @deprecated */
12528function __spreadArrays() {
12529  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
12530  for (var r = Array(s), k = 0, i = 0; i < il; i++)
12531      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
12532          r[k] = a[j];
12533  return r;
12534}
12535
12536function __spreadArray(to, from, pack) {
12537  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
12538      if (ar || !(i in from)) {
12539          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
12540          ar[i] = from[i];
12541      }
12542  }
12543  return to.concat(ar || Array.prototype.slice.call(from));
12544}
12545
12546function __await(v) {
12547  return this instanceof __await ? (this.v = v, this) : new __await(v);
12548}
12549
12550function __asyncGenerator(thisArg, _arguments, generator) {
12551  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
12552  var g = generator.apply(thisArg, _arguments || []), i, q = [];
12553  return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
12554  function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
12555  function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
12556  function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
12557  function fulfill(value) { resume("next", value); }
12558  function reject(value) { resume("throw", value); }
12559  function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
12560}
12561
12562function __asyncDelegator(o) {
12563  var i, p;
12564  return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
12565  function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
12566}
12567
12568function __asyncValues(o) {
12569  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
12570  var m = o[Symbol.asyncIterator], i;
12571  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
12572  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
12573  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
12574}
12575
12576function __makeTemplateObject(cooked, raw) {
12577  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
12578  return cooked;
12579};
12580
12581var __setModuleDefault = Object.create ? (function(o, v) {
12582  Object.defineProperty(o, "default", { enumerable: true, value: v });
12583}) : function(o, v) {
12584  o["default"] = v;
12585};
12586
12587function __importStar(mod) {
12588  if (mod && mod.__esModule) return mod;
12589  var result = {};
12590  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
12591  __setModuleDefault(result, mod);
12592  return result;
12593}
12594
12595function __importDefault(mod) {
12596  return (mod && mod.__esModule) ? mod : { default: mod };
12597}
12598
12599function __classPrivateFieldGet(receiver, state, kind, f) {
12600  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
12601  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
12602  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
12603}
12604
12605function __classPrivateFieldSet(receiver, state, value, kind, f) {
12606  if (kind === "m") throw new TypeError("Private method is not writable");
12607  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
12608  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
12609  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
12610}
12611
12612function __classPrivateFieldIn(state, receiver) {
12613  if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
12614  return typeof state === "function" ? receiver === state : state.has(receiver);
12615}
12616
12617function __addDisposableResource(env, value, async) {
12618  if (value !== null && value !== void 0) {
12619    if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
12620    var dispose;
12621    if (async) {
12622        if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
12623        dispose = value[Symbol.asyncDispose];
12624    }
12625    if (dispose === void 0) {
12626        if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
12627        dispose = value[Symbol.dispose];
12628    }
12629    if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
12630    env.stack.push({ value: value, dispose: dispose, async: async });
12631  }
12632  else if (async) {
12633    env.stack.push({ async: true });
12634  }
12635  return value;
12636}
12637
12638var _SuppressedError = 
vendor: 1,130 bytes, lines 12638-12683
12638typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
12639  var e = new Error(message);
12640  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
12641};
12642
12643function __disposeResources(env) {
12644  function fail(e) {
12645    env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
12646    env.hasError = true;
12647  }
12648  function next() {
12649    while (env.stack.length) {
12650      var rec = env.stack.pop();
12651      try {
12652        var result = rec.dispose && rec.dispose.call(rec.value);
12653        if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
12654      }
12655      catch (e) {
12656          fail(e);
12657      }
12658    }
12659    if (env.hasError) throw env.error;
12660  }
12661  return next();
12662}
12663
12664/* harmony default export */ const tslib_es6 = ({
12665  __extends,
12666  __assign,
12667  __rest,
12668  __decorate,
12669  __param,
12670  __metadata,
12671  __awaiter,
12672  __generator,
12673  __createBinding,
12674  __exportStar,
12675  __values,
12676  __read,
12677  __spread,
12678  __spreadArrays,
12679  __spreadArray,
12680  __await,
12681  __asyncGenerator,
12682  __asyncDelegator,
12683  __asyncValues,
12684  __makeTemplateObject,
12685  __importStar,
12686  __importDefault,
12687  __classPrivateFieldGet,
12688  __classPrivateFieldSet,
12689  __classPrivateFieldIn,
12690  __addDisposableResource,
12691  __disposeResources,
12692});
12693
12694;// CONCATENATED MODULE: ./node_modules/lower-case/dist.es2015/index.js
12695/**
12696 * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
12697 */
12698var SUPPORTED_LOCALE = {
12699    tr: {
12700        regexp: /\u0130|\u0049|\u0049\u0307/g,
12701        map: {
12702            İ: "\u0069",
12703            I: "\u0131",
12704            İ: "\u0069",
12705        },
12706    },
12707    az: {
12708        regexp: /\u0130/g,
12709        map: {
12710            İ: "\u0069",
12711            I: "\u0131",
12712            İ: "\u0069",
12713        },
12714    },
12715    lt: {
12716        regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g,
12717        map: {
12718            I: "\u0069\u0307",
12719            J: "\u006A\u0307",
12720            Ä®: "\u012F\u0307",
12721            Ì: "\u0069\u0307\u0300",
12722            Í: "\u0069\u0307\u0301",
12723            Ĩ: "\u0069\u0307\u0303",
12724        },
12725    },
12726};
12727/**
12728 * Localized lower case.
12729 */
12730function localeLowerCase(str, locale) {
12731    var lang = SUPPORTED_LOCALE[locale.toLowerCase()];
12732    if (lang)
12733        return lowerCase(str.replace(lang.regexp, function (m) { return lang.map[m]; }));
12734    return lowerCase(str);
12735}
12736/**
12737 * Lower case as a function.
12738 */
12739function lowerCase(str) {
12740    return str.toLowerCase();
12741}
12742
12743;// CONCATENATED MODULE: ./node_modules/no-case/dist.es2015/index.js
12744
12745// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
12746var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
12747// Remove all non-word characters.
12748var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
12749/**
12750 * Normalize the string into something other libraries can manipulate easier.
12751 */
12752function noCase(input, options) {
12753    if (options === void 0) { options = {}; }
12754    var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
12755    var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
12756    var start = 0;
12757    var end = result.length;
12758    // Trim the delimiter from around the output string.
12759    while (result.charAt(start) === "\0")
12760        start++;
12761    while (result.charAt(end - 1) === "\0")
12762        end--;
12763    // Transform each token independently.
12764    return result.slice(start, end).split("\0").map(transform).join(delimiter);
12765}
12766/**
12767 * Replace `re` in the input string with the replacement value.
12768 */
12769function replace(input, re, value) {
12770    if (re instanceof RegExp)
12771        return input.replace(re, value);
12772    return re.reduce(function (input, re) { return input.replace(re, value); }, input);
12773}
12774
12775;// CONCATENATED MODULE: ./node_modules/dot-case/dist.es2015/index.js
12776
12777
12778function dotCase(input, options) {
12779    if (options === void 0) { options = {}; }
12780    return noCase(input, __assign({ delimiter: "." }, options));
12781}
12782
12783;// CONCATENATED MODULE: ./node_modules/param-case/dist.es2015/index.js
12784
12785
12786function paramCase(input, options) {
12787    if (options === void 0) { options = {}; }
12788    return dotCase(input, __assign({ delimiter: "-" }, options));
12789}
12790
12791;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js
12792/**
12793 * Memize options object.
12794 *
12795 * @typedef MemizeOptions
12796 *
12797 * @property {number} [maxSize] Maximum size of the cache.
12798 */
12799
12800/**
12801 * Internal cache entry.
12802 *
12803 * @typedef MemizeCacheNode
12804 *
12805 * @property {?MemizeCacheNode|undefined} [prev] Previous node.
12806 * @property {?MemizeCacheNode|undefined} [next] Next node.
12807 * @property {Array<*>}                   args   Function arguments for cache
12808 *                                               entry.
12809 * @property {*}                          val    Function result.
12810 */
12811
12812/**
12813 * Properties of the enhanced function for controlling cache.
12814 *
12815 * @typedef MemizeMemoizedFunction
12816 *
12817 * @property {()=>void} clear Clear the cache.
12818 */
12819
12820/**
12821 * Accepts a function to be memoized, and returns a new memoized function, with
12822 * optional options.
12823 *
12824 * @template {(...args: any[]) => any} F
12825 *
12826 * @param {F}             fn        Function to memoize.
12827 * @param {MemizeOptions} [options] Options object.
12828 *
12829 * @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function.
12830 */
12831function memize(fn, options) {
12832	var size = 0;
12833
12834	/** @type {?MemizeCacheNode|undefined} */
12835	var head;
12836
12837	/** @type {?MemizeCacheNode|undefined} */
12838	var tail;
12839
12840	options = options || {};
12841
12842	function memoized(/* ...args */) {
12843		var node = head,
12844			len = arguments.length,
12845			args,
12846			i;
12847
12848		searchCache: while (node) {
12849			// Perform a shallow equality test to confirm that whether the node
12850			// under test is a candidate for the arguments passed. Two arrays
12851			// are shallowly equal if their length matches and each entry is
12852			// strictly equal between the two sets. Avoid abstracting to a
12853			// function which could incur an arguments leaking deoptimization.
12854
12855			// Check whether node arguments match arguments length
12856			if (node.args.length !== arguments.length) {
12857				node = node.next;
12858				continue;
12859			}
12860
12861			// Check whether node arguments match arguments values
12862			for (i = 0; i < len; i++) {
12863				if (node.args[i] !== arguments[i]) {
12864					node = node.next;
12865					continue searchCache;
12866				}
12867			}
12868
12869			// At this point we can assume we've found a match
12870
12871			// Surface matched node to head if not already
12872			if (node !== head) {
12873				// As tail, shift to previous. Must only shift if not also
12874				// head, since if both head and tail, there is no previous.
12875				if (node === tail) {
12876					tail = node.prev;
12877				}
12878
12879				// Adjust siblings to point to each other. If node was tail,
12880				// this also handles new tail's empty `next` assignment.
12881				/** @type {MemizeCacheNode} */ (node.prev).next = node.next;
12882				if (node.next) {
12883					node.next.prev = node.prev;
12884				}
12885
12886				node.next = head;
12887				node.prev = null;
12888				/** @type {MemizeCacheNode} */ (head).prev = node;
12889				head = node;
12890			}
12891
12892			// Return immediately
12893			return node.val;
12894		}
12895
12896		// No cached value found. Continue to insertion phase:
12897
12898		// Create a copy of arguments (avoid leaking deoptimization)
12899		args = new Array(len);
12900		for (i = 0; i < len; i++) {
12901			args[i] = arguments[i];
12902		}
12903
12904		node = {
12905			args: args,
12906
12907			// Generate the result from original function
12908			val: fn.apply(null, args),
12909		};
12910
12911		// Don't need to check whether node is already head, since it would
12912		// have been returned above already if it was
12913
12914		// Shift existing head down list
12915		if (head) {
12916			head.prev = node;
12917			node.next = head;
12918		} else {
12919			// If no head, follows that there's no tail (at initial or reset)
12920			tail = node;
12921		}
12922
12923		// Trim tail if we're reached max size and are pending cache insertion
12924		if (size === /** @type {MemizeOptions} */ (options).maxSize) {
12925			tail = /** @type {MemizeCacheNode} */ (tail).prev;
12926			/** @type {MemizeCacheNode} */ (tail).next = null;
12927		} else {
12928			size++;
12929		}
12930
12931		head = node;
12932
12933		return node.val;
12934	}
12935
12936	memoized.clear = function () {
12937		head = null;
12938		tail = null;
12939		size = 0;
12940	};
12941
12942	// Ignore reason: There's not a clear solution to create an intersection of
12943	// the function with additional properties, where the goal is to retain the
12944	// function signature of the incoming argument and add control properties
12945	// on the return value.
12946
12947	// @ts-ignore
12948	return memoized;
12949}
12950
12951
12952
12953;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/get-styled-class-name-from-key.js
12954/**
12955 * External dependencies
12956 */
12957
12958
12959
12960/**
12961 * Generates the connected component CSS className based on the namespace.
12962 *
12963 * @param namespace The name of the connected component.
12964 * @return The generated CSS className.
12965 */
12966function getStyledClassName(namespace) {
12967  const kebab = paramCase(namespace);
12968  return `components-${kebab}`;
12969}
12970const getStyledClassNameFromKey = memize(getStyledClassName);
12971
12972;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
12973/*
12974
12975Based off glamor's StyleSheet, thanks Sunil ❤️
12976
12977high performance StyleSheet for css-in-js systems
12978
12979- uses multiple style tags behind the scenes for millions of rules
12980- uses `insertRule` for appending in production for *much* faster performance
12981
12982// usage
12983
12984import { StyleSheet } from '@emotion/sheet'
12985
12986let styleSheet = new StyleSheet({ key: '', container: document.head })
12987
12988styleSheet.insert('#box { border: 1px solid red; }')
12989- appends a css rule into the stylesheet
12990
12991styleSheet.flush()
12992- empties the stylesheet of all its contents
12993
12994*/
12995// $FlowFixMe
12996function sheetForTag(tag) {
12997  if (tag.sheet) {
12998    // $FlowFixMe
12999    return tag.sheet;
13000  } // this weirdness brought to you by firefox
13001
13002  /* istanbul ignore next */
13003
13004
13005  for (var i = 0; i < document.styleSheets.length; i++) {
13006    if (document.styleSheets[i].ownerNode === tag) {
13007      // $FlowFixMe
13008      return document.styleSheets[i];
13009    }
13010  }
13011}
13012
13013function createStyleElement(options) {
13014  var tag = document.createElement('style');
13015  tag.setAttribute('data-emotion', options.key);
13016
13017  if (options.nonce !== undefined) {
13018    tag.setAttribute('nonce', options.nonce);
13019  }
13020
13021  tag.appendChild(document.createTextNode(''));
13022  tag.setAttribute('data-s', '');
13023  return tag;
13024}
13025
13026var emotion_sheet_browser_esm_StyleSheet = /*#__PURE__*/function () {
13027  function StyleSheet(options) {
13028    var _this = this;
13029
13030    this._insertTag = function (tag) {
13031      var before;
13032
13033      if (_this.tags.length === 0) {
13034        if (_this.insertionPoint) {
13035          before = _this.insertionPoint.nextSibling;
13036        } else if (_this.prepend) {
13037          before = _this.container.firstChild;
13038        } else {
13039          before = _this.before;
13040        }
13041      } else {
13042        before = _this.tags[_this.tags.length - 1].nextSibling;
13043      }
13044
13045      _this.container.insertBefore(tag, before);
13046
13047      _this.tags.push(tag);
13048    };
13049
13050    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
13051    this.tags = [];
13052    this.ctr = 0;
13053    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
13054
13055    this.key = options.key;
13056    this.container = options.container;
13057    this.prepend = options.prepend;
13058    this.insertionPoint = options.insertionPoint;
13059    this.before = null;
13060  }
13061
13062  var _proto = StyleSheet.prototype;
13063
13064  _proto.hydrate = function hydrate(nodes) {
13065    nodes.forEach(this._insertTag);
13066  };
13067
13068  _proto.insert = function insert(rule) {
13069    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
13070    // it's 1 in dev because we insert source maps that map a single rule to a location
13071    // and you can only have one source map per style tag
13072    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
13073      this._insertTag(createStyleElement(this));
13074    }
13075
13076    var tag = this.tags[this.tags.length - 1];
13077
13078    if (false) { var isImportRule; }
13079
13080    if (this.isSpeedy) {
13081      var sheet = sheetForTag(tag);
13082
13083      try {
13084        // this is the ultrafast version, works across browsers
13085        // the big drawback is that the css won't be editable in devtools
13086        sheet.insertRule(rule, sheet.cssRules.length);
13087      } catch (e) {
13088        if (false) {}
13089      }
13090    } else {
13091      tag.appendChild(document.createTextNode(rule));
13092    }
13093
13094    this.ctr++;
13095  };
13096
13097  _proto.flush = function flush() {
13098    // $FlowFixMe
13099    this.tags.forEach(function (tag) {
13100      return tag.parentNode && tag.parentNode.removeChild(tag);
13101    });
13102    this.tags = [];
13103    this.ctr = 0;
13104
13105    if (false) {}
13106  };
13107
13108  return StyleSheet;
13109}();
13110
13111
13112
13113;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js
13114/**
13115 * @param {number}
13116 * @return {number}
13117 */
13118var abs = Math.abs
13119
13120/**
13121 * @param {number}
13122 * @return {string}
13123 */
13124var Utility_from = String.fromCharCode
13125
13126/**
13127 * @param {object}
13128 * @return {object}
13129 */
13130var Utility_assign = Object.assign
13131
13132/**
13133 * @param {string} value
13134 * @param {number} length
13135 * @return {number}
13136 */
13137function hash (value, length) {
13138	return (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3)
13139}
13140
13141/**
13142 * @param {string} value
13143 * @return {string}
13144 */
13145function trim (value) {
13146	return value.trim()
13147}
13148
13149/**
13150 * @param {string} value
13151 * @param {RegExp} pattern
13152 * @return {string?}
13153 */
13154function match (value, pattern) {
13155	return (value = pattern.exec(value)) ? value[0] : value
13156}
13157
13158/**
13159 * @param {string} value
13160 * @param {(string|RegExp)} pattern
13161 * @param {string} replacement
13162 * @return {string}
13163 */
13164function Utility_replace (value, pattern, replacement) {
13165	return value.replace(pattern, replacement)
13166}
13167
13168/**
13169 * @param {string} value
13170 * @param {string} search
13171 * @return {number}
13172 */
13173function indexof (value, search) {
13174	return value.indexOf(search)
13175}
13176
13177/**
13178 * @param {string} value
13179 * @param {number} index
13180 * @return {number}
13181 */
13182function Utility_charat (value, index) {
13183	return value.charCodeAt(index) | 0
13184}
13185
13186/**
13187 * @param {string} value
13188 * @param {number} begin
13189 * @param {number} end
13190 * @return {string}
13191 */
13192function Utility_substr (value, begin, end) {
13193	return value.slice(begin, end)
13194}
13195
13196/**
13197 * @param {string} value
13198 * @return {number}
13199 */
13200function Utility_strlen (value) {
13201	return value.length
13202}
13203
13204/**
13205 * @param {any[]} value
13206 * @return {number}
13207 */
13208function Utility_sizeof (value) {
13209	return value.length
13210}
13211
13212/**
13213 * @param {any} value
13214 * @param {any[]} array
13215 * @return {any}
13216 */
13217function Utility_append (value, array) {
13218	return array.push(value), value
13219}
13220
13221/**
13222 * @param {string[]} array
13223 * @param {function} callback
13224 * @return {string}
13225 */
13226function Utility_combine (array, callback) {
13227	return array.map(callback).join('')
13228}
13229
13230;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js
13231
13232
13233var line = 1
13234var column = 1
13235var Tokenizer_length = 0
13236var position = 0
13237var character = 0
13238var characters = ''
13239
13240/**
13241 * @param {string} value
13242 * @param {object | null} root
13243 * @param {object | null} parent
13244 * @param {string} type
13245 * @param {string[] | string} props
13246 * @param {object[] | string} children
13247 * @param {number} length
13248 */
13249function node (value, root, parent, type, props, children, length) {
13250	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
13251}
13252
13253/**
13254 * @param {object} root
13255 * @param {object} props
13256 * @return {object}
13257 */
13258function copy (root, props) {
13259	return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
13260}
13261
13262/**
13263 * @return {number}
13264 */
13265function Tokenizer_char () {
13266	return character
13267}
13268
13269/**
13270 * @return {number}
13271 */
13272function prev () {
13273	character = position > 0 ? Utility_charat(characters, --position) : 0
13274
13275	if (column--, character === 10)
13276		column = 1, line--
13277
13278	return character
13279}
13280
13281/**
13282 * @return {number}
13283 */
13284function next () {
13285	character = position < Tokenizer_length ? Utility_charat(characters, position++) : 0
13286
13287	if (column++, character === 10)
13288		column = 1, line++
13289
13290	return character
13291}
13292
13293/**
13294 * @return {number}
13295 */
13296function peek () {
13297	return Utility_charat(characters, position)
13298}
13299
13300/**
13301 * @return {number}
13302 */
13303function caret () {
13304	return position
13305}
13306
13307/**
13308 * @param {number} begin
13309 * @param {number} end
13310 * @return {string}
13311 */
13312function slice (begin, end) {
13313	return Utility_substr(characters, begin, end)
13314}
13315
13316/**
13317 * @param {number} type
13318 * @return {number}
13319 */
13320function token (type) {
13321	switch (type) {
13322		// \0 \t \n \r \s whitespace token
13323		case 0: case 9: case 10: case 13: case 32:
13324			return 5
13325		// ! + , / > @ ~ isolate token
13326		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
13327		// ; { } breakpoint token
13328		case 59: case 123: case 125:
13329			return 4
13330		// : accompanied token
13331		case 58:
13332			return 3
13333		// " ' ( [ opening delimit token
13334		case 34: case 39: case 40: case 91:
13335			return 2
13336		// ) ] closing delimit token
13337		case 41: case 93:
13338			return 1
13339	}
13340
13341	return 0
13342}
13343
13344/**
13345 * @param {string} value
13346 * @return {any[]}
13347 */
13348function alloc (value) {
13349	return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), position = 0, []
13350}
13350
13351
13352/**
13353 * @param {any} value
13354 * @return {any}
13355 */
13356function dealloc (value) {
13357	return characters = '', value
13358}
13359
13360/**
13361 * @param {number} type
13362 * @return {string}
13363 */
13364function delimit (type) {
13365	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
13366}
13367
13368/**
13369 * @param {string} value
13370 * @return {string[]}
13371 */
13372function Tokenizer_tokenize (value) {
13373	return dealloc(tokenizer(alloc(value)))
13374}
13375
13376/**
13377 * @param {number} type
13378 * @return {string}
13379 */
13380function whitespace (type) {
13381	while (character = peek())
13382		if (character < 33)
13383			next()
13384		else
13385			break
13386
13387	return token(type) > 2 || token(character) > 3 ? '' : ' '
13388}
13389
13390/**
13391 * @param {string[]} children
13392 * @return {string[]}
13393 */
13394function tokenizer (children) {
13395	while (next())
13396		switch (token(character)) {
13397			case 0: append(identifier(position - 1), children)
13398				break
13399			case 2: append(delimit(character), children)
13400				break
13401			default: append(from(character), children)
13402		}
13403
13404	return children
13405}
13406
13407/**
13408 * @param {number} index
13409 * @param {number} count
13410 * @return {string}
13411 */
13412function escaping (index, count) {
13413	while (--count && next())
13414		// not 0-9 A-F a-f
13415		if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
13416			break
13417
13418	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
13419}
13420
13421/**
13422 * @param {number} type
13423 * @return {number}
13424 */
13425function delimiter (type) {
13426	while (next())
13427		switch (character) {
13428			// ] ) " '
13429			case type:
13430				return position
13431			// " '
13432			case 34: case 39:
13433				if (type !== 34 && type !== 39)
13434					delimiter(character)
13435				break
13436			// (
13437			case 40:
13438				if (type === 41)
13439					delimiter(type)
13440				break
13441			// \
13442			case 92:
13443				next()
13444				break
13445		}
13446
13447	return position
13448}
13449
13450/**
13451 * @param {number} type
13452 * @param {number} index
13453 * @return {number}
13454 */
13455function commenter (type, index) {
13456	while (next())
13457		// //
13458		if (type + character === 47 + 10)
13459			break
13460		// /*
13461		else if (type + character === 42 + 42 && peek() === 47)
13462			break
13463
13464	return '/*' + slice(index, position - 1) + '*' + Utility_from(type === 47 ? type : next())
13465}
13466
13467/**
13468 * @param {number} index
13469 * @return {string}
13470 */
13471function identifier (index) {
13472	while (!token(peek()))
13473		next()
13474
13475	return slice(index, position)
13476}
13477
13478;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js
vendor: 5,717 bytes, lines 13479-13633
13479var MS = '-ms-'
13480var MOZ = '-moz-'
13481var WEBKIT = '-webkit-'
13482
13483var COMMENT = 'comm'
13484var Enum_RULESET = 'rule'
13485var DECLARATION = 'decl'
13486
13487var PAGE = '@page'
13488var MEDIA = '@media'
13489var IMPORT = '@import'
13490var CHARSET = '@charset'
13491var VIEWPORT = '@viewport'
13492var SUPPORTS = '@supports'
13493var DOCUMENT = '@document'
13494var NAMESPACE = '@namespace'
13495var KEYFRAMES = '@keyframes'
13496var FONT_FACE = '@font-face'
13497var COUNTER_STYLE = '@counter-style'
13498var FONT_FEATURE_VALUES = '@font-feature-values'
13499
13500;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js
13501
13502
13503
13504/**
13505 * @param {object[]} children
13506 * @param {function} callback
13507 * @return {string}
13508 */
13509function serialize (children, callback) {
13510	var output = ''
13511	var length = Utility_sizeof(children)
13512
13513	for (var i = 0; i < length; i++)
13514		output += callback(children[i], i, children, callback) || ''
13515
13516	return output
13517}
13518
13519/**
13520 * @param {object} element
13521 * @param {number} index
13522 * @param {object[]} children
13523 * @param {function} callback
13524 * @return {string}
13525 */
13526function stringify (element, index, children, callback) {
13527	switch (element.type) {
13528		case IMPORT: case DECLARATION: return element.return = element.return || element.value
13529		case COMMENT: return ''
13530		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
13531		case Enum_RULESET: element.value = element.props.join(',')
13532	}
13533
13534	return Utility_strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
13535}
13536
13537;// CONCATENATED MODULE: ./node_modules/stylis/src/Prefixer.js
13538
13539
13540
13541/**
13542 * @param {string} value
13543 * @param {number} length
13544 * @return {string}
13545 */
13546function prefix (value, length) {
13547	switch (hash(value, length)) {
13548		// color-adjust
13549		case 5103:
13550			return WEBKIT + 'print-' + value + value
13551		// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
13552		case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921:
13553		// text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
13554		case 5572: case 6356: case 5844: case 3191: case 6645: case 3005:
13555		// mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
13556		case 6391: case 5879: case 5623: case 6135: case 4599: case 4855:
13557		// background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
13558		case 4215: case 6389: case 5109: case 5365: case 5621: case 3829:
13559			return WEBKIT + value + value
13560		// appearance, user-select, transform, hyphens, text-size-adjust
13561		case 5349: case 4246: case 4810: case 6968: case 2756:
13562			return WEBKIT + value + MOZ + value + MS + value + value
13563		// flex, flex-direction
13564		case 6828: case 4268:
13565			return WEBKIT + value + MS + value + value
13566		// order
13567		case 6165:
13568			return WEBKIT + value + MS + 'flex-' + value + value
13569		// align-items
13570		case 5187:
13571			return WEBKIT + value + Utility_replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value
13572		// align-self
13573		case 5443:
13574			return WEBKIT + value + MS + 'flex-item-' + Utility_replace(value, /flex-|-self/, '') + value
13575		// align-content
13576		case 4675:
13577			return WEBKIT + value + MS + 'flex-line-pack' + Utility_replace(value, /align-content|flex-|-self/, '') + value
13578		// flex-shrink
13579		case 5548:
13580			return WEBKIT + value + MS + Utility_replace(value, 'shrink', 'negative') + value
13581		// flex-basis
13582		case 5292:
13583			return WEBKIT + value + MS + Utility_replace(value, 'basis', 'preferred-size') + value
13584		// flex-grow
13585		case 6060:
13586			return WEBKIT + 'box-' + Utility_replace(value, '-grow', '') + WEBKIT + value + MS + Utility_replace(value, 'grow', 'positive') + value
13587		// transition
13588		case 4554:
13589			return WEBKIT + Utility_replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value
13590		// cursor
13591		case 6187:
13592			return Utility_replace(Utility_replace(Utility_replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value
13593		// background, background-image
13594		case 5495: case 3959:
13595			return Utility_replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
13596		// justify-content
13597		case 4968:
13598			return Utility_replace(Utility_replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value
13599		// (margin|padding)-inline-(start|end)
13600		case 4095: case 3583: case 4068: case 2532:
13601			return Utility_replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
13602		// (min|max)?(width|height|inline-size|block-size)
13603		case 8116: case 7059: case 5753: case 5535:
13604		case 5445: case 5701: case 4933: case 4677:
13605		case 5533: case 5789: case 5021: case 4765:
13606			// stretch, max-content, min-content, fill-available
13607			if (Utility_strlen(value) - 1 - length > 6)
13608				switch (Utility_charat(value, length + 1)) {
13609					// (m)ax-content, (m)in-content
13610					case 109:
13611						// -
13612						if (Utility_charat(value, length + 4) !== 45)
13613							break
13614					// (f)ill-available, (f)it-content
13615					case 102:
13616						return Utility_replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value
13617					// (s)tretch
13618					case 115:
13619						return ~indexof(value, 'stretch') ? prefix(Utility_replace(value, 'stretch', 'fill-available'), length) + value : value
13620				}
13621			break
13622		// position: sticky
13623		case 4949:
13624			// (s)ticky?
13625			if (Utility_charat(value, length + 1) !== 115)
13626				break
13627		// display: (flex|inline-flex)
13628		case 6444:
13629			switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
13630				// stic(k)y
13631				case 107:
13632					return Utility_replace(value, ':', ':' + WEBKIT) + value
13633				// (inline-)?fl(e)x
13634				case 101:
13635					return Utility_replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value
13636			}
13637			break
13638		// writing-mode
13639		case 5936:
13640			switch (Utility_charat(value, length + 11)) {
13641				// vertical-l(r)
13642				case 114:
13643					return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value
13644				// vertical-r(l)
13645				case 108:
13646					return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value
13647				// horizontal(-)tb
13648				case 45:
13649					return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value
13650			}
13651
13652			return WEBKIT + value + MS + value + value
13653	}
13654
13655	return value
13656}
13657
13658;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js
13659
13660
13661
13662
13663
13664
13665/**
13666 * @param {function[]} collection
13667 * @return {function}
13668 */
13669function middleware (collection) {
13670	var length = Utility_sizeof(collection)
13671
13672	return function (element, index, children, callback) {
13673		var output = ''
13674
13675		for (var i = 0; i < length; i++)
13676			output += collection[i](element, index, children, callback) || ''
13677
13678		return output
13679	}
13680}
13681
13682/**
13683 * @param {function} callback
13684 * @return {function}
13685 */
13686function rulesheet (callback) {
13687	return function (element) {
13688		if (!element.root)
13689			if (element = element.return)
13690				callback(element)
13691	}
13692}
13693
13694/**
13695 * @param {object} element
13696 * @param {number} index
13697 * @param {object[]} children
13698 * @param {function} callback
13699 */
13700function prefixer (element, index, children, callback) {
13701	if (element.length > -1)
13702		if (!element.return)
13703			switch (element.type) {
13704				case DECLARATION: element.return = prefix(element.value, element.length)
13705					break
13706				case KEYFRAMES:
13707					return serialize([copy(element, {value: Utility_replace(element.value, '@', '@' + WEBKIT)})], callback)
13708				case Enum_RULESET:
13709					if (element.length)
13710						return Utility_combine(element.props, function (value) {
13711							switch (match(value, /(::plac\w+|:read-\w+)/)) {
13712								// :read-(only|write)
13713								case ':read-only': case ':read-write':
13714									return serialize([copy(element, {props: [Utility_replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
13715								// :placeholder
13716								case '::placeholder':
13717									return serialize([
13718										copy(element, {props: [Utility_replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}),
13719										copy(element, {props: [Utility_replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}),
13720										copy(element, {props: [Utility_replace(value, /:(plac\w+)/, MS + 'input-$1')]})
13721									], callback)
13722							}
13723
13724							return ''
13725						})
13726			}
13727}
13728
13729/**
13730 * @param {object} element
13731 * @param {number} index
13732 * @param {object[]} children
13733 */
13734function namespace (element) {
13735	switch (element.type) {
13736		case RULESET:
13737			element.props = element.props.map(function (value) {
13738				return combine(tokenize(value), function (value, index, children) {
13739					switch (charat(value, 0)) {
13740						// \f
13741						case 12:
13742							return substr(value, 1, strlen(value))
13743						// \0 ( + > ~
13744						case 0: case 40: case 43: case 62: case 126:
13745							return value
13746						// :
13747						case 58:
13748							if (children[++index] === 'global')
13749								children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1)
13750						// \s
13751						case 32:
13752							return index === 1 ? '' : value
13753						default:
13754							switch (index) {
13755								case 0: element = value
13756									return sizeof(children) > 1 ? '' : value
13757								case index = sizeof(children) - 1: case 2:
13758									return index === 2 ? value + element + element : value + element
13759								default:
13760									return value
13761							}
13762					}
13763				})
13764			})
13765	}
13766}
13767
13768;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js
13769
13770
13771
13772
13773/**
13774 * @param {string} value
13775 * @return {object[]}
13776 */
13777function compile (value) {
13778	return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
13779}
13780
13781/**
13782 * @param {string} value
13783 * @param {object} root
13784 * @param {object?} parent
13785 * @param {string[]} rule
13786 * @param {string[]} rules
13787 * @param {string[]} rulesets
13788 * @param {number[]} pseudo
13789 * @param {number[]} points
13790 * @param {string[]} declarations
13791 * @return {object}
13792 */
13793function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
13794	var index = 0
13795	var offset = 0
13796	var length = pseudo
13797	var atrule = 0
13798	var property = 0
13799	var previous = 0
13800	var variable = 1
13801	var scanning = 1
13802	var ampersand = 1
13803	var character = 0
13804	var type = ''
13805	var props = rules
13806	var children = rulesets
13807	var reference = rule
13808	var characters = type
13809
13810	while (scanning)
13811		switch (previous = character, character = next()) {
13812			// (
13813			case 40:
13814				if (previous != 108 && characters.charCodeAt(length - 1) == 58) {
13815					if (indexof(characters += Utility_replace(delimit(character), '&', '&\f'), '&\f') != -1)
13816						ampersand = -1
13817					break
13818				}
13819			// " ' [
13820			case 34: case 39: case 91:
13821				characters += delimit(character)
13822				break
13823			// \t \n \r \s
13824			case 9: case 10: case 13: case 32:
13825				characters += whitespace(previous)
13826				break
13827			// \
13828			case 92:
13829				characters += escaping(caret() - 1, 7)
13830				continue
13831			// /
13832			case 47:
13833				switch (peek()) {
13834					case 42: case 47:
13835						Utility_append(comment(commenter(next(), caret()), root, parent), declarations)
13836						break
13837					default:
13838						characters += '/'
13839				}
13840				break
13841			// {
13842			case 123 * variable:
13843				points[index++] = Utility_strlen(characters) * ampersand
13844			// } ; \0
13845			case 125 * variable: case 59: case 0:
13846				switch (character) {
13847					// \0 }
13848					case 0: case 125: scanning = 0
13849					// ;
13850					case 59 + offset:
13851						if (property > 0 && (Utility_strlen(characters) - length))
13852							Utility_append(property >
13852 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(Utility_replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)
13853						break
13854					// @ ;
13855					case 59: characters += ';'
13856					// { rule/at-rule
13857					default:
13858						Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)
13859
13860						if (character === 123)
13861							if (offset === 0)
13862								parse(characters, root, reference, reference, props, rulesets, length, points, children)
13863							else
13864								switch (atrule) {
13865									// d m s
13866									case 100: case 109: case 115:
13867										parse(value, reference, reference, rule && Utility_append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)
13868										break
13869									default:
13870										parse(characters, reference, reference, reference, [''], children, 0, points, children)
13871								}
13872				}
13873
13874				index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo
13875				break
13876			// :
13877			case 58:
13878				length = 1 + Utility_strlen(characters), property = previous
13879			default:
13880				if (variable < 1)
13881					if (character == 123)
13882						--variable
13883					else if (character == 125 && variable++ == 0 && prev() == 125)
13884						continue
13885
13886				switch (characters += Utility_from(character), character * variable) {
13887					// &
13888					case 38:
13889						ampersand = offset > 0 ? 1 : (characters += '\f', -1)
13890						break
13891					// ,
13892					case 44:
13893						points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1
13894						break
13895					// @
13896					case 64:
13897						// -
13898						if (peek() === 45)
13899							characters += delimit(next())
13900
13901						atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++
13902						break
13903					// -
13904					case 45:
13905						if (previous === 45 && Utility_strlen(characters) == 2)
13906							variable = 0
13907				}
13908		}
13909
13910	return rulesets
13911}
13912
13913/**
13914 * @param {string} value
13915 * @param {object} root
13916 * @param {object?} parent
13917 * @param {number} index
13918 * @param {number} offset
13919 * @param {string[]} rules
13920 * @param {number[]} points
13921 * @param {string} type
13922 * @param {string[]} props
13923 * @param {string[]} children
13924 * @param {number} length
13925 * @return {object}
13926 */
13927function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
13928	var post = offset - 1
13929	var rule = offset === 0 ? rules : ['']
13930	var size = Utility_sizeof(rule)
13931
13932	for (var i = 0, j = 0, k = 0; i < index; ++i)
13933		for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
13934			if (z = trim(j > 0 ? rule[x] + ' ' + y : Utility_replace(y, /&\f/g, rule[x])))
13935				props[k++] = z
13936
13937	return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length)
13938}
13939
13940/**
13941 * @param {number} value
13942 * @param {object} root
13943 * @param {object?} parent
13944 * @return {object}
13945 */
13946function comment (value, root, parent) {
13947	return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0)
13948}
13949
13950/**
13951 * @param {string} value
13952 * @param {object} root
13953 * @param {object?} parent
13954 * @param {number} length
13955 * @return {object}
13956 */
13957function declaration (value, root, parent, length) {
13958	return node(value, root, parent, DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length)
13959}
13960
13961;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
13962
13963
13964
13965
13966
13967var last = function last(arr) {
13968  return arr.length ? arr[arr.length - 1] : null;
13969}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
13970
13971
13972var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
13973  var previous = 0;
13974  var character = 0;
13975
13976  while (true) {
13977    previous = character;
13978    character = peek(); // &\f
13979
13980    if (previous === 38 && character === 12) {
13981      points[index] = 1;
13982    }
13983
13984    if (token(character)) {
13985      break;
13986    }
13987
13988    next();
13989  }
13990
13991  return slice(begin, position);
13992};
13993
13994var toRules = function toRules(parsed, points) {
13995  // pretend we've started with a comma
13996  var index = -1;
13997  var character = 44;
13998
13999  do {
14000    switch (token(character)) {
14001      case 0:
14002        // &\f
14003        if (character === 38 && peek() === 12) {
14004          // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
14005          // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
14006          // and when it should just concatenate the outer and inner selectors
14007          // it's very unlikely for this sequence to actually appear in a different c
vendor: 23,256 bytes, lines 14007-14770
14007ontext, so we just leverage this fact here
14008          points[index] = 1;
14009        }
14010
14011        parsed[index] += identifierWithPointTracking(position - 1, points, index);
14012        break;
14013
14014      case 2:
14015        parsed[index] += delimit(character);
14016        break;
14017
14018      case 4:
14019        // comma
14020        if (character === 44) {
14021          // colon
14022          parsed[++index] = peek() === 58 ? '&\f' : '';
14023          points[index] = parsed[index].length;
14024          break;
14025        }
14026
14027      // fallthrough
14028
14029      default:
14030        parsed[index] += Utility_from(character);
14031    }
14032  } while (character = next());
14033
14034  return parsed;
14035};
14036
14037var getRules = function getRules(value, points) {
14038  return dealloc(toRules(alloc(value), points));
14039}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
14040
14041
14042var fixedElements = /* #__PURE__ */new WeakMap();
14043var compat = function compat(element) {
14044  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
14045  // negative .length indicates that this rule has been already prefixed
14046  element.length < 1) {
14047    return;
14048  }
14049
14050  var value = element.value,
14051      parent = element.parent;
14052  var isImplicitRule = element.column === parent.column && element.line === parent.line;
14053
14054  while (parent.type !== 'rule') {
14055    parent = parent.parent;
14056    if (!parent) return;
14057  } // short-circuit for the simplest case
14058
14059
14060  if (element.props.length === 1 && value.charCodeAt(0) !== 58
14061  /* colon */
14062  && !fixedElements.get(parent)) {
14063    return;
14064  } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
14065  // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
14066
14067
14068  if (isImplicitRule) {
14069    return;
14070  }
14071
14072  fixedElements.set(element, true);
14073  var points = [];
14074  var rules = getRules(value, points);
14075  var parentRules = parent.props;
14076
14077  for (var i = 0, k = 0; i < rules.length; i++) {
14078    for (var j = 0; j < parentRules.length; j++, k++) {
14079      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
14080    }
14081  }
14082};
14083var removeLabel = function removeLabel(element) {
14084  if (element.type === 'decl') {
14085    var value = element.value;
14086
14087    if ( // charcode for l
14088    value.charCodeAt(0) === 108 && // charcode for b
14089    value.charCodeAt(2) === 98) {
14090      // this ignores label
14091      element["return"] = '';
14092      element.value = '';
14093    }
14094  }
14095};
14096var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
14097
14098var isIgnoringComment = function isIgnoringComment(element) {
14099  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
14100};
14101
14102var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
14103  return function (element, index, children) {
14104    if (element.type !== 'rule') return;
14105    var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
14106
14107    if (unsafePseudoClasses && cache.compat !== true) {
14108      var prevElement = index > 0 ? children[index - 1] : null;
14109
14110      if (prevElement && isIgnoringComment(last(prevElement.children))) {
14111        return;
14112      }
14113
14114      unsafePseudoClasses.forEach(function (unsafePseudoClass) {
14115        console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
14116      });
14117    }
14118  };
14119};
14120
14121var isImportRule = function isImportRule(element) {
14122  return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
14123};
14124
14125var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
14126  for (var i = index - 1; i >= 0; i--) {
14127    if (!isImportRule(children[i])) {
14128      return true;
14129    }
14130  }
14131
14132  return false;
14133}; // use this to remove incorrect elements from further processing
14134// so they don't get handed to the `sheet` (or anything else)
14135// as that could potentially lead to additional logs which in turn could be overhelming to the user
14136
14137
14138var nullifyElement = function nullifyElement(element) {
14139  element.type = '';
14140  element.value = '';
14141  element["return"] = '';
14142  element.children = '';
14143  element.props = '';
14144};
14145
14146var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
14147  if (!isImportRule(element)) {
14148    return;
14149  }
14150
14151  if (element.parent) {
14152    console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
14153    nullifyElement(element);
14154  } else if (isPrependedWithRegularRules(index, children)) {
14155    console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
14156    nullifyElement(element);
14157  }
14158};
14159
14160var defaultStylisPlugins = [prefixer];
14161
14162var createCache = function createCache(options) {
14163  var key = options.key;
14164
14165  if (false) {}
14166
14167  if ( key === 'css') {
14168    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
14169    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
14170    // note this very very intentionally targets all style elements regardless of the key to ensure
14171    // that creating a cache works inside of render of a React component
14172
14173    Array.prototype.forEach.call(ssrStyles, function (node) {
14174      // we want to only move elements which have a space in the data-emotion attribute value
14175      // because that indicates that it is an Emotion 11 server-side rendered style elements
14176      // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
14177      // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
14178      // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
14179      // will not result in the Emotion 10 styles being destroyed
14180      var dataEmotionAttribute = node.getAttribute('data-emotion');
14181
14182      if (dataEmotionAttribute.indexOf(' ') === -1) {
14183        return;
14184      }
14185      document.head.appendChild(node);
14186      node.setAttribute('data-s', '');
14187    });
14188  }
14189
14190  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
14191
14192  if (false) {}
14193
14194  var inserted = {}; // $FlowFixMe
14195
14196  var container;
14197  var nodesToHydrate = [];
14198
14199  {
14200    container = options.container || document.head;
14201    Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
14202    // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
14203    document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
14204      var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
14205
14206      for (var i = 1; i < attrib.length; i++) {
14207        inserted[attrib[i]] = true;
14208      }
14209
14210      nodesToHydrate.push(node);
14211    });
14212  }
14213
14214  var _insert;
14215
14216  var omnipresentPlugins = [compat, removeLabel];
14217
14218  if (false) {}
14219
14220  {
14221    var currentSheet;
14222    var finalizingPlugins = [stringify,  false ? 0 : rulesheet(function (rule) {
14223      currentSheet.insert(rule);
14224    })];
14225    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
14226
14227    var stylis = function stylis(styles) {
14228      return serialize(compile(styles), serializer);
14229    };
14230
14231    _insert = function insert(selector, serialized, sheet, shouldCache) {
14232      currentSheet = sheet;
14233
14234      if (false) {}
14235
14236      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
14237
14238      if (shouldCache) {
14239        cache.inserted[serialized.name] = true;
14240      }
14241    };
14242  }
14243
14244  var cache = {
14245    key: key,
14246    sheet: new emotion_sheet_browser_esm_StyleSheet({
14247      key: key,
14248      container: container,
14249      nonce: options.nonce,
14250      speedy: options.speedy,
14251      prepend: options.prepend,
14252      insertionPoint: options.insertionPoint
14253    }),
14254    nonce: options.nonce,
14255    inserted: inserted,
14256    registered: {},
14257    insert: _insert
14258  };
14259  cache.sheet.hydrate(nodesToHydrate);
14260  return cache;
14261};
14262
14263/* harmony default export */ const emotion_cache_browser_esm = (createCache);
14264
14265;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/hash/dist/emotion-hash.esm.js
14266/* eslint-disable */
14267// Inspired by https://github.com/garycourt/murmurhash-js
14268// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
14269function murmur2(str) {
14270  // 'm' and 'r' are mixing constants generated offline.
14271  // They're not really 'magic', they just happen to work well.
14272  // const m = 0x5bd1e995;
14273  // const r = 24;
14274  // Initialize the hash
14275  var h = 0; // Mix 4 bytes at a time into the hash
14276
14277  var k,
14278      i = 0,
14279      len = str.length;
14280
14281  for (; len >= 4; ++i, len -= 4) {
14282    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
14283    k =
14284    /* Math.imul(k, m): */
14285    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
14286    k ^=
14287    /* k >>> r: */
14288    k >>> 24;
14289    h =
14290    /* Math.imul(k, m): */
14291    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
14292    /* Math.imul(h, m): */
14293    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
14294  } // Handle the last few bytes of the input array
14295
14296
14297  switch (len) {
14298    case 3:
14299      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
14300
14301    case 2:
14302      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
14303
14304    case 1:
14305      h ^= str.charCodeAt(i) & 0xff;
14306      h =
14307      /* Math.imul(h, m): */
14308      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
14309  } // Do a few final mixes of the hash to ensure the last few
14310  // bytes are well-incorporated.
14311
14312
14313  h ^= h >>> 13;
14314  h =
14315  /* Math.imul(h, m): */
14316  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
14317  return ((h ^ h >>> 15) >>> 0).toString(36);
14318}
14319
14320
14321
14322;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
14323var unitlessKeys = {
14324  animationIterationCount: 1,
14325  aspectRatio: 1,
14326  borderImageOutset: 1,
14327  borderImageSlice: 1,
14328  borderImageWidth: 1,
14329  boxFlex: 1,
14330  boxFlexGroup: 1,
14331  boxOrdinalGroup: 1,
14332  columnCount: 1,
14333  columns: 1,
14334  flex: 1,
14335  flexGrow: 1,
14336  flexPositive: 1,
14337  flexShrink: 1,
14338  flexNegative: 1,
14339  flexOrder: 1,
14340  gridRow: 1,
14341  gridRowEnd: 1,
14342  gridRowSpan: 1,
14343  gridRowStart: 1,
14344  gridColumn: 1,
14345  gridColumnEnd: 1,
14346  gridColumnSpan: 1,
14347  gridColumnStart: 1,
14348  msGridRow: 1,
14349  msGridRowSpan: 1,
14350  msGridColumn: 1,
14351  msGridColumnSpan: 1,
14352  fontWeight: 1,
14353  lineHeight: 1,
14354  opacity: 1,
14355  order: 1,
14356  orphans: 1,
14357  tabSize: 1,
14358  widows: 1,
14359  zIndex: 1,
14360  zoom: 1,
14361  WebkitLineClamp: 1,
14362  // SVG-related properties
14363  fillOpacity: 1,
14364  floodOpacity: 1,
14365  stopOpacity: 1,
14366  strokeDasharray: 1,
14367  strokeDashoffset: 1,
14368  strokeMiterlimit: 1,
14369  strokeOpacity: 1,
14370  strokeWidth: 1
14371};
14372
14373
14374
14375;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
14376function memoize(fn) {
14377  var cache = Object.create(null);
14378  return function (arg) {
14379    if (cache[arg] === undefined) cache[arg] = fn(arg);
14380    return cache[arg];
14381  };
14382}
14383
14384
14385
14386;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
14387
14388
14389
14390
14391var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
14392var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
14393var hyphenateRegex = /[A-Z]|^ms/g;
14394var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
14395
14396var isCustomProperty = function isCustomProperty(property) {
14397  return property.charCodeAt(1) === 45;
14398};
14399
14400var isProcessableValue = function isProcessableValue(value) {
14401  return value != null && typeof value !== 'boolean';
14402};
14403
14404var processStyleName = /* #__PURE__ */memoize(function (styleName) {
14405  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
14406});
14407
14408var processStyleValue = function processStyleValue(key, value) {
14409  switch (key) {
14410    case 'animation':
14411    case 'animationName':
14412      {
14413        if (typeof value === 'string') {
14414          return value.replace(animationRegex, function (match, p1, p2) {
14415            cursor = {
14416              name: p1,
14417              styles: p2,
14418              next: cursor
14419            };
14420            return p1;
14421          });
14422        }
14423      }
14424  }
14425
14426  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
14427    return value + 'px';
14428  }
14429
14430  return value;
14431};
14432
14433if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; }
14434
14435var noComponentSelectorMessage = (/* unused pure expression or super */ null && ('Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.'));
14436
14437function handleInterpolation(mergedProps, registered, interpolation) {
14438  if (interpolation == null) {
14439    return '';
14440  }
14441
14442  if (interpolation.__emotion_styles !== undefined) {
14443    if (false) {}
14444
14445    return interpolation;
14446  }
14447
14448  switch (typeof interpolation) {
14449    case 'boolean':
14450      {
14451        return '';
14452      }
14453
14454    case 'object':
14455      {
14456        if (interpolation.anim === 1) {
14457          cursor = {
14458            name: interpolation.name,
14459            styles: interpolation.styles,
14460            next: cursor
14461          };
14462          return interpolation.name;
14463        }
14464
14465        if (interpolation.styles !== undefined) {
14466          var next = interpolation.next;
14467
14468          if (next !== undefined) {
14469            // not the most efficient thing ever but this is a pretty rare case
14470            // and there will be very few iterations of this generally
14471            while (next !== undefined) {
14472              cursor = {
14473                name: next.name,
14474                styles: next.styles,
14475                next: cursor
14476              };
14477              next = next.next;
14478            }
14479          }
14480
14481          var styles = interpolation.styles + ";";
14482
14483          if (false) {}
14484
14485          return styles;
14486        }
14487
14488        return createStringFromObject(mergedProps, registered, interpolation);
14489      }
14490
14491    case 'function':
14492      {
14493        if (mergedProps !== undefined) {
14494          var previousCursor = cursor;
14495          var result = interpolation(mergedProps);
14496          cursor = previousCursor;
14497          return handleInterpolation(mergedProps, registered, result);
14498        } else if (false) {}
14499
14500        break;
14501      }
14502
14503    case 'string':
14504      if (false) { var replaced, matched; }
14505
14506      break;
14507  } // finalize string values (regular strings and functions interpolated into css calls)
14508
14509
14510  if (registered == null) {
14511    return interpolation;
14512  }
14513
14514  var cached = registered[interpolation];
14515  return cached !== undefined ? cached : interpolation;
14516}
14517
14518function createStringFromObject(mergedProps, registered, obj) {
14519  var string = '';
14520
14521  if (Array.isArray(obj)) {
14522    for (var i = 0; i < obj.length; i++) {
14523      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
14524    }
14525  } else {
14526    for (var _key in obj) {
14527      var value = obj[_key];
14528
14529      if (typeof value !== 'object') {
14530        if (registered != null && registered[value] !== undefined) {
14531          string += _key + "{" + registered[value] + "}";
14532        } else if (isProcessableValue(value)) {
14533          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
14534        }
14535      } else {
14536        if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {}
14537
14538        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
14539          for (var _i = 0; _i < value.length; _i++) {
14540            if (isProcessableValue(value[_i])) {
14541              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
14542            }
14543          }
14544        } else {
14545          var interpolated = handleInterpolation(mergedProps, registered, value);
14546
14547          switch (_key) {
14548            case 'animation':
14549            case 'animationName':
14550              {
14551                string += processStyleName(_key) + ":" + interpolated + ";";
14552                break;
14553              }
14554
14555            default:
14556              {
14557                if (false) {}
14558
14559                string += _key + "{" + interpolated + "}";
14560              }
14561          }
14562        }
14563      }
14564    }
14565  }
14566
14567  return string;
14568}
14569
14570var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
14571var sourceMapPattern;
14572
14573if (false) {} // this is the cursor for keyframes
14574// keyframes are stored on the SerializedStyles object as a linked list
14575
14576
14577var cursor;
14578var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) {
14579  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
14580    return args[0];
14581  }
14582
14583  var stringMode = true;
14584  var styles = '';
14585  cursor = undefined;
14586  var strings = args[0];
14587
14588  if (strings == null || strings.raw === undefined) {
14589    stringMode = false;
14590    styles += handleInterpolation(mergedProps, registered, strings);
14591  } else {
14592    if (false) {}
14593
14594    styles += strings[0];
14595  } // we start at 1 since we've already handled the first arg
14596
14597
14598  for (var i = 1; i < args.length; i++) {
14599    styles += handleInterpolation(mergedProps, registered, args[i]);
14600
14601    if (stringMode) {
14602      if (false) {}
14603
14604      styles += strings[i];
14605    }
14606  }
14607
14608  var sourceMap;
14609
14610  if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time
14611
14612
14613  labelPattern.lastIndex = 0;
14614  var identifierName = '';
14615  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
14616
14617  while ((match = labelPattern.exec(styles)) !== null) {
14618    identifierName += '-' + // $FlowFixMe we know it's not null
14619    match[1];
14620  }
14621
14622  var name = murmur2(styles) + identifierName;
14623
14624  if (false) {}
14625
14626  return {
14627    name: name,
14628    styles: styles,
14629    next: cursor
14630  };
14631};
14632
14633
14634
14635;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js
14636
14637
14638
14639
14640
14641
14642
14643
14644var emotion_element_699e6908_browser_esm_hasOwnProperty = {}.hasOwnProperty;
14645
14646var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case
14647// because this module is primarily intended for the browser and node
14648// but it's also required in react native and similar environments sometimes
14649// and we could have a special build just for that
14650// but this is much easier and the native packages
14651// might use a different theme context in the future anyway
14652typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({
14653  key: 'css'
14654}) : null);
14655
14656if (false) {}
14657
14658var CacheProvider = EmotionCacheContext.Provider;
14659var __unsafe_useEmotionCache = function useEmotionCache() {
14660  return (0,external_React_.useContext)(EmotionCacheContext);
14661};
14662
14663var emotion_element_699e6908_browser_esm_withEmotionCache = function withEmotionCache(func) {
14664  // $FlowFixMe
14665  return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) {
14666    // the cache will never be null in the browser
14667    var cache = (0,external_React_.useContext)(EmotionCacheContext);
14668    return func(props, cache, ref);
14669  });
14670};
14671
14672var emotion_element_699e6908_browser_esm_ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({});
14673
14674if (false) {}
14675
14676var useTheme = function useTheme() {
14677  return useContext(emotion_element_699e6908_browser_esm_ThemeContext);
14678};
14679
14680var getTheme = function getTheme(outerTheme, theme) {
14681  if (typeof theme === 'function') {
14682    var mergedTheme = theme(outerTheme);
14683
14684    if (false) {}
14685
14686    return mergedTheme;
14687  }
14688
14689  if (false) {}
14690
14691  return _extends({}, outerTheme, theme);
14692};
14693
14694var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) {
14695  return weakMemoize(function (theme) {
14696    return getTheme(outerTheme, theme);
14697  });
14698})));
14699var ThemeProvider = function ThemeProvider(props) {
14700  var theme = useContext(emotion_element_699e6908_browser_esm_ThemeContext);
14701
14702  if (props.theme !== theme) {
14703    theme = createCacheWithTheme(theme)(props.theme);
14704  }
14705
14706  return /*#__PURE__*/createElement(emotion_element_699e6908_browser_esm_ThemeContext.Provider, {
14707    value: theme
14708  }, props.children);
14709};
14710function withTheme(Component) {
14711  var componentName = Component.displayName || Component.name || 'Component';
14712
14713  var render = function render(props, ref) {
14714    var theme = useContext(emotion_element_699e6908_browser_esm_ThemeContext);
14715    return /*#__PURE__*/createElement(Component, _extends({
14716      theme: theme,
14717      ref: ref
14718    }, props));
14719  }; // $FlowFixMe
14720
14721
14722  var WithTheme = /*#__PURE__*/forwardRef(render);
14723  WithTheme.displayName = "WithTheme(" + componentName + ")";
14724  return hoistNonReactStatics(WithTheme, Component);
14725}
14726
14727var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
14728  // V8
14729  var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
14730
14731  if (match) {
14732    // The match may be something like 'Object.createEmotionProps'
14733    var parts = match[1].split('.');
14734    return parts[parts.length - 1];
14735  } // Safari / Firefox
14736
14737
14738  match = /^([A-Za-z0-9$.]+)@/.exec(line);
14739  if (match) return match[1];
14740  return undefined;
14741};
14742
14743var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
14744// identifiers, thus we only need to replace what is a valid character for JS,
14745// but not for CSS.
14746
14747var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
14748  return identifier.replace(/\$/g, '-');
14749};
14750
14751var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
14752  if (!stackTrace) return undefined;
14753  var lines = stackTrace.split('\n');
14754
14755  for (var i = 0; i < lines.length; i++) {
14756    var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
14757
14758    if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
14759
14760    if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
14761    // uppercase letter
14762
14763    if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
14764  }
14765
14766  return undefined;
14767};
14768
14769var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
14770var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
vendor: 6,255 bytes, lines 14771-14953
14771var emotion_element_699e6908_browser_esm_createEmotionProps = function createEmotionProps(type, props) {
14772  if (false) {}
14773
14774  var newProps = {};
14775
14776  for (var key in props) {
14777    if (emotion_element_699e6908_browser_esm_hasOwnProperty.call(props, key)) {
14778      newProps[key] = props[key];
14779    }
14780  }
14781
14782  newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
14783  // the label hasn't already been computed
14784
14785  if (false) { var label; }
14786
14787  return newProps;
14788};
14789
14790var Noop = function Noop() {
14791  return null;
14792};
14793
14794var emotion_element_699e6908_browser_esm_Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (emotion_element_699e6908_browser_esm_withEmotionCache(function (props, cache, ref) {
14795  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
14796  // not passing the registered cache to serializeStyles because it would
14797  // make certain babel optimisations not possible
14798
14799  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
14800    cssProp = cache.registered[cssProp];
14801  }
14802
14803  var type = props[typePropName];
14804  var registeredStyles = [cssProp];
14805  var className = '';
14806
14807  if (typeof props.className === 'string') {
14808    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
14809  } else if (props.className != null) {
14810    className = props.className + " ";
14811  }
14812
14813  var serialized = serializeStyles(registeredStyles, undefined, useContext(emotion_element_699e6908_browser_esm_ThemeContext));
14814
14815  if (false) { var labelFromStack; }
14816
14817  var rules = insertStyles(cache, serialized, typeof type === 'string');
14818  className += cache.key + "-" + serialized.name;
14819  var newProps = {};
14820
14821  for (var key in props) {
14822    if (emotion_element_699e6908_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) {
14823      newProps[key] = props[key];
14824    }
14825  }
14826
14827  newProps.ref = ref;
14828  newProps.className = className;
14829  var ele = /*#__PURE__*/createElement(type, newProps);
14830  var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
14831
14832
14833  return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
14834})));
14835
14836if (false) {}
14837
14838
14839
14840;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
14841var isBrowser = "object" !== 'undefined';
14842function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) {
14843  var rawClassName = '';
14844  classNames.split(' ').forEach(function (className) {
14845    if (registered[className] !== undefined) {
14846      registeredStyles.push(registered[className] + ";");
14847    } else {
14848      rawClassName += className + " ";
14849    }
14850  });
14851  return rawClassName;
14852}
14853var registerStyles = function registerStyles(cache, serialized, isStringTag) {
14854  var className = cache.key + "-" + serialized.name;
14855
14856  if ( // we only need to add the styles to the registered cache if the
14857  // class name could be used further down
14858  // the tree but if it's a string tag, we know it won't
14859  // so we don't have to add it to registered cache.
14860  // this improves memory usage since we can avoid storing the whole style string
14861  (isStringTag === false || // we need to always store it if we're in compat mode and
14862  // in node since emotion-server relies on whether a style is in
14863  // the registered cache to know whether a style is global or not
14864  // also, note that this check will be dead code eliminated in the browser
14865  isBrowser === false ) && cache.registered[className] === undefined) {
14866    cache.registered[className] = serialized.styles;
14867  }
14868};
14869var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) {
14870  registerStyles(cache, serialized, isStringTag);
14871  var className = cache.key + "-" + serialized.name;
14872
14873  if (cache.inserted[serialized.name] === undefined) {
14874    var current = serialized;
14875
14876    do {
14877      cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
14878
14879      current = current.next;
14880    } while (current !== undefined);
14881  }
14882};
14883
14884
14885
14886;// CONCATENATED MODULE: ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
14887
14888
14889
14890
14891function insertWithoutScoping(cache, serialized) {
14892  if (cache.inserted[serialized.name] === undefined) {
14893    return cache.insert('', serialized, cache.sheet, true);
14894  }
14895}
14896
14897function merge(registered, css, className) {
14898  var registeredStyles = [];
14899  var rawClassName = emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, className);
14900
14901  if (registeredStyles.length < 2) {
14902    return className;
14903  }
14904
14905  return rawClassName + css(registeredStyles);
14906}
14907
14908var createEmotion = function createEmotion(options) {
14909  var cache = emotion_cache_browser_esm(options); // $FlowFixMe
14910
14911  cache.sheet.speedy = function (value) {
14912    if (false) {}
14913
14914    this.isSpeedy = value;
14915  };
14916
14917  cache.compat = true;
14918
14919  var css = function css() {
14920    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
14921      args[_key] = arguments[_key];
14922    }
14923
14924    var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered, undefined);
14925    emotion_utils_browser_esm_insertStyles(cache, serialized, false);
14926    return cache.key + "-" + serialized.name;
14927  };
14928
14929  var keyframes = function keyframes() {
14930    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
14931      args[_key2] = arguments[_key2];
14932    }
14933
14934    var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered);
14935    var animation = "animation-" + serialized.name;
14936    insertWithoutScoping(cache, {
14937      name: serialized.name,
14938      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
14939    });
14940    return animation;
14941  };
14942
14943  var injectGlobal = function injectGlobal() {
14944    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
14945      args[_key3] = arguments[_key3];
14946    }
14947
14948    var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered);
14949    insertWithoutScoping(cache, serialized);
14950  };
14951
14952  var cx = function cx() {
14953    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
14954      args[_key4] = arguments[_key4];
14955    }
14956
14957    return merge(cache.registered, css, emotion_css_create_instance_esm_classnames(args));
14958  };
14959
14960  return {
14961    css: css,
14962    cx: cx,
14963    injectGlobal: injectGlobal,
14964    keyframes: keyframes,
14965    hydrate: function hydrate(ids) {
14966      ids.forEach(function (key) {
14967        cache.inserted[key] = true;
14968      });
14969    },
14970    flush: function flush() {
14971      cache.registered = {};
14972      cache.inserted = {};
14973      cache.sheet.flush();
14974    },
14975    // $FlowFixMe
14976    sheet: cache.sheet,
14977    cache: cache,
14978    getRegisteredStyles: emotion_utils_browser_esm_getRegisteredStyles.bind(null, cache.registered),
14979    merge: merge.bind(null, cache.registered, css)
14980  };
14981};
14982
14983var emotion_css_create_instance_esm_classnames = function classnames(args) {
14984  var cls = '';
14985
14986  for (var i = 0; i < args.length; i++) {
14987    var arg = args[i];
14988    if (arg == null) continue;
14989    var toAdd = void 0;
14990
14991    switch (typeof arg) {
14992      case 'boolean':
14993        break;
14994
14995      case 'object':
14996        {
14997          if (Array.isArray(arg)) {
14998            toAdd = classnames(arg);
14999          } else {
15000            toAdd = '';
15001
15002            for (var k in arg) {
15003              if (arg[k] && k) {
15004                toAdd && (toAdd += ' ');
15005                toAdd += k;
15006              }
15007            }
15008          }
15009
15010          break;
15011        }
15012
15013      default:
15014        {
15015          toAdd = arg;
15016        }
15017    }
15018
15019    if (toAdd) {
15020      cls && (cls += ' ');
15021      cls += toAdd;
15022    }
15023  }
15024
15025  return cls;
15026};
15027
15028/* harmony default export */ const emotion_css_create_instance_esm = (createEmotion);
15029
15030;// CONCATENATED MODULE: ./node_modules/@emotion/css/dist/emotion-css.esm.js
15031
15032
15033
15034
15035
15036var _createEmotion = emotion_css_create_instance_esm({
15037  key: 'css'
15038}),
15039    flush = _createEmotion.flush,
15040    hydrate = _createEmotion.hydrate,
15041    emotion_css_esm_cx = _createEmotion.cx,
15042    emotion_css_esm_merge = _createEmotion.merge,
15043    emotion_css_esm_getRegisteredStyles = _createEmotion.getRegisteredStyles,
15044    injectGlobal = _createEmotion.injectGlobal,
15045    keyframes = _createEmotion.keyframes,
15046    css = _createEmotion.css,
15047    sheet = _createEmotion.sheet,
15048    cache = _createEmotion.cache;
15049
15050
15051
15052;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-cx.js
15053/**
15054 * External dependencies
15055 */
15056
15057
15058// eslint-disable-next-line no-restricted-imports
15059
15060// eslint-disable-next-line no-restricted-imports
15061
15062
15063/**
15064 * WordPress dependencies
15065 */
15066
15067const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined');
15068
15069/**
15070 * Retrieve a `cx` function that knows how to handle `SerializedStyles`
15071 * returned by the `@emotion/react` `css` function in addition to what
15072 * `cx` normally knows how to handle. It also hooks into the Emotion
15073 * Cache, allowing `css` calls to work inside iframes.
15074 *
15075 * ```jsx
15076 * import { css } from '@emotion/react';
15077 *
15078 * const styles = css`
15079 * 	color: red
15080 * `;
15081 *
15082 * function RedText( { className, ...props } ) {
15083 * 	const cx = useCx();
15084 *
15085 * 	const classes = cx(styles, className);
15086 *
15087 * 	return <span className={classes} {...props} />;
15088 * }
15089 * ```
15090 */
15091const useCx = () => {
15092  const cache = __unsafe_useEmotionCache();
15093  const cx = (0,external_wp_element_namespaceObject.useCallback)((...classNames) => {
15094    if (cache === null) {
15095      throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context');
15096    }
15097    return emotion_css_esm_cx(...classNames.map(arg => {
15098      if (isSerializedStyles(arg)) {
15099        emotion_utils_browser_esm_insertStyles(cache, arg, false);
15100        return `${cache.key}-${arg.name}`;
15101      }
15102      return arg;
15103    }));
15104  }, [cache]);
15105  return cx;
15106};
15107
15108;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/use-context-system.js
15109/**
15110 * WordPress dependencies
15111 */
15112
15113
15114/**
15115 * Internal dependencies
15116 */
15117
15118
15119
15120
15121
15122/**
15123 * @template TProps
15124 * @typedef {TProps & { className: string }} ConnectedProps
15125 */
15126
15127/**
15128 * Custom hook that derives registered props from the Context system.
15129 * These derived props are then consolidated with incoming component props.
15130 *
15131 * @template {{ className?: string }} P
15132 * @param {P}      props     Incoming props from the component.
15133 * @param {string} namespace The namespace to register and to derive context props from.
15134 * @return {ConnectedProps<P>} The connected props.
15135 */
15136function useContextSystem(props, namespace) {
15137  const contextSystemProps = useComponentsContext();
15138  if (typeof namespace === 'undefined') {
15139     false ? 0 : void 0;
15140  }
15141  const contextProps = contextSystemProps?.[namespace] || {};
15142
15143  /* eslint-disable jsdoc/no-undefined-types */
15144  /** @type {ConnectedProps<P>} */
15145  // @ts-ignore We fill in the missing properties below
15146  const finalComponentProps = {
15147    ...getConnectedNamespace(),
15148    ...getNamespace(namespace)
15149  };
15150  /* eslint-enable jsdoc/no-undefined-types */
15151
15152  const {
15153    _overrides: overrideProps,
15154    ...otherContextProps
15155  } = contextProps;
15156  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
15157  const cx = useCx();
15158  const classes = cx(getStyledClassNameFromKey(namespace), props.className);
15159
15160  // Provides the ability to customize the render of the component.
15161  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
15162  for (const key in initialMergedProps) {
15163    // @ts-ignore filling in missing props
15164    finalComponentProps[key] = initialMergedProps[key];
15165  }
15166  for (const key in overrideProps) {
15167    // @ts-ignore filling in missing props
15168    finalComponentProps[key] = overrideProps[key];
15169  }
15170
15171  // Setting an `undefined` explicitly can cause unintended overwrites
15172  // when a `cloneElement()` is involved.
15173  if (rendered !== undefined) {
15174    // @ts-ignore
15175    finalComponentProps.children = rendered;
15176  }
15177  finalComponentProps.className = classes;
15178  return finalComponentProps;
15179}
15180
15181;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/context-connect.
15181js
15182/**
15183 * External dependencies
15184 */
15185
15186/**
15187 * WordPress dependencies
15188 */
15189
15190
15191
15192/**
15193 * Internal dependencies
15194 */
15195
15196
15197/**
15198 * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
15199 * within the Context system under a specified namespace.
15200 *
15201 * @param Component The component to register into the Context system.
15202 * @param namespace The namespace to register the component under.
15203 * @return The connected WordPressComponent
15204 */
15205function contextConnect(Component, namespace) {
15206  return _contextConnect(Component, namespace, {
15207    forwardsRef: true
15208  });
15209}
15210
15211/**
15212 * "Connects" (or registers) a component within the Context system under a specified namespace.
15213 * Does not forward a ref.
15214 *
15215 * @param Component The component to register into the Context system.
15216 * @param namespace The namespace to register the component under.
15217 * @return The connected WordPressComponent
15218 */
15219function contextConnectWithoutRef(Component, namespace) {
15220  return _contextConnect(Component, namespace);
15221}
15222
15223// This is an (experimental) evolution of the initial connect() HOC.
15224// The hope is that we can improve render performance by removing functional
15225// component wrappers.
15226function _contextConnect(Component, namespace, options) {
15227  const WrappedComponent = options?.forwardsRef ? (0,external_wp_element_namespaceObject.forwardRef)(Component) : Component;
15228  if (typeof namespace === 'undefined') {
15229     false ? 0 : void 0;
15230  }
15231
15232  // @ts-expect-error internal property
15233  let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace];
15234
15235  /**
15236   * Consolidate (merge) namespaces before attaching it to the WrappedComponent.
15237   */
15238  if (Array.isArray(namespace)) {
15239    mergedNamespace = [...mergedNamespace, ...namespace];
15240  }
15241  if (typeof namespace === 'string') {
15242    mergedNamespace = [...mergedNamespace, namespace];
15243  }
15244
15245  // @ts-expect-error We can't rely on inferred types here because of the
15246  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
15247  return Object.assign(WrappedComponent, {
15248    [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
15249    displayName: namespace,
15250    selector: `.${getStyledClassNameFromKey(namespace)}`
15251  });
15252}
15253
15254/**
15255 * Attempts to retrieve the connected namespace from a component.
15256 *
15257 * @param Component The component to retrieve a namespace from.
15258 * @return The connected namespaces.
15259 */
15260function getConnectNamespace(Component) {
15261  if (!Component) return [];
15262  let namespaces = [];
15263
15264  // @ts-ignore internal property
15265  if (Component[CONNECT_STATIC_NAMESPACE]) {
15266    // @ts-ignore internal property
15267    namespaces = Component[CONNECT_STATIC_NAMESPACE];
15268  }
15269
15270  // @ts-ignore
15271  if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) {
15272    // @ts-ignore
15273    namespaces = Component.type[CONNECT_STATIC_NAMESPACE];
15274  }
15275  return namespaces;
15276}
15277
15278/**
15279 * Checks to see if a component is connected within the Context system.
15280 *
15281 * @param Component The component to retrieve a namespace from.
15282 * @param match     The namespace to check.
15283 */
15284function hasConnectNamespace(Component, match) {
15285  if (!Component) return false;
15286  if (typeof match === 'string') {
15287    return getConnectNamespace(Component).includes(match);
15288  }
15289  if (Array.isArray(match)) {
15290    return match.some(result => getConnectNamespace(Component).includes(result));
15291  }
15292  return false;
15293}
15294
15295;// CONCATENATED MODULE: ./packages/components/build-module/visually-hidden/styles.js
15296/**
15297 * External dependencies
15298 */
15299
15300const visuallyHidden = {
15301  border: 0,
15302  clip: 'rect(1px, 1px, 1px, 1px)',
15303  WebkitClipPath: 'inset( 50% )',
15304  clipPath: 'inset( 50% )',
15305  height: '1px',
15306  margin: '-1px',
15307  overflow: 'hidden',
15308  padding: 0,
15309  position: 'absolute',
15310  width: '1px',
15311  wordWrap: 'normal'
15312};
15313
15314;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
15315function extends_extends() {
15316  extends_extends = Object.assign ? Object.assign.bind() : function (target) {
15317    for (var i = 1; i < arguments.length; i++) {
15318      var source = arguments[i];
15319      for (var key in source) {
15320        if (Object.prototype.hasOwnProperty.call(source, key)) {
15321          target[key] = source[key];
15322        }
15323      }
15324    }
15325    return target;
15326  };
15327  return extends_extends.apply(this, arguments);
15328}
15329;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
15330function emotion_memoize_esm_memoize(fn) {
15331  var cache = Object.create(null);
15332  return function (arg) {
15333    if (cache[arg] === undefined) cache[arg] = fn(arg);
15334    return cache[arg];
15335  };
15336}
15337
15338
15339
15340;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
15341
15342
15343var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInl
15343ine|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
15344
15345var isPropValid = /* #__PURE__ */emotion_memoize_esm_memoize(function (prop) {
15346  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
15347  /* o */
15348  && prop.charCodeAt(1) === 110
15349  /* n */
15350  && prop.charCodeAt(2) < 91;
15351}
15352/* Z+1 */
15353);
15354
15355
15356
15357;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
15358
15359
15360
15361
15362
15363
15364
15365var testOmitPropsOnStringTag = isPropValid;
15366
15367var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
15368  return key !== 'theme';
15369};
15370
15371var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
15372  return typeof tag === 'string' && // 96 is one less than the char code
15373  // for "a" so this is checking that
15374  // it's a lowercase character
15375  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
15376};
15377var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
15378  var shouldForwardProp;
15379
15380  if (options) {
15381    var optionsShouldForwardProp = options.shouldForwardProp;
15382    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
15383      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
15384    } : optionsShouldForwardProp;
15385  }
15386
15387  if (typeof shouldForwardProp !== 'function' && isReal) {
15388    shouldForwardProp = tag.__emotion_forwardProp;
15389  }
15390
15391  return shouldForwardProp;
15392};
15393
15394var emotion_styled_base_browser_esm_ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
15395
15396var emotion_styled_base_browser_esm_Noop = function Noop() {
15397  return null;
15398};
15399
15400var createStyled = function createStyled(tag, options) {
15401  if (false) {}
15402
15403  var isReal = tag.__emotion_real === tag;
15404  var baseTag = isReal && tag.__emotion_base || tag;
15405  var identifierName;
15406  var targetClassName;
15407
15408  if (options !== undefined) {
15409    identifierName = options.label;
15410    targetClassName = options.target;
15411  }
15412
15413  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
15414  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
15415  var shouldUseAs = !defaultShouldForwardProp('as');
15416  return function () {
15417    var args = arguments;
15418    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
15419
15420    if (identifierName !== undefined) {
15421      styles.push("label:" + identifierName + ";");
15422    }
15423
vendor: 4,177 bytes, lines 15424-15552
15424    if (args[0] == null || args[0].raw === undefined) {
15425      styles.push.apply(styles, args);
15426    } else {
15427      if (false) {}
15428
15429      styles.push(args[0][0]);
15430      var len = args.length;
15431      var i = 1;
15432
15433      for (; i < len; i++) {
15434        if (false) {}
15435
15436        styles.push(args[i], args[0][i]);
15437      }
15438    } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
15439
15440
15441    var Styled = emotion_element_699e6908_browser_esm_withEmotionCache(function (props, cache, ref) {
15442      var finalTag = shouldUseAs && props.as || baseTag;
15443      var className = '';
15444      var classInterpolations = [];
15445      var mergedProps = props;
15446
15447      if (props.theme == null) {
15448        mergedProps = {};
15449
15450        for (var key in props) {
15451          mergedProps[key] = props[key];
15452        }
15453
15454        mergedProps.theme = (0,external_React_.useContext)(emotion_element_699e6908_browser_esm_ThemeContext);
15455      }
15456
15457      if (typeof props.className === 'string') {
15458        className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className);
15459      } else if (props.className != null) {
15460        className = props.className + " ";
15461      }
15462
15463      var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
15464      var rules = emotion_utils_browser_esm_insertStyles(cache, serialized, typeof finalTag === 'string');
15465      className += cache.key + "-" + serialized.name;
15466
15467      if (targetClassName !== undefined) {
15468        className += " " + targetClassName;
15469      }
15470
15471      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
15472      var newProps = {};
15473
15474      for (var _key in props) {
15475        if (shouldUseAs && _key === 'as') continue;
15476
15477        if ( // $FlowFixMe
15478        finalShouldForwardProp(_key)) {
15479          newProps[_key] = props[_key];
15480        }
15481      }
15482
15483      newProps.className = className;
15484      newProps.ref = ref;
15485      var ele = /*#__PURE__*/(0,external_React_.createElement)(finalTag, newProps);
15486      var possiblyStyleElement = /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Noop, null);
15487
15488
15489      return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, possiblyStyleElement, ele);
15490    });
15491    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
15492    Styled.defaultProps = tag.defaultProps;
15493    Styled.__emotion_real = Styled;
15494    Styled.__emotion_base = baseTag;
15495    Styled.__emotion_styles = styles;
15496    Styled.__emotion_forwardProp = shouldForwardProp;
15497    Object.defineProperty(Styled, 'toString', {
15498      value: function value() {
15499        if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string
15500
15501
15502        return "." + targetClassName;
15503      }
15504    });
15505
15506    Styled.withComponent = function (nextTag, nextOptions) {
15507      return createStyled(nextTag, extends_extends({}, options, nextOptions, {
15508        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
15509      })).apply(void 0, styles);
15510    };
15511
15512    return Styled;
15513  };
15514};
15515
15516/* harmony default export */ const emotion_styled_base_browser_esm = (createStyled);
15517
15518;// CONCATENATED MODULE: ./packages/components/build-module/view/component.js
15519
15520/**
15521 * External dependencies
15522 */
15523
15524/**
15525 * `View` is a core component that renders everything in the library.
15526 * It is the principle component in the entire library.
15527 *
15528 * ```jsx
15529 * import { View } from `@wordpress/components`;
15530 *
15531 * function Example() {
15532 * 	return (
15533 * 		<View>
15534 * 			 Code is Poetry
15535 * 		</View>
15536 * 	);
15537 * }
15538 * ```
15539 */
15540const View = emotion_styled_base_browser_esm("div",  true ? {
15541  target: "e19lxcc00"
15542} : 0)( true ? "" : 0);
15543View.selector = '.components-view';
15544View.displayName = 'View';
15545/* harmony default export */ const component = (View);
15546
15547;// CONCATENATED MODULE: ./packages/components/build-module/visually-hidden/component.js
15548
15549/**
15550 * External dependencies
15551 */
15552
15553/**
15554 * Internal dependencies
15555 */
15556
15557
15558
15559
15560function UnconnectedVisuallyHidden(props, forwardedRef) {
15561  const {
15562    style: styleProp,
15563    ...contextProps
15564  } = useContextSystem(props, 'VisuallyHidden');
15565  return (0,external_wp_element_namespaceObject.createElement)(component, {
15566    ref: forwardedRef,
15567    ...contextProps,
15568    style: {
15569      ...visuallyHidden,
15570      ...(styleProp || {})
15571    }
15572  });
15573}
15574
15575/**
15576 * `VisuallyHidden` is a component used to render text intended to be visually
15577 * hidden, but will show for alternate devices, for example a screen reader.
15578 *
15579 * ```jsx
15580 * import { VisuallyHidden } from `@wordpress/components`;
15581 *
15582 * function Example() {
15583 *   return (
15584 *     <VisuallyHidden>
15585 *       <label>Code is Poetry</label>
15586 *     </VisuallyHidden>
15587 *   );
15588 * }
15589 * ```
15590 */
15591const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden');
15592/* harmony default export */ const visually_hidden_component = (component_VisuallyHidden);
15593
15594;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/utils.js
15595/**
15596 * WordPress dependencies
15597 */
15598
15599/**
15600 * Internal dependencies
15601 */
15602
15603const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']];
15604
15605// Stored as map as i18n __() only accepts strings (not variables)
15606const ALIGNMENT_LABEL = {
15607  'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'),
15608  'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'),
15609  'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'),
15610  'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'),
15611  'center center': (0,external_wp_i18n_namespaceObject.__)('Center'),
15612  center: (0,external_wp_i18n_namespaceObject.__)('Center'),
15613  'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'),
15614  'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'),
15615  'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'),
15616  'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right')
15617};
15618
15619// Transforms GRID into a flat Array of values.
15620const ALIGNMENTS = GRID.flat();
15621
15622/**
15623 * Parses and transforms an incoming value to better match the alignment values
15624 *
15625 * @param value An alignment value to parse.
15626 *
15627 * @return The parsed value.
15628 */
15629function transformValue(value) {
15630  const nextValue = value === 'center' ? 'center center' : value;
15631  return nextValue.replace('-', ' ');
15632}
15633
15634/**
15635 * Creates an item ID based on a prefix ID and an alignment value.
15636 *
15637 * @param prefixId An ID to prefix.
15638 * @param value    An alignment value.
15639 *
15640 * @return The item id.
15641 */
15642function getItemId(prefixId, value) {
15643  const valueId = transformValue(value).replace(' ', '-');
15644  return `${prefixId}-${valueId}`;
15645}
15646
15647/**
15648 * Retrieves the alignment index from a value.
15649 *
15650 * @param alignment Value to check.
15651 *
15652 * @return The index of a matching alignment.
15653 */
15654function getAlignmentIndex(alignment = 'center') {
15655  const item = transformValue(alignment);
15656  const index = ALIGNMENTS.indexOf(item);
15657  return index > -1 ? index : undefined;
15658}
15659
15660// EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
15661var hoist_non_react_statics_cjs = __webpack_require__(1281);
15662;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
15663
15664
15665
15666
15667
15668
15669
15670
15671
15672
15673
15674
15675var pkg = {
15676	name: "@emotion/react",
15677	version: "11.7.1",
15678	main: "dist/emotion-react.cjs.js",
15679	module: "dist/emotion-react.esm.js",
15680	browser: {
15681		"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
15682		"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
15683	},
15684	types: "types/index.d.ts",
15685	files: [
15686		"src",
15687		"dist",
15688		"jsx-runtime",
15689		"jsx-dev-runtime",
15690		"_isolated-hnrs",
15691		"types/*.d.ts",
15692		"macro.js",
15693		"macro.d.ts",
15694		"macro.js.flow"
15695	],
15696	sideEffects: false,
15697	author: "mitchellhamilton <[email protected]>",
15698	license: "MIT",
15699	scripts: {
15700		"test:typescript": "dtslint types"
15701	},
15702	dependencies: {
15703		"@babel/runtime": "^7.13.10",
15704		"@emotion/cache": "^11.7.1",
15705		"@emotion/serialize": "^1.0.2",
15706		"@emotion/sheet": "^1.1.0",
15707		"@emotion/utils": "^1.0.0",
15708		"@emotion/weak-memoize": "^0.2.5",
15709		"hoist-non-react-statics": "^3.3.1"
15710	},
vendor: 4,292 bytes, lines 15711-15865
15711	peerDependencies: {
15712		"@babel/core": "^7.0.0",
15713		react: ">=16.8.0"
15714	},
15715	peerDependenciesMeta: {
15716		"@babel/core": {
15717			optional: true
15718		},
15719		"@types/react": {
15720			optional: true
15721		}
15722	},
15723	devDependencies: {
15724		"@babel/core": "^7.13.10",
15725		"@emotion/css": "11.7.1",
15726		"@emotion/css-prettifier": "1.0.1",
15727		"@emotion/server": "11.4.0",
15728		"@emotion/styled": "11.6.0",
15729		"@types/react": "^16.9.11",
15730		dtslint: "^0.3.0",
15731		"html-tag-names": "^1.1.2",
15732		react: "16.14.0",
15733		"svg-tag-names": "^1.1.1"
15734	},
15735	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
15736	publishConfig: {
15737		access: "public"
15738	},
15739	"umd:main": "dist/emotion-react.umd.min.js",
15740	preconstruct: {
15741		entrypoints: [
15742			"./index.js",
15743			"./jsx-runtime.js",
15744			"./jsx-dev-runtime.js",
15745			"./_isolated-hnrs.js"
15746		],
15747		umdName: "emotionReact"
15748	}
15749};
15750
15751var jsx = function jsx(type, props) {
15752  var args = arguments;
15753
15754  if (props == null || !hasOwnProperty.call(props, 'css')) {
15755    // $FlowFixMe
15756    return createElement.apply(undefined, args);
15757  }
15758
15759  var argsLength = args.length;
15760  var createElementArgArray = new Array(argsLength);
15761  createElementArgArray[0] = Emotion;
15762  createElementArgArray[1] = createEmotionProps(type, props);
15763
15764  for (var i = 2; i < argsLength; i++) {
15765    createElementArgArray[i] = args[i];
15766  } // $FlowFixMe
15767
15768
15769  return createElement.apply(null, createElementArgArray);
15770};
15771
15772var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
15773// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
15774// initial client-side render from SSR, use place of hydrating tag
15775
15776var Global = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) {
15777  if (false) {}
15778
15779  var styles = props.styles;
15780  var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
15781  // but it is based on a constant that will never change at runtime
15782  // it's effectively like having two implementations and switching them out
15783  // so it's not actually breaking anything
15784
15785
15786  var sheetRef = useRef();
15787  useLayoutEffect(function () {
15788    var key = cache.key + "-global";
15789    var sheet = new StyleSheet({
15790      key: key,
15791      nonce: cache.sheet.nonce,
15792      container: cache.sheet.container,
15793      speedy: cache.sheet.isSpeedy
15794    });
15795    var rehydrating = false; // $FlowFixMe
15796
15797    var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
15798
15799    if (cache.sheet.tags.length) {
15800      sheet.before = cache.sheet.tags[0];
15801    }
15802
15803    if (node !== null) {
15804      rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
15805
15806      node.setAttribute('data-emotion', key);
15807      sheet.hydrate([node]);
15808    }
15809
15810    sheetRef.current = [sheet, rehydrating];
15811    return function () {
15812      sheet.flush();
15813    };
15814  }, [cache]);
15815  useLayoutEffect(function () {
15816    var sheetRefCurrent = sheetRef.current;
15817    var sheet = sheetRefCurrent[0],
15818        rehydrating = sheetRefCurrent[1];
15819
15820    if (rehydrating) {
15821      sheetRefCurrent[1] = false;
15822      return;
15823    }
15824
15825    if (serialized.next !== undefined) {
15826      // insert keyframes
15827      insertStyles(cache, serialized.next, true);
15828    }
15829
15830    if (sheet.tags.length) {
15831      // if this doesn't exist then it will be null so the style element will be appended
15832      var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
15833      sheet.before = element;
15834      sheet.flush();
15835    }
15836
15837    cache.insert("", serialized, sheet, false);
15838  }, [cache, serialized.name]);
15839  return null;
15840})));
15841
15842if (false) {}
15843
15844function emotion_react_browser_esm_css() {
15845  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
15846    args[_key] = arguments[_key];
15847  }
15848
15849  return emotion_serialize_browser_esm_serializeStyles(args);
15850}
15851
15852var emotion_react_browser_esm_keyframes = function keyframes() {
15853  var insertable = emotion_react_browser_esm_css.apply(void 0, arguments);
15854  var name = "animation-" + insertable.name; // $FlowFixMe
15855
15856  return {
15857    name: name,
15858    styles: "@keyframes " + name + "{" + insertable.styles + "}",
15859    anim: 1,
15860    toString: function toString() {
15861      return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
15862    }
15863  };
15864};
15865
15866var emotion_react_browser_esm_classnames = function classnames(args) {
15867  var len = args.length;
15868  var i = 0;
15869  var cls = '';
15870
15871  for (; i < len; i++) {
15872    var arg = args[i];
15873    if (arg == null) continue;
15874    var toAdd = void 0;
15875
15876    switch (typeof arg) {
15877      case 'boolean':
15878        break;
15879
15880      case 'object':
15881        {
15882          if (Array.isArray(arg)) {
15883            toAdd = classnames(arg);
15884          } else {
15885            if (false) {}
15886
15887            toAdd = '';
15888
15889            for (var k in arg) {
15890              if (arg[k] && k) {
15891                toAdd && (toAdd += ' ');
15892                toAdd += k;
15893              }
15894            }
15895          }
15896
15897          break;
15898        }
15899
15900      default:
15901        {
15902          toAdd = arg;
15903        }
15904    }
15905
15906    if (toAdd) {
15907      cls && (cls += ' ');
15908      cls += toAdd;
15909    }
15910  }
15911
15912  return cls;
15913};
15914
15915function emotion_react_browser_esm_merge(registered, css, className) {
15916  var registeredStyles = [];
15917  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
15918
15919  if (registeredStyles.length < 2) {
15920    return className;
15921  }
15922
15923  return rawClassName + css(registeredStyles);
15924}
15925
15926var emotion_react_browser_esm_Noop = function Noop() {
15927  return null;
15928};
15929
15930var ClassNames = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) {
15931  var hasRendered = false;
15932
15933  var css = function css() {
15934    if (hasRendered && "production" !== 'production') {}
15935
15936    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
15937      args[_key] = arguments[_key];
15938    }
15939
15940    var serialized = serializeStyles(args, cache.registered);
15941
15942    {
15943      insertStyles(cache, serialized, false);
15944    }
15945
15946    return cache.key + "-" + serialized.name;
15947  };
15948
15949  var cx = function cx() {
15950    if (hasRendered && "production" !== 'production') {}
15951
15952    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
15953      args[_key2] = arguments[_key2];
15954    }
15955
15956    return emotion_react_browser_esm_merge(cache.registered, css, emotion_react_browser_esm_classnames(args));
15957  };
15958
15959  var content = {
15960    css: css,
15961    cx: cx,
15962    theme: useContext(ThemeContext)
15963  };
15964  var ele = props.children(content);
15965  hasRendered = true;
15966  var possiblyStyleElement = /*#__PURE__*/createElement(emotion_react_browser_esm_Noop, null);
15967
15968
15969  return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
15970})));
15971
15972if (false) {}
15973
15974if (false) { var globalKey, globalContext, isJest, emotion_react_browser_esm_isBrowser; }
15975
15976
15977
15978;// CONCATENATED MODULE: ./node_modules/colord/index.mjs
15979var 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*,\
vendor: 7,134 bytes, lines 15979-15982
15979s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})};
15980
15981;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs
15982/* 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",s
15982andybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])}
15983
15984;// CONCATENATED MODULE: ./packages/components/build-module/utils/colors.js
15985/**
15986 * External dependencies
15987 */
15988
15989
15990k([names]);
15991
15992/**
15993 * Generating a CSS compliant rgba() color value.
15994 *
15995 * @param {string} hexValue The hex value to convert to rgba().
15996 * @param {number} alpha    The alpha value for opacity.
15997 * @return {string} The converted rgba() color value.
15998 *
15999 * @example
16000 * rgba( '#000000', 0.5 )
16001 * // rgba(0, 0, 0, 0.5)
16002 */
16003function rgba(hexValue = '', alpha = 1) {
16004  return w(hexValue).alpha(alpha).toRgbString();
16005}
16006
16007;// CONCATENATED MODULE: ./packages/components/build-module/utils/colors-values.js
16008/**
16009 * Internal dependencies
16010 */
16011
16012const white = '#fff';
16013
16014// Matches the grays in @wordpress/base-styles
16015const GRAY = {
16016  900: '#1e1e1e',
16017  800: '#2f2f2f',
16018  /** Meets 4.6:1 text contrast against white. */
16019  700: '#757575',
16020  /** Meets 3:1 UI or large text contrast against white. */
16021  600: '#949494',
16022  400: '#ccc',
16023  /** Used for most borders. */
16024  300: '#ddd',
16025  /** Used sparingly for light borders. */
16026  200: '#e0e0e0',
16027  /** Used for light gray backgrounds. */
16028  100: '#f0f0f0'
16029};
16030
16031// Matches @wordpress/base-styles
16032const ALERT = {
16033  yellow: '#f0b849',
16034  red: '#d94f4f',
16035  green: '#4ab866'
16036};
16037
16038// Matches the Modern admin scheme in @wordpress/base-styles
16039const ADMIN = {
16040  theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
16041  themeDark10: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))'
16042};
16043const UI = {
16044  background: white,
16045  backgroundDisabled: GRAY[100],
16046  border: GRAY[600],
16047  borderHover: GRAY[700],
16048  borderFocus: ADMIN.theme,
16049  borderDisabled: GRAY[400],
16050  textDisabled: GRAY[600],
16051  textDark: white,
16052  // Matches @wordpress/base-styles
16053  darkGrayPlaceholder: rgba(GRAY[900], 0.62),
16054  lightGrayPlaceholder: rgba(white, 0.65)
16055};
16056const THEME = {
16057  accent: ADMIN.theme,
16058  accentDarker10: ADMIN.themeDark10
16059};
16060const COLORS = Object.freeze({
16061  /**
16062   * The main gray color object.
16063   */
16064  gray: GRAY,
16065  white,
16066  alert: ALERT,
16067  theme: THEME,
16068  ui: UI
16069});
16070/* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS)));
16071
16072;// CONCATENATED MODULE: ./packages/components/build-module/utils/reduce-motion.js
16073/**
16074 * Allows users to opt-out of animations via OS-level preferences.
16075 *
16076 * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
16077 * @return {string} Generated CSS code for the reduced style
16078 */
16079function reduceMotion(prop = 'transition') {
16080  let style;
16081  switch (prop) {
16082    case 'transition':
16083      style = 'transition-duration: 0ms;';
16084      break;
16085    case 'animation':
16086      style = 'animation-duration: 1ms;';
16087      break;
16088    default:
16089      style = `
16090				animation-duration: 1ms;
16091				transition-duration: 0ms;
16092			`;
16093  }
16094  return `
16095		@media ( prefers-reduced-motion: reduce ) {
16096			${style};
16097		}
16098	`;
16099}
16100
16101;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js
16102
16103function _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)."; }
16104/**
16105 * External dependencies
16106 */
16107
16108
16109
16110/**
16111 * Internal dependencies
16112 */
16113
16114var _ref =  true ? {
16115  name: "93uojk",
16116  styles: "border-radius:2px;box-sizing:border-box;direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );outline:none"
16117} : 0;
16118const rootBase = () => {
16119  return _ref;
16120};
16121const rootSize = ({
16122  size = 92
16123}) => {
16124  return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0),  true ? "" : 0);
16125};
16126const Root = emotion_styled_base_browser_esm("div",  true ? {
16127  target: "ecapk1j3"
16128} : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0));
16129const Row = emotion_styled_base_browser_esm("div",  true ? {
16130  target: "ecapk1j2"
16131} : 0)( true ? {
16132  name: "1x5gbbj",
16133  styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
16134} : 0);
16135const pointActive = ({
16136  isActive
16137}) => {
16138  const boxShadow = isActive ? `0 0 0 2px ${COLORS.gray[900]}` : null;
16139  const pointColor = isActive ? COLORS.gray[900] : COLORS.gray[400];
16140  const pointColorHover = isActive ? COLORS.gray[900] : COLORS.theme.accent;
16141  return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0),  true ? "" : 0);
16142};
16143const pointBase = props => {
16144  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);
16145};
16146const Point = emotion_styled_base_browser_esm("span",  true ? {
16147  target: "ecapk1j1"
16148} : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0));
16149const Cell = emotion_styled_base_browser_esm("span",  true ? {
16150  target: "ecapk1j0"
16151} : 0)( true ? {
16152  name: "rjf3ub",
16153  styles: "appearance:none;border:none;box-sizing:border-box;margin:0;display:flex;position:relative;outline:none;align-items:center;justify-content:center;padding:0"
16154} : 0);
16155
16156;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/cell.js
16157
16158/**
16159 * Internal dependencies
16160 */
16161
16162
16163
16164
16165/**
16166 * Internal dependencies
16167 */
16168
16169
16170function cell_Cell({
16171  isActive = false,
16172  value,
16173  ...props
16174}) {
16175  const tooltipText = ALIGNMENT_LABEL[value];
16176  return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
16177    text: tooltipText
16178  }, (0,external_wp_element_namespaceObject.createElement)(CompositeItem, {
16179    as: Cell,
16180    role: "gridcell",
16181    ...props
16182  }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, value), (0,external_wp_element_namespaceObject.createElement)(Point, {
16183    isActive: isActive,
16184    role: "presentation"
16185  })));
16186}
16187
16188;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useSealedState.js
16189
16190
16191/**
16192 * React custom hook that returns the very first value passed to `initialState`,
16193 * even if it changes between re-renders.
16194 */
16195function useSealedState(initialState) {
16196  var _React$useState = (0,external_React_.useState)(initialState),
16197      sealed = _React$useState[0];
16198
16199  return sealed;
16200}
16201
16202
16203
16204;// CONCATENATED MODULE: ./node_modules/reakit/es/reverse-30eaa122.js
16205
16206
16207function groupItems(items) {
16208  var groups = [[]];
16209
16210  var _loop = function _loop() {
16211    var item = _step.value;
16212    var group = groups.find(function (g) {
16213      return !g[0] || g[0].groupId === item.groupId;
16214    });
16215
16216    if (group) {
16217      group.push(item);
16218    } else {
16219      groups.push([item]);
16220    }
16221  };
16222
16223  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
16224    _loop();
16225  }
16226
16227  return groups;
16228}
16229
16230function flatten(grid) {
16231  var flattened = [];
16232
16233  for (var _iterator = _createForOfIteratorHelperLoose(grid), _step; !(_step = _iterator()).done;) {
16234    var row = _step.value;
16235    flattened.push.apply(flattened, row);
16236  }
16237
16238  return flattened;
16239}
16240
16241function reverse(array) {
16242  return array.slice().reverse();
16243}
16244
16245
16246
16247;// CONCATENATED MODULE: ./node_modules/reakit/es/findEnabledItemById-8ddca752.js
16248function findEnabledItemById(items, id) {
16249  if (!id) return undefined;
16250  return items === null || items === void 0 ? void 0 : items.find(function (item) {
16251    return item.id === id && !item.disabled;
16252  });
16253}
16254
16255
16256
16257;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/applyState.js
16258function applyState_isUpdater(argument) {
16259  return typeof argument === "function";
16260}
16261/**
16262 * Receives a `setState` argument and calls it with `currentValue` if it's a
16263 * function. Otherwise return the argument as the new value.
16264 *
16265 * @example
16266 * import { applyState } from "reakit-utils";
16267 *
16268 * applyState((value) => value + 1, 1); // 2
16269 * applyState(2, 1); // 2
16270 */
16271
16272
16273function applyState_applyState(argument, currentValue) {
16274  if (applyState_isUpdater(argument)) {
16275    return argument(currentValue);
16276  }
16277
16278  return argument;
16279}
16280
16281
16282
16283;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdState.js
16284
16285
16286
16287
16288function unstable_useIdState(initialState) {
16289  if (initialState === void 0) {
16290    initialState = {};
16291  }
16292
16293  var _useSealedState = useSealedState(initialState),
16294      initialBaseId = _useSealedState.baseId;
16295
16296  var generateId = (0,external_React_.useContext)(unstable_IdContext);
16297  var idCountRef = (0,external_React_.useRef)(0);
16298
16299  var _React$useState = (0,external_React_.useState)(function () {
16300    return initialBaseId || generateId();
16301  }),
16302      baseId = _React$useState[0],
16303      setBaseId = _React$useState[1];
16304
16305  return {
16306    baseId: baseId,
16307    setBaseId: setBaseId,
16308    unstable_idCountRef: idCountRef
16309  };
16310}
16311
16312
16313
16314;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeState.js
16315
16316
16317
16318
16319
16320
16321
16322
16323
16324
16325
16326
16327function isElementPreceding(element1, element2) {
16328  return Boolean(element2.compareDocumentPosition(element1) & Node.DOCUMENT_POSITION_PRECEDING);
16329}
16330
16331function findDOMIndex(items, item) {
16332  return items.findIndex(function (currentItem) {
16333    if (!currentItem.ref.current || !item.ref.current) {
16334      return false;
16335    }
16336
16337    return isElementPreceding(item.ref.current, currentItem.ref.current);
16338  });
16339}
16340
16341function getMaxLength(rows) {
16342  var maxLength = 0;
16343
16344  for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
16345    var length = _step.value.length;
16346
16347    if (length > maxLength) {
16348      maxLength = length;
16349    }
16350  }
16351
16352  return maxLength;
16353}
16354
16355/**
16356 * Turns [row1, row1, row2, row2] into [row1, row2, row1, row2]
16357 */
16358
16359function verticalizeItems(items) {
16360  var groups = groupItems(items);
16361  var maxLength = getMaxLength(groups);
16362  var verticalized = [];
16363
16364  for (var i = 0; i < maxLength; i += 1) {
16365    for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) {
16366      var group = _step.value;
16367
16368      if (group[i]) {
16369        verticalized.push(_objectSpread2(_objectSpread2({}, group[i]), {}, {
16370          // If there's no groupId, it means that it's not a grid composite,
16371          // but a single row instead. So, instead of verticalizing it, that
16372          // is, assigning a different groupId based on the column index, we
16373          // keep it undefined so they will be part of the same group.
16374          // It's useful when using up/down on one-dimensional composites.
16375          groupId: group[i].groupId ? "" + i : undefined
16376        }));
16377      }
16378    }
16379  }
16380
16381  return verticalized;
16382}
16383
16384function createEmptyItem(groupId) {
16385  return {
16386    id: "__EMPTY_ITEM__",
16387    disabled: true,
16388    ref: {
16389      current: null
16390    },
16391    groupId: groupId
16392  };
16393}
16394/**
16395 * Turns [[row1, row1], [row2]] into [[row1, row1], [row2, row2]]
16396 */
16397
16398
16399function fillGroups(groups, currentId, shift) {
16400  var maxLength = getMaxLength(groups);
16401
16402  for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) {
16403    var group = _step.value;
16404
16405    for (var i = 0; i < maxLength; i += 1) {
16406      var item = group[i];
16407
16408      if (!item || shift && item.disabled) {
16409        var isFrist = i === 0;
16410        var previousItem = isFrist && shift ? findFirstEnabledItem(group) : group[i - 1];
16411        group[i] = previousItem && currentId !== (previousItem === null || previousItem === void 0 ? void 0 : previousItem.id) && shift ? previousItem : createEmptyItem(previousItem === null || previousItem === void 0 ? void 0 : previousItem.groupId);
16412      }
16413    }
16414  }
16415
16416  return groups;
16417}
16418
16419var nullItem = {
16420  id: null,
16421  ref: {
16422    current: null
16423  }
16424};
16425function placeItemsAfter(items, id, shouldInsertNullItem) {
16426  var index = items.findIndex(function (item) {
16427    return item.id === id;
16428  });
16429  return [].concat(items.slice(index + 1), shouldInsertNullItem ? [nullItem] : [], items.slice(0, index));
16430}
16431
16432function getItemsInGroup(items, groupId) {
16433  return items.filter(function (item) {
16434    return item.groupId === groupId;
16435  });
16436}
16437
16438var map = {
16439  horizontal: "vertical",
16440  vertical: "horizontal"
16441};
16442function getOppositeOrientation(orientation) {
16443  return orientation && map[orientation];
16444}
16445
16446function addItemAtIndex(array, item, index) {
16447  if (!(index in array)) {
16448    return [].concat(array, [item]);
16449  }
16450
16451  return [].concat(array.slice(0, index), [item], array.slice(index));
16452}
16453
16454function sortBasedOnDOMPosition(items) {
16455  var pairs = items.map(function (item, index) {
16456    return [index, item];
16457  });
16458  var isOrderDifferent = false;
16459  pairs.sort(function (_ref, _ref2) {
16460    var indexA = _ref[0],
16461        a = _ref[1];
16462    var indexB = _ref2[0],
16463        b = _ref2[1];
16464    var elementA = a.ref.current;
16465    var elementB = b.ref.current;
16466    if (!elementA || !elementB) return 0; // a before b
16467
16468    if (isElementPreceding(elementA, elementB)) {
16469      if (indexA > indexB) {
16470        isOrderDifferent = true;
16471      }
16472
16473      return -1;
16474    } // a after b
16475
16476
16477    if (indexA < indexB) {
16478      isOrderDifferent = true;
16479    }
16480
16481    return 1;
16482  });
16483
16484  if (isOrderDifferent) {
16485    return pairs.map(function (_ref3) {
16486      var _ = _ref3[0],
16487          item = _ref3[1];
16488      return item;
16489    });
16490  }
16491
16492  return items;
16493}
16494
16495function setItemsBasedOnDOMPosition(items, setItems) {
16496  var sortedItems = sortBasedOnDOMPosition(items);
16497
16498  if (items !== sortedItems) {
16499    setItems(sortedItems);
16500  }
16501}
16502
16503function getCommonParent(items) {
16504  var _firstItem$ref$curren;
16505
16506  var firstItem = items[0],
16507      nextItems = items.slice(1);
16508  var parentElement = firstItem === null || firstItem === void 0 ? void 0 : (_firstItem$ref$curren = firstItem.ref.current) === null || _firstItem$ref$curren === void 0 ? void 0 : _firstItem$ref$curren.parentElement;
16509
16510  var _loop = function _loop() {
16511    var parent = parentElement;
16512
16513    if (nextItems.every(function (item) {
16514      return parent.contains(item.ref.current);
16515    })) {
16516      return {
16517        v: parentElement
16518      };
16519    }
16520
16521    parentElement = parentElement.parentElement;
16522  };
16523
16524  while (parentElement) {
16525    var _ret = _loop();
16526
16527    if (typeof _ret === "object") return _ret.v;
16528  }
16529
16530  return getDocument_getDocument(parentElement).body;
16531} // istanbul ignore next: JSDOM doesn't support IntersectionObverser
16532// See https://github.com/jsdom/jsdom/issues/2032
16533
16534
16535function useIntersectionObserver(items, setItems) {
16536  var previousItems = (0,external_React_.useRef)([]);
16537  (0,external_React_.useEffect)(function () {
16538    var callback = function callback() {
16539      var hasPreviousItems = !!previousItems.current.length; // We don't want to sort items if items have been just registered.
16540
16541      if (hasPreviousItems) {
16542        setItemsBasedOnDOMPosition(items, setItems);
16543      }
16544
16545      previousItems.current = items;
16546    };
16547
16548    var root = getCommonParent(items);
16549    var observer = new IntersectionObserver(callback, {
16550      root: root
16551    });
16552
16553    for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
16554      var item = _step.value;
16555
16556      if (item.ref.current) {
16557        observer.observe(item.ref.current);
16558      }
16559    }
16560
16561    return function () {
16562      observer.disconnect();
16563    };
16564  }, [items]);
16565}
16566
16567function useTimeoutObserver(items, setItems) {
16568  (0,external_React_.useEffect)(function () {
16569    var callback = function callback() {
16570      return setItemsBasedOnDOMPosition(items, setItems);
16571    };
16572
16573    var timeout = setTimeout(callback, 250);
16574    return function () {
16575      return clearTimeout(timeout);
16576    };
16577  });
16578}
16579
16580function useSortBasedOnDOMPosition(items, setItems) {
16581  if (typeof IntersectionObserver === "function") {
16582    useIntersectionObserver(items, setItems);
16583  } else {
16584    useTimeoutObserver(items, setItems);
16585  }
16586}
16587
16588function reducer(state, action) {
16589  var virtual = state.unstable_virtual,
16590      rtl = state.rtl,
16591      orientation = state.orientation,
16592      items = state.items,
16593      groups = state.groups,
16594      currentId = state.currentId,
16595      loop = state.loop,
16596      wrap = state.wrap,
16597      pastIds = state.pastIds,
16598      shift = state.shift,
16599      moves = state.unstable_moves,
16600      includesBaseElement = state.unstable_includesBaseElement,
16601      initialVirtual = state.initialVirtual,
16602      initialRTL = state.initialRTL,
16603      initialOrientation = state.initialOrientation,
16604      initialCurrentId = state.initialCurrentId,
16605      initialLoop = state.initialLoop,
16606      initialWrap = state.initialWrap,
16607      initialShift = state.initialShift,
16608      hasSetCurrentId = state.hasSetCurrentId;
16609
16610  switch (action.type) {
16611    case "registerGroup":
16612      {
16613        var _group = action.group; // If there are no groups yet, just add it as the first one
16614
16615        if (groups.length === 0) {
16616          return _objectSpread2(_objectSpread2({}, state), {}, {
16617            groups: [_group]
16618          });
16619        } // Finds the group index based on DOM position
16620
16621
16622        var index = findDOMIndex(groups, _group);
16623        return _objectSpread2(_objectSpread2({}, state), {}, {
16624          groups: addItemAtIndex(groups, _group, index)
16625        });
16626      }
16627
16628    case "unregisterGroup":
16629      {
16630        var _id = action.id;
16631        var nextGroups = groups.filter(function (group) {
16632          return group.id !== _id;
16633        }); // The group isn't registered, so do nothing
16634
16635        if (nextGroups.length === groups.length) {
16636          return state;
16637        }
16638
16639        return _objectSpread2(_objectSpread2({}, state), {}, {
16640          groups: nextGroups
16641        });
16642      }
16643
16644    case "registerItem":
16645      {
16646        var _item = action.item; // Finds the item group based on the DOM hierarchy
16647
16648        var _group2 = groups.find(function (r) {
16649          var _r$ref$current;
16650
16651          return (_r$ref$current = r.ref.current) === null || _r$ref$current === void 0 ? void 0 : _r$ref$current.contains(_item.ref.current);
16652        }); // Group will be null if it's a one-dimensional composite
16653
16654
16655        var nextItem = _objectSpread2({
16656          groupId: _group2 === null || _group2 === void 0 ? void 0 : _group2.id
16657        }, _item);
16658
16659        var _index = findDOMIndex(items, nextItem);
16660
16661        var nextState = _objectSpread2(_objectSpread2({}, state), {}, {
16662          items: addItemAtIndex(items, nextItem, _index)
16663        });
16664
16665        if (!hasSetCurrentId && !moves && initialCurrentId === undefined) {
16666          var _findFirstEnabledItem;
16667
16668          // Sets currentId to the first enabled item. This runs whenever an item
16669          // is registered because the first enabled item may be registered
16670          // asynchronously.
16671          return _objectSpread2(_objectSpread2({}, nextState), {}, {
16672            currentId: (_findFirstEnabledItem = findFirstEnabledItem(nextState.items)) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id
16673          });
16674        }
16675
16676        return nextState;
16677      }
16678
16679    case "unregisterItem":
16680      {
16681        var _id2 = action.id;
16682        var nextItems = items.filter(function (item) {
16683          return item.id !== _id2;
16684        }); // The item isn't registered, so do nothing
16685
16686        if (nextItems.length === items.length) {
16687          return state;
16688        } // Filters out the item that is being removed from the pastIds list
16689
16690
16691        var nextPastIds = pastIds.filter(function (pastId) {
16692          return pastId !== _id2;
16693        });
16694
16695        var _nextState = _objectSpread2(_objectSpread2({}, state), {}, {
16696          pastIds: nextPastIds,
16697          items: nextItems
16698        }); // If the current item is the item that is being removed, focus pastId
16699
16700
16701        if (currentId && currentId === _id2) {
16702          var nextId = includesBaseElement ? null : getCurrentId(_objectSpread2(_objectSpread2({}, _nextState), {}, {
16703            currentId: nextPastIds[0]
16704          }));
16705          return _objectSpread2(_objectSpread2({}, _nextState), {}, {
16706            currentId: nextId
16707          });
16708        }
16709
16710        return _nextState;
16711      }
16712
16713    case "move":
16714      {
16715        var _id3 = action.id; // move() does nothing
16716
16717        if (_id3 === undefined) {
16718          return state;
16719        } // Removes the current item and the item that is receiving focus from the
16720        // pastIds list
16721
16722
16723        var filteredPastIds = pastIds.filter(function (pastId) {
16724          return pastId !== currentId && pastId !== _id3;
16725        }); // If there's a currentId, add it to the pastIds list so it can be focused
16726        // if the new item gets removed or disabled
16727
16728        var _nextPastIds = currentId ? [currentId].concat(filteredPastIds) : filteredPastIds;
16729
16730        var _nextState2 = _objectSpread2(_objectSpread2({}, state), {}, {
16731          pastIds: _nextPastIds
16732        }); // move(null) will focus the composite element itself, not an item
16733
16734
16735        if (_id3 === null) {
16736          return _objectSpread2(_objectSpread2({}, _nextState2), {}, {
16737            unstable_moves: moves + 1,
16738            currentId: getCurrentId(_nextState2, _id3)
16739          });
16740        }
16741
16742        var _item2 = findEnabledItemById(items, _id3);
16743
16744        return _objectSpread2(_objectSpread2({}, _nextState2), {}, {
16745          unstable_moves: _item2 ? moves + 1 : moves,
16746          currentId: getCurrentId(_nextState2, _item2 === null || _item2 === void 0 ? void 0 : _item2.id)
16747        });
16748      }
16749
16750    case "next":
16751      {
16752        // If there's no item focused, we just move the first one
16753        if (currentId == null) {
16754          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16755            type: "first"
16756          }));
16757        } // RTL doesn't make sense on vertical navigation
16758
16759
16760        var isHorizontal = orientation !== "vertical";
16761        var isRTL = rtl && isHorizontal;
16762        var allItems = isRTL ? reverse(items) : items;
16763        var currentItem = allItems.find(function (item) {
16764          return item.id === currentId;
16765        }); // If there's no item focused, we just move the first one
16766
16767        if (!currentItem) {
16768          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16769            type: "first"
16770          }));
16771        }
16772
16773        var isGrid = !!currentItem.groupId;
16774        var currentIndex = allItems.indexOf(currentItem);
16775
16776        var _nextItems = allItems.slice(currentIndex + 1);
16777
16778        var nextItemsInGroup = getItemsInGroup(_nextItems, currentItem.groupId); // Home, End
16779
16780        if (action.allTheWay) {
16781          // We reverse so we can get the last enabled item in the group. If it's
16782          // RTL, nextItems and nextItemsInGroup are already reversed and don't
16783          // have the items before the current one anymore. So we have to get
16784          // items in group again with allItems.
16785          var _nextItem2 = findFirstEnabledItem(isRTL ? getItemsInGroup(allItems, currentItem.groupId) : reverse(nextItemsInGroup));
16786
16787          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16788            type: "move",
16789            id: _nextItem2 === null || _nextItem2 === void 0 ? void 0 : _nextItem2.id
16790          }));
16791        }
16792
16793        var oppositeOrientation = getOppositeOrientation( // If it's a grid and orientation is not set, it's a next/previous
16794        // call, which is inherently horizontal. up/down will call next with
16795        // orientation set to vertical by default (see below on up/down cases).
16796        isGrid ? orientation || "horizontal" : orientation);
16797        var canLoop = loop && loop !== oppositeOrientation;
16798        var canWrap = isGrid && wrap && wrap !== oppositeOrientation;
16799        var hasNullItem = // `previous` and `up` will set action.hasNullItem, but when calling
16800        // next directly, hasNullItem will only be true if it's not a grid and
16801        // loop is set to true, which means that pressing right or down keys on
16802        // grids will never focus the composite element. On one-dimensional
16803        // composites that don't loop, pressing right or down keys also doesn't
16804        // focus the composite element.
16805        action.hasNullItem || !isGrid && canLoop && includesBaseElement;
16806
16807        if (canLoop) {
16808          var loopItems = canWrap && !hasNullItem ? allItems : getItemsInGroup(allItems, currentItem.groupId); // Turns [0, 1, current, 3, 4] into [3, 4, 0, 1]
16809
16810          var sortedItems = placeItemsAfter(loopItems, currentId, hasNullItem);
16811
16812          var _nextItem3 = findFirstEnabledItem(sortedItems, currentId);
16813
16814          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16815            type: "move",
16816            id: _nextItem3 === null || _nextItem3 === void 0 ? void 0 : _nextItem3.id
16817          }));
16818        }
16819
16820        if (canWrap) {
16821          var _nextItem4 = findFirstEnabledItem( // We can use nextItems, which contains all the next items, including
16822          // items from other groups, to wrap between groups. However, if there
16823          // is a null item (the composite element), we'll only use the next
16824          // items in the group. So moving next from the last item will focus
16825          // the composite element (null). On grid composites, horizontal
16826          // navigation never focuses the composite element, only vertical.
16827          hasNullItem ? nextItemsInGroup : _nextItems, currentId);
16828
16829          var _nextId = hasNullItem ? (_nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id) || null : _nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id;
16830
16831          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16832            type: "move",
16833            id: _nextId
16834          }));
16835        }
16836
16837        var _nextItem = findFirstEnabledItem(nextItemsInGroup, currentId);
16838
16839        if (!_nextItem && hasNullItem) {
16840          return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16841            type: "move",
16842            id: null
16843          }));
16844        }
16845
16846        return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16847          type: "move",
16848          id: _nextItem === null || _nextItem === void 0 ? void 0 : _nextItem.id
16849        }));
16850      }
16851
16852    case "previous":
16853      {
16854        // If currentId is initially set to null, the composite element will be
16855        // focusable while navigating with arrow keys. But, if it's a grid, we
16856        // don't want to focus the composite element with horizontal navigation.
16857        var _isGrid = !!groups.length;
16858
16859        var _hasNullItem = !_isGrid && includesBaseElement;
16860
16861        var _nextState3 = reducer(_objectSpread2(_objectSpread2({}, state), {}, {
16862          items: reverse(items)
16863        }), _objectSpread2(_objectSpread2({}, action), {}, {
16864          type: "next",
16865          hasNullItem: _hasNullItem
16866        }));
16867
16868        return _objectSpread2(_objectSpread2({}, _nextState3), {}, {
16869          items: items
16870        });
16871      }
16872
16873    case "down":
16874      {
16875        var shouldShift = shift && !action.allTheWay; // First, we make sure groups have the same number of items by filling it
16876        // with disabled fake items. Then, we reorganize the items list so
16877        // [1-1, 1-2, 2-1, 2-2] becomes [1-1, 2-1, 1-2, 2-2].
16878
16879        var verticalItems = verticalizeItems(flatten(fillGroups(groupItems(items), currentId, shouldShift)));
16880
16881        var _canLoop = loop && loop !== "horizontal"; // Pressing down arrow key will only focus the composite element if loop
16882        // is true or vertical.
16883
16884
16885        var _hasNullItem2 = _canLoop && includesBaseElement;
16886
16887        var _nextState4 = reducer(_objectSpread2(_objectSpread2({}, state), {}, {
16888          orientation: "vertical",
16889          items: verticalItems
16890        }), _objectSpread2(_objectSpread2({}, action), {}, {
16891          type: "next",
16892          hasNullItem: _hasNullItem2
16893        }));
16894
16895        return _objectSpread2(_objectSpread2({}, _nextState4), {}, {
16896          orientation: orientation,
16897          items: items
16898        });
16899      }
16900
16901    case "up":
16902      {
16903        var _shouldShift = shift && !action.allTheWay;
16904
16905        var _verticalItems = verticalizeItems(reverse(flatten(fillGroups(groupItems(items), currentId, _shouldShift)))); // If currentId is initially set to null, we'll always focus the
16906        // composite element when the up arrow key is pressed in the first row.
16907
16908
16909        var _hasNullItem3 = includesBaseElement;
16910
16911        var _nextState5 = reducer(_objectSpread2(_objectSpread2({}, state), {}, {
16912          orientation: "vertical",
16913          items: _verticalItems
16914        }), _objectSpread2(_objectSpread2({}, action), {}, {
16915          type: "next",
16916          hasNullItem: _hasNullItem3
16917        }));
16918
16919        return _objectSpread2(_objectSpread2({}, _nextState5), {}, {
16920          orientation: orientation,
16921          items: items
16922        });
16923      }
16924
16925    case "first":
16926      {
16927        var firstItem = findFirstEnabledItem(items);
16928        return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, {
16929          type: "move",
16930          id: firstItem === null || firstItem === void 0 ? void 0 : firstItem.id
16931        }));
16932      }
16933
16934    case "last":
16935      {
16936        var _nextState6 = reducer(_objectSpread2(_objectSpread2({}, state), {}, {
16937          items: reverse(items)
16938        }), _objectSpread2(_objectSpread2({}, action), {}, {
16939          type: "first"
16940        }));
16941
16942        return _objectSpread2(_objectSpread2({}, _nextState6), {}, {
16943          items: items
16944        });
16945      }
16946
16947    case "sort":
16948      {
16949        return _objectSpread2(_objectSpread2({}, state), {}, {
16950          items: sortBasedOnDOMPosition(items),
16951          groups: sortBasedOnDOMPosition(groups)
16952        });
16953      }
16954
16955    case "setVirtual":
16956      return _objectSpread2(_objectSpread2({}, state), {}, {
16957        unstable_virtual: applyState_applyState(action.virtual, virtual)
16958      });
16959
16960    case "setRTL":
16961      return _objectSpread2(_objectSpread2({}, state), {}, {
16962        rtl: applyState_applyState(action.rtl, rtl)
16963      });
16964
16965    case "setOrientation":
16966      return _objectSpread2(_objectSpread2({}, state), {}, {
16967        orientation: applyState_applyState(action.orientation, orientation)
16968      });
16969
16970    case "setCurrentId":
16971      {
16972        var nextCurrentId = getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, {
16973          currentId: applyState_applyState(action.currentId, currentId)
16974        }));
16975        return _objectSpread2(_objectSpread2({}, state), {}, {
16976          currentId: nextCurrentId,
16977          hasSetCurrentId: true
16978        });
16979      }
16980
16981    case "setLoop":
16982      return _objectSpread2(_objectSpread2({}, state), {}, {
16983        loop: applyState_applyState(action.loop, loop)
16984      });
16985
16986    case "setWrap":
16987      return _objectSpread2(_objectSpread2({}, state), {}, {
16988        wrap: applyState_applyState(action.wrap, wrap)
16989      });
16990
16991    case "setShift":
16992      return _objectSpread2(_objectSpread2({}, state), {}, {
16993        shift: applyState_applyState(action.shift, shift)
16994      });
16995
16996    case "setIncludesBaseElement":
16997      {
16998        return _objectSpread2(_objectSpread2({}, state), {}, {
16999          unstable_includesBaseElement: applyState_applyState(action.includesBaseElement, includesBaseElement)
17000        });
17001      }
17002
17003    case "reset":
17004      return _objectSpread2(_objectSpread2({}, state), {}, {
17005        unstable_virtual: initialVirtual,
17006        rtl: initialRTL,
17007        orientation: initialOrientation,
17008        currentId: getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, {
17009          currentId: initialCurrentId
17010        })),
17011        loop: initialLoop,
17012        wrap: initialWrap,
17013        shift: initialShift,
17014        unstable_moves: 0,
17015        pastIds: []
17016      });
17017
17018    case "setItems":
17019      {
17020        return _objectSpread2(_objectSpread2({}, state), {}, {
17021          items: action.items
17022        });
17023      }
17024
17025    default:
17026      throw new Error();
17027  }
17028}
17029
17030function useAction(fn) {
17031  return (0,external_React_.useCallback)(fn, []);
17032}
17033
17034function useIsUnmountedRef() {
17035  var isUnmountedRef = (0,external_React_.useRef)(false);
17036  useIsomorphicEffect(function () {
17037    return function () {
17038      isUnmountedRef.current = true;
17039    };
17040  }, []);
17041  return isUnmountedRef;
17042}
17043
17044function useCompositeState(initialState) {
17045  if (initialState === void 0) {
17046    initialState = {};
17047  }
17048
17049  var _useSealedState = useSealedState(initialState),
17050      _useSealedState$unsta = _useSealedState.unstable_virtual,
17051      virtual = _useSealedState$unsta === void 0 ? false : _useSealedState$unsta,
17052      _useSealedState$rtl = _useSealedState.rtl,
17053      rtl = _useSealedState$rtl === void 0 ? false : _useSealedState$rtl,
17054      orientation = _useSealedState.orientation,
17055      currentId = _useSealedState.currentId,
17056      _useSealedState$loop = _useSealedState.loop,
17057      loop = _useSealedState$loop === void 0 ? false : _useSealedState$loop,
17058      _useSealedState$wrap = _useSealedState.wrap,
17059      wrap = _useSealedState$wrap === void 0 ? false : _useSealedState$wrap,
17060      _useSealedState$shift = _useSealedState.shift,
17061      shift = _useSealedState$shift === void 0 ? false : _useSealedState$shift,
17062      unstable_includesBaseElement = _useSealedState.unstable_includesBaseElement,
17063      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["unstable_virtual", "rtl", "orientation", "currentId", "loop", "wrap", "shift", "unstable_includesBaseElement"]);
17064
17065  var idState = unstable_useIdState(sealed);
17066
17067  var _React$useReducer = (0,external_React_.useReducer)(reducer, {
17068    unstable_virtual: virtual,
17069    rtl: rtl,
17070    orientation: orientation,
17071    items: [],
17072    groups: [],
17073    currentId: currentId,
17074    loop: loop,
17075    wrap: wrap,
17076    shift: shift,
17077    unstable_moves: 0,
17078    pastIds: [],
17079    unstable_includesBaseElement: unstable_includesBaseElement != null ? unstable_includesBaseElement : currentId === null,
17080    initialVirtual: virtual,
17081    initialRTL: rtl,
17082    initialOrientation: orientation,
17083    initialCurrentId: currentId,
17084    initialLoop: loop,
17085    initialWrap: wrap,
17086    initialShift: shift
17087  }),
17088      _React$useReducer$ = _React$useReducer[0],
17089      pastIds = _React$useReducer$.pastIds,
17090      initialVirtual = _React$useReducer$.initialVirtual,
17091      initialRTL = _React$useReducer$.initialRTL,
17092      initialOrientation = _React$useReducer$.initialOrientation,
17093      initialCurrentId = _React$useReducer$.initialCurrentId,
17094      initialLoop = _React$useReducer$.initialLoop,
17095      initialWrap = _React$useReducer$.initialWrap,
17096      initialShift = _React$useReducer$.initialShift,
17097      hasSetCurrentId = _React$useReducer$.hasSetCurrentId,
17098      state = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_React$useReducer$, ["pastIds", "initialVirtual", "initialRTL", "initialOrientation", "initialCurrentId", "initialLoop", "initialWrap", "initialShift", "hasSetCurrentId"]),
17099      dispatch = _React$useReducer[1];
17100
17101  var _React$useState = (0,external_React_.useState)(false),
17102      hasActiveWidget = _React$useState[0],
17103      setHasActiveWidget = _React$useState[1]; // register/unregister may be called when this component is unmounted. We
17104  // store the unmounted state here so we don't update the state if it's true.
17105  // This only happens in a very specific situation.
17106  // See https://github.com/reakit/reakit/issues/650
17107
17108
17109  var isUnmountedRef = useIsUnmountedRef();
17110  var setItems = (0,external_React_.useCallback)(function (items) {
17111    return dispatch({
17112      type: "setItems",
17113      items: items
17114    });
17115  }, []);
17116  useSortBasedOnDOMPosition(state.items, setItems);
17117  return _objectSpread2(_objectSpread2(_objectSpread2({}, idState), state), {}, {
17118    unstable_hasActiveWidget: hasActiveWidget,
17119    unstable_setHasActiveWidget: setHasActiveWidget,
17120    registerItem: useAction(function (item) {
17121      if (isUnmountedRef.current) return;
17122      dispatch({
17123        type: "registerItem",
17124        item: item
17125      });
17126    }),
17127    unregisterItem: useAction(function (id) {
17128      if (isUnmountedRef.current) return;
17129      dispatch({
17130        type: "unregisterItem",
17131        id: id
17132      });
17133    }),
17134    registerGroup: useAction(function (group) {
17135      if (isUnmountedRef.current) return;
17136      dispatch({
17137        type: "registerGroup",
17138        group: group
17139      });
17140    }),
17141    unregisterGroup: useAction(function (id) {
17142      if (isUnmountedRef.current) return;
17143      dispatch({
17144        type: "unregisterGroup",
17145        id: id
17146      });
17147    }),
17148    move: useAction(function (id) {
17149      return dispatch({
17150        type: "move",
17151        id: id
17152      });
17153    }),
17154    next: useAction(function (allTheWay) {
17155      return dispatch({
17156        type: "next",
17157        allTheWay: allTheWay
17158      });
17159    }),
17160    previous: useAction(function (allTheWay) {
17161      return dispatch({
17162        type: "previous",
17163        allTheWay: allTheWay
17164      });
17165    }),
17166    up: useAction(function (allTheWay) {
17167      return dispatch({
17168        type: "up",
17169        allTheWay: allTheWay
17170      });
17171    }),
17172    down: useAction(function (allTheWay) {
17173      return dispatch({
17174        type: "down",
17175        allTheWay: allTheWay
17176      });
17177    }),
17178    first: useAction(function () {
17179      return dispatch({
17180        type: "first"
17181      });
17182    }),
17183    last: useAction(function () {
17184      return dispatch({
17185        type: "last"
17186      });
17187    }),
17188    sort: useAction(function () {
17189      return dispatch({
17190        type: "sort"
17191      });
17192    }),
17193    unstable_setVirtual: useAction(function (value) {
17194      return dispatch({
17195        type: "setVirtual",
17196        virtual: value
17197      });
17198    }),
17199    setRTL: useAction(function (value) {
17200      return dispatch({
17201        type: "setRTL",
17202        rtl: value
17203      });
17204    }),
17205    setOrientation: useAction(function (value) {
17206      return dispatch({
17207        type: "setOrientation",
17208        orientation: value
17209      });
17210    }),
17211    setCurrentId: useAction(function (value) {
17212      return dispatch({
17213        type: "setCurrentId",
17214        currentId: value
17215      });
17216    }),
17217    setLoop: useAction(function (value) {
17218      return dispatch({
17219        type: "setLoop",
17220        loop: value
17221      });
17222    }),
17223    setWrap: useAction(function (value) {
17224      return dispatch({
17225        type: "setWrap",
17226        wrap: value
17227      });
17228    }),
17229    setShift: useAction(function (value) {
17230      return dispatch({
17231        type: "setShift",
17232        shift: value
17233      });
17234    }),
17235    unstable_setIncludesBaseElement: useAction(function (value) {
17236      return dispatch({
17237        type: "setIncludesBaseElement",
17238        includesBaseElement: value
17239      });
17240    }),
17241    reset: useAction(function () {
17242      return dispatch({
17243        type: "reset"
17244      });
17245    })
17246  });
17247}
17248
17249
17250
17251;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireBlurEvent.js
17252
17253
17254
17255
17256function createFocusEvent(element, type, eventInit) {
17257  if (eventInit === void 0) {
17258    eventInit = {};
17259  }
17260
17261  if (typeof FocusEvent === "function") {
17262    return new FocusEvent(type, eventInit);
17263  }
17264
17265  return createEvent(element, type, eventInit);
17266}
17267/**
17268 * Creates and dispatches a blur event in a way that also works on IE 11.
17269 *
17270 * @example
17271 * import { fireBlurEvent } from "reakit-utils";
17272 *
17273 * fireBlurEvent(document.getElementById("id"));
17274 */
17275
17276
17277function fireBlurEvent_fireBlurEvent(element, eventInit) {
17278  var event = createFocusEvent(element, "blur", eventInit);
17279  var defaultAllowed = element.dispatchEvent(event);
17280
17281  var bubbleInit = _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, eventInit), {}, {
17282    bubbles: true
17283  });
17284
17285  element.dispatchEvent(createFocusEvent(element, "focusout", bubbleInit));
17286  return defaultAllowed;
17287}
17288
17289
17290
17291;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireKeyboardEvent.js
17292
17293
17294
17295function createKeyboardEvent(element, type, eventInit) {
17296  if (eventInit === void 0) {
17297    eventInit = {};
17298  }
17299
17300  if (typeof KeyboardEvent === "function") {
17301    return new KeyboardEvent(type, eventInit);
17302  } // IE 11 doesn't support Event constructors
17303
17304
17305  var event = getDocument_getDocument(element).createEvent("KeyboardEvent");
17306  event.initKeyboardEvent(type, eventInit.bubbles, eventInit.cancelable, getWindow(element), eventInit.key, eventInit.location, eventInit.ctrlKey, eventInit.altKey, eventInit.shiftKey, eventInit.metaKey);
17307  return event;
17308}
17309/**
17310 * Creates and dispatches `KeyboardEvent` in a way that also works on IE 11.
17311 *
17312 * @example
17313 * import { fireKeyboardEvent } from "reakit-utils";
17314 *
17315 * fireKeyboardEvent(document.getElementById("id"), "keydown", {
17316 *   key: "ArrowDown",
17317 *   shiftKey: true,
17318 * });
17319 */
17320
17321
17322function fireKeyboardEvent_fireKeyboardEvent(element, type, eventInit) {
17323  return element.dispatchEvent(createKeyboardEvent(element, type, eventInit));
17324}
17325
17326
17327
17328;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getNextActiveElementOnBlur.js
17329
17330
17331
17332
17333
17334var isIE11 = canUseDOM && "msCrypto" in window;
17335/**
17336 * Cross-browser method that returns the next active element (the element that
17337 * is receiving focus) after a blur event is dispatched. It receives the blur
17338 * event object as the argument.
17339 *
17340 * @example
17341 * import { getNextActiveElementOnBlur } from "reakit-utils";
17342 *
17343 * const element = document.getElementById("id");
17344 * element.addEventListener("blur", (event) => {
17345 *   const nextActiveElement = getNextActiveElementOnBlur(event);
17346 * });
17347 */
17348
17349function getNextActiveElementOnBlur(event) {
17350  // IE 11 doesn't support event.relatedTarget on blur.
17351  // document.activeElement points the the next active element.
17352  // On modern browsers, document.activeElement points to the current target.
17353  if (isIE11) {
17354    var activeElement = getActiveElement_getActiveElement(event.currentTarget);
17355    return activeElement;
17356  }
17357
17358  return event.relatedTarget;
17359}
17360
17361
17362
17363;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/Composite.js
17364
17365
17366
17367
17368
17369
17370
17371
17372
17373
17374
17375
17376
17377
17378
17379
17380
17381
17382
17383
17384
17385
17386
17387
17388
17389
17390
17391
17392
17393var Composite_isIE11 = canUseDOM && "msCrypto" in window;
17394
17395function canProxyKeyboardEvent(event) {
17396  if (!isSelfTarget(event)) return false;
17397  if (event.metaKey) return false;
17398  if (event.key === "Tab") return false;
17399  return true;
17400}
17401
17402function useKeyboardEventProxy(virtual, currentItem, htmlEventHandler) {
17403  var eventHandlerRef = useLiveRef(htmlEventHandler);
17404  return (0,external_React_.useCallback)(function (event) {
17405    var _eventHandlerRef$curr;
17406
17407    (_eventHandlerRef$curr = eventHandlerRef.current) === null || _eventHandlerRef$curr === void 0 ? void 0 : _eventHandlerRef$curr.call(eventHandlerRef, event);
17408    if (event.defaultPrevented) return;
17409
17410    if (virtual && canProxyKeyboardEvent(event)) {
17411      var currentElement = currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current;
17412
17413      if (currentElement) {
17414        if (!fireKeyboardEvent_fireKeyboardEvent(currentElement, event.type, event)) {
17415          event.preventDefault();
17416        } // The event will be triggered on the composite item and then
17417        // propagated up to this composite element again, so we can pretend
17418        // that it wasn't called on this component in the first place.
17419
17420
17421        if (event.currentTarget.contains(currentElement)) {
17422          event.stopPropagation();
17423        }
17424      }
17425    }
17426  }, [virtual, currentItem]);
17427} // istanbul ignore next
17428
17429
17430function useActiveElementRef(elementRef) {
17431  var activeElementRef = (0,external_React_.useRef)(null);
17432  (0,external_React_.useEffect)(function () {
17433    var document = getDocument_getDocument(elementRef.current);
17434
17435    var onFocus = function onFocus(event) {
17436      var target = event.target;
17437      activeElementRef.current = target;
17438    };
17439
17440    document.addEventListener("focus", onFocus, true);
17441    return function () {
17442      document.removeEventListener("focus", onFocus, true);
17443    };
17444  }, []);
17445  return activeElementRef;
17446}
17447
17448function findFirstEnabledItemInTheLastRow(items) {
17449  return findFirstEnabledItem(flatten(reverse(groupItems(items))));
17450}
17451
17452function isItem(items, element) {
17453  return items === null || items === void 0 ? void 0 : items.some(function (item) {
17454    return !!element && item.ref.current === element;
17455  });
17456}
17457
17458function useScheduleUserFocus(currentItem) {
17459  var currentItemRef = useLiveRef(currentItem);
17460
17461  var _React$useReducer = (0,external_React_.useReducer)(function (n) {
17462    return n + 1;
17463  }, 0),
17464      scheduled = _React$useReducer[0],
17465      schedule = _React$useReducer[1];
17466
17467  (0,external_React_.useEffect)(function () {
17468    var _currentItemRef$curre;
17469
17470    var currentElement = (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.ref.current;
17471
17472    if (scheduled && currentElement) {
17473      userFocus(currentElement);
17474    }
17475  }
17475, [scheduled]);
17476  return schedule;
17477}
17478
17479var useComposite = createHook({
17480  name: "Composite",
17481  compose: [useTabbable],
17482  keys: COMPOSITE_KEYS,
17483  useOptions: function useOptions(options) {
17484    return _objectSpread2(_objectSpread2({}, options), {}, {
17485      currentId: getCurrentId(options)
17486    });
17487  },
17488  useProps: function useProps(options, _ref) {
17489    var htmlRef = _ref.ref,
17490        htmlOnFocusCapture = _ref.onFocusCapture,
17491        htmlOnFocus = _ref.onFocus,
17492        htmlOnBlurCapture = _ref.onBlurCapture,
17493        htmlOnKeyDown = _ref.onKeyDown,
17494        htmlOnKeyDownCapture = _ref.onKeyDownCapture,
17495        htmlOnKeyUpCapture = _ref.onKeyUpCapture,
17496        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocusCapture", "onFocus", "onBlurCapture", "onKeyDown", "onKeyDownCapture", "onKeyUpCapture"]);
17497
17498    var ref = (0,external_React_.useRef)(null);
17499    var currentItem = findEnabledItemById(options.items, options.currentId);
17500    var previousElementRef = (0,external_React_.useRef)(null);
17501    var onFocusCaptureRef = useLiveRef(htmlOnFocusCapture);
17502    var onFocusRef = useLiveRef(htmlOnFocus);
17503    var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture);
17504    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
17505    var scheduleUserFocus = useScheduleUserFocus(currentItem); // IE 11 doesn't support event.relatedTarget, so we use the active element
17506    // ref instead.
17507
17508    var activeElementRef = Composite_isIE11 ? useActiveElementRef(ref) : undefined;
17509    (0,external_React_.useEffect)(function () {
17510      var element = ref.current;
17511
17512      if (options.unstable_moves && !currentItem) {
17513         false ? 0 : void 0; // If composite.move(null) has been called, the composite container
17514        // will receive focus.
17515
17516        element === null || element === void 0 ? void 0 : element.focus();
17517      }
17518    }, [options.unstable_moves, currentItem]);
17519    var onKeyDownCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyDownCapture);
17520    var onKeyUpCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyUpCapture);
17521    var onFocusCapture = (0,external_React_.useCallback)(function (event) {
17522      var _onFocusCaptureRef$cu;
17523
17524      (_onFocusCaptureRef$cu = onFocusCaptureRef.current) === null || _onFocusCaptureRef$cu === void 0 ? void 0 : _onFocusCaptureRef$cu.call(onFocusCaptureRef, event);
17525      if (event.defaultPrevented) return;
17526      if (!options.unstable_virtual) return; // IE11 doesn't support event.relatedTarget, so we use the active
17527      // element ref instead.
17528
17529      var previousActiveElement = (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || event.relatedTarget;
17530      var previousActiveElementWasItem = isItem(options.items, previousActiveElement);
17531
17532      if (isSelfTarget(event) && previousActiveElementWasItem) {
17533        // Composite has been focused as a result of an item receiving focus.
17534        // The composite item will move focus back to the composite
17535        // container. In this case, we don't want to propagate this
17536        // additional event nor call the onFocus handler passed to
17537        // <Composite onFocus={...} />.
17538        event.stopPropagation(); // We keep track of the previous active item element so we can
17539        // manually fire a blur event on it later when the focus is moved to
17540        // another item on the onBlurCapture event below.
17541
17542        previousElementRef.current = previousActiveElement;
17543      }
17544    }, [options.unstable_virtual, options.items]);
17545    var onFocus = (0,external_React_.useCallback)(function (event) {
17546      var _onFocusRef$current;
17547
17548      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
17549      if (event.defaultPrevented) return;
17550
17551      if (options.unstable_virtual) {
17552        if (isSelfTarget(event)) {
17553          // This means that the composite element has been focused while the
17554          // composite item has not. For example, by clicking on the
17555          // composite element without touching any item, or by tabbing into
17556          // the composite element. In this case, we want to trigger focus on
17557          // the item, just like it would happen with roving tabindex.
17558          // When it receives focus, the composite item will put focus back
17559          // on the composite element, in which case hasItemWithFocus will be
17560          // true.
17561          scheduleUserFocus();
17562        }
17563      } else if (isSelfTarget(event)) {
17564        var _options$setCurrentId;
17565
17566        // When the roving tabindex composite gets intentionally focused (for
17567        // example, by clicking directly on it, and not on an item), we make
17568        // sure to set the current id to null (which means the composite
17569        // itself is focused).
17570        (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, null);
17571      }
17572    }, [options.unstable_virtual, options.setCurrentId]);
17573    var onBlurCapture = (0,external_React_.useCallback)(function (event) {
17574      var _onBlurCaptureRef$cur;
17575
17576      (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event);
17577      if (event.defaultPrevented) return;
17578      if (!options.unstable_virtual) return; // When virtual is set to true, we move focus from the composite
17579      // container (this component) to the composite item that is being
17580      // selected. Then we move focus back to the composite container. This
17581      // is so we can provide the same API as the roving tabindex method,
17582      // which means people can attach onFocus/onBlur handlers on the
17583      // CompositeItem component regardless of whether it's virtual or not.
17584      // This sequence of blurring and focusing items and composite may be
17585      // confusing, so we ignore intermediate focus and blurs by stopping its
17586      // propagation and not calling the passed onBlur handler (htmlOnBlur).
17587
17588      var currentElement = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current) || null;
17589      var nextActiveElement = getNextActiveElementOnBlur(event);
17590      var nextActiveElementIsItem = isItem(options.items, nextActiveElement);
17591
17592      if (isSelfTarget(event) && nextActiveElementIsItem) {
17593        // This is an intermediate blur event: blurring the composite
17594        // container to focus an item (nextActiveElement).
17595        if (nextActiveElement === currentElement) {
17596          // The next active element will be the same as the current item in
17597          // the state in two scenarios:
17598          //   - Moving focus with keyboard: the state is updated before the
17599          // blur event is triggered, so here the current item is already
17600          // pointing to the next active element.
17601          //   - Clicking on the current active item with a pointer: this
17602          // will trigger blur on the composite element and then the next
17603          // active element will be the same as the current item. Clicking on
17604          // an item other than the current one doesn't end up here as the
17605          // currentItem state will be updated only after it.
17606          if (previousElementRef.current && previousElementRef.current !== nextActiveElement) {
17607            // If there's a previous active item and it's not a click action,
17608            // then we fire a blur event on it so it will work just like if
17609            // it had DOM focus before (like when using roving tabindex).
17610            fireBlurEvent_fireBlurEvent(previousElementRef.current, event);
17611          }
17612        } else if (currentElement) {
17613          // This will be true when the next active element is not the
17614          // current element, but there's a current item. This will only
17615          // happen when clicking with a pointer on a different item, when
17616          // there's already an item selected, in which case currentElement
17617          // is the item that is getting blurred, and nextActiveElement is
17618          // the item that is being clicked.
17619          fireBlurEvent_fireBlurEvent(currentElement, event);
17620        } // We want to ignore intermediate blur events, so we stop its
17621        // propagation and return early so onFocus will not be called.
17622
17623
17624        event.stopPropagation();
17625      } else {
17626        var targetIsItem = isItem(options.items, event.target);
17627
17628        if (!targetIsItem && currentElement) {
17629          // If target is not a composite item, it may be the composite
17630          // element itself (isSelfTarget) or a tabbable element inside the
17631          // composite widget. This may be triggered by clicking outside the
17632          // composite widget or by tabbing out of it. In either cases we
17633          // want to fire a blur event on the current item.
17634          fireBlurEvent_fireBlurEvent(currentElement, event);
17635        }
17636      }
17637    }, [options.unstable_virtual, options.items, currentItem]);
17638    var onKeyDown = (0,external_React_.useCallback)(function (event) {
17639      var _onKeyDownRef$current, _options$groups;
17640
17641      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
17642      if (event.defaultPrevented) return;
17643      if (options.currentId !== null) return;
17644      if (!isSelfTarget(event)) return;
17645      var isVertical = options.orientation !== "horizontal";
17646      var isHorizontal = options.orientation !== "vertical";
17647      var isGrid = !!((_options$groups = options.groups) !== null && _options$groups !== void 0 && _options$groups.length);
17648
17649      var up = function up() {
17650        if (isGrid) {
17651          var item = findFirstEnabledItemInTheLastRow(options.items);
17652
17653          if (item !== null && item !== void 0 && item.id) {
17654            var _options$move;
17655
17656            (_options$move = options.move) === null || _options$move === void 0 ? void 0 : _options$move.call(options, item.id);
17657          }
17658        } else {
17659          var _options$last;
17660
17661          (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options);
17662        }
17663      };
17664
17665      var keyMap = {
17666        ArrowUp: (isGrid || isVertical) && up,
17667        ArrowRight: (isGrid || isHorizontal) && options.first,
17668        ArrowDown: (isGrid || isVertical) && options.first,
17669        ArrowLeft: (isGrid || isHorizontal) && options.last,
17670        Home: options.first,
17671        End: options.last,
17672        PageUp: options.first,
17673        PageDown: options.last
17674      };
17675      var action = keyMap[event.key];
17676
17677      if (action) {
17678        event.preventDefault();
17679        action();
17680      }
17681    }, [options.currentId, options.orientation, options.groups, options.items, options.move, options.last, options.first]);
17682    return _objectSpread2({
17683      ref: useForkRef(ref, htmlRef),
17684      id: options.baseId,
17685      onFocus: onFocus,
17686      onFocusCapture: onFocusCapture,
17687      onBlurCapture: onBlurCapture,
17688      onKeyDownCapture: onKeyDownCapture,
17689      onKeyDown: onKeyDown,
17690      onKeyUpCapture: onKeyUpCapture,
17691      "aria-activedescendant": options.unstable_virtual ? (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) || undefined : undefined
17692    }, htmlProps);
17693  },
17694  useComposeProps: function useComposeProps(options, htmlProps) {
17695    htmlProps = useRole(options, htmlProps, true);
17696    var tabbableHTMLProps = useTabbable(options, htmlProps, true);
17697
17698    if (options.unstable_virtual || options.currentId === null) {
17699      // Composite will only be tabbable by default if the focus is managed
17700      // using aria-activedescendant, which requires DOM focus on the container
17701      // element (the composite)
17702      return _objectSpread2({
17703        tabIndex: 0
17704      }, tabbableHTMLProps);
17705    }
17706
17707    return _objectSpread2(_objectSpread2({}, htmlProps), {}, {
17708      ref: tabbableHTMLProps.ref
17709    });
17710  }
17711});
17712var Composite = createComponent({
17713  as: "div",
17714  useHook: useComposite,
17715  useCreateElement: function useCreateElement$1(type, props, children) {
17716     false ? 0 : void 0;
17717    return useCreateElement(type, props, children);
17718  }
17719});
17720
17721
17722
17723;// CONCATENATED MODULE: ./node_modules/reakit/es/Group/Group.js
17724
17725
17726
17727
17728
17729
17730// Automatically generated
17731var GROUP_KEYS = [];
17732
17733var useGroup = createHook({
17734  name: "Group",
17735  compose: useRole,
17736  keys: GROUP_KEYS,
17737  useProps: function useProps(_, htmlProps) {
17738    return _objectSpread2({
17739      role: "group"
17740    }, htmlProps);
17741  }
17742});
17743var Group = createComponent({
17744  as: "div",
17745  useHook: useGroup
17746});
17747
17748
17749
17750;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeGroup.js
17751
17752
17753
17754
17755
17756
17757
17758
17759
17760
17761
17762
17763
17764
17765var useCompositeGroup = createHook({
17766  name: "CompositeGroup",
17767  compose: [useGroup, unstable_useId],
17768  keys: COMPOSITE_GROUP_KEYS,
17769  propsAreEqual: function propsAreEqual(prev, next) {
17770    if (!next.id || prev.id !== next.id) {
17771      return useGroup.unstable_propsAreEqual(prev, next);
17772    }
17773
17774    var prevCurrentId = prev.currentId,
17775        prevMoves = prev.unstable_moves,
17776        prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]);
17777
17778    var nextCurrentId = next.currentId,
17779        nextMoves = next.unstable_moves,
17780        nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]);
17781
17782    if (prev.items && next.items) {
17783      var prevCurrentItem = findEnabledItemById(prev.items, prevCurrentId);
17784      var nextCurrentItem = findEnabledItemById(next.items, nextCurrentId);
17785      var prevGroupId = prevCurrentItem === null || prevCurrentItem === void 0 ? void 0 : prevCurrentItem.groupId;
17786      var nextGroupId = nextCurrentItem === null || nextCurrentItem === void 0 ? void 0 : nextCurrentItem.groupId;
17787
17788      if (next.id === nextGroupId || next.id === prevGroupId) {
17789        return false;
17790      }
17791    }
17792
17793    return useGroup.unstable_propsAreEqual(prevProps, nextProps);
17794  },
17795  useProps: function useProps(options, _ref) {
17796    var htmlRef = _ref.ref,
17797        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref"]);
17798
17799    var ref = (0,external_React_.useRef)(null);
17800    var id = options.id; // We need this to be called before CompositeItems' register
17801
17802    useIsomorphicEffect(function () {
17803      var _options$registerGrou;
17804
17805      if (!id) return undefined;
17806      (_options$registerGrou = options.registerGroup) === null || _options$registerGrou === void 0 ? void 0 : _options$registerGrou.call(options, {
17807        id: id,
17808        ref: ref
17809      });
17810      return function () {
17811        var _options$unregisterGr;
17812
17813        (_options$unregisterGr = options.unregisterGroup) === null || _options$unregisterGr === void 0 ? void 0 : _options$unregisterGr.call(options, id);
17814      };
17815    }, [id, options.registerGroup, options.unregisterGroup]);
17816    return _objectSpread2({
17817      ref: useForkRef(ref, htmlRef)
17818    }, htmlProps);
17819  }
17820});
17821var CompositeGroup = createComponent({
17822  as: "div",
17823  useHook: useCompositeGroup
17824});
17825
17826
17827
17828;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
17829
17830function alignment_matrix_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
17831/**
17832 * External dependencies
17833 */
17834
17835
17836
17837/**
17838 * Internal dependencies
17839 */
17840
17841const alignment_matrix_control_icon_styles_rootSize = () => {
17842  const padding = 1.5;
17843  const size = 24;
17844  return /*#__PURE__*/emotion_react_browser_esm_css({
17845    gridTemplateRows: `repeat( 3, calc( ${size - padding * 2}px / 3))`,
17846    padding,
17847    maxHeight: size,
17848    maxWidth: size
17849  },  true ? "" : 0,  true ? "" : 0);
17850};
17851const rootPointerEvents = ({
17852  disablePointerEvents
17853}) => {
17854  return /*#__PURE__*/emotion_react_browser_esm_css({
17855    pointerEvents: disablePointerEvents ? 'none' : undefined
17856  },  true ? "" : 0,  true ? "" : 0);
17857};
17858const Wrapper = emotion_styled_base_browser_esm("div",  true ? {
17859  target: "erowt52"
17860} : 0)( true ? {
17861  name: "ogl07i",
17862  styles: "box-sizing:border-box;padding:2px"
17863} : 0);
17864const alignment_matrix_control_icon_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
17865  target: "erowt51"
17866} : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0));
17867const alignment_matrix_control_icon_styles_pointActive = ({
17868  isActive
17869}) => {
17870  const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
17871  return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0),  true ? "" : 0);
17872};
17873const alignment_matrix_control_icon_styles_Point = emotion_styled_base_browser_esm("span",  true ? {
17874  target: "erowt50"
17875} : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0));
17876const alignment_matrix_control_icon_styles_Cell = Cell;
17877
17878;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/icon.js
17879
17880/**
17881 * External dependencies
17882 */
17883
17884
17885/**
17886 * Internal dependencies
17887 */
17888
17889
17890const BASE_SIZE = 24;
17891function AlignmentMatrixControlIcon({
17892  className,
17893  disablePointerEvents = true,
17894  size = BASE_SIZE,
17895  style = {},
17896  value = 'center',
17897  ...props
17898}) {
17899  const alignIndex = getAlignmentIndex(value);
17900  const scale = (size / BASE_SIZE).toFixed(2);
17901  const classes = classnames_default()('component-alignment-matrix-control-icon', className);
17902  const styles = {
17903    ...style,
17904    transform: `scale(${scale})`
17905  };
17906  return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Root, {
17907    ...props,
17908    className: classes,
17909    disablePointerEvents: disablePointerEvents,
17910    role: "presentation",
17911    style: styles
17912  }, ALIGNMENTS.map((align, index) => {
17913    const isActive = alignIndex === index;
17914    return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Cell, {
17915      key: align
17916    }, (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Point, {
17917      isActive: isActive
17918    }));
17919  }));
17920}
17921/* harmony default export */ const icon = (AlignmentMatrixControlIcon);
17922
17923;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/index.js
17924
17925/**
17926 * External dependencies
17927 */
17928
17929
17930/**
17931 * WordPress dependencies
17932 */
17933
17934
17935
17936
17937/**
17938 * Internal dependencies
17939 */
17940
17941
17942
17943
17944
17945const alignment_matrix_control_noop = () => {};
17946function useBaseId(id) {
17947  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
17948  return id || instanceId;
17949}
17950
17951/**
17952 *
17953 * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
17954 *
17955 * ```jsx
17956 * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
17957 * import { useState } from '@wordpress/element';
17958 *
17959 * const Example = () => {
17960 * 	const [ alignment, setAlignment ] = useState( 'center center' );
17961 *
17962 * 	return (
17963 * 		<AlignmentMatrixControl
17964 * 			value={ alignment }
17965 * 			onChange={ setAlignment }
17966 * 		/>
17967 * 	);
17968 * };
17969 * ```
17970 */
17971function AlignmentMatrixControl({
17972  className,
17973  id,
17974  label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'),
17975  defaultValue = 'center center',
17976  value,
17977  onChange = alignment_matrix_control_noop,
17978  width = 92,
17979  ...props
17980}) {
17981  const [immutableDefaultValue] = (0,external_wp_element_namespaceObject.useState)(value !== null && value !== void 0 ? value : defaultValue);
17982  const baseId = useBaseId(id);
17983  const initialCurrentId = getItemId(baseId, immutableDefaultValue);
17984  const composite = useCompositeState({
17985    baseId,
17986    currentId: initialCurrentId,
17987    rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
17988  });
17989  const handleOnChange = nextValue => {
17990    onChange(nextValue);
17991  };
17992  const {
17993    setCurrentId
17994  } = composite;
17995  (0,external_wp_element_namespaceObject.useEffect)(() => {
17996    if (typeof value !== 'undefined') {
17997      setCurrentId(getItemId(baseId, value));
17998    }
17999  }, [value, setCurrentId, baseId]);
18000  const classes = classnames_default()('component-alignment-matrix-control', className);
18001  return (0,external_wp_element_namespaceObject.createElement)(Composite, {
18002    ...props,
18003    ...composite,
18004    "aria-label": label,
18005    as: Root,
18006    className: classes,
18007    role: "grid",
18008    size: width
18009  }, GRID.map((cells, index) => (0,external_wp_element_namespaceObject.createElement)(CompositeGroup, {
18010    ...composite,
18011    as: Row,
18012    role: "row",
18013    key: index
18014  }, cells.map(cell => {
18015    const cellId = getItemId(baseId, cell);
18016    const isActive = composite.currentId === cellId;
18017    return (0,external_wp_element_namespaceObject.createElement)(cell_Cell, {
18018      ...composite,
18019      id: cellId,
18020      isActive: isActive,
18021      key: cell,
18022      value: cell,
18023      onFocus: () => handleOnChange(cell),
18024      tabIndex: isActive ? 0 : -1
18025    });
18026  }))));
18027}
18028AlignmentMatrixControl.Icon = icon;
18029/* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl);
18030
18031;// CONCATENATED MODULE: ./packages/components/build-module/animate/index.js
18032/**
18033 * External dependencies
18034 */
18035
18036
18037/**
18038 * Internal dependencies
18039 */
18040
18041/**
18042 * @param type The animation type
18043 * @return Default origin
18044 */
18045function getDefaultOrigin(type) {
18046  return type === 'appear' ? 'top' : 'left';
18047}
18048
18049/**
18050 * @param options
18051 *
18052 * @return ClassName that applies the animations
18053 */
18054function getAnimateClassName(options) {
18055  if (options.type === 'loading') {
18056    return classnames_default()('components-animate__loading');
18057  }
18058  const {
18059    type,
18060    origin = getDefaultOrigin(type)
18061  } = options;
18062  if (type === 'appear') {
18063    const [yAxis, xAxis = 'center'] = origin.split(' ');
18064    return classnames_default()('components-animate__appear', {
18065      ['is-from-' + xAxis]: xAxis !== 'center',
18066      ['is-from-' + yAxis]: yAxis !== 'middle'
18067    });
18068  }
18069  if (type === 'slide-in') {
18070    return classnames_default()('components-animate__slide-in', 'is-from-' + origin);
18071  }
18072  return undefined;
18073}
18074
18075/**
18076 * Simple interface to introduce animations to components.
18077 *
18078 * ```jsx
18079 * import { Animate, Notice } from '@wordpress/components';
18080 *
18081 * const MyAnimatedNotice = () => (
18082 * 	<Animate type="slide-in" options={ { origin: 'top' } }>
18083 * 		{ ( { className } ) => (
18084 * 			<Notice className={ className } status="success">
18085 * 				<p>Animation finished.</p>
18086 * 			</Notice>
18087 * 		) }
18088 * 	</Animate>
18089 * );
18090 * ```
18091 */
18092function Animate({
18093  type,
18094  options = {},
18095  children
18096}) {
18097  return children({
18098    className: getAnimateClassName({
18099      type,
18100      ...options
18101    })
18102  });
18103}
18104/* harmony default export */ const animate = (Animate);
18105
18106;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
18107
18108
18109/**
18110 * @public
18111 */
18112const MotionConfigContext = (0,external_React_.createContext)({
18113    transformPagePoint: (p) => p,
18114    isStatic: false,
18115    reducedMotion: "never",
18116});
18117
18118
18119
18120;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
18121
18122
18123const MotionContext = (0,external_React_.createContext)({});
18124
18125
18126
18127;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/PresenceContext.mjs
18128
18129
18130/**
18131 * @public
18132 */
18133const PresenceContext_PresenceContext = (0,external_React_.createContext)(null);
18134
18135
18136
18137;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-browser.mjs
18138const is_browser_isBrowser = typeof document !== "undefined";
18139
18140
18141
18142;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
18143
18144
18145
18146const useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect;
18147
18148
18149
18150;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/LazyContext.mjs
18151
18152
18153const LazyContext = (0,external_React_.createContext)({ strict: false });
18154
18155
18156
18157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
18158
18159
18160
18161
18162
18163
18164
18165function useVisualElement(Component, visualState, props, createVisualElement) {
18166    const { visualElement: parent } = (0,external_React_.useContext)(MotionContext);
18167    const lazyContext = (0,external_React_.useContext)(LazyContext);
18168    const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext);
18169    const reducedMotionConfig = (0,external_React_.useContext)(MotionConfigContext).reducedMotion;
18170    const visualElementRef = (0,external_React_.useRef)();
18171    /**
18172     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
18173     */
18174    createVisualElement = createVisualElement || lazyContext.renderer;
18175    if (!visualElementRef.current && createVisualElement) {
18176        visualElementRef.current = createVisualElement(Component, {
18177            visualState,
18178            parent,
18179            props,
18180            presenceContext,
18181            blockInitialAnimation: presenceContext
18182                ? presenceContext.initial === false
18183                : false,
18184            reducedMotionConfig,
18185        });
18186    }
18187    const visualElement = visualElementRef.current;
18188    (0,external_React_.useInsertionEffect)(() => {
18189        visualElement && visualElement.update(props, presenceContext);
18190    });
18191    useIsomorphicLayoutEffect(() => {
18192        visualElement && visualElement.render();
18193    });
18194    (0,external_React_.useEffect)(() => {
18195        visualElement && visualElement.updateFeatures();
18196    });
18197    /**
18198     * Ideally this function would always run in a useEffect.
18199     *
18200     * However, if we have optimised appear animations to handoff from,
18201     * it needs to happen synchronously to ensure there's no flash of
18202     * incorrect styles in the event of a hydration error.
18203     *
18204     * So if we detect a situtation where optimised appear animations
18205     * are running, we use useLayoutEffect to trigger animations.
18206     */
18207    const useAnimateChangesEffect = window.HandoffAppearAnimations
18208        ? useIsomorphicLayoutEffect
18209        : external_React_.useEffect;
18210    useAnimateChangesEffect(() => {
18211        if (visualElement && visualElement.animationState) {
18212            visualElement.animationState.animateChanges();
18213        }
18214    });
18215    return visualElement;
18216}
18217
18218
18219
18220;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
18221function is_ref_object_isRefObject(ref) {
18222    return (typeof ref === "object" &&
18223        Object.prototype.hasOwnProperty.call(ref, "current"));
18224}
18225
18226
18227
18228;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
18229
18230
18231
18232/**
18233 * Creates a ref function that, when called, hydrates the provided
18234 * external ref and VisualElement.
18235 */
18236function useMotionRef(visualState, visualElement, externalRef) {
18237    return (0,external_React_.useCallback)((instance) => {
18238        instance && visualState.mount && visualState.mount(instance);
18239        if (visualElement) {
18240            instance
18241                ? visualElement.mount(instance)
18242                : visualElement.unmount();
18243        }
18244        if (externalRef) {
18245            if (typeof externalRef === "function") {
18246                externalRef(instance);
18247            }
18248            else if (is_ref_object_isRefObject(externalRef)) {
18249                externalRef.current = instance;
18250            }
18251        }
18252    }, 
18253    /**
18254     * Only pass a new ref callback to React if we've received a visual element
18255     * factory. Otherwise we'll be mounting/remounting every time externalRef
18256     * or other dependencies change.
18257     */
18258    [visualElement]);
18259}
18260
18261
18262
18263;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
18264/**
18265 * Decides if the supplied variable is variant label
18266 */
18267function isVariantLabel(v) {
18268    return typeof v === "string" || Array.isArray(v);
18269}
18270
18271
18272
18273;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
18274function isAnimationControls(v) {
18275    return typeof v === "object" && typeof v.start === "function";
18276}
18277
18278
18279
18280;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
18281const variantPriorityOrder = [
18282    "animate",
18283    "whileInView",
18284    "whileFocus",
18285    "whileHover",
18286    "whileTap",
18287    "whileDrag",
18288    "exit",
18289];
18290const variantProps = ["initial", ...variantPriorityOrder];
18291
18292
18293
18294;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
18295
18296
18297
18298
18299function isControllingVariants(props) {
18300    return (isAnimationControls(props.animate) ||
18301        variantProps.some((name) => isVariantLabel(props[name])));
18302}
18303function isVariantNode(props) {
18304    return Boolean(isControllingVariants(props) || props.variants);
18305}
18306
18307
18308
18309;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
18310
18311
18312
18313function getCurrentTreeVariants(props, context) {
18314    if (isControllingVariants(props)) {
18315        const { initial, animate } = props;
18316        return {
18317            initial: initial === false || isVariantLabel(initial)
18318                ? initial
18319                : undefined,
18320            animate: isVariantLabel(animate) ? animate : undefined,
18321        };
18322    }
18323    return props.inherit !== false ? context : {};
18324}
18325
18326
18327
18328;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
18329
18330
18331
18332
18333function useCreateMotionContext(props) {
18334    const { initial, animate } = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext));
18335    return (0,external_React_.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
18336}
18337function variantLabelsAsDependency(prop) {
18338    return Array.isArray(prop) ? prop.join(" ") : prop;
18339}
18340
18341
18342
18343;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/definitions.mjs
18344const featureProps = {
18345    animation: [
18346        "animate",
18347        "variants",
18348        "whileHover",
18349        "whileTap",
18350        "exit",
18351        "whileInView",
18352        "whileFocus",
18353        "whileDrag",
18354    ],
18355    exit: ["exit"],
18356    drag: ["drag", "dragControls"],
18357    focus: ["whileFocus"],
18358    hover: ["whileHover", "onHoverStart", "onHoverEnd"],
18359    tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
18360    pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
18361    inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
18362    layout: ["layout", "layoutId"],
18363};
18364const featureDefinitions = {};
18365for (const key in featureProps) {
18366    featureDefinitions[key] = {
18367        isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
18368    };
18369}
18370
18371
18372
18373;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/load-features.mjs
18374
18375
18376function loadFeatures(features) {
18377    for (const key in features) {
18378        featureDefinitions[key] = {
18379            ...featureDefinitions[key],
18380            ...features[key],
18381        };
18382    }
18383}
18384
18385
18386
18387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
18388
18389
18390const LayoutGroupContext = (0,external_React_.createContext)({});
18391
18392
18393
18394;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
18395
18396
18397/**
18398 * Internal, exported only for usage in Framer
18399 */
18400const SwitchLayoutGroupContext = (0,external_React_.createContext)({});
18401
18402
18403
18404;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
18405const motionComponentSymbol = Symbol.for("motionComponentSymbol");
18406
18407
18408
18409;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/index.mjs
18410
18411
18412
18413
18414
18415
18416
18417
18418
18419
18420
18421
18422
18423
18424/**
18425 * Create a `motion` component.
18426 *
18427 * This function accepts a Component argument, which can be either a string (ie "div"
18428 * for `motion.div`), or an actual React component.
18429 *
18430 * Alongside this is a config option which provides a way of rendering the provided
18431 * component "offline", or outside the React render cycle.
18432 */
18433function motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
18434    preloadedFeatures && loadFeatures(preloadedFeatures);
18435    function MotionComponent(props, externalRef) {
18436        /**
18437         * If we need to measure the element we load this functionality in a
18438         * separate class component in order to gain access to getSnapshotBeforeUpdate.
18439         */
18440        let MeasureLayout;
18441        const configAndProps = {
18442            ...(0,external_React_.useContext)(MotionConfigContext),
18443            ...props,
18444            layoutId: useLayoutId(props),
18445        };
18446        const { isStatic } = configAndProps;
18447        const context = useCreateMotionContext(props);
18448        const visualState = useVisualState(props, isStatic);
18449        if (!isStatic && is_browser_isBrowser) {
18450            /**
18451             * Create a VisualElement for this component. A VisualElement provides a common
18452             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
18453             * providing a way of rendering to these APIs outside of the React render loop
18454             * for more performant animations and interactions
18455             */
18456            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
18457            /**
18458             * Load Motion gesture and animation features. These are rendered as renderless
18459             * components so each feature can optionally make use of React lifecycle methods.
18460             */
18461            const initialLayoutGroupConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext);
18462            const isStrict = (0,external_React_.useContext)(LazyContext).strict;
18463            if (context.visualElement) {
18464                MeasureLayout = context.visualElement.loadFeatures(
18465                // Note: Pass the full new combined props to correctly re-render dynamic feature components.
18466                configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
18467            }
18468        }
18469        /**
18470         * The mount order and hierarchy is specific to ensure our element ref
18471         * is hydrated by the time features fire their effects.
18472         */
18473        return (external_React_.createElement(MotionContext.Provider, { value: context },
18474            MeasureLayout && context.visualElement ? (external_React_.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,
18475            useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
18476    }
18477    const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent);
18478    ForwardRefComponent[motionComponentSymbol] = Component;
18479    return ForwardRefComponent;
18480}
18481function useLayoutId({ layoutId }) {
18482    const layoutGroupId = (0,external_React_.useContext)(LayoutGroupContext).id;
18483    return layoutGroupId && layoutId !== undefined
18484        ? layoutGroupId + "-" + layoutId
18485        : layoutId;
18486}
18487
18488
18489
18490;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs
18491
18492
18493/**
18494 * Convert any React component into a `motion` component. The provided component
18495 * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
18496 *
18497 * ```jsx
18498 * const Component = React.forwardRef((props, ref) => {
18499 *   return <div ref={ref} />
18500 * })
18501 *
18502 * const MotionComponent = motion(Component)
18503 * ```
18504 *
18505 * @public
18506 */
18507function createMotionProxy(createConfig) {
18508    function custom(Component, customMotionComponentConfig = {}) {
18509        return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig));
18510    }
18511    if (typeof Proxy === "undefined") {
18512        return custom;
18513    }
18514    /**
18515     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
18516     * Rather than generating them anew every render.
18517     */
18518    const componentCache = new Map();
18519    return new Proxy(custom, {
18520        /**
18521         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
18522         * The prop name is passed through as `key` and we can use that to generate a `motion`
18523         * DOM component with that name.
18524         */
18525        get: (_target, key) => {
18526            /**
18527             * If this element doesn't exist in the component cache, create it and cache.
18528             */
18529            if (!componentCache.has(key)) {
18530                componentCache.set(key, custom(key));
18531            }
18532            return componentCache.get(key);
18533        },
18534    });
18535}
18536
18537
18538
18539;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
18540/**
18541 * We keep these listed seperately as we use the lowercase tag names as part
18542 * of the runtime bundle to detect SVG components
18543 */
18544const lowercaseSVGElements = [
18545    "animate",
18546    "circle",
18547    "defs",
18548    "desc",
18549    "ellipse",
18550    "g",
18551    "image",
18552    "line",
18553    "filter",
18554    "marker",
18555    "mask",
18556    "metadata",
18557    "path",
18558    "pattern",
18559    "polygon",
18560    "polyline",
18561    "rect",
18562    "stop",
18563    "switch",
18564    "symbol",
18565    "svg",
18566    "text",
18567    "tspan",
18568    "use",
18569    "view",
18570];
18571
18572
18573
18574;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
18575
18576
18577function isSVGComponent(Component) {
18578    if (
18579    /**
18580     * If it's not a string, it's a custom React component. Currently we only support
18581     * HTML custom React components.
18582     */
18583    typeof Component !== "string" ||
18584        /**
18585         * If it contains a dash, the element is a custom HTML webcomponent.
18586         */
18587        Component.includes("-")) {
18588        return false;
18589    }
18590    else if (
18591    /**
18592     * If it's in our list of lowercase SVG tags, it's an SVG component
18593     */
18594    lowercaseSVGElements.indexOf(Component) > -1 ||
18595        /**
18596         * If it contains a capital letter, it's an SVG component
18597         */
18598        /[A-Z]/.test(Component)) {
18599        return true;
18600    }
18601    return false;
18602}
18603
18604
18605
18606;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
18607const scaleCorrectors = {};
18608function addScaleCorrector(correctors) {
18609    Object.assign(scaleCorrectors, correctors);
18610}
18611
18612
18613
18614;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
18615/**
18616 * Generate a list of every possible transform key.
18617 */
18618const transformPropOrder = [
18619    "transformPerspective",
18620    "x",
18621    "y",
18622    "z",
18623    "translateX",
18624    "translateY",
18625    "translateZ",
18626    "scale",
18627    "scaleX",
18628    "scaleY",
18629    "rotate",
18630    "rotateX",
18631    "rotateY",
18632    "rotateZ",
18633    "skew",
18634    "skewX",
18635    "skewY",
18636];
18637/**
18638 * A quick lookup for transform props.
18639 */
18640const transformProps = new Set(transformPropOrder);
18641
18642
18643
18644;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
18645
18646
18647
18648function isForcedMotionValue(key, { layout, layoutId }) {
18649    return (transformProps.has(key) ||
18650        key.startsWith("origin") ||
18651        ((layout || layoutId !== undefined) &&
18652            (!!scaleCorrectors[key] || key === "opacity")));
18653}
18654
18655
18656
18657;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
18658const isMotionValue = (value) => Boolean(value && value.getVelocity);
18659
18660
18661
18662;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
18663
18664
18665const translateAlias = {
18666    x: "translateX",
18667    y: "translateY",
18668    z: "translateZ",
18669    transformPerspective: "perspective",
18670};
18671const numTransforms = transformPropOrder.length;
18672/**
18673 * Build a CSS transform style from individual x/y/scale etc properties.
18674 *
18675 * This outputs with a default order of transforms/scales/rotations, this can be customised by
18676 * providing a transformTemplate function.
18677 */
18678function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
18679    // The transform string we're going to build into.
18680    let transformString = "";
18681    /**
18682     * Loop over all possible transforms in order, adding the ones that
18683     * are present to the transform string.
18684     */
18685    for (let i = 0; i < numTransforms; i++) {
18686        const key = transformPropOrder[i];
18687        if (transform[key] !== undefined) {
18688            const transformName = translateAlias[key] || key;
18689            transformString += `${transformName}(${transform[key]}) `;
18690        }
18691    }
18692    if (enableHardwareAcceleration && !transform.z) {
18693        transformString += "translateZ(0)";
18694    }
18695    transformString = transformString.trim();
18696    // If we have a custom `transform` template, pass our transform values and
18697    // generated transformString to that before returning
18698    if (transformTemplate) {
18699        transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
18700    }
18701    else if (allowTransformNone && transformIsDefault) {
18702        transformString = "none";
18703    }
18704    return transformString;
18705}
18706
18707
18708
18709;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
18710const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
18711const isCSSVariableName = checkStringStartsWith("--");
18712const isCSSVariableToken = checkStringStartsWith("var(--");
18713const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
18714
18715
18716
18717;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
18718/**
18719 * Provided a value and a ValueType, returns the value as that value type.
18720 */
18721const getValueAsType = (value, type) => {
18722    return type && typeof value === "number"
18723        ? type.transform(value)
18724        : value;
18725};
18726
18727
18728
18729;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/clamp.mjs
18730const clamp_clamp = (min, max, v) => Math.min(Math.max(v, min), max);
18731
18732
18733
18734;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
18735
18736
18737const number = {
18738    test: (v) => typeof v === "number",
18739    parse: parseFloat,
18740    transform: (v) => v,
18741};
18742const alpha = {
18743    ...number,
18744    transform: (v) => clamp_clamp(0, 1, v),
18745};
18746const scale = {
18747    ...number,
18748    default: 1,
18749};
18750
18751
18752
18753;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/utils.mjs
18754/**
18755 * TODO: When we move from string as a source of truth to data models
18756 * everything in this folder should probably be referred to as models vs types
18757 */
18758// If this number is a decimal, make it just five decimal places
18759// to avoid exponents
18760const sanitize = (v) => Math.round(v * 100000) / 100000;
18761const floatRegex = /(-)?([\d]*\.?[\d])+/g;
18762const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
18763const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
18764function isString(v) {
18765    return typeof v === "string";
18766}
18767
18768
18769
18770;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
18771
18772
18773const createUnitType = (unit) => ({
18774    test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
18775    parse: parseFloat,
18776    transform: (v) => `${v}${unit}`,
18777});
18778const degrees = createUnitType("deg");
18779const percent = createUnitType("%");
18780const px = createUnitType("px");
18781const vh = createUnitType("vh");
18782const vw = createUnitType("vw");
18783const progressPercentage = {
18784    ...percent,
18785    parse: (v) => percent.parse(v) / 100,
18786    transform: (v) => percent.transform(v * 100),
18787};
18788
18789
18790
18791;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
18792
18793
18794const type_int_int = {
18795    ...number,
18796    transform: Math.round,
18797};
18798
18799
18800
18801;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
18802
18803
18804
18805
18806const numberValueTypes = {
18807    // Border props
18808    borderWidth: px,
18809    borderTopWidth: px,
18810    borderRightWidth: px,
18811    borderBottomWidth: px,
18812    borderLeftWidth: px,
18813    borderRadius: px,
18814    radius: px,
18815    borderTopLeftRadius: px,
18816    borderTopRightRadius: px,
18817    borderBottomRightRadius: px,
18818    borderBottomLeftRadius: px,
18819    // Positioning props
18820    width: px,
18821    maxWidth: px,
18822    height: px,
18823    maxHeight: px,
18824    size: px,
18825    top: px,
18826    right: px,
18827    bottom: px,
18828    left: px,
18829    // Spacing props
18830    padding: px,
18831    paddingTop: px,
18832    paddingRight: px,
18833    paddingBottom: px,
18834    paddingLeft: px,
18835    margin: px,
18836    marginTop: px,
18837    marginRight: px,
18838    marginBottom: px,
18839    marginLeft: px,
18840    // Transform props
18841    rotate: degrees,
18842    rotateX: degrees,
18843    rotateY: degrees,
18844    rotateZ: degrees,
18845    scale: scale,
18846    scaleX: scale,
18847    scaleY: scale,
18848    scaleZ: scale,
18849    skew: degrees,
18850    skewX: degrees,
18851    skewY: degrees,
18852    distance: px,
18853    translateX: px,
18854    translateY: px,
18855    translateZ: px,
18856    x: px,
18857    y: px,
18858    z: px,
18859    perspective: px,
18860    transformPerspective: px,
18861    opacity: alpha,
18862    originX: progressPercentage,
18863    originY: progressPercentage,
18864    originZ: px,
18865    // Misc
18866    zIndex: type_int_int,
18867    // SVG
18868    fillOpacity: alpha,
18869    strokeOpacity: alpha,
18870    numOctaves: type_int_int,
18871};
18872
18873
18874
18875;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
18876
18877
18878
18879
18880
18881
18882function buildHTMLStyles(state, latestValues, options, transformTemplate) {
18883    const { style, vars, transform, transformOrigin } = state;
18884    // Track whether we encounter any transform or transformOrigin values.
18885    let hasTransform = false;
18886    let hasTransformOrigin = false;
18887    // Does the calculated transform essentially equal "none"?
18888    let transformIsNone = true;
18889    /**
18890     * Loop over all our latest animated values and decide whether to handle them
18891     * as a style or CSS variable.
18892     *
18893     * Transforms and transform origins are kept seperately for further processing.
18894     */
18895    for (const key in latestValues) {
18896        const value = latestValues[key];
18897        /**
18898         * If this is a CSS variable we don't do any further processing.
18899         */
18900        if (isCSSVariableName(key)) {
18901            vars[key] = value;
18902            continue;
18903        }
18904        // Convert the value to its default value type, ie 0 -> "0px"
18905        const valueType = numberValueTypes[key];
18906        const valueAsType = getValueAsType(value, valueType);
18907        if (transformProps.has(key)) {
18908            // If this is a transform, flag to enable further transform processing
18909            hasTransform = true;
18910            transform[key] = valueAsType;
18911            // If we already know we have a non-default transform, early return
18912            if (!transformIsNone)
18913                continue;
18914            // Otherwise check to see if this is a default transform
18915            if (value !== (valueType.default || 0))
18916                transformIsNone = false;
18917        }
18918        else if (key.startsWith("origin")) {
18919            // If this is a transform origin, flag and enable further transform-origin processing
18920            hasTransformOrigin = true;
18921            transformOrigin[key] = valueAsType;
18922        }
18923        else {
18924            style[key] = valueAsType;
18925        }
18926    }
18927    if (!latestValues.transform) {
18928        if (hasTransform || transformTemplate) {
18929            style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
18930        }
18931        else if (style.transform) {
18932            /**
18933             * If we have previously created a transform but currently don't have any,
18934             * reset transform style to none.
18935             */
18936            style.transform = "none";
18937        }
18938    }
18939    /**
18940     * Build a transformOrigin style. Uses the same defaults as the browser for
18941     * undefined origins.
18942     */
18943    if (hasTransformOrigin) {
18944        const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
18945        style.transformOrigin = `${originX} ${originY} ${originZ}`;
18946    }
18947}
18948
18949
18950
18951;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
18952const createHtmlRenderState = () => ({
18953    style: {},
18954    transform: {},
18955    transformOrigin: {},
18956    vars: {},
18957});
18958
18959
18960
18961;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/use-props.mjs
18962
18963
18964
18965
18966
18967
18968function copyRawValuesOnly(target, source, props) {
18969    for (const key in source) {
18970        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
18971            target[key] = source[key];
18972        }
18973    }
18974}
18975function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
18976    return (0,external_React_.useMemo)(() => {
18977        const state = createHtmlRenderState();
18978        buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
18979        return Object.assign({}, state.vars, state.style);
18980    }, [visualState]);
18981}
18982function useStyle(props, visualState, isStatic) {
18983    const styleProp = props.style || {};
18984    const style = {};
18985    /**
18986     * Copy non-Motion Values straight into style
18987     */
18988    copyRawValuesOnly(style, styleProp, props);
18989    Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
18990    return props.transformValues ? props.transformValues(style) : style;
18991}
18992function useHTMLProps(props, visualState, isStatic) {
18993    // The `any` isn't ideal but it is the type of createElement props argument
18994    const htmlProps = {};
18995    const style = useStyle(props, visualState, isStatic);
18996    if (props.drag && props.dragListener !== false) {
18997        // Disable the ghost element when a user drags
18998        htmlProps.draggable = false;
18999        // Disable text selection
19000        style.userSelect =
19001            style.WebkitUserSelect =
19002                style.WebkitTouchCallout =
19003                    "none";
19004        // Disable scrolling on the draggable direction
19005        style.touchAction =
19006            props.drag === true
19007                ? "none"
19008                : `pan-${props.drag === "x" ? "y" : "x"}`;
19009    }
19010    if (props.tabIndex === undefined &&
19011        (props.onTap || props.onTapStart || props.whileTap)) {
19012        htmlProps.tabIndex = 0;
19013    }
19014    htmlProps.style = style;
19015    return htmlProps;
19016}
19017
19018
19019
19020;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
19021/**
19022 * A list of all valid MotionProps.
19023 *
19024 * @privateRemarks
19025 * This doesn't throw if a `MotionProp` name is missing - it should.
19026 */
19027const validMotionProps = new Set([
19028    "animate",
19029    "exit",
19030    "variants",
19031    "initial",
19032    "style",
19033    "values",
19034    "variants",
19035    "transition",
19036    "transformTemplate",
19037    "transformValues",
19038    "custom",
19039    "inherit",
19040    "onLayoutAnimationStart",
19041    "onLayoutAnimationComplete",
19042    "onLayoutMeasure",
19043    "onBeforeLayoutMeasure",
19044    "onAnimationStart",
19045    "onAnimationComplete",
19046    "onUpdate",
19047    "onDragStart",
19048    "onDrag",
19049    "onDragEnd",
19050    "onMeasureDragConstraints",
19051    "onDirectionLock",
19052    "onDragTransitionEnd",
19053    "_dragX",
19054    "_dragY",
19055    "onHoverStart",
19056    "onHoverEnd",
19057    "onViewportEnter",
19058    "onViewportLeave",
19059    "ignoreStrict",
19060    "viewport",
19061]);
19062/**
19063 * Check whether a prop name is a valid `MotionProp` key.
19064 *
19065 * @param key - Name of the property to check
19066 * @returns `true` is key is a valid `MotionProp`.
19067 *
19068 * @public
19069 */
19070function isValidMotionProp(key) {
19071    return (key.startsWith("while") ||
19072        (key.startsWith("drag") && key !== "draggable") ||
19073        key.startsWith("layout") ||
19074        key.startsWith("onTap") ||
19075        key.startsWith("onPan") ||
19076        validMotionProps.has(key));
19077}
19078
19079
19080
19081;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/ut
vendor: 4,403 bytes, lines 19081-19199
19081ils/filter-props.mjs
19082
19083
19084let shouldForward = (key) => !isValidMotionProp(key);
19085function loadExternalIsValidProp(isValidProp) {
19086    if (!isValidProp)
19087        return;
19088    // Explicitly filter our events
19089    shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
19090}
19091/**
19092 * Emotion and Styled Components both allow users to pass through arbitrary props to their components
19093 * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
19094 * of these should be passed to the underlying DOM node.
19095 *
19096 * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
19097 * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
19098 * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
19099 * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
19100 *
19101 * By making it an optionalDependency we can offer this functionality only in the situations where it's
19102 * actually required.
19103 */
19104try {
19105    /**
19106     * We attempt to import this package but require won't be defined in esm environments, in that case
19107     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
19108     * in favour of explicit injection.
19109     */
19110    loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
19111}
19112catch (_a) {
19113    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
19114}
19115function filterProps(props, isDom, forwardMotionProps) {
19116    const filteredProps = {};
19117    for (const key in props) {
19118        /**
19119         * values is considered a valid prop by Emotion, so if it's present
19120         * this will be rendered out to the DOM unless explicitly filtered.
19121         *
19122         * We check the type as it could be used with the `feColorMatrix`
19123         * element, which we support.
19124         */
19125        if (key === "values" && typeof props.values === "object")
19126            continue;
19127        if (shouldForward(key) ||
19128            (forwardMotionProps === true && isValidMotionProp(key)) ||
19129            (!isDom && !isValidMotionProp(key)) ||
19130            // If trying to use native HTML drag events, forward drag listeners
19131            (props["draggable"] && key.startsWith("onDrag"))) {
19132            filteredProps[key] = props[key];
19133        }
19134    }
19135    return filteredProps;
19136}
19137
19138
19139
19140;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs
19141
19142
19143function calcOrigin(origin, offset, size) {
19144    return typeof origin === "string"
19145        ? origin
19146        : px.transform(offset + size * origin);
19147}
19148/**
19149 * The SVG transform origin defaults are different to CSS and is less intuitive,
19150 * so we use the measured dimensions of the SVG to reconcile these.
19151 */
19152function calcSVGTransformOrigin(dimensions, originX, originY) {
19153    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
19154    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
19155    return `${pxOriginX} ${pxOriginY}`;
19156}
19157
19158
19159
19160;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/path.mjs
19161
19162
19163const dashKeys = {
19164    offset: "stroke-dashoffset",
19165    array: "stroke-dasharray",
19166};
19167const camelKeys = {
19168    offset: "strokeDashoffset",
19169    array: "strokeDasharray",
19170};
19171/**
19172 * Build SVG path properties. Uses the path's measured length to convert
19173 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
19174 * and stroke-dasharray attributes.
19175 *
19176 * This function is mutative to reduce per-frame GC.
19177 */
19178function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
19179    // Normalise path length by setting SVG attribute pathLength to 1
19180    attrs.pathLength = 1;
19181    // We use dash case when setting attributes directly to the DOM node and camel case
19182    // when defining props on a React component.
19183    const keys = useDashCase ? dashKeys : camelKeys;
19184    // Build the dash offset
19185    attrs[keys.offset] = px.transform(-offset);
19186    // Build the dash array
19187    const pathLength = px.transform(length);
19188    const pathSpacing = px.transform(spacing);
19189    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
19190}
19191
19192
19193
19194;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
19195
19196
19197
19198
19199/**
19200 * Build SVG visual attrbutes, like cx and style.transform
19201 */
19202function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
19203// This is object creation, which we try to avoid per-frame.
19204...latest }, options, isSVGTag, transformTemplate) {
19205    buildHTMLStyles(state, latest, options, transformTemplate);
19206    /**
19207     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
19208     * as normal HTML tags.
19209     */
19210    if (isSVGTag) {
19211        if (state.style.viewBox) {
19212            state.attrs.viewBox = state.style.viewBox;
19213        }
19214        return;
19215    }
19216    state.attrs = state.style;
19217    state.style = {};
19218    const { attrs, style, dimensions } = state;
19219    /**
19220     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
19221     * and copy it into style.
19222     */
19223    if (attrs.transform) {
19224        if (dimensions)
19225            style.transform = attrs.transform;
19226        delete attrs.transform;
19227    }
19228    // Parse transformOrigin
19229    if (dimensions &&
19230        (originX !== undefined || originY !== undefined || style.transform)) {
19231        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
19232    }
19233    // Render attrX/attrY/attrScale as attributes
19234    if (attrX !== undefined)
19235        attrs.x = attrX;
19236    if (attrY !== undefined)
19237        attrs.y = attrY;
19238    if (attrScale !== undefined)
19239        attrs.scale = attrScale;
19240    // Build SVG path if one has been defined
19241    if (pathLength !== undefined) {
19242        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
19243    }
19244}
19245
19246
19247
19248;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
19249
19250
19251const createSvgRenderState = () => ({
19252    ...createHtmlRenderState(),
19253    attrs: {},
19254});
19255
19256
19257
19258;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs
19259const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
19260
19261
19262
19263;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/use-props.mjs
19264
19265
19266
19267
19268
19269
19270function useSVGProps(props, visualState, _isStatic, Component) {
19271    const visualProps = (0,external_React_.useMemo)(() => {
19272        const state = createSvgRenderState();
19273        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
19274        return {
19275            ...state.attrs,
19276            style: { ...state.style },
19277        };
19278    }, [visualState]);
19279    if (props.style) {
19280        const rawStyles = {};
19281        copyRawValuesOnly(rawStyles, props.style, props);
19282        visualProps.style = { ...rawStyles, ...visualProps.style };
19283    }
19284    return visualProps;
19285}
19286
19287
19288
19289;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/use-render.mjs
19290
19291
19292
19293
19294
19295
19296
19297function createUseRender(forwardMotionProps = false) {
19298    const useRender = (Component, props, ref, { latestValues }, isStatic) => {
19299        const useVisualProps = isSVGComponent(Component)
19300            ? useSVGProps
19301            : useHTMLProps;
19302        const visualProps = useVisualProps(props, latestValues, isStatic, Component);
19303        const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
19304        const elementProps = {
19305            ...filteredProps,
19306            ...visualProps,
19307            ref,
19308        };
19309        /**
19310         * If component has been handed a motion value as its child,
19311         * memoise its initial value and render that. Subsequent updates
19312         * will be handled by the onChange handler
19313         */
19314        const { children } = props;
19315        const renderedChildren = (0,external_React_.useMemo)(() => (isMotionValue(children) ? children.get() : children), [children]);
19316        return (0,external_React_.createElement)(Component, {
19317            ...elementProps,
19318            children: renderedChildren,
19319        });
19320    };
19321    return useRender;
19322}
19323
19324
19325
19326;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/ut
19326ils/camel-to-dash.mjs
19327/**
19328 * Convert camelCase to dash-case properties.
19329 */
19330const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
19331
19332
19333
19334;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/render.mjs
19335function renderHTML(element, { style, vars }, styleProp, projection) {
19336    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
19337    // Loop over any CSS variables and assign those.
19338    for (const key in vars) {
19339        element.style.setProperty(key, vars[key]);
19340    }
19341}
19342
19343
19344
19345;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs
19346/**
19347 * A set of attribute names that are always read/written as camel case.
19348 */
19349const camelCaseAttributes = new Set([
19350    "baseFrequency",
19351    "diffuseConstant",
19352    "kernelMatrix",
19353    "kernelUnitLength",
19354    "keySplines",
19355    "keyTimes",
19356    "limitingConeAngle",
19357    "markerHeight",
19358    "markerWidth",
19359    "numOctaves",
19360    "targetX",
19361    "targetY",
19362    "surfaceScale",
19363    "specularConstant",
19364    "specularExponent",
19365    "stdDeviation",
19366    "tableValues",
19367    "viewBox",
19368    "gradientTransform",
19369    "pathLength",
19370    "startOffset",
19371    "textLength",
19372    "lengthAdjust",
19373]);
19374
19375
19376
19377;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/render.mjs
19378
19379
19380
19381
19382function renderSVG(element, renderState, _styleProp, projection) {
19383    renderHTML(element, renderState, undefined, projection);
19384    for (const key in renderState.attrs) {
19385        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
19386    }
19387}
19388
19389
19390
19391;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
19392
19393
19394
19395function scrapeMotionValuesFromProps(props, prevProps) {
19396    const { style } = props;
19397    const newValues = {};
19398    for (const key in style) {
19399        if (isMotionValue(style[key]) ||
19400            (prevProps.style && isMotionValue(prevProps.style[key])) ||
19401            isForcedMotionValue(key, props)) {
19402            newValues[key] = style[key];
19403        }
19404    }
19405    return newValues;
19406}
19407
19408
19409
19410;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs
19411
19412
19413
19414
19415function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) {
19416    const newValues = scrapeMotionValuesFromProps(props, prevProps);
19417    for (const key in props) {
19418        if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
19419            const targetKey = transformPropOrder.indexOf(key) !== -1
19420                ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
19421                : key;
19422            newValues[targetKey] = props[key];
19423        }
19424    }
19425    return newValues;
19426}
19427
19428
19429
19430;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
19431function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
19432    /**
19433     * If the variant definition is a function, resolve.
19434     */
19435    if (typeof definition === "function") {
19436        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
19437    }
19438    /**
19439     * If the variant definition is a variant label, or
19440     * the function returned a variant label, resolve.
19441     */
19442    if (typeof definition === "string") {
19443        definition = props.variants && props.variants[definition];
19444    }
19445    /**
19446     * At this point we've resolved both functions and variant labels,
19447     * but the resolved variant label might itself have been a function.
19448     * If so, resolve. This can only have returned a valid target object.
19449     */
19450    if (typeof definition === "function") {
19451        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
19452    }
19453    return definition;
19454}
19455
19456
19457
19458;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-constant.mjs
19459
19460
19461/**
19462 * Creates a constant value over the lifecycle of a component.
19463 *
19464 * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
19465 * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
19466 * you can ensure that initialisers don't execute twice or more.
19467 */
19468function useConstant(init) {
19469    const ref = (0,external_React_.useRef)(null);
19470    if (ref.current === null) {
19471        ref.current = init();
19472    }
19473    return ref.current;
19474}
19475
19476
19477
19478;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs
19479const isKeyframesTarget = (v) => {
19480    return Array.isArray(v);
19481};
19482
19483
19484
19485;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/resolve-value.mjs
19486
19487
19488const isCustomValue = (v) => {
19489    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
19490};
19491const resolveFinalValueInKeyframes = (v) => {
19492    // TODO maybe throw if v.length - 1 is placeholder token?
19493    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
19494};
19495
19496
19497
19498;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs
19499
19500
19501
19502/**
19503 * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
19504 *
19505 * TODO: Remove and move to library
19506 */
19507function resolveMotionValue(value) {
19508    const unwrappedValue = isMotionValue(value) ? value.get() : value;
19509    return isCustomValue(unwrappedValue)
19510        ? unwrappedValue.toValue()
19511        : unwrappedValue;
19512}
19513
19514
19515
19516;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
19517
19518
19519
19520
19521
19522
19523
19524
19525
19526function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
19527    const state = {
19528        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
19529        renderState: createRenderState(),
19530    };
19531    if (onMount) {
19532        state.mount = (instance) => onMount(props, instance, state);
19533    }
19534    return state;
19535}
19536const makeUseVisualState = (config) => (props, isStatic) => {
19537    const context = (0,external_React_.useContext)(MotionContext);
19538    const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext);
19539    const make = () => makeState(config, props, context, presenceContext);
19540    return isStatic ? make() : useConstant(make);
19541};
19542function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
19543    const values = {};
19544    const motionValues = scrapeMotionValues(props, {});
19545    for (const key in motionValues) {
19546        values[key] = resolveMotionValue(motionValues[key]);
19547    }
19548    let { initial, animate } = props;
19549    const isControllingVariants$1 = isControllingVariants(props);
19550    const isVariantNode$1 = isVariantNode(props);
19551    if (context &&
19552        isVariantNode$1 &&
19553        !isControllingVariants$1 &&
19554        props.inherit !== false) {
19555        if (initial === undefined)
19556            initial = context.initial;
19557        if (animate === undefined)
19558            animate = context.animate;
19559    }
19560    let isInitialAnimationBlocked = presenceContext
19561        ? presenceContext.initial === false
19562        : false;
19563    isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
19564    const variantToSet = isInitialAnimationBlocked ? animate : initial;
19565    if (variantToSet &&
19566        typeof variantToSet !== "boolean" &&
19567        !isAnimationControls(variantToSet)) {
19568        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
19569        list.forEach((definition) => {
19570            const resolved = resolveVariantFromProps(props, definition);
19571            if (!resolved)
19572                return;
19573            const { transitionEnd, transition, ...target } = resolved;
19574            for (const key in target) {
19575                let valueTarget = target[key];
19576                if (Array.isArray(valueTarget)) {
19577                    /**
19578                     * Take final keyframe if the initial animation is blocked because
19579                     * we want to initialise at the end of that blocked animation.
19580                     */
19581                    const index = isInitialAnimationBlocked
19582                        ? valueTarget.length - 1
19583                        : 0;
19584                    valueTarget = valueTarget[index];
19585                }
19586                if (valueTarget !== null) {
19587                    values[key] = valueTarget;
19588                }
19589            }
19590            for (const key in transitionEnd)
19591                values[key] = transitionEnd[key];
19592        });
19593    }
19594    return values;
19595}
19596
19597
19598
19599;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/config-motion.mjs
19600
19601
19602
19603
19604
19605
19606
19607const svgMotionConfig = {
19608    useVisualState: makeUseVisualState({
19609        scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps,
19610        createRenderState: createSvgRenderState,
19611        onMount: (props, instance, { renderState, latestValues }) => {
19612            try {
19613                renderState.dimensions =
19614                    typeof instance.getBBox ===
19615                        "function"
19616                        ? instance.getBBox()
19617                        : instance.getBoundingClientRect();
19618            }
19619            catch (e) {
19620                // Most likely trying to measure an unrendered element under Firefox
19621                renderState.dimensions = {
19622                    x: 0,
19623                    y: 0,
19624                    width: 0,
19625                    height: 0,
19626                };
19627            }
19628            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
19629            renderSVG(instance, renderState);
19630        },
19631    }),
19632};
19633
19634
19635
19636;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/config-motion.mjs
19637
19638
19639
19640
19641const htmlMotionConfig = {
19642    useVisualState: makeUseVisualState({
19643        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
19644        createRenderState: createHtmlRenderState,
19645    }),
19646};
19647
19648
19649
19650;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs
19651
19652
19653
19654
19655
19656function create_config_createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {
19657    const baseConfig = isSVGComponent(Component)
19658        ? svgMotionConfig
19659        : htmlMotionConfig;
19660    return {
19661        ...baseConfig,
19662        preloadedFeatures,
19663        useRender: createUseRender(forwardMotionProps),
19664        createVisualElement,
19665        Component,
19666    };
19667}
19668
19669
19670
19671;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/add-dom-event.mjs
19672function addDomEvent(target, eventName, handler, options = { passive: true }) {
19673    target.addEventListener(eventName, handler, options);
19674    return () => target.removeEventListener(eventName, handler);
19675}
19676
19677
19678
19679;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs
19680const isPrimaryPointer = (event) => {
19681    if (event.pointerType === "mouse") {
19682        return typeof event.button !== "number" || event.button <= 0;
19683    }
19684    else {
19685        /**
19686         * isPrimary is true for all mice buttons, whereas every touch point
19687         * is regarded as its own input. So subsequent concurrent touch points
19688         * will be false.
19689         *
19690         * Specifically match against false here as incomplete versions of
19691         * PointerEvents in very old browser might have it set as undefined.
19692         */
19693        return event.isPrimary !== false;
19694    }
19695};
19696
19697
19698
19699;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/event-info.mjs
19700
19701
19702function extractEventInfo(event, pointType = "page") {
19703    return {
19704        point: {
19705            x: event[pointType + "X"],
19706            y: event[pointType + "Y"],
19707        },
19708    };
19709}
19710const addPointerInfo = (handler) => {
19711    return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
19712};
19713
19714
19715
19716;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
19717
19718
19719
19720function addPointerEvent(target, eventName, handler, options) {
19721    return addDomEvent(target, eventName, addPointerInfo(handler), options);
19722}
19723
19724
19725
19726;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/pipe.mjs
19727/**
19728 * Pipe
19729 * Compose other transformers to run linearily
19730 * pipe(min(20), max(40))
19731 * @param  {...functions} transformers
19732 * @return {function}
19733 */
19734const combineFunctions = (a, b) => (v) => b(a(v));
19735const pipe = (...transformers) => transformers.reduce(combineFunctions);
19736
19737
19738
19739;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs
19740function createLock(name) {
19741    let lock = null;
19742    return () => {
19743        const openLock = () => {
19744            lock = null;
19745        };
19746        if (lock === null) {
19747            lock = name;
19748            return openLock;
19749        }
19750        return false;
vendor: 4,528 bytes, lines 19751-19888
19751    };
19752}
19753const globalHorizontalLock = createLock("dragHorizontal");
19754const globalVerticalLock = createLock("dragVertical");
19755function getGlobalLock(drag) {
19756    let lock = false;
19757    if (drag === "y") {
19758        lock = globalVerticalLock();
19759    }
19760    else if (drag === "x") {
19761        lock = globalHorizontalLock();
19762    }
19763    else {
19764        const openHorizontal = globalHorizontalLock();
19765        const openVertical = globalVerticalLock();
19766        if (openHorizontal && openVertical) {
19767            lock = () => {
19768                openHorizontal();
19769                openVertical();
19770            };
19771        }
19772        else {
19773            // Release the locks because we don't use them
19774            if (openHorizontal)
19775                openHorizontal();
19776            if (openVertical)
19777                openVertical();
19778        }
19779    }
19780    return lock;
19781}
19782function isDragActive() {
19783    // Check the gesture lock - if we get it, it means no drag gesture is active
19784    // and we can safely fire the tap gesture.
19785    const openGestureLock = getGlobalLock(true);
19786    if (!openGestureLock)
19787        return true;
19788    openGestureLock();
19789    return false;
19790}
19791
19792
19793
19794;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/Feature.mjs
19795class Feature {
19796    constructor(node) {
19797        this.isMounted = false;
19798        this.node = node;
19799    }
19800    update() { }
19801}
19802
19803
19804
19805;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/noop.mjs
19806const noop_noop = (any) => any;
19807
19808
19809
19810;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/render-step.mjs
19811function createRenderStep(runNextFrame) {
19812    /**
19813     * We create and reuse two arrays, one to queue jobs for the current frame
19814     * and one for the next. We reuse to avoid triggering GC after x frames.
19815     */
19816    let toRun = [];
19817    let toRunNextFrame = [];
19818    /**
19819     *
19820     */
19821    let numToRun = 0;
19822    /**
19823     * Track whether we're currently processing jobs in this step. This way
19824     * we can decide whether to schedule new jobs for this frame or next.
19825     */
19826    let isProcessing = false;
19827    let flushNextFrame = false;
19828    /**
19829     * A set of processes which were marked keepAlive when scheduled.
19830     */
19831    const toKeepAlive = new WeakSet();
19832    const step = {
19833        /**
19834         * Schedule a process to run on the next frame.
19835         */
19836        schedule: (callback, keepAlive = false, immediate = false) => {
19837            const addToCurrentFrame = immediate && isProcessing;
19838            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
19839            if (keepAlive)
19840                toKeepAlive.add(callback);
19841            // If the buffer doesn't already contain this callback, add it
19842            if (buffer.indexOf(callback) === -1) {
19843                buffer.push(callback);
19844                // If we're adding it to the currently running buffer, update its measured size
19845                if (addToCurrentFrame && isProcessing)
19846                    numToRun = toRun.length;
19847            }
19848            return callback;
19849        },
19850        /**
19851         * Cancel the provided callback from running on the next frame.
19852         */
19853        cancel: (callback) => {
19854            const index = toRunNextFrame.indexOf(callback);
19855            if (index !== -1)
19856                toRunNextFrame.splice(index, 1);
19857            toKeepAlive.delete(callback);
19858        },
19859        /**
19860         * Execute all schedule callbacks.
19861         */
19862        process: (frameData) => {
19863            /**
19864             * If we're already processing we've probably been triggered by a flushSync
19865             * inside an existing process. Instead of executing, mark flushNextFrame
19866             * as true and ensure we flush the following frame at the end of this one.
19867             */
19868            if (isProcessing) {
19869                flushNextFrame = true;
19870                return;
19871            }
19872            isProcessing = true;
19873            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
19874            // Clear the next frame list
19875            toRunNextFrame.length = 0;
19876            // Execute this frame
19877            numToRun = toRun.length;
19878            if (numToRun) {
19879                for (let i = 0; i < numToRun; i++) {
19880                    const callback = toRun[i];
19881                    callback(frameData);
19882                    if (toKeepAlive.has(callback)) {
19883                        step.schedule(callback);
19884                        runNextFrame();
19885                    }
19886                }
19887            }
19888            isProcessing = false;
19889            if (flushNextFrame) {
19890                flushNextFrame = false;
19891                step.process(frameData);
19892            }
19893        },
19894    };
19895    return step;
19896}
19897
19898
19899
19900;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/batcher.mjs
19901
19902
19903const stepsOrder = [
19904    "prepare",
19905    "read",
19906    "update",
19907    "preRender",
19908    "render",
19909    "postRender",
19910];
19911const maxElapsed = 40;
19912function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
19913    let runNextFrame = false;
19914    let useDefaultElapsed = true;
19915    const state = {
19916        delta: 0,
19917        timestamp: 0,
19918        isProcessing: false,
19919    };
19920    const steps = stepsOrder.reduce((acc, key) => {
19921        acc[key] = createRenderStep(() => (runNextFrame = true));
19922        return acc;
19923    }, {});
19924    const processStep = (stepId) => steps[stepId].process(state);
19925    const processBatch = (timestamp) => {
19926        runNextFrame = false;
19927        state.delta = useDefaultElapsed
19928            ? 1000 / 60
19929            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
19930        state.timestamp = timestamp;
19931        state.isProcessing = true;
19932        stepsOrder.forEach(processStep);
19933        state.isProcessing = false;
19934        if (runNextFrame && allowKeepAlive) {
19935            useDefaultElapsed = false;
19936            scheduleNextBatch(processBatch);
19937        }
19938    };
19939    const wake = () => {
19940        runNextFrame = true;
19941        useDefaultElapsed = true;
19942        if (!state.isProcessing)
19943            scheduleNextBatch(processBatch);
19944    };
19945    const schedule = stepsOrder.reduce((acc, key) => {
19946        const step = steps[key];
19947        acc[key] = (process, keepAlive = false, immediate = false) => {
19948            if (!runNextFrame)
19949                wake();
19950            return step.schedule(process, keepAlive, immediate);
19951        };
19952        return acc;
19953    }, {});
19954    const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
19955    return { schedule, cancel, state, steps };
19956}
19957
19958
19959
19960;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/frame.mjs
19961
19962
19963
19964const { schedule: frame_frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop_noop, true);
19965
19966
19967
19968;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/hover.mjs
19969
19970
19971
19972
19973
19974
19975function addHoverEvent(node, isActive) {
19976    const eventName = "pointer" + (isActive ? "enter" : "leave");
19977    const callbackName = "onHover" + (isActive ? "Start" : "End");
19978    const handleEvent = (event, info) => {
19979        if (event.type === "touch" || isDragActive())
19980            return;
19981        const props = node.getProps();
19982        if (node.animationState && props.whileHover) {
19983            node.animationState.setActive("whileHover", isActive);
19984        }
19985        if (props[callbackName]) {
19986            frame_frame.update(() => props[callbackName](event, info));
19987        }
19988    };
19989    return addPointerEvent(node.current, eventName, handleEvent, {
19990        passive: !node.getProps()[callbackName],
19991    });
19992}
19993class HoverGesture extends Feature {
19994    mount() {
19995        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
19996    }
19997    unmount() { }
19998}
19999
20000
20001
20002;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/focus.mjs
20003
20004
20005
20006
20007class FocusGesture extends Feature {
20008    constructor() {
20009        super(...arguments);
20010        this.isActive = false;
20011    }
20012    onFocus() {
20013        let isFocusVisible = false;
20014        /**
20015         * If this element doesn't match focus-visible then don't
20016         * apply whileHover. But, if matches throws that focus-visible
20017         * is not a valid selector then in that browser outline styles will be applied
20018         * to the element by default and we want to match that behaviour with whileFocus.
20019         */
20020        try {
20021            isFocusVisible = this.node.current.matches(":focus-visible");
20022        }
20023        catch (e) {
20024            isFocusVisible = true;
20025        }
20026        if (!isFocusVisible || !this.node.animationState)
20027            return;
20028        this.node.animationState.setActive("whileFocus", true);
20029        this.isActive = true;
20030    }
20031    onBlur() {
20032        if (!this.isActive || !this.node.animationState)
20033            return;
20034        this.node.animationState.setActive("whileFocus", false);
20035        this.isActive = false;
20036    }
20037    mount() {
20038        this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
20039    }
20040    unmount() { }
20041}
20042
20043
20044
20045;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs
20046/**
20047 * Recursively traverse up the tree to check whether the provided child node
20048 * is the parent or a descendant of it.
20049 *
20050 * @param parent - Element to find
20051 * @param child - Element to test against parent
20052 */
20053const isNodeOrChild = (parent, child) => {
20054    if (!child) {
20055        return false;
20056    }
20057    else if (parent === child) {
20058        return true;
20059    }
20060    else {
20061        return isNodeOrChild(parent, child.parentElement);
20062    }
20063};
20064
20065
20066
20067;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/press.mjs
20068
20069
20070
20071
20072
20073
20074
20075
20076
20077
20078function fireSyntheticPointerEvent(name, handler) {
20079    if (!handler)
20080        return;
20081    const syntheticPointerEvent = new PointerEvent("pointer" + name);
20082    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
20083}
20084class PressGesture extends Feature {
20085    constructor() {
20086        super(...arguments);
20087        this.removeStartListeners = noop_noop;
20088        this.removeEndListeners = noop_noop;
20089        this.removeAccessibleListeners = noop_noop;
20090        this.startPointerPress = (startEvent, startInfo) => {
20091            this.removeEndListeners();
20092            if (this.isPressing)
20093                return;
20094            const props = this.node.getProps();
20095            const endPointerPress = (endEvent, endInfo) => {
20096                if (!this.checkPressEnd())
20097                    return;
20098                const { onTap, onTapCancel } = this.node.getProps();
20099                frame_frame.update(() => {
20100                    /**
20101                     * We only count this as a tap gesture if the event.target is the same
20102                     * as, or a child of, this component's element
20103                     */
20104                    !isNodeOrChild(this.node.current, endEvent.target)
20105                        ? onTapCancel && onTapCancel(endEvent, endInfo)
20106                        : onTap && onTap(endEvent, endInfo);
20107                });
20108            };
20109            const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
20110            const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
20111            this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
20112            this.startPress(startEvent, startInfo);
20113        };
20114        this.startAccessiblePress = () => {
20115            const handleKeydown = (keydownEvent) => {
20116                if (keydownEvent.key !== "Enter" || this.isPressing)
20117                    return;
20118                const handleKeyup = (keyupEvent) => {
20119                    if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
20120                        return;
20121                    fireSyntheticPointerEvent("up", (event, info) => {
20122                        const { onTap } = this.node.getProps();
20123                        if (onTap) {
20124                            frame_frame.update(() => onTap(event, info));
20125                        }
20126                    });
20127                };
20128                this.removeEndListeners();
20129                this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
20130                fireSyntheticPointerEvent("down", (event, info) => {
20131                    this.startPress(event, info);
20132                });
20133            };
20134            const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
20135            const handleBlur = () => {
20136                if (!this.isPressing)
20137                    return;
20138                fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
20139            };
20140            const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
20141            this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
20142        };
20143    }
20144    startPress(event, info) {
20145        this.isPressing = true;
20146        const { onTapStart, whileTap } = this.node.getProps();
20147        /**
20148         * Ensure we trigger animations before firing event callback
20149         */
20150        if (whileTap && this.node.animationState) {
20151            this.node.animationState.setActive("whileTap", true);
20152        }
20153        if (onTapStart) {
20154            frame_frame.update(() => onTapStart(event, info));
20155        }
20156    }
20157    checkPressEnd() {
20158        this.removeEndListeners();
20159        this.isPressing = false;
vendor: 6,076 bytes, lines 20160-20340
20160        const props = this.node.getProps();
20161        if (props.whileTap && this.node.animationState) {
20162            this.node.animationState.setActive("whileTap", false);
20163        }
20164        return !isDragActive();
20165    }
20166    cancelPress(event, info) {
20167        if (!this.checkPressEnd())
20168            return;
20169        const { onTapCancel } = this.node.getProps();
20170        if (onTapCancel) {
20171            frame_frame.update(() => onTapCancel(event, info));
20172        }
20173    }
20174    mount() {
20175        const props = this.node.getProps();
20176        const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) });
20177        const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
20178        this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
20179    }
20180    unmount() {
20181        this.removeStartListeners();
20182        this.removeEndListeners();
20183        this.removeAccessibleListeners();
20184    }
20185}
20186
20187
20188
20189;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs
20190/**
20191 * Map an IntersectionHandler callback to an element. We only ever make one handler for one
20192 * element, so even though these handlers might all be triggered by different
20193 * observers, we can keep them in the same map.
20194 */
20195const observerCallbacks = new WeakMap();
20196/**
20197 * Multiple observers can be created for multiple element/document roots. Each with
20198 * different settings. So here we store dictionaries of observers to each root,
20199 * using serialised settings (threshold/margin) as lookup keys.
20200 */
20201const observers = new WeakMap();
20202const fireObserverCallback = (entry) => {
20203    const callback = observerCallbacks.get(entry.target);
20204    callback && callback(entry);
20205};
20206const fireAllObserverCallbacks = (entries) => {
20207    entries.forEach(fireObserverCallback);
20208};
20209function initIntersectionObserver({ root, ...options }) {
20210    const lookupRoot = root || document;
20211    /**
20212     * If we don't have an observer lookup map for this root, create one.
20213     */
20214    if (!observers.has(lookupRoot)) {
20215        observers.set(lookupRoot, {});
20216    }
20217    const rootObservers = observers.get(lookupRoot);
20218    const key = JSON.stringify(options);
20219    /**
20220     * If we don't have an observer for this combination of root and settings,
20221     * create one.
20222     */
20223    if (!rootObservers[key]) {
20224        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
20225    }
20226    return rootObservers[key];
20227}
20228function observeIntersection(element, options, callback) {
20229    const rootInteresectionObserver = initIntersectionObserver(options);
20230    observerCallbacks.set(element, callback);
20231    rootInteresectionObserver.observe(element);
20232    return () => {
20233        observerCallbacks.delete(element);
20234        rootInteresectionObserver.unobserve(element);
20235    };
20236}
20237
20238
20239
20240;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs
20241
20242
20243
20244const thresholdNames = {
20245    some: 0,
20246    all: 1,
20247};
20248class InViewFeature extends Feature {
20249    constructor() {
20250        super(...arguments);
20251        this.hasEnteredView = false;
20252        this.isInView = false;
20253    }
20254    startObserver() {
20255        this.unmount();
20256        const { viewport = {} } = this.node.getProps();
20257        const { root, margin: rootMargin, amount = "some", once } = viewport;
20258        const options = {
20259            root: root ? root.current : undefined,
20260            rootMargin,
20261            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
20262        };
20263        const onIntersectionUpdate = (entry) => {
20264            const { isIntersecting } = entry;
20265            /**
20266             * If there's been no change in the viewport state, early return.
20267             */
20268            if (this.isInView === isIntersecting)
20269                return;
20270            this.isInView = isIntersecting;
20271            /**
20272             * Handle hasEnteredView. If this is only meant to run once, and
20273             * element isn't visible, early return. Otherwise set hasEnteredView to true.
20274             */
20275            if (once && !isIntersecting && this.hasEnteredView) {
20276                return;
20277            }
20278            else if (isIntersecting) {
20279                this.hasEnteredView = true;
20280            }
20281            if (this.node.animationState) {
20282                this.node.animationState.setActive("whileInView", isIntersecting);
20283            }
20284            /**
20285             * Use the latest committed props rather than the ones in scope
20286             * when this observer is created
20287             */
20288            const { onViewportEnter, onViewportLeave } = this.node.getProps();
20289            const callback = isIntersecting ? onViewportEnter : onViewportLeave;
20290            callback && callback(entry);
20291        };
20292        return observeIntersection(this.node.current, options, onIntersectionUpdate);
20293    }
20294    mount() {
20295        this.startObserver();
20296    }
20297    update() {
20298        if (typeof IntersectionObserver === "undefined")
20299            return;
20300        const { props, prevProps } = this.node;
20301        const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
20302        if (hasOptionsChanged) {
20303            this.startObserver();
20304        }
20305    }
20306    unmount() { }
20307}
20308function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
20309    return (name) => viewport[name] !== prevViewport[name];
20310}
20311
20312
20313
20314;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/gestures.mjs
20315
20316
20317
20318
20319
20320const gestureAnimations = {
20321    inView: {
20322        Feature: InViewFeature,
20323    },
20324    tap: {
20325        Feature: PressGesture,
20326    },
20327    focus: {
20328        Feature: FocusGesture,
20329    },
20330    hover: {
20331        Feature: HoverGesture,
20332    },
20333};
20334
20335
20336
20337;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/shallow-compare.mjs
20338function shallowCompare(next, prev) {
20339    if (!Array.isArray(prev))
20340        return false;
20341    const prevLength = prev.length;
20342    if (prevLength !== next.length)
20343        return false;
20344    for (let i = 0; i < prevLength; i++) {
20345        if (prev[i] !== next[i])
20346            return false;
20347    }
20348    return true;
20349}
20350
20351
20352
20353;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs
20354
20355
20356/**
20357 * Creates an object containing the latest state of every MotionValue on a VisualElement
20358 */
20359function getCurrent(visualElement) {
20360    const current = {};
20361    visualElement.values.forEach((value, key) => (current[key] = value.get()));
20362    return current;
20363}
20364/**
20365 * Creates an object containing the latest velocity of every MotionValue on a VisualElement
20366 */
20367function getVelocity(visualElement) {
20368    const velocity = {};
20369    visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
20370    return velocity;
20371}
20372function resolveVariant(visualElement, definition, custom) {
20373    const props = visualElement.getProps();
20374    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));
20375}
20376
20377
20378
20379;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
20380
20381
20382const optimizedAppearDataId = "framerAppearId";
20383const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
20384
20385
20386
20387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/errors.mjs
20388
20389
20390let warning = noop_noop;
20391let errors_invariant = noop_noop;
20392if (false) {}
20393
20394
20395
20396;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/time-conversion.mjs
20397/**
20398 * Converts seconds to milliseconds
20399 *
20400 * @param seconds - Time in seconds.
20401 * @return milliseconds - Converted time in milliseconds.
20402 */
20403const secondsToMilliseconds = (seconds) => seconds * 1000;
20404const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
20405
20406
20407
20408;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs
20409const instantAnimationState = {
20410    current: false,
20411};
20412
20413
20414
20415;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs
20416const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
20417
20418
20419
20420;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs
20421
20422
20423function isWaapiSupportedEasing(easing) {
20424    return Boolean(!easing ||
20425        (typeof easing === "string" && supportedWaapiEasing[easing]) ||
20426        isBezierDefinition(easing) ||
20427        (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
20428}
20429const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
20430const supportedWaapiEasing = {
20431    linear: "linear",
20432    ease: "ease",
20433    easeIn: "ease-in",
20434    easeOut: "ease-out",
20435    easeInOut: "ease-in-out",
20436    circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
20437    circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
20438    backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
20439    backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
20440};
20441function mapEasingToNativeEasing(easing) {
20442    if (!easing)
20443        return undefined;
20444    return isBezierDefinition(easing)
20445        ? cubicBezierAsString(easing)
20446        : Array.isArray(easing)
20447            ? easing.map(mapEasingToNativeEasing)
20448            : supportedWaapiEasing[easing];
20449}
20450
20451
20452
20453;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs
20454
20455
20456function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
20457    const keyframeOptions = { [valueName]: keyframes };
20458    if (times)
20459        keyframeOptions.offset = times;
20460    const easing = mapEasingToNativeEasing(ease);
20461    /**
20462     * If this is an easing array, apply to keyframes, not animation as a whole
20463     */
20464    if (Array.isArray(easing))
20465        keyframeOptions.easing = easing;
20466    return element.animate(keyframeOptions, {
20467        delay,
20468        duration,
20469        easing: !Array.isArray(easing) ? easing : "linear",
20470        fill: "both",
20471        iterations: repeat + 1,
20472        direction: repeatType === "reverse" ? "alternate" : "normal",
20473    });
20474}
20475
20476
20477
20478;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs
20479function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
20480    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
20481        ? 0
20482        : keyframes.length - 1;
20483    return keyframes[index];
20484}
20485
20486
20487
20488;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs
20489
20490
20491/*
20492  Bezier function generator
20493  This has been modified from Gaëtan Renaudeau's BezierEasing
20494  https://github.com/gre/bezier-easing/blob/master/src/index.js
20495  https://github.com/gre/bezier-easing/blob/master/LICENSE
20496  
20497  I've removed the newtonRaphsonIterate algo because in benchmarking it
20498  wasn't noticiably faster than binarySubdivision, indeed removing it
20499  usually improved times, depending on the curve.
20500  I also removed the lookup table, as for the added bundle size and loop we're
20501  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
20502  to 12 to compensate and this still tended to be faster for no perceivable
20503  loss in accuracy.
20504  Usage
20505    const easeOut = cubicBezier(.17,.67,.83,.67);
20506    const x = easeOut(0.5); // returns 0.627...
20507*/
20508// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
20509const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
20510    t;
20511const subdivisionPrecision = 0.0000001;
20512const subdivisionMaxIterations = 12;
20513function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
20514    let currentX;
20515    let currentT;
20516    let i = 0;
20517    do {
20518        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
20519        currentX = calcBezier(currentT, mX1, mX2) - x;
20520        if (currentX > 0.0) {
20521            upperBound = currentT;
20522        }
20523        else {
20524            lowerBound = currentT;
20525        }
20526    } while (Math.abs(currentX) > subdivisionPrecision &&
20527        ++i < subdivisionMaxIterations);
20528    return currentT;
20529}
20530function cubicBezier(mX1, mY1, mX2, mY2) {
20531    // If this is a linear gradient, return linear easing
20532    if (mX1 === mY1 && mX2 === mY2)
20533        return noop_noop;
20534    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
20535    // If animation is at start/end, return t without easing
20536    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
20537}
20538
20539
20540
20541;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/ease.mjs
20542
20543
20544const easeIn = cubicBezier(0.42, 0, 1, 1);
20545const easeOut = cubicBezier(0, 0, 0.58, 1);
20546const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
20547
20548
20549
20550;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs
20551const isEasingArray = (ease) => {
20552    return Array.isArray(ease) && typeof ease[0] !== "number";
20553};
20554
20555
20556
20557;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs
20558// Accepts an easing function and returns a new one that outputs mirrored values for
20559// the second half of the animation. Turns easeIn into easeInOut.
20560const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
20561
20562
20563
20564;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs
20565// Accepts an easing function and returns a new one that outputs reversed values.
20566// Turns easeIn into easeOut.
20567const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
20568
20569
20570
20571;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/circ.mjs
20572
20573
20574
20575const circIn = (p) => 1 - Math.sin(Math.acos(p));
20576const circOut = reverseEasing(circIn);
20577const circInOut = mirrorEasing(circOut);
20578
20579
20580
20581;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/back.mjs
20582
20583
20584
20585
20586const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
20587const backIn = reverseEasing(backOut);
20588const backInOut = mirrorEasing(backIn);
20589
20590
20591
20592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/anticipate.mjs
20593
20594
20595const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
20596
20597
20598
20599;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/map.mjs
20600
20601
20602
20603
20604
20605
20606
20607
20608const easingLookup = {
20609    linear: noop_noop,
20610    easeIn: easeIn,
20611    easeInOut: easeInOut,
20612    easeOut: easeOut,
20613    circIn: circIn,
20614    circInOut: circInOut,
20615    circOut: circOut,
20616    backIn: backIn,
20617    backInOut: backInOut,
20618    backOut: backOut,
20619    anticipate: anticipate,
20620};
20621const easingDefinitionToFunction = (definition) => {
20622    if (Array.isArray(definition)) {
20623        // If cubic bezier definition, create bezier curve
20624        errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
20625        const [x1, y1, x2, y2] = definition;
20626        return cubicBezier(x1, y1, x2, y2);
20627    }
20628    else if (typeof definition === "string") {
20629        // Else lookup from table
20630        errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
20631        return easingLookup[definition];
20632    }
20633    return definition;
20634};
20635
20636
20637
20638;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/utils.mjs
20639
20640
20641/**
20642 * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
20643 * but false if a number or multiple colors
20644 */
20645const isColorString = (type, testProp) => (v) => {
20646    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
20647        (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
20648};
20649const splitColor = (aName, bName, cName) => (v) => {
20650    if (!isString(v))
20651        return v;
vendor: 1,623 bytes, lines 20652-20720
20652    const [a, b, c, alpha] = v.match(floatRegex);
20653    return {
20654        [aName]: parseFloat(a),
20655        [bName]: parseFloat(b),
20656        [cName]: parseFloat(c),
20657        alpha: alpha !== undefined ? parseFloat(alpha) : 1,
20658    };
20659};
20660
20661
20662
20663;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
20664
20665
20666
20667
20668
20669const clampRgbUnit = (v) => clamp_clamp(0, 255, v);
20670const rgbUnit = {
20671    ...number,
20672    transform: (v) => Math.round(clampRgbUnit(v)),
20673};
20674const rgba_rgba = {
20675    test: isColorString("rgb", "red"),
20676    parse: splitColor("red", "green", "blue"),
20677    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
20678        rgbUnit.transform(red) +
20679        ", " +
20680        rgbUnit.transform(green) +
20681        ", " +
20682        rgbUnit.transform(blue) +
20683        ", " +
20684        sanitize(alpha.transform(alpha$1)) +
20685        ")",
20686};
20687
20688
20689
20690;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/hex.mjs
20691
20692
20693
20694function parseHex(v) {
20695    let r = "";
20696    let g = "";
20697    let b = "";
20698    let a = "";
20699    // If we have 6 characters, ie #FF0000
20700    if (v.length > 5) {
20701        r = v.substring(1, 3);
20702        g = v.substring(3, 5);
20703        b = v.substring(5, 7);
20704        a = v.substring(7, 9);
20705        // Or we have 3 characters, ie #F00
20706    }
20707    else {
20708        r = v.substring(1, 2);
20709        g = v.substring(2, 3);
20710        b = v.substring(3, 4);
20711        a = v.substring(4, 5);
20712        r += r;
20713        g += g;
20714        b += b;
20715        a += a;
20716    }
20717    return {
20718        red: parseInt(r, 16),
20719        green: parseInt(g, 16),
20720        blue: parseInt(b, 16),
vendor: 12,834 bytes, lines 20721-21175
20721        alpha: a ? parseInt(a, 16) / 255 : 1,
20722    };
20723}
20724const hex = {
20725    test: isColorString("#"),
20726    parse: parseHex,
20727    transform: rgba_rgba.transform,
20728};
20729
20730
20731
20732;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/hsla.mjs
20733
20734
20735
20736
20737
20738const hsla = {
20739    test: isColorString("hsl", "hue"),
20740    parse: splitColor("hue", "saturation", "lightness"),
20741    transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
20742        return ("hsla(" +
20743            Math.round(hue) +
20744            ", " +
20745            percent.transform(sanitize(saturation)) +
20746            ", " +
20747            percent.transform(sanitize(lightness)) +
20748            ", " +
20749            sanitize(alpha.transform(alpha$1)) +
20750            ")");
20751    },
20752};
20753
20754
20755
20756;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/index.mjs
20757
20758
20759
20760
20761
20762const color = {
20763    test: (v) => rgba_rgba.test(v) || hex.test(v) || hsla.test(v),
20764    parse: (v) => {
20765        if (rgba_rgba.test(v)) {
20766            return rgba_rgba.parse(v);
20767        }
20768        else if (hsla.test(v)) {
20769            return hsla.parse(v);
20770        }
20771        else {
20772            return hex.parse(v);
20773        }
20774    },
20775    transform: (v) => {
20776        return isString(v)
20777            ? v
20778            : v.hasOwnProperty("red")
20779                ? rgba_rgba.transform(v)
20780                : hsla.transform(v);
20781    },
20782};
20783
20784
20785
20786;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix.mjs
20787/*
20788  Value in range from progress
20789
20790  Given a lower limit and an upper limit, we return the value within
20791  that range as expressed by progress (usually a number from 0 to 1)
20792
20793  So progress = 0.5 would change
20794
20795  from -------- to
20796
20797  to
20798
20799  from ---- to
20800
20801  E.g. from = 10, to = 20, progress = 0.5 => 15
20802
20803  @param [number]: Lower limit of range
20804  @param [number]: Upper limit of range
20805  @param [number]: The progress between lower and upper limits expressed 0-1
20806  @return [number]: Value as calculated from progress within range (not limited within range)
20807*/
20808const mix = (from, to, progress) => -progress * from + progress * to + from;
20809
20810
20811
20812;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs
20813// Adapted from https://gist.github.com/mjackson/5311256
20814function hueToRgb(p, q, t) {
20815    if (t < 0)
20816        t += 1;
20817    if (t > 1)
20818        t -= 1;
20819    if (t < 1 / 6)
20820        return p + (q - p) * 6 * t;
20821    if (t < 1 / 2)
20822        return q;
20823    if (t < 2 / 3)
20824        return p + (q - p) * (2 / 3 - t) * 6;
20825    return p;
20826}
20827function hslaToRgba({ hue, saturation, lightness, alpha }) {
20828    hue /= 360;
20829    saturation /= 100;
20830    lightness /= 100;
20831    let red = 0;
20832    let green = 0;
20833    let blue = 0;
20834    if (!saturation) {
20835        red = green = blue = lightness;
20836    }
20837    else {
20838        const q = lightness < 0.5
20839            ? lightness * (1 + saturation)
20840            : lightness + saturation - lightness * saturation;
20841        const p = 2 * lightness - q;
20842        red = hueToRgb(p, q, hue + 1 / 3);
20843        green = hueToRgb(p, q, hue);
20844        blue = hueToRgb(p, q, hue - 1 / 3);
20845    }
20846    return {
20847        red: Math.round(red * 255),
20848        green: Math.round(green * 255),
20849        blue: Math.round(blue * 255),
20850        alpha,
20851    };
20852}
20853
20854
20855
20856;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix-color.mjs
20857
20858
20859
20860
20861
20862
20863
20864// Linear color space blending
20865// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
20866// Demonstrated http://codepen.io/osublake/pen/xGVVaN
20867const mixLinearColor = (from, to, v) => {
20868    const fromExpo = from * from;
20869    return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
20870};
20871const colorTypes = [hex, rgba_rgba, hsla];
20872const getColorType = (v) => colorTypes.find((type) => type.test(v));
20873function asRGBA(color) {
20874    const type = getColorType(color);
20875    errors_invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
20876    let model = type.parse(color);
20877    if (type === hsla) {
20878        // TODO Remove this cast - needed since Framer Motion's stricter typing
20879        model = hslaToRgba(model);
20880    }
20881    return model;
20882}
20883const mixColor = (from, to) => {
20884    const fromRGBA = asRGBA(from);
20885    const toRGBA = asRGBA(to);
20886    const blended = { ...fromRGBA };
20887    return (v) => {
20888        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
20889        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
20890        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
20891        blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
20892        return rgba_rgba.transform(blended);
20893    };
20894};
20895
20896
20897
20898;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/complex/index.mjs
20899
20900
20901
20902
20903
20904
20905function test(v) {
20906    var _a, _b;
20907    return (isNaN(v) &&
20908        isString(v) &&
20909        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
20910            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
20911            0);
20912}
20913const cssVarTokeniser = {
20914    regex: cssVariableRegex,
20915    countKey: "Vars",
20916    token: "${v}",
20917    parse: noop_noop,
20918};
20919const colorTokeniser = {
20920    regex: colorRegex,
20921    countKey: "Colors",
20922    token: "${c}",
20923    parse: color.parse,
20924};
20925const numberTokeniser = {
20926    regex: floatRegex,
20927    countKey: "Numbers",
20928    token: "${n}",
20929    parse: number.parse,
20930};
20931function tokenise(info, { regex, countKey, token, parse }) {
20932    const matches = info.tokenised.match(regex);
20933    if (!matches)
20934        return;
20935    info["num" + countKey] = matches.length;
20936    info.tokenised = info.tokenised.replace(regex, token);
20937    info.values.push(...matches.map(parse));
20938}
20939function analyseComplexValue(value) {
20940    const originalValue = value.toString();
20941    const info = {
20942        value: originalValue,
20943        tokenised: originalValue,
20944        values: [],
20945        numVars: 0,
20946        numColors: 0,
20947        numNumbers: 0,
20948    };
20949    if (info.value.includes("var(--"))
20950        tokenise(info, cssVarTokeniser);
20951    tokenise(info, colorTokeniser);
20952    tokenise(info, numberTokeniser);
20953    return info;
20954}
20955function parseComplexValue(v) {
20956    return analyseComplexValue(v).values;
20957}
20958function createTransformer(source) {
20959    const { values, numColors, numVars, tokenised } = analyseComplexValue(source);
20960    const numValues = values.length;
20961    return (v) => {
20962        let output = tokenised;
20963        for (let i = 0; i < numValues; i++) {
20964            if (i < numVars) {
20965                output = output.replace(cssVarTokeniser.token, v[i]);
20966            }
20967            else if (i < numVars + numColors) {
20968                output = output.replace(colorTokeniser.token, color.transform(v[i]));
20969            }
20970            else {
20971                output = output.replace(numberTokeniser.token, sanitize(v[i]));
20972            }
20973        }
20974        return output;
20975    };
20976}
20977const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
20978function getAnimatableNone(v) {
20979    const parsed = parseComplexValue(v);
20980    const transformer = createTransformer(v);
20981    return transformer(parsed.map(convertNumbersToZero));
20982}
20983const complex = {
20984    test,
20985    parse: parseComplexValue,
20986    createTransformer,
20987    getAnimatableNone,
20988};
20989
20990
20991
20992;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix-complex.mjs
20993
20994
20995
20996
20997
20998
20999
21000const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;
21001function getMixer(origin, target) {
21002    if (typeof origin === "number") {
21003        return (v) => mix(origin, target, v);
21004    }
21005    else if (color.test(origin)) {
21006        return mixColor(origin, target);
21007    }
21008    else {
21009        return origin.startsWith("var(")
21010            ? mixImmediate(origin, target)
21011            : mixComplex(origin, target);
21012    }
21013}
21014const mixArray = (from, to) => {
21015    const output = [...from];
21016    const numValues = output.length;
21017    const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
21018    return (v) => {
21019        for (let i = 0; i < numValues; i++) {
21020            output[i] = blendValue[i](v);
21021        }
21022        return output;
21023    };
21024};
21025const mixObject = (origin, target) => {
21026    const output = { ...origin, ...target };
21027    const blendValue = {};
21028    for (const key in output) {
21029        if (origin[key] !== undefined && target[key] !== undefined) {
21030            blendValue[key] = getMixer(origin[key], target[key]);
21031        }
21032    }
21033    return (v) => {
21034        for (const key in blendValue) {
21035            output[key] = blendValue[key](v);
21036        }
21037        return output;
21038    };
21039};
21040const mixComplex = (origin, target) => {
21041    const template = complex.createTransformer(target);
21042    const originStats = analyseComplexValue(origin);
21043    const targetStats = analyseComplexValue(target);
21044    const canInterpolate = originStats.numVars === targetStats.numVars &&
21045        originStats.numColors === targetStats.numColors &&
21046        originStats.numNumbers >= targetStats.numNumbers;
21047    if (canInterpolate) {
21048        return pipe(mixArray(originStats.values, targetStats.values), template);
21049    }
21050    else {
21051        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.`);
21052        return mixImmediate(origin, target);
21053    }
21054};
21055
21056
21057
21058;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/progress.mjs
21059/*
21060  Progress within given range
21061
21062  Given a lower limit and an upper limit, we return the progress
21063  (expressed as a number 0-1) represented by the given value, and
21064  limit that progress to within 0-1.
21065
21066  @param [number]: Lower limit
21067  @param [number]: Upper limit
21068  @param [number]: Value to find progress within given range
21069  @return [number]: Progress of value within range as expressed 0-1
21070*/
21071const progress = (from, to, value) => {
21072    const toFromDifference = to - from;
21073    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
21074};
21075
21076
21077
21078;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/interpolate.mjs
21079
21080
21081
21082
21083
21084
21085
21086
21087
21088
21089const mixNumber = (from, to) => (p) => mix(from, to, p);
21090function detectMixerFactory(v) {
21091    if (typeof v === "number") {
21092        return mixNumber;
21093    }
21094    else if (typeof v === "string") {
21095        return color.test(v) ? mixColor : mixComplex;
21096    }
21097    else if (Array.isArray(v)) {
21098        return mixArray;
21099    }
21100    else if (typeof v === "object") {
21101        return mixObject;
21102    }
21103    return mixNumber;
21104}
21105function createMixers(output, ease, customMixer) {
21106    const mixers = [];
21107    const mixerFactory = customMixer || detectMixerFactory(output[0]);
21108    const numMixers = output.length - 1;
21109    for (let i = 0; i < numMixers; i++) {
21110        let mixer = mixerFactory(output[i], output[i + 1]);
21111        if (ease) {
21112            const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease;
21113            mixer = pipe(easingFunction, mixer);
21114        }
21115        mixers.push(mixer);
21116    }
21117    return mixers;
21118}
21119/**
21120 * Create a function that maps from a numerical input array to a generic output array.
21121 *
21122 * Accepts:
21123 *   - Numbers
21124 *   - Colors (hex, hsl, hsla, rgb, rgba)
21125 *   - Complex (combinations of one or more numbers or strings)
21126 *
21127 * ```jsx
21128 * const mixColor = interpolate([0, 1], ['#fff', '#000'])
21129 *
21130 * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
21131 * ```
21132 *
21133 * TODO Revist this approach once we've moved to data models for values,
21134 * probably not needed to pregenerate mixer functions.
21135 *
21136 * @public
21137 */
21138function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
21139    const inputLength = input.length;
21140    errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length");
21141    /**
21142     * If we're only provided a single input, we can just make a function
21143     * that returns the output.
21144     */
21145    if (inputLength === 1)
21146        return () => output[0];
21147    // If input runs highest -> lowest, reverse both arrays
21148    if (input[0] > input[inputLength - 1]) {
21149        input = [...input].reverse();
21150        output = [...output].reverse();
21151    }
21152    const mixers = createMixers(output, ease, mixer);
21153    const numMixers = mixers.length;
21154    const interpolator = (v) => {
21155        let i = 0;
21156        if (numMixers > 1) {
21157            for (; i < input.length - 2; i++) {
21158                if (v < input[i + 1])
21159                    break;
21160            }
21161        }
21162        const progressInRange = progress(input[i], input[i + 1], v);
21163        return mixers[i](progressInRange);
21164    };
21165    return isClamp
21166        ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v))
21167        : interpolator;
21168}
21169
21170
21171
21172;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/fill.mjs
21173
21174
21175
vendor: 12,604 bytes, lines 21176-21530
21176function fillOffset(offset, remaining) {
21177    const min = offset[offset.length - 1];
21178    for (let i = 1; i <= remaining; i++) {
21179        const offsetProgress = progress(0, remaining, i);
21180        offset.push(mix(min, 1, offsetProgress));
21181    }
21182}
21183
21184
21185
21186;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/default.mjs
21187
21188
21189function defaultOffset(arr) {
21190    const offset = [0];
21191    fillOffset(offset, arr.length - 1);
21192    return offset;
21193}
21194
21195
21196
21197;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/time.mjs
21198function convertOffsetToTimes(offset, duration) {
21199    return offset.map((o) => o * duration);
21200}
21201
21202
21203
21204;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs
21205
21206
21207
21208
21209
21210
21211
21212function defaultEasing(values, easing) {
21213    return values.map(() => easing || easeInOut).splice(0, values.length - 1);
21214}
21215function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
21216    /**
21217     * Easing functions can be externally defined as strings. Here we convert them
21218     * into actual functions.
21219     */
21220    const easingFunctions = isEasingArray(ease)
21221        ? ease.map(easingDefinitionToFunction)
21222        : easingDefinitionToFunction(ease);
21223    /**
21224     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
21225     * to reduce GC during animation.
21226     */
21227    const state = {
21228        done: false,
21229        value: keyframeValues[0],
21230    };
21231    /**
21232     * Create a times array based on the provided 0-1 offsets
21233     */
21234    const absoluteTimes = convertOffsetToTimes(
21235    // Only use the provided offsets if they're the correct length
21236    // TODO Maybe we should warn here if there's a length mismatch
21237    times && times.length === keyframeValues.length
21238        ? times
21239        : defaultOffset(keyframeValues), duration);
21240    const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
21241        ease: Array.isArray(easingFunctions)
21242            ? easingFunctions
21243            : defaultEasing(keyframeValues, easingFunctions),
21244    });
21245    return {
21246        calculatedDuration: duration,
21247        next: (t) => {
21248            state.value = mapTimeToKeyframe(t);
21249            state.done = t >= duration;
21250            return state;
21251        },
21252    };
21253}
21254
21255
21256
21257;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs
21258/*
21259  Convert velocity into velocity per second
21260
21261  @param [number]: Unit per frame
21262  @param [number]: Frame duration in ms
21263*/
21264function velocityPerSecond(velocity, frameDuration) {
21265    return frameDuration ? velocity * (1000 / frameDuration) : 0;
21266}
21267
21268
21269
21270;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs
21271
21272
21273const velocitySampleDuration = 5; // ms
21274function calcGeneratorVelocity(resolveValue, t, current) {
21275    const prevT = Math.max(t - velocitySampleDuration, 0);
21276    return velocityPerSecond(current - resolveValue(prevT), t - prevT);
21277}
21278
21279
21280
21281;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs
21282
21283
21284
21285
21286const safeMin = 0.001;
21287const minDuration = 0.01;
21288const maxDuration = 10.0;
21289const minDamping = 0.05;
21290const maxDamping = 1;
21291function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
21292    let envelope;
21293    let derivative;
21294    warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less");
21295    let dampingRatio = 1 - bounce;
21296    /**
21297     * Restrict dampingRatio and duration to within acceptable ranges.
21298     */
21299    dampingRatio = clamp_clamp(minDamping, maxDamping, dampingRatio);
21300    duration = clamp_clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
21301    if (dampingRatio < 1) {
21302        /**
21303         * Underdamped spring
21304         */
21305        envelope = (undampedFreq) => {
21306            const exponentialDecay = undampedFreq * dampingRatio;
21307            const delta = exponentialDecay * duration;
21308            const a = exponentialDecay - velocity;
21309            const b = calcAngularFreq(undampedFreq, dampingRatio);
21310            const c = Math.exp(-delta);
21311            return safeMin - (a / b) * c;
21312        };
21313        derivative = (undampedFreq) => {
21314            const exponentialDecay = undampedFreq * dampingRatio;
21315            const delta = exponentialDecay * duration;
21316            const d = delta * velocity + velocity;
21317            const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
21318            const f = Math.exp(-delta);
21319            const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
21320            const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
21321            return (factor * ((d - e) * f)) / g;
21322        };
21323    }
21324    else {
21325        /**
21326         * Critically-damped spring
21327         */
21328        envelope = (undampedFreq) => {
21329            const a = Math.exp(-undampedFreq * duration);
21330            const b = (undampedFreq - velocity) * duration + 1;
21331            return -safeMin + a * b;
21332        };
21333        derivative = (undampedFreq) => {
21334            const a = Math.exp(-undampedFreq * duration);
21335            const b = (velocity - undampedFreq) * (duration * duration);
21336            return a * b;
21337        };
21338    }
21339    const initialGuess = 5 / duration;
21340    const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
21341    duration = secondsToMilliseconds(duration);
21342    if (isNaN(undampedFreq)) {
21343        return {
21344            stiffness: 100,
21345            damping: 10,
21346            duration,
21347        };
21348    }
21349    else {
21350        const stiffness = Math.pow(undampedFreq, 2) * mass;
21351        return {
21352            stiffness,
21353            damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
21354            duration,
21355        };
21356    }
21357}
21358const rootIterations = 12;
21359function approximateRoot(envelope, derivative, initialGuess) {
21360    let result = initialGuess;
21361    for (let i = 1; i < rootIterations; i++) {
21362        result = result - envelope(result) / derivative(result);
21363    }
21364    return result;
21365}
21366function calcAngularFreq(undampedFreq, dampingRatio) {
21367    return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
21368}
21369
21370
21371
21372;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs
21373
21374
21375
21376
21377const durationKeys = ["duration", "bounce"];
21378const physicsKeys = ["stiffness", "damping", "mass"];
21379function isSpringType(options, keys) {
21380    return keys.some((key) => options[key] !== undefined);
21381}
21382function getSpringOptions(options) {
21383    let springOptions = {
21384        velocity: 0.0,
21385        stiffness: 100,
21386        damping: 10,
21387        mass: 1.0,
21388        isResolvedFromDuration: false,
21389        ...options,
21390    };
21391    // stiffness/damping/mass overrides duration/bounce
21392    if (!isSpringType(options, physicsKeys) &&
21393        isSpringType(options, durationKeys)) {
21394        const derived = findSpring(options);
21395        springOptions = {
21396            ...springOptions,
21397            ...derived,
21398            velocity: 0.0,
21399            mass: 1.0,
21400        };
21401        springOptions.isResolvedFromDuration = true;
21402    }
21403    return springOptions;
21404}
21405function spring({ keyframes, restDelta, restSpeed, ...options }) {
21406    const origin = keyframes[0];
21407    const target = keyframes[keyframes.length - 1];
21408    /**
21409     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
21410     * to reduce GC during animation.
21411     */
21412    const state = { done: false, value: origin };
21413    const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
21414    const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0;
21415    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
21416    const initialDelta = target - origin;
21417    const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
21418    /**
21419     * If we're working on a granular scale, use smaller defaults for determining
21420     * when the spring is finished.
21421     *
21422     * These defaults have been selected emprically based on what strikes a good
21423     * ratio between feeling good and finishing as soon as changes are imperceptible.
21424     */
21425    const isGranularScale = Math.abs(initialDelta) < 5;
21426    restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
21427    restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
21428    let resolveSpring;
21429    if (dampingRatio < 1) {
21430        const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
21431        // Underdamped spring
21432        resolveSpring = (t) => {
21433            const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
21434            return (target -
21435                envelope *
21436                    (((initialVelocity +
21437                        dampingRatio * undampedAngularFreq * initialDelta) /
21438                        angularFreq) *
21439                        Math.sin(angularFreq * t) +
21440                        initialDelta * Math.cos(angularFreq * t)));
21441        };
21442    }
21443    else if (dampingRatio === 1) {
21444        // Critically damped spring
21445        resolveSpring = (t) => target -
21446            Math.exp(-undampedAngularFreq * t) *
21447                (initialDelta +
21448                    (initialVelocity + undampedAngularFreq * initialDelta) * t);
21449    }
21450    else {
21451        // Overdamped spring
21452        const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
21453        resolveSpring = (t) => {
21454            const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
21455            // When performing sinh or cosh values can hit Infinity so we cap them here
21456            const freqForT = Math.min(dampedAngularFreq * t, 300);
21457            return (target -
21458                (envelope *
21459                    ((initialVelocity +
21460                        dampingRatio * undampedAngularFreq * initialDelta) *
21461                        Math.sinh(freqForT) +
21462                        dampedAngularFreq *
21463                            initialDelta *
21464                            Math.cosh(freqForT))) /
21465                    dampedAngularFreq);
21466        };
21467    }
21468    return {
21469        calculatedDuration: isResolvedFromDuration ? duration || null : null,
21470        next: (t) => {
21471            const current = resolveSpring(t);
21472            if (!isResolvedFromDuration) {
21473                let currentVelocity = initialVelocity;
21474                if (t !== 0) {
21475                    /**
21476                     * We only need to calculate velocity for under-damped springs
21477                     * as over- and critically-damped springs can't overshoot, so
21478                     * checking only for displacement is enough.
21479                     */
21480                    if (dampingRatio < 1) {
21481                        currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
21482                    }
21483                    else {
21484                        currentVelocity = 0;
21485                    }
21486                }
21487                const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
21488                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
21489                state.done =
21490                    isBelowVelocityThreshold && isBelowDisplacementThreshold;
21491            }
21492            else {
21493                state.done = t >= duration;
21494            }
21495            state.value = state.done ? target : current;
21496            return state;
21497        },
21498    };
21499}
21500
21501
21502
21503;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/inertia.mjs
21504
21505
21506
21507function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
21508    const origin = keyframes[0];
21509    const state = {
21510        done: false,
21511        value: origin,
21512    };
21513    const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
21514    const nearestBoundary = (v) => {
21515        if (min === undefined)
21516            return max;
21517        if (max === undefined)
21518            return min;
21519        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
21520    };
21521    let amplitude = power * velocity;
21522    const ideal = origin + amplitude;
21523    const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
21524    /**
21525     * If the target has changed we need to re-calculate the amplitude, otherwise
21526     * the animation will start from the wrong position.
21527     */
21528    if (target !== ideal)
21529        amplitude = target - origin;
21530    const calcDelta = (t) =>
21530 -amplitude * Math.exp(-t / timeConstant);
21531    const calcLatest = (t) => target + calcDelta(t);
21532    const applyFriction = (t) => {
21533        const delta = calcDelta(t);
21534        const latest = calcLatest(t);
21535        state.done = Math.abs(delta) <= restDelta;
21536        state.value = state.done ? target : latest;
21537    };
21538    /**
21539     * Ideally this would resolve for t in a stateless way, we could
21540     * do that by always precalculating the animation but as we know
21541     * this will be done anyway we can assume that spring will
21542     * be discovered during that.
21543     */
21544    let timeReachedBoundary;
21545    let spring$1;
21546    const checkCatchBoundary = (t) => {
21547        if (!isOutOfBounds(state.value))
21548            return;
21549        timeReachedBoundary = t;
21550        spring$1 = spring({
21551            keyframes: [state.value, nearestBoundary(state.value)],
21552            velocity: calcGeneratorVelocity(calcLatest, t, state.value),
21553            damping: bounceDamping,
21554            stiffness: bounceStiffness,
21555            restDelta,
21556            restSpeed,
21557        });
21558    };
21559    checkCatchBoundary(0);
21560    return {
21561        calculatedDuration: null,
21562        next: (t) => {
21563            /**
21564             * We need to resolve the friction to figure out if we need a
21565             * spring but we don't want to do this twice per frame. So here
21566             * we flag if we updated for this frame and later if we did
21567             * we can skip doing it again.
21568             */
21569            let hasUpdatedFrame = false;
21570            if (!spring$1 && timeReachedBoundary === undefined) {
21571                hasUpdatedFrame = true;
21572                applyFriction(t);
21573                checkCatchBoundary(t);
21574            }
21575            /**
21576             * If we have a spring and the provided t is beyond the moment the friction
21577             * animation crossed the min/max boundary, use the spring.
21578             */
21579            if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {
21580                return spring$1.next(t - timeReachedBoundary);
21581            }
21582            else {
21583                !hasUpdatedFrame && applyFriction(t);
21584                return state;
21585            }
21586        },
21587    };
21588}
21589
21590
21591
21592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.mjs
21593
21594
21595const frameloopDriver = (update) => {
21596    const passTimestamp = ({ timestamp }) => update(timestamp);
21597    return {
21598        start: () => frame_frame.update(passTimestamp, true),
21599        stop: () => cancelFrame(passTimestamp),
21600        /**
21601         * If we're processing this frame we can use the
21602         * framelocked timestamp to keep things in sync.
21603         */
21604        now: () => frameData.isProcessing ? frameData.timestamp : performance.now(),
21605    };
21606};
21607
21608
21609
21610;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs
21611/**
21612 * Implement a practical max duration for keyframe generation
21613 * to prevent infinite loops
21614 */
21615const maxGeneratorDuration = 20000;
21616function calcGeneratorDuration(generator) {
21617    let duration = 0;
21618    const timeStep = 50;
21619    let state = generator.next(duration);
21620    while (!state.done && duration < maxGeneratorDuration) {
21621        duration += timeStep;
21622        state = generator.next(duration);
21623    }
21624    return duration >= maxGeneratorDuration ? Infinity : duration;
21625}
21626
21627
21628
21629;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/js/index.mjs
21630
21631
21632
21633
21634
21635
21636
21637
21638
21639const types = {
21640    decay: inertia,
21641    inertia: inertia,
21642    tween: keyframes_keyframes,
21643    keyframes: keyframes_keyframes,
21644    spring: spring,
21645};
21646/**
21647 * Animate a single value on the main thread.
21648 *
21649 * This function is written, where functionality overlaps,
21650 * to be largely spec-compliant with WAAPI to allow fungibility
21651 * between the two.
21652 */
21653function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
21654    let speed = 1;
21655    let hasStopped = false;
21656    let resolveFinishedPromise;
21657    let currentFinishedPromise;
21658    /**
21659     * Resolve the current Promise every time we enter the
21660     * finished state. This is WAAPI-compatible behaviour.
21661     */
21662    const updateFinishedPromise = () => {
21663        currentFinishedPromise = new Promise((resolve) => {
21664            resolveFinishedPromise = resolve;
21665        });
21666    };
21667    // Create the first finished promise
21668    updateFinishedPromise();
21669    let animationDriver;
21670    const generatorFactory = types[type] || keyframes_keyframes;
21671    /**
21672     * If this isn't the keyframes generator and we've been provided
21673     * strings as keyframes, we need to interpolate these.
21674     * TODO: Support velocity for units and complex value types/
21675     */
21676    let mapNumbersToKeyframes;
21677    if (generatorFactory !== keyframes_keyframes &&
21678        typeof keyframes$1[0] !== "number") {
21679        mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
21680            clamp: false,
21681        });
21682        keyframes$1 = [0, 100];
21683    }
21684    const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
21685    let mirroredGenerator;
21686    if (repeatType === "mirror") {
21687        mirroredGenerator = generatorFactory({
21688            ...options,
21689            keyframes: [...keyframes$1].reverse(),
21690            velocity: -(options.velocity || 0),
21691        });
21692    }
21693    let playState = "idle";
21694    let holdTime = null;
21695    let startTime = null;
21696    let cancelTime = null;
21697    /**
21698     * If duration is undefined and we have repeat options,
21699     * we need to calculate a duration from the generator.
21700     *
21701     * We set it to the generator itself to cache the duration.
21702     * Any timeline resolver will need to have already precalculated
21703     * the duration by this step.
21704     */
21705    if (generator.calculatedDuration === null && repeat) {
21706        generator.calculatedDuration = calcGeneratorDuration(generator);
21707    }
21708    const { calculatedDuration } = generator;
21709    let resolvedDuration = Infinity;
21710    let totalDuration = Infinity;
21711    if (calculatedDuration !== null) {
21712        resolvedDuration = calculatedDuration + repeatDelay;
21713        totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
21714    }
21715    let currentTime = 0;
21716    const tick = (timestamp) => {
21717        if (startTime === null)
21718            return;
21719        /**
21720         * requestAnimationFrame timestamps can come through as lower than
21721         * the startTime as set by performance.now(). Here we prevent this,
21722         * though in the future it could be possible to make setting startTime
21723         * a pending operation that gets resolved here.
21724         */
21725        if (speed > 0)
21726            startTime = Math.min(startTime, timestamp);
21727        if (speed < 0)
21728            startTime = Math.min(timestamp - totalDuration / speed, startTime);
21729        if (holdTime !== null) {
21730            currentTime = holdTime;
21731        }
21732        else {
21733            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
21734            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
21735            // example.
21736            currentTime = Math.round(timestamp - startTime) * speed;
21737        }
21738        // Rebase on delay
21739        const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1);
21740        const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
21741        currentTime = Math.max(timeWithoutDelay, 0);
21742        /**
21743         * If this animation has finished, set the current time
21744         * to the total duration.
21745         */
21746        if (playState === "finished" && holdTime === null) {
21747            currentTime = totalDuration;
21748        }
21749        let elapsed = currentTime;
21750        let frameGenerator = generator;
21751        if (repeat) {
21752            /**
21753             * Get the current progress (0-1) of the animation. If t is >
21754             * than duration we'll get values like 2.5 (midway through the
21755             * third iteration)
21756             */
21757            const progress = currentTime / resolvedDuration;
21758            /**
21759             * Get the current iteration (0 indexed). For instance the floor of
21760             * 2.5 is 2.
21761             */
21762            let currentIteration = Math.floor(progress);
21763            /**
21764             * Get the current progress of the iteration by taking the remainder
21765             * so 2.5 is 0.5 through iteration 2
21766             */
21767            let iterationProgress = progress % 1.0;
21768            /**
21769             * If iteration progress is 1 we count that as the end
21770             * of the previous iteration.
21771             */
21772            if (!iterationProgress && progress >= 1) {
21773                iterationProgress = 1;
21774            }
21775            iterationProgress === 1 && currentIteration--;
21776            currentIteration = Math.min(currentIteration, repeat + 1);
21777            /**
21778             * Reverse progress if we're not running in "normal" direction
21779             */
21780            const iterationIsOdd = Boolean(currentIteration % 2);
21781            if (iterationIsOdd) {
21782                if (repeatType === "reverse") {
21783                    iterationProgress = 1 - iterationProgress;
21784                    if (repeatDelay) {
21785                        iterationProgress -= repeatDelay / resolvedDuration;
21786                    }
21787                }
21788                else if (repeatType === "mirror") {
21789                    frameGenerator = mirroredGenerator;
21790                }
21791            }
21792            let p = clamp_clamp(0, 1, iterationProgress);
21793            if (currentTime > totalDuration) {
21794                p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
21795            }
21796            elapsed = p * resolvedDuration;
21797        }
21798        /**
21799         * If we're in negative time, set state as the initial keyframe.
21800         * This prevents delay: x, duration: 0 animations from finishing
21801         * instantly.
21802         */
21803        const state = isInDelayPhase
21804            ? { done: false, value: keyframes$1[0] }
21805            : frameGenerator.next(elapsed);
21806        if (mapNumbersToKeyframes) {
21807            state.value = mapNumbersToKeyframes(state.value);
21808        }
21809        let { done } = state;
21810        if (!isInDelayPhase && calculatedDuration !== null) {
21811            done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0;
21812        }
21813        const isAnimationFinished = holdTime === null &&
21814            (playState === "finished" || (playState === "running" && done));
21815        if (onUpdate) {
21816            onUpdate(state.value);
21817        }
21818        if (isAnimationFinished) {
21819            finish();
21820        }
21821        return state;
21822    };
21823    const stopAnimationDriver = () => {
21824        animationDriver && animationDriver.stop();
21825        animationDriver = undefined;
21826    };
21827    const cancel = () => {
21828        playState = "idle";
21829        stopAnimationDriver();
21830        resolveFinishedPromise();
21831        updateFinishedPromise();
21832        startTime = cancelTime = null;
21833    };
21834    const finish = () => {
21835        playState = "finished";
21836        onComplete && onComplete();
21837        stopAnimationDriver();
21838        resolveFinishedPromise();
21839    };
21840    const play = () => {
21841        if (hasStopped)
21842            return;
21843        if (!animationDriver)
21844            animationDriver = driver(tick);
21845        const now = animationDriver.now();
21846        onPlay && onPlay();
21847        if (holdTime !== null) {
21848            startTime = now - holdTime;
21849        }
21850        else if (!startTime || playState === "finished") {
21851            startTime = now;
21852        }
21853        if (playState === "finished") {
21854            updateFinishedPromise();
21855        }
21856        cancelTime = startTime;
21857        holdTime = null;
21858        /**
21859         * Set playState to running only after we've used it in
21860         * the previous logic.
21861         */
21862        playState = "running";
21863        animationDriver.start();
21864    };
21865    if (autoplay) {
21866        play();
21867    }
21868    const controls = {
21869        then(resolve, reject) {
21870            return currentFinishedPromise.then(resolve, reject);
21871        },
21872        get time() {
21873            return millisecondsToSeconds(currentTime);
21874        },
21875        set time(newTime) {
21876            newTime = secondsToMilliseconds(newTime);
21877            currentTime = newTime;
21878            if (holdTime !== null || !animationDriver || speed === 0) {
21879                holdTime = newTime;
21880            }
21881            else {
21882                startTime = animationDriver.now() - newTime / speed;
21883            }
21884        },
21885        get duration() {
21886            const duration = generator.calculatedDuration === null
21887                ? calcGeneratorDuration(generator)
21888                : generator.calculatedDuration;
21889            return millisecondsToSeconds(duration);
21890        },
21891        get speed() {
21892            return speed;
21893        },
21894        set speed(newSpeed) {
21895            if (newSpeed === speed || !animationDriver)
21896                return;
21897            speed = newSpeed;
21898            controls.time = millisecondsToSeconds(currentTime);
21899        },
21900        get state() {
21901            return playState;
21902        },
21903        play,
21904        pause: () => {
21905            playState = "paused";
21906            holdTime = currentTime;
21907        },
21908        stop: () => {
21909            hasStopped = true;
21910            if (playState === "idle")
21911                return;
21912            playState = "idle";
21913            onStop && onStop();
21914            cancel();
21915        },
21916        cancel: () => {
21917            if (cancelTime !== null)
21918                tick(cancelTime);
21919            cancel();
21920        },
21921        complete: () => {
21922            playState = "finished";
21923        },
21924        sample: (elapsed) => {
21925            startTime = 0;
21926            return tick(elapsed);
21927        },
21928    };
21929    return controls;
21930}
21931
21932
21933
21934;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/memo.mjs
21935function memo_memo(callback) {
21936    let result;
21937    return () => {
21938        if (result === undefined)
21939            result = callback();
21940        return result;
21941    };
21942}
21943
21944
21945
21946;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.mjs
21947
21948
21949
21950
21951
21952
21953
21954
21955const supportsWaapi = memo_memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
21956/**
21957 * A list of values that can be hardware-accelerated.
21958 */
21959const acceleratedValues = new Set([
21960    "opacity",
21961    "clipPath",
21962    "filter",
21963    "transform",
21964    "backgroundColor",
21965]);
21966/**
21967 * 10ms is chosen here as it strikes a balance between smooth
21968 * results (more than one keyframe per frame at 60fps) and
21969 * keyframe quantity.
21970 */
21971const sampleDelta = 10; //ms
21972/**
21973 * Implement a practical max duration for keyframe generation
21974 * to prevent infinite loops
21975 */
21976const create_accelerated_animation_maxDuration = 20000;
21977const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" ||
21978    valueName === "backgroundColor" ||
21979    !isWaapiSupportedEasing(options.ease);
21980function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
21981    const canAccelerateAnimation = supportsWaapi() &&
21982        acceleratedValues.has(valueName) &&
21983        !options.repeatDelay &&
21984        options.repeatType !== "mirror" &&
21985        options.damping !== 0 &&
21986        options.type !== "inertia";
21987    if (!canAccelerateAnimation)
21988        return false;
21989    /**
21990     * TODO: Unify with js/index
21991     */
21992    let hasStopped = false;
21993    let resolveFinishedPromise;
21994    let currentFinishedPromise;
21995    /**
21996     * Resolve the current Promise every time we enter the
21997     * finished state. This is WAAPI-compatible behaviour.
21998     */
21999    const updateFinishedPromise = () => {
22000        currentFinishedPromise = new Promise((resolve) => {
22001            resolveFinishedPromise = resolve;
22002        });
22003    };
22004    // Create the first finished promise
22005    updateFinishedPromise();
22006    let { keyframes, duration = 300, ease, times } = options;
22007    /**
22008     * If this animation needs pre-generated keyframes then generate.
22009     */
22010    if (requiresPregeneratedKeyframes(valueName, options)) {
22011        const sampleAnimation = animateValue({
22012            ...options,
22013            repeat: 0,
22014            delay: 0,
22015        });
22016        let state = { done: false, value: keyframes[0] };
22017        const pregeneratedKeyframes = [];
22018        /**
22019         * Bail after 20 seconds of pre-generated keyframes as it's likely
22020         * we're heading for an infinite loop.
22021         */
22022        let t = 0;
22023        while (!state.done && t < create_accelerated_animation_maxDuration) {
22024            state = sampleAnimation.sample(t);
22025            pregeneratedKeyframes.push(state.value);
22026            t += sampleDelta;
22027        }
22028        times = undefined;
22029        keyframes = pregeneratedKeyframes;
22030        duration = t - sampleDelta;
22031        ease = "linear";
22032    }
22033    const animation = animateStyle(value.owner.current, valueName, keyframes, {
22034        ...options,
22035        duration,
22036        /**
22037         * This function is currently not called if ease is provided
22038         * as a function so the cast is safe.
22039         *
22040         * However it would be possible for a future refinement to port
22041         * in easing pregeneration from Motion One for browsers that
22042         * support the upcoming `linear()` easing function.
22043         */
22044        ease: ease,
22045        times,
22046    });
22047    const cancelAnimation = () => animation.cancel();
22048    const safeCancel = () => {
22049        frame_frame.update(cancelAnimation);
22050        resolveFinishedPromise();
22051        updateFinishedPromise();
22052    };
22053    /**
22054     * Prefer the `onfinish` prop as it's more widely supported than
22055     * the `finished` promise.
22056     *
22057     * Here, we synchronously set the provided MotionValue to the end
22058     * keyframe. If we didn't, when the WAAPI animation is finished it would
22059     * be removed from the element which would then revert to its old styles.
22060     */
22061    animation.onfinish = () => {
22062        value.set(getFinalKeyframe(keyframes, options));
22063        onComplete && onComplete();
22064        safeCancel();
22065    };
22066    /**
22067     * Animation interrupt callback.
22068     */
22069    return {
22070        then(resolve, reject) {
22071            return currentFinishedPromise.then(resolve, reject);
22072        },
22073        get timeline() {
22074            return animation.timeline;
22075        },
22076        set timeline(timeline) {
22077            animation.timeline = timeline;
22078            animation.onfinish = null;
22079        },
22080        get time() {
22081            return millisecondsToSeconds(animation.currentTime || 0);
22082        },
22083        set time(newTime) {
22084            animation.currentTime = secondsToMilliseconds(newTime);
22085        },
22086        get speed() {
22087            return animation.playbackRate;
22088        },
22089        set speed(newSpeed) {
22090            animation.playbackRate = newSpeed;
22091        },
22092        get duration() {
22093            return millisecondsToSeconds(duration);
22094        },
22095        play: () => {
22096            if (hasStopped)
22097                return;
22098            animation.play();
22099            /**
22100             * Cancel any pending cancel tasks
22101             */
22102            cancelFrame(cancelAnimation);
22103        },
22104        pause: () => animation.pause(),
22105        stop: () => {
22106            hasStopped = true;
22107            if (animation.playState === "idle")
22108                return;
22109            /**
22110             * WAAPI doesn't natively have any interruption capabilities.
22111             *
22112             * Rather than read commited styles back out of the DOM, we can
22113             * create a renderless JS animation and sample it twice to calculate
22114             * its current value, "previous" value, and therefore allow
22115             * Motion to calculate velocity for any subsequent animation.
22116             */
22117            const { currentTime } = animation;
22118            if (currentTime) {
22119                const sampleAnimation = animateValue({
22120                    ...options,
22121                    autoplay: false,
22122                });
22123                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
22124            }
22125            safeCancel();
22126        },
22127        complete: () => animation.finish(),
22128        cancel: safeCancel,
22129    };
22130}
22131
22132
22133
22134;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/instant.mjs
22135
22136
22137
22138function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
22139    const setValue = () => {
22140        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
22141        onComplete && onComplete();
22142        /**
22143         * TODO: As this API grows it could make sense to always return
22144         * animateValue. This will be a bigger project as animateValue
22145         * is frame-locked whereas this function resolves instantly.
22146         * This is a behavioural change and also has ramifications regarding
22147         * assumptions within tests.
22148         */
22149        return {
22150            time: 0,
22151            speed: 1,
22152            duration: 0,
22153            play: (noop_noop),
22154            pause: (noop_noop),
22155            stop: (noop_noop),
22156            then: (resolve) => {
22157                resolve();
22158                return Promise.resolve();
22159            },
22160            cancel: (noop_noop),
22161            complete: (noop_noop),
22162        };
22163    };
22164    return delay
22165        ? animateValue({
22166            keyframes: [0, 1],
22167            duration: 0,
22168            delay,
22169            onComplete: setValue,
22170        })
22171        : setValue();
22172}
22173
22174
22175
22176;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs
22177
22178
22179const underDampedSpring = {
22180    type: "spring",
22181    stiffness: 500,
22182    damping: 25,
22183    restSpeed: 10,
22184};
22185const criticallyDampedSpring = (target) => ({
22186    type: "spring",
22187    stiffness: 550,
22188    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
22189    restSpeed: 10,
22190});
22191const keyframesTransition = {
22192    type: "keyframes",
22193    duration: 0.8,
22194};
22195/**
22196 * Default easing curve is a slightly shallower version of
22197 * the default browser easing curve.
22198 */
22199const ease = {
22200    type: "keyframes",
22201    ease: [0.25, 0.1, 0.35, 1],
22202    duration: 0.3,
22203};
22204const getDefaultTransition = (valueKey, { keyframes }) => {
22205    if (keyframes.length > 2) {
22206        return keyframesTransition;
22207    }
22208    else if (transformProps.has(valueKey)) {
22209        return valueKey.startsWith("scale")
22210            ? criticallyDampedSpring(keyframes[1])
22211            : underDampedSpring;
22212    }
22213    return ease;
22214};
22215
22216
22217
22218;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs
22219
22220
22221/**
22222 * Check if a value is animatable. Examples:
22223 *
22224 * ✅: 100, "100px", "#fff"
22225 * ❌: "block", "url(2.jpg)"
22226 * @param value
22227 *
22228 * @internal
22229 */
22230const isAnimatable = (key, value) => {
22231    // If the list of keys tat might be non-animatable grows, replace with Set
22232    if (key === "zIndex")
22233        return false;
22234    // If it's a number or a keyframes array, we can animate it. We might at some point
22235    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
22236    // but for now lets leave it like this for performance reasons
22237    if (typeof value === "number" || Array.isArray(value))
22238        return true;
22239    if (typeof value === "string" && // It's animatable if we have a string
22240        (complex.test(value) || value === "0") && // And it contains 
22240numbers and/or colors
22241        !value.startsWith("url(") // Unless it starts with "url("
22242    ) {
22243        return true;
22244    }
22245    return false;
22246};
22247
22248
22249
22250;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/complex/filter.mjs
22251
22252
22253
22254/**
22255 * Properties that should default to 1 or 100%
22256 */
22257const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
22258function applyDefaultFilter(v) {
22259    const [name, value] = v.slice(0, -1).split("(");
22260    if (name === "drop-shadow")
22261        return v;
22262    const [number] = value.match(floatRegex) || [];
22263    if (!number)
22264        return v;
22265    const unit = value.replace(number, "");
22266    let defaultValue = maxDefaults.has(name) ? 1 : 0;
22267    if (number !== value)
22268        defaultValue *= 100;
22269    return name + "(" + defaultValue + unit + ")";
22270}
22271const functionRegex = /([a-z-]*)\(.*?\)/g;
22272const filter = {
22273    ...complex,
22274    getAnimatableNone: (v) => {
22275        const functions = v.match(functionRegex);
22276        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
22277    },
22278};
22279
22280
22281
22282;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
22283
22284
22285
22286
22287/**
22288 * A map of default value types for common values
22289 */
22290const defaultValueTypes = {
22291    ...numberValueTypes,
22292    // Color props
22293    color: color,
22294    backgroundColor: color,
22295    outlineColor: color,
22296    fill: color,
22297    stroke: color,
22298    // Border props
22299    borderColor: color,
22300    borderTopColor: color,
22301    borderRightColor: color,
22302    borderBottomColor: color,
22303    borderLeftColor: color,
22304    filter: filter,
22305    WebkitFilter: filter,
22306};
22307/**
22308 * Gets the default ValueType for the provided value key
22309 */
22310const getDefaultValueType = (key) => defaultValueTypes[key];
22311
22312
22313
22314;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
22315
22316
22317
22318
22319function animatable_none_getAnimatableNone(key, value) {
22320    let defaultValueType = getDefaultValueType(key);
22321    if (defaultValueType !== filter)
22322        defaultValueType = complex;
22323    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
22324    return defaultValueType.getAnimatableNone
22325        ? defaultValueType.getAnimatableNone(value)
22326        : undefined;
22327}
22328
22329
22330
22331;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs
22332/**
22333 * Check if the value is a zero value string like "0px" or "0%"
22334 */
22335const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
22336
22337
22338
22339;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-none.mjs
22340
22341
22342function isNone(value) {
22343    if (typeof value === "number") {
22344        return value === 0;
22345    }
22346    else if (value !== null) {
22347        return value === "none" || value === "0" || isZeroValueString(value);
22348    }
22349}
22350
22351
22352
22353;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/keyframes.mjs
22354
22355
22356
22357
22358function getKeyframes(value, valueName, target, transition) {
22359    const isTargetAnimatable = isAnimatable(valueName, target);
22360    let keyframes;
22361    if (Array.isArray(target)) {
22362        keyframes = [...target];
22363    }
22364    else {
22365        keyframes = [null, target];
22366    }
22367    const defaultOrigin = transition.from !== undefined ? transition.from : value.get();
22368    let animatableTemplateValue = undefined;
22369    const noneKeyframeIndexes = [];
22370    for (let i = 0; i < keyframes.length; i++) {
22371        /**
22372         * Fill null/wildcard keyframes
22373         */
22374        if (keyframes[i] === null) {
22375            keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];
22376        }
22377        if (isNone(keyframes[i])) {
22378            noneKeyframeIndexes.push(i);
22379        }
22380        // TODO: Clean this conditional, it works for now
22381        if (typeof keyframes[i] === "string" &&
22382            keyframes[i] !== "none" &&
22383            keyframes[i] !== "0") {
22384            animatableTemplateValue = keyframes[i];
22385        }
22386    }
22387    if (isTargetAnimatable &&
22388        noneKeyframeIndexes.length &&
22389        animatableTemplateValue) {
22390        for (let i = 0; i < noneKeyframeIndexes.length; i++) {
22391            const index = noneKeyframeIndexes[i];
22392            keyframes[index] = animatable_none_getAnimatableNone(valueName, animatableTemplateValue);
22393        }
22394    }
22395    return keyframes;
22396}
22397
22398
22399
22400;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/transitions.mjs
22401/**
22402 * Decide whether a transition is defined on a given Transition.
22403 * This filters out orchestration options and returns true
22404 * if any options are left.
22405 */
22406function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
22407    return !!Object.keys(transition).length;
22408}
22409function getValueTransition(transition, key) {
22410    return transition[key] || transition["default"] || transition;
22411}
22412
22413
22414
22415;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs
22416
22417
22418
22419
22420
22421
22422
22423
22424
22425
22426
22427const animateMotionValue = (valueName, value, target, transition = {}) => {
22428    return (onComplete) => {
22429        const valueTransition = getValueTransition(transition, valueName) || {};
22430        /**
22431         * Most transition values are currently completely overwritten by value-specific
22432         * transitions. In the future it'd be nicer to blend these transitions. But for now
22433         * delay actually does inherit from the root transition if not value-specific.
22434         */
22435        const delay = valueTransition.delay || transition.delay || 0;
22436        /**
22437         * Elapsed isn't a public transition option but can be passed through from
22438         * optimized appear effects in milliseconds.
22439         */
22440        let { elapsed = 0 } = transition;
22441        elapsed = elapsed - secondsToMilliseconds(delay);
22442        const keyframes = getKeyframes(value, valueName, target, valueTransition);
22443        /**
22444         * Check if we're able to animate between the start and end keyframes,
22445         * and throw a warning if we're attempting to animate between one that's
22446         * animatable and another that isn't.
22447         */
22448        const originKeyframe = keyframes[0];
22449        const targetKeyframe = keyframes[keyframes.length - 1];
22450        const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
22451        const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
22452        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.`);
22453        let options = {
22454            keyframes,
22455            velocity: value.getVelocity(),
22456            ease: "easeOut",
22457            ...valueTransition,
22458            delay: -elapsed,
22459            onUpdate: (v) => {
22460                value.set(v);
22461                valueTransition.onUpdate && valueTransition.onUpdate(v);
22462            },
22463            onComplete: () => {
22464                onComplete();
22465                valueTransition.onComplete && valueTransition.onComplete();
22466            },
22467        };
22468        /**
22469         * If there's no transition defined for this value, we can generate
22470         * unqiue transition settings for this value.
22471         */
22472        if (!isTransitionDefined(valueTransition)) {
22473            options = {
22474                ...options,
22475                ...getDefaultTransition(valueName, options),
22476            };
22477        }
22478        /**
22479         * Both WAAPI and our internal animation functions use durations
22480         * as defined by milliseconds, while our external API defines them
22481         * as seconds.
22482         */
22483        if (options.duration) {
22484            options.duration = secondsToMilliseconds(options.duration);
22485        }
22486        if (options.repeatDelay) {
22487            options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
22488        }
22489        if (!isOriginAnimatable ||
22490            !isTargetAnimatable ||
22491            instantAnimationState.current ||
22492            valueTransition.type === false) {
22493            /**
22494             * If we can't animate this value, or the global instant animation flag is set,
22495             * or this is simply defined as an instant transition, return an instant transition.
22496             */
22497            return createInstantAnimation(instantAnimationState.current
22498                ? { ...options, delay: 0 }
22499                : options);
22500        }
22501        /**
22502         * Animate via WAAPI if possible.
22503         */
22504        if (value.owner &&
22505            value.owner.current instanceof HTMLElement &&
22506            !value.owner.getProps().onUpdate) {
22507            const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
22508            if (acceleratedAnimation)
22509                return acceleratedAnimation;
22510        }
22511        /**
22512         * If we didn't create an accelerated animation, create a JS animation
22513         */
22514        return animateValue(options);
22515    };
22516};
22517
22518
22519
22520;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
22521
22522
22523function isWillChangeMotionValue(value) {
22524    return Boolean(isMotionValue(value) && value.add);
22525}
22526
22527
22528
22529;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs
22530/**
22531 * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
22532 */
22533const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
22534
22535
22536
22537;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/array.mjs
vendor: 5,306 bytes, lines 22538-22704
22538function addUniqueItem(arr, item) {
22539    if (arr.indexOf(item) === -1)
22540        arr.push(item);
22541}
22542function removeItem(arr, item) {
22543    const index = arr.indexOf(item);
22544    if (index > -1)
22545        arr.splice(index, 1);
22546}
22547// Adapted from array-move
22548function moveItem([...arr], fromIndex, toIndex) {
22549    const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
22550    if (startIndex >= 0 && startIndex < arr.length) {
22551        const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
22552        const [item] = arr.splice(fromIndex, 1);
22553        arr.splice(endIndex, 0, item);
22554    }
22555    return arr;
22556}
22557
22558
22559
22560;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
22561
22562
22563class SubscriptionManager {
22564    constructor() {
22565        this.subscriptions = [];
22566    }
22567    add(handler) {
22568        addUniqueItem(this.subscriptions, handler);
22569        return () => removeItem(this.subscriptions, handler);
22570    }
22571    notify(a, b, c) {
22572        const numSubscriptions = this.subscriptions.length;
22573        if (!numSubscriptions)
22574            return;
22575        if (numSubscriptions === 1) {
22576            /**
22577             * If there's only a single handler we can just call it without invoking a loop.
22578             */
22579            this.subscriptions[0](a, b, c);
22580        }
22581        else {
22582            for (let i = 0; i < numSubscriptions; i++) {
22583                /**
22584                 * Check whether the handler exists before firing as it's possible
22585                 * the subscriptions were modified during this loop running.
22586                 */
22587                const handler = this.subscriptions[i];
22588                handler && handler(a, b, c);
22589            }
22590        }
22591    }
22592    getSize() {
22593        return this.subscriptions.length;
22594    }
22595    clear() {
22596        this.subscriptions.length = 0;
22597    }
22598}
22599
22600
22601
22602;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/index.mjs
22603
22604
22605
22606
22607
22608const isFloat = (value) => {
22609    return !isNaN(parseFloat(value));
22610};
22611/**
22612 * `MotionValue` is used to track the state and velocity of motion values.
22613 *
22614 * @public
22615 */
22616class MotionValue {
22617    /**
22618     * @param init - The initiating value
22619     * @param config - Optional configuration options
22620     *
22621     * -  `transformer`: A function to transform incoming values with.
22622     *
22623     * @internal
22624     */
22625    constructor(init, options = {}) {
22626        /**
22627         * This will be replaced by the build step with the latest version number.
22628         * When MotionValues are provided to motion components, warn if versions are mixed.
22629         */
22630        this.version = "10.13.0";
22631        /**
22632         * Duration, in milliseconds, since last updating frame.
22633         *
22634         * @internal
22635         */
22636        this.timeDelta = 0;
22637        /**
22638         * Timestamp of the last time this `MotionValue` was updated.
22639         *
22640         * @internal
22641         */
22642        this.lastUpdated = 0;
22643        /**
22644         * Tracks whether this value can output a velocity. Currently this is only true
22645         * if the value is numerical, but we might be able to widen the scope here and support
22646         * other value types.
22647         *
22648         * @internal
22649         */
22650        this.canTrackVelocity = false;
22651        /**
22652         * An object containing a SubscriptionManager for each active event.
22653         */
22654        this.events = {};
22655        this.updateAndNotify = (v, render = true) => {
22656            this.prev = this.current;
22657            this.current = v;
22658            // Update timestamp
22659            const { delta, timestamp } = frameData;
22660            if (this.lastUpdated !== timestamp) {
22661                this.timeDelta = delta;
22662                this.lastUpdated = timestamp;
22663                frame_frame.postRender(this.scheduleVelocityCheck);
22664            }
22665            // Update update subscribers
22666            if (this.prev !== this.current && this.events.change) {
22667                this.events.change.notify(this.current);
22668            }
22669            // Update velocity subscribers
22670            if (this.events.velocityChange) {
22671                this.events.velocityChange.notify(this.getVelocity());
22672            }
22673            // Update render subscribers
22674            if (render && this.events.renderRequest) {
22675                this.events.renderRequest.notify(this.current);
22676            }
22677        };
22678        /**
22679         * Schedule a velocity check for the next frame.
22680         *
22681         * This is an instanced and bound function to prevent generating a new
22682         * function once per frame.
22683         *
22684         * @internal
22685         */
22686        this.scheduleVelocityCheck = () => frame_frame.postRender(this.velocityCheck);
22687        /**
22688         * Updates `prev` with `current` if the value hasn't been updated this frame.
22689         * This ensures velocity calculations return `0`.
22690         *
22691         * This is an instanced and bound function to prevent generating a new
22692         * function once per frame.
22693         *
22694         * @internal
22695         */
22696        this.velocityCheck = ({ timestamp }) => {
22697            if (timestamp !== this.lastUpdated) {
22698                this.prev = this.current;
22699                if (this.events.velocityChange) {
22700                    this.events.velocityChange.notify(this.getVelocity());
22701                }
22702            }
22703        };
22704        this.hasAnimated = false;
22705        this.prev = this.current = init;
22706        this.canTrackVelocity = isFloat(this.current);
22707        this.owner = options.owner;
22708    }
22709    /**
22710     * Adds a function that will be notified when the `MotionValue` is updated.
22711     *
22712     * It returns a function that, when called, will cancel the subscription.
22713     *
22714     * When calling `onChange` inside a React component, it should be wrapped with the
22715     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
22716     * from the `useEffect` function to ensure you don't add duplicate subscribers..
22717     *
22718     * ```jsx
22719     * export const MyComponent = () => {
22720     *   const x = useMotionValue(0)
22721     *   const y = useMotionValue(0)
22722     *   const opacity = useMotionValue(1)
22723     *
22724     *   useEffect(() => {
22725     *     function updateOpacity() {
22726     *       const maxXY = Math.max(x.get(), y.get())
22727     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
22728     *       opacity.set(newOpacity)
22729     *     }
22730     *
22731     *     const unsubscribeX = x.on("change", updateOpacity)
22732     *     const unsubscribeY = y.on("change", updateOpacity)
22733     *
22734     *     return () => {
22735     *       unsubscribeX()
22736     *       unsubscribeY()
22737     *     }
22738     *   }, [])
22739     *
22740     *   return <motion.div style={{ x }} />
22741     * }
22742     * ```
22743     *
22744     * @param subscriber - A function that receives the latest value.
22745     * @returns A function that, when called, will cancel this subscription.
22746     *
22747     * @deprecated
22748     */
22749    onChange(subscription) {
22750        if (false) {}
22751        return this.on("change", subscription);
22752    }
22753    on(eventName, callback) {
22754        if (!this.events[eventName]) {
22755            this.events[eventName] = new SubscriptionManager();
22756        }
22757        const unsubscribe = this.events[eventName].add(callback);
22758        if (eventName === "change") {
22759            return () => {
22760                unsubscribe();
22761                /**
22762                 * If we have no more change listeners by the start
22763                 * of the next frame, stop active animations.
22764                 */
22765                frame_frame.read(() => {
22766                    if (!this.events.change.getSize()) {
22767                        this.stop();
22768                    }
22769                });
22770            };
22771        }
22772        return unsubscribe;
22773    }
22774    clearListeners() {
22775        for (const eventManagers in this.events) {
22776            this.events[eventManagers].clear();
22777        }
22778    }
22779    /**
22780     * Attaches a passive effect to the `MotionValue`.
22781     *
22782     * @internal
22783     */
22784    attach(passiveEffect, stopPassiveEffect) {
22785        this.passiveEffect = passiveEffect;
22786        this.stopPassiveEffect = stopPassiveEffect;
22787    }
22788    /**
22789     * Sets the state of the `MotionValue`.
22790     *
22791     * @remarks
22792     *
22793     * ```jsx
22794     * const x = useMotionValue(0)
22795     * x.set(10)
22796     * ```
22797     *
22798     * @param latest - Latest value to set.
22799     * @param render - Whether to notify render subscribers. Defaults to `true`
22800     *
22801     * @public
22802     */
22803    set(v, render = true) {
22804        if (!render || !this.passiveEffect) {
22805            this.updateAndNotify(v, render);
22806        }
22807        else {
22808            this.passiveEffect(v, this.updateAndNotify);
22809        }
22810    }
22811    setWithVelocity(prev, current, delta) {
22812        this.set(current);
22813        this.prev = prev;
22814        this.timeDelta = delta;
22815    }
22816    /**
22817     * Set the state of the `MotionValue`, stopping any active animations,
22818     * effects, and resets velocity to `0`.
22819     */
22820    jump(v) {
22821        this.updateAndNotify(v);
22822        this.prev = v;
22823        this.stop();
22824        if (this.stopPassiveEffect)
22825            this.stopPassiveEffect();
22826    }
22827    /**
22828     * Returns the latest state of `MotionValue`
22829     *
22830     * @returns - The latest state of `MotionValue`
22831     *
22832     * @public
22833     */
22834    get() {
22835        return this.current;
22836    }
22837    /**
22838     * @public
22839     */
22840    getPrevious() {
22841        return this.prev;
22842    }
22843    /**
22844     * Returns the latest velocity of `MotionValue`
22845     *
22846     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
22847     *
22848     * @public
22849     */
22850    getVelocity() {
22851        // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
22852        return this.canTrackVelocity
22853            ? // These casts could be avoided if parseFloat would be typed better
22854                velocityPerSecond(parseFloat(this.current) -
22855                    parseFloat(this.prev), this.timeDelta)
22856            : 0;
22857    }
22858    /**
22859     * Registers a new animation to control this `MotionValue`. Only one
22860     * animation can drive a `MotionValue` at one time.
22861     *
22862     * ```jsx
22863     * value.start()
22864     * ```
22865     *
22866     * @param animation - A function that starts the provided animation
22867     *
22868     * @internal
22869     */
22870    start(startAnimation) {
22871        this.stop();
22872        return new Promise((resolve) => {
22873            this.hasAnimated = true;
22874            this.animation = startAnimation(resolve);
22875            if (this.events.animationStart) {
22876                this.events.animationStart.notify();
22877            }
22878        }).then(() => {
22879            if (this.events.animationComplete) {
22880                this.events.animationComplete.notify();
22881            }
22882            this.clearAnimation();
22883        });
22884    }
22885    /**
22886     * Stop the currently active animation.
22887     *
22888     * @public
22889     */
22890    stop() {
22891        if (this.animation) {
22892            this.animation.stop();
22893            if (this.events.animationCancel) {
22894                this.events.animationCancel.notify();
22895            }
22896        }
22897        this.clearAnimation();
22898    }
22899    /**
22900     * Returns `true` if this value is currently animating.
22901     *
22902     * @public
22903     */
22904    isAnimating() {
22905        return !!this.animation;
22906    }
22907    clearAnimation() {
22908        delete this.animation;
22909    }
22910    /**
22911     * Destroy and clean up subscribers to this `MotionValue`.
22912     *
22913     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
22914     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
22915     * created a `MotionValue` via the `motionValue` function.
22916     *
22917     * @public
22918     */
22919    destroy() {
22920        this.clearListeners();
22921        this.stop();
22922        if (this.stopPassiveEffect) {
22923            this.stopPassiveEffect();
22924        }
22925    }
22926}
22927function motionValue(init, options) {
22928    return new MotionValue(init, options);
22929}
22930
22931
22932
22933;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs
22934/**
22935 * Tests a provided value against a ValueType
22936 */
22937const testValueType = (v) => (type) => type.test(v);
22938
22939
22940
22941;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs
22942/**
22943 * ValueType for "auto"
22944 */
22945const auto = {
22946    test: (v) => v === "auto",
22947    parse: (v) => v,
22948};
22949
22950
22951
22952;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs
22953
22954
22955
22956
22957
22958/**
22959 * A list of value types commonly used for dimensions
22960 */
22961const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
22962/**
22963 * Tests a dimensional value against the list of dimension ValueTypes
22964 */
22965const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
22966
22967
22968
22969;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs
22970
22971
22972
22973
22974
22975/**
22976 * A list of all ValueTypes
22977 */
22978const valueTypes = [...dimensionValueTypes, color, complex];
22979/**
22980 * Tests a value against the list of ValueTypes
22981 */
22982const findValueType = (v) => valueTypes.find(testValueType(v));
22983
22984
22985
22986;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/setters.mjs
22987
22988
22989
22990
22991
22992
22993
22994
22995
22996/**
22997 * Set VisualElement's MotionValue, creating a new MotionValue for it if
22998 * it doesn't exist.
22999 */
23000function setMotionValue(visualElement, key, value) {
23001    if (visualElement.hasValue(key)) {
23002        visualElement.getValue(key).set(value);
23003    }
23004    else {
23005        visualElement.addValue(key, motionValue(value));
23006    }
23007}
23008function setTarget(visualElement, definition) {
23009    const resolved = resolveVariant(visualElement, definition);
23010    let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
23011    target = { ...target, ...transitionEnd };
23012    for (const key in target) {
23013        const value = resolveFinalValueInKeyframes(target[key]);
23014        setMotionValue(visualElement, key, value);
23015    }
23016}
23017function setVariants(visualElement, variantLabels) {
23018    const reversedLabels = [...variantLabels].reverse();
vendor: 2,620 bytes, lines 23019-23080
23019    reversedLabels.forEach((key) => {
23020        const variant = visualElement.getVariant(key);
23021        variant && setTarget(visualElement, variant);
23022        if (visualElement.variantChildren) {
23023            visualElement.variantChildren.forEach((child) => {
23024                setVariants(child, variantLabels);
23025            });
23026        }
23027    });
23028}
23029function setValues(visualElement, definition) {
23030    if (Array.isArray(definition)) {
23031        return setVariants(visualElement, definition);
23032    }
23033    else if (typeof definition === "string") {
23034        return setVariants(visualElement, [definition]);
23035    }
23036    else {
23037        setTarget(visualElement, definition);
23038    }
23039}
23040function checkTargetForNewValues(visualElement, target, origin) {
23041    var _a, _b;
23042    const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
23043    const numNewValues = newValueKeys.length;
23044    if (!numNewValues)
23045        return;
23046    for (let i = 0; i < numNewValues; i++) {
23047        const key = newValueKeys[i];
23048        const targetValue = target[key];
23049        let value = null;
23050        /**
23051         * If the target is a series of keyframes, we can use the first value
23052         * in the array. If this first value is null, we'll still need to read from the DOM.
23053         */
23054        if (Array.isArray(targetValue)) {
23055            value = targetValue[0];
23056        }
23057        /**
23058         * If the target isn't keyframes, or the first keyframe was null, we need to
23059         * first check if an origin value was explicitly defined in the transition as "from",
23060         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
23061         */
23062        if (value === null) {
23063            value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
23064        }
23065        /**
23066         * If value is still undefined or null, ignore it. Preferably this would throw,
23067         * but this was causing issues in Framer.
23068         */
23069        if (value === undefined || value === null)
23070            continue;
23071        if (typeof value === "string" &&
23072            (isNumericalString(value) || isZeroValueString(value))) {
23073            // If this is a number read as a string, ie "0" or "200", convert it to a number
23074            value = parseFloat(value);
23075        }
23076        else if (!findValueType(value) && complex.test(targetValue)) {
23077            value = animatable_none_getAnimatableNone(key, targetValue);
23078        }
23079        visualElement.addValue(key, motionValue(value, { owner: visualElement }));
23080        if (origin[key] === undefined) {
23081            origin[key] = value;
23082        }
23083        if (value !== null)
23084            visualElement.setBaseTarget(key, value);
23085    }
23086}
23087function getOriginFromTransition(key, transition) {
23088    if (!transition)
23089        return;
23090    const valueTransition = transition[key] || transition["default"] || transition;
23091    return valueTransition.from;
23092}
23093function getOrigin(target, transition, visualElement) {
23094    const origin = {};
23095    for (const key in target) {
23096        const transitionOrigin = getOriginFromTransition(key, transition);
23097        if (transitionOrigin !== undefined) {
23098            origin[key] = transitionOrigin;
23099        }
23100        else {
23101            const value = visualElement.getValue(key);
23102            if (value) {
23103                origin[key] = value.get();
23104            }
23105        }
23106    }
23107    return origin;
23108}
23109
23110
23111
23112;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs
23113
23114
23115
23116
23117
23118
23119
23120/**
23121 * Decide whether we should block this animation. Previously, we achieved this
23122 * just by checking whether the key was listed in protectedKeys, but this
23123 * posed problems if an animation was triggered by afterChildren and protectedKeys
23124 * had been set to true in the meantime.
23125 */
23126function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
23127    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
23128    needsAnimating[key] = false;
23129    return shouldBlock;
23130}
23131function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
23132    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
23133    const willChange = visualElement.getValue("willChange");
23134    if (transitionOverride)
23135        transition = transitionOverride;
23136    const animations = [];
23137    const animationTypeState = type &&
23138        visualElement.animationState &&
23139        visualElement.animationState.getState()[type];
23140    for (const key in target) {
23141        const value = visualElement.getValue(key);
23142        const valueTarget = target[key];
23143        if (!value ||
23144            valueTarget === undefined ||
23145            (animationTypeState &&
23146                shouldBlockAnimation(animationTypeState, key))) {
23147            continue;
23148        }
23149        const valueTransition = { delay, elapsed: 0, ...transition };
23150        /**
23151         * If this is the first time a value is being animated, check
23152         * to see if we're handling off from an existing animation.
23153         */
23154        if (window.HandoffAppearAnimations && !value.hasAnimated) {
23155            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
23156            if (appearId) {
23157                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame);
23158            }
23159        }
23160        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
23161            ? { type: false }
23162            : valueTransition));
23163        const animation = value.animation;
23164        if (isWillChangeMotionValue(willChange)) {
23165            willChange.add(key);
23166            animation.then(() => willChange.remove(key));
23167        }
23168        animations.push(animation);
23169    }
23170    if (transitionEnd) {
23171        Promise.all(animations).then(() => {
23172            transitionEnd && setTarget(visualElement, transitionEnd);
23173        });
23174    }
23175    return animations;
23176}
23177
23178
23179
23180;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs
23181
23182
23183
23184function animateVariant(visualElement, variant, options = {}) {
23185    const resolved = resolveVariant(visualElement, variant, options.custom);
23186    let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
23187    if (options.transitionOverride) {
23188        transition = options.transitionOverride;
23189    }
23190    /**
23191     * If we have a variant, create a callback that runs it as an animation.
23192     * Otherwise, we resolve a Promise immediately for a composable no-op.
23193     */
23194    const getAnimation = resolved
23195        ? () => Promise.all(animateTarget(visualElement, resolved, options))
23196        : () => Promise.resolve();
23197    /**
23198     * If we have children, create a callback that runs all their animations.
23199     * Otherwise, we resolve a Promise immediately for a composable no-op.
23200     */
23201    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
23202        ? (forwardDelay = 0) => {
23203            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
23204            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
23205        }
23206        : () => Promise.resolve();
23207    /**
23208     * If the transition explicitly defines a "when" option, we need to resolve either
23209     * this animation or all children animations before playing the other.
23210     */
23211    const { when } = transition;
23212    if (when) {
23213        const [first, last] = when === "beforeChildren"
23214            ? [getAnimation, getChildAnimations]
23215            : [getChildAnimations, getAnimation];
23216        return first().then(() => last());
23217    }
23218    else {
23219        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
23220    }
23221}
23222function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
23223    const animations = [];
23224    const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
23225    const generateStaggerDuration = staggerDirection === 1
23226        ? (i = 0) => i * staggerChildren
23227        : (i = 0) => maxStaggerDuration - i * staggerChildren;
23228    Array.from(visualElement.variantChildren)
23229        .sort(sortByTreeOrder)
23230        .forEach((child, i) => {
23231        child.notify("AnimationStart", variant);
23232        animations.push(animateVariant(child, variant, {
23233            ...options,
23234            delay: delayChildren + generateStaggerDuration(i),
23235        }).then(() => child.notify("AnimationComplete", variant)));
23236    });
23237    return Promise.all(animations);
23238}
23239function sortByTreeOrder(a, b) {
23240    return a.sortNodePosition(b);
23241}
23242
23243
23244
23245;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs
23246
23247
23248
23249
23250function animateVisualElement(visualElement, definition, options = {}) {
23251    visualElement.notify("AnimationStart", definition);
23252    let animation;
23253    if (Array.isArray(definition)) {
23254        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
23255        animation = Promise.all(animations);
23256    }
23257    else if (typeof definition === "string") {
23258        animation = animateVariant(visualElement, definition, options);
23259    }
23260    else {
23261        const resolvedDefinition = typeof definition === "function"
23262            ? resolveVariant(visualElement, definition, options.custom)
23263            : definition;
23264        animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
23265    }
23266    return animation.then(() => visualElement.notify("AnimationComplete", definition));
23267}
23268
23269
23270
23271;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/animation-state.mjs
23272
23273
23274
23275
23276
23277
23278
23279
23280const reversePriorityOrder = [...variantPriorityOrder].reverse();
23281const numAnimationTypes = variantPriorityOrder.length;
23282function animateList(visualElement) {
23283    return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
23284}
23285function createAnimationState(visualElement) {
23286    let animate = animateList(visualElement);
23287    const state = createState();
23288    let isInitialRender = true;
23289    /**
23290     * This function will be used to reduce the animation definitions for
23291     * each active animation type into an object of resolved values for it.
23292     */
vendor: 7,898 bytes, lines 23293-23451
23293    const buildResolvedTypeValues = (acc, definition) => {
23294        const resolved = resolveVariant(visualElement, definition);
23295        if (resolved) {
23296            const { transition, transitionEnd, ...target } = resolved;
23297            acc = { ...acc, ...target, ...transitionEnd };
23298        }
23299        return acc;
23300    };
23301    /**
23302     * This just allows us to inject mocked animation functions
23303     * @internal
23304     */
23305    function setAnimateFunction(makeAnimator) {
23306        animate = makeAnimator(visualElement);
23307    }
23308    /**
23309     * When we receive new props, we need to:
23310     * 1. Create a list of protected keys for each type. This is a directory of
23311     *    value keys that are currently being "handled" by types of a higher priority
23312     *    so that whenever an animation is played of a given type, these values are
23313     *    protected from being animated.
23314     * 2. Determine if an animation type needs animating.
23315     * 3. Determine if any values have been removed from a type and figure out
23316     *    what to animate those to.
23317     */
23318    function animateChanges(options, changedActiveType) {
23319        const props = visualElement.getProps();
23320        const context = visualElement.getVariantContext(true) || {};
23321        /**
23322         * A list of animations that we'll build into as we iterate through the animation
23323         * types. This will get executed at the end of the function.
23324         */
23325        const animations = [];
23326        /**
23327         * Keep track of which values have been removed. Then, as we hit lower priority
23328         * animation types, we can check if they contain removed values and animate to that.
23329         */
23330        const removedKeys = new Set();
23331        /**
23332         * A dictionary of all encountered keys. This is an object to let us build into and
23333         * copy it without iteration. Each time we hit an animation type we set its protected
23334         * keys - the keys its not allowed to animate - to the latest version of this object.
23335         */
23336        let encounteredKeys = {};
23337        /**
23338         * If a variant has been removed at a given index, and this component is controlling
23339         * variant animations, we want to ensure lower-priority variants are forced to animate.
23340         */
23341        let removedVariantIndex = Infinity;
23342        /**
23343         * Iterate through all animation types in reverse priority order. For each, we want to
23344         * detect which values it's handling and whether or not they've changed (and therefore
23345         * need to be animated). If any values have been removed, we want to detect those in
23346         * lower priority props and flag for animation.
23347         */
23348        for (let i = 0; i < numAnimationTypes; i++) {
23349            const type = reversePriorityOrder[i];
23350            const typeState = state[type];
23351            const prop = props[type] !== undefined ? props[type] : context[type];
23352            const propIsVariant = isVariantLabel(prop);
23353            /**
23354             * If this type has *just* changed isActive status, set activeDelta
23355             * to that status. Otherwise set to null.
23356             */
23357            const activeDelta = type === changedActiveType ? typeState.isActive : null;
23358            if (activeDelta === false)
23359                removedVariantIndex = i;
23360            /**
23361             * If this prop is an inherited variant, rather than been set directly on the
23362             * component itself, we want to make sure we allow the parent to trigger animations.
23363             *
23364             * TODO: Can probably change this to a !isControllingVariants check
23365             */
23366            let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
23367            /**
23368             *
23369             */
23370            if (isInherited &&
23371                isInitialRender &&
23372                visualElement.manuallyAnimateOnMount) {
23373                isInherited = false;
23374            }
23375            /**
23376             * Set all encountered keys so far as the protected keys for this type. This will
23377             * be any key that has been animated or otherwise handled by active, higher-priortiy types.
23378             */
23379            typeState.protectedKeys = { ...encounteredKeys };
23380            // Check if we can skip analysing this prop early
23381            if (
23382            // If it isn't active and hasn't *just* been set as inactive
23383            (!typeState.isActive && activeDelta === null) ||
23384                // If we didn't and don't have any defined prop for this animation type
23385                (!prop && !typeState.prevProp) ||
23386                // Or if the prop doesn't define an animation
23387                isAnimationControls(prop) ||
23388                typeof prop === "boolean") {
23389                continue;
23390            }
23391            /**
23392             * As we go look through the values defined on this type, if we detect
23393             * a changed value or a value that was removed in a higher priority, we set
23394             * this to true and add this prop to the animation list.
23395             */
23396            const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
23397            let shouldAnimateType = variantDidChange ||
23398                // If we're making this variant active, we want to always make it active
23399                (type === changedActiveType &&
23400                    typeState.isActive &&
23401                    !isInherited &&
23402                    propIsVariant) ||
23403                // If we removed a higher-priority variant (i is in reverse order)
23404                (i > removedVariantIndex && propIsVariant);
23405            /**
23406             * As animations can be set as variant lists, variants or target objects, we
23407             * coerce everything to an array if it isn't one already
23408             */
23409            const definitionList = Array.isArray(prop) ? prop : [prop];
23410            /**
23411             * Build an object of all the resolved values. We'll use this in the subsequent
23412             * animateChanges calls to determine whether a value has changed.
23413             */
23414            let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
23415            if (activeDelta === false)
23416                resolvedValues = {};
23417            /**
23418             * Now we need to loop through all the keys in the prev prop and this prop,
23419             * and decide:
23420             * 1. If the value has changed, and needs animating
23421             * 2. If it has been removed, and needs adding to the removedKeys set
23422             * 3. If it has been removed in a higher priority type and needs animating
23423             * 4. If it hasn't been removed in a higher priority but hasn't changed, and
23424             *    needs adding to the type's protectedKeys list.
23425             */
23426            const { prevResolvedValues = {} } = typeState;
23427            const allKeys = {
23428                ...prevResolvedValues,
23429                ...resolvedValues,
23430            };
23431            const markToAnimate = (key) => {
23432                shouldAnimateType = true;
23433                removedKeys.delete(key);
23434                typeState.needsAnimating[key] = true;
23435            };
23436            for (const key in allKeys) {
23437                const next = resolvedValues[key];
23438                const prev = prevResolvedValues[key];
23439                // If we've already handled this we can just skip ahead
23440                if (encounteredKeys.hasOwnProperty(key))
23441                    continue;
23442                /**
23443                 * If the value has changed, we probably want to animate it.
23444                 */
23445                if (next !== prev) {
23446                    /**
23447                     * If both values are keyframes, we need to shallow compare them to
23448                     * detect whether any value has changed. If it has, we animate it.
23449                     */
23450                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
23451                        if (!shallowCompare(next, prev) || variantDidChange) {
23452                            markToAnimate(key);
23453                        }
23454                        else {
23455                            /**
23456                             * If it hasn't changed, we want to ensure it doesn't animate by
23457                             * adding it to the list of protected keys.
23458                             */
23459                            typeState.protectedKeys[key] = true;
23460                        }
23461                    }
23462                    else if (next !== undefined) {
23463                        // If next is defined and doesn't equal prev, it needs animating
23464                        markToAnimate(key);
23465                    }
23466                    else {
23467                        // If it's undefined, it's been removed.
23468                        removedKeys.add(key);
23469                    }
23470                }
23471                else if (next !== undefined && removedKeys.has(key)) {
23472                    /**
23473                     * If next hasn't changed and it isn't undefined, we want to check if it's
23474                     * been removed by a higher priority
23475                     */
23476                    markToAnimate(key);
23477                }
23478                else {
23479                    /**
23480                     * If it hasn't changed, we add it to the list of protected values
23481                     * to ensure it doesn't get animated.
23482                     */
23483                    typeState.protectedKeys[key] = true;
23484                }
23485            }
23486            /**
23487             * Update the typeState so next time animateChanges is called we can compare the
23488             * latest prop and resolvedValues to these.
23489             */
23490            typeState.prevProp = prop;
23491            typeState.prevResolvedValues = resolvedValues;
23492            /**
23493             *
23494             */
23495            if (typeState.isActive) {
23496                encounteredKeys = { ...encounteredKeys, ...resolvedValues };
23497            }
23498            if (isInitialRender && visualElement.blockInitialAnimation) {
23499                shouldAnimateType = false;
vendor: 1,412 bytes, lines 23500-23534
23500            }
23501            /**
23502             * If this is an inherited prop we want to hard-block animations
23503             * TODO: Test as this should probably still handle animations triggered
23504             * by removed values?
23505             */
23506            if (shouldAnimateType && !isInherited) {
23507                animations.push(...definitionList.map((animation) => ({
23508                    animation: animation,
23509                    options: { type, ...options },
23510                })));
23511            }
23512        }
23513        /**
23514         * If there are some removed value that haven't been dealt with,
23515         * we need to create a new animation that falls back either to the value
23516         * defined in the style prop, or the last read value.
23517         */
23518        if (removedKeys.size) {
23519            const fallbackAnimation = {};
23520            removedKeys.forEach((key) => {
23521                const fallbackTarget = visualElement.getBaseTarget(key);
23522                if (fallbackTarget !== undefined) {
23523                    fallbackAnimation[key] = fallbackTarget;
23524                }
23525            });
23526            animations.push({ animation: fallbackAnimation });
23527        }
23528        let shouldAnimate = Boolean(animations.length);
23529        if (isInitialRender &&
23530            props.initial === false &&
23531            !visualElement.manuallyAnimateOnMount) {
23532            shouldAnimate = false;
23533        }
23534        isInitialRender = false;
vendor: 20,719 bytes, lines 23535-24162
23535        return shouldAnimate ? animate(animations) : Promise.resolve();
23536    }
23537    /**
23538     * Change whether a certain animation type is active.
23539     */
23540    function setActive(type, isActive, options) {
23541        var _a;
23542        // If the active state hasn't changed, we can safely do nothing here
23543        if (state[type].isActive === isActive)
23544            return Promise.resolve();
23545        // Propagate active change to children
23546        (_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); });
23547        state[type].isActive = isActive;
23548        const animations = animateChanges(options, type);
23549        for (const key in state) {
23550            state[key].protectedKeys = {};
23551        }
23552        return animations;
23553    }
23554    return {
23555        animateChanges,
23556        setActive,
23557        setAnimateFunction,
23558        getState: () => state,
23559    };
23560}
23561function checkVariantsDidChange(prev, next) {
23562    if (typeof next === "string") {
23563        return next !== prev;
23564    }
23565    else if (Array.isArray(next)) {
23566        return !shallowCompare(next, prev);
23567    }
23568    return false;
23569}
23570function createTypeState(isActive = false) {
23571    return {
23572        isActive,
23573        protectedKeys: {},
23574        needsAnimating: {},
23575        prevResolvedValues: {},
23576    };
23577}
23578function createState() {
23579    return {
23580        animate: createTypeState(true),
23581        whileInView: createTypeState(),
23582        whileHover: createTypeState(),
23583        whileTap: createTypeState(),
23584        whileDrag: createTypeState(),
23585        whileFocus: createTypeState(),
23586        exit: createTypeState(),
23587    };
23588}
23589
23590
23591
23592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animation/index.mjs
23593
23594
23595
23596
23597class AnimationFeature extends Feature {
23598    /**
23599     * We dynamically generate the AnimationState manager as it contains a reference
23600     * to the underlying animation library. We only want to load that if we load this,
23601     * so people can optionally code split it out using the `m` component.
23602     */
23603    constructor(node) {
23604        super(node);
23605        node.animationState || (node.animationState = createAnimationState(node));
23606    }
23607    updateAnimationControlsSubscription() {
23608        const { animate } = this.node.getProps();
23609        this.unmount();
23610        if (isAnimationControls(animate)) {
23611            this.unmount = animate.subscribe(this.node);
23612        }
23613    }
23614    /**
23615     * Subscribe any provided AnimationControls to the component's VisualElement
23616     */
23617    mount() {
23618        this.updateAnimationControlsSubscription();
23619    }
23620    update() {
23621        const { animate } = this.node.getProps();
23622        const { animate: prevAnimate } = this.node.prevProps || {};
23623        if (animate !== prevAnimate) {
23624            this.updateAnimationControlsSubscription();
23625        }
23626    }
23627    unmount() { }
23628}
23629
23630
23631
23632;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs
23633
23634
23635let id = 0;
23636class ExitAnimationFeature extends Feature {
23637    constructor() {
23638        super(...arguments);
23639        this.id = id++;
23640    }
23641    update() {
23642        if (!this.node.presenceContext)
23643            return;
23644        const { isPresent, onExitComplete, custom } = this.node.presenceContext;
23645        const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
23646        if (!this.node.animationState || isPresent === prevIsPresent) {
23647            return;
23648        }
23649        const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
23650        if (onExitComplete && !isPresent) {
23651            exitAnimation.then(() => onExitComplete(this.id));
23652        }
23653    }
23654    mount() {
23655        const { register } = this.node.presenceContext || {};
23656        if (register) {
23657            this.unmount = register(this.id);
23658        }
23659    }
23660    unmount() { }
23661}
23662
23663
23664
23665;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animations.mjs
23666
23667
23668
23669const animations = {
23670    animation: {
23671        Feature: AnimationFeature,
23672    },
23673    exit: {
23674        Feature: ExitAnimationFeature,
23675    },
23676};
23677
23678
23679
23680;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/distance.mjs
23681const distance = (a, b) => Math.abs(a - b);
23682function distance2D(a, b) {
23683    // Multi-dimensional
23684    const xDelta = distance(a.x, b.x);
23685    const yDelta = distance(a.y, b.y);
23686    return Math.sqrt(xDelta ** 2 + yDelta ** 2);
23687}
23688
23689
23690
23691;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
23692
23693
23694
23695
23696
23697
23698
23699
23700/**
23701 * @internal
23702 */
23703class PanSession {
23704    constructor(event, handlers, { transformPagePoint } = {}) {
23705        /**
23706         * @internal
23707         */
23708        this.startEvent = null;
23709        /**
23710         * @internal
23711         */
23712        this.lastMoveEvent = null;
23713        /**
23714         * @internal
23715         */
23716        this.lastMoveEventInfo = null;
23717        /**
23718         * @internal
23719         */
23720        this.handlers = {};
23721        this.updatePoint = () => {
23722            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
23723                return;
23724            const info = getPanInfo(this.lastMoveEventInfo, this.history);
23725            const isPanStarted = this.startEvent !== null;
23726            // Only start panning if the offset is larger than 3 pixels. If we make it
23727            // any larger than this we'll want to reset the pointer history
23728            // on the first update to avoid visual snapping to the cursoe.
23729            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
23730            if (!isPanStarted && !isDistancePastThreshold)
23731                return;
23732            const { point } = info;
23733            const { timestamp } = frameData;
23734            this.history.push({ ...point, timestamp });
23735            const { onStart, onMove } = this.handlers;
23736            if (!isPanStarted) {
23737                onStart && onStart(this.lastMoveEvent, info);
23738                this.startEvent = this.lastMoveEvent;
23739            }
23740            onMove && onMove(this.lastMoveEvent, info);
23741        };
23742        this.handlePointerMove = (event, info) => {
23743            this.lastMoveEvent = event;
23744            this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
23745            // Throttle mouse move event to once per frame
23746            frame_frame.update(this.updatePoint, true);
23747        };
23748        this.handlePointerUp = (event, info) => {
23749            this.end();
23750            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
23751                return;
23752            const { onEnd, onSessionEnd } = this.handlers;
23753            const panInfo = getPanInfo(event.type === "pointercancel"
23754                ? this.lastMoveEventInfo
23755                : transformPoint(info, this.transformPagePoint), this.history);
23756            if (this.startEvent && onEnd) {
23757                onEnd(event, panInfo);
23758            }
23759            onSessionEnd && onSessionEnd(event, panInfo);
23760        };
23761        // If we have more than one touch, don't start detecting this gesture
23762        if (!isPrimaryPointer(event))
23763            return;
23764        this.handlers = handlers;
23765        this.transformPagePoint = transformPagePoint;
23766        const info = extractEventInfo(event);
23767        const initialInfo = transformPoint(info, this.transformPagePoint);
23768        const { point } = initialInfo;
23769        const { timestamp } = frameData;
23770        this.history = [{ ...point, timestamp }];
23771        const { onSessionStart } = handlers;
23772        onSessionStart &&
23773            onSessionStart(event, getPanInfo(initialInfo, this.history));
23774        this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
23775    }
23776    updateHandlers(handlers) {
23777        this.handlers = handlers;
23778    }
23779    end() {
23780        this.removeListeners && this.removeListeners();
23781        cancelFrame(this.updatePoint);
23782    }
23783}
23784function transformPoint(info, transformPagePoint) {
23785    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
23786}
23787function subtractPoint(a, b) {
23788    return { x: a.x - b.x, y: a.y - b.y };
23789}
23790function getPanInfo({ point }, history) {
23791    return {
23792        point,
23793        delta: subtractPoint(point, lastDevicePoint(history)),
23794        offset: subtractPoint(point, startDevicePoint(history)),
23795        velocity: PanSession_getVelocity(history, 0.1),
23796    };
23797}
23798function startDevicePoint(history) {
23799    return history[0];
23800}
23801function lastDevicePoint(history) {
23802    return history[history.length - 1];
23803}
23804function PanSession_getVelocity(history, timeDelta) {
23805    if (history.length < 2) {
23806        return { x: 0, y: 0 };
23807    }
23808    let i = history.length - 1;
23809    let timestampedPoint = null;
23810    const lastPoint = lastDevicePoint(history);
23811    while (i >= 0) {
23812        timestampedPoint = history[i];
23813        if (lastPoint.timestamp - timestampedPoint.timestamp >
23814            secondsToMilliseconds(timeDelta)) {
23815            break;
23816        }
23817        i--;
23818    }
23819    if (!timestampedPoint) {
23820        return { x: 0, y: 0 };
23821    }
23822    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
23823    if (time === 0) {
23824        return { x: 0, y: 0 };
23825    }
23826    const currentVelocity = {
23827        x: (lastPoint.x - timestampedPoint.x) / time,
23828        y: (lastPoint.y - timestampedPoint.y) / time,
23829    };
23830    if (currentVelocity.x === Infinity) {
23831        currentVelocity.x = 0;
23832    }
23833    if (currentVelocity.y === Infinity) {
23834        currentVelocity.y = 0;
23835    }
23836    return currentVelocity;
23837}
23838
23839
23840
23841;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs
23842
23843
23844function calcLength(axis) {
23845    return axis.max - axis.min;
23846}
23847function isNear(value, target = 0, maxDistance = 0.01) {
23848    return Math.abs(value - target) <= maxDistance;
23849}
23850function calcAxisDelta(delta, source, target, origin = 0.5) {
23851    delta.origin = origin;
23852    delta.originPoint = mix(source.min, source.max, delta.origin);
23853    delta.scale = calcLength(target) / calcLength(source);
23854    if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))
23855        delta.scale = 1;
23856    delta.translate =
23857        mix(target.min, target.max, delta.origin) - delta.originPoint;
23858    if (isNear(delta.translate) || isNaN(delta.translate))
23859        delta.translate = 0;
23860}
23861function calcBoxDelta(delta, source, target, origin) {
23862    calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
23863    calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
23864}
23865function calcRelativeAxis(target, relative, parent) {
23866    target.min = parent.min + relative.min;
23867    target.max = target.min + calcLength(relative);
23868}
23869function calcRelativeBox(target, relative, parent) {
23870    calcRelativeAxis(target.x, relative.x, parent.x);
23871    calcRelativeAxis(target.y, relative.y, parent.y);
23872}
23873function calcRelativeAxisPosition(target, layout, parent) {
23874    target.min = layout.min - parent.min;
23875    target.max = target.min + calcLength(layout);
23876}
23877function calcRelativePosition(target, layout, parent) {
23878    calcRelativeAxisPosition(target.x, layout.x, parent.x);
23879    calcRelativeAxisPosition(target.y, layout.y, parent.y);
23880}
23881
23882
23883
23884;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs
23885
23886
23887
23888
23889
23890/**
23891 * Apply constraints to a point. These constraints are both physical along an
23892 * axis, and an elastic factor that determines how much to constrain the point
23893 * by if it does lie outside the defined parameters.
23894 */
23895function applyConstraints(point, { min, max }, elastic) {
23896    if (min !== undefined && point < min) {
23897        // If we have a min point defined, and this is outside of that, constrain
23898        point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
23899    }
23900    else if (max !== undefined && point > max) {
23901        // If we have a max point defined, and this is outside of that, constrain
23902        point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
23903    }
23904    return point;
23905}
23906/**
23907 * Calculate constraints in terms of the viewport when defined relatively to the
23908 * measured axis. This is measured from the nearest edge, so a max constraint of 200
23909 * on an axis with a max value of 300 would return a constraint of 500 - axis length
23910 */
23911function calcRelativeAxisConstraints(axis, min, max) {
23912    return {
23913        min: min !== undefined ? axis.min + min : undefined,
23914        max: max !== undefined
23915            ? axis.max + max - (axis.max - axis.min)
23916            : undefined,
23917    };
23918}
23919/**
23920 * Calculate constraints in terms of the viewport when
23921 * defined relatively to the measured bounding box.
23922 */
23923function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
23924    return {
23925        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
23926        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
23927    };
23928}
23929/**
23930 * Calculate viewport constraints when defined as another viewport-relative axis
23931 */
23932function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
23933    let min = constraintsAxis.min - layoutAxis.min;
23934    let max = constraintsAxis.max - layoutAxis.max;
23935    // If the constraints axis is actually smaller than the layout axis then we can
23936    // flip the constraints
23937    if (constraintsAxis.max - constraintsAxis.min <
23938        layoutAxis.max - layoutAxis.min) {
23939        [min, max] = [max, min];
23940    }
23941    return { min, max };
23942}
23943/**
23944 * Calculate viewport constraints when defined as another viewport-relative box
23945 */
23946function calcViewportConstraints(layoutBox, constraintsBox) {
23947    return {
23948        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
23949        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
23950    };
23951}
23952/**
23953 * Calculate a transform origin relative to the source axis, between 0-1, that results
23954 * in an asthetically pleasing scale/transform needed to project from source to target.
23955 */
23956function constraints_calcOrigin(source, target) {
23957    let origin = 0.5;
23958    const sourceLength = calcLength(source);
23959    const targetLength = calcLength(target);
23960    if (targetLength > sourceLength) {
23961        origin = progress(target.min, target.max - sourceLength, source.min);
23962    }
23963    else if (sourceLength > targetLength) {
23964        origin = progress(source.min, source.max - targetLength, target.min);
23965    }
23966    return clamp_clamp(0, 1, origin);
23967}
23968/**
23969 * Rebase the calculated viewport constraints relative to the layout.min point.
23970 */
23971function rebaseAxisConstraints(layout, constraints) {
23972    const relativeConstraints = {};
23973    if (constraints.min !== undefined) {
23974        relativeConstraints.min = constraints.min - layout.min;
23975    }
23976    if (constraints.max !== undefined) {
23977        relativeConstraints.max = constraints.max - layout.min;
23978    }
23979    return relativeConstraints;
23980}
23981const defaultElastic = 0.35;
23982/**
23983 * Accepts a dragElastic prop and returns resolved elastic values for each axis.
23984 */
23985function resolveDragElastic(dragElastic = defaultElastic) {
23986    if (dragElastic === false) {
23987        dragElastic = 0;
23988    }
23989    else if (dragElastic === true) {
23990        dragElastic = defaultElastic;
23991    }
23992    return {
23993        x: resolveAxisElastic(dragElastic, "left", "right"),
23994        y: resolveAxisElastic(dragElastic, "top", "bottom"),
23995    };
23996}
23997function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
23998    return {
23999        min: resolvePointElastic(dragElastic, minLabel),
24000        max: resolvePointElastic(dragElastic, maxLabel),
24001    };
24002}
24003function resolvePointElastic(dragElastic, label) {
24004    return typeof dragElastic === "number"
24005        ? dragElastic
24006        : dragElastic[label] || 0;
24007}
24008
24009
24010
24011;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/models.mjs
24012const createAxisDelta = () => ({
24013    translate: 0,
24014    scale: 1,
24015    origin: 0,
24016    originPoint: 0,
24017});
24018const createDelta = () => ({
24019    x: createAxisDelta(),
24020    y: createAxisDelta(),
24021});
24022const createAxis = () => ({ min: 0, max: 0 });
24023const createBox = () => ({
24024    x: createAxis(),
24025    y: createAxis(),
24026});
24027
24028
24029
24030;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs
24031function eachAxis(callback) {
24032    return [callback("x"), callback("y")];
24033}
24034
24035
24036
24037;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs
24038/**
24039 * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
24040 * it's easier to consider each axis individually. This function returns a bounding box
24041 * as a map of single-axis min/max values.
24042 */
24043function convertBoundingBoxToBox({ top, left, right, bottom, }) {
24044    return {
24045        x: { min: left, max: right },
24046        y: { min: top, max: bottom },
24047    };
24048}
24049function convertBoxToBoundingBox({ x, y }) {
24050    return { top: y.min, right: x.max, bottom: y.max, left: x.min };
24051}
24052/**
24053 * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
24054 * provided by Framer to allow measured points to be corrected for device scaling. This is used
24055 * when measuring DOM elements and DOM event points.
24056 */
24057function transformBoxPoints(point, transformPoint) {
24058    if (!transformPoint)
24059        return point;
24060    const topLeft = transformPoint({ x: point.left, y: point.top });
24061    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
24062    return {
24063        top: topLeft.y,
24064        left: topLeft.x,
24065        bottom: bottomRight.y,
24066        right: bottomRight.x,
24067    };
24068}
24069
24070
24071
24072;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs
24073function isIdentityScale(scale) {
24074    return scale === undefined || scale === 1;
24075}
24076function hasScale({ scale, scaleX, scaleY }) {
24077    return (!isIdentityScale(scale) ||
24078        !isIdentityScale(scaleX) ||
24079        !isIdentityScale(scaleY));
24080}
24081function hasTransform(values) {
24082    return (hasScale(values) ||
24083        has2DTranslate(values) ||
24084        values.z ||
24085        values.rotate ||
24086        values.rotateX ||
24087        values.rotateY);
24088}
24089function has2DTranslate(values) {
24090    return is2DTranslate(values.x) || is2DTranslate(values.y);
24091}
24092function is2DTranslate(value) {
24093    return value && value !== "0%";
24094}
24095
24096
24097
24098;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs
24099
24100
24101
24102/**
24103 * Scales a point based on a factor and an originPoint
24104 */
24105function scalePoint(point, scale, originPoint) {
24106    const distanceFromOrigin = point - originPoint;
24107    const scaled = scale * distanceFromOrigin;
24108    return originPoint + scaled;
24109}
24110/**
24111 * Applies a translate/scale delta to a point
24112 */
24113function applyPointDelta(point, translate, scale, originPoint, boxScale) {
24114    if (boxScale !== undefined) {
24115        point = scalePoint(point, boxScale, originPoint);
24116    }
24117    return scalePoint(point, scale, originPoint) + translate;
24118}
24119/**
24120 * Applies a translate/scale delta to an axis
24121 */
24122function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {
24123    axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);
24124    axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);
24125}
24126/**
24127 * Applies a translate/scale delta to a box
24128 */
24129function applyBoxDelta(box, { x, y }) {
24130    applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
24131    applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
24132}
24133/**
24134 * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
24135 * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
24136 *
24137 * This is the final nested loop within updateLayoutDelta for future refactoring
24138 */
24139function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
24140    const treeLength = treePath.length;
24141    if (!treeLength)
24142        return;
24143    // Reset the treeScale
24144    treeScale.x = treeScale.y = 1;
24145    let node;
24146    let delta;
24147    for (let i = 0; i < treeLength; i++) {
24148        node = treePath[i];
24149        delta = node.projectionDelta;
24150        /**
24151         * TODO: Prefer to remove this, but currently we have motion components with
24152         * display: contents in Framer.
24153         */
24154        const instance = node.instance;
24155        if (instance &&
24156            instance.style &&
24157            instance.style.display === "contents") {
24158            continue;
24159        }
24160        if (isSharedTransition &&
24161            node.options.layoutScroll &&
24162            node.scroll &&
vendor: 8,778 bytes, lines 24163-24398
24163            node !== node.root) {
24164            transformBox(box, {
24165                x: -node.scroll.offset.x,
24166                y: -node.scroll.offset.y,
24167            });
24168        }
24169        if (delta) {
24170            // Incoporate each ancestor's scale into a culmulative treeScale for this component
24171            treeScale.x *= delta.x.scale;
24172            treeScale.y *= delta.y.scale;
24173            // Apply each ancestor's calculated delta into this component's recorded layout box
24174            applyBoxDelta(box, delta);
24175        }
24176        if (isSharedTransition && hasTransform(node.latestValues)) {
24177            transformBox(box, node.latestValues);
24178        }
24179    }
24180    /**
24181     * Snap tree scale back to 1 if it's within a non-perceivable threshold.
24182     * This will help reduce useless scales getting rendered.
24183     */
24184    treeScale.x = snapToDefault(treeScale.x);
24185    treeScale.y = snapToDefault(treeScale.y);
24186}
24187function snapToDefault(scale) {
24188    if (Number.isInteger(scale))
24189        return scale;
24190    return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;
24191}
24192function translateAxis(axis, distance) {
24193    axis.min = axis.min + distance;
24194    axis.max = axis.max + distance;
24195}
24196/**
24197 * Apply a transform to an axis from the latest resolved motion values.
24198 * This function basically acts as a bridge between a flat motion value map
24199 * and applyAxisDelta
24200 */
24201function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
24202    const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
24203    const originPoint = mix(axis.min, axis.max, axisOrigin);
24204    // Apply the axis delta to the final axis
24205    applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
24206}
24207/**
24208 * The names of the motion values we want to apply as translation, scale and origin.
24209 */
24210const xKeys = ["x", "scaleX", "originX"];
24211const yKeys = ["y", "scaleY", "originY"];
24212/**
24213 * Apply a transform to a box from the latest resolved motion values.
24214 */
24215function transformBox(box, transform) {
24216    transformAxis(box.x, transform, xKeys);
24217    transformAxis(box.y, transform, yKeys);
24218}
24219
24220
24221
24222;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/measure.mjs
24223
24224
24225
24226function measureViewportBox(instance, transformPoint) {
24227    return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
24228}
24229function measurePageBox(element, rootProjectionNode, transformPagePoint) {
24230    const viewportBox = measureViewportBox(element, transformPagePoint);
24231    const { scroll } = rootProjectionNode;
24232    if (scroll) {
24233        translateAxis(viewportBox.x, scroll.offset.x);
24234        translateAxis(viewportBox.y, scroll.offset.y);
24235    }
24236    return viewportBox;
24237}
24238
24239
24240
24241;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs
24242
24243
24244
24245
24246
24247
24248
24249
24250
24251
24252
24253
24254
24255
24256
24257
24258
24259
24260const elementDragControls = new WeakMap();
24261/**
24262 *
24263 */
24264// let latestPointerEvent: PointerEvent
24265class VisualElementDragControls {
24266    constructor(visualElement) {
24267        // This is a reference to the global drag gesture lock, ensuring only one component
24268        // can "capture" the drag of one or both axes.
24269        // TODO: Look into moving this into pansession?
24270        this.openGlobalLock = null;
24271        this.isDragging = false;
24272        this.currentDirection = null;
24273        this.originPoint = { x: 0, y: 0 };
24274        /**
24275         * The permitted boundaries of travel, in pixels.
24276         */
24277        this.constraints = false;
24278        this.hasMutatedConstraints = false;
24279        /**
24280         * The per-axis resolved elastic values.
24281         */
24282        this.elastic = createBox();
24283        this.visualElement = visualElement;
24284    }
24285    start(originEvent, { snapToCursor = false } = {}) {
24286        /**
24287         * Don't start dragging if this component is exiting
24288         */
24289        const { presenceContext } = this.visualElement;
24290        if (presenceContext && presenceContext.isPresent === false)
24291            return;
24292        const onSessionStart = (event) => {
24293            // Stop any animations on both axis values immediately. This allows the user to throw and catch
24294            // the component.
24295            this.stopAnimation();
24296            if (snapToCursor) {
24297                this.snapToCursor(extractEventInfo(event, "page").point);
24298            }
24299        };
24300        const onStart = (event, info) => {
24301            // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
24302            const { drag, dragPropagation, onDragStart } = this.getProps();
24303            if (drag && !dragPropagation) {
24304                if (this.openGlobalLock)
24305                    this.openGlobalLock();
24306                this.openGlobalLock = getGlobalLock(drag);
24307                // If we don 't have the lock, don't start dragging
24308                if (!this.openGlobalLock)
24309                    return;
24310            }
24311            this.isDragging = true;
24312            this.currentDirection = null;
24313            this.resolveConstraints();
24314            if (this.visualElement.projection) {
24315                this.visualElement.projection.isAnimationBlocked = true;
24316                this.visualElement.projection.target = undefined;
24317            }
24318            /**
24319             * Record gesture origin
24320             */
24321            eachAxis((axis) => {
24322                let current = this.getAxisMotionValue(axis).get() || 0;
24323                /**
24324                 * If the MotionValue is a percentage value convert to px
24325                 */
24326                if (percent.test(current)) {
24327                    const { projection } = this.visualElement;
24328                    if (projection && projection.layout) {
24329                        const measuredAxis = projection.layout.layoutBox[axis];
24330                        if (measuredAxis) {
24331                            const length = calcLength(measuredAxis);
24332                            current = length * (parseFloat(current) / 100);
24333                        }
24334                    }
24335                }
24336                this.originPoint[axis] = current;
24337            });
24338            // Fire onDragStart event
24339            if (onDragStart) {
24340                frame_frame.update(() => onDragStart(event, info), false, true);
24341            }
24342            const { animationState } = this.visualElement;
24343            animationState && animationState.setActive("whileDrag", true);
24344        };
24345        const onMove = (event, info) => {
24346            // latestPointerEvent = event
24347            const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
24348            // If we didn't successfully receive the gesture lock, early return.
24349            if (!dragPropagation && !this.openGlobalLock)
24350                return;
24351            const { offset } = info;
24352            // Attempt to detect drag direction if directionLock is true
24353            if (dragDirectionLock && this.currentDirection === null) {
24354                this.currentDirection = getCurrentDirection(offset);
24355                // If we've successfully set a direction, notify listener
24356                if (this.currentDirection !== null) {
24357                    onDirectionLock && onDirectionLock(this.currentDirection);
24358                }
24359                return;
24360            }
24361            // Update each point with the latest position
24362            this.updateAxis("x", info.point, offset);
24363            this.updateAxis("y", info.point, offset);
24364            /**
24365             * Ideally we would leave the renderer to fire naturally at the end of
24366             * this frame but if the element is about to change layout as the result
24367             * of a re-render we want to ensure the browser can read the latest
24368             * bounding box to ensure the pointer and element don't fall out of sync.
24369             */
24370            this.visualElement.render();
24371            /**
24372             * This must fire after the render call as it might trigger a state
24373             * change which itself might trigger a layout update.
24374             */
24375            onDrag && onDrag(event, info);
24376        };
24377        const onSessionEnd = (event, info) => this.stop(event, info);
24378        this.panSession = new PanSession(originEvent, {
24379            onSessionStart,
24380            onStart,
24381            onMove,
24382            onSessionEnd,
24383        }, { transformPagePoint: this.visualElement.getTransformPagePoint() });
24384    }
24385    stop(event, info) {
24386        const isDragging = this.isDragging;
24387        this.cancel();
24388        if (!isDragging)
24389            return;
24390        const { velocity } = info;
24391        this.startAnimation(velocity);
24392        const { onDragEnd } = this.getProps();
24393        if (onDragEnd) {
24394            frame_frame.update(() => onDragEnd(event, info));
24395        }
24396    }
24397    cancel() {
24398        this.isDragging = false;
vendor: 16,384 bytes, lines 24399-24810
24399        const { projection, animationState } = this.visualElement;
24400        if (projection) {
24401            projection.isAnimationBlocked = false;
24402        }
24403        this.panSession && this.panSession.end();
24404        this.panSession = undefined;
24405        const { dragPropagation } = this.getProps();
24406        if (!dragPropagation && this.openGlobalLock) {
24407            this.openGlobalLock();
24408            this.openGlobalLock = null;
24409        }
24410        animationState && animationState.setActive("whileDrag", false);
24411    }
24412    updateAxis(axis, _point, offset) {
24413        const { drag } = this.getProps();
24414        // If we're not dragging this axis, do an early return.
24415        if (!offset || !shouldDrag(axis, drag, this.currentDirection))
24416            return;
24417        const axisValue = this.getAxisMotionValue(axis);
24418        let next = this.originPoint[axis] + offset[axis];
24419        // Apply constraints
24420        if (this.constraints && this.constraints[axis]) {
24421            next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
24422        }
24423        axisValue.set(next);
24424    }
24425    resolveConstraints() {
24426        const { dragConstraints, dragElastic } = this.getProps();
24427        const { layout } = this.visualElement.projection || {};
24428        const prevConstraints = this.constraints;
24429        if (dragConstraints && is_ref_object_isRefObject(dragConstraints)) {
24430            if (!this.constraints) {
24431                this.constraints = this.resolveRefConstraints();
24432            }
24433        }
24434        else {
24435            if (dragConstraints && layout) {
24436                this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
24437            }
24438            else {
24439                this.constraints = false;
24440            }
24441        }
24442        this.elastic = resolveDragElastic(dragElastic);
24443        /**
24444         * If we're outputting to external MotionValues, we want to rebase the measured constraints
24445         * from viewport-relative to component-relative.
24446         */
24447        if (prevConstraints !== this.constraints &&
24448            layout &&
24449            this.constraints &&
24450            !this.hasMutatedConstraints) {
24451            eachAxis((axis) => {
24452                if (this.getAxisMotionValue(axis)) {
24453                    this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
24454                }
24455            });
24456        }
24457    }
24458    resolveRefConstraints() {
24459        const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
24460        if (!constraints || !is_ref_object_isRefObject(constraints))
24461            return false;
24462        const constraintsElement = constraints.current;
24463        errors_invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
24464        const { projection } = this.visualElement;
24465        // TODO
24466        if (!projection || !projection.layout)
24467            return false;
24468        const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
24469        let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
24470        /**
24471         * If there's an onMeasureDragConstraints listener we call it and
24472         * if different constraints are returned, set constraints to that
24473         */
24474        if (onMeasureDragConstraints) {
24475            const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
24476            this.hasMutatedConstraints = !!userConstraints;
24477            if (userConstraints) {
24478                measuredConstraints = convertBoundingBoxToBox(userConstraints);
24479            }
24480        }
24481        return measuredConstraints;
24482    }
24483    startAnimation(velocity) {
24484        const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
24485        const constraints = this.constraints || {};
24486        const momentumAnimations = eachAxis((axis) => {
24487            if (!shouldDrag(axis, drag, this.currentDirection)) {
24488                return;
24489            }
24490            let transition = (constraints && constraints[axis]) || {};
24491            if (dragSnapToOrigin)
24492                transition = { min: 0, max: 0 };
24493            /**
24494             * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
24495             * of spring animations so we should look into adding a disable spring option to `inertia`.
24496             * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
24497             * using the value of `dragElastic`.
24498             */
24499            const bounceStiffness = dragElastic ? 200 : 1000000;
24500            const bounceDamping = dragElastic ? 40 : 10000000;
24501            const inertia = {
24502                type: "inertia",
24503                velocity: dragMomentum ? velocity[axis] : 0,
24504                bounceStiffness,
24505                bounceDamping,
24506                timeConstant: 750,
24507                restDelta: 1,
24508                restSpeed: 10,
24509                ...dragTransition,
24510                ...transition,
24511            };
24512            // If we're not animating on an externally-provided `MotionValue` we can use the
24513            // component's animation controls which will handle interactions with whileHover (etc),
24514            // otherwise we just have to animate the `MotionValue` itself.
24515            return this.startAxisValueAnimation(axis, inertia);
24516        });
24517        // Run all animations and then resolve the new drag constraints.
24518        return Promise.all(momentumAnimations).then(onDragTransitionEnd);
24519    }
24520    startAxisValueAnimation(axis, transition) {
24521        const axisValue = this.getAxisMotionValue(axis);
24522        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition));
24523    }
24524    stopAnimation() {
24525        eachAxis((axis) => this.getAxisMotionValue(axis).stop());
24526    }
24527    /**
24528     * Drag works differently depending on which props are provided.
24529     *
24530     * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
24531     * - Otherwise, we apply the delta to the x/y motion values.
24532     */
24533    getAxisMotionValue(axis) {
24534        const dragKey = "_drag" + axis.toUpperCase();
24535        const props = this.visualElement.getProps();
24536        const externalMotionValue = props[dragKey];
24537        return externalMotionValue
24538            ? externalMotionValue
24539            : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0);
24540    }
24541    snapToCursor(point) {
24542        eachAxis((axis) => {
24543            const { drag } = this.getProps();
24544            // If we're not dragging this axis, do an early return.
24545            if (!shouldDrag(axis, drag, this.currentDirection))
24546                return;
24547            const { projection } = this.visualElement;
24548            const axisValue = this.getAxisMotionValue(axis);
24549            if (projection && projection.layout) {
24550                const { min, max } = projection.layout.layoutBox[axis];
24551                axisValue.set(point[axis] - mix(min, max, 0.5));
24552            }
24553        });
24554    }
24555    /**
24556     * When the viewport resizes we want to check if the measured constraints
24557     * have changed and, if so, reposition the element within those new constraints
24558     * relative to where it was before the resize.
24559     */
24560    scalePositionWithinConstraints() {
24561        if (!this.visualElement.current)
24562            return;
24563        const { drag, dragConstraints } = this.getProps();
24564        const { projection } = this.visualElement;
24565        if (!is_ref_object_isRefObject(dragConstraints) || !projection || !this.constraints)
24566            return;
24567        /**
24568         * Stop current animations as there can be visual glitching if we try to do
24569         * this mid-animation
24570         */
24571        this.stopAnimation();
24572        /**
24573         * Record the relative position of the dragged element relative to the
24574         * constraints box and save as a progress value.
24575         */
24576        const boxProgress = { x: 0, y: 0 };
24577        eachAxis((axis) => {
24578            const axisValue = this.getAxisMotionValue(axis);
24579            if (axisValue) {
24580                const latest = axisValue.get();
24581                boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
24582            }
24583        });
24584        /**
24585         * Update the layout of this element and resolve the latest drag constraints
24586         */
24587        const { transformTemplate } = this.visualElement.getProps();
24588        this.visualElement.current.style.transform = transformTemplate
24589            ? transformTemplate({}, "")
24590            : "none";
24591        projection.root && projection.root.updateScroll();
24592        projection.updateLayout();
24593        this.resolveConstraints();
24594        /**
24595         * For each axis, calculate the current progress of the layout axis
24596         * within the new constraints.
24597         */
24598        eachAxis((axis) => {
24599            if (!shouldDrag(axis, drag, null))
24600                return;
24601            /**
24602             * Calculate a new transform based on the previous box progress
24603             */
24604            const axisValue = this.getAxisMotionValue(axis);
24605            const { min, max } = this.constraints[axis];
24606            axisValue.set(mix(min, max, boxProgress[axis]));
24607        });
24608    }
24609    addListeners() {
24610        if (!this.visualElement.current)
24611            return;
24612        elementDragControls.set(this.visualElement, this);
24613        const element = this.visualElement.current;
24614        /**
24615         * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
24616         */
24617        const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
24618            const { drag, dragListener = true } = this.getProps();
24619            drag && dragListener && this.start(event);
24620        });
24621        const measureDragConstraints = () => {
24622            const { dragConstraints } = this.getProps();
24623            if (is_ref_object_isRefObject(dragConstraints)) {
24624                this.constraints = this.resolveRefConstraints();
24625            }
24626        };
24627        const { projection } = this.visualElement;
24628        const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
24629        if (projection && !projection.layout) {
24630            projection.root && projection.root.updateScroll();
24631            projection.updateLayout();
24632        }
24633        measureDragConstraints();
24634        /**
24635         * Attach a window resize listener to scale the draggable target within its defined
24636         * constraints as the window resizes.
24637         */
24638        const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
24639        /**
24640         * If the element's layout changes, calculate the delta and apply that to
24641         * the drag gesture's origin point.
24642         */
24643        const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
24644            if (this.isDragging && hasLayoutChanged) {
24645                eachAxis((axis) => {
24646                    const motionValue = this.getAxisMotionValue(axis);
24647                    if (!motionValue)
24648                        return;
24649                    this.originPoint[axis] += delta[axis].translate;
24650                    motionValue.set(motionValue.get() + delta[axis].translate);
24651                });
24652                this.visualElement.render();
24653            }
24654        }));
24655        return () => {
24656            stopResizeListener();
24657            stopPointerListener();
24658            stopMeasureLayoutListener();
24659            stopLayoutUpdateListener && stopLayoutUpdateListener();
24660        };
24661    }
24662    getProps() {
24663        const props = this.visualElement.getProps();
24664        const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
24665        return {
24666            ...props,
24667            drag,
24668            dragDirectionLock,
24669            dragPropagation,
24670            dragConstraints,
24671            dragElastic,
24672            dragMomentum,
24673        };
24674    }
24675}
24676function shouldDrag(direction, drag, currentDirection) {
24677    return ((drag === true || drag === direction) &&
24678        (currentDirection === null || currentDirection === direction));
24679}
24680/**
24681 * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
24682 * than the provided threshold, return `null`.
24683 *
24684 * @param offset - The x/y offset from origin.
24685 * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
24686 */
24687function getCurrentDirection(offset, lockThreshold = 10) {
24688    let direction = null;
24689    if (Math.abs(offset.y) > lockThreshold) {
24690        direction = "y";
24691    }
24692    else if (Math.abs(offset.x) > lockThreshold) {
24693        direction = "x";
24694    }
24695    return direction;
24696}
24697
24698
24699
24700;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/index.mjs
24701
24702
24703
24704
24705class DragGesture extends Feature {
24706    constructor(node) {
24707        super(node);
24708        this.removeGroupControls = noop_noop;
24709        this.removeListeners = noop_noop;
24710        this.controls = new VisualElementDragControls(node);
24711    }
24712    mount() {
24713        // If we've been provided a DragControls for manual control over the drag gesture,
24714        // subscribe this component to it on mount.
24715        const { dragControls } = this.node.getProps();
24716        if (dragControls) {
24717            this.removeGroupControls = dragControls.subscribe(this.controls);
24718        }
24719        this.removeListeners = this.controls.addListeners() || noop_noop;
24720    }
24721    unmount() {
24722        this.removeGroupControls();
24723        this.removeListeners();
24724    }
24725}
24726
24727
24728
24729;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/pan/index.mjs
24730
24731
24732
24733
24734
24735
24736const asyncHandler = (handler) => (event, info) => {
24737    if (handler) {
24738        frame_frame.update(() => handler(event, info));
24739    }
24740};
24741class PanGesture extends Feature {
24742    constructor() {
24743        super(...arguments);
24744        this.removePointerDownListener = noop_noop;
24745    }
24746    onPointerDown(pointerDownEvent) {
24747        this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
24748    }
24749    createPanHandlers() {
24750        const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
24751        return {
24752            onSessionStart: asyncHandler(onPanSessionStart),
24753            onStart: asyncHandler(onPanStart),
24754            onMove: onPan,
24755            onEnd: (event, info) => {
24756                delete this.session;
24757                if (onPanEnd) {
24758                    frame_frame.update(() => onPanEnd(event, info));
24759                }
24760            },
24761        };
24762    }
24763    mount() {
24764        this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
24765    }
24766    update() {
24767        this.session && this.session.updateHandlers(this.createPanHandlers());
24768    }
24769    unmount() {
24770        this.removePointerDownListener();
24771        this.session && this.session.end();
24772    }
24773}
24774
24775
24776
24777;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
24778
24779
24780
24781/**
24782 * When a component is the child of `AnimatePresence`, it can use `usePresence`
24783 * to access information about whether it's still present in the React tree.
24784 *
24785 * ```jsx
24786 * import { usePresence } from "framer-motion"
24787 *
24788 * export const Component = () => {
24789 *   const [isPresent, safeToRemove] = usePresence()
24790 *
24791 *   useEffect(() => {
24792 *     !isPresent && setTimeout(safeToRemove, 1000)
24793 *   }, [isPresent])
24794 *
24795 *   return <div />
24796 * }
24797 * ```
24798 *
24799 * If `isPresent` is `false`, it means that a component has been removed the tree, but
24800 * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
24801 *
24802 * @public
24803 */
24804function usePresence() {
24805    const context = (0,external_React_.useContext)(PresenceContext_PresenceContext);
24806    if (context === null)
24807        return [true, null];
24808    const { isPresent, onExitComplete, register } = context;
24809    // It's safe to call the following hooks conditionally (after an early return) because the context will always
24810    // either be null or non-
24810null for the lifespan of the component.
24811    const id = (0,external_React_.useId)();
24812    (0,external_React_.useEffect)(() => register(id), []);
24813    const safeToRemove = () => onExitComplete && onExitComplete(id);
24814    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
24815}
24816/**
24817 * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
24818 * There is no `safeToRemove` function.
24819 *
24820 * ```jsx
24821 * import { useIsPresent } from "framer-motion"
24822 *
24823 * export const Component = () => {
24824 *   const isPresent = useIsPresent()
24825 *
24826 *   useEffect(() => {
24827 *     !isPresent && console.log("I've been removed!")
24828 *   }, [isPresent])
24829 *
24830 *   return <div />
24831 * }
24832 * ```
24833 *
24834 * @public
24835 */
24836function useIsPresent() {
24837    return isPresent(useContext(PresenceContext));
24838}
24839function isPresent(context) {
24840    return context === null ? true : context.isPresent;
24841}
24842
24843
24844
24845;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/state.mjs
24846/**
24847 * This should only ever be modified on the client otherwise it'll
24848 * persist through server requests. If we need instanced states we
24849 * could lazy-init via root.
24850 */
24851const globalProjectionState = {
24852    /**
24853     * Global flag as to whether the tree has animated since the last time
24854     * we resized the window
24855     */
24856    hasAnimatedSinceResize: true,
24857    /**
24858     * We set this to true once, on the first update. Any nodes added to the tree beyond that
24859     * update will be given a `data-projection-id` attribute.
24860     */
24861    hasEverUpdated: false,
24862};
24863
24864
24865
24866;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs
24867
24868
24869function pixelsToPercent(pixels, axis) {
24870    if (axis.max === axis.min)
24871        return 0;
24872    return (pixels / (axis.max - axis.min)) * 100;
24873}
24874/**
24875 * We always correct borderRadius as a percentage rather than pixels to reduce paints.
24876 * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
vendor: 15,085 bytes, lines 24877-25296
24877 * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
24878 * borderRadius in both states. If we animate between the two in pixels that will trigger
24879 * a paint each time. If we animate between the two in percentage we'll avoid a paint.
24880 */
24881const correctBorderRadius = {
24882    correct: (latest, node) => {
24883        if (!node.target)
24884            return latest;
24885        /**
24886         * If latest is a string, if it's a percentage we can return immediately as it's
24887         * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
24888         */
24889        if (typeof latest === "string") {
24890            if (px.test(latest)) {
24891                latest = parseFloat(latest);
24892            }
24893            else {
24894                return latest;
24895            }
24896        }
24897        /**
24898         * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
24899         * pixel value as a percentage of each axis
24900         */
24901        const x = pixelsToPercent(latest, node.target.x);
24902        const y = pixelsToPercent(latest, node.target.y);
24903        return `${x}% ${y}%`;
24904    },
24905};
24906
24907
24908
24909;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs
24910
24911
24912
24913const correctBoxShadow = {
24914    correct: (latest, { treeScale, projectionDelta }) => {
24915        const original = latest;
24916        const shadow = complex.parse(latest);
24917        // TODO: Doesn't support multiple shadows
24918        if (shadow.length > 5)
24919            return original;
24920        const template = complex.createTransformer(latest);
24921        const offset = typeof shadow[0] !== "number" ? 1 : 0;
24922        // Calculate the overall context scale
24923        const xScale = projectionDelta.x.scale * treeScale.x;
24924        const yScale = projectionDelta.y.scale * treeScale.y;
24925        shadow[0 + offset] /= xScale;
24926        shadow[1 + offset] /= yScale;
24927        /**
24928         * Ideally we'd correct x and y scales individually, but because blur and
24929         * spread apply to both we have to take a scale average and apply that instead.
24930         * We could potentially improve the outcome of this by incorporating the ratio between
24931         * the two scales.
24932         */
24933        const averageScale = mix(xScale, yScale, 0.5);
24934        // Blur
24935        if (typeof shadow[2 + offset] === "number")
24936            shadow[2 + offset] /= averageScale;
24937        // Spread
24938        if (typeof shadow[3 + offset] === "number")
24939            shadow[3 + offset] /= averageScale;
24940        return template(shadow);
24941    },
24942};
24943
24944
24945
24946;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
24947
24948
24949
24950
24951
24952
24953
24954
24955
24956
24957class MeasureLayoutWithContext extends external_React_.Component {
24958    /**
24959     * This only mounts projection nodes for components that
24960     * need measuring, we might want to do it for all components
24961     * in order to incorporate transforms
24962     */
24963    componentDidMount() {
24964        const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
24965        const { projection } = visualElement;
24966        addScaleCorrector(defaultScaleCorrectors);
24967        if (projection) {
24968            if (layoutGroup.group)
24969                layoutGroup.group.add(projection);
24970            if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
24971                switchLayoutGroup.register(projection);
24972            }
24973            projection.root.didUpdate();
24974            projection.addEventListener("animationComplete", () => {
24975                this.safeToRemove();
24976            });
24977            projection.setOptions({
24978                ...projection.options,
24979                onExitComplete: () => this.safeToRemove(),
24980            });
24981        }
24982        globalProjectionState.hasEverUpdated = true;
24983    }
24984    getSnapshotBeforeUpdate(prevProps) {
24985        const { layoutDependency, visualElement, drag, isPresent } = this.props;
24986        const projection = visualElement.projection;
24987        if (!projection)
24988            return null;
24989        /**
24990         * TODO: We use this data in relegate to determine whether to
24991         * promote a previous element. There's no guarantee its presence data
24992         * will have updated by this point - if a bug like this arises it will
24993         * have to be that we markForRelegation and then find a new lead some other way,
24994         * perhaps in didUpdate
24995         */
24996        projection.isPresent = isPresent;
24997        if (drag ||
24998            prevProps.layoutDependency !== layoutDependency ||
24999            layoutDependency === undefined) {
25000            projection.willUpdate();
25001        }
25002        else {
25003            this.safeToRemove();
25004        }
25005        if (prevProps.isPresent !== isPresent) {
25006            if (isPresent) {
25007                projection.promote();
25008            }
25009            else if (!projection.relegate()) {
25010                /**
25011                 * If there's another stack member taking over from this one,
25012                 * it's in charge of the exit animation and therefore should
25013                 * be in charge of the safe to remove. Otherwise we call it here.
25014                 */
25015                frame_frame.postRender(() => {
25016                    const stack = projection.getStack();
25017                    if (!stack || !stack.members.length) {
25018                        this.safeToRemove();
25019                    }
25020                });
25021            }
25022        }
25023        return null;
25024    }
25025    componentDidUpdate() {
25026        const { projection } = this.props.visualElement;
25027        if (projection) {
25028            projection.root.didUpdate();
25029            queueMicrotask(() => {
25030                if (!projection.currentAnimation && projection.isLead()) {
25031                    this.safeToRemove();
25032                }
25033            });
25034        }
25035    }
25036    componentWillUnmount() {
25037        const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;
25038        const { projection } = visualElement;
25039        if (projection) {
25040            projection.scheduleCheckAfterUnmount();
25041            if (layoutGroup && layoutGroup.group)
25042                layoutGroup.group.remove(projection);
25043            if (promoteContext && promoteContext.deregister)
25044                promoteContext.deregister(projection);
25045        }
25046    }
25047    safeToRemove() {
25048        const { safeToRemove } = this.props;
25049        safeToRemove && safeToRemove();
25050    }
25051    render() {
25052        return null;
25053    }
25054}
25055function MeasureLayout(props) {
25056    const [isPresent, safeToRemove] = usePresence();
25057    const layoutGroup = (0,external_React_.useContext)(LayoutGroupContext);
25058    return (external_React_.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));
25059}
25060const defaultScaleCorrectors = {
25061    borderRadius: {
25062        ...correctBorderRadius,
25063        applyTo: [
25064            "borderTopLeftRadius",
25065            "borderTopRightRadius",
25066            "borderBottomLeftRadius",
25067            "borderBottomRightRadius",
25068        ],
25069    },
25070    borderTopLeftRadius: correctBorderRadius,
25071    borderTopRightRadius: correctBorderRadius,
25072    borderBottomLeftRadius: correctBorderRadius,
25073    borderBottomRightRadius: correctBorderRadius,
25074    boxShadow: correctBoxShadow,
25075};
25076
25077
25078
25079;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs
25080
25081
25082
25083
25084
25085
25086const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
25087const numBorders = borders.length;
25088const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
25089const isPx = (value) => typeof value === "number" || px.test(value);
25090function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
25091    if (shouldCrossfadeOpacity) {
25092        target.opacity = mix(0, 
25093        // TODO Reinstate this if only child
25094        lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
25095        target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
25096    }
25097    else if (isOnlyMember) {
25098        target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
25099    }
25100    /**
25101     * Mix border radius
25102     */
25103    for (let i = 0; i < numBorders; i++) {
25104        const borderLabel = `border${borders[i]}Radius`;
25105        let followRadius = getRadius(follow, borderLabel);
25106        let leadRadius = getRadius(lead, borderLabel);
25107        if (followRadius === undefined && leadRadius === undefined)
25108            continue;
25109        followRadius || (followRadius = 0);
25110        leadRadius || (leadRadius = 0);
25111        const canMix = followRadius === 0 ||
25112            leadRadius === 0 ||
25113            isPx(followRadius) === isPx(leadRadius);
25114        if (canMix) {
25115            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
25116            if (percent.test(leadRadius) || percent.test(followRadius)) {
25117                target[borderLabel] += "%";
25118            }
25119        }
25120        else {
25121            target[borderLabel] = leadRadius;
25122        }
25123    }
25124    /**
25125     * Mix rotation
25126     */
25127    if (follow.rotate || lead.rotate) {
25128        target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
25129    }
25130}
25131function getRadius(values, radiusName) {
25132    return values[radiusName] !== undefined
25133        ? values[radiusName]
25134        : values.borderRadius;
25135}
25136// /**
25137//  * We only want to mix the background color if there's a follow element
25138//  * that we're not crossfading opacity between. For instance with switch
25139//  * AnimateSharedLayout animations, this helps the illusion of a continuous
25140//  * element being animated but also cuts down on the number of paints triggered
25141//  * for elements where opacity is doing that work for us.
25142//  */
25143// if (
25144//     !hasFollowElement &&
25145//     latestLeadValues.backgroundColor &&
25146//     latestFollowValues.backgroundColor
25147// ) {
25148//     /**
25149//      * This isn't ideal performance-wise as mixColor is creating a new function every frame.
25150//      * We could probably create a mixer that runs at the start of the animation but
25151//      * the idea behind the crossfader is that it runs dynamically between two potentially
25152//      * changing targets (ie opacity or borderRadius may be animating independently via variants)
25153//      */
25154//     leadState.backgroundColor = followState.backgroundColor = mixColor(
25155//         latestFollowValues.backgroundColor as string,
25156//         latestLeadValues.backgroundColor as string
25157//     )(p)
25158// }
25159const easeCrossfadeIn = compress(0, 0.5, circOut);
25160const easeCrossfadeOut = compress(0.5, 0.95, noop_noop);
25161function compress(min, max, easing) {
25162    return (p) => {
25163        // Could replace ifs with clamp
25164        if (p < min)
25165            return 0;
25166        if (p > max)
25167            return 1;
25168        return easing(progress(min, max, p));
25169    };
25170}
25171
25172
25173
25174;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/copy.mjs
25175/**
25176 * Reset an axis to the provided origin box.
25177 *
25178 * This is a mutative operation.
25179 */
25180function copyAxisInto(axis, originAxis) {
25181    axis.min = originAxis.min;
25182    axis.max = originAxis.max;
25183}
25184/**
25185 * Reset a box to the provided origin box.
25186 *
25187 * This is a mutative operation.
25188 */
25189function copyBoxInto(box, originBox) {
25190    copyAxisInto(box.x, originBox.x);
25191    copyAxisInto(box.y, originBox.y);
25192}
25193
25194
25195
25196;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs
25197
25198
25199
25200
25201/**
25202 * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
25203 */
25204function removePointDelta(point, translate, scale, originPoint, boxScale) {
25205    point -= translate;
25206    point = scalePoint(point, 1 / scale, originPoint);
25207    if (boxScale !== undefined) {
25208        point = scalePoint(point, 1 / boxScale, originPoint);
25209    }
25210    return point;
25211}
25212/**
25213 * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
25214 */
25215function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
25216    if (percent.test(translate)) {
25217        translate = parseFloat(translate);
25218        const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
25219        translate = relativeProgress - sourceAxis.min;
25220    }
25221    if (typeof translate !== "number")
25222        return;
25223    let originPoint = mix(originAxis.min, originAxis.max, origin);
25224    if (axis === originAxis)
25225        originPoint -= translate;
25226    axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
25227    axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);
25228}
25229/**
25230 * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
25231 * and acts as a bridge between motion values and removeAxisDelta
25232 */
25233function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
25234    removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
25235}
25236/**
25237 * The names of the motion values we want to apply as translation, scale and origin.
25238 */
25239const delta_remove_xKeys = ["x", "scaleX", "originX"];
25240const delta_remove_yKeys = ["y", "scaleY", "originY"];
25241/**
25242 * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
25243 * and acts as a bridge between motion values and removeAxisDelta
25244 */
25245function removeBoxTransforms(box, transforms, originBox, sourceBox) {
25246    removeAxisTransforms(box.x, transforms, delta_remove_xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
25247    removeAxisTransforms(box.y, transforms, delta_remove_yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
25248}
25249
25250
25251
25252;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/utils.mjs
25253
25254
25255function isAxisDeltaZero(delta) {
25256    return delta.translate === 0 && delta.scale === 1;
25257}
25258function isDeltaZero(delta) {
25259    return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
25260}
25261function boxEquals(a, b) {
25262    return (a.x.min === b.x.min &&
25263        a.x.max === b.x.max &&
25264        a.y.min === b.y.min &&
25265        a.y.max === b.y.max);
25266}
25267function aspectRatio(box) {
25268    return calcLength(box.x) / calcLength(box.y);
25269}
25270
25271
25272
25273;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/shared/stack.mjs
25274
25275
25276class NodeStack {
25277    constructor() {
25278        this.members = [];
25279    }
25280    add(node) {
25281        addUniqueItem(this.members, node);
25282        node.scheduleRender();
25283    }
25284    remove(node) {
25285        removeItem(this.members, node);
25286        if (node === this.prevLead) {
25287            this.prevLead = undefined;
25288        }
25289        if (node === this.lead) {
25290            const prevLead = this.members[this.members.length - 1];
25291            if (prevLead) {
25292                this.promote(prevLead);
25293            }
25294        }
25295    }
25296    relegate(node) {
vendor: 5,276 bytes, lines 25297-25443
25297        const indexOfNode = this.members.findIndex((member) => node === member);
25298        if (indexOfNode === 0)
25299            return false;
25300        /**
25301         * Find the next projection node that is present
25302         */
25303        let prevLead;
25304        for (let i = indexOfNode; i >= 0; i--) {
25305            const member = this.members[i];
25306            if (member.isPresent !== false) {
25307                prevLead = member;
25308                break;
25309            }
25310        }
25311        if (prevLead) {
25312            this.promote(prevLead);
25313            return true;
25314        }
25315        else {
25316            return false;
25317        }
25318    }
25319    promote(node, preserveFollowOpacity) {
25320        const prevLead = this.lead;
25321        if (node === prevLead)
25322            return;
25323        this.prevLead = prevLead;
25324        this.lead = node;
25325        node.show();
25326        if (prevLead) {
25327            prevLead.instance && prevLead.scheduleRender();
25328            node.scheduleRender();
25329            node.resumeFrom = prevLead;
25330            if (preserveFollowOpacity) {
25331                node.resumeFrom.preserveOpacity = true;
25332            }
25333            if (prevLead.snapshot) {
25334                node.snapshot = prevLead.snapshot;
25335                node.snapshot.latestValues =
25336                    prevLead.animationValues || prevLead.latestValues;
25337            }
25338            if (node.root && node.root.isUpdating) {
25339                node.isLayoutDirty = true;
25340            }
25341            const { crossfade } = node.options;
25342            if (crossfade === false) {
25343                prevLead.hide();
25344            }
25345            /**
25346             * TODO:
25347             *   - Test border radius when previous node was deleted
25348             *   - boxShadow mixing
25349             *   - Shared between element A in scrolled container and element B (scroll stays the same or changes)
25350             *   - Shared between element A in transformed container and element B (transform stays the same or changes)
25351             *   - Shared between element A in scrolled page and element B (scroll stays the same or changes)
25352             * ---
25353             *   - Crossfade opacity of root nodes
25354             *   - layoutId changes after animation
25355             *   - layoutId changes mid animation
25356             */
25357        }
25358    }
25359    exitAnimationComplete() {
25360        this.members.forEach((node) => {
25361            const { options, resumingFrom } = node;
25362            options.onExitComplete && options.onExitComplete();
25363            if (resumingFrom) {
25364                resumingFrom.options.onExitComplete &&
25365                    resumingFrom.options.onExitComplete();
25366            }
25367        });
25368    }
25369    scheduleRender() {
25370        this.members.forEach((node) => {
25371            node.instance && node.scheduleRender(false);
25372        });
25373    }
25374    /**
25375     * Clear any leads that have been removed this render to prevent them from being
25376     * used in future animations and to prevent memory leaks
25377     */
25378    removeLeadSnapshot() {
25379        if (this.lead && this.lead.snapshot) {
25380            this.lead.snapshot = undefined;
25381        }
25382    }
25383}
25384
25385
25386
25387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/transform.mjs
25388function buildProjectionTransform(delta, treeScale, latestTransform) {
25389    let transform = "";
25390    /**
25391     * The translations we use to calculate are always relative to the viewport coordinate space.
25392     * But when we apply scales, we also scale the coordinate space of an element and its children.
25393     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
25394     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
25395     */
25396    const xTranslate = delta.x.translate / treeScale.x;
25397    const yTranslate = delta.y.translate / treeScale.y;
25398    if (xTranslate || yTranslate) {
25399        transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;
25400    }
25401    /**
25402     * Apply scale correction for the tree transform.
25403     * This will apply scale to the screen-orientated axes.
25404     */
25405    if (treeScale.x !== 1 || treeScale.y !== 1) {
25406        transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
25407    }
25408    if (latestTransform) {
25409        const { rotate, rotateX, rotateY } = latestTransform;
25410        if (rotate)
25411            transform += `rotate(${rotate}deg) `;
25412        if (rotateX)
25413            transform += `rotateX(${rotateX}deg) `;
25414        if (rotateY)
25415            transform += `rotateY(${rotateY}deg) `;
25416    }
25417    /**
25418     * Apply scale to match the size of the element to the size we want it.
25419     * This will apply scale to the element-orientated axes.
25420     */
25421    const elementScaleX = delta.x.scale * treeScale.x;
25422    const elementScaleY = delta.y.scale * treeScale.y;
25423    if (elementScaleX !== 1 || elementScaleY !== 1) {
25424        transform += `scale(${elementScaleX}, ${elementScaleY})`;
25425    }
25426    return transform || "none";
25427}
25428
25429
25430
25431;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs
25432const compareByDepth = (a, b) => a.depth - b.depth;
25433
25434
25435
25436;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs
25437
25438
25439
25440class FlatTree {
25441    constructor() {
25442        this.children = [];
25443        this.isDirty = false;
25444    }
25445    add(child) {
25446        addUniqueItem(this.children, child);
25447        this.isDirty = true;
25448    }
25449    remove(child) {
25450        removeItem(this.children, child);
25451        this.isDirty = true;
25452    }
25453    forEach(callback) {
25454        this.isDirty && this.children.sort(compareByDepth);
25455        this.isDirty = false;
25456        this.children.forEach(callback);
25457    }
25458}
25459
25460
25461
25462;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/delay.mjs
25463
25464
25465/**
25466 * Timeout defined in ms
25467 */
25468function delay(callback, timeout) {
25469    const start = performance.now();
25470    const checkElapsed = ({ timestamp }) => {
25471        const elapsed = timestamp - start;
25472        if (elapsed >= timeout) {
25473            cancelFrame(checkElapsed);
25474            callback(elapsed - timeout);
25475        }
25476    };
25477    frame_frame.read(checkElapsed, true);
25478    return () => cancelFrame(checkElapsed);
25479}
25480
25481
25482
25483;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/debug/record.mjs
25484function record(data) {
25485    if (window.MotionDebug) {
25486        window.MotionDebug.record(data);
25487    }
25488}
25489
25490
25491
25492;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs
25493function isSVGElement(element) {
25494    return element instanceof SVGElement && element.tagName !== "svg";
25495}
25496
25497
25498
25499;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs
25500
25501
25502
25503
25504function animateSingleValue(value, keyframes, options) {
25505    const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
25506    motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
25507    return motionValue$1.animation;
25508}
25509
25510
25511
25512;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs
25513
25514
25515
25516
25517
25518
25519
25520
25521
25522
25523
25524
25525
25526
25527
25528
25529
25530
25531
25532
25533
25534
25535
25536
25537
25538const transformAxes = ["", "X", "Y", "Z"];
25539/**
25540 * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
25541 * which has a noticeable difference in spring animations
25542 */
25543const animationTarget = 1000;
25544let create_projection_node_id = 0;
25545/**
25546 * Use a mutable data object for debug data so as to not create a new
25547 * object every frame.
25548 */
25549const projectionFrameData = {
25550    type: "projectionFrame",
25551    totalNodes: 0,
25552    resolvedTargetDeltas: 0,
25553    recalculatedProjection: 0,
25554};
25555function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
25556    return class ProjectionNode {
25557        constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
25558            /**
25559             * A unique ID generated for every projection node.
25560             */
25561            this.id = create_projection_node_id++;
25562            /**
25563             * An id that represents a unique session instigated by startUpdate.
25564             */
25565            this.animationId = 0;
25566            /**
25567             * A Set containing all this component's children. This is used to iterate
25568             * through the children.
25569             *
25570             * TODO: This could be faster to iterate as a flat array stored on the root node.
25571             */
25572            this.children = new Set();
25573            /**
25574             * Options for the node. We use this to configure what kind of layout animations
25575             * we should perform (if any).
25576             */
25577            this.options = {};
25578            /**
25579             * We use this to detect when its safe to shut down part of a projection tree.
25580             * We have to keep projecting children for scale correction and relative projection
25581             * until all their parents stop performing layout animations.
25582             */
25583            this.isTreeAnimating = false;
25584            this.isAnimationBlocked = false;
25585            /**
25586             * Flag to true if we think this layout has been changed. We can't always know this,
25587             * currently we set it to true every time a component renders, or if it has a layoutDependency
25588             * if that has changed between renders. Additionally, components can be grouped by LayoutGroup
25589             * and if one node is dirtied, they all are.
25590             */
25591            this.isLayoutDirty = false;
25592            /**
25593             * Flag to true if we think the projection calculations for this node needs
25594             * recalculating as a result of an updated transform or layout animation.
25595             */
25596            this.isProjectionDirty = false;
25597            /**
25598             * Flag to true if the layout *or* transform has changed. This then gets propagated
25599             * throughout the projection tree, forcing any element below to recalculate on the next frame.
25600             */
25601            this.isSharedProjectionDirty = false;
25602            /**
25603             * Flag transform dirty. This gets propagated throughout the whole tree but is only
25604             * respected by shared nodes.
25605             */
25606            this.isTransformDirty = false;
25607            /**
25608             * Block layout updates for instant layout transitions throughout the tree.
25609             */
25610            this.updateManuallyBlocked = false;
25611            this.updateBlockedByResize = false;
25612            /**
25613             * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`
25614             * call.
25615             */
25616            this.isUpdating = false;
25617            /**
25618             * If this is an SVG element we currently disable projection transforms
25619             */
25620            this.isSVG = false;
25621            /**
25622             * Flag to true (during promotion) if a node doing an instant layout transition needs to reset
25623             * its projection styles.
25624             */
25625            this.needsReset = false;
25626            /**
25627             * Flags whether this node should have its transform reset prior to measuring.
25628             */
25629            this.shouldResetTransform = false;
25630            /**
25631             * An object representing the calculated contextual/accumulated/tree scale.
25632             * This will be used to scale calculcated projection transforms, as these are
25633             * calculated in screen-space but need to be scaled for elements to layoutly
25634             * make it to their calculated destinations.
25635             *
25636             * TODO: Lazy-init
25637             */
25638            this.treeScale = { x: 1, y: 1 };
25639            /**
25640             *
25641             */
25642            this.eventHandlers = new Map();
25643            this.hasTreeAnimated = false;
25644            // Note: Currently only running on root node
25645            this.updateScheduled = false;
25646            this.checkUpdateFailed = () => {
25647                if (this.isUpdating) {
25648                    this.isUpdating = false;
25649                    this.clearAllSnapshots();
25650                }
25651            };
25652            /**
25653             * This is a multi-step process as shared nodes might be of different depths. Nodes
25654             * are sorted by depth order, so we need to resolve the entire tree before moving to
25655             * the next step.
25656             */
25657            this.updateProjection = () => {
25658                /**
25659                 * Reset debug counts. Manually resetting rather than creating a new
25660                 * object each frame.
25661                 */
25662                projectionFrameData.totalNodes =
25663                    projectionFrameData.resolvedTargetDeltas =
25664                        projectionFrameData.recalculatedProjection =
25665                            0;
25666                this.nodes.forEach(propagateDirtyNodes);
25667                this.nodes.forEach(resolveTargetDelta);
25668                this.nodes.forEach(calcProjection);
25669                this.nodes.forEach(cleanDirtyNodes);
25670                record(projectionFrameData);
25671            };
25672            this.hasProjected = false;
25673            this.isVisible = true;
25674            this.animationProgress = 0;
25675            /**
25676             * Shared layout
25677             */
25678            // TODO Only running on root node
25679            this.sharedNodes = new Map();
25680            this.latestValues = latestValues;
25681            this.root = parent ? parent.root || parent : this;
25682            this.path = parent ? [...parent.path, parent] : [];
25683            this.parent = parent;
25684            this.depth = parent ? parent.depth + 1 : 0;
25685            for (let i = 0; i < this.path.length; i++) {
25686                this.path[i].shouldResetTransform = true;
25687            }
25688            if (this.root === this)
25689                this.nodes = new FlatTree();
25690        }
25691        addEventListener(name, handler) {
25692            if (!this.eventHandlers.has(name)) {
25693                this.eventHandlers.set(name, new SubscriptionManager());
25694            }
25695            return this.eventHandlers.get(name).add(handler);
25696        }
25697        notifyListeners(name, ...args) {
25698            const subscriptionManager = this.eventHandlers.get(name);
25699            subscriptionManager && subscriptionManager.notify(...args);
25700        }
25701        hasListeners(name) {
25702            return this.eventHandlers.has(name);
25703        }
25704        /**
25705         * Lifecycles
25706         */
25707        mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
25708            if (this.instance)
25709                return;
25710            this.isSVG = isSVGElement(instance);
25711            this.instance = instance;
25712            const { layoutId, layout, visualElement } = this.options;
25713            if (visualElement && !visualElement.current) {
25714                visualElement.mount(instance);
25715            }
25716            this.root.nodes.add(this);
25717            this.parent && this.parent.children.add(this);
25718            if (isLayoutDirty && (layout || layoutId)) {
25719                this.isLayoutDirty = true;
25720            }
25721            if (attachResizeListener) {
25722                let cancelDelay;
25723                const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
25724                attachResizeListener(instance, () => {
25725                    this.root.updateBlockedByResize = true;
25726                    cancelDelay && cancelDelay();
vendor: 3,264 bytes, lines 25727-25783
25727                    cancelDelay = delay(resizeUnblockUpdate, 250);
25728                    if (globalProjectionState.hasAnimatedSinceResize) {
25729                        globalProjectionState.hasAnimatedSinceResize = false;
25730                        this.nodes.forEach(finishAnimation);
25731                    }
25732                });
25733            }
25734            if (layoutId) {
25735                this.root.registerSharedNode(layoutId, this);
25736            }
25737            // Only register the handler if it requires layout animation
25738            if (this.options.animate !== false &&
25739                visualElement &&
25740                (layoutId || layout)) {
25741                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
25742                    if (this.isTreeAnimationBlocked()) {
25743                        this.target = undefined;
25744                        this.relativeTarget = undefined;
25745                        return;
25746                    }
25747                    // TODO: Check here if an animation exists
25748                    const layoutTransition = this.options.transition ||
25749                        visualElement.getDefaultTransition() ||
25750                        defaultLayoutTransition;
25751                    const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
25752                    /**
25753                     * The target layout of the element might stay the same,
25754                     * but its position relative to its parent has changed.
25755                     */
25756                    const targetChanged = !this.targetLayout ||
25757                        !boxEquals(this.targetLayout, newLayout) ||
25758                        hasRelativeTargetChanged;
25759                    /**
25760                     * If the layout hasn't seemed to have changed, it might be that the
25761                     * element is visually in the same place in the document but its position
25762                     * relative to its parent has indeed changed. So here we check for that.
25763                     */
25764                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
25765                    if (this.options.layoutRoot ||
25766                        (this.resumeFrom && this.resumeFrom.instance) ||
25767                        hasOnlyRelativeTargetChanged ||
25768                        (hasLayoutChanged &&
25769                            (targetChanged || !this.currentAnimation))) {
25770                        if (this.resumeFrom) {
25771                            this.resumingFrom = this.resumeFrom;
25772                            this.resumingFrom.resumingFrom = undefined;
25773                        }
25774                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
25775                        const animationOptions = {
25776                            ...getValueTransition(layoutTransition, "layout"),
25777                            onPlay: onLayoutAnimationStart,
25778                            onComplete: onLayoutAnimationComplete,
25779                        };
25780                        if (visualElement.shouldReduceMotion ||
25781                            this.options.layoutRoot) {
25782                            animationOptions.delay = 0;
25783                            animationOptions.type = false;
vendor: 8,253 bytes, lines 25784-25986
25784                        }
25785                        this.startAnimation(animationOptions);
25786                    }
25787                    else {
25788                        /**
25789                         * If the layout hasn't changed and we have an animation that hasn't started yet,
25790                         * finish it immediately. Otherwise it will be animating from a location
25791                         * that was probably never commited to screen and look like a jumpy box.
25792                         */
25793                        if (!hasLayoutChanged) {
25794                            finishAnimation(this);
25795                        }
25796                        if (this.isLead() && this.options.onExitComplete) {
25797                            this.options.onExitComplete();
25798                        }
25799                    }
25800                    this.targetLayout = newLayout;
25801                });
25802            }
25803        }
25804        unmount() {
25805            this.options.layoutId && this.willUpdate();
25806            this.root.nodes.remove(this);
25807            const stack = this.getStack();
25808            stack && stack.remove(this);
25809            this.parent && this.parent.children.delete(this);
25810            this.instance = undefined;
25811            cancelFrame(this.updateProjection);
25812        }
25813        // only on the root
25814        blockUpdate() {
25815            this.updateManuallyBlocked = true;
25816        }
25817        unblockUpdate() {
25818            this.updateManuallyBlocked = false;
25819        }
25820        isUpdateBlocked() {
25821            return this.updateManuallyBlocked || this.updateBlockedByResize;
25822        }
25823        isTreeAnimationBlocked() {
25824            return (this.isAnimationBlocked ||
25825                (this.parent && this.parent.isTreeAnimationBlocked()) ||
25826                false);
25827        }
25828        // Note: currently only running on root node
25829        startUpdate() {
25830            if (this.isUpdateBlocked())
25831                return;
25832            this.isUpdating = true;
25833            this.nodes && this.nodes.forEach(resetRotation);
25834            this.animationId++;
25835        }
25836        getTransformTemplate() {
25837            const { visualElement } = this.options;
25838            return visualElement && visualElement.getProps().transformTemplate;
25839        }
25840        willUpdate(shouldNotifyListeners = true) {
25841            this.root.hasTreeAnimated = true;
25842            if (this.root.isUpdateBlocked()) {
25843                this.options.onExitComplete && this.options.onExitComplete();
25844                return;
25845            }
25846            !this.root.isUpdating && this.root.startUpdate();
25847            if (this.isLayoutDirty)
25848                return;
25849            this.isLayoutDirty = true;
25850            for (let i = 0; i < this.path.length; i++) {
25851                const node = this.path[i];
25852                node.shouldResetTransform = true;
25853                node.updateScroll("snapshot");
25854                if (node.options.layoutRoot) {
25855                    node.willUpdate(false);
25856                }
25857            }
25858            const { layoutId, layout } = this.options;
25859            if (layoutId === undefined && !layout)
25860                return;
25861            const transformTemplate = this.getTransformTemplate();
25862            this.prevTransformTemplateValue = transformTemplate
25863                ? transformTemplate(this.latestValues, "")
25864                : undefined;
25865            this.updateSnapshot();
25866            shouldNotifyListeners && this.notifyListeners("willUpdate");
25867        }
25868        update() {
25869            this.updateScheduled = false;
25870            const updateWasBlocked = this.isUpdateBlocked();
25871            // When doing an instant transition, we skip the layout update,
25872            // but should still clean up the measurements so that the next
25873            // snapshot could be taken correctly.
25874            if (updateWasBlocked) {
25875                this.unblockUpdate();
25876                this.clearAllSnapshots();
25877                this.nodes.forEach(clearMeasurements);
25878                return;
25879            }
25880            if (!this.isUpdating) {
25881                this.nodes.forEach(clearIsLayoutDirty);
25882            }
25883            this.isUpdating = false;
25884            /**
25885             * Write
25886             */
25887            this.nodes.forEach(resetTransformStyle);
25888            /**
25889             * Read ==================
25890             */
25891            // Update layout measurements of updated children
25892            this.nodes.forEach(updateLayout);
25893            /**
25894             * Write
25895             */
25896            // Notify listeners that the layout is updated
25897            this.nodes.forEach(notifyLayoutUpdate);
25898            this.clearAllSnapshots();
25899            /**
25900             * Manually flush any pending updates. Ideally
25901             * we could leave this to the following requestAnimationFrame but this seems
25902             * to leave a flash of incorrectly styled content.
25903             */
25904            const now = performance.now();
25905            frameData.delta = clamp_clamp(0, 1000 / 60, now - frameData.timestamp);
25906            frameData.timestamp = now;
25907            frameData.isProcessing = true;
25908            steps.update.process(frameData);
25909            steps.preRender.process(frameData);
25910            steps.render.process(frameData);
25911            frameData.isProcessing = false;
25912        }
25913        didUpdate() {
25914            if (!this.updateScheduled) {
25915                this.updateScheduled = true;
25916                queueMicrotask(() => this.update());
25917            }
25918        }
25919        clearAllSnapshots() {
25920            this.nodes.forEach(clearSnapshot);
25921            this.sharedNodes.forEach(removeLeadSnapshots);
25922        }
25923        scheduleUpdateProjection() {
25924            frame_frame.preRender(this.updateProjection, false, true);
25925        }
25926        scheduleCheckAfterUnmount() {
25927            /**
25928             * If the unmounting node is in a layoutGroup and did trigger a willUpdate,
25929             * we manually call didUpdate to give a chance to the siblings to animate.
25930             * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
25931             */
25932            frame_frame.postRender(() => {
25933                if (this.isLayoutDirty) {
25934                    this.root.didUpdate();
25935                }
25936                else {
25937                    this.root.checkUpdateFailed();
25938                }
25939            });
25940        }
25941        /**
25942         * Update measurements
25943         */
25944        updateSnapshot() {
25945            if (this.snapshot || !this.instance)
25946                return;
25947            this.snapshot = this.measure();
25948        }
25949        updateLayout() {
25950            if (!this.instance)
25951                return;
25952            // TODO: Incorporate into a forwarded scroll offset
25953            this.updateScroll();
25954            if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
25955                !this.isLayoutDirty) {
25956                return;
25957            }
25958            /**
25959             * When a node is mounted, it simply resumes from the prevLead's
25960             * snapshot instead of taking a new one, but the ancestors scroll
25961             * might have updated while the prevLead is unmounted. We need to
25962             * update the scroll again to make sure the layout we measure is
25963             * up to date.
25964             */
25965            if (this.resumeFrom && !this.resumeFrom.instance) {
25966                for (let i = 0; i < this.path.length; i++) {
25967                    const node = this.path[i];
25968                    node.updateScroll();
25969                }
25970            }
25971            const prevLayout = this.layout;
25972            this.layout = this.measure(false);
25973            this.layoutCorrected = createBox();
25974            this.isLayoutDirty = false;
25975            this.projectionDelta = undefined;
25976            this.notifyListeners("measure", this.layout.layoutBox);
25977            const { visualElement } = this.options;
25978            visualElement &&
25979                visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
25980        }
25981        updateScroll(phase = "measure") {
25982            let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
25983            if (this.scroll &&
25984                this.scroll.animationId === this.root.animationId &&
25985                this.scroll.phase === phase) {
25986                needsMeasurement = false;
vendor: 4,428 bytes, lines 25987-26089
25987            }
25988            if (needsMeasurement) {
25989                this.scroll = {
25990                    animationId: this.root.animationId,
25991                    phase,
25992                    isRoot: checkIsScrollRoot(this.instance),
25993                    offset: measureScroll(this.instance),
25994                };
25995            }
25996        }
25997        resetTransform() {
25998            if (!resetTransform)
25999                return;
26000            const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
26001            const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
26002            const transformTemplate = this.getTransformTemplate();
26003            const transformTemplateValue = transformTemplate
26004                ? transformTemplate(this.latestValues, "")
26005                : undefined;
26006            const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
26007            if (isResetRequested &&
26008                (hasProjection ||
26009                    hasTransform(this.latestValues) ||
26010                    transformTemplateHasChanged)) {
26011                resetTransform(this.instance, transformTemplateValue);
26012                this.shouldResetTransform = false;
26013                this.scheduleRender();
26014            }
26015        }
26016        measure(removeTransform = true) {
26017            const pageBox = this.measurePageBox();
26018            let layoutBox = this.removeElementScroll(pageBox);
26019            /**
26020             * Measurements taken during the pre-render stage
26021             * still have transforms applied so we remove them
26022             * via calculation.
26023             */
26024            if (removeTransform) {
26025                layoutBox = this.removeTransform(layoutBox);
26026            }
26027            roundBox(layoutBox);
26028            return {
26029                animationId: this.root.animationId,
26030                measuredBox: pageBox,
26031                layoutBox,
26032                latestValues: {},
26033                source: this.id,
26034            };
26035        }
26036        measurePageBox() {
26037            const { visualElement } = this.options;
26038            if (!visualElement)
26039                return createBox();
26040            const box = visualElement.measureViewportBox();
26041            // Remove viewport scroll to give page-relative coordinates
26042            const { scroll } = this.root;
26043            if (scroll) {
26044                translateAxis(box.x, scroll.offset.x);
26045                translateAxis(box.y, scroll.offset.y);
26046            }
26047            return box;
26048        }
26049        removeElementScroll(box) {
26050            const boxWithoutScroll = createBox();
26051            copyBoxInto(boxWithoutScroll, box);
26052            /**
26053             * Performance TODO: Keep a cumulative scroll offset down the tree
26054             * rather than loop back up the path.
26055             */
26056            for (let i = 0; i < this.path.length; i++) {
26057                const node = this.path[i];
26058                const { scroll, options } = node;
26059                if (node !== this.root && scroll && options.layoutScroll) {
26060                    /**
26061                     * If this is a new scroll root, we want to remove all previous scrolls
26062                     * from the viewport box.
26063                     */
26064                    if (scroll.isRoot) {
26065                        copyBoxInto(boxWithoutScroll, box);
26066                        const { scroll: rootScroll } = this.root;
26067                        /**
26068                         * Undo the application of page scroll that was originally added
26069                         * to the measured bounding box.
26070                         */
26071                        if (rootScroll) {
26072                            translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
26073                            translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
26074                        }
26075                    }
26076                    translateAxis(boxWithoutScroll.x, scroll.offset.x);
26077                    translateAxis(boxWithoutScroll.y, scroll.offset.y);
26078                }
26079            }
26080            return boxWithoutScroll;
26081        }
26082        applyTransform(box, transformOnly = false) {
26083            const withTransforms = createBox();
26084            copyBoxInto(withTransforms, box);
26085            for (let i = 0; i < this.path.length; i++) {
26086                const node = this.path[i];
26087                if (!transformOnly &&
26088                    node.options.layoutScroll &&
26089                    node.scroll &&
vendor: 20,104 bytes, lines 26090-26524
26090                    node !== node.root) {
26091                    transformBox(withTransforms, {
26092                        x: -node.scroll.offset.x,
26093                        y: -node.scroll.offset.y,
26094                    });
26095                }
26096                if (!hasTransform(node.latestValues))
26097                    continue;
26098                transformBox(withTransforms, node.latestValues);
26099            }
26100            if (hasTransform(this.latestValues)) {
26101                transformBox(withTransforms, this.latestValues);
26102            }
26103            return withTransforms;
26104        }
26105        removeTransform(box) {
26106            const boxWithoutTransform = createBox();
26107            copyBoxInto(boxWithoutTransform, box);
26108            for (let i = 0; i < this.path.length; i++) {
26109                const node = this.path[i];
26110                if (!node.instance)
26111                    continue;
26112                if (!hasTransform(node.latestValues))
26113                    continue;
26114                hasScale(node.latestValues) && node.updateSnapshot();
26115                const sourceBox = createBox();
26116                const nodeBox = node.measurePageBox();
26117                copyBoxInto(sourceBox, nodeBox);
26118                removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
26119            }
26120            if (hasTransform(this.latestValues)) {
26121                removeBoxTransforms(boxWithoutTransform, this.latestValues);
26122            }
26123            return boxWithoutTransform;
26124        }
26125        setTargetDelta(delta) {
26126            this.targetDelta = delta;
26127            this.root.scheduleUpdateProjection();
26128            this.isProjectionDirty = true;
26129        }
26130        setOptions(options) {
26131            this.options = {
26132                ...this.options,
26133                ...options,
26134                crossfade: options.crossfade !== undefined ? options.crossfade : true,
26135            };
26136        }
26137        clearMeasurements() {
26138            this.scroll = undefined;
26139            this.layout = undefined;
26140            this.snapshot = undefined;
26141            this.prevTransformTemplateValue = undefined;
26142            this.targetDelta = undefined;
26143            this.target = undefined;
26144            this.isLayoutDirty = false;
26145        }
26146        forceRelativeParentToResolveTarget() {
26147            if (!this.relativeParent)
26148                return;
26149            /**
26150             * If the parent target isn't up-to-date, force it to update.
26151             * This is an unfortunate de-optimisation as it means any updating relative
26152             * projection will cause all the relative parents to recalculate back
26153             * up the tree.
26154             */
26155            if (this.relativeParent.resolvedRelativeTargetAt !==
26156                frameData.timestamp) {
26157                this.relativeParent.resolveTargetDelta(true);
26158            }
26159        }
26160        resolveTargetDelta(forceRecalculation = false) {
26161            var _a;
26162            /**
26163             * Once the dirty status of nodes has been spread through the tree, we also
26164             * need to check if we have a shared node of a different depth that has itself
26165             * been dirtied.
26166             */
26167            const lead = this.getLead();
26168            this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
26169            this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
26170            this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
26171            const isShared = Boolean(this.resumingFrom) || this !== lead;
26172            /**
26173             * We don't use transform for this step of processing so we don't
26174             * need to check whether any nodes have changed transform.
26175             */
26176            const canSkip = !(forceRecalculation ||
26177                (isShared && this.isSharedProjectionDirty) ||
26178                this.isProjectionDirty ||
26179                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
26180                this.attemptToResolveRelativeTarget);
26181            if (canSkip)
26182                return;
26183            const { layout, layoutId } = this.options;
26184            /**
26185             * If we have no layout, we can't perform projection, so early return
26186             */
26187            if (!this.layout || !(layout || layoutId))
26188                return;
26189            this.resolvedRelativeTargetAt = frameData.timestamp;
26190            /**
26191             * If we don't have a targetDelta but do have a layout, we can attempt to resolve
26192             * a relativeParent. This will allow a component to perform scale correction
26193             * even if no animation has started.
26194             */
26195            // TODO If this is unsuccessful this currently happens every frame
26196            if (!this.targetDelta && !this.relativeTarget) {
26197                // TODO: This is a semi-repetition of further down this function, make DRY
26198                const relativeParent = this.getClosestProjectingParent();
26199                if (relativeParent &&
26200                    relativeParent.layout &&
26201                    this.animationProgress !== 1) {
26202                    this.relativeParent = relativeParent;
26203                    this.forceRelativeParentToResolveTarget();
26204                    this.relativeTarget = createBox();
26205                    this.relativeTargetOrigin = createBox();
26206                    calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
26207                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
26208                }
26209                else {
26210                    this.relativeParent = this.relativeTarget = undefined;
26211                }
26212            }
26213            /**
26214             * If we have no relative target or no target delta our target isn't valid
26215             * for this frame.
26216             */
26217            if (!this.relativeTarget && !this.targetDelta)
26218                return;
26219            /**
26220             * Lazy-init target data structure
26221             */
26222            if (!this.target) {
26223                this.target = createBox();
26224                this.targetWithTransforms = createBox();
26225            }
26226            /**
26227             * If we've got a relative box for this component, resolve it into a target relative to the parent.
26228             */
26229            if (this.relativeTarget &&
26230                this.relativeTargetOrigin &&
26231                this.relativeParent &&
26232                this.relativeParent.target) {
26233                this.forceRelativeParentToResolveTarget();
26234                calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
26235                /**
26236                 * If we've only got a targetDelta, resolve it into a target
26237                 */
26238            }
26239            else if (this.targetDelta) {
26240                if (Boolean(this.resumingFrom)) {
26241                    // TODO: This is creating a new object every frame
26242                    this.target = this.applyTransform(this.layout.layoutBox);
26243                }
26244                else {
26245                    copyBoxInto(this.target, this.layout.layoutBox);
26246                }
26247                applyBoxDelta(this.target, this.targetDelta);
26248            }
26249            else {
26250                /**
26251                 * If no target, use own layout as target
26252                 */
26253                copyBoxInto(this.target, this.layout.layoutBox);
26254            }
26255            /**
26256             * If we've been told to attempt to resolve a relative target, do so.
26257             */
26258            if (this.attemptToResolveRelativeTarget) {
26259                this.attemptToResolveRelativeTarget = false;
26260                const relativeParent = this.getClosestProjectingParent();
26261                if (relativeParent &&
26262                    Boolean(relativeParent.resumingFrom) ===
26263                        Boolean(this.resumingFrom) &&
26264                    !relativeParent.options.layoutScroll &&
26265                    relativeParent.target &&
26266                    this.animationProgress !== 1) {
26267                    this.relativeParent = relativeParent;
26268                    this.forceRelativeParentToResolveTarget();
26269                    this.relativeTarget = createBox();
26270                    this.relativeTargetOrigin = createBox();
26271                    calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
26272                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
26273                }
26274                else {
26275                    this.relativeParent = this.relativeTarget = undefined;
26276                }
26277            }
26278            /**
26279             * Increase debug counter for resolved target deltas
26280             */
26281            projectionFrameData.resolvedTargetDeltas++;
26282        }
26283        getClosestProjectingParent() {
26284            if (!this.parent ||
26285                hasScale(this.parent.latestValues) ||
26286                has2DTranslate(this.parent.latestValues)) {
26287                return undefined;
26288            }
26289            if (this.parent.isProjecting()) {
26290                return this.parent;
26291            }
26292            else {
26293                return this.parent.getClosestProjectingParent();
26294            }
26295        }
26296        isProjecting() {
26297            return Boolean((this.relativeTarget ||
26298                this.targetDelta ||
26299                this.options.layoutRoot) &&
26300                this.layout);
26301        }
26302        calcProjection() {
26303            var _a;
26304            const lead = this.getLead();
26305            const isShared = Boolean(this.resumingFrom) || this !== lead;
26306            let canSkip = true;
26307            /**
26308             * If this is a normal layout animation and neither this node nor its nearest projecting
26309             * is dirty then we can't skip.
26310             */
26311            if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
26312                canSkip = false;
26313            }
26314            /**
26315             * If this is a shared layout animation and this node's shared projection is dirty then
26316             * we can't skip.
26317             */
26318            if (isShared &&
26319                (this.isSharedProjectionDirty || this.isTransformDirty)) {
26320                canSkip = false;
26321            }
26322            /**
26323             * If we have resolved the target this frame we must recalculate the
26324             * projection to ensure it visually represents the internal calculations.
26325             */
26326            if (this.resolvedRelativeTargetAt === frameData.timestamp) {
26327                canSkip = false;
26328            }
26329            if (canSkip)
26330                return;
26331            const { layout, layoutId } = this.options;
26332            /**
26333             * If this section of the tree isn't animating we can
26334             * delete our target sources for the following frame.
26335             */
26336            this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
26337                this.currentAnimation ||
26338                this.pendingAnimation);
26339            if (!this.isTreeAnimating) {
26340                this.targetDelta = this.relativeTarget = undefined;
26341            }
26342            if (!this.layout || !(layout || layoutId))
26343                return;
26344            /**
26345             * Reset the corrected box with the latest values from box, as we're then going
26346             * to perform mutative operations on it.
26347             */
26348            copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
26349            /**
26350             * Record previous tree scales before updating.
26351             */
26352            const prevTreeScaleX = this.treeScale.x;
26353            const prevTreeScaleY = this.treeScale.y;
26354            /**
26355             * Apply all the parent deltas to this box to produce the corrected box. This
26356             * is the layout box, as it will appear on screen as a result of the transforms of its parents.
26357             */
26358            applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
26359            /**
26360             * If this layer needs to perform scale correction but doesn't have a target,
26361             * use the layout as the target.
26362             */
26363            if (lead.layout &&
26364                !lead.target &&
26365                (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
26366                lead.target = lead.layout.layoutBox;
26367            }
26368            const { target } = lead;
26369            if (!target) {
26370                /**
26371                 * If we don't have a target to project into, but we were previously
26372                 * projecting, we want to remove the stored transform and schedule
26373                 * a render to ensure the elements reflect the removed transform.
26374                 */
26375                if (this.projectionTransform) {
26376                    this.projectionDelta = createDelta();
26377                    this.projectionTransform = "none";
26378                    this.scheduleRender();
26379                }
26380                return;
26381            }
26382            if (!this.projectionDelta) {
26383                this.projectionDelta = createDelta();
26384                this.projectionDeltaWithTransform = createDelta();
26385            }
26386            const prevProjectionTransform = this.projectionTransform;
26387            /**
26388             * Update the delta between the corrected box and the target box before user-set transforms were applied.
26389             * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
26390             * for our layout reprojection, but still allow them to be scaled correctly by the user.
26391             * It might be that to simplify this we may want to accept that user-set scale is also corrected
26392             * and we wouldn't have to keep and calc both deltas, OR we could support a user setting
26393             * to allow people to choose whether these styles are corrected based on just the
26394             * layout reprojection or the final bounding box.
26395             */
26396            calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
26397            this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);
26398            if (this.projectionTransform !== prevProjectionTransform ||
26399                this.treeScale.x !== prevTreeScaleX ||
26400                this.treeScale.y !== prevTreeScaleY) {
26401                this.hasProjected = true;
26402                this.scheduleRender();
26403                this.notifyListeners("projectionUpdate", target);
26404            }
26405            /**
26406             * Increase debug counter for recalculated projections
26407             */
26408            projectionFrameData.recalculatedProjection++;
26409        }
26410        hide() {
26411            this.isVisible = false;
26412            // TODO: Schedule render
26413        }
26414        show() {
26415            this.isVisible = true;
26416            // TODO: Schedule render
26417        }
26418        scheduleRender(notifyAll = true) {
26419            this.options.scheduleRender && this.options.scheduleRender();
26420            if (notifyAll) {
26421                const stack = this.getStack();
26422                stack && stack.scheduleRender();
26423            }
26424            if (this.resumingFrom && !this.resumingFrom.instance) {
26425                this.resumingFrom = undefined;
26426            }
26427        }
26428        setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
26429            const snapshot = this.snapshot;
26430            const snapshotLatestValues = snapshot
26431                ? snapshot.latestValues
26432                : {};
26433            const mixedValues = { ...this.latestValues };
26434            const targetDelta = createDelta();
26435            if (!this.relativeParent ||
26436                !this.relativeParent.options.layoutRoot) {
26437                this.relativeTarget = this.relativeTargetOrigin = undefined;
26438            }
26439            this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
26440            const relativeLayout = createBox();
26441            const snapshotSource = snapshot ? snapshot.source : undefined;
26442            const layoutSource = this.layout ? this.layout.source : undefined;
26443            const isSharedLayoutAnimation = snapshotSource !== layoutSource;
26444            const stack = this.getStack();
26445            const isOnlyMember = !stack || stack.members.length <= 1;
26446            const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
26447                !isOnlyMember &&
26448                this.options.crossfade === true &&
26449                !this.path.some(hasOpacityCrossfade));
26450            this.animationProgress = 0;
26451            let prevRelativeTarget;
26452            this.mixTargetDelta = (latest) => {
26453                const progress = latest / 1000;
26454                mixAxisDelta(targetDelta.x, delta.x, progress);
26455                mixAxisDelta(targetDelta.y, delta.y, progress);
26456                this.setTargetDelta(targetDelta);
26457                if (this.relativeTarget &&
26458                    this.relativeTargetOrigin &&
26459                    this.layout &&
26460                    this.relativeParent &&
26461                    this.relativeParent.layout) {
26462                    calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
26463                    mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
26464                    /**
26465                     * If this is an unchanged relative target we can consider the
26466                     * projection not dirty.
26467                     */
26468                    if (prevRelativeTarget &&
26469                        boxEquals(this.relativeTarget, prevRelativeTarget)) {
26470                        this.isProjectionDirty = false;
26471                    }
26472                    if (!prevRelativeTarget)
26473                        prevRelativeTarget = createBox();
26474                    copyBoxInto(prevRelativeTarget, this.relativeTarget);
26475                }
26476                if (isSharedLayoutAnimation) {
26477                    this.animationValues = mixedValues;
26478                    mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
26479                }
26480                this.root.scheduleUpdateProjection();
26481                this.scheduleRender();
26482                this.animationProgress = progress;
26483            };
26484            this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
26485        }
26486        startAnimation(options) {
26487            this.notifyListeners("animationStart");
26488            this.currentAnimation && this.currentAnimation.stop();
26489            if (this.resumingFrom && this.resumingFrom.currentAnimation) {
26490                this.resumingFrom.currentAnimation.stop();
26491            }
26492            if (this.pendingAnimation) {
26493                cancelFrame(this.pendingAnimation);
26494                this.pendingAnimation = undefined;
26495            }
26496            /**
26497             * Start the animation in the next frame to have a frame with progress 0,
26498             * where the target is the same as when the animation started, so we can
26499             * calculate the relative positions correctly for instant transitions.
26500             */
26501            this.pendingAnimation = frame_frame.update(() => {
26502                globalProjectionState.hasAnimatedSinceResize = true;
26503                this.currentAnimation = animateSingleValue(0, animationTarget, {
26504                    ...options,
26505                    onUpdate: (latest) => {
26506                        this.mixTargetDelta(latest);
26507                        options.onUpdate && options.onUpdate(latest);
26508                    },
26509                    onComplete: () => {
26510                        options.onComplete && options.onComplete();
26511                        this.completeAnimation();
26512                    },
26513                });
26514                if (this.resumingFrom) {
26515                    this.resumingFrom.currentAnimation = this.currentAnimation;
26516                }
26517                this.pendingAnimation = undefined;
26518            });
26519        }
26520        completeAnimation() {
26521            if (this.resumingFrom) {
26522                this.resumingFrom.currentAnimation = undefined;
26523                this.resumingFrom.preserveOpacity = undefined;
26524            }
vendor: 10,699 bytes, lines 26525-26762
26525            const stack = this.getStack();
26526            stack && stack.exitAnimationComplete();
26527            this.resumingFrom =
26528                this.currentAnimation =
26529                    this.animationValues =
26530                        undefined;
26531            this.notifyListeners("animationComplete");
26532        }
26533        finishAnimation() {
26534            if (this.currentAnimation) {
26535                this.mixTargetDelta && this.mixTargetDelta(animationTarget);
26536                this.currentAnimation.stop();
26537            }
26538            this.completeAnimation();
26539        }
26540        applyTransformsToTarget() {
26541            const lead = this.getLead();
26542            let { targetWithTransforms, target, layout, latestValues } = lead;
26543            if (!targetWithTransforms || !target || !layout)
26544                return;
26545            /**
26546             * If we're only animating position, and this element isn't the lead element,
26547             * then instead of projecting into the lead box we instead want to calculate
26548             * a new target that aligns the two boxes but maintains the layout shape.
26549             */
26550            if (this !== lead &&
26551                this.layout &&
26552                layout &&
26553                shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
26554                target = this.target || createBox();
26555                const xLength = calcLength(this.layout.layoutBox.x);
26556                target.x.min = lead.target.x.min;
26557                target.x.max = target.x.min + xLength;
26558                const yLength = calcLength(this.layout.layoutBox.y);
26559                target.y.min = lead.target.y.min;
26560                target.y.max = target.y.min + yLength;
26561            }
26562            copyBoxInto(targetWithTransforms, target);
26563            /**
26564             * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
26565             * This is the final box that we will then project into by calculating a transform delta and
26566             * applying it to the corrected box.
26567             */
26568            transformBox(targetWithTransforms, latestValues);
26569            /**
26570             * Update the delta between the corrected box and the final target box, after
26571             * user-set transforms are applied to it. This will be used by the renderer to
26572             * create a transform style that will reproject the element from its layout layout
26573             * into the desired bounding box.
26574             */
26575            calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
26576        }
26577        registerSharedNode(layoutId, node) {
26578            if (!this.sharedNodes.has(layoutId)) {
26579                this.sharedNodes.set(layoutId, new NodeStack());
26580            }
26581            const stack = this.sharedNodes.get(layoutId);
26582            stack.add(node);
26583            const config = node.options.initialPromotionConfig;
26584            node.promote({
26585                transition: config ? config.transition : undefined,
26586                preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
26587                    ? config.shouldPreserveFollowOpacity(node)
26588                    : undefined,
26589            });
26590        }
26591        isLead() {
26592            const stack = this.getStack();
26593            return stack ? stack.lead === this : true;
26594        }
26595        getLead() {
26596            var _a;
26597            const { layoutId } = this.options;
26598            return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
26599        }
26600        getPrevLead() {
26601            var _a;
26602            const { layoutId } = this.options;
26603            return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
26604        }
26605        getStack() {
26606            const { layoutId } = this.options;
26607            if (layoutId)
26608                return this.root.sharedNodes.get(layoutId);
26609        }
26610        promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
26611            const stack = this.getStack();
26612            if (stack)
26613                stack.promote(this, preserveFollowOpacity);
26614            if (needsReset) {
26615                this.projectionDelta = undefined;
26616                this.needsReset = true;
26617            }
26618            if (transition)
26619                this.setOptions({ transition });
26620        }
26621        relegate() {
26622            const stack = this.getStack();
26623            if (stack) {
26624                return stack.relegate(this);
26625            }
26626            else {
26627                return false;
26628            }
26629        }
26630        resetRotation() {
26631            const { visualElement } = this.options;
26632            if (!visualElement)
26633                return;
26634            // If there's no detected rotation values, we can early return without a forced render.
26635            let hasRotate = false;
26636            /**
26637             * An unrolled check for rotation values. Most elements don't have any rotation and
26638             * skipping the nested loop and new object creation is 50% faster.
26639             */
26640            const { latestValues } = visualElement;
26641            if (latestValues.rotate ||
26642                latestValues.rotateX ||
26643                latestValues.rotateY ||
26644                latestValues.rotateZ) {
26645                hasRotate = true;
26646            }
26647            // If there's no rotation values, we don't need to do any more.
26648            if (!hasRotate)
26649                return;
26650            const resetValues = {};
26651            // Check the rotate value of all axes and reset to 0
26652            for (let i = 0; i < transformAxes.length; i++) {
26653                const key = "rotate" + transformAxes[i];
26654                // Record the rotation and then temporarily set it to 0
26655                if (latestValues[key]) {
26656                    resetValues[key] = latestValues[key];
26657                    visualElement.setStaticValue(key, 0);
26658                }
26659            }
26660            // Force a render of this element to apply the transform with all rotations
26661            // set to 0.
26662            visualElement.render();
26663            // Put back all the values we reset
26664            for (const key in resetValues) {
26665                visualElement.setStaticValue(key, resetValues[key]);
26666            }
26667            // Schedule a render for the next frame. This ensures we won't visually
26668            // see the element with the reset rotate value applied.
26669            visualElement.scheduleRender();
26670        }
26671        getProjectionStyles(styleProp = {}) {
26672            var _a, _b;
26673            // TODO: Return lifecycle-persistent object
26674            const styles = {};
26675            if (!this.instance || this.isSVG)
26676                return styles;
26677            if (!this.isVisible) {
26678                return { visibility: "hidden" };
26679            }
26680            else {
26681                styles.visibility = "";
26682            }
26683            const transformTemplate = this.getTransformTemplate();
26684            if (this.needsReset) {
26685                this.needsReset = false;
26686                styles.opacity = "";
26687                styles.pointerEvents =
26688                    resolveMotionValue(styleProp.pointerEvents) || "";
26689                styles.transform = transformTemplate
26690                    ? transformTemplate(this.latestValues, "")
26691                    : "none";
26692                return styles;
26693            }
26694            const lead = this.getLead();
26695            if (!this.projectionDelta || !this.layout || !lead.target) {
26696                const emptyStyles = {};
26697                if (this.options.layoutId) {
26698                    emptyStyles.opacity =
26699                        this.latestValues.opacity !== undefined
26700                            ? this.latestValues.opacity
26701                            : 1;
26702                    emptyStyles.pointerEvents =
26703                        resolveMotionValue(styleProp.pointerEvents) || "";
26704                }
26705                if (this.hasProjected && !hasTransform(this.latestValues)) {
26706                    emptyStyles.transform = transformTemplate
26707                        ? transformTemplate({}, "")
26708                        : "none";
26709                    this.hasProjected = false;
26710                }
26711                return emptyStyles;
26712            }
26713            const valuesToRender = lead.animationValues || lead.latestValues;
26714            this.applyTransformsToTarget();
26715            styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
26716            if (transformTemplate) {
26717                styles.transform = transformTemplate(valuesToRender, styles.transform);
26718            }
26719            const { x, y } = this.projectionDelta;
26720            styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
26721            if (lead.animationValues) {
26722                /**
26723                 * If the lead component is animating, assign this either the entering/leaving
26724                 * opacity
26725                 */
26726                styles.opacity =
26727                    lead === this
26728                        ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
26729                        : this.preserveOpacity
26730                            ? this.latestValues.opacity
26731                            : valuesToRender.opacityExit;
26732            }
26733            else {
26734                /**
26735                 * Or we're not animating at all, set the lead component to its layout
26736                 * opacity and other components to hidden.
26737                 */
26738                styles.opacity =
26739                    lead === this
26740                        ? valuesToRender.opacity !== undefined
26741                            ? valuesToRender.opacity
26742                            : ""
26743                        : valuesToRender.opacityExit !== undefined
26744                            ? valuesToRender.opacityExit
26745                            : 0;
26746            }
26747            /**
26748             * Apply scale correction
26749             */
26750            for (const key in scaleCorrectors) {
26751                if (valuesToRender[key] === undefined)
26752                    continue;
26753                const { correct, applyTo } = scaleCorrectors[key];
26754                /**
26755                 * Only apply scale correction to the value if we have an
26756                 * active projection transform. Otherwise these values become
26757                 * vulnerable to distortion if the element changes size without
26758                 * a corresponding layout animation.
26759                 */
26760                const corrected = styles.transform === "none"
26761                    ? valuesToRender[key]
26762                    : correct(valuesToRender[key], lead);
vendor: 6,872 bytes, lines 26763-26933
26763                if (applyTo) {
26764                    const num = applyTo.length;
26765                    for (let i = 0; i < num; i++) {
26766                        styles[applyTo[i]] = corrected;
26767                    }
26768                }
26769                else {
26770                    styles[key] = corrected;
26771                }
26772            }
26773            /**
26774             * Disable pointer events on follow components. This is to ensure
26775             * that if a follow component covers a lead component it doesn't block
26776             * pointer events on the lead.
26777             */
26778            if (this.options.layoutId) {
26779                styles.pointerEvents =
26780                    lead === this
26781                        ? resolveMotionValue(styleProp.pointerEvents) || ""
26782                        : "none";
26783            }
26784            return styles;
26785        }
26786        clearSnapshot() {
26787            this.resumeFrom = this.snapshot = undefined;
26788        }
26789        // Only run on root
26790        resetTree() {
26791            this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
26792            this.root.nodes.forEach(clearMeasurements);
26793            this.root.sharedNodes.clear();
26794        }
26795    };
26796}
26797function updateLayout(node) {
26798    node.updateLayout();
26799}
26800function notifyLayoutUpdate(node) {
26801    var _a;
26802    const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
26803    if (node.isLead() &&
26804        node.layout &&
26805        snapshot &&
26806        node.hasListeners("didUpdate")) {
26807        const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
26808        const { animationType } = node.options;
26809        const isShared = snapshot.source !== node.layout.source;
26810        // TODO Maybe we want to also resize the layout snapshot so we don't trigger
26811        // animations for instance if layout="size" and an element has only changed position
26812        if (animationType === "size") {
26813            eachAxis((axis) => {
26814                const axisSnapshot = isShared
26815                    ? snapshot.measuredBox[axis]
26816                    : snapshot.layoutBox[axis];
26817                const length = calcLength(axisSnapshot);
26818                axisSnapshot.min = layout[axis].min;
26819                axisSnapshot.max = axisSnapshot.min + length;
26820            });
26821        }
26822        else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
26823            eachAxis((axis) => {
26824                const axisSnapshot = isShared
26825                    ? snapshot.measuredBox[axis]
26826                    : snapshot.layoutBox[axis];
26827                const length = calcLength(layout[axis]);
26828                axisSnapshot.max = axisSnapshot.min + length;
26829                /**
26830                 * Ensure relative target gets resized and rerendererd
26831                 */
26832                if (node.relativeTarget && !node.currentAnimation) {
26833                    node.isProjectionDirty = true;
26834                    node.relativeTarget[axis].max =
26835                        node.relativeTarget[axis].min + length;
26836                }
26837            });
26838        }
26839        const layoutDelta = createDelta();
26840        calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
26841        const visualDelta = createDelta();
26842        if (isShared) {
26843            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
26844        }
26845        else {
26846            calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
26847        }
26848        const hasLayoutChanged = !isDeltaZero(layoutDelta);
26849        let hasRelativeTargetChanged = false;
26850        if (!node.resumeFrom) {
26851            const relativeParent = node.getClosestProjectingParent();
26852            /**
26853             * If the relativeParent is itself resuming from a different element then
26854             * the relative snapshot is not relavent
26855             */
26856            if (relativeParent && !relativeParent.resumeFrom) {
26857                const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
26858                if (parentSnapshot && parentLayout) {
26859                    const relativeSnapshot = createBox();
26860                    calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
26861                    const relativeLayout = createBox();
26862                    calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
26863                    if (!boxEquals(relativeSnapshot, relativeLayout)) {
26864                        hasRelativeTargetChanged = true;
26865                    }
26866                    if (relativeParent.options.layoutRoot) {
26867                        node.relativeTarget = relativeLayout;
26868                        node.relativeTargetOrigin = relativeSnapshot;
26869                        node.relativeParent = relativeParent;
26870                    }
26871                }
26872            }
26873        }
26874        node.notifyListeners("didUpdate", {
26875            layout,
26876            snapshot,
26877            delta: visualDelta,
26878            layoutDelta,
26879            hasLayoutChanged,
26880            hasRelativeTargetChanged,
26881        });
26882    }
26883    else if (node.isLead()) {
26884        const { onExitComplete } = node.options;
26885        onExitComplete && onExitComplete();
26886    }
26887    /**
26888     * Clearing transition
26889     * TODO: Investigate why this transition is being passed in as {type: false } from Framer
26890     * and why we need it at all
26891     */
26892    node.options.transition = undefined;
26893}
26894function propagateDirtyNodes(node) {
26895    /**
26896     * Increase debug counter for nodes encountered this frame
26897     */
26898    projectionFrameData.totalNodes++;
26899    if (!node.parent)
26900        return;
26901    /**
26902     * If this node isn't projecting, propagate isProjectionDirty. It will have
26903     * no performance impact but it will allow the next child that *is* projecting
26904     * but *isn't* dirty to just check its parent to see if *any* ancestor needs
26905     * correcting.
26906     */
26907    if (!node.isProjecting()) {
26908        node.isProjectionDirty = node.parent.isProjectionDirty;
26909    }
26910    /**
26911     * Propagate isSharedProjectionDirty and isTransformDirty
26912     * throughout the whole tree. A future revision can take another look at
26913     * this but for safety we still recalcualte shared nodes.
26914     */
26915    node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
26916        node.parent.isProjectionDirty ||
26917        node.parent.isSharedProjectionDirty));
26918    node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
26919}
26920function cleanDirtyNodes(node) {
26921    node.isProjectionDirty =
26922        node.isSharedProjectionDirty =
26923            node.isTransformDirty =
26924                false;
26925}
26926function clearSnapshot(node) {
26927    node.clearSnapshot();
26928}
26929function clearMeasurements(node) {
26930    node.clearMeasurements();
26931}
26932function clearIsLayoutDirty(node) {
26933    node.isLayoutDirty = false;
26934}
26935function resetTransformStyle(node) {
26936    const { visualElement } = node.options;
26937    if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
26938        visualElement.notify("BeforeLayoutMeasure");
26939    }
26940    node.resetTransform();
26941}
26942function finishAnimation(node) {
26943    node.finishAnimation();
26944    node.targetDelta = node.relativeTarget = node.target = undefined;
26945    node.isProjectionDirty = true;
26946}
26947function resolveTargetDelta(node) {
26948    node.resolveTargetDelta();
26949}
26950function calcProjection(node) {
26951    node.calcProjection();
26952}
26953function resetRotation(node) {
26954    node.resetRotation();
26955}
26956function removeLeadSnapshots(stack) {
26957    stack.removeLeadSnapshot();
26958}
26959function mixAxisDelta(output, delta, p) {
26960    output.translate = mix(delta.translate, 0, p);
26961    output.scale = mix(delta.scale, 1, p);
26962    output.origin = delta.origin;
26963    output.originPoint = delta.originPoint;
26964}
26965function mixAxis(output, from, to, p) {
26966    output.min = mix(from.min, to.min, p);
26967    output.max = mix(from.max, to.max, p);
26968}
26969function mixBox(output, from, to, p) {
26970    mixAxis(output.x, from.x, to.x, p);
26971    mixAxis(output.y, from.y, to.y, p);
26972}
26973function hasOpacityCrossfade(node) {
26974    return (node.animationValues && node.animationValues.opacityExit !== undefined);
26975}
26976const defaultLayoutTransition = {
26977    duration: 0.45,
26978    ease: [0.4, 0, 0.1, 1],
26979};
26980let roundPoint;
26981const create_projection_node_isWebKit = () => navigator.userAgent.toLowerCase().includes("applewebkit/");
26982function roundAxis(axis) {
26983    // Round to the nearest .5 pixels to support subpixel layouts
26984    axis.min = roundPoint(axis.min);
26985    axis.max = roundPoint(axis.max);
26986}
26987function roundBox(box) {
26988    // Detect browser only client-side
26989    if (!roundPoint) {
26990        roundPoint = create_projection_node_isWebKit()
26991            ? Math.round
26992            : (point) => Math.round(point * 2) / 2;
26993    }
26994    roundAxis(box.x);
26995    roundAxis(box.y);
26996}
26997function shouldAnimatePositionOnly(animationType, snapshot, layout) {
26998    return (animationType === "position" ||
26999        (animationType === "preserve-aspect" &&
27000            !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
27001}
27002
27003
27004
27005;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs
27006
27007
27008
27009const DocumentProjectionNode = createProjectionNode({
27010    attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
27011    measureScroll: () => ({
27012        x: document.documentElement.scrollLeft || document.body.scrollLeft,
27013        y: document.documentElement.scrollTop || document.body.scrollTop,
27014    }),
27015    checkIsScrollRoot: () => true,
27016});
27017
27018
27019
27020;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs
27021
27022
27023
27024const rootProjectionNode = {
27025    current: undefined,
27026};
27027const HTMLProjectionNode = createProjectionNode({
27028    measureScroll: (instance) => ({
27029        x: instance.scrollLeft,
27030        y: instance.scrollTop,
27031    }),
27032    defaultParent: () => {
27033        if (!rootProjectionNode.current) {
27034            const documentNode = new DocumentProjectionNode({});
27035            documentNode.mount(window);
27036            documentNode.setOptions({ layoutScroll: true });
27037            rootProjectionNode.current = documentNode;
27038        }
27039        return rootProjectionNode.current;
27040    },
27041    resetTransform: (instance, value) => {
27042        instance.style.transform = value !== undefined ? value : "none";
27043    },
27044    checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
27045});
27046
27047
27048
27049;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/drag.mjs
27050
27051
27052
27053
27054
27055const drag = {
27056    pan: {
27057        Feature: PanGesture,
27058    },
27059    drag: {
27060        Feature: DragGesture,
27061        ProjectionNode: HTMLProjectionNode,
27062        MeasureLayout: MeasureLayout,
27063    },
27064};
27065
27066
27067
27068;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs
27069
27070
27071
27072/**
27073 * Parse Framer's special CSS variable format into a CSS token and a fallback.
27074 *
27075 * ```
27076 * `var(--foo, #fff)` => [`--foo`, '#fff']
27077 * ```
27078 *
27079 * @param current
27080 */
27081const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
27082function parseCSSVariable(current) {
27083    const match = splitCSSVariableRegex.exec(current);
27084    if (!match)
27085        return [,];
27086    const [, token, fallback] = match;
27087    return [token, fallback];
27088}
27089const maxDepth = 4;
27090function getVariableValue(current, element, depth = 1) {
27091    errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
27092    const [token, fallback] = parseCSSVariable(current);
27093    // No CSS variable detected
27094    if (!token)
27095        return;
27096    // Attempt to read this CSS variable off the element
27097    const resolved = window.getComputedStyle(element).getPropertyValue(token);
27098    if (resolved) {
27099        return resolved.trim();
27100    }
27101    else if (isCSSVariableToken(fallback)) {
27102        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
27103        return getVariableValue(fallback, element, depth + 1);
27104    }
27105    else {
27106        return fallback;
27107    }
27108}
27109/**
27110 * Resolve CSS variables from
27111 *
27112 * @internal
27113 */
vendor: 14,450 bytes, lines 27114-27478
27114function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
27115    const element = visualElement.current;
27116    if (!(element instanceof Element))
27117        return { target, transitionEnd };
27118    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
27119    // only if they change but I think this reads clearer and this isn't a performance-critical path.
27120    if (transitionEnd) {
27121        transitionEnd = { ...transitionEnd };
27122    }
27123    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
27124    visualElement.values.forEach((value) => {
27125        const current = value.get();
27126        if (!isCSSVariableToken(current))
27127            return;
27128        const resolved = getVariableValue(current, element);
27129        if (resolved)
27130            value.set(resolved);
27131    });
27132    // Cycle through every target property and resolve CSS variables. Currently
27133    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
27134    for (const key in target) {
27135        const current = target[key];
27136        if (!isCSSVariableToken(current))
27137            continue;
27138        const resolved = getVariableValue(current, element);
27139        if (!resolved)
27140            continue;
27141        // Clone target if it hasn't already been
27142        target[key] = resolved;
27143        if (!transitionEnd)
27144            transitionEnd = {};
27145        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
27146        // CSS variable. This will ensure that after the animation the component will reflect
27147        // changes in the value of the CSS variable.
27148        if (transitionEnd[key] === undefined) {
27149            transitionEnd[key] = current;
27150        }
27151    }
27152    return { target, transitionEnd };
27153}
27154
27155
27156
27157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs
27158
27159
27160
27161
27162
27163
27164
27165
27166const positionalKeys = new Set([
27167    "width",
27168    "height",
27169    "top",
27170    "left",
27171    "right",
27172    "bottom",
27173    "x",
27174    "y",
27175    "translateX",
27176    "translateY",
27177]);
27178const isPositionalKey = (key) => positionalKeys.has(key);
27179const hasPositionalKey = (target) => {
27180    return Object.keys(target).some(isPositionalKey);
27181};
27182const isNumOrPxType = (v) => v === number || v === px;
27183const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
27184const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
27185    if (transform === "none" || !transform)
27186        return 0;
27187    const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
27188    if (matrix3d) {
27189        return getPosFromMatrix(matrix3d[1], pos3);
27190    }
27191    else {
27192        const matrix = transform.match(/^matrix\((.+)\)$/);
27193        if (matrix) {
27194            return getPosFromMatrix(matrix[1], pos2);
27195        }
27196        else {
27197            return 0;
27198        }
27199    }
27200};
27201const transformKeys = new Set(["x", "y", "z"]);
27202const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
27203function removeNonTranslationalTransform(visualElement) {
27204    const removedTransforms = [];
27205    nonTranslationalTransformKeys.forEach((key) => {
27206        const value = visualElement.getValue(key);
27207        if (value !== undefined) {
27208            removedTransforms.push([key, value.get()]);
27209            value.set(key.startsWith("scale") ? 1 : 0);
27210        }
27211    });
27212    // Apply changes to element before measurement
27213    if (removedTransforms.length)
27214        visualElement.render();
27215    return removedTransforms;
27216}
27217const positionalValues = {
27218    // Dimensions
27219    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
27220    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
27221    top: (_bbox, { top }) => parseFloat(top),
27222    left: (_bbox, { left }) => parseFloat(left),
27223    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
27224    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
27225    // Transform
27226    x: getTranslateFromMatrix(4, 13),
27227    y: getTranslateFromMatrix(5, 14),
27228};
27229// Alias translate longform names
27230positionalValues.translateX = positionalValues.x;
27231positionalValues.translateY = positionalValues.y;
27232const convertChangedValueTypes = (target, visualElement, changedKeys) => {
27233    const originBbox = visualElement.measureViewportBox();
27234    const element = visualElement.current;
27235    const elementComputedStyle = getComputedStyle(element);
27236    const { display } = elementComputedStyle;
27237    const origin = {};
27238    // If the element is currently set to display: "none", make it visible before
27239    // measuring the target bounding box
27240    if (display === "none") {
27241        visualElement.setStaticValue("display", target.display || "block");
27242    }
27243    /**
27244     * Record origins before we render and update styles
27245     */
27246    changedKeys.forEach((key) => {
27247        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
27248    });
27249    // Apply the latest values (as set in checkAndConvertChangedValueTypes)
27250    visualElement.render();
27251    const targetBbox = visualElement.measureViewportBox();
27252    changedKeys.forEach((key) => {
27253        // Restore styles to their **calculated computed style**, not their actual
27254        // originally set style. This allows us to animate between equivalent pixel units.
27255        const value = visualElement.getValue(key);
27256        value && value.jump(origin[key]);
27257        target[key] = positionalValues[key](targetBbox, elementComputedStyle);
27258    });
27259    return target;
27260};
27261const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
27262    target = { ...target };
27263    transitionEnd = { ...transitionEnd };
27264    const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
27265    // We want to remove any transform values that could affect the element's bounding box before
27266    // it's measured. We'll reapply these later.
27267    let removedTransformValues = [];
27268    let hasAttemptedToRemoveTransformValues = false;
27269    const changedValueTypeKeys = [];
27270    targetPositionalKeys.forEach((key) => {
27271        const value = visualElement.getValue(key);
27272        if (!visualElement.hasValue(key))
27273            return;
27274        let from = origin[key];
27275        let fromType = findDimensionValueType(from);
27276        const to = target[key];
27277        let toType;
27278        // TODO: The current implementation of this basically throws an error
27279        // if you try and do value conversion via keyframes. There's probably
27280        // a way of doing this but the performance implications would need greater scrutiny,
27281        // as it'd be doing multiple resize-remeasure operations.
27282        if (isKeyframesTarget(to)) {
27283            const numKeyframes = to.length;
27284            const fromIndex = to[0] === null ? 1 : 0;
27285            from = to[fromIndex];
27286            fromType = findDimensionValueType(from);
27287            for (let i = fromIndex; i < numKeyframes; i++) {
27288                /**
27289                 * Don't allow wildcard keyframes to be used to detect
27290                 * a difference in value types.
27291                 */
27292                if (to[i] === null)
27293                    break;
27294                if (!toType) {
27295                    toType = findDimensionValueType(to[i]);
27296                    errors_invariant(toType === fromType ||
27297                        (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
27298                }
27299                else {
27300                    errors_invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
27301                }
27302            }
27303        }
27304        else {
27305            toType = findDimensionValueType(to);
27306        }
27307        if (fromType !== toType) {
27308            // If they're both just number or px, convert them both to numbers rather than
27309            // relying on resize/remeasure to convert (which is wasteful in this situation)
27310            if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
27311                const current = value.get();
27312                if (typeof current === "string") {
27313                    value.set(parseFloat(current));
27314                }
27315                if (typeof to === "string") {
27316                    target[key] = parseFloat(to);
27317                }
27318                else if (Array.isArray(to) && toType === px) {
27319                    target[key] = to.map(parseFloat);
27320                }
27321            }
27322            else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
27323                (toType === null || toType === void 0 ? void 0 : toType.transform) &&
27324                (from === 0 || to === 0)) {
27325                // If one or the other value is 0, it's safe to coerce it to the
27326                // type of the other without measurement
27327                if (from === 0) {
27328                    value.set(toType.transform(from));
27329                }
27330                else {
27331                    target[key] = fromType.transform(to);
27332                }
27333            }
27334            else {
27335                // If we're going to do value conversion via DOM measurements, we first
27336                // need to remove non-positional transform values that could affect the bbox measurements.
27337                if (!hasAttemptedToRemoveTransformValues) {
27338                    removedTransformValues =
27339                        removeNonTranslationalTransform(visualElement);
27340                    hasAttemptedToRemoveTransformValues = true;
27341                }
27342                changedValueTypeKeys.push(key);
27343                transitionEnd[key] =
27344                    transitionEnd[key] !== undefined
27345                        ? transitionEnd[key]
27346                        : target[key];
27347                value.jump(to);
27348            }
27349        }
27350    });
27351    if (changedValueTypeKeys.length) {
27352        const scrollY = changedValueTypeKeys.indexOf("height") >= 0
27353            ? window.pageYOffset
27354            : null;
27355        const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
27356        // If we removed transform values, reapply them before the next render
27357        if (removedTransformValues.length) {
27358            removedTransformValues.forEach(([key, value]) => {
27359                visualElement.getValue(key).set(value);
27360            });
27361        }
27362        // Reapply original values
27363        visualElement.render();
27364        // Restore scroll position
27365        if (is_browser_isBrowser && scrollY !== null) {
27366            window.scrollTo({ top: scrollY });
27367        }
27368        return { target: convertedTarget, transitionEnd };
27369    }
27370    else {
27371        return { target, transitionEnd };
27372    }
27373};
27374/**
27375 * Convert value types for x/y/width/height/top/left/bottom/right
27376 *
27377 * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
27378 *
27379 * @internal
27380 */
27381function unitConversion(visualElement, target, origin, transitionEnd) {
27382    return hasPositionalKey(target)
27383        ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
27384        : { target, transitionEnd };
27385}
27386
27387
27388
27389;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs
27390
27391
27392
27393/**
27394 * Parse a DOM variant to make it animatable. This involves resolving CSS variables
27395 * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
27396 */
27397const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
27398    const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
27399    target = resolved.target;
27400    transitionEnd = resolved.transitionEnd;
27401    return unitConversion(visualElement, target, origin, transitionEnd);
27402};
27403
27404
27405
27406;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
27407// Does this device prefer reduced motion? Returns `null` server-side.
27408const prefersReducedMotion = { current: null };
27409const hasReducedMotionListener = { current: false };
27410
27411
27412
27413;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
27414
27415
27416
27417function initPrefersReducedMotion() {
27418    hasReducedMotionListener.current = true;
27419    if (!is_browser_isBrowser)
27420        return;
27421    if (window.matchMedia) {
27422        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
27423        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
27424        motionMediaQuery.addListener(setReducedMotionPreferences);
27425        setReducedMotionPreferences();
27426    }
27427    else {
27428        prefersReducedMotion.current = false;
27429    }
27430}
27431
27432
27433
27434;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/motion-values.mjs
27435
27436
27437
27438
27439
27440function updateMotionValuesFromProps(element, next, prev) {
27441    const { willChange } = next;
27442    for (const key in next) {
27443        const nextValue = next[key];
27444        const prevValue = prev[key];
27445        if (isMotionValue(nextValue)) {
27446            /**
27447             * If this is a motion value found in props or style, we want to add it
27448             * to our visual element's motion value map.
27449             */
27450            element.addValue(key, nextValue);
27451            if (isWillChangeMotionValue(willChange)) {
27452                willChange.add(key);
27453            }
27454            /**
27455             * Check the version of the incoming motion value with this version
27456             * and warn against mismatches.
27457             */
27458            if (false) {}
27459        }
27460        else if (isMotionValue(prevValue)) {
27461            /**
27462             * If we're swapping from a motion value to a static value,
27463             * create a new motion value from that
27464             */
27465            element.addValue(key, motionValue(nextValue, { owner: element }));
27466            if (isWillChangeMotionValue(willChange)) {
27467                willChange.remove(key);
27468            }
27469        }
27470        else if (prevValue !== nextValue) {
27471            /**
27472             * If this is a flat value that has changed, update the motion value
27473             * or create one if it doesn't exist. We only want to do this if we're
27474             * not handling the value with our animation state.
27475             */
27476            if (element.hasValue(key)) {
27477                const existingValue = element.getValue(key);
27478                // TODO: Only update values that aren't being animated or even looked at
vendor: 6,472 bytes, lines 27479-27658
27479                !existingValue.hasAnimated && existingValue.set(nextValue);
27480            }
27481            else {
27482                const latestValue = element.getStaticValue(key);
27483                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
27484            }
27485        }
27486    }
27487    // Handle removed values
27488    for (const key in prev) {
27489        if (next[key] === undefined)
27490            element.removeValue(key);
27491    }
27492    return next;
27493}
27494
27495
27496
27497;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/store.mjs
27498const visualElementStore = new WeakMap();
27499
27500
27501
27502;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/VisualElement.mjs
27503
27504
27505
27506
27507
27508
27509
27510
27511
27512
27513
27514
27515
27516
27517
27518
27519
27520
27521
27522
27523const featureNames = Object.keys(featureDefinitions);
27524const numFeatures = featureNames.length;
27525const propEventHandlers = [
27526    "AnimationStart",
27527    "AnimationComplete",
27528    "Update",
27529    "BeforeLayoutMeasure",
27530    "LayoutMeasure",
27531    "LayoutAnimationStart",
27532    "LayoutAnimationComplete",
27533];
27534const numVariantProps = variantProps.length;
27535/**
27536 * A VisualElement is an imperative abstraction around UI elements such as
27537 * HTMLElement, SVGElement, Three.Object3D etc.
27538 */
27539class VisualElement {
27540    constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
27541        /**
27542         * A reference to the current underlying Instance, e.g. a HTMLElement
27543         * or Three.Mesh etc.
27544         */
27545        this.current = null;
27546        /**
27547         * A set containing references to this VisualElement's children.
27548         */
27549        this.children = new Set();
27550        /**
27551         * Determine what role this visual element should take in the variant tree.
27552         */
27553        this.isVariantNode = false;
27554        this.isControllingVariants = false;
27555        /**
27556         * Decides whether this VisualElement should animate in reduced motion
27557         * mode.
27558         *
27559         * TODO: This is currently set on every individual VisualElement but feels
27560         * like it could be set globally.
27561         */
27562        this.shouldReduceMotion = null;
27563        /**
27564         * A map of all motion values attached to this visual element. Motion
27565         * values are source of truth for any given animated value. A motion
27566         * value might be provided externally by the component via props.
27567         */
27568        this.values = new Map();
27569        /**
27570         * Cleanup functions for active features (hover/tap/exit etc)
27571         */
27572        this.features = {};
27573        /**
27574         * A map of every subscription that binds the provided or generated
27575         * motion values onChange listeners to this visual element.
27576         */
27577        this.valueSubscriptions = new Map();
27578        /**
27579         * A reference to the previously-provided motion values as returned
27580         * from scrapeMotionValuesFromProps. We use the keys in here to determine
27581         * if any motion values need to be removed after props are updated.
27582         */
27583        this.prevMotionValues = {};
27584        /**
27585         * An object containing a SubscriptionManager for each active event.
27586         */
27587        this.events = {};
27588        /**
27589         * An object containing an unsubscribe function for each prop event subscription.
27590         * For example, every "Update" event can have multiple subscribers via
27591         * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
27592         */
27593        this.propEventSubscriptions = {};
27594        this.notifyUpdate = () => this.notify("Update", this.latestValues);
27595        this.render = () => {
27596            if (!this.current)
27597                return;
27598            this.triggerBuild();
27599            this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
27600        };
27601        this.scheduleRender = () => frame_frame.render(this.render, false, true);
27602        const { latestValues, renderState } = visualState;
27603        this.latestValues = latestValues;
27604        this.baseTarget = { ...latestValues };
27605        this.initialValues = props.initial ? { ...latestValues } : {};
27606        this.renderState = renderState;
27607        this.parent = parent;
27608        this.props = props;
27609        this.presenceContext = presenceContext;
27610        this.depth = parent ? parent.depth + 1 : 0;
27611        this.reducedMotionConfig = reducedMotionConfig;
27612        this.options = options;
27613        this.isControllingVariants = isControllingVariants(props);
27614        this.isVariantNode = isVariantNode(props);
27615        if (this.isVariantNode) {
27616            this.variantChildren = new Set();
27617        }
27618        this.manuallyAnimateOnMount = Boolean(parent && parent.current);
27619        /**
27620         * Any motion values that are provided to the element when created
27621         * aren't yet bound to the element, as this would technically be impure.
27622         * However, we iterate through the motion values and set them to the
27623         * initial values for this component.
27624         *
27625         * TODO: This is impure and we should look at changing this to run on mount.
27626         * Doing so will break some tests but this isn't neccessarily a breaking change,
27627         * more a reflection of the test.
27628         */
27629        const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});
27630        for (const key in initialMotionValues) {
27631            const value = initialMotionValues[key];
27632            if (latestValues[key] !== undefined && isMotionValue(value)) {
27633                value.set(latestValues[key], false);
27634                if (isWillChangeMotionValue(willChange)) {
27635                    willChange.add(key);
27636                }
27637            }
27638        }
27639    }
27640    /**
27641     * This method takes React props and returns found MotionValues. For example, HTML
27642     * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
27643     *
27644     * This isn't an abstract method as it needs calling in the constructor, but it is
27645     * intended to be one.
27646     */
27647    scrapeMotionValuesFromProps(_props, _prevProps) {
27648        return {};
27649    }
27650    mount(instance) {
27651        this.current = instance;
27652        visualElementStore.set(instance, this);
27653        if (this.projection && !this.projection.instance) {
27654            this.projection.mount(instance);
27655        }
27656        if (this.parent && this.isVariantNode && !this.isControllingVariants) {
27657            this.removeFromVariantTree = this.parent.addVariantChild(this);
27658        }
27659        this.values.forEach((value, key) => this.bindToMotionValue(key, value));
27660        if (!hasReducedMotionListener.current) {
27661            initPrefersReducedMotion();
27662        }
27663        this.shouldReduceMotion =
27664            this.reducedMotionConfig === "never"
27665                ? false
27666                : this.reducedMotionConfig === "always"
27667                    ? true
27668                    : prefersReducedMotion.current;
27669        if (false) {}
27670        if (this.parent)
27671            this.parent.children.add(this);
27672        this.update(this.props, this.presenceContext);
27673    }
27674    unmount() {
27675        visualElementStore["delete"](this.current);
27676        this.projection && this.projection.unmount();
27677        cancelFrame(this.notifyUpdate);
27678        cancelFrame(this.render);
27679        this.valueSubscriptions.forEach((remove) => remove());
27680        this.removeFromVariantTree && this.removeFromVariantTree();
27681        this.parent && this.parent.children.delete(this);
27682        for (const key in this.events) {
27683            this.events[key].clear();
27684        }
27685        for (const key in this.features) {
27686            this.features[key].unmount();
27687        }
27688        this.current = null;
27689    }
27690    bindToMotionValue(key, value) {
27691        const valueIsTransform = transformProps.has(key);
27692        const removeOnChange = value.on("change", (latestValue) => {
27693            this.latestValues[key] = latestValue;
27694            this.props.onUpdate &&
27695                frame_frame.update(this.notifyUpdate, false, true);
27696            if (valueIsTransform && this.projection) {
27697                this.projection.isTransformDirty = true;
27698            }
27699        });
27700        const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
27701        this.valueSubscriptions.set(key, () => {
27702            removeOnChange();
27703            removeOnRenderRequest();
27704        });
27705    }
27706    sortNodePosition(other) {
27707        /**
27708         * If these nodes aren't even of the same type we can't compare their depth.
27709         */
27710        if (!this.current ||
27711            !this.sortInstanceNodePosition ||
27712            this.type !== other.type) {
27713            return 0;
27714        }
27715        return this.sortInstanceNodePosition(this.current, other.current);
27716    }
27717    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
27718        let ProjectionNodeConstructor;
27719        let MeasureLayout;
27720        /**
27721         * If we're in development mode, check to make sure we're not rendering a motion component
27722         * as a child of LazyMotion, as this will break the file-size benefits of using it.
27723         */
27724        if (false) {}
27725        for (let i = 0; i < numFeatures; i++) {
27726            const name = featureNames[i];
27727            const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
27728            if (ProjectionNode)
27729                ProjectionNodeConstructor = ProjectionNode;
27730            if (isEnabled(renderedProps)) {
27731                if (!this.features[name] && FeatureConstructor) {
27732                    this.features[name] = new FeatureConstructor(this);
27733                }
27734                if (MeasureLayoutComponent) {
27735                    MeasureLayout = MeasureLayoutComponent;
27736                }
27737            }
27738        }
27739        if (!this.projection && ProjectionNodeConstructor) {
27740            this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);
27741            const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
27742            this.projection.setOptions({
27743                layoutId,
27744                layout,
27745                alwaysMeasureLayout: Boolean(drag) ||
27746                    (dragConstraints && is_ref_object_isRefObject(dragConstraints)),
27747                visualElement: this,
27748                scheduleRender: () => this.scheduleRender(),
27749                /**
27750                 * TODO: Update options in an effect. This could be tricky as it'll be too late
27751                 * to update by the time layout animations run.
27752                 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
27753                 * ensuring it gets called if there's no potential layout animations.
27754                 *
27755                 */
27756                animationType: typeof layout === "string" ? layout : "both",
27757                initialPromotionConfig: initialLayoutGroupConfig,
27758                layoutScroll,
27759                layoutRoot,
27760            });
27761        }
27762        return MeasureLayout;
27763    }
27764    updateFeatures() {
27765        for (const key in this.features) {
27766            const feature = this.features[key];
27767            if (feature.isMounted) {
27768                feature.update();
27769            }
27770            else {
27771                feature.mount();
27772                feature.isMounted = true;
27773            }
27774        }
27775    }
27776    triggerBuild() {
27777        this.build(this.renderState, this.latestValues, this.options, this.props);
27778    }
27779    /**
27780     * Measure the current viewport box with or without transforms.
27781     * Only measures axis-aligned boxes, rotate and skew must be manually
27782     * removed with a re-render to work.
27783     */
27784    measureViewportBox() {
27785        return this.current
27786            ? this.measureInstanceViewportBox(this.current, this.props)
27787            : createBox();
27788    }
27789    getStaticValue(key) {
27790        return this.latestValues[key];
27791    }
27792    setStaticValue(key, value) {
27793        this.latestValues[key] = value;
27794    }
27795    /**
27796     * Make a target animatable by Popmotion. For instance, if we're
27797     * trying to animate width from 100px to 100vw we need to measure 100vw
27798     * in pixels to determine what we really need to animate to. This is also
27799     * pluggable to support Framer's custom value types like Color,
27800     * and CSS variables.
27801     */
27802    makeTargetAnimatable(target, canMutate = true) {
27803        return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
27804    }
27805    /**
27806     * Update the provided props. Ensure any newly-added motion values are
27807     * added to our map, old ones removed, and listeners updated.
27808     */
27809    update(props, presenceContext) {
27810        if (props.transformTemplate || this.props.transformTemplate) {
27811            this.scheduleRender();
27812        }
27813        this.prevProps = this.props;
27814        this.props = props;
27815        this.prevPresenceContext = this.presenceContext;
27816        this.presenceContext = presenceContext;
27817        /**
27818         * Update prop event handlers ie onAnimationStart, onAnimationComplete
27819         */
27820        for (let i = 0; i < propEventHandlers.length; i++) {
27821            const key = propEventHandlers[i];
27822            if (this.propEventSubscriptions[key]) {
27823                this.propEventSubscriptions[key]();
27824                delete this.propEventSubscriptions[key];
27825            }
27826            const listener = props["on" + key];
27827            if (listener) {
27828                this.propEventSubscriptions[key] = this.on(key, listener);
27829            }
27830        }
27831        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
27832        if (this.handleChildMotionValue) {
27833            this.handleChildMotionValue();
27834        }
27835    }
27836    getProps() {
27837        return this.props;
27838    }
27839    /**
27840     * Returns the variant definition with a given name.
27841     */
27842    getVariant(name) {
27843        return this.props.variants ? this.props.variants[name] : undefined;
27844    }
27845    /**
27846     * Returns the defined default transition on this component.
27847     */
27848    getDefaultTransition() {
27849        return this.props.transition;
27850    }
27851    getTransformPagePoint() {
27852        return this.props.transformPagePoint;
27853    }
27854    getClosestVariantNode() {
27855        return this.isVariantNode
27856            ? this
27857            : this.parent
27858                ? this.parent.getClosestVariantNode()
27859                : undefined;
27860    }
27861    getVariantContext(startAtParent = false) {
27862        if (startAtParent) {
27863            return this.parent ? this.parent.getVariantContext() : undefined;
27864        }
27865        if (!this.isControllingVariants) {
27866            const context = this.parent
27867                ? this.parent.getVariantContext() || {}
27868                : {};
27869            if (this.props.initial !== undefined) {
27870                context.initial = this.props.initial;
27871            }
27872            return context;
27873        }
27874        const context = {};
27875        for (let i = 0; i < numVariantProps; i++) {
27876            const name = variantProps[i];
27877            const prop = this.props[name];
27878            if (isVariantLabel(prop) || prop === false) {
27879                context[name] = prop;
27880            }
27881        }
27882        return context;
27883    }
27884    /**
27885     * Add a child visual element to our set of children.
27886     */
27887    addVariantChild(child) {
27888        const closestVariantNode = this.getClosestVariantNode();
27889        if (closestVariantNode) {
27890            closestVariantNode.variantChildren &&
27891                closestVariantNode.variantChildren.add(child);
27892            return () => closestVariantNode.variantChildren.delete(child);
27893        }
27894    }
27895    /**
27896     * Add a motion value and bind it to this visual element.
27897     */
27898    addValue(key, value) {
27899        // Remove existing value if it exists
27900        if (value !== this.values.get(key)) {
27901            this.removeValue(key);
27902            this.bindToMotionValue(key, value);
27903        }
27904        this.values.set(key, value);
27905        this.latestValues[key] = value.get();
27906    }
27907    /**
27908     * Remove a motion value and unbind any active subscriptions.
27909     */
27910    removeValue(key) {
27911        this.values.delete(key);
27912        const unsubscribe = this.valueSubscriptions.get(key);
27913        if (unsubscribe) {
27914            unsubscribe();
27915            this.valueSubscriptions.delete(key);
27916        }
27917        delete this.latestValues[key];
27918        this.removeValueFromRenderState(key, this.renderState);
27919    }
27920    /**
27921     * Check whether we have a motion value for this key
27922     */
27923    hasValue(key) {
27924        return this.values.has(key);
27925    }
27926    getValue(key, defaultValue) {
27927        if (this.props.values && this.props.values[key]) {
27928            return this.props.values[key];
27929        }
27930        let value = this.values.get(key);
27931        if (value === undefined && defaultValue !== undefined) {
27932            value = motionValue(defaultValue, { owner: this });
27933            this.addValue(key, value);
27934        }
27935        return value;
27936    }
27937    /**
27938     * If we're trying to animate to a previously unencountered value,
27939     * we need to check for it in our state and as a last resort read it
27940     * directly from the instance (which might have performance implications).
27941     */
27942    readValue(key) {
27943        var _a;
27944        return this.latestValues[key] !== undefined || !this.current
27945            ? this.latestValues[key]
27946            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
27947    }
27948    /**
27949     * Set the base target to later animate back to. This is currently
27950     * only hydrated on creation and when we first read a value.
27951     */
27952    setBaseTarget(key, value) {
27953        this.baseTarget[key] = value;
27954    }
27955    /**
27956     * Find the base target for a value thats been removed from all animation
27957     * props.
27958     */
27959    getBaseTarget(key) {
27960        var _a;
27961        const { initial } = this.props;
27962        const valueFromInitial = typeof initial === "string" || typeof initial === "object"
27963            ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
27964            : undefined;
27965        /**
27966         * If this value still exists in the current initial variant, read that.
27967         */
27968        if (initial && valueFromInitial !== undefined) {
27969            return valueFromInitial;
27970        }
27971        /**
27972         * Alternatively, if this VisualElement config has defined a getBaseTarget
27973         * so we can read the value from an alternative source, try that.
27974         */
27975        const target = this.getBaseTargetFromProps(this.props, key);
27976        if (target !== undefined && !isMotionValue(target))
27977            return target;
27978        /**
27979         * If the value was initially defined on initial, but it doesn't any more,
27980         * return undefined. Otherwise return the value as initially read from the DOM.
27981         */
27982        return this.initialValues[key] !== undefined &&
27983            valueFromInitial === undefined
27984            ? undefined
27985            : this.baseTarget[key];
27986    }
27987    on(eventName, callback) {
27988        if (!this.events[eventName]) {
27989            this.events[eventName] = new SubscriptionManager();
27990        }
27991        return this.events[eventName].add(callback);
27992    }
27993    notify(eventName, ...args) {
27994        if (this.events[eventName]) {
27995            this.events[eventName].notify(...args);
27996        }
27997    }
27998}
27999
28000
28001
28002;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
28003
28004
28005
28006
28007class DOMVisualElement extends VisualElement {
28008    sortInstanceNodePosition(a, b) {
28009        /**
28010         * compareDocumentPosition returns a bitmask, by using the bitwise &
28011         * we're returning true if 2 in that bitmask is set to true. 2 is set
28012         * to true if b preceeds a.
28013         */
28014        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
28015    }
28016    getBaseTargetFromProps(props, key) {
28017        return props.style ? props.style[key] : undefined;
28018    }
28019    removeValueFromRenderState(key, { vars, style }) {
28020        delete vars[key];
28021        delete style[key];
28022    }
28023    makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
28024        let origin = getOrigin(target, transition || {}, this);
28025        /**
28026         * If Framer has provided a function to convert `Color` etc value types, convert them
28027         */
28028        if (transformValues) {
28029            if (transitionEnd)
28030                transitionEnd = transformValues(transitionEnd);
28031            if (target)
28032                target = transformValues(target);
28033            if (origin)
28034                origin = transformValues(origin);
28035        }
28036        if (isMounted) {
28037            checkTargetForNewValues(this, target, origin);
28038            const parsed = parseDomVariant(this, target, origin, transitionEnd);
28039            transitionEnd = parsed.transitionEnd;
28040            target = parsed.target;
28041        }
28042        return {
28043            transition,
28044            transitionEnd,
28045            ...target,
28046        };
28047    }
28048}
28049
28050
28051
28052;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
28053
28054
28055
28056
28057
28058
28059
28060
28061
28062
28063function HTMLVisualElement_getComputedStyle(element) {
28064    return window.getComputedStyle(element);
28065}
28066class HTMLVisualElement extends DOMVisualElement {
28067    readValueFromInstance(instance, key) {
28068        if (transformProps.has(key)) {
28069            const defaultType = getDefaultValueType(key);
28070            return defaultType ? defaultType.default || 0 : 0;
28071        }
28072        else {
28073            const computedStyle = HTMLVisualElement_getComputedStyle(instance);
28074            const value = (isCSSVariableName(key)
28075                ? computedStyle.getPropertyValue(key)
28076                : computedStyle[key]) || 0;
28077            return typeof value === "string" ? value.trim() : value;
28078        }
28079    }
28080    measureInstanceViewportBox(instance, { transformPagePoint }) {
28081        return measureViewportBox(instance, transformPagePoint);
28082    }
28083    build(renderState, latestValues, options, props) {
28084        buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
28085    }
28086    scrapeMotionValuesFromProps(props, prevProps) {
28087        return scrapeMotionValuesFromProps(props, prevProps);
28088    }
28089    handleChildMotionValue() {
28090        if (this.childSubscription) {
28091            this.childSubscription();
28092            delete this.childSubscription;
28093        }
28094        const { children } = this.props;
28095        if (isMotionValue(children)) {
28096            this.childSubscription = children.on("change", (latest) => {
28097                if (this.current)
28098                    this.current.textContent = `${latest}`;
28099            });
28100        }
28101    }
28102    renderInstance(instance, renderState, styleProp, projection) {
28103        renderHTML(instance, renderState, styleProp, projection);
28104    }
28105}
28106
28107
28108
28109;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
28110
28111
28112
28113
28114
28115
28116
28117
28118
28119
28120
28121class SVGVisualElement extends DOMVisualElement {
28122    constructor() {
28123        super(...arguments);
28124        this.isSVGTag = false;
28125    }
28126    getBaseTargetFromProps(props, key) {
28127        return props[key];
28128    }
28129    readValueFromInstance(instance, key) {
28130        if (transformProps.has(key)) {
28131            const defaultType = getDefaultValueType(key);
28132            return defaultType ? defaultType.default || 0 : 0;
28133        }
28134        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
28135        return instance.getAttribute(key);
28136    }
28137    measureInstanceViewportBox() {
28138        return createBox();
28139    }
28140    scrapeMotionValuesFromProps(props, prevProps) {
28141        return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps);
28142    }
28143    build(renderState, latestValues, options, props) {
28144        buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
28145    }
28146    renderInstance(instance, renderState, styleProp, projection) {
28147        renderSVG(instance, renderState, styleProp, projection);
28148    }
28149    mount(instance) {
28150        this.isSVGTag = isSVGTag(instance.tagName);
28151        super.mount(instance);
28152    }
28153}
28154
28155
28156
28157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
28158
28159
28160
28161
28162const create_visual_element_createDomVisualElement = (Component, options) => {
28163    return isSVGComponent(Component)
28164        ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
28165        : new HTMLVisualElement(options, { enableHardwareAcceleration: true });
28166};
28167
28168
28169
28170;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/layout.mjs
28171
28172
28173
28174const layout = {
28175    layout: {
28176        ProjectionNode: HTMLProjectionNode,
28177        MeasureLayout: MeasureLayout,
28178    },
28179};
28180
28181
28182
28183;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/motion.mjs
28184
28185
28186
28187
28188
28189
28190
28191
28192
28193const preloadedFeatures = {
28194    ...animations,
28195    ...gestureAnimations,
28196    ...drag,
28197    ...layout,
28198};
28199/**
28200 * HTML & SVG components, optimised for use with gestures and animation. These can be used as
28201 * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
28202 *
28203 * @public
28204 */
28205const motion = /*@__PURE__*/ createMotionProxy((Component, config) => create_config_createDomMotionConfig(Component, config, preloadedFeatures, create_visual_element_createDomVisualElement));
28206/**
28207 * Create a DOM `motion` component with the provided string. This is primarily intended
28208 * as a full alternative to `motion` for consumers who have to supp
28208ort environments that don't
28209 * support `Proxy`.
28210 *
28211 * ```javascript
28212 * import { createDomMotionComponent } from "framer-motion"
28213 *
28214 * const motion = {
28215 *   div: createDomMotionComponent('div')
28216 * }
28217 * ```
28218 *
28219 * @public
28220 */
28221function createDomMotionComponent(key) {
28222    return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));
28223}
28224
28225
28226
28227;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
28228
28229
28230
28231function useIsMounted() {
28232    const isMounted = (0,external_React_.useRef)(false);
28233    useIsomorphicLayoutEffect(() => {
28234        isMounted.current = true;
28235        return () => {
28236            isMounted.current = false;
28237        };
28238    }, []);
28239    return isMounted;
28240}
28241
28242
28243
28244;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-force-update.mjs
28245
28246
28247
28248
28249function use_force_update_useForceUpdate() {
28250    const isMounted = useIsMounted();
28251    const [forcedRenderCount, setForcedRenderCount] = (0,external_React_.useState)(0);
28252    const forceRender = (0,external_React_.useCallback)(() => {
28253        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
28254    }, [forcedRenderCount]);
28255    /**
28256     * Defer this to the end of the next animation frame in case there are multiple
28257     * synchronous calls.
28258     */
28259    const deferredForceRender = (0,external_React_.useCallback)(() => frame_frame.postRender(forceRender), [forceRender]);
28260    return [deferredForceRender, forcedRenderCount];
28261}
28262
28263
28264
28265;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
28266
28267
28268
28269/**
28270 * Measurement functionality has to be within a separate component
28271 * to leverage snapshot lifecycle.
28272 */
28273class PopChildMeasure extends external_React_.Component {
28274    getSnapshotBeforeUpdate(prevProps) {
28275        const element = this.props.childRef.current;
28276        if (element && prevProps.isPresent && !this.props.isPresent) {
28277            const size = this.props.sizeRef.current;
28278            size.height = element.offsetHeight || 0;
28279            size.width = element.offsetWidth || 0;
28280            size.top = element.offsetTop;
28281            size.left = element.offsetLeft;
28282        }
28283        return null;
28284    }
28285    /**
28286     * Required with getSnapshotBeforeUpdate to stop React complaining.
28287     */
28288    componentDidUpdate() { }
28289    render() {
28290        return this.props.children;
28291    }
28292}
28293function PopChild({ children, isPresent }) {
28294    const id = (0,external_React_.useId)();
28295    const ref = (0,external_React_.useRef)(null);
28296    const size = (0,external_React_.useRef)({
28297        width: 0,
28298        height: 0,
28299        top: 0,
28300        left: 0,
28301    });
28302    /**
28303     * We create and inject a style block so we can apply this explicit
28304     * sizing in a non-destructive manner by just deleting the style block.
28305     *
28306     * We can't apply size via render as the measurement happens
28307     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
28308     * styles directly on the DOM node, we might be overwriting
28309     * styles set via the style prop.
28310     */
28311    (0,external_React_.useInsertionEffect)(() => {
28312        const { width, height, top, left } = size.current;
28313        if (isPresent || !ref.current || !width || !height)
28314            return;
28315        ref.current.dataset.motionPopId = id;
28316        const style = document.createElement("style");
28317        document.head.appendChild(style);
28318        if (style.sheet) {
28319            style.sheet.insertRule(`
28320          [data-motion-pop-id="${id}"] {
28321            position: absolute !important;
28322            width: ${width}px !important;
28323            height: ${height}px !important;
28324            top: ${top}px !important;
28325            left: ${left}px !important;
28326          }
28327        `);
28328        }
28329        return () => {
28330            document.head.removeChild(style);
28331        };
28332    }, [isPresent]);
28333    return (external_React_.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, external_React_.cloneElement(children, { ref })));
28334}
28335
28336
28337
28338;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
28339
28340
28341
28342
28343
28344
28345const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
28346    const presenceChildren = useConstant(newChildrenMap);
28347    const id = (0,external_React_.useId)();
28348    const context = (0,external_React_.useMemo)(() => ({
28349        id,
28350        initial,
28351        isPresent,
28352        custom,
28353        onExitComplete: (childId) => {
28354            presenceChildren.set(childId, true);
28355            for (const isComplete of presenceChildren.values()) {
28356                if (!isComplete)
28357                    return; // can stop searching when any is incomplete
28358            }
28359            onExitComplete && onExitComplete();
28360        },
28361        register: (childId) => {
28362            presenceChildren.set(childId, false);
28363            return () => presenceChildren.delete(childId);
28364        },
28365    }), 
28366    /**
28367     * If the presence of a child affects the layout of the components around it,
28368     * we want to make a new context value to ensure they get re-rendered
28369     * so they can detect that layout change.
28370     */
28371    presenceAffectsLayout ? undefined : [isPresent]);
28372    (0,external_React_.useMemo)(() => {
28373        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
28374    }, [isPresent]);
28375    /**
28376     * If there's no `motion` components to fire exit animations, we want to remove this
28377     * component immediately.
28378     */
28379    external_React_.useEffect(() => {
28380        !isPresent &&
28381            !presenceChildren.size &&
28382            onExitComplete &&
28383            onExitComplete();
28384    }, [isPresent]);
28385    if (mode === "popLayout") {
28386        children = external_React_.createElement(PopChild, { isPresent: isPresent }, children);
28387    }
28388    return (external_React_.createElement(PresenceContext_PresenceContext.Provider, { value: context }, children));
28389};
28390function newChildrenMap() {
28391    return new Map();
28392}
28393
28394
28395
28396;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
28397
28398
28399function useUnmountEffect(callback) {
28400    return (0,external_React_.useEffect)(() => () => callback(), []);
28401}
28402
28403
28404
28405;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
28406
28407
28408
28409
28410
28411
28412
28413
28414
28415
28416const getChildKey = (child) => child.key || "";
28417function updateChildLookup(children, allChildren) {
28418    children.forEach((child) => {
28419        const key = getChildKey(child);
28420        allChildren.set(key, child);
28421    });
28422}
28423function onlyElements(children) {
28424    const filtered = [];
28425    // We use forEach here instead of map as map mutates the component key by preprending `.$`
28426    external_React_.Children.forEach(children, (child) => {
28427        if ((0,external_React_.isValidElement)(child))
28428            filtered.push(child);
28429    });
28430    return filtered;
28431}
28432/**
28433 * `AnimatePresence` enables the animation of components that have been removed from the tree.
28434 *
28435 * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
28436 *
28437 * Any `motion` components that have an `exit` property defined will animate out when removed from
28438 * the tree.
28439 *
28440 * ```jsx
28441 * import { motion, AnimatePresence } from 'framer-motion'
28442 *
28443 * export const Items = ({ items }) => (
28444 *   <AnimatePresence>
28445 *     {items.map(item => (
28446 *       <motion.div
28447 *         key={item.id}
28448 *         initial={{ opacity: 0 }}
28449 *         animate={{ opacity: 1 }}
28450 *         exit={{ opacity: 0 }}
28451 *       />
28452 *     ))}
28453 *   </AnimatePresence>
28454 * )
28455 * ```
28456 *
28457 * You can sequence exit animations throughout a tree using variants.
28458 *
28459 * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
28460 * once all `motion` components have finished animating out. Likewise, any components using
28461 * `usePresence` all need to call `safeToRemove`.
28462 *
28463 * @public
28464 */
28465const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
28466    errors_invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
28467    // We want to force a re-render once all exiting animations have finished. We
28468    // either use a local forceRender function, or one from a parent context if it exists.
28469    const forceRender = (0,external_React_.useContext)(LayoutGroupContext).forceRender || use_force_update_useForceUpdate()[0];
28470    const isMounted = useIsMounted();
28471    // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
28472    const filteredChildren = onlyElements(children);
28473    let childrenToRender = filteredChildren;
28474    const exitingChildren = (0,external_React_.useRef)(new Map()).current;
28475    // Keep a living record of the children we're actually rendering so we
28476    // can diff to figure out which are entering and exiting
28477    const presentChildren = (0,external_React_.useRef)(childrenToRender);
28478    // A lookup table to quickly reference components by key
28479    const allChildren = (0,external_React_.useRef)(new Map()).current;
28480    // If this is the initial component render, just deal with logic surrounding whether
28481    // we play onMount animations or not.
28482    const isInitialRender = (0,external_React_.useRef)(true);
28483    useIsomorphicLayoutEffect(() => {
28484        isInitialRender.current = false;
28485        updateChildLookup(filteredChildren, allChildren);
28486        presentChildren.current = childrenToRender;
28487    });
28488    useUnmountEffect(() => {
28489        isInitialRender.current = true;
28490        allChildren.clear();
28491        exitingChildren.clear();
28492    });
28493    if (isInitialRender.current) {
28494        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)))));
28495    }
28496    // If this is a subsequent render, deal with entering and exiting children
28497    childrenToRender = [...childrenToRender];
28498    // Diff the keys of the currently-present and target children to update our
28499    // exiting list.
28500    const presentKeys = presentChildren.current.map(getChildKey);
28501    const targetKeys = filteredChildren.map(getChildKey);
28502    // Diff the present children with our target children and mark those that are exiting
28503    const numPresent = presentKeys.length;
28504    for (let i = 0; i < numPresent; i++) {
28505        const key = presentKeys[i];
28506        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
28507            exitingChildren.set(key, undefined);
28508        }
28509    }
28510    // If we currently have exiting children, and we're deferring rendering incoming children
28511    // until after all current children have exiting, empty the childrenToRender array
28512    if (mode === "wait" && exitingChildren.size) {
28513        childrenToRender = [];
28514    }
28515    // Loop through all currently exiting components and clone them to overwrite `animate`
28516    // with any `exit` prop they might have defined.
28517    exitingChildren.forEach((component, key) => {
28518        // If this component is actually entering again, early return
28519        if (targetKeys.indexOf(key) !== -1)
28520            return;
28521        const child = allChildren.get(key);
28522        if (!child)
28523            return;
28524        const insertionIndex = presentKeys.indexOf(key);
28525        let exitingComponent = component;
28526        if (!exitingComponent) {
28527            const onExit = () => {
28528                allChildren.delete(key);
28529                exitingChildren.delete(key);
28530                // Remove this child from the present children
28531                const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
28532                presentChildren.current.splice(removeIndex, 1);
28533                // Defer re-rendering until all exiting children have indeed left
28534                if (!exitingChildren.size) {
28535                    presentChildren.current = filteredChildren;
28536                    if (isMounted.current === false)
28537                        return;
28538                    forceRender();
28539                    onExitComplete && onExitComplete();
28540                }
28541            };
28542            exitingComponent = (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
28543            exitingChildren.set(key, exitingComponent);
28544        }
28545        childrenToRender.splice(insertionIndex, 0, exitingComponent);
28546    });
28547    // Add `MotionContext` even to children that don't need it to ensure we're rendering
28548    // the same tree between renders
28549    childrenToRender = childrenToRender.map((child) => {
28550        const key = child.key;
28551        return exitingChildren.has(key) ? (child) : (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
28552    });
28553    if (false) {}
28554    return (external_React_.createElement(external_React_.Fragment, null, exitingChildren.size
28555        ? childrenToRender
28556        : childrenToRender.map((child) => (0,external_React_.cloneElement)(child))));
28557};
28558
28559
28560
28561;// CONCATENATED MODULE: ./packages/components/build-module/flex/context.js
28562/**
28563 * WordPress dependencies
28564 */
28565
28566const FlexContext = (0,external_wp_element_namespaceObject.createContext)({
28567  flexItemDisplay: undefined
28568});
28569const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext);
28570
28571;// CONCATENATED MODULE: ./packages/components/build-module/flex/styles.js
28572function styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
28573/**
28574 * External dependencies
28575 */
28576
28577const Flex =  true ? {
28578  name: "zjik7",
28579  styles: "display:flex"
28580} : 0;
28581const Item =  true ? {
28582  name: "qgaee5",
28583  styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0"
28584} : 0;
28585const block =  true ? {
28586  name: "82a6rk",
28587  styles: "flex:1"
28588} : 0;
28589
28590/**
28591 * Workaround to optimize DOM rendering.
28592 * We'll enhance alignment with naive parent flex assumptions.
28593 *
28594 * Trade-off:
28595 * Far less DOM less. However, UI rendering is not as reliable.
28596 */
28597
28598/**
28599 * Improves stability of width/height rendering.
28600 * https://github.com/ItsJonQ/g2/pull/149
28601 */
28602const ItemsColumn =  true ? {
28603  name: "13nosa1",
28604  styles: ">*{min-height:0;}"
28605} : 0;
28606const ItemsRow =  true ? {
28607  name: "1pwxzk4",
28608  styles: ">*{min-width:0;}"
28609} : 0;
28610
28611;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-item/hook.js
28612/**
28613 * External dependencies
28614 */
28615
28616
28617
28618/**
28619 * Internal dependencies
28620 */
28621
28622
28623
28624
28625
28626function useFlexItem(props) {
28627  const {
28628    className,
28629    display: displayProp,
28630    isBlock = false,
28631    ...otherProps
28632  } = useContextSystem(props, 'FlexItem');
28633  const sx = {};
28634  const contextDisplay = useFlexContext().flexItemDisplay;
28635  sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
28636    display: displayProp || contextDisplay
28637  },  true ? "" : 0,  true ? "" : 0);
28638  const cx = useCx();
28639  const classes = cx(Item, sx.Base, isBlock && block, className);
28640  return {
28641    ...otherProps,
28642    className: classes
28643  };
28644}
28645
28646;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-block/hook.js
28647/**
28648 * Internal dependencies
28649 */
28650
28651
28652
28653function useFlexBlock(props) {
28654  const otherProps = useContextSystem(props, 'FlexBlock');
28655  const flexItemProps = useFlexItem({
28656    isBlock: true,
28657    ...otherProps
28658  });
28659  return flexItemProps;
28660}
28661
28662;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-block/component.js
28663
28664/**
28665 * External dependencies
28666 */
28667
28668/**
28669 * Internal dependencies
28670 */
28671
28672
28673
28674
28675function UnconnectedFlexBlock(props, forwardedRef) {
28676  const flexBlockProps = useFlexBlock(props);
28677  return (0,external_wp_element_namespaceObject.createElement)(component, {
28678    ...flexBlockProps,
28679    ref: forwardedRef
28680  });
28681}
28682
28683/**
28684 * `FlexBlock` is a primitive layout component that adaptively resizes content
28685 * within layout containers like `Flex`.
28686 *
28687 * ```jsx
28688 * import { Flex, FlexBlock } from '@wordpress/components';
28689 *
28690 * function Example() {
28691 *   return (
28692 *     <Flex>
28693 *       <FlexBlock>...</FlexBlock>
28694 *     </Flex>
28695 *   );
28696 * }
28697 * ```
28698 */
28699const FlexBlock = contextConnect(UnconnectedFlexBlock, 'FlexBlock');
28700/* harmony default export */ const flex_block_component = (FlexBlock);
28701
28702;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/space.js
28703/**
28704 * The argument value for the `space()` utility function.
28705 *
28706 * When this is a number or a numeric string, it will be interpreted as a
28707 * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
28708 *
28709 * Otherwise, it will be interpreted as a literal CSS length value. For example,
28710 * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
28711 */
28712
28713const GRID_BASE = '4px';
28714
28715/**
28716 * A function that handles numbers, numeric strings, and unit values.
28717 *
28718 * When given a number or a numeric string, it will return the grid-based
28719 * value as a factor of GRID_BASE, defined above.
28720 *
28721 * When given a unit value or one of the named CSS values like `auto`,
28722 * it will simply return the value back.
28723 *
28724 * @param value A number, numeric string, or a unit value.
28725 */
28726function space(value) {
28727  if (typeof value === 'undefined') {
28728    return undefined;
28729  }
28730
28731  // Handle empty strings, if it's the number 0 this still works.
28732  if (!value) {
28733    return '0';
28734  }
28735  const asInt = typeof value === 'number' ? value : Number(value);
28736
28737  // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
28738  if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
28739    return value.toString();
28740  }
28741  return `calc(${GRID_BASE} * ${value})`;
28742}
28743
28744;// CONCATENATED MODULE: ./packages/components/build-module/utils/rtl.js
28745/**
28746 * External dependencies
28747 */
28748
28749
28750/**
28751 * WordPress dependencies
28752 */
28753
28754const LOWER_LEFT_REGEXP = new RegExp(/-left/g);
28755const LOWER_RIGHT_REGEXP = new RegExp(/-right/g);
28756const UPPER_LEFT_REGEXP = new RegExp(/Left/g);
28757const UPPER_RIGHT_REGEXP = new RegExp(/Right/g);
28758
28759/**
28760 * Flips a CSS property from left <-> right.
28761 *
28762 * @param {string} key The CSS property name.
28763 *
28764 * @return {string} The flipped CSS property name, if applicable.
28765 */
28766function getConvertedKey(key) {
28767  if (key === 'left') {
28768    return 'right';
28769  }
28770  if (key === 'right') {
28771    return 'left';
28772  }
28773  if (LOWER_LEFT_REGEXP.test(key)) {
28774    return key.replace(LOWER_LEFT_REGEXP, '-right');
28775  }
28776  if (LOWER_RIGHT_REGEXP.test(key)) {
28777    return key.replace(LOWER_RIGHT_REGEXP, '-left');
28778  }
28779  if (UPPER_LEFT_REGEXP.test(key)) {
28780    return key.replace(UPPER_LEFT_REGEXP, 'Right');
28781  }
28782  if (UPPER_RIGHT_REGEXP.test(key)) {
28783    return key.replace(UPPER_RIGHT_REGEXP, 'Left');
28784  }
28785  return key;
28786}
28787
28788/**
28789 * An incredibly basic ltr -> rtl converter for style properties
28790 *
28791 * @param {import('react').CSSProperties} ltrStyles
28792 *
28793 * @return {import('react').CSSProperties} Converted ltr -> rtl styles
28794 */
28795const convertLTRToRTL = (ltrStyles = {}) => {
28796  return Object.fromEntries(Object.entries(ltrStyles).map(([key, value]) => [getConvertedKey(key), value]));
28797};
28798
28799/**
28800 * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects.
28801 *
28802 * @param {import('react').CSSProperties} ltrStyles   Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
28803 * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided.
28804 *
28805 * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
28806 */
28807function rtl(ltrStyles = {}, rtlStyles) {
28808  return () => {
28809    if (rtlStyles) {
28810      // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
28811      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);
28812    }
28813
28814    // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
28815    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);
28816  };
28817}
28818
28819/**
28820 * Call this in the `useMemo` dependency array to ensure that subsequent renders will
28821 * cause rtl styles to update based on the `isRTL` return value even if all other dependencies
28822 * remain the same.
28823 *
28824 * @example
28825 * const styles = useMemo( () => {
28826 *   return css`
28827 *     ${ rtl( { marginRight: '10px' } ) }
28828 *   `;
28829 * }, [ rtl.watch() ] );
28830 */
28831rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)();
28832
28833;// CONCATENATED MODULE: ./packages/components/build-module/spacer/hook.js
28834/**
28835 * External dependencies
28836 */
28837
28838
28839/**
28840 * Internal dependencies
28841 */
28842
28843
28844
28845
28846const isDefined = o => typeof o !== 'undefined' && o !== null;
28847function useSpacer(props) {
28848  const {
28849    className,
28850    margin,
28851    marginBottom = 2,
28852    marginLeft,
28853    marginRight,
28854    marginTop,
28855    marginX,
28856    marginY,
28857    padding,
28858    paddingBottom,
28859    paddingLeft,
28860    paddingRight,
28861    paddingTop,
28862    paddingX,
28863    paddingY,
28864    ...otherProps
28865  } = useContextSystem(props, 'Spacer');
28866  const cx = useCx();
28867  const classes = cx(isDefined(margin) && /*#__PURE__*/emotion_react_browser_esm_css("margin:", space(margin), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(marginY) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginY), ";margin-top:", space(marginY), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(marginX) && /*#__PURE__*/emotion_react_browser_esm_css("margin-left:", space(marginX), ";margin-right:", space(marginX), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(marginTop) && /*#__PURE__*/emotion_react_browser_esm_css("margin-top:", space(marginTop), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(marginBottom) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginBottom), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(marginLeft) && rtl({
28868    marginLeft: space(marginLeft)
28869  })(), isDefined(marginRight) && rtl({
28870    marginRight: space(marginRight)
28871  })(), isDefined(padding) && /*#__PURE__*/emotion_react_browser_esm_css("padding:", space(padding), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(paddingY) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingY), ";padding-top:", space(paddingY), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(paddingX) && /*#__PURE__*/emotion_react_browser_esm_css("padding-left:", space(paddingX), ";padding-right:", space(paddingX), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(paddingTop) && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(paddingTop), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(paddingBottom) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingBottom), ";" + ( true ? "" : 0),  true ? "" : 0), isDefined(paddingLeft) && rtl({
28872    paddingLeft: space(paddingLeft)
28873  })(), isDefined(paddingRight) && rtl({
28874    paddingRight: space(paddingRight)
28875  })(), className);
28876  return {
28877    ...otherProps,
28878    className: classes
28879  };
28880}
28881
28882;// CONCATENATED MODULE: ./packages/components/build-module/spacer/component.js
28883
28884/**
28885 * External dependencies
28886 */
28887
28888/**
28889 * Internal dependencies
28890 */
28891
28892
28893
28894
28895function UnconnectedSpacer(props, forwardedRef) {
28896  const spacerProps = useSpacer(props);
28897  return (0,external_wp_element_namespaceObject.createElement)(component, {
28898    ...spacerProps,
28899    ref: forwardedRef
28900  });
28901}
28902
28903/**
28904 * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It c
28904an also be used to adaptively provide space within an `HStack` or `VStack`.
28905 *
28906 * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props
28907 * can either be a number (which will act as a multiplier to the library's grid system base of 4px),
28908 * or a literal CSS value string.
28909 *
28910 * ```jsx
28911 * import { Spacer } from `@wordpress/components`
28912 *
28913 * function Example() {
28914 *   return (
28915 *     <View>
28916 *       <Spacer>
28917 *         <Heading>WordPress.org</Heading>
28918 *       </Spacer>
28919 *       <Text>
28920 *         Code is Poetry
28921 *       </Text>
28922 *     </View>
28923 *   );
28924 * }
28925 * ```
28926 */
28927const Spacer = contextConnect(UnconnectedSpacer, 'Spacer');
28928/* harmony default export */ const spacer_component = (Spacer);
28929
28930;// CONCATENATED MODULE: ./packages/icons/build-module/library/plus.js
28931
28932/**
28933 * WordPress dependencies
28934 */
28935
28936const plus = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
28937  xmlns: "http://www.w3.org/2000/svg",
28938  viewBox: "0 0 24 24"
28939}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
28940  d: "M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
28941}));
28942/* harmony default export */ const library_plus = (plus);
28943
28944;// CONCATENATED MODULE: ./packages/icons/build-module/library/reset.js
28945
28946/**
28947 * WordPress dependencies
28948 */
28949
28950const reset_reset = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
28951  xmlns: "http://www.w3.org/2000/svg",
28952  viewBox: "0 0 24 24"
28953}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
28954  d: "M7 11.5h10V13H7z"
28955}));
28956/* harmony default export */ const library_reset = (reset_reset);
28957
28958;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/use-responsive-value.js
28959/**
28960 * WordPress dependencies
28961 */
28962
28963const breakpoints = ['40em', '52em', '64em'];
28964const useBreakpointIndex = (options = {}) => {
28965  const {
28966    defaultIndex = 0
28967  } = options;
28968  if (typeof defaultIndex !== 'number') {
28969    throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`);
28970  } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
28971    throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
28972  }
28973  const [value, setValue] = (0,external_wp_element_namespaceObject.useState)(defaultIndex);
28974  (0,external_wp_element_namespaceObject.useEffect)(() => {
28975    const getIndex = () => breakpoints.filter(bp => {
28976      return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
28977    }).length;
28978    const onResize = () => {
28979      const newValue = getIndex();
28980      if (value !== newValue) {
28981        setValue(newValue);
28982      }
28983    };
28984    onResize();
28985    if (typeof window !== 'undefined') {
28986      window.addEventListener('resize', onResize);
28987    }
28988    return () => {
28989      if (typeof window !== 'undefined') {
28990        window.removeEventListener('resize', onResize);
28991      }
28992    };
28993  }, [value]);
28994  return value;
28995};
28996function useResponsiveValue(values, options = {}) {
28997  const index = useBreakpointIndex(options);
28998
28999  // Allow calling the function with a "normal" value without having to check on the outside.
29000  if (!Array.isArray(values) && typeof values !== 'function') return values;
29001  const array = values || [];
29002
29003  /* eslint-disable jsdoc/no-undefined-types */
29004  return (/** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */
29005    index >= array.length ? array.length - 1 : index]
29006  );
29007}
29008
29009;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex/hook.js
29010/**
29011 * External dependencies
29012 */
29013
29014
29015/**
29016 * WordPress dependencies
29017 */
29018
29019
29020
29021/**
29022 * Internal dependencies
29023 */
29024
29025
29026
29027
29028
29029
29030function useDeprecatedProps(props) {
29031  const {
29032    isReversed,
29033    ...otherProps
29034  } = props;
29035  if (typeof isReversed !== 'undefined') {
29036    external_wp_deprecated_default()('Flex isReversed', {
29037      alternative: 'Flex direction="row-reverse" or "column-reverse"',
29038      since: '5.9'
29039    });
29040    return {
29041      ...otherProps,
29042      direction: isReversed ? 'row-reverse' : 'row'
29043    };
29044  }
29045  return otherProps;
29046}
29047function useFlex(props) {
29048  const {
29049    align,
29050    className,
29051    direction: directionProp = 'row',
29052    expanded = true,
29053    gap = 2,
29054    justify = 'space-between',
29055    wrap = false,
29056    ...otherProps
29057  } = useContextSystem(useDeprecatedProps(props), 'Flex');
29058  const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp];
29059  const direction = useResponsiveValue(directionAsArray);
29060  const isColumn = typeof direction === 'string' && !!direction.includes('column');
29061  const cx = useCx();
29062  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
29063    const base = /*#__PURE__*/emotion_react_browser_esm_css({
29064      alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center',
29065      flexDirection: direction,
29066      flexWrap: wrap ? 'wrap' : undefined,
29067      gap: space(gap),
29068      justifyContent: justify,
29069      height: isColumn && expanded ? '100%' : undefined,
29070      width: !isColumn && expanded ? '100%' : undefined
29071    },  true ? "" : 0,  true ? "" : 0);
29072    return cx(Flex, base, isColumn ? ItemsColumn : ItemsRow, className);
29073  }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);
29074  return {
29075    ...otherProps,
29076    className: classes,
29077    isColumn
29078  };
29079}
29080
29081;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex/component.js
29082
29083/**
29084 * External dependencies
29085 */
29086
29087/**
29088 * Internal dependencies
29089 */
29090
29091
29092
29093
29094
29095function UnconnectedFlex(props, forwardedRef) {
29096  const {
29097    children,
29098    isColumn,
29099    ...otherProps
29100  } = useFlex(props);
29101  return (0,external_wp_element_namespaceObject.createElement)(FlexContext.Provider, {
29102    value: {
29103      flexItemDisplay: isColumn ? 'block' : undefined
29104    }
29105  }, (0,external_wp_element_namespaceObject.createElement)(component, {
29106    ...otherProps,
29107    ref: forwardedRef
29108  }, children));
29109}
29110
29111/**
29112 * `Flex` is a primitive layout component that adaptively aligns child content
29113 * horizontally or vertically. `Flex` powers components like `HStack` and
29114 * `VStack`.
29115 *
29116 * `Flex` is used with any of its two sub-components, `FlexItem` and
29117 * `FlexBlock`.
29118 *
29119 * ```jsx
29120 * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
29121 *
29122 * function Example() {
29123 *   return (
29124 *     <Flex>
29125 *       <FlexItem>
29126 *         <p>Code</p>
29127 *       </FlexItem>
29128 *       <FlexBlock>
29129 *         <p>Poetry</p>
29130 *       </FlexBlock>
29131 *     </Flex>
29132 *   );
29133 * }
29134 * ```
29135 */
29136const component_Flex = contextConnect(UnconnectedFlex, 'Flex');
29137/* harmony default export */ const flex_component = (component_Flex);
29138
29139;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-item/component.js
29140
29141/**
29142 * External dependencies
29143 */
29144
29145/**
29146 * Internal dependencies
29147 */
29148
29149
29150
29151
29152function UnconnectedFlexItem(props, forwardedRef) {
29153  const flexItemProps = useFlexItem(props);
29154  return (0,external_wp_element_namespaceObject.createElement)(component, {
29155    ...flexItemProps,
29156    ref: forwardedRef
29157  });
29158}
29159
29160/**
29161 * `FlexItem` is a primitive layout component that aligns content within layout
29162 * containers like `Flex`.
29163 *
29164 * ```jsx
29165 * import { Flex, FlexItem } from '@wordpress/components';
29166 *
29167 * function Example() {
29168 *   return (
29169 *     <Flex>
29170 *       <FlexItem>...</FlexItem>
29171 *     </Flex>
29172 *   );
29173 * }
29174 * ```
29175 */
29176const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem');
29177/* harmony default export */ const flex_item_component = (FlexItem);
29178
29179;// CONCATENATED MODULE: ./packages/components/build-module/truncate/styles.js
29180function truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
29181/**
29182 * External dependencies
29183 */
29184
29185const Truncate =  true ? {
29186  name: "hdknak",
29187  styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
29188} : 0;
29189
29190;// CONCATENATED MODULE: ./packages/components/build-module/utils/values.js
29191/* eslint-disable jsdoc/valid-types */
29192/**
29193 * Determines if a value is null or undefined.
29194 *
29195 * @template T
29196 *
29197 * @param {T} value The value to check.
29198 * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.
29199 */
29200function isValueDefined(value) {
29201  return value !== undefined && value !== null;
29202}
29203/* eslint-enable jsdoc/valid-types */
29204
29205/* eslint-disable jsdoc/valid-types */
29206/**
29207 * Determines if a value is empty, null, or undefined.
29208 *
29209 * @param {string | number | null | undefined} value The value to check.
29210 * @return {value is ("" | null | undefined)} Whether value is empty.
29211 */
29212function isValueEmpty(value) {
29213  const isEmptyString = value === '';
29214  return !isValueDefined(value) || isEmptyString;
29215}
29216/* eslint-enable jsdoc/valid-types */
29217
29218/**
29219 * Get the first defined/non-null value from an array.
29220 *
29221 * @template T
29222 *
29223 * @param {Array<T | null | undefined>} values        Values to derive from.
29224 * @param {T}                           fallbackValue Fallback value if there are no defined values.
29225 * @return {T} A defined value or the fallback value.
29226 */
29227function getDefinedValue(values = [], fallbackValue) {
29228  var _values$find;
29229  return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue;
29230}
29231
29232/**
29233 * Converts a string to a number.
29234 *
29235 * @param {string} value
29236 * @return {number} String as a number.
29237 */
29238const stringToNumber = value => {
29239  return parseFloat(value);
29240};
29241
29242/**
29243 * Regardless of the input being a string or a number, returns a number.
29244 *
29245 * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
29246 *
29247 * @param {string | number} value
29248 * @return {number} The parsed number.
29249 */
29250const ensureNumber = value => {
29251  return typeof value === 'string' ? stringToNumber(value) : value;
29252};
29253
29254;// CONCATENATED MODULE: ./packages/components/build-module/truncate/utils.js
29255/**
29256 * Internal dependencies
29257 */
29258
29259const TRUNCATE_ELLIPSIS = '…';
29260const TRUNCATE_TYPE = {
29261  auto: 'auto',
29262  head: 'head',
29263  middle: 'middle',
29264  tail: 'tail',
29265  none: 'none'
29266};
29267const TRUNCATE_DEFAULT_PROPS = {
29268  ellipsis: TRUNCATE_ELLIPSIS,
29269  ellipsizeMode: TRUNCATE_TYPE.auto,
29270  limit: 0,
29271  numberOfLines: 0
29272};
29273
29274// Source
29275// https://github.com/kahwee/truncate-middle
29276function truncateMiddle(word, headLength, tailLength, ellipsis) {
29277  if (typeof word !== 'string') {
29278    return '';
29279  }
29280  const wordLength = word.length;
29281  // Setting default values
29282  // eslint-disable-next-line no-bitwise
29283  const frontLength = ~~headLength; // Will cast to integer
29284  // eslint-disable-next-line no-bitwise
29285  const backLength = ~~tailLength;
29286  /* istanbul ignore next */
29287  const truncateStr = isValueDefined(ellipsis) ? ellipsis : TRUNCATE_ELLIPSIS;
29288  if (frontLength === 0 && backLength === 0 || frontLength >= wordLength || backLength >= wordLength || frontLength + backLength >= wordLength) {
29289    return word;
29290  } else if (backLength === 0) {
29291    return word.slice(0, frontLength) + truncateStr;
29292  }
29293  return word.slice(0, frontLength) + truncateStr + word.slice(wordLength - backLength);
29294}
29295function truncateContent(words = '', props) {
29296  const mergedProps = {
29297    ...TRUNCATE_DEFAULT_PROPS,
29298    ...props
29299  };
29300  const {
29301    ellipsis,
29302    ellipsizeMode,
29303    limit
29304  } = mergedProps;
29305  if (ellipsizeMode === TRUNCATE_TYPE.none) {
29306    return words;
29307  }
29308  let truncateHead;
29309  let truncateTail;
29310  switch (ellipsizeMode) {
29311    case TRUNCATE_TYPE.head:
29312      truncateHead = 0;
29313      truncateTail = limit;
29314      break;
29315    case TRUNCATE_TYPE.middle:
29316      truncateHead = Math.floor(limit / 2);
29317      truncateTail = Math.floor(limit / 2);
29318      break;
29319    default:
29320      truncateHead = limit;
29321      truncateTail = 0;
29322  }
29323  const truncatedContent = ellipsizeMode !== TRUNCATE_TYPE.auto ? truncateMiddle(words, truncateHead, truncateTail, ellipsis) : words;
29324  return truncatedContent;
29325}
29326
29327;// CONCATENATED MODULE: ./packages/components/build-module/truncate/hook.js
29328/**
29329 * External dependencies
29330 */
29331
29332
29333/**
29334 * WordPress dependencies
29335 */
29336
29337
29338/**
29339 * Internal dependencies
29340 */
29341
29342
29343
29344
29345
29346function useTruncate(props) {
29347  const {
29348    className,
29349    children,
29350    ellipsis = TRUNCATE_ELLIPSIS,
29351    ellipsizeMode = TRUNCATE_TYPE.auto,
29352    limit = 0,
29353    numberOfLines = 0,
29354    ...otherProps
29355  } = useContextSystem(props, 'Truncate');
29356  const cx = useCx();
29357  const truncatedContent = truncateContent(typeof children === 'string' ? children : '', {
29358    ellipsis,
29359    ellipsizeMode,
29360    limit,
29361    numberOfLines
29362  });
29363  const shouldTruncate = ellipsizeMode === TRUNCATE_TYPE.auto;
29364  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
29365    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);
29366    return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && truncateLines, className);
29367  }, [className, cx, numberOfLines, shouldTruncate]);
29368  return {
29369    ...otherProps,
29370    className: classes,
29371    children: truncatedContent
29372  };
29373}
29374
29375;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/colors.js
29376/**
29377 * External dependencies
29378 */
29379
29380
29381
29382
29383/** @type {HTMLDivElement} */
29384let colorComputationNode;
29385k([names]);
29386
29387/**
29388 * @return {HTMLDivElement | undefined} The HTML element for color computation.
29389 */
29390function getColorComputationNode() {
29391  if (typeof document === 'undefined') return;
29392  if (!colorComputationNode) {
29393    // Create a temporary element for style computation.
29394    const el = document.createElement('div');
29395    el.setAttribute('data-g2-color-computation-node', '');
29396    // Inject for window computed style.
29397    document.body.appendChild(el);
29398    colorComputationNode = el;
29399  }
29400  return colorComputationNode;
29401}
29402
29403/**
29404 * @param {string | unknown} value
29405 *
29406 * @return {boolean} Whether the value is a valid color.
29407 */
29408function isColor(value) {
29409  if (typeof value !== 'string') return false;
29410  const test = w(value);
29411  return test.isValid();
29412}
29413
29414/**
29415 * Retrieves the computed background color. This is useful for getting the
29416 * value of a CSS variable color.
29417 *
29418 * @param {string | unknown} backgroundColor The background color to compute.
29419 *
29420 * @return {string} The computed background color.
29421 */
29422function _getComputedBackgroundColor(backgroundColor) {
29423  if (typeof backgroundColor !== 'string') return '';
29424  if (isColor(backgroundColor)) return backgroundColor;
29425  if (!backgroundColor.includes('var(')) return '';
29426  if (typeof document === 'undefined') return '';
29427
29428  // Attempts to gracefully handle CSS variables color values.
29429  const el = getColorComputationNode();
29430  if (!el) return '';
29431  el.style.background = backgroundColor;
29432  // Grab the style.
29433  const computedColor = window?.getComputedStyle(el).background;
29434  // Reset.
29435  el.style.background = '';
29436  return computedColor || '';
29437}
29438const getComputedBackgroundColor = memize(_getComputedBackgroundColor);
29439
29440/**
29441 * Get the text shade optimized for readability, based on a background color.
29442 *
29443 * @param {string | unknown} backgroundColor The background color.
29444 *
29445 * @return {string} The optimized text color (black or white).
29446 */
29447function getOptimalTextColor(backgroundColor) {
29448  const background = getComputedBackgroundColor(backgroundColor);
29449  return w(background).isLight() ? '#000000' : '#ffffff';
29450}
29451
29452/**
29453 * Get the text shade optimized for readability, based on a background color.
29454 *
29455 * @param {string | unknown} backgroundColor The background color.
29456 *
29457 * @return {string} The optimized text shade (dark or light).
29458 */
29459function getOptimalTextShade(backgroundColor) {
29460  const result = getOptimalTextColor(backgroundColor);
29461  return result === '#000000' ? 'dark' : 'light';
29462}
29463
29464;// CONCATENATED MODULE: ./packages/components/build-module/utils/config-values.js
29465/**
29466 * Internal dependencies
29467 */
29468
29469
29470const CONTROL_HEIGHT = '36px';
29471const CONTROL_PADDING_X = '12px';
29472const CONTROL_PROPS = {
29473  controlSurfaceColor: COLORS.white,
29474  controlTextActiveColor: COLORS.theme.accent,
29475  controlPaddingX: CONTROL_PADDING_X,
29476  controlPaddingXLarge: `calc(${CONTROL_PADDING_X} * 1.3334)`,
29477  controlPaddingXSmall: `calc(${CONTROL_PADDING_X} / 1.3334)`,
29478  controlBackgroundColor: COLORS.white,
29479  controlBorderRadius: '2px',
29480  controlBoxShadow: 'transparent',
29481  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
29482  controlDestructiveBorderColor: COLORS.alert.red,
29483  controlHeight: CONTROL_HEIGHT,
29484  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
29485  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
29486  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
29487  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
29488};
29489const TOGGLE_GROUP_CONTROL_PROPS = {
29490  toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
29491  toggleGroupControlBorderColor: COLORS.ui.border,
29492  toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
29493  toggleGroupControlBackdropBorderColor: COLORS.ui.border,
29494  toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
29495};
29496
29497// Using Object.assign to avoid creating circular references when emitting
29498// TypeScript type declarations.
29499/* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
29500  colorDivider: 'rgba(0, 0, 0, 0.1)',
29501  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
29502  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
29503  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
29504  elevationIntensity: 1,
29505  radiusBlockUi: '2px',
29506  borderWidth: '1px',
29507  borderWidthFocus: '1.5px',
29508  borderWidthTab: '4px',
29509  spinnerSize: 16,
29510  fontSize: '13px',
29511  fontSizeH1: 'calc(2.44 * 13px)',
29512  fontSizeH2: 'calc(1.95 * 13px)',
29513  fontSizeH3: 'calc(1.56 * 13px)',
29514  fontSizeH4: 'calc(1.25 * 13px)',
29515  fontSizeH5: '13px',
29516  fontSizeH6: 'calc(0.8 * 13px)',
29517  fontSizeInputMobile: '16px',
29518  fontSizeMobile: '15px',
29519  fontSizeSmall: 'calc(0.92 * 13px)',
29520  fontSizeXSmall: 'calc(0.75 * 13px)',
29521  fontLineHeightBase: '1.2',
29522  fontWeight: 'normal',
29523  fontWeightHeading: '600',
29524  gridBase: '4px',
29525  cardBorderRadius: '2px',
29526  cardPaddingXSmall: `${space(2)}`,
29527  cardPaddingSmall: `${space(4)}`,
29528  cardPaddingMedium: `${space(4)} ${space(6)}`,
29529  cardPaddingLarge: `${space(6)} ${space(8)}`,
29530  popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
29531  surfaceBackgroundColor: COLORS.white,
29532  surfaceBackgroundSubtleColor: '#F3F3F3',
29533  surfaceBackgroundTintColor: '#F5F5F5',
29534  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
29535  surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
29536  surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
29537  surfaceBackgroundTertiaryColor: COLORS.white,
29538  surfaceColor: COLORS.white,
29539  transitionDuration: '200ms',
29540  transitionDurationFast: '160ms',
29541  transitionDurationFaster: '120ms',
29542  transitionDurationFastest: '100ms',
29543  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
29544  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
29545}));
29546
29547;// CONCATENATED MODULE: ./packages/components/build-module/text/styles.js
29548function text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
29549/**
29550 * External dependencies
29551 */
29552
29553
29554/**
29555 * Internal dependencies
29556 */
29557
29558const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;" + ( true ? "" : 0),  true ? "" : 0);
29559const styles_block =  true ? {
29560  name: "4zleql",
29561  styles: "display:block"
29562} : 0;
29563const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0),  true ? "" : 0);
29564const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0),  true ? "" : 0);
29565const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[700], ";" + ( true ? "" : 0),  true ? "" : 0);
29566const highlighterText = /*#__PURE__*/emotion_react_browser_esm_css("mark{background:", COLORS.alert.yellow, ";border-radius:2px;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + ( true ? "" : 0),  true ? "" : 0);
29567const upperCase =  true ? {
29568  name: "50zrmy",
29569  styles: "text-transform:uppercase"
29570} : 0;
29571
29572// EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js
29573var dist = __webpack_require__(3138);
29574;// CONCATENATED MODULE: ./packages/components/build-module/text/utils.js
29575/**
29576 * External dependencies
29577 */
29578
29579
29580
29581/**
29582 * WordPress dependencies
29583 */
29584
29585
29586/**
29587 * Source:
29588 * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
29589 */
29590
29591/* eslint-disable jsdoc/valid-types */
29592/**
29593 * @typedef Options
29594 * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
29595 * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
29596 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
29597 * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
29598 * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
29599 * @property {string}                                                     children                  Children to highlight.
29600 * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
29601 * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
29602 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
29603 * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
29604 * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
29605 * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
29606 * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
29607 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
29608 */
29609
29610/**
29611 * Maps props to lowercase names.
29612 *
29613 * @template {Record<string, unknown>} T
29614 * @param {T} object Props to map.
29615 * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.
29616 */
29617/* eslint-enable jsdoc/valid-types */
29618const lowercaseProps = object => {
29619  /** @type {any} */
29620  const mapped = {};
29621  for (const key in object) {
29622    mapped[key.toLowerCase()] = object[key];
29623  }
29624  return mapped;
29625};
29626const memoizedLowercaseProps = memize(lowercaseProps);
29627
29628/**
29629 *
29630 * @param {Options} options
29631 */
29632function createHighlighterText({
29633  activeClassName = '',
29634  activeIndex = -1,
29635  activeStyle,
29636  autoEscape,
29637  caseSensitive = false,
29638  children,
29639  findChunks,
29640  highlightClassName = '',
29641  highlightStyle = {},
29642  highlightTag = 'mark',
29643  sanitize,
29644  searchWords = [],
29645  unhighlightClassName = '',
29646  unhighlightStyle
29647}) {
29648  if (!children) return null;
29649  if (typeof children !== 'string') return children;
29650  const textToHighlight = children;
29651  const chunks = (0,dist.findAll)({
29652    autoEscape,
29653    caseSensitive,
29654    findChunks,
29655    sanitize,
29656    searchWords,
29657    textToHighlight
29658  });
29659  const HighlightTag = highlightTag;
29660  let highlightIndex = -1;
29661  let highlightClassNames = '';
29662  let highlightStyles;
29663  const textContent = chunks.map((chunk, index) => {
29664    const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
29665    if (chunk.highlight) {
29666      highlightIndex++;
29667      let highlightClass;
29668      if (typeof highlightClassName === 'object') {
29669        if (!caseSensitive) {
29670          highlightClassName = memoizedLowercaseProps(highlightClassName);
29671          highlightClass = highlightClassName[text.toLowerCase()];
29672        } else {
29673          highlightClass = highlightClassName[text];
29674        }
29675      } else {
29676        highlightClass = highlightClassName;
29677      }
29678      const isActive = highlightIndex === +activeIndex;
29679      highlightClassNames = `${highlightClass} ${isActive ? activeClassName : ''}`;
29680      highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
29681
29682      /** @type {Record<string, any>} */
29683      const props = {
29684        children: text,
29685        className: highlightClassNames,
29686        key: index,
29687        style: highlightStyles
29688      };
29689
29690      // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
29691      // Only pass through the highlightIndex attribute for custom components.
29692      if (typeof HighlightTag !== 'string') {
29693        props.highlightIndex = highlightIndex;
29694      }
29695      return (0,external_wp_element_namespaceObject.createElement)(HighlightTag, props);
29696    }
29697    return (0,external_wp_element_namespaceObject.createElement)('span', {
29698      children: text,
29699      className: unhighlightClassName,
29700      key: index,
29701      style: unhighlightStyle
29702    });
29703  });
29704  return textContent;
29705}
29706
29707;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/font-size.js
29708/**
29709 * External dependencies
29710 */
29711
29712/**
29713 * Internal dependencies
29714 */
29715
29716const BASE_FONT_SIZE = 13;
29717const PRESET_FONT_SIZES = {
29718  body: BASE_FONT_SIZE,
29719  caption: 10,
29720  footnote: 11,
29721  largeTitle: 28,
29722  subheadline: 12,
29723  title: 20
29724};
29725const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);
29726function getFontSize(size = BASE_FONT_SIZE) {
29727  if (size in PRESET_FONT_SIZES) {
29728    return getFontSize(PRESET_FONT_SIZES[size]);
29729  }
29730  if (typeof size !== 'number') {
29731    const parsed = parseFloat(size);
29732    if (Number.isNaN(parsed)) return size;
29733    size = parsed;
29734  }
29735  const ratio = `(${size} / ${BASE_FONT_SIZE})`;
29736  return `calc(${ratio} * ${config_values.fontSize})`;
29737}
29738function getHeadingFontSize(size = 3) {
29739  if (!HEADING_FONT_SIZES.includes(size)) {
29740    return getFontSize(size);
29741  }
29742  const headingSize = `fontSizeH${size}`;
29743  return config_values[headingSize];
29744}
29745
29746;// CONCATENATED MODULE: ./packages/components/build-module/text/get-line-height.js
29747/**
29748 * External dependencies
29749 */
29750
29751/**
29752 * Internal dependencies
29753 */
29754
29755
29756
29757function getLineHeight(adjustLineHeightForInnerControls, lineHeight) {
29758  if (lineHeight) return lineHeight;
29759  if (!adjustLineHeightForInnerControls) return;
29760  let value = `calc(${config_values.controlHeight} + ${space(2)})`;
29761  switch (adjustLineHeightForInnerControls) {
29762    case 'large':
29763      value = `calc(${config_values.controlHeightLarge} + ${space(2)})`;
29764      break;
29765    case 'small':
29766      value = `calc(${config_values.controlHeightSmall} + ${space(2)})`;
29767      break;
29768    case 'xSmall':
29769      value = `calc(${config_values.controlHeightXSmall} + ${space(2)})`;
29770      break;
29771    default:
29772      break;
29773  }
29774  return value;
29775}
29776
29777;// CONCATENATED MODULE: ./packages/components/build-module/text/hook.js
29778function hook_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)."; }
29779/**
29780 * External dependencies
29781 */
29782
29783
29784/**
29785 * WordPress dependencies
29786 */
29787
29788
29789/**
29790 * Internal dependencies
29791 */
29792
29793
29794
29795
29796
29797
29798
29799
29800
29801
29802/**
29803 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
29804 */
29805var hook_ref =  true ? {
29806  name: "50zrmy",
29807  styles: "text-transform:uppercase"
29808} : 0;
29809function useText(props) {
29810  const {
29811    adjustLineHeightForInnerControls,
29812    align,
29813    children,
29814    className,
29815    color,
29816    ellipsizeMode,
29817    isDestructive = false,
29818    display,
29819    highlightEscape = false,
29820    highlightCaseSensitive = false,
29821    highlightWords,
29822    highlightSanitize,
29823    isBlock = false,
29824    letterSpacing,
29825    lineHeight: lineHeightProp,
29826    optimizeReadabilityFor,
29827    size,
29828    truncate = false,
29829    upperCase = false,
29830    variant,
29831    weight = config_values.fontWeight,
29832    ...otherProps
29833  } = useContextSystem(props, 'Text');
29834
29835  /** @type {import('react').ReactNode} */
29836  let content = children;
29837  const isHighlighter = Array.isArray(highlightWords);
29838  const isCaption = size === 'caption';
29839  if (isHighlighter) {
29840    if (typeof children !== 'string') {
29841      throw new TypeError('`children` of `Text` must only be `string` types when `highlightWords` is defined');
29842    }
29843    content = createHighlighterText({
29844      autoEscape: highlightEscape,
29845      // Disable reason: We need to disable this otherwise it erases the cast
29846      // eslint-disable-next-line object-shorthand
29847      children: /** @type {string} */children,
29848      caseSensitive: highlightCaseSensitive,
29849      searchWords: highlightWords,
29850      sanitize: highlightSanitize
29851    });
29852  }
29853  const cx = useCx();
29854  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
29855    const sx = {};
29856    const lineHeight = getLineHeight(adjustLineHeightForInnerControls, lineHeightProp);
29857    sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
29858      color,
29859      display,
29860      fontSize: getFontSize(size),
29861      /* eslint-disable jsdoc/valid-types */
29862      fontWeight: /** @type {import('react').CSSProperties['fontWeight']} */
29863      weight,
29864      /* eslint-enable jsdoc/valid-types */
29865      lineHeight,
29866      letterSpacing,
29867      textAlign: align
29868    },  true ? "" : 0,  true ? "" : 0);
29869    sx.upperCase = hook_ref;
29870    sx.optimalTextColor = null;
29871    if (optimizeReadabilityFor) {
29872      const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark';
29873      sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({
29874        color: COLORS.gray[900]
29875      },  true ? "" : 0,  true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({
29876        color: COLORS.white
29877      },  true ? "" : 0,  true ? "" : 0);
29878    }
29879    return cx(Text, sx.Base, sx.optimalTextColor, isDestructive && destructive, !!isHighlighter && highlighterText, isBlock && styles_block, isCaption && muted, variant && text_styles_namespaceObject[variant], upperCase && sx.upperCase, className);
29880  }, [adjustLineHeightForInnerControls, align, className, color, cx, display, isBlock, isCaption, isDestructive, isHighlighter, letterSpacing, lineHeightProp, optimizeReadabilityFor, size, upperCase, variant, weight]);
29881
29882  /** @type {undefined | 'auto' | 'none'} */
29883  let finalEllipsizeMode;
29884  if (truncate === true) {
29885    finalEllipsizeMode = 'auto';
29886  }
29887  if (truncate === false) {
29888    finalEllipsizeMode = 'none';
29889  }
29890  const finalComponentProps = {
29891    ...otherProps,
29892    className: classes,
29893    children,
29894    ellipsizeMode: ellipsizeMode || finalEllipsizeMode
29895  };
29896  const truncateProps = useTruncate(finalComponentProps);
29897
29898  /**
29899   * Enhance child `<Link />` components to inherit font size.
29900   */
29901  if (!truncate && Array.isArray(children)) {
29902    content = external_wp_element_namespaceObject.Children.map(children, child => {
29903      if (typeof child !== 'object' || child === null || !('props' in child)) {
29904        return child;
29905      }
29906      const isLink = hasConnectNamespace(child, ['Link']);
29907      if (isLink) {
29908        return (0,external_wp_element_namespaceObject.cloneElement)(child, {
29909          size: child.props.size || 'inherit'
29910        });
29911      }
29912      return child;
29913    });
29914  }
29915  return {
29916    ...truncateProps,
29917    children: truncate ? truncateProps.children : content
29918  };
29919}
29920
29921;// CONCATENATED MODULE: ./packages/components/build-module/text/component.js
29922
29923/**
29924 * Internal dependencies
29925 */
29926
29927
29928
29929
29930/**
29931 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
29932 * @param {import('react').ForwardedRef<any>}                                                forwardedRef
29933 */
29934function component_Text(props, forwardedRef) {
29935  const textProps = useText(props);
29936  return (0,external_wp_element_namespaceObject.createElement)(component, {
29937    as: "span",
29938    ...textProps,
29939    ref: forwardedRef
29940  });
29941}
29942
29943/**
29944 * `Text` is a core component that renders text in the library, using the
29945 * library's typography system.
29946 *
29947 * `Text` can be used to render any text-content, like an HTML `p` or `span`.
29948 *
29949 * @example
29950 *
29951 * ```jsx
29952 * import { __experimentalText as Text } from `@wordpress/components`;
29953 *
29954 * function Example() {
29955 * 	return <Text>Code is Poetry</Text>;
29956 * }
29957 * ```
29958 */
29959const ConnectedText = contextConnect(component_Text, 'Text');
29960/* harmony default export */ const text_component = (ConnectedText);
29961
29962;// CONCATENATED MODULE: ./packages/components/build-module/utils/base-label.js
29963function base_label_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)."; }
29964/**
29965 * External dependencies
29966 */
29967
29968
29969// This is a very low-level mixin which you shouldn't have to use directly.
29970// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
29971const baseLabelTypography =  true ? {
29972  name: "9amh4a",
29973  styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase"
29974} : 0;
29975
29976;// CONCATENATED MODULE: ./packages/components/build-module/input-control/styles/input-control-styles.js
29977
29978
29979function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
29980/**
29981 * External dependencies
29982 */
29983
29984
29985
29986
29987
29988
29989var _ref2 =  true ? {
29990  name: "1739oy8",
29991  styles: "z-index:1"
29992} : 0;
29993const rootFocusedStyles = ({
29994  isFocused
29995}) => {
29996  if (!isFocused) return '';
29997  return _ref2;
29998};
29999const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
30000  target: "em5sgkm7"
30001} : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;", rootFocusedStyles, ";" + ( true ? "" : 0));
30002const containerDisabledStyles = ({
30003  disabled
30004}) => {
30005  const backgroundColor = disabled ? COLORS.ui.backgroundDisabled : COLORS.ui.background;
30006  return /*#__PURE__*/emotion_react_browser_esm_css({
30007    backgroundColor
30008  },  true ? "" : 0,  true ? "" : 0);
30009};
30010var input_control_styles_ref =  true ? {
30011  name: "1d3w5wq",
30012  styles: "width:100%"
30013} : 0;
30014const containerWidthStyles = ({
30015  __unstableInputWidth,
30016  labelPosition
30017}) => {
30018  if (!__unstableInputWidth) return input_control_styles_ref;
30019  if (labelPosition === 'side') return '';
30020  if (labelPosition === 'edge') {
30021    return /*#__PURE__*/emotion_react_browser_esm_css({
30022      flex: `0 0 ${__unstableInputWidth}`
30023    },  true ? "" : 0,  true ? "" : 0);
30024  }
30025  return /*#__PURE__*/emotion_react_browser_esm_css({
30026    width: __unstableInputWidth
30027  },  true ? "" : 0,  true ? "" : 0);
30028};
30029const Container = emotion_styled_base_browser_esm("div",  true ? {
30030  target: "em5sgkm6"
30031} : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0));
30032const disabledStyles = ({
30033  disabled
30034}) => {
30035  if (!disabled) return '';
30036  return /*#__PURE__*/emotion_react_browser_esm_css({
30037    color: COLORS.ui.textDisabled
30038  },  true ? "" : 0,  true ? "" : 0);
30039};
30040const fontSizeStyles = ({
30041  inputSize: size
30042}) => {
30043  const sizes = {
30044    default: '13px',
30045    small: '11px',
30046    '__unstable-large': '13px'
30047  };
30048  const fontSize = sizes[size] || sizes.default;
30049  const fontSizeMobile = '16px';
30050  if (!fontSize) return '';
30051  return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0),  true ? "" : 0);
30052};
30053const getSizeConfig = ({
30054  inputSize: size,
30055  __next36pxDefaultSize
30056}) => {
30057  // Paddings may be overridden by the custom paddings props.
30058  const sizes = {
30059    default: {
30060      height: 36,
30061      lineHeight: 1,
30062      minHeight: 36,
30063      paddingLeft: space(4),
30064      paddingRight: space(4)
30065    },
30066    small: {
30067      height: 24,
30068      lineHeight: 1,
30069      minHeight: 24,
30070      paddingLeft: space(2),
30071      paddingRight: space(2)
30072    },
30073    '__unstable-large': {
30074      height: 40,
30075      lineHeight: 1,
30076      minHeight: 40,
30077      paddingLeft: space(4),
30078      paddingRight: space(4)
30079    }
30080  };
30081  if (!__next36pxDefaultSize) {
30082    sizes.default = {
30083      height: 30,
30084      lineHeight: 1,
30085      minHeight: 30,
30086      paddingLeft: space(2),
30087      paddingRight: space(2)
30088    };
30089  }
30090  return sizes[size] || sizes.default;
30091};
30092const sizeStyles = props => {
30093  return /*#__PURE__*/emotion_react_browser_esm_css(getSizeConfig(props),  true ? "" : 0,  true ? "" : 0);
30094};
30095const customPaddings = ({
30096  paddingInlineStart,
30097  paddingInlineEnd
30098}) => {
30099  return /*#__PURE__*/emotion_react_browser_esm_css({
30100    paddingInlineStart,
30101    paddingInlineEnd
30102  },  true ? "" : 0,  true ? "" : 0);
30103};
30104const dragStyles = ({
30105  isDragging,
30106  dragCursor
30107}) => {
30108  let defaultArrowStyles;
30109  let activeDragCursorStyles;
30110  if (isDragging) {
30111    defaultArrowStyles = /*#__PURE__*/emotion_react_browser_esm_css("cursor:", dragCursor, ";user-select:none;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}" + ( true ? "" : 0),  true ? "" : 0);
30112  }
30113  if (isDragging && dragCursor) {
30114    activeDragCursorStyles = /*#__PURE__*/emotion_react_browser_esm_css("&:active{cursor:", dragCursor, ";}" + ( true ? "" : 0),  true ? "" : 0);
30115  }
30116  return /*#__PURE__*/emotion_react_browser_esm_css(defaultArrowStyles, " ", activeDragCursorStyles, ";" + ( true ? "" : 0),  true ? "" : 0);
30117};
30118
30119// TODO: Resolve need to use &&& to increase specificity
30120// https://github.com/WordPress/gutenberg/issues/18483
30121
30122const Input = emotion_styled_base_browser_esm("input",  true ? {
30123  target: "em5sgkm5"
30124} : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0));
30125const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
30126  target: "em5sgkm4"
30127} : 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));
30128const Label = props => (0,external_wp_element_namespaceObject.createElement)(BaseLabel, {
30129  ...props,
30130  as: "label"
30131});
30132const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component,  true ? {
30133  target: "em5sgkm3"
30134} : 0)( true ? {
30135  name: "1b6uupn",
30136  styles: "max-width:calc( 100% - 10px )"
30137} : 0);
30138const backdropFocusedStyles = ({
30139  disabled,
30140  isFocused
30141}) => {
30142  let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
30143  let boxShadow;
30144  let outline;
30145  let outlineOffset;
30146  if (isFocused) {
30147    boxShadow = config_values.controlBoxShadowFocus;
30148    // Windows High Contrast mode will show this outline, but not the box-shadow.
30149    outline = `2px solid transparent`;
30150    outlineOffset = `-2px`;
30151  }
30152  if (disabled) {
30153    borderColor = COLORS.ui.borderDisabled;
30154  }
30155  return /*#__PURE__*/emotion_react_browser_esm_css({
30156    boxShadow,
30157    borderColor,
30158    borderStyle: 'solid',
30159    borderWidth: 1,
30160    outline,
30161    outlineOffset
30162  },  true ? "" : 0,  true ? "" : 0);
30163};
30164const BackdropUI = emotion_styled_base_browser_esm("div",  true ? {
30165  target: "em5sgkm2"
30166} : 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({
30167  paddingLeft: 2
30168}), ";}" + ( true ? "" : 0));
30169const Prefix = emotion_styled_base_browser_esm("span",  true ? {
30170  target: "em5sgkm1"
30171} : 0)( true ? {
30172  name: "pvvbxf",
30173  styles: "box-sizing:border-box;display:block"
30174} : 0);
30175const Suffix = emotion_styled_base_browser_esm("span",  true ? {
30176  target: "em5sgkm0"
30177} : 0)( true ? {
30178  name: "jgf79h",
30179  styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex"
30180} : 0);
30181
30182;// CONCATENATED MODULE: ./packages/components/build-module/input-control/backdrop.js
30183
30184/**
30185 * WordPress dependencies
30186 */
30187
30188/**
30189 * Internal dependencies
30190 */
30191
30192function Backdrop({
30193  disabled = false,
30194  isFocused = false
30195}) {
30196  return (0,external_wp_element_namespaceObject.createElement)(BackdropUI, {
30197    "aria-hidden": "true",
30198    className: "components-input-control__backdrop",
30199    disabled: disabled,
30200    isFocused: isFocused
30201  });
30202}
30203const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop);
30204/* harmony default export */ const backdrop = (MemoizedBackdrop);
30205
30206;// CONCATENATED MODULE: ./packages/components/build-module/input-control/label.js
30207
30208/**
30209 * Internal dependencies
30210 */
30211
30212
30213function label_Label({
30214  children,
30215  hideLabelFromVision,
30216  htmlFor,
30217  ...props
30218}) {
30219  if (!children) return null;
30220  if (hideLabelFromVision) {
30221    return (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
30222      as: "label",
30223      htmlFor: htmlFor
30224    }, children);
30225  }
30226  return (0,external_wp_element_namespaceObject.createElement)(LabelWrapper, null, (0,external_wp_element_namespaceObject.createElement)(Label, {
30227    htmlFor: htmlFor,
30228    ...props
30229  }, children));
30230}
30231
30232;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-base.js
30233
30234/**
30235 * External dependencies
30236 */
30237
30238/**
30239 * WordPress dependencies
30240 */
30241
30242
30243
30244/**
30245 * Internal dependencies
30246 */
30247
30248
30249
30250
30251function useUniqueId(idProp) {
30252  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase);
30253  const id = `input-base-control-${instanceId}`;
30254  return idProp || id;
30255}
30256
30257// Adapter to map props for the new ui/flex component.
30258function getUIFlexProps(labelPosition) {
30259  const props = {};
30260  switch (labelPosition) {
30261    case 'top':
30262      props.direction = 'column';
30263      props.expanded = false;
30264      props.gap = 0;
30265      break;
30266    case 'bottom':
30267      props.direction = 'column-reverse';
30268      props.expanded = false;
30269      props.gap = 0;
30270      break;
30271    case 'edge':
30272      props.justify = 'space-between';
30273      break;
30274  }
30275  return props;
30276}
30277function InputBase({
30278  __next36pxDefaultSize,
30279  __unstableInputWidth,
30280  children,
30281  className,
30282  disabled = false,
30283  hideLabelFromVision = false,
30284  labelPosition,
30285  id: idProp,
30286  isFocused = false,
30287  label,
30288  prefix,
30289  size = 'default',
30290  suffix,
30291  ...props
30292}, ref) {
30293  const id = useUniqueId(idProp);
30294  const hideLabel = hideLabelFromVision || !label;
30295  const {
30296    paddingLeft,
30297    paddingRight
30298  } = getSizeConfig({
30299    inputSize: size,
30300    __next36pxDefaultSize
30301  });
30302  const prefixSuffixContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
30303    return {
30304      InputControlPrefixWrapper: {
30305        paddingLeft
30306      },
30307      InputControlSuffixWrapper: {
30308        paddingRight
30309      }
30310    };
30311  }, [paddingLeft, paddingRight]);
30312  return (
30313    // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
30314    (0,external_wp_element_namespaceObject.createElement)(input_control_styles_Root, {
30315      ...props,
30316      ...getUIFlexProps(labelPosition),
30317      className: className,
30318      gap: 2,
30319      isFocused: isFocused,
30320      labelPosition: labelPosition,
30321      ref: ref
30322    }, (0,external_wp_element_namespaceObject.createElement)(label_Label, {
30323      className: "components-input-control__label",
30324      hideLabelFromVision: hideLabelFromVision,
30325      labelPosition: labelPosition,
30326      htmlFor: id
30327    }, label), (0,external_wp_element_namespaceObject.createElement)(Container, {
30328      __unstableInputWidth: __unstableInputWidth,
30329      className: "components-input-control__container",
30330      disabled: disabled,
30331      hideLabel: hideLabel,
30332      labelPosition: labelPosition
30333    }, (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, {
30334      value: prefixSuffixContextValue
30335    }, prefix && (0,external_wp_element_namespaceObject.createElement)(Prefix, {
30336      className: "components-input-control__prefix"
30337    }, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(Suffix, {
30338      className: "components-input-control__suffix"
30339    }, suffix)), (0,external_wp_element_namespaceObject.createElement)(backdrop, {
30340      disabled: disabled,
30341      isFocused: isFocused
30342    })))
30343  );
30344}
30345/* harmony default export */ const input_base = ((0,external_wp_element_namespaceObject.forwardRef)(InputBase));
30346
30347;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js
30348function maths_0ab39ae9_esm_clamp(v, min, max) {
30349  return Math.max(min, Math.min(v, max));
30350}
30351const V = {
30352  toVector(v, fallback) {
30353    if (v === undefined) v = fallback;
30354    return Array.isArray(v) ? v : [v, v];
30355  },
30356  add(v1, v2) {
30357    return [v1[0] + v2[0], v1[1] + v2[1]];
30358  },
30359  sub(v1, v2) {
30360    return [v1[0] - v2[0], v1[1] - v2[1]];
30361  },
30362  addTo(v1, v2) {
30363    v1[0] += v2[0];
30364    v1[1] += v2[1];
30365  },
30366  subTo(v1, v2) {
30367    v1[0] -= v2[0];
30368    v1[1] -= v2[1];
30369  }
30370};
30371function rubberband(distance, dimension, constant) {
30372  if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5);
30373  return distance * dimension * constant / (dimension + constant * distance);
30374}
30375function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) {
30376  if (constant === 0) return maths_0ab39ae9_esm_clamp(position, min, max);
30377  if (position < min) return -rubberband(min - position, max - min, constant) + min;
30378  if (position > max) return +rubberband(position - max, max - min, constant) + max;
30379  return position;
30380}
30381function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) {
30382  const [[X0, X1], [Y0, Y1]] = bounds;
30383  return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)];
30384}
30385
30386
30387
30388;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-b1cc53c2.esm.js
30389
30390
30391function _toPrimitive(input, hint) {
30392  if (typeof input !== "object" || input === null) return input;
30393  var prim = input[Symbol.toPrimitive];
30394  if (prim !== undefined) {
30395    var res = prim.call(input, hint || "default");
30396    if (typeof res !== "object") return res;
30397    throw new TypeError("@@toPrimitive must return a primitive value.");
30398  }
30399  return (hint === "string" ? String : Number)(input);
30400}
30401
30402function _toPropertyKey(arg) {
30403  var key = _toPrimitive(arg, "string");
30404  return typeof key === "symbol" ? key : String(key);
30405}
30406
30407function actions_b1cc53c2_esm_defineProperty(obj, key, value) {
30408  key = _toPropertyKey(key);
30409  if (key in obj) {
30410    Object.defineProperty(obj, key, {
30411      value: value,
30412      enumerable: true,
30413      configurable: true,
30414      writable: true
30415    });
30416  } else {
30417    obj[key] = value;
30418  }
30419  return obj;
30420}
30421
30422function actions_b1cc53c2_esm_ownKeys(object, enumerableOnly) {
30423  var keys = Object.keys(object);
30424  if (Object.getOwnPropertySymbols) {
30425    var symbols = Object.getOwnPropertySymbols(object);
30426    enumerableOnly && (symbols = symbols.filter(function (sym) {
30427      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
30428    })), keys.push.apply(keys, symbols);
30429  }
30430  return keys;
30431}
vendor: 10,996 bytes, lines 30432-30776
30432function actions_b1cc53c2_esm_objectSpread2(target) {
30433  for (var i = 1; i < arguments.length; i++) {
30434    var source = null != arguments[i] ? arguments[i] : {};
30435    i % 2 ? actions_b1cc53c2_esm_ownKeys(Object(source), !0).forEach(function (key) {
30436      actions_b1cc53c2_esm_defineProperty(target, key, source[key]);
30437    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : actions_b1cc53c2_esm_ownKeys(Object(source)).forEach(function (key) {
30438      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
30439    });
30440  }
30441  return target;
30442}
30443
30444const EVENT_TYPE_MAP = {
30445  pointer: {
30446    start: 'down',
30447    change: 'move',
30448    end: 'up'
30449  },
30450  mouse: {
30451    start: 'down',
30452    change: 'move',
30453    end: 'up'
30454  },
30455  touch: {
30456    start: 'start',
30457    change: 'move',
30458    end: 'end'
30459  },
30460  gesture: {
30461    start: 'start',
30462    change: 'change',
30463    end: 'end'
30464  }
30465};
30466function capitalize(string) {
30467  if (!string) return '';
30468  return string[0].toUpperCase() + string.slice(1);
30469}
30470const actionsWithoutCaptureSupported = ['enter', 'leave'];
30471function hasCapture(capture = false, actionKey) {
30472  return capture && !actionsWithoutCaptureSupported.includes(actionKey);
30473}
30474function toHandlerProp(device, action = '', capture = false) {
30475  const deviceProps = EVENT_TYPE_MAP[device];
30476  const actionKey = deviceProps ? deviceProps[action] || action : action;
30477  return 'on' + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? 'Capture' : '');
30478}
30479const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture'];
30480function parseProp(prop) {
30481  let eventKey = prop.substring(2).toLowerCase();
30482  const passive = !!~eventKey.indexOf('passive');
30483  if (passive) eventKey = eventKey.replace('passive', '');
30484  const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture';
30485  const capture = !!~eventKey.indexOf(captureKey);
30486  if (capture) eventKey = eventKey.replace('capture', '');
30487  return {
30488    device: eventKey,
30489    capture,
30490    passive
30491  };
30492}
30493function toDomEventType(device, action = '') {
30494  const deviceProps = EVENT_TYPE_MAP[device];
30495  const actionKey = deviceProps ? deviceProps[action] || action : action;
30496  return device + actionKey;
30497}
30498function isTouch(event) {
30499  return 'touches' in event;
30500}
30501function getPointerType(event) {
30502  if (isTouch(event)) return 'touch';
30503  if ('pointerType' in event) return event.pointerType;
30504  return 'mouse';
30505}
30506function getCurrentTargetTouchList(event) {
30507  return Array.from(event.touches).filter(e => {
30508    var _event$currentTarget, _event$currentTarget$;
30509    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));
30510  });
30511}
30512function getTouchList(event) {
30513  return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches;
30514}
30515function getValueEvent(event) {
30516  return isTouch(event) ? getTouchList(event)[0] : event;
30517}
30518function distanceAngle(P1, P2) {
30519  const dx = P2.clientX - P1.clientX;
30520  const dy = P2.clientY - P1.clientY;
30521  const cx = (P2.clientX + P1.clientX) / 2;
30522  const cy = (P2.clientY + P1.clientY) / 2;
30523  const distance = Math.hypot(dx, dy);
30524  const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
30525  const origin = [cx, cy];
30526  return {
30527    angle,
30528    distance,
30529    origin
30530  };
30531}
30532function touchIds(event) {
30533  return getCurrentTargetTouchList(event).map(touch => touch.identifier);
30534}
30535function touchDistanceAngle(event, ids) {
30536  const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier));
30537  return distanceAngle(P1, P2);
30538}
30539function pointerId(event) {
30540  const valueEvent = getValueEvent(event);
30541  return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId;
30542}
30543function pointerValues(event) {
30544  const valueEvent = getValueEvent(event);
30545  return [valueEvent.clientX, valueEvent.clientY];
30546}
30547const LINE_HEIGHT = 40;
30548const PAGE_HEIGHT = 800;
30549function wheelValues(event) {
30550  let {
30551    deltaX,
30552    deltaY,
30553    deltaMode
30554  } = event;
30555  if (deltaMode === 1) {
30556    deltaX *= LINE_HEIGHT;
30557    deltaY *= LINE_HEIGHT;
30558  } else if (deltaMode === 2) {
30559    deltaX *= PAGE_HEIGHT;
30560    deltaY *= PAGE_HEIGHT;
30561  }
30562  return [deltaX, deltaY];
30563}
30564function scrollValues(event) {
30565  var _ref, _ref2;
30566  const {
30567    scrollX,
30568    scrollY,
30569    scrollLeft,
30570    scrollTop
30571  } = event.currentTarget;
30572  return [(_ref = scrollX !== null && scrollX !== void 0 ? scrollX : scrollLeft) !== null && _ref !== void 0 ? _ref : 0, (_ref2 = scrollY !== null && scrollY !== void 0 ? scrollY : scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0];
30573}
30574function getEventDetails(event) {
30575  const payload = {};
30576  if ('buttons' in event) payload.buttons = event.buttons;
30577  if ('shiftKey' in event) {
30578    const {
30579      shiftKey,
30580      altKey,
30581      metaKey,
30582      ctrlKey
30583    } = event;
30584    Object.assign(payload, {
30585      shiftKey,
30586      altKey,
30587      metaKey,
30588      ctrlKey
30589    });
30590  }
30591  return payload;
30592}
30593
30594function call(v, ...args) {
30595  if (typeof v === 'function') {
30596    return v(...args);
30597  } else {
30598    return v;
30599  }
30600}
30601function actions_b1cc53c2_esm_noop() {}
30602function actions_b1cc53c2_esm_chain(...fns) {
30603  if (fns.length === 0) return actions_b1cc53c2_esm_noop;
30604  if (fns.length === 1) return fns[0];
30605  return function () {
30606    let result;
30607    for (const fn of fns) {
30608      result = fn.apply(this, arguments) || result;
30609    }
30610    return result;
30611  };
30612}
30613function assignDefault(value, fallback) {
30614  return Object.assign({}, fallback, value || {});
30615}
30616
30617const BEFORE_LAST_KINEMATICS_DELAY = 32;
30618class Engine {
30619  constructor(ctrl, args, key) {
30620    this.ctrl = ctrl;
30621    this.args = args;
30622    this.key = key;
30623    if (!this.state) {
30624      this.state = {};
30625      this.computeValues([0, 0]);
30626      this.computeInitial();
30627      if (this.init) this.init();
30628      this.reset();
30629    }
30630  }
30631  get state() {
30632    return this.ctrl.state[this.key];
30633  }
30634  set state(state) {
30635    this.ctrl.state[this.key] = state;
30636  }
30637  get shared() {
30638    return this.ctrl.state.shared;
30639  }
30640  get eventStore() {
30641    return this.ctrl.gestureEventStores[this.key];
30642  }
30643  get timeoutStore() {
30644    return this.ctrl.gestureTimeoutStores[this.key];
30645  }
30646  get config() {
30647    return this.ctrl.config[this.key];
30648  }
30649  get sharedConfig() {
30650    return this.ctrl.config.shared;
30651  }
30652  get handler() {
30653    return this.ctrl.handlers[this.key];
30654  }
30655  reset() {
30656    const {
30657      state,
30658      shared,
30659      ingKey,
30660      args
30661    } = this;
30662    shared[ingKey] = state._active = state.active = state._blocked = state._force = false;
30663    state._step = [false, false];
30664    state.intentional = false;
30665    state._movement = [0, 0];
30666    state._distance = [0, 0];
30667    state._direction = [0, 0];
30668    state._delta = [0, 0];
30669    state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]];
30670    state.args = args;
30671    state.axis = undefined;
30672    state.memo = undefined;
30673    state.elapsedTime = 0;
30674    state.direction = [0, 0];
30675    state.distance = [0, 0];
30676    state.overflow = [0, 0];
30677    state._movementBound = [false, false];
30678    state.velocity = [0, 0];
30679    state.movement = [0, 0];
30680    state.delta = [0, 0];
30681    state.timeStamp = 0;
30682  }
30683  start(event) {
30684    const state = this.state;
30685    const config = this.config;
30686    if (!state._active) {
30687      this.reset();
30688      this.computeInitial();
30689      state._active = true;
30690      state.target = event.target;
30691      state.currentTarget = event.currentTarget;
30692      state.lastOffset = config.from ? call(config.from, state) : state.offset;
30693      state.offset = state.lastOffset;
30694    }
30695    state.startTime = state.timeStamp = event.timeStamp;
30696  }
30697  computeValues(values) {
30698    const state = this.state;
30699    state._values = values;
30700    state.values = this.config.transform(values);
30701  }
30702  computeInitial() {
30703    const state = this.state;
30704    state._initial = state._values;
30705    state.initial = state.values;
30706  }
30707  compute(event) {
30708    const {
30709      state,
30710      config,
30711      shared
30712    } = this;
30713    state.args = this.args;
30714    let dt = 0;
30715    if (event) {
30716      state.event = event;
30717      if (config.preventDefault && event.cancelable) state.event.preventDefault();
30718      state.type = event.type;
30719      shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size;
30720      shared.locked = !!document.pointerLockElement;
30721      Object.assign(shared, getEventDetails(event));
30722      shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0;
30723      dt = event.timeStamp - state.timeStamp;
30724      state.timeStamp = event.timeStamp;
30725      state.elapsedTime = state.timeStamp - state.startTime;
30726    }
30727    if (state._active) {
30728      const _absoluteDelta = state._delta.map(Math.abs);
30729      V.addTo(state._distance, _absoluteDelta);
30730    }
30731    if (this.axisIntent) this.axisIntent(event);
30732    const [_m0, _m1] = state._movement;
30733    const [t0, t1] = config.threshold;
30734    const {
30735      _step,
30736      values
30737    } = state;
30738    if (config.hasCustomTransform) {
30739      if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0];
30740      if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1];
30741    } else {
30742      if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0;
30743      if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1;
30744    }
30745    state.intentional = _step[0] !== false || _step[1] !== false;
30746    if (!state.intentional) return;
30747    const movement = [0, 0];
30748    if (config.hasCustomTransform) {
30749      const [v0, v1] = values;
30750      movement[0] = _step[0] !== false ? v0 - _step[0] : 0;
30751      movement[1] = _step[1] !== false ? v1 - _step[1] : 0;
30752    } else {
30753      movement[0] = _step[0] !== false ? _m0 - _step[0] : 0;
30754      movement[1] = _step[1] !== false ? _m1 - _step[1] : 0;
30755    }
30756    if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement);
30757    const previousOffset = state.offset;
30758    const gestureIsActive = state._active && !state._blocked || state.active;
30759    if (gestureIsActive) {
30760      state.first = state._active && !state.active;
30761      state.last = !state._active && state.active;
30762      state.active = shared[this.ingKey] = state._active;
30763      if (event) {
30764        if (state.first) {
30765          if ('bounds' in config) state._bounds = call(config.bounds, state);
30766          if (this.setup) this.setup();
30767        }
30768        state.movement = movement;
30769        this.computeOffset();
30770      }
30771    }
30772    const [ox, oy] = state.offset;
30773    const [[x0, x1], [y0, y1]] = state._bounds;
30774    state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0];
30775    state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false;
30776    state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false;
vendor: 8,564 bytes, lines 30777-31045
30777    const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0];
30778    state.offset = computeRubberband(state._bounds, state.offset, rubberband);
30779    state.delta = V.sub(state.offset, previousOffset);
30780    this.computeMovement();
30781    if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) {
30782      state.delta = V.sub(state.offset, previousOffset);
30783      const absoluteDelta = state.delta.map(Math.abs);
30784      V.addTo(state.distance, absoluteDelta);
30785      state.direction = state.delta.map(Math.sign);
30786      state._direction = state._delta.map(Math.sign);
30787      if (!state.first && dt > 0) {
30788        state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt];
30789      }
30790    }
30791  }
30792  emit() {
30793    const state = this.state;
30794    const shared = this.shared;
30795    const config = this.config;
30796    if (!state._active) this.clean();
30797    if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return;
30798    const memo = this.handler(actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, shared), state), {}, {
30799      [this.aliasKey]: state.values
30800    }));
30801    if (memo !== undefined) state.memo = memo;
30802  }
30803  clean() {
30804    this.eventStore.clean();
30805    this.timeoutStore.clean();
30806  }
30807}
30808
30809function selectAxis([dx, dy], threshold) {
30810  const absDx = Math.abs(dx);
30811  const absDy = Math.abs(dy);
30812  if (absDx > absDy && absDx > threshold) {
30813    return 'x';
30814  }
30815  if (absDy > absDx && absDy > threshold) {
30816    return 'y';
30817  }
30818  return undefined;
30819}
30820class CoordinatesEngine extends Engine {
30821  constructor(...args) {
30822    super(...args);
30823    actions_b1cc53c2_esm_defineProperty(this, "aliasKey", 'xy');
30824  }
30825  reset() {
30826    super.reset();
30827    this.state.axis = undefined;
30828  }
30829  init() {
30830    this.state.offset = [0, 0];
30831    this.state.lastOffset = [0, 0];
30832  }
30833  computeOffset() {
30834    this.state.offset = V.add(this.state.lastOffset, this.state.movement);
30835  }
30836  computeMovement() {
30837    this.state.movement = V.sub(this.state.offset, this.state.lastOffset);
30838  }
30839  axisIntent(event) {
30840    const state = this.state;
30841    const config = this.config;
30842    if (!state.axis && event) {
30843      const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold;
30844      state.axis = selectAxis(state._movement, threshold);
30845    }
30846    state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis;
30847  }
30848  restrictToAxis(v) {
30849    if (this.config.axis || this.config.lockDirection) {
30850      switch (this.state.axis) {
30851        case 'x':
30852          v[1] = 0;
30853          break;
30854        case 'y':
30855          v[0] = 0;
30856          break;
30857      }
30858    }
30859  }
30860}
30861
30862const actions_b1cc53c2_esm_identity = v => v;
30863const DEFAULT_RUBBERBAND = 0.15;
30864const commonConfigResolver = {
30865  enabled(value = true) {
30866    return value;
30867  },
30868  eventOptions(value, _k, config) {
30869    return actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, config.shared.eventOptions), value);
30870  },
30871  preventDefault(value = false) {
30872    return value;
30873  },
30874  triggerAllEvents(value = false) {
30875    return value;
30876  },
30877  rubberband(value = 0) {
30878    switch (value) {
30879      case true:
30880        return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND];
30881      case false:
30882        return [0, 0];
30883      default:
30884        return V.toVector(value);
30885    }
30886  },
30887  from(value) {
30888    if (typeof value === 'function') return value;
30889    if (value != null) return V.toVector(value);
30890  },
30891  transform(value, _k, config) {
30892    const transform = value || config.shared.transform;
30893    this.hasCustomTransform = !!transform;
30894    if (false) {}
30895    return transform || actions_b1cc53c2_esm_identity;
30896  },
30897  threshold(value) {
30898    return V.toVector(value, 0);
30899  }
30900};
30901if (false) {}
30902
30903const DEFAULT_AXIS_THRESHOLD = 0;
30904const coordinatesConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, commonConfigResolver), {}, {
30905  axis(_v, _k, {
30906    axis
30907  }) {
30908    this.lockDirection = axis === 'lock';
30909    if (!this.lockDirection) return axis;
30910  },
30911  axisThreshold(value = DEFAULT_AXIS_THRESHOLD) {
30912    return value;
30913  },
30914  bounds(value = {}) {
30915    if (typeof value === 'function') {
30916      return state => coordinatesConfigResolver.bounds(value(state));
30917    }
30918    if ('current' in value) {
30919      return () => value.current;
30920    }
30921    if (typeof HTMLElement === 'function' && value instanceof HTMLElement) {
30922      return value;
30923    }
30924    const {
30925      left = -Infinity,
30926      right = Infinity,
30927      top = -Infinity,
30928      bottom = Infinity
30929    } = value;
30930    return [[left, right], [top, bottom]];
30931  }
30932});
30933
30934const KEYS_DELTA_MAP = {
30935  ArrowRight: (displacement, factor = 1) => [displacement * factor, 0],
30936  ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0],
30937  ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor],
30938  ArrowDown: (displacement, factor = 1) => [0, displacement * factor]
30939};
30940class DragEngine extends CoordinatesEngine {
30941  constructor(...args) {
30942    super(...args);
30943    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'dragging');
30944  }
30945  reset() {
30946    super.reset();
30947    const state = this.state;
30948    state._pointerId = undefined;
30949    state._pointerActive = false;
30950    state._keyboardActive = false;
30951    state._preventScroll = false;
30952    state._delayed = false;
30953    state.swipe = [0, 0];
30954    state.tap = false;
30955    state.canceled = false;
30956    state.cancel = this.cancel.bind(this);
30957  }
30958  setup() {
30959    const state = this.state;
30960    if (state._bounds instanceof HTMLElement) {
30961      const boundRect = state._bounds.getBoundingClientRect();
30962      const targetRect = state.currentTarget.getBoundingClientRect();
30963      const _bounds = {
30964        left: boundRect.left - targetRect.left + state.offset[0],
30965        right: boundRect.right - targetRect.right + state.offset[0],
30966        top: boundRect.top - targetRect.top + state.offset[1],
30967        bottom: boundRect.bottom - targetRect.bottom + state.offset[1]
30968      };
30969      state._bounds = coordinatesConfigResolver.bounds(_bounds);
30970    }
30971  }
30972  cancel() {
30973    const state = this.state;
30974    if (state.canceled) return;
30975    state.canceled = true;
30976    state._active = false;
30977    setTimeout(() => {
30978      this.compute();
30979      this.emit();
30980    }, 0);
30981  }
30982  setActive() {
30983    this.state._active = this.state._pointerActive || this.state._keyboardActive;
30984  }
30985  clean() {
30986    this.pointerClean();
30987    this.state._pointerActive = false;
30988    this.state._keyboardActive = false;
30989    super.clean();
30990  }
30991  pointerDown(event) {
30992    const config = this.config;
30993    const state = this.state;
30994    if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return;
30995    const ctrlIds = this.ctrl.setEventIds(event);
30996    if (config.pointerCapture) {
30997      event.target.setPointerCapture(event.pointerId);
30998    }
30999    if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return;
31000    this.start(event);
31001    this.setupPointer(event);
31002    state._pointerId = pointerId(event);
31003    state._pointerActive = true;
31004    this.computeValues(pointerValues(event));
31005    this.computeInitial();
31006    if (config.preventScrollAxis && getPointerType(event) !== 'mouse') {
31007      state._active = false;
31008      this.setupScrollPrevention(event);
31009    } else if (config.delay > 0) {
31010      this.setupDelayTrigger(event);
31011      if (config.triggerAllEvents) {
31012        this.compute(event);
31013        this.emit();
31014      }
31015    } else {
31016      this.startPointerDrag(event);
31017    }
31018  }
31019  startPointerDrag(event) {
31020    const state = this.state;
31021    state._active = true;
31022    state._preventScroll = true;
31023    state._delayed = false;
31024    this.compute(event);
31025    this.emit();
31026  }
31027  pointerMove(event) {
31028    const state = this.state;
31029    const config = this.config;
31030    if (!state._pointerActive) return;
31031    if (state.type === event.type && event.timeStamp === state.timeStamp) return;
31032    const id = pointerId(event);
31033    if (state._pointerId !== undefined && id !== state._pointerId) return;
31034    const _values = pointerValues(event);
31035    if (document.pointerLockElement === event.target) {
31036      state._delta = [event.movementX, event.movementY];
31037    } else {
31038      state._delta = V.sub(_values, state._values);
31039      this.computeValues(_values);
31040    }
31041    V.addTo(state._movement, state._delta);
31042    this.compute(event);
31043    if (state._delayed && state.intentional) {
31044      this.timeoutStore.remove('dragDelay');
31045      state.active = false;
vendor: 5,628 bytes, lines 31046-31210
31046      this.startPointerDrag(event);
31047      return;
31048    }
31049    if (config.preventScrollAxis && !state._preventScroll) {
31050      if (state.axis) {
31051        if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') {
31052          state._active = false;
31053          this.clean();
31054          return;
31055        } else {
31056          this.timeoutStore.remove('startPointerDrag');
31057          this.startPointerDrag(event);
31058          return;
31059        }
31060      } else {
31061        return;
31062      }
31063    }
31064    this.emit();
31065  }
31066  pointerUp(event) {
31067    this.ctrl.setEventIds(event);
31068    try {
31069      if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) {
31070        ;
31071        event.target.releasePointerCapture(event.pointerId);
31072      }
31073    } catch (_unused) {
31074      if (false) {}
31075    }
31076    const state = this.state;
31077    const config = this.config;
31078    if (!state._active || !state._pointerActive) return;
31079    const id = pointerId(event);
31080    if (state._pointerId !== undefined && id !== state._pointerId) return;
31081    this.state._pointerActive = false;
31082    this.setActive();
31083    this.compute(event);
31084    const [dx, dy] = state._distance;
31085    state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold;
31086    if (state.tap && config.filterTaps) {
31087      state._force = true;
31088    } else {
31089      const [dirx, diry] = state.direction;
31090      const [vx, vy] = state.velocity;
31091      const [mx, my] = state.movement;
31092      const [svx, svy] = config.swipe.velocity;
31093      const [sx, sy] = config.swipe.distance;
31094      const sdt = config.swipe.duration;
31095      if (state.elapsedTime < sdt) {
31096        if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx;
31097        if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry;
31098      }
31099    }
31100    this.emit();
31101  }
31102  pointerClick(event) {
31103    if (!this.state.tap && event.detail > 0) {
31104      event.preventDefault();
31105      event.stopPropagation();
31106    }
31107  }
31108  setupPointer(event) {
31109    const config = this.config;
31110    const device = config.device;
31111    if (false) {}
31112    if (config.pointerLock) {
31113      event.currentTarget.requestPointerLock();
31114    }
31115    if (!config.pointerCapture) {
31116      this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
31117      this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
31118      this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this));
31119    }
31120  }
31121  pointerClean() {
31122    if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) {
31123      document.exitPointerLock();
31124    }
31125  }
31126  preventScroll(event) {
31127    if (this.state._preventScroll && event.cancelable) {
31128      event.preventDefault();
31129    }
31130  }
31131  setupScrollPrevention(event) {
31132    this.state._preventScroll = false;
31133    persistEvent(event);
31134    const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), {
31135      passive: false
31136    });
31137    this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove);
31138    this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove);
31139    this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event);
31140  }
31141  setupDelayTrigger(event) {
31142    this.state._delayed = true;
31143    this.timeoutStore.add('dragDelay', () => {
31144      this.state._step = [0, 0];
31145      this.startPointerDrag(event);
31146    }, this.config.delay);
31147  }
31148  keyDown(event) {
31149    const deltaFn = KEYS_DELTA_MAP[event.key];
31150    if (deltaFn) {
31151      const state = this.state;
31152      const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
31153      this.start(event);
31154      state._delta = deltaFn(this.config.keyboardDisplacement, factor);
31155      state._keyboardActive = true;
31156      V.addTo(state._movement, state._delta);
31157      this.compute(event);
31158      this.emit();
31159    }
31160  }
31161  keyUp(event) {
31162    if (!(event.key in KEYS_DELTA_MAP)) return;
31163    this.state._keyboardActive = false;
31164    this.setActive();
31165    this.compute(event);
31166    this.emit();
31167  }
31168  bind(bindFunction) {
31169    const device = this.config.device;
31170    bindFunction(device, 'start', this.pointerDown.bind(this));
31171    if (this.config.pointerCapture) {
31172      bindFunction(device, 'change', this.pointerMove.bind(this));
31173      bindFunction(device, 'end', this.pointerUp.bind(this));
31174      bindFunction(device, 'cancel', this.pointerUp.bind(this));
31175      bindFunction('lostPointerCapture', '', this.pointerUp.bind(this));
31176    }
31177    if (this.config.keys) {
31178      bindFunction('key', 'down', this.keyDown.bind(this));
31179      bindFunction('key', 'up', this.keyUp.bind(this));
31180    }
31181    if (this.config.filterTaps) {
31182      bindFunction('click', '', this.pointerClick.bind(this), {
31183        capture: true,
31184        passive: false
31185      });
31186    }
31187  }
31188}
31189function persistEvent(event) {
31190  'persist' in event && typeof event.persist === 'function' && event.persist();
31191}
31192
31193const actions_b1cc53c2_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement;
31194function supportsTouchEvents() {
31195  return actions_b1cc53c2_esm_isBrowser && 'ontouchstart' in window;
31196}
31197function isTouchScreen() {
31198  return supportsTouchEvents() || actions_b1cc53c2_esm_isBrowser && window.navigator.maxTouchPoints > 1;
31199}
31200function supportsPointerEvents() {
31201  return actions_b1cc53c2_esm_isBrowser && 'onpointerdown' in window;
31202}
31203function supportsPointerLock() {
31204  return actions_b1cc53c2_esm_isBrowser && 'exitPointerLock' in window.document;
31205}
31206function supportsGestureEvents() {
31207  try {
31208    return 'constructor' in GestureEvent;
31209  } catch (e) {
31210    return false;
vendor: 4,882 bytes, lines 31211-31377
31211  }
31212}
31213const SUPPORT = {
31214  isBrowser: actions_b1cc53c2_esm_isBrowser,
31215  gesture: supportsGestureEvents(),
31216  touch: isTouchScreen(),
31217  touchscreen: isTouchScreen(),
31218  pointer: supportsPointerEvents(),
31219  pointerLock: supportsPointerLock()
31220};
31221
31222const DEFAULT_PREVENT_SCROLL_DELAY = 250;
31223const DEFAULT_DRAG_DELAY = 180;
31224const DEFAULT_SWIPE_VELOCITY = 0.5;
31225const DEFAULT_SWIPE_DISTANCE = 50;
31226const DEFAULT_SWIPE_DURATION = 250;
31227const DEFAULT_KEYBOARD_DISPLACEMENT = 10;
31228const DEFAULT_DRAG_AXIS_THRESHOLD = {
31229  mouse: 0,
31230  touch: 0,
31231  pen: 8
31232};
31233const dragConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, {
31234  device(_v, _k, {
31235    pointer: {
31236      touch = false,
31237      lock = false,
31238      mouse = false
31239    } = {}
31240  }) {
31241    this.pointerLock = lock && SUPPORT.pointerLock;
31242    if (SUPPORT.touch && touch) return 'touch';
31243    if (this.pointerLock) return 'mouse';
31244    if (SUPPORT.pointer && !mouse) return 'pointer';
31245    if (SUPPORT.touch) return 'touch';
31246    return 'mouse';
31247  },
31248  preventScrollAxis(value, _k, {
31249    preventScroll
31250  }) {
31251    this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined;
31252    if (!SUPPORT.touchscreen || preventScroll === false) return undefined;
31253    return value ? value : preventScroll !== undefined ? 'y' : undefined;
31254  },
31255  pointerCapture(_v, _k, {
31256    pointer: {
31257      capture = true,
31258      buttons = 1,
31259      keys = true
31260    } = {}
31261  }) {
31262    this.pointerButtons = buttons;
31263    this.keys = keys;
31264    return !this.pointerLock && this.device === 'pointer' && capture;
31265  },
31266  threshold(value, _k, {
31267    filterTaps = false,
31268    tapsThreshold = 3,
31269    axis = undefined
31270  }) {
31271    const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0);
31272    this.filterTaps = filterTaps;
31273    this.tapsThreshold = tapsThreshold;
31274    return threshold;
31275  },
31276  swipe({
31277    velocity = DEFAULT_SWIPE_VELOCITY,
31278    distance = DEFAULT_SWIPE_DISTANCE,
31279    duration = DEFAULT_SWIPE_DURATION
31280  } = {}) {
31281    return {
31282      velocity: this.transform(V.toVector(velocity)),
31283      distance: this.transform(V.toVector(distance)),
31284      duration
31285    };
31286  },
31287  delay(value = 0) {
31288    switch (value) {
31289      case true:
31290        return DEFAULT_DRAG_DELAY;
31291      case false:
31292        return 0;
31293      default:
31294        return value;
31295    }
31296  },
31297  axisThreshold(value) {
31298    if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD;
31299    return actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
31300  },
31301  keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) {
31302    return value;
31303  }
31304});
31305if (false) {}
31306
31307function clampStateInternalMovementToBounds(state) {
31308  const [ox, oy] = state.overflow;
31309  const [dx, dy] = state._delta;
31310  const [dirx, diry] = state._direction;
31311  if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
31312    state._movement[0] = state._movementBound[0];
31313  }
31314  if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
31315    state._movement[1] = state._movementBound[1];
31316  }
31317}
31318
31319const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
31320const PINCH_WHEEL_RATIO = 100;
31321class PinchEngine extends Engine {
31322  constructor(...args) {
31323    super(...args);
31324    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'pinching');
31325    actions_b1cc53c2_esm_defineProperty(this, "aliasKey", 'da');
31326  }
31327  init() {
31328    this.state.offset = [1, 0];
31329    this.state.lastOffset = [1, 0];
31330    this.state._pointerEvents = new Map();
31331  }
31332  reset() {
31333    super.reset();
31334    const state = this.state;
31335    state._touchIds = [];
31336    state.canceled = false;
31337    state.cancel = this.cancel.bind(this);
31338    state.turns = 0;
31339  }
31340  computeOffset() {
31341    const {
31342      type,
31343      movement,
31344      lastOffset
31345    } = this.state;
31346    if (type === 'wheel') {
31347      this.state.offset = V.add(movement, lastOffset);
31348    } else {
31349      this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]];
31350    }
31351  }
31352  computeMovement() {
31353    const {
31354      offset,
31355      lastOffset
31356    } = this.state;
31357    this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]];
31358  }
31359  axisIntent() {
31360    const state = this.state;
31361    const [_m0, _m1] = state._movement;
31362    if (!state.axis) {
31363      const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1);
31364      if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
31365    }
31366  }
31367  restrictToAxis(v) {
31368    if (this.config.lockDirection) {
31369      if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0;
31370    }
31371  }
31372  cancel() {
31373    const state = this.state;
31374    if (state.canceled) return;
31375    setTimeout(() => {
31376      state.canceled = true;
31377      state._active = false;
vendor: 4,426 bytes, lines 31378-31510
31378      this.compute();
31379      this.emit();
31380    }, 0);
31381  }
31382  touchStart(event) {
31383    this.ctrl.setEventIds(event);
31384    const state = this.state;
31385    const ctrlTouchIds = this.ctrl.touchIds;
31386    if (state._active) {
31387      if (state._touchIds.every(id => ctrlTouchIds.has(id))) return;
31388    }
31389    if (ctrlTouchIds.size < 2) return;
31390    this.start(event);
31391    state._touchIds = Array.from(ctrlTouchIds).slice(0, 2);
31392    const payload = touchDistanceAngle(event, state._touchIds);
31393    this.pinchStart(event, payload);
31394  }
31395  pointerStart(event) {
31396    if (event.buttons != null && event.buttons % 2 !== 1) return;
31397    this.ctrl.setEventIds(event);
31398    event.target.setPointerCapture(event.pointerId);
31399    const state = this.state;
31400    const _pointerEvents = state._pointerEvents;
31401    const ctrlPointerIds = this.ctrl.pointerIds;
31402    if (state._active) {
31403      if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return;
31404    }
31405    if (_pointerEvents.size < 2) {
31406      _pointerEvents.set(event.pointerId, event);
31407    }
31408    if (state._pointerEvents.size < 2) return;
31409    this.start(event);
31410    const payload = distanceAngle(...Array.from(_pointerEvents.values()));
31411    this.pinchStart(event, payload);
31412  }
31413  pinchStart(event, payload) {
31414    const state = this.state;
31415    state.origin = payload.origin;
31416    this.computeValues([payload.distance, payload.angle]);
31417    this.computeInitial();
31418    this.compute(event);
31419    this.emit();
31420  }
31421  touchMove(event) {
31422    if (!this.state._active) return;
31423    const payload = touchDistanceAngle(event, this.state._touchIds);
31424    this.pinchMove(event, payload);
31425  }
31426  pointerMove(event) {
31427    const _pointerEvents = this.state._pointerEvents;
31428    if (_pointerEvents.has(event.pointerId)) {
31429      _pointerEvents.set(event.pointerId, event);
31430    }
31431    if (!this.state._active) return;
31432    const payload = distanceAngle(...Array.from(_pointerEvents.values()));
31433    this.pinchMove(event, payload);
31434  }
31435  pinchMove(event, payload) {
31436    const state = this.state;
31437    const prev_a = state._values[1];
31438    const delta_a = payload.angle - prev_a;
31439    let delta_turns = 0;
31440    if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a);
31441    this.computeValues([payload.distance, payload.angle - 360 * delta_turns]);
31442    state.origin = payload.origin;
31443    state.turns = delta_turns;
31444    state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]];
31445    this.compute(event);
31446    this.emit();
31447  }
31448  touchEnd(event) {
31449    this.ctrl.setEventIds(event);
31450    if (!this.state._active) return;
31451    if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) {
31452      this.state._active = false;
31453      this.compute(event);
31454      this.emit();
31455    }
31456  }
31457  pointerEnd(event) {
31458    const state = this.state;
31459    this.ctrl.setEventIds(event);
31460    try {
31461      event.target.releasePointerCapture(event.pointerId);
31462    } catch (_unused) {}
31463    if (state._pointerEvents.has(event.pointerId)) {
31464      state._pointerEvents.delete(event.pointerId);
31465    }
31466    if (!state._active) return;
31467    if (state._pointerEvents.size < 2) {
31468      state._active = false;
31469      this.compute(event);
31470      this.emit();
31471    }
31472  }
31473  gestureStart(event) {
31474    if (event.cancelable) event.preventDefault();
31475    const state = this.state;
31476    if (state._active) return;
31477    this.start(event);
31478    this.computeValues([event.scale, event.rotation]);
31479    state.origin = [event.clientX, event.clientY];
31480    this.compute(event);
31481    this.emit();
31482  }
31483  gestureMove(event) {
31484    if (event.cancelable) event.preventDefault();
31485    if (!this.state._active) return;
31486    const state = this.state;
31487    this.computeValues([event.scale, event.rotation]);
31488    state.origin = [event.clientX, event.clientY];
31489    const _previousMovement = state._movement;
31490    state._movement = [event.scale - 1, event.rotation];
31491    state._delta = V.sub(state._movement, _previousMovement);
31492    this.compute(event);
31493    this.emit();
31494  }
31495  gestureEnd(event) {
31496    if (!this.state._active) return;
31497    this.state._active = false;
31498    this.compute(event);
31499    this.emit();
31500  }
31501  wheel(event) {
31502    const modifierKey = this.config.modifierKey;
31503    if (modifierKey && !event[modifierKey]) return;
31504    if (!this.state._active) this.wheelStart(event);else this.wheelChange(event);
31505    this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
31506  }
31507  wheelStart(event) {
31508    this.start(event);
31509    this.wheelChange(event);
31510  }
vendor: 7,558 bytes, lines 31511-31768
31511  wheelChange(event) {
31512    const isR3f = ('uv' in event);
31513    if (!isR3f) {
31514      if (event.cancelable) {
31515        event.preventDefault();
31516      }
31517      if (false) {}
31518    }
31519    const state = this.state;
31520    state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
31521    V.addTo(state._movement, state._delta);
31522    clampStateInternalMovementToBounds(state);
31523    this.state.origin = [event.clientX, event.clientY];
31524    this.compute(event);
31525    this.emit();
31526  }
31527  wheelEnd() {
31528    if (!this.state._active) return;
31529    this.state._active = false;
31530    this.compute();
31531    this.emit();
31532  }
31533  bind(bindFunction) {
31534    const device = this.config.device;
31535    if (!!device) {
31536      bindFunction(device, 'start', this[device + 'Start'].bind(this));
31537      bindFunction(device, 'change', this[device + 'Move'].bind(this));
31538      bindFunction(device, 'end', this[device + 'End'].bind(this));
31539      bindFunction(device, 'cancel', this[device + 'End'].bind(this));
31540    }
31541    if (this.config.pinchOnWheel) {
31542      bindFunction('wheel', '', this.wheel.bind(this), {
31543        passive: false
31544      });
31545    }
31546  }
31547}
31548
31549const pinchConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, commonConfigResolver), {}, {
31550  device(_v, _k, {
31551    shared,
31552    pointer: {
31553      touch = false
31554    } = {}
31555  }) {
31556    const sharedConfig = shared;
31557    if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
31558    if (SUPPORT.touch && touch) return 'touch';
31559    if (SUPPORT.touchscreen) {
31560      if (SUPPORT.pointer) return 'pointer';
31561      if (SUPPORT.touch) return 'touch';
31562    }
31563  },
31564  bounds(_v, _k, {
31565    scaleBounds = {},
31566    angleBounds = {}
31567  }) {
31568    const _scaleBounds = state => {
31569      const D = assignDefault(call(scaleBounds, state), {
31570        min: -Infinity,
31571        max: Infinity
31572      });
31573      return [D.min, D.max];
31574    };
31575    const _angleBounds = state => {
31576      const A = assignDefault(call(angleBounds, state), {
31577        min: -Infinity,
31578        max: Infinity
31579      });
31580      return [A.min, A.max];
31581    };
31582    if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()];
31583    return state => [_scaleBounds(state), _angleBounds(state)];
31584  },
31585  threshold(value, _k, config) {
31586    this.lockDirection = config.axis === 'lock';
31587    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
31588    return threshold;
31589  },
31590  modifierKey(value) {
31591    if (value === undefined) return 'ctrlKey';
31592    return value;
31593  },
31594  pinchOnWheel(value = true) {
31595    return value;
31596  }
31597});
31598
31599class MoveEngine extends CoordinatesEngine {
31600  constructor(...args) {
31601    super(...args);
31602    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'moving');
31603  }
31604  move(event) {
31605    if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
31606    if (!this.state._active) this.moveStart(event);else this.moveChange(event);
31607    this.timeoutStore.add('moveEnd', this.moveEnd.bind(this));
31608  }
31609  moveStart(event) {
31610    this.start(event);
31611    this.computeValues(pointerValues(event));
31612    this.compute(event);
31613    this.computeInitial();
31614    this.emit();
31615  }
31616  moveChange(event) {
31617    if (!this.state._active) return;
31618    const values = pointerValues(event);
31619    const state = this.state;
31620    state._delta = V.sub(values, state._values);
31621    V.addTo(state._movement, state._delta);
31622    this.computeValues(values);
31623    this.compute(event);
31624    this.emit();
31625  }
31626  moveEnd(event) {
31627    if (!this.state._active) return;
31628    this.state._active = false;
31629    this.compute(event);
31630    this.emit();
31631  }
31632  bind(bindFunction) {
31633    bindFunction('pointer', 'change', this.move.bind(this));
31634    bindFunction('pointer', 'leave', this.moveEnd.bind(this));
31635  }
31636}
31637
31638const moveConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, {
31639  mouseOnly: (value = true) => value
31640});
31641
31642class ScrollEngine extends CoordinatesEngine {
31643  constructor(...args) {
31644    super(...args);
31645    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'scrolling');
31646  }
31647  scroll(event) {
31648    if (!this.state._active) this.start(event);
31649    this.scrollChange(event);
31650    this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this));
31651  }
31652  scrollChange(event) {
31653    if (event.cancelable) event.preventDefault();
31654    const state = this.state;
31655    const values = scrollValues(event);
31656    state._delta = V.sub(values, state._values);
31657    V.addTo(state._movement, state._delta);
31658    this.computeValues(values);
31659    this.compute(event);
31660    this.emit();
31661  }
31662  scrollEnd() {
31663    if (!this.state._active) return;
31664    this.state._active = false;
31665    this.compute();
31666    this.emit();
31667  }
31668  bind(bindFunction) {
31669    bindFunction('scroll', '', this.scroll.bind(this));
31670  }
31671}
31672
31673const scrollConfigResolver = coordinatesConfigResolver;
31674
31675class WheelEngine extends CoordinatesEngine {
31676  constructor(...args) {
31677    super(...args);
31678    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'wheeling');
31679  }
31680  wheel(event) {
31681    if (!this.state._active) this.start(event);
31682    this.wheelChange(event);
31683    this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
31684  }
31685  wheelChange(event) {
31686    const state = this.state;
31687    state._delta = wheelValues(event);
31688    V.addTo(state._movement, state._delta);
31689    clampStateInternalMovementToBounds(state);
31690    this.compute(event);
31691    this.emit();
31692  }
31693  wheelEnd() {
31694    if (!this.state._active) return;
31695    this.state._active = false;
31696    this.compute();
31697    this.emit();
31698  }
31699  bind(bindFunction) {
31700    bindFunction('wheel', '', this.wheel.bind(this));
31701  }
31702}
31703
31704const wheelConfigResolver = coordinatesConfigResolver;
31705
31706class HoverEngine extends CoordinatesEngine {
31707  constructor(...args) {
31708    super(...args);
31709    actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'hovering');
31710  }
31711  enter(event) {
31712    if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
31713    this.start(event);
31714    this.computeValues(pointerValues(event));
31715    this.compute(event);
31716    this.emit();
31717  }
31718  leave(event) {
31719    if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
31720    const state = this.state;
31721    if (!state._active) return;
31722    state._active = false;
31723    const values = pointerValues(event);
31724    state._movement = state._delta = V.sub(values, state._values);
31725    this.computeValues(values);
31726    this.compute(event);
31727    state.delta = state.movement;
31728    this.emit();
31729  }
31730  bind(bindFunction) {
31731    bindFunction('pointer', 'enter', this.enter.bind(this));
31732    bindFunction('pointer', 'leave', this.leave.bind(this));
31733  }
31734}
31735
31736const hoverConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, {
31737  mouseOnly: (value = true) => value
31738});
31739
31740const actions_b1cc53c2_esm_EngineMap = new Map();
31741const ConfigResolverMap = new Map();
31742function actions_b1cc53c2_esm_registerAction(action) {
31743  actions_b1cc53c2_esm_EngineMap.set(action.key, action.engine);
31744  ConfigResolverMap.set(action.key, action.resolver);
31745}
31746const actions_b1cc53c2_esm_dragAction = {
31747  key: 'drag',
31748  engine: DragEngine,
31749  resolver: dragConfigResolver
31750};
31751const actions_b1cc53c2_esm_hoverAction = {
31752  key: 'hover',
31753  engine: HoverEngine,
31754  resolver: hoverConfigResolver
31755};
31756const actions_b1cc53c2_esm_moveAction = {
31757  key: 'move',
31758  engine: MoveEngine,
31759  resolver: moveConfigResolver
31760};
31761const actions_b1cc53c2_esm_pinchAction = {
31762  key: 'pinch',
31763  engine: PinchEngine,
31764  resolver: pinchConfigResolver
31765};
31766const actions_b1cc53c2_esm_scrollAction = {
31767  key: 'scroll',
31768  engine: ScrollEngine,
vendor: 9,498 bytes, lines 31769-32064
31769  resolver: scrollConfigResolver
31770};
31771const actions_b1cc53c2_esm_wheelAction = {
31772  key: 'wheel',
31773  engine: WheelEngine,
31774  resolver: wheelConfigResolver
31775};
31776
31777
31778
31779;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js
31780
31781
31782
31783function use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded) {
31784  if (source == null) return {};
31785  var target = {};
31786  var sourceKeys = Object.keys(source);
31787  var key, i;
31788  for (i = 0; i < sourceKeys.length; i++) {
31789    key = sourceKeys[i];
31790    if (excluded.indexOf(key) >= 0) continue;
31791    target[key] = source[key];
31792  }
31793  return target;
31794}
31795
31796function _objectWithoutProperties(source, excluded) {
31797  if (source == null) return {};
31798  var target = use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded);
31799  var key, i;
31800  if (Object.getOwnPropertySymbols) {
31801    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
31802    for (i = 0; i < sourceSymbolKeys.length; i++) {
31803      key = sourceSymbolKeys[i];
31804      if (excluded.indexOf(key) >= 0) continue;
31805      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
31806      target[key] = source[key];
31807    }
31808  }
31809  return target;
31810}
31811
31812const sharedConfigResolver = {
31813  target(value) {
31814    if (value) {
31815      return () => 'current' in value ? value.current : value;
31816    }
31817    return undefined;
31818  },
31819  enabled(value = true) {
31820    return value;
31821  },
31822  window(value = SUPPORT.isBrowser ? window : undefined) {
31823    return value;
31824  },
31825  eventOptions({
31826    passive = true,
31827    capture = false
31828  } = {}) {
31829    return {
31830      passive,
31831      capture
31832    };
31833  },
31834  transform(value) {
31835    return value;
31836  }
31837};
31838
31839const _excluded = ["target", "eventOptions", "window", "enabled", "transform"];
31840function resolveWith(config = {}, resolvers) {
31841  const result = {};
31842  for (const [key, resolver] of Object.entries(resolvers)) {
31843    switch (typeof resolver) {
31844      case 'function':
31845        if (false) {} else {
31846          result[key] = resolver.call(result, config[key], key, config);
31847        }
31848        break;
31849      case 'object':
31850        result[key] = resolveWith(config[key], resolver);
31851        break;
31852      case 'boolean':
31853        if (resolver) result[key] = config[key];
31854        break;
31855    }
31856  }
31857  return result;
31858}
31859function use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) {
31860  const _ref = newConfig,
31861    {
31862      target,
31863      eventOptions,
31864      window,
31865      enabled,
31866      transform
31867    } = _ref,
31868    rest = _objectWithoutProperties(_ref, _excluded);
31869  _config.shared = resolveWith({
31870    target,
31871    eventOptions,
31872    window,
31873    enabled,
31874    transform
31875  }, sharedConfigResolver);
31876  if (gestureKey) {
31877    const resolver = ConfigResolverMap.get(gestureKey);
31878    _config[gestureKey] = resolveWith(actions_b1cc53c2_esm_objectSpread2({
31879      shared: _config.shared
31880    }, rest), resolver);
31881  } else {
31882    for (const key in rest) {
31883      const resolver = ConfigResolverMap.get(key);
31884      if (resolver) {
31885        _config[key] = resolveWith(actions_b1cc53c2_esm_objectSpread2({
31886          shared: _config.shared
31887        }, rest[key]), resolver);
31888      } else if (false) {}
31889    }
31890  }
31891  return _config;
31892}
31893
31894class EventStore {
31895  constructor(ctrl, gestureKey) {
31896    actions_b1cc53c2_esm_defineProperty(this, "_listeners", new Set());
31897    this._ctrl = ctrl;
31898    this._gestureKey = gestureKey;
31899  }
31900  add(element, device, action, handler, options) {
31901    const listeners = this._listeners;
31902    const type = toDomEventType(device, action);
31903    const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
31904    const eventOptions = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, _options), options);
31905    element.addEventListener(type, handler, eventOptions);
31906    const remove = () => {
31907      element.removeEventListener(type, handler, eventOptions);
31908      listeners.delete(remove);
31909    };
31910    listeners.add(remove);
31911    return remove;
31912  }
31913  clean() {
31914    this._listeners.forEach(remove => remove());
31915    this._listeners.clear();
31916  }
31917}
31918
31919class TimeoutStore {
31920  constructor() {
31921    actions_b1cc53c2_esm_defineProperty(this, "_timeouts", new Map());
31922  }
31923  add(key, callback, ms = 140, ...args) {
31924    this.remove(key);
31925    this._timeouts.set(key, window.setTimeout(callback, ms, ...args));
31926  }
31927  remove(key) {
31928    const timeout = this._timeouts.get(key);
31929    if (timeout) window.clearTimeout(timeout);
31930  }
31931  clean() {
31932    this._timeouts.forEach(timeout => void window.clearTimeout(timeout));
31933    this._timeouts.clear();
31934  }
31935}
31936
31937class Controller {
31938  constructor(handlers) {
31939    actions_b1cc53c2_esm_defineProperty(this, "gestures", new Set());
31940    actions_b1cc53c2_esm_defineProperty(this, "_targetEventStore", new EventStore(this));
31941    actions_b1cc53c2_esm_defineProperty(this, "gestureEventStores", {});
31942    actions_b1cc53c2_esm_defineProperty(this, "gestureTimeoutStores", {});
31943    actions_b1cc53c2_esm_defineProperty(this, "handlers", {});
31944    actions_b1cc53c2_esm_defineProperty(this, "config", {});
31945    actions_b1cc53c2_esm_defineProperty(this, "pointerIds", new Set());
31946    actions_b1cc53c2_esm_defineProperty(this, "touchIds", new Set());
31947    actions_b1cc53c2_esm_defineProperty(this, "state", {
31948      shared: {
31949        shiftKey: false,
31950        metaKey: false,
31951        ctrlKey: false,
31952        altKey: false
31953      }
31954    });
31955    resolveGestures(this, handlers);
31956  }
31957  setEventIds(event) {
31958    if (isTouch(event)) {
31959      this.touchIds = new Set(touchIds(event));
31960      return this.touchIds;
31961    } else if ('pointerId' in event) {
31962      if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId);
31963      return this.pointerIds;
31964    }
31965  }
31966  applyHandlers(handlers, nativeHandlers) {
31967    this.handlers = handlers;
31968    this.nativeHandlers = nativeHandlers;
31969  }
31970  applyConfig(config, gestureKey) {
31971    this.config = use_gesture_core_esm_parse(config, gestureKey, this.config);
31972  }
31973  clean() {
31974    this._targetEventStore.clean();
31975    for (const key of this.gestures) {
31976      this.gestureEventStores[key].clean();
31977      this.gestureTimeoutStores[key].clean();
31978    }
31979  }
31980  effect() {
31981    if (this.config.shared.target) this.bind();
31982    return () => this._targetEventStore.clean();
31983  }
31984  bind(...args) {
31985    const sharedConfig = this.config.shared;
31986    const props = {};
31987    let target;
31988    if (sharedConfig.target) {
31989      target = sharedConfig.target();
31990      if (!target) return;
31991    }
31992    if (sharedConfig.enabled) {
31993      for (const gestureKey of this.gestures) {
31994        const gestureConfig = this.config[gestureKey];
31995        const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target);
31996        if (gestureConfig.enabled) {
31997          const Engine = actions_b1cc53c2_esm_EngineMap.get(gestureKey);
31998          new Engine(this, args, gestureKey).bind(bindFunction);
31999        }
32000      }
32001      const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
32002      for (const eventKey in this.nativeHandlers) {
32003        nativeBindFunction(eventKey, '', event => this.nativeHandlers[eventKey](actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, this.state.shared), {}, {
32004          event,
32005          args
32006        })), undefined, true);
32007      }
32008    }
32009    for (const handlerProp in props) {
32010      props[handlerProp] = actions_b1cc53c2_esm_chain(...props[handlerProp]);
32011    }
32012    if (!target) return props;
32013    for (const handlerProp in props) {
32014      const {
32015        device,
32016        capture,
32017        passive
32018      } = parseProp(handlerProp);
32019      this._targetEventStore.add(target, device, '', props[handlerProp], {
32020        capture,
32021        passive
32022      });
32023    }
32024  }
32025}
32026function setupGesture(ctrl, gestureKey) {
32027  ctrl.gestures.add(gestureKey);
32028  ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
32029  ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
32030}
32031function resolveGestures(ctrl, internalHandlers) {
32032  if (internalHandlers.drag) setupGesture(ctrl, 'drag');
32033  if (internalHandlers.wheel) setupGesture(ctrl, 'wheel');
32034  if (internalHandlers.scroll) setupGesture(ctrl, 'scroll');
32035  if (internalHandlers.move) setupGesture(ctrl, 'move');
32036  if (internalHandlers.pinch) setupGesture(ctrl, 'pinch');
32037  if (internalHandlers.hover) setupGesture(ctrl, 'hover');
32038}
32039const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => {
32040  var _options$capture, _options$passive;
32041  const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture;
32042  const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive;
32043  let handlerProp = isNative ? device : toHandlerProp(device, action, capture);
32044  if (withPassiveOption && passive) handlerProp += 'Passive';
32045  props[handlerProp] = props[handlerProp] || [];
32046  props[handlerProp].push(handler);
32047};
32048
32049const RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/;
32050function sortHandlers(_handlers) {
32051  const native = {};
32052  const handlers = {};
32053  const actions = new Set();
32054  for (let key in _handlers) {
32055    if (RE_NOT_NATIVE.test(key)) {
32056      actions.add(RegExp.lastMatch);
32057      handlers[key] = _handlers[key];
32058    } else {
32059      native[key] = _handlers[key];
32060    }
32061  }
32062  return [handlers, native, actions];
32063}
32064function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) {
32065  if (!actions.has(handlerKey)) return;
32066  if (!EngineMap.has(key)) {
32067    if (false) {}
32068    return;
32069  }
32070  const startKey = handlerKey + 'Start';
32071  const endKey = handlerKey + 'End';
32072  const fn = state => {
32073    let memo = undefined;
32074    if (state.first && startKey in handlers) handlers[startKey](state);
32075    if (handlerKey in handlers) memo = handlers[handlerKey](state);
32076    if (state.last && endKey in handlers) handlers[endKey](state);
32077    return memo;
32078  };
32079  internalHandlers[key] = fn;
32080  config[key] = config[key] || {};
32081}
32082function use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) {
32083  const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers);
32084  const internalHandlers = {};
32085  registerGesture(actions, handlers, 'onDrag', 'drag', internalHandlers, mergedConfig);
32086  registerGesture(actions, handlers, 'onWheel', 'wheel', internalHandlers, mergedConfig);
32087  registerGesture(actions, handlers, 'onScroll', 'scroll', internalHandlers, mergedConfig);
32088  registerGesture(actions, handlers, 'onPinch', 'pinch', internalHandlers, mergedConfig);
32089  registerGesture(actions, handlers, 'onMove', 'move', internalHandlers, mergedConfig);
32090  registerGesture(actions, handlers, 'onHover', 'hover', internalHandlers, mergedConfig);
32091  return {
32092    handlers: internalHandlers,
32093    config: mergedConfig,
32094    nativeHandlers
32095  };
32096}
32097
32098
32099
32100;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js
32101
32102
32103
32104
32105
32106
32107
32108function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
32109  const ctrl = external_React_default().useMemo(() => new Controller(handlers), []);
32110  ctrl.applyHandlers(handlers, nativeHandlers);
32111  ctrl.applyConfig(config, gestureKey);
32112  external_React_default().useEffect(ctrl.effect.bind(ctrl));
32113  external_React_default().useEffect(() => {
32114    return ctrl.clean.bind(ctrl);
32115  }, []);
32116  if (config.target === undefined) {
32117    return ctrl.bind.bind(ctrl);
32118  }
32119  return undefined;
32120}
32121
32122function useDrag(handler, config) {
32123  actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_dragAction);
32124  return useRecognizers({
32125    drag: handler
32126  }, config || {}, 'drag');
32127}
32128
32129function usePinch(handler, config) {
32130  registerAction(pinchAction);
32131  return useRecognizers({
32132    pinch: handler
32133  }, config || {}, 'pinch');
32134}
32135
32136function useWheel(handler, config) {
32137  registerAction(wheelAction);
32138  return useRecognizers({
32139    wheel: handler
32140  }, config || {}, 'wheel');
32141}
32142
32143function useScroll(handler, config) {
32144  registerAction(scrollAction);
32145  return useRecognizers({
32146    scroll: handler
32147  }, config || {}, 'scroll');
32148}
32149
32150function useMove(handler, config) {
32151  registerAction(moveAction);
32152  return useRecognizers({
32153    move: handler
32154  }, config || {}, 'move');
32155}
32156
32157function useHover(handler, config) {
32158  actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_hoverAction);
32159  return useRecognizers({
32160    hover: handler
32161  }, config || {}, 'hover');
32162}
32163
32164function createUseGesture(actions) {
32165  actions.forEach(registerAction);
32166  return function useGesture(_handlers, _config) {
32167    const {
32168      handlers,
32169      nativeHandlers,
32170      config
32171    } = parseMergedHandlers(_handlers, _config || {});
32172    return useRecognizers(handlers, config, undefined, nativeHandlers);
32173  };
32174}
32175
32176function useGesture(handlers, config) {
32177  const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]);
32178  return hook(handlers, config || {});
32179}
32180
32181
32182
32183;// CONCATENATED MODULE: ./packages/components/build-module/input-control/utils.js
32184/**
32185 * External dependencies
32186 */
32187
32188/**
32189 * WordPress dependencies
32190 */
32191
32192
32193/**
32194 * Internal dependencies
32195 */
32196
32197/**
32198 * Gets a CSS cursor value based on a drag direction.
32199 *
32200 * @param dragDirection The drag direction.
32201 * @return  The CSS cursor value.
32202 */
32203function getDragCursor(dragDirection) {
32204  let dragCursor = 'ns-resize';
32205  switch (dragDirection) {
32206    case 'n':
32207    case 's':
32208      dragCursor = 'ns-resize';
32209      break;
32210    case 'e':
32211    case 'w':
32212      dragCursor = 'ew-resize';
32213      break;
32214  }
32215  return dragCursor;
32216}
32217
32218/**
32219 * Custom hook that renders a drag cursor when dragging.
32220 *
32221 * @param {boolean} isDragging    The dragging state.
32222 * @param {string}  dragDirection The drag direction.
32223 *
32224 * @return {string} The CSS cursor value.
32225 */
32226function useDragCursor(isDragging, dragDirection) {
32227  const dragCursor = getDragCursor(dragDirection);
32228  (0,external_wp_element_namespaceObject.useEffect)(() => {
32229    if (isDragging) {
32230      document.documentElement.style.cursor = dragCursor;
32231    } else {
32232      // @ts-expect-error
32233      document.documentElement.style.cursor = null;
32234    }
32235  }, [isDragging, dragCursor]);
32236  return dragCursor;
32237}
32238function useDraft(props) {
32239  const refPreviousValue = (0,external_wp_element_namespaceObject.useRef)(props.value);
32240  const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({});
32241  const value = draft.value !== undefined ? draft.value : props.value;
32242
32243  // Determines when to discard the draft value to restore controlled status.
32244  // To do so, it tracks the previous value and marks the draft value as stale
32245  // after each render.
32246  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
32247    const {
32248      current: previousValue
32249    } = refPreviousValue;
32250    refPreviousValue.current = props.value;
32251    if (draft.value !== undefined && !draft.isStale) setDraft({
32252      ...draft,
32253      isStale: true
32254    });else if (draft.isStale && props.value !== previousValue) setDraft({});
32255  }, [props.value, draft]);
32256  const onChange = (nextValue, extra) => {
32257    // Mutates the draft value to avoid an extra effect run.
32258    setDraft(current => Object.assign(current, {
32259      value: nextValue,
32260      isStale: false
32261    }));
32262    props.onChange(nextValue, extra);
32263  };
32264  const onBlur = event => {
32265    setDraft({});
32266    props.onBlur?.(event);
32267  };
32268  return {
32269    value,
32270    onBlur,
32271    onChange
32272  };
32273}
32274
32275;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/state.js
32276/**
32277 * External dependencies
32278 */
32279
32280/**
32281 * Internal dependencies
32282 */
32283
32284const initialStateReducer = state => state;
32285const initialInputControlState = {
32286  error: null,
32287  initialValue: '',
32288  isDirty: false,
32289  isDragEnabled: false,
32290  isDragging: false,
32291  isPressEnterToChange: false,
32292  value: ''
32293};
32294
32295;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/actions.js
32296/**
32297 * External dependencies
32298 */
32299
32300/**
32301 * Internal dependencies
32302 */
32303
32304const CHANGE = 'CHANGE';
32305const COMMIT = 'COMMIT';
32306const CONTROL = 'CONTROL';
32307const DRAG_END = 'DRAG_END';
32308const DRAG_START = 'DRAG_START';
32309const DRAG = 'DRAG';
32310const INVALIDATE = 'INVALIDATE';
32311const PRESS_DOWN = 'PRESS_DOWN';
32312const PRESS_ENTER = 'PRESS_ENTER';
32313const PRESS_UP = 'PRESS_UP';
32314const RESET = 'RESET';
32315
32316;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/reducer.js
32317/**
32318 * External dependencies
32319 */
32320
32321/**
32322 * WordPress dependencies
32323 */
32324
32325
32326/**
32327 * Internal dependencies
32328 */
32329
32330
32331
32332/**
32333 * Prepares initialState for the reducer.
32334 *
32335 * @param initialState The initial state.
32336 * @return Prepared initialState for the reducer
32337 */
32338function mergeInitialState(initialState = initialInputControlState) {
32339  const {
32340    value
32341  } = initialState;
32342  return {
32343    ...initialInputControlState,
32344    ...initialState,
32345    initialValue: value
32346  };
32347}
32348
32349/**
32350 * Creates the base reducer which may be coupled to a specializing reducer.
32351 * As its final step, for all actions other than CONTROL, the base reducer
32352 * passes the state and action on through the specializing reducer. The
32353 * exception for CONTROL actions is because they represent controlled updates
32354 * from props and no case has yet presented for their specialization.
32355 *
32356 * @param composedStateReducers A reducer to specialize state changes.
32357 * @return The reducer.
32358 */
32359function inputControlStateReducer(composedStateReducers) {
32360  return (state, action) => {
32361    const nextState = {
32362      ...state
32363    };
32364    switch (action.type) {
32365      /*
32366       * Controlled updates
32367       */
32368      case CONTROL:
32369        nextState.value = action.payload.value;
32370        nextState.isDirty = false;
32371        nextState._event = undefined;
32372        // Returns immediately to avoid invoking additional reducers.
32373        return nextState;
32374
32375      /**
32376       * Keyboard events
32377       */
32378      case PRESS_UP:
32379        nextState.isDirty = false;
32380        break;
32381      case PRESS_DOWN:
32382        nextState.isDirty = false;
32383        break;
32384
32385      /**
32386       * Drag events
32387       */
32388      case DRAG_START:
32389        nextState.isDragging = true;
32390        break;
32391      case DRAG_END:
32392        nextState.isDragging = false;
32393        break;
32394
32395      /**
32396       * Input events
32397       */
32398      case CHANGE:
32399        nextState.error = null;
32400        nextState.value = action.payload.value;
32401        if (state.isPressEnterToChange) {
32402          nextState.isDirty = true;
32403        }
32404        break;
32405      case COMMIT:
32406        nextState.value = action.payload.value;
32407        nextState.isDirty = false;
32408        break;
32409      case RESET:
32410        nextState.error = null;
32411        nextState.isDirty = false;
32412        nextState.value = action.payload.value || state.initialValue;
32413        break;
32414
32415      /**
32416       * Validation
32417       */
32418      case INVALIDATE:
32419        nextState.error = action.payload.error;
32420        break;
32421    }
32422    nextState._event = action.payload.event;
32423
32424    /**
32425     * Send the nextState + action to the composedReducers via
32426     * this "bridge" mechanism. This allows external stateReducers
32427     * to hook into actions, and modify state if needed.
32428     */
32429    return composedStateReducers(nextState, action);
32430  };
32431}
32432
32433/**
32434 * A custom hook that connects and external stateReducer with an internal
32435 * reducer. This hook manages the internal state of InputControl.
32436 * However, by connecting an external stateReducer function, other
32437 * components can react to actions as well as modify state before it is
32438 * applied.
32439 *
32440 * This technique uses the "stateReducer" design pattern:
32441 * https://kentcdodds.com/blog/the-state-reducer-pattern/
32442 *
32443 * @param stateReducer    An external state reducer.
32444 * @param initialState    The initial state for the reducer.
32445 * @param onChangeHandler A handler for the onChange event.
32446 * @return State, dispatch, and a collection of actions.
32447 */
32448function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {
32449  const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState));
32450  const createChangeEvent = type => (nextValue, event) => {
32451    dispatch({
32452      type,
32453      payload: {
32454        value: nextValue,
32455        event
32456      }
32457    });
32458  };
32459  const createKeyEvent = type => event => {
32460    dispatch({
32461      type,
32462      payload: {
32463        event
32464      }
32465    });
32466  };
32467  const createDragEvent = type => payload => {
32468    dispatch({
32469      type,
32470      payload
32471    });
32472  };
32473
32474  /**
32475   * Actions for the reducer
32476   */
32477  const change = createChangeEvent(CHANGE);
32478  const invalidate = (error, event) => dispatch({
32479    type: INVALIDATE,
32480    payload: {
32481      error,
32482      event
32483    }
32484  });
32485  const reset = createChangeEvent(RESET);
32486  const commit = createChangeEvent(COMMIT);
32487  const dragStart = createDragEvent(DRAG_START);
32488  const drag = createDragEvent(DRAG);
32489  const dragEnd = createDragEvent(DRAG_END);
32490  const pressUp = createKeyEvent(PRESS_UP);
32491  const pressDown = createKeyEvent(PRESS_DOWN);
32492  const pressEnter = createKeyEvent(PRESS_ENTER);
32493  const currentState = (0,external_wp_element_namespaceObject.useRef)(state);
32494  const refProps = (0,external_wp_element_namespaceObject.useRef)({
32495    value: initialState.value,
32496    onChangeHandler
32497  });
32498
32499  // Freshens refs to props and state so that subsequent effects have access
32500  // to their latest values without their changes causing effect runs.
32501  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
32502    currentState.current = state;
32503    refProps.current = {
32504      value: initialState.value,
32505      onChangeHandler
32506    };
32507  });
32508
32509  // Propagates the latest state through onChange.
32510  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
32511    if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
32512      var _state$value;
32513      refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
32514        event: currentState.current._event
32515      });
32516    }
32517  }, [state.value, state.isDirty]);
32518
32519  // Updates the state from props.
32520  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
32521    if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
32522      var _initialState$value;
32523      dispatch({
32524        type: CONTROL,
32525        payload: {
32526          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''
32527        }
32528      });
32529    }
32530  }, [initialState.value]);
32531  return {
32532    change,
32533    commit,
32534    dispatch,
32535    drag,
32536    dragEnd,
32537    dragStart,
32538    invalidate,
32539    pressDown,
32540    pressEnter,
32541    pressUp,
32542    reset,
32543    state
32544  };
32545}
32546
32547;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-field.js
32548
32549/**
32550 * External dependencies
32551 */
32552
32553/**
32554 * WordPress dependencies
32555 */
32556
32557/**
32558 * Internal dependencies
32559 */
32560
32561
32562
32563
32564const input_field_noop = () => {};
32565function InputField({
32566  disabled = false,
32567  dragDirection = 'n',
32568  dragThreshold = 10,
32569  id,
32570  isDragEnabled = false,
32571  isFocused,
32572  isPressEnterToChange = false,
32573  onBlur = input_field_noop,
32574  onChange = input_field_noop,
32575  onDrag = input_field_noop,
32576  onDragEnd = input_field_noop,
32577  onDragStart = input_field_noop,
32578  onFocus = input_field_noop,
32579  onKeyDown = input_field_noop,
32580  onValidate = input_field_noop,
32581  size = 'default',
32582  setIsFocused,
32583  stateReducer = state => state,
32584  value: valueProp,
32585  type,
32586  ...props
32587}, ref) {
32588  const {
32589    // State.
32590    state,
32591    // Actions.
32592    change,
32593    commit,
32594    drag,
32595    dragEnd,
32596    dragStart,
32597    invalidate,
32598    pressDown,
32599    pressEnter,
32600    pressUp,
32601    reset
32602  } = useInputControlStateReducer(stateReducer, {
32603    isDragEnabled,
32604    value: valueProp,
32605    isPressEnterToChange
32606  }, onChange);
32607  const {
32608    value,
32609    isDragging,
32610    isDirty
32611  } = state;
32612  const wasDirtyOnBlur = (0,external_wp_element_namespaceObject.useRef)(false);
32613  const dragCursor = useDragCursor(isDragging, dragDirection);
32614  const handleOnBlur = event => {
32615    onBlur(event);
32616    setIsFocused?.(false);
32617
32618    /**
32619     * If isPressEnterToChange is set, this commits the value to
32620     * the onChange callback.
32621     */
32622    if (isDirty || !event.target.validity.valid) {
32623      wasDirtyOnBlur.current = true;
32624      handleOnCommit(event);
32625    }
32626  };
32627  const handleOnFocus = event => {
32628    onFocus(event);
32629    setIsFocused?.(true);
32630  };
32631  const handleOnChange = event => {
32632    const nextValue = event.target.value;
32633    change(nextValue, event);
32634  };
32635  const handleOnCommit = event => {
32636    const nextValue = event.currentTarget.value;
32637    try {
32638      onValidate(nextValue);
32639      commit(nextValue, event);
32640    } catch (err) {
32641      invalidate(err, event);
32642    }
32643  };
32644  const handleOnKeyDown = event => {
32645    const {
32646      key
32647    } = event;
32648    onKeyDown(event);
32649    switch (key) {
32650      case 'ArrowUp':
32651        pressUp(event);
32652        break;
32653      case 'ArrowDown':
32654        pressDown(event);
32655        break;
32656      case 'Enter':
32657        pressEnter(event);
32658        if (isPressEnterToChange) {
32659          event.preventDefault();
32660          handleOnCommit(event);
32661        }
32662        break;
32663      case 'Escape':
32664        if (isPressEnterToChange && isDirty) {
32665          event.preventDefault();
32666          reset(valueProp, event);
32667        }
32668        break;
32669    }
32670  };
32671  const dragGestureProps = useDrag(dragProps => {
32672    const {
32673      distance,
32674      dragging,
32675      event,
32676      target
32677    } = dragProps;
32678
32679    // The `target` prop always references the `input` element while, by
32680    // default, the `dragProps.event.target` property would reference the real
32681    // event target (i.e. any DOM element that the pointer is hovering while
32682    // dragging). Ensuring that the `target` is always the `input` element
32683    // allows consumers of `InputControl` (or any higher-level control) to
32684    // check the input's validity by accessing `event.target.validity.valid`.
32685    dragProps.event = {
32686      ...dragProps.event,
32687      target
32688    };
32689    if (!distance) return;
32690    event.stopPropagation();
32691
32692    /**
32693     * Quick return if no longer dragging.
32694     * This prevents unnecessary value calculations.
32695     */
32696    if (!dragging) {
32697      onDragEnd(dragProps);
32698      dragEnd(dragProps);
32699      return;
32700    }
32701    onDrag(dragProps);
32702    drag(dragProps);
32703    if (!isDragging) {
32704      onDragStart(dragProps);
32705      dragStart(dragProps);
32706    }
32707  }, {
32708    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
32709    threshold: dragThreshold,
32710    enabled: isDragEnabled,
32711    pointer: {
32712      capture: false
32713    }
32714  });
32715  const dragProps = isDragEnabled ? dragGestureProps() : {};
32716  /*
32717   * Works around the odd UA (e.g. Firefox) that does not focus inputs of
32718   * type=number when their spinner arrows are pressed.
32719   */
32720  let handleOnMouseDown;
32721  if (type === 'number') {
32722    handleOnMouseDown = event => {
32723      props.onMouseDown?.(event);
32724      if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
32725        event.currentTarget.focus();
32726      }
32727    };
32728  }
32729  return (0,external_wp_element_namespaceObject.createElement)(Input, {
32730    ...props,
32731    ...dragProps,
32732    className: "components-input-control__input",
32733    disabled: disabled,
32734    dragCursor: dragCursor,
32735    isDragging: isDragging,
32736    id: id,
32737    onBlur: handleOnBlur,
32738    onChange: handleOnChange,
32739    onFocus: handleOnFocus,
32740    onKeyDown: handleOnKeyDown,
32741    onMouseDown: handleOnMouseDown,
32742    ref: ref,
32743    inputSize: size
32744    // Fallback to `''` to avoid "uncontrolled to controlled" warning.
32745    // See https://github.com/WordPress/gutenberg/pull/47250 for details.
32746    ,
32747    value: value !== null && value !== void 0 ? value : '',
32748    type: type
32749  });
32750}
32751const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField);
32752/* harmony default export */ const input_field = (ForwardedComponent);
32753
32754;// CONCATENATED MODULE: ./packages/components/build-module/utils/font-values.js
32755/* harmony default export */ const font_values = ({
32756  'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
32757  'default.fontSize': '13px',
32758  'helpText.fontSize': '12px',
32759  mobileTextMinFontSize: '16px'
32760});
32761
32762;// CONCATENATED MODULE: ./packages/components/build-module/utils/font.js
32763/**
32764 * Internal dependencies
32765 */
32766
32767
32768/**
32769 *
32770 * @param {keyof FONT} value Path of value from `FONT`
32771 * @return {string} Font rule value
32772 */
32773function font(value) {
32774  var _FONT$value;
32775  return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';
32776}
32777
32778;// CONCATENATED MODULE: ./packages/components/build-module/utils/box-sizing.js
32779function box_sizing_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)."; }
32780/**
32781 * External dependencies
32782 */
32783
32784const boxSizingReset =  true ? {
32785  name: "kv6lnz",
32786  styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
32787} : 0;
32788
32789;// CONCATENATED MODULE: ./packages/components/build-module/base-control/styles/base-control-styles.js
32790
32791function base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
32792/**
32793 * External dependencies
32794 */
32795
32796
32797
32798/**
32799 * Internal dependencies
32800 */
32801
32802
32803const base_control_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
32804  target: "ej5x27r4"
32805} : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0));
32806const deprecatedMarginField = ({
32807  __nextHasNoMarginBottom = false
32808}) => {
32809  return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0),  true ? "" : 0);
32810};
32811const StyledField = emotion_styled_base_browser_esm("div",  true ? {
32812  target: "ej5x27r3"
32813} : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0));
32814const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0),  true ? "" : 0);
32815const StyledLabel = emotion_styled_base_browser_esm("label",  true ? {
32816  target: "ej5x27r2"
32817} : 0)(labelStyles, ";" + ( true ? "" : 0));
32818var base_control_styles_ref =  true ? {
32819  name: "11yad0w",
32820  styles: "margin-bottom:revert"
32821} : 0;
32822const deprecatedMarginHelp = ({
32823  __nextHasNoMarginBottom = false
32824}) => {
32825  return !__nextHasNoMarginBottom && base_control_styles_ref;
32826};
32827const StyledHelp = emotion_styled_base_browser_esm("p",  true ? {
32828  target: "ej5x27r1"
32829} : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + ( true ? "" : 0));
32830const StyledVisualLabel = emotion_styled_base_browser_esm("span",  true ? {
32831  target: "ej5x27r0"
32832} : 0)(labelStyles, ";" + ( true ? "" : 0));
32833
32834;// CONCATENATED MODULE: ./packages/components/build-module/base-control/index.js
32835
32836/**
32837 * External dependencies
32838 */
32839
32840
32841/**
32842 * Internal dependencies
32843 */
32844
32845
32846
32847
32848/**
32849 * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
32850 *
32851 * ```jsx
32852 * import { BaseControl, useBaseControlProps } from '@wordpress/components';
32853 *
32854 * // Render a `BaseControl` for a textarea input
32855 * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
32856 * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
32857 * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
32858 * 	// properly associating it with the `label` and `help` elements.
32859 * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
32860 *
32861 * 	return (
32862 * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
32863 * 			<textarea { ...controlProps }>
32864 * 			  { children }
32865 * 			</textarea>
32866 * 		</BaseControl>
32867 * 	);
32868 * );
32869 * ```
32870 */
32871const BaseControl = ({
32872  __nextHasNoMarginBottom = false,
32873  id,
32874  label,
32875  hideLabelFromVision = false,
32876  help,
32877  className,
32878  children
32879}) => {
32880  return (0,external_wp_element_namespaceObject.createElement)(base_control_styles_Wrapper, {
32881    className: classnames_default()('components-base-control', className)
32882  }, (0,external_wp_element_namespaceObject.createElement)(StyledField, {
32883    className: "components-base-control__field"
32884    // TODO: Official deprecation for this should start after all internal usages have been migrated
32885    ,
32886    __nextHasNoMarginBottom: __nextHasNoMarginBottom
32887  }, label && id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
32888    as: "label",
32889    htmlFor: id
32890  }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, {
32891    className: "components-base-control__label",
32892    htmlFor: id
32893  }, label)), label && !id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
32894    as: "label"
32895  }, label) : (0,external_wp_element_namespaceObject.createElement)(BaseControl.VisualLabel, null, label)), children), !!help && (0,external_wp_element_namespaceObject.createElement)(StyledHelp, {
32896    id: id ? id + '__help' : undefined,
32897    className: "components-base-control__help",
32898    __nextHasNoMarginBottom: __nextHasNoMarginBottom
32899  }, help));
32900};
32901
32902/**
32903 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
32904 *
32905 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
32906 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
32907 * otherwise use if the `label` prop was passed.
32908 *
32909 * @example
32910 * import { BaseControl } from '@wordpress/components';
32911 *
32912 * const MyBaseControl = () => (
32913 * 	<BaseControl help="This button is already accessibly labeled.">
32914 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
32915 * 		<Button>Select an author</Button>
32916 * 	</BaseControl>
32917 * );
32918 */
32919const VisualLabel = ({
32920  className,
32921  children,
32922  ...props
32923}) => {
32924  return (0,external_wp_element_namespaceObject.createElement)(StyledVisualLabel, {
32925    ...props,
32926    className: classnames_default()('components-base-control__label', className)
32927  }, children);
32928};
32929BaseControl.VisualLabel = VisualLabel;
32930/* harmony default export */ const base_control = (BaseControl);
32931
32932;// CONCATENATED MODULE: ./packages/components/build-module/input-control/index.js
32933
32934/**
32935 * External dependencies
32936 */
32937
32938/**
32939 * WordPress dependencies
32940 */
32941
32942
32943
32944/**
32945 * Internal dependencies
32946 */
32947
32948
32949
32950
32951
32952const input_control_noop = () => {};
32953function input_control_useUniqueId(idProp) {
32954  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl);
32955  const id = `inspector-input-control-${instanceId}`;
32956  return idProp || id;
32957}
32958function UnforwardedInputControl({
32959  __next36pxDefaultSize,
32960  __unstableStateReducer: stateReducer = state => state,
32961  __unstableInputWidth,
32962  className,
32963  disabled = false,
32964  help,
32965  hideLabelFromVision = false,
32966  id: idProp,
32967  isPressEnterToChange = false,
32968  label,
32969  labelPosition = 'top',
32970  onChange = input_control_noop,
32971  onValidate = input_control_noop,
32972  onKeyDown = input_control_noop,
32973  prefix,
32974  size = 'default',
32975  style,
32976  suffix,
32977  value,
32978  ...props
32979}, ref) {
32980  const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
32981  const id = input_control_useUniqueId(idProp);
32982  const classes = classnames_default()('components-input-control', className);
32983  const draftHookProps = useDraft({
32984    value,
32985    onBlur: props.onBlur,
32986    onChange
32987  });
32988
32989  // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
32990  const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
32991  const helpProp = !!help ? {
32992    [helpPropName]: `${id}__help`
32993  } : {};
32994  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
32995    className: classes,
32996    help: help,
32997    id: id,
32998    __nextHasNoMarginBottom: true
32999  }, (0,external_wp_element_namespaceObject.createElement)(input_base, {
33000    __next36pxDefaultSize: __next36pxDefaultSize,
33001    __unstableInputWidth: __unstableInputWidth,
33002    disabled: disabled,
33003    gap: 3,
33004    hideLabelFromVision: hideLabelFromVision,
33005    id: id,
33006    isFocused: isFocused,
33007    justify: "left",
33008    label: label,
33009    labelPosition: labelPosition,
33010    prefix: prefix,
33011    size: size,
33012    style: style,
33013    suffix: suffix
33014  }, (0,external_wp_element_namespaceObject.createElement)(input_field, {
33015    ...props,
33016    ...helpProp,
33017    __next36pxDefaultSize: __next36pxDefaultSize,
33018    className: "components-input-control__input",
33019    disabled: disabled,
33020    id: id,
33021    isFocused: isFocused,
33022    isPressEnterToChange: isPressEnterToChange,
33023    onKeyDown: onKeyDown,
33024    onValidate: onValidate,
33025    paddingInlineStart: prefix ? space(2) : undefined,
33026    paddingInlineEnd: suffix ? space(2) : undefined,
33027    ref: ref,
33028    setIsFocused: setIsFocused,
33029    size: size,
33030    stateReducer: stateReducer,
33031    ...draftHookProps
33032  })));
33033}
33034
33035/**
33036 * InputControl components let users enter and edit text. This is an experimental component
33037 * intended to (in time) merge with or replace `TextControl`.
33038 *
33039 * ```jsx
33040 * import { __experimentalInputControl as InputControl } from '@wordpress/components';
33041 * import { useState } from '@wordpress/compose';
33042 *
33043 * const Example = () => {
33044 *   const [ value, setValue ] = useState( '' );
33045 *
33046 *   return (
33047 *  	<InputControl
33048 *  		value={ value }
33049 *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
33050 *  	/>
33051 *   );
33052 * };
33053 * ```
33054 */
33055const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl);
33056/* harmony default export */ const input_control = (InputControl);
33057
33058;// CONCATENATED MODULE: ./packages/components/build-module/dashicon/index.js
33059
33060/**
33061 * @typedef OwnProps
33062 *
33063 * @property {import('./types').IconKey} icon        Icon name
33064 * @property {string}                    [className] Class name
33065 * @property {number}                    [size]      Size of the icon
33066 */
33067
33068/**
33069 * Internal dependencies
33070 */
33071
33072function Dashicon({
33073  icon,
33074  className,
33075  size = 20,
33076  style = {},
33077  ...extraProps
33078}) {
33079  const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' ');
33080
33081  // For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default
33082  const sizeStyles =
33083  // using `!=` to catch both 20 and "20"
33084  // eslint-disable-next-line eqeqeq
33085  20 != size ? {
33086    fontSize: `${size}px`,
33087    width: `${size}px`,
33088    height: `${size}px`
33089  } : {};
33090  const styles = {
33091    ...sizeStyles,
33092    ...style
33093  };
33094  return (0,external_wp_element_namespaceObject.createElement)("span", {
33095    className: iconClass,
33096    style: styles,
33097    ...extraProps
33098  });
33099}
33100/* harmony default export */ const dashicon = (Dashicon);
33101
33102;// CONCATENATED MODULE: ./packages/components/build-module/icon/index.js
33103/**
33104 * External dependencies
33105 */
33106
33107/**
33108 * WordPress dependencies
33109 */
33110
33111
33112
33113/**
33114 * Internal dependencies
33115 */
33116
33117function Icon({
33118  icon = null,
33119  size = 'string' === typeof icon ? 20 : 24,
33120  ...additionalProps
33121}) {
33122  if ('string' === typeof icon) {
33123    return (0,external_wp_element_namespaceObject.createElement)(dashicon, {
33124      icon: icon,
33125      size: size,
33126      ...additionalProps
33127    });
33128  }
33129  if ((0,external_wp_element_namespaceObject.isValidElement)(icon) && dashicon === icon.type) {
33130    return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
33131      ...additionalProps
33132    });
33133  }
33134  if ('function' === typeof icon) {
33135    return (0,external_wp_element_namespaceObject.createElement)(icon, {
33136      size,
33137      ...additionalProps
33138    });
33139  }
33140  if (icon && (icon.type === 'svg' || icon.type === external_wp_primitives_namespaceObject.SVG)) {
33141    const appliedProps = {
33142      ...icon.props,
33143      width: size,
33144      height: size,
33145      ...additionalProps
33146    };
33147    return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
33148      ...appliedProps
33149    });
33150  }
33151  if ((0,external_wp_element_namespaceObject.isValidElement)(icon)) {
33152    return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
33153      // @ts-ignore Just forwarding the size prop along
33154      size,
33155      ...additionalProps
33156    });
33157  }
33158  return icon;
33159}
33160/* harmony default export */ const build_module_icon = (Icon);
33161
33162;// CONCATENATED MODULE: ./packages/components/build-module/button/index.js
33163
33164/**
33165 * External dependencies
33166 */
33167
33168/**
33169 * WordPress dependencies
33170 */
33171
33172
33173
33174
33175/**
33176 * Internal dependencies
33177 */
33178
33179
33180
33181
33182const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];
33183function button_useDeprecatedProps({
33184  isDefault,
33185  isPrimary,
33186  isSecondary,
33187  isTertiary,
33188  isLink,
33189  isSmall,
33190  size,
33191  variant,
33192  ...otherProps
33193}) {
33194  let computedSize = size;
33195  let computedVariant = variant;
33196  if (isSmall) {
33197    var _computedSize;
33198    (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small';
33199  }
33200  if (isPrimary) {
33201    var _computedVariant;
33202    (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary';
33203  }
33204  if (isTertiary) {
33205    var _computedVariant2;
33206    (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary';
33207  }
33208  if (isSecondary) {
33209    var _computedVariant3;
33210    (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary';
33211  }
33212  if (isDefault) {
33213    var _computedVariant4;
33214    external_wp_deprecated_default()('Button isDefault prop', {
33215      since: '5.4',
33216      alternative: 'variant="secondary"',
33217      version: '6.2'
33218    });
33219    (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary';
33220  }
33221  if (isLink) {
33222    var _computedVariant5;
33223    (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link';
33224  }
33225  return {
33226    ...otherProps,
33227    size: computedSize,
33228    variant: computedVariant
33229  };
33230}
33231function UnforwardedButton(props, ref) {
33232  const {
33233    __next40pxDefaultSize,
33234    isPressed,
33235    isBusy,
33236    isDestructive,
33237    className,
33238    disabled,
33239    icon,
33240    iconPosition = 'left',
33241    iconSize,
33242    showTooltip,
33243    tooltipPosition,
33244    shortcut,
33245    label,
33246    children,
33247    size = 'default',
33248    text,
33249    variant,
33250    __experimentalIsFocusable: isFocusable,
33251    describedBy,
33252    ...buttonOrAnchorProps
33253  } = button_useDeprecatedProps(props);
33254  const {
33255    href,
33256    target,
33257    ...additionalProps
33258  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {
33259    href: undefined,
33260    target: undefined,
33261    ...buttonOrAnchorProps
33262  };
33263  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Button, 'components-button__description');
33264  const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&
33265  // Tooltip should not considered as a child
33266  children?.[0]?.props?.className !== 'components-tooltip';
33267  const classes = classnames_default()('components-button', className, {
33268    'is-next-40px-default-size': __next40pxDefaultSize,
33269    'is-secondary': variant === 'secondary',
33270    'is-primary': variant === 'primary',
33271    'is-small': size === 'small',
33272    'is-compact': size === 'compact',
33273    'is-tertiary': variant === 'tertiary',
33274    'is-pressed': isPressed,
33275    'is-busy': isBusy,
33276    'is-link': variant === 'link',
33277    'is-destructive': isDestructive,
33278    'has-text': !!icon && hasChildren,
33279    'has-icon': !!icon
33280  });
33281  const trulyDisabled = disabled && !isFocusable;
33282  const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button';
33283  const buttonProps = Tag === 'button' ? {
33284    type: 'button',
33285    disabled: trulyDisabled,
33286    'aria-pressed': isPressed
33287  } : {};
33288  const anchorProps = Tag === 'a' ? {
33289    href,
33290    target
33291  } : {};
33292  if (disabled && isFocusable) {
33293    // In this case, the button will be disabled, but still focusable and
33294    // perceivable by screen reader users.
33295    buttonProps['aria-disabled'] = true;
33296    anchorProps['aria-disabled'] = true;
33297    for (const disabledEvent of disabledEventsOnDisabledButton) {
33298      additionalProps[disabledEvent] = event => {
33299        if (event) {
33300          event.stopPropagation();
33301          event.preventDefault();
33302        }
33303      };
33304    }
33305  }
33306
33307  // Should show the tooltip if...
33308  const shouldShowTooltip = !trulyDisabled && (
33309  // An explicit tooltip is passed or...
33310  showTooltip && label ||
33311  // There's a shortcut or...
33312  shortcut ||
33313  // There's a label and...
33314  !!label &&
33315  // The children are empty and...
33316  !children?.length &&
33317  // The tooltip is not explicitly disabled.
33318  false !== showTooltip);
33319  const descriptionId = describedBy ? instanceId : undefined;
33320  const describedById = additionalProps['aria-describedby'] || descriptionId;
33321  const commonProps = {
33322    className: classes,
33323    'aria-label': additionalProps['aria-label'] || label,
33324    'aria-describedby': describedById,
33325    ref
33326  };
33327  const elementChildren = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, icon && iconPosition === 'left' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
33328    icon: icon,
33329    size: iconSize
33330  }), text && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, text), icon && iconPosition === 'right' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
33331    icon: icon,
33332    size: iconSize
33333  }), children);
33334  const element = Tag === 'a' ? (0,external_wp_element_namespaceObject.createElement)("a", {
33335    ...anchorProps,
33336    ...additionalProps,
33337    ...commonProps
33338  }, elementChildren) : (0,external_wp_element_namespaceObject.createElement)("button", {
33339    ...buttonProps,
33340    ...additionalProps,
33341    ...commonProps
33342  }, elementChildren);
33343
33344  // Convert legacy `position` values to be used with the new `placement` prop
33345  let computedPlacement;
33346  // if `tooltipPosition` is defined, compute value to `placement`
33347  if (tooltipPosition !== undefined) {
33348    computedPlacement = positionToPlacement(tooltipPosition);
33349  }
33350  if (!shouldShowTooltip) {
33351    return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, element, describedBy && (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, (0,external_wp_element_namespaceObject.createElement)("span", {
33352      id: descriptionId
33353    }, describedBy)));
33354  }
33355  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(tooltip, {
33356    text: children?.length && describedBy ? describedBy : label,
33357    shortcut: shortcut,
33358    placement: computedPlacement
33359  }, element), describedBy && (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, (0,external_wp_element_namespaceObject.createElement)("span", {
33360    id: descriptionId
33361  }, describedBy)));
33362}
33363
33364/**
33365 * Lets users take actions and make choices with a single click or tap.
33366 *
33367 * ```jsx
33368 * import { Button } from '@wordpress/components';
33369 * const Mybutton = () => (
33370 *   <Button
33371 *     variant="primary"
33372 *     onClick={ handleClick }
33373 *   >
33374 *     Click here
33375 *   </Button>
33376 * );
33377 * ```
33378 */
33379const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton);
33380/* harmony default export */ const build_module_button = (Button);
33381
33382;// CONCATENATED MODULE: ./packages/components/build-module/number-control/styles/number-control-styles.js
33383
33384function number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
33385/**
33386 * External dependencies
33387 */
33388
33389/**
33390 * Internal dependencies
33391 */
33392
33393
33394
33395
33396var number_control_styles_ref =  true ? {
33397  name: "euqsgg",
33398  styles: "input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}input[type='number']{-moz-appearance:textfield;}"
33399} : 0;
33400const htmlArrowStyles = ({
33401  hideHTMLArrows
33402}) => {
33403  if (!hideHTMLArrows) {
33404    return ``;
33405  }
33406  return number_control_styles_ref;
33407};
33408const number_control_styles_Input = /*#__PURE__*/emotion_styled_base_browser_esm(input_control,  true ? {
33409  target: "ep09it41"
33410} : 0)(htmlArrowStyles, ";" + ( true ? "" : 0));
33411const SpinButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
33412  target: "ep09it40"
33413} : 0)("&&&&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
33414const smallSpinButtons = /*#__PURE__*/emotion_react_browser_esm_
33414css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + ( true ? "" : 0),  true ? "" : 0);
33415const styles = {
33416  smallSpinButtons
33417};
33418
33419;// CONCATENATED MODULE: ./packages/components/build-module/utils/math.js
33420/**
33421 * Parses and retrieves a number value.
33422 *
33423 * @param {unknown} value The incoming value.
33424 *
33425 * @return {number} The parsed number value.
33426 */
33427function getNumber(value) {
33428  const number = Number(value);
33429  return isNaN(number) ? 0 : number;
33430}
33431
33432/**
33433 * Safely adds 2 values.
33434 *
33435 * @param {Array<number|string>} args Values to add together.
33436 *
33437 * @return {number} The sum of values.
33438 */
33439function add(...args) {
33440  return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
33441  (sum, arg) => sum + getNumber(arg), 0);
33442}
33443
33444/**
33445 * Safely subtracts 2 values.
33446 *
33447 * @param {Array<number|string>} args Values to subtract together.
33448 *
33449 * @return {number} The difference of the values.
33450 */
33451function subtract(...args) {
33452  return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
33453  (diff, arg, index) => {
33454    const value = getNumber(arg);
33455    return index === 0 ? value : diff - value;
33456  }, 0);
33457}
33458
33459/**
33460 * Determines the decimal position of a number value.
33461 *
33462 * @param {number} value The number to evaluate.
33463 *
33464 * @return {number} The number of decimal places.
33465 */
33466function getPrecision(value) {
33467  const split = (value + '').split('.');
33468  return split[1] !== undefined ? split[1].length : 0;
33469}
33470
33471/**
33472 * Clamps a value based on a min/max range.
33473 *
33474 * @param {number} value The value.
33475 * @param {number} min   The minimum range.
33476 * @param {number} max   The maximum range.
33477 *
33478 * @return {number} The clamped value.
33479 */
33480function math_clamp(value, min, max) {
33481  const baseValue = getNumber(value);
33482  return Math.max(min, Math.min(baseValue, max));
33483}
33484
33485/**
33486 * Clamps a value based on a min/max range with rounding
33487 *
33488 * @param {number | string} value The value.
33489 * @param {number}          min   The minimum range.
33490 * @param {number}          max   The maximum range.
33491 * @param {number}          step  A multiplier for the value.
33492 *
33493 * @return {number} The rounded and clamped value.
33494 */
33495function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) {
33496  const baseValue = getNumber(value);
33497  const stepValue = getNumber(step);
33498  const precision = getPrecision(step);
33499  const rounded = Math.round(baseValue / stepValue) * stepValue;
33500  const clampedValue = math_clamp(rounded, min, max);
33501  return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
33502}
33503
33504;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/utils.js
33505/**
33506 * External dependencies
33507 */
33508
33509/**
33510 * Internal dependencies
33511 */
33512
33513
33514const H_ALIGNMENTS = {
33515  bottom: {
33516    align: 'flex-end',
33517    justify: 'center'
33518  },
33519  bottomLeft: {
33520    align: 'flex-end',
33521    justify: 'flex-start'
33522  },
33523  bottomRight: {
33524    align: 'flex-end',
33525    justify: 'flex-end'
33526  },
33527  center: {
33528    align: 'center',
33529    justify: 'center'
33530  },
33531  edge: {
33532    align: 'center',
33533    justify: 'space-between'
33534  },
33535  left: {
33536    align: 'center',
33537    justify: 'flex-start'
33538  },
33539  right: {
33540    align: 'center',
33541    justify: 'flex-end'
33542  },
33543  stretch: {
33544    align: 'stretch'
33545  },
33546  top: {
33547    align: 'flex-start',
33548    justify: 'center'
33549  },
33550  topLeft: {
33551    align: 'flex-start',
33552    justify: 'flex-start'
33553  },
33554  topRight: {
33555    align: 'flex-start',
33556    justify: 'flex-end'
33557  }
33558};
33559const V_ALIGNMENTS = {
33560  bottom: {
33561    justify: 'flex-end',
33562    align: 'center'
33563  },
33564  bottomLeft: {
33565    justify: 'flex-end',
33566    align: 'flex-start'
33567  },
33568  bottomRight: {
33569    justify: 'flex-end',
33570    align: 'flex-end'
33571  },
33572  center: {
33573    justify: 'center',
33574    align: 'center'
33575  },
33576  edge: {
33577    justify: 'space-between',
33578    align: 'center'
33579  },
33580  left: {
33581    justify: 'center',
33582    align: 'flex-start'
33583  },
33584  right: {
33585    justify: 'center',
33586    align: 'flex-end'
33587  },
33588  stretch: {
33589    align: 'stretch'
33590  },
33591  top: {
33592    justify: 'flex-start',
33593    align: 'center'
33594  },
33595  topLeft: {
33596    justify: 'flex-start',
33597    align: 'flex-start'
33598  },
33599  topRight: {
33600    justify: 'flex-start',
33601    align: 'flex-end'
33602  }
33603};
33604function getAlignmentProps(alignment, direction = 'row') {
33605  if (!isValueDefined(alignment)) {
33606    return {};
33607  }
33608  const isVertical = direction === 'column';
33609  const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
33610  const alignmentProps = alignment in props ? props[alignment] : {
33611    align: alignment
33612  };
33613  return alignmentProps;
33614}
33615
33616;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/get-valid-children.js
33617/**
33618 * External dependencies
33619 */
33620
33621/**
33622 * WordPress dependencies
33623 */
33624
33625
33626/**
33627 * Gets a collection of available children elements from a React component's children prop.
33628 *
33629 * @param children
33630 *
33631 * @return An array of available children.
33632 */
33633function getValidChildren(children) {
33634  if (typeof children === 'string') return [children];
33635  return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child));
33636}
33637
33638;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/hook.js
33639
33640/**
33641 * External dependencies
33642 */
33643
33644/**
33645 * Internal dependencies
33646 */
33647
33648
33649
33650
33651
33652function useHStack(props) {
33653  const {
33654    alignment = 'edge',
33655    children,
33656    direction,
33657    spacing = 2,
33658    ...otherProps
33659  } = useContextSystem(props, 'HStack');
33660  const align = getAlignmentProps(alignment, direction);
33661  const validChildren = getValidChildren(children);
33662  const clonedChildren = validChildren.map((child, index) => {
33663    const _isSpacer = hasConnectNamespace(child, ['Spacer']);
33664    if (_isSpacer) {
33665      const childElement = child;
33666      const _key = childElement.key || `hstack-${index}`;
33667      return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, {
33668        isBlock: true,
33669        key: _key,
33670        ...childElement.props
33671      });
33672    }
33673    return child;
33674  });
33675  const propsForFlex = {
33676    children: clonedChildren,
33677    direction,
33678    justify: 'center',
33679    ...align,
33680    ...otherProps,
33681    gap: spacing
33682  };
33683  const flexProps = useFlex(propsForFlex);
33684  return flexProps;
33685}
33686
33687;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/component.js
33688
33689/**
33690 * Internal dependencies
33691 */
33692
33693
33694
33695
33696function UnconnectedHStack(props, forwardedRef) {
33697  const hStackProps = useHStack(props);
33698  return (0,external_wp_element_namespaceObject.createElement)(component, {
33699    ...hStackProps,
33700    ref: forwardedRef
33701  });
33702}
33703
33704/**
33705 * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
33706 *
33707 * `HStack` can render anything inside.
33708 *
33709 * ```jsx
33710 * import {
33711 * 	__experimentalHStack as HStack,
33712 * 	__experimentalText as Text,
33713 * } from `@wordpress/components`;
33714 *
33715 * function Example() {
33716 * 	return (
33717 * 		<HStack>
33718 * 			<Text>Code</Text>
33719 * 			<Text>is</Text>
33720 * 			<Text>Poetry</Text>
33721 * 		</HStack>
33722 * 	);
33723 * }
33724 * ```
33725 */
33726const HStack = contextConnect(UnconnectedHStack, 'HStack');
33727/* harmony default export */ const h_stack_component = (HStack);
33728
33729;// CONCATENATED MODULE: ./packages/components/build-module/number-control/index.js
33730
33731/**
33732 * External dependencies
33733 */
33734
33735/**
33736 * WordPress dependencies
33737 */
33738
33739
33740
33741
33742
33743
33744/**
33745 * Internal dependencies
33746 */
33747
33748
33749
33750
33751
33752
33753
33754const number_control_noop = () => {};
33755function UnforwardedNumberControl({
33756  __unstableStateReducer: stateReducerProp,
33757  className,
33758  dragDirection = 'n',
33759  hideHTMLArrows = false,
33760  spinControls = 'native',
33761  isDragEnabled = true,
33762  isShiftStepEnabled = true,
33763  label,
33764  max = Infinity,
33765  min = -Infinity,
33766  required = false,
33767  shiftStep = 10,
33768  step = 1,
33769  spinFactor = 1,
33770  type: typeProp = 'number',
33771  value: valueProp,
33772  size = 'default',
33773  suffix,
33774  onChange = number_control_noop,
33775  ...props
33776}, forwardedRef) {
33777  if (hideHTMLArrows) {
33778    external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', {
33779      alternative: 'spinControls="none"',
33780      since: '6.2',
33781      version: '6.3'
33782    });
33783    spinControls = 'none';
33784  }
33785  const inputRef = (0,external_wp_element_namespaceObject.useRef)();
33786  const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]);
33787  const isStepAny = step === 'any';
33788  const baseStep = isStepAny ? 1 : ensureNumber(step);
33789  const baseSpin = ensureNumber(spinFactor) * baseStep;
33790  const baseValue = roundClamp(0, min, max, baseStep);
33791  const constrainValue = (value, stepOverride) => {
33792    // When step is "any" clamp the value, otherwise round and clamp it.
33793    // Use '' + to convert to string for use in input value attribute.
33794    return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
33795  };
33796  const autoComplete = typeProp === 'number' ? 'off' : undefined;
33797  const classes = classnames_default()('components-number-control', className);
33798  const cx = useCx();
33799  const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons);
33800  const spinValue = (value, direction, event) => {
33801    event?.preventDefault();
33802    const shift = event?.shiftKey && isShiftStepEnabled;
33803    const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin;
33804    let nextValue = isValueEmpty(value) ? baseValue : value;
33805    if (direction === 'up') {
33806      nextValue = add(nextValue, delta);
33807    } else if (direction === 'down') {
33808      nextValue = subtract(nextValue, delta);
33809    }
33810    return constrainValue(nextValue, shift ? delta : undefined);
33811  };
33812
33813  /**
33814   * "Middleware" function that intercepts updates from InputControl.
33815   * This allows us to tap into actions to transform the (next) state for
33816   * InputControl.
33817   *
33818   * @return The updated state to apply to InputControl
33819   */
33820  const numberControlStateReducer = (state, action) => {
33821    const nextState = {
33822      ...state
33823    };
33824    const {
33825      type,
33826      payload
33827    } = action;
33828    const event = payload.event;
33829    const currentValue = nextState.value;
33830
33831    /**
33832     * Handles custom UP and DOWN Keyboard events
33833     */
33834    if (type === PRESS_UP || type === PRESS_DOWN) {
33835      nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event);
33836    }
33837
33838    /**
33839     * Handles drag to update events
33840     */
33841    if (type === DRAG && isDragEnabled) {
33842      const [x, y] = payload.delta;
33843      const enableShift = payload.shiftKey && isShiftStepEnabled;
33844      const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;
33845      let directionModifier;
33846      let delta;
33847      switch (dragDirection) {
33848        case 'n':
33849          delta = y;
33850          directionModifier = -1;
33851          break;
33852        case 'e':
33853          delta = x;
33854          directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1;
33855          break;
33856        case 's':
33857          delta = y;
33858          directionModifier = 1;
33859          break;
33860        case 'w':
33861          delta = x;
33862          directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1;
33863          break;
33864      }
33865      if (delta !== 0) {
33866        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
33867        const distance = delta * modifier * directionModifier;
33868        nextState.value = constrainValue(
33869        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
33870        add(currentValue, distance), enableShift ? modifier : undefined);
33871      }
33872    }
33873
33874    /**
33875     * Handles commit (ENTER key press or blur)
33876     */
33877    if (type === PRESS_ENTER || type === COMMIT) {
33878      const applyEmptyValue = required === false && currentValue === '';
33879      nextState.value = applyEmptyValue ? currentValue :
33880      // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
33881      constrainValue(currentValue);
33882    }
33883    return nextState;
33884  };
33885  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
33886    // Set event.target to the <input> so that consumers can use
33887    // e.g. event.target.validity.
33888    event: {
33889      ...event,
33890      target: inputRef.current
33891    }
33892  });
33893  return (0,external_wp_element_namespaceObject.createElement)(number_control_styles_Input, {
33894    autoComplete: autoComplete,
33895    inputMode: "numeric",
33896    ...props,
33897    className: classes,
33898    dragDirection: dragDirection,
33899    hideHTMLArrows: spinControls !== 'native',
33900    isDragEnabled: isDragEnabled,
33901    label: label,
33902    max: max,
33903    min: min,
33904    ref: mergedRef,
33905    required: required,
33906    step: step,
33907    type: typeProp
33908    // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
33909    ,
33910    value: valueProp,
33911    __unstableStateReducer: (state, action) => {
33912      var _stateReducerProp;
33913      const baseState = numberControlStateReducer(state, action);
33914      return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
33915    },
33916    size: size,
33917    suffix: spinControls === 'custom' ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, suffix, (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
33918      marginBottom: 0,
33919      marginRight: 2
33920    }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
33921      spacing: 1
33922    }, (0,external_wp_element_namespaceObject.createElement)(SpinButton, {
33923      className: spinButtonClasses,
33924      icon: library_plus,
33925      isSmall: true,
33926      "aria-hidden": "true",
33927      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Increment'),
33928      tabIndex: -1,
33929      onClick: buildSpinButtonClickHandler('up')
33930    }), (0,external_wp_element_namespaceObject.createElement)(SpinButton, {
33931      className: spinButtonClasses,
33932      icon: library_reset,
33933      isSmall: true,
33934      "aria-hidden": "true",
33935      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Decrement'),
33936      tabIndex: -1,
33937      onClick: buildSpinButtonClickHandler('down')
33938    })))) : suffix,
33939    onChange: onChange
33940  });
33941}
33942const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl);
33943/* harmony default export */ const number_control = (NumberControl);
33944
33945;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js
33946
33947function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
33948/**
33949 * External dependencies
33950 */
33951
33952/**
33953 * Internal dependencies
33954 */
33955
33956
33957
33958
33959
33960const CIRCLE_SIZE = 32;
33961const INNER_CIRCLE_SIZE = 6;
33962const deprecatedBottomMargin = ({
33963  __nextHasNoMarginBottom
33964}) => {
33965  return !__nextHasNoMarginBottom ? /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0),  true ? "" : 0) : '';
33966};
33967const angle_picker_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
33968  target: "eln3bjz4"
33969} : 0)(deprecatedBottomMargin, ";" + ( true ? "" : 0));
33970const CircleRoot = emotion_styled_base_browser_esm("div",  true ? {
33971  target: "eln3bjz3"
33972} : 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));
33973const CircleIndicatorWrapper = emotion_styled_base_browser_esm("div",  true ? {
33974  target: "eln3bjz2"
33975} : 0)( true ? {
33976  name: "1r307gh",
33977  styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}"
33978} : 0);
33979const CircleIndicator = emotion_styled_base_browser_esm("div",  true ? {
33980  target: "eln3bjz1"
33981} : 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));
33982const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
33983  target: "eln3bjz0"
33984} : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0));
33985
33986;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/angle-circle.js
33987
33988/**
33989 * WordPress dependencies
33990 */
33991
33992
33993
33994/**
33995 * Internal dependencies
33996 */
33997
33998function AngleCircle({
33999  value,
34000  onChange,
34001  ...props
34002}) {
34003  const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null);
34004  const angleCircleCenter = (0,external_wp_element_namespaceObject.useRef)();
34005  const previousCursorValue = (0,external_wp_element_namespaceObject.useRef)();
34006  const setAngleCircleCenter = () => {
34007    if (angleCircleRef.current === null) {
34008      return;
34009    }
34010    const rect = angleCircleRef.current.getBoundingClientRect();
34011    angleCircleCenter.current = {
34012      x: rect.x + rect.width / 2,
34013      y: rect.y + rect.height / 2
34014    };
34015  };
34016  const changeAngleToPosition = event => {
34017    if (event === undefined) {
34018      return;
34019    }
34020
34021    // Prevent (drag) mouse events from selecting and accidentally
34022    // triggering actions from other elements.
34023    event.preventDefault();
34024    // Input control needs to lose focus and by preventDefault above, it doesn't.
34025    event.target?.focus();
34026    if (angleCircleCenter.current !== undefined && onChange !== undefined) {
34027      const {
34028        x: centerX,
34029        y: centerY
34030      } = angleCircleCenter.current;
34031      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
34032    }
34033  };
34034  const {
34035    startDrag,
34036    isDragging
34037  } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({
34038    onDragStart: event => {
34039      setAngleCircleCenter();
34040      changeAngleToPosition(event);
34041    },
34042    onDragMove: changeAngleToPosition,
34043    onDragEnd: changeAngleToPosition
34044  });
34045  (0,external_wp_element_namespaceObject.useEffect)(() => {
34046    if (isDragging) {
34047      if (previousCursorValue.current === undefined) {
34048        previousCursorValue.current = document.body.style.cursor;
34049      }
34050      document.body.style.cursor = 'grabbing';
34051    } else {
34052      document.body.style.cursor = previousCursorValue.current || '';
34053      previousCursorValue.current = undefined;
34054    }
34055  }, [isDragging]);
34056  return (0,external_wp_element_namespaceObject.createElement)(CircleRoot, {
34057    ref: angleCircleRef,
34058    onMouseDown: startDrag,
34059    className: "components-angle-picker-control__angle-circle",
34060    ...props
34061  }, (0,external_wp_element_namespaceObject.createElement)(CircleIndicatorWrapper, {
34062    style: value ? {
34063      transform: `rotate(${value}deg)`
34064    } : undefined,
34065    className: "components-angle-picker-control__angle-circle-indicator-wrapper",
34066    tabIndex: -1
34067  }, (0,external_wp_element_namespaceObject.createElement)(CircleIndicator, {
34068    className: "components-angle-picker-control__angle-circle-indicator"
34069  })));
34070}
34071function getAngle(centerX, centerY, pointX, pointY) {
34072  const y = pointY - centerY;
34073  const x = pointX - centerX;
34074  const angleInRadians = Math.atan2(y, x);
34075  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
34076  if (angleInDeg < 0) {
34077    return 360 + angleInDeg;
34078  }
34079  return angleInDeg;
34080}
34081/* harmony default export */ const angle_circle = (AngleCircle);
34082
34083;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/index.js
34084
34085/**
34086 * External dependencies
34087 */
34088
34089
34090
34091/**
34092 * WordPress dependencies
34093 */
34094
34095
34096
34097
34098/**
34099 * Internal dependencies
34100 */
34101
34102
34103
34104
34105
34106function UnforwardedAnglePickerControl(props, ref) {
34107  const {
34108    __nextHasNoMarginBottom = false,
34109    className,
34110    label = (0,external_wp_i18n_namespaceObject.__)('Angle'),
34111    onChange,
34112    value,
34113    ...restProps
34114  } = props;
34115  if (!__nextHasNoMarginBottom) {
34116    external_wp_deprecated_default()('Bottom margin styles for wp.components.AnglePickerControl', {
34117      since: '6.1',
34118      version: '6.4',
34119      hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
34120    });
34121  }
34122  const handleOnNumberChange = unprocessedValue => {
34123    if (onChange === undefined) {
34124      return;
34125    }
34126    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
34127    onChange(inputValue);
34128  };
34129  const classes = classnames_default()('components-angle-picker-control', className);
34130  const unitText = (0,external_wp_element_namespaceObject.createElement)(UnitText, null, "\xB0");
34131  const [prefixedUnitText, suffixedUnitText] = (0,external_wp_i18n_namespaceObject.isRTL)() ? [unitText, null] : [null, unitText];
34132  return (0,external_wp_element_namespaceObject.createElement)(angle_picker_control_styles_Root, {
34133    ...restProps,
34134    ref: ref,
34135    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
34136    className: classes,
34137    gap: 2
34138  }, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(number_control, {
34139    label: label,
34140    className: "components-angle-picker-control__input-field",
34141    max: 360,
34142    min: 0,
34143    onChange: handleOnNumberChange,
34144    size: "__unstable-large",
34145    step: "1",
34146    value: value,
34147    spinControls: "none",
34148    prefix: prefixedUnitText,
34149    suffix: suffixedUnitText
34150  })), (0,external_wp_element_namespaceObject.createElement)(spacer_
34150component, {
34151    marginBottom: "1",
34152    marginTop: "auto"
34153  }, (0,external_wp_element_namespaceObject.createElement)(angle_circle, {
34154    "aria-hidden": "true",
34155    value: value,
34156    onChange: onChange
34157  })));
34158}
34159
34160/**
34161 * `AnglePickerControl` is a React component to render a UI that allows users to
34162 * pick an angle. Users can choose an angle in a visual UI with the mouse by
34163 * dragging an angle indicator inside a circle or by directly inserting the
34164 * desired angle in a text field.
34165 *
34166 * ```jsx
34167 * import { useState } from '@wordpress/element';
34168 * import { AnglePickerControl } from '@wordpress/components';
34169 *
34170 * function Example() {
34171 *   const [ angle, setAngle ] = useState( 0 );
34172 *   return (
34173 *     <AnglePickerControl
34174 *       value={ angle }
34175 *       onChange={ setAngle }
34176 *       __nextHasNoMarginBottom
34177 *     </>
34178 *   );
34179 * }
34180 * ```
34181 */
34182const AnglePickerControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedAnglePickerControl);
34183/* harmony default export */ const angle_picker_control = (AnglePickerControl);
34184
34185// EXTERNAL MODULE: ./node_modules/remove-accents/index.js
34186var remove_accents = __webpack_require__(4793);
34187var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents);
34188;// CONCATENATED MODULE: external ["wp","richText"]
34189const external_wp_richText_namespaceObject = window["wp"]["richText"];
34190;// CONCATENATED MODULE: external ["wp","a11y"]
34191const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
34192;// CONCATENATED MODULE: external ["wp","keycodes"]
34193const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
34194;// CONCATENATED MODULE: ./packages/components/build-module/utils/strings.js
34195/**
34196 * External dependencies
34197 */
34198
34199const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[
34200// - (hyphen-minus)
34201'\u002d',
34202// ~ (tilde)
34203'\u007e',
34204// ­ (soft hyphen)
34205'\u00ad',
34206// ֊ (armenian hyphen)
34207'\u058a',
34208// Ö¾ (hebrew punctuation maqaf)
34209'\u05be',
34210// ᐀ (canadian syllabics hyphen)
34211'\u1400',
34212// ᠆ (mongolian todo soft hyphen)
34213'\u1806',
34214// ‐ (hyphen)
34215'\u2010',
34216// non-breaking hyphen)
34217'\u2011',
34218// ‒ (figure dash)
34219'\u2012',
34220// – (en dash)
34221'\u2013',
34222// — (em dash)
34223'\u2014',
34224// ― (horizontal bar)
34225'\u2015',
34226// ⁓ (swung dash)
34227'\u2053',
34228// superscript minus)
34229'\u207b',
34230// subscript minus)
34231'\u208b',
34232// − (minus sign)
34233'\u2212',
34234// ⸗ (double oblique hyphen)
34235'\u2e17',
34236// ⸺ (two-em dash)
34237'\u2e3a',
34238// ⸻ (three-em dash)
34239'\u2e3b',
34240// 〜 (wave dash)
34241'\u301c',
34242// 〰 (wavy dash)
34243'\u3030',
34244// ゠ (katakana-hiragana double hyphen)
34245'\u30a0',
34246// ︱ (presentation form for vertical em dash)
34247'\ufe31',
34248// ︲ (presentation form for vertical en dash)
34249'\ufe32',
34250// ﹘ (small em dash)
34251'\ufe58',
34252// ï¹£ (small hyphen-minus)
34253'\ufe63',
34254// - (fullwidth hyphen-minus)
34255'\uff0d'].join('')}]`, 'g');
34256const normalizeTextString = value => {
34257  return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');
34258};
34259
34260/**
34261 * Escapes the RegExp special characters.
34262 *
34263 * @param {string} string Input string.
34264 *
34265 * @return {string} Regex-escaped string.
34266 */
34267function escapeRegExp(string) {
34268  return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
34269}
34270
34271;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/get-default-use-items.js
34272/**
34273 * External dependencies
34274 */
34275
34276
34277/**
34278 * WordPress dependencies
34279 */
34280
34281
34282
34283/**
34284 * Internal dependencies
34285 */
34286
34287function filterOptions(search, options = [], maxResults = 10) {
34288  const filtered = [];
34289  for (let i = 0; i < options.length; i++) {
34290    const option = options[i];
34291
34292    // Merge label into keywords.
34293    let {
34294      keywords = []
34295    } = option;
34296    if ('string' === typeof option.label) {
34297      keywords = [...keywords, option.label];
34298    }
34299    const isMatch = keywords.some(keyword => search.test(remove_accents_default()(keyword)));
34300    if (!isMatch) {
34301      continue;
34302    }
34303    filtered.push(option);
34304
34305    // Abort early if max reached.
34306    if (filtered.length === maxResults) {
34307      break;
34308    }
34309  }
34310  return filtered;
34311}
34312function getDefaultUseItems(autocompleter) {
34313  return filterValue => {
34314    const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]);
34315    /*
34316     * We support both synchronous and asynchronous retrieval of completer options
34317     * but internally treat all as async so we maintain a single, consistent code path.
34318     *
34319     * Because networks can be slow, and the internet is wonderfully unpredictable,
34320     * we don't want two promises updating the state at once. This ensures that only
34321     * the most recent promise will act on `optionsData`. This doesn't use the state
34322     * because `setState` is batched, and so there's no guarantee that setting
34323     * `activePromise` in the state would result in it actually being in `this.state`
34324     * before the promise resolves and we check to see if this is the active promise or not.
34325     */
34326    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34327      const {
34328        options,
34329        isDebounced
34330      } = autocompleter;
34331      const loadOptions = (0,external_wp_compose_namespaceObject.debounce)(() => {
34332        const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => {
34333          if (promise.canceled) {
34334            return;
34335          }
vendor: 11,410 bytes, lines 34336-34729
34336          const keyedOptions = optionsData.map((optionData, optionIndex) => ({
34337            key: `${autocompleter.name}-${optionIndex}`,
34338            value: optionData,
34339            label: autocompleter.getOptionLabel(optionData),
34340            keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [],
34341            isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false
34342          }));
34343
34344          // Create a regular expression to filter the options.
34345          const search = new RegExp('(?:\\b|\\s|^)' + escapeRegExp(filterValue), 'i');
34346          setItems(filterOptions(search, keyedOptions));
34347        });
34348        return promise;
34349      }, isDebounced ? 250 : 0);
34350      const promise = loadOptions();
34351      return () => {
34352        loadOptions.cancel();
34353        if (promise) {
34354          promise.canceled = true;
34355        }
34356      };
34357    }, [filterValue]);
34358    return [items];
34359  };
34360}
34361
34362;// CONCATENATED MODULE: ./packages/components/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js
34363
34364
34365
34366
34367
34368
34369/**
34370 * Provides data to position an inner element of the floating element so that it
34371 * appears centered to the reference element.
34372 * This wraps the core `arrow` middleware to allow React refs as the element.
34373 * @see https://floating-ui.com/docs/arrow
34374 */
34375const floating_ui_react_dom_esm_arrow = options => {
34376  function isRef(value) {
34377    return {}.hasOwnProperty.call(value, 'current');
34378  }
34379  return {
34380    name: 'arrow',
34381    options,
34382    fn(state) {
34383      const {
34384        element,
34385        padding
34386      } = typeof options === 'function' ? options(state) : options;
34387      if (element && isRef(element)) {
34388        if (element.current != null) {
34389          return arrow({
34390            element: element.current,
34391            padding
34392          }).fn(state);
34393        }
34394        return {};
34395      } else if (element) {
34396        return arrow({
34397          element,
34398          padding
34399        }).fn(state);
34400      }
34401      return {};
34402    }
34403  };
34404};
34405
34406var index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
34407
34408// Fork of `fast-deep-equal` that only does the comparisons we need and compares
34409// functions
34410function deepEqual(a, b) {
34411  if (a === b) {
34412    return true;
34413  }
34414  if (typeof a !== typeof b) {
34415    return false;
34416  }
34417  if (typeof a === 'function' && a.toString() === b.toString()) {
34418    return true;
34419  }
34420  let length, i, keys;
34421  if (a && b && typeof a == 'object') {
34422    if (Array.isArray(a)) {
34423      length = a.length;
34424      if (length != b.length) return false;
34425      for (i = length; i-- !== 0;) {
34426        if (!deepEqual(a[i], b[i])) {
34427          return false;
34428        }
34429      }
34430      return true;
34431    }
34432    keys = Object.keys(a);
34433    length = keys.length;
34434    if (length !== Object.keys(b).length) {
34435      return false;
34436    }
34437    for (i = length; i-- !== 0;) {
34438      if (!{}.hasOwnProperty.call(b, keys[i])) {
34439        return false;
34440      }
34441    }
34442    for (i = length; i-- !== 0;) {
34443      const key = keys[i];
34444      if (key === '_owner' && a.$$typeof) {
34445        continue;
34446      }
34447      if (!deepEqual(a[key], b[key])) {
34448        return false;
34449      }
34450    }
34451    return true;
34452  }
34453  return a !== a && b !== b;
34454}
34455
34456function getDPR(element) {
34457  if (typeof window === 'undefined') {
34458    return 1;
34459  }
34460  const win = element.ownerDocument.defaultView || window;
34461  return win.devicePixelRatio || 1;
34462}
34463
34464function floating_ui_react_dom_esm_roundByDPR(element, value) {
34465  const dpr = getDPR(element);
34466  return Math.round(value * dpr) / dpr;
34467}
34468
34469function useLatestRef(value) {
34470  const ref = external_React_.useRef(value);
34471  index(() => {
34472    ref.current = value;
34473  });
34474  return ref;
34475}
34476
34477/**
34478 * Provides data to position a floating element.
34479 * @see https://floating-ui.com/docs/react
34480 */
34481function useFloating(options) {
34482  if (options === void 0) {
34483    options = {};
34484  }
34485  const {
34486    placement = 'bottom',
34487    strategy = 'absolute',
34488    middleware = [],
34489    platform,
34490    elements: {
34491      reference: externalReference,
34492      floating: externalFloating
34493    } = {},
34494    transform = true,
34495    whileElementsMounted,
34496    open
34497  } = options;
34498  const [data, setData] = external_React_.useState({
34499    x: 0,
34500    y: 0,
34501    strategy,
34502    placement,
34503    middlewareData: {},
34504    isPositioned: false
34505  });
34506  const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware);
34507  if (!deepEqual(latestMiddleware, middleware)) {
34508    setLatestMiddleware(middleware);
34509  }
34510  const [_reference, _setReference] = external_React_.useState(null);
34511  const [_floating, _setFloating] = external_React_.useState(null);
34512  const setReference = external_React_.useCallback(node => {
34513    if (node != referenceRef.current) {
34514      referenceRef.current = node;
34515      _setReference(node);
34516    }
34517  }, [_setReference]);
34518  const setFloating = external_React_.useCallback(node => {
34519    if (node !== floatingRef.current) {
34520      floatingRef.current = node;
34521      _setFloating(node);
34522    }
34523  }, [_setFloating]);
34524  const referenceEl = externalReference || _reference;
34525  const floatingEl = externalFloating || _floating;
34526  const referenceRef = external_React_.useRef(null);
34527  const floatingRef = external_React_.useRef(null);
34528  const dataRef = external_React_.useRef(data);
34529  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
34530  const platformRef = useLatestRef(platform);
34531  const update = external_React_.useCallback(() => {
34532    if (!referenceRef.current || !floatingRef.current) {
34533      return;
34534    }
34535    const config = {
34536      placement,
34537      strategy,
34538      middleware: latestMiddleware
34539    };
34540    if (platformRef.current) {
34541      config.platform = platformRef.current;
34542    }
34543    floating_ui_dom_computePosition(referenceRef.current, floatingRef.current, config).then(data => {
34544      const fullData = {
34545        ...data,
34546        isPositioned: true
34547      };
34548      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
34549        dataRef.current = fullData;
34550        external_ReactDOM_namespaceObject.flushSync(() => {
34551          setData(fullData);
34552        });
34553      }
34554    });
34555  }, [latestMiddleware, placement, strategy, platformRef]);
34556  index(() => {
34557    if (open === false && dataRef.current.isPositioned) {
34558      dataRef.current.isPositioned = false;
34559      setData(data => ({
34560        ...data,
34561        isPositioned: false
34562      }));
34563    }
34564  }, [open]);
34565  const isMountedRef = external_React_.useRef(false);
34566  index(() => {
34567    isMountedRef.current = true;
34568    return () => {
34569      isMountedRef.current = false;
34570    };
34571  }, []);
34572  index(() => {
34573    if (referenceEl) referenceRef.current = referenceEl;
34574    if (floatingEl) floatingRef.current = floatingEl;
34575    if (referenceEl && floatingEl) {
34576      if (whileElementsMountedRef.current) {
34577        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
34578      } else {
34579        update();
34580      }
34581    }
34582  }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
34583  const refs = external_React_.useMemo(() => ({
34584    reference: referenceRef,
34585    floating: floatingRef,
34586    setReference,
34587    setFloating
34588  }), [setReference, setFloating]);
34589  const elements = external_React_.useMemo(() => ({
34590    reference: referenceEl,
34591    floating: floatingEl
34592  }), [referenceEl, floatingEl]);
34593  const floatingStyles = external_React_.useMemo(() => {
34594    const initialStyles = {
34595      position: strategy,
34596      left: 0,
34597      top: 0
34598    };
34599    if (!elements.floating) {
34600      return initialStyles;
34601    }
34602    const x = floating_ui_react_dom_esm_roundByDPR(elements.floating, data.x);
34603    const y = floating_ui_react_dom_esm_roundByDPR(elements.floating, data.y);
34604    if (transform) {
34605      return {
34606        ...initialStyles,
34607        transform: "translate(" + x + "px, " + y + "px)",
34608        ...(getDPR(elements.floating) >= 1.5 && {
34609          willChange: 'transform'
34610        })
34611      };
34612    }
34613    return {
34614      position: strategy,
34615      left: x,
34616      top: y
34617    };
34618  }, [strategy, transform, elements.floating, data.x, data.y]);
34619  return external_React_.useMemo(() => ({
34620    ...data,
34621    update,
34622    refs,
34623    elements,
34624    floatingStyles
34625  }), [data, update, refs, elements, floatingStyles]);
34626}
34627
34628
34629
34630;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
34631
34632
34633
34634
34635
34636/**
34637 * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
34638 *
34639 * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
34640 * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
34641 *
34642 * It will actively respond to changes and re-render your components with the latest setting.
34643 *
34644 * ```jsx
34645 * export function Sidebar({ isOpen }) {
34646 *   const shouldReduceMotion = useReducedMotion()
34647 *   const closedX = shouldReduceMotion ? 0 : "-100%"
34648 *
34649 *   return (
34650 *     <motion.div animate={{
34651 *       opacity: isOpen ? 1 : 0,
34652 *       x: isOpen ? 0 : closedX
34653 *     }} />
34654 *   )
34655 * }
34656 * ```
34657 *
34658 * @return boolean
34659 *
34660 * @public
34661 */
34662function useReducedMotion() {
34663    /**
34664     * Lazy initialisation of prefersReducedMotion
34665     */
34666    !hasReducedMotionListener.current && initPrefersReducedMotion();
34667    const [shouldReduceMotion] = (0,external_React_.useState)(prefersReducedMotion.current);
34668    if (false) {}
34669    /**
34670     * TODO See if people miss automatically updating shouldReduceMotion setting
34671     */
34672    return shouldReduceMotion;
34673}
34674
34675
34676
34677;// CONCATENATED MODULE: ./packages/icons/build-module/library/close.js
34678
34679/**
34680 * WordPress dependencies
34681 */
34682
34683const close_close = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
34684  xmlns: "http://www.w3.org/2000/svg",
34685  viewBox: "0 0 24 24"
34686}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
34687  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"
34688}));
34689/* harmony default export */ const library_close = (close_close);
34690
34691;// CONCATENATED MODULE: ./packages/components/build-module/scroll-lock/index.js
34692/**
34693 * WordPress dependencies
34694 */
34695
34696
34697/*
34698 * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.
34699 * Save scroll top so we can restore it after locking scroll.
34700 *
34701 * NOTE: It would be cleaner and possibly safer to find a localized solution such
34702 * as preventing default on certain touchmove events.
34703 */
34704let previousScrollTop = 0;
34705function setLocked(locked) {
34706  const scrollingElement = document.scrollingElement || document.body;
34707  if (locked) {
34708    previousScrollTop = scrollingElement.scrollTop;
34709  }
34710  const methodName = locked ? 'add' : 'remove';
34711  scrollingElement.classList[methodName]('lockscroll');
34712
34713  // Adding the class to the document element seems to be necessary in iOS.
34714  document.documentElement.classList[methodName]('lockscroll');
34715  if (!locked) {
34716    scrollingElement.scrollTop = previousScrollTop;
34717  }
34718}
34719let lockCounter = 0;
34720
34721/**
34722 * ScrollLock is a content-free React component for declaratively preventing
34723 * scroll bleed from modal UI to the page body. This component applies a
34724 * `lockscroll` class to the `document.documentElement` and
34725 * `document.scrollingElement` elements to stop the body from scrolling. When it
34726 * is present, the lock is applied.
34727 *
34728 * ```jsx
34729 * import { ScrollLock, Button } from '@wordpress/components';
34730 * import { useState } from '@wordpress/element';
34731 *
34732 * const MyScrollLock = () => {
34733 *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
34734 *
34735 *   const toggleLock = () => {
34736 *     setIsScrollLocked( ( locked ) => ! locked ) );
34737 *   };
34738 *
34739 *   return (
34740 *     <div>
34741 *       <Button variant="secondary" onClick={ toggleLock }>
34742 *         Toggle scroll lock
34743 *       </Button>
34744 *       { isScrollLocked && <ScrollLock /> }
34745 *       <p>
34746 *         Scroll locked:
34747 *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
34748 *       </p>
34749 *     </div>
34750 *   );
34751 * };
34752 * ```
34753 */
34754function ScrollLock() {
34755  (0,external_wp_element_namespaceObject.useEffect)(() => {
34756    if (lockCounter === 0) {
34757      setLocked(true);
34758    }
34759    ++lockCounter;
34760    return () => {
34761      if (lockCounter === 1) {
34762        setLocked(false);
34763      }
34764      --lockCounter;
34765    };
34766  }, []);
34767  return null;
34768}
34769/* harmony default export */ const scroll_lock = (ScrollLock);
34770
34771;// CONCATENATED MODULE: ./node_modules/proxy-compare/dist/index.modern.js
34772const 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};
34773
34774;// CONCATENATED MODULE: ./node_modules/valtio/esm/vanilla.js
34775
34776
34777const vanilla_isObject = (x) => typeof x === "object" && x !== null;
34778const refSet = /* @__PURE__ */ new WeakSet();
34779const VERSION =  true ? Symbol("VERSION") : 0;
34780const LISTENERS =  true ? Symbol("LISTENERS") : 0;
34781const SNAPSHOT =  true ? Symbol("SNAPSHOT") : 0;
34782const 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) => {
34783  const cache = snapshotCache.get(receiver);
34784  if ((cache == null ? void 0 : cache[0]) === version) {
34785    return cache[1];
34786  }
34787  const snapshot2 = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
34788  index_modern_b(snapshot2, true);
34789  snapshotCache.set(receiver, [version, snapshot2]);
34790  Reflect.ownKeys(target).forEach((key) => {
34791    const value = Reflect.get(target, key, receiver);
34792    if (refSet.has(value)) {
34793      index_modern_b(value, false);
34794      snapshot2[key] = value;
34795    } else if (value instanceof Promise) {
34796      if (PROMISE_RESULT in value) {
34797        snapshot2[key] = value[PROMISE_RESULT];
34798      } else {
34799        const errorOrPromise = value[PROMISE_ERROR] || value;
34800        Object.defineProperty(snapshot2, key, {
34801          get() {
34802            if (PROMISE_RESULT in value) {
34803              return value[PROMISE_RESULT];
34804            }
34805            throw errorOrPromise;
34806          }
34807        });
34808      }
34809    } else if (value == null ? void 0 : value[LISTENERS]) {
34810      snapshot2[key] = value[SNAPSHOT];
34811    } else {
34812      snapshot2[key] = value;
34813    }
34814  });
34815  return Object.freeze(snapshot2);
34816}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1], proxyFunction2 = (initialObject) => {
34817  if (!vanilla_isObject(initialObject)) {
34818    throw new Error("object required");
34819  }
34820  const found = proxyCache.get(initialObject);
34821  if (found) {
34822    return found;
34823  }
34824  let version = versionHolder[0];
34825  const listeners = /* @__PURE__ */ new Set();
34826  const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
34827    if (version !== nextVersion) {
34828      version = nextVersion;
34829      listeners.forEach((listener) => listener(op, nextVersion));
34830    }
34831  };
34832  const propListeners = /* @__PURE__ */ new Map();
34833  const getPropListener = (prop) => {
34834    let propListener = propListeners.get(prop);
34835    if (!propListener) {
34836      propListener = (op, nextVersion) => {
34837        const newOp = [...op];
34838        newOp[1] = [prop, ...newOp[1]];
34839        notifyUpdate(newOp, nextVersion);
34840      };
34841      propListeners.set(prop, propListener);
34842    }
34843    return propListener;
34844  };
34845  const popPropListener = (prop) => {
34846    const propListener = propListeners.get(prop);
34847    propListeners.delete(prop);
34848    return propListener;
34849  };
34850  const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
34851  const handler = {
34852    get(target, prop, receiver) {
34853      if (prop === VERSION) {
34854        return version;
34855      }
34856      if (prop === LISTENERS) {
34857        return listeners;
34858      }
34859      if (prop === SNAPSHOT) {
34860        return createSnapshot(version, target, receiver);
34861      }
34862      return Reflect.get(target, prop, receiver);
34863    },
34864    deleteProperty(target, prop) {
34865      const prevValue = Reflect.get(target, prop);
34866      const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS];
34867      if (childListeners) {
34868        childListeners.delete(popPropListener(prop));
34869      }
34870      const deleted = Reflect.deleteProperty(target, prop);
34871      if (deleted) {
34872        notifyUpdate(["delete", [prop], prevValue]);
34873      }
34874      return deleted;
34875    },
34876    set(target, prop, value, receiver) {
34877      var _a;
34878      const hasPrevValue = Reflect.has(target, prop);
34879      const prevValue = Reflect.get(target, prop, receiver);
34880      if (hasPrevValue && objectIs(prevValue, value)) {
34881        return true;
34882      }
34883      const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS];
34884      if (childListeners) {
34885        childListeners.delete(popPropListener(prop));
34886      }
34887      if (vanilla_isObject(value)) {
34888        value = index_modern_g(value) || value;
34889      }
34890      let nextValue;
34891      if ((_a = Object.getOwnPropertyDescriptor(target, prop)) == null ? void 0 : _a.set) {
34892        nextValue = value;
34893      } else if (value instanceof Promise) {
34894        nextValue = value.then((v) => {
34895          nextValue[PROMISE_RESULT] = v;
34896          notifyUpdate(["resolve", [prop], v]);
34897          return v;
34898        }).catch((e) => {
34899          nextValue[PROMISE_ERROR] = e;
34900          notifyUpdate(["reject", [prop], e]);
34901        });
34902      } else if (value == null ? void 0 : value[LISTENERS]) {
34903        nextValue = value;
34904        nextValue[LISTENERS].add(getPropListener(prop));
34905      } else if (canProxy(value)) {
34906        nextValue = vanilla_proxy(value);
34907        nextValue[LISTENERS].add(getPropListener(prop));
34908      } else {
34909        nextValue = value;
34910      }
34911      Reflect.set(target, prop, nextValue, receiver);
34912      notifyUpdate(["set", [prop], value, prevValue]);
34913      return true;
34914    }
34915  };
34916  const proxyObject = newProxy(baseObject, handler);
34917  proxyCache.set(initialObject, proxyObject);
34918  Reflect.ownKeys(initialObject).forEach((key) => {
34919    const desc = Object.getOwnPropertyDescriptor(
34920      initialObject,
34921      key
34922    );
34923    if (desc.get || desc.set) {
34924      Object.defineProperty(baseObject, key, desc);
34925    } else {
34926      proxyObject[key] = initialObject[key];
34927    }
34928  });
34929  return proxyObject;
34930}) => [
34931  proxyFunction2,
34932  refSet,
34933  VERSION,
34934  LISTENERS,
34935  SNAPSHOT,
34936  objectIs,
34937  newProxy,
34938  canProxy,
34939  PROMISE_RESULT,
34940  PROMISE_ERROR,
34941  snapshotCache,
34942  createSnapshot,
34943  proxyCache,
34944  versionHolder
34945];
34946const [proxyFunction] = buildProxyFunction();
34947function vanilla_proxy(initialObject = {}) {
34948  return proxyFunction(initialObject);
34949}
34950function vanilla_getVersion(proxyObject) {
34951  return vanilla_isObject(proxyObject) ? proxyObject[VERSION] : void 0;
34952}
34953function vanilla_subscribe(proxyObject, callback, notifyInSync) {
34954  if ( true && !(proxyObject == null ? void 0 : proxyObject[LISTENERS])) {
34955    console.warn("Please use proxy object");
34956  }
34957  let promise;
34958  const ops = [];
34959  const listener = (op) => {
34960    ops.push(op);
34961    if (notifyInSync) {
34962      callback(ops.splice(0));
34963      return;
34964    }
34965    if (!promise) {
34966      promise = Promise.resolve().then(() => {
34967        promise = void 0;
34968        callback(ops.splice(0));
34969      });
34970    }
34971  };
34972  proxyObject[LISTENERS].add(listener);
34973  return () => {
34974    proxyObject[LISTENERS].delete(listener);
34975  };
34976}
34977function vanilla_snapshot(proxyObject) {
34978  if ( true && !(proxyObject == null ? void 0 : proxyObject[SNAPSHOT])) {
34979    console.warn("Please use proxy object");
34980  }
34981  return proxyObject[SNAPSHOT];
34982}
34983function vanilla_ref(obj) {
34984  refSet.add(obj);
34985  return obj;
34986}
34987const unstable_buildProxyFunction = (/* unused pure expression or super */ null && (buildProxyFunction));
34988
34989
34990
34991;// CONCATENATED MODULE: ./node_modules/valtio/esm/index.js
34992
34993
34994
34995
34996
34997
34998const { useSyncExternalStore } = shim;
34999const useAffectedDebugValue = (state, affected) => {
35000  const pathList = (0,external_React_.useRef)();
35001  (0,external_React_.useEffect)(() => {
35002    pathList.current = O(state, affected);
35003  });
35004  (0,external_React_.useDebugValue)(pathList.current);
35005};
35006function useSnapshot(proxyObject, options) {
35007  const notifyInSync = options == null ? void 0 : options.sync;
35008  const lastSnapshot = (0,external_React_.useRef)();
35009  const lastAffected = (0,external_React_.useRef)();
35010  let inRender = true;
35011  const currSnapshot = useSyncExternalStore(
35012    (0,external_React_.useCallback)(
35013      (callback) => {
35014        const unsub = vanilla_subscribe(proxyObject, callback, notifyInSync);
35015        callback();
35016        return unsub;
35017      },
35018      [proxyObject, notifyInSync]
35019    ),
35020    () => {
35021      const nextSnapshot = vanilla_snapshot(proxyObject);
35022      try {
35023        if (!inRender && lastSnapshot.current && lastAffected.current && !index_modern_y(
35024          lastSnapshot.current,
35025          nextSnapshot,
35026          lastAffected.current,
35027          /* @__PURE__ */ new WeakMap()
35028        )) {
35029          return lastSnapshot.current;
35030        }
35031      } catch (e) {
35032      }
35033      return nextSnapshot;
35034    },
35035    () => vanilla_snapshot(proxyObject)
35036  );
35037  inRender = false;
35038  const currAffected = /* @__PURE__ */ new WeakMap();
35039  (0,external_React_.useEffect)(() => {
35040    lastSnapshot.current = currSnapshot;
35041    lastAffected.current = currAffected;
35042  });
35043  if (true) {
35044    useAffectedDebugValue(currSnapshot, currAffected);
35045  }
35046  const proxyCache = (0,external_React_.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
35047  return index_modern_i(currSnapshot, currAffected, proxyCache);
35048}
35049
35050
35051
35052;// CONCATENATED MODULE: ./node_modules/valtio/esm/utils.js
35053
35054
35055function subscribeKey(proxyObject, key, callback, notifyInSync) {
35056  return subscribe(
35057    proxyObject,
35058    (ops) => {
35059      if (ops.some((op) => op[1][0] === key)) {
35060        callback(proxyObject[key]);
35061      }
35062    },
35063    notifyInSync
35064  );
35065}
35066
35067let currentCleanups;
35068function watch(callback, options) {
35069  let alive = true;
35070  const cleanups = /* @__PURE__ */ new Set();
35071  const subscriptions = /* @__PURE__ */ new Map();
35072  const cleanup = () => {
35073    if (alive) {
35074      alive = false;
35075      cleanups.forEach((clean) => clean());
35076      cleanups.clear();
35077      subscriptions.forEach((unsubscribe) => unsubscribe());
35078      subscriptions.clear();
35079    }
35080  };
35081  const revalidate = () => {
35082    if (!alive) {
35083      return;
35084    }
35085    cleanups.forEach((clean) => clean());
35086    cleanups.clear();
35087    const proxiesToSubscribe = /* @__PURE__ */ new Set();
35088    const parent = currentCleanups;
35089    currentCleanups = cleanups;
35090    try {
35091      const cleanupReturn = callback((proxyObject) => {
35092        proxiesToSubscribe.add(proxyObject);
35093        return proxyObject;
35094      });
35095      if (cleanupReturn) {
35096        cleanups.add(cleanupReturn);
35097      }
35098    } finally {
35099      currentCleanups = parent;
35100    }
35101    subscriptions.forEach((unsubscribe, proxyObject) => {
35102      if (proxiesToSubscribe.has(proxyObject)) {
35103        proxiesToSubscribe.delete(proxyObject);
35104      } else {
35105        subscriptions.delete(proxyObject);
35106        unsubscribe();
35107      }
35108    });
35109    proxiesToSubscribe.forEach((proxyObject) => {
35110      const unsubscribe = subscribe(proxyObject, revalidate, options == null ? void 0 : options.sync);
35111      subscriptions.set(proxyObject, unsubscribe);
35112    });
35113  };
35114  if (currentCleanups) {
35115    currentCleanups.add(cleanup);
35116  }
35117  revalidate();
35118  return cleanup;
35119}
35120
35121const DEVTOOLS = Symbol();
35122function devtools(proxyObject, options) {
35123  if (typeof options === "string") {
35124    console.warn(
35125      "string name option is deprecated, use { name }. https://github.com/pmndrs/valtio/pull/400"
35126    );
35127    options = { name: options };
35128  }
35129  const { enabled, name = "" } = options || {};
35130  let extension;
35131  try {
35132    extension = (enabled != null ? enabled : (/* unsupported import.meta.env */ undefined && 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
35133  } catch {
35134  }
35135  if (!extension) {
35136    if ( true && enabled) {
35137      console.warn("[Warning] Please install/enable Redux devtools extension");
35138    }
35139    return;
35140  }
35141  let isTimeTraveling = false;
35142  const devtools2 = extension.connect({ name });
35143  const unsub1 = subscribe(proxyObject, (ops) => {
35144    const action = ops.filter(([_, path]) => path[0] !== DEVTOOLS).map(([op, path]) => `${op}:${path.map(String).join(".")}`).join(", ");
35145    if (!action) {
35146      return;
35147    }
35148    if (isTimeTraveling) {
35149      isTimeTraveling = false;
35150    } else {
35151      const snapWithoutDevtools = Object.assign({}, snapshot(proxyObject));
35152      delete snapWithoutDevtools[DEVTOOLS];
35153      devtools2.send(
35154        {
35155          type: action,
35156          updatedAt: new Date().toLocaleString()
35157        },
35158        snapWithoutDevtools
35159      );
35160    }
35161  });
35162  const unsub2 = devtools2.subscribe((message) => {
35163    var _a, _b, _c, _d, _e, _f;
35164    if (message.type === "ACTION" && message.payload) {
35165      try {
35166        Object.assign(proxyObject, JSON.parse(message.payload));
35167      } catch (e) {
35168        console.error(
35169          "please dispatch a serializable value that JSON.parse() and proxy() support\n",
35170          e
35171        );
35172      }
35173    }
35174    if (message.type === "DISPATCH" && message.state) {
35175      if (((_a = message.payload) == null ? void 0 : _a.type) === "JUMP_TO_ACTION" || ((_b = message.payload) == null ? void 0 : _b.type) === "JUMP_TO_STATE") {
35176        isTimeTraveling = true;
35177        const state = JSON.parse(message.state);
35178        Object.assign(proxyObject, state);
35179      }
35180      proxyObject[DEVTOOLS] = message;
35181    } else if (message.type === "DISPATCH" && ((_c = message.payload) == null ? void 0 : _c.type) === "COMMIT") {
35182      devtools2.init(snapshot(proxyObject));
35183    } else if (message.type === "DISPATCH" && ((_d = message.payload) == null ? void 0 : _d.type) === "IMPORT_STATE") {
35184      const actions = (_e = message.payload.nextLiftedState) == null ? void 0 : _e.actionsById;
35185      const computedStates = ((_f = message.payload.nextLiftedState) == null ? void 0 : _f.computedStates) || [];
35186      isTimeTraveling = true;
35187      computedStates.forEach(({ state }, index) => {
35188        const action = actions[index] || "No action found";
35189        Object.assign(proxyObject, state);
35190        if (index === 0) {
35191          devtools2.init(snapshot(proxyObject));
35192        } else {
35193          devtools2.send(action, snapshot(proxyObject));
35194        }
35195      });
35196    }
35197  });
35198  devtools2.init(snapshot(proxyObject));
35199  return () => {
35200    unsub1();
35201    unsub2 == null ? void 0 : unsub2();
35202  };
35203}
35204
35205const sourceObjectMap = /* @__PURE__ */ new WeakMap();
35206const derivedObjectMap = /* @__PURE__ */ new WeakMap();
35207const markPending = (sourceObject, callback) => {
35208  const sourceObjectEntry = sourceObjectMap.get(sourceObject);
35209  if (sourceObjectEntry) {
35210    sourceObjectEntry[0].forEach((subscription) => {
35211      const { d: derivedObject } = subscription;
35212      if (sourceObject !== derivedObject) {
35213        markPending(derivedObject);
35214      }
35215    });
35216    ++sourceObjectEntry[2];
35217    if (callback) {
35218      sourceObjectEntry[3].add(callback);
35219    }
35220  }
35221};
35222const checkPending = (sourceObject, callback) => {
35223  const sourceObjectEntry = sourceObjectMap.get(sourceObject);
35224  if (sourceObjectEntry == null ? void 0 : sourceObjectEntry[2]) {
35225    sourceObjectEntry[3].add(callback);
35226    return true;
35227  }
35228  return false;
35229};
35230const unmarkPending = (sourceObject) => {
35231  const sourceObjectEntry = sourceObjectMap.get(sourceObject);
35232  if (sourceObjectEntry) {
35233    --sourceObjectEntry[2];
35234    if (!sourceObjectEntry[2]) {
35235      sourceObjectEntry[3].forEach((callback) => callback());
35236      sourceObjectEntry[3].clear();
35237    }
35238    sourceObjectEntry[0].forEach((subscription) => {
35239      const { d: derivedObject } = subscription;
35240      if (sourceObject !== derivedObject) {
35241        unmarkPending(derivedObject);
35242      }
35243    });
35244  }
35245};
35246const addSubscription = (subscription) => {
35247  const { s: sourceObject, d: derivedObject } = subscription;
35248  let derivedObjectEntry = derivedObjectMap.get(derivedObject);
35249  if (!derivedObjectEntry) {
35250    derivedObjectEntry = [/* @__PURE__ */ new Set()];
35251    derivedObjectMap.set(subscription.d, derivedObjectEntry);
35252  }
35253  derivedObjectEntry[0].add(subscription);
35254  let sourceObjectEntry = sourceObjectMap.get(sourceObject);
35255  if (!sourceObjectEntry) {
35256    const subscriptions = /* @__PURE__ */ new Set();
35257    const unsubscribe = vanilla_subscribe(
35258      sourceObject,
35259      (ops) => {
35260        subscriptions.forEach((subscription2) => {
35261          const {
35262            d: derivedObject2,
35263            c: callback,
35264            n: notifyInSync,
35265            i: ignoreKeys
35266          } = subscription2;
35267          if (sourceObject === derivedObject2 && ops.every(
35268            (op) => op[1].length === 1 && ignoreKeys.includes(op[1][0])
35269          )) {
35270            return;
35271          }
35272          if (subscription2.p) {
35273            return;
35274          }
35275          markPending(sourceObject, callback);
35276          if (notifyInSync) {
35277            unmarkPending(sourceObject);
35278          } else {
35279            subscription2.p = Promise.resolve().then(() => {
35280              delete subscription2.p;
35281              unmarkPending(sourceObject);
35282            });
35283          }
35284        });
35285      },
35286      true
35287    );
35288    sourceObjectEntry = [subscriptions, unsubscribe, 0, /* @__PURE__ */ new Set()];
35289    sourceObjectMap.set(sourceObject, sourceObjectEntry);
35290  }
35291  sourceObjectEntry[0].add(subscription);
35292};
35293const removeSubscription = (subscription) => {
35294  const { s: sourceObject, d: derivedObject } = subscription;
35295  const derivedObjectEntry = derivedObjectMap.get(derivedObject);
35296  derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].delete(subscription);
35297  if ((derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].size) === 0) {
35298    derivedObjectMap.delete(derivedObject);
35299  }
35300  const sourceObjectEntry = sourceObjectMap.get(sourceObject);
35301  if (sourceObjectEntry) {
35302    const [subscriptions, unsubscribe] = sourceObjectEntry;
35303    subscriptions.delete(subscription);
35304    if (!subscriptions.size) {
35305      unsubscribe();
35306      sourceObjectMap.delete(sourceObject);
35307    }
35308  }
35309};
35310const listSubscriptions = (derivedObject) => {
35311  const derivedObjectEntry = derivedObjectMap.get(derivedObject);
35312  if (derivedObjectEntry) {
35313    return Array.from(derivedObjectEntry[0]);
35314  }
35315  return [];
35316};
35317const unstable_deriveSubscriptions = {
35318  add: addSubscription,
35319  remove: removeSubscription,
35320  list: listSubscriptions
35321};
35322function derive(derivedFns, options) {
35323  const proxyObject = (options == null ? void 0 : options.proxy) || proxy({});
35324  const notifyInSync = !!(options == null ? void 0 : options.sync);
35325  const derivedKeys = Object.keys(derivedFns);
35326  derivedKeys.forEach((key) => {
35327    if (Object.getOwnPropertyDescriptor(proxyObject, key)) {
35328      throw new Error("object property already defined");
35329    }
35330    const fn = derivedFns[key];
35331    let lastDependencies = null;
35332    const evaluate = () => {
35333      if (lastDependencies) {
35334        if (Array.from(lastDependencies).map(([p]) => checkPending(p, evaluate)).some((isPending) => isPending)) {
35335          return;
35336        }
35337        if (Array.from(lastDependencies).every(
35338          ([p, entry]) => getVersion(p) === entry.v
35339        )) {
35340          return;
35341        }
35342      }
35343      const dependencies = /* @__PURE__ */ new Map();
35344      const get = (p) => {
35345        dependencies.set(p, { v: getVersion(p) });
35346        return p;
35347      };
35348      const value = fn(get);
35349      const subscribeToDependencies = () => {
35350        dependencies.forEach((entry, p) => {
35351          var _a;
35352          const lastSubscription = (_a = lastDependencies == null ? void 0 : lastDependencies.get(p)) == null ? void 0 : _a.s;
35353          if (lastSubscription) {
35354            entry.s = lastSubscription;
35355          } else {
35356            const subscription = {
35357              s: p,
35358              d: proxyObject,
35359              k: key,
35360              c: evaluate,
35361              n: notifyInSync,
35362              i: derivedKeys
35363            };
35364            addSubscription(subscription);
35365            entry.s = subscription;
35366          }
35367        });
35368        lastDependencies == null ? void 0 : lastDependencies.forEach((entry, p) => {
35369          if (!dependencies.has(p) && entry.s) {
35370            removeSubscription(entry.s);
35371          }
35372        });
35373        lastDependencies = dependencies;
35374      };
35375      if (value instanceof Promise) {
35376        value.finally(subscribeToDependencies);
35377      } else {
35378        subscribeToDependencies();
35379      }
35380      proxyObject[key] = value;
35381    };
35382    evaluate();
35383  });
35384  return proxyObject;
35385}
35386function underive(proxyObject, options) {
35387  const keysToDelete = (options == null ? void 0 : options.delete) ? /* @__PURE__ */ new Set() : null;
35388  listSubscriptions(proxyObject).forEach((subscription) => {
35389    const { k: key } = subscription;
35390    if (!(options == null ? void 0 : options.keys) || options.keys.includes(key)) {
35391      removeSubscription(subscription);
35392      if (keysToDelete) {
35393        keysToDelete.add(key);
35394      }
35395    }
35396  });
35397  if (keysToDelete) {
35398    keysToDelete.forEach((key) => {
35399      delete proxyObject[key];
35400    });
35401  }
35402}
35403
35404function addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject = proxyObject) {
35405  console.warn(
35406    "addComputed is deprecated. Please consider using `derive` or `proxyWithComputed` instead. Falling back to emulation with derive. https://github.com/pmndrs/valtio/pull/201"
35407  );
35408  const derivedFns = {};
35409  Object.keys(computedFns_FAKE).forEach((key) => {
35410    derivedFns[key] = (get) => computedFns_FAKE[key](get(proxyObject));
35411  });
35412  return derive(derivedFns, { proxy: targetObject });
35413}
35414
35415function proxyWithComputed(initialObject, computedFns) {
35416  Object.keys(computedFns).forEach((key) => {
35417    if (Object.getOwnPropertyDescriptor(initialObject, key)) {
35418      throw new Error("object property already defined");
35419    }
35420    const computedFn = computedFns[key];
35421    const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn;
35422    const desc = {};
35423    desc.get = () => get(snapshot(proxyObject));
35424    if (set) {
35425      desc.set = (newValue) => set(proxyObject, newValue);
35426    }
35427    Object.defineProperty(initialObject, key, desc);
35428  });
35429  const proxyObject = proxy(initialObject);
35430  return proxyObject;
35431}
35432
35433const utils_isObject = (x) => typeof x === "object" && x !== null;
35434const deepClone = (obj) => {
35435  if (!utils_isObject(obj)) {
35436    return obj;
35437  }
35438  const baseObject = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj));
35439  Reflect.ownKeys(obj).forEach((key) => {
35440    baseObject[key] = deepClone(obj[key]);
35441  });
35442  return baseObject;
35443};
35444function proxyWithHistory(initialValue, skipSubscribe = false) {
35445  const proxyObject = proxy({
35446    value: initialValue,
35447    history: ref({
35448      wip: void 0,
35449      snapshots: [],
35450      index: -1
35451    }),
35452    canUndo: () => proxyObject.history.index > 0,
35453    undo: () => {
35454      if (proxyObject.canUndo()) {
35455        proxyObject.value = proxyObject.history.wip = deepClone(
35456          proxyObject.history.snapshots[--proxyObject.history.index]
35457        );
35458      }
35459    },
35460    canRedo: () => proxyObject.history.index < proxyObject.history.snapshots.length - 1,
35461    redo: () => {
35462      if (proxyObject.canRedo()) {
35463        proxyObject.value = proxyObject.history.wip = deepClone(
35464          proxyObject.history.snapshots[++proxyObject.history.index]
35465        );
35466      }
35467    },
35468    saveHistory: () => {
35469      proxyObject.history.snapshots.splice(proxyObject.history.index + 1);
35470      proxyObject.history.snapshots.push(snapshot(proxyObject).value);
35471      ++proxyObject.history.index;
35472    },
35473    subscribe: () => subscribe(proxyObject, (ops) => {
35474      if (ops.every(
35475        (op) => op[1][0] === "value" && (op[0] !== "set" || op[2] !== proxyObject.history.wip)
35476      )) {
35477        proxyObject.saveHistory();
35478      }
35479    })
35480  });
35481  proxyObject.saveHistory();
35482  if (!skipSubscribe) {
35483    proxyObject.subscribe();
35484  }
35485  return proxyObject;
35486}
35487
35488function proxySet(initialValues) {
35489  const set = proxy({
35490    data: Array.from(new Set(initialValues)),
35491    has(value) {
35492      return this.data.indexOf(value) !== -1;
35493    },
35494    add(value) {
35495      let hasProxy = false;
35496      if (typeof value === "object" && value !== null) {
35497        hasProxy = this.data.indexOf(proxy(value)) !== -1;
35498      }
35499      if (this.data.indexOf(value) === -1 && !hasProxy) {
35500        this.data.push(value);
35501      }
35502      return this;
35503    },
35504    delete(value) {
35505      const index = this.data.indexOf(value);
35506      if (index === -1) {
35507        return false;
35508      }
35509      this.data.splice(index, 1);
35510      return true;
35511    },
35512    clear() {
35513      this.data.splice(0);
35514    },
35515    get size() {
35516      return this.data.length;
35517    },
35518    forEach(cb) {
35519      this.data.forEach((value) => {
35520        cb(value, value, this);
35521      });
35522    },
35523    get [Symbol.toStringTag]() {
35524      return "Set";
35525    },
35526    toJSON() {
35527      return {};
35528    },
35529    [Symbol.iterator]() {
35530      return this.data[Symbol.iterator]();
35531    },
35532    values() {
35533      return this.data.values();
35534    },
35535    keys() {
35536      return this.data.values();
35537    },
35538    entries() {
35539      return new Set(this.data).entries();
35540    }
35541  });
35542  Object.defineProperties(set, {
35543    data: {
35544      enumerable: false
35545    },
35546    size: {
35547      enumerable: false
35548    },
35549    toJSON: {
35550      enumerable: false
35551    }
35552  });
35553  Object.seal(set);
35554  return set;
35555}
35556
35557function proxyMap(entries) {
35558  const map = vanilla_proxy({
35559    data: Array.from(entries || []),
35560    has(key) {
35561      return this.data.some((p) => p[0] === key);
35562    },
35563    set(key, value) {
35564      const record = this.data.find((p) => p[0] === key);
35565      if (record) {
35566        record[1] = value;
35567      } else {
35568        this.data.push([key, value]);
35569      }
35570      return this;
35571    },
35572    get(key) {
35573      var _a;
35574      return (_a = this.data.find((p) => p[0] === key)) == null ? void 0 : _a[1];
35575    },
35576    delete(key) {
35577      const index = this.data.findIndex((p) => p[0] === key);
35578      if (index === -1) {
35579        return false;
35580      }
35581      this.data.splice(index, 1);
35582      return true;
35583    },
35584    clear() {
35585      this.data.splice(0);
35586    },
35587    get size() {
35588      return this.data.length;
35589    },
35590    toJSON() {
35591      return {};
35592    },
35593    forEach(cb) {
35594      this.data.forEach((p) => {
35595        cb(p[1], p[0], this);
35596      });
35597    },
35598    keys() {
35599      return this.data.map((p) => p[0]).values();
35600    },
35601    values() {
35602      return this.data.map((p) => p[1]).values();
35603    },
35604    entries() {
35605      return new Map(this.data).entries();
35606    },
35607    get [Symbol.toStringTag]() {
35608      return "Map";
35609    },
35610    [Symbol.iterator]() {
35611      return this.entries();
35612    }
35613  });
35614  Object.defineProperties(map, {
35615    data: {
35616      enumerable: false
35617    },
35618    size: {
35619      enumerable: false
35620    },
35621    toJSON: {
35622      enumerable: false
35623    }
35624  });
35625  Object.seal(map);
35626  return map;
35627}
35628
35629
35630
35631;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js
35632// @ts-nocheck
35633/**
35634 * External dependencies
35635 */
35636
35637/**
35638 * WordPress dependencies
35639 */
35640
35641
35642const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({
35643  slots: proxyMap(),
35644  fills: proxyMap(),
35645  registerSlot: () => {
35646     false ? 0 : void 0;
35647  },
35648  updateSlot: () => {},
35649  unregisterSlot: () => {},
35650  registerFill: () => {},
35651  unregisterFill: () => {},
35652  // This helps the provider know if it's using the default context value or not.
35653  isDefault: true
35654});
35655/* harmony default export */ const slot_fill_context = (SlotFillContext);
35656
35657;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/use-slot.js
35658// @ts-nocheck
35659/**
35660 * External dependencies
35661 */
35662
35663
35664/**
35665 * WordPress dependencies
35666 */
35667
35668
35669/**
35670 * Internal dependencies
35671 */
35672
35673function useSlot(name) {
35674  const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
35675  const slots = useSnapshot(registry.slots, {
35676    sync: true
35677  });
35678  // The important bit here is that the `useSnapshot` call ensures that the
35679  // hook only causes a re-render if the slot with the given name changes,
35680  // not any other slot.
35681  const slot = slots.get(name);
35682  const api = (0,external_wp_element_namespaceObject.useMemo)(() => ({
35683    updateSlot: fillProps => registry.updateSlot(name, fillProps),
35684    unregisterSlot: ref => registry.unregisterSlot(name, ref),
35685    registerFill: ref => registry.registerFill(name, ref),
35686    unregisterFill: ref => registry.unregisterFill(name, ref)
35687  }), [name, registry]);
35688  return {
35689    ...slot,
35690    ...api
35691  };
35692}
35693
35694;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/context.js
35695// @ts-nocheck
35696/**
35697 * WordPress dependencies
35698 */
35699
35700const context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({
35701  registerSlot: () => {},
35702  unregisterSlot: () => {},
35703  registerFill: () => {},
35704  unregisterFill: () => {},
35705  getSlot: () => {},
35706  getFills: () => {},
35707  subscribe: () => {}
35708});
35709/* harmony default export */ const context = (context_SlotFillContext);
35710
35711;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/use-slot.js
35712// @ts-nocheck
35713/**
35714 * WordPress dependencies
35715 */
35716
35717
35718/**
35719 * Internal dependencies
35720 */
35721
35722
35723/**
35724 * React hook returning the active slot given a name.
35725 *
35726 * @param {string} name Slot name.
35727 * @return {Object} Slot object.
35728 */
35729const use_slot_useSlot = name => {
35730  const {
35731    getSlot,
35732    subscribe
35733  } = (0,external_wp_element_namespaceObject.useContext)(context);
35734  return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name));
35735};
35736/* harmony default export */ const use_slot = (use_slot_useSlot);
35737
35738;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/fill.js
35739// @ts-nocheck
35740
35741/**
35742 * WordPress dependencies
35743 */
35744
35745
35746/**
35747 * Internal dependencies
35748 */
35749
35750
35751function Fill({
35752  name,
35753  children
35754}) {
35755  const {
35756    registerFill,
35757    unregisterFill
35758  } = (0,external_wp_element_namespaceObject.useContext)(context);
35759  const slot = use_slot(name);
35760  const ref = (0,external_wp_element_namespaceObject.useRef)({
35761    name,
35762    children
35763  });
35764  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
35765    const refValue = ref.current;
35766    registerFill(name, refValue);
35767    return () => unregisterFill(name, refValue);
35768    // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new depen
35768dencies could cause unexpected changes in behavior.
35769    // We'll leave them as-is until a more detailed investigation/refactor can be performed.
35770    // eslint-disable-next-line react-hooks/exhaustive-deps
35771  }, []);
35772  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
35773    ref.current.children = children;
35774    if (slot) {
35775      slot.forceUpdate();
35776    }
35777    // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
35778    // We'll leave them as-is until a more detailed investigation/refactor can be performed.
35779    // eslint-disable-next-line react-hooks/exhaustive-deps
35780  }, [children]);
35781  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
35782    if (name === ref.current.name) {
35783      // Ignore initial effect.
35784      return;
35785    }
35786    unregisterFill(ref.current.name, ref.current);
35787    ref.current.name = name;
35788    registerFill(name, ref.current);
35789    // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
35790    // We'll leave them as-is until a more detailed investigation/refactor can be performed.
35791    // eslint-disable-next-line react-hooks/exhaustive-deps
35792  }, [name]);
35793  return null;
35794}
35795
35796;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/slot.js
35797
35798// @ts-nocheck
35799/**
35800 * WordPress dependencies
35801 */
35802
35803
35804/**
35805 * Internal dependencies
35806 */
35807
35808
35809/**
35810 * Whether the argument is a function.
35811 *
35812 * @param {*} maybeFunc The argument to check.
35813 * @return {boolean} True if the argument is a function, false otherwise.
35814 */
35815function isFunction(maybeFunc) {
35816  return typeof maybeFunc === 'function';
35817}
35818class SlotComponent extends external_wp_element_namespaceObject.Component {
35819  constructor() {
35820    super(...arguments);
35821    this.isUnmounted = false;
35822  }
35823  componentDidMount() {
35824    const {
35825      registerSlot
35826    } = this.props;
35827    this.isUnmounted = false;
35828    registerSlot(this.props.name, this);
35829  }
35830  componentWillUnmount() {
35831    const {
35832      unregisterSlot
35833    } = this.props;
35834    this.isUnmounted = true;
35835    unregisterSlot(this.props.name, this);
35836  }
35837  componentDidUpdate(prevProps) {
35838    const {
35839      name,
35840      unregisterSlot,
35841      registerSlot
35842    } = this.props;
35843    if (prevProps.name !== name) {
35844      unregisterSlot(prevProps.name);
35845      registerSlot(name, this);
35846    }
35847  }
35848  forceUpdate() {
35849    if (this.isUnmounted) {
35850      return;
35851    }
35852    super.forceUpdate();
35853  }
35854  render() {
35855    var _getFills;
35856    const {
35857      children,
35858      name,
35859      fillProps = {},
35860      getFills
35861    } = this.props;
35862    const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
35863      const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
35864      return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => {
35865        if (!child || typeof child === 'string') {
35866          return child;
35867        }
35868        const childKey = child.key || childIndex;
35869        return (0,external_wp_element_namespaceObject.cloneElement)(child, {
35870          key: childKey
35871        });
35872      });
35873    }).filter(
35874    // In some cases fills are rendered only when some conditions apply.
35875    // This ensures that we only use non-empty fills when rendering, i.e.,
35876    // it allows us to render wrappers only when the fills are actually present.
35877    element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element));
35878    return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isFunction(children) ? children(fills) : fills);
35879  }
35880}
35881const Slot = props => (0,external_wp_element_namespaceObject.createElement)(context.Consumer, null, ({
35882  registerSlot,
35883  unregisterSlot,
35884  getFills
35885}) => (0,external_wp_element_namespaceObject.createElement)(SlotComponent, {
35886  ...props,
35887  registerSlot: registerSlot,
35888  unregisterSlot: unregisterSlot,
35889  getFills: getFills
35890}));
35891/* harmony default export */ const slot = (Slot);
35892
35893;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/rng.js
35894// Unique ID creation requires a high quality random # generator. In the browser we therefore
35895// require the crypto API and do not support built-in fallback to lower quality random number
35896// generators (like Math.random()).
35897var getRandomValues;
35898var rnds8 = new Uint8Array(16);
35899function rng() {
35900  // lazy load so that environments that need to polyfill have a chance to do so
35901  if (!getRandomValues) {
35902    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
35903    // find the complete implementation of crypto (msCrypto) on IE11.
35904    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
35905
35906    if (!getRandomValues) {
35907      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
35908    }
35909  }
35910
35911  return getRandomValues(rnds8);
35912}
35913;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/regex.js
35914/* harmony default export */ const regex = (/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i);
35915;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/validate.js
35916
35917
35918function validate(uuid) {
35919  return typeof uuid === 'string' && regex.test(uuid);
35920}
35921
35922/* harmony default export */ const esm_browser_validate = (validate);
35923;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/stringify.js
35924
35925/**
35926 * Convert array of 16 byte values to UUID string format of the form:
35927 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
35928 */
35929
35930var byteToHex = [];
35931
35932for (var stringify_i = 0; stringify_i < 256; ++stringify_i) {
35933  byteToHex.push((stringify_i + 0x100).toString(16).substr(1));
35934}
35935
35936function stringify_stringify(arr) {
35937  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
35938  // Note: Be careful editing this code!  It's been tuned for performance
35939  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
35940  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
35941  // of the following:
35942  // - One or more input array values don't map to a hex octet (leading to
35943  // "undefined" in the uuid)
35944  // - Invalid input values for the RFC `version` or `variant` fields
35945
35946  if (!esm_browser_validate(uuid)) {
35947    throw TypeError('Stringified UUID is invalid');
35948  }
35949
35950  return uuid;
35951}
35952
35953/* harmony default export */ const esm_browser_stringify = (stringify_stringify);
35954;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/v4.js
35955
35956
35957
35958function v4(options, buf, offset) {
35959  options = options || {};
35960  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
35961
35962  rnds[6] = rnds[6] & 0x0f | 0x40;
35963  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
35964
35965  if (buf) {
35966    offset = offset || 0;
35967
35968    for (var i = 0; i < 16; ++i) {
35969      buf[offset + i] = rnds[i];
35970    }
35971
35972    return buf;
35973  }
35974
35975  return esm_browser_stringify(rnds);
35976}
35977
35978/* harmony default export */ const esm_browser_v4 = (v4);
35979;// CONCATENATED MODULE: ./packages/components/build-module/style-provider/index.js
35980
35981/**
35982 * External dependencies
35983 */
35984
35985
35986
35987
35988/**
35989 * Internal dependencies
35990 */
35991
35992const uuidCache = new Set();
35993// Use a weak map so that when the container is detached it's automatically
35994// dereferenced to avoid memory leak.
35995const containerCacheMap = new WeakMap();
35996const memoizedCreateCacheWithContainer = container => {
35997  if (containerCacheMap.has(container)) {
35998    return containerCacheMap.get(container);
35999  }
36000
36001  // Emotion only accepts alphabetical and hyphenated keys so we just
36002  // strip the numbers from the UUID. It _should_ be fine.
36003  let key = esm_browser_v4().replace(/[0-9]/g, '');
36004  while (uuidCache.has(key)) {
36005    key = esm_browser_v4().replace(/[0-9]/g, '');
36006  }
36007  uuidCache.add(key);
36008  const cache = emotion_cache_browser_esm({
36009    container,
36010    key
36011  });
36012  containerCacheMap.set(container, cache);
36013  return cache;
36014};
36015function StyleProvider(props) {
36016  const {
36017    children,
36018    document
36019  } = props;
36020  if (!document) {
36021    return null;
36022  }
36023  const cache = memoizedCreateCacheWithContainer(document.head);
36024  return (0,external_wp_element_namespaceObject.createElement)(CacheProvider, {
36025    value: cache
36026  }, children);
36027}
36028/* harmony default export */ const style_provider = (StyleProvider);
36029
36030;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/fill.js
36031
36032// @ts-nocheck
36033/**
36034 * WordPress dependencies
36035 */
36036
36037
36038/**
36039 * Internal dependencies
36040 */
36041
36042
36043function fill_useForceUpdate() {
36044  const [, setState] = (0,external_wp_element_namespaceObject.useState)({});
36045  const mounted = (0,external_wp_element_namespaceObject.useRef)(true);
36046  (0,external_wp_element_namespaceObject.useEffect)(() => {
36047    mounted.current = true;
36048    return () => {
36049      mounted.current = false;
36050    };
36051  }, []);
36052  return () => {
36053    if (mounted.current) {
36054      setState({});
36055    }
36056  };
36057}
36058function fill_Fill({
36059  name,
36060  children
36061}) {
36062  const {
36063    registerFill,
36064    unregisterFill,
36065    ...slot
36066  } = useSlot(name);
36067  const rerender = fill_useForceUpdate();
36068  const ref = (0,external_wp_element_namespaceObject.useRef)({
36069    rerender
36070  });
36071  (0,external_wp_element_namespaceObject.useEffect)(() => {
36072    // We register fills so we can keep track of their existence.
36073    // Some Slot implementations need to know if there're already fills
36074    // registered so they can choose to render themselves or not.
36075    registerFill(ref);
36076    return () => {
36077      unregisterFill(ref);
36078    };
36079  }, [registerFill, unregisterFill]);
36080  if (!slot.ref || !slot.ref.current) {
36081    return null;
36082  }
36083  if (typeof children === 'function') {
36084    children = children(slot.fillProps);
36085  }
36086
36087  // When using a `Fill`, the `children` will be rendered in the document of the
36088  // `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
36089  // to make sure we're referencing the right document/iframe (instead of the
36090  // context of the `Fill`'s parent).
36091  const wrappedChildren = (0,external_wp_element_namespaceObject.createElement)(style_provider, {
36092    document: slot.ref.current.ownerDocument
36093  }, children);
36094  return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current);
36095}
36096
36097;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot.js
36098
36099// @ts-nocheck
36100/**
36101 * WordPress dependencies
36102 */
36103
36104
36105
36106/**
36107 * Internal dependencies
36108 */
36109
36110
36111function slot_Slot(props, forwardedRef) {
36112  const {
36113    name,
36114    fillProps = {},
36115    as,
36116    // `children` is not allowed. However, if it is passed,
36117    // it will be displayed as is, so remove `children`.
36118    children,
36119    ...restProps
36120  } = props;
36121  const {
36122    registerSlot,
36123    unregisterSlot,
36124    ...registry
36125  } = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
36126  const ref = (0,external_wp_element_namespaceObject.useRef)();
36127  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
36128    registerSlot(name, ref, fillProps);
36129    return () => {
36130      unregisterSlot(name, ref);
36131    };
36132    // Ignore reason: We don't want to unregister and register the slot whenever
36133    // `fillProps` change, which would cause the fill to be re-mounted. Instead,
36134    // we can just update the slot (see hook below).
36135    // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
36136    // eslint-disable-next-line react-hooks/exhaustive-deps
36137  }, [registerSlot, unregisterSlot, name]);
36138  // fillProps may be an update that interacts with the layout, so we
36139  // useLayoutEffect.
36140  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
36141    registry.updateSlot(name, fillProps);
36142  });
36143  return (0,external_wp_element_namespaceObject.createElement)(component, {
36144    as: as,
36145    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]),
36146    ...restProps
36147  });
36148}
36149/* harmony default export */ const bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot));
36150
36151;// CONCATENATED MODULE: external ["wp","isShallowEqual"]
36152const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"];
36153var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject);
36154;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js
36155
36156// @ts-nocheck
36157/**
36158 * External dependencies
36159 */
36160
36161
36162
36163/**
36164 * WordPress dependencies
36165 */
36166
36167
36168
36169/**
36170 * Internal dependencies
36171 */
36172
36173function createSlotRegistry() {
36174  const slots = proxyMap();
36175  const fills = proxyMap();
36176  function registerSlot(name, ref, fillProps) {
36177    const slot = slots.get(name) || {};
36178    slots.set(name, vanilla_ref({
36179      ...slot,
36180      ref: ref || slot.ref,
36181      fillProps: fillProps || slot.fillProps || {}
36182    }));
36183  }
36184  function unregisterSlot(name, ref) {
36185    // Make sure we're not unregistering a slot registered by another element
36186    // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
36187    if (slots.get(name)?.ref === ref) {
36188      slots.delete(name);
36189    }
36190  }
36191  function updateSlot(name, fillProps) {
36192    const slot = slots.get(name);
36193    if (!slot) {
36194      return;
36195    }
36196    if (external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) {
36197      return;
36198    }
36199    slot.fillProps = fillProps;
36200    const slotFills = fills.get(name);
36201    if (slotFills) {
36202      // Force update fills.
36203      slotFills.map(fill => fill.current.rerender());
36204    }
36205  }
36206  function registerFill(name, ref) {
36207    fills.set(name, vanilla_ref([...(fills.get(name) || []), ref]));
36208  }
36209  function unregisterFill(name, ref) {
36210    const fillsForName = fills.get(name);
36211    if (!fillsForName) {
36212      return;
36213    }
36214    fills.set(name, vanilla_ref(fillsForName.filter(fillRef => fillRef !== ref)));
36215  }
36216  return {
36217    slots,
36218    fills,
36219    registerSlot,
36220    updateSlot,
36221    unregisterSlot,
36222    registerFill,
36223    unregisterFill
36224  };
36225}
36226function SlotFillProvider({
36227  children
36228}) {
36229  const [registry] = (0,external_wp_element_namespaceObject.useState)(createSlotRegistry);
36230  return (0,external_wp_element_namespaceObject.createElement)(slot_fill_context.Provider, {
36231    value: registry
36232  }, children);
36233}
36234
36235;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/provider.js
36236
36237// @ts-nocheck
36238/**
36239 * WordPress dependencies
36240 */
36241
36242
36243/**
36244 * Internal dependencies
36245 */
36246
36247class provider_SlotFillProvider extends external_wp_element_namespaceObject.Component {
36248  constructor() {
36249    super(...arguments);
36250    this.registerSlot = this.registerSlot.bind(this);
36251    this.registerFill = this.registerFill.bind(this);
36252    this.unregisterSlot = this.unregisterSlot.bind(this);
36253    this.unregisterFill = this.unregisterFill.bind(this);
36254    this.getSlot = this.getSlot.bind(this);
36255    this.getFills = this.getFills.bind(this);
36256    this.subscribe = this.subscribe.bind(this);
36257    this.slots = {};
36258    this.fills = {};
36259    this.listeners = [];
36260    this.contextValue = {
36261      registerSlot: this.registerSlot,
36262      unregisterSlot: this.unregisterSlot,
36263      registerFill: this.registerFill,
36264      unregisterFill: this.unregisterFill,
36265      getSlot: this.getSlot,
36266      getFills: this.getFills,
36267      subscribe: this.subscribe
36268    };
36269  }
36270  registerSlot(name, slot) {
36271    const previousSlot = this.slots[name];
36272    this.slots[name] = slot;
36273    this.triggerListeners();
36274
36275    // Sometimes the fills are registered after the initial render of slot
36276    // But before the registerSlot call, we need to rerender the slot.
36277    this.forceUpdateSlot(name);
36278
36279    // If a new instance of a slot is being mounted while another with the
36280    // same name exists, force its update _after_ the new slot has been
36281    // assigned into the instance, such that its own rendering of children
36282    // will be empty (the new Slot will subsume all fills for this name).
36283    if (previousSlot) {
36284      previousSlot.forceUpdate();
36285    }
36286  }
36287  registerFill(name, instance) {
36288    this.fills[name] = [...(this.fills[name] || []), instance];
36289    this.forceUpdateSlot(name);
36290  }
36291  unregisterSlot(name, instance) {
36292    // If a previous instance of a Slot by this name unmounts, do nothing,
36293    // as the slot and its fills should only be removed for the current
36294    // known instance.
36295    if (this.slots[name] !== instance) {
36296      return;
36297    }
36298    delete this.slots[name];
36299    this.triggerListeners();
36300  }
36301  unregisterFill(name, instance) {
36302    var _this$fills$name$filt;
36303    this.fills[name] = (_this$fills$name$filt = this.fills[name]?.filter(fill => fill !== instance)) !== null && _this$fills$name$filt !== void 0 ? _this$fills$name$filt : [];
36304    this.forceUpdateSlot(name);
36305  }
36306  getSlot(name) {
36307    return this.slots[name];
36308  }
36309  getFills(name, slotInstance) {
36310    // Fills should only be returned for the current instance of the slot
36311    // in which they occupy.
36312    if (this.slots[name] !== slotInstance) {
36313      return [];
36314    }
36315    return this.fills[name];
36316  }
36317  forceUpdateSlot(name) {
36318    const slot = this.getSlot(name);
36319    if (slot) {
36320      slot.forceUpdate();
36321    }
36322  }
36323  triggerListeners() {
36324    this.listeners.forEach(listener => listener());
36325  }
36326  subscribe(listener) {
36327    this.listeners.push(listener);
36328    return () => {
36329      this.listeners = this.listeners.filter(l => l !== listener);
36330    };
36331  }
36332  render() {
36333    return (0,external_wp_element_namespaceObject.createElement)(context.Provider, {
36334      value: this.contextValue
36335    }, this.props.children);
36336  }
36337}
36338
36339;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/index.js
36340
36341// @ts-nocheck
36342/**
36343 * WordPress dependencies
36344 */
36345
36346
36347/**
36348 * Internal dependencies
36349 */
36350
36351
36352
36353
36354
36355
36356
36357
36358
36359function slot_fill_Fill(props) {
36360  // We're adding both Fills here so they can register themselves before
36361  // their respective slot has been registered. Only the Fill that has a slot
36362  // will render. The other one will return null.
36363  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Fill, {
36364    ...props
36365  }), (0,external_wp_element_namespaceObject.createElement)(fill_Fill, {
36366    ...props
36367  }));
36368}
36369const slot_fill_Slot = (0,external_wp_element_namespaceObject.forwardRef)(({
36370  bubblesVirtually,
36371  ...props
36372}, ref) => {
36373  if (bubblesVirtually) {
36374    return (0,external_wp_element_namespaceObject.createElement)(bubbles_virtually_slot, {
36375      ...props,
36376      ref: ref
36377    });
36378  }
36379  return (0,external_wp_element_namespaceObject.createElement)(slot, {
36380    ...props
36381  });
36382});
36383function Provider({
36384  children,
36385  passthrough = false,
36386  ...props
36387}) {
36388  const parent = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
36389  if (!parent.isDefault && passthrough) {
36390    return children;
36391  }
36392  return (0,external_wp_element_namespaceObject.createElement)(provider_SlotFillProvider, {
36393    ...props
36394  }, (0,external_wp_element_namespaceObject.createElement)(SlotFillProvider, null, children));
36395}
36396function createSlotFill(key) {
36397  const baseName = typeof key === 'symbol' ? key.description : key;
36398  const FillComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, {
36399    name: key,
36400    ...props
36401  });
36402  FillComponent.displayName = `${baseName}Fill`;
36403  const SlotComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot, {
36404    name: key,
36405    ...props
36406  });
36407  SlotComponent.displayName = `${baseName}Slot`;
36408  SlotComponent.__unstableName = key;
36409  return {
36410    Fill: FillComponent,
36411    Slot: SlotComponent
36412  };
36413}
36414const createPrivateSlotFill = name => {
36415  const privateKey = Symbol(name);
36416  const privateSlotFill = createSlotFill(privateKey);
36417  return {
36418    privateKey,
36419    ...privateSlotFill
36420  };
36421};
36422
36423;// CONCATENATED MODULE: ./packages/components/build-module/popover/overlay-middlewares.js
36424/**
36425 * External dependencies
36426 */
36427
36428
36429function overlayMiddlewares() {
36430  return [{
36431    name: 'overlay',
36432    fn({
36433      rects
36434    }) {
36435      return rects.reference;
36436    }
36437  }, size({
36438    apply({
36439      rects,
36440      elements
36441    }) {
36442      var _elements$floating;
36443      const {
36444        firstElementChild
36445      } = (_elements$floating = elements.floating) !== null && _elements$floating !== void 0 ? _elements$floating : {};
36446
36447      // Only HTMLElement instances have the `style` property.
36448      if (!(firstElementChild instanceof HTMLElement)) return;
36449
36450      // Reduce the height of the popover to the available space.
36451      Object.assign(firstElementChild.style, {
36452        width: `${rects.reference.width}px`,
36453        height: `${rects.reference.height}px`
36454      });
36455    }
36456  })];
36457}
36458
36459;// CONCATENATED MODULE: ./packages/components/build-module/popover/index.js
36460
36461/**
36462 * External dependencies
36463 */
36464
36465
36466
36467// eslint-disable-next-line no-restricted-imports
36468
36469// eslint-disable-next-line no-restricted-imports
36470
36471
36472/**
36473 * WordPress dependencies
36474 */
36475
36476
36477
36478
36479
36480
36481/**
36482 * Internal dependencies
36483 */
36484
36485
36486
36487
36488
36489
36490
36491/**
36492 * Name of slot in which popover should fill.
36493 *
36494 * @type {string}
36495 */
36496const SLOT_NAME = 'Popover';
36497
36498// An SVG displaying a triangle facing down, filled with a solid
36499// color and bordered in such a way to create an arrow-like effect.
36500// Keeping the SVG's viewbox squared simplify the arrow positioning
36501// calculations.
36502const ArrowTriangle = () => (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
36503  xmlns: "http://www.w3.org/2000/svg",
36504  viewBox: `0 0 100 100`,
36505  className: "components-popover__triangle",
36506  role: "presentation"
36507}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
36508  className: "components-popover__triangle-bg",
36509  d: "M 0 0 L 50 50 L 100 0"
36510}), (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
36511  className: "components-popover__triangle-border",
36512  d: "M 0 0 L 50 50 L 100 0",
36513  vectorEffect: "non-scaling-stroke"
36514}));
36515const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
36516const fallbackContainerClassname = 'components-popover__fallback-container';
36517const getPopoverFallbackContainer = () => {
36518  let container = document.body.querySelector('.' + fallbackContainerClassname);
36519  if (!container) {
36520    container = document.createElement('div');
36521    container.className = fallbackContainerClassname;
36522    document.body.append(container);
36523  }
36524  return container;
36525};
36526const UnforwardedPopover = (props, forwardedRef) => {
36527  const {
36528    animate = true,
36529    headerTitle,
36530    onClose,
36531    children,
36532    className,
36533    noArrow = true,
36534    position,
36535    placement: placementProp = 'bottom-start',
36536    offset: offsetProp = 0,
36537    focusOnMount = 'firstElement',
36538    anchor,
36539    expandOnMobile,
36540    onFocusOutside,
36541    __unstableSlotName = SLOT_NAME,
36542    flip = true,
36543    resize = true,
36544    shift = false,
36545    inline = false,
36546    variant,
36547    // Deprecated props
36548    __unstableForcePosition,
36549    anchorRef,
36550    anchorRect,
36551    getAnchorRect,
36552    isAlternate,
36553    // Rest
36554    ...contentProps
36555  } = props;
36556  let computedFlipProp = flip;
36557  let computedResizeProp = resize;
36558  if (__unstableForcePosition !== undefined) {
36559    external_wp_deprecated_default()('`__unstableForcePosition` prop in wp.components.Popover', {
36560      since: '6.1',
36561      version: '6.3',
36562      alternative: '`flip={ false }` and  `resize={ false }`'
36563    });
36564
36565    // Back-compat, set the `flip` and `resize` props
36566    // to `false` to replicate `__unstableForcePosition`.
36567    computedFlipProp = !__unstableForcePosition;
36568    computedResizeProp = !__unstableForcePosition;
36569  }
36570  if (anchorRef !== undefined) {
36571    external_wp_deprecated_default()('`anchorRef` prop in wp.components.Popover', {
36572      since: '6.1',
36573      alternative: '`anchor` prop'
36574    });
36575  }
36576  if (anchorRect !== undefined) {
36577    external_wp_deprecated_default()('`anchorRect` prop in wp.components.Popover', {
36578      since: '6.1',
36579      alternative: '`anchor` prop'
36580    });
36581  }
36582  if (getAnchorRect !== undefined) {
36583    external_wp_deprecated_default()('`getAnchorRect` prop in wp.components.Popover', {
36584      since: '6.1',
36585      alternative: '`anchor` prop'
36586    });
36587  }
36588  const computedVariant = isAlternate ? 'toolbar' : variant;
36589  if (isAlternate !== undefined) {
36590    external_wp_deprecated_default()('`isAlternate` prop in wp.components.Popover', {
36591      since: '6.2',
36592      alternative: "`variant` prop with the `'toolbar'` value"
36593    });
36594  }
36595  const arrowRef = (0,external_wp_element_namespaceObject.useRef)(null);
36596  const [fallbackReferenceElement, setFallbackReferenceElement] = (0,external_wp_element_namespaceObject.useState)(null);
36597  const anchorRefFallback = (0,external_wp_element_namespaceObject.useCallback)(node => {
36598    setFallbackReferenceElement(node);
36599  }, []);
36600  const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
36601  const isExpanded = expandOnMobile && isMobileViewport;
36602  const hasArrow = !isExpanded && !noArrow;
36603  const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
36604  const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), offset(offsetProp), computedFlipProp && floating_ui_core_flip(), computedResizeProp && size({
36605    apply(sizeProps) {
36606      var _refs$floating$curren;
36607      const {
36608        firstElementChild
36609      } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {};
36610
36611      // Only HTMLElement instances have the `style` property.
36612      if (!(firstElementChild instanceof HTMLElement)) return;
36613
36614      // Reduce the height of the popover to the available space.
36615      Object.assign(firstElementChild.style, {
36616        maxHeight: `${sizeProps.availableHeight}px`,
36617        overflow: 'auto'
36618      });
36619    }
36620  }), shift && floating_ui_core_shift({
36621    crossAxis: true,
36622    limiter: limitShift(),
36623    padding: 1 // Necessary to avoid flickering at the edge of the viewport.
36624  }), floating_ui_react_dom_esm_arrow({
36625    element: arrowRef
36626  })];
36627  const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName;
36628  const slot = useSlot(slotName);
36629  let onDialogClose;
36630  if (onClose || onFocusOutside) {
36631    onDialogClose = (type, event) => {
36632      // Ideally the popover should have just a single onClose prop and
36633      // not three props that potentially do the same thing.
36634      if (type === 'focus-outside' && onFocusOutside) {
36635        onFocusOutside(event);
36636      } else if (onClose) {
36637        onClose();
36638      }
36639    };
36640  }
36641  const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({
36642    focusOnMount,
36643    __unstableOnClose: onDialogClose,
36644    // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
36645    onClose: onDialogClose
36646  });
36647  const {
36648    // Positioning coordinates
36649    x,
36650    y,
36651    // Object with "regular" refs to both "reference" and "floating"
36652    refs,
36653    // Type of CSS position property to use (absolute or fixed)
36654    strategy,
36655    update,
36656    placement: computedPlacement,
36657    middlewareData: {
36658      arrow: arrowData
36659    }
36660  } = useFloating({
36661    placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps,
36662    middleware,
36663    whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, {
36664      layoutShift: false,
36665      animationFrame: true
36666    })
36667  });
36668  const arrowCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
36669    arrowRef.current = node;
36670    update();
36671  }, [update]);
36672
36673  // When any of the possible anchor "sources" change,
36674  // recompute the reference element (real or virtual) and its owner document.
36675
36676  const anchorRefTop = anchorRef?.top;
36677  const anchorRefBottom = anchorRef?.bottom;
36678  const anchorRefStartContainer = anchorRef?.startContainer;
36679  const anchorRefCurrent = anchorRef?.current;
36680  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
36681    const resultingReferenceElement = getReferenceElement({
36682      anchor,
36683      anchorRef,
36684      anchorRect,
36685      getAnchorRect,
36686      fallbackReferenceElement
36687    });
36688    refs.setReference(resultingReferenceElement);
36689  }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anch
36689orRect, getAnchorRect, fallbackReferenceElement, refs]);
36690  const mergedFloatingRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]);
36691  const style = isExpanded ? undefined : {
36692    position: strategy,
36693    top: 0,
36694    left: 0,
36695    // `x` and `y` are framer-motion specific props and are shorthands
36696    // for `translateX` and `translateY`. Currently it is not possible
36697    // to use `translateX` and `translateY` because those values would
36698    // be overridden by the return value of the
36699    // `placementToMotionAnimationProps` function.
36700    x: computePopoverPosition(x),
36701    y: computePopoverPosition(y)
36702  };
36703  const shouldReduceMotion = useReducedMotion();
36704  const shouldAnimate = animate && !isExpanded && !shouldReduceMotion;
36705  const [animationFinished, setAnimationFinished] = (0,external_wp_element_namespaceObject.useState)(false);
36706  const {
36707    style: motionInlineStyles,
36708    ...otherMotionProps
36709  } = (0,external_wp_element_namespaceObject.useMemo)(() => placementToMotionAnimationProps(computedPlacement), [computedPlacement]);
36710  const animationProps = shouldAnimate ? {
36711    style: {
36712      ...motionInlineStyles,
36713      ...style
36714    },
36715    onAnimationComplete: () => setAnimationFinished(true),
36716    ...otherMotionProps
36717  } : {
36718    animate: false,
36719    style
36720  };
36721
36722  // When Floating UI has finished positioning and Framer Motion has finished animating
36723  // the popover, add the `is-positioned` class to signal that all transitions have finished.
36724  const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null;
36725  let content = (0,external_wp_element_namespaceObject.createElement)(motion.div, {
36726    className: classnames_default()('components-popover', className, {
36727      'is-expanded': isExpanded,
36728      'is-positioned': isPositioned,
36729      // Use the 'alternate' classname for 'toolbar' variant for back compat.
36730      [`is-${computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant
36731    }),
36732    ...animationProps,
36733    ...contentProps,
36734    ref: mergedFloatingRef,
36735    ...dialogProps,
36736    tabIndex: -1
36737  }, isExpanded && (0,external_wp_element_namespaceObject.createElement)(scroll_lock, null), isExpanded && (0,external_wp_element_namespaceObject.createElement)("div", {
36738    className: "components-popover__header"
36739  }, (0,external_wp_element_namespaceObject.createElement)("span", {
36740    className: "components-popover__header-title"
36741  }, headerTitle), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
36742    className: "components-popover__close",
36743    icon: library_close,
36744    onClick: onClose
36745  })), (0,external_wp_element_namespaceObject.createElement)("div", {
36746    className: "components-popover__content"
36747  }, children), hasArrow && (0,external_wp_element_namespaceObject.createElement)("div", {
36748    ref: arrowCallbackRef,
36749    className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '),
36750    style: {
36751      left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '',
36752      top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : ''
36753    }
36754  }, (0,external_wp_element_namespaceObject.createElement)(ArrowTriangle, null)));
36755  const shouldRenderWithinSlot = slot.ref && !inline;
36756  const hasAnchor = anchorRef || anchorRect || anchor;
36757  if (shouldRenderWithinSlot) {
36758    content = (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, {
36759      name: slotName
36760    }, content);
36761  } else if (!inline) {
36762    content = (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(StyleProvider, {
36763      document: document
36764    }, content), getPopoverFallbackContainer());
36765  }
36766  if (hasAnchor) {
36767    return content;
36768  }
36769  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("span", {
36770    ref: anchorRefFallback
36771  }), content);
36772};
36773
36774/**
36775 * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
36776 *
36777 * ```jsx
36778 * import { Button, Popover } from '@wordpress/components';
36779 * import { useState } from '@wordpress/element';
36780 *
36781 * const MyPopover = () => {
36782 * 	const [ isVisible, setIsVisible ] = useState( false );
36783 * 	const toggleVisible = () => {
36784 * 		setIsVisible( ( state ) => ! state );
36785 * 	};
36786 *
36787 * 	return (
36788 * 		<Button variant="secondary" onClick={ toggleVisible }>
36789 * 			Toggle Popover!
36790 * 			{ isVisible && <Popover>Popover is toggled!</Popover> }
36791 * 		</Button>
36792 * 	);
36793 * };
36794 * ```
36795 *
36796 */
36797const popover_Popover = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPopover);
36798function PopoverSlot({
36799  name = SLOT_NAME
36800}, ref) {
36801  return (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot
36802  // @ts-expect-error Need to type `SlotFill`
36803  , {
36804    bubblesVirtually: true,
36805    name: name,
36806    className: "popover-slot",
36807    ref: ref
36808  });
36809}
36810
36811// @ts-expect-error For Legacy Reasons
36812popover_Popover.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot);
36813// @ts-expect-error For Legacy Reasons
36814popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider;
36815/* harmony default export */ const popover = (popover_Popover);
36816
36817;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/autocompleter-ui.js
36818
36819/**
36820 * External dependencies
36821 */
36822
36823
36824/**
36825 * WordPress dependencies
36826 */
36827
36828
36829
36830
36831
36832
36833/**
36834 * Internal dependencies
36835 */
36836
36837
36838
36839
36840
36841function getAutoCompleterUI(autocompleter) {
36842  const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter);
36843  function AutocompleterUI({
36844    filterValue,
36845    instanceId,
36846    listBoxId,
36847    className,
36848    selectedIndex,
36849    onChangeOptions,
36850    onSelect,
36851    onReset,
36852    reset,
36853    contentRef
36854  }) {
36855    const [items] = useItems(filterValue);
36856    const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({
36857      editableContentElement: contentRef.current
36858    });
36859    const [needsA11yCompat, setNeedsA11yCompat] = (0,external_wp_element_namespaceObject.useState)(false);
36860    const popoverRef = (0,external_wp_element_namespaceObject.useRef)(null);
36861    const popoverRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([popoverRef, (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
36862      if (!contentRef.current) return;
36863
36864      // If the popover is rendered in a different document than
36865      // the content, we need to duplicate the options list in the
36866      // content document so that it's available to the screen
36867      // readers, which check the DOM ID based aira-* attributes.
36868      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
36869    }, [contentRef])]);
36870    useOnClickOutside(popoverRef, reset);
36871    const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
36872    function announce(options) {
36873      if (!debouncedSpeak) {
36874        return;
36875      }
36876      if (!!options.length) {
36877        if (filterValue) {
36878          debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
36879          (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
36880        } else {
36881          debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
36882          (0,external_wp_i18n_namespaceObject._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive');
36883        }
36884      } else {
36885        debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive');
36886      }
36887    }
36888    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
36889      onChangeOptions(items);
36890      announce(items);
36891      // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
36892      // See https://github.com/WordPress/gutenberg/pull/41820
36893      // eslint-disable-next-line react-hooks/exhaustive-deps
36894    }, [items]);
36895    if (items.length === 0) {
36896      return null;
36897    }
36898    const ListBox = ({
36899      Component = 'div'
36900    }) => (0,external_wp_element_namespaceObject.createElement)(Component, {
36901      id: listBoxId,
36902      role: "listbox",
36903      className: "components-autocomplete__results"
36904    }, items.map((option, index) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
36905      key: option.key,
36906      id: `components-autocomplete-item-${instanceId}-${option.key}`,
36907      role: "option",
36908      "aria-selected": index === selectedIndex,
36909      disabled: option.isDisabled,
36910      className: classnames_default()('components-autocomplete__result', className, {
36911        'is-selected': index === selectedIndex
36912      }),
36913      onClick: () => onSelect(option)
36914    }, option.label)));
36915    return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(popover, {
36916      focusOnMount: false,
36917      onClose: onReset,
36918      placement: "top-start",
36919      className: "components-autocomplete__popover",
36920      anchor: popoverAnchor,
36921      ref: popoverRefs
36922    }, (0,external_wp_element_namespaceObject.createElement)(ListBox, null)), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(ListBox, {
36923      Component: visually_hidden_component
36924    }), contentRef.current.ownerDocument.body));
36925  }
36926  return AutocompleterUI;
36927}
36928function useOnClickOutside(ref, handler) {
36929  (0,external_wp_element_namespaceObject.useEffect)(() => {
36930    const listener = event => {
36931      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
36932      if (!ref.current || ref.current.contains(event.target)) {
36933        return;
36934      }
36935      handler(event);
36936    };
36937    document.addEventListener('mousedown', listener);
36938    document.addEventListener('touchstart', listener);
36939    return () => {
36940      document.removeEventListener('mousedown', listener);
36941      document.removeEventListener('touchstart', listener);
36942    };
36943    // Disable reason: `ref` is a ref object and should not be included in a
36944    // hook's dependency list.
36945    // eslint-disable-next-line react-hooks/exhaustive-deps
36946  }, [handler]);
36947}
36948
36949;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/index.js
36950
36951/**
36952 * External dependencies
36953 */
36954
36955
36956/**
36957 * WordPress dependencies
36958 */
36959
36960
36961
36962
36963
36964
36965/**
36966 * Internal dependencies
36967 */
36968
36969
36970const getNodeText = node => {
36971  if (node === null) {
36972    return '';
36973  }
36974  switch (typeof node) {
36975    case 'string':
36976    case 'number':
36977      return node.toString();
36978      break;
36979    case 'boolean':
36980      return '';
36981      break;
36982    case 'object':
36983      {
36984        if (node instanceof Array) {
36985          return node.map(getNodeText).join('');
36986        }
36987        if ('props' in node) {
36988          return getNodeText(node.props.children);
36989        }
36990        break;
36991      }
36992    default:
36993      return '';
36994  }
36995  return '';
36996};
36997const EMPTY_FILTERED_OPTIONS = [];
36998function useAutocomplete({
36999  record,
37000  onChange,
37001  onReplace,
37002  completers,
37003  contentRef
37004}) {
37005  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(useAutocomplete);
37006  const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0);
37007  const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)(EMPTY_FILTERED_OPTIONS);
37008  const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)('');
37009  const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null);
37010  const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null);
37011  const backspacing = (0,external_wp_element_namespaceObject.useRef)(false);
37012  function insertCompletion(replacement) {
37013    if (autocompleter === null) {
37014      return;
37015    }
37016    const end = record.start;
37017    const start = end - autocompleter.triggerPrefix.length - filterValue.length;
37018    const toInsert = (0,external_wp_richText_namespaceObject.create)({
37019      html: (0,external_wp_element_namespaceObject.renderToString)(replacement)
37020    });
37021    onChange((0,external_wp_richText_namespaceObject.insert)(record, toInsert, start, end));
37022  }
37023  function select(option) {
37024    const {
37025      getOptionCompletion
37026    } = autocompleter || {};
37027    if (option.isDisabled) {
37028      return;
37029    }
37030    if (getOptionCompletion) {
37031      const completion = getOptionCompletion(option.value, filterValue);
37032      const isCompletionObject = obj => {
37033        return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined;
37034      };
37035      const completionObject = isCompletionObject(completion) ? completion : {
37036        action: 'insert-at-caret',
37037        value: completion
37038      };
37039      if ('replace' === completionObject.action) {
37040        onReplace([completionObject.value]);
37041        // When replacing, the component will unmount, so don't reset
37042        // state (below) on an unmounted component.
37043        return;
37044      } else if ('insert-at-caret' === completionObject.action) {
37045        insertCompletion(completionObject.value);
37046      }
37047    }
37048
37049    // Reset autocomplete state after insertion rather than before
37050    // so insertion events don't cause the completion menu to redisplay.
37051    reset();
37052  }
37053  function reset() {
37054    setSelectedIndex(0);
37055    setFilteredOptions(EMPTY_FILTERED_OPTIONS);
37056    setFilterValue('');
37057    setAutocompleter(null);
37058    setAutocompleterUI(null);
37059  }
37060
37061  /**
37062   * Load options for an autocompleter.
37063   *
37064   * @param {Array} options
37065   */
37066  function onChangeOptions(options) {
37067    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);
37068    setFilteredOptions(options);
37069  }
37070  function handleKeyDown(event) {
37071    backspacing.current = event.key === 'Backspace';
37072    if (!autocompleter) {
37073      return;
37074    }
37075    if (filteredOptions.length === 0) {
37076      return;
37077    }
37078    if (event.defaultPrevented ||
37079    // Ignore keydowns from IMEs
37080    event.isComposing ||
37081    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
37082    // is `isComposing=false`, even though it's technically still part of the composition.
37083    // These can only be detected by keyCode.
37084    event.keyCode === 229) {
37085      return;
37086    }
37087    switch (event.key) {
37088      case 'ArrowUp':
37089        {
37090          const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;
37091          setSelectedIndex(newIndex);
37092          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
37093          if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
37094            (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
37095          }
37096          break;
37097        }
37098      case 'ArrowDown':
37099        {
37100          const newIndex = (selectedIndex + 1) % filteredOptions.length;
37101          setSelectedIndex(newIndex);
37102          if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
37103            (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
37104          }
37105          break;
37106        }
37107      case 'Escape':
37108        setAutocompleter(null);
37109        setAutocompleterUI(null);
37110        event.preventDefault();
37111        break;
37112      case 'Enter':
37113        select(filteredOptions[selectedIndex]);
37114        break;
37115      case 'ArrowLeft':
37116      case 'ArrowRight':
37117        reset();
37118        return;
37119      default:
37120        return;
37121    }
37122
37123    // Any handled key should prevent original behavior. This relies on
37124    // the early return in the default case.
37125    event.preventDefault();
37126  }
37127
37128  // textContent is a primitive (string), memoizing is not strictly necessary
37129  // but this is a preemptive performance improvement, since the autocompleter
37130  // is a potential bottleneck for the editor type metric.
37131  const textContent = (0,external_wp_element_namespaceObject.useMemo)(() => {
37132    if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) {
37133      return (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0));
37134    }
37135    return '';
37136  }, [record]);
37137  (0,external_wp_element_namespaceObject.useEffect)(() => {
37138    if (!textContent) {
37139      if (autocompleter) reset();
37140      return;
37141    }
37142    const completer = completers?.find(({
37143      triggerPrefix,
37144      allowContext
37145    }) => {
37146      const index = textContent.lastIndexOf(triggerPrefix);
37147      if (index === -1) {
37148        return false;
37149      }
37150      const textWithoutTrigger = textContent.slice(index + triggerPrefix.length);
37151      const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
37152      // This is a final barrier to prevent the effect from completing with
37153      // an extremely long string, which causes the editor to slow-down
37154      // significantly. This could happen, for example, if `matchingWhileBackspacing`
37155      // is true and one of the "words" end up being too long. If that's the case,
37156      // it will be caught by this guard.
37157      if (tooDistantFromTrigger) return false;
37158      const mismatch = filteredOptions.length === 0;
37159      const wordsFromTrigger = textWithoutTrigger.split(/\s/);
37160      // We need to allow the effect to run when not backspacing and if there
37161      // was a mismatch. i.e when typing a trigger + the match string or when
37162      // clicking in an existing trigger word on the page. We do that if we
37163      // detect that we have one word from trigger in the current textual context.
37164      //
37165      // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
37166      // allow the effect to run. It will run until there's a mismatch.
37167      const hasOneTriggerWord = wordsFromTrigger.length === 1;
37168      // This is used to allow the effect to run when backspacing and if
37169      // "touching" a word that "belongs" to a trigger. We consider a "trigger
37170      // word" any word up to the limit of 3 from the trigger character.
37171      // Anything beyond that is ignored if there's a mismatch. This allows
37172      // us to "escape" a mismatch when backspacing, but still imposing some
37173      // sane limits.
37174      //
37175      // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
37176      // if the user presses backspace here, it will show the completion popup again.
37177      const matchingWhileBackspacing = backspacing.current && textWithoutTrigger.split(/\s/).length <= 3;
37178      if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
37179        return false;
37180      }
37181      const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length));
37182      if (allowContext && !allowContext(textContent.slice(0, index), textAfterSelection)) {
37183        return false;
37184      }
37185      if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
37186        return false;
37187      }
37188      return /[\u0000-\uFFFF]*$/.test(textWithoutTrigger);
37189    });
37190    if (!completer) {
37191      if (autocompleter) reset();
37192      return;
37193    }
37194    const safeTrigger = escapeRegExp(completer.triggerPrefix);
37195    const text = remove_accents_default()(textContent);
37196    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\u0000-\uFFFF]*)$`));
37197    const query = match && match[1];
37198    setAutocompleter(completer);
37199    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
37200    setFilterValue(query === null ? '' : query);
37201    // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
37202    // See https://github.com/WordPress/gutenberg/pull/41820
37203    // eslint-disable-next-line react-hooks/exhaustive-deps
37204  }, [textContent]);
37205  const {
37206    key: selectedKey = ''
37207  } = filteredOptions[selectedIndex] || {};
37208  const {
37209    className
37210  } = autocompleter || {};
37211  const isExpanded = !!autocompleter && filteredOptions.length > 0;
37212  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;
37213  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;
37214  const hasSelection = record.start !== undefined;
37215  return {
37216    listBoxId,
37217    activeId,
37218    onKeyDown: handleKeyDown,
37219    popover: hasSelection && AutocompleterUI && (0,external_wp_element_namespaceObject.createElement)(AutocompleterUI, {
37220      className: className,
37221      filterValue: filterValue,
37222      instanceId: instanceId,
37223      listBoxId: listBoxId,
37224      selectedIndex: selectedIndex,
37225      onChangeOptions: onChangeOptions,
37226      onSelect: select,
37227      value: record,
37228      contentRef: contentRef,
37229      reset: reset
37230    })
37231  };
37232}
37233function useLastDifferentValue(value) {
37234  const history = (0,external_wp_element_namespaceObject.useRef)(new Set());
37235  history.current.add(value);
37236
37237  // Keep the history size to 2.
37238  if (history.current.size > 2) {
37239    history.current.delete(Array.from(history.current)[0]);
37240  }
37241  return Array.from(history.current)[0];
37242}
37243function useAutocompleteProps(options) {
37244  const ref = (0,external_wp_element_namespaceObject.useRef)(null);
37245  const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)();
37246  const {
37247    record
37248  } = options;
37249  const previousRecord = useLastDifferentValue(record);
37250  const {
37251    popover,
37252    listBoxId,
37253    activeId,
37254    onKeyDown
37255  } = useAutocomplete({
37256    ...options,
37257    contentRef: ref
37258  });
37259  onKeyDownRef.current = onKeyDown;
37260  const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
37261    function _onKeyDown(event) {
37262      onKeyDownRef.current?.(event);
37263    }
37264    element.addEventListener('keydown', _onKeyDown);
37265    return () => {
37266      element.removeEventListener('keydown', _onKeyDown);
37267    };
37268  }, [])]);
37269
37270  // We only want to show the popover if the user has typed something.
37271  const didUserInput = record.text !== previousRecord?.text;
37272  if (!didUserInput) {
37273    return {
37274      ref: mergedRefs
37275    };
37276  }
37277  return {
37278    ref: mergedRefs,
37279    children: popover,
37280    'aria-autocomplete': listBoxId ? 'list' : undefined,
37281    'aria-owns': listBoxId,
37282    'aria-activedescendant': activeId
37283  };
37284}
37285function Autocomplete({
37286  children,
37287  isSelected,
37288  ...options
37289}) {
37290  const {
37291    popover,
37292    ...props
37293  } = useAutocomplete(options);
37294  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children(props), isSelected && popover);
37295}
37296
37297;// CONCATENATED MODULE: ./packages/components/build-module/base-control/hooks.js
37298/**
37299 * WordPress dependencies
37300 */
37301
37302
37303/**
37304 * Internal dependencies
37305 */
37306
37307/**
37308 * Generate props for the `BaseControl` and the inner control itself.
37309 *
37310 * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.
37311 *
37312 * @param props
37313 */
37314function useBaseControlProps(props) {
37315  const {
37316    help,
37317    id: preferredId,
37318    ...restProps
37319  } = props;
37320  const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId);
37321
37322  // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
37323  const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
37324  return {
37325    baseControlProps: {
37326      id: uniqueId,
37327      help,
37328      ...restProps
37329    },
37330    controlProps: {
37331      id: uniqueId,
37332      ...(!!help ? {
37333        [helpPropName]: `${uniqueId}__help`
37334      } : {})
37335    }
37336  };
37337}
37338
37339;// CONCATENATED MODULE: ./packages/icons/build-module/library/link.js
37340
37341/**
37342 * WordPress dependencies
37343 */
37344
37345const link_link = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37346  xmlns: "http://www.w3.org/2000/svg",
37347  viewBox: "0 0 24 24"
37348}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37349  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"
37350}));
37351/* harmony default export */ const library_link = (link_link);
37352
37353;// CONCATENATED MODULE: ./packages/icons/build-module/library/link-off.js
37354
37355/**
37356 * WordPress dependencies
37357 */
37358
37359const linkOff = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37360  xmlns: "http://www.w3.org/2000/svg",
37361  viewBox: "0 0 24 24"
37362}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37363  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"
37364}));
37365/* harmony default export */ const link_off = (linkOff);
37366
37367;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/styles.js
37368function border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
37369/**
37370 * External dependencies
37371 */
37372
37373
37374/**
37375 * Internal dependencies
37376 */
37377
37378const borderBoxControl = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
37379const linkedBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1;", rtl({
37380  marginRight: '24px'
37381})(), ";" + ( true ? "" : 0),  true ? "" : 0);
37382const wrapper =  true ? {
37383  name: "bjn8wh",
37384  styles: "position:relative"
37385} : 0;
37386const borderBoxControlLinkedButton = size => {
37387  return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '8px' : '3px', ";", rtl({
37388    right: 0
37389  })(), " line-height:0;" + ( true ? "" : 0),  true ? "" : 0);
37390};
37391const borderBoxStyleWithFallback = border => {
37392  const {
37393    color = COLORS.gray[200],
37394    style = 'solid',
37395    width = config_values.borderWidth
37396  } = border || {};
37397  const clampedWidth = width !== config_values.borderWidth ? `clamp(1px, ${width}, 10px)` : width;
37398  const hasVisibleBorder = !!width && width !== '0' || !!color;
37399  const borderStyle = hasVisibleBorder ? style || 'solid' : style;
37400  return `${color} ${borderStyle} ${clampedWidth}`;
37401};
37402const borderBoxControlVisualizer = (borders, size) => {
37403  return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders?.top), ";border-bottom:", borderBoxStyleWithFallback(borders?.bottom), ";", rtl({
37404    borderLeft: borderBoxStyleWithFallback(borders?.left)
37405  })(), " ", rtl({
37406    borderRight: borderBoxStyleWithFallback(borders?.right)
37407  })(), ";" + ( true ? "" : 0),  true ? "" : 0);
37408};
37409const borderBoxControlSplitControls = size =>
37409 /*#__PURE__*/emotion_react_browser_esm_css("position:relative;flex:1;width:", size === '__unstable-large' ? undefined : '80%', ";" + ( true ? "" : 0),  true ? "" : 0);
37410const centeredBorderControl =  true ? {
37411  name: "1nwbfnf",
37412  styles: "grid-column:span 2;margin:0 auto"
37413} : 0;
37414const rightBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css(rtl({
37415  marginLeft: 'auto'
37416})(), ";" + ( true ? "" : 0),  true ? "" : 0);
37417
37418;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-linked-button/hook.js
37419/**
37420 * WordPress dependencies
37421 */
37422
37423
37424/**
37425 * Internal dependencies
37426 */
37427
37428
37429
37430function useBorderBoxControlLinkedButton(props) {
37431  const {
37432    className,
37433    size = 'default',
37434    ...otherProps
37435  } = useContextSystem(props, 'BorderBoxControlLinkedButton');
37436
37437  // Generate class names.
37438  const cx = useCx();
37439  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
37440    return cx(borderBoxControlLinkedButton(size), className);
37441  }, [className, cx, size]);
37442  return {
37443    ...otherProps,
37444    className: classes
37445  };
37446}
37447
37448;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-linked-button/component.js
37449
37450/**
37451 * WordPress dependencies
37452 */
37453
37454
37455
37456/**
37457 * Internal dependencies
37458 */
37459
37460
37461
37462
37463
37464const BorderBoxControlLinkedButton = (props, forwardedRef) => {
37465  const {
37466    className,
37467    isLinked,
37468    ...buttonProps
37469  } = useBorderBoxControlLinkedButton(props);
37470  const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
37471  return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
37472    text: label
37473  }, (0,external_wp_element_namespaceObject.createElement)(component, {
37474    className: className
37475  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
37476    ...buttonProps,
37477    isSmall: true,
37478    icon: isLinked ? library_link : link_off,
37479    iconSize: 24,
37480    "aria-label": label,
37481    ref: forwardedRef
37482  })));
37483};
37484const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
37485/* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton);
37486
37487;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-visualizer/hook.js
37488/**
37489 * WordPress dependencies
37490 */
37491
37492
37493/**
37494 * Internal dependencies
37495 */
37496
37497
37498
37499function useBorderBoxControlVisualizer(props) {
37500  const {
37501    className,
37502    value,
37503    size = 'default',
37504    ...otherProps
37505  } = useContextSystem(props, 'BorderBoxControlVisualizer');
37506
37507  // Generate class names.
37508  const cx = useCx();
37509  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
37510    return cx(borderBoxControlVisualizer(value, size), className);
37511  }, [cx, className, value, size]);
37512  return {
37513    ...otherProps,
37514    className: classes,
37515    value
37516  };
37517}
37518
37519;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-visualizer/component.js
37520
37521/**
37522 * WordPress dependencies
37523 */
37524
37525/**
37526 * Internal dependencies
37527 */
37528
37529
37530
37531const BorderBoxControlVisualizer = (props, forwardedRef) => {
37532  const {
37533    value,
37534    ...otherProps
37535  } = useBorderBoxControlVisualizer(props);
37536  return (0,external_wp_element_namespaceObject.createElement)(component, {
37537    ...otherProps,
37538    ref: forwardedRef
37539  });
37540};
37541const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');
37542/* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer);
37543
37544;// CONCATENATED MODULE: ./packages/icons/build-module/library/close-small.js
37545
37546/**
37547 * WordPress dependencies
37548 */
37549
37550const closeSmall = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37551  xmlns: "http://www.w3.org/2000/svg",
37552  viewBox: "0 0 24 24"
37553}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37554  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"
37555}));
37556/* harmony default export */ const close_small = (closeSmall);
37557
37558;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-solid.js
37559
37560/**
37561 * WordPress dependencies
37562 */
37563
37564const lineSolid = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37565  xmlns: "http://www.w3.org/2000/svg",
37566  viewBox: "0 0 24 24"
37567}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37568  d: "M5 11.25h14v1.5H5z"
37569}));
37570/* harmony default export */ const line_solid = (lineSolid);
37571
37572;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-dashed.js
37573
37574/**
37575 * WordPress dependencies
37576 */
37577
37578const lineDashed = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37579  xmlns: "http://www.w3.org/2000/svg",
37580  viewBox: "0 0 24 24"
37581}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37582  fillRule: "evenodd",
37583  d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z",
37584  clipRule: "evenodd"
37585}));
37586/* harmony default export */ const line_dashed = (lineDashed);
37587
37588;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-dotted.js
37589
37590/**
37591 * WordPress dependencies
37592 */
37593
37594const lineDotted = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
37595  xmlns: "http://www.w3.org/2000/svg",
37596  viewBox: "0 0 24 24"
37597}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
37598  fillRule: "evenodd",
37599  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",
37600  clipRule: "evenodd"
37601}));
37602/* harmony default export */ const line_dotted = (lineDotted);
37603
37604;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/styles/unit-control-styles.js
37605
37606/**
37607 * External dependencies
37608 */
37609
37610/**
37611 * Internal dependencies
37612 */
37613
37614
37615
37616
37617
37618// Using `selectSize` instead of `size` to avoid a type conflict with the
37619// `size` HTML attribute of the `select` element.
37620
37621// TODO: Resolve need to use &&& to increase specificity
37622// https://github.com/WordPress/gutenberg/issues/18483
37623
37624const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
37625  target: "e1bagdl32"
37626} : 0)("&&&{input{display:block;width:100%;}", BackdropUI, "{transition:box-shadow 0.1s linear;}}" + ( true ? "" : 0));
37627const baseUnitLabelStyles = ({
37628  selectSize
37629}) => {
37630  const sizes = {
37631    default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;color:", COLORS.gray[800], ";font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;" + ( true ? "" : 0),  true ? "" : 0),
37632    large: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";color:", COLORS.theme.accent, ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0),  true ? "" : 0)
37633  };
37634  return selectSize === '__unstable-large' ? sizes.large : sizes.default;
37635};
37636const UnitLabel = emotion_styled_base_browser_esm("div",  true ? {
37637  target: "e1bagdl31"
37638} : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0));
37639const unitSelectSizes = ({
37640  selectSize = 'default'
37641}) => {
37642  const sizes = {
37643    default: /*#__PURE__*/emotion_react_browser_esm_css("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", rtl({
37644      borderTopLeftRadius: 0,
37645      borderBottomLeftRadius: 0
37646    })(), " &:not(:disabled):hover{background-color:", COLORS.gray[100], ";}&:focus{border:1px solid ", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline-offset:0;outline:2px solid transparent;z-index:1;}" + ( true ? "" : 0),  true ? "" : 0),
37647    large: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:hover{color:", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0),  true ? "" : 0)
37648  };
37649  return selectSize === '__unstable-large' ? sizes.large : sizes.default;
37650};
37651const UnitSelect = emotion_styled_base_browser_esm("select",  true ? {
37652  target: "e1bagdl30"
37653} : 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));
37654
37655;// CONCATENATED MODULE: ./packages/components/build-module/border-control/styles.js
37656function border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
37657/**
37658 * External dependencies
37659 */
37660
37661
37662/**
37663 * Internal dependencies
37664 */
37665
37666
37667
37668
37669const styles_labelStyles =  true ? {
37670  name: "f3vz0n",
37671  styles: "font-weight:500"
37672} : 0;
37673const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0),  true ? "" : 0);
37674const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0),  true ? "" : 0);
37675const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0),  true ? "" : 0);
37676
37677/*
37678 * This style is only applied to the UnitControl wrapper when the border width
37679 * field should be a set width. Omitting this allows the UnitControl &
37680 * RangeControl to share the available width in a 40/60 split respectively.
37681 */
37682const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0),  true ? "" : 0);
37683const wrapperHeight = size => {
37684  return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0),  true ? "" : 0);
37685};
37686const borderControlDropdown = size => /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{height:", size === '__unstable-large' ? '40px' : '30px', ";width:", size === '__unstable-large' ? '40px' : '30px', ";padding:0;display:flex;align-items:center;justify-content:center;", rtl({
37687  borderRadius: `2px 0 0 2px`
37688}, {
37689  borderRadius: `0 2px 2px 0`
37690})(), " border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";&:focus,&:hover:not( :disabled ){", focusBoxShadow, " border-color:", COLORS.ui.borderFocus, ";z-index:1;position:relative;}}" + ( true ? "" : 0),  true ? "" : 0);
37691const colorIndicatorBorder = border => {
37692  const {
37693    color,
37694    style
37695  } = border || {};
37696  const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined;
37697  return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0),  true ? "" : 0);
37698};
37699const colorIndicatorWrapper = (border, size) => {
37700  const {
37701    style
37702  } = border || {};
37703  return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0),  true ? "" : 0);
37704};
37705
37706// Must equal $color-palette-circle-size from:
37707// @wordpress/components/src/circular-option-picker/style.scss
37708const swatchSize = 28;
37709const swatchGap = 12;
37710const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;", styles_labelStyles, ";}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0),  true ? "" : 0);
37711const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
37712const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
37713const resetButton = /*#__PURE__*/emotion_react_browser_esm_css("justify-content:center;width:100%;&&{border-top:", config_values.borderWidth, " solid ", COLORS.gray[400], ";border-top-left-radius:0;border-top-right-radius:0;height:40px;}" + ( true ? "" : 0),  true ? "" : 0);
37714const borderControlStylePicker = /*#__PURE__*/emotion_react_browser_esm_css(StyledLabel, "{", styles_labelStyles, ";}" + ( true ? "" : 0),  true ? "" : 0);
37715const borderStyleButton =  true ? {
37716  name: "ed6beh",
37717  styles: "&&&&&{min-width:32px;width:32px;height:32px;padding:4px;}"
37718} : 0;
37719const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({
37720  marginRight: space(3)
37721})(), ";" + ( true ? "" : 0),  true ? "" : 0);
37722
37723;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-style-picker/hook.js
37724/**
37725 * WordPress dependencies
37726 */
37727
37728
37729/**
37730 * Internal dependencies
37731 */
37732
37733
37734
37735function useBorderControlStylePicker(props) {
37736  const {
37737    className,
37738    ...otherProps
37739  } = useContextSystem(props, 'BorderControlStylePicker');
37740
37741  // Generate class names.
37742  const cx = useCx();
37743  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
37744    return cx(borderControlStylePicker, className);
37745  }, [className, cx]);
37746  const buttonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
37747    return cx(borderStyleButton);
37748  }, [cx]);
37749  return {
37750    ...otherProps,
37751    className: classes,
37752    buttonClassName
37753  };
37754}
37755
37756;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-style-picker/component.js
37757
37758/**
37759 * WordPress dependencies
37760 */
37761
37762
37763
37764/**
37765 * Internal dependencies
37766 */
37767
37768
37769
37770
37771
37772
37773
37774const BORDER_STYLES = [{
37775  label: (0,external_wp_i18n_namespaceObject.__)('Solid'),
37776  icon: line_solid,
37777  value: 'solid'
37778}, {
37779  label: (0,external_wp_i18n_namespaceObject.__)('Dashed'),
37780  icon: line_dashed,
37781  value: 'dashed'
37782}, {
37783  label: (0,external_wp_i18n_namespaceObject.__)('Dotted'),
37784  icon: line_dotted,
37785  value: 'dotted'
37786}];
37787const component_Label = props => {
37788  const {
37789    label,
37790    hideLabelFromVision
37791  } = props;
37792  if (!label) {
37793    return null;
37794  }
37795  return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
37796    as: "label"
37797  }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label);
37798};
37799const BorderControlStylePicker = (props, forwardedRef) => {
37800  const {
37801    buttonClassName,
37802    hideLabelFromVision,
37803    label,
37804    onChange,
37805    value,
37806    ...otherProps
37807  } = useBorderControlStylePicker(props);
37808  return (0,external_wp_element_namespaceObject.createElement)(component, {
37809    ...otherProps,
37810    ref: forwardedRef
37811  }, (0,external_wp_element_namespaceObject.createElement)(component_Label, {
37812    label: label,
37813    hideLabelFromVision: hideLabelFromVision
37814  }), (0,external_wp_element_namespaceObject.createElement)(flex_component, {
37815    justify: "flex-start",
37816    gap: 1
37817  }, BORDER_STYLES.map(borderStyle => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
37818    key: borderStyle.value,
37819    className: buttonClassName,
37820    icon: borderStyle.icon,
37821    isSmall: true,
37822    isPressed: borderStyle.value === value,
37823    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
37824    "aria-label": borderStyle.label,
37825    label: borderStyle.label,
37826    showTooltip: true
37827  }))));
37828};
37829const ConnectedBorderControlStylePicker = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker');
37830/* harmony default export */ const border_control_style_picker_component = (ConnectedBorderControlStylePicker);
37831
37832;// CONCATENATED MODULE: ./packages/components/build-module/color-indicator/index.js
37833
37834/**
37835 * External dependencies
37836 */
37837
37838/**
37839 * WordPress dependencies
37840 */
37841
37842
37843/**
37844 * Internal dependencies
37845 */
37846
37847function UnforwardedColorIndicator(props, forwardedRef) {
37848  const {
37849    className,
37850    colorValue,
37851    ...additionalProps
37852  } = props;
37853  return (0,external_wp_element_namespaceObject.createElement)("span", {
37854    className: classnames_default()('component-color-indicator', className),
37855    style: {
37856      background: colorValue
37857    },
37858    ref: forwardedRef,
37859    ...additionalProps
37860  });
37861}
37862
37863/**
37864 * ColorIndicator is a React component that renders a specific color in a
37865 * circle. It's often used to summarize a collection of used colors in a child
37866 * component.
37867 *
37868 * ```jsx
37869 * import { ColorIndicator } from '@wordpress/components';
37870 *
37871 * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
37872 * ```
37873 */
37874const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator);
37875/* harmony default export */ const color_indicator = (ColorIndicator);
37876
37877;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs
37878var 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}}
37879
37880;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-controlled-value.js
37881/**
37882 * WordPress dependencies
37883 */
37884
37885/**
37886 * Simplified and improved implementation of useControlledState.
37887 *
37888 * @param props
37889 * @param props.defaultValue
37890 * @param props.value
37891 * @param props.onChange
37892 * @return The controlled value and the value setter.
37893 */
37894function useControlledValue({
37895  defaultValue,
37896  onChange,
37897  value: valueProp
37898}) {
37899  const hasValue = typeof valueProp !== 'undefined';
37900  const initialValue = hasValue ? valueProp : defaultValue;
37901  const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue);
37902  const value = hasValue ? valueProp : state;
37903  let setValue;
37904  if (hasValue && typeof onChange === 'function') {
37905    setValue = onChange;
37906  } else if (!hasValue && typeof onChange === 'function') {
37907    setValue = nextValue => {
37908      onChange(nextValue);
37909      setState(nextValue);
37910    };
37911  } else {
37912    setValue = setState;
37913  }
37914  return [value, setValue];
37915}
37916
37917;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/index.js
37918
37919/**
37920 * External dependencies
37921 */
37922
37923/**
37924 * WordPress dependencies
37925 */
37926
37927
37928
37929
37930/**
37931 * Internal dependencies
37932 */
37933
37934
37935
37936const UnconnectedDropdown = (props, forwardedRef) => {
37937  const {
37938    renderContent,
37939    renderToggle,
37940    className,
37941    contentClassName,
37942    expandOnMobile,
37943    headerTitle,
37944    focusOnMount,
37945    popoverProps,
37946    onClose,
37947    onToggle,
37948    style,
37949    open,
37950    defaultOpen,
37951    // Deprecated props
37952    position,
37953    // From context system
37954    variant
37955  } = useContextSystem(props, 'Dropdown');
37956  if (position !== undefined) {
37957    external_wp_deprecated_default()('`position` prop in wp.components.Dropdown', {
37958      since: '6.2',
37959      alternative: '`popoverProps.placement` prop',
37960      hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'
37961    });
37962  }
37963
37964  // Use internal state instead of a ref to make sure that the component
37965  // re-renders when the popover's anchor updates.
37966  const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
37967  const containerRef = (0,external_wp_element_namespaceObject.useRef)();
37968  const [isOpen, setIsOpen] = useControlledValue({
37969    defaultValue: defaultOpen,
37970    value: open,
37971    onChange: onToggle
37972  });
37973
37974  /**
37975   * Closes the popover when focus leaves it unless the toggle was pressed or
37976   * focus has moved to a separate dialog. The former is to let the toggle
37977   * handle closing the popover and the latter is to preserve presence in
37978   * case a dialog has opened, allowing focus to return when it's dismissed.
37979   */
37980  function closeIfFocusOutside() {
37981    if (!containerRef.current) {
37982      return;
37983    }
37984    const {
37985      ownerDocument
37986    } = containerRef.current;
37987    const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]');
37988    if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {
37989      close();
37990    }
37991  }
37992  function close() {
37993    onClose?.();
37994    setIsOpen(false);
37995  }
37996  const args = {
37997    isOpen: !!isOpen,
37998    onToggle: () => setIsOpen(!isOpen),
37999    onClose: close
38000  };
38001  const popoverPropsHaveAnchor = !!popoverProps?.anchor ||
38002  // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
38003  // be removed from `Popover` from WordPress 6.3
38004  !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;
38005  return (0,external_wp_element_namespaceObject.createElement)("div", {
38006    className: className,
38007    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor])
38008    // Some UAs focus the closest focusable parent when the toggle is
38009    // clicked. Making this div focusable ensures such UAs will focus
38010    // it and `closeIfFocusOutside` can tell if the toggle was clicked.
38011    ,
38012    tabIndex: -1,
38013    style: style
38014  }, renderToggle(args), isOpen && (0,external_wp_element_namespaceObject.createElement)(popover, {
38015    position: position,
38016    onClose: close,
38017    onFocusOutside: closeIfFocusOutside,
38018    expandOnMobile: expandOnMobile,
38019    headerTitle: headerTitle,
38020    focusOnMount: focusOnMount
38021    // This value is used to ensure that the dropdowns
38022    // align with the editor header by default.
38023    ,
38024    offset: 13,
38025    anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,
38026    variant: variant,
38027    ...popoverProps,
38028    className: classnames_default()('components-dropdown__content', popoverProps?.className, contentClassName)
38029  }, renderContent(args)));
38030};
38031
38032/**
38033 * Renders a button that opens a floating content modal when clicked.
38034 *
38035 * ```jsx
38036 * import { Button, Dropdown } from '@wordpress/components';
38037 *
38038 * const MyDropdown = () => (
38039 *   <Dropdown
38040 *     className="my-container-class-name"
38041 *     contentClassName="my-dropdown-content-classname"
38042 *     popoverProps={ { placement: 'bottom-start' } }
38043 *     renderToggle={ ( { isOpen, onToggle } ) => (
38044 *       <Button
38045 *         variant="primary"
38046 *         onClick={ onToggle }
38047 *         aria-expanded={ isOpen }
38048 *       >
38049 *         Toggle Dropdown!
38050 *       </Button>
38051 *     ) }
38052 *     renderContent={ () => <div>This is the content of the dropdown.</div> }
38053 *   />
38054 * );
38055 * ```
38056 */
38057const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown');
38058/* harmony default export */ const dropdown = (Dropdown);
38059
38060;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-suffix-wrapper.js
38061
38062/**
38063 * External dependencies
38064 */
38065
38066/**
38067 * Internal dependencies
38068 */
38069
38070
38071function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
38072  const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper');
38073  return (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
38074    marginBottom: 0,
38075    ...derivedProps,
38076    ref: forwardedRef
38077  });
38078}
38079
38080/**
38081 * A convenience wrapper for the `suffix` when you want to apply
38082 * standard padding in accordance with the size variant.
38083 *
38084 * ```jsx
38085 * import {
38086 *   __experimentalInputControl as InputControl,
38087 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
38088 * } from '@wordpress/components';
38089 *
38090 * <InputControl
38091 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
38092 * />
38093 * ```
38094 */
38095const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
38096/* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper);
38097
38098;// CONCATENATED MODULE: ./packages/components/build-module/select-control/styles/select-control-styles.js
38099
38100/**
38101 * External dependencies
38102 */
38103
38104/**
38105 * Internal dependencies
38106 */
38107
38108
38109
38110const select_control_styles_disabledStyles = ({
38111  disabled
38112}) => {
38113  if (!disabled) return '';
38114  return /*#__PURE__*/emotion_react_browser_esm_css({
38115    color: COLORS.ui.textDisabled
38116  },  true ? "" : 0,  true ? "" : 0);
38117};
38118const select_control_styles_fontSizeStyles = ({
38119  selectSize = 'default'
38120}) => {
38121  const sizes = {
38122    default: '13px',
38123    small: '11px',
38124    '__unstable-large': '13px'
38125  };
38126  const fontSize = sizes[selectSize];
38127  const fontSizeMobile = '16px';
38128  if (!fontSize) return '';
38129  return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0),  true ? "" : 0);
38130};
38131const select_control_styles_sizeStyles = ({
38132  __next36pxDefaultSize,
38133  multiple,
38134  selectSize = 'default'
38135}) => {
38136  if (multiple) {
38137    // When `multiple`, just use the native browser styles
38138    // without setting explicit height.
38139    return;
38140  }
38141  const sizes = {
38142    default: {
38143      height: 36,
38144      minHeight: 36,
38145      paddingTop: 0,
38146      paddingBottom: 0
38147    },
38148    small: {
38149      height: 24,
38150      minHeight: 24,
38151      paddingTop: 0,
38152      paddingBottom: 0
38153    },
38154    '__unstable-large': {
38155      height: 40,
38156      minHeight: 40,
38157      paddingTop: 0,
38158      paddingBottom: 0
38159    }
38160  };
38161  if (!__next36pxDefaultSize) {
38162    sizes.default = {
38163      height: 30,
38164      minHeight: 30,
38165      paddingTop: 0,
38166      paddingBottom: 0
38167    };
38168  }
38169  const style = sizes[selectSize] || sizes.default;
38170  return /*#__PURE__*/emotion_react_browser_esm_css(style,  true ? "" : 0,  true ? "" : 0);
38171};
38172const chevronIconSize = 18;
38173const sizePaddings = ({
38174  __next36pxDefaultSize,
38175  multiple,
38176  selectSize = 'default'
38177}) => {
38178  const padding = {
38179    default: 16,
38180    small: 8,
38181    '__unstable-large': 16
38182  };
38183  if (!__next36pxDefaultSize) {
38184    padding.default = 8;
38185  }
38186  const selectedPadding = padding[selectSize] || padding.default;
38187  return rtl({
38188    paddingLeft: selectedPadding,
38189    paddingRight: selectedPadding + chevronIconSize,
38190    ...(multiple ? {
38191      paddingTop: selectedPadding,
38192      paddingBottom: selectedPadding
38193    } : {})
38194  });
38195};
38196const overflowStyles = ({
38197  multiple
38198}) => {
38199  return {
38200    overflow: multiple ? 'auto' : 'hidden'
38201  };
38202};
38203
38204// TODO: Resolve need to use &&& to increase specificity
38205// https://github.com/WordPress/gutenberg/issues/18483
38206
38207const Select = emotion_styled_base_browser_esm("select",  true ? {
38208  target: "e1mv6sxx2"
38209} : 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, ";", select_control_styles_fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0));
38210const DownArrowWrapper = emotion_styled_base_browser_esm("div",  true ? {
38211  target: "e1mv6sxx1"
38212} : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0));
38213const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper,  true ? {
38214  target: "e1mv6sxx0"
38215} : 0)("position:absolute;pointer-events:none;", rtl({
38216  right: 0
38217}), ";" + ( true ? "" : 0));
38218
38219;// CONCATENATED MODULE: ./packages/icons/build-module/icon/index.js
38220/**
38221 * WordPress dependencies
38222 */
38223
38224
38225/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
38226
38227/**
38228 * Return an SVG icon.
38229 *
38230 * @param {IconProps}                                 props icon is the SVG component to render
38231 *                                                          size is a number specifiying the icon size in pixels
38232 *                                                          Other props will be passed to wrapped SVG component
38233 * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
38234 *
38235 * @return {JSX.Element}  Icon component
38236 */
38237function icon_Icon({
38238  icon,
38239  size = 24,
38240  ...props
38241}, ref) {
38242  return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
38243    width: size,
38244    height: size,
38245    ...props,
38246    ref
38247  });
38248}
38249/* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon));
38250
38251;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-down.js
38252
38253/**
38254 * WordPress dependencies
38255 */
38256
38257const chevronDown = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
38258  viewBox: "0 0 24 24",
38259  xmlns: "http://www.w3.org/2000/svg"
38260}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
38261  d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
38262}));
38263/* harmony default export */ const chevron_down = (chevronDown);
38264
38265;// CONCATENATED MODULE: ./packages/components/build-module/select-control/chevron-down.js
38266
38267/**
38268 * WordPress dependencies
38269 */
38270
38271
38272/**
38273 * Internal dependencies
38274 */
38275
38276const SelectControlChevronDown = () => {
38277  return (0,external_wp_element_namespaceObject.createElement)(InputControlSuffixWrapperWithClickThrough, null, (0,external_wp_element_namespaceObject.createElement)(DownArrowWrapper, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
38278    icon: chevron_down,
38279    size: chevronIconSize
38280  })));
38281};
38282/* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown);
38283
38284;// CONCATENATED MODULE: ./packages/components/build-module/select-control/index.js
38285
38286/**
38287 * External dependencies
38288 */
38289
38290
38291/**
38292 * WordPress dependencies
38293 */
38294
38295
38296
38297/**
38298 * Internal dependencies
38299 */
38300
38301
38302
38303
38304const select_control_noop = () => {};
38305function select_control_useUniqueId(idProp) {
38306  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl);
38307  const id = `inspector-select-control-${instanceId}`;
38308  return idProp || id;
38309}
38310function UnforwardedSelectControl(props, ref) {
38311  const {
38312    className,
38313    disabled = false,
38314    help,
38315    hideLabelFromVision,
38316    id: idProp,
38317    label,
38318    multiple = false,
38319    onBlur = select_control_noop,
38320    onChange,
38321    onFocus = select_control_noop,
38322    options = [],
38323    size = 'default',
38324    value: valueProp,
38325    labelPosition = 'top',
38326    children,
38327    prefix,
38328    suffix,
38329    __next36pxDefaultSize = false,
38330    __nextHasNoMarginBottom = false,
38331    ...restProps
38332  } = props;
38333  const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
38334  const id = select_control_useUniqueId(idProp);
38335  const helpId = help ? `${id}__help` : undefined;
38336
38337  // Disable reason: A select with an onchange throws a warning.
38338  if (!options?.length && !children) return null;
38339  const handleOnBlur = event => {
38340    onBlur(event);
38341    setIsFocused(false);
38342  };
38343  const handleOnFocus = event => {
38344    onFocus(event);
38345    setIsFocused(true);
38346  };
38347  const handleOnChange = event => {
38348    if (props.multiple) {
38349      const selectedOptions = Array.from(event.target.options).filter(({
38350        selected
38351      }) => selected);
38352      const newValues = selectedOptions.map(({
38353        value
38354      }) => value);
38355      props.onChange?.(newValues, {
38356        event
38357      });
38358      return;
38359    }
38360    props.onChange?.(event.target.value, {
38361      event
38362    });
38363  };
38364  const classes = classnames_default()('components-select-control', className);
38365  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
38366    help: help,
38367    id: id,
38368    __nextHasNoMarginBottom: __nextHasNoMarginBottom
38369  }, (0,external_wp_element_namespaceObject.createElement)(input_base, {
38370    className: classes,
38371    disabled: disabled,
38372    hideLabelFromVision: hideLabelFromVision,
38373    id: id,
38374    isFocused: isFocused,
38375    label: label,
38376    size: size,
38377    suffix: suffix || !multiple && (0,external_wp_element_namespaceObject.createElement)(select_control_chevron_down, null),
38378    prefix: prefix,
38379    labelPosition: labelPosition,
38380    __next36pxDefaultSize: __next36pxDefaultSize
38381  }, (0,external_wp_element_namespaceObject.createElement)(Select, {
38382    ...restProps,
38383    __next36pxDefaultSize: __next36pxDefaultSize,
38384    "aria-describedby": helpId,
38385    className: "components-select-control__input",
38386    disabled: disabled,
38387    id: id,
38388    multiple: multiple,
38389    onBlur: handleOnBlur,
38390    onChange: handleOnChange,
38391    onFocus: handleOnFocus,
38392    ref: ref,
38393    selectSize: size,
38394    value: valueProp
38395  }, children || options.map((option, index) => {
38396    const key = option.id || `${option.label}-${option.value}-${index}`;
38397    return (0,external_wp_element_namespaceObject.createElement)("option", {
38398      key: key,
38399      value: option.value,
38400      disabled: option.disabled,
38401      hidden: option.hidden
38402    }, option.label);
38403  }))));
38404}
38405
38406/**
38407 * `SelectControl` allows users to select from a single or multiple option menu.
38408 * It functions as a wrapper around the browser's native `<select>` element.
38409 *
38410 * ```jsx
38411 * import { SelectControl } from '@wordpress/components';
38412 * import { useState } from '@wordpress/element';
38413 *
38414 * const MySelectControl = () => {
38415 *   const [ size, setSize ] = useState( '50%' );
38416 *
38417 *   return (
38418 *     <SelectControl
38419 *       label="Size"
38420 *       value={ size }
38421 *       options={ [
38422 *         { label: 'Big', value: '100%' },
38423 *         { label: 'Medium', value: '50%' },
38424 *         { label: 'Small', value: '25%' },
38425 *       ] }
38426 *       onChange={ setSize }
38427 *     />
38428 *   );
38429 * };
38430 * ```
38431 */
38432const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl);
38433/* harmony default export */ const select_control = (SelectControl);
38434
38435;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-controlled-state.js
38436/**
38437 * WordPress dependencies
38438 */
38439
38440
38441/**
38442 * Internal dependencies
38443 */
38444
38445
38446/**
38447 * @template T
38448 * @typedef Options
38449 * @property {T}      [initial] Initial value
38450 * @property {T | ""} fallback  Fallback value
38451 */
38452
38453/** @type {Readonly<{ initial: undefined, fallback: '' }>
38453} */
38454const defaultOptions = {
38455  initial: undefined,
38456  /**
38457   * Defaults to empty string, as that is preferred for usage with
38458   * <input />, <textarea />, and <select /> form elements.
38459   */
38460  fallback: ''
38461};
38462
38463/**
38464 * Custom hooks for "controlled" components to track and consolidate internal
38465 * state and incoming values. This is useful for components that render
38466 * `input`, `textarea`, or `select` HTML elements.
38467 *
38468 * https://reactjs.org/docs/forms.html#controlled-components
38469 *
38470 * At first, a component using useControlledState receives an initial prop
38471 * value, which is used as initial internal state.
38472 *
38473 * This internal state can be maintained and updated without
38474 * relying on new incoming prop values.
38475 *
38476 * Unlike the basic useState hook, useControlledState's state can
38477 * be updated if a new incoming prop value is changed.
38478 *
38479 * @template T
38480 *
38481 * @param {T | undefined} currentState             The current value.
38482 * @param {Options<T>}    [options=defaultOptions] Additional options for the hook.
38483 *
38484 * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
38485 */
38486function use_controlled_state_useControlledState(currentState, options = defaultOptions) {
38487  const {
38488    initial,
38489    fallback
38490  } = {
38491    ...defaultOptions,
38492    ...options
38493  };
38494  const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState);
38495  const hasCurrentState = isValueDefined(currentState);
38496
38497  /*
38498   * Resets internal state if value every changes from uncontrolled <-> controlled.
38499   */
38500  (0,external_wp_element_namespaceObject.useEffect)(() => {
38501    if (hasCurrentState && internalState) {
38502      setInternalState(undefined);
38503    }
38504  }, [hasCurrentState, internalState]);
38505  const state = getDefinedValue([currentState, internalState, initial], fallback);
38506
38507  /* eslint-disable jsdoc/no-undefined-types */
38508  /** @type {(nextState: T) => void} */
38509  const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => {
38510    if (!hasCurrentState) {
38511      setInternalState(nextState);
38512    }
38513  }, [hasCurrentState]);
38514  /* eslint-enable jsdoc/no-undefined-types */
38515
38516  return [state, setState];
38517}
38518/* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState);
38519
38520;// CONCATENATED MODULE: ./packages/components/build-module/range-control/utils.js
38521/**
38522 * WordPress dependencies
38523 */
38524
38525
38526/**
38527 * Internal dependencies
38528 */
38529
38530
38531/**
38532 * A float supported clamp function for a specific value.
38533 *
38534 * @param value The value to clamp.
38535 * @param min   The minimum value.
38536 * @param max   The maximum value.
38537 *
38538 * @return A (float) number
38539 */
38540function floatClamp(value, min, max) {
38541  if (typeof value !== 'number') {
38542    return null;
38543  }
38544  return parseFloat(`${math_clamp(value, min, max)}`);
38545}
38546
38547/**
38548 * Hook to store a clamped value, derived from props.
38549 *
38550 * @param settings
38551 * @return The controlled value and the value setter.
38552 */
38553function useControlledRangeValue(settings) {
38554  const {
38555    min,
38556    max,
38557    value: valueProp,
38558    initial
38559  } = settings;
38560  const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), {
38561    initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),
38562    fallback: null
38563  });
38564  const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
38565    if (nextValue === null) {
38566      setInternalState(null);
38567    } else {
38568      setInternalState(floatClamp(nextValue, min, max));
38569    }
38570  }, [min, max, setInternalState]);
38571
38572  // `state` can't be an empty string because we specified a fallback value of
38573  // `null` in `useControlledState`
38574  return [state, setState];
38575}
38576
38577;// CONCATENATED MODULE: ./packages/components/build-module/range-control/styles/range-control-styles.js
38578
38579function range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
38580/**
38581 * External dependencies
38582 */
38583
38584/**
38585 * Internal dependencies
38586 */
38587
38588
38589
38590const rangeHeightValue = 30;
38591const railHeight = 4;
38592const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({
38593  height: rangeHeightValue,
38594  minHeight: rangeHeightValue
38595},  true ? "" : 0,  true ? "" : 0);
38596const thumbSize = 12;
38597const deprecatedHeight = ({
38598  __next40pxDefaultSize
38599}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({
38600  minHeight: rangeHeightValue
38601},  true ? "" : 0,  true ? "" : 0);
38602const range_control_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
38603  target: "e1epgpqk14"
38604} : 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));
38605const wrapperColor = ({
38606  color = COLORS.ui.borderFocus
38607}) => /*#__PURE__*/emotion_react_browser_esm_css({
38608  color
38609},  true ? "" : 0,  true ? "" : 0);
38610const wrapperMargin = ({
38611  marks,
38612  __nextHasNoMarginBottom
38613}) => {
38614  if (!__nextHasNoMarginBottom) {
38615    return /*#__PURE__*/emotion_react_browser_esm_css({
38616      marginBottom: marks ? 16 : undefined
38617    },  true ? "" : 0,  true ? "" : 0);
38618  }
38619  return '';
38620};
38621const range_control_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
38622  target: "e1epgpqk13"
38623} : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0));
38624const BeforeIconWrapper = emotion_styled_base_browser_esm("span",  true ? {
38625  target: "e1epgpqk12"
38626} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({
38627  marginRight: 6
38628}), ";" + ( true ? "" : 0));
38629const AfterIconWrapper = emotion_styled_base_browser_esm("span",  true ? {
38630  target: "e1epgpqk11"
38631} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({
38632  marginLeft: 6
38633}), ";" + ( true ? "" : 0));
38634const railBackgroundColor = ({
38635  disabled,
38636  railColor
38637}) => {
38638  let background = railColor || '';
38639  if (disabled) {
38640    background = COLORS.ui.backgroundDisabled;
38641  }
38642  return /*#__PURE__*/emotion_react_browser_esm_css({
38643    background
38644  },  true ? "" : 0,  true ? "" : 0);
38645};
38646const Rail = emotion_styled_base_browser_esm("span",  true ? {
38647  target: "e1epgpqk10"
38648} : 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));
38649const trackBackgroundColor = ({
38650  disabled,
38651  trackColor
38652}) => {
38653  let background = trackColor || 'currentColor';
38654  if (disabled) {
38655    background = COLORS.gray[400];
38656  }
38657  return /*#__PURE__*/emotion_react_browser_esm_css({
38658    background
38659  },  true ? "" : 0,  true ? "" : 0);
38660};
38661const Track = emotion_styled_base_browser_esm("span",  true ? {
38662  target: "e1epgpqk9"
38663} : 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));
38664const MarksWrapper = emotion_styled_base_browser_esm("span",  true ? {
38665  target: "e1epgpqk8"
38666} : 0)( true ? {
38667  name: "l7tjj5",
38668  styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none"
38669} : 0);
38670const markFill = ({
38671  disabled,
38672  isFilled
38673}) => {
38674  let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[300];
38675  if (disabled) {
38676    backgroundColor = COLORS.gray[400];
38677  }
38678  return /*#__PURE__*/emotion_react_browser_esm_css({
38679    backgroundColor
38680  },  true ? "" : 0,  true ? "" : 0);
38681};
38682const Mark = emotion_styled_base_browser_esm("span",  true ? {
38683  target: "e1epgpqk7"
38684} : 0)("height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0));
38685const markLabelFill = ({
38686  isFilled
38687}) => {
38688  return /*#__PURE__*/emotion_react_browser_esm_css({
38689    color: isFilled ? COLORS.gray[700] : COLORS.gray[300]
38690  },  true ? "" : 0,  true ? "" : 0);
38691};
38692const MarkLabel = emotion_styled_base_browser_esm("span",  true ? {
38693  target: "e1epgpqk6"
38694} : 0)("color:", COLORS.gray[300], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0));
38695const thumbColor = ({
38696  disabled
38697}) => 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);
38698const ThumbWrapper = emotion_styled_base_browser_esm("span",  true ? {
38699  target: "e1epgpqk5"
38700} : 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({
38701  marginLeft: -10
38702}), ";", rtl({
38703  transform: 'translateX( 4.5px )'
38704}, {
38705  transform: 'translateX( -4.5px )'
38706}), ";" + ( true ? "" : 0));
38707const thumbFocus = ({
38708  isFocused
38709}) => {
38710  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) : '';
38711};
38712const Thumb = emotion_styled_base_browser_esm("span",  true ? {
38713  target: "e1epgpqk4"
38714} : 0)("align-items:center;border-radius:50%;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0));
38715const InputRange = emotion_styled_base_browser_esm("input",  true ? {
38716  target: "e1epgpqk3"
38717} : 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));
38718const tooltipShow = ({
38719  show
38720}) => {
38721  return /*#__PURE__*/emotion_react_browser_esm_css({
38722    opacity: show ? 1 : 0
38723  },  true ? "" : 0,  true ? "" : 0);
38724};
38725var range_control_styles_ref =  true ? {
38726  name: "1cypxip",
38727  styles: "top:-80%"
38728} : 0;
38729var range_control_styles_ref2 =  true ? {
38730  name: "1lr98c4",
38731  styles: "bottom:-80%"
38732} : 0;
38733const tooltipPosition = ({
38734  position
38735}) => {
38736  const isBottom = position === 'bottom';
38737  if (isBottom) {
38738    return range_control_styles_ref2;
38739  }
38740  return range_control_styles_ref;
38741};
38742const range_control_styles_Tooltip = emotion_styled_base_browser_esm("span",  true ? {
38743  target: "e1epgpqk2"
38744} : 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({
38745  transform: 'translateX(-50%)'
38746}, {
38747  transform: 'translateX(50%)'
38748}), ";" + ( true ? "" : 0));
38749
38750// @todo: Refactor RangeControl with latest HStack configuration
38751// @wordpress/components/ui/hstack.
38752const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
38753  target: "e1epgpqk1"
38754} : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({
38755  marginLeft: `${space(4)} !important`
38756}), ";" + ( true ? "" : 0));
38757const ActionRightWrapper = emotion_styled_base_browser_esm("span",  true ? {
38758  target: "e1epgpqk0"
38759} : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({
38760  marginLeft: 8
38761}), ";" + ( true ? "" : 0));
38762
38763;// CONCATENATED MODULE: ./packages/components/build-module/range-control/input-range.js
38764
38765/**
38766 * WordPress dependencies
38767 */
38768
38769
38770/**
38771 * Internal dependencies
38772 */
38773
38774function input_range_InputRange(props, ref) {
38775  const {
38776    describedBy,
38777    label,
38778    value,
38779    ...otherProps
38780  } = props;
38781  return (0,external_wp_element_namespaceObject.createElement)(InputRange, {
38782    ...otherProps,
38783    "aria-describedby": describedBy,
38784    "aria-label": label,
38785    "aria-hidden": false,
38786    ref: ref,
38787    tabIndex: 0,
38788    type: "range",
38789    value: value
38790  });
38791}
38792const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange);
38793/* harmony default export */ const input_range = (input_range_ForwardedComponent);
38794
38795;// CONCATENATED MODULE: ./packages/components/build-module/range-control/mark.js
38796
38797/**
38798 * External dependencies
38799 */
38800
38801
38802/**
38803 * Internal dependencies
38804 */
38805
38806function RangeMark(props) {
38807  const {
38808    className,
38809    isFilled = false,
38810    label,
38811    style = {},
38812    ...otherProps
38813  } = props;
38814  const classes = classnames_default()('components-range-control__mark', isFilled && 'is-filled', className);
38815  const labelClasses = classnames_default()('components-range-control__mark-label', isFilled && 'is-filled');
38816  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Mark, {
38817    ...otherProps,
38818    "aria-hidden": "true",
38819    className: classes,
38820    isFilled: isFilled,
38821    style: style
38822  }), label && (0,external_wp_element_namespaceObject.createElement)(MarkLabel, {
38823    "aria-hidden": "true",
38824    className: labelClasses,
38825    isFilled: isFilled,
38826    style: style
38827  }, label));
38828}
38829
38830;// CONCATENATED MODULE: ./packages/components/build-module/range-control/rail.js
38831
38832/**
38833 * WordPress dependencies
38834 */
38835
38836
38837/**
38838 * Internal dependencies
38839 */
38840
38841
38842function RangeRail(props) {
38843  const {
38844    disabled = false,
38845    marks = false,
38846    min = 0,
38847    max = 100,
38848    step = 1,
38849    value = 0,
38850    ...restProps
38851  } = props;
38852  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Rail, {
38853    disabled: disabled,
38854    ...restProps
38855  }), marks && (0,external_wp_element_namespaceObject.createElement)(Marks, {
38856    disabled: disabled,
38857    marks: marks,
38858    min: min,
38859    max: max,
38860    step: step,
38861    value: value
38862  }));
38863}
38864function Marks(props) {
38865  const {
38866    disabled = false,
38867    marks = false,
38868    min = 0,
38869    max = 100,
38870    step: stepProp = 1,
38871    value = 0
38872  } = props;
38873  const step = stepProp === 'any' ? 1 : stepProp;
38874  const marksData = useMarks({
38875    marks,
38876    min,
38877    max,
38878    step,
38879    value
38880  });
38881  return (0,external_wp_element_namespaceObject.createElement)(MarksWrapper, {
38882    "aria-hidden": "true",
38883    className: "components-range-control__marks"
38884  }, marksData.map(mark => (0,external_wp_element_namespaceObject.createElement)(RangeMark, {
38885    ...mark,
38886    key: mark.key,
38887    "aria-hidden": "true",
38888    disabled: disabled
38889  })));
38890}
38891function useMarks({
38892  marks,
38893  min = 0,
38894  max = 100,
38895  step = 1,
38896  value = 0
38897}) {
38898  if (!marks) {
38899    return [];
38900  }
38901  const range = max - min;
38902  if (!Array.isArray(marks)) {
38903    marks = [];
38904    const count = 1 + Math.round(range / step);
38905    while (count > marks.push({
38906      value: step * marks.length + min
38907    }));
38908  }
38909  const placedMarks = [];
38910  marks.forEach((mark, index) => {
38911    if (mark.value < min || mark.value > max) {
38912      return;
38913    }
38914    const key = `mark-${index}`;
38915    const isFilled = mark.value <= value;
38916    const offset = `${(mark.value - min) / range * 100}%`;
38917    const offsetStyle = {
38918      [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: offset
38919    };
38920    placedMarks.push({
38921      ...mark,
38922      isFilled,
38923      key,
38924      style: offsetStyle
38925    });
38926  });
38927  return placedMarks;
38928}
38929
38930;// CONCATENATED MODULE: ./packages/components/build-module/range-control/tooltip.js
38931
38932/**
38933 * External dependencies
38934 */
38935
38936
38937/**
38938 * WordPress dependencies
38939 */
38940
38941
38942/**
38943 * Internal dependencies
38944 */
38945
38946function SimpleTooltip(props) {
38947  const {
38948    className,
38949    inputRef,
38950    tooltipPosition,
38951    show = false,
38952    style = {},
38953    value = 0,
38954    renderTooltipContent = v => v,
38955    zIndex = 100,
38956    ...restProps
38957  } = props;
38958  const position = useTooltipPosition({
38959    inputRef,
38960    tooltipPosition
38961  });
38962  const classes = classnames_default()('components-simple-tooltip', className);
38963  const styles = {
38964    ...style,
38965    zIndex
38966  };
38967  return (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Tooltip, {
38968    ...restProps,
38969    "aria-hidden": show,
38970    className: classes,
38971    position: position,
38972    show: show,
38973    role: "tooltip",
38974    style: styles
38975  }, renderTooltipContent(value));
38976}
38977function useTooltipPosition({
38978  inputRef,
38979  tooltipPosition
38980}) {
38981  const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)();
38982  const setTooltipPosition = (0,external_wp_element_namespaceObject.useCallback)(() => {
38983    if (inputRef && inputRef.current) {
38984      setPosition(tooltipPosition);
38985    }
38986  }, [tooltipPosition, inputRef]);
38987  (0,external_wp_element_namespaceObject.useEffect)(() => {
38988    setTooltipPosition();
38989  }, [setTooltipPosition]);
38990  (0,external_wp_element_namespaceObject.useEffect)(() => {
38991    window.addEventListener('resize', setTooltipPosition);
38992    return () => {
38993      window.removeEventListener('resize', setTooltipPosition);
38994    };
38995  });
38996  return position;
38997}
38998
38999;// CONCATENATED MODULE: ./packages/components/build-module/range-control/index.js
39000
39001/**
39002 * External dependencies
39003 */
39004
39005/**
39006 * WordPress dependencies
39007 */
39008
39009
39010
39011
39012/**
39013 * Internal dependencies
39014 */
39015
39016
39017
39018
39019
39020
39021
39022
39023
39024
39025
39026const range_control_noop = () => {};
39027function UnforwardedRangeControl(props, forwardedRef) {
39028  const {
39029    __nextHasNoMarginBottom = false,
39030    afterIcon,
39031    allowReset = false,
39032    beforeIcon,
39033    className,
39034    color: colorProp = COLORS.theme.accent,
39035    currentInput,
39036    disabled = false,
39037    help,
39038    hideLabelFromVision = false,
39039    initialPosition,
39040    isShiftStepEnabled = true,
39041    label,
39042    marks = false,
39043    max = 100,
39044    min = 0,
39045    onBlur = range_control_noop,
39046    onChange = range_control_noop,
39047    onFocus = range_control_noop,
39048    onMouseLeave = range_control_noop,
39049    onMouseMove = range_control_noop,
39050    railColor,
39051    renderTooltipContent = v => v,
39052    resetFallbackValue,
39053    __next40pxDefaultSize = false,
39054    shiftStep = 10,
39055    showTooltip: showTooltipProp,
39056    step = 1,
39057    trackColor,
39058    value: valueProp,
39059    withInputField = true,
39060    ...otherProps
39061  } = props;
39062  const [value, setValue] = useControlledRangeValue({
39063    min,
39064    max,
39065    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,
39066    initial: initialPosition
39067  });
39068  const isResetPendent = (0,external_wp_element_namespaceObject.useRef)(false);
39069  let hasTooltip = showTooltipProp;
39070  let hasInputField = withInputField;
39071  if (step === 'any') {
39072    // The tooltip and number input field are hidden when the step is "any"
39073    // because the decimals get too lengthy to fit well.
39074    hasTooltip = false;
39075    hasInputField = false;
39076  }
39077  const [showTooltip, setShowTooltip] = (0,external_wp_element_namespaceObject.useState)(hasTooltip);
39078  const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
39079  const inputRef = (0,external_wp_element_namespaceObject.useRef)();
39080  const isCurrentlyFocused = inputRef.current?.matches(':focus');
39081  const isThumbFocused = !disabled && isFocused;
39082  const isValueReset = value === null;
39083  const currentValue = value !== undefined ? value : currentInput;
39084  const inputSliderValue = isValueReset ? '' : currentValue;
39085  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;
39086  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;
39087  const fillValueOffset = `${math_clamp(fillValue, 0, 100)}%`;
39088  const classes = classnames_default()('components-range-control', className);
39089  const wrapperClasses = classnames_default()('components-range-control__wrapper', !!marks && 'is-marked');
39090  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control');
39091  const describedBy = !!help ? `${id}__help` : undefined;
39092  const enableTooltip = hasTooltip !== false && Number.isFinite(value);
39093  const handleOnRangeChange = event => {
39094    const nextValue = parseFloat(event.target.value);
39095    setValue(nextValue);
39096    onChange(nextValue);
39097  };
39098  const handleOnChange = next => {
39099    // @ts-expect-error TODO: Investigate if it's problematic for setValue() to
39100    // potentially receive a NaN when next is undefined.
39101    let nextValue = parseFloat(next);
39102    setValue(nextValue);
39103
39104    /*
39105     * Calls onChange only when nextValue is numeric
39106     * otherwise may queue a reset for the blur event.
39107     */
39108    if (!isNaN(nextValue)) {
39109      if (nextValue < min || nextValue > max) {
39110        nextValue = floatClamp(nextValue, min, max);
39111      }
39112      onChange(nextValue);
39113      isResetPendent.current = false;
39114    } else if (allowReset) {
39115      isResetPendent.current = true;
39116    }
39117  };
39118  const handleOnInputNumberBlur = () => {
39119    if (isResetPendent.current) {
39120      handleOnReset();
39121      isResetPendent.current = false;
39122    }
39123  };
39124  const handleOnReset = () => {
39125    let resetValue = parseFloat(`${resetFallbackValue}`);
39126    let onChangeResetValue = resetValue;
39127    if (isNaN(resetValue)) {
39128      resetValue = null;
39129      onChangeResetValue = undefined;
39130    }
39131    setValue(resetValue);
39132
39133    /**
39134     * Previously, this callback would always receive undefined as
39135     * an argument. This behavior is unexpected, specifically
39136     * when resetFallbackValue is defined.
39137     *
39138     * The value of undefined is not ideal. Passing it through
39139     * to internal <input /> elements would change it from a
39140     * controlled component to an uncontrolled component.
39141     *
39142     * For now, to minimize unexpected regressions, we're going to
39143     * preserve the undefined callback argument, except when a
39144     * resetFallbackValue is defined.
39145     */
39146    onChange(onChangeResetValue);
39147  };
39148  const handleShowTooltip = () => setShowTooltip(true);
39149  const handleHideTooltip = () => setShowTooltip(false);
39150  const handleOnBlur = event => {
39151    onBlur(event);
39152    setIsFocused(false);
39153    handleHideTooltip();
39154  };
39155  const handleOnFocus = event => {
39156    onFocus(event);
39157    setIsFocused(true);
39158    handleShowTooltip();
39159  };
39160  const offsetStyle = {
39161    [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset
39162  };
39163  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
39164    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
39165    className: classes,
39166    label: label,
39167    hideLabelFromVision: hideLabelFromVision,
39168    id: `${id}`,
39169    help: help
39170  }, (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Root, {
39171    className: "components-range-control__root",
39172    __next40pxDefaultSize: __next40pxDefaultSize
39173  }, beforeIcon && (0,external_wp_element_namespaceObject.createElement)(BeforeIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
39174    icon: beforeIcon
39175  })), (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Wrapper, {
39176    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
39177    className: wrapperClasses,
39178    color: colorProp,
39179    marks: !!marks
39180  }, (0,external_wp_element_namespaceObject.createElement)(input_range, {
39181    ...otherProps,
39182    className: "components-range-control__slider",
39183    describedBy: describedBy,
39184    disabled: disabled,
39185    id: `${id}`,
39186    label: label,
39187    max: max,
39188    min: min,
39189    onBlur: handleOnBlur,
39190    onChange: handleOnRangeChange,
39191    onFocus: handleOnFocus,
39192    onMouseMove: onMouseMove,
39193    onMouseLeave: onMouseLeave,
39194    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]),
39195    step: step,
39196    value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined
39197  }), (0,external_wp_element_namespaceObject.createElement)(RangeRail, {
39198    "aria-hidden": true,
39199    disabled: disabled,
39200    marks: marks,
39201    max: max,
39202    min: min,
39203    railColor: railColor,
39204    step: step,
39205    value: rangeFillValue
39206  }), (0,external_wp_element_namespaceObject.createElement)(Track, {
39207    "aria-hidden": true,
39208    className: "components-range-control__track",
39209    disabled: disabled,
39210    style: {
39211      width: fillValueOffset
39212    },
39213    trackColor: trackColor
39214  }), (0,external_wp_element_namespaceObject.createElement)(ThumbWrapper, {
39215    className: "components-range-control__thumb-wrapper",
39216    style: offsetStyle,
39217    disabled: disabled
39218  }, (0,external_wp_element_namespaceObject.createElement)(Thumb, {
39219    "aria-hidden": true,
39220    isFocused: isThumbFocused,
39221    disabled: disabled
39222  })), enableTooltip && (0,external_wp_element_namespaceObject.createElement)(SimpleTooltip, {
39223    className: "components-range-control__tooltip",
39224    inputRef: inputRef,
39225    tooltipPosition: "bottom",
39226    renderTooltipContent: renderTooltipContent,
39227    show: isCurrentlyFocused || showTooltip,
39228    style: offsetStyle,
39229    value: value
39230  })), afterIcon && (0,external_wp_element_namespaceObject.createElement)(AfterIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
39231    icon: afterIcon
39232  })), hasInputField && (0,external_wp_element_namespaceObject.createElement)(InputNumber, {
39233    "aria-label": label,
39234    className: "components-range-control__number",
39235    disabled: disabled,
39236    inputMode: "decimal",
39237    isShiftStepEnabled: isShiftStepEnabled,
39238    max: max,
39239    min: min,
39240    onBlur: handleOnInputNumberBlur,
39241    onChange: handleOnChange,
39242    shiftStep: shiftStep,
39243    size: __next40pxDefaultSize ? '__unstable-large' : 'default',
39244    __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),
39245    step: step
39246    // @ts-expect-error TODO: Investigate if the `null` value is necessary
39247    ,
39248    value: inputSliderValue
39249  }), allowReset && (0,external_wp_element_namespaceObject.createElement)(ActionRightWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
39250    className: "components-range-control__reset",
39251    disabled: disabled || value === undefined,
39252    variant: "secondary",
39253    isSmall: true,
39254    onClick: handleOnReset
39255  }, (0,external_wp_i18n_namespaceObject.__)('Reset')))));
39256}
39257
39258/**
39259 * RangeControls are used to make selections from a range of incremental values.
39260 *
39261 * ```jsx
39262 * import { RangeControl } from '@wordpress/components';
39263 * import { useState } from '@wordpress/element';
39264 *
39265 * const MyRangeControl = () => {
39266 *   const [ isChecked, setChecked ] = useState( true );
39267 *   return (
39268 *     <RangeControl
39269 *       help="Please select how transparent you would like this."
39270 *       initialPosition={50}
39271 *       label="Opacity"
39272 *       max={100}
39273 *       min={0}
39274 *       onChange={() => {}}
39275 *     />
39276 *   );
39277 * };
39278 * ```
39279 */
39280const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl);
39281/* harmony default export */ const range_control = (RangeControl);
39282
39283;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/styles.js
39284
39285/**
39286 * External dependencies
39287 */
39288
39289/**
39290 * Internal dependencies
39291 */
39292
39293
39294
39295
39296
39297
39298
39299
39300
39301
39302const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
39303  target: "ez9hsf47"
39304} : 0)(Container, "{width:", space(24), ";}" + ( true ? "" : 0));
39305const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control,  true ? {
39306  target: "ez9hsf46"
39307} : 0)("margin-left:", space(-2), ";width:5em;select:not( :focus )~", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;}" + ( true ? "" : 0));
39308const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control,  true ? {
39309  target: "ez9hsf45"
39310} : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0));
39311
39312// Make the Hue circle picker not go out of the bar.
39313const interactiveHueStyles = `
39314.react-colorful__interactive {
39315	width: calc( 100% - ${space(2)} );
39316	margin-left: ${space(1)};
39317}`;
39318const AuxiliaryColorArtefactWrapper = emotion_styled_base_browser_esm("div",  true ? {
39319  target: "ez9hsf44"
39320} : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0));
39321const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
39322  target: "ez9hsf43"
39323} : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0));
39324const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
39325  target: "ez9hsf42"
39326} : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0));
39327const ColorfulWrapper = emotion_styled_base_browser_esm("div",  true ? {
39328  target: "ez9hsf41"
39329} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;overflow:hidden;}.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));
39330const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
39331  target: "ez9hsf40"
39332} : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0));
39333
39334;// CONCATENATED MODULE: ./packages/icons/build-module/library/copy.js
39335
39336/**
39337 * WordPress dependencies
39338 */
39339
39340const copy_copy = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
39341  xmlns: "http://www.w3.org/2000/svg",
39342  viewBox: "0 0 24 24"
39343}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
39344  d: "M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
39345}));
39346/* harmony default export */ const library_copy = (copy_copy);
39347
39348;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
39349function getWindow_getWindow(node) {
39350  if (node == null) {
39351    return window;
39352  }
39353
39354  if (node.toString() !== '[object Window]') {
39355    var ownerDocument = node.ownerDocument;
39356    return ownerDocument ? ownerDocument.defaultView || window : window;
39357  }
39358
39359  return node;
39360}
39361;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js
39362
39363
39364function instanceOf_isElement(node) {
39365  var OwnElement = getWindow_getWindow(node).Element;
39366  return node instanceof OwnElement || node instanceof Element;
39367}
39368
39369function instanceOf_isHTMLElement(node) {
39370  var OwnElement = getWindow_getWindow(node).HTMLElement;
39371  return node instanceof OwnElement || node instanceof HTMLElement;
39372}
39373
39374function instanceOf_isShadowRoot(node) {
39375  // IE 11 has no ShadowRoot
39376  if (typeof ShadowRoot === 'undefined') {
39377    return false;
vendor: 5,436 bytes, lines 39378-39537
39378  }
39379
39380  var OwnElement = getWindow_getWindow(node).ShadowRoot;
39381  return node instanceof OwnElement || node instanceof ShadowRoot;
39382}
39383
39384
39385;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js
39386var math_max = Math.max;
39387var math_min = Math.min;
39388var math_round = Math.round;
39389;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js
39390function getUAString() {
39391  var uaData = navigator.userAgentData;
39392
39393  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
39394    return uaData.brands.map(function (item) {
39395      return item.brand + "/" + item.version;
39396    }).join(' ');
39397  }
39398
39399  return navigator.userAgent;
39400}
39401;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js
39402
39403function isLayoutViewport() {
39404  return !/^((?!chrome|android).)*safari/i.test(getUAString());
39405}
39406;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
39407
39408
39409
39410
39411function getBoundingClientRect_getBoundingClientRect(element, includeScale, isFixedStrategy) {
39412  if (includeScale === void 0) {
39413    includeScale = false;
39414  }
39415
39416  if (isFixedStrategy === void 0) {
39417    isFixedStrategy = false;
39418  }
39419
39420  var clientRect = element.getBoundingClientRect();
39421  var scaleX = 1;
39422  var scaleY = 1;
39423
39424  if (includeScale && instanceOf_isHTMLElement(element)) {
39425    scaleX = element.offsetWidth > 0 ? math_round(clientRect.width) / element.offsetWidth || 1 : 1;
39426    scaleY = element.offsetHeight > 0 ? math_round(clientRect.height) / element.offsetHeight || 1 : 1;
39427  }
39428
39429  var _ref = instanceOf_isElement(element) ? getWindow_getWindow(element) : window,
39430      visualViewport = _ref.visualViewport;
39431
39432  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
39433  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
39434  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
39435  var width = clientRect.width / scaleX;
39436  var height = clientRect.height / scaleY;
39437  return {
39438    width: width,
39439    height: height,
39440    top: y,
39441    right: x + width,
39442    bottom: y + height,
39443    left: x,
39444    x: x,
39445    y: y
39446  };
39447}
39448;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
39449
39450function getWindowScroll(node) {
39451  var win = getWindow_getWindow(node);
39452  var scrollLeft = win.pageXOffset;
39453  var scrollTop = win.pageYOffset;
39454  return {
39455    scrollLeft: scrollLeft,
39456    scrollTop: scrollTop
39457  };
39458}
39459;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js
39460function getHTMLElementScroll(element) {
39461  return {
39462    scrollLeft: element.scrollLeft,
39463    scrollTop: element.scrollTop
39464  };
39465}
39466;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js
39467
39468
39469
39470
39471function getNodeScroll_getNodeScroll(node) {
39472  if (node === getWindow_getWindow(node) || !instanceOf_isHTMLElement(node)) {
39473    return getWindowScroll(node);
39474  } else {
39475    return getHTMLElementScroll(node);
39476  }
39477}
39478;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js
39479function getNodeName_getNodeName(element) {
39480  return element ? (element.nodeName || '').toLowerCase() : null;
39481}
39482;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js
39483
39484function getDocumentElement_getDocumentElement(element) {
39485  // $FlowFixMe[incompatible-return]: assume body is always available
39486  return ((instanceOf_isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
39487  element.document) || window.document).documentElement;
39488}
39489;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js
39490
39491
39492
39493function getWindowScrollBarX_getWindowScrollBarX(element) {
39494  // If <html> has a CSS width greater than the viewport, then this will be
39495  // incorrect for RTL.
39496  // Popper 1 is broken in this case and never had a bug report so let's assume
39497  // it's not an issue. I don't think anyone ever specifies width on <html>
39498  // anyway.
39499  // Browsers where the left scrollbar doesn't cause an issue report `0` for
39500  // this (e.g. Edge 2019, IE11, Safari)
39501  return getBoundingClientRect_getBoundingClientRect(getDocumentElement_getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
39502}
39503;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
39504
39505function getComputedStyle_getComputedStyle(element) {
39506  return getWindow_getWindow(element).getComputedStyle(element);
39507}
39508;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
39509
39510function isScrollParent(element) {
39511  // Firefox wants us to check `-x` and `-y` variations as well
39512  var _getComputedStyle = getComputedStyle_getComputedStyle(element),
39513      overflow = _getComputedStyle.overflow,
39514      overflowX = _getComputedStyle.overflowX,
39515      overflowY = _getComputedStyle.overflowY;
39516
39517  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
39518}
39519;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js
39520
39521
39522
39523
39524
39525
39526
39527
39528
39529function isElementScaled(element) {
39530  var rect = element.getBoundingClientRect();
39531  var scaleX = math_round(rect.width) / element.offsetWidth || 1;
39532  var scaleY = math_round(rect.height) / element.offsetHeight || 1;
39533  return scaleX !== 1 || scaleY !== 1;
39534} // Returns the composite rect of an element relative to its offsetParent.
39535// Composite means it takes into account transforms as well as layout.
39536
39537
vendor: 4,122 bytes, lines 39538-39662
39538function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
39539  if (isFixed === void 0) {
39540    isFixed = false;
39541  }
39542
39543  var isOffsetParentAnElement = instanceOf_isHTMLElement(offsetParent);
39544  var offsetParentIsScaled = instanceOf_isHTMLElement(offsetParent) && isElementScaled(offsetParent);
39545  var documentElement = getDocumentElement_getDocumentElement(offsetParent);
39546  var rect = getBoundingClientRect_getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
39547  var scroll = {
39548    scrollLeft: 0,
39549    scrollTop: 0
39550  };
39551  var offsets = {
39552    x: 0,
39553    y: 0
39554  };
39555
39556  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
39557    if (getNodeName_getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
39558    isScrollParent(documentElement)) {
39559      scroll = getNodeScroll_getNodeScroll(offsetParent);
39560    }
39561
39562    if (instanceOf_isHTMLElement(offsetParent)) {
39563      offsets = getBoundingClientRect_getBoundingClientRect(offsetParent, true);
39564      offsets.x += offsetParent.clientLeft;
39565      offsets.y += offsetParent.clientTop;
39566    } else if (documentElement) {
39567      offsets.x = getWindowScrollBarX_getWindowScrollBarX(documentElement);
39568    }
39569  }
39570
39571  return {
39572    x: rect.left + scroll.scrollLeft - offsets.x,
39573    y: rect.top + scroll.scrollTop - offsets.y,
39574    width: rect.width,
39575    height: rect.height
39576  };
39577}
39578;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
39579 // Returns the layout rect of an element relative to its offsetParent. Layout
39580// means it doesn't take into account transforms.
39581
39582function getLayoutRect(element) {
39583  var clientRect = getBoundingClientRect_getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
39584  // Fixes https://github.com/popperjs/popper-core/issues/1223
39585
39586  var width = element.offsetWidth;
39587  var height = element.offsetHeight;
39588
39589  if (Math.abs(clientRect.width - width) <= 1) {
39590    width = clientRect.width;
39591  }
39592
39593  if (Math.abs(clientRect.height - height) <= 1) {
39594    height = clientRect.height;
39595  }
39596
39597  return {
39598    x: element.offsetLeft,
39599    y: element.offsetTop,
39600    width: width,
39601    height: height
39602  };
39603}
39604;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js
39605
39606
39607
39608function getParentNode_getParentNode(element) {
39609  if (getNodeName_getNodeName(element) === 'html') {
39610    return element;
39611  }
39612
39613  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
39614    // $FlowFixMe[incompatible-return]
39615    // $FlowFixMe[prop-missing]
39616    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
39617    element.parentNode || ( // DOM Element detected
39618    instanceOf_isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
39619    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
39620    getDocumentElement_getDocumentElement(element) // fallback
39621
39622  );
39623}
39624;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js
39625
39626
39627
39628
39629function getScrollParent(node) {
39630  if (['html', 'body', '#document'].indexOf(getNodeName_getNodeName(node)) >= 0) {
39631    // $FlowFixMe[incompatible-return]: assume body is always available
39632    return node.ownerDocument.body;
39633  }
39634
39635  if (instanceOf_isHTMLElement(node) && isScrollParent(node)) {
39636    return node;
39637  }
39638
39639  return getScrollParent(getParentNode_getParentNode(node));
39640}
39641;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js
39642
39643
39644
39645
39646/*
39647given a DOM element, return the list of all scroll parents, up the list of ancesors
39648until we get to the top window object. This list is what we attach scroll listeners
39649to, because if any of these parent elements scroll, we'll need to re-calculate the
39650reference element's position.
39651*/
39652
39653function listScrollParents(element, list) {
39654  var _element$ownerDocumen;
39655
39656  if (list === void 0) {
39657    list = [];
39658  }
39659
39660  var scrollParent = getScrollParent(element);
39661  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
39662  var win = getWindow_getWindow(scrollParent);
vendor: 4,736 bytes, lines 39663-39781
39663  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
39664  var updatedList = list.concat(target);
39665  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
39666  updatedList.concat(listScrollParents(getParentNode_getParentNode(target)));
39667}
39668;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js
39669
39670function isTableElement_isTableElement(element) {
39671  return ['table', 'td', 'th'].indexOf(getNodeName_getNodeName(element)) >= 0;
39672}
39673;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js
39674
39675
39676
39677
39678
39679
39680
39681
39682function getOffsetParent_getTrueOffsetParent(element) {
39683  if (!instanceOf_isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
39684  getComputedStyle_getComputedStyle(element).position === 'fixed') {
39685    return null;
39686  }
39687
39688  return element.offsetParent;
39689} // `.offsetParent` reports `null` for fixed elements, while absolute elements
39690// return the containing block
39691
39692
39693function getOffsetParent_getContainingBlock(element) {
39694  var isFirefox = /firefox/i.test(getUAString());
39695  var isIE = /Trident/i.test(getUAString());
39696
39697  if (isIE && instanceOf_isHTMLElement(element)) {
39698    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
39699    var elementCss = getComputedStyle_getComputedStyle(element);
39700
39701    if (elementCss.position === 'fixed') {
39702      return null;
39703    }
39704  }
39705
39706  var currentNode = getParentNode_getParentNode(element);
39707
39708  if (instanceOf_isShadowRoot(currentNode)) {
39709    currentNode = currentNode.host;
39710  }
39711
39712  while (instanceOf_isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName_getNodeName(currentNode)) < 0) {
39713    var css = getComputedStyle_getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
39714    // create a containing block.
39715    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
39716
39717    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
39718      return currentNode;
39719    } else {
39720      currentNode = currentNode.parentNode;
39721    }
39722  }
39723
39724  return null;
39725} // Gets the closest ancestor positioned element. Handles some edge cases,
39726// such as table ancestors and cross browser bugs.
39727
39728
39729function getOffsetParent_getOffsetParent(element) {
39730  var window = getWindow_getWindow(element);
39731  var offsetParent = getOffsetParent_getTrueOffsetParent(element);
39732
39733  while (offsetParent && isTableElement_isTableElement(offsetParent) && getComputedStyle_getComputedStyle(offsetParent).position === 'static') {
39734    offsetParent = getOffsetParent_getTrueOffsetParent(offsetParent);
39735  }
39736
39737  if (offsetParent && (getNodeName_getNodeName(offsetParent) === 'html' || getNodeName_getNodeName(offsetParent) === 'body' && getComputedStyle_getComputedStyle(offsetParent).position === 'static')) {
39738    return window;
39739  }
39740
39741  return offsetParent || getOffsetParent_getContainingBlock(element) || window;
39742}
39743;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/enums.js
39744var enums_top = 'top';
39745var bottom = 'bottom';
39746var right = 'right';
39747var left = 'left';
39748var enums_auto = 'auto';
39749var basePlacements = [enums_top, bottom, right, left];
39750var start = 'start';
39751var end = 'end';
39752var clippingParents = 'clippingParents';
39753var viewport = 'viewport';
39754var popper = 'popper';
39755var reference = 'reference';
39756var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
39757  return acc.concat([placement + "-" + start, placement + "-" + end]);
39758}, []);
39759var enums_placements = /*#__PURE__*/[].concat(basePlacements, [enums_auto]).reduce(function (acc, placement) {
39760  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
39761}, []); // modifiers that need to read the DOM
39762
39763var beforeRead = 'beforeRead';
39764var read = 'read';
39765var afterRead = 'afterRead'; // pure-logic modifiers
39766
39767var beforeMain = 'beforeMain';
39768var main = 'main';
39769var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
39770
39771var beforeWrite = 'beforeWrite';
39772var write = 'write';
39773var afterWrite = 'afterWrite';
39774var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
39775;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/orderModifiers.js
39776 // source: https://stackoverflow.com/questions/49875255
39777
39778function order(modifiers) {
39779  var map = new Map();
39780  var visited = new Set();
39781  var result = [];
vendor: 8,879 bytes, lines 39782-40038
39782  modifiers.forEach(function (modifier) {
39783    map.set(modifier.name, modifier);
39784  }); // On visiting object, check for its dependencies and visit them recursively
39785
39786  function sort(modifier) {
39787    visited.add(modifier.name);
39788    var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
39789    requires.forEach(function (dep) {
39790      if (!visited.has(dep)) {
39791        var depModifier = map.get(dep);
39792
39793        if (depModifier) {
39794          sort(depModifier);
39795        }
39796      }
39797    });
39798    result.push(modifier);
39799  }
39800
39801  modifiers.forEach(function (modifier) {
39802    if (!visited.has(modifier.name)) {
39803      // check for visited object
39804      sort(modifier);
39805    }
39806  });
39807  return result;
39808}
39809
39810function orderModifiers(modifiers) {
39811  // order based on dependencies
39812  var orderedModifiers = order(modifiers); // order based on phase
39813
39814  return modifierPhases.reduce(function (acc, phase) {
39815    return acc.concat(orderedModifiers.filter(function (modifier) {
39816      return modifier.phase === phase;
39817    }));
39818  }, []);
39819}
39820;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js
39821function debounce(fn) {
39822  var pending;
39823  return function () {
39824    if (!pending) {
39825      pending = new Promise(function (resolve) {
39826        Promise.resolve().then(function () {
39827          pending = undefined;
39828          resolve(fn());
39829        });
39830      });
39831    }
39832
39833    return pending;
39834  };
39835}
39836;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergeByName.js
39837function mergeByName(modifiers) {
39838  var merged = modifiers.reduce(function (merged, current) {
39839    var existing = merged[current.name];
39840    merged[current.name] = existing ? Object.assign({}, existing, current, {
39841      options: Object.assign({}, existing.options, current.options),
39842      data: Object.assign({}, existing.data, current.data)
39843    }) : current;
39844    return merged;
39845  }, {}); // IE11 does not support Object.values
39846
39847  return Object.keys(merged).map(function (key) {
39848    return merged[key];
39849  });
39850}
39851;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/createPopper.js
39852
39853
39854
39855
39856
39857
39858
39859
39860
39861
39862
39863
39864
39865
39866var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
39867var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
39868var DEFAULT_OPTIONS = {
39869  placement: 'bottom',
39870  modifiers: [],
39871  strategy: 'absolute'
39872};
39873
39874function areValidElements() {
39875  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
39876    args[_key] = arguments[_key];
39877  }
39878
39879  return !args.some(function (element) {
39880    return !(element && typeof element.getBoundingClientRect === 'function');
39881  });
39882}
39883
39884function popperGenerator(generatorOptions) {
39885  if (generatorOptions === void 0) {
39886    generatorOptions = {};
39887  }
39888
39889  var _generatorOptions = generatorOptions,
39890      _generatorOptions$def = _generatorOptions.defaultModifiers,
39891      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
39892      _generatorOptions$def2 = _generatorOptions.defaultOptions,
39893      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
39894  return function createPopper(reference, popper, options) {
39895    if (options === void 0) {
39896      options = defaultOptions;
39897    }
39898
39899    var state = {
39900      placement: 'bottom',
39901      orderedModifiers: [],
39902      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
39903      modifiersData: {},
39904      elements: {
39905        reference: reference,
39906        popper: popper
39907      },
39908      attributes: {},
39909      styles: {}
39910    };
39911    var effectCleanupFns = [];
39912    var isDestroyed = false;
39913    var instance = {
39914      state: state,
39915      setOptions: function setOptions(setOptionsAction) {
39916        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
39917        cleanupModifierEffects();
39918        state.options = Object.assign({}, defaultOptions, state.options, options);
39919        state.scrollParents = {
39920          reference: instanceOf_isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
39921          popper: listScrollParents(popper)
39922        }; // Orders the modifiers based on their dependencies and `phase`
39923        // properties
39924
39925        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
39926
39927        state.orderedModifiers = orderedModifiers.filter(function (m) {
39928          return m.enabled;
39929        }); // Validate the provided modifiers so that the consumer will get warned
39930        // if one of the modifiers is invalid for any reason
39931
39932        if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; }
39933
39934        runModifierEffects();
39935        return instance.update();
39936      },
39937      // Sync update – it will always be executed, even if not necessary. This
39938      // is useful for low frequency updates where sync behavior simplifies the
39939      // logic.
39940      // For high frequency updates (e.g. `resize` and `scroll` events), always
39941      // prefer the async Popper#update method
39942      forceUpdate: function forceUpdate() {
39943        if (isDestroyed) {
39944          return;
39945        }
39946
39947        var _state$elements = state.elements,
39948            reference = _state$elements.reference,
39949            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
39950        // anymore
39951
39952        if (!areValidElements(reference, popper)) {
39953          if (false) {}
39954
39955          return;
39956        } // Store the reference and popper rects to be read by modifiers
39957
39958
39959        state.rects = {
39960          reference: getCompositeRect(reference, getOffsetParent_getOffsetParent(popper), state.options.strategy === 'fixed'),
39961          popper: getLayoutRect(popper)
39962        }; // Modifiers have the ability to reset the current update cycle. The
39963        // most common use case for this is the `flip` modifier changing the
39964        // placement, which then needs to re-run all the modifiers, because the
39965        // logic was previously ran for the previous placement and is therefore
39966        // stale/incorrect
39967
39968        state.reset = false;
39969        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
39970        // is filled with the initial data specified by the modifier. This means
39971        // it doesn't persist and is fresh on each update.
39972        // To ensure persistent data, use `${name}#persistent`
39973
39974        state.orderedModifiers.forEach(function (modifier) {
39975          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
39976        });
39977        var __debug_loops__ = 0;
39978
39979        for (var index = 0; index < state.orderedModifiers.length; index++) {
39980          if (false) {}
39981
39982          if (state.reset === true) {
39983            state.reset = false;
39984            index = -1;
39985            continue;
39986          }
39987
39988          var _state$orderedModifie = state.orderedModifiers[index],
39989              fn = _state$orderedModifie.fn,
39990              _state$orderedModifie2 = _state$orderedModifie.options,
39991              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
39992              name = _state$orderedModifie.name;
39993
39994          if (typeof fn === 'function') {
39995            state = fn({
39996              state: state,
39997              options: _options,
39998              name: name,
39999              instance: instance
40000            }) || state;
40001          }
40002        }
40003      },
40004      // Async and optimistically optimized update – it will not be executed if
40005      // not necessary (debounced to run at most once-per-tick)
40006      update: debounce(function () {
40007        return new Promise(function (resolve) {
40008          instance.forceUpdate();
40009          resolve(state);
40010        });
40011      }),
40012      destroy: function destroy() {
40013        cleanupModifierEffects();
40014        isDestroyed = true;
40015      }
40016    };
40017
40018    if (!areValidElements(reference, popper)) {
40019      if (false) {}
40020
40021      return instance;
40022    }
40023
40024    instance.setOptions(options).then(function (state) {
40025      if (!isDestroyed && options.onFirstUpdate) {
40026        options.onFirstUpdate(state);
40027      }
40028    }); // Modifiers have the ability to execute arbitrary code before the first
40029    // update cycle runs. They will be executed in the same order as the update
40030    // cycle. This is useful when a modifier adds some persistent data that
40031    // other modifiers need to use, but the modifier is run after the dependent
40032    // one.
40033
40034    function runModifierEffects() {
40035      state.orderedModifiers.forEach(function (_ref3) {
40036        var name = _ref3.name,
40037            _ref3$options = _ref3.options,
40038            options = _ref3$options === void 0 ? {}
vendor: 24,980 bytes, lines 40038-40807
40038 : _ref3$options,
40039            effect = _ref3.effect;
40040
40041        if (typeof effect === 'function') {
40042          var cleanupFn = effect({
40043            state: state,
40044            name: name,
40045            instance: instance,
40046            options: options
40047          });
40048
40049          var noopFn = function noopFn() {};
40050
40051          effectCleanupFns.push(cleanupFn || noopFn);
40052        }
40053      });
40054    }
40055
40056    function cleanupModifierEffects() {
40057      effectCleanupFns.forEach(function (fn) {
40058        return fn();
40059      });
40060      effectCleanupFns = [];
40061    }
40062
40063    return instance;
40064  };
40065}
40066var createPopper = /*#__PURE__*/(/* unused pure expression or super */ null && (popperGenerator())); // eslint-disable-next-line import/no-unused-modules
40067
40068
40069;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js
40070 // eslint-disable-next-line import/no-unused-modules
40071
40072var passive = {
40073  passive: true
40074};
40075
40076function effect(_ref) {
40077  var state = _ref.state,
40078      instance = _ref.instance,
40079      options = _ref.options;
40080  var _options$scroll = options.scroll,
40081      scroll = _options$scroll === void 0 ? true : _options$scroll,
40082      _options$resize = options.resize,
40083      resize = _options$resize === void 0 ? true : _options$resize;
40084  var window = getWindow_getWindow(state.elements.popper);
40085  var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
40086
40087  if (scroll) {
40088    scrollParents.forEach(function (scrollParent) {
40089      scrollParent.addEventListener('scroll', instance.update, passive);
40090    });
40091  }
40092
40093  if (resize) {
40094    window.addEventListener('resize', instance.update, passive);
40095  }
40096
40097  return function () {
40098    if (scroll) {
40099      scrollParents.forEach(function (scrollParent) {
40100        scrollParent.removeEventListener('scroll', instance.update, passive);
40101      });
40102    }
40103
40104    if (resize) {
40105      window.removeEventListener('resize', instance.update, passive);
40106    }
40107  };
40108} // eslint-disable-next-line import/no-unused-modules
40109
40110
40111/* harmony default export */ const eventListeners = ({
40112  name: 'eventListeners',
40113  enabled: true,
40114  phase: 'write',
40115  fn: function fn() {},
40116  effect: effect,
40117  data: {}
40118});
40119;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js
40120
40121function getBasePlacement(placement) {
40122  return placement.split('-')[0];
40123}
40124;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getVariation.js
40125function getVariation(placement) {
40126  return placement.split('-')[1];
40127}
40128;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js
40129function getMainAxisFromPlacement(placement) {
40130  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
40131}
40132;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeOffsets.js
40133
40134
40135
40136
40137function computeOffsets(_ref) {
40138  var reference = _ref.reference,
40139      element = _ref.element,
40140      placement = _ref.placement;
40141  var basePlacement = placement ? getBasePlacement(placement) : null;
40142  var variation = placement ? getVariation(placement) : null;
40143  var commonX = reference.x + reference.width / 2 - element.width / 2;
40144  var commonY = reference.y + reference.height / 2 - element.height / 2;
40145  var offsets;
40146
40147  switch (basePlacement) {
40148    case enums_top:
40149      offsets = {
40150        x: commonX,
40151        y: reference.y - element.height
40152      };
40153      break;
40154
40155    case bottom:
40156      offsets = {
40157        x: commonX,
40158        y: reference.y + reference.height
40159      };
40160      break;
40161
40162    case right:
40163      offsets = {
40164        x: reference.x + reference.width,
40165        y: commonY
40166      };
40167      break;
40168
40169    case left:
40170      offsets = {
40171        x: reference.x - element.width,
40172        y: commonY
40173      };
40174      break;
40175
40176    default:
40177      offsets = {
40178        x: reference.x,
40179        y: reference.y
40180      };
40181  }
40182
40183  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
40184
40185  if (mainAxis != null) {
40186    var len = mainAxis === 'y' ? 'height' : 'width';
40187
40188    switch (variation) {
40189      case start:
40190        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
40191        break;
40192
40193      case end:
40194        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
40195        break;
40196
40197      default:
40198    }
40199  }
40200
40201  return offsets;
40202}
40203;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js
40204
40205
40206function popperOffsets(_ref) {
40207  var state = _ref.state,
40208      name = _ref.name;
40209  // Offsets are the actual position the popper needs to have to be
40210  // properly positioned near its reference element
40211  // This is the most basic placement, and will be adjusted by
40212  // the modifiers in the next step
40213  state.modifiersData[name] = computeOffsets({
40214    reference: state.rects.reference,
40215    element: state.rects.popper,
40216    strategy: 'absolute',
40217    placement: state.placement
40218  });
40219} // eslint-disable-next-line import/no-unused-modules
40220
40221
40222/* harmony default export */ const modifiers_popperOffsets = ({
40223  name: 'popperOffsets',
40224  enabled: true,
40225  phase: 'read',
40226  fn: popperOffsets,
40227  data: {}
40228});
40229;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js
40230
40231
40232
40233
40234
40235
40236
40237 // eslint-disable-next-line import/no-unused-modules
40238
40239var unsetSides = {
40240  top: 'auto',
40241  right: 'auto',
40242  bottom: 'auto',
40243  left: 'auto'
40244}; // Round the offsets to the nearest suitable subpixel based on the DPR.
40245// Zooming can change the DPR, but it seems to report a value that will
40246// cleanly divide the values into the appropriate subpixels.
40247
40248function roundOffsetsByDPR(_ref, win) {
40249  var x = _ref.x,
40250      y = _ref.y;
40251  var dpr = win.devicePixelRatio || 1;
40252  return {
40253    x: math_round(x * dpr) / dpr || 0,
40254    y: math_round(y * dpr) / dpr || 0
40255  };
40256}
40257
40258function mapToStyles(_ref2) {
40259  var _Object$assign2;
40260
40261  var popper = _ref2.popper,
40262      popperRect = _ref2.popperRect,
40263      placement = _ref2.placement,
40264      variation = _ref2.variation,
40265      offsets = _ref2.offsets,
40266      position = _ref2.position,
40267      gpuAcceleration = _ref2.gpuAcceleration,
40268      adaptive = _ref2.adaptive,
40269      roundOffsets = _ref2.roundOffsets,
40270      isFixed = _ref2.isFixed;
40271  var _offsets$x = offsets.x,
40272      x = _offsets$x === void 0 ? 0 : _offsets$x,
40273      _offsets$y = offsets.y,
40274      y = _offsets$y === void 0 ? 0 : _offsets$y;
40275
40276  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
40277    x: x,
40278    y: y
40279  }) : {
40280    x: x,
40281    y: y
40282  };
40283
40284  x = _ref3.x;
40285  y = _ref3.y;
40286  var hasX = offsets.hasOwnProperty('x');
40287  var hasY = offsets.hasOwnProperty('y');
40288  var sideX = left;
40289  var sideY = enums_top;
40290  var win = window;
40291
40292  if (adaptive) {
40293    var offsetParent = getOffsetParent_getOffsetParent(popper);
40294    var heightProp = 'clientHeight';
40295    var widthProp = 'clientWidth';
40296
40297    if (offsetParent === getWindow_getWindow(popper)) {
40298      offsetParent = getDocumentElement_getDocumentElement(popper);
40299
40300      if (getComputedStyle_getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
40301        heightProp = 'scrollHeight';
40302        widthProp = 'scrollWidth';
40303      }
40304    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
40305
40306
40307    offsetParent = offsetParent;
40308
40309    if (placement === enums_top || (placement === left || placement === right) && variation === end) {
40310      sideY = bottom;
40311      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
40312      offsetParent[heightProp];
40313      y -= offsetY - popperRect.height;
40314      y *= gpuAcceleration ? 1 : -1;
40315    }
40316
40317    if (placement === left || (placement === enums_top || placement === bottom) && variation === end) {
40318      sideX = right;
40319      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
40320      offsetParent[widthProp];
40321      x -= offsetX - popperRect.width;
40322      x *= gpuAcceleration ? 1 : -1;
40323    }
40324  }
40325
40326  var commonStyles = Object.assign({
40327    position: position
40328  }, adaptive && unsetSides);
40329
40330  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
40331    x: x,
40332    y: y
40333  }, getWindow_getWindow(popper)) : {
40334    x: x,
40335    y: y
40336  };
40337
40338  x = _ref4.x;
40339  y = _ref4.y;
40340
40341  if (gpuAcceleration) {
40342    var _Object$assign;
40343
40344    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
40345  }
40346
40347  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
40348}
40349
40350function computeStyles(_ref5) {
40351  var state = _ref5.state,
40352      options = _ref5.options;
40353  var _options$gpuAccelerat = options.gpuAcceleration,
40354      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
40355      _options$adaptive = options.adaptive,
40356      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
40357      _options$roundOffsets = options.roundOffsets,
40358      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
40359
40360  if (false) { var transitionProperty; }
40361
40362  var commonStyles = {
40363    placement: getBasePlacement(state.placement),
40364    variation: getVariation(state.placement),
40365    popper: state.elements.popper,
40366    popperRect: state.rects.popper,
40367    gpuAcceleration: gpuAcceleration,
40368    isFixed: state.options.strategy === 'fixed'
40369  };
40370
40371  if (state.modifiersData.popperOffsets != null) {
40372    state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
40373      offsets: state.modifiersData.popperOffsets,
40374      position: state.options.strategy,
40375      adaptive: adaptive,
40376      roundOffsets: roundOffsets
40377    })));
40378  }
40379
40380  if (state.modifiersData.arrow != null) {
40381    state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
40382      offsets: state.modifiersData.arrow,
40383      position: 'absolute',
40384      adaptive: false,
40385      roundOffsets: roundOffsets
40386    })));
40387  }
40388
40389  state.attributes.popper = Object.assign({}, state.attributes.popper, {
40390    'data-popper-placement': state.placement
40391  });
40392} // eslint-disable-next-line import/no-unused-modules
40393
40394
40395/* harmony default export */ const modifiers_computeStyles = ({
40396  name: 'computeStyles',
40397  enabled: true,
40398  phase: 'beforeWrite',
40399  fn: computeStyles,
40400  data: {}
40401});
40402;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js
40403
40404 // This modifier takes the styles prepared by the `computeStyles` modifier
40405// and applies them to the HTMLElements such as popper and arrow
40406
40407function applyStyles(_ref) {
40408  var state = _ref.state;
40409  Object.keys(state.elements).forEach(function (name) {
40410    var style = state.styles[name] || {};
40411    var attributes = state.attributes[name] || {};
40412    var element = state.elements[name]; // arrow is optional + virtual elements
40413
40414    if (!instanceOf_isHTMLElement(element) || !getNodeName_getNodeName(element)) {
40415      return;
40416    } // Flow doesn't support to extend this property, but it's the most
40417    // effective way to apply styles to an HTMLElement
40418    // $FlowFixMe[cannot-write]
40419
40420
40421    Object.assign(element.style, style);
40422    Object.keys(attributes).forEach(function (name) {
40423      var value = attributes[name];
40424
40425      if (value === false) {
40426        element.removeAttribute(name);
40427      } else {
40428        element.setAttribute(name, value === true ? '' : value);
40429      }
40430    });
40431  });
40432}
40433
40434function applyStyles_effect(_ref2) {
40435  var state = _ref2.state;
40436  var initialStyles = {
40437    popper: {
40438      position: state.options.strategy,
40439      left: '0',
40440      top: '0',
40441      margin: '0'
40442    },
40443    arrow: {
40444      position: 'absolute'
40445    },
40446    reference: {}
40447  };
40448  Object.assign(state.elements.popper.style, initialStyles.popper);
40449  state.styles = initialStyles;
40450
40451  if (state.elements.arrow) {
40452    Object.assign(state.elements.arrow.style, initialStyles.arrow);
40453  }
40454
40455  return function () {
40456    Object.keys(state.elements).forEach(function (name) {
40457      var element = state.elements[name];
40458      var attributes = state.attributes[name] || {};
40459      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
40460
40461      var style = styleProperties.reduce(function (style, property) {
40462        style[property] = '';
40463        return style;
40464      }, {}); // arrow is optional + virtual elements
40465
40466      if (!instanceOf_isHTMLElement(element) || !getNodeName_getNodeName(element)) {
40467        return;
40468      }
40469
40470      Object.assign(element.style, style);
40471      Object.keys(attributes).forEach(function (attribute) {
40472        element.removeAttribute(attribute);
40473      });
40474    });
40475  };
40476} // eslint-disable-next-line import/no-unused-modules
40477
40478
40479/* harmony default export */ const modifiers_applyStyles = ({
40480  name: 'applyStyles',
40481  enabled: true,
40482  phase: 'write',
40483  fn: applyStyles,
40484  effect: applyStyles_effect,
40485  requires: ['computeStyles']
40486});
40487;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/offset.js
40488
40489 // eslint-disable-next-line import/no-unused-modules
40490
40491function distanceAndSkiddingToXY(placement, rects, offset) {
40492  var basePlacement = getBasePlacement(placement);
40493  var invertDistance = [left, enums_top].indexOf(basePlacement) >= 0 ? -1 : 1;
40494
40495  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
40496    placement: placement
40497  })) : offset,
40498      skidding = _ref[0],
40499      distance = _ref[1];
40500
40501  skidding = skidding || 0;
40502  distance = (distance || 0) * invertDistance;
40503  return [left, right].indexOf(basePlacement) >= 0 ? {
40504    x: distance,
40505    y: skidding
40506  } : {
40507    x: skidding,
40508    y: distance
40509  };
40510}
40511
40512function offset_offset(_ref2) {
40513  var state = _ref2.state,
40514      options = _ref2.options,
40515      name = _ref2.name;
40516  var _options$offset = options.offset,
40517      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
40518  var data = enums_placements.reduce(function (acc, placement) {
40519    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
40520    return acc;
40521  }, {});
40522  var _data$state$placement = data[state.placement],
40523      x = _data$state$placement.x,
40524      y = _data$state$placement.y;
40525
40526  if (state.modifiersData.popperOffsets != null) {
40527    state.modifiersData.popperOffsets.x += x;
40528    state.modifiersData.popperOffsets.y += y;
40529  }
40530
40531  state.modifiersData[name] = data;
40532} // eslint-disable-next-line import/no-unused-modules
40533
40534
40535/* harmony default export */ const modifiers_offset = ({
40536  name: 'offset',
40537  enabled: true,
40538  phase: 'main',
40539  requires: ['popperOffsets'],
40540  fn: offset_offset
40541});
40542;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js
40543var getOppositePlacement_hash = {
40544  left: 'right',
40545  right: 'left',
40546  bottom: 'top',
40547  top: 'bottom'
40548};
40549function getOppositePlacement_getOppositePlacement(placement) {
40550  return placement.replace(/left|right|bottom|top/g, function (matched) {
40551    return getOppositePlacement_hash[matched];
40552  });
40553}
40554;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js
40555var getOppositeVariationPlacement_hash = {
40556  start: 'end',
40557  end: 'start'
40558};
40559function getOppositeVariationPlacement(placement) {
40560  return placement.replace(/start|end/g, function (matched) {
40561    return getOppositeVariationPlacement_hash[matched];
40562  });
40563}
40564;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js
40565
40566
40567
40568
40569function getViewportRect_getViewportRect(element, strategy) {
40570  var win = getWindow_getWindow(element);
40571  var html = getDocumentElement_getDocumentElement(element);
40572  var visualViewport = win.visualViewport;
40573  var width = html.clientWidth;
40574  var height = html.clientHeight;
40575  var x = 0;
40576  var y = 0;
40577
40578  if (visualViewport) {
40579    width = visualViewport.width;
40580    height = visualViewport.height;
40581    var layoutViewport = isLayoutViewport();
40582
40583    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
40584      x = visualViewport.offsetLeft;
40585      y = visualViewport.offsetTop;
40586    }
40587  }
40588
40589  return {
40590    width: width,
40591    height: height,
40592    x: x + getWindowScrollBarX_getWindowScrollBarX(element),
40593    y: y
40594  };
40595}
40596;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js
40597
40598
40599
40600
40601 // Gets the entire size of the scrollable document area, even extending outside
40602// of the `<html>` and `<body>` rect bounds if horizontally scrollable
40603
40604function getDocumentRect_getDocumentRect(element) {
40605  var _element$ownerDocumen;
40606
40607  var html = getDocumentElement_getDocumentElement(element);
40608  var winScroll = getWindowScroll(element);
40609  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
40610  var width = math_max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
40611  var height = math_max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
40612  var x = -winScroll.scrollLeft + getWindowScrollBarX_getWindowScrollBarX(element);
40613  var y = -winScroll.scrollTop;
40614
40615  if (getComputedStyle_getComputedStyle(body || html).direction === 'rtl') {
40616    x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width;
40617  }
40618
40619  return {
40620    width: width,
40621    height: height,
40622    x: x,
40623    y: y
40624  };
40625}
40626;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/contains.js
40627
40628function contains_contains(parent, child) {
40629  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
40630
40631  if (parent.contains(child)) {
40632    return true;
40633  } // then fallback to custom implementation with Shadow DOM support
40634  else if (rootNode && instanceOf_isShadowRoot(rootNode)) {
40635      var next = child;
40636
40637      do {
40638        if (next && parent.isSameNode(next)) {
40639          return true;
40640        } // $FlowFixMe[prop-missing]: need a better way to handle this...
40641
40642
40643        next = next.parentNode || next.host;
40644      } while (next);
40645    } // Give up, the result is false
40646
40647
40648  return false;
40649}
40650;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js
40651function rectToClientRect_rectToClientRect(rect) {
40652  return Object.assign({}, rect, {
40653    left: rect.x,
40654    top: rect.y,
40655    right: rect.x + rect.width,
40656    bottom: rect.y + rect.height
40657  });
40658}
40659;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js
40660
40661
40662
40663
40664
40665
40666
40667
40668
40669
40670
40671
40672
40673
40674
40675function getClippingRect_getInnerBoundingClientRect(element, strategy) {
40676  var rect = getBoundingClientRect_getBoundingClientRect(element, false, strategy === 'fixed');
40677  rect.top = rect.top + element.clientTop;
40678  rect.left = rect.left + element.clientLeft;
40679  rect.bottom = rect.top + element.clientHeight;
40680  rect.right = rect.left + element.clientWidth;
40681  rect.width = element.clientWidth;
40682  rect.height = element.clientHeight;
40683  rect.x = rect.left;
40684  rect.y = rect.top;
40685  return rect;
40686}
40687
40688function getClientRectFromMixedType(element, clippingParent, strategy) {
40689  return clippingParent === viewport ? rectToClientRect_rectToClientRect(getViewportRect_getViewportRect(element, strategy)) : instanceOf_isElement(clippingParent) ? getClippingRect_getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect_rectToClientRect(getDocumentRect_getDocumentRect(getDocumentElement_getDocumentElement(element)));
40690} // A "clipping parent" is an overflowable container with the characteristic of
40691// clipping (or hiding) overflowing elements with a position different from
40692// `initial`
40693
40694
40695function getClippingParents(element) {
40696  var clippingParents = listScrollParents(getParentNode_getParentNode(element));
40697  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle_getComputedStyle(element).position) >= 0;
40698  var clipperElement = canEscapeClipping && instanceOf_isHTMLElement(element) ? getOffsetParent_getOffsetParent(element) : element;
40699
40700  if (!instanceOf_isElement(clipperElement)) {
40701    return [];
40702  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
40703
40704
40705  return clippingParents.filter(function (clippingParent) {
40706    return instanceOf_isElement(clippingParent) && contains_contains(clippingParent, clipperElement) && getNodeName_getNodeName(clippingParent) !== 'body';
40707  });
40708} // Gets the maximum area that the element is visible in due to any number of
40709// clipping parents
40710
40711
40712function getClippingRect_getClippingRect(element, boundary, rootBoundary, strategy) {
40713  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
40714  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
40715  var firstClippingParent = clippingParents[0];
40716  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
40717    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
40718    accRect.top = math_max(rect.top, accRect.top);
40719    accRect.right = math_min(rect.right, accRect.right);
40720    accRect.bottom = math_min(rect.bottom, accRect.bottom);
40721    accRect.left = math_max(rect.left, accRect.left);
40722    return accRect;
40723  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
40724  clippingRect.width = clippingRect.right - clippingRect.left;
40725  clippingRect.height = clippingRect.bottom - clippingRect.top;
40726  clippingRect.x = clippingRect.left;
40727  clippingRect.y = clippingRect.top;
40728  return clippingRect;
40729}
40730;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js
40731function getFreshSideObject() {
40732  return {
40733    top: 0,
40734    right: 0,
40735    bottom: 0,
40736    left: 0
40737  };
40738}
40739;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js
40740
40741function mergePaddingObject(paddingObject) {
40742  return Object.assign({}, getFreshSideObject(), paddingObject);
40743}
40744;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js
40745function expandToHashMap(value, keys) {
40746  return keys.reduce(function (hashMap, key) {
40747    hashMap[key] = value;
40748    return hashMap;
40749  }, {});
40750}
40751;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/detectOverflow.js
40752
40753
40754
40755
40756
40757
40758
40759
40760 // eslint-disable-next-line import/no-unused-modules
40761
40762function detectOverflow_detectOverflow(state, options) {
40763  if (options === void 0) {
40764    options = {};
40765  }
40766
40767  var _options = options,
40768      _options$placement = _options.placement,
40769      placement = _options$placement === void 0 ? state.placement : _options$placement,
40770      _options$strategy = _options.strategy,
40771      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
40772      _options$boundary = _options.boundary,
40773      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
40774      _options$rootBoundary = _options.rootBoundary,
40775      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
40776      _options$elementConte = _options.elementContext,
40777      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
40778      _options$altBoundary = _options.altBoundary,
40779      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
40780      _options$padding = _options.padding,
40781      padding = _options$padding === void 0 ? 0 : _options$padding;
40782  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
40783  var altContext = elementContext === popper ? reference : popper;
40784  var popperRect = state.rects.popper;
40785  var element = state.elements[altBoundary ? altContext : elementContext];
40786  var clippingClientRect = getClippingRect_getClippingRect(instanceOf_isElement(element) ? element : element.contextElement || getDocumentElement_getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
40787  var referenceClientRect = getBoundingClientRect_getBoundingClientRect(state.elements.reference);
40788  var popperOffsets = computeOffsets({
40789    reference: referenceClientRect,
40790    element: popperRect,
40791    strategy: 'absolute',
40792    placement: placement
40793  });
40794  var popperClientRect = rectToClientRect_rectToClientRect(Object.assign({}, popperRect, popperOffsets));
40795  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
40796  // 0 or negative = within the clipping rect
40797
40798  var overflowOffsets = {
40799    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
40800    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
40801    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
40802    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
40803  };
40804  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
40805
40806  if (elementContext === popper && offsetData) {
40807    var offset = offsetData[placement];
vendor: 4,456 bytes, lines 40808-40929
40808    Object.keys(overflowOffsets).forEach(function (key) {
40809      var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
40810      var axis = [enums_top, bottom].indexOf(key) >= 0 ? 'y' : 'x';
40811      overflowOffsets[key] += offset[axis] * multiply;
40812    });
40813  }
40814
40815  return overflowOffsets;
40816}
40817;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js
40818
40819
40820
40821
40822function computeAutoPlacement(state, options) {
40823  if (options === void 0) {
40824    options = {};
40825  }
40826
40827  var _options = options,
40828      placement = _options.placement,
40829      boundary = _options.boundary,
40830      rootBoundary = _options.rootBoundary,
40831      padding = _options.padding,
40832      flipVariations = _options.flipVariations,
40833      _options$allowedAutoP = _options.allowedAutoPlacements,
40834      allowedAutoPlacements = _options$allowedAutoP === void 0 ? enums_placements : _options$allowedAutoP;
40835  var variation = getVariation(placement);
40836  var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
40837    return getVariation(placement) === variation;
40838  }) : basePlacements;
40839  var allowedPlacements = placements.filter(function (placement) {
40840    return allowedAutoPlacements.indexOf(placement) >= 0;
40841  });
40842
40843  if (allowedPlacements.length === 0) {
40844    allowedPlacements = placements;
40845
40846    if (false) {}
40847  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
40848
40849
40850  var overflows = allowedPlacements.reduce(function (acc, placement) {
40851    acc[placement] = detectOverflow_detectOverflow(state, {
40852      placement: placement,
40853      boundary: boundary,
40854      rootBoundary: rootBoundary,
40855      padding: padding
40856    })[getBasePlacement(placement)];
40857    return acc;
40858  }, {});
40859  return Object.keys(overflows).sort(function (a, b) {
40860    return overflows[a] - overflows[b];
40861  });
40862}
40863;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/flip.js
40864
40865
40866
40867
40868
40869
40870 // eslint-disable-next-line import/no-unused-modules
40871
40872function getExpandedFallbackPlacements(placement) {
40873  if (getBasePlacement(placement) === enums_auto) {
40874    return [];
40875  }
40876
40877  var oppositePlacement = getOppositePlacement_getOppositePlacement(placement);
40878  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
40879}
40880
40881function flip(_ref) {
40882  var state = _ref.state,
40883      options = _ref.options,
40884      name = _ref.name;
40885
40886  if (state.modifiersData[name]._skip) {
40887    return;
40888  }
40889
40890  var _options$mainAxis = options.mainAxis,
40891      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
40892      _options$altAxis = options.altAxis,
40893      checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
40894      specifiedFallbackPlacements = options.fallbackPlacements,
40895      padding = options.padding,
40896      boundary = options.boundary,
40897      rootBoundary = options.rootBoundary,
40898      altBoundary = options.altBoundary,
40899      _options$flipVariatio = options.flipVariations,
40900      flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
40901      allowedAutoPlacements = options.allowedAutoPlacements;
40902  var preferredPlacement = state.options.placement;
40903  var basePlacement = getBasePlacement(preferredPlacement);
40904  var isBasePlacement = basePlacement === preferredPlacement;
40905  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement_getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
40906  var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
40907    return acc.concat(getBasePlacement(placement) === enums_auto ? computeAutoPlacement(state, {
40908      placement: placement,
40909      boundary: boundary,
40910      rootBoundary: rootBoundary,
40911      padding: padding,
40912      flipVariations: flipVariations,
40913      allowedAutoPlacements: allowedAutoPlacements
40914    }) : placement);
40915  }, []);
40916  var referenceRect = state.rects.reference;
40917  var popperRect = state.rects.popper;
40918  var checksMap = new Map();
40919  var makeFallbackChecks = true;
40920  var firstFittingPlacement = placements[0];
40921
40922  for (var i = 0; i < placements.length; i++) {
40923    var placement = placements[i];
40924
40925    var _basePlacement = getBasePlacement(placement);
40926
40927    var isStartVariation = getVariation(placement) === start;
40928    var isVertical = [enums_top, bottom].indexOf(_basePlacement) >= 0;
40929    var len = isVertical ? 'width' : 'height';
vendor: 9,567 bytes, lines 40930-41202
40930    var overflow = detectOverflow_detectOverflow(state, {
40931      placement: placement,
40932      boundary: boundary,
40933      rootBoundary: rootBoundary,
40934      altBoundary: altBoundary,
40935      padding: padding
40936    });
40937    var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : enums_top;
40938
40939    if (referenceRect[len] > popperRect[len]) {
40940      mainVariationSide = getOppositePlacement_getOppositePlacement(mainVariationSide);
40941    }
40942
40943    var altVariationSide = getOppositePlacement_getOppositePlacement(mainVariationSide);
40944    var checks = [];
40945
40946    if (checkMainAxis) {
40947      checks.push(overflow[_basePlacement] <= 0);
40948    }
40949
40950    if (checkAltAxis) {
40951      checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
40952    }
40953
40954    if (checks.every(function (check) {
40955      return check;
40956    })) {
40957      firstFittingPlacement = placement;
40958      makeFallbackChecks = false;
40959      break;
40960    }
40961
40962    checksMap.set(placement, checks);
40963  }
40964
40965  if (makeFallbackChecks) {
40966    // `2` may be desired in some cases – research later
40967    var numberOfChecks = flipVariations ? 3 : 1;
40968
40969    var _loop = function _loop(_i) {
40970      var fittingPlacement = placements.find(function (placement) {
40971        var checks = checksMap.get(placement);
40972
40973        if (checks) {
40974          return checks.slice(0, _i).every(function (check) {
40975            return check;
40976          });
40977        }
40978      });
40979
40980      if (fittingPlacement) {
40981        firstFittingPlacement = fittingPlacement;
40982        return "break";
40983      }
40984    };
40985
40986    for (var _i = numberOfChecks; _i > 0; _i--) {
40987      var _ret = _loop(_i);
40988
40989      if (_ret === "break") break;
40990    }
40991  }
40992
40993  if (state.placement !== firstFittingPlacement) {
40994    state.modifiersData[name]._skip = true;
40995    state.placement = firstFittingPlacement;
40996    state.reset = true;
40997  }
40998} // eslint-disable-next-line import/no-unused-modules
40999
41000
41001/* harmony default export */ const modifiers_flip = ({
41002  name: 'flip',
41003  enabled: true,
41004  phase: 'main',
41005  fn: flip,
41006  requiresIfExists: ['offset'],
41007  data: {
41008    _skip: false
41009  }
41010});
41011;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getAltAxis.js
41012function getAltAxis(axis) {
41013  return axis === 'x' ? 'y' : 'x';
41014}
41015;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/within.js
41016
41017function within(min, value, max) {
41018  return math_max(min, math_min(value, max));
41019}
41020function withinMaxClamp(min, value, max) {
41021  var v = within(min, value, max);
41022  return v > max ? max : v;
41023}
41024;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js
41025
41026
41027
41028
41029
41030
41031
41032
41033
41034
41035
41036
41037function preventOverflow(_ref) {
41038  var state = _ref.state,
41039      options = _ref.options,
41040      name = _ref.name;
41041  var _options$mainAxis = options.mainAxis,
41042      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
41043      _options$altAxis = options.altAxis,
41044      checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
41045      boundary = options.boundary,
41046      rootBoundary = options.rootBoundary,
41047      altBoundary = options.altBoundary,
41048      padding = options.padding,
41049      _options$tether = options.tether,
41050      tether = _options$tether === void 0 ? true : _options$tether,
41051      _options$tetherOffset = options.tetherOffset,
41052      tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
41053  var overflow = detectOverflow_detectOverflow(state, {
41054    boundary: boundary,
41055    rootBoundary: rootBoundary,
41056    padding: padding,
41057    altBoundary: altBoundary
41058  });
41059  var basePlacement = getBasePlacement(state.placement);
41060  var variation = getVariation(state.placement);
41061  var isBasePlacement = !variation;
41062  var mainAxis = getMainAxisFromPlacement(basePlacement);
41063  var altAxis = getAltAxis(mainAxis);
41064  var popperOffsets = state.modifiersData.popperOffsets;
41065  var referenceRect = state.rects.reference;
41066  var popperRect = state.rects.popper;
41067  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
41068    placement: state.placement
41069  })) : tetherOffset;
41070  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
41071    mainAxis: tetherOffsetValue,
41072    altAxis: tetherOffsetValue
41073  } : Object.assign({
41074    mainAxis: 0,
41075    altAxis: 0
41076  }, tetherOffsetValue);
41077  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
41078  var data = {
41079    x: 0,
41080    y: 0
41081  };
41082
41083  if (!popperOffsets) {
41084    return;
41085  }
41086
41087  if (checkMainAxis) {
41088    var _offsetModifierState$;
41089
41090    var mainSide = mainAxis === 'y' ? enums_top : left;
41091    var altSide = mainAxis === 'y' ? bottom : right;
41092    var len = mainAxis === 'y' ? 'height' : 'width';
41093    var offset = popperOffsets[mainAxis];
41094    var min = offset + overflow[mainSide];
41095    var max = offset - overflow[altSide];
41096    var additive = tether ? -popperRect[len] / 2 : 0;
41097    var minLen = variation === start ? referenceRect[len] : popperRect[len];
41098    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
41099    // outside the reference bounds
41100
41101    var arrowElement = state.elements.arrow;
41102    var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
41103      width: 0,
41104      height: 0
41105    };
41106    var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
41107    var arrowPaddingMin = arrowPaddingObject[mainSide];
41108    var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
41109    // to include its full size in the calculation. If the reference is small
41110    // and near the edge of a boundary, the popper can overflow even if the
41111    // reference is not overflowing as well (e.g. virtual elements with no
41112    // width or height)
41113
41114    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
41115    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
41116    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
41117    var arrowOffsetParent = state.elements.arrow && getOffsetParent_getOffsetParent(state.elements.arrow);
41118    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
41119    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
41120    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
41121    var tetherMax = offset + maxOffset - offsetModifierValue;
41122    var preventedOffset = within(tether ? math_min(min, tetherMin) : min, offset, tether ? math_max(max, tetherMax) : max);
41123    popperOffsets[mainAxis] = preventedOffset;
41124    data[mainAxis] = preventedOffset - offset;
41125  }
41126
41127  if (checkAltAxis) {
41128    var _offsetModifierState$2;
41129
41130    var _mainSide = mainAxis === 'x' ? enums_top : left;
41131
41132    var _altSide = mainAxis === 'x' ? bottom : right;
41133
41134    var _offset = popperOffsets[altAxis];
41135
41136    var _len = altAxis === 'y' ? 'height' : 'width';
41137
41138    var _min = _offset + overflow[_mainSide];
41139
41140    var _max = _offset - overflow[_altSide];
41141
41142    var isOriginSide = [enums_top, left].indexOf(basePlacement) !== -1;
41143
41144    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
41145
41146    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
41147
41148    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
41149
41150    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
41151
41152    popperOffsets[altAxis] = _preventedOffset;
41153    data[altAxis] = _preventedOffset - _offset;
41154  }
41155
41156  state.modifiersData[name] = data;
41157} // eslint-disable-next-line import/no-unused-modules
41158
41159
41160/* harmony default export */ const modifiers_preventOverflow = ({
41161  name: 'preventOverflow',
41162  enabled: true,
41163  phase: 'main',
41164  fn: preventOverflow,
41165  requiresIfExists: ['offset']
41166});
41167;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/arrow.js
41168
41169
41170
41171
41172
41173
41174
41175
41176
41177 // eslint-disable-next-line import/no-unused-modules
41178
41179var toPaddingObject = function toPaddingObject(padding, state) {
41180  padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
41181    placement: state.placement
41182  })) : padding;
41183  return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
41184};
41185
41186function arrow_arrow(_ref) {
41187  var _state$modifiersData$;
41188
41189  var state = _ref.state,
41190      name = _ref.name,
41191      options = _ref.options;
41192  var arrowElement = state.elements.arrow;
41193  var popperOffsets = state.modifiersData.popperOffsets;
41194  var basePlacement = getBasePlacement(state.placement);
41195  var axis = getMainAxisFromPlacement(basePlacement);
41196  var isVertical = [left, right].indexOf(basePlacement) >= 0;
41197  var len = isVertical ? 'height' : 'width';
41198
41199  if (!arrowElement || !popperOffsets) {
41200    return;
41201  }
41202
vendor: 4,915 bytes, lines 41203-41357
41203  var paddingObject = toPaddingObject(options.padding, state);
41204  var arrowRect = getLayoutRect(arrowElement);
41205  var minProp = axis === 'y' ? enums_top : left;
41206  var maxProp = axis === 'y' ? bottom : right;
41207  var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
41208  var startDiff = popperOffsets[axis] - state.rects.reference[axis];
41209  var arrowOffsetParent = getOffsetParent_getOffsetParent(arrowElement);
41210  var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
41211  var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
41212  // outside of the popper bounds
41213
41214  var min = paddingObject[minProp];
41215  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
41216  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
41217  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
41218
41219  var axisProp = axis;
41220  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
41221}
41222
41223function arrow_effect(_ref2) {
41224  var state = _ref2.state,
41225      options = _ref2.options;
41226  var _options$element = options.element,
41227      arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
41228
41229  if (arrowElement == null) {
41230    return;
41231  } // CSS selector
41232
41233
41234  if (typeof arrowElement === 'string') {
41235    arrowElement = state.elements.popper.querySelector(arrowElement);
41236
41237    if (!arrowElement) {
41238      return;
41239    }
41240  }
41241
41242  if (false) {}
41243
41244  if (!contains_contains(state.elements.popper, arrowElement)) {
41245    if (false) {}
41246
41247    return;
41248  }
41249
41250  state.elements.arrow = arrowElement;
41251} // eslint-disable-next-line import/no-unused-modules
41252
41253
41254/* harmony default export */ const modifiers_arrow = ({
41255  name: 'arrow',
41256  enabled: true,
41257  phase: 'main',
41258  fn: arrow_arrow,
41259  effect: arrow_effect,
41260  requires: ['popperOffsets'],
41261  requiresIfExists: ['preventOverflow']
41262});
41263;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/hide.js
41264
41265
41266
41267function hide_getSideOffsets(overflow, rect, preventedOffsets) {
41268  if (preventedOffsets === void 0) {
41269    preventedOffsets = {
41270      x: 0,
41271      y: 0
41272    };
41273  }
41274
41275  return {
41276    top: overflow.top - rect.height - preventedOffsets.y,
41277    right: overflow.right - rect.width + preventedOffsets.x,
41278    bottom: overflow.bottom - rect.height + preventedOffsets.y,
41279    left: overflow.left - rect.width - preventedOffsets.x
41280  };
41281}
41282
41283function hide_isAnySideFullyClipped(overflow) {
41284  return [enums_top, right, bottom, left].some(function (side) {
41285    return overflow[side] >= 0;
41286  });
41287}
41288
41289function hide_hide(_ref) {
41290  var state = _ref.state,
41291      name = _ref.name;
41292  var referenceRect = state.rects.reference;
41293  var popperRect = state.rects.popper;
41294  var preventedOffsets = state.modifiersData.preventOverflow;
41295  var referenceOverflow = detectOverflow_detectOverflow(state, {
41296    elementContext: 'reference'
41297  });
41298  var popperAltOverflow = detectOverflow_detectOverflow(state, {
41299    altBoundary: true
41300  });
41301  var referenceClippingOffsets = hide_getSideOffsets(referenceOverflow, referenceRect);
41302  var popperEscapeOffsets = hide_getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
41303  var isReferenceHidden = hide_isAnySideFullyClipped(referenceClippingOffsets);
41304  var hasPopperEscaped = hide_isAnySideFullyClipped(popperEscapeOffsets);
41305  state.modifiersData[name] = {
41306    referenceClippingOffsets: referenceClippingOffsets,
41307    popperEscapeOffsets: popperEscapeOffsets,
41308    isReferenceHidden: isReferenceHidden,
41309    hasPopperEscaped: hasPopperEscaped
41310  };
41311  state.attributes.popper = Object.assign({}, state.attributes.popper, {
41312    'data-popper-reference-hidden': isReferenceHidden,
41313    'data-popper-escaped': hasPopperEscaped
41314  });
41315} // eslint-disable-next-line import/no-unused-modules
41316
41317
41318/* harmony default export */ const modifiers_hide = ({
41319  name: 'hide',
41320  enabled: true,
41321  phase: 'main',
41322  requiresIfExists: ['preventOverflow'],
41323  fn: hide_hide
41324});
41325;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js
41326
41327
41328
41329
41330
41331
41332
41333
41334
41335
41336var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide];
41337var popper_createPopper = /*#__PURE__*/popperGenerator({
41338  defaultModifiers: defaultModifiers
41339}); // eslint-disable-next-line import/no-unused-modules
41340
41341 // eslint-disable-next-line import/no-unused-modules
41342
41343 // eslint-disable-next-line import/no-unused-modules
41344
41345
41346;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureState.js
41347
41348
41349
41350
41351
41352
41353
41354
41355function useLastValue(value) {
41356  var lastValue = (0,external_React_.useRef)(null);
41357  useIsomorphicEffect(function () {
41358    lastValue.current = value;
41359  }, [value]);
41360  return lastValue;
41361}
41362
41363function useDisclosureState(initialState) {
41364  if (initialState === void 0) {
41365    initialState = {};
41366  }
41367
41368  var _useSealedState = useSealedState(initialState),
41369      _useSealedState$visib = _useSealedState.visible,
41370      initialVisible = _useSealedState$visib === void 0 ? false : _useSealedState$visib,
41371      _useSealedState$anima = _useSealedState.animated,
41372      initialAnimated = _useSealedState$anima === void 0 ? false : _useSealedState$anima,
41373      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["visible", "animated"]);
41374
41375  var id = unstable_useIdState(sealed);
41376
41377  var _React$useState = (0,external_React_.useState)(initialVisible),
41378      visible = _React$useState[0],
41379      setVisible = _React$useState[1];
41380
41381  var _React$useState2 = (0,external_React_.useState)(initialAnimated),
41382      animated = _React$useState2[0],
41383      setAnimated = _React$useState2[1];
41384
41385  var _React$useState3 = (0,external_React_.useState)(false),
41386      animating = _React$useState3[0],
41387      setAnimating = _React$useState3[1];
41388
41389  var lastVisible = useLastValue(visible);
41390  var visibleHasChanged = lastVisible.current != null && lastVisible.current !== visible;
41391
41392  if (animated && !animating && visibleHasChanged) {
41393    // Sets animating to true when when visible is updated
41394    setAnimating(true);
41395  }
41396
41397  (0,external_React_.useEffect)(function () {
41398    if (typeof animated === "number" && animating) {
41399      var timeout = setTimeout(function () {
41400        return setAnimating(false);
41401      }, animated);
41402      return function () {
41403        clearTimeout(timeout);
41404      };
41405    }
41406
41407    if (animated && animating && "production" === "development") { var _timeout; }
41408
41409    return function () {};
41410  }, [animated, animating]);
41411  var show = (0,external_React_.useCallback)(function () {
41412    return setVisible(true);
41413  }, []);
41414  var hide = (0,external_React_.useCallback)(function () {
41415    return setVisible(false);
41416  }, []);
41417  var toggle = (0,external_React_.useCallback)(function () {
41418    return setVisible(function (v) {
41419      return !v;
41420    });
41421  }, []);
41422  var stopAnimation = (0,external_React_.useCallback)(function () {
41423    return setAnimating(false);
41424  }, []);
41425  return _objectSpread2(_objectSpread2({}, id), {}, {
41426    visible: visible,
41427    animated: animated,
41428    animating: animating,
41429    show: show,
41430    hide: hide,
41431    toggle: toggle,
41432    setVisible: setVisible,
41433    setAnimated: setAnimated,
41434    stopAnimation: stopAnimation
41435  });
41436}
41437
41438
41439
41440;// CONCATENATED MODULE: ./node_modules/reakit/es/Dialog/DialogState.js
41441
41442
41443
41444
41445
41446
41447
41448
41449
41450function useDialogState(initialState) {
41451  if (initialState === void 0) {
41452    initialState = {};
41453  }
41454
41455  var _useSealedState = useSealedState(initialState),
41456      _useSealedState$modal = _useSealedState.modal,
41457      initialModal = _useSealedState$modal === void 0 ? true : _useSealedState$modal,
41458      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["modal"]);
41459
41460  var disclosure = useDisclosureState(sealed);
41461
41462  var _React$useState = (0,external_React_.useState)(initialModal),
41463      modal = _React$useState[0],
41464      setModal = _React$useState[1];
41465
41466  var disclosureRef = (0,external_React_.useRef)(null);
41467  return _objectSpread2(_objectSpread2({}, disclosure), {}, {
41468    modal: modal,
41469    setModal: setModal,
41470    unstable_disclosureRef: disclosureRef
41471  });
41472}
41473
41474
41475
41476;// CONCATENATED MODULE: ./node_modules/reakit/es/Popover/PopoverState.js
41477
41478
41479
41480
41481
41482
41483
41484
41485
41486
41487
41488
41489
41490var PopoverState_isSafari = isUA("Mac") && !isUA("Chrome") && isUA("Safari");
41491
41492function PopoverState_applyStyles(styles) {
41493  return function (prevStyles) {
41494    if (styles && !shallowEqual(prevStyles, styles)) {
41495      return styles;
41496    }
41497
41498    return prevStyles;
41499  };
41500}
41501
41502function usePopoverState(initialState) {
41503  if (initialState === void 0) {
41504    initialState = {};
41505  }
41506
41507  var _useSealedState = useSealedState(initialState),
41508      _useSealedState$gutte = _useSealedState.gutter,
41509      gutter = _useSealedState$gutte === void 0 ? 12 : _useSealedState$gutte,
41510      _useSealedState$place = _useSealedState.placement,
41511      sealedPlacement = _useSealedState$place === void 0 ? "bottom" : _useSealedState$place,
41512      _useSealedState$unsta = _useSealedState.unstable_flip,
41513      flip = _useSealedState$unsta === void 0 ? true : _useSealedState$unsta,
41514      sealedOffset = _useSealedState.unstable_offset,
41515      _useSealedState$unsta2 = _useSealedState.unstable_preventOverflow,
41516      preventOverflow = _useSealedState$unsta2 === void 0 ? true : _useSealedState$unsta2,
41517      _useSealedState$unsta3 = _useSealedState.unstable_fixed,
41518      fixed = _useSealedState$unsta3 === void 0 ? false : _useSealedState$unsta3,
41519      _useSealedState$modal = _useSealedState.modal,
41520      modal = _useSealedState$modal === void 0 ? false : _useSealedState$modal,
41521      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["gutter", "placement", "unstable_flip", "unstable_offset", "unstable_preventOverflow", "unstable_fixed", "modal"]);
41522
41523  var popper = (0,external_React_.useRef)(null);
41524  var referenceRef = (0,external_React_.useRef)(null);
41525  var popoverRef = (0,external_React_.useRef)(null);
41526  var arrowRef = (0,external_React_.useRef)(null);
41527
41528  var _React$useState = (0,external_React_.useState)(sealedPlacement),
41529      originalPlacement = _React$useState[0],
41530      place = _React$useState[1];
41531
41532  var _React$useState2 = (0,external_React_.useState)(sealedPlacement),
41533      placement = _React$useState2[0],
41534      setPlacement = _React$useState2[1];
41535
41536  var _React$useState3 = (0,external_React_.useState)(sealedOffset || [0, gutter]),
41537      offset = _React$useState3[0];
41538
41539  var _React$useState4 = (0,external_React_.useState)({
41540    position: "fixed",
41541    left: "100%",
41542    top: "100%"
41543  }),
41544      popoverStyles = _React$useState4[0],
41545      setPopoverStyles = _React$useState4[1];
41546
41547  var _React$useState5 = (0,external_React_.useState)({}),
41548      arrowStyles = _React$useState5[0],
41549      setArrowStyles = _React$useState5[1];
41550
41551  var dialog = useDialogState(_objectSpread2({
41552    modal: modal
41553  }, sealed));
41554  var update = (0,external_React_.useCallback)(function () {
41555    if (popper.current) {
41556      popper.current.forceUpdate();
41557      return true;
41558    }
41559
41560    return false;
41561  }, []);
41562  var updateState = (0,external_React_.useCallback)(function (state) {
41563    if (state.placement) {
41564      setPlacement(state.placement);
41565    }
41566
41567    if (state.styles) {
41568      setPopoverStyles(PopoverState_applyStyles(state.styles.popper));
41569
41570      if (arrowRef.current) {
41571        setArrowStyles(PopoverState_applyStyles(state.styles.arrow));
41572      }
41573    }
41574  }, []);
41575  useIsomorphicEffect(function () {
41576    if (referenceRef.current && popoverRef.current) {
41577      popper.current = popper_createPopper(referenceRef.current, popoverRef.current, {
41578        // https://popper.js.org/docs/v2/constructors/#options
41579        placement: originalPlacement,
41580        strategy: fixed ? "fixed" : "absolute",
41581        // Safari needs styles to be applied in the first render, otherwise
41582        // hovering over the popover when it gets visible for the first time
41583        // will change its dimensions unexpectedly.
41584        onFirstUpdate: PopoverState_isSafari ? updateState : undefined,
41585        modifiers: [{
41586          // https://popper.js.org/docs/v2/modifiers/event-listeners/
41587          name: "eventListeners",
41588          enabled: dialog.visible
41589        }, {
41590          // https://popper.js.org/docs/v2/modifiers/apply-styles/
41591          name: "applyStyles",
41592          enabled: false
41593        }, {
41594          // https://popper.js.org/docs/v2/modifiers/flip/
41595          name: "flip",
41596          enabled: flip,
41597          options: {
41598            padding: 8
41599          }
41600        }, {
41601          // https://popper.js.org/docs/v2/modifiers/offset/
41602          name: "offset",
41603          options: {
41604            offset: offset
41605          }
41606        }, {
41607          // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
41608          name: "preventOverflow",
41609          enabled: preventOverflow,
41610          options: {
41611            tetherOffset: function tetherOffset() {
41612              var _arrowRef$current;
41613
41614              return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0;
41615            }
41616          }
41617        }, {
41618          // https://popper.js.org/docs/v2/modifiers/arrow/
41619          name: "arrow",
41620          enabled: !!arrowRef.current,
41621          options: {
41622            element: arrowRef.current
41623          }
41624        }, {
41625          // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
41626          name: "updateState",
41627          phase: "write",
41628          requires: ["computeStyles"],
41629          enabled: dialog.visible && "production" !== "test",
41630          fn: function fn(_ref) {
41631            var state = _ref.state;
41632            return updateState(state);
41633          }
41634        }]
41635      });
41636    }
41637
41638    return function () {
41639      if (popper.current) {
41640        popper.current.destroy();
41641        popper.current = null;
41642      }
41643    };
41644  }, [originalPlacement, fixed, dialog.visible, flip, offset, preventOverflow]); // Ensure that the popover will be correctly positioned with an additional
41645  // update.
41646
41647  (0,external_React_.useEffect)(function () {
41648    if (!dialog.visible) return undefined;
41649    var id = window.requestAnimationFrame(function () {
41650      var _popper$current;
41651
41652      (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate();
41653    });
41654    return function () {
41655      window.cancelAnimationFrame(id);
41656    };
41657  }, [dialog.visible]);
41658  return _objectSpread2(_objectSpread2({}, dialog), {}, {
41659    unstable_referenceRef: referenceRef,
41660    unstable_popoverRef: popoverRef,
41661    unstable_arrowRef: arrowRef,
41662    unstable_popoverStyles: popoverStyles,
41663    unstable_arrowStyles: arrowStyles,
41664    unstable_update: update,
41665    unstable_originalPlacement: originalPlacement,
41666    placement: placement,
41667    place: place
41668  });
41669}
41670
41671
41672
41673;// CONCATENATED MODULE: ./node_modules/reakit/es/__globalState-300469f0.js
41674var globalState = {
41675  currentTooltipId: null,
41676  listeners: new Set(),
41677  subscribe: function subscribe(listener) {
41678    var _this = this;
41679
41680    this.listeners.add(listener);
41681    return function () {
41682      _this.listeners.delete(listener);
41683    };
41684  },
41685  show: function show(id) {
41686    this.currentTooltipId = id;
41687    this.listeners.forEach(function (listener) {
41688      return listener(id);
41689    });
41690  },
41691  hide: function hide(id) {
41692    if (this.currentTooltipId === id) {
41693      this.currentTooltipId = null;
41694      this.listeners.forEach(function (listener) {
41695        return listener(null);
41696      });
41697    }
41698  }
41699};
41700
41701
41702
41703;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipState.js
41704
41705
41706
41707
41708
41709
41710
41711
41712
41713
41714
41715
41716
41717
41718
41719function useTooltipState(initialState) {
41720  if (initialState === void 0) {
41721    initialState = {};
41722  }
41723
41724  var _useSealedState = useSealedState(initialState),
41725      _useSealedState$place = _useSealedState.placement,
41726      placement = _useSealedState$place === void 0 ? "top" : _useSealedState$place,
41727      _useSealedState$unsta = _useSealedState.unstable_timeout,
41728      initialTimeout = _useSealedState$unsta === void 0 ? 0 : _useSealedState$unsta,
41729      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["placement", "unstable_timeout"]);
41730
41731  var _React$useState = (0,external_React_.useState)(initialTimeout),
41732      timeout = _React$useState[0],
41733      setTimeout = _React$useState[1];
41734
41735  var showTimeout = (0,external_React_.useRef)(null);
41736  var hideTimeout = (0,external_React_.useRef)(null);
41737
41738  var _usePopoverState = usePopoverState(_objectSpread2(_objectSpread2({}, sealed), {}, {
41739    placement: placement
41740  })),
41741      modal = _usePopoverState.modal,
41742      setModal = _usePopoverState.setModal,
41743      popover = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_usePopoverState, ["modal", "setModal"]);
41744
41745  var clearTimeouts = (0,external_React_.useCallback)(function () {
41746    if (showTimeout.current !== null) {
41747      window.clearTimeout(showTimeout.current);
41748    }
41749
41750    if (hideTimeout.current !== null) {
41751      window.clearTimeout(hideTimeout.current);
41752    }
41753  }, []);
41754  var hide = (0,external_React_.useCallback)(function () {
41755    clearTimeouts();
41756    popover.hide(); // Let's give some time so people can move from a reference to another
41757    // and still show tooltips immediately
41758
41759    hideTimeout.current = window.setTimeout(function () {
41760      globalState.hide(popover.baseId);
41761    }, timeout);
41762  }, [clearTimeouts, popover.hide, timeout, popover.baseId]);
41763  var show = (0,external_React_.useCallback)(function () {
41764    clearTimeouts();
41765
41766    if (!timeout || globalState.currentTooltipId) {
41767      // If there's no timeout or a tooltip visible already, we can show this
41768      // immediately
41769      globalState.show(popover.baseId);
41770      popover.show();
41771    } else {
41772      // There may be a reference with focus whose tooltip is still not visible
41773      // In this case, we want to update it before it gets shown.
41774      globalState.show(null); // Otherwise, wait a little bit to show the tooltip
41775
41776      showTimeout.current = window.setTimeout(function () {
41777        globalState.show(popover.baseId);
41778        popover.show();
41779      }, timeout);
41780    }
41781  }, [clearTimeouts, timeout, popover.show, popover.baseId]);
41782  (0,external_React_.useEffect)(function () {
41783    return globalState.subscribe(function (id) {
41784      if (id !== popover.baseId) {
41785        clearTimeouts();
41786
41787        if (popover.visible) {
41788          // Make sure there will be only one tooltip visible
41789          popover.hide();
41790        }
41791      }
41792    });
41793  }, [popover.baseId, clearTimeouts, popover.visible, popover.hide]);
41794  (0,external_React_.useEffect)(function () {
41795    return function () {
41796      clearTimeouts();
41797      globalState.hide(popover.baseId);
41798    };
41799  }, [clearTimeouts, popover.baseId]);
41800  return _objectSpread2(_objectSpread2({}, popover), {}, {
41801    hide: hide,
41802    show: show,
41803    unstable_timeout: timeout,
41804    unstable_setTimeout: setTimeout
41805  });
41806}
41807
41808
41809
41810;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d101cb3b.js
41811// Automatically generated
41812var TOOLTIP_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation", "unstable_disclosureRef", "unstable_referenceRef", "unstable_popoverRef", "unstable_arrowRef", "unstable_popoverStyles", "unstable_arrowStyles", "unstable_originalPlacement", "unstable_update", "placement", "place", "unstable_timeout", "unstable_setTimeout"];
41813var TOOLTIP_KEYS = [].concat(TOOLTIP_STATE_KEYS, ["unstable_portal"]);
41814var TOOLTIP_ARROW_KEYS = TOOLTIP_STATE_KEYS;
41815var TOOLTIP_REFERENCE_KEYS = TOOLTIP_ARROW_KEYS;
41816
41817
41818
41819;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipReference.js
41820
41821
41822
41823
41824
41825
41826
41827
41828
41829
41830var useTooltipReference = createHook({
41831  name: "TooltipReference",
41832  compose: useRole,
41833  keys: TOOLTIP_REFERENCE_KEYS,
41834  useProps: function useProps(options, _ref) {
41835    var htmlRef = _ref.ref,
41836        htmlOnFocus = _ref.onFocus,
41837        htmlOnBlur = _ref.onBlur,
41838        htmlOnMouseEnter = _ref.onMouseEnter,
41839        htmlOnMouseLeave = _ref.onMouseLeave,
41840        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"]);
41841
41842    var onFocusRef = useLiveRef(htmlOnFocus);
41843    var onBlurRef = useLiveRef(htmlOnBlur);
41844    var onMouseEnterRef = useLiveRef(htmlOnMouseEnter);
41845    var onMouseLeaveRef = useLiveRef(htmlOnMouseLeave);
41846    var onFocus = (0,external_React_.useCallback)(function (event) {
41847      var _onFocusRef$current, _options$show;
41848
41849      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
41850      if (event.defaultPrevented) return;
41851      (_options$show = options.show) === null || _options$show === void 0 ? void 0 : _options$show.call(options);
41852    }, [options.show]);
41853    var onBlur = (0,external_React_.useCallback)(function (event) {
41854      var _onBlurRef$current, _options$hide;
41855
41856      (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 ? void 0 : _onBlurRef$current.call(onBlurRef, event);
41857      if (event.defaultPrevented) return;
41858      (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options);
41859    }, [options.hide]);
41860    var onMouseEnter = (0,external_React_.useCallback)(function (event) {
41861      var _onMouseEnterRef$curr, _options$show2;
41862
41863      (_onMouseEnterRef$curr = onMouseEnterRef.current) === null || _onMouseEnterRef$curr === void 0 ? void 0 : _onMouseEnterRef$curr.call(onMouseEnterRef, event);
41864      if (event.defaultPrevented) return;
41865      (_options$show2 = options.show) === null || _options$show2 === void 0 ? void 0 : _options$show2.call(options);
41866    }, [options.show]);
41867    var onMouseLeave = (0,external_React_.useCallback)(function (event) {
41868      var _onMouseLeaveRef$curr, _options$hide2;
41869
41870      (_onMouseLeaveRef$curr = onMouseLeaveRef.current) === null || _onMouseLeaveRef$curr === void 0 ? void 0 : _onMouseLeaveRef$curr.call(onMouseLeaveRef, event);
41871      if (event.defaultPrevented) return;
41872      (_options$hide2 = options.hide) === null || _options$hide2 === void 0 ? void 0 : _options$hide2.call(options);
41873    }, [options.hide]);
41874    return _objectSpread2({
41875      ref: useForkRef(options.unstable_referenceRef, htmlRef),
41876      tabIndex: 0,
41877      onFocus: onFocus,
41878      onBlur: onBlur,
41879      onMouseEnter: onMouseEnter,
41880      onMouseLeave: onMouseLeave,
41881      "aria-describedby": options.baseId
41882    }, htmlProps);
41883  }
41884});
41885var TooltipReference = createComponent({
41886  as: "div",
41887  useHook: useTooltipReference
41888});
41889
41890
41891
41892;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/context.js
41893/**
41894 * WordPress dependencies
41895 */
41896
41897
41898/**
41899 * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}
41900 */
41901const context_TooltipContext = (0,external_wp_element_namespaceObject.createContext)({});
41902const useTooltipContext = () => (0,external_wp_element_namespaceObject.useContext)(context_TooltipContext);
41903
41904;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-e6a5cfbe.js
41905// Automatically generated
41906var DISCLOSURE_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation"];
41907var DISCLOSURE_KEYS = DISCLOSURE_STATE_KEYS;
41908var DISCLOSURE_CONTENT_KEYS = DISCLOSURE_KEYS;
41909
41910
41911
41912;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureContent.js
41913
41914
41915
41916
41917
41918
41919
41920
41921
41922
41923var DisclosureContent_useDisclosureContent = createHook({
41924  name: "DisclosureContent",
41925  compose: useRole,
41926  keys: DISCLOSURE_CONTENT_KEYS,
41927  useProps: function useProps(options, _ref) {
41928    var htmlOnTransitionEnd = _ref.onTransitionEnd,
41929        htmlOnAnimationEnd = _ref.onAnimationEnd,
41930        htmlStyle = _ref.style,
41931        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["onTransitionEnd", "onAnimationEnd", "style"]);
41932
41933    var animating = options.animated && options.animating;
41934
41935    var _React$useState = (0,external_React_.useState)(null),
41936        transition = _React$useState[0],
41937        setTransition = _React$useState[1];
41938
41939    var hidden = !options.visible && !animating;
41940    var style = hidden ? _objectSpread2({
41941      display: "none"
41942    }, htmlStyle) : htmlStyle;
41943    var onTransitionEndRef = useLiveRef(htmlOnTransitionEnd);
41944    var onAnimationEndRef = useLiveRef(htmlOnAnimationEnd);
41945    var raf = (0,external_React_.useRef)(0);
41946    (0,external_React_.useEffect)(function () {
41947      if (!options.animated) return undefined; // Double RAF is needed so the browser has enough time to paint the
41948      // default styles before processing the `data-enter` attribute. Otherwise
41949      // it wouldn't be considered a transition.
41950      // See https://github.com/reakit/reakit/issues/643
41951
41952      raf.current = window.requestAnimationFrame(function () {
41953        raf.current = window.requestAnimationFrame(function () {
41954          if (options.visible) {
41955            setTransition("enter");
41956          } else if (animating) {
41957            setTransition("leave");
41958          } else {
41959            setTransition(null);
41960          }
41961        });
41962      });
41963      return function () {
41964        return window.cancelAnimationFrame(raf.current);
41965      };
41966    }, [options.animated, options.visible, animating]);
41967    var onEnd = (0,external_React_.useCallback)(function (event) {
41968      if (!isSelfTarget(event)) return;
41969      if (!animating) return; // Ignores number animated
41970
41971      if (options.animated === true) {
41972        var _options$stopAnimatio;
41973
41974        (_options$stopAnimatio = options.stopAnimation) === null || _options$stopAnimatio === void 0 ? void 0 : _options$stopAnimatio.call(options);
41975      }
41976    }, [options.animated, animating, options.stopAnimation]);
41977    var onTransitionEnd = (0,external_React_.useCallback)(function (event) {
41978      var _onTransitionEndRef$c;
41979
41980      (_onTransitionEndRef$c = onTransitionEndRef.current) === null || _onTransitionEndRef$c === void 0 ? void 0 : _onTransitionEndRef$c.call(onTransitionEndRef, event);
41981      onEnd(event);
41982    }, [onEnd]);
41983    var onAnimationEnd = (0,external_React_.useCallback)(function (event) {
41984      var _onAnimationEndRef$cu;
41985
41986      (_onAnimationEndRef$cu = onAnimationEndRef.current) === null || _onAnimationEndRef$cu === void 0 ? void 0 : _onAnimationEndRef$cu.call(onAnimationEndRef, event);
41987      onEnd(event);
41988    }, [onEnd]);
41989    return _objectSpread2({
41990      id: options.baseId,
41991      "data-enter": transition === "enter" ? "" : undefined,
41992      "data-leave": transition === "leave" ? "" : undefined,
41993      onTransitionEnd: onTransitionEnd,
41994      onAnimationEnd: onAnimationEnd,
41995      hidden: hidden,
41996      style: style
41997    }, htmlProps);
41998  }
41999});
42000var DisclosureContent_DisclosureContent = createComponent({
42001  as: "div",
42002  useHook: DisclosureContent_useDisclosureContent
42003});
42004
42005
42006
42007;// CONCATENATED MODULE: ./node_modules/reakit/es/Portal/Portal.js
42008
42009
42010
42011
42012
42013function getBodyElement() {
42014  return canUseDOM ? document.body : null;
42015}
42016
42017var Portal_PortalContext = /*#__PURE__*/(0,external_React_.createContext)(getBodyElement());
42018function Portal_Portal(_ref) {
42019  var children = _ref.children;
42020  // if it's a nested portal, context is the parent portal
42021  // otherwise it's document.body
42022  // https://github.com/reakit/reakit/issues/513
42023  var context = (0,external_React_.useContext)(Portal_PortalContext) || getBodyElement();
42024
42025  var _React$useState = (0,external_React_.useState)(function () {
42026    if (canUseDOM) {
42027      var element = document.createElement("div");
42028      element.className = Portal_Portal.__className;
42029      return element;
42030    } // ssr
42031
42032
42033    return null;
42034  }),
42035      hostNode = _React$useState[0];
42036
42037  useIsomorphicEffect(function () {
42038    if (!hostNode || !context) return undefined;
42039    context.appendChild(hostNode);
42040    return function () {
42041      context.removeChild(hostNode);
42042    };
42043  }, [hostNode, context]);
42044
42045  if (hostNode) {
42046    return /*#__PURE__*/(0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_React_.createElement)(Portal_PortalContext.Provider, {
42047      value: hostNode
42048    }, children), hostNode);
42049  } // ssr
42050
42051
42052  return null;
42053}
42054Portal_Portal.__className = "__reakit-portal";
42055Portal_Portal.__selector = "." + Portal_Portal.__className;
42056
42057
42058
42059;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/Tooltip.js
42060
42061
42062
42063
42064
42065
42066
42067
42068
42069
42070
42071
42072
42073
42074
42075
42076
42077
42078
42079function globallyHideTooltipOnEscape(event) {
42080  if (event.defaultPrevented) return;
42081
42082  if (event.key === "Escape") {
42083    globalState.show(null);
42084  }
42085}
42086
42087var Tooltip_useTooltip = createHook({
42088  name: "Tooltip",
42089  compose: DisclosureContent_useDisclosureContent,
42090  keys: TOOLTIP_KEYS,
42091  useOptions: function useOptions(_ref) {
42092    var _ref$unstable_portal = _ref.unstable_portal,
42093        unstable_portal = _ref$unstable_portal === void 0 ? true : _ref$unstable_portal,
42094        options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_portal"]);
42095
42096    return _objectSpread2({
42097      unstable_portal: unstable_portal
42098    }, options);
42099  },
42100  useProps: function useProps(options, _ref2) {
42101    var htmlRef = _ref2.ref,
42102        htmlStyle = _ref2.style,
42103        htmlWrapElement = _ref2.wrapElement,
42104        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "style", "wrapElement"]);
42105
42106    (0,external_React_.useEffect)(function () {
42107      var _options$unstable_pop;
42108
42109      var document = getDocument_getDocument((_options$unstable_pop = options.unstable_popoverRef) === null || _options$unstable_pop === void 0 ? void 0 : _options$unstable_pop.current);
42110      document.addEventListener("keydown", globallyHideTooltipOnEscape);
42111    }, []);
42112    var wrapElement = (0,external_React_.useCallback)(function (element) {
42113      if (options.unstable_portal) {
42114        element = /*#__PURE__*/(0,external_React_.createElement)(Portal_Portal, null, element);
42115      }
42116
42117      if (htmlWrapElement) {
42118        return htmlWrapElement(element);
42119      }
42120
42121      return element;
42122    }, [options.unstable_portal, htmlWrapElement]);
42123    return _objectSpread2({
42124      ref: useForkRef(options.unstable_popoverRef, htmlRef),
42125      role: "tooltip",
42126      style: _objectSpread2(_objectSpread2({}, options.unstable_popoverStyles), {}, {
42127        pointerEvents: "none"
42128      }, htmlStyle),
42129      wrapElement: wrapElement
42130    }, htmlProps);
42131  }
42132});
42133var Tooltip_Tooltip = createComponent({
42134  as: "div",
42135  memo: true,
42136  useHook: Tooltip_useTooltip
42137});
42138
42139
42140
42141;// CONCATENATED MODULE: ./packages/components/build-module/ui/shortcut/component.js
42142
42143/**
42144 * External dependencies
42145 */
42146
42147/**
42148 * Internal dependencies
42149 */
42150
42151
42152
42153function component_Shortcut(props, forwardedRef) {
42154  const {
42155    as: asProp = 'span',
42156    shortcut,
42157    className,
42158    ...otherProps
42159  } = useContextSystem(props, 'Shortcut');
42160  if (!shortcut) {
42161    return null;
42162  }
42163  let displayText;
42164  let ariaLabel;
42165  if (typeof shortcut === 'string') {
42166    displayText = shortcut;
42167  } else {
42168    displayText = shortcut.display;
42169    ariaLabel = shortcut.ariaLabel;
42170  }
42171  return (0,external_wp_element_namespaceObject.createElement)(component, {
42172    as: asProp,
42173    className: className,
42174    "aria-label": ariaLabel,
42175    ref: forwardedRef,
42176    ...otherProps
42177  }, displayText);
42178}
42179const ConnectedShortcut = contextConnect(component_Shortcut, 'Shortcut');
42180/* harmony default export */ const shortcut_component = (ConnectedShortcut);
42181
42182;// CONCATENATED MODULE: ./packages/components/build-module/utils/z-index.js
42183const Flyout = 10000;
42184const z_index_Tooltip = 1000002;
42185
42186;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/styles.js
42187
42188function tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
42189/**
42190 * External dependencies
42191 */
42192
42193/**
42194 * Internal dependencies
42195 */
42196
42197
42198
42199
42200
42201const TooltipContent = /*#__PURE__*/emotion_react_browser_esm_css("z-index:", z_index_Tooltip, ";box-sizing:border-box;opacity:0;outline:none;transform-origin:top center;transition:opacity ", config_values.transitionDurationFastest, " ease;font-size:", config_values.fontSize, ";&[data-enter]{opacity:1;}" + ( true ? "" : 0),  true ? "" : 0);
42202const TooltipPopoverView = emotion_styled_base_browser_esm("div",  true ? {
42203  target: "e7tfjmw1"
42204} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;box-shadow:0 0 0 1px rgba( 255, 255, 255, 0.04 );color:", COLORS.white, ";padding:4px 8px;" + ( true ? "" : 0));
42205const noOutline =  true ? {
42206  name: "12mkfdx",
42207  styles: "outline:none"
42208} : 0;
42209const TooltipShortcut = /*#__PURE__*/emotion_styled_base_browser_esm(shortcut_component,  true ? {
42210  target: "e7tfjmw0"
42211} : 0)("display:inline-block;margin-left:", space(1), ";" + ( true ? "" : 0));
42212
42213;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/content.js
42214
42215/**
42216 * External dependencies
42217 */
42218// eslint-disable-next-line no-restricted-imports
42219
42220
42221/**
42222 * Internal dependencies
42223 */
42224
42225
42226
42227
42228
42229const {
42230  TooltipPopoverView: content_TooltipPopoverView
42231} = tooltip_styles_namespaceObject;
42232
42233/**
42234 *
42235 * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props
42236 * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
42237 */
42238function content_TooltipContent(props, forwardedRef) {
42239  const {
42240    children,
42241    className,
42242    ...otherProps
42243  } = useContextSystem(props, 'TooltipContent');
42244  const {
42245    tooltip
42246  } = useTooltipContext();
42247  const cx = useCx();
42248  const classes = cx(TooltipContent, className);
42249  return (0,external_wp_element_namespaceObject.createElement)(Tooltip_Tooltip, {
42250    as: component,
42251    ...otherProps,
42252    ...tooltip,
42253    className: classes,
42254    ref: forwardedRef
42255  }, (0,external_wp_element_namespaceObject.createElement)(content_TooltipPopoverView, null, children));
42256}
42257/* harmony default export */ const tooltip_content = (contextConnect(content_TooltipContent, 'TooltipContent'));
42258
42259;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/component.js
42260
42261/**
42262 * External dependencies
42263 */
42264// eslint-disable-next-line no-restricted-imports
42265
42266
42267/**
42268 * WordPress dependencies
42269 */
42270
42271
42272/**
42273 * Internal dependencies
42274 */
42275
42276
42277
42278
42279
42280/**
42281 * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
42282 * @param {import('react').ForwardedRef<any>}                                            forwardedRef
42283 */
42284function component_Tooltip(props, forwardedRef) {
42285  const {
42286    animated = true,
42287    animationDuration = 160,
42288    baseId,
42289    children,
42290    content,
42291    focusable = true,
42292    gutter = 4,
42293    id,
42294    modal = true,
42295    placement,
42296    visible = false,
42297    shortcut,
42298    ...otherProps
42299  } = useContextSystem(props, 'Tooltip');
42300  const tooltip = useTooltipState({
42301    animated: animated ? animationDuration : undefined,
42302    baseId: baseId || id,
42303    gutter,
42304    placement,
42305    visible,
42306    ...otherProps
42307  });
42308  const contextProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
42309    tooltip
42310  }), [tooltip]);
42311  return (0,external_wp_element_namespaceObject.createElement)(context_TooltipContext.Provider, {
42312    value: contextProps
42313  }, content && (0,external_wp_element_namespaceObject.createElement)(tooltip_content, {
42314    unstable_portal: modal,
42315    ref: forwardedRef
42316  }
42316, content, shortcut && (0,external_wp_element_namespaceObject.createElement)(TooltipShortcut, {
42317    shortcut: shortcut
42318  })), children && (0,external_wp_element_namespaceObject.createElement)(TooltipReference, {
42319    ...tooltip,
42320    ...children.props,
42321    // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
42322    ref: children?.ref
42323  }, referenceProps => {
42324    if (!focusable) {
42325      referenceProps.tabIndex = undefined;
42326    }
42327    return (0,external_wp_element_namespaceObject.cloneElement)(children, referenceProps);
42328  }));
42329}
42330
42331/**
42332 * `Tooltip` is a component that provides context for a user interface element.
42333 *
42334 * @example
42335 * ```jsx
42336 * import { Tooltip, Text } from `@wordpress/components/ui`;
42337 *
42338 * function Example() {
42339 * 	return (
42340 * 		<Tooltip content="Code is Poetry">
42341 * 			<Text>WordPress.org</Text>
42342 * 		</Tooltip>
42343 * 	)
42344 * }
42345 * ```
42346 */
42347const ConnectedTooltip = contextConnect(component_Tooltip, 'Tooltip');
42348/* harmony default export */ const tooltip_component = (ConnectedTooltip);
42349
42350;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/color-copy-button.js
42351
42352/**
42353 * WordPress dependencies
42354 */
42355
42356
42357
42358
42359
42360/**
42361 * Internal dependencies
42362 */
42363
42364
42365
42366const ColorCopyButton = props => {
42367  const {
42368    color,
42369    colorType
42370  } = props;
42371  const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null);
42372  const copyTimer = (0,external_wp_element_namespaceObject.useRef)();
42373  const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => {
42374    switch (colorType) {
42375      case 'hsl':
42376        {
42377          return color.toHslString();
42378        }
42379      case 'rgb':
42380        {
42381          return color.toRgbString();
42382        }
42383      default:
42384      case 'hex':
42385        {
42386          return color.toHex();
42387        }
42388    }
42389  }, () => {
42390    if (copyTimer.current) {
42391      clearTimeout(copyTimer.current);
42392    }
42393    setCopiedColor(color.toHex());
42394    copyTimer.current = setTimeout(() => {
42395      setCopiedColor(null);
42396      copyTimer.current = undefined;
42397    }, 3000);
42398  });
42399  (0,external_wp_element_namespaceObject.useEffect)(() => {
42400    // Clear copyTimer on component unmount.
42401    return () => {
42402      if (copyTimer.current) {
42403        clearTimeout(copyTimer.current);
42404      }
42405    };
42406  }, []);
42407  return (0,external_wp_element_namespaceObject.createElement)(tooltip_component, {
42408    content: (0,external_wp_element_namespaceObject.createElement)(text_component, {
42409      color: "white"
42410    }, copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy')),
42411    placement: "bottom"
42412  }, (0,external_wp_element_namespaceObject.createElement)(CopyButton, {
42413    isSmall: true,
42414    ref: copyRef,
42415    icon: library_copy,
42416    showTooltip: false
42417  }));
42418};
42419
42420;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/input-with-slider.js
42421
42422/**
42423 * Internal dependencies
42424 */
42425
42426
42427
42428
42429
42430
42431const InputWithSlider = ({
42432  min,
42433  max,
42434  label,
42435  abbreviation,
42436  onChange,
42437  value
42438}) => {
42439  const onNumberControlChange = newValue => {
42440    if (!newValue) {
42441      onChange(0);
42442      return;
42443    }
42444    if (typeof newValue === 'string') {
42445      onChange(parseInt(newValue, 10));
42446      return;
42447    }
42448    onChange(newValue);
42449  };
42450  return (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
42451    spacing: 4
42452  }, (0,external_wp_element_namespaceObject.createElement)(NumberControlWrapper, {
42453    min: min,
42454    max: max,
42455    label: label,
42456    hideLabelFromVision: true,
42457    value: value,
42458    onChange: onNumberControlChange,
42459    prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
42460      as: text_component,
42461      paddingLeft: space(4),
42462      color: COLORS.theme.accent,
42463      lineHeight: 1
42464    }, abbreviation),
42465    spinControls: "none",
42466    size: "__unstable-large"
42467  }), (0,external_wp_element_namespaceObject.createElement)(styles_RangeControl, {
42468    __nextHasNoMarginBottom: true,
42469    label: label,
42470    hideLabelFromVision: true,
42471    min: min,
42472    max: max,
42473    value: value
42474    // @ts-expect-error
42475    // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
42476    ,
42477    onChange: onChange,
42478    withInputField: false
42479  }));
42480};
42481
42482;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/rgb-input.js
42483
42484/**
42485 * External dependencies
42486 */
42487
42488
42489/**
42490 * Internal dependencies
42491 */
42492
42493const RgbInput = ({
42494  color,
42495  onChange,
42496  enableAlpha
42497}) => {
42498  const {
42499    r,
42500    g,
42501    b,
42502    a
42503  } = color.toRgb();
42504  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42505    min: 0,
42506    max: 255,
42507    label: "Red",
42508    abbreviation: "R",
42509    value: r,
42510    onChange: nextR => onChange(w({
42511      r: nextR,
42512      g,
42513      b,
42514      a
42515    }))
42516  }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42517    min: 0,
42518    max: 255,
42519    label: "Green",
42520    abbreviation: "G",
42521    value: g,
42522    onChange: nextG => onChange(w({
42523      r,
42524      g: nextG,
42525      b,
42526      a
42527    }))
42528  }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42529    min: 0,
42530    max: 255,
42531    label: "Blue",
42532    abbreviation: "B",
42533    value: b,
42534    onChange: nextB => onChange(w({
42535      r,
42536      g,
42537      b: nextB,
42538      a
42539    }))
42540  }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42541    min: 0,
42542    max: 100,
42543    label: "Alpha",
42544    abbreviation: "A",
42545    value: Math.trunc(a * 100),
42546    onChange: nextA => onChange(w({
42547      r,
42548      g,
42549      b,
42550      a: nextA / 100
42551    }))
42552  }));
42553};
42554
42555;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/hsl-input.js
42556
42557/**
42558 * External dependencies
42559 */
42560
42561
42562/**
42563 * Internal dependencies
42564 */
42565
42566const HslInput = ({
42567  color,
42568  onChange,
42569  enableAlpha
42570}) => {
42571  const {
42572    h,
42573    s,
42574    l,
42575    a
42576  } = color.toHsl();
42577  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42578    min: 0,
42579    max: 359,
42580    label: "Hue",
42581    abbreviation: "H",
42582    value: h,
42583    onChange: nextH => {
42584      onChange(w({
42585        h: nextH,
42586        s,
42587        l,
42588        a
42589      }));
42590    }
42591  }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42592    min: 0,
42593    max: 100,
42594    label: "Saturation",
42595    abbreviation: "S",
42596    value: s,
42597    onChange: nextS => {
42598      onChange(w({
42599        h,
42600        s: nextS,
42601        l,
42602        a
42603      }));
42604    }
42605  }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42606    min: 0,
42607    max: 100,
42608    label: "Lightness",
42609    abbreviation: "L",
42610    value: l,
42611    onChange: nextL => {
42612      onChange(w({
42613        h,
42614        s,
42615        l: nextL,
42616        a
42617      }));
42618    }
42619  }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, {
42620    min: 0,
42621    max: 100,
42622    label: "Alpha",
42623    abbreviation: "A",
42624    value: Math.trunc(100 * a),
42625    onChange: nextA => {
42626      onChange(w({
42627        h,
42628        s,
42629        l,
42630        a: nextA / 100
42631      }));
42632    }
42633  }));
42634};
42635
42636;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/hex-input.js
42637
42638/**
42639 * External dependencies
42640 */
42641
42642
42643/**
42644 * WordPress dependencies
42645 */
42646
42647
42648/**
42649 * Internal dependencies
42650 */
42651
42652
42653
42654
42655
42656const HexInput = ({
42657  color,
42658  onChange,
42659  enableAlpha
42660}) => {
42661  const handleChange = nextValue => {
42662    if (!nextValue) return;
42663    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
42664    onChange(w(hexValue));
42665  };
42666  const stateReducer = (state, action) => {
42667    const nativeEvent = action.payload?.event?.nativeEvent;
42668    if ('insertFromPaste' !== nativeEvent?.inputType) {
42669      return {
42670        ...state
42671      };
42672    }
42673    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
42674    return {
42675      ...state,
42676      value
42677    };
42678  };
42679  return (0,external_wp_element_namespaceObject.createElement)(InputControl, {
42680    prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
42681      as: text_component,
42682      marginLeft: space(4),
42683      color: COLORS.theme.accent,
42684      lineHeight: 1
42685    }, "#"),
42686    value: color.toHex().slice(1).toUpperCase(),
42687    onChange: handleChange,
42688    maxLength: enableAlpha ? 9 : 7,
42689    label: (0,external_wp_i18n_namespaceObject.__)('Hex color'),
42690    hideLabelFromVision: true,
42691    size: "__unstable-large",
42692    __unstableStateReducer: stateReducer,
42693    __unstableInputWidth: "9em"
42694  });
42695};
42696
42697;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/color-input.js
42698
42699/**
42700 * Internal dependencies
42701 */
42702
42703
42704
42705const ColorInput = ({
42706  colorType,
42707  color,
42708  onChange,
42709  enableAlpha
42710}) => {
42711  const props = {
42712    color,
42713    onChange,
42714    enableAlpha
42715  };
42716  switch (colorType) {
42717    case 'hsl':
42718      return (0,external_wp_element_namespaceObject.createElement)(HslInput, {
42719        ...props
42720      });
42721    case 'rgb':
42722      return (0,external_wp_element_namespaceObject.createElement)(RgbInput, {
42723        ...props
42724      });
42725    default:
42726    case 'hex':
42727      return (0,external_wp_element_namespaceObject.createElement)(HexInput, {
42728        ...props
42729      });
42730  }
42731};
42732
42733;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.module.js
42734function index_module_u(){return(index_module_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function index_module_c(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r.indexOf(t=a[o])>=0||(n[t]=e[t]);return n}function index_module_s(e){var t=(0,external_React_.useRef)(e),o=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,o.current}var index_module_i=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},index_module_f=function(e){return"touches"in e},index_module_v=function(e,r){var t=e.getBoundingClientRect(),o=index_module_f(r)?r.touches[0]:r;return{left:index_module_i((o.pageX-(t.left+window.pageXOffset))/t.width),top:index_module_i((o.pageY-(t.top+window.pageYOffset))/t.height)}},index_module_d=function(e){!index_module_f(e)&&e.preventDefault()},index_module_h=external_React_default().memo(function(n){var a=n.onMove,l=n.onKey,i=index_module_c(n,["onMove","onKey"]),h=(0,external_React_.useRef)(null),m=index_module_s(a),g=index_module_s(l),p=(0,external_React_.useRef)(!1),b=(0,external_React_.useMemo)(function(){var e=function(e){index_module_d(e),(index_module_f(e)?e.touches.length>0:e.buttons>0)&&h.current?m(index_module_v(h.current,e)):t(!1)},r=function(){return t(!1)};function t(t){var o=p.current,n=t?self.addEventListener:self.removeEventListener;n(o?"touchmove":"mousemove",e),n(o?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,o=h.current;o&&(index_module_d(r),!function(e,r){return r&&!index_module_f(e)}(r,p.current)&&o&&(p.current=index_module_f(r),o.focus(),m(index_module_v(o,r)),t(!0)))},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),g({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[g,m]),_=b[0],C=b[1],x=b[2];return (0,external_React_.useEffect)(function(){return x},[x]),external_React_default().createElement("div",index_module_u({},i,{onTouchStart:_,onMouseDown:_,className:"react-colorful__interactive",ref:h,onKeyDown:C,tabIndex:0,role:"slider"}))}),index_module_m=function(e){return e.filter(Boolean).join(" ")},index_module_g=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,l=index_module_m(["react-colorful__pointer",r.className]);return external_React_default().createElement("div",{className:l,style:{top:100*a+"%",left:100*o+"%"}},external_React_default().createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_p=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},index_module_b={grad:.9,turn:360,rad:360/(2*Math.PI)},_=function(e){return"#"===e[0]&&(e=e.substr(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:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},C=function(e,r){return void 0===r&&(r="deg"),Number(e)*(index_module_b[r]||1)},index_module_x=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?index_module_H({h:C(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}},index_module_E=index_module_x,index_module_H=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}},index_module_M=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:index_module_p(e.h),s:index_module_p(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:index_module_p(n/2),a:index_module_p(o,2)}},index_module_N=function(e){var r=index_module_M(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},index_module_w=function(e){var r=index_module_M(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},index_module_y=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;
42734var a=Math.floor(r),l=o*(1-t),u=o*(1-(r-a)*t),c=o*(1-(1-r+a)*t),s=a%6;return{r:index_module_p(255*[o,u,l,l,c,o][s]),g:index_module_p(255*[c,o,o,u,l,l][s]),b:index_module_p(255*[l,l,c,o,o,u][s]),a:index_module_p(n,2)}},q=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?B({h:C(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}},index_module_k=q,index_module_O=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?z({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}},index_module_I=index_module_O,index_module_j=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},z=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),l=a-Math.min(r,t,o),u=l?a===r?(t-o)/l:a===t?2+(o-r)/l:4+(r-t)/l:0;return{h:index_module_p(60*(u<0?u+6:u)),s:index_module_p(a?l/a*100:0),v:index_module_p(a/255*100),a:n}},B=function(e){return{h:index_module_p(e.h),s:index_module_p(e.s),v:index_module_p(e.v),a:index_module_p(e.a,2)}},K=external_React_default().memo(function(r){var t=r.hue,o=r.onChange,n=index_module_m(["react-colorful__hue",r.className]);return external_React_default().createElement("div",{className:n},external_React_default().createElement(index_module_h,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:index_module_i(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_p(t)},external_React_default().createElement(index_module_g,{className:"react-colorful__hue-pointer",left:t/360,color:index_module_N({h:t,s:100,v:100,a:1})})))}),A=external_React_default().memo(function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:index_module_N({h:t.h,s:100,v:100,a:1})};return external_React_default().createElement("div",{className:"react-colorful__saturation",style:n},external_React_default().createElement(index_module_h,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:index_module_i(t.s+100*e.left,0,100),v:index_module_i(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_p(t.s)+"%, Brightness "+index_module_p(t.v)+"%"},external_React_default().createElement(index_module_g,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:index_module_N(t)})))}),L=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},D=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function F(e,t,l){var u=index_module_s(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),i=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:i});(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;L(i,v.current.hsva)||e.equal(r=e.fromHsva(i),v.current.color)||(v.current={hsva:i,color:r},u(r))},[i,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[i,d]}var index_module_S,P,T="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,X=function(){return index_module_S||( true?__webpack_require__.nc:0)},Y=function(e){index_module_S=e},index_module_$=function(){T(function(){if("undefined"!=typeof document&&!P){(P=document.createElement("style")).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;
42734left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var e=X();e&&P.setAttribute("nonce",e),document.head.appendChild(P)}},[])},R=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,l=r.onChange,s=index_module_c(r,["className","colorModel","color","onChange"]);index_module_$();var i=F(o,a,l),f=i[0],v=i[1],d=index_module_m(["react-colorful",t]);return external_React_default().createElement("div",index_module_u({},s,{className:d}),external_React_default().createElement(A,{hsva:f,onChange:v}),external_React_default().createElement(K,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return z(_(e))},fromHsva:function(e){return t=(r=index_module_y(e)).g,o=r.b,"#"+index_module_j(r.r)+index_module_j(t)+index_module_j(o);var r,t,o},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||L(_(e),_(r))}},J=function(r){return e.createElement(R,index_module_u({},r,{colorModel:G}))},Q=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+index_module_w(Object.assign({},o,{a:0}))+", "+index_module_w(Object.assign({},o,{a:1}))+")"},l=index_module_m(["react-colorful__alpha",t]);return external_React_default().createElement("div",{className:l},external_React_default().createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_default().createElement(index_module_h,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:index_module_i(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_p(100*o.a)+"%"},external_React_default().createElement(index_module_g,{className:"react-colorful__alpha-pointer",left:o.a,color:index_module_w(o)})))},U=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,l=r.onChange,s=index_module_c(r,["className","colorModel","color","onChange"]);index_module_$();var i=F(o,a,l),f=i[0],v=i[1],d=index_module_m(["react-colorful",t]);return external_React_default().createElement("div",index_module_u({},s,{className:d}),external_React_default().createElement(A,{hsva:f,onChange:v}),external_React_default().createElement(K,{hue:f.h,onChange:v}),external_React_default().createElement(Q,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},index_module_V={defaultColor:{h:0,s:0,l:0,a:1},toHsva:index_module_H,fromHsva:index_module_M,equal:L},W=function(r){return e.createElement(U,index_module_u({},r,{colorModel:index_module_V}))},Z={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_x,fromHsva:index_module_w,equal:D},ee=function(r){return e.createElement(U,index_module_u({},r,{colorModel:Z}))},re={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return index_module_H({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=index_module_M(e)).h,s:r.s,l:r.l};var r},equal:L},te=function(r){return e.createElement(R,index_module_u({},r,{colorModel:re}))},oe={defaultColor:"hsl(0, 0%, 0%)",toHsva:index_module_E,fromHsva:index_module_N,equal:D},ne=function(r){return e.createElement(R,index_module_u({},r,{colorModel:oe}))},ae={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:B,equal:L},le=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ae}))},ue={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:q,fromHsva:function(e){var r=B(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:D},ce=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ue}))},se={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=B(e);return{h:r.h,s:r.s,v:r.v}},equal:L},ie=function(r){return e.createElement(R,index_module_u({},r,{colorModel:se}))},fe={defaultColor:"hsv(0, 0%, 0%)",toHsva:index_module_k,fromHsva:function(e){var r=B(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:D},ve=function(r){return e.createElement(R,index_module_u({},r,{colorModel:fe}))},de={defaultColor:{r:0,g:0,b:0,a:1},toHsva:z,fromHsva:index_module_y,equal:L},he=function(r){return e.createElement(U,index_module_u({},r,{colorModel:de}))},me={defaultColor:"rgba(0, 0, 0, 1)",toHsva:index_module_O,fromHsva:function(e){var r=index_module_y(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:D},ge=function(r){return external_React_default().createElement(U,index_module_u({},r,{colorModel:me}))},pe={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return z({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=index_module_y(e)).r,g:r.g,b:r.b};var r},equal:L},be=function(r){return e.createElement(R,index_module_u({},r,{colorModel:pe}))},_e={defaultColor:"rgb(0, 0, 0)",toHsva:index_module_I,fromHsva:function(e){var r=index_module_y(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:D},Ce=function(r){return external_React_default().createElement(R,index_module_u({},r,{colorModel:_e}))},xe=/^#?[0-9A-F]{3}$/i,Ee=/^#?[0-9A-F]{6}$/i,He=function(e){return Ee.test(e)||xe.test(e)},Me=function(e){return e.replace(/([^0-9A-F]+)/gi,"").substr(0,6)}
42734,Ne=function(r){var t=r.color,l=void 0===t?"":t,i=r.onChange,f=r.onBlur,v=r.prefixed,d=index_module_c(r,["color","onChange","onBlur","prefixed"]),h=n(function(){return Me(l)}),m=h[0],g=h[1],p=index_module_s(i),b=index_module_s(f),_=a(function(e){var r=Me(e.target.value);g(r),He(r)&&p("#"+r)},[p]),C=a(function(e){He(e.target.value)||g(Me(l)),b(e)},[l,b]);return o(function(){g(Me(l))},[l]),e.createElement("input",index_module_u({},d,{value:(v?"#":"")+m,spellCheck:"false",onChange:_,onBlur:C}))};
42735
42736;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/picker.js
42737
42738/**
42739 * External dependencies
42740 */
42741
42742
42743
42744/**
42745 * WordPress dependencies
42746 */
42747
42748/**
42749 * Internal dependencies
42750 */
42751
42752const Picker = ({
42753  color,
42754  enableAlpha,
42755  onChange
42756}) => {
42757  const Component = enableAlpha ? ge : Ce;
42758  const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]);
42759  return (0,external_wp_element_namespaceObject.createElement)(Component, {
42760    color: rgbColor,
42761    onChange: nextColor => {
42762      onChange(w(nextColor));
42763    }
42764  });
42765};
42766
42767;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/component.js
42768
42769/**
42770 * External dependencies
42771 */
42772
42773
42774
42775
42776/**
42777 * WordPress dependencies
42778 */
42779
42780
42781
42782
42783/**
42784 * Internal dependencies
42785 */
42786
42787
42788
42789
42790
42791
42792k([names]);
42793const options = [{
42794  label: 'RGB',
42795  value: 'rgb'
42796}, {
42797  label: 'HSL',
42798  value: 'hsl'
42799}, {
42800  label: 'Hex',
42801  value: 'hex'
42802}];
42803const UnconnectedColorPicker = (props, forwardedRef) => {
42804  const {
42805    enableAlpha = false,
42806    color: colorProp,
42807    onChange,
42808    defaultValue = '#fff',
42809    copyFormat,
42810    ...divProps
42811  } = useContextSystem(props, 'ColorPicker');
42812
42813  // Use a safe default value for the color and remove the possibility of `undefined`.
42814  const [color, setColor] = useControlledValue({
42815    onChange,
42816    value: colorProp,
42817    defaultValue
42818  });
42819  const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => {
42820    return w(color || '');
42821  }, [color]);
42822  const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor);
42823  const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
42824    debouncedSetColor(nextValue.toHex());
42825  }, [debouncedSetColor]);
42826  const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex');
42827  return (0,external_wp_element_namespaceObject.createElement)(ColorfulWrapper, {
42828    ref: forwardedRef,
42829    ...divProps
42830  }, (0,external_wp_element_namespaceObject.createElement)(Picker, {
42831    onChange: handleChange,
42832    color: safeColordColor,
42833    enableAlpha: enableAlpha
42834  }), (0,external_wp_element_namespaceObject.createElement)(AuxiliaryColorArtefactWrapper, null, (0,external_wp_element_namespaceObject.createElement)(AuxiliaryColorArtefactHStackHeader, {
42835    justify: "space-between"
42836  }, (0,external_wp_element_namespaceObject.createElement)(styles_SelectControl, {
42837    __nextHasNoMarginBottom: true,
42838    options: options,
42839    value: colorType,
42840    onChange: nextColorType => setColorType(nextColorType),
42841    label: (0,external_wp_i18n_namespaceObject.__)('Color format'),
42842    hideLabelFromVision: true
42843  }), (0,external_wp_element_namespaceObject.createElement)(ColorCopyButton, {
42844    color: safeColordColor,
42845    colorType: copyFormat || colorType
42846  })), (0,external_wp_element_namespaceObject.createElement)(ColorInputWrapper, {
42847    direction: "column",
42848    gap: 2
42849  }, (0,external_wp_element_namespaceObject.createElement)(ColorInput, {
42850    colorType: colorType,
42851    color: safeColordColor,
42852    onChange: handleChange,
42853    enableAlpha: enableAlpha
42854  }))));
42855};
42856const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
42857/* harmony default export */ const color_picker_component = (ColorPicker);
42858
42859;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/use-deprecated-props.js
42860/**
42861 * External dependencies
42862 */
42863
42864
42865
42866/**
42867 * WordPress dependencies
42868 */
42869
42870
42871/**
42872 * Internal dependencies
42873 */
42874
42875function isLegacyProps(props) {
42876  return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof props.color?.hex === 'string';
42877}
42878function getColorFromLegacyProps(color) {
42879  if (color === undefined) return;
42880  if (typeof color === 'string') return color;
42881  if (color.hex) return color.hex;
42882  return undefined;
42883}
42884const transformColorStringToLegacyColor = memize(color => {
42885  const colordColor = w(color);
42886  const hex = colordColor.toHex();
42887  const rgb = colordColor.toRgb();
42888  const hsv = colordColor.toHsv();
42889  const hsl = colordColor.toHsl();
42890  return {
42891    hex,
42892    rgb,
42893    hsv,
42894    hsl,
42895    source: 'hex',
42896    oldHue: hsl.h
42897  };
42898});
42899function use_deprecated_props_useDeprecatedProps(props) {
42900  const {
42901    onChangeComplete
42902  } = props;
42903  const legacyChangeHandler = (0,external_wp_element_namespaceObject.useCallback)(color => {
42904    onChangeComplete(transformColorStringToLegacyColor(color));
42905  }, [onChangeComplete]);
42906  if (isLegacyProps(props)) {
42907    return {
42908      color: getColorFromLegacyProps(props.color),
42909      enableAlpha: !props.disableAlpha,
42910      onChange: legacyChangeHandler
42911    };
42912  }
42913  return {
42914    ...props,
42915    color: props.color,
42916    enableAlpha: props.enableAlp
42916ha,
42917    onChange: props.onChange
42918  };
42919}
42920
42921;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/legacy-adapter.js
42922
42923/**
42924 * Internal dependencies
42925 */
42926
42927
42928const LegacyAdapter = props => {
42929  return (0,external_wp_element_namespaceObject.createElement)(color_picker_component, {
42930    ...use_deprecated_props_useDeprecatedProps(props)
42931  });
42932};
42933
42934;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-context.js
42935/**
42936 * WordPress dependencies
42937 */
42938
42939
42940/**
42941 * Internal dependencies
42942 */
42943
42944const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({});
42945
42946;// CONCATENATED MODULE: ./packages/icons/build-module/library/check.js
42947
42948/**
42949 * WordPress dependencies
42950 */
42951
42952const check = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
42953  xmlns: "http://www.w3.org/2000/svg",
42954  viewBox: "0 0 24 24"
42955}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
42956  d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
42957}));
42958/* harmony default export */ const library_check = (check);
42959
42960;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-option.js
42961
42962/**
42963 * External dependencies
42964 */
42965
42966/**
42967 * WordPress dependencies
42968 */
42969
42970
42971
42972
42973/**
42974 * Internal dependencies
42975 */
42976
42977
42978
42979
42980const hasSelectedOption = new Map();
42981function UnforwardedOptionAsButton(props, forwardedRef) {
42982  return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
42983    ...props,
42984    ref: forwardedRef
42985  });
42986}
42987const OptionAsButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsButton);
42988function UnforwardedOptionAsOption(props, forwardedRef) {
42989  const {
42990    id,
42991    className,
42992    isSelected,
42993    context,
42994    ...additionalProps
42995  } = props;
42996  const {
42997    isComposite,
42998    ..._compositeState
42999  } = context;
43000  const compositeState = _compositeState;
43001  const {
43002    baseId,
43003    currentId,
43004    setCurrentId
43005  } = compositeState;
43006  (0,external_wp_element_namespaceObject.useEffect)(() => {
43007    // If we call `setCurrentId` here, it doesn't update for other
43008    // Option renders in the same pass. So we have to store our own
43009    // map to make sure that we only set the first selected option.
43010    // We still need to check `currentId` because the control will
43011    // update this as the user moves around, and that state should
43012    // be maintained as the group gains and loses focus.
43013    if (isSelected && !currentId && !hasSelectedOption.get(baseId)) {
43014      hasSelectedOption.set(baseId, true);
43015      setCurrentId(id);
43016    }
43017  }, [baseId, currentId, id, isSelected, setCurrentId]);
43018  return (0,external_wp_element_namespaceObject.createElement)(CompositeItem, {
43019    ...additionalProps,
43020    ...compositeState,
43021    as: build_module_button,
43022    id: id
43023    // Ideally we'd let the underlying `Button` component
43024    // handle this by passing `isPressed` as a prop.
43025    // Unfortunately doing so also sets `aria-pressed` as
43026    // an attribute on the element, which is incompatible
43027    // with `role="option"`, and there is no way at this
43028    // point to override that behaviour.
43029    ,
43030    className: classnames_default()(className, {
43031      'is-pressed': isSelected
43032    }),
43033    role: "option",
43034    "aria-selected": !!isSelected,
43035    ref: forwardedRef
43036  });
43037}
43038const OptionAsOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsOption);
43039function Option({
43040  className,
43041  isSelected,
43042  selectedIconProps = {},
43043  tooltipText,
43044  ...additionalProps
43045}) {
43046  const compositeContext = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext);
43047  const {
43048    isComposite,
43049    baseId
43050  } = compositeContext;
43051  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
43052  const commonProps = {
43053    id,
43054    className: 'components-circular-option-picker__option',
43055    ...additionalProps
43056  };
43057  const optionControl = isComposite ? (0,external_wp_element_namespaceObject.createElement)(OptionAsOption, {
43058    ...commonProps,
43059    context: compositeContext,
43060    isSelected: isSelected
43061  }) : (0,external_wp_element_namespaceObject.createElement)(OptionAsButton, {
43062    ...commonProps,
43063    isPressed: isSelected
43064  });
43065  return (0,external_wp_element_namespaceObject.createElement)("div", {
43066    className: classnames_default()(className, 'components-circular-option-picker__option-wrapper')
43067  }, tooltipText ? (0,external_wp_element_namespaceObject.createElement)(tooltip, {
43068    text: tooltipText
43069  }, optionControl) : optionControl, isSelected && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
43070    icon: library_check,
43071    ...selectedIconProps
43072  }));
43073}
43074
43075;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-option-group.js
43076
43077/**
43078 * External dependencies
43079 */
43080
43081
43082/**
43083 * Internal dependencies
43084 */
43085
43086function OptionGroup({
43087  className,
43088  options,
43089  ...additionalProps
43090}) {
43091  const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined;
43092  return (0,external_wp_element_namespaceObject.createElement)("div", {
43093    ...additionalProps,
43094    role: role,
43095    className: classnames_default()('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
43096  }, options);
43097}
43098
43099;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-actions.js
43100
43101/**
43102 * External dependencies
43103 */
43104
43105
43106/**
43107 * Internal dependencies
43108 */
43109
43110
43111function DropdownLinkAction({
43112  buttonProps,
43113  className,
43114  dropdownProps,
43115  linkText
43116}) {
43117  return (0,external_wp_element_namespaceObject.createElement)(dropdown, {
43118    className: classnames_default()('components-circular-option-picker__dropdown-link-action', className),
43119    renderToggle: ({
43120      isOpen,
43121      onToggle
43122    }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
43123      "aria-expanded": isOpen,
43124      "aria-haspopup": "true",
43125      onClick: onToggle,
43126      variant: "link",
43127      ...buttonProps
43128    }, linkText),
43129    ...dropdownProps
43130  });
43131}
43132function ButtonAction({
43133  className,
43134  children,
43135  ...additionalProps
43136}) {
43137  return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
43138    className: classnames_default()('components-circular-option-picker__clear', className),
43139    variant: "tertiary",
43140    ...additionalProps
43141  }, children);
43142}
43143
43144;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker.js
43145
43146/**
43147 * External dependencies
43148 */
43149
43150
43151/**
43152 * WordPress dependencies
43153 */
43154
43155
43156
43157
43158/**
43159 * Internal dependencies
43160 */
43161
43162
43163
43164
43165
43166
43167/**
43168 *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
43169 *
43170 * ```jsx
43171 * import { CircularOptionPicker } from '../circular-option-picker';
43172 * import { useState } from '@wordpress/element';
43173 *
43174 * const Example = () => {
43175 * 	const [ currentColor, setCurrentColor ] = useState();
43176 * 	const colors = [
43177 * 		{ color: '#f00', name: 'Red' },
43178 * 		{ color: '#0f0', name: 'Green' },
43179 * 		{ color: '#00f', name: 'Blue' },
43180 * 	];
43181 * 	const colorOptions = (
43182 * 		<>
43183 * 			{ colors.map( ( { color, name }, index ) => {
43184 * 				return (
43185 * 					<CircularOptionPicker.Option
43186 * 						key={ `${ color }-${ index }` }
43187 * 						tooltipText={ name }
43188 * 						style={ { backgroundColor: color, color } }
43189 * 						isSelected={ index === currentColor }
43190 * 						onClick={ () => setCurrentColor( index ) }
43191 * 						aria-label={ name }
43192 * 					/>
43193 * 				);
43194 * 			} ) }
43195 * 		</>
43196 * 	);
43197 * 	return (
43198 * 		<CircularOptionPicker
43199 * 				options={ colorOptions }
43200 * 				actions={
43201 * 					<CircularOptionPicker.ButtonAction
43202 * 						onClick={ () => setCurrentColor( undefined ) }
43203 * 					>
43204 * 						{ 'Clear' }
43205 * 					</CircularOptionPicker.ButtonAction>
43206 * 				}
43207 * 			/>
43208 * 	);
43209 * };
43210 * ```
43211 */
43212
43213function ListboxCircularOptionPicker(props) {
43214  const {
43215    actions,
43216    options,
43217    baseId,
43218    className,
43219    loop = true,
43220    children,
43221    ...additionalProps
43222  } = props;
43223  const rtl = (0,external_wp_i18n_namespaceObject.isRTL)();
43224  const compositeState = useCompositeState({
43225    baseId,
43226    loop,
43227    rtl
43228  });
43229  const {
43230    setBaseId,
43231    setLoop,
43232    setRTL
43233  } = compositeState;
43234
43235  // These are necessary as `useCompositeState` is sealed after
43236  // the first render, so although unlikely to happen, if a state
43237  // property should change, we need to process it accordingly.
43238
43239  (0,external_wp_element_namespaceObject.useEffect)(() => {
43240    setBaseId(baseId);
43241  }, [setBaseId, baseId]);
43242  (0,external_wp_element_namespaceObject.useEffect)(() => {
43243    setLoop(loop);
43244  }, [setLoop, loop]);
43245  (0,external_wp_element_namespaceObject.useEffect)(() => {
43246    setRTL(rtl);
43247  }, [setRTL, rtl]);
43248  const compositeContext = {
43249    isComposite: true,
43250    ...compositeState
43251  };
43252  return (0,external_wp_element_namespaceObject.createElement)("div", {
43253    className: className
43254  }, (0,external_wp_element_namespaceObject.createElement)(CircularOptionPickerContext.Provider, {
43255    value: compositeContext
43256  }, (0,external_wp_element_namespaceObject.createElement)(Composite, {
43257    ...additionalProps,
43258    ...compositeState,
43259    role: 'listbox'
43260  }, options), children, actions));
43261}
43262function ButtonsCircularOptionPicker(props) {
43263  const {
43264    actions,
43265    options,
43266    children,
43267    baseId,
43268    ...additionalProps
43269  } = props;
43270  return (0,external_wp_element_namespaceObject.createElement)("div", {
43271    ...additionalProps
43272  }, (0,external_wp_element_namespaceObject.createElement)(CircularOptionPickerContext.Provider, {
43273    value: {
43274      isComposite: false,
43275      baseId
43276    }
43277  }, options, children, actions));
43278}
43279function CircularOptionPicker(props) {
43280  const {
43281    asButtons,
43282    actions: actionsProp,
43283    options: optionsProp,
43284    children,
43285    className,
43286    ...additionalProps
43287  } = props;
43288  const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);
43289  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
43290  const actions = actionsProp ? (0,external_wp_element_namespaceObject.createElement)("div", {
43291    className: "components-circular-option-picker__custom-clear-wrapper"
43292  }, actionsProp) : undefined;
43293  const options = (0,external_wp_element_namespaceObject.createElement)("div", {
43294    className: 'components-circular-option-picker__swatches'
43295  }, optionsProp);
43296  return (0,external_wp_element_namespaceObject.createElement)(OptionPickerImplementation, {
43297    ...additionalProps,
43298    baseId: baseId,
43299    className: classnames_default()('components-circular-option-picker', className),
43300    actions: actions,
43301    options: options
43302  }, children);
43303}
43304CircularOptionPicker.Option = Option;
43305CircularOptionPicker.OptionGroup = OptionGroup;
43306CircularOptionPicker.ButtonAction = ButtonAction;
43307CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
43308/* harmony default export */ const circular_option_picker = (CircularOptionPicker);
43309
43310;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/index.js
43311/**
43312 * Internal dependencies
43313 */
43314
43315
43316
43317
43318/* harmony default export */ const build_module_circular_option_picker = (circular_option_picker);
43319
43320;// CONCATENATED MODULE: ./packages/components/build-module/v-stack/hook.js
43321/**
43322 * Internal dependencies
43323 */
43324
43325
43326
43327function useVStack(props) {
43328  const {
43329    expanded = false,
43330    alignment = 'stretch',
43331    ...otherProps
43332  } = useContextSystem(props, 'VStack');
43333  const hStackProps = useHStack({
43334    direction: 'column',
43335    expanded,
43336    alignment,
43337    ...otherProps
43338  });
43339  return hStackProps;
43340}
43341
43342;// CONCATENATED MODULE: ./packages/components/build-module/v-stack/component.js
43343
43344/**
43345 * External dependencies
43346 */
43347
43348/**
43349 * Internal dependencies
43350 */
43351
43352
43353
43354
43355function UnconnectedVStack(props, forwardedRef) {
43356  const vStackProps = useVStack(props);
43357  return (0,external_wp_element_namespaceObject.createElement)(component, {
43358    ...vStackProps,
43359    ref: forwardedRef
43360  });
43361}
43362
43363/**
43364 * `VStack` (or Vertical Stack) is a layout component that arranges child
43365 * elements in a vertical line.
43366 *
43367 * `VStack` can render anything inside.
43368 *
43369 * ```jsx
43370 * import {
43371 * 	__experimentalText as Text,
43372 * 	__experimentalVStack as VStack,
43373 * } from `@wordpress/components`;
43374 *
43375 * function Example() {
43376 * 	return (
43377 * 		<VStack>
43378 * 			<Text>Code</Text>
43379 * 			<Text>is</Text>
43380 * 			<Text>Poetry</Text>
43381 * 		</VStack>
43382 * 	);
43383 * }
43384 * ```
43385 */
43386const VStack = contextConnect(UnconnectedVStack, 'VStack');
43387/* harmony default export */ const v_stack_component = (VStack);
43388
43389;// CONCATENATED MODULE: ./packages/components/build-module/truncate/component.js
43390
43391/**
43392 * External dependencies
43393 */
43394
43395/**
43396 * Internal dependencies
43397 */
43398
43399
43400
43401
43402function UnconnectedTruncate(props, forwardedRef) {
43403  const truncateProps = useTruncate(props);
43404  return (0,external_wp_element_namespaceObject.createElement)(component, {
43405    as: "span",
43406    ...truncateProps,
43407    ref: forwardedRef
43408  });
43409}
43410
43411/**
43412 * `Truncate` is a typography primitive that trims text content.
43413 * For almost all cases, it is recommended that `Text`, `Heading`, or
43414 * `Subheading` is used to render text content. However,`Truncate` is
43415 * available for custom implementations.
43416 *
43417 * ```jsx
43418 * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
43419 *
43420 * function Example() {
43421 * 	return (
43422 * 		<Truncate>
43423 * 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
43424 * 			neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
43425 * 			mollis mi. Morbi id elementum massa.
43426 * 		</Truncate>
43427 * 	);
43428 * }
43429 * ```
43430 */
43431const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate');
43432/* harmony default export */ const truncate_component = (component_Truncate);
43433
43434;// CONCATENATED MODULE: ./packages/components/build-module/heading/hook.js
43435/**
43436 * Internal dependencies
43437 */
43438
43439
43440
43441
43442
43443function useHeading(props) {
43444  const {
43445    as: asProp,
43446    level = 2,
43447    ...otherProps
43448  } = useContextSystem(props, 'Heading');
43449  const as = asProp || `h${level}`;
43450  const a11yProps = {};
43451  if (typeof as === 'string' && as[0] !== 'h') {
43452    // If not a semantic `h` element, add a11y props:
43453    a11yProps.role = 'heading';
43454    a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;
43455  }
43456  const textProps = useText({
43457    color: COLORS.gray[900],
43458    size: getHeadingFontSize(level),
43459    isBlock: true,
43460    weight: config_values.fontWeightHeading,
43461    ...otherProps
43462  });
43463  return {
43464    ...textProps,
43465    ...a11yProps,
43466    as
43467  };
43468}
43469
43470;// CONCATENATED MODULE: ./packages/components/build-module/heading/component.js
43471
43472/**
43473 * External dependencies
43474 */
43475
43476/**
43477 * Internal dependencies
43478 */
43479
43480
43481
43482
43483function UnconnectedHeading(props, forwardedRef) {
43484  const headerProps = useHeading(props);
43485  return (0,external_wp_element_namespaceObject.createElement)(component, {
43486    ...headerProps,
43487    ref: forwardedRef
43488  });
43489}
43490
43491/**
43492 * `Heading` renders headings and titles using the library's typography system.
43493 *
43494 * ```jsx
43495 * import { __experimentalHeading as Heading } from "@wordpress/components";
43496 *
43497 * function Example() {
43498 *   return <Heading>Code is Poetry</Heading>;
43499 * }
43500 * ```
43501 */
43502const Heading = contextConnect(UnconnectedHeading, 'Heading');
43503/* harmony default export */ const heading_component = (Heading);
43504
43505;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/styles.js
43506
43507function color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
43508/**
43509 * External dependencies
43510 */
43511
43512/**
43513 * Internal dependencies
43514 */
43515
43516const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
43517  target: "ev9wop70"
43518} : 0)( true ? {
43519  name: "13lxv2o",
43520  styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}"
43521} : 0);
43522
43523;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/styles.js
43524
43525/**
43526 * External dependencies
43527 */
43528
43529/**
43530 * Internal dependencies
43531 */
43532
43533const padding = ({
43534  paddingSize = 'small'
43535}) => {
43536  if (paddingSize === 'none') return;
43537  const paddingValues = {
43538    small: space(2),
43539    medium: space(4)
43540  };
43541  return /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + ( true ? "" : 0),  true ? "" : 0);
43542};
43543const DropdownContentWrapperDiv = emotion_styled_base_browser_esm("div",  true ? {
43544  target: "eovvns30"
43545} : 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));
43546
43547;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/dropdown-content-wrapper.js
43548
43549/**
43550 * External dependencies
43551 */
43552
43553/**
43554 * Internal dependencies
43555 */
43556
43557
43558
43559function UnconnectedDropdownContentWrapper(props, forwardedRef) {
43560  const {
43561    paddingSize = 'small',
43562    ...derivedProps
43563  } = useContextSystem(props, 'DropdownContentWrapper');
43564  return (0,external_wp_element_namespaceObject.createElement)(DropdownContentWrapperDiv, {
43565    ...derivedProps,
43566    paddingSize: paddingSize,
43567    ref: forwardedRef
43568  });
43569}
43570
43571/**
43572 * A convenience wrapper for the `renderContent` when you want to apply
43573 * different padding. (Default is `paddingSize="small"`).
43574 *
43575 * ```jsx
43576 * import {
43577 *   Dropdown,
43578 *   __experimentalDropdownContentWrapper as DropdownContentWrapper,
43579 * } from '@wordpress/components';
43580 *
43581 * <Dropdown
43582 *   renderContent={ () => (
43583 *     <DropdownContentWrapper paddingSize="medium">
43584 *       My dropdown content
43585 *     </DropdownContentWrapper>
43586 * ) }
43587 * />
43588 * ```
43589 */
43590const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');
43591/* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper);
43592
43593;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/utils.js
43594/**
43595 * External dependencies
43596 */
43597
43598
43599
43600
43601/**
43602 * WordPress dependencies
43603 */
43604
43605
43606/**
43607 * Internal dependencies
43608 */
43609
43610k([names, a11y]);
43611const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
43612  if (!currentValue) {
43613    return '';
43614  }
43615  const currentValueIsCssVariable = /^var\(/.test(currentValue);
43616  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex();
43617
43618  // Normalize format of `colors` to simplify the following loop
43619
43620  const colorPalettes = showMultiplePalettes ? colors : [{
43621    colors: colors
43622  }];
43623  for (const {
43624    colors: paletteColors
43625  } of colorPalettes) {
43626    for (const {
43627      name: colorName,
43628      color: colorValue
43629    } of paletteColors) {
43630      const normalizedColorValue = currentValueIsCssVariable ? colorValue : w(colorValue).toHex();
43631      if (normalizedCurrentValue === normalizedColorValue) {
43632        return colorName;
43633      }
43634    }
43635  }
43636
43637  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
43638  return (0,external_wp_i18n_namespaceObject.__)('Custom');
43639};
43640
43641// The PaletteObject type has a `colors` property (an array of ColorObject),
43642// while the ColorObject type has a `color` property (the CSS color value).
43643const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
43644const isMultiplePaletteArray = arr => {
43645  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
43646};
43647
43648/**
43649 * Transform a CSS variable used as background color into the color value itself.
43650 *
43651 * @param value   The color value that may be a CSS variable.
43652 * @param element The element for which to get the computed style.
43653 * @return The background color value computed from a element.
43654 */
43655const normalizeColorValue = (value, element) => {
43656  const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
43657  if (!currentValueIsCssVariable || element === null) {
43658    return value;
43659  }
43660  const {
43661    ownerDocument
43662  } = element;
43663  const {
43664    defaultView
43665  } = ownerDocument;
43666  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;
43667  return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value;
43668};
43669
43670;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/index.js
43671
43672/**
43673 * External dependencies
43674 */
43675
43676
43677
43678
43679
43680
43681/**
43682 * WordPress dependencies
43683 */
43684
43685
43686
43687
43688/**
43689 * Internal dependencies
43690 */
43691
43692
43693
43694
43695
43696
43697
43698
43699k([names, a11y]);
43700function SinglePalette({
43701  className,
43702  clearColor,
43703  colors,
43704  onChange,
43705  value,
43706  ...additionalProps
43707}) {
43708  const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
43709    return colors.map(({
43710      color,
43711      name
43712    }, index) => {
43713      const colordColor = w(color);
43714      const isSelected = value === color;
43715      return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, {
43716        key: `${color}-${index}`,
43717        isSelected: isSelected,
43718        selectedIconProps: isSelected ? {
43719          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
43720        } : {},
43721        tooltipText: name ||
43722        // translators: %s: color hex code e.g: "#f00".
43723        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color),
43724        style: {
43725          backgroundColor: color,
43726          color
43727        },
43728        onClick: isSelected ? clearColor : () => onChange(color, index),
43729        "aria-label": name ?
43730        // translators: %s: The name of the color e.g: "vivid red".
43731        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) :
43732        // translators: %s: color hex code e.g: "#f00".
43733        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color)
43734      });
43735    });
43736  }, [colors, value, onChange, clearColor]);
43737  return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.OptionGroup, {
43738    className: className,
43739    options: colorOptions,
43740    ...additionalProps
43741  });
43742}
43743function MultiplePalettes({
43744  className,
43745  clearColor,
43746  colors,
43747  onChange,
43748  value,
43749  headingLevel
43750}) {
43751  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette');
43752  if (colors.length === 0) {
43753    return null;
43754  }
43755  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
43756    spacing: 3,
43757    className: className
43758  }, colors.map(({
43759    name,
43760    colors: colorPalette
43761  }, index) => {
43762    const id = `${instanceId}-${index}`;
43763    return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
43764      spacing: 2,
43765      key: index
43766    }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, {
43767      id: id,
43768      level: headingLevel
43769    }, name), (0,external_wp_element_namespaceObject.createElement)(SinglePalette, {
43770      clearColor: clearColor,
43771      colors: colorPalette,
43772      onChange: newColor => onChange(newColor, index),
43773      value: value,
43774      "aria-labelledby": id
43775    }));
43776  }));
43777}
43778function CustomColorPickerDropdown({
43779  isRenderedInSidebar,
43780  popoverProps: receivedPopoverProps,
43781  ...props
43782}) {
43783  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
43784    shift: true,
43785    ...(isRenderedInSidebar ? {
43786      // When in the sidebar: open to the left (stacking),
43787      // leaving the same gap as the parent popover.
43788      placement: 'left-start',
43789      offset: 34
43790    } : {
43791      // Default behavior: open below the anchor
43792      placement: 'bottom',
43793      offset: 8
43794    }),
43795    ...receivedPopoverProps
43796  }), [isRenderedInSidebar, receivedPopoverProps]);
43797  return (0,external_wp_element_namespaceObject.createElement)(dropdown, {
43798    contentClassName: "components-color-palette__custom-color-dropdown-content",
43799    popoverProps: popoverProps,
43800    ...props
43801  });
43802}
43803function UnforwardedColorPalette(props, forwardedRef) {
43804  const {
43805    asButtons,
43806    loop,
43807    clearable = true,
43808    colors = [],
43809    disableCustomColors = false,
43810    enableAlpha = false,
43811    onChange,
43812    value,
43813    __experimentalIsRenderedInSidebar = false,
43814    headingLevel = 2,
43815    'aria-label': ariaLabel,
43816    'aria-labelledby': ariaLabelledby,
43817    ...additionalProps
43818  } = props;
43819  const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value);
43820  const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() =>
43820 onChange(undefined), [onChange]);
43821  const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
43822    setNormalizedColorValue(normalizeColorValue(value, node));
43823  }, [value]);
43824  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
43825  const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
43826  const renderCustomColorPicker = () => (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, {
43827    paddingSize: "none"
43828  }, (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, {
43829    color: normalizedColorValue,
43830    onChange: color => onChange(color),
43831    enableAlpha: enableAlpha
43832  }));
43833  const isHex = value?.startsWith('#');
43834
43835  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
43836  const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
43837  const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)(
43838  // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
43839  (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.');
43840  const paletteCommonProps = {
43841    clearColor,
43842    onChange,
43843    value
43844  };
43845  const actions = !!clearable && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, {
43846    onClick: clearColor
43847  }, (0,external_wp_i18n_namespaceObject.__)('Clear'));
43848  let metaProps;
43849  if (asButtons) {
43850    metaProps = {
43851      asButtons: true
43852    };
43853  } else {
43854    const _metaProps = {
43855      asButtons: false,
43856      loop
43857    };
43858    if (ariaLabel) {
43859      metaProps = {
43860        ..._metaProps,
43861        'aria-label': ariaLabel
43862      };
43863    } else if (ariaLabelledby) {
43864      metaProps = {
43865        ..._metaProps,
43866        'aria-labelledby': ariaLabelledby
43867      };
43868    } else {
43869      metaProps = {
43870        ..._metaProps,
43871        'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
43872      };
43873    }
43874  }
43875  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
43876    spacing: 3,
43877    ref: forwardedRef,
43878    ...additionalProps
43879  }, !disableCustomColors && (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, {
43880    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
43881    renderContent: renderCustomColorPicker,
43882    renderToggle: ({
43883      isOpen,
43884      onToggle
43885    }) => (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
43886      className: "components-color-palette__custom-color-wrapper",
43887      spacing: 0
43888    }, (0,external_wp_element_namespaceObject.createElement)("button", {
43889      ref: customColorPaletteCallbackRef,
43890      className: "components-color-palette__custom-color-button",
43891      "aria-expanded": isOpen,
43892      "aria-haspopup": "true",
43893      onClick: onToggle,
43894      "aria-label": customColorAccessibleLabel,
43895      style: {
43896        background: value
43897      }
43898    }), (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
43899      className: "components-color-palette__custom-color-text-wrapper",
43900      spacing: 0.5
43901    }, (0,external_wp_element_namespaceObject.createElement)(truncate_component, {
43902      className: "components-color-palette__custom-color-name"
43903    }, value ? buttonLabelName : 'No color selected'), (0,external_wp_element_namespaceObject.createElement)(truncate_component, {
43904      className: classnames_default()('components-color-palette__custom-color-value', {
43905        'components-color-palette__custom-color-value--is-hex': isHex
43906      })
43907    }, displayValue)))
43908  }), (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, {
43909    ...metaProps,
43910    actions: actions,
43911    options: hasMultipleColorOrigins ? (0,external_wp_element_namespaceObject.createElement)(MultiplePalettes, {
43912      ...paletteCommonProps,
43913      headingLevel: headingLevel,
43914      colors: colors,
43915      value: value
43916    }) : (0,external_wp_element_namespaceObject.createElement)(SinglePalette, {
43917      ...paletteCommonProps,
43918      colors: colors,
43919      value: value
43920    })
43921  }));
43922}
43923
43924/**
43925 * Allows the user to pick a color from a list of pre-defined color entries.
43926 *
43927 * ```jsx
43928 * import { ColorPalette } from '@wordpress/components';
43929 * import { useState } from '@wordpress/element';
43930 *
43931 * const MyColorPalette = () => {
43932 *   const [ color, setColor ] = useState ( '#f00' )
43933 *   const colors = [
43934 *     { name: 'red', color: '#f00' },
43935 *     { name: 'white', color: '#fff' },
43936 *     { name: 'blue', color: '#00f' },
43937 *   ];
43938 *   return (
43939 *     <ColorPalette
43940 *       colors={ colors }
43941 *       value={ color }
43942 *       onChange={ ( color ) => setColor( color ) }
43943 *     />
43944 *   );
43945 * } );
43946 * ```
43947 */
43948const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette);
43949/* harmony default export */ const color_palette = (ColorPalette);
43950
43951;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/utils.js
43952/**
43953 * WordPress dependencies
43954 */
43955
43956
43957
43958/**
43959 * Internal dependencies
43960 */
43961
43962const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web';
43963const allUnits = {
43964  px: {
43965    value: 'px',
43966    label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
43967    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
43968    step: 1
43969  },
43970  '%': {
43971    value: '%',
43972    label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'),
43973    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'),
43974    step: 0.1
43975  },
43976  em: {
43977    value: 'em',
43978    label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'),
43979    a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'),
43980    step: 0.01
43981  },
43982  rem: {
43983    value: 'rem',
43984    label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'),
43985    a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'),
43986    step: 0.01
43987  },
43988  vw: {
43989    value: 'vw',
43990    label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
43991    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
43992    step: 0.1
43993  },
43994  vh: {
43995    value: 'vh',
43996    label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
43997    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
43998    step: 0.1
43999  },
44000  vmin: {
44001    value: 'vmin',
44002    label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
44003    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
44004    step: 0.1
44005  },
44006  vmax: {
44007    value: 'vmax',
44008    label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
44009    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
44010    step: 0.1
44011  },
44012  ch: {
44013    value: 'ch',
44014    label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
44015    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
44016    step: 0.01
44017  },
44018  ex: {
44019    value: 'ex',
44020    label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
44021    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
44022    step: 0.01
44023  },
44024  cm: {
44025    value: 'cm',
44026    label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
44027    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
44028    step: 0.001
44029  },
44030  mm: {
44031    value: 'mm',
44032    label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
44033    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
44034    step: 0.1
44035  },
44036  in: {
44037    value: 'in',
44038    label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
44039    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
44040    step: 0.001
44041  },
44042  pc: {
44043    value: 'pc',
44044    label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
44045    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
44046    step: 1
44047  },
44048  pt: {
44049    value: 'pt',
44050    label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
44051    a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
44052    step: 1
44053  }
44054};
44055
44056/**
44057 * An array of all available CSS length units.
44058 */
44059const ALL_CSS_UNITS = Object.values(allUnits);
44060
44061/**
44062 * Units of measurements. `a11yLabel` is used by screenreaders.
44063 */
44064const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];
44065const DEFAULT_UNIT = allUnits.px;
44066
44067/**
44068 * Handles legacy value + unit handling.
44069 * This component use to manage both incoming value and units separately.
44070 *
44071 * Moving forward, ideally the value should be a string that contains both
44072 * the value and unit, example: '10px'
44073 *
44074 * @param rawValue     The raw value as a string (may or may not contain the unit)
44075 * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
44076 * @param allowedUnits Units to derive from.
44077 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
44078 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
44079 * from the raw value could not be matched against the list of allowed units.
44080 */
44081function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {
44082  const initialValue = fallbackUnit ? `${rawValue !== null && rawValue !== void 0 ? rawValue : ''}${fallbackUnit}` : rawValue;
44083  return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);
44084}
44085
44086/**
44087 * Checks if units are defined.
44088 *
44089 * @param units List of units.
44090 * @return Whether the list actually contains any units.
44091 */
44092function hasUnits(units) {
44093  // Although the `isArray` check shouldn't be necessary (given the signature of
44094  // this typed function), it's better to stay on the side of caution, since
44095  // this function may be called from un-typed environments.
44096  return Array.isArray(units) && !!units.length;
44097}
44098
44099/**
44100 * Parses a quantity and unit from a raw string value, given a list of allowed
44101 * units and otherwise falling back to the default unit.
44102 *
44103 * @param rawValue     The raw value as a string (may or may not contain the unit)
44104 * @param allowedUnits Units to derive from.
44105 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
44106 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
44107 * from the raw value could not be matched against the list of allowed units.
44108 */
44109function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {
44110  let trimmedValue;
44111  let quantityToReturn;
44112  if (typeof rawValue !== 'undefined' || rawValue === null) {
44113    trimmedValue = `${rawValue}`.trim();
44114    const parsedQuantity = parseFloat(trimmedValue);
44115    quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;
44116  }
44117  const unitMatch = trimmedValue?.match(/[\d.\-\+]*\s*(.*)/);
44118  const matchedUnit = unitMatch?.[1]?.toLowerCase();
44119  let unitToReturn;
44120  if (hasUnits(allowedUnits)) {
44121    const match = allowedUnits.find(item => item.value === matchedUnit);
44122    unitToReturn = match?.value;
44123  } else {
44124    unitToReturn = DEFAULT_UNIT.value;
44125  }
44126  return [quantityToReturn, unitToReturn];
44127}
44128
44129/**
44130 * Parses quantity and unit from a raw value. Validates parsed value, using fallback
44131 * value if invalid.
44132 *
44133 * @param rawValue         The next value.
44134 * @param allowedUnits     Units to derive from.
44135 * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
44136 * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
44137 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
44138 * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
44139 * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
44140 * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of
44141 * `allowedUnits` is passed empty.
44142 */
44143function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {
44144  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);
44145
44146  // The parsed value from `parseQuantityAndUnitFromRawValue` should now be
44147  // either a real number or undefined. If undefined, use the fallback value.
44148  const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity;
44149
44150  // If no unit is parsed from the raw value, or if the fallback unit is not
44151  // defined, use the first value from the list of allowed units as fallback.
44152  let unitToReturn = parsedUnit || fallbackUnit;
44153  if (!unitToReturn && hasUnits(allowedUnits)) {
44154    unitToReturn = allowedUnits[0].value;
44155  }
44156  return [quantityToReturn, unitToReturn];
44157}
44158
44159/**
44160 * Takes a unit value and finds the matching accessibility label for the
44161 * unit abbreviation.
44162 *
44163 * @param unit Unit value (example: `px`)
44164 * @return a11y label for the unit abbreviation
44165 */
44166function getAccessibleLabelForUnit(unit) {
44167  const match = ALL_CSS_UNITS.find(item => item.value === unit);
44168  return match?.a11yLabel ? match?.a11yLabel : match?.value;
44169}
44170
44171/**
44172 * Filters available units based on values defined a list of allowed unit values.
44173 *
44174 * @param allowedUnitValues Collection of allowed unit value strings.
44175 * @param availableUnits    Collection of available unit objects.
44176 * @return Filtered units.
44177 */
44178function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {
44179  // Although the `isArray` check shouldn't be necessary (given the signature of
44180  // this typed function), it's better to stay on the side of caution, since
44181  // this function may be called from un-typed environments.
44182  return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];
44183}
44184
44185/**
44186 * Custom hook to retrieve and consolidate units setting from add_theme_support().
44187 * TODO: ideally this hook shouldn't be needed
44188 * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
44189 *
44190 * @param args                An object containing units, settingPath & defaultUnits.
44191 * @param args.units          Collection of all potentially available units.
44192 * @param args.availableUnits Collection of unit value strings for filtering available units.
44193 * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
44194 *
44195 * @return Filtered list of units, with their default values updated following the `defaultValues`
44196 * argument's property.
44197 */
44198const useCustomUnits = ({
44199  units = ALL_CSS_UNITS,
44200  availableUnits = [],
44201  defaultValues
44202}) => {
44203  const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);
44204  if (defaultValues) {
44205    customUnitsToReturn.forEach((unit, i) => {
44206      if (defaultValues[unit.value]) {
44207        const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]);
44208        customUnitsToReturn[i].default = parsedDefaultValue;
44209      }
44210    });
44211  }
44212  return customUnitsToReturn;
44213};
44214
44215/**
44216 * Get available units with the unit for the currently selected value
44217 * prepended if it is not available in the list of units.
44218 *
44219 * This is useful to ensure that the current value's unit is always
44220 * accurately displayed in the UI, even if the intention is to hide
44221 * the availability of that unit.
44222 *
44223 * @param rawValue   Selected value to parse.
44224 * @param legacyUnit Legacy unit value, if rawValue needs it appended.
44225 * @param units      List of available units.
44226 *
44227 * @return A collection of units containing the unit for the current value.
44228 */
44229function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {
44230  const unitsToReturn = Array.isArray(units) ? [...units] : [];
44231  const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);
44232  if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {
44233    if (allUnits[currentUnit]) {
44234      unitsToReturn.unshift(allUnits[currentUnit]);
44235    }
44236  }
44237  return unitsToReturn;
44238}
44239
44240;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-dropdown/hook.js
44241/**
44242 * WordPress dependencies
44243 */
44244
44245
44246/**
44247 * Internal dependencies
44248 */
44249
44250
44251
44252
44253function useBorderControlDropdown(props) {
44254  const {
44255    border,
44256    className,
44257    colors = [],
44258    enableAlpha = false,
44259    enableStyle = true,
44260    onChange,
44261    previousStyleSelection,
44262    size = 'default',
44263    __experimentalIsRenderedInSidebar = false,
44264    ...otherProps
44265  } = useContextSystem(props, 'BorderControlDropdown');
44266  const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width);
44267  const hasZeroWidth = widthValue === 0;
44268  const onColorChange = color => {
44269    const style = border?.style === 'none' ? previousStyleSelection : border?.style;
44270    const width = hasZeroWidth && !!color ? '1px' : border?.width;
44271    onChange({
44272      color,
44273      style,
44274      width
44275    });
44276  };
44277  const onStyleChange = style => {
44278    const width = hasZeroWidth && !!style ? '1px' : border?.width;
44279    onChange({
44280      ...border,
44281      style,
44282      width
44283    });
44284  };
44285  const onReset = () => {
44286    onChange({
44287      ...border,
44288      color: undefined,
44289      style: undefined
44290    });
44291  };
44292
44293  // Generate class names.
44294  const cx = useCx();
44295  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
44296    return cx(borderControlDropdown(size), className);
44297  }, [className, cx, size]);
44298  const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44299    return cx(borderColorIndicator);
44300  }, [cx]);
44301  const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44302    return cx(colorIndicatorWrapper(border, size));
44303  }, [border, cx, size]);
44304  const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44305    return cx(borderControlPopoverControls);
44306  }, [cx]);
44307  const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44308    return cx(borderControlPopoverContent);
44309  }, [cx]);
44310  const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44311    return cx(resetButton);
44312  }, [cx]);
44313  return {
44314    ...otherProps,
44315    border,
44316    className: classes,
44317    colors,
44318    enableAlpha,
44319    enableStyle,
44320    indicatorClassName,
44321    indicatorWrapperClassName,
44322    onColorChange,
44323    onStyleChange,
44324    onReset,
44325    popoverContentClassName,
44326    popoverControlsClassName,
44327    resetButtonClassName,
44328    __experimentalIsRenderedInSidebar
44329  };
44330}
44331
44332;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-dropdown/component.js
44333
44334/**
44335 * External dependencies
44336 */
44337
44338/**
44339 * WordPress dependencies
44340 */
44341
44342
44343
44344/**
44345 * Internal dependencies
44346 */
44347
44348
44349
44350
44351
44352
44353
44354
44355
44356
44357
44358
44359const getAriaLabelColorValue = colorValue => {
44360  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
44361  return colorValue.replace(/^var\((.+)\)$/, '$1');
44362};
44363const getColorObject = (colorValue, colors) => {
44364  if (!colorValue || !colors) {
44365    return;
44366  }
44367  if (isMultiplePaletteArray(colors)) {
44368    // Multiple origins
44369    let matchedColor;
44370    colors.some(origin => origin.colors.some(color => {
44371      if (color.color === colorValue) {
44372        matchedColor = color;
44373        return true;
44374      }
44375      return false;
44376    }));
44377    return matchedColor;
44378  }
44379
44380  // Single origin
44381  return colors.find(color => color.color === colorValue);
44382};
44383const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
44384  if (isStyleEnabled) {
44385    if (colorObject) {
44386      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
44387      return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
44388      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
44389      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
44390      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
44391      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
44392    }
44393    if (colorValue) {
44394      const ariaLabelValue = getAriaLabelColorValue(colorValue);
44395      return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
44396      // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
44397      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(
44398      // translators: %1$s: The color's hex code e.g: "#f00".
44399      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
44400    }
44401    return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.');
44402  }
44403  if (colorObject) {
44404    return (0,external_wp_i18n_namespaceObject.sprintf)(
44405    // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
44406    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
44407  }
44408  if (colorValue) {
44409    return (0,external_wp_i18n_namespaceObject.sprintf)(
44410    // translators: %1$s: The color's hex code e.g: "#f00".
44411    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
44412  }
44413  return (0,external_wp_i18n_namespaceObject.__)('Border color picker.');
44414};
44415const BorderControlDropdown = (props, forwardedRef) => {
44416  const {
44417    __experimentalIsRenderedInSidebar,
44418    border,
44419    colors,
44420    disableCustomColors,
44421    enableAlpha,
44422    enableStyle,
44423    indicatorClassName,
44424    indicatorWrapperClassName,
44425    onReset,
44426    onColorChange,
44427    onStyleChange,
44428    popoverContentClassName,
44429    popoverControlsClassName,
44430    resetButtonClassName,
44431    showDropdownHeader,
44432    __unstablePopoverProps,
44433    ...otherProps
44434  } = useBorderControlDropdown(props);
44435  const {
44436    color,
44437    style
44438  } = border || {};
44439  const colorObject = getColorObject(color, colors);
44440  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
44441  const showResetButton = color || style && style !== 'none';
44442  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
44443  const renderToggle = ({
44444    onToggle
44445  }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
44446    onClick: onToggle,
44447    variant: "tertiary",
44448    "aria-label": toggleAriaLabel,
44449    tooltipPosition: dropdownPosition,
44450    label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'),
44451    showTooltip: true
44452  }, (0,external_wp_element_namespaceObject.createElement)("span", {
44453    className: indicatorWrapperClassName
44454  }, (0,external_wp_element_namespaceObject.createElement)(color_indicator, {
44455    className: indicatorClassName,
44456    colorValue: color
44457  })));
44458  const renderContent = ({
44459    onClose
44460  }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, {
44461    paddingSize: "medium"
44462  }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
44463    className: popoverControlsClassName,
44464    spacing: 6
44465  }, showDropdownHeader ? (0,external_wp_element_namespaceObject.createElement)(h_stack_component, null, (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, (0,external_wp_i18n_namespaceObject.__)('Border color')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
44466    isSmall: true,
44467    label: (0,external_wp_i18n_namespaceObject.__)('Close border color'),
44468    icon: close_small,
44469    onClick: onClose
44470  })) : undefined, (0,external_wp_element_namespaceObject.createElement)(color_palette, {
44471    className: popoverContentClassName,
44472    value: color,
44473    onChange: onColorChange,
44474    colors,
44475    disableCustomColors,
44476    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
44477    clearable: false,
44478    enableAlpha: enableAlpha
44479  }), enableStyle && (0,external_wp_element_namespaceObject.createElement)(border_control_style_picker_component, {
44480    label: (0,external_wp_i18n_namespaceObject.__)('Style'),
44481    value: style,
44482    onChange: onStyleChange
44483  }))), showResetButton && (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, {
44484    paddingSize: "none"
44485  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
44486    className: resetButtonClassName,
44487    variant: "tertiary",
44488    onClick: () => {
44489      onReset();
44490      onClose();
44491    }
44492  }, (0,external_wp_i18n_namespaceObject.__)('Reset'))));
44493  return (0,external_wp_element_namespaceObject.createElement)(dropdown, {
44494    renderToggle: renderToggle,
44495    renderContent: renderContent,
44496    popoverProps: {
44497      ...__unstablePopoverProps
44498    },
44499    ...otherProps,
44500    ref: forwardedRef
44501  });
44502};
44503const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
44504/* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown);
44505
44506;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/unit-select-control.js
44507
44508/**
44509 * External dependencies
44510 */
44511
44512/**
44513 * WordPress dependencies
44514 */
44515
44516
44517/**
44518 * Internal dependencies
44519 */
44520
44521
44522
44523function UnitSelectControl({
44524  className,
44525  isUnitSelectTabbable: isTabbable = true,
44526  onChange,
44527  size = 'default',
44528  unit = 'px',
44529  units = CSS_UNITS,
44530  ...props
44531}, ref) {
44532  if (!hasUnits(units) || units?.length === 1) {
44533    return (0,external_wp_element_namespaceObject.createElement)(UnitLabel, {
44534      className: "components-unit-control__unit-label",
44535      selectSize: size
44536    }, unit);
44537  }
44538  const handleOnChange = event => {
44539    const {
44540      value: unitValue
44541    } = event.target;
44542    const data = units.find(option => option.value === unitValue);
44543    onChange?.(unitValue, {
44544      event,
44545      data
44546    });
44547  };
44548  const classes = classnames_default()('components-unit-control__select', className);
44549  return (0,external_wp_element_namespaceObject.createElement)(UnitSelect, {
44550    ref: ref,
44551    className: classes,
44552    onChange: handleOnChange,
44553    selectSize: size,
44554    tabIndex: isTabbable ? undefined : -1,
44555    value: unit,
44556    ...props
44557  }, units.map(option => (0,external_wp_element_namespaceObject.createElement)("option", {
44558    value: option.value,
44559    key: option.value
44560  }, option.label)));
44561}
44562/* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl));
44563
44564;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/index.js
44565
44566/**
44567 * External dependencies
44568 */
44569
44570
44571
44572/**
44573 * WordPress dependencies
44574 */
44575
44576
44577
44578
44579/**
44580 * Internal dependencies
44581 */
44582
44583
44584
44585
44586
44587
44588function UnforwardedUnitControl(unitControlProps, forwardedRef) {
44589  const {
44590    __unstableStateReducer,
44591    autoComplete = 'off',
44592    // @ts-expect-error Ensure that children is omitted from restProps
44593    children,
44594    className,
44595    disabled = false,
44596    disableUnits = false,
44597    isPressEnterToChange = false,
44598    isResetValueOnUnitChange = false,
44599    isUnitSelectTabbable = true,
44600    label,
44601    onChange: onChangeProp,
44602    onUnitChange,
44603    size = 'default',
44604    unit: unitProp,
44605    units: unitsProp = CSS_UNITS,
44606    value: valueProp,
44607    onFocus: onFocusProp,
44608    ...props
44609  } = unitControlProps;
44610  if ('unit' in unitControlProps) {
44611    external_wp_deprecated_default()('UnitControl unit prop', {
44612      since: '5.6',
44613      hint: 'The unit should be provided within the `value` prop.',
44614      version: '6.2'
44615    });
44616  }
44617
44618  // The `value` prop, in theory, should not be `null`, but the following line
44619  // ensures it fallback to `undefined` in case a consumer of `UnitControl`
44620  // still passes `null` as a `value`.
44621  const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
44622  const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => {
44623    const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp);
44624    const [{
44625      value: firstUnitValue = ''
44626    } = {}, ...rest] = list;
44627    const firstCharacters = rest.reduce((carry, {
44628      value
44629    }) => {
44630      const first = escapeRegExp(value?.substring(0, 1) || '');
44631      return carry.includes(first) ? carry : `${carry}|${first}`;
44632    }, escapeRegExp(firstUnitValue.substring(0, 1)));
44633    return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];
44634  }, [nonNullValueProp, unitProp, unitsProp]);
44635  const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units);
44636  const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, {
44637    initial: parsedUnit,
44638    fallback: ''
44639  });
44640  (0,external_wp_element_namespaceObject.useEffect)(() => {
44641    if (parsedUnit !== undefined) {
44642      setUnit(parsedUnit);
44643    }
44644  }, [parsedUnit, setUnit]);
44645  const classes = classnames_default()('components-unit-control',
44646  // This class is added for legacy purposes to maintain it on the outer
44647  // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
44648  'components-unit-control-wrapper', className);
44649  const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
44650    if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
44651      onChangeProp?.('', changeProps);
44652      return;
44653    }
44654
44655    /*
44656     * Customizing the onChange callback.
44657     * This allows as to broadcast a combined value+unit to onChange.
44658     */
44659    const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join('');
44660    onChangeProp?.(onChangeValue, changeProps);
44661  };
44662  const handleOnUnitChange = (nextUnitValue, changeProps) => {
44663    const {
44664      data
44665    } = changeProps;
44666    let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`;
44667    if (isResetValueOnUnitChange && data?.default !== undefined) {
44668      nextValue = `${data.default}${nextUnitValue}`;
44669    }
44670    onChangeProp?.(nextValue, changeProps);
44671    onUnitChange?.(nextUnitValue, changeProps);
44672    setUnit(nextUnitValue);
44673  };
44674  let handleOnKeyDown;
44675  if (!disableUnits && isUnitSelectTabbable && units.length) {
44676    handleOnKeyDown = event => {
44677      props.onKeyDown?.(event);
44678      // Unless the meta key was pressed (to avoid interfering with
44679      // shortcuts, e.g. pastes), moves focus to the unit select if a key
44680      // matches the first character of a unit.
44681      if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus();
44682    };
44683  }
44684  const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null);
44685  const inputSuffix = !disableUnits ? (0,external_wp_element_namespaceObject.createElement)(unit_select_control, {
44686    ref: refInputSuffix,
44687    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'),
44688    disabled: disabled,
44689    isUnitSelectTabbable: isUnitSelectTabbable,
44690    onChange: handleOnUnitChange,
44691    size: size,
44692    unit: unit,
44693    units: units,
44694    onFocus: onFocusProp,
44695    onBlur: unitControlProps.onBlur
44696  }) : null;
44697  let step = props.step;
44698
44699  /*
44700   * If no step prop has been passed, lookup the active unit and
44701   * try to get step from `units`, or default to a value of `1`
44702   */
44703  if (!step && units) {
44704    var _activeUnit$step;
44705    const activeUnit = units.find(option => option.value === unit);
44706    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
44707  }
44708  return (0,external_wp_element_namespaceObject.createElement)(ValueInput, {
44709    ...props,
44710    autoComplete: autoComplete,
44711    className: classes,
44712    disabled: disabled,
44713    spinControls: "none",
44714    isPressEnterToChange: isPressEnterToChange,
44715    label: label,
44716    onKeyDown: handleOnKeyDown,
44717    onChange: handleOnQuantityChange,
44718    ref: forwardedRef,
44719    size: size,
44720    suffix: inputSuffix,
44721    type: isPressEnterToChange ? 'text' : 'number',
44722    value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
44723    step: step,
44724    onFocus: onFocusProp,
44725    __unstableStateReducer: __unstableStateReducer
44726  });
44727}
44728
44729/**
44730 * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
44731 *
44732 *
44733 * ```jsx
44734 * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
44735 * import { useState } from '@wordpress/element';
44736 *
44737 * const Example = () => {
44738 *   const [ value, setValue ] = useState( '10px' );
44739 *
44740 *   return <UnitControl onChange={ setValue } value={ value } />;
44741 * };
44742 * ```
44743 */
44744const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl);
44745
44746/* harmony default export */ const unit_control = (UnitControl);
44747
44748;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control/hook.js
44749/**
44750 * WordPress dependencies
44751 */
44752
44753
44754/**
44755 * Internal dependencies
44756 */
44757
44758
44759
44760
44761const sanitizeBorder = border => {
44762  const hasNoWidth = border?.width === undefined || border.width === '';
44763  const hasNoColor = border?.color === undefined;
44764
44765  // If width and color are undefined, unset any style selection as well.
44766  if (hasNoWidth && hasNoColor) {
44767    return undefined;
44768  }
44769  return border;
44770};
44771function useBorderControl(props) {
44772  const {
44773    className,
44774    colors = [],
44775    isCompact,
44776    onChange,
44777    enableAlpha = true,
44778    enableStyle = true,
44779    shouldSanitizeBorder = true,
44780    size = 'default',
44781    value: border,
44782    width,
44783    __experimentalIsRenderedInSidebar = false,
44784    ...otherProps
44785  } = useContextSystem(props, 'BorderControl');
44786  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
44787  const widthUnit = originalWidthUnit || 'px';
44788  const hadPreviousZeroWidth = widthValue === 0;
44789  const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)();
44790  const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)();
44791  const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => {
44792    if (shouldSanitizeBorder) {
44793      return onChange(sanitizeBorder(newBorder));
44794    }
44795    onChange(newBorder);
44796  }, [onChange, shouldSanitizeBorder]);
44797  const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => {
44798    const newWidthValue = newWidth === '' ? undefined : newWidth;
44799    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
44800    const hasZeroWidth = parsedValue === 0;
44801    const updatedBorder = {
44802      ...border,
44803      width: newWidthValue
44804    };
44805
44806    // Setting the border width explicitly to zero will also set the
44807    // border style to `none` and clear the border color.
44808    if (hasZeroWidth && !hadPreviousZeroWidth) {
44809      // Before clearing the color and style selections, keep track of
44810      // the current selections so they can be restored when the width
44811      // changes to a non-zero value.
44812      setColorSelection(border?.color);
44813      setStyleSelection(border?.style);
44814
44815      // Clear the color and style border properties.
44816      updatedBorder.color = undefined;
44817      updatedBorder.style = 'none';
44818    }
44819
44820    // Selection has changed from zero border width to non-zero width.
44821    if (!hasZeroWidth && hadPreviousZeroWidth) {
44822      // Restore previous border color and style selections if width
44823      // is now not zero.
44824      if (updatedBorder.color === undefined) {
44825        updatedBorder.color = colorSelection;
44826      }
44827      if (updatedBorder.style === 'none') {
44828        updatedBorder.style = styleSelection;
44829      }
44830    }
44831    onBorderChange(updatedBorder);
44832  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
44833  const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => {
44834    onWidthChange(`${value}${widthUnit}`);
44835  }, [onWidthChange, widthUnit]);
44836
44837  // Generate class names.
44838  const cx = useCx();
44839  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
44840    return cx(borderControl, className);
44841  }, [className, cx]);
44842  let wrapperWidth = width;
44843  if (isCompact) {
44844    // Widths below represent the minimum usable width for compact controls.
44845    // Taller controls contain greater internal padding, thus greater width.
44846    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
44847  }
44848  const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44849    const widthStyle = !!wrapperWidth && styles_wrapperWidth;
44850    const heightStyle = wrapperHeight(size);
44851    return cx(innerWrapper(), widthStyle, heightStyle);
44852  }, [wrapperWidth, cx, size]);
44853  const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
44854    return cx(borderSlider());
44855  }, [cx]);
44856  return {
44857    ...otherProps,
44858    className: classes,
44859    colors,
44860    enableAlpha,
44861    enableStyle,
44862    innerWrapperClassName,
44863    inputWidth: wrapperWidth,
44864    onBorderChange,
44865    onSliderChange,
44866    onWidthChange,
44867    previousStyleSelection: styleSelection,
44868    sliderClassName,
44869    value: border,
44870    widthUnit,
44871    widthValue,
44872    size,
44873    __experimentalIsRenderedInSidebar
44874  };
44875}
44876
44877;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control/component.js
44878
44879/**
44880 * WordPress dependencies
44881 */
44882
44883
44884/**
44885 * Internal dependencies
44886 */
44887
44888
44889
44890
44891
44892
44893
44894
44895
44896const BorderLabel = props => {
44897  const {
44898    label,
44899    hideLabelFromVision
44900  } = props;
44901  if (!label) {
44902    return null;
44903  }
44904  return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
44905    as: "legend"
44906  }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, {
44907    as: "legend"
44908  }, label);
44909};
44910const UnconnectedBorderControl = (props, forwardedRef) => {
44911  const {
44912    colors,
44913    disableCustomColors,
44914    disableUnits,
44915    enableAlpha,
44916    enableStyle,
44917    hideLabelFromVision,
44918    innerWrapperClassName,
44919    inputWidth,
44920    label,
44921    onBorderChange,
44922    onSliderChange,
44923    onWidthChange,
44924    placeholder,
44925    __unstablePopoverProps,
44926    previousStyleSelection,
44927    showDropdownHeader,
44928    size,
44929    sliderClassName,
44930    value: border,
44931    widthUnit,
44932    widthValue,
44933    withSlider,
44934    __experimentalIsRenderedInSidebar,
44935    ...otherProps
44936  } = useBorderControl(props);
44937  return (0,external_wp_element_namespaceObject.createElement)(component, {
44938    as: "fieldset",
44939    ...otherProps,
44940    ref: forwardedRef
44941  }, (0,external_wp_element_namespaceObject.createElement)(BorderLabel, {
44942    label: label,
44943    hideLabelFromVision: hideLabelFromVision
44944  }), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
44945    spacing: 4,
44946    className: innerWrapperClassName
44947  }, (0,external_wp_element_namespaceObject.createElement)(unit_control, {
44948    prefix: (0,external_wp_element_namespaceObject.createElement)(border_control_dropdown_component, {
44949      border: border,
44950      colors: colors,
44951      __unstablePopoverProps: __unstablePopoverProps,
44952      disableCustomColors: disableCustomColors,
44953      enableAlpha: enableAlpha,
44954      enableStyle: enableStyle,
44955      onChange: onBorderChange,
44956      previousStyleSelection: previousStyleSelection,
44957      showDropdownHeader: showDropdownHeader,
44958      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
44959      size: size
44960    }),
44961    label: (0,external_wp_i18n_namespaceObject.__)('Border width'),
44962    hideLabelFromVision: true,
44963    min: 0,
44964    onChange: onWidthChange,
44965    value: border?.width || '',
44966    placeholder: placeholder,
44967    disableUnits: disableUnits,
44968    __unstableInputWidth: inputWidth,
44969    size: size
44970  }), withSlider && (0,external_wp_element_namespaceObject.createElement)(range_control, {
44971    __nextHasNoMarginBottom: true,
44972    label: (0,external_wp_i18n_namespaceObject.__)('Border width'),
44973    hideLabelFromVision: true,
44974    className: sliderClassName,
44975    initialPosition: 0,
44976    max: 100,
44977    min: 0,
44978    onChange: onSliderChange,
44979    step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
44980    value: widthValue || undefined,
44981    withInputField: false
44982  })));
44983};
44984
44985/**
44986 * The `BorderControl` brings together internal sub-components which allow users to
44987 * set the various properties of a border. The first sub-component, a
44988 * `BorderDropdown` contains options representing border color and style. The
44989 * border width is controlled via a `UnitControl` and an optional `RangeControl`.
44990 *
44991 * Border radius is not covered by this control as it may be desired separate to
44992 * color, style, and width. For example, the border radius may be absorbed under
44993 * a "shape" abstraction.
44994 *
44995 * ```jsx
44996 * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
44997 * import { __ } from '@wordpress/i18n';
44998 *
44999 * const colors = [
45000 * 	{ name: 'Blue 20', color: '#72aee6' },
45001 * 	// ...
45002 * ];
45003 *
45004 * const MyBorderControl = () => {
45005 * 	const [ border, setBorder ] = useState();
45006 * 	const onChange = ( newBorder ) => setBorder( newBorder );
45007 *
45008 * 	return (
45009 * 		<BorderControl
45010 * 			colors={ colors }
45011 * 			label={ __( 'Border' ) }
45012 * 			onChange={ onChange }
45013 * 			value={ border }
45014 * 		/>
45015 * 	);
45016 * };
45017 * ```
45018 */
45019const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
45020/* harmony default export */ const border_control_component = (BorderControl);
45021
45022;// CONCATENATED MODULE: ./packages/components/build-module/grid/utils.js
45023/**
45024 * External dependencies
45025 */
45026
45027const utils_ALIGNMENTS = {
45028  bottom: {
45029    alignItems: 'flex-end',
45030    justifyContent: 'center'
45031  },
45032  bottomLeft: {
45033    alignItems: 'flex-start',
45034    justifyContent: 'flex-end'
45035  },
45036  bottomRight: {
45037    alignItems: 'flex-end',
45038    justifyContent: 'flex-end'
45039  },
45040  center: {
45041    alignItems: 'center',
45042    justifyContent: 'center'
45043  },
45044  spaced: {
45045    alignItems: 'center',
45046    justifyContent: 'space-between'
45047  },
45048  left: {
45049    alignItems: 'center',
45050    justifyContent: 'flex-start'
45051  },
45052  right: {
45053    alignItems: 'center',
45054    justifyContent: 'flex-end'
45055  },
45056  stretch: {
45057    alignItems: 'stretch'
45058  },
45059  top: {
45060    alignItems: 'flex-start',
45061    justifyContent: 'center'
45062  },
45063  topLeft: {
45064    alignItems: 'flex-start',
45065    justifyContent: 'flex-start'
45066  },
45067  topRight: {
45068    alignItems: 'flex-start',
45069    justifyContent: 'flex-end'
45070  }
45071};
45072function utils_getAlignmentProps(alignment) {
45073  const alignmentProps = alignment ? utils_ALIGNMENTS[alignment] : {};
45074  return alignmentProps;
45075}
45076
45077;// CONCATENATED MODULE: ./packages/components/build-module/grid/hook.js
45078/**
45079 * External dependencies
45080 */
45081
45082
45083/**
45084 * WordPress dependencies
45085 */
45086
45087
45088/**
45089 * Internal dependencies
45090 */
45091
45092
45093
45094
45095
45096
45097function useGrid(props) {
45098  const {
45099    align,
45100    alignment,
45101    className,
45102    columnGap,
45103    columns = 2,
45104    gap = 3,
45105    isInline = false,
45106    justify,
45107    rowGap,
45108    rows,
45109    templateColumns,
45110    templateRows,
45111    ...otherProps
45112  } = useContextSystem(props, 'Grid');
45113  const columnsAsArray = Array.isArray(columns) ? columns : [columns];
45114  const column = useResponsiveValue(columnsAsArray);
45115  const rowsAsArray = Array.isArray(rows) ? rows : [rows];
45116  const row = useResponsiveValue(rowsAsArray);
45117  const gridTemplateColumns = templateColumns || !!columns && `repeat( ${column}, 1fr )`;
45118  const gridTemplateRows = templateRows || !!rows && `repeat( ${row}, 1fr )`;
45119  const cx = useCx();
45120  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
45121    const alignmentProps = utils_getAlignmentProps(alignment);
45122    const gridClasses = /*#__PURE__*/emotion_react_browser_esm_css({
45123      alignItems: align,
45124      display: isInline ? 'inline-grid' : 'grid',
45125      gap: `calc( ${config_values.gridBase} * ${gap} )`,
45126      gridTemplateColumns: gridTemplateColumns || undefined,
45127      gridTemplateRows: gridTemplateRows || undefined,
45128      gridRowGap: rowGap,
45129      gridColumnGap: columnGap,
45130      justifyContent: justify,
45131      verticalAlign: isInline ? 'middle' : undefined,
45132      ...alignmentProps
45133    },  true ? "" : 0,  true ? "" : 0);
45134    return cx(gridClasses, className);
45135  }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
45136  return {
45137    ...otherProps,
45138    className: classes
45139  };
45140}
45141
45142;// CONCATENATED MODULE: ./packages/components/build-module/grid/component.js
45143
45144/**
45145 * External dependencies
45146 */
45147
45148/**
45149 * Internal dependencies
45150 */
45151
45152
45153
45154
45155function UnconnectedGrid(props, forwardedRef) {
45156  const gridProps = useGrid(props);
45157  return (0,external_wp_element_namespaceObject.createElement)(component, {
45158    ...gridProps,
45159    ref: forwardedRef
45160  });
45161}
45162
45163/**
45164 * `Grid` is a primitive layout component that can arrange content in a grid configuration.
45165 *
45166 * ```jsx
45167 * import {
45168 * 	__experimentalGrid as Grid,
45169 * 	__experimentalText as Text
45170 * } from `@wordpress/components`;
45171 *
45172 * function Example() {
45173 * 	return (
45174 * 		<Grid columns={ 3 }>
45175 * 			<Text>Code</Text>
45176 * 			<Text>is</Text>
45177 * 			<Text>Poetry</Text>
45178 * 		</Grid>
45179 * 	);
45180 * }
45181 * ```
45182 */
45183const Grid = contextConnect(UnconnectedGrid, 'Grid');
45184/* harmony default export */ const grid_component = (Grid);
45185
45186;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-split-control
45186s/hook.js
45187/**
45188 * WordPress dependencies
45189 */
45190
45191
45192/**
45193 * Internal dependencies
45194 */
45195
45196
45197
45198function useBorderBoxControlSplitControls(props) {
45199  const {
45200    className,
45201    colors = [],
45202    enableAlpha = false,
45203    enableStyle = true,
45204    size = 'default',
45205    __experimentalIsRenderedInSidebar = false,
45206    ...otherProps
45207  } = useContextSystem(props, 'BorderBoxControlSplitControls');
45208
45209  // Generate class names.
45210  const cx = useCx();
45211  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
45212    return cx(borderBoxControlSplitControls(size), className);
45213  }, [cx, className, size]);
45214  const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
45215    return cx(centeredBorderControl, className);
45216  }, [cx, className]);
45217  const rightAlignedClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
45218    return cx(rightBorderControl(), className);
45219  }, [cx, className]);
45220  return {
45221    ...otherProps,
45222    centeredClassName,
45223    className: classes,
45224    colors,
45225    enableAlpha,
45226    enableStyle,
45227    rightAlignedClassName,
45228    size,
45229    __experimentalIsRenderedInSidebar
45230  };
45231}
45232
45233;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-split-controls/component.js
45234
45235/**
45236 * WordPress dependencies
45237 */
45238
45239
45240
45241
45242/**
45243 * Internal dependencies
45244 */
45245
45246
45247
45248
45249
45250const BorderBoxControlSplitControls = (props, forwardedRef) => {
45251  const {
45252    centeredClassName,
45253    colors,
45254    disableCustomColors,
45255    enableAlpha,
45256    enableStyle,
45257    onChange,
45258    popoverPlacement,
45259    popoverOffset,
45260    rightAlignedClassName,
45261    size = 'default',
45262    value,
45263    __experimentalIsRenderedInSidebar,
45264    ...otherProps
45265  } = useBorderBoxControlSplitControls(props);
45266
45267  // Use internal state instead of a ref to make sure that the component
45268  // re-renders when the popover's anchor updates.
45269  const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
45270
45271  // Memoize popoverProps to avoid returning a new object every time.
45272  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
45273    placement: popoverPlacement,
45274    offset: popoverOffset,
45275    anchor: popoverAnchor,
45276    shift: true
45277  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
45278  const sharedBorderControlProps = {
45279    colors,
45280    disableCustomColors,
45281    enableAlpha,
45282    enableStyle,
45283    isCompact: true,
45284    __experimentalIsRenderedInSidebar,
45285    size
45286  };
45287  const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
45288  return (0,external_wp_element_namespaceObject.createElement)(grid_component, {
45289    ...otherProps,
45290    ref: mergedRef,
45291    gap: 4
45292  }, (0,external_wp_element_namespaceObject.createElement)(border_box_control_visualizer_component, {
45293    value: value,
45294    size: size
45295  }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, {
45296    className: centeredClassName,
45297    hideLabelFromVision: true,
45298    label: (0,external_wp_i18n_namespaceObject.__)('Top border'),
45299    onChange: newBorder => onChange(newBorder, 'top'),
45300    __unstablePopoverProps: popoverProps,
45301    value: value?.top,
45302    ...sharedBorderControlProps
45303  }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, {
45304    hideLabelFromVision: true,
45305    label: (0,external_wp_i18n_namespaceObject.__)('Left border'),
45306    onChange: newBorder => onChange(newBorder, 'left'),
45307    __unstablePopoverProps: popoverProps,
45308    value: value?.left,
45309    ...sharedBorderControlProps
45310  }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, {
45311    className: rightAlignedClassName,
45312    hideLabelFromVision: true,
45313    label: (0,external_wp_i18n_namespaceObject.__)('Right border'),
45314    onChange: newBorder => onChange(newBorder, 'right'),
45315    __unstablePopoverProps: popoverProps,
45316    value: value?.right,
45317    ...sharedBorderControlProps
45318  }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, {
45319    className: centeredClassName,
45320    hideLabelFromVision: true,
45321    label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'),
45322    onChange: newBorder => onChange(newBorder, 'bottom'),
45323    __unstablePopoverProps: popoverProps,
45324    value: value?.bottom,
45325    ...sharedBorderControlProps
45326  }));
45327};
45328const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
45329/* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls);
45330
45331;// CONCATENATED MODULE: ./packages/components/build-module/utils/unit-values.js
45332const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
45333
45334/**
45335 * Parses a number and unit from a value.
45336 *
45337 * @param toParse Value to parse
45338 *
45339 * @return  The extracted number and unit.
45340 */
45341function parseCSSUnitValue(toParse) {
45342  const value = toParse.trim();
45343  const matched = value.match(UNITED_VALUE_REGEX);
45344  if (!matched) {
45345    return [undefined, undefined];
45346  }
45347  const [, num, unit] = matched;
45348  let numParsed = parseFloat(num);
45349  numParsed = Number.isNaN(numParsed) ? undefined : numParsed;
45350  return [numParsed, unit];
45351}
45352
45353/**
45354 * Combines a value and a unit into a unit value.
45355 *
45356 * @param value
45357 * @param unit
45358 *
45359 * @return The unit value.
45360 */
45361function createCSSUnitValue(value, unit) {
45362  return `${value}${unit}`;
45363}
45364
45365;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/utils.js
45366/**
45367 * External dependencies
45368 */
45369
45370/**
45371 * Internal dependencies
45372 */
45373
45374const utils_sides = ['top', 'right', 'bottom', 'left'];
45375const borderProps = ['color', 'style', 'width'];
45376const isEmptyBorder = border => {
45377  if (!border) {
45378    return true;
45379  }
45380  return !borderProps.some(prop => border[prop] !== undefined);
45381};
45382const isDefinedBorder = border => {
45383  // No border, no worries :)
45384  if (!border) {
45385    return false;
45386  }
45387
45388  // If we have individual borders per side within the border object we
45389  // need to check whether any of those side borders have been set.
45390  if (hasSplitBorders(border)) {
45391    const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side]));
45392    return !allSidesEmpty;
45393  }
45394
45395  // If we have a top-level border only, check if that is empty. e.g.
45396  // { color: undefined, style: undefined, width: undefined }
45397  // Border radius can still be set within the border object as it is
45398  // handled separately.
45399  return !isEmptyBorder(border);
45400};
45401const isCompleteBorder = border => {
45402  if (!border) {
45403    return false;
45404  }
45405  return borderProps.every(prop => border[prop] !== undefined);
45406};
45407const hasSplitBorders = (border = {}) => {
45408  return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1);
45409};
45410const hasMixedBorders = borders => {
45411  if (!hasSplitBorders(borders)) {
45412    return false;
45413  }
45414  const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side]));
45415  return !shorthandBorders.every(border => border === shorthandBorders[0]);
45416};
45417const getSplitBorders = border => {
45418  if (!border || isEmptyBorder(border)) {
45419    return undefined;
45420  }
45421  return {
45422    top: border,
45423    right: border,
45424    bottom: border,
45425    left: border
45426  };
45427};
45428const getBorderDiff = (original, updated) => {
45429  const diff = {};
45430  if (original.color !== updated.color) {
45431    diff.color = updated.color;
45432  }
45433  if (original.style !== updated.style) {
45434    diff.style = updated.style;
45435  }
45436  if (original.width !== updated.width) {
45437    diff.width = updated.width;
45438  }
45439  return diff;
45440};
45441const getCommonBorder = borders => {
45442  if (!borders) {
45443    return undefined;
45444  }
45445  const colors = [];
45446  const styles = [];
45447  const widths = [];
45448  utils_sides.forEach(side => {
45449    colors.push(borders[side]?.color);
45450    styles.push(borders[side]?.style);
45451    widths.push(borders[side]?.width);
45452  });
45453  const allColorsMatch = colors.every(value => value === colors[0]);
45454  const allStylesMatch = styles.every(value => value === styles[0]);
45455  const allWidthsMatch = widths.every(value => value === widths[0]);
45456  return {
45457    color: allColorsMatch ? colors[0] : undefined,
45458    style: allStylesMatch ? styles[0] : undefined,
45459    width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)
45460  };
45461};
45462const getShorthandBorderStyle = (border, fallbackBorder) => {
45463  if (isEmptyBorder(border)) {
45464    return fallbackBorder;
45465  }
45466  const {
45467    color: fallbackColor,
45468    style: fallbackStyle,
45469    width: fallbackWidth
45470  } = fallbackBorder || {};
45471  const {
45472    color = fallbackColor,
45473    style = fallbackStyle,
45474    width = fallbackWidth
45475  } = border;
45476  const hasVisibleBorder = !!width && width !== '0' || !!color;
45477  const borderStyle = hasVisibleBorder ? style || 'solid' : style;
45478  return [width, borderStyle, color].filter(Boolean).join(' ');
45479};
45480const getMostCommonUnit = values => {
45481  // Collect all the CSS units.
45482  const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);
45483
45484  // Return the most common unit out of only the defined CSS units.
45485  const filteredUnits = units.filter(value => value !== undefined);
45486  return mode(filteredUnits);
45487};
45488
45489/**
45490 * Finds the mode value out of the array passed favouring the first value
45491 * as a tiebreaker.
45492 *
45493 * @param values Values to determine the mode from.
45494 *
45495 * @return The mode value.
45496 */
45497function mode(values) {
45498  if (values.length === 0) {
45499    return undefined;
45500  }
45501  const map = {};
45502  let maxCount = 0;
45503  let currentMode;
45504  values.forEach(value => {
45505    map[value] = map[value] === undefined ? 1 : map[value] + 1;
45506    if (map[value] > maxCount) {
45507      currentMode = value;
45508      maxCount = map[value];
45509    }
45510  });
45511  return currentMode;
45512}
45513
45514;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control/hook.js
45515/**
45516 * WordPress dependencies
45517 */
45518
45519
45520/**
45521 * Internal dependencies
45522 */
45523
45524
45525
45526
45527function useBorderBoxControl(props) {
45528  const {
45529    className,
45530    colors = [],
45531    onChange,
45532    enableAlpha = false,
45533    enableStyle = true,
45534    size = 'default',
45535    value,
45536    __experimentalIsRenderedInSidebar = false,
45537    ...otherProps
45538  } = useContextSystem(props, 'BorderBoxControl');
45539  const mixedBorders = hasMixedBorders(value);
45540  const splitBorders = hasSplitBorders(value);
45541  const linkedValue = splitBorders ? getCommonBorder(value) : value;
45542  const splitValue = splitBorders ? value : getSplitBorders(value);
45543
45544  // If no numeric width value is set, the unit select will be disabled.
45545  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));
45546  const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders);
45547  const toggleLinked = () => setIsLinked(!isLinked);
45548  const onLinkedChange = newBorder => {
45549    if (!newBorder) {
45550      return onChange(undefined);
45551    }
45552
45553    // If we have all props defined on the new border apply it.
45554    if (!mixedBorders || isCompleteBorder(newBorder)) {
45555      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);
45556    }
45557
45558    // If we had mixed borders we might have had some shared border props
45559    // that we need to maintain. For example; we could have mixed borders
45560    // with all the same color but different widths. Then from the linked
45561    // control we change the color. We should keep the separate  widths.
45562    const changes = getBorderDiff(linkedValue, newBorder);
45563    const updatedBorders = {
45564      top: {
45565        ...value?.top,
45566        ...changes
45567      },
45568      right: {
45569        ...value?.right,
45570        ...changes
45571      },
45572      bottom: {
45573        ...value?.bottom,
45574        ...changes
45575      },
45576      left: {
45577        ...value?.left,
45578        ...changes
45579      }
45580    };
45581    if (hasMixedBorders(updatedBorders)) {
45582      return onChange(updatedBorders);
45583    }
45584    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;
45585    onChange(filteredResult);
45586  };
45587  const onSplitChange = (newBorder, side) => {
45588    const updatedBorders = {
45589      ...splitValue,
45590      [side]: newBorder
45591    };
45592    if (hasMixedBorders(updatedBorders)) {
45593      onChange(updatedBorders);
45594    } else {
45595      onChange(newBorder);
45596    }
45597  };
45598  const cx = useCx();
45599  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
45600    return cx(borderBoxControl, className);
45601  }, [cx, className]);
45602  const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
45603    return cx(linkedBorderControl());
45604  }, [cx]);
45605  const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
45606    return cx(wrapper);
45607  }, [cx]);
45608  return {
45609    ...otherProps,
45610    className: classes,
45611    colors,
45612    disableUnits: mixedBorders && !hasWidthValue,
45613    enableAlpha,
45614    enableStyle,
45615    hasMixedBorders: mixedBorders,
45616    isLinked,
45617    linkedControlClassName,
45618    onLinkedChange,
45619    onSplitChange,
45620    toggleLinked,
45621    linkedValue,
45622    size,
45623    splitValue,
45624    wrapperClassName,
45625    __experimentalIsRenderedInSidebar
45626  };
45627}
45628
45629;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control/component.js
45630
45631/**
45632 * WordPress dependencies
45633 */
45634
45635
45636
45637
45638/**
45639 * Internal dependencies
45640 */
45641
45642
45643
45644
45645
45646
45647
45648
45649const component_BorderLabel = props => {
45650  const {
45651    label,
45652    hideLabelFromVision
45653  } = props;
45654  if (!label) {
45655    return null;
45656  }
45657  return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
45658    as: "label"
45659  }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label);
45660};
45661const UnconnectedBorderBoxControl = (props, forwardedRef) => {
45662  const {
45663    className,
45664    colors,
45665    disableCustomColors,
45666    disableUnits,
45667    enableAlpha,
45668    enableStyle,
45669    hasMixedBorders,
45670    hideLabelFromVision,
45671    isLinked,
45672    label,
45673    linkedControlClassName,
45674    linkedValue,
45675    onLinkedChange,
45676    onSplitChange,
45677    popoverPlacement,
45678    popoverOffset,
45679    size,
45680    splitValue,
45681    toggleLinked,
45682    wrapperClassName,
45683    __experimentalIsRenderedInSidebar,
45684    ...otherProps
45685  } = useBorderBoxControl(props);
45686
45687  // Use internal state instead of a ref to make sure that the component
45688  // re-renders when the popover's anchor updates.
45689  const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
45690
45691  // Memoize popoverProps to avoid returning a new object every time.
45692  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
45693    placement: popoverPlacement,
45694    offset: popoverOffset,
45695    anchor: popoverAnchor,
45696    shift: true
45697  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
45698  const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
45699  return (0,external_wp_element_namespaceObject.createElement)(component, {
45700    className: className,
45701    ...otherProps,
45702    ref: mergedRef
45703  }, (0,external_wp_element_namespaceObject.createElement)(component_BorderLabel, {
45704    label: label,
45705    hideLabelFromVision: hideLabelFromVision
45706  }), (0,external_wp_element_namespaceObject.createElement)(component, {
45707    className: wrapperClassName
45708  }, isLinked ? (0,external_wp_element_namespaceObject.createElement)(border_control_component, {
45709    className: linkedControlClassName,
45710    colors: colors,
45711    disableUnits: disableUnits,
45712    disableCustomColors: disableCustomColors,
45713    enableAlpha: enableAlpha,
45714    enableStyle: enableStyle,
45715    onChange: onLinkedChange,
45716    placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined,
45717    __unstablePopoverProps: popoverProps,
45718    shouldSanitizeBorder: false // This component will handle that.
45719    ,
45720    value: linkedValue,
45721    withSlider: true,
45722    width: size === '__unstable-large' ? '116px' : '110px',
45723    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45724    size: size
45725  }) : (0,external_wp_element_namespaceObject.createElement)(border_box_control_split_controls_component, {
45726    colors: colors,
45727    disableCustomColors: disableCustomColors,
45728    enableAlpha: enableAlpha,
45729    enableStyle: enableStyle,
45730    onChange: onSplitChange,
45731    popoverPlacement: popoverPlacement,
45732    popoverOffset: popoverOffset,
45733    value: splitValue,
45734    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45735    size: size
45736  }), (0,external_wp_element_namespaceObject.createElement)(border_box_control_linked_button_component, {
45737    onClick: toggleLinked,
45738    isLinked: isLinked,
45739    size: size
45740  })));
45741};
45742
45743/**
45744 * The `BorderBoxControl` effectively has two view states. The first, a "linked"
45745 * view, allows configuration of a flat border via a single `BorderControl`.
45746 * The second, a "split" view, contains a `BorderControl` for each side
45747 * as well as a visualizer for the currently selected borders. Each view also
45748 * contains a button to toggle between the two.
45749 *
45750 * When switching from the "split" view to "linked", if the individual side
45751 * borders are not consistent, the "linked" view will display any border
45752 * properties selections that are consistent while showing a mixed state for
45753 * those that aren't. For example, if all borders had the same color and style
45754 * but different widths, then the border dropdown in the "linked" view's
45755 * `BorderControl` would show that consistent color and style but the "linked"
45756 * view's width input would show "Mixed" placeholder text.
45757 *
45758 * ```jsx
45759 * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
45760 * import { __ } from '@wordpress/i18n';
45761 *
45762 * const colors = [
45763 * 	{ name: 'Blue 20', color: '#72aee6' },
45764 * 	// ...
45765 * ];
45766 *
45767 * const MyBorderBoxControl = () => {
45768 * 	const defaultBorder = {
45769 * 		color: '#72aee6',
45770 * 		style: 'dashed',
45771 * 		width: '1px',
45772 * 	};
45773 * 	const [ borders, setBorders ] = useState( {
45774 * 		top: defaultBorder,
45775 * 		right: defaultBorder,
45776 * 		bottom: defaultBorder,
45777 * 		left: defaultBorder,
45778 * 	} );
45779 * 	const onChange = ( newBorders ) => setBorders( newBorders );
45780 *
45781 * 	return (
45782 * 		<BorderBoxControl
45783 * 			colors={ colors }
45784 * 			label={ __( 'Borders' ) }
45785 * 			onChange={ onChange }
45786 * 			value={ borders }
45787 * 		/>
45788 * 	);
45789 * };
45790 * ```
45791 */
45792const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
45793/* harmony default export */ const border_box_control_component = (BorderBoxControl);
45794
45795;// CONCATENATED MODULE: ./packages/components/build-module/box-control/styles/box-control-styles.js
45796
45797function box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
45798/**
45799 * External dependencies
45800 */
45801
45802/**
45803 * Internal dependencies
45804 */
45805
45806
45807
45808const box_control_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
45809  target: "e1jovhle6"
45810} : 0)( true ? {
45811  name: "14bvcyk",
45812  styles: "box-sizing:border-box;max-width:235px;padding-bottom:12px;width:100%"
45813} : 0);
45814const Header = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
45815  target: "e1jovhle5"
45816} : 0)( true ? {
45817  name: "5bhc30",
45818  styles: "margin-bottom:8px"
45819} : 0);
45820const HeaderControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
45821  target: "e1jovhle4"
45822} : 0)( true ? {
45823  name: "aujtid",
45824  styles: "min-height:30px;gap:0"
45825} : 0);
45826const UnitControlWrapper = emotion_styled_base_browser_esm("div",  true ? {
45827  target: "e1jovhle3"
45828} : 0)( true ? {
45829  name: "112jwab",
45830  styles: "box-sizing:border-box;max-width:80px"
45831} : 0);
45832const LayoutContainer = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
45833  target: "e1jovhle2"
45834} : 0)( true ? {
45835  name: "xy18ro",
45836  styles: "justify-content:center;padding-top:8px"
45837} : 0);
45838const Layout = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
45839  target: "e1jovhle1"
45840} : 0)( true ? {
45841  name: "3tw5wk",
45842  styles: "position:relative;height:100%;width:100%;justify-content:flex-start"
45843} : 0);
45844var box_control_styles_ref =  true ? {
45845  name: "1ch9yvl",
45846  styles: "border-radius:0"
45847} : 0;
45848var box_control_styles_ref2 =  true ? {
45849  name: "tg3mx0",
45850  styles: "border-radius:2px"
45851} : 0;
45852const unitControlBorderRadiusStyles = ({
45853  isFirst,
45854  isLast,
45855  isOnly
45856}) => {
45857  if (isFirst) {
45858    return rtl({
45859      borderTopRightRadius: 0,
45860      borderBottomRightRadius: 0
45861    })();
45862  }
45863  if (isLast) {
45864    return rtl({
45865      borderTopLeftRadius: 0,
45866      borderBottomLeftRadius: 0
45867    })();
45868  }
45869  if (isOnly) {
45870    return box_control_styles_ref2;
45871  }
45872  return box_control_styles_ref;
45873};
45874const unitControlMarginStyles = ({
45875  isFirst,
45876  isOnly
45877}) => {
45878  const marginLeft = isFirst || isOnly ? 0 : -1;
45879  return rtl({
45880    marginLeft
45881  })();
45882};
45883const box_control_styles_UnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control,  true ? {
45884  target: "e1jovhle0"
45885} : 0)("max-width:60px;", unitControlBorderRadiusStyles, ";", unitControlMarginStyles, ";" + ( true ? "" : 0));
45886
45887;// CONCATENATED MODULE: ./packages/components/build-module/box-control/unit-control.js
45888
45889/**
45890 * External dependencies
45891 */
45892
45893
45894/**
45895 * Internal dependencies
45896 */
45897
45898
45899const unit_control_noop = () => {};
45900function BoxUnitControl({
45901  isFirst,
45902  isLast,
45903  isOnly,
45904  onHoverOn = unit_control_noop,
45905  onHoverOff = unit_control_noop,
45906  label,
45907  value,
45908  ...props
45909}) {
45910  const bindHoverGesture = useHover(({
45911    event,
45912    ...state
45913  }) => {
45914    if (state.hovering) {
45915      onHoverOn(event, state);
45916    } else {
45917      onHoverOff(event, state);
45918    }
45919  });
45920  return (0,external_wp_element_namespaceObject.createElement)(UnitControlWrapper, {
45921    ...bindHoverGesture()
45922  }, (0,external_wp_element_namespaceObject.createElement)(unit_control_Tooltip, {
45923    text: label
45924  }, (0,external_wp_element_namespaceObject.createElement)(box_control_styles_UnitControl, {
45925    "aria-label": label,
45926    className: "component-box-control__unit-control",
45927    isFirst: isFirst,
45928    isLast: isLast,
45929    isOnly: isOnly,
45930    isPressEnterToChange: true,
45931    isResetValueOnUnitChange: false,
45932    value: value,
45933    ...props
45934  })));
45935}
45936function unit_control_Tooltip({
45937  children,
45938  text
45939}) {
45940  if (!text) return children;
45941
45942  /**
45943   * Wrapping the children in a `<div />` as Tooltip as it attempts
45944   * to render the <UnitControl />. Using a plain `<div />` appears to
45945   * resolve this issue.
45946   *
45947   * Originally discovered and referenced here:
45948   * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
45949   */
45950  return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
45951    text: text,
45952    placement: "top"
45953  }, (0,external_wp_element_namespaceObject.createElement)("div", null, children));
45954}
45955
45956;// CONCATENATED MODULE: ./packages/components/build-module/box-control/utils.js
45957/**
45958 * WordPress dependencies
45959 */
45960
45961
45962/**
45963 * Internal dependencies
45964 */
45965
45966const LABELS = {
45967  all: (0,external_wp_i18n_namespaceObject.__)('All'),
45968  top: (0,external_wp_i18n_namespaceObject.__)('Top'),
45969  bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom'),
45970  left: (0,external_wp_i18n_namespaceObject.__)('Left'),
45971  right: (0,external_wp_i18n_namespaceObject.__)('Right'),
45972  mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'),
45973  vertical: (0,external_wp_i18n_namespaceObject.__)('Vertical'),
45974  horizontal: (0,external_wp_i18n_namespaceObject.__)('Horizontal')
45975};
45976const DEFAULT_VALUES = {
45977  top: undefined,
45978  right: undefined,
45979  bottom: undefined,
45980  left: undefined
45981};
45982const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
45983
45984/**
45985 * Gets an items with the most occurrence within an array
45986 * https://stackoverflow.com/a/20762713
45987 *
45988 * @param arr Array of items to check.
45989 * @return The item with the most occurrences.
45990 */
45991function utils_mode(arr) {
45992  return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
45993}
45994
45995/**
45996 * Gets the 'all' input value and unit from values data.
45997 *
45998 * @param values         Box values.
45999 * @param selectedUnits  Box units.
46000 * @param availableSides Available box sides to evaluate.
46001 *
46002 * @return A value + unit for the 'all' input.
46003 */
46004function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) {
46005  const sides = normalizeSides(availableSides);
46006  const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side]));
46007  const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
46008    var _value$;
46009    return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
46010  });
46011  const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
46012  const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
46013
46014  /**
46015   * The typeof === 'number' check is important. On reset actions, the incoming value
46016   * may be null or an empty string.
46017   *
46018   * Also, the value may also be zero (0), which is considered a valid unit value.
46019   *
46020   * typeof === 'number' is more specific for these cases, rather than relying on a
46021   * simple truthy check.
46022   */
46023  let commonUnit;
46024  if (typeof commonQuantity === 'number') {
46025    commonUnit = utils_mode(allParsedUnits);
46026  } else {
46027    var _getAllUnitFallback;
46028    // Set meaningful unit selection if no commonQuantity and user has previously
46029    // selected units without assigning values while controls were unlinked.
46030    commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : utils_mode(allParsedUnits);
46031  }
46032  return [commonQuantity, commonUnit].join('');
46033}
46034
46035/**
46036 * Determine the most common unit selection to use as a fallback option.
46037 *
46038 * @param selectedUnits Current unit selections for individual sides.
46039 * @return  Most common unit selection.
46040 */
46041function getAllUnitFallback(selectedUnits) {
46042  if (!selectedUnits || typeof selectedUnits !== 'object') {
46043    return undefined;
46044  }
46045  const filteredUnits = Object.values(selectedUnits).filter(Boolean);
46046  return utils_mode(filteredUnits);
46047}
46048
46049/**
46050 * Checks to determine if values are mixed.
46051 *
46052 * @param values        Box values.
46053 * @param selectedUnits Box units.
46054 * @param sides         Available box sides to evaluate.
46055 *
46056 * @return Whether values are mixed.
46057 */
46058function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) {
46059  const allValue = getAllValue(values, selectedUnits, sides);
46060  const isMixed = isNaN(parseFloat(allValue));
46061  return isMixed;
46062}
46063
46064/**
46065 * Checks to determine if values are defined.
46066 *
46067 * @param values Box values.
46068 *
46069 * @return  Whether values are mixed.
46070 */
46071function isValuesDefined(values) {
46072  return values !== undefined && Object.values(values).filter(
46073  // Switching units when input is empty causes values only
46074  // containing units. This gives false positive on mixed values
46075  // unless filtered.
46076  value => !!value && /\d/.test(value)).length > 0;
46077}
46078
46079/**
46080 * Get initial selected side, factoring in whether the sides are linked,
46081 * and whether the vertical / horizontal directions are grouped via splitOnAxis.
46082 *
46083 * @param isLinked    Whether the box control's fields are linked.
46084 * @param splitOnAxis Whether splitting by horizontal or vertical axis.
46085 * @return The initial side.
46086 */
46087function getInitialSide(isLinked, splitOnAxis) {
46088  let initialSide = 'all';
46089  if (!isLinked) {
46090    initialSide = splitOnAxis ? 'vertical' : 'top';
46091  }
46092  return initialSide;
46093}
46094
46095/**
46096 * Normalizes provided sides configuration to an array containing only top,
46097 * right, bottom and left. This essentially just maps `horizontal` or `vertical`
46098 * to their appropriate sides to facilitate correctly determining value for
46099 * all input control.
46100 *
46101 * @param sides Available sides for box control.
46102 * @return Normalized sides configuration.
46103 */
46104function normalizeSides(sides) {
46105  const filteredSides = [];
46106  if (!sides?.length) {
46107    return ALL_SIDES;
46108  }
46109  if (sides.includes('vertical')) {
46110    filteredSides.push(...['top', 'bottom']);
46111  } else if (sides.includes('horizontal')) {
46112    filteredSides.push(...['left', 'right']);
46113  } else {
46114    const newSides = ALL_SIDES.filter(side => sides.includes(side));
46115    filteredSides.push(...newSides);
46116  }
46117  return filteredSides;
46118}
46119
46120/**
46121 * Applies a value to an object representing top, right, bottom and left sides
46122 * while taking into account any custom side configuration.
46123 *
46124 * @param currentValues The current values for each side.
46125 * @param newValue      The value to apply to the sides object.
46126 * @param sides         Array defining valid sides.
46127 *
46128 * @return Object containing the updated values for each side.
46129 */
46130function applyValueToSides(currentValues, newValue, sides) {
46131  const newValues = {
46132    ...currentValues
46133  };
46134  if (sides?.length) {
46135    sides.forEach(side => {
46136      if (side === 'vertical') {
46137        newValues.top = newValue;
46138        newValues.bottom = newValue;
46139      } else if (side === 'horizontal') {
46140        newValues.left = newValue;
46141        newValues.right = newValue;
46142      } else {
46143        newValues[side] = newValue;
46144      }
46145    });
46146  } else {
46147    ALL_SIDES.forEach(side => newValues[side] = newValue);
46148  }
46149  return newValues;
46150}
46151
46152;// CONCATENATED MODULE: ./packages/components/build-module/box-control/all-input-control.js
46153
46154/**
46155 * Internal dependencies
46156 */
46157
46158
46159
46160const all_input_control_noop = () => {};
46161function AllInputControl({
46162  onChange = all_input_control_noop,
46163  onFocus = all_input_control_noop,
46164  onHoverOn = all_input_control_noop,
46165  onHoverOff = all_input_control_noop,
46166  values,
46167  sides,
46168  selectedUnits,
46169  setSelectedUnits,
46170  ...props
46171}) {
46172  const allValue = getAllValue(values, selectedUnits, sides);
46173  const hasValues = isValuesDefined(values);
46174  const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides);
46175  const allPlaceholder = isMixed ? LABELS.mixed : undefined;
46176  const handleOnFocus = event => {
46177    onFocus(event, {
46178      side: 'all'
46179    });
46180  };
46181  const handleOnChange = next => {
46182    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
46183    const nextValue = isNumeric ? next : undefined;
46184    const nextValues = applyValueToSides(values, nextValue, sides);
46185    onChange(nextValues);
46186  };
46187
46188  // Set selected unit so it can be used as fallback by unlinked controls
46189  // when individual sides do not have a value containing a unit.
46190  const handleOnUnitChange = unit => {
46191    const newUnits = applyValueToSides(selectedUnits, unit, sides);
46192    setSelectedUnits(newUnits);
46193  };
46194  const handleOnHoverOn = () => {
46195    onHoverOn({
46196      top: true,
46197      bottom: true,
46198      left: true,
46199      right: true
46200    });
46201  };
46202  const handleOnHoverOff = () => {
46203    onHoverOff({
46204      top: false,
46205      bottom: false,
46206      left: false,
46207      right: false
46208    });
46209  };
46210  return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, {
46211    ...props,
46212    disableUnits: isMixed,
46213    isOnly: true,
46214    value: allValue,
46215    onChange: handleOnChange,
46216    onUnitChange: handleOnUnitChange,
46217    onFocus: handleOnFocus,
46218    onHoverOn: handleOnHoverOn,
46219    onHoverOff: handleOnHoverOff,
46220    placeholder: allPlaceholder
46221  });
46222}
46223
46224;// CONCATENATED MODULE: ./packages/components/build-module/box-control/input-controls.js
46225
46226/**
46227 * Internal dependencies
46228 */
46229
46230
46231
46232
46233const input_controls_noop = () => {};
46234function BoxInputControls({
46235  onChange = input_controls_noop,
46236  onFocus = input_controls_noop,
46237  onHoverOn = input_controls_noop,
46238  onHoverOff = input_controls_noop,
46239  values,
46240  selectedUnits,
46241  setSelectedUnits,
46242  sides,
46243  ...props
46244}) {
46245  const createHandleOnFocus = side => event => {
46246    onFocus(event, {
46247      side
46248    });
46249  };
46250  const createHandleOnHoverOn = side => () => {
46251    onHoverOn({
46252      [side]: true
46253    });
46254  };
46255  const createHandleOnHoverOff = side => () => {
46256    onHoverOff({
46257      [side]: false
46258    });
46259  };
46260  const handleOnChange = nextValues => {
46261    onChange(nextValues);
46262  };
46263  const createHandleOnChange = side => (next, {
46264    event
46265  }) => {
46266    const nextValues = {
46267      ...values
46268    };
46269    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
46270    const nextValue = isNumeric ? next : undefined;
46271    nextValues[side] = nextValue;
46272
46273    /**
46274     * Supports changing pair sides. For example, holding the ALT key
46275     * when changing the TOP will also update BOTTOM.
46276     */
46277    // @ts-expect-error - TODO: event.altKey is only present when the change event was
46278    // triggered by a keyboard event. Should this feature be implemented differently so
46279    // it also works with drag events?
46280    if (event.altKey) {
46281      switch (side) {
46282        case 'top':
46283          nextValues.bottom = nextValue;
46284          break;
46285        case 'bottom':
46286          nextValues.top = nextValue;
46287          break;
46288        case 'left':
46289          nextValues.right = nextValue;
46290          break;
46291        case 'right':
46292          nextValues.left = nextValue;
46293          break;
46294      }
46295    }
46296    handleOnChange(nextValues);
46297  };
46298  const createHandleOnUnitChange = side => next => {
46299    const newUnits = {
46300      ...selectedUnits
46301    };
46302    newUnits[side] = next;
46303    setSelectedUnits(newUnits);
46304  };
46305
46306  // Filter sides if custom configuration provided, maintaining default order.
46307  const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
46308  const first = filteredSides[0];
46309  const last = filteredSides[filteredSides.length - 1];
46310  const only = first === last && first;
46311  return (0,external_wp_element_namespaceObject.createElement)(LayoutContainer, {
46312    className: "component-box-control__input-controls-wrapper"
46313  }, (0,external_wp_element_namespaceObject.createElement)(Layout, {
46314    gap: 0,
46315    align: "top",
46316    className: "component-box-control__input-controls"
46317  }, filteredSides.map(side => {
46318    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
46319    const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
46320    return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, {
46321      ...props,
46322      isFirst: first === side,
46323      isLast: last === side,
46324      isOnly: only === side,
46325      value: [parsedQuantity, computedUnit].join(''),
46326      onChange: createHandleOnChange(side),
46327      onUnitChange: createHandleOnUnitChange(side),
46328      onFocus: createHandleOnFocus(side),
46329      onHoverOn: createHandleOnHoverOn(side),
46330      onHoverOff: createHandleOnHoverOff(side),
46331      label: LABELS[side],
46332      key: `box-control-${side}`
46333    });
46334  })));
46335}
46336
46337;// CONCATENATED MODULE: ./packages/components/build-module/box-control/axial-input-control
46337s.js
46338
46339/**
46340 * Internal dependencies
46341 */
46342
46343
46344
46345
46346const groupedSides = ['vertical', 'horizontal'];
46347function AxialInputControls({
46348  onChange,
46349  onFocus,
46350  onHoverOn,
46351  onHoverOff,
46352  values,
46353  selectedUnits,
46354  setSelectedUnits,
46355  sides,
46356  ...props
46357}) {
46358  const createHandleOnFocus = side => event => {
46359    if (!onFocus) {
46360      return;
46361    }
46362    onFocus(event, {
46363      side
46364    });
46365  };
46366  const createHandleOnHoverOn = side => () => {
46367    if (!onHoverOn) {
46368      return;
46369    }
46370    if (side === 'vertical') {
46371      onHoverOn({
46372        top: true,
46373        bottom: true
46374      });
46375    }
46376    if (side === 'horizontal') {
46377      onHoverOn({
46378        left: true,
46379        right: true
46380      });
46381    }
46382  };
46383  const createHandleOnHoverOff = side => () => {
46384    if (!onHoverOff) {
46385      return;
46386    }
46387    if (side === 'vertical') {
46388      onHoverOff({
46389        top: false,
46390        bottom: false
46391      });
46392    }
46393    if (side === 'horizontal') {
46394      onHoverOff({
46395        left: false,
46396        right: false
46397      });
46398    }
46399  };
46400  const createHandleOnChange = side => next => {
46401    if (!onChange) {
46402      return;
46403    }
46404    const nextValues = {
46405      ...values
46406    };
46407    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
46408    const nextValue = isNumeric ? next : undefined;
46409    if (side === 'vertical') {
46410      nextValues.top = nextValue;
46411      nextValues.bottom = nextValue;
46412    }
46413    if (side === 'horizontal') {
46414      nextValues.left = nextValue;
46415      nextValues.right = nextValue;
46416    }
46417    onChange(nextValues);
46418  };
46419  const createHandleOnUnitChange = side => next => {
46420    const newUnits = {
46421      ...selectedUnits
46422    };
46423    if (side === 'vertical') {
46424      newUnits.top = next;
46425      newUnits.bottom = next;
46426    }
46427    if (side === 'horizontal') {
46428      newUnits.left = next;
46429      newUnits.right = next;
46430    }
46431    setSelectedUnits(newUnits);
46432  };
46433
46434  // Filter sides if custom configuration provided, maintaining default order.
46435  const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
46436  const first = filteredSides[0];
46437  const last = filteredSides[filteredSides.length - 1];
46438  const only = first === last && first;
46439  return (0,external_wp_element_namespaceObject.createElement)(Layout, {
46440    gap: 0,
46441    align: "top",
46442    className: "component-box-control__vertical-horizontal-input-controls"
46443  }, filteredSides.map(side => {
46444    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left);
46445    const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
46446    return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, {
46447      ...props,
46448      isFirst: first === side,
46449      isLast: last === side,
46450      isOnly: only === side,
46451      value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
46452      onChange: createHandleOnChange(side),
46453      onUnitChange: createHandleOnUnitChange(side),
46454      onFocus: createHandleOnFocus(side),
46455      onHoverOn: createHandleOnHoverOn(side),
46456      onHoverOff: createHandleOnHoverOff(side),
46457      label: LABELS[side],
46458      key: side
46459    });
46460  }));
46461}
46462
46463;// CONCATENATED MODULE: ./packages/components/build-module/box-control/styles/box-control-icon-styles.js
46464
46465function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
46466/**
46467 * External dependencies
46468 */
46469
46470const box_control_icon_styles_Root = emotion_styled_base_browser_esm("span",  true ? {
46471  target: "e1j5nr4z8"
46472} : 0)( true ? {
46473  name: "1w884gc",
46474  styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px"
46475} : 0);
46476const Viewbox = emotion_styled_base_browser_esm("span",  true ? {
46477  target: "e1j5nr4z7"
46478} : 0)( true ? {
46479  name: "i6vjox",
46480  styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%"
46481} : 0);
46482const strokeFocus = ({
46483  isFocused
46484}) => {
46485  return /*#__PURE__*/emotion_react_browser_esm_css({
46486    backgroundColor: 'currentColor',
46487    opacity: isFocused ? 1 : 0.3
46488  },  true ? "" : 0,  true ? "" : 0);
46489};
46490const Stroke = emotion_styled_base_browser_esm("span",  true ? {
46491  target: "e1j5nr4z6"
46492} : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0));
46493const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke,  true ? {
46494  target: "e1j5nr4z5"
46495} : 0)( true ? {
46496  name: "1k2w39q",
46497  styles: "bottom:3px;top:3px;width:2px"
46498} : 0);
46499const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke,  true ? {
46500  target: "e1j5nr4z4"
46501} : 0)( true ? {
46502  name: "1q9b07k",
46503  styles: "height:2px;left:3px;right:3px"
46504} : 0);
46505const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke,  true ? {
46506  target: "e1j5nr4z3"
46507} : 0)( true ? {
46508  name: "abcix4",
46509  styles: "top:0"
46510} : 0);
46511const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke,  true ? {
46512  target: "e1j5nr4z2"
46513} : 0)( true ? {
46514  name: "1wf8jf",
46515  styles: "right:0"
46516} : 0);
46517const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke,  true ? {
46518  target: "e1j5nr4z1"
46519} : 0)( true ? {
46520  name: "8tapst",
46521  styles: "bottom:0"
46522} : 0);
46523const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke,  true ? {
46524  target: "e1j5nr4z0"
46525} : 0)( true ? {
46526  name: "1ode3cm",
46527  styles: "left:0"
46528} : 0);
46529
46530;// CONCATENATED MODULE: ./packages/components/build-module/box-control/icon.js
46531
46532/**
46533 * Internal dependencies
46534 */
46535
46536
46537const BASE_ICON_SIZE = 24;
46538function BoxControlIcon({
46539  size = 24,
46540  side = 'all',
46541  sides,
46542  ...props
46543}) {
46544  const isSideDisabled = value => sides?.length && !sides.includes(value);
46545  const hasSide = value => {
46546    if (isSideDisabled(value)) {
46547      return false;
46548    }
46549    return side === 'all' || side === value;
46550  };
46551  const top = hasSide('top') || hasSide('vertical');
46552  const right = hasSide('right') || hasSide('horizontal');
46553  const bottom = hasSide('bottom') || hasSide('vertical');
46554  const left = hasSide('left') || hasSide('horizontal');
46555
46556  // Simulates SVG Icon scaling.
46557  const scale = size / BASE_ICON_SIZE;
46558  return (0,external_wp_element_namespaceObject.createElement)(box_control_icon_styles_Root, {
46559    style: {
46560      transform: `scale(${scale})`
46561    },
46562    ...props
46563  }, (0,external_wp_element_namespaceObject.createElement)(Viewbox, null, (0,external_wp_element_namespaceObject.createElement)(TopStroke, {
46564    isFocused: top
46565  }), (0,external_wp_element_namespaceObject.createElement)(RightStroke, {
46566    isFocused: right
46567  }), (0,external_wp_element_namespaceObject.createElement)(BottomStroke, {
46568    isFocused: bottom
46569  }), (0,external_wp_element_namespaceObject.createElement)(LeftStroke, {
46570    isFocused: left
46571  })));
46572}
46573
46574;// CONCATENATED MODULE: ./packages/components/build-module/box-control/linked-button.js
46575
46576/**
46577 * WordPress dependencies
46578 */
46579
46580
46581
46582/**
46583 * Internal dependencies
46584 */
46585
46586
46587function LinkedButton({
46588  isLinked,
46589  ...props
46590}) {
46591  const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
46592  return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
46593    text: label
46594  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
46595    ...props,
46596    className: "component-box-control__linked-button",
46597    isSmall: true,
46598    icon: isLinked ? library_link : link_off,
46599    iconSize: 24,
46600    "aria-label": label
46601  }));
46602}
46603
46604;// CONCATENATED MODULE: ./packages/components/build-module/box-control/index.js
46605
46606/**
46607 * WordPress dependencies
46608 */
46609
46610
46611
46612
46613/**
46614 * Internal dependencies
46615 */
46616
46617
46618
46619
46620
46621
46622
46623
46624
46625
46626
46627
46628const defaultInputProps = {
46629  min: 0
46630};
46631const box_control_noop = () => {};
46632function box_control_useUniqueId(idProp) {
46633  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control');
46634  return idProp || instanceId;
46635}
46636
46637/**
46638 * BoxControl components let users set values for Top, Right, Bottom, and Left.
46639 * This can be used as an input control for values like `padding` or `margin`.
46640 *
46641 * ```jsx
46642 * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
46643 * import { useState } from '@wordpress/element';
46644 *
46645 * const Example = () => {
46646 * 	const [ values, setValues ] = useState( {
46647 * 		top: '50px',
46648 * 		left: '10%',
46649 * 		right: '10%',
46650 * 		bottom: '50px',
46651 * 	} );
46652 *
46653 * 	return (
46654 * 		<BoxControl
46655 * 			values={ values }
46656 * 			onChange={ ( nextValues ) => setValues( nextValues ) }
46657 * 		/>
46658 * 	);
46659 * };
46660 * ```
46661 */
46662function BoxControl({
46663  id: idProp,
46664  inputProps = defaultInputProps,
46665  onChange = box_control_noop,
46666  label = (0,external_wp_i18n_namespaceObject.__)('Box Control'),
46667  values: valuesProp,
46668  units,
46669  sides,
46670  splitOnAxis = false,
46671  allowReset = true,
46672  resetValues = DEFAULT_VALUES,
46673  onMouseOver,
46674  onMouseOut
46675}) {
46676  const [values, setValues] = use_controlled_state(valuesProp, {
46677    fallback: DEFAULT_VALUES
46678  });
46679  const inputValues = values || DEFAULT_VALUES;
46680  const hasInitialValue = isValuesDefined(valuesProp);
46681  const hasOneSide = sides?.length === 1;
46682  const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue);
46683  const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
46684  const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis));
46685
46686  // Tracking selected units via internal state allows filtering of CSS unit
46687  // only values from being saved while maintaining preexisting unit selection
46688  // behaviour. Filtering CSS only values prevents invalid style values.
46689  const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({
46690    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
46691    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
46692    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],
46693    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]
46694  });
46695  const id = box_control_useUniqueId(idProp);
46696  const headingId = `${id}-heading`;
46697  const toggleLinked = () => {
46698    setIsLinked(!isLinked);
46699    setSide(getInitialSide(!isLinked, splitOnAxis));
46700  };
46701  const handleOnFocus = (_event, {
46702    side: nextSide
46703  }) => {
46704    setSide(nextSide);
46705  };
46706  const handleOnChange = nextValues => {
46707    onChange(nextValues);
46708    setValues(nextValues);
46709    setIsDirty(true);
46710  };
46711  const handleOnReset = () => {
46712    onChange(resetValues);
46713    setValues(resetValues);
46714    setSelectedUnits(resetValues);
46715    setIsDirty(false);
46716  };
46717  const inputControlProps = {
46718    ...inputProps,
46719    onChange: handleOnChange,
46720    onFocus: handleOnFocus,
46721    isLinked,
46722    units,
46723    selectedUnits,
46724    setSelectedUnits,
46725    sides,
46726    values: inputValues,
46727    onMouseOver,
46728    onMouseOut
46729  };
46730  return (0,external_wp_element_namespaceObject.createElement)(box_control_styles_Root, {
46731    id: id,
46732    role: "group",
46733    "aria-labelledby": headingId
46734  }, (0,external_wp_element_namespaceObject.createElement)(Header, {
46735    className: "component-box-control__header"
46736  }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(BaseControl.VisualLabel, {
46737    id: headingId
46738  }, label)), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
46739    className: "component-box-control__reset-button",
46740    variant: "secondary",
46741    isSmall: true,
46742    onClick: handleOnReset,
46743    disabled: !isDirty
46744  }, (0,external_wp_i18n_namespaceObject.__)('Reset')))), (0,external_wp_element_namespaceObject.createElement)(HeaderControlWrapper, {
46745    className: "component-box-control__header-control-wrapper"
46746  }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(BoxControlIcon, {
46747    side: side,
46748    sides: sides
46749  })), isLinked && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AllInputControl, {
46750    "aria-label": label,
46751    ...inputControlProps
46752  })), !isLinked && splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AxialInputControls, {
46753    ...inputControlProps
46754  })), !hasOneSide && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(LinkedButton, {
46755    onClick: toggleLinked,
46756    isLinked: isLinked
46757  }))), !isLinked && !splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(BoxInputControls, {
46758    ...inputControlProps
46759  }));
46760}
46761
46762/* harmony default export */ const box_control = (BoxControl);
46763
46764;// CONCATENATED MODULE: ./packages/components/build-module/button-group/index.js
46765
46766/**
46767 * External dependencies
46768 */
46769
46770/**
46771 * WordPress dependencies
46772 */
46773
46774
46775/**
46776 * Internal dependencies
46777 */
46778
46779function UnforwardedButtonGroup(props, ref) {
46780  const {
46781    className,
46782    ...restProps
46783  } = props;
46784  const classes = classnames_default()('components-button-group', className);
46785  return (0,external_wp_element_namespaceObject.createElement)("div", {
46786    ref: ref,
46787    role: "group",
46788    className: classes,
46789    ...restProps
46790  });
46791}
46792
46793/**
46794 * ButtonGroup can be used to group any related buttons together. To emphasize
46795 * related buttons, a group should share a common container.
46796 *
46797 * ```jsx
46798 * import { Button, ButtonGroup } from '@wordpress/components';
46799 *
46800 * const MyButtonGroup = () => (
46801 *   <ButtonGroup>
46802 *     <Button variant="primary">Button 1</Button>
46803 *     <Button variant="primary">Button 2</Button>
46804 *   </ButtonGroup>
46805 * );
46806 * ```
46807 */
46808const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup);
46809/* harmony default export */ const button_group = (ButtonGroup);
46810
46811;// CONCATENATED MODULE: ./packages/components/build-module/elevation/styles.js
46812function elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
46813/**
46814 * External dependencies
46815 */
46816
46817const Elevation =  true ? {
46818  name: "12ip69d",
46819  styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow"
46820} : 0;
46821
46822;// CONCATENATED MODULE: ./packages/components/build-module/elevation/hook.js
46823/**
46824 * External dependencies
46825 */
46826
46827
46828
46829/**
46830 * WordPress dependencies
46831 */
46832
46833
46834/**
46835 * Internal dependencies
46836 */
46837
46838
46839
46840
46841
46842
46843function getBoxShadow(value) {
46844  const boxShadowColor = `rgba(0, 0, 0, ${value / 20})`;
46845  const boxShadow = `0 ${value}px ${value * 2}px 0
46846	${boxShadowColor}`;
46847  return boxShadow;
46848}
46849function useElevation(props) {
46850  const {
46851    active,
46852    borderRadius = 'inherit',
46853    className,
46854    focus,
46855    hover,
46856    isInteractive = false,
46857    offset = 0,
46858    value = 0,
46859    ...otherProps
46860  } = useContextSystem(props, 'Elevation');
46861  const cx = useCx();
46862  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
46863    let hoverValue = isValueDefined(hover) ? hover : value * 2;
46864    let activeValue = isValueDefined(active) ? active : value / 2;
46865    if (!isInteractive) {
46866      hoverValue = isValueDefined(hover) ? hover : undefined;
46867      activeValue = isValueDefined(active) ? active : undefined;
46868    }
46869    const transition = `box-shadow ${config_values.transitionDuration} ${config_values.transitionTimingFunction}`;
46870    const sx = {};
46871    sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
46872      borderRadius,
46873      bottom: offset,
46874      boxShadow: getBoxShadow(value),
46875      opacity: config_values.elevationIntensity,
46876      left: offset,
46877      right: offset,
46878      top: offset,
46879      transition
46880    }, reduceMotion('transition'),  true ? "" : 0,  true ? "" : 0);
46881    if (isValueDefined(hoverValue)) {
46882      sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0),  true ? "" : 0);
46883    }
46884    if (isValueDefined(activeValue)) {
46885      sx.active = /*#__PURE__*/emotion_react_browser_esm_css("*:active>&{box-shadow:", getBoxShadow(activeValue), ";}" + ( true ? "" : 0),  true ? "" : 0);
46886    }
46887    if (isValueDefined(focus)) {
46888      sx.focus = /*#__PURE__*/emotion_react_browser_esm_css("*:focus>&{box-shadow:", getBoxShadow(focus), ";}" + ( true ? "" : 0),  true ? "" : 0);
46889    }
46890    return cx(Elevation, sx.Base, sx.hover, sx.focus, sx.active, className);
46891  }, [active, borderRadius, className, cx, focus, hover, isInteractive, offset, value]);
46892  return {
46893    ...otherProps,
46894    className: classes,
46895    'aria-hidden': true
46896  };
46897}
46898
46899;// CONCATENATED MODULE: ./packages/components/build-module/elevation/component.js
46900
46901/**
46902 * External dependencies
46903 */
46904
46905/**
46906 * Internal dependencies
46907 */
46908
46909
46910
46911
46912function UnconnectedElevation(props, forwardedRef) {
46913  const elevationProps = useElevation(props);
46914  return (0,external_wp_element_namespaceObject.createElement)(component, {
46915    ...elevationProps,
46916    ref: forwardedRef
46917  });
46918}
46919
46920/**
46921 * `Elevation` is a core component that renders shadow, using the component
46922 * system's shadow system.
46923 *
46924 * The shadow effect is generated using the `value` prop.
46925 *
46926 * ```jsx
46927 * import {
46928 *	__experimentalElevation as Elevation,
46929 *	__experimentalSurface as Surface,
46930 *	__experimentalText as Text,
46931 * } from '@wordpress/components';
46932 *
46933 * function Example() {
46934 *   return (
46935 *     <Surface>
46936 *       <Text>Code is Poetry</Text>
46937 *       <Elevation value={ 5 } />
46938 *     </Surface>
46939 *   );
46940 * }
46941 * ```
46942 */
46943const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation');
46944/* harmony default export */ const elevation_component = (component_Elevation);
46945
46946;// CONCATENATED MODULE: ./packages/components/build-module/card/styles.js
46947function card_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
46948/**
46949 * External dependencies
46950 */
46951
46952
46953/**
46954 * Internal dependencies
46955 */
46956
46957
46958// Since the border for `Card` is rendered via the `box-shadow` property
46959// (as opposed to the `border` property), the value of the border radius needs
46960// to be adjusted by removing 1px (this is because the `box-shadow` renders
46961// as an "outer radius").
46962const adjustedBorderRadius = `calc(${config_values.cardBorderRadius} - 1px)`;
46963const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0),  true ? "" : 0);
46964const styles_Header =  true ? {
46965  name: "1showjb",
46966  styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}"
46967} : 0;
46968const Footer =  true ? {
46969  name: "14n5oej",
46970  styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}"
46971} : 0;
46972const Content =  true ? {
46973  name: "13udsys",
46974  styles: "height:100%"
46975} : 0;
46976const Body =  true ? {
46977  name: "6ywzd",
46978  styles: "box-sizing:border-box;height:auto;max-height:100%"
46979} : 0;
46980const Media =  true ? {
46981  name: "dq805e",
46982  styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}"
46983} : 0;
46984const Divider =  true ? {
46985  name: "c990dr",
46986  styles: "box-sizing:border-box;display:block;width:100%"
46987} : 0;
46988const borderRadius = /*#__PURE__*/emotion_react_browser_esm_css("&:first-of-type{border-top-left-radius:", adjustedBorderRadius, ";border-top-right-radius:", adjustedBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", adjustedBorderRadius, ";border-bottom-right-radius:", adjustedBorderRadius, ";}" + ( true ? "" : 0),  true ? "" : 0);
46989const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0),  true ? "" : 0);
46990const boxShadowless =  true ? {
46991  name: "1t90u8d",
46992  styles: "box-shadow:none"
46993} : 0;
46994const borderless =  true ? {
46995  name: "1e1ncky",
46996  styles: "border:none"
46997} : 0;
46998const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0),  true ? "" : 0);
46999const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0);
47000const cardPaddings = {
47001  large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0),  true ? "" : 0),
47002  medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0),  true ? "" : 0),
47003  small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
47004  xSmall: xSmallCardPadding,
47005  // The `extraSmall` size is not officially documented, but the following styles
47006  // are kept for legacy reasons to support older values of the `size` prop.
47007  extraSmall: xSmallCardPadding
47008};
47009const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0),  true ? "" : 0);
47010
47011;// CONCATENATED MODULE: ./packages/components/build-module/surface/styles.js
47012/**
47013 * External dependencies
47014 */
47015
47016
47017/**
47018 * Internal dependencies
47019 */
47020
47021const Surface = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceColor, ";color:", COLORS.gray[900], ";position:relative;" + ( true ? "" : 0),  true ? "" : 0);
47022const background = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceBackgroundColor, ";" + ( true ? "" : 0),  true ? "" : 0);
47023function getBorders({
47024  borderBottom,
47025  borderLeft,
47026  borderRight,
47027  borderTop
47028}) {
47029  const borderStyle = `1px solid ${config_values.surfaceBorderColor}`;
47030  return /*#__PURE__*/emotion_react_browser_esm_css({
47031    borderBottom: borderBottom ? borderStyle : undefined,
47032    borderLeft: borderLeft ? borderStyle : undefined,
47033    borderRight: borderRight ? borderStyle : undefined,
47034    borderTop: borderTop ? borderStyle : undefined
47035  },  true ? "" : 0,  true ? "" : 0);
47036}
47037const primary = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
47038const secondary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTintColor, ";" + ( true ? "" : 0),  true ? "" : 0);
47039const tertiary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTertiaryColor, ";" + ( true ? "" : 0),  true ? "" : 0);
47040const customBackgroundSize = surfaceBackgroundSize => [surfaceBackgroundSize, surfaceBackgroundSize].join(' ');
47041const dottedBackground1 = surfaceBackgroundSizeDotted => ['90deg', [config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(',');
47042const dottedBackground2 = surfaceBackgroundSizeDotted => [[config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(',');
47043const dottedBackgroundCombined = surfaceBackgroundSizeDotted => [`linear-gradient( ${dottedBackground1(surfaceBackgroundSizeDotted)} ) center`, `linear-gradient( ${dottedBackground2(surfaceBackgroundSizeDotted)} ) center`, config_values.surfaceBorderBoldColor].join(',');
47044const getDotted = (surfaceBackgroundSize, surfaceBackgroundSizeDotted) => /*#__PURE__*/emotion_react_browser_esm_css("background:", dottedBackgroundCombined(surfaceBackgroundSizeDotted), ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0),  true ? "" : 0);
47045const gridBackground1 = [`${config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(',');
47046const gridBackground2 = ['90deg', `${config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(',');
47047const gridBackgroundCombined = [`linear-gradient( ${gridBackground1} )`, `linear-gradient( ${gridBackground2} )`].join(',');
47048const getGrid = surfaceBackgroundSize => {
47049  return /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundColor, ";background-image:", gridBackgroundCombined, ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0),  true ? "" : 0);
47050};
47051const getVariant = (variant, surfaceBackgroundSize, surfaceBackgroundSizeDotted) => {
47052  switch (variant) {
47053    case 'dotted':
47054      {
47055        return getDotted(surfaceBackgroundSize, surfaceBackgroundSizeDotted);
47056      }
47057    case 'grid':
47058      {
47059        return getGrid(surfaceBackgroundSize);
47060      }
47061    case 'primary':
47062      {
47063        return primary;
47064      }
47065    case 'secondary':
47066      {
47067        return secondary;
47068      }
47069    case 'tertiary':
47070      {
47071        return tertiary;
47072      }
47073  }
47074};
47075
47076;// CONCATENATED MODULE: ./packages/components/build-module/surface/hook.js
47077/**
47078 * WordPress dependencies
47079 */
47080
47081
47082/**
47083 * Internal dependencies
47084 */
47085
47086
47087
47088function useSurface(props) {
47089  const {
47090    backgroundSize = 12,
47091    borderBottom = false,
47092    borderLeft = false,
47093    borderRight = false,
47094    borderTop = false,
47095    className,
47096    variant = 'primary',
47097    ...otherProps
47098  } = useContextSystem(props, 'Surface');
47099  const cx = useCx();
47100  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
47101    const sx = {
47102      borders: getBorders({
47103        borderBottom,
47104        borderLeft,
47105        borderRight,
47106        borderTop
47107      })
47108    };
47109    return cx(Surface, sx.borders, getVariant(variant, `${backgroundSize}px`, `${backgroundSize - 1}px`), className);
47110  }, [backgroundSize, borderBottom, borderLeft, borderRight, borderTop, className, cx, variant]);
47111  return {
47112    ...otherProps,
47113    className: classes
47114  };
47115}
47116
47117;// CONCATENATED MODULE: ./packages/components/build-module/card/card/hook.js
47118/**
47119 * WordPress dependencies
47120 */
47121
47122
47123
47124/**
47125 * Internal dependencies
47126 */
47127
47128
47129
47130
47131
47132function hook_useDeprecatedProps({
47133  elevation,
47134  isElevated,
47135  ...otherProps
47136}) {
47137  const propsToReturn = {
47138    ...otherProps
47139  };
47140  let computedElevation = elevation;
47141  if (isElevated) {
47142    var _computedElevation;
47143    external_wp_deprecated_default()('Card isElevated prop', {
47144      since: '5.9',
47145      alternative: 'elevation'
47146    });
47147    (_computedElevation = computedElevation) !== null && _computedElevation !== void 0 ? _computedElevation : computedElevation = 2;
47148  }
47149
47150  // The `elevation` prop should only be passed when it's not `undefined`,
47151  // otherwise it will override the value that gets derived from `useContextSystem`.
47152  if (typeof computedElevation !== 'undefined') {
47153    propsToReturn.elevation = computedElevation;
47154  }
47155  return propsToReturn;
47156}
47157function useCard(props) {
47158  const {
47159    className,
47160    elevation = 0,
47161    isBorderless = false,
47162    isRounded = true,
47163    size = 'medium',
47164    ...otherProps
47165  } = useContextSystem(hook_useDeprecatedProps(props), 'Card');
47166  const cx = useCx();
47167  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
47168    return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className);
47169  }, [className, cx, isBorderless, isRounded]);
47170  const surfaceProps = useSurface({
47171    ...otherProps,
47172    className: classes
47173  });
47174  return {
47175    ...surfaceProps,
47176    elevation,
47177    isBorderless,
47178    isRounded,
47179    size
47180  };
47181}
47182
47183;// CONCATENATED MODULE: ./packages/components/build-module/card/card/component.js
47184
47185/**
47186 * External dependencies
47187 */
47188
47189/**
47190 * WordPress dependencies
47191 */
47192
47193
47194/**
47195 * Internal dependencies
47196 */
47197
47198
47199
47200
47201
47202
47203
47204
47205function UnconnectedCard(props, forwardedRef) {
47206  const {
47207    children,
47208    elevation,
47209    isBorderless,
47210    isRounded,
47211    size,
47212    ...otherProps
47213  } = useCard(props);
47214  const elevationBorderRadius = isRounded ? config_values.cardBorderRadius : 0;
47215  const cx = useCx();
47216  const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx( /*#__PURE__*/emotion_react_browser_esm_css({
47217    borderRadius: elevationBorderRadius
47218  },  true ? "" : 0,  true ? "" : 0)), [cx, elevationBorderRadius]);
47219  const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
47220    const contextProps = {
47221      size,
47222      isBorderless
47223    };
47224    return {
47225      CardBody: contextProps,
47226      CardHeader: contextProps,
47227      CardFooter: contextProps
47228    };
47229  }, [isBorderless, size]);
47230  return (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, {
47231    value: contextProviderValue
47232  }, (0,external_wp_element_namespaceObject.createElement)(component, {
47233    ...otherProps,
47234    ref: forwardedRef
47235  }, (0,external_wp_element_namespaceObject.createElement)(component, {
47236    className: cx(Content)
47237  }, children), (0,external_wp_element_namespaceObject.createElement)(elevation_component, {
47238    className: elevationClassName,
47239    isInteractive: false,
47240    value: elevation ? 1 : 0
47241  }), (0,external_wp_element_namespaceObject.createElement)(elevation_component, {
47242    className: elevationClassName,
47243    isInteractive: false,
47244    value: elevation
47245  })));
47246}
47247
47248/**
47249 * `Card` provides a flexible and extensible content container.
47250 * `Card` also provides a convenient set of sub-components such as `CardBody`,
47251 * `CardHeader`, `CardFooter`, and more.
47252 *
47253 * ```jsx
47254 * import {
47255 *   Card,
47256 *   CardHeader,
47257 *   CardBody,
47258 *   CardFooter,
47259 *   __experimentalText as Text,
47260 *   __experimentalHeading as Heading,
47261 * } from `@wordpress/components`;
47262 *
47263 * function Example() {
47264 *   return (
47265 *     <Card>
47266 *       <CardHeader>
47267 *         <Heading level={ 4 }>Card Title</Heading>
47268 *       </CardHeader>
47269 *       <CardBody>
47270 *         <Text>Card Content</Text>
47271 *       </CardBody>
47272 *       <CardFooter>
47273 *         <Text>Card Footer</Text>
47274 *       </CardFooter>
47275 *     </Card>
47276 *   );
47277 * }
47278 * ```
47279 */
47280const component_Card = contextConnect(UnconnectedCard, 'Card');
47281/* harmony default export */ const card_component = (component_Card);
47282
47283;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/styles.js
47284function scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
47285/**
47286 * External dependencies
47287 */
47288
47289
47290/**
47291 * Internal dependencies
47292 */
47293
47294const scrollableScrollbar = /*#__PURE__*/emotion_react_browser_esm_css("@media only screen and ( min-device-width: 40em ){&::-webkit-scrollbar{height:12px;width:12px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-track{background:", config_values.colorScrollbarTrack, ";border-radius:8px;}&::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:", config_values.colorScrollbarThumb, ";border:2px solid rgba( 0, 0, 0, 0 );border-radius:7px;}&:hover::-webkit-scrollbar-thumb{background-color:", config_values.colorScrollbarThumbHover, ";}}" + ( true ? "" : 0),  true ? "" : 0);
47295const Scrollable =  true ? {
47296  name: "13udsys",
47297  styles: "height:100%"
47298} : 0;
47299const styles_Content =  true ? {
47300  name: "bjn8wh",
47301  styles: "position:relative"
47302} : 0;
47303const styles_smoothScroll =  true ? {
47304  name: "7zq9w",
47305  styles: "scroll-behavior:smooth"
47306} : 0;
47307const scrollX =  true ? {
47308  name: "q33xhg",
47309  styles: "overflow-x:auto;overflow-y:hidden"
47310} : 0;
47311const scrollY =  true ? {
47312  name: "103x71s",
47313  styles: "overflow-x:hidden;overflow-y:auto"
47314} : 0;
47315const scrollAuto =  true ? {
47316  name: "umwchj",
47317  styles: "overflow-y:auto"
47318} : 0;
47319
47320;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/hook.js
47321/**
47322 * WordPress dependencies
47323 */
47324
47325
47326/**
47327 * Internal dependencies
47328 */
47329
47330
47331
47332
47333function useScrollable(props) {
47334  const {
47335    className,
47336    scrollDirection = 'y',
47337    smoothScroll = false,
47338    ...otherProps
47339  } = useContextSystem(props, 'Scrollable');
47340  const cx = useCx();
47341  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Scrollable, scrollableScrollbar, smoothScroll && styles_smoothScroll, scrollDirection === 'x' && scrollX, scrollDirection === 'y' && scrollY, scrollDirection === 'auto' && scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);
47342  return {
47343    ...otherProps,
47344    className: classes
47345  };
47346}
47347
47348;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/component.js
47349
47350/**
47351 * External dependencies
47352 */
47353
47354/**
47355 * Internal dependencies
47356 */
47357
47358
47359
47360
47361function UnconnectedScrollable(props, forwardedRef) {
47362  const scrollableProps = useScrollable(props);
47363  return (0,external_wp_element_namespaceObject.createElement)(component, {
47364    ...scrollableProps,
47365    ref: forwardedRef
47366  });
47367}
47368
47369/**
47370 * `Scrollable` is a layout component that content in a scrollable container.
47371 *
47372 * ```jsx
47373 * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
47374 *
47375 * function Example() {
47376 * 	return (
47377 * 		<Scrollable style={ { maxHeight: 200 } }>
47378 * 			<div style={ { height: 500 } }>...</div>
47379 * 		</Scrollable>
47380 * 	);
47381 * }
47382 * ```
47383 */
47384const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable');
47385/* harmony default export */ const scrollable_component = (component_Scrollable);
47386
47387;// CONCATENATED MODULE: ./packages/components/build-module/card/card-body/hook.js
47388/**
47389 * WordPress dependencies
47390 */
47391
47392
47393/**
47394 * Internal dependencies
47395 */
47396
47397
47398
47399
47400function useCardBody(props) {
47401  const {
47402    className,
47403    isScrollable = false,
47404    isShady = false,
47405    size = 'medium',
47406    ...otherProps
47407  } = useContextSystem(props, 'CardBody');
47408  const cx = useCx();
47409  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Body, borderRadius, cardPaddings[size], isShady && shady,
47410  // This classname is added for legacy compatibility reasons.
47411  'components-card__body', className), [className, cx, isShady, size]);
47412  return {
47413    ...otherProps,
47414    className: classes,
47415    isScrollable
47416  };
47417}
47418
47419;// CONCATENATED MODULE: ./packages/components/build-module/card/card-body/component.js
47420
47421/**
47422 * External dependencies
47423 */
47424
47425/**
47426 * Internal dependencies
47427 */
47428
47429
47430
47431
47432
47433function UnconnectedCardBody(props, forwardedRef) {
47434  const {
47435    isScrollable,
47436    ...otherProps
47437  } = useCardBody(props);
47438  if (isScrollable) {
47439    return (0,external_wp_element_namespaceObject.createElement)(scrollable_component, {
47440      ...otherProps,
47441      ref: forwardedRef
47442    });
47443  }
47444  return (0,external_wp_element_namespaceObject.createElement)(component, {
47445    ...otherProps,
47446    ref: forwardedRef
47447  });
47448}
47449
47450/**
47451 * `CardBody` renders an optional content area for a `Card`.
47452 * Multiple `CardBody` components can be used within `Card` if needed.
47453 *
47454 * ```jsx
47455 * import { Card, CardBody } from `@wordpress/components`;
47456 *
47457 * <Card>
47458 * 	<CardBody>
47459 * 		...
47460 * 	</CardBody>
47461 * </Card>
47462 * ```
47463 */
47464const CardBody = contextConnect(UnconnectedCardBody, 'CardBody');
47465/* harmony default export */ const card_body_component = (CardBody);
47466
47467;// CONCATENATED MODULE: ./node_modules/reakit/es/Separator/Separator.js
47468
47469
47470
47471
47472
47473
47474// Automatically generated
47475var SEPARATOR_KEYS = ["orientation"];
47476
47477var useSeparator = createHook({
47478  name: "Separator",
47479  compose: useRole,
47480  keys: SEPARATOR_KEYS,
47481  useOptions: function useOptions(_ref) {
47482    var _ref$orientation = _ref.orientation,
47483        orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
47484        options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["orientation"]);
47485
47486    return _objectSpread2({
47487      orientation: orientation
47488    }, options);
47489  },
47490  useProps: function useProps(options, htmlProps) {
47491    return _objectSpread2({
47492      role: "separator",
47493      "aria-orientation": options.orientation
47494    }, htmlProps);
47495  }
47496});
47497var Separator = createComponent({
47498  as: "hr",
47499  memo: true,
47500  useHook: useSeparator
47501});
47502
47503
47504
47505;// CONCATENATED MODULE: ./packages/components/build-module/divider/styles.js
47506
47507function divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
47508/**
47509 * External dependencies
47510 */
47511
47512
47513
47514/**
47515 * Internal dependencies
47516 */
47517
47518
47519const MARGIN_DIRECTIONS = {
47520  vertical: {
47521    start: 'marginLeft',
47522    end: 'marginRight'
47523  },
47524  horizontal: {
47525    start: 'marginTop',
47526    end: 'marginBottom'
47527  }
47528};
47529
47530// Renders the correct margins given the Divider's `orientation` and the writing direction.
47531// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
47532// the latter will take priority.
47533const renderMargin = ({
47534  'aria-orientation': orientation = 'horizontal',
47535  margin,
47536  marginStart,
47537  marginEnd
47538}) =>
47538 /*#__PURE__*/emotion_react_browser_esm_css(rtl({
47539  [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin),
47540  [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin)
47541})(),  true ? "" : 0,  true ? "" : 0);
47542var styles_ref =  true ? {
47543  name: "1u4hpl4",
47544  styles: "display:inline"
47545} : 0;
47546const renderDisplay = ({
47547  'aria-orientation': orientation = 'horizontal'
47548}) => {
47549  return orientation === 'vertical' ? styles_ref : undefined;
47550};
47551const renderBorder = ({
47552  'aria-orientation': orientation = 'horizontal'
47553}) => {
47554  return /*#__PURE__*/emotion_react_browser_esm_css({
47555    [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor'
47556  },  true ? "" : 0,  true ? "" : 0);
47557};
47558const renderSize = ({
47559  'aria-orientation': orientation = 'horizontal'
47560}) => /*#__PURE__*/emotion_react_browser_esm_css({
47561  height: orientation === 'vertical' ? 'auto' : 0,
47562  width: orientation === 'vertical' ? 0 : 'auto'
47563},  true ? "" : 0,  true ? "" : 0);
47564const DividerView = emotion_styled_base_browser_esm("hr",  true ? {
47565  target: "e19on6iw0"
47566} : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0));
47567
47568;// CONCATENATED MODULE: ./packages/components/build-module/divider/component.js
47569
47570/**
47571 * External dependencies
47572 */
47573// eslint-disable-next-line no-restricted-imports
47574
47575
47576
47577function UnconnectedDivider(props, forwardedRef) {
47578  const contextProps = useContextSystem(props, 'Divider');
47579  return (0,external_wp_element_namespaceObject.createElement)(Separator, {
47580    as: DividerView,
47581    ...contextProps,
47582    ref: forwardedRef
47583  });
47584}
47585
47586/**
47587 * `Divider` is a layout component that separates groups of related content.
47588 *
47589 * ```js
47590 * import {
47591 * 		__experimentalDivider as Divider,
47592 * 		__experimentalText as Text,
47593 * 		__experimentalVStack as VStack,
47594 * } from `@wordpress/components`;
47595 *
47596 * function Example() {
47597 * 	return (
47598 * 		<VStack spacing={4}>
47599 * 			<Text>Some text here</Text>
47600 * 			<Divider />
47601 * 			<Text>Some more text here</Text>
47602 * 		</VStack>
47603 * 	);
47604 * }
47605 * ```
47606 */
47607const component_Divider = contextConnect(UnconnectedDivider, 'Divider');
47608/* harmony default export */ const divider_component = (component_Divider);
47609
47610;// CONCATENATED MODULE: ./packages/components/build-module/card/card-divider/hook.js
47611/**
47612 * WordPress dependencies
47613 */
47614
47615
47616/**
47617 * Internal dependencies
47618 */
47619
47620
47621
47622
47623function useCardDivider(props) {
47624  const {
47625    className,
47626    ...otherProps
47627  } = useContextSystem(props, 'CardDivider');
47628  const cx = useCx();
47629  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Divider, borderColor,
47630  // This classname is added for legacy compatibility reasons.
47631  'components-card__divider', className), [className, cx]);
47632  return {
47633    ...otherProps,
47634    className: classes
47635  };
47636}
47637
47638;// CONCATENATED MODULE: ./packages/components/build-module/card/card-divider/component.js
47639
47640/**
47641 * External dependencies
47642 */
47643
47644/**
47645 * Internal dependencies
47646 */
47647
47648
47649
47650
47651function UnconnectedCardDivider(props, forwardedRef) {
47652  const dividerProps = useCardDivider(props);
47653  return (0,external_wp_element_namespaceObject.createElement)(divider_component, {
47654    ...dividerProps,
47655    ref: forwardedRef
47656  });
47657}
47658
47659/**
47660 * `CardDivider` renders an optional divider within a `Card`.
47661 * It is typically used to divide multiple `CardBody` components from each other.
47662 *
47663 * ```jsx
47664 * import { Card, CardBody, CardDivider } from `@wordpress/components`;
47665 *
47666 * <Card>
47667 *  <CardBody>...</CardBody>
47668 *  <CardDivider />
47669 *  <CardBody>...</CardBody>
47670 * </Card>
47671 * ```
47672 */
47673const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider');
47674/* harmony default export */ const card_divider_component = (CardDivider);
47675
47676;// CONCATENATED MODULE: ./packages/components/build-module/card/card-footer/hook.js
47677/**
47678 * WordPress dependencies
47679 */
47680
47681
47682/**
47683 * Internal dependencies
47684 */
47685
47686
47687
47688
47689function useCardFooter(props) {
47690  const {
47691    className,
47692    justify,
47693    isBorderless = false,
47694    isShady = false,
47695    size = 'medium',
47696    ...otherProps
47697  } = useContextSystem(props, 'CardFooter');
47698  const cx = useCx();
47699  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Footer, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady,
47700  // This classname is added for legacy compatibility reasons.
47701  'components-card__footer', className), [className, cx, isBorderless, isShady, size]);
47702  return {
47703    ...otherProps,
47704    className: classes,
47705    justify
47706  };
47707}
47708
47709;// CONCATENATED MODULE: ./packages/components/build-module/card/card-footer/component.js
47710
47711/**
47712 * External dependencies
47713 */
47714
47715/**
47716 * Internal dependencies
47717 */
47718
47719
47720
47721
47722function UnconnectedCardFooter(props, forwardedRef) {
47723  const footerProps = useCardFooter(props);
47724  return (0,external_wp_element_namespaceObject.createElement)(flex_component, {
47725    ...footerProps,
47726    ref: forwardedRef
47727  });
47728}
47729
47730/**
47731 * `CardFooter` renders an optional footer within a `Card`.
47732 *
47733 * ```jsx
47734 * import { Card, CardBody, CardFooter } from `@wordpress/components`;
47735 *
47736 * <Card>
47737 * 	<CardBody>...</CardBody>
47738 * 	<CardFooter>...</CardFooter>
47739 * </Card>
47740 * ```
47741 */
47742const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter');
47743/* harmony default export */ const card_footer_component = (CardFooter);
47744
47745;// CONCATENATED MODULE: ./packages/components/build-module/card/card-header/hook.js
47746/**
47747 * WordPress dependencies
47748 */
47749
47750
47751/**
47752 * Internal dependencies
47753 */
47754
47755
47756
47757
47758function useCardHeader(props) {
47759  const {
47760    className,
47761    isBorderless = false,
47762    isShady = false,
47763    size = 'medium',
47764    ...otherProps
47765  } = useContextSystem(props, 'CardHeader');
47766  const cx = useCx();
47767  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(styles_Header, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady,
47768  // This classname is added for legacy compatibility reasons.
47769  'components-card__header', className), [className, cx, isBorderless, isShady, size]);
47770  return {
47771    ...otherProps,
47772    className: classes
47773  };
47774}
47775
47776;// CONCATENATED MODULE: ./packages/components/build-module/card/card-header/component.js
47777
47778/**
47779 * External dependencies
47780 */
47781
47782/**
47783 * Internal dependencies
47784 */
47785
47786
47787
47788
47789function UnconnectedCardHeader(props, forwardedRef) {
47790  const headerProps = useCardHeader(props);
47791  return (0,external_wp_element_namespaceObject.createElement)(flex_component, {
47792    ...headerProps,
47793    ref: forwardedRef
47794  });
47795}
47796
47797/**
47798 * `CardHeader` renders an optional header within a `Card`.
47799 *
47800 * ```jsx
47801 * import { Card, CardBody, CardHeader } from `@wordpress/components`;
47802 *
47803 * <Card>
47804 * 	<CardHeader>...</CardHeader>
47805 * 	<CardBody>...</CardBody>
47806 * </Card>
47807 * ```
47808 */
47809const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader');
47810/* harmony default export */ const card_header_component = (CardHeader);
47811
47812;// CONCATENATED MODULE: ./packages/components/build-module/card/card-media/hook.js
47813/**
47814 * WordPress dependencies
47815 */
47816
47817
47818/**
47819 * Internal dependencies
47820 */
47821
47822
47823
47824
47825function useCardMedia(props) {
47826  const {
47827    className,
47828    ...otherProps
47829  } = useContextSystem(props, 'CardMedia');
47830  const cx = useCx();
47831  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Media, borderRadius,
47832  // This classname is added for legacy compatibility reasons.
47833  'components-card__media', className), [className, cx]);
47834  return {
47835    ...otherProps,
47836    className: classes
47837  };
47838}
47839
47840;// CONCATENATED MODULE: ./packages/components/build-module/card/card-media/component.js
47841
47842/**
47843 * External dependencies
47844 */
47845
47846/**
47847 * Internal dependencies
47848 */
47849
47850
47851
47852
47853function UnconnectedCardMedia(props, forwardedRef) {
47854  const cardMediaProps = useCardMedia(props);
47855  return (0,external_wp_element_namespaceObject.createElement)(component, {
47856    ...cardMediaProps,
47857    ref: forwardedRef
47858  });
47859}
47860
47861/**
47862 * `CardMedia` provides a container for full-bleed content within a `Card`,
47863 * such as images, video, or even just a background color.
47864 *
47865 * @example
47866 * ```jsx
47867 * import { Card, CardBody, CardMedia } from '@wordpress/components';
47868 *
47869 * const Example = () => (
47870 *  <Card>
47871 *	  <CardMedia>
47872 *		  <img src="..." />
47873 *    </CardMedia>
47874 *    <CardBody>...</CardBody>
47875 *  </Card>
47876 * );
47877 * ```
47878 */
47879const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia');
47880/* harmony default export */ const card_media_component = (CardMedia);
47881
47882;// CONCATENATED MODULE: ./packages/components/build-module/checkbox-control/index.js
47883
47884/**
47885 * External dependencies
47886 */
47887
47888/**
47889 * WordPress dependencies
47890 */
47891
47892
47893
47894
47895
47896/**
47897 * Internal dependencies
47898 */
47899
47900/**
47901 * Checkboxes allow the user to select one or more items from a set.
47902 *
47903 * ```jsx
47904 * import { CheckboxControl } from '@wordpress/components';
47905 * import { useState } from '@wordpress/element';
47906 *
47907 * const MyCheckboxControl = () => {
47908 *   const [ isChecked, setChecked ] = useState( true );
47909 *   return (
47910 *     <CheckboxControl
47911 *       label="Is author"
47912 *       help="Is the user a author or not?"
47913 *       checked={ isChecked }
47914 *       onChange={ setChecked }
47915 *     />
47916 *   );
47917 * };
47918 * ```
47919 */
47920function CheckboxControl(props) {
47921  const {
47922    __nextHasNoMarginBottom,
47923    label,
47924    className,
47925    heading,
47926    checked,
47927    indeterminate,
47928    help,
47929    id: idProp,
47930    onChange,
47931    ...additionalProps
47932  } = props;
47933  if (heading) {
47934    external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', {
47935      alternative: 'a separate element to implement a heading',
47936      since: '5.8'
47937    });
47938  }
47939  const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false);
47940  const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false);
47941
47942  // Run the following callback every time the `ref` (and the additional
47943  // dependencies) change.
47944  const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
47945    if (!node) {
47946      return;
47947    }
47948
47949    // It cannot be set using an HTML attribute.
47950    node.indeterminate = !!indeterminate;
47951    setShowCheckedIcon(node.matches(':checked'));
47952    setShowIndeterminateIcon(node.matches(':indeterminate'));
47953  }, [checked, indeterminate]);
47954  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp);
47955  const onChangeValue = event => onChange(event.target.checked);
47956  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
47957    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
47958    label: heading,
47959    id: id,
47960    help: help,
47961    className: classnames_default()('components-checkbox-control', className)
47962  }, (0,external_wp_element_namespaceObject.createElement)("span", {
47963    className: "components-checkbox-control__input-container"
47964  }, (0,external_wp_element_namespaceObject.createElement)("input", {
47965    ref: ref,
47966    id: id,
47967    className: "components-checkbox-control__input",
47968    type: "checkbox",
47969    value: "1",
47970    onChange: onChangeValue,
47971    checked: checked,
47972    "aria-describedby": !!help ? id + '__help' : undefined,
47973    ...additionalProps
47974  }), showIndeterminateIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
47975    icon: library_reset,
47976    className: "components-checkbox-control__indeterminate",
47977    role: "presentation"
47978  }) : null, showCheckedIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
47979    icon: library_check,
47980    className: "components-checkbox-control__checked",
47981    role: "presentation"
47982  }) : null), (0,external_wp_element_namespaceObject.createElement)("label", {
47983    className: "components-checkbox-control__label",
47984    htmlFor: id
47985  }, label));
47986}
47987/* harmony default export */ const checkbox_control = (CheckboxControl);
47988
47989;// CONCATENATED MODULE: ./packages/components/build-module/clipboard-button/index.js
47990
47991/**
47992 * External dependencies
47993 */
47994
47995
47996/**
47997 * WordPress dependencies
47998 */
47999
48000
48001
48002
48003/**
48004 * Internal dependencies
48005 */
48006
48007const TIMEOUT = 4000;
48008function ClipboardButton({
48009  className,
48010  children,
48011  onCopy,
48012  onFinishCopy,
48013  text,
48014  ...buttonProps
48015}) {
48016  external_wp_deprecated_default()('wp.components.ClipboardButton', {
48017    since: '5.8',
48018    alternative: 'wp.compose.useCopyToClipboard'
48019  });
48020  const timeoutId = (0,external_wp_element_namespaceObject.useRef)();
48021  const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => {
48022    onCopy();
48023    if (timeoutId.current) {
48024      clearTimeout(timeoutId.current);
48025    }
48026    if (onFinishCopy) {
48027      timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
48028    }
48029  });
48030  (0,external_wp_element_namespaceObject.useEffect)(() => {
48031    if (timeoutId.current) {
48032      clearTimeout(timeoutId.current);
48033    }
48034  }, []);
48035  const classes = classnames_default()('components-clipboard-button', className);
48036
48037  // Workaround for inconsistent behavior in Safari, where <textarea> is not
48038  // the document.activeElement at the moment when the copy event fires.
48039  // This causes documentHasSelection() in the copy-handler component to
48040  // mistakenly override the ClipboardButton, and copy a serialized string
48041  // of the current block instead.
48042  const focusOnCopyEventTarget = event => {
48043    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
48044    event.target.focus();
48045  };
48046  return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
48047    ...buttonProps,
48048    className: classes,
48049    ref: ref,
48050    onCopy: focusOnCopyEventTarget
48051  }, children);
48052}
48053
48054;// CONCATENATED MODULE: ./packages/icons/build-module/library/more-vertical.js
48055
48056/**
48057 * WordPress dependencies
48058 */
48059
48060const moreVertical = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
48061  xmlns: "http://www.w3.org/2000/svg",
48062  viewBox: "0 0 24 24"
48063}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
48064  d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
48065}));
48066/* harmony default export */ const more_vertical = (moreVertical);
48067
48068;// CONCATENATED MODULE: ./packages/components/build-module/item-group/styles.js
48069function item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
48070/**
48071 * External dependencies
48072 */
48073
48074
48075/**
48076 * Internal dependencies
48077 */
48078
48079const unstyledButton = as => {
48080  return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", font('default.fontSize'), ";font-family:inherit;appearance:none;border:1px solid transparent;cursor:pointer;background:none;text-align:start;text-decoration:", as === 'a' ? 'none' : undefined, ";svg,path{fill:currentColor;}&:hover{color:", COLORS.theme.accent, ";}&:focus{box-shadow:none;outline:none;}&:focus-visible{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) var(\n\t\t\t\t\t--wp-components-color-accent,\n\t\t\t\t\tvar( --wp-admin-theme-color, ", COLORS.theme.accent, " )\n\t\t\t\t);outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0),  true ? "" : 0);
48081};
48082const itemWrapper =  true ? {
48083  name: "1bcj5ek",
48084  styles: "width:100%;display:block"
48085} : 0;
48086const item =  true ? {
48087  name: "150ruhm",
48088  styles: "box-sizing:border-box;width:100%;display:block;margin:0;color:inherit"
48089} : 0;
48090const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0),  true ? "" : 0);
48091const separated = /*#__PURE__*/emotion_react_browser_esm_css(">*:not( marquee )>*{border-bottom:1px solid ", config_values.surfaceBorderColor, ";}>*:last-of-type>*:not( :focus ){border-bottom-color:transparent;}" + ( true ? "" : 0),  true ? "" : 0);
48092const styles_borderRadius = config_values.controlBorderRadius;
48093const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0),  true ? "" : 0);
48094const styles_rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";>*:first-of-type>*{border-top-left-radius:", styles_borderRadius, ";border-top-right-radius:", styles_borderRadius, ";}>*:last-of-type>*{border-bottom-left-radius:", styles_borderRadius, ";border-bottom-right-radius:", styles_borderRadius, ";}" + ( true ? "" : 0),  true ? "" : 0);
48095const baseFontHeight = `calc(${config_values.fontSize} * ${config_values.fontLineHeightBase})`;
48096
48097/*
48098 * Math:
48099 * - Use the desired height as the base value
48100 * - Subtract the computed height of (default) text
48101 * - Subtract the effects of border
48102 * - Divide the calculated number by 2, in order to get an individual top/bottom padding
48103 */
48104const paddingY = `calc((${config_values.controlHeight} - ${baseFontHeight} - 2px) / 2)`;
48105const paddingYSmall = `calc((${config_values.controlHeightSmall} - ${baseFontHeight} - 2px) / 2)`;
48106const paddingYLarge = `calc((${config_values.controlHeightLarge} - ${baseFontHeight} - 2px) / 2)`;
48107const itemSizes = {
48108  small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
48109  medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0),  true ? "" : 0),
48110  large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0),  true ? "" : 0)
48111};
48112
48113;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item-group/hook.js
48114/**
48115 * Internal dependencies
48116 */
48117
48118
48119
48120/**
48121 * Internal dependencies
48122 */
48123
48124
48125function useItemGroup(props) {
48126  const {
48127    className,
48128    isBordered = false,
48129    isRounded = true,
48130    isSeparated = false,
48131    role = 'list',
48132    ...otherProps
48133  } = useContextSystem(props, 'ItemGroup');
48134  const cx = useCx();
48135  const classes = cx(isBordered && bordered, isSeparated && separated, isRounded && styles_rounded, className);
48136  return {
48137    isBordered,
48138    className: classes,
48139    role,
48140    isSeparated,
48141    ...otherProps
48142  };
48143}
48144
48145;// CONCATENATED MODULE: ./packages/components/build-module/item-group/context.js
48146/**
48147 * WordPress dependencies
48148 */
48149
48150
48151/**
48152 * Internal dependencies
48153 */
48154
48155const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({
48156  size: 'medium'
48157});
48158const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext);
48159
48160;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item-group/component.js
48161
48162/**
48163 * External dependencies
48164 */
48165
48166/**
48167 * Internal dependencies
48168 */
48169
48170
48171
48172
48173
48174function UnconnectedItemGroup(props, forwardedRef) {
48175  const {
48176    isBordered,
48177    isSeparated,
48178    size: sizeProp,
48179    ...otherProps
48180  } = useItemGroup(props);
48181  const {
48182    size: contextSize
48183  } = useItemGroupContext();
48184  const spacedAround = !isBordered && !isSeparated;
48185  const size = sizeProp || contextSize;
48186  const contextValue = {
48187    spacedAround,
48188    size
48189  };
48190  return (0,external_wp_element_namespaceObject.createElement)(ItemGroupContext.Provider, {
48191    value: contextValue
48192  }, (0,external_wp_element_namespaceObject.createElement)(component, {
48193    ...otherProps,
48194    ref: forwardedRef
48195  }));
48196}
48197
48198/**
48199 * `ItemGroup` displays a list of `Item`s grouped and styled together.
48200 *
48201 * ```jsx
48202 * import {
48203 *   __experimentalItemGroup as ItemGroup,
48204 *   __experimentalItem as Item,
48205 * } from '@wordpress/components';
48206 *
48207 * function Example() {
48208 *   return (
48209 *     <ItemGroup>
48210 *       <Item>Code</Item>
48211 *       <Item>is</Item>
48212 *       <Item>Poetry</Item>
48213 *     </ItemGroup>
48214 *   );
48215 * }
48216 * ```
48217 */
48218const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup');
48219/* harmony default export */ const item_group_component = (ItemGroup);
48220
48221;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/constants.js
48222const GRADIENT_MARKERS_WIDTH = 16;
48223const INSERT_POINT_WIDTH = 16;
48224const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
48225const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
48226const MINIMUM_SIGNIFICANT_MOVE = 5;
48227const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
48228const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
48229
48230;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/utils.js
48231/**
48232 * Internal dependencies
48233 */
48234
48235/**
48236 * Clamps a number between 0 and 100.
48237 *
48238 * @param value Value to clamp.
48239 *
48240 * @return Value clamped between 0 and 100.
48241 */
48242function clampPercent(value) {
48243  return Math.max(0, Math.min(100, value));
48244}
48245
48246/**
48247 * Check if a control point is overlapping with another.
48248 *
48249 * @param value        Array of control points.
48250 * @param initialIndex Index of the position to test.
48251 * @param newPosition  New position of the control point.
48252 * @param minDistance  Distance considered to be overlapping.
48253 *
48254 * @return True if the point is overlapping.
48255 */
48256function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
48257  const initialPosition = value[initialIndex].position;
48258  const minPosition = Math.min(initialPosition, newPosition);
48259  const maxPosition = Math.max(initialPosition, newPosition);
48260  return value.some(({
48261    position
48262  }, index) => {
48263    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
48264  });
48265}
48266
48267/**
48268 * Adds a control point from an array and returns the new array.
48269 *
48270 * @param points   Array of control points.
48271 * @param position Position to insert the new point.
48272 * @param color    Color to update the control point at index.
48273 *
48274 * @return New array of control points.
48275 */
48276function addControlPoint(points, position, color) {
48277  const nextIndex = points.findIndex(point => point.position > position);
48278  const newPoint = {
48279    color,
48280    position
48281  };
48282  const newPoints = points.slice();
48283  newPoints.splice(nextIndex - 1, 0, newPoint);
48284  return newPoints;
48285}
48286
48287/**
48288 * Removes a control point from an array and returns the new array.
48289 *
48290 * @param points Array of control points.
48291 * @param index  Index to remove.
48292 *
48293 * @return New array of control points.
48294 */
48295function removeControlPoint(points, index) {
48296  return points.filter((_point, pointIndex) => {
48297    return pointIndex !== index;
48298  });
48299}
48300/**
48301 * Updates a control point from an array and returns the new array.
48302 *
48303 * @param points   Array of control points.
48304 * @param index    Index to update.
48305 * @param newPoint New control point to replace the index.
48306 *
48307 * @return New array of control points.
48308 */
48309function updateControlPoint(points, index, newPoint) {
48310  const newValue = points.slice();
48311  newValue[index] = newPoint;
48312  return newValue;
48313}
48314
48315/**
48316 * Updates the position of a control point from an array and returns the new array.
48317 *
48318 * @param points      Array of control points.
48319 * @param index       Index to update.
48320 * @param newPosition Position to move the control point at index.
48321 *
48322 * @return New array of control points.
48323 */
48324function updateControlPointPosition(points, index, newPosition) {
48325  if (isOverlapping(points, index, newPosition)) {
48326    return points;
48327  }
48328  const newPoint = {
48329    ...points[index],
48330    position: newPosition
48331  };
48332  return updateControlPoint(points, index, newPoint);
48333}
48334
48335/**
48336 * Updates the position of a control point from an array and returns the new array.
48337 *
48338 * @param points   Array of control points.
48339 * @param index    Index to update.
48340 * @param newColor Color to update the control point at index.
48341 *
48342 * @return New array of control points.
48343 */
48344function updateControlPointColor(points, index, newColor) {
48345  const newPoint = {
48346    ...points[index],
48347    color: newColor
48348  };
48349  return updateControlPoint(points, index, newPoint);
48350}
48351
48352/**
48353 * Updates the position of a control point from an array and returns the new array.
48354 *
48355 * @param points   Array of control points.
48356 * @param position Position of the color stop.
48357 * @param newColor Color to update the control point at index.
48358 *
48359 * @return New array of control points.
48360 */
48361function updateControlPointColorByPosition(points, position, newColor) {
48362  const index = points.findIndex(point => point.position === position);
48363  return updateControlPointColor(points, index, newColor);
48364}
48365
48366/**
48367 * Gets the horizontal coordinate when dragging a control point with the mouse.
48368 *
48369 * @param mouseXcoordinate Horizontal coordinate of the mouse position.
48370 * @param containerElement Container for the gradient picker.
48371 *
48372 * @return Whole number percentage from the left.
48373 */
48374
48375function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {
48376  if (!containerElement) {
48377    return;
48378  }
48379  const {
48380    x,
48381    width
48382  } = containerElement.getBoundingClientRect();
48383  const absolutePositionValue = mouseXCoordinate - x;
48384  return Math.round(clampPercent(absolutePositionValue * 100 / width));
48385}
48386
48387;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/control-points.js
48388
48389/**
48390 * External dependencies
48391 */
48392
48393
48394
48395/**
48396 * WordPress dependencies
48397 */
48398
48399
48400
48401
48402
48403/**
48404 * Internal dependencies
48405 */
48406
48407
48408
48409
48410
48411
48412
48413function ControlPointButton({
48414  isOpen,
48415  position,
48416  color,
48417  ...additionalProps
48418}) {
48419  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton);
48420  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
48421  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
48422    "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(
48423    // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
48424    (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
48425    "aria-describedby": descriptionId,
48426    "aria-haspopup": "true",
48427    "aria-expanded": isOpen,
48428    className: classnames_default()('components-custom-gradient-picker__control-point-button', {
48429      'is-active': isOpen
48430    }),
48431    ...additionalProps
48432  }), (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
48433    id: descriptionId
48434  }, (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
48435}
48436function GradientColorPickerDropdown({
48437  isRenderedInSidebar,
48438  className,
48439  ...props
48440}) {
48441  // Open the popover below the gradient control/insertion point
48442  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
48443    placement: 'bottom',
48444    offset: 8
48445  }), []);
48446  const mergedClassName = classnames_default()('components-custom-gradient-picker__control-point-dropdown', className);
48447  return (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, {
48448    isRenderedInSidebar: isRenderedInSidebar,
48449    popoverProps: popoverProps,
48450    className: mergedClassName,
48451    ...props
48452  });
48453}
48454function ControlPoints({
48455  disableRemove,
48456  disableAlpha,
48457  gradientPickerDomRef,
48458  ignoreMarkerPosition,
48459  value: controlPoints,
48460  onChange,
48461  onStartControlPointChange,
48462  onStopControlPointChange,
48463  __experimentalIsRenderedInSidebar
48464}) {
48465  const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)();
48466  const onMouseMove = event => {
48467    if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
48468      return;
48469    }
48470    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);
48471    const {
48472      initialPosition,
48473      index,
48474      significantMoveHappened
48475    } = controlPointMoveState.current;
48476    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {
48477      controlPointMoveState.current.significantMoveHappened = true;
48478    }
48479    onChange(updateControlPointPosition(controlPoints, index, relativePosition));
48480  };
48481  const cleanEventListeners = () => {
48482    if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
48483      window.removeEventListener('mousemove', onMouseMove);
48484      window.removeEventListener('mouseup', cleanEventListeners);
48485      onStopControlPointChange();
48486      controlPointMoveState.current.listenersActivated = false;
48487    }
48488  };
48489
48490  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
48491  // This memoization would prevent the event listeners from being properly cleaned.
48492  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
48493  const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)();
48494  cleanEventListenersRef.current = cleanEventListeners;
48495  (0,external_wp_element_namespaceObject.useEffect)(() => {
48496    return () => {
48497      cleanEventListenersRef.current?.();
48498    };
48499  }, []);
48500  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, controlPoints.map((point, index) => {
48501    const initialPosition = point?.position;
48502    return ignoreMarkerPosition !== initialPosition && (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, {
48503      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
48504      key: index,
48505      onClose: onStopControlPointChange,
48506      renderToggle: ({
48507        isOpen,
48508        onToggle
48509      }) => (0,external_wp_element_namespaceObject.createElement)(ControlPointButton, {
48510        key: index,
48511        onClick: () => {
48512          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
48513            return;
48514          }
48515          if (isOpen) {
48516            onStopControlPointChange();
48517          } else {
48518            onStartControlPointChange();
48519          }
48520          onToggle();
48521        },
48522        onMouseDown: () => {
48523          if (window && window.addEventListener) {
48524            controlPointMoveState.current = {
48525              initialPosition,
48526              index,
48527              significantMoveHappened: false,
48528              listenersActivated: true
48529            };
48530            onStartControlPointChange();
48531            window.addEventListener('mousemove', onMouseMove);
48532            window.addEventListener('mouseup', cleanEventListeners);
48533          }
48534        },
48535        onKeyDown: event => {
48536          if (event.code === 'ArrowLeft') {
48537            // Stop propagation of the key press event to avoid focus moving
48538            // to another editor area.
48539            event.stopPropagation();
48540            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
48541          } else if (event.code === 'ArrowRight') {
48542            // Stop propagation of the key press event to avoid focus moving
48543            // to another editor area.
48544            event.stopPropagation();
48545            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
48546          }
48547        },
48548        isOpen: isOpen,
48549        position: point.position,
48550        color: point.color
48551      }),
48552      renderContent: ({
48553        onClose
48554      }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, {
48555        enableAlpha: !disableAlpha,
48556        color: point.color,
48557        onChange: color => {
48558          onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString()));
48559        }
48560      }), !disableRemove && controlPoints.length > 2 && (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
48561        className: "components-custom-gradient-picker__remove-control-point-wrapper",
48562        alignment: "center"
48563      }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
48564        onClick: () => {
48565          onChange(removeControlPoint(controlPoints, index));
48566          onClose();
48567        },
48568        variant: "link"
48569      }, (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')))),
48570      style: {
48571        left: `${point.position}%`,
48572        transform: 'translateX( -50% )'
48573      }
48574    });
48575  }));
48576}
48577function InsertPoint({
48578  value: controlPoints,
48579  onChange,
48580  onOpenInserter,
48581  onCloseInserter,
48582  insertPosition,
48583  disableAlpha,
48584  __experimentalIsRenderedInSidebar
48585}) {
48586  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false);
48587  return (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, {
48588    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
48589    className: "components-custom-gradient-picker__inserter",
48590    onClose: () => {
48591      onCloseInserter();
48592    },
48593    renderToggle: ({
48594      isOpen,
48595      onToggle
48596    }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
48597      "aria-expanded": isOpen,
48598      "aria-haspopup": "true",
48599      onClick: () => {
48600        if (isOpen) {
48601          onCloseInserter();
48602        } else {
48603          setAlreadyInsertedPoint(false);
48604          onOpenInserter();
48605        }
48606        onToggle();
48607      },
48608      className: "components-custom-gradient-picker__insert-point-dropdown",
48609      icon: library_plus
48610    }),
48611    renderContent: () => (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, {
48612      enableAlpha: !disableAlpha,
48613      onChange: color => {
48614        if (!alreadyInsertedPoint) {
48615          onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString()));
48616          setAlreadyInsertedPoint(true);
48617        } else {
48618          onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString()));
48619        }
48620      }
48621    }),
48622    style: insertPosition !== null ? {
48623      left: `${insertPosition}%`,
48624      transform: 'translateX( -50% )'
48625    } : undefined
48626  });
48627}
48628ControlPoints.InsertPoint = InsertPoint;
48629/* harmony default export */ const control_points = (ControlPoints);
48630
48631;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/index.js
48632
48633/**
48634 * External dependencies
48635 */
48636
48637
48638/**
48639 * WordPress dependencies
48640 */
48641
48642
48643/**
48644 * Internal dependencies
48645 */
48646
48647
48648
48649const customGradientBarReducer = (state, action) => {
48650  switch (action.type) {
48651    case 'MOVE_INSERTER':
48652      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
48653        return {
48654          id: 'MOVING_INSERTER',
48655          insertPosition: action.insertPosition
48656        };
48657      }
48658      break;
48659    case 'STOP_INSERTER_MOVE':
48660      if (state.id === 'MOVING_INSERTER') {
48661        return {
48662          id: 'IDLE'
48663        };
48664      }
48665      break;
48666    case 'OPEN_INSERTER':
48667      if (state.id === 'MOVING_INSERTER') {
48668        return {
48669          id: 'INSERTING_CONTROL_POINT',
48670          insertPosition: state.insertPosition
48671        };
48672      }
48673      break;
48674    case 'CLOSE_INSERTER':
48675      if (state.id === 'INSERTING_CONTROL_POINT') {
48676        return {
48677          id: 'IDLE'
48678        };
48679      }
48680      break;
48681    case 'START_CONTROL_CHANGE':
48682      if (state.id === 'IDLE') {
48683        return {
48684          id: 'MOVING_CONTROL_POINT'
48685        };
48686      }
48687      break;
48688    case 'STOP_CONTROL_CHANGE':
48689      if (state.id === 'MOVING_CONTROL_POINT') {
48690        return {
48691          id: 'IDLE'
48692        };
48693      }
48694      break;
48695  }
48696  return state;
48697};
48698const customGradientBarReducerInitialState = {
48699  id: 'IDLE'
48700};
48701function CustomGradientBar({
48702  background,
48703  hasGradient,
48704  value: controlPoints,
48705  onChange,
48706  disableInserter = false,
48707  disableAlpha = false,
48708  __experimentalIsRenderedInSidebar = false
48709}) {
48710  const gradientMarkersContainerDomRef = (0,external_wp_element_namespaceObject.useRef)(null);
48711  const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
48712  const onMouseEnterAndMove = event => {
48713    if (!gradientMarkersContainerDomRef.current) {
48714      return;
48715    }
48716    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);
48717
48718    // If the insert point is close to an existing control point don't show it.
48719    if (controlPoints.some(({
48720      position
48721    }) => {
48722      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
48723    })) {
48724      if (gradientBarState.id === 'MOVING_INSERTER') {
48725        gradientBarStateDispatch({
48726          type: 'STOP_INSERTER_MOVE'
48727        });
48728      }
48729      return;
48730    }
48731    gradientBarStateDispatch({
48732      type: 'MOVE_INSERTER',
48733      insertPosition
48734    });
48735  };
48736  const onMouseLeave = () => {
48737    gradientBarStateDispatch({
48738      type: 'STOP_INSERTER_MOVE'
48739    });
48740  };
48741  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
48742  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
48743  return (0,external_wp_element_namespaceObject.createElement)("div", {
48744    className: classnames_default()('components-custom-gradient-picker__gradient-bar', {
48745      'has-gradient': hasGradient
48746    }),
48747    onMouseEnter: onMouseEnterAndMove,
48748    onMouseMove: onMouseEnterAndMove,
48749    onMouseLeave: onMouseLeave
48750  }, (0,external_wp_element_namespaceObject.createElement)("div", {
48751    className: "components-custom-gradient-picker__gradient-bar-background",
48752    style: {
48753      background,
48754      opacity: hasGradient ? 1 : 0.4
48755    }
48756  }), (0,external_wp_element_namespaceObject.createElement)("div", {
48757    ref: gradientMarkersContainerDomRef,
48758    className: "components-custom-gradient-picker__markers-container"
48759  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0,external_wp_element_namespaceObject.createElement)(control_points.InsertPoint, {
48760    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
48761    disableAlpha: disableAlpha,
48762    insertPosition: gradientBarState.insertPosition,
48763    value: controlPoints,
48764    onChange: onChange,
48765    onOpenInserter: () => {
48766      gradientBarStateDispatch({
48767        type: 'OPEN_INSERTER'
48768      });
48769    },
48770    onCloseInserter: () => {
48771      gradientBarStateDispatch({
48772        type: 'CLOSE_INSERTER'
48773      });
48774    }
48775  }), (0,external_wp_element_namespaceObject.createElement)(control_points, {
48776    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
48777    disableAlpha: disableAlpha,
48778    disableRemove: disableInserter,
48779    gradientPickerDomRef: gradientMarkersContainerDomRef,
48780    ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
48781    value: controlPoints,
48782    onChange: onChange,
48783    onStartControlPointChange: () => {
48784      gradientBarStateDispatch({
48785        type: 'START_CONTROL_CHANGE'
48786      });
48787    },
48788    onStopControlPointChange: () => {
48789      gradientBarStateDispatch({
48790        type: 'STOP_CONTROL_CHANGE'
48791      });
48792    }
48793  })));
48794}
48795
48796// EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js
48797var build_node = __webpack_require__(7115);
48798;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/constants.js
48799/**
48800 * WordPress dependencies
48801 */
48802
48803const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
48804const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
48805const HORIZONTAL_GRADIENT_ORIENTATION = {
48806  type: 'angular',
48807  value: '90'
48808};
48809const GRADIENT_OPTIONS = [{
48810  value: 'linear-gradient',
48811  label: (0,external_wp_i18n_namespaceObject.__)('Linear')
48812}, {
48813  value: 'radial-gradient',
48814  label: (0,external_wp_i18n_namespaceObject.__)('Radial')
48815}];
48816const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
48817  top: 0,
48818  'top right': 45,
48819  'right top': 45,
48820  right: 90,
48821  'right bottom': 135,
48822  'bottom right': 135,
48823  bottom: 180,
48824  'bottom left': 225,
48825  'left bottom': 225,
48826  left: 270,
48827  'top left': 315,
48828  'left top': 315
48829};
48830
48831;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/serializer.js
48832/**
48833 * External dependencies
48834 */
48835
48836function serializeGradientColor({
48837  type,
48838  value
48839}) {
48840  if (type === 'literal') {
48841    return value;
48842  }
48843  if (type === 'hex') {
48844    return `#${value}`;
48845  }
48846  return `${type}(${value.join(',')})`;
48847}
48848function serializeGradientPosition(position) {
48849  if (!position) {
48850    return '';
48851  }
48852  const {
48853    value,
48854    type
48855  } = position;
48856  return `${value}${type}`;
48857}
48858function serializeGradientColorStop({
48859  type,
48860  value,
48861  length
48862}) {
48863  return `${serializeGradientColor({
48864    type,
48865    value
48866  })} ${serializeGradientPosition(length)}`;
48867}
48868function serializeGradientOrientation(orientation) {
48869  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {
48870    return;
48871  }
48872  return `${orientation.value}deg`;
48873}
48874function serializeGradient({
48875  type,
48876  orientation,
48877  colorStops
48878}) {
48879  const serializedOrientation = serializeGradientOrientation(orientation);
48880  const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {
48881    const getNumericStopValue = colorStop => {
48882      return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);
48883    };
48884    return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);
48885  }).map(serializeGradientColorStop);
48886  return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;
48887}
48888
48889;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/utils.js
48890/**
48891 * External dependencies
48892 */
48893
48894
48895
48896
48897/**
48898 * Internal dependencies
48899 */
48900
48901
48902k([names]);
48903function getLinearGradientRepresentation(gradientAST) {
48904  return serializeGradient({
48905    type: 'linear-gradient',
48906    orientation: HORIZONTAL_GRADIENT_ORIENTATION,
48907    colorStops: gradientAST.colorStops
48908  });
48909}
48910function hasUnsupportedLength(item) {
48911  return item.length === undefined || item.length.type !== '%';
48912}
48913function getGradientAstWithDefault(value) {
48914  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
48915  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
48916  let gradientAST;
48917  let hasGradient = !!value;
48918  const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT;
48919  try {
48920    gradientAST = build_node.parse(valueToParse)[0];
48921  } catch (error) {
48922    // eslint-disable-next-line no-console
48923    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);
48924    gradientAST = build_node.parse(DEFAULT_GRADIENT)[0];
48925    hasGradient = false;
48926  }
48927  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {
48928    gradientAST.orientation = {
48929      type: 'angular',
48930      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()
48931    };
48932  }
48933  if (gradientAST.colorStops.some(hasUnsupportedLength)) {
48934    const {
48935      colorStops
48936    } = gradientAST;
48937    const step = 100 / (colorStops.length - 1);
48938    colorStops.forEach((stop, index) => {
48939      stop.length = {
48940        value: `${step * index}`,
48941        type: '%'
48942      };
48943    });
48944  }
48945  return {
48946    gradientAST,
48947    hasGradient
48948  };
48949}
48950function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
48951  return {
48952    ...gradientAST,
48953    colorStops: newControlPoints.map(({
48954      position,
48955      color
48956    }) => {
48957      const {
48958        r,
48959        g,
48960        b,
48961        a
48962      } = w(color).toRgb();
48963      return {
48964        length: {
48965          type: '%',
48966          value: position?.toString()
48967        },
48968        type: a < 1 ? 'rgba' : 'rgb',
48969        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]
48970      };
48971    })
48972  };
48973}
48974function getStopCssColor(colorStop) {
48975  switch (colorStop.type) {
48976    case 'hex':
48977      return `#${colorStop.value}`;
48978    case 'literal':
48979      return colorStop.value;
48980    case 'rgb':
48981    case 'rgba':
48982      return `${colorStop.type}(${colorStop.value.join(',')})`;
48983    default:
48984      // Should be unreachable if passing an AST from gradient-parser.
48985      // See https://github.com/rafaelcaricio/gradient-parser#ast.
48986      return 'transparent';
48987  }
48988}
48989
48990;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js
48991
48992function custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
48993/**
48994 * External dependencies
48995 */
48996
48997/**
48998 * Internal dependencies
48999 */
49000
49001const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
49002  target: "e10bzpgi1"
49003} : 0)( true ? {
49004  name: "1gvx10y",
49005  styles: "flex-grow:5"
49006} : 0);
49007const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
49008  target: "e10bzpgi0"
49009} : 0)( true ? {
49010  name: "1gvx10y",
49011  styles: "flex-grow:5"
49012} : 0);
49013
49014;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/index.js
49015
49016/**
49017 * External dependencies
49018 */
49019
49020/**
49021 * WordPress dependencies
49022 */
49023
49024
49025
49026/**
49027 * Internal dependencies
49028 */
49029
49030
49031
49032
49033
49034
49035
49036
49037
49038const GradientAnglePicker = ({
49039  gradientAST,
49040  hasGradient,
49041  onChange
49042}) => {
49043  var _gradientAST$orientat;
49044  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
49045  const onAngleChange = newAngle => {
49046    onChange(serializeGradient({
49047      ...gradientAST,
49048      orientation: {
49049        type: 'angular',
49050        value: `${newAngle}`
49051      }
49052    }));
49053  };
49054  return (0,external_wp_element_namespaceObject.createElement)(angle_picker_control, {
49055    __nextHasNoMarginBottom: true,
49056    onChange: onAngleChange,
49057    value: hasGradient ? angle : ''
49058  });
49059};
49060const GradientTypePicker = ({
49061  gradientAST,
49062  hasGradient,
49063  onChange
49064}) => {
49065  const {
49066    type
49067  } = gradientAST;
49068  const onSetLinearGradient = () => {
49069    onChange(serializeGradient({
49070      ...gradientAST,
49071      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,
49072      type: 'linear-gradient'
49073    }));
49074  };
49075  const onSetRadialGradient = () => {
49076    const {
49077      orientation,
49078      ...restGradientAST
49079    } = gradientAST;
49080    onChange(serializeGradient({
49081      ...restGradientAST,
49082      type: 'radial-gradient'
49083    }));
49084  };
49085  const handleOnChange = next => {
49086    if (next === 'linear-gradient') {
49087      onSetLinearGradient();
49088    }
49089    if (next === 'radial-gradient') {
49090      onSetRadialGradient();
49091    }
49092  };
49093  return (0,external_wp_element_namespaceObject.createElement)(select_control, {
49094    __nextHasNoMarginBottom: true,
49095    className: "components-custom-gradient-picker__type-picker",
49096    label: (0,external_wp_i18n_namespaceObject.__)('Type'),
49097    labelPosition: "top",
49098    onChange: handleOnChange,
49099    options: GRADIENT_OPTIONS,
49100    size: "__unstable-large",
49101    value: hasGradient ? type : undefined
49102  });
49103};
49104
49105/**
49106 * CustomGradientPicker is a React component that renders a UI for specifying
49107 * linear or radial gradients. Radial gradients are displayed in the picker as
49108 * a slice of the gradient from the center to the outside.
49109 *
49110 * ```jsx
49111 * import { CustomGradientPicker } from '@wordpress/components';
49112 * import { useState } from '@wordpress/element';
49113 *
49114 * const MyCustomGradientPicker = () => {
49115 *   const [ gradient, setGradient ] = useState();
49116 *
49117 *   return (
49118 *     <CustomGradientPicker
49119 *			value={ gradient }
49120 *			onChange={ setGradient }
49121 *     />
49122 *   );
49123 * };
49124 * ```
49125 */
49126function CustomGradientPicker({
49127  /** Start opting into the new margin-free styles that will become the default in a future version. */
49128  __nextHasNoMargin = false,
49129  value,
49130  onChange,
49131  __experimentalIsRenderedInSidebar = false
49132}) {
49133  const {
49134    gradientAST,
49135    hasGradient
49136  } = getGradientAstWithDefault(value);
49137
49138  // On radial gradients the bar should display a linear gradient.
49139  // On radial gradients the bar represents a slice of the gradient from the center until the outside.
49140  // On liner gradients the bar represents the color stops from left to right independently of the angle.
49141  const background = getLinearGradientRepresentation(gradientAST);
49142
49143  // Control points color option may be hex from presets, custom colors will be rgb.
49144  // The position should always be a percentage.
49145  const controlPoints = gradientAST.colorStops.map(colorStop => {
49146    return {
49147      color: getStopCssColor(colorStop),
49148      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
49149      // TypeScript doesn't know that `colorStop.length` is not undefined here.
49150      // @ts-expect-error
49151      position: parseInt(colorStop.length.value)
49152    };
49153  });
49154  if (!__nextHasNoMargin) {
49155    external_wp_deprecated_default()('Outer margin styles for wp.components.CustomGradientPicker', {
49156      since: '6.1',
49157      version: '6.4',
49158      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
49159    });
49160  }
49161  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
49162    spacing: 4,
49163    className: classnames_default()('components-custom-gradient-picker', {
49164      'is-next-has-no-margin': __nextHasNoMargin
49165    })
49166  }, (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, {
49167    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
49168    background: background,
49169    hasGradient: hasGradient,
49170    value: controlPoints,
49171    onChange: newControlPoints => {
49172      onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));
49173    }
49174  }), (0,external_wp_element_namespaceObject.createElement)(flex_component, {
49175    gap: 3,
49176    className: "components-custom-gradient-picker__ui-line"
49177  }, (0,external_wp_element_namespaceObject.createElement)(SelectWrapper, null, (0,external_wp_element_namespaceObject.createElement)(GradientTypePicker, {
49178    gradientAST: gradientAST,
49179    hasGradient: hasGradient,
49180    onChange: onChange
49181  })), (0,external_wp_element_namespaceObject.createElement)(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0,external_wp_element_namespaceObject.createElement)(GradientAnglePicker, {
49182    gradientAST: gradientAST,
49183    hasGradient: hasGradient,
49184    onChange: onChange
49185  }))));
49186}
49187/* harmony default export */ const custom_gradient_picker = (CustomGradientPicker);
49188
49189;// CONCATENATED MODULE: ./packages/components/build-module/gradient-picker/index.js
49190
49191/**
49192 * WordPress dependencies
49193 */
49194
49195
49196
49197
49198
49199/**
49200 * Internal dependencies
49201 */
49202
49203
49204
49205
49206
49207// The Multiple Origin Gradients have a `gradients` property (an array of
49208// gradient objects), while Single Origin ones have a `gradient` property.
49209const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);
49210const isMultipleOriginArray = arr => {
49211  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
49212};
49213function SingleOrigin({
49214  className,
49215  clearGradient,
49216  gradients,
49217  onChange,
49218  value,
49219  ...additionalProps
49220}) {
49221  const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
49222    return gradients.map(({
49223      gradient,
49224      name
49225    }, index) => (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, {
49226      key: gradient,
49227      value: gradient,
49228      isSelected: value === gradient,
49229      tooltipText: name ||
49230      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
49231      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient),
49232      style: {
49233        color: 'rgba( 0,0,0,0 )',
49234        background: gradient
49235      },
49236      onClick: value === gradient ? clearGradient : () =>
49236 onChange(gradient, index),
49237      "aria-label": name ?
49238      // translators: %s: The name of the gradient e.g: "Angular red to blue".
49239      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) :
49240      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
49241      (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient)
49242    }));
49243  }, [gradients, value, onChange, clearGradient]);
49244  return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.OptionGroup, {
49245    className: className,
49246    options: gradientOptions,
49247    ...additionalProps
49248  });
49249}
49250function MultipleOrigin({
49251  className,
49252  clearGradient,
49253  gradients,
49254  onChange,
49255  value,
49256  headingLevel
49257}) {
49258  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin);
49259  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
49260    spacing: 3,
49261    className: className
49262  }, gradients.map(({
49263    name,
49264    gradients: gradientSet
49265  }, index) => {
49266    const id = `color-palette-${instanceId}-${index}`;
49267    return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
49268      spacing: 2,
49269      key: index
49270    }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, {
49271      level: headingLevel,
49272      id: id
49273    }, name), (0,external_wp_element_namespaceObject.createElement)(SingleOrigin, {
49274      clearGradient: clearGradient,
49275      gradients: gradientSet,
49276      onChange: gradient => onChange(gradient, index),
49277      value: value,
49278      "aria-labelledby": id
49279    }));
49280  }));
49281}
49282function gradient_picker_Component(props) {
49283  const {
49284    asButtons,
49285    loop,
49286    actions,
49287    headingLevel,
49288    'aria-label': ariaLabel,
49289    'aria-labelledby': ariaLabelledby,
49290    ...additionalProps
49291  } = props;
49292  const options = isMultipleOriginArray(props.gradients) ? (0,external_wp_element_namespaceObject.createElement)(MultipleOrigin, {
49293    headingLevel: headingLevel,
49294    ...additionalProps
49295  }) : (0,external_wp_element_namespaceObject.createElement)(SingleOrigin, {
49296    ...additionalProps
49297  });
49298  let metaProps;
49299  if (asButtons) {
49300    metaProps = {
49301      asButtons: true
49302    };
49303  } else {
49304    const _metaProps = {
49305      asButtons: false,
49306      loop
49307    };
49308    if (ariaLabel) {
49309      metaProps = {
49310        ..._metaProps,
49311        'aria-label': ariaLabel
49312      };
49313    } else if (ariaLabelledby) {
49314      metaProps = {
49315        ..._metaProps,
49316        'aria-labelledby': ariaLabelledby
49317      };
49318    } else {
49319      metaProps = {
49320        ..._metaProps,
49321        'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
49322      };
49323    }
49324  }
49325  return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, {
49326    ...metaProps,
49327    actions: actions,
49328    options: options
49329  });
49330}
49331
49332/**
49333 *  GradientPicker is a React component that renders a color gradient picker to
49334 * define a multi step gradient. There's either a _linear_ or a _radial_ type
49335 * available.
49336 *
49337 * ```jsx
49338 *import { GradientPicker } from '@wordpress/components';
49339 *import { useState } from '@wordpress/element';
49340 *
49341 *const myGradientPicker = () => {
49342 *	const [ gradient, setGradient ] = useState( null );
49343 *
49344 *	return (
49345 *		<GradientPicker
49346 *			__nextHasNoMargin
49347 *			value={ gradient }
49348 *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
49349 *			gradients={ [
49350 *				{
49351 *					name: 'JShine',
49352 *					gradient:
49353 *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
49354 *					slug: 'jshine',
49355 *				},
49356 *				{
49357 *					name: 'Moonlit Asteroid',
49358 *					gradient:
49359 *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
49360 *					slug: 'moonlit-asteroid',
49361 *				},
49362 *				{
49363 *					name: 'Rastafarie',
49364 *					gradient:
49365 *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
49366 *					slug: 'rastafari',
49367 *				},
49368 *			] }
49369 *		/>
49370 *	);
49371 *};
49372 *```
49373 *
49374 */
49375function GradientPicker({
49376  /** Start opting into the new margin-free styles that will become the default in a future version. */
49377  __nextHasNoMargin = false,
49378  className,
49379  gradients = [],
49380  onChange,
49381  value,
49382  clearable = true,
49383  disableCustomGradients = false,
49384  __experimentalIsRenderedInSidebar,
49385  headingLevel = 2,
49386  ...additionalProps
49387}) {
49388  const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() =>
49388 onChange(undefined), [onChange]);
49389  if (!__nextHasNoMargin) {
49390    external_wp_deprecated_default()('Outer margin styles for wp.components.GradientPicker', {
49391      since: '6.1',
49392      version: '6.4',
49393      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
49394    });
49395  }
49396  const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
49397    marginTop: !gradients.length ? 3 : undefined,
49398    marginBottom: !clearable ? 6 : 0
49399  } : {};
49400  return (
49401    // Outmost Spacer wrapper can be removed when deprecation period is over
49402    (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
49403      marginBottom: 0,
49404      ...deprecatedMarginSpacerProps
49405    }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
49406      spacing: gradients.length ? 4 : 0
49407    }, !disableCustomGradients && (0,external_wp_element_namespaceObject.createElement)(custom_gradient_picker, {
49408      __nextHasNoMargin: true,
49409      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
49410      value: value,
49411      onChange: onChange
49412    }), (gradients.length || clearable) && (0,external_wp_element_namespaceObject.createElement)(gradient_picker_Component, {
49413      ...additionalProps,
49414      className: className,
49415      clearGradient: clearGradient,
49416      gradients: gradients,
49417      onChange: onChange,
49418      value: value,
49419      actions: clearable && !disableCustomGradients && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, {
49420        onClick: clearGradient
49421      }, (0,external_wp_i18n_namespaceObject.__)('Clear')),
49422      headingLevel: headingLevel
49423    })))
49424  );
49425}
49426/* harmony default export */ const gradient_picker = (GradientPicker);
49427
49428;// CONCATENATED MODULE: ./packages/icons/build-module/library/menu.js
49429
49430/**
49431 * WordPress dependencies
49432 */
49433
49434const menu = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
49435  xmlns: "http://www.w3.org/2000/svg",
49436  viewBox: "0 0 24 24"
49437}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
49438  d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"
49439}));
49440/* harmony default export */ const library_menu = (menu);
49441
49442;// CONCATENATED MODULE: external ["wp","dom"]
49443const external_wp_dom_namespaceObject = window["wp"]["dom"];
49444;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/container.js
49445
49446/**
49447 * External dependencies
49448 */
49449
49450/**
49451 * WordPress dependencies
49452 */
49453
49454
49455
49456/**
49457 * Internal dependencies
49458 */
49459
49460const container_noop = () => {};
49461const MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox'];
49462function cycleValue(value, total, offset) {
49463  const nextValue = value + offset;
49464  if (nextValue < 0) {
49465    return total + nextValue;
49466  } else if (nextValue >= total) {
49467    return nextValue - total;
49468  }
49469  return nextValue;
49470}
49471class NavigableContainer extends external_wp_element_namespaceObject.Component {
49472  constructor(args) {
49473    super(args);
49474    this.onKeyDown = this.onKeyDown.bind(this);
49475    this.bindContainer = this.bindContainer.bind(this);
49476    this.getFocusableContext = this.getFocusableContext.bind(this);
49477    this.getFocusableIndex = this.getFocusableIndex.bind(this);
49478  }
49479  componentDidMount() {
49480    if (!this.container) {
49481      return;
49482    }
49483
49484    // We use DOM event listeners instead of React event listeners
49485    // because we want to catch events from the underlying DOM tree
49486    // The React Tree can be different from the DOM tree when using
49487    // portals. Block Toolbars for instance are rendered in a separate
49488    // React Trees.
49489    this.container.addEventListener('keydown', this.onKeyDown);
49490  }
49491  componentWillUnmount() {
49492    if (!this.container) {
49493      return;
49494    }
49495    this.container.removeEventListener('keydown', this.onKeyDown);
49496  }
49497  bindContainer(ref) {
49498    const {
49499      forwardedRef
49500    } = this.props;
49501    this.container = ref;
49502    if (typeof forwardedRef === 'function') {
49503      forwardedRef(ref);
49504    } else if (forwardedRef && 'current' in forwardedRef) {
49505      forwardedRef.current = ref;
49506    }
49507  }
49508  getFocusableContext(target) {
49509    if (!this.container) {
49510      return null;
49511    }
49512    const {
49513      onlyBrowserTabstops
49514    } = this.props;
49515    const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable;
49516    const focusables = finder.find(this.container);
49517    const index = this.getFocusableIndex(focusables, target);
49518    if (index > -1 && target) {
49519      return {
49520        index,
49521        target,
49522        focusables
49523      };
49524    }
49525    return null;
49526  }
49527  getFocusableIndex(focusables, target) {
49528    return focusables.indexOf(target);
49529  }
49530  onKeyDown(event) {
49531    if (this.props.onKeyDown) {
49532      this.props.onKeyDown(event);
49533    }
49534    const {
49535      getFocusableContext
49536    } = this;
49537    const {
49538      cycle = true,
49539      eventToOffset,
49540      onNavigate = container_noop,
49541      stopNavigationEvents
49542    } = this.props;
49543    const offset = eventToOffset(event);
49544
49545    // eventToOffset returns undefined if the event is not handled by the component.
49546    if (offset !== undefined && stopNavigationEvents) {
49547      // Prevents arrow key handlers bound to the document directly interfer
49547ing.
49548      event.stopImmediatePropagation();
49549
49550      // When navigating a collection of items, prevent scroll containers
49551      // from scrolling. The preventDefault also prevents Voiceover from
49552      // 'handling' the event, as voiceover will try to use arrow keys
49553      // for highlighting text.
49554      const targetRole = event.target?.getAttribute('role');
49555      const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);
49556      if (targetHasMenuItemRole) {
49557        event.preventDefault();
49558      }
49559    }
49560    if (!offset) {
49561      return;
49562    }
49563    const activeElement = event.target?.ownerDocument?.activeElement;
49564    if (!activeElement) {
49565      return;
49566    }
49567    const context = getFocusableContext(activeElement);
49568    if (!context) {
49569      return;
49570    }
49571    const {
49572      index,
49573      focusables
49574    } = context;
49575    const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset;
49576    if (nextIndex >= 0 && nextIndex < focusables.length) {
49577      focusables[nextIndex].focus();
49578      onNavigate(nextIndex, focusables[nextIndex]);
49579
49580      // `preventDefault()` on tab to avoid having the browser move the focus
49581      // after this component has already moved it.
49582      if (event.code === 'Tab') {
49583        event.preventDefault();
49584      }
49585    }
49586  }
49587  render() {
49588    const {
49589      children,
49590      stopNavigationEvents,
49591      eventToOffset,
49592      onNavigate,
49593      onKeyDown,
49594      cycle,
49595      onlyBrowserTabstops,
49596      forwardedRef,
49597      ...restProps
49598    } = this.props;
49599    return (0,external_wp_element_namespaceObject.createElement)("div", {
49600      ref: this.bindContainer,
49601      ...restProps
49602    }, children);
49603  }
49604}
49605const forwardedNavigableContainer = (props, ref) => {
49606  return (0,external_wp_element_namespaceObject.createElement)(NavigableContainer, {
49607    ...props,
49608    forwardedRef: ref
49609  });
49610};
49611forwardedNavigableContainer.displayName = 'NavigableContainer';
49612/* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer));
49613
49614;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/menu.js
49615
49616/**
49617 * External dependencies
49618 */
49619
49620/**
49621 * WordPress dependencies
49622 */
49623
49624
49625/**
49626 * Internal dependencies
49627 */
49628
49629function UnforwardedNavigableMenu({
49630  role = 'menu',
49631  orientation = 'vertical',
49632  ...rest
49633}, ref) {
49634  const eventToOffset = evt => {
49635    const {
49636      code
49637    } = evt;
49638    let next = ['ArrowDown'];
49639    let previous = ['ArrowUp'];
49640    if (orientation === 'horizontal') {
49641      next = ['ArrowRight'];
49642      previous = ['ArrowLeft'];
49643    }
49644    if (orientation === 'both') {
49645      next = ['ArrowRight', 'ArrowDown'];
49646      previous = ['ArrowLeft', 'ArrowUp'];
49647    }
49648    if (next.includes(code)) {
49649      return 1;
49650    } else if (previous.includes(code)) {
49651      return -1;
49652    } else if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(code)) {
49653      // Key press should be handled, e.g. have event propagation and
49654      // default behavior handled by NavigableContainer but not result
49655      // in an offset.
49656      return 0;
49657    }
49658    return undefined;
49659  };
49660  return (0,external_wp_element_namespaceObject.createElement)(container, {
49661    ref: ref,
49662    stopNavigationEvents: true,
49663    onlyBrowserTabstops: false,
49664    role: role,
49665    "aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined,
49666    eventToOffset: eventToOffset,
49667    ...rest
49668  });
49669}
49670
49671/**
49672 * A container for a navigable menu.
49673 *
49674 *  ```jsx
49675 *  import {
49676 *    NavigableMenu,
49677 *    Button,
49678 *  } from '@wordpress/components';
49679 *
49680 *  function onNavigate( index, target ) {
49681 *    console.log( `Navigates to ${ index }`, target );
49682 *  }
49683 *
49684 *  const MyNavigableContainer = () => (
49685 *    <div>
49686 *      <span>Navigable Menu:</span>
49687 *      <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
49688 *        <Button variant="secondary">Item 1</Button>
49689 *        <Button variant="secondary">Item 2</Button>
49690 *        <Button variant="secondary">Item 3</Button>
49691 *      </NavigableMenu>
49692 *    </div>
49693 *  );
49694 *  ```
49695 */
49696const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu);
49697/* harmony default export */ const navigable_container_menu = (NavigableMenu);
49698
49699;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu/index.js
49700
49701/**
49702 * External dependencies
49703 */
49704
49705
49706/**
49707 * WordPress dependencies
49708 */
49709
49710
49711/**
49712 * Internal dependencies
49713 */
49714
49715
49716
49717
49718function dropdown_menu_mergeProps(defaultProps = {}, props = {}) {
49719  const mergedProps = {
49720    ...defaultProps,
49721    ...props
49722  };
49723  if (props.className && defaultProps.className) {
49724    mergedProps.className = classnames_default()(props.className, defaultProps.className);
49725  }
49726  return mergedProps;
49727}
49728function dropdown_menu_isFunction(maybeFunc) {
49729  return typeof maybeFunc === 'function';
49730}
49731function UnconnectedDropdownMenu(dropdownMenuProps) {
49732  const {
49733    children,
49734    className,
49735    controls,
49736    icon = library_menu,
49737    label,
49738    popoverProps,
49739    toggleProps,
49740    menuProps,
49741    disableOpenOnArrowDown = false,
49742    text,
49743    noIcons,
49744    open,
49745    defaultOpen,
49746    onToggle: onToggleProp,
49747    // Context
49748    variant
49749  } = useContextSystem(dropdownMenuProps, 'DropdownMenu');
49750  if (!controls?.length && !dropdown_menu_isFunction(children)) {
49751    return null;
49752  }
49753
49754  // Normalize controls to nested array of objects (sets of controls)
49755  let controlSets;
49756  if (controls?.length) {
49757    // @ts-expect-error The check below is needed because `DropdownMenus`
49758    // rendered by `ToolBarGroup` receive controls as a nested array.
49759    controlSets = controls;
49760    if (!Array.isArray(controlSets[0])) {
49761      // This is not ideal, but at this point we know that `controls` is
49762      // not a nested array, even if TypeScript doesn't.
49763      controlSets = [controls];
49764    }
49765  }
49766  const mergedPopoverProps = dropdown_menu_mergeProps({
49767    className: 'components-dropdown-menu__popover',
49768    variant
49769  }, popoverProps);
49770  return (0,external_wp_element_namespaceObject.createElement)(dropdown, {
49771    className: className,
49772    popoverProps: mergedPopoverProps,
49773    renderToggle: ({
49774      isOpen,
49775      onToggle
49776    }) => {
49777      var _toggleProps$showTool;
49778      const openOnArrowDown = event => {
49779        if (disableOpenOnArrowDown) {
49780          return;
49781        }
49782        if (!isOpen && event.code === 'ArrowDown') {
49783          event.preventDefault();
49784          onToggle();
49785        }
49786      };
49787      const {
49788        as: Toggle = build_module_button,
49789        ...restToggleProps
49790      } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
49791      const mergedToggleProps = dropdown_menu_mergeProps({
49792        className: classnames_default()('components-dropdown-menu__toggle', {
49793          'is-opened': isOpen
49794        })
49795      }, restToggleProps);
49796      return (0,external_wp_element_namespaceObject.createElement)(Toggle, {
49797        ...mergedToggleProps,
49798        icon: icon,
49799        onClick: event => {
49800          onToggle();
49801          if (mergedToggleProps.onClick) {
49802            mergedToggleProps.onClick(event);
49803          }
49804        },
49805        onKeyDown: event => {
49806          openOnArrowDown(event);
49807          if (mergedToggleProps.onKeyDown) {
49808            mergedToggleProps.onKeyDown(event);
49809          }
49810        },
49811        "aria-haspopup": "true",
49812        "aria-expanded": isOpen,
49813        label: label,
49814        text: text,
49815        showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true
49816      }, mergedToggleProps.children);
49817    },
49818    renderContent: props => {
49819      const mergedMenuProps = dropdown_menu_mergeProps({
49820        'aria-label': label,
49821        className: classnames_default()('components-dropdown-menu__menu', {
49822          'no-icons': noIcons
49823        })
49824      }, menuProps);
49825      return (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, {
49826        ...mergedMenuProps,
49827        role: "menu"
49828      }, dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
49829        key: [indexOfSet, indexOfControl].join(),
49830        onClick: event => {
49831          event.stopPropagation();
49832          props.onClose();
49833          if (control.onClick) {
49834            control.onClick();
49835          }
49836        },
49837        className: classnames_default()('components-dropdown-menu__menu-item', {
49838          'has-separator': indexOfSet > 0 && indexOfControl === 0,
49839          'is-active': control.isActive,
49840          'is-icon-only': !control.title
49841        }),
49842        icon: control.icon,
49843        label: control.label,
49844        "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
49845        role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
49846        disabled: control.isDisabled
49847      }, control.title))));
49848    },
49849    open: open,
49850    defaultOpen: defaultOpen,
49851    onToggle: onToggleProp
49852  });
49853}
49854
49855/**
49856 *
49857 * The DropdownMenu displays a list of actions (each contained in a MenuItem,
49858 * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
49859 * after the user has interacted with an element (a button or icon) or when
49860 * they perform a specific action.
49861 *
49862 * Render a Dropdown Menu with a set of controls:
49863 *
49864 * ```jsx
49865 * import { DropdownMenu } from '@wordpress/components';
49866 * import {
49867 * 	more,
49868 * 	arrowLeft,
49869 * 	arrowRight,
49870 * 	arrowUp,
49871 * 	arrowDown,
49872 * } from '@wordpress/icons';
49873 *
49874 * const MyDropdownMenu = () => (
49875 * 	<DropdownMenu
49876 * 		icon={ more }
49877 * 		label="Select a direction"
49878 * 		controls={ [
49879 * 			{
49880 * 				title: 'Up',
49881 * 				icon: arrowUp,
49882 * 				onClick: () => console.log( 'up' ),
49883 * 			},
49884 * 			{
49885 * 				title: 'Right',
49886 * 				icon: arrowRight,
49887 * 				onClick: () => console.log( 'right' ),
49888 * 			},
49889 * 			{
49890 * 				title: 'Down',
49891 * 				icon: arrowDown,
49892 * 				onClick: () => console.log( 'down' ),
49893 * 			},
49894 * 			{
49895 * 				title: 'Left',
49896 * 				icon: arrowLeft,
49897 * 				onClick: () => console.log( 'left' ),
49898 * 			},
49899 * 		] }
49900 * 	/>
49901 * );
49902 * ```
49903 *
49904 * Alternatively, specify a `children` function which returns elements valid for
49905 * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
49906 *
49907 * ```jsx
49908 * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
49909 * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
49910 *
49911 * const MyDropdownMenu = () => (
49912 * 	<DropdownMenu icon={ more } label="Select a direction">
49913 * 		{ ( { onClose } ) => (
49914 * 			<>
49915 * 				<MenuGroup>
49916 * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
49917 * 						Move Up
49918 * 					</MenuItem>
49919 * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
49920 * 						Move Down
49921 * 					</MenuItem>
49922 * 				</MenuGroup>
49923 * 				<MenuGroup>
49924 * 					<MenuItem icon={ trash } onClick={ onClose }>
49925 * 						Remove
49926 * 					</MenuItem>
49927 * 				</MenuGroup>
49928 * 			</>
49929 * 		) }
49930 * 	</DropdownMenu>
49931 * );
49932 * ```
49933 *
49934 */
49935const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');
49936/* harmony default export */ const dropdown_menu = (DropdownMenu);
49937
49938;// CONCATENATED MODULE: ./packages/components/build-module/palette-edit/styles.js
49939
49940function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
49941/**
49942 * External dependencies
49943 */
49944
49945/**
49946 * Internal dependencies
49947 */
49948
49949
49950
49951
49952
49953
49954
49955
49956
49957const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_circular_option_picker.Option,  true ? {
49958  target: "e5bw3229"
49959} : 0)("width:", space(6), ";height:", space(6), ";pointer-events:none;" + ( true ? "" : 0));
49960const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control,  true ? {
49961  target: "e5bw3228"
49962} : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.controlBorderRadius, ";", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}}" + ( true ? "" : 0));
49963const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
49964  target: "e5bw3227"
49965} : 0)("padding-block:3px;padding-inline-start:", space(3), ";border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;&:first-of-type{border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
49966const NameContainer = emotion_styled_base_browser_esm("div",  true ? {
49967  target: "e5bw3226"
49968} : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;", PaletteItem, ":hover &{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
49969const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
49970  target: "e5bw3225"
49971} : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0));
49972const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
49973  target: "e5bw3224"
49974} : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0));
49975const PaletteHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
49976  target: "e5bw3223"
49977} : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0));
49978const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
49979  target: "e5bw3222"
49980} : 0)( true ? {
49981  name: "u6wnko",
49982  styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}"
49983} : 0);
49984const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
49985  target: "e5bw3221"
49986} : 0)("&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
49987const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
49988  target: "e5bw3220"
49989} : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0));
49990
49991;// CONCATENATED MODULE: ./packages/components/build-module/palette-edit/index.js
49992
49993/**
49994 * External dependencies
49995 */
49996
49997
49998
49999/**
50000 * WordPress dependencies
50001 */
50002
50003
50004
50005
50006
50007/**
50008 * Internal dependencies
50009 */
50010
50011
50012
50013
50014
50015
50016
50017
50018
50019
50020
50021
50022
50023
50024const DEFAULT_COLOR = '#000';
50025function NameInput({
50026  value,
50027  onChange,
50028  label
50029}) {
50030  return (0,external_wp_element_namespaceObject.createElement)(NameInputControl, {
50031    label: label,
50032    hideLabelFromVision: true,
50033    value: value,
50034    onChange: onChange
50035  });
50036}
50037
50038/**
50039 * Returns a temporary name for a palette item in the format "Color + id".
50040 * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
50041 * It expects slugs to be in the format: slugPrefix + color- + number.
50042 * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
50043 *
50044 * @param elements   An array of color palette items.
50045 * @param slugPrefix The slug prefix used to match the element slug.
50046 *
50047 * @return A unique name for a palette item.
50048 */
50049function getNameForPosition(elements, slugPrefix) {
50050  const temporaryNameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
50051  const position = elements.reduce((previousValue, currentValue) => {
50052    if (typeof currentValue?.slug === 'string') {
50053      const matches = currentValue?.slug.match(temporaryNameRegex);
50054      if (matches) {
50055        const id = parseInt(matches[1], 10);
50056        if (id >= previousValue) {
50057          return id + 1;
50058        }
50059      }
50060    }
50061    return previousValue;
50062  }, 1);
50063  return (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is a temporary id for a custom color */
50064  (0,external_wp_i18n_namespaceObject.__)('Color %s'), position);
50065}
50066function ColorPickerPopover({
50067  isGradient,
50068  element,
50069  onChange,
50070  popoverProps: receivedPopoverProps,
50071  onClose = () => {}
50072}) {
50073  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
50074    shift: true,
50075    offset: 20,
50076    placement: 'left-start',
50077    ...receivedPopoverProps,
50078    className: classnames_default()('components-palette-edit__popover', receivedPopoverProps?.className)
50079  }), [receivedPopoverProps]);
50080  return (0,external_wp_element_namespaceObject.createElement)(popover, {
50081    ...popoverProps,
50082    onClose: onClose
50083  }, !isGradient && (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, {
50084    color: element.color,
50085    enableAlpha: true,
50086    onChange: newColor => {
50087      onChange({
50088        ...element,
50089        color: newColor
50090      });
50091    }
50092  }), isGradient && (0,external_wp_element_namespaceObject.createElement)("div", {
50093    className: "components-palette-edit__popover-gradient-picker"
50094  }, (0,external_wp_element_namespaceObject.createElement)(custom_gradient_picker, {
50095    __nextHasNoMargin: true,
50096    __experimentalIsRenderedInSidebar: true,
50097    value: element.gradient,
50098    onChange: newGradient => {
50099      onChange({
50100        ...element,
50101        gradient: newGradient
50102      });
50103    }
50104  })));
50105}
50106function palette_edit_Option({
50107  canOnlyChangeValues,
50108  element,
50109  onChange,
50110  isEditing,
50111  onStartEditing,
50112  onRemove,
50113  onStopEditing,
50114  popoverProps: receivedPopoverProps,
50115  slugPrefix,
50116  isGradient
50117}) {
50118  const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onStopEditing);
50119  const value = isGradient ? element.gradient : element.color;
50120
50121  // Use internal state instead of a ref to make sure that the component
50122  // re-renders when the popover's anchor updates.
50123  const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
50124  const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
50125    ...receivedPopoverProps,
50126    // Use the custom palette color item as the popover anchor.
50127    anchor: popoverAnchor
50128  }), [popoverAnchor, receivedPopoverProps]);
50129  return (0,external_wp_element_namespaceObject.createElement)(PaletteItem, {
50130    className: isEditing ? 'is-selected' : undefined,
50131    as: "div",
50132    onClick: onStartEditing,
50133    ref: setPopoverAnchor,
50134    ...(isEditing ? {
50135      ...focusOutsideProps
50136    } : {
50137      style: {
50138        cursor: 'pointer'
50139      }
50140    })
50141  }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
50142    justify: "flex-start"
50143  }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(IndicatorStyled, {
50144    style: {
50145      background: value,
50146      color: 'transparent'
50147    }
50148  })), (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, isEditing && !canOnlyChangeValues ? (0,external_wp_element_namespaceObject.createElement)(NameInput, {
50149    label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'),
50150    value: element.name,
50151    onChange: nextName => onChange({
50152      ...element,
50153      name: nextName,
50154      slug: slugPrefix + paramCase(nextName !== null && nextName !== void 0 ? nextName : '')
50155    })
50156  }) : (0,external_wp_element_namespaceObject.createElement)(NameContainer, null, element.name)), isEditing && !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(RemoveButton, {
50157    isSmall: true,
50158    icon: line_solid,
50159    label: (0,external_wp_i18n_namespaceObject.__)('Remove color'),
50160    onClick: onRemove
50161  }))), isEditing && (0,external_wp_element_namespaceObject.createElement)(ColorPickerPopover, {
50162    isGradient: isGradient,
50163    onChange: onChange,
50164    element: element,
50165    popoverProps: popoverProps
50166  }));
50167}
50168function isTemporaryElement(slugPrefix, {
50169  slug,
50170  color,
50171  gradient
50172}) {
50173  const regex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
50174  return regex.test(slug) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT);
50175}
50176function PaletteEditListView({
50177  elements,
50178  onChange,
50179  editingElement,
50180  setEditingElement,
50181  canOnlyChangeValues,
50182  slugPrefix,
50183  isGradient,
50184  popoverProps
50185}) {
50186  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
50187  const elementsReference = (0,external_wp_element_namespaceObject.useRef)();
50188  (0,external_wp_element_namespaceObject.useEffect)(() => {
50189    elementsReference.current = elements;
50190  }, [elements]);
50191  (0,external_wp_element_namespaceObject.useEffect)(() => {
50192    return () => {
50193      if (elementsReference.current?.some(element => isTemporaryElement(slugPrefix, element))) {
50194        const newElements = elementsReference.current.filter(element => !isTemporaryElement(slugPrefix, element));
50195        onChange(newElements.length ? newElements : undefined);
50196      }
50197    };
50198    // Disable reason: adding the missing dependency here would cause breaking changes that will require
50199    // a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
50200    // eslint-disable-next-line react-hooks/exhaustive-deps
50201  }, []);
50202  const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
50203  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
50204    spacing: 3
50205  }, (0,external_wp_element_namespaceObject.createElement)(item_group_component, {
50206    isRounded: true
50207  }, elements.map((element, index) => (0,external_wp_element_namespaceObject.createElement)(palette_edit_Option, {
50208    isGradient: isGradient,
50209    canOnlyChangeValues: canOnlyChangeValues,
50210    key: index,
50211    element: element,
50212    onStartEditing: () => {
50213      if (editingElement !== index) {
50214        setEditingElement(index);
50215      }
50216    },
50217    onChange: newElement => {
50218      debounceOnChange(elements.map((currentElement, currentIndex) => {
50219        if (currentIndex === index) {
50220          return newElement;
50221        }
50222        return currentElement;
50223      }));
50224    },
50225    onRemove: () => {
50226      setEditingElement(null);
50227      const newElements = elements.filter((_currentElement, currentIndex) => {
50228        if (currentIndex === index) {
50229          return false;
50230        }
50231        return true;
50232      });
50233      onChange(newElements.length ? newElements : undefined);
50234    },
50235    isEditing: index === editingElement,
50236    onStopEditing: () => {
50237      if (index === editingElement) {
50238        setEditingElement(null);
50239      }
50240    },
50241    slugPrefix: slugPrefix,
50242    popoverProps: popoverProps
50243  }))));
50244}
50245const EMPTY_ARRAY = [];
50246
50247/**
50248 * Allows editing a palette of colors or gradients.
50249 *
50250 * ```jsx
50251 * import { PaletteEdit } from '@wordpress/components';
50252 * const MyPaletteEdit = () => {
50253 *   const [ controlledColors, setControlledColors ] = useState( colors );
50254 *
50255 *   return (
50256 *     <PaletteEdit
50257 *       colors={ controlledColors }
50258 *       onChange={ ( newColors?: Color[] ) => {
50259 *         setControlledColors( newColors );
50260 *       } }
50261 *       paletteLabel="Here is a label"
50262 *     />
50263 *   );
50264 * };
50265 * ```
50266 */
50267function PaletteEdit({
50268  gradients,
50269  colors = EMPTY_ARRAY,
50270  onChange,
50271  paletteLabel,
50272  paletteLabelHeadingLevel = 2,
50273  emptyMessage,
50274  canOnlyChangeValues,
50275  canReset,
50276  slugPrefix = '',
50277  popoverProps
50278}) {
50279  const isGradient = !!gradients;
50280  const elements = isGradient ? gradients : colors;
50281  const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false);
50282  const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null);
50283  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
50284  const elementsLength = elements.length;
50285  const hasElements = elementsLength > 0;
50286  const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
50287  const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => {
50288    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];
50289    const key = isGradient ? 'gradient' : 'color';
50290    // Ensures that the index returned matches a known element value.
50291    if (!!selectedElement && selectedElement[key] === value) {
50292      setEditingElement(newEditingElementIndex);
50293    } else {
50294      setIsEditing(true);
50295    }
50296  }, [isGradient, elements]);
50297  return (0,external_wp_element_namespaceObject.createElement)(PaletteEditStyles, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHStackHeader, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHeading, {
50298    level: paletteLabelHeadingLevel
50299  }, paletteLabel), (0,external_wp_element_namespaceObject.createElement)(PaletteActionsContainer, null, hasElements && isEditing && (0,external_wp_element_namespaceObject.createElement)(DoneButton, {
50300    isSmall: true,
50301    onClick: () => {
50302      setIsEditing(false);
50303      setEditingElement(null);
50304    }
50305  }, (0,external_wp_i18n_namespaceObject.__)('Done')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
50306    isSmall: true,
50307    isPressed: isAdding,
50308    icon: library_plus,
50309    label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'),
50310    onClick: () => {
50311      const tempOptionName = getNameForPosition(elements, slugPrefix);
50312      if (!!gradients) {
50313        onChange([...gradients, {
50314          gradient: DEFAULT_GRADIENT,
50315          name: tempOptionName,
50316          slug: slugPrefix + paramCase(tempOptionName)
50317        }]);
50318      } else {
50319        onChange([...colors, {
50320          color: DEFAULT_COLOR,
50321          name: tempOptionName,
50322          slug: slugPrefix + paramCase(tempOptionName)
50323        }]);
50324      }
50325      setIsEditing(true);
50326      setEditingElement(elements.length);
50327    }
50328  }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, {
50329    icon: more_vertical,
50330    label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'),
50331    toggleProps: {
50332      isSmall: true
50333    }
50334  }, ({
50335    onClose
50336  }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, {
50337    role: "menu"
50338  }, !isEditing && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
50339    variant: "tertiary",
50340    onClick: () => {
50341      setIsEditing(true);
50342      onClose();
50343    },
50344    className: "components-palette-edit__menu-button"
50345  }, (0,external_wp_i18n_namespaceObject.__)('Show details')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
50346    variant: "tertiary",
50347    onClick: () => {
50348      setEditingElement(null);
50349      setIsEditing(false);
50350      onChange();
50351      onClose();
50352    },
50353    className: "components-palette-edit__menu-button"
50354  }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all c
50354olors')), canReset && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
50355    variant: "tertiary",
50356    onClick: () => {
50357      setEditingElement(null);
50358      onChange();
50359      onClose();
50360    }
50361  }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors'))))))), hasElements && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isEditing && (0,external_wp_element_namespaceObject.createElement)(PaletteEditListView, {
50362    canOnlyChangeValues: canOnlyChangeValues,
50363    elements: elements
50364    // @ts-expect-error TODO: Don't know how to resolve
50365    ,
50366    onChange: onChange,
50367    editingElement: editingElement,
50368    setEditingElement: setEditingElement,
50369    slugPrefix: slugPrefix,
50370    isGradient: isGradient,
50371    popoverProps: popoverProps
50372  }), !isEditing && editingElement !== null && (0,external_wp_element_namespaceObject.createElement)(ColorPickerPopover, {
50373    isGradient: isGradient,
50374    onClose: () =>
50374 setEditingElement(null),
50375    onChange: newElement => {
50376      debounceOnChange(
50377      // @ts-expect-error TODO: Don't know how to resolve
50378      elements.map((currentElement, currentIndex) => {
50379        if (currentIndex === editingElement) {
50380          return newElement;
50381        }
50382        return currentElement;
50383      }));
50384    },
50385    element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
50386    popoverProps: popoverProps
50387  }), !isEditing && (isGradient ? (0,external_wp_element_namespaceObject.createElement)(gradient_picker, {
50388    __nextHasNoMargin: true,
50389    gradients: gradients,
50390    onChange: onSelectPaletteItem,
50391    clearable: false,
50392    disableCustomGradients: true
50393  }) : (0,external_wp_element_namespaceObject.createElement)(color_palette, {
50394    colors: colors,
50395    onChange: onSelectPaletteItem,
50396    clearable: false,
50397    disableCustomColors: true
50398  }))), !hasElements && emptyMessage);
50399}
50400/* harmony default export */ const palette_edit = (PaletteEdit);
50401
50402;// CONCATENATED MODULE: ./packages/components/build-module/combobox-control/styles.js
50403
50404/**
50405 * External dependencies
50406 */
50407
50408
50409
50410/**
50411 * Internal dependencies
50412 */
50413
50414
50415const deprecatedDefaultSize = ({
50416  __next40pxDefaultSize
50417}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0),  true ? "" : 0);
50418const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
50419  target: "evuatpg0"
50420} : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0));
50421
50422;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/token-input.js
50423
50424/**
50425 * External dependencies
50426 */
50427
50428/**
50429 * WordPress dependencies
50430 */
50431
50432
50433/**
50434 * Internal dependencies
50435 */
50436
50437function UnForwardedTokenInput(props, ref) {
50438  const {
50439    value,
50440    isExpanded,
50441    instanceId,
50442    selectedSuggestionIndex,
50443    className,
50444    onChange,
50445    onFocus,
50446    onBlur,
50447    ...restProps
50448  } = props;
50449  const [hasFocus, setHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);
50450  const size = value ? value.length + 1 : 0;
50451  const onChangeHandler = event => {
50452    if (onChange) {
50453      onChange({
50454        value: event.target.value
50455      });
50456    }
50457  };
50458  const onFocusHandler = e => {
50459    setHasFocus(true);
50460    onFocus?.(e);
50461  };
50462  const onBlurHandler = e => {
50463    setHasFocus(false);
50464    onBlur?.(e);
50465  };
50466  return (0,external_wp_element_namespaceObject.createElement)("input", {
50467    ref: ref,
50468    id: `components-form-token-input-${instanceId}`,
50469    type: "text",
50470    ...restProps,
50471    value: value || '',
50472    onChange: onChangeHandler,
50473    onFocus: onFocusHandler,
50474    onBlur: onBlurHandler,
50475    size: size,
50476    className: classnames_default()(className, 'components-form-token-field__input'),
50477    autoComplete: "off",
50478    role: "combobox",
50479    "aria-expanded": isExpanded,
50480    "aria-autocomplete": "list",
50481    "aria-owns": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,
50482    "aria-activedescendant":
50483    // Only add the `aria-activedescendant` attribute when:
50484    // - the user is actively interacting with the input (`hasFocus`)
50485    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
50486    // - the list of suggestions are rendered in the DOM (`isExpanded`)
50487    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,
50488    "aria-describedby": `components-form-token-suggestions-howto-${instanceId}`
50489  });
50490}
50491const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput);
50492/* harmony default export */ const token_input = (TokenInput);
50493
50494// EXTERNAL MODULE: ./node_modules/dom-scroll-into-view/lib/index.js
50495var lib = __webpack_require__(5425);
50496var lib_default = /*#__PURE__*/__webpack_require__.n(lib);
50497;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/suggestions-list.js
50498
50499/**
50500 * External dependencies
50501 */
50502
50503
50504/**
50505 * WordPress dependencies
50506 */
50507
50508
50509
50510/**
50511 * Internal dependencies
50512 */
50513
50514const handleMouseDown = e => {
50515  // By preventing default here, we will not lose focus of <input> when clicking a suggestion.
50516  e.preventDefault();
50517};
50518function SuggestionsList({
50519  selectedIndex,
50520  scrollIntoView,
50521  match,
50522  onHover,
50523  onSelect,
50524  suggestions = [],
50525  displayTransform,
50526  instanceId,
50527  __experimentalRenderItem
50528}) {
50529  const [scrollingIntoView, setScrollingIntoView] = (0,external_wp_element_namespaceObject.useState)(false);
50530  const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => {
50531    // only have to worry about scrolling selected suggestion into view
50532    // when already expanded.
50533    let rafId;
50534    if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) {
50535      setScrollingIntoView(true);
50536      lib_default()(listNode.children[selectedIndex], listNode, {
50537        onlyScrollIfNeeded: true
50538      });
50539      rafId = requestAnimationFrame(() => {
50540        setScrollingIntoView(false);
50541      });
50542    }
50543    return () => {
50544      if (rafId !== undefined) {
50545        cancelAnimationFrame(rafId);
50546      }
50547    };
50548  }, [selectedIndex, scrollIntoView]);
50549  const handleHover = suggestion => {
50550    return () => {
50551      if (!scrollingIntoView) {
50552        onHover?.(suggestion);
50553      }
50554    };
50555  };
50556  const handleClick = suggestion => {
50557    return () => {
50558      onSelect?.(suggestion);
50559    };
50560  };
50561  const computeSuggestionMatch = suggestion => {
50562    const matchText = displayTransform(match).toLocaleLowerCase();
50563    if (matchText.length === 0) {
50564      return null;
50565    }
50566    const transformedSuggestion = displayTransform(suggestion);
50567    const indexOfMatch = transformedSuggestion.toLocaleLowerCase().indexOf(matchText);
50568    return {
50569      suggestionBeforeMatch: transformedSuggestion.substring(0, indexOfMatch),
50570      suggestionMatch: transformedSuggestion.substring(indexOfMatch, indexOfMatch + matchText.length),
50571      suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length)
50572    };
50573  };
50574  return (0,external_wp_element_namespaceObject.createElement)("ul", {
50575    ref: listRef,
50576    className: "components-form-token-field__suggestions-list",
50577    id: `components-form-token-suggestions-${instanceId}`,
50578    role: "listbox"
50579  }, suggestions.map((suggestion, index) => {
50580    const matchText = computeSuggestionMatch(suggestion);
50581    const className = classnames_default()('components-form-token-field__suggestion', {
50582      'is-selected': index === selectedIndex
50583    });
50584    let output;
50585    if (typeof __experimentalRenderItem === 'function') {
50586      output = __experimentalRenderItem({
50587        item: suggestion
50588      });
50589    } else if (matchText) {
50590      output = (0,external_wp_element_namespaceObject.createElement)("span", {
50591        "aria-label": displayTransform(suggestion)
50592      }, matchText.suggestionBeforeMatch, (0,external_wp_element_namespaceObject.createElement)("strong", {
50593        className: "components-form-token-field__suggestion-match"
50594      }, matchText.suggestionMatch), matchText.suggestionAfterMatch);
50595    } else {
50596      output = displayTransform(suggestion);
50597    }
50598
50599    /* eslint-disable jsx-a11y/click-events-have-key-events */
50600    return (0,external_wp_element_namespaceObject.createElement)("li", {
50601      id: `components-form-token-suggestions-${instanceId}-${index}`,
50602      role: "option",
50603      className: className,
50604      key: typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion),
50605      onMouseDown: handleMouseDown,
50606      onClick: handleClick(suggestion),
50607      onMouseEnter: handleHover(suggestion),
50608      "aria-selected": index === selectedIndex
50609    }, output);
50610    /* eslint-enable jsx-a11y/click-events-have-key-events */
50611  }));
50612}
50613
50614/* harmony default export */ const suggestions_list = (SuggestionsList);
50615
50616;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-focus-outside/index.js
50617
50618/**
50619 * WordPress dependencies
50620 */
50621
50622
50623/* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {
50624  const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined);
50625  const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
50626  return (0,external_wp_element_namespaceObject.createElement)("div", {
50627    ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside)
50628  }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, {
50629    ref: bindFocusOutsideHandler,
50630    ...props
50631  }));
50632}, 'withFocusOutside'));
50633
50634;// CONCATENATED MODULE: ./packages/components/build-module/utils/use-deprecated-props.js
50635/**
50636 * WordPress dependencies
50637 */
50638
50639function useDeprecated36pxDefaultSizeProp(props, /** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
50640componentIdentifier) {
50641  const {
50642    __next36pxDefaultSize,
50643    __next40pxDefaultSize,
50644    ...otherProps
50645  } = props;
50646  if (typeof __next36pxDefaultSize !== 'undefined') {
50647    external_wp_deprecated_default()('`__next36pxDefaultSize` prop in ' + componentIdentifier, {
50648      alternative: '`__next40pxDefaultSize`',
50649      since: '6.3'
50650    });
50651  }
50652  return {
50653    ...otherProps,
50654    __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize
50655  };
50656}
50657
50658;// CONCATENATED MODULE: ./packages/components/build-module/combobox-control/index.js
50659
50660/**
50661 * External dependencies
50662 */
50663
50664
50665/**
50666 * WordPress dependencies
50667 */
50668
50669
50670
50671
50672
50673
50674/**
50675 * Internal dependencies
50676 */
50677
50678
50679
50680
50681
50682
50683
50684
50685
50686
50687const combobox_control_noop = () => {};
50688const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component {
50689  handleFocusOutside(event) {
50690    this.props.onFocusOutside(event);
50691  }
50692  render() {
50693    return this.props.children;
50694  }
50695});
50696const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);
50697
50698/**
50699 * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of
50700 * being able to search for options using a search input.
50701 *
50702 * ```jsx
50703 * import { ComboboxControl } from '@wordpress/components';
50704 * import { useState } from '@wordpress/element';
50705 *
50706 * const options = [
50707 * 	{
50708 * 		value: 'small',
50709 * 		label: 'Small',
50710 * 	},
50711 * 	{
50712 * 		value: 'normal',
50713 * 		label: 'Normal',
50714 * 	},
50715 * 	{
50716 * 		value: 'large',
50717 * 		label: 'Large',
50718 * 	},
50719 * ];
50720 *
50721 * function MyComboboxControl() {
50722 * 	const [ fontSize, setFontSize ] = useState();
50723 * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
50724 * 	return (
50725 * 		<ComboboxControl
50726 * 			label="Font Size"
50727 * 			value={ fontSize }
50728 * 			onChange={ setFontSize }
50729 * 			options={ filteredOptions }
50730 * 			onFilterValueChange={ ( inputValue ) =>
50731 * 				setFilteredOptions(
50732 * 					options.filter( ( option ) =>
50733 * 						option.label
50734 * 							.toLowerCase()
50735 * 							.startsWith( inputValue.toLowerCase() )
50736 * 					)
50737 * 				)
50738 * 			}
50739 * 		/>
50740 * 	);
50741 * }
50742 * ```
50743 */
50744function ComboboxControl(props) {
50745  var _currentOption$label;
50746  const {
50747    __nextHasNoMarginBottom = false,
50748    __next40pxDefaultSize = false,
50749    value: valueProp,
50750    label,
50751    options,
50752    onChange: onChangeProp,
50753    onFilterValueChange = combobox_control_noop,
50754    hideLabelFromVision,
50755    help,
50756    allowReset = true,
50757    className,
50758    messages = {
50759      selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.')
50760    },
50761    __experimentalRenderItem
50762  } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.ComboboxControl');
50763  const [value, setValue] = useControlledValue({
50764    value: valueProp,
50765    onChange: onChangeProp
50766  });
50767  const currentOption = options.find(option => option.value === value);
50768  const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
50769  // Use a custom prefix when generating the `instanceId` to avoid having
50770  // duplicate input IDs when rendering this component and `FormTokenField`
50771  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
50772  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl, 'combobox-control');
50773  const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null);
50774  const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
50775  const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);
50776  const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)('');
50777  const inputContainer = (0,external_wp_element_namespaceObject.useRef)(null);
50778  const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => {
50779    const startsWithMatch = [];
50780    const containsMatch = [];
50781    const match = normalizeTextString(inputValue);
50782    options.forEach(option => {
50783      const index = normalizeTextString(option.label).indexOf(match);
50784      if (index === 0) {
50785        startsWithMatch.push(option);
50786      } else if (index > 0) {
50787        containsMatch.push(option);
50788      }
50789    });
50790    return startsWithMatch.concat(containsMatch);
50791  }, [inputValue, options]);
50792  const onSuggestionSelected = newSelectedSuggestion => {
50793    setValue(newSelectedSuggestion.value);
50794    (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive');
50795    setSelectedSuggestion(newSelectedSuggestion);
50796    setInputValue('');
50797    setIsExpanded(false);
50798  };
50799  const handleArrowNavigation = (offset = 1) => {
50800    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);
50801    let nextIndex = index + offset;
50802    if (nextIndex < 0) {
50803      nextIndex = matchingSuggestions.length - 1;
50804    } else if (nextIndex >= matchingSuggestions.length) {
50805      nextIndex = 0;
50806    }
50807    setSelectedSuggestion(matchingSuggestions[nextIndex]);
50808    setIsExpanded(true);
50809  };
50810  const onKeyDown = event => {
50811    let preventDefault = false;
50812    if (event.defaultPrevented ||
50813    // Ignore keydowns from IMEs
50814    event.nativeEvent.isComposing ||
50815    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
50816    // is `isComposing=false`, even though it's technically still part of the composition.
50817    // These can only be detected by keyCode.
50818    event.keyCode === 229) {
50819      return;
50820    }
50821    switch (event.code) {
50822      case 'Enter':
50823        if (selectedSuggestion) {
50824          onSuggestionSelected(selectedSuggestion);
50825          preventDefault = true;
50826        }
50827        break;
50828      case 'ArrowUp':
50829        handleArrowNavigation(-1);
50830        preventDefault = true;
50831        break;
50832      case 'ArrowDown':
50833        handleArrowNavigation(1);
50834        preventDefault = true;
50835        break;
50836      case 'Escape':
50837        setIsExpanded(false);
50838        setSelectedSuggestion(null);
50839        preventDefault = true;
50840        break;
50841      default:
50842        break;
50843    }
50844    if (preventDefault) {
50845      event.preventDefault();
50846    }
50847  };
50848  const onBlur = () => {
50849    setInputHasFocus(false);
50850  };
50851  const onFocus = () => {
50852    setInputHasFocus(true);
50853    setIsExpanded(true);
50854    onFilterValueChange('');
50855    setInputValue('');
50856  };
50857  const onFocusOutside = () => {
50858    setIsExpanded(false);
50859  };
50860  const onInputChange = event => {
50861    const text = event.value;
50862    setInputValue(text);
50863    onFilterValueChange(text);
50864    if (inputHasFocus) {
50865      setIsExpanded(true);
50866    }
50867  };
50868  const handleOnReset = () => {
50869    setValue(null);
50870    inputContainer.current?.focus();
50871  };
50872
50873  // Update current selections when the filter input changes.
50874  (0,external_wp_element_namespaceObject.useEffect)(() => {
50875    const hasMatchingSuggestions = matchingSuggestions.length > 0;
50876    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;
50877    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
50878      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
50879      setSelectedSuggestion(matchingSuggestions[0]);
50880    }
50881  }, [matchingSuggestions, selectedSuggestion]);
50882
50883  // Announcements.
50884  (0,external_wp_element_namespaceObject.useEffect)(() => {
50885    const hasMatchingSuggestions = matchingSuggestions.length > 0;
50886    if (isExpanded) {
50887      const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
50888      (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.');
50889      (0,external_wp_a11y_namespaceObject.speak)(message, 'polite');
50890    }
50891  }, [matchingSuggestions, isExpanded]);
50892
50893  // Disable reason: There is no appropriate role which describes the
50894  // input container intended accessible usability.
50895  // TODO: Refactor click detection to use blur to stop propagation.
50896  /* eslint-disable jsx-a11y/no-static-element-interactions */
50897  return (0,external_wp_element_namespaceObject.createElement)(DetectOutside, {
50898    onFocusOutside: onFocusOutside
50899  }, (0,external_wp_element_namespaceObject.createElement)(base_control, {
50900    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
50901    className: classnames_default()(className, 'components-combobox-control'),
50902    label: label,
50903    id: `components-form-token-input-${instanceId}`,
50904    hideLabelFromVision: hideLabelFromVision,
50905    help: help
50906  }, (0,external_wp_element_namespaceObject.createElement)("div", {
50907    className: "components-combobox-control__suggestions-container",
50908    tabIndex: -1,
50909    onKeyDown: onKeyDown
50910  }, (0,external_wp_element_namespaceObject.createElement)(InputWrapperFlex, {
50911    __next40pxDefaultSize: __next40pxDefaultSize
50912  }, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(token_input, {
50913    className: "components-combobox-control__input",
50914    instanceId: instanceId,
50915    ref: inputContainer,
50916    value: isExpanded ? inputValue : currentLabel,
50917    onFocus: onFocus,
50918    onBlur: onBlur,
50919    isExpanded: isExpanded,
50920    selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
50921    onChange: onInputChange
50922  })), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
50923    className: "components-combobox-control__reset",
50924    icon: close_small,
50925    disabled: !value,
50926    onClick: handleOnReset,
50927    label: (0,external_wp_i18n_namespaceObject.__)('Reset')
50928  }))), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, {
50929    instanceId: instanceId
50930    // The empty string for `value` here is not actually used, but is
50931    // just a quick way to satisfy the TypeScript requirements of SuggestionsList.
50932    // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
50933    ,
50934    match: {
50935      label: inputValue,
50936      value: ''
50937    },
50938    displayTransform: suggestion => suggestion.label,
50939    suggestions: matchingSuggestions,
50940    selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
50941    onHover: setSelectedSuggestion,
50942    onSelect: onSuggestionSelected,
50943    scrollIntoView: true,
50944    __experimentalRenderItem: __experimentalRenderItem
50945  }))));
50946  /* eslint-enable jsx-a11y/no-static-element-interactions */
50947}
50948
50949/* harmony default export */ const combobox_control = (ComboboxControl);
50950
50951;// CONCATENATED MODULE: ./packages/components/build-module/modal/aria-helper.js
50952const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
50953let hiddenElements = [],
50954  aria_helper_isHidden = false;
50955
50956/**
50957 * Hides all elements in the body element from screen-readers except
50958 * the provided element and elements that should not be hidden from
50959 * screen-readers.
50960 *
50961 * The reason we do this is because `aria-modal="true"` currently is bugged
50962 * in Safari, and support is spotty in other browsers overall. In the future
50963 * we should consider removing these helper functions in favor of
50964 * `aria-modal="true"`.
50965 *
50966 * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
50967 */
50968function hideApp(unhiddenElement) {
50969  if (aria_helper_isHidden) {
50970    return;
50971  }
50972  const elements = Array.from(document.body.children);
50973  elements.forEach(element => {
50974    if (element === unhiddenElement) {
50975      return;
50976    }
50977    if (elementShouldBeHidden(element)) {
50978      element.setAttribute('aria-hidden', 'true');
50979      hiddenElements.push(element);
50980    }
50981  });
50982  aria_helper_isHidden = true;
50983}
50984
50985/**
50986 * Determines if the passed element should not be hidden from screen readers.
50987 *
50988 * @param {HTMLElement} element The element that should be checked.
50989 *
50990 * @return {boolean} Whether the element should not be hidden from screen-readers.
50991 */
50992function elementShouldBeHidden(element) {
50993  const role = element.getAttribute('role');
50994  return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
50995}
50996
50997/**
50998 * Makes all elements in the body that have been hidden by `hideApp`
50999 * visible again to screen-readers.
51000 */
51001function showApp() {
51002  if (!aria_helper_isHidden) {
51003    return;
51004  }
51005  hiddenElements.forEach(element => {
51006    element.removeAttribute('aria-hidden');
51007  });
51008  hiddenElements = [];
51009  aria_helper_isHidden = false;
51010}
51011
51012;// CONCATENATED MODULE: ./packages/components/build-module/modal/index.js
51013
51014/**
51015 * External dependencies
51016 */
51017
51018/**
51019 * WordPress dependencies
51020 */
51021
51022
51023
51024
51025
51026
51027/**
51028 * Internal dependencies
51029 */
51030
51031
51032
51033// Used to count the number of open modals.
51034let openModalCount = 0;
51035function UnforwardedModal(props, forwardedRef) {
51036  const {
51037    bodyOpenClassName = 'modal-open',
51038    role = 'dialog',
51039    title = null,
51040    focusOnMount = true,
51041    shouldCloseOnEsc = true,
51042    shouldCloseOnClickOutside = true,
51043    isDismissible = true,
51044    /* Accessibility. */
51045    aria = {
51046      labelledby: undefined,
51047      describedby: undefined
51048    },
51049    onRequestClose,
51050    icon,
51051    closeButtonLabel,
51052    children,
51053    style,
51054    overlayClassName,
51055    className,
51056    contentLabel,
51057    onKeyDown,
51058    isFullScreen = false,
51059    headerActions = null,
51060    __experimentalHideHeader = false
51061  } = props;
51062  const ref = (0,external_wp_element_namespaceObject.useRef)();
51063  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal);
51064  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
51065
51066  // The focus hook does not support 'firstContentElement' but this is a valid
51067  // value for the Modal's focusOnMount prop. The following code ensures the focus
51068  // hook will focus the first focusable node within the element to which it is applied.
51069  // When `firstContentElement` is passed as the value of the focusOnMount prop,
51070  // the focus hook is applied to the Modal's content element.
51071  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
51072  // focus hook will focus the first element in the Modal's **content** when
51073  // `firstContentElement` is passed.
51074  const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);
51075  const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
51076  const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)();
51077  const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onRequestClose);
51078  const contentRef = (0,external_wp_element_namespaceObject.useRef)(null);
51079  const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null);
51080  const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false);
51081  const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false);
51082
51083  // Determines whether the Modal content is scrollable and updates the state.
51084  const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => {
51085    if (!contentRef.current) {
51086      return;
51087    }
51088    const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollC
51088ontainer)(contentRef.current);
51089    if (contentRef.current === closestScrollContainer) {
51090      setHasScrollableContent(true);
51091    } else {
51092      setHasScrollableContent(false);
51093    }
51094  }, [contentRef]);
51095  (0,external_wp_element_namespaceObject.useEffect)(() => {
51096    openModalCount++;
51097    if (openModalCount === 1) {
51098      hideApp(ref.current);
51099      document.body.classList.add(bodyOpenClassName);
51100    }
51101    return () => {
51102      openModalCount--;
51103      if (openModalCount === 0) {
51104        document.body.classList.remove(bodyOpenClassName);
51105        showApp();
51106      }
51107    };
51108  }, [bodyOpenClassName]);
51109
51110  // Calls the isContentScrollable callback when the Modal children container resizes.
51111  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
51112    if (!window.ResizeObserver || !childrenContainerRef.current) {
51113      return;
51114    }
51115    const resizeObserver = new ResizeObserver(isContentScrollable);
51116    resizeObserver.observe(childrenContainerRef.current);
51117    isContentScrollable();
51118    return () => {
51119      resizeObserver.disconnect();
51120    };
51121  }, [isContentScrollable, childrenContainerRef]);
51122  function handleEscapeKeyDown(event) {
51123    if (
51124    // Ignore keydowns from IMEs
51125    event.nativeEvent.isComposing ||
51126    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
51127    // is `isComposing=false`, even though it's technically still part of the composition.
51128    // These can only be detected by keyCode.
51129    event.keyCode === 229) {
51130      return;
51131    }
51132    if (shouldCloseOnEsc && event.code === 'Escape' && !event.defaultPrevented) {
51133      event.preventDefault();
51134      if (onRequestClose) {
51135        onRequestClose(event);
51136      }
51137    }
51138  }
51139  const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => {
51140    var _e$currentTarget$scro;
51141    const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
51142    if (!hasScrolledContent && scrollY > 0) {
51143      setHasScrolledContent(true);
51144    } else if (hasScrolledContent && scrollY <= 0) {
51145      setHasScrolledContent(false);
51146    }
51147  }, [hasScrolledContent]);
51148  let pressTarget = null;
51149  const overlayPressHandlers = {
51150    onPointerDown: event => {
51151      if (event.isPrimary && event.target === event.currentTarget) {
51152        pressTarget = event.target;
51153        // Avoids loss of focus yet also leaves `useFocusOutside`
51154        // practically useless with its only potential trigger being
51155        // programmatic focus movement. TODO opt for either removing
51156        // the hook or enhancing it such that this isn't needed.
51157        event.preventDefault();
51158      }
51159    },
51160    // Closes the modal with two exceptions. 1. Opening the context menu on
51161    // the overlay. 2. Pressing on the overlay then dragging the pointer
51162    // over the modal and releasing. Due to the modal being a child of the
51163    // overlay, such a gesture is a `click` on the overlay and cannot be
51164    // excepted by a `click` handler. Thus the tactic of handling
51165    // `pointerup` and comparing its target to that of the `pointerdown`.
51166    onPointerUp: ({
51167      target,
51168      button
51169    }) => {
51170      const isSameTarget = target === pressTarget;
51171      pressTarget = null;
51172      if (button === 0 && isSameTarget) onRequestClose();
51173    }
51174  };
51175  return (0,external_wp_element_namespaceObject.createPortal)(
51176  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
51177  (0,external_wp_element_namespaceObject.createElement)("div", {
51178    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
51179    className: classnames_default()('components-modal__screen-overlay', overlayClassName),
51180    onKeyDown: handleEscapeKeyDown,
51181    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {})
51182  }, (0,external_wp_element_namespaceObject.createElement)(style_provider, {
51183    document: document
51184  }, (0,external_wp_element_namespaceObject.createElement)("div", {
51185    className: classnames_default()('components-modal__frame', className, {
51186      'is-full-screen': isFullScreen
51187    }),
51188    style: style,
51189    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
51190    role: role,
51191    "aria-label": contentLabel,
51192    "aria-labelledby": contentLabel ? undefined : headingId,
51193    "aria-describedby": aria.describedby,
51194    tabIndex: -1,
51195    ...(shouldCloseOnClickOutside ? focusOutsideProps : {}),
51196    onKeyDown: onKeyDown
51197  }, (0,external_wp_element_namespaceObject.createElement)("div", {
51198    className: classnames_default()('components-modal__content', {
51199      'hide-header': __experimentalHideHeader,
51200      'is-scrollable': hasScrollableContent,
51201      'has-scrolled-content': hasScrolledContent
51202    }),
51203    role: "document",
51204    onScroll: onContentContainerScroll,
51205    ref: contentRef,
51206    "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined,
51207    tabIndex: hasScrollableContent ? 0 : undefined
51208  }, !__experimentalHideHeader && (0,external_wp_element_namespaceObject.createElement)("div", {
51209    className: "components-modal__header"
51210  }, (0,external_wp_element_namespaceObject.createElement)("div", {
51211    className: "components-modal__header-heading-container"
51212  }, icon && (0,external_wp_element_namespaceObject.createElement)("span", {
51213    className: "components-modal__icon-container",
51214    "aria-hidden": true
51215  }, icon), title && (0,external_wp_element_namespaceObject.createElement)("h1", {
51216    id: headingId,
51217    className: "components-modal__header-heading"
51218  }, title)), headerActions, isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
51219    onClick: onRequestClose,
51220    icon: library_close,
51221    label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')
51222  })), (0,external_wp_element_namespaceObject.createElement)("div", {
51223    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null])
51224  }, children))))), document.body);
51225}
51226
51227/**
51228 * Modals give users information and choices related to a task they’re trying to
51229 * accomplish. They can contain critical information, require decisions, or
51230 * involve multiple tasks.
51231 *
51232 * ```jsx
51233 * import { Button, Modal } from '@wordpress/components';
51234 * import { useState } from '@wordpress/element';
51235 *
51236 * const MyModal = () => {
51237 *   const [ isOpen, setOpen ] = useState( false );
51238 *   const openModal = () => setOpen( true );
51239 *   const closeModal = () => setOpen( false );
51240 *
51241 *   return (
51242 *     <>
51243 *       <Button variant="secondary" onClick={ openModal }>
51244 *         Open Modal
51245 *       </Button>
51246 *       { isOpen && (
51247 *         <Modal title="This is my modal" onRequestClose={ closeModal }>
51248 *           <Button variant="secondary" onClick={ closeModal }>
51249 *             My custom close button
51250 *           </Button>
51251 *         </Modal>
51252 *       ) }
51253 *     </>
51254 *   );
51255 * };
51256 * ```
51257 */
51258const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal);
51259/* harmony default export */ const modal = (Modal);
51260
51261;// CONCATENATED MODULE: ./packages/components/build-module/confirm-dialog/styles.js
51262function confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
51263/**
51264 * External dependencies
51265 */
51266
51267
51268/**
51269 * The z-index for ConfirmDialog is being set here instead of in
51270 * packages/base-styles/_z-index.scss, because this component uses
51271 * emotion instead of sass.
51272 *
51273 * ConfirmDialog needs this higher z-index to ensure it renders on top of
51274 * any parent Popover component.
51275 */
51276const styles_wrapper =  true ? {
51277  name: "7g5ii0",
51278  styles: "&&{z-index:1000001;}"
51279} : 0;
51280
51281;// CONCATENATED MODULE: ./packages/components/build-module/confirm-dialog/component.js
51282
51283/**
51284 * External dependencies
51285 */
51286
51287/**
51288 * WordPress dependencies
51289 */
51290
51291
51292
51293/**
51294 * Internal dependencies
51295 */
51296
51297
51298
51299
51300
51301
51302
51303
51304function ConfirmDialog(props, forwardedRef) {
51305  const {
51306    isOpen: isOpenProp,
51307    onConfirm,
51308    onCancel,
51309    children,
51310    confirmButtonText,
51311    cancelButtonText,
51312    ...otherProps
51313  } = useContextSystem(props, 'ConfirmDialog');
51314  const cx = useCx();
51315  const wrapperClassName = cx(styles_wrapper);
51316  const cancelButtonRef = (0,external_wp_element_namespaceObject.useRef)();
51317  const confirmButtonRef = (0,external_wp_element_namespaceObject.useRef)();
51318  const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)();
51319  const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)();
51320  (0,external_wp_element_namespaceObject.useEffect)(() => {
51321    // We only allow the dialog to close itself if `isOpenProp` is *not* set.
51322    // If `isOpenProp` is set, then it (probably) means it's controlled by a
51323    // parent component. In that case, `shouldSelfClose` might do more harm than
51324    // good, so we disable it.
51325    const isIsOpenSet = typeof isOpenProp !== 'undefined';
51326    setIsOpen(isIsOpenSet ? isOpenProp : true);
51327    setShouldSelfClose(!isIsOpenSet);
51328  }, [isOpenProp]);
51329  const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => {
51330    callback?.(event);
51331    if (shouldSelfClose) {
51332      setIsOpen(false);
51333    }
51334  }, [shouldSelfClose, setIsOpen]);
51335  const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => {
51336    // Avoid triggering the 'confirm' action when a button is focused,
51337    // as this can cause a double submission.
51338    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
51339    if (!isConfirmOrCancelButton && event.key === 'Enter') {
51340      handleEvent(onConfirm)(event);
51341    }
51342  }, [handleEvent, onConfirm]);
51343  const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel');
51344  const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK');
51345  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isOpen && (0,external_wp_element_namespaceObject.createElement)(modal, {
51346    onRequestClose: handleEvent(onCancel),
51347    onKeyDown: handleEnter,
51348    closeButtonLabel: cancelLabel,
51349    isDismissible: true,
51350    ref: forwardedRef,
51351    overlayClassName: wrapperClassName,
51352    __experimentalHideHeader: true,
51353    ...otherProps
51354  }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
51355    spacing: 8
51356  }, (0,external_wp_element_namespaceObject.createElement)(text_component, null, children), (0,external_wp_element_namespaceObject.createElement)(flex_component, {
51357    direction: "row",
51358    justify: "flex-end"
51359  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
51360    ref: cancelButtonRef,
51361    variant: "tertiary",
51362    onClick: handleEvent(onCancel)
51363  }, cancelLabel), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
51364    ref: confirmButtonRef,
51365    variant: "primary",
51366    onClick: handleEvent(onConfirm)
51367  }, confirmLabel)))));
51368}
51369/* harmony default export */ const confirm_dialog_component = (contextConnect(ConfirmDialog, 'ConfirmDialog'));
51370
51371;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
51372function objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(source, excluded) {
51373  if (source == null) return {};
51374  var target = {};
51375  var sourceKeys = Object.keys(source);
51376  var key, i;
51377  for (i = 0; i < sourceKeys.length; i++) {
51378    key = sourceKeys[i];
51379    if (excluded.indexOf(key) >= 0) continue;
51380    target[key] = source[key];
51381  }
51382  return target;
51383}
51384// EXTERNAL MODULE: ./node_modules/prop-types/index.js
51385var prop_types = __webpack_require__(2652);
51386var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
51387// EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js
51388var react_is = __webpack_require__(2797);
51389;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.module.js
51390function index_module_t(t){return null!=t&&"object"==typeof t&&1===t.nodeType}
vendor: 5,743 bytes, lines 51390-51516
51390function index_module_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function index_module_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return index_module_e(r.overflowY,n)||index_module_e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function index_module_r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}/* harmony default export */ function index_module(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!index_module_t(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;index_module_t(p)&&c(p);){if((p=p.parentNode)===f){s.push(p);break}p===document.body&&index_module_n(p)&&!index_module_n(document.documentElement)||index_module_n(p,a)&&s.push(p)}for(var g=o.visualViewport?o.visualViewport.width:innerWidth,m=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,M=W.right,E=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?E:y+b/2,I="center"===u?V+H/2:"end"===u?M:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&E<=m&&M<=g&&y>=R&&E<=Y&&V>=L&&M<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),N=parseInt(S.borderTopWidth,10),q=parseInt(S.borderRightWidth,10),z=parseInt(S.borderBottomWidth,10),A=0,F=0,G="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-q:0,J="offsetHeight"in k?k.offsetHeight-k.clientHeight-N-z:0;if(f===k)A="start"===d?x:"end"===d?x-m:"nearest"===d?index_module_r(v,v+m,m,N,z,v+x,v+x+b,b):x-m/2,F="start"===u?I:"center"===u?I-g/2:"end"===u?I-g:index_module_r(w,w+g,g,j,q,w+I,w+I+H,H),A=Math.max(0,A+v),F=Math.max(0,F+w);else{A="start"===d?x-R-N:"end"===d?x-Y+z+J:"nearest"===d?index_module_r(R,Y,D,N,z+J,x,x+b,b):x-(R+D/2)+J/2,F="start"===u?I-L-j:"center"===u?I-(L+O/2)+G/2:"end"===u?I-X+q+G:index_module_r(L,X,O,j,q+G,I,I+H,H);var K=k.scrollLeft,P=k.scrollTop;x+=P-(A=Math.max(0,Math.min(P+A,k.scrollHeight-D+J))),I+=K-(F=Math.max(0,Math.min(K+F,k.scrollWidth-O+G)))}C.push({el:k,top:A,left:F})}return C}
51391
51392;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js
51393
51394
51395
51396
51397
51398
51399
51400
51401
51402var idCounter = 0;
51403/**
51404 * Accepts a parameter and returns it if it's a function
51405 * or a noop function if it's not. This allows us to
51406 * accept a callback, but not worry about it if it's not
51407 * passed.
51408 * @param {Function} cb the callback
51409 * @return {Function} a function
51410 */
51411
51412function cbToCb(cb) {
51413  return typeof cb === 'function' ? cb : downshift_esm_noop;
51414}
51415
51416function downshift_esm_noop() {}
51417/**
51418 * Scroll node into view if necessary
51419 * @param {HTMLElement} node the element that should scroll into view
51420 * @param {HTMLElement} menuNode the menu element of the component
51421 */
51422
51423
51424function scrollIntoView(node, menuNode) {
51425  if (!node) {
51426    return;
51427  }
51428
51429  var actions = index_module(node, {
51430    boundary: menuNode,
51431    block: 'nearest',
51432    scrollMode: 'if-needed'
51433  });
51434  actions.forEach(function (_ref) {
51435    var el = _ref.el,
51436        top = _ref.top,
51437        left = _ref.left;
51438    el.scrollTop = top;
51439    el.scrollLeft = left;
51440  });
51441}
51442/**
51443 * @param {HTMLElement} parent the parent node
51444 * @param {HTMLElement} child the child node
51445 * @return {Boolean} whether the parent is the child or the child is in the parent
51446 */
51447
51448
51449function isOrContainsNode(parent, child) {
51450  return parent === child || child instanceof Node && parent.contains && parent.contains(child);
51451}
51452/**
51453 * Simple debounce implementation. Will call the given
51454 * function once after the time given has passed since
51455 * it was last called.
51456 * @param {Function} fn the function to call after the time
51457 * @param {Number} time the time to wait
51458 * @return {Function} the debounced function
51459 */
51460
51461
51462function downshift_esm_debounce(fn, time) {
51463  var timeoutId;
51464
51465  function cancel() {
51466    if (timeoutId) {
51467      clearTimeout(timeoutId);
51468    }
51469  }
51470
51471  function wrapper() {
51472    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
51473      args[_key] = arguments[_key];
51474    }
51475
51476    cancel();
51477    timeoutId = setTimeout(function () {
51478      timeoutId = null;
51479      fn.apply(void 0, args);
51480    }, time);
51481  }
51482
51483  wrapper.cancel = cancel;
51484  return wrapper;
51485}
51486/**
51487 * This is intended to be used to compose event handlers.
51488 * They are executed in order until one of them sets
51489 * `event.preventDownshiftDefault = true`.
51490 * @param {...Function} fns the event handler functions
51491 * @return {Function} the event handler to add to an element
51492 */
51493
51494
51495function callAllEventHandlers() {
51496  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
51497    fns[_key2] = arguments[_key2];
51498  }
51499
51500  return function (event) {
51501    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
51502      args[_key3 - 1] = arguments[_key3];
51503    }
51504
51505    return fns.some(function (fn) {
51506      if (fn) {
51507        fn.apply(void 0, [event].concat(args));
51508      }
51509
51510      return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
51511    });
51512  };
51513}
51514
51515function handleRefs() {
51516  for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
51517    refs[_key4] = arguments[_key4];
51518  }
51519
51520  return function (node) {
51521    refs.forEach(function (ref) {
51522      if (typeof ref === 'function') {
51523        ref(node);
51524      } else if (ref) {
51525        ref.current = node;
51526      }
51527    });
51528  };
51529}
51530/**
51531 * This generates a unique ID for an instance of Downshift
51532 * @return {String} the unique ID
51533 */
51534
51535
51536function generateId() {
51537  return String(idCounter++);
51538}
51539/**
51540 * Resets idCounter to 0. Used for SSR.
51541 */
51542
51543
51544function resetIdCounter() {
51545  idCounter = 0;
51546}
51547/**
51548 * Default implementation for status message. Only added when menu is open.
51549 * Will specift if there are results in the list, and if so, how many,
51550 * and what keys are relevant.
51551 *
51552 * @param {Object} param the downshift state and other relevant properties
51553 * @return {String} the a11y status message
51554 */
51555
51556
51557function getA11yStatusMessage(_ref2) {
51558  var isOpen = _ref2.isOpen,
51559      resultCount = _ref2.resultCount,
51560      previousResultCount = _ref2.previousResultCount;
51561
51562  if (!isOpen) {
51563    return '';
51564  }
51565
51566  if (!resultCount) {
51567    return 'No results are available.';
51568  }
51569
51570  if (resultCount !== previousResultCount) {
51571    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
51572  }
51573
51574  return '';
51575}
51576/**
51577 * Takes an argument and if it's an array, returns the first item in the array
51578 * otherwise returns the argument
51579 * @param {*} arg the maybe-array
51580 * @param {*} defaultValue the value if arg is falsey not defined
51581 * @return {*} the arg or it's first item
51582 */
51583
51584
51585function unwrapArray(arg, defaultValue) {
51586  arg = Array.isArray(arg) ?
51587  /* istanbul ignore next (preact) */
51588  arg[0] : arg;
51589
51590  if (!arg && defaultValue) {
51591    return defaultValue;
51592  } else {
51593    return arg;
51594  }
51595}
51596/**
51597 * @param {Object} element (P)react element
51598 * @return {Boolean} whether it's a DOM element
51599 */
51600
51601
51602function isDOMElement(element) {
51603
51604
51605  return typeof element.type === 'string';
51606}
51607/**
51608 * @param {Object} element (P)react element
51609 * @return {Object} the props
51610 */
51611
51612
51613function getElementProps(element) {
51614
51615  return element.props;
51616}
51617/**
51618 * Throws a helpful error message for required properties. Useful
51619 * to be used as a default in destructuring or object params.
51620 * @param {String} fnName the function name
51621 * @param {String} propName the prop name
51622 */
51623
51624
51625function requiredProp(fnName, propName) {
51626  // eslint-disable-next-line no-console
51627  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
51628}
51629
51630var stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type']));
51631/**
51632 * @param {Object} state the state object
51633 * @return {Object} state that is relevant to downshift
51634 */
51635
51636function pickState(state) {
51637  if (state === void 0) {
51638    state = {};
51639  }
51640
51641  var result = {};
51642  stateKeys.forEach(function (k) {
51643    if (state.hasOwnProperty(k)) {
51644      result[k] = state[k];
51645    }
51646  });
51647  return result;
51648}
51649/**
51650 * This will perform a shallow merge of the given state object
51651 * with the state coming from props
51652 * (for the controlled component scenario)
51653 * This is used in state updater functions so they're referencing
51654 * the right state regardless of where it comes from.
51655 *
51656 * @param {Object} state The state of the component/hook.
51657 * @param {Object} props The props that may contain controlled values.
51658 * @returns {Object} The merged controlled state.
51659 */
51660
51661
51662function getState(state, props) {
51663  return Object.keys(state).reduce(function (prevState, key) {
51664    prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
51665    return prevState;
51666  }, {});
51667}
51668/**
51669 * This determines whether a prop is a "controlled prop" meaning it is
51670 * state which is controlled by the outside of this component rather
51671 * than within this component.
51672 *
51673 * @param {Object} props The props that may contain controlled values.
51674 * @param {String} key the key to check
51675 * @return {Boolean} whether it is a controlled controlled prop
51676 */
51677
51678
51679function isControlledProp(props, key) {
51680  return props[key] !== undefined;
51681}
51682/**
51683 * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
51684 * @param {Object} event a keyboardEvent object
51685 * @return {String} keyboard key
51686 */
51687
51688
51689function normalizeArrowKey(event) {
51690  var key = event.key,
51691      keyCode = event.keyCode;
51692  /* istanbul ignore next (ie) */
51693
51694  if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
51695    return "Arrow" + key;
51696  }
51697
51698  return key;
51699}
51700/**
51701 * Simple check if the value passed is object literal
51702 * @param {*} obj any things
51703 * @return {Boolean} whether it's object literal
51704 */
51705
51706
51707function downshift_esm_isPlainObject(obj) {
51708  return Object.prototype.toString.call(obj) === '[object Object]';
51709}
51710/**
51711 * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
51712 * it will wrap to either 0 or itemCount - 1.
51713 *
51714 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
51715 * @param {number} baseIndex The initial position to move from.
51716 * @param {number} itemCount The total number of items.
51717 * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
51718 * @param {boolean} circular Specify if navigation is circular. Default is true.
51719 * @returns {number} The new index after the move.
51720 */
51721
51722
51723function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
51724  if (circular === void 0) {
51725    circular = true;
51726  }
51727
51728  if (itemCount === 0) {
51729    return -1;
51730  }
51731
51732  var itemsLastIndex = itemCount - 1;
51733
51734  if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
51735    baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
51736  }
51737
51738  var newIndex = baseIndex + moveAmount;
51739
51740  if (newIndex < 0) {
51741    newIndex = circular ? itemsLastIndex : 0;
51742  } else if (newIndex > itemsLastIndex) {
51743    newIndex = circular ? 0 : itemsLastIndex;
51744  }
51745
51746  var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
51747
51748  if (nonDisabledNewIndex === -1) {
51749    return baseIndex >= itemCount ? -1 : baseIndex;
51750  }
51751
51752  return nonDisabledNewIndex;
51753}
51754/**
51755 * Returns the next index in the list of an item that is not disabled.
51756 *
51757 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
51758 * @param {number} baseIndex The initial position to move from.
51759 * @param {number} itemCount The total number of items.
51760 * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
51761 * @param {boolean} circular Specify if navigation is circular. Default is true.
51762 * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
51763 */
51764
51765
51766function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
51767  var currentElementNode = getItemNodeFromIndex(baseIndex);
51768
51769  if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
51770    return baseIndex;
51771  }
51772
51773  if (moveAmount > 0) {
51774    for (var index = baseIndex + 1; index < itemCount; index++) {
51775      if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
51776        return index;
51777      }
51778    }
51779  } else {
51780    for (var _index = baseIndex - 1; _index >= 0; _index--) {
51781      if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
51782        return _index;
51783      }
51784    }
51785  }
51786
51787  if (circular) {
51788    return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
51789  }
51790
51791  return -1;
51792}
51793/**
51794 * Checks if event target is within the downshift elements.
51795 *
51796 * @param {EventTarget} target Target to check.
51797 * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
51798 * @param {Document} document The document.
51799 * @param {boolean} checkActiveElement Whether to also check activeElement.
51800 *
51801 * @returns {boolean} Whether or not the target is within downshift elements.
51802 */
51803
51804
51805function targetWithinDownshift(target, downshiftElements, document, checkActiveElement) {
51806  if (checkActiveElement === void 0) {
51807    checkActiveElement = true;
51808  }
51809
51810  return downshiftElements.some(function (contextNode) {
51811    return contextNode && (isOrContainsNode(contextNode, target) || checkActiveElement && isOrContainsNode(contextNode, document.activeElement));
51812  });
51813} // eslint-disable-next-line import/no-mutable-exports
51814
51815
51816var validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop));
51817/* istanbul ignore next */
51818
51819if (false) {}
51820
51821var cleanupStatus = downshift_esm_debounce(function (documentProp) {
51822  getStatusDiv(documentProp).textContent = '';
51823}, 500);
51824/**
51825 * @param {String} status the status message
51826 * @param {Object} documentProp document passed by the user.
51827 */
51828
51829function setStatus(status, documentProp) {
51830  var div = getStatusDiv(documentProp);
51831
51832  if (!status) {
51833    return;
51834  }
51835
51836  div.textContent = status;
51837  cleanupStatus(documentProp);
51838}
51839/**
51840 * Get the status node or create it if it does not already exist.
51841 * @param {Object} documentProp document passed by the user.
51842 * @return {HTMLElement} the status node.
51843 */
51844
51845
51846function getStatusDiv(documentProp) {
51847  if (documentProp === void 0) {
51848    documentProp = document;
51849  }
51850
51851  var statusDiv = documentProp.getElementById('a11y-status-message');
51852
51853  if (statusDiv) {
51854    return statusDiv;
51855  }
51856
51857  statusDiv = documentProp.createElement('div');
51858  statusDiv.setAttribute('id', 'a11y-status-message');
51859  statusDiv.setAttribute('role', 'status');
51860  statusDiv.setAttribute('aria-live', 'polite');
51861  statusDiv.setAttribute('aria-relevant', 'additions text');
51862  Object.assign(statusDiv.style, {
51863    border: '0',
51864    clip: 'rect(0 0 0 0)',
51865    height: '1px',
51866    margin: '-1px',
51867    overflow: 'hidden',
51868    padding: '0',
51869    position: 'absolute',
51870    width: '1px'
51871  });
51872  documentProp.body.appendChild(statusDiv);
51873  return statusDiv;
51874}
51875
51876var unknown =  false ? 0 : 0;
51877var mouseUp =  false ? 0 : 1;
51878var itemMouseEnter =  false ? 0 : 2;
51879var keyDownArrowUp =  false ? 0 : 3;
51880var keyDownArrowDown =  false ? 0 : 4;
51881var keyDownEscape =  false ? 0 : 5;
51882var keyDownEnter =  false ? 0 : 6;
51883var keyDownHome =  false ? 0 : 7;
51884var keyDownEnd =  false ? 0 : 8;
51885var clickItem =  false ? 0 : 9;
51886var blurInput =  false ? 0 : 10;
51887var changeInput =  false ? 0 : 11;
51888var keyDownSpaceButton =  false ? 0 : 12;
51889var clickButton =  false ? 0 : 13;
51890var blurButton =  false ? 0 : 14;
51891var controlledPropUpdatedSelectedItem =  false ? 0 : 15;
51892var touchEnd =  false ? 0 : 16;
51893
51894var stateChangeTypes = /*#__PURE__*/Object.freeze({
51895  __proto__: null,
51896  unknown: unknown,
51897  mouseUp: mouseUp,
51898  itemMouseEnter: itemMouseEnter,
51899  keyDownArrowUp: keyDownArrowUp,
51900  keyDownArrowDown: keyDownArrowDown,
51901  keyDownEscape: keyDownEscape,
51902  keyDownEnter: keyDownEnter,
51903  keyDownHome: keyDownHome,
51904  keyDownEnd: keyDownEnd,
51905  clickItem: clickItem,
51906  blurInput: blurInput,
51907  changeInput: changeInput,
51908  keyDownSpaceButton: keyDownSpaceButton,
51909  clickButton: clickButton,
51910  blurButton: blurButton,
51911  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
51912  touchEnd: touchEnd
51913});
51914
51915var Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && (function () {
51916  var Downshift = /*#__PURE__*/function (_Component) {
51917    _inheritsLoose(Downshift, _Component);
51918
51919    function Downshift(_props) {
51920      var _this;
51921
51922      _this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases
51923      // this basically says each value of state should either be set to
51924      // the initial value or the default value if the initial value is not provided
51925
51926      _this.id = _this.props.id || "downshift-" + generateId();
51927      _this.menuId = _this.props.menuId || _this.id + "-menu";
51928      _this.labelId = _this.props.labelId || _this.id + "-label";
51929      _this.inputId = _this.props.inputId || _this.id + "-input";
51930
51931      _this.getItemId = _this.props.getItemId || function (index) {
51932        return _this.id + "-item-" + index;
51933      };
51934
51935      _this.input = null;
51936      _this.items = [];
51937      _this.itemCount = null;
51938      _this.previousResultCount = 0;
51939      _this.timeoutIds = [];
51940
51941      _this.internalSetTimeout = function (fn, time) {
51942        var id = setTimeout(function () {
51943          _this.timeoutIds = _this.timeoutIds.filter(function (i) {
51944            return i !== id;
51945          });
51946          fn();
51947        }, time);
51948
51949        _this.timeoutIds.push(id);
51950      };
51951
51952      _this.setItemCount = function (count) {
51953        _this.itemCount = count;
51954      };
51955
51956      _this.unsetItemCount = function () {
51957        _this.itemCount = null;
51958      };
51959
51960      _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
51961        if (highlightedIndex === void 0) {
51962          highlightedIndex = _this.props.defaultHighlightedIndex;
51963        }
51964
51965        if (otherStateToSet === void 0) {
51966          otherStateToSet = {};
51967        }
51968
51969        otherStateToSet = pickState(otherStateToSet);
51970
51971        _this.internalSetState(_extends({
51972          highlightedIndex: highlightedIndex
51973        }, otherStateToSet));
51974      };
51975
51976      _this.clearSelection = function (cb) {
51977        _this.internalSetState({
51978          selectedItem: null,
51979          inputValue: '',
51980          highlightedIndex: _this.props.defaultHighlightedIndex,
51981          isOpen: _this.props.defaultIsOpen
51982        }, cb);
51983      };
51984
51985      _this.selectItem = function (item, otherStateToSet, cb) {
51986        otherStateToSet = pickState(otherStateToSet);
51987
51988        _this.internalSetState(_extends({
51989          isOpen: _this.props.defaultIsOpen,
51990          highlightedIndex: _this.props.defaultHighlightedIndex,
51991          selectedItem: item,
51992          inputValue: _this.props.itemToString(item)
51993        }, otherStateToSet), cb);
51994      };
51995
51996      _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
51997        var item = _this.items[itemIndex];
51998
51999        if (item == null) {
52000          return;
52001        }
52002
52003        _this.selectItem(item, otherStateToSet, cb);
52004      };
52005
52006      _this.selectHighlightedItem = function (otherStateToSet, cb) {
52007        return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
52008      };
52009
52010      _this.internalSetState = function (stateToSet, cb) {
52011        var isItemSelected, onChangeArg;
52012        var onStateChangeArg = {};
52013        var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
52014        // so someone controlling the `inputValue` state gets notified of
52015        // the input change as soon as possible. This avoids issues with
52016        // preserving the cursor position.
52017        // See https://github.com/downshift-js/downshift/issues/217 for more info.
52018
52019        if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
52020          _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet));
52021        }
52022
52023        return _this.setState(function (state) {
52024          state = _this.getState(state);
52025          var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
52026
52027          newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
52028          // what was selected before
52029          // used to determine if onSelect and onChange callbacks should be called
52030
52031          isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
52032
52033          var nextState = {}; // this is just used to tell whether the state changed
52034          // and we're trying to update that state. OR if the selection has changed and we're
52035          // trying to update the selection
52036
52037          if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
52038            onChangeArg = newStateToSet.selectedItem;
52039          }
52040
52041          newStateToSet.type = newStateToSet.type || unknown;
52042          Object.keys(newStateToSet).forEach(function (key) {
52043            // onStateChangeArg should only have the state that is
52044            // actually changing
52045            if (state[key] !== newStateToSet[key]) {
52046              onStateChangeArg[key] = newStateToSet[key];
52047            } // the type is useful for the onStateChangeArg
52048            // but we don't actually want to set it in internal state.
52049            // this is an undocumented feature for now... Not all internalSetState
52050            // calls support it and I'm not certain we want them to yet.
52051            // But it enables users controlling the isOpen state to know when
52052            // the isOpen state changes due to mouseup events which is quite handy.
52053
52054
52055            if (key === 'type') {
52056              return;
52057            }
52058
52059            newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
52060
52061            if (!isControlledProp(_this.props, key)) {
52062              nextState[key] = newStateToSet[key];
52063            }
52064          }); // if stateToSet is a function, then we weren't able to call onInputValueChange
52065          // earlier, so we'll call it now that we know what the inputValue state will be.
52066
52067          if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
52068            _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet));
52069          }
52070
52071          return nextState;
52072        }, function () {
52073          // call the provided callback if it's a function
52074          cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
52075          // we have relevant information to pass them.
52076
52077          var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
52078
52079          if (hasMoreStateThanType) {
52080            _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
52081          }
52082
52083          if (isItemSelected) {
52084            _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
52085          }
52086
52087          if (onChangeArg !== undefined) {
52088            _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
52089          } // this is currently undocumented and therefore subject to change
52090          // We'll try to not break it, but just be warned.
52091
52092
52093          _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
52094        });
52095      };
52096
52097      _this.rootRef = function (node) {
52098        return _this._rootNode = node;
52099      };
52100
52101      _this.getRootProps = function (_temp, _temp2) {
52102        var _extends2;
52103
52104        var _ref = _temp === void 0 ? {} : _temp,
52105            _ref$refKey = _ref.refKey,
52106            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
52107            ref = _ref.ref,
52108            rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]);
52109
52110        var _ref2 = _temp2 === void 0 ? {} : _temp2,
52111            _ref2$suppressRefErro = _ref2.suppressRefError,
52112            suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
52113
52114        // this is used in the render to know whether the user has called getRootProps.
52115        // It uses that to know whether to apply the props automatically
52116        _this.getRootProps.called = true;
52117        _this.getRootProps.refKey = refKey;
52118        _this.getRootProps.suppressRefError = suppressRefError;
52119
52120        var _this$getState = _this.getState(),
52121            isOpen = _this$getState.isOpen;
52122
52123        return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
52124      };
52125
52126      _this.keyDownHandlers = {
52127        ArrowDown: function ArrowDown(event) {
52128          var _this2 = this;
52129
52130          event.preventDefault();
52131
52132          if (this.getState().isOpen) {
52133            var amount = event.shiftKey ? 5 : 1;
52134            this.moveHighlightedIndex(amount, {
52135              type: keyDownArrowDown
52136            });
52137          } else {
52138            this.internalSetState({
52139              isOpen: true,
52140              type: keyDownArrowDown
52141            }, function () {
52142              var itemCount = _this2.getItemCount();
52143
52144              if (itemCount > 0) {
52145                var _this2$getState = _this2.getState(),
52146                    highlightedIndex = _this2$getState.highlightedIndex;
52147
52148                var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
52149                  return _this2.getItemNodeFromIndex(index);
52150                });
52151
52152                _this2.setHighlightedIndex(nextHighlightedIndex, {
52153                  type: keyDownArrowDown
52154                });
52155              }
52156            });
52157          }
52158        },
52159        ArrowUp: function ArrowUp(event) {
52160          var _this3 = this;
52161
52162          event.preventDefault();
52163
52164          if (this.getState().isOpen) {
52165            var amount = event.shiftKey ? -5 : -1;
52166            this.moveHighlightedIndex(amount, {
52167              type: keyDownArrowUp
52168            });
52169          } else {
52170            this.internalSetState({
52171              isOpen: true,
52172              type: keyDownArrowUp
52173            }, function () {
52174              var itemCount = _this3.getItemCount();
52175
52176              if (itemCount > 0) {
52177                var _this3$getState = _this3.getState(),
52178                    highlightedIndex = _this3$getState.highlightedIndex;
52179
52180                var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
52181                  return _this3.getItemNodeFromIndex(index);
52182                });
52183
52184                _this3.setHighlightedIndex(nextHighlightedIndex, {
52185                  type: keyDownArrowUp
52186                });
52187              }
52188            });
52189          }
52190        },
52191        Enter: function Enter(event) {
52192          if (event.which === 229) {
52193            return;
52194          }
52195
52196          var _this$getState2 = this.getState(),
52197              isOpen = _this$getState2.isOpen,
52198              highlightedIndex = _this$getState2.highlightedIndex;
52199
52200          if (isOpen && highlightedIndex != null) {
52201            event.preventDefault();
52202            var item = this.items[highlightedIndex];
52203            var itemNode = this.getItemNodeFromIndex(highlightedIndex);
52204
52205            if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
52206              return;
52207            }
52208
52209            this.selectHighlightedItem({
52210              type: keyDownEnter
52211            });
52212          }
52213        },
52214        Escape: function Escape(event) {
52215          event.preventDefault();
52216          this.reset(_extends({
52217            type: keyDownEscape
52218          }, !this.state.isOpen && {
52219            selectedItem: null,
52220            inputValue: ''
52221          }));
52222        }
52223      };
52224      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
52225        ' ': function _(event) {
52226          event.preventDefault();
52227          this.toggleMenu({
52228            type: keyDownSpaceButton
52229          });
52230        }
52231      });
52232      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
52233        Home: function Home(event) {
52234          var _this4 = this;
52235
52236          var _this$getState3 = this.getState(),
52237              isOpen = _this$getState3.isOpen;
52238
52239          if (!isOpen) {
52240            return;
52241          }
52242
52243          event.preventDefault();
52244          var itemCount = this.getItemCount();
52245
52246          if (itemCount <= 0 || !isOpen) {
52247            return;
52248          } // get next non-disabled starting downwards from 0 if that's disabled.
52249
52250
52251          var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
52252            return _this4.getItemNodeFromIndex(index);
52253          }, false);
52254          this.setHighlightedIndex(newHighlightedIndex, {
52255            type: keyDownHome
52256          });
52257        },
52258        End: function End(event) {
52259          var _this5 = this;
52260
52261          var _this$getState4 = this.getState(),
52262              isOpen = _this$getState4.isOpen;
52263
52264          if (!isOpen) {
52265            return;
52266          }
52267
52268          event.preventDefault();
52269          var itemCount = this.getItemCount();
52270
52271          if (itemCount <= 0 || !isOpen) {
52272            return;
52273          } // get next non-disabled starting upwards from last index if that's disabled.
52274
52275
52276          var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) {
52277            return _this5.getItemNodeFromIndex(index);
52278          }, false);
52279          this.setHighlightedIndex(newHighlightedIndex, {
52280            type: keyDownEnd
52281          });
52282        }
52283      });
52284
52285      _this.getToggleButtonProps = function (_temp3) {
52286        var _ref3 = _temp3 === void 0 ? {} : _temp3,
52287            onClick = _ref3.onClick,
52288            onPress = _ref3.onPress,
52289            onKeyDown = _ref3.onKeyDown,
52290            onKeyUp = _ref3.onKeyUp,
52291            onBlur = _ref3.onBlur,
52292            rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
52293
52294        var _this$getState5 = _this.getState(),
52295            isOpen = _this$getState5.isOpen;
52296
52297        var enabledEventHandlers =  {
52298          onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
52299          onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
52300          onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
52301          onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
52302        };
52303        var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
52304        return _extends({
52305          type: 'button',
52306          role: 'button',
52307          'aria-label': isOpen ? 'close menu' : 'open menu',
52308          'aria-haspopup': true,
52309          'data-toggle': true
52310        }, eventHandlers, rest);
52311      };
52312
52313      _this.buttonHandleKeyUp = function (event) {
52314        // Prevent click event from emitting in Firefox
52315        event.preventDefault();
52316      };
52317
52318      _this.buttonHandleKeyDown = function (event) {
52319        var key = normalizeArrowKey(event);
52320
52321        if (_this.buttonKeyDownHandlers[key]) {
52322          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
52323        }
52324      };
52325
52326      _this.buttonHandleClick = function (event) {
52327        event.preventDefault(); // handle odd case for Safari and Firefox which
52328        // don't give the button the focus properly.
52329
52330        /* istanbul ignore if (can't reasonably test this) */
52331
52332        if ( _this.props.environment.document.activeElement === _this.props.environment.document.body) {
52333          event.target.focus();
52334        } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
52335        // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
52336        // when building for production and should therefore have no impact on production code.
52337
52338
52339        if (false) {} else {
52340          // Ensure that toggle of menu occurs after the potential blur event in iOS
52341          _this.internalSetTimeout(function () {
52342            return _this.toggleMenu({
52343              type: clickButton
52344            });
52345          });
52346        }
52347      };
52348
52349      _this.buttonHandleBlur = function (event) {
52350        var blurTarget = event.target; // Save blur target for comparison with activeElement later
52351        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
52352
52353        _this.internalSetTimeout(function () {
52354          if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
52355          ) {
52356              _this.reset({
52357                type: blurButton
52358              });
52359            }
52360        });
52361      };
52362
52363      _this.getLabelProps = function (props) {
52364        return _extends({
52365          htmlFor: _this.inputId,
52366          id: _this.labelId
52367        }, props);
52368      };
52369
52370      _this.getInputProps = function (_temp4) {
52371        var _ref4 = _temp4 === void 0 ? {} : _temp4,
52372            onKeyDown = _ref4.onKeyDown,
52373            onBlur = _ref4.onBlur,
52374            onChange = _ref4.onChange,
52375            onInput = _ref4.onInput,
52376            onChangeText = _ref4.onChangeText,
52377            rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
52378
52379        var onChangeKey;
52380        var eventHandlers = {};
52381        /* istanbul ignore next (preact) */
52382
52383        {
52384          onChangeKey = 'onChange';
52385        }
52386
52387        var _this$getState6 = _this.getState(),
52388            inputValue = _this$getState6.inputValue,
52389            isOpen = _this$getState6.isOpen,
52390            highlightedIndex = _this$getState6.highlightedIndex;
52391
52392        if (!rest.disabled) {
52393          var _eventHandlers;
52394
52395          eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
52396        }
52397
52398        return _extends({
52399          'aria-autocomplete': 'list',
52400          'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
52401          'aria-controls': isOpen ? _this.menuId : null,
52402          'aria-labelledby': _this.labelId,
52403          // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
52404          // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
52405          autoComplete: 'off',
52406          value: inputValue,
52407          id: _this.inputId
52408        }, eventHandlers, rest);
52409      };
52410
52411      _this.inputHandleKeyDown = function (event) {
52412        var key = normalizeArrowKey(event);
52413
52414        if (key && _this.inputKeyDownHandlers[key]) {
52415          _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
52416        }
52417      };
52418
52419      _this.inputHandleChange = function (event) {
52420        _this.internalSetState({
52421          type: changeInput,
52422          isOpen: true,
52423          inputValue:  event.target.value,
52424          highlightedIndex: _this.props.defaultHighlightedIndex
52425        });
52426      };
52427
52428      _this.inputHandleBlur = function () {
52429        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
52430        _this.internalSetTimeout(function () {
52431          var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
52432
52433          if (!_this.isMouseDown && !downshiftButtonIsActive) {
52434            _this.reset({
52435              type: blurInput
52436            });
52437          }
52438        });
52439      };
52440
52441      _this.menuRef = function (node) {
52442        _this._menuNode = node;
52443      };
52444
52445      _this.getMenuProps = function (_temp5, _temp6) {
52446        var _extends3;
52447
52448        var _ref5 = _temp5 === void 0 ? {} : _temp5,
52449            _ref5$refKey = _ref5.refKey,
52450            refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
52451            ref = _ref5.ref,
52452            props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]);
52453
52454        var _ref6 = _temp6 === void 0 ? {} : _temp6,
52455            _ref6$suppressRefErro = _ref6.suppressRefError,
52456            suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
52457
52458        _this.getMenuProps.called = true;
52459        _this.getMenuProps.refKey = refKey;
52460        _this.getMenuProps.suppressRefError = suppressRefError;
52461        return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
52462      };
52463
52464      _this.getItemProps = function (_temp7) {
52465        var _enabledEventHandlers;
52466
52467        var _ref7 = _temp7 === void 0 ? {} : _temp7,
52468            onMouseMove = _ref7.onMouseMove,
52469            onMouseDown = _ref7.onMouseDown,
52470            onClick = _ref7.onClick,
52471            onPress = _ref7.onPress,
52472            index = _ref7.index,
52473            _ref7$item = _ref7.item,
52474            item = _ref7$item === void 0 ?  true ?
52475        /* istanbul ignore next */
52476        undefined : 0 : _ref7$item,
52477            rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
52478
52479        if (index === undefined) {
52480          _this.items.push(item);
52481
52482          index = _this.items.indexOf(item);
52483        } else {
52484          _this.items[index] = item;
52485        }
52486
52487        var onSelectKey =  'onClick';
52488        var customClickHandler =  onClick;
52489        var enabledEventHandlers = (_enabledEventHandlers = {
52490          // onMouseMove is used over onMouseEnter here. onMouseMove
52491          // is only triggered on actual mouse movement while onMouseEnter
52492          // can fire on DOM changes, interrupting keyboard navigation
52493          onMouseMove: callAllEventHandlers(onMouseMove, function () {
52494            if (index === _this.getState().highlightedIndex) {
52495              return;
52496            }
52497
52498            _this.setHighlightedIndex(index, {
52499              type: itemMouseEnter
52500            }); // We never want to manually scroll when changing state based
52501            // on `onMouseMove` because we will be moving the element out
52502            // from under the user which is currently scrolling/moving the
52503            // cursor
52504
52505
52506            _this.avoidScrolling = true;
52507
52508            _this.internalSetTimeout(function () {
52509              return _this.avoidScrolling = false;
52510            }, 250);
52511          }),
52512          onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
52513            // This prevents the activeElement from being changed
52514            // to the item so it can remain with the current activeElement
52515            // which is a more common use case.
52516            event.preventDefault();
52517          })
52518        }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
52519          _this.selectItemAtIndex(index, {
52520            type: clickItem
52521          });
52522        }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
52523        // of the activeElement if clicking on disabled items
52524
52525        var eventHandlers = rest.disabled ? {
52526          onMouseDown: enabledEventHandlers.onMouseDown
52527        } : enabledEventHandlers;
52528        return _extends({
52529          id: _this.getItemId(index),
52530          role: 'option',
52531          'aria-selected': _this.getState().highlightedIndex === index
52532        }, eventHandlers, rest);
52533      };
52534
52535      _this.clearItems = function () {
52536        _this.items = [];
52537      };
52538
52539      _this.reset = function (otherStateToSet, cb) {
52540        if (otherStateToSet === void 0) {
52541          otherStateToSet = {};
52542        }
52543
52544        otherStateToSet = pickState(otherStateToSet);
52545
52546        _this.internalSetState(function (_ref8) {
52547          var selectedItem = _ref8.selectedItem;
52548          return _extends({
52549            isOpen: _this.props.defaultIsOpen,
52550            highlightedIndex: _this.props.defaultHighlightedIndex,
52551            inputValue: _this.props.itemToString(selectedItem)
52552          }, otherStateToSet);
52553        }, cb);
52554      };
52555
52556      _this.toggleMenu = function (otherStateToSet, cb) {
52557        if (otherStateToSet === void 0) {
52558          otherStateToSet = {};
52559        }
52560
52561        otherStateToSet = pickState(otherStateToSet);
52562
52563        _this.internalSetState(function (_ref9) {
52564          var isOpen = _ref9.isOpen;
52565          return _extends({
52566            isOpen: !isOpen
52567          }, isOpen && {
52568            highlightedIndex: _this.props.defaultHighlightedIndex
52569          }, otherStateToSet);
52570        }, function () {
52571          var _this$getState7 = _this.getState(),
52572              isOpen = _this$getState7.isOpen,
52573              highlightedIndex = _this$getState7.highlightedIndex;
52574
52575          if (isOpen) {
52576            if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
52577              _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
52578            }
52579          }
52580
52581          cbToCb(cb)();
52582        });
52583      };
52584
52585      _this.openMenu = function (cb) {
52586        _this.internalSetState({
52587          isOpen: true
52588        }, cb);
52589      };
52590
52591      _this.closeMenu = function (cb) {
52592        _this.internalSetState({
52593          isOpen: false
52594        }, cb);
52595      };
52596
52597      _this.updateStatus = downshift_esm_debounce(function () {
52598        var state = _this.getState();
52599
52600        var item = _this.items[state.highlightedIndex];
52601
52602        var resultCount = _this.getItemCount();
52603
52604        var status = _this.props.getA11yStatusMessage(_extends({
52605          itemToString: _this.props.itemToString,
52606          previousResultCount: _this.previousResultCount,
52607          resultCount: resultCount,
52608          highlightedItem: item
52609        }, state));
52610
52611        _this.previousResultCount = resultCount;
52612        setStatus(status, _this.props.environment.document);
52613      }, 200);
52614
52615      var _this$props = _this.props,
52616          defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
52617          _this$props$initialHi = _this$props.initialHighlightedIndex,
52618          _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
52619          defaultIsOpen = _this$props.defaultIsOpen,
52620          _this$props$initialIs = _this$props.initialIsOpen,
52621          _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
52622          _this$props$initialIn = _this$props.initialInputValue,
52623          _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
52624          _this$props$initialSe = _this$props.initialSelectedItem,
52625          _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
52626
52627      var _state = _this.getState({
52628        highlightedIndex: _highlightedIndex,
52629        isOpen: _isOpen,
52630        inputValue: _inputValue,
52631        selectedItem: _selectedItem
52632      });
52633
52634      if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
52635        _state.inputValue = _this.props.itemToString(_state.selectedItem);
52636      }
52637
52638      _this.state = _state;
52639      return _this;
52640    }
52641
52642    var _proto = Downshift.prototype;
52643
52644    /**
52645     * Clear all running timeouts
52646     */
52647    _proto.internalClearTimeouts = function internalClearTimeouts() {
52648      this.timeoutIds.forEach(function (id) {
52649        clearTimeout(id);
52650      });
52651      this.timeoutIds = [];
52652    }
52653    /**
52654     * Gets the state based on internal state or props
52655     * If a state value is passed via props, then that
52656     * is the value given, otherwise it's retrieved from
52657     * stateToMerge
52658     *
52659     * @param {Object} stateToMerge defaults to this.state
52660     * @return {Object} the state
52661     */
52662    ;
52663
52664    _proto.getState = function getState$1(stateToMerge) {
52665      if (stateToMerge === void 0) {
52666        stateToMerge = this.state;
52667      }
52668
52669      return getState(stateToMerge, this.props);
52670    };
52671
52672    _proto.getItemCount = function getItemCount() {
52673      // things read better this way. They're in priority order:
52674      // 1. `this.itemCount`
52675      // 2. `this.props.itemCount`
52676      // 3. `this.items.length`
52677      var itemCount = this.items.length;
52678
52679      if (this.itemCount != null) {
52680        itemCount = this.itemCount;
52681      } else if (this.props.itemCount !== undefined) {
52682        itemCount = this.props.itemCount;
52683      }
52684
52685      return itemCount;
52686    };
52687
52688    _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
52689      return this.props.environment.document.getElementById(this.getItemId(index));
52690    };
52691
52692    _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
52693      /* istanbul ignore else (react-native) */
52694      {
52695        var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
52696        this.props.scrollIntoView(node, this._menuNode);
52697      }
52698    };
52699
52700    _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
52701      var _this6 = this;
52702
52703      var itemCount = this.getItemCount();
52704
52705      var _this$getState8 = this.getState(),
52706          highlightedIndex = _this$getState8.highlightedIndex;
52707
52708      if (itemCount > 0) {
52709        var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
52710          return _this6.getItemNodeFromIndex(index);
52711        });
52712        this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
52713      }
52714    };
52715
52716    _proto.getStateAndHelpers = function getStateAndHelpers() {
52717      var _this$getState9 = this.getState(),
52718          highlightedIndex = _this$getState9.highlightedIndex,
52719          inputValue = _this$getState9.inputValue,
52720          selectedItem = _this$getState9.selectedItem,
52721          isOpen = _this$getState9.isOpen;
52722
52723      var itemToString = this.props.itemToString;
52724      var id = this.id;
52725      var getRootProps = this.getRootProps,
52726          getToggleButtonProps = this.getToggleButtonProps,
52727          getLabelProps = this.getLabelProps,
52728          getMenuProps = this.getMenuProps,
52729          getInputProps = this.getInputProps,
52730          getItemProps = this.getItemProps,
52731          openMenu = this.openMenu,
52732          closeMenu = this.closeMenu,
52733          toggleMenu = this.toggleMenu,
52734          selectItem = this.selectItem,
52735          selectItemAtIndex = this.selectItemAtIndex,
52736          selectHighlightedItem = this.selectHighlightedItem,
52737          setHighlightedIndex = this.setHighlightedIndex,
52738          clearSelection = this.clearSelection,
52739          clearItems = this.clearItems,
52740          reset = this.reset,
52741          setItemCount = this.setItemCount,
52742          unsetItemCount = this.unsetItemCount,
52743          setState = this.internalSetState;
52744      return {
52745        // prop getters
52746        getRootProps: getRootProps,
52747        getToggleButtonProps: getToggleButtonProps,
52748        getLabelProps: getLabelProps,
52749        getMenuProps: getMenuProps,
52750        getInputProps: getInputProps,
52751        getItemProps: getItemProps,
52752        // actions
52753        reset: reset,
52754        openMenu: openMenu,
52755        closeMenu: closeMenu,
52756        toggleMenu: toggleMenu,
52757        selectItem: selectItem,
52758        selectItemAtIndex: selectItemAtIndex,
52759        selectHighlightedItem: selectHighlightedItem,
52760        setHighlightedIndex: setHighlightedIndex,
52761        clearSelection: clearSelection,
52762        clearItems: clearItems,
52763        setItemCount: setItemCount,
52764        unsetItemCount: unsetItemCount,
52765        setState: setState,
52766        // props
52767        itemToString: itemToString,
52768        // derived
52769        id: id,
52770        // state
52771        highlightedIndex: highlightedIndex,
52772        inputValue: inputValue,
52773        isOpen: isOpen,
52774        selectedItem: selectedItem
52775      };
52776    } //////////////////////////// ROOT
52777    ;
52778
52779    _proto.componentDidMount = function componentDidMount() {
52780      var _this7 = this;
52781
52782      /* istanbul ignore if (react-native) */
52783      if (false) {}
52784      /* istanbul ignore if (react-native) */
52785
52786
52787      {
52788        // this.isMouseDown helps us track whether the mouse is currently held down.
52789        // This is useful when the user clicks on an item in the list, but holds the mouse
52790        // down long enough for the list to disappear (because the blur event fires on the input)
52791        // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
52792        // trigger hiding the menu.
52793        var onMouseDown = function onMouseDown() {
52794          _this7.isMouseDown = true;
52795        };
52796
52797        var onMouseUp = function onMouseUp(event) {
52798          _this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node
52799          // then we don't want to reset downshift
52800
52801          var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment.document);
52802
52803          if (!contextWithinDownshift && _this7.getState().isOpen) {
52804            _this7.reset({
52805              type: mouseUp
52806            }, function () {
52807              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
52808            });
52809          }
52810        }; // Touching an element in iOS gives focus and hover states, but touching out of
52811        // the element will remove hover, and persist the focus state, resulting in the
52812        // blur event not being triggered.
52813        // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
52814        // If the user taps outside of Downshift, the component should be reset,
52815        // but not if the user is swiping
52816
52817
52818        var onTouchStart = function onTouchStart() {
52819          _this7.isTouchMove = false;
52820        };
52821
52822        var onTouchMove = function onTouchMove() {
52823          _this7.isTouchMove = true;
52824        };
52825
52826        var onTouchEnd = function onTouchEnd(event) {
52827          var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment.document, false);
52828
52829          if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
52830            _this7.reset({
52831              type: touchEnd
52832            }, function () {
52833              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
52834            });
52835          }
52836        };
52837
52838        var environment = this.props.environment;
52839        environment.addEventListener('mousedown', onMouseDown);
52840        environment.addEventListener('mouseup', onMouseUp);
52841        environment.addEventListener('touchstart', onTouchStart);
52842        environment.addEventListener('touchmove', onTouchMove);
52843        environment.addEventListener('touchend', onTouchEnd);
52844
52845        this.cleanup = function () {
52846          _this7.internalClearTimeouts();
52847
52848          _this7.updateStatus.cancel();
52849
52850          environment.removeEventListener('mousedown', onMouseDown);
52851          environment.removeEventListener('mouseup', onMouseUp);
52852          environment.removeEventListener('touchstart', onTouchStart);
52853          environment.removeEventListener('touchmove', onTouchMove);
52854          environment.removeEventListener('touchend', onTouchEnd);
52855        };
52856      }
52857    };
52858
52859    _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
52860      var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
52861          currentHighlightedIndex = _ref10.highlightedIndex;
52862
52863      var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
52864          prevHighlightedIndex = _ref11.highlightedIndex;
52865
52866      var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
52867      var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
52868      return scrollWhenOpen || scrollWhenNavigating;
52869    };
52870
52871    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
52872      if (false) {}
52873
52874      if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
52875        this.internalSetState({
52876          type: controlledPropUpdatedSelectedItem,
52877          inputValue: this.props.itemToString(this.props.selectedItem)
52878        });
52879      }
52880
52881      if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
52882        this.scrollHighlightedItemIntoView();
52883      }
52884      /* istanbul ignore else (react-native) */
52885
52886
52887      {
52888        this.updateStatus();
52889      }
52890    };
52891
52892    _proto.componentWillUnmount = function componentWillUnmount() {
52893      this.cleanup(); // avoids memory leak
52894    };
52895
52896    _proto.render = function render() {
52897      var children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children
52898      // we clear this out each render and it will be populated again as
52899      // getItemProps is called.
52900
52901      this.clearItems(); // we reset this so we know whether the user calls getRootProps during
52902      // this render. If they do then we don't need to do anything,
52903      // if they don't then we need to clone the element they return and
52904      // apply the props for them.
52905
52906      this.getRootProps.called = false;
52907      this.getRootProps.refKey = undefined;
52908      this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
52909
52910      this.getMenuProps.called = false;
52911      this.getMenuProps.refKey = undefined;
52912      this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
52913
52914      this.getLabelProps.called = false; // and something similar for getInputProps
52915
52916      this.getInputProps.called = false;
52917      var element = unwrapArray(children(this.getStateAndHelpers()));
52918
52919      if (!element) {
52920        return null;
52921      }
52922
52923      if (this.getRootProps.called || this.props.suppressRefError) {
52924        if (false) {}
52925
52926        return element;
52927      } else if (isDOMElement(element)) {
52928        // they didn't apply the root props, but we can clone
52929        // this and apply the props ourselves
52930        return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element)));
52931      }
52932      /* istanbul ignore else */
52933
52934
52935      if (false) {}
52936      /* istanbul ignore next */
52937
52938
52939      return undefined;
52940    };
52941
52942    return Downshift;
52943  }(Component);
52944
52945  Downshift.defaultProps = {
52946    defaultHighlightedIndex: null,
52947    defaultIsOpen: false,
52948    getA11yStatusMessage: getA11yStatusMessage,
52949    itemToString: function itemToString(i) {
52950      if (i == null) {
52951        return '';
52952      }
52953
52954      if (false) {}
52955
52956      return String(i);
52957    },
52958    onStateChange: downshift_esm_noop,
52959    onInputValueChange: downshift_esm_noop,
52960    onUserAction: downshift_esm_noop,
52961    onChange: downshift_esm_noop,
52962    onSelect: downshift_esm_noop,
52963    onOuterClick: downshift_esm_noop,
52964    selectedItemChanged: function selectedItemChanged(prevItem, item) {
52965      return prevItem !== item;
52966    },
52967    environment: typeof window === 'undefined'
52968    /* istanbul ignore next (ssr) */
52969    ? {} : window,
52970    stateReducer: function stateReducer(state, stateToSet) {
52971      return stateToSet;
52972    },
52973    suppressRefError: false,
52974    scrollIntoView: scrollIntoView
52975  };
52976  Downshift.stateChangeTypes = stateChangeTypes;
52977  return Downshift;
52978}()));
52979
52980 false ? 0 : void 0;
52981
52982function validateGetMenuPropsCalledCorrectly(node, _ref12) {
52983  var refKey = _ref12.refKey;
52984
52985  if (!node) {
52986    // eslint-disable-next-line no-console
52987    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
52988  }
52989}
52990
52991function validateGetRootPropsCalledCorrectly(element, _ref13) {
52992  var refKey = _ref13.refKey;
52993  var refKeySpecified = refKey !== 'ref';
52994  var isComposite = !isDOMElement(element);
52995
52996  if (isComposite && !refKeySpecified && !isForwardRef(element)) {
52997    // eslint-disable-next-line no-console
52998    console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
52999  } else if (!isComposite && refKeySpecified) {
53000    // eslint-disable-next-line no-console
53001    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
53002  }
53003
53004  if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
53005    // eslint-disable-next-line no-console
53006    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto y
53006our root element.");
53007  }
53008}
53009
53010var dropdownDefaultStateValues = {
53011  highlightedIndex: -1,
53012  isOpen: false,
53013  selectedItem: null,
53014  inputValue: ''
53015};
53016
53017function callOnChangeProps(action, state, newState) {
53018  var props = action.props,
53019      type = action.type;
53020  var changes = {};
53021  Object.keys(state).forEach(function (key) {
53022    invokeOnChangeHandler(key, action, state, newState);
53023
53024    if (newState[key] !== state[key]) {
53025      changes[key] = newState[key];
53026    }
53027  });
53028
53029  if (props.onStateChange && Object.keys(changes).length) {
53030    props.onStateChange(extends_extends({
53031      type: type
53032    }, changes));
53033  }
53034}
53035
53036function invokeOnChangeHandler(key, action, state, newState) {
53037  var props = action.props,
53038      type = action.type;
53039  var handler = "on" + capitalizeString(key) + "Change";
53040
53041  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
53042    props[handler](extends_extends({
53043      type: type
53044    }, newState));
53045  }
53046}
53047/**
53048 * Default state reducer that returns the changes.
53049 *
53050 * @param {Object} s state.
53051 * @param {Object} a action with changes.
53052 * @returns {Object} changes.
53053 */
53054
53055
53056function stateReducer(s, a) {
53057  return a.changes;
53058}
53059/**
53060 * Returns a message to be added to aria-live region when item is selected.
53061 *
53062 * @param {Object} selectionParameters Parameters required to build the message.
53063 * @returns {string} The a11y message.
53064 */
53065
53066
53067function getA11ySelectionMessage(selectionParameters) {
53068  var selectedItem = selectionParameters.selectedItem,
53069      itemToStringLocal = selectionParameters.itemToString;
53070  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
53071}
53072/**
53073 * Debounced call for updating the a11y message.
53074 */
53075
53076
53077var updateA11yStatus = downshift_esm_debounce(function (getA11yMessage, document) {
53078  setStatus(getA11yMessage(), document);
53079}, 200); // istanbul ignore next
53080
53081var downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
53082
53083function useElementIds(_ref) {
53084  var _ref$id = _ref.id,
53085      id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
53086      labelId = _ref.labelId,
53087      menuId = _ref.menuId,
53088      getItemId = _ref.getItemId,
53089      toggleButtonId = _ref.toggleButtonId,
53090      inputId = _ref.inputId;
53091  var elementIdsRef = (0,external_React_.useRef)({
53092    labelId: labelId || id + "-label",
53093    menuId: menuId || id + "-menu",
53094    getItemId: getItemId || function (index) {
53095      return id + "-item-" + index;
53096    },
53097    toggleButtonId: toggleButtonId || id + "-toggle-button",
53098    inputId: inputId || id + "-input"
53099  });
53100  return elementIdsRef.current;
53101}
53102
53103function getItemIndex(index, item, items) {
53104  if (index !== undefined) {
53105    return index;
53106  }
53107
53108  if (items.length === 0) {
53109    return -1;
53110  }
53111
53112  return items.indexOf(item);
53113}
53114
53115function itemToString(item) {
53116  return item ? String(item) : '';
53117}
53118
53119function isAcceptedCharacterKey(key) {
53120  return /^\S{1}$/.test(key);
53121}
53122
53123function capitalizeString(string) {
53124  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
53125}
53126
53127function downshift_esm_useLatestRef(val) {
53128  var ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
53129  // the value during render (so it's not idempotent). However, the places this
53130  // hook is used is to support memoizing callbacks which will be called
53131  // *during* render, so we need the latest values *during* render.
53132  // If not for this, then we'd probably want to use useLayoutEffect instead.
53133
53134  ref.current = val;
53135  return ref;
53136}
53137/**
53138 * Computes the controlled state using a the previous state, props,
53139 * two reducers, one from downshift and an optional one from the user.
53140 * Also calls the onChange handlers for state values that have changed.
53141 *
53142 * @param {Function} reducer Reducer function from downshift.
53143 * @param {Object} initialState Initial state of the hook.
53144 * @param {Object} props The hook props.
53145 * @returns {Array} An array with the state and an action dispatcher.
53146 */
53147
53148
53149function useEnhancedReducer(reducer, initialState, props) {
53150  var prevStateRef = (0,external_React_.useRef)();
53151  var actionRef = (0,external_React_.useRef)();
53152  var enhancedReducer = (0,external_React_.useCallback)(function (state, action) {
53153    actionRef.current = action;
53154    state = getState(state, action.props);
53155    var changes = reducer(state, action);
53156    var newState = action.props.stateReducer(state, extends_extends({}, action, {
53157      changes: changes
53158    }));
53159    return newState;
53160  }, [reducer]);
53161
53162  var _useReducer = (0,external_React_.useReducer)(enhancedReducer, initialState),
53163      state = _useReducer[0],
53164      dispatch = _useReducer[1];
53165
53166  var propsRef = downshift_esm_useLatestRef(props);
53167  var dispatchWithProps = (0,external_React_.useCallback)(function (action) {
53168    return dispatch(extends_extends({
53169      props: propsRef.current
53170    }, action));
53171  }, [propsRef]);
53172  var action = actionRef.current;
53173  (0,external_React_.useEffect)(function () {
53174    if (action && prevStateRef.current && prevStateRef.current !== state) {
53175      callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
53176    }
53177
53178    prevStateRef.current = state;
53179  }, [state, props, action]);
53180  return [state, dispatchWithProps];
53181}
53182/**
53183 * Wraps the useEnhancedReducer and applies the controlled prop values before
53184 * returning the new state.
53185 *
53186 * @param {Function} reducer Reducer function from downshift.
53187 * @param {Object} initialState Initial state of the hook.
53188 * @param {Object} props The hook props.
53189 * @returns {Array} An array with the state and an action dispatcher.
53190 */
53191
53192
53193function useControlledReducer(reducer, initialState, props) {
53194  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
53195      state = _useEnhancedReducer[0],
53196      dispatch = _useEnhancedReducer[1];
53197
53198  return [getState(state, props), dispatch];
53199}
53200
53201var defaultProps = {
53202  itemToString: itemToString,
53203  stateReducer: stateReducer,
53204  getA11ySelectionMessage: getA11ySelectionMessage,
53205  scrollIntoView: scrollIntoView,
53206  circularNavigation: false,
53207  environment: typeof window === 'undefined'
53208  /* istanbul ignore next (ssr) */
53209  ? {} : window
53210};
53211
53212function getDefaultValue(props, propKey, defaultStateValues) {
53213  if (defaultStateValues === void 0) {
53214    defaultStateValues = dropdownDefaultStateValues;
53215  }
53216
53217  var defaultPropKey = "default" + capitalizeString(propKey);
53218
53219  if (defaultPropKey in props) {
53220    return props[defaultPropKey];
53221  }
53222
53223  return defaultStateValues[propKey];
53224}
53225
53226function getInitialValue(props, propKey, defaultStateValues) {
53227  if (defaultStateValues === void 0) {
53228    defaultStateValues = dropdownDefaultStateValues;
53229  }
53230
53231  if (propKey in props) {
53232    return props[propKey];
53233  }
53234
53235  var initialPropKey = "initial" + capitalizeString(propKey);
53236
53237  if (initialPropKey in props) {
53238    return props[initialPropKey];
53239  }
53240
53241  return getDefaultValue(props, propKey, defaultStateValues);
53242}
53243
53244function getInitialState(props) {
53245  var selectedItem = getInitialValue(props, 'selectedItem');
53246  var isOpen = getInitialValue(props, 'isOpen');
53247  var highlightedIndex = getInitialValue(props, 'highlightedIndex');
53248  var inputValue = getInitialValue(props, 'inputValue');
53249  return {
53250    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
53251    isOpen: isOpen,
53252    selectedItem: selectedItem,
53253    inputValue: inputValue
53254  };
53255}
53256
53257function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
53258  var items = props.items,
53259      initialHighlightedIndex = props.initialHighlightedIndex,
53260      defaultHighlightedIndex = props.defaultHighlightedIndex;
53261  var selectedItem = state.selectedItem,
53262      highlightedIndex = state.highlightedIndex;
53263
53264  if (items.length === 0) {
53265    return -1;
53266  } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
53267
53268
53269  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
53270    return initialHighlightedIndex;
53271  }
53272
53273  if (defaultHighlightedIndex !== undefined) {
53274    return defaultHighlightedIndex;
53275  }
53276
53277  if (selectedItem) {
53278    if (offset === 0) {
53279      return items.indexOf(selectedItem);
53280    }
53281
53282    return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
53283  }
53284
53285  if (offset === 0) {
53286    return -1;
53287  }
53288
53289  return offset < 0 ? items.length - 1 : 0;
53290}
53291/**
53292 * Reuse the movement tracking of mouse and touch events.
53293 *
53294 * @param {boolean} isOpen Whether the dropdown is open or not.
53295 * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
53296 * @param {Object} environment Environment where component/hook exists.
53297 * @param {Function} handleBlur Handler on blur from mouse or touch.
53298 * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
53299 */
53300
53301
53302function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
53303  var mouseAndTouchTrackersRef = (0,external_React_.useRef)({
53304    isMouseDown: false,
53305    isTouchMove: false
53306  });
53307  (0,external_React_.useEffect)(function () {
53308    // The same strategy for checking if a click occurred inside or outside downsift
53309    // as in downshift.js.
53310    var onMouseDown = function onMouseDown() {
53311      mouseAndTouchTrackersRef.current.isMouseDown = true;
53312    };
53313
53314    var onMouseUp = function onMouseUp(event) {
53315      mouseAndTouchTrackersRef.current.isMouseDown = false;
53316
53317      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
53318        return ref.current;
53319      }), environment.document)) {
53320        handleBlur();
53321      }
53322    };
53323
53324    var onTouchStart = function onTouchStart() {
53325      mouseAndTouchTrackersRef.current.isTouchMove = false;
53326    };
53327
53328    var onTouchMove = function onTouchMove() {
53329      mouseAndTouchTrackersRef.current.isTouchMove = true;
53330    };
53331
53332    var onTouchEnd = function onTouchEnd(event) {
53333      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
53334        return ref.current;
53335      }), environment.document, false)) {
53336        handleBlur();
53337      }
53338    };
53339
53340    environment.addEventListener('mousedown', onMouseDown);
53341    environment.addEventListener('mouseup', onMouseUp);
53342    environment.addEventListener('touchstart', onTouchStart);
53343    environment.addEventListener('touchmove', onTouchMove);
53344    environment.addEventListener('touchend', onTouchEnd);
53345    return function cleanup() {
53346      environment.removeEventListener('mousedown', onMouseDown);
53347      environment.removeEventListener('mouseup', onMouseUp);
53348      environment.removeEventListener('touchstart', onTouchStart);
53349      environment.removeEventListener('touchmove', onTouchMove);
53350      environment.removeEventListener('touchend', onTouchEnd);
53351    }; // eslint-disable-next-line react-hooks/exhaustive-deps
53352  }, [isOpen, environment]);
53353  return mouseAndTouchTrackersRef;
53354}
53355/* istanbul ignore next */
53356// eslint-disable-next-line import/no-mutable-exports
53357
53358
53359var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
53360  return downshift_esm_noop;
53361};
53362/**
53363 * Custom hook that checks if getter props are called correctly.
53364 *
53365 * @param  {...any} propKeys Getter prop names to be handled.
53366 * @returns {Function} Setter function called inside getter props to set call information.
53367 */
53368
53369/* istanbul ignore next */
53370
53371
53372if (false) {}
53373
53374function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
53375  var isInitialMount = _ref2.isInitialMount,
53376      highlightedIndex = _ref2.highlightedIndex,
53377      items = _ref2.items,
53378      environment = _ref2.environment,
53379      rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref2, ["isInitialMount", "highlightedIndex", "items", "environment"]);
53380
53381  // Sets a11y status message on changes in state.
53382  (0,external_React_.useEffect)(function () {
53383    if (isInitialMount) {
53384      return;
53385    }
53386
53387    updateA11yStatus(function () {
53388      return getA11yMessage(extends_extends({
53389        highlightedIndex: highlightedIndex,
53390        highlightedItem: items[highlightedIndex],
53391        resultCount: items.length
53392      }, rest));
53393    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
53394  }, dependencyArray);
53395}
53396
53397function useScrollIntoView(_ref3) {
53398  var highlightedIndex = _ref3.highlightedIndex,
53399      isOpen = _ref3.isOpen,
53400      itemRefs = _ref3.itemRefs,
53401      getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
53402      menuElement = _ref3.menuElement,
53403      scrollIntoViewProp = _ref3.scrollIntoView;
53404  // used not to scroll on highlight by mouse.
53405  var shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard.
53406
53407  downshift_esm_useIsomorphicLayoutEffect(function () {
53408    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
53409      return;
53410    }
53411
53412    if (shouldScrollRef.current === false) {
53413      shouldScrollRef.current = true;
53414    } else {
53415      scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
53416    } // eslint-disable-next-line react-hooks/exhaustive-deps
53417
53418  }, [highlightedIndex]);
53419  return shouldScrollRef;
53420} // eslint-disable-next-line import/no-mutable-exports
53421
53422
53423var useControlPropsValidator = downshift_esm_noop;
53424/* istanbul ignore next */
53425
53426if (false) {}
53427
53428/* eslint-disable complexity */
53429
53430function downshiftCommonReducer(state, action, stateChangeTypes) {
53431  var type = action.type,
53432      props = action.props;
53433  var changes;
53434
53435  switch (type) {
53436    case stateChangeTypes.ItemMouseMove:
53437      changes = {
53438        highlightedIndex: action.index
53439      };
53440      break;
53441
53442    case stateChangeTypes.MenuMouseLeave:
53443      changes = {
53444        highlightedIndex: -1
53445      };
53446      break;
53447
53448    case stateChangeTypes.ToggleButtonClick:
53449    case stateChangeTypes.FunctionToggleMenu:
53450      changes = {
53451        isOpen: !state.isOpen,
53452        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
53453      };
53454      break;
53455
53456    case stateChangeTypes.FunctionOpenMenu:
53457      changes = {
53458        isOpen: true,
53459        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
53460      };
53461      break;
53462
53463    case stateChangeTypes.FunctionCloseMenu:
53464      changes = {
53465        isOpen: false
53466      };
53467      break;
53468
53469    case stateChangeTypes.FunctionSetHighlightedIndex:
53470      changes = {
53471        highlightedIndex: action.highlightedIndex
53472      };
53473      break;
53474
53475    case stateChangeTypes.FunctionSetInputValue:
53476      changes = {
53477        inputValue: action.inputValue
53478      };
53479      break;
53480
53481    case stateChangeTypes.FunctionReset:
53482      changes = {
53483        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
53484        isOpen: getDefaultValue(props, 'isOpen'),
53485        selectedItem: getDefaultValue(props, 'selectedItem'),
53486        inputValue: getDefaultValue(props, 'inputValue')
53487      };
53488      break;
53489
53490    default:
53491      throw new Error('Reducer called without proper action type.');
53492  }
53493
53494  return extends_extends({}, state, changes);
53495}
53496/* eslint-enable complexity */
53497
53498function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToString, getItemNodeFromIndex) {
53499  var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
53500
53501  for (var index = 0; index < items.length; index++) {
53502    var offsetIndex = (index + highlightedIndex + 1) % items.length;
53503
53504    if (itemToString(items[offsetIndex]).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
53505      var element = getItemNodeFromIndex(offsetIndex);
53506
53507      if (!(element && element.hasAttribute('disabled'))) {
53508        return offsetIndex;
53509      }
53510    }
53511  }
53512
53513  return highlightedIndex;
53514}
53515
53516var propTypes = {
53517  items: (prop_types_default()).array.isRequired,
53518  itemToString: (prop_types_default()).func,
53519  getA11yStatusMessage: (prop_types_default()).func,
53520  getA11ySelectionMessage: (prop_types_default()).func,
53521  circularNavigation: (prop_types_default()).bool,
53522  highlightedIndex: (prop_types_default()).number,
53523  defaultHighlightedIndex: (prop_types_default()).number,
53524  initialHighlightedIndex: (prop_types_default()).number,
53525  isOpen: (prop_types_default()).bool,
53526  defaultIsOpen: (prop_types_default()).bool,
53527  initialIsOpen: (prop_types_default()).bool,
53528  selectedItem: (prop_types_default()).any,
53529  initialSelectedItem: (prop_types_default()).any,
53530  defaultSelectedItem: (prop_types_default()).any,
53531  id: (prop_types_default()).string,
53532  labelId: (prop_types_default()).string,
53533  menuId: (prop_types_default()).string,
53534  getItemId: (prop_types_default()).func,
53535  toggleButtonId: (prop_types_default()).string,
53536  stateReducer: (prop_types_default()).func,
53537  onSelectedItemChange: (prop_types_default()).func,
53538  onHighlightedIndexChange: (prop_types_default()).func,
53539  onStateChange: (prop_types_default()).func,
53540  onIsOpenChange: (prop_types_default()).func,
53541  environment: prop_types_default().shape({
53542    addEventListener: (prop_types_default()).func,
53543    removeEventListener: (prop_types_default()).func,
53544    document: prop_types_default().shape({
53545      getElementById: (prop_types_default()).func,
53546      activeElement: (prop_types_default()).any,
53547      body: (prop_types_default()).any
53548    })
53549  })
53550};
53551/**
53552 * Default implementation for status message. Only added when menu is open.
53553 * Will specift if there are results in the list, and if so, how many,
53554 * and what keys are relevant.
53555 *
53556 * @param {Object} param the downshift state and other relevant properties
53557 * @return {String} the a11y status message
53558 */
53559
53560function getA11yStatusMessage$1(_ref) {
53561  var isOpen = _ref.isOpen,
53562      resultCount = _ref.resultCount,
53563      previousResultCount = _ref.previousResultCount;
53564
53565  if (!isOpen) {
53566    return '';
53567  }
53568
53569  if (!resultCount) {
53570    return 'No results are available.';
53571  }
53572
53573  if (resultCount !== previousResultCount) {
53574    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
53575  }
53576
53577  return '';
53578}
53579
53580var defaultProps$1 = extends_extends({}, defaultProps, {
53581  getA11yStatusMessage: getA11yStatusMessage$1
53582}); // eslint-disable-next-line import/no-mutable-exports
53583
53584
53585var validatePropTypes = downshift_esm_noop;
53586/* istanbul ignore next */
53587
53588if (false) {}
53589
53590var MenuKeyDownArrowDown =  false ? 0 : 0;
53591var MenuKeyDownArrowUp =  false ? 0 : 1;
53592var MenuKeyDownEscape =  false ? 0 : 2;
53593var MenuKeyDownHome =  false ? 0 : 3;
53594var MenuKeyDownEnd =  false ? 0 : 4;
53595var MenuKeyDownEnter =  false ? 0 : 5;
53596var MenuKeyDownSpaceButton =  false ? 0 : 6;
53597var MenuKeyDownCharacter =  false ? 0 : 7;
53598var MenuBlur =  false ? 0 : 8;
53599var MenuMouseLeave =  false ? 0 : 9;
53600var ItemMouseMove =  false ? 0 : 10;
53601var ItemClick =  false ? 0 : 11;
53602var ToggleButtonClick =  false ? 0 : 12;
53603var ToggleButtonKeyDownArrowDown =  false ? 0 : 13;
53604var ToggleButtonKeyDownArrowUp =  false ? 0 : 14;
53605var ToggleButtonKeyDownCharacter =  false ? 0 : 15;
53606var FunctionToggleMenu =  false ? 0 : 16;
53607var FunctionOpenMenu =  false ? 0 : 17;
53608var FunctionCloseMenu =  false ? 0 : 18;
53609var FunctionSetHighlightedIndex =  false ? 0 : 19;
53610var FunctionSelectItem =  false ? 0 : 20;
53611var FunctionSetInputValue =  false ? 0 : 21;
53612var FunctionReset =  false ? 0 : 22;
53613
53614var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
53615  __proto__: null,
53616  MenuKeyDownArrowDown: MenuKeyDownArrowDown,
53617  MenuKeyDownArrowUp: MenuKeyDownArrowUp,
53618  MenuKeyDownEscape: MenuKeyDownEscape,
53619  MenuKeyDownHome: MenuKeyDownHome,
53620  MenuKeyDownEnd: MenuKeyDownEnd,
53621  MenuKeyDownEnter: MenuKeyDownEnter,
53622  MenuKeyDownSpaceButton: MenuKeyDownSpaceButton,
53623  MenuKeyDownCharacter: MenuKeyDownCharacter,
53624  MenuBlur: MenuBlur,
53625  MenuMouseLeave: MenuMouseLeave,
53626  ItemMouseMove: ItemMouseMove,
53627  ItemClick: ItemClick,
53628  ToggleButtonClick: ToggleButtonClick,
53629  ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
53630  ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
53631  ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
53632  FunctionToggleMenu: FunctionToggleMenu,
53633  FunctionOpenMenu: FunctionOpenMenu,
53634  FunctionCloseMenu: FunctionCloseMenu,
53635  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
53636  FunctionSelectItem: FunctionSelectItem,
53637  FunctionSetInputValue: FunctionSetInputValue,
53638  FunctionReset: FunctionReset
53639});
53640
53641/* eslint-disable complexity */
53642
53643function downshiftSelectReducer(state, action) {
53644  var type = action.type,
53645      props = action.props,
53646      shiftKey = action.shiftKey;
53647  var changes;
53648
53649  switch (type) {
53650    case ItemClick:
53651      changes = {
53652        isOpen: getDefaultValue(props, 'isOpen'),
53653        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
53654        selectedItem: props.items[action.index]
53655      };
53656      break;
53657
53658    case ToggleButtonKeyDownCharacter:
53659      {
53660        var lowercasedKey = action.key;
53661        var inputValue = "" + state.inputValue + lowercasedKey;
53662        var itemIndex = getItemIndexByCharacterKey(inputValue, state.selectedItem ? props.items.indexOf(state.selectedItem) : -1, props.items, props.itemToString, action.getItemNodeFromIndex);
53663        changes = extends_extends({
53664          inputValue: inputValue
53665        }, itemIndex >= 0 && {
53666          selectedItem: props.items[itemIndex]
53667        });
53668      }
53669      break;
53670
53671    case ToggleButtonKeyDownArrowDown:
53672      changes = {
53673        highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
53674        isOpen: true
53675      };
53676      break;
53677
53678    case ToggleButtonKeyDownArrowUp:
53679      changes = {
53680        highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
53681        isOpen: true
53682      };
53683      break;
53684
53685    case MenuKeyDownEnter:
53686    case MenuKeyDownSpaceButton:
53687      changes = extends_extends({
53688        isOpen: getDefaultValue(props, 'isOpen'),
53689        highlightedIndex: getDefaultValue(props, 'highlightedIndex')
53690      }, state.highlightedIndex >= 0 && {
53691        selectedItem: props.items[state.highlightedIndex]
53692      });
53693      break;
53694
53695    case MenuKeyDownHome:
53696      changes = {
53697        highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
53698      };
53699      break;
53700
53701    case MenuKeyDownEnd:
53702      changes = {
53703        highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
53704      };
53705      break;
53706
53707    case MenuKeyDownEscape:
53708      changes = {
53709        isOpen: false,
53710        highlightedIndex: -1
53711      };
53712      break;
53713
53714    case MenuBlur:
53715      changes = {
53716        isOpen: false,
53717        highlightedIndex: -1
53718      };
53719      break;
53720
53721    case MenuKeyDownCharacter:
53722      {
53723        var _lowercasedKey = action.key;
53724
53725        var _inputValue = "" + state.inputValue + _lowercasedKey;
53726
53727        var highlightedIndex = getItemIndexByCharacterKey(_inputValue, state.highlightedIndex, props.items, props.itemToString, action.getItemNodeFromIndex);
53728        changes = extends_extends({
53729          inputValue: _inputValue
53730        }, highlightedIndex >= 0 && {
53731          highlightedIndex: highlightedIndex
53732        });
53733      }
53734      break;
53735
53736    case MenuKeyDownArrowDown:
53737      changes = {
53738        highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
53739      };
53740      break;
53741
53742    case MenuKeyDownArrowUp:
53743      changes = {
53744        highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
53745      };
53746      break;
53747
53748    case FunctionSelectItem:
53749      changes = {
53750        selectedItem: action.selectedItem
53751      };
53752      break;
53753
53754    default:
53755      return downshiftCommonReducer(state, action, stateChangeTypes$1);
53756  }
53757
53758  return extends_extends({}, state, changes);
53759}
53760/* eslint-enable complexity */
53761
53762useSelect.stateChangeTypes = stateChangeTypes$1;
53763
53764function useSelect(userProps) {
53765  if (userProps === void 0) {
53766    userProps = {};
53767  }
53768
53769  validatePropTypes(userProps, useSelect); // Props defaults and destructuring.
53770
53771  var props = extends_extends({}, defaultProps$1, userProps);
53772
53773  var items = props.items,
53774      scrollIntoView = props.scrollIntoView,
53775      environment = props.environment,
53776      initialIsOpen = props.initialIsOpen,
53777      defaultIsOpen = props.defaultIsOpen,
53778      itemToString = props.itemToString,
53779      getA11ySelectionMessage = props.getA11ySelectionMessage,
53780      getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props.
53781
53782  var initialState = getInitialState(props);
53783
53784  var _useControlledReducer = useControlledReducer(downshiftSelectReducer, initialState, props),
53785      state = _useControlledReducer[0],
53786      dispatch = _useControlledReducer[1];
53787
53788  var isOpen = state.isOpen,
53789      highlightedIndex = state.highlightedIndex,
53790      selectedItem = state.selectedItem,
53791      inputValue = state.inputValue; // Element efs.
53792
53793  var toggleButtonRef = (0,external_React_.useRef)(null);
53794  var menuRef = (0,external_React_.useRef)(null);
53795  var itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios.
53796
53797  var shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders.
53798
53799  var clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders.
53800
53801  var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
53802
53803  var previousResultCountRef = (0,external_React_.useRef)();
53804  var isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element.
53805
53806  var latest = downshift_esm_useLatestRef({
53807    state: state,
53808    props: props
53809  }); // Some utils.
53810
53811  var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) {
53812    return itemRefs.current[elementIds.getItemId(index)];
53813  }, [elementIds]); // Effects.
53814  // Sets a11y status message on changes in state.
53815
53816  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({
53817    isInitialMount: isInitialMountRef.current,
53818    previousResultCount: previousResultCountRef.current,
53819    items: items,
53820    environment: environment,
53821    itemToString: itemToString
53822  }, state)); // Sets a11y status message on changes in selectedItem.
53823
53824  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({
53825    isInitialMount: isInitialMountRef.current,
53826    previousResultCount: previousResultCountRef.current,
53827    items: items,
53828    environment: environment,
53829    itemToString: itemToString
53830  }, state)); // Scroll on highlighted item if change comes from keyboard.
53831
53832  var shouldScrollRef = useScrollIntoView({
53833    menuElement: menuRef.current,
53834    highlightedIndex: highlightedIndex,
53835    isOpen: isOpen,
53836    itemRefs: itemRefs,
53837    scrollIntoView: scrollIntoView,
53838    getItemNodeFromIndex: getItemNodeFromIndex
53839  }); // Sets cleanup for the keysSoFar after 500ms.
53840
53841  (0,external_React_.useEffect)(function () {
53842    // init the clean function here as we need access to dispatch.
53843    if (isInitialMountRef.current) {
53844      clearTimeoutRef.current = downshift_esm_debounce(function (outerDispatch) {
53845        outerDispatch({
53846          type: FunctionSetInputValue,
53847          inputValue: ''
53848        });
53849      }, 500);
53850    }
53851
53852    if (!inputValue) {
53853      return;
53854    }
53855
53856    clearTimeoutRef.current(dispatch);
53857  }, [dispatch, inputValue]);
53858  useControlPropsValidator({
53859    isInitialMount: isInitialMountRef.current,
53860    props: props,
53861    state: state
53862  });
53863  /* Controls the focus on the menu or the toggle button. */
53864
53865  (0,external_React_.useEffect)(function () {
53866    // Don't focus menu on first render.
53867    if (isInitialMountRef.current) {
53868      // Unless it was initialised as open.
53869      if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
53870        menuRef.current.focus();
53871      }
53872
53873      return;
53874    } // Focus menu on open.
53875
53876
53877    if (isOpen) {
53878      // istanbul ignore else
53879      if (menuRef.current) {
53880        menuRef.current.focus();
53881      }
53882
53883      return;
53884    } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
53885
53886
53887    if (environment.document.activeElement === menuRef.current) {
53888      // istanbul ignore else
53889      if (toggleButtonRef.current) {
53890        shouldBlurRef.current = false;
53891        toggleButtonRef.current.focus();
53892      }
53893    } // eslint-disable-next-line react-hooks/exhaustive-deps
53894
53895  }, [isOpen]);
53896  (0,external_React_.useEffect)(function () {
53897    if (isInitialMountRef.current) {
53898      return;
53899    }
53900
53901    previousResultCountRef.current = items.length;
53902  }); // Add mouse/touch events to document.
53903
53904  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
53905    dispatch({
53906      type: MenuBlur
53907    });
53908  });
53909  var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
53910
53911  (0,external_React_.useEffect)(function () {
53912    isInitialMountRef.current = false;
53913  }, []); // Reset itemRefs on close.
53914
53915  (0,external_React_.useEffect)(function () {
53916    if (!isOpen) {
53917      itemRefs.current = {};
53918    }
53919  }, [isOpen]); // Event handler functions.
53920
53921  var toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(function () {
53922    return {
53923      ArrowDown: function ArrowDown(event) {
53924        event.preventDefault();
53925        dispatch({
53926          type: ToggleButtonKeyDownArrowDown,
53927          getItemNodeFromIndex: getItemNodeFromIndex,
53928          shiftKey: event.shiftKey
53929        });
53930      },
53931      ArrowUp: function ArrowUp(event) {
53932        event.preventDefault();
53933        dispatch({
53934          type: ToggleButtonKeyDownArrowUp,
53935          getItemNodeFromIndex: getItemNodeFromIndex,
53936          shiftKey: event.shiftKey
53937        });
53938      }
53939    };
53940  }, [dispatch, getItemNodeFromIndex]);
53941  var menuKeyDownHandlers = (0,external_React_.useMemo)(function () {
53942    return {
53943      ArrowDown: function ArrowDown(event) {
53944        event.preventDefault();
53945        dispatch({
53946          type: MenuKeyDownArrowDown,
53947          getItemNodeFromIndex: getItemNodeFromIndex,
53948          shiftKey: event.shiftKey
53949        });
53950      },
53951      ArrowUp: function ArrowUp(event) {
53952        event.preventDefault();
53953        dispatch({
53954          type: MenuKeyDownArrowUp,
53955          getItemNodeFromIndex: getItemNodeFromIndex,
53956          shiftKey: event.shiftKey
53957        });
53958      },
53959      Home: function Home(event) {
53960        event.preventDefault();
53961        dispatch({
53962          type: MenuKeyDownHome,
53963          getItemNodeFromIndex: getItemNodeFromIndex
53964        });
53965      },
53966      End: function End(event) {
53967        event.preventDefault();
53968        dispatch({
53969          type: MenuKeyDownEnd,
53970          getItemNodeFromIndex: getItemNodeFromIndex
53971        });
53972      },
53973      Escape: function Escape() {
53974        dispatch({
53975          type: MenuKeyDownEscape
53976        });
53977      },
53978      Enter: function Enter(event) {
53979        event.preventDefault();
53980        dispatch({
53981          type: MenuKeyDownEnter
53982        });
53983      },
53984      ' ': function _(event) {
53985        event.preventDefault();
53986        dispatch({
53987          type: MenuKeyDownSpaceButton
53988        });
53989      }
53990    };
53991  }, [dispatch, getItemNodeFromIndex]); // Action functions.
53992
53993  var toggleMenu = (0,external_React_.useCallback)(function () {
53994    dispatch({
53995      type: FunctionToggleMenu
53996    });
53997  }, [dispatch]);
53998  var closeMenu = (0,external_React_.useCallback)(function () {
53999    dispatch({
54000      type: FunctionCloseMenu
54001    });
54002  }, [dispatch]);
54003  var openMenu = (0,external_React_.useCallback)(function () {
54004    dispatch({
54005      type: FunctionOpenMenu
54006    });
54007  }, [dispatch]);
54008  var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) {
54009    dispatch({
54010      type: FunctionSetHighlightedIndex,
54011      highlightedIndex: newHighlightedIndex
54012    });
54013  }, [dispatch]);
54014  var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) {
54015    dispatch({
54016      type: FunctionSelectItem,
54017      selectedItem: newSelectedItem
54018    });
54019  }, [dispatch]);
54020  var reset = (0,external_React_.useCallback)(function () {
54021    dispatch({
54022      type: FunctionReset
54023    });
54024  }, [dispatch]);
54025  var setInputValue = (0,external_React_.useCallback)(function (newInputValue) {
54026    dispatch({
54027      type: FunctionSetInputValue,
54028      inputValue: newInputValue
54029    });
54030  }, [dispatch]); // Getter functions.
54031
54032  var getLabelProps = (0,external_React_.useCallback)(function (labelProps) {
54033    return extends_extends({
54034      id: elementIds.labelId,
54035      htmlFor: elementIds.toggleButtonId
54036    }, labelProps);
54037  }, [elementIds]);
54038  var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
54039    var _extends2;
54040
54041    var _ref = _temp === void 0 ? {} : _temp,
54042        onMouseLeave = _ref.onMouseLeave,
54043        _ref$refKey = _ref.refKey,
54044        refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
54045        onKeyDown = _ref.onKeyDown,
54046        onBlur = _ref.onBlur,
54047        ref = _ref.ref,
54048        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"]);
54049
54050    var _ref2 = _temp2 === void 0 ? {} : _temp2,
54051        _ref2$suppressRefErro = _ref2.suppressRefError,
54052        suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
54053
54054    var latestState = latest.current.state;
54055
54056    var menuHandleKeyDown = function menuHandleKeyDown(event) {
54057      var key = normalizeArrowKey(event);
54058
54059      if (key && menuKeyDownHandlers[key]) {
54060        menuKeyDownHandlers[key](event);
54061      } else if (isAcceptedCharacterKey(key)) {
54062        dispatch({
54063          type: MenuKeyDownCharacter,
54064          key: key,
54065          getItemNodeFromIndex: getItemNodeFromIndex
54066        });
54067      }
54068    };
54069
54070    var menuHandleBlur = function menuHandleBlur() {
54071      // if the blur was a result of selection, we don't trigger this action.
54072      if (shouldBlurRef.current === false) {
54073        shouldBlurRef.current = true;
54074        return;
54075      }
54076
54077      var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
54078      /* istanbul ignore else */
54079
54080      if (shouldBlur) {
54081        dispatch({
54082          type: MenuBlur
54083        });
54084      }
54085    };
54086
54087    var menuHandleMouseLeave = function menuHandleMouseLeave() {
54088      dispatch({
54089        type: MenuMouseLeave
54090      });
54091    };
54092
54093    setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
54094    return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
54095      menuRef.current = menuNode;
54096    }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
54097      'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
54098    }, {
54099      onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
54100      onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
54101      onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
54102    }, rest);
54103  }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
54104  var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) {
54105    var _extends3;
54106
54107    var _ref3 = _temp3 === void 0 ? {} : _temp3,
54108        onClick = _ref3.onClick,
54109        onKeyDown = _ref3.onKeyDown,
54110        _ref3$refKey = _ref3.refKey,
54111        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
54112        ref = _ref3.ref,
54113        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["onClick", "onKeyDown", "refKey", "ref"]);
54114
54115    var _ref4 = _temp4 === void 0 ? {} : _temp4,
54116        _ref4$suppressRefErro = _ref4.suppressRefError,
54117        suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
54118
54119    var toggleButtonHandleClick = function toggleButtonHandleClick() {
54120      dispatch({
54121        type: ToggleButtonClick
54122      });
54123    };
54124
54125    var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
54126      var key = normalizeArrowKey(event);
54127
54128      if (key && toggleButtonKeyDownHandlers[key]) {
54129        toggleButtonKeyDownHandlers[key](event);
54130      } else if (isAcceptedCharacterKey(key)) {
54131        dispatch({
54132          type: ToggleButtonKeyDownCharacter,
54133          key: key,
54134          getItemNodeFromIndex: getItemNodeFromIndex
54135        });
54136      }
54137    };
54138
54139    var toggleProps = extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
54140      toggleButtonRef.current = toggleButtonNode;
54141    }), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest);
54142
54143    if (!rest.disabled) {
54144      toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
54145      toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
54146    }
54147
54148    setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
54149    return toggleProps;
54150  }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
54151  var getItemProps = (0,external_React_.useCallback)(function (_temp5) {
54152    var _extends4;
54153
54154    var _ref5 = _temp5 === void 0 ? {} : _temp5,
54155        item = _ref5.item,
54156        index = _ref5.index,
54157        onMouseMove = _ref5.onMouseMove,
54158        onClick = _ref5.onClick,
54159        _ref5$refKey = _ref5.refKey,
54160        refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
54161        ref = _ref5.ref,
54162        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, ["item", "index", "onMouseMove", "onClick", "refKey", "ref"]);
54163
54164    var _latest$current = latest.current,
54165        latestState = _latest$current.state,
54166        latestProps = _latest$current.props;
54167
54168    var itemHandleMouseMove = function itemHandleMouseMove() {
54169      if (index === latestState.highlightedIndex) {
54170        return;
54171      }
54172
54173      shouldScrollRef.current = false;
54174      dispatch({
54175        type: ItemMouseMove,
54176        index: index
54177      });
54178    };
54179
54180    var itemHandleClick = function itemHandleClick() {
54181      dispatch({
54182        type: ItemClick,
54183        index: index
54184      });
54185    };
54186
54187    var itemIndex = getItemIndex(index, item, latestProps.items);
54188
54189    if (itemIndex < 0) {
54190      throw new Error('Pass either item or item index in getItemProps!');
54191    }
54192
54193    var itemProps = extends_extends((_extends4 = {
54194      role: 'option',
54195      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
54196      id: elementIds.getItemId(itemIndex)
54197    }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
54198      if (itemNode) {
54199        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
54200      }
54201    }), _extends4), rest);
54202
54203    if (!rest.disabled) {
54204      itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
54205      itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
54206    }
54207
54208    return itemProps;
54209  }
54209, [dispatch, latest, shouldScrollRef, elementIds]);
54210  return {
54211    // prop getters.
54212    getToggleButtonProps: getToggleButtonProps,
54213    getLabelProps: getLabelProps,
54214    getMenuProps: getMenuProps,
54215    getItemProps: getItemProps,
54216    // actions.
54217    toggleMenu: toggleMenu,
54218    openMenu: openMenu,
54219    closeMenu: closeMenu,
54220    setHighlightedIndex: setHighlightedIndex,
54221    selectItem: selectItem,
54222    reset: reset,
54223    setInputValue: setInputValue,
54224    // state.
54225    highlightedIndex: highlightedIndex,
54226    isOpen: isOpen,
54227    selectedItem: selectedItem,
54228    inputValue: inputValue
54229  };
54230}
54231
54232var InputKeyDownArrowDown =  false ? 0 : 0;
54233var InputKeyDownArrowUp =  false ? 0 : 1;
54234var InputKeyDownEscape =  false ? 0 : 2;
54235var InputKeyDownHome =  false ? 0 : 3;
54236var InputKeyDownEnd =  false ? 0 : 4;
54237var InputKeyDownEnter =  false ? 0 : 5;
54238var InputChange =  false ? 0 : 6;
54239var InputBlur =  false ? 0 : 7;
54240var MenuMouseLeave$1 =  false ? 0 : 8;
54241var ItemMouseMove$1 =  false ? 0 : 9;
54242var ItemClick$1 =  false ? 0 : 10;
54243var ToggleButtonClick$1 =  false ? 0 : 11;
54244var FunctionToggleMenu$1 =  false ? 0 : 12;
54245var FunctionOpenMenu$1 =  false ? 0 : 13;
54246var FunctionCloseMenu$1 =  false ? 0 : 14;
54247var FunctionSetHighlightedIndex$1 =  false ? 0 : 15;
54248var FunctionSelectItem$1 =  false ? 0 : 16;
54249var FunctionSetInputValue$1 =  false ? 0 : 17;
54250var FunctionReset$1 =  false ? 0 : 18;
54251var ControlledPropUpdatedSelectedItem =  false ? 0 : 19;
54252
54253var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
54254  __proto__: null,
54255  InputKeyDownArrowDown: InputKeyDownArrowDown,
54256  InputKeyDownArrowUp: InputKeyDownArrowUp,
54257  InputKeyDownEscape: InputKeyDownEscape,
54258  InputKeyDownHome: InputKeyDownHome,
54259  InputKeyDownEnd: InputKeyDownEnd,
54260  InputKeyDownEnter: InputKeyDownEnter,
54261  InputChange: InputChange,
54262  InputBlur: InputBlur,
54263  MenuMouseLeave: MenuMouseLeave$1,
54264  ItemMouseMove: ItemMouseMove$1,
54265  ItemClick: ItemClick$1,
54266  ToggleButtonClick: ToggleButtonClick$1,
54267  FunctionToggleMenu: FunctionToggleMenu$1,
54268  FunctionOpenMenu: FunctionOpenMenu$1,
54269  FunctionCloseMenu: FunctionCloseMenu$1,
54270  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
54271  FunctionSelectItem: FunctionSelectItem$1,
54272  FunctionSetInputValue: FunctionSetInputValue$1,
54273  FunctionReset: FunctionReset$1,
54274  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
54275});
54276
54277function getInitialState$1(props) {
54278  var initialState = getInitialState(props);
54279  var selectedItem = initialState.selectedItem;
54280  var inputValue = initialState.inputValue;
54281
54282  if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
54283    inputValue = props.itemToString(selectedItem);
54284  }
54285
54286  return extends_extends({}, initialState, {
54287    inputValue: inputValue
54288  });
54289}
54290
54291var propTypes$1 = {
54292  items: (prop_types_default()).array.isRequired,
54293  itemToString: (prop_types_default()).func,
54294  getA11yStatusMessage: (prop_types_default()).func,
54295  getA11ySelectionMessage: (prop_types_default()).func,
54296  circularNavigation: (prop_types_default()).bool,
54297  highlightedIndex: (prop_types_default()).number,
54298  defaultHighlightedIndex: (prop_types_default()).number,
54299  initialHighlightedIndex: (prop_types_default()).number,
54300  isOpen: (prop_types_default()).bool,
54301  defaultIsOpen: (prop_types_default()).bool,
54302  initialIsOpen: (prop_types_default()).bool,
54303  selectedItem: (prop_types_default()).any,
54304  initialSelectedItem: (prop_types_default()).any,
54305  defaultSelectedItem: (prop_types_default()).any,
54306  inputValue: (prop_types_default()).string,
54307  defaultInputValue: (prop_types_default()).string,
54308  initialInputValue: (prop_types_default()).string,
54309  id: (prop_types_default()).string,
54310  labelId: (prop_types_default()).string,
54311  menuId: (prop_types_default()).string,
54312  getItemId: (prop_types_default()).func,
54313  inputId: (prop_types_default()).string,
54314  toggleButtonId: (prop_types_default()).string,
54315  stateReducer: (prop_types_default()).func,
54316  onSelectedItemChange: (prop_types_default()).func,
54317  onHighlightedIndexChange: (prop_types_default()).func,
54318  onStateChange: (prop_types_default()).func,
54319  onIsOpenChange: (prop_types_default()).func,
54320  onInputValueChange: (prop_types_default()).func,
54321  environment: prop_types_default().shape({
54322    addEventListener: (prop_types_default()).func,
54323    removeEventListener: (prop_types_default()).func,
54324    document: prop_types_default().shape({
54325      getElementById: (prop_types_default()).func,
54326      activeElement: (prop_types_default()).any,
54327      body: (prop_types_default()).any
54328    })
54329  })
54330};
54331/**
54332 * The useCombobox version of useControlledReducer, which also
54333 * checks if the controlled prop selectedItem changed between
54334 * renders. If so, it will also update inputValue with its
54335 * string equivalent. It uses the common useEnhancedReducer to
54336 * compute the rest of the state.
54337 *
54338 * @param {Function} reducer Reducer function from downshift.
54339 * @param {Object} initialState Initial state of the hook.
54340 * @param {Object} props The hook props.
54341 * @returns {Array} An array with the state and an action dispatcher.
54342 */
54343
54344function useControlledReducer$1(reducer, initialState, props) {
54345  var previousSelectedItemRef = (0,external_React_.useRef)();
54346
54347  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
54348      state = _useEnhancedReducer[0],
54349      dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
54350
54351
54352  (0,external_React_.useEffect)(function () {
54353    if (isControlledProp(props, 'selectedItem')) {
54354      if (previousSelectedItemRef.current !== props.selectedItem) {
54355        dispatch({
54356          type: ControlledPropUpdatedSelectedItem,
54357          inputValue: props.itemToString(props.selectedItem)
54358        });
54359      }
54360
54361      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
54362    }
54363  });
54364  return [getState(state, props), dispatch];
54365} // eslint-disable-next-line import/no-mutable-exports
54366
54367
54368var validatePropTypes$1 = downshift_esm_noop;
54369/* istanbul ignore next */
54370
54371if (false) {}
54372
54373var defaultProps$2 = extends_extends({}, defaultProps, {
54374  getA11yStatusMessage: getA11yStatusMessage,
54375  circularNavigation: true
54376});
54377
54378/* eslint-disable complexity */
54379
54380function downshiftUseComboboxReducer(state, action) {
54381  var type = action.type,
54382      props = action.props,
54383      shiftKey = action.shiftKey;
54384  var changes;
54385
54386  switch (type) {
54387    case ItemClick$1:
54388      changes = {
54389        isOpen: getDefaultValue(props, 'isOpen'),
54390        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
54391        selectedItem: props.items[action.index],
54392        inputValue: props.itemToString(props.items[action.index])
54393      };
54394      break;
54395
54396    case InputKeyDownArrowDown:
54397      if (state.isOpen) {
54398        changes = {
54399          highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
54400        };
54401      } else {
54402        changes = {
54403          highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
54404          isOpen: props.items.length >= 0
54405        };
54406      }
54407
54408      break;
54409
54410    case InputKeyDownArrowUp:
54411      if (state.isOpen) {
54412        changes = {
54413          highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
54414        };
54415      } else {
54416        changes = {
54417          highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
54418          isOpen: props.items.length >= 0
54419        };
54420      }
54421
54422      break;
54423
54424    case InputKeyDownEnter:
54425      changes = extends_extends({}, state.isOpen && state.highlightedIndex >= 0 && {
54426        selectedItem: props.items[state.highlightedIndex],
54427        isOpen: getDefaultValue(props, 'isOpen'),
54428        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
54429        inputValue: props.itemToString(props.items[state.highlightedIndex])
54430      });
54431      break;
54432
54433    case InputKeyDownEscape:
54434      changes = extends_extends({
54435        isOpen: false,
54436        highlightedIndex: -1
54437      }, !state.isOpen && {
54438        selectedItem: null,
54439        inputValue: ''
54440      });
54441      break;
54442
54443    case InputKeyDownHome:
54444      changes = {
54445        highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
54446      };
54447      break;
54448
54449    case InputKeyDownEnd:
54450      changes = {
54451        highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
54452      };
54453      break;
54454
54455    case InputBlur:
54456      changes = extends_extends({
54457        isOpen: false,
54458        highlightedIndex: -1
54459      }, state.highlightedIndex >= 0 && action.selectItem && {
54460        selectedItem: props.items[state.highlightedIndex],
54461        inputValue: props.itemToString(props.items[state.highlightedIndex])
54462      });
54463      break;
54464
54465    case InputChange:
54466      changes = {
54467        isOpen: true,
54468        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
54469        inputValue: action.inputValue
54470      };
54471      break;
54472
54473    case FunctionSelectItem$1:
54474      changes = {
54475        selectedItem: action.selectedItem,
54476        inputValue: props.itemToString(action.selectedItem)
54477      };
54478      break;
54479
54480    case ControlledPropUpdatedSelectedItem:
54481      changes = {
54482        inputValue: action.inputValue
54483      };
54484      break;
54485
54486    default:
54487      return downshiftCommonReducer(state, action, stateChangeTypes$2);
54488  }
54489
54490  return extends_extends({}, state, changes);
54491}
54492/* eslint-enable complexity */
54493
54494useCombobox.stateChangeTypes = stateChangeTypes$2;
54495
54496function useCombobox(userProps) {
54497  if (userProps === void 0) {
54498    userProps = {};
54499  }
54500
54501  validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
54502
54503  var props = extends_extends({}, defaultProps$2, userProps);
54504
54505  var initialIsOpen = props.initialIsOpen,
54506      defaultIsOpen = props.defaultIsOpen,
54507      items = props.items,
54508      scrollIntoView = props.scrollIntoView,
54509      environment = props.environment,
54510      getA11yStatusMessage = props.getA11yStatusMessage,
54511      getA11ySelectionMessage = props.getA11ySelectionMessage,
54512      itemToString = props.itemToString; // Initial state depending on controlled props.
54513
54514  var initialState = getInitialState$1(props);
54515
54516  var _useControlledReducer = useControlledReducer$1(downshiftUseComboboxReducer, initialState, props),
54517      state = _useControlledReducer[0],
54518      dispatch = _useControlledReducer[1];
54519
54520  var isOpen = state.isOpen,
54521      highlightedIndex = state.highlightedIndex,
54522      selectedItem = state.selectedItem,
54523      inputValue = state.inputValue; // Element refs.
54524
54525  var menuRef = (0,external_React_.useRef)(null);
54526  var itemRefs = (0,external_React_.useRef)({});
54527  var inputRef = (0,external_React_.useRef)(null);
54528  var toggleButtonRef = (0,external_React_.useRef)(null);
54529  var comboboxRef = (0,external_React_.useRef)(null);
54530  var isInitialMountRef = (0,external_React_.useRef)(true); // prevent id re-generation between renders.
54531
54532  var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
54533
54534  var previousResultCountRef = (0,external_React_.useRef)(); // utility callback to get item element.
54535
54536  var latest = downshift_esm_useLatestRef({
54537    state: state,
54538    props: props
54539  });
54540  var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) {
54541    return itemRefs.current[elementIds.getItemId(index)];
54542  }, [elementIds]); // Effects.
54543  // Sets a11y status message on changes in state.
54544
54545  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({
54546    isInitialMount: isInitialMountRef.current,
54547    previousResultCount: previousResultCountRef.current,
54548    items: items,
54549    environment: environment,
54550    itemToString: itemToString
54551  }, state)); // Sets a11y status message on changes in selectedItem.
54552
54553  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({
54554    isInitialMount: isInitialMountRef.current,
54555    previousResultCount: previousResultCountRef.current,
54556    items: items,
54557    environment: environment,
54558    itemToString: itemToString
54559  }, state)); // Scroll on highlighted item if change comes from keyboard.
54560
54561  var shouldScrollRef = useScrollIntoView({
54562    menuElement: menuRef.current,
54563    highlightedIndex: highlightedIndex,
54564    isOpen: isOpen,
54565    itemRefs: itemRefs,
54566    scrollIntoView: scrollIntoView,
54567    getItemNodeFromIndex: getItemNodeFromIndex
54568  });
54569  useControlPropsValidator({
54570    isInitialMount: isInitialMountRef.current,
54571    props: props,
54572    state: state
54573  }); // Focus the input on first render if required.
54574
54575  (0,external_React_.useEffect)(function () {
54576    var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
54577
54578    if (focusOnOpen && inputRef.current) {
54579      inputRef.current.focus();
54580    } // eslint-disable-next-line react-hooks/exhaustive-deps
54581
54582  }, []);
54583  (0,external_React_.useEffect)(function () {
54584    if (isInitialMountRef.current) {
54585      return;
54586    }
54587
54588    previousResultCountRef.current = items.length;
54589  }); // Add mouse/touch events to document.
54590
54591  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
54592    dispatch({
54593      type: InputBlur,
54594      selectItem: false
54595    });
54596  });
54597  var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
54598
54599  (0,external_React_.useEffect)(function () {
54600    isInitialMountRef.current = false;
54601  }, []); // Reset itemRefs on close.
54602
54603  (0,external_React_.useEffect)(function () {
54604    if (!isOpen) {
54605      itemRefs.current = {};
54606    }
54607  }, [isOpen]);
54608  /* Event handler functions */
54609
54610  var inputKeyDownHandlers = (0,external_React_.useMemo)(function () {
54611    return {
54612      ArrowDown: function ArrowDown(event) {
54613        event.preventDefault();
54614        dispatch({
54615          type: InputKeyDownArrowDown,
54616          shiftKey: event.shiftKey,
54617          getItemNodeFromIndex: getItemNodeFromIndex
54618        });
54619      },
54620      ArrowUp: function ArrowUp(event) {
54621        event.preventDefault();
54622        dispatch({
54623          type: InputKeyDownArrowUp,
54624          shiftKey: event.shiftKey,
54625          getItemNodeFromIndex: getItemNodeFromIndex
54626        });
54627      },
54628      Home: function Home(event) {
54629        if (!latest.current.state.isOpen) {
54630          return;
54631        }
54632
54633        event.preventDefault();
54634        dispatch({
54635          type: InputKeyDownHome,
54636          getItemNodeFromIndex: getItemNodeFromIndex
54637        });
54638      },
54639      End: function End(event) {
54640        if (!latest.current.state.isOpen) {
54641          return;
54642        }
54643
54644        event.preventDefault();
54645        dispatch({
54646          type: InputKeyDownEnd,
54647          getItemNodeFromIndex: getItemNodeFromIndex
54648        });
54649      },
54650      Escape: function Escape() {
54651        var latestState = latest.current.state;
54652
54653        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
54654          dispatch({
54655            type: InputKeyDownEscape
54656          });
54657        }
54658      },
54659      Enter: function Enter(event) {
54660        var latestState = latest.current.state; // if closed or no highlighted index, do nothing.
54661
54662        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
54663        ) {
54664            return;
54665          }
54666
54667        event.preventDefault();
54668        dispatch({
54669          type: InputKeyDownEnter,
54670          getItemNodeFromIndex: getItemNodeFromIndex
54671        });
54672      }
54673    };
54674  }
54674, [dispatch, latest, getItemNodeFromIndex]); // Getter props.
54675
54676  var getLabelProps = (0,external_React_.useCallback)(function (labelProps) {
54677    return extends_extends({
54678      id: elementIds.labelId,
54679      htmlFor: elementIds.inputId
54680    }, labelProps);
54681  }, [elementIds]);
54682  var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
54683    var _extends2;
54684
54685    var _ref = _temp === void 0 ? {} : _temp,
54686        onMouseLeave = _ref.onMouseLeave,
54687        _ref$refKey = _ref.refKey,
54688        refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
54689        ref = _ref.ref,
54690        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "ref"]);
54691
54692    var _ref2 = _temp2 === void 0 ? {} : _temp2,
54693        _ref2$suppressRefErro = _ref2.suppressRefError,
54694        suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
54695
54696    setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
54697    return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
54698      menuRef.current = menuNode;
54699    }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
54700      dispatch({
54701        type: MenuMouseLeave$1
54702      });
54703    }), _extends2), rest);
54704  }, [dispatch, setGetterPropCallInfo, elementIds]);
54705  var getItemProps = (0,external_React_.useCallback)(function (_temp3) {
54706    var _extends3, _ref4;
54707
54708    var _ref3 = _temp3 === void 0 ? {} : _temp3,
54709        item = _ref3.item,
54710        index = _ref3.index,
54711        _ref3$refKey = _ref3.refKey,
54712        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
54713        ref = _ref3.ref,
54714        onMouseMove = _ref3.onMouseMove,
54715        onClick = _ref3.onClick,
54716        onPress = _ref3.onPress,
54717        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"]);
54718
54719    var _latest$current = latest.current,
54720        latestProps = _latest$current.props,
54721        latestState = _latest$current.state;
54722    var itemIndex = getItemIndex(index, item, latestProps.items);
54723
54724    if (itemIndex < 0) {
54725      throw new Error('Pass either item or item index in getItemProps!');
54726    }
54727
54728    var onSelectKey =  'onClick';
54729    var customClickHandler =  onClick;
54730
54731    var itemHandleMouseMove = function itemHandleMouseMove() {
54732      if (index === latestState.highlightedIndex) {
54733        return;
54734      }
54735
54736      shouldScrollRef.current = false;
54737      dispatch({
54738        type: ItemMouseMove$1,
54739        index: index
54740      });
54741    };
54742
54743    var itemHandleClick = function itemHandleClick() {
54744      dispatch({
54745        type: ItemClick$1,
54746        index: index
54747      });
54748
54749      if (inputRef.current) {
54750        inputRef.current.focus();
54751      }
54752    };
54753
54754    return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
54755      if (itemNode) {
54756        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
54757      }
54758    }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
54759      onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove)
54760    }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest);
54761  }, [dispatch, latest, shouldScrollRef, elementIds]);
54762  var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp4) {
54763    var _extends4;
54764
54765    var _ref5 = _temp4 === void 0 ? {} : _temp4,
54766        onClick = _ref5.onClick,
54767        onPress = _ref5.onPress,
54768        _ref5$refKey = _ref5.refKey,
54769        refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
54770        ref = _ref5.ref,
54771        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, ["onClick", "onPress", "refKey", "ref"]);
54772
54773    var toggleButtonHandleClick = function toggleButtonHandleClick() {
54774      dispatch({
54775        type: ToggleButtonClick$1
54776      });
54777
54778      if (!latest.current.state.isOpen && inputRef.current) {
54779        inputRef.current.focus();
54780      }
54781    };
54782
54783    return extends_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
54784      toggleButtonRef.current = toggleButtonNode;
54785    }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && extends_extends({},  {
54786      onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
54787    }), rest);
54788  }
54788, [dispatch, latest, elementIds]);
54789  var getInputProps = (0,external_React_.useCallback)(function (_temp5, _temp6) {
54790    var _extends5;
54791
54792    var _ref6 = _temp5 === void 0 ? {} : _temp5,
54793        onKeyDown = _ref6.onKeyDown,
54794        onChange = _ref6.onChange,
54795        onInput = _ref6.onInput,
54796        onBlur = _ref6.onBlur,
54797        onChangeText = _ref6.onChangeText,
54798        _ref6$refKey = _ref6.refKey,
54799        refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
54800        ref = _ref6.ref,
54801        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref6, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]);
54802
54803    var _ref7 = _temp6 === void 0 ? {} : _temp6,
54804        _ref7$suppressRefErro = _ref7.suppressRefError,
54805        suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
54806
54807    setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
54808    var latestState = latest.current.state;
54809
54810    var inputHandleKeyDown = function inputHandleKeyDown(event) {
54811      var key = normalizeArrowKey(event);
54812
54813      if (key && inputKeyDownHandlers[key]) {
54814        inputKeyDownHandlers[key](event);
54815      }
54816    };
54817
54818    var inputHandleChange = function inputHandleChange(event) {
54819      dispatch({
54820        type: InputChange,
54821        inputValue:  event.target.value
54822      });
54823    };
54824
54825    var inputHandleBlur = function inputHandleBlur() {
54826      /* istanbul ignore else */
54827      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
54828        dispatch({
54829          type: InputBlur,
54830          selectItem: true
54831        });
54832      }
54833    };
54834    /* istanbul ignore next (preact) */
54835
54836
54837    var onChangeKey =  'onChange';
54838    var eventHandlers = {};
54839
54840    if (!rest.disabled) {
54841      var _eventHandlers;
54842
54843      eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
54844    }
54845
54846    return extends_extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
54847      inputRef.current = inputNode;
54848    }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
54849      'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
54850    }, {
54851      'aria-labelledby': elementIds.labelId,
54852      // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
54853      // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
54854      autoComplete: 'off',
54855      value: latestState.inputValue
54856    }, eventHandlers, rest);
54857  }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
54858  var getComboboxProps = (0,external_React_.useCallback)(function (_temp7, _temp8) {
54859    var _extends6;
54860
54861    var _ref8 = _temp7 === void 0 ? {} : _temp7,
54862        _ref8$refKey = _ref8.refKey,
54863        refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
54864        ref = _ref8.ref,
54865        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref8, ["refKey", "ref"]);
54866
54867    var _ref9 = _temp8 === void 0 ? {} : _temp8,
54868        _ref9$suppressRefErro = _ref9.suppressRefError,
54869        suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
54870
54871    setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
54872    return extends_extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
54873      comboboxRef.current = comboboxNode;
54874    }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
54875  }, [latest, setGetterPropCallInfo, elementIds]); // returns
54876
54877  var toggleMenu = (0,external_React_.useCallback)(function () {
54878    dispatch({
54879      type: FunctionToggleMenu$1
54880    });
54881  }
54881, [dispatch]);
54882  var closeMenu = (0,external_React_.useCallback)(function () {
54883    dispatch({
54884      type: FunctionCloseMenu$1
54885    });
54886  }, [dispatch]);
54887  var openMenu = (0,external_React_.useCallback)(function () {
54888    dispatch({
54889      type: FunctionOpenMenu$1
54890    });
54891  }, [dispatch]);
54892  var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) {
54893    dispatch({
54894      type: FunctionSetHighlightedIndex$1,
54895      highlightedIndex: newHighlightedIndex
54896    });
54897  }, [dispatch]);
54898  var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) {
54899    dispatch({
54900      type: FunctionSelectItem$1,
54901      selectedItem: newSelectedItem
54902    });
54903  }, [dispatch]);
54904  var setInputValue = (0,external_React_.useCallback)(function (newInputValue) {
54905    dispatch({
54906      type: FunctionSetInputValue$1,
54907      inputValue: newInputValue
54908    });
54909  }, [dispatch]);
54910  var reset = (0,external_React_.useCallback)(function () {
54911    dispatch({
54912      type: FunctionReset$1
54913    });
54914  }, [dispatch]);
54915  return {
54916    // prop getters.
54917    getItemProps: getItemProps,
54918    getLabelProps: getLabelProps,
54919    getMenuProps: getMenuProps,
54920    getInputProps: getInputProps,
54921    getComboboxProps: getComboboxProps,
54922    getToggleButtonProps: getToggleButtonProps,
54923    // actions.
54924    toggleMenu: toggleMenu,
54925    openMenu: openMenu,
54926    closeMenu: closeMenu,
54927    setHighlightedIndex: setHighlightedIndex,
54928    setInputValue: setInputValue,
54929    selectItem: selectItem,
54930    reset: reset,
54931    // state.
54932    highlightedIndex: highlightedIndex,
54933    isOpen: isOpen,
54934    selectedItem: selectedItem,
54935    inputValue: inputValue
54936  };
54937}
54938
54939var defaultStateValues = {
54940  activeIndex: -1,
54941  selectedItems: []
54942};
54943/**
54944 * Returns the initial value for a state key in the following order:
54945 * 1. controlled prop, 2. initial prop, 3. default prop, 4. default
54946 * value from Downshift.
54947 *
54948 * @param {Object} props Props passed to the hook.
54949 * @param {string} propKey Props key to generate the value for.
54950 * @returns {any} The initial value for that prop.
54951 */
54952
54953function getInitialValue$1(props, propKey) {
54954  return getInitialValue(props, propKey, defaultStateValues);
54955}
54956/**
54957 * Returns the default value for a state key in the following order:
54958 * 1. controlled prop, 2. default prop, 3. default value from Downshift.
54959 *
54960 * @param {Object} props Props passed to the hook.
54961 * @param {string} propKey Props key to generate the value for.
54962 * @returns {any} The initial value for that prop.
54963 */
54964
54965
54966function getDefaultValue$1(props, propKey) {
54967  return getDefaultValue(props, propKey, defaultStateValues);
54968}
54969/**
54970 * Gets the initial state based on the provided props. It uses initial, default
54971 * and controlled props related to state in order to compute the initial value.
54972 *
54973 * @param {Object} props Props passed to the hook.
54974 * @returns {Object} The initial state.
54975 */
54976
54977
54978function getInitialState$2(props) {
54979  var activeIndex = getInitialValue$1(props, 'activeIndex');
54980  var selectedItems = getInitialValue$1(props, 'selectedItems');
54981  return {
54982    activeIndex: activeIndex,
54983    selectedItems: selectedItems
54984  };
54985}
54986/**
54987 * Returns true if dropdown keydown operation is permitted. Should not be
54988 * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
54989 * input element with text content that is either highlighted or selection
54990 * cursor is not at the starting position.
54991 *
54992 * @param {KeyboardEvent} event The event from keydown.
54993 * @returns {boolean} Whether the operation is allowed.
54994 */
54995
54996
54997function isKeyDownOperationPermitted(event) {
54998  if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
54999    return false;
55000  }
55001
55002  var element = event.target;
55003
55004  if (element instanceof HTMLInputElement && // if element is a text input
55005  element.value !== '' && ( // and we have text in it
55006  // and cursor is either not at the start or is currently highlighting text.
55007  element.selectionStart !== 0 || element.selectionEnd !== 0)) {
55008    return false;
55009  }
55010
55011  return true;
55012}
55013/**
55014 * Returns a message to be added to aria-live region when item is removed.
55015 *
55016 * @param {Object} selectionParameters Parameters required to build the message.
55017 * @returns {string} The a11y message.
55018 */
55019
55020
55021function getA11yRemovalMessage(selectionParameters) {
55022  var removedSelectedItem = selectionParameters.removedSelectedItem,
55023      itemToStringLocal = selectionParameters.itemToString;
55024  return itemToStringLocal(removedSelectedItem) + " has been removed.";
55025}
55026
55027var propTypes$2 = {
55028  selectedItems: (prop_types_default()).array,
55029  initialSelectedItems: (prop_types_default()).array,
55030  defaultSelectedItems: (prop_types_default()).array,
55031  itemToString: (prop_types_default()).func,
55032  getA11yRemovalMessage: (prop_types_default()).func,
55033  stateReducer: (prop_types_default()).func,
55034  activeIndex: (prop_types_default()).number,
55035  initialActiveIndex: (prop_types_default()).number,
55036  defaultActiveIndex: (prop_types_default()).number,
55037  onActiveIndexChange: (prop_types_default()).func,
55038  onSelectedItemsChange: (prop_types_default()).func,
55039  keyNavigationNext: (prop_types_default()).string,
55040  keyNavigationPrevious: (prop_types_default()).string,
55041  environment: prop_types_default().shape({
55042    addEventListener: (prop_types_default()).func,
55043    removeEventListener: (prop_types_default()).func,
55044    document: prop_types_default().shape({
55045      getElementById: (prop_types_default()).func,
55046      activeElement: (prop_types_default()).any,
55047      body: (prop_types_default()).any
55048    })
55049  })
55050};
55051var defaultProps$3 = {
55052  itemToString: defaultProps.itemToString,
55053  stateReducer: defaultProps.stateReducer,
55054  environment: defaultProps.environment,
55055  getA11yRemovalMessage: getA11yRemovalMessage,
55056  keyNavigationNext: 'ArrowRight',
55057  keyNavigationPrevious: 'ArrowLeft'
55058}; // eslint-disable-next-line import/no-mutable-exports
55059
55060var validatePropTypes$2 = downshift_esm_noop;
55061/* istanbul ignore next */
55062
55063if (false) {}
55064
55065var SelectedItemClick =  false ? 0 : 0;
55066var SelectedItemKeyDownDelete =  false ? 0 : 1;
55067var SelectedItemKeyDownBackspace =  false ? 0 : 2;
55068var SelectedItemKeyDownNavigationNext =  false ? 0 : 3;
55069var SelectedItemKeyDownNavigationPrevious =  false ? 0 : 4;
55070var DropdownKeyDownNavigationPrevious =  false ? 0 : 5;
55071var DropdownKeyDownBackspace =  false ? 0 : 6;
55072var DropdownClick =  false ? 0 : 7;
55073var FunctionAddSelectedItem =  false ? 0 : 8;
55074var FunctionRemoveSelectedItem =  false ? 0 : 9;
55075var FunctionSetSelectedItems =  false ? 0 : 10;
55076var FunctionSetActiveIndex =  false ? 0 : 11;
55077var FunctionReset$2 =  false ? 0 : 12;
55078
55079var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
55080  __proto__: null,
55081  SelectedItemClick: SelectedItemClick,
55082  SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
55083  SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
55084  SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
55085  SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
55086  DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
55087  DropdownKeyDownBackspace: DropdownKeyDownBackspace,
55088  DropdownClick: DropdownClick,
55089  FunctionAddSelectedItem: FunctionAddSelectedItem,
55090  FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
55091  FunctionSetSelectedItems: FunctionSetSelectedItems,
55092  FunctionSetActiveIndex: FunctionSetActiveIndex,
55093  FunctionReset: FunctionReset$2
55094});
55095
55096/* eslint-disable complexity */
55097
55098function downshiftMultipleSelectionReducer(state, action) {
55099  var type = action.type,
55100      index = action.index,
55101      props = action.props,
55102      selectedItem = action.selectedItem;
55103  var activeIndex = state.activeIndex,
55104      selectedItems = state.selectedItems;
55105  var changes;
55106
55107  switch (type) {
55108    case SelectedItemClick:
55109      changes = {
55110        activeIndex: index
55111      };
55112      break;
55113
55114    case SelectedItemKeyDownNavigationPrevious:
55115      changes = {
55116        activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
55117      };
55118      break;
55119
55120    case SelectedItemKeyDownNavigationNext:
55121      changes = {
55122        activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
55123      };
55124      break;
55125
55126    case SelectedItemKeyDownBackspace:
55127    case SelectedItemKeyDownDelete:
55128      {
55129        var newActiveIndex = activeIndex;
55130
55131        if (selectedItems.length === 1) {
55132          newActiveIndex = -1;
55133        } else if (activeIndex === selectedItems.length - 1) {
55134          newActiveIndex = selectedItems.length - 2;
55135        }
55136
55137        changes = extends_extends({
55138          selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
55139        }, {
55140          activeIndex: newActiveIndex
55141        });
55142        break;
55143      }
55144
55145    case DropdownKeyDownNavigationPrevious:
55146      changes = {
55147        activeIndex: selectedItems.length - 1
55148      };
55149      break;
55150
55151    case DropdownKeyDownBackspace:
55152      changes = {
55153        selectedItems: selectedItems.slice(0, selectedItems.length - 1)
55154      };
55155      break;
55156
55157    case FunctionAddSelectedItem:
55158      changes = {
55159        selectedItems: [].concat(selectedItems, [selectedItem])
55160      };
55161      break;
55162
55163    case DropdownClick:
55164      changes = {
55165        activeIndex: -1
55166      };
55167      break;
55168
55169    case FunctionRemoveSelectedItem:
55170      {
55171        var _newActiveIndex = activeIndex;
55172        var selectedItemIndex = selectedItems.indexOf(selectedItem);
55173
55174        if (selectedItems.length === 1) {
55175          _newActiveIndex = -1;
55176        } else if (selectedItemIndex === selectedItems.length - 1) {
55177          _newActiveIndex = selectedItems.length - 2;
55178        }
55179
55180        changes = extends_extends({
55181          selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1))
55182        }, {
55183          activeIndex: _newActiveIndex
55184        });
55185        break;
55186      }
55187
55188    case FunctionSetSelectedItems:
55189      {
55190        var newSelectedItems = action.selectedItems;
55191        changes = {
55192          selectedItems: newSelectedItems
55193        };
55194        break;
55195      }
55196
55197    case FunctionSetActiveIndex:
55198      {
55199        var _newActiveIndex2 = action.activeIndex;
55200        changes = {
55201          activeIndex: _newActiveIndex2
55202        };
55203        break;
55204      }
55205
55206    case FunctionReset$2:
55207      changes = {
55208        activeIndex: getDefaultValue$1(props, 'activeIndex'),
55209        selectedItems: getDefaultValue$1(props, 'selectedItems')
55210      };
55211      break;
55212
55213    default:
55214      throw new Error('Reducer called without proper action type.');
55215  }
55216
55217  return extends_extends({}, state, changes);
55218}
55219
55220useMultipleSelection.stateChangeTypes = stateChangeTypes$3;
55221
55222function useMultipleSelection(userProps) {
55223  if (userProps === void 0) {
55224    userProps = {};
55225  }
55226
55227  validatePropTypes$2(userProps, useMultipleSelection); // Props defaults and destructuring.
55228
55229  var props = extends_extends({}, defaultProps$3, userProps);
55230
55231  var getA11yRemovalMessage = props.getA11yRemovalMessage,
55232      itemToString = props.itemToString,
55233      environment = props.environment,
55234      keyNavigationNext = props.keyNavigationNext,
55235      keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
55236
55237  var _useControlledReducer = useControlledReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
55238      state = _useControlledReducer[0],
55239      dispatch = _useControlledReducer[1];
55240
55241  var activeIndex = state.activeIndex,
55242      selectedItems = state.selectedItems; // Refs.
55243
55244  var isInitialMountRef = (0,external_React_.useRef)(true);
55245  var dropdownRef = (0,external_React_.useRef)(null);
55246  var previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems);
55247  var selectedItemRefs = (0,external_React_.useRef)();
55248  selectedItemRefs.current = [];
55249  var latest = downshift_esm_useLatestRef({
55250    state: state,
55251    props: props
55252  }); // Effects.
55253
55254  /* Sets a11y status message on changes in selectedItem. */
55255
55256  (0,external_React_.useEffect)(function () {
55257    if (isInitialMountRef.current) {
55258      return;
55259    }
55260
55261    if (selectedItems.length < previousSelectedItemsRef.current.length) {
55262      var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
55263        return selectedItems.indexOf(item) < 0;
55264      });
55265      setStatus(getA11yRemovalMessage({
55266        itemToString: itemToString,
55267        resultCount: selectedItems.length,
55268        removedSelectedItem: removedSelectedItem,
55269        activeIndex: activeIndex,
55270        activeSelectedItem: selectedItems[activeIndex]
55271      }), environment.document);
55272    }
55273
55274    previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
55275  }, [selectedItems.length]); // Sets focus on active item.
55276
55277  (0,external_React_.useEffect)(function () {
55278    if (isInitialMountRef.current) {
55279      return;
55280    }
55281
55282    if (activeIndex === -1 && dropdownRef.current) {
55283      dropdownRef.current.focus();
55284    } else if (selectedItemRefs.current[activeIndex]) {
55285      selectedItemRefs.current[activeIndex].focus();
55286    }
55287  }, [activeIndex]);
55288  useControlPropsValidator({
55289    isInitialMount: isInitialMountRef.current,
55290    props: props,
55291    state: state
55292  });
55293  var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
55294
55295  (0,external_React_.useEffect)(function () {
55296    isInitialMountRef.current = false;
55297  }, []); // Event handler functions.
55298
55299  var selectedItemKeyDownHandlers = (0,external_React_.useMemo)(function () {
55300    var _ref;
55301
55302    return _ref = {}, _ref[keyNavigationPrevious] = function () {
55303      dispatch({
55304        type: SelectedItemKeyDownNavigationPrevious
55305      });
55306    }, _ref[keyNavigationNext] = function () {
55307      dispatch({
55308        type: SelectedItemKeyDownNavigationNext
55309      });
55310    }, _ref.Delete = function Delete() {
55311      dispatch({
55312        type: SelectedItemKeyDownDelete
55313      });
55314    }, _ref.Backspace = function Backspace() {
55315      dispatch({
55316        type: SelectedItemKeyDownBackspace
55317      });
55318    }, _ref;
55319  }, [dispatch, keyNavigationNext, keyNavigationPrevious]);
55320  var dropdownKeyDownHandlers = (0,external_React_.useMemo)(function () {
55321    var _ref2;
55322
55323    return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
55324      if (isKeyDownOperationPermitted(event)) {
55325        dispatch({
55326          type: DropdownKeyDownNavigationPrevious
55327        });
55328      }
55329    }, _ref2.Backspace = function Backspace(event) {
55330      if (isKeyDownOperationPermitted(event)) {
55331        dispatch({
55332          type: DropdownKeyDownBackspace
55333        });
55334      }
55335    }, _ref2;
55336  }
55336, [dispatch, keyNavigationPrevious]); // Getter props.
55337
55338  var getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) {
55339    var _extends2;
55340
55341    var _ref3 = _temp === void 0 ? {} : _temp,
55342        _ref3$refKey = _ref3.refKey,
55343        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
55344        ref = _ref3.ref,
55345        onClick = _ref3.onClick,
55346        onKeyDown = _ref3.onKeyDown,
55347        selectedItem = _ref3.selectedItem,
55348        index = _ref3.index,
55349        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"]);
55350
55351    var latestState = latest.current.state;
55352    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
55353
55354    if (itemIndex < 0) {
55355      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
55356    }
55357
55358    var selectedItemHandleClick = function selectedItemHandleClick() {
55359      dispatch({
55360        type: SelectedItemClick,
55361        index: index
55362      });
55363    };
55364
55365    var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) {
55366      var key = normalizeArrowKey(event);
55367
55368      if (key && selectedItemKeyDownHandlers[key]) {
55369        selectedItemKeyDownHandlers[key](event);
55370      }
55371    };
55372
55373    return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
55374      if (selectedItemNode) {
55375        selectedItemRefs.current.push(selectedItemNode);
55376      }
55377    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
55378  }, [dispatch, latest, selectedItemKeyDownHandlers]);
55379  var getDropdownProps = (0,external_React_.useCallback)(function (_temp2, _temp3) {
55380    var _extends3;
55381
55382    var _ref4 = _temp2 === void 0 ? {} : _temp2,
55383        _ref4$refKey = _ref4.refKey,
55384        refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
55385        ref = _ref4.ref,
55386        onKeyDown = _ref4.onKeyDown,
55387        onClick = _ref4.onClick,
55388        _ref4$preventKeyActio = _ref4.preventKeyAction,
55389        preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
55390        rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref4, ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]);
55391
55392    var _ref5 = _temp3 === void 0 ? {} : _temp3,
55393        _ref5$suppressRefErro = _ref5.suppressRefError,
55394        suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
55395
55396    setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
55397
55398    var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) {
55399      var key = normalizeArrowKey(event);
55400
55401      if (key && dropdownKeyDownHandlers[key]) {
55402        dropdownKeyDownHandlers[key](event);
55403      }
55404    };
55405
55406    var dropdownHandleClick = function dropdownHandleClick() {
55407      dispatch({
55408        type: DropdownClick
55409      });
55410    };
55411
55412    return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
55413      if (dropdownNode) {
55414        dropdownRef.current = dropdownNode;
55415      }
55416    }), _extends3), !preventKeyAction && {
55417      onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
55418      onClick: callAllEventHandlers(onClick, dropdownHandleClick)
55419    }, rest);
55420  }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
55421
55422  var addSelectedItem = (0,external_React_.useCallback)(function (selectedItem) {
55423    dispatch({
55424      type: FunctionAddSelectedItem,
55425      selectedItem: selectedItem
55426    });
55427  }, [dispatch]);
55428  var removeSelectedItem = (0,external_React_.useCallback)(function (selectedItem) {
55429    dispatch({
55430      type: FunctionRemoveSelectedItem,
55431      selectedItem: selectedItem
55432    });
55433  }, [dispatch]);
55434  var setSelectedItems = (0,external_React_.useCallback)(function (newSelectedItems) {
55435    dispatch({
55436      type: FunctionSetSelectedItems,
55437      selectedItems: newSelectedItems
55438    });
55439  }
55439, [dispatch]);
55440  var setActiveIndex = (0,external_React_.useCallback)(function (newActiveIndex) {
55441    dispatch({
55442      type: FunctionSetActiveIndex,
55443      activeIndex: newActiveIndex
55444    });
55445  }, [dispatch]);
55446  var reset = (0,external_React_.useCallback)(function () {
55447    dispatch({
55448      type: FunctionReset$2
55449    });
55450  }, [dispatch]);
55451  return {
55452    getSelectedItemProps: getSelectedItemProps,
55453    getDropdownProps: getDropdownProps,
55454    addSelectedItem: addSelectedItem,
55455    removeSelectedItem: removeSelectedItem,
55456    setSelectedItems: setSelectedItems,
55457    setActiveIndex: setActiveIndex,
55458    reset: reset,
55459    selectedItems: selectedItems,
55460    activeIndex: activeIndex
55461  };
55462}
55463
55464/* harmony default export */ const downshift_esm = ((/* unused pure expression or super */ null && (Downshift)));
55465
55466
55467;// CONCATENATED MODULE: ./packages/components/build-module/custom-select-control/styles.js
55468
55469/**
55470 * External dependencies
55471 */
55472
55473/**
55474 * Internal dependencies
55475 */
55476
55477
55478const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/emotion_react_browser_esm_css(Container, "{min-width:130px;}" + ( true ? "" : 0),  true ? "" : 0) : '';
55479const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser_esm(input_base,  true ? {
55480  target: "eswuck60"
55481} : 0)(backCompatMinWidth, ";" + ( true ? "" : 0));
55482
55483;// CONCATENATED MODULE: ./packages/components/build-module/custom-select-control/index.js
55484
55485// @ts-nocheck
55486/**
55487 * External dependencies
55488 */
55489
55490
55491
55492/**
55493 * WordPress dependencies
55494 */
55495
55496
55497
55498
55499
55500/**
55501 * Internal dependencies
55502 */
55503
55504
55505
55506
55507
55508const custom_select_control_itemToString = item => item?.name;
55509// This is needed so that in Windows, where
55510// the menu does not necessarily open on
55511// key up/down, you can still switch between
55512// options with the menu closed.
55513const custom_select_control_stateReducer = ({
55514  selectedItem
55515}, {
55516  type,
55517  changes,
55518  props: {
55519    items
55520  }
55521}) => {
55522  switch (type) {
55523    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
55524      // If we already have a selected item, try to select the next one,
55525      // without circular navigation. Otherwise, select the first item.
55526      return {
55527        selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
55528      };
55529    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
55530      // If we already have a selected item, try to select the previous one,
55531      // without circular navigation. Otherwise, select the last item.
55532      return {
55533        selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
55534      };
55535    default:
55536      return changes;
55537  }
55538};
55539function CustomSelectControl(props) {
55540  const {
55541    /** Start opting into the larger default height that will become the default size in a future version. */
55542    __next36pxDefaultSize = false,
55543    /** Start opting into the unconstrained width that will become the default in a future version. */
55544    __nextUnconstrainedWidth = false,
55545    className,
55546    hideLabelFromVision,
55547    label,
55548    describedBy,
55549    options: items,
55550    onChange: onSelectedItemChange,
55551    /** @type {import('../select-control/types').SelectControlProps.size} */
55552    size = 'default',
55553    value: _selectedItem,
55554    onMouseOver,
55555    onMouseOut,
55556    onFocus,
55557    onBlur,
55558    __experimentalShowSelectedHint = false
55559  } = props;
55560  const {
55561    getLabelProps,
55562    getToggleButtonProps,
55563    getMenuProps,
55564    getItemProps,
55565    isOpen,
55566    highlightedIndex,
55567    selectedItem
55568  } = useSelect({
55569    initialSelectedItem: items[0],
55570    items,
55571    itemToString: custom_select_control_itemToString,
55572    onSelectedItemChange,
55573    ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
55574      selectedItem: _selectedItem
55575    } : undefined),
55576    stateReducer: custom_select_control_stateReducer
55577  });
55578  const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
55579  function handleOnFocus(e) {
55580    setIsFocused(true);
55581    onFocus?.(e);
55582  }
55583  function handleOnBlur(e) {
55584    setIsFocused(false);
55585    onBlur?.(e);
55586  }
55587  if (!__nextUnconstrainedWidth) {
55588    external_wp_deprecated_default()('Constrained width styles for wp.components.CustomSelectControl', {
55589      since: '6.1',
55590      version: '6.4',
55591      hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
55592    });
55593  }
55594  function getDescribedBy() {
55595    if (describedBy) {
55596      return describedBy;
55597    }
55598    if (!selectedItem) {
55599      return (0,external_wp_i18n_namespaceObject.__)('No selection');
55600    }
55601
55602    // translators: %s: The selected option.
55603    return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name);
55604  }
55605  const menuProps = getMenuProps({
55606    className: 'components-custom-select-control__menu',
55607    'aria-hidden': !isOpen
55608  });
55609  const onKeyDownHandler = (0,external_wp_element_namespaceObject.useCallback)(e => {
55610    e.stopPropagation();
55611    menuProps?.onKeyDown?.(e);
55612  }, [menuProps]);
55613
55614  // We need this here, because the null active descendant is not fully ARIA compliant.
55615  if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
55616    delete menuProps['aria-activedescendant'];
55617  }
55618  return (0,external_wp_element_namespaceObject.createElement)("div", {
55619    className: classnames_default()('components-custom-select-control', className)
55620  }, hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
55621    as: "label",
55622    ...getLabelProps()
55623  }, label) : /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
55624  (0,external_wp_element_namespaceObject.createElement)(StyledLabel, {
55625    ...getLabelProps({
55626      className: 'components-custom-select-control__label'
55627    })
55628  }, label), (0,external_wp_element_namespaceObject.createElement)(InputBaseWithBackCompatMinWidth, {
55629    __next36pxDefaultSize: __next36pxDefaultSize,
55630    __nextUnconstrainedWidth: __nextUnconstrainedWidth,
55631    isFocused: isOpen || isFocused,
55632    __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
55633    labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
55634    size: size,
55635    suffix: (0,external_wp_element_namespaceObject.createElement)(select_control_chevron_down, null)
55636  }, (0,external_wp_element_namespaceObject.createElement)(Select, {
55637    onMouseOver: onMouseOver,
55638    onMouseOut: onMouseOut,
55639    as: "button",
55640    onFocus: handleOnFocus,
55641    onBlur: handleOnBlur,
55642    selectSize: size,
55643    __next36pxDefaultSize: __next36pxDefaultSize,
55644    ...getToggleButtonProps({
55645      // This is needed because some speech recognition software don't support `aria-labelledby`.
55646      'aria-label': label,
55647      'aria-labelledby': undefined,
55648      className: 'components-custom-select-control__button',
55649      describedBy: getDescribedBy()
55650    })
55651  }, custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0,external_wp_element_namespaceObject.createElement)("span", {
55652    className: "components-custom-select-control__hint"
55653  }, selectedItem.__experimentalHint))), (0,external_wp_element_namespaceObject.createElement)("ul", {
55654    ...menuProps,
55655    onKeyDown: onKeyDownHandler
55656  }, isOpen && items.map((item, index) =>
55657  // eslint-disable-next-line react/jsx-key
55658  (0,external_wp_element_namespaceObject.createElement)("li", {
55659    ...getItemProps({
55660      item,
55661      index,
55662      key: item.key,
55663      className: classnames_default()(item.className, 'components-custom-select-control__item', {
55664        'is-highlighted': index === highlightedIndex,
55665        'has-hint': !!item.__experimentalHint,
55666        'is-next-36px-default-size': __next36pxDefaultSize
55667      }),
55668      style: item.style
55669    })
55670  }, item.name, item.__experimentalHint && (0,external_wp_element_namespaceObject.createElement)("span", {
55671    className: "components-custom-select-control__item-hint"
55672  }, item.__experimentalHint), item === selectedItem && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
55673    icon: library_check,
55674    className: "components-custom-select-control__item-icon"
55675  })))));
55676}
55677function StableCustomSelectControl(props) {
55678  return (0,external_wp_element_namespaceObject.createElement)(CustomSelectControl, {
55679    ...props,
55680    __experimentalShowSelectedHint: false
55681  });
55682}
55683
55684;// CONCATENATED MODULE: ./node_modules/use-lilius/build/index.es.js
55685
55686
55687function toInteger(dirtyNumber) {
55688  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
55689    return NaN;
55690  }
55691
55692  var number = Number(dirtyNumber);
55693
55694  if (isNaN(number)) {
55695    return number;
55696  }
55697
55698  return number < 0 ? Math.ceil(number) : Math.floor(number);
55699}
55700
55701function requiredArgs(required, args) {
55702  if (args.length < required) {
55703    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
55704  }
55705}
55706
55707/**
55708 * @name toDate
55709 * @category Common Helpers
55710 * @summary Convert the given argument to an instance of Date.
55711 *
55712 * @description
55713 * Convert the given argument to an instance of Date.
55714 *
55715 * If the argument is an instance of Date, the function returns its clone.
55716 *
55717 * If the argument is a number, it is treated as a timestamp.
55718 *
55719 * If the argument is none of the above, the function returns Invalid Date.
55720 *
55721 * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
55722 *
55723 * @param {Date|Number} argument - the value to convert
55724 * @returns {Date} the parsed date in the local time zone
55725 * @throws {TypeError} 1 argument required
55726 *
55727 * @example
55728 * // Clone the date:
55729 * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
55730 * //=> Tue Feb 11 2014 11:30:30
55731 *
55732 * @example
55733 * // Convert the timestamp to date:
55734 * const result = toDate(1392098430000)
55735 * //=> Tue Feb 11 2014 11:30:30
55736 */
55737
55738function toDate(argument) {
55739  requiredArgs(1, arguments);
55740  var argStr = Object.prototype.toString.call(argument); // Clone the date
55741
55742  if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
55743    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
55744    return new Date(argument.getTime());
55745  } else if (typeof argument === 'number' || argStr === '[object Number]') {
55746    return new Date(argument);
55747  } else {
55748    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
55749      // eslint-disable-next-line no-console
55750      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"); // eslint-disable-next-line no-console
55751
55752      console.warn(new Error().stack);
55753    }
55754
55755    return new Date(NaN);
55756  }
55757}
55758
55759/**
55760 * @name addDays
55761 * @category Day Helpers
55762 * @summary Add the specified number of days to the given date.
55763 *
55764 * @description
55765 * Add the specified number of days to the given date.
55766 *
55767 * ### v2.0.0 breaking changes:
55768 *
55769 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55770 *
55771 * @param {Date|Number} date - the date to be changed
55772 * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
55773 * @returns {Date} - the new date with the days added
55774 * @throws {TypeError} - 2 arguments required
55775 *
55776 * @example
55777 * // Add 10 days to 1 September 2014:
55778 * const result = addDays(new Date(2014, 8, 1), 10)
55779 * //=> Thu Sep 11 2014 00:00:00
55780 */
55781
55782function addDays(dirtyDate, dirtyAmount) {
55783  requiredArgs(2, arguments);
vendor: 4,971 bytes, lines 55784-55910
55784  var date = toDate(dirtyDate);
55785  var amount = toInteger(dirtyAmount);
55786
55787  if (isNaN(amount)) {
55788    return new Date(NaN);
55789  }
55790
55791  if (!amount) {
55792    // If 0 days, no-op to avoid changing times in the hour before end of DST
55793    return date;
55794  }
55795
55796  date.setDate(date.getDate() + amount);
55797  return date;
55798}
55799
55800/**
55801 * @name addMonths
55802 * @category Month Helpers
55803 * @summary Add the specified number of months to the given date.
55804 *
55805 * @description
55806 * Add the specified number of months to the given date.
55807 *
55808 * ### v2.0.0 breaking changes:
55809 *
55810 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55811 *
55812 * @param {Date|Number} date - the date to be changed
55813 * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
55814 * @returns {Date} the new date with the months added
55815 * @throws {TypeError} 2 arguments required
55816 *
55817 * @example
55818 * // Add 5 months to 1 September 2014:
55819 * const result = addMonths(new Date(2014, 8, 1), 5)
55820 * //=> Sun Feb 01 2015 00:00:00
55821 */
55822
55823function addMonths(dirtyDate, dirtyAmount) {
55824  requiredArgs(2, arguments);
55825  var date = toDate(dirtyDate);
55826  var amount = toInteger(dirtyAmount);
55827
55828  if (isNaN(amount)) {
55829    return new Date(NaN);
55830  }
55831
55832  if (!amount) {
55833    // If 0 months, no-op to avoid changing times in the hour before end of DST
55834    return date;
55835  }
55836
55837  var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for
55838  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
55839  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
55840  // want except that dates will wrap around the end of a month, meaning that
55841  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
55842  // we'll default to the end of the desired month by adding 1 to the desired
55843  // month and using a date of 0 to back up one day to the end of the desired
55844  // month.
55845
55846  var endOfDesiredMonth = new Date(date.getTime());
55847  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
55848  var daysInMonth = endOfDesiredMonth.getDate();
55849
55850  if (dayOfMonth >= daysInMonth) {
55851    // If we're already at the end of the month, then this is the correct date
55852    // and we're done.
55853    return endOfDesiredMonth;
55854  } else {
55855    // Otherwise, we now know that setting the original day-of-month value won't
55856    // cause an overflow, so set the desired day-of-month. Note that we can't
55857    // just set the date of `endOfDesiredMonth` because that object may have had
55858    // its time changed in the unusual case where where a DST transition was on
55859    // the last day of the month and its local time was in the hour skipped or
55860    // repeated next to a DST transition.  So we use `date` instead which is
55861    // guaranteed to still have the original time.
55862    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
55863    return date;
55864  }
55865}
55866
55867/**
55868 * @name startOfWeek
55869 * @category Week Helpers
55870 * @summary Return the start of a week for the given date.
55871 *
55872 * @description
55873 * Return the start of a week for the given date.
55874 * The result will be in the local timezone.
55875 *
55876 * ### v2.0.0 breaking changes:
55877 *
55878 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55879 *
55880 * @param {Date|Number} date - the original date
55881 * @param {Object} [options] - an object with options.
55882 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
55883 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
55884 * @returns {Date} the start of a week
55885 * @throws {TypeError} 1 argument required
55886 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
55887 *
55888 * @example
55889 * // The start of a week for 2 September 2014 11:55:00:
55890 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
55891 * //=> Sun Aug 31 2014 00:00:00
55892 *
55893 * @example
55894 * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
55895 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
55896 * //=> Mon Sep 01 2014 00:00:00
55897 */
55898
55899function startOfWeek(dirtyDate, dirtyOptions) {
55900  requiredArgs(1, arguments);
55901  var options = dirtyOptions || {};
55902  var locale = options.locale;
55903  var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
55904  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);
55905  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
55906
55907  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
55908    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
55909  }
55910
vendor: 6,201 bytes, lines 55911-56101
55911  var date = toDate(dirtyDate);
55912  var day = date.getDay();
55913  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
55914  date.setDate(date.getDate() - diff);
55915  date.setHours(0, 0, 0, 0);
55916  return date;
55917}
55918
55919/**
55920 * @name startOfDay
55921 * @category Day Helpers
55922 * @summary Return the start of a day for the given date.
55923 *
55924 * @description
55925 * Return the start of a day for the given date.
55926 * The result will be in the local timezone.
55927 *
55928 * ### v2.0.0 breaking changes:
55929 *
55930 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55931 *
55932 * @param {Date|Number} date - the original date
55933 * @returns {Date} the start of a day
55934 * @throws {TypeError} 1 argument required
55935 *
55936 * @example
55937 * // The start of a day for 2 September 2014 11:55:00:
55938 * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
55939 * //=> Tue Sep 02 2014 00:00:00
55940 */
55941
55942function startOfDay(dirtyDate) {
55943  requiredArgs(1, arguments);
55944  var date = toDate(dirtyDate);
55945  date.setHours(0, 0, 0, 0);
55946  return date;
55947}
55948
55949/**
55950 * @name addWeeks
55951 * @category Week Helpers
55952 * @summary Add the specified number of weeks to the given date.
55953 *
55954 * @description
55955 * Add the specified number of week to the given date.
55956 *
55957 * ### v2.0.0 breaking changes:
55958 *
55959 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55960 *
55961 * @param {Date|Number} date - the date to be changed
55962 * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
55963 * @returns {Date} the new date with the weeks added
55964 * @throws {TypeError} 2 arguments required
55965 *
55966 * @example
55967 * // Add 4 weeks to 1 September 2014:
55968 * const result = addWeeks(new Date(2014, 8, 1), 4)
55969 * //=> Mon Sep 29 2014 00:00:00
55970 */
55971
55972function addWeeks(dirtyDate, dirtyAmount) {
55973  requiredArgs(2, arguments);
55974  var amount = toInteger(dirtyAmount);
55975  var days = amount * 7;
55976  return addDays(dirtyDate, days);
55977}
55978
55979/**
55980 * @name addYears
55981 * @category Year Helpers
55982 * @summary Add the specified number of years to the given date.
55983 *
55984 * @description
55985 * Add the specified number of years to the given date.
55986 *
55987 * ### v2.0.0 breaking changes:
55988 *
55989 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
55990 *
55991 * @param {Date|Number} date - the date to be changed
55992 * @param {Number} amount - the amount of years to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
55993 * @returns {Date} the new date with the years added
55994 * @throws {TypeError} 2 arguments required
55995 *
55996 * @example
55997 * // Add 5 years to 1 September 2014:
55998 * const result = addYears(new Date(2014, 8, 1), 5)
55999 * //=> Sun Sep 01 2019 00:00:00
56000 */
56001
56002function addYears(dirtyDate, dirtyAmount) {
56003  requiredArgs(2, arguments);
56004  var amount = toInteger(dirtyAmount);
56005  return addMonths(dirtyDate, amount * 12);
56006}
56007
56008/**
56009 * @name endOfMonth
56010 * @category Month Helpers
56011 * @summary Return the end of a month for the given date.
56012 *
56013 * @description
56014 * Return the end of a month for the given date.
56015 * The result will be in the local timezone.
56016 *
56017 * ### v2.0.0 breaking changes:
56018 *
56019 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56020 *
56021 * @param {Date|Number} date - the original date
56022 * @returns {Date} the end of a month
56023 * @throws {TypeError} 1 argument required
56024 *
56025 * @example
56026 * // The end of a month for 2 September 2014 11:55:00:
56027 * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
56028 * //=> Tue Sep 30 2014 23:59:59.999
56029 */
56030
56031function endOfMonth(dirtyDate) {
56032  requiredArgs(1, arguments);
56033  var date = toDate(dirtyDate);
56034  var month = date.getMonth();
56035  date.setFullYear(date.getFullYear(), month + 1, 0);
56036  date.setHours(23, 59, 59, 999);
56037  return date;
56038}
56039
56040/**
56041 * @name eachDayOfInterval
56042 * @category Interval Helpers
56043 * @summary Return the array of dates within the specified time interval.
56044 *
56045 * @description
56046 * Return the array of dates within the specified time interval.
56047 *
56048 * ### v2.0.0 breaking changes:
56049 *
56050 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56051 *
56052 * - The function was renamed from `eachDay` to `eachDayOfInterval`.
56053 *   This change was made to mirror the use of the word "interval" in standard ISO 8601:2004 terminology:
56054 *
56055 *   ```
56056 *   2.1.3
56057 *   time interval
56058 *   part of the time axis limited by two instants
56059 *   ```
56060 *
56061 *   Also, this function now accepts an object with `start` and `end` properties
56062 *   instead of two arguments as an interval.
56063 *   This function now throws `RangeError` if the start of the interval is after its end
56064 *   or if any date in the interval is `Invalid Date`.
56065 *
56066 *   ```javascript
56067 *   // Before v2.0.0
56068 *
56069 *   eachDay(new Date(2014, 0, 10), new Date(2014, 0, 20))
56070 *
56071 *   // v2.0.0 onward
56072 *
56073 *   eachDayOfInterval(
56074 *     { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) }
56075 *   )
56076 *   ```
56077 *
56078 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
56079 * @param {Object} [options] - an object with options.
56080 * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1.
56081 * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end
56082 * @throws {TypeError} 1 argument required
56083 * @throws {RangeError} `options.step` must be a number greater than 1
56084 * @throws {RangeError} The start of an interval cannot be after its end
56085 * @throws {RangeError} Date in interval cannot be `Invalid Date`
56086 *
56087 * @example
56088 * // Each day between 6 October 2014 and 10 October 2014:
56089 * const result = eachDayOfInterval({
56090 *   start: new Date(2014, 9, 6),
56091 *   end: new Date(2014, 9, 10)
56092 * })
56093 * //=> [
56094 * //   Mon Oct 06 2014 00:00:00,
56095 * //   Tue Oct 07 2014 00:00:00,
56096 * //   Wed Oct 08 2014 00:00:00,
56097 * //   Thu Oct 09 2014 00:00:00,
56098 * //   Fri Oct 10 2014 00:00:00
56099 * // ]
56100 */
56101
56102function eachDayOfInterval(dirtyInterval, options) {
56103  requiredArgs(1, arguments);
56104  var interval = dirtyInterval || {};
56105  var startDate = toDate(interval.start);
56106  var endDate = toDate(interval.end);
56107  var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date`
56108
56109  if (!(startDate.getTime() <= endTime)) {
56110    throw new RangeError('Invalid interval');
56111  }
56112
56113  var dates = [];
56114  var currentDate = startDate;
56115  currentDate.setHours(0, 0, 0, 0);
56116  var step = options && 'step' in options ? Number(options.step) : 1;
56117  if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1');
56118
56119  while (currentDate.getTime() <= endTime) {
56120    dates.push(toDate(currentDate));
56121    currentDate.setDate(currentDate.getDate() + step);
56122    currentDate.setHours(0, 0, 0, 0);
56123  }
56124
56125  return dates;
56126}
56127
56128/**
56129 * @name eachMonthOfInterval
56130 * @category Interval Helpers
56131 * @summary Return the array of months within the specified time interval.
56132 *
56133 * @description
56134 * Return the array of months within the specified time interval.
56135 *
56136 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
56137 * @returns {Date[]} the array with starts of months from the month of the interval start to the month of the interval end
56138 * @throws {TypeError} 1 argument required
56139 * @throws {RangeError} The start of an interval cannot be after its end
56140 * @throws {RangeError} Date in interval cannot be `Invalid Date`
56141 *
56142 * @example
56143 * // Each month between 6 February 2014 and 10 August 2014:
56144 * var result = eachMonthOfInterval({
56145 *   start: new Date(2014, 1, 6),
56146 *   end: new Date(2014, 7, 10)
56147 * })
56148 * //=> [
56149 * //   Sat Feb 01 2014 00:00:00,
56150 * //   Sat Mar 01 2014 00:00:00,
56151 * //   Tue Apr 01 2014 00:00:00,
56152 * //   Thu May 01 2014 00:00:00,
56153 * //   Sun Jun 01 2014 00:00:00,
56154 * //   Tue Jul 01 2014 00:00:00,
56155 * //   Fri Aug 01 2014 00:00:00
56156 * // ]
56157 */
56158
56159function eachMonthOfInterval(dirtyInterval) {
56160  requiredArgs(1, arguments);
56161  var interval = dirtyInterval || {};
56162  var startDate = toDate(interval.start);
56163  var endDate = toDate(interval.end);
56164  var endTime = endDate.getTime();
56165  var dates = []; // Throw an exception if start date is after end date or if any date is `Invalid Date`
56166
56167  if (!(startDate.getTime() <= endTime)) {
56168    throw new RangeError('Invalid interval');
56169  }
56170
56171  var currentDate = startDate;
56172  currentDate.setHours(0, 0, 0, 0);
56173  currentDate.setDate(1);
56174
56175  while (currentDate.getTime() <= endTime) {
56176    dates.push(toDate(currentDate));
56177    currentDate.setMonth(currentDate.getMonth() + 1);
56178  }
56179
56180  return dates;
56181}
56182
56183/**
56184 * @name eachWeekOfInterval
56185 * @category Interval Helpers
56186 * @summary Return the array of weeks within the specified time interval.
56187 *
56188 * @description
56189 * Return the array of weeks within the specified time interval.
56190 *
56191 * ### v2.0.0 breaking changes:
56192 *
56193 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56194 *
56195 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
56196 * @param {Object} [options] - an object with options.
56197 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
56198 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
56199 * @returns {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end
56200 * @throws {TypeError} 1 argument required
56201 * @throws {RangeError} `options.weekStartsOn` must be 0, 1, ..., 6
56202 * @throws {RangeError} The start of an interval cannot be after its end
56203 * @throws {RangeError} Date in interval cannot be `Invalid Date`
56204 *
56205 * @example
56206 * // Each week within interval 6 October 2014 - 23 November 2014:
56207 * var result = eachWeekOfInterval({
56208 *   start: new Date(2014, 9, 6),
56209 *   end: new Date(2014, 10, 23)
56210 * })
56211 * //=> [
56212 * //   Sun Oct 05 2014 00:00:00,
56213 * //   Sun Oct 12 2014 00:00:00,
56214 * //   Sun Oct 19 2014 00:00:00,
56215 * //   Sun Oct 26 2014 00:00:00,
56216 * //   Sun Nov 02 2014 00:00:00,
56217 * //   Sun Nov 09 2014 00:00:00,
56218 * //   Sun Nov 16 2014 00:00:00,
56219 * //   Sun Nov 23 2014 00:00:00
56220 * // ]
56221 */
56222
56223function eachWeekOfInterval(dirtyInterval, options) {
56224  requiredArgs(1, arguments);
56225  var interval = dirtyInterval || {};
56226  var startDate = toDate(interval.start);
56227  var endDate = toDate(interval.end);
56228  var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date`
56229
56230  if (!(startDate.getTime() <= endTime)) {
56231    throw new RangeError('Invalid interval');
56232  }
56233
56234  var startDateWeek = startOfWeek(startDate, options);
56235  var endDateWeek = startOfWeek(endDate, options); // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet
56236
56237  startDateWeek.setHours(15);
56238  endDateWeek.setHours(15);
56239  endTime = endDateWeek.getTime();
56240  var weeks = [];
56241  var currentWeek = startDateWeek;
56242
56243  while (currentWeek.getTime() <= endTime) {
56244    currentWeek.setHours(0);
56245    weeks.push(toDate(currentWeek));
56246    currentWeek = addWeeks(currentWeek, 1);
56247    currentWeek.setHours(15);
56248  }
56249
56250  return weeks;
56251}
56252
56253/**
56254 * @name startOfMonth
56255 * @category Month Helpers
56256 * @summary Return the start of a month for the given date.
56257 *
56258 * @description
56259 * Return the start of a month for the given date.
56260 * The result will be in the local timezone.
56261 *
56262 * ### v2.0.0 breaking changes:
56263 *
56264 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56265 *
56266 * @param {Date|Number} date - the original date
56267 * @returns {Date} the start of a month
56268 * @throws {TypeError} 1 argument required
56269 *
56270 * @example
56271 * // The start of a month for 2 September 2014 11:55:00:
56272 * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
56273 * //=> Mon Sep 01 2014 00:00:00
56274 */
56275
56276function startOfMonth(dirtyDate) {
56277  requiredArgs(1, arguments);
vendor: 5,060 bytes, lines 56278-56421
56278  var date = toDate(dirtyDate);
56279  date.setDate(1);
56280  date.setHours(0, 0, 0, 0);
56281  return date;
56282}
56283
56284/**
56285 * @name endOfWeek
56286 * @category Week Helpers
56287 * @summary Return the end of a week for the given date.
56288 *
56289 * @description
56290 * Return the end of a week for the given date.
56291 * The result will be in the local timezone.
56292 *
56293 * ### v2.0.0 breaking changes:
56294 *
56295 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56296 *
56297 * @param {Date|Number} date - the original date
56298 * @param {Object} [options] - an object with options.
56299 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
56300 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
56301 * @returns {Date} the end of a week
56302 * @throws {TypeError} 1 argument required
56303 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
56304 *
56305 * @example
56306 * // The end of a week for 2 September 2014 11:55:00:
56307 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))
56308 * //=> Sat Sep 06 2014 23:59:59.999
56309 *
56310 * @example
56311 * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:
56312 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
56313 * //=> Sun Sep 07 2014 23:59:59.999
56314 */
56315function endOfWeek(dirtyDate, dirtyOptions) {
56316  requiredArgs(1, arguments);
56317  var options = dirtyOptions || {};
56318  var locale = options.locale;
56319  var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
56320  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);
56321  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
56322
56323  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
56324    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
56325  }
56326
56327  var date = toDate(dirtyDate);
56328  var day = date.getDay();
56329  var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
56330  date.setDate(date.getDate() + diff);
56331  date.setHours(23, 59, 59, 999);
56332  return date;
56333}
56334
56335/**
56336 * @name getDaysInMonth
56337 * @category Month Helpers
56338 * @summary Get the number of days in a month of the given date.
56339 *
56340 * @description
56341 * Get the number of days in a month of the given date.
56342 *
56343 * ### v2.0.0 breaking changes:
56344 *
56345 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56346 *
56347 * @param {Date|Number} date - the given date
56348 * @returns {Number} the number of days in a month
56349 * @throws {TypeError} 1 argument required
56350 *
56351 * @example
56352 * // How many days are in February 2000?
56353 * const result = getDaysInMonth(new Date(2000, 1))
56354 * //=> 29
56355 */
56356
56357function getDaysInMonth(dirtyDate) {
56358  requiredArgs(1, arguments);
56359  var date = toDate(dirtyDate);
56360  var year = date.getFullYear();
56361  var monthIndex = date.getMonth();
56362  var lastDayOfMonth = new Date(0);
56363  lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
56364  lastDayOfMonth.setHours(0, 0, 0, 0);
56365  return lastDayOfMonth.getDate();
56366}
56367
56368/**
56369 * @name subMonths
56370 * @category Month Helpers
56371 * @summary Subtract the specified number of months from the given date.
56372 *
56373 * @description
56374 * Subtract the specified number of months from the given date.
56375 *
56376 * ### v2.0.0 breaking changes:
56377 *
56378 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56379 *
56380 * @param {Date|Number} date - the date to be changed
56381 * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
56382 * @returns {Date} the new date with the months subtracted
56383 * @throws {TypeError} 2 arguments required
56384 *
56385 * @example
56386 * // Subtract 5 months from 1 February 2015:
56387 * const result = subMonths(new Date(2015, 1, 1), 5)
56388 * //=> Mon Sep 01 2014 00:00:00
56389 */
56390
56391function subMonths(dirtyDate, dirtyAmount) {
56392  requiredArgs(2, arguments);
56393  var amount = toInteger(dirtyAmount);
56394  return addMonths(dirtyDate, -amount);
56395}
56396
56397/**
56398 * @name isAfter
56399 * @category Common Helpers
56400 * @summary Is the first date after the second one?
56401 *
56402 * @description
56403 * Is the first date after the second one?
56404 *
56405 * ### v2.0.0 breaking changes:
56406 *
56407 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56408 *
56409 * @param {Date|Number} date - the date that should be after the other one to return true
56410 * @param {Date|Number} dateToCompare - the date to compare with
56411 * @returns {Boolean} the first date is after the second date
56412 * @throws {TypeError} 2 arguments required
56413 *
56414 * @example
56415 * // Is 10 July 1989 after 11 February 1987?
56416 * var result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
56417 * //=> true
56418 */
56419
56420function isAfter(dirtyDate, dirtyDateToCompare) {
56421  requiredArgs(2, arguments);
56422  var date = toDate(dirtyDate);
56423  var dateToCompare = toDate(dirtyDateToCompare);
56424  return date.getTime() > dateToCompare.getTime();
56425}
56426
56427/**
56428 * @name isBefore
56429 * @category Common Helpers
56430 * @summary Is the first date before the second one?
56431 *
56432 * @description
56433 * Is the first date before the second one?
56434 *
56435 * ### v2.0.0 breaking changes:
56436 *
56437 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56438 *
56439 * @param {Date|Number} date - the date that should be before the other one to return true
56440 * @param {Date|Number} dateToCompare - the date to compare with
56441 * @returns {Boolean} the first date is before the second date
56442 * @throws {TypeError} 2 arguments required
56443 *
56444 * @example
56445 * // Is 10 July 1989 before 11 February 1987?
56446 * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
56447 * //=> false
56448 */
56449
56450function isBefore(dirtyDate, dirtyDateToCompare) {
56451  requiredArgs(2, arguments);
56452  var date = toDate(dirtyDate);
56453  var dateToCompare = toDate(dirtyDateToCompare);
56454  return date.getTime() < dateToCompare.getTime();
56455}
56456
56457/**
56458 * @name isEqual
56459 * @category Common Helpers
56460 * @summary Are the given dates equal?
56461 *
56462 * @description
56463 * Are the given dates equal?
56464 *
56465 * ### v2.0.0 breaking changes:
56466 *
56467 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56468 *
56469 * @param {Date|Number} dateLeft - the first date to compare
56470 * @param {Date|Number} dateRight - the second date to compare
56471 * @returns {Boolean} the dates are equal
56472 * @throws {TypeError} 2 arguments required
56473 *
56474 * @example
56475 * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
56476 * var result = isEqual(
56477 *   new Date(2014, 6, 2, 6, 30, 45, 0),
56478 *   new Date(2014, 6, 2, 6, 30, 45, 500)
56479 * )
56480 * //=> false
56481 */
56482
56483function isEqual(dirtyLeftDate, dirtyRightDate) {
56484  requiredArgs(2, arguments);
56485  var dateLeft = toDate(dirtyLeftDate);
56486  var dateRight = toDate(dirtyRightDate);
56487  return dateLeft.getTime() === dateRight.getTime();
56488}
56489
56490/**
56491 * @name setMonth
56492 * @category Month Helpers
56493 * @summary Set the month to the given date.
56494 *
56495 * @description
56496 * Set the month to the given date.
56497 *
56498 * ### v2.0.0 breaking changes:
56499 *
56500 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56501 *
56502 * @param {Date|Number} date - the date to be changed
56503 * @param {Number} month - the month of the new date
56504 * @returns {Date} the new date with the month set
56505 * @throws {TypeError} 2 arguments required
56506 *
56507 * @example
56508 * // Set February to 1 September 2014:
56509 * const result = setMonth(new Date(2014, 8, 1), 1)
56510 * //=> Sat Feb 01 2014 00:00:00
56511 */
56512
56513function setMonth(dirtyDate, dirtyMonth) {
56514  requiredArgs(2, arguments);
56515  var date = toDate(dirtyDate);
56516  var month = toInteger(dirtyMonth);
56517  var year = date.getFullYear();
56518  var day = date.getDate();
56519  var dateWithDesiredMonth = new Date(0);
56520  dateWithDesiredMonth.setFullYear(year, month, 15);
56521  dateWithDesiredMonth.setHours(0, 0, 0, 0);
56522  var daysInMonth = getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month
56523  // if the original date was the last day of the longer month
56524
56525  date.setMonth(month, Math.min(day, daysInMonth));
56526  return date;
56527}
56528
56529/**
56530 * @name set
56531 * @category Common Helpers
56532 * @summary Set date values to a given date.
56533 *
56534 * @description
56535 * Set date values to a given date.
56536 *
56537 * Sets time values to date from object `values`.
56538 * A value is not set if it is undefined or null or doesn't exist in `values`.
56539 *
56540 * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
56541 * to use native `Date#setX` methods. If you use this function, you may not want to include the
56542 * other `setX` functions that date-fns provides if you are concerned about the bundle size.
56543 *
56544 * @param {Date|Number} date - the date to be changed
56545 * @param {Object} values - an object with options
56546 * @param {Number} [values.year] - the number of years to be set
56547 * @param {Number} [values.month] - the number of months to be set
56548 * @param {Number} [values.date] - the number of days to be set
56549 * @param {Number} [values.hours] - the number of hours to be set
56550 * @param {Number} [values.minutes] - the number of minutes to be set
56551 * @param {Number} [values.seconds] - the number of seconds to be set
56552 * @param {Number} [values.milliseconds] - the number of milliseconds to be set
56553 * @returns {Date} the new date with options set
56554 * @throws {TypeError} 2 arguments required
56555 * @throws {RangeError} `values` must be an object
56556 *
56557 * @example
56558 * // Transform 1 September 2014 into 20 October 2015 in a single line:
56559 * var result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
56560 * //=> Tue Oct 20 2015 00:00:00
56561 *
56562 * @example
56563 * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
56564 * var result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
56565 * //=> Mon Sep 01 2014 12:23:45
56566 */
56567function set(dirtyDate, values) {
56568  requiredArgs(2, arguments);
56569
56570  if (typeof values !== 'object' || values === null) {
56571    throw new RangeError('values parameter must be an object');
56572  }
56573
56574  var date = toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
56575
56576  if (isNaN(date.getTime())) {
56577    return new Date(NaN);
56578  }
56579
56580  if (values.year != null) {
56581    date.setFullYear(values.year);
56582  }
56583
56584  if (values.month != null) {
56585    date = setMonth(date, values.month);
56586  }
56587
56588  if (values.date != null) {
56589    date.setDate(toInteger(values.date));
56590  }
56591
56592  if (values.hours != null) {
56593    date.setHours(toInteger(values.hours));
56594  }
56595
56596  if (values.minutes != null) {
56597    date.setMinutes(toInteger(values.minutes));
56598  }
56599
56600  if (values.seconds != null) {
56601    date.setSeconds(toInteger(values.seconds));
56602  }
56603
56604  if (values.milliseconds != null) {
56605    date.setMilliseconds(toInteger(values.milliseconds));
56606  }
56607
56608  return date;
56609}
56610
56611/**
56612 * @name setYear
56613 * @category Year Helpers
56614 * @summary Set the year to the given date.
56615 *
56616 * @description
56617 * Set the year to the given date.
56618 *
56619 * ### v2.0.0 breaking changes:
56620 *
56621 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56622 *
56623 * @param {Date|Number} date - the date to be changed
56624 * @param {Number} year - the year of the new date
56625 * @returns {Date} the new date with the year set
56626 * @throws {TypeError} 2 arguments required
56627 *
56628 * @example
56629 * // Set year 2013 to 1 September 2014:
56630 * const result = setYear(new Date(2014, 8, 1), 2013)
56631 * //=> Sun Sep 01 2013 00:00:00
56632 */
56633
56634function setYear(dirtyDate, dirtyYear) {
56635  requiredArgs(2, arguments);
56636  var date = toDate(dirtyDate);
56637  var year = toInteger(dirtyYear); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
56638
56639  if (isNaN(date.getTime())) {
56640    return new Date(NaN);
56641  }
56642
56643  date.setFullYear(year);
56644  return date;
56645}
56646
56647/**
56648 * @name startOfToday
56649 * @category Day Helpers
56650 * @summary Return the start of today.
56651 * @pure false
56652 *
56653 * @description
56654 * Return the start of today.
56655 *
56656 * > ⚠️ Please note that this function is not present in the FP submodule as
56657 * > it uses `Date.now()` internally hence impure and can't be safely curried.
56658 *
56659 * ### v2.0.0 breaking changes:
56660 *
56661 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56662 *
56663 * @returns {Date} the start of today
56664 *
56665 * @example
56666 * // If today is 6 October 2014:
56667 * var result = startOfToday()
56668 * //=> Mon Oct 6 2014 00:00:00
56669 */
56670
56671function startOfToday() {
56672  return startOfDay(Date.now());
56673}
56674
56675/**
56676 * @name subYears
56677 * @category Year Helpers
56678 * @summary Subtract the specified number of years from the given date.
56679 *
56680 * @description
56681 * Subtract the specified number of years from the given date.
56682 *
56683 * ### v2.0.0 breaking changes:
56684 *
56685 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
56686 *
56687 * @param {Date|Number} date - the date to be changed
56688 * @param {Number} amount - the amount of years to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
56689 * @returns {Date} the new date with the years subtracted
56690 * @throws {TypeError} 2 arguments required
56691 *
56692 * @example
56693 * // Subtract 5 years from 1 September 2014:
56694 * const result = subYears(new Date(2014, 8, 1), 5)
56695 * //=> Tue Sep 01 2009 00:00:00
56696 */
56697
56698function subYears(dirtyDate, dirtyAmount) {
56699  requiredArgs(2, arguments);
56700  var amount = toInteger(dirtyAmount);
56701  return addYears(dirtyDate, -amount);
56702}
56703
56704var Month;
56705(function (Month) {
56706    Month[Month["JANUARY"] = 0] = "JANUARY";
56707    Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
56708    Month[Month["MARCH"] = 2] = "MARCH";
56709    Month[Month["APRIL"] = 3] = "APRIL";
56710    Month[Month["MAY"] = 4] = "MAY";
56711    Month[Month["JUNE"] = 5] = "JUNE";
56712    Month[Month["JULY"] = 6] = "JULY";
56713    Month[Month["AUGUST"] = 7] = "AUGUST";
56714    Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER";
56715    Month[Month["OCTOBER"] = 9] = "OCTOBER";
56716    Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
56717    Month[Month["DECEMBER"] = 11] = "DECEMBER";
56718})(Month || (Month = {}));
56719var Day;
56720(function (Day) {
56721    Day[Day["SUNDAY"] = 0] = "SUNDAY";
56722    Day[Day["MONDAY"] = 1] = "MONDAY";
56723    Day[Day["TUESDAY"] = 2] = "TUESDAY";
56724    Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
56725    Day[Day["THURSDAY"] = 4] = "THURSDAY";
56726    Day[Day["FRIDAY"] = 5] = "FRIDAY";
56727    Day[Day["SATURDAY"] = 6] = "SATURDAY";
56728})(Day || (Day = {}));
56729var inRange = function (date, min, max) {
56730    return (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max)
56730);
56731};
56732var clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); };
56733var useLilius = function (_a) {
56734    var _b = _a === void 0 ? {} : _a, _c = _b.weekStartsOn, weekStartsOn = _c === void 0 ? Day.SUNDAY : _c, _d = _b.viewing, initialViewing = _d === void 0 ? new Date() : _d, _e = _b.selected, initialSelected = _e === void 0 ? [] : _e, _f = _b.numberOfMonths, numberOfMonths = _f === void 0 ? 1 : _f;
56735    var _g = (0,external_React_.useState)(initialViewing), viewing = _g[0], setViewing = _g[1];
56736    var viewToday = (0,external_React_.useCallback)(function () { return setViewing(startOfToday()); }, [setViewing]);
56737    var viewMonth = (0,external_React_.useCallback)(function (month) { return setViewing(function (v) { return setMonth(v, month); }); }, []);
56738    var viewPreviousMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subMonths(v, 1); }); }, []);
56739    var viewNextMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addMonths(v, 1); }); }, []);
56740    var viewYear = (0,external_React_.useCallback)(function (year) { return setViewing(function (v) { return setYear(v, year); }); }, []);
56741    var viewPreviousYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subYears(v, 1); }); }, []);
56742    var viewNextYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addYears(v, 1); }); }, []);
56743    var _h = (0,external_React_.useState)(initialSelected.map(clearTime)), selected = _h[0], setSelected = _h[1];
56744    var clearSelected = function () { return setSelected([]); };
56745    var isSelected = (0,external_React_.useCallback)(function (date) { return selected.findIndex(function (s) { return isEqual(s, date); }) > -1; }, [selected]);
56746    var select = (0,external_React_.useCallback)(function (date, replaceExisting) {
56747        if (replaceExisting) {
56748            setSelected(Array.isArray(date) ? date : [date]);
56749        }
56750        else {
56751            setSelected(function (selectedItems) { return selectedItems.concat(Array.isArray(date) ? date : [date]); });
56752        }
56753    }, []);
56754    var deselect = (0,external_React_.useCallback)(function (date) {
56755        return setSelected(function (selectedItems) {
56756            return Array.isArray(date)
56757                ? selectedItems.filter(function (s) { return !date.map(function (d) { return d.getTime(); }).includes(s.getTime()); })
56758                : selectedItems.filter(function (s) { return !isEqual(s, date); });
56759        });
56760    }, []);
56761    var toggle = (0,external_React_.useCallback)(function (date, replaceExisting) { return (isSelected(date) ? deselect(date) : select(date, replaceExisting)); }, [deselect, isSelected, select]);
56762    var selectRange = (0,external_React_.useCallback)(function (start, end, replaceExisting) {
56763        if (replaceExisting) {
56764            setSelected(eachDayOfInterval({ start: start, end: end }));
56765        }
56766        else {
56767            setSelected(function (selectedItems) { return selectedItems.concat(eachDayOfInterval({ start: start, end: end })); });
56768        }
56769    }, []);
56770    var deselectRange = (0,external_React_.useCallback)(function (start, end) {
56771        setSelected(function (selectedItems) {
56772            return selectedItems.filter(function (s) {
56773                return !eachDayOfInterval({ start: start, end: end })
56774                    .map(function (d) { return d.getTime(); })
56775                    .includes(s.getTime());
56776            });
56777        });
56778    }, []);
56779    var calendar = (0,external_React_.useMemo)(function () {
56780        return eachMonthOfInterval({
56781            start: startOfMonth(viewing),
56782            end: endOfMonth(addMonths(viewing, numberOfMonths - 1)),
56783        }).map(function (month) {
56784            return eachWeekOfInterval({
56785                start: startOfMonth(month),
56786                end: endOfMonth(month),
56787            }, { weekStartsOn: weekStartsOn }).map(function (week) {
56788                return eachDayOfInterval({
56789                    start: startOfWeek(week, { weekStartsOn: weekStartsOn }),
56790                    end: endOfWeek(week, { weekStartsOn: weekStartsOn }),
56791                });
56792            });
56793        });
56794    }, [viewing, weekStartsOn, numberOfMonths]);
56795    return {
56796        clearTime: clearTime,
56797        inRange: inRange,
56798        viewing: viewing,
56799        setViewing: setViewing,
56800        viewToday: viewToday,
56801        viewMonth: viewMonth,
56802        viewPreviousMonth: viewPreviousMonth,
56803        viewNextMonth: viewNextMonth,
56804        viewYear: viewYear,
56805        viewPreviousYear: viewPreviousYear,
56806        viewNextYear: viewNextYear,
56807        selected: selected,
56808        setSelected: setSelected,
56809        clearSelected: clearSelected,
56810        isSelected: isSelected,
56811        select: select,
56812        deselect: deselect,
56813        toggle: toggle,
56814        selectRange: selectRange,
56815        deselectRange: deselectRange,
56816        calendar: calendar,
56817    };
56818};
56819
56820
56821
56822;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
56823function _typeof(obj) {
56824  "@babel/helpers - typeof";
56825
56826  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
56827    return typeof obj;
56828  } : function (obj) {
56829    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
56830  }, _typeof(obj);
56831}
56832;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/requiredArgs/index.js
56833function requiredArgs_requiredArgs(required, args) {
56834  if (args.length < required) {
56835    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
56836  }
56837}
56838;// CONCATENATED MODULE: ./node_modules/date-fns/esm/toDate/index.js
56839
56840
56841/**
56842 * @name toDate
56843 * @category Common Helpers
56844 * @summary Convert the given argument to an instance of Date.
56845 *
56846 * @description
56847 * Convert the given argument to an instance of Date.
56848 *
56849 * If the argument is an instance of Date, the function returns its clone.
56850 *
56851 * If the argument is a number, it is treated as a timestamp.
56852 *
56853 * If the argument is none of the above, the function returns Invalid Date.
56854 *
56855 * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
56856 *
56857 * @param {Date|Number} argument - the value to convert
56858 * @returns {Date} the parsed date in the local time zone
56859 * @throws {TypeError} 1 argument required
56860 *
56861 * @example
56862 * // Clone the date:
56863 * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
56864 * //=> Tue Feb 11 2014 11:30:30
56865 *
56866 * @example
56867 * // Convert the timestamp to date:
56868 * const result = toDate(1392098430000)
56869 * //=> Tue Feb 11 2014 11:30:30
56870 */
56871function toDate_toDate(argument) {
56872  requiredArgs_requiredArgs(1, arguments);
56873  var argStr = Object.prototype.toString.call(argument);
56874
56875  // Clone the date
56876  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
56877    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
56878    return new Date(argument.getTime());
56879  } else if (typeof argument === 'number' || argStr === '[object Number]') {
56880    return new Date(argument);
56881  } else {
56882    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
56883      // eslint-disable-next-line no-console
56884      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
56885      // eslint-disable-next-line no-console
56886      console.warn(new Error().stack);
56887    }
56888    return new Date(NaN);
56889  }
56890}
56891;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfDay/index.js
56892
56893
56894/**
56895 * @name startOfDay
56896 * @category Day Helpers
56897 * @summary Return the start of a day for the given date.
56898 *
56899 * @description
56900 * Return the start of a day for the given date.
56901 * The result will be in the local timezone.
56902 *
56903 * @param {Date|Number} date - the original date
56904 * @returns {Date} the start of a day
56905 * @throws {TypeError} 1 argument required
56906 *
56907 * @example
56908 * // The start of a day for 2 September 2014 11:55:00:
56909 * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
56910 * //=> Tue Sep 02 2014 00:00:00
56911 */
56912function startOfDay_startOfDay(dirtyDate) {
56913  requiredArgs_requiredArgs(1, arguments);
56914  var date = toDate_toDate(dirtyDate);
56915  date.setHours(0, 0, 0, 0);
56916  return date;
56917}
56918;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/toInteger/index.js
56919function toInteger_toInteger(dirtyNumber) {
vendor: 4,451 bytes, lines 56920-57038
56920  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
56921    return NaN;
56922  }
56923  var number = Number(dirtyNumber);
56924  if (isNaN(number)) {
56925    return number;
56926  }
56927  return number < 0 ? Math.ceil(number) : Math.floor(number);
56928}
56929;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMonths/index.js
56930
56931
56932
56933/**
56934 * @name addMonths
56935 * @category Month Helpers
56936 * @summary Add the specified number of months to the given date.
56937 *
56938 * @description
56939 * Add the specified number of months to the given date.
56940 *
56941 * @param {Date|Number} date - the date to be changed
56942 * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
56943 * @returns {Date} the new date with the months added
56944 * @throws {TypeError} 2 arguments required
56945 *
56946 * @example
56947 * // Add 5 months to 1 September 2014:
56948 * const result = addMonths(new Date(2014, 8, 1), 5)
56949 * //=> Sun Feb 01 2015 00:00:00
56950 */
56951function addMonths_addMonths(dirtyDate, dirtyAmount) {
56952  requiredArgs_requiredArgs(2, arguments);
56953  var date = toDate_toDate(dirtyDate);
56954  var amount = toInteger_toInteger(dirtyAmount);
56955  if (isNaN(amount)) {
56956    return new Date(NaN);
56957  }
56958  if (!amount) {
56959    // If 0 months, no-op to avoid changing times in the hour before end of DST
56960    return date;
56961  }
56962  var dayOfMonth = date.getDate();
56963
56964  // The JS Date object supports date math by accepting out-of-bounds values for
56965  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
56966  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
56967  // want except that dates will wrap around the end of a month, meaning that
56968  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
56969  // we'll default to the end of the desired month by adding 1 to the desired
56970  // month and using a date of 0 to back up one day to the end of the desired
56971  // month.
56972  var endOfDesiredMonth = new Date(date.getTime());
56973  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
56974  var daysInMonth = endOfDesiredMonth.getDate();
56975  if (dayOfMonth >= daysInMonth) {
56976    // If we're already at the end of the month, then this is the correct date
56977    // and we're done.
56978    return endOfDesiredMonth;
56979  } else {
56980    // Otherwise, we now know that setting the original day-of-month value won't
56981    // cause an overflow, so set the desired day-of-month. Note that we can't
56982    // just set the date of `endOfDesiredMonth` because that object may have had
56983    // its time changed in the unusual case where where a DST transition was on
56984    // the last day of the month and its local time was in the hour skipped or
56985    // repeated next to a DST transition.  So we use `date` instead which is
56986    // guaranteed to still have the original time.
56987    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
56988    return date;
56989  }
56990}
56991;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMonths/index.js
56992
56993
56994
56995/**
56996 * @name subMonths
56997 * @category Month Helpers
56998 * @summary Subtract the specified number of months from the given date.
56999 *
57000 * @description
57001 * Subtract the specified number of months from the given date.
57002 *
57003 * @param {Date|Number} date - the date to be changed
57004 * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
57005 * @returns {Date} the new date with the months subtracted
57006 * @throws {TypeError} 2 arguments required
57007 *
57008 * @example
57009 * // Subtract 5 months from 1 February 2015:
57010 * const result = subMonths(new Date(2015, 1, 1), 5)
57011 * //=> Mon Sep 01 2014 00:00:00
57012 */
57013function subMonths_subMonths(dirtyDate, dirtyAmount) {
57014  requiredArgs_requiredArgs(2, arguments);
57015  var amount = toInteger_toInteger(dirtyAmount);
57016  return addMonths_addMonths(dirtyDate, -amount);
57017}
57018;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isDate/index.js
57019
57020
57021/**
57022 * @name isDate
57023 * @category Common Helpers
57024 * @summary Is the given value a date?
57025 *
57026 * @description
57027 * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
57028 *
57029 * @param {*} value - the value to check
57030 * @returns {boolean} true if the given value is a date
57031 * @throws {TypeError} 1 arguments required
57032 *
57033 * @example
57034 * // For a valid date:
57035 * const result = isDate(new Date())
57036 * //=> true
57037 *
57038 * @example
57039 * // For an invalid date:
57040 * const result = isDate(new Date(NaN))
57041 * //=> true
57042 *
57043 * @example
57044 * // For some value:
57045 * const result = isDate('2014-02-31')
57046 * //=> false
57047 *
57048 * @example
57049 * // For an object:
57050 * const result = isDate({})
57051 * //=> false
57052 */
57053function isDate(value) {
57054  requiredArgs_requiredArgs(1, arguments);
57055  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
57056}
57057;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isValid/index.js
57058
57059
57060
57061/**
57062 * @name isValid
57063 * @category Common Helpers
57064 * @summary Is the given date valid?
57065 *
57066 * @description
57067 * Returns false if argument is Invalid Date and true otherwise.
57068 * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
57069 * Invalid Date is a Date, whose time value is NaN.
57070 *
57071 * Time value of Date: http://es5.github.io/#x15.9.1.1
57072 *
57073 * @param {*} date - the date to check
57074 * @returns {Boolean} the date is valid
57075 * @throws {TypeError} 1 argument required
57076 *
57077 * @example
57078 * // For the valid date:
57079 * const result = isValid(new Date(2014, 1, 31))
57080 * //=> true
57081 *
57082 * @example
57083 * // For the value, convertable into a date:
57084 * const result = isValid(1393804800000)
57085 * //=> true
57086 *
57087 * @example
57088 * // For the invalid date:
57089 * const result = isValid(new Date(''))
57090 * //=> false
57091 */
57092function isValid(dirtyDate) {
57093  requiredArgs_requiredArgs(1, arguments);
57094  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
57095    return false;
57096  }
57097  var date = toDate_toDate(dirtyDate);
57098  return !isNaN(Number(date));
57099}
57100;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMilliseconds/index.js
57101
57102
57103
57104/**
57105 * @name addMilliseconds
57106 * @category Millisecond Helpers
57107 * @summary Add the specified number of milliseconds to the given date.
57108 *
57109 * @description
57110 * Add the specified number of milliseconds to the given date.
57111 *
57112 * @param {Date|Number} date - the date to be changed
57113 * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
57114 * @returns {Date} the new date with the milliseconds added
57115 * @throws {TypeError} 2 arguments required
57116 *
57117 * @example
57118 * // Add 750 milliseconds to 10 July 2014 12:45:30.000:
57119 * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
57120 * //=> Thu Jul 10 2014 12:45:30.750
57121 */
57122function addMilliseconds(dirtyDate, dirtyAmount) {
57123  requiredArgs_requiredArgs(2, arguments);
57124  var timestamp = toDate_toDate(dirtyDate).getTime();
57125  var amount = toInteger_toInteger(dirtyAmount);
57126  return new Date(timestamp + amount);
57127}
57128;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMilliseconds/index.js
57129
57130
57131
57132/**
57133 * @name subMilliseconds
57134 * @category Millisecond Helpers
57135 * @summary Subtract the specified number of milliseconds from the given date.
57136 *
57137 * @description
57138 * Subtract the specified number of milliseconds from the given date.
57139 *
57140 * @param {Date|Number} date - the date to be changed
57141 * @param {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
57142 * @returns {Date} the new date with the milliseconds subtracted
57143 * @throws {TypeError} 2 arguments required
57144 *
57145 * @example
57146 * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000:
57147 * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
57148 * //=> Thu Jul 10 2014 12:45:29.250
57149 */
57150function subMilliseconds(dirtyDate, dirtyAmount) {
57151  requiredArgs_requiredArgs(2, arguments);
57152  var amount = toInteger_toInteger(dirtyAmount);
57153  return addMilliseconds(dirtyDate, -amount);
57154}
57155;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCDayOfYear/index.js
57156
57157
57158var MILLISECONDS_IN_DAY = 86400000;
57159function getUTCDayOfYear(dirtyDate) {
57160  requiredArgs_requiredArgs(1, arguments);
57161  var date = toDate_toDate(dirtyDate);
57162  var timestamp = date.getTime();
57163  date.setUTCMonth(0, 1);
57164  date.setUTCHours(0, 0, 0, 0);
57165  var startOfYearTimestamp = date.getTime();
57166  var difference = timestamp - startOfYearTimestamp;
57167  return Math.floor(difference / MILLISECONDS_IN_DAY) + 1;
57168}
57169;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeek/index.js
57170
57171
57172function startOfUTCISOWeek(dirtyDate) {
57173  requiredArgs_requiredArgs(1, arguments);
57174  var weekStartsOn = 1;
vendor: 4,405 bytes, lines 57175-57273
57175  var date = toDate_toDate(dirtyDate);
57176  var day = date.getUTCDay();
57177  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
57178  date.setUTCDate(date.getUTCDate() - diff);
57179  date.setUTCHours(0, 0, 0, 0);
57180  return date;
57181}
57182;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeekYear/index.js
57183
57184
57185
57186function getUTCISOWeekYear(dirtyDate) {
57187  requiredArgs_requiredArgs(1, arguments);
57188  var date = toDate_toDate(dirtyDate);
57189  var year = date.getUTCFullYear();
57190  var fourthOfJanuaryOfNextYear = new Date(0);
57191  fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4);
57192  fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0);
57193  var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear);
57194  var fourthOfJanuaryOfThisYear = new Date(0);
57195  fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4);
57196  fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0);
57197  var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear);
57198  if (date.getTime() >= startOfNextYear.getTime()) {
57199    return year + 1;
57200  } else if (date.getTime() >= startOfThisYear.getTime()) {
57201    return year;
57202  } else {
57203    return year - 1;
57204  }
57205}
57206;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeekYear/index.js
57207
57208
57209
57210function startOfUTCISOWeekYear(dirtyDate) {
57211  requiredArgs_requiredArgs(1, arguments);
57212  var year = getUTCISOWeekYear(dirtyDate);
57213  var fourthOfJanuary = new Date(0);
57214  fourthOfJanuary.setUTCFullYear(year, 0, 4);
57215  fourthOfJanuary.setUTCHours(0, 0, 0, 0);
57216  var date = startOfUTCISOWeek(fourthOfJanuary);
57217  return date;
57218}
57219;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeek/index.js
57220
57221
57222
57223
57224var MILLISECONDS_IN_WEEK = 604800000;
57225function getUTCISOWeek(dirtyDate) {
57226  requiredArgs_requiredArgs(1, arguments);
57227  var date = toDate_toDate(dirtyDate);
57228  var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime();
57229
57230  // Round the number of days to the nearest integer
57231  // because the number of milliseconds in a week is not constant
57232  // (e.g. it's different in the week of the daylight saving time clock shift)
57233  return Math.round(diff / MILLISECONDS_IN_WEEK) + 1;
57234}
57235;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultOptions/index.js
57236var defaultOptions_defaultOptions = {};
57237function getDefaultOptions() {
57238  return defaultOptions_defaultOptions;
57239}
57240function setDefaultOptions(newOptions) {
57241  defaultOptions_defaultOptions = newOptions;
57242}
57243;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeek/index.js
57244
57245
57246
57247
57248function startOfUTCWeek(dirtyDate, options) {
57249  var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
57250  requiredArgs_requiredArgs(1, arguments);
57251  var defaultOptions = getDefaultOptions();
57252  var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0);
57253
57254  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
57255  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
57256    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
57257  }
57258  var date = toDate_toDate(dirtyDate);
57259  var day = date.getUTCDay();
57260  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
57261  date.setUTCDate(date.getUTCDate() - diff);
57262  date.setUTCHours(0, 0, 0, 0);
57263  return date;
57264}
57265;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeekYear/index.js
57266
57267
57268
57269
57270
57271function getUTCWeekYear(dirtyDate, options) {
57272  var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
57273  requiredArgs_requiredArgs(1, arguments);
vendor: 6,130 bytes, lines 57274-57374
57274  var date = toDate_toDate(dirtyDate);
57275  var year = date.getUTCFullYear();
57276  var defaultOptions = getDefaultOptions();
57277  var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
57278
57279  // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
57280  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
57281    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
57282  }
57283  var firstWeekOfNextYear = new Date(0);
57284  firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);
57285  firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);
57286  var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options);
57287  var firstWeekOfThisYear = new Date(0);
57288  firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);
57289  firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);
57290  var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options);
57291  if (date.getTime() >= startOfNextYear.getTime()) {
57292    return year + 1;
57293  } else if (date.getTime() >= startOfThisYear.getTime()) {
57294    return year;
57295  } else {
57296    return year - 1;
57297  }
57298}
57299;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeekYear/index.js
57300
57301
57302
57303
57304
57305function startOfUTCWeekYear(dirtyDate, options) {
57306  var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
57307  requiredArgs_requiredArgs(1, arguments);
57308  var defaultOptions = getDefaultOptions();
57309  var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1);
57310  var year = getUTCWeekYear(dirtyDate, options);
57311  var firstWeek = new Date(0);
57312  firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate);
57313  firstWeek.setUTCHours(0, 0, 0, 0);
57314  var date = startOfUTCWeek(firstWeek, options);
57315  return date;
57316}
57317;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeek/index.js
57318
57319
57320
57321
57322var getUTCWeek_MILLISECONDS_IN_WEEK = 604800000;
57323function getUTCWeek(dirtyDate, options) {
57324  requiredArgs_requiredArgs(1, arguments);
57325  var date = toDate_toDate(dirtyDate);
57326  var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime();
57327
57328  // Round the number of days to the nearest integer
57329  // because the number of milliseconds in a week is not constant
57330  // (e.g. it's different in the week of the daylight saving time clock shift)
57331  return Math.round(diff / getUTCWeek_MILLISECONDS_IN_WEEK) + 1;
57332}
57333;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/addLeadingZeros/index.js
57334function addLeadingZeros(number, targetLength) {
57335  var sign = number < 0 ? '-' : '';
57336  var output = Math.abs(number).toString();
57337  while (output.length < targetLength) {
57338    output = '0' + output;
57339  }
57340  return sign + output;
57341}
57342;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/lightFormatters/index.js
57343
57344/*
57345 * |     | Unit                           |     | Unit                           |
57346 * |-----|--------------------------------|-----|--------------------------------|
57347 * |  a  | AM, PM                         |  A* |                                |
57348 * |  d  | Day of month                   |  D  |                                |
57349 * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
57350 * |  m  | Minute                         |  M  | Month                          |
57351 * |  s  | Second                         |  S  | Fraction of second             |
57352 * |  y  | Year (abs)                     |  Y  |                                |
57353 *
57354 * Letters marked by * are not implemented but reserved by Unicode standard.
57355 */
57356var formatters = {
57357  // Year
57358  y: function y(date, token) {
57359    // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens
57360    // | Year     |     y | yy |   yyy |  yyyy | yyyyy |
57361    // |----------|-------|----|-------|-------|-------|
57362    // | AD 1     |     1 | 01 |   001 |  0001 | 00001 |
57363    // | AD 12    |    12 | 12 |   012 |  0012 | 00012 |
57364    // | AD 123   |   123 | 23 |   123 |  0123 | 00123 |
57365    // | AD 1234  |  1234 | 34 |  1234 |  1234 | 01234 |
57366    // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 |
57367
57368    var signedYear = date.getUTCFullYear();
57369    // Returns 1 for 1 BC (which is year 0 in JavaScript)
57370    var year = signedYear > 0 ? signedYear : 1 - signedYear;
57371    return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length);
57372  },
57373  // Month
57374  M: function M(date, token) {
vendor: 21,183 bytes, lines 57375-58082
57375    var month = date.getUTCMonth();
57376    return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2);
57377  },
57378  // Day of the month
57379  d: function d(date, token) {
57380    return addLeadingZeros(date.getUTCDate(), token.length);
57381  },
57382  // AM or PM
57383  a: function a(date, token) {
57384    var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am';
57385    switch (token) {
57386      case 'a':
57387      case 'aa':
57388        return dayPeriodEnumValue.toUpperCase();
57389      case 'aaa':
57390        return dayPeriodEnumValue;
57391      case 'aaaaa':
57392        return dayPeriodEnumValue[0];
57393      case 'aaaa':
57394      default:
57395        return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.';
57396    }
57397  },
57398  // Hour [1-12]
57399  h: function h(date, token) {
57400    return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length);
57401  },
57402  // Hour [0-23]
57403  H: function H(date, token) {
57404    return addLeadingZeros(date.getUTCHours(), token.length);
57405  },
57406  // Minute
57407  m: function m(date, token) {
57408    return addLeadingZeros(date.getUTCMinutes(), token.length);
57409  },
57410  // Second
57411  s: function s(date, token) {
57412    return addLeadingZeros(date.getUTCSeconds(), token.length);
57413  },
57414  // Fraction of second
57415  S: function S(date, token) {
57416    var numberOfDigits = token.length;
57417    var milliseconds = date.getUTCMilliseconds();
57418    var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3));
57419    return addLeadingZeros(fractionalSeconds, token.length);
57420  }
57421};
57422/* harmony default export */ const lightFormatters = (formatters);
57423;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/formatters/index.js
57424
57425
57426
57427
57428
57429
57430
57431var dayPeriodEnum = {
57432  am: 'am',
57433  pm: 'pm',
57434  midnight: 'midnight',
57435  noon: 'noon',
57436  morning: 'morning',
57437  afternoon: 'afternoon',
57438  evening: 'evening',
57439  night: 'night'
57440};
57441/*
57442 * |     | Unit                           |     | Unit                           |
57443 * |-----|--------------------------------|-----|--------------------------------|
57444 * |  a  | AM, PM                         |  A* | Milliseconds in day            |
57445 * |  b  | AM, PM, noon, midnight         |  B  | Flexible day period            |
57446 * |  c  | Stand-alone local day of week  |  C* | Localized hour w/ day period   |
57447 * |  d  | Day of month                   |  D  | Day of year                    |
57448 * |  e  | Local day of week              |  E  | Day of week                    |
57449 * |  f  |                                |  F* | Day of week in month           |
57450 * |  g* | Modified Julian day            |  G  | Era                            |
57451 * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
57452 * |  i! | ISO day of week                |  I! | ISO week of year               |
57453 * |  j* | Localized hour w/ day period   |  J* | Localized hour w/o day period  |
57454 * |  k  | Hour [1-24]                    |  K  | Hour [0-11]                    |
57455 * |  l* | (deprecated)                   |  L  | Stand-alone month              |
57456 * |  m  | Minute                         |  M  | Month                          |
57457 * |  n  |                                |  N  |                                |
57458 * |  o! | Ordinal number modifier        |  O  | Timezone (GMT)                 |
57459 * |  p! | Long localized time            |  P! | Long localized date            |
57460 * |  q  | Stand-alone quarter            |  Q  | Quarter                        |
57461 * |  r* | Related Gregorian year         |  R! | ISO week-numbering year        |
57462 * |  s  | Second                         |  S  | Fraction of second             |
57463 * |  t! | Seconds timestamp              |  T! | Milliseconds timestamp         |
57464 * |  u  | Extended year                  |  U* | Cyclic year                    |
57465 * |  v* | Timezone (generic non-locat.)  |  V* | Timezone (location)            |
57466 * |  w  | Local week of year             |  W* | Week of month                  |
57467 * |  x  | Timezone (ISO-8601 w/o Z)      |  X  | Timezone (ISO-8601)            |
57468 * |  y  | Year (abs)                     |  Y  | Local week-numbering year      |
57469 * |  z  | Timezone (specific non-locat.) |  Z* | Timezone (aliases)             |
57470 *
57471 * Letters marked by * are not implemented but reserved by Unicode standard.
57472 *
57473 * Letters marked by ! are non-standard, but implemented by date-fns:
57474 * - `o` modifies the previous token to turn it into an ordinal (see `format` docs)
57475 * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days,
57476 *   i.e. 7 for Sunday, 1 for Monday, etc.
57477 * - `I` is ISO week of year, as opposed to `w` which is local week of year.
57478 * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year.
57479 *   `R` is supposed to be used in conjunction with `I` and `i`
57480 *   for universal ISO week-numbering date, whereas
57481 *   `Y` is supposed to be used in conjunction with `w` and `e`
57482 *   for week-numbering date specific to the locale.
57483 * - `P` is long localized date format
57484 * - `p` is long localized time format
57485 */
57486
57487var formatters_formatters = {
57488  // Era
57489  G: function G(date, token, localize) {
57490    var era = date.getUTCFullYear() > 0 ? 1 : 0;
57491    switch (token) {
57492      // AD, BC
57493      case 'G':
57494      case 'GG':
57495      case 'GGG':
57496        return localize.era(era, {
57497          width: 'abbreviated'
57498        });
57499      // A, B
57500      case 'GGGGG':
57501        return localize.era(era, {
57502          width: 'narrow'
57503        });
57504      // Anno Domini, Before Christ
57505      case 'GGGG':
57506      default:
57507        return localize.era(era, {
57508          width: 'wide'
57509        });
57510    }
57511  },
57512  // Year
57513  y: function y(date, token, localize) {
57514    // Ordinal number
57515    if (token === 'yo') {
57516      var signedYear = date.getUTCFullYear();
57517      // Returns 1 for 1 BC (which is year 0 in JavaScript)
57518      var year = signedYear > 0 ? signedYear : 1 - signedYear;
57519      return localize.ordinalNumber(year, {
57520        unit: 'year'
57521      });
57522    }
57523    return lightFormatters.y(date, token);
57524  },
57525  // Local week-numbering year
57526  Y: function Y(date, token, localize, options) {
57527    var signedWeekYear = getUTCWeekYear(date, options);
57528    // Returns 1 for 1 BC (which is year 0 in JavaScript)
57529    var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
57530
57531    // Two digit year
57532    if (token === 'YY') {
57533      var twoDigitYear = weekYear % 100;
57534      return addLeadingZeros(twoDigitYear, 2);
57535    }
57536
57537    // Ordinal number
57538    if (token === 'Yo') {
57539      return localize.ordinalNumber(weekYear, {
57540        unit: 'year'
57541      });
57542    }
57543
57544    // Padding
57545    return addLeadingZeros(weekYear, token.length);
57546  },
57547  // ISO week-numbering year
57548  R: function R(date, token) {
57549    var isoWeekYear = getUTCISOWeekYear(date);
57550
57551    // Padding
57552    return addLeadingZeros(isoWeekYear, token.length);
57553  },
57554  // Extended year. This is a single number designating the year of this calendar system.
57555  // The main difference between `y` and `u` localizers are B.C. years:
57556  // | Year | `y` | `u` |
57557  // |------|-----|-----|
57558  // | AC 1 |   1 |   1 |
57559  // | BC 1 |   1 |   0 |
57560  // | BC 2 |   2 |  -1 |
57561  // Also `yy` always returns the last two digits of a year,
57562  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
57563  u: function u(date, token) {
57564    var year = date.getUTCFullYear();
57565    return addLeadingZeros(year, token.length);
57566  },
57567  // Quarter
57568  Q: function Q(date, token, localize) {
57569    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
57570    switch (token) {
57571      // 1, 2, 3, 4
57572      case 'Q':
57573        return String(quarter);
57574      // 01, 02, 03, 04
57575      case 'QQ':
57576        return addLeadingZeros(quarter, 2);
57577      // 1st, 2nd, 3rd, 4th
57578      case 'Qo':
57579        return localize.ordinalNumber(quarter, {
57580          unit: 'quarter'
57581        });
57582      // Q1, Q2, Q3, Q4
57583      case 'QQQ':
57584        return localize.quarter(quarter, {
57585          width: 'abbreviated',
57586          context: 'formatting'
57587        });
57588      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
57589      case 'QQQQQ':
57590        return localize.quarter(quarter, {
57591          width: 'narrow',
57592          context: 'formatting'
57593        });
57594      // 1st quarter, 2nd quarter, ...
57595      case 'QQQQ':
57596      default:
57597        return localize.quarter(quarter, {
57598          width: 'wide',
57599          context: 'formatting'
57600        });
57601    }
57602  },
57603  // Stand-alone quarter
57604  q: function q(date, token, localize) {
57605    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
57606    switch (token) {
57607      // 1, 2, 3, 4
57608      case 'q':
57609        return String(quarter);
57610      // 01, 02, 03, 04
57611      case 'qq':
57612        return addLeadingZeros(quarter, 2);
57613      // 1st, 2nd, 3rd, 4th
57614      case 'qo':
57615        return localize.ordinalNumber(quarter, {
57616          unit: 'quarter'
57617        });
57618      // Q1, Q2, Q3, Q4
57619      case 'qqq':
57620        return localize.quarter(quarter, {
57621          width: 'abbreviated',
57622          context: 'standalone'
57623        });
57624      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
57625      case 'qqqqq':
57626        return localize.quarter(quarter, {
57627          width: 'narrow',
57628          context: 'standalone'
57629        });
57630      // 1st quarter, 2nd quarter, ...
57631      case 'qqqq':
57632      default:
57633        return localize.quarter(quarter, {
57634          width: 'wide',
57635          context: 'standalone'
57636        });
57637    }
57638  },
57639  // Month
57640  M: function M(date, token, localize) {
57641    var month = date.getUTCMonth();
57642    switch (token) {
57643      case 'M':
57644      case 'MM':
57645        return lightFormatters.M(date, token);
57646      // 1st, 2nd, ..., 12th
57647      case 'Mo':
57648        return localize.ordinalNumber(month + 1, {
57649          unit: 'month'
57650        });
57651      // Jan, Feb, ..., Dec
57652      case 'MMM':
57653        return localize.month(month, {
57654          width: 'abbreviated',
57655          context: 'formatting'
57656        });
57657      // J, F, ..., D
57658      case 'MMMMM':
57659        return localize.month(month, {
57660          width: 'narrow',
57661          context: 'formatting'
57662        });
57663      // January, February, ..., December
57664      case 'MMMM':
57665      default:
57666        return localize.month(month, {
57667          width: 'wide',
57668          context: 'formatting'
57669        });
57670    }
57671  },
57672  // Stand-alone month
57673  L: function L(date, token, localize) {
57674    var month = date.getUTCMonth();
57675    switch (token) {
57676      // 1, 2, ..., 12
57677      case 'L':
57678        return String(month + 1);
57679      // 01, 02, ..., 12
57680      case 'LL':
57681        return addLeadingZeros(month + 1, 2);
57682      // 1st, 2nd, ..., 12th
57683      case 'Lo':
57684        return localize.ordinalNumber(month + 1, {
57685          unit: 'month'
57686        });
57687      // Jan, Feb, ..., Dec
57688      case 'LLL':
57689        return localize.month(month, {
57690          width: 'abbreviated',
57691          context: 'standalone'
57692        });
57693      // J, F, ..., D
57694      case 'LLLLL':
57695        return localize.month(month, {
57696          width: 'narrow',
57697          context: 'standalone'
57698        });
57699      // January, February, ..., December
57700      case 'LLLL':
57701      default:
57702        return localize.month(month, {
57703          width: 'wide',
57704          context: 'standalone'
57705        });
57706    }
57707  },
57708  // Local week of year
57709  w: function w(date, token, localize, options) {
57710    var week = getUTCWeek(date, options);
57711    if (token === 'wo') {
57712      return localize.ordinalNumber(week, {
57713        unit: 'week'
57714      });
57715    }
57716    return addLeadingZeros(week, token.length);
57717  },
57718  // ISO week of year
57719  I: function I(date, token, localize) {
57720    var isoWeek = getUTCISOWeek(date);
57721    if (token === 'Io') {
57722      return localize.ordinalNumber(isoWeek, {
57723        unit: 'week'
57724      });
57725    }
57726    return addLeadingZeros(isoWeek, token.length);
57727  },
57728  // Day of the month
57729  d: function d(date, token, localize) {
57730    if (token === 'do') {
57731      return localize.ordinalNumber(date.getUTCDate(), {
57732        unit: 'date'
57733      });
57734    }
57735    return lightFormatters.d(date, token);
57736  },
57737  // Day of year
57738  D: function D(date, token, localize) {
57739    var dayOfYear = getUTCDayOfYear(date);
57740    if (token === 'Do') {
57741      return localize.ordinalNumber(dayOfYear, {
57742        unit: 'dayOfYear'
57743      });
57744    }
57745    return addLeadingZeros(dayOfYear, token.length);
57746  },
57747  // Day of week
57748  E: function E(date, token, localize) {
57749    var dayOfWeek = date.getUTCDay();
57750    switch (token) {
57751      // Tue
57752      case 'E':
57753      case 'EE':
57754      case 'EEE':
57755        return localize.day(dayOfWeek, {
57756          width: 'abbreviated',
57757          context: 'formatting'
57758        });
57759      // T
57760      case 'EEEEE':
57761        return localize.day(dayOfWeek, {
57762          width: 'narrow',
57763          context: 'formatting'
57764        });
57765      // Tu
57766      case 'EEEEEE':
57767        return localize.day(dayOfWeek, {
57768          width: 'short',
57769          context: 'formatting'
57770        });
57771      // Tuesday
57772      case 'EEEE':
57773      default:
57774        return localize.day(dayOfWeek, {
57775          width: 'wide',
57776          context: 'formatting'
57777        });
57778    }
57779  },
57780  // Local day of week
57781  e: function e(date, token, localize, options) {
57782    var dayOfWeek = date.getUTCDay();
57783    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
57784    switch (token) {
57785      // Numerical value (Nth day of week with current locale or weekStartsOn)
57786      case 'e':
57787        return String(localDayOfWeek);
57788      // Padded numerical value
57789      case 'ee':
57790        return addLeadingZeros(localDayOfWeek, 2);
57791      // 1st, 2nd, ..., 7th
57792      case 'eo':
57793        return localize.ordinalNumber(localDayOfWeek, {
57794          unit: 'day'
57795        });
57796      case 'eee':
57797        return localize.day(dayOfWeek, {
57798          width: 'abbreviated',
57799          context: 'formatting'
57800        });
57801      // T
57802      case 'eeeee':
57803        return localize.day(dayOfWeek, {
57804          width: 'narrow',
57805          context: 'formatting'
57806        });
57807      // Tu
57808      case 'eeeeee':
57809        return localize.day(dayOfWeek, {
57810          width: 'short',
57811          context: 'formatting'
57812        });
57813      // Tuesday
57814      case 'eeee':
57815      default:
57816        return localize.day(dayOfWeek, {
57817          width: 'wide',
57818          context: 'formatting'
57819        });
57820    }
57821  },
57822  // Stand-alone local day of week
57823  c: function c(date, token, localize, options) {
57824    var dayOfWeek = date.getUTCDay();
57825    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
57826    switch (token) {
57827      // Numerical value (same as in `e`)
57828      case 'c':
57829        return String(localDayOfWeek);
57830      // Padded numerical value
57831      case 'cc':
57832        return addLeadingZeros(localDayOfWeek, token.length);
57833      // 1st, 2nd, ..., 7th
57834      case 'co':
57835        return localize.ordinalNumber(localDayOfWeek, {
57836          unit: 'day'
57837        });
57838      case 'ccc':
57839        return localize.day(dayOfWeek, {
57840          width: 'abbreviated',
57841          context: 'standalone'
57842        });
57843      // T
57844      case 'ccccc':
57845        return localize.day(dayOfWeek, {
57846          width: 'narrow',
57847          context: 'standalone'
57848        });
57849      // Tu
57850      case 'cccccc':
57851        return localize.day(dayOfWeek, {
57852          width: 'short',
57853          context: 'standalone'
57854        });
57855      // Tuesday
57856      case 'cccc':
57857      default:
57858        return localize.day(dayOfWeek, {
57859          width: 'wide',
57860          context: 'standalone'
57861        });
57862    }
57863  },
57864  // ISO day of week
57865  i: function i(date, token, localize) {
57866    var dayOfWeek = date.getUTCDay();
57867    var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
57868    switch (token) {
57869      // 2
57870      case 'i':
57871        return String(isoDayOfWeek);
57872      // 02
57873      case 'ii':
57874        return addLeadingZeros(isoDayOfWeek, token.length);
57875      // 2nd
57876      case 'io':
57877        return localize.ordinalNumber(isoDayOfWeek, {
57878          unit: 'day'
57879        });
57880      // Tue
57881      case 'iii':
57882        return localize.day(dayOfWeek, {
57883          width: 'abbreviated',
57884          context: 'formatting'
57885        });
57886      // T
57887      case 'iiiii':
57888        return localize.day(dayOfWeek, {
57889          width: 'narrow',
57890          context: 'formatting'
57891        });
57892      // Tu
57893      case 'iiiiii':
57894        return localize.day(dayOfWeek, {
57895          width: 'short',
57896          context: 'formatting'
57897        });
57898      // Tuesday
57899      case 'iiii':
57900      default:
57901        return localize.day(dayOfWeek, {
57902          width: 'wide',
57903          context: 'formatting'
57904        });
57905    }
57906  },
57907  // AM or PM
57908  a: function a(date, token, localize) {
57909    var hours = date.getUTCHours();
57910    var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
57911    switch (token) {
57912      case 'a':
57913      case 'aa':
57914        return localize.dayPeriod(dayPeriodEnumValue, {
57915          width: 'abbreviated',
57916          context: 'formatting'
57917        });
57918      case 'aaa':
57919        return localize.dayPeriod(dayPeriodEnumValue, {
57920          width: 'abbreviated',
57921          context: 'formatting'
57922        }).toLowerCase();
57923      case 'aaaaa':
57924        return localize.dayPeriod(dayPeriodEnumValue, {
57925          width: 'narrow',
57926          context: 'formatting'
57927        });
57928      case 'aaaa':
57929      default:
57930        return localize.dayPeriod(dayPeriodEnumValue, {
57931          width: 'wide',
57932          context: 'formatting'
57933        });
57934    }
57935  },
57936  // AM, PM, midnight, noon
57937  b: function b(date, token, localize) {
57938    var hours = date.getUTCHours();
57939    var dayPeriodEnumValue;
57940    if (hours === 12) {
57941      dayPeriodEnumValue = dayPeriodEnum.noon;
57942    } else if (hours === 0) {
57943      dayPeriodEnumValue = dayPeriodEnum.midnight;
57944    } else {
57945      dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
57946    }
57947    switch (token) {
57948      case 'b':
57949      case 'bb':
57950        return localize.dayPeriod(dayPeriodEnumValue, {
57951          width: 'abbreviated',
57952          context: 'formatting'
57953        });
57954      case 'bbb':
57955        return localize.dayPeriod(dayPeriodEnumValue, {
57956          width: 'abbreviated',
57957          context: 'formatting'
57958        }).toLowerCase();
57959      case 'bbbbb':
57960        return localize.dayPeriod(dayPeriodEnumValue, {
57961          width: 'narrow',
57962          context: 'formatting'
57963        });
57964      case 'bbbb':
57965      default:
57966        return localize.dayPeriod(dayPeriodEnumValue, {
57967          width: 'wide',
57968          context: 'formatting'
57969        });
57970    }
57971  },
57972  // in the morning, in the afternoon, in the evening, at night
57973  B: function B(date, token, localize) {
57974    var hours = date.getUTCHours();
57975    var dayPeriodEnumValue;
57976    if (hours >= 17) {
57977      dayPeriodEnumValue = dayPeriodEnum.evening;
57978    } else if (hours >= 12) {
57979      dayPeriodEnumValue = dayPeriodEnum.afternoon;
57980    } else if (hours >= 4) {
57981      dayPeriodEnumValue = dayPeriodEnum.morning;
57982    } else {
57983      dayPeriodEnumValue = dayPeriodEnum.night;
57984    }
57985    switch (token) {
57986      case 'B':
57987      case 'BB':
57988      case 'BBB':
57989        return localize.dayPeriod(dayPeriodEnumValue, {
57990          width: 'abbreviated',
57991          context: 'formatting'
57992        });
57993      case 'BBBBB':
57994        return localize.dayPeriod(dayPeriodEnumValue, {
57995          width: 'narrow',
57996          context: 'formatting'
57997        });
57998      case 'BBBB':
57999      default:
58000        return localize.dayPeriod(dayPeriodEnumValue, {
58001          width: 'wide',
58002          context: 'formatting'
58003        });
58004    }
58005  },
58006  // Hour [1-12]
58007  h: function h(date, token, localize) {
58008    if (token === 'ho') {
58009      var hours = date.getUTCHours() % 12;
58010      if (hours === 0) hours = 12;
58011      return localize.ordinalNumber(hours, {
58012        unit: 'hour'
58013      });
58014    }
58015    return lightFormatters.h(date, token);
58016  },
58017  // Hour [0-23]
58018  H: function H(date, token, localize) {
58019    if (token === 'Ho') {
58020      return localize.ordinalNumber(date.getUTCHours(), {
58021        unit: 'hour'
58022      });
58023    }
58024    return lightFormatters.H(date, token);
58025  },
58026  // Hour [0-11]
58027  K: function K(date, token, localize) {
58028    var hours = date.getUTCHours() % 12;
58029    if (token === 'Ko') {
58030      return localize.ordinalNumber(hours, {
58031        unit: 'hour'
58032      });
58033    }
58034    return addLeadingZeros(hours, token.length);
58035  },
58036  // Hour [1-24]
58037  k: function k(date, token, localize) {
58038    var hours = date.getUTCHours();
58039    if (hours === 0) hours = 24;
58040    if (token === 'ko') {
58041      return localize.ordinalNumber(hours, {
58042        unit: 'hour'
58043      });
58044    }
58045    return addLeadingZeros(hours, token.length);
58046  },
58047  // Minute
58048  m: function m(date, token, localize) {
58049    if (token === 'mo') {
58050      return localize.ordinalNumber(date.getUTCMinutes(), {
58051        unit: 'minute'
58052      });
58053    }
58054    return lightFormatters.m(date, token);
58055  },
58056  // Second
58057  s: function s(date, token, localize) {
58058    if (token === 'so') {
58059      return localize.ordinalNumber(date.getUTCSeconds(), {
58060        unit: 'second'
58061      });
58062    }
58063    return lightFormatters.s(date, token);
58064  },
58065  // Fraction of second
58066  S: function S(date, token) {
58067    return lightFormatters.S(date, token);
58068  },
58069  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
58070  X: function X(date, token, _localize, options) {
58071    var originalDate = options._originalDate || date;
58072    var timezoneOffset = originalDate.getTimezoneOffset();
58073    if (timezoneOffset === 0) {
58074      return 'Z';
58075    }
58076    switch (token) {
58077      // Hours and optional minutes
58078      case 'X':
58079        return formatTimezoneWithOptionalMinutes(timezoneOffset);
58080
58081      // Hours, minutes and optional seconds without `:` delimiter
58082      // Note: neither ISO-8601 nor JavaScript supports seconds 
vendor: 6,655 bytes, lines 58082-58284
58082in timezone offsets
58083      // so this token always has the same output as `XX`
58084      case 'XXXX':
58085      case 'XX':
58086        // Hours and minutes without `:` delimiter
58087        return formatTimezone(timezoneOffset);
58088
58089      // Hours, minutes and optional seconds with `:` delimiter
58090      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
58091      // so this token always has the same output as `XXX`
58092      case 'XXXXX':
58093      case 'XXX': // Hours and minutes with `:` delimiter
58094      default:
58095        return formatTimezone(timezoneOffset, ':');
58096    }
58097  },
58098  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
58099  x: function x(date, token, _localize, options) {
58100    var originalDate = options._originalDate || date;
58101    var timezoneOffset = originalDate.getTimezoneOffset();
58102    switch (token) {
58103      // Hours and optional minutes
58104      case 'x':
58105        return formatTimezoneWithOptionalMinutes(timezoneOffset);
58106
58107      // Hours, minutes and optional seconds without `:` delimiter
58108      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
58109      // so this token always has the same output as `xx`
58110      case 'xxxx':
58111      case 'xx':
58112        // Hours and minutes without `:` delimiter
58113        return formatTimezone(timezoneOffset);
58114
58115      // Hours, minutes and optional seconds with `:` delimiter
58116      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
58117      // so this token always has the same output as `xxx`
58118      case 'xxxxx':
58119      case 'xxx': // Hours and minutes with `:` delimiter
58120      default:
58121        return formatTimezone(timezoneOffset, ':');
58122    }
58123  },
58124  // Timezone (GMT)
58125  O: function O(date, token, _localize, options) {
58126    var originalDate = options._originalDate || date;
58127    var timezoneOffset = originalDate.getTimezoneOffset();
58128    switch (token) {
58129      // Short
58130      case 'O':
58131      case 'OO':
58132      case 'OOO':
58133        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
58134      // Long
58135      case 'OOOO':
58136      default:
58137        return 'GMT' + formatTimezone(timezoneOffset, ':');
58138    }
58139  },
58140  // Timezone (specific non-location)
58141  z: function z(date, token, _localize, options) {
58142    var originalDate = options._originalDate || date;
58143    var timezoneOffset = originalDate.getTimezoneOffset();
58144    switch (token) {
58145      // Short
58146      case 'z':
58147      case 'zz':
58148      case 'zzz':
58149        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
58150      // Long
58151      case 'zzzz':
58152      default:
58153        return 'GMT' + formatTimezone(timezoneOffset, ':');
58154    }
58155  },
58156  // Seconds timestamp
58157  t: function t(date, token, _localize, options) {
58158    var originalDate = options._originalDate || date;
58159    var timestamp = Math.floor(originalDate.getTime() / 1000);
58160    return addLeadingZeros(timestamp, token.length);
58161  },
58162  // Milliseconds timestamp
58163  T: function T(date, token, _localize, options) {
58164    var originalDate = options._originalDate || date;
58165    var timestamp = originalDate.getTime();
58166    return addLeadingZeros(timestamp, token.length);
58167  }
58168};
58169function formatTimezoneShort(offset, dirtyDelimiter) {
58170  var sign = offset > 0 ? '-' : '+';
58171  var absOffset = Math.abs(offset);
58172  var hours = Math.floor(absOffset / 60);
58173  var minutes = absOffset % 60;
58174  if (minutes === 0) {
58175    return sign + String(hours);
58176  }
58177  var delimiter = dirtyDelimiter || '';
58178  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
58179}
58180function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
58181  if (offset % 60 === 0) {
58182    var sign = offset > 0 ? '-' : '+';
58183    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
58184  }
58185  return formatTimezone(offset, dirtyDelimiter);
58186}
58187function formatTimezone(offset, dirtyDelimiter) {
58188  var delimiter = dirtyDelimiter || '';
58189  var sign = offset > 0 ? '-' : '+';
58190  var absOffset = Math.abs(offset);
58191  var hours = addLeadingZeros(Math.floor(absOffset / 60), 2);
58192  var minutes = addLeadingZeros(absOffset % 60, 2);
58193  return sign + hours + delimiter + minutes;
58194}
58195/* harmony default export */ const format_formatters = (formatters_formatters);
58196;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/longFormatters/index.js
58197var dateLongFormatter = function dateLongFormatter(pattern, formatLong) {
58198  switch (pattern) {
58199    case 'P':
58200      return formatLong.date({
58201        width: 'short'
58202      });
58203    case 'PP':
58204      return formatLong.date({
58205        width: 'medium'
58206      });
58207    case 'PPP':
58208      return formatLong.date({
58209        width: 'long'
58210      });
58211    case 'PPPP':
58212    default:
58213      return formatLong.date({
58214        width: 'full'
58215      });
58216  }
58217};
58218var timeLongFormatter = function timeLongFormatter(pattern, formatLong) {
58219  switch (pattern) {
58220    case 'p':
58221      return formatLong.time({
58222        width: 'short'
58223      });
58224    case 'pp':
58225      return formatLong.time({
58226        width: 'medium'
58227      });
58228    case 'ppp':
58229      return formatLong.time({
58230        width: 'long'
58231      });
58232    case 'pppp':
58233    default:
58234      return formatLong.time({
58235        width: 'full'
58236      });
58237  }
58238};
58239var dateTimeLongFormatter = function dateTimeLongFormatter(pattern, formatLong) {
58240  var matchResult = pattern.match(/(P+)(p+)?/) || [];
58241  var datePattern = matchResult[1];
58242  var timePattern = matchResult[2];
58243  if (!timePattern) {
58244    return dateLongFormatter(pattern, formatLong);
58245  }
58246  var dateTimeFormat;
58247  switch (datePattern) {
58248    case 'P':
58249      dateTimeFormat = formatLong.dateTime({
58250        width: 'short'
58251      });
58252      break;
58253    case 'PP':
58254      dateTimeFormat = formatLong.dateTime({
58255        width: 'medium'
58256      });
58257      break;
58258    case 'PPP':
58259      dateTimeFormat = formatLong.dateTime({
58260        width: 'long'
58261      });
58262      break;
58263    case 'PPPP':
58264    default:
58265      dateTimeFormat = formatLong.dateTime({
58266        width: 'full'
58267      });
58268      break;
58269  }
58270  return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong));
58271};
58272var longFormatters = {
58273  p: timeLongFormatter,
58274  P: dateTimeLongFormatter
58275};
58276/* harmony default export */ const format_longFormatters = (longFormatters);
58277;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getTimezoneOffsetInMilliseconds/index.js
58278/**
58279 * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
58280 * They usually appear for dates that denote time before the timezones were introduced
58281 * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
58282 * and GMT+01:00:00 after that date)
58283 *
58284 * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
58285 * which would lead to incorrect calculations.
58286 *
58287 * This function returns the timezone offset in milliseconds that takes seconds in account.
58288 */
58289function getTimezoneOffsetInMilliseconds(date) {
58290  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
58291  utcDate.setUTCFullYear(date.getFullYear());
58292  return date.getTime() - utcDate.getTime();
58293}
58294;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/protectedTokens/index.js
58295var protectedDayOfYearTokens = ['D', 'DD'];
58296var protectedWeekYearTokens = ['YY', 'YYYY'];
58297function isProtectedDayOfYearToken(token) {
58298  return protectedDayOfYearTokens.indexOf(token) !== -1;
58299}
58300function isProtectedWeekYearToken(token) {
58301  return protectedWeekYearTokens.indexOf(token) !== -1;
58302}
58303function throwProtectedError(token, format, input) {
58304  if (token === 'YYYY') {
58305    throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
58306  } else if (token === 'YY') {
58307    throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").
vendor: 15,659 bytes, lines 58307-58821
58307concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
58308  } else if (token === 'D') {
58309    throw new RangeError("Use `d` instead of `D` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
58310  } else if (token === 'DD') {
58311    throw new RangeError("Use `dd` instead of `DD` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
58312  }
58313}
58314;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatDistance/index.js
58315var formatDistanceLocale = {
58316  lessThanXSeconds: {
58317    one: 'less than a second',
58318    other: 'less than {{count}} seconds'
58319  },
58320  xSeconds: {
58321    one: '1 second',
58322    other: '{{count}} seconds'
58323  },
58324  halfAMinute: 'half a minute',
58325  lessThanXMinutes: {
58326    one: 'less than a minute',
58327    other: 'less than {{count}} minutes'
58328  },
58329  xMinutes: {
58330    one: '1 minute',
58331    other: '{{count}} minutes'
58332  },
58333  aboutXHours: {
58334    one: 'about 1 hour',
58335    other: 'about {{count}} hours'
58336  },
58337  xHours: {
58338    one: '1 hour',
58339    other: '{{count}} hours'
58340  },
58341  xDays: {
58342    one: '1 day',
58343    other: '{{count}} days'
58344  },
58345  aboutXWeeks: {
58346    one: 'about 1 week',
58347    other: 'about {{count}} weeks'
58348  },
58349  xWeeks: {
58350    one: '1 week',
58351    other: '{{count}} weeks'
58352  },
58353  aboutXMonths: {
58354    one: 'about 1 month',
58355    other: 'about {{count}} months'
58356  },
58357  xMonths: {
58358    one: '1 month',
58359    other: '{{count}} months'
58360  },
58361  aboutXYears: {
58362    one: 'about 1 year',
58363    other: 'about {{count}} years'
58364  },
58365  xYears: {
58366    one: '1 year',
58367    other: '{{count}} years'
58368  },
58369  overXYears: {
58370    one: 'over 1 year',
58371    other: 'over {{count}} years'
58372  },
58373  almostXYears: {
58374    one: 'almost 1 year',
58375    other: 'almost {{count}} years'
58376  }
58377};
58378var formatDistance = function formatDistance(token, count, options) {
58379  var result;
58380  var tokenValue = formatDistanceLocale[token];
58381  if (typeof tokenValue === 'string') {
58382    result = tokenValue;
58383  } else if (count === 1) {
58384    result = tokenValue.one;
58385  } else {
58386    result = tokenValue.other.replace('{{count}}', count.toString());
58387  }
58388  if (options !== null && options !== void 0 && options.addSuffix) {
58389    if (options.comparison && options.comparison > 0) {
58390      return 'in ' + result;
58391    } else {
58392      return result + ' ago';
58393    }
58394  }
58395  return result;
58396};
58397/* harmony default export */ const _lib_formatDistance = (formatDistance);
58398;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildFormatLongFn/index.js
58399function buildFormatLongFn(args) {
58400  return function () {
58401    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
58402    // TODO: Remove String()
58403    var width = options.width ? String(options.width) : args.defaultWidth;
58404    var format = args.formats[width] || args.formats[args.defaultWidth];
58405    return format;
58406  };
58407}
58408;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatLong/index.js
58409
58410var dateFormats = {
58411  full: 'EEEE, MMMM do, y',
58412  long: 'MMMM do, y',
58413  medium: 'MMM d, y',
58414  short: 'MM/dd/yyyy'
58415};
58416var timeFormats = {
58417  full: 'h:mm:ss a zzzz',
58418  long: 'h:mm:ss a z',
58419  medium: 'h:mm:ss a',
58420  short: 'h:mm a'
58421};
58422var dateTimeFormats = {
58423  full: "{{date}} 'at' {{time}}",
58424  long: "{{date}} 'at' {{time}}",
58425  medium: '{{date}}, {{time}}',
58426  short: '{{date}}, {{time}}'
58427};
58428var formatLong = {
58429  date: buildFormatLongFn({
58430    formats: dateFormats,
58431    defaultWidth: 'full'
58432  }),
58433  time: buildFormatLongFn({
58434    formats: timeFormats,
58435    defaultWidth: 'full'
58436  }),
58437  dateTime: buildFormatLongFn({
58438    formats: dateTimeFormats,
58439    defaultWidth: 'full'
58440  })
58441};
58442/* harmony default export */ const _lib_formatLong = (formatLong);
58443;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatRelative/index.js
58444var formatRelativeLocale = {
58445  lastWeek: "'last' eeee 'at' p",
58446  yesterday: "'yesterday at' p",
58447  today: "'today at' p",
58448  tomorrow: "'tomorrow at' p",
58449  nextWeek: "eeee 'at' p",
58450  other: 'P'
58451};
58452var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
58453  return formatRelativeLocale[token];
58454};
58455/* harmony default export */ const _lib_formatRelative = (formatRelative);
58456;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildLocalizeFn/index.js
58457function buildLocalizeFn(args) {
58458  return function (dirtyIndex, options) {
58459    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
58460    var valuesArray;
58461    if (context === 'formatting' && args.formattingValues) {
58462      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
58463      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
58464      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
58465    } else {
58466      var _defaultWidth = args.defaultWidth;
58467      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
58468      valuesArray = args.values[_width] || args.values[_defaultWidth];
58469    }
58470    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
58471    // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
58472    return valuesArray[index];
58473  };
58474}
58475;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/localize/index.js
58476
58477var eraValues = {
58478  narrow: ['B', 'A'],
58479  abbreviated: ['BC', 'AD'],
58480  wide: ['Before Christ', 'Anno Domini']
58481};
58482var quarterValues = {
58483  narrow: ['1', '2', '3', '4'],
58484  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
58485  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
58486};
58487
58488// Note: in English, the names of days of the week and months are capitalized.
58489// If you are making a new locale based on this one, check if the same is true for the language you're working on.
58490// Generally, formatted dates should look like they are in the middle of a sentence,
58491// e.g. in Spanish language the weekdays and months should be in the lowercase.
58492var monthValues = {
58493  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
58494  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
58495  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
58496};
58497var dayValues = {
58498  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
58499  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
58500  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
58501  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
58502};
58503var dayPeriodValues = {
58504  narrow: {
58505    am: 'a',
58506    pm: 'p',
58507    midnight: 'mi',
58508    noon: 'n',
58509    morning: 'morning',
58510    afternoon: 'afternoon',
58511    evening: 'evening',
58512    night: 'night'
58513  },
58514  abbreviated: {
58515    am: 'AM',
58516    pm: 'PM',
58517    midnight: 'midnight',
58518    noon: 'noon',
58519    morning: 'morning',
58520    afternoon: 'afternoon',
58521    evening: 'evening',
58522    night: 'night'
58523  },
58524  wide: {
58525    am: 'a.m.',
58526    pm: 'p.m.',
58527    midnight: 'midnight',
58528    noon: 'noon',
58529    morning: 'morning',
58530    afternoon: 'afternoon',
58531    evening: 'evening',
58532    night: 'night'
58533  }
58534};
58535var formattingDayPeriodValues = {
58536  narrow: {
58537    am: 'a',
58538    pm: 'p',
58539    midnight: 'mi',
58540    noon: 'n',
58541    morning: 'in the morning',
58542    afternoon: 'in the afternoon',
58543    evening: 'in the evening',
58544    night: 'at night'
58545  },
58546  abbreviated: {
58547    am: 'AM',
58548    pm: 'PM',
58549    midnight: 'midnight',
58550    noon: 'noon',
58551    morning: 'in the morning',
58552    afternoon: 'in the afternoon',
58553    evening: 'in the evening',
58554    night: 'at night'
58555  },
58556  wide: {
58557    am: 'a.m.',
58558    pm: 'p.m.',
58559    midnight: 'midnight',
58560    noon: 'noon',
58561    morning: 'in the morning',
58562    afternoon: 'in the afternoon',
58563    evening: 'in the evening',
58564    night: 'at night'
58565  }
58566};
58567var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
58568  var number = Number(dirtyNumber);
58569
58570  // If ordinal numbers depend on context, for example,
58571  // if they are different for different grammatical genders,
58572  // use `options.unit`.
58573  //
58574  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
58575  // 'day', 'hour', 'minute', 'second'.
58576
58577  var rem100 = number % 100;
58578  if (rem100 > 20 || rem100 < 10) {
58579    switch (rem100 % 10) {
58580      case 1:
58581        return number + 'st';
58582      case 2:
58583        return number + 'nd';
58584      case 3:
58585        return number + 'rd';
58586    }
58587  }
58588  return number + 'th';
58589};
58590var localize = {
58591  ordinalNumber: ordinalNumber,
58592  era: buildLocalizeFn({
58593    values: eraValues,
58594    defaultWidth: 'wide'
58595  }),
58596  quarter: buildLocalizeFn({
58597    values: quarterValues,
58598    defaultWidth: 'wide',
58599    argumentCallback: function argumentCallback(quarter) {
58600      return quarter - 1;
58601    }
58602  }),
58603  month: buildLocalizeFn({
58604    values: monthValues,
58605    defaultWidth: 'wide'
58606  }),
58607  day: buildLocalizeFn({
58608    values: dayValues,
58609    defaultWidth: 'wide'
58610  }),
58611  dayPeriod: buildLocalizeFn({
58612    values: dayPeriodValues,
58613    defaultWidth: 'wide',
58614    formattingValues: formattingDayPeriodValues,
58615    defaultFormattingWidth: 'wide'
58616  })
58617};
58618/* harmony default export */ const _lib_localize = (localize);
58619;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchFn/index.js
58620function buildMatchFn(args) {
58621  return function (string) {
58622    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
58623    var width = options.width;
58624    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
58625    var matchResult = string.match(matchPattern);
58626    if (!matchResult) {
58627      return null;
58628    }
58629    var matchedString = matchResult[0];
58630    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
58631    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
58632      return pattern.test(matchedString);
58633    }) : findKey(parsePatterns, function (pattern) {
58634      return pattern.test(matchedString);
58635    });
58636    var value;
58637    value = args.valueCallback ? args.valueCallback(key) : key;
58638    value = options.valueCallback ? options.valueCallback(value) : value;
58639    var rest = string.slice(matchedString.length);
58640    return {
58641      value: value,
58642      rest: rest
58643    };
58644  };
58645}
58646function findKey(object, predicate) {
58647  for (var key in object) {
58648    if (object.hasOwnProperty(key) && predicate(object[key])) {
58649      return key;
58650    }
58651  }
58652  return undefined;
58653}
58654function findIndex(array, predicate) {
58655  for (var key = 0; key < array.length; key++) {
58656    if (predicate(array[key])) {
58657      return key;
58658    }
58659  }
58660  return undefined;
58661}
58662;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchPatternFn/index.js
58663function buildMatchPatternFn(args) {
58664  return function (string) {
58665    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
58666    var matchResult = string.match(args.matchPattern);
58667    if (!matchResult) return null;
58668    var matchedString = matchResult[0];
58669    var parseResult = string.match(args.parsePattern);
58670    if (!parseResult) return null;
58671    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
58672    value = options.valueCallback ? options.valueCallback(value) : value;
58673    var rest = string.slice(matchedString.length);
58674    return {
58675      value: value,
58676      rest: rest
58677    };
58678  };
58679}
58680;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/match/index.js
58681
58682
58683var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
58684var parseOrdinalNumberPattern = /\d+/i;
58685var matchEraPatterns = {
58686  narrow: /^(b|a)/i,
58687  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
58688  wide: /^(before christ|before common era|anno domini|common era)/i
58689};
58690var parseEraPatterns = {
58691  any: [/^b/i, /^(a|c)/i]
58692};
58693var matchQuarterPatterns = {
58694  narrow: /^[1234]/i,
58695  abbreviated: /^q[1234]/i,
58696  wide: /^[1234](th|st|nd|rd)? quarter/i
58697};
58698var parseQuarterPatterns = {
58699  any: [/1/i, /2/i, /3/i, /4/i]
58700};
58701var matchMonthPatterns = {
58702  narrow: /^[jfmasond]/i,
58703  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
58704  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
58705};
58706var parseMonthPatterns = {
58707  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
58708  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
58709};
58710var matchDayPatterns = {
58711  narrow: /^[smtwf]/i,
58712  short: /^(su|mo|tu|we|th|fr|sa)/i,
58713  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
58714  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
58715};
58716var parseDayPatterns = {
58717  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
58718  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
58719};
58720var matchDayPeriodPatterns = {
58721  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
58722  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
58723};
58724var parseDayPeriodPatterns = {
58725  any: {
58726    am: /^a/i,
58727    pm: /^p/i,
58728    midnight: /^mi/i,
58729    noon: /^no/i,
58730    morning: /morning/i,
58731    afternoon: /afternoon/i,
58732    evening: /evening/i,
58733    night: /night/i
58734  }
58735};
58736var match_match = {
58737  ordinalNumber: buildMatchPatternFn({
58738    matchPattern: matchOrdinalNumberPattern,
58739    parsePattern: parseOrdinalNumberPattern,
58740    valueCallback: function valueCallback(value) {
58741      return parseInt(value, 10);
58742    }
58743  }),
58744  era: buildMatchFn({
58745    matchPatterns: matchEraPatterns,
58746    defaultMatchWidth: 'wide',
58747    parsePatterns: parseEraPatterns,
58748    defaultParseWidth: 'any'
58749  }),
58750  quarter: buildMatchFn({
58751    matchPatterns: matchQuarterPatterns,
58752    defaultMatchWidth: 'wide',
58753    parsePatterns: parseQuarterPatterns,
58754    defaultParseWidth: 'any',
58755    valueCallback: function valueCallback(index) {
58756      return index + 1;
58757    }
58758  }),
58759  month: buildMatchFn({
58760    matchPatterns: matchMonthPatterns,
58761    defaultMatchWidth: 'wide',
58762    parsePatterns: parseMonthPatterns,
58763    defaultParseWidth: 'any'
58764  }),
58765  day: buildMatchFn({
58766    matchPatterns: matchDayPatterns,
58767    defaultMatchWidth: 'wide',
58768    parsePatterns: parseDayPatterns,
58769    defaultParseWidth: 'any'
58770  }),
58771  dayPeriod: buildMatchFn({
58772    matchPatterns: matchDayPeriodPatterns,
58773    defaultMatchWidth: 'any',
58774    parsePatterns: parseDayPeriodPatterns,
58775    defaultParseWidth: 'any'
58776  })
58777};
58778/* harmony default export */ const _lib_match = (match_match);
58779;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/index.js
58780
58781
58782
58783
58784
58785/**
58786 * @type {Locale}
58787 * @category Locales
58788 * @summary English locale (United States).
58789 * @language English
58790 * @iso-639-2 eng
58791 * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
58792 * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
58793 */
58794var locale = {
58795  code: 'en-US',
58796  formatDistance: _lib_formatDistance,
58797  formatLong: _lib_formatLong,
58798  formatRelative: _lib_formatRelative,
58799  localize: _lib_localize,
58800  match: _lib_match,
58801  options: {
58802    weekStartsOn: 0 /* Sunday */,
58803    firstWeekContainsDate: 1
58804  }
58805};
58806/* harmony default export */ const en_US = (locale);
58807;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultLocale/index.js
58808
58809/* harmony default export */ const defaultLocale = (en_US);
58810;// CONCATENATED MODULE: ./node_modules/date-fns/esm/format/index.js
58811
58812
58813
58814
58815
58816
58817
58818
58819
58820
58821 // This RegExp consists of three parts separated by `|`:
vendor: 22,713 bytes, lines 58821-59135
58821
58822// - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
58823//   (one of the certain letters followed by `o`)
58824// - (\w)\1* matches any sequences of the same letter
58825// - '' matches two quote characters in a row
58826// - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('),
58827//   except a single quote symbol, which ends the sequence.
58828//   Two quote characters do not end the sequence.
58829//   If there is no matching single quote
58830//   then the sequence will continue until the end of the string.
58831// - . matches any single character unmatched by previous parts of the RegExps
58832var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
58833
58834// This RegExp catches symbols escaped by quotes, and also
58835// sequences of symbols P, p, and the combinations like `PPPPPPPppppp`
58836var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
58837var escapedStringRegExp = /^'([^]*?)'?$/;
58838var doubleQuoteRegExp = /''/g;
58839var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
58840
58841/**
58842 * @name format
58843 * @category Common Helpers
58844 * @summary Format the date.
58845 *
58846 * @description
58847 * Return the formatted date string in the given format. The result may vary by locale.
58848 *
58849 * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
58850 * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
58851 *
58852 * The characters wrapped between two single quotes characters (') are escaped.
58853 * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
58854 * (see the last example)
58855 *
58856 * Format of the string is based on Unicode Technical Standard #35:
58857 * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
58858 * with a few additions (see note 7 below the table).
58859 *
58860 * Accepted patterns:
58861 * | Unit                            | Pattern | Result examples                   | Notes |
58862 * |---------------------------------|---------|-----------------------------------|-------|
58863 * | Era                             | G..GGG  | AD, BC                            |       |
58864 * |                                 | GGGG    | Anno Domini, Before Christ        | 2     |
58865 * |                                 | GGGGG   | A, B                              |       |
58866 * | Calendar year                   | y       | 44, 1, 1900, 2017                 | 5     |
58867 * |                                 | yo      | 44th, 1st, 0th, 17th              | 5,7   |
58868 * |                                 | yy      | 44, 01, 00, 17                    | 5     |
58869 * |                                 | yyy     | 044, 001, 1900, 2017              | 5     |
58870 * |                                 | yyyy    | 0044, 0001, 1900, 2017            | 5     |
58871 * |                                 | yyyyy   | ...                               | 3,5   |
58872 * | Local week-numbering year       | Y       | 44, 1, 1900, 2017                 | 5     |
58873 * |                                 | Yo      | 44th, 1st, 1900th, 2017th         | 5,7   |
58874 * |                                 | YY      | 44, 01, 00, 17                    | 5,8   |
58875 * |                                 | YYY     | 044, 001, 1900, 2017              | 5     |
58876 * |                                 | YYYY    | 0044, 0001, 1900, 2017            | 5,8   |
58877 * |                                 | YYYYY   | ...                               | 3,5   |
58878 * | ISO week-numbering year         | R       | -43, 0, 1, 1900, 2017             | 5,7   |
58879 * |                                 | RR      | -43, 00, 01, 1900, 2017           | 5,7   |
58880 * |                                 | RRR     | -043, 000, 001, 1900, 2017        | 5,7   |
58881 * |                                 | RRRR    | -0043, 0000, 0001, 1900, 2017     | 5,7   |
58882 * |                                 | RRRRR   | ...                               | 3,5,7 |
58883 * | Extended year                   | u       | -43, 0, 1, 1900, 2017             | 5     |
58884 * |                                 | uu      | -43, 01, 1900, 2017               | 5     |
58885 * |                                 | uuu     | -043, 001, 1900, 2017             | 5     |
58886 * |                                 | uuuu    | -0043, 0001, 1900, 2017           | 5     |
58887 * |                                 | uuuuu   | ...                               | 3,5   |
58888 * | Quarter (formatting)            | Q       | 1, 2, 3, 4                        |       |
58889 * |                                 | Qo      | 1st, 2nd, 3rd, 4th                | 7     |
58890 * |                                 | QQ      | 01, 02, 03, 04                    |       |
58891 * |                                 | QQQ     | Q1, Q2, Q3, Q4                    |       |
58892 * |                                 | QQQQ    | 1st quarter, 2nd quarter, ...     | 2     |
58893 * |                                 | QQQQQ   | 1, 2, 3, 4                        | 4     |
58894 * | Quarter (stand-alone)           | q       | 1, 2, 3, 4                        |       |
58895 * |                                 | qo      | 1st, 2nd, 3rd, 4th                | 7     |
58896 * |                                 | qq      | 01, 02, 03, 04                    |       |
58897 * |                                 | qqq     | Q1, Q2, Q3, Q4                    |       |
58898 * |                                 | qqqq    | 1st quarter, 2nd quarter, ...     | 2     |
58899 * |                                 | qqqqq   | 1, 2, 3, 4                        | 4     |
58900 * | Month (formatting)              | M       | 1, 2, ..., 12                     |       |
58901 * |                                 | Mo      | 1st, 2nd, ..., 12th               | 7     |
58902 * |                                 | MM      | 01, 02, ..., 12                   |       |
58903 * |                                 | MMM     | Jan, Feb, ..., Dec                |       |
58904 * |                                 | MMMM    | January, February, ..., December  | 2     |
58905 * |                                 | MMMMM   | J, F, ..., D                      |       |
58906 * | Month (stand-alone)             | L       | 1, 2, ..., 12                     |       |
58907 * |                                 | Lo      | 1st, 2nd, ..., 12th               | 7     |
58908 * |                                 | LL      | 01, 02, ..., 12                   |       |
58909 * |                                 | LLL     | Jan, Feb, ..., Dec                |       |
58910 * |                                 | LLLL    | January, February, ..., December  | 2     |
58911 * |                                 | LLLLL   | J, F, ..., D                      |       |
58912 * | Local week of year              | w       | 1, 2, ..., 53                     |       |
58913 * |                                 | wo      | 1st, 2nd, ..., 53th               | 7     |
58914 * |                                 | ww      | 01, 02, ..., 53                   |       |
58915 * | ISO week of year                | I       | 1, 2, ..., 53                     | 7     |
58916 * |                                 | Io      | 1st, 2nd, ..., 53th               | 7     |
58917 * |                                 | II      | 01, 02, ..., 53                   | 7     |
58918 * | Day of month                    | d       | 1, 2, ..., 31                     |       |
58919 * |                                 | do      | 1st, 2nd, ..., 31st               | 7     |
58920 * |                                 | dd      | 01, 02, ..., 31                   |       |
58921 * | Day of year                     | D       | 1, 2, ..., 365, 366               | 9     |
58922 * |                                 | Do      | 1st, 2nd, ..., 365th, 366th       | 7     |
58923 * |                                 | DD      | 01, 02, ..., 365, 366             | 9     |
58924 * |                                 | DDD     | 001, 002, ..., 365, 366           |       |
58925 * |                                 | DDDD    | ...                               | 3     |
58926 * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
58927 * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
58928 * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
58929 * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
58930 * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
58931 * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
58932 * |                                 | ii      | 01, 02, ..., 07                   | 7     |
58933 * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
58934 * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
58935 * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
58936 * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
58937 * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
58938 * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
58939 * |                                 | ee      | 02, 03, ..., 01                   |       |
58940 * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
58941 * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
58942 * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
58943 * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
58944 * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
58945 * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
58946 * |                                 | cc      | 02, 03, ..., 01                   |       |
58947 * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
58948 * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
58949 * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
58950 * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
58951 * | AM, PM                          | a..aa   | AM, PM                            |       |
58952 * |                                 | aaa     | am, pm                            |       |
58953 * |                                 | aaaa    | a.m., p.m.                        | 2     |
58954 * |                                 | aaaaa   | a, p                              |       |
58955 * | AM, PM, noon, midnight          | b..bb   | AM, PM, noon, midnight            |       |
58956 * |                                 | bbb     | am, pm, noon, midnight            |       |
58957 * |                                 | bbbb    | a.m., p.m., noon, midnight        | 2     |
58958 * |                                 | bbbbb   | a, p, n, mi                       |       |
58959 * | Flexible day period             | B..BBB  | at night, in the morning, ...     |       |
58960 * |                                 | BBBB    | at night, in the morning, ...     | 2     |
58961 * |                                 | BBBBB   | at night, in the morning, ...     |       |
58962 * | Hour [1-12]                     | h       | 1, 2, ..., 11, 12                 |       |
58963 * |                                 | ho      | 1st, 2nd, ..., 11th, 12th         | 7     |
58964 * |                                 | hh      | 01, 02, ..., 11, 12               |       |
58965 * | Hour [0-23]                     | H       | 0, 1, 2, ..., 23                  |       |
58966 * |                                 | Ho      | 0th, 1st, 2nd, ..., 23rd          | 7     |
58967 * |                                 | HH      | 00, 01, 02, ..., 23               |       |
58968 * | Hour [0-11]                     | K       | 1, 2, ..., 11, 0                  |       |
58969 * |                                 | Ko      | 1st, 2nd, ..., 11th, 0th          | 7     |
58970 * |                                 | KK      | 01, 02, ..., 11, 00               |       |
58971 * | Hour [1-24]                     | k       | 24, 1, 2, ..., 23                 |       |
58972 * |                                 | ko      | 24th, 1st, 2nd, ..., 23rd         | 7     |
58973 * |                                 | kk      | 24, 01, 02, ..., 23               |       |
58974 * | Minute                          | m       | 0, 1, ..., 59                     |       |
58975 * |                                 | mo      | 0th, 1st, ..., 59th               | 7     |
58976 * |                                 | mm      | 00, 01, ..., 59                   |       |
58977 * | Second                          | s       | 0, 1, ..., 59                     |       |
58978 * |                                 | so      | 0th, 1st, ..., 59th               | 7     |
58979 * |                                 | ss      | 00, 01, ..., 59                   |       |
58980 * | Fraction of second              | S       | 0, 1, ..., 9                      |       |
58981 * |                                 | SS      | 00, 01, ..., 99                   |       |
58982 * |                                 | SSS     | 000, 001, ..., 999                |       |
58983 * |                                 | SSSS    | ...                               | 3     |
58984 * | Timezone (ISO-8601 w/ Z)        | X       | -08, +0530, Z                     |       |
58985 * |                                 | XX      | -0800, +0530, Z                   |       |
58986 * |                                 | XXX     | -08:00, +05:30, Z                 |       |
58987 * |                                 | XXXX    | -0800, +0530, Z, +123456          | 2     |
58988 * |                                 | XXXXX   | -08:00, +05:30, Z, +12:34:56      |       |
58989 * | Timezone (ISO-8601 w/o Z)       | x       | -08, +0530, +00                   |       |
58990 * |                                 | xx      | -0800, +0530, +0000               |       |
58991 * |                                 | xxx     | -08:00, +05:30, +00:00            | 2     |
58992 * |                                 | xxxx    | -0800, +0530, +0000, +123456      |       |
58993 * |                                 | xxxxx   | -08:00, +05:30, +00:00, +12:34:56 |       |
58994 * | Timezone (GMT)                  | O...OOO | GMT-8, GMT+5:30, GMT+0            |       |
58995 * |                                 | OOOO    | GMT-08:00, GMT+05:30, GMT+00:00   | 2     |
58996 * | Timezone (specific non-locat.)  | z...zzz | GMT-8, GMT+5:30, GMT+0            | 6     |
58997 * |                                 | zzzz    | GMT-08:00, GMT+05:30, GMT+00:00   | 2,6   |
58998 * | Seconds timestamp               | t       | 512969520                         | 7     |
58999 * |                                 | tt      | ...                               | 3,7   |
59000 * | Milliseconds timestamp          | T       | 512969520900                      | 7     |
59001 * |                                 | TT      | ...                               | 3,7   |
59002 * | Long localized date             | P       | 04/29/1453                        | 7     |
59003 * |                                 | PP      | Apr 29, 1453                      | 7     |
59004 * |                                 | PPP     | April 29th, 1453                  | 7     |
59005 * |                                 | PPPP    | Friday, April 29th, 1453          | 2,7   |
59006 * | Long localized time             | p       | 12:00 AM                          | 7     |
59007 * |                                 | pp      | 12:00:00 AM                       | 7     |
59008 * |                                 | ppp     | 12:00:00 AM GMT+2                 | 7     |
59009 * |                                 | pppp    | 12:00:00 AM GMT+02:00             | 2,7   |
59010 * | Combination of date and time    | Pp      | 04/29/1453, 12:00 AM              | 7     |
59011 * |                                 | PPpp    | Apr 29, 1453, 12:00:00 AM         | 7     |
59012 * |                                 | PPPppp  | April 29th, 1453 at ...           | 7     |
59013 * |                                 | PPPPpppp| Friday, April 29th, 1453 at ...   | 2,7   |
59014 * Notes:
59015 * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
59016 *    are the same as "stand-alone" units, but are different in some languages.
59017 *    "Formatting" units are declined according to the rules of the language
59018 *    in the context of a date. "Stand-alone" units are always nominative singular:
59019 *
59020 *    `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
59021 *
59022 *    `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
59023 *
59024 * 2. Any sequence of the identical letters is a pattern, unless it is escaped by
59025 *    the single quote characters (see below).
59026 *    If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`)
59027 *    the output will be the same as default pattern for this unit, usually
59028 *    the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units
59029 *    are marked with "2" in the last column of the table.
59030 *
59031 *    `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'`
59032 *
59033 *    `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'`
59034 *
59035 *    `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'`
59036 *
59037 *    `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'`
59038 *
59039 *    `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'`
59040 *
59041 * 3. Some patterns could be unlimited length (such as `yyyyyyyy`).
59042 *    The output will be padded with zeros to match the length of the pattern.
59043 *
59044 *    `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'`
59045 *
59046 * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
59047 *    These tokens represent the shortest form of the quarter.
59048 *
59049 * 5. The main difference between `y` and `u` patterns are B.C. years:
59050 *
59051 *    | Year | `y` | `u` |
59052 *    |------|-----|-----|
59053 *    | AC 1 |   1 |   1 |
59054 *    | BC 1 |   1 |   0 |
59055 *    | BC 2 |   2 |  -1 |
59056 *
59057 *    Also `yy` always returns the last two digits of a year,
59058 *    while `uu` pads single digit years to 2 characters and returns other years unchanged:
59059 *
59060 *    | Year | `yy` | `uu` |
59061 *    |------|------|------|
59062 *    | 1    |   01 |   01 |
59063 *    | 14   |   14 |   14 |
59064 *    | 376  |   76 |  376 |
59065 *    | 1453 |   53 | 1453 |
59066 *
59067 *    The same difference is true for local and ISO week-numbering years (`Y` and `R`),
59068 *    except local week-numbering years are dependent on `options.weekStartsOn`
59069 *    and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear}
59070 *    and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}).
59071 *
59072 * 6. Specific non-location timezones are currently unavailable in `date-fns`,
59073 *    so right now these tokens fall back to GMT timezones.
59074 *
59075 * 7. These patterns are not in the Unicode Technical Standard #35:
59076 *    - `i`: ISO day of week
59077 *    - `I`: ISO week of year
59078 *    - `R`: ISO week-numbering year
59079 *    - `t`: seconds timestamp
59080 *    - `T`: milliseconds timestamp
59081 *    - `o`: ordinal number modifier
59082 *    - `P`: long localized date
59083 *    - `p`: long localized time
59084 *
59085 * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
59086 *    You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59087 *
59088 * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month.
59089 *    You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59090 *
59091 * @param {Date|Number} date - the original date
59092 * @param {String} format - the string of tokens
59093 * @param {Object} [options] - an object with options.
59094 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
59095 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
59096 * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is
59097 * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
59098 *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59099 * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
59100 *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59101 * @returns {String} the formatted date string
59102 * @throws {TypeError} 2 arguments required
59103 * @throws {RangeError} `date` must not be Invalid Date
59104 * @throws {RangeError} `options.locale` must contain `localize` property
59105 * @throws {RangeError} `options.locale` must contain `formatLong` property
59106 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
59107 * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7
59108 * @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59109 * @throws {RangeError} use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59110 * @throws {RangeError} use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59111 * @throws {RangeError} use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
59112 * @throws {RangeError} format string contains an unescaped latin alphabet character
59113 *
59114 * @example
59115 * // Represent 11 February 2014 in middle-endian format:
59116 * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy')
59117 * //=> '02/11/2014'
59118 *
59119 * @example
59120 * // Represent 2 July 2014 in Esperanto:
59121 * import { eoLocale } from 'date-fns/locale/eo'
59122 * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", {
59123 *   locale: eoLocale
59124 * })
59125 * //=> '2-a de julio 2014'
59126 *
59127 * @example
59128 * // Escape string by single quote characters:
59129 * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'")
59130 * //=> "3 o'clock"
59131 */
59132
59133function format(dirtyDate, dirtyFormatStr, options) {
59134  var _ref, _options$locale, _ref2, _ref3, _ref4, _options$firstWeekCon, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2, _ref5, _ref6, _ref7, _options$weekStartsOn, _options$locale3, _options$locale3$opti, _defaultOptions$local3, _defaultOptions$local4;
59135  requiredArgs
vendor: 4,498 bytes, lines 59135-59192
59135_requiredArgs(2, arguments);
59136  var formatStr = String(dirtyFormatStr);
59137  var defaultOptions = getDefaultOptions();
59138  var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale;
59139  var firstWeekContainsDate = toInteger_toInteger((_ref2 = (_ref3 = (_ref4 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.firstWeekContainsDate) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : 1);
59140
59141  // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
59142  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
59143    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
59144  }
59145  var weekStartsOn = toInteger_toInteger((_ref5 = (_ref6 = (_ref7 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale3 = options.locale) === null || _options$locale3 === void 0 ? void 0 : (_options$locale3$opti = _options$locale3.options) === null || _options$locale3$opti === void 0 ? void 0 : _options$locale3$opti.weekStartsOn) !== null && _ref7 !== void 0 ? _ref7 : defaultOptions.weekStartsOn) !== null && _ref6 !== void 0 ? _ref6 : (_defaultOptions$local3 = defaultOptions.locale) === null || _defaultOptions$local3 === void 0 ? void 0 : (_defaultOptions$local4 = _defaultOptions$local3.options) === null || _defaultOptions$local4 === void 0 ? void 0 : _defaultOptions$local4.weekStartsOn) !== null && _ref5 !== void 0 ? _ref5 : 0);
59146
59147  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
59148  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
59149    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
59150  }
59151  if (!locale.localize) {
59152    throw new RangeError('locale must contain localize property');
59153  }
59154  if (!locale.formatLong) {
59155    throw new RangeError('locale must contain formatLong property');
59156  }
59157  var originalDate = toDate_toDate(dirtyDate);
59158  if (!isValid(originalDate)) {
59159    throw new RangeError('Invalid time value');
59160  }
59161
59162  // Convert the date in system timezone to the same date in UTC+00:00 timezone.
59163  // This ensures that when UTC functions will be implemented, locales will be compatible with them.
59164  // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
59165  var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate);
59166  var utcDate = subMilliseconds(originalDate, timezoneOffset);
59167  var formatterOptions = {
59168    firstWeekContainsDate: firstWeekContainsDate,
59169    weekStartsOn: weekStartsOn,
59170    locale: locale,
59171    _originalDate: originalDate
59172  };
59173  var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) {
59174    var firstCharacter = substring[0];
59175    if (firstCharacter === 'p' || firstCharacter === 'P') {
59176      var longFormatter = format_longFormatters[firstCharacter];
59177      return longFormatter(substring, locale.formatLong);
59178    }
59179    return substring;
59180  }).join('').match(formattingTokensRegExp).map(function (substring) {
59181    // Replace two single quote characters with one single quote character
59182    if (substring === "''") {
59183      return "'";
59184    }
59185    var firstCharacter = substring[0];
59186    if (firstCharacter === "'") {
59187      return cleanEscapedString(substring);
59188    }
59189    var formatter = format_formatters[firstCharacter];
59190    if (formatter) {
59191      if (!(options !== null && options !== void 0 && options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(substring)) {
59192        throwProtectedError(substring, dirtyFormatStr, String(dirt
vendor: 4,932 bytes, lines 59192-59335
59192yDate));
59193      }
59194      if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(substring)) {
59195        throwProtectedError(substring, dirtyFormatStr, String(dirtyDate));
59196      }
59197      return formatter(utcDate, substring, locale.localize, formatterOptions);
59198    }
59199    if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
59200      throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`');
59201    }
59202    return substring;
59203  }).join('');
59204  return result;
59205}
59206function cleanEscapedString(input) {
59207  var matched = input.match(escapedStringRegExp);
59208  if (!matched) {
59209    return input;
59210  }
59211  return matched[1].replace(doubleQuoteRegExp, "'");
59212}
59213;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameMonth/index.js
59214
59215
59216/**
59217 * @name isSameMonth
59218 * @category Month Helpers
59219 * @summary Are the given dates in the same month (and year)?
59220 *
59221 * @description
59222 * Are the given dates in the same month (and year)?
59223 *
59224 * @param {Date|Number} dateLeft - the first date to check
59225 * @param {Date|Number} dateRight - the second date to check
59226 * @returns {Boolean} the dates are in the same month (and year)
59227 * @throws {TypeError} 2 arguments required
59228 *
59229 * @example
59230 * // Are 2 September 2014 and 25 September 2014 in the same month?
59231 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2014, 8, 25))
59232 * //=> true
59233 *
59234 * @example
59235 * // Are 2 September 2014 and 25 September 2015 in the same month?
59236 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2015, 8, 25))
59237 * //=> false
59238 */
59239function isSameMonth(dirtyDateLeft, dirtyDateRight) {
59240  requiredArgs_requiredArgs(2, arguments);
59241  var dateLeft = toDate_toDate(dirtyDateLeft);
59242  var dateRight = toDate_toDate(dirtyDateRight);
59243  return dateLeft.getFullYear() === dateRight.getFullYear() && dateLeft.getMonth() === dateRight.getMonth();
59244}
59245;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isEqual/index.js
59246
59247
59248/**
59249 * @name isEqual
59250 * @category Common Helpers
59251 * @summary Are the given dates equal?
59252 *
59253 * @description
59254 * Are the given dates equal?
59255 *
59256 * @param {Date|Number} dateLeft - the first date to compare
59257 * @param {Date|Number} dateRight - the second date to compare
59258 * @returns {Boolean} the dates are equal
59259 * @throws {TypeError} 2 arguments required
59260 *
59261 * @example
59262 * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
59263 * const result = isEqual(
59264 *   new Date(2014, 6, 2, 6, 30, 45, 0),
59265 *   new Date(2014, 6, 2, 6, 30, 45, 500)
59266 * )
59267 * //=> false
59268 */
59269function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) {
59270  requiredArgs_requiredArgs(2, arguments);
59271  var dateLeft = toDate_toDate(dirtyLeftDate);
59272  var dateRight = toDate_toDate(dirtyRightDate);
59273  return dateLeft.getTime() === dateRight.getTime();
59274}
59275;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameDay/index.js
59276
59277
59278/**
59279 * @name isSameDay
59280 * @category Day Helpers
59281 * @summary Are the given dates in the same day (and year and month)?
59282 *
59283 * @description
59284 * Are the given dates in the same day (and year and month)?
59285 *
59286 * @param {Date|Number} dateLeft - the first date to check
59287 * @param {Date|Number} dateRight - the second date to check
59288 * @returns {Boolean} the dates are in the same day (and year and month)
59289 * @throws {TypeError} 2 arguments required
59290 *
59291 * @example
59292 * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
59293 * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
59294 * //=> true
59295 *
59296 * @example
59297 * // Are 4 September and 4 October in the same day?
59298 * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
59299 * //=> false
59300 *
59301 * @example
59302 * // Are 4 September, 2014 and 4 September, 2015 in the same day?
59303 * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
59304 * //=> false
59305 */
59306function isSameDay(dirtyDateLeft, dirtyDateRight) {
59307  requiredArgs_requiredArgs(2, arguments);
59308  var dateLeftStartOfDay = startOfDay_startOfDay(dirtyDateLeft);
59309  var dateRightStartOfDay = startOfDay_startOfDay(dirtyDateRight);
59310  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
59311}
59312;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addDays/index.js
59313
59314
59315
59316/**
59317 * @name addDays
59318 * @category Day Helpers
59319 * @summary Add the specified number of days to the given date.
59320 *
59321 * @description
59322 * Add the specified number of days to the given date.
59323 *
59324 * @param {Date|Number} date - the date to be changed
59325 * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
59326 * @returns {Date} - the new date with the days added
59327 * @throws {TypeError} - 2 arguments required
59328 *
59329 * @example
59330 * // Add 10 days to 1 September 2014:
59331 * const result = addDays(new Date(2014, 8, 1), 10)
59332 * //=> Thu Sep 11 2014 00:00:00
59333 */
59334function addDays_addDays(dirtyDate, dirtyAmount) {
59335  requiredArgs_requiredArgs(2, arguments);
vendor: 4,785 bytes, lines 59336-59444
59336  var date = toDate_toDate(dirtyDate);
59337  var amount = toInteger_toInteger(dirtyAmount);
59338  if (isNaN(amount)) {
59339    return new Date(NaN);
59340  }
59341  if (!amount) {
59342    // If 0 days, no-op to avoid changing times in the hour before end of DST
59343    return date;
59344  }
59345  date.setDate(date.getDate() + amount);
59346  return date;
59347}
59348;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addWeeks/index.js
59349
59350
59351
59352/**
59353 * @name addWeeks
59354 * @category Week Helpers
59355 * @summary Add the specified number of weeks to the given date.
59356 *
59357 * @description
59358 * Add the specified number of week to the given date.
59359 *
59360 * @param {Date|Number} date - the date to be changed
59361 * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
59362 * @returns {Date} the new date with the weeks added
59363 * @throws {TypeError} 2 arguments required
59364 *
59365 * @example
59366 * // Add 4 weeks to 1 September 2014:
59367 * const result = addWeeks(new Date(2014, 8, 1), 4)
59368 * //=> Mon Sep 29 2014 00:00:00
59369 */
59370function addWeeks_addWeeks(dirtyDate, dirtyAmount) {
59371  requiredArgs_requiredArgs(2, arguments);
59372  var amount = toInteger_toInteger(dirtyAmount);
59373  var days = amount * 7;
59374  return addDays_addDays(dirtyDate, days);
59375}
59376;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subWeeks/index.js
59377
59378
59379
59380/**
59381 * @name subWeeks
59382 * @category Week Helpers
59383 * @summary Subtract the specified number of weeks from the given date.
59384 *
59385 * @description
59386 * Subtract the specified number of weeks from the given date.
59387 *
59388 * @param {Date|Number} date - the date to be changed
59389 * @param {Number} amount - the amount of weeks to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
59390 * @returns {Date} the new date with the weeks subtracted
59391 * @throws {TypeError} 2 arguments required
59392 *
59393 * @example
59394 * // Subtract 4 weeks from 1 September 2014:
59395 * const result = subWeeks(new Date(2014, 8, 1), 4)
59396 * //=> Mon Aug 04 2014 00:00:00
59397 */
59398function subWeeks(dirtyDate, dirtyAmount) {
59399  requiredArgs_requiredArgs(2, arguments);
59400  var amount = toInteger_toInteger(dirtyAmount);
59401  return addWeeks_addWeeks(dirtyDate, -amount);
59402}
59403;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfWeek/index.js
59404
59405
59406
59407
59408/**
59409 * @name startOfWeek
59410 * @category Week Helpers
59411 * @summary Return the start of a week for the given date.
59412 *
59413 * @description
59414 * Return the start of a week for the given date.
59415 * The result will be in the local timezone.
59416 *
59417 * @param {Date|Number} date - the original date
59418 * @param {Object} [options] - an object with options.
59419 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
59420 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
59421 * @returns {Date} the start of a week
59422 * @throws {TypeError} 1 argument required
59423 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
59424 *
59425 * @example
59426 * // The start of a week for 2 September 2014 11:55:00:
59427 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
59428 * //=> Sun Aug 31 2014 00:00:00
59429 *
59430 * @example
59431 * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
59432 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
59433 * //=> Mon Sep 01 2014 00:00:00
59434 */
59435function startOfWeek_startOfWeek(dirtyDate, options) {
59436  var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
59437  requiredArgs_requiredArgs(1, arguments);
59438  var defaultOptions = getDefaultOptions();
59439  var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0);
59440
59441  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
59442  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
59443    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
59444  }
59445  var date = toDate_toDate(dirtyDate);
59446  var day = date.getDay();
59447  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
59448  date.setDate(date.getDate() - diff);
59449  date.setHours(0, 0, 0, 0);
59450  return date;
59451}
59452;// CONCATENATED MODULE: ./node_modules/date-fns/esm/endOfWeek/index.js
59453
59454
59455
59456
59457/**
59458 * @name endOfWeek
59459 * @category Week Helpers
59460 * @summary Return the end of a week for the given date.
59461 *
59462 * @description
59463 * Return the end of a week for the given date.
59464 * The result will be in the local timezone.
59465 *
59466 * @param {Date|Number} date - the original date
59467 * @param {Object} [options] - an object with options.
59468 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
59469 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
59470 * @returns {Date} the end of a week
59471 * @throws {TypeError} 1 argument required
59472 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
59473 *
59474 * @example
59475 * // The end of a week for 2 September 2014 11:55:00:
59476 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))
59477 * //=> Sat Sep 06 2014 23:59:59.999
59478 *
59479 * @example
59480 * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:
59481 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
59482 * //=> Sun Sep 07 2014 23:59:59.999
59483 */
59484function endOfWeek_endOfWeek(dirtyDate, options) {
59485  var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
59486  requiredArgs_requiredArgs(1, arguments);
59487  var defaultOptions = getDefaultOptions();
59488  var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0);
59489
59490  // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
59491  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
59492    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
59493  }
59494  var date = toDate_toDate(dirtyDate);
59495  var day = date.getDay();
59496  var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
59497  date.setDate(date.getDate() + diff);
59498  date.setHours(23, 59, 59, 999);
59499  return date;
59500}
59501;// CONCATENATED MODULE: ./packages/icons/build-module/library/arrow-right.js
59502
59503/**
59504 * WordPress dependencies
59505 */
59506
59507const arrowRight = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
59508  xmlns: "http://www.w3.org/2000/svg",
59509  viewBox: "0 0 24 24"
59510}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
59511  d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z"
59512}));
59513/* harmony default export */ const arrow_right = (arrowRight);
59514
59515;// CONCATENATED MODULE: ./packages/icons/build-module/library/arrow-left.js
59516
59517/**
59518 * WordPress dependencies
59519 */
59520
59521const arrowLeft = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
59522  xmlns: "http://www.w3.org/2000/svg",
59523  viewBox: "0 0 24 24"
59524}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
59525  d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z"
59526}));
59527/* harmony default export */ const arrow_left = (arrowLeft);
59528
59529;// CONCATENATED MODULE: external ["wp","date"]
59530const external_wp_date_namespaceObject = window["wp"]["date"];
59531;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date/styles.js
59532
59533function date_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
59534/**
59535 * External dependencies
59536 */
59537
59538/**
59539 * Internal dependencies
59540 */
59541
59542
59543
59544
59545
59546const styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
59547  target: "e105ri6r5"
59548} : 0)( true ? {
59549  name: "1khn195",
59550  styles: "box-sizing:border-box"
59551} : 0);
59552const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
59553  target: "e105ri6r4"
59554} : 0)("margin-bottom:", space(4), ";" + ( true ? "" : 0));
59555const NavigatorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
59556  target: "e105ri6r3"
59557} : 0)("font-size:", config_values.fontSize, ";font-weight:", config_values.fontWeight, ";strong{font-weight:", config_values.fontWeightHeading, ";}" + ( true ? "" : 0));
59558const Calendar = emotion_styled_base_browser_esm("div",  true ? {
59559  target: "e105ri6r2"
59560} : 0)("column-gap:", space(2), ";display:grid;grid-template-columns:0.5fr repeat( 5, 1fr ) 0.5fr;justify-items:center;row-gap:", space(2), ";" + ( true ? "" : 0));
59561const DayOfWeek = emotion_styled_base_browser_esm("div",  true ? {
59562  target: "e105ri6r1"
59563} : 0)("color:", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0));
59564const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
59565  shouldForwardProp: prop => !['column', 'isSelected', 'isToday', 'hasEvents'].includes(prop),
59566  target: "e105ri6r0"
59567} : 0)("grid-column:", props => props.column, ";position:relative;justify-content:center;", props => props.column === 1 && `
59568		justify-self: start;
59569		`, " ", props => props.column === 7 && `
59570		justify-self: end;
59571		`, " ", props => props.disabled && `
59572		pointer-events: none;
59573		`, " &&&{border-radius:100%;height:", space(7), ";width:", space(7), ";", props => props.isSelected && `
59574			background: ${COLORS.theme.accent};
59575			color: ${COLORS.white};
59576			`, " ", props => !props.isSelected && props.isToday && `
59577			background: ${COLORS.gray[200]};
59578			`, ";}", props => props.hasEvents && `
59579		::before {
59580			background: ${props.isSelected ? COLORS.white : COLORS.theme.accent};
59581			border-radius: 2px;
59582			bottom: 0;
59583			content: " ";
59584			height: 4px;
59585			left: 50%;
59586			margin-left: -2px;
59587			position: absolute;
59588			width: 4px;
59589		}
59590		`, ";" + ( true ? "" : 0));
59591
59592;// CONCATENATED MODULE: ./packages/components/build-module/date-time/utils.js
59593/**
59594 * External dependencies
59595 */
59596
59597
59598/**
59599 * Like date-fn's toDate, but tries to guess the format when a string is
59600 * given.
59601 *
59602 * @param input Value to turn into a date.
59603 */
59604function inputToDate(input) {
59605  if (typeof input === 'string') {
59606    return new Date(input);
59607  }
59608  return toDate_toDate(input);
59609}
59610
59611;// CONCATENATED MODULE: ./packages/components/build-module/date-time/constants.js
59612const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
59613
59614;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date/index.js
59615
59616/**
59617 * External dependencies
59618 */
59619
59620
59621/**
59622 * WordPress dependencies
59623 */
59624
59625
59626
59627
59628
59629/**
59630 * Internal dependencies
59631 */
59632
59633
59634
59635
59636
59637
59638/**
59639 * DatePicker is a React component that renders a calendar for date selection.
59640 *
59641 * ```jsx
59642 * import { DatePicker } from '@wordpress/components';
59643 * import { useState } from '@wordpress/element';
59644 *
59645 * const MyDatePicker = () => {
59646 *   const [ date, setDate ] = useState( new Date() );
59647 *
59648 *   return (
59649 *     <DatePicker
59650 *       currentDate={ date }
59651 *       onChange={ ( newDate ) => setDate( newDate ) }
59652 *     />
59653 *   );
59654 * };
59655 * ```
59656 */
59657function DatePicker({
59658  currentDate,
59659  onChange,
59660  events = [],
59661  isInvalidDate,
59662  onMonthPreviewed,
59663  startOfWeek: weekStartsOn = 0
59664}) {
59665  const date = currentDate ? inputToDate(currentDate) : new Date();
59666  const {
59667    calendar,
59668    viewing,
59669    setSelected,
59670    setViewing,
59671    isSelected,
59672    viewPreviousMonth,
59673    viewNextMonth
59674  } = useLilius({
59675    selected: [startOfDay_startOfDay(date)],
59676    viewing: startOfDay_startOfDay(date),
59677    weekStartsOn
59678  });
59679
59680  // Used to implement a roving tab index. Tracks the day that receives focus
59681  // when the user tabs into the calendar.
59682  const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay_startOfDay(date));
59683
59684  // Allows us to only programmatically focus() a day when focus was already
59685  // within the calendar. This stops us stealing focus from e.g. a TimePicker
59686  // input.
59687  const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0,external_wp_element_namespaceObject.useState)(false);
59688
59689  // Update internal state when currentDate prop changes.
59690  const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate);
59691  if (currentDate !== prevCurrentDate) {
59692    setPrevCurrentDate(currentDate);
59693    setSelected([startOfDay_startOfDay(date)]);
59694    setViewing(startOfDay_startOfDay(date));
59695    setFocusable(startOfDay_startOfDay(date));
59696  }
59697  return (0,external_wp_element_namespaceObject.createElement)(styles_Wrapper, {
59698    className: "components-datetime__date",
59699    role: "application",
59700    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar')
59701  }, (0,external_wp_element_namespaceObject.createElement)(Navigator, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
59702    icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left,
59703    variant: "tertiary",
59704    "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'),
59705    onClick: () => {
59706      viewPreviousMonth();
59707      setFocusable(subMonths_subMonths(focusable, 1));
59708      onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT));
59709    }
59710  }), (0,external_wp_element_namespaceObject.createElement)(NavigatorHeading, {
59711    level: 3
59712  }, (0,external_wp_element_namespaceObject.createElement)("strong", null, (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset())), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
59713    icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right,
59714    variant: "tertiary",
59715    "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'),
59716    onClick: () => {
59717      viewNextMonth();
59718      setFocusable(addMonths_addMonths(focusable, 1));
59719      onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT));
59720    }
59721  })), (0,external_wp_element_namespaceObject.createElement)(Calendar, {
59722    onFocus: () => setIsFocusWithinCalendar(true),
59723    onBlur: () => setIsFocusWithinCalendar(false)
59724  }, calendar[0][0].map(day => (0,external_wp_element_namespaceObject.createElement)(DayOfWeek, {
59725    key: day.toString()
59726  }, (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => {
59727    if (!isSameMonth(day, viewing)) {
59728      return null;
59729    }
59730    return (0,external_wp_element_namespaceObject.createElement)(date_Day, {
59731      key: day.toString(),
59732      day: day,
59733      column: index + 1,
59734      isSelected: isSelected(day),
59735      isFocusable: isEqual_isEqual(day, focusable),
59736      isFocusAllowed: isFocusWithinCalendar,
59737      isToday: isSameDay(day, new Date()),
59738      isInvalid: isInvalidDate ? isInvalidDate(day) : false,
59739      numEvents: events.filter(event => isSameDay(event.date, day)).length,
59740      onClick: () => {
59741        setSelected([day]);
59742        setFocusable(day);
59743        onChange?.(format(
59744        // Don't change the selected date's time fields.
59745        new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT));
59746      },
59747      onKeyDown: event => {
59748        let nextFocusable;
59749        if (event.key === 'ArrowLeft') {
59750          nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1);
59751        }
59752        if (event.key === 'ArrowRight') {
59753          nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1);
59754        }
59755        if (event.key === 'ArrowUp') {
59756          nextFocusable = subWeeks(day, 1);
59757        }
59758        if (event.key === 'ArrowDown') {
59759          nextFocusable = addWeeks_addWeeks(day, 1);
59760        }
59761        if (event.key === 'PageUp') {
59762          nextFocusable = subMonths_subMonths(day, 1);
59763        }
59764        if (event.key === 'PageDown') {
59765          nextFocusable = addMonths_addMonths(day, 1);
59766        }
59767        if (event.key === 'Home') {
59768          nextFocusable = startOfWeek_startOfWeek(day);
59769        }
59770        if (event.key === 'End') {
59771          nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day));
59772        }
59773        if (nextFocusable) {
59774          event.preventDefault();
59775          setFocusable(nextFocusable);
59776          if (!isSameMonth(nextFocusable, viewing)) {
59777            setViewing(nextFocusable);
59778            onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT));
59779          }
59780        }
59781      }
59782    });
59783  }))));
59784}
59785function date_Day({
59786  day,
59787  column,
59788  isSelected,
59789  isFocusable,
59790  isFocusAllowed,
59791  isToday,
59792  isInvalid,
59793  numEvents,
59794  onClick,
59795  onKeyDown
59796}) {
59797  const ref = (0,external_wp_element_namespaceObject.useRef)();
59798
59799  // Focus the day when it becomes focusable, e.g. because an arrow key is
59800  // pressed. Only do this if focus is allowed - this stops us stealing focus
59801  // from e.g. a TimePicker input.
59802  (0,external_wp_element_namespaceObject.useEffect)(() => {
59803    if (ref.current && isFocusable && isFocusAllowed) {
59804      ref.current.focus();
59805    }
59806    // isFocusAllowed is not a dep as there is no point calling focus() on
59807    // an already focused element.
59808    // eslint-disable-next-line react-hooks/exhaustive-deps
59809  }, [isFocusable]);
59810  return (0,external_wp_element_namespaceObject.createElement)(DayButton, {
59811    ref: ref,
59812    className: "components-datetime__date__day" // Unused, for backwards compatibility.
59813    ,
59814    disabled: isInvalid,
59815    tabIndex: isFocusable ? 0 : -1,
59816    "aria-label": getDayLabel(day, isSelected, numEvents),
59817    column: column,
59818    isSelected: isSelected,
59819    isToday: isToday,
59820    hasEvents: numEvents > 0,
59821    onClick: onClick,
59822    onKeyDown: onKeyDown
59823  }, (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset()));
59824}
59825function getDayLabel(date, isSelected, numEvents) {
59826  const {
59827    formats
59828  } = (0,external_wp_date_namespaceObject.getSettings)();
59829  const localizedDate = (0,external_wp_date_namespaceObject.dateI18n)(formats.date, date, -date.getTimezoneOffset());
59830  if (isSelected && numEvents > 0) {
59831    return (0,external_wp_i18n_namespaceObject.sprintf)(
59832    // translators: 1: The calendar date. 2: Number of events on the calendar date.
59833    (0,external_wp_i18n_namespaceObject._n)('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents);
59834  } else if (isSelected) {
59835    return (0,external_wp_i18n_namespaceObject.sprintf)(
59836    // translators: %s: The calendar date.
59837    (0,external_wp_i18n_namespaceObject.__)('%1$s. Selected'), localizedDate);
59838  } else if (numEvents > 0) {
59839    return (0,external_wp_i18n_namespaceObject.sprintf)(
59840    // translators: 1: The calendar date. 2: Number of events on the calendar date.
59841    (0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents);
59842  }
59843  return localizedDate;
59844}
59845/* harmony default export */ const date = (DatePicker);
59846
59847;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfMinute/index.js
59848
59849
59850/**
59851 * @name startOfMinute
59852 * @category Minute Helpers
59853 * @summary Return the start of a minute for the given date.
59854 *
59855 * @description
59856 * Return the start of a minute for the given date.
59857 * The result will be in the local timezone.
59858 *
59859 * @param {Date|Number} date - the original date
59860 * @returns {Date} the start of a minute
59861 * @throws {TypeError} 1 argument required
59862 *
59863 * @example
59864 * // The start of a minute for 1 December 2014 22:15:45.400:
59865 * const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400))
59866 * //=> Mon Dec 01 2014 22:15:00
59867 */
59868function startOfMinute(dirtyDate) {
59869  requiredArgs_requiredArgs(1, arguments);
59870  var date = toDate_toDate(dirtyDate);
59871  date.setSeconds(0, 0);
59872  return date;
59873}
59874;// CONCATENATED MODULE: ./node_modules/date-fns/esm/getDaysInMonth/index.js
59875
59876
59877/**
59878 * @name getDaysInMonth
59879 * @category Month Helpers
59880 * @summary Get the number of days in a month of the given date.
59881 *
59882 * @description
59883 * Get the number of days in a month of the given date.
59884 *
59885 * @param {Date|Number} date - the given date
59886 * @returns {Number} the number of days in a month
59887 * @throws {TypeError} 1 argument required
59888 *
59889 * @example
59890 * // How many days are in February 2000?
59891 * const result = getDaysInMonth(new Date(2000, 1))
59892 * //=> 29
59893 */
59894function getDaysInMonth_getDaysInMonth(dirtyDate) {
59895  requiredArgs_requiredArgs(1, arguments);
59896  var date = toDate_toDate(dirtyDate);
59897  var year = date.getFullYear();
59898  var monthIndex = date.getMonth();
59899  var lastDayOfMonth = new Date(0);
59900  lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
59901  lastDayOfMonth.setHours(0, 0, 0, 0);
59902  return lastDayOfMonth.getDate();
59903}
59904;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setMonth/index.js
59905
59906
59907
59908
59909/**
59910 * @name setMonth
59911 * @category Month Helpers
59912 * @summary Set the month to the given date.
59913 *
59914 * @description
59915 * Set the month to the given date.
59916 *
59917 * @param {Date|Number} date - the date to be changed
59918 * @param {Number} month - the month of the new date
59919 * @returns {Date} the new date with the month set
59920 * @throws {TypeError} 2 arguments required
59921 *
59922 * @example
59923 * // Set February to 1 September 2014:
59924 * const result = setMonth(new Date(2014, 8, 1), 1)
59925 * //=> Sat Feb 01 2014 00:00:00
59926 */
59927function setMonth_setMonth(dirtyDate, dirtyMonth) {
59928  requiredArgs_requiredArgs(2, arguments);
59929  var date = toDate_toDate(dirtyDate);
59930  var month = toInteger_toInteger(dirtyMonth);
59931  var year = date.getFullYear();
59932  var day = date.getDate();
59933  var dateWithDesiredMonth = new Date(0);
59934  dateWithDesiredMonth.setFullYear(year, month, 15);
59935  dateWithDesiredMonth.setHours(0, 0, 0, 0);
59936  var daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth);
59937  // Set the last day of the new month
59938  // if the original date was the last day of the longer month
59939  date.setMonth(month, Math.min(day, daysInMonth));
59940  return date;
59941}
59942;// CONCATENATED MODULE: ./node_modules/date-fns/esm/set/index.js
59943
59944
59945
59946
59947
59948/**
59949 * @name set
59950 * @category Common Helpers
59951 * @summary Set date values to a given date.
59952 *
59953 * @description
59954 * Set date values to a given date.
59955 *
59956 * Sets time values to date from object `values`.
59957 * A value is not set if it is undefined or null or doesn't exist in `values`.
59958 *
59959 * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
59960 * to use native `Date#setX` methods. If you use this function, you may not want to include the
59961 * other `setX` functions that date-fns provides if you are concerned about the bundle size.
59962 *
59963 * @param {Date|Number} date - the date to be changed
59964 * @param {Object} values - an object with options
59965 * @param {Number} [values.year] - the number of years to be set
59966 * @param {Number} [values.month] - the number of months to be set
59967 * @param {Number} [values.date] - the number of days to be set
59968 * @param {Number} [values.hours] - the number of hours to be set
59969 * @param {Number} [values.minutes] - the number of minutes to be set
59970 * @param {Number} [values.seconds] - the number of seconds to be set
59971 * @param {Number} [values.milliseconds] - the number of milliseconds to be set
59972 * @returns {Date} the new date with options set
59973 * @throws {TypeError} 2 arguments required
59974 * @throws {RangeError} `values` must be an object
59975 *
59976 * @example
59977 * // Transform 1 September 2014 into 20 October 2015 in a single line:
59978 * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
59979 * //=> Tue Oct 20 2015 00:00:00
59980 *
59981 * @example
59982 * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
59983 * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
59984 * //=> Mon Sep 01 2014 12:23:45
59985 */
59986function set_set(dirtyDate, values) {
59987  requiredArgs_requiredArgs(2, arguments);
59988  if (_typeof(values) !== 'object' || values === null) {
59989    throw new RangeError('values parameter must be an object');
59990  }
59991  var date = toDate_toDate(dirtyDate);
59992
59993  // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
59994  if (isNaN(date.getTime())) {
59995    return new Date(NaN);
59996  }
59997  if (values.year != null) {
59998    date.setFullYear(values.year);
59999  }
60000  if (values.month != null) {
60001    date = setMonth_setMonth(date, values.month);
60002  }
60003  if (values.date != null) {
60004    date.setDate(toInteger_toInteger(values.date));
60005  }
60006  if (values.hours != null) {
60007    date.setHours(toInteger_toInteger(values.hours));
60008  }
60009  if (values.minutes != null) {
60010    date.setMinutes(toInteger_toInteger(values.minutes));
60011  }
60012  if (values.seconds != null) {
60013    date.setSeconds(toInteger_toInteger(values.seconds));
60014  }
60015  if (values.milliseconds != null) {
60016    date.setMilliseconds(toInteger_toInteger(values.milliseconds));
60017  }
60018  return date;
60019}
60020;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setHours/index.js
60021
60022
60023
60024/**
60025 * @name setHours
60026 * @category Hour Helpers
60027 * @summary Set the hours to the given date.
60028 *
60029 * @description
60030 * Set the hours to the given date.
60031 *
60032 * @param {Date|Number} date - the date to be changed
60033 * @param {Number}
60033 hours - the hours of the new date
60034 * @returns {Date} the new date with the hours set
60035 * @throws {TypeError} 2 arguments required
60036 *
60037 * @example
60038 * // Set 4 hours to 1 September 2014 11:30:00:
60039 * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)
60040 * //=> Mon Sep 01 2014 04:30:00
60041 */
60042function setHours(dirtyDate, dirtyHours) {
60043  requiredArgs_requiredArgs(2, arguments);
60044  var date = toDate_toDate(dirtyDate);
60045  var hours = toInteger_toInteger(dirtyHours);
60046  date.setHours(hours);
60047  return date;
60048}
60049;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/styles.js
60050
60051function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
60052/**
60053 * External dependencies
60054 */
60055
60056
60057
60058/**
60059 * Internal dependencies
60060 */
60061
60062
60063
60064
60065
60066
60067const time_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
60068  target: "evcr23110"
60069} : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0));
60070const Fieldset = emotion_styled_base_browser_esm("fieldset",  true ? {
60071  target: "evcr2319"
60072} : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0));
60073const TimeWrapper = emotion_styled_base_browser_esm("div",  true ? {
60074  target: "evcr2318"
60075} : 0)( true ? {
60076  name: "pd0mhc",
60077  styles: "direction:ltr;display:flex"
60078} : 0);
60079const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{padding-left:", space(2), ";padding-right:", space(2), ";text-align:center;}" + ( true ? "" : 0),  true ? "" : 0);
60080const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
60081  target: "evcr2317"
60082} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0));
60083const TimeSeparator = emotion_styled_base_browser_esm("span",  true ? {
60084  target: "evcr2316"
60085} : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0));
60086const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
60087  target: "evcr2315"
60088} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-left:0;}&&& ", BackdropUI, "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}" + ( true ? "" : 0));
60089
60090// Ideally we wouldn't need a wrapper, but can't otherwise target the
60091// <BaseControl> in <SelectControl>
60092const MonthSelectWrapper = emotion_styled_base_browser_esm("div",  true ? {
60093  target: "evcr2314"
60094} : 0)( true ? {
60095  name: "1ff36h2",
60096  styles: "flex-grow:1"
60097} : 0);
60098const MonthSelect = /*#__PURE__*/emotion_styled_base_browser_esm(select_control,  true ? {
60099  target: "evcr2313"
60100} : 0)("height:36px;", Select, "{line-height:30px;}" + ( true ? "" : 0));
60101const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
60102  target: "evcr2312"
60103} : 0)(baseInput, " width:", space(9), ";" + ( true ? "" : 0));
60104const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
60105  target: "evcr2311"
60106} : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0));
60107const TimeZone = emotion_styled_base_browser_esm("div",  true ? {
60108  target: "evcr2310"
60109} : 0)( true ? {
60110  name: "ebu3jh",
60111  styles: "text-decoration:underline dotted"
60112} : 0);
60113
60114;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/timezone.js
60115
60116/**
60117 * WordPress dependencies
60118 */
60119
60120
60121
60122/**
60123 * Internal dependencies
60124 */
60125
60126
60127
60128/**
60129 * Displays timezone information when user timezone is different from site
60130 * timezone.
60131 */
60132const timezone_TimeZone = () => {
60133  const {
60134    timezone
60135  } = (0,external_wp_date_namespaceObject.getSettings)();
60136
60137  // Convert timezone offset to hours.
60138  const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60);
60139
60140  // System timezone and user timezone match, nothing needed.
60141  // Compare as numbers because it comes over as string.
60142  if (Number(timezone.offset) === userTimezoneOffset) {
60143    return null;
60144  }
60145  const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
60146  const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
60147  const timezoneDetail = 'UTC' === timezone.string ? (0,external_wp_i18n_namespaceObject.__)('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
60148  return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
60149    placement: "top",
60150    text: timezoneDetail
60151  }, (0,external_wp_element_namespaceObject.createElement)(TimeZone, {
60152    className: "components-datetime__timezone"
60153  }, zoneAbbr));
60154};
60155/* harmony default export */ const timezone = (timezone_TimeZone);
60156
60157;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/index.js
60158
60159/**
60160 * External dependencies
60161 */
60162
60163
60164/**
60165 * WordPress dependencies
60166 */
60167
60168
60169
60170/**
60171 * Internal dependencies
60172 */
60173
60174
60175
60176
60177
60178
60179
60180
60181
60182
60183function from12hTo24h(hours, isPm) {
60184  return isPm ? (hours % 12 + 12) % 24 : hours % 12;
60185}
60186
60187/**
60188 * Creates an InputControl reducer used to pad an input so that it is always a
60189 * given width. For example, the hours and minutes inputs are padded to 2 so
60190 * that '4' appears as '04'.
60191 *
60192 * @param pad How many digits the value should be.
60193 */
60194function buildPadInputStateReducer(pad) {
60195  return (state, action) => {
60196    const nextState = {
60197      ...state
60198    };
60199    if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {
60200      if (nextState.value !== undefined) {
60201        nextState.value = nextState.value.toString().padStart(pad, '0');
60202      }
60203    }
60204    return nextState;
60205  };
60206}
60207
60208/**
60209 * TimePicker is a React component that renders a clock for time selection.
60210 *
60211 * ```jsx
60212 * import { TimePicker } from '@wordpress/components';
60213 * import { useState } from '@wordpress/element';
60214 *
60215 * const MyTimePicker = () => {
60216 *   const [ time, setTime ] = useState( new Date() );
60217 *
60218 *   return (
60219 *     <TimePicker
60220 *       currentTime={ date }
60221 *       onChange={ ( newTime ) => setTime( newTime ) }
60222 *       is12Hour
60223 *     />
60224 *   );
60225 * };
60226 * ```
60227 */
60228function TimePicker({
60229  is12Hour,
60230  currentTime,
60231  onChange
60232}) {
60233  const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() =>
60234  // Truncate the date at the minutes, see: #15495.
60235  currentTime ? startOfMinute(inputToDate(currentTime)) : new Date());
60236
60237  // Reset the state when currentTime changed.
60238  // TODO: useEffect() shouldn't be used like this, causes an unnecessary render
60239  (0,external_wp_element_namespaceObject.useEffect)(() => {
60240    setDate(currentTime ? startOfMinute(inputToDate(currentTime)) : new Date());
60241  }, [currentTime]);
60242  const {
60243    day,
60244    month,
60245    year,
60246    minutes,
60247    hours,
60248    am
60249  } = (0,external_wp_element_namespaceObject.useMemo)(() => ({
60250    day: format(date, 'dd'),
60251    month: format(date, 'MM'),
60252    year: format(date, 'yyyy'),
60253    minutes: format(date, 'mm'),
60254    hours: format(date, is12Hour ? 'hh' : 'HH'),
60255    am: format(date, 'a')
60256  }), [date, is12Hour]);
60257  const buildNumberControlChangeCallback = method => {
60258    const callback = (value, {
60259      event
60260    }) => {
60261      var _ownerDocument$defaul;
60262      // `instanceof` checks need to get the instance definition from the
60263      // corresponding window object — therefore, the following logic makes
60264      // the component work correctly even when rendered inside an iframe.
60265      const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
60266      if (!(event.target instanceof HTMLInputElementInstance)) {
60267        return;
60268      }
60269      if (!event.target.validity.valid) {
60270        return;
60271      }
60272
60273      // We can safely assume value is a number if target is valid.
60274      let numberValue = Number(value);
60275
60276      // If the 12-hour format is being used and the 'PM' period is
60277      // selected, then the incoming value (which ranges 1-12) should be
60278      // increased by 12 to match the expected 24-hour format.
60279      if (method === 'hours' && is12Hour) {
60280        numberValue = from12hTo24h(numberValue, am === 'PM');
60281      }
60282      const newDate = set_set(date, {
60283        [method]: numberValue
60284      });
60285      setDate(newDate);
60286      onChange?.(format(newDate, TIMEZONELESS_FORMAT));
60287    };
60288    return callback;
60289  };
60290  function buildAmPmChangeCallback(value) {
60291    return () => {
60292      if (am === value) {
60293        return;
60294      }
60295      const parsedHours = parseInt(hours, 10);
60296      const newDate = setHours(date, from12hTo24h(parsedHours, value === 'PM'));
60297      setDate(newDate);
60298      onChange?.(format(newDate, TIMEZONELESS_FORMAT));
60299    };
60300  }
60301  const dayField = (0,external_wp_element_namespaceObject.createElement)(DayInput, {
60302    className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
60303    ,
60304    label: (0,external_wp_i18n_namespaceObject.__)('Day'),
60305    hideLabelFromVision: true,
60306    __next36pxDefaultSize: true,
60307    value: day,
60308    step: 1,
60309    min: 1,
60310    max: 31,
60311    required: true,
60312    spinControls: "none",
60313    isPressEnterToChange: true,
60314    isDragEnabled: false,
60315    isShiftStepEnabled: false,
60316    onChange: buildNumberControlChangeCallback('date')
60317  });
60318  const monthField = (0,external_wp_element_namespaceObject.createElement)(MonthSelectWrapper, null, (0,external_wp_element_namespaceObject.createElement)(MonthSelect, {
60319    className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
60320    ,
60321    label: (0,external_wp_i18n_namespaceObject.__)('Month'),
60322    hideLabelFromVision: true,
60323    __nextHasNoMarginBottom: true,
60324    value: month,
60325    options: [{
60326      value: '01',
60327      label: (0,external_wp_i18n_namespaceObject.__)('January')
60328    }, {
60329      value: '02',
60330      label: (0,external_wp_i18n_namespaceObject.__)('February')
60331    }, {
60332      value: '03',
60333      label: (0,external_wp_i18n_namespaceObject.__)('March')
60334    }, {
60335      value: '04',
60336      label: (0,external_wp_i18n_namespaceObject.__)('April')
60337    }, {
60338      value: '05',
60339      label: (0,external_wp_i18n_namespaceObject.__)('May')
60340    }, {
60341      value: '06',
60342      label: (0,external_wp_i18n_namespaceObject.__)('June')
60343    }, {
60344      value: '07',
60345      label: (0,external_wp_i18n_namespaceObject.__)('July')
60346    }, {
60347      value: '08',
60348      label: (0,external_wp_i18n_namespaceObject.__)('August')
60349    }, {
60350      value: '09',
60351      label: (0,external_wp_i18n_namespaceObject.__)('September')
60352    }, {
60353      value: '10',
60354      label: (0,external_wp_i18n_namespaceObject.__)('October')
60355    }, {
60356      value: '11',
60357      label: (0,external_wp_i18n_namespaceObject.__)('November')
60358    }, {
60359      value: '12',
60360      label: (0,external_wp_i18n_namespaceObject.__)('December')
60361    }],
60362    onChange: value => {
60363      const newDate = setMonth_setMonth(date, Number(value) - 1);
60364      setDate(newDate);
60365      onChange?.(format(newDate, TIMEZONELESS_FORMAT));
60366    }
60367  }));
60368  return (0,external_wp_element_namespaceObject.createElement)(time_styles_Wrapper, {
60369    className: "components-datetime__time" // Unused, for backwards compatibility.
60370  }, (0,external_wp_element_namespaceObject.createElement)(Fieldset, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, {
60371    as: "legend",
60372    className: "components-datetime__time-legend" // Unused, for backwards compatibility.
60373  }, (0,external_wp_i18n_namespaceObject.__)('Time')), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
60374    className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
60375  }, (0,external_wp_element_namespaceObject.createElement)(TimeWrapper, {
60376    className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
60377  }, (0,external_wp_element_namespaceObject.createElement)(HoursInput, {
60378    className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
60379    ,
60380    label: (0,external_wp_i18n_namespaceObject.__)('Hours'),
60381    hideLabelFromVision: true,
60382    __next36pxDefaultSize: true,
60383    value: hours,
60384    step: 1,
60385    min: is12Hour ? 1 : 0,
60386    max: is12Hour ? 12 : 23,
60387    required: true,
60388    spinControls: "none",
60389    isPressEnterToChange: true,
60390    isDragEnabled: false,
60391    isShiftStepEnabled: false,
60392    onChange: buildNumberControlChangeCallback('hours'),
60393    __unstableStateReducer: buildPadInputStateReducer(2)
60394  }), (0,external_wp_element_namespaceObject.createElement)(TimeSeparator, {
60395    className: "components-datetime__time-separator" // Unused, for backwards compatibility.
60396    ,
60397    "aria-hidden": "true"
60398  }, ":"), (0,external_wp_element_namespaceObject.createElement)(MinutesInput, {
60399    className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
60400    ,
60401    label: (0,external_wp_i18n_namespaceObject.__)('Minutes'),
60402    hideLabelFromVision: true,
60403    __next36pxDefaultSize: true,
60404    value: minutes,
60405    step: 1,
60406    min: 0,
60407    max: 59,
60408    required: true,
60409    spinControls: "none",
60410    isPressEnterToChange: true,
60411    isDragEnabled: false,
60412    isShiftStepEnabled: false,
60413    onChange: buildNumberControlChangeCallback('minutes'),
60414    __unstableStateReducer: buildPadInputStateReducer(2)
60415  })), is12Hour && (0,external_wp_element_namespaceObject.createElement)(button_group, {
60416    className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
60417  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
60418    className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
60419    ,
60420    variant: am === 'AM' ? 'primary' : 'secondary',
60421    onClick: buildAmPmChangeCallback('AM')
60422  }, (0,external_wp_i18n_namespaceObject.__)('AM')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
60423    className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
60424    ,
60425    variant: am === 'PM' ? 'primary' : 'secondary',
60426    onClick: buildAmPmChangeCallback('PM')
60427  }, (0,external_wp_i18n_namespaceObject.__)('PM'))), (0,external_wp_element_namespaceObject.createElement)(spacer_
60427component, null), (0,external_wp_element_namespaceObject.createElement)(timezone, null))), (0,external_wp_element_namespaceObject.createElement)(Fieldset, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, {
60428    as: "legend",
60429    className: "components-datetime__time-legend" // Unused, for backwards compatibility.
60430  }, (0,external_wp_i18n_namespaceObject.__)('Date')), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
60431    className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
60432  }, is12Hour ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, monthField, dayField) : (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, dayField, monthField), (0,external_wp_element_namespaceObject.createElement)(YearInput, {
60433    className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
60434    ,
60435    label: (0,external_wp_i18n_namespaceObject.__)('Year'),
60436    hideLabelFromVision: true,
60437    __next36pxDefaultSize: true,
60438    value: year,
60439    step: 1,
60440    min: 1,
60441    max: 9999,
60442    required: true,
60443    spinControls: "none",
60444    isPressEnterToChange: true,
60445    isDragEnabled: false,
60446    isShiftStepEnabled: false,
60447    onChange: buildNumberControlChangeCallback('year'),
60448    __unstableStateReducer: buildPadInputStateReducer(4)
60449  }))));
60450}
60451/* harmony default export */ const time = (TimePicker);
60452
60453;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date-time/styles.js
60454
60455function date_time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
60456/**
60457 * External dependencies
60458 */
60459
60460/**
60461 * Internal dependencies
60462 */
60463
60464const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_stack_component,  true ? {
60465  target: "e1p5onf00"
60466} : 0)( true ? {
60467  name: "1khn195",
60468  styles: "box-sizing:border-box"
60469} : 0);
60470
60471;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date-time/index.js
60472
60473/**
60474 * External dependencies
60475 */
60476
60477/**
60478 * WordPress dependencies
60479 */
60480
60481/**
60482 * Internal dependencies
60483 */
60484
60485
60486
60487
60488const date_time_noop = () => {};
60489function UnforwardedDateTimePicker({
60490  currentDate,
60491  is12Hour,
60492  isInvalidDate,
60493  onMonthPreviewed = date_time_noop,
60494  onChange,
60495  events,
60496  startOfWeek
60497}, ref) {
60498  return (0,external_wp_element_namespaceObject.createElement)(date_time_styles_Wrapper, {
60499    ref: ref,
60500    className: "components-datetime",
60501    spacing: 4
60502  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(time, {
60503    currentTime: currentDate,
60504    onChange: onChange,
60505    is12Hour: is12Hour
60506  }), (0,external_wp_element_namespaceObject.createElement)(date, {
60507    currentDate: currentDate,
60508    onChange: onChange,
60509    isInvalidDate: isInvalidDate,
60510    events: events,
60511    onMonthPreviewed: onMonthPreviewed,
60512    startOfWeek: startOfWeek
60513  })));
60514}
60515
60516/**
60517 * DateTimePicker is a React component that renders a calendar and clock for
60518 * date and time selection. The calendar and clock components can be accessed
60519 * individually using the `DatePicker` and `TimePicker` components respectively.
60520 *
60521 * ```jsx
60522 * import { DateTimePicker } from '@wordpress/components';
60523 * import { useState } from '@wordpress/element';
60524 *
60525 * const MyDateTimePicker = () => {
60526 *   const [ date, setDate ] = useState( new Date() );
60527 *
60528 *   return (
60529 *     <DateTimePicker
60530 *       currentDate={ date }
60531 *       onChange={ ( newDate ) => setDate( newDate ) }
60532 *       is12Hour
60533 *     />
60534 *   );
60535 * };
60536 * ```
60537 */
60538const DateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDateTimePicker);
60539/* harmony default export */ const date_time = (DateTimePicker);
60540
60541;// CONCATENATED MODULE: ./packages/components/build-module/date-time/index.js
60542/**
60543 * Internal dependencies
60544 */
60545
60546
60547
60548
60549/* harmony default export */ const build_module_date_time = (date_time);
60550
60551;// CONCATENATED MODULE: ./packages/components/build-module/dimension-control/sizes.js
60552/**
60553 * Sizes
60554 *
60555 * defines the sizes used in dimension controls
60556 * all hardcoded `size` values are based on the value of
60557 * the Sass variable `$block-padding` from
60558 * `packages/block-editor/src/components/dimension-control/sizes.js`.
60559 */
60560
60561/**
60562 * WordPress dependencies
60563 */
60564
60565
60566/**
60567 * Internal dependencies
60568 */
60569
60570/**
60571 * Finds the correct size object from the provided sizes
60572 * table by size slug (eg: `medium`)
60573 *
60574 * @param sizes containing objects for each size definition.
60575 * @param slug  a string representation of the size (eg: `medium`).
60576 */
60577const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug);
60578/* harmony default export */ const dimension_control_sizes = ([{
60579  name: (0,external_wp_i18n_namespaceObject._x)('None', 'Size of a UI element'),
60580  slug: 'none'
60581}, {
60582  name: (0,external_wp_i18n_namespaceObject._x)('Small', 'Size of a UI element'),
60583  slug: 'small'
60584}, {
60585  name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Size of a UI element'),
60586  slug: 'medium'
60587}, {
60588  name: (0,external_wp_i18n_namespaceObject._x)('Large', 'Size of a UI element'),
60589  slug: 'large'
60590}, {
60591  name: (0,external_wp_i18n_namespaceObject._x)('Extra Large', 'Size of a UI element'),
60592  slug: 'xlarge'
60593}]);
60594
60595;// CONCATENATED MODULE: ./packages/components/build-module/dimension-control/index.js
60596
60597/**
60598 * External dependencies
60599 */
60600
60601
60602/**
60603 * WordPress dependencies
60604 */
60605
60606
60607/**
60608 * Internal dependencies
60609 */
60610
60611
60612
60613/**
60614 * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
60615 *
60616 * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
60617 *
60618 * ```jsx
60619 * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
60620 * import { useState } from '@wordpress/element';
60621 *
60622 * export default function MyCustomDimensionControl() {
60623 * 	const [ paddingSize, setPaddingSize ] = useState( '' );
60624 *
60625 * 	return (
60626 * 		<DimensionControl
60627 * 			label={ 'Padding' }
60628 * 			icon={ 'desktop' }
60629 * 			onChange={ ( value ) => setPaddingSize( value ) }
60630 * 			value={ paddingSize }
60631 * 		/>
60632 * 	);
60633 * }
60634 * ```
60635 */
60636function DimensionControl(props) {
60637  const {
60638    label,
60639    value,
60640    sizes = dimension_control_sizes,
60641    icon,
60642    onChange,
60643    className = ''
60644  } = props;
60645  const onChangeSpacingSize = val => {
60646    const theSize = findSizeBySlug(sizes, val);
60647    if (!theSize || value === theSize.slug) {
60648      onChange?.(undefined);
60649    } else if (typeof onChange === 'function') {
60650      onChange(theSize.slug);
60651    }
60652  };
60653  const formatSizesAsOptions = theSizes => {
60654    const options = theSizes.map(({
60655      name,
60656      slug
60657    }) => ({
60658      label: name,
60659      value: slug
60660    }));
60661    return [{
60662      label: (0,external_wp_i18n_namespaceObject.__)('Default'),
60663      value: ''
60664    }, ...options];
60665  };
60666  const selectLabel = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
60667    icon: icon
60668  }), label);
60669  return (0,external_wp_element_namespaceObject.createElement)(select_control, {
60670    className: classnames_default()(className, 'block-editor-dimension-control'),
60671    label: selectLabel,
60672    hideLabelFromVision: false,
60673    value: value,
60674    onChange: onChangeSpacingSize,
60675    options: formatSizesAsOptions(sizes)
60676  });
60677}
60678/* harmony default export */ const dimension_control = (DimensionControl);
60679
60680;// CONCATENATED MODULE: ./packages/components/build-module/disabled/styles/disabled-styles.js
60681function disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
60682/**
60683 * External dependencies
60684 */
60685
60686const disabled_styles_disabledStyles =  true ? {
60687  name: "u2jump",
60688  styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}"
60689} : 0;
60690
60691;// CONCATENATED MODULE: ./packages/components/build-module/disabled/index.js
60692
60693/**
60694 * WordPress dependencies
60695 */
60696
60697
60698/**
60699 * Internal dependencies
60700 */
60701
60702
60703const Context = (0,external_wp_element_namespaceObject.createContext)(false);
60704const {
60705  Consumer,
60706  Provider: disabled_Provider
60707} = Context;
60708
60709/**
60710 * `Disabled` is a component which disables descendant tabbable elements and
60711 * prevents pointer interaction.
60712 *
60713 * _Note: this component may not behave as expected in browsers that don't
60714 * support the `inert` HTML attribute. We recommend adding the official WICG
60715 * polyfill when using this component in your project._
60716 *
60717 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
60718 *
60719 * ```jsx
60720 * import { Button, Disabled, TextControl } from '@wordpress/components';
60721 * import { useState } from '@wordpress/element';
60722 *
60723 * const MyDisabled = () => {
60724 * 	const [ isDisabled, setIsDisabled ] = useState( true );
60725 *
60726 * 	let input = <TextControl label="Input" onChange={ () => {} } />;
60727 * 	if ( isDisabled ) {
60728 * 		input = <Disabled>{ input }</Disabled>;
60729 * 	}
60730 *
60731 * 	const toggleDisabled = () => {
60732 * 		setIsDisabled( ( state ) => ! state );
60733 * 	};
60734 *
60735 * 	return (
60736 * 		<div>
60737 * 			{ input }
60738 * 			<Button variant="primary" onClick={ toggleDisabled }>
60739 * 				Toggle Disabled
60740 * 			</Button>
60741 * 		</div>
60742 * 	);
60743 * };
60744 * ```
60745 */
60746function Disabled({
60747  className,
60748  children,
60749  isDisabled = true,
60750  ...props
60751}) {
60752  const cx = useCx();
60753  return (0,external_wp_element_namespaceObject.createElement)(disabled_Provider, {
60754    value: isDisabled
60755  }, (0,external_wp_element_namespaceObject.createElement)("div", {
60756    // @ts-ignore Reason: inert is a recent HTML attribute
60757    inert: isDisabled ? 'true' : undefined,
60758    className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined,
60759    ...props
60760  }, children));
60761}
60762Disabled.Context = Context;
60763Disabled.Consumer = Consumer;
60764/* harmony default export */ const disabled = (Disabled);
60765
60766;// CONCATENATED MODULE: ./packages/components/build-module/draggable/index.js
60767
60768/**
60769 * External dependencies
60770 */
60771
60772/**
60773 * WordPress dependencies
60774 */
60775
60776
60777
60778/**
60779 * Internal dependencies
60780 */
60781
60782const dragImageClass = 'components-draggable__invisible-drag-image';
60783const cloneWrapperClass = 'components-draggable__clone';
60784const clonePadding = 0;
60785const bodyClass = 'is-dragging-components-draggable';
60786
60787/**
60788 * `Draggable` is a Component that provides a way to set up a cross-browser
60789 * (including IE) customizable drag image and the transfer data for the drag
60790 * event. It decouples the drag handle and the element to drag: use it by
60791 * wrapping the component that will become the drag handle and providing the DOM
60792 * ID of the element to drag.
60793 *
60794 * Note that the drag handle needs to declare the `draggable="true"` property
60795 * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event
60796 * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`
60797 * takes care of the logic to setup the drag image and the transfer data, but is
60798 * not concerned with creating an actual DOM element that is draggable.
60799 *
60800 * ```jsx
60801 * import { Draggable, Panel, PanelBody } from '@wordpress/components';
60802 * import { Icon, more } from '@wordpress/icons';
60803 *
60804 * const MyDraggable = () => (
60805 *   <div id="draggable-panel">
60806 *     <Panel header="Draggable panel">
60807 *       <PanelBody>
60808 *         <Draggable elementId="draggable-panel" transferData={ {} }>
60809 *           { ( { onDraggableStart, onDraggableEnd } ) => (
60810 *             <div
60811 *               className="example-drag-handle"
60812 *               draggable
60813 *               onDragStart={ onDraggableStart }
60814 *               onDragEnd={ onDraggableEnd }
60815 *             >
60816 *               <Icon icon={ more } />
60817 *             </div>
60818 *           ) }
60819 *         </Draggable>
60820 *       </PanelBody>
60821 *     </Panel>
60822 *   </div>
60823 * );
60824 * ```
60825 */
60826function Draggable({
60827  children,
60828  onDragStart,
60829  onDragOver,
60830  onDragEnd,
60831  appendToOwnerDocument = false,
60832  cloneClassname,
60833  elementId,
60834  transferData,
60835  __experimentalTransferDataType: transferDataType = 'text',
60836  __experimentalDragComponent: dragComponent
60837}) {
60838  const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null);
60839  const cleanup = (0,external_wp_element_namespaceObject.useRef)(() => {});
60840
60841  /**
60842   * Removes the element clone, resets cursor, and removes drag listener.
60843   *
60844   * @param event The non-custom DragEvent.
60845   */
60846  function end(event) {
60847    event.preventDefault();
60848    cleanup.current();
60849    if (onDragEnd) {
60850      onDragEnd(event);
60851    }
60852  }
60853
60854  /**
60855   * This method does a couple of things:
60856   *
60857   * - Clones the current element and spawns clone over original element.
60858   * - Adds a fake temporary drag image to avoid browser defaults.
60859   * - Sets transfer data.
60860   * - Adds dragover listener.
60861   *
60862   * @param event The non-custom DragEvent.
60863   */
60864  function start(event) {
60865    const {
60866      ownerDocument
60867    } = event.target;
60868    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));
60869    const cloneWrapper = ownerDocument.createElement('div');
60870    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.
60871    cloneWrapper.style.top = '0';
60872    cloneWrapper.style.left = '0';
60873    const dragImage = ownerDocument.createElement('div');
60874
60875    // Set a fake drag image to avoid browser defaults. Remove from DOM
60876    // right after. event.dataTransfer.setDragImage is not supported yet in
60877    // IE, we need to check for its existence first.
60878    if ('function' === typeof event.dataTransfer.setDragImage) {
60879      dragImage.classList.add(dragImageClass);
60880      ownerDocument.body.appendChild(dragImage);
60881      event.dataTransfer.setDragImage(dragImage, 0, 0);
60882    }
60883    cloneWrapper.classList.add(cloneWrapperClass);
60884    if (cloneClassname) {
60885      cloneWrapper.classList.add(cloneClassname);
60886    }
60887    let x = 0;
60888    let y = 0;
60889    // If a dragComponent is defined, the following logic will clone the
60890    // HTML node and inject it into the cloneWrapper.
60891    if (dragComponentRef.current) {
60892      // Position dragComponent at the same position as the cursor.
60893      x = event.clientX;
60894      y = event.clientY;
60895      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;
60896      const clonedDragComponent = ownerDocument.createElement('div');
60897      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
60898      cloneWrapper.appendChild(clonedDragComponent);
60899
60900      // Inject the cloneWrapper into the DOM.
60901      ownerDocument.body.appendChild(cloneWrapper);
60902    } else {
60903      const element = ownerDocument.getElementById(elementId);
60904
60905      // Prepare element clone and append to element wrapper.
60906      const elementRect = element.getBoundingClientRect();
60907      const elementWrapper = element.parentNode;
60908      const elementTopOffset = elementRect.top;
60909      const elementLeftOffset = elementRect.left;
60910      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;
60911      const clone = element.cloneNode(true);
60912      clone.id = `clone-${elementId}`;
60913
60914      // Position clone right over the original element (20px padding).
60915      x = elementLeftOffset - clonePadding;
60916      y = elementTopOffset - clonePadding;
60917      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;
60918
60919      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
60920      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));
60921      cloneWrapper.appendChild(clone);
60922
60923      // Inject the cloneWrapper into the DOM.
60924      if (appendToOwnerDocument) {
60925        ownerDocument.body.appendChild(cloneWrapper);
60926      } else {
60927        elementWrapper?.appendChild(cloneWrapper);
60928      }
60929    }
60930
60931    // Mark the current cursor coordinates.
60932    let cursorLeft = event.clientX;
60933    let cursorTop = event.clientY;
60934    function over(e) {
60935      // Skip doing any work if mouse has not moved.
60936      if (cursorLeft === e.clientX && cursorTop === e.clientY) {
60937        return;
60938      }
60939      const nextX = x + e.clientX - cursorLeft;
60940      const nextY = y + e.clientY - cursorTop;
60941      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;
60942      cursorLeft = e.clientX;
60943      cursorTop = e.clientY;
60944      x = nextX;
60945      y = nextY;
60946      if (onDragOver) {
60947        onDragOver(e);
60948      }
60949    }
60950
60951    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,
60952    // note that browsers may throttle raf below 60fps in certain conditions.
60953    // @ts-ignore
60954    const throttledDragOver = (0,external_wp_compose_namespaceObject.throttle)(over, 16);
60955    ownerDocument.addEventListener('dragover', throttledDragOver);
60956
60957    // Update cursor to 'grabbing', document wide.
60958    ownerDocument.body.classList.add(bodyClass);
60959    if (onDragStart) {
60960      onDragStart(event);
60961    }
60962    cleanup.current = () => {
60963      // Remove drag clone.
60964      if (cloneWrapper && cloneWrapper.parentNode) {
60965        cloneWrapper.parentNode.removeChild(cloneWrapper);
60966      }
60967      if (dragImage && dragImage.parentNode) {
60968        dragImage.parentNode.removeChild(dragImage);
60969      }
60970
60971      // Reset cursor.
60972      ownerDocument.body.classList.remove(bodyClass);
60973      ownerDocument.removeEventListener('dragover', throttledDragOver);
60974    };
60975  }
60976  (0,external_wp_element_namespaceObject.useEffect)(() => () => {
60977    cleanup.current();
60978  }, []);
60979  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children({
60980    onDraggableStart: start,
60981    onDraggableEnd: end
60982  }), dragComponent && (0,external_wp_element_namespaceObject.createElement)("div", {
60983    className: "components-draggable-drag-component-root",
60984    style: {
60985      display: 'none'
60986    },
60987    ref: dragComponentRef
60988  }, dragComponent));
60989}
60990/* harmony default export */ const draggable = (Draggable);
60991
60992;// CONCATENATED MODULE: ./packages/icons/build-module/library/upload.js
60993
60994/**
60995 * WordPress dependencies
60996 */
60997
60998const upload = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
60999  xmlns: "http://www.w3.org/2000/svg",
61000  viewBox: "0 0 24 24"
61001}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
61002  d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z"
61003}));
61004/* harmony default export */ const library_upload = (upload);
61005
61006;// CONCATENATED MODULE: ./packages/components/build-module/drop-zone/index.js
61007
61008/**
61009 * External dependencies
61010 */
61011
61012
61013/**
61014 * WordPress dependencies
61015 */
61016
61017
61018
61019
61020
61021
61022/**
61023 * Internal dependencies
61024 */
61025
61026/**
61027 * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
61028 *
61029 * ```jsx
61030 * import { DropZone } from '@wordpress/components';
61031 * import { useState } from '@wordpress/element';
61032 *
61033 * const MyDropZone = () => {
61034 *   const [ hasDropped, setHasDropped ] = useState( false );
61035 *
61036 *   return (
61037 *     <div>
61038 *       { hasDropped ? 'Dropped!' : 'Drop something here' }
61039 *       <DropZone
61040 *         onFilesDrop={ () => setHasDropped( true ) }
61041 *         onHTMLDrop={ () => setHasDropped( true ) }
61042 *         onDrop={ () => setHasDropped( true ) }
61043 *       />
61044 *     </div>
61045 *   );
61046 * }
61047 * ```
61048 */
61049function DropZoneComponent({
61050  className,
61051  label,
61052  onFilesDrop,
61053  onHTMLDrop,
61054  onDrop,
61055  ...restProps
61056}) {
61057  const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)();
61058  const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)();
61059  const [type, setType] = (0,external_wp_element_namespaceObject.useState)();
61060  const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
61061    onDrop(event) {
61062      const files = event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : [];
61063      const html = event.dataTransfer?.getData('text/html');
61064
61065      /**
61066       * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
61067       * The order of the checks is important to recognise the HTML drop.
61068       */
61069      if (html && onHTMLDrop) {
61070        onHTMLDrop(html);
61071      } else if (files.length && onFilesDrop) {
61072        onFilesDrop(files);
61073      } else if (onDrop) {
61074        onDrop(event);
61075      }
61076    },
61077    onDragStart(event) {
61078      setIsDraggingOverDocument(true);
61079      let _type = 'default';
61080
61081      /**
61082       * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
61083       * The order of the checks is important to recognise the HTML drop.
61084       */
61085      if (event.dataTransfer?.types.includes('text/html')) {
61086        _type = 'html';
61087      } else if (
61088      // Check for the types because sometimes the files themselves
61089      // are only available on drop.
61090      event.dataTransfer?.types.includes('Files') || (event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : []).length > 0) {
61091        _type = 'file';
61092      }
61093      setType(_type);
61094    },
61095    onDragEnd() {
61096      setIsDraggingOverDocument(false);
61097      setType(undefined);
61098    },
61099    onDragEnter() {
61100      setIsDraggingOverElement(true);
61101    },
61102    onDragLeave() {
61103      setIsDraggingOverElement(false);
61104    }
61105  });
61106  const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
61107  let children;
61108  const backdrop = {
61109    hidden: {
61110      opacity: 0
61111    },
61112    show: {
61113      opacity: 1,
61114      transition: {
61115        type: 'tween',
61116        duration: 0.2,
61117        delay: 0,
61118        delayChildren: 0.1
61119      }
61120    },
61121    exit: {
61122      opacity: 0,
61123      transition: {
61124        duration: 0.2,
61125        delayChildren: 0
61126      }
61127    }
61128  };
61129  const foreground = {
61130    hidden: {
61131      opacity: 0,
61132      scale: 0.9
61133    },
61134    show: {
61135      opacity: 1,
61136      scale: 1,
61137      transition: {
61138        duration: 0.1
61139      }
61140    },
61141    exit: {
61142      opacity: 0,
61143      scale: 0.9
61144    }
61145  };
61146  if (isDraggingOverElement) {
61147    children = (0,external_wp_element_namespaceObject.createElement)(motion.div, {
61148      variants: backdrop,
61149      initial: disableMotion ? 'show' : 'hidden',
61150      animate: "show",
61151      exit: disableMotion ? 'show' : 'exit',
61152      className: "components-drop-zone__content"
61153      // Without this, when this div is shown,
61154      // Safari calls a onDropZoneLeave causing a loop because of this bug
61155      // https://bugs.webkit.org/show_bug.cgi?id=66547
61156      ,
61157      style: {
61158        pointerEvents: 'none'
61159      }
61160    }, (0,external_wp_element_namespaceObject.createElement)(motion.div, {
61161      variants: foreground
61162    }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
61163      icon: library_upload,
61164      className: "components-drop-zone__content-icon"
61165    }), (0,external_wp_element_namespaceObject.createElement)("span", {
61166      className: "components-drop-zone__content-text"
61167    }, label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload'))));
61168  }
61169  const classes = classnames_default()('components-drop-zone', className, {
61170    'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
61171    'is-dragging-over-document': isDraggingOverDocument,
61172    'is-dragging-over-element': isDraggingOverElement,
61173    [`is-dragging-${type}`]: !!type
61174  });
61175  return (0,external_wp_element_namespaceObject.createElement)("div", {
61176    ...restProps,
61177    ref: ref,
61178    className: classes
61179  }, disableMotion ? children : (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, children));
61180}
61181/* harmony default export */ const drop_zone = (DropZoneComponent);
61182
61183;// CONCATENATED MODULE: ./packages/components/build-module/drop-zone/provider.js
61184/**
61185 * WordPress dependencies
61186 */
61187
61188function DropZoneProvider({
61189  children
61190}) {
61191  external_wp_deprecated_default()('wp.components.DropZoneProvider', {
61192    since: '5.8',
61193    hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.'
61194  });
61195  return children;
61196}
61197
61198;// CONCATENATED MODULE: ./packages/icons/build-module/library/swatch.js
61199
61200/**
61201 * WordPress dependencies
61202 */
61203
61204const swatch = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
61205  xmlns: "http://www.w3.org/2000/svg",
61206  viewBox: "0 0 24 24"
61207}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
61208  d: "M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z"
61209}));
61210/* harmony default export */ const library_swatch = (swatch);
61211
61212;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/utils.js
61213/**
61214 * External dependencies
61215 */
61216
61217
61218
61219/**
61220 * Internal dependencies
61221 */
61222
61223k([names]);
61224
61225/**
61226 * Object representation for a color.
61227 *
61228 * @typedef {Object} RGBColor
61229 * @property {number} r Red component of the color in the range [0,1].
61230 * @property {number} g Green component of the color in the range [0,1].
61231 * @property {number} b Blue component of the color in the range [0,1].
61232 */
61233
61234/**
61235 * Calculate the brightest and darkest values from a color palette.
61236 *
61237 * @param palette Color palette for the theme.
61238 *
61239 * @return Tuple of the darkest color and brightest color.
61240 */
61241function getDefaultColors(palette) {
61242  // A default dark and light color are required.
61243  if (!palette || palette.length < 2) return ['#000', '#fff'];
61244  return palette.map(({
61245    color
61246  }) => ({
61247    color,
61248    brightness: w(color).brightness()
61249  })).reduce(([min, max], current) => {
61250    return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
61251  }, [{
61252    brightness: 1,
61253    color: ''
61254  }, {
61255    brightness: 0,
61256    color: ''
61257  }]).map(({
61258    color
61259  }) => color);
61260}
61261
61262/**
61263 * Generate a duotone gradient from a list of colors.
61264 *
61265 * @param colors CSS color strings.
61266 * @param angle  CSS gradient angle.
61267 *
61268 * @return  CSS gradient string for the duotone swatch.
61269 */
61270function getGradientFromCSSColors(colors = [], angle = '90deg') {
61271  const l = 100 / colors.length;
61272  const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', ');
61273  return `linear-gradient( ${angle}, ${stops} )`;
61274}
61275
61276/**
61277 * Convert a color array to an array of color stops.
61278 *
61279 * @param colors CSS colors array
61280 *
61281 * @return Color stop information.
61282 */
61283function getColorStopsFromColors(colors) {
61284  return colors.map((color, i) => ({
61285    position: i * 100 / (colors.length - 1),
61286    color
61287  }));
61288}
61289
61290/**
61291 * Convert a color stop array to an array colors.
61292 *
61293 * @param colorStops Color stop information.
61294 *
61295 * @return CSS colors array.
61296 */
61297function getColorsFromColorStops(colorStops = []) {
61298  return colorStops.map(({
61299    color
61300  }) => color);
61301}
61302
61303;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/duotone-swatch.js
61304
61305/**
61306 * WordPress dependencies
61307 */
61308
61309
61310/**
61311 * Internal dependencies
61312 */
61313
61314
61315
61316function DuotoneSwatch({
61317  values
61318}) {
61319  return values ? (0,external_wp_element_namespaceObject.createElement)(color_indicator, {
61320    colorValue: getGradientFromCSSColors(values, '135deg')
61321  }) : (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
61322    icon: library_swatch
61323  });
61324}
61325/* harmony default export */ const duotone_swatch = (DuotoneSwatch);
61326
61327;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/color-list-picker/index.js
61328
61329/**
61330 * WordPress dependencies
61331 */
61332
61333
61334
61335
61336/**
61337 * Internal dependencies
61338 */
61339
61340
61341
61342
61343
61344
61345function ColorOption({
61346  label,
61347  value,
61348  colors,
61349  disableCustomColors,
61350  enableAlpha,
61351  onChange
61352}) {
61353  const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false);
61354  const idRoot = (0,external_wp_compose_namespaceObject.useInstanceId)(ColorOption, 'color-list-picker-option');
61355  const labelId = `${idRoot}__label`;
61356  const contentId = `${idRoot}__content`;
61357  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
61358    className: "components-color-list-picker__swatch-button",
61359    onClick: () => setIsOpen(prev => !prev),
61360    "aria-expanded": isOpen,
61361    "aria-controls": contentId
61362  }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
61363    justify: "flex-start",
61364    spacing: 2
61365  }, value ? (0,external_wp_element_namespaceObject.createElement)(color_indicator, {
61366    colorValue: value,
61367    className: "components-color-list-picker__swatch-color"
61368  }) : (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
61369    icon: library_swatch
61370  }), (0,external_wp_element_namespaceObject.createElement)("span", {
61371    id: labelId
61372  }, label))), (0,external_wp_element_namespaceObject.createElement)("div", {
61373    role: "group",
61374    id: contentId,
61375    "aria-labelledby": labelId,
61376    "aria-hidden": !isOpen
61377  }, isOpen && (0,external_wp_element_namespaceObject.createElement)(color_palette, {
61378    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'),
61379    className: "components-color-list-picker__color-picker",
61380    colors: colors,
61381    value: value,
61382    clearable: false,
61383    onChange: onChange,
61384    disableCustomColors: disableCustomColors,
61385    enableAlpha: enableAlpha
61386  })));
61387}
61388function ColorListPicker({
61389  colors,
61390  labels,
61391  value = [],
61392  disableCustomColors,
61393  enableAlpha,
61394  onChange
61395}) {
61396  return (0,external_wp_element_namespaceObject.createElement)("div", {
61397    className: "components-color-list-picker"
61398  }, labels.map((label, index) => (0,external_wp_element_namespaceObject.createElement)(ColorOption, {
61399    key: index,
61400    label: label,
61401    value: value[index],
61402    colors: colors,
61403    disableCustomColors: disableCustomColors,
61404    enableAlpha: enableAlpha,
61405    onChange: newColor => {
61406      const newColors = value.slice();
61407      newColors[index] = newColor;
61408      onChange(newColors);
61409    }
61410  })));
61411}
61412/* harmony default export */ const color_list_picker = (ColorListPicker);
61413
61414;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/custom-duotone-bar.js
61415
61416/**
61417 * Internal dependencies
61418 */
61419
61420
61421const PLACEHOLDER_VALUES = ['#333', '#CCC'];
61422function CustomDuotoneBar({
61423  value,
61424  onChange
61425}) {
61426  const hasGradient = !!value;
61427  const values = hasGradient ? value : PLACEHOLDER_VALUES;
61428  const background = getGradientFromCSSColors(values);
61429  const controlPoints = getColorStopsFromColors(values);
61430  return (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, {
61431    disableInserter: true,
61432    background: background,
61433    hasGradient: hasGradient,
61434    value: controlPoints,
61435    onChange: newColorStops => {
61436      const newValue = getColorsFromColorStops(newColorStops);
61437      onChange(newValue);
61438    }
61439  });
61440}
61441
61442;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/duotone-picker.js
61443
61444/**
61445 * External dependencies
61446 */
61447
61448
61449/**
61450 * WordPress dependencies
61451 */
61452
61453
61454
61455/**
61456 * Internal dependencies
61457 */
61458
61459
61460
61461
61462
61463
61464/**
61465 * ```jsx
61466 * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
61467 * import { useState } from '@wordpress/element';
61468 *
61469 * const DUOTONE_PALETTE = [
61470 * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
61471 * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
61472 * ];
61473 *
61474 * const COLOR_PALETTE = [
61475 * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
61476 * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
61477 * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
61478 * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
61479 * ];
61480 *
61481 * const Example = () => {
61482 * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
61483 * 	return (
61484 * 		<>
61485 * 			<DuotonePicker
61486 * 				duotonePalette={ DUOTONE_PALETTE }
61487 * 				colorPalette={ COLOR_PALETTE }
61488 * 				value={ duotone }
61489 * 				onChange={ setDuotone }
61490 * 			/>
61491 * 			<DuotoneSwatch values={ duotone } />
61492 * 		</>
61493 * 	);
61494 * };
61495 * ```
61496 */
61497function DuotonePicker({
61498  asButtons,
61499  loop,
61500  clearable = true,
61501  unsetable = true,
61502  colorPalette,
61503  duotonePalette,
61504  disableCustomColors,
61505  disableCustomDuotone,
61506  value,
61507  onChange,
61508  'aria-label': ariaLabel,
61509  'aria-labelledby': ariaLabelledby
61510}) {
61511  const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]);
61512  const isUnset = value === 'unset';
61513  const unsetOption = (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, {
61514    key: "unset",
61515    value: "unset",
61516    isSelected: isUnset,
61517    tooltipText: (0,external_wp_i18n_namespaceObject.__)('Unset'),
61518    className: "components-duotone-picker__color-indicator",
61519    onClick: () => {
61520      onChange(isUnset ? undefined : 'unset');
61521    }
61522  });
61523  const options = duotonePalette.map(({
61524    colors,
61525    slug,
61526    name
61527  }) => {
61528    const style = {
61529      background: getGradientFromCSSColors(colors, '135deg'),
61530      color: 'transparent'
61531    };
61532    const tooltipText = name !== null && name !== void 0 ? name : (0,external_wp_i18n_namespaceObject.sprintf)(
61533    // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
61534    (0,external_wp_i18n_namespaceObject.__)('Duotone code: %s'), slug);
61535    const label = name ? (0,external_wp_i18n_namespaceObject.sprintf)(
61536    // translators: %s: The name of the option e.g: "Dark grayscale".
61537    (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText;
61538    const isSelected = es6_default()(colors, value);
61539    return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, {
61540      key: slug,
61541      value: colors,
61542      isSelected: isSelected,
61543      "aria-label": label,
61544      tooltipText: tooltipText,
61545      style: style,
61546      onClick: () => {
61547        onChange(isSelected ? undefined : colors);
61548      }
61549    });
61550  });
61551  let metaProps;
61552  if (asButtons) {
61553    metaProps = {
61554      asButtons: true
61555    };
61556  } else {
61557    const _metaProps = {
61558      asButtons: false,
61559      loop
61560    };
61561    if (ariaLabel) {
61562      metaProps = {
61563        ..._metaProps,
61564        'aria-label': ariaLabel
61565      };
61566    } else if (ariaLabelledby) {
61567      metaProps = {
61568        ..._metaProps,
61569        'aria-labelledby': ariaLabelledby
61570      };
61571    } else {
61572      metaProps = {
61573        ..._metaProps,
61574        'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
61575      };
61576    }
61577  }
61578  return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, {
61579    ...metaProps,
61580    options: unsetable ? [unsetOption, ...options] : options,
61581    actions: !!clearable && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, {
61582      onClick: () => onChange(undefined)
61583    }, (0,external_wp_i18n_namespaceObject.__)('Clear'))
61584  }, (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
61585    paddingTop: 4
61586  }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
61587    spacing: 3
61588  }, !disableCustomColors && !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(CustomDuotoneBar, {
61589    value: isUnset ? undefined : value,
61590    onChange: onChange
61591  }), !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(color_list_picker, {
61592    labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')],
61593    colors: colorPalette,
61594    value: isUnset ? undefined : value,
61595    disableCustomColors: disableCustomColors,
61596    enableAlpha: true,
61597    onChange: newColors => {
61598      if (!newColors[0]) {
61599        newColors[0] = defaultDark;
61600      }
61601      if (!newColors[1]) {
61602        newColors[1] = defaultLight;
61603      }
61604      const newValue = newColors.length >= 2 ? newColors : undefined;
61605      // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
61606      // but it's currently typed as a string[].
61607      // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
61608      onChange(newValue);
61609    }
61610  }))));
61611}
61612/* harmony default export */ const duotone_picker = (DuotonePicker);
61613
61614;// CONCATENATED MODULE: ./packages/icons/build-module/library/external.js
61615
61616/**
61617 * WordPress dependencies
61618 */
61619
61620const external = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
61621  xmlns: "http://www.w3.org/2000/svg",
61622  viewBox: "0 0 24 24"
61623}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
61624  d: "M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
61625}));
61626/* harmony default export */ const library_external = (external);
61627
61628;// CONCATENATED MODULE: ./packages/components/build-module/external-link/styles/external-link-styles.js
61629
61630function external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
61631/**
61632 * External dependencies
61633 */
61634
61635/**
61636 * WordPress dependencies
61637 */
61638
61639const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_module_icon,  true ? {
61640  target: "esh4a730"
61641} : 0)( true ? {
61642  name: "rvs7bx",
61643  styles: "width:1em;height:1em;margin:0;vertical-align:middle;fill:currentColor"
61644} : 0);
61645
61646;// CONCATENATED MODULE: ./packages/components/build-module/external-link/index.js
61647
61648/**
61649 * External dependencies
61650 */
61651
61652/**
61653 * WordPress dependencies
61654 */
61655
61656
61657
61658
61659/**
61660 * Internal dependencies
61661 */
61662
61663
61664function UnforwardedExternalLink(props, ref) {
61665  const {
61666    href,
61667    children,
61668    className,
61669    rel = '',
61670    ...additionalProps
61671  } = props;
61672  const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');
61673  const classes = classnames_default()('components-external-link', className);
61674  /* Anchor links are perceived as external links.
61675  This constant helps check for on page anchor links,
61676  to prevent them from being opened in the editor. */
61677  const isInternalAnchor = !!href?.startsWith('#');
61678  const onClickHandler = event => {
61679    if (isInternalAnchor) {
61680      event.preventDefault();
61681    }
61682    if (props.onClick) {
61683      props.onClick(event);
61684    }
61685  };
61686  return (/* eslint-disable react/jsx-no-target-blank */
61687    (0,external_wp_element_namespaceObject.createElement)("a", {
61688      ...additionalProps,
61689      className: classes,
61690      href: href,
61691      onClick: onClickHandler,
61692      target: "_blank",
61693      rel: optimizedRel,
61694      ref: ref
61695    }, children, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
61696      as: "span"
61697    }, /* translators: accessibility text */
61698    (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)')), (0,external_wp_element_namespaceObject.createElement)(StyledIcon, {
61699      icon: library_external,
61700      className: "components-external-link__icon"
61701    }))
61702    /* eslint-enable react/jsx-no-target-blank */
61703  );
61704}
61705
61706/**
61707 * Link to an external resource.
61708 *
61709 * ```jsx
61710 * import { ExternalLink } from '@wordpress/components';
61711 *
61712 * const MyExternalLink = () => (
61713 *   <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
61714 * );
61715 * ```
61716 */
61717const ExternalLink = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedExternalLink);
61718/* harmony default export */ const external_link = (ExternalLink);
61719
61720;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/utils.js
61721const INITIAL_BOUNDS = {
61722  width: 200,
61723  height: 170
61724};
61725const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv', 'webm', 'wmv'];
61726
61727/**
61728 * Gets the extension of a file name.
61729 *
61730 * @param filename The file name.
61731 * @return  The extension of the file name.
61732 */
61733function getExtension(filename = '') {
61734  const parts = filename.split('.');
61735  return parts[parts.length - 1];
61736}
61737
61738/**
61739 * Checks if a file is a video.
61740 *
61741 * @param filename The file name.
61742 * @return Whether the file is a video.
61743 */
61744function isVideoType(filename = '') {
61745  if (!filename) return false;
61746  return filename.startsWith('data:video/') || VIDEO_EXTENSIONS.includes(getExtension(filename));
61747}
61748
61749/**
61750 * Transforms a fraction value to a percentage value.
61751 *
61752 * @param fraction The fraction value.
61753 * @return A percentage value.
61754 */
61755function fractionToPercentage(fraction) {
61756  return Math.round(fraction * 100);
61757}
61758
61759;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/styles/focal-point-picker-style.js
61760
61761function focal_point_picker_style_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)."; }
61762/**
61763 * External dependencies
61764 */
61765
61766/**
61767 * Internal dependencies
61768 */
61769
61770
61771
61772
61773const MediaWrapper = emotion_styled_base_browser_esm("div",  true ? {
61774  target: "eeew7dm8"
61775} : 0)( true ? {
61776  name: "w0nf6b",
61777  styles: "background-color:transparent;text-align:center;width:100%"
61778} : 0);
61779const MediaContainer = emotion_styled_base_browser_esm("div",  true ? {
61780  target: "eeew7dm7"
61781} : 0)( true ? {
61782  name: "megach",
61783  styles: "align-items:center;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.2 );cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;img,video{box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}"
61784} : 0);
61785const MediaPlaceholder = emotion_styled_base_browser_esm("div",  true ? {
61786  target: "eeew7dm6"
61787} : 0)("background:", COLORS.gray[100], ";box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0));
61788const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control,  true ? {
61789  target: "eeew7dm5"
61790} : 0)( true ? {
61791  name: "1pzk433",
61792  styles: "width:100px"
61793} : 0);
61794var focal_point_picker_style_ref2 =  true ? {
61795  name: "1mn7kwb",
61796  styles: "padding-bottom:1em"
61797} : 0;
61798const focal_point_picker_style_deprecatedBottomMargin = ({
61799  __nextHasNoMarginBottom
61800}) => {
61801  return !__nextHasNoMarginBottom ? focal_point_picker_style_ref2 : undefined;
61802};
61803var focal_point_picker_style_ref =  true ? {
61804  name: "1mn7kwb",
61805  styles: "padding-bottom:1em"
61806} : 0;
61807const extraHelpTextMargin = ({
61808  hasHelpText = false
61809}) => {
61810  return hasHelpText ? focal_point_picker_style_ref : undefined;
61811};
61812const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
61813  target: "eeew7dm4"
61814} : 0)("max-width:320px;padding-top:1em;", extraHelpTextMargin, " ", focal_point_picker_style_deprecatedBottomMargin, ";" + ( true ? "" : 0));
61815const GridView = emotion_styled_base_browser_esm("div",  true ? {
61816  target: "eeew7dm3"
61817} : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;opacity:", ({
61818  showOverlay
61819}) => showOverlay ? 1 : 0, ";" + ( true ? "" : 0));
61820const GridLine = emotion_styled_base_browser_esm("div",  true ? {
61821  target: "eeew7dm2"
61822} : 0)( true ? {
61823  name: "1d42i6k",
61824  styles: "background:white;box-shadow:0 0 2px rgba( 0, 0, 0, 0.6 );position:absolute;opacity:0.4;transform:translateZ( 0 )"
61825} : 0);
61826const GridLineX = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine,  true ? {
61827  target: "eeew7dm1"
61828} : 0)( true ? {
61829  name: "1qp910y",
61830  styles: "height:1px;left:0;right:0"
61831} : 0);
61832const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine,  true ? {
61833  target: "eeew7dm0"
61834} : 0)( true ? {
61835  name: "1oz3zka",
61836  styles: "width:1px;top:0;bottom:0"
61837} : 0);
61838
61839;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/controls.js
61840
61841/**
61842 * WordPress dependencies
61843 */
61844
61845
61846/**
61847 * Internal dependencies
61848 */
61849
61850
61851const TEXTCONTROL_MIN = 0;
61852const TEXTCONTROL_MAX = 100;
61853const controls_noop = () => {};
61854function FocalPointPickerControls({
61855  __nextHasNoMarginBottom,
61856  hasHelpText,
61857  onChange = controls_noop,
61858  point = {
61859    x: 0.5,
61860    y: 0.5
61861  }
61862}) {
61863  const valueX = fractionToPercentage(point.x);
61864  const valueY = fractionToPercentage(point.y);
61865  const handleChange = (value, axis) => {
61866    if (value === undefined) return;
61867    const num = parseInt(value, 10);
61868    if (!isNaN(num)) {
61869      onChange({
61870        ...point,
61871        [axis]: num / 100
61872      });
61873    }
61874  };
61875  return (0,external_wp_element_namespaceObject.createElement)(ControlWrapper, {
61876    className: "focal-point-picker__controls",
61877    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
61878    hasHelpText: hasHelpText
61879  }, (0,external_wp_element_namespaceObject.createElement)(FocalPointUnitControl, {
61880    label: (0,external_wp_i18n_namespaceObject.__)('Left'),
61881    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'),
61882    value: [valueX, '%'].join(''),
61883    onChange: next => handleChange(next, 'x'),
61884    dragDirection: "e"
61885  }), (0,external_wp_element_namespaceObject.createElement)(FocalPointUnitControl, {
61886    label: (0,external_wp_i18n_namespaceObject.__)('Top'),
61887    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'),
61888    value: [valueY, '%'].join(''),
61889    onChange: next => handleChange(next, 'y'),
61890    dragDirection: "s"
61891  }));
61892}
61893function FocalPointUnitControl(props) {
61894  return (0,external_wp_element_namespaceObject.createElement)(StyledUnitControl, {
61895    className: "focal-point-picker__controls-position-unit-control",
61896    labelPosition: "top",
61897    max: TEXTCONTROL_MAX,
61898    min: TEXTCONTROL_MIN,
61899    units: [{
61900      value: '%',
61901      label: '%'
61902    }],
61903    ...props
61904  });
61905}
61906
61907;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/styles/focal-point-style.js
61908
61909/**
61910 * External dependencies
61911 */
61912
61913const PointerCircle = emotion_styled_base_browser_esm("div",  true ? {
61914  target: "e19snlhg0"
61915} : 0)("background-color:transparent;cursor:grab;height:48px;margin:-24px 0 0 -24px;position:absolute;user-select:none;width:48px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.6 );border-radius:50%;backdrop-filter:blur( 4px );box-shadow:rgb( 0 0 0 / 20% ) 0px 0px 10px;", ({
61916  isDragging
61917}) => isDragging && 'cursor: grabbing;', ";" + ( true ? "" : 0));
61918
61919;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/focal-point.js
61920
61921/**
61922 * Internal dependencies
61923 */
61924
61925
61926/**
61927 * External dependencies
61928 */
61929
61930function FocalPoint({
61931  left = '50%',
61932  top = '50%',
61933  ...props
61934}) {
61935  const classes = classnames_default()('components-focal-point-picker__icon_container');
61936  const style = {
61937    left,
61938    top
61939  };
61940  return (0,external_wp_element_namespaceObject.createElement)(PointerCircle, {
61941    ...props,
61942    className: classes,
61943    style: style
61944  });
61945}
61946
61947;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/grid.js
61948
61949/**
61950 * Internal dependencies
61951 */
61952
61953function FocalPointPickerGrid({
61954  bounds,
61955  ...props
61956}) {
61957  return (0,external_wp_element_namespaceObject.createElement)(GridView, {
61958    ...props,
61959    className: "components-focal-point-picker__grid",
61960    style: {
61961      width: bounds.width,
61962      height: bounds.height
61963    }
61964  }, (0,external_wp_element_namespaceObject.createElement)(GridLineX, {
61965    style: {
61966      top: '33%'
61967    }
61968  }), (0,external_wp_element_namespaceObject.createElement)(GridLineX, {
61969    style: {
61970      top: '66%'
61971    }
61972  }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, {
61973    style: {
61974      left: '33%'
61975    }
61976  }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, {
61977    style: {
61978      left: '66%'
61979    }
61980  }));
61981}
61982
61983;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/media.js
61984
61985/**
61986 * External dependencies
61987 */
61988
61989/**
61990 * Internal dependencies
61991 */
61992
61993
61994function media_Media({
61995  alt,
61996  autoPlay,
61997  src,
61998  onLoad,
61999  mediaRef,
62000  // Exposing muted prop for test rendering purposes
62001  // https://github.com/testing-library/react-testing-library/issues/470
62002  muted = true,
62003  ...props
62004}) {
62005  if (!src) {
62006    return (0,external_wp_element_namespaceObject.createElement)(MediaPlaceholder, {
62007      className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
62008      ref: mediaRef,
62009      ...props
62010    });
62011  }
62012  const isVideo = isVideoType(src);
62013  return isVideo ? (0,external_wp_element_namespaceObject.createElement)("video", {
62014    ...props,
62015    autoPlay: autoPlay,
62016    className: "components-focal-point-picker__media components-focal-point-picker__media--video",
62017    loop: true,
62018    muted: muted,
62019    onLoadedData: onLoad,
62020    ref: mediaRef,
62021    src: src
62022  }) : (0,external_wp_element_namespaceObject.createElement)("img", {
62023    ...props,
62024    alt: alt,
62025    className: "components-focal-point-picker__media components-focal-point-picker__media--image",
62026    onLoad: onLoad,
62027    ref: mediaRef,
62028    src: src
62029  });
62030}
62031
62032;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/index.js
62033
62034/**
62035 * External dependencies
62036 */
62037
62038
62039/**
62040 * WordPress dependencies
62041 */
62042
62043
62044
62045
62046/**
62047 * Internal dependencies
62048 */
62049
62050
62051
62052
62053
62054
62055
62056
62057const GRID_OVERLAY_TIMEOUT = 600;
62058
62059/**
62060 * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
62061 *
62062 * This component addresses a specific problem: with large background images it is common to see undesirable crops,
62063 * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
62064 * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
62065 * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
62066 * focal point is never cropped out, regardless of viewport.
62067 *
62068 * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`
62069 * - Corresponding CSS: `background-position: 50% 10%;`
62070 *
62071 * ```jsx
62072 * import { FocalPointPicker } from '@wordpress/components';
62073 * import { useState } from '@wordpress/element';
62074 *
62075 * const Example = () => {
62076 * 	const [ focalPoint, setFocalPoint ] = useState( {
62077 * 		x: 0.5,
62078 * 		y: 0.5,
62079 * 	} );
62080 *
62081 * 	const url = '/path/to/image';
62082 *
62083 * 	// Example function to render the CSS styles based on Focal Point Picker value
62084 * 	const style = {
62085 * 		backgroundImage: `url(${ url })`,
62086 * 		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
62087 * 	};
62088 *
62089 * 	return (
62090 * 		<>
62091 * 			<FocalPointPicker
62092 * 				url={ url }
62093 * 				value={ focalPoint }
62094 * 				onDragStart={ setFocalPoint }
62095 * 				onDrag={ setFocalPoint }
62096 * 				onChange={ setFocalPoint }
62097 * 			/>
62098 * 			<div style={ style } />
62099 * 		</>
62100 * 	);
62101 * };
62102 * ```
62103 */
62104function FocalPointPicker({
62105  __nextHasNoMarginBottom,
62106  autoPlay = true,
62107  className,
62108  help,
62109  label,
62110  onChange,
62111  onDrag,
62112  onDragEnd,
62113  onDragStart,
62114  resolvePoint,
62115  url,
62116  value: valueProp = {
62117    x: 0.5,
62118    y: 0.5
62119  },
62120  ...restProps
62121}) {
62122  const [point, setPoint] = (0,external_wp_element_namespaceObject.useState)(valueProp);
62123  const [showGridOverlay, setShowGridOverlay] = (0,external_wp_element_namespaceObject.useState)(false);
62124  const {
62125    startDrag,
62126    endDrag,
62127    isDragging
62128  } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({
62129    onDragStart: event => {
62130      dragAreaRef.current?.focus();
62131      const value = getValueWithinDragArea(event);
62132
62133      // `value` can technically be undefined if getValueWithinDragArea() is
62134      // called before dragAreaRef is set, but this shouldn't happen in reality.
62135      if (!value) return;
62136      onDragStart?.(value, event);
62137      setPoint(value);
62138    },
62139    onDragMove: event => {
62140      // Prevents text-selection when dragging.
62141      event.preventDefault();
62142      const value = getValueWithinDragArea(event);
62143      if (!value) return;
62144      onDrag?.(value, event);
62145      setPoint(value);
62146    },
62147    onDragEnd: () => {
62148      onDragEnd?.();
62149      onChange?.(point);
62150    }
62151  });
62152
62153  // Uses the internal point while dragging or else the value from props.
62154  const {
62155    x,
62156    y
62157  } = isDragging ? point : valueProp;
62158  const dragAreaRef = (0,external_wp_element_namespaceObject.useRef)(null);
62159  const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS);
62160  const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => {
62161    if (!dragAreaRef.current) return;
62162    const {
62163      clientWidth: width,
62164      clientHeight: height
62165    } = dragAreaRef.current;
62166    // Falls back to initial bounds if the ref has no size. Since styles
62167    // give the drag area dimensions even when the media has not loaded
62168    // this should only happen in unit tests (jsdom).
62169    setBounds(width > 0 && height > 0 ? {
62170      width,
62171      height
62172    } : {
62173      ...INITIAL_BOUNDS
62174    });
62175  });
62176  (0,external_wp_element_namespaceObject.useEffect)(() => {
62177    const updateBounds = refUpdateBounds.current;
62178    if (!dragAreaRef.current) return;
62179    const {
62180      defaultView
62181    } = dragAreaRef.current.ownerDocument;
62182    defaultView?.addEventListener('resize', updateBounds);
62183    return () => defaultView?.removeEventListener('resize', updateBounds);
62184  }, []);
62185
62186  // Updates the bounds to cover cases of unspecified media or load failures.
62187  (0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
62188
62189  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
62190  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
62191  const getValueWithinDragArea = ({
62192    clientX,
62193    clientY,
62194    shiftKey
62195  }) => {
62196    if (!dragAreaRef.current) return;
62197    const {
62198      top,
62199      left
62200    } = dragAreaRef.current.getBoundingClientRect();
62201    let nextX = (clientX - left) / bounds.width;
62202    let nextY = (clientY - top) / bounds.height;
62203    // Enables holding shift to jump values by 10%.
62204    if (shiftKey) {
62205      nextX = Math.round(nextX / 0.1) * 0.1;
62206      nextY = Math.round(nextY / 0.1) * 0.1;
62207    }
62208    return getFinalValue({
62209      x: nextX,
62210      y: nextY
62211    });
62212  };
62213  const getFinalValue = value => {
62214    var _resolvePoint;
62215    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
62216    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
62217    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
62218    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;
62219    return {
62220      x: roundToTwoDecimalPlaces(resolvedValue.x),
62221      y: roundToTwoDecimalPlaces(resolvedValue.y)
62222    };
62223  };
62224  const arrowKeyStep = event => {
62225    const {
62226      code,
62227      shiftKey
62228    } = event;
62229    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
62230    event.preventDefault();
62231    const value = {
62232      x,
62233      y
62234    };
62235    const step = shiftKey ? 0.1 : 0.01;
62236    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
62237    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
62238    value[axis] = value[axis] + delta;
62239    onChange?.(getFinalValue(value));
62240  };
62241  const focalPointPosition = {
62242    left: x * bounds.width,
62243    top: y * bounds.height
62244  };
62245  const classes = classnames_default()('components-focal-point-picker-control', className);
62246  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker);
62247  const id = `inspector-focal-point-picker-control-${instanceId}`;
62248  use_update_effect(() => {
62249    setShowGridOverlay(true);
62250    const timeout = window.setTimeout(() => {
62251      setShowGridOverlay(false);
62252    }, GRID_OVERLAY_TIMEOUT);
62253    return () => window.clearTimeout(timeout);
62254  }, [x, y]);
62255  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
62256    ...restProps,
62257    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
62258    label: label,
62259    id: id,
62260    help: help,
62261    className: classes
62262  }, (0,external_wp_element_namespaceObject.createElement)(MediaWrapper, {
62263    className: "components-focal-point-picker-wrapper"
62264  }, (0,external_wp_element_namespaceObject.createElement)(MediaContainer, {
62265    className: "components-focal-point-picker",
62266    onKeyDown: arrowKeyStep,
62267    onMouseDown: startDrag,
62268    onBlur: () => {
62269      if (isDragging) endDrag();
62270    },
62271    ref: dragAreaRef,
62272    role: "button",
62273    tabIndex: -1
62274  }, (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerGrid, {
62275    bounds: bounds,
62276    showOverlay: showGridOverlay
62277  }), (0,external_wp_element_namespaceObject.createElement)(media_Media, {
62278    alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'),
62279    autoPlay: autoPlay,
62280    onLoad: refUpdateBounds.current,
62281    src: url
62282  }), (0,external_wp_element_namespaceObject.createElement)(FocalPoint, {
62283    ...focalPointPosition,
62284    isDragging: isDragging
62285  }))), (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerControls, {
62286    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
62287    hasHelpText: !!help,
62288    point: {
62289      x,
62290      y
62291    },
62292    onChange: value => {
62293      onChange?.(getFinalValue(value));
62294    }
62295  }));
62296}
62297/* harmony default export */ const focal_point_picker = (FocalPointPicker);
62298
62299;// CONCATENATED MODULE: ./packages/components/build-module/focusable-iframe/index.js
62300
62301/**
62302 * WordPress dependencies
62303 */
62304
62305
62306/**
62307 * Internal dependencies
62308 */
62309
62310function FocusableIframe({
62311  iframeRef,
62312  ...props
62313}) {
62314  const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]);
62315  external_wp_deprecated_default()('wp.components.FocusableIframe', {
62316    since: '5.9',
62317    alternative: 'wp.compose.useFocusableIframe'
62318  });
62319  // Disable reason: The rendered iframe is a pass-through component,
62320  // assigning props inherited from the rendering parent. It's the
62321  // responsibility of the parent to assign a title.
62322  // eslint-disable-next-line jsx-a11y/iframe-has-title
62323  return (0,external_wp_element_namespaceObject.createElement)("iframe", {
62324    ref: ref,
62325    ...props
62326  });
62327}
62328
62329;// CONCATENATED MODULE: ./packages/icons/build-module/library/sett
62329ings.js
62330
62331/**
62332 * WordPress dependencies
62333 */
62334
62335const settings = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
62336  xmlns: "http://www.w3.org/2000/svg",
62337  viewBox: "0 0 24 24"
62338}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
62339  d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"
62340}), (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
62341  d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"
62342}));
62343/* harmony default export */ const library_settings = (settings);
62344
62345;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/utils.js
62346/**
62347 * WordPress dependencies
62348 */
62349
62350/**
62351 * Internal dependencies
62352 */
62353
62354
62355
62356/**
62357 * Some themes use css vars for their font sizes, so until we
62358 * have the way of calculating them don't display them.
62359 *
62360 * @param value The value that is checked.
62361 * @return Whether the value is a simple css value.
62362 */
62363function isSimpleCssValue(value) {
62364  const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
62365  return sizeRegex.test(String(value));
62366}
62367
62368/**
62369 * If all of the given font sizes have the same unit (e.g. 'px'), return that
62370 * unit. Otherwise return null.
62371 *
62372 * @param fontSizes List of font sizes.
62373 * @return The common unit, or null.
62374 */
62375function getCommonSizeUnit(fontSizes) {
62376  const [firstFontSize, ...otherFontSizes] = fontSizes;
62377  if (!firstFontSize) {
62378    return null;
62379  }
62380  const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size);
62381  const areAllSizesSameUnit = otherFontSizes.every(fontSize => {
62382    const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size);
62383    return unit === firstUnit;
62384  });
62385  return areAllSizesSameUnit ? firstUnit : null;
62386}
62387
62388;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/styles.js
62389
62390function font_size_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
62391/**
62392 * External dependencies
62393 */
62394
62395/**
62396 * Internal dependencies
62397 */
62398
62399
62400
62401
62402
62403const styles_Container = emotion_styled_base_browser_esm("fieldset",  true ? {
62404  target: "e8tqeku5"
62405} : 0)( true ? {
62406  name: "1t1ytme",
62407  styles: "border:0;margin:0;padding:0"
62408} : 0);
62409const font_size_picker_styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
62410  target: "e8tqeku4"
62411} : 0)("height:", space(4), ";" + ( true ? "" : 0));
62412const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
62413  target: "e8tqeku3"
62414} : 0)("margin-top:", space(-1), ";" + ( true ? "" : 0));
62415const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel,  true ? {
62416  target: "e8tqeku2"
62417} : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0));
62418const HeaderHint = emotion_styled_base_browser_esm("span",  true ? {
62419  target: "e8tqeku1"
62420} : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0));
62421const Controls = emotion_styled_base_browser_esm("div",  true ? {
62422  target: "e8tqeku0"
62423} : 0)(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${space(6)};`, ";" + ( true ? "" : 0));
62424
62425;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/font-size-picker-select.js
62426
62427/**
62428 * WordPress dependencies
62429 */
62430
62431
62432/**
62433 * Internal dependencies
62434 */
62435
62436
62437
62438const DEFAULT_OPTION = {
62439  key: 'default',
62440  name: (0,external_wp_i18n_namespaceObject.__)('Default'),
62441  value: undefined
62442};
62443const CUSTOM_OPTION = {
62444  key: 'custom',
62445  name: (0,external_wp_i18n_namespaceObject.__)('Custom')
62446};
62447const FontSizePickerSelect = props => {
62448  var _options$find;
62449  const {
62450    fontSizes,
62451    value,
62452    disableCustomFontSizes,
62453    size,
62454    onChange,
62455    onSelectCustom
62456  } = props;
62457  const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes);
62458  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {
62459    let hint;
62460    if (areAllSizesSameUnit) {
62461      const [quantity] = parseQuantityAndUnitFromRawValue(fontSize.size);
62462      if (quantity !== undefined) {
62463        hint = String(quantity);
62464      }
62465    } else if (isSimpleCssValue(fontSize.size)) {
62466      hint = String(fontSize.size);
62467    }
62468    return {
62469      key: fontSize.slug,
62470      name: fontSize.name || fontSize.slug,
62471      value: fontSize.size,
62472      __experimentalHint: hint
62473    };
62474  }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
62475  const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
62476  return (0,external_wp_element_namespaceObject.createElement)(CustomSelectControl, {
62477    __nextUnconstrainedWidth: true,
62478    className: "components-font-size-picker__select",
62479    label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
62480    hideLabelFromVision: true,
62481    describedBy: (0,external_wp_i18n_namespaceObject.sprintf)(
62482    // translators: %s: Currently selected font size.
62483    (0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name),
62484    options: options,
62485    value: selectedOption,
62486    __experimentalShowSelectedHint: true,
62487    onChange: ({
62488      selectedItem
62489    }) => {
62490      if (selectedItem === CUSTOM_OPTION) {
62491        onSelectCustom();
62492      } else {
62493        onChange(selectedItem.value);
62494      }
62495    },
62496    size: size
62497  });
62498};
62499/* harmony default export */ const font_size_picker_select = (FontSizePickerSelect);
62500
62501;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs
62502
62503
62504/**
62505 * Note: Still used by components generated by old versions of Framer
62506 *
62507 * @deprecated
62508 */
62509const DeprecatedLayoutGroupContext = (0,external_React_.createContext)(null);
62510
62511
62512
62513;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/group.mjs
62514const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
62515function nodeGroup() {
62516    const nodes = new Set();
62517    const subscriptions = new WeakMap();
62518    const dirtyAll = () =>
62518 nodes.forEach(notify);
62519    return {
62520        add: (node) => {
62521            nodes.add(node);
62522            subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
62523        },
62524        remove: (node) => {
62525            nodes.delete(node);
62526            const unsubscribe = subscriptions.get(node);
62527            if (unsubscribe) {
62528                unsubscribe();
62529                subscriptions.delete(node);
62530            }
62531            dirtyAll();
62532        },
62533        dirty: dirtyAll,
62534    };
62535}
62536
62537
62538
62539;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs
62540
62541
62542
62543
62544
62545
62546
62547const shouldInheritGroup = (inherit) => inherit === true;
62548const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
62549const LayoutGroup = ({ children, id, inherit = true }) => {
62550    const layoutGroupContext = (0,external_React_.useContext)(LayoutGroupContext);
62551    const deprecatedLayoutGroupContext = (0,external_React_.useContext)(DeprecatedLayoutGroupContext);
62552    const [forceRender, key] = use_force_update_useForceUpdate();
62553    const context = (0,external_React_.useRef)(null);
62554    const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
62555    if (context.current === null) {
62556        if (shouldInheritId(inherit) && upstreamId) {
62557            id = id ? upstreamId + "-" + id : upstreamId;
62558        }
62559        context.current = {
62560            id,
62561            group: shouldInheritGroup(inherit)
62562                ? layoutGroupContext.group || nodeGroup()
62563                : nodeGroup(),
62564        };
62565    }
62566    const memoizedContext = (0,external_React_.useMemo)(() => ({ ...context.current, forceRender }), [key]);
62567    return (external_React_.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
62568};
62569
62570
62571
62572;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/styles.js
62573
62574function toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
62575/**
62576 * External dependencies
62577 */
62578
62579/**
62580 * Internal dependencies
62581 */
62582
62583const toggleGroupControl = ({
62584  isBlock,
62585  isDeselectable,
62586  size
62587}) => /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", config_values.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + ( true ? "" : 0),  true ? "" : 0);
62588const enclosingBorders = isBlock => {
62589  const enclosingBorder = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.ui.border, ";" + ( true ? "" : 0),  true ? "" : 0);
62590  return /*#__PURE__*/emotion_react_browser_esm_css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + ( true ? "" : 0),  true ? "" : 0);
62591};
62592const toggleGroupControlSize = size => {
62593  const heights = {
62594    default: '36px',
62595    '__unstable-large': '40px'
62596  };
62597  return /*#__PURE__*/emotion_react_browser_esm_css("min-height:", heights[size], ";" + ( true ? "" : 0),  true ? "" : 0);
62598};
62599const toggle_group_control_styles_block =  true ? {
62600  name: "7whenc",
62601  styles: "display:flex;width:100%"
62602} : 0;
62603const VisualLabelWrapper = emotion_styled_base_browser_esm("div",  true ? {
62604  target: "eakva830"
62605} : 0)( true ? {
62606  name: "zjik7",
62607  styles: "display:flex"
62608} : 0);
62609
62610;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6DS7ZDWX.js
62611
62612
62613
62614// src/collection/collection-store.ts
62615
62616function useCollectionStoreOptions(_props) {
62617  return {};
62618}
62619function useCollectionStoreProps(store, props) {
62620  useStoreProps(store, props, "items", "setItems");
62621  return store;
62622}
62623function useCollectionStore(props = {}) {
62624  const options = useCollectionStoreOptions(props);
62625  const store = useStore(
62626    () => Core.createCollectionStore(__spreadValues(__spreadValues({}, props), options))
62627  );
62628  return useCollectionStoreProps(store, props);
62629}
62630
62631
62632
62633;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OK4RCQBZ.js
62634
62635
62636
62637
62638// src/composite/composite-store.ts
62639
62640function useCompositeStoreOptions(props) {
62641  return useCollectionStoreOptions(props);
62642}
62643function useCompositeStoreProps(store, props) {
62644  store = useCollectionStoreProps(store, props);
62645  useStoreProps(store, props, "activeId", "setActiveId");
62646  useStoreProps(store, props, "includesBaseElement");
62647  useStoreProps(store, props, "virtualFocus");
62648  useStoreProps(store, props, "orientation");
62649  useStoreProps(store, props, "rtl");
62650  useStoreProps(store, props, "focusLoop");
62651  useStoreProps(store, props, "focusWrap");
62652  useStoreProps(store, props, "focusShift");
62653  return store;
62654}
62655function useCompositeStore(props = {}) {
62656  const options = useCompositeStoreOptions(props);
62657  const store = useStore(
62658    () => Core.createCompositeStore(__spreadValues(__spreadValues({}, props), options))
62659  );
62660  return useCompositeStoreProps(store, props);
62661}
62662
62663
62664
62665;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SHUO6V52.js
62666
62667
62668
62669
62670
62671// src/collection/collection-store.ts
62672function SHUO6V52_isElementPreceding(a, b) {
62673  return Boolean(
62674    b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING
62675  );
62676}
62677function SHUO6V52_sortBasedOnDOMPosition(items) {
62678  const pairs = items.map((item, index) => [index, item]);
62679  let isOrderDifferent = false;
62680  pairs.sort(([indexA, a], [indexB, b]) => {
62681    const elementA = a.element;
62682    const elementB = b.element;
62683    if (elementA === elementB)
62684      return 0;
62685    if (!elementA || !elementB)
62686      return 0;
62687    if (SHUO6V52_isElementPreceding(elementA, elementB)) {
62688      if (indexA > indexB) {
62689        isOrderDifferent = true;
62690      }
62691      return -1;
62692    }
62693    if (indexA < indexB) {
62694      isOrderDifferent = true;
62695    }
62696    return 1;
62697  });
62698  if (isOrderDifferent) {
62699    return pairs.map(([_, item]) => item);
62700  }
62701  return items;
62702}
62703function SHUO6V52_getCommonParent(items) {
62704  var _a;
62705  const firstItem = items.find((item) => !!item.element);
62706  const lastItem = [...items].reverse().find((item) => !!item.element);
62707  let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement;
62708  while (parentElement && (lastItem == null ? void 0 : lastItem.element)) {
62709    const parent = parentElement;
62710    if (lastItem && parent.contains(lastItem.element)) {
62711      return parentElement;
62712    }
62713    parentElement = parentElement.parentElement;
62714  }
62715  return O35LWD4W_getDocument(parentElement).body;
62716}
62717function createCollectionStore(props = {}) {
62718  var _a;
62719  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
62720  const items = defaultValue(
62721    props.items,
62722    syncState == null ? void 0 : syncState.items,
62723    props.defaultItems,
62724    []
62725  );
62726  const itemsMap = new Map(items.map((item) => [item.id, item]));
62727  const initialState = {
62728    items,
62729    renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, [])
62730  };
62731  const privateStore = createStore({
62732    renderedItems: initialState.renderedItems
62733  });
62734  const collection = createStore(initialState, props.store);
62735  const sortItems = () => {
62736    const state = privateStore.getState();
62737    const renderedItems = SHUO6V52_sortBasedOnDOMPosition(state.renderedItems);
62738    privateStore.setState("renderedItems", renderedItems);
62739    collection.setState("renderedItems", renderedItems);
62740  };
62741  collection.setup(() => {
62742    return privateStore.syncBatch(
62743      (state) => {
62744        let firstRun = true;
62745        let raf = requestAnimationFrame(sortItems);
62746        if (typeof IntersectionObserver !== "function")
62747          return;
62748        const callback = () => {
62749          if (firstRun) {
62750            firstRun = false;
62751            return;
62752          }
62753          cancelAnimationFrame(raf);
62754          raf = requestAnimationFrame(sortItems);
62755        };
62756        const root = SHUO6V52_getCommonParent(state.renderedItems);
62757        const observer = new IntersectionObserver(callback, { root });
62758        state.renderedItems.forEach((item) => {
62759          if (!item.element)
62760            return;
62761          observer.observe(item.element);
62762        });
62763        return () => {
62764          cancelAnimationFrame(raf);
62765          observer.disconnect();
62766        };
62767      },
62768      ["renderedItems"]
62769    );
62770  });
62771  const mergeItem = (item, setItems, canDeleteFromMap = false) => {
62772    let prevItem;
62773    setItems((items2) => {
62774      const index = items2.findIndex(({ id }) => id === item.id);
62775      const nextItems = items2.slice();
62776      if (index !== -1) {
62777        prevItem = items2[index];
62778        const nextItem = _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, prevItem), item);
62779        nextItems[index] = nextItem;
62780        itemsMap.set(item.id, nextItem);
62781      } else {
62782        nextItems.push(item);
62783        itemsMap.set(item.id, item);
62784      }
62785      return nextItems;
62786    });
62787    const unmergeItem = () => {
62788      setItems((items2) => {
62789        if (!prevItem) {
62790          if (canDeleteFromMap) {
62791            itemsMap.delete(item.id);
62792          }
62793          return items2.filter(({ id }) => id !== item.id);
62794        }
62795        const index = items2.findIndex(({ id }) => id === item.id);
62796        if (index === -1)
62797          return items2;
62798        const nextItems = items2.slice();
62799        nextItems[index] = prevItem;
62800        itemsMap.set(item.id, prevItem);
62801        return nextItems;
62802      });
62803    };
62804    return unmergeItem;
62805  };
62806  const registerItem = (item) => mergeItem(item, (getItems) => collection.setState("items", getItems), true);
62807  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, collection), {
62808    registerItem,
62809    renderItem: (item) => chain(
62810      registerItem(item),
62811      mergeItem(
62812        item,
62813        (getItems) => privateStore.setState("renderedItems", getItems)
62814      )
62815    ),
62816    item: (id) => {
62817      if (!id)
62818        return null;
62819      let item = itemsMap.get(id);
62820      if (!item) {
62821        const { items: items2 } = collection.getState();
62822        item = items2.find((item2) => item2.id === id);
62823        if (item) {
62824          itemsMap.set(id, item);
62825        }
62826      }
62827      return item || null;
62828    }
62829  });
62830}
62831
62832
62833
62834;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/5XEKIOCW.js
62835// src/utils/array.ts
62836function _5XEKIOCW_toArray(arg) {
62837  if (Array.isArray(arg)) {
62838    return arg;
62839  }
62840  return typeof arg !== "undefined" ? [arg] : [];
62841}
62842function addItemToArray(array, item, index = -1) {
62843  if (!(index in array)) {
62844    return [...array, item];
62845  }
62846  return [...array.slice(0, index), item, ...array.slice(index)];
62847}
62848function flatten2DArray(array) {
62849  const flattened = [];
62850  for (const row of array) {
62851    flattened.push(...row);
62852  }
62853  return flattened;
62854}
62855function reverseArray(array) {
62856  return array.slice().reverse();
62857}
62858
62859
62860
62861;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/NRXA5QTV.js
62862
62863
62864
62865
62866
62867
vendor: 6,537 bytes, lines 62868-63045
62868// src/composite/composite-store.ts
62869var NULL_ITEM = { id: null };
62870function NRXA5QTV_findFirstEnabledItem(items, excludeId) {
62871  return items.find((item) => {
62872    if (excludeId) {
62873      return !item.disabled && item.id !== excludeId;
62874    }
62875    return !item.disabled;
62876  });
62877}
62878function getEnabledItems(items, excludeId) {
62879  return items.filter((item) => {
62880    if (excludeId) {
62881      return !item.disabled && item.id !== excludeId;
62882    }
62883    return !item.disabled;
62884  });
62885}
62886function NRXA5QTV_getOppositeOrientation(orientation) {
62887  if (orientation === "vertical")
62888    return "horizontal";
62889  if (orientation === "horizontal")
62890    return "vertical";
62891  return;
62892}
62893function getItemsInRow(items, rowId) {
62894  return items.filter((item) => item.rowId === rowId);
62895}
62896function flipItems(items, activeId, shouldInsertNullItem = false) {
62897  const index = items.findIndex((item) => item.id === activeId);
62898  return [
62899    ...items.slice(index + 1),
62900    ...shouldInsertNullItem ? [NULL_ITEM] : [],
62901    ...items.slice(0, index)
62902  ];
62903}
62904function groupItemsByRows(items) {
62905  const rows = [];
62906  for (const item of items) {
62907    const row = rows.find((currentRow) => {
62908      var _a;
62909      return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
62910    });
62911    if (row) {
62912      row.push(item);
62913    } else {
62914      rows.push([item]);
62915    }
62916  }
62917  return rows;
62918}
62919function getMaxRowLength(array) {
62920  let maxLength = 0;
62921  for (const { length } of array) {
62922    if (length > maxLength) {
62923      maxLength = length;
62924    }
62925  }
62926  return maxLength;
62927}
62928function NRXA5QTV_createEmptyItem(rowId) {
62929  return {
62930    id: "__EMPTY_ITEM__",
62931    disabled: true,
62932    rowId
62933  };
62934}
62935function normalizeRows(rows, activeId, focusShift) {
62936  const maxLength = getMaxRowLength(rows);
62937  for (const row of rows) {
62938    for (let i = 0; i < maxLength; i += 1) {
62939      const item = row[i];
62940      if (!item || focusShift && item.disabled) {
62941        const isFirst = i === 0;
62942        const previousItem = isFirst && focusShift ? NRXA5QTV_findFirstEnabledItem(row) : row[i - 1];
62943        row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : NRXA5QTV_createEmptyItem(previousItem == null ? void 0 : previousItem.rowId);
62944      }
62945    }
62946  }
62947  return rows;
62948}
62949function NRXA5QTV_verticalizeItems(items) {
62950  const rows = groupItemsByRows(items);
62951  const maxLength = getMaxRowLength(rows);
62952  const verticalized = [];
62953  for (let i = 0; i < maxLength; i += 1) {
62954    for (const row of rows) {
62955      const item = row[i];
62956      if (item) {
62957        verticalized.push(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, item), {
62958          // If there's no rowId, it means that it's not a grid composite, but
62959          // a single row instead. So, instead of verticalizing it, that is,
62960          // assigning a different rowId based on the column index, we keep it
62961          // undefined so they will be part of the same row. This is useful
62962          // when using up/down on one-dimensional composites.
62963          rowId: item.rowId ? `${i}` : void 0
62964        }));
62965      }
62966    }
62967  }
62968  return verticalized;
62969}
62970function createCompositeStore(props = {}) {
62971  var _a;
62972  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
62973  const collection = createCollectionStore(props);
62974  const activeId = defaultValue(
62975    props.activeId,
62976    syncState == null ? void 0 : syncState.activeId,
62977    props.defaultActiveId
62978  );
62979  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, collection.getState()), {
62980    activeId,
62981    baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null),
62982    includesBaseElement: defaultValue(
62983      props.includesBaseElement,
62984      syncState == null ? void 0 : syncState.includesBaseElement,
62985      activeId === null
62986    ),
62987    moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0),
62988    orientation: defaultValue(
62989      props.orientation,
62990      syncState == null ? void 0 : syncState.orientation,
62991      "both"
62992    ),
62993    rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false),
62994    virtualFocus: defaultValue(
62995      props.virtualFocus,
62996      syncState == null ? void 0 : syncState.virtualFocus,
62997      false
62998    ),
62999    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false),
63000    focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false),
63001    focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false)
63002  });
63003  const composite = createStore(initialState, collection, props.store);
63004  composite.setup(
63005    () => composite.sync(
63006      (state) => {
63007        composite.setState("activeId", (activeId2) => {
63008          var _a2;
63009          if (activeId2 !== void 0)
63010            return activeId2;
63011          return (_a2 = NRXA5QTV_findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id;
63012        });
63013      },
63014      ["renderedItems", "activeId"]
63015    )
63016  );
63017  const getNextId = (items, orientation, hasNullItem, skip) => {
63018    var _a2, _b;
63019    const { activeId: activeId2, rtl, focusLoop, focusWrap, includesBaseElement } = composite.getState();
63020    const isHorizontal = orientation !== "vertical";
63021    const isRTL = rtl && isHorizontal;
63022    const allItems = isRTL ? reverseArray(items) : items;
63023    if (activeId2 == null) {
63024      return (_a2 = NRXA5QTV_findFirstEnabledItem(allItems)) == null ? void 0 : _a2.id;
63025    }
63026    const activeItem = allItems.find((item) => item.id === activeId2);
63027    if (!activeItem) {
63028      return (_b = NRXA5QTV_findFirstEnabledItem(allItems)) == null ? void 0 : _b.id;
63029    }
63030    const isGrid = !!activeItem.rowId;
63031    const activeIndex = allItems.indexOf(activeItem);
63032    const nextItems = allItems.slice(activeIndex + 1);
63033    const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
63034    if (skip !== void 0) {
63035      const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
63036      const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one.
63037      nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1];
63038      return nextItem2 == null ? void 0 : nextItem2.id;
63039    }
63040    const oppositeOrientation = NRXA5QTV_getOppositeOrientation(
63041      // If it's a grid and orientation is not set, it's a next/previous call,
63042      // which is inherently horizontal. up/down will call next with orientation
63043      // set to vertical by default (see below on up/down methods).
63044      isGrid ? orientation || "horizontal" : orientation
63045    );
63046    const canLoop = focusLoop && focusLoop !== oppositeOrientation;
63047    const canWrap = isGrid && focusWrap && focusWrap !== oppositeOrientation;
63048    hasNullItem = hasNullItem || !isGrid && canLoop && includesBaseElement;
63049    if (canLoop) {
63050      const loopItems = canWrap && !hasNullItem ? allItems : getItemsInRow(allItems, activeItem.rowId);
63051      const sortedItems = flipItems(loopItems, activeId2, hasNullItem);
63052      const nextItem2 = NRXA5QTV_findFirstEnabledItem(sortedItems, activeId2);
63053      return nextItem2 == null ? void 0 : nextItem2.id;
63054    }
63055    if (canWrap) {
63056      const nextItem2 = NRXA5QTV_findFirstEnabledItem(
63057        // We can use nextItems, which contains all the next items, including
63058        // items from other rows, to wrap between rows. However, if there is a
63059        // null item (the composite container), we'll only use the next items in
63060        // the row. So moving next from the last item will focus on the
63061        // composite container. On grid composites, horizontal navigation never
63062        // focuses on the composite container, only vertical.
63063        hasNullItem ? nextItemsInRow : nextItems,
63064        activeId2
63065      );
63066      const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id;
63067      return nextId;
63068    }
63069    const nextItem = NRXA5QTV_findFirstEnabledItem(nextItemsInRow, activeId2);
63070    if (!nextItem && hasNullItem) {
63071      return null;
63072    }
63073    return nextItem == null ? void 0 : nextItem.id;
63074  };
63075  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, collection), composite), {
63076    setBaseElement: (element) => composite.setState("baseElement", element),
63077    setActiveId: (id) => composite.setState("activeId", id),
63078    move: (id) => {
63079      if (id === void 0)
63080        return;
63081      composite.setState("activeId", id);
63082      composite.setState("moves", (moves) => moves + 1);
63083    },
63084    first: () => {
63085      var _a2;
63086      return (_a2 = NRXA5QTV_findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id;
63087    },
63088    last: () => {
63089      var _a2;
63090      return (_a2 = NRXA5QTV_findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id;
63091    },
63092    next: (skip) => {
63093      const { renderedItems, orientation } = composite.getState();
63094      return getNextId(renderedItems, orientation, false, skip);
63095    },
63096    previous: (skip) => {
63097      var _a2;
63098      const { renderedItems, orientation, includesBaseElement } = composite.getState();
63099      const isGrid = !!((_a2 = NRXA5QTV_findFirstEnabledItem(renderedItems)) == null ? void 0 : _a2.rowId);
63100      const hasNullItem = !isGrid && includesBaseElement;
63101      return getNextId(
63102        reverseArray(renderedItems),
63103        orientation,
63104        hasNullItem,
63105        skip
63106      );
63107    },
63108    down: (skip) => {
63109      const {
63110        activeId: activeId2,
63111        renderedItems,
63112        focusShift,
63113        focusLoop,
63114        includesBaseElement
63115      } = composite.getState();
63116      const shouldShift = focusShift && !skip;
63117      const verticalItems = NRXA5QTV_verticalizeItems(
63118        flatten2DArray(
63119          normalizeRows(groupItemsByRows(renderedItems), activeId2, shouldShift)
63120        )
63121      );
63122      const canLoop = focusLoop && focusLoop !== "horizontal";
63123      const hasNullItem = canLoop && includesBaseElement;
63124      return getNextId(verticalItems, "vertical", hasNullItem, skip);
63125    },
63126    up: (skip) => {
63127      const { activeId: activeId2, renderedItems, focusShift, includesBaseElement } = composite.getState();
63128      const shouldShift = focusShift && !skip;
63129      const verticalItems = NRXA5QTV_verticalizeItems(
63130        reverseArray(
63131          flatten2DArray(
63132            normalizeRows(
63133              groupItemsByRows(renderedItems),
63134              activeId2,
63135              shouldShift
63136            )
63137          )
63138        )
63139      );
63140      const hasNullItem = includesBaseElement;
63141      return getNextId(verticalItems, "vertical", hasNullItem, skip);
63142    }
63143  });
63144}
63145
63146
63147
63148;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/radio/radio-store.js
63149
63150
63151
63152
63153
63154
63155
63156
63157// src/radio/radio-store.ts
63158function createRadioStore(_a = {}) {
63159  var props = PNRLI7OV_objRest(_a, []);
63160  var _a2;
63161  const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
63162  const composite = createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), {
63163    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
63164  }));
63165  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, composite.getState()), {
63166    value: defaultValue(
63167      props.value,
63168      syncState == null ? void 0 : syncState.value,
63169      props.defaultValue,
63170      null
63171    )
63172  });
63173  const radio = createStore(initialState, composite, props.store);
63174  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, composite), radio), {
63175    setValue: (value) => radio.setState("value", value)
63176  });
63177}
63178
63179
63180;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-store.js
63181
63182
63183
63184
63185
63186
63187
63188// src/radio/radio-store.ts
63189
63190function useRadioStoreOptions(props) {
63191  return useCompositeStoreOptions(props);
63192}
63193function useRadioStoreProps(store, props) {
63194  store = useCompositeStoreProps(store, props);
63195  useStoreProps(store, props, "value", "setValue");
63196  return store;
63197}
63198function useRadioStore(props = {}) {
63199  const options = useRadioStoreOptions(props);
63200  const store = FHQZ2KRN_useStore(() => createRadioStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options)));
63201  return useRadioStoreProps(store, props);
63202}
63203
63204
63205;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6I2PARRP.js
63206// src/radio/radio-context.ts
63207
63208var RadioContext = (0,external_React_.createContext)(void 0);
63209
63210
63211
63212;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OXPV2NBK.js
vendor: 2,120 bytes, lines 63213-63291
63213// src/composite/utils.ts
63214
63215var OXPV2NBK_NULL_ITEM = { id: null };
63216function OXPV2NBK_flipItems(items, activeId, shouldInsertNullItem = false) {
63217  const index = items.findIndex((item) => item.id === activeId);
63218  return [
63219    ...items.slice(index + 1),
63220    ...shouldInsertNullItem ? [OXPV2NBK_NULL_ITEM] : [],
63221    ...items.slice(0, index)
63222  ];
63223}
63224function OXPV2NBK_findFirstEnabledItem(items, excludeId) {
63225  return items.find((item) => {
63226    if (excludeId) {
63227      return !item.disabled && item.id !== excludeId;
63228    }
63229    return !item.disabled;
63230  });
63231}
63232function getEnabledItem(store, id) {
63233  if (!id)
63234    return null;
63235  return store.item(id) || null;
63236}
63237function OXPV2NBK_groupItemsByRows(items) {
63238  const rows = [];
63239  for (const item of items) {
63240    const row = rows.find((currentRow) => {
63241      var _a;
63242      return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
63243    });
63244    if (row) {
63245      row.push(item);
63246    } else {
63247      rows.push([item]);
63248    }
63249  }
63250  return rows;
63251}
63252function selectTextField(element, collapseToEnd = false) {
63253  if (isTextField(element)) {
63254    element.setSelectionRange(
63255      collapseToEnd ? element.value.length : 0,
63256      element.value.length
63257    );
63258  } else if (element.isContentEditable) {
63259    const selection = getDocument(element).getSelection();
63260    selection == null ? void 0 : selection.selectAllChildren(element);
63261    if (collapseToEnd) {
63262      selection == null ? void 0 : selection.collapseToEnd();
63263    }
63264  }
63265}
63266var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
63267function focusSilently(element) {
63268  element[FOCUS_SILENTLY] = true;
63269  element.focus();
63270}
63271function silentlyFocused(element) {
63272  const isSilentlyFocused = element[FOCUS_SILENTLY];
63273  delete element[FOCUS_SILENTLY];
63274  return isSilentlyFocused;
63275}
63276function OXPV2NBK_isItem(store, element, exclude) {
63277  if (!element)
63278    return false;
63279  if (element === exclude)
63280    return false;
63281  const item = store.item(element.id);
63282  if (!item)
63283    return false;
63284  if (exclude && item.element === exclude)
63285    return false;
63286  return true;
63287}
63288
63289
63290
63291;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WJ37OVG2.js
63292// src/composite/composite-context.ts
63293
63294var CompositeItemContext = (0,external_React_.createContext)(
63295  void 0
63296);
63297var CompositeRowContext = (0,external_React_.createContext)(
63298  void 0
63299);
63300var CompositeContext = (0,external_React_.createContext)(
63301  void 0
63302);
63303
63304
63305
63306;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/AAVDGJD5.js
63307
63308
63309
63310
63311
63312
63313
vendor: 8,734 bytes, lines 63314-63559
63314// src/composite/composite.tsx
63315
63316
63317
63318
63319
63320
63321function isGrid(items) {
63322  return items.some((item) => !!item.rowId);
63323}
63324function isPrintableKey(event) {
63325  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
63326}
63327function isModifierKey(event) {
63328  return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
63329}
63330function AAVDGJD5_canProxyKeyboardEvent(event, state) {
63331  if (!events_isSelfTarget(event))
63332    return false;
63333  if (isModifierKey(event))
63334    return false;
63335  const target = event.target;
63336  if (!target)
63337    return true;
63338  if (O35LWD4W_isTextField(target)) {
63339    if (isPrintableKey(event))
63340      return false;
63341    const grid = isGrid(state.renderedItems);
63342    const focusingInputOnly = state.activeId === null;
63343    const allowHorizontalNavigationOnItems = grid && !focusingInputOnly;
63344    const isHomeOrEnd = event.key === "Home" || event.key === "End";
63345    if (!allowHorizontalNavigationOnItems && isHomeOrEnd)
63346      return false;
63347  }
63348  return !event.isPropagationStopped();
63349}
63350function AAVDGJD5_useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
63351  return useEvent((event) => {
63352    var _a;
63353    onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
63354    if (event.defaultPrevented)
63355      return;
63356    const state = store.getState();
63357    const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
63358    if (!activeElement)
63359      return;
63360    if (!AAVDGJD5_canProxyKeyboardEvent(event, state))
63361      return;
63362    const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
63363    const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
63364    if (activeElement !== previousElement) {
63365      activeElement.focus();
63366    }
63367    if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {
63368      event.preventDefault();
63369    }
63370    if (event.currentTarget.contains(activeElement)) {
63371      event.stopPropagation();
63372    }
63373  });
63374}
63375function AAVDGJD5_findFirstEnabledItemInTheLastRow(items) {
63376  return OXPV2NBK_findFirstEnabledItem(
63377    flatten2DArray(reverseArray(OXPV2NBK_groupItemsByRows(items)))
63378  );
63379}
63380function useScheduleFocus(store) {
63381  const [scheduled, setScheduled] = (0,external_React_.useState)(false);
63382  const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []);
63383  const activeItem = store.useState(
63384    (state) => getEnabledItem(store, state.activeId)
63385  );
63386  (0,external_React_.useEffect)(() => {
63387    const activeElement = activeItem == null ? void 0 : activeItem.element;
63388    if (!scheduled)
63389      return;
63390    if (!activeElement)
63391      return;
63392    setScheduled(false);
63393    activeElement.focus({ preventScroll: true });
63394  }, [activeItem, scheduled]);
63395  return schedule;
63396}
63397var AAVDGJD5_useComposite = NQJBHION_createHook(
63398  (_a) => {
63399    var _b = _a, {
63400      store,
63401      composite = true,
63402      focusOnMove = composite,
63403      moveOnKeyPress = true
63404    } = _b, props = __objRest(_b, [
63405      "store",
63406      "composite",
63407      "focusOnMove",
63408      "moveOnKeyPress"
63409    ]);
63410    const previousElementRef = (0,external_React_.useRef)(null);
63411    const scheduleFocus = useScheduleFocus(store);
63412    const moves = store.useState("moves");
63413    (0,external_React_.useEffect)(() => {
63414      var _a2;
63415      if (!moves)
63416        return;
63417      if (!composite)
63418        return;
63419      if (!focusOnMove)
63420        return;
63421      const { activeId: activeId2 } = store.getState();
63422      const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
63423      if (!itemElement)
63424        return;
63425      focusIntoView(itemElement);
63426    }, [moves, composite, focusOnMove]);
63427    useSafeLayoutEffect(() => {
63428      if (!composite)
63429        return;
63430      if (!moves)
63431        return;
63432      const { baseElement, activeId: activeId2 } = store.getState();
63433      const isSelfAcive = activeId2 === null;
63434      if (!isSelfAcive)
63435        return;
63436      if (!baseElement)
63437        return;
63438      const previousElement = previousElementRef.current;
63439      previousElementRef.current = null;
63440      if (previousElement) {
63441        fireBlurEvent(previousElement, { relatedTarget: baseElement });
63442      }
63443      if (focus_hasFocus(baseElement)) {
63444        fireFocusEvent(baseElement, { relatedTarget: previousElement });
63445      } else {
63446        baseElement.focus();
63447      }
63448    }, [moves, composite]);
63449    const activeId = store.useState("activeId");
63450    const virtualFocus = store.useState("virtualFocus");
63451    useSafeLayoutEffect(() => {
63452      var _a2;
63453      if (!composite)
63454        return;
63455      if (!virtualFocus)
63456        return;
63457      const previousElement = previousElementRef.current;
63458      previousElementRef.current = null;
63459      if (!previousElement)
63460        return;
63461      const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element;
63462      const relatedTarget = activeElement || O35LWD4W_getActiveElement(previousElement);
63463      fireBlurEvent(previousElement, { relatedTarget });
63464    }, [activeId, virtualFocus, composite]);
63465    const onKeyDownCapture = AAVDGJD5_useKeyboardEventProxy(
63466      store,
63467      props.onKeyDownCapture,
63468      previousElementRef
63469    );
63470    const onKeyUpCapture = AAVDGJD5_useKeyboardEventProxy(
63471      store,
63472      props.onKeyUpCapture,
63473      previousElementRef
63474    );
63475    const onFocusCaptureProp = props.onFocusCapture;
63476    const onFocusCapture = useEvent((event) => {
63477      onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
63478      if (event.defaultPrevented)
63479        return;
63480      const { virtualFocus: virtualFocus2 } = store.getState();
63481      if (!virtualFocus2)
63482        return;
63483      const previousActiveElement = event.relatedTarget;
63484      const isSilentlyFocused = silentlyFocused(event.currentTarget);
63485      if (events_isSelfTarget(event) && isSilentlyFocused) {
63486        event.stopPropagation();
63487        previousElementRef.current = previousActiveElement;
63488      }
63489    });
63490    const onFocusProp = props.onFocus;
63491    const onFocus = useEvent((event) => {
63492      onFocusProp == null ? void 0 : onFocusProp(event);
63493      if (event.defaultPrevented)
63494        return;
63495      if (!composite)
63496        return;
63497      const { relatedTarget } = event;
63498      const { virtualFocus: virtualFocus2 } = store.getState();
63499      if (virtualFocus2) {
63500        if (events_isSelfTarget(event) && !OXPV2NBK_isItem(store, relatedTarget)) {
63501          queueMicrotask(scheduleFocus);
63502        }
63503      } else if (events_isSelfTarget(event)) {
63504        store.setActiveId(null);
63505      }
63506    });
63507    const onBlurCaptureProp = props.onBlurCapture;
63508    const onBlurCapture = useEvent((event) => {
63509      var _a2;
63510      onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
63511      if (event.defaultPrevented)
63512        return;
63513      const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
63514      if (!virtualFocus2)
63515        return;
63516      const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
63517      const nextActiveElement = event.relatedTarget;
63518      const nextActiveElementIsItem = OXPV2NBK_isItem(store, nextActiveElement);
63519      const previousElement = previousElementRef.current;
63520      previousElementRef.current = null;
63521      if (events_isSelfTarget(event) && nextActiveElementIsItem) {
63522        if (nextActiveElement === activeElement) {
63523          if (previousElement && previousElement !== nextActiveElement) {
63524            fireBlurEvent(previousElement, event);
63525          }
63526        } else if (activeElement) {
63527          fireBlurEvent(activeElement, event);
63528        }
63529        event.stopPropagation();
63530      } else {
63531        const targetIsItem = OXPV2NBK_isItem(store, event.target);
63532        if (!targetIsItem && activeElement) {
63533          fireBlurEvent(activeElement, event);
63534        }
63535      }
63536    });
63537    const onKeyDownProp = props.onKeyDown;
63538    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
63539    const onKeyDown = useEvent((event) => {
63540      var _a2;
63541      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
63542      if (event.defaultPrevented)
63543        return;
63544      if (!events_isSelfTarget(event))
63545        return;
63546      const { orientation, items, renderedItems, activeId: activeId2 } = store.getState();
63547      const activeItem = getEnabledItem(store, activeId2);
63548      if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected)
63549        return;
63550      const isVertical = orientation !== "horizontal";
63551      const isHorizontal = orientation !== "vertical";
63552      const grid = isGrid(renderedItems);
63553      const up = () => {
63554        if (grid) {
63555          const item = items && AAVDGJD5_findFirstEnabledItemInTheLastRow(items);
63556          return item == null ? void 0 : item.id;
63557        }
63558        return store.last();
63559      };
63560      const keyMap = {
63561        ArrowUp: (grid || isVertical) && up,
63562        ArrowRight: (grid || isHorizontal) && store.first,
63563        ArrowDown: (grid || isVertical) && store.first,
63564        ArrowLeft: (grid || isHorizontal) && store.last,
63565        Home: store.first,
63566        End: store.last,
63567        PageUp: store.first,
63568        PageDown: store.last
63569      };
63570      const action = keyMap[event.key];
63571      if (action) {
63572        const id = action();
63573        if (id !== void 0) {
63574          if (!moveOnKeyPressProp(event))
63575            return;
63576          event.preventDefault();
63577          store.move(id);
63578        }
63579      }
63580    });
63581    props = useWrapElement(
63582      props,
63583      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeContext.Provider, { value: store, children: element }),
63584      [store]
63585    );
63586    const activeDescendant = store.useState(
63587      (state) => {
63588        var _a2;
63589        return composite && state.virtualFocus ? (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id : void 0;
63590      }
63591    );
63592    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
63593      "aria-activedescendant": activeDescendant
63594    }, props), {
63595      ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref),
63596      onKeyDownCapture,
63597      onKeyUpCapture,
63598      onFocusCapture,
63599      onFocus,
63600      onBlurCapture,
63601      onKeyDown
63602    });
63603    const focusable = store.useState(
63604      (state) => composite && (state.virtualFocus || state.activeId === null)
63605    );
63606    props = useFocusable(PNRLI7OV_spreadValues({ focusable }, props));
63607    return props;
63608  }
63609);
63610var AAVDGJD5_Composite = NQJBHION_createComponent((props) => {
63611  const htmlProps = AAVDGJD5_useComposite(props);
63612  return NQJBHION_createElement("div", htmlProps);
63613});
63614if (false) {}
63615
63616
63617
63618;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-group.js
63619
63620
63621
63622
63623
63624
63625
63626
63627
63628
63629
63630// src/radio/radio-group.tsx
63631
63632var useRadioGroup = NQJBHION_createHook(
63633  (_a) => {
63634    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
63635    props = useWrapElement(
63636      props,
63637      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(RadioContext.Provider, { value: store, children: element }),
63638      [store]
63639    );
63640    props = PNRLI7OV_spreadValues({
63641      role: "radiogroup"
63642    }, props);
63643    props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props));
63644    return props;
63645  }
63646);
63647var RadioGroup = NQJBHION_createComponent((props) => {
63648  const htmlProps = useRadioGroup(props);
63649  return NQJBHION_createElement("div", htmlProps);
63650});
63651if (false) {}
63652
63653
63654;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/context.js
63655/**
63656 * WordPress dependencies
63657 */
63658
63659
63660/**
63661 * Internal dependencies
63662 */
63663
63664const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({});
63665const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext);
63666/* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext);
63667
63668;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/utils.js
63669/**
63670 * WordPress dependencies
63671 */
63672
63673
63674
63675/**
63676 * Internal dependencies
63677 */
63678
63679/**
63680 * Used to determine, via an internal heuristics, whether an `undefined` value
63681 * received for the `value` prop should be interpreted as the component being
63682 * used in uncontrolled mode, or as an "empty" value for controlled mode.
63683 *
63684 * @param valueProp The received `value`
63685 */
63686function useComputeControlledOrUncontrolledValue(valueProp) {
63687  const hasEverBeenUsedInControlledMode = (0,external_wp_element_namespaceObject.useRef)(false);
63688  const previousValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp);
63689  (0,external_wp_element_namespaceObject.useEffect)(() => {
63690    if (!hasEverBeenUsedInControlledMode.current) {
63691      // Assume the component is being used in controlled mode if:
63692      // - the `value` prop is not `undefined`
63693      // - the `value` prop was not previously `undefined` and was given a new value
63694      hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp;
63695    }
63696  }, [valueProp, previousValueProp]);
63697  let value, defaultValue;
63698  if (hasEverBeenUsedInControlledMode.current) {
63699    // When in controlled mode, use `''` instead of `undefined`
63700    value = valueProp !== null && valueProp !== void 0 ? valueProp : '';
63701  } else {
63702    // When in uncontrolled mode, the `value` should be intended as the initial value
63703    defaultValue = valueProp;
63704  }
63705  return {
63706    value,
63707    defaultValue
63708  };
63709}
63710
63711;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js
63712
63713/**
63714 * External dependencies
63715 */
63716
63717// eslint-disable-next-line no-restricted-imports
63718
63719
63720/**
63721 * WordPress dependencies
63722 */
63723
63724
63725
63726/**
63727 * Internal dependencies
63728 */
63729
63730
63731
63732function UnforwardedToggleGroupControlAsRadioGroup({
63733  children,
63734  isAdaptiveWidth,
63735  label,
63736  onChange: onChangeProp,
63737  size,
63738  value: valueProp,
63739  id: idProp,
63740  ...otherProps
63741}, forwardedRef) {
63742  const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
63743  const baseId = idProp || generatedId;
63744
63745  // Use a heuristic to understand if the component is being used in controlled
63746  // or uncontrolled mode, and consequently:
63747  // - when controlled, convert `undefined` values to `''` (ie. "no value")
63748  // - use the `value` prop as the `defaultValue` when uncontrolled
63749  const {
63750    value,
63751    defaultValue
63752  } = useComputeControlledOrUncontrolledValue(valueProp);
63753
63754  // `useRadioStore`'s `setValue` prop can be called with `null`, while
63755  // the component's `onChange` prop only expects `undefined`
63756  const wrappedOnChangeProp = onChangeProp ? v => {
63757    onChangeProp(v !== null && v !== void 0 ? v : undefined);
63758  } : undefined;
63759  const radio = useRadioStore({
63760    defaultValue,
63761    value,
63762    setValue: wrappedOnChangeProp
63763  });
63764  const selectedValue = radio.useState('value');
63765  const setValue = radio.setValue;
63766  const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
63767    baseId,
63768    isBlock: !isAdaptiveWidth,
63769    size,
63770    value: selectedValue,
63771    setValue
63772  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
63773  return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_context.Provider, {
63774    value: groupContextValue
63775  }, (0,external_wp_element_namespaceObject.createElement)(RadioGroup, {
63776    store: radio,
63777    "aria-label": label,
63778    as: component,
63779    ...otherProps,
63780    id: baseId,
63781    ref: forwardedRef
63782  }, children));
63783}
63784const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
63785
63786;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js
63787
63788/**
63789 * WordPress dependencies
63790 */
63791
63792
63793
63794/**
63795 * Internal dependencies
63796 */
63797
63798
63799
63800
63801function UnforwardedToggleGroupControlAsButtonGroup({
63802  children,
63803  isAdaptiveWidth,
63804  label,
63805  onChange,
63806  size,
63807  value: valueProp,
63808  id: idProp,
63809  ...otherProps
63810}, forwardedRef) {
63811  const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
63812  const baseId = idProp || generatedId;
63813
63814  // Use a heuristic to understand if the component is being used in controlled
63815  // or uncontrolled mode, and consequently:
63816  // - when controlled, convert `undefined` values to `''` (ie. "no value")
63817  // - use the `value` prop as the `defaultValue` when uncontrolled
63818  const {
63819    value,
63820    defaultValue
63821  } = useComputeControlledOrUncontrolledValue(valueProp);
63822  const [selectedValue, setSelectedValue] = useControlledValue({
63823    defaultValue,
63824    value,
63825    onChange
63826  });
63827  const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
63828    baseId,
63829    value: selectedValue,
63830    setValue: setSelectedValue,
63831    isBlock: !isAdaptiveWidth,
63832    isDeselectable: true,
63833    size
63834  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
63835  return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_context.Provider, {
63836    value: groupContextValue
63837  }, (0,external_wp_element_namespaceObject.createElement)(component, {
63838    "aria-label": label,
63839    ...otherProps,
63840    ref: forwardedRef,
63841    role: "group"
63842  }, children));
63843}
63844const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
63845
63846;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/component.js
63847
63848/**
63849 * External dependencies
63850 */
63851
63852// eslint-disable-next-line no-restricted-imports
63853
63854
63855/**
63856 * WordPress dependencies
63857 */
63858
63859
63860
63861/**
63862 * Internal dependencies
63863 */
63864
63865
63866
63867
63868
63869
63870
63871
63872function UnconnectedToggleGroupControl(props, forwardedRef) {
63873  const {
63874    __nextHasNoMarginBottom = false,
63875    className,
63876    isAdaptiveWidth = false,
63877    isBlock = false,
63878    isDeselectable = false,
63879    label,
63880    hideLabelFromVision = false,
63881    help,
63882    onChange,
63883    size = 'default',
63884    value,
63885    children,
63886    ...otherProps
63887  } = useContextSystem(props, 'ToggleGroupControl');
63888  const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControl, 'toggle-group-control');
63889  const cx = useCx();
63890  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(toggleGroupControl({
63891    isBlock,
63892    isDeselectable,
63893    size
63894  }), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, size]);
63895  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
63896  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
63897    help: help,
63898    __nextHasNoMarginBottom: __nextHasNoMarginBottom
63899  }, !hideLabelFromVision && (0,external_wp_element_namespaceObject.createElement)(VisualLabelWrapper, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, null, label)), (0,external_wp_element_namespaceObject.createElement)(MainControl, {
63900    ...otherProps,
63901    className: classes,
63902    isAdaptiveWidth: isAdaptiveWidth,
63903    label: label,
63904    onChange: onChange,
63905    ref: forwardedRef,
63906    size: size,
63907    value: value
63908  }, (0,external_wp_element_namespaceObject.createElement)(LayoutGroup, {
63909    id: baseId
63910  }, children)));
63911}
63912
63913/**
63914 * `ToggleGroupControl` is a form component that lets users choose options
63915 * represented in horizontal segments. To render options for this control use
63916 * `ToggleGroupControlOption` component.
63917 *
63918 * This component is intended for selecting a single persistent value from a set of options,
63919 * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
63920 * use a `TabPanel` instead.
63921 *
63922 * Only use this control when you know for sure the labels of items inside won't
63923 * wrap. For items with longer labels, you can consider a `SelectControl` or a
63924 * `CustomSelectControl` component instead.
63925 *
63926 * ```jsx
63927 * import {
63928 *   __experimentalToggleGroupControl as ToggleGroupControl,
63929 *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
63930 * } from '@wordpress/components';
63931 *
63932 * function Example() {
63933 *   return (
63934 *     <ToggleGroupControl label="my label" value="vertical" isBlock>
63935 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
63936 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
63937 *     </ToggleGroupControl>
63938 *   );
63939 * }
63940 * ```
63941 */
63942const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');
63943/* harmony default export */ const toggle_group_control_component = (ToggleGroupControl);
63944
63945;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/P4RGQGTG.js
63946
63947
63948
63949
63950
63951// src/command/command.ts
63952
63953
63954
63955
63956function P4RGQGTG_isNativeClick(event) {
63957  if (!event.isTrusted)
63958    return false;
63959  const element = event.currentTarget;
63960  if (event.key === "Enter") {
63961    return O35LWD4W_isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A";
63962  }
63963  if (event.key === " ") {
63964    return O35LWD4W_isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT";
63965  }
63966  return false;
63967}
63968var useCommand = NQJBHION_createHook(
63969  (_a) => {
63970    var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
63971    const ref = (0,external_React_.useRef)(null);
63972    const tagName = useTagName(ref, props.as);
63973    const type = props.type;
63974    const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
63975      () => !!tagName && O35LWD4W_isButton({ tagName, type })
63976    );
63977    (0,external_React_.useEffect)(() => {
63978      if (!ref.current)
63979        return;
63980      setIsNativeButton(O35LWD4W_isButton(ref.current));
63981    }, []);
63982    const [active, setActive] = (0,external_React_.useState)(false);
63983    const activeRef = (0,external_React_.useRef)(false);
63984    const isDuplicate = "data-command" in props;
63985    const onKeyDownProp = props.onKeyDown;
63986    const onKeyDown = useEvent((event) => {
63987      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
63988      const element = event.currentTarget;
63989      if (event.defaultPrevented)
63990        return;
63991      if (isDuplicate)
63992        return;
63993      if (props.disabled)
63994        return;
63995      if (!events_isSelfTarget(event))
63996        return;
63997      if (O35LWD4W_isTextField(element))
63998        return;
63999      if (element.isContentEditable)
64000        return;
64001      const isEnter = clickOnEnter && event.key === "Enter";
64002      const isSpace = clickOnSpace && event.key === " ";
64003      const shouldPreventEnter = event.key === "Enter" && !clickOnEnter;
64004      const shouldPreventSpace = event.key === " " && !clickOnSpace;
64005      if (shouldPreventEnter || shouldPreventSpace) {
64006        event.preventDefault();
64007        return;
64008      }
64009      if (isEnter || isSpace) {
64010        const nativeClick = P4RGQGTG_isNativeClick(event);
64011        if (isEnter) {
64012          if (!nativeClick) {
64013            event.preventDefault();
64014            const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
64015            const click = () => fireClickEvent(element, eventInit);
64016            if (isFirefox()) {
64017              queueBeforeEvent(element, "keyup", click);
64018            } else {
64019              queueMicrotask(click);
64020            }
64021          }
64022        } else if (isSpace) {
64023          activeRef.current = true;
64024          if (!nativeClick) {
64025            event.preventDefault();
64026            setActive(true);
64027          }
64028        }
64029      }
64030    });
64031    const onKeyUpProp = props.onKeyUp;
64032    const onKeyUp = useEvent((event) => {
64033      onKeyUpProp == null ? void 0 : onKeyUpProp(event);
64034      if (event.defaultPrevented)
64035        return;
64036      if (isDuplicate)
64037        return;
64038      if (props.disabled)
64039        return;
64040      if (event.metaKey)
64041        return;
64042      const isSpace = clickOnSpace && event.key === " ";
64043      if (activeRef.current && isSpace) {
64044        activeRef.current = false;
64045        if (!P4RGQGTG_isNativeClick(event)) {
64046          setActive(false);
64047          const element = event.currentTarget;
64048          const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
64049          queueMicrotask(() => fireClickEvent(element, eventInit));
64050        }
64051      }
64052    });
64053    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
64054      "data-command": "",
64055      "data-active": active ? "" : void 0,
64056      type: isNativeButton ? "button" : void 0
64057    }, props), {
64058      ref: useMergeRefs(ref, props.ref),
64059      onKeyDown,
64060      onKeyUp
64061    });
64062    props = useFocusable(props);
64063    return props;
64064  }
64065);
64066var Command = NQJBHION_createComponent((props) => {
64067  props = useCommand(props);
64068  return NQJBHION_createElement("button", props);
64069});
64070if (false) {}
64071
64072
64073
64074;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/T3DJZG63.js
64075// src/collection/collection-context.ts
64076
64077var CollectionContext = (0,external_React_.createContext)(
64078  void 0
64079);
64080
64081
64082
64083;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HGFTMLQ7.js
64084
64085
64086
64087
64088
64089// src/collection/collection-item.ts
64090
64091
64092var useCollectionItem = NQJBHION_createHook(
64093  (_a) => {
64094    var _b = _a, {
64095      store,
64096      shouldRegisterItem = true,
64097      getItem = identity,
64098      element: element
64099    } = _b, props = __objRest(_b, [
64100      "store",
64101      "shouldRegisterItem",
64102      "getItem",
64103      // @ts-expect-error This prop may come from a collection renderer.
64104      "element"
64105    ]);
64106    const context = (0,external_React_.useContext)(CollectionContext);
64107    store = store || context;
64108    const id = useId(props.id);
64109    const unrenderItem = (0,external_React_.useRef)();
64110    const ref = (0,external_React_.useCallback)(
64111      (element2) => {
64112        var _a2;
64113        if (!element2 || !id || !shouldRegisterItem) {
64114          return (_a2 = unrenderItem.current) == null ? void 0 : _a2.call(unrenderItem);
64115        }
64116        const item = getItem({ id, element: element2 });
64117        unrenderItem.current = store == null ? void 0 : store.renderItem(item);
64118      },
64119      [id, shouldRegisterItem, getItem, store]
64120    );
64121    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
64122      ref: useMergeRefs(ref, props.ref)
64123    });
64124    return props;
64125  }
64126);
64127var CollectionItem = NQJBHION_createComponent(
64128  (props) => {
64129    const htmlProps = useCollectionItem(props);
64130    return NQJBHION_createElement("div", htmlProps);
64131  }
64132);
64133if (false) {}
64134
64135
64136
64137;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WFK3YK7D.js
64138
64139
64140
64141
64142
64143
64144
64145
64146
64147// src/composite/composite-item.tsx
64148
64149
64150
64151
64152function isEditableElement(element) {
64153  if (element.isContentEditable)
64154    return true;
64155  if (O35LWD4W_isTextField(element))
64156    return true;
64157  return element.tagName === "INPUT" && !O35LWD4W_isButton(element);
64158}
64159function getNextPageOffset(scrollingElement, pageUp = false) {
64160  const height = scrollingElement.clientHeight;
64161  const { top } = scrollingElement.getBoundingClientRect();
64162  const pageSize = Math.max(height * 0.875, height - 40) * 1.5;
64163  const pageOffset = pageUp ? height - pageSize + top : pageSize + top;
64164  if (scrollingElement.tagName === "HTML") {
64165    return pageOffset + scrollingElement.scrollTop;
64166  }
64167  return pageOffset;
64168}
64169function getItemOffset(itemElement, pageUp = false) {
64170  const { top } = itemElement.getBoundingClientRect();
64171  if (pageUp) {
64172    return top + itemElement.clientHeight;
64173  }
64174  return top;
64175}
64176function findNextPageItemId(element, store, next, pageUp = false) {
64177  var _a;
64178  if (!store)
64179    return;
64180  if (!next)
64181    return;
64182  const { renderedItems } = store.getState();
64183  const scrollingElement = getScrollingElement(element);
64184  if (!scrollingElement)
64185    return;
64186  const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
64187  let id;
64188  let prevDifference;
64189  for (let i = 0; i < renderedItems.length; i += 1) {
64190    const previousId = id;
64191    id = next(i);
64192    if (!id)
64193      break;
64194    if (id === previousId)
64195      continue;
64196    const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element;
64197    if (!itemElement)
64198      continue;
64199    const itemOffset = getItemOffset(itemElement, pageUp);
64200    const difference = itemOffset - nextPageOffset;
64201    const absDifference = Math.abs(difference);
64202    if (pageUp && difference <= 0 || !pageUp && difference >= 0) {
64203      if (prevDifference !== void 0 && prevDifference < absDifference) {
64204        id = previousId;
64205      }
64206      break;
64207    }
64208    prevDifference = absDifference;
64209  }
64210  return id;
64211}
64212function WFK3YK7D_targetIsAnotherItem(event, store) {
64213  if (events_isSelfTarget(event))
64214    return false;
64215  return OXPV2NBK_isItem(store, event.target);
64216}
64217function WFK3YK7D_useRole(ref, props) {
64218  const roleProp = props.role;
64219  const [role, setRole] = (0,external_React_.useState)(roleProp);
64220  useSafeLayoutEffect(() => {
64221    const element = ref.current;
64222    if (!element)
64223      return;
64224    setRole(element.getAttribute("role") || roleProp);
64225  }, [roleProp]);
64226  return role;
64227}
64228function requiresAriaSelected(role) {
64229  return role === "option" || role === "treeitem";
64230}
64231function supportsAriaSelected(role) {
64232  if (role === "option")
64233    return true;
64234  if (role === "tab")
64235    return true;
64236  if (role === "treeitem")
64237    return true;
64238  if (role === "gridcell")
64239    return true;
64240  if (role === "row")
64241    return true;
64242  if (role === "columnheader")
64243    return true;
64244  if (role === "rowheader")
64245    return true;
64246  return false;
64247}
64248var WFK3YK7D_useCompositeItem = NQJBHION_createHook(
64249  (_a) => {
64250    var _b = _a, {
64251      store,
64252      rowId: rowIdProp,
64253      preventScrollOnKeyDown = false,
64254      moveOnKeyPress = true,
64255      getItem: getItemProp,
64256      "aria-setsize": ariaSetSizeProp,
64257      "aria-posinset": ariaPosInSetProp
64258    } = _b, props = __objRest(_b, [
64259      "store",
64260      "rowId",
64261      "preventScrollOnKeyDown",
64262      "moveOnKeyPress",
64263      "getItem",
64264      "aria-setsize",
64265      "aria-posinset"
64266    ]);
64267    var _a2;
64268    const context = (0,external_React_.useContext)(CompositeContext);
64269    store = store || context;
64270    const id = useId(props.id);
64271    const ref = (0,external_React_.useRef)(null);
64272    const row = (0,external_React_.useContext)(CompositeRowContext);
64273    const rowId = useStoreState(store, (state) => {
64274      if (rowIdProp)
64275        return rowIdProp;
64276      if (!(row == null ? void 0 : row.baseElement))
64277        return;
64278      if (row.baseElement !== state.baseElement)
64279        return;
64280      return row.id;
64281    });
64282    const trulyDisabled = props.disabled && !props.accessibleWhenDisabled;
64283    const getItem = (0,external_React_.useCallback)(
64284      (item) => {
64285        const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), {
64286          id: id || item.id,
64287          rowId,
64288          disabled: !!trulyDisabled
64289        });
64290        if (getItemProp) {
64291          return getItemProp(nextItem);
64292        }
64293        return nextItem;
64294      },
64295      [id, rowId, trulyDisabled, getItemProp]
64296    );
64297    const onFocusProp = props.onFocus;
64298    const hasFocusedComposite = (0,external_React_.useRef)(false);
64299    const onFocus = useEvent((event) => {
64300      onFocusProp == null ? void 0 : onFocusProp(event);
64301      if (event.defaultPrevented)
64302        return;
64303      if (events_isPortalEvent(event))
64304        return;
64305      if (!id)
64306        return;
64307      if (!store)
64308        return;
64309      const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
64310      if (WFK3YK7D_targetIsAnotherItem(event, store))
64311        return;
64312      if (activeId !== id) {
64313        store.setActiveId(id);
64314      }
64315      if (!virtualFocus2)
64316        return;
64317      if (!events_isSelfTarget(event))
64318        return;
64319      if (isEditableElement(event.currentTarget))
64320        return;
64321      if (!baseElement2)
64322        return;
64323      hasFocusedComposite.current = true;
64324      const fromComposite = event.relatedTarget === baseElement2 || OXPV2NBK_isItem(store, event.relatedTarget);
64325      if (fromComposite) {
64326        focusSilently(baseElement2);
64327      } else {
vendor: 1,405 bytes, lines 64328-64362
64328        baseElement2.focus();
64329      }
64330    });
64331    const onBlurCaptureProp = props.onBlurCapture;
64332    const onBlurCapture = useEvent((event) => {
64333      onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
64334      if (event.defaultPrevented)
64335        return;
64336      const state = store == null ? void 0 : store.getState();
64337      if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) {
64338        hasFocusedComposite.current = false;
64339        event.preventDefault();
64340        event.stopPropagation();
64341      }
64342    });
64343    const onKeyDownProp = props.onKeyDown;
64344    const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);
64345    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
64346    const onKeyDown = useEvent((event) => {
64347      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
64348      if (event.defaultPrevented)
64349        return;
64350      if (!events_isSelfTarget(event))
64351        return;
64352      if (!store)
64353        return;
64354      const { currentTarget } = event;
64355      const state = store.getState();
64356      const item = store.item(id);
64357      const isGrid = !!(item == null ? void 0 : item.rowId);
64358      const isVertical = state.orientation !== "horizontal";
64359      const isHorizontal = state.orientation !== "vertical";
64360      const keyMap = {
64361        ArrowUp: (isGrid || isVertical) && store.up,
64362        ArrowRight: (isGrid || isHorizontal) && store.next,
64363        ArrowDown: (isGrid || isVertical) && store.down,
64364        ArrowLeft: (isGrid || isHorizontal) && store.previous,
64365        Home: () => {
64366          if (!isGrid || event.ctrlKey) {
64367            return store == null ? void 0 : store.first();
64368          }
64369          return store == null ? void 0 : store.previous(-1);
64370        },
64371        End: () => {
64372          if (!isGrid || event.ctrlKey) {
64373            return store == null ? void 0 : store.last();
64374          }
64375          return store == null ? void 0 : store.next(-1);
64376        },
64377        PageUp: () => {
64378          return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.up, true);
64379        },
64380        PageDown: () => {
64381          return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.down);
64382        }
64383      };
64384      const action = keyMap[event.key];
64385      if (action) {
64386        const nextId = action();
64387        if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
64388          if (!moveOnKeyPressProp(event))
64389            return;
64390          event.preventDefault();
64391          store.move(nextId);
64392        }
64393      }
64394    });
64395    const baseElement = useStoreState(
64396      store,
64397      (state) => state.baseElement || void 0
64398    );
64399    const providerValue = (0,external_React_.useMemo)(
64400      () => ({ id, baseElement }),
64401      [id, baseElement]
64402    );
64403    props = useWrapElement(
64404      props,
64405      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }),
64406      [providerValue]
64407    );
64408    const isActiveItem = useStoreState(store, (state) => state.activeId === id);
64409    const virtualFocus = useStoreState(store, "virtualFocus");
64410    const role = WFK3YK7D_useRole(ref, props);
64411    let ariaSelected;
64412    if (isActiveItem) {
64413      if (requiresAriaSelected(role)) {
64414        ariaSelected = true;
64415      } else if (virtualFocus && supportsAriaSelected(role)) {
64416        ariaSelected = true;
64417      }
64418    }
64419    const ariaSetSize = useStoreState(store, (state) => {
64420      if (ariaSetSizeProp != null)
64421        return ariaSetSizeProp;
64422      if (!(row == null ? void 0 : row.ariaSetSize))
64423        return;
64424      if (row.baseElement !== state.baseElement)
64425        return;
64426      return row.ariaSetSize;
64427    });
64428    const ariaPosInSet = useStoreState(store, (state) => {
64429      if (ariaPosInSetProp != null)
64430        return ariaPosInSetProp;
64431      if (!(row == null ? void 0 : row.ariaPosInSet))
64432        return;
64433      if (row.baseElement !== state.baseElement)
64434        return;
64435      const itemsInRow = state.renderedItems.filter(
64436        (item) => item.rowId === rowId
64437      );
64438      return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
64439    });
64440    const isTabbable = (_a2 = useStoreState(store, (state) => {
64441      if (!state.renderedItems.length)
64442        return true;
64443      return !state.virtualFocus && state.activeId === id;
64444    })) != null ? _a2 : true;
64445    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
64446      id,
64447      "aria-selected": ariaSelected,
64448      "data-active-item": isActiveItem ? "" : void 0
64449    }, props), {
64450      ref: useMergeRefs(ref, props.ref),
64451      tabIndex: isTabbable ? props.tabIndex : -1,
64452      onFocus,
64453      onBlurCapture,
64454      onKeyDown
64455    });
64456    props = useCommand(props);
64457    props = useCollectionItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
64458      store
64459    }, props), {
64460      getItem,
64461      shouldRegisterItem: !!id ? props.shouldRegisterItem : false
64462    }));
64463    return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), {
64464      "aria-setsize": ariaSetSize,
64465      "aria-posinset": ariaPosInSet
64466    });
64467  }
64468);
64469var WFK3YK7D_CompositeItem = createMemoComponent(
64470  (props) => {
64471    const htmlProps = WFK3YK7D_useCompositeItem(props);
64472    return NQJBHION_createElement("button", htmlProps);
64473  }
64474);
64475if (false) {}
64476
64477
64478
64479;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X2PAO7C6.js
64480
64481
64482
64483
64484
64485
64486
64487// src/radio/radio.ts
64488
64489function getIsChecked(value, storeValue) {
64490  if (storeValue === void 0)
64491    return;
64492  if (value != null && storeValue != null) {
64493    return storeValue === value;
64494  }
64495  return !!storeValue;
64496}
64497function isNativeRadio(tagName, type) {
64498  return tagName === "input" && (!type || type === "radio");
64499}
64500var useRadio = NQJBHION_createHook(
64501  (_a) => {
64502    var _b = _a, { store, value, checked } = _b, props = __objRest(_b, ["store", "value", "checked"]);
64503    var _a2;
64504    const context = (0,external_React_.useContext)(RadioContext);
64505    store = store || context;
64506    const id = useId(props.id);
64507    const ref = (0,external_React_.useRef)(null);
64508    const isChecked = (_a2 = useStoreState(
64509      store,
64510      (state) => checked != null ? checked : getIsChecked(value, state.value)
64511    )) != null ? _a2 : checked;
64512    (0,external_React_.useEffect)(() => {
64513      if (!id)
64514        return;
64515      if (!isChecked)
64516        return;
64517      const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
64518      if (isActiveItem)
64519        return;
64520      store == null ? void 0 : store.setActiveId(id);
64521    }, [store, isChecked, id]);
64522    const onChangeProp = props.onChange;
64523    const tagName = useTagName(ref, props.as || "input");
64524    const nativeRadio = isNativeRadio(tagName, props.type);
64525    const onChange = useEvent((event) => {
64526      if (props.disabled) {
64527        event.preventDefault();
64528        event.stopPropagation();
64529        return;
64530      }
64531      if (!nativeRadio) {
64532        event.currentTarget.checked = true;
64533      }
64534      onChangeProp == null ? void 0 : onChangeProp(event);
64535      if (event.defaultPrevented)
64536        return;
64537      store == null ? void 0 : store.setValue(value);
64538    });
64539    const onClickProp = props.onClick;
64540    const onClick = useEvent((event) => {
64541      onClickProp == null ? void 0 : onClickProp(event);
64542      if (event.defaultPrevented)
64543        return;
64544      if (nativeRadio)
64545        return;
64546      onChange(event);
64547    });
64548    const onFocusProp = props.onFocus;
64549    const onFocus = useEvent((event) => {
64550      onFocusProp == null ? void 0 : onFocusProp(event);
64551      if (event.defaultPrevented)
64552        return;
64553      if (!nativeRadio)
64554        return;
64555      if (!store)
64556        return;
64557      const { moves, activeId } = store.getState();
64558      if (!moves)
64559        return;
64560      if (id && activeId !== id)
64561        return;
64562      onChange(event);
64563    });
64564    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
64565      id,
64566      role: !nativeRadio ? "radio" : void 0,
64567      type: nativeRadio ? "radio" : void 0,
64568      "aria-checked": isChecked
64569    }, props), {
64570      ref: useMergeRefs(ref, props.ref),
64571      onChange,
64572      onClick,
64573      onFocus
64574    });
64575    props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadValues({ store, clickOnEnter: !nativeRadio }, props));
64576    return PNRLI7OV_spreadValues({
64577      value: nativeRadio ? value : void 0,
64578      checked: isChecked
64579    }, props);
64580  }
64581);
64582var Radio = createMemoComponent((props) => {
64583  const htmlProps = useRadio(props);
64584  return NQJBHION_createElement("input", htmlProps);
64585});
64586if (false) {}
64587
64588
64589
64590;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
64591
64592function toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
64593/**
64594 * External dependencies
64595 */
64596
64597/**
64598 * Internal dependencies
64599 */
64600
64601const LabelView = emotion_styled_base_browser_esm("div",  true ? {
64602  target: "et6ln9s1"
64603} : 0)( true ? {
64604  name: "sln1fl",
64605  styles: "display:inline-flex;max-width:100%;min-width:0;position:relative"
64606} : 0);
64607const labelBlock =  true ? {
64608  name: "82a6rk",
64609  styles: "flex:1"
64610} : 0;
64611const buttonView = ({
64612  isDeselectable,
64613  isIcon,
64614  isPressed,
64615  size
64616}) => /*#__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;
64616transition: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({
64617  size
64618}), " ", isPressed && pressed, ";" + ( true ? "" : 0),  true ? "" : 0);
64619const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0),  true ? "" : 0);
64620const 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);
64621const ButtonContentView = emotion_styled_base_browser_esm("div",  true ? {
64622  target: "et6ln9s0"
64623} : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0));
64624const isIconStyles = ({
64625  size = 'default'
64626}) => {
64627  const iconButtonSizes = {
64628    default: '30px',
64629    '__unstable-large': '34px'
64630  };
64631  return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";width:", iconButtonSizes[size], ";padding-left:0;padding-right:0;" + ( true ? "" : 0),  true ? "" : 0);
64632};
64633const 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);
64634
64635;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js
64636
64637/**
64638 * External dependencies
64639 */
64640
64641// eslint-disable-next-line no-restricted-imports
64642
64643// eslint-disable-next-line no-restricted-imports
64644
64645
64646/**
64647 * WordPress dependencies
64648 */
64649
64650
64651
64652/**
64653 * Internal dependencies
64654 */
64655
64656
64657
64658
64659
64660
64661const {
64662  ButtonContentView: component_ButtonContentView,
64663  LabelView: component_LabelView
64664} = toggle_group_control_option_base_styles_namespaceObject;
64665const REDUCED_MOTION_TRANSITION_CONFIG = {
64666  duration: 0
64667};
64668const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
64669const WithToolTip = ({
64670  showTooltip,
64671  text,
64672  children
64673}) => {
64674  if (showTooltip && text) {
64675    return (0,external_wp_element_namespaceObject.createElement)(tooltip, {
64676      text: text,
64677      placement: "top"
64678    }, children);
64679  }
64680  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children);
64681};
64682function ToggleGroupControlOptionBase(props, forwardedRef) {
64683  const shouldReduceMotion = useReducedMotion();
64684  const toggleGroupControlContext = useToggleGroupControlContext();
64685  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
64686  const buttonProps = useContextSystem({
64687    ...props,
64688    id
64689  }, 'ToggleGroupControlOptionBase');
64690  const {
64691    isBlock = false,
64692    isDeselectable = false,
64693    size = 'default'
64694  } = toggleGroupControlContext;
64695  const {
64696    className,
64697    isIcon = false,
64698    value,
64699    children,
64700    showTooltip = false,
64701    onFocus: onFocusProp,
64702    ...otherButtonProps
64703  } = buttonProps;
64704  const isPressed = toggleGroupControlContext.value === value;
64705  const cx = useCx();
64706  const labelViewClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(isBlock && labelBlock), [cx, isBlock]);
64707  const itemClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(buttonView({
64708    isDeselectable,
64709    isIcon,
64710    isPressed,
64711    size
64712  }), className), [cx, isDeselectable, isIcon, isPressed, size, className]);
64713  const backdropClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(backdropView), [cx]);
64714  const buttonOnClick = () => {
64715    if (isDeselectable && isPressed) {
64716      toggleGroupControlContext.setValue(undefined);
64717    } else {
64718      toggleGroupControlContext.setValue(value);
64719    }
64720  };
64721  const commonProps = {
64722    ...otherButtonProps,
64723    className: itemClasses,
64724    'data-value': value,
64725    ref: forwardedRef
64726  };
64727  return (0,external_wp_element_namespaceObject.createElement)(component_LabelView, {
64728    className: labelViewClasses
64729  }, (0,external_wp_element_namespaceObject.createElement)(WithToolTip, {
64730    showTooltip: showTooltip,
64731    text: otherButtonProps['aria-label']
64732  }, isDeselectable ? (0,external_wp_element_namespaceObject.createElement)("button", {
64733    ...commonProps,
64734    onFocus: onFocusProp,
64735    "aria-pressed": isPressed,
64736    type: "button",
64737    onClick: buttonOnClick
64738  }, (0,external_wp_element_namespaceObject.createElement)(component_ButtonContentView, null, children)) : (0,external_wp_element_namespaceObject.createElement)(Radio, {
64739    render: (0,external_wp_element_namespaceObject.createElement)("button", {
64740      ...commonProps,
64741      onFocus: event => {
64742        onFocusProp?.(event);
64743        if (event.defaultPrevented) return;
64744        toggleGroupControlContext.setValue(value);
64745      }
64746    }),
64747    value: value
64748  }, (0,external_wp_element_namespaceObject.createElement)(component_ButtonContentView, null, children))), isPressed ? (0,external_wp_element_namespaceObject.createElement)(motion.div, {
64749    className: backdropClasses,
64750    transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
64751    role: "presentation",
64752    layoutId: LAYOUT_ID
64753  }) : null);
64754}
64755
64756/**
64757 * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
64758 * generic component for any children of `ToggleGroupControl`.
64759 *
64760 * @example
64761 * ```jsx
64762 * import {
64763 *   __experimentalToggleGroupControl as ToggleGroupControl,
64764 *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,
64765 * } from '@wordpress/components';
64766 *
64767 * function Example() {
64768 *   return (
64769 *     <ToggleGroupControl label="my label" value="vertical" isBlock>
64770 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
64771 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
64772 *     </ToggleGroupControl>
64773 *   );
64774 * }
64775 * ```
64776 */
64777const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');
64778/* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase);
64779
64780;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option/component.js
64781
64782/**
64783 * External dependencies
64784 */
64785
64786/**
64787 * WordPress dependencies
64788 */
64789
64790
64791/**
64792 * Internal dependencies
64793 */
64794
64795
64796function UnforwardedToggleGroupControlOption(props, ref) {
64797  const {
64798    label,
64799    ...restProps
64800  } = props;
64801  const optionLabel = restProps['aria-label'] || label;
64802  return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, {
64803    ...restProps,
64804    "aria-label": optionLabel,
64805    ref: ref
64806  }, label);
64807}
64808
64809/**
64810 * `ToggleGroupControlOption` is a form component and is meant to be used as a
64811 * child of `ToggleGroupControl`.
64812 *
64813 * ```jsx
64814 * import {
64815 *   __experimentalToggleGroupControl as ToggleGroupControl,
64816 *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
64817 * } from '@wordpress/components';
64818 *
64819 * function Example() {
64820 *   return (
64821 *     <ToggleGroupControl label="my label" value="vertical" isBlock>
64822 *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
64823 *       <ToggleGroupControlOption value="vertical" label="Vertical" />
64824 *     </ToggleGroupControl>
64825 *   );
64826 * }
64827 * ```
64828 */
64829const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption);
64830/* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption);
64831
64832;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/constants.js
64833/**
64834 * WordPress dependencies
64835 */
64836
64837
64838/**
64839 * List of T-shirt abbreviations.
64840 *
64841 * When there are 5 font sizes or fewer, we assume that the font sizes are
64842 * ordered by size and show T-shirt labels.
64843 */
64844const T_SHIRT_ABBREVIATIONS = [/* translators: S stands for 'small' and is a size label. */
64845(0,external_wp_i18n_namespaceObject.__)('S'), /* translators: M stands for 'medium' and is a size label. */
64846(0,external_wp_i18n_namespaceObject.__)('M'), /* translators: L stands for 'large' and is a size label. */
64847(0,external_wp_i18n_namespaceObject.__)('L'), /* translators: XL stands for 'extra large' and is a size label. */
64848(0,external_wp_i18n_namespaceObject.__)('XL'), /* translators: XXL stands for 'extra extra large' and is a size label. */
64849(0,external_wp_i18n_namespaceObject.__)('XXL')];
64850
64851/**
64852 * List of T-shirt names.
64853 *
64854 * When there are 5 font sizes or fewer, we assume that the font sizes are
64855 * ordered by size and show T-shirt labels.
64856 */
64857const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')];
64858
64859;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/font-size-picker-toggle-group.js
64860
64861/**
64862 * WordPress dependencies
64863 */
64864
64865
64866/**
64867 * Internal dependencies
64868 */
64869
64870
64871const FontSizePickerToggleGroup = props => {
64872  const {
64873    fontSizes,
64874    value,
64875    __nextHasNoMarginBottom,
64876    size,
64877    onChange
64878  } = props;
64879  return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_component, {
64880    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
64881    label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
64882    hideLabelFromVision: true,
64883    value: value,
64884    onChange: onChange,
64885    isBlock: true,
64886    size: size
64887  }, fontSizes.map((fontSize, index) => (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_component, {
64888    key: fontSize.slug,
64889    value: fontSize.size,
64890    label: T_SHIRT_ABBREVIATIONS[index],
64891    "aria-label": fontSize.name || T_SHIRT_NAMES[index],
64892    showTooltip: true
64893  })));
64894};
64895/* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup);
64896
64897;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/index.js
64898
64899/**
64900 * External dependencies
64901 */
64902
64903/**
64904 * WordPress dependencies
64905 */
64906
64907
64908
64909
64910
64911/**
64912 * Internal dependencies
64913 */
64914
64915
64916
64917
64918
64919
64920
64921
64922
64923
64924
64925const UnforwardedFontSizePicker = (props, ref) => {
64926  const {
64927    /** Start opting into the new margin-free styles that will become the default in a future version. */
64928    __nextHasNoMarginBottom = false,
64929    fallbackFontSize,
64930    fontSizes = [],
64931    disableCustomFontSizes = false,
64932    onChange,
64933    size = 'default',
64934    units: unitsProp,
64935    value,
64936    withSlider = false,
64937    withReset = true
64938  } = props;
64939  if (!__nextHasNoMarginBottom) {
64940    external_wp_deprecated_default()('Bottom margin styles for wp.components.FontSizePicker', {
64941      since: '6.1',
64942      version: '6.4',
64943      hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
64944    });
64945  }
64946  const units = useCustomUnits({
64947    availableUnits: unitsProp || ['px', 'em', 'rem']
64948  });
64949  const shouldUseSelectControl = fontSizes.length > 5;
64950  const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
64951  const isCustomValue = !!value && !selectedFontSize;
64952  const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomFontSizes && isCustomValue);
64953  const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => {
64954    if (showCustomValueControl) {
64955      return (0,external_wp_i18n_namespaceObject.__)('Custom');
64956    }
64957    if (!shouldUseSelectControl) {
64958      if (selectedFontSize) {
64959        return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
64960      }
64961      return '';
64962    }
64963    const commonUnit = getCommonSizeUnit(fontSizes);
64964    if (commonUnit) {
64965      return `(${commonUnit})`;
64966    }
64967    return '';
64968  }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
64969  if (fontSizes.length === 0 && disableCustomFontSizes) {
64970    return null;
64971  }
64972
64973  // If neither the value or first font size is a string, then FontSizePicker
64974  // operates in a legacy "unitless" mode where UnitControl can only be used
64975  // to select px values and onChange() is always called with number values.
64976  const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string';
64977  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
64978  const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
64979  return (0,external_wp_element_namespaceObject.createElement)(styles_Container, {
64980    ref: ref,
64981    className: "components-font-size-picker"
64982  }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
64983    as: "legend"
64984  }, (0,external_wp_i18n_namespaceObject.__)('Font size')), (0,external_wp_element_namespaceObject.createElement)(spacer_
64984component, null, (0,external_wp_element_namespaceObject.createElement)(font_size_picker_styles_Header, {
64985    className: "components-font-size-picker__header"
64986  }, (0,external_wp_element_namespaceObject.createElement)(HeaderLabel, {
64987    "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} ${headerHint || ''}`
64988  }, (0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && (0,external_wp_element_namespaceObject.createElement)(HeaderHint, {
64989    className: "components-font-size-picker__header__hint"
64990  }, headerHint)), !disableCustomFontSizes && (0,external_wp_element_namespaceObject.createElement)(HeaderToggle, {
64991    label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
64992    icon: library_settings,
64993    onClick: () => {
64994      setShowCustomValueControl(!showCustomValueControl);
64995    },
64996    isPressed: showCustomValueControl,
64997    isSmall: true
64998  }))), (0,external_wp_element_namespaceObject.createElement)(Controls, {
64999    className: "components-font-size-picker__controls",
65000    __nextHasNoMarginBottom: __nextHasNoMarginBottom
65001  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(font_size_picker_select, {
65002    fontSizes: fontSizes,
65003    value: value,
65004    disableCustomFontSizes: disableCustomFontSizes,
65005    size: size,
65006    onChange: newValue => {
65007      if (newValue === undefined) {
65008        onChange?.(undefined);
65009      } else {
65010        onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
65011      }
65012    },
65013    onSelectCustom: () => setShowCustomValueControl(true)
65014  }), !shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(font_size_picker_toggle_group, {
65015    fontSizes: fontSizes,
65016    value: value,
65017    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
65018    size: size,
65019    onChange: newValue => {
65020      if (newValue === undefined) {
65021        onChange?.(undefined);
65022      } else {
65023        onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
65024      }
65025    }
65026  }), !disableCustomFontSizes && showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(flex_component, {
65027    className: "components-font-size-picker__custom-size-control"
65028  }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, {
65029    isBlock: true
65030  }, (0,external_wp_element_namespaceObject.createElement)(unit_control, {
65031    label: (0,external_wp_i18n_namespaceObject.__)('Custom'),
65032    labelPosition: "top",
65033    hideLabelFromVision: true,
65034    value: value,
65035    onChange: newValue => {
65036      if (newValue === undefined) {
65037        onChange?.(undefined);
65038      } else {
65039        onChange?.(hasUnits ? newValue : parseInt(newValue, 10));
65040      }
65041    },
65042    size: size,
65043    units: hasUnits ? units : [],
65044    min: 0
65045  })), withSlider && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, {
65046    isBlock: true
65047  }, (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
65048    marginX: 2,
65049    marginBottom: 0
65050  }, (0,external_wp_element_namespaceObject.createElement)(range_control, {
65051    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
65052    className: "components-font-size-picker__custom-input",
65053    label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'),
65054    hideLabelFromVision: true,
65055    value: valueQuantity,
65056    initialPosition: fallbackFontSize,
65057    withInputField: false,
65058    onChange: newValue => {
65059      if (newValue === undefined) {
65060        onChange?.(undefined);
65061      } else if (hasUnits) {
65062        onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));
65063      } else {
65064        onChange?.(newValue);
65065      }
65066    },
65067    min: 0,
65068    max: isValueUnitRelative ? 10 : 100,
65069    step: isValueUnitRelative ? 0.1 : 1
65070  }))), withReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(Button, {
65071    disabled: value === undefined,
65072    onClick: () => {
65073      onChange?.(undefined);
65074    },
65075    variant: "secondary",
65076    __next40pxDefaultSize: true,
65077    size: size !== '__unstable-large' ? 'small' : 'default'
65078  }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))));
65079};
65080const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker);
65081/* harmony default export */ const font_size_picker = (FontSizePicker);
65082
65083;// CONCATENATED MODULE: ./packages/components/build-module/form-file-upload/index.js
65084
65085/**
65086 * WordPress dependencies
65087 */
65088
65089
65090/**
65091 * Internal dependencies
65092 */
65093
65094/**
65095 * FormFileUpload is a component that allows users to select files from their local device.
65096 *
65097 * ```jsx
65098 * import { FormFileUpload } from '@wordpress/components';
65099 *
65100 * const MyFormFileUpload = () => (
65101 *   <FormFileUpload
65102 *     accept="image/*"
65103 *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
65104 *   >
65105 *     Upload
65106 *   </FormFileUpload>
65107 * );
65108 * ```
65109 */
65110function FormFileUpload({
65111  accept,
65112  children,
65113  multiple = false,
65114  onChange,
65115  onClick,
65116  render,
65117  ...props
65118}) {
65119  const ref = (0,external_wp_element_namespaceObject.useRef)(null);
65120  const openFileDialog = () => {
65121    ref.current?.click();
65122  };
65123  const ui = render ? render({
65124    openFileDialog
65125  }) : (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
65126    onClick: openFileDialog,
65127    ...props
65128  }, children);
65129  return (0,external_wp_element_namespaceObject.createElement)("div", {
65130    className: "components-form-file-upload"
65131  }, ui, (0,external_wp_element_namespaceObject.createElement)("input", {
65132    type: "file",
65133    ref: ref,
65134    multiple: multiple,
65135    style: {
65136      display: 'none'
65137    },
65138    accept: accept,
65139    onChange: onChange,
65140    onClick: onClick,
65141    "data-testid": "form-file-upload-input"
65142  }));
65143}
65144/* harmony default export */ const form_file_upload = (FormFileUpload);
65145
65146;// CONCATENATED MODULE: ./packages/components/build-module/form-toggle/index.js
65147
65148/**
65149 * External dependencies
65150 */
65151
65152
65153/**
65154 * Internal dependencies
65155 */
65156
65157const form_toggle_noop = () => {};
65158
65159/**
65160 * FormToggle switches a single setting on or off.
65161 *
65162 * ```jsx
65163 * import { FormToggle } from '@wordpress/components';
65164 * import { useState } from '@wordpress/element';
65165 *
65166 * const MyFormToggle = () => {
65167 *   const [ isChecked, setChecked ] = useState( true );
65168 *
65169 *   return (
65170 *     <FormToggle
65171 *       checked={ isChecked }
65172 *       onChange={ () => setChecked( ( state ) => ! state ) }
65173 *     />
65174 *   );
65175 * };
65176 * ```
65177 */
65178function FormToggle(props) {
65179  const {
65180    className,
65181    checked,
65182    id,
65183    disabled,
65184    onChange = form_toggle_noop,
65185    ...additionalProps
65186  } = props;
65187  const wrapperClasses = classnames_default()('components-form-toggle', className, {
65188    'is-checked': checked,
65189    'is-disabled': disabled
65190  });
65191  return (0,external_wp_element_namespaceObject.createElement)("span", {
65192    className: wrapperClasses
65193  }, (0,external_wp_element_namespaceObject.createElement)("input", {
65194    className: "components-form-toggle__input",
65195    id: id,
65196    type: "checkbox",
65197    checked: checked,
65198    onChange: onChange,
65199    disabled: disabled,
65200    ...additionalProps
65201  }), (0,external_wp_element_namespaceObject.createElement)("span", {
65202    className: "components-form-toggle__track"
65203  }), (0,external_wp_element_namespaceObject.createElement)("span", {
65204    className: "components-form-toggle__thumb"
65205  }));
65206}
65207/* harmony default export */ const form_toggle = (FormToggle);
65208
65209;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/token.js
65210
65211/**
65212 * External dependencies
65213 */
65214
65215
65216/**
65217 * WordPress dependencies
65218 */
65219
65220
65221
65222
65223/**
65224 * Internal dependencies
65225 */
65226
65227
65228const token_noop = () => {};
65229function Token({
65230  value,
65231  status,
65232  title,
65233  displayTransform,
65234  isBorderless = false,
65235  disabled = false,
65236  onClickRemove = token_noop,
65237  onMouseEnter,
65238  onMouseLeave,
65239  messages,
65240  termPosition,
65241  termsCount
65242}) {
65243  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token);
65244  const tokenClasses = classnames_default()('components-form-token-field__token', {
65245    'is-error': 'error' === status,
65246    'is-success': 'success' === status,
65247    'is-validating': 'validating' === status,
65248    'is-borderless': isBorderless,
65249    'is-disabled': disabled
65250  });
65251  const onClick = () => onClickRemove({
65252    value
65253  });
65254  const transformedValue = displayTransform(value);
65255  const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
65256  (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount);
65257  return (0,external_wp_element_namespaceObject.createElement)("span", {
65258    className: tokenClasses,
65259    onMouseEnter: onMouseEnter,
65260    onMouseLeave: onMouseLeave,
65261    title: title
65262  }, (0,external_wp_element_namespaceObject.createElement)("span", {
65263    className: "components-form-token-field__token-text",
65264    id: `components-form-token-field__token-text-${instanceId}`
65265  }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
65266    as: "span"
65267  }, termPositionAndCount), (0,external_wp_element_namespaceObject.createElement)("span", {
65268    "aria-hidden": "true"
65269  }, transformedValue)), (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
65270    className: "components-form-token-field__remove-token",
65271    icon: close_small,
65272    onClick: !disabled ? onClick : undefined,
65273    label: messages.remove,
65274    "aria-describedby": `components-form-token-field__token-text-${instanceId}`
65275  }));
65276}
65277
65278;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/styles.js
65279
65280/**
65281 * External dependencies
65282 */
65283
65284
65285
65286/**
65287 * Internal dependencies
65288 */
65289
65290
65291
65292const deprecatedPaddings = ({
65293  __next40pxDefaultSize,
65294  hasTokens
65295}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(hasTokens ? 1 : 0.5), ";padding-bottom:", space(hasTokens ? 1 : 0.5), ";" + ( true ? "" : 0),  true ? "" : 0);
65296const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
65297  target: "ehq8nmi0"
65298} : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0));
65299
65300;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/index.js
65301
65302/**
65303 * External dependencies
65304 */
65305
65306/**
65307 * WordPress dependencies
65308 */
65309
65310
65311
65312
65313
65314
65315/**
65316 * Internal dependencies
65317 */
65318
65319
65320
65321
65322
65323
65324
65325
65326const form_token_field_identity = value => value;
65327
65328/**
65329 * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
65330 * or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.
65331 *
65332 * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).
65333 * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
65334 *
65335 * The `value` property is handled in a manner similar to controlled form components.
65336 * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
65337 */
65338function FormTokenField(props) {
65339  const {
65340    autoCapitalize,
65341    autoComplete,
65342    maxLength,
65343    placeholder,
65344    label = (0,external_wp_i18n_namespaceObject.__)('Add item'),
65345    className,
65346    suggestions = [],
65347    maxSuggestions = 100,
65348    value = [],
65349    displayTransform = form_token_field_identity,
65350    saveTransform = token => token.trim(),
65351    onChange = () => {},
65352    onInputChange = () => {},
65353    onFocus = undefined,
65354    isBorderless = false,
65355    disabled = false,
65356    tokenizeOnSpace = false,
65357    messages = {
65358      added: (0,external_wp_i18n_namespaceObject.__)('Item added.'),
65359      removed: (0,external_wp_i18n_namespaceObject.__)('Item removed.'),
65360      remove: (0,external_wp_i18n_namespaceObject.__)('Remove item'),
65361      __experimentalInvalid: (0,external_wp_i18n_namespaceObject.__)('Invalid item')
65362    },
65363    __experimentalRenderItem,
65364    __experimentalExpandOnFocus = false,
65365    __experimentalValidateInput = () => true,
65366    __experimentalShowHowTo = true,
65367    __next40pxDefaultSize = false,
65368    __experimentalAutoSelectFirstMatch = false,
65369    __nextHasNoMarginBottom = false,
65370    tokenizeOnBlur = false
65371  } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.FormTokenField');
65372  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FormTokenField);
65373
65374  // We reset to these initial values again in the onBlur
65375  const [incompleteTokenValue, setIncompleteTokenValue] = (0,external_wp_element_namespaceObject.useState)('');
65376  const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0,external_wp_element_namespaceObject.useState)(0);
65377  const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false);
65378  const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
65379  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0,external_wp_element_namespaceObject.useState)(-1);
65380  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0,external_wp_element_namespaceObject.useState)(false);
65381  const prevSuggestions = (0,external_wp_compose_namespaceObject.usePrevious)(suggestions);
65382  const prevValue = (0,external_wp_compose_namespaceObject.usePrevious)(value);
65383  const input = (0,external_wp_element_namespaceObject.useRef)(null);
65384  const tokensAndInput = (0,external_wp_element_namespaceObject.useRef)(null);
65385  const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
65386  (0,external_wp_element_namespaceObject.useEffect)(() => {
65387    // Make sure to focus the input when the isActive state is true.
65388    if (isActive && !hasFocus()) {
65389      focus();
65390    }
65391  }, [isActive]);
65392  (0,external_wp_element_namespaceObject.useEffect)(() => {
65393    const suggestionsDidUpdate = !external_wp_isShallowEqual_default()(suggestions, prevSuggestions || []);
65394    if (suggestionsDidUpdate || value !== prevValue) {
65395      updateSuggestions(suggestionsDidUpdate);
65396    }
65397
65398    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
65399    // eslint-disable-next-line react-hooks/exhaustive-deps
65400  }, [suggestions, prevSuggestions, value, prevValue]);
65401  (0,external_wp_element_namespaceObject.useEffect)(() => {
65402    updateSuggestions();
65403    // eslint-disable-next-line react-hooks/exhaustive-deps
65404  }, [incompleteTokenValue]);
65405  (0,external_wp_element_namespaceObject.useEffect)(() => {
65406    updateSuggestions();
65407    // eslint-disable-next-line react-hooks/exhaustive-deps
65408  }, [__experimentalAutoSelectFirstMatch]);
65409  if (disabled && isActive) {
65410    setIsActive(false);
65411    setIncompleteTokenValue('');
65412  }
65413  function focus() {
65414    input.current?.focus();
65415  }
65416  function hasFocus() {
65417    return input.current === input.current?.ownerDocument.activeElement;
65418  }
65419  function onFocusHandler(event) {
65420    // If focus is on the input or on the container, set the isActive state to true.
65421    if (hasFocus() || event.target === tokensAndInput.current) {
65422      setIsActive(true);
65423      setIsExpanded(__experimentalExpandOnFocus || isExpanded);
65424    } else {
65425      /*
65426       * Otherwise, focus is on one of the token "remove" buttons and we
65427       * set the isActive state to false to prevent the input to be
65428       * re-focused, see componentDidUpdate().
65429       */
65430      setIsActive(false);
65431    }
65432    if ('function' === typeof onFocus) {
65433      onFocus(event);
65434    }
65435  }
65436  function onBlur() {
65437    if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
65438      setIsActive(false);
65439      if (tokenizeOnBlur && inputHasValidValue()) {
65440        addNewToken(incompleteTokenValue);
65441      }
65442    } else {
65443      // Reset to initial state
65444      setIncompleteTokenValue('');
65445      setInputOffsetFromEnd(0);
65446      setIsActive(false);
65447      setIsExpanded(false);
65448      setSelectedSuggestionIndex(-1);
65449      setSelectedSuggestionScroll(false);
65450    }
65451  }
65452  function onKeyDown(event) {
65453    let preventDefault = false;
65454    if (event.defaultPrevented ||
65455    // Ignore keydowns from IMEs
65456    event.nativeEvent.isComposing ||
65457    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
65458    // is `isComposing=false`, even though it's technically still part of the composition.
65459    // These can only be detected by keyCode.
65460    event.keyCode === 229) {
65461      return;
65462    }
65463    switch (event.key) {
65464      case 'Backspace':
65465        preventDefault = handleDeleteKey(deleteTokenBeforeInput);
65466        break;
65467      case 'Enter':
65468        preventDefault = addCurrentToken();
65469        break;
65470      case 'ArrowLeft':
65471        preventDefault = handleLeftArrowKey();
65472        break;
65473      case 'ArrowUp':
65474        preventDefault = handleUpArrowKey();
65475        break;
65476      case 'ArrowRight':
65477        preventDefault = handleRightArrowKey();
65478        break;
65479      case 'ArrowDown':
65480        preventDefault = handleDownArrowKey();
65481        break;
65482      case 'Delete':
65483        preventDefault = handleDeleteKey(deleteTokenAfterInput);
65484        break;
65485      case 'Space':
65486        if (tokenizeOnSpace) {
65487          preventDefault = addCurrentToken();
65488        }
65489        break;
65490      case 'Escape':
65491        preventDefault = handleEscapeKey(event);
65492        break;
65493      default:
65494        break;
65495    }
65496    if (preventDefault) {
65497      event.preventDefault();
65498    }
65499  }
65500  function onKeyPress(event) {
65501    let preventDefault = false;
65502    switch (event.key) {
65503      case ',':
65504        preventDefault = handleCommaKey();
65505        break;
65506      default:
65507        break;
65508    }
65509    if (preventDefault) {
65510      event.preventDefault();
65511    }
65512  }
65513  function onContainerTouched(event) {
65514    // Prevent clicking/touching the tokensAndInput container from blurring
65515    // the input and adding the current token.
65516    if (event.target === tokensAndInput.current && isActive) {
65517      event.preventDefault();
65518    }
65519  }
65520  function onTokenClickRemove(event) {
65521    deleteToken(event.value);
65522    focus();
65523  }
65524  function onSuggestionHovered(suggestion) {
65525    const index = getMatchingSuggestions().indexOf(suggestion);
65526    if (index >= 0) {
65527      setSelectedSuggestionIndex(index);
65528      setSelectedSuggestionScroll(false);
65529    }
65530  }
65531  function onSuggestionSelected(suggestion) {
65532    addNewToken(suggestion);
65533  }
65534  function onInputChangeHandler(event) {
65535    const text = event.value;
65536    const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
65537    const items = text.split(separator);
65538    const tokenValue = items[items.length - 1] || '';
65539    if (items.length > 1) {
65540      addNewTokens(items.slice(0, -1));
65541    }
65542    setIncompleteTokenValue(tokenValue);
65543    onInputChange(tokenValue);
65544  }
65545  function handleDeleteKey(_deleteToken) {
65546    let preventDefault = false;
65547    if (hasFocus() && isInputEmpty()) {
65548      _deleteToken();
65549      preventDefault = true;
65550    }
65551    return preventDefault;
65552  }
65553  function handleLeftArrowKey() {
65554    let preventDefault = false;
65555    if (isInputEmpty()) {
65556      moveInputBeforePreviousToken();
65557      preventDefault = true;
65558    }
65559    return preventDefault;
65560  }
65561  function handleRightArrowKey() {
65562    let preventDefault = false;
65563    if (isInputEmpty()) {
65564      moveInputAfterNextToken();
65565      preventDefault = true;
65566    }
65567    return preventDefault;
65568  }
65569  function handleUpArrowKey() {
65570    setSelectedSuggestionIndex(index => {
65571      return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
65572    });
65573    setSelectedSuggestionScroll(true);
65574    return true; // PreventDefault.
65575  }
65576
65577  function handleDownArrowKey() {
65578    setSelectedSuggestionIndex(index => {
65579      return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;
65580    });
65581    setSelectedSuggestionScroll(true);
65582    return true; // PreventDefault.
65583  }
65584
65585  function handleEscapeKey(event) {
65586    if (event.target instanceof HTMLInputElement) {
65587      setIncompleteTokenValue(event.target.value);
65588      setIsExpanded(false);
65589      setSelectedSuggestionIndex(-1);
65590      setSelectedSuggestionScroll(false);
65591    }
65592    return true; // PreventDefault.
65593  }
65594
65595  function handleCommaKey() {
65596    if (inputHasValidValue()) {
65597      addNewToken(incompleteTokenValue);
65598    }
65599    return true; // PreventDefault.
65600  }
65601
65602  function moveInputToIndex(index) {
65603    setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);
65604  }
65605  function moveInputBeforePreviousToken() {
65606    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
65607      return Math.min(prevInputOffsetFromEnd + 1, value.length);
65608    });
65609  }
65610  function moveInputAfterNextToken() {
65611    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
65612      return Math.max(prevInputOffsetFromEnd - 1, 0);
65613    });
65614  }
65615  function deleteTokenBeforeInput() {
65616    const index = getIndexOfInput() - 1;
65617    if (index > -1) {
65618      deleteToken(value[index]);
65619    }
65620  }
65621  function deleteTokenAfterInput() {
65622    const index = getIndexOfInput();
65623    if (index < value.length) {
65624      deleteToken(value[index]);
65625      // Update input offset since it's the offset from the last token.
65626      moveInputToIndex(index);
65627    }
65628  }
65629  function addCurrentToken() {
65630    let preventDefault = false;
65631    const selectedSuggestion = getSelectedSuggestion();
65632    if (selectedSuggestion) {
65633      addNewToken(selectedSuggestion);
65634      preventDefault = true;
65635    } else if (inputHasValidValue()) {
65636      addNewToken(incompleteTokenValue);
65637      preventDefault = true;
65638    }
65639    return preventDefault;
65640  }
65641  function addNewTokens(tokens) {
65642    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
65643    if (tokensToAdd.length > 0) {
65644      const newValue = [...value];
65645      newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);
65646      onChange(newValue);
65647    }
65648  }
65649  function addNewToken(token) {
65650    if (!__experimentalValidateInput(token)) {
65651      (0,external_wp_a11y_namespaceObject.speak)(messages.__experimentalInvalid, 'assertive');
65652      return;
65653    }
65654    addNewTokens([token]);
65655    (0,external_wp_a11y_namespaceObject.speak)(messages.added, 'assertive');
65656    setIncompleteTokenValue('');
65657    setSelectedSuggestionIndex(-1);
65658    setSelectedSuggestionScroll(false);
65659    setIsExpanded(!__experimentalExpandOnFocus);
65660    if (isActive && !tokenizeOnBlur) {
65661      focus();
65662    }
65663  }
65664  function deleteToken(token) {
65665    const newTokens = value.filter(item => {
65666      return getTokenValue(item) !== getTokenValue(token);
65667    });
65668    onChange(newTokens);
65669    (0,external_wp_a11y_namespaceObject.speak)(messages.removed, 'assertive');
65670  }
65671  function getTokenValue(token) {
65672    if ('object' === typeof token) {
65673      return token.value;
65674    }
65675    return token;
65676  }
65677  function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) {
65678    let match = _saveTransform(searchValue);
65679    const startsWithMatch = [];
65680    const containsMatch = [];
65681    const normalizedValue = _value.map(item => {
65682      if (typeof item === 'string') {
65683        return item;
65684      }
65685      return item.value;
65686    });
65687    if (match.length === 0) {
65688      _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));
65689    } else {
65690      match = match.toLocaleLowerCase();
65691      _suggestions.forEach(suggestion => {
65692        const index = suggestion.toLocaleLowerCase().indexOf(match);
65693        if (normalizedValue.indexOf(suggestion) === -1) {
65694          if (index === 0) {
65695            startsWithMatch.push(suggestion);
65696          } else if (index > 0) {
65697            containsMatch.push(suggestion);
65698          }
65699        }
65700      });
65701      _suggestions = startsWithMatch.concat(containsMatch);
65702    }
65703    return _suggestions.slice(0, _maxSuggestions);
65704  }
65705  function getSelectedSuggestion() {
65706    if (selectedSuggestionIndex !== -1) {
65707      return getMatchingSuggestions()[selectedSuggestionIndex];
65708    }
65709    return undefined;
65710  }
65711  function valueContainsToken(token) {
65712    return value.some(item => {
65713      return getTokenValue(token) === getTokenValue(item);
65714    });
65715  }
65716  function getIndexOfInput() {
65717    return value.length - inputOffsetFromEnd;
65718  }
65719  function isInputEmpty() {
65720    return incompleteTokenValue.length === 0;
65721  }
65722  function inputHasValidValue() {
65723    return saveTransform(incompleteTokenValue).length > 0;
65724  }
65725  function updateSuggestions(resetSelectedSuggestion = true) {
65726    const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
65727    const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
65728    const hasMatchingSuggestions = matchingSuggestions.length > 0;
65729    const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
65730    setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);
65731    if (resetSelectedSuggestion) {
65732      if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {
65733        setSelectedSuggestionIndex(0);
65734        setSelectedSuggestionScroll(true);
65735      } else {
65736        setSelectedSuggestionIndex(-1);
65737        setSelectedSuggestionScroll(false);
65738      }
65739    }
65740    if (inputHasMinimumChars) {
65741      const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
65742      (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.');
65743      debouncedSpeak(message, 'assertive');
65744    }
65745  }
65746  function renderTokensAndInput() {
65747    const components = value.map(renderToken);
65748    components.splice(getIndexOfInput(), 0, renderInput());
65749    return components;
65750  }
65751  function renderToken(token, index, tokens) {
65752    const _value = getTokenValue(token);
65753    const status = typeof token !== 'string' ? token.status : undefined;
65754    const termPosition = index + 1;
65755    const termsCount = tokens.length;
65756    return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, {
65757      key: 'token-' + _value
65758    }, (0,external_wp_element_namespaceObject.createElement)(Token, {
65759      value: _value,
65760      status: status,
65761      title: typeof token !== 'string' ? token.title : undefined,
65762      displayTransform: displayTransform,
65763      onClickRemove: onTokenClickRemove,
65764      isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless,
65765      onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined,
65766      onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined,
65767      disabled: 'error' !== status && disabled,
65768      messages: messages,
65769      termsCount: termsCount,
65770      termPosition: termPosition
65771    }));
65772  }
65773  function renderInput() {
65774    const inputProps = {
65775      instanceId,
65776      autoCapitalize,
65777      autoComplete,
65778      placeholder: value.length === 0 ? placeholder : '',
65779      key: 'input',
65780      disabled,
65781      value: incompleteTokenValue,
65782      onBlur,
65783      isExpanded,
65784      selectedSuggestionIndex
65785    };
65786    return (0,external_wp_element_namespaceObject.createElement)(token_input, {
65787      ...inputProps,
65788      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
65789      ref: input
65790    });
65791  }
65792  const classes = classnames_default()(className, 'components-form-token-field__input-container', {
65793    'is-active': isActive,
65794    'is-disabled': disabled
65795  });
65796  let tokenFieldProps = {
65797    className: 'components-form-token-field',
65798    tabIndex: -1
65799  };
65800  const matchingSuggestions = getMatchingSuggestions();
65801  if (!disabled) {
65802    tokenFieldProps = Object.assign({}, tokenFieldProps, {
65803      onKeyDown,
65804      onKeyPress,
65805      onFocus: onFocusHandler
65806    });
65807  }
65808
65809  // Disable reason: There is no appropriate role which describes the
65810  // input container intended accessible usability.
65811  // TODO: Refactor click detection to use blur to stop propagation.
65812  /* eslint-disable jsx-a11y/no-static-element-interactions */
65813  return (0,external_wp_element_namespaceObject.createElement)("div", {
65814    ...tokenFieldProps
65815  }, (0,external_wp_element_namespaceObject.createElement)(StyledLabel, {
65816    htmlFor: `components-form-token-input-${instanceId}`,
65817    className: "components-form-token-field__label"
65818  }, label), (0,external_wp_element_namespaceObject.createElement)("div", {
65819    ref: tokensAndInput,
65820    className: classes,
65821    tabIndex: -1,
65822    onMouseDown: onContainerTouched,
65823    onTouchStart: onContainerTouched
65824  }, (0,external_wp_element_namespaceObject.createElement)(TokensAndInputWrapperFlex, {
65825    justify: "flex-start",
65826    align: "center",
65827    gap: 1,
65828    wrap: true,
65829    __next40pxDefaultSize: __next40pxDefaultSize,
65830    hasTokens: !!value.length
65831  }, renderTokensAndInput()), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, {
65832    instanceId: instanceId,
65833    match: saveTransform(incompleteTokenValue),
65834    displayTransform: displayTransform,
65835    suggestions: matchingSuggestions,
65836    selectedIndex: selectedSuggestionIndex,
65837    scrollIntoView: selectedSuggestionScroll,
65838    onHover: onSuggestionHovered,
65839    onSelect: onSuggestionSelected,
65840    __experimentalRenderItem: __experimentalRenderItem
65841  })), !__nextHasNoMarginBottom && (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
65842    marginBottom: 2
65843  }), __experimentalShowHowTo && (0,external_wp_element_namespaceObject.createElement)(StyledHelp, {
65844    id: `components-form-token-suggestions-howto-${instanceId}`,
65845    className: "components-form-token-field__help",
65846    __nextHasNoMarginBottom: __nextHasNoMarginBottom
65847  }, tokenizeOnSpace ? (0,external_wp_i18n_namespaceObject.__)('Separate with commas, spaces, or the Enter key.') : (0,external_wp_i18n_namespaceObject.__)('Separate with commas or the Enter key.')));
65848  /* eslint-enable jsx-a11y/no-static-element-interactions */
65849}
65850
65851/* harmony default export */ const form_token_field = (FormTokenField);
65852
65853;// CONCATENATED MODULE: ./packages/components/build-module/guide/icons.js
65854
65855/**
65856 * WordPress dependencies
65857 */
65858
65859const PageControlIcon = () => (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
65860  width: "8",
65861  height: "8",
65862  fill: "none",
65863  xmlns: "http://www.w3.org/2000/svg"
65864}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Circle, {
65865  cx: "4",
65866  cy: "4",
65867  r: "4"
65868}));
65869
65870;// CONCATENATED MODULE: ./packages/components/build-module/guide/page-control.js
65871
65872/**
65873 * WordPress dependencies
65874 */
65875
65876
65877/**
65878 * Internal dependencies
65879 */
65880
65881
65882function PageControl({
65883  currentPage,
65884  numberOfPages,
65885  setCurrentPage
65886}) {
65887  return (0,external_wp_element_namespaceObject.createElement)("ul", {
65888    className: "components-guide__page-control",
65889    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls')
65890  }, Array.from({
65891    length: numberOfPages
65892  }).map((_, page) => (0,external_wp_element_namespaceObject.createElement)("li", {
65893    key: page
65894    // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
65895    ,
65896    "aria-current": page === currentPage ? 'step' : undefined
65897  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
65898    key: page,
65899    icon: (0,external_wp_element_namespaceObject.createElement)(PageControlIcon, null),
65900    "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */
65901    (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
65902    onClick: () => setCurrentPage(page)
65903  }))));
65904}
65905
65906;// CONCATENATED MODULE: ./packages/components/build-module/guide/index.js
65907
65908/**
65909 * External dependencies
65910 */
65911
65912
65913/**
65914 * WordPress dependencies
65915 */
65916
65917
65918
65919
65920/**
65921 * Internal dependencies
65922 */
65923
65924
65925
65926/**
65927 * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
65928 *
65929 * ```jsx
65930 * function MyTutorial() {
65931 * 	const [ isOpen, setIsOpen ] = useState( true );
65932 *
65933 * 	if ( ! isOpen ) {
65934 * 		return null;
65935 * 	}
65936 *
65937 * 	return (
65938 * 		<Guide
65939 * 			onFinish={ () => setIsOpen( false ) }
65940 * 			pages={ [
65941 * 				{
65942 * 					content: <p>Welcome to the ACME Store!</p>,
65943 * 				},
65944 * 				{
65945 * 					image: <img src="https://acmestore.com/add-to-cart.png" />,
65946 * 					content: (
65947 * 						<p>
65948 * 							Click <i>Add to Cart</i> to buy a product.
65949 * 						</p>
65950 * 					),
65951 * 				},
65952 * 			] }
65953 * 		/>
65954 * 	);
65955 * }
65956 * ```
65957 */
65958function Guide({
65959  children,
65960  className,
65961  contentLabel,
65962  finishButtonText = (0,external_wp_i18n_namespaceObject.__)('Finish'),
65963  onFinish,
65964  pages = []
65965}) {
65966  const ref = (0,external_wp_element_namespaceObject.useRef)(null);
65967  const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(0);
65968  (0,external_wp_element_namespaceObject.useEffect)(() => {
65969    // Place focus at the top of the guide on mount and when the page changes.
65970    const frame = ref.current?.querySelector('.components-guide');
65971    if (frame instanceof HTMLElement) {
65972      frame.focus();
65973    }
65974  }, [currentPage]);
65975  (0,external_wp_element_namespaceObject.useEffect)(() => {
65976    if (external_wp_element_namespaceObject.Children.count(children)) {
65977      external_wp_deprecated_default()('Passing children to <Guide>', {
65978        since: '5.5',
65979        alternative: 'the `pages` prop'
65980      });
65981    }
65982  }, [children]);
65983  if (external_wp_element_namespaceObject.Children.count(children)) {
65984    var _Children$map;
65985    pages = (_Children$map = external_wp_element_namespaceObject.Children.map(children, child => ({
65986      content: child
65987    }))) !== null && _Children$map !== void 0 ? _Children$map : [];
65988  }
65989  const canGoBack = currentPage > 0;
65990  const canGoForward = currentPage < pages.length - 1;
65991  const goBack = () => {
65992    if (canGoBack) {
65993      setCurrentPage(currentPage - 1);
65994    }
65995  };
65996  const goForward = () => {
65997    if (canGoForward) {
65998      setCurrentPage(currentPage + 1);
65999    }
66000  };
66001  if (pages.length === 0) {
66002    return null;
66003  }
66004  return (0,external_wp_element_namespaceObject.createElement)(modal, {
66005    className: classnames_default()('components-guide', className),
66006    contentLabel: contentLabel,
66007    isDismissible: pages.length > 1,
66008    onRequestClose: onFinish,
66009    onKeyDown: event => {
66010      if (event.code === 'ArrowLeft') {
66011        goBack();
66012        // Do not scroll the modal's contents.
66013        event.preventDefault();
66014      } else if (event.code === 'ArrowRight') {
66015        goForward();
66016        // Do not scroll the modal's contents.
66017        event.preventDefault();
66018      }
66019    },
66020    ref: ref
66021  }, (0,external_wp_element_namespaceObject.createElement)("div", {
66022    className: "components-guide__container"
66023  }, (0,external_wp_element_namespaceObject.createElement)("div", {
66024    className: "components-guide__page"
66025  }, pages[currentPage].image, pages.length > 1 && (0,external_wp_element_namespaceObject.createElement)(PageControl, {
66026    currentPage: currentPage,
66027    numberOfPages: pages.length,
66028    setCurrentPage: setCurrentPage
66029  }), pages[currentPage].content), (0,external_wp_element_namespaceObject.createElement)("div", {
66030    className: "components-guide__footer"
66031  }, canGoBack && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66032    className: "components-guide__back-button",
66033    variant: "tertiary",
66034    onClick: goBack
66035  }, (0,external_wp_i18n_namespaceObject.__)('Previous')), canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66036    className: "components-guide__forward-button",
66037    variant: "primary",
66038    onClick: goForward
66039  }, (0,external_wp_i18n_namespaceObject.__)('Next')), !canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66040    className: "components-guide__finish-button",
66041    variant: "primary",
66042    onClick: onFinish
66043  }, finishButtonText))));
66044}
66045/* harmony default export */ const guide = (Guide);
66046
66047;// CONCATENATED MODULE: ./packages/components/build-module/guide/page.js
66048
66049/**
66050 * WordPress dependencies
66051 */
66052
66053
66054
66055/**
66056 * Internal dependencies
66057 */
66058
66059function GuidePage(props) {
66060  (0,external_wp_element_namespaceObject.useEffect)(() => {
66061    external_wp_deprecated_default()('<GuidePage>', {
66062      since: '5.5',
66063      alternative: 'the `pages` prop in <Guide>'
66064    });
66065  }, []);
66066  return (0,external_wp_element_namespaceObject.createElement)("div", {
66067    ...props
66068  });
66069}
66070
66071;// CONCATENATED MODULE: ./packages/components/build-module/button/deprecated.js
66072
66073/**
66074 * External dependencies
66075 */
66076
66077/**
66078 * WordPress dependencies
66079 */
66080
66081
66082
66083/**
66084 * Internal dependencies
66085 */
66086
66087function UnforwardedIconButton({
66088  label,
66089  labelPosition,
66090  size,
66091  tooltip,
66092  ...props
66093}, ref) {
66094  external_wp_deprecated_default()('wp.components.IconButton', {
66095    since: '5.4',
66096    alternative: 'wp.components.Button',
66097    version: '6.2'
66098  });
66099  return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66100    ...props,
66101    ref: ref,
66102    tooltipPosition: labelPosition,
66103    iconSize: size,
66104    showTooltip: tooltip !== undefined ? !!tooltip : undefined,
66105    label: tooltip || label
66106  });
66107}
66108/* harmony default export */ const deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedIconButton));
66109
66110;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item/hook.js
66111/**
66112 * External dependencies
66113 */
66114
66115/**
66116 * WordPress dependencies
66117 */
66118
66119
66120/**
66121 * Internal dependencies
66122 */
66123
66124
66125
66126
66127
66128function hook_useItem(props) {
66129  const {
66130    as: asProp,
66131    className,
66132    onClick,
66133    role = 'listitem',
66134    size: sizeProp,
66135    ...otherProps
66136  } = useContextSystem(props, 'Item');
66137  const {
66138    spacedAround,
66139    size: contextSize
66140  } = useItemGroupContext();
66141  const size = sizeProp || contextSize;
66142  const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div');
66143  const cx = useCx();
66144  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx((as === 'button' || as === 'a') && unstyledButton(as), itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]);
66145  const wrapperClassName = cx(itemWrapper);
66146  return {
66147    as,
66148    className: classes,
66149    onClick,
66150    wrapperClassName,
66151    role,
66152    ...otherProps
66153  };
66154}
66155
66156;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item/component.js
66157
66158/**
66159 * External dependencies
66160 */
66161
66162/**
66163 * Internal dependencies
66164 */
66165
66166
66167
66168
66169function UnconnectedItem(props, forwardedRef) {
66170  const {
66171    role,
66172    wrapperClassName,
66173    ...otherProps
66174  } = hook_useItem(props);
66175  return (0,external_wp_element_namespaceObject.createElement)("div", {
66176    role: role,
66177    className: wrapperClassName
66178  }, (0,external_wp_element_namespaceObject.createElement)(component, {
66179    ...otherProps,
66180    ref: forwardedRef
66181  }));
66182}
66183
66184/**
66185 * `Item` is used in combination with `ItemGroup` to display a list of items
66186 * grouped and styled together.
66187 *
66188 * ```jsx
66189 * import {
66190 *   __experimentalItemGroup as ItemGroup,
66191 *   __experimentalItem as Item,
66192 * } from '@wordpress/components';
66193 *
66194 * function Example() {
66195 *   return (
66196 *     <ItemGroup>
66197 *       <Item>Code</Item>
66198 *       <Item>is</Item>
66199 *       <Item>Poetry</Item>
66200 *     </ItemGroup>
66201 *   );
66202 * }
66203 * ```
66204 */
66205const component_Item = contextConnect(UnconnectedItem, 'Item');
66206/* harmony default export */ const item_component = (component_Item);
66207
66208;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-prefix-wrapper.js
66209
66210/**
66211 * External dependencies
66212 */
66213
66214/**
66215 * Internal dependencies
66216 */
66217
66218
66219function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
66220  const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper');
66221  return (0,external_wp_element_namespaceObject.createElement)(spacer_component, {
66222    marginBottom: 0,
66223    ...derivedProps,
66224    ref: forwardedRef
66225  });
66226}
66227
66228/**
66229 * A convenience wrapper for the `prefix` when you want to apply
66230 * standard padding in accordance with the size variant.
66231 *
66232 * ```jsx
66233 * import {
66234 *   __experimentalInputControl as InputControl,
66235 *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
66236 * } from '@wordpress/components';
66237 *
66238 * <InputControl
66239 *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
66240 * />
66241 * ```
66242 */
66243const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
66244/* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper);
66245
66246;// CONCATENATED MODULE: ./packages/components/build-module/keyboard-shortcuts/index.js
66247
66248/**
66249 * WordPress dependencies
66250 */
66251
66252
66253
66254/**
66255 * Internal dependencies
66256 */
66257
66258function KeyboardShortcut({
66259  target,
66260  callback,
66261  shortcut,
66262  bindGlobal,
66263  eventName
66264}) {
66265  (0,external_wp_compose_namespaceObject.useKeyboardShortcut)(shortcut, callback, {
66266    bindGlobal,
66267    target,
66268    eventName
66269  });
66270  return null;
66271}
66272
66273/**
66274 * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.
66275 *
66276 * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.
66277 *
66278 * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.
66279 *
66280 * ```jsx
66281 * import { KeyboardShortcuts } from '@wordpress/components';
66282 * import { useState } from '@wordpress/element';
66283 *
66284 * const MyKeyboardShortcuts = () => {
66285 * 	const [ isAllSelected, setIsAllSelected ] = useState( false );
66286 * 	const selectAll = () => {
66287 * 		setIsAllSelected( true );
66288 * 	};
66289 *
66290 * 	return (
66291 * 		<div>
66292 * 			<KeyboardShortcuts
66293 * 				shortcuts={ {
66294 * 					'mod+a': selectAll,
66295 * 				} }
66296 * 			/>
66297 * 			[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
66298 * 		</div>
66299 * 	);
66300 * };
66301 * ```
66302 */
66303function KeyboardShortcuts({
66304  children,
66305  shortcuts,
66306  bindGlobal,
66307  eventName
66308}) {
66309  const target = (0,external_wp_element_namespaceObject.useRef)(null);
66310  const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => (0,external_wp_element_namespaceObject.createElement)(KeyboardShortcut, {
66311    key: shortcut,
66312    shortcut: shortcut,
66313    callback: callback,
66314    bindGlobal: bindGlobal,
66315    eventName: eventName,
66316    target: target
66317  }));
66318
66319  // Render as non-visual if there are no children pressed. Keyboard
66320  // events will be bound to the document instead.
66321  if (!external_wp_element_namespaceObject.Children.count(children)) {
66322    return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, element);
66323  }
66324  return (0,external_wp_element_namespaceObject.createElement)("div", {
66325    ref: target
66326  }, element, children);
66327}
66328/* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts);
66329
66330;// CONCATENATED MODULE: ./packages/components/build-module/menu-group/index.js
66331
66332/**
66333 * External dependencies
66334 */
66335
66336
66337/**
66338 * WordPress dependencies
66339 */
66340
66341
66342
66343/**
66344 * Internal dependencies
66345 */
66346
66347/**
66348 * `MenuGroup` wraps a series of related `MenuItem` components into a common
66349 * section.
66350 *
66351 * ```jsx
66352 * import { MenuGroup, MenuItem } from '@wordpress/components';
66353 *
66354 * const MyMenuGroup = () => (
66355 *   <MenuGroup label="Settings">
66356 *     <MenuItem>Setting 1</MenuItem>
66357 *     <MenuItem>Setting 2</MenuItem>
66358 *   </MenuGroup>
66359 * );
66360 * ```
66361 */
66362function MenuGroup(props) {
66363  const {
66364    children,
66365    className = '',
66366    label,
66367    hideSeparator
66368  } = props;
66369  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MenuGroup);
66370  if (!external_wp_element_namespaceObject.Children.count(children)) {
66371    return null;
66372  }
66373  const labelId = `components-menu-group-label-${instanceId}`;
66374  const classNames = classnames_default()(className, 'components-menu-group', {
66375    'has-hidden-separator': hideSeparator
66376  });
66377  return (0,external_wp_element_namespaceObject.createElement)("div", {
66378    className: classNames
66379  }, label && (0,external_wp_element_namespaceObject.createElement)("div", {
66380    className: "components-menu-group__label",
66381    id: labelId,
66382    "aria-hidden": "true"
66383  }, label), (0,external_wp_element_namespaceObject.createElement)("div", {
66384    role: "group",
66385    "aria-labelledby": label ? labelId : undefined
66386  }, children));
66387}
66388/* harmony default export */ const menu_group = (MenuGroup);
66389
66390;// CONCATENATED MODULE: ./packages/components/build-module/menu-item/index.js
66391
66392/**
66393 * External dependencies
66394 */
66395
66396
66397
66398/**
66399 * WordPress dependencies
66400 */
66401
66402
66403/**
66404 * Internal dependencies
66405 */
66406
66407
66408
66409function UnforwardedMenuItem(props, ref) {
66410  let {
66411    children,
66412    info,
66413    className,
66414    icon,
66415    iconPosition = 'right',
66416    shortcut,
66417    isSelected,
66418    role = 'menuitem',
66419    suffix,
66420    ...buttonProps
66421  } = props;
66422  className = classnames_default()('components-menu-item__button', className);
66423  if (info) {
66424    children = (0,external_wp_element_namespaceObject.createElement)("span", {
66425      className: "components-menu-item__info-wrapper"
66426    }, (0,external_wp_element_namespaceObject.createElement)("span", {
66427      className: "components-menu-item__item"
66428    }, children), (0,external_wp_element_namespaceObject.createElement)("span", {
66429      className: "components-menu-item__info"
66430    }, info));
66431  }
66432  if (icon && typeof icon !== 'string') {
66433    icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, {
66434      className: classnames_default()('components-menu-items__item-icon', {
66435        'has-icon-right': iconPosition === 'right'
66436      })
66437    });
66438  }
66439  return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66440    ref: ref
66441    // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
66442    ,
66443    "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,
66444    role: role,
66445    icon: iconPosition === 'left' ? icon : undefined,
66446    className: className,
66447    ...buttonProps
66448  }, (0,external_wp_element_namespaceObject.createElement)("span", {
66449    className: "components-menu-item__item"
66450  }, children), !suffix && (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, {
66451    className: "components-menu-item__shortcut",
66452    shortcut: shortcut
66453  }), !suffix && icon && iconPosition === 'right' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
66454    icon: icon
66455  }), suffix);
66456}
66457
66458/**
66459 * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
66460 *
66461 * ```jsx
66462 * import { MenuItem } from '@wordpress/components';
66463 * import { useState } from '@wordpress/element';
66464 *
66465 * const MyMenuItem = () => {
66466 * 	const [ isActive, setIsActive ] = useState( true );
66467 *
66468 * 	return (
66469 * 		<MenuItem
66470 * 			icon={ isActive ? 'yes' : 'no' }
66471 * 			isSelected={ isActive }
66472 * 			role="menuitemcheckbox"
66473 * 			onClick={ () => setIsActive( ( state ) => ! state ) }
66474 * 		>
66475 * 			Toggle
66476 * 		</MenuItem>
66477 * 	);
66478 * };
66479 * ```
66480 */
66481const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedMenuItem);
66482/* harmony default export */ const menu_item = (MenuItem);
66483
66484;// CONCATENATED MODULE: ./packages/components/build-module/menu-items-choice/index.js
66485
66486/**
66487 * WordPress dependencies
66488 */
66489
66490
66491/**
66492 * Internal dependencies
66493 */
66494
66495const menu_items_choice_noop = () => {};
66496
66497/**
66498 * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.
66499 *
66500 *
66501 * ```jsx
66502 * import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
66503 * import { useState } from '@wordpress/element';
66504 *
66505 * const MyMenuItemsChoice = () => {
66506 * 	const [ mode, setMode ] = useState( 'visual' );
66507 * 	const choices = [
66508 * 		{
66509 * 			value: 'visual',
66510 * 			label: 'Visual editor',
66511 * 		},
66512 * 		{
66513 * 			value: 'text',
66514 * 			label: 'Code editor',
66515 * 		},
66516 * 	];
66517 *
66518 * 	return (
66519 * 		<MenuGroup label="Editor">
66520 * 			<MenuItemsChoice
66521 * 				choices={ choices }
66522 * 				value={ mode }
66523 * 				onSelect={ ( newMode ) => setMode( newMode ) }
66524 * 			/>
66525 * 		</MenuGroup>
66526 * 	);
66527 * };
66528 * ```
66529 */
66530function MenuItemsChoice({
66531  choices = [],
66532  onHover = menu_items_choice_noop,
66533  onSelect,
66534  value
66535}) {
66536  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, choices.map(item => {
66537    const isSelected = value === item.value;
66538    return (0,external_wp_element_namespaceObject.createElement)(menu_item, {
66539      key: item.value,
66540      role: "menuitemradio",
66541      disabled: item.disabled,
66542      icon: isSelected ? library_check : null,
66543      info: item.info,
66544      isSelected: isSelected,
66545      shortcut: item.shortcut,
66546      className: "components-menu-items-choice",
66547      onClick: () => {
66548        if (!isSelected) {
66549          onSelect(item.value);
66550        }
66551      },
66552      onMouseEnter: () => onHover(item.value),
66553      onMouseLeave: () => onHover(null),
66554      "aria-label": item['aria-label']
66555    }, item.label);
66556  }));
66557}
66558/* harmony default export */ const menu_items_choice = (MenuItemsChoice);
66559
66560;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/tabbable.js
66561
66562/**
66563 * External dependencies
66564 */
66565
66566/**
66567 * WordPress dependencies
66568 */
66569
66570
66571/**
66572 * Internal dependencies
66573 */
66574
66575function UnforwardedTabbableContainer({
66576  eventToOffset,
66577  ...props
66578}, ref) {
66579  const innerEventToOffset = evt => {
66580    const {
66581      code,
66582      shiftKey
66583    } = evt;
66584    if ('Tab' === code) {
66585      return shiftKey ? -1 : 1;
66586    }
66587
66588    // Allow custom handling of keys besides Tab.
66589    //
66590    // By default, TabbableContainer will move focus forward on Tab and
66591    // backward on Shift+Tab. The handler below will be used for all other
66592    // events. The semantics for `eventToOffset`'s return
66593    // values are the following:
66594    //
66595    // - +1: move focus forward
66596    // - -1: move focus backward
66597    // -  0: don't move focus, but acknowledge event and thus stop it
66598    // - undefined: do nothing, let the event propagate.
66599    if (eventToOffset) {
66600      return eventToOffset(evt);
66601    }
66602    return undefined;
66603  };
66604  return (0,external_wp_element_namespaceObject.createElement)(container, {
66605    ref: ref,
66606    stopNavigationEvents: true,
66607    onlyBrowserTabstops: true,
66608    eventToOffset: innerEventToOffset,
66609    ...props
66610  });
66611}
66612
66613/**
66614 * A container for tabbable elements.
66615 *
66616 *  ```jsx
66617 *  import {
66618 *    TabbableContainer,
66619 *    Button,
66620 *  } from '@wordpress/components';
66621 *
66622 *  function onNavigate( index, target ) {
66623 *    console.log( `Navigates to ${ index }`, target );
66624 *  }
66625 *
66626 *  const MyTabbableContainer = () => (
66627 *    <div>
66628 *      <span>Tabbable Container:</span>
66629 *      <TabbableContainer onNavigate={ onNavigate }>
66630 *        <Button variant="secondary" tabIndex="0">
66631 *          Section 1
66632 *        </Button>
66633 *        <Button variant="secondary" tabIndex="0">
66634 *          Section 2
66635 *        </Button>
66636 *        <Button variant="secondary" tabIndex="0">
66637 *          Section 3
66638 *        </Button>
66639 *        <Button variant="secondary" tabIndex="0">
66640 *          Section 4
66641 *        </Button>
66642 *      </TabbableContainer>
66643 *    </div>
66644 *  );
66645 *  ```
66646 */
66647const TabbableContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabbableContainer);
66648/* harmony default export */ const tabbable = (TabbableContainer);
66649
66650;// CONCATENATED MODULE: ./packages/components/build-module/navigation/constants.js
66651const ROOT_MENU = 'root';
66652const SEARCH_FOCUS_DELAY = 100;
66653
66654;// CONCATENATED MODULE: ./packages/components/build-module/navigation/context.js
66655/**
66656 * WordPress dependencies
66657 */
66658
66659
66660/**
66661 * Internal dependencies
66662 */
66663
66664const context_noop = () => {};
66665const defaultIsEmpty = () => false;
66666const defaultGetter = () => undefined;
66667const NavigationContext = (0,external_wp_element_namespaceObject.createContext)({
66668  activeItem: undefined,
66669  activeMenu: ROOT_MENU,
66670  setActiveMenu: context_noop,
66671  navigationTree: {
66672    items: {},
66673    getItem: defaultGetter,
66674    addItem: context_noop,
66675    removeItem: context_noop,
66676    menus: {},
66677    getMenu: defaultGetter,
66678    addMenu: context_noop,
66679    removeMenu: context_noop,
66680    childMenu: {},
66681    traverseMenu: context_noop,
66682    isMenuEmpty: defaultIsEmpty
66683  }
66684});
66685const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext);
66686
66687;// CONCATENATED MODULE: ./packages/icons/build-module/library/search.js
66688
66689/**
66690 * WordPress dependencies
66691 */
66692
66693const search = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
66694  xmlns: "http://www.w3.org/2000/svg",
66695  viewBox: "0 0 24 24"
66696}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
66697  d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"
66698}));
66699/* harmony default export */ const library_search = (search);
66700
66701;// CONCATENATED MODULE: ./packages/components/build-module/search-control/index.js
66702
66703/**
66704 * External dependencies
66705 */
66706
66707
66708/**
66709 * WordPress dependencies
66710 */
66711
66712
66713
66714
66715
66716/**
66717 * Internal dependencies
66718 */
66719
66720
66721function UnforwardedSearchControl({
66722  __nextHasNoMarginBottom,
66723  __next40pxDefaultSize = false,
66724  className,
66725  onChange,
66726  onKeyDown,
66727  value,
66728  label,
66729  placeholder = (0,external_wp_i18n_namespaceObject.__)('Search'),
66730  hideLabelFromVision = true,
66731  help,
66732  onClose,
66733  size = 'default',
66734  ...restProps
66735}, forwardedRef) {
66736  const searchRef = (0,external_wp_element_namespaceObject.useRef)();
66737  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl);
66738  const id = `components-search-control-${instanceId}`;
66739  const renderRightButton = () => {
66740    if (onClose) {
66741      return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66742        __next40pxDefaultSize: __next40pxDefaultSize,
66743        icon: close_small,
66744        label: (0,external_wp_i18n_namespaceObject.__)('Close search'),
66745        onClick: onClose,
66746        size: size
66747      });
66748    }
66749    if (!!value) {
66750      return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
66751        __next40pxDefaultSize: __next40pxDefaultSize,
66752        icon: close_small,
66753        label: (0,external_wp_i18n_namespaceObject.__)('Reset search'),
66754        onClick: () => {
66755          onChange('');
66756          searchRef.current?.focus();
66757        },
66758        size: size
66759      });
66760    }
66761    return (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
66762      icon: library_search
66763    });
66764  };
66765  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
66766    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
66767    label: label,
66768    id: id,
66769    hideLabelFromVision: hideLabelFromVision,
66770    help: help,
66771    className: classnames_default()(className, 'components-search-control', {
66772      'is-next-40px-default-size': __next40pxDefaultSize,
66773      'is-size-compact': size === 'compact'
66774    })
66775  }, (0,external_wp_element_namespaceObject.createElement)("div", {
66776    className: "components-search-control__input-wrapper"
66777  }, (0,external_wp_element_namespaceObject.createElement)("input", {
66778    ...restProps,
66779    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]),
66780    className: "components-search-control__input",
66781    id: id,
66782    type: "search",
66783    placeholder: placeholder,
66784    onChange: event => onChange(event.target.value),
66785    onKeyDown: onKeyDown,
66786    autoComplete: "off",
66787    value: value || ''
66788  }), (0,external_wp_element_namespaceObject.createElement)("div", {
66789    className: "components-search-control__icon"
66790  }, renderRightButton())));
66791}
66792
66793/**
66794 * SearchControl components let users display a search control.
66795 *
66796 * ```jsx
66797 * import { SearchControl } from '@wordpress/components';
66798 * import { useState } from '@wordpress/element';
66799 *
66800 * function MySearchControl( { className, setState } ) {
66801 *   const [ searchInput, setSearchInput ] = useState( '' );
66802 *
66803 *   return (
66804 *     <SearchControl
66805 *       value={ searchInput }
66806 *       onChange={ setSearchInput }
66807 *     />
66808 *   );
66809 * }
66810 * ```
66811 */
66812const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSearchControl);
66813/* harmony default export */ const search_control = (SearchControl);
66814
66815;// CONCATENATED MODULE: ./packages/components/build-module/navigation/styles/navigation-styles.js
66816
66817function navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
66818/**
66819 * External dependencies
66820 */
66821
66822/**
66823 * WordPress dependencies
66824 */
66825
66826
66827/**
66828 * Internal dependencies
66829 */
66830
66831
66832
66833
66834
66835
66836
66837const NavigationUI = emotion_styled_base_browser_esm("div",  true ? {
66838  target: "eeiismy11"
66839} : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0));
66840const MenuUI = emotion_styled_base_browser_esm("div",  true ? {
66841  target: "eeiismy10"
66842} : 0)("margin-top:", space(6), ";margin-bottom:", space(6), ";display:flex;flex-direction:column;ul{padding:0;margin:0;list-style:none;}.components-navigation__back-button{margin-bottom:", space(6), ";}.components-navigation__group+.components-navigation__group{margin-top:", space(6), ";}" + ( true ? "" : 0));
66843const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
66844  target: "eeiismy9"
66845} : 0)( true ? {
66846  name: "26l0q2",
66847  styles: "&.is-tertiary{color:inherit;opacity:0.7;&:hover:not( :disabled ){opacity:1;box-shadow:none;color:inherit;}&:active:not( :disabled ){background:transparent;opacity:1;color:inherit;}}"
66848} : 0);
66849const MenuTitleUI = emotion_styled_base_browser_esm("div",  true ? {
66850  target: "eeiismy8"
66851} : 0)( true ? {
66852  name: "1aubja5",
66853  styles: "overflow:hidden;width:100%"
66854} : 0);
66855const MenuTitleActionsUI = emotion_styled_base_browser_esm("span",  true ? {
66856  target: "eeiismy7"
66857} : 0)("height:", space(6), ";.components-button.is-small{color:inherit;opacity:0.7;margin-right:", space(1), ";padding:0;&:active:not( :disabled ){background:none;opacity:1;color:inherit;}&:hover:not( :disabled ){box-shadow:none;opacity:1;color:inherit;}}" + ( true ? "" : 0));
66858const MenuTitleSearchUI = /*#__PURE__*/emotion_styled_base_browser_esm(search_control,  true ? {
66859  target: "eeiismy6"
66860} : 0)( true ? {
66861  name: "za3n3e",
66862  styles: "input[type='search'].components-search-control__input{margin:0;background:#303030;color:#fff;&:focus{background:#434343;color:#fff;}&::placeholder{color:rgba( 255, 255, 255, 0.6 );}}svg{fill:white;}.components-button.has-icon{padding:0;min-width:auto;}"
66863} : 0);
66864const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
66865  target: "eeiismy5"
66866} : 0)("min-height:", space(12), ";align-items:center;color:inherit;display:flex;justify-content:space-between;margin-bottom:", space(2), ";padding:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? `${space(1)} ${space(4)} ${space(1)} ${space(2)}` : `${space(1)} ${space(2)} ${space(1)} ${space(4)}`, ";" + ( true ? "" : 0));
66867const ItemBaseUI = emotion_styled_base_browser_esm("li",  true ? {
66868  target: "eeiismy4"
66869} : 0)("border-radius:2px;color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({
66870  textAlign: 'left'
66871}, {
66872  textAlign: 'right'
66873}), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";>button,>a{color:", COLORS.white, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0));
66874const ItemUI = emotion_styled_base_browser_esm("div",  true ? {
66875  target: "eeiismy3"
66876} : 0)("display:flex;align-items:center;height:auto;min-height:40px;margin:0;padding:", space(1.5), " ", space(4), ";font-weight:400;line-height:20px;width:100%;color:inherit;opacity:0.7;" + ( true ? "" : 0));
66877const ItemIconUI = emotion_styled_base_browser_esm("span",  true ? {
66878  target: "eeiismy2"
66879} : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0));
66880const ItemBadgeUI = emotion_styled_base_browser_esm("span",  true ? {
66881  target: "eeiismy1"
66882} : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:2px;animation:fade-in 250ms ease-out;@keyframes fade-in{from{opacity:0;}to{opacity:1;}}", reduceMotion('animation'), ";" + ( true ? "" : 0));
66883const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
66884  target: "eeiismy0"
66885} : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0));
66886
66887;// CONCATENATED MODULE: ./packages/components/build-module/navigation/use-navigation-tree-nodes.js
66888/**
66889 * WordPress dependencies
66890 */
66891
66892function useNavigationTreeNodes() {
66893  const [nodes, setNodes] = (0,external_wp_element_namespaceObject.useState)({});
66894  const getNode = key => nodes[key];
66895  const addNode = (key, value) => {
66896    const {
66897      children,
66898      ...newNode
66899    } = value;
66900    return setNodes(original => ({
66901      ...original,
66902      [key]: newNode
66903    }));
66904  };
66905  const removeNode = key => {
66906    return setNodes(original => {
66907      const {
66908        [key]: removedNode,
66909        ...remainingNodes
66910      } = original;
66911      return remainingNodes;
66912    });
66913  };
66914  return {
66915    nodes,
66916    getNode,
66917    addNode,
66918    removeNode
66919  };
66920}
66921
66922;// CONCATENATED MODULE: ./packages/components/build-module/navigation/use-create-navigation-tree.js
66923/**
66924 * WordPress dependencies
66925 */
66926
66927
66928/**
66929 * Internal dependencies
66930 */
66931
66932const useCreateNavigationTree = () => {
66933  const {
66934    nodes: items,
66935    getNode: getItem,
66936    addNode: addItem,
66937    removeNode: removeItem
66938  } = useNavigationTreeNodes();
66939  const {
66940    nodes: menus,
66941    getNode: getMenu,
66942    addNode: addMenu,
66943    removeNode: removeMenu
66944  } = useNavigationTreeNodes();
66945
66946  /**
66947   * Stores direct nested menus of menus
66948   * This makes it easy to traverse menu tree
66949   *
66950   * Key is the menu prop of the menu
66951   * Value is an array of menu keys
66952   */
66953  const [childMenu, setChildMenu] = (0,external_wp_element_namespaceObject.useState)({});
66954  const getChildMenu = menu => childMenu[menu] || [];
66955  const traverseMenu = (startMenu, callback) => {
66956    const visited = [];
66957    let queue = [startMenu];
66958    let current;
66959    while (queue.length > 0) {
66960      // Type cast to string is safe because of the `length > 0` check above.
66961      current = getMenu(queue.shift());
66962      if (!current || visited.includes(current.menu)) {
66963        continue;
66964      }
66965      visited.push(current.menu);
66966      queue = [...queue, ...getChildMenu(current.menu)];
66967      if (callback(current) === false) {
66968        break;
66969      }
66970    }
66971  };
66972  const isMenuEmpty = menuToCheck => {
66973    let isEmpty = true;
66974    traverseMenu(menuToCheck, current => {
66975      if (!current.isEmpty) {
66976        isEmpty = false;
66977        return false;
66978      }
66979      return undefined;
66980    });
66981    return isEmpty;
66982  };
66983  return {
66984    items,
66985    getItem,
66986    addItem,
66987    removeItem,
66988    menus,
66989    getMenu,
66990    addMenu: (key, value) => {
66991      setChildMenu(state => {
66992        const newState = {
66993          ...state
66994        };
66995        if (!value.parentMenu) {
66996          return newState;
66997        }
66998        if (!newState[value.parentMenu]) {
66999          newState[value.parentMenu] = [];
67000        }
67001        newState[value.parentMenu].push(key);
67002        return newState;
67003      });
67004      addMenu(key, value);
67005    },
67006    removeMenu,
67007    childMenu,
67008    traverseMenu,
67009    isMenuEmpty
67010  };
67011};
67012
67013;// CONCATENATED MODULE: ./packages/components/build-module/navigation/index.js
67014
67015/**
67016 * External dependencies
67017 */
67018
67019
67020/**
67021 * WordPress dependencies
67022 */
67023
67024
67025
67026/**
67027 * Internal dependencies
67028 */
67029
67030
67031
67032
67033
67034const navigation_noop = () => {};
67035
67036/**
67037 * Render a navigation list with optional groupings and hierarchy.
67038 *
67039 * ```jsx
67040 * import {
67041 *   __experimentalNavigation as Navigation,
67042 *   __experimentalNavigationGroup as NavigationGroup,
67043 *   __experimentalNavigationItem as NavigationItem,
67044 *   __experimentalNavigationMenu as NavigationMenu,
67045 * } from '@wordpress/components';
67046 *
67047 * const MyNavigation = () => (
67048 *   <Navigation>
67049 *     <NavigationMenu title="Home">
67050 *       <NavigationGroup title="Group 1">
67051 *         <NavigationItem item="item-1" title="Item 1" />
67052 *         <NavigationItem item="item-2" title="Item 2" />
67053 *       </NavigationGroup>
67054 *       <NavigationGroup title="Group 2">
67055 *         <NavigationItem
67056 *           item="item-3"
67057 *           navigateToMenu="category"
67058 *           title="Category"
67059 *         />
67060 *       </NavigationGroup>
67061 *     </NavigationMenu>
67062 *
67063 *     <NavigationMenu
67064 *       backButtonLabel="Home"
67065 *       menu="category"
67066 *       parentMenu="root"
67067 *       title="Category"
67068 *     >
67069 *       <NavigationItem badge="1" item="child-1" title="Child 1" />
67070 *       <NavigationItem item="child-2" title="Child 2" />
67071 *     </NavigationMenu>
67072 *   </Navigation>
67073 * );
67074 * ```
67075 */
67076function Navigation({
67077  activeItem,
67078  activeMenu = ROOT_MENU,
67079  children,
67080  className,
67081  onActivateMenu = navigation_noop
67082}) {
67083  const [menu, setMenu] = (0,external_wp_element_namespaceObject.useState)(activeMenu);
67084  const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)();
67085  const navigationTree = useCreateNavigationTree();
67086  const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left';
67087  const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => {
67088    if (!navigationTree.getMenu(menuId)) {
67089      return;
67090    }
67091    setSlideOrigin(slideInOrigin);
67092    setMenu(menuId);
67093    onActivateMenu(menuId);
67094  };
67095
67096  // Used to prevent the sliding animation on mount
67097  const isMounted = (0,external_wp_element_namespaceObject.useRef)(false);
67098  (0,external_wp_element_namespaceObject.useEffect)(() => {
67099    if (!isMounted.current) {
67100      isMounted.current = true;
67101    }
67102  }, []);
67103  (0,external_wp_element_namespaceObject.useEffect)(() => {
67104    if (activeMenu !== menu) {
67105      setActiveMenu(activeMenu);
67106    }
67107    // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
67108    // See https://github.com/WordPress/gutenberg/pull/41612 for context.
67109    // eslint-disable-next-line react-hooks/exhaustive-deps
67110  }, [activeMenu]);
67111  const context = {
67112    activeItem,
67113    activeMenu: menu,
67114    setActiveMenu,
67115    navigationTree
67116  };
67117  const classes = classnames_default()('components-navigation', className);
67118  const animateClassName = getAnimateClassName({
67119    type: 'slide-in',
67120    origin: slideOrigin
67121  });
67122  return (0,external_wp_element_namespaceObject.createElement)(NavigationUI, {
67123    className: classes
67124  }, (0,external_wp_element_namespaceObject.createElement)("div", {
67125    key: menu,
67126    className: animateClassName ? classnames_default()({
67127      [animateClassName]: isMounted.current && slideOrigin
67128    }) : undefined
67129  }, (0,external_wp_element_namespaceObject.createElement)(NavigationContext.Provider, {
67130    value: context
67131  }, children)));
67132}
67133/* harmony default export */ const navigation = (Navigation);
67134
67135;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-right.js
67136
67137/**
67138 * WordPress dependencies
67139 */
67140
67141const chevronRight = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
67142  xmlns: "http://www.w3.org/2000/svg",
67143  viewBox: "0 0 24 24"
67144}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
67145  d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
67146}));
67147/* harmony default export */ const chevron_right = (chevronRight);
67148
67149;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-left.js
67150
67151/**
67152 * WordPress dependencies
67153 */
67154
67155const chevronLeft = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
67156  xmlns: "http://www.w3.org/2000/svg",
67157  viewBox: "0 0 24 24"
67158}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
67159  d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
67160}));
67161/* harmony default export */ const chevron_left = (chevronLeft);
67162
67163;// CONCATENATED MODULE: ./packages/components/build-module/navigation/back-button/index.js
67164
67165/**
67166 * External dependencies
67167 */
67168
67169/**
67170 * WordPress dependencies
67171 */
67172
67173
67174
67175
67176/**
67177 * Internal dependencies
67178 */
67179
67180
67181function UnforwardedNavigationBackButton({
67182  backButtonLabel,
67183  className,
67184  href,
67185  onClick,
67186  parentMenu
67187}, ref) {
67188  const {
67189    setActiveMenu,
67190    navigationTree
67191  } = useNavigationContext();
67192  const classes = classnames_default()('components-navigation__back-button', className);
67193  const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;
67194  const handleOnClick = event => {
67195    if (typeof onClick === 'function') {
67196      onClick(event);
67197    }
67198    const animationDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right';
67199    if (parentMenu && !event.defaultPrevented) {
67200      setActiveMenu(parentMenu, animationDirection);
67201    }
67202  };
67203  const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left;
67204  return (0,external_wp_element_namespaceObject.createElement)(MenuBackButtonUI, {
67205    className: classes,
67206    href: href,
67207    variant: "tertiary",
67208    ref: ref,
67209    onClick: handleOnClick
67210  }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
67211    icon: icon
67212  }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back'));
67213}
67214const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton);
67215/* harmony default export */ const back_button = (NavigationBackButton);
67216
67217;// CONCATENATED MODULE: ./packages/components/build-module/navigation/group/context.js
67218/**
67219 * WordPress dependencies
67220 */
67221
67222
67223/**
67224 * Internal dependencies
67225 */
67226
67227const NavigationGroupContext = (0,external_wp_element_namespaceObject.createContext)({
67228  group: undefined
67229});
67230const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext);
67231
67232;// CONCATENATED MODULE: ./packages/components/build-module/navigation/group/index.js
67233
67234/**
67235 * External dependencies
67236 */
67237
67238
67239/**
67240 * WordPress dependencies
67241 */
67242
67243
67244/**
67245 * Internal dependencies
67246 */
67247
67248
67249
67250let uniqueId = 0;
67251function NavigationGroup({
67252  children,
67253  className,
67254  title
67255}) {
67256  const [groupId] = (0,external_wp_element_namespaceObject.useState)(`group-${++uniqueId}`);
67257  const {
67258    navigationTree: {
67259      items
67260    }
67261  } = useNavigationContext();
67262  const context = {
67263    group: groupId
67264  };
67265
67266  // Keep the children rendered to make sure invisible items are included in the navigation tree.
67267  if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
67268    return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, {
67269      value: context
67270    }, children);
67271  }
67272  const groupTitleId = `components-navigation__group-title-${groupId}`;
67273  const classes = classnames_default()('components-navigation__group', className);
67274  return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, {
67275    value: context
67276  }, (0,external_wp_element_namespaceObject.createElement)("li", {
67277    className: classes
67278  }, title && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, {
67279    className: "components-navigation__group-title",
67280    id: groupTitleId,
67281    level: 3
67282  }, title), (0,external_wp_element_namespaceObject.createElement)("ul", {
67283    "aria-labelledby": groupTitleId,
67284    role: "group"
67285  }, children)));
67286}
67287/* harmony default export */ const group = (NavigationGroup);
67288
67289;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/base-content.js
67290
67291/**
67292 * Internal dependencies
67293 */
67294
67295function NavigationItemBaseContent(props) {
67296  const {
67297    badge,
67298    title
67299  } = props;
67300  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, title && (0,external_wp_element_namespaceObject.createElement)(ItemTitleUI, {
67301    className: "components-navigation__item-title",
67302    as: "span"
67303  }, title), badge && (0,external_wp_element_namespaceObject.createElement)(ItemBadgeUI, {
67304    className: "components-navigation__item-badge"
67305  }, badge));
67306}
67307
67308;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/context.js
67309/**
67310 * WordPress dependencies
67311 */
67312
67313
67314/**
67315 * Internal dependencies
67316 */
67317
67318const NavigationMenuContext = (0,external_wp_element_namespaceObject.createContext)({
67319  menu: undefined,
67320  search: ''
67321});
67322const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext);
67323
67324;// CONCATENATED MODULE: ./packages/components/build-module/navigation/utils.js
67325/**
67326 * External dependencies
67327 */
67328
67329
67330// @see packages/block-editor/src/components/inserter/search-items.js
67331const normalizeInput = input => remove_accents_default()(input).replace(/^\//, '').toLowerCase();
67332const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search));
67333
67334;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/use-navigation-tree-item.js
67335/**
67336 * WordPress dependencies
67337 */
67338
67339
67340/**
67341 * Internal dependencies
67342 */
67343
67344
67345
67346
67347const useNavigationTreeItem = (itemId, props) => {
67348  const {
67349    activeMenu,
67350    navigationTree: {
67351      addItem,
67352      removeItem
67353    }
67354  } = useNavigationContext();
67355  const {
67356    group
67357  } = useNavigationGroupContext();
67358  const {
67359    menu,
67360    search
67361  } = useNavigationMenuContext();
67362  (0,external_wp_element_namespaceObject.useEffect)(() => {
67363    const isMenuActive = activeMenu === menu;
67364    const isItemVisible = !search || props.title !== undefined && normalizedSearch(props.title, search);
67365    addItem(itemId, {
67366      ...props,
67367      group,
67368      menu,
67369      _isVisible: isMenuActive && isItemVisible
67370    });
67371    return () => {
67372      removeItem(itemId);
67373    };
67374    // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
67375    // eslint-disable-next-line react-hooks/exhaustive-deps
67376  }, [activeMenu, search]);
67377};
67378
67379;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/base.js
67380
67381/**
67382 * External dependencies
67383 */
67384
67385
67386/**
67387 * WordPress dependencies
67388 */
67389
67390
67391/**
67392 * Internal dependencies
67393 */
67394
67395
67396
67397let base_uniqueId = 0;
67398function NavigationItemBase(props) {
67399  // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
67400  const {
67401    children,
67402    className,
67403    title,
67404    href,
67405    ...restProps
67406  } = props;
67407  const [itemId] = (0,external_wp_element_namespaceObject.useState)(`item-${++base_uniqueId}`);
67408  useNavigationTreeItem(itemId, props);
67409  const {
67410    navigationTree
67411  } = useNavigationContext();
67412  if (!navigationTree.getItem(itemId)?._isVisible) {
67413    return null;
67414  }
67415  const classes = classnames_default()('components-navigation__item', className);
67416  return (0,external_wp_element_namespaceObject.createElement)(ItemBaseUI, {
67417    className: classes,
67418    ...restProps
67419  }, children);
67420}
67421
67422;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/index.js
67423
67424/**
67425 * External dependencies
67426 */
67427
67428
67429/**
67430 * WordPress dependencies
67431 */
67432
67433
67434
67435/**
67436 * Internal dependencies
67437 */
67438
67439
67440
67441
67442
67443const item_noop = () => {};
67444function NavigationItem(props) {
67445  const {
67446    badge,
67447    children,
67448    className,
67449    href,
67450    item,
67451    navigateToMenu,
67452    onClick = item_noop,
67453    title,
67454    icon,
67455    hideIfTargetMenuEmpty,
67456    isText,
67457    ...restProps
67458  } = props;
67459  const {
67460    activeItem,
67461    setActiveMenu,
67462    navigationTree: {
67463      isMenuEmpty
67464    }
67465  } = useNavigationContext();
67466
67467  // If hideIfTargetMenuEmpty prop is true
67468  // And the menu we are supposed to navigate to
67469  // Is marked as empty, then we skip rendering the item.
67470  if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) {
67471    return null;
67472  }
67473  const isActive = item && activeItem === item;
67474  const classes = classnames_default()(className, {
67475    'is-active': isActive
67476  });
67477  const onItemClick = event => {
67478    if (navigateToMenu) {
67479      setActiveMenu(navigateToMenu);
67480    }
67481    onClick(event);
67482  };
67483  const navigationIcon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right;
67484  const baseProps = children ? props : {
67485    ...props,
67486    onClick: undefined
67487  };
67488  const itemProps = isText ? restProps : {
67489    as: build_module_button,
67490    href,
67491    onClick: onItemClick,
67492    'aria-current': isActive ? 'page' : undefined,
67493    ...restProps
67494  };
67495  return (0,external_wp_element_namespaceObject.createElement)(NavigationItemBase, {
67496    ...baseProps,
67497    className: classes
67498  }, children || (0,external_wp_element_namespaceObject.createElement)(ItemUI, {
67499    ...itemProps
67500  }, icon && (0,external_wp_element_namespaceObject.createElement)(ItemIconUI, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
67501    icon: icon
67502  })), (0,external_wp_element_namespaceObject.createElement)(NavigationItemBaseContent, {
67503    title: title,
67504    badge: badge
67505  }), navigateToMenu && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
67506    icon: navigationIcon
67507  })));
67508}
67509/* harmony default export */ const navigation_item = (NavigationItem);
67510
67511;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/use-navigation-tree-menu.js
67512/**
67513 * WordPress dependencies
67514 */
67515
67516
67517/**
67518 * Internal dependencies
67519 */
67520
67521
67522const useNavigationTreeMenu = props => {
67523  const {
67524    navigationTree: {
67525      addMenu,
67526      removeMenu
67527    }
67528  } = useNavigationContext();
67529  const key = props.menu || ROOT_MENU;
67530  (0,external_wp_element_namespaceObject.useEffect)(() => {
67531    addMenu(key, {
67532      ...props,
67533      menu: key
67534    });
67535    return () => {
67536      removeMenu(key);
67537    };
67538    // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
67539    // eslint-disable-next-line react-hooks/exhaustive-deps
67540  }, []);
67541};
67542
67543;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-spoken-messages/index.js
67544
67545/**
67546 * WordPress dependencies
67547 */
67548
67549
67550
67551/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
67552
67553/**
67554 * A Higher Order Component used to be provide speak and debounced speak
67555 * functions.
67556 *
67557 * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
67558 *
67559 * @param {WPComponent} Component The component to be wrapped.
67560 *
67561 * @return {WPComponent} The wrapped component.
67562 */
67563/* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => (0,external_wp_element_namespaceObject.createElement)(Component, {
67564  ...props,
67565  speak: external_wp_a11y_namespaceObject.speak,
67566  debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500)
67567}), 'withSpokenMessages'));
67568
67569;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/menu-title-search.js
67570
67571/**
67572 * WordPress dependencies
67573 */
67574
67575
67576
67577/**
67578 * Internal dependencies
67579 */
67580
67581
67582
67583
67584
67585function MenuTitleSearch({
67586  debouncedSpeak,
67587  onCloseSearch,
67588  onSearch,
67589  search,
67590  title
67591}) {
67592  const {
67593    navigationTree: {
67594      items
67595    }
67596  } = useNavigationContext();
67597  const {
67598    menu
67599  }
67599 = useNavigationMenuContext();
67600  const inputRef = (0,external_wp_element_namespaceObject.useRef)(null);
67601
67602  // Wait for the slide-in animation to complete before autofocusing the input.
67603  // This prevents scrolling to the input during the animation.
67604  (0,external_wp_element_namespaceObject.useEffect)(() => {
67605    const delayedFocus = setTimeout(() => {
67606      inputRef.current?.focus();
67607    }, SEARCH_FOCUS_DELAY);
67608    return () => {
67609      clearTimeout(delayedFocus);
67610    };
67611  }, []);
67612  (0,external_wp_element_namespaceObject.useEffect)(() => {
67613    if (!search) {
67614      return;
67615    }
67616    const count = Object.values(items).filter(item => item._isVisible).length;
67617    const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
67618    (0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count);
67619    debouncedSpeak(resultsFoundMessage);
67620    // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
67621    // eslint-disable-next-line react-hooks/exhaustive-deps
67622  }, [items, search]);
67623  const onClose = () => {
67624    onSearch?.('');
67625    onCloseSearch();
67626  };
67627  const onKeyDown = event => {
67628    if (event.code === 'Escape' && !event.defaultPrevented) {
67629      event.preventDefault();
67630      onClose();
67631    }
67632  };
67633  const inputId = `components-navigation__menu-title-search-${menu}`;
67634  const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: placeholder for menu search box. %s: menu title */
67635  (0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim();
67636  return (0,external_wp_element_namespaceObject.createElement)("div", {
67637    className: "components-navigation__menu-title-search"
67638  }, (0,external_wp_element_namespaceObject.createElement)(MenuTitleSearchUI, {
67639    autoComplete: "off",
67640    className: "components-navigation__menu-search-input",
67641    id: inputId,
67642    onChange: value => onSearch?.(value),
67643    onKeyDown: onKeyDown,
67644    placeholder: placeholder,
67645    onClose: onClose,
67646    ref: inputRef,
67647    type: "search",
67648    value: search
67649  }));
67650}
67651/* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch));
67652
67653;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/menu-title.js
67654
67655/**
67656 * WordPress dependencies
67657 */
67658
67659
67660
67661
67662/**
67663 * Internal dependencies
67664 */
67665
67666
67667
67668
67669
67670
67671function NavigationMenuTitle({
67672  hasSearch,
67673  onSearch,
67674  search,
67675  title,
67676  titleAction
67677}) {
67678  const [isSearching, setIsSearching] = (0,external_wp_element_namespaceObject.useState)(false);
67679  const {
67680    menu
67681  } = useNavigationMenuContext();
67682  const searchButtonRef = (0,external_wp_element_namespaceObject.useRef)(null);
67683  if (!title) {
67684    return null;
67685  }
67686  const onCloseSearch = () => {
67687    setIsSearching(false);
67688
67689    // Wait for the slide-in animation to complete before focusing the search button.
67690    // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
67691    setTimeout(() => {
67692      searchButtonRef.current?.focus();
67693    }, SEARCH_FOCUS_DELAY);
67694  };
67695  const menuTitleId = `components-navigation__menu-title-${menu}`;
67696  /* translators: search button label for menu search box. %s: menu title */
67697  const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title);
67698  return (0,external_wp_element_namespaceObject.createElement)(MenuTitleUI, {
67699    className: "components-navigation__menu-title"
67700  }, !isSearching && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, {
67701    as: "h2",
67702    className: "components-navigation__menu-title-heading",
67703    level: 3
67704  }, (0,external_wp_element_namespaceObject.createElement)("span", {
67705    id: menuTitleId
67706  }, title), (hasSearch || titleAction) && (0,external_wp_element_namespaceObject.createElement)(MenuTitleActionsUI, null, titleAction, hasSearch && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
67707    isSmall: true,
67708    variant: "tertiary",
67709    label: searchButtonLabel,
67710    onClick: () => setIsSearching(true),
67711    ref: searchButtonRef
67712  }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
67713    icon: library_search
67714  })))), isSearching && (0,external_wp_element_namespaceObject.createElement)("div", {
67715    className: getAnimateClassName({
67716      type: 'slide-in',
67717      origin: 'left'
67718    })
67719  }, (0,external_wp_element_namespaceObject.createElement)(menu_title_search, {
67720    onCloseSearch: onCloseSearch,
67721    onSearch: onSearch,
67722    search: search,
67723    title: title
67724  })));
67725}
67726
67727;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/search-no-results-found.js
67728
67729/**
67730 * WordPress dependencies
67731 */
67732
67733
67734/**
67735 * Internal dependencies
67736 */
67737
67738
67739function NavigationSearchNoResultsFound({
67740  search
67741}) {
67742  const {
67743    navigationTree: {
67744      items
67745    }
67746  } = useNavigationContext();
67747  const resultsCount = Object.values(items).filter(item => item._isVisible).length;
67748  if (!search || !!resultsCount) {
67749    return null;
67750  }
67751  return (0,external_wp_element_namespaceObject.createElement)(ItemBaseUI, null, (0,external_wp_element_namespaceObject.createElement)(ItemUI, null, (0,external_wp_i18n_namespaceObject.__)('No results found.'), " "));
67752}
67753
67754;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/index.js
67755
67756/**
67757 * External dependencies
67758 */
67759
67760
67761/**
67762 * WordPress dependencies
67763 */
67764
67765
67766/**
67767 * Internal dependencies
67768 */
67769
67770
67771
67772
67773
67774
67775
67776
67777
67778function NavigationMenu(props) {
67779  const {
67780    backButtonLabel,
67781    children,
67782    className,
67783    hasSearch,
67784    menu = ROOT_MENU,
67785    onBackButtonClick,
67786    onSearch: setControlledSearch,
67787    parentMenu,
67788    search: controlledSearch,
67789    isSearchDebouncing,
67790    title,
67791    titleAction
67792  } = props;
67793  const [uncontrolledSearch, setUncontrolledSearch] = (0,external_wp_element_namespaceObject.useState)('');
67794  useNavigationTreeMenu(props);
67795  const {
67796    activeMenu
67797  } = useNavigationContext();
67798  const context = {
67799    menu,
67800    search: uncontrolledSearch
67801  };
67802
67803  // Keep the children rendered to make sure invisible items are included in the navigation tree.
67804  if (activeMenu !== menu) {
67805    return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, {
67806      value: context
67807    }, children);
67808  }
67809  const isControlledSearch = !!setControlledSearch;
67810  const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
67811  const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
67812  const menuTitleId = `components-navigation__menu-title-${menu}`;
67813  const classes = classnames_default()('components-navigation__menu', className);
67814  return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, {
67815    value: context
67816  }, (0,external_wp_element_namespaceObject.createElement)(MenuUI, {
67817    className: classes
67818  }, (parentMenu || onBackButtonClick) && (0,external_wp_element_namespaceObject.createElement)(back_button, {
67819    backButtonLabel: backButtonLabel,
67820    parentMenu: parentMenu,
67821    onClick: onBackButtonClick
67822  }), title && (0,external_wp_element_namespaceObject.createElement)(NavigationMenuTitle, {
67823    hasSearch: hasSearch,
67824    onSearch: onSearch,
67825    search: search,
67826    title: title,
67827    titleAction: titleAction
67828  }), (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, null, (0,external_wp_element_namespaceObject.createElement)("ul", {
67829    "aria-labelledby": menuTitleId
67830  }, children, search && !isSearchDebouncing && (0,external_wp_element_namespaceObject.createElement)(NavigationSearchNoResultsFound, {
67831    search: search
67832  })))));
67833}
67834/* harmony default export */ const navigation_menu = (NavigationMenu);
67835
67836;// CONCATENATED MODULE: ./packages/components/build-module/navigator/context.js
67837/**
67838 * WordPress dependencies
67839 */
67840
67841
67842/**
67843 * Internal dependencies
67844 */
67845
67846const initialContextValue = {
67847  location: {},
67848  goTo: () => {},
67849  goBack: () => {},
67850  goToParent: () => {},
67851  addScreen: () => {},
67852  removeScreen: () => {},
67853  params: {}
67854};
67855const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue);
67856
67857;// CONCATENATED MODULE: ./packages/components/node_modules/path-to-regexp/dist.es2015/index.js
67858/**
67859 * Tokenize input string.
67860 */
67861function lexer(str) {
67862    var tokens = [];
67863    var i = 0;
67864    while (i < str.length) {
67865        var char = str[i];
67866        if (char === "*" || char === "+" || char === "?") {
67867            tokens.push({ type: "MODIFIER", index: i, value: str[i++] });
67868            continue;
67869        }
67870        if (char === "\\") {
67871            tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] });
67872            continue;
67873        }
67874        if (char === "{") {
67875            tokens.push({ type: "OPEN", index: i, value: str[i++] });
67876            continue;
67877        }
67878        if (char === "}") {
67879            tokens.push({ type: "CLOSE", index: i, value: str[i++] });
67880            continue;
67881        }
67882        if (char === ":") {
67883            var name = "";
67884            var j = i + 1;
67885            while (j < str.length) {
67886                var code = str.charCodeAt(j);
67887                if (
67888                // `0-9`
67889                (code >= 48 && code <= 57) ||
67890                    // `A-Z`
67891                    (code >= 65 && code <= 90) ||
67892                    // `a-z`
67893                    (code >= 97 && code <= 122) ||
67894                    // `_`
67895                    code === 95) {
67896                    name += str[j++];
67897                    continue;
67898                }
67899                break;
67900            }
67901            if (!name)
67902                throw new TypeError("Missing parameter name at ".concat(i));
67903            tokens.push({ type: "NAME", index: i, value: name });
67904            i = j;
67905            continue;
67906        }
67907        if (char === "(") {
67908            var count = 1;
67909            var pattern = "";
67910            var j = i + 1;
67911            if (str[j] === "?") {
67912                throw new TypeError("Pattern cannot start with \"?\" at ".concat(j));
67913            }
67914            while (j < str.length) {
67915                if (str[j] === "\\") {
67916                    pattern += str[j++] + str[j++];
67917                    continue;
67918                }
67919                if (str[j] === ")") {
67920                    count--;
67921                    if (count === 0) {
67922                        j++;
67923                        break;
67924                    }
67925                }
67926                else if (str[j] === "(") {
67927                    count++;
67928                    if (str[j + 1] !== "?") {
67929                        throw new TypeError("Capturing groups are not allowed at ".concat(j));
67930                    }
67931                }
67932                pattern += str[j++];
67933            }
67934            if (count)
67935                throw new TypeError("Unbalanced pattern at ".concat(i));
67936            if (!pattern)
67937                throw new TypeError("Missing pattern at ".concat(i));
67938            tokens.push({ type: "PATTERN", index: i, value: pattern });
67939            i = j;
67940            continue;
67941        }
67942        tokens.push({ type: "CHAR", index: i, value: str[i++] });
67943    }
67944    tokens.push({ type: "END", index: i, value: "" });
67945    return tokens;
67946}
67947/**
67948 * Parse a string for the raw tokens.
67949 */
67950function dist_es2015_parse(str, options) {
67951    if (options === void 0) { options = {}; }
67952    var tokens = lexer(str);
67953    var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a;
67954    var defaultPattern = "[^".concat(escapeString(options.delimiter || "/#?"), "]+?");
67955    var result = [];
67956    var key = 0;
67957    var i = 0;
67958    var path = "";
67959    var tryConsume = function (type) {
67960        if (i < tokens.length && tokens[i].type === type)
67961            return tokens[i++].value;
67962    };
67963    var mustConsume = function (type) {
67964        var value = tryConsume(type);
67965        if (value !== undefined)
67966            return value;
67967        var _a = tokens[i], nextType = _a.type, index = _a.index;
67968        throw new TypeError("Unexpected ".concat(nextType, " at ").concat(index, ", expected ").concat(type));
67969    };
67970    var consumeText = function () {
67971        var result = "";
67972        var value;
vendor: 5,216 bytes, lines 67973-68111
67973        while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) {
67974            result += value;
67975        }
67976        return result;
67977    };
67978    while (i < tokens.length) {
67979        var char = tryConsume("CHAR");
67980        var name = tryConsume("NAME");
67981        var pattern = tryConsume("PATTERN");
67982        if (name || pattern) {
67983            var prefix = char || "";
67984            if (prefixes.indexOf(prefix) === -1) {
67985                path += prefix;
67986                prefix = "";
67987            }
67988            if (path) {
67989                result.push(path);
67990                path = "";
67991            }
67992            result.push({
67993                name: name || key++,
67994                prefix: prefix,
67995                suffix: "",
67996                pattern: pattern || defaultPattern,
67997                modifier: tryConsume("MODIFIER") || "",
67998            });
67999            continue;
68000        }
68001        var value = char || tryConsume("ESCAPED_CHAR");
68002        if (value) {
68003            path += value;
68004            continue;
68005        }
68006        if (path) {
68007            result.push(path);
68008            path = "";
68009        }
68010        var open = tryConsume("OPEN");
68011        if (open) {
68012            var prefix = consumeText();
68013            var name_1 = tryConsume("NAME") || "";
68014            var pattern_1 = tryConsume("PATTERN") || "";
68015            var suffix = consumeText();
68016            mustConsume("CLOSE");
68017            result.push({
68018                name: name_1 || (pattern_1 ? key++ : ""),
68019                pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1,
68020                prefix: prefix,
68021                suffix: suffix,
68022                modifier: tryConsume("MODIFIER") || "",
68023            });
68024            continue;
68025        }
68026        mustConsume("END");
68027    }
68028    return result;
68029}
68030/**
68031 * Compile a string to a template function for the path.
68032 */
68033function dist_es2015_compile(str, options) {
68034    return tokensToFunction(dist_es2015_parse(str, options), options);
68035}
68036/**
68037 * Expose a method for transforming tokens into the path function.
68038 */
68039function tokensToFunction(tokens, options) {
68040    if (options === void 0) { options = {}; }
68041    var reFlags = flags(options);
68042    var _a = options.encode, encode = _a === void 0 ? function (x) { return x; } : _a, _b = options.validate, validate = _b === void 0 ? true : _b;
68043    // Compile all the tokens into regexps.
68044    var matches = tokens.map(function (token) {
68045        if (typeof token === "object") {
68046            return new RegExp("^(?:".concat(token.pattern, ")$"), reFlags);
68047        }
68048    });
68049    return function (data) {
68050        var path = "";
68051        for (var i = 0; i < tokens.length; i++) {
68052            var token = tokens[i];
68053            if (typeof token === "string") {
68054                path += token;
68055                continue;
68056            }
68057            var value = data ? data[token.name] : undefined;
68058            var optional = token.modifier === "?" || token.modifier === "*";
68059            var repeat = token.modifier === "*" || token.modifier === "+";
68060            if (Array.isArray(value)) {
68061                if (!repeat) {
68062                    throw new TypeError("Expected \"".concat(token.name, "\" to not repeat, but got an array"));
68063                }
68064                if (value.length === 0) {
68065                    if (optional)
68066                        continue;
68067                    throw new TypeError("Expected \"".concat(token.name, "\" to not be empty"));
68068                }
68069                for (var j = 0; j < value.length; j++) {
68070                    var segment = encode(value[j], token);
68071                    if (validate && !matches[i].test(segment)) {
68072                        throw new TypeError("Expected all \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
68073                    }
68074                    path += token.prefix + segment + token.suffix;
68075                }
68076                continue;
68077            }
68078            if (typeof value === "string" || typeof value === "number") {
68079                var segment = encode(String(value), token);
68080                if (validate && !matches[i].test(segment)) {
68081                    throw new TypeError("Expected \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
68082                }
68083                path += token.prefix + segment + token.suffix;
68084                continue;
68085            }
68086            if (optional)
68087                continue;
68088            var typeOfMessage = repeat ? "an array" : "a string";
68089            throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage));
68090        }
68091        return path;
68092    };
68093}
68094/**
68095 * Create path match function from `path-to-regexp` spec.
68096 */
68097function dist_es2015_match(str, options) {
68098    var keys = [];
68099    var re = pathToRegexp(str, keys, options);
68100    return regexpToFunction(re, keys, options);
68101}
68102/**
68103 * Create a path match function from `path-to-regexp` output.
68104 */
68105function regexpToFunction(re, keys, options) {
68106    if (options === void 0) { options = {}; }
68107    var _a = options.decode, decode = _a === void 0 ? function (x) { return x; } : _a;
68108    return function (pathname) {
68109        var m = re.exec(pathname);
68110        if (!m)
68111            return false;
68112        var path = m[0], index = m.index;
68113        var params = Object.create(null);
68114        var _loop_1 = function (i) {
68115            if (m[i] === undefined)
68116                return "continue";
68117            var key = keys[i - 1];
68118            if (key.modifier === "*" || key.modifier === "+") {
68119                params[key.name] = m[i].split(key.prefix + key.suffix).map(function (value) {
68120                    return decode(value, key);
68121                });
68122            }
68123            else {
68124                params[key.name] = decode(m[i], key);
68125            }
68126        };
68127        for (var i = 1; i < m.length; i++) {
68128            _loop_1(i);
68129        }
68130        return { path: path, index: index, params: params };
68131    };
68132}
68133/**
68134 * Escape a regular expression string.
68135 */
68136function escapeString(str) {
68137    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
68138}
68139/**
68140 * Get the flags for a regexp from the options.
68141 */
68142function flags(options) {
68143    return options && options.sensitive ? "" : "i";
68144}
68145/**
68146 * Pull out keys from a regexp.
68147 */
68148function regexpToRegexp(path, keys) {
68149    if (!keys)
68150        return path;
68151    var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g;
68152    var index = 0;
68153    var execResult = groupsRegex.exec(path.source);
68154    while (execResult) {
68155        keys.push({
68156            // Use parenthesized substring match if available, index otherwise
68157            name: execResult[1] || index++,
68158            prefix: "",
68159            suffix: "",
68160            modifier: "",
68161            pattern: "",
68162        });
68163        execResult = groupsRegex.exec(path.source);
68164    }
68165    return path;
68166}
68167/**
68168 * Transform an array into a regexp.
68169 */
68170function arrayToRegexp(paths, keys, options) {
68171    var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; });
68172    return new RegExp("(?:".concat(parts.join("|"), ")"), flags(options));
68173}
68174/**
68175 * Create a path regexp from string input.
68176 */
68177function stringToRegexp(path, keys, options) {
68178    return tokensToRegexp(dist_es2015_parse(path, options), keys, options);
68179}
68180/**
68181 * Expose a function for taking tokens and returning a RegExp.
68182 */
68183function tokensToRegexp(tokens, keys, options) {
68184    if (options === void 0) { options = {}; }
68185    var _a = options.strict, strict = _a === void 0 ? false : _a, _b = options.start, start = _b === void 0 ? true : _b, _c = options.end, end = _c === void 0 ? true : _c, _d = options.encode, encode = _d === void 0 ? function (x) { return x; } : _d, _e = options.delimiter, delimiter = _e === void 0 ? "/#?" : _e, _f = options.endsWith, endsWith = _f === void 0 ? "" : _f;
68186    var endsWithRe = "[".concat(escapeString(endsWith), "]|$");
68187    var delimiterRe = "[".concat(escapeString(delimiter), "]");
68188    var route = start ? "^" : "";
68189    // Iterate over the tokens and create our regexp string.
68190    for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
68191        var token = tokens_1[_i];
68192        if (typeof token === "string") {
68193            route += escapeString(encode(token));
68194        }
68195        else {
68196            var prefix = escapeString(encode(token.prefix));
68197            var suffix = escapeString(encode(token.suffix));
68198            if (token.pattern) {
68199                if (keys)
68200                    keys.push(token);
68201                if (prefix || suffix) {
68202                    if (token.modifier === "+" || token.modifier === "*") {
68203                        var mod = token.modifier === "*" ? "?" : "";
68204                        route += "(?:".concat(prefix, "((?:").concat(token.pattern, ")(?:").concat(suffix).concat(prefix, "(?:").concat(token.pattern, "))*)").concat(suffix, ")").concat(mod);
68205                    }
68206                    else {
68207                        route += "(?:".concat(prefix, "(").concat(token.pattern, ")").concat(suffix, ")").concat(token.modifier);
68208                    }
68209                }
68210                else {
68211                    if (token.modifier === "+" || token.modifier === "*") {
68212                        route += "((?:".concat(token.pattern, ")").concat(token.modifier, ")");
68213                    }
68214                    else {
68215                        route += "(".concat(token.pattern, ")").concat(token.modifier);
68216                    }
68217                }
68218            }
68219            else {
68220                route += "(?:".concat(prefix).concat(suffix, ")").concat(token.modifier);
68221            }
68222        }
68223    }
68224    if (end) {
68225        if (!strict)
68226            route += "".concat(delimiterRe, "?");
68227        route += !options.endsWith ? "$" : "(?=".concat(endsWithRe, ")");
68228    }
68229    else {
68230        var endToken = tokens[tokens.length - 1];
68231        var isEndDelimited = typeof endToken === "string"
68232            ? delimiterRe.indexOf(endToken[endToken.length - 1]) > -1
68233            : endToken === undefined;
68234        if (!strict) {
68235            route += "(?:".concat(delimiterRe, "(?=").concat(endsWithRe, "))?");
68236        }
68237        if (!isEndDelimited) {
68238            route += "(?=".concat(delimiterRe, "|").concat(endsWithRe, ")");
68239        }
68240    }
68241    return new RegExp(route, flags(options));
68242}
68243/**
68244 * Normalize the given path string, returning a regular expression.
68245 *
68246 * An empty array can be passed in for the keys, which will hold the
68247 * placeholder key descriptions. For example, using `/user/:id`, `keys` will
68248 * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
68249 */
68250function pathToRegexp(path, keys, options) {
68251    if (path instanceof RegExp)
68252        return regexpToRegexp(path, keys);
68253    if (Array.isArray(path))
68254        return arrayToRegexp(path, keys, options);
68255    return stringToRegexp(path, keys, options);
68256}
68257
68258;// CONCATENATED MODULE: ./packages/components/build-module/navigator/utils/router.js
68259/**
68260 * External dependencies
68261 */
68262
68263
68264/**
68265 * Internal dependencies
68266 */
68267
68268function matchPath(path, pattern) {
68269  const matchingFunction = dist_es2015_match(pattern, {
68270    decode: decodeURIComponent
68271  });
68272  return matchingFunction(path);
68273}
68274function patternMatch(path, screens) {
68275  for (const screen of screens) {
68276    const matched = matchPath(path, screen.path);
68277    if (matched) {
68278      return {
68279        params: matched.params,
68280        id: screen.id
68281      };
68282    }
68283  }
68284  return undefined;
68285}
68286function findParent(path, screens) {
68287  if (!path.startsWith('/')) {
68288    return undefined;
68289  }
68290  const pathParts = path.split('/');
68291  let parentPath;
68292  while (pathParts.length > 1 && parentPath === undefined) {
68293    pathParts.pop();
68294    const potentialParentPath = pathParts.join('/') === '' ? '/' : pathParts.join('/');
68295    if (screens.find(screen => {
68296      return matchPath(potentialParentPath, screen.path) !== false;
68297    })) {
68298      parentPath = potentialParentPath;
68299    }
68300  }
68301  return parentPath;
68302}
68303
68304;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-provider/component.js
68305
68306function component_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)."; }
68307/**
68308 * External dependencies
68309 */
68310
68311
68312
68313/**
68314 * WordPress dependencies
68315 */
68316
68317
68318
68319/**
68320 * Internal dependencies
68321 */
68322
68323
68324
68325
68326
68327
68328const MAX_HISTORY_LENGTH = 50;
68329function screensReducer(state = [], action) {
68330  switch (action.type) {
68331    case 'add':
68332      return [...state, action.screen];
68333    case 'remove':
68334      return state.filter(s => s.id !== action.screen.id);
68335  }
68336  return state;
68337}
68338var component_ref =  true ? {
68339  name: "15bx5k",
68340  styles: "overflow-x:hidden"
68341} : 0;
68342function UnconnectedNavigatorProvider(props, forwardedRef) {
68343  const {
68344    initialPath,
68345    children,
68346    className,
68347    ...otherProps
68348  } = useContextSystem(props, 'NavigatorProvider');
68349  const [locationHistory, setLocationHistory] = (0,external_wp_element_namespaceObject.useState)([{
68350    path: initialPath
68351  }]);
68352  const currentLocationHistory = (0,external_wp_element_namespaceObject.useRef)([]);
68353  const [screens, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(screensReducer, []);
68354  const currentScreens = (0,external_wp_element_namespaceObject.useRef)([]);
68355  (0,external_wp_element_namespaceObject.useEffect)(() => {
68356    currentScreens.current = screens;
68357  }, [screens]);
68358  (0,external_wp_element_namespaceObject.useEffect)(() => {
68359    currentLocationHistory.current = locationHistory;
68360  }, [locationHistory]);
68361  const currentMatch = (0,external_wp_element_namespaceObject.useRef)();
68362  const matchedPath = (0,external_wp_element_namespaceObject.useMemo)(() => {
68363    let currentPath;
68364    if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) {
68365      currentMatch.current = undefined;
68366      return undefined;
68367    }
68368    const resolvePath = path => {
68369      const newMatch = patternMatch(path, screens);
68370
68371      // If the new match is the same as the current match,
68372      // return the previous one for performance reasons.
68373      if (currentMatch.current && newMatch && external_wp_isShallowEqual_default()(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) {
68374        return currentMatch.current;
68375      }
68376      return newMatch;
68377    };
68378    const newMatch = resolvePath(currentPath);
68379    currentMatch.current = newMatch;
68380    return newMatch;
68381  }, [screens, locationHistory]);
68382  const addScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({
68383    type: 'add',
68384    screen
68385  }), []);
68386  const removeScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({
68387    type: 'remove',
68388    screen
68389  }), []);
68390  const goBack = (0,external_wp_element_namespaceObject.useCallback)(() => {
68391    setLocationHistory(prevLocationHistory => {
68392      if (prevLocationHistory.length <= 1) {
68393        return prevLocationHistory;
68394      }
68395      return [...prevLocationHistory.slice(0, -2), {
68396        ...prevLocationHistory[prevLocationHistory.length - 2],
68397        isBack: true,
68398        hasRestoredFocus: false
68399      }];
68400    });
68401  }, []);
68402  const goTo = (0,external_wp_element_namespaceObject.useCallback)((path, options = {}) => {
68403    const {
68404      focusTargetSelector,
68405      isBack = false,
68406      skipFocus = false,
68407      replace = false,
68408      ...restOptions
68409    } = options;
68410    const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path;
68411    if (isNavigatingToPreviousPath) {
68412      goBack();
68413      return;
68414    }
68415    setLocationHistory(prevLocationHistory => {
68416      const newLocation = {
68417        ...restOptions,
68418        path,
68419        isBack,
68420        hasRestoredFocus: false,
68421        skipFocus
68422      };
68423      if (prevLocationHistory.length === 0) {
68424        return replace ? [] : [newLocation];
68425      }
68426      const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
68427      if (!replace) {
68428        newLocationHistory.push(
68429        // Assign `focusTargetSelector` to the previous location in history
68430        // (the one we just navigated from).
68431        {
68432          ...prevLocationHistory[prevLocationHistory.length - 1],
68433          focusTargetSelector
68434        });
68435      }
68436      newLocationHistory.push(newLocation);
68437      return newLocationHistory;
68438    });
68439  }, [goBack]);
68440  const goToParent = (0,external_wp_element_namespaceObject.useCallback)((options = {}) => {
68441    const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path;
68442    if (currentPath === undefined) {
68443      return;
68444    }
68445    const parentPath = findParent(currentPath, currentScreens.current);
68446    if (parentPath === undefined) {
68447      return;
68448    }
68449    goTo(parentPath, {
68450      ...options,
68451      isBack: true
68452    });
68453  }, [goTo]);
68454  const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
68455    location: {
68456      ...locationHistory[locationHistory.length - 1],
68457      isInitial: locationHistory.length === 1
68458    },
68459    params: matchedPath ? matchedPath.params : {},
68460    match: matchedPath ? matchedPath.id : undefined,
68461    goTo,
68462    goBack,
68463    goToParent,
68464    addScreen,
68465    removeScreen
68466  }), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]);
68467  const cx = useCx();
68468  const classes = (0,external_wp_element_namespaceObject.useMemo)(
68469  // Prevents horizontal overflow while animating screen transitions.
68470  () => cx(component_ref, className), [className, cx]);
68471  return (0,external_wp_element_namespaceObject.createElement)(component, {
68472    ref: forwardedRef,
68473    className: classes,
68474    ...otherProps
68475  }, (0,external_wp_element_namespaceObject.createElement)(NavigatorContext.Provider, {
68476    value: navigatorContextValue
68477  }, children));
68478}
68479
68480/**
68481 * The `NavigatorProvider` component allows rendering nested views/panels/menus
68482 * (via the `NavigatorScreen` component and navigate between these different
68483 * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
68484 * `useNavigator` hook).
68485 *
68486 * ```jsx
68487 * import {
68488 *   __experimentalNavigatorProvider as NavigatorProvider,
68489 *   __experimentalNavigatorScreen as NavigatorScreen,
68490 *   __experimentalNavigatorButton as NavigatorButton,
68491 *   __experimentalNavigatorBackButton as NavigatorBackButton,
68492 * } from '@wordpress/components';
68493 *
68494 * const MyNavigation = () => (
68495 *   <NavigatorProvider initialPath="/">
68496 *     <NavigatorScreen path="/">
68497 *       <p>This is the home screen.</p>
68498 *        <NavigatorButton path="/child">
68499 *          Navigate to child screen.
68500 *       </NavigatorButton>
68501 *     </NavigatorScreen>
68502 *
68503 *     <NavigatorScreen path="/child">
68504 *       <p>This is the child screen.</p>
68505 *       <NavigatorBackButton>
68506 *         Go back
68507 *       </NavigatorBackButton>
68508 *     </NavigatorScreen>
68509 *   </NavigatorProvider>
68510 * );
68511 * ```
68512 */
68513const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
68514/* harmony default export */ const navigator_provider_component = (NavigatorProvider);
68515
68516;
68516// CONCATENATED MODULE: external ["wp","escapeHtml"]
68517const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
68518;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-screen/component.js
68519
68520function navigator_screen_component_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)."; }
68521/**
68522 * External dependencies
68523 */
68524
68525// eslint-disable-next-line no-restricted-imports
68526
68527// eslint-disable-next-line no-restricted-imports
68528
68529
68530
68531/**
68532 * WordPress dependencies
68533 */
68534
68535
68536
68537
68538
68539
68540/**
68541 * Internal dependencies
68542 */
68543
68544
68545
68546
68547
68548const animationEnterDelay = 0;
68549const animationEnterDuration = 0.14;
68550const animationExitDuration = 0.14;
68551const animationExitDelay = 0;
68552
68553// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
68554// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
68555var navigator_screen_component_ref =  true ? {
68556  name: "14x3t6z",
68557  styles: "overflow-x:auto;max-height:100%"
68558} : 0;
68559function UnconnectedNavigatorScreen(props, forwardedRef) {
68560  const screenId = (0,external_wp_element_namespaceObject.useId)();
68561  const {
68562    children,
68563    className,
68564    path,
68565    ...otherProps
68566  } = useContextSystem(props, 'NavigatorScreen');
68567  const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
68568  const {
68569    location,
68570    match,
68571    addScreen,
68572    removeScreen
68573  } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
68574  const isMatch = match === screenId;
68575  const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null);
68576  (0,external_wp_element_namespaceObject.useEffect)(() => {
68577    const screen = {
68578      id: screenId,
68579      path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path)
68580    };
68581    addScreen(screen);
68582    return () => removeScreen(screen);
68583  }, [screenId, path, addScreen, removeScreen]);
68584  const cx = useCx();
68585  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigator_screen_component_ref, className), [className, cx]);
68586  const locationRef = (0,external_wp_element_namespaceObject.useRef)(location);
68587  (0,external_wp_element_namespaceObject.useEffect)(() => {
68588    locationRef.current = location;
68589  }, [location]);
68590
68591  // Focus restoration
68592  const isInitialLocation = location.isInitial && !location.isBack;
68593  (0,external_wp_element_namespaceObject.useEffect)(() => {
68594    // Only attempt to restore focus:
68595    // - if the current location is not the initial one (to avoid moving focus on page load)
68596    // - when the screen becomes visible
68597    // - if the wrapper ref has been assigned
68598    // - if focus hasn't already been restored for the current location
68599    // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
68600    if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) {
68601      return;
68602    }
68603    const activeElement = wrapperRef.current.ownerDocument.activeElement;
68604
68605    // If an element is already focused within the wrapper do not focus the
68606    // element. This prevents inputs or buttons from losing focus unnecessarily.
68607    if (wrapperRef.current.contains(activeElement)) {
68608      return;
68609    }
68610    let elementToFocus = null;
68611
68612    // When navigating back, if a selector is provided, use it to look for the
68613    // target element (assumed to be a node inside the current NavigatorScreen)
68614    if (location.isBack && location?.focusTargetSelector) {
68615      elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector);
68616    }
68617
68618    // If the previous query didn't run or find any element to focus, fallback
68619    // to the first tabbable element in the screen (or the screen itself).
68620    if (!elementToFocus) {
68621      const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current)[0];
68622      elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
68623    }
68624    locationRef.current.hasRestoredFocus = true;
68625    elementToFocus.focus();
68626  }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]);
68627  const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]);
68628  if (!isMatch) {
68629    return null;
68630  }
68631  if (prefersReducedMotion) {
68632    return (0,external_wp_element_namespaceObject.createElement)(component, {
68633      ref: mergedWrapperRef,
68634      className: classes,
68635      ...otherProps
68636    }, children);
68637  }
68638  const animate = {
68639    opacity: 1,
68640    transition: {
68641      delay: animationEnterDelay,
68642      duration: animationEnterDuration,
68643      ease: 'easeInOut'
68644    },
68645    x: 0
68646  };
68647  // Disable the initial animation if the screen is the very first screen to be
68648  // rendered within the current `NavigatorProvider`.
68649  const initial = location.isInitial && !location.isBack ? false : {
68650    opacity: 0,
68651    x: (0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || !(0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50
68652  };
68653  const exit = {
68654    delay: animationExitDelay,
68655    opacity: 0,
68656    x: !(0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || (0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50,
68657    transition: {
68658      duration: animationExitDuration,
68659      ease: 'easeInOut'
68660    }
68661  };
68662  const animatedProps = {
68663    animate,
68664    exit,
68665    initial
68666  };
68667  return (0,external_wp_element_namespaceObject.createElement)(motion.div, {
68668    ref: mergedWrapperRef,
68669    className: classes,
68670    ...otherProps,
68671    ...animatedProps
68672  }, children);
68673}
68674
68675/**
68676 * The `NavigatorScreen` component represents a single view/screen/panel and
68677 * should be used in combination with the `NavigatorProvider`, the
68678 * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
68679 * hook).
68680 *
68681 * @example
68682 * ```jsx
68683 * import {
68684 *   __experimentalNavigatorProvider as NavigatorProvider,
68685 *   __experimentalNavigatorScreen as NavigatorScreen,
68686 *   __experimentalNavigatorButton as NavigatorButton,
68687 *   __experimentalNavigatorBackButton as NavigatorBackButton,
68688 * } from '@wordpress/components';
68689 *
68690 * const MyNavigation = () => (
68691 *   <NavigatorProvider initialPath="/">
68692 *     <NavigatorScreen path="/">
68693 *       <p>This is the home screen.</p>
68694 *        <NavigatorButton path="/child">
68695 *          Navigate to child screen.
68696 *       </NavigatorButton>
68697 *     </NavigatorScreen>
68698 *
68699 *     <NavigatorScreen path="/child">
68700 *       <p>This is the child screen.</p>
68701 *       <NavigatorBackButton>
68702 *         Go back
68703 *       </NavigatorBackButton>
68704 *     </NavigatorScreen>
68705 *   </NavigatorProvider>
68706 * );
68707 * ```
68708 */
68709const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen');
68710/* harmony default export */ const navigator_screen_component = (NavigatorScreen);
68711
68712;// CONCATENATED MODULE: ./packages/components/build-module/navigator/use-navigator.js
68713/**
68714 * WordPress dependencies
68715 */
68716
68717
68718/**
68719 * Internal dependencies
68720 */
68721
68722/**
68723 * Retrieves a `navigator` instance.
68724 */
68725function useNavigator() {
68726  const {
68727    location,
68728    params,
68729    goTo,
68730    goBack,
68731    goToParent
68732  } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
68733  return {
68734    location,
68735    goTo,
68736    goBack,
68737    goToParent,
68738    params
68739  };
68740}
68741/* harmony default export */ const use_navigator = (useNavigator);
68742
68743;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-button/hook.js
68744/**
68745 * WordPress dependencies
68746 */
68747
68748
68749
68750/**
68751 * Internal dependencies
68752 */
68753
68754
68755
68756
68757const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
68758function useNavigatorButton(props) {
68759  const {
68760    path,
68761    onClick,
68762    as = build_module_button,
68763    attributeName = 'id',
68764    ...otherProps
68765  } = useContextSystem(props, 'NavigatorButton');
68766  const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path);
68767  const {
68768    goTo
68769  } = use_navigator();
68770  const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
68771    e.preventDefault();
68772    goTo(escapedPath, {
68773      focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
68774    });
68775    onClick?.(e);
68776  }, [goTo, onClick, attributeName, escapedPath]);
68777  return {
68778    as,
68779    onClick: handleClick,
68780    ...otherProps,
68781    [attributeName]: escapedPath
68782  };
68783}
68784
68785;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-button/component.js
68786
68787/**
68788 * External dependencies
68789 */
68790
68791/**
68792 * Internal dependencies
68793 */
68794
68795
68796
68797
68798function UnconnectedNavigatorButton(props, forwardedRef) {
68799  const navigatorButtonProps = useNavigatorButton(props);
68800  return (0,external_wp_element_namespaceObject.createElement)(component, {
68801    ref: forwardedRef,
68802    ...navigatorButtonProps
68803  });
68804}
68805
68806/**
68807 * The `NavigatorButton` component can be used to navigate to a screen and should
68808 * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
68809 * and the `NavigatorBackButton` components (or the `useNavigator` hook).
68810 *
68811 * @example
68812 * ```jsx
68813 * import {
68814 *   __experimentalNavigatorProvider as NavigatorProvider,
68815 *   __experimentalNavigatorScreen as NavigatorScreen,
68816 *   __experimentalNavigatorButton as NavigatorButton,
68817 *   __experimentalNavigatorBackButton as NavigatorBackButton,
68818 * } from '@wordpress/components';
68819 *
68820 * const MyNavigation = () => (
68821 *   <NavigatorProvider initialPath="/">
68822 *     <NavigatorScreen path="/">
68823 *       <p>This is the home screen.</p>
68824 *        <NavigatorButton path="/child">
68825 *          Navigate to child screen.
68826 *       </NavigatorButton>
68827 *     </NavigatorScreen>
68828 *
68829 *     <NavigatorScreen path="/child">
68830 *       <p>This is the child screen.</p>
68831 *       <NavigatorBackButton>
68832 *         Go back
68833 *       </NavigatorBackButton>
68834 *     </NavigatorScreen>
68835 *   </NavigatorProvider>
68836 * );
68837 * ```
68838 */
68839const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton');
68840/* harmony default export */ const navigator_button_component = (NavigatorButton);
68841
68842;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-back-button/hook.js
68843/**
68844 * WordPress dependencies
68845 */
68846
68847
68848/**
68849 * Internal dependencies
68850 */
68851
68852
68853
68854
68855function useNavigatorBackButton(props) {
68856  const {
68857    onClick,
68858    as = build_module_button,
68859    goToParent: goToParentProp = false,
68860    ...otherProps
68861  } = useContextSystem(props, 'NavigatorBackButton');
68862  const {
68863    goBack,
68864    goToParent
68865  } = use_navigator();
68866  const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
68867    e.preventDefault();
68868    if (goToParentProp) {
68869      goToParent();
68870    } else {
68871      goBack();
68872    }
68873    onClick?.(e);
68874  }, [goToParentProp, goToParent, goBack, onClick]);
68875  return {
68876    as,
68877    onClick: handleClick,
68878    ...otherProps
68879  };
68880}
68881
68882;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-back-button/component.js
68883
68884/**
68885 * External dependencies
68886 */
68887
68888/**
68889 * Internal dependencies
68890 */
68891
68892
68893
68894
68895function UnconnectedNavigatorBackButton(props, forwardedRef) {
68896  const navigatorBackButtonProps = useNavigatorBackButton(props);
68897  return (0,external_wp_element_namespaceObject.createElement)(component, {
68898    ref: forwardedRef,
68899    ...navigatorBackButtonProps
68900  });
68901}
68902
68903/**
68904 * The `NavigatorBackButton` component can be used to navigate to a screen and
68905 * should be used in combination with the `NavigatorProvider`, the
68906 * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
68907 * hook).
68908 *
68909 * @example
68910 * ```jsx
68911 * import {
68912 *   __experimentalNavigatorProvider as NavigatorProvider,
68913 *   __experimentalNavigatorScreen as NavigatorScreen,
68914 *   __experimentalNavigatorButton as NavigatorButton,
68915 *   __experimentalNavigatorBackButton as NavigatorBackButton,
68916 * } from '@wordpress/components';
68917 *
68918 * const MyNavigation = () => (
68919 *   <NavigatorProvider initialPath="/">
68920 *     <NavigatorScreen path="/">
68921 *       <p>This is the home screen.</p>
68922 *        <NavigatorButton path="/child">
68923 *          Navigate to child screen.
68924 *       </NavigatorButton>
68925 *     </NavigatorScreen>
68926 *
68927 *     <NavigatorScreen path="/child">
68928 *       <p>This is the child screen.</p>
68929 *       <NavigatorBackButton>
68930 *         Go back
68931 *       </NavigatorBackButton>
68932 *     </NavigatorScreen>
68933 *   </NavigatorProvider>
68934 * );
68935 * ```
68936 */
68937const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
68938/* harmony default export */ const navigator_back_button_component = (NavigatorBackButton);
68939
68940;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-to-parent-button/component.js
68941
68942/**
68943 * External dependencies
68944 */
68945
68946/**
68947 * Internal dependencies
68948 */
68949
68950
68951
68952
68953function UnconnectedNavigatorToParentButton(props, forwardedRef) {
68954  const navigatorToParentButtonProps = useNavigatorBackButton({
68955    ...props,
68956    goToParent: true
68957  });
68958  return (0,external_wp_element_namespaceObject.createElement)(component, {
68959    ref: forwardedRef,
68960    ...navigatorToParentButtonProps
68961  });
68962}
68963
68964/*
68965 * The `NavigatorToParentButton` component can be used to navigate to a screen and
68966 * should be used in combination with the `NavigatorProvider`, the
68967 * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
68968 * hook).
68969 *
68970 * @example
68971 * ```jsx
68972 * import {
68973 *   __experimentalNavigatorProvider as NavigatorProvider,
68974 *   __experimentalNavigatorScreen as NavigatorScreen,
68975 *   __experimentalNavigatorButton as NavigatorButton,
68976 *   __experimentalNavigatorToParentButton as NavigatorToParentButton,
68977 * } from '@wordpress/components';
68978 *
68979 * const MyNavigation = () => (
68980 *   <NavigatorProvider initialPath="/">
68981 *     <NavigatorScreen path="/">
68982 *       <p>This is the home screen.</p>
68983 *        <NavigatorButton path="/child">
68984 *          Navigate to child screen.
68985 *       </NavigatorButton>
68986 *     </NavigatorScreen>
68987 *
68988 *     <NavigatorScreen path="/child">
68989 *       <p>This is the child screen.</p>
68990 *       <NavigatorToParentButton>
68991 *         Go to parent
68992 *       </NavigatorToParentButton>
68993 *     </NavigatorScreen>
68994 *   </NavigatorProvider>
68995 * );
68996 * ```
68997 */
68998const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'NavigatorToParentButton');
68999/* harmony default export */ const navigator_to_parent_button_component = (NavigatorToParentButton);
69000
69001;// CONCATENATED MODULE: ./packages/components/build-module/notice/index.js
69002
69003/**
69004 * External dependencies
69005 */
69006
69007
69008/**
69009 * WordPress dependencies
69010 */
69011
69012
69013
69014
69015
69016/**
69017 * Internal dependencies
69018 */
69019
69020
69021const notice_noop = () => {};
69022
69023/**
69024 * Custom hook which announces the message with the given politeness, if a
69025 * valid message is provided.
69026 */
69027function useSpokenMessage(message, politeness) {
69028  const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message);
69029  (0,external_wp_element_namespaceObject.useEffect)(() => {
69030    if (spokenMessage) {
69031      (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness);
69032    }
69033  }, [spokenMessage, politeness]);
69034}
69035function getDefaultPoliteness(status) {
69036  switch (status) {
69037    case 'success':
69038    case 'warning':
69039    case 'info':
69040      return 'polite';
69041    // The default will also catch the 'error' status.
69042    default:
69043      return 'assertive';
69044  }
69045}
69046function getStatusLabel(status) {
69047  switch (status) {
69048    case 'warning':
69049      return (0,external_wp_i18n_namespaceObject.__)('Warning notice');
69050    case 'info':
69051      return (0,external_wp_i18n_namespaceObject.__)('Information notice');
69052    case 'error':
69053      return (0,external_wp_i18n_namespaceObject.__)('Error notice');
69054    // The default will also catch the 'success' status.
69055    default:
69056      return (0,external_wp_i18n_namespaceObject.__)('Notice');
69057  }
69058}
69059
69060/**
69061 * `Notice` is a component used to communicate feedback to the user.
69062 *
69063 *```jsx
69064 * import { Notice } from `@wordpress/components`;
69065 *
69066 * const MyNotice = () => (
69067 *   <Notice status="error">An unknown error occurred.</Notice>
69068 * );
69069 * ```
69070 */
69071function Notice({
69072  className,
69073  status = 'info',
69074  children,
69075  spokenMessage = children,
69076  onRemove = notice_noop,
69077  isDismissible = true,
69078  actions = [],
69079  politeness = getDefaultPoliteness(status),
69080  __unstableHTML,
69081  // onDismiss is a callback executed when the notice is dismissed.
69082  // It is distinct from onRemove, which _looks_ like a callback but is
69083  // actually the function to call to remove the notice from the UI.
69084  onDismiss = notice_noop
69085}) {
69086  useSpokenMessage(spokenMessage, politeness);
69087  const classes = classnames_default()(className, 'components-notice', 'is-' + status, {
69088    'is-dismissible': isDismissible
69089  });
69090  if (__unstableHTML && typeof children === 'string') {
69091    children = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.RawHTML, null, children);
69092  }
69093  const onDismissNotice = () => {
69094    onDismiss();
69095    onRemove();
69096  };
69097  return (0,external_wp_element_namespaceObject.createElement)("div", {
69098    className: classes
69099  }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, getStatusLabel(status)), (0,external_wp_element_namespaceObject.createElement)("div", {
69100    className: "components-notice__content"
69101  }, children, (0,external_wp_element_namespaceObject.createElement)("div", {
69102    className: "components-notice__actions"
69103  }, actions.map(({
69104    className: buttonCustomClasses,
69105    label,
69106    isPrimary,
69107    variant,
69108    noDefaultClasses = false,
69109    onClick,
69110    url
69111  }, index) => {
69112    let computedVariant = variant;
69113    if (variant !== 'primary' && !noDefaultClasses) {
69114      computedVariant = !url ? 'secondary' : 'link';
69115    }
69116    if (typeof computedVariant === 'undefined' && isPrimary) {
69117      computedVariant = 'primary';
69118    }
69119    return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
69120      key: index,
69121      href: url,
69122      variant: computedVariant,
69123      onClick: url ? undefined : onClick,
69124      className: classnames_default()('components-notice__action', buttonCustomClasses)
69125    }, label);
69126  }))), isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
69127    className: "components-notice__dismiss",
69128    icon: library_close,
69129    label: (0,external_wp_i18n_namespaceObject.__)('Close'),
69130    onClick: onDismissNotice
69131  }));
69132}
69133/* harmony default export */ const build_module_notice = (Notice);
69134
69135;// CONCATENATED MODULE: ./packages/components/build-module/notice/list.js
69136
69137/**
69138 * External dependencies
69139 */
69140
69141
69142/**
69143 * Internal dependencies
69144 */
69145
69146const list_noop = () => {};
69147
69148/**
69149 * `NoticeList` is a component used to render a collection of notices.
69150 *
69151 *```jsx
69152 * import { Notice, NoticeList } from `@wordpress/components`;
69153 *
69154 * const MyNoticeList = () => {
69155 *	const [ notices, setNotices ] = useState( [
69156 *		{
69157 *			id: 'second-notice',
69158 *			content: 'second notice content',
69159 *		},
69160 *		{
69161 *			id: 'fist-notice',
69162 *			content: 'first notice content',
69163 *		},
69164 *	] );
69165 *
69166 *	const removeNotice = ( id ) => {
69167 *		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
69168 *	};
69169 *
69170 *	return <NoticeList notices={ notices } onRemove={ removeNotice } />;
69171 *};
69172 *```
69173 */
69174function NoticeList({
69175  notices,
69176  onRemove = list_noop,
69177  className,
69178  children
69179}) {
69180  const removeNotice = id => () => onRemove(id);
69181  className = classnames_default()('components-notice-list', className);
69182  return (0,external_wp_element_namespaceObject.createElement)("div", {
69183    className: className
69184  }, children, [...notices].reverse().map(notice => {
69185    const {
69186      content,
69187      ...restNotice
69188    } = notice;
69189    return (0,external_wp_element_namespaceObject.createElement)(build_module_notice, {
69190      ...restNotice,
69191      key: notice.id,
69192      onRemove: removeNotice(notice.id)
69193    }, notice.content);
69194  }));
69195}
69196/* harmony default export */ const list = (NoticeList);
69197
69198;// CONCATENATED MODULE: ./packages/components/build-module/panel/header.js
69199
69200/**
69201 * Internal dependencies
69202 */
69203
69204/**
69205 * `PanelHeader` renders the header for the `Panel`.
69206 * This is used by the `Panel` component under the hood,
69207 * so it does not typically need to be used.
69208 */
69209function PanelHeader({
69210  label,
69211  children
69212}) {
69213  return (0,external_wp_element_namespaceObject.createElement)("div", {
69214    className: "components-panel__header"
69215  }, label && (0,external_wp_element_namespaceObject.createElement)("h2", null, label), children);
69216}
69217/* harmony default export */ const panel_header = (PanelHeader);
69218
69219;// CONCATENATED MODULE: ./packages/components/build-module/panel/index.js
69220
69221/**
69222 * External dependencies
69223 */
69224
69225
69226/**
69227 * WordPress dependencies
69228 */
69229
69230
69231/**
69232 * Internal dependencies
69233 */
69234
69235function UnforwardedPanel({
69236  header,
69237  className,
69238  children
69239}, ref) {
69240  const classNames = classnames_default()(className, 'components-panel');
69241  return (0,external_wp_element_namespaceObject.createElement)("div", {
69242    className: classNames,
69243    ref: ref
69244  }, header && (0,external_wp_element_namespaceObject.createElement)(panel_header, {
69245    label: header
69246  }), children);
69247}
69248
69249/**
69250 * `Panel` expands and collapses multiple sections of content.
69251 *
69252 * ```jsx
69253 * import { Panel, PanelBody, PanelRow } from '@wordpress/components';
69254 * import { more } from '@wordpress/icons';
69255 *
69256 * const MyPanel = () => (
69257 * 	<Panel header="My Panel">
69258 * 		<PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
69259 * 			<PanelRow>My Panel Inputs and Labels</PanelRow>
69260 * 		</PanelBody>
69261 * 	</Panel>
69262 * );
69263 * ```
69264 */
69265const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanel);
69266/* harmony default export */ const panel = (Panel);
69267
69268;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-up.js
69269
69270/**
69271 * WordPress dependencies
69272 */
69273
69274const chevronUp = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
69275  viewBox: "0 0 24 24",
69276  xmlns: "http://www.w3.org/2000/svg"
69277}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
69278  d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
69279}));
69280/* harmony default export */ const chevron_up = (chevronUp);
69281
69282;// CONCATENATED MODULE: ./packages/components/build-module/panel/body.js
69283
69284/**
69285 * External dependencies
69286 */
69287
69288
69289/**
69290 * WordPress dependencies
69291 */
69292
69293
69294
69295
69296/**
69297 * Internal dependencies
69298 */
69299
69300
69301
69302
69303const body_noop = () => {};
69304function UnforwardedPanelBody(props, ref) {
69305  const {
69306    buttonProps = {},
69307    children,
69308    className,
69309    icon,
69310    initialOpen,
69311    onToggle = body_noop,
69312    opened,
69313    title,
69314    scrollAfterOpen = true
69315  } = props;
69316  const [isOpened, setIsOpened] = use_controlled_state(opened, {
69317    initial: initialOpen === undefined ? true : initialOpen,
69318    fallback: false
69319  });
69320  const nodeRef = (0,external_wp_element_namespaceObject.useRef)(null);
69321
69322  // Defaults to 'smooth' scrolling
69323  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
69324  const scrollBehavior = (0,external_wp_compose_namespaceObject.useReducedMotion)() ? 'auto' : 'smooth';
69325  const handleOnToggle = event => {
69326    event.preventDefault();
69327    const next = !isOpened;
69328    setIsOpened(next);
69329    onToggle(next);
69330  };
69331
69332  // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
69333  const scrollAfterOpenRef = (0,external_wp_element_namespaceObject.useRef)();
69334  scrollAfterOpenRef.current = scrollAfterOpen;
69335  // Runs after initial render.
69336  use_update_effect(() => {
69337    if (isOpened && scrollAfterOpenRef.current && nodeRef.current?.scrollIntoView) {
69338      /*
69339       * Scrolls the content into view when visible.
69340       * This improves the UX when there are multiple stacking <PanelBody />
69341       * components in a scrollable container.
69342       */
69343      nodeRef.current.scrollIntoView({
69344        inline: 'nearest',
69345        block: 'nearest',
69346        behavior: scrollBehavior
69347      });
69348    }
69349  }, [isOpened, scrollBehavior]);
69350  const classes = classnames_default()('components-panel__body', className, {
69351    'is-opened': isOpened
69352  });
69353  return (0,external_wp_element_namespaceObject.createElement)("div", {
69354    className: classes,
69355    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref])
69356  }, (0,external_wp_element_namespaceObject.createElement)(PanelBodyTitle, {
69357    icon: icon,
69358    isOpened: Boolean(isOpened),
69359    onClick: handleOnToggle,
69360    title: title,
69361    ...buttonProps
69362  }), typeof children === 'function' ? children({
69363    opened: Boolean(isOpened)
69364  }) : isOpened && children);
69365}
69366const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({
69367  isOpened,
69368  icon,
69369  title,
69370  ...props
69371}, ref) => {
69372  if (!title) return null;
69373  return (0,external_wp_element_namespaceObject.createElement)("h2", {
69374    className: "components-panel__body-title"
69375  }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
69376    className: "components-panel__body-toggle",
69377    "aria-expanded": isOpened,
69378    ref: ref,
69379    ...props
69380  }, (0,external_wp_element_namespaceObject.createElement)("span", {
69381    "aria-hidden": "true"
69382  }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
69383    className: "components-panel__arrow",
69384    icon: isOpened ? chevron_up : chevron_down
69385  })), title, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
69386    icon: icon,
69387    className: "components-panel__icon",
69388    size: 20
69389  })));
69390});
69391const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody);
69392/* harmony default export */ const body = (PanelBody);
69393
69394;// CONCATENATED MODULE: ./packages/components/build-module/panel/row.js
69395
69396/**
69397 * External dependencies
69398 */
69399
69400
69401/**
69402 * WordPress dependencies
69403 */
69404
69405function UnforwardedPanelRow({
69406  className,
69407  children
69408}, ref) {
69409  return (0,external_wp_element_namespaceObject.createElement)("div", {
69410    className: classnames_default()('components-panel__row', className),
69411    ref: ref
69412  }, children);
69413}
69414
69415/**
69416 * `PanelRow` is a generic container for rows within a `PanelBody`.
69417 * It is a flex container with a top margin for spacing.
69418 */
69419const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelRow);
69420/* harmony default export */ const row = (PanelRow);
69421
69422;// CONCATENATED MODULE: ./packages/components/build-module/placeholder/index.js
69423
69424/**
69425 * External dependencies
69426 */
69427
69428
69429/**
69430 * WordPress dependencies
69431 */
69432
69433
69434
69435
69436
69437/**
69438 * Internal dependencies
69439 */
69440
69441const PlaceholderIllustration = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
69442  className: "components-placeholder__illustration",
69443  fill: "none",
69444  xmlns: "http://www.w3.org/2000/svg",
69445  viewBox: "0 0 60 60",
69446  preserveAspectRatio: "none"
69447}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
69448  vectorEffect: "non-scaling-stroke",
69449  d: "M60 60 0 0"
69450}));
69451
69452/**
69453 * Renders a placeholder. Normally used by blocks to render their empty state.
69454 *
69455 * ```jsx
69456 * import { Placeholder } from '@wordpress/components';
69457 * import { more } from '@wordpress/icons';
69458 *
69459 * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
69460 * ```
69461 */
69462function Placeholder(props) {
69463  const {
69464    icon,
69465    children,
69466    label,
69467    instructions,
69468    className,
69469    notices,
69470    preview,
69471    isColumnLayout,
69472    withIllustration,
69473    ...additionalProps
69474  } = props;
69475  const [resizeListener, {
69476    width
69477  }] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
69478
69479  // Since `useResizeObserver` will report a width of `null` until after the
69480  // first render, avoid applying any modifier classes until width is known.
69481  let modifierClassNames;
69482  if (typeof width === 'number') {
69483    modifierClassNames = {
69484      'is-large': width >= 480,
69485      'is-medium': width >= 160 && width < 480,
69486      'is-small': width < 160
69487    };
69488  }
69489  const classes = classnames_default()('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
69490  const fieldsetClasses = classnames_default()('components-placeholder__fieldset', {
69491    'is-column-layout': isColumnLayout
69492  });
69493  (0,external_wp_element_namespaceObject.useEffect)(() => {
69494    if (instructions) {
69495      (0,external_wp_a11y_namespaceObject.speak)(instructions);
69496    }
69497  }, [instructions]);
69498  return (0,external_wp_element_namespaceObject.createElement)("div", {
69499    ...additionalProps,
69500    className: classes
69501  }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0,external_wp_element_namespaceObject.createElement)("div", {
69502    className: "components-placeholder__preview"
69503  }, preview), (0,external_wp_element_namespaceObject.createElement)("div", {
69504    className: "components-placeholder__label"
69505  }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
69506    icon: icon
69507  }), label), !!instructions && (0,external_wp_element_namespaceObject.createElement)("div", {
69508    className: "components-placeholder__instructions"
69509  }, instructions), (0,external_wp_element_namespaceObject.createElement)("div", {
69510    className: fieldsetClasses
69511  }, children));
69512}
69513/* harmony default export */ const placeholder = (Placeholder);
69514
69515;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/terms.js
69516/**
69517 * Internal dependencies
69518 */
69519
69520const ensureParentsAreDefined = terms => {
69521  return terms.every(term => term.parent !== null);
69522};
69523/**
69524 * Returns terms in a tree form.
69525 *
69526 * @param flatTerms Array of terms in flat format.
69527 *
69528 * @return Terms in tree format.
69529 */
69530function buildTermsTree(flatTerms) {
69531  const flatTermsWithParentAndChildren = flatTerms.map(term => ({
69532    children: [],
69533    parent: null,
69534    ...term,
69535    id: String(term.id)
69536  }));
69537
69538  // We use a custom type guard here to ensure that the parent property is
69539  // defined on all terms. The type of the `parent` property is `number | null`
69540  // and we need to ensure that it is `number`. This is because we use the
69541  // `parent` property as a key in the `termsByParent` object.
69542  if (!ensureParentsAreDefined(flatTermsWithParentAndChildren)) {
69543    return flatTermsWithParentAndChildren;
69544  }
69545  const termsByParent = flatTermsWithParentAndChildren.reduce((acc, term) => {
69546    const {
69547      parent
69548    } = term;
69549    if (!acc[parent]) {
69550      acc[parent] = [];
69551    }
69552    acc[parent].push(term);
69553    return acc;
69554  }, {});
69555  const fillWithChildren = terms => {
69556    return terms.map(term => {
69557      const children = termsByParent[term.id];
69558      return {
69559        ...term,
69560        children: children && children.length ? fillWithChildren(children) : []
69561      };
69562    });
69563  };
69564  return fillWithChildren(termsByParent['0'] || []);
69565}
69566
69567;
69567// CONCATENATED MODULE: external ["wp","htmlEntities"]
69568const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"];
69569;// CONCATENATED MODULE: ./packages/components/build-module/tree-select/index.js
69570
69571/**
69572 * WordPress dependencies
69573 */
69574
69575
69576
69577/**
69578 * Internal dependencies
69579 */
69580
69581function getSelectOptions(tree, level = 0) {
69582  return tree.flatMap(treeNode => [{
69583    value: treeNode.id,
69584    label: '\u00A0'.repeat(level * 3) + (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(treeNode.name)
69585  }, ...getSelectOptions(treeNode.children || [], level + 1)]);
69586}
69587
69588/**
69589 * TreeSelect component is used to generate select input fields.
69590 *
69591 * ```jsx
69592 * import { TreeSelect } from '@wordpress/components';
69593 * import { useState } from '@wordpress/element';
69594 *
69595 * const MyTreeSelect = () => {
69596 * 	const [ page, setPage ] = useState( 'p21' );
69597 *
69598 * 	return (
69599 * 		<TreeSelect
69600 * 			label="Parent page"
69601 * 			noOptionLabel="No parent page"
69602 * 			onChange={ ( newPage ) => setPage( newPage ) }
69603 * 			selectedId={ page }
69604 * 			tree={ [
69605 * 				{
69606 * 					name: 'Page 1',
69607 * 					id: 'p1',
69608 * 					children: [
69609 * 						{ name: 'Descend 1 of page 1', id: 'p11' },
69610 * 						{ name: 'Descend 2 of page 1', id: 'p12' },
69611 * 					],
69612 * 				},
69613 * 				{
69614 * 					name: 'Page 2',
69615 * 					id: 'p2',
69616 * 					children: [
69617 * 						{
69618 * 							name: 'Descend 1 of page 2',
69619 * 							id: 'p21',
69620 * 							children: [
69621 * 								{
69622 * 									name: 'Descend 1 of Descend 1 of page 2',
69623 * 									id: 'p211',
69624 * 								},
69625 * 							],
69626 * 						},
69627 * 					],
69628 * 				},
69629 * 			] }
69630 * 		/>
69631 * 	);
69632 * }
69633 * ```
69634 */
69635
69636function TreeSelect({
69637  label,
69638  noOptionLabel,
69639  onChange,
69640  selectedId,
69641  tree = [],
69642  ...props
69643}) {
69644  const options = (0,external_wp_element_namespaceObject.useMemo)(() => {
69645    return [noOptionLabel && {
69646      value: '',
69647      label: noOptionLabel
69648    }, ...getSelectOptions(tree)].filter(option => !!option);
69649  }, [noOptionLabel, tree]);
69650  return (0,external_wp_element_namespaceObject.createElement)(SelectControl, {
69651    label,
69652    options,
69653    onChange,
69654    value: selectedId,
69655    ...props
69656  });
69657}
69658/* harmony default export */ const tree_select = (TreeSelect);
69659
69660;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/author-select.js
69661
69662/**
69663 * Internal dependencies
69664 */
69665
69666
69667function AuthorSelect({
69668  label,
69669  noOptionLabel,
69670  authorList,
69671  selectedAuthorId,
69672  onChange: onChangeProp
69673}) {
69674  if (!authorList) return null;
69675  const termsTree = buildTermsTree(authorList);
69676  return (0,external_wp_element_namespaceObject.createElement)(tree_select, {
69677    label,
69678    noOptionLabel,
69679    onChange: onChangeProp,
69680    tree: termsTree,
69681    selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined,
69682    __nextHasNoMarginBottom: true
69683  });
69684}
69685
69686;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/category-select.js
69687
69688/**
69689 * Internal dependencies
69690 */
69691
69692
69693
69694/**
69695 * WordPress dependencies
69696 */
69697
69698function CategorySelect({
69699  label,
69700  noOptionLabel,
69701  categoriesList,
69702  selectedCategoryId,
69703  onChange: onChangeProp,
69704  ...props
69705}) {
69706  const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => {
69707    return buildTermsTree(categoriesList);
69708  }, [categoriesList]);
69709  return (0,external_wp_element_namespaceObject.createElement)(tree_select, {
69710    label,
69711    noOptionLabel,
69712    onChange: onChangeProp,
69713    tree: termsTree,
69714    selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,
69715    ...props,
69716    __nextHasNoMarginBottom: true
69717  });
69718}
69719
69720;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/index.js
69721
69722/**
69723 * WordPress dependencies
69724 */
69725
69726
69727/**
69728 * Internal dependencies
69729 */
69730
69731
69732
69733
69734
69735
69736const DEFAULT_MIN_ITEMS = 1;
69737const DEFAULT_MAX_ITEMS = 100;
69738const MAX_CATEGORIES_SUGGESTIONS = 20;
69739function isSingleCategorySelection(props) {
69740  return 'categoriesList' in props;
69741}
69742function isMultipleCategorySelection(props) {
69743  return 'categorySuggestions' in props;
69744}
69745
69746/**
69747 * Controls to query for posts.
69748 *
69749 * ```jsx
69750 * const MyQueryControls = () => (
69751 *   <QueryControls
69752 *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
69753 *     onOrderByChange={ ( newOrderBy ) => {
69754 *       updateQuery( { orderBy: newOrderBy } )
69755 *     }
69756 *     onOrderChange={ ( newOrder ) => {
69757 *       updateQuery( { order: newOrder } )
69758 *     }
69759 *     categoriesList={ categories }
69760 *     selectedCategoryId={ category }
69761 *     onCategoryChange={ ( newCategory ) => {
69762 *       updateQuery( { category: newCategory } )
69763 *     }
69764 *     onNumberOfItemsChange={ ( newNumberOfItems ) => {
69765 *       updateQuery( { numberOfItems: newNumberOfItems } )
69766 *     } }
69767 *   />
69768 * );
69769 * ```
69770 */
69771function QueryControls({
69772  authorList,
69773  selectedAuthorId,
69774  numberOfItems,
69775  order,
69776  orderBy,
69777  maxItems = DEFAULT_MAX_ITEMS,
69778  minItems = DEFAULT_MIN_ITEMS,
69779  onAuthorChange,
69780  onNumberOfItemsChange,
69781  onOrderChange,
69782  onOrderByChange,
69783  // Props for single OR multiple category selection are not destructured here,
69784  // but instead are destructured inline where necessary.
69785  ...props
69786}) {
69787  return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
69788    spacing: "4",
69789    className: "components-query-controls"
69790  }, [onOrderChange && onOrderByChange && (0,external_wp_element_namespaceObject.createElement)(select_control, {
69791    __nextHasNoMarginBottom: true,
69792    key: "query-controls-order-select",
69793    label: (0,external_wp_i18n_namespaceObject.__)('Order by'),
69794    value: `${orderBy}/${order}`,
69795    options: [{
69796      label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'),
69797      value: 'date/desc'
69798    }, {
69799      label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'),
69800      value: 'date/asc'
69801    }, {
69802      /* translators: label for ordering posts by title in ascending order */
69803      label: (0,external_wp_i18n_namespaceObject.__)('A → Z'),
69804      value: 'title/asc'
69805    }, {
69806      /* translators: label for ordering posts by title in descending order */
69807      label: (0,external_wp_i18n_namespaceObject.__)('Z → A'),
69808      value: 'title/desc'
69809    }],
69810    onChange: value => {
69811      if (typeof value !== 'string') {
69812        return;
69813      }
69814      const [newOrderBy, newOrder] = value.split('/');
69815      if (newOrder !== order) {
69816        onOrderChange(newOrder);
69817      }
69818      if (newOrderBy !== orderBy) {
69819        onOrderByChange(newOrderBy);
69820      }
69821    }
69822  }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(CategorySelect, {
69823    key: "query-controls-category-select",
69824    categoriesList: props.categoriesList,
69825    label: (0,external_wp_i18n_namespaceObject.__)('Category'),
69826    noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'),
69827    selectedCategoryId: props.selectedCategoryId,
69828    onChange: props.onCategoryChange
69829  }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(form_token_field, {
69830    __nextHasNoMarginBottom: true,
69831    key: "query-controls-categories-select",
69832    label: (0,external_wp_i18n_namespaceObject.__)('Categories'),
69833    value: props.selectedCategories && props.selectedCategories.map(item => ({
69834      id: item.id,
69835      // Keeping the fallback to `item.value` for legacy reasons,
69836      // even if items of `selectedCategories` should not have a
69837      // `value` property.
69838      // @ts-expect-error
69839      value: item.name || item.value
69840    })),
69841    suggestions: Object.keys(props.categorySuggestions),
69842    onChange: props.onCategoryChange,
69843    maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
69844  }), onAuthorChange && (0,external_wp_element_namespaceObject.createElement)(AuthorSelect, {
69845    key: "query-controls-author-select",
69846    authorList: authorList,
69847    label: (0,external_wp_i18n_namespaceObject.__)('Author'),
69848    noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'),
69849    selectedAuthorId: selectedAuthorId,
69850    onChange: onAuthorChange
69851  }), onNumberOfItemsChange && (0,external_wp_element_namespaceObject.createElement)(range_control, {
69852    __nextHasNoMarginBottom: true,
69853    __next40pxDefaultSize: true,
69854    key: "query-controls-range-control",
69855    label: (0,external_wp_i18n_namespaceObject.__)('Number of items'),
69856    value: numberOfItems,
69857    onChange: onNumberOfItemsChange,
69858    min: minItems,
69859    max: maxItems,
69860    required: true
69861  })]);
69862}
69863/* harmony default export */ const query_controls = (QueryControls);
69864
69865;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d251e56b.js
69866// Automatically generated
69867var RADIO_STATE_KEYS = ["baseId", "unstable_idCountRef", "unstable_virtual", "rtl", "orientation", "items", "groups", "currentId", "loop", "wrap", "shift", "unstable_moves", "unstable_hasActiveWidget", "unstable_includesBaseElement", "state", "setBaseId", "registerItem", "unregisterItem", "registerGroup", "unregisterGroup", "move", "next", "previous", "up", "down", "first", "last", "sort", "unstable_setVirtual", "setRTL", "setOrientation", "setCurrentId", "setLoop", "setWrap", "setShift", "reset", "unstable_setIncludesBaseElement", "unstable_setHasActiveWidget", "setState"];
69868var RADIO_KEYS = [].concat(RADIO_STATE_KEYS, ["value", "checked", "unstable_checkOnFocus"]);
69869var RADIO_GROUP_KEYS = RADIO_STATE_KEYS;
69870
69871
69872
69873;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/Radio.js
69874
69875
69876
69877
69878
69879
69880
69881
69882
69883
69884
69885
69886
69887
69888
69889
69890
69891
69892
69893
69894
69895
69896
69897
69898
69899
69900
69901
69902
69903
69904
69905
69906
69907function getChecked(options) {
69908  if (typeof options.checked !== "undefined") {
69909    return options.checked;
69910  }
69911
69912  return typeof options.value !== "undefined" && options.state === options.value;
69913}
69914
69915function useInitialChecked(options) {
69916  var _React$useState = (0,external_React_.useState)(function () {
69917    return getChecked(options);
69918  }),
69919      initialChecked = _React$useState[0];
69920
69921  var _React$useState2 = (0,external_React_.useState)(options.currentId),
69922      initialCurrentId = _React$useState2[0];
69923
69924  var id = options.id,
69925      setCurrentId = options.setCurrentId;
69926  (0,external_React_.useEffect)(function () {
69927    if (initialChecked && id && initialCurrentId !== id) {
69928      setCurrentId === null || setCurrentId === void 0 ? void 0 : setCurrentId(id);
69929    }
69930  }, [initialChecked, id, setCurrentId, initialCurrentId]);
69931}
69932
69933function fireChange(element, onChange) {
69934  var event = createEvent(element, "change");
69935  Object.defineProperties(event, {
69936    type: {
69937      value: "change"
69938    },
69939    target: {
69940      value: element
69941    },
69942    currentTarget: {
69943      value: element
69944    }
69945  });
69946  onChange === null || onChange === void 0 ? void 0 : onChange(event);
69947}
69948
69949var Radio_useRadio = createHook({
69950  name: "Radio",
69951  compose: useCompositeItem,
69952  keys: RADIO_KEYS,
69953  useOptions: function useOptions(_ref, _ref2) {
69954    var _options$value;
69955
69956    var value = _ref2.value,
69957        checked = _ref2.checked;
69958
69959    var _ref$unstable_clickOn = _ref.unstable_clickOnEnter,
69960        unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? false : _ref$unstable_clickOn,
69961        _ref$unstable_checkOn = _ref.unstable_checkOnFocus,
69962        unstable_checkOnFocus = _ref$unstable_checkOn === void 0 ? true : _ref$unstable_checkOn,
69963        options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_checkOnFocus"]);
69964
69965    return _objectSpread2(_objectSpread2({
69966      checked: checked,
69967      unstable_clickOnEnter: unstable_clickOnEnter,
69968      unstable_checkOnFocus: unstable_checkOnFocus
69969    }, options), {}, {
69970      value: (_options$value = options.value) != null ? _options$value : value
69971    });
69972  },
69973  useProps: function useProps(options, _ref3) {
69974    var htmlRef = _ref3.ref,
69975        htmlOnChange = _ref3.onChange,
69976        htmlOnClick = _ref3.onClick,
69977        htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref3, ["ref", "onChange", "onClick"]);
69978
69979    var ref = (0,external_React_.useRef)(null);
69980
69981    var _React$useState3 = (0,external_React_.useState)(true),
69982        isNativeRadio = _React$useState3[0],
69983        setIsNativeRadio = _React$useState3[1];
69984
69985    var checked = getChecked(options);
69986    var isCurrentItemRef = useLiveRef(options.currentId === options.id);
69987    var onChangeRef = useLiveRef(htmlOnChange);
69988    var onClickRef = useLiveRef(htmlOnClick);
69989    useInitialChecked(options);
69990    (0,external_React_.useEffect)(function () {
69991      var element = ref.current;
69992
69993      if (!element) {
69994         false ? 0 : void 0;
69995        return;
69996      }
69997
69998      if (element.tagName !== "INPUT" || element.type !== "radio") {
69999        setIsNativeRadio(false);
70000      }
70001    }, []);
70002    var onChange = (0,external_React_.useCallback)(function (event) {
70003      var _onChangeRef$current, _options$setState;
70004
70005      (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 ? void 0 : _onChangeRef$current.call(onChangeRef, event);
70006      if (event.defaultPrevented) return;
70007      if (options.disabled) return;
70008      (_options$setState = options.setState) === null || _options$setState === void 0 ? void 0 : _options$setState.call(options, options.value);
70009    }, [options.disabled, options.setState, options.value]);
70010    var onClick = (0,external_React_.useCallback)(function (event) {
70011      var _onClickRef$current;
70012
70013      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event);
70014      if (event.defaultPrevented) return;
70015      if (isNativeRadio) return;
70016      fireChange(event.currentTarget, onChange);
70017    }, [onChange, isNativeRadio]);
70018    (0,external_React_.useEffect)(function () {
70019      var element = ref.current;
70020      if (!element) return;
70021
70022      if (options.unstable_moves && isCurrentItemRef.current && options.unstable_checkOnFocus) {
70023        fireChange(element, onChange);
70024      }
70025    }, [options.unstable_moves, options.unstable_checkOnFocus, onChange]);
70026    return _objectSpread2({
70027      ref: useForkRef(ref, htmlRef),
70028      role: !isNativeRadio ? "radio" : undefined,
70029      type: isNativeRadio ? "radio" : undefined,
70030      value: isNativeRadio ? options.value : undefined,
70031      name: isNativeRadio ? options.baseId : undefined,
70032      "aria-checked": checked,
70033      checked: checked,
70034      onChange: onChange,
70035      onClick: onClick
70036    }, htmlProps);
70037  }
70038});
70039var Radio_Radio = createComponent({
70040  as: "input",
70041  memo: true,
70042  useHook: Radio_useRadio
70043});
70044
70045
70046
70047;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/radio-context/index.js
70048/**
70049 * WordPress dependencies
70050 */
70051
70052const radio_context_RadioContext = (0,external_wp_element_namespaceObject.createContext)({
70053  state: null,
70054  setState: () => {}
70055});
70056/* harmony default export */ const radio_context = (radio_context_RadioContext);
70057
70058;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/radio/index.js
70059
70060// @ts-nocheck
70061
70062/**
70063 * External dependencies
70064 */
70065
70066
70067/**
70068 * WordPress dependencies
70069 */
70070
70071
70072/**
70073 * Internal dependencies
70074 */
70075
70076
70077function radio_Radio({
70078  children,
70079  value,
70080  ...props
70081}, ref) {
70082  const radioContext = (0,external_wp_element_namespaceObject.useContext)(radio_context);
70083  const checked = radioContext.state === value;
70084  return (0,external_wp_element_namespaceObject.createElement)(Radio_Radio, {
70085    ref: ref,
70086    as: build_module_button,
70087    variant: checked ? 'primary' : 'secondary',
70088    value: value,
70089    ...radioContext,
70090    ...props
70091  }, children || value);
70092}
70093
70094/**
70095 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
70096 */
70097/* harmony default export */ const radio_group_radio = ((0,external_wp_element_namespaceObject.forwardRef)(radio_Radio));
70098
70099;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioState.js
70100
70101
70102
70103
70104
70105
70106
70107
70108
70109
70110
70111
70112
70113function useRadioState(initialState) {
70114  if (initialState === void 0) {
70115    initialState = {};
70116  }
70117
70118  var _useSealedState = useSealedState(initialState),
70119      initialValue = _useSealedState.state,
70120      _useSealedState$loop = _useSealedState.loop,
70121      loop = _useSealedState$loop === void 0 ? true : _useSealedState$loop,
70122      sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["state", "loop"]);
70123
70124  var _React$useState = (0,external_React_.useState)(initialValue),
70125      state = _React$useState[0],
70126      setState = _React$useState[1];
70127
70128  var composite = useCompositeState(_objectSpread2(_objectSpread2({}, sealed), {}, {
70129    loop: loop
70130  }));
70131  return _objectSpread2(_objectSpread2({}, composite), {}, {
70132    state: state,
70133    setState: setState
70134  });
70135}
70136
70137
70138
70139;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioGroup.js
70140
70141
70142
70143
70144
70145
70146
70147
70148
70149
70150
70151
70152
70153
70154
70155
70156
70157
70158
70159
70160
70161
70162
70163
70164
70165
70166
70167
70168
70169
70170
70171var RadioGroup_useRadioGroup = createHook({
70172  name: "RadioGroup",
70173  compose: useComposite,
70174  keys: RADIO_GROUP_KEYS,
70175  useProps: function useProps(_, htmlProps) {
70176    return _objectSpread2({
70177      role: "radiogroup"
70178    }, htmlProps);
70179  }
70180});
70181var RadioGroup_RadioGroup = createComponent({
70182  as: "div",
70183  useHook: RadioGroup_useRadioGroup,
70184  useCreateElement: function useCreateElement$1(type, props, children) {
70185     false ? 0 : void 0;
70186    return useCreateElement(type, props, children);
70187  }
70188});
70189
70190
70191
70192;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/index.js
70193
70194// @ts-nocheck
70195
70196/**
70197 * External dependencies
70198 */
70199
70200
70201/**
70202 * WordPress dependencies
70203 */
70204
70205
70206/**
70207 * Internal dependencies
70208 */
70209
70210
70211function radio_group_RadioGroup({
70212  label,
70213  checked,
70214  defaultChecked,
70215  disabled,
70216  onChange,
70217  ...props
70218}, ref) {
70219  const radioState = useRadioState({
70220    state: defaultChecked,
70221    baseId: props.id
70222  });
70223  const radioContext = {
70224    ...radioState,
70225    disabled,
70226    // Controlled or uncontrolled.
70227    state: checked !== null && checked !== void 0 ? checked : radioState.state,
70228    setState: onChange !== null && onChange !== void 0 ? onChange : radioState.setState
70229  };
70230  return (0,external_wp_element_namespaceObject.createElement)(radio_context.Provider, {
70231    value: radioContext
70232  }, (0,external_wp_element_namespaceObject.createElement)(RadioGroup_RadioGroup, {
70233    ref: ref,
70234    as: button_group,
70235    "aria-label": label,
70236    ...radioState,
70237    ...props
70238  }));
70239}
70240
70241/**
70242 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
70243 */
70244/* harmony default export */ const radio_group = ((0,external_wp_element_namespaceObject.forwardRef)(radio_group_RadioGroup));
70245
70246;// CONCATENATED MODULE: ./packages/components/build-module/radio-control/index.js
70247
70248/**
70249 * External dependencies
70250 */
70251
70252/**
70253 * WordPress dependencies
70254 */
70255
70256
70257/**
70258 * Internal dependencies
70259 */
70260
70261
70262
70263/**
70264 * Render a user interface to select the user type using radio inputs.
70265 *
70266 * ```jsx
70267 * import { RadioControl } from '@wordpress/components';
70268 * import { useState } from '@wordpress/element';
70269 *
70270 * const MyRadioControl = () => {
70271 *   const [ option, setOption ] = useState( 'a' );
70272 *
70273 *   return (
70274 *     <RadioControl
70275 *       label="User type"
70276 *       help="The type of the current user"
70277 *       selected={ option }
70278 *       options={ [
70279 *         { label: 'Author', value: 'a' },
70280 *         { label: 'Editor', value: 'e' },
70281 *       ] }
70282 *       onChange={ ( value ) => setOption( value ) }
70283 *     />
70284 *   );
70285 * };
70286 * ```
70287 */
70288function RadioControl(props) {
70289  const {
70290    label,
70291    className,
70292    selected,
70293    help,
70294    onChange,
70295    hideLabelFromVision,
70296    options = [],
70297    ...additionalProps
70298  } = props;
70299  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl);
70300  const id = `inspector-radio-control-${instanceId}`;
70301  const onChangeValue = event => onChange(event.target.value);
70302  if (!options?.length) {
70303    return null;
70304  }
70305  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
70306    __nextHasNoMarginBottom: true,
70307    label: label,
70308    id: id,
70309    hideLabelFromVision: hideLabelFromVision,
70310    help: help,
70311    className: classnames_default()(className, 'components-radio-control')
70312  }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, {
70313    spacing: 1
70314  }, options.map((option, index) => (0,external_wp_element_namespaceObject.createElement)("div", {
70315    key: `${id}-${index}`,
70316    className: "components-radio-control__option"
70317  }, (0,external_wp_element_namespaceObject.createElement)("input", {
70318    id: `${id}-${index}`,
70319    className: "components-radio-control__input",
70320    type: "radio",
70321    name: id,
70322    value: option.value,
70323    onChange: onChangeValue,
70324    checked: option.value === selected,
70325    "aria-describedby": !!help ? `${id}__help` : undefined,
70326    ...additionalProps
70327  }), (0,external_wp_element_namespaceObject.createElement)("label", {
70328    htmlFor: `${id}-${index}`
70329  }, option.label)))));
70330}
70331/* harmony default export */ const radio_control = (RadioControl);
70332
70333;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/resizer.js
70334var resizer_extends = (undefined && undefined.__extends) || (function () {
70335    var extendStatics = function (d, b) {
70336        extendStatics = Object.setPrototypeOf ||
70337            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
70338            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
70339        return extendStatics(d, b);
70340    };
70341    return function (d, b) {
70342        extendStatics(d, b);
70343        function __() { this.constructor = d; }
70344        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
70345    };
70346})();
70347var resizer_assign = (undefined && undefined.__assign) || function () {
70348    resizer_assign = Object.assign || function(t) {
70349        for (var s, i = 1, n = arguments.length; i < n; i++) {
70350            s = arguments[i];
70351            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
70352                t[p] = s[p];
70353        }
70354        return t;
70355    };
70356    return resizer_assign.apply(this, arguments);
70357};
70358
70359var resizer_styles = {
70360    top: {
70361        width: '100%',
70362        height: '10px',
70363        top: '-5px',
70364        left: '0px',
70365        cursor: 'row-resize',
70366    },
70367    right: {
70368        width: '10px',
70369        height: '100%',
70370        top: '0px',
70371        right: '-5px',
70372        cursor: 'col-resize',
70373    },
70374    bottom: {
70375        width: '100%',
70376        height: '10px',
70377        bottom: '-5px',
70378        left: '0px',
70379        cursor: 'row-resize',
70380    },
70381    left: {
70382        width: '10px',
70383        height: '100%',
70384        top: '0px',
70385        left: '-5px',
70386        cursor: 'col-resize',
70387    },
70388    topRight: {
70389        width: '20px',
70390        height: '20px',
70391        position: 'absolute',
70392        right: '-10px',
70393        top: '-10px',
70394        cursor: 'ne-resize',
70395    },
70396    bottomRight: {
70397        width: '20px',
70398        height: '20px',
70399        position: 'absolute',
70400        right: '-10px',
70401        bottom: '-10px',
70402        cursor: 'se-resize',
70403    },
70404    bottomLeft: {
70405        width: '20px',
70406        height: '20px',
70407        position: 'absolute',
70408        left: '-10px',
70409        bottom: '-10px',
70410        cursor: 'sw-resize',
70411    },
70412    topLeft: {
70413        width: '20px',
70414        height: '20px',
70415        position: 'absolute',
70416        left: '-10px',
70417        top: '-10px',
70418        cursor: 'nw-resize',
70419    },
70420};
70421var Resizer = /** @class */ (function (_super) {
70422    resizer_extends(Resizer, _super);
70423    function Resizer() {
70424        var _this = _super !== null && _super.apply(this, arguments) || this;
70425        _this.onMouseDown = function (e) {
70426            _this.props.onResizeStart(e, _this.props.direction);
70427        };
70428        _this.onTouchStart = function (e) {
70429            _this.props.onResizeStart(e, _this.props.direction);
70430        };
70431        return _this;
70432    }
70433    Resizer.prototype.render = function () {
70434        return (external_React_.createElement("div", { className: this.props.className || '', style: resizer_assign(resizer_assign({ position: 'absolute', userSelect: 'none' }, resizer_styles[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children));
70435    };
70436    return Resizer;
70437}(external_React_.PureComponent));
70438
70439
70440// EXTERNAL MODULE: ./node_modules/fast-memoize/src/index.js
70441var src = __webpack_require__(2920);
70442var src_default = /*#__PURE__*/__webpack_require__.n(src);
70443;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/index.js
70444var lib_extends = (undefined && undefined.__extends) || (function () {
70445    var extendStatics = function (d, b) {
70446        extendStatics = Object.setPrototypeOf ||
70447            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
70448            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
70449        return extendStatics(d, b);
70450    };
70451    return function (d, b) {
70452        extendStatics(d, b);
70453        function __() { this.constructor = d; }
70454        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
70455    };
70456})();
70457var lib_assign = (undefined && undefined.__assign) || function () {
70458    lib_assign = Object.assign || function(t) {
70459        for (var s, i = 1, n = arguments.length; i < n; i++) {
70460            s = arguments[i];
70461            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
70462                t[p] = s[p];
70463        }
70464        return t;
70465    };
70466    return lib_assign.apply(this, arguments);
70467};
70468
70469
70470
70471var DEFAULT_SIZE = {
70472    width: 'auto',
70473    height: 'auto',
70474};
70475var lib_clamp = src_default()(function (n, min, max) { return Math.max(Math.min(n, max), min); });
70476var snap = src_default()(function (n, size) { return Math.round(n / size) * size; });
70477var hasDirection = src_default()(function (dir, target) {
70478    return new RegExp(dir, 'i').test(target);
70479});
70480// INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`.
70481var isTouchEvent = function (event) {
70482    return Boolean(event.touches && event.touches.length);
70483};
70484var isMouseEvent = function (event) {
70485    return Boolean((event.clientX || event.clientX === 0) &&
70486        (event.clientY || event.clientY === 0));
70487};
70488var findClosestSnap = src_default()(function (n, snapArray, snapGap) {
70489    if (snapGap === void 0) { snapGap = 0; }
70490    var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0);
70491    var gap = Math.abs(snapArray[closestGapIndex] - n);
70492    return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
70493});
70494var endsWith = src_default()(function (str, searchStr) {
70495    return str.substr(str.length - searchStr.length, searchStr.length) === searchStr;
70496});
70497var getStringSize = src_default()(function (n) {
70498    n = n.toString();
70499    if (n === 'auto') {
70500        return n;
70501    }
70502    if (endsWith(n, 'px')) {
70503        return n;
70504    }
70505    if (endsWith(n, '%')) {
70506        return n;
70507    }
70508    if (endsWith(n, 'vh')) {
70509        return n;
70510    }
70511    if (endsWith(n, 'vw')) {
70512        return n;
70513    }
70514    if (endsWith(n, 'vmax')) {
70515        return n;
70516    }
70517    if (endsWith(n, 'vmin')) {
70518        return n;
70519    }
70520    return n + "px";
70521});
70522var getPixelSize = function (size, parentSize, innerWidth, innerHeight) {
70523    if (size && typeof size === 'string') {
70524        if (endsWith(size, 'px')) {
70525            return Number(size.replace('px', ''));
70526        }
70527        if (endsWith(size, '%')) {
70528            var ratio = Number(size.replace('%', '')) / 100;
70529            return parentSize * ratio;
70530        }
70531        if (endsWith(size, 'vw')) {
70532            var ratio = Number(size.replace('vw', '')) / 100;
70533            return innerWidth * ratio;
70534        }
70535        if (endsWith(size, 'vh')) {
70536            var ratio = Number(size.replace('vh', '')) / 100;
70537            return innerHeight * ratio;
70538        }
70539    }
70540    return size;
70541};
70542var calculateNewMax = src_default()(function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) {
70543    maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
70544    maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
70545    minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
70546    minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
70547    return {
70548        maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
70549        maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
70550        minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
70551        minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
70552    };
70553});
70554var definedProps = [
70555    'as',
70556    'style',
70557    'className',
70558    'grid',
70559    'snap',
70560    'bounds',
70561    'boundsByDirection',
70562    'size',
70563    'defaultSize',
70564    'minWidth',
70565    'minHeight',
70566    'maxWidth',
70567    'maxHeight',
70568    'lockAspectRatio',
70569    'lockAspectRatioExtraWidth',
70570    'lockAspectRatioExtraHeight',
70571    'enable',
70572    'handleStyles',
70573    'handleClasses',
70574    'handleWrapperStyle',
70575    'handleWrapperClass',
70576    'children',
70577    'onResizeStart',
70578    'onResize',
70579    'onResizeStop',
70580    'handleComponent',
70581    'scale',
70582    'resizeRatio',
70583    'snapGap',
70584];
70585// HACK: This class is used to calculate % size.
70586var baseClassName = '__resizable_base__';
70587var Resizable = /** @class */ (function (_super) {
70588    lib_extends(Resizable, _super);
70589    function Resizable(props) {
70590        var _this = _super.call(this, props) || this;
70591        _this.ratio = 1;
70592        _this.resizable = null;
70593        // For parent boundary
70594        _this.parentLeft = 0;
70595        _this.parentTop = 0;
70596        // For boundary
70597        _this.resizableLeft = 0;
70598        _this.resizableRight = 0;
70599        _this.resizableTop = 0;
70600        _this.resizableBottom = 0;
70601        // For target boundary
70602        _this.targetLeft = 0;
70603        _this.targetTop = 0;
70604        _this.appendBase = function () {
70605            if (!_this.resizable || !_this.window) {
70606                return null;
70607            }
70608            var parent = _this.parentNode;
70609            if (!parent) {
70610                return null;
70611            }
70612            var element = _this.window.document.createElement('div');
70613            element.style.width = '100%';
70614            element.style.height = '100%';
70615            element.style.position = 'absolute';
70616            element.style.transform = 'scale(0, 0)';
70617            element.style.left = '0';
70618            element.style.flex = '0';
70619            if (element.classList) {
70620                element.classList.add(baseClassName);
70621            }
70622            else {
70623                element.className += baseClassName;
70624            }
70625            parent.appendChild(element);
70626            return element;
70627        };
70628        _this.removeBase = function (base) {
70629            var parent = _this.parentNode;
70630            if (!parent) {
70631                return;
70632            }
70633            parent.removeChild(base);
70634        };
70635        _this.ref = function (c) {
70636            if (c) {
70637                _this.resizable = c;
70638            }
70639        };
70640        _this.state = {
70641            isResizing: false,
70642            width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined'
70643                ? 'auto'
70644                : _this.propsSize && _this.propsSize.width,
70645            height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined'
70646                ? 'auto'
70647                : _this.propsSize && _this.propsSize.height,
70648            direction: 'right',
70649            original: {
70650                x: 0,
70651                y: 0,
70652                width: 0,
70653                height: 0,
70654            },
70655            backgroundStyle: {
70656                height: '100%',
70657                width: '100%',
70658                backgroundColor: 'rgba(0,0,0,0)',
70659                cursor: 'auto',
70660                opacity: 0,
70661                position: 'fixed',
70662                zIndex: 9999,
70663                top: '0',
70664                left: '0',
70665                bottom: '0',
70666                right: '0',
70667            },
70668            flexBasis: undefined,
70669        };
70670        _this.onResizeStart = _this.onResizeStart.bind(_this);
70671        _this.onMouseMove = _this.onMouseMove.bind(_this);
70672        _this.onMouseUp = _this.onMouseUp.bind(_this);
70673        return _this;
70674    }
70675    Object.defineProperty(Resizable.prototype, "parentNode", {
70676        get: function () {
70677            if (!this.resizable) {
70678                return null;
70679            }
70680            return this.resizable.parentNode;
70681        },
70682        enumerable: false,
70683        configurable: true
70684    });
70685    Object.defineProperty(Resizable.prototype, "window", {
70686        get: function () {
70687            if (!this.resizable) {
70688                return null;
70689            }
70690            if (!this.resizable.ownerDocument) {
70691                return null;
70692            }
70693            return this.resizable.ownerDocument.defaultView;
70694        },
70695        enumerable: false,
70696        configurable: true
70697    });
70698    Object.defineProperty(Resizable.prototype, "propsSize", {
70699        get: function () {
70700            return this.props.size || this.props.defaultSize || DEFAULT_SIZE;
70701        },
70702        enumerable: false,
70703        configurable: true
70704    });
70705    Object.defineProperty(Resizable.prototype, "size", {
70706        get: function () {
70707            var width = 0;
70708            var height = 0;
70709            if (this.resizable && this.window) {
70710                var orgWidth = this.resizable.offsetWidth;
70711                var orgHeight = this.resizable.offsetHeight;
70712                // HACK: Set position `relative` to get parent size.
70713                //       This is because when re-resizable set `absolute`, I can not get base width correctly.
70714                var orgPosition = this.resizable.style.position;
70715                if (orgPosition !== 'relative') {
70716                    this.resizable.style.position = 'relative';
70717                }
70718                // INFO: Use original width or height if set auto.
70719                width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;
70720                height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;
70721                // Restore original position
70722                this.resizable.style.position = orgPosition;
70723            }
70724            return { width: width, height: height };
70725        },
70726        enumerable: false,
70727        configurable: true
70728    });
70729    Object.defineProperty(Resizable.prototype, "sizeStyle", {
70730        get: function () {
70731            var _this = this;
70732            var size = this.props.size;
70733            var getSize = function (key) {
70734                if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') {
70735                    return 'auto';
70736                }
70737                if (_this.propsSize && _this.propsSize[key] && endsWith(_this.propsSize[key].toString(), '%')) {
70738                    if (endsWith(_this.state[key].toString(), '%')) {
70739                        return _this.state[key].toString();
70740                    }
70741                    var parentSize = _this.getParentSize();
70742                    var value = Number(_this.state[key].toString().replace('px', ''));
70743                    var percent = (value / parentSize[key]) * 100;
70744                    return percent + "%";
70745                }
70746                return getStringSize(_this.state[key]);
70747            };
70748            var width = size && typeof size.width !== 'undefined' && !this.state.isResizing
70749                ? getStringSize(size.width)
70750                : getSize('width');
70751            var height = size && typeof size.height !== 'undefined' && !this.state.isResizing
70752                ? getStringSize(size.height)
70753                : getSize('height');
70754            return { width: width, height: height };
70755        },
70756        enumerable: false,
70757        configurable: true
70758    });
70759    Resizable.prototype.getParentSize = function () {
70760        if (!this.parentNode) {
70761            if (!this.window) {
70762                return { width: 0, height: 0 };
70763            }
70764            return { width: this.window.innerWidth, height: this.window.innerHeight };
70765        }
70766        var base = this.appendBase();
70767        if (!base) {
70768            return { width: 0, height: 0 };
70769        }
70770        // INFO: To calculate parent width with flex layout
70771        var wrapChanged = false;
70772        var wrap = this.parentNode.style.flexWrap;
70773        if (wrap !== 'wrap') {
70774            wrapChanged = true;
70775            this.parentNode.style.flexWrap = 'wrap';
70776            // HACK: Use relative to get parent padding size
70777        }
70778        base.style.position = 'relative';
70779        base.style.minWidth = '100%';
70780        var size = {
70781            width: base.offsetWidth,
70782            height: base.offsetHeight,
70783        };
70784        if (wrapChanged) {
70785            this.parentNode.style.flexWrap = wrap;
70786        }
70787        this.removeBase(base);
70788        return size;
70789    };
70790    Resizable.prototype.bindEvents = function () {
70791        if (this.window) {
70792            this.window.addEventListener('mouseup', this.onMouseUp);
70793            this.window.addEventListener('mousemove', this.onMouseMove);
70794            this.window.addEventListener('mouseleave', this.onMouseUp);
70795            this.window.addEventListener('touchmove', this.onMouseMove, {
70796                capture: true,
70797                passive: false,
70798            });
70799            this.window.addEventListener('touchend', this.onMouseUp);
70800        }
70801    };
70802    Resizable.prototype.unbindEvents = function () {
70803        if (this.window) {
70804            this.window.removeEventListener('mouseup', this.onMouseUp);
70805            this.window.removeEventListener('mousemove', this.onMouseMove);
70806            this.window.removeEventListener('mouseleave', this.onMouseUp);
70807            this.window.removeEventListener('touchmove', this.onMouseMove, true);
70808            this.window.removeEventListener('touchend', this.onMouseUp);
70809        }
70810    };
70811    Resizable.prototype.componentDidMount = function () {
70812        if (!this.resizable || !this.window) {
70813            return;
70814        }
70815        var computedStyle = this.window.getComputedStyle(this.resizable);
70816        this.setState({
70817            width: this.state.width || this.size.width,
70818            height: this.state.height || this.size.height,
70819            flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined,
70820        });
70821    };
70822    Resizable.prototype.componentWillUnmount = function () {
70823        if (this.window) {
70824            this.unbindEvents();
70825        }
70826    };
70827    Resizable.prototype.createSizeForCssProperty = function (newSize, kind) {
70828        var propsSize = this.propsSize && this.propsSize[kind];
70829        return this.state[kind] === 'auto' &&
70830            this.state.original[kind] === newSize &&
70831            (typeof propsSize === 'undefined' || propsSize === 'auto')
70832            ? 'auto'
70833            : newSize;
70834    };
70835    Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
70836        var boundsByDirection = this.props.boundsByDirection;
70837        var direction = this.state.direction;
70838        var widthByDirection = boundsByDirection && hasDirection('left', direction);
70839        var heightByDirection = boundsByDirection && hasDirection('top', direction);
70840        var boundWidth;
70841        var boundHeight;
70842        if (this.props.bounds === 'parent') {
70843            var parent_1 = this.parentNode;
70844            if (parent_1) {
70845                boundWidth = widthByDirection
70846                    ? this.resizableRight - this.parentLeft
70847                    : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
70848                boundHeight = heightByDirection
70849                    ? this.resizableBottom - this.parentTop
70850                    : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
70851            }
70852        }
70853        else if (this.props.bounds === 'window') {
70854            if (this.window) {
70855                boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
70856                boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
70857            }
70858        }
70859        else if (this.props.bounds) {
70860            boundWidth = widthByDirection
70861                ? this.resizableRight - this.targetLeft
70862                : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
70863            boundHeight = heightByDirection
70864                ? this.resizableBottom - this.targetTop
70865                : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
70866        }
70867        if (boundWidth && Number.isFinite(boundWidth)) {
70868            maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
70869        }
70870        if (boundHeight && Number.isFinite(boundHeight)) {
70871            maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
70872        }
70873        return { maxWidth: maxWidth, maxHeight: maxHeight };
70874    };
70875    Resizable.prototype.calculateNewSizeFromDirection = function (client
70875X, clientY) {
70876        var scale = this.props.scale || 1;
70877        var resizeRatio = this.props.resizeRatio || 1;
70878        var _a = this.state, direction = _a.direction, original = _a.original;
70879        var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
70880        var newWidth = original.width;
70881        var newHeight = original.height;
70882        var extraHeight = lockAspectRatioExtraHeight || 0;
70883        var extraWidth = lockAspectRatioExtraWidth || 0;
70884        if (hasDirection('right', direction)) {
70885            newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
70886            if (lockAspectRatio) {
70887                newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
70888            }
70889        }
70890        if (hasDirection('left', direction)) {
70891            newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
70892            if (lockAspectRatio) {
70893                newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
70894            }
70895        }
70896        if (hasDirection('bottom', direction)) {
70897            newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
70898            if (lockAspectRatio) {
70899                newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
70900            }
70901        }
70902        if (hasDirection('top', direction)) {
70903            newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
70904            if (lockAspectRatio) {
70905                newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
70906            }
70907        }
70908        return { newWidth: newWidth, newHeight: newHeight };
70909    };
70910    Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) {
70911        var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth;
70912        var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width;
70913        var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;
70914        var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height;
70915        var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;
70916        var extraHeight = lockAspectRatioExtraHeight || 0;
70917        var extraWidth = lockAspectRatioExtraWidth || 0;
70918        if (lockAspectRatio) {
70919            var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth;
70920            var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth;
70921            var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight;
70922            var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight;
70923            var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
70924            var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
70925            var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
70926            var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
70927            newWidth = lib_clamp(newWidth, lockedMinWidth, lockedMaxWidth);
70928            newHeight = lib_clamp(newHeight, lockedMinHeight, lockedMaxHeight);
70929        }
70930        else {
70931            newWidth = lib_clamp(newWidth, computedMinWidth, computedMaxWidth);
70932            newHeight = lib_clamp(newHeight, computedMinHeight, computedMaxHeight);
70933        }
70934        return { newWidth: newWidth, newHeight: newHeight };
70935    };
70936    Resizable.prototype.setBoundingClientRect = function () {
70937        // For parent boundary
70938        if (this.props.bounds === 'parent') {
70939            var parent_2 = this.parentNode;
70940            if (parent_2) {
70941                var parentRect = parent_2.getBoundingClientRect();
70942                this.parentLeft = parentRect.left;
70943                this.parentTop = parentRect.top;
70944            }
70945        }
70946        // For target(html element) boundary
70947        if (this.props.bounds && typeof this.props.bounds !== 'string') {
70948            var targetRect = this.props.bounds.getBoundingClientRect();
70949            this.targetLeft = targetRect.left;
70950            this.targetTop = targetRect.top;
70951        }
70952        // For boundary
70953        if (this.resizable) {
70954            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
70955            this.resizableLeft = left;
70956            this.resizableRight = right;
70957            this.resizableTop = top_1;
70958            this.resizableBottom = bottom;
70959        }
70960    };
70961    Resizable.prototype.onResizeStart = function (event, direction) {
70962        if (!this.resizable || !this.window) {
70963            return;
70964        }
70965        var clientX = 0;
70966        var clientY = 0;
70967        if (event.nativeEvent && isMouseEvent(event.nativeEvent)) {
70968            clientX = event.nativeEvent.clientX;
70969            clientY = event.nativeEvent.clientY;
70970            // When user click with right button the resize is stuck in resizing mode
70971            // until users clicks again, dont continue if right click is used.
70972            // HACK: MouseEvent does not have `which` from flow-bin v0.68.
70973            if (event.nativeEvent.which === 3) {
70974                return;
70975            }
70976        }
70977        else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) {
70978            clientX = event.nativeEvent.touches[0].clientX;
70979            clientY = event.nativeEvent.touches[0].clientY;
70980        }
70981        if (this.props.onResizeStart) {
70982            if (this.resizable) {
70983                var startResize = this.props.onResizeStart(event, direction, this.resizable);
70984                if (startResize === false) {
70985                    return;
70986                }
70987            }
70988        }
70989        // Fix #168
70990        if (this.props.size) {
70991            if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {
70992                this.setState({ height: this.props.size.height });
70993            }
70994            if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {
70995                this.setState({ width: this.props.size.width });
70996            }
70997        }
70998        // For lockAspectRatio case
70999        this.ratio =
71000            typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height;
71001        var flexBasis;
71002        var computedStyle = this.window.getComputedStyle(this.resizable);
71003        if (computedStyle.flexBasis !== 'auto') {
71004            var parent_3 = this.parentNode;
71005            if (parent_3) {
71006                var dir = this.window.getComputedStyle(parent_3).flexDirection;
71007                this.flexDir = dir.startsWith('row') ? 'row' : 'column';
71008                flexBasis = computedStyle.flexBasis;
71009            }
71010        }
71011        // For boundary
71012        this.setBoundingClientRect();
71013        this.bindEvents();
71014        var state = {
71015            original: {
71016                x: clientX,
71017                y: clientY,
71018                width: this.size.width,
71019                height: this.size.height,
71020            },
71021            isResizing: true,
71022            backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }),
71023            direction: direction,
71024            flexBasis: flexBasis,
71025        };
71026        this.setState(state);
71027    };
71028    Resizable.prototype.onMouseMove = function (event) {
71029        if (!this.state.isResizing || !this.resizable || !this.window) {
71030            return;
71031        }
71032        if (this.window.TouchEvent && isTouchEvent(event)) {
71033            try {
71034                event.preventDefault();
71035                event.stopPropagation();
71036            }
71037            catch (e) {
71038                // Ignore on fail
71039            }
71040        }
71041        var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight;
71042        var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX;
71043        var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY;
71044        var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height;
71045        var parentSize = this.getParentSize();
71046        var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight);
71047        maxWidth = max.maxWidth;
71048        maxHeight = max.maxHeight;
71049        minWidth = max.minWidth;
71050        minHeight = max.minHeight;
71051        // Calculate new size
71052        var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth;
71053        // Calculate max size from boundary settings
71054        var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);
71055        // Calculate new size from aspect ratio
71056        var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight });
71057        newWidth = newSize.newWidth;
71058        newHeight = newSize.newHeight;
71059        if (this.props.grid) {
71060            var newGridWidth = snap(newWidth, this.props.grid[0]);
71061            var newGridHeight = snap(newHeight, this.props.grid[1]);
71062            var gap = this.props.snapGap || 0;
71063            newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
71064            newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
71065        }
71066        if (this.props.snap && this.props.snap.x) {
71067            newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);
71068        }
71069        if (this.props.snap && this.props.snap.y) {
71070            newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);
71071        }
71072        var delta = {
71073            width: newWidth - original.width,
71074            height: newHeight - original.height,
71075        };
71076        if (width && typeof width === 'string') {
71077            if (endsWith(width, '%')) {
71078                var percent = (newWidth / parentSize.width) * 100;
71079                newWidth = percent + "%";
71080            }
71081            else if (endsWith(width, 'vw')) {
71082                var vw = (newWidth / this.window.innerWidth) * 100;
71083                newWidth = vw + "vw";
71084            }
71085            else if (endsWith(width, 'vh')) {
71086                var vh = (newWidth / this.window.innerHeight) * 100;
71087                newWidth = vh + "vh";
71088            }
71089        }
71090        if (height && typeof height === 'string') {
71091            if (endsWith(height, '%')) {
71092                var percent = (newHeight / parentSize.height) * 100;
71093                newHeight = percent + "%";
71094            }
71095            else if (endsWith(height, 'vw')) {
71096                var vw = (newHeight / this.window.innerWidth) * 100;
71097                newHeight = vw + "vw";
71098            }
71099            else if (endsWith(height, 'vh')) {
71100                var vh = (newHeight / this.window.innerHeight) * 100;
71101                newHeight = vh + "vh";
71102            }
71103        }
71104        var newState = {
71105            width: this.createSizeForCssProperty(newWidth, 'width'),
71106            height: this.createSizeForCssProperty(newHeight, 'height'),
71107        };
71108        if (this.flexDir === 'row') {
71109            newState.flexBasis = newState.width;
71110        }
71111        else if (this.flexDir === 'column') {
71112            newState.flexBasis = newState.height;
71113        }
71114        this.setState(newState);
71115        if (this.props.onResize) {
71116            this.props.onResize(event, direction, this.resizable, delta);
71117        }
71118    };
71119    Resizable.prototype.onMouseUp = function (event) {
71120        var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original;
71121        if (!isResizing || !this.resizable) {
71122            return;
71123        }
71124        var delta = {
71125            width: this.size.width - original.width,
71126            height: this.size.height - original.height,
71127        };
71128        if (this.props.onResizeStop) {
71129            this.props.onResizeStop(event, direction, this.resizable, delta);
71130        }
71131        if (this.props.size) {
71132            this.setState(this.props.size);
71133        }
71134        this.unbindEvents();
71135        this.setState({
71136            isResizing: false,
71137            backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: 'auto' }),
71138        });
71139    };
71140    Resizable.prototype.updateSize = function (size) {
71141        this.setState({ width: size.width, height: size.height });
71142    };
71143    Resizable.prototype.renderResizer = function () {
71144        var _this = this;
71145        var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
71146        if (!enable) {
71147            return null;
71148        }
71149        var resizers = Object.keys(enable).map(function (dir) {
71150            if (enable[dir] !== false) {
71151                return (external_React_.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null));
71152            }
71153            return null;
71154        });
71155        // #93 Wrap the resize box in span (will not break 100% width/height)
71156        return (external_React_.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers));
71157    };
71158    Resizable.prototype.render = function () {
71159        var _this = this;
71160        var extendsProps = Object.keys(this.props).reduce(function (acc, key) {
71161            if (definedProps.indexOf(key) !== -1) {
71162                return acc;
71163            }
71164            acc[key] = _this.props[key];
71165            return acc;
71166        }, {});
71167        var style = lib_assign(lib_assign(lib_assign({ position: 'relative', userSelect: this.state.isResizing ? 'none' : 'auto' }, this.props.style), this.sizeStyle), { maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, minHeight: this.props.minHeight, boxSizing: 'border-box', flexShrink: 0 });
71168        if (this.state.flexBasis) {
71169            style.flexBasis = this.state.flexBasis;
71170        }
71171        var Wrapper = this.props.as || 'div';
71172        return (external_React_.createElement(Wrapper, lib_assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps),
71173            this.state.isResizing && external_React_.createElement("div", { style: this.state.backgroundStyle }),
71174            this.props.children,
71175            this.renderResizer()));
71176    };
71177    Resizable.defaultProps = {
71178        as: 'div',
71179        onResizeStart: function () { },
71180        onResize: function () { },
71181        onResizeStop: function () { },
71182        enable: {
71183            top: true,
71184            right: true,
71185            bottom: true,
71186            left: true,
71187            topRight: true,
71188            bottomRight: true,
71189            bottomLeft: true,
71190            topLeft: true,
71191        },
71192        style: {},
71193        grid: [1, 1],
71194        lockAspectRatio: false,
71195        lockAspectRatioExtraWidth: 0,
71196        lockAspectRatioExtraHeight: 0,
71197        scale: 1,
71198        resizeRatio: 1,
71199        snapGap: 0,
71200    };
71201    return Resizable;
71202}(external_React_.PureComponent));
71203
71204
71205;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/utils.js
71206/**
71207 * WordPress dependencies
71208 */
71209
71210
71211const utils_noop = () => {};
71212const POSITIONS = {
71213  bottom: 'bottom',
71214  corner: 'corner'
71215};
71216/**
71217 * Custom hook that manages resize listener events. It also provides a label
71218 * based on current resize width x height values.
71219 *
71220 * @param props
71221 * @param props.axis        Only shows the label corresponding to the axis.
71222 * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
71223 * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
71224 * @param props.position    Adjusts label value.
71225 * @param props.showPx      Whether to add `PX` to the label.
71226 *
71227 * @return Properties for hook.
71228 */
71229function useResizeLabel({
71230  axis,
71231  fadeTimeout = 180,
71232  onResize = utils_noop,
71233  position = POSITIONS.bottom,
71234  showPx = false
71235}) {
71236  /*
71237   * The width/height values derive from this special useResizeObserver hook.
71238   * This custom hook uses the ResizeObserver API to listen for resize events.
71239   */
71240  const [resizeListener, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
71241
71242  /*
71243   * Indicates if the x/y axis is preferred.
71244   * If set, we will avoid resetting the moveX and moveY values.
71245   * This will allow for the preferred axis values to persist in the label.
71246   */
71247  const isAxisControlled = !!axis;
71248
71249  /*
71250   * The moveX and moveY values are used to track whether the label should
71251   * display width, height, or width x height.
71252   */
71253  const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false);
71254  const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false);
71255
71256  /*
71257   * Cached dimension values to check for width/height updates from the
71258   * sizes property from useResizeAware()
71259   */
71260  const {
71261    width,
71262    height
71263  } = sizes;
71264  const heightRef = (0,external_wp_element_namespaceObject.useRef)(height);
71265  const widthRef = (0,external_wp_element_namespaceObject.useRef)(width);
71266
71267  /*
71268   * This timeout is used with setMoveX and setMoveY to determine of
71269   * both width and height values have changed at (roughly) the same time.
71270   */
71271  const moveTimeoutRef = (0,external_wp_element_namespaceObject.useRef)();
71272  const debounceUnsetMoveXY = (0,external_wp_element_namespaceObject.useCallback)(() => {
71273    const unsetMoveXY = () => {
71274      /*
71275       * If axis is controlled, we will avoid resetting the moveX and moveY values.
71276       * This will allow for the preferred axis values to persist in the label.
71277       */
71278      if (isAxisControlled) return;
71279      setMoveX(false);
71280      setMoveY(false);
71281    };
71282    if (moveTimeoutRef.current) {
71283      window.clearTimeout(moveTimeoutRef.current);
71284    }
71285    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
71286  }, [fadeTimeout, isAxisControlled]);
71287  (0,external_wp_element_namespaceObject.useEffect)(() => {
71288    /*
71289     * On the initial render of useResizeAware, the height and width values are
71290     * null. They are calculated then set using via an internal useEffect hook.
71291     */
71292    const isRendered = width !== null || height !== null;
71293    if (!isRendered) return;
71294    const didWidthChange = width !== widthRef.current;
71295    const didHeightChange = height !== heightRef.current;
71296    if (!didWidthChange && !didHeightChange) return;
71297
71298    /*
71299     * After the initial render, the useResizeAware will set the first
71300     * width and height values. We'll sync those values with our
71301     * width and height refs. However, we shouldn't render our Tooltip
71302     * label on this first cycle.
71303     */
71304    if (width && !widthRef.current && height && !heightRef.current) {
71305      widthRef.current = width;
71306      heightRef.current = height;
71307      return;
71308    }
71309
71310    /*
71311     * After the first cycle, we can track width and height changes.
71312     */
71313    if (didWidthChange) {
71314      setMoveX(true);
71315      widthRef.current = width;
71316    }
71317    if (didHeightChange) {
71318      setMoveY(true);
71319      heightRef.current = height;
71320    }
71321    onResize({
71322      width,
71323      height
71324    });
71325    debounceUnsetMoveXY();
71326  }, [width, height, onResize, debounceUnsetMoveXY]);
71327  const label = getSizeLabel({
71328    axis,
71329    height,
71330    moveX,
71331    moveY,
71332    position,
71333    showPx,
71334    width
71335  });
71336  return {
71337    label,
71338    resizeListener
71339  };
71340}
71341/**
71342 * Gets the resize label based on width and height values (as well as re
71342cent changes).
71343 *
71344 * @param props
71345 * @param props.axis     Only shows the label corresponding to the axis.
71346 * @param props.height   Height value.
71347 * @param props.moveX    Recent width (x axis) changes.
71348 * @param props.moveY    Recent width (y axis) changes.
71349 * @param props.position Adjusts label value.
71350 * @param props.showPx   Whether to add `PX` to the label.
71351 * @param props.width    Width value.
71352 *
71353 * @return The rendered label.
71354 */
71355function getSizeLabel({
71356  axis,
71357  height,
71358  moveX = false,
71359  moveY = false,
71360  position = POSITIONS.bottom,
71361  showPx = false,
71362  width
71363}) {
71364  if (!moveX && !moveY) return undefined;
71365
71366  /*
71367   * Corner position...
71368   * We want the label to appear like width x height.
71369   */
71370  if (position === POSITIONS.corner) {
71371    return `${width} x ${height}`;
71372  }
71373
71374  /*
71375   * Other POSITIONS...
71376   * The label will combine both width x height values if both
71377   * values have recently been changed.
71378   *
71379   * Otherwise, only width or height will be displayed.
71380   * The `PX` unit will be added, if specified by the `showPx` prop.
71381   */
71382  const labelUnit = showPx ? ' px' : '';
71383  if (axis) {
71384    if (axis === 'x' && moveX) {
71385      return `${width}${labelUnit}`;
71386    }
71387    if (axis === 'y' && moveY) {
71388      return `${height}${labelUnit}`;
71389    }
71390  }
71391  if (moveX && moveY) {
71392    return `${width} x ${height}`;
71393  }
71394  if (moveX) {
71395    return `${width}${labelUnit}`;
71396  }
71397  if (moveY) {
71398    return `${height}${labelUnit}`;
71399  }
71400  return undefined;
71401}
71402
71403;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
71404
71405function resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
71406/**
71407 * External dependencies
71408 */
71409
71410/**
71411 * Internal dependencies
71412 */
71413
71414
71415const resize_tooltip_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
71416  target: "e1wq7y4k3"
71417} : 0)( true ? {
71418  name: "1cd7zoc",
71419  styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0"
71420} : 0);
71421const TooltipWrapper = emotion_styled_base_browser_esm("div",  true ? {
71422  target: "e1wq7y4k2"
71423} : 0)( true ? {
71424  name: "ajymcs",
71425  styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear"
71426} : 0);
71427const resize_tooltip_styles_Tooltip = emotion_styled_base_browser_esm("div",  true ? {
71428  target: "e1wq7y4k1"
71429} : 0)("background:", COLORS.gray[900], ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + ( true ? "" : 0));
71430
71431// TODO: Resolve need to use &&& to increase specificity
71432// https://github.com/WordPress/gutenberg/issues/18483
71433
71434const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
71435  target: "e1wq7y4k0"
71436} : 0)("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0));
71437
71438;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/label.js
71439
71440/**
71441 * External dependencies
71442 */
71443
71444/**
71445 * WordPress dependencies
71446 */
71447
71448
71449
71450/**
71451 * Internal dependencies
71452 */
71453
71454
71455
71456const CORNER_OFFSET = 4;
71457const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
71458function resize_tooltip_label_Label({
71459  label,
71460  position = POSITIONS.corner,
71461  zIndex = 1000,
71462  ...props
71463}, ref) {
71464  const showLabel = !!label;
71465  const isBottom = position === POSITIONS.bottom;
71466  const isCorner = position === POSITIONS.corner;
71467  if (!showLabel) return null;
71468  let style = {
71469    opacity: showLabel ? 1 : undefined,
71470    zIndex
71471  };
71472  let labelStyle = {};
71473  if (isBottom) {
71474    style = {
71475      ...style,
71476      position: 'absolute',
71477      bottom: CURSOR_OFFSET_TOP * -1,
71478      left: '50%',
71479      transform: 'translate(-50%, 0)'
71480    };
71481    labelStyle = {
71482      transform: `translate(0, 100%)`
71483    };
71484  }
71485  if (isCorner) {
71486    style = {
71487      ...style,
71488      position: 'absolute',
71489      top: CORNER_OFFSET,
71490      right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET,
71491      left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined
71492    };
71493  }
71494  return (0,external_wp_element_namespaceObject.createElement)(TooltipWra
71494pper, {
71495    "aria-hidden": "true",
71496    className: "components-resizable-tooltip__tooltip-wrapper",
71497    ref: ref,
71498    style: style,
71499    ...props
71500  }, (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Tooltip, {
71501    className: "components-resizable-tooltip__tooltip",
71502    style: labelStyle
71503  }, (0,external_wp_element_namespaceObject.createElement)(LabelText, {
71504    as: "span"
71505  }, label)));
71506}
71507const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label);
71508/* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent);
71509
71510;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/index.js
71511
71512/**
71513 * External dependencies
71514 */
71515
71516/**
71517 * WordPress dependencies
71518 */
71519
71520
71521/**
71522 * Internal dependencies
71523 */
71524
71525
71526
71527const resize_tooltip_noop = () => {};
71528function ResizeTooltip({
71529  axis,
71530  className,
71531  fadeTimeout = 180,
71532  isVisible = true,
71533  labelRef,
71534  onResize = resize_tooltip_noop,
71535  position = POSITIONS.bottom,
71536  showPx = true,
71537  zIndex = 1000,
71538  ...props
71539}, ref) {
71540  const {
71541    label,
71542    resizeListener
71543  } = useResizeLabel({
71544    axis,
71545    fadeTimeout,
71546    onResize,
71547    showPx,
71548    position
71549  });
71550  if (!isVisible) return null;
71551  const classes = classnames_default()('components-resize-tooltip', className);
71552  return (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Root, {
71553    "aria-hidden": "true",
71554    className: classes,
71555    ref: ref,
71556    ...props
71557  }, resizeListener, (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_label, {
71558    "aria-hidden": props['aria-hidden'],
71559    label: label,
71560    position: position,
71561    ref: labelRef,
71562    zIndex: zIndex
71563  }));
71564}
71565const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip);
71566/* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent);
71567
71568;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/index.js
71569
71570/**
71571 * WordPress dependencies
71572 */
71573
71574
71575/**
71576 * External dependencies
71577 */
71578
71579
71580/**
71581 * Internal dependencies
71582 */
71583
71584const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
71585const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
71586const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
71587const HANDLE_CLASSES = {
71588  top: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
71589  right: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
71590  bottom: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
71591  left: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
71592  topLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
71593  topRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
71594  bottomRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
71595  bottomLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
71596};
71597
71598// Removes the inline styles in the drag handles.
71599const HANDLE_STYLES_OVERRIDES = {
71600  width: undefined,
71601  height: undefined,
71602  top: undefined,
71603  right: undefined,
71604  bottom: undefined,
71605  left: undefined
71606};
71607const HANDLE_STYLES = {
71608  top: HANDLE_STYLES_OVERRIDES,
71609  right: HANDLE_STYLES_OVERRIDES,
71610  bottom: HANDLE_STYLES_OVERRIDES,
71611  left: HANDLE_STYLES_OVERRIDES,
71612  topLeft: HANDLE_STYLES_OVERRIDES,
71613  topRight: HANDLE_STYLES_OVERRIDES,
71614  bottomRight: HANDLE_STYLES_OVERRIDES,
71615  bottomLeft: HANDLE_STYLES_OVERRIDES
71616};
71617function UnforwardedResizableBox({
71618  className,
71619  children,
71620  showHandle = true,
71621  __experimentalShowTooltip: showTooltip = false,
71622  __experimentalTooltipProps: tooltipProps = {},
71623  ...props
71624}, ref) {
71625  return (0,external_wp_element_namespaceObject.createElement)(Resizable, {
71626    className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className),
71627    handleClasses: HANDLE_CLASSES,
71628    handleStyles: HANDLE_STYLES,
71629    ref: ref,
71630    ...props
71631  }, children, showTooltip && (0,external_wp_element_namespaceObject.createElement)(resize_tooltip, {
71632    ...tooltipProps
71633  }));
71634}
71635const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox);
71636/* harmony default export */ const resizable_box = (ResizableBox);
71637
71638;// CONCATENATED MODULE: ./packages/components/build-module/responsive-wrapper/index.js
71639
71640/**
71641 * External dependencies
71642 */
71643
71644
71645/**
71646 * WordPress dependencies
71647 */
71648
71649
71650/**
71651 * Internal dependencies
71652 */
71653
71654/**
71655 * A wrapper component that maintains its aspect ratio when resized.
71656 *
71657 * ```jsx
71658 * import { ResponsiveWrapper } from '@wordpress/components';
71659 *
71660 * const MyResponsiveWrapper = () => (
71661 * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
71662 * 		<img
71663 * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
71664 * 			alt="WordPress"
71665 * 		/>
71666 * 	</ResponsiveWrapper>
71667 * );
71668 * ```
71669 */
71670function ResponsiveWrapper({
71671  naturalWidth,
71672  naturalHeight,
71673  children,
71674  isInline = false
71675}) {
71676  if (external_wp_element_namespaceObject.Children.count(children) !== 1) {
71677    return null;
71678  }
71679  const TagName = isInline ? 'span' : 'div';
71680  let aspectRatio;
71681  if (naturalWidth && naturalHeight) {
71682    aspectRatio = `${naturalWidth} / ${naturalHeight}`;
71683  }
71684  return (0,external_wp_element_namespaceObject.createElement)(TagName, {
71685    className: "components-responsive-wrapper"
71686  }, (0,external_wp_element_namespaceObject.createElement)("div", null, (0,external_wp_element_namespaceObject.cloneElement)(children, {
71687    className: classnames_default()('components-responsive-wrapper__content', children.props.className),
71688    style: {
71689      ...children.props.style,
71690      aspectRatio
71691    }
71692  })));
71693}
71694/* harmony default export */ const responsive_wrapper = (ResponsiveWrapper);
71695
71696;// CONCATENATED MODULE: ./packages/components/build-module/sandbox/index.js
71697
71698/**
71699 * WordPress dependencies
71700 */
71701
71702
71703
71704/**
71705 * Internal dependencies
71706 */
71707
71708const observeAndResizeJS = function () {
71709  const {
71710    MutationObserver
71711  } = window;
71712  if (!MutationObserver || !document.body || !window.parent) {
71713    return;
71714  }
71715  function sendResize() {
71716    const clientBoundingRect = document.body.getBoundingClientRect();
71717    window.parent.postMessage({
71718      action: 'resize',
71719      width: clientBoundingRect.width,
71720      height: clientBoundingRect.height
71721    }, '*');
71722  }
71723  const observer = new MutationObserver(sendResize);
71724  observer.observe(document.body, {
71725    attributes: true,
71726    attributeOldValue: false,
71727    characterData: true,
71728    characterDataOldValue: false,
71729    childList: true,
71730    subtree: true
71731  });
71732  window.addEventListener('load', sendResize, true);
71733
71734  // Hack: Remove viewport unit styles, as these are relative
71735  // the iframe root and interfere with our mechanism for
71736  // determining the unconstrained page bounds.
71737  function removeViewportStyles(ruleOrNode) {
71738    if (ruleOrNode.style) {
71739      ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {
71740        if (/^\\d+(vmin|vmax|vh|vw)$/.test(ruleOrNode.style[style])) {
71741          ruleOrNode.style[style] = '';
71742        }
71743      });
71744    }
71745  }
71746  Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);
71747  Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {
71748    Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles);
71749  });
71750  document.body.style.position = 'absolute';
71751  document.body.style.width = '100%';
71752  document.body.setAttribute('data-resizable-iframe-connected', '');
71753  sendResize();
71754
71755  // Resize events can change the width of elements with 100% width, but we don't
71756  // get an DOM mutations for that, so do the resize when the window is resized, too.
71757  window.addEventListener('resize', sendResize, true);
71758};
71759
71760// TODO: These styles shouldn't be coupled with WordPress.
71761const style = `
71762	body {
71763		margin: 0;
71764	}
71765	html,
71766	body,
71767	body > div {
71768		width: 100%;
71769	}
71770	html.wp-has-aspect-ratio,
71771	body.wp-has-aspect-ratio,
71772	body.wp-has-aspect-ratio > div,
71773	body.wp-has-aspect-ratio > div iframe {
71774		width: 100%;
71775		height: 100%;
71776		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
71777	}
71778	body > div > * {
71779		margin-top: 0 !important; /* Has to have !important to override inline styles. */
71780		margin-bottom: 0 !important;
71781	}
71782`;
71783
71784/**
71785 * This component provides an isolated environment for arbitrary HTML via iframes.
71786 *
71787 * ```jsx
71788 * import { SandBox } from '@wordpress/components';
71789 *
71790 * const MySandBox = () => (
71791 * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
71792 * );
71793 * ```
71794 */
71795function SandBox({
71796  html = '',
71797  title = '',
71798  type,
71799  styles = [],
71800  scripts = [],
71801  onFocus
71802}) {
71803  const ref = (0,external_wp_element_namespaceObject.useRef)();
71804  const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0);
71805  const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(0);
71806  function isFrameAccessible() {
71807    try {
71808      return !!ref.current?.contentDocument?.body;
71809    } catch (e) {
71810      return false;
71811    }
71812  }
71813  function trySandBox(forceRerender = false) {
71814    if (!isFrameAccessible()) {
71815      return;
71816    }
71817    const {
71818      contentDocument,
71819      ownerDocument
71820    } = ref.current;
71821    if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {
71822      return;
71823    }
71824
71825    // Put the html snippet into a html document, and then write it to the iframe's document
71826    // we can use this in the future to inject custom styles or scripts.
71827    // Scripts go into the body rather than the head, to support embedded content such as Instagram
71828    // that expect the scripts to be part of the body.
71829    const htmlDoc = (0,external_wp_element_namespaceObject.createElement)("html", {
71830      lang: ownerDocument.documentElement.lang,
71831      className: type
71832    }, (0,external_wp_element_namespaceObject.createElement)("head", null, (0,external_wp_element_namespaceObject.createElement)("title", null, title), (0,external_wp_element_namespaceObject.createElement)("style", {
71833      dangerouslySetInnerHTML: {
71834        __html: style
71835      }
71836    }), styles.map((rules, i) => (0,external_wp_element_namespaceObject.createElement)("style", {
71837      key: i,
71838      dangerouslySetInnerHTML: {
71839        __html: rules
71840      }
71841    }))), (0,external_wp_element_namespaceObject.createElement)("body", {
71842      "data-resizable-iframe-connected": "data-resizable-iframe-connected",
71843      className: type
71844    }, (0,external_wp_element_namespaceObject.createElement)("div", {
71845      dangerouslySetInnerHTML: {
71846        __html: html
71847      }
71848    }), (0,external_wp_element_namespaceObject.createElement)("script", {
71849      type: "text/javascript",
71850      dangerouslySetInnerHTML: {
71851        __html: `(${observeAndResizeJS.toString()})();`
71852      }
71853    }), scripts.map(src => (0,external_wp_element_namespaceObject.createElement)("script", {
71854      key: src,
71855      src: src
71856    }))));
71857
71858    // Writing the document like this makes it act in the same way as if it was
71859    // loaded over the network, so DOM creation and mutation, script execution, etc.
71860    // all work as expected.
71861    contentDocument.open();
71862    contentDocument.write('<!DOCTYPE html>' + (0,external_wp_element_namespaceObject.renderToString)(htmlDoc));
71863    contentDocument.close();
71864  }
71865  (0,external_wp_element_namespaceObject.useEffect)(() => {
71866    trySandBox();
71867    function tryNoForceSandBox() {
71868      trySandBox(false);
71869    }
71870    function checkMessageForResize(event) {
71871      const iframe = ref.current;
71872
71873      // Verify that the mounted element is the source of the message.
71874      if (!iframe || iframe.contentWindow !== event.source) {
71875        return;
71876      }
71877
71878      // Attempt to parse the message data as JSON if passed as string.
71879      let data = event.data || {};
71880      if ('string' === typeof data) {
71881        try {
71882          data = JSON.parse(data);
71883        } catch (e) {}
71884      }
71885
71886      // Update the state only if the message is formatted as we expect,
71887      // i.e. as an object with a 'resize' action.
71888      if ('resize' !== data.action) {
71889        return;
71890      }
71891      setWidth(data.width);
71892      setHeight(data.height);
71893    }
71894    const iframe = ref.current;
71895    const defaultView = iframe?.ownerDocument?.defaultView;
71896
71897    // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
71898    // after reordering the containing block. See these two issues for more details:
71899    // https://github.com/WordPress/gutenberg/issues/6146
71900    // https://github.com/facebook/react/issues/18752
71901    iframe?.addEventListener('load', tryNoForceSandBox, false);
71902    defaultView?.addEventListener('message', checkMessageForResize);
71903    return () => {
71904      iframe?.removeEventListener('load', tryNoForceSandBox, false);
71905      defaultView?.removeEventListener('message', checkMessageForResize);
71906    };
71907    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
71908    // See https://github.com/WordPress/gutenberg/pull/44378
71909    // eslint-disable-next-line react-hooks/exhaustive-deps
71910  }, []);
71911  (0,external_wp_element_namespaceObject.useEffect)(() => {
71912    trySandBox();
71913    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
71914    // See https://github.com/WordPress/gutenberg/pull/44378
71915    // eslint-disable-next-line react-hooks/exhaustive-deps
71916  }, [title, styles, scripts]);
71917  (0,external_wp_element_namespaceObject.useEffect)(() => {
71918    trySandBox(true);
71919    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
71920    // See https://github.com/WordPress/gutenberg/pull/44378
71921    // eslint-disable-next-line react-hooks/exhaustive-deps
71922  }, [html, type]);
71923  return (0,external_wp_element_namespaceObject.createElement)("iframe", {
71924    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]),
71925    title: title,
71926    className: "components-sandbox",
71927    sandbox: "allow-scripts allow-same-origin allow-presentation",
71928    onFocus: onFocus,
71929    width: Math.ceil(width),
71930    height: Math.ceil(height)
71931  });
71932}
71933/* harmony default export */ const sandbox = (SandBox);
71934
71935;// CONCATENATED MODULE: ./packages/components/build-module/snackbar/index.js
71936
71937/**
71938 * External dependencies
71939 */
71940
71941
71942
71943/**
71944 * WordPress dependencies
71945 */
71946
71947
71948
71949
71950
71951/**
71952 * Internal dependencies
71953 */
71954
71955const NOTICE_TIMEOUT = 10000;
71956
71957/**
71958 * Custom hook which announces the message with the given politeness, if a
71959 * valid message is provided.
71960 *
71961 * @param message    Message to announce.
71962 * @param politeness Politeness to announce.
71963 */
71964function snackbar_useSpokenMessage(message, politeness) {
71965  const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message);
71966  (0,external_wp_element_namespaceObject.useEffect)(() => {
71967    if (spokenMessage) {
71968      (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness);
71969    }
71970  }, [spokenMessage, politeness]);
71971}
71972function UnforwardedSnackbar({
71973  className,
71974  children,
71975  spokenMessage = children,
71976  politeness = 'polite',
71977  actions = [],
71978  onRemove,
71979  icon = null,
71980  explicitDismiss = false,
71981  // onDismiss is a callback executed when the snackbar is dismissed.
71982  // It is distinct from onRemove, which _looks_ like a callback but is
71983  // actually the function to call to remove the snackbar from the UI.
71984  onDismiss,
71985  listRef
71986}, ref) {
71987  function dismissMe(event) {
71988    if (event && event.preventDefault) {
71989      event.preventDefault();
71990    }
71991
71992    // Prevent focus loss by moving it to the list element.
71993    listRef?.current?.focus();
71994    onDismiss?.();
71995    onRemove?.();
71996  }
71997  function onActionClick(event, onClick) {
71998    event.stopPropagation();
71999    onRemove?.();
72000    if (onClick) {
72001      onClick(event);
72002    }
72003  }
72004  snackbar_useSpokenMessage(spokenMessage, politeness);
72005
72006  // Only set up the timeout dismiss if we're not explicitly dismissing.
72007  (0,external_wp_element_namespaceObject.useEffect)(() => {
72008    const timeoutHandle = setTimeout(() => {
72009      if (!explicitDismiss) {
72010        onDismiss?.();
72011        onRemove?.();
72012      }
72013    }, NOTICE_TIMEOUT);
72014    return () => clearTimeout(timeoutHandle);
72015  }, [onDismiss, onRemove, explicitDismiss]);
72016  const classes = classnames_default()(className, 'components-snackbar', {
72017    'components-snackbar-explicit-dismiss': !!explicitDismiss
72018  });
72019  if (actions && actions.length > 1) {
72020    // We need to inform developers that snackbar only accepts 1 action.
72021     false ? 0 : void 0;
72022    // return first element only while keeping it inside an array
72023    actions = [actions[0]];
72024  }
72025  const snackbarContentClassnames = classnames_default()('components-snackbar__content', {
72026    'components-snackbar__content-with-icon': !!icon
72027  });
72028  return (0,external_wp_element_namespaceObject.createElement)("div", {
72029    ref: ref,
72030    className: classes,
72031    onClick: !explicitDismiss ? dismissMe : undefined,
72032    tabIndex: 0,
72033    role: !explicitDismiss ? 'button' : '',
72034    onKeyPress: !explicitDismiss ? dismissMe : undefined,
72035    "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : ''
72036  }, (0,external_wp_element_namespaceObject.createElement)("div", {
72037    className: snackbarContentClassnames
72038  }, icon && (0,external_wp_element_namespaceObject.createElement)("div", {
72039    className: "components-snackbar__icon"
72040  }, icon), children, actions.map(({
72041    label,
72042    onClick,
72043    url
72044  }, index) => {
72045    return (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
72046      key: index,
72047      href: url,
72048      variant: "tertiary",
72049      onClick: event => onActionClick(event, onClick),
72050      className: "components-snackbar__action"
72051    }, label);
72052  }), explicitDismiss && (0,external_wp_element_namespaceObject.createElement)("span", {
72053    role: "button",
72054    "aria-label": "Dismiss this notice",
72055    tabIndex: 0,
72056    className: "components-snackbar__dismiss-button",
72057    onClick: dismissMe,
72058    onKeyPress: dismissMe
72059  }, "\u2715")));
72060}
72061
72062/**
72063 * A Snackbar displays a succinct message that is cleared out after a small delay.
72064 *
72065 * It can also offer the user options, like viewing a published post.
72066 * But these options should also be available elsewhere in the UI.
72067 *
72068 * ```jsx
72069 * const MySnackbarNotice = () => (
72070 *   <Snackbar>Post published successfully.</Snackbar>
72071 * );
72072 * ```
72073 */
72074const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSnackbar);
72075/* harmony default export */ const snackbar = (Snackbar);
72076
72077;// CONCATENATED MODULE: ./packages/components/build-module/snackbar/list.js
72078
72079/**
72080 * External dependencies
72081 */
72082
72083
72084/**
72085 * WordPress dependencies
72086 */
72087
72088
72089
72090/**
72091 * Internal dependencies
72092 */
72093
72094
72095const SNACKBAR_VARIANTS = {
72096  init: {
72097    height: 0,
72098    opacity: 0
72099  },
72100  open: {
72101    height: 'auto',
72102    opacity: 1,
72103    transition: {
72104      height: {
72105        type: 'tween',
72106        duration: 0.3,
72107        ease: [0, 0, 0.2, 1]
72108      },
72109      opacity: {
72110        type: 'tween',
72111        duration: 0.25,
72112        delay: 0.05,
72113        ease: [0, 0, 0.2, 1]
72114      }
72115    }
72116  },
72117  exit: {
72118    opacity: 0,
72119    transition: {
72120      type: 'tween',
72121      duration: 0.1,
72122      ease: [0, 0, 0.2, 1]
72123    }
72124  }
72125};
72126
72127/**
72128 * Renders a list of notices.
72129 *
72130 * ```jsx
72131 * const MySnackbarListNotice = () => (
72132 *   <SnackbarList
72133 *     notices={ notices }
72134 *     onRemove={ removeNotice }
72135 *   />
72136 * );
72137 * ```
72138 */
72139function SnackbarList({
72140  notices,
72141  className,
72142  children,
72143  onRemove
72144}) {
72145  const listRef = (0,external_wp_element_namespaceObject.useRef)(null);
72146  const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
72147  className = classnames_default()('components-snackbar-list', className);
72148  const removeNotice = notice => () => onRemove?.(notice.id);
72149  return (0,external_wp_element_namespaceObject.createElement)("div", {
72150    className: className,
72151    tabIndex: -1,
72152    ref: listRef
72153  }, children, (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, notices.map(notice => {
72154    const {
72155      content,
72156      ...restNotice
72157    } = notice;
72158    return (0,external_wp_element_namespaceObject.createElement)(motion.div, {
72159      layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations
72160      ,
72161      initial: 'init',
72162      animate: 'open',
72163      exit: 'exit',
72164      key: notice.id,
72165      variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
72166    }, (0,external_wp_element_namespaceObject.createElement)("div", {
72167      className: "components-snackbar-list__notice-container"
72168    }, (0,external_wp_element_namespaceObject.createElement)(snackbar, {
72169      ...restNotice,
72170      onRemove: removeNotice(notice),
72171      listRef: listRef
72172    }, notice.content)));
72173  })));
72174}
72175/* harmony default export */ const snackbar_list = (SnackbarList);
72176
72177;// CONCATENATED MODULE: ./packages/components/build-module/spinner/styles.js
72178
72179function spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
72180/**
72181 * External dependencies
72182 */
72183
72184
72185
72186/**
72187 * Internal dependencies
72188 */
72189
72190const spinAnimation = emotion_react_browser_esm_keyframes`
72191	from {
72192		transform: rotate(0deg);
72193	}
72194	to {
72195		transform: rotate(360deg);
72196	}
72197 `;
72198const StyledSpinner = emotion_styled_base_browser_esm("svg",  true ? {
72199  target: "ea4tfvq2"
72200} : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0));
72201const commonPathProps =  true ? {
72202  name: "9s4963",
72203  styles: "fill:transparent;stroke-width:1.5px"
72204} : 0;
72205const SpinnerTrack = emotion_styled_base_browser_esm("circle",  true ? {
72206  target: "ea4tfvq1"
72207} : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0));
72208const SpinnerIndicator = emotion_styled_base_browser_esm("path",  true ? {
72209  target: "ea4tfvq0"
72210} : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0));
72211
72212;// CONCATENATED MODULE: ./packages/components/build-module/spinner/index.js
72213
72214/**
72215 * External dependencies
72216 */
72217
72218/**
72219 * Internal dependencies
72220 */
72221
72222/**
72223 * WordPress dependencies
72224 */
72225
72226function UnforwardedSpinner({
72227  className,
72228  ...props
72229}, forwardedRef) {
72230  return (0,external_wp_element_namespaceObject.createElement)(StyledSpinner, {
72231    className: classnames_default()('components-spinner', className),
72232    viewBox: "0 0 100 100",
72233    width: "16",
72234    height: "16",
72235    xmlns: "http://www.w3.org/2000/svg",
72236    role: "presentation",
72237    focusable: "false",
72238    ...props,
72239    ref: forwardedRef
72240  }, (0,external_wp_element_namespaceObject.createElement)(SpinnerTrack, {
72241    cx: "50",
72242    cy: "50",
72243    r: "50",
72244    vectorEffect: "non-scaling-stroke"
72245  }), (0,external_wp_element_namespaceObject.createElement)(SpinnerIndicator, {
72246    d: "m 50 0 a 50 50 0 0 1 50 50",
72247    vectorEffect: "non-scaling-stroke"
72248  }));
72249}
72250/**
72251 * `Spinner` is a component used to notify users that their action is being processed.
72252 *
72253 * ```js
72254 *   import { Spinner } from '@wordpress/components';
72255 *
72256 *   function Example() {
72257 *     return <Spinner />;
72258 *   }
72259 * ```
72260 */
72261const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner);
72262/* harmony default export */ const spinner = (Spinner);
72263
72264;// CONCATENATED MODULE: ./packages/components/build-module/surface/component.js
72265
72266/**
72267 * External dependencies
72268 */
72269
72270/**
72271 * Internal dependencies
72272 */
72273
72274
72275
72276function UnconnectedSurface(props, forwardedRef) {
72277  const surfaceProps = useSurface(props);
72278  return (0,external_wp_element_namespaceObject.createElement)(component, {
72279    ...surfaceProps,
72280    ref: forwardedRef
72281  });
72282}
72283
72284/**
72285 * `Surface` is a core component that renders a primary background color.
72286 *
72287 * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode).
72288 *
72289 * ```jsx
72290 * import {
72291 *	__experimentalSurface as Surface,
72292 *	__experimentalText as Text,
72293 * } from '@wordpress/components';
72294 *
72295 * function Example() {
72296 * 	return (
72297 * 		<Surface>
72298 * 			<Text>Code is Poetry</Text>
72299 * 		</Surface>
72300 * 	);
72301 * }
72302 * ```
72303 */
72304const component_Surface = contextConnect(UnconnectedSurface, 'Surface');
72305/* harmony default export */ const surface_component = (component_Surface);
72306
72307;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tab/tab-store.js
72308
72309
72310
72311
72312
72313
72314
72315
72316// src/tab/tab-store.ts
72317function createTabStore(props = {}) {
72318  var _a;
72319  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
72320  const composite = createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), {
72321    orientation: defaultValue(
72322      props.orientation,
72323      syncState == null ? void 0 : syncState.orientation,
72324      "horizontal"
72325    ),
72326    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
72327  }));
72328  const panels = createCollectionStore();
72329  const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, composite.getState()), {
72330    selectedId: defaultValue(
72331      props.selectedId,
72332      syncState == null ? void 0 : syncState.selectedId,
72333      props.defaultSelectedId,
72334      void 0
72335    ),
72336    selectOnMove: defaultValue(
72337      props.selectOnMove,
72338      syncState == null ? void 0 : syncState.selectOnMove,
72339      true
72340    )
72341  });
72342  const tab = createStore(initialState, composite, props.store);
72343  tab.setup(
72344    () => tab.sync(() => {
72345      const { activeId, selectOnMove } = tab.getState();
72346      if (!selectOnMove)
72347        return;
72348      if (!activeId)
72349        return;
72350      const tabItem = composite.item(activeId);
72351      if (!tabItem)
72352        return;
72353      if (tabItem.dimmed)
72354        return;
72355      if (tabItem.disabled)
72356        return;
72357      tab.setState("selectedId", tabItem.id);
72358    }, ["moves"])
72359  );
72360  tab.setup(
72361    () => tab.syncBatch(
72362      (state) => tab.setState("activeId", state.selectedId),
72363      ["selectedId"]
72364    )
72365  );
72366  tab.setup(
72367    () => tab.sync(
72368      (state) => {
72369        if (state.selectedId !== void 0)
72370          return;
72371        const { activeId, renderedItems } = tab.getState();
72372        const tabItem = composite.item(activeId);
72373        if (tabItem && !tabItem.disabled && !tabItem.dimmed) {
72374          tab.setState("selectedId", tabItem.id);
72375        } else {
72376          const tabItem2 = renderedItems.find(
72377            (item) => !item.disabled && !item.dimmed
72378          );
72379          tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id);
72380        }
72381      },
72382      ["selectedId", "renderedItems"]
72383    )
72384  );
72385  tab.setup(
72386    () => tab.sync(
72387      (state) => {
72388        const tabs = state.renderedItems;
72389        if (!tabs.length)
72390          return;
72391        return panels.sync(
72392          (state2) => {
72393            const items = state2.renderedItems;
72394            const hasOrphanPanels = items.some((panel) => !panel.tabId);
72395            if (!hasOrphanPanels)
72396              return;
72397            items.forEach((panel, i) => {
72398              if (panel.tabId)
72399                return;
72400              const tabItem = tabs[i];
72401              if (!tabItem)
72402                return;
72403              panels.renderItem(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, panel), { tabId: tabItem.id }));
72404            });
72405          },
72406          ["renderedItems"]
72407        );
72408      },
72409      ["renderedItems"]
72410    )
72411  );
72412  return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, composite), tab), {
72413    panels,
72414    setSelectedId: (id) => tab.setState("selectedId", id),
72415    select: (id) => {
72416      tab.setState("selectedId", id);
72417      composite.move(id);
72418    }
72419  });
72420}
72421
72422
72423;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-store.js
72424
72425
72426
72427
72428
72429
72430
72431// src/tab/tab-store.ts
72432
72433
72434function useTabStoreOptions(props) {
72435  return useCompositeStoreOptions(props);
72436}
72437function useTabStoreProps(store, props) {
72438  store = useCompositeStoreProps(store, props);
72439  useStoreProps(store, props, "selectedId", "setSelectedId");
72440  useStoreProps(store, props, "selectOnMove");
72441  const panels = FHQZ2KRN_useStore(() => store.panels);
72442  return (0,external_React_.useMemo)(() => PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, store), { panels }), []);
72443}
72444function useTabStore(props = {}) {
72445  const options = useTabStoreOptions(props);
72446  const store = FHQZ2KRN_useStore(() => createTabStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options)));
72447  return useTabStoreProps(store, props);
72448}
72449
72450
72451;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UZKBEGMB.js
72452// src/tab/tab-context.ts
72453
72454var TabContext = (0,external_React_.createContext)(void 0);
72455
72456
72457
72458;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-list.js
72459
72460
72461
72462
72463
72464
72465
72466
72467
72468
72469
72470// src/tab/tab-list.tsx
72471
72472var useTabList = NQJBHION_createHook((_a) => {
72473  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
72474  const orientation = store.useState(
72475    (state) => state.orientation === "both" ? void 0 : state.orientation
72476  );
72477  props = useWrapElement(
72478    props,
72479    (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabContext.Provider, { value: store, children: element }),
72480    [store]
72481  );
72482  props = PNRLI7OV_spreadValues({
72483    role: "tablist",
72484    "aria-orientation": orientation
72485  }, props);
72486  props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props));
72487  return props;
72488});
72489var TabList = NQJBHION_createComponent((props) => {
72490  const htmlProps = useTabList(props);
72491  return NQJBHION_createElement("div", htmlProps);
72492});
72493if (false) {}
72494
72495
72496;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab.js
72497
72498
72499
72500
72501
72502
72503
72504
72505
72506
72507
72508
72509
72510
72511
72512// src/tab/tab.ts
72513
72514
72515var useTab = NQJBHION_createHook(
72516  (_a) => {
72517    var _b = _a, {
72518      store,
72519      accessibleWhenDisabled = true,
72520      getItem: getItemProp
72521    } = _b, props = __objRest(_b, [
72522      "store",
72523      "accessibleWhenDisabled",
72524      "getItem"
72525    ]);
72526    const context = (0,external_React_.useContext)(TabContext);
72527    store = store || context;
72528    invariant(
72529      store,
72530       false && 0
72531    );
72532    const defaultId = useId();
72533    const id = props.id || defaultId;
72534    const dimmed = props.disabled;
72535    const getItem = (0,external_React_.useCallback)(
72536      (item) => {
72537        const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), { dimmed });
72538        if (getItemProp) {
72539          return getItemProp(nextItem);
72540        }
72541        return nextItem;
72542      },
72543      [dimmed, getItemProp]
72544    );
72545    const onClickProp = props.onClick;
72546    const onClick = useEvent((event) => {
72547      onClickProp == null ? void 0 : onClickProp(event);
72548      if (event.defaultPrevented)
72549        return;
72550      store == null ? void 0 : store.setSelectedId(id);
72551    });
72552    const panelId = store.panels.useState(
72553      (state) => {
72554        var _a2;
72555        return (_a2 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a2.id;
72556      }
72557    );
72558    const selected = store.useState((state) => !!id && state.selectedId === id);
72559    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
72560      id,
72561      role: "tab",
72562      "aria-selected": selected,
72563      "aria-controls": panelId || void 0
72564    }, props), {
72565      onClick
72566    });
72567    props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
72568      store
72569    }, props), {
72570      accessibleWhenDisabled,
72571      getItem,
72572      shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false
72573    }));
72574    return props;
72575  }
72576);
72577var Tab = createMemoComponent((props) => {
72578  const htmlProps = useTab(props);
72579  return NQJBHION_createElement("button", htmlProps);
72580});
72581if (false) {}
72582
72583
72584;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js
72585
72586
72587
72588
72589
72590
72591
72592
72593
72594
72595
72596
72597// src/tab/tab-panel.ts
72598
72599
72600var useTabPanel = NQJBHION_createHook(
72601  (_a) => {
72602    var _b = _a, { store, tabId: tabIdProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "tabId", "getItem"]);
72603    const ref = (0,external_React_.useRef)(null);
72604    const id = useId(props.id);
72605    const [hasTabbableChildren, setHasTabbableChildren] = (0,external_React_.useState)(false);
72606    (0,external_React_.useEffect)(() => {
72607      const element = ref.current;
72608      if (!element)
72609        return;
72610      const tabbable = focus_getAllTabbableIn(element);
72611      setHasTabbableChildren(!!tabbable.length);
72612    }, []);
72613    const getItem = (0,external_React_.useCallback)(
72614      (item) => {
72615        const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp });
72616        if (getItemProp) {
72617          return getItemProp(nextItem);
72618        }
72619        return nextItem;
72620      },
72621      [id, tabIdProp, getItemProp]
72622    );
72623    const tabId = store.panels.useState(
72624      () => {
72625        var _a2;
72626        return tabIdProp || ((_a2 = store.panels.item(id)) == null ? void 0 : _a2.tabId);
72627      }
72628    );
72629    const open = store.useState(
72630      (state) => !!tabId && state.selectedId === tabId
72631    );
72632    props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({
72633      id,
72634      role: "tabpanel",
72635      "aria-labelledby": tabId || void 0
72636    }, props), {
72637      ref: useMergeRefs(ref, props.ref)
72638    });
72639    const disclosure = useDisclosureStore({ open });
72640    props = useFocusable(PNRLI7OV_spreadValues({ focusable: !hasTabbableChildren }, props));
72641    props = useDisclosureContent(PNRLI7OV_spreadValues({ store: disclosure }, props));
72642    props = useCollectionItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ store: store.panels }, props), { getItem }));
72643    return props;
72644  }
72645);
72646var TabPanel = NQJBHION_createComponent((props) => {
72647  const htmlProps = useTabPanel(props);
72648  return NQJBHION_createElement("div", htmlProps);
72649});
72650if (false) {}
72651
72652
72653;// CONCATENATED MODULE: ./packages/components/build-module/tab-panel/index.js
72654
72655/**
72656 * External dependencies
72657 */
72658
72659
72660/**
72661 * WordPress dependencies
72662 */
72663
72664
72665
72666/**
72667 * Internal dependencies
72668 */
72669
72670
72671// Separate the actual tab name from the instance ID. This is
72672// necessary because Ariakit internally uses the element ID when
72673// a new tab is selected, but our implementation looks specifically
72674// for the tab name to be passed to the `onSelect` callback.
72675const extractTabName = id => {
72676  if (typeof id === 'undefined' || id === null) {
72677    return;
72678  }
72679  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];
72680};
72681
72682/**
72683 * TabPanel is an ARIA-compliant tabpanel.
72684 *
72685 * TabPanels organize content across different screens, data sets, and interactions.
72686 * It has two sections: a list of tabs, and the view to show when tabs are chosen.
72687 *
72688 * ```jsx
72689 * import { TabPanel } from '@wordpress/components';
72690 *
72691 * const onSelect = ( tabName ) => {
72692 *   console.log( 'Selecting tab', tabName );
72693 * };
72694 *
72695 * const MyTabPanel = () => (
72696 *   <TabPanel
72697 *     className="my-tab-panel"
72698 *     activeClass="active-tab"
72699 *     onSelect={ onSelect }
72700 *     tabs={ [
72701 *       {
72702 *         name: 'tab1',
72703 *         title: 'Tab 1',
72704 *         className: 'tab-one',
72705 *       },
72706 *       {
72707 *         name: 'tab2',
72708 *         title: 'Tab 2',
72709 *         className: 'tab-two',
72710 *       },
72711 *     ] }
72712 *   >
72713 *     { ( tab ) => <p>{ tab.title }</p> }
72714 *   </TabPanel>
72715 * );
72716 * ```
72717 */
72718const UnforwardedTabPanel = ({
72719  className,
72720  children,
72721  tabs,
72722  selectOnMove = true,
72723  initialTabName,
72724  orientation = 'horizontal',
72725  activeClass = 'is-active',
72726  onSelect
72727}, ref) => {
72728  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(tab_panel_TabPanel, 'tab-panel');
72729  const prependInstanceId = (0,external_wp_element_namespaceObject.useCallback)(tabName => {
72730    if (typeof tabName === 'undefined') {
72731      return;
72732    }
72733    return `${instanceId}-${tabName}`;
72734  }, [instanceId]);
72735  const tabStore = useTabStore({
72736    setSelectedId: newTabValue => {
72737      if (typeof newTabValue === 'undefined' || newTabValue === null) {
72738        return;
72739      }
72740      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);
72741      if (newTab?.disabled || newTab === selectedTab) {
72742        return;
72743      }
72744      const simplifiedTabName = extractTabName(newTabValue);
72745      if (typeof simplifiedTabName === 'undefined') {
72746        return;
72747      }
72748      onSelect?.(simplifiedTabName);
72749    },
72750    orientation,
72751    selectOnMove,
72752    defaultSelectedId: prependInstanceId(initialTabName)
72753  });
72754  const selectedTabName = extractTabName(tabStore.useState('selectedId'));
72755  const setTabStoreSelectedId = (0,external_wp_element_namespaceObject.useCallback)(tabName => {
72756    tabStore.setState('selectedId', prependInstanceId(tabName));
72757  }, [prependInstanceId, tabStore]);
72758  const selectedTab = tabs.find(({
72759    name
72760  }) => name === selectedTabName);
72761  const previousSelectedTabName = (0,external_wp_compose_namespaceObject.usePrevious)(selectedTabName);
72762
72763  // Ensure `onSelect` is called when the initial tab is selected.
72764  (0,external_wp_element_namespaceObject.useEffect)(() => {
72765    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {
72766      onSelect?.(selectedTabName);
72767    }
72768  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);
72769
72770  // Handle selecting the initial tab.
72771  (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
72772    // If there's a selected tab, don't override it.
72773    if (selectedTab) {
72774      return;
72775    }
72776    const initialTab = tabs.find(tab => tab.name === initialTabName);
72777    // Wait for the denoted initial tab to be declared before making a
72778    // selection. This ensures that if a tab is declared lazily it can
72779    // still receive initial selection.
72780    if (initialTabName && !initialTab) {
72781      return;
72782    }
72783    if (initialTab && !initialTab.disabled) {
72784      // Select the initial tab if it's not disabled.
72785      setTabStoreSelectedId(initialTab.name);
72786    } else {
72787      // Fallback to the first enabled tab when the initial tab is
72788      // disabled or it can't be found.
72789      const firstEnabledTab = tabs.find(tab => !tab.disabled);
72790      if (firstEnabledTab) {
72791        setTabStoreSelectedId(firstEnabledTab.name);
72792      }
72793    }
72794  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);
72795
72796  // Handle the currently selected tab becoming disabled.
72797  (0,external_wp_element_namespaceObject.useEffect)(() => {
72798    // This effect only runs when the selected tab is defined and becomes disabled.
72799    if (!selectedTab?.disabled) {
72800      return;
72801    }
72802    const firstEnabledTab = tabs.find(tab => !tab.disabled);
72803    // If the currently selected tab becomes disabled, select the first enabled tab.
72804    // (if there is one).
72805    if (firstEnabledTab) {
72806      setTabStoreSelectedId(firstEnabledTab.name);
72807    }
72808  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);
72809  return (0,external_wp_element_namespaceObject.createElement)("div", {
72810    className: className,
72811    ref: ref
72812  }, (0,external_wp_element_namespaceObject.createElement)(TabList, {
72813    store: tabStore,
72814    className: "components-tab-panel__tabs"
72815  }, tabs.map(tab => {
72816    return (0,external_wp_element_namespaceObject.createElement)(Tab, {
72817      key: tab.name,
72818      id: prependInstanceId(tab.name),
72819      className: classnames_default()('components-tab-panel__tabs-item', tab.className, {
72820        [activeClass]: tab.name === selectedTabName
72821      }),
72822      disabled: tab.disabled,
72823      "aria-controls": `${prependInstanceId(tab.name)}-view`,
72824      render: (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
72825        icon: tab.icon,
72826        label: tab.icon && tab.title,
72827        showTooltip: !!tab.icon
72828      })
72829    }, !tab.icon && tab.title);
72830  })), selectedTab && (0,external_wp_element_namespaceObject.createElement)(TabPanel, {
72831    id: `${prependInstanceId(selectedTab.name)}-view`,
72832    store: tabStore,
72833    tabId: prependInstanceId(selectedTab.name),
72834    className: 'components-tab-panel__tab-content'
72835  }, children(selectedTab)));
72836};
72837const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel);
72838/* harmony default export */ const tab_panel = (tab_panel_TabPanel);
72839
72840;// CONCATENATED MODULE: ./packages/components/build-module/text-control/index.js
72841
72842/**
72843 * External dependencies
72844 */
72845
72846/**
72847 * WordPress dependencies
72848 */
72849
72850
72851
72852/**
72853 * Internal dependencies
72854 */
72855
72856function UnforwardedTextControl(props, ref) {
72857  const {
72858    __nextHasNoMarginBottom,
72859    label,
72860    hideLabelFromVision,
72861    value,
72862    help,
72863    id: idProp,
72864    className,
72865    onChange,
72866    type = 'text',
72867    ...additionalProps
72868  } = props;
72869  const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp);
72870  const onChangeValue = event => onChange(event.target.value);
72871  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
72872    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
72873    label: label,
72874    hideLabelFromVision: hideLabelFromVision,
72875    id: id,
72876    help: help,
72877    className: className
72878  }, (0,external_wp_element_namespaceObject.createElement)("input", {
72879    className: "components-text-control__input",
72880    type: type,
72881    id: id,
72882    value: value,
72883    onChange: onChangeValue,
72884    "aria-describedby": !!help ? id + '__help' : undefined,
72885    ref: ref,
72886    ...additionalProps
72887  }));
72888}
72889
72890/**
72891 * TextControl components let users enter and edit text.
72892 *
72893 * ```jsx
72894 * import { TextControl } from '@wordpress/components';
72895 * import { useState } from '@wordpress/element';
72896 *
72897 * const MyTextControl = () => {
72898 *   const [ className, setClassName ] = useState( '' );
72899 *
72900 *   return (
72901 *     <TextControl
72902 *       label="Additional CSS Class"
72903 *       value={ className }
72904 *       onChange={ ( value ) => setClassName( value ) }
72905 *     />
72906 *   );
72907 * };
72908 * ```
72909 */
72910const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextControl);
72911/* harmony default export */ const text_control = (TextControl);
72912
72913;// CONCATENATED MODULE: ./packages/components/build-module/utils/input/base.js
72914/**
72915 * External dependencies
72916 */
72917
72918
72919/**
72920 * Internal dependencies
72921 */
72922
72923
72924
72925const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";" + ( true ? "" : 0),  true ? "" : 0);
72926const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0),  true ? "" : 0);
72927
72928;// CONCATENATED MODULE: ./packages/components/build-module/utils/breakpoint-values.js
72929/* harmony default export */ const breakpoint_values = ({
72930  huge: '1440px',
72931  wide: '1280px',
72932  'x-large': '1080px',
72933  large: '960px',
72934  // admin sidebar auto folds
72935  medium: '782px',
72936  // Adminbar goes big.
72937  small: '600px',
72938  mobile: '480px',
72939  'zoomed-in': '280px'
72940});
72941
72942;// CONCATENATED MODULE: ./packages/components/build-module/utils/breakpoint.js
72943/**
72944 * Internal dependencies
72945 */
72946
72947
72948/**
72949 * @param {keyof breakpoints} point
72950 * @return {string} Media query declaration.
72951 */
72952const breakpoint = point => `@media (min-width: ${breakpoint_values[point]})`;
72953
72954;// CONCATENATED MODULE: ./packages/components/build-module/utils/input/input-control.js
72955/**
72956 * External dependencies
72957 */
72958
72959
72960/**
72961 * Internal dependencies
72962 */
72963
72964
72965
72966
72967const inputControl = /*#__PURE__*/emotion_react_browser_esm_css("display:block;font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + ( true ? "" : 0),  true ? "" : 0);
72968
72969;// CONCATENATED MODULE: ./packages/components/build-module/textarea-control/styles/textarea-control-styles.js
72970
72971/**
72972 * External dependencies
72973 */
72974
72975/**
72976 * Internal dependencies
72977 */
72978
72979const StyledTextarea = emotion_styled_base_browser_esm("textarea",  true ? {
72980  target: "e1w5nnrk0"
72981} : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0));
72982
72983;// CONCATENATED MODULE: ./packages/components/build-module/textarea-control/index.js
72984
72985/**
72986 * External dependencies
72987 */
72988
72989/**
72990 * WordPress dependencies
72991 */
72992
72993
72994/**
72995 * Internal dependencies
72996 */
72997
72998
72999/**
73000 * TextareaControls are TextControls that allow for multiple lines of text, and
73001 * wrap overflow text onto a new line. They are a fixed height and scroll
73002 * vertically when the cursor reaches the bottom of the field.
73003 *
73004 * ```jsx
73005 * import { TextareaControl } from '@wordpress/components';
73006 * import { useState } from '@wordpress/element';
73007 *
73008 * const MyTextareaControl = () => {
73009 *   const [ text, setText ] = useState( '' );
73010 *
73011 *   return (
73012 *     <TextareaControl
73013 *       label="Text"
73014 *       help="Enter some text"
73015 *       value={ text }
73016 *       onChange={ ( value ) => setText( value ) }
73017 *     />
73018 *   );
73019 * };
73020 * ```
73021 */
73022function TextareaControl(props) {
73023  const {
73024    __nextHasNoMarginBottom,
73025    label,
73026    hideLabelFromVision,
73027    value,
73028    help,
73029    onChange,
73030    rows = 4,
73031    className,
73032    ...additionalProps
73033  } = props;
73034  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl);
73035  const id = `inspector-textarea-control-${instanceId}`;
73036  const onChangeValue = event => onChange(event.target.value);
73037  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
73038    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
73039    label: label,
73040    hideLabelFromVision: hideLabelFromVision,
73041    id: id,
73042    help: help,
73043    className: className
73044  }, (0,external_wp_element_namespaceObject.createElement)(StyledTextarea, {
73045    className: "components-textarea-control__input",
73046    id: id,
73047    rows: rows,
73048    onChange: onChangeValue,
73049    "aria-describedby": !!help ? id + '__help' : undefined,
73050    value: value,
73051    ...additionalProps
73052  }));
73053}
73054/* harmony default export */ const textarea_control = (TextareaControl);
73055
73056;// CONCATENATED MODULE: ./packages/components/build-module/text-highlight/index.js
73057
73058/**
73059 * WordPress dependencies
73060 */
73061
73062
73063/**
73064 * Internal dependencies
73065 */
73066
73067/**
73068 * Highlights occurrences of a given string within another string of text. Wraps
73069 * each match with a `<mark>` tag which provides browser default styling.
73070 *
73071 * ```jsx
73072 * import { TextHighlight } from '@wordpress/components';
73073 *
73074 * const MyTextHighlight = () => (
73075 *   <TextHighlight
73076 *     text="Why do we like Gutenberg? Because Gutenberg is the best!"
73077 *     highlight="Gutenberg"
73078 *   />
73079 * );
73080 * ```
73081 */
73082const TextHighlight = props => {
73083  const {
73084    text = '',
73085    highlight = ''
73086  } = props;
73087  const trimmedHighlightText = highlight.trim();
73088  if (!trimmedHighlightText) {
73089    return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, text);
73090  }
73091  const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');
73092  return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
73093    mark: (0,external_wp_element_namespaceObject.createElement)("mark", null)
73094  });
73095};
73096/* harmony default export */ const text_highlight = (TextHighlight);
73097
73098;// CONCATENATED MODULE: ./packages/icons/build-module/library/tip.js
73099
73100/**
73101 * WordPress dependencies
73102 */
73103
73104const tip = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
73105  xmlns: "http://www.w3.org/2000/svg",
73106  viewBox: "0 0 24 24"
73107}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
73108  d: "M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z"
73109}));
73110/* harmony default export */ const library_tip = (tip);
73111
73112;// CONCATENATED MODULE: ./packages/components/build-module/tip/index.js
73113
73114/**
73115 * WordPress dependencies
73116 */
73117
73118
73119/**
73120 * Internal dependencies
73121 */
73122
73123function Tip(props) {
73124  const {
73125    children
73126  } = props;
73127  return (0,external_wp_element_namespaceObject.createElement)("div", {
73128    className: "components-tip"
73129  }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, {
73130    icon: library_tip
73131  }), (0,external_wp_element_namespaceObject.createElement)("p", null, children));
73132}
73133/* harmony default export */ const build_module_tip = (Tip);
73134
73135;// CONCATENATED MODULE: ./packages/components/build-module/toggle-control/index.js
73136
73137/**
73138 * External dependencies
73139 */
73140
73141
73142
73143/**
73144 * WordPress dependencies
73145 */
73146
73147
73148/**
73149 * Internal dependencies
73150 */
73151
73152
73153
73154
73155
73156
73157
73158/**
73159 * ToggleControl is used to generate a toggle user interface.
73160 *
73161 * ```jsx
73162 * import { ToggleControl } from '@wordpress/components';
73163 * import { useState } from '@wordpress/element';
73164 *
73165 * const MyToggleControl = () => {
73166 *   const [ value, setValue ] = useState( false );
73167 *
73168 *   return (
73169 *     <ToggleControl
73170 *       label="Fixed Background"
73171 *       checked={ value }
73172 *       onChange={ () => setValue( ( state ) => ! state ) }
73173 *     />
73174 *   );
73175 * };
73176 * ```
73177 */
73178function ToggleControl({
73179  __nextHasNoMarginBottom,
73180  label,
73181  checked,
73182  help,
73183  className,
73184  onChange,
73185  disabled
73186}) {
73187  function onChangeToggle(event) {
73188    onChange(event.target.checked);
73189  }
73190  const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleControl);
73191  const id = `inspector-toggle-control-${instanceId}`;
73192  const cx = useCx();
73193  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css({
73194    marginBottom: space(3)
73195  },  true ? "" : 0,  true ? "" : 0));
73196  let describedBy, helpLabel;
73197  if (help) {
73198    if (typeof help === 'function') {
73199      // `help` as a function works only for controlled components where
73200      // `checked` is passed down from parent component. Uncontrolled
73201      // component can show only a static help label.
73202      if (checked !== undefined) {
73203        helpLabel = help(checked);
73204      }
73205    } else {
73206      helpLabel = help;
73207    }
73208    if (helpLabel) {
73209      describedBy = id + '__help';
73210    }
73211  }
73212  return (0,external_wp_element_namespaceObject.createElement)(base_control, {
73213    id: id,
73214    help: helpLabel,
73215    className: classes,
73216    __nextHasNoMarginBottom: true
73217  }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
73218    justify: "flex-start",
73219    spacing: 3
73220  }, (0,external_wp_element_namespaceObject.createElement)(form_toggle, {
73221    id: id,
73222    checked: checked,
73223    onChange: onChangeToggle,
73224    "aria-describedby": describedBy,
73225    disabled: disabled
73226  }), (0,external_wp_element_namespaceObject.createElement)(flex_block_component, {
73227    as: "label",
73228    htmlFor: id,
73229    className: "components-toggle-control__label"
73230  }, label)));
73231}
73232/* harmony default export */ const toggle_control = (ToggleControl);
73233
73234;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js
73235
73236/**
73237 * External dependencies
73238 */
73239
73240/**
73241 * WordPress dependencies
73242 */
73243
73244
73245/**
73246 * Internal dependencies
73247 */
73248
73249
73250
73251function UnforwardedToggleGroupControlOptionIcon(props, ref) {
73252  const {
73253    icon,
73254    label,
73255    ...restProps
73256  } = props;
73257  return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, {
73258    ...restProps,
73259    isIcon: true,
73260    "aria-label": label,
73261    showTooltip: true,
73262    ref: ref
73263  }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
73264    icon: icon
73265  }));
73266}
73267
73268/**
73269 * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
73270 * child of `ToggleGroupControl` and displays an icon.
73271 *
73272 * ```jsx
73273 *
73274 * import {
73275 *	__experimentalToggleGroupControl as ToggleGroupControl,
73276 *	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
73277 * from '@wordpress/components';
73278 * import { formatLowercase, formatUppercase } from '@wordpress/icons';
73279 *
73280 * function Example() {
73281 *	return (
73282 *		<ToggleGroupControl>
73283 *			<ToggleGroupControlOptionIcon
73284 *				value="uppercase"
73285 *				label="Uppercase"
73286 *				icon={ formatUppercase }
73287 *			/>
73288 *			<ToggleGroupControlOptionIcon
73289 *				value="lowercase"
73290 *				label="Lowercase"
73291 *				icon={ formatLowercase }
73292 *			/>
73293 *		</ToggleGroupControl>
73294 *	);
73295 * }
73296 * ```
73297 */
73298const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon);
73299/* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon);
73300
73301;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6YH4Z35H.js
73302
73303
73304
73305
73306// src/toolbar/toolbar-item.ts
73307var useToolbarItem = NQJBHION_createHook(
73308  (_a) => {
73309    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
73310    props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadValues({ store }, props));
73311    return props;
73312  }
73313);
73314var ToolbarItem = createMemoComponent((props) => {
73315  const htmlProps = useToolbarItem(props);
73316  return NQJBHION_createElement("button", htmlProps);
73317});
73318if (false) {}
73319
73320
73321
73322;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-context/index.js
73323/**
73324 * External dependencies
73325 */
73326
73327/**
73328 * WordPress dependencies
73329 */
73330
73331const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
73332/* harmony default export */ const toolbar_context = (ToolbarContext);
73333
73334;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-item/index.js
73335
73336/**
73337 * External dependencies
73338 */
73339
73340/**
73341 * WordPress dependencies
73342 */
73343
73344
73345
73346/**
73347 * Internal dependencies
73348 */
73349
73350function toolbar_item_ToolbarItem({
73351  children,
73352  as: Component,
73353  ...props
73354}, ref) {
73355  const accessibleToolbarStore = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73356  const isRenderProp = typeof children === 'function';
73357  if (!isRenderProp && !Component) {
73358     false ? 0 : void 0;
73359    return null;
73360  }
73361  const allProps = {
73362    ...props,
73363    ref,
73364    'data-toolbar-item': true
73365  };
73366  if (!accessibleToolbarStore) {
73367    if (Component) {
73368      return (0,external_wp_element_namespaceObject.createElement)(Component, {
73369        ...allProps
73370      }, children);
73371    }
73372    if (!isRenderProp) {
73373      return null;
73374    }
73375    return children(allProps);
73376  }
73377  const render = isRenderProp ? children : Component && (0,external_wp_element_namespaceObject.createElement)(Component, null, children);
73378  return (0,external_wp_element_namespaceObject.createElement)(ToolbarItem, {
73379    ...allProps,
73380    store: accessibleToolbarStore,
73381    render: render
73382  });
73383}
73384/* harmony default export */ const toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem));
73385
73386;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-button/toolbar-button-container.js
73387
73388/**
73389 * Internal dependencies
73390 */
73391
73392const ToolbarButtonContainer = ({
73393  children,
73394  className
73395}) => (0,external_wp_element_namespaceObject.createElement)("div", {
73396  className: className
73397}, children);
73398/* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer);
73399
73400;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-button/index.js
73401
73402/**
73403 * External dependencies
73404 */
73405
73406/**
73407 * WordPress dependencies
73408 */
73409
73410
73411/**
73412 * Internal dependencies
73413 */
73414
73415
73416
73417
73418function UnforwardedToolbarButton({
73419  children,
73420  className,
73421  containerClassName,
73422  extraProps,
73423  isActive,
73424  isDisabled,
73425  title,
73426  ...props
73427}, ref) {
73428  const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73429  if (!accessibleToolbarState) {
73430    return (0,external_wp_element_namespaceObject.createElement)(toolbar_button_container, {
73431      className: containerClassName
73432    }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
73433      ref: ref,
73434      icon: props.icon,
73435      label: title,
73436      shortcut: props.shortcut,
73437      "data-subscript": props.subscript,
73438      onClick: event => {
73439        event.stopPropagation();
73440        // TODO: Possible bug; maybe use onClick instead of props.onClick.
73441        if (props.onClick) {
73442          props.onClick(event);
73443        }
73444      },
73445      className: classnames_default()('components-toolbar__control', className),
73446      isPressed: isActive,
73447      disabled: isDisabled,
73448      "data-toolbar-item": true,
73449      ...extraProps,
73450      ...props
73451    }, children));
73452  }
73453
73454  // ToobarItem will pass all props to the render prop child, which will pass
73455  // all props to Button. This means that ToolbarButton has the same API as
73456  // Button.
73457  return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, {
73458    className: classnames_default()('components-toolbar-button', className),
73459    ...extraProps,
73460    ...props,
73461    ref: ref
73462  }, toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(build_module_button, {
73463    label: title,
73464    isPressed: isActive,
73465    disabled: isDisabled,
73466    ...toolbarItemProps
73467  }, children));
73468}
73469
73470/**
73471 * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
73472 * or ToolbarGroup when used to create general interfaces.
73473 *
73474 * ```jsx
73475 * import { Toolbar, ToolbarButton } from '@wordpress/components';
73476 * import { edit } from '@wordpress/icons';
73477 *
73478 * function MyToolbar() {
73479 *   return (
73480 *		<Toolbar label="Options">
73481 *			<ToolbarButton
73482 *				icon={ edit }
73483 *				label="Edit"
73484 *				onClick={ () => alert( 'Editing' ) }
73485 *			/>
73486 *		</Toolbar>
73487 *   );
73488 * }
73489 * ```
73490 */
73491const ToolbarButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarButton);
73492/* harmony default export */ const toolbar_button = (ToolbarButton);
73493
73494;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/toolbar-group-container.js
73495
73496/**
73497 * Internal dependencies
73498 */
73499
73500const ToolbarGroupContainer = ({
73501  className,
73502  children,
73503  ...props
73504}) => (0,external_wp_element_namespaceObject.createElement)("div", {
73505  className: className,
73506  ...props
73507}, children);
73508/* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer);
73509
73510;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js
73511
73512/**
73513 * WordPress dependencies
73514 */
73515
73516
73517/**
73518 * Internal dependencies
73519 */
73520
73521
73522
73523function ToolbarGroupCollapsed({
73524  controls = [],
73525  toggleProps,
73526  ...props
73527}) {
73528  // It'll contain state if `ToolbarGroup` is being used within
73529  // `<Toolbar label="label" />`
73530  const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73531  const renderDropdownMenu = internalToggleProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, {
73532    controls: controls,
73533    toggleProps: {
73534      ...internalToggleProps,
73535      'data-toolbar-item': true
73536    },
73537    ...props
73538  });
73539  if (accessibleToolbarState) {
73540    return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, {
73541      ...toggleProps
73542    }, renderDropdownMenu);
73543  }
73544  return renderDropdownMenu(toggleProps);
73545}
73546/* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed);
73547
73548;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/index.js
73549
73550/**
73551 * External dependencies
73552 */
73553
73554
73555/**
73556 * WordPress dependencies
73557 */
73558
73559
73560/**
73561 * Internal dependencies
73562 */
73563
73564
73565
73566
73567function isNestedArray(arr) {
73568  return Array.isArray(arr) && Array.isArray(arr[0]);
73569}
73570
73571/**
73572 * Renders a collapsible group of controls
73573 *
73574 * The `controls` prop accepts an array of sets. A set is an array of controls.
73575 * Controls have the following shape:
73576 *
73577 * ```
73578 * {
73579 *   icon: string,
73580 *   title: string,
73581 *   subscript: string,
73582 *   onClick: Function,
73583 *   isActive: boolean,
73584 *   isDisabled: boolean
73585 * }
73586 * ```
73587 *
73588 * For convenience it is also possible to pass only an array of controls. It is
73589 * then assumed this is the only set.
73590 *
73591 * Either `controls` or `children` is required, otherwise this components
73592 * renders nothing.
73593 *
73594 * @param props               Component props.
73595 * @param [props.controls]    The controls to render in this toolbar.
73596 * @param [props.children]    Any other things to render inside the toolbar besides the controls.
73597 * @param [props.className]   Class to set on the container div.
73598 * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
73599 * @param [props.title]       ARIA label for dropdown menu if is collapsed.
73600 */
73601function ToolbarGroup({
73602  controls = [],
73603  children,
73604  className,
73605  isCollapsed,
73606  title,
73607  ...props
73608}) {
73609  // It'll contain state if `ToolbarGroup` is being used within
73610  // `<Toolbar label="label" />`
73611  const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73612  if ((!controls || !controls.length) && !children) {
73613    return null;
73614  }
73615  const finalClassName = classnames_default()(
73616  // Unfortunately, there's legacy code referencing to `.components-toolbar`
73617  // So we can't get rid of it
73618  accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className);
73619
73620  // Normalize controls to nested array of objects (sets of controls)
73621  let controlSets;
73622  if (isNestedArray(controls)) {
73623    controlSets = controls;
73624  } else {
73625    controlSets = [controls];
73626  }
73627  if (isCollapsed) {
73628    return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_collapsed, {
73629      label: title,
73630      controls: controlSets,
73631      className: finalClassName,
73632      children: children,
73633      ...props
73634    });
73635  }
73636  return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_container, {
73637    className: finalClassName,
73638    ...props
73639  }, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(toolbar_button, {
73640    key: [indexOfSet, indexOfControl].join(),
73641    containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined,
73642    ...control
73643  }))), children);
73644}
73645/* harmony default export */ const toolbar_group = (ToolbarGroup);
73646
73647;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js
73648
73649
73650
73651
73652
73653
73654
73655
73656// src/toolbar/toolbar-store.ts
73657function createToolbarStore(props = {}) {
73658  var _a;
73659  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
73660  return createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), {
73661    orientation: defaultValue(
73662      props.orientation,
73663      syncState == null ? void 0 : syncState.orientation,
73664      "horizontal"
73665    ),
73666    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
73667  }));
73668}
73669
73670
73671;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar-store.js
73672
73673
73674
73675
73676
73677
73678
73679// src/toolbar/toolbar-store.ts
73680
73681function useToolbarStoreOptions(props) {
73682  return useCompositeStoreOptions(props);
73683}
73684function useToolbarStoreProps(store, props) {
73685  return useCompositeStoreProps(store, props);
73686}
73687function useToolbarStore(props = {}) {
73688  const options = useToolbarStoreOptions(props);
73689  const store = FHQZ2KRN_useStore(
73690    () => createToolbarStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options))
73691  );
73692  return useToolbarStoreProps(store, props);
73693}
73694
73695
73696;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/DFUIIKXE.js
73697// src/toolbar/toolbar-context.ts
73698
73699var DFUIIKXE_ToolbarContext = (0,external_React_.createContext)(
73700  void 0
73701);
73702
73703
73704
73705;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js
73706
73707
73708
73709
73710
73711
73712
73713
73714
73715
73716
73717// src/toolbar/toolbar.tsx
73718
73719var useToolbar = NQJBHION_createHook((_a) => {
73720  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
73721  const orientation = store.useState(
73722    (state) => state.orientation === "both" ? void 0 : state.orientation
73723  );
73724  props = useWrapElement(
73725    props,
73726    (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DFUIIKXE_ToolbarContext.Provider, { value: store, children: element }),
73727    [store]
73728  );
73729  props = PNRLI7OV_spreadValues({
73730    role: "toolbar",
73731    "aria-orientation": orientation
73732  }, props);
73733  props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props));
73734  return props;
73735});
73736var Toolbar = NQJBHION_createComponent((props) => {
73737  const htmlProps = useToolbar(props);
73738  return NQJBHION_createElement("div", htmlProps);
73739});
73740if (false) {}
73741
73742
73743;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar/toolbar-container.js
73744
73745/**
73746 * External dependencies
73747 */
73748
73749/**
73750 * WordPress dependencies
73751 */
73752
73753
73754
73755/**
73756 * Internal dependencies
73757 */
73758
73759function UnforwardedToolbarContainer({
73760  label,
73761  ...props
73762}, ref) {
73763  const toolbarStore = useToolbarStore({
73764    focusLoop: true,
73765    rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
73766  });
73767  return (
73768    // This will provide state for `ToolbarButton`'s
73769    (0,external_wp_element_namespaceObject.createElement)(toolbar_context.Provider, {
73770      value: toolbarStore
73771    }, (0,external_wp_element_namespaceObject.createElement)(Toolbar, {
73772      ref: ref,
73773      "aria-label": label,
73774      store: toolbarStore,
73775      ...props
73776    }))
73777  );
73778}
73779const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer);
73780/* harmony default export */ const toolbar_container = (ToolbarContainer);
73781
73782;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar/index.js
73783
73784/**
73785 * External dependencies
73786 */
73787
73788/**
73789 * WordPress dependencies
73790 */
73791
73792
73793
73794/**
73795 * Internal dependencies
73796 */
73797
73798
73799
73800const CONTEXT_SYSTEM_VALUE = {
73801  DropdownMenu: {
73802    variant: 'toolbar'
73803  },
73804  Dropdown: {
73805    variant: 'toolbar'
73806  }
73807};
73808function UnforwardedToolbar({
73809  className,
73810  label,
73811  ...props
73812}, ref) {
73813  if (!label) {
73814    external_wp_deprecated_default()('Using Toolbar without label prop', {
73815      since: '5.6',
73816      alternative: 'ToolbarGroup component',
73817      link: 'https://developer.wordpress.org/block-editor/components/toolbar/'
73818    });
73819    // Extracting title from `props` because `ToolbarGroup` doesn't accept it.
73820    const {
73821      title: _title,
73822      ...restProps
73823    } = props;
73824    return (0,external_wp_element_namespaceObject.createElement)(toolbar_group, {
73825      isCollapsed: false,
73826      ...restProps,
73827      className: className
73828    });
73829  }
73830  // `ToolbarGroup` already uses components-toolbar for compatibility reasons.
73831  const finalClassName = classnames_default()('components-accessible-toolbar', className);
73832  return (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, {
73833    value: CONTEXT_SYSTEM_VALUE
73834  }, (0,external_wp_element_namespaceObject.createElement)(toolbar_container, {
73835    className: finalClassName,
73836    label: label,
73837    ref: ref,
73838    ...props
73839  }));
73840}
73841
73842/**
73843 * Renders a toolbar.
73844 *
73845 * To add controls, simply pass `ToolbarButton` components as children.
73846 *
73847 * ```jsx
73848 * import { Toolbar, ToolbarButton } from '@wordpress/components';
73849 * import { formatBold, formatItalic, link } from '@wordpress/icons';
73850 *
73851 * function MyToolbar() {
73852 *   return (
73853 *     <Toolbar label="Options">
73854 *       <ToolbarButton icon={ formatBold } label="Bold" />
73855 *       <ToolbarButton icon={ formatItalic } label="Italic" />
73856 *       <ToolbarButton icon={ link } label="Link" />
73857 *     </Toolbar>
73858 *   );
73859 * }
73860 * ```
73861 */
73862const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbar);
73863/* harmony default export */ const toolbar = (toolbar_Toolbar);
73864
73865;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-dropdown-menu/index.js
73866
73867/**
73868 * WordPress dependencies
73869 */
73870
73871
73872/**
73873 * External dependencies
73874 */
73875
73876/**
73877 * Internal dependencies
73878 */
73879
73880
73881
73882function ToolbarDropdownMenu(props, ref) {
73883  const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73884  if (!accessibleToolbarState) {
73885    return (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, {
73886      ...props
73887    });
73888  }
73889
73890  // ToolbarItem will pass all props to the render prop child, which will pass
73891  // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
73892  // has the same API as DropdownMenu.
73893  return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, {
73894    ref: ref,
73895    ...props.toggleProps
73896  }, toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, {
73897    ...props,
73898    popoverProps: {
73899      ...props.popoverProps
73900    },
73901    toggleProps: toolbarItemProps
73902  }));
73903}
73904/* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu));
73905
73906;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/styles.js
73907
73908function tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
73909/**
73910 * External dependencies
73911 */
73912
73913
73914
73915/**
73916 * Internal dependencies
73917 */
73918
73919
73920
73921
73922const toolsPanelGrid = {
73923  columns: columns =>
73923 /*#__PURE__*/emotion_react_browser_esm_css("grid-template-columns:", `repeat( ${columns}, minmax(0, 1fr) )`, ";" + ( true ? "" : 0),  true ? "" : 0),
73924  spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(2), ";row-gap:", space(4), ";" + ( true ? "" : 0),  true ? "" : 0),
73925  item: {
73926    fullWidth:  true ? {
73927      name: "18iuzk9",
73928      styles: "grid-column:1/-1"
73929    } : 0
73930  }
73931};
73932const ToolsPanel = columns => /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " border-top:", config_values.borderWidth, " solid ", COLORS.gray[300], ";margin-top:-1px;padding:", space(4), ";" + ( true ? "" : 0),  true ? "" : 0);
73933
73934/**
73935 * Items injected into a ToolsPanel via a virtual bubbling slot will require
73936 * an inner dom element to be injected. The following rule allows for the
73937 * CSS grid display to be re-established.
73938 */
73939
73940const ToolsPanelWithInnerWrapper = columns => {
73941  return /*#__PURE__*/emotion_react_browser_esm_css(">div:not( :first-of-type ){display:grid;", toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " ", toolsPanelGrid.item.fullWidth, ";}" + ( true ? "" : 0),  true ? "" : 0);
73942};
73943const ToolsPanelHiddenInnerWrapper =  true ? {
73944  name: "huufmu",
73945  styles: ">div:not( :first-of-type ){display:none;}"
73946} : 0;
73947const ToolsPanelHeader = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, " gap:", space(2), ";.components-dropdown-menu{margin:", space(-1), " 0;line-height:0;}&&&& .components-dropdown-menu__toggle{padding:0;min-width:", space(6), ";}" + ( true ? "" : 0),  true ? "" : 0);
73948const ToolsPanelHeading =  true ? {
73949  name: "1pmxm02",
73950  styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}"
73951} : 0;
73952const ToolsPanelItem = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, "&>div,&>fieldset{padding-bottom:0;margin-bottom:0;max-width:100%;}&& ", base_control_styles_Wrapper, "{margin-bottom:0;", StyledField, ":last-child{margin-bottom:0;}}", StyledHelp, "{margin-bottom:0;}&& ", LabelWrapper, "{label{line-height:1.4em;}}" + ( true ? "" : 0),  true ? "" : 0);
73953const ToolsPanelItemPlaceholder =  true ? {
73954  name: "eivff4",
73955  styles: "display:none"
73956} : 0;
73957const styles_DropdownMenu =  true ? {
73958  name: "16gsvie",
73959  styles: "min-width:200px"
73960} : 0;
73961const ResetLabel = emotion_styled_base_browser_esm("span",  true ? {
73962  target: "ews648u0"
73963} : 0)("color:", COLORS.theme.accentDarker10, ";font-size:11px;font-weight:500;line-height:1.4;", rtl({
73964  marginLeft: space(3)
73965}), " text-transform:uppercase;" + ( true ? "" : 0));
73966const DefaultControlsItem = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&&[aria-disabled='true']{color:", COLORS.gray[700], ";opacity:1;&:hover{color:", COLORS.gray[700], ";}", ResetLabel, "{opacity:0.3;}}" + ( true ? "" : 0),  true ? "" : 0);
73967
73968;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/context.js
73969/**
73970 * WordPress dependencies
73971 */
73972
73973
73974/**
73975 * Internal dependencies
73976 */
73977
73978const tools_panel_context_noop = () => undefined;
73979const ToolsPanelContext = (0,external_wp_element_namespaceObject.createContext)({
73980  menuItems: {
73981    default: {},
73982    optional: {}
73983  },
73984  hasMenuItems: false,
73985  isResetting: false,
73986  shouldRenderPlaceholderItems: false,
73987  registerPanelItem: tools_panel_context_noop,
73988  deregisterPanelItem: tools_panel_context_noop,
73989  flagItemCustomization: tools_panel_context_noop,
73990  registerResetAllFilter: tools_panel_context_noop,
73991  deregisterResetAllFilter: tools_panel_context_noop,
73992  areAllOptionalControlsHidden: true
73993});
73994const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext);
73995
73996;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-header/hook.js
73997/**
73998 * WordPress dependencies
73999 */
74000
74001
74002/**
74003 * Internal dependencies
74004 */
74005
74006
74007
74008
74009function useToolsPanelHeader(props) {
74010  const {
74011    className,
74012    headingLevel = 2,
74013    ...otherProps
74014  } = useContextSystem(props, 'ToolsPanelHeader');
74015  const cx = useCx();
74016  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
74017    return cx(ToolsPanelHeader, className);
74018  }, [className, cx]);
74019  const dropdownMenuClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
74020    return cx(styles_DropdownMenu);
74021  }, [cx]);
74022  const headingClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
74023    return cx(ToolsPanelHeading);
74024  }, [cx]);
74025  const defaultControlsItemClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
74026    return cx(DefaultControlsItem);
74027  }, [cx]);
74028  const {
74029    menuItems,
74030    hasMenuItems,
74031    areAllOptionalControlsHidden
74032  } = useToolsPanelContext();
74033  return {
74034    ...otherProps,
74035    areAllOptionalControlsHidden,
74036    defaultControlsItemClassName,
74037    dropdownMenuClassName,
74038    hasMenuItems,
74039    headingClassName,
74040    headingLevel,
74041    menuItems,
74042    className: classes
74043  };
74044}
74045
74046;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-header/component.js
74047
74048/**
74049 * External dependencies
74050 */
74051
74052/**
74053 * WordPress dependencies
74054 */
74055
74056
74057
74058
74059/**
74060 * Internal dependencies
74061 */
74062
74063
74064
74065
74066
74067
74068
74069
74070const DefaultControlsGroup = ({
74071  itemClassName,
74072  items,
74073  toggleItem
74074}) => {
74075  if (!items.length) {
74076    return null;
74077  }
74078  const resetSuffix = (0,external_wp_element_namespaceObject.createElement)(ResetLabel, {
74079    "aria-hidden": true
74080  }, (0,external_wp_i18n_namespaceObject.__)('Reset'));
74081  return (0,external_wp_element_namespaceObject.createElement)(menu_group, {
74082    label: (0,external_wp_i18n_namespaceObject.__)('Defaults')
74083  }, items.map(([label, hasValue]) => {
74084    if (hasValue) {
74085      return (0,external_wp_element_namespaceObject.createElement)(menu_item, {
74086        key: label,
74087        className: itemClassName,
74088        role: "menuitem",
74089        label: (0,external_wp_i18n_namespaceObject.sprintf)(
74090        // translators: %s: The name of the control being reset e.g. "Padding".
74091        (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label),
74092        onClick: () => {
74093          toggleItem(label);
74094          (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
74095          // translators: %s: The name of the control being reset e.g. "Padding".
74096          (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive');
74097        },
74098        suffix: resetSuffix
74099      }, label);
74100    }
74101    return (0,external_wp_element_namespaceObject.createElement)(menu_item, {
74102      key: label,
74103      className: itemClassName,
74104      role: "menuitemcheckbox",
74105      isSelected: true,
74106      "aria-disabled": true
74107    }, label);
74108  }));
74109};
74110const OptionalControlsGroup = ({
74111  items,
74112  toggleItem
74113}) => {
74114  if (!items.length) {
74115    return null;
74116  }
74117  return (0,external_wp_element_namespaceObject.createElement)(menu_group, {
74118    label: (0,external_wp_i18n_namespaceObject.__)('Tools')
74119  }, items.map(([label, isSelected]) => {
74120    const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)(
74121    // translators: %s: The name of the control being hidden and reset e.g. "Padding".
74122    (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)(
74123    // translators: %s: The name of the control to display e.g. "Padding".
74124    (0,external_wp_i18n_namespaceObject.__)('Show %s'), label);
74125    return (0,external_wp_element_namespaceObject.createElement)(menu_item, {
74126      key: label,
74127      icon: isSelected ? library_check : null,
74128      isSelected: isSelected,
74129      label: itemLabel,
74130      onClick: () => {
74131        if (isSelected) {
74132          (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
74133          // translators: %s: The name of the control being reset e.g. "Padding".
74134          (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive');
74135        } else {
74136          (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
74137          // translators: %s: The name of the control being reset e.g. "Padding".
74138          (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive');
74139        }
74140        toggleItem(label);
74141      },
74142      role: "menuitemcheckbox"
74143    }, label);
74144  }));
74145};
74146const component_ToolsPanelHeader = (props, forwardedRef) => {
74147  const {
74148    areAllOptionalControlsHidden,
74149    defaultControlsItemClassName,
74150    dropdownMenuClassName,
74151    hasMenuItems,
74152    headingClassName,
74153    headingLevel = 2,
74154    label: labelText,
74155    menuItems,
74156    resetAll,
74157    toggleItem,
74158    ...headerProps
74159  } = useToolsPanelHeader(props);
74160  if (!labelText) {
74161    return null;
74162  }
74163  const defaultItems = Object.entries(menuItems?.default || {});
74164  const optionalItems = Object.entries(menuItems?.optional || {});
74165  const dropDownMenuIcon = areAllOptionalControlsHidden ? library_plus : more_vertical;
74166  const dropDownMenuLabelText = (0,external_wp_i18n_namespaceObject.sprintf)(
74167  // translators: %s: The name of the tool e.g. "Color" or "Typography".
74168  (0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal tool panel options'), labelText);
74169  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject.__)('All options are currently hidden') : undefined;
74170  const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);
74171  return (0,external_wp_element_namespaceObject.createElement)(h_stack_component, {
74172    ...headerProps,
74173    ref: forwardedRef
74174  }, (0,external_wp_element_namespaceObject.createElement)(heading_component, {
74175    level: headingLevel,
74176    className: headingClassName
74177  }, labelText), hasMenuItems && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, {
74178    icon: dropDownMenuIcon,
74179    label: dropDownMenuLabelText,
74180    menuProps: {
74181      className: dropdownMenuClassName
74182    },
74183    toggleProps: {
74184      isSmall: true,
74185      describedBy: dropdownMenuDescriptionText
74186    }
74187  }, () => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(DefaultControlsGroup, {
74188    items: defaultItems,
74189    toggleItem: toggleItem,
74190    itemClassName: defaultControlsItemClassName
74191  }), (0,external_wp_element_namespaceObject.createElement)(OptionalControlsGroup, {
74192    items: optionalItems,
74193    toggleItem: toggleItem
74194  }), (0,external_wp_element_namespaceObject.createElement)(menu_group, null, (0,external_wp_element_namespaceObject.createElement)(menu_item, {
74195    "aria-disabled": !canResetAll
74196    // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
74197    // we should rename it and explicitly allow it as an official API. All the other Button variants
74198    // don't make sense in a MenuItem context, and should be disallowed.
74199    ,
74200    variant: 'tertiary',
74201    onClick: () => {
74202      if (canResetAll) {
74203        resetAll();
74204        (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive');
74205      }
74206    }
74207  }, (0,external_wp_i18n_namespaceObject.__)('Reset all'))))));
74208};
74209const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader');
74210/* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader);
74211
74212;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel/hook.js
74213/**
74214 * WordPress dependencies
74215 */
74216
74217
74218/**
74219 * Internal dependencies
74220 */
74221
74222
74223
74224const DEFAULT_COLUMNS = 2;
74225const generateMenuItems = ({
74226  panelItems,
74227  shouldReset,
74228  currentMenuItems,
74229  menuItemOrder
74230}) => {
74231  const newMenuItems = {
74232    default: {},
74233    optional: {}
74234  };
74235  const menuItems = {
74236    default: {},
74237    optional: {}
74238  };
74239  panelItems.forEach(({
74240    hasValue,
74241    isShownByDefault,
74242    label
74243  }) => {
74244    const group = isShownByDefault ? 'default' : 'optional';
74245
74246    // If a menu item for this label has already been flagged as customized
74247    // (for default controls), or toggled on (for optional controls), do not
74248    // overwrite its value as those controls would lose that state.
74249    const existingItemValue = currentMenuItems?.[group]?.[label];
74250    const value = existingItemValue ? existingItemValue : hasValue();
74251    newMenuItems[group][label] = shouldReset ? false : value;
74252  });
74253
74254  // Loop the known, previously registered items first to maintain menu order.
74255  menuItemOrder.forEach(key => {
74256    if (newMenuItems.default.hasOwnProperty(key)) {
74257      menuItems.default[key] = newMenuItems.default[key];
74258    }
74259    if (newMenuItems.optional.hasOwnProperty(key)) {
74260      menuItems.optional[key] = newMenuItems.optional[key];
74261    }
74262  });
74263
74264  // Loop newMenuItems object adding any that aren't in the known items order.
74265  Object.keys(newMenuItems.default).forEach(key => {
74266    if (!menuItems.default.hasOwnProperty(key)) {
74267      menuItems.default[key] = newMenuItems.default[key];
74268    }
74269  });
74270  Object.keys(newMenuItems.optional).forEach(key => {
74271    if (!menuItems.optional.hasOwnProperty(key)) {
74272      menuItems.optional[key] = newMenuItems.optional[key];
74273    }
74274  });
74275  return menuItems;
74276};
74277const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0;
74278function useToolsPanel(props) {
74279  const {
74280    className,
74281    headingLevel = 2,
74282    resetAll,
74283    panelId,
74284    hasInnerWrapper = false,
74285    shouldRenderPlaceholderItems = false,
74286    __experimentalFirstVisibleItemClass,
74287    __experimentalLastVisibleItemClass,
74288    ...otherProps
74289  } = useContextSystem(props, 'ToolsPanel');
74290  const isResetting = (0,external_wp_element_namespaceObject.useRef)(false);
74291  const wasResetting = isResetting.current;
74292
74293  // `isResetting` is cleared via this hook to effectively batch together
74294  // the resetAll task. Without this, the flag is cleared after the first
74295  // control updates and forces a rerender with subsequent controls then
74296  // believing they need to reset, unfortunately using stale data.
74297  (0,external_wp_element_namespaceObject.useEffect)(() => {
74298    if (wasResetting) {
74299      isResetting.current = false;
74300    }
74301  }, [wasResetting]);
74302
74303  // Allow panel items to register themselves.
74304  const [panelItems, setPanelItems] = (0,external_wp_element_namespaceObject.useState)([]);
74305  const [menuItemOrder, setMenuItemOrder] = (0,external_wp_element_namespaceObject.useState)([]);
74306  const [resetAllFilters, setResetAllFilters] = (0,external_wp_element_namespaceObject.useState)([]);
74307  const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => {
74308    // Add item to panel items.
74309    setPanelItems(items => {
74310      const newItems = [...items];
74311      // If an item with this label has already been registered, remove it
74312      // first. This can happen when an item is moved between the default
74313      // and optional groups.
74314      const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label);
74315      if (existingIndex !== -1) {
74316        newItems.splice(existingIndex, 1);
74317      }
74318      return [...newItems, item];
74319    });
74320
74321    // Track the initial order of item registration. This is used for
74322    // maintaining menu item order later.
74323    setMenuItemOrder(items => {
74324      if (items.includes(item.label)) {
74325        return items;
74326      }
74327      return [...items, item.label];
74328    });
74329  }, [setPanelItems, setMenuItemOrder]);
74330
74331  // Panels need to deregister on unmount to avoid orphans in menu state.
74332  // This is an issue when panel items are being injected via SlotFills.
74333  const deregisterPanelItem = (0,external_wp_element_namespaceObject.useCallback)(label => {
74334    // When switching selections between components injecting matching
74335    // controls, e.g. both panels have a "padding" control, the
74336    // deregistration of the first panel doesn't occur until after the
74337    // registration of the next.
74338    setPanelItems(items => {
74339      const newItems = [...items];
74340      const index = newItems.findIndex(item => item.label === label);
74341      if (index !== -1) {
74342        newItems.splice(index, 1);
74343      }
74344      return newItems;
74345    });
74346  }, [setPanelItems]);
74347  const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(newFilter => {
74348    setResetAllFilters(filters => {
74349      return [...filters, newFilter];
74350    });
74351  }, [setResetAllFilters]);
74352  const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filterToRemove => {
74353    setResetAllFilters(filters => {
74354      return filters.filter(filter => filter !== filterToRemove);
74355    });
74356  }, [setResetAllFilters]);
74357
74358  // Manage and share display state of menu items representing child controls.
74359  const [menuItems, setMenuItems] = (0,external_wp_element_namespaceObject.useState)({
74360    default: {},
74361    optional: {}
74362  });
74363
74364  // Setup menuItems state as panel items register themselves.
74365  (0,external_wp_element_namespaceObject.useEffect)(() => {
74366    setMenuItems(prevState => {
74367      const items = generateMenuItems({
74368        panelItems,
74369        shouldReset: false,
74370        currentMenuItems: prevState,
74371        menuItemOrder
74372      });
74373      return items;
74374    });
74375  }, [panelItems, setMenuItems, menuItemOrder]);
74376
74377  // Force a menu item to be checked.
74378  // This is intended for use with default panel items. They are displayed
74379  // separately to optional items and have different display states,
74380  // we need to update that when their value is customized.
74381  const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((label, group = 'default') => {
74382    setMenuItems(items => {
74383      const newState = {
74384        ...items,
74385        [group]: {
74386          ...items[group],
74387          [label]: true
74388        }
74389      };
74390      return newState;
74391    });
74392  }, [setMenuItems]);
74393
74394  // Whether all optional menu items are hidden or not must be tracked
74395  // in order to later determine if the panel display is empty and handle
74396  // conditional display of a plus icon to indicate the presence of further
74397  // menu items.
74398  const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0,external_wp_element_namespaceObject.useState)(false);
74399  (0,external_wp_element_namespaceObject.useEffect)(() => {
74400    if (isMenuItemTypeEmpty(menuItems?.default) && !isMenuItemTypeEmpty(menuItems?.optional)) {
74401      const allControlsHidden = !Object.entries(menuItems.optional).some(([, isSelected]) => isSelected);
74402      setAreAllOptionalControlsHidden(allControlsHidden);
74403    }
74404  }, [menuItems, setAreAllOptionalControlsHidden]);
74405  const cx = useCx();
74406  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
74407    const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
74408    const emptyStyle = isMenuItemTypeEmpty(menuItems?.default) && areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper;
74409    return cx(ToolsPanel(DEFAULT_COLUMNS), wrapperStyle, emptyStyle, className);
74410  }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]);
74411
74412  // Toggle the checked state of a menu item which is then used to determine
74413  // display of the item within the panel.
74414  const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => {
74415    const currentItem = panelItems.find(item => item.label === label);
74416    if (!currentItem) {
74417      return;
74418    }
74419    const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
74420    const newMenuItems = {
74421      ...menuItems,
74422      [menuGroup]: {
74423        ...menuItems[menuGroup],
74424        [label]: !menuItems[menuGroup][label]
74425      }
74426    };
74427    setMenuItems(newMenuItems);
74428  }, [menuItems, panelItems, setMenuItems]);
74429
74430  // Resets display of children and executes resetAll callback if available.
74431  const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => {
74432    if (typeof resetAll === 'function') {
74433      isResetting.current = true;
74434      resetAll(resetAllFilters);
74435    }
74436
74437    // Turn off display of all non-default items.
74438    const resetMenuItems = generateMenuItems({
74439      panelItems,
74440      menuItemOrder,
74441      shouldReset: true
74442    });
74443    setMenuItems(resetMenuItems);
74444  }, [panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder]);
74445
74446  // Assist ItemGroup styling when there are potentially hidden placeholder
74447  // items by identifying first & last items that are toggled on for display.
74448  const getFirstVisibleItemLabel = items => {
74449    const optionalItems = menuItems.optional || {};
74450    const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]);
74451    return firstItem?.label;
74452  };
74453  const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);
74454  const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());
74455  const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({
74456    areAllOptionalControlsHidden,
74457    deregisterPanelItem,
74458    deregisterResetAllFilter,
74459    firstDisplayedItem,
74460    flagItemCustomization,
74461    hasMenuItems: !!panelItems.length,
74462    isResetting: isResetting.current,
74463    lastDisplayedItem,
74464    menuItems,
74465    panelId,
74466    registerPanelItem,
74467    registerResetAllFilter,
74468    shouldRenderPlaceholderItems,
74469    __experimentalFirstVisibleItemClass,
74470    __experimentalLastVisibleItemClass
74471  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, panelItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
74472  return {
74473    ...otherProps,
74474    headingLevel,
74475    panelContext,
74476    resetAllItems,
74477    toggleItem,
74478    className: classes
74479  };
74480}
74481
74482;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel/component.js
74483
74484/**
74485 * External dependencies
74486 */
74487
74488/**
74489 * Internal dependencies
74490 */
74491
74492
74493
74494
74495
74496const UnconnectedToolsPanel = (props, forwardedRef) => {
74497  const {
74498    children,
74499    label,
74500    panelContext,
74501    resetAllItems,
74502    toggleItem,
74503    headingLevel,
74504    ...toolsPanelProps
74505  } = useToolsPanel(props);
74506  return (0,external_wp_element_namespaceObject.createElement)(grid_component, {
74507    ...toolsPanelProps,
74508    columns: 2,
74509    ref: forwardedRef
74510  }, (0,external_wp_element_namespaceObject.createElement)(ToolsPanelContext.Provider, {
74511    value: panelContext
74512  }, (0,external_wp_element_namespaceObject.createElement)(tools_panel_header_component, {
74513    label: label,
74514    resetAll: resetAllItems,
74515    toggleItem: toggleItem,
74516    headingLevel: headingLevel
74517  }), children));
74518};
74519
74520/**
74521 * The `ToolsPanel` is a container component that displays its children preceded
74522 * by a header. The header includes a dropdown menu which is automatically
74523 * generated from the panel's inner `ToolsPanelItems`.
74524 *
74525 * ```jsx
74526 * import { __ } from '@wordpress/i18n';
74527 * import {
74528 *   __experimentalToolsPanel as ToolsPanel,
74529 *   __experimentalToolsPanelItem as ToolsPanelItem,
74530 *   __experimentalUnitControl as UnitControl
74531 * } from '@wordpress/components';
74532 *
74533 * function Example() {
74534 *   const [ height, setHeight ] = useState();
74535 *   const [ width, setWidth ] = useState();
74536 *
74537 *   const resetAll = () => {
74538 *     setHeight();
74539 *     setWidth();
74540 *   }
74541 *
74542 *   return (
74543 *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
74544 *       <ToolsPanelItem
74545 *         hasValue={ () => !! height }
74546 *         label={ __( 'Height' ) }
74547 *         onDeselect={ () => setHeight() }
74548 *       >
74549 *         <UnitControl
74550 *           label={ __( 'Height' ) }
74551 *           onChange={ setHeight }
74552 *           value={ height }
74553 *         />
74554 *       </ToolsPanelItem>
74555 *       <ToolsPanelItem
74556 *         hasValue={ () => !! width }
74557 *         label={ __( 'Width' ) }
74558 *         onDeselect={ () => setWidth() }
74559 *       >
74560 *         <UnitControl
74561 *           label={ __( 'Width' ) }
74562 *           onChange={ setWidth }
74563 *           value={ width }
74564 *         />
74565 *       </ToolsPanelItem>
74566 *     </ToolsPanel>
74567 *   );
74568 * }
74569 * ```
74570 */
74571const component_ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel');
74572/* harmony default export */ const tools_panel_component = (component_ToolsPanel);
74573
74574;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-item/hook.js
74575/**
74576 * WordPress dependencies
74577 */
74578
74579
74580
74581/**
74582 * Internal dependencies
74583 */
74584
74585
74586
74587
74588const hook_noop = () => {};
74589function useToolsPanelItem(props) {
74590  const {
74591    className,
74592    hasValue,
74593    isShownByDefault = false,
74594    label,
74595    panelId,
74596    resetAllFilter = hook_noop,
74597    onDeselect,
74598    onSelect,
74599    ...otherProps
74600  } = useContextSystem(props, 'ToolsPanelItem');
74601  const {
74602    panelId: currentPanelId,
74603    menuItems,
74604    registerResetAllFilter,
74605    deregisterResetAllFilter,
74606    registerPanelItem,
74607    deregisterPanelItem,
74608    flagItemCustomization,
74609    isResetting,
74610    shouldRenderPlaceholderItems: shouldRenderPlaceholder,
74611    firstDisplayedItem,
74612    lastDisplayedItem,
74613    __experimentalFirstVisibleItemClass,
74614    __experimentalLastVisibleItemClass
74615  } = useToolsPanelContext();
74616  const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId, hasValue]);
74617  const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId, resetAllFilter]);
74618  const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId);
74619  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
74620
74621  // Registering the panel item allows the panel to include it in its
74622  // automatically generated menu and determine its initial checked status.
74623  (0,external_wp_element_namespaceObject.useEffect)(() => {
74624    if (hasMatchingPanel && previousPanelId !== null) {
74625      registerPanelItem({
74626        hasValue: hasValueCallback,
74627        isShownByDefault,
74628        label,
74629        panelId
74630      });
74631    }
74632    return () => {
74633      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {
74634        deregisterPanelItem(label);
74635      }
74636    };
74637  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);
74638  (0,external_wp_element_namespaceObject.useEffect)(() => {
74639    if (hasMatchingPanel) {
74640      registerResetAllFilter(resetAllFilterCallback);
74641    }
74642    return () => {
74643      if (hasMatchingPanel) {
74644        deregisterResetAllFilter(resetAllFilterCallback);
74645      }
74646    };
74647  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);
74648
74649  // Note: `label` is used as a key when building menu item state in
74650  // `ToolsPanel`.
74651  const menuGroup = isShownByDefault ? 'default' : 'optional';
74652  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];
74653  const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked);
74654  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;
74655  const isValueSet = hasValue();
74656  const wasValueSet = (0,external_wp_compose_namespaceObject.usePrevious)(isValueSet);
74657  const newValueSet = isValueSet && !wasValueSet;
74658
74659  // Notify the panel when an item's value has been set.
74660  //
74661  // 1. For default controls, this is so "reset" appears beside its menu item.
74662  // 2. For optional controls, when the panel ID is `null`, it allows the
74663  // panel to ensure the item is toggled on for display in the menu, given the
74664  // value has been set external to the control.
74665  (0,external_wp_element_namespaceObject.useEffect)(() => {
74666    if (!newValueSet) {
74667      return;
74668    }
74669    if (isShownByDefault || currentPanelId === null) {
74670      flagItemCustomization(label, menuGroup);
74671    }
74672  }, [currentPanelId, newValueSet, isShownByDefault, menuGroup, label, flagItemCustomization]);
74673
74674  // Determine if the panel item's corresponding menu is being toggled and
74675  // trigger appropriate callback if it is.
74676  (0,external_wp_element_namespaceObject.useEffect)(() => {
74677    // We check whether this item is currently registered as items rendered
74678    // via fills can persist through the parent panel being remounted.
74679    // See: https://github.com/WordPress/gutenberg/pull/45673
74680    if (!isRegistered || isResetting || !hasMatchingPanel) {
74681      return;
74682    }
74683    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {
74684      onSelect?.();
74685    }
74686    if (!isMenuItemChecked && wasMenuItemChecked) {
74687      onDeselect?.();
74688    }
74689  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);
74690
74691  // The item is shown if it is a default control regardless of whether it
74692  // has a value. Optional items are shown when they are checked or have
74693  // a value.
74694  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;
74695  const cx = useCx();
74696  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
74697    const placeholderStyle = shouldRenderPlaceholder && !isShown && ToolsPanelItemPlaceholder;
74698    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
74699    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;
74700    return cx(ToolsPanelItem, placeholderStyle, className, firstItemStyle, lastItemStyle);
74701  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);
74702  return {
74703    ...otherProps,
74704    isShown,
74705    shouldRenderPlaceholder,
74706    className: classes
74707  };
74708}
74709
74710;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-item/component.js
74711
74712/**
74713 * External dependencies
74714 */
74715
74716/**
74717 * Internal dependencies
74718 */
74719
74720
74721
74722// This wraps controls to be conditionally displayed within a tools panel. It
74723// prevents props being applied to HTML elements that would make them invalid.
74724const UnconnectedToolsPanelItem = (props, forwardedRef) => {
74725  const {
74726    children,
74727    isShown,
74728    shouldRenderPlaceholder,
74729    ...toolsPanelItemProps
74730  } = useToolsPanelItem(props);
74731  if (!isShown) {
74732    return shouldRenderPlaceholder ? (0,external_wp_element_namespaceObject.createElement)(component, {
74733      ...toolsPanelItemProps,
74734      ref: forwardedRef
74735    }) : null;
74736  }
74737  return (0,external_wp_element_namespaceObject.createElement)(component, {
74738    ...toolsPanelItemProps,
74739    ref: forwardedRef
74740  }, children);
74741};
74742const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem');
74743/* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem);
74744
74745;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index-context.js
74746/**
74747 * WordPress dependencies
74748 */
74749
74750const RovingTabIndexContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
74751const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext);
74752const RovingTabIndexProvider = RovingTabIndexContext.Provider;
74753
74754;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index.js
74755
74756/**
74757 * WordPress dependencies
74758 */
74759
74760
74761/**
74762 * Internal dependencies
74763 */
74764
74765
74766/**
74767 * Provider for adding roving tab index behaviors to tree grid structures.
74768 *
74769 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
74770 */
74771function RovingTabIndex({
74772  children
74773}) {
74774  const [lastFocusedElement, setLastFocusedElement] = (0,external_wp_element_namespaceObject.useState)();
74775
74776  // Use `useMemo` to avoid creation of a new object for the providerValue
74777  // on every render. Only create a new object when the `lastFocusedElement`
74778  // value changes.
74779  const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
74780    lastFocusedElement,
74781    setLastFocusedElement
74782  }), [lastFocusedElement]);
74783  return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndexProvider, {
74784    value: providerValue
74785  }, children);
74786}
74787
74788;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/index.js
74789
74790/**
74791 * WordPress dependencies
74792 */
74793
74794
74795
74796
74797/**
74798 * Internal dependencies
74799 */
74800
74801/**
74802 * Return focusables in a row element, excluding those from other branches
74803 * nested within the row.
74804 *
74805 * @param rowElement The DOM element representing the row.
74806 *
74807 * @return The array of focusables in the row.
74808 */
74809function getRowFocusables(rowElement) {
74810  const focusablesInRow = external_wp_dom_namespaceObject.focus.focusable.find(rowElement, {
74811    sequential: true
74812  });
74813  return focusablesInRow.filter(focusable => {
74814    return focusable.closest('[role="row"]') === rowElement;
74815  });
74816}
74817
74818/**
74819 * Renders both a table and tbody element, used to create a tree hierarchy.
74820 *
74821 */
74822function UnforwardedTreeGrid({
74823  children,
74824  onExpandRow = () => {},
74825  onCollapseRow = () => {},
74826  onFocusRow = () => {},
74827  applicationAriaLabel,
74828  ...props
74829}, /** A ref to the underlying DOM table element. */
74830ref) {
74831  const onKeyDown = (0,external_wp_element_namespaceObject.useCallback)(event => {
74832    const {
74833      keyCode,
74834      metaKey,
74835      ctrlKey,
74836      altKey
74837    } = event;
74838
74839    // The shift key is intentionally absent from the following list,
74840    // to enable shift + up/down to select items from the list.
74841    const hasModifierKeyPressed = metaKey || ctrlKey || altKey;
74842    if (hasModifierKeyPressed || ![external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT, external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) {
74843      return;
74844    }
74845
74846    // The event will be handled, stop propagation.
74847    event.stopPropagation();
74848    const {
74849      activeElement
74850    } = document;
74851    const {
74852      currentTarget: treeGridElement
74853    } = event;
74854    if (!activeElement || !treeGridElement.contains(activeElement)) {
74855      return;
74856    }
74857
74858    // Calculate the columnIndex of the active element.
74859    const activeRow = activeElement.closest('[role="row"]');
74860    if (!activeRow) {
74861      return;
74862    }
74863    const focusablesInRow = getRowFocusables(activeRow);
74864    const currentColumnIndex = focusablesInRow.indexOf(activeElement);
74865    const canExpandCollapse = 0 === currentColumnIndex;
74866    const cannotFocusNextColumn = canExpandCollapse && (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') && keyCode === external_wp_keycodes_namespaceObject.RIGHT;
74867    if ([external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT].includes(keyCode)) {
74868      // Calculate to the next element.
74869      let nextIndex;
74870      if (keyCode === external_wp_keycodes_namespaceObject.LEFT) {
74871        nextIndex = Math.max(0, currentColumnIndex - 1);
74872      } else {
74873        nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1);
74874      }
74875
74876      // Focus is at the left most column.
74877      if (canExpandCollapse) {
74878        if (keyCode === external_wp_keycodes_namespaceObject.LEFT) {
74879          var _activeRow$getAttribu;
74880          // Left:
74881          // If a row is focused, and it is expanded, collapses the current row.
74882          if (activeRow.getAttribute('data-expanded') === 'true' || activeRow.getAttribute('aria-expanded') === 'true') {
74883            onCollapseRow(activeRow);
74884            event.preventDefault();
74885            return;
74886          }
74887          // If a row is focused, and it is collapsed, moves to the parent row (if there is one).
74888          const level = Math.max(parseInt((_activeRow$getAttribu = activeRow?.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : '1', 10) - 1, 1);
74889          const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
74890          let parentRow = activeRow;
74891          const currentRowIndex = rows.indexOf(activeRow);
74892          for (let i = currentRowIndex; i >= 0; i--) {
74893            const ariaLevel = rows[i].getAttribute('aria-level');
74894            if (ariaLevel !== null && parseInt(ariaLevel, 10) === level) {
74895              parentRow = rows[i];
74896              break;
74897            }
74898          }
74899          getRowFocusables(parentRow)?.[0]?.focus();
74900        }
74901        if (keyCode === external_wp_keycodes_namespaceObject.RIGHT) {
74902          // Right:
74903          // If a row is focused, and it is collapsed, expands the current row.
74904          if (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') {
74905            onExpandRow(activeRow);
74906            event.preventDefault();
74907            return;
74908          }
74909          // If a row is focused, and it is expanded, focuses the next cell in the row.
74910          const focusableItems = getRowFocusables(activeRow);
74911          if (focusableItems.length > 0) {
74912            focusableItems[nextIndex]?.focus();
74913          }
74914        }
74915        // Prevent key use for anything else. For example, Voiceover
74916        // will start reading text on continued use of left/right arrow
74917        // keys.
74918        event.preventDefault();
74919        return;
74920      }
74921
74922      // Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
74923      if (cannotFocusNextColumn) {
74924        return;
74925      }
74926      focusablesInRow[nextIndex].focus();
74927
74928      // Prevent key use for anything else. This ensures Voiceover
74929      // doesn't try to handle key navigation.
74930      event.preventDefault();
74931    } else if ([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN].includes(keyCode)) {
74932      // Calculate the rowIndex of the next row.
74933      const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
74934      const currentRowIndex = rows.indexOf(activeRow);
74935      let nextRowIndex;
74936      if (keyCode === external_wp_keycodes_namespaceObject.UP) {
74937        nextRowIndex = Math.max(0, currentRowIndex - 1);
74938      } else {
74939        nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1);
74940      }
74941
74942      // Focus is either at the top or bottom edge of the grid. Do nothing.
74943      if (nextRowIndex === currentRowIndex) {
74944        // Prevent key use for anything else. For example, Voiceover
74945        // will start navigating horizontally when reaching the vertical
74946        // bounds of a table.
74947        event.preventDefault();
74948        return;
74949      }
74950
74951      // Get the focusables in the next row.
74952      const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]);
74953
74954      // If for some reason there are no focusables in the next row, do nothing.
74955      if (!focusablesInNextRow || !focusablesInNextRow.length) {
74956        // Prevent key use for anything else. For example, Voiceover
74957        // will still focus text when using arrow keys, while this
74958        // component should limit navigation to focusables.
74959        event.preventDefault();
74960        return;
74961      }
74962
74963      // Try to focus the element in the next row that's at a similar column to the activeElement.
74964      const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
74965      focusablesInNextRow[nextIndex].focus();
74966
74967      // Let consumers know the row that was originally focused,
74968      // and the row that is now in focus.
74969      onFocusRow(event, activeRow, rows[nextRowIndex]);
74970
74971      // Prevent key use for anything else. This ensures Voiceover
74972      // doesn't try to handle key navigation.
74973      event.preventDefault();
74974    } else if ([external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) {
74975      // Calculate the rowIndex of the next row.
74976      const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
74977      const currentRowIndex = rows.indexOf(activeRow);
74978      let nextRowIndex;
74979      if (keyCode === external_wp_keycodes_namespaceObject.HOME) {
74980        nextRowIndex = 0;
74981      } else {
74982        nextRowIndex = rows.length - 1;
74983      }
74984
74985      // Focus is either at the top or bottom edge of the grid. Do nothing.
74986      if (nextRowIndex === currentRowIndex) {
74987        // Prevent key use for anything else. For example, Voiceover
74988        // will start navigating horizontally when reaching the vertical
74989        // bounds of a table.
74990        event.preventDefault();
74991        return;
74992      }
74993
74994      // Get the focusables in the next row.
74995      const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]);
74996
74997      // If for some reason there are no focusables in the next row, do nothing.
74998      if (!focusablesInNextRow || !focusablesInNextRow.length) {
74999        // Prevent key use for anything else. For example, Voiceover
75000        // will still focus text when using arrow keys, while this
75001        // component should limit navigation to focusables.
75002        event.preventDefault();
75003        return;
75004      }
75005
75006      // Try to focus the element in the next row that's at a similar column to the activeElement.
75007      const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
75008      focusablesInNextRow[nextIndex].focus();
75009
75010      // Let consumers know the row that was originally focused,
75011      // and the row that is now in focus.
75012      onFocusRow(event, activeRow, rows[nextRowIndex]);
75013
75014      // Prevent key use for anything else. This ensures Voiceover
75015      // doesn't try to handle key navigation.
75016      event.preventDefault();
75017    }
75018  }, [onExpandRow, onCollapseRow, onFocusRow]);
75019
75020  /* Disable reason: A treegrid is implemented using a table element. */
75021  /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
75022  return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndex, null, (0,external_wp_element_namespaceObject.createElement)("div", {
75023    role: "application",
75024    "aria-label": applicationAriaLabel
75025  }, (0,external_wp_element_namespaceObject.createElement)("table", {
75026    ...props,
75027    role: "treegrid",
75028    onKeyDown: onKeyDown,
75029    ref: ref
75030  }, (0,external_wp_element_namespaceObject.createElement)("tbody", null, children))));
75031  /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
75032}
75033
75034/**
75035 * `TreeGrid` is used to create a tree hierarchy.
75036 * It is not a visually styled component, but instead helps with adding
75037 * keyboard navigation and roving tab index behaviors to tree grid structures.
75038 *
75039 * A tree grid is a hierarchical 2 dimensional UI component, for example it could be
75040 * used to implement a file system browser.
75041 *
75042 * A tree grid allows the user to navigate using arrow keys.
75043 * Up/down to navigate vertically across rows, and left/right to navigate horizontally
75044 * between focusables in a row.
75045 *
75046 * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used
75047 * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.
75048 *
75049 * ```jsx
75050 * function TreeMenu() {
75051 * 	return (
75052 * 		<TreeGrid>
75053 * 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
75054 * 				<TreeGridCell>
75055 * 					{ ( props ) => (
75056 * 						<Button onClick={ onSelect } { ...props }>Select</Button>
75057 * 					) }
75058 * 				</TreeGridCell>
75059 * 				<TreeGridCell>
75060 * 					{ ( props ) => (
75061 * 						<Button onClick={ onMove } { ...props }>Move</Button>
75062 * 					) }
75063 * 				</TreeGridCell>
75064 * 			</TreeGridRow>
75065 * 			<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
75066 * 				<TreeGridCell>
75067 * 					{ ( props ) => (
75068 * 						<Button onClick={ onSelect } { ...props }>Select</Button>
75069 * 					) }
75070 * 				</TreeGridCell>
75071 * 				<TreeGridCell>
75072 * 					{ ( props ) => (
75073 * 						<Button onClick={ onMove } { ...props }>Move</Button>
75074 * 					) }
75075 * 				</TreeGridCell>
75076 * 			</TreeGridRow>
75077 * 			<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
75078 * 				<TreeGridCell>
75079 * 					{ ( props ) => (
75080 * 						<Button onClick={ onSelect } { ...props }>Select</Button>
75081 * 					) }
75082 * 				</TreeGridCell>
75083 * 				<TreeGridCell>
75084 * 					{ ( props ) => (
75085 * 						<Button onClick={ onMove } { ...props }>Move</Button>
75086 * 					) }
75087 * 				</TreeGridCell>
75088 * 			</TreeGridRow>
75089 * 		</TreeGrid>
75090 * 	);
75091 * }
75092 * ```
75093 *
75094 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
75095 */
75096const TreeGrid = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGrid);
75097/* harmony default export */ const tree_grid = (TreeGrid);
75098
75099
75100
75101
75102;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/row.js
75103
75104/**
75105 * WordPress dependencies
75106 */
75107
75108
75109/**
75110 * Internal dependencies
75111 */
75112
75113function UnforwardedTreeGridRow({
75114  children,
75115  level,
75116  positionInSet,
75117  setSize,
75118  isExpanded,
75119  ...props
75120}, ref) {
75121  return (0,external_wp_element_namespaceObject.createElement)("tr", {
75122    ...props,
75123    ref: ref,
75124    role: "row",
75125    "aria-level": level,
75126    "aria-posinset": positionInSet,
75127    "aria-setsize": setSize,
75128    "aria-expanded": isExpanded
75129  }, children);
75130}
75131
75132/**
75133 * `TreeGridRow` is used to create a tree hierarchy.
75134 * It is not a visually styled component, but instead helps with adding
75135 * keyboard navigation and roving tab index behaviors to tree grid structures.
75136 *
75137 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
75138 */
75139const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow);
75140/* harmony default export */ const tree_grid_row = (TreeGridRow);
75141
75142;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index-item.js
75143
75144/**
75145 * WordPress dependencies
75146 */
75147
75148
75149/**
75150 * Internal dependencies
75151 */
75152
75153const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({
75154  children,
75155  as: Component,
75156  ...props
75157}, forwardedRef) {
75158  const localRef = (0,external_wp_element_namespaceObject.useRef)();
75159  const ref = forwardedRef || localRef;
75160  // @ts-expect-error - We actually want to throw an error if this is undefined.
75161  const {
75162    lastFocusedElement,
75163    setLastFocusedElement
75164  } = useRovingTabIndexContext();
75165  let tabIndex;
75166  if (lastFocusedElement) {
75167    tabIndex = lastFocusedElement === (
75168    // TODO: The original implementation simply used `ref.current` here, assuming
75169    // that a forwarded ref would always be an object, which is not necessarily true.
75170    // This workaround maintains the original runtime behavior in a type-safe way,
75171    // but should be revisited.
75172    'current' in ref ? ref.current : undefined) ? 0 : -1;
75173  }
75174  const onFocus = event => setLastFocusedElement?.(event.target);
75175  const allProps = {
75176    ref,
75177    tabIndex,
75178    onFocus,
75179    ...props
75180  };
75181  if (typeof children === 'function') {
75182    return children(allProps);
75183  }
75184  if (!Component) return null;
75185  return (0,external_wp_element_namespaceObject.createElement)(Component, {
75186    ...allProps
75187  }, children);
75188});
75189/* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem);
75190
75191;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/item.js
75192
75193/**
75194 * WordPress dependencies
75195 */
75196
75197
75198/**
75199 * Internal dependencies
75200 */
75201
75202function UnforwardedTreeGridItem({
75203  children,
75204  ...props
75205}, ref) {
75206  return (0,external_wp_element_namespaceObject.createElement)(roving_tab_index_item, {
75207    ref: ref,
75208    ...props
75209  }, children);
75210}
75211
75212/**
75213 * `TreeGridItem` is used to create a tree hierarchy.
75214 * It is not a visually styled component, but instead helps with adding
75215 * keyboard navigation and roving tab index behaviors to tree grid structures.
75216 *
75217 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
75218 */
75219const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem);
75220/* harmony default export */ const tree_grid_item = (TreeGridItem);
75221
75222;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/cell.js
75223
75224/**
75225 * WordPress dependencies
75226 */
75227
75228
75229/**
75230 * Internal dependencies
75231 */
75232
75233function UnforwardedTreeGridCell({
75234  children,
75235  withoutGridItem = false,
75236  ...props
75237}, ref) {
75238  return (0,external_wp_element_namespaceObject.createElement)("td", {
75239    ...props,
75240    role: "gridcell"
75241  }, withoutGridItem ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children) : (0,external_wp_element_namespaceObject.createElement)(tree_grid_item, {
75242    ref: ref
75243  }, children));
75244}
75245
75246/**
75247 * `TreeGridCell` is used to create a tree hierarchy.
75248 * It is not a visually styled component, but instead helps with adding
75249 * keyboard navigation and roving tab index behaviors to tree grid structures.
75250 *
75251 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
75252 */
75253const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell);
75254/* harmony default export */ const cell = (TreeGridCell);
75255
75256;// CONCATENATED MODULE: ./packages/components/build-module/isolated-event-container/index.js
75257
75258/**
75259 * External dependencies
75260 */
75261
75262/**
75263 * WordPress dependencies
75264 */
75265
75266
75267function stopPropagation(event) {
75268  event.stopPropagation();
75269}
75270const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
75271  external_wp_deprecated_default()('wp.components.IsolatedEventContainer', {
75272    since: '5.7'
75273  });
75274
75275  // Disable reason: this stops certain events from propagating outside of the component.
75276  // - onMouseDown is disabled as this can cause interactions with other DOM elements.
75277  /* eslint-disable jsx-a11y/no-static-element-interactions */
75278  return (0,external_wp_element_namespaceObject.createElement)("div", {
75279    ...props,
75280    ref: ref,
75281    onMouseDown: stopPropagation
75282  });
75283  /* eslint-enable jsx-a11y/no-static-element-interactions */
75284});
75285
75286/* harmony default export */ const isolated_event_container = (IsolatedEventContainer);
75287
75288;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js
75289// @ts-nocheck
75290/**
75291 * External dependencies
75292 */
75293
75294
75295/**
75296 * WordPress dependencies
75297 */
75298
75299
75300/**
75301 * Internal dependencies
75302 */
75303
75304function useSlotFills(name) {
75305  const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
75306  const fills = useSnapshot(registry.fills, {
75307    sync: true
75308  });
75309  // The important bit here is that this call ensures that the hook
75310  // only causes a re-render if the "fills" of a given slot name
75311  // change change, not any fills.
75312  return fills.get(name);
75313}
75314
75315;// CONCATENATED MODULE: ./packages/components/build-module/z-stack/styles.js
75316
75317function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
75318/**
75319 * External dependencies
75320 */
75321
75322const ZStackChildView = emotion_styled_base_browser_esm("div",  true ? {
75323  target: "ebn2ljm1"
75324} : 0)("&:not( :first-of-type ){", ({
75325  offsetAmount
75326}) =>
75326 /*#__PURE__*/emotion_react_browser_esm_css({
75327  marginInlineStart: offsetAmount
75328},  true ? "" : 0,  true ? "" : 0), ";}", ({
75329  zIndex
75330}) => /*#__PURE__*/emotion_react_browser_esm_css({
75331  zIndex
75332},  true ? "" : 0,  true ? "" : 0), ";" + ( true ? "" : 0));
75333var z_stack_styles_ref =  true ? {
75334  name: "rs0gp6",
75335  styles: "grid-row-start:1;grid-column-start:1"
75336} : 0;
75337const ZStackView = emotion_styled_base_browser_esm("div",  true ? {
75338  target: "ebn2ljm0"
75339} : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({
75340  isLayered
75341}) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell
75342z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0));
75343
75344;// CONCATENATED MODULE: ./packages/components/build-module/z-stack/component.js
75345
75346/**
75347 * External dependencies
75348 */
75349
75350/**
75351 * WordPress dependencies
75352 */
75353
75354
75355/**
75356 * Internal dependencies
75357 */
75358
75359
75360
75361function UnconnectedZStack(props, forwardedRef) {
75362  const {
75363    children,
75364    className,
75365    isLayered = true,
75366    isReversed = false,
75367    offset = 0,
75368    ...otherProps
75369  } = useContextSystem(props, 'ZStack');
75370  const validChildren = getValidChildren(children);
75371  const childrenLastIndex = validChildren.length - 1;
75372  const clonedChildren = validChildren.map((child, index) => {
75373    const zIndex = isReversed ? childrenLastIndex - index : index;
75374    // Only when the component is layered, the offset needs to be multiplied by
75375    // the item's index, so that items can correctly stack at the right distance
75376    const offsetAmount = isLayered ? offset * index : offset;
75377    const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index;
75378    return (0,external_wp_element_namespaceObject.createElement)(ZStackChildView, {
75379      offsetAmount: offsetAmount,
75380      zIndex: zIndex,
75381      key: key
75382    }, child);
75383  });
75384  return (0,external_wp_element_namespaceObject.createElement)(ZStackView, {
75385    ...otherProps,
75386    className: className,
75387    isLayered: isLayered,
75388    ref: forwardedRef
75389  }, clonedChildren);
75390}
75391
75392/**
75393 * `ZStack` allows you to stack things along the Z-axis.
75394 *
75395 * ```jsx
75396 * import { __experimentalZStack as ZStack } from '@wordpress/components';
75397 *
75398 * function Example() {
75399 *   return (
75400 *     <ZStack offset={ 20 } isLayered>
75401 *       <ExampleImage />
75402 *       <ExampleImage />
75403 *       <ExampleImage />
75404 *     </ZStack>
75405 *   );
75406 * }
75407 * ```
75408 */
75409const ZStack = contextConnect(UnconnectedZStack, 'ZStack');
75410/* harmony default export */ const z_stack_component = (ZStack);
75411
75412;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/navigate-regions/index.js
75413
75414/**
75415 * WordPress dependencies
75416 */
75417
75418
75419
75420const defaultShortcuts = {
75421  previous: [{
75422    modifier: 'ctrlShift',
75423    character: '`'
75424  }, {
75425    modifier: 'ctrlShift',
75426    character: '~'
75427  }, {
75428    modifier: 'access',
75429    character: 'p'
75430  }],
75431  next: [{
75432    modifier: 'ctrl',
75433    character: '`'
75434  }, {
75435    modifier: 'access',
75436    character: 'n'
75437  }]
75438};
75439function useNavigateRegions(shortcuts = defaultShortcuts) {
75440  const ref = (0,external_wp_element_namespaceObject.useRef)(null);
75441  const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false);
75442  function focusRegion(offset) {
75443    var _ref$current$querySel;
75444    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);
75445    if (!regions.length) {
75446      return;
75447    }
75448    let nextRegion = regions[0];
75449    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
75450    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]');
75451    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;
75452    if (selectedIndex !== -1) {
75453      let nextIndex = selectedIndex + offset;
75454      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
75455      nextIndex = nextIndex === regions.length ? 0 : nextIndex;
75456      nextRegion = regions[nextIndex];
75457    }
75458    nextRegion.focus();
75459    setIsFocusingRegions(true);
75460  }
75461  const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
75462    function onClick() {
75463      setIsFocusingRegions(false);
75464    }
75465    element.addEventListener('click', onClick);
75466    return () => {
75467      element.removeEventListener('click', onClick);
75468    };
75469  }, [setIsFocusingRegions]);
75470  return {
75471    ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]),
75472    className: isFocusingRegions ? 'is-focusing-regions' : '',
75473    onKeyDown(event) {
75474      if (shortcuts.previous.some(({
75475        modifier,
75476        character
75477      }) => {
75478        return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
75479      })) {
75480        focusRegion(-1);
75481      } else if (shortcuts.next.some(({
75482        modifier,
75483        character
75484      }) => {
75485        return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
75486      })) {
75487        focusRegion(1);
75488      }
75489    }
75490  };
75491}
75492
75493/**
75494 * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
75495 * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region").
75496 * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,
75497 * these elements must be properly labelled to briefly describe the purpose of the content in the region.
75498 * For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)
75499 * and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).
75500 *
75501 * ```jsx
75502 * import { navigateRegions } from '@wordpress/components';
75503 *
75504 * const MyComponentWithNavigateRegions = navigateRegions( () => (
75505 * 	<div>
75506 * 		<div role="region" tabIndex="-1" aria-label="Header">
75507 * 			Header
75508 * 		</div>
75509 * 		<div role="region" tabIndex="-1" aria-label="Content">
75510 * 			Content
75511 * 		</div>
75512 * 		<div role="region" tabIndex="-1" aria-label="Sidebar">
75513 * 			Sidebar
75514 * 		</div>
75515 * 	</div>
75516 * ) );
75517 * ```
75518 */
75519/* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({
75520  shortcuts,
75521  ...props
75522}) => (0,external_wp_element_namespaceObject.createElement)("div", {
75523  ...useNavigateRegions(shortcuts)
75524}, (0,external_wp_element_namespaceObject.createElement)(Component, {
75525  ...props
75526}
75526)), 'navigateRegions'));
75527
75528;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-constrained-tabbing/index.js
75529
75530/**
75531 * WordPress dependencies
75532 */
75533
75534
75535/**
75536 * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
75537 * adding the ability to constrain keyboard navigation with the Tab key within a component.
75538 * For accessibility reasons, some UI components need to constrain Tab navigation, for example
75539 * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
75540 * navigate away from the wrapped component is implemented by other means, usually by pressing
75541 * the Escape key or using a specific UI control, e.g. a "Close" button.
75542 */
75543const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) {
75544  const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
75545  return (0,external_wp_element_namespaceObject.createElement)("div", {
75546    ref: ref,
75547    tabIndex: -1
75548  }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, {
75549    ...props
75550  }));
75551}, 'withConstrainedTabbing');
75552/* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing);
75553
75554;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-fallback-styles/index.js
75555
75556/**
75557 * External dependencies
75558 */
75559
75560
75561/**
75562 * WordPress dependencies
75563 */
75564
75565
75566/* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
75567  return class extends external_wp_element_namespaceObject.Component {
75568    constructor(props) {
75569      super(props);
75570      this.nodeRef = this.props.node;
75571      this.state = {
75572        fallbackStyles: undefined,
75573        grabStylesCompleted: false
75574      };
75575      this.bindRef = this.bindRef.bind(this);
75576    }
75577    bindRef(node) {
75578      if (!node) {
75579        return;
75580      }
75581      this.nodeRef = node;
75582    }
75583    componentDidMount() {
75584      this.grabFallbackStyles();
75585    }
75586    componentDidUpdate() {
75587      this.grabFallbackStyles();
75588    }
75589    grabFallbackStyles() {
75590      const {
75591        grabStylesCompleted,
75592        fallbackStyles
75593      } = this.state;
75594      if (this.nodeRef && !grabStylesCompleted) {
75595        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);
75596        if (!es6_default()(newFallbackStyles, fallbackStyles)) {
75597          this.setState({
75598            fallbackStyles: newFallbackStyles,
75599            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)
75600          });
75601        }
75602      }
75603    }
75604    render() {
75605      const wrappedComponent = (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, {
75606        ...this.props,
75607        ...this.state.fallbackStyles
75608      });
75609      return this.props.node ? wrappedComponent : (0,external_wp_element_namespaceObject.createElement)("div", {
75610        ref: this.bindRef
75611      }, " ", wrappedComponent, " ");
75612    }
75613  };
75614}, 'withFallbackStyles'));
75615
75616;// CONCATENATED MODULE: external ["wp","hooks"]
75617const external_wp_hooks_namespaceObject = window["wp"]["hooks"];
75618;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-filters/index.js
75619
75620/**
75621 * WordPress dependencies
75622 */
75623
75624
75625
75626const ANIMATION_FRAME_PERIOD = 16;
75627
75628/**
75629 * Creates a higher-order component which adds filtering capability to the
75630 * wrapped component. Filters get applied when the original component is about
75631 * to be mounted. When a filter is added or removed that matches the hook name,
75632 * the wrapped component re-renders.
75633 *
75634 * @param hookName Hook name exposed to be used by filters.
75635 *
75636 * @return Higher-order component factory.
75637 *
75638 * ```jsx
75639 * import { withFilters } from '@wordpress/components';
75640 * import { addFilter } from '@wordpress/hooks';
75641 *
75642 * const MyComponent = ( { title } ) => <h1>{ title }</h1>;
75643 *
75644 * const ComponentToAppend = () => <div>Appended component</div>;
75645 *
75646 * function withComponentAppended( FilteredComponent ) {
75647 * 	return ( props ) => (
75648 * 		<>
75649 * 			<FilteredComponent { ...props } />
75650 * 			<ComponentToAppend />
75651 * 		</>
75652 * 	);
75653 * }
75654 *
75655 * addFilter(
75656 * 	'MyHookName',
75657 * 	'my-plugin/with-component-appended',
75658 * 	withComponentAppended
75659 * );
75660 *
75661 * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
75662 * ```
75663 */
75664function withFilters(hookName) {
75665  return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => {
75666    const namespace = 'core/with-filters/' + hookName;
75667
75668    /**
75669     * The component definition with current filters applied. Each instance
75670     * reuse this shared reference as an optimization to avoid excessive
75671     * calls to `applyFilters` when many instances exist.
75672     */
75673    let FilteredComponent;
75674
75675    /**
75676     * Initializes the FilteredComponent variable once, if not already
75677     * assigned. Subsequent calls are effectively a noop.
75678     */
75679    function ensureFilteredComponent() {
75680      if (FilteredComponent === undefined) {
75681        FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent);
75682      }
75683    }
75684    class FilteredComponentRenderer extends external_wp_element_namespaceObject.Component {
75685      constructor(props) {
75686        super(props);
75687        ensureFilteredComponent();
75688      }
75689      componentDidMount() {
75690        FilteredComponentRenderer.instances.push(this);
75691
75692        // If there were previously no mounted instances for components
75693        // filtered on this hook, add the hook handler.
75694        if (FilteredComponentRenderer.instances.length === 1) {
75695          (0,external_wp_hooks_namespaceObject.addAction)('hookRemoved', namespace, onHooksUpdated);
75696          (0,external_wp_hooks_namespaceObject.addAction)('hookAdded', namespace, onHooksUpdated);
75697        }
75698      }
75699      componentWillUnmount() {
75700        FilteredComponentRenderer.instances = FilteredComponentRenderer.instances.filter(instance => instance !== this);
75701
75702        // If this was the last of the mounted components filtered on
75703        // this hook, remove the hook handler.
75704        if (FilteredComponentRenderer.instances.length === 0) {
75705          (0,external_wp_hooks_namespaceObject.removeAction)('hookRemoved', namespace);
75706          (0,external_wp_hooks_namespaceObject.removeAction)('hookAdded', namespace);
75707        }
75708      }
75709      render() {
75710        return (0,external_wp_element_namespaceObject.createElement)(FilteredComponent, {
75711          ...this.props
75712        });
75713      }
75714    }
75715    FilteredComponentRenderer.instances = [];
75716
75717    /**
75718     * Updates the FilteredComponent definition, forcing a render for each
75719     * mounted instance. This occurs a maximum of once per animation frame.
75720     */
75721    const throttledForceUpdate = (0,external_wp_compose_namespaceObject.debounce)(() => {
75722      // Recreate the filtered component, only after delay so that it's
75723      // computed once, even if many filters added.
75724      FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent);
75725
75726      // Force each instance to render.
75727      FilteredComponentRenderer.instances.forEach(instance => {
75728        instance.forceUpdate();
75729      });
75730    }, ANIMATION_FRAME_PERIOD);
75731
75732    /**
75733     * When a filter is added or removed for the matching hook name, each
75734     * mounted instance should re-render with the new filters having been
75735     * applied to the original component.
75736     *
75737     * @param updatedHookName Name of the hook that was updated.
75738     */
75739    function onHooksUpdated(updatedHookName) {
75740      if (updatedHookName === hookName) {
75741        throttledForceUpdate();
75742      }
75743    }
75744    return FilteredComponentRenderer;
75745  }, 'withFilters');
75746}
75747
75748;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-focus-return/index.js
75749
75750/**
75751 * WordPress dependencies
75752 */
75753
75754
75755
75756
75757/**
75758 * Returns true if the given object is component-like. An object is component-
75759 * like if it is an instance of wp.element.Component, or is a function.
75760 *
75761 * @param object Object to test.
75762 *
75763 * @return Whether object is component-like.
75764 */
75765function isComponentLike(object) {
75766  return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function';
75767}
75768/**
75769 * Higher Order Component used to be used to wrap disposable elements like
75770 * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
75771 * reference to the current active element so we know where to restore focus
75772 * when the component is unmounted.
75773 *
75774 * @param options The component to be enhanced with
75775 *                focus return behavior, or an object
75776 *                describing the component and the
75777 *                focus return characteristics.
75778 *
75779 * @return Higher Order Component with the focus restauration behaviour.
75780 */
75781/* harmony default export */ const with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(
75782// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
75783options => {
75784  const HoC = ({
75785    onFocusReturn
75786  } = {}) => WrappedComponent => {
75787    const WithFocusReturn = props => {
75788      const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn);
75789      return (0,external_wp_element_namespaceObject.createElement)("div", {
75790        ref: ref
75791      }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, {
75792        ...props
75793      }));
75794    };
75795    return WithFocusReturn;
75796  };
75797  if (isComponentLike(options)) {
75798    const WrappedComponent = options;
75799    return HoC()(WrappedComponent);
75800  }
75801  return HoC(options);
75802}
75802, 'withFocusReturn'));
75803const with_focus_return_Provider = ({
75804  children
75805}) => {
75806  external_wp_deprecated_default()('wp.components.FocusReturnProvider component', {
75807    since: '5.7',
75808    hint: 'This provider is not used anymore. You can just remove it from your codebase'
75809  });
75810  return children;
75811};
75812
75813;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-notices/index.js
75814
75815/**
75816 * External dependencies
75817 */
75818
75819
75820/**
75821 * WordPress dependencies
75822 */
75823
75824
75825
75826/**
75827 * Internal dependencies
75828 */
75829
75830/**
75831 * Override the default edit UI to include notices if supported.
75832 *
75833 * Wrapping the original component with `withNotices` encapsulates the component
75834 * with the additional props `noticeOperations` and `noticeUI`.
75835 *
75836 * ```jsx
75837 * import { withNotices, Button } from '@wordpress/components';
75838 *
75839 * const MyComponentWithNotices = withNotices(
75840 * 	( { noticeOperations, noticeUI } ) => {
75841 * 		const addError = () =>
75842 * 			noticeOperations.createErrorNotice( 'Error message' );
75843 * 		return (
75844 * 			<div>
75845 * 				{ noticeUI }
75846 * 				<Button variant="secondary" onClick={ addError }>
75847 * 					Add error
75848 * 				</Button>
75849 * 			</div>
75850 * 		);
75851 * 	}
75852 * );
75853 * ```
75854 *
75855 * @param OriginalComponent Original component.
75856 *
75857 * @return Wrapped component.
75858 */
75859/* harmony default export */ const with_notices = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => {
75860  function Component(props, ref) {
75861    const [noticeList, setNoticeList] = (0,external_wp_element_namespaceObject.useState)([]);
75862    const noticeOperations = (0,external_wp_element_namespaceObject.useMemo)(() => {
75863      const createNotice = notice => {
75864        const noticeToAdd = notice.id ? notice : {
75865          ...notice,
75866          id: esm_browser_v4()
75867        };
75868        setNoticeList(current => [...current, noticeToAdd]);
75869      };
75870      return {
75871        createNotice,
75872        createErrorNotice: msg => {
75873          // @ts-expect-error TODO: Missing `id`, potentially a bug
75874          createNotice({
75875            status: 'error',
75876            content: msg
75877          });
75878        },
75879        removeNotice: id => {
75880          setNoticeList(current => current.filter(notice => notice.id !== id));
75881        },
75882        removeAllNotices: () => {
75883          setNoticeList([]);
75884        }
75885      };
75886    }, []);
75887    const propsOut = {
75888      ...props,
75889      noticeList,
75890      noticeOperations,
75891      noticeUI: noticeList.length > 0 && (0,external_wp_element_namespaceObject.createElement)(list, {
75892        className: "components-with-notices-ui",
75893        notices: noticeList,
75894        onRemove: noticeOperations.removeNotice
75895      })
75896    };
75897    return isForwardRef ? (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, {
75898      ...propsOut,
75899      ref: ref
75900    }) : (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, {
75901      ...propsOut
75902    });
75903  }
75904  let isForwardRef;
75905  // @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().
75906  const {
75907    render
75908  } = OriginalComponent;
75909  // Returns a forwardRef if OriginalComponent appears to be a forwardRef.
75910  if (typeof render === 'function') {
75911    isForwardRef = true;
75912    return (0,external_wp_element_namespaceObject.forwardRef)(Component);
75913  }
75914  return Component;
75915}, 'withNotices'));
75916
75917;// CONCATENATED MODULE: external ["wp","privateApis"]
75918const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"];
75919;// CONCATENATED MODULE: ./packages/components/build-module/progress-bar/styles.js
75920
75921function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
75922/**
75923 * External dependencies
75924 */
75925
75926
75927
75928/**
75929 * Internal dependencies
75930 */
75931
75932const animateProgressBar = emotion_react_browser_esm_keyframes({
75933  '0%': {
75934    left: '-50%'
75935  },
75936  '100%': {
75937    left: '100%'
75938  }
75939});
75940
75941// Width of the indicator for the indeterminate progress bar
75942const INDETERMINATE_TRACK_WIDTH = 50;
75943const styles_Track = emotion_styled_base_browser_esm("div",  true ? {
75944  target: "e15u147w2"
75945} : 0)("position:relative;overflow:hidden;width:100%;max-width:160px;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusBlockUi, ";outline:2px solid transparent;outline-offset:2px;" + ( true ? "" : 0));
75946const Indicator = emotion_styled_base_browser_esm("div",  true ? {
75947  target: "e15u147w1"
75948} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusBlockUi, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({
75949  isIndeterminate,
75950  value
75951}) =>
75951 isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({
75952  animationDuration: '1.5s',
75953  animationTimingFunction: 'ease-in-out',
75954  animationIterationCount: 'infinite',
75955  animationName: animateProgressBar,
75956  width: `${INDETERMINATE_TRACK_WIDTH}%`
75957},  true ? "" : 0,  true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({
75958  width: `${value}%`,
75959  transition: 'width 0.4s ease-in-out'
75960},  true ? "" : 0,  true ? "" : 0), ";" + ( true ? "" : 0));
75961const ProgressElement = emotion_styled_base_browser_esm("progress",  true ? {
75962  target: "e15u147w0"
75963} : 0)( true ? {
75964  name: "11fb690",
75965  styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%"
75966} : 0);
75967
75968;// CONCATENATED MODULE: ./packages/components/build-module/progress-bar/index.js
75969
75970/**
75971 * External dependencies
75972 */
75973
75974/**
75975 * WordPress dependencies
75976 */
75977
75978
75979
75980/**
75981 * Internal dependencies
75982 */
75983
75984function UnforwardedProgressBar(props, ref) {
75985  const {
75986    className,
75987    value,
75988    ...progressProps
75989  } = props;
75990  const isIndeterminate = !Number.isFinite(value);
75991  return (0,external_wp_element_namespaceObject.createElement)(styles_Track, {
75992    className: className
75993  }, (0,external_wp_element_namespaceObject.createElement)(Indicator, {
75994    isIndeterminate: isIndeterminate,
75995    value: value
75996  }), (0,external_wp_element_namespaceObject.createElement)(ProgressElement, {
75997    max: 100,
75998    value: value,
75999    "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading …'),
76000    ref: ref,
76001    ...progressProps
76002  }));
76003}
76004const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar);
76005/* harmony default export */ const progress_bar = (ProgressBar);
76006
76007;// CONCATENATED MODULE: ./node_modules/@radix-ui/primitive/dist/index.module.js
76008function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
76009    return function handleEvent(event) {
76010        originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
76011        if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
76012    };
76013}
76014
76015
76016
76017
76018
76019
76020;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-compose-refs/dist/index.module.js
76021
76022
76023
76024/**
76025 * Set a given ref to a given value
76026 * This utility takes care of different types of refs: callback refs and RefObject(s)
76027 */ function $6ed0406888f73fc4$var$setRef(ref, value) {
76028    if (typeof ref === 'function') ref(value);
76029    else if (ref !== null && ref !== undefined) ref.current = value;
76030}
76031/**
76032 * A utility to compose multiple refs together
76033 * Accepts callback refs and RefObject(s)
76034 */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
76035    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
76036        )
76037    ;
76038}
76039/**
76040 * A custom hook that composes multiple refs
76041 * Accepts callback refs and RefObject(s)
76042 */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
76043    // eslint-disable-next-line react-hooks/exhaustive-deps
76044    return (0,external_React_.useCallback)($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
76045}
76046
76047
76048
76049
76050
76051
76052;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-context/dist/index.module.js
76053
76054
76055
76056function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
76057    const Context = /*#__PURE__*/ $3bkAK$createContext(defaultContext);
76058    function Provider(props) {
76059        const { children: children , ...context } = props; // Only re-memoize when prop values change
76060        // eslint-disable-next-line react-hooks/exhaustive-deps
76061        const value = $3bkAK$useMemo(()=>context
76062        , Object.values(context));
76063        return /*#__PURE__*/ $3bkAK$createElement(Context.Provider, {
76064            value: value
76065        }, children);
76066    }
76067    function useContext(consumerName) {
76068        const context = $3bkAK$useContext(Context);
76069        if (context) return context;
76070        if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
76071        throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
76072    }
76073    Provider.displayName = rootComponentName + 'Provider';
76074    return [
76075        Provider,
76076        useContext
76077    ];
76078}
76079/* -------------------------------------------------------------------------------------------------
76080 * createContextScope
76081 * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
76082    let defaultContexts = [];
76083    /* -----------------------------------------------------------------------------------------------
76084   * createContext
76085   * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
76086        const BaseContext = /*#__PURE__*/ (0,external_React_.createContext)(defaultContext);
76087        const index = defaultContexts.length;
76088        defaultContexts = [
76089            ...defaultContexts,
76090            defaultContext
76091        ];
76092        function Provider(props) {
76093            const { scope: scope , children: children , ...context } = props;
76094            const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
76095            // eslint-disable-next-line react-hooks/exhaustive-deps
76096            const value = (0,external_React_.useMemo)(()=>context
76097            , Object.values(context));
76098            return /*#__PURE__*/ (0,external_React_.createElement)(Context.Provider, {
76099                value: value
76100            }, children);
76101        }
76102        function useContext(consumerName, scope) {
76103            const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
76104            const context = (0,external_React_.useContext)(Context);
76105            if (context) return context;
76106            if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
76107            throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
76108        }
76109        Provider.displayName = rootComponentName + 'Provider';
76110        return [
76111            Provider,
76112            useContext
76113        ];
76114    }
76115    /* -----------------------------------------------------------------------------------------------
76116   * createScope
76117   * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
76118        const scopeContexts = defaultContexts.map((defaultContext)=>{
76119            return /*#__PURE__*/ (0,external_React_.createContext)(defaultContext);
76120        });
76121        return function useScope(scope) {
76122            const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
76123            return (0,external_React_.useMemo)(()=>({
76124                    [`__scope${scopeName}`]: {
76125                        ...scope,
76126                        [scopeName]: contexts
76127                    }
76128                })
76129            , [
76130                scope,
76131                contexts
76132            ]);
76133        };
76134    };
76135    createScope.scopeName = scopeName;
76136    return [
76137        $c512c27ab02ef895$export$fd42f52fd3ae1109,
76138        $c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps)
76139    ];
76140}
76141/* -------------------------------------------------------------------------------------------------
76142 * composeContextScopes
76143 * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$var$composeContextScopes(...scopes) {
76144    const baseScope = scopes[0];
76145    if (scopes.length === 1) return baseScope;
76146    const createScope1 = ()=>{
76147        const scopeHooks = scopes.map((createScope)=>({
76148                useScope: createScope(),
76149                scopeName: createScope.scopeName
76150            })
76151        );
76152        return function useComposedScopes(overrideScopes) {
76153            const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName  })=>{
76154                // We are calling a hook inside a callback which React warns against to avoid inconsistent
76155                // renders, however, scoping doesn't have render side effects so we ignore the rule.
76156                // eslint-disable-next-line react-hooks/rules-of-hooks
76157                const scopeProps = useScope(overrideScopes);
76158                const currentScope = scopeProps[`__scope${scopeName}`];
76159                return {
76160                    ...nextScopes,
76161                    ...currentScope
76162                };
76163            }, {});
76164            return (0,external_React_.useMemo)(()=>({
76165                    [`__scope${baseScope.scopeName}`]: nextScopes1
76166                })
76167            , [
76168                nextScopes1
76169            ]);
76170        };
76171    };
76172    createScope1.scopeName = baseScope.scopeName;
76173    return createScope1;
76174}
76175
76176
76177
76178
76179
76180
76181;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-callback-ref/dist/index.module.js
76182
76183
76184
76185/**
76186 * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
76187 * prop or avoid re-executing effects when passed as a dependency
76188 */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
76189    const callbackRef = (0,external_React_.useRef)(callback);
76190    (0,external_React_.useEffect)(()=>{
76191        callbackRef.current = callback;
76192    }); // https://github.com/facebook/react/issues/19240
76193    return (0,external_React_.useMemo)(()=>(...args)=>{
76194            var _callbackRef$current;
76195            return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
76196        }
76197    , []);
76198}
76199
76200
76201
76202
76203
76204
76205;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-controllable-state/dist/index.module.js
76206
76207
76208
76209
76210
76211function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
76212    const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
76213        defaultProp: defaultProp,
76214        onChange: onChange
76215    });
76216    const isControlled = prop !== undefined;
76217    const value1 = isControlled ? prop : uncontrolledProp;
76218    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
76219    const setValue = (0,external_React_.useCallback)((nextValue)=>{
76220        if (isControlled) {
76221            const setter = nextValue;
76222            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
76223            if (value !== prop) handleChange(value);
76224        } else setUncontrolledProp(nextValue);
76225    }, [
76226        isControlled,
76227        prop,
76228        setUncontrolledProp,
76229        handleChange
76230    ]);
76231    return [
76232        value1,
76233        setValue
76234    ];
76235}
76236function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
76237    const uncontrolledState = (0,external_React_.useState)(defaultProp);
76238    const [value] = uncontrolledState;
76239    const prevValueRef = (0,external_React_.useRef)(value);
76240    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
76241    (0,external_React_.useEffect)(()=>{
76242        if (prevValueRef.current !== value) {
76243            handleChange(value);
76244            prevValueRef.current = value;
76245        }
76246    }, [
76247        value,
76248        prevValueRef,
76249        handleChange
76250    ]);
76251    return uncontrolledState;
76252}
76253
76254
76255
76256
76257
76258
76259;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot/dist/index.module.js
76260
76261
76262
76263
76264
76265
76266
76267/* -------------------------------------------------------------------------------------------------
76268 * Slot
76269 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76270    const { children: children , ...slotProps } = props;
76271    const childrenArray = external_React_.Children.toArray(children);
76272    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
76273    if (slottable) {
76274        // the new element to render is the one passed as a child of `Slottable`
76275        const newElement = slottable.props.children;
76276        const newChildren = childrenArray.map((child)=>{
76277            if (child === slottable) {
76278                // because the new element will be the one rendered, we are only interested
76279                // in grabbing its children (`newElement.props.children`)
76280                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
76281                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
76282            } else return child;
76283        });
76284        return /*#__PURE__*/ (0,external_React_.createElement)($5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76285            ref: forwardedRef
76286        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
76287    }
76288    return /*#__PURE__*/ (0,external_React_.createElement)($5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76289        ref: forwardedRef
76290    }), children);
76291});
76292$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
76293/* -------------------------------------------------------------------------------------------------
76294 * SlotClone
76295 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76296    const { children: children , ...slotProps } = props;
76297    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
76298        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,650 bytes, lines 76299-76433
76299        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
76300    });
76301    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
76302});
76303$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
76304/* -------------------------------------------------------------------------------------------------
76305 * Slottable
76306 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
76307    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
76308};
76309/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
76310    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
76311}
76312function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
76313    // all child props should override
76314    const overrideProps = {
76315        ...childProps
76316    };
76317    for(const propName in childProps){
76318        const slotPropValue = slotProps[propName];
76319        const childPropValue = childProps[propName];
76320        const isHandler = /^on[A-Z]/.test(propName);
76321        if (isHandler) {
76322            // if the handler exists on both, we compose them
76323            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
76324                childPropValue(...args);
76325                slotPropValue(...args);
76326            };
76327            else if (slotPropValue) overrideProps[propName] = slotPropValue;
76328        } else if (propName === 'style') overrideProps[propName] = {
76329            ...slotPropValue,
76330            ...childPropValue
76331        };
76332        else if (propName === 'className') overrideProps[propName] = [
76333            slotPropValue,
76334            childPropValue
76335        ].filter(Boolean).join(' ');
76336    }
76337    return {
76338        ...slotProps,
76339        ...overrideProps
76340    };
76341}
76342const $5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($5e63c961fc1ce211$export$8c6ed5c666ac1360));
76343
76344
76345
76346
76347
76348
76349;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive/dist/index.module.js
76350
76351
76352
76353
76354
76355
76356
76357
76358
76359const $8927f6f2acc4f386$var$NODES = [
76360    'a',
76361    'button',
76362    'div',
76363    'form',
76364    'h2',
76365    'h3',
76366    'img',
76367    'input',
76368    'label',
76369    'li',
76370    'nav',
76371    'ol',
76372    'p',
76373    'span',
76374    'svg',
76375    'ul'
76376]; // Temporary while we await merge of this fix:
76377// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
76378// prettier-ignore
76379/* -------------------------------------------------------------------------------------------------
76380 * Primitive
76381 * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
76382    const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76383        const { asChild: asChild , ...primitiveProps } = props;
76384        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
76385        (0,external_React_.useEffect)(()=>{
76386            window[Symbol.for('radix-ui')] = true;
76387        }, []);
76388        return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, {
76389            ref: forwardedRef
76390        }));
76391    });
76392    Node.displayName = `Primitive.${node}`;
76393    return {
76394        ...primitive,
76395        [node]: Node
76396    };
76397}, {});
76398/* -------------------------------------------------------------------------------------------------
76399 * Utils
76400 * -----------------------------------------------------------------------------------------------*/ /**
76401 * Flush custom event dispatch
76402 * https://github.com/radix-ui/primitives/pull/1378
76403 *
76404 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
76405 *
76406 * Internally, React prioritises events in the following order:
76407 *  - discrete
76408 *  - continuous
76409 *  - default
76410 *
76411 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
76412 *
76413 * `discrete` is an  important distinction as updates within these events are applied immediately.
76414 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
76415 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
76416 * dispatched by another `discrete` event.
76417 *
76418 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
76419 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
76420 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
76421 * For example:
76422 *
76423 * dispatching a known click 👎
76424 * target.dispatchEvent(new Event(‘click’))
76425 *
76426 * dispatching a custom type within a non-discrete event 👎
76427 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
76428 *
76429 * dispatching a custom type within a `discrete` event 👍
76430 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
76431 *
76432 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
76433 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
76434 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
76435 */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
76436    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
76437    );
76438}
76439/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($8927f6f2acc4f386$export$250ffa63cdc0d034));
76440
76441
76442
76443
76444
76445
76446;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot/dist/index.module.js
76447
76448
76449
76450
76451
76452
76453
76454/* -------------------------------------------------------------------------------------------------
76455 * Slot
76456 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76457    const { children: children , ...slotProps } = props;
76458    const childrenArray = external_React_.Children.toArray(children);
76459    const slottable = childrenArray.find(index_module_$5e63c961fc1ce211$var$isSlottable);
76460    if (slottable) {
76461        // the new element to render is the one passed as a child of `Slottable`
76462        const newElement = slottable.props.children;
76463        const newChildren = childrenArray.map((child)=>{
76464            if (child === slottable) {
76465                // because the new element will be the one rendered, we are only interested
76466                // in grabbing its children (`newElement.props.children`)
76467                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
76468                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
76469            } else return child;
76470        });
76471        return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76472            ref: forwardedRef
76473        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
76474    }
76475    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76476        ref: forwardedRef
76477    }), children);
76478});
76479index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
76480/* -------------------------------------------------------------------------------------------------
76481 * SlotClone
76482 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76483    const { children: children , ...slotProps } = props;
76484    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
76485        ...index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
76486        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
76487    });
76488    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
76489});
76490index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
76491/* -------------------------------------------------------------------------------------------------
76492 * Slottable
76493 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
76494    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
76495};
76496/* ---------------------------------------------------------------------------------------------- */ function index_module_$5e63c961fc1ce211$var$isSlottable(child) {
76497    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
76498}
76499function index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
76500    // all child props should override
76501    const overrideProps = {
76502        ...childProps
76503    };
76504    for(const propName in childProps){
76505        const slotPropValue = slotProps[propName];
76506        const childPropValue = childProps[propName];
76507        const isHandler = /^on[A-Z]/.test(propName);
76508        if (isHandler) {
76509            // if the handler exists on both, we compose them
76510            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
76511                childPropValue(...args);
76512                slotPropValue(...args);
76513            };
76514            else if (slotPropValue) overrideProps[propName] = slotPropValue;
76515        } else if (propName === 'style') overrideProps[propName] = {
76516            ...slotPropValue,
76517            ...childPropValue
76518        };
76519        else if (propName === 'className') overrideProps[propName] = [
76520            slotPropValue,
76521            childPropValue
76522        ].filter(Boolean).join(' ');
76523    }
76524    return {
76525        ...slotProps,
76526        ...overrideProps
76527    };
76528}
76529const index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360));
76530
76531
76532
76533
76534
76535
76536;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-collection/dist/index.module.js
76537
76538
76539
76540
76541
76542
76543
76544
76545
76546// We have resorted to returning slots directly rather than exposing primitives that can then
76547// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
76548// This is because we encountered issues with generic types that cannot be statically analysed
76549// due to creating them dynamically via createCollection.
76550function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
76551    /* -----------------------------------------------------------------------------------------------
76552   * CollectionProvider
76553   * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
76554    const [createCollectionContext, createCollectionScope] = $c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME);
76555    const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
76556        collectionRef: {
76557            current: null
76558        },
76559        itemMap: new Map()
76560    });
76561    const CollectionProvider = (props)=>{
76562        const { scope: scope , children: children  } = props;
76563        const ref = external_React_default().useRef(null);
76564        const itemMap = external_React_default().useRef(new Map()).current;
76565        return /*#__PURE__*/ external_React_default().createElement(CollectionProviderImpl, {
76566            scope: scope,
76567            itemMap: itemMap,
76568            collectionRef: ref
76569        }, children);
76570    };
76571    /*#__PURE__*/ Object.assign(CollectionProvider, {
76572        displayName: PROVIDER_NAME
76573    });
76574    /* -----------------------------------------------------------------------------------------------
76575   * CollectionSlot
76576   * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
76577    const CollectionSlot = /*#__PURE__*/ external_React_default().forwardRef((props, forwardedRef)=>{
76578        const { scope: scope , children: children  } = props;
76579        const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
76580        const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.collectionRef);
76581        return /*#__PURE__*/ external_React_default().createElement(index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360, {
76582            ref: composedRefs
76583        }, children);
76584    });
76585    /*#__PURE__*/ Object.assign(CollectionSlot, {
76586        displayName: COLLECTION_SLOT_NAME
76587    });
76588    /* -----------------------------------------------------------------------------------------------
76589   * CollectionItem
76590   * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
76591    const ITEM_DATA_ATTR = 'data-radix-collection-item';
76592    const CollectionItemSlot = /*#__PURE__*/ external_React_default().forwardRef((props, forwardedRef)=>{
76593        const { scope: scope , children: children , ...itemData } = props;
76594        const ref = external_React_default().useRef(null);
76595        const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
76596        const context = useCollectionContext(ITEM_SLOT_NAME, scope);
76597        external_React_default().useEffect(()=>{
76598            context.itemMap.set(ref, {
76599                ref: ref,
76600                ...itemData
76601            });
76602            return ()=>
76602void context.itemMap.delete(ref)
76603            ;
76604        });
76605        return /*#__PURE__*/ external_React_default().createElement(index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360, {
76606            [ITEM_DATA_ATTR]: '',
76607            ref: composedRefs
76608        }, children);
76609    });
76610    /*#__PURE__*/ Object.assign(CollectionItemSlot, {
76611        displayName: ITEM_SLOT_NAME
76612    });
76613    /* -----------------------------------------------------------------------------------------------
76614   * useCollection
76615   * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
76616        const context = useCollectionContext(name + 'CollectionConsumer', scope);
76617        const getItems = external_React_default().useCallback(()=>{
76618            const collectionNode = context.collectionRef.current;
76619            if (!collectionNode) return [];
76620            const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
76621            const items = Array.from(context.itemMap.values());
76622            const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
76623            );
76624            return orderedItems;
76625        }, [
76626            context.collectionRef,
76627            context.itemMap
76628        ]);
76629        return getItems;
76630    }
76631    return [
76632        {
76633            Provider: CollectionProvider,
76634            Slot: CollectionSlot,
76635            ItemSlot: CollectionItemSlot
76636        },
76637        useCollection,
76638        createCollectionScope
76639    ];
76640}
76641
76642
76643
76644
76645
76646
76647;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-direction/dist/index.module.js
76648
76649
76650
76651const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ (0,external_React_.createContext)(undefined);
76652/* -------------------------------------------------------------------------------------------------
76653 * Direction
76654 * -----------------------------------------------------------------------------------------------*/ const $f631663db3294ace$export$c760c09fdd558351 = (props)=>{
76655    const { dir: dir , children: children  } = props;
76656    return /*#__PURE__*/ $7Gjcd$createElement($f631663db3294ace$var$DirectionContext.Provider, {
76657        value: dir
76658    }, children);
76659};
76660/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
76661    const globalDir = (0,external_React_.useContext)($f631663db3294ace$var$DirectionContext);
76662    return localDir || globalDir || 'ltr';
76663}
76664const $f631663db3294ace$export$2881499e37b75b9a = (/* unused pure expression or super */ null && ($f631663db3294ace$export$c760c09fdd558351));
76665
76666
76667
76668
76669
76670
76671;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/index.module.js
76672
76673
76674
76675
76676
76677
76678
76679/* -------------------------------------------------------------------------------------------------
76680 * Slot
76681 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76682    const { children: children , ...slotProps } = props;
76683    const childrenArray = external_React_.Children.toArray(children);
76684    const slottable = childrenArray.find(dist_index_module_$5e63c961fc1ce211$var$isSlottable);
76685    if (slottable) {
76686        // the new element to render is the one passed as a child of `Slottable`
76687        const newElement = slottable.props.children;
76688        const newChildren = childrenArray.map((child)=>{
76689            if (child === slottable) {
76690                // because the new element will be the one rendered, we are only interested
76691                // in grabbing its children (`newElement.props.children`)
76692                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
76693                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
76694            } else return child;
76695        });
76696        return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76697            ref: forwardedRef
76698        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
76699    }
76700    return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
76701        ref: forwardedRef
76702    }), children);
76703});
76704dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
76705/* -------------------------------------------------------------------------------------------------
76706 * SlotClone
76707 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76708    const { children: children , ...slotProps } = props;
76709    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
76710        ...dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,824 bytes, lines 76711-76845
76711        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
76712    });
76713    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
76714});
76715dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
76716/* -------------------------------------------------------------------------------------------------
76717 * Slottable
76718 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
76719    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
76720};
76721/* ---------------------------------------------------------------------------------------------- */ function dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) {
76722    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
76723}
76724function dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
76725    // all child props should override
76726    const overrideProps = {
76727        ...childProps
76728    };
76729    for(const propName in childProps){
76730        const slotPropValue = slotProps[propName];
76731        const childPropValue = childProps[propName];
76732        const isHandler = /^on[A-Z]/.test(propName);
76733        if (isHandler) {
76734            // if the handler exists on both, we compose them
76735            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
76736                childPropValue(...args);
76737                slotPropValue(...args);
76738            };
76739            else if (slotPropValue) overrideProps[propName] = slotPropValue;
76740        } else if (propName === 'style') overrideProps[propName] = {
76741            ...slotPropValue,
76742            ...childPropValue
76743        };
76744        else if (propName === 'className') overrideProps[propName] = [
76745            slotPropValue,
76746            childPropValue
76747        ].filter(Boolean).join(' ');
76748    }
76749    return {
76750        ...slotProps,
76751        ...overrideProps
76752    };
76753}
76754const dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360));
76755
76756
76757
76758
76759
76760
76761;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive/dist/index.module.js
76762
76763
76764
76765
76766
76767
76768
76769
76770
76771const index_module_$8927f6f2acc4f386$var$NODES = [
76772    'a',
76773    'button',
76774    'div',
76775    'form',
76776    'h2',
76777    'h3',
76778    'img',
76779    'input',
76780    'label',
76781    'li',
76782    'nav',
76783    'ol',
76784    'p',
76785    'span',
76786    'svg',
76787    'ul'
76788]; // Temporary while we await merge of this fix:
76789// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
76790// prettier-ignore
76791/* -------------------------------------------------------------------------------------------------
76792 * Primitive
76793 * -----------------------------------------------------------------------------------------------*/ const index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
76794    const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76795        const { asChild: asChild , ...primitiveProps } = props;
76796        const Comp = asChild ? dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
76797        (0,external_React_.useEffect)(()=>{
76798            window[Symbol.for('radix-ui')] = true;
76799        }, []);
76800        return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, {
76801            ref: forwardedRef
76802        }));
76803    });
76804    Node.displayName = `Primitive.${node}`;
76805    return {
76806        ...primitive,
76807        [node]: Node
76808    };
76809}, {});
76810/* -------------------------------------------------------------------------------------------------
76811 * Utils
76812 * -----------------------------------------------------------------------------------------------*/ /**
76813 * Flush custom event dispatch
76814 * https://github.com/radix-ui/primitives/pull/1378
76815 *
76816 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
76817 *
76818 * Internally, React prioritises events in the following order:
76819 *  - discrete
76820 *  - continuous
76821 *  - default
76822 *
76823 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
76824 *
76825 * `discrete` is an  important distinction as updates within these events are applied immediately.
76826 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
76827 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
76828 * dispatched by another `discrete` event.
76829 *
76830 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
76831 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
76832 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
76833 * For example:
76834 *
76835 * dispatching a known click 👎
76836 * target.dispatchEvent(new Event(‘click’))
76837 *
76838 * dispatching a custom type within a non-discrete event 👎
76839 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
76840 *
76841 * dispatching a custom type within a `discrete` event 👍
76842 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
76843 *
76844 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
76845 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
76846 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
76847 */ function index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
76848    if (target) (0,external_ReactDOM_namespaceObject.flushSync)(()=>target.dispatchEvent(event)
76849    );
76850}
76851/* -----------------------------------------------------------------------------------------------*/ const index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034));
76852
76853
76854
76855
76856
76857
76858;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-escape-keydown/dist/index.module.js
76859
76860
76861
76862
76863
76864/**
76865 * Listens for when the escape key is down
76866 */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
76867    const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
76868    (0,external_React_.useEffect)(()=>{
76869        const handleKeyDown = (event)=>{
76870            if (event.key === 'Escape') onEscapeKeyDown(event);
76871        };
76872        ownerDocument.addEventListener('keydown', handleKeyDown);
76873        return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown)
76874        ;
76875    }, [
76876        onEscapeKeyDown,
76877        ownerDocument
76878    ]);
76879}
76880
76881
76882
76883
76884
76885
76886;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer/dist/index.module.js
76887
76888
76889
76890
76891
76892
76893
76894
76895
76896
76897
76898
76899
76900
76901
76902/* -------------------------------------------------------------------------------------------------
76903 * DismissableLayer
76904 * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
76905const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
76906const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
76907const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
76908let $5cb92bef7577960e$var$originalBodyPointerEvents;
76909const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ (0,external_React_.createContext)({
76910    layers: new Set(),
76911    layersWithOutsidePointerEventsDisabled: new Set(),
76912    branches: new Set()
76913});
76914const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
76915    var _node$ownerDocument;
76916    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
76917    const context = (0,external_React_.useContext)($5cb92bef7577960e$var$DismissableLayerContext);
76918    const [node1, setNode] = (0,external_React_.useState)(null);
76919    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
76920    const [, force] = (0,external_React_.useState)({});
76921    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
76922    );
76923    const layers = Array.from(context.layers);
76924    const [highestLayerWithOutsidePointerEventsDisabled] = [
76925        ...context.layersWithOutsidePointerEventsDisabled
76926    ].slice(-1); // prettier-ignore
76927    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
76928    const index = node1 ? layers.indexOf(node1) : -1;
76929    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
76930    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
76931    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
76932        const target = event.target;
76933        const isPointerDownOnBranch = [
76934            ...context.branches
76935        ].some((branch)=>branch.contains(target)
76936        );
76937        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
76938        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
76939        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
76940        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
76941    }, ownerDocument);
76942    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
76943        const target = event.target;
76944        const isFocusInBranch = [
76945            ...context.branches
76946        ].some((branch)=>branch.contains(target)
76947        );
76948        if (isFocusInBranch) return;
76949        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
76950        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
76951        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
76952    }, ownerDocument);
76953    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
76954        const isHighestLayer = index === context.layers.size - 1;
76955        if (!isHighestLayer) return;
76956        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
76957        if (!event.defaultPrevented && onDismiss) {
76958            event.preventDefault();
76959            onDismiss();
76960        }
76961    }, ownerDocument);
76962    (0,external_React_.useEffect)(()=>{
76963        if (!node1) return;
76964        if (disableOutsidePointerEvents) {
76965            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
76966                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
76967                ownerDocument.body.style.pointerEvents = 'none';
76968            }
76969            context.layersWithOutsidePointerEventsDisabled.add(node1);
76970        }
76971        context.layers.add(node1);
76972        $5cb92bef7577960e$var$dispatchUpdate();
76973        return ()=>{
76974            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
76975        };
76976    }, [
76977        node1,
76978        ownerDocument,
76979        disableOutsidePointerEvents,
76980        context
76981    ]);
76982    /**
76983   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
76984   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
76985   * and add it to the end again so the layering order wouldn't be _creation order_.
76986   * We only want them to be removed from context stacks when unmounted.
76987   */ (0,external_React_.useEffect)(()=>{
76988        return ()=>{
76989            if (!node1) return;
76990            context.layers.delete(node1);
76991            context.layersWithOutsidePointerEventsDisabled.delete(node1);
76992            $5cb92bef7577960e$var$dispatchUpdate();
76993        };
76994    }, [
76995        node1,
76996        context
76997    ]);
76998    (0,external_React_.useEffect)(()=>{
76999        const handleUpdate = ()=>force({})
77000        ;
77001        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
77002        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
77003        ;
77004    }, []);
77005    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, layerProps, {
77006        ref: composedRefs,
77007        style: {
77008            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
77009            ...props.style
77010        },
77011        onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture),
77012        onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture),
77013        onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
77014    }));
77015});
77016/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$177fb62ff3ec1f22, {
77017    displayName: $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME
77018});
77019/* -------------------------------------------------------------------------------------------------
77020 * DismissableLayerBranch
77021 * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$BRANCH_NAME = 'DismissableLayerBranch';
77022const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77023    const context = (0,external_React_.useContext)($5cb92bef7577960e$var$DismissableLayerContext);
77024    const ref = (0,external_React_.useRef)(null);
77025    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
77026    (0,external_React_.useEffect)(()=>{
77027        const node = ref.current;
77028        if (node) {
77029            context.branches.add(node);
77030            return ()=>{
77031                context.branches.delete(node);
77032            };
77033        }
77034    }, [
77035        context.branches
77036    ]);
77037    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, props, {
77038        ref: composedRefs
77039    }));
77040});
77041/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$4d5eb2109db14228, {
77042    displayName: $5cb92bef7577960e$var$BRANCH_NAME
77043});
77044/* -----------------------------------------------------------------------------------------------*/ /**
77045 * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
77046 * to mimic layer dismissing behaviour present in OS.
77047 * Returns props to pass to the node we want to check for outside events.
77048 */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
77049    const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
77050    const isPointerInsideReactTreeRef = (0,external_React_.useRef)(false);
77051    const handleClickRef = (0,external_React_.useRef)(()=>{});
77052    (0,external_React_.useEffect)(()=>{
77053        const handlePointerDown = (event)=>{
77054            if (event.target && !isPointerInsideReactTreeRef.current) {
77055                const eventDetail = {
77056                    originalEvent: event
77057                };
77058                function handleAndDispatchPointerDownOutsideEvent() {
77059                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
77060                        discrete: true
77061                    });
77062                }
77063                /**
77064         * On touch devices, we need to wait for a click event because browsers implement
77065         * a ~350ms delay between the time the user stops touching the display and when the
77066         * browser executres events. We need to ensure we don't reactivate pointer-events within
77067         * this timeframe otherwise the browser may execute events that should have been prevented.
77068         *
77069         * Additionally, this also lets us deal automatically with cancellations when a click event
77070         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
77071         *
77072         * This is why we also continuously remove the previous listener, because we cannot be
77073         * certain that it was raised, and therefore cleaned-up.
77074         */ if (event.pointerType === 'touch') {
77075                    ownerDocument.removeEventListener('click', handleClickRef.current);
77076                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
77077                    ownerDocument.addEventListener('click', handleClickRef.current, {
77078                        once: true
77079                    });
77080                } else handleAndDispatchPointerDownOutsideEvent();
77081            }
77082            isPointerInsideReactTreeRef.current = false;
77083        };
77084        /**
77085     * if this hook executes in a component that mounts via a `pointerdown` event, the event
77086     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
77087     * this by delaying the event listener registration on the document.
77088     * This is not React specific, but rather how the DOM works, ie:
77089     * ```
77090     * button.addEventListener('pointerdown', () => {
77091     *   console.log('I will log');
77092     *   document.addEventListener('pointerdown', () => {
77093     *     console.log('I will also log');
77094     *   })
77095     * });
77096     */ const timerId = window.setTimeout(()=>{
77097            ownerDocument.addEventListener('pointerdown', handlePointerDown);
77098        }, 0);
77099        return ()=>{
77100            window.clearTimeout(timerId);
77101            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
77102            ownerDocument.removeEventListener('click', handleClickRef.current);
77103        };
77104    }, [
77105        ownerDocument,
77106        handlePointerDownOutside
77107    ]);
77108    return {
77109        // ensures we check React component tree (not just DOM tree)
77110        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
77111    };
77112}
77113/**
vendor: 14,403 bytes, lines 77114-77417
77114 * Listens for when focus happens outside a react subtree.
77115 * Returns props to pass to the root (node) of the subtree we want to check.
77116 */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
77117    const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
77118    const isFocusInsideReactTreeRef = (0,external_React_.useRef)(false);
77119    (0,external_React_.useEffect)(()=>{
77120        const handleFocus = (event)=>{
77121            if (event.target && !isFocusInsideReactTreeRef.current) {
77122                const eventDetail = {
77123                    originalEvent: event
77124                };
77125                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
77126                    discrete: false
77127                });
77128            }
77129        };
77130        ownerDocument.addEventListener('focusin', handleFocus);
77131        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
77132        ;
77133    }, [
77134        ownerDocument,
77135        handleFocusOutside
77136    ]);
77137    return {
77138        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
77139        ,
77140        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
77141    };
77142}
77143function $5cb92bef7577960e$var$dispatchUpdate() {
77144    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
77145    document.dispatchEvent(event);
77146}
77147function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
77148    const target = detail.originalEvent.target;
77149    const event = new CustomEvent(name, {
77150        bubbles: false,
77151        cancelable: true,
77152        detail: detail
77153    });
77154    if (handler) target.addEventListener(name, handler, {
77155        once: true
77156    });
77157    if (discrete) index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
77158    else target.dispatchEvent(event);
77159}
77160const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($5cb92bef7577960e$export$177fb62ff3ec1f22));
77161const $5cb92bef7577960e$export$aecb2ddcb55c95be = (/* unused pure expression or super */ null && ($5cb92bef7577960e$export$4d5eb2109db14228));
77162
77163
77164
77165
77166
77167
77168;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-focus-guards/dist/index.module.js
77169
77170
77171
77172/** Number of components which have requested interest to have focus guards */ let $3db38b7d1fb3fe6a$var$count = 0;
77173function $3db38b7d1fb3fe6a$export$ac5b58043b79449b(props) {
77174    $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
77175    return props.children;
77176}
77177/**
77178 * Injects a pair of focus guards at the edges of the whole DOM tree
77179 * to ensure `focusin` & `focusout` events can be caught consistently.
77180 */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
77181    (0,external_React_.useEffect)(()=>{
77182        var _edgeGuards$, _edgeGuards$2;
77183        const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
77184        document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
77185        document.body.insertAdjacentElement('beforeend', (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard());
77186        $3db38b7d1fb3fe6a$var$count++;
77187        return ()=>{
77188            if ($3db38b7d1fb3fe6a$var$count === 1) document.querySelectorAll('[data-radix-focus-guard]').forEach((node)=>node.remove()
77189            );
77190            $3db38b7d1fb3fe6a$var$count--;
77191        };
77192    }, []);
77193}
77194function $3db38b7d1fb3fe6a$var$createFocusGuard() {
77195    const element = document.createElement('span');
77196    element.setAttribute('data-radix-focus-guard', '');
77197    element.tabIndex = 0;
77198    element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';
77199    return element;
77200}
77201const $3db38b7d1fb3fe6a$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($3db38b7d1fb3fe6a$export$ac5b58043b79449b));
77202
77203
77204
77205
77206
77207
77208;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-scope/dist/index.module.js
77209
77210
77211
77212
77213
77214
77215
77216
77217
77218
77219
77220const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
77221const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
77222const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
77223    bubbles: false,
77224    cancelable: true
77225};
77226/* -------------------------------------------------------------------------------------------------
77227 * FocusScope
77228 * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME = 'FocusScope';
77229const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77230    const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
77231    const [container1, setContainer] = (0,external_React_.useState)(null);
77232    const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp);
77233    const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp);
77234    const lastFocusedElementRef = (0,external_React_.useRef)(null);
77235    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContainer(node)
77236    );
77237    const focusScope = (0,external_React_.useRef)({
77238        paused: false,
77239        pause () {
77240            this.paused = true;
77241        },
77242        resume () {
77243            this.paused = false;
77244        }
77245    }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
77246    (0,external_React_.useEffect)(()=>{
77247        if (trapped) {
77248            function handleFocusIn(event) {
77249                if (focusScope.paused || !container1) return;
77250                const target = event.target;
77251                if (container1.contains(target)) lastFocusedElementRef.current = target;
77252                else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
77253                    select: true
77254                });
77255            }
77256            function handleFocusOut(event) {
77257                if (focusScope.paused || !container1) return;
77258                if (!container1.contains(event.relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
77259                    select: true
77260                });
77261            }
77262            document.addEventListener('focusin', handleFocusIn);
77263            document.addEventListener('focusout', handleFocusOut);
77264            return ()=>{
77265                document.removeEventListener('focusin', handleFocusIn);
77266                document.removeEventListener('focusout', handleFocusOut);
77267            };
77268        }
77269    }, [
77270        trapped,
77271        container1,
77272        focusScope.paused
77273    ]);
77274    (0,external_React_.useEffect)(()=>{
77275        if (container1) {
77276            $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
77277            const previouslyFocusedElement = document.activeElement;
77278            const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
77279            if (!hasFocusedCandidate) {
77280                const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
77281                container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
77282                container1.dispatchEvent(mountEvent);
77283                if (!mountEvent.defaultPrevented) {
77284                    $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
77285                        select: true
77286                    });
77287                    if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
77288                }
77289            }
77290            return ()=>{
77291                container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
77292                // We need to delay the focus a little to get around it for now.
77293                // See: https://github.com/facebook/react/issues/17894
77294                setTimeout(()=>{
77295                    const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
77296                    container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
77297                    container1.dispatchEvent(unmountEvent);
77298                    if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
77299                        select: true
77300                    });
77301                     // we need to remove the listener after we `dispatchEvent`
77302                    container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
77303                    $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
77304                }, 0);
77305            };
77306        }
77307    }, [
77308        container1,
77309        onMountAutoFocus,
77310        onUnmountAutoFocus,
77311        focusScope
77312    ]); // Takes care of looping focus (when tabbing whilst at the edges)
77313    const handleKeyDown = (0,external_React_.useCallback)((event)=>{
77314        if (!loop && !trapped) return;
77315        if (focusScope.paused) return;
77316        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
77317        const focusedElement = document.activeElement;
77318        if (isTabKey && focusedElement) {
77319            const container = event.currentTarget;
77320            const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
77321            const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
77322            if (!hasTabbableElementsInside) {
77323                if (focusedElement === container) event.preventDefault();
77324            } else {
77325                if (!event.shiftKey && focusedElement === last) {
77326                    event.preventDefault();
77327                    if (loop) $d3863c46a17e8a28$var$focus(first, {
77328                        select: true
77329                    });
77330                } else if (event.shiftKey && focusedElement === first) {
77331                    event.preventDefault();
77332                    if (loop) $d3863c46a17e8a28$var$focus(last, {
77333                        select: true
77334                    });
77335                }
77336            }
77337        }
77338    }, [
77339        loop,
77340        trapped,
77341        focusScope.paused
77342    ]);
77343    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({
77344        tabIndex: -1
77345    }, scopeProps, {
77346        ref: composedRefs,
77347        onKeyDown: handleKeyDown
77348    }));
77349});
77350/*#__PURE__*/ Object.assign($d3863c46a17e8a28$export$20e40289641fbbb6, {
77351    displayName: $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME
77352});
77353/* -------------------------------------------------------------------------------------------------
77354 * Utils
77355 * -----------------------------------------------------------------------------------------------*/ /**
77356 * Attempts focusing the first element in a list of candidates.
77357 * Stops when focus has actually moved.
77358 */ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false  } = {}) {
77359    const previouslyFocusedElement = document.activeElement;
77360    for (const candidate of candidates){
77361        $d3863c46a17e8a28$var$focus(candidate, {
77362            select: select
77363        });
77364        if (document.activeElement !== previouslyFocusedElement) return;
77365    }
77366}
77367/**
77368 * Returns the first and last tabbable elements inside a container.
77369 */ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
77370    const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
77371    const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
77372    const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
77373    return [
77374        first,
77375        last
77376    ];
77377}
77378/**
77379 * Returns a list of potential tabbable candidates.
77380 *
77381 * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
77382 * elements are not visible. This cannot be worked out easily by just reading a property, but rather
77383 * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
77384 *
77385 * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
77386 * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
77387 */ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
77388    const nodes = [];
77389    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
77390        acceptNode: (node)=>{
77391            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
77392            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
77393            // runtime's understanding of tabbability, so this automatically accounts
77394            // for any kind of element that could be tabbed to.
77395            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
77396        }
77397    });
77398    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
77399    // hinders accessibility to have tab order different from visual order.
77400    return nodes;
77401}
77402/**
77403 * Returns the first visible element in a list.
77404 * NOTE: Only checks visibility up to the `container`.
77405 */ function $d3863c46a17e8a28$var$findVisible(elements, container) {
77406    for (const element of elements){
77407        // we stop checking if it's hidden at the `container` level (excluding)
77408        if (!$d3863c46a17e8a28$var$isHidden(element, {
77409            upTo: container
77410        })) return element;
77411    }
77412}
77413function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo  }) {
77414    if (getComputedStyle(node).visibility === 'hidden') return true;
77415    while(node){
77416        // we stop at `upTo` (excluding it)
77417        if (upTo !== undefined && node === upTo) return false;
77418        if (getComputedStyle(node).display === 'none') return true;
77419        node = node.parentElement;
77420    }
77421    return false;
77422}
77423function $d3863c46a17e8a28$var$isSelectableInput(element) {
77424    return element instanceof HTMLInputElement && 'select' in element;
77425}
77426function $d3863c46a17e8a28$var$focus(element, { select: select = false  } = {}) {
77427    // only focus if that element is focusable
77428    if (element && element.focus) {
77429        const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
77430        element.focus({
77431            preventScroll: true
77432        }); // only select if its not the same element, it supports selection and we need to select
77433        if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
77434    }
77435}
77436/* -------------------------------------------------------------------------------------------------
77437 * FocusScope stack
77438 * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
77439function $d3863c46a17e8a28$var$createFocusScopesStack() {
77440    /** A stack of focus scopes, with the active one at the top */ let stack = [];
77441    return {
77442        add (focusScope) {
77443            // pause the currently active focus scope (at the top of the stack)
77444            const activeFocusScope = stack[0];
77445            if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
77446             // remove in case it already exists (because we'll re-add it at the top of the stack)
77447            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
77448            stack.unshift(focusScope);
77449        },
77450        remove (focusScope) {
77451            var _stack$;
77452            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
77453            (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
77454        }
77455    };
77456}
77457function $d3863c46a17e8a28$var$arrayRemove(array, item) {
77458    const updatedArray = [
77459        ...array
77460    ];
77461    const index = updatedArray.indexOf(item);
77462    if (index !== -1) updatedArray.splice(index, 1);
77463    return updatedArray;
77464}
77465function $d3863c46a17e8a28$var$removeLinks(items) {
77466    return items.filter((item)=>item.tagName !== 'A'
77467    );
77468}
77469const $d3863c46a17e8a28$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($d3863c46a17e8a28$export$20e40289641fbbb6));
77470
77471
77472
77473
77474
77475
77476;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-layout-effect/dist/index.module.js
77477
77478
77479
77480/**
77481 * On the server, React emits a warning when calling `useLayoutEffect`.
77482 * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
77483 * We use this safe version which suppresses the warning by replacing it with a noop on the server.
77484 *
77485 * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
77486 */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? external_React_.useLayoutEffect : ()=>{};
77487
77488
77489
77490
77491
77492
77493;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-id/dist/index.module.js
77494
77495
77496
77497
77498
77499const $1746a345f3d73bb7$var$useReactId = external_React_['useId'.toString()] || (()=>undefined
77500);
77501let $1746a345f3d73bb7$var$count = 0;
77502function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
77503    const [id, setId] = external_React_.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
77504    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
77505        if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
77506        );
77507    }, [
77508        deterministicId
77509    ]);
77510    return deterministicId || (id ? `radix-${id}` : '');
77511}
77512
77513
77514
77515
77516
77517
77518;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs
77519function floating_ui_core_browser_min_t(t){return t.split("-")[0]}function floating_ui_core_browser_min_e(t){return t.split("-")[1]}function floating_ui_core_browser_min_n(e){return["top","bottom"].includes(floating_ui_core_browser_min_t(e))?"x":"y"}function floating_ui_core_browser_min_r(t){return"y"===t?"height":"width"}function floating_ui_core_browser_min_i(i,o,a){let{reference:l,floating:s}=i;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,u=floating_ui_core_browser_min_n(o),m=floating_ui_core_browser_min_r(u),g=l[m]/2-s[m]/2,d="x"===u;let p;switch(floating_ui_core_browser_min_t(o)){case"top":p={x:c,y:l.y-s.height};break;case"bottom":p={x:c,y:l.y+l.height};break;case"right":p={x:l.x+l.width,y:f};break;case"left":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y}}switch(floating_ui_core_browser_min_e(o)){case"start":p[u]-=g*(a&&d?-1:1);break;case"end":p[u]+=g*(a&&d?-1:1)}return p}const floating_ui_core_browser_min_o=async(t,e,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:a=[],platform:l}=n,s=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:o}),{x:f,y:u}=floating_ui_core_browser_min_i(c,r,s),m=r,g={},d=0;for(let n=0;n<a.length;n++){const{name:p,fn:h}=a[n],{x:y,y:x,data:w,reset:v}=await h({x:f,y:u,initialPlacement:r,placement:m,strategy:o,middlewareData:g,rects:c,platform:l,elements:{reference:t,floating:e}});f=null!=y?y:f,u=null!=x?x:u,g={...g,[p]:{...g[p],...w}},v&&d<=50&&(d++,"object"==typeof v&&(v.placement&&(m=v.placement),v.rects&&(c=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:o}):v.rects),({x:f,y:u}=floating_ui_core_browser_min_i(c,m,s))),n=-1)}return{x:f,y:u,placement:m,strategy:o,middlewareData:g}};function floating_ui_core_browser_min_a(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function floating_ui_core_browser_min_l(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function floating_ui_core_browser_min_s(t,e){var n;void 0===e&&(e={});const{x:r,y:i,platform:o,rects:s,elements:c,strategy:f}=t,{boundary:u="clippingAncestors",rootBoundary:m="viewport",elementContext:g="floating",altBoundary:d=!1,padding:p=0}=e,h=floating_ui_core_browser_min_a(p),y=c[d?"floating"===g?"reference":"floating":g],x=floating_ui_core_browser_min_l(await o.getClippingRect
vendor: 10,688 bytes, line 77519
77519({element:null==(n=await(null==o.isElement?void 0:o.isElement(y)))||n?y:y.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(c.floating)),boundary:u,rootBoundary:m,strategy:f})),w=floating_ui_core_browser_min_l(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===g?{...s.floating,x:r,y:i}:s.reference,offsetParent:await(null==o.getOffsetParent?void 0:o.getOffsetParent(c.floating)),strategy:f}):s[g]);return{top:x.top-w.top+h.top,bottom:w.bottom-x.bottom+h.bottom,left:x.left-w.left+h.left,right:w.right-x.right+h.right}}const floating_ui_core_browser_min_c=Math.min,floating_ui_core_browser_min_f=Math.max;function floating_ui_core_browser_min_u(t,e,n){return floating_ui_core_browser_min_f(t,floating_ui_core_browser_min_c(e,n))}const floating_ui_core_browser_min_m=t=>({name:"arrow",options:t,async fn(i){const{element:o,padding:l=0}=null!=t?t:{},{x:s,y:c,placement:f,rects:m,platform:g}=i;if(null==o)return{};const d=floating_ui_core_browser_min_a(l),p={x:s,y:c},h=floating_ui_core_browser_min_n(f),y=floating_ui_core_browser_min_e(f),x=floating_ui_core_browser_min_r(h),w=await g.getDimensions(o),v="y"===h?"top":"left",b="y"===h?"bottom":"right",R=m.reference[x]+m.reference[h]-p[h]-m.floating[x],A=p[h]-m.reference[h],P=await(null==g.getOffsetParent?void 0:g.getOffsetParent(o));let T=P?"y"===h?P.clientHeight||0:P.clientWidth||0:0;0===T&&(T=m.floating[x]);const O=R/2-A/2,D=d[v],L=T-w[x]-d[b],k=T/2-w[x]/2+O,E=floating_ui_core_browser_min_u(D,k,L),C=("start"===y?d[v]:d[b])>0&&k!==E&&m.reference[x]<=m.floating[x];return{[h]:p[h]-(C?k<D?D-k:L-k:0),data:{[h]:E,centerOffset:k-E}}}}),floating_ui_core_browser_min_g={left:"right",right:"left",bottom:"top",top:"bottom"};function floating_ui_core_browser_min_d(t){return t.replace(/left|right|bottom|top/g,(t=>floating_ui_core_browser_min_g[t]))}function floating_ui_core_browser_min_p(t,i,o){void 0===o&&(o=!1);const a=floating_ui_core_browser_min_e(t),l=floating_ui_core_browser_min_n(t),s=floating_ui_core_browser_min_r(l);let c="x"===l?a===(o?"end":"start")?"right":"left":"start"===a?"bottom":"top";return i.reference[s]>i.floating[s]&&(c=floating_ui_core_browser_min_d(c)),{main:c,cross:floating_ui_core_browser_min_d(c)}}const floating_ui_core_browser_min_h={start:"end",end:"start"};function floating_ui_core_browser_min_y(t){return t.replace(/start|end/g,(t=>floating_ui_core_browser_min_h[t]))}const floating_ui_core_browser_min_x=["top","right","bottom","left"],floating_ui_core_browser_min_w=floating_ui_core_browser_min_x.reduce(((t,e)=>t.concat(e,e+"-start",e+"-end")),[]);const floating_ui_core_browser_min_v=function(n){return void 0===n&&(n={}),{name:"autoPlacement",options:n,async fn(r){var i,o,a,l,c;const{x:f,y:u,rects:m,middlewareData:g,placement:d,platform:h,elements:x}=r,{alignment:v=null,allowedPlacements:b=floating_ui_core_browser_min_w,autoAlignment:R=!0,...A}=n,P=function(n,r,i){return(n?[...i.filter((t=>floating_ui_core_browser_min_e(t)===n)),...i.filter((t=>floating_ui_core_browser_min_e(t)!==n))]:i.filter((e=>floating_ui_core_browser_min_t(e)===e))).filter((t=>!n||floating_ui_core_browser_min_e(t)===n||!!r&&floating_ui_core_browser_min_y(t)!==t))}(v,R,b),T=await floating_ui_core_browser_min_s(r,A),O=null!=(i=null==(o=g.autoPlacement)?void 0:o.index)?i:0,D=P[O];if(null==D)return{};const{main:L,cross:k}=floating_ui_core_browser_min_p(D,m,await(null==h.isRTL?void 0:h.isRTL(x.floating)));if(d!==D)return{x:f,y:u,reset:{placement:P[0]}};const E=[T[floating_ui_core_browser_min_t(D)],T[L],T[k]],C=[...null!=(a=null==(l=g.autoPlacement)?void 0:l.overflows)?a:[],{placement:D,overflows:E}],H=P[O+1];if(H)return{data:{index:O+1,overflows:C},reset:{placement:H}};const B=C.slice().sort(((t,e)=>t.overflows[0]-e.overflows[0])),V=null==(c=B.find((t=>{let{overflows:e}=t;return e.every((t=>t<=0))})))?void 0:c.placement,F=null!=V?V:B[0].placement;return F!==d?{data:{index:O+1,overflows:C},reset:{placement:F}}:{}}}};const floating_ui_core_browser_min_b=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(n){var r;const{placement:i,middlewareData:o,rects:a,initialPlacement:l,platform:c,elements:f}=n,{mainAxis:u=!0,crossAxis:m=!0,fallbackPlacements:g,fallbackStrategy:h="bestFit",flipAlignment:x=!0,...w}=e,v=floating_ui_core_browser_min_t(i),b=g||(v===l||!x?[floating_ui_core_browser_min_d(l)]:function(t){const e=floating_ui_core_browser_min_d(t);return[floating_ui_core_browser_min_y(t),e,floating_ui_core_browser_min_y(e)]}(l)),R=[l,...b],A=await floating_ui_core_browser_min_s(n,w),P=[];let T=(null==(r=o.flip)?void 0:r.overflows)||[];if(u&&P.push(A[v]),m){const{main:t,cross:e}=floating_ui_core_browser_min_p(i,a,await(null==c.isRTL?void 0:c.isRTL(f.floating)));P.push(A[t],A[e])}if(T=[...T,{placement:i,overflows:P}],!P.every((t=>t<=0))){var O,D;const t=(null!=(O=null==(D=o.flip)?void 0:D.index)?O:0)+1,e=R[t];if(e)return{data:{index:t,overflows:T},reset:{placement:e}};let n="bottom";switch(h){case"bestFit":{var L;const t=null==(L=T.map((t=>[t,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:L[0].placement;t&&(n=t);break}case"initialPlacement":n=l}if(i!==n)return{reset:{placement:n}}}return{}}}};function floating_ui_core_browser_min_R(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function floating_ui_core_browser_min_A(t){return floating_ui_core_browser_min_x.some((e=>t[e]>=0))}const floating_ui_core_browser_min_P=function(t){let{strategy:e="referenceHidden",...n}=void 0===t?{}:t;return{name:"hide",async fn(t){const{rects:r}=t;switch(e){case"referenceHidden":{const e=floating_ui_core_browser_min_R(await floating_ui_core_browser_min_s(t,{...n,elementContext:"reference"}),r.reference);return{data:{referenceHiddenOffsets:e,referenceHidden:floating_ui_core_browser_min_A(e)}}}case"escaped":{const e=floating_ui_core_browser_min_R(await floating_ui_core_browser_min_s(t,{...n,altBoundary:!0}),r.floating);return{data:{escapedOffsets:e,escaped:floating_ui_core_browser_min_A(e)}}}default:return{}}}}};const floating_ui_core_browser_min_T=function(r){return void 0===r&&(r=0),{name:"offset",options:r,async fn(i){const{x:o,y:a}=i,l=await async function(r,i){const{placement:o,platform:a,elements:l}=r,s=await(null==a.isRTL?void 0:a.isRTL(l.floating)),c=floating_ui_core_browser_min_t(o),f=floating_ui_core_browser_min_e(o),u="x"===floating_ui_core_browser_min_n(o),m=["left","top"].includes(c)?-1:1,g=s&&u?-1:1,d="function"==typeof i?i(r):i;let{mainAxis:p,crossAxis:h,alignmentAxis:y}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...d};return f&&"number"==typeof y&&(h="end"===f?-1*y:y),u?{x:h*g,y:p*m}:{x:p*m,y:h*g}}(i,r);return{x:o+l.x,y:a+l.y,data:l}}}};function floating_ui_core_browser_min_O(t){return"x"===t?"y":"x"}const floating_ui_core_browser_min_D=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(r){const{x:i,y:o,placement:a}=r,{mainAxis:l=!0,crossAxis:c=!1,limiter:f={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...m}=e,g={x:i,y:o},d=await floating_ui_core_browser_min_s(r,m),p=floating_ui_core_browser_min_n(floating_ui_core_browser_min_t(a)),h=floating_ui_core_browser_min_O(p);let y=g[p],x=g[h];if(l){const t="y"===p?"bottom":"right";y=floating_ui_core_browser_min_u(y+d["y"===p?"top":"left"],y,y-d[t])}if(c){const t="y"===h?"bottom":"right";x=floating_ui_core_browser_min_u(x+d["y"===h?"top":"left"],x,x-d[t])}const w=f.fn({...r,[p]:y,[h]:x});return{...w,data:{x:w.x-i,y:w.y-o}}}}},floating_ui_core_browser_min_L=function(e){return void 0===e&&(e={}),{options:e,fn(r){const{x:i,y:o,placement:a,rects:l,middlewareData:s}=r,{offset:c=0,mainAxis:f=!0,crossAxis:u=!0}=e,m={x:i,y:o},g=floating_ui_core_browser_min_n(a),d=floating_ui_core_browser_min_O(g);let p=m[g],h=m[d];const y="function"==typeof c?c({...l,placement:a}):c,x="number"==typeof y?{mainAxis:y,crossAxis:0}:{mainAxis:0,crossAxis:0,...y};if(f){const t="y"===g?"height":"width",e=l.reference[g]-l.floating[t]+x.mainAxis,n=l.reference[g]+l.reference[t]-x.mainAxis;p<e?p=e:p>n&&(p=n)}if(u){var w,v,b,R;const e="y"===g?"width":"height",n=["top","left"].includes(floating_ui_core_browser_min_t(a)),r=l.reference[d]-l.floating[e]+(n&&null!=(w=null==(v=s.offset)?void 0:v[d])?w:0)+(n?0:x.crossAxis),i=l.reference[d]+l.reference[e]+(n?0:null!=(b=null==(R=s.offset)?void 0:R[d])?b:0)-(n?x.crossAxis:0);h<r?h=r:h>i&&(h=i)}return{[g]:p,[d]:h}}}},floating_ui_core_browser_min_k=function(n){return void 0===n&&(n={}),{name:"size",options:n,async fn(r){const{placement:i,rects:o,platform:a,elements:l}=r,{apply:c,...u}=n,m=await floating_ui_core_browser_min_s(r,u),g=floating_ui_core_browser_min_t(i),d=floating_ui_core_browser_min_e(i);let p,h;"top"===g||"bottom"===g?(p=g,h=d===(await(null==a.isRTL?void 0:a.isRTL(l.floating))?"start":"end")?"left":"right"):(h=g,p="end"===d?"top":"bottom");const y=floating_ui_core_browser_min_f(m.left,0),x=floating_ui_core_browser_min_f(m.right,0),w=floating_ui_core_browser_min_f(m.top,0),v=floating_ui_core_browser_min_f(m.bottom,0),b={availableHeight:o.floating.height-(["left","right"].includes(i)?2*(0!==w||0!==v?w+v:floating_ui_core_browser_min_f(m.top,m.bottom)):m[p]),availableWidth:o.floating.width-(["top","bottom"].includes(i)?2*(0!==y||0!==x?y+x:floating_ui_core_browser_min_f(m.left,m.right)):m[h])},R=await a.getDimensions(l.floating);null==c||c({...r,...b});const A=await a.getDimensions(l.floating);return R.width!==A.width||R.height!==A.height?{reset:{rects:!0}}:{}}}},floating_ui_core_browser_min_E=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(r){var i;const{placement:o,elements:s,rects:u,platform:m,strategy:g}=r,{padding:d=2,x:p,y:h}=e,y=floating_ui_core_browser_min_l(m.convertOffsetParentRelativeRectToViewportRelativeRect?await m.convertOffsetParentRelativeRectToViewportRelativeRect({rect:u.reference,offsetParent:await(null==m.getOffsetParent?void 0:m.getOffsetParent(s.floating)),strategy:g}):u.reference),x=null!=(i=await(null==m.getClientRects?void 0:m.getClientRects(s.reference)))?i:[],w=floating_ui_core_browser_min_a(d);const v=await m.getElementRects({reference:{getBoundingClientRect:function(){var e;if(2===x.length&&x[0].left>x[1].right&&null!=p&&null!=h)return null!=(e=x.find((t=>p>t.left-w.left&&p<t.right+w.right&&h>t.top-w.top&&h<t.bottom+w.bottom)))?e:y;if(x.length>=2){if("x"===floating_ui_core_browser_min_n(o)){const e=x[0],n=x[x.length-1],r="top"===floating_ui_core_browser_min_t(o),i=e.top,a=n.bottom,l=r?e.left:n.left,s=r?e.right:n.right;return{top:i,bottom:a,left:l,right:s,width:s-l,height:a-i,x:l,y:i}}
vendor: 6,298 bytes, lines 77519-77522
77519const e="left"===floating_ui_core_browser_min_t(o),r=floating_ui_core_browser_min_f(...x.map((t=>t.right))),i=floating_ui_core_browser_min_c(...x.map((t=>t.left))),a=x.filter((t=>e?t.left===i:t.right===r)),l=a[0].top,s=a[a.length-1].bottom;return{top:l,bottom:s,left:i,right:r,width:r-i,height:s-l,x:i,y:l}}return y}},floating:s.floating,strategy:g});return u.reference.x!==v.reference.x||u.reference.y!==v.reference.y||u.reference.width!==v.reference.width||u.reference.height!==v.reference.height?{reset:{rects:v}}:{}}}};
77520
77521;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs
77522function floating_ui_dom_browser_min_n(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function floating_ui_dom_browser_min_o(t){if(null==t)return window;if(!floating_ui_dom_browser_min_n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function floating_ui_dom_browser_min_i(t){return floating_ui_dom_browser_min_o(t).getComputedStyle(t)}function floating_ui_dom_browser_min_r(t){return floating_ui_dom_browser_min_n(t)?"":t?(t.nodeName||"").toLowerCase():""}function floating_ui_dom_browser_min_l(){const t=navigator.userAgentData;return null!=t&&t.brands?t.brands.map((t=>t.brand+"/"+t.version)).join(" "):navigator.userAgent}function floating_ui_dom_browser_min_c(t){return t instanceof floating_ui_dom_browser_min_o(t).HTMLElement}function floating_ui_dom_browser_min_f(t){return t instanceof floating_ui_dom_browser_min_o(t).Element}function floating_ui_dom_browser_min_s(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof floating_ui_dom_browser_min_o(t).ShadowRoot||t instanceof ShadowRoot}function floating_ui_dom_browser_min_u(t){const{overflow:e,overflowX:n,overflowY:o}=floating_ui_dom_browser_min_i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function floating_ui_dom_browser_min_d(t){return["table","td","th"].includes(floating_ui_dom_browser_min_r(t))}function floating_ui_dom_browser_min_h(t){const e=/firefox/i.test(floating_ui_dom_browser_min_l()),n=floating_ui_dom_browser_min_i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}function floating_ui_dom_browser_min_a(){return!/^((?!chrome|android).)*safari/i.test(floating_ui_dom_browser_min_l())}const floating_ui_dom_browser_min_g=Math.min,floating_ui_dom_browser_min_p=Math.max,floating_ui_dom_browser_min_m=Math.round;function floating_ui_dom_browser_min_w(t,e,n){var i,r,l,s;void 0===e&&(e=!1),void 0===n&&(n=!1);const u=t.getBoundingClientRect();let d=1,h=1;e&&floating_ui_dom_browser_min_c(t)&&(d=t.offsetWidth>0&&floating_ui_dom_browser_min_m(u.width)/t.offsetWidth||1,h=t.offsetHeight>0&&floating_ui_dom_browser_min_m(u.height)/t.offsetHeight||1);const g=floating_ui_dom_browser_min_f(t)?floating_ui_dom_browser_min_o(t):window,p=!floating_ui_dom_browser_min_a()&&n,w=(u.left+(p&&null!=(i=null==(r=g.visualViewport)?void 0:r.offsetLeft)?i:0))/d,v=(u.top+(p&&null!=(l=null==(s=g.visualViewport)?void 0:s.offsetTop)?l:0))/h,y=u.width/d,x=u.height/h;return{width:y,height:x,top:v,right:w+y,bottom:v+x,left:w,x:w,y:v}}function floating_ui_dom_browser_min_v(t){return(e=t,(e instanceof floating_ui_dom_browser_min_o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function floating_ui_dom_browser_min_y(t){return floating_ui_dom_browser_min_f(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function floating_ui_dom_browser_min_x(t){return floating_ui_dom_browser_min_w(floating_ui_dom_browser_min_v(t)).left+floating_ui_dom_browser_min_y(t).scrollLeft}function floating_ui_dom_browser_min_b(t,e,n){const o=floating_ui_dom_browser_min_c(e),i=floating_ui_dom_browser_min_v(e),l=floating_ui_dom_browser_min_w(t,o&&function(t){const e=floating_ui_dom_browser_min_w(t);return floating_ui_dom_browser_min_m(e.width)!==t.offsetWidth||floating_ui_dom_browser_min_m(e.height)!==t.offsetHeight}(e),"fixed"===n);let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==floating_ui_dom_browser_min_r(e)||floating_ui_dom_browser_min_u(i))&&(f=floating_ui_dom_browser_min_y(e)),floating_ui_dom_browser_min_c(e)){const t=floating_ui_dom_browser_min_w(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=floating_ui_dom_browser_min_x(i));return{x:l.left+f.scrollLeft-s.x,y:l.top+f.scrollTop-s.y,width:l.width,height:l.height}}function floating_ui_dom_browser_min_L(t){return"html"===floating_ui_dom_browser_min_r(t)?t:t.assignedSlot||t.parentNode||(floating_ui_dom_browser_min_s(t)?t.host:null)||floating_ui_dom_browser_min_v(t)}function floating_ui_dom_browser_min_R(t){return floating_ui_dom_browser_min_c(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function floating_ui_dom_browser_min_T(t){const e=floating_ui_dom_browser_min_o(t);let n=floating_ui_dom_browser_min_R(t);for(;n&&floating_ui_dom_browser_min_d(n)&&"static"===getComputedStyle(n).position;)n=floating_ui_dom_browser_min_R(n);return n&&("html"===floating_ui_dom_browser_min_r(n)||"body"===floating_ui_dom_browser_min_r(n)&&"static"===getComputedStyle(n).position&&!floating_ui_dom_browser_min_h(n))?e:n||function(t){let e=floating_ui_dom_browser_min_L(t);for(floating_ui_dom_browser_min_s(e)&&(e=e.host);floating_ui_dom_browser_min_c(e)&&!["html","body"].includes(floating_ui_dom_browser_min_r(e));){if(floating_ui_dom_browser_min_h(e))return e;e=e.parentNode}return null}(t)||e}function floating_ui_dom_browser_min_W(t){if(floating_ui_dom_browser_min_c(t))return{width:t.offsetWidth,height:t.offsetHeight};const e=floating_ui_dom_browser_min_w(t);return{width:e.width,height:e.height}}function floating_ui_dom_browser_min_E(t){const e=floating_ui_dom_browser_min_L(t);return["html","body","#document"].includes(floating_ui_dom_browser_min_r(e))?t.ownerDocument.body:floating_ui_dom_browser_min_c(e)&&floating_ui_dom_browser_min_u(e)?e:floating_ui_dom_browser_min_E(e)}function floating_ui_dom_browser_min_H(t,e){var n;void 0===e&&(e=[]);const i=floating_ui_dom_browser_min_E(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=floating_ui_dom_browser_min_o(i),c=r?[l].concat(l.visualVie
vendor: 5,221 bytes, lines 77522-77541
77522wport||[],floating_ui_dom_browser_min_u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(floating_ui_dom_browser_min_H(c))}function floating_ui_dom_browser_min_C(e,n,r){return"viewport"===n?floating_ui_core_browser_min_l(function(t,e){const n=floating_ui_dom_browser_min_o(t),i=floating_ui_dom_browser_min_v(t),r=n.visualViewport;let l=i.clientWidth,c=i.clientHeight,f=0,s=0;if(r){l=r.width,c=r.height;const t=floating_ui_dom_browser_min_a();(t||!t&&"fixed"===e)&&(f=r.offsetLeft,s=r.offsetTop)}return{width:l,height:c,x:f,y:s}}(e,r)):floating_ui_dom_browser_min_f(n)?function(t,e){const n=floating_ui_dom_browser_min_w(t,!1,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft;return{top:o,left:i,x:i,y:o,right:i+t.clientWidth,bottom:o+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n,r):floating_ui_core_browser_min_l(function(t){var e;const n=floating_ui_dom_browser_min_v(t),o=floating_ui_dom_browser_min_y(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=floating_ui_dom_browser_min_p(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=floating_ui_dom_browser_min_p(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+floating_ui_dom_browser_min_x(t);const s=-o.scrollTop;return"rtl"===floating_ui_dom_browser_min_i(r||n).direction&&(f+=floating_ui_dom_browser_min_p(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:s}}(floating_ui_dom_browser_min_v(e)))}function floating_ui_dom_browser_min_S(t){const e=floating_ui_dom_browser_min_H(t),n=["absolute","fixed"].includes(floating_ui_dom_browser_min_i(t).position)&&floating_ui_dom_browser_min_c(t)?floating_ui_dom_browser_min_T(t):t;return floating_ui_dom_browser_min_f(n)?e.filter((t=>floating_ui_dom_browser_min_f(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&floating_ui_dom_browser_min_s(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==floating_ui_dom_browser_min_r(t))):[]}const floating_ui_dom_browser_min_D={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?floating_ui_dom_browser_min_S(e):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=floating_ui_dom_browser_min_C(e,n,i);return t.top=floating_ui_dom_browser_min_p(o.top,t.top),t.right=floating_ui_dom_browser_min_g(o.right,t.right),t.bottom=floating_ui_dom_browser_min_g(o.bottom,t.bottom),t.left=floating_ui_dom_browser_min_p(o.left,t.left),t}),floating_ui_dom_browser_min_C(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=floating_ui_dom_browser_min_c(n),l=floating_ui_dom_browser_min_v(n);if(n===l)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==floating_ui_dom_browser_min_r(n)||floating_ui_dom_browser_min_u(l))&&(f=floating_ui_dom_browser_min_y(n)),floating_ui_dom_browser_min_c(n))){const t=floating_ui_dom_browser_min_w(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}},isElement:floating_ui_dom_browser_min_f,getDimensions:floating_ui_dom_browser_min_W,getOffsetParent:floating_ui_dom_browser_min_T,getDocumentElement:floating_ui_dom_browser_min_v,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:floating_ui_dom_browser_min_b(e,floating_ui_dom_browser_min_T(n),o),floating:{...floating_ui_dom_browser_min_W(n),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===floating_ui_dom_browser_min_i(t).direction};function floating_ui_dom_browser_min_N(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l=!0,animationFrame:c=!1}=o,s=i&&!c,u=r&&!c,d=s||u?[...floating_ui_dom_browser_min_f(t)?floating_ui_dom_browser_min_H(t):[],...floating_ui_dom_browser_min_H(e)]:[];d.forEach((t=>{s&&t.addEventListener("scroll",n,{passive:!0}),u&&t.addEventListener("resize",n)}));let h,a=null;if(l){let o=!0;a=new ResizeObserver((()=>{o||n(),o=!1})),floating_ui_dom_browser_min_f(t)&&!c&&a.observe(t),a.observe(e)}let g=c?floating_ui_dom_browser_min_w(t):null;return c&&function e(){const o=floating_ui_dom_browser_min_w(t);!g||o.x===g.x&&o.y===g.y&&o.width===g.width&&o.height===g.height||n();g=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;d.forEach((t=>{s&&t.removeEventListener("scroll",n),u&&t.removeEventListener("resize",n)})),null==(t=a)||t.disconnect(),a=null,c&&cancelAnimationFrame(h)}}const floating_ui_dom_browser_min_z=(t,n,o)=>floating_ui_core_browser_min_o(t,n,{platform:floating_ui_dom_browser_min_D,...o});
77523
77524;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js
77525
77526
77527
77528
77529
77530
77531var floating_ui_react_dom_esm_index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
77532
77533// Fork of `fast-deep-equal` that only does the comparisons we need and compares
77534// functions
77535function floating_ui_react_dom_esm_deepEqual(a, b) {
77536  if (a === b) {
77537    return true;
77538  }
77539
77540  if (typeof a !== typeof b) {
77541    return false;
77542  }
77543
77544  if (typeof a === 'function' && a.toString() === b.toString()) {
77545    return true;
77546  }
77547
77548  let length, i, keys;
77549
77550  if (a && b && typeof a == 'object') {
77551    if (Array.isArray(a)) {
77552      length = a.length;
77553      if (length != b.length) return false;
77554
77555      for (i = length; i-- !== 0;) {
77556        if (!floating_ui_react_dom_esm_deepEqual(a[i], b[i])) {
77557          return false;
77558        }
77559      }
77560
77561      return true;
77562    }
77563
77564    keys = Object.keys(a);
77565    length = keys.length;
77566
77567    if (length !== Object.keys(b).length) {
77568      return false;
77569    }
77570
77571    for (i = length; i-- !== 0;) {
77572      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
77573        return false;
77574      }
77575    }
77576
77577    for (i = length; i-- !== 0;) {
77578      const key = keys[i];
77579
77580      if (key === '_owner' && a.$$typeof) {
77581        continue;
77582      }
77583
77584      if (!floating_ui_react_dom_esm_deepEqual(a[key], b[key])) {
77585        return false;
77586      }
77587    }
77588
77589    return true;
77590  }
77591
77592  return a !== a && b !== b;
77593}
77594
77595function floating_ui_react_dom_esm_useLatestRef(value) {
77596  const ref = external_React_.useRef(value);
77597  floating_ui_react_dom_esm_index(() => {
77598    ref.current = value;
77599  });
77600  return ref;
77601}
77602
77603function floating_ui_react_dom_esm_useFloating(_temp) {
77604  let {
77605    middleware,
77606    placement = 'bottom',
77607    strategy = 'absolute',
77608    whileElementsMounted
77609  } = _temp === void 0 ? {} : _temp;
77610  const reference = external_React_.useRef(null);
77611  const floating = external_React_.useRef(null);
77612  const whileElementsMountedRef = floating_ui_react_dom_esm_useLatestRef(whileElementsMounted);
77613  const cleanupRef = external_React_.useRef(null);
77614  const [data, setData] = external_React_.useState({
77615    // Setting these to `null` will allow the consumer to determine if
77616    // `computePosition()` has run yet
77617    x: null,
77618    y: null,
77619    strategy,
77620    placement,
77621    middlewareData: {}
77622  });
77623  const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware);
77624
77625  if (!floating_ui_react_dom_esm_deepEqual(latestMiddleware == null ? void 0 : latestMiddleware.map(_ref => {
77626    let {
77627      options
77628    } = _ref;
77629    return options;
77630  }), middleware == null ? void 0 : middleware.map(_ref2 => {
77631    let {
77632      options
77633    } = _ref2;
77634    return options;
77635  }))) {
77636    setLatestMiddleware(middleware);
77637  }
77638
77639  const update = external_React_.useCallback(() => {
77640    if (!reference.current || !floating.current) {
77641      return;
77642    }
77643
77644    floating_ui_dom_browser_min_z(reference.current, floating.current, {
77645      middleware: latestMiddleware,
77646      placement,
77647      strategy
77648    }).then(data => {
77649      if (isMountedRef.current) {
77650        external_ReactDOM_namespaceObject.flushSync(() => {
77651          setData(data);
77652        });
77653      }
77654    });
77655  }, [latestMiddleware, placement, strategy]);
77656  floating_ui_react_dom_esm_index(() => {
77657    // Skip first update
77658    if (isMountedRef.current) {
77659      update();
77660    }
77661  }, [update]);
77662  const isMountedRef = external_React_.useRef(false);
77663  floating_ui_react_dom_esm_index(() => {
77664    isMountedRef.current = true;
77665    return () => {
77666      isMountedRef.current = false;
77667    };
77668  }, []);
77669  const runElementMountCallback = external_React_.useCallback(() => {
77670    if (typeof cleanupRef.current === 'function') {
77671      cleanupRef.current();
77672      cleanupRef.current = null;
77673    }
77674
77675    if (reference.current && floating.current) {
77676      if (whileElementsMountedRef.current) {
77677        const cleanupFn = whileElementsMountedRef.current(reference.current, floating.current, update);
77678        cleanupRef.current = cleanupFn;
77679      } else {
77680        update();
77681      }
77682    }
77683  }, [update, whileElementsMountedRef]);
77684  const setReference = external_React_.useCallback(node => {
77685    reference.current = node;
77686    runElementMountCallback();
77687  }, [runElementMountCallback]);
77688  const setFloating = external_React_.useCallback(node => {
77689    floating.current = node;
77690    runElementMountCallback();
77691  }, [runElementMountCallback]);
77692  const refs = external_React_.useMemo(() => ({
77693    reference,
77694    floating
77695  }), []);
77696  return external_React_.useMemo(() => ({ ...data,
77697    update,
77698    refs,
77699    reference: setReference,
77700    floating: setFloating
77701  }), [data, update, refs, setReference, setFloating]);
77702}
77703
77704/**
77705 * Positions an inner element of the floating element such that it is centered
77706 * to the reference element.
77707 * This wraps the core `arrow` middleware to allow React refs as the element.
77708 * @see https://floating-ui.com/docs/arrow
77709 */
77710
77711const dist_floating_ui_react_dom_esm_arrow = options => {
77712  const {
77713    element,
77714    padding
77715  } = options;
77716
77717  function isRef(value) {
77718    return Object.prototype.hasOwnProperty.call(value, 'current');
77719  }
77720
77721  return {
77722    name: 'arrow',
77723    options,
77724
77725    fn(args) {
77726      if (isRef(element)) {
77727        if (element.current != null) {
77728          return floating_ui_core_browser_min_m({
77729            element: element.current,
77730            padding
77731          }).fn(args);
77732        }
77733
77734        return {};
77735      } else if (element) {
77736        return floating_ui_core_browser_min_m({
77737          element,
77738          padding
77739        }).fn(args);
77740      }
77741
77742      return {};
77743    }
77744
77745  };
77746};
77747
77748
77749
77750;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-slot/dist/index.module.js
77751
77752
77753
77754
77755
77756
77757
77758/* -------------------------------------------------------------------------------------------------
77759 * Slot
77760 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77761    const { children: children , ...slotProps } = props;
77762    const childrenArray = external_React_.Children.toArray(children);
77763    const slottable = childrenArray.find(react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable);
77764    if (slottable) {
77765        // the new element to render is the one passed as a child of `Slottable`
77766        const newElement = slottable.props.children;
77767        const newChildren = childrenArray.map((child)=>{
77768            if (child === slottable) {
77769                // because the new element will be the one rendered, we are only interested
77770                // in grabbing its children (`newElement.props.children`)
77771                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
77772                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
77773            } else return child;
77774        });
77775        return /*#__PURE__*/ (0,external_React_.createElement)(react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
77776            ref: forwardedRef
77777        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
77778    }
77779    return /*#__PURE__*/ (0,external_React_.createElement)(react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
77780        ref: forwardedRef
77781    }), children);
77782});
77783react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
77784/* -------------------------------------------------------------------------------------------------
77785 * SlotClone
77786 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77787    const { children: children , ...slotProps } = props;
77788    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
77789        ...react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,928 bytes, lines 77790-77924
77790        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
77791    });
77792    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
77793});
77794react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
77795/* -------------------------------------------------------------------------------------------------
77796 * Slottable
77797 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
77798    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
77799};
77800/* ---------------------------------------------------------------------------------------------- */ function react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) {
77801    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
77802}
77803function react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
77804    // all child props should override
77805    const overrideProps = {
77806        ...childProps
77807    };
77808    for(const propName in childProps){
77809        const slotPropValue = slotProps[propName];
77810        const childPropValue = childProps[propName];
77811        const isHandler = /^on[A-Z]/.test(propName);
77812        if (isHandler) {
77813            // if the handler exists on both, we compose them
77814            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
77815                childPropValue(...args);
77816                slotPropValue(...args);
77817            };
77818            else if (slotPropValue) overrideProps[propName] = slotPropValue;
77819        } else if (propName === 'style') overrideProps[propName] = {
77820            ...slotPropValue,
77821            ...childPropValue
77822        };
77823        else if (propName === 'className') overrideProps[propName] = [
77824            slotPropValue,
77825            childPropValue
77826        ].filter(Boolean).join(' ');
77827    }
77828    return {
77829        ...slotProps,
77830        ...overrideProps
77831    };
77832}
77833const react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360));
77834
77835
77836
77837
77838
77839
77840;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-primitive/dist/index.module.js
77841
77842
77843
77844
77845
77846
77847
77848
77849
77850const dist_index_module_$8927f6f2acc4f386$var$NODES = [
77851    'a',
77852    'button',
77853    'div',
77854    'form',
77855    'h2',
77856    'h3',
77857    'img',
77858    'input',
77859    'label',
77860    'li',
77861    'nav',
77862    'ol',
77863    'p',
77864    'span',
77865    'svg',
77866    'ul'
77867]; // Temporary while we await merge of this fix:
77868// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
77869// prettier-ignore
77870/* -------------------------------------------------------------------------------------------------
77871 * Primitive
77872 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
77873    const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77874        const { asChild: asChild , ...primitiveProps } = props;
77875        const Comp = asChild ? react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
77876        (0,external_React_.useEffect)(()=>{
77877            window[Symbol.for('radix-ui')] = true;
77878        }, []);
77879        return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, {
77880            ref: forwardedRef
77881        }));
77882    });
77883    Node.displayName = `Primitive.${node}`;
77884    return {
77885        ...primitive,
77886        [node]: Node
77887    };
77888}, {});
77889/* -------------------------------------------------------------------------------------------------
77890 * Utils
77891 * -----------------------------------------------------------------------------------------------*/ /**
77892 * Flush custom event dispatch
77893 * https://github.com/radix-ui/primitives/pull/1378
77894 *
77895 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
77896 *
77897 * Internally, React prioritises events in the following order:
77898 *  - discrete
77899 *  - continuous
77900 *  - default
77901 *
77902 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
77903 *
77904 * `discrete` is an  important distinction as updates within these events are applied immediately.
77905 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
77906 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
77907 * dispatched by another `discrete` event.
77908 *
77909 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
77910 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
77911 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
77912 * For example:
77913 *
77914 * dispatching a known click 👎
77915 * target.dispatchEvent(new Event(‘click’))
77916 *
77917 * dispatching a custom type within a non-discrete event 👎
77918 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
77919 *
77920 * dispatching a custom type within a `discrete` event 👍
77921 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
77922 *
77923 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
77924 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
77925 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
77926 */ function dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
77927    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
77928    );
77929}
77930/* -----------------------------------------------------------------------------------------------*/ const dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034));
77931
77932
77933
77934
77935
77936
77937;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/dist/index.module.js
77938
77939
77940
77941
77942
77943
77944
77945/* -------------------------------------------------------------------------------------------------
77946 * Arrow
77947 * -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$var$NAME = 'Arrow';
77948const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77949    const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props;
77950    return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.svg, extends_extends({}, arrowProps, {
77951        ref: forwardedRef,
77952        width: width,
77953        height: height,
77954        viewBox: "0 0 30 10",
77955        preserveAspectRatio: "none"
77956    }), props.asChild ? children : /*#__PURE__*/ (0,external_React_.createElement)("polygon", {
77957        points: "0,0 30,0 15,10"
77958    }));
77959});
77960/*#__PURE__*/ Object.assign($7e8f5cd07187803e$export$21b07c8f274aebd5, {
77961    displayName: $7e8f5cd07187803e$var$NAME
77962});
77963/* -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$export$be92b6f5f03c0fe9 = $7e8f5cd07187803e$export$21b07c8f274aebd5;
77964
77965
77966
77967
77968
77969
77970;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-slot/dist/index.module.js
77971
77972
77973
77974
77975
77976
77977
77978/* -------------------------------------------------------------------------------------------------
77979 * Slot
77980 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
77981    const { children: children , ...slotProps } = props;
77982    const childrenArray = external_React_.Children.toArray(children);
77983    const slottable = childrenArray.find(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable);
77984    if (slottable) {
77985        // the new element to render is the one passed as a child of `Slottable`
77986        const newElement = slottable.props.children;
77987        const newChildren = childrenArray.map((child)=>{
77988            if (child === slottable) {
77989                // because the new element will be the one rendered, we are only interested
77990                // in grabbing its children (`newElement.props.children`)
77991                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
77992                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
77993            } else return child;
77994        });
77995        return /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
77996            ref: forwardedRef
77997        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
77998    }
77999    return /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
78000        ref: forwardedRef
78001    }), children);
78002});
78003_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
78004/* -------------------------------------------------------------------------------------------------
78005 * SlotClone
78006 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78007    const { children: children , ...slotProps } = props;
78008    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
78009        ..._radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
78010        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
78011    });
78012    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
78013});
78014_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
78015/* -------------------------------------------------------------------------------------------------
78016 * Slottable
78017 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
78018    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
78019};
78020/* ---------------------------------------------------------------------------------------------- */ function _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) {
78021    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
78022}
78023function _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
78024    // all child props should override
78025    const overrideProps = {
78026        ...childProps
78027    };
78028    for(const propName in childProps){
78029        const slotPropValue = slotProps[propName];
78030        const childPropValue = childProps[propName];
78031        const isHandler = /^on[A-Z]/.test(propName);
78032        if (isHandler) {
78033            // if the handler exists on both, we compose them
78034            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
78035                childPropValue(...args);
78036                slotPropValue(...args);
78037            };
78038            else if (slotPropValue) overrideProps[propName] = slotPropValue;
78039        } else if (propName === 'style') overrideProps[propName] = {
78040            ...slotPropValue,
78041            ...childPropValue
78042        };
78043        else if (propName === 'className') overrideProps[propName] = [
78044            slotPropValue,
78045            childPropValue
78046        ].filter(Boolean).join(' ');
78047    }
78048    return {
78049        ...slotProps,
78050        ...overrideProps
78051    };
78052}
78053const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360));
78054
78055
78056
78057
78058
78059
78060;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive/dist/index.module.js
78061
78062
78063
78064
78065
78066
78067
78068
78069
78070const react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES = [
78071    'a',
78072    'button',
78073    'div',
78074    'form',
78075    'h2',
78076    'h3',
78077    'img',
78078    'input',
78079    'label',
78080    'li',
78081    'nav',
78082    'ol',
78083    'p',
78084    'span',
78085    'svg',
78086    'ul'
78087]; // Temporary while we await merge of this fix:
78088// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
78089// prettier-ignore
78090/* -------------------------------------------------------------------------------------------------
78091 * Primitive
78092 * -----------------------------------------------------------------------------------------------*/ const react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
78093    const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78094        const { asChild: asChild , ...primitiveProps } = props;
78095        const Comp = asChild ? _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
78096        (0,external_React_.useEffect)(()=>{
78097            window[Symbol.for('radix-ui')] = true;
78098        }, []);
78099        return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, {
78100            ref: forwardedRef
78101        }));
78102    });
78103    Node.displayName = `Primitive.${node}`;
78104    return {
78105        ...primitive,
78106        [node]: Node
78107    };
78108}, {});
78109/* -------------------------------------------------------------------------------------------------
78110 * Utils
78111 * -----------------------------------------------------------------------------------------------*/ /**
78112 * Flush custom event dispatch
78113 * https://github.com/radix-ui/primitives/pull/1378
78114 *
78115 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
78116 *
78117 * Internally, React prioritises events in the following order:
78118 *  - discrete
78119 *  - continuous
78120 *  - default
78121 *
78122 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
78123 *
78124 * `discrete` is an  important distinction as updates within these events are applied immediately.
78125 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
78126 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
78127 * dispatched by another `discrete` event.
78128 *
78129 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
78130 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
78131 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
78132 * For example:
78133 *
78134 * dispatching a known click 👎
78135 * target.dispatchEvent(new Event(‘click’))
78136 *
78137 * dispatching a custom type within a non-discrete event 👎
78138 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
78139 *
78140 * dispatching a custom type within a `discrete` event 👍
78141 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
78142 *
78143 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
78144 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
78145 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
78146 */ function react_primitive_dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
78147    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
78148    );
78149}
78150/* -----------------------------------------------------------------------------------------------*/ const react_primitive_dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034));
78151
78152
78153
78154
78155
78156
78157;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-size/dist/index.module.js
78158
78159
78160
78161
78162
78163function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
78164    const [size, setSize] = (0,external_React_.useState)(undefined);
78165    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78166        if (element) {
78167            // provide size as early as possible
78168            setSize({
78169                width: element.offsetWidth,
78170                height: element.offsetHeight
78171            });
78172            const resizeObserver = new ResizeObserver((entries)=>{
78173                if (!Array.isArray(entries)) return;
78174                 // Since we only observe the one element, we don't need to loop over the
78175                // array
78176                if (!entries.length) return;
78177                const entry = entries[0];
78178                let width;
78179                let height;
78180                if ('borderBoxSize' in entry) {
78181                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
78182                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
78183                    width = borderSize['inlineSize'];
78184                    height = borderSize['blockSize'];
78185                } else {
78186                    // for browsers that don't support `borderBoxSize`
78187                    // we calculate it ourselves to get the correct border box.
78188                    width = element.offsetWidth;
78189                    height = element.offsetHeight;
78190                }
78191                setSize({
78192                    width: width,
78193                    height: height
78194                });
78195            });
78196            resizeObserver.observe(element, {
78197                box: 'border-box'
78198            });
78199            return ()=>resizeObserver.unobserve(element)
78200            ;
78201        } else // We only want to reset to `undefined` when the element becomes `null`,
78202        // not if it changes to another element.
78203        setSize(undefined);
78204    }, [
78205        element
78206    ]);
78207    return size;
78208}
78209
78210
78211
78212
78213
78214
78215;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/dist/index.module.js
78216
78217
78218
78219
78220
78221
78222
78223
78224
78225
78226
78227
78228
78229
78230
78231
78232
78233
78234
78235
78236
78237const $cf1ac5d9fe0e8206$export$36f0086da09c4b9f = (/* unused pure expression or super */ null && ([
78238    'top',
78239    'right',
78240    'bottom',
78241    'left'
78242]));
78243const $cf1ac5d9fe0e8206$export$3671ffab7b302fc9 = (/* unused pure expression or super */ null && ([
78244    'start',
78245    'center',
78246    'end'
78247]));
78248/* -------------------------------------------------------------------------------------------------
78249 * Popper
78250 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$POPPER_NAME = 'Popper';
78251const [$cf1ac5d9fe0e8206$var$createPopperContext, $cf1ac5d9fe0e8206$export$722aac194ae923] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($cf1ac5d9fe0e8206$var$POPPER_NAME);
78252const [$cf1ac5d9fe0e8206$var$PopperProvider, $cf1ac5d9fe0e8206$var$usePopperContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$POPPER_NAME);
78253const $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 = (props)=>{
78254    const { __scopePopper: __scopePopper , children: children  } = props;
78255    const [anchor, setAnchor] = (0,external_React_.useState)(null);
78256    return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PopperProvider, {
78257        scope: __scopePopper,
78258        anchor: anchor,
78259        onAnchorChange: setAnchor
78260    }, children);
78261};
78262/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$badac9ada3a0bdf9, {
78263    displayName: $cf1ac5d9fe0e8206$var$POPPER_NAME
78264});
78265/* -------------------------------------------------------------------------------------------------
78266 * PopperAnchor
78267 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ANCHOR_NAME = 'PopperAnchor';
78268const $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78269    const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props;
78270    const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$ANCHOR_NAME, __scopePopper);
78271    const ref = (0,external_React_.useRef)(null);
78272    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
78273    (0,external_React_.useEffect)(()=>{
78274        // Consumer can anchor the popper to something that isn't
78275        // a DOM node e.g. pointer position, so we override the
78276        // `anchorRef` with their virtual ref in this case.
78277        context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
78278    });
78279    return virtualRef ? null : /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, anchorProps, {
78280        ref: composedRefs
78281    }));
78282});
78283/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d, {
78284    displayName: $cf1ac5d9fe0e8206$var$ANCHOR_NAME
78285});
78286/* -------------------------------------------------------------------------------------------------
78287 * PopperContent
78288 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$CONTENT_NAME = 'PopperContent';
78289const [$cf1ac5d9fe0e8206$var$PopperContentProvider, $cf1ac5d9fe0e8206$var$useContentContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME);
78290const [$cf1ac5d9fe0e8206$var$PositionContextProvider, $cf1ac5d9fe0e8206$var$usePositionContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, {
78291    hasParent: false,
78292    positionUpdateFns: new Set()
78293});
78294const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78295    var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2;
78296    const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props;
78297    const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
78298    const [content, setContent] = (0,external_React_.useState)(null);
78299    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node)
78300    );
78301    const [arrow, setArrow] = (0,external_React_.useState)(null);
78302    const arrowSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(arrow);
78303    const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
78304    const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
78305    const desiredPlacement = side + (align !== 'center' ? '-' + align : '');
78306    const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : {
78307        top: 0,
78308        right: 0,
78309        bottom: 0,
78310        left: 0,
78311        ...collisionPaddingProp
78312    };
78313    const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [
78314        collisionBoundary
78315    ];
78316    const hasExplicitBoundaries = boundary.length > 0;
78317    const detectOverflowOptions = {
78318        padding: collisionPadding,
78319        boundary: boundary.filter($cf1ac5d9fe0e8206$var$isNotNull),
78320        // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
78321        altBoundary: hasExplicitBoundaries
78322    };
78323    const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update  } = floating_ui_react_dom_esm_useFloating({
78324        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
78325        strategy: 'fixed',
78326        placement: desiredPlacement,
78327        whileElementsMounted: floating_ui_dom_browser_min_N,
78328        middleware: [
78329            $cf1ac5d9fe0e8206$var$anchorCssProperties(),
78330            floating_ui_core_browser_min_T({
78331                mainAxis: sideOffset + arrowHeight,
78332                alignmentAxis: alignOffset
78333            }),
78334            avoidCollisions ? floating_ui_core_browser_min_D({
78335                mainAxis: true,
78336                crossAxis: false,
78337                limiter: sticky === 'partial' ? floating_ui_core_browser_min_L() : undefined,
78338                ...detectOverflowOptions
78339            }) : undefined,
78340            arrow ? dist_floating_ui_react_dom_esm_arrow({
78341                element: arrow,
78342                padding: arrowPadding
78343            }) : undefined,
78344            avoidCollisions ? floating_ui_core_browser_min_b({
78345                ...detectOverflowOptions
78346            }) : undefined,
78347            floating_ui_core_browser_min_k({
78348                ...detectOverflowOptions,
78349                apply: ({ elements: elements , availableWidth: width , availableHeight: height  })=>{
78350                    elements.floating.style.setProperty('--radix-popper-available-width', `${width}px`);
78351                    elements.floating.style.setProperty('--radix-popper-available-height', `${height}px`);
78352                }
78353            }),
78354            $cf1ac5d9fe0e8206$var$transformOrigin({
78355                arrowWidth: arrowWidth,
78356                arrowHeight: arrowHeight
78357            }),
78358            hideWhenDetached ? floating_ui_core_browser_min_P({
78359                strategy: 'referenceHidden'
78360            }) : undefined
78361        ].filter($cf1ac5d9fe0e8206$var$isDefined)
78362    }); // assign the reference dynamically once `Content` has mounted so we can collocate the logic
78363    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78364        reference(context.anchor);
78365    }, [
78366        reference,
78367        context.anchor
78368    ]);
78369    const isPlaced = x !== null && y !== null;
78370    const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
78371    const handlePlaced = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPlaced);
78372    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78373        if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
78374    }, [
78375        isPlaced,
78376        handlePlaced
78377    ]);
78378    const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
78379    const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
78380    const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
78381    const [contentZIndex, setContentZIndex] = (0,external_React_.useState)();
78382    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78383        if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
78384    }, [
78385        content
78386    ]);
78387    const { hasParent: hasParent , positionUpdateFns: positionUpdateFns  } = $cf1ac5d9fe0e8206$var$usePositionContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
78388    const isRoot = !hasParent;
78389    (0,external_React_.useLayoutEffect)(()=>{
78390        if (!isRoot) {
78391            positionUpdateFns.add(update);
78392            return ()=>{
78393                positionUpdateFns.delete(update);
78394            };
78395        }
78396    }, [
78397        isRoot,
78398        positionUpdateFns,
78399        update
78400    ]); // when nested contents are rendered in portals, they are appended out of order causing
78401    // children to be positioned incorrectly if initially open.
78402    // we need to re-compute the positioning once the parent has finally been placed.
78403    // https://github.com/floating-ui/floating-ui/issues/1531
78404    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78405        if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn)
78406        );
78407    }, [
78408        isRoot,
78409        isPlaced,
78410        positionUpdateFns
78411    ]);
78412    const commonProps = {
78413        'data-side': placedSide,
78414        'data-align': placedAlign,
78415        ...contentProps,
78416        ref: composedRefs,
78417        style: {
78418            ...contentProps.style,
78419            // if the PopperContent hasn't been placed yet (not all measurements done)
78420            // we prevent animations so that users's animation don't kick in too early referring wrong sides
78421            animation: !isPlaced ? 'none' : undefined,
78422            // hide the content if using the hide middleware and should be hidden
78423            opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
78424        }
78425    };
78426    return /*#__PURE__*/ (0,external_React_.createElement)("div", {
78427        ref: floating,
78428        "data-radix-popper-content-wrapper": "",
78429        style: {
78430            position: strategy,
78431            left: 0,
78432            top: 0,
78433            transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)',
78434            // keep off the page when measuring
78435            minWidth: 'max-content',
78436            zIndex: contentZIndex,
78437            ['--radix-popper-transform-origin']: [
78438                (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x,
78439                (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y
78440            ].join(' ')
78441        } // Floating UI interally calculates logical alignment based the `dir` attribute on
78442        ,
78443        dir: props.dir
78444    }, /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PopperContentProvider, {
78445        scope: __scopePopper,
78446        placedSide: placedSide,
78447        onArrowChange: setArrow,
78448        arrowX: arrowX,
78449        arrowY: arrowY,
78450        shouldHideArrow: cannotCenterArrow
78451    }, isRoot ? /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PositionContextProvider, {
78452        scope: __scopePopper,
78453        hasParent: true,
78454        positionUpdateFns: positionUpdateFns
78455    }, /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, commonProps)) : /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, commonProps)));
78456});
78457/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc, {
78458    displayName: $cf1ac5d9fe0e8206$var$CONTENT_NAME
78459});
78460/* -------------------------------------------------------------------------------------------------
78461 * PopperArrow
78462 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow';
78463const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = {
78464    top: 'bottom',
78465    right: 'left',
78466    bottom: 'top',
78467    left: 'right'
78468};
78469const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ (0,external_React_.forwardRef)(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) {
78470    const { __scopePopper: __scopePopper , ...arrowProps } = props;
78471    const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
78472    const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide];
78473    return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
78474    // doesn't report size as we'd expect on SVG elements.
78475    // it reports their bounding box which is effectively the largest path inside the SVG.
78476    (0,external_React_.createElement)("span", {
78477        ref: contentContext.onArrowChange,
78478        style: {
78479            position: 'absolute',
78480            left: contentContext.arrowX,
78481            top: contentContext.arrowY,
78482            [baseSide]: 0,
78483            transformOrigin: {
78484                top: '',
78485                right: '0 0',
78486                bottom: 'center 0',
78487                left: '100% 0'
78488            }[contentContext.placedSide],
78489            transform: {
78490                top: 'translateY(100%)',
78491                right: 'translateY(50%) rotate(90deg) translateX(-50%)',
78492                bottom: `rotate(180deg)`,
78493                left: 'translateY(50%) rotate(-90deg) translateX(50%)'
78494            }[contentContext.placedSide],
78495            visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
78496        }
78497    }, /*#__PURE__*/ (0,external_React_.createElement)($7e8f5cd07187803e$export$be92b6f5f03c0fe9, extends_extends({}, arrowProps, {
78498        ref: forwardedRef,
78499        style: {
78500            ...arrowProps.style,
78501            // ensures the element can be measured correctly (mostly for if SVG)
78502            display: 'block'
78503        }
78504    }))));
78505});
78506/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0, {
78507    displayName: $cf1ac5d9fe0e8206$var$ARROW_NAME
78508});
78509/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isDefined(value) {
78510    return value !== undefined;
78511}
78512function $cf1ac5d9fe0e8206$var$isNotNull(value) {
78513    return value !== null;
78514}
78515const $cf1ac5d9fe0e8206$var$anchorCssProperties = ()=>({
78516        name: 'anchorCssProperties',
78517        fn (data) {
78518            const { rects: rects , elements: elements  } = data;
78519            const { width: width , height: height  } = rects.reference;
78520            elements.floating.style.setProperty('--radix-popper-anchor-width', `${width}px`);
78521            elements.floating.style.setProperty('--radix-popper-anchor-height', `${height}px`);
78522            return {};
78523        }
78524    })
78525;
78526const $cf1ac5d9fe0e8206$var$transformOrigin = (options)=>({
78527        name: 'transformOrigin',
78528        options: options,
78529        fn (data) {
78530            var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8;
78531            const { placement: placement , rects: rects , middlewareData: middlewareData  } = data;
78532            const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0;
78533            const isArrowHidden = cannotCenterArrow;
78534            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
78535            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
78536            const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
78537            const noArrowAlign = {
78538                start: '0%',
78539                center: '50%',
78540                end: '100%'
78541            }[placedAlign];
78542            const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2;
78543            const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 0) + arrowHeight / 2;
78544            let x = '';
78545            let y = '';
78546            if (placedSide === 'bottom') {
78547                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
78548                y = `${-arrowHeight}px`;
78549            } else if (placedSide === 'top') {
78550                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
78551                y = `${rects.floating.height + arrowHeight}px`;
78552            } else if (placedSide === 'right') {
78553                x = `${-arrowHeight}px`;
78554                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
78555            } else if (placedSide === 'left') {
78556                x = `${rects.floating.width + arrowHeight}px`;
78557                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
78558            }
78559            return {
78560                data: {
78561                    x: x,
78562                    y: y
78563                }
78564            };
78565        }
78566    })
78567;
78568function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
78569    const [side, align = 'center'] = placement.split('-');
78570    return [
78571        side,
78572        align
78573    ];
78574}
78575const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
78576const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
78577const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
78578const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0;
78579
78580
78581
78582
78583
78584
78585;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal/dist/index.module.js
78586
78587
78588
78589
78590
78591
78592
78593
78594
78595/* -------------------------------------------------------------------------------------------------
78596 * Portal
78597 * -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$var$PORTAL_NAME = 'Portal';
78598const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78599    var _globalThis$document;
78600    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
78601    return container ? /*#__PURE__*/ external_ReactDOM_default().createPortal(/*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, portalProps, {
78602        ref: forwardedRef
78603    })), container) : null;
78604});
78605/*#__PURE__*/ Object.assign($f1701beae083dbae$export$602eac185826482c, {
78606    displayName: $f1701beae083dbae$var$PORTAL_NAME
78607});
78608/* -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($f1701beae083dbae$export$602eac185826482c));
78609
78610
78611
78612
78613
78614
78615;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-presence/dist/index.module.js
78616
78617
78618
78619
78620
78621
78622
78623
78624
78625
78626function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
78627    return (0,external_React_.useReducer)((state, event)=>{
78628        const nextState = machine[state][event];
78629        return nextState !== null && nextState !== void 0 ? nextState : state;
78630    }, initialState);
78631}
78632
78633
78634const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
78635    const { present: present , children: children  } = props;
78636    const presence = $921a889cee6df7e8$var$usePresence(present);
78637    const child = typeof children === 'function' ? children({
78638        present: presence.isPresent
78639    }) : external_React_.Children.only(children);
78640    const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
78641    const forceMount = typeof children === 'function';
78642    return forceMount || presence.isPresent ? /*#__PURE__*/ (0,external_React_.cloneElement)(child, {
78643        ref: ref
78644    }) : null;
78645};
78646$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
78647/* -------------------------------------------------------------------------------------------------
78648 * usePresence
78649 * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
78650    const [node1, setNode] = (0,external_React_.useState)();
78651    const stylesRef = (0,external_React_.useRef)({});
78652    const prevPresentRef = (0,external_React_.useRef)(present);
78653    const prevAnimationNameRef = (0,external_React_.useRef)('none');
78654    const initialState = present ? 'mounted' : 'unmounted';
78655    const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
78656        mounted: {
78657            UNMOUNT: 'unmounted',
78658            ANIMATION_OUT: 'unmountSuspended'
78659        },
78660        unmountSuspended: {
78661            MOUNT: 'mounted',
78662            ANIMATION_END: 'unmounted'
78663        },
78664        unmounted: {
78665            MOUNT: 'mounted'
78666        }
78667    });
78668    (0,external_React_.useEffect)(()=>{
78669        const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
78670        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
78671    }, [
78672        state
78673    ]);
78674    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78675        const styles = stylesRef.current;
78676        const wasPresent = prevPresentRef.current;
78677        const hasPresentChanged = wasPresent !== present;
78678        if (hasPresentChanged) {
78679            const prevAnimationName = prevAnimationNameRef.current;
78680            const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
78681            if (present) send('MOUNT');
78682            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
78683            // so we unmount instantly
78684            send('UNMOUNT');
78685            else {
78686                /**
78687         * When `present` changes to `false`, we check changes to animation-name to
78688         * determine whether an animation has started. We chose this approach (reading
78689         * computed styles) because there is no `animationrun` event and `animationstart`
78690         * fires after `animation-delay` has expired which would be too late.
78691         */ const isAnimating = prevAnimationName !== currentAnimationName;
78692                if (wasPresent && isAnimating) send('ANIMATION_OUT');
78693                else send('UNMOUNT');
78694            }
78695            prevPresentRef.current = present;
78696        }
78697    }, [
78698        present,
78699        send
78700    ]);
78701    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
78702        if (node1) {
78703            /**
78704       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
78705       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
78706       * make sure we only trigger ANIMATION_END for the currently active animation.
78707       */ const handleAnimationEnd = (event)=>{
78708                const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
78709                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
78710                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
78711                // a frame after the animation ends, creating a flash of visible content.
78712                // By manually flushing we ensure they sync within a frame, removing the flash.
78713                (0,external_ReactDOM_namespaceObject.flushSync)(()=>send('ANIMATION_END')
78714                );
78715            };
78716            const handleAnimationStart = (event)=>{
78717                if (event.target === node1) // if animation occurred, store its name as the previous animation.
78718                prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
78719            };
78720            node1.addEventListener('animationstart', handleAnimationStart);
78721            node1.addEventListener('animationcancel', handleAnimationEnd);
78722            node1.addEventListener('animationend', handleAnimationEnd);
78723            return ()=>{
78724                node1.removeEventListener('animationstart', handleAnimationStart);
78725                node1.removeEventListener('animationcancel', handleAnimationEnd);
78726                node1.removeEventListener('animationend', handleAnimationEnd);
78727            };
78728        } else // Transition to the unmounted state if the node is removed prematurely.
78729        // We avoid doing so during cleanup as the node may change but still exist.
78730        send('ANIMATION_END');
78731    }, [
78732        node1,
78733        send
78734    ]);
78735    return {
78736        isPresent: [
78737            'mounted',
78738            'unmountSuspended'
78739        ].includes(state),
78740        ref: (0,external_React_.useCallback)((node)=>{
78741            if (node) stylesRef.current = getComputedStyle(node);
78742            setNode(node);
78743        }, [])
78744    };
78745}
78746/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
78747    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
78748}
78749
78750
78751
78752
78753
78754
78755;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot/dist/index.module.js
78756
78757
78758
78759
78760
78761
78762
78763/* -------------------------------------------------------------------------------------------------
78764 * Slot
78765 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78766    const { children: children , ...slotProps } = props;
78767    const childrenArray = external_React_.Children.toArray(children);
78768    const slottable = childrenArray.find(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable);
78769    if (slottable) {
78770        // the new element to render is the one passed as a child of `Slottable`
78771        const newElement = slottable.props.children;
78772        const newChildren = childrenArray.map((child)=>{
78773            if (child === slottable) {
78774                // because the new element will be the one rendered, we are only interested
78775                // in grabbing its children (`newElement.props.children`)
78776                if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null);
78777                return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null;
78778            } else return child;
78779        });
78780        return /*#__PURE__*/ (0,external_React_.createElement)(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
78781            ref: forwardedRef
78782        }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null);
78783    }
78784    return /*#__PURE__*/ (0,external_React_.createElement)(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, {
78785        ref: forwardedRef
78786    }), children);
78787});
78788node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
78789/* -------------------------------------------------------------------------------------------------
78790 * SlotClone
78791 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78792    const { children: children , ...slotProps } = props;
78793    if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, {
78794        ...node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 6,189 bytes, lines 78795-78929
78795        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
78796    });
78797    return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null;
78798});
78799node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
78800/* -------------------------------------------------------------------------------------------------
78801 * Slottable
78802 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
78803    return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children);
78804};
78805/* ---------------------------------------------------------------------------------------------- */ function node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) {
78806    return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
78807}
78808function node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
78809    // all child props should override
78810    const overrideProps = {
78811        ...childProps
78812    };
78813    for(const propName in childProps){
78814        const slotPropValue = slotProps[propName];
78815        const childPropValue = childProps[propName];
78816        const isHandler = /^on[A-Z]/.test(propName);
78817        if (isHandler) {
78818            // if the handler exists on both, we compose them
78819            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
78820                childPropValue(...args);
78821                slotPropValue(...args);
78822            };
78823            else if (slotPropValue) overrideProps[propName] = slotPropValue;
78824        } else if (propName === 'style') overrideProps[propName] = {
78825            ...slotPropValue,
78826            ...childPropValue
78827        };
78828        else if (propName === 'className') overrideProps[propName] = [
78829            slotPropValue,
78830            childPropValue
78831        ].filter(Boolean).join(' ');
78832    }
78833    return {
78834        ...slotProps,
78835        ...overrideProps
78836    };
78837}
78838const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360));
78839
78840
78841
78842
78843
78844
78845;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.module.js
78846
78847
78848
78849
78850
78851
78852
78853
78854
78855const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES = [
78856    'a',
78857    'button',
78858    'div',
78859    'form',
78860    'h2',
78861    'h3',
78862    'img',
78863    'input',
78864    'label',
78865    'li',
78866    'nav',
78867    'ol',
78868    'p',
78869    'span',
78870    'svg',
78871    'ul'
78872]; // Temporary while we await merge of this fix:
78873// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
78874// prettier-ignore
78875/* -------------------------------------------------------------------------------------------------
78876 * Primitive
78877 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
78878    const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78879        const { asChild: asChild , ...primitiveProps } = props;
78880        const Comp = asChild ? node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
78881        (0,external_React_.useEffect)(()=>{
78882            window[Symbol.for('radix-ui')] = true;
78883        }, []);
78884        return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, {
78885            ref: forwardedRef
78886        }));
78887    });
78888    Node.displayName = `Primitive.${node}`;
78889    return {
78890        ...primitive,
78891        [node]: Node
78892    };
78893}, {});
78894/* -------------------------------------------------------------------------------------------------
78895 * Utils
78896 * -----------------------------------------------------------------------------------------------*/ /**
78897 * Flush custom event dispatch
78898 * https://github.com/radix-ui/primitives/pull/1378
78899 *
78900 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
78901 *
78902 * Internally, React prioritises events in the following order:
78903 *  - discrete
78904 *  - continuous
78905 *  - default
78906 *
78907 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
78908 *
78909 * `discrete` is an  important distinction as updates within these events are applied immediately.
78910 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
78911 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
78912 * dispatched by another `discrete` event.
78913 *
78914 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
78915 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
78916 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
78917 * For example:
78918 *
78919 * dispatching a known click 👎
78920 * target.dispatchEvent(new Event(‘click’))
78921 *
78922 * dispatching a custom type within a non-discrete event 👎
78923 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
78924 *
78925 * dispatching a custom type within a `discrete` event 👍
78926 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
78927 *
78928 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
78929 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
78930 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
78931 */ function _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
78932    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
78933    );
78934}
78935/* -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034));
78936
78937
78938
78939
78940
78941
78942;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/dist/index.module.js
78943
78944
78945
78946
78947
78948
78949
78950
78951
78952
78953
78954
78955
78956
78957
78958
78959
78960
78961
78962
78963
78964
78965
78966const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
78967const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
78968    bubbles: false,
78969    cancelable: true
78970};
78971/* -------------------------------------------------------------------------------------------------
78972 * RovingFocusGroup
78973 * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$GROUP_NAME = 'RovingFocusGroup';
78974const [$d7bdfb9eb0fdf311$var$Collection, $d7bdfb9eb0fdf311$var$useCollection, $d7bdfb9eb0fdf311$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME);
78975const [$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext, $d7bdfb9eb0fdf311$export$c7109489551a4f4] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d7bdfb9eb0fdf311$var$GROUP_NAME, [
78976    $d7bdfb9eb0fdf311$var$createCollectionScope
78977]);
78978const [$d7bdfb9eb0fdf311$var$RovingFocusProvider, $d7bdfb9eb0fdf311$var$useRovingFocusContext] = $d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME);
78979const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78980    return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.Provider, {
78981        scope: props.__scopeRovingFocusGroup
78982    }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.Slot, {
78983        scope: props.__scopeRovingFocusGroup
78984    }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, extends_extends({}, props, {
78985        ref: forwardedRef
78986    }))));
78987});
78988/*#__PURE__*/ Object.assign($d7bdfb9eb0fdf311$export$8699f7c8af148338, {
78989    displayName: $d7bdfb9eb0fdf311$var$GROUP_NAME
78990});
78991/* -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
78992    const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , orientation: orientation , loop: loop = false , dir: dir , currentTabStopId: currentTabStopIdProp , defaultCurrentTabStopId: defaultCurrentTabStopId , onCurrentTabStopIdChange: onCurrentTabStopIdChange , onEntryFocus: onEntryFocus , ...groupProps } = props;
78993    const ref = (0,external_React_.useRef)(null);
78994    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
78995    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
78996    const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3({
78997        prop: currentTabStopIdProp,
78998        defaultProp: defaultCurrentTabStopId,
78999        onChange: onCurrentTabStopIdChange
79000    });
79001    const [isTabbingBackOut, setIsTabbingBackOut] = (0,external_React_.useState)(false);
79002    const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus);
79003    const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
79004    const isClickFocusRef = (0,external_React_.useRef)(false);
79005    const [focusableItemsCount, setFocusableItemsCount] = (0,external_React_.useState)(0);
79006    (0,external_React_.useEffect)(()=>{
79007        const node = ref.current;
79008        if (node) {
79009            node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
79010            return ()=>node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus)
79011            ;
79012        }
79013    }, [
79014        handleEntryFocus
79015    ]);
79016    return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$RovingFocusProvider, {
79017        scope: __scopeRovingFocusGroup,
79018        orientation: orientation,
79019        dir: direction,
79020        loop: loop,
79021        currentTabStopId: currentTabStopId,
79022        onItemFocus: (0,external_React_.useCallback)((tabStopId)=>setCurrentTabStopId(tabStopId)
79023        , [
79024            setCurrentTabStopId
79025        ]),
79026        onItemShiftTab: (0,external_React_.useCallback)(()=>setIsTabbingBackOut(true)
79027        , []),
79028        onFocusableItemAdd: (0,external_React_.useCallback)(()=>setFocusableItemsCount((prevCount)=>prevCount + 1
79029            )
79030        , []),
79031        onFocusableItemRemove: (0,external_React_.useCallback)(()=>setFocusableItemsCount((prevCount)=>prevCount - 1
79032            )
79033        , [])
79034    }, /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({
79035        tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
79036        "data-orientation": orientation
79037    }, groupProps, {
79038        ref: composedRefs,
79039        style: {
79040            outline: 'none',
79041            ...props.style
79042        },
79043        onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, ()=>{
79044            isClickFocusRef.current = true;
79045        }),
79046        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, (event)=>{
79047            // We normally wouldn't need this check, because we already check
vendor: 10,777 bytes, lines 79048-79286
79048            // that the focus is on the current target and not bubbling to it.
79049            // We do this because Safari doesn't focus buttons when clicked, and
79050            // instead, the wrapper will get focused and not through a bubbling event.
79051            const isKeyboardFocus = !isClickFocusRef.current;
79052            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
79053                const entryFocusEvent = new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, $d7bdfb9eb0fdf311$var$EVENT_OPTIONS);
79054                event.currentTarget.dispatchEvent(entryFocusEvent);
79055                if (!entryFocusEvent.defaultPrevented) {
79056                    const items = getItems().filter((item)=>item.focusable
79057                    );
79058                    const activeItem = items.find((item)=>item.active
79059                    );
79060                    const currentItem = items.find((item)=>item.id === currentTabStopId
79061                    );
79062                    const candidateItems = [
79063                        activeItem,
79064                        currentItem,
79065                        ...items
79066                    ].filter(Boolean);
79067                    const candidateNodes = candidateItems.map((item)=>item.ref.current
79068                    );
79069                    $d7bdfb9eb0fdf311$var$focusFirst(candidateNodes);
79070                }
79071            }
79072            isClickFocusRef.current = false;
79073        }),
79074        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsTabbingBackOut(false)
79075        )
79076    })));
79077});
79078/* -------------------------------------------------------------------------------------------------
79079 * RovingFocusGroupItem
79080 * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$ITEM_NAME = 'RovingFocusGroupItem';
79081const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
79082    const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , focusable: focusable = true , active: active = false , tabStopId: tabStopId , ...itemProps } = props;
79083    const autoId = $1746a345f3d73bb7$export$f680877a34711e37();
79084    const id = tabStopId || autoId;
79085    const context = $d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME, __scopeRovingFocusGroup);
79086    const isCurrentTabStop = context.currentTabStopId === id;
79087    const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
79088    const { onFocusableItemAdd: onFocusableItemAdd , onFocusableItemRemove: onFocusableItemRemove  } = context;
79089    (0,external_React_.useEffect)(()=>{
79090        if (focusable) {
79091            onFocusableItemAdd();
79092            return ()=>onFocusableItemRemove()
79093            ;
79094        }
79095    }, [
79096        focusable,
79097        onFocusableItemAdd,
79098        onFocusableItemRemove
79099    ]);
79100    return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.ItemSlot, {
79101        scope: __scopeRovingFocusGroup,
79102        id: id,
79103        focusable: focusable,
79104        active: active
79105    }, /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.span, extends_extends({
79106        tabIndex: isCurrentTabStop ? 0 : -1,
79107        "data-orientation": context.orientation
79108    }, itemProps, {
79109        ref: forwardedRef,
79110        onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, (event)=>{
79111            // We prevent focusing non-focusable items on `mousedown`.
79112            // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
79113            if (!focusable) event.preventDefault(); // Safari doesn't focus a button when clicked so we run our logic on mousedown also
79114            else context.onItemFocus(id);
79115        }),
79116        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>context.onItemFocus(id)
79117        ),
79118        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
79119            if (event.key === 'Tab' && event.shiftKey) {
79120                context.onItemShiftTab();
79121                return;
79122            }
79123            if (event.target !== event.currentTarget) return;
79124            const focusIntent = $d7bdfb9eb0fdf311$var$getFocusIntent(event, context.orientation, context.dir);
79125            if (focusIntent !== undefined) {
79126                event.preventDefault();
79127                const items = getItems().filter((item)=>item.focusable
79128                );
79129                let candidateNodes = items.map((item)=>item.ref.current
79130                );
79131                if (focusIntent === 'last') candidateNodes.reverse();
79132                else if (focusIntent === 'prev' || focusIntent === 'next') {
79133                    if (focusIntent === 'prev') candidateNodes.reverse();
79134                    const currentIndex = candidateNodes.indexOf(event.currentTarget);
79135                    candidateNodes = context.loop ? $d7bdfb9eb0fdf311$var$wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
79136                }
79137                /**
79138         * Imperative focus during keydown is risky so we prevent React's batching updates
79139         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
79140         */ setTimeout(()=>$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes)
79141                );
79142            }
79143        })
79144    })));
79145});
79146/*#__PURE__*/ Object.assign($d7bdfb9eb0fdf311$export$ab9df7c53fe8454, {
79147    displayName: $d7bdfb9eb0fdf311$var$ITEM_NAME
79148});
79149/* -----------------------------------------------------------------------------------------------*/ // prettier-ignore
79150const $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT = {
79151    ArrowLeft: 'prev',
79152    ArrowUp: 'prev',
79153    ArrowRight: 'next',
79154    ArrowDown: 'next',
79155    PageUp: 'first',
79156    Home: 'first',
79157    PageDown: 'last',
79158    End: 'last'
79159};
79160function $d7bdfb9eb0fdf311$var$getDirectionAwareKey(key, dir) {
79161    if (dir !== 'rtl') return key;
79162    return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
79163}
79164function $d7bdfb9eb0fdf311$var$getFocusIntent(event, orientation, dir) {
79165    const key = $d7bdfb9eb0fdf311$var$getDirectionAwareKey(event.key, dir);
79166    if (orientation === 'vertical' && [
79167        'ArrowLeft',
79168        'ArrowRight'
79169    ].includes(key)) return undefined;
79170    if (orientation === 'horizontal' && [
79171        'ArrowUp',
79172        'ArrowDown'
79173    ].includes(key)) return undefined;
79174    return $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT[key];
79175}
79176function $d7bdfb9eb0fdf311$var$focusFirst(candidates) {
79177    const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
79178    for (const candidate of candidates){
79179        // if focus is already where we want to go, we don't want to keep going through the candidates
79180        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
79181        candidate.focus();
79182        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
79183    }
79184}
79185/**
79186 * Wraps an array around itself at a given start index
79187 * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
79188 */ function $d7bdfb9eb0fdf311$var$wrapArray(array, startIndex) {
79189    return array.map((_, index)=>array[(startIndex + index) % array.length]
79190    );
79191}
79192const $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9 = $d7bdfb9eb0fdf311$export$8699f7c8af148338;
79193const $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c53fe8454;
79194
79195
79196
79197
79198
79199
79200;// CONCATENATED MODULE: ./node_modules/aria-hidden/dist/es2015/index.js
79201var getDefaultParent = function (originalTarget) {
79202    if (typeof document === 'undefined') {
79203        return null;
79204    }
79205    var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
79206    return sampleTarget.ownerDocument.body;
79207};
79208var counterMap = new WeakMap();
79209var uncontrolledNodes = new WeakMap();
79210var markerMap = {};
79211var lockCount = 0;
79212var unwrapHost = function (node) {
79213    return node && (node.host || unwrapHost(node.parentNode));
79214};
79215var correctTargets = function (parent, targets) {
79216    return targets
79217        .map(function (target) {
79218        if (parent.contains(target)) {
79219            return target;
79220        }
79221        var correctedTarget = unwrapHost(target);
79222        if (correctedTarget && parent.contains(correctedTarget)) {
79223            return correctedTarget;
79224        }
79225        console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
79226        return null;
79227    })
79228        .filter(function (x) { return Boolean(x); });
79229};
79230/**
79231 * Marks everything except given node(or nodes) as aria-hidden
79232 * @param {Element | Element[]} originalTarget - elements to keep on the page
79233 * @param [parentNode] - top element, defaults to document.body
79234 * @param {String} [markerName] - a special attribute to mark every node
79235 * @param {String} [controlAttribute] - html Attribute to control
79236 * @return {Undo} undo command
79237 */
79238var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
79239    var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
79240    if (!markerMap[markerName]) {
79241        markerMap[markerName] = new WeakMap();
79242    }
79243    var markerCounter = markerMap[markerName];
79244    var hiddenNodes = [];
79245    var elementsToKeep = new Set();
79246    var elementsToStop = new Set(targets);
79247    var keep = function (el) {
79248        if (!el || elementsToKeep.has(el)) {
79249            return;
79250        }
79251        elementsToKeep.add(el);
79252        keep(el.parentNode);
79253    };
79254    targets.forEach(keep);
79255    var deep = function (parent) {
79256        if (!parent || elementsToStop.has(parent)) {
79257            return;
79258        }
79259        Array.prototype.forEach.call(parent.children, function (node) {
79260            if (elementsToKeep.has(node)) {
79261                deep(node);
79262            }
79263            else {
79264                var attr = node.getAttribute(controlAttribute);
79265                var alreadyHidden = attr !== null && attr !== 'false';
79266                var counterValue = (counterMap.get(node) || 0) + 1;
79267                var markerValue = (markerCounter.get(node) || 0) + 1;
79268                counterMap.set(node, counterValue);
79269                markerCounter.set(node, markerValue);
79270                hiddenNodes.push(node);
79271                if (counterValue === 1 && alreadyHidden) {
79272                    uncontrolledNodes.set(node, true);
79273                }
79274                if (markerValue === 1) {
79275                    node.setAttribute(markerName, 'true');
79276                }
79277                if (!alreadyHidden) {
79278                    node.setAttribute(controlAttribute, 'true');
79279                }
79280            }
79281        });
79282    };
79283    deep(parentNode);
79284    elementsToKeep.clear();
79285    lockCount++;
79286    return function () {
79287        hiddenNodes.forEach(function (node) {
79288            var counterValue = counterMap.get(node) - 1;
79289            var markerValue = markerCounter.get(node) - 1;
79290            counterMap.set(node, counterValue);
79291            markerCounter.set(node, markerValue);
79292            if (!counterValue) {
79293                if (!uncontrolledNodes.has(node)) {
79294                    node.removeAttribute(controlAttribute);
79295                }
79296                uncontrolledNodes.delete(node);
79297            }
79298            if (!markerValue) {
79299                node.removeAttribute(markerName);
79300            }
79301        });
79302        lockCount--;
79303        if (!lockCount) {
79304            // clear
79305            counterMap = new WeakMap();
79306            counterMap = new WeakMap();
79307            uncontrolledNodes = new WeakMap();
79308            markerMap = {};
79309        }
79310    };
79311};
79312/**
79313 * Marks everything except given node(or nodes) as aria-hidden
79314 * @param {Element | Element[]} originalTarget - elements to keep on the page
79315 * @param [parentNode] - top element, defaults to document.body
79316 * @param {String} [markerName] - a special attribute to mark every node
79317 * @return {Undo} undo command
79318 */
79319var hideOthers = function (originalTarget, parentNode, markerName) {
79320    if (markerName === void 0) { markerName = 'data-aria-hidden'; }
79321    var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
79322    var activeParentNode = parentNode || getDefaultParent(originalTarget);
79323    if (!activeParentNode) {
79324        return function () { return null; };
79325    }
79326    // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
79327    targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
79328    return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
79329};
79330/**
79331 * Marks everything except given node(or nodes) as inert
79332 * @param {Element | Element[]} originalTarget - elements to keep on the page
79333 * @param [parentNode] - top element, defaults to document.body
79334 * @param {String} [markerName] - a special attribute to mark every node
79335 * @return {Undo} undo command
79336 */
79337var inertOthers = function (originalTarget, parentNode, markerName) {
79338    if (markerName === void 0) { markerName = 'data-inert-ed'; }
79339    var activeParentNode = parentNode || getDefaultParent(originalTarget);
79340    if (!activeParentNode) {
79341        return function () { return null; };
79342    }
79343    return applyAttributeToOthers(originalTarget, activeParentNode, markerName, 'inert');
79344};
79345/**
79346 * @returns if current browser supports inert
79347 */
79348var es2015_supportsInert = function () {
79349    return typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
79350};
79351/**
79352 * Automatic function to "suppress" DOM elements - _hide_ or _inert_ in the best possible way
79353 * @param {Element | Element[]} originalTarget - elements to keep on the page
79354 * @param [parentNode] - top element, defaults to document.body
79355 * @param {String} [markerName] - a special attribute to mark every node
79356 * @return {Undo} undo command
79357 */
79358var suppressOthers = function (originalTarget, parentNode, markerName) {
79359    if (markerName === void 0) { markerName = 'data-suppressed'; }
79360    return (es2015_supportsInert() ? inertOthers : hideOthers)(originalTarget, parentNode, markerName);
79361};
79362
79363;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/constants.js
79364var zeroRightClassName = 'right-scroll-bar-position';
79365var fullWidthClassName = 'width-before-scroll-bar';
79366var noScrollbarsClassName = 'with-scroll-bars-hidden';
79367/**
79368 * Name of a CSS variable containing the amount of "hidden" scrollbar
79369 * ! might be undefined ! use will fallback!
79370 */
79371var removedBarSizeVariable = '--removed-body-scroll-bar-size';
79372
79373;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/assignRef.js
79374/**
79375 * Assigns a value for a given ref, no matter of the ref format
79376 * @param {RefObject} ref - a callback function or ref object
79377 * @param value - a new value
79378 *
79379 * @see https://github.com/theKashey/use-callback-ref#assignref
79380 * @example
79381 * const refObject = useRef();
79382 * const refFn = (ref) => {....}
79383 *
79384 * assignRef(refObject, "refValue");
79385 * assignRef(refFn, "refValue");
79386 */
79387function assignRef(ref, value) {
79388    if (typeof ref === 'function') {
79389        ref(value);
79390    }
79391    else if (ref) {
79392        ref.current = value;
79393    }
79394    return ref;
79395}
79396
79397;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/useRef.js
79398
79399/**
79400 * creates a MutableRef with ref change callback
79401 * @param initialValue - initial ref value
79402 * @param {Function} callback - a callback to run when value changes
79403 *
79404 * @example
79405 * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
79406 * ref.current = 1;
79407 * // prints 0 -> 1
79408 *
79409 * @see https://reactjs.org/docs/hooks-reference.html#useref
79410 * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
79411 * @returns {MutableRefObject}
79412 */
79413function useCallbackRef(initialValue, callback) {
79414    var ref = (0,external_React_.useState)(function () { return ({
79415        // value
79416        value: initialValue,
79417        // last callback
79418        callback: callback,
79419        // "memoized" public interface
79420        facade: {
79421            get current() {
79422                return ref.value;
79423            },
79424            set current(value) {
79425                var last = ref.value;
79426                if (last !== value) {
79427                    ref.value = value;
79428                    ref.callback(value, last);
79429                }
79430            },
79431        },
79432    }); })[0];
79433    // update callback
79434    ref.callback = callback;
79435    return ref.facade;
79436}
79437
79438;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/useMergeRef.js
79439
79440
79441/**
79442 * Merges two or more refs together providing a single interface to set their value
79443 * @param {RefObject|Ref} refs
79444 * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
79445 *
79446 * @see {@link mergeRefs} a version without buit-in memoization
79447 * @see https://github.com/theKashey/use-callback-ref#usemergerefs
79448 * @example
79449 * const Component = React.forwardRef((props, ref) => {
79450 *   const ownRef = useRef();
79451 *   const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
79452 *   return <div ref={domRef}>...</div>
79453 * }
79454 */
79455function useMergeRef_useMergeRefs(refs, defaultValue) {
79456    return useCallbackRef(defaultValue || null, function (newValue) { return refs.forEac
vendor: 8,664 bytes, lines 79456-79719
79456h(function (ref) { return assignRef(ref, newValue); }); });
79457}
79458
79459;// CONCATENATED MODULE: ./node_modules/use-sidecar/dist/es2015/medium.js
79460
79461function ItoI(a) {
79462    return a;
79463}
79464function innerCreateMedium(defaults, middleware) {
79465    if (middleware === void 0) { middleware = ItoI; }
79466    var buffer = [];
79467    var assigned = false;
79468    var medium = {
79469        read: function () {
79470            if (assigned) {
79471                throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
79472            }
79473            if (buffer.length) {
79474                return buffer[buffer.length - 1];
79475            }
79476            return defaults;
79477        },
79478        useMedium: function (data) {
79479            var item = middleware(data, assigned);
79480            buffer.push(item);
79481            return function () {
79482                buffer = buffer.filter(function (x) { return x !== item; });
79483            };
79484        },
79485        assignSyncMedium: function (cb) {
79486            assigned = true;
79487            while (buffer.length) {
79488                var cbs = buffer;
79489                buffer = [];
79490                cbs.forEach(cb);
79491            }
79492            buffer = {
79493                push: function (x) { return cb(x); },
79494                filter: function () { return buffer; },
79495            };
79496        },
79497        assignMedium: function (cb) {
79498            assigned = true;
79499            var pendingQueue = [];
79500            if (buffer.length) {
79501                var cbs = buffer;
79502                buffer = [];
79503                cbs.forEach(cb);
79504                pendingQueue = buffer;
79505            }
79506            var executeQueue = function () {
79507                var cbs = pendingQueue;
79508                pendingQueue = [];
79509                cbs.forEach(cb);
79510            };
79511            var cycle = function () { return Promise.resolve().then(executeQueue); };
79512            cycle();
79513            buffer = {
79514                push: function (x) {
79515                    pendingQueue.push(x);
79516                    cycle();
79517                },
79518                filter: function (filter) {
79519                    pendingQueue = pendingQueue.filter(filter);
79520                    return buffer;
79521                },
79522            };
79523        },
79524    };
79525    return medium;
79526}
79527function createMedium(defaults, middleware) {
79528    if (middleware === void 0) { middleware = ItoI; }
79529    return innerCreateMedium(defaults, middleware);
79530}
79531// eslint-disable-next-line @typescript-eslint/ban-types
79532function createSidecarMedium(options) {
79533    if (options === void 0) { options = {}; }
79534    var medium = innerCreateMedium(null);
79535    medium.options = __assign({ async: true, ssr: false }, options);
79536    return medium;
79537}
79538
79539;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/medium.js
79540
79541var effectCar = createSidecarMedium();
79542
79543;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/UI.js
79544
79545
79546
79547
79548
79549var nothing = function () {
79550    return;
79551};
79552/**
79553 * Removes scrollbar from the page and contain the scroll within the Lock
79554 */
79555var RemoveScroll = external_React_.forwardRef(function (props, parentRef) {
79556    var ref = external_React_.useRef(null);
79557    var _a = external_React_.useState({
79558        onScrollCapture: nothing,
79559        onWheelCapture: nothing,
79560        onTouchMoveCapture: nothing,
79561    }), callbacks = _a[0], setCallbacks = _a[1];
79562    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
79563    var SideCar = sideCar;
79564    var containerRef = useMergeRef_useMergeRefs([ref, parentRef]);
79565    var containerProps = __assign(__assign({}, rest), callbacks);
79566    return (external_React_.createElement(external_React_.Fragment, null,
79567        enabled && (external_React_.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
79568        forwardProps ? (external_React_.cloneElement(external_React_.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (external_React_.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
79569});
79570RemoveScroll.defaultProps = {
79571    enabled: true,
79572    removeScrollBar: true,
79573    inert: false,
79574};
79575RemoveScroll.classNames = {
79576    fullWidth: fullWidthClassName,
79577    zeroRight: zeroRightClassName,
79578};
79579
79580
79581;// CONCATENATED MODULE: ./node_modules/use-sidecar/dist/es2015/exports.js
79582
79583
79584var SideCar = function (_a) {
79585    var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
79586    if (!sideCar) {
79587        throw new Error('Sidecar: please provide `sideCar` property to import the right car');
79588    }
79589    var Target = sideCar.read();
79590    if (!Target) {
79591        throw new Error('Sidecar medium not found');
79592    }
79593    return external_React_.createElement(Target, __assign({}, rest));
79594};
79595SideCar.isSideCarExport = true;
79596function exportSidecar(medium, exported) {
79597    medium.useMedium(exported);
79598    return SideCar;
79599}
79600
79601;// CONCATENATED MODULE: ./node_modules/get-nonce/dist/es2015/index.js
79602var currentNonce;
79603var setNonce = function (nonce) {
79604    currentNonce = nonce;
79605};
79606var getNonce = function () {
79607    if (currentNonce) {
79608        return currentNonce;
79609    }
79610    if (true) {
79611        return __webpack_require__.nc;
79612    }
79613    return undefined;
79614};
79615
79616;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/singleton.js
79617
79618function makeStyleTag() {
79619    if (!document)
79620        return null;
79621    var tag = document.createElement('style');
79622    tag.type = 'text/css';
79623    var nonce = getNonce();
79624    if (nonce) {
79625        tag.setAttribute('nonce', nonce);
79626    }
79627    return tag;
79628}
79629function injectStyles(tag, css) {
79630    // @ts-ignore
79631    if (tag.styleSheet) {
79632        // @ts-ignore
79633        tag.styleSheet.cssText = css;
79634    }
79635    else {
79636        tag.appendChild(document.createTextNode(css));
79637    }
79638}
79639function insertStyleTag(tag) {
79640    var head = document.head || document.getElementsByTagName('head')[0];
79641    head.appendChild(tag);
79642}
79643var stylesheetSingleton = function () {
79644    var counter = 0;
79645    var stylesheet = null;
79646    return {
79647        add: function (style) {
79648            if (counter == 0) {
79649                if ((stylesheet = makeStyleTag())) {
79650                    injectStyles(stylesheet, style);
79651                    insertStyleTag(stylesheet);
79652                }
79653            }
79654            counter++;
79655        },
79656        remove: function () {
79657            counter--;
79658            if (!counter && stylesheet) {
79659                stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
79660                stylesheet = null;
79661            }
79662        },
79663    };
79664};
79665
79666;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/hook.js
79667
79668
79669/**
79670 * creates a hook to control style singleton
79671 * @see {@link styleSingleton} for a safer component version
79672 * @example
79673 * ```tsx
79674 * const useStyle = styleHookSingleton();
79675 * ///
79676 * useStyle('body { overflow: hidden}');
79677 */
79678var styleHookSingleton = function () {
79679    var sheet = stylesheetSingleton();
79680    return function (styles, isDynamic) {
79681        external_React_.useEffect(function () {
79682            sheet.add(styles);
79683            return function () {
79684                sheet.remove();
79685            };
79686        }, [styles && isDynamic]);
79687    };
79688};
79689
79690;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/component.js
79691
79692/**
79693 * create a Component to add styles on demand
79694 * - styles are added when first instance is mounted
79695 * - styles are removed when the last instance is unmounted
79696 * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
79697 */
79698var styleSingleton = function () {
79699    var useStyle = styleHookSingleton();
79700    var Sheet = function (_a) {
79701        var styles = _a.styles, dynamic = _a.dynamic;
79702        useStyle(styles, dynamic);
79703        return null;
79704    };
79705    return Sheet;
79706};
79707
79708;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/index.js
79709
79710
79711
79712
79713;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/utils.js
79714var zeroGap = {
79715    left: 0,
79716    top: 0,
79717    right: 0,
79718    gap: 0,
79719};
vendor: 4,192 bytes, lines 79720-79801
79720var utils_parse = function (x) { return parseInt(x || '', 10) || 0; };
79721var getOffset = function (gapMode) {
79722    var cs = window.getComputedStyle(document.body);
79723    var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
79724    var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
79725    var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
79726    return [utils_parse(left), utils_parse(top), utils_parse(right)];
79727};
79728var getGapWidth = function (gapMode) {
79729    if (gapMode === void 0) { gapMode = 'margin'; }
79730    if (typeof window === 'undefined') {
79731        return zeroGap;
79732    }
79733    var offsets = getOffset(gapMode);
79734    var documentWidth = document.documentElement.clientWidth;
79735    var windowWidth = window.innerWidth;
79736    return {
79737        left: offsets[0],
79738        top: offsets[1],
79739        right: offsets[2],
79740        gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
79741    };
79742};
79743
79744;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/component.js
79745
79746
79747
79748
79749var Style = styleSingleton();
79750// important tip - once we measure scrollBar width and remove them
79751// we could not repeat this operation
79752// thus we are using style-singleton - only the first "yet correct" style will be applied.
79753var getStyles = function (_a, allowRelative, gapMode, important) {
79754    var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
79755    if (gapMode === void 0) { gapMode = 'margin'; }
79756    return "\n  .".concat(noScrollbarsClassName, " {\n   overflow: hidden ").concat(important, ";\n   padding-right: ").concat(gap, "px ").concat(important, ";\n  }\n  body {\n    overflow: hidden ").concat(important, ";\n    overscroll-behavior: contain;\n    ").concat([
79757        allowRelative && "position: relative ".concat(important, ";"),
79758        gapMode === 'margin' &&
79759            "\n    padding-left: ".concat(left, "px;\n    padding-top: ").concat(top, "px;\n    padding-right: ").concat(right, "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: ").concat(gap, "px ").concat(important, ";\n    "),
79760        gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
79761    ]
79762        .filter(Boolean)
79763        .join(''), "\n  }\n  \n  .").concat(zeroRightClassName, " {\n    right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " {\n    margin-right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n    right: 0 ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n    margin-right: 0 ").concat(important, ";\n  }\n  \n  body {\n    ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n  }\n");
79764};
79765/**
79766 * Removes page scrollbar and blocks page scroll when mounted
79767 */
79768var RemoveScrollBar = function (props) {
79769    var noRelative = props.noRelative, noImportant = props.noImportant, _a = props.gapMode, gapMode = _a === void 0 ? 'margin' : _a;
79770    /*
79771     gap will be measured on every component mount
79772     however it will be used only by the "first" invocation
79773     due to singleton nature of <Style
79774     */
79775    var gap = external_React_.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
79776    return external_React_.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
79777};
79778
79779;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/index.js
79780
79781
79782
79783
79784
79785;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
79786var passiveSupported = false;
79787if (typeof window !== 'undefined') {
79788    try {
79789        var aggresiveCapture_options = Object.defineProperty({}, 'passive', {
79790            get: function () {
79791                passiveSupported = true;
79792                return true;
79793            },
79794        });
79795        // @ts-ignore
79796        window.addEventListener('test', aggresiveCapture_options, aggresiveCapture_options);
79797        // @ts-ignore
79798        window.removeEventListener('test', aggresiveCapture_options, aggresiveCapture_options);
79799    }
79800    catch (err) {
79801        passiveSupported = false;
vendor: 12,109 bytes, lines 79802-80110
79802    }
79803}
79804var nonPassive = passiveSupported ? { passive: false } : false;
79805
79806;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/handleScroll.js
79807var alwaysContainsScroll = function (node) {
79808    // textarea will always _contain_ scroll inside self. It only can be hidden
79809    return node.tagName === 'TEXTAREA';
79810};
79811var elementCanBeScrolled = function (node, overflow) {
79812    var styles = window.getComputedStyle(node);
79813    return (
79814    // not-not-scrollable
79815    styles[overflow] !== 'hidden' &&
79816        // contains scroll inside self
79817        !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible'));
79818};
79819var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); };
79820var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); };
79821var locationCouldBeScrolled = function (axis, node) {
79822    var current = node;
79823    do {
79824        // Skip over shadow root
79825        if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
79826            current = current.host;
79827        }
79828        var isScrollable = elementCouldBeScrolled(axis, current);
79829        if (isScrollable) {
79830            var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2];
79831            if (s > d) {
79832                return true;
79833            }
79834        }
79835        current = current.parentNode;
79836    } while (current && current !== document.body);
79837    return false;
79838};
79839var getVScrollVariables = function (_a) {
79840    var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
79841    return [
79842        scrollTop,
79843        scrollHeight,
79844        clientHeight,
79845    ];
79846};
79847var getHScrollVariables = function (_a) {
79848    var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
79849    return [
79850        scrollLeft,
79851        scrollWidth,
79852        clientWidth,
79853    ];
79854};
79855var elementCouldBeScrolled = function (axis, node) {
79856    return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
79857};
79858var getScrollVariables = function (axis, node) {
79859    return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
79860};
79861var getDirectionFactor = function (axis, direction) {
79862    /**
79863     * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
79864     * and then increasingly negative as you scroll towards the end of the content.
79865     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
79866     */
79867    return axis === 'h' && direction === 'rtl' ? -1 : 1;
79868};
79869var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
79870    var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
79871    var delta = directionFactor * sourceDelta;
79872    // find scrollable target
79873    var target = event.target;
79874    var targetInLock = endTarget.contains(target);
79875    var shouldCancelScroll = false;
79876    var isDeltaPositive = delta > 0;
79877    var availableScroll = 0;
79878    var availableScrollTop = 0;
79879    do {
79880        var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
79881        var elementScroll = scroll_1 - capacity - directionFactor * position;
79882        if (position || elementScroll) {
79883            if (elementCouldBeScrolled(axis, target)) {
79884                availableScroll += elementScroll;
79885                availableScrollTop += position;
79886            }
79887        }
79888        target = target.parentNode;
79889    } while (
79890    // portaled content
79891    (!targetInLock && target !== document.body) ||
79892        // self content
79893        (targetInLock && (endTarget.contains(target) || endTarget === target)));
79894    if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {
79895        shouldCancelScroll = true;
79896    }
79897    else if (!isDeltaPositive &&
79898        ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {
79899        shouldCancelScroll = true;
79900    }
79901    return shouldCancelScroll;
79902};
79903
79904;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
79905
79906
79907
79908
79909
79910
79911var getTouchXY = function (event) {
79912    return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
79913};
79914var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
79915var extractRef = function (ref) {
79916    return ref && 'current' in ref ? ref.current : ref;
79917};
79918var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
79919var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id, " {pointer-events: none;}\n  .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
79920var SideEffect_idCounter = 0;
79921var lockStack = [];
79922function RemoveScrollSideCar(props) {
79923    var shouldPreventQueue = external_React_.useRef([]);
79924    var touchStartRef = external_React_.useRef([0, 0]);
79925    var activeAxis = external_React_.useRef();
79926    var id = external_React_.useState(SideEffect_idCounter++)[0];
79927    var Style = external_React_.useState(function () { return styleSingleton(); })[0];
79928    var lastProps = external_React_.useRef(props);
79929    external_React_.useEffect(function () {
79930        lastProps.current = props;
79931    }, [props]);
79932    external_React_.useEffect(function () {
79933        if (props.inert) {
79934            document.body.classList.add("block-interactivity-".concat(id));
79935            var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
79936            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
79937            return function () {
79938                document.body.classList.remove("block-interactivity-".concat(id));
79939                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
79940            };
79941        }
79942        return;
79943    }, [props.inert, props.lockRef.current, props.shards]);
79944    var shouldCancelEvent = external_React_.useCallback(function (event, parent) {
79945        if ('touches' in event && event.touches.length === 2) {
79946            return !lastProps.current.allowPinchZoom;
79947        }
79948        var touch = getTouchXY(event);
79949        var touchStart = touchStartRef.current;
79950        var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
79951        var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
79952        var currentAxis;
79953        var target = event.target;
79954        var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
79955        // allow horizontal touch move on Range inputs. They will not cause any scroll
79956        if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
79957            return false;
79958        }
79959        var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
79960        if (!canBeScrolledInMainDirection) {
79961            return true;
79962        }
79963        if (canBeScrolledInMainDirection) {
79964            currentAxis = moveDirection;
79965        }
79966        else {
79967            currentAxis = moveDirection === 'v' ? 'h' : 'v';
79968            canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
79969            // other axis might be not scrollable
79970        }
79971        if (!canBeScrolledInMainDirection) {
79972            return false;
79973        }
79974        if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
79975            activeAxis.current = currentAxis;
79976        }
79977        if (!currentAxis) {
79978            return true;
79979        }
79980        var cancelingAxis = activeAxis.current || currentAxis;
79981        return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
79982    }, []);
79983    var shouldPrevent = external_React_.useCallback(function (_event) {
79984        var event = _event;
79985        if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
79986            // not the last active
79987            return;
79988        }
79989        var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
79990        var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];
79991        // self event, and should be canceled
79992        if (sourceEvent && sourceEvent.should) {
79993            if (event.cancelable) {
79994                event.preventDefault();
79995            }
79996            return;
79997        }
79998        // outside or shard event
79999        if (!sourceEvent) {
80000            var shardNodes = (lastProps.current.shards || [])
80001                .map(extractRef)
80002                .filter(Boolean)
80003                .filter(function (node) { return node.contains(event.target); });
80004            var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
80005            if (shouldStop) {
80006                if (event.cancelable) {
80007                    event.preventDefault();
80008                }
80009            }
80010        }
80011    }, []);
80012    var shouldCancel = external_React_.useCallback(function (name, delta, target, should) {
80013        var event = { name: name, delta: delta, target: target, should: should };
80014        shouldPreventQueue.current.push(event);
80015        setTimeout(function () {
80016            shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
80017        }, 1);
80018    }, []);
80019    var scrollTouchStart = external_React_.useCallback(function (event) {
80020        touchStartRef.current = getTouchXY(event);
80021        activeAxis.current = undefined;
80022    }, []);
80023    var scrollWheel = external_React_.useCallback(function (event) {
80024        shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
80025    }, []);
80026    var scrollTouchMove = external_React_.useCallback(function (event) {
80027        shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
80028    }, []);
80029    external_React_.useEffect(function () {
80030        lockStack.push(Style);
80031        props.setCallbacks({
80032            onScrollCapture: scrollWheel,
80033            onWheelCapture: scrollWheel,
80034            onTouchMoveCapture: scrollTouchMove,
80035        });
80036        document.addEventListener('wheel', shouldPrevent, nonPassive);
80037        document.addEventListener('touchmove', shouldPrevent, nonPassive);
80038        document.addEventListener('touchstart', scrollTouchStart, nonPassive);
80039        return function () {
80040            lockStack = lockStack.filter(function (inst) { return inst !== Style; });
80041            document.removeEventListener('wheel', shouldPrevent, nonPassive);
80042            document.removeEventListener('touchmove', shouldPrevent, nonPassive);
80043            document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
80044        };
80045    }, []);
80046    var removeScrollBar = props.removeScrollBar, inert = props.inert;
80047    return (external_React_.createElement(external_React_.Fragment, null,
80048        inert ? external_React_.createElement(Style, { styles: generateStyle(id) }) : null,
80049        removeScrollBar ? external_React_.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
80050}
80051
80052;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/sidecar.js
80053
80054
80055
80056/* harmony default export */ const sidecar = (exportSidecar(effectCar, RemoveScrollSideCar));
80057
80058;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/Combination.js
80059
80060
80061
80062
80063var ReactRemoveScroll = external_React_.forwardRef(function (props, ref) { return (external_React_.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: sidecar }))); });
80064ReactRemoveScroll.classNames = RemoveScroll.classNames;
80065/* harmony default export */ const Combination = (ReactRemoveScroll);
80066
80067;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/dist/index.module.js
80068
80069
80070
80071
80072
80073
80074
80075
80076
80077
80078
80079
80080
80081
80082
80083
80084
80085
80086
80087
80088
80089
80090
80091
80092
80093
80094
80095
80096
80097
80098
80099
80100
80101
80102
80103
80104
80105
80106
80107
80108
80109
80110
80111const $6cc32821e9371a1c$var$SELECTION_KEYS = [
80112    'Enter',
80113    ' '
80114];
80115const $6cc32821e9371a1c$var$FIRST_KEYS = [
80116    'ArrowDown',
80117    'PageUp',
80118    'Home'
80119];
80120const $6cc32821e9371a1c$var$LAST_KEYS = [
80121    'ArrowUp',
80122    'PageDown',
80123    'End'
80124];
80125const $6cc32821e9371a1c$var$FIRST_LAST_KEYS = [
80126    ...$6cc32821e9371a1c$var$FIRST_KEYS,
80127    ...$6cc32821e9371a1c$var$LAST_KEYS
80128];
80129const $6cc32821e9371a1c$var$SUB_OPEN_KEYS = {
80130    ltr: [
80131        ...$6cc32821e9371a1c$var$SELECTION_KEYS,
80132        'ArrowRight'
80133    ],
80134    rtl: [
80135        ...$6cc32821e9371a1c$var$SELECTION_KEYS,
80136        'ArrowLeft'
80137    ]
80138};
80139const $6cc32821e9371a1c$var$SUB_CLOSE_KEYS = {
80140    ltr: [
80141        'ArrowLeft'
80142    ],
80143    rtl: [
80144        'ArrowRight'
80145    ]
80146};
80147/* -------------------------------------------------------------------------------------------------
80148 * Menu
80149 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$MENU_NAME = 'Menu';
80150const [$6cc32821e9371a1c$var$Collection, $6cc32821e9371a1c$var$useCollection, $6cc32821e9371a1c$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($6cc32821e9371a1c$var$MENU_NAME);
80151const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731b685e72eb] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6cc32821e9371a1c$var$MENU_NAME, [
80152    $6cc32821e9371a1c$var$createCollectionScope,
80153    $cf1ac5d9fe0e8206$export$722aac194ae923,
80154    $d7bdfb9eb0fdf311$export$c7109489551a4f4
80155]);
80156const $6cc32821e9371a1c$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923();
80157const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
80158const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
80159const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
80160const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
80161    const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true  } = props;
80162    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
80163    const [content, setContent] = (0,external_React_.useState)(null);
80164    const isUsingKeyboardRef = (0,external_React_.useRef)(false);
80165    const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange);
80166    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
80167    (0,external_React_.useEffect)(()=>{
80168        // Capture phase ensures we set the boolean before any side effects execute
80169        // in response to the key or pointer event as they might depend on this value.
80170        const handleKeyDown = ()=>{
80171            isUsingKeyboardRef.current = true;
80172            document.addEventListener('pointerdown', handlePointer, {
80173                capture: true,
80174                once: true
80175            });
80176            document.addEventListener('pointermove', handlePointer, {
80177                capture: true,
80178                once: true
80179            });
80180        };
80181        const handlePointer = ()=>isUsingKeyboardRef.current = false
80182        ;
80183        document.addEventListener('keydown', handleKeyDown, {
80184            capture: true
80185        });
80186        return ()=>{
80187            document.removeEventListener('keydown', handleKeyDown, {
80188                capture: true
80189            });
80190            document.removeEventListener('pointerdown', handlePointer, {
80191                capture: true
80192            });
80193            document.removeEventListener('pointermove', handlePointer, {
80194                capture: true
80195            });
80196        };
80197    }, []);
80198    return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuProvider, {
80199        scope: __scopeMenu,
80200        open: open,
80201        onOpenChange: handleOpenChange,
80202        content: content,
80203        onContentChange: setContent
80204    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootProvider, {
80205        scope: __scopeMenu,
80206        onClose: (0,external_React_.useCallback)(()=>handleOpenChange(false)
80207        , [
80208            handleOpenChange
80209        ]),
80210        isUsingKeyboardRef: isUsingKeyboardRef,
80211        dir: direction,
80212        modal: modal
80213    }, children)));
80214};
80215/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$d9b273488cd8ce6f, {
80216    displayName: $6cc32821e9371a1c$var$MENU_NAME
80217});
80218/* -------------------------------------------------------------------------------------------------
80219 * MenuAnchor
80220 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ANCHOR_NAME = 'MenuAnchor';
80221const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80222    const { __scopeMenu: __scopeMenu , ...anchorProps } = props;
80223    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
80224    return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$b688253958b8dfe7, extends_extends({}, popperScope, anchorProps, {
80225        ref: forwardedRef
80226    }));
80227});
80228/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$9fa5ebd18bee4d43, {
80229    displayName: $6cc32821e9371a1c$var$ANCHOR_NAME
80230});
80231/* -------------------------------------------------------------------------------------------------
80232 * MenuPortal
80233 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal';
80234const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
80235    forceMount: undefined
80236});
80237const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
80238    const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container  } = props;
80239    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
80240    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$PortalProvider, {
80241        scope: __scopeMenu,
80242        forceMount: forceMount
80243    }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
80244        present: forceMount || context.open
80245    }, /*#__PURE__*/ (0,external_React_.createElement)($f1701beae083dbae$export$602eac185826482c, {
80246        asChild: true,
80247        container: container
80248    }, children)));
80249};
80250/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$793392f970497feb, {
80251    displayName: $6cc32821e9371a1c$var$PORTAL_NAME
80252});
80253/* -------------------------------------------------------------------------------------------------
80254 * MenuContent
80255 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
80256const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME);
80257const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80258    const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80259    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
80260    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80261    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80262    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Provider, {
80263        scope: props.__scopeMenu
80264    }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
80265        present: forceMount || context.open
80266    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Slot, {
80267        scope: props.__scopeMenu
80268    }, rootContext.modal ? /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootContentModal, extends_extends({}, contentProps, {
80269        ref: forwardedRef
80270    })) : /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootContentNonModal, extends_extends({}, contentProps, {
80271        ref: forwardedRef
80272    })))));
80273});
80274/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80275    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80276    const ref = (0,external_React_.useRef)(null);
80277    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
80278    (0,external_React_.useEffect)(()=>{
80279        const content = ref.current;
80280        if (content) return hideOthers(content);
80281    }, []);
80282    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({}, props, {
80283        ref: composedRefs // we make sure we're not trapping once it's been closed
80284        ,
80285        trapFocus: context.open // make sure to only disable pointer events when open
80286        ,
80287        disableOutsidePointerEvents: context.open,
80288        disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen.
80289        ,
80290        onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>event.preventDefault()
80291        , {
80292            checkForDefaultPrevented: false
80293        }),
80294        onDismiss: ()=>context.onOpenChange(false)
80295    }));
80296});
80297const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80298    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80299    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({}, props, {
80300        ref: forwardedRef,
80301        trapFocus: false,
80302        disableOutsidePointerEvents: false,
80303        disableOutsideScroll: false,
80304        onDismiss: ()=>context.onOpenChange(false)
80305    }));
80306});
80307/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80308    const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
80309    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
80310    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
80311    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
80312    const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
80313    const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
80314    const [currentItemId, setCurrentItemId] = (0,external_React_.useState)(null);
80315    const contentRef = (0,external_React_.useRef)(null);
80316    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentRef, context.onContentChange);
80317    const timerRef = (0,external_React_.useRef)(0);
80318    const searchRef = (0,external_React_.useRef)('');
80319    const pointerGraceTimerRef = (0,external_React_.useRef)(0);
80320    const pointerGraceIntentRef = (0,external_React_.useRef)(null);
80321    const pointerDirRef = (0,external_React_.useRef)('right');
80322    const lastPointerXRef = (0,external_React_.useRef)(0);
80323    const ScrollLockWrapper = disableOutsideScroll ? Combination : external_React_.Fragment;
80324    const scrollLockWrapperProps = disableOutsideScroll ? {
80325        as: dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360,
80326        allowPinchZoom: true
80327    } : undefined;
80328    const handleTypeaheadSearch = (key)=>{
80329        var _items$find, _items$find2;
80330        const search = searchRef.current + key;
80331        const items = getItems().filter((item)=>!item.disabled
80332        );
80333        const currentItem = document.activeElement;
80334        const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem
80335        )) === null || _items$find === void 0 ? void 0 : _items$find.textValue;
80336        const values = items.map((item)=>item.textValue
80337        );
80338        const nextMatch = $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch);
80339        const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch
80340        )) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated
80341        (function updateSearch(value) {
80342            searchRef.current = value;
80343            window.clearTimeout(timerRef.current);
80344            if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
80345            , 1000);
80346        })(search);
80347        if (newItem) /**
80348       * Imperative focus during keydown is risky so we prevent React's batching updates
80349       * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
80350       */ setTimeout(()=>newItem.focus()
80351        );
80352    };
80353    (0,external_React_.useEffect)(()=>{
80354        return ()=>window.clearTimeout(timerRef.current)
80355        ;
80356    }, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
80357    // the last element in the DOM (beacuse of the `Portal`)
80358    $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
80359    const isPointerMovingToSubmenu = (0,external_React_.useCallback)((event)=>{
80360        var _pointerGraceIntentRe, _pointerGraceIntentRe2;
80361        const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
80362        return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
80363    }, []);
80364    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentProvider, {
80365        scope: __scopeMenu,
80366        searchRef: searchRef,
80367        onItemEnter: (0,external_React_.useCallback)((event)=>{
80368            if (isPointerMovingToSubmenu(event)) event.preventDefault();
80369        }, [
80370            isPointerMovingToSubmenu
80371        ]),
80372        onItemLeave: (0,external_React_.useCallback)((event)=>{
80373            var _contentRef$current;
80374            if (isPointerMovingToSubmenu(event)) return;
80375            (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
80376            setCurrentItemId(null);
80377        }, [
80378            isPointerMovingToSubmenu
80379        ]),
80380        onTriggerLeave: (0,external_React_.useCallback)((event)=>{
80381            if (isPointerMovingToSubmenu(event)) event.preventDefault();
80382        }, [
80383            isPointerMovingToSubmenu
80384        ]),
80385        pointerGraceTimerRef: pointerGraceTimerRef,
80386        onPointerGraceIntentChange: (0,external_React_.useCallback)((intent)=>{
80387            pointerGraceIntentRef.current = intent;
80388        }, [])
80389    }, /*#__PURE__*/ (0,external_React_.createElement)(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ (0,external_React_.createElement)($d3863c46a17e8a28$export$20e40289641fbbb6, {
80390        asChild: true,
80391        trapped: trapFocus,
80392        onMountAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onOpenAutoFocus, (event)=>{
80393            var _contentRef$current2;
80394            // when opening, explicitly focus the content area only and leave
80395            // `onEntryFocus` in  control of focusing first item
80396            event.preventDefault();
80397            (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focu
vendor: 5,076 bytes, lines 80397-80492
80397s();
80398        }),
80399        onUnmountAutoFocus: onCloseAutoFocus
80400    }, /*#__PURE__*/ (0,external_React_.createElement)($5cb92bef7577960e$export$177fb62ff3ec1f22, {
80401        asChild: true,
80402        disableOutsidePointerEvents: disableOutsidePointerEvents,
80403        onEscapeKeyDown: onEscapeKeyDown,
80404        onPointerDownOutside: onPointerDownOutside,
80405        onFocusOutside: onFocusOutside,
80406        onInteractOutside: onInteractOutside,
80407        onDismiss: onDismiss
80408    }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, extends_extends({
80409        asChild: true
80410    }, rovingFocusGroupScope, {
80411        dir: rootContext.dir,
80412        orientation: "vertical",
80413        loop: loop,
80414        currentTabStopId: currentItemId,
80415        onCurrentTabStopIdChange: setCurrentItemId,
80416        onEntryFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onEntryFocus, (event)=>{
80417            // only focus first item when using keyboard
80418            if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
80419        })
80420    }), /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, extends_extends({
80421        role: "menu",
80422        "aria-orientation": "vertical",
80423        "data-state": $6cc32821e9371a1c$var$getOpenState(context.open),
80424        "data-radix-menu-content": "",
80425        dir: rootContext.dir
80426    }, popperScope, contentProps, {
80427        ref: composedRefs,
80428        style: {
80429            outline: 'none',
80430            ...contentProps.style
80431        },
80432        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(contentProps.onKeyDown, (event)=>{
80433            // submenu key events bubble through portals. We only care about keys in this menu.
80434            const target = event.target;
80435            const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget;
80436            const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
80437            const isCharacterKey = event.key.length === 1;
80438            if (isKeyDownInside) {
80439                // menus should not be navigated using tab key so we prevent it
80440                if (event.key === 'Tab') event.preventDefault();
80441                if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
80442            } // focus first/last item based on key pressed
80443            const content = contentRef.current;
80444            if (event.target !== content) return;
80445            if (!$6cc32821e9371a1c$var$FIRST_LAST_KEYS.includes(event.key)) return;
80446            event.preventDefault();
80447            const items = getItems().filter((item)=>!item.disabled
80448            );
80449            const candidateNodes = items.map((item)=>item.ref.current
80450            );
80451            if ($6cc32821e9371a1c$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse();
80452            $6cc32821e9371a1c$var$focusFirst(candidateNodes);
80453        }),
80454        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, (event)=>{
80455            // clear search buffer when leaving the menu
80456            if (!event.currentTarget.contains(event.target)) {
80457                window.clearTimeout(timerRef.current);
80458                searchRef.current = '';
80459            }
80460        }),
80461        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
80462            const target = event.target;
80463            const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will
80464            // always return `0` on a pointer event.
80465            if (event.currentTarget.contains(target) && pointerXHasChanged) {
80466                const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';
80467                pointerDirRef.current = newDir;
80468                lastPointerXRef.current = event.clientX;
80469            }
80470        }))
80471    })))))));
80472});
80473/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$479f0f2f71193efe, {
80474    displayName: $6cc32821e9371a1c$var$CONTENT_NAME
80475});
80476/* -------------------------------------------------------------------------------------------------
80477 * MenuGroup
80478 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$GROUP_NAME = 'MenuGroup';
80479const $6cc32821e9371a1c$export$22a631d1f72787bb = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80480    const { __scopeMenu: __scopeMenu , ...groupProps } = props;
80481    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({
80482        role: "group"
80483    }, groupProps, {
80484        ref: forwardedRef
80485    }));
80486});
80487/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$22a631d1f72787bb, {
80488    displayName: $6cc32821e9371a1c$var$GROUP_NAME
80489});
80490/* -------------------------------------------------------------------------------------------------
80491 * MenuLabel
80492 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$LABEL_NAME 
80492= 'MenuLabel';
80493const $6cc32821e9371a1c$export$dd37bec0e8a99143 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80494    const { __scopeMenu: __scopeMenu , ...labelProps } = props;
80495    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, labelProps, {
80496        ref: forwardedRef
80497    }));
80498});
80499/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$dd37bec0e8a99143, {
80500    displayName: $6cc32821e9371a1c$var$LABEL_NAME
80501});
80502/* -------------------------------------------------------------------------------------------------
80503 * MenuItem
80504 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem';
80505const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect';
80506const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80507    const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
80508    const ref = (0,external_React_.useRef)(null);
80509    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
80510    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
80511    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
80512    const isPointerDownRef = (0,external_React_.useRef)(false);
80513    const handleSelect = ()=>{
80514        const menuItem = ref.current;
80515        if (!disabled && menuItem) {
80516            const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, {
80517                bubbles: true,
80518                cancelable: true
80519            });
80520            menuItem.addEventListener($6cc32821e9371a1c$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
80521            , {
80522                once: true
80523            });
80524            index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(menuItem, itemSelectEvent);
80525            if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
80526            else rootContext.onClose();
80527        }
80528    };
80529    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuItemImpl, extends_extends({}, itemProps, {
80530        ref: composedRefs,
80531        disabled: disabled,
80532        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, handleSelect),
80533        onPointerDown: (event)=>{
80534            var _props$onPointerDown;
80535            (_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event);
80536            isPointerDownRef.current = true;
80537        },
80538        onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event)=>{
80539            var _event$currentTarget;
80540            // Pointer down can move to a different menu item which should activate it on pointer up.
80541            // We dispatch a click for selection to allow composition with click based triggers and to
80542            // prevent Firefox from getting stuck in text selection mode when the menu closes.
80543            if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click();
80544        }),
80545        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
80546            const isTypingAhead = contentContext.searchRef.current !== '';
80547            if (disabled || isTypingAhead && event.key === ' ') return;
80548            if ($6cc32821e9371a1c$var$SELECTION_KEYS.includes(event.key)) {
80549                event.currentTarget.click();
80550                /**
80551         * We prevent default browser behaviour for selection keys as they should trigger
80552         * a selection only:
80553         * - prevents space from scrolling the page.
80554         * - if keydown causes focus to move, prevents keydown from firing on the new target.
80555         */ event.preventDefault();
80556            }
80557        })
80558    }));
80559});
80560/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$2ce376c2cc3355c8, {
80561    displayName: $6cc32821e9371a1c$var$ITEM_NAME
80562});
80563/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80564    const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
80565    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu);
80566    const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
80567    const ref = (0,external_React_.useRef)(null);
80568    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
80569    const [isFocused, setIsFocused] = (0,external_React_.useState)(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
80570    const [textContent, setTextContent] = (0,external_React_.useState)('');
80571    (0,external_React_.useEffect)(()=>{
80572        const menuItem = ref.current;
80573        if (menuItem) {
80574            var _menuItem$textContent;
80575            setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
80576        }
80577    }, [
80578        itemProps.children
80579    ]);
80580    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.ItemSlot, {
80581        scope: __scopeMenu,
80582        disabled: disabled,
80583        textValue: textValue !== null && textValue !== void 0 ? textValue : textContent
80584    }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, extends_extends({
80585        asChild: true
80586    }, rovingFocusGroupScope, {
80587        focusable: !disabled
80588    }), /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({
80589        role: "menuitem",
80590        "data-highlighted": isFocused ? '' : undefined,
80591        "aria-disabled": disabled || undefined,
80592        "data-disabled": disabled ? '' : undefined
80593    }, itemProps, {
80594        ref: composedRefs,
80595        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
80596            if (disabled) contentContext.onItemLeave(event);
80597            else {
80598                contentContext.onItemEnter(event);
80599                if (!event.defaultPrevented) {
80600                    const item = event.currentTarget;
80601                    item.focus();
80602                }
80603            }
80604        })),
80605        onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event)
80606        )),
80607        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>setIsFocused(true)
80608        ),
80609        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsFocused(false)
80610        )
80611    }))));
80612});
80613/* -------------------------------------------------------------------------------------------------
80614 * MenuCheckboxItem
80615 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME = 'MenuCheckboxItem';
80616const $6cc32821e9371a1c$export$f6f243521332502d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80617    const { checked: checked = false , onCheckedChange: onCheckedChange , ...checkboxItemProps } = props;
80618    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$ItemIndicatorProvider, {
80619        scope: props.__scopeMenu,
80620        checked: checked
80621    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ce376c2cc3355c8, extends_extends({
80622        role: "menuitemcheckbox",
80623        "aria-checked": $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'mixed' : checked
80624    }, checkboxItemProps, {
80625        ref: forwardedRef,
80626        "data-state": $6cc32821e9371a1c$var$getCheckedState(checked),
80627        onSelect: $e42e1063c40fb3ef$export$b9ecd428b558ff10(checkboxItemProps.onSelect, ()=>onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange($6cc32821e9371a1c$var$isIndeterminate(checked) ? true : !checked)
80628        , {
80629            checkForDefaultPrevented: false
80630        })
80631    })));
80632});
80633/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$f6f243521332502d, {
80634    displayName: $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME
80635});
80636/* -------------------------------------------------------------------------------------------------
80637 * MenuRadioGroup
80638 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_GROUP_NAME = 'MenuRadioGroup';
80639const [$6cc32821e9371a1c$var$RadioGroupProvider, $6cc32821e9371a1c$var$useRadioGroupContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$RADIO_GROUP_NAME, {
80640    value: undefined,
80641    onValueChange: ()=>{}
80642});
80643const $6cc32821e9371a1c$export$ea2200c9eee416b3 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80644    const { value: value , onValueChange: onValueChange , ...groupProps } = props;
80645    const handleValueChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onValueChange);
80646    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$RadioGroupProvider, {
80647        scope: props.__scopeMenu,
80648        value: value,
80649        onValueChange: handleValueChange
80650    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$22a631d1f72787bb, extends_extends({}, groupProps, {
80651        ref: forwardedRef
80652    }
80652)));
80653});
80654/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$ea2200c9eee416b3, {
80655    displayName: $6cc32821e9371a1c$var$RADIO_GROUP_NAME
80656});
80657/* -------------------------------------------------------------------------------------------------
80658 * MenuRadioItem
80659 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_ITEM_NAME = 'MenuRadioItem';
80660const $6cc32821e9371a1c$export$69bd225e9817f6d0 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80661    const { value: value , ...radioItemProps } = props;
80662    const context = $6cc32821e9371a1c$var$useRadioGroupContext($6cc32821e9371a1c$var$RADIO_ITEM_NAME, props.__scopeMenu);
80663    const checked = value === context.value;
80664    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$ItemIndicatorProvider, {
80665        scope: props.__scopeMenu,
80666        checked: checked
80667    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ce376c2cc3355c8, extends_extends({
80668        role: "menuitemradio",
80669        "aria-checked": checked
80670    }, radioItemProps, {
80671        ref: forwardedRef,
80672        "data-state": $6cc32821e9371a1c$var$getCheckedState(checked),
80673        onSelect: $e42e1063c40fb3ef$export$b9ecd428b558ff10(radioItemProps.onSelect, ()=>{
80674            var _context$onValueChang;
80675            return (_context$onValueChang = context.onValueChange) === null || _context$onValueChang === void 0 ? void 0 : _context$onValueChang.call(context, value);
80676        }, {
80677            checkForDefaultPrevented: false
80678        })
80679    })));
80680});
80681/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$69bd225e9817f6d0, {
80682    displayName: $6cc32821e9371a1c$var$RADIO_ITEM_NAME
80683});
80684/* -------------------------------------------------------------------------------------------------
80685 * MenuItemIndicator
80686 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator';
80687const [$6cc32821e9371a1c$var$ItemIndicatorProvider, $6cc32821e9371a1c$var$useItemIndicatorContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, {
80688    checked: false
80689});
80690const $6cc32821e9371a1c$export$a2593e23056970a3 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80691    const { __scopeMenu: __scopeMenu , forceMount: forceMount , ...itemIndicatorProps } = props;
80692    const indicatorContext = $6cc32821e9371a1c$var$useItemIndicatorContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, __scopeMenu);
80693    return /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
80694        present: forceMount || $6cc32821e9371a1c$var$isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true
80695    }, /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.span, extends_extends({}, itemIndicatorProps, {
80696        ref: forwardedRef,
80697        "data-state": $6cc32821e9371a1c$var$getCheckedState(indicatorContext.checked)
80698    })));
80699});
80700/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$a2593e23056970a3, {
80701    displayName: $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME
80702});
80703/* -------------------------------------------------------------------------------------------------
80704 * MenuSeparator
80705 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SEPARATOR_NAME = 'MenuSeparator';
80706const $6cc32821e9371a1c$export$1cec7dcdd713e220 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80707    const { __scopeMenu: __scopeMenu , ...separatorProps } = props;
80708    return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({
80709        role: "separator",
80710        "aria-orientation": "horizontal"
80711    }, separatorProps, {
80712        ref: forwardedRef
80713    }));
80714});
80715/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$1cec7dcdd713e220, {
80716    displayName: $6cc32821e9371a1c$var$SEPARATOR_NAME
80717});
80718/* -------------------------------------------------------------------------------------------------
80719 * MenuArrow
80720 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ARROW_NAME = 'MenuArrow';
80721const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80722    const { __scopeMenu: __scopeMenu , ...arrowProps } = props;
80723    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
80724    return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$21b
8072407c8f274aebd5, extends_extends({}, popperScope, arrowProps, {
80725        ref: forwardedRef
80726    }));
80727});
80728/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$bcdda4773debf5fa, {
80729    displayName: $6cc32821e9371a1c$var$ARROW_NAME
80730});
80731/* -------------------------------------------------------------------------------------------------
80732 * MenuSub
80733 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
80734const [$6cc32821e9371a1c$var$MenuSubProvider, $6cc32821e9371a1c$var$useMenuSubContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME);
80735const $6cc32821e9371a1c$export$71bdb9d1e2909932 = (props)=>{
80736    const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange  } = props;
80737    const parentMenuContext = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_NAME, __scopeMenu);
80738    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
80739    const [trigger, setTrigger] = (0,external_React_.useState)(null);
80740    const [content, setContent] = (0,external_React_.useState)(null);
80741    const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange); // Prevent the parent menu from reopening with open submenus.
80742    (0,external_React_.useEffect)(()=>{
80743        if (parentMenuContext.open === false) handleOpenChange(false);
80744        return ()=>handleOpenChange(false)
80745        ;
80746    }, [
80747        parentMenuContext.open,
80748        handleOpenChange
80749    ]);
80750    return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuProvider, {
80751        scope: __scopeMenu,
80752        open: open,
80753        onOpenChange: handleOpenChange,
80754        content: content,
80755        onContentChange: setContent
80756    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuSubProvider, {
80757        scope: __scopeMenu,
80758        contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
80759        triggerId: $1746a345f3d73bb7$export$f680877a34711e37(),
80760        trigger: trigger,
80761        onTriggerChange: setTrigger
80762    }, children)));
80763};
80764/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$71bdb9d1e2909932, {
80765    displayName: $6cc32821e9371a1c$var$SUB_NAME
80766});
80767/* -------------------------------------------------------------------------------------------------
80768 * MenuSubTrigger
80769 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
80770const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80771    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
80772    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
80773    const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
80774    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
80775    const openTimerRef = (0,external_React_.useRef)(null);
80776    const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange  } = contentContext;
80777    const scope = {
80778        __scopeMenu: props.__scopeMenu
80779    };
80780    const clearOpenTimer = (0,external_React_.useCallback)(()=>{
80781        if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
80782        openTimerRef.current = null;
80783    }, []);
80784    (0,external_React_.useEffect)(()=>clearOpenTimer
80785    , [
80786        clearOpenTimer
80787    ]);
80788    (0,external_React_.useEffect)(()=>{
80789        const pointerGraceTimer = pointerGraceTimerRef.current;
80790        return ()=>{
80791            window.clearTimeout(pointerGraceTimer);
80792            onPointerGraceIntentChange(null);
80793        };
80794    }, [
80795        pointerGraceTimerRef,
80796        onPointerGraceIntentChange
80797    ]);
80798    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$9fa5ebd18bee4d43, extends_extends({
80799        asChild: true
80800    }, scope), /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuItemImpl, extends_extends({
80801        id: subContext.triggerId,
80802        "aria-haspopup": "menu",
80803        "aria-expanded": context.open,
80804        "aria-controls": subContext.contentId,
80805        "data-state": $6cc32821e9371a1c$var$getOpenState(context.open)
80806    }, props, {
vendor: 11,772 bytes, lines 80807-81013
80807        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, subContext.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from
80808        ,
80809        onClick: (event)=>{
80810            var _props$onClick;
80811            (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
80812            if (props.disabled || event.defaultPrevented) return;
80813            /**
80814       * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
80815       * and we rely heavily on `onFocusOutside` for submenus to close when switching
80816       * between separate submenus.
80817       */ event.currentTarget.focus();
80818            if (!context.open) context.onOpenChange(true);
80819        },
80820        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
80821            contentContext.onItemEnter(event);
80822            if (event.defaultPrevented) return;
80823            if (!props.disabled && !context.open && !openTimerRef.current) {
80824                contentContext.onPointerGraceIntentChange(null);
80825                openTimerRef.current = window.setTimeout(()=>{
80826                    context.onOpenChange(true);
80827                    clearOpenTimer();
80828                }, 100);
80829            }
80830        })),
80831        onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>{
80832            var _context$content;
80833            clearOpenTimer();
80834            const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect();
80835            if (contentRect) {
80836                var _context$content2;
80837                // TODO: make sure to update this when we change positioning logic
80838                const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side;
80839                const rightSide = side === 'right';
80840                const bleed = rightSide ? -5 : 5;
80841                const contentNearEdge = contentRect[rightSide ? 'left' : 'right'];
80842                const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];
80843                contentContext.onPointerGraceIntentChange({
80844                    area: [
80845                        // consistently within polygon bounds
80846                        {
80847                            x: event.clientX + bleed,
80848                            y: event.clientY
80849                        },
80850                        {
80851                            x: contentNearEdge,
80852                            y: contentRect.top
80853                        },
80854                        {
80855                            x: contentFarEdge,
80856                            y: contentRect.top
80857                        },
80858                        {
80859                            x: contentFarEdge,
80860                            y: contentRect.bottom
80861                        },
80862                        {
80863                            x: contentNearEdge,
80864                            y: contentRect.bottom
80865                        }
80866                    ],
80867                    side: side
80868                });
80869                window.clearTimeout(pointerGraceTimerRef.current);
80870                pointerGraceTimerRef.current = window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null)
80871                , 300);
80872            } else {
80873                contentContext.onTriggerLeave(event);
80874                if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened.
80875                contentContext.onPointerGraceIntentChange(null);
80876            }
80877        })),
80878        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
80879            const isTypingAhead = contentContext.searchRef.current !== '';
80880            if (props.disabled || isTypingAhead && event.key === ' ') return;
80881            if ($6cc32821e9371a1c$var$SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
80882                var _context$content3;
80883                context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction
80884                // so we ensure content is given focus again when switching to keyboard.
80885                (_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling
80886                event.preventDefault();
80887            }
80888        })
80889    })));
80890});
80891/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$5fbbb3ba7297405f, {
80892    displayName: $6cc32821e9371a1c$var$SUB_TRIGGER_NAME
80893});
80894/* -------------------------------------------------------------------------------------------------
80895 * MenuSubContent
80896 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_CONTENT_NAME = 'MenuSubContent';
80897const $6cc32821e9371a1c$export$e7142ab31822bde6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
80898    const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80899    const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props;
80900    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80901    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
80902    const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_CONTENT_NAME, props.__scopeMenu);
80903    const ref = (0,external_React_.useRef)(null);
80904    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
80905    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Provider, {
80906        scope: props.__scopeMenu
80907    }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
80908        present: forceMount || context.open
80909    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Slot, {
80910        scope: props.__scopeMenu
80911    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({
80912        id: subContext.contentId,
80913        "aria-labelledby": subContext.triggerId
80914    }, subContentProps, {
80915        ref: composedRefs,
80916        align: "start",
80917        side: rootContext.dir === 'rtl' ? 'left' : 'right',
80918        disableOutsidePointerEvents: false,
80919        disableOutsideScroll: false,
80920        trapFocus: false,
80921        onOpenAutoFocus: (event)=>{
80922            var _ref$current;
80923            // when opening a submenu, focus content for keyboard users only
80924            if (rootContext.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
80925            event.preventDefault();
80926        } // The menu might close because of focusing another menu item in the parent menu. We
80927        ,
80928        onCloseAutoFocus: (event)=>event.preventDefault()
80929        ,
80930        onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>{
80931            // We prevent closing when the trigger is focused to avoid triggering a re-open animation
80932            // on pointer interaction.
80933            if (event.target !== subContext.trigger) context.onOpenChange(false);
80934        }),
80935        onEscapeKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onEscapeKeyDown, (event)=>{
80936            rootContext.onClose(); // ensure pressing escape in submenu doesn't escape full screen mode
80937            event.preventDefault();
80938        }),
80939        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
80940            // Submenu key events bubble through portals. We only care about keys in this menu.
80941            const isKeyDownInside = event.currentTarget.contains(event.target);
80942            const isCloseKey = $6cc32821e9371a1c$var$SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
80943            if (isKeyDownInside && isCloseKey) {
80944                var _subContext$trigger;
80945                context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus`
80946                (_subContext$trigger = subContext.trigger) === null || _subContext$trigger === void 0 || _subContext$trigger.focus(); // prevent window from scrolling
80947                event.preventDefault();
80948            }
80949        })
80950    })))));
80951});
80952/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$e7142ab31822bde6, {
80953    displayName: $6cc32821e9371a1c$var$SUB_CONTENT_NAME
80954});
80955/* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) {
80956    return open ? 'open' : 'closed';
80957}
80958function $6cc32821e9371a1c$var$isIndeterminate(checked) {
80959    return checked === 'indeterminate';
80960}
80961function $6cc32821e9371a1c$var$getCheckedState(checked) {
80962    return $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
80963}
80964function $6cc32821e9371a1c$var$focusFirst(candidates) {
80965    const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
80966    for (const candidate of candidates){
80967        // if focus is already where we want to go, we don't want to keep going through the candidates
80968        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
80969        candidate.focus();
80970        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
80971    }
80972}
80973/**
80974 * Wraps an array around itself at a given start index
80975 * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
80976 */ function $6cc32821e9371a1c$var$wrapArray(array, startIndex) {
80977    return array.map((_, index)=>array[(startIndex + index) % array.length]
80978    );
80979}
80980/**
80981 * This is the "meat" of the typeahead matching logic. It takes in all the values,
80982 * the search and the current match, and returns the next match (or `undefined`).
80983 *
80984 * We normalize the search because if a user has repeatedly pressed a character,
80985 * we want the exact same behavior as if we only had that one character
80986 * (ie. cycle through options starting with that character)
80987 *
80988 * We also reorder the values by wrapping the array around the current match.
80989 * This is so we always look forward from the current match, and picking the first
80990 * match will always be the correct one.
80991 *
80992 * Finally, if the normalized search is exactly one character, we exclude the
80993 * current match from the values because otherwise it would be the first to match always
80994 * and focus would never move. This is as opposed to the regular case, where we
80995 * don't want focus to move if the current match still matches.
80996 */ function $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch) {
80997    const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
80998    );
80999    const normalizedSearch = isRepeated ? search[0] : search;
81000    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
81001    let wrappedValues = $6cc32821e9371a1c$var$wrapArray(values, Math.max(currentMatchIndex, 0));
81002    const excludeCurrentMatch = normalizedSearch.length === 1;
81003    if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch
81004    );
81005    const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
81006    );
81007    return nextMatch !== currentMatch ? nextMatch : undefined;
81008}
81009// Determine if a point is inside of a polygon.
81010// Based on https://github.com/substack/point-in-polygon
81011function $6cc32821e9371a1c$var$isPointInPolygon(point, polygon) {
81012    const { x: x , y: y  } = point;
81013    let inside = false;
81014    for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
81015        const xi = polygon[i].x;
81016        const yi = polygon[i].y;
81017        const xj = polygon[j].x;
81018        const yj = polygon[j].y; // prettier-ignore
81019        const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
81020        if (intersect) inside = !inside;
81021    }
81022    return inside;
81023}
81024function $6cc32821e9371a1c$var$isPointerInGraceArea(event, area) {
81025    if (!area) return false;
81026    const cursorPos = {
81027        x: event.clientX,
81028        y: event.clientY
81029    };
81030    return $6cc32821e9371a1c$var$isPointInPolygon(cursorPos, area);
81031}
81032function $6cc32821e9371a1c$var$whenMouse(handler) {
81033    return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
81034    ;
81035}
81036const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
81037const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
81038const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
81039const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
81040const $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 = $6cc32821e9371a1c$export$22a631d1f72787bb;
81041const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
81042const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
81043const $6cc32821e9371a1c$export$16ce288f89fa631c = $6cc32821e9371a1c$export$f6f243521332502d;
81044const $6cc32821e9371a1c$export$a98f0dcb43a68a25 = $6cc32821e9371a1c$export$ea2200c9eee416b3;
81045const $6cc32821e9371a1c$export$371ab307eab489c0 = $6cc32821e9371a1c$export$69bd225e9817f6d0;
81046const $6cc32821e9371a1c$export$c3468e2714d175fa = $6cc32821e9371a1c$export$a2593e23056970a3;
81047const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
81048const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
81049const $6cc32821e9371a1c$export$d7a01e11500dfb6f = $6cc32821e9371a1c$export$71bdb9d1e2909932;
81050const $6cc32821e9371a1c$export$2ea8a7a591ac5eac = $6cc32821e9371a1c$export$5fbbb3ba7297405f;
81051const $6cc32821e9371a1c$export$6d4de93b380beddf = $6cc32821e9371a1c$export$e7142ab31822bde6;
81052
81053
81054
81055
81056
81057
81058;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/dist/index.module.js
81059
81060
81061
81062
81063
81064
81065
81066
81067
81068
81069
81070
81071
81072
81073
81074
81075
81076
81077
81078
81079/* -------------------------------------------------------------------------------------------------
81080 * DropdownMenu
81081 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$DROPDOWN_MENU_NAME = 'DropdownMenu';
81082const [$d08ef79370b62062$var$createDropdownMenuContext, $d08ef79370b62062$export$c0623cd925aeb687] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d08ef79370b62062$var$DROPDOWN_MENU_NAME, [
81083    $6cc32821e9371a1c$export$4027731b685e72eb
81084]);
81085const $d08ef79370b62062$var$useMenuScope = $6cc32821e9371a1c$export$4027731b685e72eb();
81086const [$d08ef79370b62062$var$DropdownMenuProvider, $d08ef79370b62062$var$useDropdownMenuContext] = $d08ef79370b62062$var$createDropdownMenuContext($d08ef79370b62062$var$DROPDOWN_MENU_NAME);
81087const $d08ef79370b62062$export$e44a253a59704894 = (props)=>{
81088    const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , dir: dir , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true  } = props;
81089    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81090    const triggerRef = (0,external_React_.useRef)(null);
81091    const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
81092        prop: openProp,
81093        defaultProp: defaultOpen,
81094        onChange: onOpenChange
81095    });
81096    return /*#__PURE__*/ (0,external_React_.createElement)($d08ef79370b62062$var$DropdownMenuProvider, {
81097        scope: __scopeDropdownMenu,
81098        triggerId: $1746a345f3d73bb7$export$f680877a34711e37(),
81099        triggerRef: triggerRef,
81100        contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
81101        open: open,
81102        onOpenChange: setOpen,
81103        onOpenToggle: (0,external_React_.useCallback)(()=>setOpen((prevOpen)=>!prevOpen
81104            )
81105        , [
81106            setOpen
81107        ]),
81108        modal: modal
81109    }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$be92b6f5f03c0fe9, extends_extends({}, menuScope, {
81110        open: open,
81111        onOpenChange: setOpen,
81112        dir: dir,
81113        modal: modal
81114    }), children));
81115};
81116/*#__PURE__*/ Object.assign($d08ef79370b62062$export$e44a253a59704894, {
81117    displayName: $d08ef79370b62062$var$DROPDOWN_MENU_NAME
81118});
81119/* -------------------------------------------------------------------------------------------------
81120 * DropdownMenuTrigger
81121 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$TRIGGER_NAME = 'DropdownMenuTrigger';
81122const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81123    const { __scopeDropdownMenu: __scopeDropdownMenu , disabled: disabled = false , ...triggerProps } = props;
81124    const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$TRIGGER_NAME, __scopeDropdownMenu);
81125    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81126    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$b688253958b8dfe7, extends_extends({
81127        asChild: true
81128    }, menuScope), /*#__PURE__*/ (0,external_React_.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.button, extends_extends({
81129        type: "button",
81130        id: context.triggerId,
81131        "aria-haspopup": "menu",
81132        "aria-expanded": context.open,
81133        "aria-controls": context.open ? context.contentId : undefined,
81134        "data-state": context.open ? 'open' : 'closed',
81135        "data-disabled": disabled ? '' : undefined,
81136        disabled: disabled
81137    }, triggerProps, {
81138        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, context.triggerRef),
81139        onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{
81140            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
81141            // but not when the control key is pressed (avoiding MacOS right click)
81142            if (!disabled && event.button === 0 && event.ctrlKey === false) {
81143                context.onOpenToggle(); // prevent trigger focusing when opening
81144                // this allows the content to be given focus without competition
81145                if (!context.open) event.preventDefault();
81146            }
81147        }),
81148        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
81149            if (disabled) return;
81150            if ([
81151                'Enter',
81152                ' '
81153            ].includes(event.key)) context.onOpenToggle();
81154            if (event.key === 'ArrowDown') context.onOpenChange(true); // prevent keydown from scrolling window / first focused item to execute
81155            // that keydown (inadvertently closing the menu)
81156            if ([
81157                'Enter',
81158                ' ',
81159                'ArrowDown'
81160            ].includes(event.key)) event.preventDefault();
81161        })
81162    })));
81163});
81164/*#__PURE__*/ Object.assign($d08ef79370b62062$export$d2469213b3befba9, {
81165    displayName: $d08ef79370b62062$var$TRIGGER_NAME
81166});
81167/* -------------------------------------------------------------------------------------------------
81168 * DropdownMenuPortal
81169 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$PORTAL_NAME = 'DropdownMenuPortal';
81170const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
81171    const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
81172    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81173    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$602eac185826482c, extends_extends({}, menuScope, portalProps));
81174};
81175/*#__PURE__*/ Object.assign($d08ef79370b62062$export$cd369b4d4d54efc9, {
81176    displayName: $d08ef79370b62062$var$PORTAL_NAME
81177});
81178/* -------------------------------------------------------------------------------------------------
81179 * DropdownMenuContent
81180 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
81181const $d08ef79370b62062$export$6e76d93a37c01248 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81182    const { __scopeDropdownMenu: __scopeDropdownMenu , ...contentProps } = props;
81183    const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$CONTENT_NAME, __scopeDropdownMenu);
81184    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81185    const hasInteractedOutsideRef = (0,external_React_.useRef)(false);
81186    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$7c6e2c02157bb7d2, extends_extends({
81187        id: context.contentId,
81188        "aria-labelledby": context.triggerId
81189    }, menuScope, contentProps, {
81190        ref: forwardedRef,
81191        onCloseAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onCloseAutoFocus, (event)=>{
81192            var _context$triggerRef$c;
81193            if (!hasInteractedOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
81194            hasInteractedOutsideRef.current = false; // Always prevent auto focus because we either focus manually or want user agent focus
81195            event.preventDefault();
81196        }),
81197        onInteractOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onInteractOutside, (event)=>{
81198            const originalEvent = event.detail.originalEvent;
81199            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
81200            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
81201            if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
81202        }),
81203        style: {
81204            ...props.style,
81205            '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
81206            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
81207            '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
81208            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
81209            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)'
81210        }
81211    }));
81212});
81213/*#__PURE__*/ Object.assign($d08ef79370b62062$export$6e76d93a37c01248, {
81214    displayName: $d08ef79370b62062$var$CONTENT_NAME
81215});
81216/* -------------------------------------------------------------------------------------------------
81217 * DropdownMenuGroup
81218 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$GROUP_NAME = 'DropdownMenuGroup';
81219const $d08ef79370b62062$export$246bebaba3a2f70e = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81220    const { __scopeDropdownMenu: __scopeDropdownMenu , ...groupProps } = props;
81221    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81222    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$eb2fcfdbd7ba97d4, extends_extends({}, menuScope, groupProps, {
81223        ref: forwardedRef
81224    }));
81225});
81226/*#__PURE__*/ Object.assign($d08ef79370b62062$export$246bebaba3a2f70e, {
81227    displayName: $d08ef79370b62062$var$GROUP_NAME
81228});
81229/* -------------------------------------------------------------------------------------------------
81230 * DropdownMenuLabel
81231 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$LABEL_NAME = 'DropdownMenuLabel';
81232const $d08ef79370b62062$export$76e48c5b57f24495 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81233    const { __scopeDropdownMenu: __scopeDropdownMenu , ...labelProps } = props;
81234    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81235    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$b04be29aa201d4f5, extends_extends({}, menuScope, labelProps, {
81236        ref: forwardedRef
81237    }));
81238});
81239/*#__PURE__*/ Object.assign($d08ef79370b62062$export$76e48c5b57f24495, {
81240    displayName: $d08ef79370b62062$var$LABEL_NAME
81241});
81242/* -------------------------------------------------------------------------------------------------
81243 * DropdownMenuItem
81244 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$ITEM_NAME = 'DropdownMenuItem';
81245const $d08ef79370b62062$export$ed97964d1871885d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81246    const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemProps } = props;
81247    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81248    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$6d08773d2e66f8f2, extends_extends({}, menuScope, itemProps, {
81249        ref: forwardedRef
81250    }));
81251});
81252/*#__PURE__*/ Object.assign($d08ef79370b62062$export$ed97964d1871885d, {
81253    displayName: $d08ef79370b62062$var$ITEM_NAME
81254});
81255/* -------------------------------------------------------------------------------------------------
81256 * DropdownMenuCheckboxItem
81257 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
81258const $d08ef79370b62062$export$53a69729da201fa9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81259    const { __scopeDropdownMenu: __scopeDropdownMenu , ...checkboxItemProps } = props;
81260    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81261    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$16ce288f89fa631c, extends_extends({}, menuScope, checkboxItemProps, {
81262        ref: forwardedRef
81263    }));
81264});
81265/*#__PURE__*/ Object.assign($d08ef79370b62062$export$53a69729da201fa9, {
81266    displayName: $d08ef79370b62062$var$CHECKBOX_ITEM_NAME
81267});
81268/* -------------------------------------------------------------------------------------------------
81269 * DropdownMenuRadioGroup
81270 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
81271const $d08ef79370b62062$export$3323ad73d55f587e = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81272    const { __scopeDropdownMenu: __scopeDropdownMenu , ...radioGroupProps } = props;
81273    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81274    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$a98f0dcb43a68a25, extends_extends({}, menuScope, radioGroupProps, {
81275        ref: forwardedRef
81276    }));
81277});
81278/*#__PURE__*/ Object.assign($d08ef79370b62062$export$3323ad73d55f587e, {
81279    displayName: $d08ef79370b62062$var$RADIO_GROUP_NAME
81280});
81281/* -------------------------------------------------------------------------------------------------
81282 * DropdownMenuRadioItem
81283 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
81284const $d08ef79370b62062$export$e4f69b41b1637536 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81285    const { __scopeDropdownMenu: __scopeDropdownMenu , ...radioItemProps } = props;
81286    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81287    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$371ab307eab489c0, extends_extends({}, menuScope, radioItemProps, {
81288        ref: forwardedRef
81289    }));
81290});
81291/*#__PURE__*/ Object.assign($d08ef79370b62062$export$e4f69b41b1637536, {
81292    displayName: $d08ef79370b62062$var$RADIO_ITEM_NAME
81293});
81294/* -------------------------------------------------------------------------------------------------
81295 * DropdownMenuItemIndicator
81296 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$INDICATOR_NAME 
81296= 'DropdownMenuItemIndicator';
81297const $d08ef79370b62062$export$42355ae145153fb6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81298    const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemIndicatorProps } = props;
81299    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81300    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$c3468e2714d175fa, extends_extends({}, menuScope, itemIndicatorProps, {
81301        ref: forwardedRef
81302    }));
81303});
81304/*#__PURE__*/ Object.assign($d08ef79370b62062$export$42355ae145153fb6, {
81305    displayName: $d08ef79370b62062$var$INDICATOR_NAME
81306});
81307/* -------------------------------------------------------------------------------------------------
81308 * DropdownMenuSeparator
81309 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SEPARATOR_NAME = 'DropdownMenuSeparator';
81310const $d08ef79370b62062$export$da160178fd3bc7e9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81311    const { __scopeDropdownMenu: __scopeDropdownMenu , ...separatorProps } = props;
81312    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81313    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$1ff3c3f08ae963c0, extends_extends({}, menuScope, separatorProps, {
81314        ref: forwardedRef
81315    }));
81316});
81317/*#__PURE__*/ Object.assign($d08ef79370b62062$export$da160178fd3bc7e9, {
81318    displayName: $d08ef79370b62062$var$SEPARATOR_NAME
81319});
81320/* -------------------------------------------------------------------------------------------------
81321 * DropdownMenuArrow
81322 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$ARROW_NAME = 'DropdownMenuArrow';
81323const $d08ef79370b62062$export$34b8980744021ec5 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81324    const { __scopeDropdownMenu: __scopeDropdownMenu , ...arrowProps } = props;
81325    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81326    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$21b07c8f274aebd5, extends_extends({}, menuScope, arrowProps, {
81327        ref: forwardedRef
81328    }));
81329});
81330/*#__PURE__*/ Object.assign($d08ef79370b62062$export$34b8980744021ec5, {
81331    displayName: $d08ef79370b62062$var$ARROW_NAME
81332});
81333/* -------------------------------------------------------------------------------------------------
81334 * DropdownMenuSub
81335 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$2f307d81a64f5442 = (props)=>{
81336    const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , open: openProp , onOpenChange: onOpenChange , defaultOpen: defaultOpen  } = props;
81337    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81338    const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
81339        prop: openProp,
81340        defaultProp: defaultOpen,
81341        onChange: onOpenChange
81342    });
81343    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$d7a01e11500dfb6f, extends_extends({}, menuScope, {
81344        open: open,
81345        onOpenChange: setOpen
81346    }), children);
81347};
81348/* -------------------------------------------------------------------------------------------------
81349 * DropdownMenuSubTrigger
81350 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
81351const $d08ef79370b62062$export$21dcb7ec56f874cf = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81352    const { __scopeDropdownMenu: __scopeDropdownMenu , ...subTriggerProps } = props;
81353    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81354    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ea8a7a591ac5eac, extends_extends({}, menuScope, subTriggerProps, {
81355        ref: forwardedRef
81356    }));
81357});
81358/*#__PURE__*/ Object.assign($d08ef79370b62062$export$21dcb7ec56f874cf, {
81359    displayName: $d08ef79370b62062$var$SUB_TRIGGER_NAME
81360});
81361/* -------------------------------------------------------------------------------------------------
81362 * DropdownMenuSubContent
81363 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SUB_CONTENT_NAME = 'DropdownMenuSubContent';
81364const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{
81365    const { __scopeDropdownMenu: __scopeDropdownMenu , ...subContentProps } = props;
81366    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
81367    return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$6d4de93b380beddf, extends_extends({}, menuScope, subContentProps, {
81368        ref: forwardedRef,
81369        style: {
81370            ...props.style,
81371            '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
81372            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
81373            '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
81374            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
81375            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)'
81376        }
81377    }));
81378});
81379/*#__PURE__*/ Object.assign($d08ef79370b62062$export$f34ec8bc2482cc5f, {
81380    displayName: $d08ef79370b62062$var$SUB_CONTENT_NAME
81381});
81382/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
81383const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
81384const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
81385const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
81386const $d08ef79370b62062$export$eb2fcfdbd7ba97d4 = $d08ef79370b62062$export$246bebaba3a2f70e;
81387const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
81388const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
81389const $d08ef79370b62062$export$16ce288f89fa631c = $d08ef79370b62062$export$53a69729da201fa9;
81390const $d08ef79370b62062$export$a98f0dcb43a68a25 = $d08ef79370b62062$export$3323ad73d55f587e;
81391const $d08ef79370b62062$export$371ab307eab489c0 = $d08ef79370b62062$export$e4f69b41b1637536;
81392const $d08ef79370b62062$export$c3468e2714d175fa = $d08ef79370b62062$export$42355ae145153fb6;
81393const $d08ef79370b62062$export$1ff3c3f08ae963c0 = $d08ef79370b62062$export$da160178fd3bc7e9;
81394const $d08ef79370b62062$export$21b07c8f274aebd5 = (/* unused pure expression or super */ null && ($d08ef79370b62062$export$34b8980744021ec5));
81395const $d08ef79370b62062$export$d7a01e11500dfb6f = $d08ef79370b62062$export$2f307d81a64f5442;
81396const $d08ef79370b62062$export$2ea8a7a591ac5eac = $d08ef79370b62062$export$21dcb7ec56f874cf;
81397const $d08ef79370b62062$export$6d4de93b380beddf = $d08ef79370b62062$export$f34ec8bc2482cc5f;
81398
81399
81400
81401
81402
81403
81404;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-right-small.js
81405
81406/**
81407 * WordPress dependencies
81408 */
81409
81410const chevronRightSmall = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
81411  xmlns: "http://www.w3.org/2000/svg",
81412  viewBox: "0 0 24 24"
81413}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
81414  d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z"
81415}));
81416/* harmony default export */ const chevron_right_small = (chevronRightSmall);
81417
81418;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu-v2/styles.js
81419
81420function dropdown_menu_v2_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
81421/**
81422 * External dependencies
81423 */
81424
81425
81426
81427
81428/**
81429 * Internal dependencies
81430 */
81431
81432
81433
81434const ANIMATION_PARAMS = {
81435  SLIDE_AMOUNT: '2px',
81436  DURATION: '400ms',
81437  EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )'
81438};
81439const CONTENT_WRAPPER_PADDING = space(2);
81440const ITEM_PREFIX_WIDTH = space(7);
81441const ITEM_PADDING_INLINE_START = space(2);
81442const ITEM_PADDING_INLINE_END = space(2.5);
81443
81444// TODO: should bring this into the config, and make themeable
81445const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;
81446const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[900];
81447const DEFAULT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${DEFAULT_BORDER_COLOR}, ${config_values.popoverShadow}`;
81448const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${TOOLBAR_VARIANT_BORDER_COLOR}`;
81449const slideUpAndFade = emotion_react_browser_esm_keyframes({
81450  '0%': {
81451    opacity: 0,
81452    transform: `translateY(${ANIMATION_PARAMS.SLIDE_AMOUNT})`
81453  },
81454  '100%': {
81455    opacity: 1,
81456    transform: 'translateY(0)'
81457  }
81458});
81459const slideRightAndFade = emotion_react_browser_esm_keyframes({
81460  '0%': {
81461    opacity: 0,
81462    transform: `translateX(-${ANIMATION_PARAMS.SLIDE_AMOUNT})`
81463  },
81464  '100%': {
81465    opacity: 1,
81466    transform: 'translateX(0)'
81467  }
81468});
81469const slideDownAndFade = emotion_react_browser_esm_keyframes({
81470  '0%': {
81471    opacity: 0,
81472    transform: `translateY(-${ANIMATION_PARAMS.SLIDE_AMOUNT})`
81473  },
81474  '100%': {
81475    opacity: 1,
81476    transform: 'translateY(0)'
81477  }
81478});
81479const slideLeftAndFade = emotion_react_browser_esm_keyframes({
81480  '0%': {
81481    opacity: 0,
81482    transform: `translateX(${ANIMATION_PARAMS.SLIDE_AMOUNT})`
81483  },
81484  '100%': {
81485    opacity: 1,
81486    transform: 'translateX(0)'
81487  }
81488});
81489const baseContent = variant =>
81489 /*#__PURE__*/emotion_react_browser_esm_css("min-width:220px;background-color:", COLORS.ui.background, ";border-radius:", config_values.radiusBlockUi, ";padding:", CONTENT_WRAPPER_PADDING, ";box-shadow:", variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";will-change:transform,opacity;&[data-side='top']{animation-name:", slideDownAndFade, ";}&[data-side='right']{animation-name:", slideLeftAndFade, ";}&[data-side='bottom']{animation-name:", slideUpAndFade, ";}&[data-side='left']{animation-name:", slideRightAndFade, ";}@media ( prefers-reduced-motion ){animation-duration:0s;}" + ( true ? "" : 0),  true ? "" : 0);
81490const itemPrefix = /*#__PURE__*/emotion_react_browser_esm_css("width:", ITEM_PREFIX_WIDTH, ";display:inline-flex;align-items:center;justify-content:center;margin-inline-start:calc( -1 * ", ITEM_PADDING_INLINE_START, " );margin-top:", space(-2), ";margin-bottom:", space(-2), ";" + ( true ? "" : 0),  true ? "" : 0);
81491const itemSuffix = /*#__PURE__*/emotion_react_browser_esm_css("width:max-content;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;padding-inline-start:", space(6), ";margin-top:", space(-2), ";margin-bottom:", space(-2), ";opacity:0.6;[data-highlighted]>&,[data-state='open']>&,[data-disabled]>&{opacity:1;}" + ( true ? "" : 0),  true ? "" : 0);
81492const ItemPrefixWrapper = emotion_styled_base_browser_esm("span",  true ? {
81493  target: "e1kdzosf11"
81494} : 0)(itemPrefix, ";" + ( true ? "" : 0));
81495const ItemSuffixWrapper = emotion_styled_base_browser_esm("span",  true ? {
81496  target: "e1kdzosf10"
81497} : 0)(itemSuffix, ";" + ( true ? "" : 0));
81498const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.gray[900], ";border-radius:", config_values.radiusBlockUi, ";display:flex;align-items:center;padding:", space(2), " ", ITEM_PADDING_INLINE_END, " ", space(2), " ", ITEM_PADDING_INLINE_START, ";position:relative;user-select:none;outline:none;&[data-disabled]{opacity:0.5;pointer-events:none;}&[data-highlighted]{background-color:", COLORS.gray[100], ";outline:2px solid transparent;}svg{fill:currentColor;}&:not( :has( ", ItemPrefixWrapper, " ) ){padding-inline-start:", ITEM_PREFIX_WIDTH, ";}" + ( true ? "" : 0),  true ? "" : 0);
81499const dropdown_menu_v2_styles_Content = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$7c6e2c02157bb7d2,  true ? {
81500  target: "e1kdzosf9"
81501} : 0)(props => baseContent(props.variant), ";" + ( true ? "" : 0));
81502const SubContent = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$6d4de93b380beddf,  true ? {
81503  target: "e1kdzosf8"
81504} : 0)(props => baseContent(props.variant), ";" + ( true ? "" : 0));
81505const styles_Item = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$6d08773d2e66f8f2,  true ? {
81506  target: "e1kdzosf7"
81507} : 0)(baseItem, ";" + ( true ? "" : 0));
81508const CheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$16ce288f89fa631c,  true ? {
81509  target: "e1kdzosf6"
81510} : 0)(baseItem, ";" + ( true ? "" : 0));
81511const RadioItem = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$371ab307eab489c0,  true ? {
81512  target: "e1kdzosf5"
81513} : 0)(baseItem, ";" + ( true ? "" : 0));
81514const SubTrigger = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$2ea8a7a591ac5eac,  true ? {
81515  target: "e1kdzosf4"
81516} : 0)(baseItem, " &[data-state='open']{background-color:", COLORS.gray[100], ";}" + ( true ? "" : 0));
81517const styles_Label = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$b04be29aa201d4f5,  true ? {
81518  target: "e1kdzosf3"
81519} : 0)("box-sizing:border-box;display:flex;align-items:center;min-height:", space(8), ";padding:", space(2), " ", ITEM_PADDING_INLINE_END, " ", space(2), " ", ITEM_PREFIX_WIDTH, ";color:", COLORS.gray[700], ";font-size:11px;line-height:1.4;font-weight:500;text-transform:uppercase;" + ( true ? "" : 0));
81520const styles_Separator = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$1ff3c3f08ae963c0,  true ? {
81521  target: "e1kdzosf2"
81522} : 0)("height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DEFAULT_BORDER_COLOR, ";margin:", space(2), " calc( -1 * ", CONTENT_WRAPPER_PADDING, " );" + ( true ? "" : 0));
81523const ItemIndicator = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$c3468e2714d175fa,  true ? {
81524  target: "e1kdzosf1"
81525} : 0)( true ? {
81526  name: "pl708y",
81527  styles: "display:inline-flex;align-items:center;justify-content:center"
81528} : 0);
81529const SubmenuRtlChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon,  true ? {
81530  target: "e1kdzosf0"
81531} : 0)(rtl({
81532  transform: `scaleX(1) translateX(${space(2)})`
81533}, {
81534  transform: `scaleX(-1) translateX(${space(2)})`
81535}), ";" + ( true ? "" : 0));
81536
81537;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu-v2/index.js
81538
81539/**
81540 * External dependencies
81541 */
81542
81543
81544/**
81545 * WordPress dependencies
81546 */
81547
81548
81549
81550
81551
81552/**
81553 * Internal dependencies
81554 */
81555
81556
81557
81558
81559
81560// Menu content's side padding + 4px
81561const SUB_MENU_OFFSET_SIDE = 16;
81562// Opposite amount of the top padding of the menu item
81563const SUB_MENU_OFFSET_ALIGN = -8;
81564const DropdownMenuPrivateContext = (0,external_wp_element_namespaceObject.createContext)({
81565  variant: undefined,
81566  portalContainer: null
81567});
81568const dropdown_menu_v2_UnconnectedDropdownMenu = props => {
81569  const {
81570    // Root props
81571    defaultOpen,
81572    open,
81573    onOpenChange,
81574    modal = true,
81575    // Content positioning props
81576    side = 'bottom',
81577    sideOffset = 0,
81578    align = 'center',
81579    alignOffset = 0,
81580    // Render props
81581    children,
81582    trigger,
81583    // From internal components context
81584    variant
81585  } = useContextSystem(props, 'DropdownMenu');
81586
81587  // Render the portal in the default slot used by the legacy Popover component.
81588  const slot = useSlot(SLOT_NAME);
81589  const portalContainer = slot.ref?.current;
81590  const privateContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
81591    variant,
81592    portalContainer
81593  }), [variant, portalContainer]);
81594  return (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$be92b6f5f03c0fe9, {
81595    defaultOpen: defaultOpen,
81596    open: open,
81597    onOpenChange: onOpenChange,
81598    modal: modal,
81599    dir: (0,external_wp_i18n_namespaceObject.isRTL)() ? 'rtl' : 'ltr'
81600  }, (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$41fb9f06171c75f4, {
81601    asChild: true
81602  }, trigger), (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$602eac185826482c, {
81603    container: portalContainer
81604  }, (0,external_wp_element_namespaceObject.createElement)(dropdown_menu_v2_styles_Content, {
81605    side: side,
81606    align: align,
81607    sideOffset: sideOffset,
81608    alignOffset: alignOffset,
81609    loop: true,
81610    variant: variant
81611  }, (0,external_wp_element_namespaceObject.createElement)(DropdownMenuPrivateContext.Provider, {
81612    value: privateContextValue
81613  }, children))));
81614};
81615
81616/**
81617 * `DropdownMenu` displays a menu to the user (such as a set of actions
81618 * or functions) triggered by a button.
81619 */
81620const dropdown_menu_v2_DropdownMenu = contextConnectWithoutRef(dropdown_menu_v2_UnconnectedDropdownMenu, 'DropdownMenu');
81621const DropdownSubMenuTrigger = ({
81622  prefix,
81623  suffix = (0,external_wp_element_namespaceObject.createElement)(SubmenuRtlChevronIcon, {
81624    icon: chevron_right_small,
81625    size: 24
81626  }),
81627  children
81628}) => {
81629  return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, prefix && (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix));
81630};
81631const DropdownSubMenu = ({
81632  // Sub props
81633  defaultOpen,
81634  open,
81635  onOpenChange,
81636  // Sub trigger props
81637  disabled,
81638  textValue,
81639  // Render props
81640  children,
81641  trigger
81642}) => {
81643  const {
81644    variant,
81645    portalContainer
81646  } = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuPrivateContext);
81647  return (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$d7a01e11500dfb6f, {
81648    defaultOpen: defaultOpen,
81649    open: open,
81650    onOpenChange: onOpenChange
81651  }, (0,external_wp_element_namespaceObject.createElement)(SubTrigger, {
81652    disabled: disabled,
81653    textValue: textValue
81654  }, trigger), (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$602eac185826482c, {
81655    container: portalContainer
81656  }, (0,external_wp_element_namespaceObject.createElement)(SubContent, {
81657    loop: true,
81658    sideOffset: SUB_MENU_OFFSET_SIDE,
81659    alignOffset: SUB_MENU_OFFSET_ALIGN,
81660    variant: variant
81661  }, children)));
81662};
81663const DropdownMenuLabel = props => (0,external_wp_element_namespaceObject.createElement)(styles_Label, {
81664  ...props
81665});
81666const DropdownMenuGroup = props => (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$eb2fcfdbd7ba97d4, {
81667  ...props
81668});
81669const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(({
81670  children,
81671  prefix,
81672  suffix,
81673  ...props
81674}, forwardedRef) => {
81675  return (0,external_wp_element_namespaceObject.createElement)(styles_Item, {
81676    ...props,
81677    ref: forwardedRef
81678  }, prefix && (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix));
81679});
81680const DropdownMenuCheckboxItem = ({
81681  children,
81682  checked = false,
81683  suffix,
81684  ...props
81685}) => {
81686  return (0,external_wp_element_namespaceObject.createElement)(CheckboxItem, {
81687    ...props,
81688    checked: checked
81689  }, (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, (0,external_wp_element_namespaceObject.createElement)(ItemIndicator, null, (checked === 'indeterminate' || checked === true) && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
81690    icon: checked === 'indeterminate' ? line_solid : library_check,
81691    size: 24
81692  }))), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix
81692));
81693};
81694const DropdownMenuRadioGroup = props => (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$a98f0dcb43a68a25, {
81695  ...props
81696});
81697const radioDot = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
81698  viewBox: "0 0 24 24",
81699  xmlns: "http://www.w3.org/2000/svg"
81700}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Circle, {
81701  cx: 12,
81702  cy: 12,
81703  r: 3,
81704  fill: "currentColor"
81705}));
81706const DropdownMenuRadioItem = ({
81707  children,
81708  suffix,
81709  ...props
81710}) => {
81711  return (0,external_wp_element_namespaceObject.createElement)(RadioItem, {
81712    ...props
81713  }, (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, (0,external_wp_element_namespaceObject.createElement)(ItemIndicator, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, {
81714    icon: radioDot,
81715    size: 22
81716  }))), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix));
81717};
81718const DropdownMenuSeparator = props => {
81719  const {
81720    variant
81721  } = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuPrivateContext);
81722  return (0,external_wp_element_namespaceObject.createElement)(styles_Separator, {
81723    ...props,
81724    variant: variant
81725  });
81726};
81727
81728;// CONCATENATED MODULE: ./packages/components/build-module/theme/styles.js
81729
81730/**
81731 * External dependencies
81732 */
81733
81734
81735
81736/**
81737 * Internal dependencies
81738 */
81739
81740const colorVariables = ({
81741  colors
81742}) => {
81743  const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join('');
81744  return [/*#__PURE__*/emotion_react_browser_esm_css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + ( true ? "" : 0),  true ? "" : 0)];
81745};
81746const theme_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
81747  target: "e1krjpvb0"
81748} : 0)( true ? "" : 0);
81749
81750;// CONCATENATED MODULE: ./packages/components/build-module/theme/color-algorithms.js
81751/**
81752 * External dependencies
81753 */
81754
81755
81756
81757
81758/**
81759 * WordPress dependencies
81760 */
81761
81762
81763/**
81764 * Internal dependencies
81765 */
81766
81767
81768k([names, a11y]);
81769function generateThemeVariables(inputs) {
81770  validateInputs(inputs);
81771  const generatedColors = {
81772    ...generateAccentDependentColors(inputs.accent),
81773    ...generateBackgroundDependentColors(inputs.background)
81774  };
81775  warnContrastIssues(checkContrasts(inputs, generatedColors));
81776  return {
81777    colors: generatedColors
81778  };
81779}
81780function validateInputs(inputs) {
81781  for (const [key, value] of Object.entries(inputs)) {
81782    if (typeof value !== 'undefined' && !w(value).isValid()) {
81783       false ? 0 : void 0;
81784    }
81785  }
81786}
81787function checkContrasts(inputs, outputs) {
81788  const background = inputs.background || COLORS.white;
81789  const accent = inputs.accent || '#3858e9';
81790  const foreground = outputs.foreground || COLORS.gray[900];
81791  const gray = outputs.gray || COLORS.gray;
81792  return {
81793    accent: w(background).isReadable(accent) ? undefined : `The background color ("${background}") does not have sufficient contrast against the accent color ("${accent}").`,
81794    foreground: w(background).isReadable(foreground) ? undefined : `The background color provided ("${background}") does not have sufficient contrast against the standard foreground colors.`,
81795    grays: w(background).contrast(gray[600]) >= 3 && w(background).contrast(gray[700]) >= 4.5 ? undefined : `The background color provided ("${background}") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`
81796  };
81797}
81798function warnContrastIssues(issues) {
81799  for (const error of Object.values(issues)) {
81800    if (error) {
81801       false ? 0 : void 0;
81802    }
81803  }
81804}
81805function generateAccentDependentColors(accent) {
81806  if (!accent) return {};
81807  return {
81808    accent,
81809    accentDarker10: w(accent).darken(0.1).toHex(),
81810    accentDarker20: w(accent).darken(0.2).toHex(),
81811    accentInverted: getForegroundForColor(accent)
81812  };
81813}
81814function generateBackgroundDependentColors(background) {
81815  if (!background) return {};
81816  const foreground = getForegroundForColor(background);
81817  return {
81818    background,
81819    foreground,
81820    foregroundInverted: getForegroundForColor(foreground),
81821    gray: generateShades(background, foreground)
81822  };
81823}
81824function getForegroundForColor(color) {
81825  return w(color).isDark() ? COLORS.white : COLORS.gray[900];
81826}
81827function generateShades(background, foreground) {
81828  // How much darkness you need to add to #fff to get the COLORS.gray[n] color
81829  const SHADES = {
81830    100: 0.06,
81831    200: 0.121,
81832    300: 0.132,
81833    400: 0.2,
81834    600: 0.42,
81835    700: 0.543,
81836    800: 0.821
81837  };
81838
81839  // Darkness of COLORS.gray[ 900 ], relative to #fff
81840  const limit = 0.884;
81841  const direction = w(background).isDark() ? 'lighten' : 'darken';
81842
81843  // Lightness delta between the background and foreground colors
81844  const range = Math.abs(w(background).toHsl().l - w(foreground).toHsl().l) / 100;
81845  const result = {};
81846  Object.entries(SHADES).forEach(([key, value]) => {
81847    result[parseInt(key)] = w(background)[direction](value / limit * range).to
81847Hex();
81848  });
81849  return result;
81850}
81851
81852;// CONCATENATED MODULE: ./packages/components/build-module/theme/index.js
81853
81854/**
81855 * WordPress dependencies
81856 */
81857
81858
81859/**
81860 * Internal dependencies
81861 */
81862
81863
81864
81865
81866
81867/**
81868 * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
81869 *
81870 * Multiple `Theme` components can be nested in order to override specific theme variables.
81871 *
81872 *
81873 * ```jsx
81874 * const Example = () => {
81875 *   return (
81876 *     <Theme accent="red">
81877 *       <Button variant="primary">I'm red</Button>
81878 *       <Theme accent="blue">
81879 *         <Button variant="primary">I'm blue</Button>
81880 *       </Theme>
81881 *     </Theme>
81882 *   );
81883 * };
81884 * ```
81885 */
81886function Theme({
81887  accent,
81888  background,
81889  className,
81890  ...props
81891}) {
81892  const cx = useCx();
81893  const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(...colorVariables(generateThemeVariables({
81894    accent,
81895    background
81896  })), className), [accent, background, className, cx]);
81897  return (0,external_wp_element_namespaceObject.createElement)(theme_styles_Wrapper, {
81898    className: classes,
81899    ...props
81900  });
81901}
81902/* harmony default export */ const theme = (Theme);
81903
81904;// CONCATENATED MODULE: ./packages/components/build-module/private-apis.js
81905/**
81906 * WordPress dependencies
81907 */
81908
81909
81910/**
81911 * Internal dependencies
81912 */
81913
81914
81915
81916
81917
81918
81919
81920const {
81921  lock,
81922  unlock
81923} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/components');
81924const privateApis = {};
81925lock(privateApis, {
81926  CustomSelectControl: CustomSelectControl,
81927  __experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
81928  createPrivateSlotFill: createPrivateSlotFill,
81929  ComponentsContext: ComponentsContext,
81930  DropdownMenuV2: dropdown_menu_v2_DropdownMenu,
81931  DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
81932  DropdownMenuGroupV2: DropdownMenuGroup,
81933  DropdownMenuItemV2: DropdownMenuItem,
81934  DropdownMenuLabelV2: DropdownMenuLabel,
81935  DropdownMenuRadioGroupV2: DropdownMenuRadioGroup,
81936  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
81937  DropdownMenuSeparatorV2: DropdownMenuSeparator,
81938  DropdownSubMenuV2: DropdownSubMenu,
81939  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
81940  ProgressBar: progress_bar,
81941  Theme: theme
81942});
81943
81944;// CONCATENATED MODULE: ./packages/components/build-module/index.js
81945// Primitives.
81946
81947
81948// Components.
81949
81950
81951
81952
81953
81954
81955
81956
81957
81958
81959
81960
81961
81962
81963
81964
81965
81966
81967
81968
81969
81970
81971
81972
81973
81974
81975
81976
81977
81978
81979
81980
81981
81982
81983
81984
81985
81986
81987
81988
81989
81990
81991
81992
81993
81994
81995
81996
81997
81998
81999
82000
82001
82002
82003
82004
82005
82006
82007
82008
82009
82010
82011
82012
82013
82014
82015
82016
82017
82018
82019
82020
82021
82022
82023
82024
82025
82026
82027
82028
82029
82030
82031
82032
82033
82034
82035
82036
82037
82038
82039
82040
82041
82042
82043
82044
82045
82046
82047
82048
82049
82050
82051
82052
82053
82054
82055
82056
82057
82058
82059
82060
82061
82062
82063
82064
82065
82066
82067// Higher-Order Components.
82068
82069
82070
82071
82072
82073
82074
82075
82076
82077// Private APIs.
82078
82079
82080})();
82081
82082(window.wp = window.wp || {}).components = __webpack_exports__;
82083/******/ })()
82084;

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.