[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/js/dist/ -> components.js (source)

   1  /******/ (() => { // webpackBootstrap
   2  /******/     var __webpack_modules__ = ({
   3  
   4  /***/ 5755:
   5  /***/ ((module, exports) => {
   6  
   7  var __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      var nativeCodeString = '[native code]';
  19  
  20  	function classNames() {
  21          var classes = [];
  22  
  23          for (var i = 0; i < arguments.length; i++) {
  24              var arg = arguments[i];
  25              if (!arg) continue;
  26  
  27              var argType = typeof arg;
  28  
  29              if (argType === 'string' || argType === 'number') {
  30                  classes.push(arg);
  31              } else if (Array.isArray(arg)) {
  32                  if (arg.length) {
  33                      var inner = classNames.apply(null, arg);
  34                      if (inner) {
  35                          classes.push(inner);
  36                      }
  37                  }
  38              } else if (argType === 'object') {
  39                  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
  40                      classes.push(arg.toString());
  41                      continue;
  42                  }
  43  
  44                  for (var key in arg) {
  45                      if (hasOwn.call(arg, key) && arg[key]) {
  46                          classes.push(key);
  47                      }
  48                  }
  49              }
  50          }
  51  
  52          return classes.join(' ');
  53      }
  54  
  55      if ( true && module.exports) {
  56          classNames.default = classNames;
  57          module.exports = classNames;
  58      } else if (true) {
  59          // register as 'classnames', consistent with npm package name
  60          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
  61              return classNames;
  62          }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
  63          __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
  64      } else {}
  65  }());
  66  
  67  
  68  /***/ }),
  69  
  70  /***/ 66:
  71  /***/ ((module) => {
  72  
  73  "use strict";
  74  
  75  
  76  var isMergeableObject = function isMergeableObject(value) {
  77      return isNonNullObject(value)
  78          && !isSpecial(value)
  79  };
  80  
  81  function isNonNullObject(value) {
  82      return !!value && typeof value === 'object'
  83  }
  84  
  85  function isSpecial(value) {
  86      var stringValue = Object.prototype.toString.call(value);
  87  
  88      return stringValue === '[object RegExp]'
  89          || stringValue === '[object Date]'
  90          || isReactElement(value)
  91  }
  92  
  93  // see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
  94  var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
  95  var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
  96  
  97  function isReactElement(value) {
  98      return value.$$typeof === REACT_ELEMENT_TYPE
  99  }
 100  
 101  function emptyTarget(val) {
 102      return Array.isArray(val) ? [] : {}
 103  }
 104  
 105  function cloneUnlessOtherwiseSpecified(value, options) {
 106      return (options.clone !== false && options.isMergeableObject(value))
 107          ? deepmerge(emptyTarget(value), value, options)
 108          : value
 109  }
 110  
 111  function defaultArrayMerge(target, source, options) {
 112      return target.concat(source).map(function(element) {
 113          return cloneUnlessOtherwiseSpecified(element, options)
 114      })
 115  }
 116  
 117  function getMergeFunction(key, options) {
 118      if (!options.customMerge) {
 119          return deepmerge
 120      }
 121      var customMerge = options.customMerge(key);
 122      return typeof customMerge === 'function' ? customMerge : deepmerge
 123  }
 124  
 125  function getEnumerableOwnPropertySymbols(target) {
 126      return Object.getOwnPropertySymbols
 127          ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
 128              return Object.propertyIsEnumerable.call(target, symbol)
 129          })
 130          : []
 131  }
 132  
 133  function getKeys(target) {
 134      return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
 135  }
 136  
 137  function propertyIsOnObject(object, property) {
 138      try {
 139          return property in object
 140      } catch(_) {
 141          return false
 142      }
 143  }
 144  
 145  // Protects from prototype poisoning and unexpected merging up the prototype chain.
 146  function propertyIsUnsafe(target, key) {
 147      return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
 148          && !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
 149              && Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
 150  }
 151  
 152  function mergeObject(target, source, options) {
 153      var destination = {};
 154      if (options.isMergeableObject(target)) {
 155          getKeys(target).forEach(function(key) {
 156              destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
 157          });
 158      }
 159      getKeys(source).forEach(function(key) {
 160          if (propertyIsUnsafe(target, key)) {
 161              return
 162          }
 163  
 164          if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
 165              destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
 166          } else {
 167              destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
 168          }
 169      });
 170      return destination
 171  }
 172  
 173  function deepmerge(target, source, options) {
 174      options = options || {};
 175      options.arrayMerge = options.arrayMerge || defaultArrayMerge;
 176      options.isMergeableObject = options.isMergeableObject || isMergeableObject;
 177      // cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
 178      // implementations can use it. The caller may not replace it.
 179      options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
 180  
 181      var sourceIsArray = Array.isArray(source);
 182      var targetIsArray = Array.isArray(target);
 183      var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
 184  
 185      if (!sourceAndTargetTypesMatch) {
 186          return cloneUnlessOtherwiseSpecified(source, options)
 187      } else if (sourceIsArray) {
 188          return options.arrayMerge(target, source, options)
 189      } else {
 190          return mergeObject(target, source, options)
 191      }
 192  }
 193  
 194  deepmerge.all = function deepmergeAll(array, options) {
 195      if (!Array.isArray(array)) {
 196          throw new Error('first argument should be an array')
 197      }
 198  
 199      return array.reduce(function(prev, next) {
 200          return deepmerge(prev, next, options)
 201      }, {})
 202  };
 203  
 204  var deepmerge_1 = deepmerge;
 205  
 206  module.exports = deepmerge_1;
 207  
 208  
 209  /***/ }),
 210  
 211  /***/ 1637:
 212  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 213  
 214  "use strict";
 215  
 216  
 217  var util = __webpack_require__(3062);
 218  
 219  function scrollIntoView(elem, container, config) {
 220    config = config || {};
 221    // document 归一化到 window
 222    if (container.nodeType === 9) {
 223      container = util.getWindow(container);
 224    }
 225  
 226    var allowHorizontalScroll = config.allowHorizontalScroll;
 227    var onlyScrollIfNeeded = config.onlyScrollIfNeeded;
 228    var alignWithTop = config.alignWithTop;
 229    var alignWithLeft = config.alignWithLeft;
 230    var offsetTop = config.offsetTop || 0;
 231    var offsetLeft = config.offsetLeft || 0;
 232    var offsetBottom = config.offsetBottom || 0;
 233    var offsetRight = config.offsetRight || 0;
 234  
 235    allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll;
 236  
 237    var isWin = util.isWindow(container);
 238    var elemOffset = util.offset(elem);
 239    var eh = util.outerHeight(elem);
 240    var ew = util.outerWidth(elem);
 241    var containerOffset = undefined;
 242    var ch = undefined;
 243    var cw = undefined;
 244    var containerScroll = undefined;
 245    var diffTop = undefined;
 246    var diffBottom = undefined;
 247    var win = undefined;
 248    var winScroll = undefined;
 249    var ww = undefined;
 250    var wh = undefined;
 251  
 252    if (isWin) {
 253      win = container;
 254      wh = util.height(win);
 255      ww = util.width(win);
 256      winScroll = {
 257        left: util.scrollLeft(win),
 258        top: util.scrollTop(win)
 259      };
 260      // elem 相对 container 可视视窗的距离
 261      diffTop = {
 262        left: elemOffset.left - winScroll.left - offsetLeft,
 263        top: elemOffset.top - winScroll.top - offsetTop
 264      };
 265      diffBottom = {
 266        left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight,
 267        top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom
 268      };
 269      containerScroll = winScroll;
 270    } else {
 271      containerOffset = util.offset(container);
 272      ch = container.clientHeight;
 273      cw = container.clientWidth;
 274      containerScroll = {
 275        left: container.scrollLeft,
 276        top: container.scrollTop
 277      };
 278      // elem 相对 container 可视视窗的距离
 279      // 注意边框, offset 是边框到根节点
 280      diffTop = {
 281        left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft,
 282        top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop
 283      };
 284      diffBottom = {
 285        left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight,
 286        top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom
 287      };
 288    }
 289  
 290    if (diffTop.top < 0 || diffBottom.top > 0) {
 291      // 强制向上
 292      if (alignWithTop === true) {
 293        util.scrollTop(container, containerScroll.top + diffTop.top);
 294      } else if (alignWithTop === false) {
 295        util.scrollTop(container, containerScroll.top + diffBottom.top);
 296      } else {
 297        // 自动调整
 298        if (diffTop.top < 0) {
 299          util.scrollTop(container, containerScroll.top + diffTop.top);
 300        } else {
 301          util.scrollTop(container, containerScroll.top + diffBottom.top);
 302        }
 303      }
 304    } else {
 305      if (!onlyScrollIfNeeded) {
 306        alignWithTop = alignWithTop === undefined ? true : !!alignWithTop;
 307        if (alignWithTop) {
 308          util.scrollTop(container, containerScroll.top + diffTop.top);
 309        } else {
 310          util.scrollTop(container, containerScroll.top + diffBottom.top);
 311        }
 312      }
 313    }
 314  
 315    if (allowHorizontalScroll) {
 316      if (diffTop.left < 0 || diffBottom.left > 0) {
 317        // 强制向上
 318        if (alignWithLeft === true) {
 319          util.scrollLeft(container, containerScroll.left + diffTop.left);
 320        } else if (alignWithLeft === false) {
 321          util.scrollLeft(container, containerScroll.left + diffBottom.left);
 322        } else {
 323          // 自动调整
 324          if (diffTop.left < 0) {
 325            util.scrollLeft(container, containerScroll.left + diffTop.left);
 326          } else {
 327            util.scrollLeft(container, containerScroll.left + diffBottom.left);
 328          }
 329        }
 330      } else {
 331        if (!onlyScrollIfNeeded) {
 332          alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft;
 333          if (alignWithLeft) {
 334            util.scrollLeft(container, containerScroll.left + diffTop.left);
 335          } else {
 336            util.scrollLeft(container, containerScroll.left + diffBottom.left);
 337          }
 338        }
 339      }
 340    }
 341  }
 342  
 343  module.exports = scrollIntoView;
 344  
 345  /***/ }),
 346  
 347  /***/ 5428:
 348  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 349  
 350  "use strict";
 351  
 352  
 353  module.exports = __webpack_require__(1637);
 354  
 355  /***/ }),
 356  
 357  /***/ 3062:
 358  /***/ ((module) => {
 359  
 360  "use strict";
 361  
 362  
 363  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 364  
 365  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
 366  
 367  var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source;
 368  
 369  function getClientPosition(elem) {
 370    var box = undefined;
 371    var x = undefined;
 372    var y = undefined;
 373    var doc = elem.ownerDocument;
 374    var body = doc.body;
 375    var docElem = doc && doc.documentElement;
 376    // 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式
 377    box = elem.getBoundingClientRect();
 378  
 379    // 注:jQuery 还考虑减去 docElem.clientLeft/clientTop
 380    // 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确
 381    // 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin
 382  
 383    x = box.left;
 384    y = box.top;
 385  
 386    // In IE, most of the time, 2 extra pixels are added to the top and left
 387    // due to the implicit 2-pixel inset border.  In IE6/7 quirks mode and
 388    // IE6 standards mode, this border can be overridden by setting the
 389    // document element's border to zero -- thus, we cannot rely on the
 390    // offset always being 2 pixels.
 391  
 392    // In quirks mode, the offset can be determined by querying the body's
 393    // clientLeft/clientTop, but in standards mode, it is found by querying
 394    // the document element's clientLeft/clientTop.  Since we already called
 395    // getClientBoundingRect we have already forced a reflow, so it is not
 396    // too expensive just to query them all.
 397  
 398    // ie 下应该减去窗口的边框吧,毕竟默认 absolute 都是相对窗口定位的
 399    // 窗口边框标准是设 documentElement ,quirks 时设置 body
 400    // 最好禁止在 body 和 html 上边框 ,但 ie < 9 html 默认有 2px ,减去
 401    // 但是非 ie 不可能设置窗口边框,body html 也不是窗口 ,ie 可以通过 html,body 设置
 402    // 标准 ie 下 docElem.clientTop 就是 border-top
 403    // ie7 html 即窗口边框改变不了。永远为 2
 404    // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框,即使设了 border-top 也为 0
 405  
 406    x -= docElem.clientLeft || body.clientLeft || 0;
 407    y -= docElem.clientTop || body.clientTop || 0;
 408  
 409    return {
 410      left: x,
 411      top: y
 412    };
 413  }
 414  
 415  function getScroll(w, top) {
 416    var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
 417    var method = 'scroll' + (top ? 'Top' : 'Left');
 418    if (typeof ret !== 'number') {
 419      var d = w.document;
 420      // ie6,7,8 standard mode
 421      ret = d.documentElement[method];
 422      if (typeof ret !== 'number') {
 423        // quirks mode
 424        ret = d.body[method];
 425      }
 426    }
 427    return ret;
 428  }
 429  
 430  function getScrollLeft(w) {
 431    return getScroll(w);
 432  }
 433  
 434  function getScrollTop(w) {
 435    return getScroll(w, true);
 436  }
 437  
 438  function getOffset(el) {
 439    var pos = getClientPosition(el);
 440    var doc = el.ownerDocument;
 441    var w = doc.defaultView || doc.parentWindow;
 442    pos.left += getScrollLeft(w);
 443    pos.top += getScrollTop(w);
 444    return pos;
 445  }
 446  function _getComputedStyle(elem, name, computedStyle_) {
 447    var val = '';
 448    var d = elem.ownerDocument;
 449    var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null);
 450  
 451    // https://github.com/kissyteam/kissy/issues/61
 452    if (computedStyle) {
 453      val = computedStyle.getPropertyValue(name) || computedStyle[name];
 454    }
 455  
 456    return val;
 457  }
 458  
 459  var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i');
 460  var RE_POS = /^(top|right|bottom|left)$/;
 461  var CURRENT_STYLE = 'currentStyle';
 462  var RUNTIME_STYLE = 'runtimeStyle';
 463  var LEFT = 'left';
 464  var PX = 'px';
 465  
 466  function _getComputedStyleIE(elem, name) {
 467    // currentStyle maybe null
 468    // http://msdn.microsoft.com/en-us/library/ms535231.aspx
 469    var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name];
 470  
 471    // 当 width/height 设置为百分比时,通过 pixelLeft 方式转换的 width/height 值
 472    // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19
 473    // 在 ie 下不对,需要直接用 offset 方式
 474    // borderWidth 等值也有问题,但考虑到 borderWidth 设为百分比的概率很小,这里就不考虑了
 475  
 476    // From the awesome hack by Dean Edwards
 477    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
 478    // If we're not dealing with a regular pixel number
 479    // but a number that has a weird ending, we need to convert it to pixels
 480    // exclude left right for relativity
 481    if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {
 482      // Remember the original values
 483      var style = elem.style;
 484      var left = style[LEFT];
 485      var rsLeft = elem[RUNTIME_STYLE][LEFT];
 486  
 487      // prevent flashing of content
 488      elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT];
 489  
 490      // Put in the new values to get a computed value out
 491      style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;
 492      ret = style.pixelLeft + PX;
 493  
 494      // Revert the changed values
 495      style[LEFT] = left;
 496  
 497      elem[RUNTIME_STYLE][LEFT] = rsLeft;
 498    }
 499    return ret === '' ? 'auto' : ret;
 500  }
 501  
 502  var getComputedStyleX = undefined;
 503  if (typeof window !== 'undefined') {
 504    getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
 505  }
 506  
 507  function each(arr, fn) {
 508    for (var i = 0; i < arr.length; i++) {
 509      fn(arr[i]);
 510    }
 511  }
 512  
 513  function isBorderBoxFn(elem) {
 514    return getComputedStyleX(elem, 'boxSizing') === 'border-box';
 515  }
 516  
 517  var BOX_MODELS = ['margin', 'border', 'padding'];
 518  var CONTENT_INDEX = -1;
 519  var PADDING_INDEX = 2;
 520  var BORDER_INDEX = 1;
 521  var MARGIN_INDEX = 0;
 522  
 523  function swap(elem, options, callback) {
 524    var old = {};
 525    var style = elem.style;
 526    var name = undefined;
 527  
 528    // Remember the old values, and insert the new ones
 529    for (name in options) {
 530      if (options.hasOwnProperty(name)) {
 531        old[name] = style[name];
 532        style[name] = options[name];
 533      }
 534    }
 535  
 536    callback.call(elem);
 537  
 538    // Revert the old values
 539    for (name in options) {
 540      if (options.hasOwnProperty(name)) {
 541        style[name] = old[name];
 542      }
 543    }
 544  }
 545  
 546  function getPBMWidth(elem, props, which) {
 547    var value = 0;
 548    var prop = undefined;
 549    var j = undefined;
 550    var i = undefined;
 551    for (j = 0; j < props.length; j++) {
 552      prop = props[j];
 553      if (prop) {
 554        for (i = 0; i < which.length; i++) {
 555          var cssProp = undefined;
 556          if (prop === 'border') {
 557            cssProp = prop + which[i] + 'Width';
 558          } else {
 559            cssProp = prop + which[i];
 560          }
 561          value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;
 562        }
 563      }
 564    }
 565    return value;
 566  }
 567  
 568  /**
 569   * A crude way of determining if an object is a window
 570   * @member util
 571   */
 572  function isWindow(obj) {
 573    // must use == for ie8
 574    /* eslint eqeqeq:0 */
 575    return obj != null && obj == obj.window;
 576  }
 577  
 578  var domUtils = {};
 579  
 580  each(['Width', 'Height'], function (name) {
 581    domUtils['doc' + name] = function (refWin) {
 582      var d = refWin.document;
 583      return Math.max(
 584      // firefox chrome documentElement.scrollHeight< body.scrollHeight
 585      // ie standard mode : documentElement.scrollHeight> body.scrollHeight
 586      d.documentElement['scroll' + name],
 587      // quirks : documentElement.scrollHeight 最大等于可视窗口多一点?
 588      d.body['scroll' + name], domUtils['viewport' + name](d));
 589    };
 590  
 591    domUtils['viewport' + name] = function (win) {
 592      // pc browser includes scrollbar in window.innerWidth
 593      var prop = 'client' + name;
 594      var doc = win.document;
 595      var body = doc.body;
 596      var documentElement = doc.documentElement;
 597      var documentElementProp = documentElement[prop];
 598      // 标准模式取 documentElement
 599      // backcompat 取 body
 600      return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;
 601    };
 602  });
 603  
 604  /*
 605   得到元素的大小信息
 606   @param elem
 607   @param name
 608   @param {String} [extra]  'padding' : (css width) + padding
 609   'border' : (css width) + padding + border
 610   'margin' : (css width) + padding + border + margin
 611   */
 612  function getWH(elem, name, extra) {
 613    if (isWindow(elem)) {
 614      return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem);
 615    } else if (elem.nodeType === 9) {
 616      return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);
 617    }
 618    var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
 619    var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight;
 620    var computedStyle = getComputedStyleX(elem);
 621    var isBorderBox = isBorderBoxFn(elem, computedStyle);
 622    var cssBoxValue = 0;
 623    if (borderBoxValue == null || borderBoxValue <= 0) {
 624      borderBoxValue = undefined;
 625      // Fall back to computed then un computed css if necessary
 626      cssBoxValue = getComputedStyleX(elem, name);
 627      if (cssBoxValue == null || Number(cssBoxValue) < 0) {
 628        cssBoxValue = elem.style[name] || 0;
 629      }
 630      // Normalize '', auto, and prepare for extra
 631      cssBoxValue = parseFloat(cssBoxValue) || 0;
 632    }
 633    if (extra === undefined) {
 634      extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;
 635    }
 636    var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;
 637    var val = borderBoxValue || cssBoxValue;
 638    if (extra === CONTENT_INDEX) {
 639      if (borderBoxValueOrIsBorderBox) {
 640        return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle);
 641      }
 642      return cssBoxValue;
 643    }
 644    if (borderBoxValueOrIsBorderBox) {
 645      var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle);
 646      return val + (extra === BORDER_INDEX ? 0 : padding);
 647    }
 648    return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle);
 649  }
 650  
 651  var cssShow = {
 652    position: 'absolute',
 653    visibility: 'hidden',
 654    display: 'block'
 655  };
 656  
 657  // fix #119 : https://github.com/kissyteam/kissy/issues/119
 658  function getWHIgnoreDisplay(elem) {
 659    var val = undefined;
 660    var args = arguments;
 661    // in case elem is window
 662    // elem.offsetWidth === undefined
 663    if (elem.offsetWidth !== 0) {
 664      val = getWH.apply(undefined, args);
 665    } else {
 666      swap(elem, cssShow, function () {
 667        val = getWH.apply(undefined, args);
 668      });
 669    }
 670    return val;
 671  }
 672  
 673  function css(el, name, v) {
 674    var value = v;
 675    if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
 676      for (var i in name) {
 677        if (name.hasOwnProperty(i)) {
 678          css(el, i, name[i]);
 679        }
 680      }
 681      return undefined;
 682    }
 683    if (typeof value !== 'undefined') {
 684      if (typeof value === 'number') {
 685        value += 'px';
 686      }
 687      el.style[name] = value;
 688      return undefined;
 689    }
 690    return getComputedStyleX(el, name);
 691  }
 692  
 693  each(['width', 'height'], function (name) {
 694    var first = name.charAt(0).toUpperCase() + name.slice(1);
 695    domUtils['outer' + first] = function (el, includeMargin) {
 696      return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
 697    };
 698    var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
 699  
 700    domUtils[name] = function (elem, val) {
 701      if (val !== undefined) {
 702        if (elem) {
 703          var computedStyle = getComputedStyleX(elem);
 704          var isBorderBox = isBorderBoxFn(elem);
 705          if (isBorderBox) {
 706            val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle);
 707          }
 708          return css(elem, name, val);
 709        }
 710        return undefined;
 711      }
 712      return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);
 713    };
 714  });
 715  
 716  // 设置 elem 相对 elem.ownerDocument 的坐标
 717  function setOffset(elem, offset) {
 718    // set position first, in-case top/left are set even on static elem
 719    if (css(elem, 'position') === 'static') {
 720      elem.style.position = 'relative';
 721    }
 722  
 723    var old = getOffset(elem);
 724    var ret = {};
 725    var current = undefined;
 726    var key = undefined;
 727  
 728    for (key in offset) {
 729      if (offset.hasOwnProperty(key)) {
 730        current = parseFloat(css(elem, key)) || 0;
 731        ret[key] = current + offset[key] - old[key];
 732      }
 733    }
 734    css(elem, ret);
 735  }
 736  
 737  module.exports = _extends({
 738    getWindow: function getWindow(node) {
 739      var doc = node.ownerDocument || node;
 740      return doc.defaultView || doc.parentWindow;
 741    },
 742    offset: function offset(el, value) {
 743      if (typeof value !== 'undefined') {
 744        setOffset(el, value);
 745      } else {
 746        return getOffset(el);
 747      }
 748    },
 749  
 750    isWindow: isWindow,
 751    each: each,
 752    css: css,
 753    clone: function clone(obj) {
 754      var ret = {};
 755      for (var i in obj) {
 756        if (obj.hasOwnProperty(i)) {
 757          ret[i] = obj[i];
 758        }
 759      }
 760      var overflow = obj.overflow;
 761      if (overflow) {
 762        for (var i in obj) {
 763          if (obj.hasOwnProperty(i)) {
 764            ret.overflow[i] = obj.overflow[i];
 765          }
 766        }
 767      }
 768      return ret;
 769    },
 770    scrollLeft: function scrollLeft(w, v) {
 771      if (isWindow(w)) {
 772        if (v === undefined) {
 773          return getScrollLeft(w);
 774        }
 775        window.scrollTo(v, getScrollTop(w));
 776      } else {
 777        if (v === undefined) {
 778          return w.scrollLeft;
 779        }
 780        w.scrollLeft = v;
 781      }
 782    },
 783    scrollTop: function scrollTop(w, v) {
 784      if (isWindow(w)) {
 785        if (v === undefined) {
 786          return getScrollTop(w);
 787        }
 788        window.scrollTo(getScrollLeft(w), v);
 789      } else {
 790        if (v === undefined) {
 791          return w.scrollTop;
 792        }
 793        w.scrollTop = v;
 794      }
 795    },
 796  
 797    viewportWidth: 0,
 798    viewportHeight: 0
 799  }, domUtils);
 800  
 801  /***/ }),
 802  
 803  /***/ 2287:
 804  /***/ ((__unused_webpack_module, exports) => {
 805  
 806  "use strict";
 807  var __webpack_unused_export__;
 808  /** @license React v17.0.2
 809   * react-is.production.min.js
 810   *
 811   * Copyright (c) Facebook, Inc. and its affiliates.
 812   *
 813   * This source code is licensed under the MIT license found in the
 814   * LICENSE file in the root directory of this source tree.
 815   */
 816  var 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;
 817  if("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")}
 818  function 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;
 819  __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};
 820  __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};
 821  __webpack_unused_export__=y;
 822  
 823  
 824  /***/ }),
 825  
 826  /***/ 1915:
 827  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 828  
 829  "use strict";
 830  
 831  
 832  if (true) {
 833    /* unused reexport */ __webpack_require__(2287);
 834  } else {}
 835  
 836  
 837  /***/ }),
 838  
 839  /***/ 7734:
 840  /***/ ((module) => {
 841  
 842  "use strict";
 843  
 844  
 845  // do not edit .js files directly - edit src/index.jst
 846  
 847  
 848    var envHasBigInt64Array = typeof BigInt64Array !== 'undefined';
 849  
 850  
 851  module.exports = function equal(a, b) {
 852    if (a === b) return true;
 853  
 854    if (a && b && typeof a == 'object' && typeof b == 'object') {
 855      if (a.constructor !== b.constructor) return false;
 856  
 857      var length, i, keys;
 858      if (Array.isArray(a)) {
 859        length = a.length;
 860        if (length != b.length) return false;
 861        for (i = length; i-- !== 0;)
 862          if (!equal(a[i], b[i])) return false;
 863        return true;
 864      }
 865  
 866  
 867      if ((a instanceof Map) && (b instanceof Map)) {
 868        if (a.size !== b.size) return false;
 869        for (i of a.entries())
 870          if (!b.has(i[0])) return false;
 871        for (i of a.entries())
 872          if (!equal(i[1], b.get(i[0]))) return false;
 873        return true;
 874      }
 875  
 876      if ((a instanceof Set) && (b instanceof Set)) {
 877        if (a.size !== b.size) return false;
 878        for (i of a.entries())
 879          if (!b.has(i[0])) return false;
 880        return true;
 881      }
 882  
 883      if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
 884        length = a.length;
 885        if (length != b.length) return false;
 886        for (i = length; i-- !== 0;)
 887          if (a[i] !== b[i]) return false;
 888        return true;
 889      }
 890  
 891  
 892      if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
 893      if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
 894      if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
 895  
 896      keys = Object.keys(a);
 897      length = keys.length;
 898      if (length !== Object.keys(b).length) return false;
 899  
 900      for (i = length; i-- !== 0;)
 901        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
 902  
 903      for (i = length; i-- !== 0;) {
 904        var key = keys[i];
 905  
 906        if (!equal(a[key], b[key])) return false;
 907      }
 908  
 909      return true;
 910    }
 911  
 912    // true if both NaN, false otherwise
 913    return a!==a && b!==b;
 914  };
 915  
 916  
 917  /***/ }),
 918  
 919  /***/ 8924:
 920  /***/ ((__unused_webpack_module, exports) => {
 921  
 922  // Copyright (c) 2014 Rafael Caricio. All rights reserved.
 923  // Use of this source code is governed by a BSD-style license that can be
 924  // found in the LICENSE file.
 925  
 926  var GradientParser = {};
 927  
 928  GradientParser.parse = (function() {
 929  
 930    var tokens = {
 931      linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
 932      repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
 933      radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
 934      repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
 935      sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
 936      extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
 937      positionKeywords: /^(left|center|right|top|bottom)/i,
 938      pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
 939      percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
 940      emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
 941      angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
 942      startCall: /^\(/,
 943      endCall: /^\)/,
 944      comma: /^,/,
 945      hexColor: /^\#([0-9a-fA-F]+)/,
 946      literalColor: /^([a-zA-Z]+)/,
 947      rgbColor: /^rgb/i,
 948      rgbaColor: /^rgba/i,
 949      number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
 950    };
 951  
 952    var input = '';
 953  
 954    function error(msg) {
 955      var err = new Error(input + ': ' + msg);
 956      err.source = input;
 957      throw err;
 958    }
 959  
 960    function getAST() {
 961      var ast = matchListDefinitions();
 962  
 963      if (input.length > 0) {
 964        error('Invalid input not EOF');
 965      }
 966  
 967      return ast;
 968    }
 969  
 970    function matchListDefinitions() {
 971      return matchListing(matchDefinition);
 972    }
 973  
 974    function matchDefinition() {
 975      return matchGradient(
 976              'linear-gradient',
 977              tokens.linearGradient,
 978              matchLinearOrientation) ||
 979  
 980            matchGradient(
 981              'repeating-linear-gradient',
 982              tokens.repeatingLinearGradient,
 983              matchLinearOrientation) ||
 984  
 985            matchGradient(
 986              'radial-gradient',
 987              tokens.radialGradient,
 988              matchListRadialOrientations) ||
 989  
 990            matchGradient(
 991              'repeating-radial-gradient',
 992              tokens.repeatingRadialGradient,
 993              matchListRadialOrientations);
 994    }
 995  
 996    function matchGradient(gradientType, pattern, orientationMatcher) {
 997      return matchCall(pattern, function(captures) {
 998  
 999        var orientation = orientationMatcher();
1000        if (orientation) {
1001          if (!scan(tokens.comma)) {
1002            error('Missing comma before color stops');
1003          }
1004        }
1005  
1006        return {
1007          type: gradientType,
1008          orientation: orientation,
1009          colorStops: matchListing(matchColorStop)
1010        };
1011      });
1012    }
1013  
1014    function matchCall(pattern, callback) {
1015      var captures = scan(pattern);
1016  
1017      if (captures) {
1018        if (!scan(tokens.startCall)) {
1019          error('Missing (');
1020        }
1021  
1022        result = callback(captures);
1023  
1024        if (!scan(tokens.endCall)) {
1025          error('Missing )');
1026        }
1027  
1028        return result;
1029      }
1030    }
1031  
1032    function matchLinearOrientation() {
1033      return matchSideOrCorner() ||
1034        matchAngle();
1035    }
1036  
1037    function matchSideOrCorner() {
1038      return match('directional', tokens.sideOrCorner, 1);
1039    }
1040  
1041    function matchAngle() {
1042      return match('angular', tokens.angleValue, 1);
1043    }
1044  
1045    function matchListRadialOrientations() {
1046      var radialOrientations,
1047          radialOrientation = matchRadialOrientation(),
1048          lookaheadCache;
1049  
1050      if (radialOrientation) {
1051        radialOrientations = [];
1052        radialOrientations.push(radialOrientation);
1053  
1054        lookaheadCache = input;
1055        if (scan(tokens.comma)) {
1056          radialOrientation = matchRadialOrientation();
1057          if (radialOrientation) {
1058            radialOrientations.push(radialOrientation);
1059          } else {
1060            input = lookaheadCache;
1061          }
1062        }
1063      }
1064  
1065      return radialOrientations;
1066    }
1067  
1068    function matchRadialOrientation() {
1069      var radialType = matchCircle() ||
1070        matchEllipse();
1071  
1072      if (radialType) {
1073        radialType.at = matchAtPosition();
1074      } else {
1075        var defaultPosition = matchPositioning();
1076        if (defaultPosition) {
1077          radialType = {
1078            type: 'default-radial',
1079            at: defaultPosition
1080          };
1081        }
1082      }
1083  
1084      return radialType;
1085    }
1086  
1087    function matchCircle() {
1088      var circle = match('shape', /^(circle)/i, 0);
1089  
1090      if (circle) {
1091        circle.style = matchLength() || matchExtentKeyword();
1092      }
1093  
1094      return circle;
1095    }
1096  
1097    function matchEllipse() {
1098      var ellipse = match('shape', /^(ellipse)/i, 0);
1099  
1100      if (ellipse) {
1101        ellipse.style =  matchDistance() || matchExtentKeyword();
1102      }
1103  
1104      return ellipse;
1105    }
1106  
1107    function matchExtentKeyword() {
1108      return match('extent-keyword', tokens.extentKeywords, 1);
1109    }
1110  
1111    function matchAtPosition() {
1112      if (match('position', /^at/, 0)) {
1113        var positioning = matchPositioning();
1114  
1115        if (!positioning) {
1116          error('Missing positioning value');
1117        }
1118  
1119        return positioning;
1120      }
1121    }
1122  
1123    function matchPositioning() {
1124      var location = matchCoordinates();
1125  
1126      if (location.x || location.y) {
1127        return {
1128          type: 'position',
1129          value: location
1130        };
1131      }
1132    }
1133  
1134    function matchCoordinates() {
1135      return {
1136        x: matchDistance(),
1137        y: matchDistance()
1138      };
1139    }
1140  
1141    function matchListing(matcher) {
1142      var captures = matcher(),
1143        result = [];
1144  
1145      if (captures) {
1146        result.push(captures);
1147        while (scan(tokens.comma)) {
1148          captures = matcher();
1149          if (captures) {
1150            result.push(captures);
1151          } else {
1152            error('One extra comma');
1153          }
1154        }
1155      }
1156  
1157      return result;
1158    }
1159  
1160    function matchColorStop() {
1161      var color = matchColor();
1162  
1163      if (!color) {
1164        error('Expected color definition');
1165      }
1166  
1167      color.length = matchDistance();
1168      return color;
1169    }
1170  
1171    function matchColor() {
1172      return matchHexColor() ||
1173        matchRGBAColor() ||
1174        matchRGBColor() ||
1175        matchLiteralColor();
1176    }
1177  
1178    function matchLiteralColor() {
1179      return match('literal', tokens.literalColor, 0);
1180    }
1181  
1182    function matchHexColor() {
1183      return match('hex', tokens.hexColor, 1);
1184    }
1185  
1186    function matchRGBColor() {
1187      return matchCall(tokens.rgbColor, function() {
1188        return  {
1189          type: 'rgb',
1190          value: matchListing(matchNumber)
1191        };
1192      });
1193    }
1194  
1195    function matchRGBAColor() {
1196      return matchCall(tokens.rgbaColor, function() {
1197        return  {
1198          type: 'rgba',
1199          value: matchListing(matchNumber)
1200        };
1201      });
1202    }
1203  
1204    function matchNumber() {
1205      return scan(tokens.number)[1];
1206    }
1207  
1208    function matchDistance() {
1209      return match('%', tokens.percentageValue, 1) ||
1210        matchPositionKeyword() ||
1211        matchLength();
1212    }
1213  
1214    function matchPositionKeyword() {
1215      return match('position-keyword', tokens.positionKeywords, 1);
1216    }
1217  
1218    function matchLength() {
1219      return match('px', tokens.pixelValue, 1) ||
1220        match('em', tokens.emValue, 1);
1221    }
1222  
1223    function match(type, pattern, captureIndex) {
1224      var captures = scan(pattern);
1225      if (captures) {
1226        return {
1227          type: type,
1228          value: captures[captureIndex]
1229        };
1230      }
1231    }
1232  
1233    function scan(regexp) {
1234      var captures,
1235          blankCaptures;
1236  
1237      blankCaptures = /^[\n\r\t\s]+/.exec(input);
1238      if (blankCaptures) {
1239          consume(blankCaptures[0].length);
1240      }
1241  
1242      captures = regexp.exec(input);
1243      if (captures) {
1244          consume(captures[0].length);
1245      }
1246  
1247      return captures;
1248    }
1249  
1250    function consume(size) {
1251      input = input.substr(size);
1252    }
1253  
1254    return function(code) {
1255      input = code.toString();
1256      return getAST();
1257    };
1258  })();
1259  
1260  exports.parse = (GradientParser || {}).parse;
1261  
1262  
1263  /***/ }),
1264  
1265  /***/ 9664:
1266  /***/ ((module) => {
1267  
1268  module.exports =
1269  /******/ (function(modules) { // webpackBootstrap
1270  /******/     // The module cache
1271  /******/     var installedModules = {};
1272  /******/
1273  /******/     // The require function
1274  /******/ 	function __nested_webpack_require_187__(moduleId) {
1275  /******/
1276  /******/         // Check if module is in cache
1277  /******/         if(installedModules[moduleId])
1278  /******/             return installedModules[moduleId].exports;
1279  /******/
1280  /******/         // Create a new module (and put it into the cache)
1281  /******/         var module = installedModules[moduleId] = {
1282  /******/             exports: {},
1283  /******/             id: moduleId,
1284  /******/             loaded: false
1285  /******/         };
1286  /******/
1287  /******/         // Execute the module function
1288  /******/         modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_187__);
1289  /******/
1290  /******/         // Flag the module as loaded
1291  /******/         module.loaded = true;
1292  /******/
1293  /******/         // Return the exports of the module
1294  /******/         return module.exports;
1295  /******/     }
1296  /******/
1297  /******/
1298  /******/     // expose the modules object (__webpack_modules__)
1299  /******/     __nested_webpack_require_187__.m = modules;
1300  /******/
1301  /******/     // expose the module cache
1302  /******/     __nested_webpack_require_187__.c = installedModules;
1303  /******/
1304  /******/     // __webpack_public_path__
1305  /******/     __nested_webpack_require_187__.p = "";
1306  /******/
1307  /******/     // Load entry module and return exports
1308  /******/     return __nested_webpack_require_187__(0);
1309  /******/ })
1310  /************************************************************************/
1311  /******/ ([
1312  /* 0 */
1313  /***/ (function(module, exports, __nested_webpack_require_1468__) {
1314  
1315      module.exports = __nested_webpack_require_1468__(1);
1316  
1317  
1318  /***/ }),
1319  /* 1 */
1320  /***/ (function(module, exports, __nested_webpack_require_1587__) {
1321  
1322      'use strict';
1323      
1324      Object.defineProperty(exports, "__esModule", {
1325        value: true
1326      });
1327      
1328      var _utils = __nested_webpack_require_1587__(2);
1329      
1330      Object.defineProperty(exports, 'combineChunks', {
1331        enumerable: true,
1332        get: function get() {
1333          return _utils.combineChunks;
1334        }
1335      });
1336      Object.defineProperty(exports, 'fillInChunks', {
1337        enumerable: true,
1338        get: function get() {
1339          return _utils.fillInChunks;
1340        }
1341      });
1342      Object.defineProperty(exports, 'findAll', {
1343        enumerable: true,
1344        get: function get() {
1345          return _utils.findAll;
1346        }
1347      });
1348      Object.defineProperty(exports, 'findChunks', {
1349        enumerable: true,
1350        get: function get() {
1351          return _utils.findChunks;
1352        }
1353      });
1354  
1355  /***/ }),
1356  /* 2 */
1357  /***/ (function(module, exports) {
1358  
1359      'use strict';
1360      
1361      Object.defineProperty(exports, "__esModule", {
1362        value: true
1363      });
1364      
1365      
1366      /**
1367       * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word.
1368       * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean })
1369       */
1370      var findAll = exports.findAll = function findAll(_ref) {
1371        var autoEscape = _ref.autoEscape,
1372            _ref$caseSensitive = _ref.caseSensitive,
1373            caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive,
1374            _ref$findChunks = _ref.findChunks,
1375            findChunks = _ref$findChunks === undefined ? defaultFindChunks : _ref$findChunks,
1376            sanitize = _ref.sanitize,
1377            searchWords = _ref.searchWords,
1378            textToHighlight = _ref.textToHighlight;
1379        return fillInChunks({
1380          chunksToHighlight: combineChunks({
1381            chunks: findChunks({
1382              autoEscape: autoEscape,
1383              caseSensitive: caseSensitive,
1384              sanitize: sanitize,
1385              searchWords: searchWords,
1386              textToHighlight: textToHighlight
1387            })
1388          }),
1389          totalLength: textToHighlight ? textToHighlight.length : 0
1390        });
1391      };
1392      
1393      /**
1394       * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks.
1395       * @return {start:number, end:number}[]
1396       */
1397      
1398      
1399      var combineChunks = exports.combineChunks = function combineChunks(_ref2) {
1400        var chunks = _ref2.chunks;
1401      
1402        chunks = chunks.sort(function (first, second) {
1403          return first.start - second.start;
1404        }).reduce(function (processedChunks, nextChunk) {
1405          // First chunk just goes straight in the array...
1406          if (processedChunks.length === 0) {
1407            return [nextChunk];
1408          } else {
1409            // ... subsequent chunks get checked to see if they overlap...
1410            var prevChunk = processedChunks.pop();
1411            if (nextChunk.start <= prevChunk.end) {
1412              // It may be the case that prevChunk completely surrounds nextChunk, so take the
1413              // largest of the end indeces.
1414              var endIndex = Math.max(prevChunk.end, nextChunk.end);
1415              processedChunks.push({ highlight: false, start: prevChunk.start, end: endIndex });
1416            } else {
1417              processedChunks.push(prevChunk, nextChunk);
1418            }
1419            return processedChunks;
1420          }
1421        }, []);
1422      
1423        return chunks;
1424      };
1425      
1426      /**
1427       * Examine text for any matches.
1428       * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}).
1429       * @return {start:number, end:number}[]
1430       */
1431      var defaultFindChunks = function defaultFindChunks(_ref3) {
1432        var autoEscape = _ref3.autoEscape,
1433            caseSensitive = _ref3.caseSensitive,
1434            _ref3$sanitize = _ref3.sanitize,
1435            sanitize = _ref3$sanitize === undefined ? defaultSanitize : _ref3$sanitize,
1436            searchWords = _ref3.searchWords,
1437            textToHighlight = _ref3.textToHighlight;
1438      
1439        textToHighlight = sanitize(textToHighlight);
1440      
1441        return searchWords.filter(function (searchWord) {
1442          return searchWord;
1443        }) // Remove empty words
1444        .reduce(function (chunks, searchWord) {
1445          searchWord = sanitize(searchWord);
1446      
1447          if (autoEscape) {
1448            searchWord = escapeRegExpFn(searchWord);
1449          }
1450      
1451          var regex = new RegExp(searchWord, caseSensitive ? 'g' : 'gi');
1452      
1453          var match = void 0;
1454          while (match = regex.exec(textToHighlight)) {
1455            var _start = match.index;
1456            var _end = regex.lastIndex;
1457            // We do not return zero-length matches
1458            if (_end > _start) {
1459              chunks.push({ highlight: false, start: _start, end: _end });
1460            }
1461      
1462            // Prevent browsers like Firefox from getting stuck in an infinite loop
1463            // See http://www.regexguru.com/2008/04/watch-out-for-zero-length-matches/
1464            if (match.index === regex.lastIndex) {
1465              regex.lastIndex++;
1466            }
1467          }
1468      
1469          return chunks;
1470        }, []);
1471      };
1472      // Allow the findChunks to be overridden in findAll,
1473      // but for backwards compatibility we export as the old name
1474      exports.findChunks = defaultFindChunks;
1475      
1476      /**
1477       * Given a set of chunks to highlight, create an additional set of chunks
1478       * to represent the bits of text between the highlighted text.
1479       * @param chunksToHighlight {start:number, end:number}[]
1480       * @param totalLength number
1481       * @return {start:number, end:number, highlight:boolean}[]
1482       */
1483      
1484      var fillInChunks = exports.fillInChunks = function fillInChunks(_ref4) {
1485        var chunksToHighlight = _ref4.chunksToHighlight,
1486            totalLength = _ref4.totalLength;
1487      
1488        var allChunks = [];
1489        var append = function append(start, end, highlight) {
1490          if (end - start > 0) {
1491            allChunks.push({
1492              start: start,
1493              end: end,
1494              highlight: highlight
1495            });
1496          }
1497        };
1498      
1499        if (chunksToHighlight.length === 0) {
1500          append(0, totalLength, false);
1501        } else {
1502          var lastIndex = 0;
1503          chunksToHighlight.forEach(function (chunk) {
1504            append(lastIndex, chunk.start, false);
1505            append(chunk.start, chunk.end, true);
1506            lastIndex = chunk.end;
1507          });
1508          append(lastIndex, totalLength, false);
1509        }
1510        return allChunks;
1511      };
1512      
1513  	function defaultSanitize(string) {
1514        return string;
1515      }
1516      
1517  	function escapeRegExpFn(string) {
1518        return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
1519      }
1520  
1521  /***/ })
1522  /******/ ]);
1523  
1524  
1525  /***/ }),
1526  
1527  /***/ 1880:
1528  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1529  
1530  "use strict";
1531  
1532  
1533  var reactIs = __webpack_require__(1178);
1534  
1535  /**
1536   * Copyright 2015, Yahoo! Inc.
1537   * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
1538   */
1539  var REACT_STATICS = {
1540    childContextTypes: true,
1541    contextType: true,
1542    contextTypes: true,
1543    defaultProps: true,
1544    displayName: true,
1545    getDefaultProps: true,
1546    getDerivedStateFromError: true,
1547    getDerivedStateFromProps: true,
1548    mixins: true,
1549    propTypes: true,
1550    type: true
1551  };
1552  var KNOWN_STATICS = {
1553    name: true,
1554    length: true,
1555    prototype: true,
1556    caller: true,
1557    callee: true,
1558    arguments: true,
1559    arity: true
1560  };
1561  var FORWARD_REF_STATICS = {
1562    '$$typeof': true,
1563    render: true,
1564    defaultProps: true,
1565    displayName: true,
1566    propTypes: true
1567  };
1568  var MEMO_STATICS = {
1569    '$$typeof': true,
1570    compare: true,
1571    defaultProps: true,
1572    displayName: true,
1573    propTypes: true,
1574    type: true
1575  };
1576  var TYPE_STATICS = {};
1577  TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
1578  TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
1579  
1580  function getStatics(component) {
1581    // React v16.11 and below
1582    if (reactIs.isMemo(component)) {
1583      return MEMO_STATICS;
1584    } // React v16.12 and above
1585  
1586  
1587    return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
1588  }
1589  
1590  var defineProperty = Object.defineProperty;
1591  var getOwnPropertyNames = Object.getOwnPropertyNames;
1592  var getOwnPropertySymbols = Object.getOwnPropertySymbols;
1593  var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
1594  var getPrototypeOf = Object.getPrototypeOf;
1595  var objectPrototype = Object.prototype;
1596  function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
1597    if (typeof sourceComponent !== 'string') {
1598      // don't hoist over string (html) components
1599      if (objectPrototype) {
1600        var inheritedComponent = getPrototypeOf(sourceComponent);
1601  
1602        if (inheritedComponent && inheritedComponent !== objectPrototype) {
1603          hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
1604        }
1605      }
1606  
1607      var keys = getOwnPropertyNames(sourceComponent);
1608  
1609      if (getOwnPropertySymbols) {
1610        keys = keys.concat(getOwnPropertySymbols(sourceComponent));
1611      }
1612  
1613      var targetStatics = getStatics(targetComponent);
1614      var sourceStatics = getStatics(sourceComponent);
1615  
1616      for (var i = 0; i < keys.length; ++i) {
1617        var key = keys[i];
1618  
1619        if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
1620          var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
1621  
1622          try {
1623            // Avoid failures from read-only properties
1624            defineProperty(targetComponent, key, descriptor);
1625          } catch (e) {}
1626        }
1627      }
1628    }
1629  
1630    return targetComponent;
1631  }
1632  
1633  module.exports = hoistNonReactStatics;
1634  
1635  
1636  /***/ }),
1637  
1638  /***/ 2950:
1639  /***/ ((__unused_webpack_module, exports) => {
1640  
1641  "use strict";
1642  /** @license React v16.13.1
1643   * react-is.production.min.js
1644   *
1645   * Copyright (c) Facebook, Inc. and its affiliates.
1646   *
1647   * This source code is licensed under the MIT license found in the
1648   * LICENSE file in the root directory of this source tree.
1649   */
1650  
1651  var 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?
1652  Symbol.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;
1653  function 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;
1654  exports.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};
1655  exports.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};
1656  exports.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;
1657  
1658  
1659  /***/ }),
1660  
1661  /***/ 1178:
1662  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1663  
1664  "use strict";
1665  
1666  
1667  if (true) {
1668    module.exports = __webpack_require__(2950);
1669  } else {}
1670  
1671  
1672  /***/ }),
1673  
1674  /***/ 628:
1675  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1676  
1677  "use strict";
1678  /**
1679   * Copyright (c) 2013-present, Facebook, Inc.
1680   *
1681   * This source code is licensed under the MIT license found in the
1682   * LICENSE file in the root directory of this source tree.
1683   */
1684  
1685  
1686  
1687  var ReactPropTypesSecret = __webpack_require__(4067);
1688  
1689  function emptyFunction() {}
1690  function emptyFunctionWithReset() {}
1691  emptyFunctionWithReset.resetWarningCache = emptyFunction;
1692  
1693  module.exports = function() {
1694    function shim(props, propName, componentName, location, propFullName, secret) {
1695      if (secret === ReactPropTypesSecret) {
1696        // It is still safe when called from React.
1697        return;
1698      }
1699      var err = new Error(
1700        'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1701        'Use PropTypes.checkPropTypes() to call them. ' +
1702        'Read more at http://fb.me/use-check-prop-types'
1703      );
1704      err.name = 'Invariant Violation';
1705      throw err;
1706    };
1707    shim.isRequired = shim;
1708    function getShim() {
1709      return shim;
1710    };
1711    // Important!
1712    // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
1713    var ReactPropTypes = {
1714      array: shim,
1715      bigint: shim,
1716      bool: shim,
1717      func: shim,
1718      number: shim,
1719      object: shim,
1720      string: shim,
1721      symbol: shim,
1722  
1723      any: shim,
1724      arrayOf: getShim,
1725      element: shim,
1726      elementType: shim,
1727      instanceOf: getShim,
1728      node: shim,
1729      objectOf: getShim,
1730      oneOf: getShim,
1731      oneOfType: getShim,
1732      shape: getShim,
1733      exact: getShim,
1734  
1735      checkPropTypes: emptyFunctionWithReset,
1736      resetWarningCache: emptyFunction
1737    };
1738  
1739    ReactPropTypes.PropTypes = ReactPropTypes;
1740  
1741    return ReactPropTypes;
1742  };
1743  
1744  
1745  /***/ }),
1746  
1747  /***/ 5826:
1748  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1749  
1750  /**
1751   * Copyright (c) 2013-present, Facebook, Inc.
1752   *
1753   * This source code is licensed under the MIT license found in the
1754   * LICENSE file in the root directory of this source tree.
1755   */
1756  
1757  if (false) { var throwOnDirectAccess, ReactIs; } else {
1758    // By explicitly using `prop-types` you are opting into new production behavior.
1759    // http://fb.me/prop-types-in-prod
1760    module.exports = __webpack_require__(628)();
1761  }
1762  
1763  
1764  /***/ }),
1765  
1766  /***/ 4067:
1767  /***/ ((module) => {
1768  
1769  "use strict";
1770  /**
1771   * Copyright (c) 2013-present, Facebook, Inc.
1772   *
1773   * This source code is licensed under the MIT license found in the
1774   * LICENSE file in the root directory of this source tree.
1775   */
1776  
1777  
1778  
1779  var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
1780  
1781  module.exports = ReactPropTypesSecret;
1782  
1783  
1784  /***/ }),
1785  
1786  /***/ 3394:
1787  /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1788  
1789  "use strict";
1790  /**
1791   * @license React
1792   * react-jsx-runtime.production.min.js
1793   *
1794   * Copyright (c) Facebook, Inc. and its affiliates.
1795   *
1796   * This source code is licensed under the MIT license found in the
1797   * LICENSE file in the root directory of this source tree.
1798   */
1799  var f=__webpack_require__(1609),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
1800  function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;
1801  
1802  
1803  /***/ }),
1804  
1805  /***/ 4922:
1806  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
1807  
1808  "use strict";
1809  
1810  
1811  if (true) {
1812    module.exports = __webpack_require__(3394);
1813  } else {}
1814  
1815  
1816  /***/ }),
1817  
1818  /***/ 9681:
1819  /***/ ((module) => {
1820  
1821  var characterMap = {
1822      "À": "A",
1823      "Á": "A",
1824      "Â": "A",
1825      "Ã": "A",
1826      "Ä": "A",
1827      "Å": "A",
1828      "Ấ": "A",
1829      "Ắ": "A",
1830      "Ẳ": "A",
1831      "Ẵ": "A",
1832      "Ặ": "A",
1833      "Æ": "AE",
1834      "Ầ": "A",
1835      "Ằ": "A",
1836      "Ȃ": "A",
1837      "Ả": "A",
1838      "Ạ": "A",
1839      "Ẩ": "A",
1840      "Ẫ": "A",
1841      "Ậ": "A",
1842      "Ç": "C",
1843      "Ḉ": "C",
1844      "È": "E",
1845      "É": "E",
1846      "Ê": "E",
1847      "Ë": "E",
1848      "Ế": "E",
1849      "Ḗ": "E",
1850      "Ề": "E",
1851      "Ḕ": "E",
1852      "Ḝ": "E",
1853      "Ȇ": "E",
1854      "Ẻ": "E",
1855      "Ẽ": "E",
1856      "Ẹ": "E",
1857      "Ể": "E",
1858      "Ễ": "E",
1859      "Ệ": "E",
1860      "Ì": "I",
1861      "Í": "I",
1862      "Î": "I",
1863      "Ï": "I",
1864      "Ḯ": "I",
1865      "Ȋ": "I",
1866      "Ỉ": "I",
1867      "Ị": "I",
1868      "Ð": "D",
1869      "Ñ": "N",
1870      "Ò": "O",
1871      "Ó": "O",
1872      "Ô": "O",
1873      "Õ": "O",
1874      "Ö": "O",
1875      "Ø": "O",
1876      "Ố": "O",
1877      "Ṍ": "O",
1878      "Ṓ": "O",
1879      "Ȏ": "O",
1880      "Ỏ": "O",
1881      "Ọ": "O",
1882      "Ổ": "O",
1883      "Ỗ": "O",
1884      "Ộ": "O",
1885      "Ờ": "O",
1886      "Ở": "O",
1887      "Ỡ": "O",
1888      "Ớ": "O",
1889      "Ợ": "O",
1890      "Ù": "U",
1891      "Ú": "U",
1892      "Û": "U",
1893      "Ü": "U",
1894      "Ủ": "U",
1895      "Ụ": "U",
1896      "Ử": "U",
1897      "Ữ": "U",
1898      "Ự": "U",
1899      "Ý": "Y",
1900      "à": "a",
1901      "á": "a",
1902      "â": "a",
1903      "ã": "a",
1904      "ä": "a",
1905      "å": "a",
1906      "ấ": "a",
1907      "ắ": "a",
1908      "ẳ": "a",
1909      "ẵ": "a",
1910      "ặ": "a",
1911      "æ": "ae",
1912      "ầ": "a",
1913      "ằ": "a",
1914      "ȃ": "a",
1915      "ả": "a",
1916      "ạ": "a",
1917      "ẩ": "a",
1918      "ẫ": "a",
1919      "ậ": "a",
1920      "ç": "c",
1921      "ḉ": "c",
1922      "è": "e",
1923      "é": "e",
1924      "ê": "e",
1925      "ë": "e",
1926      "ế": "e",
1927      "ḗ": "e",
1928      "ề": "e",
1929      "ḕ": "e",
1930      "ḝ": "e",
1931      "ȇ": "e",
1932      "ẻ": "e",
1933      "ẽ": "e",
1934      "ẹ": "e",
1935      "ể": "e",
1936      "ễ": "e",
1937      "ệ": "e",
1938      "ì": "i",
1939      "í": "i",
1940      "î": "i",
1941      "ï": "i",
1942      "ḯ": "i",
1943      "ȋ": "i",
1944      "ỉ": "i",
1945      "ị": "i",
1946      "ð": "d",
1947      "ñ": "n",
1948      "ò": "o",
1949      "ó": "o",
1950      "ô": "o",
1951      "õ": "o",
1952      "ö": "o",
1953      "ø": "o",
1954      "ố": "o",
1955      "ṍ": "o",
1956      "ṓ": "o",
1957      "ȏ": "o",
1958      "ỏ": "o",
1959      "ọ": "o",
1960      "ổ": "o",
1961      "ỗ": "o",
1962      "ộ": "o",
1963      "ờ": "o",
1964      "ở": "o",
1965      "ỡ": "o",
1966      "ớ": "o",
1967      "ợ": "o",
1968      "ù": "u",
1969      "ú": "u",
1970      "û": "u",
1971      "ü": "u",
1972      "ủ": "u",
1973      "ụ": "u",
1974      "ử": "u",
1975      "ữ": "u",
1976      "ự": "u",
1977      "ý": "y",
1978      "ÿ": "y",
1979      "Ā": "A",
1980      "ā": "a",
1981      "Ă": "A",
1982      "ă": "a",
1983      "Ą": "A",
1984      "ą": "a",
1985      "Ć": "C",
1986      "ć": "c",
1987      "Ĉ": "C",
1988      "ĉ": "c",
1989      "Ċ": "C",
1990      "ċ": "c",
1991      "Č": "C",
1992      "č": "c",
1993      "C̆": "C",
1994      "c̆": "c",
1995      "Ď": "D",
1996      "ď": "d",
1997      "Đ": "D",
1998      "đ": "d",
1999      "Ē": "E",
2000      "ē": "e",
2001      "Ĕ": "E",
2002      "ĕ": "e",
2003      "Ė": "E",
2004      "ė": "e",
2005      "Ę": "E",
2006      "ę": "e",
2007      "Ě": "E",
2008      "ě": "e",
2009      "Ĝ": "G",
2010      "Ǵ": "G",
2011      "ĝ": "g",
2012      "ǵ": "g",
2013      "Ğ": "G",
2014      "ğ": "g",
2015      "Ġ": "G",
2016      "ġ": "g",
2017      "Ģ": "G",
2018      "ģ": "g",
2019      "Ĥ": "H",
2020      "ĥ": "h",
2021      "Ħ": "H",
2022      "ħ": "h",
2023      "Ḫ": "H",
2024      "ḫ": "h",
2025      "Ĩ": "I",
2026      "ĩ": "i",
2027      "Ī": "I",
2028      "ī": "i",
2029      "Ĭ": "I",
2030      "ĭ": "i",
2031      "Į": "I",
2032      "į": "i",
2033      "İ": "I",
2034      "ı": "i",
2035      "IJ": "IJ",
2036      "ij": "ij",
2037      "Ĵ": "J",
2038      "ĵ": "j",
2039      "Ķ": "K",
2040      "ķ": "k",
2041      "Ḱ": "K",
2042      "ḱ": "k",
2043      "K̆": "K",
2044      "k̆": "k",
2045      "Ĺ": "L",
2046      "ĺ": "l",
2047      "Ļ": "L",
2048      "ļ": "l",
2049      "Ľ": "L",
2050      "ľ": "l",
2051      "Ŀ": "L",
2052      "ŀ": "l",
2053      "Ł": "l",
2054      "ł": "l",
2055      "Ḿ": "M",
2056      "ḿ": "m",
2057      "M̆": "M",
2058      "m̆": "m",
2059      "Ń": "N",
2060      "ń": "n",
2061      "Ņ": "N",
2062      "ņ": "n",
2063      "Ň": "N",
2064      "ň": "n",
2065      "ʼn": "n",
2066      "N̆": "N",
2067      "n̆": "n",
2068      "Ō": "O",
2069      "ō": "o",
2070      "Ŏ": "O",
2071      "ŏ": "o",
2072      "Ő": "O",
2073      "ő": "o",
2074      "Œ": "OE",
2075      "œ": "oe",
2076      "P̆": "P",
2077      "p̆": "p",
2078      "Ŕ": "R",
2079      "ŕ": "r",
2080      "Ŗ": "R",
2081      "ŗ": "r",
2082      "Ř": "R",
2083      "ř": "r",
2084      "R̆": "R",
2085      "r̆": "r",
2086      "Ȓ": "R",
2087      "ȓ": "r",
2088      "Ś": "S",
2089      "ś": "s",
2090      "Ŝ": "S",
2091      "ŝ": "s",
2092      "Ş": "S",
2093      "Ș": "S",
2094      "ș": "s",
2095      "ş": "s",
2096      "Š": "S",
2097      "š": "s",
2098      "Ţ": "T",
2099      "ţ": "t",
2100      "ț": "t",
2101      "Ț": "T",
2102      "Ť": "T",
2103      "ť": "t",
2104      "Ŧ": "T",
2105      "ŧ": "t",
2106      "T̆": "T",
2107      "t̆": "t",
2108      "Ũ": "U",
2109      "ũ": "u",
2110      "Ū": "U",
2111      "ū": "u",
2112      "Ŭ": "U",
2113      "ŭ": "u",
2114      "Ů": "U",
2115      "ů": "u",
2116      "Ű": "U",
2117      "ű": "u",
2118      "Ų": "U",
2119      "ų": "u",
2120      "Ȗ": "U",
2121      "ȗ": "u",
2122      "V̆": "V",
2123      "v̆": "v",
2124      "Ŵ": "W",
2125      "ŵ": "w",
2126      "Ẃ": "W",
2127      "ẃ": "w",
2128      "X̆": "X",
2129      "x̆": "x",
2130      "Ŷ": "Y",
2131      "ŷ": "y",
2132      "Ÿ": "Y",
2133      "Y̆": "Y",
2134      "y̆": "y",
2135      "Ź": "Z",
2136      "ź": "z",
2137      "Ż": "Z",
2138      "ż": "z",
2139      "Ž": "Z",
2140      "ž": "z",
2141      "ſ": "s",
2142      "ƒ": "f",
2143      "Ơ": "O",
2144      "ơ": "o",
2145      "Ư": "U",
2146      "ư": "u",
2147      "Ǎ": "A",
2148      "ǎ": "a",
2149      "Ǐ": "I",
2150      "ǐ": "i",
2151      "Ǒ": "O",
2152      "ǒ": "o",
2153      "Ǔ": "U",
2154      "ǔ": "u",
2155      "Ǖ": "U",
2156      "ǖ": "u",
2157      "Ǘ": "U",
2158      "ǘ": "u",
2159      "Ǚ": "U",
2160      "ǚ": "u",
2161      "Ǜ": "U",
2162      "ǜ": "u",
2163      "Ứ": "U",
2164      "ứ": "u",
2165      "Ṹ": "U",
2166      "ṹ": "u",
2167      "Ǻ": "A",
2168      "ǻ": "a",
2169      "Ǽ": "AE",
2170      "ǽ": "ae",
2171      "Ǿ": "O",
2172      "ǿ": "o",
2173      "Þ": "TH",
2174      "þ": "th",
2175      "Ṕ": "P",
2176      "ṕ": "p",
2177      "Ṥ": "S",
2178      "ṥ": "s",
2179      "X́": "X",
2180      "x́": "x",
2181      "Ѓ": "Г",
2182      "ѓ": "г",
2183      "Ќ": "К",
2184      "ќ": "к",
2185      "A̋": "A",
2186      "a̋": "a",
2187      "E̋": "E",
2188      "e̋": "e",
2189      "I̋": "I",
2190      "i̋": "i",
2191      "Ǹ": "N",
2192      "ǹ": "n",
2193      "Ồ": "O",
2194      "ồ": "o",
2195      "Ṑ": "O",
2196      "ṑ": "o",
2197      "Ừ": "U",
2198      "ừ": "u",
2199      "Ẁ": "W",
2200      "ẁ": "w",
2201      "Ỳ": "Y",
2202      "ỳ": "y",
2203      "Ȁ": "A",
2204      "ȁ": "a",
2205      "Ȅ": "E",
2206      "ȅ": "e",
2207      "Ȉ": "I",
2208      "ȉ": "i",
2209      "Ȍ": "O",
2210      "ȍ": "o",
2211      "Ȑ": "R",
2212      "ȑ": "r",
2213      "Ȕ": "U",
2214      "ȕ": "u",
2215      "B̌": "B",
2216      "b̌": "b",
2217      "Č̣": "C",
2218      "č̣": "c",
2219      "Ê̌": "E",
2220      "ê̌": "e",
2221      "F̌": "F",
2222      "f̌": "f",
2223      "Ǧ": "G",
2224      "ǧ": "g",
2225      "Ȟ": "H",
2226      "ȟ": "h",
2227      "J̌": "J",
2228      "ǰ": "j",
2229      "Ǩ": "K",
2230      "ǩ": "k",
2231      "M̌": "M",
2232      "m̌": "m",
2233      "P̌": "P",
2234      "p̌": "p",
2235      "Q̌": "Q",
2236      "q̌": "q",
2237      "Ř̩": "R",
2238      "ř̩": "r",
2239      "Ṧ": "S",
2240      "ṧ": "s",
2241      "V̌": "V",
2242      "v̌": "v",
2243      "W̌": "W",
2244      "w̌": "w",
2245      "X̌": "X",
2246      "x̌": "x",
2247      "Y̌": "Y",
2248      "y̌": "y",
2249      "A̧": "A",
2250      "a̧": "a",
2251      "B̧": "B",
2252      "b̧": "b",
2253      "Ḑ": "D",
2254      "ḑ": "d",
2255      "Ȩ": "E",
2256      "ȩ": "e",
2257      "Ɛ̧": "E",
2258      "ɛ̧": "e",
2259      "Ḩ": "H",
2260      "ḩ": "h",
2261      "I̧": "I",
2262      "i̧": "i",
2263      "Ɨ̧": "I",
2264      "ɨ̧": "i",
2265      "M̧": "M",
2266      "m̧": "m",
2267      "O̧": "O",
2268      "o̧": "o",
2269      "Q̧": "Q",
2270      "q̧": "q",
2271      "U̧": "U",
2272      "u̧": "u",
2273      "X̧": "X",
2274      "x̧": "x",
2275      "Z̧": "Z",
2276      "z̧": "z",
2277      "й":"и",
2278      "Й":"И",
2279      "ё":"е",
2280      "Ё":"Е",
2281  };
2282  
2283  var chars = Object.keys(characterMap).join('|');
2284  var allAccents = new RegExp(chars, 'g');
2285  var firstAccent = new RegExp(chars, '');
2286  
2287  function matcher(match) {
2288      return characterMap[match];
2289  }
2290  
2291  var removeAccents = function(string) {
2292      return string.replace(allAccents, matcher);
2293  };
2294  
2295  var hasAccents = function(string) {
2296      return !!string.match(firstAccent);
2297  };
2298  
2299  module.exports = removeAccents;
2300  module.exports.has = hasAccents;
2301  module.exports.remove = removeAccents;
2302  
2303  
2304  /***/ }),
2305  
2306  /***/ 8477:
2307  /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2308  
2309  "use strict";
2310  /**
2311   * @license React
2312   * use-sync-external-store-shim.production.min.js
2313   *
2314   * Copyright (c) Facebook, Inc. and its affiliates.
2315   *
2316   * This source code is licensed under the MIT license found in the
2317   * LICENSE file in the root directory of this source tree.
2318   */
2319  var e=__webpack_require__(1609);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}
2320  function 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;
2321  
2322  
2323  /***/ }),
2324  
2325  /***/ 422:
2326  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
2327  
2328  "use strict";
2329  
2330  
2331  if (true) {
2332    module.exports = __webpack_require__(8477);
2333  } else {}
2334  
2335  
2336  /***/ }),
2337  
2338  /***/ 1609:
2339  /***/ ((module) => {
2340  
2341  "use strict";
2342  module.exports = window["React"];
2343  
2344  /***/ })
2345  
2346  /******/     });
2347  /************************************************************************/
2348  /******/     // The module cache
2349  /******/     var __webpack_module_cache__ = {};
2350  /******/     
2351  /******/     // The require function
2352  /******/ 	function __webpack_require__(moduleId) {
2353  /******/         // Check if module is in cache
2354  /******/         var cachedModule = __webpack_module_cache__[moduleId];
2355  /******/         if (cachedModule !== undefined) {
2356  /******/             return cachedModule.exports;
2357  /******/         }
2358  /******/         // Create a new module (and put it into the cache)
2359  /******/         var module = __webpack_module_cache__[moduleId] = {
2360  /******/             // no module.id needed
2361  /******/             // no module.loaded needed
2362  /******/             exports: {}
2363  /******/         };
2364  /******/     
2365  /******/         // Execute the module function
2366  /******/         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
2367  /******/     
2368  /******/         // Return the exports of the module
2369  /******/         return module.exports;
2370  /******/     }
2371  /******/     
2372  /************************************************************************/
2373  /******/     /* webpack/runtime/compat get default export */
2374  /******/     (() => {
2375  /******/         // getDefaultExport function for compatibility with non-harmony modules
2376  /******/         __webpack_require__.n = (module) => {
2377  /******/             var getter = module && module.__esModule ?
2378  /******/                 () => (module['default']) :
2379  /******/                 () => (module);
2380  /******/             __webpack_require__.d(getter, { a: getter });
2381  /******/             return getter;
2382  /******/         };
2383  /******/     })();
2384  /******/     
2385  /******/     /* webpack/runtime/create fake namespace object */
2386  /******/     (() => {
2387  /******/         var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
2388  /******/         var leafPrototypes;
2389  /******/         // create a fake namespace object
2390  /******/         // mode & 1: value is a module id, require it
2391  /******/         // mode & 2: merge all properties of value into the ns
2392  /******/         // mode & 4: return value when already ns object
2393  /******/         // mode & 16: return value when it's Promise-like
2394  /******/         // mode & 8|1: behave like require
2395  /******/         __webpack_require__.t = function(value, mode) {
2396  /******/             if(mode & 1) value = this(value);
2397  /******/             if(mode & 8) return value;
2398  /******/             if(typeof value === 'object' && value) {
2399  /******/                 if((mode & 4) && value.__esModule) return value;
2400  /******/                 if((mode & 16) && typeof value.then === 'function') return value;
2401  /******/             }
2402  /******/             var ns = Object.create(null);
2403  /******/             __webpack_require__.r(ns);
2404  /******/             var def = {};
2405  /******/             leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
2406  /******/             for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
2407  /******/                 Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
2408  /******/             }
2409  /******/             def['default'] = () => (value);
2410  /******/             __webpack_require__.d(ns, def);
2411  /******/             return ns;
2412  /******/         };
2413  /******/     })();
2414  /******/     
2415  /******/     /* webpack/runtime/define property getters */
2416  /******/     (() => {
2417  /******/         // define getter functions for harmony exports
2418  /******/         __webpack_require__.d = (exports, definition) => {
2419  /******/             for(var key in definition) {
2420  /******/                 if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
2421  /******/                     Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
2422  /******/                 }
2423  /******/             }
2424  /******/         };
2425  /******/     })();
2426  /******/     
2427  /******/     /* webpack/runtime/hasOwnProperty shorthand */
2428  /******/     (() => {
2429  /******/         __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
2430  /******/     })();
2431  /******/     
2432  /******/     /* webpack/runtime/make namespace object */
2433  /******/     (() => {
2434  /******/         // define __esModule on exports
2435  /******/         __webpack_require__.r = (exports) => {
2436  /******/             if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
2437  /******/                 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2438  /******/             }
2439  /******/             Object.defineProperty(exports, '__esModule', { value: true });
2440  /******/         };
2441  /******/     })();
2442  /******/     
2443  /******/     /* webpack/runtime/nonce */
2444  /******/     (() => {
2445  /******/         __webpack_require__.nc = undefined;
2446  /******/     })();
2447  /******/     
2448  /************************************************************************/
2449  var __webpack_exports__ = {};
2450  // This entry need to be wrapped in an IIFE because it need to be in strict mode.
2451  (() => {
2452  "use strict";
2453  // ESM COMPAT FLAG
2454  __webpack_require__.r(__webpack_exports__);
2455  
2456  // EXPORTS
2457  __webpack_require__.d(__webpack_exports__, {
2458    AnglePickerControl: () => (/* reexport */ angle_picker_control),
2459    Animate: () => (/* reexport */ animate),
2460    Autocomplete: () => (/* reexport */ Autocomplete),
2461    BaseControl: () => (/* reexport */ base_control),
2462    BlockQuotation: () => (/* reexport */ external_wp_primitives_namespaceObject.BlockQuotation),
2463    Button: () => (/* reexport */ build_module_button),
2464    ButtonGroup: () => (/* reexport */ button_group),
2465    Card: () => (/* reexport */ card_component),
2466    CardBody: () => (/* reexport */ card_body_component),
2467    CardDivider: () => (/* reexport */ card_divider_component),
2468    CardFooter: () => (/* reexport */ card_footer_component),
2469    CardHeader: () => (/* reexport */ card_header_component),
2470    CardMedia: () => (/* reexport */ card_media_component),
2471    CheckboxControl: () => (/* reexport */ checkbox_control),
2472    Circle: () => (/* reexport */ external_wp_primitives_namespaceObject.Circle),
2473    ClipboardButton: () => (/* reexport */ ClipboardButton),
2474    ColorIndicator: () => (/* reexport */ color_indicator),
2475    ColorPalette: () => (/* reexport */ color_palette),
2476    ColorPicker: () => (/* reexport */ LegacyAdapter),
2477    ComboboxControl: () => (/* reexport */ combobox_control),
2478    CustomGradientPicker: () => (/* reexport */ custom_gradient_picker),
2479    CustomSelectControl: () => (/* reexport */ StableCustomSelectControl),
2480    Dashicon: () => (/* reexport */ dashicon),
2481    DatePicker: () => (/* reexport */ date),
2482    DateTimePicker: () => (/* reexport */ build_module_date_time),
2483    Disabled: () => (/* reexport */ disabled),
2484    Draggable: () => (/* reexport */ draggable),
2485    DropZone: () => (/* reexport */ drop_zone),
2486    DropZoneProvider: () => (/* reexport */ DropZoneProvider),
2487    Dropdown: () => (/* reexport */ dropdown),
2488    DropdownMenu: () => (/* reexport */ dropdown_menu),
2489    DuotonePicker: () => (/* reexport */ duotone_picker),
2490    DuotoneSwatch: () => (/* reexport */ duotone_swatch),
2491    ExternalLink: () => (/* reexport */ external_link),
2492    Fill: () => (/* reexport */ slot_fill_Fill),
2493    Flex: () => (/* reexport */ flex_component),
2494    FlexBlock: () => (/* reexport */ flex_block_component),
2495    FlexItem: () => (/* reexport */ flex_item_component),
2496    FocalPointPicker: () => (/* reexport */ focal_point_picker),
2497    FocusReturnProvider: () => (/* reexport */ with_focus_return_Provider),
2498    FocusableIframe: () => (/* reexport */ FocusableIframe),
2499    FontSizePicker: () => (/* reexport */ font_size_picker),
2500    FormFileUpload: () => (/* reexport */ form_file_upload),
2501    FormToggle: () => (/* reexport */ form_toggle),
2502    FormTokenField: () => (/* reexport */ form_token_field),
2503    G: () => (/* reexport */ external_wp_primitives_namespaceObject.G),
2504    GradientPicker: () => (/* reexport */ gradient_picker),
2505    Guide: () => (/* reexport */ guide),
2506    GuidePage: () => (/* reexport */ GuidePage),
2507    HorizontalRule: () => (/* reexport */ external_wp_primitives_namespaceObject.HorizontalRule),
2508    Icon: () => (/* reexport */ build_module_icon),
2509    IconButton: () => (/* reexport */ deprecated),
2510    IsolatedEventContainer: () => (/* reexport */ isolated_event_container),
2511    KeyboardShortcuts: () => (/* reexport */ keyboard_shortcuts),
2512    Line: () => (/* reexport */ external_wp_primitives_namespaceObject.Line),
2513    MenuGroup: () => (/* reexport */ menu_group),
2514    MenuItem: () => (/* reexport */ menu_item),
2515    MenuItemsChoice: () => (/* reexport */ menu_items_choice),
2516    Modal: () => (/* reexport */ modal),
2517    NavigableMenu: () => (/* reexport */ navigable_container_menu),
2518    Notice: () => (/* reexport */ build_module_notice),
2519    NoticeList: () => (/* reexport */ list),
2520    Panel: () => (/* reexport */ panel),
2521    PanelBody: () => (/* reexport */ body),
2522    PanelHeader: () => (/* reexport */ panel_header),
2523    PanelRow: () => (/* reexport */ row),
2524    Path: () => (/* reexport */ external_wp_primitives_namespaceObject.Path),
2525    Placeholder: () => (/* reexport */ placeholder),
2526    Polygon: () => (/* reexport */ external_wp_primitives_namespaceObject.Polygon),
2527    Popover: () => (/* reexport */ popover),
2528    QueryControls: () => (/* reexport */ query_controls),
2529    RadioControl: () => (/* reexport */ radio_control),
2530    RangeControl: () => (/* reexport */ range_control),
2531    Rect: () => (/* reexport */ external_wp_primitives_namespaceObject.Rect),
2532    ResizableBox: () => (/* reexport */ resizable_box),
2533    ResponsiveWrapper: () => (/* reexport */ responsive_wrapper),
2534    SVG: () => (/* reexport */ external_wp_primitives_namespaceObject.SVG),
2535    SandBox: () => (/* reexport */ sandbox),
2536    ScrollLock: () => (/* reexport */ scroll_lock),
2537    SearchControl: () => (/* reexport */ search_control),
2538    SelectControl: () => (/* reexport */ select_control),
2539    Slot: () => (/* reexport */ slot_fill_Slot),
2540    SlotFillProvider: () => (/* reexport */ Provider),
2541    Snackbar: () => (/* reexport */ snackbar),
2542    SnackbarList: () => (/* reexport */ snackbar_list),
2543    Spinner: () => (/* reexport */ spinner),
2544    TabPanel: () => (/* reexport */ tab_panel),
2545    TabbableContainer: () => (/* reexport */ tabbable),
2546    TextControl: () => (/* reexport */ text_control),
2547    TextHighlight: () => (/* reexport */ text_highlight),
2548    TextareaControl: () => (/* reexport */ textarea_control),
2549    TimePicker: () => (/* reexport */ time),
2550    Tip: () => (/* reexport */ build_module_tip),
2551    ToggleControl: () => (/* reexport */ toggle_control),
2552    Toolbar: () => (/* reexport */ toolbar),
2553    ToolbarButton: () => (/* reexport */ toolbar_button),
2554    ToolbarDropdownMenu: () => (/* reexport */ toolbar_dropdown_menu),
2555    ToolbarGroup: () => (/* reexport */ toolbar_group),
2556    ToolbarItem: () => (/* reexport */ toolbar_item),
2557    Tooltip: () => (/* reexport */ tooltip),
2558    TreeSelect: () => (/* reexport */ tree_select),
2559    VisuallyHidden: () => (/* reexport */ visually_hidden_component),
2560    __experimentalAlignmentMatrixControl: () => (/* reexport */ alignment_matrix_control),
2561    __experimentalApplyValueToSides: () => (/* reexport */ applyValueToSides),
2562    __experimentalBorderBoxControl: () => (/* reexport */ border_box_control_component),
2563    __experimentalBorderControl: () => (/* reexport */ border_control_component),
2564    __experimentalBoxControl: () => (/* reexport */ box_control),
2565    __experimentalConfirmDialog: () => (/* reexport */ confirm_dialog_component),
2566    __experimentalDimensionControl: () => (/* reexport */ dimension_control),
2567    __experimentalDivider: () => (/* reexport */ divider_component),
2568    __experimentalDropdownContentWrapper: () => (/* reexport */ dropdown_content_wrapper),
2569    __experimentalElevation: () => (/* reexport */ elevation_component),
2570    __experimentalGrid: () => (/* reexport */ grid_component),
2571    __experimentalHStack: () => (/* reexport */ h_stack_component),
2572    __experimentalHasSplitBorders: () => (/* reexport */ hasSplitBorders),
2573    __experimentalHeading: () => (/* reexport */ heading_component),
2574    __experimentalInputControl: () => (/* reexport */ input_control),
2575    __experimentalInputControlPrefixWrapper: () => (/* reexport */ input_prefix_wrapper),
2576    __experimentalInputControlSuffixWrapper: () => (/* reexport */ input_suffix_wrapper),
2577    __experimentalIsDefinedBorder: () => (/* reexport */ isDefinedBorder),
2578    __experimentalIsEmptyBorder: () => (/* reexport */ isEmptyBorder),
2579    __experimentalItem: () => (/* reexport */ item_component),
2580    __experimentalItemGroup: () => (/* reexport */ item_group_component),
2581    __experimentalNavigation: () => (/* reexport */ navigation),
2582    __experimentalNavigationBackButton: () => (/* reexport */ back_button),
2583    __experimentalNavigationGroup: () => (/* reexport */ group),
2584    __experimentalNavigationItem: () => (/* reexport */ navigation_item),
2585    __experimentalNavigationMenu: () => (/* reexport */ navigation_menu),
2586    __experimentalNavigatorBackButton: () => (/* reexport */ navigator_back_button_component),
2587    __experimentalNavigatorButton: () => (/* reexport */ navigator_button_component),
2588    __experimentalNavigatorProvider: () => (/* reexport */ navigator_provider_component),
2589    __experimentalNavigatorScreen: () => (/* reexport */ navigator_screen_component),
2590    __experimentalNavigatorToParentButton: () => (/* reexport */ navigator_to_parent_button_component),
2591    __experimentalNumberControl: () => (/* reexport */ number_control),
2592    __experimentalPaletteEdit: () => (/* reexport */ palette_edit),
2593    __experimentalParseQuantityAndUnitFromRawValue: () => (/* reexport */ parseQuantityAndUnitFromRawValue),
2594    __experimentalRadio: () => (/* reexport */ radio_group_radio),
2595    __experimentalRadioGroup: () => (/* reexport */ radio_group),
2596    __experimentalScrollable: () => (/* reexport */ scrollable_component),
2597    __experimentalSpacer: () => (/* reexport */ spacer_component),
2598    __experimentalStyleProvider: () => (/* reexport */ style_provider),
2599    __experimentalSurface: () => (/* reexport */ surface_component),
2600    __experimentalText: () => (/* reexport */ text_component),
2601    __experimentalToggleGroupControl: () => (/* reexport */ toggle_group_control_component),
2602    __experimentalToggleGroupControlOption: () => (/* reexport */ toggle_group_control_option_component),
2603    __experimentalToggleGroupControlOptionIcon: () => (/* reexport */ toggle_group_control_option_icon_component),
2604    __experimentalToolbarContext: () => (/* reexport */ toolbar_context),
2605    __experimentalToolsPanel: () => (/* reexport */ tools_panel_component),
2606    __experimentalToolsPanelContext: () => (/* reexport */ ToolsPanelContext),
2607    __experimentalToolsPanelItem: () => (/* reexport */ tools_panel_item_component),
2608    __experimentalTreeGrid: () => (/* reexport */ tree_grid),
2609    __experimentalTreeGridCell: () => (/* reexport */ cell),
2610    __experimentalTreeGridItem: () => (/* reexport */ tree_grid_item),
2611    __experimentalTreeGridRow: () => (/* reexport */ tree_grid_row),
2612    __experimentalTruncate: () => (/* reexport */ truncate_component),
2613    __experimentalUnitControl: () => (/* reexport */ unit_control),
2614    __experimentalUseCustomUnits: () => (/* reexport */ useCustomUnits),
2615    __experimentalUseNavigator: () => (/* reexport */ use_navigator),
2616    __experimentalUseSlot: () => (/* reexport */ useSlot),
2617    __experimentalUseSlotFills: () => (/* reexport */ useSlotFills),
2618    __experimentalVStack: () => (/* reexport */ v_stack_component),
2619    __experimentalView: () => (/* reexport */ component),
2620    __experimentalZStack: () => (/* reexport */ z_stack_component),
2621    __unstableAnimatePresence: () => (/* reexport */ AnimatePresence),
2622    __unstableComposite: () => (/* reexport */ legacy_Composite),
2623    __unstableCompositeGroup: () => (/* reexport */ legacy_CompositeGroup),
2624    __unstableCompositeItem: () => (/* reexport */ legacy_CompositeItem),
2625    __unstableDisclosureContent: () => (/* reexport */ disclosure_DisclosureContent),
2626    __unstableGetAnimateClassName: () => (/* reexport */ getAnimateClassName),
2627    __unstableMotion: () => (/* reexport */ motion),
2628    __unstableMotionContext: () => (/* reexport */ MotionContext),
2629    __unstableUseAutocompleteProps: () => (/* reexport */ useAutocompleteProps),
2630    __unstableUseCompositeState: () => (/* reexport */ useCompositeState),
2631    __unstableUseNavigateRegions: () => (/* reexport */ useNavigateRegions),
2632    createSlotFill: () => (/* reexport */ createSlotFill),
2633    navigateRegions: () => (/* reexport */ navigate_regions),
2634    privateApis: () => (/* reexport */ privateApis),
2635    useBaseControlProps: () => (/* reexport */ useBaseControlProps),
2636    withConstrainedTabbing: () => (/* reexport */ with_constrained_tabbing),
2637    withFallbackStyles: () => (/* reexport */ with_fallback_styles),
2638    withFilters: () => (/* reexport */ withFilters),
2639    withFocusOutside: () => (/* reexport */ with_focus_outside),
2640    withFocusReturn: () => (/* reexport */ with_focus_return),
2641    withNotices: () => (/* reexport */ with_notices),
2642    withSpokenMessages: () => (/* reexport */ with_spoken_messages)
2643  });
2644  
2645  // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/text/styles.js
2646  var text_styles_namespaceObject = {};
2647  __webpack_require__.r(text_styles_namespaceObject);
2648  __webpack_require__.d(text_styles_namespaceObject, {
2649    Text: () => (Text),
2650    block: () => (styles_block),
2651    destructive: () => (destructive),
2652    highlighterText: () => (highlighterText),
2653    muted: () => (muted),
2654    positive: () => (positive),
2655    upperCase: () => (upperCase)
2656  });
2657  
2658  // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
2659  var toggle_group_control_option_base_styles_namespaceObject = {};
2660  __webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject);
2661  __webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, {
2662    ButtonContentView: () => (ButtonContentView),
2663    LabelView: () => (LabelView),
2664    ou: () => (backdropView),
2665    uG: () => (buttonView),
2666    eh: () => (labelBlock)
2667  });
2668  
2669  ;// CONCATENATED MODULE: external ["wp","primitives"]
2670  const external_wp_primitives_namespaceObject = window["wp"]["primitives"];
2671  // EXTERNAL MODULE: external "React"
2672  var external_React_ = __webpack_require__(1609);
2673  var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2);
2674  var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_);
2675  // EXTERNAL MODULE: ./node_modules/classnames/index.js
2676  var classnames = __webpack_require__(5755);
2677  var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
2678  ;// CONCATENATED MODULE: external ["wp","i18n"]
2679  const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
2680  ;// CONCATENATED MODULE: external ["wp","compose"]
2681  const external_wp_compose_namespaceObject = window["wp"]["compose"];
2682  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SHA3WOPI.js
2683  "use client";
2684  
2685  // src/focusable/focusable-context.ts
2686  
2687  var FocusableContext = (0,external_React_.createContext)(true);
2688  
2689  
2690  
2691  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4R3V3JGP.js
2692  "use client";
2693  var __defProp = Object.defineProperty;
2694  var __defProps = Object.defineProperties;
2695  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
2696  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
2697  var __hasOwnProp = Object.prototype.hasOwnProperty;
2698  var __propIsEnum = Object.prototype.propertyIsEnumerable;
2699  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2700  var _4R3V3JGP_spreadValues = (a, b) => {
2701    for (var prop in b || (b = {}))
2702      if (__hasOwnProp.call(b, prop))
2703        __defNormalProp(a, prop, b[prop]);
2704    if (__getOwnPropSymbols)
2705      for (var prop of __getOwnPropSymbols(b)) {
2706        if (__propIsEnum.call(b, prop))
2707          __defNormalProp(a, prop, b[prop]);
2708      }
2709    return a;
2710  };
2711  var _4R3V3JGP_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
2712  var __objRest = (source, exclude) => {
2713    var target = {};
2714    for (var prop in source)
2715      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
2716        target[prop] = source[prop];
2717    if (source != null && __getOwnPropSymbols)
2718      for (var prop of __getOwnPropSymbols(source)) {
2719        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
2720          target[prop] = source[prop];
2721      }
2722    return target;
2723  };
2724  
2725  
2726  
2727  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/4R3V3JGP.js
2728  "use client";
2729  var _4R3V3JGP_defProp = Object.defineProperty;
2730  var _4R3V3JGP_defProps = Object.defineProperties;
2731  var _4R3V3JGP_getOwnPropDescs = Object.getOwnPropertyDescriptors;
2732  var _4R3V3JGP_getOwnPropSymbols = Object.getOwnPropertySymbols;
2733  var _4R3V3JGP_hasOwnProp = Object.prototype.hasOwnProperty;
2734  var _4R3V3JGP_propIsEnum = Object.prototype.propertyIsEnumerable;
2735  var _4R3V3JGP_defNormalProp = (obj, key, value) => key in obj ? _4R3V3JGP_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
2736  var _chunks_4R3V3JGP_spreadValues = (a, b) => {
2737    for (var prop in b || (b = {}))
2738      if (_4R3V3JGP_hasOwnProp.call(b, prop))
2739        _4R3V3JGP_defNormalProp(a, prop, b[prop]);
2740    if (_4R3V3JGP_getOwnPropSymbols)
2741      for (var prop of _4R3V3JGP_getOwnPropSymbols(b)) {
2742        if (_4R3V3JGP_propIsEnum.call(b, prop))
2743          _4R3V3JGP_defNormalProp(a, prop, b[prop]);
2744      }
2745    return a;
2746  };
2747  var _chunks_4R3V3JGP_spreadProps = (a, b) => _4R3V3JGP_defProps(a, _4R3V3JGP_getOwnPropDescs(b));
2748  var _4R3V3JGP_objRest = (source, exclude) => {
2749    var target = {};
2750    for (var prop in source)
2751      if (_4R3V3JGP_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
2752        target[prop] = source[prop];
2753    if (source != null && _4R3V3JGP_getOwnPropSymbols)
2754      for (var prop of _4R3V3JGP_getOwnPropSymbols(source)) {
2755        if (exclude.indexOf(prop) < 0 && _4R3V3JGP_propIsEnum.call(source, prop))
2756          target[prop] = source[prop];
2757      }
2758    return target;
2759  };
2760  
2761  
2762  
2763  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/Y3OOHFCN.js
2764  "use client";
2765  
2766  
2767  // src/utils/misc.ts
2768  function noop(..._) {
2769  }
2770  function shallowEqual(a, b) {
2771    if (a === b)
2772      return true;
2773    if (!a)
2774      return false;
2775    if (!b)
2776      return false;
2777    if (typeof a !== "object")
2778      return false;
2779    if (typeof b !== "object")
2780      return false;
2781    const aKeys = Object.keys(a);
2782    const bKeys = Object.keys(b);
2783    const { length } = aKeys;
2784    if (bKeys.length !== length)
2785      return false;
2786    for (const key of aKeys) {
2787      if (a[key] !== b[key]) {
2788        return false;
2789      }
2790    }
2791    return true;
2792  }
2793  function Y3OOHFCN_applyState(argument, currentValue) {
2794    if (isUpdater(argument)) {
2795      const value = isLazyValue(currentValue) ? currentValue() : currentValue;
2796      return argument(value);
2797    }
2798    return argument;
2799  }
2800  function isUpdater(argument) {
2801    return typeof argument === "function";
2802  }
2803  function isLazyValue(value) {
2804    return typeof value === "function";
2805  }
2806  function isObject(arg) {
2807    return typeof arg === "object" && arg != null;
2808  }
2809  function isEmpty(arg) {
2810    if (Array.isArray(arg))
2811      return !arg.length;
2812    if (isObject(arg))
2813      return !Object.keys(arg).length;
2814    if (arg == null)
2815      return true;
2816    if (arg === "")
2817      return true;
2818    return false;
2819  }
2820  function isInteger(arg) {
2821    if (typeof arg === "number") {
2822      return Math.floor(arg) === arg;
2823    }
2824    return String(Math.floor(Number(arg))) === arg;
2825  }
2826  function Y3OOHFCN_hasOwnProperty(object, prop) {
2827    if (typeof Object.hasOwn === "function") {
2828      return Object.hasOwn(object, prop);
2829    }
2830    return Object.prototype.hasOwnProperty.call(object, prop);
2831  }
2832  function chain(...fns) {
2833    return (...args) => {
2834      for (const fn of fns) {
2835        if (typeof fn === "function") {
2836          fn(...args);
2837        }
2838      }
2839    };
2840  }
2841  function cx(...args) {
2842    return args.filter(Boolean).join(" ") || void 0;
2843  }
2844  function normalizeString(str) {
2845    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
2846  }
2847  function omit(object, keys) {
2848    const result = _chunks_4R3V3JGP_spreadValues({}, object);
2849    for (const key of keys) {
2850      if (Y3OOHFCN_hasOwnProperty(result, key)) {
2851        delete result[key];
2852      }
2853    }
2854    return result;
2855  }
2856  function pick(object, paths) {
2857    const result = {};
2858    for (const key of paths) {
2859      if (Y3OOHFCN_hasOwnProperty(object, key)) {
2860        result[key] = object[key];
2861      }
2862    }
2863    return result;
2864  }
2865  function identity(value) {
2866    return value;
2867  }
2868  function beforePaint(cb = noop) {
2869    const raf = requestAnimationFrame(cb);
2870    return () => cancelAnimationFrame(raf);
2871  }
2872  function afterPaint(cb = noop) {
2873    let raf = requestAnimationFrame(() => {
2874      raf = requestAnimationFrame(cb);
2875    });
2876    return () => cancelAnimationFrame(raf);
2877  }
2878  function invariant(condition, message) {
2879    if (condition)
2880      return;
2881    if (typeof message !== "string")
2882      throw new Error("Invariant failed");
2883    throw new Error(message);
2884  }
2885  function getKeys(obj) {
2886    return Object.keys(obj);
2887  }
2888  function isFalsyBooleanCallback(booleanOrCallback, ...args) {
2889    const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback;
2890    if (result == null)
2891      return false;
2892    return !result;
2893  }
2894  function disabledFromProps(props) {
2895    return props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
2896  }
2897  function defaultValue(...values) {
2898    for (const value of values) {
2899      if (value !== void 0)
2900        return value;
2901    }
2902    return void 0;
2903  }
2904  
2905  
2906  
2907  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XM66DUTO.js
2908  "use client";
2909  
2910  
2911  // src/utils/misc.ts
2912  
2913  
2914  function setRef(ref, value) {
2915    if (typeof ref === "function") {
2916      ref(value);
2917    } else if (ref) {
2918      ref.current = value;
2919    }
2920  }
2921  function isValidElementWithRef(element) {
2922    if (!element)
2923      return false;
2924    if (!(0,external_React_.isValidElement)(element))
2925      return false;
2926    if (!("ref" in element))
2927      return false;
2928    return true;
2929  }
2930  function getRefProperty(element) {
2931    if (!isValidElementWithRef(element))
2932      return null;
2933    return element.ref;
2934  }
2935  function mergeProps(base, overrides) {
2936    const props = _4R3V3JGP_spreadValues({}, base);
2937    for (const key in overrides) {
2938      if (!Y3OOHFCN_hasOwnProperty(overrides, key))
2939        continue;
2940      if (key === "className") {
2941        const prop = "className";
2942        props[prop] = base[prop] ? `$base[prop]} $overrides[prop]}` : overrides[prop];
2943        continue;
2944      }
2945      if (key === "style") {
2946        const prop = "style";
2947        props[prop] = base[prop] ? _4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop];
2948        continue;
2949      }
2950      const overrideValue = overrides[key];
2951      if (typeof overrideValue === "function" && key.startsWith("on")) {
2952        const baseValue = base[key];
2953        if (typeof baseValue === "function") {
2954          props[key] = (...args) => {
2955            overrideValue(...args);
2956            baseValue(...args);
2957          };
2958          continue;
2959        }
2960      }
2961      props[key] = overrideValue;
2962    }
2963    return props;
2964  }
2965  
2966  
2967  
2968  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/DLOEKDPY.js
2969  "use client";
2970  
2971  // src/utils/dom.ts
2972  var canUseDOM = checkIsBrowser();
2973  function checkIsBrowser() {
2974    var _a;
2975    return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement);
2976  }
2977  function DLOEKDPY_getDocument(node) {
2978    return node ? node.ownerDocument || node : document;
2979  }
2980  function getWindow(node) {
2981    return DLOEKDPY_getDocument(node).defaultView || window;
2982  }
2983  function getActiveElement(node, activeDescendant = false) {
2984    const { activeElement } = DLOEKDPY_getDocument(node);
2985    if (!(activeElement == null ? void 0 : activeElement.nodeName)) {
2986      return null;
2987    }
2988    if (isFrame(activeElement) && activeElement.contentDocument) {
2989      return getActiveElement(
2990        activeElement.contentDocument.body,
2991        activeDescendant
2992      );
2993    }
2994    if (activeDescendant) {
2995      const id = activeElement.getAttribute("aria-activedescendant");
2996      if (id) {
2997        const element = DLOEKDPY_getDocument(activeElement).getElementById(id);
2998        if (element) {
2999          return element;
3000        }
3001      }
3002    }
3003    return activeElement;
3004  }
3005  function contains(parent, child) {
3006    return parent === child || parent.contains(child);
3007  }
3008  function isFrame(element) {
3009    return element.tagName === "IFRAME";
3010  }
3011  function isButton(element) {
3012    const tagName = element.tagName.toLowerCase();
3013    if (tagName === "button")
3014      return true;
3015    if (tagName === "input" && element.type) {
3016      return buttonInputTypes.indexOf(element.type) !== -1;
3017    }
3018    return false;
3019  }
3020  var buttonInputTypes = [
3021    "button",
3022    "color",
3023    "file",
3024    "image",
3025    "reset",
3026    "submit"
3027  ];
3028  function matches(element, selectors) {
3029    if ("matches" in element) {
3030      return element.matches(selectors);
3031    }
3032    if ("msMatchesSelector" in element) {
3033      return element.msMatchesSelector(selectors);
3034    }
3035    return element.webkitMatchesSelector(selectors);
3036  }
3037  function isVisible(element) {
3038    const htmlElement = element;
3039    return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
3040  }
3041  function DLOEKDPY_closest(element, selectors) {
3042    if ("closest" in element)
3043      return element.closest(selectors);
3044    do {
3045      if (matches(element, selectors))
3046        return element;
3047      element = element.parentElement || element.parentNode;
3048    } while (element !== null && element.nodeType === 1);
3049    return null;
3050  }
3051  function DLOEKDPY_isTextField(element) {
3052    try {
3053      const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
3054      const isTextArea = element.tagName === "TEXTAREA";
3055      return isTextInput || isTextArea || false;
3056    } catch (error) {
3057      return false;
3058    }
3059  }
3060  function getPopupRole(element, fallback) {
3061    const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"];
3062    const role = element == null ? void 0 : element.getAttribute("role");
3063    if (role && allowedPopupRoles.indexOf(role) !== -1) {
3064      return role;
3065    }
3066    return fallback;
3067  }
3068  function getPopupItemRole(element, fallback) {
3069    var _a;
3070    const itemRoleByPopupRole = {
3071      menu: "menuitem",
3072      listbox: "option",
3073      tree: "treeitem",
3074      grid: "gridcell"
3075    };
3076    const popupRole = getPopupRole(element);
3077    if (!popupRole)
3078      return fallback;
3079    const key = popupRole;
3080    return (_a = itemRoleByPopupRole[key]) != null ? _a : fallback;
3081  }
3082  function getTextboxSelection(element) {
3083    let start = 0;
3084    let end = 0;
3085    if (DLOEKDPY_isTextField(element)) {
3086      start = element.selectionStart || 0;
3087      end = element.selectionEnd || 0;
3088    } else if (element.isContentEditable) {
3089      const selection = DLOEKDPY_getDocument(element).getSelection();
3090      if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) {
3091        const range = selection.getRangeAt(0);
3092        const nextRange = range.cloneRange();
3093        nextRange.selectNodeContents(element);
3094        nextRange.setEnd(range.startContainer, range.startOffset);
3095        start = nextRange.toString().length;
3096        nextRange.setEnd(range.endContainer, range.endOffset);
3097        end = nextRange.toString().length;
3098      }
3099    }
3100    return { start, end };
3101  }
3102  function scrollIntoViewIfNeeded(element, arg) {
3103    if (isPartiallyHidden(element) && "scrollIntoView" in element) {
3104      element.scrollIntoView(arg);
3105    }
3106  }
3107  function getScrollingElement(element) {
3108    if (!element)
3109      return null;
3110    if (element.clientHeight && element.scrollHeight > element.clientHeight) {
3111      const { overflowY } = getComputedStyle(element);
3112      const isScrollable = overflowY !== "visible" && overflowY !== "hidden";
3113      if (isScrollable)
3114        return element;
3115    } else if (element.clientWidth && element.scrollWidth > element.clientWidth) {
3116      const { overflowX } = getComputedStyle(element);
3117      const isScrollable = overflowX !== "visible" && overflowX !== "hidden";
3118      if (isScrollable)
3119        return element;
3120    }
3121    return getScrollingElement(element.parentElement) || document.scrollingElement || document.body;
3122  }
3123  function isPartiallyHidden(element) {
3124    const elementRect = element.getBoundingClientRect();
3125    const scroller = getScrollingElement(element);
3126    if (!scroller)
3127      return false;
3128    const scrollerRect = scroller.getBoundingClientRect();
3129    const isHTML = scroller.tagName === "HTML";
3130    const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top;
3131    const scrollerBottom = isHTML ? scroller.clientHeight : scrollerRect.bottom;
3132    const scrollerLeft = isHTML ? scrollerRect.left + scroller.scrollLeft : scrollerRect.left;
3133    const scrollerRight = isHTML ? scroller.clientWidth : scrollerRect.right;
3134    const top = elementRect.top < scrollerTop;
3135    const left = elementRect.left < scrollerLeft;
3136    const bottom = elementRect.bottom > scrollerBottom;
3137    const right = elementRect.right > scrollerRight;
3138    return top || left || bottom || right;
3139  }
3140  function setSelectionRange(element, ...args) {
3141    if (/text|search|password|tel|url/i.test(element.type)) {
3142      element.setSelectionRange(...args);
3143    }
3144  }
3145  
3146  
3147  
3148  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/MHPO2BXA.js
3149  "use client";
3150  
3151  
3152  // src/utils/platform.ts
3153  function isTouchDevice() {
3154    return canUseDOM && !!navigator.maxTouchPoints;
3155  }
3156  function isApple() {
3157    if (!canUseDOM)
3158      return false;
3159    return /mac|iphone|ipad|ipod/i.test(navigator.platform);
3160  }
3161  function isSafari() {
3162    return canUseDOM && isApple() && /apple/i.test(navigator.vendor);
3163  }
3164  function isFirefox() {
3165    return canUseDOM && /firefox\//i.test(navigator.userAgent);
3166  }
3167  function isMac() {
3168    return canUseDOM && navigator.platform.startsWith("Mac") && !isTouchDevice();
3169  }
3170  
3171  
3172  
3173  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/events.js
3174  "use client";
3175  
3176  
3177  
3178  
3179  // src/utils/events.ts
3180  function isPortalEvent(event) {
3181    return Boolean(
3182      event.currentTarget && !contains(event.currentTarget, event.target)
3183    );
3184  }
3185  function isSelfTarget(event) {
3186    return event.target === event.currentTarget;
3187  }
3188  function isOpeningInNewTab(event) {
3189    const element = event.currentTarget;
3190    if (!element)
3191      return false;
3192    const isAppleDevice = isApple();
3193    if (isAppleDevice && !event.metaKey)
3194      return false;
3195    if (!isAppleDevice && !event.ctrlKey)
3196      return false;
3197    const tagName = element.tagName.toLowerCase();
3198    if (tagName === "a")
3199      return true;
3200    if (tagName === "button" && element.type === "submit")
3201      return true;
3202    if (tagName === "input" && element.type === "submit")
3203      return true;
3204    return false;
3205  }
3206  function isDownloading(event) {
3207    const element = event.currentTarget;
3208    if (!element)
3209      return false;
3210    const tagName = element.tagName.toLowerCase();
3211    if (!event.altKey)
3212      return false;
3213    if (tagName === "a")
3214      return true;
3215    if (tagName === "button" && element.type === "submit")
3216      return true;
3217    if (tagName === "input" && element.type === "submit")
3218      return true;
3219    return false;
3220  }
3221  function fireEvent(element, type, eventInit) {
3222    const event = new Event(type, eventInit);
3223    return element.dispatchEvent(event);
3224  }
3225  function fireBlurEvent(element, eventInit) {
3226    const event = new FocusEvent("blur", eventInit);
3227    const defaultAllowed = element.dispatchEvent(event);
3228    const bubbleInit = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, eventInit), { bubbles: true });
3229    element.dispatchEvent(new FocusEvent("focusout", bubbleInit));
3230    return defaultAllowed;
3231  }
3232  function fireFocusEvent(element, eventInit) {
3233    const event = new FocusEvent("focus", eventInit);
3234    const defaultAllowed = element.dispatchEvent(event);
3235    const bubbleInit = __spreadProps(__spreadValues({}, eventInit), { bubbles: true });
3236    element.dispatchEvent(new FocusEvent("focusin", bubbleInit));
3237    return defaultAllowed;
3238  }
3239  function fireKeyboardEvent(element, type, eventInit) {
3240    const event = new KeyboardEvent(type, eventInit);
3241    return element.dispatchEvent(event);
3242  }
3243  function fireClickEvent(element, eventInit) {
3244    const event = new MouseEvent("click", eventInit);
3245    return element.dispatchEvent(event);
3246  }
3247  function isFocusEventOutside(event, container) {
3248    const containerElement = container || event.currentTarget;
3249    const relatedTarget = event.relatedTarget;
3250    return !relatedTarget || !contains(containerElement, relatedTarget);
3251  }
3252  function queueBeforeEvent(element, type, callback) {
3253    const raf = requestAnimationFrame(() => {
3254      element.removeEventListener(type, callImmediately, true);
3255      callback();
3256    });
3257    const callImmediately = () => {
3258      cancelAnimationFrame(raf);
3259      callback();
3260    };
3261    element.addEventListener(type, callImmediately, {
3262      once: true,
3263      capture: true
3264    });
3265    return raf;
3266  }
3267  function addGlobalEventListener(type, listener, options, scope = window) {
3268    const children = [];
3269    try {
3270      scope.document.addEventListener(type, listener, options);
3271      for (const frame of Array.from(scope.frames)) {
3272        children.push(addGlobalEventListener(type, listener, options, frame));
3273      }
3274    } catch (e) {
3275    }
3276    const removeEventListener = () => {
3277      try {
3278        scope.document.removeEventListener(type, listener, options);
3279      } catch (e) {
3280      }
3281      children.forEach((remove) => remove());
3282    };
3283    return removeEventListener;
3284  }
3285  
3286  
3287  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6O5OEQGF.js
3288  "use client";
3289  
3290  
3291  
3292  // src/utils/hooks.ts
3293  
3294  
3295  
3296  
3297  
3298  var _React = _4R3V3JGP_spreadValues({}, external_React_namespaceObject);
3299  var useReactId = _React.useId;
3300  var useReactDeferredValue = _React.useDeferredValue;
3301  var useReactInsertionEffect = _React.useInsertionEffect;
3302  var useSafeLayoutEffect = canUseDOM ? external_React_.useLayoutEffect : external_React_.useEffect;
3303  function useInitialValue(value) {
3304    const [initialValue] = (0,external_React_.useState)(value);
3305    return initialValue;
3306  }
3307  function useLazyValue(init) {
3308    const ref = useRef();
3309    if (ref.current === void 0) {
3310      ref.current = init();
3311    }
3312    return ref.current;
3313  }
3314  function useLiveRef(value) {
3315    const ref = (0,external_React_.useRef)(value);
3316    useSafeLayoutEffect(() => {
3317      ref.current = value;
3318    });
3319    return ref;
3320  }
3321  function usePreviousValue(value) {
3322    const [previousValue, setPreviousValue] = useState(value);
3323    if (value !== previousValue) {
3324      setPreviousValue(value);
3325    }
3326    return previousValue;
3327  }
3328  function useEvent(callback) {
3329    const ref = (0,external_React_.useRef)(() => {
3330      throw new Error("Cannot call an event handler while rendering.");
3331    });
3332    if (useReactInsertionEffect) {
3333      useReactInsertionEffect(() => {
3334        ref.current = callback;
3335      });
3336    } else {
3337      ref.current = callback;
3338    }
3339    return (0,external_React_.useCallback)((...args) => {
3340      var _a;
3341      return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
3342    }, []);
3343  }
3344  function useMergeRefs(...refs) {
3345    return (0,external_React_.useMemo)(() => {
3346      if (!refs.some(Boolean))
3347        return;
3348      return (value) => {
3349        refs.forEach((ref) => setRef(ref, value));
3350      };
3351    }, refs);
3352  }
3353  function useRefId(ref, deps) {
3354    const [id, setId] = useState(void 0);
3355    useSafeLayoutEffect(() => {
3356      var _a;
3357      setId((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id);
3358    }, deps);
3359    return id;
3360  }
3361  function useId(defaultId) {
3362    if (useReactId) {
3363      const reactId = useReactId();
3364      if (defaultId)
3365        return defaultId;
3366      return reactId;
3367    }
3368    const [id, setId] = (0,external_React_.useState)(defaultId);
3369    useSafeLayoutEffect(() => {
3370      if (defaultId || id)
3371        return;
3372      const random = Math.random().toString(36).substr(2, 6);
3373      setId(`id-$random}`);
3374    }, [defaultId, id]);
3375    return defaultId || id;
3376  }
3377  function useDeferredValue(value) {
3378    if (useReactDeferredValue) {
3379      return useReactDeferredValue(value);
3380    }
3381    const [deferredValue, setDeferredValue] = useState(value);
3382    useEffect(() => {
3383      const raf = requestAnimationFrame(() => setDeferredValue(value));
3384      return () => cancelAnimationFrame(raf);
3385    }, [value]);
3386    return deferredValue;
3387  }
3388  function useTagName(refOrElement, type) {
3389    const stringOrUndefined = (type2) => {
3390      if (typeof type2 !== "string")
3391        return;
3392      return type2;
3393    };
3394    const [tagName, setTagName] = (0,external_React_.useState)(() => stringOrUndefined(type));
3395    useSafeLayoutEffect(() => {
3396      const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
3397      setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type));
3398    }, [refOrElement, type]);
3399    return tagName;
3400  }
3401  function useAttribute(refOrElement, attributeName, defaultValue) {
3402    const [attribute, setAttribute] = useState(defaultValue);
3403    useSafeLayoutEffect(() => {
3404      const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement;
3405      const value = element == null ? void 0 : element.getAttribute(attributeName);
3406      if (value == null)
3407        return;
3408      setAttribute(value);
3409    }, [refOrElement, attributeName]);
3410    return attribute;
3411  }
3412  function useUpdateEffect(effect, deps) {
3413    const mounted = (0,external_React_.useRef)(false);
3414    (0,external_React_.useEffect)(() => {
3415      if (mounted.current) {
3416        return effect();
3417      }
3418      mounted.current = true;
3419    }, deps);
3420    (0,external_React_.useEffect)(
3421      () => () => {
3422        mounted.current = false;
3423      },
3424      []
3425    );
3426  }
3427  function useUpdateLayoutEffect(effect, deps) {
3428    const mounted = useRef(false);
3429    useSafeLayoutEffect(() => {
3430      if (mounted.current) {
3431        return effect();
3432      }
3433      mounted.current = true;
3434    }, deps);
3435    useSafeLayoutEffect(
3436      () => () => {
3437        mounted.current = false;
3438      },
3439      []
3440    );
3441  }
3442  function useControlledState(defaultState, state, setState) {
3443    const [localState, setLocalState] = useState(defaultState);
3444    const nextState = state !== void 0 ? state : localState;
3445    const stateRef = useLiveRef(state);
3446    const setStateRef = useLiveRef(setState);
3447    const nextStateRef = useLiveRef(nextState);
3448    const setNextState = useCallback((prevValue) => {
3449      const setStateProp = setStateRef.current;
3450      if (setStateProp) {
3451        if (isSetNextState(setStateProp)) {
3452          setStateProp(prevValue);
3453        } else {
3454          const nextValue = applyState(prevValue, nextStateRef.current);
3455          nextStateRef.current = nextValue;
3456          setStateProp(nextValue);
3457        }
3458      }
3459      if (stateRef.current === void 0) {
3460        setLocalState(prevValue);
3461      }
3462    }, []);
3463    defineSetNextState(setNextState);
3464    return [nextState, setNextState];
3465  }
3466  var SET_NEXT_STATE = Symbol("setNextState");
3467  function isSetNextState(arg) {
3468    return arg[SET_NEXT_STATE] === true;
3469  }
3470  function defineSetNextState(arg) {
3471    if (!isSetNextState(arg)) {
3472      Object.defineProperty(arg, SET_NEXT_STATE, { value: true });
3473    }
3474  }
3475  function useForceUpdate() {
3476    return (0,external_React_.useReducer)(() => [], []);
3477  }
3478  function useBooleanEvent(booleanOrCallback) {
3479    return useEvent(
3480      typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback
3481    );
3482  }
3483  function useWrapElement(props, callback, deps = []) {
3484    const wrapElement = (0,external_React_.useCallback)(
3485      (element) => {
3486        if (props.wrapElement) {
3487          element = props.wrapElement(element);
3488        }
3489        return callback(element);
3490      },
3491      [...deps, props.wrapElement]
3492    );
3493    return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { wrapElement });
3494  }
3495  function usePortalRef(portalProp = false, portalRefProp) {
3496    const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
3497    const portalRef = useMergeRefs(setPortalNode, portalRefProp);
3498    const domReady = !portalProp || portalNode;
3499    return { portalRef, portalNode, domReady };
3500  }
3501  function useMetadataProps(props, key, value) {
3502    const parent = props.onLoadedMetadataCapture;
3503    const onLoadedMetadataCapture = (0,external_React_.useMemo)(() => {
3504      return Object.assign(() => {
3505      }, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, parent), { [key]: value }));
3506    }, [parent, key, value]);
3507    return [parent == null ? void 0 : parent[key], { onLoadedMetadataCapture }];
3508  }
3509  function useIsMouseMoving() {
3510    (0,external_React_.useEffect)(() => {
3511      addGlobalEventListener("mousemove", setMouseMoving, true);
3512      addGlobalEventListener("mousedown", resetMouseMoving, true);
3513      addGlobalEventListener("mouseup", resetMouseMoving, true);
3514      addGlobalEventListener("keydown", resetMouseMoving, true);
3515      addGlobalEventListener("scroll", resetMouseMoving, true);
3516    }, []);
3517    const isMouseMoving = useEvent(() => mouseMoving);
3518    return isMouseMoving;
3519  }
3520  var mouseMoving = false;
3521  var previousScreenX = 0;
3522  var previousScreenY = 0;
3523  function hasMouseMovement(event) {
3524    const movementX = event.movementX || event.screenX - previousScreenX;
3525    const movementY = event.movementY || event.screenY - previousScreenY;
3526    previousScreenX = event.screenX;
3527    previousScreenY = event.screenY;
3528    return movementX || movementY || "production" === "test";
3529  }
3530  function setMouseMoving(event) {
3531    if (!hasMouseMovement(event))
3532      return;
3533    mouseMoving = true;
3534  }
3535  function resetMouseMoving() {
3536    mouseMoving = false;
3537  }
3538  
3539  
3540  
3541  // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
3542  var jsx_runtime = __webpack_require__(4922);
3543  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3ORBWXWF.js
3544  "use client";
3545  
3546  
3547  
3548  
3549  // src/utils/system.tsx
3550  
3551  
3552  
3553  function isRenderProp(children) {
3554    return typeof children === "function";
3555  }
3556  function forwardRef2(render) {
3557    const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
3558    Role.displayName = render.displayName || render.name;
3559    return Role;
3560  }
3561  function memo2(Component, propsAreEqual) {
3562    const Role = React.memo(Component, propsAreEqual);
3563    Role.displayName = Component.displayName || Component.name;
3564    return Role;
3565  }
3566  function createComponent(render) {
3567    const Role = (props, ref) => render(_4R3V3JGP_spreadValues({ ref }, props));
3568    return external_React_.forwardRef(Role);
3569  }
3570  function createMemoComponent(render) {
3571    const Role = createComponent(render);
3572    return external_React_.memo(Role);
3573  }
3574  function _3ORBWXWF_createElement(Type, props) {
3575    const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
3576    let element;
3577    const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
3578    if (false) {}
3579    if (As && typeof As !== "string") {
3580      element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rest), { render }));
3581    } else if (external_React_.isValidElement(render)) {
3582      const renderProps = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, render.props), { ref: mergedRef });
3583      element = external_React_.cloneElement(render, mergeProps(rest, renderProps));
3584    } else if (render) {
3585      element = render(rest);
3586    } else if (isRenderProp(props.children)) {
3587      if (false) {}
3588      const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
3589      element = props.children(otherProps);
3590    } else if (As) {
3591      element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, _4R3V3JGP_spreadValues({}, rest));
3592    } else {
3593      element = /* @__PURE__ */ (0,jsx_runtime.jsx)(Type, _4R3V3JGP_spreadValues({}, rest));
3594    }
3595    if (wrapElement) {
3596      return wrapElement(element);
3597    }
3598    return element;
3599  }
3600  function createHook(useProps) {
3601    const useRole = (props = {}) => {
3602      const htmlProps = useProps(props);
3603      const copy = {};
3604      for (const prop in htmlProps) {
3605        if (Y3OOHFCN_hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
3606          copy[prop] = htmlProps[prop];
3607        }
3608      }
3609      return copy;
3610    };
3611    return useRole;
3612  }
3613  function createStoreContext(providers = [], scopedProviders = []) {
3614    const context = external_React_.createContext(void 0);
3615    const scopedContext = external_React_.createContext(void 0);
3616    const useContext2 = () => external_React_.useContext(context);
3617    const useScopedContext = (onlyScoped = false) => {
3618      const scoped = external_React_.useContext(scopedContext);
3619      const store = useContext2();
3620      if (onlyScoped)
3621        return scoped;
3622      return scoped || store;
3623    };
3624    const useProviderContext = () => {
3625      const scoped = external_React_.useContext(scopedContext);
3626      const store = useContext2();
3627      if (scoped && scoped === store)
3628        return;
3629      return store;
3630    };
3631    const ContextProvider = (props) => {
3632      return providers.reduceRight(
3633        (children, Provider) => /* @__PURE__ */ (0,jsx_runtime.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })),
3634        /* @__PURE__ */ (0,jsx_runtime.jsx)(context.Provider, _4R3V3JGP_spreadValues({}, props))
3635      );
3636    };
3637    const ScopedContextProvider = (props) => {
3638      return /* @__PURE__ */ (0,jsx_runtime.jsx)(ContextProvider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children: scopedProviders.reduceRight(
3639        (children, Provider) => /* @__PURE__ */ (0,jsx_runtime.jsx)(Provider, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { children })),
3640        /* @__PURE__ */ (0,jsx_runtime.jsx)(scopedContext.Provider, _4R3V3JGP_spreadValues({}, props))
3641      ) }));
3642    };
3643    return {
3644      context,
3645      scopedContext,
3646      useContext: useContext2,
3647      useScopedContext,
3648      useProviderContext,
3649      ContextProvider,
3650      ScopedContextProvider
3651    };
3652  }
3653  
3654  
3655  
3656  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/focus.js
3657  "use client";
3658  
3659  
3660  
3661  // src/utils/focus.ts
3662  var 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'])";
3663  function hasNegativeTabIndex(element) {
3664    const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
3665    return tabIndex < 0;
3666  }
3667  function isFocusable(element) {
3668    if (!matches(element, selector))
3669      return false;
3670    if (!isVisible(element))
3671      return false;
3672    if (DLOEKDPY_closest(element, "[inert]"))
3673      return false;
3674    return true;
3675  }
3676  function isTabbable(element) {
3677    if (!isFocusable(element))
3678      return false;
3679    if (hasNegativeTabIndex(element))
3680      return false;
3681    if (!("form" in element))
3682      return true;
3683    if (!element.form)
3684      return true;
3685    if (element.checked)
3686      return true;
3687    if (element.type !== "radio")
3688      return true;
3689    const radioGroup = element.form.elements.namedItem(element.name);
3690    if (!radioGroup)
3691      return true;
3692    if (!("length" in radioGroup))
3693      return true;
3694    const activeElement = getActiveElement(element);
3695    if (!activeElement)
3696      return true;
3697    if (activeElement === element)
3698      return true;
3699    if (!("form" in activeElement))
3700      return true;
3701    if (activeElement.form !== element.form)
3702      return true;
3703    if (activeElement.name !== element.name)
3704      return true;
3705    return false;
3706  }
3707  function getAllFocusableIn(container, includeContainer) {
3708    const elements = Array.from(
3709      container.querySelectorAll(selector)
3710    );
3711    if (includeContainer) {
3712      elements.unshift(container);
3713    }
3714    const focusableElements = elements.filter(isFocusable);
3715    focusableElements.forEach((element, i) => {
3716      if (isFrame(element) && element.contentDocument) {
3717        const frameBody = element.contentDocument.body;
3718        focusableElements.splice(i, 1, ...getAllFocusableIn(frameBody));
3719      }
3720    });
3721    return focusableElements;
3722  }
3723  function getAllFocusable(includeBody) {
3724    return getAllFocusableIn(document.body, includeBody);
3725  }
3726  function getFirstFocusableIn(container, includeContainer) {
3727    const [first] = getAllFocusableIn(container, includeContainer);
3728    return first || null;
3729  }
3730  function getFirstFocusable(includeBody) {
3731    return getFirstFocusableIn(document.body, includeBody);
3732  }
3733  function getAllTabbableIn(container, includeContainer, fallbackToFocusable) {
3734    const elements = Array.from(
3735      container.querySelectorAll(selector)
3736    );
3737    const tabbableElements = elements.filter(isTabbable);
3738    if (includeContainer && isTabbable(container)) {
3739      tabbableElements.unshift(container);
3740    }
3741    tabbableElements.forEach((element, i) => {
3742      if (isFrame(element) && element.contentDocument) {
3743        const frameBody = element.contentDocument.body;
3744        const allFrameTabbable = getAllTabbableIn(
3745          frameBody,
3746          false,
3747          fallbackToFocusable
3748        );
3749        tabbableElements.splice(i, 1, ...allFrameTabbable);
3750      }
3751    });
3752    if (!tabbableElements.length && fallbackToFocusable) {
3753      return elements;
3754    }
3755    return tabbableElements;
3756  }
3757  function getAllTabbable(fallbackToFocusable) {
3758    return getAllTabbableIn(document.body, false, fallbackToFocusable);
3759  }
3760  function getFirstTabbableIn(container, includeContainer, fallbackToFocusable) {
3761    const [first] = getAllTabbableIn(
3762      container,
3763      includeContainer,
3764      fallbackToFocusable
3765    );
3766    return first || null;
3767  }
3768  function getFirstTabbable(fallbackToFocusable) {
3769    return getFirstTabbableIn(document.body, false, fallbackToFocusable);
3770  }
3771  function getLastTabbableIn(container, includeContainer, fallbackToFocusable) {
3772    const allTabbable = getAllTabbableIn(
3773      container,
3774      includeContainer,
3775      fallbackToFocusable
3776    );
3777    return allTabbable[allTabbable.length - 1] || null;
3778  }
3779  function getLastTabbable(fallbackToFocusable) {
3780    return getLastTabbableIn(document.body, false, fallbackToFocusable);
3781  }
3782  function getNextTabbableIn(container, includeContainer, fallbackToFirst, fallbackToFocusable) {
3783    const activeElement = getActiveElement(container);
3784    const allFocusable = getAllFocusableIn(container, includeContainer);
3785    const activeIndex = allFocusable.indexOf(activeElement);
3786    const nextFocusableElements = allFocusable.slice(activeIndex + 1);
3787    return nextFocusableElements.find(isTabbable) || (fallbackToFirst ? allFocusable.find(isTabbable) : null) || (fallbackToFocusable ? nextFocusableElements[0] : null) || null;
3788  }
3789  function getNextTabbable(fallbackToFirst, fallbackToFocusable) {
3790    return getNextTabbableIn(
3791      document.body,
3792      false,
3793      fallbackToFirst,
3794      fallbackToFocusable
3795    );
3796  }
3797  function getPreviousTabbableIn(container, includeContainer, fallbackToLast, fallbackToFocusable) {
3798    const activeElement = getActiveElement(container);
3799    const allFocusable = getAllFocusableIn(container, includeContainer).reverse();
3800    const activeIndex = allFocusable.indexOf(activeElement);
3801    const previousFocusableElements = allFocusable.slice(activeIndex + 1);
3802    return previousFocusableElements.find(isTabbable) || (fallbackToLast ? allFocusable.find(isTabbable) : null) || (fallbackToFocusable ? previousFocusableElements[0] : null) || null;
3803  }
3804  function getPreviousTabbable(fallbackToFirst, fallbackToFocusable) {
3805    return getPreviousTabbableIn(
3806      document.body,
3807      false,
3808      fallbackToFirst,
3809      fallbackToFocusable
3810    );
3811  }
3812  function getClosestFocusable(element) {
3813    while (element && !isFocusable(element)) {
3814      element = closest(element, selector);
3815    }
3816    return element || null;
3817  }
3818  function hasFocus(element) {
3819    const activeElement = getActiveElement(element);
3820    if (!activeElement)
3821      return false;
3822    if (activeElement === element)
3823      return true;
3824    const activeDescendant = activeElement.getAttribute("aria-activedescendant");
3825    if (!activeDescendant)
3826      return false;
3827    return activeDescendant === element.id;
3828  }
3829  function hasFocusWithin(element) {
3830    const activeElement = getActiveElement(element);
3831    if (!activeElement)
3832      return false;
3833    if (contains(element, activeElement))
3834      return true;
3835    const activeDescendant = activeElement.getAttribute("aria-activedescendant");
3836    if (!activeDescendant)
3837      return false;
3838    if (!("id" in element))
3839      return false;
3840    if (activeDescendant === element.id)
3841      return true;
3842    return !!element.querySelector(`#$CSS.escape(activeDescendant)}`);
3843  }
3844  function focusIfNeeded(element) {
3845    if (!hasFocusWithin(element) && isFocusable(element)) {
3846      element.focus();
3847    }
3848  }
3849  function disableFocus(element) {
3850    var _a;
3851    const currentTabindex = (_a = element.getAttribute("tabindex")) != null ? _a : "";
3852    element.setAttribute("data-tabindex", currentTabindex);
3853    element.setAttribute("tabindex", "-1");
3854  }
3855  function disableFocusIn(container, includeContainer) {
3856    const tabbableElements = getAllTabbableIn(container, includeContainer);
3857    tabbableElements.forEach(disableFocus);
3858  }
3859  function restoreFocusIn(container) {
3860    const elements = container.querySelectorAll("[data-tabindex]");
3861    const restoreTabIndex = (element) => {
3862      const tabindex = element.getAttribute("data-tabindex");
3863      element.removeAttribute("data-tabindex");
3864      if (tabindex) {
3865        element.setAttribute("tabindex", tabindex);
3866      } else {
3867        element.removeAttribute("tabindex");
3868      }
3869    };
3870    if (container.hasAttribute("data-tabindex")) {
3871      restoreTabIndex(container);
3872    }
3873    elements.forEach(restoreTabIndex);
3874  }
3875  function focusIntoView(element, options) {
3876    if (!("scrollIntoView" in element)) {
3877      element.focus();
3878    } else {
3879      element.focus({ preventScroll: true });
3880      element.scrollIntoView(_chunks_4R3V3JGP_spreadValues({ block: "nearest", inline: "nearest" }, options));
3881    }
3882  }
3883  
3884  
3885  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KK7H3W2B.js
3886  "use client";
3887  
3888  
3889  
3890  
3891  
3892  // src/focusable/focusable.ts
3893  
3894  
3895  
3896  
3897  
3898  
3899  var isSafariBrowser = isSafari();
3900  var alwaysFocusVisibleInputTypes = [
3901    "text",
3902    "search",
3903    "url",
3904    "tel",
3905    "email",
3906    "password",
3907    "number",
3908    "date",
3909    "month",
3910    "week",
3911    "time",
3912    "datetime",
3913    "datetime-local"
3914  ];
3915  function isAlwaysFocusVisible(element) {
3916    const { tagName, readOnly, type } = element;
3917    if (tagName === "TEXTAREA" && !readOnly)
3918      return true;
3919    if (tagName === "SELECT" && !readOnly)
3920      return true;
3921    if (tagName === "INPUT" && !readOnly) {
3922      return alwaysFocusVisibleInputTypes.includes(type);
3923    }
3924    if (element.isContentEditable)
3925      return true;
3926    return false;
3927  }
3928  function isAlwaysFocusVisibleDelayed(element) {
3929    const role = element.getAttribute("role");
3930    if (role !== "combobox")
3931      return false;
3932    return !!element.dataset.name;
3933  }
3934  function getLabels(element) {
3935    if ("labels" in element) {
3936      return element.labels;
3937    }
3938    return null;
3939  }
3940  function isNativeCheckboxOrRadio(element) {
3941    const tagName = element.tagName.toLowerCase();
3942    if (tagName === "input" && element.type) {
3943      return element.type === "radio" || element.type === "checkbox";
3944    }
3945    return false;
3946  }
3947  function isNativeTabbable(tagName) {
3948    if (!tagName)
3949      return true;
3950    return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a";
3951  }
3952  function supportsDisabledAttribute(tagName) {
3953    if (!tagName)
3954      return true;
3955    return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea";
3956  }
3957  function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) {
3958    if (!focusable) {
3959      return tabIndexProp;
3960    }
3961    if (trulyDisabled) {
3962      if (nativeTabbable && !supportsDisabled) {
3963        return -1;
3964      }
3965      return;
3966    }
3967    if (nativeTabbable) {
3968      return tabIndexProp;
3969    }
3970    return tabIndexProp || 0;
3971  }
3972  function useDisableEvent(onEvent, disabled) {
3973    return useEvent((event) => {
3974      onEvent == null ? void 0 : onEvent(event);
3975      if (event.defaultPrevented)
3976        return;
3977      if (disabled) {
3978        event.stopPropagation();
3979        event.preventDefault();
3980      }
3981    });
3982  }
3983  var isKeyboardModality = true;
3984  function onGlobalMouseDown(event) {
3985    const target = event.target;
3986    if (target && "hasAttribute" in target) {
3987      if (!target.hasAttribute("data-focus-visible")) {
3988        isKeyboardModality = false;
3989      }
3990    }
3991  }
3992  function onGlobalKeyDown(event) {
3993    if (event.metaKey)
3994      return;
3995    if (event.ctrlKey)
3996      return;
3997    if (event.altKey)
3998      return;
3999    isKeyboardModality = true;
4000  }
4001  var useFocusable = createHook(
4002    (_a) => {
4003      var _b = _a, {
4004        focusable = true,
4005        accessibleWhenDisabled,
4006        autoFocus,
4007        onFocusVisible
4008      } = _b, props = __objRest(_b, [
4009        "focusable",
4010        "accessibleWhenDisabled",
4011        "autoFocus",
4012        "onFocusVisible"
4013      ]);
4014      const ref = (0,external_React_.useRef)(null);
4015      (0,external_React_.useEffect)(() => {
4016        if (!focusable)
4017          return;
4018        addGlobalEventListener("mousedown", onGlobalMouseDown, true);
4019        addGlobalEventListener("keydown", onGlobalKeyDown, true);
4020      }, [focusable]);
4021      if (isSafariBrowser) {
4022        (0,external_React_.useEffect)(() => {
4023          if (!focusable)
4024            return;
4025          const element = ref.current;
4026          if (!element)
4027            return;
4028          if (!isNativeCheckboxOrRadio(element))
4029            return;
4030          const labels = getLabels(element);
4031          if (!labels)
4032            return;
4033          const onMouseUp = () => queueMicrotask(() => element.focus());
4034          labels.forEach((label) => label.addEventListener("mouseup", onMouseUp));
4035          return () => {
4036            labels.forEach(
4037              (label) => label.removeEventListener("mouseup", onMouseUp)
4038            );
4039          };
4040        }, [focusable]);
4041      }
4042      const disabled = focusable && disabledFromProps(props);
4043      const trulyDisabled = !!disabled && !accessibleWhenDisabled;
4044      const [focusVisible, setFocusVisible] = (0,external_React_.useState)(false);
4045      (0,external_React_.useEffect)(() => {
4046        if (!focusable)
4047          return;
4048        if (trulyDisabled && focusVisible) {
4049          setFocusVisible(false);
4050        }
4051      }, [focusable, trulyDisabled, focusVisible]);
4052      (0,external_React_.useEffect)(() => {
4053        if (!focusable)
4054          return;
4055        if (!focusVisible)
4056          return;
4057        const element = ref.current;
4058        if (!element)
4059          return;
4060        if (typeof IntersectionObserver === "undefined")
4061          return;
4062        const observer = new IntersectionObserver(() => {
4063          if (!isFocusable(element)) {
4064            setFocusVisible(false);
4065          }
4066        });
4067        observer.observe(element);
4068        return () => observer.disconnect();
4069      }, [focusable, focusVisible]);
4070      const onKeyPressCapture = useDisableEvent(
4071        props.onKeyPressCapture,
4072        disabled
4073      );
4074      const onMouseDownCapture = useDisableEvent(
4075        props.onMouseDownCapture,
4076        disabled
4077      );
4078      const onClickCapture = useDisableEvent(props.onClickCapture, disabled);
4079      const onMouseDownProp = props.onMouseDown;
4080      const onMouseDown = useEvent((event) => {
4081        onMouseDownProp == null ? void 0 : onMouseDownProp(event);
4082        if (event.defaultPrevented)
4083          return;
4084        if (!focusable)
4085          return;
4086        const element = event.currentTarget;
4087        if (!isSafariBrowser)
4088          return;
4089        if (isPortalEvent(event))
4090          return;
4091        if (!isButton(element) && !isNativeCheckboxOrRadio(element))
4092          return;
4093        let receivedFocus = false;
4094        const onFocus = () => {
4095          receivedFocus = true;
4096        };
4097        const options = { capture: true, once: true };
4098        element.addEventListener("focusin", onFocus, options);
4099        queueBeforeEvent(element, "mouseup", () => {
4100          element.removeEventListener("focusin", onFocus, true);
4101          if (receivedFocus)
4102            return;
4103          focusIfNeeded(element);
4104        });
4105      });
4106      const handleFocusVisible = (event, currentTarget) => {
4107        if (currentTarget) {
4108          event.currentTarget = currentTarget;
4109        }
4110        if (!focusable)
4111          return;
4112        const element = event.currentTarget;
4113        if (!element)
4114          return;
4115        if (!hasFocus(element))
4116          return;
4117        onFocusVisible == null ? void 0 : onFocusVisible(event);
4118        if (event.defaultPrevented)
4119          return;
4120        setFocusVisible(true);
4121      };
4122      const onKeyDownCaptureProp = props.onKeyDownCapture;
4123      const onKeyDownCapture = useEvent(
4124        (event) => {
4125          onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
4126          if (event.defaultPrevented)
4127            return;
4128          if (!focusable)
4129            return;
4130          if (focusVisible)
4131            return;
4132          if (event.metaKey)
4133            return;
4134          if (event.altKey)
4135            return;
4136          if (event.ctrlKey)
4137            return;
4138          if (!isSelfTarget(event))
4139            return;
4140          const element = event.currentTarget;
4141          queueMicrotask(() => handleFocusVisible(event, element));
4142        }
4143      );
4144      const onFocusCaptureProp = props.onFocusCapture;
4145      const onFocusCapture = useEvent((event) => {
4146        onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
4147        if (event.defaultPrevented)
4148          return;
4149        if (!focusable)
4150          return;
4151        if (!isSelfTarget(event)) {
4152          setFocusVisible(false);
4153          return;
4154        }
4155        const element = event.currentTarget;
4156        const applyFocusVisible = () => handleFocusVisible(event, element);
4157        if (isKeyboardModality || isAlwaysFocusVisible(event.target)) {
4158          queueMicrotask(applyFocusVisible);
4159        } else if (isAlwaysFocusVisibleDelayed(event.target)) {
4160          queueBeforeEvent(event.target, "focusout", applyFocusVisible);
4161        } else {
4162          setFocusVisible(false);
4163        }
4164      });
4165      const onBlurProp = props.onBlur;
4166      const onBlur = useEvent((event) => {
4167        onBlurProp == null ? void 0 : onBlurProp(event);
4168        if (!focusable)
4169          return;
4170        if (!isFocusEventOutside(event))
4171          return;
4172        setFocusVisible(false);
4173      });
4174      const autoFocusOnShow = (0,external_React_.useContext)(FocusableContext);
4175      const autoFocusRef = useEvent((element) => {
4176        if (!focusable)
4177          return;
4178        if (!autoFocus)
4179          return;
4180        if (!element)
4181          return;
4182        if (!autoFocusOnShow)
4183          return;
4184        queueMicrotask(() => {
4185          if (hasFocus(element))
4186            return;
4187          if (!isFocusable(element))
4188            return;
4189          element.focus();
4190        });
4191      });
4192      const tagName = useTagName(ref, props.as);
4193      const nativeTabbable = focusable && isNativeTabbable(tagName);
4194      const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
4195      const style = trulyDisabled ? _4R3V3JGP_spreadValues({ pointerEvents: "none" }, props.style) : props.style;
4196      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
4197        "data-focus-visible": focusable && focusVisible ? "" : void 0,
4198        "data-autofocus": autoFocus ? true : void 0,
4199        "aria-disabled": disabled ? true : void 0
4200      }, props), {
4201        ref: useMergeRefs(ref, autoFocusRef, props.ref),
4202        style,
4203        tabIndex: getTabIndex(
4204          focusable,
4205          trulyDisabled,
4206          nativeTabbable,
4207          supportsDisabled,
4208          props.tabIndex
4209        ),
4210        disabled: supportsDisabled && trulyDisabled ? true : void 0,
4211        // TODO: Test Focusable contentEditable.
4212        contentEditable: disabled ? void 0 : props.contentEditable,
4213        onKeyPressCapture,
4214        onClickCapture,
4215        onMouseDownCapture,
4216        onMouseDown,
4217        onKeyDownCapture,
4218        onFocusCapture,
4219        onBlur
4220      });
4221      return props;
4222    }
4223  );
4224  var Focusable = createComponent((props) => {
4225    props = useFocusable(props);
4226    return _3ORBWXWF_createElement("div", props);
4227  });
4228  if (false) {}
4229  
4230  
4231  
4232  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NWCBQ4CV.js
4233  "use client";
4234  
4235  
4236  
4237  
4238  
4239  // src/command/command.ts
4240  
4241  
4242  
4243  
4244  
4245  function isNativeClick(event) {
4246    if (!event.isTrusted)
4247      return false;
4248    const element = event.currentTarget;
4249    if (event.key === "Enter") {
4250      return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A";
4251    }
4252    if (event.key === " ") {
4253      return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT";
4254    }
4255    return false;
4256  }
4257  var symbol = Symbol("command");
4258  var useCommand = createHook(
4259    (_a) => {
4260      var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
4261      const ref = (0,external_React_.useRef)(null);
4262      const tagName = useTagName(ref, props.as);
4263      const type = props.type;
4264      const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
4265        () => !!tagName && isButton({ tagName, type })
4266      );
4267      (0,external_React_.useEffect)(() => {
4268        if (!ref.current)
4269          return;
4270        setIsNativeButton(isButton(ref.current));
4271      }, []);
4272      const [active, setActive] = (0,external_React_.useState)(false);
4273      const activeRef = (0,external_React_.useRef)(false);
4274      const disabled = disabledFromProps(props);
4275      const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
4276      const onKeyDownProp = props.onKeyDown;
4277      const onKeyDown = useEvent((event) => {
4278        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
4279        const element = event.currentTarget;
4280        if (event.defaultPrevented)
4281          return;
4282        if (isDuplicate)
4283          return;
4284        if (disabled)
4285          return;
4286        if (!isSelfTarget(event))
4287          return;
4288        if (DLOEKDPY_isTextField(element))
4289          return;
4290        if (element.isContentEditable)
4291          return;
4292        const isEnter = clickOnEnter && event.key === "Enter";
4293        const isSpace = clickOnSpace && event.key === " ";
4294        const shouldPreventEnter = event.key === "Enter" && !clickOnEnter;
4295        const shouldPreventSpace = event.key === " " && !clickOnSpace;
4296        if (shouldPreventEnter || shouldPreventSpace) {
4297          event.preventDefault();
4298          return;
4299        }
4300        if (isEnter || isSpace) {
4301          const nativeClick = isNativeClick(event);
4302          if (isEnter) {
4303            if (!nativeClick) {
4304              event.preventDefault();
4305              const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
4306              const click = () => fireClickEvent(element, eventInit);
4307              if (isFirefox()) {
4308                queueBeforeEvent(element, "keyup", click);
4309              } else {
4310                queueMicrotask(click);
4311              }
4312            }
4313          } else if (isSpace) {
4314            activeRef.current = true;
4315            if (!nativeClick) {
4316              event.preventDefault();
4317              setActive(true);
4318            }
4319          }
4320        }
4321      });
4322      const onKeyUpProp = props.onKeyUp;
4323      const onKeyUp = useEvent((event) => {
4324        onKeyUpProp == null ? void 0 : onKeyUpProp(event);
4325        if (event.defaultPrevented)
4326          return;
4327        if (isDuplicate)
4328          return;
4329        if (disabled)
4330          return;
4331        if (event.metaKey)
4332          return;
4333        const isSpace = clickOnSpace && event.key === " ";
4334        if (activeRef.current && isSpace) {
4335          activeRef.current = false;
4336          if (!isNativeClick(event)) {
4337            event.preventDefault();
4338            setActive(false);
4339            const element = event.currentTarget;
4340            const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]);
4341            queueMicrotask(() => fireClickEvent(element, eventInit));
4342          }
4343        }
4344      });
4345      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({
4346        "data-active": active ? "" : void 0,
4347        type: isNativeButton ? "button" : void 0
4348      }, metadataProps), props), {
4349        ref: useMergeRefs(ref, props.ref),
4350        onKeyDown,
4351        onKeyUp
4352      });
4353      props = useFocusable(props);
4354      return props;
4355    }
4356  );
4357  var Command = createComponent((props) => {
4358    props = useCommand(props);
4359    return _3ORBWXWF_createElement("button", props);
4360  });
4361  if (false) {}
4362  
4363  
4364  
4365  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4UUKJZ4V.js
4366  "use client";
4367  
4368  
4369  // src/collection/collection-context.tsx
4370  var ctx = createStoreContext();
4371  var useCollectionContext = ctx.useContext;
4372  var useCollectionScopedContext = ctx.useScopedContext;
4373  var useCollectionProviderContext = ctx.useProviderContext;
4374  var CollectionContextProvider = ctx.ContextProvider;
4375  var CollectionScopedContextProvider = ctx.ScopedContextProvider;
4376  
4377  
4378  
4379  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UH3I23HL.js
4380  "use client";
4381  
4382  
4383  
4384  
4385  
4386  // src/collection/collection-item.ts
4387  
4388  
4389  var useCollectionItem = createHook(
4390    (_a) => {
4391      var _b = _a, {
4392        store,
4393        shouldRegisterItem = true,
4394        getItem = identity,
4395        element: element
4396      } = _b, props = __objRest(_b, [
4397        "store",
4398        "shouldRegisterItem",
4399        "getItem",
4400        // @ts-expect-error This prop may come from a collection renderer.
4401        "element"
4402      ]);
4403      const context = useCollectionContext();
4404      store = store || context;
4405      const id = useId(props.id);
4406      const ref = (0,external_React_.useRef)(element);
4407      (0,external_React_.useEffect)(() => {
4408        const element2 = ref.current;
4409        if (!id)
4410          return;
4411        if (!element2)
4412          return;
4413        if (!shouldRegisterItem)
4414          return;
4415        const item = getItem({ id, element: element2 });
4416        return store == null ? void 0 : store.renderItem(item);
4417      }, [id, shouldRegisterItem, getItem, store]);
4418      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
4419        ref: useMergeRefs(ref, props.ref)
4420      });
4421      return props;
4422    }
4423  );
4424  var CollectionItem = createComponent(
4425    (props) => {
4426      const htmlProps = useCollectionItem(props);
4427      return _3ORBWXWF_createElement("div", htmlProps);
4428    }
4429  );
4430  if (false) {}
4431  
4432  
4433  
4434  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3IEDWLST.js
4435  "use client";
4436  
4437  // src/composite/utils.ts
4438  
4439  var NULL_ITEM = { id: null };
4440  function flipItems(items, activeId, shouldInsertNullItem = false) {
4441    const index = items.findIndex((item) => item.id === activeId);
4442    return [
4443      ...items.slice(index + 1),
4444      ...shouldInsertNullItem ? [NULL_ITEM] : [],
4445      ...items.slice(0, index)
4446    ];
4447  }
4448  function findFirstEnabledItem(items, excludeId) {
4449    return items.find((item) => {
4450      if (excludeId) {
4451        return !item.disabled && item.id !== excludeId;
4452      }
4453      return !item.disabled;
4454    });
4455  }
4456  function getEnabledItem(store, id) {
4457    if (!id)
4458      return null;
4459    return store.item(id) || null;
4460  }
4461  function groupItemsByRows(items) {
4462    const rows = [];
4463    for (const item of items) {
4464      const row = rows.find((currentRow) => {
4465        var _a;
4466        return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
4467      });
4468      if (row) {
4469        row.push(item);
4470      } else {
4471        rows.push([item]);
4472      }
4473    }
4474    return rows;
4475  }
4476  function selectTextField(element, collapseToEnd = false) {
4477    if (isTextField(element)) {
4478      element.setSelectionRange(
4479        collapseToEnd ? element.value.length : 0,
4480        element.value.length
4481      );
4482    } else if (element.isContentEditable) {
4483      const selection = getDocument(element).getSelection();
4484      selection == null ? void 0 : selection.selectAllChildren(element);
4485      if (collapseToEnd) {
4486        selection == null ? void 0 : selection.collapseToEnd();
4487      }
4488    }
4489  }
4490  var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
4491  function focusSilently(element) {
4492    element[FOCUS_SILENTLY] = true;
4493    element.focus({ preventScroll: true });
4494  }
4495  function silentlyFocused(element) {
4496    const isSilentlyFocused = element[FOCUS_SILENTLY];
4497    delete element[FOCUS_SILENTLY];
4498    return isSilentlyFocused;
4499  }
4500  function isItem(store, element, exclude) {
4501    if (!element)
4502      return false;
4503    if (element === exclude)
4504      return false;
4505    const item = store.item(element.id);
4506    if (!item)
4507      return false;
4508    if (exclude && item.element === exclude)
4509      return false;
4510    return true;
4511  }
4512  
4513  
4514  
4515  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IB7YUKH5.js
4516  "use client";
4517  
4518  
4519  
4520  // src/composite/composite-context.tsx
4521  
4522  var IB7YUKH5_ctx = createStoreContext(
4523    [CollectionContextProvider],
4524    [CollectionScopedContextProvider]
4525  );
4526  var useCompositeContext = IB7YUKH5_ctx.useContext;
4527  var useCompositeScopedContext = IB7YUKH5_ctx.useScopedContext;
4528  var useCompositeProviderContext = IB7YUKH5_ctx.useProviderContext;
4529  var CompositeContextProvider = IB7YUKH5_ctx.ContextProvider;
4530  var CompositeScopedContextProvider = IB7YUKH5_ctx.ScopedContextProvider;
4531  var CompositeItemContext = (0,external_React_.createContext)(
4532    void 0
4533  );
4534  var CompositeRowContext = (0,external_React_.createContext)(
4535    void 0
4536  );
4537  
4538  
4539  
4540  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/EAHJFCU4.js
4541  "use client";
4542  
4543  
4544  
4545  // src/utils/store.ts
4546  function getInternal(store, key) {
4547    const internals = store.__unstableInternals;
4548    invariant(internals, "Invalid store");
4549    return internals[key];
4550  }
4551  function createStore(initialState, ...stores) {
4552    let state = initialState;
4553    let prevStateBatch = state;
4554    let lastUpdate = Symbol();
4555    let destroy = noop;
4556    const instances = /* @__PURE__ */ new Set();
4557    const updatedKeys = /* @__PURE__ */ new Set();
4558    const setups = /* @__PURE__ */ new Set();
4559    const listeners = /* @__PURE__ */ new Set();
4560    const batchListeners = /* @__PURE__ */ new Set();
4561    const disposables = /* @__PURE__ */ new WeakMap();
4562    const listenerKeys = /* @__PURE__ */ new WeakMap();
4563    const storeSetup = (callback) => {
4564      setups.add(callback);
4565      return () => setups.delete(callback);
4566    };
4567    const storeInit = () => {
4568      const initialized = instances.size;
4569      const instance = Symbol();
4570      instances.add(instance);
4571      const maybeDestroy = () => {
4572        instances.delete(instance);
4573        if (instances.size)
4574          return;
4575        destroy();
4576      };
4577      if (initialized)
4578        return maybeDestroy;
4579      const desyncs = getKeys(state).map(
4580        (key) => chain(
4581          ...stores.map((store) => {
4582            var _a;
4583            const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store);
4584            if (!storeState)
4585              return;
4586            if (!Y3OOHFCN_hasOwnProperty(storeState, key))
4587              return;
4588            return sync(store, [key], (state2) => {
4589              setState(
4590                key,
4591                state2[key],
4592                // @ts-expect-error - Not public API. This is just to prevent
4593                // infinite loops.
4594                true
4595              );
4596            });
4597          })
4598        )
4599      );
4600      const teardowns = [];
4601      setups.forEach((setup2) => teardowns.push(setup2()));
4602      const cleanups = stores.map(init);
4603      destroy = chain(...desyncs, ...teardowns, ...cleanups);
4604      return maybeDestroy;
4605    };
4606    const sub = (keys, listener, set = listeners) => {
4607      set.add(listener);
4608      listenerKeys.set(listener, keys);
4609      return () => {
4610        var _a;
4611        (_a = disposables.get(listener)) == null ? void 0 : _a();
4612        disposables.delete(listener);
4613        listenerKeys.delete(listener);
4614        set.delete(listener);
4615      };
4616    };
4617    const storeSubscribe = (keys, listener) => sub(keys, listener);
4618    const storeSync = (keys, listener) => {
4619      disposables.set(listener, listener(state, state));
4620      return sub(keys, listener);
4621    };
4622    const storeBatch = (keys, listener) => {
4623      disposables.set(listener, listener(state, prevStateBatch));
4624      return sub(keys, listener, batchListeners);
4625    };
4626    const storePick = (keys) => createStore(pick(state, keys), finalStore);
4627    const storeOmit = (keys) => createStore(omit(state, keys), finalStore);
4628    const getState = () => state;
4629    const setState = (key, value, fromStores = false) => {
4630      if (!Y3OOHFCN_hasOwnProperty(state, key))
4631        return;
4632      const nextValue = Y3OOHFCN_applyState(value, state[key]);
4633      if (nextValue === state[key])
4634        return;
4635      if (!fromStores) {
4636        stores.forEach((store) => {
4637          var _a;
4638          (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue);
4639        });
4640      }
4641      const prevState = state;
4642      state = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, state), { [key]: nextValue });
4643      const thisUpdate = Symbol();
4644      lastUpdate = thisUpdate;
4645      updatedKeys.add(key);
4646      const run = (listener, prev, uKeys) => {
4647        var _a;
4648        const keys = listenerKeys.get(listener);
4649        const updated = (k) => uKeys ? uKeys.has(k) : k === key;
4650        if (!keys || keys.some(updated)) {
4651          (_a = disposables.get(listener)) == null ? void 0 : _a();
4652          disposables.set(listener, listener(state, prev));
4653        }
4654      };
4655      listeners.forEach((listener) => {
4656        run(listener, prevState);
4657      });
4658      queueMicrotask(() => {
4659        if (lastUpdate !== thisUpdate)
4660          return;
4661        const snapshot = state;
4662        batchListeners.forEach((listener) => {
4663          run(listener, prevStateBatch, updatedKeys);
4664        });
4665        prevStateBatch = snapshot;
4666        updatedKeys.clear();
4667      });
4668    };
4669    const finalStore = {
4670      getState,
4671      setState,
4672      __unstableInternals: {
4673        setup: storeSetup,
4674        init: storeInit,
4675        subscribe: storeSubscribe,
4676        sync: storeSync,
4677        batch: storeBatch,
4678        pick: storePick,
4679        omit: storeOmit
4680      }
4681    };
4682    return finalStore;
4683  }
4684  function setup(store, ...args) {
4685    if (!store)
4686      return;
4687    return getInternal(store, "setup")(...args);
4688  }
4689  function init(store, ...args) {
4690    if (!store)
4691      return;
4692    return getInternal(store, "init")(...args);
4693  }
4694  function EAHJFCU4_subscribe(store, ...args) {
4695    if (!store)
4696      return;
4697    return getInternal(store, "subscribe")(...args);
4698  }
4699  function sync(store, ...args) {
4700    if (!store)
4701      return;
4702    return getInternal(store, "sync")(...args);
4703  }
4704  function batch(store, ...args) {
4705    if (!store)
4706      return;
4707    return getInternal(store, "batch")(...args);
4708  }
4709  function omit2(store, ...args) {
4710    if (!store)
4711      return;
4712    return getInternal(store, "omit")(...args);
4713  }
4714  function pick2(store, ...args) {
4715    if (!store)
4716      return;
4717    return getInternal(store, "pick")(...args);
4718  }
4719  function mergeStore(...stores) {
4720    const initialState = stores.reduce((state, store2) => {
4721      var _a;
4722      const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2);
4723      if (!nextState)
4724        return state;
4725      return _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, state), nextState);
4726    }, {});
4727    const store = createStore(initialState, ...stores);
4728    return store;
4729  }
4730  function throwOnConflictingProps(props, store) {
4731    if (true)
4732      return;
4733    if (!store)
4734      return;
4735    const defaultKeys = Object.entries(props).filter(([key, value]) => key.startsWith("default") && value !== void 0).map(([key]) => {
4736      var _a;
4737      const stateKey = key.replace("default", "");
4738      return `${((_a = stateKey[0]) == null ? void 0 : _a.toLowerCase()) || ""}$stateKey.slice(1)}`;
4739    });
4740    if (!defaultKeys.length)
4741      return;
4742    const storeState = store.getState();
4743    const conflictingProps = defaultKeys.filter(
4744      (key) => Y3OOHFCN_hasOwnProperty(storeState, key)
4745    );
4746    if (!conflictingProps.length)
4747      return;
4748    throw new Error(
4749      `Passing a store prop in conjunction with a default state is not supported.
4750  
4751  const store = useSelectStore();
4752  <SelectProvider store={store} defaultValue="Apple" />
4753                  ^             ^
4754  
4755  Instead, pass the default state to the topmost store:
4756  
4757  const store = useSelectStore({ defaultValue: "Apple" });
4758  <SelectProvider store={store} />
4759  
4760  See https://github.com/ariakit/ariakit/pull/2745 for more details.
4761  
4762  If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit
4763  `
4764    );
4765  }
4766  
4767  
4768  
4769  // EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js
4770  var shim = __webpack_require__(422);
4771  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/EKQEJRUF.js
4772  "use client";
4773  
4774  
4775  
4776  // src/utils/store.tsx
4777  
4778  
4779  
4780  
4781  var { useSyncExternalStore } = shim;
4782  var noopSubscribe = () => () => {
4783  };
4784  function useStoreState(store, keyOrSelector = identity) {
4785    const storeSubscribe = external_React_.useCallback(
4786      (callback) => {
4787        if (!store)
4788          return noopSubscribe();
4789        return EAHJFCU4_subscribe(store, null, callback);
4790      },
4791      [store]
4792    );
4793    const getSnapshot = () => {
4794      const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
4795      const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
4796      const state = store == null ? void 0 : store.getState();
4797      if (selector)
4798        return selector(state);
4799      if (!state)
4800        return;
4801      if (!key)
4802        return;
4803      if (!Y3OOHFCN_hasOwnProperty(state, key))
4804        return;
4805      return state[key];
4806    };
4807    return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot);
4808  }
4809  function useStoreProps(store, props, key, setKey) {
4810    const value = Y3OOHFCN_hasOwnProperty(props, key) ? props[key] : void 0;
4811    const setValue = setKey ? props[setKey] : void 0;
4812    const propsRef = useLiveRef({ value, setValue });
4813    useSafeLayoutEffect(() => {
4814      return sync(store, [key], (state, prev) => {
4815        const { value: value2, setValue: setValue2 } = propsRef.current;
4816        if (!setValue2)
4817          return;
4818        if (state[key] === prev[key])
4819          return;
4820        if (state[key] === value2)
4821          return;
4822        setValue2(state[key]);
4823      });
4824    }, [store, key]);
4825    useSafeLayoutEffect(() => {
4826      if (value === void 0)
4827        return;
4828      store.setState(key, value);
4829      return batch(store, [key], () => {
4830        if (value === void 0)
4831          return;
4832        store.setState(key, value);
4833      });
4834    });
4835  }
4836  function EKQEJRUF_useStore(createStore, props) {
4837    const [store, setStore] = external_React_.useState(() => createStore(props));
4838    useSafeLayoutEffect(() => init(store), [store]);
4839    const useState2 = external_React_.useCallback(
4840      (keyOrSelector) => useStoreState(store, keyOrSelector),
4841      [store]
4842    );
4843    const memoizedStore = external_React_.useMemo(
4844      () => _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, store), { useState: useState2 }),
4845      [store, useState2]
4846    );
4847    const updateStore = useEvent(() => {
4848      setStore((store2) => createStore(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({}, props), store2.getState())));
4849    });
4850    return [memoizedStore, updateStore];
4851  }
4852  
4853  
4854  
4855  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/QZLXIDNP.js
4856  "use client";
4857  
4858  
4859  
4860  
4861  
4862  
4863  
4864  
4865  
4866  // src/composite/composite-item.tsx
4867  
4868  
4869  
4870  
4871  
4872  function isEditableElement(element) {
4873    if (element.isContentEditable)
4874      return true;
4875    if (DLOEKDPY_isTextField(element))
4876      return true;
4877    return element.tagName === "INPUT" && !isButton(element);
4878  }
4879  function getNextPageOffset(scrollingElement, pageUp = false) {
4880    const height = scrollingElement.clientHeight;
4881    const { top } = scrollingElement.getBoundingClientRect();
4882    const pageSize = Math.max(height * 0.875, height - 40) * 1.5;
4883    const pageOffset = pageUp ? height - pageSize + top : pageSize + top;
4884    if (scrollingElement.tagName === "HTML") {
4885      return pageOffset + scrollingElement.scrollTop;
4886    }
4887    return pageOffset;
4888  }
4889  function getItemOffset(itemElement, pageUp = false) {
4890    const { top } = itemElement.getBoundingClientRect();
4891    if (pageUp) {
4892      return top + itemElement.clientHeight;
4893    }
4894    return top;
4895  }
4896  function findNextPageItemId(element, store, next, pageUp = false) {
4897    var _a;
4898    if (!store)
4899      return;
4900    if (!next)
4901      return;
4902    const { renderedItems } = store.getState();
4903    const scrollingElement = getScrollingElement(element);
4904    if (!scrollingElement)
4905      return;
4906    const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
4907    let id;
4908    let prevDifference;
4909    for (let i = 0; i < renderedItems.length; i += 1) {
4910      const previousId = id;
4911      id = next(i);
4912      if (!id)
4913        break;
4914      if (id === previousId)
4915        continue;
4916      const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element;
4917      if (!itemElement)
4918        continue;
4919      const itemOffset = getItemOffset(itemElement, pageUp);
4920      const difference = itemOffset - nextPageOffset;
4921      const absDifference = Math.abs(difference);
4922      if (pageUp && difference <= 0 || !pageUp && difference >= 0) {
4923        if (prevDifference !== void 0 && prevDifference < absDifference) {
4924          id = previousId;
4925        }
4926        break;
4927      }
4928      prevDifference = absDifference;
4929    }
4930    return id;
4931  }
4932  function targetIsAnotherItem(event, store) {
4933    if (isSelfTarget(event))
4934      return false;
4935    return isItem(store, event.target);
4936  }
4937  function useRole(ref, props) {
4938    const roleProp = props.role;
4939    const [role, setRole] = (0,external_React_.useState)(roleProp);
4940    useSafeLayoutEffect(() => {
4941      const element = ref.current;
4942      if (!element)
4943        return;
4944      setRole(element.getAttribute("role") || roleProp);
4945    }, [roleProp]);
4946    return role;
4947  }
4948  function requiresAriaSelected(role) {
4949    return role === "option" || role === "treeitem";
4950  }
4951  function supportsAriaSelected(role) {
4952    if (role === "option")
4953      return true;
4954    if (role === "tab")
4955      return true;
4956    if (role === "treeitem")
4957      return true;
4958    if (role === "gridcell")
4959      return true;
4960    if (role === "row")
4961      return true;
4962    if (role === "columnheader")
4963      return true;
4964    if (role === "rowheader")
4965      return true;
4966    return false;
4967  }
4968  var useCompositeItem = createHook(
4969    (_a) => {
4970      var _b = _a, {
4971        store,
4972        rowId: rowIdProp,
4973        preventScrollOnKeyDown = false,
4974        moveOnKeyPress = true,
4975        tabbable = false,
4976        getItem: getItemProp,
4977        "aria-setsize": ariaSetSizeProp,
4978        "aria-posinset": ariaPosInSetProp
4979      } = _b, props = __objRest(_b, [
4980        "store",
4981        "rowId",
4982        "preventScrollOnKeyDown",
4983        "moveOnKeyPress",
4984        "tabbable",
4985        "getItem",
4986        "aria-setsize",
4987        "aria-posinset"
4988      ]);
4989      const context = useCompositeContext();
4990      store = store || context;
4991      const id = useId(props.id);
4992      const ref = (0,external_React_.useRef)(null);
4993      const row = (0,external_React_.useContext)(CompositeRowContext);
4994      const rowId = useStoreState(store, (state) => {
4995        if (rowIdProp)
4996          return rowIdProp;
4997        if (!state)
4998          return;
4999        if (!(row == null ? void 0 : row.baseElement))
5000          return;
5001        if (row.baseElement !== state.baseElement)
5002          return;
5003        return row.id;
5004      });
5005      const disabled = disabledFromProps(props);
5006      const trulyDisabled = disabled && !props.accessibleWhenDisabled;
5007      const getItem = (0,external_React_.useCallback)(
5008        (item) => {
5009          const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), {
5010            id: id || item.id,
5011            rowId,
5012            disabled: !!trulyDisabled
5013          });
5014          if (getItemProp) {
5015            return getItemProp(nextItem);
5016          }
5017          return nextItem;
5018        },
5019        [id, rowId, trulyDisabled, getItemProp]
5020      );
5021      const onFocusProp = props.onFocus;
5022      const hasFocusedComposite = (0,external_React_.useRef)(false);
5023      const onFocus = useEvent((event) => {
5024        onFocusProp == null ? void 0 : onFocusProp(event);
5025        if (event.defaultPrevented)
5026          return;
5027        if (isPortalEvent(event))
5028          return;
5029        if (!id)
5030          return;
5031        if (!store)
5032          return;
5033        const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
5034        if (targetIsAnotherItem(event, store))
5035          return;
5036        if (activeId !== id) {
5037          store.setActiveId(id);
5038        }
5039        if (!virtualFocus2)
5040          return;
5041        if (!isSelfTarget(event))
5042          return;
5043        if (isEditableElement(event.currentTarget))
5044          return;
5045        if (!(baseElement2 == null ? void 0 : baseElement2.isConnected))
5046          return;
5047        hasFocusedComposite.current = true;
5048        const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget);
5049        if (fromComposite) {
5050          focusSilently(baseElement2);
5051        } else {
5052          baseElement2.focus();
5053        }
5054      });
5055      const onBlurCaptureProp = props.onBlurCapture;
5056      const onBlurCapture = useEvent((event) => {
5057        onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
5058        if (event.defaultPrevented)
5059          return;
5060        const state = store == null ? void 0 : store.getState();
5061        if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) {
5062          hasFocusedComposite.current = false;
5063          event.preventDefault();
5064          event.stopPropagation();
5065        }
5066      });
5067      const onKeyDownProp = props.onKeyDown;
5068      const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);
5069      const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
5070      const onKeyDown = useEvent((event) => {
5071        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
5072        if (event.defaultPrevented)
5073          return;
5074        if (!isSelfTarget(event))
5075          return;
5076        if (!store)
5077          return;
5078        const { currentTarget } = event;
5079        const state = store.getState();
5080        const item = store.item(id);
5081        const isGrid = !!(item == null ? void 0 : item.rowId);
5082        const isVertical = state.orientation !== "horizontal";
5083        const isHorizontal = state.orientation !== "vertical";
5084        const canHomeEnd = () => {
5085          if (isGrid)
5086            return true;
5087          if (isHorizontal)
5088            return true;
5089          if (!state.baseElement)
5090            return true;
5091          if (!DLOEKDPY_isTextField(state.baseElement))
5092            return true;
5093          return false;
5094        };
5095        const keyMap = {
5096          ArrowUp: (isGrid || isVertical) && store.up,
5097          ArrowRight: (isGrid || isHorizontal) && store.next,
5098          ArrowDown: (isGrid || isVertical) && store.down,
5099          ArrowLeft: (isGrid || isHorizontal) && store.previous,
5100          Home: () => {
5101            if (!canHomeEnd())
5102              return;
5103            if (!isGrid || event.ctrlKey) {
5104              return store == null ? void 0 : store.first();
5105            }
5106            return store == null ? void 0 : store.previous(-1);
5107          },
5108          End: () => {
5109            if (!canHomeEnd())
5110              return;
5111            if (!isGrid || event.ctrlKey) {
5112              return store == null ? void 0 : store.last();
5113            }
5114            return store == null ? void 0 : store.next(-1);
5115          },
5116          PageUp: () => {
5117            return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.up, true);
5118          },
5119          PageDown: () => {
5120            return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.down);
5121          }
5122        };
5123        const action = keyMap[event.key];
5124        if (action) {
5125          const nextId = action();
5126          if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
5127            if (!moveOnKeyPressProp(event))
5128              return;
5129            event.preventDefault();
5130            store.move(nextId);
5131          }
5132        }
5133      });
5134      const baseElement = useStoreState(
5135        store,
5136        (state) => (state == null ? void 0 : state.baseElement) || void 0
5137      );
5138      const providerValue = (0,external_React_.useMemo)(
5139        () => ({ id, baseElement }),
5140        [id, baseElement]
5141      );
5142      props = useWrapElement(
5143        props,
5144        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }),
5145        [providerValue]
5146      );
5147      const isActiveItem = useStoreState(
5148        store,
5149        (state) => !!state && state.activeId === id
5150      );
5151      const virtualFocus = useStoreState(store, "virtualFocus");
5152      const role = useRole(ref, props);
5153      let ariaSelected;
5154      if (isActiveItem) {
5155        if (requiresAriaSelected(role)) {
5156          ariaSelected = true;
5157        } else if (virtualFocus && supportsAriaSelected(role)) {
5158          ariaSelected = true;
5159        }
5160      }
5161      const ariaSetSize = useStoreState(store, (state) => {
5162        if (ariaSetSizeProp != null)
5163          return ariaSetSizeProp;
5164        if (!state)
5165          return;
5166        if (!(row == null ? void 0 : row.ariaSetSize))
5167          return;
5168        if (row.baseElement !== state.baseElement)
5169          return;
5170        return row.ariaSetSize;
5171      });
5172      const ariaPosInSet = useStoreState(store, (state) => {
5173        if (ariaPosInSetProp != null)
5174          return ariaPosInSetProp;
5175        if (!state)
5176          return;
5177        if (!(row == null ? void 0 : row.ariaPosInSet))
5178          return;
5179        if (row.baseElement !== state.baseElement)
5180          return;
5181        const itemsInRow = state.renderedItems.filter(
5182          (item) => item.rowId === rowId
5183        );
5184        return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
5185      });
5186      const isTabbable = useStoreState(store, (state) => {
5187        if (!(state == null ? void 0 : state.renderedItems.length))
5188          return true;
5189        if (state.virtualFocus)
5190          return false;
5191        if (tabbable)
5192          return true;
5193        return state.activeId === id;
5194      });
5195      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
5196        id,
5197        "aria-selected": ariaSelected,
5198        "data-active-item": isActiveItem ? "" : void 0
5199      }, props), {
5200        ref: useMergeRefs(ref, props.ref),
5201        tabIndex: isTabbable ? props.tabIndex : -1,
5202        onFocus,
5203        onBlurCapture,
5204        onKeyDown
5205      });
5206      props = useCommand(props);
5207      props = useCollectionItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
5208        store
5209      }, props), {
5210        getItem,
5211        shouldRegisterItem: !!id ? props.shouldRegisterItem : false
5212      }));
5213      return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
5214        "aria-setsize": ariaSetSize,
5215        "aria-posinset": ariaPosInSet
5216      });
5217    }
5218  );
5219  var CompositeItem = createMemoComponent(
5220    (props) => {
5221      const htmlProps = useCompositeItem(props);
5222      return _3ORBWXWF_createElement("button", htmlProps);
5223    }
5224  );
5225  if (false) {}
5226  
5227  
5228  
5229  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/Z5IGYIPT.js
5230  "use client";
5231  
5232  
5233  
5234  
5235  // src/disclosure/disclosure-store.ts
5236  function createDisclosureStore(props = {}) {
5237    const store = mergeStore(
5238      props.store,
5239      omit2(props.disclosure, ["contentElement", "disclosureElement"])
5240    );
5241    throwOnConflictingProps(props, store);
5242    const syncState = store == null ? void 0 : store.getState();
5243    const open = defaultValue(
5244      props.open,
5245      syncState == null ? void 0 : syncState.open,
5246      props.defaultOpen,
5247      false
5248    );
5249    const animated = defaultValue(props.animated, syncState == null ? void 0 : syncState.animated, false);
5250    const initialState = {
5251      open,
5252      animated,
5253      animating: !!animated && open,
5254      mounted: open,
5255      contentElement: defaultValue(syncState == null ? void 0 : syncState.contentElement, null),
5256      disclosureElement: defaultValue(syncState == null ? void 0 : syncState.disclosureElement, null)
5257    };
5258    const disclosure = createStore(initialState, store);
5259    setup(
5260      disclosure,
5261      () => sync(disclosure, ["animated", "animating"], (state) => {
5262        if (state.animated)
5263          return;
5264        disclosure.setState("animating", false);
5265      })
5266    );
5267    setup(
5268      disclosure,
5269      () => EAHJFCU4_subscribe(disclosure, ["open"], () => {
5270        if (!disclosure.getState().animated)
5271          return;
5272        disclosure.setState("animating", true);
5273      })
5274    );
5275    setup(
5276      disclosure,
5277      () => sync(disclosure, ["open", "animating"], (state) => {
5278        disclosure.setState("mounted", state.open || state.animating);
5279      })
5280    );
5281    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, disclosure), {
5282      setOpen: (value) => disclosure.setState("open", value),
5283      show: () => disclosure.setState("open", true),
5284      hide: () => disclosure.setState("open", false),
5285      toggle: () => disclosure.setState("open", (open2) => !open2),
5286      stopAnimation: () => disclosure.setState("animating", false),
5287      setContentElement: (value) => disclosure.setState("contentElement", value),
5288      setDisclosureElement: (value) => disclosure.setState("disclosureElement", value)
5289    });
5290  }
5291  
5292  
5293  
5294  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SFCBA2JZ.js
5295  "use client";
5296  
5297  
5298  
5299  // src/disclosure/disclosure-store.ts
5300  
5301  function useDisclosureStoreProps(store, update, props) {
5302    useUpdateEffect(update, [props.store, props.disclosure]);
5303    useStoreProps(store, props, "open", "setOpen");
5304    useStoreProps(store, props, "mounted", "setMounted");
5305    useStoreProps(store, props, "animated");
5306    return store;
5307  }
5308  function useDisclosureStore(props = {}) {
5309    const [store, update] = EKQEJRUF_useStore(createDisclosureStore, props);
5310    return useDisclosureStoreProps(store, update, props);
5311  }
5312  
5313  
5314  
5315  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SX2XFD6A.js
5316  "use client";
5317  
5318  
5319  // src/dialog/dialog-store.ts
5320  function createDialogStore(props = {}) {
5321    return createDisclosureStore(props);
5322  }
5323  
5324  
5325  
5326  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ZSELSBRM.js
5327  "use client";
5328  
5329  
5330  
5331  // src/dialog/dialog-store.ts
5332  
5333  function useDialogStoreProps(store, update, props) {
5334    return useDisclosureStoreProps(store, update, props);
5335  }
5336  function useDialogStore(props = {}) {
5337    const [store, update] = EKQEJRUF_useStore(createDialogStore, props);
5338    return useDialogStoreProps(store, update, props);
5339  }
5340  
5341  
5342  
5343  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MG4P3223.js
5344  "use client";
5345  
5346  
5347  
5348  
5349  // src/popover/popover-store.ts
5350  
5351  function usePopoverStoreProps(store, update, props) {
5352    useUpdateEffect(update, [props.popover]);
5353    store = useDialogStoreProps(store, update, props);
5354    useStoreProps(store, props, "placement");
5355    return store;
5356  }
5357  function usePopoverStore(props = {}) {
5358    const [store, update] = useStore(Core.createPopoverStore, props);
5359    return usePopoverStoreProps(store, update, props);
5360  }
5361  
5362  
5363  
5364  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ZU7LQC5V.js
5365  "use client";
5366  
5367  
5368  
5369  // src/hovercard/hovercard-store.ts
5370  
5371  function useHovercardStoreProps(store, update, props) {
5372    store = usePopoverStoreProps(store, update, props);
5373    useStoreProps(store, props, "timeout");
5374    useStoreProps(store, props, "showTimeout");
5375    useStoreProps(store, props, "hideTimeout");
5376    return store;
5377  }
5378  function useHovercardStore(props = {}) {
5379    const [store, update] = useStore(Core.createHovercardStore, props);
5380    return useHovercardStoreProps(store, update, props);
5381  }
5382  
5383  
5384  
5385  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/AF6IUUFN.js
5386  "use client";
5387  
5388  
5389  
5390  
5391  
5392  // src/popover/popover-store.ts
5393  function createPopoverStore(_a = {}) {
5394    var _b = _a, {
5395      popover: otherPopover
5396    } = _b, props = _4R3V3JGP_objRest(_b, [
5397      "popover"
5398    ]);
5399    const store = mergeStore(
5400      props.store,
5401      omit2(otherPopover, [
5402        "arrowElement",
5403        "anchorElement",
5404        "contentElement",
5405        "popoverElement",
5406        "disclosureElement"
5407      ])
5408    );
5409    throwOnConflictingProps(props, store);
5410    const syncState = store == null ? void 0 : store.getState();
5411    const dialog = createDialogStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), { store }));
5412    const placement = defaultValue(
5413      props.placement,
5414      syncState == null ? void 0 : syncState.placement,
5415      "bottom"
5416    );
5417    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, dialog.getState()), {
5418      placement,
5419      currentPlacement: placement,
5420      anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null),
5421      popoverElement: defaultValue(syncState == null ? void 0 : syncState.popoverElement, null),
5422      arrowElement: defaultValue(syncState == null ? void 0 : syncState.arrowElement, null),
5423      rendered: Symbol("rendered")
5424    });
5425    const popover = createStore(initialState, dialog, store);
5426    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, dialog), popover), {
5427      setAnchorElement: (element) => popover.setState("anchorElement", element),
5428      setPopoverElement: (element) => popover.setState("popoverElement", element),
5429      setArrowElement: (element) => popover.setState("arrowElement", element),
5430      render: () => popover.setState("rendered", Symbol("rendered"))
5431    });
5432  }
5433  
5434  
5435  
5436  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SOLWE6E5.js
5437  "use client";
5438  
5439  
5440  
5441  
5442  
5443  // src/hovercard/hovercard-store.ts
5444  function createHovercardStore(props = {}) {
5445    var _a;
5446    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
5447    const popover = createPopoverStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
5448      placement: defaultValue(
5449        props.placement,
5450        syncState == null ? void 0 : syncState.placement,
5451        "bottom"
5452      )
5453    }));
5454    const timeout = defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 500);
5455    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, popover.getState()), {
5456      timeout,
5457      showTimeout: defaultValue(props.showTimeout, syncState == null ? void 0 : syncState.showTimeout),
5458      hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout),
5459      autoFocusOnShow: defaultValue(syncState == null ? void 0 : syncState.autoFocusOnShow, false)
5460    });
5461    const hovercard = createStore(initialState, popover, props.store);
5462    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, popover), hovercard), {
5463      setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value)
5464    });
5465  }
5466  
5467  
5468  
5469  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js
5470  "use client";
5471  
5472  
5473  
5474  
5475  
5476  
5477  
5478  
5479  // src/tooltip/tooltip-store.ts
5480  function createTooltipStore(props = {}) {
5481    var _a;
5482    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
5483    const hovercard = createHovercardStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
5484      placement: defaultValue(
5485        props.placement,
5486        syncState == null ? void 0 : syncState.placement,
5487        "top"
5488      ),
5489      hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0)
5490    }));
5491    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, hovercard.getState()), {
5492      type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"),
5493      skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
5494    });
5495    const tooltip = createStore(initialState, hovercard, props.store);
5496    return _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, hovercard), tooltip);
5497  }
5498  
5499  
5500  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/2QMN5E6B.js
5501  "use client";
5502  
5503  
5504  
5505  // src/tooltip/tooltip-store.ts
5506  
5507  function useTooltipStoreProps(store, update, props) {
5508    store = useHovercardStoreProps(store, update, props);
5509    useStoreProps(store, props, "type");
5510    useStoreProps(store, props, "skipTimeout");
5511    return store;
5512  }
5513  function useTooltipStore(props = {}) {
5514    const [store, update] = EKQEJRUF_useStore(createTooltipStore, props);
5515    return useTooltipStoreProps(store, update, props);
5516  }
5517  
5518  
5519  
5520  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FSFPRQFR.js
5521  "use client";
5522  
5523  
5524  // src/role/role.ts
5525  var FSFPRQFR_elements = [
5526    "a",
5527    "button",
5528    "details",
5529    "dialog",
5530    "div",
5531    "form",
5532    "h1",
5533    "h2",
5534    "h3",
5535    "h4",
5536    "h5",
5537    "h6",
5538    "header",
5539    "img",
5540    "input",
5541    "label",
5542    "li",
5543    "nav",
5544    "ol",
5545    "p",
5546    "section",
5547    "select",
5548    "span",
5549    "textarea",
5550    "ul",
5551    "svg"
5552  ];
5553  var FSFPRQFR_useRole = createHook((props) => {
5554    return props;
5555  });
5556  var Role = createComponent((props) => {
5557    return _3ORBWXWF_createElement("div", props);
5558  });
5559  if (false) {}
5560  Object.assign(
5561    Role,
5562    FSFPRQFR_elements.reduce((acc, element) => {
5563      acc[element] = createComponent((props) => {
5564        return _3ORBWXWF_createElement(element, props);
5565      });
5566      return acc;
5567    }, {})
5568  );
5569  
5570  
5571  
5572  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OAYFXAQ2.js
5573  "use client";
5574  
5575  
5576  // src/disclosure/disclosure-context.tsx
5577  var OAYFXAQ2_ctx = createStoreContext();
5578  var useDisclosureContext = OAYFXAQ2_ctx.useContext;
5579  var useDisclosureScopedContext = OAYFXAQ2_ctx.useScopedContext;
5580  var useDisclosureProviderContext = OAYFXAQ2_ctx.useProviderContext;
5581  var DisclosureContextProvider = OAYFXAQ2_ctx.ContextProvider;
5582  var DisclosureScopedContextProvider = OAYFXAQ2_ctx.ScopedContextProvider;
5583  
5584  
5585  
5586  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/G6BJYYBK.js
5587  "use client";
5588  
5589  
5590  
5591  // src/dialog/dialog-context.tsx
5592  
5593  var G6BJYYBK_ctx = createStoreContext(
5594    [DisclosureContextProvider],
5595    [DisclosureScopedContextProvider]
5596  );
5597  var useDialogContext = G6BJYYBK_ctx.useContext;
5598  var useDialogScopedContext = G6BJYYBK_ctx.useScopedContext;
5599  var useDialogProviderContext = G6BJYYBK_ctx.useProviderContext;
5600  var DialogContextProvider = G6BJYYBK_ctx.ContextProvider;
5601  var DialogScopedContextProvider = G6BJYYBK_ctx.ScopedContextProvider;
5602  var DialogHeadingContext = (0,external_React_.createContext)(void 0);
5603  var DialogDescriptionContext = (0,external_React_.createContext)(void 0);
5604  
5605  
5606  
5607  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7H5KSHHF.js
5608  "use client";
5609  
5610  
5611  
5612  // src/popover/popover-context.tsx
5613  var _7H5KSHHF_ctx = createStoreContext(
5614    [DialogContextProvider],
5615    [DialogScopedContextProvider]
5616  );
5617  var usePopoverContext = _7H5KSHHF_ctx.useContext;
5618  var usePopoverScopedContext = _7H5KSHHF_ctx.useScopedContext;
5619  var usePopoverProviderContext = _7H5KSHHF_ctx.useProviderContext;
5620  var PopoverContextProvider = _7H5KSHHF_ctx.ContextProvider;
5621  var PopoverScopedContextProvider = _7H5KSHHF_ctx.ScopedContextProvider;
5622  
5623  
5624  
5625  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TI7CMBHW.js
5626  "use client";
5627  
5628  
5629  
5630  // src/hovercard/hovercard-context.tsx
5631  var TI7CMBHW_ctx = createStoreContext(
5632    [PopoverContextProvider],
5633    [PopoverScopedContextProvider]
5634  );
5635  var useHovercardContext = TI7CMBHW_ctx.useContext;
5636  var useHovercardScopedContext = TI7CMBHW_ctx.useScopedContext;
5637  var useHovercardProviderContext = TI7CMBHW_ctx.useProviderContext;
5638  var HovercardContextProvider = TI7CMBHW_ctx.ContextProvider;
5639  var HovercardScopedContextProvider = TI7CMBHW_ctx.ScopedContextProvider;
5640  
5641  
5642  
5643  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7X4DYKYU.js
5644  "use client";
5645  
5646  
5647  
5648  
5649  
5650  
5651  // src/hovercard/hovercard-anchor.ts
5652  
5653  
5654  
5655  var useHovercardAnchor = createHook(
5656    (_a) => {
5657      var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
5658      const context = useHovercardProviderContext();
5659      store = store || context;
5660      invariant(
5661        store,
5662         false && 0
5663      );
5664      const disabled = disabledFromProps(props);
5665      const showTimeoutRef = (0,external_React_.useRef)(0);
5666      (0,external_React_.useEffect)(() => () => window.clearTimeout(showTimeoutRef.current), []);
5667      (0,external_React_.useEffect)(() => {
5668        const onMouseLeave = (event) => {
5669          if (!store)
5670            return;
5671          const { anchorElement } = store.getState();
5672          if (!anchorElement)
5673            return;
5674          if (event.target !== anchorElement)
5675            return;
5676          window.clearTimeout(showTimeoutRef.current);
5677          showTimeoutRef.current = 0;
5678        };
5679        return addGlobalEventListener("mouseleave", onMouseLeave, true);
5680      }, [store]);
5681      const onMouseMoveProp = props.onMouseMove;
5682      const showOnHoverProp = useBooleanEvent(showOnHover);
5683      const isMouseMoving = useIsMouseMoving();
5684      const onMouseMove = useEvent(
5685        (event) => {
5686          onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
5687          if (disabled)
5688            return;
5689          if (!store)
5690            return;
5691          if (event.defaultPrevented)
5692            return;
5693          if (showTimeoutRef.current)
5694            return;
5695          if (!isMouseMoving())
5696            return;
5697          if (!showOnHoverProp(event))
5698            return;
5699          const element = event.currentTarget;
5700          store.setAnchorElement(element);
5701          store.setDisclosureElement(element);
5702          const { showTimeout, timeout } = store.getState();
5703          const showHovercard = () => {
5704            showTimeoutRef.current = 0;
5705            if (!isMouseMoving())
5706              return;
5707            store == null ? void 0 : store.setAnchorElement(element);
5708            store == null ? void 0 : store.show();
5709            queueMicrotask(() => {
5710              store == null ? void 0 : store.setDisclosureElement(element);
5711            });
5712          };
5713          const timeoutMs = showTimeout != null ? showTimeout : timeout;
5714          if (timeoutMs === 0) {
5715            showHovercard();
5716          } else {
5717            showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
5718          }
5719        }
5720      );
5721      const ref = (0,external_React_.useCallback)(
5722        (element) => {
5723          if (!store)
5724            return;
5725          const { anchorElement } = store.getState();
5726          if (anchorElement == null ? void 0 : anchorElement.isConnected)
5727            return;
5728          store.setAnchorElement(element);
5729        },
5730        [store]
5731      );
5732      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
5733        ref: useMergeRefs(ref, props.ref),
5734        onMouseMove
5735      });
5736      props = useFocusable(props);
5737      return props;
5738    }
5739  );
5740  var HovercardAnchor = createComponent(
5741    (props) => {
5742      const htmlProps = useHovercardAnchor(props);
5743      return _3ORBWXWF_createElement("a", htmlProps);
5744    }
5745  );
5746  if (false) {}
5747  
5748  
5749  
5750  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MNFF5YOJ.js
5751  "use client";
5752  
5753  
5754  
5755  // src/tooltip/tooltip-context.tsx
5756  var MNFF5YOJ_ctx = createStoreContext(
5757    [HovercardContextProvider],
5758    [HovercardScopedContextProvider]
5759  );
5760  var useTooltipContext = MNFF5YOJ_ctx.useContext;
5761  var useTooltipScopedContext = MNFF5YOJ_ctx.useScopedContext;
5762  var useTooltipProviderContext = MNFF5YOJ_ctx.useProviderContext;
5763  var TooltipContextProvider = MNFF5YOJ_ctx.ContextProvider;
5764  var TooltipScopedContextProvider = MNFF5YOJ_ctx.ScopedContextProvider;
5765  
5766  
5767  
5768  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js
5769  "use client";
5770  
5771  
5772  
5773  
5774  
5775  
5776  
5777  
5778  
5779  
5780  
5781  
5782  
5783  // src/tooltip/tooltip-anchor.ts
5784  
5785  
5786  
5787  var globalStore = createStore({
5788    activeStore: null
5789  });
5790  var useTooltipAnchor = createHook(
5791    (_a) => {
5792      var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
5793      const context = useTooltipProviderContext();
5794      store = store || context;
5795      invariant(
5796        store,
5797         false && 0
5798      );
5799      const canShowOnHoverRef = (0,external_React_.useRef)(false);
5800      (0,external_React_.useEffect)(() => {
5801        return sync(store, ["mounted"], (state) => {
5802          if (state.mounted)
5803            return;
5804          canShowOnHoverRef.current = false;
5805        });
5806      }, [store]);
5807      (0,external_React_.useEffect)(() => {
5808        return sync(store, ["mounted", "skipTimeout"], (state) => {
5809          if (!store)
5810            return;
5811          if (state.mounted) {
5812            const { activeStore } = globalStore.getState();
5813            if (activeStore !== store) {
5814              activeStore == null ? void 0 : activeStore.hide();
5815            }
5816            return globalStore.setState("activeStore", store);
5817          }
5818          const id = setTimeout(() => {
5819            const { activeStore } = globalStore.getState();
5820            if (activeStore !== store)
5821              return;
5822            globalStore.setState("activeStore", null);
5823          }, state.skipTimeout);
5824          return () => clearTimeout(id);
5825        });
5826      }, [store]);
5827      const onMouseEnterProp = props.onMouseEnter;
5828      const onMouseEnter = useEvent((event) => {
5829        onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
5830        canShowOnHoverRef.current = true;
5831      });
5832      const onFocusVisibleProp = props.onFocusVisible;
5833      const onFocusVisible = useEvent((event) => {
5834        onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
5835        if (event.defaultPrevented)
5836          return;
5837        store == null ? void 0 : store.setAnchorElement(event.currentTarget);
5838        store == null ? void 0 : store.show();
5839      });
5840      const onBlurProp = props.onBlur;
5841      const onBlur = useEvent((event) => {
5842        onBlurProp == null ? void 0 : onBlurProp(event);
5843        if (event.defaultPrevented)
5844          return;
5845        const { activeStore } = globalStore.getState();
5846        if (activeStore === store) {
5847          globalStore.setState("activeStore", null);
5848        }
5849      });
5850      const type = store.useState("type");
5851      const contentId = store.useState((state) => {
5852        var _a2;
5853        return (_a2 = state.contentElement) == null ? void 0 : _a2.id;
5854      });
5855      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
5856        "aria-labelledby": type === "label" ? contentId : void 0,
5857        "aria-describedby": type === "description" ? contentId : void 0
5858      }, props), {
5859        onMouseEnter,
5860        onFocusVisible,
5861        onBlur
5862      });
5863      props = useHovercardAnchor(_4R3V3JGP_spreadValues({
5864        store,
5865        showOnHover: (event) => {
5866          if (!canShowOnHoverRef.current)
5867            return false;
5868          if (isFalsyBooleanCallback(showOnHover, event))
5869            return false;
5870          const { activeStore } = globalStore.getState();
5871          if (!activeStore)
5872            return true;
5873          store == null ? void 0 : store.show();
5874          return false;
5875        }
5876      }, props));
5877      return props;
5878    }
5879  );
5880  var TooltipAnchor = createComponent((props) => {
5881    const htmlProps = useTooltipAnchor(props);
5882    return _3ORBWXWF_createElement("div", htmlProps);
5883  });
5884  if (false) {}
5885  
5886  
5887  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YMV43K4F.js
5888  "use client";
5889  
5890  // src/hovercard/utils/polygon.ts
5891  function getEventPoint(event) {
5892    return [event.clientX, event.clientY];
5893  }
5894  function isPointInPolygon(point, polygon) {
5895    const [x, y] = point;
5896    let inside = false;
5897    const length = polygon.length;
5898    for (let l = length, i = 0, j = l - 1; i < l; j = i++) {
5899      const [xi, yi] = polygon[i];
5900      const [xj, yj] = polygon[j];
5901      const [, vy] = polygon[j === 0 ? l - 1 : j - 1] || [0, 0];
5902      const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);
5903      if (yj < yi) {
5904        if (y >= yj && y < yi) {
5905          if (where === 0)
5906            return true;
5907          if (where > 0) {
5908            if (y === yj) {
5909              if (y > vy) {
5910                inside = !inside;
5911              }
5912            } else {
5913              inside = !inside;
5914            }
5915          }
5916        }
5917      } else if (yi < yj) {
5918        if (y > yi && y <= yj) {
5919          if (where === 0)
5920            return true;
5921          if (where < 0) {
5922            if (y === yj) {
5923              if (y < vy) {
5924                inside = !inside;
5925              }
5926            } else {
5927              inside = !inside;
5928            }
5929          }
5930        }
5931      } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) {
5932        return true;
5933      }
5934    }
5935    return inside;
5936  }
5937  function getEnterPointPlacement(enterPoint, rect) {
5938    const { top, right, bottom, left } = rect;
5939    const [x, y] = enterPoint;
5940    const placementX = x < left ? "left" : x > right ? "right" : null;
5941    const placementY = y < top ? "top" : y > bottom ? "bottom" : null;
5942    return [placementX, placementY];
5943  }
5944  function getElementPolygon(element, enterPoint) {
5945    const rect = element.getBoundingClientRect();
5946    const { top, right, bottom, left } = rect;
5947    const [x, y] = getEnterPointPlacement(enterPoint, rect);
5948    const polygon = [enterPoint];
5949    if (x) {
5950      if (y !== "top") {
5951        polygon.push([x === "left" ? left : right, top]);
5952      }
5953      polygon.push([x === "left" ? right : left, top]);
5954      polygon.push([x === "left" ? right : left, bottom]);
5955      if (y !== "bottom") {
5956        polygon.push([x === "left" ? left : right, bottom]);
5957      }
5958    } else if (y === "top") {
5959      polygon.push([left, top]);
5960      polygon.push([left, bottom]);
5961      polygon.push([right, bottom]);
5962      polygon.push([right, top]);
5963    } else {
5964      polygon.push([left, bottom]);
5965      polygon.push([left, top]);
5966      polygon.push([right, top]);
5967      polygon.push([right, bottom]);
5968    }
5969    return polygon;
5970  }
5971  
5972  
5973  
5974  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MKDDWKFK.js
5975  "use client";
5976  
5977  // src/dialog/utils/is-backdrop.ts
5978  function MKDDWKFK_isBackdrop(element, ...ids) {
5979    if (!element)
5980      return false;
5981    const backdrop = element.getAttribute("data-backdrop");
5982    if (backdrop == null)
5983      return false;
5984    if (backdrop === "")
5985      return true;
5986    if (backdrop === "true")
5987      return true;
5988    if (!ids.length)
5989      return true;
5990    return ids.some((id) => backdrop === id);
5991  }
5992  
5993  
5994  
5995  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X6WIMZJE.js
5996  "use client";
5997  
5998  // src/dialog/utils/orchestrate.ts
5999  var cleanups = /* @__PURE__ */ new WeakMap();
6000  function orchestrate(element, key, setup) {
6001    if (!cleanups.has(element)) {
6002      cleanups.set(element, /* @__PURE__ */ new Map());
6003    }
6004    const elementCleanups = cleanups.get(element);
6005    const prevCleanup = elementCleanups.get(key);
6006    if (!prevCleanup) {
6007      elementCleanups.set(key, setup());
6008      return () => {
6009        var _a;
6010        (_a = elementCleanups.get(key)) == null ? void 0 : _a();
6011        elementCleanups.delete(key);
6012      };
6013    }
6014    const cleanup = setup();
6015    const nextCleanup = () => {
6016      cleanup();
6017      prevCleanup();
6018      elementCleanups.delete(key);
6019    };
6020    elementCleanups.set(key, nextCleanup);
6021    return () => {
6022      const isCurrent = elementCleanups.get(key) === nextCleanup;
6023      if (!isCurrent)
6024        return;
6025      cleanup();
6026      elementCleanups.set(key, prevCleanup);
6027    };
6028  }
6029  function setAttribute(element, attr, value) {
6030    const setup = () => {
6031      const previousValue = element.getAttribute(attr);
6032      element.setAttribute(attr, value);
6033      return () => {
6034        if (previousValue == null) {
6035          element.removeAttribute(attr);
6036        } else {
6037          element.setAttribute(attr, previousValue);
6038        }
6039      };
6040    };
6041    return orchestrate(element, attr, setup);
6042  }
6043  function setProperty(element, property, value) {
6044    const setup = () => {
6045      const exists = property in element;
6046      const previousValue = element[property];
6047      element[property] = value;
6048      return () => {
6049        if (!exists) {
6050          delete element[property];
6051        } else {
6052          element[property] = previousValue;
6053        }
6054      };
6055    };
6056    return orchestrate(element, property, setup);
6057  }
6058  function assignStyle(element, style) {
6059    if (!element)
6060      return () => {
6061      };
6062    const setup = () => {
6063      const prevStyle = element.style.cssText;
6064      Object.assign(element.style, style);
6065      return () => {
6066        element.style.cssText = prevStyle;
6067      };
6068    };
6069    return orchestrate(element, "style", setup);
6070  }
6071  function setCSSProperty(element, property, value) {
6072    if (!element)
6073      return () => {
6074      };
6075    const setup = () => {
6076      const previousValue = element.style.getPropertyValue(property);
6077      element.style.setProperty(property, value);
6078      return () => {
6079        if (previousValue) {
6080          element.style.setProperty(property, previousValue);
6081        } else {
6082          element.style.removeProperty(property);
6083        }
6084      };
6085    };
6086    return orchestrate(element, property, setup);
6087  }
6088  
6089  
6090  
6091  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/72E5EPFF.js
6092  "use client";
6093  
6094  
6095  // src/dialog/utils/walk-tree-outside.ts
6096  
6097  
6098  var ignoreTags = ["SCRIPT", "STYLE"];
6099  function getSnapshotPropertyName(id) {
6100    return `__ariakit-dialog-snapshot-$id}`;
6101  }
6102  function inSnapshot(id, element) {
6103    const doc = DLOEKDPY_getDocument(element);
6104    const propertyName = getSnapshotPropertyName(id);
6105    if (!doc.body[propertyName])
6106      return true;
6107    do {
6108      if (element === doc.body)
6109        return false;
6110      if (!!element[propertyName])
6111        return true;
6112      if (!element.parentElement)
6113        return false;
6114      element = element.parentElement;
6115    } while (true);
6116  }
6117  function isValidElement(id, element, ignoredElements) {
6118    if (ignoreTags.includes(element.tagName))
6119      return false;
6120    if (!inSnapshot(id, element))
6121      return false;
6122    return !ignoredElements.some(
6123      (enabledElement) => enabledElement && contains(element, enabledElement)
6124    );
6125  }
6126  function _72E5EPFF_walkTreeOutside(id, elements, callback, ancestorCallback) {
6127    for (let element of elements) {
6128      if (!(element == null ? void 0 : element.isConnected))
6129        continue;
6130      const hasAncestorAlready = elements.some((maybeAncestor) => {
6131        if (!maybeAncestor)
6132          return false;
6133        if (maybeAncestor === element)
6134          return false;
6135        return maybeAncestor.contains(element);
6136      });
6137      const doc = DLOEKDPY_getDocument(element);
6138      const originalElement = element;
6139      while (element.parentElement && element !== doc.body) {
6140        ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement, originalElement);
6141        if (!hasAncestorAlready) {
6142          for (const child of element.parentElement.children) {
6143            if (isValidElement(id, child, elements)) {
6144              callback(child, originalElement);
6145            }
6146          }
6147        }
6148        element = element.parentElement;
6149      }
6150    }
6151  }
6152  function createWalkTreeSnapshot(id, elements) {
6153    const { body } = DLOEKDPY_getDocument(elements[0]);
6154    const cleanups = [];
6155    const markElement = (element) => {
6156      cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));
6157    };
6158    _72E5EPFF_walkTreeOutside(id, elements, markElement);
6159    return chain(
6160      setProperty(body, getSnapshotPropertyName(id), true),
6161      () => cleanups.forEach((fn) => fn())
6162    );
6163  }
6164  
6165  
6166  
6167  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TL67WVI6.js
6168  "use client";
6169  
6170  
6171  
6172  
6173  // src/dialog/utils/mark-tree-outside.ts
6174  
6175  function getPropertyName(id = "", ancestor = false) {
6176    return `__ariakit-dialog-$ancestor ? "ancestor" : "outside"}$id ? `-$id}` : ""}`;
6177  }
6178  function markElement(element, id = "") {
6179    return chain(
6180      setProperty(element, getPropertyName(), true),
6181      setProperty(element, getPropertyName(id), true)
6182    );
6183  }
6184  function markAncestor(element, id = "") {
6185    return chain(
6186      setProperty(element, getPropertyName("", true), true),
6187      setProperty(element, getPropertyName(id, true), true)
6188    );
6189  }
6190  function isElementMarked(element, id) {
6191    const ancestorProperty = getPropertyName(id, true);
6192    if (element[ancestorProperty])
6193      return true;
6194    const elementProperty = getPropertyName(id);
6195    do {
6196      if (element[elementProperty])
6197        return true;
6198      if (!element.parentElement)
6199        return false;
6200      element = element.parentElement;
6201    } while (true);
6202  }
6203  function markTreeOutside(id, elements) {
6204    const cleanups = [];
6205    const ids = elements.map((el) => el == null ? void 0 : el.id);
6206    _72E5EPFF_walkTreeOutside(
6207      id,
6208      elements,
6209      (element) => {
6210        if (MKDDWKFK_isBackdrop(element, ...ids))
6211          return;
6212        cleanups.unshift(markElement(element, id));
6213      },
6214      (ancestor, element) => {
6215        const isAnotherDialogAncestor = element.hasAttribute("data-dialog") && element.id !== id;
6216        if (isAnotherDialogAncestor)
6217          return;
6218        cleanups.unshift(markAncestor(ancestor, id));
6219      }
6220    );
6221    const restoreAccessibilityTree = () => {
6222      cleanups.forEach((fn) => fn());
6223    };
6224    return restoreAccessibilityTree;
6225  }
6226  
6227  
6228  
6229  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CLE7NTOY.js
6230  "use client";
6231  
6232  
6233  
6234  
6235  
6236  
6237  
6238  // src/disclosure/disclosure-content.tsx
6239  
6240  
6241  
6242  function afterTimeout(timeoutMs, cb) {
6243    const timeoutId = setTimeout(cb, timeoutMs);
6244    return () => clearTimeout(timeoutId);
6245  }
6246  function CLE7NTOY_afterPaint(cb) {
6247    let raf = requestAnimationFrame(() => {
6248      raf = requestAnimationFrame(cb);
6249    });
6250    return () => cancelAnimationFrame(raf);
6251  }
6252  function parseCSSTime(...times) {
6253    return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => {
6254      const currentTime = parseFloat(currentTimeString || "0s") * 1e3;
6255      if (currentTime > longestTime)
6256        return currentTime;
6257      return longestTime;
6258    }, 0);
6259  }
6260  function isHidden(mounted, hidden, alwaysVisible) {
6261    return !alwaysVisible && hidden !== false && (!mounted || !!hidden);
6262  }
6263  var useDisclosureContent = createHook(
6264    (_a) => {
6265      var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
6266      const context = useDisclosureProviderContext();
6267      store = store || context;
6268      invariant(
6269        store,
6270         false && 0
6271      );
6272      const id = useId(props.id);
6273      const [transition, setTransition] = (0,external_React_.useState)(null);
6274      const open = store.useState("open");
6275      const mounted = store.useState("mounted");
6276      const animated = store.useState("animated");
6277      const contentElement = store.useState("contentElement");
6278      useSafeLayoutEffect(() => {
6279        if (!animated)
6280          return;
6281        if (!(contentElement == null ? void 0 : contentElement.isConnected)) {
6282          setTransition(null);
6283          return;
6284        }
6285        return CLE7NTOY_afterPaint(() => {
6286          setTransition(open ? "enter" : "leave");
6287        });
6288      }, [animated, contentElement, open]);
6289      useSafeLayoutEffect(() => {
6290        if (!store)
6291          return;
6292        if (!animated)
6293          return;
6294        if (!contentElement)
6295          return;
6296        if (!transition)
6297          return;
6298        if (transition === "enter" && !open)
6299          return;
6300        if (transition === "leave" && open)
6301          return;
6302        if (typeof animated === "number") {
6303          const timeoutMs2 = animated;
6304          return afterTimeout(timeoutMs2, store.stopAnimation);
6305        }
6306        const {
6307          transitionDuration,
6308          animationDuration,
6309          transitionDelay,
6310          animationDelay
6311        } = getComputedStyle(contentElement);
6312        const delay = parseCSSTime(transitionDelay, animationDelay);
6313        const duration = parseCSSTime(transitionDuration, animationDuration);
6314        const timeoutMs = delay + duration;
6315        if (!timeoutMs)
6316          return;
6317        return afterTimeout(timeoutMs, store.stopAnimation);
6318      }, [store, animated, contentElement, open, transition]);
6319      props = useWrapElement(
6320        props,
6321        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogScopedContextProvider, { value: store, children: element }),
6322        [store]
6323      );
6324      const hidden = isHidden(mounted, props.hidden, alwaysVisible);
6325      const style = hidden ? _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props.style), { display: "none" }) : props.style;
6326      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
6327        id,
6328        "data-enter": transition === "enter" ? "" : void 0,
6329        "data-leave": transition === "leave" ? "" : void 0,
6330        hidden
6331      }, props), {
6332        ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
6333        style
6334      });
6335      return props;
6336    }
6337  );
6338  var DisclosureContentImpl = createComponent(
6339    (props) => {
6340      const htmlProps = useDisclosureContent(props);
6341      return _3ORBWXWF_createElement("div", htmlProps);
6342    }
6343  );
6344  var DisclosureContent = createComponent(
6345    (_a) => {
6346      var _b = _a, { unmountOnHide } = _b, props = __objRest(_b, ["unmountOnHide"]);
6347      const context = useDisclosureProviderContext();
6348      const store = props.store || context;
6349      const mounted = useStoreState(
6350        store,
6351        (state) => !unmountOnHide || (state == null ? void 0 : state.mounted)
6352      );
6353      if (mounted === false)
6354        return null;
6355      return /* @__PURE__ */ (0,jsx_runtime.jsx)(DisclosureContentImpl, _4R3V3JGP_spreadValues({}, props));
6356    }
6357  );
6358  if (false) {}
6359  
6360  
6361  
6362  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LWHPHW7Q.js
6363  "use client";
6364  
6365  
6366  
6367  
6368  
6369  
6370  
6371  // src/dialog/dialog-backdrop.tsx
6372  
6373  
6374  function DialogBackdrop({
6375    store,
6376    backdrop,
6377    backdropProps,
6378    alwaysVisible,
6379    hidden
6380  }) {
6381    const ref = (0,external_React_.useRef)(null);
6382    const disclosure = useDisclosureStore({ disclosure: store });
6383    const contentElement = store.useState("contentElement");
6384    useSafeLayoutEffect(() => {
6385      const backdrop2 = ref.current;
6386      const dialog = contentElement;
6387      if (!backdrop2)
6388        return;
6389      if (!dialog)
6390        return;
6391      backdrop2.style.zIndex = getComputedStyle(dialog).zIndex;
6392    }, [contentElement]);
6393    useSafeLayoutEffect(() => {
6394      const id = contentElement == null ? void 0 : contentElement.id;
6395      if (!id)
6396        return;
6397      const backdrop2 = ref.current;
6398      if (!backdrop2)
6399        return;
6400      return markAncestor(backdrop2, id);
6401    }, [contentElement]);
6402    if (hidden != null) {
6403      backdropProps = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, backdropProps), { hidden });
6404    }
6405    const props = useDisclosureContent(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
6406      store: disclosure,
6407      role: "presentation",
6408      "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
6409      alwaysVisible
6410    }, backdropProps), {
6411      ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
6412      style: _4R3V3JGP_spreadValues({
6413        position: "fixed",
6414        top: 0,
6415        right: 0,
6416        bottom: 0,
6417        left: 0
6418      }, backdropProps == null ? void 0 : backdropProps.style)
6419    }));
6420    if (!backdrop)
6421      return null;
6422    if ((0,external_React_.isValidElement)(backdrop)) {
6423      return /* @__PURE__ */ (0,jsx_runtime.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: backdrop }));
6424    }
6425    const Component = typeof backdrop !== "boolean" ? backdrop : "div";
6426    return /* @__PURE__ */ (0,jsx_runtime.jsx)(Role, _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, {}) }));
6427  }
6428  
6429  
6430  
6431  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BULCTPRV.js
6432  "use client";
6433  
6434  
6435  
6436  
6437  // src/dialog/utils/disable-accessibility-tree-outside.ts
6438  function hideElementFromAccessibilityTree(element) {
6439    return setAttribute(element, "aria-hidden", "true");
6440  }
6441  function disableAccessibilityTreeOutside(id, elements) {
6442    const cleanups = [];
6443    const ids = elements.map((el) => el == null ? void 0 : el.id);
6444    walkTreeOutside(id, elements, (element) => {
6445      if (isBackdrop(element, ...ids))
6446        return;
6447      cleanups.unshift(hideElementFromAccessibilityTree(element));
6448    });
6449    const restoreAccessibilityTree = () => {
6450      cleanups.forEach((fn) => fn());
6451    };
6452    return restoreAccessibilityTree;
6453  }
6454  
6455  
6456  
6457  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/677M2CI3.js
6458  "use client";
6459  
6460  // src/dialog/utils/supports-inert.ts
6461  function supportsInert() {
6462    return "inert" in HTMLElement.prototype;
6463  }
6464  
6465  
6466  
6467  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TQYOGOE2.js
6468  "use client";
6469  
6470  
6471  
6472  
6473  
6474  
6475  // src/dialog/utils/disable-tree.ts
6476  
6477  
6478  
6479  function disableTree(element, ignoredElements) {
6480    if (!("style" in element))
6481      return noop;
6482    if (supportsInert()) {
6483      return setProperty(element, "inert", true);
6484    }
6485    const tabbableElements = getAllTabbableIn(element, true);
6486    const enableElements = tabbableElements.map((element2) => {
6487      if (ignoredElements == null ? void 0 : ignoredElements.some((el) => el && contains(el, element2)))
6488        return noop;
6489      return setAttribute(element2, "tabindex", "-1");
6490    });
6491    return chain(
6492      ...enableElements,
6493      hideElementFromAccessibilityTree(element),
6494      assignStyle(element, {
6495        pointerEvents: "none",
6496        userSelect: "none",
6497        cursor: "default"
6498      })
6499    );
6500  }
6501  function disableTreeOutside(id, elements) {
6502    const cleanups = [];
6503    const ids = elements.map((el) => el == null ? void 0 : el.id);
6504    _72E5EPFF_walkTreeOutside(id, elements, (element) => {
6505      if (MKDDWKFK_isBackdrop(element, ...ids))
6506        return;
6507      cleanups.unshift(disableTree(element, elements));
6508    });
6509    const restoreTreeOutside = () => {
6510      cleanups.forEach((fn) => fn());
6511    };
6512    return restoreTreeOutside;
6513  }
6514  
6515  
6516  
6517  ;// CONCATENATED MODULE: external "ReactDOM"
6518  const external_ReactDOM_namespaceObject = window["ReactDOM"];
6519  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CS347UVZ.js
6520  "use client";
6521  
6522  
6523  // src/dialog/utils/use-root-dialog.ts
6524  
6525  
6526  
6527  function useRootDialog({
6528    attribute,
6529    contentId,
6530    contentElement,
6531    enabled
6532  }) {
6533    const [updated, retry] = useForceUpdate();
6534    const isRootDialog = (0,external_React_.useCallback)(() => {
6535      if (!enabled)
6536        return false;
6537      if (!contentElement)
6538        return false;
6539      const { body } = DLOEKDPY_getDocument(contentElement);
6540      const id = body.getAttribute(attribute);
6541      return !id || id === contentId;
6542    }, [updated, enabled, contentElement, attribute, contentId]);
6543    (0,external_React_.useEffect)(() => {
6544      if (!enabled)
6545        return;
6546      if (!contentId)
6547        return;
6548      if (!contentElement)
6549        return;
6550      const { body } = DLOEKDPY_getDocument(contentElement);
6551      if (isRootDialog()) {
6552        body.setAttribute(attribute, contentId);
6553        return () => body.removeAttribute(attribute);
6554      }
6555      const observer = new MutationObserver(() => (0,external_ReactDOM_namespaceObject.flushSync)(retry));
6556      observer.observe(body, { attributeFilter: [attribute] });
6557      return () => observer.disconnect();
6558    }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]);
6559    return isRootDialog;
6560  }
6561  
6562  
6563  
6564  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6BJGLK2C.js
6565  "use client";
6566  
6567  
6568  
6569  // src/dialog/utils/use-prevent-body-scroll.ts
6570  
6571  
6572  
6573  
6574  function getPaddingProperty(documentElement) {
6575    const documentLeft = documentElement.getBoundingClientRect().left;
6576    const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
6577    return scrollbarX ? "paddingLeft" : "paddingRight";
6578  }
6579  function usePreventBodyScroll(contentElement, contentId, enabled) {
6580    const isRootDialog = useRootDialog({
6581      attribute: "data-dialog-prevent-body-scroll",
6582      contentElement,
6583      contentId,
6584      enabled
6585    });
6586    (0,external_React_.useEffect)(() => {
6587      if (!isRootDialog())
6588        return;
6589      if (!contentElement)
6590        return;
6591      const doc = DLOEKDPY_getDocument(contentElement);
6592      const win = getWindow(contentElement);
6593      const { documentElement, body } = doc;
6594      const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width");
6595      const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth;
6596      const setScrollbarWidthProperty = () => setCSSProperty(
6597        documentElement,
6598        "--scrollbar-width",
6599        `$scrollbarWidth}px`
6600      );
6601      const paddingProperty = getPaddingProperty(documentElement);
6602      const setStyle = () => assignStyle(body, {
6603        overflow: "hidden",
6604        [paddingProperty]: `$scrollbarWidth}px`
6605      });
6606      const setIOSStyle = () => {
6607        var _a, _b;
6608        const { scrollX, scrollY, visualViewport } = win;
6609        const offsetLeft = (_a = visualViewport == null ? void 0 : visualViewport.offsetLeft) != null ? _a : 0;
6610        const offsetTop = (_b = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _b : 0;
6611        const restoreStyle = assignStyle(body, {
6612          position: "fixed",
6613          overflow: "hidden",
6614          top: `${-(scrollY - Math.floor(offsetTop))}px`,
6615          left: `${-(scrollX - Math.floor(offsetLeft))}px`,
6616          right: "0",
6617          [paddingProperty]: `$scrollbarWidth}px`
6618        });
6619        return () => {
6620          restoreStyle();
6621          if (true) {
6622            win.scrollTo(scrollX, scrollY);
6623          }
6624        };
6625      };
6626      const isIOS = isApple() && !isMac();
6627      return chain(
6628        setScrollbarWidthProperty(),
6629        isIOS ? setIOSStyle() : setStyle()
6630      );
6631    }, [isRootDialog, contentElement]);
6632  }
6633  
6634  
6635  
6636  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IUB2BTEK.js
6637  "use client";
6638  
6639  
6640  // src/dialog/utils/use-nested-dialogs.tsx
6641  
6642  
6643  
6644  
6645  var NestedDialogsContext = (0,external_React_.createContext)({});
6646  function useNestedDialogs(store) {
6647    const context = (0,external_React_.useContext)(NestedDialogsContext);
6648    const [dialogs, setDialogs] = (0,external_React_.useState)([]);
6649    const add = (0,external_React_.useCallback)(
6650      (dialog) => {
6651        var _a;
6652        setDialogs((dialogs2) => [...dialogs2, dialog]);
6653        return chain((_a = context.add) == null ? void 0 : _a.call(context, dialog), () => {
6654          setDialogs((dialogs2) => dialogs2.filter((d) => d !== dialog));
6655        });
6656      },
6657      [context]
6658    );
6659    useSafeLayoutEffect(() => {
6660      return sync(store, ["open", "contentElement"], (state) => {
6661        var _a;
6662        if (!state.open)
6663          return;
6664        if (!state.contentElement)
6665          return;
6666        return (_a = context.add) == null ? void 0 : _a.call(context, store);
6667      });
6668    }, [store, context]);
6669    const providerValue = (0,external_React_.useMemo)(() => ({ store, add }), [store, add]);
6670    const wrapElement = (0,external_React_.useCallback)(
6671      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }),
6672      [providerValue]
6673    );
6674    return { wrapElement, nestedDialogs: dialogs };
6675  }
6676  
6677  
6678  
6679  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OOBDFMJL.js
6680  "use client";
6681  
6682  // src/dialog/utils/use-previous-mouse-down-ref.ts
6683  
6684  
6685  function usePreviousMouseDownRef(enabled) {
6686    const previousMouseDownRef = (0,external_React_.useRef)();
6687    (0,external_React_.useEffect)(() => {
6688      if (!enabled) {
6689        previousMouseDownRef.current = null;
6690        return;
6691      }
6692      const onMouseDown = (event) => {
6693        previousMouseDownRef.current = event.target;
6694      };
6695      return addGlobalEventListener("mousedown", onMouseDown, true);
6696    }, [enabled]);
6697    return previousMouseDownRef;
6698  }
6699  
6700  
6701  
6702  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XHJGS6Z5.js
6703  "use client";
6704  
6705  
6706  
6707  
6708  
6709  // src/dialog/utils/use-hide-on-interact-outside.ts
6710  
6711  
6712  
6713  function isInDocument(target) {
6714    if (target.tagName === "HTML")
6715      return true;
6716    return contains(DLOEKDPY_getDocument(target).body, target);
6717  }
6718  function isDisclosure(disclosure, target) {
6719    if (!disclosure)
6720      return false;
6721    if (contains(disclosure, target))
6722      return true;
6723    const activeId = target.getAttribute("aria-activedescendant");
6724    if (activeId) {
6725      const activeElement = DLOEKDPY_getDocument(disclosure).getElementById(activeId);
6726      if (activeElement) {
6727        return contains(disclosure, activeElement);
6728      }
6729    }
6730    return false;
6731  }
6732  function isMouseEventOnDialog(event, dialog) {
6733    if (!("clientY" in event))
6734      return false;
6735    const rect = dialog.getBoundingClientRect();
6736    if (rect.width === 0 || rect.height === 0)
6737      return false;
6738    return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
6739  }
6740  function useEventOutside({
6741    store,
6742    type,
6743    listener,
6744    capture,
6745    domReady
6746  }) {
6747    const callListener = useEvent(listener);
6748    const open = store.useState("open");
6749    const focusedRef = (0,external_React_.useRef)(false);
6750    useSafeLayoutEffect(() => {
6751      if (!open)
6752        return;
6753      if (!domReady)
6754        return;
6755      const { contentElement } = store.getState();
6756      if (!contentElement)
6757        return;
6758      const onFocus = () => {
6759        focusedRef.current = true;
6760      };
6761      contentElement.addEventListener("focusin", onFocus, true);
6762      return () => contentElement.removeEventListener("focusin", onFocus, true);
6763    }, [store, open, domReady]);
6764    (0,external_React_.useEffect)(() => {
6765      if (!open)
6766        return;
6767      const onEvent = (event) => {
6768        const { contentElement, disclosureElement } = store.getState();
6769        const target = event.target;
6770        if (!contentElement)
6771          return;
6772        if (!target)
6773          return;
6774        if (!isInDocument(target))
6775          return;
6776        if (contains(contentElement, target))
6777          return;
6778        if (isDisclosure(disclosureElement, target))
6779          return;
6780        if (target.hasAttribute("data-focus-trap"))
6781          return;
6782        if (isMouseEventOnDialog(event, contentElement))
6783          return;
6784        const focused = focusedRef.current;
6785        if (focused && !isElementMarked(target, contentElement.id))
6786          return;
6787        callListener(event);
6788      };
6789      return addGlobalEventListener(type, onEvent, capture);
6790    }, [open, capture]);
6791  }
6792  function shouldHideOnInteractOutside(hideOnInteractOutside, event) {
6793    if (typeof hideOnInteractOutside === "function") {
6794      return hideOnInteractOutside(event);
6795    }
6796    return !!hideOnInteractOutside;
6797  }
6798  function useHideOnInteractOutside(store, hideOnInteractOutside, domReady) {
6799    const open = store.useState("open");
6800    const previousMouseDownRef = usePreviousMouseDownRef(open);
6801    const props = { store, domReady, capture: true };
6802    useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
6803      type: "click",
6804      listener: (event) => {
6805        const { contentElement } = store.getState();
6806        const previousMouseDown = previousMouseDownRef.current;
6807        if (!previousMouseDown)
6808          return;
6809        if (!isVisible(previousMouseDown))
6810          return;
6811        if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id))
6812          return;
6813        if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
6814          return;
6815        store.hide();
6816      }
6817    }));
6818    useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
6819      type: "focusin",
6820      listener: (event) => {
6821        const { contentElement } = store.getState();
6822        if (!contentElement)
6823          return;
6824        if (event.target === DLOEKDPY_getDocument(contentElement))
6825          return;
6826        if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
6827          return;
6828        store.hide();
6829      }
6830    }));
6831    useEventOutside(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
6832      type: "contextmenu",
6833      listener: (event) => {
6834        if (!shouldHideOnInteractOutside(hideOnInteractOutside, event))
6835          return;
6836        store.hide();
6837      }
6838    }));
6839  }
6840  
6841  
6842  
6843  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6GXEOXGT.js
6844  "use client";
6845  
6846  // src/dialog/utils/prepend-hidden-dismiss.ts
6847  
6848  function prependHiddenDismiss(container, onClick) {
6849    const document = DLOEKDPY_getDocument(container);
6850    const button = document.createElement("button");
6851    button.type = "button";
6852    button.tabIndex = -1;
6853    button.textContent = "Dismiss popup";
6854    Object.assign(button.style, {
6855      border: "0px",
6856      clip: "rect(0 0 0 0)",
6857      height: "1px",
6858      margin: "-1px",
6859      overflow: "hidden",
6860      padding: "0px",
6861      position: "absolute",
6862      whiteSpace: "nowrap",
6863      width: "1px"
6864    });
6865    button.addEventListener("click", onClick);
6866    container.prepend(button);
6867    const removeHiddenDismiss = () => {
6868      button.removeEventListener("click", onClick);
6869      button.remove();
6870    };
6871    return removeHiddenDismiss;
6872  }
6873  
6874  
6875  
6876  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HPP6CWMY.js
6877  "use client";
6878  
6879  
6880  
6881  
6882  
6883  // src/focusable/focusable-container.tsx
6884  
6885  var useFocusableContainer = createHook(
6886    (_a) => {
6887      var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
6888      props = useWrapElement(
6889        props,
6890        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
6891        [autoFocusOnShow]
6892      );
6893      return props;
6894    }
6895  );
6896  var FocusableContainer = createComponent(
6897    (props) => {
6898      const htmlProps = useFocusableContainer(props);
6899      return _3ORBWXWF_createElement("div", htmlProps);
6900    }
6901  );
6902  if (false) {}
6903  
6904  
6905  
6906  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XPF5GU3Q.js
6907  "use client";
6908  
6909  // src/heading/heading-context.ts
6910  
6911  var HeadingContext = (0,external_React_.createContext)(0);
6912  
6913  
6914  
6915  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UYRJLDVS.js
6916  "use client";
6917  
6918  
6919  // src/heading/heading-level.tsx
6920  
6921  
6922  function HeadingLevel({ level, children }) {
6923    const contextLevel = (0,external_React_.useContext)(HeadingContext);
6924    const nextLevel = Math.max(
6925      Math.min(level || contextLevel + 1, 6),
6926      1
6927    );
6928    return /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingContext.Provider, { value: nextLevel, children });
6929  }
6930  
6931  
6932  
6933  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BG6HZDS7.js
6934  "use client";
6935  
6936  
6937  
6938  // src/visually-hidden/visually-hidden.ts
6939  var useVisuallyHidden = createHook((props) => {
6940    props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
6941      style: _4R3V3JGP_spreadValues({
6942        border: 0,
6943        clip: "rect(0 0 0 0)",
6944        height: "1px",
6945        margin: "-1px",
6946        overflow: "hidden",
6947        padding: 0,
6948        position: "absolute",
6949        whiteSpace: "nowrap",
6950        width: "1px"
6951      }, props.style)
6952    });
6953    return props;
6954  });
6955  var VisuallyHidden = createComponent(
6956    (props) => {
6957      const htmlProps = useVisuallyHidden(props);
6958      return _3ORBWXWF_createElement("span", htmlProps);
6959    }
6960  );
6961  if (false) {}
6962  
6963  
6964  
6965  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CHKJ74UC.js
6966  "use client";
6967  
6968  
6969  
6970  
6971  // src/focus-trap/focus-trap.ts
6972  var useFocusTrap = createHook((props) => {
6973    props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
6974      "data-focus-trap": "",
6975      tabIndex: 0,
6976      "aria-hidden": true
6977    }, props), {
6978      style: _4R3V3JGP_spreadValues({
6979        // Prevents unintended scroll jumps.
6980        position: "fixed",
6981        top: 0,
6982        left: 0
6983      }, props.style)
6984    });
6985    props = useVisuallyHidden(props);
6986    return props;
6987  });
6988  var FocusTrap = createComponent((props) => {
6989    const htmlProps = useFocusTrap(props);
6990    return _3ORBWXWF_createElement("span", htmlProps);
6991  });
6992  if (false) {}
6993  
6994  
6995  
6996  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7452U3HH.js
6997  "use client";
6998  
6999  // src/portal/portal-context.ts
7000  
7001  var PortalContext = (0,external_React_.createContext)(null);
7002  
7003  
7004  
7005  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JPXNJYSO.js
7006  "use client";
7007  
7008  
7009  
7010  
7011  
7012  
7013  
7014  // src/portal/portal.tsx
7015  
7016  
7017  
7018  
7019  
7020  
7021  function getRootElement(element) {
7022    return DLOEKDPY_getDocument(element).body;
7023  }
7024  function getPortalElement(element, portalElement) {
7025    if (!portalElement) {
7026      return DLOEKDPY_getDocument(element).createElement("div");
7027    }
7028    if (typeof portalElement === "function") {
7029      return portalElement(element);
7030    }
7031    return portalElement;
7032  }
7033  function getRandomId(prefix = "id") {
7034    return `$prefix ? `$prefix}-` : ""}$Math.random().toString(36).substr(2, 6)}`;
7035  }
7036  function queueFocus(element) {
7037    queueMicrotask(() => {
7038      element == null ? void 0 : element.focus();
7039    });
7040  }
7041  var usePortal = createHook(
7042    (_a) => {
7043      var _b = _a, {
7044        preserveTabOrder,
7045        preserveTabOrderAnchor,
7046        portalElement,
7047        portalRef,
7048        portal = true
7049      } = _b, props = __objRest(_b, [
7050        "preserveTabOrder",
7051        "preserveTabOrderAnchor",
7052        "portalElement",
7053        "portalRef",
7054        "portal"
7055      ]);
7056      const ref = (0,external_React_.useRef)(null);
7057      const refProp = useMergeRefs(ref, props.ref);
7058      const context = (0,external_React_.useContext)(PortalContext);
7059      const [portalNode, setPortalNode] = (0,external_React_.useState)(null);
7060      const [anchorPortalNode, setAnchorPortalNode] = (0,external_React_.useState)(null);
7061      const outerBeforeRef = (0,external_React_.useRef)(null);
7062      const innerBeforeRef = (0,external_React_.useRef)(null);
7063      const innerAfterRef = (0,external_React_.useRef)(null);
7064      const outerAfterRef = (0,external_React_.useRef)(null);
7065      useSafeLayoutEffect(() => {
7066        const element = ref.current;
7067        if (!element || !portal) {
7068          setPortalNode(null);
7069          return;
7070        }
7071        const portalEl = getPortalElement(element, portalElement);
7072        if (!portalEl) {
7073          setPortalNode(null);
7074          return;
7075        }
7076        const isPortalInDocument = portalEl.isConnected;
7077        if (!isPortalInDocument) {
7078          const rootElement = context || getRootElement(element);
7079          rootElement.appendChild(portalEl);
7080        }
7081        if (!portalEl.id) {
7082          portalEl.id = element.id ? `portal/$element.id}` : getRandomId();
7083        }
7084        setPortalNode(portalEl);
7085        setRef(portalRef, portalEl);
7086        if (isPortalInDocument)
7087          return;
7088        return () => {
7089          portalEl.remove();
7090          setRef(portalRef, null);
7091        };
7092      }, [portal, portalElement, context, portalRef]);
7093      useSafeLayoutEffect(() => {
7094        if (!preserveTabOrder)
7095          return;
7096        if (!preserveTabOrderAnchor)
7097          return;
7098        const doc = DLOEKDPY_getDocument(preserveTabOrderAnchor);
7099        const element = doc.createElement("span");
7100        element.style.position = "fixed";
7101        preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
7102        setAnchorPortalNode(element);
7103        return () => {
7104          element.remove();
7105          setAnchorPortalNode(null);
7106        };
7107      }, [preserveTabOrder, preserveTabOrderAnchor]);
7108      (0,external_React_.useEffect)(() => {
7109        if (!portalNode)
7110          return;
7111        if (!preserveTabOrder)
7112          return;
7113        let raf = 0;
7114        const onFocus = (event) => {
7115          if (!isFocusEventOutside(event))
7116            return;
7117          const focusing = event.type === "focusin";
7118          cancelAnimationFrame(raf);
7119          if (focusing) {
7120            return restoreFocusIn(portalNode);
7121          }
7122          raf = requestAnimationFrame(() => {
7123            disableFocusIn(portalNode, true);
7124          });
7125        };
7126        portalNode.addEventListener("focusin", onFocus, true);
7127        portalNode.addEventListener("focusout", onFocus, true);
7128        return () => {
7129          cancelAnimationFrame(raf);
7130          portalNode.removeEventListener("focusin", onFocus, true);
7131          portalNode.removeEventListener("focusout", onFocus, true);
7132        };
7133      }, [portalNode, preserveTabOrder]);
7134      props = useWrapElement(
7135        props,
7136        (element) => {
7137          element = // While the portal node is not in the DOM, we need to pass the
7138          // current context to the portal context, otherwise it's going to
7139          // reset to the body element on nested portals.
7140          /* @__PURE__ */ (0,jsx_runtime.jsx)(PortalContext.Provider, { value: portalNode || context, children: element });
7141          if (!portal)
7142            return element;
7143          if (!portalNode) {
7144            return /* @__PURE__ */ (0,jsx_runtime.jsx)(
7145              "span",
7146              {
7147                ref: refProp,
7148                id: props.id,
7149                style: { position: "fixed" },
7150                hidden: true
7151              }
7152            );
7153          }
7154          element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
7155            preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
7156              FocusTrap,
7157              {
7158                ref: innerBeforeRef,
7159                className: "__focus-trap-inner-before",
7160                onFocus: (event) => {
7161                  if (isFocusEventOutside(event, portalNode)) {
7162                    queueFocus(getNextTabbable());
7163                  } else {
7164                    queueFocus(outerBeforeRef.current);
7165                  }
7166                }
7167              }
7168            ),
7169            element,
7170            preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
7171              FocusTrap,
7172              {
7173                ref: innerAfterRef,
7174                className: "__focus-trap-inner-after",
7175                onFocus: (event) => {
7176                  if (isFocusEventOutside(event, portalNode)) {
7177                    queueFocus(getPreviousTabbable());
7178                  } else {
7179                    queueFocus(outerAfterRef.current);
7180                  }
7181                }
7182              }
7183            )
7184          ] });
7185          if (portalNode) {
7186            element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode);
7187          }
7188          let preserveTabOrderElement = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
7189            preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
7190              FocusTrap,
7191              {
7192                ref: outerBeforeRef,
7193                className: "__focus-trap-outer-before",
7194                onFocus: (event) => {
7195                  const fromOuter = event.relatedTarget === outerAfterRef.current;
7196                  if (!fromOuter && isFocusEventOutside(event, portalNode)) {
7197                    queueFocus(innerBeforeRef.current);
7198                  } else {
7199                    queueFocus(getPreviousTabbable());
7200                  }
7201                }
7202              }
7203            ),
7204            preserveTabOrder && // We're using position: fixed here so that the browser doesn't
7205            // add margin to the element when setting gap on a parent element.
7206            /* @__PURE__ */ (0,jsx_runtime.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
7207            preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)(
7208              FocusTrap,
7209              {
7210                ref: outerAfterRef,
7211                className: "__focus-trap-outer-after",
7212                onFocus: (event) => {
7213                  if (isFocusEventOutside(event, portalNode)) {
7214                    queueFocus(innerAfterRef.current);
7215                  } else {
7216                    const nextTabbable = getNextTabbable();
7217                    if (nextTabbable === innerBeforeRef.current) {
7218                      requestAnimationFrame(() => {
7219                        var _a2;
7220                        return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
7221                      });
7222                      return;
7223                    }
7224                    queueFocus(nextTabbable);
7225                  }
7226                }
7227              }
7228            )
7229          ] });
7230          if (anchorPortalNode && preserveTabOrder) {
7231            preserveTabOrderElement = (0,external_ReactDOM_namespaceObject.createPortal)(
7232              preserveTabOrderElement,
7233              anchorPortalNode
7234            );
7235          }
7236          return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
7237            preserveTabOrderElement,
7238            element
7239          ] });
7240        },
7241        [
7242          portalNode,
7243          context,
7244          portal,
7245          props.id,
7246          preserveTabOrder,
7247          anchorPortalNode
7248        ]
7249      );
7250      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
7251        ref: refProp
7252      });
7253      return props;
7254    }
7255  );
7256  var Portal = createComponent((props) => {
7257    const htmlProps = usePortal(props);
7258    return _3ORBWXWF_createElement("div", htmlProps);
7259  });
7260  if (false) {}
7261  
7262  
7263  
7264  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NERBASET.js
7265  "use client";
7266  
7267  
7268  
7269  
7270  
7271  
7272  
7273  
7274  
7275  
7276  
7277  
7278  
7279  
7280  
7281  
7282  
7283  
7284  
7285  
7286  // src/dialog/dialog.tsx
7287  
7288  
7289  
7290  
7291  
7292  
7293  
7294  var NERBASET_isSafariBrowser = isSafari();
7295  function isAlreadyFocusingAnotherElement(dialog) {
7296    const activeElement = getActiveElement();
7297    if (!activeElement)
7298      return false;
7299    if (dialog && contains(dialog, activeElement))
7300      return false;
7301    if (isFocusable(activeElement))
7302      return true;
7303    return false;
7304  }
7305  function getElementFromProp(prop, focusable = false) {
7306    if (!prop)
7307      return null;
7308    const element = "current" in prop ? prop.current : prop;
7309    if (!element)
7310      return null;
7311    if (focusable)
7312      return isFocusable(element) ? element : null;
7313    return element;
7314  }
7315  var useDialog = createHook(
7316    (_a) => {
7317      var _b = _a, {
7318        store: storeProp,
7319        open: openProp,
7320        onClose,
7321        focusable = true,
7322        modal = true,
7323        portal = !!modal,
7324        backdrop = !!modal,
7325        backdropProps,
7326        hideOnEscape = true,
7327        hideOnInteractOutside = true,
7328        getPersistentElements,
7329        preventBodyScroll = !!modal,
7330        autoFocusOnShow = true,
7331        autoFocusOnHide = true,
7332        initialFocus,
7333        finalFocus,
7334        unmountOnHide
7335      } = _b, props = __objRest(_b, [
7336        "store",
7337        "open",
7338        "onClose",
7339        "focusable",
7340        "modal",
7341        "portal",
7342        "backdrop",
7343        "backdropProps",
7344        "hideOnEscape",
7345        "hideOnInteractOutside",
7346        "getPersistentElements",
7347        "preventBodyScroll",
7348        "autoFocusOnShow",
7349        "autoFocusOnHide",
7350        "initialFocus",
7351        "finalFocus",
7352        "unmountOnHide"
7353      ]);
7354      const context = useDialogProviderContext();
7355      const ref = (0,external_React_.useRef)(null);
7356      const store = useDialogStore({
7357        store: storeProp || context,
7358        open: openProp,
7359        setOpen(open2) {
7360          if (open2)
7361            return;
7362          const dialog = ref.current;
7363          if (!dialog)
7364            return;
7365          const event = new Event("close", { bubbles: false, cancelable: true });
7366          if (onClose) {
7367            dialog.addEventListener("close", onClose, { once: true });
7368          }
7369          dialog.dispatchEvent(event);
7370          if (!event.defaultPrevented)
7371            return;
7372          store.setOpen(true);
7373        }
7374      });
7375      const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
7376      const preserveTabOrderProp = props.preserveTabOrder;
7377      const preserveTabOrder = store.useState(
7378        (state) => preserveTabOrderProp && !modal && state.mounted
7379      );
7380      const id = useId(props.id);
7381      const open = store.useState("open");
7382      const mounted = store.useState("mounted");
7383      const contentElement = store.useState("contentElement");
7384      const hidden = isHidden(mounted, props.hidden, props.alwaysVisible);
7385      usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden);
7386      useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
7387      const { wrapElement, nestedDialogs } = useNestedDialogs(store);
7388      props = useWrapElement(props, wrapElement, [wrapElement]);
7389      if (false) {}
7390      useSafeLayoutEffect(() => {
7391        if (!open)
7392          return;
7393        const dialog = ref.current;
7394        const activeElement = getActiveElement(dialog, true);
7395        if (!activeElement)
7396          return;
7397        if (activeElement.tagName === "BODY")
7398          return;
7399        if (dialog && contains(dialog, activeElement))
7400          return;
7401        store.setDisclosureElement(activeElement);
7402      }, [store, open]);
7403      if (NERBASET_isSafariBrowser) {
7404        (0,external_React_.useEffect)(() => {
7405          if (!mounted)
7406            return;
7407          const { disclosureElement } = store.getState();
7408          if (!disclosureElement)
7409            return;
7410          if (!isButton(disclosureElement))
7411            return;
7412          const onMouseDown = () => {
7413            let receivedFocus = false;
7414            const onFocus = () => {
7415              receivedFocus = true;
7416            };
7417            const options = { capture: true, once: true };
7418            disclosureElement.addEventListener("focusin", onFocus, options);
7419            queueBeforeEvent(disclosureElement, "mouseup", () => {
7420              disclosureElement.removeEventListener("focusin", onFocus, true);
7421              if (receivedFocus)
7422                return;
7423              focusIfNeeded(disclosureElement);
7424            });
7425          };
7426          disclosureElement.addEventListener("mousedown", onMouseDown);
7427          return () => {
7428            disclosureElement.removeEventListener("mousedown", onMouseDown);
7429          };
7430        }, [store, mounted]);
7431      }
7432      (0,external_React_.useEffect)(() => {
7433        if (!modal)
7434          return;
7435        if (!mounted)
7436          return;
7437        if (!domReady)
7438          return;
7439        const dialog = ref.current;
7440        if (!dialog)
7441          return;
7442        const existingDismiss = dialog.querySelector("[data-dialog-dismiss]");
7443        if (existingDismiss)
7444          return;
7445        return prependHiddenDismiss(dialog, store.hide);
7446      }, [store, modal, mounted, domReady]);
7447      useSafeLayoutEffect(() => {
7448        if (open)
7449          return;
7450        if (!mounted)
7451          return;
7452        if (!domReady)
7453          return;
7454        const dialog = ref.current;
7455        if (!dialog)
7456          return;
7457        return disableTree(dialog);
7458      }, [open, mounted, domReady]);
7459      const canTakeTreeSnapshot = open && domReady;
7460      useSafeLayoutEffect(() => {
7461        if (!id)
7462          return;
7463        if (!canTakeTreeSnapshot)
7464          return;
7465        const dialog = ref.current;
7466        return createWalkTreeSnapshot(id, [dialog]);
7467      }, [id, canTakeTreeSnapshot]);
7468      const getPersistentElementsProp = useEvent(getPersistentElements);
7469      useSafeLayoutEffect(() => {
7470        if (!id)
7471          return;
7472        if (!canTakeTreeSnapshot)
7473          return;
7474        const { disclosureElement } = store.getState();
7475        const dialog = ref.current;
7476        const persistentElements = getPersistentElementsProp() || [];
7477        const allElements = [
7478          dialog,
7479          ...persistentElements,
7480          ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
7481        ];
7482        if (modal) {
7483          return chain(
7484            markTreeOutside(id, allElements),
7485            disableTreeOutside(id, allElements)
7486          );
7487        }
7488        return markTreeOutside(id, [disclosureElement, ...allElements]);
7489      }, [
7490        id,
7491        store,
7492        canTakeTreeSnapshot,
7493        getPersistentElementsProp,
7494        nestedDialogs,
7495        modal
7496      ]);
7497      const mayAutoFocusOnShow = !!autoFocusOnShow;
7498      const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
7499      const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false);
7500      (0,external_React_.useEffect)(() => {
7501        if (!open)
7502          return;
7503        if (!mayAutoFocusOnShow)
7504          return;
7505        if (!domReady)
7506          return;
7507        if (!(contentElement == null ? void 0 : contentElement.isConnected))
7508          return;
7509        const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element
7510        // with the autofocus attribute. If it's an Ariakit component, the
7511        // Focusable component will consume the autoFocus prop and add the
7512        // data-autofocus attribute to the element instead.
7513        contentElement.querySelector(
7514          "[data-autofocus=true],[autofocus]"
7515        ) || // We have to fallback to the first focusable element otherwise portaled
7516        // dialogs with preserveTabOrder set to true will not receive focus
7517        // properly because the elements aren't tabbable until the dialog
7518        // receives focus.
7519        getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself.
7520        contentElement;
7521        const isElementFocusable = isFocusable(element);
7522        if (!autoFocusOnShowProp(isElementFocusable ? element : null))
7523          return;
7524        setAutoFocusEnabled(true);
7525        queueMicrotask(() => {
7526          element.focus();
7527          if (!NERBASET_isSafariBrowser)
7528            return;
7529          element.scrollIntoView({ block: "nearest", inline: "nearest" });
7530        });
7531      }, [
7532        open,
7533        mayAutoFocusOnShow,
7534        domReady,
7535        contentElement,
7536        initialFocus,
7537        portal,
7538        preserveTabOrder,
7539        autoFocusOnShowProp
7540      ]);
7541      const mayAutoFocusOnHide = !!autoFocusOnHide;
7542      const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide);
7543      const [hasOpened, setHasOpened] = (0,external_React_.useState)(false);
7544      (0,external_React_.useEffect)(() => {
7545        if (!open)
7546          return;
7547        setHasOpened(true);
7548        return () => setHasOpened(false);
7549      }, [open]);
7550      const focusOnHide = (0,external_React_.useCallback)(
7551        (dialog, retry = true) => {
7552          const { disclosureElement } = store.getState();
7553          if (isAlreadyFocusingAnotherElement(dialog))
7554            return;
7555          let element = getElementFromProp(finalFocus) || disclosureElement;
7556          if (element == null ? void 0 : element.id) {
7557            const doc = DLOEKDPY_getDocument(element);
7558            const selector = `[aria-activedescendant="$element.id}"]`;
7559            const composite = doc.querySelector(selector);
7560            if (composite) {
7561              element = composite;
7562            }
7563          }
7564          if (element && !isFocusable(element)) {
7565            const maybeParentDialog = DLOEKDPY_closest(element, "[data-dialog]");
7566            if (maybeParentDialog && maybeParentDialog.id) {
7567              const doc = DLOEKDPY_getDocument(maybeParentDialog);
7568              const selector = `[aria-controls~="$maybeParentDialog.id}"]`;
7569              const control = doc.querySelector(selector);
7570              if (control) {
7571                element = control;
7572              }
7573            }
7574          }
7575          const isElementFocusable = element && isFocusable(element);
7576          if (!isElementFocusable && retry) {
7577            requestAnimationFrame(() => focusOnHide(dialog, false));
7578            return;
7579          }
7580          if (!autoFocusOnHideProp(isElementFocusable ? element : null))
7581            return;
7582          if (!isElementFocusable)
7583            return;
7584          element == null ? void 0 : element.focus();
7585        },
7586        [store, finalFocus, autoFocusOnHideProp]
7587      );
7588      useSafeLayoutEffect(() => {
7589        if (open)
7590          return;
7591        if (!hasOpened)
7592          return;
7593        if (!mayAutoFocusOnHide)
7594          return;
7595        const dialog = ref.current;
7596        focusOnHide(dialog);
7597      }, [open, hasOpened, domReady, mayAutoFocusOnHide, focusOnHide]);
7598      (0,external_React_.useEffect)(() => {
7599        if (!hasOpened)
7600          return;
7601        if (!mayAutoFocusOnHide)
7602          return;
7603        const dialog = ref.current;
7604        return () => focusOnHide(dialog);
7605      }, [hasOpened, mayAutoFocusOnHide, focusOnHide]);
7606      const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
7607      (0,external_React_.useEffect)(() => {
7608        if (!domReady)
7609          return;
7610        if (!mounted)
7611          return;
7612        const onKeyDown = (event) => {
7613          if (event.key !== "Escape")
7614            return;
7615          if (event.defaultPrevented)
7616            return;
7617          const dialog = ref.current;
7618          if (!dialog)
7619            return;
7620          if (isElementMarked(dialog))
7621            return;
7622          const target = event.target;
7623          if (!target)
7624            return;
7625          const { disclosureElement } = store.getState();
7626          const isValidTarget = () => {
7627            if (target.tagName === "BODY")
7628              return true;
7629            if (contains(dialog, target))
7630              return true;
7631            if (!disclosureElement)
7632              return true;
7633            if (contains(disclosureElement, target))
7634              return true;
7635            return false;
7636          };
7637          if (!isValidTarget())
7638            return;
7639          if (!hideOnEscapeProp(event))
7640            return;
7641          store.hide();
7642        };
7643        return addGlobalEventListener("keydown", onKeyDown, true);
7644      }, [store, domReady, mounted, hideOnEscapeProp]);
7645      props = useWrapElement(
7646        props,
7647        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
7648        [modal]
7649      );
7650      const hiddenProp = props.hidden;
7651      const alwaysVisible = props.alwaysVisible;
7652      props = useWrapElement(
7653        props,
7654        (element) => {
7655          if (!backdrop)
7656            return element;
7657          return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
7658            /* @__PURE__ */ (0,jsx_runtime.jsx)(
7659              DialogBackdrop,
7660              {
7661                store,
7662                backdrop,
7663                backdropProps,
7664                hidden: hiddenProp,
7665                alwaysVisible
7666              }
7667            ),
7668            element
7669          ] });
7670        },
7671        [store, backdrop, backdropProps, hiddenProp, alwaysVisible]
7672      );
7673      const [headingId, setHeadingId] = (0,external_React_.useState)();
7674      const [descriptionId, setDescriptionId] = (0,external_React_.useState)();
7675      props = useWrapElement(
7676        props,
7677        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
7678        [store]
7679      );
7680      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
7681        id,
7682        "data-dialog": "",
7683        role: "dialog",
7684        tabIndex: focusable ? -1 : void 0,
7685        "aria-labelledby": headingId,
7686        "aria-describedby": descriptionId
7687      }, props), {
7688        ref: useMergeRefs(ref, props.ref)
7689      });
7690      props = useFocusableContainer(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
7691        autoFocusOnShow: autoFocusEnabled
7692      }));
7693      props = useDisclosureContent(_4R3V3JGP_spreadValues({ store }, props));
7694      props = useFocusable(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { focusable }));
7695      props = usePortal(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ portal }, props), { portalRef, preserveTabOrder }));
7696      return props;
7697    }
7698  );
7699  function createDialogComponent(Component, useProviderContext = useDialogProviderContext) {
7700    return createComponent((props) => {
7701      const context = useProviderContext();
7702      const store = props.store || context;
7703      const mounted = useStoreState(
7704        store,
7705        (state) => !props.unmountOnHide || (state == null ? void 0 : state.mounted) || !!props.open
7706      );
7707      if (!mounted)
7708        return null;
7709      return /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, _4R3V3JGP_spreadValues({}, props));
7710    });
7711  }
7712  var Dialog = createDialogComponent(
7713    createComponent((props) => {
7714      const htmlProps = useDialog(props);
7715      return _3ORBWXWF_createElement("div", htmlProps);
7716    }),
7717    useDialogProviderContext
7718  );
7719  if (false) {}
7720  
7721  
7722  
7723  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
7724  const floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left']));
7725  const alignments = (/* unused pure expression or super */ null && (['start', 'end']));
7726  const 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]), [])));
7727  const floating_ui_utils_min = Math.min;
7728  const floating_ui_utils_max = Math.max;
7729  const round = Math.round;
7730  const floor = Math.floor;
7731  const createCoords = v => ({
7732    x: v,
7733    y: v
7734  });
7735  const oppositeSideMap = {
7736    left: 'right',
7737    right: 'left',
7738    bottom: 'top',
7739    top: 'bottom'
7740  };
7741  const oppositeAlignmentMap = {
7742    start: 'end',
7743    end: 'start'
7744  };
7745  function clamp(start, value, end) {
7746    return floating_ui_utils_max(start, floating_ui_utils_min(value, end));
7747  }
7748  function floating_ui_utils_evaluate(value, param) {
7749    return typeof value === 'function' ? value(param) : value;
7750  }
7751  function floating_ui_utils_getSide(placement) {
7752    return placement.split('-')[0];
7753  }
7754  function floating_ui_utils_getAlignment(placement) {
7755    return placement.split('-')[1];
7756  }
7757  function getOppositeAxis(axis) {
7758    return axis === 'x' ? 'y' : 'x';
7759  }
7760  function getAxisLength(axis) {
7761    return axis === 'y' ? 'height' : 'width';
7762  }
7763  function floating_ui_utils_getSideAxis(placement) {
7764    return ['top', 'bottom'].includes(floating_ui_utils_getSide(placement)) ? 'y' : 'x';
7765  }
7766  function getAlignmentAxis(placement) {
7767    return getOppositeAxis(floating_ui_utils_getSideAxis(placement));
7768  }
7769  function floating_ui_utils_getAlignmentSides(placement, rects, rtl) {
7770    if (rtl === void 0) {
7771      rtl = false;
7772    }
7773    const alignment = floating_ui_utils_getAlignment(placement);
7774    const alignmentAxis = getAlignmentAxis(placement);
7775    const length = getAxisLength(alignmentAxis);
7776    let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
7777    if (rects.reference[length] > rects.floating[length]) {
7778      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
7779    }
7780    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
7781  }
7782  function getExpandedPlacements(placement) {
7783    const oppositePlacement = getOppositePlacement(placement);
7784    return [floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)];
7785  }
7786  function floating_ui_utils_getOppositeAlignmentPlacement(placement) {
7787    return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
7788  }
7789  function getSideList(side, isStart, rtl) {
7790    const lr = ['left', 'right'];
7791    const rl = ['right', 'left'];
7792    const tb = ['top', 'bottom'];
7793    const bt = ['bottom', 'top'];
7794    switch (side) {
7795      case 'top':
7796      case 'bottom':
7797        if (rtl) return isStart ? rl : lr;
7798        return isStart ? lr : rl;
7799      case 'left':
7800      case 'right':
7801        return isStart ? tb : bt;
7802      default:
7803        return [];
7804    }
7805  }
7806  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
7807    const alignment = floating_ui_utils_getAlignment(placement);
7808    let list = getSideList(floating_ui_utils_getSide(placement), direction === 'start', rtl);
7809    if (alignment) {
7810      list = list.map(side => side + "-" + alignment);
7811      if (flipAlignment) {
7812        list = list.concat(list.map(floating_ui_utils_getOppositeAlignmentPlacement));
7813      }
7814    }
7815    return list;
7816  }
7817  function getOppositePlacement(placement) {
7818    return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
7819  }
7820  function expandPaddingObject(padding) {
7821    return {
7822      top: 0,
7823      right: 0,
7824      bottom: 0,
7825      left: 0,
7826      ...padding
7827    };
7828  }
7829  function floating_ui_utils_getPaddingObject(padding) {
7830    return typeof padding !== 'number' ? expandPaddingObject(padding) : {
7831      top: padding,
7832      right: padding,
7833      bottom: padding,
7834      left: padding
7835    };
7836  }
7837  function floating_ui_utils_rectToClientRect(rect) {
7838    return {
7839      ...rect,
7840      top: rect.y,
7841      left: rect.x,
7842      right: rect.x + rect.width,
7843      bottom: rect.y + rect.height
7844    };
7845  }
7846  
7847  
7848  
7849  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs
7850  
7851  
7852  
7853  function computeCoordsFromPlacement(_ref, placement, rtl) {
7854    let {
7855      reference,
7856      floating
7857    } = _ref;
7858    const sideAxis = floating_ui_utils_getSideAxis(placement);
7859    const alignmentAxis = getAlignmentAxis(placement);
7860    const alignLength = getAxisLength(alignmentAxis);
7861    const side = floating_ui_utils_getSide(placement);
7862    const isVertical = sideAxis === 'y';
7863    const commonX = reference.x + reference.width / 2 - floating.width / 2;
7864    const commonY = reference.y + reference.height / 2 - floating.height / 2;
7865    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
7866    let coords;
7867    switch (side) {
7868      case 'top':
7869        coords = {
7870          x: commonX,
7871          y: reference.y - floating.height
7872        };
7873        break;
7874      case 'bottom':
7875        coords = {
7876          x: commonX,
7877          y: reference.y + reference.height
7878        };
7879        break;
7880      case 'right':
7881        coords = {
7882          x: reference.x + reference.width,
7883          y: commonY
7884        };
7885        break;
7886      case 'left':
7887        coords = {
7888          x: reference.x - floating.width,
7889          y: commonY
7890        };
7891        break;
7892      default:
7893        coords = {
7894          x: reference.x,
7895          y: reference.y
7896        };
7897    }
7898    switch (floating_ui_utils_getAlignment(placement)) {
7899      case 'start':
7900        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
7901        break;
7902      case 'end':
7903        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
7904        break;
7905    }
7906    return coords;
7907  }
7908  
7909  /**
7910   * Computes the `x` and `y` coordinates that will place the floating element
7911   * next to a reference element when it is given a certain positioning strategy.
7912   *
7913   * This export does not have any `platform` interface logic. You will need to
7914   * write one for the platform you are using Floating UI with.
7915   */
7916  const computePosition = async (reference, floating, config) => {
7917    const {
7918      placement = 'bottom',
7919      strategy = 'absolute',
7920      middleware = [],
7921      platform
7922    } = config;
7923    const validMiddleware = middleware.filter(Boolean);
7924    const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
7925    let rects = await platform.getElementRects({
7926      reference,
7927      floating,
7928      strategy
7929    });
7930    let {
7931      x,
7932      y
7933    } = computeCoordsFromPlacement(rects, placement, rtl);
7934    let statefulPlacement = placement;
7935    let middlewareData = {};
7936    let resetCount = 0;
7937    for (let i = 0; i < validMiddleware.length; i++) {
7938      const {
7939        name,
7940        fn
7941      } = validMiddleware[i];
7942      const {
7943        x: nextX,
7944        y: nextY,
7945        data,
7946        reset
7947      } = await fn({
7948        x,
7949        y,
7950        initialPlacement: placement,
7951        placement: statefulPlacement,
7952        strategy,
7953        middlewareData,
7954        rects,
7955        platform,
7956        elements: {
7957          reference,
7958          floating
7959        }
7960      });
7961      x = nextX != null ? nextX : x;
7962      y = nextY != null ? nextY : y;
7963      middlewareData = {
7964        ...middlewareData,
7965        [name]: {
7966          ...middlewareData[name],
7967          ...data
7968        }
7969      };
7970      if (reset && resetCount <= 50) {
7971        resetCount++;
7972        if (typeof reset === 'object') {
7973          if (reset.placement) {
7974            statefulPlacement = reset.placement;
7975          }
7976          if (reset.rects) {
7977            rects = reset.rects === true ? await platform.getElementRects({
7978              reference,
7979              floating,
7980              strategy
7981            }) : reset.rects;
7982          }
7983          ({
7984            x,
7985            y
7986          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
7987        }
7988        i = -1;
7989        continue;
7990      }
7991    }
7992    return {
7993      x,
7994      y,
7995      placement: statefulPlacement,
7996      strategy,
7997      middlewareData
7998    };
7999  };
8000  
8001  /**
8002   * Resolves with an object of overflow side offsets that determine how much the
8003   * element is overflowing a given clipping boundary on each side.
8004   * - positive = overflowing the boundary by that number of pixels
8005   * - negative = how many pixels left before it will overflow
8006   * - 0 = lies flush with the boundary
8007   * @see https://floating-ui.com/docs/detectOverflow
8008   */
8009  async function detectOverflow(state, options) {
8010    var _await$platform$isEle;
8011    if (options === void 0) {
8012      options = {};
8013    }
8014    const {
8015      x,
8016      y,
8017      platform,
8018      rects,
8019      elements,
8020      strategy
8021    } = state;
8022    const {
8023      boundary = 'clippingAncestors',
8024      rootBoundary = 'viewport',
8025      elementContext = 'floating',
8026      altBoundary = false,
8027      padding = 0
8028    } = floating_ui_utils_evaluate(options, state);
8029    const paddingObject = floating_ui_utils_getPaddingObject(padding);
8030    const altContext = elementContext === 'floating' ? 'reference' : 'floating';
8031    const element = elements[altBoundary ? altContext : elementContext];
8032    const clippingClientRect = floating_ui_utils_rectToClientRect(await platform.getClippingRect({
8033      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))),
8034      boundary,
8035      rootBoundary,
8036      strategy
8037    }));
8038    const rect = elementContext === 'floating' ? {
8039      ...rects.floating,
8040      x,
8041      y
8042    } : rects.reference;
8043    const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
8044    const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
8045      x: 1,
8046      y: 1
8047    } : {
8048      x: 1,
8049      y: 1
8050    };
8051    const elementClientRect = floating_ui_utils_rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
8052      rect,
8053      offsetParent,
8054      strategy
8055    }) : rect);
8056    return {
8057      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
8058      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
8059      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
8060      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
8061    };
8062  }
8063  
8064  /**
8065   * Provides data to position an inner element of the floating element so that it
8066   * appears centered to the reference element.
8067   * @see https://floating-ui.com/docs/arrow
8068   */
8069  const arrow = options => ({
8070    name: 'arrow',
8071    options,
8072    async fn(state) {
8073      const {
8074        x,
8075        y,
8076        placement,
8077        rects,
8078        platform,
8079        elements,
8080        middlewareData
8081      } = state;
8082      // Since `element` is required, we don't Partial<> the type.
8083      const {
8084        element,
8085        padding = 0
8086      } = floating_ui_utils_evaluate(options, state) || {};
8087      if (element == null) {
8088        return {};
8089      }
8090      const paddingObject = floating_ui_utils_getPaddingObject(padding);
8091      const coords = {
8092        x,
8093        y
8094      };
8095      const axis = getAlignmentAxis(placement);
8096      const length = getAxisLength(axis);
8097      const arrowDimensions = await platform.getDimensions(element);
8098      const isYAxis = axis === 'y';
8099      const minProp = isYAxis ? 'top' : 'left';
8100      const maxProp = isYAxis ? 'bottom' : 'right';
8101      const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
8102      const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
8103      const startDiff = coords[axis] - rects.reference[axis];
8104      const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
8105      let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
8106  
8107      // DOM platform can return `window` as the `offsetParent`.
8108      if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
8109        clientSize = elements.floating[clientProp] || rects.floating[length];
8110      }
8111      const centerToReference = endDiff / 2 - startDiff / 2;
8112  
8113      // If the padding is large enough that it causes the arrow to no longer be
8114      // centered, modify the padding so that it is centered.
8115      const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
8116      const minPadding = floating_ui_utils_min(paddingObject[minProp], largestPossiblePadding);
8117      const maxPadding = floating_ui_utils_min(paddingObject[maxProp], largestPossiblePadding);
8118  
8119      // Make sure the arrow doesn't overflow the floating element if the center
8120      // point is outside the floating element's bounds.
8121      const min$1 = minPadding;
8122      const max = clientSize - arrowDimensions[length] - maxPadding;
8123      const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
8124      const offset = clamp(min$1, center, max);
8125  
8126      // If the reference is small enough that the arrow's padding causes it to
8127      // to point to nothing for an aligned placement, adjust the offset of the
8128      // floating element itself. To ensure `shift()` continues to take action,
8129      // a single reset is performed when this is true.
8130      const shouldAddOffset = !middlewareData.arrow && floating_ui_utils_getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
8131      const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
8132      return {
8133        [axis]: coords[axis] + alignmentOffset,
8134        data: {
8135          [axis]: offset,
8136          centerOffset: center - offset - alignmentOffset,
8137          ...(shouldAddOffset && {
8138            alignmentOffset
8139          })
8140        },
8141        reset: shouldAddOffset
8142      };
8143    }
8144  });
8145  
8146  function getPlacementList(alignment, autoAlignment, allowedPlacements) {
8147    const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
8148    return allowedPlacementsSortedByAlignment.filter(placement => {
8149      if (alignment) {
8150        return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
8151      }
8152      return true;
8153    });
8154  }
8155  /**
8156   * Optimizes the visibility of the floating element by choosing the placement
8157   * that has the most space available automatically, without needing to specify a
8158   * preferred placement. Alternative to `flip`.
8159   * @see https://floating-ui.com/docs/autoPlacement
8160   */
8161  const autoPlacement = function (options) {
8162    if (options === void 0) {
8163      options = {};
8164    }
8165    return {
8166      name: 'autoPlacement',
8167      options,
8168      async fn(state) {
8169        var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
8170        const {
8171          rects,
8172          middlewareData,
8173          placement,
8174          platform,
8175          elements
8176        } = state;
8177        const {
8178          crossAxis = false,
8179          alignment,
8180          allowedPlacements = placements,
8181          autoAlignment = true,
8182          ...detectOverflowOptions
8183        } = evaluate(options, state);
8184        const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
8185        const overflow = await detectOverflow(state, detectOverflowOptions);
8186        const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
8187        const currentPlacement = placements$1[currentIndex];
8188        if (currentPlacement == null) {
8189          return {};
8190        }
8191        const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
8192  
8193        // Make `computeCoords` start from the right place.
8194        if (placement !== currentPlacement) {
8195          return {
8196            reset: {
8197              placement: placements$1[0]
8198            }
8199          };
8200        }
8201        const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
8202        const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
8203          placement: currentPlacement,
8204          overflows: currentOverflows
8205        }];
8206        const nextPlacement = placements$1[currentIndex + 1];
8207  
8208        // There are more placements to check.
8209        if (nextPlacement) {
8210          return {
8211            data: {
8212              index: currentIndex + 1,
8213              overflows: allOverflows
8214            },
8215            reset: {
8216              placement: nextPlacement
8217            }
8218          };
8219        }
8220        const placementsSortedByMostSpace = allOverflows.map(d => {
8221          const alignment = getAlignment(d.placement);
8222          return [d.placement, alignment && crossAxis ?
8223          // Check along the mainAxis and main crossAxis side.
8224          d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
8225          // Check only the mainAxis.
8226          d.overflows[0], d.overflows];
8227        }).sort((a, b) => a[1] - b[1]);
8228        const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
8229        // Aligned placements should not check their opposite crossAxis
8230        // side.
8231        getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
8232        const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
8233        if (resetPlacement !== placement) {
8234          return {
8235            data: {
8236              index: currentIndex + 1,
8237              overflows: allOverflows
8238            },
8239            reset: {
8240              placement: resetPlacement
8241            }
8242          };
8243        }
8244        return {};
8245      }
8246    };
8247  };
8248  
8249  /**
8250   * Optimizes the visibility of the floating element by flipping the `placement`
8251   * in order to keep it in view when the preferred placement(s) will overflow the
8252   * clipping boundary. Alternative to `autoPlacement`.
8253   * @see https://floating-ui.com/docs/flip
8254   */
8255  const flip = function (options) {
8256    if (options === void 0) {
8257      options = {};
8258    }
8259    return {
8260      name: 'flip',
8261      options,
8262      async fn(state) {
8263        var _middlewareData$arrow, _middlewareData$flip;
8264        const {
8265          placement,
8266          middlewareData,
8267          rects,
8268          initialPlacement,
8269          platform,
8270          elements
8271        } = state;
8272        const {
8273          mainAxis: checkMainAxis = true,
8274          crossAxis: checkCrossAxis = true,
8275          fallbackPlacements: specifiedFallbackPlacements,
8276          fallbackStrategy = 'bestFit',
8277          fallbackAxisSideDirection = 'none',
8278          flipAlignment = true,
8279          ...detectOverflowOptions
8280        } = floating_ui_utils_evaluate(options, state);
8281  
8282        // If a reset by the arrow was caused due to an alignment offset being
8283        // added, we should skip any logic now since `flip()` has already done its
8284        // work.
8285        // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
8286        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
8287          return {};
8288        }
8289        const side = floating_ui_utils_getSide(placement);
8290        const isBasePlacement = floating_ui_utils_getSide(initialPlacement) === initialPlacement;
8291        const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
8292        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
8293        if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
8294          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
8295        }
8296        const placements = [initialPlacement, ...fallbackPlacements];
8297        const overflow = await detectOverflow(state, detectOverflowOptions);
8298        const overflows = [];
8299        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
8300        if (checkMainAxis) {
8301          overflows.push(overflow[side]);
8302        }
8303        if (checkCrossAxis) {
8304          const sides = floating_ui_utils_getAlignmentSides(placement, rects, rtl);
8305          overflows.push(overflow[sides[0]], overflow[sides[1]]);
8306        }
8307        overflowsData = [...overflowsData, {
8308          placement,
8309          overflows
8310        }];
8311  
8312        // One or more sides is overflowing.
8313        if (!overflows.every(side => side <= 0)) {
8314          var _middlewareData$flip2, _overflowsData$filter;
8315          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
8316          const nextPlacement = placements[nextIndex];
8317          if (nextPlacement) {
8318            // Try next placement and re-run the lifecycle.
8319            return {
8320              data: {
8321                index: nextIndex,
8322                overflows: overflowsData
8323              },
8324              reset: {
8325                placement: nextPlacement
8326              }
8327            };
8328          }
8329  
8330          // First, find the candidates that fit on the mainAxis side of overflow,
8331          // then find the placement that fits the best on the main crossAxis side.
8332          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;
8333  
8334          // Otherwise fallback.
8335          if (!resetPlacement) {
8336            switch (fallbackStrategy) {
8337              case 'bestFit':
8338                {
8339                  var _overflowsData$map$so;
8340                  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];
8341                  if (placement) {
8342                    resetPlacement = placement;
8343                  }
8344                  break;
8345                }
8346              case 'initialPlacement':
8347                resetPlacement = initialPlacement;
8348                break;
8349            }
8350          }
8351          if (placement !== resetPlacement) {
8352            return {
8353              reset: {
8354                placement: resetPlacement
8355              }
8356            };
8357          }
8358        }
8359        return {};
8360      }
8361    };
8362  };
8363  
8364  function getSideOffsets(overflow, rect) {
8365    return {
8366      top: overflow.top - rect.height,
8367      right: overflow.right - rect.width,
8368      bottom: overflow.bottom - rect.height,
8369      left: overflow.left - rect.width
8370    };
8371  }
8372  function isAnySideFullyClipped(overflow) {
8373    return sides.some(side => overflow[side] >= 0);
8374  }
8375  /**
8376   * Provides data to hide the floating element in applicable situations, such as
8377   * when it is not in the same clipping context as the reference element.
8378   * @see https://floating-ui.com/docs/hide
8379   */
8380  const hide = function (options) {
8381    if (options === void 0) {
8382      options = {};
8383    }
8384    return {
8385      name: 'hide',
8386      options,
8387      async fn(state) {
8388        const {
8389          rects
8390        } = state;
8391        const {
8392          strategy = 'referenceHidden',
8393          ...detectOverflowOptions
8394        } = evaluate(options, state);
8395        switch (strategy) {
8396          case 'referenceHidden':
8397            {
8398              const overflow = await detectOverflow(state, {
8399                ...detectOverflowOptions,
8400                elementContext: 'reference'
8401              });
8402              const offsets = getSideOffsets(overflow, rects.reference);
8403              return {
8404                data: {
8405                  referenceHiddenOffsets: offsets,
8406                  referenceHidden: isAnySideFullyClipped(offsets)
8407                }
8408              };
8409            }
8410          case 'escaped':
8411            {
8412              const overflow = await detectOverflow(state, {
8413                ...detectOverflowOptions,
8414                altBoundary: true
8415              });
8416              const offsets = getSideOffsets(overflow, rects.floating);
8417              return {
8418                data: {
8419                  escapedOffsets: offsets,
8420                  escaped: isAnySideFullyClipped(offsets)
8421                }
8422              };
8423            }
8424          default:
8425            {
8426              return {};
8427            }
8428        }
8429      }
8430    };
8431  };
8432  
8433  function getBoundingRect(rects) {
8434    const minX = min(...rects.map(rect => rect.left));
8435    const minY = min(...rects.map(rect => rect.top));
8436    const maxX = max(...rects.map(rect => rect.right));
8437    const maxY = max(...rects.map(rect => rect.bottom));
8438    return {
8439      x: minX,
8440      y: minY,
8441      width: maxX - minX,
8442      height: maxY - minY
8443    };
8444  }
8445  function getRectsByLine(rects) {
8446    const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
8447    const groups = [];
8448    let prevRect = null;
8449    for (let i = 0; i < sortedRects.length; i++) {
8450      const rect = sortedRects[i];
8451      if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
8452        groups.push([rect]);
8453      } else {
8454        groups[groups.length - 1].push(rect);
8455      }
8456      prevRect = rect;
8457    }
8458    return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
8459  }
8460  /**
8461   * Provides improved positioning for inline reference elements that can span
8462   * over multiple lines, such as hyperlinks or range selections.
8463   * @see https://floating-ui.com/docs/inline
8464   */
8465  const inline = function (options) {
8466    if (options === void 0) {
8467      options = {};
8468    }
8469    return {
8470      name: 'inline',
8471      options,
8472      async fn(state) {
8473        const {
8474          placement,
8475          elements,
8476          rects,
8477          platform,
8478          strategy
8479        } = state;
8480        // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
8481        // ClientRect's bounds, despite the event listener being triggered. A
8482        // padding of 2 seems to handle this issue.
8483        const {
8484          padding = 2,
8485          x,
8486          y
8487        } = evaluate(options, state);
8488        const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
8489        const clientRects = getRectsByLine(nativeClientRects);
8490        const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
8491        const paddingObject = getPaddingObject(padding);
8492        function getBoundingClientRect() {
8493          // There are two rects and they are disjoined.
8494          if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
8495            // Find the first rect in which the point is fully inside.
8496            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;
8497          }
8498  
8499          // There are 2 or more connected rects.
8500          if (clientRects.length >= 2) {
8501            if (getSideAxis(placement) === 'y') {
8502              const firstRect = clientRects[0];
8503              const lastRect = clientRects[clientRects.length - 1];
8504              const isTop = getSide(placement) === 'top';
8505              const top = firstRect.top;
8506              const bottom = lastRect.bottom;
8507              const left = isTop ? firstRect.left : lastRect.left;
8508              const right = isTop ? firstRect.right : lastRect.right;
8509              const width = right - left;
8510              const height = bottom - top;
8511              return {
8512                top,
8513                bottom,
8514                left,
8515                right,
8516                width,
8517                height,
8518                x: left,
8519                y: top
8520              };
8521            }
8522            const isLeftSide = getSide(placement) === 'left';
8523            const maxRight = max(...clientRects.map(rect => rect.right));
8524            const minLeft = min(...clientRects.map(rect => rect.left));
8525            const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
8526            const top = measureRects[0].top;
8527            const bottom = measureRects[measureRects.length - 1].bottom;
8528            const left = minLeft;
8529            const right = maxRight;
8530            const width = right - left;
8531            const height = bottom - top;
8532            return {
8533              top,
8534              bottom,
8535              left,
8536              right,
8537              width,
8538              height,
8539              x: left,
8540              y: top
8541            };
8542          }
8543          return fallback;
8544        }
8545        const resetRects = await platform.getElementRects({
8546          reference: {
8547            getBoundingClientRect
8548          },
8549          floating: elements.floating,
8550          strategy
8551        });
8552        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) {
8553          return {
8554            reset: {
8555              rects: resetRects
8556            }
8557          };
8558        }
8559        return {};
8560      }
8561    };
8562  };
8563  
8564  // For type backwards-compatibility, the `OffsetOptions` type was also
8565  // Derivable.
8566  async function convertValueToCoords(state, options) {
8567    const {
8568      placement,
8569      platform,
8570      elements
8571    } = state;
8572    const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
8573    const side = floating_ui_utils_getSide(placement);
8574    const alignment = floating_ui_utils_getAlignment(placement);
8575    const isVertical = floating_ui_utils_getSideAxis(placement) === 'y';
8576    const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
8577    const crossAxisMulti = rtl && isVertical ? -1 : 1;
8578    const rawValue = floating_ui_utils_evaluate(options, state);
8579  
8580    // eslint-disable-next-line prefer-const
8581    let {
8582      mainAxis,
8583      crossAxis,
8584      alignmentAxis
8585    } = typeof rawValue === 'number' ? {
8586      mainAxis: rawValue,
8587      crossAxis: 0,
8588      alignmentAxis: null
8589    } : {
8590      mainAxis: 0,
8591      crossAxis: 0,
8592      alignmentAxis: null,
8593      ...rawValue
8594    };
8595    if (alignment && typeof alignmentAxis === 'number') {
8596      crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
8597    }
8598    return isVertical ? {
8599      x: crossAxis * crossAxisMulti,
8600      y: mainAxis * mainAxisMulti
8601    } : {
8602      x: mainAxis * mainAxisMulti,
8603      y: crossAxis * crossAxisMulti
8604    };
8605  }
8606  
8607  /**
8608   * Modifies the placement by translating the floating element along the
8609   * specified axes.
8610   * A number (shorthand for `mainAxis` or distance), or an axes configuration
8611   * object may be passed.
8612   * @see https://floating-ui.com/docs/offset
8613   */
8614  const offset = function (options) {
8615    if (options === void 0) {
8616      options = 0;
8617    }
8618    return {
8619      name: 'offset',
8620      options,
8621      async fn(state) {
8622        const {
8623          x,
8624          y
8625        } = state;
8626        const diffCoords = await convertValueToCoords(state, options);
8627        return {
8628          x: x + diffCoords.x,
8629          y: y + diffCoords.y,
8630          data: diffCoords
8631        };
8632      }
8633    };
8634  };
8635  
8636  /**
8637   * Optimizes the visibility of the floating element by shifting it in order to
8638   * keep it in view when it will overflow the clipping boundary.
8639   * @see https://floating-ui.com/docs/shift
8640   */
8641  const shift = function (options) {
8642    if (options === void 0) {
8643      options = {};
8644    }
8645    return {
8646      name: 'shift',
8647      options,
8648      async fn(state) {
8649        const {
8650          x,
8651          y,
8652          placement
8653        } = state;
8654        const {
8655          mainAxis: checkMainAxis = true,
8656          crossAxis: checkCrossAxis = false,
8657          limiter = {
8658            fn: _ref => {
8659              let {
8660                x,
8661                y
8662              } = _ref;
8663              return {
8664                x,
8665                y
8666              };
8667            }
8668          },
8669          ...detectOverflowOptions
8670        } = floating_ui_utils_evaluate(options, state);
8671        const coords = {
8672          x,
8673          y
8674        };
8675        const overflow = await detectOverflow(state, detectOverflowOptions);
8676        const crossAxis = floating_ui_utils_getSideAxis(floating_ui_utils_getSide(placement));
8677        const mainAxis = getOppositeAxis(crossAxis);
8678        let mainAxisCoord = coords[mainAxis];
8679        let crossAxisCoord = coords[crossAxis];
8680        if (checkMainAxis) {
8681          const minSide = mainAxis === 'y' ? 'top' : 'left';
8682          const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
8683          const min = mainAxisCoord + overflow[minSide];
8684          const max = mainAxisCoord - overflow[maxSide];
8685          mainAxisCoord = clamp(min, mainAxisCoord, max);
8686        }
8687        if (checkCrossAxis) {
8688          const minSide = crossAxis === 'y' ? 'top' : 'left';
8689          const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
8690          const min = crossAxisCoord + overflow[minSide];
8691          const max = crossAxisCoord - overflow[maxSide];
8692          crossAxisCoord = clamp(min, crossAxisCoord, max);
8693        }
8694        const limitedCoords = limiter.fn({
8695          ...state,
8696          [mainAxis]: mainAxisCoord,
8697          [crossAxis]: crossAxisCoord
8698        });
8699        return {
8700          ...limitedCoords,
8701          data: {
8702            x: limitedCoords.x - x,
8703            y: limitedCoords.y - y
8704          }
8705        };
8706      }
8707    };
8708  };
8709  /**
8710   * Built-in `limiter` that will stop `shift()` at a certain point.
8711   */
8712  const limitShift = function (options) {
8713    if (options === void 0) {
8714      options = {};
8715    }
8716    return {
8717      options,
8718      fn(state) {
8719        const {
8720          x,
8721          y,
8722          placement,
8723          rects,
8724          middlewareData
8725        } = state;
8726        const {
8727          offset = 0,
8728          mainAxis: checkMainAxis = true,
8729          crossAxis: checkCrossAxis = true
8730        } = floating_ui_utils_evaluate(options, state);
8731        const coords = {
8732          x,
8733          y
8734        };
8735        const crossAxis = floating_ui_utils_getSideAxis(placement);
8736        const mainAxis = getOppositeAxis(crossAxis);
8737        let mainAxisCoord = coords[mainAxis];
8738        let crossAxisCoord = coords[crossAxis];
8739        const rawOffset = floating_ui_utils_evaluate(offset, state);
8740        const computedOffset = typeof rawOffset === 'number' ? {
8741          mainAxis: rawOffset,
8742          crossAxis: 0
8743        } : {
8744          mainAxis: 0,
8745          crossAxis: 0,
8746          ...rawOffset
8747        };
8748        if (checkMainAxis) {
8749          const len = mainAxis === 'y' ? 'height' : 'width';
8750          const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
8751          const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
8752          if (mainAxisCoord < limitMin) {
8753            mainAxisCoord = limitMin;
8754          } else if (mainAxisCoord > limitMax) {
8755            mainAxisCoord = limitMax;
8756          }
8757        }
8758        if (checkCrossAxis) {
8759          var _middlewareData$offse, _middlewareData$offse2;
8760          const len = mainAxis === 'y' ? 'width' : 'height';
8761          const isOriginSide = ['top', 'left'].includes(floating_ui_utils_getSide(placement));
8762          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);
8763          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);
8764          if (crossAxisCoord < limitMin) {
8765            crossAxisCoord = limitMin;
8766          } else if (crossAxisCoord > limitMax) {
8767            crossAxisCoord = limitMax;
8768          }
8769        }
8770        return {
8771          [mainAxis]: mainAxisCoord,
8772          [crossAxis]: crossAxisCoord
8773        };
8774      }
8775    };
8776  };
8777  
8778  /**
8779   * Provides data that allows you to change the size of the floating element —
8780   * for instance, prevent it from overflowing the clipping boundary or match the
8781   * width of the reference element.
8782   * @see https://floating-ui.com/docs/size
8783   */
8784  const size = function (options) {
8785    if (options === void 0) {
8786      options = {};
8787    }
8788    return {
8789      name: 'size',
8790      options,
8791      async fn(state) {
8792        const {
8793          placement,
8794          rects,
8795          platform,
8796          elements
8797        } = state;
8798        const {
8799          apply = () => {},
8800          ...detectOverflowOptions
8801        } = floating_ui_utils_evaluate(options, state);
8802        const overflow = await detectOverflow(state, detectOverflowOptions);
8803        const side = floating_ui_utils_getSide(placement);
8804        const alignment = floating_ui_utils_getAlignment(placement);
8805        const isYAxis = floating_ui_utils_getSideAxis(placement) === 'y';
8806        const {
8807          width,
8808          height
8809        } = rects.floating;
8810        let heightSide;
8811        let widthSide;
8812        if (side === 'top' || side === 'bottom') {
8813          heightSide = side;
8814          widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
8815        } else {
8816          widthSide = side;
8817          heightSide = alignment === 'end' ? 'top' : 'bottom';
8818        }
8819        const overflowAvailableHeight = height - overflow[heightSide];
8820        const overflowAvailableWidth = width - overflow[widthSide];
8821        const noShift = !state.middlewareData.shift;
8822        let availableHeight = overflowAvailableHeight;
8823        let availableWidth = overflowAvailableWidth;
8824        if (isYAxis) {
8825          const maximumClippingWidth = width - overflow.left - overflow.right;
8826          availableWidth = alignment || noShift ? floating_ui_utils_min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
8827        } else {
8828          const maximumClippingHeight = height - overflow.top - overflow.bottom;
8829          availableHeight = alignment || noShift ? floating_ui_utils_min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
8830        }
8831        if (noShift && !alignment) {
8832          const xMin = floating_ui_utils_max(overflow.left, 0);
8833          const xMax = floating_ui_utils_max(overflow.right, 0);
8834          const yMin = floating_ui_utils_max(overflow.top, 0);
8835          const yMax = floating_ui_utils_max(overflow.bottom, 0);
8836          if (isYAxis) {
8837            availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : floating_ui_utils_max(overflow.left, overflow.right));
8838          } else {
8839            availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : floating_ui_utils_max(overflow.top, overflow.bottom));
8840          }
8841        }
8842        await apply({
8843          ...state,
8844          availableWidth,
8845          availableHeight
8846        });
8847        const nextDimensions = await platform.getDimensions(elements.floating);
8848        if (width !== nextDimensions.width || height !== nextDimensions.height) {
8849          return {
8850            reset: {
8851              rects: true
8852            }
8853          };
8854        }
8855        return {};
8856      }
8857    };
8858  };
8859  
8860  
8861  
8862  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
8863  /**
8864   * Custom positioning reference element.
8865   * @see https://floating-ui.com/docs/virtual-elements
8866   */
8867  
8868  const dist_floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left']));
8869  const floating_ui_utils_alignments = (/* unused pure expression or super */ null && (['start', 'end']));
8870  const dist_floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (dist_floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + floating_ui_utils_alignments[0], side + "-" + floating_ui_utils_alignments[1]), [])));
8871  const dist_floating_ui_utils_min = Math.min;
8872  const dist_floating_ui_utils_max = Math.max;
8873  const floating_ui_utils_round = Math.round;
8874  const floating_ui_utils_floor = Math.floor;
8875  const floating_ui_utils_createCoords = v => ({
8876    x: v,
8877    y: v
8878  });
8879  const floating_ui_utils_oppositeSideMap = {
8880    left: 'right',
8881    right: 'left',
8882    bottom: 'top',
8883    top: 'bottom'
8884  };
8885  const floating_ui_utils_oppositeAlignmentMap = {
8886    start: 'end',
8887    end: 'start'
8888  };
8889  function floating_ui_utils_clamp(start, value, end) {
8890    return dist_floating_ui_utils_max(start, dist_floating_ui_utils_min(value, end));
8891  }
8892  function dist_floating_ui_utils_evaluate(value, param) {
8893    return typeof value === 'function' ? value(param) : value;
8894  }
8895  function dist_floating_ui_utils_getSide(placement) {
8896    return placement.split('-')[0];
8897  }
8898  function dist_floating_ui_utils_getAlignment(placement) {
8899    return placement.split('-')[1];
8900  }
8901  function floating_ui_utils_getOppositeAxis(axis) {
8902    return axis === 'x' ? 'y' : 'x';
8903  }
8904  function floating_ui_utils_getAxisLength(axis) {
8905    return axis === 'y' ? 'height' : 'width';
8906  }
8907  function dist_floating_ui_utils_getSideAxis(placement) {
8908    return ['top', 'bottom'].includes(dist_floating_ui_utils_getSide(placement)) ? 'y' : 'x';
8909  }
8910  function floating_ui_utils_getAlignmentAxis(placement) {
8911    return floating_ui_utils_getOppositeAxis(dist_floating_ui_utils_getSideAxis(placement));
8912  }
8913  function dist_floating_ui_utils_getAlignmentSides(placement, rects, rtl) {
8914    if (rtl === void 0) {
8915      rtl = false;
8916    }
8917    const alignment = dist_floating_ui_utils_getAlignment(placement);
8918    const alignmentAxis = floating_ui_utils_getAlignmentAxis(placement);
8919    const length = floating_ui_utils_getAxisLength(alignmentAxis);
8920    let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
8921    if (rects.reference[length] > rects.floating[length]) {
8922      mainAlignmentSide = floating_ui_utils_getOppositePlacement(mainAlignmentSide);
8923    }
8924    return [mainAlignmentSide, floating_ui_utils_getOppositePlacement(mainAlignmentSide)];
8925  }
8926  function floating_ui_utils_getExpandedPlacements(placement) {
8927    const oppositePlacement = floating_ui_utils_getOppositePlacement(placement);
8928    return [dist_floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, dist_floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)];
8929  }
8930  function dist_floating_ui_utils_getOppositeAlignmentPlacement(placement) {
8931    return placement.replace(/start|end/g, alignment => floating_ui_utils_oppositeAlignmentMap[alignment]);
8932  }
8933  function floating_ui_utils_getSideList(side, isStart, rtl) {
8934    const lr = ['left', 'right'];
8935    const rl = ['right', 'left'];
8936    const tb = ['top', 'bottom'];
8937    const bt = ['bottom', 'top'];
8938    switch (side) {
8939      case 'top':
8940      case 'bottom':
8941        if (rtl) return isStart ? rl : lr;
8942        return isStart ? lr : rl;
8943      case 'left':
8944      case 'right':
8945        return isStart ? tb : bt;
8946      default:
8947        return [];
8948    }
8949  }
8950  function floating_ui_utils_getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
8951    const alignment = dist_floating_ui_utils_getAlignment(placement);
8952    let list = floating_ui_utils_getSideList(dist_floating_ui_utils_getSide(placement), direction === 'start', rtl);
8953    if (alignment) {
8954      list = list.map(side => side + "-" + alignment);
8955      if (flipAlignment) {
8956        list = list.concat(list.map(dist_floating_ui_utils_getOppositeAlignmentPlacement));
8957      }
8958    }
8959    return list;
8960  }
8961  function floating_ui_utils_getOppositePlacement(placement) {
8962    return placement.replace(/left|right|bottom|top/g, side => floating_ui_utils_oppositeSideMap[side]);
8963  }
8964  function floating_ui_utils_expandPaddingObject(padding) {
8965    return {
8966      top: 0,
8967      right: 0,
8968      bottom: 0,
8969      left: 0,
8970      ...padding
8971    };
8972  }
8973  function dist_floating_ui_utils_getPaddingObject(padding) {
8974    return typeof padding !== 'number' ? floating_ui_utils_expandPaddingObject(padding) : {
8975      top: padding,
8976      right: padding,
8977      bottom: padding,
8978      left: padding
8979    };
8980  }
8981  function dist_floating_ui_utils_rectToClientRect(rect) {
8982    return {
8983      ...rect,
8984      top: rect.y,
8985      left: rect.x,
8986      right: rect.x + rect.width,
8987      bottom: rect.y + rect.height
8988    };
8989  }
8990  
8991  
8992  
8993  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
8994  function getNodeName(node) {
8995    if (isNode(node)) {
8996      return (node.nodeName || '').toLowerCase();
8997    }
8998    // Mocked nodes in testing environments may not be instances of Node. By
8999    // returning `#document` an infinite loop won't occur.
9000    // https://github.com/floating-ui/floating-ui/issues/2317
9001    return '#document';
9002  }
9003  function floating_ui_utils_dom_getWindow(node) {
9004    var _node$ownerDocument;
9005    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
9006  }
9007  function getDocumentElement(node) {
9008    var _ref;
9009    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
9010  }
9011  function isNode(value) {
9012    return value instanceof Node || value instanceof floating_ui_utils_dom_getWindow(value).Node;
9013  }
9014  function isElement(value) {
9015    return value instanceof Element || value instanceof floating_ui_utils_dom_getWindow(value).Element;
9016  }
9017  function isHTMLElement(value) {
9018    return value instanceof HTMLElement || value instanceof floating_ui_utils_dom_getWindow(value).HTMLElement;
9019  }
9020  function isShadowRoot(value) {
9021    // Browsers without `ShadowRoot` support.
9022    if (typeof ShadowRoot === 'undefined') {
9023      return false;
9024    }
9025    return value instanceof ShadowRoot || value instanceof floating_ui_utils_dom_getWindow(value).ShadowRoot;
9026  }
9027  function isOverflowElement(element) {
9028    const {
9029      overflow,
9030      overflowX,
9031      overflowY,
9032      display
9033    } = floating_ui_utils_dom_getComputedStyle(element);
9034    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
9035  }
9036  function isTableElement(element) {
9037    return ['table', 'td', 'th'].includes(getNodeName(element));
9038  }
9039  function isContainingBlock(element) {
9040    const webkit = isWebKit();
9041    const css = floating_ui_utils_dom_getComputedStyle(element);
9042  
9043    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
9044    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));
9045  }
9046  function getContainingBlock(element) {
9047    let currentNode = getParentNode(element);
9048    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
9049      if (isContainingBlock(currentNode)) {
9050        return currentNode;
9051      } else {
9052        currentNode = getParentNode(currentNode);
9053      }
9054    }
9055    return null;
9056  }
9057  function isWebKit() {
9058    if (typeof CSS === 'undefined' || !CSS.supports) return false;
9059    return CSS.supports('-webkit-backdrop-filter', 'none');
9060  }
9061  function isLastTraversableNode(node) {
9062    return ['html', 'body', '#document'].includes(getNodeName(node));
9063  }
9064  function floating_ui_utils_dom_getComputedStyle(element) {
9065    return floating_ui_utils_dom_getWindow(element).getComputedStyle(element);
9066  }
9067  function getNodeScroll(element) {
9068    if (isElement(element)) {
9069      return {
9070        scrollLeft: element.scrollLeft,
9071        scrollTop: element.scrollTop
9072      };
9073    }
9074    return {
9075      scrollLeft: element.pageXOffset,
9076      scrollTop: element.pageYOffset
9077    };
9078  }
9079  function getParentNode(node) {
9080    if (getNodeName(node) === 'html') {
9081      return node;
9082    }
9083    const result =
9084    // Step into the shadow DOM of the parent of a slotted node.
9085    node.assignedSlot ||
9086    // DOM Element detected.
9087    node.parentNode ||
9088    // ShadowRoot detected.
9089    isShadowRoot(node) && node.host ||
9090    // Fallback.
9091    getDocumentElement(node);
9092    return isShadowRoot(result) ? result.host : result;
9093  }
9094  function getNearestOverflowAncestor(node) {
9095    const parentNode = getParentNode(node);
9096    if (isLastTraversableNode(parentNode)) {
9097      return node.ownerDocument ? node.ownerDocument.body : node.body;
9098    }
9099    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
9100      return parentNode;
9101    }
9102    return getNearestOverflowAncestor(parentNode);
9103  }
9104  function getOverflowAncestors(node, list, traverseIframes) {
9105    var _node$ownerDocument2;
9106    if (list === void 0) {
9107      list = [];
9108    }
9109    if (traverseIframes === void 0) {
9110      traverseIframes = true;
9111    }
9112    const scrollableAncestor = getNearestOverflowAncestor(node);
9113    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
9114    const win = floating_ui_utils_dom_getWindow(scrollableAncestor);
9115    if (isBody) {
9116      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
9117    }
9118    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
9119  }
9120  
9121  
9122  
9123  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
9124  
9125  
9126  
9127  
9128  
9129  
9130  function getCssDimensions(element) {
9131    const css = floating_ui_utils_dom_getComputedStyle(element);
9132    // In testing environments, the `width` and `height` properties are empty
9133    // strings for SVG elements, returning NaN. Fallback to `0` in this case.
9134    let width = parseFloat(css.width) || 0;
9135    let height = parseFloat(css.height) || 0;
9136    const hasOffset = isHTMLElement(element);
9137    const offsetWidth = hasOffset ? element.offsetWidth : width;
9138    const offsetHeight = hasOffset ? element.offsetHeight : height;
9139    const shouldFallback = floating_ui_utils_round(width) !== offsetWidth || floating_ui_utils_round(height) !== offsetHeight;
9140    if (shouldFallback) {
9141      width = offsetWidth;
9142      height = offsetHeight;
9143    }
9144    return {
9145      width,
9146      height,
9147      $: shouldFallback
9148    };
9149  }
9150  
9151  function unwrapElement(element) {
9152    return !isElement(element) ? element.contextElement : element;
9153  }
9154  
9155  function getScale(element) {
9156    const domElement = unwrapElement(element);
9157    if (!isHTMLElement(domElement)) {
9158      return floating_ui_utils_createCoords(1);
9159    }
9160    const rect = domElement.getBoundingClientRect();
9161    const {
9162      width,
9163      height,
9164      $
9165    } = getCssDimensions(domElement);
9166    let x = ($ ? floating_ui_utils_round(rect.width) : rect.width) / width;
9167    let y = ($ ? floating_ui_utils_round(rect.height) : rect.height) / height;
9168  
9169    // 0, NaN, or Infinity should always fallback to 1.
9170  
9171    if (!x || !Number.isFinite(x)) {
9172      x = 1;
9173    }
9174    if (!y || !Number.isFinite(y)) {
9175      y = 1;
9176    }
9177    return {
9178      x,
9179      y
9180    };
9181  }
9182  
9183  const noOffsets = /*#__PURE__*/floating_ui_utils_createCoords(0);
9184  function getVisualOffsets(element) {
9185    const win = floating_ui_utils_dom_getWindow(element);
9186    if (!isWebKit() || !win.visualViewport) {
9187      return noOffsets;
9188    }
9189    return {
9190      x: win.visualViewport.offsetLeft,
9191      y: win.visualViewport.offsetTop
9192    };
9193  }
9194  function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
9195    if (isFixed === void 0) {
9196      isFixed = false;
9197    }
9198    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== floating_ui_utils_dom_getWindow(element)) {
9199      return false;
9200    }
9201    return isFixed;
9202  }
9203  
9204  function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
9205    if (includeScale === void 0) {
9206      includeScale = false;
9207    }
9208    if (isFixedStrategy === void 0) {
9209      isFixedStrategy = false;
9210    }
9211    const clientRect = element.getBoundingClientRect();
9212    const domElement = unwrapElement(element);
9213    let scale = floating_ui_utils_createCoords(1);
9214    if (includeScale) {
9215      if (offsetParent) {
9216        if (isElement(offsetParent)) {
9217          scale = getScale(offsetParent);
9218        }
9219      } else {
9220        scale = getScale(element);
9221      }
9222    }
9223    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : floating_ui_utils_createCoords(0);
9224    let x = (clientRect.left + visualOffsets.x) / scale.x;
9225    let y = (clientRect.top + visualOffsets.y) / scale.y;
9226    let width = clientRect.width / scale.x;
9227    let height = clientRect.height / scale.y;
9228    if (domElement) {
9229      const win = floating_ui_utils_dom_getWindow(domElement);
9230      const offsetWin = offsetParent && isElement(offsetParent) ? floating_ui_utils_dom_getWindow(offsetParent) : offsetParent;
9231      let currentWin = win;
9232      let currentIFrame = currentWin.frameElement;
9233      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
9234        const iframeScale = getScale(currentIFrame);
9235        const iframeRect = currentIFrame.getBoundingClientRect();
9236        const css = floating_ui_utils_dom_getComputedStyle(currentIFrame);
9237        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
9238        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
9239        x *= iframeScale.x;
9240        y *= iframeScale.y;
9241        width *= iframeScale.x;
9242        height *= iframeScale.y;
9243        x += left;
9244        y += top;
9245        currentWin = floating_ui_utils_dom_getWindow(currentIFrame);
9246        currentIFrame = currentWin.frameElement;
9247      }
9248    }
9249    return floating_ui_utils_rectToClientRect({
9250      width,
9251      height,
9252      x,
9253      y
9254    });
9255  }
9256  
9257  const topLayerSelectors = [':popover-open', ':modal'];
9258  function isTopLayer(floating) {
9259    return topLayerSelectors.some(selector => {
9260      try {
9261        return floating.matches(selector);
9262      } catch (e) {
9263        return false;
9264      }
9265    });
9266  }
9267  
9268  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
9269    let {
9270      elements,
9271      rect,
9272      offsetParent,
9273      strategy
9274    } = _ref;
9275    const isFixed = strategy === 'fixed';
9276    const documentElement = getDocumentElement(offsetParent);
9277    const topLayer = elements ? isTopLayer(elements.floating) : false;
9278    if (offsetParent === documentElement || topLayer && isFixed) {
9279      return rect;
9280    }
9281    let scroll = {
9282      scrollLeft: 0,
9283      scrollTop: 0
9284    };
9285    let scale = floating_ui_utils_createCoords(1);
9286    const offsets = floating_ui_utils_createCoords(0);
9287    const isOffsetParentAnElement = isHTMLElement(offsetParent);
9288    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
9289      if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
9290        scroll = getNodeScroll(offsetParent);
9291      }
9292      if (isHTMLElement(offsetParent)) {
9293        const offsetRect = getBoundingClientRect(offsetParent);
9294        scale = getScale(offsetParent);
9295        offsets.x = offsetRect.x + offsetParent.clientLeft;
9296        offsets.y = offsetRect.y + offsetParent.clientTop;
9297      }
9298    }
9299    return {
9300      width: rect.width * scale.x,
9301      height: rect.height * scale.y,
9302      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
9303      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
9304    };
9305  }
9306  
9307  function getClientRects(element) {
9308    return Array.from(element.getClientRects());
9309  }
9310  
9311  function getWindowScrollBarX(element) {
9312    // If <html> has a CSS width greater than the viewport, then this will be
9313    // incorrect for RTL.
9314    return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
9315  }
9316  
9317  // Gets the entire size of the scrollable document area, even extending outside
9318  // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
9319  function getDocumentRect(element) {
9320    const html = getDocumentElement(element);
9321    const scroll = getNodeScroll(element);
9322    const body = element.ownerDocument.body;
9323    const width = dist_floating_ui_utils_max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
9324    const height = dist_floating_ui_utils_max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
9325    let x = -scroll.scrollLeft + getWindowScrollBarX(element);
9326    const y = -scroll.scrollTop;
9327    if (floating_ui_utils_dom_getComputedStyle(body).direction === 'rtl') {
9328      x += dist_floating_ui_utils_max(html.clientWidth, body.clientWidth) - width;
9329    }
9330    return {
9331      width,
9332      height,
9333      x,
9334      y
9335    };
9336  }
9337  
9338  function getViewportRect(element, strategy) {
9339    const win = floating_ui_utils_dom_getWindow(element);
9340    const html = getDocumentElement(element);
9341    const visualViewport = win.visualViewport;
9342    let width = html.clientWidth;
9343    let height = html.clientHeight;
9344    let x = 0;
9345    let y = 0;
9346    if (visualViewport) {
9347      width = visualViewport.width;
9348      height = visualViewport.height;
9349      const visualViewportBased = isWebKit();
9350      if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
9351        x = visualViewport.offsetLeft;
9352        y = visualViewport.offsetTop;
9353      }
9354    }
9355    return {
9356      width,
9357      height,
9358      x,
9359      y
9360    };
9361  }
9362  
9363  // Returns the inner client rect, subtracting scrollbars if present.
9364  function getInnerBoundingClientRect(element, strategy) {
9365    const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
9366    const top = clientRect.top + element.clientTop;
9367    const left = clientRect.left + element.clientLeft;
9368    const scale = isHTMLElement(element) ? getScale(element) : floating_ui_utils_createCoords(1);
9369    const width = element.clientWidth * scale.x;
9370    const height = element.clientHeight * scale.y;
9371    const x = left * scale.x;
9372    const y = top * scale.y;
9373    return {
9374      width,
9375      height,
9376      x,
9377      y
9378    };
9379  }
9380  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
9381    let rect;
9382    if (clippingAncestor === 'viewport') {
9383      rect = getViewportRect(element, strategy);
9384    } else if (clippingAncestor === 'document') {
9385      rect = getDocumentRect(getDocumentElement(element));
9386    } else if (isElement(clippingAncestor)) {
9387      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
9388    } else {
9389      const visualOffsets = getVisualOffsets(element);
9390      rect = {
9391        ...clippingAncestor,
9392        x: clippingAncestor.x - visualOffsets.x,
9393        y: clippingAncestor.y - visualOffsets.y
9394      };
9395    }
9396    return floating_ui_utils_rectToClientRect(rect);
9397  }
9398  function hasFixedPositionAncestor(element, stopNode) {
9399    const parentNode = getParentNode(element);
9400    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
9401      return false;
9402    }
9403    return floating_ui_utils_dom_getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
9404  }
9405  
9406  // A "clipping ancestor" is an `overflow` element with the characteristic of
9407  // clipping (or hiding) child elements. This returns all clipping ancestors
9408  // of the given element up the tree.
9409  function getClippingElementAncestors(element, cache) {
9410    const cachedResult = cache.get(element);
9411    if (cachedResult) {
9412      return cachedResult;
9413    }
9414    let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
9415    let currentContainingBlockComputedStyle = null;
9416    const elementIsFixed = floating_ui_utils_dom_getComputedStyle(element).position === 'fixed';
9417    let currentNode = elementIsFixed ? getParentNode(element) : element;
9418  
9419    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
9420    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
9421      const computedStyle = floating_ui_utils_dom_getComputedStyle(currentNode);
9422      const currentNodeIsContaining = isContainingBlock(currentNode);
9423      if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
9424        currentContainingBlockComputedStyle = null;
9425      }
9426      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
9427      if (shouldDropCurrentNode) {
9428        // Drop non-containing blocks.
9429        result = result.filter(ancestor => ancestor !== currentNode);
9430      } else {
9431        // Record last containing block for next iteration.
9432        currentContainingBlockComputedStyle = computedStyle;
9433      }
9434      currentNode = getParentNode(currentNode);
9435    }
9436    cache.set(element, result);
9437    return result;
9438  }
9439  
9440  // Gets the maximum area that the element is visible in due to any number of
9441  // clipping ancestors.
9442  function getClippingRect(_ref) {
9443    let {
9444      element,
9445      boundary,
9446      rootBoundary,
9447      strategy
9448    } = _ref;
9449    const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
9450    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
9451    const firstClippingAncestor = clippingAncestors[0];
9452    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
9453      const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
9454      accRect.top = dist_floating_ui_utils_max(rect.top, accRect.top);
9455      accRect.right = dist_floating_ui_utils_min(rect.right, accRect.right);
9456      accRect.bottom = dist_floating_ui_utils_min(rect.bottom, accRect.bottom);
9457      accRect.left = dist_floating_ui_utils_max(rect.left, accRect.left);
9458      return accRect;
9459    }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
9460    return {
9461      width: clippingRect.right - clippingRect.left,
9462      height: clippingRect.bottom - clippingRect.top,
9463      x: clippingRect.left,
9464      y: clippingRect.top
9465    };
9466  }
9467  
9468  function getDimensions(element) {
9469    const {
9470      width,
9471      height
9472    } = getCssDimensions(element);
9473    return {
9474      width,
9475      height
9476    };
9477  }
9478  
9479  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
9480    const isOffsetParentAnElement = isHTMLElement(offsetParent);
9481    const documentElement = getDocumentElement(offsetParent);
9482    const isFixed = strategy === 'fixed';
9483    const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
9484    let scroll = {
9485      scrollLeft: 0,
9486      scrollTop: 0
9487    };
9488    const offsets = floating_ui_utils_createCoords(0);
9489    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
9490      if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
9491        scroll = getNodeScroll(offsetParent);
9492      }
9493      if (isOffsetParentAnElement) {
9494        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
9495        offsets.x = offsetRect.x + offsetParent.clientLeft;
9496        offsets.y = offsetRect.y + offsetParent.clientTop;
9497      } else if (documentElement) {
9498        offsets.x = getWindowScrollBarX(documentElement);
9499      }
9500    }
9501    const x = rect.left + scroll.scrollLeft - offsets.x;
9502    const y = rect.top + scroll.scrollTop - offsets.y;
9503    return {
9504      x,
9505      y,
9506      width: rect.width,
9507      height: rect.height
9508    };
9509  }
9510  
9511  function getTrueOffsetParent(element, polyfill) {
9512    if (!isHTMLElement(element) || floating_ui_utils_dom_getComputedStyle(element).position === 'fixed') {
9513      return null;
9514    }
9515    if (polyfill) {
9516      return polyfill(element);
9517    }
9518    return element.offsetParent;
9519  }
9520  
9521  // Gets the closest ancestor positioned element. Handles some edge cases,
9522  // such as table ancestors and cross browser bugs.
9523  function getOffsetParent(element, polyfill) {
9524    const window = floating_ui_utils_dom_getWindow(element);
9525    if (!isHTMLElement(element) || isTopLayer(element)) {
9526      return window;
9527    }
9528    let offsetParent = getTrueOffsetParent(element, polyfill);
9529    while (offsetParent && isTableElement(offsetParent) && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static') {
9530      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
9531    }
9532    if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
9533      return window;
9534    }
9535    return offsetParent || getContainingBlock(element) || window;
9536  }
9537  
9538  const getElementRects = async function (data) {
9539    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
9540    const getDimensionsFn = this.getDimensions;
9541    return {
9542      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
9543      floating: {
9544        x: 0,
9545        y: 0,
9546        ...(await getDimensionsFn(data.floating))
9547      }
9548    };
9549  };
9550  
9551  function isRTL(element) {
9552    return floating_ui_utils_dom_getComputedStyle(element).direction === 'rtl';
9553  }
9554  
9555  const platform = {
9556    convertOffsetParentRelativeRectToViewportRelativeRect,
9557    getDocumentElement: getDocumentElement,
9558    getClippingRect,
9559    getOffsetParent,
9560    getElementRects,
9561    getClientRects,
9562    getDimensions,
9563    getScale,
9564    isElement: isElement,
9565    isRTL
9566  };
9567  
9568  // https://samthor.au/2021/observing-dom/
9569  function observeMove(element, onMove) {
9570    let io = null;
9571    let timeoutId;
9572    const root = getDocumentElement(element);
9573    function cleanup() {
9574      var _io;
9575      clearTimeout(timeoutId);
9576      (_io = io) == null || _io.disconnect();
9577      io = null;
9578    }
9579    function refresh(skip, threshold) {
9580      if (skip === void 0) {
9581        skip = false;
9582      }
9583      if (threshold === void 0) {
9584        threshold = 1;
9585      }
9586      cleanup();
9587      const {
9588        left,
9589        top,
9590        width,
9591        height
9592      } = element.getBoundingClientRect();
9593      if (!skip) {
9594        onMove();
9595      }
9596      if (!width || !height) {
9597        return;
9598      }
9599      const insetTop = floating_ui_utils_floor(top);
9600      const insetRight = floating_ui_utils_floor(root.clientWidth - (left + width));
9601      const insetBottom = floating_ui_utils_floor(root.clientHeight - (top + height));
9602      const insetLeft = floating_ui_utils_floor(left);
9603      const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
9604      const options = {
9605        rootMargin,
9606        threshold: dist_floating_ui_utils_max(0, dist_floating_ui_utils_min(1, threshold)) || 1
9607      };
9608      let isFirstUpdate = true;
9609      function handleObserve(entries) {
9610        const ratio = entries[0].intersectionRatio;
9611        if (ratio !== threshold) {
9612          if (!isFirstUpdate) {
9613            return refresh();
9614          }
9615          if (!ratio) {
9616            timeoutId = setTimeout(() => {
9617              refresh(false, 1e-7);
9618            }, 100);
9619          } else {
9620            refresh(false, ratio);
9621          }
9622        }
9623        isFirstUpdate = false;
9624      }
9625  
9626      // Older browsers don't support a `document` as the root and will throw an
9627      // error.
9628      try {
9629        io = new IntersectionObserver(handleObserve, {
9630          ...options,
9631          // Handle <iframe>s
9632          root: root.ownerDocument
9633        });
9634      } catch (e) {
9635        io = new IntersectionObserver(handleObserve, options);
9636      }
9637      io.observe(element);
9638    }
9639    refresh(true);
9640    return cleanup;
9641  }
9642  
9643  /**
9644   * Automatically updates the position of the floating element when necessary.
9645   * Should only be called when the floating element is mounted on the DOM or
9646   * visible on the screen.
9647   * @returns cleanup function that should be invoked when the floating element is
9648   * removed from the DOM or hidden from the screen.
9649   * @see https://floating-ui.com/docs/autoUpdate
9650   */
9651  function autoUpdate(reference, floating, update, options) {
9652    if (options === void 0) {
9653      options = {};
9654    }
9655    const {
9656      ancestorScroll = true,
9657      ancestorResize = true,
9658      elementResize = typeof ResizeObserver === 'function',
9659      layoutShift = typeof IntersectionObserver === 'function',
9660      animationFrame = false
9661    } = options;
9662    const referenceEl = unwrapElement(reference);
9663    const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
9664    ancestors.forEach(ancestor => {
9665      ancestorScroll && ancestor.addEventListener('scroll', update, {
9666        passive: true
9667      });
9668      ancestorResize && ancestor.addEventListener('resize', update);
9669    });
9670    const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
9671    let reobserveFrame = -1;
9672    let resizeObserver = null;
9673    if (elementResize) {
9674      resizeObserver = new ResizeObserver(_ref => {
9675        let [firstEntry] = _ref;
9676        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
9677          // Prevent update loops when using the `size` middleware.
9678          // https://github.com/floating-ui/floating-ui/issues/1740
9679          resizeObserver.unobserve(floating);
9680          cancelAnimationFrame(reobserveFrame);
9681          reobserveFrame = requestAnimationFrame(() => {
9682            var _resizeObserver;
9683            (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
9684          });
9685        }
9686        update();
9687      });
9688      if (referenceEl && !animationFrame) {
9689        resizeObserver.observe(referenceEl);
9690      }
9691      resizeObserver.observe(floating);
9692    }
9693    let frameId;
9694    let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
9695    if (animationFrame) {
9696      frameLoop();
9697    }
9698    function frameLoop() {
9699      const nextRefRect = getBoundingClientRect(reference);
9700      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
9701        update();
9702      }
9703      prevRefRect = nextRefRect;
9704      frameId = requestAnimationFrame(frameLoop);
9705    }
9706    update();
9707    return () => {
9708      var _resizeObserver2;
9709      ancestors.forEach(ancestor => {
9710        ancestorScroll && ancestor.removeEventListener('scroll', update);
9711        ancestorResize && ancestor.removeEventListener('resize', update);
9712      });
9713      cleanupIo == null || cleanupIo();
9714      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
9715      resizeObserver = null;
9716      if (animationFrame) {
9717        cancelAnimationFrame(frameId);
9718      }
9719    };
9720  }
9721  
9722  /**
9723   * Optimizes the visibility of the floating element by choosing the placement
9724   * that has the most space available automatically, without needing to specify a
9725   * preferred placement. Alternative to `flip`.
9726   * @see https://floating-ui.com/docs/autoPlacement
9727   */
9728  const floating_ui_dom_autoPlacement = (/* unused pure expression or super */ null && (autoPlacement$1));
9729  
9730  /**
9731   * Optimizes the visibility of the floating element by shifting it in order to
9732   * keep it in view when it will overflow the clipping boundary.
9733   * @see https://floating-ui.com/docs/shift
9734   */
9735  const floating_ui_dom_shift = shift;
9736  
9737  /**
9738   * Optimizes the visibility of the floating element by flipping the `placement`
9739   * in order to keep it in view when the preferred placement(s) will overflow the
9740   * clipping boundary. Alternative to `autoPlacement`.
9741   * @see https://floating-ui.com/docs/flip
9742   */
9743  const floating_ui_dom_flip = flip;
9744  
9745  /**
9746   * Provides data that allows you to change the size of the floating element —
9747   * for instance, prevent it from overflowing the clipping boundary or match the
9748   * width of the reference element.
9749   * @see https://floating-ui.com/docs/size
9750   */
9751  const floating_ui_dom_size = size;
9752  
9753  /**
9754   * Provides data to hide the floating element in applicable situations, such as
9755   * when it is not in the same clipping context as the reference element.
9756   * @see https://floating-ui.com/docs/hide
9757   */
9758  const floating_ui_dom_hide = (/* unused pure expression or super */ null && (hide$1));
9759  
9760  /**
9761   * Provides data to position an inner element of the floating element so that it
9762   * appears centered to the reference element.
9763   * @see https://floating-ui.com/docs/arrow
9764   */
9765  const floating_ui_dom_arrow = arrow;
9766  
9767  /**
9768   * Provides improved positioning for inline reference elements that can span
9769   * over multiple lines, such as hyperlinks or range selections.
9770   * @see https://floating-ui.com/docs/inline
9771   */
9772  const floating_ui_dom_inline = (/* unused pure expression or super */ null && (inline$1));
9773  
9774  /**
9775   * Built-in `limiter` that will stop `shift()` at a certain point.
9776   */
9777  const floating_ui_dom_limitShift = limitShift;
9778  
9779  /**
9780   * Computes the `x` and `y` coordinates that will place the floating element
9781   * next to a given reference element.
9782   */
9783  const floating_ui_dom_computePosition = (reference, floating, options) => {
9784    // This caches the expensive `getClippingElementAncestors` function so that
9785    // multiple lifecycle resets re-use the same result. It only lives for a
9786    // single call. If other functions become expensive, we can add them as well.
9787    const cache = new Map();
9788    const mergedOptions = {
9789      platform,
9790      ...options
9791    };
9792    const platformWithCache = {
9793      ...mergedOptions.platform,
9794      _c: cache
9795    };
9796    return computePosition(reference, floating, {
9797      ...mergedOptions,
9798      platform: platformWithCache
9799    });
9800  };
9801  
9802  
9803  
9804  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IRX7SFUJ.js
9805  "use client";
9806  
9807  
9808  
9809  
9810  
9811  
9812  // src/popover/popover.tsx
9813  
9814  
9815  
9816  
9817  function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
9818    if (typeof DOMRect === "function") {
9819      return new DOMRect(x, y, width, height);
9820    }
9821    const rect = {
9822      x,
9823      y,
9824      width,
9825      height,
9826      top: y,
9827      right: x + width,
9828      bottom: y + height,
9829      left: x
9830    };
9831    return _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, rect), { toJSON: () => rect });
9832  }
9833  function getDOMRect(anchorRect) {
9834    if (!anchorRect)
9835      return createDOMRect();
9836    const { x, y, width, height } = anchorRect;
9837    return createDOMRect(x, y, width, height);
9838  }
9839  function getAnchorElement(anchorElement, getAnchorRect) {
9840    const contextElement = anchorElement || void 0;
9841    return {
9842      contextElement,
9843      getBoundingClientRect: () => {
9844        const anchor = anchorElement;
9845        const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor);
9846        if (anchorRect || !anchor) {
9847          return getDOMRect(anchorRect);
9848        }
9849        return anchor.getBoundingClientRect();
9850      }
9851    };
9852  }
9853  function isValidPlacement(flip2) {
9854    return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2);
9855  }
9856  function roundByDPR(value) {
9857    const dpr = window.devicePixelRatio || 1;
9858    return Math.round(value * dpr) / dpr;
9859  }
9860  function getOffsetMiddleware(arrowElement, props) {
9861    return offset(({ placement }) => {
9862      var _a;
9863      const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2;
9864      const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset;
9865      const hasAlignment = !!placement.split("-")[1];
9866      return {
9867        crossAxis: !hasAlignment ? props.shift : void 0,
9868        mainAxis: finalGutter,
9869        alignmentAxis: props.shift
9870      };
9871    });
9872  }
9873  function getFlipMiddleware(props) {
9874    if (props.flip === false)
9875      return;
9876    const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
9877    invariant(
9878      !fallbackPlacements || fallbackPlacements.every(isValidPlacement),
9879       false && 0
9880    );
9881    return floating_ui_dom_flip({
9882      padding: props.overflowPadding,
9883      fallbackPlacements
9884    });
9885  }
9886  function getShiftMiddleware(props) {
9887    if (!props.slide && !props.overlap)
9888      return;
9889    return floating_ui_dom_shift({
9890      mainAxis: props.slide,
9891      crossAxis: props.overlap,
9892      padding: props.overflowPadding,
9893      limiter: floating_ui_dom_limitShift()
9894    });
9895  }
9896  function getSizeMiddleware(props) {
9897    return floating_ui_dom_size({
9898      padding: props.overflowPadding,
9899      apply({ elements, availableWidth, availableHeight, rects }) {
9900        const wrapper = elements.floating;
9901        const referenceWidth = Math.round(rects.reference.width);
9902        availableWidth = Math.floor(availableWidth);
9903        availableHeight = Math.floor(availableHeight);
9904        wrapper.style.setProperty(
9905          "--popover-anchor-width",
9906          `$referenceWidth}px`
9907        );
9908        wrapper.style.setProperty(
9909          "--popover-available-width",
9910          `$availableWidth}px`
9911        );
9912        wrapper.style.setProperty(
9913          "--popover-available-height",
9914          `$availableHeight}px`
9915        );
9916        if (props.sameWidth) {
9917          wrapper.style.width = `$referenceWidth}px`;
9918        }
9919        if (props.fitViewport) {
9920          wrapper.style.maxWidth = `$availableWidth}px`;
9921          wrapper.style.maxHeight = `$availableHeight}px`;
9922        }
9923      }
9924    });
9925  }
9926  function getArrowMiddleware(arrowElement, props) {
9927    if (!arrowElement)
9928      return;
9929    return floating_ui_dom_arrow({
9930      element: arrowElement,
9931      padding: props.arrowPadding
9932    });
9933  }
9934  var usePopover = createHook(
9935    (_a) => {
9936      var _b = _a, {
9937        store,
9938        modal = false,
9939        portal = !!modal,
9940        preserveTabOrder = true,
9941        autoFocusOnShow = true,
9942        wrapperProps,
9943        fixed = false,
9944        flip: flip2 = true,
9945        shift: shift2 = 0,
9946        slide = true,
9947        overlap = false,
9948        sameWidth = false,
9949        fitViewport = false,
9950        gutter,
9951        arrowPadding = 4,
9952        overflowPadding = 8,
9953        getAnchorRect,
9954        updatePosition
9955      } = _b, props = __objRest(_b, [
9956        "store",
9957        "modal",
9958        "portal",
9959        "preserveTabOrder",
9960        "autoFocusOnShow",
9961        "wrapperProps",
9962        "fixed",
9963        "flip",
9964        "shift",
9965        "slide",
9966        "overlap",
9967        "sameWidth",
9968        "fitViewport",
9969        "gutter",
9970        "arrowPadding",
9971        "overflowPadding",
9972        "getAnchorRect",
9973        "updatePosition"
9974      ]);
9975      const context = usePopoverProviderContext();
9976      store = store || context;
9977      invariant(
9978        store,
9979         false && 0
9980      );
9981      const arrowElement = store.useState("arrowElement");
9982      const anchorElement = store.useState("anchorElement");
9983      const disclosureElement = store.useState("disclosureElement");
9984      const popoverElement = store.useState("popoverElement");
9985      const contentElement = store.useState("contentElement");
9986      const placement = store.useState("placement");
9987      const mounted = store.useState("mounted");
9988      const rendered = store.useState("rendered");
9989      const [positioned, setPositioned] = (0,external_React_.useState)(false);
9990      const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
9991      const getAnchorRectProp = useEvent(getAnchorRect);
9992      const updatePositionProp = useEvent(updatePosition);
9993      const hasCustomUpdatePosition = !!updatePosition;
9994      useSafeLayoutEffect(() => {
9995        if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
9996          return;
9997        popoverElement.style.setProperty(
9998          "--popover-overflow-padding",
9999          `$overflowPadding}px`
10000        );
10001        const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
10002        const updatePosition2 = async () => {
10003          if (!mounted)
10004            return;
10005          const middleware = [
10006            getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
10007            getFlipMiddleware({ flip: flip2, overflowPadding }),
10008            getShiftMiddleware({ slide, shift: shift2, overlap, overflowPadding }),
10009            getArrowMiddleware(arrowElement, { arrowPadding }),
10010            getSizeMiddleware({
10011              sameWidth,
10012              fitViewport,
10013              overflowPadding
10014            })
10015          ];
10016          const pos = await floating_ui_dom_computePosition(anchor, popoverElement, {
10017            placement,
10018            strategy: fixed ? "fixed" : "absolute",
10019            middleware
10020          });
10021          store == null ? void 0 : store.setState("currentPlacement", pos.placement);
10022          setPositioned(true);
10023          const x = roundByDPR(pos.x);
10024          const y = roundByDPR(pos.y);
10025          Object.assign(popoverElement.style, {
10026            top: "0",
10027            left: "0",
10028            transform: `translate3d($x}px,$y}px,0)`
10029          });
10030          if (arrowElement && pos.middlewareData.arrow) {
10031            const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
10032            const dir = pos.placement.split("-")[0];
10033            Object.assign(arrowElement.style, {
10034              left: arrowX != null ? `$arrowX}px` : "",
10035              top: arrowY != null ? `$arrowY}px` : "",
10036              [dir]: "100%"
10037            });
10038          }
10039        };
10040        const update = async () => {
10041          if (hasCustomUpdatePosition) {
10042            await updatePositionProp({ updatePosition: updatePosition2 });
10043            setPositioned(true);
10044          } else {
10045            await updatePosition2();
10046          }
10047        };
10048        const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, {
10049          // JSDOM doesn't support ResizeObserver
10050          elementResize: typeof ResizeObserver === "function"
10051        });
10052        return () => {
10053          setPositioned(false);
10054          cancelAutoUpdate();
10055        };
10056      }, [
10057        store,
10058        rendered,
10059        popoverElement,
10060        arrowElement,
10061        anchorElement,
10062        popoverElement,
10063        placement,
10064        mounted,
10065        domReady,
10066        fixed,
10067        flip2,
10068        shift2,
10069        slide,
10070        overlap,
10071        sameWidth,
10072        fitViewport,
10073        gutter,
10074        arrowPadding,
10075        overflowPadding,
10076        getAnchorRectProp,
10077        hasCustomUpdatePosition,
10078        updatePositionProp
10079      ]);
10080      useSafeLayoutEffect(() => {
10081        if (!mounted)
10082          return;
10083        if (!domReady)
10084          return;
10085        if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
10086          return;
10087        if (!(contentElement == null ? void 0 : contentElement.isConnected))
10088          return;
10089        const applyZIndex = () => {
10090          popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
10091        };
10092        applyZIndex();
10093        let raf = requestAnimationFrame(() => {
10094          raf = requestAnimationFrame(applyZIndex);
10095        });
10096        return () => cancelAnimationFrame(raf);
10097      }, [mounted, domReady, popoverElement, contentElement]);
10098      const position = fixed ? "fixed" : "absolute";
10099      props = useWrapElement(
10100        props,
10101        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(
10102          "div",
10103          _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
10104            role: "presentation"
10105          }, wrapperProps), {
10106            style: _4R3V3JGP_spreadValues({
10107              // https://floating-ui.com/docs/computeposition#initial-layout
10108              position,
10109              top: 0,
10110              left: 0,
10111              width: "max-content"
10112            }, wrapperProps == null ? void 0 : wrapperProps.style),
10113            ref: store == null ? void 0 : store.setPopoverElement,
10114            children: element
10115          })
10116        ),
10117        [store, position, wrapperProps]
10118      );
10119      props = useWrapElement(
10120        props,
10121        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverScopedContextProvider, { value: store, children: element }),
10122        [store]
10123      );
10124      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
10125        // data-placing is not part of the public API. We're setting this here so
10126        // we can wait for the popover to be positioned before other components
10127        // move focus into it. For example, this attribute is observed by the
10128        // Combobox component with the autoSelect behavior.
10129        "data-placing": !positioned ? "" : void 0
10130      }, props), {
10131        style: _4R3V3JGP_spreadValues({
10132          position: "relative"
10133        }, props.style)
10134      });
10135      props = useDialog(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
10136        store,
10137        modal,
10138        portal,
10139        preserveTabOrder,
10140        preserveTabOrderAnchor: disclosureElement || anchorElement,
10141        autoFocusOnShow: positioned && autoFocusOnShow
10142      }, props), {
10143        portalRef
10144      }));
10145      return props;
10146    }
10147  );
10148  var Popover = createDialogComponent(
10149    createComponent((props) => {
10150      const htmlProps = usePopover(props);
10151      return _3ORBWXWF_createElement("div", htmlProps);
10152    }),
10153    usePopoverProviderContext
10154  );
10155  if (false) {}
10156  
10157  
10158  
10159  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/QWSZGSIG.js
10160  "use client";
10161  
10162  
10163  
10164  
10165  
10166  
10167  
10168  
10169  // src/hovercard/hovercard.tsx
10170  
10171  
10172  
10173  
10174  
10175  
10176  
10177  function isMovingOnHovercard(target, card, anchor, nested) {
10178    if (hasFocusWithin(card))
10179      return true;
10180    if (!target)
10181      return false;
10182    if (contains(card, target))
10183      return true;
10184    if (anchor && contains(anchor, target))
10185      return true;
10186    if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) {
10187      return true;
10188    }
10189    return false;
10190  }
10191  function useAutoFocusOnHide(_a) {
10192    var _b = _a, {
10193      store
10194    } = _b, props = __objRest(_b, [
10195      "store"
10196    ]);
10197    const [autoFocusOnHide, setAutoFocusOnHide] = (0,external_React_.useState)(false);
10198    const mounted = store.useState("mounted");
10199    (0,external_React_.useEffect)(() => {
10200      if (!mounted) {
10201        setAutoFocusOnHide(false);
10202      }
10203    }, [mounted]);
10204    const onFocusProp = props.onFocus;
10205    const onFocus = useEvent((event) => {
10206      onFocusProp == null ? void 0 : onFocusProp(event);
10207      if (event.defaultPrevented)
10208        return;
10209      setAutoFocusOnHide(true);
10210    });
10211    const finalFocusRef = (0,external_React_.useRef)(null);
10212    (0,external_React_.useEffect)(() => {
10213      return sync(store, ["anchorElement"], (state) => {
10214        finalFocusRef.current = state.anchorElement;
10215      });
10216    }, []);
10217    props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
10218      autoFocusOnHide,
10219      finalFocus: finalFocusRef
10220    }, props), {
10221      onFocus
10222    });
10223    return props;
10224  }
10225  var NestedHovercardContext = (0,external_React_.createContext)(null);
10226  var useHovercard = createHook(
10227    (_a) => {
10228      var _b = _a, {
10229        store,
10230        modal = false,
10231        portal = !!modal,
10232        hideOnEscape = true,
10233        hideOnHoverOutside = true,
10234        disablePointerEventsOnApproach = !!hideOnHoverOutside
10235      } = _b, props = __objRest(_b, [
10236        "store",
10237        "modal",
10238        "portal",
10239        "hideOnEscape",
10240        "hideOnHoverOutside",
10241        "disablePointerEventsOnApproach"
10242      ]);
10243      const context = useHovercardProviderContext();
10244      store = store || context;
10245      invariant(
10246        store,
10247         false && 0
10248      );
10249      const ref = (0,external_React_.useRef)(null);
10250      const [nestedHovercards, setNestedHovercards] = (0,external_React_.useState)([]);
10251      const hideTimeoutRef = (0,external_React_.useRef)(0);
10252      const enterPointRef = (0,external_React_.useRef)(null);
10253      const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
10254      const mayHideOnHoverOutside = !!hideOnHoverOutside;
10255      const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside);
10256      const mayDisablePointerEvents = !!disablePointerEventsOnApproach;
10257      const disablePointerEventsProp = useBooleanEvent(
10258        disablePointerEventsOnApproach
10259      );
10260      const open = store.useState("open");
10261      const mounted = store.useState("mounted");
10262      (0,external_React_.useEffect)(() => {
10263        if (!domReady)
10264          return;
10265        if (!mounted)
10266          return;
10267        if (!mayHideOnHoverOutside && !mayDisablePointerEvents)
10268          return;
10269        const element = ref.current;
10270        if (!element)
10271          return;
10272        const onMouseMove = (event) => {
10273          if (!store)
10274            return;
10275          const { anchorElement, hideTimeout, timeout } = store.getState();
10276          const enterPoint = enterPointRef.current;
10277          const [target] = event.composedPath();
10278          const anchor = anchorElement;
10279          if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {
10280            enterPointRef.current = target && anchor && contains(anchor, target) ? getEventPoint(event) : null;
10281            window.clearTimeout(hideTimeoutRef.current);
10282            hideTimeoutRef.current = 0;
10283            return;
10284          }
10285          if (hideTimeoutRef.current)
10286            return;
10287          if (enterPoint) {
10288            const currentPoint = getEventPoint(event);
10289            const polygon = getElementPolygon(element, enterPoint);
10290            if (isPointInPolygon(currentPoint, polygon)) {
10291              enterPointRef.current = currentPoint;
10292              if (!disablePointerEventsProp(event))
10293                return;
10294              event.preventDefault();
10295              event.stopPropagation();
10296              return;
10297            }
10298          }
10299          if (!hideOnHoverOutsideProp(event))
10300            return;
10301          hideTimeoutRef.current = window.setTimeout(() => {
10302            hideTimeoutRef.current = 0;
10303            store == null ? void 0 : store.hide();
10304          }, hideTimeout != null ? hideTimeout : timeout);
10305        };
10306        return chain(
10307          addGlobalEventListener("mousemove", onMouseMove, true),
10308          () => clearTimeout(hideTimeoutRef.current)
10309        );
10310      }, [
10311        store,
10312        domReady,
10313        mounted,
10314        mayHideOnHoverOutside,
10315        mayDisablePointerEvents,
10316        nestedHovercards,
10317        disablePointerEventsProp,
10318        hideOnHoverOutsideProp
10319      ]);
10320      (0,external_React_.useEffect)(() => {
10321        if (!domReady)
10322          return;
10323        if (!mounted)
10324          return;
10325        if (!mayDisablePointerEvents)
10326          return;
10327        const disableEvent = (event) => {
10328          const element = ref.current;
10329          if (!element)
10330            return;
10331          const enterPoint = enterPointRef.current;
10332          if (!enterPoint)
10333            return;
10334          const polygon = getElementPolygon(element, enterPoint);
10335          if (isPointInPolygon(getEventPoint(event), polygon)) {
10336            if (!disablePointerEventsProp(event))
10337              return;
10338            event.preventDefault();
10339            event.stopPropagation();
10340          }
10341        };
10342        return chain(
10343          // Note: we may need to add pointer events here in the future.
10344          addGlobalEventListener("mouseenter", disableEvent, true),
10345          addGlobalEventListener("mouseover", disableEvent, true),
10346          addGlobalEventListener("mouseout", disableEvent, true),
10347          addGlobalEventListener("mouseleave", disableEvent, true)
10348        );
10349      }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
10350      (0,external_React_.useEffect)(() => {
10351        if (!domReady)
10352          return;
10353        if (open)
10354          return;
10355        store == null ? void 0 : store.setAutoFocusOnShow(false);
10356      }, [store, domReady, open]);
10357      const openRef = useLiveRef(open);
10358      (0,external_React_.useEffect)(() => {
10359        if (!domReady)
10360          return;
10361        return () => {
10362          if (!openRef.current) {
10363            store == null ? void 0 : store.setAutoFocusOnShow(false);
10364          }
10365        };
10366      }, [store, domReady]);
10367      const registerOnParent = (0,external_React_.useContext)(NestedHovercardContext);
10368      useSafeLayoutEffect(() => {
10369        if (modal)
10370          return;
10371        if (!portal)
10372          return;
10373        if (!mounted)
10374          return;
10375        if (!domReady)
10376          return;
10377        const element = ref.current;
10378        if (!element)
10379          return;
10380        return registerOnParent == null ? void 0 : registerOnParent(element);
10381      }, [modal, portal, mounted, domReady]);
10382      const registerNestedHovercard = (0,external_React_.useCallback)(
10383        (element) => {
10384          setNestedHovercards((prevElements) => [...prevElements, element]);
10385          const parentUnregister = registerOnParent == null ? void 0 : registerOnParent(element);
10386          return () => {
10387            setNestedHovercards(
10388              (prevElements) => prevElements.filter((item) => item !== element)
10389            );
10390            parentUnregister == null ? void 0 : parentUnregister();
10391          };
10392        },
10393        [registerOnParent]
10394      );
10395      props = useWrapElement(
10396        props,
10397        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }),
10398        [store, registerNestedHovercard]
10399      );
10400      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
10401        ref: useMergeRefs(ref, props.ref)
10402      });
10403      props = useAutoFocusOnHide(_4R3V3JGP_spreadValues({ store }, props));
10404      const autoFocusOnShow = store.useState(
10405        (state) => modal || state.autoFocusOnShow
10406      );
10407      props = usePopover(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
10408        store,
10409        modal,
10410        portal,
10411        autoFocusOnShow
10412      }, props), {
10413        portalRef,
10414        hideOnEscape(event) {
10415          if (isFalsyBooleanCallback(hideOnEscape, event))
10416            return false;
10417          requestAnimationFrame(() => {
10418            requestAnimationFrame(() => {
10419              store == null ? void 0 : store.hide();
10420            });
10421          });
10422          return true;
10423        }
10424      }));
10425      return props;
10426    }
10427  );
10428  var Hovercard = createDialogComponent(
10429    createComponent((props) => {
10430      const htmlProps = useHovercard(props);
10431      return _3ORBWXWF_createElement("div", htmlProps);
10432    }),
10433    useHovercardProviderContext
10434  );
10435  if (false) {}
10436  
10437  
10438  
10439  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js
10440  "use client";
10441  
10442  
10443  
10444  
10445  
10446  
10447  
10448  
10449  
10450  
10451  
10452  
10453  
10454  
10455  
10456  
10457  
10458  
10459  
10460  
10461  
10462  
10463  
10464  
10465  
10466  
10467  
10468  
10469  
10470  
10471  
10472  
10473  
10474  
10475  
10476  
10477  
10478  
10479  
10480  
10481  
10482  
10483  // src/tooltip/tooltip.tsx
10484  
10485  
10486  
10487  var useTooltip = createHook(
10488    (_a) => {
10489      var _b = _a, {
10490        store,
10491        portal = true,
10492        gutter = 8,
10493        preserveTabOrder = false,
10494        hideOnHoverOutside = true,
10495        hideOnInteractOutside = true
10496      } = _b, props = __objRest(_b, [
10497        "store",
10498        "portal",
10499        "gutter",
10500        "preserveTabOrder",
10501        "hideOnHoverOutside",
10502        "hideOnInteractOutside"
10503      ]);
10504      const context = useTooltipProviderContext();
10505      store = store || context;
10506      invariant(
10507        store,
10508         false && 0
10509      );
10510      props = useWrapElement(
10511        props,
10512        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TooltipScopedContextProvider, { value: store, children: element }),
10513        [store]
10514      );
10515      const role = store.useState(
10516        (state) => state.type === "description" ? "tooltip" : "none"
10517      );
10518      props = _4R3V3JGP_spreadValues({ role }, props);
10519      props = useHovercard(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
10520        store,
10521        portal,
10522        gutter,
10523        preserveTabOrder,
10524        hideOnHoverOutside: (event) => {
10525          if (isFalsyBooleanCallback(hideOnHoverOutside, event))
10526            return false;
10527          const anchorElement = store == null ? void 0 : store.getState().anchorElement;
10528          if (!anchorElement)
10529            return true;
10530          if ("focusVisible" in anchorElement.dataset)
10531            return false;
10532          return true;
10533        },
10534        hideOnInteractOutside: (event) => {
10535          if (isFalsyBooleanCallback(hideOnInteractOutside, event))
10536            return false;
10537          const anchorElement = store == null ? void 0 : store.getState().anchorElement;
10538          if (!anchorElement)
10539            return true;
10540          if (contains(anchorElement, event.target))
10541            return false;
10542          return true;
10543        }
10544      }));
10545      return props;
10546    }
10547  );
10548  var Tooltip = createDialogComponent(
10549    createComponent((props) => {
10550      const htmlProps = useTooltip(props);
10551      return _3ORBWXWF_createElement("div", htmlProps);
10552    }),
10553    useTooltipProviderContext
10554  );
10555  if (false) {}
10556  
10557  
10558  ;// CONCATENATED MODULE: external ["wp","element"]
10559  const external_wp_element_namespaceObject = window["wp"]["element"];
10560  ;// CONCATENATED MODULE: external ["wp","deprecated"]
10561  const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
10562  var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
10563  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/shortcut/index.js
10564  
10565  /**
10566   * Internal dependencies
10567   */
10568  
10569  /**
10570   * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
10571   *
10572   * ```jsx
10573   * import { Shortcut } from '@wordpress/components';
10574   *
10575   * const MyShortcut = () => {
10576   *     return (
10577   *         <Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
10578   *     );
10579   * };
10580   * ```
10581   */
10582  function Shortcut(props) {
10583    const {
10584      shortcut,
10585      className
10586    } = props;
10587    if (!shortcut) {
10588      return null;
10589    }
10590    let displayText;
10591    let ariaLabel;
10592    if (typeof shortcut === 'string') {
10593      displayText = shortcut;
10594    }
10595    if (shortcut !== null && typeof shortcut === 'object') {
10596      displayText = shortcut.display;
10597      ariaLabel = shortcut.ariaLabel;
10598    }
10599    return (0,external_React_.createElement)("span", {
10600      className: className,
10601      "aria-label": ariaLabel
10602    }, displayText);
10603  }
10604  /* harmony default export */ const build_module_shortcut = (Shortcut);
10605  
10606  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/utils.js
10607  /**
10608   * External dependencies
10609   */
10610  // eslint-disable-next-line no-restricted-imports
10611  
10612  /**
10613   * Internal dependencies
10614   */
10615  
10616  const POSITION_TO_PLACEMENT = {
10617    bottom: 'bottom',
10618    top: 'top',
10619    'middle left': 'left',
10620    'middle right': 'right',
10621    'bottom left': 'bottom-end',
10622    'bottom center': 'bottom',
10623    'bottom right': 'bottom-start',
10624    'top left': 'top-end',
10625    'top center': 'top',
10626    'top right': 'top-start',
10627    'middle left left': 'left',
10628    'middle left right': 'left',
10629    'middle left bottom': 'left-end',
10630    'middle left top': 'left-start',
10631    'middle right left': 'right',
10632    'middle right right': 'right',
10633    'middle right bottom': 'right-end',
10634    'middle right top': 'right-start',
10635    'bottom left left': 'bottom-end',
10636    'bottom left right': 'bottom-end',
10637    'bottom left bottom': 'bottom-end',
10638    'bottom left top': 'bottom-end',
10639    'bottom center left': 'bottom',
10640    'bottom center right': 'bottom',
10641    'bottom center bottom': 'bottom',
10642    'bottom center top': 'bottom',
10643    'bottom right left': 'bottom-start',
10644    'bottom right right': 'bottom-start',
10645    'bottom right bottom': 'bottom-start',
10646    'bottom right top': 'bottom-start',
10647    'top left left': 'top-end',
10648    'top left right': 'top-end',
10649    'top left bottom': 'top-end',
10650    'top left top': 'top-end',
10651    'top center left': 'top',
10652    'top center right': 'top',
10653    'top center bottom': 'top',
10654    'top center top': 'top',
10655    'top right left': 'top-start',
10656    'top right right': 'top-start',
10657    'top right bottom': 'top-start',
10658    'top right top': 'top-start',
10659    // `middle`/`middle center [corner?]` positions are associated to a fallback
10660    // `bottom` placement because there aren't any corresponding placement values.
10661    middle: 'bottom',
10662    'middle center': 'bottom',
10663    'middle center bottom': 'bottom',
10664    'middle center left': 'bottom',
10665    'middle center right': 'bottom',
10666    'middle center top': 'bottom'
10667  };
10668  
10669  /**
10670   * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
10671   * (used by `floating-ui`).
10672   *
10673   * @param position The legacy position
10674   * @return The corresponding placement
10675   */
10676  const positionToPlacement = position => {
10677    var _POSITION_TO_PLACEMEN;
10678    return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom';
10679  };
10680  
10681  /**
10682   * @typedef AnimationOrigin
10683   * @type {Object}
10684   * @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")
10685   * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
10686   */
10687  
10688  const PLACEMENT_TO_ANIMATION_ORIGIN = {
10689    top: {
10690      originX: 0.5,
10691      originY: 1
10692    },
10693    // open from bottom, center
10694    'top-start': {
10695      originX: 0,
10696      originY: 1
10697    },
10698    // open from bottom, left
10699    'top-end': {
10700      originX: 1,
10701      originY: 1
10702    },
10703    // open from bottom, right
10704    right: {
10705      originX: 0,
10706      originY: 0.5
10707    },
10708    // open from middle, left
10709    'right-start': {
10710      originX: 0,
10711      originY: 0
10712    },
10713    // open from top, left
10714    'right-end': {
10715      originX: 0,
10716      originY: 1
10717    },
10718    // open from bottom, left
10719    bottom: {
10720      originX: 0.5,
10721      originY: 0
10722    },
10723    // open from top, center
10724    'bottom-start': {
10725      originX: 0,
10726      originY: 0
10727    },
10728    // open from top, left
10729    'bottom-end': {
10730      originX: 1,
10731      originY: 0
10732    },
10733    // open from top, right
10734    left: {
10735      originX: 1,
10736      originY: 0.5
10737    },
10738    // open from middle, right
10739    'left-start': {
10740      originX: 1,
10741      originY: 0
10742    },
10743    // open from top, right
10744    'left-end': {
10745      originX: 1,
10746      originY: 1
10747    },
10748    // open from bottom, right
10749    overlay: {
10750      originX: 0.5,
10751      originY: 0.5
10752    } // open from center, center
10753  };
10754  
10755  /**
10756   * Given the floating-ui `placement`, compute the framer-motion props for the
10757   * popover's entry animation.
10758   *
10759   * @param placement A placement string from floating ui
10760   * @return The object containing the motion props
10761   */
10762  const placementToMotionAnimationProps = placement => {
10763    const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX';
10764    const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1;
10765    return {
10766      style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],
10767      initial: {
10768        opacity: 0,
10769        scale: 0,
10770        [translateProp]: `$2 * translateDirection}em`
10771      },
10772      animate: {
10773        opacity: 1,
10774        scale: 1,
10775        [translateProp]: 0
10776      },
10777      transition: {
10778        duration: 0.1,
10779        ease: [0, 0, 0.2, 1]
10780      }
10781    };
10782  };
10783  function isTopBottom(anchorRef) {
10784    return !!anchorRef?.top;
10785  }
10786  function isRef(anchorRef) {
10787    return !!anchorRef?.current;
10788  }
10789  const getReferenceElement = ({
10790    anchor,
10791    anchorRef,
10792    anchorRect,
10793    getAnchorRect,
10794    fallbackReferenceElement
10795  }) => {
10796    var _referenceElement;
10797    let referenceElement = null;
10798    if (anchor) {
10799      referenceElement = anchor;
10800    } else if (isTopBottom(anchorRef)) {
10801      // Create a virtual element for the ref. The expectation is that
10802      // if anchorRef.top is defined, then anchorRef.bottom is defined too.
10803      // Seems to be used by the block toolbar, when multiple blocks are selected
10804      // (top and bottom blocks are used to calculate the resulting rect).
10805      referenceElement = {
10806        getBoundingClientRect() {
10807          const topRect = anchorRef.top.getBoundingClientRect();
10808          const bottomRect = anchorRef.bottom.getBoundingClientRect();
10809          return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
10810        }
10811      };
10812    } else if (isRef(anchorRef)) {
10813      // Standard React ref.
10814      referenceElement = anchorRef.current;
10815    } else if (anchorRef) {
10816      // If `anchorRef` holds directly the element's value (no `current` key)
10817      // This is a weird scenario and should be deprecated.
10818      referenceElement = anchorRef;
10819    } else if (anchorRect) {
10820      // Create a virtual element for the ref.
10821      referenceElement = {
10822        getBoundingClientRect() {
10823          return anchorRect;
10824        }
10825      };
10826    } else if (getAnchorRect) {
10827      // Create a virtual element for the ref.
10828      referenceElement = {
10829        getBoundingClientRect() {
10830          var _rect$x, _rect$y, _rect$width, _rect$height;
10831          const rect = getAnchorRect(fallbackReferenceElement);
10832          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);
10833        }
10834      };
10835    } else if (fallbackReferenceElement) {
10836      // If no explicit ref is passed via props, fall back to
10837      // anchoring to the popover's parent node.
10838      referenceElement = fallbackReferenceElement.parentElement;
10839    }
10840  
10841    // Convert any `undefined` value to `null`.
10842    return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;
10843  };
10844  
10845  /**
10846   * Computes the final coordinate that needs to be applied to the floating
10847   * element when applying transform inline styles, defaulting to `undefined`
10848   * if the provided value is `null` or `NaN`.
10849   *
10850   * @param c input coordinate (usually as returned from floating-ui)
10851   * @return The coordinate's value to be used for inline styles. An `undefined`
10852   *         return value means "no style set" for this coordinate.
10853   */
10854  const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);
10855  
10856  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tooltip/index.js
10857  
10858  /**
10859   * External dependencies
10860   */
10861  // eslint-disable-next-line no-restricted-imports
10862  
10863  
10864  /**
10865   * WordPress dependencies
10866   */
10867  
10868  
10869  
10870  
10871  /**
10872   * Internal dependencies
10873   */
10874  
10875  
10876  
10877  const TooltipInternalContext = (0,external_wp_element_namespaceObject.createContext)({
10878    isNestedInTooltip: false
10879  });
10880  
10881  /**
10882   * Time over anchor to wait before showing tooltip
10883   */
10884  const TOOLTIP_DELAY = 700;
10885  const CONTEXT_VALUE = {
10886    isNestedInTooltip: true
10887  };
10888  function UnforwardedTooltip(props, ref) {
10889    const {
10890      children,
10891      delay = TOOLTIP_DELAY,
10892      hideOnClick = true,
10893      placement,
10894      position,
10895      shortcut,
10896      text,
10897      ...restProps
10898    } = props;
10899    const {
10900      isNestedInTooltip
10901    } = (0,external_wp_element_namespaceObject.useContext)(TooltipInternalContext);
10902    const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(tooltip_Tooltip, 'tooltip');
10903    const describedById = text || shortcut ? baseId : undefined;
10904    const isOnlyChild = external_wp_element_namespaceObject.Children.count(children) === 1;
10905    // console error if more than one child element is added
10906    if (!isOnlyChild) {
10907      if (false) {}
10908    }
10909  
10910    // Compute tooltip's placement:
10911    // - give priority to `placement` prop, if defined
10912    // - otherwise, compute it from the legacy `position` prop (if defined)
10913    // - finally, fallback to the default placement: 'bottom'
10914    let computedPlacement;
10915    if (placement !== undefined) {
10916      computedPlacement = placement;
10917    } else if (position !== undefined) {
10918      computedPlacement = positionToPlacement(position);
10919      external_wp_deprecated_default()('`position` prop in wp.components.tooltip', {
10920        since: '6.4',
10921        alternative: '`placement` prop'
10922      });
10923    }
10924    computedPlacement = computedPlacement || 'bottom';
10925  
10926    // Removing the `Ariakit` namespace from the hook name allows ESLint to
10927    // properly identify the hook, and apply the correct linting rules.
10928    const useAriakitTooltipStore = useTooltipStore;
10929    const tooltipStore = useAriakitTooltipStore({
10930      placement: computedPlacement,
10931      showTimeout: delay
10932    });
10933    if (isNestedInTooltip) {
10934      return isOnlyChild ? (0,external_React_.createElement)(Role, {
10935        ...restProps,
10936        render: children
10937      }) : children;
10938    }
10939    return (0,external_React_.createElement)(TooltipInternalContext.Provider, {
10940      value: CONTEXT_VALUE
10941    }, (0,external_React_.createElement)(TooltipAnchor, {
10942      onClick: hideOnClick ? tooltipStore.hide : undefined,
10943      store: tooltipStore,
10944      render: isOnlyChild ? children : undefined,
10945      ref: ref
10946    }, isOnlyChild ? undefined : children), isOnlyChild && (text || shortcut) && (0,external_React_.createElement)(Tooltip, {
10947      ...restProps,
10948      className: "components-tooltip",
10949      unmountOnHide: true,
10950      gutter: 4,
10951      id: describedById,
10952      overflowPadding: 0.5,
10953      store: tooltipStore
10954    }, text, shortcut && (0,external_React_.createElement)(build_module_shortcut, {
10955      className: text ? 'components-tooltip__shortcut' : '',
10956      shortcut: shortcut
10957    })));
10958  }
10959  const tooltip_Tooltip = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTooltip);
10960  /* harmony default export */ const tooltip = (tooltip_Tooltip);
10961  
10962  ;// CONCATENATED MODULE: external ["wp","warning"]
10963  const external_wp_warning_namespaceObject = window["wp"]["warning"];
10964  var external_wp_warning_default = /*#__PURE__*/__webpack_require__.n(external_wp_warning_namespaceObject);
10965  // EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js
10966  var cjs = __webpack_require__(66);
10967  var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs);
10968  // EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js
10969  var es6 = __webpack_require__(7734);
10970  var es6_default = /*#__PURE__*/__webpack_require__.n(es6);
10971  ;// CONCATENATED MODULE: ./node_modules/is-plain-object/dist/is-plain-object.mjs
10972  /*!
10973   * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
10974   *
10975   * Copyright (c) 2014-2017, Jon Schlinkert.
10976   * Released under the MIT License.
10977   */
10978  
10979  function is_plain_object_isObject(o) {
10980    return Object.prototype.toString.call(o) === '[object Object]';
10981  }
10982  
10983  function isPlainObject(o) {
10984    var ctor,prot;
10985  
10986    if (is_plain_object_isObject(o) === false) return false;
10987  
10988    // If has modified constructor
10989    ctor = o.constructor;
10990    if (ctor === undefined) return true;
10991  
10992    // If has modified prototype
10993    prot = ctor.prototype;
10994    if (is_plain_object_isObject(prot) === false) return false;
10995  
10996    // If constructor does not have an Object-specific method
10997    if (prot.hasOwnProperty('isPrototypeOf') === false) {
10998      return false;
10999    }
11000  
11001    // Most likely a plain Object
11002    return true;
11003  }
11004  
11005  
11006  
11007  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js
11008  /**
11009   * WordPress dependencies
11010   */
11011  
11012  
11013  /**
11014   * A `React.useEffect` that will not run on the first render.
11015   * Source:
11016   * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
11017   *
11018   * @param {import('react').EffectCallback} effect
11019   * @param {import('react').DependencyList} deps
11020   */
11021  function use_update_effect_useUpdateEffect(effect, deps) {
11022    const mounted = (0,external_wp_element_namespaceObject.useRef)(false);
11023    (0,external_wp_element_namespaceObject.useEffect)(() => {
11024      if (mounted.current) {
11025        return effect();
11026      }
11027      mounted.current = true;
11028      return undefined;
11029      // Disable reasons:
11030      // 1. This hook needs to pass a dep list that isn't an array literal
11031      // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
11032      // see https://github.com/WordPress/gutenberg/pull/41166
11033      // eslint-disable-next-line react-hooks/exhaustive-deps
11034    }, deps);
11035  }
11036  /* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect);
11037  
11038  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-system-provider.js
11039  
11040  /**
11041   * External dependencies
11042   */
11043  
11044  
11045  
11046  
11047  /**
11048   * WordPress dependencies
11049   */
11050  
11051  
11052  
11053  /**
11054   * Internal dependencies
11055   */
11056  
11057  const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{});
11058  const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext);
11059  
11060  /**
11061   * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
11062   *
11063   * Note: This function will warn if it detects an un-memoized `value`
11064   *
11065   * @param {Object}              props
11066   * @param {Record<string, any>} props.value
11067   * @return {Record<string, any>} The consolidated value.
11068   */
11069  function useContextSystemBridge({
11070    value
11071  }) {
11072    const parentContext = useComponentsContext();
11073    const valueRef = (0,external_wp_element_namespaceObject.useRef)(value);
11074    use_update_effect(() => {
11075      if (
11076      // Objects are equivalent.
11077      es6_default()(valueRef.current, value) &&
11078      // But not the same reference.
11079      valueRef.current !== value) {
11080         true ? external_wp_warning_default()(`Please memoize your context: $JSON.stringify(value)}`) : 0;
11081      }
11082    }, [value]);
11083  
11084    // `parentContext` will always be memoized (i.e., the result of this hook itself)
11085    // or the default value from when the `ComponentsContext` was originally
11086    // initialized (which will never change, it's a static variable)
11087    // so this memoization will prevent `deepmerge()` from rerunning unless
11088    // the references to `value` change OR the `parentContext` has an actual material change
11089    // (because again, it's guaranteed to be memoized or a static reference to the empty object
11090    // so we know that the only changes for `parentContext` are material ones... i.e., why we
11091    // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
11092    // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
11093    // correctly warning when the `value` isn't being properly memoized. All of that to say
11094    // that this should be super safe to assume that `useMemo` will only run on actual
11095    // changes to the two dependencies, therefore saving us calls to `deepmerge()`!
11096    const config = (0,external_wp_element_namespaceObject.useMemo)(() => {
11097      // Deep clone `parentContext` to avoid mutating it later.
11098      return cjs_default()(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
11099        isMergeableObject: isPlainObject
11100      });
11101    }, [parentContext, value]);
11102    return config;
11103  }
11104  
11105  /**
11106   * A Provider component that can modify props for connected components within
11107   * the Context system.
11108   *
11109   * @example
11110   * ```jsx
11111   * <ContextSystemProvider value={{ Button: { size: 'small' }}}>
11112   *   <Button>...</Button>
11113   * </ContextSystemProvider>
11114   * ```
11115   *
11116   * @template {Record<string, any>} T
11117   * @param {Object}                    options
11118   * @param {import('react').ReactNode} options.children Children to render.
11119   * @param {T}                         options.value    Props to render into connected components.
11120   * @return {JSX.Element} A Provider wrapped component.
11121   */
11122  const BaseContextSystemProvider = ({
11123    children,
11124    value
11125  }) => {
11126    const contextValue = useContextSystemBridge({
11127      value
11128    });
11129    return (0,external_React_.createElement)(ComponentsContext.Provider, {
11130      value: contextValue
11131    }, children);
11132  };
11133  const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider);
11134  
11135  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/constants.js
11136  const COMPONENT_NAMESPACE = 'data-wp-component';
11137  const CONNECTED_NAMESPACE = 'data-wp-c16t';
11138  
11139  /**
11140   * Special key where the connected namespaces are stored.
11141   * This is attached to Context connected components as a static property.
11142   */
11143  const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
11144  
11145  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/utils.js
11146  /**
11147   * Internal dependencies
11148   */
11149  
11150  
11151  /**
11152   * Creates a dedicated context namespace HTML attribute for components.
11153   * ns is short for "namespace"
11154   *
11155   * @example
11156   * ```jsx
11157   * <div {...ns('Container')} />
11158   * ```
11159   *
11160   * @param {string} componentName The name for the component.
11161   * @return {Record<string, any>} A props object with the namespaced HTML attribute.
11162   */
11163  function getNamespace(componentName) {
11164    return {
11165      [COMPONENT_NAMESPACE]: componentName
11166    };
11167  }
11168  
11169  /**
11170   * Creates a dedicated connected context namespace HTML attribute for components.
11171   * ns is short for "namespace"
11172   *
11173   * @example
11174   * ```jsx
11175   * <div {...cns()} />
11176   * ```
11177   *
11178   * @return {Record<string, any>} A props object with the namespaced HTML attribute.
11179   */
11180  function getConnectedNamespace() {
11181    return {
11182      [CONNECTED_NAMESPACE]: true
11183    };
11184  }
11185  
11186  ;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.mjs
11187  /******************************************************************************
11188  Copyright (c) Microsoft Corporation.
11189  
11190  Permission to use, copy, modify, and/or distribute this software for any
11191  purpose with or without fee is hereby granted.
11192  
11193  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11194  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11195  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11196  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11197  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
11198  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
11199  PERFORMANCE OF THIS SOFTWARE.
11200  ***************************************************************************** */
11201  /* global Reflect, Promise, SuppressedError, Symbol */
11202  
11203  var extendStatics = function(d, b) {
11204    extendStatics = Object.setPrototypeOf ||
11205        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
11206        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
11207    return extendStatics(d, b);
11208  };
11209  
11210  function __extends(d, b) {
11211    if (typeof b !== "function" && b !== null)
11212        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11213    extendStatics(d, b);
11214    function __() { this.constructor = d; }
11215    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
11216  }
11217  
11218  var __assign = function() {
11219    __assign = Object.assign || function __assign(t) {
11220        for (var s, i = 1, n = arguments.length; i < n; i++) {
11221            s = arguments[i];
11222            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
11223        }
11224        return t;
11225    }
11226    return __assign.apply(this, arguments);
11227  }
11228  
11229  function __rest(s, e) {
11230    var t = {};
11231    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
11232        t[p] = s[p];
11233    if (s != null && typeof Object.getOwnPropertySymbols === "function")
11234        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
11235            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
11236                t[p[i]] = s[p[i]];
11237        }
11238    return t;
11239  }
11240  
11241  function __decorate(decorators, target, key, desc) {
11242    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
11243    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
11244    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;
11245    return c > 3 && r && Object.defineProperty(target, key, r), r;
11246  }
11247  
11248  function __param(paramIndex, decorator) {
11249    return function (target, key) { decorator(target, key, paramIndex); }
11250  }
11251  
11252  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
11253    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
11254    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
11255    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
11256    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
11257    var _, done = false;
11258    for (var i = decorators.length - 1; i >= 0; i--) {
11259        var context = {};
11260        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11261        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
11262        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
11263        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
11264        if (kind === "accessor") {
11265            if (result === void 0) continue;
11266            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
11267            if (_ = accept(result.get)) descriptor.get = _;
11268            if (_ = accept(result.set)) descriptor.set = _;
11269            if (_ = accept(result.init)) initializers.unshift(_);
11270        }
11271        else if (_ = accept(result)) {
11272            if (kind === "field") initializers.unshift(_);
11273            else descriptor[key] = _;
11274        }
11275    }
11276    if (target) Object.defineProperty(target, contextIn.name, descriptor);
11277    done = true;
11278  };
11279  
11280  function __runInitializers(thisArg, initializers, value) {
11281    var useValue = arguments.length > 2;
11282    for (var i = 0; i < initializers.length; i++) {
11283        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
11284    }
11285    return useValue ? value : void 0;
11286  };
11287  
11288  function __propKey(x) {
11289    return typeof x === "symbol" ? x : "".concat(x);
11290  };
11291  
11292  function __setFunctionName(f, name, prefix) {
11293    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
11294    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
11295  };
11296  
11297  function __metadata(metadataKey, metadataValue) {
11298    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
11299  }
11300  
11301  function __awaiter(thisArg, _arguments, P, generator) {
11302    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
11303    return new (P || (P = Promise))(function (resolve, reject) {
11304        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
11305        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
11306        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
11307        step((generator = generator.apply(thisArg, _arguments || [])).next());
11308    });
11309  }
11310  
11311  function __generator(thisArg, body) {
11312    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
11313    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
11314    function verb(n) { return function (v) { return step([n, v]); }; }
11315    function step(op) {
11316        if (f) throw new TypeError("Generator is already executing.");
11317        while (g && (g = 0, op[0] && (_ = 0)), _) try {
11318            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;
11319            if (y = 0, t) op = [op[0] & 2, t.value];
11320            switch (op[0]) {
11321                case 0: case 1: t = op; break;
11322                case 4: _.label++; return { value: op[1], done: false };
11323                case 5: _.label++; y = op[1]; op = [0]; continue;
11324                case 7: op = _.ops.pop(); _.trys.pop(); continue;
11325                default:
11326                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
11327                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
11328                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
11329                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
11330                    if (t[2]) _.ops.pop();
11331                    _.trys.pop(); continue;
11332            }
11333            op = body.call(thisArg, _);
11334        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
11335        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
11336    }
11337  }
11338  
11339  var __createBinding = Object.create ? (function(o, m, k, k2) {
11340    if (k2 === undefined) k2 = k;
11341    var desc = Object.getOwnPropertyDescriptor(m, k);
11342    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
11343        desc = { enumerable: true, get: function() { return m[k]; } };
11344    }
11345    Object.defineProperty(o, k2, desc);
11346  }) : (function(o, m, k, k2) {
11347    if (k2 === undefined) k2 = k;
11348    o[k2] = m[k];
11349  });
11350  
11351  function __exportStar(m, o) {
11352    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
11353  }
11354  
11355  function __values(o) {
11356    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
11357    if (m) return m.call(o);
11358    if (o && typeof o.length === "number") return {
11359        next: function () {
11360            if (o && i >= o.length) o = void 0;
11361            return { value: o && o[i++], done: !o };
11362        }
11363    };
11364    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
11365  }
11366  
11367  function __read(o, n) {
11368    var m = typeof Symbol === "function" && o[Symbol.iterator];
11369    if (!m) return o;
11370    var i = m.call(o), r, ar = [], e;
11371    try {
11372        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
11373    }
11374    catch (error) { e = { error: error }; }
11375    finally {
11376        try {
11377            if (r && !r.done && (m = i["return"])) m.call(i);
11378        }
11379        finally { if (e) throw e.error; }
11380    }
11381    return ar;
11382  }
11383  
11384  /** @deprecated */
11385  function __spread() {
11386    for (var ar = [], i = 0; i < arguments.length; i++)
11387        ar = ar.concat(__read(arguments[i]));
11388    return ar;
11389  }
11390  
11391  /** @deprecated */
11392  function __spreadArrays() {
11393    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
11394    for (var r = Array(s), k = 0, i = 0; i < il; i++)
11395        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
11396            r[k] = a[j];
11397    return r;
11398  }
11399  
11400  function __spreadArray(to, from, pack) {
11401    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
11402        if (ar || !(i in from)) {
11403            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
11404            ar[i] = from[i];
11405        }
11406    }
11407    return to.concat(ar || Array.prototype.slice.call(from));
11408  }
11409  
11410  function __await(v) {
11411    return this instanceof __await ? (this.v = v, this) : new __await(v);
11412  }
11413  
11414  function __asyncGenerator(thisArg, _arguments, generator) {
11415    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
11416    var g = generator.apply(thisArg, _arguments || []), i, q = [];
11417    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
11418    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); }); }; }
11419    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
11420    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
11421    function fulfill(value) { resume("next", value); }
11422    function reject(value) { resume("throw", value); }
11423    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
11424  }
11425  
11426  function __asyncDelegator(o) {
11427    var i, p;
11428    return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
11429    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; }
11430  }
11431  
11432  function __asyncValues(o) {
11433    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
11434    var m = o[Symbol.asyncIterator], i;
11435    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);
11436    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); }); }; }
11437    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
11438  }
11439  
11440  function __makeTemplateObject(cooked, raw) {
11441    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
11442    return cooked;
11443  };
11444  
11445  var __setModuleDefault = Object.create ? (function(o, v) {
11446    Object.defineProperty(o, "default", { enumerable: true, value: v });
11447  }) : function(o, v) {
11448    o["default"] = v;
11449  };
11450  
11451  function __importStar(mod) {
11452    if (mod && mod.__esModule) return mod;
11453    var result = {};
11454    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
11455    __setModuleDefault(result, mod);
11456    return result;
11457  }
11458  
11459  function __importDefault(mod) {
11460    return (mod && mod.__esModule) ? mod : { default: mod };
11461  }
11462  
11463  function __classPrivateFieldGet(receiver, state, kind, f) {
11464    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
11465    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");
11466    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11467  }
11468  
11469  function __classPrivateFieldSet(receiver, state, value, kind, f) {
11470    if (kind === "m") throw new TypeError("Private method is not writable");
11471    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
11472    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");
11473    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
11474  }
11475  
11476  function __classPrivateFieldIn(state, receiver) {
11477    if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
11478    return typeof state === "function" ? receiver === state : state.has(receiver);
11479  }
11480  
11481  function __addDisposableResource(env, value, async) {
11482    if (value !== null && value !== void 0) {
11483      if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
11484      var dispose;
11485      if (async) {
11486          if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
11487          dispose = value[Symbol.asyncDispose];
11488      }
11489      if (dispose === void 0) {
11490          if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
11491          dispose = value[Symbol.dispose];
11492      }
11493      if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
11494      env.stack.push({ value: value, dispose: dispose, async: async });
11495    }
11496    else if (async) {
11497      env.stack.push({ async: true });
11498    }
11499    return value;
11500  }
11501  
11502  var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
11503    var e = new Error(message);
11504    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
11505  };
11506  
11507  function __disposeResources(env) {
11508    function fail(e) {
11509      env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
11510      env.hasError = true;
11511    }
11512    function next() {
11513      while (env.stack.length) {
11514        var rec = env.stack.pop();
11515        try {
11516          var result = rec.dispose && rec.dispose.call(rec.value);
11517          if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
11518        }
11519        catch (e) {
11520            fail(e);
11521        }
11522      }
11523      if (env.hasError) throw env.error;
11524    }
11525    return next();
11526  }
11527  
11528  /* harmony default export */ const tslib_es6 = ({
11529    __extends,
11530    __assign,
11531    __rest,
11532    __decorate,
11533    __param,
11534    __metadata,
11535    __awaiter,
11536    __generator,
11537    __createBinding,
11538    __exportStar,
11539    __values,
11540    __read,
11541    __spread,
11542    __spreadArrays,
11543    __spreadArray,
11544    __await,
11545    __asyncGenerator,
11546    __asyncDelegator,
11547    __asyncValues,
11548    __makeTemplateObject,
11549    __importStar,
11550    __importDefault,
11551    __classPrivateFieldGet,
11552    __classPrivateFieldSet,
11553    __classPrivateFieldIn,
11554    __addDisposableResource,
11555    __disposeResources,
11556  });
11557  
11558  ;// CONCATENATED MODULE: ./node_modules/lower-case/dist.es2015/index.js
11559  /**
11560   * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
11561   */
11562  var SUPPORTED_LOCALE = {
11563      tr: {
11564          regexp: /\u0130|\u0049|\u0049\u0307/g,
11565          map: {
11566              İ: "\u0069",
11567              I: "\u0131",
11568              İ: "\u0069",
11569          },
11570      },
11571      az: {
11572          regexp: /\u0130/g,
11573          map: {
11574              İ: "\u0069",
11575              I: "\u0131",
11576              İ: "\u0069",
11577          },
11578      },
11579      lt: {
11580          regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g,
11581          map: {
11582              I: "\u0069\u0307",
11583              J: "\u006A\u0307",
11584              Į: "\u012F\u0307",
11585              Ì: "\u0069\u0307\u0300",
11586              Í: "\u0069\u0307\u0301",
11587              Ĩ: "\u0069\u0307\u0303",
11588          },
11589      },
11590  };
11591  /**
11592   * Localized lower case.
11593   */
11594  function localeLowerCase(str, locale) {
11595      var lang = SUPPORTED_LOCALE[locale.toLowerCase()];
11596      if (lang)
11597          return lowerCase(str.replace(lang.regexp, function (m) { return lang.map[m]; }));
11598      return lowerCase(str);
11599  }
11600  /**
11601   * Lower case as a function.
11602   */
11603  function lowerCase(str) {
11604      return str.toLowerCase();
11605  }
11606  
11607  ;// CONCATENATED MODULE: ./node_modules/no-case/dist.es2015/index.js
11608  
11609  // Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
11610  var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
11611  // Remove all non-word characters.
11612  var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
11613  /**
11614   * Normalize the string into something other libraries can manipulate easier.
11615   */
11616  function noCase(input, options) {
11617      if (options === void 0) { options = {}; }
11618      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;
11619      var result = dist_es2015_replace(dist_es2015_replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
11620      var start = 0;
11621      var end = result.length;
11622      // Trim the delimiter from around the output string.
11623      while (result.charAt(start) === "\0")
11624          start++;
11625      while (result.charAt(end - 1) === "\0")
11626          end--;
11627      // Transform each token independently.
11628      return result.slice(start, end).split("\0").map(transform).join(delimiter);
11629  }
11630  /**
11631   * Replace `re` in the input string with the replacement value.
11632   */
11633  function dist_es2015_replace(input, re, value) {
11634      if (re instanceof RegExp)
11635          return input.replace(re, value);
11636      return re.reduce(function (input, re) { return input.replace(re, value); }, input);
11637  }
11638  
11639  ;// CONCATENATED MODULE: ./node_modules/dot-case/dist.es2015/index.js
11640  
11641  
11642  function dotCase(input, options) {
11643      if (options === void 0) { options = {}; }
11644      return noCase(input, __assign({ delimiter: "." }, options));
11645  }
11646  
11647  ;// CONCATENATED MODULE: ./node_modules/param-case/dist.es2015/index.js
11648  
11649  
11650  function paramCase(input, options) {
11651      if (options === void 0) { options = {}; }
11652      return dotCase(input, __assign({ delimiter: "-" }, options));
11653  }
11654  
11655  ;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js
11656  /**
11657   * Memize options object.
11658   *
11659   * @typedef MemizeOptions
11660   *
11661   * @property {number} [maxSize] Maximum size of the cache.
11662   */
11663  
11664  /**
11665   * Internal cache entry.
11666   *
11667   * @typedef MemizeCacheNode
11668   *
11669   * @property {?MemizeCacheNode|undefined} [prev] Previous node.
11670   * @property {?MemizeCacheNode|undefined} [next] Next node.
11671   * @property {Array<*>}                   args   Function arguments for cache
11672   *                                               entry.
11673   * @property {*}                          val    Function result.
11674   */
11675  
11676  /**
11677   * Properties of the enhanced function for controlling cache.
11678   *
11679   * @typedef MemizeMemoizedFunction
11680   *
11681   * @property {()=>void} clear Clear the cache.
11682   */
11683  
11684  /**
11685   * Accepts a function to be memoized, and returns a new memoized function, with
11686   * optional options.
11687   *
11688   * @template {(...args: any[]) => any} F
11689   *
11690   * @param {F}             fn        Function to memoize.
11691   * @param {MemizeOptions} [options] Options object.
11692   *
11693   * @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function.
11694   */
11695  function memize(fn, options) {
11696      var size = 0;
11697  
11698      /** @type {?MemizeCacheNode|undefined} */
11699      var head;
11700  
11701      /** @type {?MemizeCacheNode|undefined} */
11702      var tail;
11703  
11704      options = options || {};
11705  
11706  	function memoized(/* ...args */) {
11707          var node = head,
11708              len = arguments.length,
11709              args,
11710              i;
11711  
11712          searchCache: while (node) {
11713              // Perform a shallow equality test to confirm that whether the node
11714              // under test is a candidate for the arguments passed. Two arrays
11715              // are shallowly equal if their length matches and each entry is
11716              // strictly equal between the two sets. Avoid abstracting to a
11717              // function which could incur an arguments leaking deoptimization.
11718  
11719              // Check whether node arguments match arguments length
11720              if (node.args.length !== arguments.length) {
11721                  node = node.next;
11722                  continue;
11723              }
11724  
11725              // Check whether node arguments match arguments values
11726              for (i = 0; i < len; i++) {
11727                  if (node.args[i] !== arguments[i]) {
11728                      node = node.next;
11729                      continue searchCache;
11730                  }
11731              }
11732  
11733              // At this point we can assume we've found a match
11734  
11735              // Surface matched node to head if not already
11736              if (node !== head) {
11737                  // As tail, shift to previous. Must only shift if not also
11738                  // head, since if both head and tail, there is no previous.
11739                  if (node === tail) {
11740                      tail = node.prev;
11741                  }
11742  
11743                  // Adjust siblings to point to each other. If node was tail,
11744                  // this also handles new tail's empty `next` assignment.
11745                  /** @type {MemizeCacheNode} */ (node.prev).next = node.next;
11746                  if (node.next) {
11747                      node.next.prev = node.prev;
11748                  }
11749  
11750                  node.next = head;
11751                  node.prev = null;
11752                  /** @type {MemizeCacheNode} */ (head).prev = node;
11753                  head = node;
11754              }
11755  
11756              // Return immediately
11757              return node.val;
11758          }
11759  
11760          // No cached value found. Continue to insertion phase:
11761  
11762          // Create a copy of arguments (avoid leaking deoptimization)
11763          args = new Array(len);
11764          for (i = 0; i < len; i++) {
11765              args[i] = arguments[i];
11766          }
11767  
11768          node = {
11769              args: args,
11770  
11771              // Generate the result from original function
11772              val: fn.apply(null, args),
11773          };
11774  
11775          // Don't need to check whether node is already head, since it would
11776          // have been returned above already if it was
11777  
11778          // Shift existing head down list
11779          if (head) {
11780              head.prev = node;
11781              node.next = head;
11782          } else {
11783              // If no head, follows that there's no tail (at initial or reset)
11784              tail = node;
11785          }
11786  
11787          // Trim tail if we're reached max size and are pending cache insertion
11788          if (size === /** @type {MemizeOptions} */ (options).maxSize) {
11789              tail = /** @type {MemizeCacheNode} */ (tail).prev;
11790              /** @type {MemizeCacheNode} */ (tail).next = null;
11791          } else {
11792              size++;
11793          }
11794  
11795          head = node;
11796  
11797          return node.val;
11798      }
11799  
11800      memoized.clear = function () {
11801          head = null;
11802          tail = null;
11803          size = 0;
11804      };
11805  
11806      // Ignore reason: There's not a clear solution to create an intersection of
11807      // the function with additional properties, where the goal is to retain the
11808      // function signature of the incoming argument and add control properties
11809      // on the return value.
11810  
11811      // @ts-ignore
11812      return memoized;
11813  }
11814  
11815  
11816  
11817  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.js
11818  /**
11819   * External dependencies
11820   */
11821  
11822  
11823  
11824  /**
11825   * Generates the connected component CSS className based on the namespace.
11826   *
11827   * @param namespace The name of the connected component.
11828   * @return The generated CSS className.
11829   */
11830  function getStyledClassName(namespace) {
11831    const kebab = paramCase(namespace);
11832    return `components-$kebab}`;
11833  }
11834  const getStyledClassNameFromKey = memize(getStyledClassName);
11835  
11836  ;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
11837  /*
11838  
11839  Based off glamor's StyleSheet, thanks Sunil ❤️
11840  
11841  high performance StyleSheet for css-in-js systems
11842  
11843  - uses multiple style tags behind the scenes for millions of rules
11844  - uses `insertRule` for appending in production for *much* faster performance
11845  
11846  // usage
11847  
11848  import { StyleSheet } from '@emotion/sheet'
11849  
11850  let styleSheet = new StyleSheet({ key: '', container: document.head })
11851  
11852  styleSheet.insert('#box { border: 1px solid red; }')
11853  - appends a css rule into the stylesheet
11854  
11855  styleSheet.flush()
11856  - empties the stylesheet of all its contents
11857  
11858  */
11859  // $FlowFixMe
11860  function sheetForTag(tag) {
11861    if (tag.sheet) {
11862      // $FlowFixMe
11863      return tag.sheet;
11864    } // this weirdness brought to you by firefox
11865  
11866    /* istanbul ignore next */
11867  
11868  
11869    for (var i = 0; i < document.styleSheets.length; i++) {
11870      if (document.styleSheets[i].ownerNode === tag) {
11871        // $FlowFixMe
11872        return document.styleSheets[i];
11873      }
11874    }
11875  }
11876  
11877  function createStyleElement(options) {
11878    var tag = document.createElement('style');
11879    tag.setAttribute('data-emotion', options.key);
11880  
11881    if (options.nonce !== undefined) {
11882      tag.setAttribute('nonce', options.nonce);
11883    }
11884  
11885    tag.appendChild(document.createTextNode(''));
11886    tag.setAttribute('data-s', '');
11887    return tag;
11888  }
11889  
11890  var StyleSheet = /*#__PURE__*/function () {
11891    // Using Node instead of HTMLElement since container may be a ShadowRoot
11892    function StyleSheet(options) {
11893      var _this = this;
11894  
11895      this._insertTag = function (tag) {
11896        var before;
11897  
11898        if (_this.tags.length === 0) {
11899          if (_this.insertionPoint) {
11900            before = _this.insertionPoint.nextSibling;
11901          } else if (_this.prepend) {
11902            before = _this.container.firstChild;
11903          } else {
11904            before = _this.before;
11905          }
11906        } else {
11907          before = _this.tags[_this.tags.length - 1].nextSibling;
11908        }
11909  
11910        _this.container.insertBefore(tag, before);
11911  
11912        _this.tags.push(tag);
11913      };
11914  
11915      this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
11916      this.tags = [];
11917      this.ctr = 0;
11918      this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
11919  
11920      this.key = options.key;
11921      this.container = options.container;
11922      this.prepend = options.prepend;
11923      this.insertionPoint = options.insertionPoint;
11924      this.before = null;
11925    }
11926  
11927    var _proto = StyleSheet.prototype;
11928  
11929    _proto.hydrate = function hydrate(nodes) {
11930      nodes.forEach(this._insertTag);
11931    };
11932  
11933    _proto.insert = function insert(rule) {
11934      // the max length is how many rules we have per style tag, it's 65000 in speedy mode
11935      // it's 1 in dev because we insert source maps that map a single rule to a location
11936      // and you can only have one source map per style tag
11937      if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
11938        this._insertTag(createStyleElement(this));
11939      }
11940  
11941      var tag = this.tags[this.tags.length - 1];
11942  
11943      if (false) { var isImportRule; }
11944  
11945      if (this.isSpeedy) {
11946        var sheet = sheetForTag(tag);
11947  
11948        try {
11949          // this is the ultrafast version, works across browsers
11950          // the big drawback is that the css won't be editable in devtools
11951          sheet.insertRule(rule, sheet.cssRules.length);
11952        } catch (e) {
11953          if (false) {}
11954        }
11955      } else {
11956        tag.appendChild(document.createTextNode(rule));
11957      }
11958  
11959      this.ctr++;
11960    };
11961  
11962    _proto.flush = function flush() {
11963      // $FlowFixMe
11964      this.tags.forEach(function (tag) {
11965        return tag.parentNode && tag.parentNode.removeChild(tag);
11966      });
11967      this.tags = [];
11968      this.ctr = 0;
11969  
11970      if (false) {}
11971    };
11972  
11973    return StyleSheet;
11974  }();
11975  
11976  
11977  
11978  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js
11979  /**
11980   * @param {number}
11981   * @return {number}
11982   */
11983  var abs = Math.abs
11984  
11985  /**
11986   * @param {number}
11987   * @return {string}
11988   */
11989  var Utility_from = String.fromCharCode
11990  
11991  /**
11992   * @param {object}
11993   * @return {object}
11994   */
11995  var Utility_assign = Object.assign
11996  
11997  /**
11998   * @param {string} value
11999   * @param {number} length
12000   * @return {number}
12001   */
12002  function hash (value, length) {
12003      return Utility_charat(value, 0) ^ 45 ? (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3) : 0
12004  }
12005  
12006  /**
12007   * @param {string} value
12008   * @return {string}
12009   */
12010  function trim (value) {
12011      return value.trim()
12012  }
12013  
12014  /**
12015   * @param {string} value
12016   * @param {RegExp} pattern
12017   * @return {string?}
12018   */
12019  function Utility_match (value, pattern) {
12020      return (value = pattern.exec(value)) ? value[0] : value
12021  }
12022  
12023  /**
12024   * @param {string} value
12025   * @param {(string|RegExp)} pattern
12026   * @param {string} replacement
12027   * @return {string}
12028   */
12029  function Utility_replace (value, pattern, replacement) {
12030      return value.replace(pattern, replacement)
12031  }
12032  
12033  /**
12034   * @param {string} value
12035   * @param {string} search
12036   * @return {number}
12037   */
12038  function indexof (value, search) {
12039      return value.indexOf(search)
12040  }
12041  
12042  /**
12043   * @param {string} value
12044   * @param {number} index
12045   * @return {number}
12046   */
12047  function Utility_charat (value, index) {
12048      return value.charCodeAt(index) | 0
12049  }
12050  
12051  /**
12052   * @param {string} value
12053   * @param {number} begin
12054   * @param {number} end
12055   * @return {string}
12056   */
12057  function Utility_substr (value, begin, end) {
12058      return value.slice(begin, end)
12059  }
12060  
12061  /**
12062   * @param {string} value
12063   * @return {number}
12064   */
12065  function Utility_strlen (value) {
12066      return value.length
12067  }
12068  
12069  /**
12070   * @param {any[]} value
12071   * @return {number}
12072   */
12073  function Utility_sizeof (value) {
12074      return value.length
12075  }
12076  
12077  /**
12078   * @param {any} value
12079   * @param {any[]} array
12080   * @return {any}
12081   */
12082  function Utility_append (value, array) {
12083      return array.push(value), value
12084  }
12085  
12086  /**
12087   * @param {string[]} array
12088   * @param {function} callback
12089   * @return {string}
12090   */
12091  function Utility_combine (array, callback) {
12092      return array.map(callback).join('')
12093  }
12094  
12095  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js
12096  
12097  
12098  var line = 1
12099  var column = 1
12100  var Tokenizer_length = 0
12101  var position = 0
12102  var character = 0
12103  var characters = ''
12104  
12105  /**
12106   * @param {string} value
12107   * @param {object | null} root
12108   * @param {object | null} parent
12109   * @param {string} type
12110   * @param {string[] | string} props
12111   * @param {object[] | string} children
12112   * @param {number} length
12113   */
12114  function node (value, root, parent, type, props, children, length) {
12115      return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
12116  }
12117  
12118  /**
12119   * @param {object} root
12120   * @param {object} props
12121   * @return {object}
12122   */
12123  function Tokenizer_copy (root, props) {
12124      return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
12125  }
12126  
12127  /**
12128   * @return {number}
12129   */
12130  function Tokenizer_char () {
12131      return character
12132  }
12133  
12134  /**
12135   * @return {number}
12136   */
12137  function prev () {
12138      character = position > 0 ? Utility_charat(characters, --position) : 0
12139  
12140      if (column--, character === 10)
12141          column = 1, line--
12142  
12143      return character
12144  }
12145  
12146  /**
12147   * @return {number}
12148   */
12149  function next () {
12150      character = position < Tokenizer_length ? Utility_charat(characters, position++) : 0
12151  
12152      if (column++, character === 10)
12153          column = 1, line++
12154  
12155      return character
12156  }
12157  
12158  /**
12159   * @return {number}
12160   */
12161  function peek () {
12162      return Utility_charat(characters, position)
12163  }
12164  
12165  /**
12166   * @return {number}
12167   */
12168  function caret () {
12169      return position
12170  }
12171  
12172  /**
12173   * @param {number} begin
12174   * @param {number} end
12175   * @return {string}
12176   */
12177  function slice (begin, end) {
12178      return Utility_substr(characters, begin, end)
12179  }
12180  
12181  /**
12182   * @param {number} type
12183   * @return {number}
12184   */
12185  function token (type) {
12186      switch (type) {
12187          // \0 \t \n \r \s whitespace token
12188          case 0: case 9: case 10: case 13: case 32:
12189              return 5
12190          // ! + , / > @ ~ isolate token
12191          case 33: case 43: case 44: case 47: case 62: case 64: case 126:
12192          // ; { } breakpoint token
12193          case 59: case 123: case 125:
12194              return 4
12195          // : accompanied token
12196          case 58:
12197              return 3
12198          // " ' ( [ opening delimit token
12199          case 34: case 39: case 40: case 91:
12200              return 2
12201          // ) ] closing delimit token
12202          case 41: case 93:
12203              return 1
12204      }
12205  
12206      return 0
12207  }
12208  
12209  /**
12210   * @param {string} value
12211   * @return {any[]}
12212   */
12213  function alloc (value) {
12214      return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), position = 0, []
12215  }
12216  
12217  /**
12218   * @param {any} value
12219   * @return {any}
12220   */
12221  function dealloc (value) {
12222      return characters = '', value
12223  }
12224  
12225  /**
12226   * @param {number} type
12227   * @return {string}
12228   */
12229  function delimit (type) {
12230      return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
12231  }
12232  
12233  /**
12234   * @param {string} value
12235   * @return {string[]}
12236   */
12237  function Tokenizer_tokenize (value) {
12238      return dealloc(tokenizer(alloc(value)))
12239  }
12240  
12241  /**
12242   * @param {number} type
12243   * @return {string}
12244   */
12245  function whitespace (type) {
12246      while (character = peek())
12247          if (character < 33)
12248              next()
12249          else
12250              break
12251  
12252      return token(type) > 2 || token(character) > 3 ? '' : ' '
12253  }
12254  
12255  /**
12256   * @param {string[]} children
12257   * @return {string[]}
12258   */
12259  function tokenizer (children) {
12260      while (next())
12261          switch (token(character)) {
12262              case 0: append(identifier(position - 1), children)
12263                  break
12264              case 2: append(delimit(character), children)
12265                  break
12266              default: append(from(character), children)
12267          }
12268  
12269      return children
12270  }
12271  
12272  /**
12273   * @param {number} index
12274   * @param {number} count
12275   * @return {string}
12276   */
12277  function escaping (index, count) {
12278      while (--count && next())
12279          // not 0-9 A-F a-f
12280          if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
12281              break
12282  
12283      return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
12284  }
12285  
12286  /**
12287   * @param {number} type
12288   * @return {number}
12289   */
12290  function delimiter (type) {
12291      while (next())
12292          switch (character) {
12293              // ] ) " '
12294              case type:
12295                  return position
12296              // " '
12297              case 34: case 39:
12298                  if (type !== 34 && type !== 39)
12299                      delimiter(character)
12300                  break
12301              // (
12302              case 40:
12303                  if (type === 41)
12304                      delimiter(type)
12305                  break
12306              // \
12307              case 92:
12308                  next()
12309                  break
12310          }
12311  
12312      return position
12313  }
12314  
12315  /**
12316   * @param {number} type
12317   * @param {number} index
12318   * @return {number}
12319   */
12320  function commenter (type, index) {
12321      while (next())
12322          // //
12323          if (type + character === 47 + 10)
12324              break
12325          // /*
12326          else if (type + character === 42 + 42 && peek() === 47)
12327              break
12328  
12329      return '/*' + slice(index, position - 1) + '*' + Utility_from(type === 47 ? type : next())
12330  }
12331  
12332  /**
12333   * @param {number} index
12334   * @return {string}
12335   */
12336  function identifier (index) {
12337      while (!token(peek()))
12338          next()
12339  
12340      return slice(index, position)
12341  }
12342  
12343  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js
12344  var Enum_MS = '-ms-'
12345  var Enum_MOZ = '-moz-'
12346  var Enum_WEBKIT = '-webkit-'
12347  
12348  var COMMENT = 'comm'
12349  var Enum_RULESET = 'rule'
12350  var Enum_DECLARATION = 'decl'
12351  
12352  var PAGE = '@page'
12353  var MEDIA = '@media'
12354  var IMPORT = '@import'
12355  var CHARSET = '@charset'
12356  var VIEWPORT = '@viewport'
12357  var SUPPORTS = '@supports'
12358  var DOCUMENT = '@document'
12359  var NAMESPACE = '@namespace'
12360  var Enum_KEYFRAMES = '@keyframes'
12361  var FONT_FACE = '@font-face'
12362  var COUNTER_STYLE = '@counter-style'
12363  var FONT_FEATURE_VALUES = '@font-feature-values'
12364  
12365  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js
12366  
12367  
12368  
12369  /**
12370   * @param {object[]} children
12371   * @param {function} callback
12372   * @return {string}
12373   */
12374  function Serializer_serialize (children, callback) {
12375      var output = ''
12376      var length = Utility_sizeof(children)
12377  
12378      for (var i = 0; i < length; i++)
12379          output += callback(children[i], i, children, callback) || ''
12380  
12381      return output
12382  }
12383  
12384  /**
12385   * @param {object} element
12386   * @param {number} index
12387   * @param {object[]} children
12388   * @param {function} callback
12389   * @return {string}
12390   */
12391  function stringify (element, index, children, callback) {
12392      switch (element.type) {
12393          case IMPORT: case Enum_DECLARATION: return element.return = element.return || element.value
12394          case COMMENT: return ''
12395          case Enum_KEYFRAMES: return element.return = element.value + '{' + Serializer_serialize(element.children, callback) + '}'
12396          case Enum_RULESET: element.value = element.props.join(',')
12397      }
12398  
12399      return Utility_strlen(children = Serializer_serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
12400  }
12401  
12402  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js
12403  
12404  
12405  
12406  
12407  
12408  
12409  /**
12410   * @param {function[]} collection
12411   * @return {function}
12412   */
12413  function middleware (collection) {
12414      var length = Utility_sizeof(collection)
12415  
12416      return function (element, index, children, callback) {
12417          var output = ''
12418  
12419          for (var i = 0; i < length; i++)
12420              output += collection[i](element, index, children, callback) || ''
12421  
12422          return output
12423      }
12424  }
12425  
12426  /**
12427   * @param {function} callback
12428   * @return {function}
12429   */
12430  function rulesheet (callback) {
12431      return function (element) {
12432          if (!element.root)
12433              if (element = element.return)
12434                  callback(element)
12435      }
12436  }
12437  
12438  /**
12439   * @param {object} element
12440   * @param {number} index
12441   * @param {object[]} children
12442   * @param {function} callback
12443   */
12444  function prefixer (element, index, children, callback) {
12445      if (element.length > -1)
12446          if (!element.return)
12447              switch (element.type) {
12448                  case DECLARATION: element.return = prefix(element.value, element.length, children)
12449                      return
12450                  case KEYFRAMES:
12451                      return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)
12452                  case RULESET:
12453                      if (element.length)
12454                          return combine(element.props, function (value) {
12455                              switch (match(value, /(::plac\w+|:read-\w+)/)) {
12456                                  // :read-(only|write)
12457                                  case ':read-only': case ':read-write':
12458                                      return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback)
12459                                  // :placeholder
12460                                  case '::placeholder':
12461                                      return serialize([
12462                                          copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}),
12463                                          copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}),
12464                                          copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]})
12465                                      ], callback)
12466                              }
12467  
12468                              return ''
12469                          })
12470              }
12471  }
12472  
12473  /**
12474   * @param {object} element
12475   * @param {number} index
12476   * @param {object[]} children
12477   */
12478  function namespace (element) {
12479      switch (element.type) {
12480          case RULESET:
12481              element.props = element.props.map(function (value) {
12482                  return combine(tokenize(value), function (value, index, children) {
12483                      switch (charat(value, 0)) {
12484                          // \f
12485                          case 12:
12486                              return substr(value, 1, strlen(value))
12487                          // \0 ( + > ~
12488                          case 0: case 40: case 43: case 62: case 126:
12489                              return value
12490                          // :
12491                          case 58:
12492                              if (children[++index] === 'global')
12493                                  children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1)
12494                          // \s
12495                          case 32:
12496                              return index === 1 ? '' : value
12497                          default:
12498                              switch (index) {
12499                                  case 0: element = value
12500                                      return sizeof(children) > 1 ? '' : value
12501                                  case index = sizeof(children) - 1: case 2:
12502                                      return index === 2 ? value + element + element : value + element
12503                                  default:
12504                                      return value
12505                              }
12506                      }
12507                  })
12508              })
12509      }
12510  }
12511  
12512  ;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js
12513  
12514  
12515  
12516  
12517  /**
12518   * @param {string} value
12519   * @return {object[]}
12520   */
12521  function compile (value) {
12522      return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
12523  }
12524  
12525  /**
12526   * @param {string} value
12527   * @param {object} root
12528   * @param {object?} parent
12529   * @param {string[]} rule
12530   * @param {string[]} rules
12531   * @param {string[]} rulesets
12532   * @param {number[]} pseudo
12533   * @param {number[]} points
12534   * @param {string[]} declarations
12535   * @return {object}
12536   */
12537  function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
12538      var index = 0
12539      var offset = 0
12540      var length = pseudo
12541      var atrule = 0
12542      var property = 0
12543      var previous = 0
12544      var variable = 1
12545      var scanning = 1
12546      var ampersand = 1
12547      var character = 0
12548      var type = ''
12549      var props = rules
12550      var children = rulesets
12551      var reference = rule
12552      var characters = type
12553  
12554      while (scanning)
12555          switch (previous = character, character = next()) {
12556              // (
12557              case 40:
12558                  if (previous != 108 && Utility_charat(characters, length - 1) == 58) {
12559                      if (indexof(characters += Utility_replace(delimit(character), '&', '&\f'), '&\f') != -1)
12560                          ampersand = -1
12561                      break
12562                  }
12563              // " ' [
12564              case 34: case 39: case 91:
12565                  characters += delimit(character)
12566                  break
12567              // \t \n \r \s
12568              case 9: case 10: case 13: case 32:
12569                  characters += whitespace(previous)
12570                  break
12571              // \
12572              case 92:
12573                  characters += escaping(caret() - 1, 7)
12574                  continue
12575              // /
12576              case 47:
12577                  switch (peek()) {
12578                      case 42: case 47:
12579                          Utility_append(comment(commenter(next(), caret()), root, parent), declarations)
12580                          break
12581                      default:
12582                          characters += '/'
12583                  }
12584                  break
12585              // {
12586              case 123 * variable:
12587                  points[index++] = Utility_strlen(characters) * ampersand
12588              // } ; \0
12589              case 125 * variable: case 59: case 0:
12590                  switch (character) {
12591                      // \0 }
12592                      case 0: case 125: scanning = 0
12593                      // ;
12594                      case 59 + offset:
12595                          if (property > 0 && (Utility_strlen(characters) - length))
12596                              Utility_append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(Utility_replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)
12597                          break
12598                      // @ ;
12599                      case 59: characters += ';'
12600                      // { rule/at-rule
12601                      default:
12602                          Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)
12603  
12604                          if (character === 123)
12605                              if (offset === 0)
12606                                  parse(characters, root, reference, reference, props, rulesets, length, points, children)
12607                              else
12608                                  switch (atrule === 99 && Utility_charat(characters, 3) === 110 ? 100 : atrule) {
12609                                      // d m s
12610                                      case 100: case 109: case 115:
12611                                          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)
12612                                          break
12613                                      default:
12614                                          parse(characters, reference, reference, reference, [''], children, 0, points, children)
12615                                  }
12616                  }
12617  
12618                  index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo
12619                  break
12620              // :
12621              case 58:
12622                  length = 1 + Utility_strlen(characters), property = previous
12623              default:
12624                  if (variable < 1)
12625                      if (character == 123)
12626                          --variable
12627                      else if (character == 125 && variable++ == 0 && prev() == 125)
12628                          continue
12629  
12630                  switch (characters += Utility_from(character), character * variable) {
12631                      // &
12632                      case 38:
12633                          ampersand = offset > 0 ? 1 : (characters += '\f', -1)
12634                          break
12635                      // ,
12636                      case 44:
12637                          points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1
12638                          break
12639                      // @
12640                      case 64:
12641                          // -
12642                          if (peek() === 45)
12643                              characters += delimit(next())
12644  
12645                          atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++
12646                          break
12647                      // -
12648                      case 45:
12649                          if (previous === 45 && Utility_strlen(characters) == 2)
12650                              variable = 0
12651                  }
12652          }
12653  
12654      return rulesets
12655  }
12656  
12657  /**
12658   * @param {string} value
12659   * @param {object} root
12660   * @param {object?} parent
12661   * @param {number} index
12662   * @param {number} offset
12663   * @param {string[]} rules
12664   * @param {number[]} points
12665   * @param {string} type
12666   * @param {string[]} props
12667   * @param {string[]} children
12668   * @param {number} length
12669   * @return {object}
12670   */
12671  function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
12672      var post = offset - 1
12673      var rule = offset === 0 ? rules : ['']
12674      var size = Utility_sizeof(rule)
12675  
12676      for (var i = 0, j = 0, k = 0; i < index; ++i)
12677          for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
12678              if (z = trim(j > 0 ? rule[x] + ' ' + y : Utility_replace(y, /&\f/g, rule[x])))
12679                  props[k++] = z
12680  
12681      return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length)
12682  }
12683  
12684  /**
12685   * @param {number} value
12686   * @param {object} root
12687   * @param {object?} parent
12688   * @return {object}
12689   */
12690  function comment (value, root, parent) {
12691      return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0)
12692  }
12693  
12694  /**
12695   * @param {string} value
12696   * @param {object} root
12697   * @param {object?} parent
12698   * @param {number} length
12699   * @return {object}
12700   */
12701  function declaration (value, root, parent, length) {
12702      return node(value, root, parent, Enum_DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length)
12703  }
12704  
12705  ;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
12706  
12707  
12708  
12709  
12710  
12711  var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
12712    var previous = 0;
12713    var character = 0;
12714  
12715    while (true) {
12716      previous = character;
12717      character = peek(); // &\f
12718  
12719      if (previous === 38 && character === 12) {
12720        points[index] = 1;
12721      }
12722  
12723      if (token(character)) {
12724        break;
12725      }
12726  
12727      next();
12728    }
12729  
12730    return slice(begin, position);
12731  };
12732  
12733  var toRules = function toRules(parsed, points) {
12734    // pretend we've started with a comma
12735    var index = -1;
12736    var character = 44;
12737  
12738    do {
12739      switch (token(character)) {
12740        case 0:
12741          // &\f
12742          if (character === 38 && peek() === 12) {
12743            // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
12744            // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
12745            // and when it should just concatenate the outer and inner selectors
12746            // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
12747            points[index] = 1;
12748          }
12749  
12750          parsed[index] += identifierWithPointTracking(position - 1, points, index);
12751          break;
12752  
12753        case 2:
12754          parsed[index] += delimit(character);
12755          break;
12756  
12757        case 4:
12758          // comma
12759          if (character === 44) {
12760            // colon
12761            parsed[++index] = peek() === 58 ? '&\f' : '';
12762            points[index] = parsed[index].length;
12763            break;
12764          }
12765  
12766        // fallthrough
12767  
12768        default:
12769          parsed[index] += Utility_from(character);
12770      }
12771    } while (character = next());
12772  
12773    return parsed;
12774  };
12775  
12776  var getRules = function getRules(value, points) {
12777    return dealloc(toRules(alloc(value), points));
12778  }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
12779  
12780  
12781  var fixedElements = /* #__PURE__ */new WeakMap();
12782  var compat = function compat(element) {
12783    if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
12784    // negative .length indicates that this rule has been already prefixed
12785    element.length < 1) {
12786      return;
12787    }
12788  
12789    var value = element.value,
12790        parent = element.parent;
12791    var isImplicitRule = element.column === parent.column && element.line === parent.line;
12792  
12793    while (parent.type !== 'rule') {
12794      parent = parent.parent;
12795      if (!parent) return;
12796    } // short-circuit for the simplest case
12797  
12798  
12799    if (element.props.length === 1 && value.charCodeAt(0) !== 58
12800    /* colon */
12801    && !fixedElements.get(parent)) {
12802      return;
12803    } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
12804    // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
12805  
12806  
12807    if (isImplicitRule) {
12808      return;
12809    }
12810  
12811    fixedElements.set(element, true);
12812    var points = [];
12813    var rules = getRules(value, points);
12814    var parentRules = parent.props;
12815  
12816    for (var i = 0, k = 0; i < rules.length; i++) {
12817      for (var j = 0; j < parentRules.length; j++, k++) {
12818        element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
12819      }
12820    }
12821  };
12822  var removeLabel = function removeLabel(element) {
12823    if (element.type === 'decl') {
12824      var value = element.value;
12825  
12826      if ( // charcode for l
12827      value.charCodeAt(0) === 108 && // charcode for b
12828      value.charCodeAt(2) === 98) {
12829        // this ignores label
12830        element["return"] = '';
12831        element.value = '';
12832      }
12833    }
12834  };
12835  var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
12836  
12837  var isIgnoringComment = function isIgnoringComment(element) {
12838    return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
12839  };
12840  
12841  var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
12842    return function (element, index, children) {
12843      if (element.type !== 'rule' || cache.compat) return;
12844      var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
12845  
12846      if (unsafePseudoClasses) {
12847        var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
12848        //
12849        // considering this input:
12850        // .a {
12851        //   .b /* comm */ {}
12852        //   color: hotpink;
12853        // }
12854        // we get output corresponding to this:
12855        // .a {
12856        //   & {
12857        //     /* comm */
12858        //     color: hotpink;
12859        //   }
12860        //   .b {}
12861        // }
12862  
12863        var commentContainer = isNested ? children[0].children : // global rule at the root level
12864        children;
12865  
12866        for (var i = commentContainer.length - 1; i >= 0; i--) {
12867          var node = commentContainer[i];
12868  
12869          if (node.line < element.line) {
12870            break;
12871          } // it is quite weird but comments are *usually* put at `column: element.column - 1`
12872          // so we seek *from the end* for the node that is earlier than the rule's `element` and check that
12873          // this will also match inputs like this:
12874          // .a {
12875          //   /* comm */
12876          //   .b {}
12877          // }
12878          //
12879          // but that is fine
12880          //
12881          // it would be the easiest to change the placement of the comment to be the first child of the rule:
12882          // .a {
12883          //   .b { /* comm */ }
12884          // }
12885          // with such inputs we wouldn't have to search for the comment at all
12886          // TODO: consider changing this comment placement in the next major version
12887  
12888  
12889          if (node.column < element.column) {
12890            if (isIgnoringComment(node)) {
12891              return;
12892            }
12893  
12894            break;
12895          }
12896        }
12897  
12898        unsafePseudoClasses.forEach(function (unsafePseudoClass) {
12899          console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
12900        });
12901      }
12902    };
12903  };
12904  
12905  var isImportRule = function isImportRule(element) {
12906    return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
12907  };
12908  
12909  var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
12910    for (var i = index - 1; i >= 0; i--) {
12911      if (!isImportRule(children[i])) {
12912        return true;
12913      }
12914    }
12915  
12916    return false;
12917  }; // use this to remove incorrect elements from further processing
12918  // so they don't get handed to the `sheet` (or anything else)
12919  // as that could potentially lead to additional logs which in turn could be overhelming to the user
12920  
12921  
12922  var nullifyElement = function nullifyElement(element) {
12923    element.type = '';
12924    element.value = '';
12925    element["return"] = '';
12926    element.children = '';
12927    element.props = '';
12928  };
12929  
12930  var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
12931    if (!isImportRule(element)) {
12932      return;
12933    }
12934  
12935    if (element.parent) {
12936      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.");
12937      nullifyElement(element);
12938    } else if (isPrependedWithRegularRules(index, children)) {
12939      console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
12940      nullifyElement(element);
12941    }
12942  };
12943  
12944  /* eslint-disable no-fallthrough */
12945  
12946  function emotion_cache_browser_esm_prefix(value, length) {
12947    switch (hash(value, length)) {
12948      // color-adjust
12949      case 5103:
12950        return Enum_WEBKIT + 'print-' + value + value;
12951      // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
12952  
12953      case 5737:
12954      case 4201:
12955      case 3177:
12956      case 3433:
12957      case 1641:
12958      case 4457:
12959      case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
12960  
12961      case 5572:
12962      case 6356:
12963      case 5844:
12964      case 3191:
12965      case 6645:
12966      case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
12967  
12968      case 6391:
12969      case 5879:
12970      case 5623:
12971      case 6135:
12972      case 4599:
12973      case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
12974  
12975      case 4215:
12976      case 6389:
12977      case 5109:
12978      case 5365:
12979      case 5621:
12980      case 3829:
12981        return Enum_WEBKIT + value + value;
12982      // appearance, user-select, transform, hyphens, text-size-adjust
12983  
12984      case 5349:
12985      case 4246:
12986      case 4810:
12987      case 6968:
12988      case 2756:
12989        return Enum_WEBKIT + value + Enum_MOZ + value + Enum_MS + value + value;
12990      // flex, flex-direction
12991  
12992      case 6828:
12993      case 4268:
12994        return Enum_WEBKIT + value + Enum_MS + value + value;
12995      // order
12996  
12997      case 6165:
12998        return Enum_WEBKIT + value + Enum_MS + 'flex-' + value + value;
12999      // align-items
13000  
13001      case 5187:
13002        return Enum_WEBKIT + value + Utility_replace(value, /(\w+).+(:[^]+)/, Enum_WEBKIT + 'box-$1$2' + Enum_MS + 'flex-$1$2') + value;
13003      // align-self
13004  
13005      case 5443:
13006        return Enum_WEBKIT + value + Enum_MS + 'flex-item-' + Utility_replace(value, /flex-|-self/, '') + value;
13007      // align-content
13008  
13009      case 4675:
13010        return Enum_WEBKIT + value + Enum_MS + 'flex-line-pack' + Utility_replace(value, /align-content|flex-|-self/, '') + value;
13011      // flex-shrink
13012  
13013      case 5548:
13014        return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'shrink', 'negative') + value;
13015      // flex-basis
13016  
13017      case 5292:
13018        return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'basis', 'preferred-size') + value;
13019      // flex-grow
13020  
13021      case 6060:
13022        return Enum_WEBKIT + 'box-' + Utility_replace(value, '-grow', '') + Enum_WEBKIT + value + Enum_MS + Utility_replace(value, 'grow', 'positive') + value;
13023      // transition
13024  
13025      case 4554:
13026        return Enum_WEBKIT + Utility_replace(value, /([^-])(transform)/g, '$1' + Enum_WEBKIT + '$2') + value;
13027      // cursor
13028  
13029      case 6187:
13030        return Utility_replace(Utility_replace(Utility_replace(value, /(zoom-|grab)/, Enum_WEBKIT + '$1'), /(image-set)/, Enum_WEBKIT + '$1'), value, '') + value;
13031      // background, background-image
13032  
13033      case 5495:
13034      case 3959:
13035        return Utility_replace(value, /(image-set\([^]*)/, Enum_WEBKIT + '$1' + '$`$1');
13036      // justify-content
13037  
13038      case 4968:
13039        return Utility_replace(Utility_replace(value, /(.+:)(flex-)?(.*)/, Enum_WEBKIT + 'box-pack:$3' + Enum_MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + Enum_WEBKIT + value + value;
13040      // (margin|padding)-inline-(start|end)
13041  
13042      case 4095:
13043      case 3583:
13044      case 4068:
13045      case 2532:
13046        return Utility_replace(value, /(.+)-inline(.+)/, Enum_WEBKIT + '$1$2') + value;
13047      // (min|max)?(width|height|inline-size|block-size)
13048  
13049      case 8116:
13050      case 7059:
13051      case 5753:
13052      case 5535:
13053      case 5445:
13054      case 5701:
13055      case 4933:
13056      case 4677:
13057      case 5533:
13058      case 5789:
13059      case 5021:
13060      case 4765:
13061        // stretch, max-content, min-content, fill-available
13062        if (Utility_strlen(value) - 1 - length > 6) switch (Utility_charat(value, length + 1)) {
13063          // (m)ax-content, (m)in-content
13064          case 109:
13065            // -
13066            if (Utility_charat(value, length + 4) !== 45) break;
13067          // (f)ill-available, (f)it-content
13068  
13069          case 102:
13070            return Utility_replace(value, /(.+:)(.+)-([^]+)/, '$1' + Enum_WEBKIT + '$2-$3' + '$1' + Enum_MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
13071          // (s)tretch
13072  
13073          case 115:
13074            return ~indexof(value, 'stretch') ? emotion_cache_browser_esm_prefix(Utility_replace(value, 'stretch', 'fill-available'), length) + value : value;
13075        }
13076        break;
13077      // position: sticky
13078  
13079      case 4949:
13080        // (s)ticky?
13081        if (Utility_charat(value, length + 1) !== 115) break;
13082      // display: (flex|inline-flex)
13083  
13084      case 6444:
13085        switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
13086          // stic(k)y
13087          case 107:
13088            return Utility_replace(value, ':', ':' + Enum_WEBKIT) + value;
13089          // (inline-)?fl(e)x
13090  
13091          case 101:
13092            return Utility_replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + Enum_WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + Enum_WEBKIT + '$2$3' + '$1' + Enum_MS + '$2box$3') + value;
13093        }
13094  
13095        break;
13096      // writing-mode
13097  
13098      case 5936:
13099        switch (Utility_charat(value, length + 11)) {
13100          // vertical-l(r)
13101          case 114:
13102            return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
13103          // vertical-r(l)
13104  
13105          case 108:
13106            return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
13107          // horizontal(-)tb
13108  
13109          case 45:
13110            return Enum_WEBKIT + value + Enum_MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
13111        }
13112  
13113        return Enum_WEBKIT + value + Enum_MS + value + value;
13114    }
13115  
13116    return value;
13117  }
13118  
13119  var emotion_cache_browser_esm_prefixer = function prefixer(element, index, children, callback) {
13120    if (element.length > -1) if (!element["return"]) switch (element.type) {
13121      case Enum_DECLARATION:
13122        element["return"] = emotion_cache_browser_esm_prefix(element.value, element.length);
13123        break;
13124  
13125      case Enum_KEYFRAMES:
13126        return Serializer_serialize([Tokenizer_copy(element, {
13127          value: Utility_replace(element.value, '@', '@' + Enum_WEBKIT)
13128        })], callback);
13129  
13130      case Enum_RULESET:
13131        if (element.length) return Utility_combine(element.props, function (value) {
13132          switch (Utility_match(value, /(::plac\w+|:read-\w+)/)) {
13133            // :read-(only|write)
13134            case ':read-only':
13135            case ':read-write':
13136              return Serializer_serialize([Tokenizer_copy(element, {
13137                props: [Utility_replace(value, /:(read-\w+)/, ':' + Enum_MOZ + '$1')]
13138              })], callback);
13139            // :placeholder
13140  
13141            case '::placeholder':
13142              return Serializer_serialize([Tokenizer_copy(element, {
13143                props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_WEBKIT + 'input-$1')]
13144              }), Tokenizer_copy(element, {
13145                props: [Utility_replace(value, /:(plac\w+)/, ':' + Enum_MOZ + '$1')]
13146              }), Tokenizer_copy(element, {
13147                props: [Utility_replace(value, /:(plac\w+)/, Enum_MS + 'input-$1')]
13148              })], callback);
13149          }
13150  
13151          return '';
13152        });
13153    }
13154  };
13155  
13156  var defaultStylisPlugins = [emotion_cache_browser_esm_prefixer];
13157  
13158  var createCache = function createCache(options) {
13159    var key = options.key;
13160  
13161    if (false) {}
13162  
13163    if ( key === 'css') {
13164      var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
13165      // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
13166      // note this very very intentionally targets all style elements regardless of the key to ensure
13167      // that creating a cache works inside of render of a React component
13168  
13169      Array.prototype.forEach.call(ssrStyles, function (node) {
13170        // we want to only move elements which have a space in the data-emotion attribute value
13171        // because that indicates that it is an Emotion 11 server-side rendered style elements
13172        // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
13173        // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
13174        // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
13175        // will not result in the Emotion 10 styles being destroyed
13176        var dataEmotionAttribute = node.getAttribute('data-emotion');
13177  
13178        if (dataEmotionAttribute.indexOf(' ') === -1) {
13179          return;
13180        }
13181        document.head.appendChild(node);
13182        node.setAttribute('data-s', '');
13183      });
13184    }
13185  
13186    var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
13187  
13188    if (false) {}
13189  
13190    var inserted = {};
13191    var container;
13192    var nodesToHydrate = [];
13193  
13194    {
13195      container = options.container || document.head;
13196      Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
13197      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
13198      document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
13199        var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe
13200  
13201        for (var i = 1; i < attrib.length; i++) {
13202          inserted[attrib[i]] = true;
13203        }
13204  
13205        nodesToHydrate.push(node);
13206      });
13207    }
13208  
13209    var _insert;
13210  
13211    var omnipresentPlugins = [compat, removeLabel];
13212  
13213    if (false) {}
13214  
13215    {
13216      var currentSheet;
13217      var finalizingPlugins = [stringify,  false ? 0 : rulesheet(function (rule) {
13218        currentSheet.insert(rule);
13219      })];
13220      var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
13221  
13222      var stylis = function stylis(styles) {
13223        return Serializer_serialize(compile(styles), serializer);
13224      };
13225  
13226      _insert = function insert(selector, serialized, sheet, shouldCache) {
13227        currentSheet = sheet;
13228  
13229        if (false) {}
13230  
13231        stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
13232  
13233        if (shouldCache) {
13234          cache.inserted[serialized.name] = true;
13235        }
13236      };
13237    }
13238  
13239    var cache = {
13240      key: key,
13241      sheet: new StyleSheet({
13242        key: key,
13243        container: container,
13244        nonce: options.nonce,
13245        speedy: options.speedy,
13246        prepend: options.prepend,
13247        insertionPoint: options.insertionPoint
13248      }),
13249      nonce: options.nonce,
13250      inserted: inserted,
13251      registered: {},
13252      insert: _insert
13253    };
13254    cache.sheet.hydrate(nodesToHydrate);
13255    return cache;
13256  };
13257  
13258  /* harmony default export */ const emotion_cache_browser_esm = (createCache);
13259  
13260  ;// CONCATENATED MODULE: ./node_modules/@emotion/hash/dist/emotion-hash.esm.js
13261  /* eslint-disable */
13262  // Inspired by https://github.com/garycourt/murmurhash-js
13263  // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
13264  function murmur2(str) {
13265    // 'm' and 'r' are mixing constants generated offline.
13266    // They're not really 'magic', they just happen to work well.
13267    // const m = 0x5bd1e995;
13268    // const r = 24;
13269    // Initialize the hash
13270    var h = 0; // Mix 4 bytes at a time into the hash
13271  
13272    var k,
13273        i = 0,
13274        len = str.length;
13275  
13276    for (; len >= 4; ++i, len -= 4) {
13277      k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
13278      k =
13279      /* Math.imul(k, m): */
13280      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
13281      k ^=
13282      /* k >>> r: */
13283      k >>> 24;
13284      h =
13285      /* Math.imul(k, m): */
13286      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
13287      /* Math.imul(h, m): */
13288      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
13289    } // Handle the last few bytes of the input array
13290  
13291  
13292    switch (len) {
13293      case 3:
13294        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
13295  
13296      case 2:
13297        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
13298  
13299      case 1:
13300        h ^= str.charCodeAt(i) & 0xff;
13301        h =
13302        /* Math.imul(h, m): */
13303        (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
13304    } // Do a few final mixes of the hash to ensure the last few
13305    // bytes are well-incorporated.
13306  
13307  
13308    h ^= h >>> 13;
13309    h =
13310    /* Math.imul(h, m): */
13311    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
13312    return ((h ^ h >>> 15) >>> 0).toString(36);
13313  }
13314  
13315  /* harmony default export */ const emotion_hash_esm = (murmur2);
13316  
13317  ;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
13318  var unitlessKeys = {
13319    animationIterationCount: 1,
13320    borderImageOutset: 1,
13321    borderImageSlice: 1,
13322    borderImageWidth: 1,
13323    boxFlex: 1,
13324    boxFlexGroup: 1,
13325    boxOrdinalGroup: 1,
13326    columnCount: 1,
13327    columns: 1,
13328    flex: 1,
13329    flexGrow: 1,
13330    flexPositive: 1,
13331    flexShrink: 1,
13332    flexNegative: 1,
13333    flexOrder: 1,
13334    gridRow: 1,
13335    gridRowEnd: 1,
13336    gridRowSpan: 1,
13337    gridRowStart: 1,
13338    gridColumn: 1,
13339    gridColumnEnd: 1,
13340    gridColumnSpan: 1,
13341    gridColumnStart: 1,
13342    msGridRow: 1,
13343    msGridRowSpan: 1,
13344    msGridColumn: 1,
13345    msGridColumnSpan: 1,
13346    fontWeight: 1,
13347    lineHeight: 1,
13348    opacity: 1,
13349    order: 1,
13350    orphans: 1,
13351    tabSize: 1,
13352    widows: 1,
13353    zIndex: 1,
13354    zoom: 1,
13355    WebkitLineClamp: 1,
13356    // SVG-related properties
13357    fillOpacity: 1,
13358    floodOpacity: 1,
13359    stopOpacity: 1,
13360    strokeDasharray: 1,
13361    strokeDashoffset: 1,
13362    strokeMiterlimit: 1,
13363    strokeOpacity: 1,
13364    strokeWidth: 1
13365  };
13366  
13367  /* harmony default export */ const emotion_unitless_esm = (unitlessKeys);
13368  
13369  ;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
13370  function memoize(fn) {
13371    var cache = Object.create(null);
13372    return function (arg) {
13373      if (cache[arg] === undefined) cache[arg] = fn(arg);
13374      return cache[arg];
13375    };
13376  }
13377  
13378  
13379  
13380  ;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
13381  
13382  
13383  
13384  
13385  var 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";
13386  var 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).";
13387  var hyphenateRegex = /[A-Z]|^ms/g;
13388  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
13389  
13390  var isCustomProperty = function isCustomProperty(property) {
13391    return property.charCodeAt(1) === 45;
13392  };
13393  
13394  var isProcessableValue = function isProcessableValue(value) {
13395    return value != null && typeof value !== 'boolean';
13396  };
13397  
13398  var processStyleName = /* #__PURE__ */memoize(function (styleName) {
13399    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
13400  });
13401  
13402  var processStyleValue = function processStyleValue(key, value) {
13403    switch (key) {
13404      case 'animation':
13405      case 'animationName':
13406        {
13407          if (typeof value === 'string') {
13408            return value.replace(animationRegex, function (match, p1, p2) {
13409              cursor = {
13410                name: p1,
13411                styles: p2,
13412                next: cursor
13413              };
13414              return p1;
13415            });
13416          }
13417        }
13418    }
13419  
13420    if (emotion_unitless_esm[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
13421      return value + 'px';
13422    }
13423  
13424    return value;
13425  };
13426  
13427  if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; }
13428  
13429  var 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.'));
13430  
13431  function handleInterpolation(mergedProps, registered, interpolation) {
13432    if (interpolation == null) {
13433      return '';
13434    }
13435  
13436    if (interpolation.__emotion_styles !== undefined) {
13437      if (false) {}
13438  
13439      return interpolation;
13440    }
13441  
13442    switch (typeof interpolation) {
13443      case 'boolean':
13444        {
13445          return '';
13446        }
13447  
13448      case 'object':
13449        {
13450          if (interpolation.anim === 1) {
13451            cursor = {
13452              name: interpolation.name,
13453              styles: interpolation.styles,
13454              next: cursor
13455            };
13456            return interpolation.name;
13457          }
13458  
13459          if (interpolation.styles !== undefined) {
13460            var next = interpolation.next;
13461  
13462            if (next !== undefined) {
13463              // not the most efficient thing ever but this is a pretty rare case
13464              // and there will be very few iterations of this generally
13465              while (next !== undefined) {
13466                cursor = {
13467                  name: next.name,
13468                  styles: next.styles,
13469                  next: cursor
13470                };
13471                next = next.next;
13472              }
13473            }
13474  
13475            var styles = interpolation.styles + ";";
13476  
13477            if (false) {}
13478  
13479            return styles;
13480          }
13481  
13482          return createStringFromObject(mergedProps, registered, interpolation);
13483        }
13484  
13485      case 'function':
13486        {
13487          if (mergedProps !== undefined) {
13488            var previousCursor = cursor;
13489            var result = interpolation(mergedProps);
13490            cursor = previousCursor;
13491            return handleInterpolation(mergedProps, registered, result);
13492          } else if (false) {}
13493  
13494          break;
13495        }
13496  
13497      case 'string':
13498        if (false) { var replaced, matched; }
13499  
13500        break;
13501    } // finalize string values (regular strings and functions interpolated into css calls)
13502  
13503  
13504    if (registered == null) {
13505      return interpolation;
13506    }
13507  
13508    var cached = registered[interpolation];
13509    return cached !== undefined ? cached : interpolation;
13510  }
13511  
13512  function createStringFromObject(mergedProps, registered, obj) {
13513    var string = '';
13514  
13515    if (Array.isArray(obj)) {
13516      for (var i = 0; i < obj.length; i++) {
13517        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
13518      }
13519    } else {
13520      for (var _key in obj) {
13521        var value = obj[_key];
13522  
13523        if (typeof value !== 'object') {
13524          if (registered != null && registered[value] !== undefined) {
13525            string += _key + "{" + registered[value] + "}";
13526          } else if (isProcessableValue(value)) {
13527            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
13528          }
13529        } else {
13530          if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {}
13531  
13532          if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
13533            for (var _i = 0; _i < value.length; _i++) {
13534              if (isProcessableValue(value[_i])) {
13535                string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
13536              }
13537            }
13538          } else {
13539            var interpolated = handleInterpolation(mergedProps, registered, value);
13540  
13541            switch (_key) {
13542              case 'animation':
13543              case 'animationName':
13544                {
13545                  string += processStyleName(_key) + ":" + interpolated + ";";
13546                  break;
13547                }
13548  
13549              default:
13550                {
13551                  if (false) {}
13552  
13553                  string += _key + "{" + interpolated + "}";
13554                }
13555            }
13556          }
13557        }
13558      }
13559    }
13560  
13561    return string;
13562  }
13563  
13564  var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
13565  var sourceMapPattern;
13566  
13567  if (false) {} // this is the cursor for keyframes
13568  // keyframes are stored on the SerializedStyles object as a linked list
13569  
13570  
13571  var cursor;
13572  var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) {
13573    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
13574      return args[0];
13575    }
13576  
13577    var stringMode = true;
13578    var styles = '';
13579    cursor = undefined;
13580    var strings = args[0];
13581  
13582    if (strings == null || strings.raw === undefined) {
13583      stringMode = false;
13584      styles += handleInterpolation(mergedProps, registered, strings);
13585    } else {
13586      if (false) {}
13587  
13588      styles += strings[0];
13589    } // we start at 1 since we've already handled the first arg
13590  
13591  
13592    for (var i = 1; i < args.length; i++) {
13593      styles += handleInterpolation(mergedProps, registered, args[i]);
13594  
13595      if (stringMode) {
13596        if (false) {}
13597  
13598        styles += strings[i];
13599      }
13600    }
13601  
13602    var sourceMap;
13603  
13604    if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time
13605  
13606  
13607    labelPattern.lastIndex = 0;
13608    var identifierName = '';
13609    var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
13610  
13611    while ((match = labelPattern.exec(styles)) !== null) {
13612      identifierName += '-' + // $FlowFixMe we know it's not null
13613      match[1];
13614    }
13615  
13616    var name = emotion_hash_esm(styles) + identifierName;
13617  
13618    if (false) {}
13619  
13620    return {
13621      name: name,
13622      styles: styles,
13623      next: cursor
13624    };
13625  };
13626  
13627  
13628  
13629  ;// CONCATENATED MODULE: ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
13630  
13631  
13632  
13633  var syncFallback = function syncFallback(create) {
13634    return create();
13635  };
13636  
13637  var useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : false;
13638  var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback =  useInsertionEffect || syncFallback;
13639  var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectWithLayoutFallback = (/* unused pure expression or super */ null && (useInsertionEffect || useLayoutEffect));
13640  
13641  
13642  
13643  ;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js
13644  
13645  
13646  
13647  
13648  
13649  
13650  
13651  
13652  
13653  var emotion_element_6a883da9_browser_esm_hasOwnProperty = {}.hasOwnProperty;
13654  
13655  var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case
13656  // because this module is primarily intended for the browser and node
13657  // but it's also required in react native and similar environments sometimes
13658  // and we could have a special build just for that
13659  // but this is much easier and the native packages
13660  // might use a different theme context in the future anyway
13661  typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({
13662    key: 'css'
13663  }) : null);
13664  
13665  if (false) {}
13666  
13667  var CacheProvider = EmotionCacheContext.Provider;
13668  var __unsafe_useEmotionCache = function useEmotionCache() {
13669    return (0,external_React_.useContext)(EmotionCacheContext);
13670  };
13671  
13672  var emotion_element_6a883da9_browser_esm_withEmotionCache = function withEmotionCache(func) {
13673    // $FlowFixMe
13674    return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) {
13675      // the cache will never be null in the browser
13676      var cache = (0,external_React_.useContext)(EmotionCacheContext);
13677      return func(props, cache, ref);
13678    });
13679  };
13680  
13681  var emotion_element_6a883da9_browser_esm_ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({});
13682  
13683  if (false) {}
13684  
13685  var useTheme = function useTheme() {
13686    return useContext(emotion_element_6a883da9_browser_esm_ThemeContext);
13687  };
13688  
13689  var getTheme = function getTheme(outerTheme, theme) {
13690    if (typeof theme === 'function') {
13691      var mergedTheme = theme(outerTheme);
13692  
13693      if (false) {}
13694  
13695      return mergedTheme;
13696    }
13697  
13698    if (false) {}
13699  
13700    return _extends({}, outerTheme, theme);
13701  };
13702  
13703  var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) {
13704    return weakMemoize(function (theme) {
13705      return getTheme(outerTheme, theme);
13706    });
13707  })));
13708  var ThemeProvider = function ThemeProvider(props) {
13709    var theme = useContext(emotion_element_6a883da9_browser_esm_ThemeContext);
13710  
13711    if (props.theme !== theme) {
13712      theme = createCacheWithTheme(theme)(props.theme);
13713    }
13714  
13715    return /*#__PURE__*/createElement(emotion_element_6a883da9_browser_esm_ThemeContext.Provider, {
13716      value: theme
13717    }, props.children);
13718  };
13719  function withTheme(Component) {
13720    var componentName = Component.displayName || Component.name || 'Component';
13721  
13722    var render = function render(props, ref) {
13723      var theme = useContext(emotion_element_6a883da9_browser_esm_ThemeContext);
13724      return /*#__PURE__*/createElement(Component, _extends({
13725        theme: theme,
13726        ref: ref
13727      }, props));
13728    }; // $FlowFixMe
13729  
13730  
13731    var WithTheme = /*#__PURE__*/forwardRef(render);
13732    WithTheme.displayName = "WithTheme(" + componentName + ")";
13733    return hoistNonReactStatics(WithTheme, Component);
13734  }
13735  
13736  var getLastPart = function getLastPart(functionName) {
13737    // The match may be something like 'Object.createEmotionProps' or
13738    // 'Loader.prototype.render'
13739    var parts = functionName.split('.');
13740    return parts[parts.length - 1];
13741  };
13742  
13743  var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
13744    // V8
13745    var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
13746    if (match) return getLastPart(match[1]); // Safari / Firefox
13747  
13748    match = /^([A-Za-z0-9$.]+)@/.exec(line);
13749    if (match) return getLastPart(match[1]);
13750    return undefined;
13751  };
13752  
13753  var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
13754  // identifiers, thus we only need to replace what is a valid character for JS,
13755  // but not for CSS.
13756  
13757  var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
13758    return identifier.replace(/\$/g, '-');
13759  };
13760  
13761  var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
13762    if (!stackTrace) return undefined;
13763    var lines = stackTrace.split('\n');
13764  
13765    for (var i = 0; i < lines.length; i++) {
13766      var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
13767  
13768      if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
13769  
13770      if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
13771      // uppercase letter
13772  
13773      if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
13774    }
13775  
13776    return undefined;
13777  };
13778  
13779  var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
13780  var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
13781  var emotion_element_6a883da9_browser_esm_createEmotionProps = function createEmotionProps(type, props) {
13782    if (false) {}
13783  
13784    var newProps = {};
13785  
13786    for (var key in props) {
13787      if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key)) {
13788        newProps[key] = props[key];
13789      }
13790    }
13791  
13792    newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
13793    // the label hasn't already been computed
13794  
13795    if (false) { var label; }
13796  
13797    return newProps;
13798  };
13799  
13800  var Insertion = function Insertion(_ref) {
13801    var cache = _ref.cache,
13802        serialized = _ref.serialized,
13803        isStringTag = _ref.isStringTag;
13804    registerStyles(cache, serialized, isStringTag);
13805    var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
13806      return insertStyles(cache, serialized, isStringTag);
13807    });
13808  
13809    return null;
13810  };
13811  
13812  var emotion_element_6a883da9_browser_esm_Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (emotion_element_6a883da9_browser_esm_withEmotionCache(function (props, cache, ref) {
13813    var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
13814    // not passing the registered cache to serializeStyles because it would
13815    // make certain babel optimisations not possible
13816  
13817    if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
13818      cssProp = cache.registered[cssProp];
13819    }
13820  
13821    var WrappedComponent = props[typePropName];
13822    var registeredStyles = [cssProp];
13823    var className = '';
13824  
13825    if (typeof props.className === 'string') {
13826      className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
13827    } else if (props.className != null) {
13828      className = props.className + " ";
13829    }
13830  
13831    var serialized = serializeStyles(registeredStyles, undefined, useContext(emotion_element_6a883da9_browser_esm_ThemeContext));
13832  
13833    if (false) { var labelFromStack; }
13834  
13835    className += cache.key + "-" + serialized.name;
13836    var newProps = {};
13837  
13838    for (var key in props) {
13839      if (emotion_element_6a883da9_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) {
13840        newProps[key] = props[key];
13841      }
13842    }
13843  
13844    newProps.ref = ref;
13845    newProps.className = className;
13846    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
13847      cache: cache,
13848      serialized: serialized,
13849      isStringTag: typeof WrappedComponent === 'string'
13850    }), /*#__PURE__*/createElement(WrappedComponent, newProps));
13851  })));
13852  
13853  if (false) {}
13854  
13855  
13856  
13857  ;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
13858  var isBrowser = "object" !== 'undefined';
13859  function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) {
13860    var rawClassName = '';
13861    classNames.split(' ').forEach(function (className) {
13862      if (registered[className] !== undefined) {
13863        registeredStyles.push(registered[className] + ";");
13864      } else {
13865        rawClassName += className + " ";
13866      }
13867    });
13868    return rawClassName;
13869  }
13870  var emotion_utils_browser_esm_registerStyles = function registerStyles(cache, serialized, isStringTag) {
13871    var className = cache.key + "-" + serialized.name;
13872  
13873    if ( // we only need to add the styles to the registered cache if the
13874    // class name could be used further down
13875    // the tree but if it's a string tag, we know it won't
13876    // so we don't have to add it to registered cache.
13877    // this improves memory usage since we can avoid storing the whole style string
13878    (isStringTag === false || // we need to always store it if we're in compat mode and
13879    // in node since emotion-server relies on whether a style is in
13880    // the registered cache to know whether a style is global or not
13881    // also, note that this check will be dead code eliminated in the browser
13882    isBrowser === false ) && cache.registered[className] === undefined) {
13883      cache.registered[className] = serialized.styles;
13884    }
13885  };
13886  var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) {
13887    emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag);
13888    var className = cache.key + "-" + serialized.name;
13889  
13890    if (cache.inserted[serialized.name] === undefined) {
13891      var current = serialized;
13892  
13893      do {
13894        var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
13895  
13896        current = current.next;
13897      } while (current !== undefined);
13898    }
13899  };
13900  
13901  
13902  
13903  ;// CONCATENATED MODULE: ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
13904  
13905  
13906  
13907  
13908  function insertWithoutScoping(cache, serialized) {
13909    if (cache.inserted[serialized.name] === undefined) {
13910      return cache.insert('', serialized, cache.sheet, true);
13911    }
13912  }
13913  
13914  function merge(registered, css, className) {
13915    var registeredStyles = [];
13916    var rawClassName = emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, className);
13917  
13918    if (registeredStyles.length < 2) {
13919      return className;
13920    }
13921  
13922    return rawClassName + css(registeredStyles);
13923  }
13924  
13925  var createEmotion = function createEmotion(options) {
13926    var cache = emotion_cache_browser_esm(options); // $FlowFixMe
13927  
13928    cache.sheet.speedy = function (value) {
13929      if (false) {}
13930  
13931      this.isSpeedy = value;
13932    };
13933  
13934    cache.compat = true;
13935  
13936    var css = function css() {
13937      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
13938        args[_key] = arguments[_key];
13939      }
13940  
13941      var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered, undefined);
13942      emotion_utils_browser_esm_insertStyles(cache, serialized, false);
13943      return cache.key + "-" + serialized.name;
13944    };
13945  
13946    var keyframes = function keyframes() {
13947      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
13948        args[_key2] = arguments[_key2];
13949      }
13950  
13951      var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered);
13952      var animation = "animation-" + serialized.name;
13953      insertWithoutScoping(cache, {
13954        name: serialized.name,
13955        styles: "@keyframes " + animation + "{" + serialized.styles + "}"
13956      });
13957      return animation;
13958    };
13959  
13960    var injectGlobal = function injectGlobal() {
13961      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
13962        args[_key3] = arguments[_key3];
13963      }
13964  
13965      var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered);
13966      insertWithoutScoping(cache, serialized);
13967    };
13968  
13969    var cx = function cx() {
13970      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
13971        args[_key4] = arguments[_key4];
13972      }
13973  
13974      return merge(cache.registered, css, emotion_css_create_instance_esm_classnames(args));
13975    };
13976  
13977    return {
13978      css: css,
13979      cx: cx,
13980      injectGlobal: injectGlobal,
13981      keyframes: keyframes,
13982      hydrate: function hydrate(ids) {
13983        ids.forEach(function (key) {
13984          cache.inserted[key] = true;
13985        });
13986      },
13987      flush: function flush() {
13988        cache.registered = {};
13989        cache.inserted = {};
13990        cache.sheet.flush();
13991      },
13992      // $FlowFixMe
13993      sheet: cache.sheet,
13994      cache: cache,
13995      getRegisteredStyles: emotion_utils_browser_esm_getRegisteredStyles.bind(null, cache.registered),
13996      merge: merge.bind(null, cache.registered, css)
13997    };
13998  };
13999  
14000  var emotion_css_create_instance_esm_classnames = function classnames(args) {
14001    var cls = '';
14002  
14003    for (var i = 0; i < args.length; i++) {
14004      var arg = args[i];
14005      if (arg == null) continue;
14006      var toAdd = void 0;
14007  
14008      switch (typeof arg) {
14009        case 'boolean':
14010          break;
14011  
14012        case 'object':
14013          {
14014            if (Array.isArray(arg)) {
14015              toAdd = classnames(arg);
14016            } else {
14017              toAdd = '';
14018  
14019              for (var k in arg) {
14020                if (arg[k] && k) {
14021                  toAdd && (toAdd += ' ');
14022                  toAdd += k;
14023                }
14024              }
14025            }
14026  
14027            break;
14028          }
14029  
14030        default:
14031          {
14032            toAdd = arg;
14033          }
14034      }
14035  
14036      if (toAdd) {
14037        cls && (cls += ' ');
14038        cls += toAdd;
14039      }
14040    }
14041  
14042    return cls;
14043  };
14044  
14045  /* harmony default export */ const emotion_css_create_instance_esm = (createEmotion);
14046  
14047  ;// CONCATENATED MODULE: ./node_modules/@emotion/css/dist/emotion-css.esm.js
14048  
14049  
14050  
14051  
14052  
14053  var _createEmotion = emotion_css_create_instance_esm({
14054    key: 'css'
14055  }),
14056      flush = _createEmotion.flush,
14057      hydrate = _createEmotion.hydrate,
14058      emotion_css_esm_cx = _createEmotion.cx,
14059      emotion_css_esm_merge = _createEmotion.merge,
14060      emotion_css_esm_getRegisteredStyles = _createEmotion.getRegisteredStyles,
14061      injectGlobal = _createEmotion.injectGlobal,
14062      keyframes = _createEmotion.keyframes,
14063      css = _createEmotion.css,
14064      sheet = _createEmotion.sheet,
14065      cache = _createEmotion.cache;
14066  
14067  
14068  
14069  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-cx.js
14070  /**
14071   * External dependencies
14072   */
14073  
14074  
14075  // eslint-disable-next-line no-restricted-imports
14076  
14077  // eslint-disable-next-line no-restricted-imports
14078  
14079  
14080  /**
14081   * WordPress dependencies
14082   */
14083  
14084  const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined');
14085  
14086  /**
14087   * Retrieve a `cx` function that knows how to handle `SerializedStyles`
14088   * returned by the `@emotion/react` `css` function in addition to what
14089   * `cx` normally knows how to handle. It also hooks into the Emotion
14090   * Cache, allowing `css` calls to work inside iframes.
14091   *
14092   * ```jsx
14093   * import { css } from '@emotion/react';
14094   *
14095   * const styles = css`
14096   *     color: red
14097   * `;
14098   *
14099   * function RedText( { className, ...props } ) {
14100   *     const cx = useCx();
14101   *
14102   *     const classes = cx(styles, className);
14103   *
14104   *     return <span className={classes} {...props} />;
14105   * }
14106   * ```
14107   */
14108  const useCx = () => {
14109    const cache = __unsafe_useEmotionCache();
14110    const cx = (0,external_wp_element_namespaceObject.useCallback)((...classNames) => {
14111      if (cache === null) {
14112        throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context');
14113      }
14114      return emotion_css_esm_cx(...classNames.map(arg => {
14115        if (isSerializedStyles(arg)) {
14116          emotion_utils_browser_esm_insertStyles(cache, arg, false);
14117          return `$cache.key}-$arg.name}`;
14118        }
14119        return arg;
14120      }));
14121    }, [cache]);
14122    return cx;
14123  };
14124  
14125  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/use-context-system.js
14126  /**
14127   * WordPress dependencies
14128   */
14129  
14130  
14131  /**
14132   * Internal dependencies
14133   */
14134  
14135  
14136  
14137  
14138  
14139  /**
14140   * @template TProps
14141   * @typedef {TProps & { className: string }} ConnectedProps
14142   */
14143  
14144  /**
14145   * Custom hook that derives registered props from the Context system.
14146   * These derived props are then consolidated with incoming component props.
14147   *
14148   * @template {{ className?: string }} P
14149   * @param {P}      props     Incoming props from the component.
14150   * @param {string} namespace The namespace to register and to derive context props from.
14151   * @return {ConnectedProps<P>} The connected props.
14152   */
14153  function useContextSystem(props, namespace) {
14154    const contextSystemProps = useComponentsContext();
14155    if (typeof namespace === 'undefined') {
14156       true ? external_wp_warning_default()('useContextSystem: Please provide a namespace') : 0;
14157    }
14158    const contextProps = contextSystemProps?.[namespace] || {};
14159  
14160    /* eslint-disable jsdoc/no-undefined-types */
14161    /** @type {ConnectedProps<P>} */
14162    // @ts-ignore We fill in the missing properties below
14163    const finalComponentProps = {
14164      ...getConnectedNamespace(),
14165      ...getNamespace(namespace)
14166    };
14167    /* eslint-enable jsdoc/no-undefined-types */
14168  
14169    const {
14170      _overrides: overrideProps,
14171      ...otherContextProps
14172    } = contextProps;
14173    const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
14174    const cx = useCx();
14175    const classes = cx(getStyledClassNameFromKey(namespace), props.className);
14176  
14177    // Provides the ability to customize the render of the component.
14178    const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
14179    for (const key in initialMergedProps) {
14180      // @ts-ignore filling in missing props
14181      finalComponentProps[key] = initialMergedProps[key];
14182    }
14183    for (const key in overrideProps) {
14184      // @ts-ignore filling in missing props
14185      finalComponentProps[key] = overrideProps[key];
14186    }
14187  
14188    // Setting an `undefined` explicitly can cause unintended overwrites
14189    // when a `cloneElement()` is involved.
14190    if (rendered !== undefined) {
14191      // @ts-ignore
14192      finalComponentProps.children = rendered;
14193    }
14194    finalComponentProps.className = classes;
14195    return finalComponentProps;
14196  }
14197  
14198  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/context/context-connect.js
14199  /**
14200   * External dependencies
14201   */
14202  
14203  /**
14204   * WordPress dependencies
14205   */
14206  
14207  
14208  
14209  /**
14210   * Internal dependencies
14211   */
14212  
14213  
14214  /**
14215   * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
14216   * within the Context system under a specified namespace.
14217   *
14218   * @param Component The component to register into the Context system.
14219   * @param namespace The namespace to register the component under.
14220   * @return The connected WordPressComponent
14221   */
14222  function contextConnect(Component, namespace) {
14223    return _contextConnect(Component, namespace, {
14224      forwardsRef: true
14225    });
14226  }
14227  
14228  /**
14229   * "Connects" (or registers) a component within the Context system under a specified namespace.
14230   * Does not forward a ref.
14231   *
14232   * @param Component The component to register into the Context system.
14233   * @param namespace The namespace to register the component under.
14234   * @return The connected WordPressComponent
14235   */
14236  function contextConnectWithoutRef(Component, namespace) {
14237    return _contextConnect(Component, namespace);
14238  }
14239  
14240  // This is an (experimental) evolution of the initial connect() HOC.
14241  // The hope is that we can improve render performance by removing functional
14242  // component wrappers.
14243  function _contextConnect(Component, namespace, options) {
14244    const WrappedComponent = options?.forwardsRef ? (0,external_wp_element_namespaceObject.forwardRef)(Component) : Component;
14245    if (typeof namespace === 'undefined') {
14246       true ? external_wp_warning_default()('contextConnect: Please provide a namespace') : 0;
14247    }
14248  
14249    // @ts-expect-error internal property
14250    let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace];
14251  
14252    /**
14253     * Consolidate (merge) namespaces before attaching it to the WrappedComponent.
14254     */
14255    if (Array.isArray(namespace)) {
14256      mergedNamespace = [...mergedNamespace, ...namespace];
14257    }
14258    if (typeof namespace === 'string') {
14259      mergedNamespace = [...mergedNamespace, namespace];
14260    }
14261  
14262    // @ts-expect-error We can't rely on inferred types here because of the
14263    // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
14264    return Object.assign(WrappedComponent, {
14265      [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
14266      displayName: namespace,
14267      selector: `.$getStyledClassNameFromKey(namespace)}`
14268    });
14269  }
14270  
14271  /**
14272   * Attempts to retrieve the connected namespace from a component.
14273   *
14274   * @param Component The component to retrieve a namespace from.
14275   * @return The connected namespaces.
14276   */
14277  function getConnectNamespace(Component) {
14278    if (!Component) return [];
14279    let namespaces = [];
14280  
14281    // @ts-ignore internal property
14282    if (Component[CONNECT_STATIC_NAMESPACE]) {
14283      // @ts-ignore internal property
14284      namespaces = Component[CONNECT_STATIC_NAMESPACE];
14285    }
14286  
14287    // @ts-ignore
14288    if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) {
14289      // @ts-ignore
14290      namespaces = Component.type[CONNECT_STATIC_NAMESPACE];
14291    }
14292    return namespaces;
14293  }
14294  
14295  /**
14296   * Checks to see if a component is connected within the Context system.
14297   *
14298   * @param Component The component to retrieve a namespace from.
14299   * @param match     The namespace to check.
14300   */
14301  function hasConnectNamespace(Component, match) {
14302    if (!Component) return false;
14303    if (typeof match === 'string') {
14304      return getConnectNamespace(Component).includes(match);
14305    }
14306    if (Array.isArray(match)) {
14307      return match.some(result => getConnectNamespace(Component).includes(result));
14308    }
14309    return false;
14310  }
14311  
14312  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js
14313  /**
14314   * External dependencies
14315   */
14316  
14317  const visuallyHidden = {
14318    border: 0,
14319    clip: 'rect(1px, 1px, 1px, 1px)',
14320    WebkitClipPath: 'inset( 50% )',
14321    clipPath: 'inset( 50% )',
14322    height: '1px',
14323    margin: '-1px',
14324    overflow: 'hidden',
14325    padding: 0,
14326    position: 'absolute',
14327    width: '1px',
14328    wordWrap: 'normal'
14329  };
14330  
14331  ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
14332  function extends_extends() {
14333    extends_extends = Object.assign ? Object.assign.bind() : function (target) {
14334      for (var i = 1; i < arguments.length; i++) {
14335        var source = arguments[i];
14336        for (var key in source) {
14337          if (Object.prototype.hasOwnProperty.call(source, key)) {
14338            target[key] = source[key];
14339          }
14340        }
14341      }
14342      return target;
14343    };
14344    return extends_extends.apply(this, arguments);
14345  }
14346  ;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
14347  function emotion_memoize_esm_memoize(fn) {
14348    var cache = Object.create(null);
14349    return function (arg) {
14350      if (cache[arg] === undefined) cache[arg] = fn(arg);
14351      return cache[arg];
14352    };
14353  }
14354  
14355  
14356  
14357  ;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
14358  
14359  
14360  var 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|playsInline|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
14361  
14362  var isPropValid = /* #__PURE__ */emotion_memoize_esm_memoize(function (prop) {
14363    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
14364    /* o */
14365    && prop.charCodeAt(1) === 110
14366    /* n */
14367    && prop.charCodeAt(2) < 91;
14368  }
14369  /* Z+1 */
14370  );
14371  
14372  
14373  
14374  ;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
14375  
14376  
14377  
14378  
14379  
14380  
14381  
14382  
14383  var testOmitPropsOnStringTag = isPropValid;
14384  
14385  var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
14386    return key !== 'theme';
14387  };
14388  
14389  var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
14390    return typeof tag === 'string' && // 96 is one less than the char code
14391    // for "a" so this is checking that
14392    // it's a lowercase character
14393    tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
14394  };
14395  var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
14396    var shouldForwardProp;
14397  
14398    if (options) {
14399      var optionsShouldForwardProp = options.shouldForwardProp;
14400      shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
14401        return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
14402      } : optionsShouldForwardProp;
14403    }
14404  
14405    if (typeof shouldForwardProp !== 'function' && isReal) {
14406      shouldForwardProp = tag.__emotion_forwardProp;
14407    }
14408  
14409    return shouldForwardProp;
14410  };
14411  
14412  var 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";
14413  
14414  var emotion_styled_base_browser_esm_Insertion = function Insertion(_ref) {
14415    var cache = _ref.cache,
14416        serialized = _ref.serialized,
14417        isStringTag = _ref.isStringTag;
14418    emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag);
14419    var rules = emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectAlwaysWithSyncFallback(function () {
14420      return emotion_utils_browser_esm_insertStyles(cache, serialized, isStringTag);
14421    });
14422  
14423    return null;
14424  };
14425  
14426  var createStyled = function createStyled(tag, options) {
14427    if (false) {}
14428  
14429    var isReal = tag.__emotion_real === tag;
14430    var baseTag = isReal && tag.__emotion_base || tag;
14431    var identifierName;
14432    var targetClassName;
14433  
14434    if (options !== undefined) {
14435      identifierName = options.label;
14436      targetClassName = options.target;
14437    }
14438  
14439    var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
14440    var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
14441    var shouldUseAs = !defaultShouldForwardProp('as');
14442    return function () {
14443      var args = arguments;
14444      var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
14445  
14446      if (identifierName !== undefined) {
14447        styles.push("label:" + identifierName + ";");
14448      }
14449  
14450      if (args[0] == null || args[0].raw === undefined) {
14451        styles.push.apply(styles, args);
14452      } else {
14453        if (false) {}
14454  
14455        styles.push(args[0][0]);
14456        var len = args.length;
14457        var i = 1;
14458  
14459        for (; i < len; i++) {
14460          if (false) {}
14461  
14462          styles.push(args[i], args[0][i]);
14463        }
14464      } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
14465  
14466  
14467      var Styled = emotion_element_6a883da9_browser_esm_withEmotionCache(function (props, cache, ref) {
14468        var FinalTag = shouldUseAs && props.as || baseTag;
14469        var className = '';
14470        var classInterpolations = [];
14471        var mergedProps = props;
14472  
14473        if (props.theme == null) {
14474          mergedProps = {};
14475  
14476          for (var key in props) {
14477            mergedProps[key] = props[key];
14478          }
14479  
14480          mergedProps.theme = (0,external_React_.useContext)(emotion_element_6a883da9_browser_esm_ThemeContext);
14481        }
14482  
14483        if (typeof props.className === 'string') {
14484          className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className);
14485        } else if (props.className != null) {
14486          className = props.className + " ";
14487        }
14488  
14489        var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
14490        className += cache.key + "-" + serialized.name;
14491  
14492        if (targetClassName !== undefined) {
14493          className += " " + targetClassName;
14494        }
14495  
14496        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
14497        var newProps = {};
14498  
14499        for (var _key in props) {
14500          if (shouldUseAs && _key === 'as') continue;
14501  
14502          if ( // $FlowFixMe
14503          finalShouldForwardProp(_key)) {
14504            newProps[_key] = props[_key];
14505          }
14506        }
14507  
14508        newProps.className = className;
14509        newProps.ref = ref;
14510        return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Insertion, {
14511          cache: cache,
14512          serialized: serialized,
14513          isStringTag: typeof FinalTag === 'string'
14514        }), /*#__PURE__*/(0,external_React_.createElement)(FinalTag, newProps));
14515      });
14516      Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
14517      Styled.defaultProps = tag.defaultProps;
14518      Styled.__emotion_real = Styled;
14519      Styled.__emotion_base = baseTag;
14520      Styled.__emotion_styles = styles;
14521      Styled.__emotion_forwardProp = shouldForwardProp;
14522      Object.defineProperty(Styled, 'toString', {
14523        value: function value() {
14524          if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string
14525  
14526  
14527          return "." + targetClassName;
14528        }
14529      });
14530  
14531      Styled.withComponent = function (nextTag, nextOptions) {
14532        return createStyled(nextTag, extends_extends({}, options, nextOptions, {
14533          shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
14534        })).apply(void 0, styles);
14535      };
14536  
14537      return Styled;
14538    };
14539  };
14540  
14541  /* harmony default export */ const emotion_styled_base_browser_esm = (createStyled);
14542  
14543  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/view/component.js
14544  
14545  /**
14546   * External dependencies
14547   */
14548  
14549  /**
14550   * `View` is a core component that renders everything in the library.
14551   * It is the principle component in the entire library.
14552   *
14553   * ```jsx
14554   * import { View } from `@wordpress/components`;
14555   *
14556   * function Example() {
14557   *     return (
14558   *         <View>
14559   *              Code is Poetry
14560   *         </View>
14561   *     );
14562   * }
14563   * ```
14564   */
14565  const View = emotion_styled_base_browser_esm("div",  true ? {
14566    target: "e19lxcc00"
14567  } : 0)( true ? "" : 0);
14568  View.selector = '.components-view';
14569  View.displayName = 'View';
14570  /* harmony default export */ const component = (View);
14571  
14572  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/component.js
14573  
14574  /**
14575   * External dependencies
14576   */
14577  
14578  /**
14579   * Internal dependencies
14580   */
14581  
14582  
14583  
14584  
14585  function UnconnectedVisuallyHidden(props, forwardedRef) {
14586    const {
14587      style: styleProp,
14588      ...contextProps
14589    } = useContextSystem(props, 'VisuallyHidden');
14590    return (0,external_React_.createElement)(component, {
14591      ref: forwardedRef,
14592      ...contextProps,
14593      style: {
14594        ...visuallyHidden,
14595        ...(styleProp || {})
14596      }
14597    });
14598  }
14599  
14600  /**
14601   * `VisuallyHidden` is a component used to render text intended to be visually
14602   * hidden, but will show for alternate devices, for example a screen reader.
14603   *
14604   * ```jsx
14605   * import { VisuallyHidden } from `@wordpress/components`;
14606   *
14607   * function Example() {
14608   *   return (
14609   *     <VisuallyHidden>
14610   *       <label>Code is Poetry</label>
14611   *     </VisuallyHidden>
14612   *   );
14613   * }
14614   * ```
14615   */
14616  const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden');
14617  /* harmony default export */ const visually_hidden_component = (component_VisuallyHidden);
14618  
14619  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js
14620  /**
14621   * WordPress dependencies
14622   */
14623  
14624  
14625  /**
14626   * Internal dependencies
14627   */
14628  
14629  const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']];
14630  
14631  // Stored as map as i18n __() only accepts strings (not variables)
14632  const ALIGNMENT_LABEL = {
14633    'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'),
14634    'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'),
14635    'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'),
14636    'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'),
14637    'center center': (0,external_wp_i18n_namespaceObject.__)('Center'),
14638    center: (0,external_wp_i18n_namespaceObject.__)('Center'),
14639    'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'),
14640    'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'),
14641    'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'),
14642    'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right')
14643  };
14644  
14645  // Transforms GRID into a flat Array of values.
14646  const ALIGNMENTS = GRID.flat();
14647  
14648  /**
14649   * Normalizes and transforms an incoming value to better match the alignment values
14650   *
14651   * @param value An alignment value to parse.
14652   *
14653   * @return The parsed value.
14654   */
14655  function normalize(value) {
14656    const normalized = value === 'center' ? 'center center' : value;
14657  
14658    // Strictly speaking, this could be `string | null | undefined`,
14659    // but will be validated shortly, so we're typecasting to an
14660    // `AlignmentMatrixControlValue` to keep TypeScript happy.
14661    const transformed = normalized?.replace('-', ' ');
14662    return ALIGNMENTS.includes(transformed) ? transformed : undefined;
14663  }
14664  
14665  /**
14666   * Creates an item ID based on a prefix ID and an alignment value.
14667   *
14668   * @param prefixId An ID to prefix.
14669   * @param value    An alignment value.
14670   *
14671   * @return The item id.
14672   */
14673  function getItemId(prefixId, value) {
14674    const normalized = normalize(value);
14675    if (!normalized) return;
14676    const id = normalized.replace(' ', '-');
14677    return `$prefixId}-$id}`;
14678  }
14679  
14680  /**
14681   * Extracts an item value from its ID
14682   *
14683   * @param prefixId An ID prefix to remove
14684   * @param id       An item ID
14685   * @return         The item value
14686   */
14687  function getItemValue(prefixId, id) {
14688    const value = id?.replace(prefixId + '-', '');
14689    return normalize(value);
14690  }
14691  
14692  /**
14693   * Retrieves the alignment index from a value.
14694   *
14695   * @param alignment Value to check.
14696   *
14697   * @return The index of a matching alignment.
14698   */
14699  function getAlignmentIndex(alignment = 'center') {
14700    const normalized = normalize(alignment);
14701    if (!normalized) return undefined;
14702    const index = ALIGNMENTS.indexOf(normalized);
14703    return index > -1 ? index : undefined;
14704  }
14705  
14706  // EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
14707  var hoist_non_react_statics_cjs = __webpack_require__(1880);
14708  ;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
14709  
14710  
14711  
14712  
14713  
14714  
14715  
14716  
14717  
14718  
14719  
14720  
14721  var pkg = {
14722      name: "@emotion/react",
14723      version: "11.10.6",
14724      main: "dist/emotion-react.cjs.js",
14725      module: "dist/emotion-react.esm.js",
14726      browser: {
14727          "./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
14728      },
14729      exports: {
14730          ".": {
14731              module: {
14732                  worker: "./dist/emotion-react.worker.esm.js",
14733                  browser: "./dist/emotion-react.browser.esm.js",
14734                  "default": "./dist/emotion-react.esm.js"
14735              },
14736              "default": "./dist/emotion-react.cjs.js"
14737          },
14738          "./jsx-runtime": {
14739              module: {
14740                  worker: "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js",
14741                  browser: "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js",
14742                  "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js"
14743              },
14744              "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
14745          },
14746          "./_isolated-hnrs": {
14747              module: {
14748                  worker: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js",
14749                  browser: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js",
14750                  "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js"
14751              },
14752              "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
14753          },
14754          "./jsx-dev-runtime": {
14755              module: {
14756                  worker: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js",
14757                  browser: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js",
14758                  "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js"
14759              },
14760              "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
14761          },
14762          "./package.json": "./package.json",
14763          "./types/css-prop": "./types/css-prop.d.ts",
14764          "./macro": "./macro.js"
14765      },
14766      types: "types/index.d.ts",
14767      files: [
14768          "src",
14769          "dist",
14770          "jsx-runtime",
14771          "jsx-dev-runtime",
14772          "_isolated-hnrs",
14773          "types/*.d.ts",
14774          "macro.js",
14775          "macro.d.ts",
14776          "macro.js.flow"
14777      ],
14778      sideEffects: false,
14779      author: "Emotion Contributors",
14780      license: "MIT",
14781      scripts: {
14782          "test:typescript": "dtslint types"
14783      },
14784      dependencies: {
14785          "@babel/runtime": "^7.18.3",
14786          "@emotion/babel-plugin": "^11.10.6",
14787          "@emotion/cache": "^11.10.5",
14788          "@emotion/serialize": "^1.1.1",
14789          "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
14790          "@emotion/utils": "^1.2.0",
14791          "@emotion/weak-memoize": "^0.3.0",
14792          "hoist-non-react-statics": "^3.3.1"
14793      },
14794      peerDependencies: {
14795          react: ">=16.8.0"
14796      },
14797      peerDependenciesMeta: {
14798          "@types/react": {
14799              optional: true
14800          }
14801      },
14802      devDependencies: {
14803          "@definitelytyped/dtslint": "0.0.112",
14804          "@emotion/css": "11.10.6",
14805          "@emotion/css-prettifier": "1.1.1",
14806          "@emotion/server": "11.10.0",
14807          "@emotion/styled": "11.10.6",
14808          "html-tag-names": "^1.1.2",
14809          react: "16.14.0",
14810          "svg-tag-names": "^1.1.1",
14811          typescript: "^4.5.5"
14812      },
14813      repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
14814      publishConfig: {
14815          access: "public"
14816      },
14817      "umd:main": "dist/emotion-react.umd.min.js",
14818      preconstruct: {
14819          entrypoints: [
14820              "./index.js",
14821              "./jsx-runtime.js",
14822              "./jsx-dev-runtime.js",
14823              "./_isolated-hnrs.js"
14824          ],
14825          umdName: "emotionReact",
14826          exports: {
14827              envConditions: [
14828                  "browser",
14829                  "worker"
14830              ],
14831              extra: {
14832                  "./types/css-prop": "./types/css-prop.d.ts",
14833                  "./macro": "./macro.js"
14834              }
14835          }
14836      }
14837  };
14838  
14839  var jsx = function jsx(type, props) {
14840    var args = arguments;
14841  
14842    if (props == null || !hasOwnProperty.call(props, 'css')) {
14843      // $FlowFixMe
14844      return createElement.apply(undefined, args);
14845    }
14846  
14847    var argsLength = args.length;
14848    var createElementArgArray = new Array(argsLength);
14849    createElementArgArray[0] = Emotion;
14850    createElementArgArray[1] = createEmotionProps(type, props);
14851  
14852    for (var i = 2; i < argsLength; i++) {
14853      createElementArgArray[i] = args[i];
14854    } // $FlowFixMe
14855  
14856  
14857    return createElement.apply(null, createElementArgArray);
14858  };
14859  
14860  var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
14861  // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
14862  // initial client-side render from SSR, use place of hydrating tag
14863  
14864  var Global = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) {
14865    if (false) {}
14866  
14867    var styles = props.styles;
14868    var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
14869    // but it is based on a constant that will never change at runtime
14870    // it's effectively like having two implementations and switching them out
14871    // so it's not actually breaking anything
14872  
14873  
14874    var sheetRef = useRef();
14875    useInsertionEffectWithLayoutFallback(function () {
14876      var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
14877  
14878      var sheet = new cache.sheet.constructor({
14879        key: key,
14880        nonce: cache.sheet.nonce,
14881        container: cache.sheet.container,
14882        speedy: cache.sheet.isSpeedy
14883      });
14884      var rehydrating = false; // $FlowFixMe
14885  
14886      var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
14887  
14888      if (cache.sheet.tags.length) {
14889        sheet.before = cache.sheet.tags[0];
14890      }
14891  
14892      if (node !== null) {
14893        rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
14894  
14895        node.setAttribute('data-emotion', key);
14896        sheet.hydrate([node]);
14897      }
14898  
14899      sheetRef.current = [sheet, rehydrating];
14900      return function () {
14901        sheet.flush();
14902      };
14903    }, [cache]);
14904    useInsertionEffectWithLayoutFallback(function () {
14905      var sheetRefCurrent = sheetRef.current;
14906      var sheet = sheetRefCurrent[0],
14907          rehydrating = sheetRefCurrent[1];
14908  
14909      if (rehydrating) {
14910        sheetRefCurrent[1] = false;
14911        return;
14912      }
14913  
14914      if (serialized.next !== undefined) {
14915        // insert keyframes
14916        insertStyles(cache, serialized.next, true);
14917      }
14918  
14919      if (sheet.tags.length) {
14920        // if this doesn't exist then it will be null so the style element will be appended
14921        var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
14922        sheet.before = element;
14923        sheet.flush();
14924      }
14925  
14926      cache.insert("", serialized, sheet, false);
14927    }, [cache, serialized.name]);
14928    return null;
14929  })));
14930  
14931  if (false) {}
14932  
14933  function emotion_react_browser_esm_css() {
14934    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
14935      args[_key] = arguments[_key];
14936    }
14937  
14938    return emotion_serialize_browser_esm_serializeStyles(args);
14939  }
14940  
14941  var emotion_react_browser_esm_keyframes = function keyframes() {
14942    var insertable = emotion_react_browser_esm_css.apply(void 0, arguments);
14943    var name = "animation-" + insertable.name; // $FlowFixMe
14944  
14945    return {
14946      name: name,
14947      styles: "@keyframes " + name + "{" + insertable.styles + "}",
14948      anim: 1,
14949      toString: function toString() {
14950        return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
14951      }
14952    };
14953  };
14954  
14955  var emotion_react_browser_esm_classnames = function classnames(args) {
14956    var len = args.length;
14957    var i = 0;
14958    var cls = '';
14959  
14960    for (; i < len; i++) {
14961      var arg = args[i];
14962      if (arg == null) continue;
14963      var toAdd = void 0;
14964  
14965      switch (typeof arg) {
14966        case 'boolean':
14967          break;
14968  
14969        case 'object':
14970          {
14971            if (Array.isArray(arg)) {
14972              toAdd = classnames(arg);
14973            } else {
14974              if (false) {}
14975  
14976              toAdd = '';
14977  
14978              for (var k in arg) {
14979                if (arg[k] && k) {
14980                  toAdd && (toAdd += ' ');
14981                  toAdd += k;
14982                }
14983              }
14984            }
14985  
14986            break;
14987          }
14988  
14989        default:
14990          {
14991            toAdd = arg;
14992          }
14993      }
14994  
14995      if (toAdd) {
14996        cls && (cls += ' ');
14997        cls += toAdd;
14998      }
14999    }
15000  
15001    return cls;
15002  };
15003  
15004  function emotion_react_browser_esm_merge(registered, css, className) {
15005    var registeredStyles = [];
15006    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
15007  
15008    if (registeredStyles.length < 2) {
15009      return className;
15010    }
15011  
15012    return rawClassName + css(registeredStyles);
15013  }
15014  
15015  var emotion_react_browser_esm_Insertion = function Insertion(_ref) {
15016    var cache = _ref.cache,
15017        serializedArr = _ref.serializedArr;
15018    var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
15019  
15020      for (var i = 0; i < serializedArr.length; i++) {
15021        var res = insertStyles(cache, serializedArr[i], false);
15022      }
15023    });
15024  
15025    return null;
15026  };
15027  
15028  var ClassNames = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) {
15029    var hasRendered = false;
15030    var serializedArr = [];
15031  
15032    var css = function css() {
15033      if (hasRendered && "production" !== 'production') {}
15034  
15035      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
15036        args[_key] = arguments[_key];
15037      }
15038  
15039      var serialized = serializeStyles(args, cache.registered);
15040      serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
15041  
15042      registerStyles(cache, serialized, false);
15043      return cache.key + "-" + serialized.name;
15044    };
15045  
15046    var cx = function cx() {
15047      if (hasRendered && "production" !== 'production') {}
15048  
15049      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
15050        args[_key2] = arguments[_key2];
15051      }
15052  
15053      return emotion_react_browser_esm_merge(cache.registered, css, emotion_react_browser_esm_classnames(args));
15054    };
15055  
15056    var content = {
15057      css: css,
15058      cx: cx,
15059      theme: useContext(ThemeContext)
15060    };
15061    var ele = props.children(content);
15062    hasRendered = true;
15063    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(emotion_react_browser_esm_Insertion, {
15064      cache: cache,
15065      serializedArr: serializedArr
15066    }), ele);
15067  })));
15068  
15069  if (false) {}
15070  
15071  if (false) { var globalKey, globalContext, isTestEnv, emotion_react_browser_esm_isBrowser; }
15072  
15073  
15074  
15075  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors-values.js
15076  /**
15077   * Internal dependencies
15078   */
15079  const white = '#fff';
15080  
15081  // Matches the grays in @wordpress/base-styles
15082  const GRAY = {
15083    900: '#1e1e1e',
15084    800: '#2f2f2f',
15085    /** Meets 4.6:1 text contrast against white. */
15086    700: '#757575',
15087    /** Meets 3:1 UI or large text contrast against white. */
15088    600: '#949494',
15089    400: '#ccc',
15090    /** Used for most borders. */
15091    300: '#ddd',
15092    /** Used sparingly for light borders. */
15093    200: '#e0e0e0',
15094    /** Used for light gray backgrounds. */
15095    100: '#f0f0f0'
15096  };
15097  
15098  // Matches @wordpress/base-styles
15099  const ALERT = {
15100    yellow: '#f0b849',
15101    red: '#d94f4f',
15102    green: '#4ab866'
15103  };
15104  
15105  // Should match packages/components/src/utils/theme-variables.scss
15106  const THEME = {
15107    accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
15108    accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
15109    accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
15110    /** Used when placing text on the accent color. */
15111    accentInverted: `var(--wp-components-color-accent-inverted, $white})`,
15112    background: `var(--wp-components-color-background, $white})`,
15113    foreground: `var(--wp-components-color-foreground, $GRAY[900]})`,
15114    /** Used when placing text on the foreground color. */
15115    foregroundInverted: `var(--wp-components-color-foreground-inverted, $white})`,
15116    gray: {
15117      /** @deprecated Use `COLORS.theme.foreground` instead. */
15118      900: `var(--wp-components-color-foreground, $GRAY[900]})`,
15119      800: `var(--wp-components-color-gray-800, $GRAY[800]})`,
15120      700: `var(--wp-components-color-gray-700, $GRAY[700]})`,
15121      600: `var(--wp-components-color-gray-600, $GRAY[600]})`,
15122      400: `var(--wp-components-color-gray-400, $GRAY[400]})`,
15123      300: `var(--wp-components-color-gray-300, $GRAY[300]})`,
15124      200: `var(--wp-components-color-gray-200, $GRAY[200]})`,
15125      100: `var(--wp-components-color-gray-100, $GRAY[100]})`
15126    }
15127  };
15128  const UI = {
15129    background: THEME.background,
15130    backgroundDisabled: THEME.gray[100],
15131    border: THEME.gray[600],
15132    borderHover: THEME.gray[700],
15133    borderFocus: THEME.accent,
15134    borderDisabled: THEME.gray[400],
15135    textDisabled: THEME.gray[600],
15136    // Matches @wordpress/base-styles
15137    darkGrayPlaceholder: `color-mix(in srgb, $THEME.foreground}, transparent 38%)`,
15138    lightGrayPlaceholder: `color-mix(in srgb, $THEME.background}, transparent 35%)`
15139  };
15140  const COLORS = Object.freeze({
15141    /**
15142     * The main gray color object.
15143     *
15144     * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
15145     */
15146    gray: GRAY,
15147    // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
15148    white,
15149    alert: ALERT,
15150    /**
15151     * Theme-ready variables with fallbacks.
15152     *
15153     * Prefer semantic aliases in `COLORS.ui` when applicable.
15154     */
15155    theme: THEME,
15156    /**
15157     * Semantic aliases (prefer these over raw variables when applicable).
15158     */
15159    ui: UI
15160  });
15161  /* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS)));
15162  
15163  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/reduce-motion.js
15164  /**
15165   * Allows users to opt-out of animations via OS-level preferences.
15166   *
15167   * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
15168   * @return {string} Generated CSS code for the reduced style
15169   */
15170  function reduceMotion(prop = 'transition') {
15171    let style;
15172    switch (prop) {
15173      case 'transition':
15174        style = 'transition-duration: 0ms;';
15175        break;
15176      case 'animation':
15177        style = 'animation-duration: 1ms;';
15178        break;
15179      default:
15180        style = `
15181                  animation-duration: 1ms;
15182                  transition-duration: 0ms;
15183              `;
15184    }
15185    return `
15186          @media ( prefers-reduced-motion: reduce ) {
15187              $style};
15188          }
15189      `;
15190  }
15191  
15192  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js
15193  
15194  function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
15195  /**
15196   * External dependencies
15197   */
15198  
15199  
15200  
15201  /**
15202   * Internal dependencies
15203   */
15204  
15205  var _ref =  true ? {
15206    name: "93uojk",
15207    styles: "border-radius:2px;box-sizing:border-box;direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );outline:none"
15208  } : 0;
15209  const rootBase = () => {
15210    return _ref;
15211  };
15212  const rootSize = ({
15213    size = 92
15214  }) => {
15215    return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0),  true ? "" : 0);
15216  };
15217  const Root = emotion_styled_base_browser_esm("div",  true ? {
15218    target: "ecapk1j3"
15219  } : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0));
15220  const Row = emotion_styled_base_browser_esm("div",  true ? {
15221    target: "ecapk1j2"
15222  } : 0)( true ? {
15223    name: "1x5gbbj",
15224    styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )"
15225  } : 0);
15226  const pointActive = ({
15227    isActive
15228  }) => {
15229    const boxShadow = isActive ? `0 0 0 2px $COLORS.gray[900]}` : null;
15230    const pointColor = isActive ? COLORS.gray[900] : COLORS.gray[400];
15231    const pointColorHover = isActive ? COLORS.gray[900] : COLORS.theme.accent;
15232    return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0),  true ? "" : 0);
15233  };
15234  const pointBase = props => {
15235    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);
15236  };
15237  const Point = emotion_styled_base_browser_esm("span",  true ? {
15238    target: "ecapk1j1"
15239  } : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0));
15240  const Cell = emotion_styled_base_browser_esm("span",  true ? {
15241    target: "ecapk1j0"
15242  } : 0)( true ? {
15243    name: "rjf3ub",
15244    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"
15245  } : 0);
15246  
15247  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js
15248  
15249  /**
15250   * Internal dependencies
15251   */
15252  
15253  
15254  
15255  
15256  /**
15257   * Internal dependencies
15258   */
15259  
15260  
15261  function cell_Cell({
15262    id,
15263    isActive = false,
15264    value,
15265    ...props
15266  }) {
15267    const tooltipText = ALIGNMENT_LABEL[value];
15268    return (0,external_React_.createElement)(tooltip, {
15269      text: tooltipText
15270    }, (0,external_React_.createElement)(CompositeItem, {
15271      id: id,
15272      render: (0,external_React_.createElement)(Cell, {
15273        ...props,
15274        role: "gridcell"
15275      })
15276    }, (0,external_React_.createElement)(visually_hidden_component, null, value), (0,external_React_.createElement)(Point, {
15277      isActive: isActive,
15278      role: "presentation"
15279    })));
15280  }
15281  
15282  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Y6GYTNQ2.js
15283  "use client";
15284  
15285  
15286  
15287  // src/collection/collection-store.ts
15288  
15289  function useCollectionStoreProps(store, update, props) {
15290    useUpdateEffect(update, [props.store]);
15291    useStoreProps(store, props, "items", "setItems");
15292    return store;
15293  }
15294  function useCollectionStore(props = {}) {
15295    const [store, update] = useStore(Core.createCollectionStore, props);
15296    return useCollectionStoreProps(store, update, props);
15297  }
15298  
15299  
15300  
15301  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/22K762VQ.js
15302  "use client";
15303  
15304  
15305  
15306  
15307  
15308  // src/collection/collection-store.ts
15309  function isElementPreceding(a, b) {
15310    return Boolean(
15311      b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING
15312    );
15313  }
15314  function sortBasedOnDOMPosition(items) {
15315    const pairs = items.map((item, index) => [index, item]);
15316    let isOrderDifferent = false;
15317    pairs.sort(([indexA, a], [indexB, b]) => {
15318      const elementA = a.element;
15319      const elementB = b.element;
15320      if (elementA === elementB)
15321        return 0;
15322      if (!elementA || !elementB)
15323        return 0;
15324      if (isElementPreceding(elementA, elementB)) {
15325        if (indexA > indexB) {
15326          isOrderDifferent = true;
15327        }
15328        return -1;
15329      }
15330      if (indexA < indexB) {
15331        isOrderDifferent = true;
15332      }
15333      return 1;
15334    });
15335    if (isOrderDifferent) {
15336      return pairs.map(([_, item]) => item);
15337    }
15338    return items;
15339  }
15340  function getCommonParent(items) {
15341    var _a;
15342    const firstItem = items.find((item) => !!item.element);
15343    const lastItem = [...items].reverse().find((item) => !!item.element);
15344    let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement;
15345    while (parentElement && (lastItem == null ? void 0 : lastItem.element)) {
15346      const parent = parentElement;
15347      if (lastItem && parent.contains(lastItem.element)) {
15348        return parentElement;
15349      }
15350      parentElement = parentElement.parentElement;
15351    }
15352    return DLOEKDPY_getDocument(parentElement).body;
15353  }
15354  function getPrivateStore(store) {
15355    return store == null ? void 0 : store.__unstablePrivateStore;
15356  }
15357  function createCollectionStore(props = {}) {
15358    var _a;
15359    throwOnConflictingProps(props, props.store);
15360    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
15361    const items = defaultValue(
15362      props.items,
15363      syncState == null ? void 0 : syncState.items,
15364      props.defaultItems,
15365      []
15366    );
15367    const itemsMap = new Map(items.map((item) => [item.id, item]));
15368    const initialState = {
15369      items,
15370      renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, [])
15371    };
15372    const syncPrivateStore = getPrivateStore(props.store);
15373    const privateStore = createStore(
15374      { items, renderedItems: initialState.renderedItems },
15375      syncPrivateStore
15376    );
15377    const collection = createStore(initialState, props.store);
15378    const sortItems = (renderedItems) => {
15379      const sortedItems = sortBasedOnDOMPosition(renderedItems);
15380      privateStore.setState("renderedItems", sortedItems);
15381      collection.setState("renderedItems", sortedItems);
15382    };
15383    setup(collection, () => init(privateStore));
15384    setup(privateStore, () => {
15385      return batch(privateStore, ["items"], (state) => {
15386        collection.setState("items", state.items);
15387      });
15388    });
15389    setup(privateStore, () => {
15390      return batch(privateStore, ["renderedItems"], (state) => {
15391        let firstRun = true;
15392        let raf = requestAnimationFrame(() => {
15393          const { renderedItems } = collection.getState();
15394          if (state.renderedItems === renderedItems)
15395            return;
15396          sortItems(state.renderedItems);
15397        });
15398        if (typeof IntersectionObserver !== "function") {
15399          return () => cancelAnimationFrame(raf);
15400        }
15401        const ioCallback = () => {
15402          if (firstRun) {
15403            firstRun = false;
15404            return;
15405          }
15406          cancelAnimationFrame(raf);
15407          raf = requestAnimationFrame(() => sortItems(state.renderedItems));
15408        };
15409        const root = getCommonParent(state.renderedItems);
15410        const observer = new IntersectionObserver(ioCallback, { root });
15411        for (const item of state.renderedItems) {
15412          if (!item.element)
15413            continue;
15414          observer.observe(item.element);
15415        }
15416        return () => {
15417          cancelAnimationFrame(raf);
15418          observer.disconnect();
15419        };
15420      });
15421    });
15422    const mergeItem = (item, setItems, canDeleteFromMap = false) => {
15423      let prevItem;
15424      setItems((items2) => {
15425        const index = items2.findIndex(({ id }) => id === item.id);
15426        const nextItems = items2.slice();
15427        if (index !== -1) {
15428          prevItem = items2[index];
15429          const nextItem = _chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, prevItem), item);
15430          nextItems[index] = nextItem;
15431          itemsMap.set(item.id, nextItem);
15432        } else {
15433          nextItems.push(item);
15434          itemsMap.set(item.id, item);
15435        }
15436        return nextItems;
15437      });
15438      const unmergeItem = () => {
15439        setItems((items2) => {
15440          if (!prevItem) {
15441            if (canDeleteFromMap) {
15442              itemsMap.delete(item.id);
15443            }
15444            return items2.filter(({ id }) => id !== item.id);
15445          }
15446          const index = items2.findIndex(({ id }) => id === item.id);
15447          if (index === -1)
15448            return items2;
15449          const nextItems = items2.slice();
15450          nextItems[index] = prevItem;
15451          itemsMap.set(item.id, prevItem);
15452          return nextItems;
15453        });
15454      };
15455      return unmergeItem;
15456    };
15457    const registerItem = (item) => mergeItem(
15458      item,
15459      (getItems) => privateStore.setState("items", getItems),
15460      true
15461    );
15462    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, collection), {
15463      registerItem,
15464      renderItem: (item) => chain(
15465        registerItem(item),
15466        mergeItem(
15467          item,
15468          (getItems) => privateStore.setState("renderedItems", getItems)
15469        )
15470      ),
15471      item: (id) => {
15472        if (!id)
15473          return null;
15474        let item = itemsMap.get(id);
15475        if (!item) {
15476          const { items: items2 } = collection.getState();
15477          item = items2.find((item2) => item2.id === id);
15478          if (item) {
15479            itemsMap.set(id, item);
15480          }
15481        }
15482        return item || null;
15483      },
15484      // @ts-expect-error Internal
15485      __unstablePrivateStore: privateStore
15486    });
15487  }
15488  
15489  
15490  
15491  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/7PRQYBBV.js
15492  "use client";
15493  
15494  // src/utils/array.ts
15495  function toArray(arg) {
15496    if (Array.isArray(arg)) {
15497      return arg;
15498    }
15499    return typeof arg !== "undefined" ? [arg] : [];
15500  }
15501  function addItemToArray(array, item, index = -1) {
15502    if (!(index in array)) {
15503      return [...array, item];
15504    }
15505    return [...array.slice(0, index), item, ...array.slice(index)];
15506  }
15507  function flatten2DArray(array) {
15508    const flattened = [];
15509    for (const row of array) {
15510      flattened.push(...row);
15511    }
15512    return flattened;
15513  }
15514  function reverseArray(array) {
15515    return array.slice().reverse();
15516  }
15517  
15518  
15519  
15520  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/IERTEJ3A.js
15521  "use client";
15522  
15523  
15524  
15525  
15526  
15527  
15528  // src/composite/composite-store.ts
15529  var IERTEJ3A_NULL_ITEM = { id: null };
15530  function IERTEJ3A_findFirstEnabledItem(items, excludeId) {
15531    return items.find((item) => {
15532      if (excludeId) {
15533        return !item.disabled && item.id !== excludeId;
15534      }
15535      return !item.disabled;
15536    });
15537  }
15538  function getEnabledItems(items, excludeId) {
15539    return items.filter((item) => {
15540      if (excludeId) {
15541        return !item.disabled && item.id !== excludeId;
15542      }
15543      return !item.disabled;
15544    });
15545  }
15546  function getOppositeOrientation(orientation) {
15547    if (orientation === "vertical")
15548      return "horizontal";
15549    if (orientation === "horizontal")
15550      return "vertical";
15551    return;
15552  }
15553  function getItemsInRow(items, rowId) {
15554    return items.filter((item) => item.rowId === rowId);
15555  }
15556  function IERTEJ3A_flipItems(items, activeId, shouldInsertNullItem = false) {
15557    const index = items.findIndex((item) => item.id === activeId);
15558    return [
15559      ...items.slice(index + 1),
15560      ...shouldInsertNullItem ? [IERTEJ3A_NULL_ITEM] : [],
15561      ...items.slice(0, index)
15562    ];
15563  }
15564  function IERTEJ3A_groupItemsByRows(items) {
15565    const rows = [];
15566    for (const item of items) {
15567      const row = rows.find((currentRow) => {
15568        var _a;
15569        return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
15570      });
15571      if (row) {
15572        row.push(item);
15573      } else {
15574        rows.push([item]);
15575      }
15576    }
15577    return rows;
15578  }
15579  function getMaxRowLength(array) {
15580    let maxLength = 0;
15581    for (const { length } of array) {
15582      if (length > maxLength) {
15583        maxLength = length;
15584      }
15585    }
15586    return maxLength;
15587  }
15588  function createEmptyItem(rowId) {
15589    return {
15590      id: "__EMPTY_ITEM__",
15591      disabled: true,
15592      rowId
15593    };
15594  }
15595  function normalizeRows(rows, activeId, focusShift) {
15596    const maxLength = getMaxRowLength(rows);
15597    for (const row of rows) {
15598      for (let i = 0; i < maxLength; i += 1) {
15599        const item = row[i];
15600        if (!item || focusShift && item.disabled) {
15601          const isFirst = i === 0;
15602          const previousItem = isFirst && focusShift ? IERTEJ3A_findFirstEnabledItem(row) : row[i - 1];
15603          row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId);
15604        }
15605      }
15606    }
15607    return rows;
15608  }
15609  function verticalizeItems(items) {
15610    const rows = IERTEJ3A_groupItemsByRows(items);
15611    const maxLength = getMaxRowLength(rows);
15612    const verticalized = [];
15613    for (let i = 0; i < maxLength; i += 1) {
15614      for (const row of rows) {
15615        const item = row[i];
15616        if (item) {
15617          verticalized.push(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, item), {
15618            // If there's no rowId, it means that it's not a grid composite, but
15619            // a single row instead. So, instead of verticalizing it, that is,
15620            // assigning a different rowId based on the column index, we keep it
15621            // undefined so they will be part of the same row. This is useful
15622            // when using up/down on one-dimensional composites.
15623            rowId: item.rowId ? `$i}` : void 0
15624          }));
15625        }
15626      }
15627    }
15628    return verticalized;
15629  }
15630  function createCompositeStore(props = {}) {
15631    var _a;
15632    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
15633    const collection = createCollectionStore(props);
15634    const activeId = defaultValue(
15635      props.activeId,
15636      syncState == null ? void 0 : syncState.activeId,
15637      props.defaultActiveId
15638    );
15639    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, collection.getState()), {
15640      activeId,
15641      baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null),
15642      includesBaseElement: defaultValue(
15643        props.includesBaseElement,
15644        syncState == null ? void 0 : syncState.includesBaseElement,
15645        activeId === null
15646      ),
15647      moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0),
15648      orientation: defaultValue(
15649        props.orientation,
15650        syncState == null ? void 0 : syncState.orientation,
15651        "both"
15652      ),
15653      rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false),
15654      virtualFocus: defaultValue(
15655        props.virtualFocus,
15656        syncState == null ? void 0 : syncState.virtualFocus,
15657        false
15658      ),
15659      focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false),
15660      focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false),
15661      focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false)
15662    });
15663    const composite = createStore(initialState, collection, props.store);
15664    setup(
15665      composite,
15666      () => sync(composite, ["renderedItems", "activeId"], (state) => {
15667        composite.setState("activeId", (activeId2) => {
15668          var _a2;
15669          if (activeId2 !== void 0)
15670            return activeId2;
15671          return (_a2 = IERTEJ3A_findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id;
15672        });
15673      })
15674    );
15675    const getNextId = (items, orientation, hasNullItem, skip) => {
15676      var _a2, _b;
15677      const { activeId: activeId2, rtl, focusLoop, focusWrap, includesBaseElement } = composite.getState();
15678      const isHorizontal = orientation !== "vertical";
15679      const isRTL = rtl && isHorizontal;
15680      const allItems = isRTL ? reverseArray(items) : items;
15681      if (activeId2 == null) {
15682        return (_a2 = IERTEJ3A_findFirstEnabledItem(allItems)) == null ? void 0 : _a2.id;
15683      }
15684      const activeItem = allItems.find((item) => item.id === activeId2);
15685      if (!activeItem) {
15686        return (_b = IERTEJ3A_findFirstEnabledItem(allItems)) == null ? void 0 : _b.id;
15687      }
15688      const isGrid = !!activeItem.rowId;
15689      const activeIndex = allItems.indexOf(activeItem);
15690      const nextItems = allItems.slice(activeIndex + 1);
15691      const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
15692      if (skip !== void 0) {
15693        const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
15694        const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one.
15695        nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1];
15696        return nextItem2 == null ? void 0 : nextItem2.id;
15697      }
15698      const oppositeOrientation = getOppositeOrientation(
15699        // If it's a grid and orientation is not set, it's a next/previous call,
15700        // which is inherently horizontal. up/down will call next with orientation
15701        // set to vertical by default (see below on up/down methods).
15702        isGrid ? orientation || "horizontal" : orientation
15703      );
15704      const canLoop = focusLoop && focusLoop !== oppositeOrientation;
15705      const canWrap = isGrid && focusWrap && focusWrap !== oppositeOrientation;
15706      hasNullItem = hasNullItem || !isGrid && canLoop && includesBaseElement;
15707      if (canLoop) {
15708        const loopItems = canWrap && !hasNullItem ? allItems : getItemsInRow(allItems, activeItem.rowId);
15709        const sortedItems = IERTEJ3A_flipItems(loopItems, activeId2, hasNullItem);
15710        const nextItem2 = IERTEJ3A_findFirstEnabledItem(sortedItems, activeId2);
15711        return nextItem2 == null ? void 0 : nextItem2.id;
15712      }
15713      if (canWrap) {
15714        const nextItem2 = IERTEJ3A_findFirstEnabledItem(
15715          // We can use nextItems, which contains all the next items, including
15716          // items from other rows, to wrap between rows. However, if there is a
15717          // null item (the composite container), we'll only use the next items in
15718          // the row. So moving next from the last item will focus on the
15719          // composite container. On grid composites, horizontal navigation never
15720          // focuses on the composite container, only vertical.
15721          hasNullItem ? nextItemsInRow : nextItems,
15722          activeId2
15723        );
15724        const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id;
15725        return nextId;
15726      }
15727      const nextItem = IERTEJ3A_findFirstEnabledItem(nextItemsInRow, activeId2);
15728      if (!nextItem && hasNullItem) {
15729        return null;
15730      }
15731      return nextItem == null ? void 0 : nextItem.id;
15732    };
15733    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, collection), composite), {
15734      setBaseElement: (element) => composite.setState("baseElement", element),
15735      setActiveId: (id) => composite.setState("activeId", id),
15736      move: (id) => {
15737        if (id === void 0)
15738          return;
15739        composite.setState("activeId", id);
15740        composite.setState("moves", (moves) => moves + 1);
15741      },
15742      first: () => {
15743        var _a2;
15744        return (_a2 = IERTEJ3A_findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id;
15745      },
15746      last: () => {
15747        var _a2;
15748        return (_a2 = IERTEJ3A_findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id;
15749      },
15750      next: (skip) => {
15751        const { renderedItems, orientation } = composite.getState();
15752        return getNextId(renderedItems, orientation, false, skip);
15753      },
15754      previous: (skip) => {
15755        var _a2;
15756        const { renderedItems, orientation, includesBaseElement } = composite.getState();
15757        const isGrid = !!((_a2 = IERTEJ3A_findFirstEnabledItem(renderedItems)) == null ? void 0 : _a2.rowId);
15758        const hasNullItem = !isGrid && includesBaseElement;
15759        return getNextId(
15760          reverseArray(renderedItems),
15761          orientation,
15762          hasNullItem,
15763          skip
15764        );
15765      },
15766      down: (skip) => {
15767        const {
15768          activeId: activeId2,
15769          renderedItems,
15770          focusShift,
15771          focusLoop,
15772          includesBaseElement
15773        } = composite.getState();
15774        const shouldShift = focusShift && !skip;
15775        const verticalItems = verticalizeItems(
15776          flatten2DArray(
15777            normalizeRows(IERTEJ3A_groupItemsByRows(renderedItems), activeId2, shouldShift)
15778          )
15779        );
15780        const canLoop = focusLoop && focusLoop !== "horizontal";
15781        const hasNullItem = canLoop && includesBaseElement;
15782        return getNextId(verticalItems, "vertical", hasNullItem, skip);
15783      },
15784      up: (skip) => {
15785        const { activeId: activeId2, renderedItems, focusShift, includesBaseElement } = composite.getState();
15786        const shouldShift = focusShift && !skip;
15787        const verticalItems = verticalizeItems(
15788          reverseArray(
15789            flatten2DArray(
15790              normalizeRows(
15791                IERTEJ3A_groupItemsByRows(renderedItems),
15792                activeId2,
15793                shouldShift
15794              )
15795            )
15796          )
15797        );
15798        const hasNullItem = includesBaseElement;
15799        return getNextId(verticalItems, "vertical", hasNullItem, skip);
15800      }
15801    });
15802  }
15803  
15804  
15805  
15806  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7GBW5FLS.js
15807  "use client";
15808  
15809  
15810  
15811  // src/composite/composite-store.ts
15812  
15813  function useCompositeStoreProps(store, update, props) {
15814    store = useCollectionStoreProps(store, update, props);
15815    useStoreProps(store, props, "activeId", "setActiveId");
15816    useStoreProps(store, props, "includesBaseElement");
15817    useStoreProps(store, props, "virtualFocus");
15818    useStoreProps(store, props, "orientation");
15819    useStoreProps(store, props, "rtl");
15820    useStoreProps(store, props, "focusLoop");
15821    useStoreProps(store, props, "focusWrap");
15822    useStoreProps(store, props, "focusShift");
15823    return store;
15824  }
15825  function useCompositeStore(props = {}) {
15826    const [store, update] = EKQEJRUF_useStore(createCompositeStore, props);
15827    return useCompositeStoreProps(store, update, props);
15828  }
15829  
15830  
15831  
15832  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7QTPYGNZ.js
15833  "use client";
15834  
15835  
15836  
15837  
15838  
15839  
15840  
15841  // src/composite/composite.tsx
15842  
15843  
15844  
15845  
15846  
15847  
15848  
15849  function isGrid(items) {
15850    return items.some((item) => !!item.rowId);
15851  }
15852  function isPrintableKey(event) {
15853    const target = event.target;
15854    if (target && !DLOEKDPY_isTextField(target))
15855      return false;
15856    return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
15857  }
15858  function isModifierKey(event) {
15859    return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
15860  }
15861  function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
15862    return useEvent((event) => {
15863      var _a;
15864      onKeyboardEvent == null ? void 0 : onKeyboardEvent(event);
15865      if (event.defaultPrevented)
15866        return;
15867      if (event.isPropagationStopped())
15868        return;
15869      if (!isSelfTarget(event))
15870        return;
15871      if (isModifierKey(event))
15872        return;
15873      if (isPrintableKey(event))
15874        return;
15875      const state = store.getState();
15876      const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element;
15877      if (!activeElement)
15878        return;
15879      const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]);
15880      const previousElement = previousElementRef == null ? void 0 : previousElementRef.current;
15881      if (activeElement !== previousElement) {
15882        activeElement.focus();
15883      }
15884      if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {
15885        event.preventDefault();
15886      }
15887      if (event.currentTarget.contains(activeElement)) {
15888        event.stopPropagation();
15889      }
15890    });
15891  }
15892  function findFirstEnabledItemInTheLastRow(items) {
15893    return findFirstEnabledItem(
15894      flatten2DArray(reverseArray(groupItemsByRows(items)))
15895    );
15896  }
15897  function useScheduleFocus(store) {
15898    const [scheduled, setScheduled] = (0,external_React_.useState)(false);
15899    const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []);
15900    const activeItem = store.useState(
15901      (state) => getEnabledItem(store, state.activeId)
15902    );
15903    (0,external_React_.useEffect)(() => {
15904      const activeElement = activeItem == null ? void 0 : activeItem.element;
15905      if (!scheduled)
15906        return;
15907      if (!activeElement)
15908        return;
15909      setScheduled(false);
15910      activeElement.focus({ preventScroll: true });
15911    }, [activeItem, scheduled]);
15912    return schedule;
15913  }
15914  var useComposite = createHook(
15915    (_a) => {
15916      var _b = _a, {
15917        store,
15918        composite = true,
15919        focusOnMove = composite,
15920        moveOnKeyPress = true
15921      } = _b, props = __objRest(_b, [
15922        "store",
15923        "composite",
15924        "focusOnMove",
15925        "moveOnKeyPress"
15926      ]);
15927      const context = useCompositeProviderContext();
15928      store = store || context;
15929      invariant(
15930        store,
15931         false && 0
15932      );
15933      const previousElementRef = (0,external_React_.useRef)(null);
15934      const scheduleFocus = useScheduleFocus(store);
15935      const moves = store.useState("moves");
15936      (0,external_React_.useEffect)(() => {
15937        var _a2;
15938        if (!store)
15939          return;
15940        if (!moves)
15941          return;
15942        if (!composite)
15943          return;
15944        if (!focusOnMove)
15945          return;
15946        const { activeId: activeId2 } = store.getState();
15947        const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
15948        if (!itemElement)
15949          return;
15950        focusIntoView(itemElement);
15951      }, [store, moves, composite, focusOnMove]);
15952      useSafeLayoutEffect(() => {
15953        if (!store)
15954          return;
15955        if (!moves)
15956          return;
15957        if (!composite)
15958          return;
15959        const { baseElement, activeId: activeId2 } = store.getState();
15960        const isSelfAcive = activeId2 === null;
15961        if (!isSelfAcive)
15962          return;
15963        if (!baseElement)
15964          return;
15965        const previousElement = previousElementRef.current;
15966        previousElementRef.current = null;
15967        if (previousElement) {
15968          fireBlurEvent(previousElement, { relatedTarget: baseElement });
15969        }
15970        if (!hasFocus(baseElement)) {
15971          baseElement.focus();
15972        }
15973      }, [store, moves, composite]);
15974      const activeId = store.useState("activeId");
15975      const virtualFocus = store.useState("virtualFocus");
15976      useSafeLayoutEffect(() => {
15977        var _a2;
15978        if (!store)
15979          return;
15980        if (!composite)
15981          return;
15982        if (!virtualFocus)
15983          return;
15984        const previousElement = previousElementRef.current;
15985        previousElementRef.current = null;
15986        if (!previousElement)
15987          return;
15988        const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element;
15989        const relatedTarget = activeElement || getActiveElement(previousElement);
15990        if (relatedTarget === previousElement)
15991          return;
15992        fireBlurEvent(previousElement, { relatedTarget });
15993      }, [store, activeId, virtualFocus, composite]);
15994      const onKeyDownCapture = useKeyboardEventProxy(
15995        store,
15996        props.onKeyDownCapture,
15997        previousElementRef
15998      );
15999      const onKeyUpCapture = useKeyboardEventProxy(
16000        store,
16001        props.onKeyUpCapture,
16002        previousElementRef
16003      );
16004      const onFocusCaptureProp = props.onFocusCapture;
16005      const onFocusCapture = useEvent((event) => {
16006        onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
16007        if (event.defaultPrevented)
16008          return;
16009        if (!store)
16010          return;
16011        const { virtualFocus: virtualFocus2 } = store.getState();
16012        if (!virtualFocus2)
16013          return;
16014        const previousActiveElement = event.relatedTarget;
16015        const isSilentlyFocused = silentlyFocused(event.currentTarget);
16016        if (isSelfTarget(event) && isSilentlyFocused) {
16017          event.stopPropagation();
16018          previousElementRef.current = previousActiveElement;
16019        }
16020      });
16021      const onFocusProp = props.onFocus;
16022      const onFocus = useEvent((event) => {
16023        onFocusProp == null ? void 0 : onFocusProp(event);
16024        if (event.defaultPrevented)
16025          return;
16026        if (!composite)
16027          return;
16028        if (!store)
16029          return;
16030        const { relatedTarget } = event;
16031        const { virtualFocus: virtualFocus2 } = store.getState();
16032        if (virtualFocus2) {
16033          if (isSelfTarget(event) && !isItem(store, relatedTarget)) {
16034            queueMicrotask(scheduleFocus);
16035          }
16036        } else if (isSelfTarget(event)) {
16037          store.setActiveId(null);
16038        }
16039      });
16040      const onBlurCaptureProp = props.onBlurCapture;
16041      const onBlurCapture = useEvent((event) => {
16042        var _a2;
16043        onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event);
16044        if (event.defaultPrevented)
16045          return;
16046        if (!store)
16047          return;
16048        const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState();
16049        if (!virtualFocus2)
16050          return;
16051        const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element;
16052        const nextActiveElement = event.relatedTarget;
16053        const nextActiveElementIsItem = isItem(store, nextActiveElement);
16054        const previousElement = previousElementRef.current;
16055        previousElementRef.current = null;
16056        if (isSelfTarget(event) && nextActiveElementIsItem) {
16057          if (nextActiveElement === activeElement) {
16058            if (previousElement && previousElement !== nextActiveElement) {
16059              fireBlurEvent(previousElement, event);
16060            }
16061          } else if (activeElement) {
16062            fireBlurEvent(activeElement, event);
16063          } else if (previousElement) {
16064            fireBlurEvent(previousElement, event);
16065          }
16066          event.stopPropagation();
16067        } else {
16068          const targetIsItem = isItem(store, event.target);
16069          if (!targetIsItem && activeElement) {
16070            fireBlurEvent(activeElement, event);
16071          }
16072        }
16073      });
16074      const onKeyDownProp = props.onKeyDown;
16075      const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
16076      const onKeyDown = useEvent((event) => {
16077        var _a2;
16078        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
16079        if (event.defaultPrevented)
16080          return;
16081        if (!store)
16082          return;
16083        if (!isSelfTarget(event))
16084          return;
16085        const { orientation, items, renderedItems, activeId: activeId2 } = store.getState();
16086        const activeItem = getEnabledItem(store, activeId2);
16087        if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected)
16088          return;
16089        const isVertical = orientation !== "horizontal";
16090        const isHorizontal = orientation !== "vertical";
16091        const grid = isGrid(renderedItems);
16092        const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
16093        if (isHorizontalKey && DLOEKDPY_isTextField(event.currentTarget))
16094          return;
16095        const up = () => {
16096          if (grid) {
16097            const item = items && findFirstEnabledItemInTheLastRow(items);
16098            return item == null ? void 0 : item.id;
16099          }
16100          return store == null ? void 0 : store.last();
16101        };
16102        const keyMap = {
16103          ArrowUp: (grid || isVertical) && up,
16104          ArrowRight: (grid || isHorizontal) && store.first,
16105          ArrowDown: (grid || isVertical) && store.first,
16106          ArrowLeft: (grid || isHorizontal) && store.last,
16107          Home: store.first,
16108          End: store.last,
16109          PageUp: store.first,
16110          PageDown: store.last
16111        };
16112        const action = keyMap[event.key];
16113        if (action) {
16114          const id = action();
16115          if (id !== void 0) {
16116            if (!moveOnKeyPressProp(event))
16117              return;
16118            event.preventDefault();
16119            store.move(id);
16120          }
16121        }
16122      });
16123      props = useWrapElement(
16124        props,
16125        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeContextProvider, { value: store, children: element }),
16126        [store]
16127      );
16128      const activeDescendant = store.useState((state) => {
16129        var _a2;
16130        if (!store)
16131          return;
16132        if (!composite)
16133          return;
16134        if (!state.virtualFocus)
16135          return;
16136        return (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id;
16137      });
16138      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
16139        "aria-activedescendant": activeDescendant
16140      }, props), {
16141        ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref),
16142        onKeyDownCapture,
16143        onKeyUpCapture,
16144        onFocusCapture,
16145        onFocus,
16146        onBlurCapture,
16147        onKeyDown
16148      });
16149      const focusable = store.useState(
16150        (state) => composite && (state.virtualFocus || state.activeId === null)
16151      );
16152      props = useFocusable(_4R3V3JGP_spreadValues({ focusable }, props));
16153      return props;
16154    }
16155  );
16156  var Composite = createComponent((props) => {
16157    const htmlProps = useComposite(props);
16158    return _3ORBWXWF_createElement("div", htmlProps);
16159  });
16160  if (false) {}
16161  
16162  
16163  
16164  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BNUFNEVY.js
16165  "use client";
16166  
16167  
16168  
16169  
16170  
16171  // src/composite/composite-row.tsx
16172  
16173  
16174  
16175  var useCompositeRow = createHook(
16176    (_a) => {
16177      var _b = _a, {
16178        store,
16179        "aria-setsize": ariaSetSize,
16180        "aria-posinset": ariaPosInSet
16181      } = _b, props = __objRest(_b, [
16182        "store",
16183        "aria-setsize",
16184        "aria-posinset"
16185      ]);
16186      const context = useCompositeContext();
16187      store = store || context;
16188      invariant(
16189        store,
16190         false && 0
16191      );
16192      const id = useId(props.id);
16193      const baseElement = store.useState(
16194        (state) => state.baseElement || void 0
16195      );
16196      const providerValue = (0,external_React_.useMemo)(
16197        () => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
16198        [id, baseElement, ariaSetSize, ariaPosInSet]
16199      );
16200      props = useWrapElement(
16201        props,
16202        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeRowContext.Provider, { value: providerValue, children: element }),
16203        [providerValue]
16204      );
16205      props = _4R3V3JGP_spreadValues({ id }, props);
16206      return props;
16207    }
16208  );
16209  var CompositeRow = createComponent((props) => {
16210    const htmlProps = useCompositeRow(props);
16211    return _3ORBWXWF_createElement("div", htmlProps);
16212  });
16213  if (false) {}
16214  
16215  
16216  
16217  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
16218  
16219  function 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)."; }
16220  /**
16221   * External dependencies
16222   */
16223  
16224  
16225  
16226  /**
16227   * Internal dependencies
16228   */
16229  
16230  const alignment_matrix_control_icon_styles_rootSize = () => {
16231    const padding = 1.5;
16232    const size = 24;
16233    return /*#__PURE__*/emotion_react_browser_esm_css({
16234      gridTemplateRows: `repeat( 3, calc( $size - padding * 2}px / 3))`,
16235      padding,
16236      maxHeight: size,
16237      maxWidth: size
16238    },  true ? "" : 0,  true ? "" : 0);
16239  };
16240  const rootPointerEvents = ({
16241    disablePointerEvents
16242  }) => {
16243    return /*#__PURE__*/emotion_react_browser_esm_css({
16244      pointerEvents: disablePointerEvents ? 'none' : undefined
16245    },  true ? "" : 0,  true ? "" : 0);
16246  };
16247  const Wrapper = emotion_styled_base_browser_esm("div",  true ? {
16248    target: "erowt52"
16249  } : 0)( true ? {
16250    name: "ogl07i",
16251    styles: "box-sizing:border-box;padding:2px"
16252  } : 0);
16253  const alignment_matrix_control_icon_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
16254    target: "erowt51"
16255  } : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0));
16256  const alignment_matrix_control_icon_styles_pointActive = ({
16257    isActive
16258  }) => {
16259    const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
16260    return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0),  true ? "" : 0);
16261  };
16262  const alignment_matrix_control_icon_styles_Point = emotion_styled_base_browser_esm("span",  true ? {
16263    target: "erowt50"
16264  } : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0));
16265  const alignment_matrix_control_icon_styles_Cell = Cell;
16266  
16267  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js
16268  
16269  /**
16270   * External dependencies
16271   */
16272  
16273  
16274  /**
16275   * Internal dependencies
16276   */
16277  
16278  
16279  const BASE_SIZE = 24;
16280  function AlignmentMatrixControlIcon({
16281    className,
16282    disablePointerEvents = true,
16283    size = BASE_SIZE,
16284    style = {},
16285    value = 'center',
16286    ...props
16287  }) {
16288    const alignIndex = getAlignmentIndex(value);
16289    const scale = (size / BASE_SIZE).toFixed(2);
16290    const classes = classnames_default()('component-alignment-matrix-control-icon', className);
16291    const styles = {
16292      ...style,
16293      transform: `scale($scale})`
16294    };
16295    return (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Root, {
16296      ...props,
16297      className: classes,
16298      disablePointerEvents: disablePointerEvents,
16299      role: "presentation",
16300      style: styles
16301    }, ALIGNMENTS.map((align, index) => {
16302      const isActive = alignIndex === index;
16303      return (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Cell, {
16304        key: align
16305      }, (0,external_React_.createElement)(alignment_matrix_control_icon_styles_Point, {
16306        isActive: isActive
16307      }));
16308    }));
16309  }
16310  /* harmony default export */ const icon = (AlignmentMatrixControlIcon);
16311  
16312  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js
16313  
16314  /**
16315   * External dependencies
16316   */
16317  
16318  
16319  /**
16320   * WordPress dependencies
16321   */
16322  
16323  
16324  
16325  /**
16326   * Internal dependencies
16327   */
16328  
16329  
16330  
16331  
16332  
16333  /**
16334   *
16335   * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
16336   *
16337   * ```jsx
16338   * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
16339   * import { useState } from '@wordpress/element';
16340   *
16341   * const Example = () => {
16342   *     const [ alignment, setAlignment ] = useState( 'center center' );
16343   *
16344   *     return (
16345   *         <AlignmentMatrixControl
16346   *             value={ alignment }
16347   *             onChange={ setAlignment }
16348   *         />
16349   *     );
16350   * };
16351   * ```
16352   */
16353  function AlignmentMatrixControl({
16354    className,
16355    id,
16356    label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'),
16357    defaultValue = 'center center',
16358    value,
16359    onChange,
16360    width = 92,
16361    ...props
16362  }) {
16363    const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
16364    const compositeStore = useCompositeStore({
16365      defaultActiveId: getItemId(baseId, defaultValue),
16366      activeId: getItemId(baseId, value),
16367      setActiveId: nextActiveId => {
16368        const nextValue = getItemValue(baseId, nextActiveId);
16369        if (nextValue) onChange?.(nextValue);
16370      },
16371      rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
16372    });
16373    const activeId = compositeStore.useState('activeId');
16374    const classes = classnames_default()('component-alignment-matrix-control', className);
16375    return (0,external_React_.createElement)(Composite, {
16376      store: compositeStore,
16377      render: (0,external_React_.createElement)(Root, {
16378        ...props,
16379        "aria-label": label,
16380        className: classes,
16381        id: baseId,
16382        role: "grid",
16383        size: width
16384      })
16385    }, GRID.map((cells, index) => (0,external_React_.createElement)(CompositeRow, {
16386      render: (0,external_React_.createElement)(Row, {
16387        role: "row"
16388      }),
16389      key: index
16390    }, cells.map(cell => {
16391      const cellId = getItemId(baseId, cell);
16392      const isActive = cellId === activeId;
16393      return (0,external_React_.createElement)(cell_Cell, {
16394        id: cellId,
16395        isActive: isActive,
16396        key: cell,
16397        value: cell
16398      });
16399    }))));
16400  }
16401  AlignmentMatrixControl.Icon = icon;
16402  /* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl);
16403  
16404  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/animate/index.js
16405  /**
16406   * External dependencies
16407   */
16408  
16409  
16410  /**
16411   * Internal dependencies
16412   */
16413  
16414  /**
16415   * @param type The animation type
16416   * @return Default origin
16417   */
16418  function getDefaultOrigin(type) {
16419    return type === 'appear' ? 'top' : 'left';
16420  }
16421  
16422  /**
16423   * @param options
16424   *
16425   * @return ClassName that applies the animations
16426   */
16427  function getAnimateClassName(options) {
16428    if (options.type === 'loading') {
16429      return classnames_default()('components-animate__loading');
16430    }
16431    const {
16432      type,
16433      origin = getDefaultOrigin(type)
16434    } = options;
16435    if (type === 'appear') {
16436      const [yAxis, xAxis = 'center'] = origin.split(' ');
16437      return classnames_default()('components-animate__appear', {
16438        ['is-from-' + xAxis]: xAxis !== 'center',
16439        ['is-from-' + yAxis]: yAxis !== 'middle'
16440      });
16441    }
16442    if (type === 'slide-in') {
16443      return classnames_default()('components-animate__slide-in', 'is-from-' + origin);
16444    }
16445    return undefined;
16446  }
16447  
16448  /**
16449   * Simple interface to introduce animations to components.
16450   *
16451   * ```jsx
16452   * import { Animate, Notice } from '@wordpress/components';
16453   *
16454   * const MyAnimatedNotice = () => (
16455   *     <Animate type="slide-in" options={ { origin: 'top' } }>
16456   *         { ( { className } ) => (
16457   *             <Notice className={ className } status="success">
16458   *                 <p>Animation finished.</p>
16459   *             </Notice>
16460   *         ) }
16461   *     </Animate>
16462   * );
16463   * ```
16464   */
16465  function Animate({
16466    type,
16467    options = {},
16468    children
16469  }) {
16470    return children({
16471      className: getAnimateClassName({
16472        type,
16473        ...options
16474      })
16475    });
16476  }
16477  /* harmony default export */ const animate = (Animate);
16478  
16479  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
16480  
16481  
16482  /**
16483   * @public
16484   */
16485  const MotionConfigContext = (0,external_React_.createContext)({
16486      transformPagePoint: (p) => p,
16487      isStatic: false,
16488      reducedMotion: "never",
16489  });
16490  
16491  
16492  
16493  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
16494  
16495  
16496  const MotionContext = (0,external_React_.createContext)({});
16497  
16498  
16499  
16500  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs
16501  
16502  
16503  /**
16504   * @public
16505   */
16506  const PresenceContext_PresenceContext = (0,external_React_.createContext)(null);
16507  
16508  
16509  
16510  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-browser.mjs
16511  const is_browser_isBrowser = typeof document !== "undefined";
16512  
16513  
16514  
16515  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
16516  
16517  
16518  
16519  const useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect;
16520  
16521  
16522  
16523  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LazyContext.mjs
16524  
16525  
16526  const LazyContext = (0,external_React_.createContext)({ strict: false });
16527  
16528  
16529  
16530  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
16531  
16532  
16533  
16534  
16535  
16536  
16537  
16538  function useVisualElement(Component, visualState, props, createVisualElement) {
16539      const { visualElement: parent } = (0,external_React_.useContext)(MotionContext);
16540      const lazyContext = (0,external_React_.useContext)(LazyContext);
16541      const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext);
16542      const reducedMotionConfig = (0,external_React_.useContext)(MotionConfigContext).reducedMotion;
16543      const visualElementRef = (0,external_React_.useRef)();
16544      /**
16545       * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
16546       */
16547      createVisualElement = createVisualElement || lazyContext.renderer;
16548      if (!visualElementRef.current && createVisualElement) {
16549          visualElementRef.current = createVisualElement(Component, {
16550              visualState,
16551              parent,
16552              props,
16553              presenceContext,
16554              blockInitialAnimation: presenceContext
16555                  ? presenceContext.initial === false
16556                  : false,
16557              reducedMotionConfig,
16558          });
16559      }
16560      const visualElement = visualElementRef.current;
16561      (0,external_React_.useInsertionEffect)(() => {
16562          visualElement && visualElement.update(props, presenceContext);
16563      });
16564      /**
16565       * Cache this value as we want to know whether HandoffAppearAnimations
16566       * was present on initial render - it will be deleted after this.
16567       */
16568      const canHandoff = (0,external_React_.useRef)(Boolean(window.HandoffAppearAnimations));
16569      useIsomorphicLayoutEffect(() => {
16570          if (!visualElement)
16571              return;
16572          visualElement.render();
16573          /**
16574           * Ideally this function would always run in a useEffect.
16575           *
16576           * However, if we have optimised appear animations to handoff from,
16577           * it needs to happen synchronously to ensure there's no flash of
16578           * incorrect styles in the event of a hydration error.
16579           *
16580           * So if we detect a situtation where optimised appear animations
16581           * are running, we use useLayoutEffect to trigger animations.
16582           */
16583          if (canHandoff.current && visualElement.animationState) {
16584              visualElement.animationState.animateChanges();
16585          }
16586      });
16587      (0,external_React_.useEffect)(() => {
16588          if (!visualElement)
16589              return;
16590          visualElement.updateFeatures();
16591          if (!canHandoff.current && visualElement.animationState) {
16592              visualElement.animationState.animateChanges();
16593          }
16594          /**
16595           * Once we've handed off animations we can delete HandoffAppearAnimations
16596           * so components added after the initial render can animate changes
16597           * in useEffect vs useLayoutEffect.
16598           */
16599          window.HandoffAppearAnimations = undefined;
16600          canHandoff.current = false;
16601      });
16602      return visualElement;
16603  }
16604  
16605  
16606  
16607  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
16608  function isRefObject(ref) {
16609      return (typeof ref === "object" &&
16610          Object.prototype.hasOwnProperty.call(ref, "current"));
16611  }
16612  
16613  
16614  
16615  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
16616  
16617  
16618  
16619  /**
16620   * Creates a ref function that, when called, hydrates the provided
16621   * external ref and VisualElement.
16622   */
16623  function useMotionRef(visualState, visualElement, externalRef) {
16624      return (0,external_React_.useCallback)((instance) => {
16625          instance && visualState.mount && visualState.mount(instance);
16626          if (visualElement) {
16627              instance
16628                  ? visualElement.mount(instance)
16629                  : visualElement.unmount();
16630          }
16631          if (externalRef) {
16632              if (typeof externalRef === "function") {
16633                  externalRef(instance);
16634              }
16635              else if (isRefObject(externalRef)) {
16636                  externalRef.current = instance;
16637              }
16638          }
16639      }, 
16640      /**
16641       * Only pass a new ref callback to React if we've received a visual element
16642       * factory. Otherwise we'll be mounting/remounting every time externalRef
16643       * or other dependencies change.
16644       */
16645      [visualElement]);
16646  }
16647  
16648  
16649  
16650  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
16651  /**
16652   * Decides if the supplied variable is variant label
16653   */
16654  function isVariantLabel(v) {
16655      return typeof v === "string" || Array.isArray(v);
16656  }
16657  
16658  
16659  
16660  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
16661  function isAnimationControls(v) {
16662      return typeof v === "object" && typeof v.start === "function";
16663  }
16664  
16665  
16666  
16667  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
16668  const variantPriorityOrder = [
16669      "animate",
16670      "whileInView",
16671      "whileFocus",
16672      "whileHover",
16673      "whileTap",
16674      "whileDrag",
16675      "exit",
16676  ];
16677  const variantProps = ["initial", ...variantPriorityOrder];
16678  
16679  
16680  
16681  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
16682  
16683  
16684  
16685  
16686  function isControllingVariants(props) {
16687      return (isAnimationControls(props.animate) ||
16688          variantProps.some((name) => isVariantLabel(props[name])));
16689  }
16690  function isVariantNode(props) {
16691      return Boolean(isControllingVariants(props) || props.variants);
16692  }
16693  
16694  
16695  
16696  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
16697  
16698  
16699  
16700  function getCurrentTreeVariants(props, context) {
16701      if (isControllingVariants(props)) {
16702          const { initial, animate } = props;
16703          return {
16704              initial: initial === false || isVariantLabel(initial)
16705                  ? initial
16706                  : undefined,
16707              animate: isVariantLabel(animate) ? animate : undefined,
16708          };
16709      }
16710      return props.inherit !== false ? context : {};
16711  }
16712  
16713  
16714  
16715  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
16716  
16717  
16718  
16719  
16720  function useCreateMotionContext(props) {
16721      const { initial, animate } = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext));
16722      return (0,external_React_.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
16723  }
16724  function variantLabelsAsDependency(prop) {
16725      return Array.isArray(prop) ? prop.join(" ") : prop;
16726  }
16727  
16728  
16729  
16730  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs
16731  const featureProps = {
16732      animation: [
16733          "animate",
16734          "variants",
16735          "whileHover",
16736          "whileTap",
16737          "exit",
16738          "whileInView",
16739          "whileFocus",
16740          "whileDrag",
16741      ],
16742      exit: ["exit"],
16743      drag: ["drag", "dragControls"],
16744      focus: ["whileFocus"],
16745      hover: ["whileHover", "onHoverStart", "onHoverEnd"],
16746      tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
16747      pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
16748      inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
16749      layout: ["layout", "layoutId"],
16750  };
16751  const featureDefinitions = {};
16752  for (const key in featureProps) {
16753      featureDefinitions[key] = {
16754          isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
16755      };
16756  }
16757  
16758  
16759  
16760  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs
16761  
16762  
16763  function loadFeatures(features) {
16764      for (const key in features) {
16765          featureDefinitions[key] = {
16766              ...featureDefinitions[key],
16767              ...features[key],
16768          };
16769      }
16770  }
16771  
16772  
16773  
16774  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
16775  
16776  
16777  const LayoutGroupContext = (0,external_React_.createContext)({});
16778  
16779  
16780  
16781  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
16782  
16783  
16784  /**
16785   * Internal, exported only for usage in Framer
16786   */
16787  const SwitchLayoutGroupContext = (0,external_React_.createContext)({});
16788  
16789  
16790  
16791  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
16792  const motionComponentSymbol = Symbol.for("motionComponentSymbol");
16793  
16794  
16795  
16796  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/index.mjs
16797  
16798  
16799  
16800  
16801  
16802  
16803  
16804  
16805  
16806  
16807  
16808  
16809  
16810  
16811  /**
16812   * Create a `motion` component.
16813   *
16814   * This function accepts a Component argument, which can be either a string (ie "div"
16815   * for `motion.div`), or an actual React component.
16816   *
16817   * Alongside this is a config option which provides a way of rendering the provided
16818   * component "offline", or outside the React render cycle.
16819   */
16820  function motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
16821      preloadedFeatures && loadFeatures(preloadedFeatures);
16822      function MotionComponent(props, externalRef) {
16823          /**
16824           * If we need to measure the element we load this functionality in a
16825           * separate class component in order to gain access to getSnapshotBeforeUpdate.
16826           */
16827          let MeasureLayout;
16828          const configAndProps = {
16829              ...(0,external_React_.useContext)(MotionConfigContext),
16830              ...props,
16831              layoutId: useLayoutId(props),
16832          };
16833          const { isStatic } = configAndProps;
16834          const context = useCreateMotionContext(props);
16835          const visualState = useVisualState(props, isStatic);
16836          if (!isStatic && is_browser_isBrowser) {
16837              /**
16838               * Create a VisualElement for this component. A VisualElement provides a common
16839               * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
16840               * providing a way of rendering to these APIs outside of the React render loop
16841               * for more performant animations and interactions
16842               */
16843              context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
16844              /**
16845               * Load Motion gesture and animation features. These are rendered as renderless
16846               * components so each feature can optionally make use of React lifecycle methods.
16847               */
16848              const initialLayoutGroupConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext);
16849              const isStrict = (0,external_React_.useContext)(LazyContext).strict;
16850              if (context.visualElement) {
16851                  MeasureLayout = context.visualElement.loadFeatures(
16852                  // Note: Pass the full new combined props to correctly re-render dynamic feature components.
16853                  configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
16854              }
16855          }
16856          /**
16857           * The mount order and hierarchy is specific to ensure our element ref
16858           * is hydrated by the time features fire their effects.
16859           */
16860          return (external_React_.createElement(MotionContext.Provider, { value: context },
16861              MeasureLayout && context.visualElement ? (external_React_.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,
16862              useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
16863      }
16864      const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent);
16865      ForwardRefComponent[motionComponentSymbol] = Component;
16866      return ForwardRefComponent;
16867  }
16868  function useLayoutId({ layoutId }) {
16869      const layoutGroupId = (0,external_React_.useContext)(LayoutGroupContext).id;
16870      return layoutGroupId && layoutId !== undefined
16871          ? layoutGroupId + "-" + layoutId
16872          : layoutId;
16873  }
16874  
16875  
16876  
16877  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs
16878  
16879  
16880  /**
16881   * Convert any React component into a `motion` component. The provided component
16882   * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
16883   *
16884   * ```jsx
16885   * const Component = React.forwardRef((props, ref) => {
16886   *   return <div ref={ref} />
16887   * })
16888   *
16889   * const MotionComponent = motion(Component)
16890   * ```
16891   *
16892   * @public
16893   */
16894  function createMotionProxy(createConfig) {
16895      function custom(Component, customMotionComponentConfig = {}) {
16896          return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig));
16897      }
16898      if (typeof Proxy === "undefined") {
16899          return custom;
16900      }
16901      /**
16902       * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
16903       * Rather than generating them anew every render.
16904       */
16905      const componentCache = new Map();
16906      return new Proxy(custom, {
16907          /**
16908           * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
16909           * The prop name is passed through as `key` and we can use that to generate a `motion`
16910           * DOM component with that name.
16911           */
16912          get: (_target, key) => {
16913              /**
16914               * If this element doesn't exist in the component cache, create it and cache.
16915               */
16916              if (!componentCache.has(key)) {
16917                  componentCache.set(key, custom(key));
16918              }
16919              return componentCache.get(key);
16920          },
16921      });
16922  }
16923  
16924  
16925  
16926  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
16927  /**
16928   * We keep these listed seperately as we use the lowercase tag names as part
16929   * of the runtime bundle to detect SVG components
16930   */
16931  const lowercaseSVGElements = [
16932      "animate",
16933      "circle",
16934      "defs",
16935      "desc",
16936      "ellipse",
16937      "g",
16938      "image",
16939      "line",
16940      "filter",
16941      "marker",
16942      "mask",
16943      "metadata",
16944      "path",
16945      "pattern",
16946      "polygon",
16947      "polyline",
16948      "rect",
16949      "stop",
16950      "switch",
16951      "symbol",
16952      "svg",
16953      "text",
16954      "tspan",
16955      "use",
16956      "view",
16957  ];
16958  
16959  
16960  
16961  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
16962  
16963  
16964  function isSVGComponent(Component) {
16965      if (
16966      /**
16967       * If it's not a string, it's a custom React component. Currently we only support
16968       * HTML custom React components.
16969       */
16970      typeof Component !== "string" ||
16971          /**
16972           * If it contains a dash, the element is a custom HTML webcomponent.
16973           */
16974          Component.includes("-")) {
16975          return false;
16976      }
16977      else if (
16978      /**
16979       * If it's in our list of lowercase SVG tags, it's an SVG component
16980       */
16981      lowercaseSVGElements.indexOf(Component) > -1 ||
16982          /**
16983           * If it contains a capital letter, it's an SVG component
16984           */
16985          /[A-Z]/.test(Component)) {
16986          return true;
16987      }
16988      return false;
16989  }
16990  
16991  
16992  
16993  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
16994  const scaleCorrectors = {};
16995  function addScaleCorrector(correctors) {
16996      Object.assign(scaleCorrectors, correctors);
16997  }
16998  
16999  
17000  
17001  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
17002  /**
17003   * Generate a list of every possible transform key.
17004   */
17005  const transformPropOrder = [
17006      "transformPerspective",
17007      "x",
17008      "y",
17009      "z",
17010      "translateX",
17011      "translateY",
17012      "translateZ",
17013      "scale",
17014      "scaleX",
17015      "scaleY",
17016      "rotate",
17017      "rotateX",
17018      "rotateY",
17019      "rotateZ",
17020      "skew",
17021      "skewX",
17022      "skewY",
17023  ];
17024  /**
17025   * A quick lookup for transform props.
17026   */
17027  const transformProps = new Set(transformPropOrder);
17028  
17029  
17030  
17031  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
17032  
17033  
17034  
17035  function isForcedMotionValue(key, { layout, layoutId }) {
17036      return (transformProps.has(key) ||
17037          key.startsWith("origin") ||
17038          ((layout || layoutId !== undefined) &&
17039              (!!scaleCorrectors[key] || key === "opacity")));
17040  }
17041  
17042  
17043  
17044  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
17045  const isMotionValue = (value) => Boolean(value && value.getVelocity);
17046  
17047  
17048  
17049  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
17050  
17051  
17052  const translateAlias = {
17053      x: "translateX",
17054      y: "translateY",
17055      z: "translateZ",
17056      transformPerspective: "perspective",
17057  };
17058  const numTransforms = transformPropOrder.length;
17059  /**
17060   * Build a CSS transform style from individual x/y/scale etc properties.
17061   *
17062   * This outputs with a default order of transforms/scales/rotations, this can be customised by
17063   * providing a transformTemplate function.
17064   */
17065  function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
17066      // The transform string we're going to build into.
17067      let transformString = "";
17068      /**
17069       * Loop over all possible transforms in order, adding the ones that
17070       * are present to the transform string.
17071       */
17072      for (let i = 0; i < numTransforms; i++) {
17073          const key = transformPropOrder[i];
17074          if (transform[key] !== undefined) {
17075              const transformName = translateAlias[key] || key;
17076              transformString += `$transformName}($transform[key]}) `;
17077          }
17078      }
17079      if (enableHardwareAcceleration && !transform.z) {
17080          transformString += "translateZ(0)";
17081      }
17082      transformString = transformString.trim();
17083      // If we have a custom `transform` template, pass our transform values and
17084      // generated transformString to that before returning
17085      if (transformTemplate) {
17086          transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
17087      }
17088      else if (allowTransformNone && transformIsDefault) {
17089          transformString = "none";
17090      }
17091      return transformString;
17092  }
17093  
17094  
17095  
17096  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
17097  const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
17098  const isCSSVariableName = checkStringStartsWith("--");
17099  const isCSSVariableToken = checkStringStartsWith("var(--");
17100  const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
17101  
17102  
17103  
17104  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
17105  /**
17106   * Provided a value and a ValueType, returns the value as that value type.
17107   */
17108  const getValueAsType = (value, type) => {
17109      return type && typeof value === "number"
17110          ? type.transform(value)
17111          : value;
17112  };
17113  
17114  
17115  
17116  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/clamp.mjs
17117  const clamp_clamp = (min, max, v) => Math.min(Math.max(v, min), max);
17118  
17119  
17120  
17121  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
17122  
17123  
17124  const number = {
17125      test: (v) => typeof v === "number",
17126      parse: parseFloat,
17127      transform: (v) => v,
17128  };
17129  const alpha = {
17130      ...number,
17131      transform: (v) => clamp_clamp(0, 1, v),
17132  };
17133  const scale = {
17134      ...number,
17135      default: 1,
17136  };
17137  
17138  
17139  
17140  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/utils.mjs
17141  /**
17142   * TODO: When we move from string as a source of truth to data models
17143   * everything in this folder should probably be referred to as models vs types
17144   */
17145  // If this number is a decimal, make it just five decimal places
17146  // to avoid exponents
17147  const sanitize = (v) => Math.round(v * 100000) / 100000;
17148  const floatRegex = /(-)?([\d]*\.?[\d])+/g;
17149  const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
17150  const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
17151  function isString(v) {
17152      return typeof v === "string";
17153  }
17154  
17155  
17156  
17157  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
17158  
17159  
17160  const createUnitType = (unit) => ({
17161      test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
17162      parse: parseFloat,
17163      transform: (v) => `$v}$unit}`,
17164  });
17165  const degrees = createUnitType("deg");
17166  const percent = createUnitType("%");
17167  const px = createUnitType("px");
17168  const vh = createUnitType("vh");
17169  const vw = createUnitType("vw");
17170  const progressPercentage = {
17171      ...percent,
17172      parse: (v) => percent.parse(v) / 100,
17173      transform: (v) => percent.transform(v * 100),
17174  };
17175  
17176  
17177  
17178  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
17179  
17180  
17181  const type_int_int = {
17182      ...number,
17183      transform: Math.round,
17184  };
17185  
17186  
17187  
17188  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
17189  
17190  
17191  
17192  
17193  const numberValueTypes = {
17194      // Border props
17195      borderWidth: px,
17196      borderTopWidth: px,
17197      borderRightWidth: px,
17198      borderBottomWidth: px,
17199      borderLeftWidth: px,
17200      borderRadius: px,
17201      radius: px,
17202      borderTopLeftRadius: px,
17203      borderTopRightRadius: px,
17204      borderBottomRightRadius: px,
17205      borderBottomLeftRadius: px,
17206      // Positioning props
17207      width: px,
17208      maxWidth: px,
17209      height: px,
17210      maxHeight: px,
17211      size: px,
17212      top: px,
17213      right: px,
17214      bottom: px,
17215      left: px,
17216      // Spacing props
17217      padding: px,
17218      paddingTop: px,
17219      paddingRight: px,
17220      paddingBottom: px,
17221      paddingLeft: px,
17222      margin: px,
17223      marginTop: px,
17224      marginRight: px,
17225      marginBottom: px,
17226      marginLeft: px,
17227      // Transform props
17228      rotate: degrees,
17229      rotateX: degrees,
17230      rotateY: degrees,
17231      rotateZ: degrees,
17232      scale: scale,
17233      scaleX: scale,
17234      scaleY: scale,
17235      scaleZ: scale,
17236      skew: degrees,
17237      skewX: degrees,
17238      skewY: degrees,
17239      distance: px,
17240      translateX: px,
17241      translateY: px,
17242      translateZ: px,
17243      x: px,
17244      y: px,
17245      z: px,
17246      perspective: px,
17247      transformPerspective: px,
17248      opacity: alpha,
17249      originX: progressPercentage,
17250      originY: progressPercentage,
17251      originZ: px,
17252      // Misc
17253      zIndex: type_int_int,
17254      // SVG
17255      fillOpacity: alpha,
17256      strokeOpacity: alpha,
17257      numOctaves: type_int_int,
17258  };
17259  
17260  
17261  
17262  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
17263  
17264  
17265  
17266  
17267  
17268  
17269  function buildHTMLStyles(state, latestValues, options, transformTemplate) {
17270      const { style, vars, transform, transformOrigin } = state;
17271      // Track whether we encounter any transform or transformOrigin values.
17272      let hasTransform = false;
17273      let hasTransformOrigin = false;
17274      // Does the calculated transform essentially equal "none"?
17275      let transformIsNone = true;
17276      /**
17277       * Loop over all our latest animated values and decide whether to handle them
17278       * as a style or CSS variable.
17279       *
17280       * Transforms and transform origins are kept seperately for further processing.
17281       */
17282      for (const key in latestValues) {
17283          const value = latestValues[key];
17284          /**
17285           * If this is a CSS variable we don't do any further processing.
17286           */
17287          if (isCSSVariableName(key)) {
17288              vars[key] = value;
17289              continue;
17290          }
17291          // Convert the value to its default value type, ie 0 -> "0px"
17292          const valueType = numberValueTypes[key];
17293          const valueAsType = getValueAsType(value, valueType);
17294          if (transformProps.has(key)) {
17295              // If this is a transform, flag to enable further transform processing
17296              hasTransform = true;
17297              transform[key] = valueAsType;
17298              // If we already know we have a non-default transform, early return
17299              if (!transformIsNone)
17300                  continue;
17301              // Otherwise check to see if this is a default transform
17302              if (value !== (valueType.default || 0))
17303                  transformIsNone = false;
17304          }
17305          else if (key.startsWith("origin")) {
17306              // If this is a transform origin, flag and enable further transform-origin processing
17307              hasTransformOrigin = true;
17308              transformOrigin[key] = valueAsType;
17309          }
17310          else {
17311              style[key] = valueAsType;
17312          }
17313      }
17314      if (!latestValues.transform) {
17315          if (hasTransform || transformTemplate) {
17316              style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
17317          }
17318          else if (style.transform) {
17319              /**
17320               * If we have previously created a transform but currently don't have any,
17321               * reset transform style to none.
17322               */
17323              style.transform = "none";
17324          }
17325      }
17326      /**
17327       * Build a transformOrigin style. Uses the same defaults as the browser for
17328       * undefined origins.
17329       */
17330      if (hasTransformOrigin) {
17331          const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
17332          style.transformOrigin = `$originX} $originY} $originZ}`;
17333      }
17334  }
17335  
17336  
17337  
17338  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
17339  const createHtmlRenderState = () => ({
17340      style: {},
17341      transform: {},
17342      transformOrigin: {},
17343      vars: {},
17344  });
17345  
17346  
17347  
17348  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-props.mjs
17349  
17350  
17351  
17352  
17353  
17354  
17355  function copyRawValuesOnly(target, source, props) {
17356      for (const key in source) {
17357          if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
17358              target[key] = source[key];
17359          }
17360      }
17361  }
17362  function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
17363      return (0,external_React_.useMemo)(() => {
17364          const state = createHtmlRenderState();
17365          buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
17366          return Object.assign({}, state.vars, state.style);
17367      }, [visualState]);
17368  }
17369  function useStyle(props, visualState, isStatic) {
17370      const styleProp = props.style || {};
17371      const style = {};
17372      /**
17373       * Copy non-Motion Values straight into style
17374       */
17375      copyRawValuesOnly(style, styleProp, props);
17376      Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
17377      return props.transformValues ? props.transformValues(style) : style;
17378  }
17379  function useHTMLProps(props, visualState, isStatic) {
17380      // The `any` isn't ideal but it is the type of createElement props argument
17381      const htmlProps = {};
17382      const style = useStyle(props, visualState, isStatic);
17383      if (props.drag && props.dragListener !== false) {
17384          // Disable the ghost element when a user drags
17385          htmlProps.draggable = false;
17386          // Disable text selection
17387          style.userSelect =
17388              style.WebkitUserSelect =
17389                  style.WebkitTouchCallout =
17390                      "none";
17391          // Disable scrolling on the draggable direction
17392          style.touchAction =
17393              props.drag === true
17394                  ? "none"
17395                  : `pan-$props.drag === "x" ? "y" : "x"}`;
17396      }
17397      if (props.tabIndex === undefined &&
17398          (props.onTap || props.onTapStart || props.whileTap)) {
17399          htmlProps.tabIndex = 0;
17400      }
17401      htmlProps.style = style;
17402      return htmlProps;
17403  }
17404  
17405  
17406  
17407  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
17408  /**
17409   * A list of all valid MotionProps.
17410   *
17411   * @privateRemarks
17412   * This doesn't throw if a `MotionProp` name is missing - it should.
17413   */
17414  const validMotionProps = new Set([
17415      "animate",
17416      "exit",
17417      "variants",
17418      "initial",
17419      "style",
17420      "values",
17421      "variants",
17422      "transition",
17423      "transformTemplate",
17424      "transformValues",
17425      "custom",
17426      "inherit",
17427      "onLayoutAnimationStart",
17428      "onLayoutAnimationComplete",
17429      "onLayoutMeasure",
17430      "onBeforeLayoutMeasure",
17431      "onAnimationStart",
17432      "onAnimationComplete",
17433      "onUpdate",
17434      "onDragStart",
17435      "onDrag",
17436      "onDragEnd",
17437      "onMeasureDragConstraints",
17438      "onDirectionLock",
17439      "onDragTransitionEnd",
17440      "_dragX",
17441      "_dragY",
17442      "onHoverStart",
17443      "onHoverEnd",
17444      "onViewportEnter",
17445      "onViewportLeave",
17446      "ignoreStrict",
17447      "viewport",
17448  ]);
17449  /**
17450   * Check whether a prop name is a valid `MotionProp` key.
17451   *
17452   * @param key - Name of the property to check
17453   * @returns `true` is key is a valid `MotionProp`.
17454   *
17455   * @public
17456   */
17457  function isValidMotionProp(key) {
17458      return (key.startsWith("while") ||
17459          (key.startsWith("drag") && key !== "draggable") ||
17460          key.startsWith("layout") ||
17461          key.startsWith("onTap") ||
17462          key.startsWith("onPan") ||
17463          validMotionProps.has(key));
17464  }
17465  
17466  
17467  
17468  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs
17469  
17470  
17471  let shouldForward = (key) => !isValidMotionProp(key);
17472  function loadExternalIsValidProp(isValidProp) {
17473      if (!isValidProp)
17474          return;
17475      // Explicitly filter our events
17476      shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
17477  }
17478  /**
17479   * Emotion and Styled Components both allow users to pass through arbitrary props to their components
17480   * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
17481   * of these should be passed to the underlying DOM node.
17482   *
17483   * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
17484   * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
17485   * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
17486   * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
17487   *
17488   * By making it an optionalDependency we can offer this functionality only in the situations where it's
17489   * actually required.
17490   */
17491  try {
17492      /**
17493       * We attempt to import this package but require won't be defined in esm environments, in that case
17494       * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
17495       * in favour of explicit injection.
17496       */
17497      loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
17498  }
17499  catch (_a) {
17500      // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
17501  }
17502  function filterProps(props, isDom, forwardMotionProps) {
17503      const filteredProps = {};
17504      for (const key in props) {
17505          /**
17506           * values is considered a valid prop by Emotion, so if it's present
17507           * this will be rendered out to the DOM unless explicitly filtered.
17508           *
17509           * We check the type as it could be used with the `feColorMatrix`
17510           * element, which we support.
17511           */
17512          if (key === "values" && typeof props.values === "object")
17513              continue;
17514          if (shouldForward(key) ||
17515              (forwardMotionProps === true && isValidMotionProp(key)) ||
17516              (!isDom && !isValidMotionProp(key)) ||
17517              // If trying to use native HTML drag events, forward drag listeners
17518              (props["draggable"] && key.startsWith("onDrag"))) {
17519              filteredProps[key] = props[key];
17520          }
17521      }
17522      return filteredProps;
17523  }
17524  
17525  
17526  
17527  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs
17528  
17529  
17530  function calcOrigin(origin, offset, size) {
17531      return typeof origin === "string"
17532          ? origin
17533          : px.transform(offset + size * origin);
17534  }
17535  /**
17536   * The SVG transform origin defaults are different to CSS and is less intuitive,
17537   * so we use the measured dimensions of the SVG to reconcile these.
17538   */
17539  function calcSVGTransformOrigin(dimensions, originX, originY) {
17540      const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
17541      const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
17542      return `$pxOriginX} $pxOriginY}`;
17543  }
17544  
17545  
17546  
17547  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/path.mjs
17548  
17549  
17550  const dashKeys = {
17551      offset: "stroke-dashoffset",
17552      array: "stroke-dasharray",
17553  };
17554  const camelKeys = {
17555      offset: "strokeDashoffset",
17556      array: "strokeDasharray",
17557  };
17558  /**
17559   * Build SVG path properties. Uses the path's measured length to convert
17560   * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
17561   * and stroke-dasharray attributes.
17562   *
17563   * This function is mutative to reduce per-frame GC.
17564   */
17565  function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
17566      // Normalise path length by setting SVG attribute pathLength to 1
17567      attrs.pathLength = 1;
17568      // We use dash case when setting attributes directly to the DOM node and camel case
17569      // when defining props on a React component.
17570      const keys = useDashCase ? dashKeys : camelKeys;
17571      // Build the dash offset
17572      attrs[keys.offset] = px.transform(-offset);
17573      // Build the dash array
17574      const pathLength = px.transform(length);
17575      const pathSpacing = px.transform(spacing);
17576      attrs[keys.array] = `$pathLength} $pathSpacing}`;
17577  }
17578  
17579  
17580  
17581  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
17582  
17583  
17584  
17585  
17586  /**
17587   * Build SVG visual attrbutes, like cx and style.transform
17588   */
17589  function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
17590  // This is object creation, which we try to avoid per-frame.
17591  ...latest }, options, isSVGTag, transformTemplate) {
17592      buildHTMLStyles(state, latest, options, transformTemplate);
17593      /**
17594       * For svg tags we just want to make sure viewBox is animatable and treat all the styles
17595       * as normal HTML tags.
17596       */
17597      if (isSVGTag) {
17598          if (state.style.viewBox) {
17599              state.attrs.viewBox = state.style.viewBox;
17600          }
17601          return;
17602      }
17603      state.attrs = state.style;
17604      state.style = {};
17605      const { attrs, style, dimensions } = state;
17606      /**
17607       * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
17608       * and copy it into style.
17609       */
17610      if (attrs.transform) {
17611          if (dimensions)
17612              style.transform = attrs.transform;
17613          delete attrs.transform;
17614      }
17615      // Parse transformOrigin
17616      if (dimensions &&
17617          (originX !== undefined || originY !== undefined || style.transform)) {
17618          style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
17619      }
17620      // Render attrX/attrY/attrScale as attributes
17621      if (attrX !== undefined)
17622          attrs.x = attrX;
17623      if (attrY !== undefined)
17624          attrs.y = attrY;
17625      if (attrScale !== undefined)
17626          attrs.scale = attrScale;
17627      // Build SVG path if one has been defined
17628      if (pathLength !== undefined) {
17629          buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
17630      }
17631  }
17632  
17633  
17634  
17635  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
17636  
17637  
17638  const createSvgRenderState = () => ({
17639      ...createHtmlRenderState(),
17640      attrs: {},
17641  });
17642  
17643  
17644  
17645  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs
17646  const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
17647  
17648  
17649  
17650  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs
17651  
17652  
17653  
17654  
17655  
17656  
17657  function useSVGProps(props, visualState, _isStatic, Component) {
17658      const visualProps = (0,external_React_.useMemo)(() => {
17659          const state = createSvgRenderState();
17660          buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
17661          return {
17662              ...state.attrs,
17663              style: { ...state.style },
17664          };
17665      }, [visualState]);
17666      if (props.style) {
17667          const rawStyles = {};
17668          copyRawValuesOnly(rawStyles, props.style, props);
17669          visualProps.style = { ...rawStyles, ...visualProps.style };
17670      }
17671      return visualProps;
17672  }
17673  
17674  
17675  
17676  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs
17677  
17678  
17679  
17680  
17681  
17682  
17683  
17684  function createUseRender(forwardMotionProps = false) {
17685      const useRender = (Component, props, ref, { latestValues }, isStatic) => {
17686          const useVisualProps = isSVGComponent(Component)
17687              ? useSVGProps
17688              : useHTMLProps;
17689          const visualProps = useVisualProps(props, latestValues, isStatic, Component);
17690          const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
17691          const elementProps = {
17692              ...filteredProps,
17693              ...visualProps,
17694              ref,
17695          };
17696          /**
17697           * If component has been handed a motion value as its child,
17698           * memoise its initial value and render that. Subsequent updates
17699           * will be handled by the onChange handler
17700           */
17701          const { children } = props;
17702          const renderedChildren = (0,external_React_.useMemo)(() => (isMotionValue(children) ? children.get() : children), [children]);
17703          return (0,external_React_.createElement)(Component, {
17704              ...elementProps,
17705              children: renderedChildren,
17706          });
17707      };
17708      return useRender;
17709  }
17710  
17711  
17712  
17713  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
17714  /**
17715   * Convert camelCase to dash-case properties.
17716   */
17717  const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
17718  
17719  
17720  
17721  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs
17722  function renderHTML(element, { style, vars }, styleProp, projection) {
17723      Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
17724      // Loop over any CSS variables and assign those.
17725      for (const key in vars) {
17726          element.style.setProperty(key, vars[key]);
17727      }
17728  }
17729  
17730  
17731  
17732  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs
17733  /**
17734   * A set of attribute names that are always read/written as camel case.
17735   */
17736  const camelCaseAttributes = new Set([
17737      "baseFrequency",
17738      "diffuseConstant",
17739      "kernelMatrix",
17740      "kernelUnitLength",
17741      "keySplines",
17742      "keyTimes",
17743      "limitingConeAngle",
17744      "markerHeight",
17745      "markerWidth",
17746      "numOctaves",
17747      "targetX",
17748      "targetY",
17749      "surfaceScale",
17750      "specularConstant",
17751      "specularExponent",
17752      "stdDeviation",
17753      "tableValues",
17754      "viewBox",
17755      "gradientTransform",
17756      "pathLength",
17757      "startOffset",
17758      "textLength",
17759      "lengthAdjust",
17760  ]);
17761  
17762  
17763  
17764  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/render.mjs
17765  
17766  
17767  
17768  
17769  function renderSVG(element, renderState, _styleProp, projection) {
17770      renderHTML(element, renderState, undefined, projection);
17771      for (const key in renderState.attrs) {
17772          element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
17773      }
17774  }
17775  
17776  
17777  
17778  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
17779  
17780  
17781  
17782  function scrapeMotionValuesFromProps(props, prevProps) {
17783      const { style } = props;
17784      const newValues = {};
17785      for (const key in style) {
17786          if (isMotionValue(style[key]) ||
17787              (prevProps.style && isMotionValue(prevProps.style[key])) ||
17788              isForcedMotionValue(key, props)) {
17789              newValues[key] = style[key];
17790          }
17791      }
17792      return newValues;
17793  }
17794  
17795  
17796  
17797  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs
17798  
17799  
17800  
17801  
17802  function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) {
17803      const newValues = scrapeMotionValuesFromProps(props, prevProps);
17804      for (const key in props) {
17805          if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
17806              const targetKey = transformPropOrder.indexOf(key) !== -1
17807                  ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
17808                  : key;
17809              newValues[targetKey] = props[key];
17810          }
17811      }
17812      return newValues;
17813  }
17814  
17815  
17816  
17817  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
17818  function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
17819      /**
17820       * If the variant definition is a function, resolve.
17821       */
17822      if (typeof definition === "function") {
17823          definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
17824      }
17825      /**
17826       * If the variant definition is a variant label, or
17827       * the function returned a variant label, resolve.
17828       */
17829      if (typeof definition === "string") {
17830          definition = props.variants && props.variants[definition];
17831      }
17832      /**
17833       * At this point we've resolved both functions and variant labels,
17834       * but the resolved variant label might itself have been a function.
17835       * If so, resolve. This can only have returned a valid target object.
17836       */
17837      if (typeof definition === "function") {
17838          definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
17839      }
17840      return definition;
17841  }
17842  
17843  
17844  
17845  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-constant.mjs
17846  
17847  
17848  /**
17849   * Creates a constant value over the lifecycle of a component.
17850   *
17851   * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
17852   * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
17853   * you can ensure that initialisers don't execute twice or more.
17854   */
17855  function useConstant(init) {
17856      const ref = (0,external_React_.useRef)(null);
17857      if (ref.current === null) {
17858          ref.current = init();
17859      }
17860      return ref.current;
17861  }
17862  
17863  
17864  
17865  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs
17866  const isKeyframesTarget = (v) => {
17867      return Array.isArray(v);
17868  };
17869  
17870  
17871  
17872  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/resolve-value.mjs
17873  
17874  
17875  const isCustomValue = (v) => {
17876      return Boolean(v && typeof v === "object" && v.mix && v.toValue);
17877  };
17878  const resolveFinalValueInKeyframes = (v) => {
17879      // TODO maybe throw if v.length - 1 is placeholder token?
17880      return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
17881  };
17882  
17883  
17884  
17885  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs
17886  
17887  
17888  
17889  /**
17890   * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
17891   *
17892   * TODO: Remove and move to library
17893   */
17894  function resolveMotionValue(value) {
17895      const unwrappedValue = isMotionValue(value) ? value.get() : value;
17896      return isCustomValue(unwrappedValue)
17897          ? unwrappedValue.toValue()
17898          : unwrappedValue;
17899  }
17900  
17901  
17902  
17903  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
17904  
17905  
17906  
17907  
17908  
17909  
17910  
17911  
17912  
17913  function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
17914      const state = {
17915          latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
17916          renderState: createRenderState(),
17917      };
17918      if (onMount) {
17919          state.mount = (instance) => onMount(props, instance, state);
17920      }
17921      return state;
17922  }
17923  const makeUseVisualState = (config) => (props, isStatic) => {
17924      const context = (0,external_React_.useContext)(MotionContext);
17925      const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext);
17926      const make = () => makeState(config, props, context, presenceContext);
17927      return isStatic ? make() : useConstant(make);
17928  };
17929  function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
17930      const values = {};
17931      const motionValues = scrapeMotionValues(props, {});
17932      for (const key in motionValues) {
17933          values[key] = resolveMotionValue(motionValues[key]);
17934      }
17935      let { initial, animate } = props;
17936      const isControllingVariants$1 = isControllingVariants(props);
17937      const isVariantNode$1 = isVariantNode(props);
17938      if (context &&
17939          isVariantNode$1 &&
17940          !isControllingVariants$1 &&
17941          props.inherit !== false) {
17942          if (initial === undefined)
17943              initial = context.initial;
17944          if (animate === undefined)
17945              animate = context.animate;
17946      }
17947      let isInitialAnimationBlocked = presenceContext
17948          ? presenceContext.initial === false
17949          : false;
17950      isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
17951      const variantToSet = isInitialAnimationBlocked ? animate : initial;
17952      if (variantToSet &&
17953          typeof variantToSet !== "boolean" &&
17954          !isAnimationControls(variantToSet)) {
17955          const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
17956          list.forEach((definition) => {
17957              const resolved = resolveVariantFromProps(props, definition);
17958              if (!resolved)
17959                  return;
17960              const { transitionEnd, transition, ...target } = resolved;
17961              for (const key in target) {
17962                  let valueTarget = target[key];
17963                  if (Array.isArray(valueTarget)) {
17964                      /**
17965                       * Take final keyframe if the initial animation is blocked because
17966                       * we want to initialise at the end of that blocked animation.
17967                       */
17968                      const index = isInitialAnimationBlocked
17969                          ? valueTarget.length - 1
17970                          : 0;
17971                      valueTarget = valueTarget[index];
17972                  }
17973                  if (valueTarget !== null) {
17974                      values[key] = valueTarget;
17975                  }
17976              }
17977              for (const key in transitionEnd)
17978                  values[key] = transitionEnd[key];
17979          });
17980      }
17981      return values;
17982  }
17983  
17984  
17985  
17986  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/noop.mjs
17987  const noop_noop = (any) => any;
17988  
17989  
17990  
17991  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/render-step.mjs
17992  class Queue {
17993      constructor() {
17994          this.order = [];
17995          this.scheduled = new Set();
17996      }
17997      add(process) {
17998          if (!this.scheduled.has(process)) {
17999              this.scheduled.add(process);
18000              this.order.push(process);
18001              return true;
18002          }
18003      }
18004      remove(process) {
18005          const index = this.order.indexOf(process);
18006          if (index !== -1) {
18007              this.order.splice(index, 1);
18008              this.scheduled.delete(process);
18009          }
18010      }
18011      clear() {
18012          this.order.length = 0;
18013          this.scheduled.clear();
18014      }
18015  }
18016  function createRenderStep(runNextFrame) {
18017      /**
18018       * We create and reuse two queues, one to queue jobs for the current frame
18019       * and one for the next. We reuse to avoid triggering GC after x frames.
18020       */
18021      let thisFrame = new Queue();
18022      let nextFrame = new Queue();
18023      let numToRun = 0;
18024      /**
18025       * Track whether we're currently processing jobs in this step. This way
18026       * we can decide whether to schedule new jobs for this frame or next.
18027       */
18028      let isProcessing = false;
18029      let flushNextFrame = false;
18030      /**
18031       * A set of processes which were marked keepAlive when scheduled.
18032       */
18033      const toKeepAlive = new WeakSet();
18034      const step = {
18035          /**
18036           * Schedule a process to run on the next frame.
18037           */
18038          schedule: (callback, keepAlive = false, immediate = false) => {
18039              const addToCurrentFrame = immediate && isProcessing;
18040              const queue = addToCurrentFrame ? thisFrame : nextFrame;
18041              if (keepAlive)
18042                  toKeepAlive.add(callback);
18043              if (queue.add(callback) && addToCurrentFrame && isProcessing) {
18044                  // If we're adding it to the currently running queue, update its measured size
18045                  numToRun = thisFrame.order.length;
18046              }
18047              return callback;
18048          },
18049          /**
18050           * Cancel the provided callback from running on the next frame.
18051           */
18052          cancel: (callback) => {
18053              nextFrame.remove(callback);
18054              toKeepAlive.delete(callback);
18055          },
18056          /**
18057           * Execute all schedule callbacks.
18058           */
18059          process: (frameData) => {
18060              /**
18061               * If we're already processing we've probably been triggered by a flushSync
18062               * inside an existing process. Instead of executing, mark flushNextFrame
18063               * as true and ensure we flush the following frame at the end of this one.
18064               */
18065              if (isProcessing) {
18066                  flushNextFrame = true;
18067                  return;
18068              }
18069              isProcessing = true;
18070              [thisFrame, nextFrame] = [nextFrame, thisFrame];
18071              // Clear the next frame queue
18072              nextFrame.clear();
18073              // Execute this frame
18074              numToRun = thisFrame.order.length;
18075              if (numToRun) {
18076                  for (let i = 0; i < numToRun; i++) {
18077                      const callback = thisFrame.order[i];
18078                      callback(frameData);
18079                      if (toKeepAlive.has(callback)) {
18080                          step.schedule(callback);
18081                          runNextFrame();
18082                      }
18083                  }
18084              }
18085              isProcessing = false;
18086              if (flushNextFrame) {
18087                  flushNextFrame = false;
18088                  step.process(frameData);
18089              }
18090          },
18091      };
18092      return step;
18093  }
18094  
18095  
18096  
18097  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/batcher.mjs
18098  
18099  
18100  const stepsOrder = [
18101      "prepare",
18102      "read",
18103      "update",
18104      "preRender",
18105      "render",
18106      "postRender",
18107  ];
18108  const maxElapsed = 40;
18109  function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
18110      let runNextFrame = false;
18111      let useDefaultElapsed = true;
18112      const state = {
18113          delta: 0,
18114          timestamp: 0,
18115          isProcessing: false,
18116      };
18117      const steps = stepsOrder.reduce((acc, key) => {
18118          acc[key] = createRenderStep(() => (runNextFrame = true));
18119          return acc;
18120      }, {});
18121      const processStep = (stepId) => steps[stepId].process(state);
18122      const processBatch = () => {
18123          const timestamp = performance.now();
18124          runNextFrame = false;
18125          state.delta = useDefaultElapsed
18126              ? 1000 / 60
18127              : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
18128          state.timestamp = timestamp;
18129          state.isProcessing = true;
18130          stepsOrder.forEach(processStep);
18131          state.isProcessing = false;
18132          if (runNextFrame && allowKeepAlive) {
18133              useDefaultElapsed = false;
18134              scheduleNextBatch(processBatch);
18135          }
18136      };
18137      const wake = () => {
18138          runNextFrame = true;
18139          useDefaultElapsed = true;
18140          if (!state.isProcessing) {
18141              scheduleNextBatch(processBatch);
18142          }
18143      };
18144      const schedule = stepsOrder.reduce((acc, key) => {
18145          const step = steps[key];
18146          acc[key] = (process, keepAlive = false, immediate = false) => {
18147              if (!runNextFrame)
18148                  wake();
18149              return step.schedule(process, keepAlive, immediate);
18150          };
18151          return acc;
18152      }, {});
18153      const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
18154      return { schedule, cancel, state, steps };
18155  }
18156  
18157  
18158  
18159  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/frame.mjs
18160  
18161  
18162  
18163  const { schedule: frame_frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop_noop, true);
18164  
18165  
18166  
18167  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/config-motion.mjs
18168  
18169  
18170  
18171  
18172  
18173  
18174  
18175  
18176  const svgMotionConfig = {
18177      useVisualState: makeUseVisualState({
18178          scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps,
18179          createRenderState: createSvgRenderState,
18180          onMount: (props, instance, { renderState, latestValues }) => {
18181              frame_frame.read(() => {
18182                  try {
18183                      renderState.dimensions =
18184                          typeof instance.getBBox ===
18185                              "function"
18186                              ? instance.getBBox()
18187                              : instance.getBoundingClientRect();
18188                  }
18189                  catch (e) {
18190                      // Most likely trying to measure an unrendered element under Firefox
18191                      renderState.dimensions = {
18192                          x: 0,
18193                          y: 0,
18194                          width: 0,
18195                          height: 0,
18196                      };
18197                  }
18198              });
18199              frame_frame.render(() => {
18200                  buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
18201                  renderSVG(instance, renderState);
18202              });
18203          },
18204      }),
18205  };
18206  
18207  
18208  
18209  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/config-motion.mjs
18210  
18211  
18212  
18213  
18214  const htmlMotionConfig = {
18215      useVisualState: makeUseVisualState({
18216          scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
18217          createRenderState: createHtmlRenderState,
18218      }),
18219  };
18220  
18221  
18222  
18223  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs
18224  
18225  
18226  
18227  
18228  
18229  function create_config_createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {
18230      const baseConfig = isSVGComponent(Component)
18231          ? svgMotionConfig
18232          : htmlMotionConfig;
18233      return {
18234          ...baseConfig,
18235          preloadedFeatures,
18236          useRender: createUseRender(forwardMotionProps),
18237          createVisualElement,
18238          Component,
18239      };
18240  }
18241  
18242  
18243  
18244  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/add-dom-event.mjs
18245  function addDomEvent(target, eventName, handler, options = { passive: true }) {
18246      target.addEventListener(eventName, handler, options);
18247      return () => target.removeEventListener(eventName, handler);
18248  }
18249  
18250  
18251  
18252  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs
18253  const isPrimaryPointer = (event) => {
18254      if (event.pointerType === "mouse") {
18255          return typeof event.button !== "number" || event.button <= 0;
18256      }
18257      else {
18258          /**
18259           * isPrimary is true for all mice buttons, whereas every touch point
18260           * is regarded as its own input. So subsequent concurrent touch points
18261           * will be false.
18262           *
18263           * Specifically match against false here as incomplete versions of
18264           * PointerEvents in very old browser might have it set as undefined.
18265           */
18266          return event.isPrimary !== false;
18267      }
18268  };
18269  
18270  
18271  
18272  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/event-info.mjs
18273  
18274  
18275  function extractEventInfo(event, pointType = "page") {
18276      return {
18277          point: {
18278              x: event[pointType + "X"],
18279              y: event[pointType + "Y"],
18280          },
18281      };
18282  }
18283  const addPointerInfo = (handler) => {
18284      return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
18285  };
18286  
18287  
18288  
18289  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
18290  
18291  
18292  
18293  function addPointerEvent(target, eventName, handler, options) {
18294      return addDomEvent(target, eventName, addPointerInfo(handler), options);
18295  }
18296  
18297  
18298  
18299  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/pipe.mjs
18300  /**
18301   * Pipe
18302   * Compose other transformers to run linearily
18303   * pipe(min(20), max(40))
18304   * @param  {...functions} transformers
18305   * @return {function}
18306   */
18307  const combineFunctions = (a, b) => (v) => b(a(v));
18308  const pipe = (...transformers) => transformers.reduce(combineFunctions);
18309  
18310  
18311  
18312  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs
18313  function createLock(name) {
18314      let lock = null;
18315      return () => {
18316          const openLock = () => {
18317              lock = null;
18318          };
18319          if (lock === null) {
18320              lock = name;
18321              return openLock;
18322          }
18323          return false;
18324      };
18325  }
18326  const globalHorizontalLock = createLock("dragHorizontal");
18327  const globalVerticalLock = createLock("dragVertical");
18328  function getGlobalLock(drag) {
18329      let lock = false;
18330      if (drag === "y") {
18331          lock = globalVerticalLock();
18332      }
18333      else if (drag === "x") {
18334          lock = globalHorizontalLock();
18335      }
18336      else {
18337          const openHorizontal = globalHorizontalLock();
18338          const openVertical = globalVerticalLock();
18339          if (openHorizontal && openVertical) {
18340              lock = () => {
18341                  openHorizontal();
18342                  openVertical();
18343              };
18344          }
18345          else {
18346              // Release the locks because we don't use them
18347              if (openHorizontal)
18348                  openHorizontal();
18349              if (openVertical)
18350                  openVertical();
18351          }
18352      }
18353      return lock;
18354  }
18355  function isDragActive() {
18356      // Check the gesture lock - if we get it, it means no drag gesture is active
18357      // and we can safely fire the tap gesture.
18358      const openGestureLock = getGlobalLock(true);
18359      if (!openGestureLock)
18360          return true;
18361      openGestureLock();
18362      return false;
18363  }
18364  
18365  
18366  
18367  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/Feature.mjs
18368  class Feature {
18369      constructor(node) {
18370          this.isMounted = false;
18371          this.node = node;
18372      }
18373      update() { }
18374  }
18375  
18376  
18377  
18378  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/hover.mjs
18379  
18380  
18381  
18382  
18383  
18384  
18385  function addHoverEvent(node, isActive) {
18386      const eventName = "pointer" + (isActive ? "enter" : "leave");
18387      const callbackName = "onHover" + (isActive ? "Start" : "End");
18388      const handleEvent = (event, info) => {
18389          if (event.type === "touch" || isDragActive())
18390              return;
18391          const props = node.getProps();
18392          if (node.animationState && props.whileHover) {
18393              node.animationState.setActive("whileHover", isActive);
18394          }
18395          if (props[callbackName]) {
18396              frame_frame.update(() => props[callbackName](event, info));
18397          }
18398      };
18399      return addPointerEvent(node.current, eventName, handleEvent, {
18400          passive: !node.getProps()[callbackName],
18401      });
18402  }
18403  class HoverGesture extends Feature {
18404      mount() {
18405          this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
18406      }
18407      unmount() { }
18408  }
18409  
18410  
18411  
18412  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/focus.mjs
18413  
18414  
18415  
18416  
18417  class FocusGesture extends Feature {
18418      constructor() {
18419          super(...arguments);
18420          this.isActive = false;
18421      }
18422      onFocus() {
18423          let isFocusVisible = false;
18424          /**
18425           * If this element doesn't match focus-visible then don't
18426           * apply whileHover. But, if matches throws that focus-visible
18427           * is not a valid selector then in that browser outline styles will be applied
18428           * to the element by default and we want to match that behaviour with whileFocus.
18429           */
18430          try {
18431              isFocusVisible = this.node.current.matches(":focus-visible");
18432          }
18433          catch (e) {
18434              isFocusVisible = true;
18435          }
18436          if (!isFocusVisible || !this.node.animationState)
18437              return;
18438          this.node.animationState.setActive("whileFocus", true);
18439          this.isActive = true;
18440      }
18441      onBlur() {
18442          if (!this.isActive || !this.node.animationState)
18443              return;
18444          this.node.animationState.setActive("whileFocus", false);
18445          this.isActive = false;
18446      }
18447      mount() {
18448          this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
18449      }
18450      unmount() { }
18451  }
18452  
18453  
18454  
18455  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs
18456  /**
18457   * Recursively traverse up the tree to check whether the provided child node
18458   * is the parent or a descendant of it.
18459   *
18460   * @param parent - Element to find
18461   * @param child - Element to test against parent
18462   */
18463  const isNodeOrChild = (parent, child) => {
18464      if (!child) {
18465          return false;
18466      }
18467      else if (parent === child) {
18468          return true;
18469      }
18470      else {
18471          return isNodeOrChild(parent, child.parentElement);
18472      }
18473  };
18474  
18475  
18476  
18477  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/press.mjs
18478  
18479  
18480  
18481  
18482  
18483  
18484  
18485  
18486  
18487  
18488  function fireSyntheticPointerEvent(name, handler) {
18489      if (!handler)
18490          return;
18491      const syntheticPointerEvent = new PointerEvent("pointer" + name);
18492      handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
18493  }
18494  class PressGesture extends Feature {
18495      constructor() {
18496          super(...arguments);
18497          this.removeStartListeners = noop_noop;
18498          this.removeEndListeners = noop_noop;
18499          this.removeAccessibleListeners = noop_noop;
18500          this.startPointerPress = (startEvent, startInfo) => {
18501              this.removeEndListeners();
18502              if (this.isPressing)
18503                  return;
18504              const props = this.node.getProps();
18505              const endPointerPress = (endEvent, endInfo) => {
18506                  if (!this.checkPressEnd())
18507                      return;
18508                  const { onTap, onTapCancel } = this.node.getProps();
18509                  frame_frame.update(() => {
18510                      /**
18511                       * We only count this as a tap gesture if the event.target is the same
18512                       * as, or a child of, this component's element
18513                       */
18514                      !isNodeOrChild(this.node.current, endEvent.target)
18515                          ? onTapCancel && onTapCancel(endEvent, endInfo)
18516                          : onTap && onTap(endEvent, endInfo);
18517                  });
18518              };
18519              const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
18520              const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
18521              this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
18522              this.startPress(startEvent, startInfo);
18523          };
18524          this.startAccessiblePress = () => {
18525              const handleKeydown = (keydownEvent) => {
18526                  if (keydownEvent.key !== "Enter" || this.isPressing)
18527                      return;
18528                  const handleKeyup = (keyupEvent) => {
18529                      if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
18530                          return;
18531                      fireSyntheticPointerEvent("up", (event, info) => {
18532                          const { onTap } = this.node.getProps();
18533                          if (onTap) {
18534                              frame_frame.update(() => onTap(event, info));
18535                          }
18536                      });
18537                  };
18538                  this.removeEndListeners();
18539                  this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
18540                  fireSyntheticPointerEvent("down", (event, info) => {
18541                      this.startPress(event, info);
18542                  });
18543              };
18544              const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
18545              const handleBlur = () => {
18546                  if (!this.isPressing)
18547                      return;
18548                  fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
18549              };
18550              const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
18551              this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
18552          };
18553      }
18554      startPress(event, info) {
18555          this.isPressing = true;
18556          const { onTapStart, whileTap } = this.node.getProps();
18557          /**
18558           * Ensure we trigger animations before firing event callback
18559           */
18560          if (whileTap && this.node.animationState) {
18561              this.node.animationState.setActive("whileTap", true);
18562          }
18563          if (onTapStart) {
18564              frame_frame.update(() => onTapStart(event, info));
18565          }
18566      }
18567      checkPressEnd() {
18568          this.removeEndListeners();
18569          this.isPressing = false;
18570          const props = this.node.getProps();
18571          if (props.whileTap && this.node.animationState) {
18572              this.node.animationState.setActive("whileTap", false);
18573          }
18574          return !isDragActive();
18575      }
18576      cancelPress(event, info) {
18577          if (!this.checkPressEnd())
18578              return;
18579          const { onTapCancel } = this.node.getProps();
18580          if (onTapCancel) {
18581              frame_frame.update(() => onTapCancel(event, info));
18582          }
18583      }
18584      mount() {
18585          const props = this.node.getProps();
18586          const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) });
18587          const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
18588          this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
18589      }
18590      unmount() {
18591          this.removeStartListeners();
18592          this.removeEndListeners();
18593          this.removeAccessibleListeners();
18594      }
18595  }
18596  
18597  
18598  
18599  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs
18600  /**
18601   * Map an IntersectionHandler callback to an element. We only ever make one handler for one
18602   * element, so even though these handlers might all be triggered by different
18603   * observers, we can keep them in the same map.
18604   */
18605  const observerCallbacks = new WeakMap();
18606  /**
18607   * Multiple observers can be created for multiple element/document roots. Each with
18608   * different settings. So here we store dictionaries of observers to each root,
18609   * using serialised settings (threshold/margin) as lookup keys.
18610   */
18611  const observers = new WeakMap();
18612  const fireObserverCallback = (entry) => {
18613      const callback = observerCallbacks.get(entry.target);
18614      callback && callback(entry);
18615  };
18616  const fireAllObserverCallbacks = (entries) => {
18617      entries.forEach(fireObserverCallback);
18618  };
18619  function initIntersectionObserver({ root, ...options }) {
18620      const lookupRoot = root || document;
18621      /**
18622       * If we don't have an observer lookup map for this root, create one.
18623       */
18624      if (!observers.has(lookupRoot)) {
18625          observers.set(lookupRoot, {});
18626      }
18627      const rootObservers = observers.get(lookupRoot);
18628      const key = JSON.stringify(options);
18629      /**
18630       * If we don't have an observer for this combination of root and settings,
18631       * create one.
18632       */
18633      if (!rootObservers[key]) {
18634          rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
18635      }
18636      return rootObservers[key];
18637  }
18638  function observeIntersection(element, options, callback) {
18639      const rootInteresectionObserver = initIntersectionObserver(options);
18640      observerCallbacks.set(element, callback);
18641      rootInteresectionObserver.observe(element);
18642      return () => {
18643          observerCallbacks.delete(element);
18644          rootInteresectionObserver.unobserve(element);
18645      };
18646  }
18647  
18648  
18649  
18650  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs
18651  
18652  
18653  
18654  const thresholdNames = {
18655      some: 0,
18656      all: 1,
18657  };
18658  class InViewFeature extends Feature {
18659      constructor() {
18660          super(...arguments);
18661          this.hasEnteredView = false;
18662          this.isInView = false;
18663      }
18664      startObserver() {
18665          this.unmount();
18666          const { viewport = {} } = this.node.getProps();
18667          const { root, margin: rootMargin, amount = "some", once } = viewport;
18668          const options = {
18669              root: root ? root.current : undefined,
18670              rootMargin,
18671              threshold: typeof amount === "number" ? amount : thresholdNames[amount],
18672          };
18673          const onIntersectionUpdate = (entry) => {
18674              const { isIntersecting } = entry;
18675              /**
18676               * If there's been no change in the viewport state, early return.
18677               */
18678              if (this.isInView === isIntersecting)
18679                  return;
18680              this.isInView = isIntersecting;
18681              /**
18682               * Handle hasEnteredView. If this is only meant to run once, and
18683               * element isn't visible, early return. Otherwise set hasEnteredView to true.
18684               */
18685              if (once && !isIntersecting && this.hasEnteredView) {
18686                  return;
18687              }
18688              else if (isIntersecting) {
18689                  this.hasEnteredView = true;
18690              }
18691              if (this.node.animationState) {
18692                  this.node.animationState.setActive("whileInView", isIntersecting);
18693              }
18694              /**
18695               * Use the latest committed props rather than the ones in scope
18696               * when this observer is created
18697               */
18698              const { onViewportEnter, onViewportLeave } = this.node.getProps();
18699              const callback = isIntersecting ? onViewportEnter : onViewportLeave;
18700              callback && callback(entry);
18701          };
18702          return observeIntersection(this.node.current, options, onIntersectionUpdate);
18703      }
18704      mount() {
18705          this.startObserver();
18706      }
18707      update() {
18708          if (typeof IntersectionObserver === "undefined")
18709              return;
18710          const { props, prevProps } = this.node;
18711          const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
18712          if (hasOptionsChanged) {
18713              this.startObserver();
18714          }
18715      }
18716      unmount() { }
18717  }
18718  function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
18719      return (name) => viewport[name] !== prevViewport[name];
18720  }
18721  
18722  
18723  
18724  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs
18725  
18726  
18727  
18728  
18729  
18730  const gestureAnimations = {
18731      inView: {
18732          Feature: InViewFeature,
18733      },
18734      tap: {
18735          Feature: PressGesture,
18736      },
18737      focus: {
18738          Feature: FocusGesture,
18739      },
18740      hover: {
18741          Feature: HoverGesture,
18742      },
18743  };
18744  
18745  
18746  
18747  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/shallow-compare.mjs
18748  function shallowCompare(next, prev) {
18749      if (!Array.isArray(prev))
18750          return false;
18751      const prevLength = prev.length;
18752      if (prevLength !== next.length)
18753          return false;
18754      for (let i = 0; i < prevLength; i++) {
18755          if (prev[i] !== next[i])
18756              return false;
18757      }
18758      return true;
18759  }
18760  
18761  
18762  
18763  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs
18764  
18765  
18766  /**
18767   * Creates an object containing the latest state of every MotionValue on a VisualElement
18768   */
18769  function getCurrent(visualElement) {
18770      const current = {};
18771      visualElement.values.forEach((value, key) => (current[key] = value.get()));
18772      return current;
18773  }
18774  /**
18775   * Creates an object containing the latest velocity of every MotionValue on a VisualElement
18776   */
18777  function getVelocity(visualElement) {
18778      const velocity = {};
18779      visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
18780      return velocity;
18781  }
18782  function resolveVariant(visualElement, definition, custom) {
18783      const props = visualElement.getProps();
18784      return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));
18785  }
18786  
18787  
18788  
18789  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
18790  
18791  
18792  const optimizedAppearDataId = "framerAppearId";
18793  const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
18794  
18795  
18796  
18797  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/errors.mjs
18798  
18799  
18800  let warning = noop_noop;
18801  let errors_invariant = noop_noop;
18802  if (false) {}
18803  
18804  
18805  
18806  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs
18807  /**
18808   * Converts seconds to milliseconds
18809   *
18810   * @param seconds - Time in seconds.
18811   * @return milliseconds - Converted time in milliseconds.
18812   */
18813  const secondsToMilliseconds = (seconds) => seconds * 1000;
18814  const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
18815  
18816  
18817  
18818  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs
18819  const instantAnimationState = {
18820      current: false,
18821  };
18822  
18823  
18824  
18825  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs
18826  const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
18827  
18828  
18829  
18830  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs
18831  
18832  
18833  function isWaapiSupportedEasing(easing) {
18834      return Boolean(!easing ||
18835          (typeof easing === "string" && supportedWaapiEasing[easing]) ||
18836          isBezierDefinition(easing) ||
18837          (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
18838  }
18839  const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier($a}, $b}, $c}, $d})`;
18840  const supportedWaapiEasing = {
18841      linear: "linear",
18842      ease: "ease",
18843      easeIn: "ease-in",
18844      easeOut: "ease-out",
18845      easeInOut: "ease-in-out",
18846      circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
18847      circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
18848      backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
18849      backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
18850  };
18851  function mapEasingToNativeEasing(easing) {
18852      if (!easing)
18853          return undefined;
18854      return isBezierDefinition(easing)
18855          ? cubicBezierAsString(easing)
18856          : Array.isArray(easing)
18857              ? easing.map(mapEasingToNativeEasing)
18858              : supportedWaapiEasing[easing];
18859  }
18860  
18861  
18862  
18863  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs
18864  
18865  
18866  function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
18867      const keyframeOptions = { [valueName]: keyframes };
18868      if (times)
18869          keyframeOptions.offset = times;
18870      const easing = mapEasingToNativeEasing(ease);
18871      /**
18872       * If this is an easing array, apply to keyframes, not animation as a whole
18873       */
18874      if (Array.isArray(easing))
18875          keyframeOptions.easing = easing;
18876      return element.animate(keyframeOptions, {
18877          delay,
18878          duration,
18879          easing: !Array.isArray(easing) ? easing : "linear",
18880          fill: "both",
18881          iterations: repeat + 1,
18882          direction: repeatType === "reverse" ? "alternate" : "normal",
18883      });
18884  }
18885  
18886  
18887  
18888  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs
18889  function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
18890      const index = repeat && repeatType !== "loop" && repeat % 2 === 1
18891          ? 0
18892          : keyframes.length - 1;
18893      return keyframes[index];
18894  }
18895  
18896  
18897  
18898  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs
18899  
18900  
18901  /*
18902    Bezier function generator
18903    This has been modified from Gaëtan Renaudeau's BezierEasing
18904    https://github.com/gre/bezier-easing/blob/master/src/index.js
18905    https://github.com/gre/bezier-easing/blob/master/LICENSE
18906    
18907    I've removed the newtonRaphsonIterate algo because in benchmarking it
18908    wasn't noticiably faster than binarySubdivision, indeed removing it
18909    usually improved times, depending on the curve.
18910    I also removed the lookup table, as for the added bundle size and loop we're
18911    only cutting ~4 or so subdivision iterations. I bumped the max iterations up
18912    to 12 to compensate and this still tended to be faster for no perceivable
18913    loss in accuracy.
18914    Usage
18915      const easeOut = cubicBezier(.17,.67,.83,.67);
18916      const x = easeOut(0.5); // returns 0.627...
18917  */
18918  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
18919  const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
18920      t;
18921  const subdivisionPrecision = 0.0000001;
18922  const subdivisionMaxIterations = 12;
18923  function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
18924      let currentX;
18925      let currentT;
18926      let i = 0;
18927      do {
18928          currentT = lowerBound + (upperBound - lowerBound) / 2.0;
18929          currentX = calcBezier(currentT, mX1, mX2) - x;
18930          if (currentX > 0.0) {
18931              upperBound = currentT;
18932          }
18933          else {
18934              lowerBound = currentT;
18935          }
18936      } while (Math.abs(currentX) > subdivisionPrecision &&
18937          ++i < subdivisionMaxIterations);
18938      return currentT;
18939  }
18940  function cubicBezier(mX1, mY1, mX2, mY2) {
18941      // If this is a linear gradient, return linear easing
18942      if (mX1 === mY1 && mX2 === mY2)
18943          return noop_noop;
18944      const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
18945      // If animation is at start/end, return t without easing
18946      return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
18947  }
18948  
18949  
18950  
18951  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/ease.mjs
18952  
18953  
18954  const easeIn = cubicBezier(0.42, 0, 1, 1);
18955  const easeOut = cubicBezier(0, 0, 0.58, 1);
18956  const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
18957  
18958  
18959  
18960  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs
18961  const isEasingArray = (ease) => {
18962      return Array.isArray(ease) && typeof ease[0] !== "number";
18963  };
18964  
18965  
18966  
18967  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs
18968  // Accepts an easing function and returns a new one that outputs mirrored values for
18969  // the second half of the animation. Turns easeIn into easeInOut.
18970  const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
18971  
18972  
18973  
18974  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs
18975  // Accepts an easing function and returns a new one that outputs reversed values.
18976  // Turns easeIn into easeOut.
18977  const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
18978  
18979  
18980  
18981  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/circ.mjs
18982  
18983  
18984  
18985  const circIn = (p) => 1 - Math.sin(Math.acos(p));
18986  const circOut = reverseEasing(circIn);
18987  const circInOut = mirrorEasing(circOut);
18988  
18989  
18990  
18991  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/back.mjs
18992  
18993  
18994  
18995  
18996  const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
18997  const backIn = reverseEasing(backOut);
18998  const backInOut = mirrorEasing(backIn);
18999  
19000  
19001  
19002  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/anticipate.mjs
19003  
19004  
19005  const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
19006  
19007  
19008  
19009  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/easing/utils/map.mjs
19010  
19011  
19012  
19013  
19014  
19015  
19016  
19017  
19018  const easingLookup = {
19019      linear: noop_noop,
19020      easeIn: easeIn,
19021      easeInOut: easeInOut,
19022      easeOut: easeOut,
19023      circIn: circIn,
19024      circInOut: circInOut,
19025      circOut: circOut,
19026      backIn: backIn,
19027      backInOut: backInOut,
19028      backOut: backOut,
19029      anticipate: anticipate,
19030  };
19031  const easingDefinitionToFunction = (definition) => {
19032      if (Array.isArray(definition)) {
19033          // If cubic bezier definition, create bezier curve
19034          errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
19035          const [x1, y1, x2, y2] = definition;
19036          return cubicBezier(x1, y1, x2, y2);
19037      }
19038      else if (typeof definition === "string") {
19039          // Else lookup from table
19040          errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '$definition}'`);
19041          return easingLookup[definition];
19042      }
19043      return definition;
19044  };
19045  
19046  
19047  
19048  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/utils.mjs
19049  
19050  
19051  /**
19052   * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
19053   * but false if a number or multiple colors
19054   */
19055  const isColorString = (type, testProp) => (v) => {
19056      return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
19057          (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
19058  };
19059  const splitColor = (aName, bName, cName) => (v) => {
19060      if (!isString(v))
19061          return v;
19062      const [a, b, c, alpha] = v.match(floatRegex);
19063      return {
19064          [aName]: parseFloat(a),
19065          [bName]: parseFloat(b),
19066          [cName]: parseFloat(c),
19067          alpha: alpha !== undefined ? parseFloat(alpha) : 1,
19068      };
19069  };
19070  
19071  
19072  
19073  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
19074  
19075  
19076  
19077  
19078  
19079  const clampRgbUnit = (v) => clamp_clamp(0, 255, v);
19080  const rgbUnit = {
19081      ...number,
19082      transform: (v) => Math.round(clampRgbUnit(v)),
19083  };
19084  const rgba = {
19085      test: isColorString("rgb", "red"),
19086      parse: splitColor("red", "green", "blue"),
19087      transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
19088          rgbUnit.transform(red) +
19089          ", " +
19090          rgbUnit.transform(green) +
19091          ", " +
19092          rgbUnit.transform(blue) +
19093          ", " +
19094          sanitize(alpha.transform(alpha$1)) +
19095          ")",
19096  };
19097  
19098  
19099  
19100  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/hex.mjs
19101  
19102  
19103  
19104  function parseHex(v) {
19105      let r = "";
19106      let g = "";
19107      let b = "";
19108      let a = "";
19109      // If we have 6 characters, ie #FF0000
19110      if (v.length > 5) {
19111          r = v.substring(1, 3);
19112          g = v.substring(3, 5);
19113          b = v.substring(5, 7);
19114          a = v.substring(7, 9);
19115          // Or we have 3 characters, ie #F00
19116      }
19117      else {
19118          r = v.substring(1, 2);
19119          g = v.substring(2, 3);
19120          b = v.substring(3, 4);
19121          a = v.substring(4, 5);
19122          r += r;
19123          g += g;
19124          b += b;
19125          a += a;
19126      }
19127      return {
19128          red: parseInt(r, 16),
19129          green: parseInt(g, 16),
19130          blue: parseInt(b, 16),
19131          alpha: a ? parseInt(a, 16) / 255 : 1,
19132      };
19133  }
19134  const hex = {
19135      test: isColorString("#"),
19136      parse: parseHex,
19137      transform: rgba.transform,
19138  };
19139  
19140  
19141  
19142  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/hsla.mjs
19143  
19144  
19145  
19146  
19147  
19148  const hsla = {
19149      test: isColorString("hsl", "hue"),
19150      parse: splitColor("hue", "saturation", "lightness"),
19151      transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
19152          return ("hsla(" +
19153              Math.round(hue) +
19154              ", " +
19155              percent.transform(sanitize(saturation)) +
19156              ", " +
19157              percent.transform(sanitize(lightness)) +
19158              ", " +
19159              sanitize(alpha.transform(alpha$1)) +
19160              ")");
19161      },
19162  };
19163  
19164  
19165  
19166  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/color/index.mjs
19167  
19168  
19169  
19170  
19171  
19172  const color = {
19173      test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
19174      parse: (v) => {
19175          if (rgba.test(v)) {
19176              return rgba.parse(v);
19177          }
19178          else if (hsla.test(v)) {
19179              return hsla.parse(v);
19180          }
19181          else {
19182              return hex.parse(v);
19183          }
19184      },
19185      transform: (v) => {
19186          return isString(v)
19187              ? v
19188              : v.hasOwnProperty("red")
19189                  ? rgba.transform(v)
19190                  : hsla.transform(v);
19191      },
19192  };
19193  
19194  
19195  
19196  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix.mjs
19197  /*
19198    Value in range from progress
19199  
19200    Given a lower limit and an upper limit, we return the value within
19201    that range as expressed by progress (usually a number from 0 to 1)
19202  
19203    So progress = 0.5 would change
19204  
19205    from -------- to
19206  
19207    to
19208  
19209    from ---- to
19210  
19211    E.g. from = 10, to = 20, progress = 0.5 => 15
19212  
19213    @param [number]: Lower limit of range
19214    @param [number]: Upper limit of range
19215    @param [number]: The progress between lower and upper limits expressed 0-1
19216    @return [number]: Value as calculated from progress within range (not limited within range)
19217  */
19218  const mix = (from, to, progress) => -progress * from + progress * to + from;
19219  
19220  
19221  
19222  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs
19223  // Adapted from https://gist.github.com/mjackson/5311256
19224  function hueToRgb(p, q, t) {
19225      if (t < 0)
19226          t += 1;
19227      if (t > 1)
19228          t -= 1;
19229      if (t < 1 / 6)
19230          return p + (q - p) * 6 * t;
19231      if (t < 1 / 2)
19232          return q;
19233      if (t < 2 / 3)
19234          return p + (q - p) * (2 / 3 - t) * 6;
19235      return p;
19236  }
19237  function hslaToRgba({ hue, saturation, lightness, alpha }) {
19238      hue /= 360;
19239      saturation /= 100;
19240      lightness /= 100;
19241      let red = 0;
19242      let green = 0;
19243      let blue = 0;
19244      if (!saturation) {
19245          red = green = blue = lightness;
19246      }
19247      else {
19248          const q = lightness < 0.5
19249              ? lightness * (1 + saturation)
19250              : lightness + saturation - lightness * saturation;
19251          const p = 2 * lightness - q;
19252          red = hueToRgb(p, q, hue + 1 / 3);
19253          green = hueToRgb(p, q, hue);
19254          blue = hueToRgb(p, q, hue - 1 / 3);
19255      }
19256      return {
19257          red: Math.round(red * 255),
19258          green: Math.round(green * 255),
19259          blue: Math.round(blue * 255),
19260          alpha,
19261      };
19262  }
19263  
19264  
19265  
19266  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix-color.mjs
19267  
19268  
19269  
19270  
19271  
19272  
19273  
19274  // Linear color space blending
19275  // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
19276  // Demonstrated http://codepen.io/osublake/pen/xGVVaN
19277  const mixLinearColor = (from, to, v) => {
19278      const fromExpo = from * from;
19279      return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
19280  };
19281  const colorTypes = [hex, rgba, hsla];
19282  const getColorType = (v) => colorTypes.find((type) => type.test(v));
19283  function asRGBA(color) {
19284      const type = getColorType(color);
19285      errors_invariant(Boolean(type), `'$color}' is not an animatable color. Use the equivalent color code instead.`);
19286      let model = type.parse(color);
19287      if (type === hsla) {
19288          // TODO Remove this cast - needed since Framer Motion's stricter typing
19289          model = hslaToRgba(model);
19290      }
19291      return model;
19292  }
19293  const mixColor = (from, to) => {
19294      const fromRGBA = asRGBA(from);
19295      const toRGBA = asRGBA(to);
19296      const blended = { ...fromRGBA };
19297      return (v) => {
19298          blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
19299          blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
19300          blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
19301          blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
19302          return rgba.transform(blended);
19303      };
19304  };
19305  
19306  
19307  
19308  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/index.mjs
19309  
19310  
19311  
19312  
19313  
19314  
19315  function test(v) {
19316      var _a, _b;
19317      return (isNaN(v) &&
19318          isString(v) &&
19319          (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
19320              (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
19321              0);
19322  }
19323  const cssVarTokeniser = {
19324      regex: cssVariableRegex,
19325      countKey: "Vars",
19326      token: "$v}",
19327      parse: noop_noop,
19328  };
19329  const colorTokeniser = {
19330      regex: colorRegex,
19331      countKey: "Colors",
19332      token: "$c}",
19333      parse: color.parse,
19334  };
19335  const numberTokeniser = {
19336      regex: floatRegex,
19337      countKey: "Numbers",
19338      token: "$n}",
19339      parse: number.parse,
19340  };
19341  function tokenise(info, { regex, countKey, token, parse }) {
19342      const matches = info.tokenised.match(regex);
19343      if (!matches)
19344          return;
19345      info["num" + countKey] = matches.length;
19346      info.tokenised = info.tokenised.replace(regex, token);
19347      info.values.push(...matches.map(parse));
19348  }
19349  function analyseComplexValue(value) {
19350      const originalValue = value.toString();
19351      const info = {
19352          value: originalValue,
19353          tokenised: originalValue,
19354          values: [],
19355          numVars: 0,
19356          numColors: 0,
19357          numNumbers: 0,
19358      };
19359      if (info.value.includes("var(--"))
19360          tokenise(info, cssVarTokeniser);
19361      tokenise(info, colorTokeniser);
19362      tokenise(info, numberTokeniser);
19363      return info;
19364  }
19365  function parseComplexValue(v) {
19366      return analyseComplexValue(v).values;
19367  }
19368  function createTransformer(source) {
19369      const { values, numColors, numVars, tokenised } = analyseComplexValue(source);
19370      const numValues = values.length;
19371      return (v) => {
19372          let output = tokenised;
19373          for (let i = 0; i < numValues; i++) {
19374              if (i < numVars) {
19375                  output = output.replace(cssVarTokeniser.token, v[i]);
19376              }
19377              else if (i < numVars + numColors) {
19378                  output = output.replace(colorTokeniser.token, color.transform(v[i]));
19379              }
19380              else {
19381                  output = output.replace(numberTokeniser.token, sanitize(v[i]));
19382              }
19383          }
19384          return output;
19385      };
19386  }
19387  const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
19388  function getAnimatableNone(v) {
19389      const parsed = parseComplexValue(v);
19390      const transformer = createTransformer(v);
19391      return transformer(parsed.map(convertNumbersToZero));
19392  }
19393  const complex = {
19394      test,
19395      parse: parseComplexValue,
19396      createTransformer,
19397      getAnimatableNone,
19398  };
19399  
19400  
19401  
19402  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/mix-complex.mjs
19403  
19404  
19405  
19406  
19407  
19408  
19409  
19410  const mixImmediate = (origin, target) => (p) => `$p > 0 ? target : origin}`;
19411  function getMixer(origin, target) {
19412      if (typeof origin === "number") {
19413          return (v) => mix(origin, target, v);
19414      }
19415      else if (color.test(origin)) {
19416          return mixColor(origin, target);
19417      }
19418      else {
19419          return origin.startsWith("var(")
19420              ? mixImmediate(origin, target)
19421              : mixComplex(origin, target);
19422      }
19423  }
19424  const mixArray = (from, to) => {
19425      const output = [...from];
19426      const numValues = output.length;
19427      const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
19428      return (v) => {
19429          for (let i = 0; i < numValues; i++) {
19430              output[i] = blendValue[i](v);
19431          }
19432          return output;
19433      };
19434  };
19435  const mixObject = (origin, target) => {
19436      const output = { ...origin, ...target };
19437      const blendValue = {};
19438      for (const key in output) {
19439          if (origin[key] !== undefined && target[key] !== undefined) {
19440              blendValue[key] = getMixer(origin[key], target[key]);
19441          }
19442      }
19443      return (v) => {
19444          for (const key in blendValue) {
19445              output[key] = blendValue[key](v);
19446          }
19447          return output;
19448      };
19449  };
19450  const mixComplex = (origin, target) => {
19451      const template = complex.createTransformer(target);
19452      const originStats = analyseComplexValue(origin);
19453      const targetStats = analyseComplexValue(target);
19454      const canInterpolate = originStats.numVars === targetStats.numVars &&
19455          originStats.numColors === targetStats.numColors &&
19456          originStats.numNumbers >= targetStats.numNumbers;
19457      if (canInterpolate) {
19458          return pipe(mixArray(originStats.values, targetStats.values), template);
19459      }
19460      else {
19461          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.`);
19462          return mixImmediate(origin, target);
19463      }
19464  };
19465  
19466  
19467  
19468  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/progress.mjs
19469  /*
19470    Progress within given range
19471  
19472    Given a lower limit and an upper limit, we return the progress
19473    (expressed as a number 0-1) represented by the given value, and
19474    limit that progress to within 0-1.
19475  
19476    @param [number]: Lower limit
19477    @param [number]: Upper limit
19478    @param [number]: Value to find progress within given range
19479    @return [number]: Progress of value within range as expressed 0-1
19480  */
19481  const progress = (from, to, value) => {
19482      const toFromDifference = to - from;
19483      return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
19484  };
19485  
19486  
19487  
19488  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/interpolate.mjs
19489  
19490  
19491  
19492  
19493  
19494  
19495  
19496  
19497  
19498  
19499  const mixNumber = (from, to) => (p) => mix(from, to, p);
19500  function detectMixerFactory(v) {
19501      if (typeof v === "number") {
19502          return mixNumber;
19503      }
19504      else if (typeof v === "string") {
19505          return color.test(v) ? mixColor : mixComplex;
19506      }
19507      else if (Array.isArray(v)) {
19508          return mixArray;
19509      }
19510      else if (typeof v === "object") {
19511          return mixObject;
19512      }
19513      return mixNumber;
19514  }
19515  function createMixers(output, ease, customMixer) {
19516      const mixers = [];
19517      const mixerFactory = customMixer || detectMixerFactory(output[0]);
19518      const numMixers = output.length - 1;
19519      for (let i = 0; i < numMixers; i++) {
19520          let mixer = mixerFactory(output[i], output[i + 1]);
19521          if (ease) {
19522              const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease;
19523              mixer = pipe(easingFunction, mixer);
19524          }
19525          mixers.push(mixer);
19526      }
19527      return mixers;
19528  }
19529  /**
19530   * Create a function that maps from a numerical input array to a generic output array.
19531   *
19532   * Accepts:
19533   *   - Numbers
19534   *   - Colors (hex, hsl, hsla, rgb, rgba)
19535   *   - Complex (combinations of one or more numbers or strings)
19536   *
19537   * ```jsx
19538   * const mixColor = interpolate([0, 1], ['#fff', '#000'])
19539   *
19540   * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
19541   * ```
19542   *
19543   * TODO Revist this approach once we've moved to data models for values,
19544   * probably not needed to pregenerate mixer functions.
19545   *
19546   * @public
19547   */
19548  function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
19549      const inputLength = input.length;
19550      errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length");
19551      /**
19552       * If we're only provided a single input, we can just make a function
19553       * that returns the output.
19554       */
19555      if (inputLength === 1)
19556          return () => output[0];
19557      // If input runs highest -> lowest, reverse both arrays
19558      if (input[0] > input[inputLength - 1]) {
19559          input = [...input].reverse();
19560          output = [...output].reverse();
19561      }
19562      const mixers = createMixers(output, ease, mixer);
19563      const numMixers = mixers.length;
19564      const interpolator = (v) => {
19565          let i = 0;
19566          if (numMixers > 1) {
19567              for (; i < input.length - 2; i++) {
19568                  if (v < input[i + 1])
19569                      break;
19570              }
19571          }
19572          const progressInRange = progress(input[i], input[i + 1], v);
19573          return mixers[i](progressInRange);
19574      };
19575      return isClamp
19576          ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v))
19577          : interpolator;
19578  }
19579  
19580  
19581  
19582  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/fill.mjs
19583  
19584  
19585  
19586  function fillOffset(offset, remaining) {
19587      const min = offset[offset.length - 1];
19588      for (let i = 1; i <= remaining; i++) {
19589          const offsetProgress = progress(0, remaining, i);
19590          offset.push(mix(min, 1, offsetProgress));
19591      }
19592  }
19593  
19594  
19595  
19596  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/default.mjs
19597  
19598  
19599  function defaultOffset(arr) {
19600      const offset = [0];
19601      fillOffset(offset, arr.length - 1);
19602      return offset;
19603  }
19604  
19605  
19606  
19607  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/offsets/time.mjs
19608  function convertOffsetToTimes(offset, duration) {
19609      return offset.map((o) => o * duration);
19610  }
19611  
19612  
19613  
19614  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs
19615  
19616  
19617  
19618  
19619  
19620  
19621  
19622  function defaultEasing(values, easing) {
19623      return values.map(() => easing || easeInOut).splice(0, values.length - 1);
19624  }
19625  function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
19626      /**
19627       * Easing functions can be externally defined as strings. Here we convert them
19628       * into actual functions.
19629       */
19630      const easingFunctions = isEasingArray(ease)
19631          ? ease.map(easingDefinitionToFunction)
19632          : easingDefinitionToFunction(ease);
19633      /**
19634       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
19635       * to reduce GC during animation.
19636       */
19637      const state = {
19638          done: false,
19639          value: keyframeValues[0],
19640      };
19641      /**
19642       * Create a times array based on the provided 0-1 offsets
19643       */
19644      const absoluteTimes = convertOffsetToTimes(
19645      // Only use the provided offsets if they're the correct length
19646      // TODO Maybe we should warn here if there's a length mismatch
19647      times && times.length === keyframeValues.length
19648          ? times
19649          : defaultOffset(keyframeValues), duration);
19650      const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
19651          ease: Array.isArray(easingFunctions)
19652              ? easingFunctions
19653              : defaultEasing(keyframeValues, easingFunctions),
19654      });
19655      return {
19656          calculatedDuration: duration,
19657          next: (t) => {
19658              state.value = mapTimeToKeyframe(t);
19659              state.done = t >= duration;
19660              return state;
19661          },
19662      };
19663  }
19664  
19665  
19666  
19667  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs
19668  /*
19669    Convert velocity into velocity per second
19670  
19671    @param [number]: Unit per frame
19672    @param [number]: Frame duration in ms
19673  */
19674  function velocityPerSecond(velocity, frameDuration) {
19675      return frameDuration ? velocity * (1000 / frameDuration) : 0;
19676  }
19677  
19678  
19679  
19680  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs
19681  
19682  
19683  const velocitySampleDuration = 5; // ms
19684  function calcGeneratorVelocity(resolveValue, t, current) {
19685      const prevT = Math.max(t - velocitySampleDuration, 0);
19686      return velocityPerSecond(current - resolveValue(prevT), t - prevT);
19687  }
19688  
19689  
19690  
19691  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs
19692  
19693  
19694  
19695  
19696  const safeMin = 0.001;
19697  const minDuration = 0.01;
19698  const maxDuration = 10.0;
19699  const minDamping = 0.05;
19700  const maxDamping = 1;
19701  function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
19702      let envelope;
19703      let derivative;
19704      warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less");
19705      let dampingRatio = 1 - bounce;
19706      /**
19707       * Restrict dampingRatio and duration to within acceptable ranges.
19708       */
19709      dampingRatio = clamp_clamp(minDamping, maxDamping, dampingRatio);
19710      duration = clamp_clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
19711      if (dampingRatio < 1) {
19712          /**
19713           * Underdamped spring
19714           */
19715          envelope = (undampedFreq) => {
19716              const exponentialDecay = undampedFreq * dampingRatio;
19717              const delta = exponentialDecay * duration;
19718              const a = exponentialDecay - velocity;
19719              const b = calcAngularFreq(undampedFreq, dampingRatio);
19720              const c = Math.exp(-delta);
19721              return safeMin - (a / b) * c;
19722          };
19723          derivative = (undampedFreq) => {
19724              const exponentialDecay = undampedFreq * dampingRatio;
19725              const delta = exponentialDecay * duration;
19726              const d = delta * velocity + velocity;
19727              const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
19728              const f = Math.exp(-delta);
19729              const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
19730              const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
19731              return (factor * ((d - e) * f)) / g;
19732          };
19733      }
19734      else {
19735          /**
19736           * Critically-damped spring
19737           */
19738          envelope = (undampedFreq) => {
19739              const a = Math.exp(-undampedFreq * duration);
19740              const b = (undampedFreq - velocity) * duration + 1;
19741              return -safeMin + a * b;
19742          };
19743          derivative = (undampedFreq) => {
19744              const a = Math.exp(-undampedFreq * duration);
19745              const b = (velocity - undampedFreq) * (duration * duration);
19746              return a * b;
19747          };
19748      }
19749      const initialGuess = 5 / duration;
19750      const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
19751      duration = secondsToMilliseconds(duration);
19752      if (isNaN(undampedFreq)) {
19753          return {
19754              stiffness: 100,
19755              damping: 10,
19756              duration,
19757          };
19758      }
19759      else {
19760          const stiffness = Math.pow(undampedFreq, 2) * mass;
19761          return {
19762              stiffness,
19763              damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
19764              duration,
19765          };
19766      }
19767  }
19768  const rootIterations = 12;
19769  function approximateRoot(envelope, derivative, initialGuess) {
19770      let result = initialGuess;
19771      for (let i = 1; i < rootIterations; i++) {
19772          result = result - envelope(result) / derivative(result);
19773      }
19774      return result;
19775  }
19776  function calcAngularFreq(undampedFreq, dampingRatio) {
19777      return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
19778  }
19779  
19780  
19781  
19782  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs
19783  
19784  
19785  
19786  
19787  const durationKeys = ["duration", "bounce"];
19788  const physicsKeys = ["stiffness", "damping", "mass"];
19789  function isSpringType(options, keys) {
19790      return keys.some((key) => options[key] !== undefined);
19791  }
19792  function getSpringOptions(options) {
19793      let springOptions = {
19794          velocity: 0.0,
19795          stiffness: 100,
19796          damping: 10,
19797          mass: 1.0,
19798          isResolvedFromDuration: false,
19799          ...options,
19800      };
19801      // stiffness/damping/mass overrides duration/bounce
19802      if (!isSpringType(options, physicsKeys) &&
19803          isSpringType(options, durationKeys)) {
19804          const derived = findSpring(options);
19805          springOptions = {
19806              ...springOptions,
19807              ...derived,
19808              velocity: 0.0,
19809              mass: 1.0,
19810          };
19811          springOptions.isResolvedFromDuration = true;
19812      }
19813      return springOptions;
19814  }
19815  function spring({ keyframes, restDelta, restSpeed, ...options }) {
19816      const origin = keyframes[0];
19817      const target = keyframes[keyframes.length - 1];
19818      /**
19819       * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
19820       * to reduce GC during animation.
19821       */
19822      const state = { done: false, value: origin };
19823      const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
19824      const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0;
19825      const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
19826      const initialDelta = target - origin;
19827      const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
19828      /**
19829       * If we're working on a granular scale, use smaller defaults for determining
19830       * when the spring is finished.
19831       *
19832       * These defaults have been selected emprically based on what strikes a good
19833       * ratio between feeling good and finishing as soon as changes are imperceptible.
19834       */
19835      const isGranularScale = Math.abs(initialDelta) < 5;
19836      restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
19837      restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
19838      let resolveSpring;
19839      if (dampingRatio < 1) {
19840          const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
19841          // Underdamped spring
19842          resolveSpring = (t) => {
19843              const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
19844              return (target -
19845                  envelope *
19846                      (((initialVelocity +
19847                          dampingRatio * undampedAngularFreq * initialDelta) /
19848                          angularFreq) *
19849                          Math.sin(angularFreq * t) +
19850                          initialDelta * Math.cos(angularFreq * t)));
19851          };
19852      }
19853      else if (dampingRatio === 1) {
19854          // Critically damped spring
19855          resolveSpring = (t) => target -
19856              Math.exp(-undampedAngularFreq * t) *
19857                  (initialDelta +
19858                      (initialVelocity + undampedAngularFreq * initialDelta) * t);
19859      }
19860      else {
19861          // Overdamped spring
19862          const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
19863          resolveSpring = (t) => {
19864              const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
19865              // When performing sinh or cosh values can hit Infinity so we cap them here
19866              const freqForT = Math.min(dampedAngularFreq * t, 300);
19867              return (target -
19868                  (envelope *
19869                      ((initialVelocity +
19870                          dampingRatio * undampedAngularFreq * initialDelta) *
19871                          Math.sinh(freqForT) +
19872                          dampedAngularFreq *
19873                              initialDelta *
19874                              Math.cosh(freqForT))) /
19875                      dampedAngularFreq);
19876          };
19877      }
19878      return {
19879          calculatedDuration: isResolvedFromDuration ? duration || null : null,
19880          next: (t) => {
19881              const current = resolveSpring(t);
19882              if (!isResolvedFromDuration) {
19883                  let currentVelocity = initialVelocity;
19884                  if (t !== 0) {
19885                      /**
19886                       * We only need to calculate velocity for under-damped springs
19887                       * as over- and critically-damped springs can't overshoot, so
19888                       * checking only for displacement is enough.
19889                       */
19890                      if (dampingRatio < 1) {
19891                          currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
19892                      }
19893                      else {
19894                          currentVelocity = 0;
19895                      }
19896                  }
19897                  const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
19898                  const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
19899                  state.done =
19900                      isBelowVelocityThreshold && isBelowDisplacementThreshold;
19901              }
19902              else {
19903                  state.done = t >= duration;
19904              }
19905              state.value = state.done ? target : current;
19906              return state;
19907          },
19908      };
19909  }
19910  
19911  
19912  
19913  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/inertia.mjs
19914  
19915  
19916  
19917  function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
19918      const origin = keyframes[0];
19919      const state = {
19920          done: false,
19921          value: origin,
19922      };
19923      const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
19924      const nearestBoundary = (v) => {
19925          if (min === undefined)
19926              return max;
19927          if (max === undefined)
19928              return min;
19929          return Math.abs(min - v) < Math.abs(max - v) ? min : max;
19930      };
19931      let amplitude = power * velocity;
19932      const ideal = origin + amplitude;
19933      const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
19934      /**
19935       * If the target has changed we need to re-calculate the amplitude, otherwise
19936       * the animation will start from the wrong position.
19937       */
19938      if (target !== ideal)
19939          amplitude = target - origin;
19940      const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
19941      const calcLatest = (t) => target + calcDelta(t);
19942      const applyFriction = (t) => {
19943          const delta = calcDelta(t);
19944          const latest = calcLatest(t);
19945          state.done = Math.abs(delta) <= restDelta;
19946          state.value = state.done ? target : latest;
19947      };
19948      /**
19949       * Ideally this would resolve for t in a stateless way, we could
19950       * do that by always precalculating the animation but as we know
19951       * this will be done anyway we can assume that spring will
19952       * be discovered during that.
19953       */
19954      let timeReachedBoundary;
19955      let spring$1;
19956      const checkCatchBoundary = (t) => {
19957          if (!isOutOfBounds(state.value))
19958              return;
19959          timeReachedBoundary = t;
19960          spring$1 = spring({
19961              keyframes: [state.value, nearestBoundary(state.value)],
19962              velocity: calcGeneratorVelocity(calcLatest, t, state.value),
19963              damping: bounceDamping,
19964              stiffness: bounceStiffness,
19965              restDelta,
19966              restSpeed,
19967          });
19968      };
19969      checkCatchBoundary(0);
19970      return {
19971          calculatedDuration: null,
19972          next: (t) => {
19973              /**
19974               * We need to resolve the friction to figure out if we need a
19975               * spring but we don't want to do this twice per frame. So here
19976               * we flag if we updated for this frame and later if we did
19977               * we can skip doing it again.
19978               */
19979              let hasUpdatedFrame = false;
19980              if (!spring$1 && timeReachedBoundary === undefined) {
19981                  hasUpdatedFrame = true;
19982                  applyFriction(t);
19983                  checkCatchBoundary(t);
19984              }
19985              /**
19986               * If we have a spring and the provided t is beyond the moment the friction
19987               * animation crossed the min/max boundary, use the spring.
19988               */
19989              if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {
19990                  return spring$1.next(t - timeReachedBoundary);
19991              }
19992              else {
19993                  !hasUpdatedFrame && applyFriction(t);
19994                  return state;
19995              }
19996          },
19997      };
19998  }
19999  
20000  
20001  
20002  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.mjs
20003  
20004  
20005  const frameloopDriver = (update) => {
20006      const passTimestamp = ({ timestamp }) => update(timestamp);
20007      return {
20008          start: () => frame_frame.update(passTimestamp, true),
20009          stop: () => cancelFrame(passTimestamp),
20010          /**
20011           * If we're processing this frame we can use the
20012           * framelocked timestamp to keep things in sync.
20013           */
20014          now: () => frameData.isProcessing ? frameData.timestamp : performance.now(),
20015      };
20016  };
20017  
20018  
20019  
20020  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs
20021  /**
20022   * Implement a practical max duration for keyframe generation
20023   * to prevent infinite loops
20024   */
20025  const maxGeneratorDuration = 20000;
20026  function calcGeneratorDuration(generator) {
20027      let duration = 0;
20028      const timeStep = 50;
20029      let state = generator.next(duration);
20030      while (!state.done && duration < maxGeneratorDuration) {
20031          duration += timeStep;
20032          state = generator.next(duration);
20033      }
20034      return duration >= maxGeneratorDuration ? Infinity : duration;
20035  }
20036  
20037  
20038  
20039  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/js/index.mjs
20040  
20041  
20042  
20043  
20044  
20045  
20046  
20047  
20048  
20049  const types = {
20050      decay: inertia,
20051      inertia: inertia,
20052      tween: keyframes_keyframes,
20053      keyframes: keyframes_keyframes,
20054      spring: spring,
20055  };
20056  /**
20057   * Animate a single value on the main thread.
20058   *
20059   * This function is written, where functionality overlaps,
20060   * to be largely spec-compliant with WAAPI to allow fungibility
20061   * between the two.
20062   */
20063  function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
20064      let speed = 1;
20065      let hasStopped = false;
20066      let resolveFinishedPromise;
20067      let currentFinishedPromise;
20068      /**
20069       * Resolve the current Promise every time we enter the
20070       * finished state. This is WAAPI-compatible behaviour.
20071       */
20072      const updateFinishedPromise = () => {
20073          currentFinishedPromise = new Promise((resolve) => {
20074              resolveFinishedPromise = resolve;
20075          });
20076      };
20077      // Create the first finished promise
20078      updateFinishedPromise();
20079      let animationDriver;
20080      const generatorFactory = types[type] || keyframes_keyframes;
20081      /**
20082       * If this isn't the keyframes generator and we've been provided
20083       * strings as keyframes, we need to interpolate these.
20084       * TODO: Support velocity for units and complex value types/
20085       */
20086      let mapNumbersToKeyframes;
20087      if (generatorFactory !== keyframes_keyframes &&
20088          typeof keyframes$1[0] !== "number") {
20089          mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
20090              clamp: false,
20091          });
20092          keyframes$1 = [0, 100];
20093      }
20094      const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
20095      let mirroredGenerator;
20096      if (repeatType === "mirror") {
20097          mirroredGenerator = generatorFactory({
20098              ...options,
20099              keyframes: [...keyframes$1].reverse(),
20100              velocity: -(options.velocity || 0),
20101          });
20102      }
20103      let playState = "idle";
20104      let holdTime = null;
20105      let startTime = null;
20106      let cancelTime = null;
20107      /**
20108       * If duration is undefined and we have repeat options,
20109       * we need to calculate a duration from the generator.
20110       *
20111       * We set it to the generator itself to cache the duration.
20112       * Any timeline resolver will need to have already precalculated
20113       * the duration by this step.
20114       */
20115      if (generator.calculatedDuration === null && repeat) {
20116          generator.calculatedDuration = calcGeneratorDuration(generator);
20117      }
20118      const { calculatedDuration } = generator;
20119      let resolvedDuration = Infinity;
20120      let totalDuration = Infinity;
20121      if (calculatedDuration !== null) {
20122          resolvedDuration = calculatedDuration + repeatDelay;
20123          totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
20124      }
20125      let currentTime = 0;
20126      const tick = (timestamp) => {
20127          if (startTime === null)
20128              return;
20129          /**
20130           * requestAnimationFrame timestamps can come through as lower than
20131           * the startTime as set by performance.now(). Here we prevent this,
20132           * though in the future it could be possible to make setting startTime
20133           * a pending operation that gets resolved here.
20134           */
20135          if (speed > 0)
20136              startTime = Math.min(startTime, timestamp);
20137          if (speed < 0)
20138              startTime = Math.min(timestamp - totalDuration / speed, startTime);
20139          if (holdTime !== null) {
20140              currentTime = holdTime;
20141          }
20142          else {
20143              // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
20144              // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
20145              // example.
20146              currentTime = Math.round(timestamp - startTime) * speed;
20147          }
20148          // Rebase on delay
20149          const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1);
20150          const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
20151          currentTime = Math.max(timeWithoutDelay, 0);
20152          /**
20153           * If this animation has finished, set the current time
20154           * to the total duration.
20155           */
20156          if (playState === "finished" && holdTime === null) {
20157              currentTime = totalDuration;
20158          }
20159          let elapsed = currentTime;
20160          let frameGenerator = generator;
20161          if (repeat) {
20162              /**
20163               * Get the current progress (0-1) of the animation. If t is >
20164               * than duration we'll get values like 2.5 (midway through the
20165               * third iteration)
20166               */
20167              const progress = currentTime / resolvedDuration;
20168              /**
20169               * Get the current iteration (0 indexed). For instance the floor of
20170               * 2.5 is 2.
20171               */
20172              let currentIteration = Math.floor(progress);
20173              /**
20174               * Get the current progress of the iteration by taking the remainder
20175               * so 2.5 is 0.5 through iteration 2
20176               */
20177              let iterationProgress = progress % 1.0;
20178              /**
20179               * If iteration progress is 1 we count that as the end
20180               * of the previous iteration.
20181               */
20182              if (!iterationProgress && progress >= 1) {
20183                  iterationProgress = 1;
20184              }
20185              iterationProgress === 1 && currentIteration--;
20186              currentIteration = Math.min(currentIteration, repeat + 1);
20187              /**
20188               * Reverse progress if we're not running in "normal" direction
20189               */
20190              const iterationIsOdd = Boolean(currentIteration % 2);
20191              if (iterationIsOdd) {
20192                  if (repeatType === "reverse") {
20193                      iterationProgress = 1 - iterationProgress;
20194                      if (repeatDelay) {
20195                          iterationProgress -= repeatDelay / resolvedDuration;
20196                      }
20197                  }
20198                  else if (repeatType === "mirror") {
20199                      frameGenerator = mirroredGenerator;
20200                  }
20201              }
20202              let p = clamp_clamp(0, 1, iterationProgress);
20203              if (currentTime > totalDuration) {
20204                  p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
20205              }
20206              elapsed = p * resolvedDuration;
20207          }
20208          /**
20209           * If we're in negative time, set state as the initial keyframe.
20210           * This prevents delay: x, duration: 0 animations from finishing
20211           * instantly.
20212           */
20213          const state = isInDelayPhase
20214              ? { done: false, value: keyframes$1[0] }
20215              : frameGenerator.next(elapsed);
20216          if (mapNumbersToKeyframes) {
20217              state.value = mapNumbersToKeyframes(state.value);
20218          }
20219          let { done } = state;
20220          if (!isInDelayPhase && calculatedDuration !== null) {
20221              done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0;
20222          }
20223          const isAnimationFinished = holdTime === null &&
20224              (playState === "finished" || (playState === "running" && done));
20225          if (onUpdate) {
20226              onUpdate(state.value);
20227          }
20228          if (isAnimationFinished) {
20229              finish();
20230          }
20231          return state;
20232      };
20233      const stopAnimationDriver = () => {
20234          animationDriver && animationDriver.stop();
20235          animationDriver = undefined;
20236      };
20237      const cancel = () => {
20238          playState = "idle";
20239          stopAnimationDriver();
20240          resolveFinishedPromise();
20241          updateFinishedPromise();
20242          startTime = cancelTime = null;
20243      };
20244      const finish = () => {
20245          playState = "finished";
20246          onComplete && onComplete();
20247          stopAnimationDriver();
20248          resolveFinishedPromise();
20249      };
20250      const play = () => {
20251          if (hasStopped)
20252              return;
20253          if (!animationDriver)
20254              animationDriver = driver(tick);
20255          const now = animationDriver.now();
20256          onPlay && onPlay();
20257          if (holdTime !== null) {
20258              startTime = now - holdTime;
20259          }
20260          else if (!startTime || playState === "finished") {
20261              startTime = now;
20262          }
20263          if (playState === "finished") {
20264              updateFinishedPromise();
20265          }
20266          cancelTime = startTime;
20267          holdTime = null;
20268          /**
20269           * Set playState to running only after we've used it in
20270           * the previous logic.
20271           */
20272          playState = "running";
20273          animationDriver.start();
20274      };
20275      if (autoplay) {
20276          play();
20277      }
20278      const controls = {
20279          then(resolve, reject) {
20280              return currentFinishedPromise.then(resolve, reject);
20281          },
20282          get time() {
20283              return millisecondsToSeconds(currentTime);
20284          },
20285          set time(newTime) {
20286              newTime = secondsToMilliseconds(newTime);
20287              currentTime = newTime;
20288              if (holdTime !== null || !animationDriver || speed === 0) {
20289                  holdTime = newTime;
20290              }
20291              else {
20292                  startTime = animationDriver.now() - newTime / speed;
20293              }
20294          },
20295          get duration() {
20296              const duration = generator.calculatedDuration === null
20297                  ? calcGeneratorDuration(generator)
20298                  : generator.calculatedDuration;
20299              return millisecondsToSeconds(duration);
20300          },
20301          get speed() {
20302              return speed;
20303          },
20304          set speed(newSpeed) {
20305              if (newSpeed === speed || !animationDriver)
20306                  return;
20307              speed = newSpeed;
20308              controls.time = millisecondsToSeconds(currentTime);
20309          },
20310          get state() {
20311              return playState;
20312          },
20313          play,
20314          pause: () => {
20315              playState = "paused";
20316              holdTime = currentTime;
20317          },
20318          stop: () => {
20319              hasStopped = true;
20320              if (playState === "idle")
20321                  return;
20322              playState = "idle";
20323              onStop && onStop();
20324              cancel();
20325          },
20326          cancel: () => {
20327              if (cancelTime !== null)
20328                  tick(cancelTime);
20329              cancel();
20330          },
20331          complete: () => {
20332              playState = "finished";
20333          },
20334          sample: (elapsed) => {
20335              startTime = 0;
20336              return tick(elapsed);
20337          },
20338      };
20339      return controls;
20340  }
20341  
20342  
20343  
20344  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/memo.mjs
20345  function memo(callback) {
20346      let result;
20347      return () => {
20348          if (result === undefined)
20349              result = callback();
20350          return result;
20351      };
20352  }
20353  
20354  
20355  
20356  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.mjs
20357  
20358  
20359  
20360  
20361  
20362  
20363  
20364  
20365  
20366  const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
20367  /**
20368   * A list of values that can be hardware-accelerated.
20369   */
20370  const acceleratedValues = new Set([
20371      "opacity",
20372      "clipPath",
20373      "filter",
20374      "transform",
20375      "backgroundColor",
20376  ]);
20377  /**
20378   * 10ms is chosen here as it strikes a balance between smooth
20379   * results (more than one keyframe per frame at 60fps) and
20380   * keyframe quantity.
20381   */
20382  const sampleDelta = 10; //ms
20383  /**
20384   * Implement a practical max duration for keyframe generation
20385   * to prevent infinite loops
20386   */
20387  const create_accelerated_animation_maxDuration = 20000;
20388  const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" ||
20389      valueName === "backgroundColor" ||
20390      !isWaapiSupportedEasing(options.ease);
20391  function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
20392      const canAccelerateAnimation = supportsWaapi() &&
20393          acceleratedValues.has(valueName) &&
20394          !options.repeatDelay &&
20395          options.repeatType !== "mirror" &&
20396          options.damping !== 0 &&
20397          options.type !== "inertia";
20398      if (!canAccelerateAnimation)
20399          return false;
20400      /**
20401       * TODO: Unify with js/index
20402       */
20403      let hasStopped = false;
20404      let resolveFinishedPromise;
20405      let currentFinishedPromise;
20406      /**
20407       * Resolve the current Promise every time we enter the
20408       * finished state. This is WAAPI-compatible behaviour.
20409       */
20410      const updateFinishedPromise = () => {
20411          currentFinishedPromise = new Promise((resolve) => {
20412              resolveFinishedPromise = resolve;
20413          });
20414      };
20415      // Create the first finished promise
20416      updateFinishedPromise();
20417      let { keyframes, duration = 300, ease, times } = options;
20418      /**
20419       * If this animation needs pre-generated keyframes then generate.
20420       */
20421      if (requiresPregeneratedKeyframes(valueName, options)) {
20422          const sampleAnimation = animateValue({
20423              ...options,
20424              repeat: 0,
20425              delay: 0,
20426          });
20427          let state = { done: false, value: keyframes[0] };
20428          const pregeneratedKeyframes = [];
20429          /**
20430           * Bail after 20 seconds of pre-generated keyframes as it's likely
20431           * we're heading for an infinite loop.
20432           */
20433          let t = 0;
20434          while (!state.done && t < create_accelerated_animation_maxDuration) {
20435              state = sampleAnimation.sample(t);
20436              pregeneratedKeyframes.push(state.value);
20437              t += sampleDelta;
20438          }
20439          times = undefined;
20440          keyframes = pregeneratedKeyframes;
20441          duration = t - sampleDelta;
20442          ease = "linear";
20443      }
20444      const animation = animateStyle(value.owner.current, valueName, keyframes, {
20445          ...options,
20446          duration,
20447          /**
20448           * This function is currently not called if ease is provided
20449           * as a function so the cast is safe.
20450           *
20451           * However it would be possible for a future refinement to port
20452           * in easing pregeneration from Motion One for browsers that
20453           * support the upcoming `linear()` easing function.
20454           */
20455          ease: ease,
20456          times,
20457      });
20458      /**
20459       * WAAPI animations don't resolve startTime synchronously. But a blocked
20460       * thread could delay the startTime resolution by a noticeable amount.
20461       * For synching handoff animations with the new Motion animation we want
20462       * to ensure startTime is synchronously set.
20463       */
20464      if (options.syncStart) {
20465          animation.startTime = frameData.isProcessing
20466              ? frameData.timestamp
20467              : document.timeline
20468                  ? document.timeline.currentTime
20469                  : performance.now();
20470      }
20471      const cancelAnimation = () => animation.cancel();
20472      const safeCancel = () => {
20473          frame_frame.update(cancelAnimation);
20474          resolveFinishedPromise();
20475          updateFinishedPromise();
20476      };
20477      /**
20478       * Prefer the `onfinish` prop as it's more widely supported than
20479       * the `finished` promise.
20480       *
20481       * Here, we synchronously set the provided MotionValue to the end
20482       * keyframe. If we didn't, when the WAAPI animation is finished it would
20483       * be removed from the element which would then revert to its old styles.
20484       */
20485      animation.onfinish = () => {
20486          value.set(getFinalKeyframe(keyframes, options));
20487          onComplete && onComplete();
20488          safeCancel();
20489      };
20490      /**
20491       * Animation interrupt callback.
20492       */
20493      const controls = {
20494          then(resolve, reject) {
20495              return currentFinishedPromise.then(resolve, reject);
20496          },
20497          attachTimeline(timeline) {
20498              animation.timeline = timeline;
20499              animation.onfinish = null;
20500              return noop_noop;
20501          },
20502          get time() {
20503              return millisecondsToSeconds(animation.currentTime || 0);
20504          },
20505          set time(newTime) {
20506              animation.currentTime = secondsToMilliseconds(newTime);
20507          },
20508          get speed() {
20509              return animation.playbackRate;
20510          },
20511          set speed(newSpeed) {
20512              animation.playbackRate = newSpeed;
20513          },
20514          get duration() {
20515              return millisecondsToSeconds(duration);
20516          },
20517          play: () => {
20518              if (hasStopped)
20519                  return;
20520              animation.play();
20521              /**
20522               * Cancel any pending cancel tasks
20523               */
20524              cancelFrame(cancelAnimation);
20525          },
20526          pause: () => animation.pause(),
20527          stop: () => {
20528              hasStopped = true;
20529              if (animation.playState === "idle")
20530                  return;
20531              /**
20532               * WAAPI doesn't natively have any interruption capabilities.
20533               *
20534               * Rather than read commited styles back out of the DOM, we can
20535               * create a renderless JS animation and sample it twice to calculate
20536               * its current value, "previous" value, and therefore allow
20537               * Motion to calculate velocity for any subsequent animation.
20538               */
20539              const { currentTime } = animation;
20540              if (currentTime) {
20541                  const sampleAnimation = animateValue({
20542                      ...options,
20543                      autoplay: false,
20544                  });
20545                  value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
20546              }
20547              safeCancel();
20548          },
20549          complete: () => animation.finish(),
20550          cancel: safeCancel,
20551      };
20552      return controls;
20553  }
20554  
20555  
20556  
20557  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animators/instant.mjs
20558  
20559  
20560  
20561  function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
20562      const setValue = () => {
20563          onUpdate && onUpdate(keyframes[keyframes.length - 1]);
20564          onComplete && onComplete();
20565          /**
20566           * TODO: As this API grows it could make sense to always return
20567           * animateValue. This will be a bigger project as animateValue
20568           * is frame-locked whereas this function resolves instantly.
20569           * This is a behavioural change and also has ramifications regarding
20570           * assumptions within tests.
20571           */
20572          return {
20573              time: 0,
20574              speed: 1,
20575              duration: 0,
20576              play: (noop_noop),
20577              pause: (noop_noop),
20578              stop: (noop_noop),
20579              then: (resolve) => {
20580                  resolve();
20581                  return Promise.resolve();
20582              },
20583              cancel: (noop_noop),
20584              complete: (noop_noop),
20585          };
20586      };
20587      return delay
20588          ? animateValue({
20589              keyframes: [0, 1],
20590              duration: 0,
20591              delay,
20592              onComplete: setValue,
20593          })
20594          : setValue();
20595  }
20596  
20597  
20598  
20599  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs
20600  
20601  
20602  const underDampedSpring = {
20603      type: "spring",
20604      stiffness: 500,
20605      damping: 25,
20606      restSpeed: 10,
20607  };
20608  const criticallyDampedSpring = (target) => ({
20609      type: "spring",
20610      stiffness: 550,
20611      damping: target === 0 ? 2 * Math.sqrt(550) : 30,
20612      restSpeed: 10,
20613  });
20614  const keyframesTransition = {
20615      type: "keyframes",
20616      duration: 0.8,
20617  };
20618  /**
20619   * Default easing curve is a slightly shallower version of
20620   * the default browser easing curve.
20621   */
20622  const ease = {
20623      type: "keyframes",
20624      ease: [0.25, 0.1, 0.35, 1],
20625      duration: 0.3,
20626  };
20627  const getDefaultTransition = (valueKey, { keyframes }) => {
20628      if (keyframes.length > 2) {
20629          return keyframesTransition;
20630      }
20631      else if (transformProps.has(valueKey)) {
20632          return valueKey.startsWith("scale")
20633              ? criticallyDampedSpring(keyframes[1])
20634              : underDampedSpring;
20635      }
20636      return ease;
20637  };
20638  
20639  
20640  
20641  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs
20642  
20643  
20644  /**
20645   * Check if a value is animatable. Examples:
20646   *
20647   * ✅: 100, "100px", "#fff"
20648   * ❌: "block", "url(2.jpg)"
20649   * @param value
20650   *
20651   * @internal
20652   */
20653  const isAnimatable = (key, value) => {
20654      // If the list of keys tat might be non-animatable grows, replace with Set
20655      if (key === "zIndex")
20656          return false;
20657      // If it's a number or a keyframes array, we can animate it. We might at some point
20658      // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
20659      // but for now lets leave it like this for performance reasons
20660      if (typeof value === "number" || Array.isArray(value))
20661          return true;
20662      if (typeof value === "string" && // It's animatable if we have a string
20663          (complex.test(value) || value === "0") && // And it contains numbers and/or colors
20664          !value.startsWith("url(") // Unless it starts with "url("
20665      ) {
20666          return true;
20667      }
20668      return false;
20669  };
20670  
20671  
20672  
20673  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/complex/filter.mjs
20674  
20675  
20676  
20677  /**
20678   * Properties that should default to 1 or 100%
20679   */
20680  const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
20681  function applyDefaultFilter(v) {
20682      const [name, value] = v.slice(0, -1).split("(");
20683      if (name === "drop-shadow")
20684          return v;
20685      const [number] = value.match(floatRegex) || [];
20686      if (!number)
20687          return v;
20688      const unit = value.replace(number, "");
20689      let defaultValue = maxDefaults.has(name) ? 1 : 0;
20690      if (number !== value)
20691          defaultValue *= 100;
20692      return name + "(" + defaultValue + unit + ")";
20693  }
20694  const functionRegex = /([a-z-]*)\(.*?\)/g;
20695  const filter = {
20696      ...complex,
20697      getAnimatableNone: (v) => {
20698          const functions = v.match(functionRegex);
20699          return functions ? functions.map(applyDefaultFilter).join(" ") : v;
20700      },
20701  };
20702  
20703  
20704  
20705  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
20706  
20707  
20708  
20709  
20710  /**
20711   * A map of default value types for common values
20712   */
20713  const defaultValueTypes = {
20714      ...numberValueTypes,
20715      // Color props
20716      color: color,
20717      backgroundColor: color,
20718      outlineColor: color,
20719      fill: color,
20720      stroke: color,
20721      // Border props
20722      borderColor: color,
20723      borderTopColor: color,
20724      borderRightColor: color,
20725      borderBottomColor: color,
20726      borderLeftColor: color,
20727      filter: filter,
20728      WebkitFilter: filter,
20729  };
20730  /**
20731   * Gets the default ValueType for the provided value key
20732   */
20733  const getDefaultValueType = (key) => defaultValueTypes[key];
20734  
20735  
20736  
20737  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
20738  
20739  
20740  
20741  
20742  function animatable_none_getAnimatableNone(key, value) {
20743      let defaultValueType = getDefaultValueType(key);
20744      if (defaultValueType !== filter)
20745          defaultValueType = complex;
20746      // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
20747      return defaultValueType.getAnimatableNone
20748          ? defaultValueType.getAnimatableNone(value)
20749          : undefined;
20750  }
20751  
20752  
20753  
20754  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs
20755  /**
20756   * Check if the value is a zero value string like "0px" or "0%"
20757   */
20758  const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
20759  
20760  
20761  
20762  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-none.mjs
20763  
20764  
20765  function isNone(value) {
20766      if (typeof value === "number") {
20767          return value === 0;
20768      }
20769      else if (value !== null) {
20770          return value === "none" || value === "0" || isZeroValueString(value);
20771      }
20772  }
20773  
20774  
20775  
20776  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/keyframes.mjs
20777  
20778  
20779  
20780  
20781  function getKeyframes(value, valueName, target, transition) {
20782      const isTargetAnimatable = isAnimatable(valueName, target);
20783      let keyframes;
20784      if (Array.isArray(target)) {
20785          keyframes = [...target];
20786      }
20787      else {
20788          keyframes = [null, target];
20789      }
20790      const defaultOrigin = transition.from !== undefined ? transition.from : value.get();
20791      let animatableTemplateValue = undefined;
20792      const noneKeyframeIndexes = [];
20793      for (let i = 0; i < keyframes.length; i++) {
20794          /**
20795           * Fill null/wildcard keyframes
20796           */
20797          if (keyframes[i] === null) {
20798              keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];
20799          }
20800          if (isNone(keyframes[i])) {
20801              noneKeyframeIndexes.push(i);
20802          }
20803          // TODO: Clean this conditional, it works for now
20804          if (typeof keyframes[i] === "string" &&
20805              keyframes[i] !== "none" &&
20806              keyframes[i] !== "0") {
20807              animatableTemplateValue = keyframes[i];
20808          }
20809      }
20810      if (isTargetAnimatable &&
20811          noneKeyframeIndexes.length &&
20812          animatableTemplateValue) {
20813          for (let i = 0; i < noneKeyframeIndexes.length; i++) {
20814              const index = noneKeyframeIndexes[i];
20815              keyframes[index] = animatable_none_getAnimatableNone(valueName, animatableTemplateValue);
20816          }
20817      }
20818      return keyframes;
20819  }
20820  
20821  
20822  
20823  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs
20824  /**
20825   * Decide whether a transition is defined on a given Transition.
20826   * This filters out orchestration options and returns true
20827   * if any options are left.
20828   */
20829  function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
20830      return !!Object.keys(transition).length;
20831  }
20832  function getValueTransition(transition, key) {
20833      return transition[key] || transition["default"] || transition;
20834  }
20835  
20836  
20837  
20838  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs
20839  
20840  
20841  
20842  
20843  
20844  
20845  
20846  
20847  
20848  
20849  
20850  const animateMotionValue = (valueName, value, target, transition = {}) => {
20851      return (onComplete) => {
20852          const valueTransition = getValueTransition(transition, valueName) || {};
20853          /**
20854           * Most transition values are currently completely overwritten by value-specific
20855           * transitions. In the future it'd be nicer to blend these transitions. But for now
20856           * delay actually does inherit from the root transition if not value-specific.
20857           */
20858          const delay = valueTransition.delay || transition.delay || 0;
20859          /**
20860           * Elapsed isn't a public transition option but can be passed through from
20861           * optimized appear effects in milliseconds.
20862           */
20863          let { elapsed = 0 } = transition;
20864          elapsed = elapsed - secondsToMilliseconds(delay);
20865          const keyframes = getKeyframes(value, valueName, target, valueTransition);
20866          /**
20867           * Check if we're able to animate between the start and end keyframes,
20868           * and throw a warning if we're attempting to animate between one that's
20869           * animatable and another that isn't.
20870           */
20871          const originKeyframe = keyframes[0];
20872          const targetKeyframe = keyframes[keyframes.length - 1];
20873          const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
20874          const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
20875          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.`);
20876          let options = {
20877              keyframes,
20878              velocity: value.getVelocity(),
20879              ease: "easeOut",
20880              ...valueTransition,
20881              delay: -elapsed,
20882              onUpdate: (v) => {
20883                  value.set(v);
20884                  valueTransition.onUpdate && valueTransition.onUpdate(v);
20885              },
20886              onComplete: () => {
20887                  onComplete();
20888                  valueTransition.onComplete && valueTransition.onComplete();
20889              },
20890          };
20891          /**
20892           * If there's no transition defined for this value, we can generate
20893           * unqiue transition settings for this value.
20894           */
20895          if (!isTransitionDefined(valueTransition)) {
20896              options = {
20897                  ...options,
20898                  ...getDefaultTransition(valueName, options),
20899              };
20900          }
20901          /**
20902           * Both WAAPI and our internal animation functions use durations
20903           * as defined by milliseconds, while our external API defines them
20904           * as seconds.
20905           */
20906          if (options.duration) {
20907              options.duration = secondsToMilliseconds(options.duration);
20908          }
20909          if (options.repeatDelay) {
20910              options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
20911          }
20912          if (!isOriginAnimatable ||
20913              !isTargetAnimatable ||
20914              instantAnimationState.current ||
20915              valueTransition.type === false) {
20916              /**
20917               * If we can't animate this value, or the global instant animation flag is set,
20918               * or this is simply defined as an instant transition, return an instant transition.
20919               */
20920              return createInstantAnimation(instantAnimationState.current
20921                  ? { ...options, delay: 0 }
20922                  : options);
20923          }
20924          /**
20925           * Animate via WAAPI if possible.
20926           */
20927          if (value.owner &&
20928              value.owner.current instanceof HTMLElement &&
20929              !value.owner.getProps().onUpdate) {
20930              const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
20931              if (acceleratedAnimation)
20932                  return acceleratedAnimation;
20933          }
20934          /**
20935           * If we didn't create an accelerated animation, create a JS animation
20936           */
20937          return animateValue(options);
20938      };
20939  };
20940  
20941  
20942  
20943  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
20944  
20945  
20946  function isWillChangeMotionValue(value) {
20947      return Boolean(isMotionValue(value) && value.add);
20948  }
20949  
20950  
20951  
20952  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs
20953  /**
20954   * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
20955   */
20956  const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
20957  
20958  
20959  
20960  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/array.mjs
20961  function addUniqueItem(arr, item) {
20962      if (arr.indexOf(item) === -1)
20963          arr.push(item);
20964  }
20965  function removeItem(arr, item) {
20966      const index = arr.indexOf(item);
20967      if (index > -1)
20968          arr.splice(index, 1);
20969  }
20970  // Adapted from array-move
20971  function moveItem([...arr], fromIndex, toIndex) {
20972      const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
20973      if (startIndex >= 0 && startIndex < arr.length) {
20974          const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
20975          const [item] = arr.splice(fromIndex, 1);
20976          arr.splice(endIndex, 0, item);
20977      }
20978      return arr;
20979  }
20980  
20981  
20982  
20983  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
20984  
20985  
20986  class SubscriptionManager {
20987      constructor() {
20988          this.subscriptions = [];
20989      }
20990      add(handler) {
20991          addUniqueItem(this.subscriptions, handler);
20992          return () => removeItem(this.subscriptions, handler);
20993      }
20994      notify(a, b, c) {
20995          const numSubscriptions = this.subscriptions.length;
20996          if (!numSubscriptions)
20997              return;
20998          if (numSubscriptions === 1) {
20999              /**
21000               * If there's only a single handler we can just call it without invoking a loop.
21001               */
21002              this.subscriptions[0](a, b, c);
21003          }
21004          else {
21005              for (let i = 0; i < numSubscriptions; i++) {
21006                  /**
21007                   * Check whether the handler exists before firing as it's possible
21008                   * the subscriptions were modified during this loop running.
21009                   */
21010                  const handler = this.subscriptions[i];
21011                  handler && handler(a, b, c);
21012              }
21013          }
21014      }
21015      getSize() {
21016          return this.subscriptions.length;
21017      }
21018      clear() {
21019          this.subscriptions.length = 0;
21020      }
21021  }
21022  
21023  
21024  
21025  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/index.mjs
21026  
21027  
21028  
21029  
21030  
21031  const isFloat = (value) => {
21032      return !isNaN(parseFloat(value));
21033  };
21034  const collectMotionValues = {
21035      current: undefined,
21036  };
21037  /**
21038   * `MotionValue` is used to track the state and velocity of motion values.
21039   *
21040   * @public
21041   */
21042  class MotionValue {
21043      /**
21044       * @param init - The initiating value
21045       * @param config - Optional configuration options
21046       *
21047       * -  `transformer`: A function to transform incoming values with.
21048       *
21049       * @internal
21050       */
21051      constructor(init, options = {}) {
21052          /**
21053           * This will be replaced by the build step with the latest version number.
21054           * When MotionValues are provided to motion components, warn if versions are mixed.
21055           */
21056          this.version = "10.16.4";
21057          /**
21058           * Duration, in milliseconds, since last updating frame.
21059           *
21060           * @internal
21061           */
21062          this.timeDelta = 0;
21063          /**
21064           * Timestamp of the last time this `MotionValue` was updated.
21065           *
21066           * @internal
21067           */
21068          this.lastUpdated = 0;
21069          /**
21070           * Tracks whether this value can output a velocity. Currently this is only true
21071           * if the value is numerical, but we might be able to widen the scope here and support
21072           * other value types.
21073           *
21074           * @internal
21075           */
21076          this.canTrackVelocity = false;
21077          /**
21078           * An object containing a SubscriptionManager for each active event.
21079           */
21080          this.events = {};
21081          this.updateAndNotify = (v, render = true) => {
21082              this.prev = this.current;
21083              this.current = v;
21084              // Update timestamp
21085              const { delta, timestamp } = frameData;
21086              if (this.lastUpdated !== timestamp) {
21087                  this.timeDelta = delta;
21088                  this.lastUpdated = timestamp;
21089                  frame_frame.postRender(this.scheduleVelocityCheck);
21090              }
21091              // Update update subscribers
21092              if (this.prev !== this.current && this.events.change) {
21093                  this.events.change.notify(this.current);
21094              }
21095              // Update velocity subscribers
21096              if (this.events.velocityChange) {
21097                  this.events.velocityChange.notify(this.getVelocity());
21098              }
21099              // Update render subscribers
21100              if (render && this.events.renderRequest) {
21101                  this.events.renderRequest.notify(this.current);
21102              }
21103          };
21104          /**
21105           * Schedule a velocity check for the next frame.
21106           *
21107           * This is an instanced and bound function to prevent generating a new
21108           * function once per frame.
21109           *
21110           * @internal
21111           */
21112          this.scheduleVelocityCheck = () => frame_frame.postRender(this.velocityCheck);
21113          /**
21114           * Updates `prev` with `current` if the value hasn't been updated this frame.
21115           * This ensures velocity calculations return `0`.
21116           *
21117           * This is an instanced and bound function to prevent generating a new
21118           * function once per frame.
21119           *
21120           * @internal
21121           */
21122          this.velocityCheck = ({ timestamp }) => {
21123              if (timestamp !== this.lastUpdated) {
21124                  this.prev = this.current;
21125                  if (this.events.velocityChange) {
21126                      this.events.velocityChange.notify(this.getVelocity());
21127                  }
21128              }
21129          };
21130          this.hasAnimated = false;
21131          this.prev = this.current = init;
21132          this.canTrackVelocity = isFloat(this.current);
21133          this.owner = options.owner;
21134      }
21135      /**
21136       * Adds a function that will be notified when the `MotionValue` is updated.
21137       *
21138       * It returns a function that, when called, will cancel the subscription.
21139       *
21140       * When calling `onChange` inside a React component, it should be wrapped with the
21141       * `useEffect` hook. As it returns an unsubscribe function, this should be returned
21142       * from the `useEffect` function to ensure you don't add duplicate subscribers..
21143       *
21144       * ```jsx
21145       * export const MyComponent = () => {
21146       *   const x = useMotionValue(0)
21147       *   const y = useMotionValue(0)
21148       *   const opacity = useMotionValue(1)
21149       *
21150       *   useEffect(() => {
21151       *     function updateOpacity() {
21152       *       const maxXY = Math.max(x.get(), y.get())
21153       *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
21154       *       opacity.set(newOpacity)
21155       *     }
21156       *
21157       *     const unsubscribeX = x.on("change", updateOpacity)
21158       *     const unsubscribeY = y.on("change", updateOpacity)
21159       *
21160       *     return () => {
21161       *       unsubscribeX()
21162       *       unsubscribeY()
21163       *     }
21164       *   }, [])
21165       *
21166       *   return <motion.div style={{ x }} />
21167       * }
21168       * ```
21169       *
21170       * @param subscriber - A function that receives the latest value.
21171       * @returns A function that, when called, will cancel this subscription.
21172       *
21173       * @deprecated
21174       */
21175      onChange(subscription) {
21176          if (false) {}
21177          return this.on("change", subscription);
21178      }
21179      on(eventName, callback) {
21180          if (!this.events[eventName]) {
21181              this.events[eventName] = new SubscriptionManager();
21182          }
21183          const unsubscribe = this.events[eventName].add(callback);
21184          if (eventName === "change") {
21185              return () => {
21186                  unsubscribe();
21187                  /**
21188                   * If we have no more change listeners by the start
21189                   * of the next frame, stop active animations.
21190                   */
21191                  frame_frame.read(() => {
21192                      if (!this.events.change.getSize()) {
21193                          this.stop();
21194                      }
21195                  });
21196              };
21197          }
21198          return unsubscribe;
21199      }
21200      clearListeners() {
21201          for (const eventManagers in this.events) {
21202              this.events[eventManagers].clear();
21203          }
21204      }
21205      /**
21206       * Attaches a passive effect to the `MotionValue`.
21207       *
21208       * @internal
21209       */
21210      attach(passiveEffect, stopPassiveEffect) {
21211          this.passiveEffect = passiveEffect;
21212          this.stopPassiveEffect = stopPassiveEffect;
21213      }
21214      /**
21215       * Sets the state of the `MotionValue`.
21216       *
21217       * @remarks
21218       *
21219       * ```jsx
21220       * const x = useMotionValue(0)
21221       * x.set(10)
21222       * ```
21223       *
21224       * @param latest - Latest value to set.
21225       * @param render - Whether to notify render subscribers. Defaults to `true`
21226       *
21227       * @public
21228       */
21229      set(v, render = true) {
21230          if (!render || !this.passiveEffect) {
21231              this.updateAndNotify(v, render);
21232          }
21233          else {
21234              this.passiveEffect(v, this.updateAndNotify);
21235          }
21236      }
21237      setWithVelocity(prev, current, delta) {
21238          this.set(current);
21239          this.prev = prev;
21240          this.timeDelta = delta;
21241      }
21242      /**
21243       * Set the state of the `MotionValue`, stopping any active animations,
21244       * effects, and resets velocity to `0`.
21245       */
21246      jump(v) {
21247          this.updateAndNotify(v);
21248          this.prev = v;
21249          this.stop();
21250          if (this.stopPassiveEffect)
21251              this.stopPassiveEffect();
21252      }
21253      /**
21254       * Returns the latest state of `MotionValue`
21255       *
21256       * @returns - The latest state of `MotionValue`
21257       *
21258       * @public
21259       */
21260      get() {
21261          if (collectMotionValues.current) {
21262              collectMotionValues.current.push(this);
21263          }
21264          return this.current;
21265      }
21266      /**
21267       * @public
21268       */
21269      getPrevious() {
21270          return this.prev;
21271      }
21272      /**
21273       * Returns the latest velocity of `MotionValue`
21274       *
21275       * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
21276       *
21277       * @public
21278       */
21279      getVelocity() {
21280          // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
21281          return this.canTrackVelocity
21282              ? // These casts could be avoided if parseFloat would be typed better
21283                  velocityPerSecond(parseFloat(this.current) -
21284                      parseFloat(this.prev), this.timeDelta)
21285              : 0;
21286      }
21287      /**
21288       * Registers a new animation to control this `MotionValue`. Only one
21289       * animation can drive a `MotionValue` at one time.
21290       *
21291       * ```jsx
21292       * value.start()
21293       * ```
21294       *
21295       * @param animation - A function that starts the provided animation
21296       *
21297       * @internal
21298       */
21299      start(startAnimation) {
21300          this.stop();
21301          return new Promise((resolve) => {
21302              this.hasAnimated = true;
21303              this.animation = startAnimation(resolve);
21304              if (this.events.animationStart) {
21305                  this.events.animationStart.notify();
21306              }
21307          }).then(() => {
21308              if (this.events.animationComplete) {
21309                  this.events.animationComplete.notify();
21310              }
21311              this.clearAnimation();
21312          });
21313      }
21314      /**
21315       * Stop the currently active animation.
21316       *
21317       * @public
21318       */
21319      stop() {
21320          if (this.animation) {
21321              this.animation.stop();
21322              if (this.events.animationCancel) {
21323                  this.events.animationCancel.notify();
21324              }
21325          }
21326          this.clearAnimation();
21327      }
21328      /**
21329       * Returns `true` if this value is currently animating.
21330       *
21331       * @public
21332       */
21333      isAnimating() {
21334          return !!this.animation;
21335      }
21336      clearAnimation() {
21337          delete this.animation;
21338      }
21339      /**
21340       * Destroy and clean up subscribers to this `MotionValue`.
21341       *
21342       * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
21343       * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
21344       * created a `MotionValue` via the `motionValue` function.
21345       *
21346       * @public
21347       */
21348      destroy() {
21349          this.clearListeners();
21350          this.stop();
21351          if (this.stopPassiveEffect) {
21352              this.stopPassiveEffect();
21353          }
21354      }
21355  }
21356  function motionValue(init, options) {
21357      return new MotionValue(init, options);
21358  }
21359  
21360  
21361  
21362  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs
21363  /**
21364   * Tests a provided value against a ValueType
21365   */
21366  const testValueType = (v) => (type) => type.test(v);
21367  
21368  
21369  
21370  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs
21371  /**
21372   * ValueType for "auto"
21373   */
21374  const auto = {
21375      test: (v) => v === "auto",
21376      parse: (v) => v,
21377  };
21378  
21379  
21380  
21381  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs
21382  
21383  
21384  
21385  
21386  
21387  /**
21388   * A list of value types commonly used for dimensions
21389   */
21390  const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
21391  /**
21392   * Tests a dimensional value against the list of dimension ValueTypes
21393   */
21394  const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
21395  
21396  
21397  
21398  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs
21399  
21400  
21401  
21402  
21403  
21404  /**
21405   * A list of all ValueTypes
21406   */
21407  const valueTypes = [...dimensionValueTypes, color, complex];
21408  /**
21409   * Tests a value against the list of ValueTypes
21410   */
21411  const findValueType = (v) => valueTypes.find(testValueType(v));
21412  
21413  
21414  
21415  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/setters.mjs
21416  
21417  
21418  
21419  
21420  
21421  
21422  
21423  
21424  
21425  /**
21426   * Set VisualElement's MotionValue, creating a new MotionValue for it if
21427   * it doesn't exist.
21428   */
21429  function setMotionValue(visualElement, key, value) {
21430      if (visualElement.hasValue(key)) {
21431          visualElement.getValue(key).set(value);
21432      }
21433      else {
21434          visualElement.addValue(key, motionValue(value));
21435      }
21436  }
21437  function setTarget(visualElement, definition) {
21438      const resolved = resolveVariant(visualElement, definition);
21439      let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
21440      target = { ...target, ...transitionEnd };
21441      for (const key in target) {
21442          const value = resolveFinalValueInKeyframes(target[key]);
21443          setMotionValue(visualElement, key, value);
21444      }
21445  }
21446  function setVariants(visualElement, variantLabels) {
21447      const reversedLabels = [...variantLabels].reverse();
21448      reversedLabels.forEach((key) => {
21449          const variant = visualElement.getVariant(key);
21450          variant && setTarget(visualElement, variant);
21451          if (visualElement.variantChildren) {
21452              visualElement.variantChildren.forEach((child) => {
21453                  setVariants(child, variantLabels);
21454              });
21455          }
21456      });
21457  }
21458  function setValues(visualElement, definition) {
21459      if (Array.isArray(definition)) {
21460          return setVariants(visualElement, definition);
21461      }
21462      else if (typeof definition === "string") {
21463          return setVariants(visualElement, [definition]);
21464      }
21465      else {
21466          setTarget(visualElement, definition);
21467      }
21468  }
21469  function checkTargetForNewValues(visualElement, target, origin) {
21470      var _a, _b;
21471      const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
21472      const numNewValues = newValueKeys.length;
21473      if (!numNewValues)
21474          return;
21475      for (let i = 0; i < numNewValues; i++) {
21476          const key = newValueKeys[i];
21477          const targetValue = target[key];
21478          let value = null;
21479          /**
21480           * If the target is a series of keyframes, we can use the first value
21481           * in the array. If this first value is null, we'll still need to read from the DOM.
21482           */
21483          if (Array.isArray(targetValue)) {
21484              value = targetValue[0];
21485          }
21486          /**
21487           * If the target isn't keyframes, or the first keyframe was null, we need to
21488           * first check if an origin value was explicitly defined in the transition as "from",
21489           * if not read the value from the DOM. As an absolute fallback, take the defined target value.
21490           */
21491          if (value === null) {
21492              value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
21493          }
21494          /**
21495           * If value is still undefined or null, ignore it. Preferably this would throw,
21496           * but this was causing issues in Framer.
21497           */
21498          if (value === undefined || value === null)
21499              continue;
21500          if (typeof value === "string" &&
21501              (isNumericalString(value) || isZeroValueString(value))) {
21502              // If this is a number read as a string, ie "0" or "200", convert it to a number
21503              value = parseFloat(value);
21504          }
21505          else if (!findValueType(value) && complex.test(targetValue)) {
21506              value = animatable_none_getAnimatableNone(key, targetValue);
21507          }
21508          visualElement.addValue(key, motionValue(value, { owner: visualElement }));
21509          if (origin[key] === undefined) {
21510              origin[key] = value;
21511          }
21512          if (value !== null)
21513              visualElement.setBaseTarget(key, value);
21514      }
21515  }
21516  function getOriginFromTransition(key, transition) {
21517      if (!transition)
21518          return;
21519      const valueTransition = transition[key] || transition["default"] || transition;
21520      return valueTransition.from;
21521  }
21522  function getOrigin(target, transition, visualElement) {
21523      const origin = {};
21524      for (const key in target) {
21525          const transitionOrigin = getOriginFromTransition(key, transition);
21526          if (transitionOrigin !== undefined) {
21527              origin[key] = transitionOrigin;
21528          }
21529          else {
21530              const value = visualElement.getValue(key);
21531              if (value) {
21532                  origin[key] = value.get();
21533              }
21534          }
21535      }
21536      return origin;
21537  }
21538  
21539  
21540  
21541  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs
21542  
21543  
21544  
21545  
21546  
21547  
21548  
21549  /**
21550   * Decide whether we should block this animation. Previously, we achieved this
21551   * just by checking whether the key was listed in protectedKeys, but this
21552   * posed problems if an animation was triggered by afterChildren and protectedKeys
21553   * had been set to true in the meantime.
21554   */
21555  function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
21556      const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
21557      needsAnimating[key] = false;
21558      return shouldBlock;
21559  }
21560  function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
21561      let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
21562      const willChange = visualElement.getValue("willChange");
21563      if (transitionOverride)
21564          transition = transitionOverride;
21565      const animations = [];
21566      const animationTypeState = type &&
21567          visualElement.animationState &&
21568          visualElement.animationState.getState()[type];
21569      for (const key in target) {
21570          const value = visualElement.getValue(key);
21571          const valueTarget = target[key];
21572          if (!value ||
21573              valueTarget === undefined ||
21574              (animationTypeState &&
21575                  shouldBlockAnimation(animationTypeState, key))) {
21576              continue;
21577          }
21578          const valueTransition = {
21579              delay,
21580              elapsed: 0,
21581              ...transition,
21582          };
21583          /**
21584           * If this is the first time a value is being animated, check
21585           * to see if we're handling off from an existing animation.
21586           */
21587          if (window.HandoffAppearAnimations && !value.hasAnimated) {
21588              const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
21589              if (appearId) {
21590                  valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame);
21591                  valueTransition.syncStart = true;
21592              }
21593          }
21594          value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
21595              ? { type: false }
21596              : valueTransition));
21597          const animation = value.animation;
21598          if (isWillChangeMotionValue(willChange)) {
21599              willChange.add(key);
21600              animation.then(() => willChange.remove(key));
21601          }
21602          animations.push(animation);
21603      }
21604      if (transitionEnd) {
21605          Promise.all(animations).then(() => {
21606              transitionEnd && setTarget(visualElement, transitionEnd);
21607          });
21608      }
21609      return animations;
21610  }
21611  
21612  
21613  
21614  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs
21615  
21616  
21617  
21618  function animateVariant(visualElement, variant, options = {}) {
21619      const resolved = resolveVariant(visualElement, variant, options.custom);
21620      let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
21621      if (options.transitionOverride) {
21622          transition = options.transitionOverride;
21623      }
21624      /**
21625       * If we have a variant, create a callback that runs it as an animation.
21626       * Otherwise, we resolve a Promise immediately for a composable no-op.
21627       */
21628      const getAnimation = resolved
21629          ? () => Promise.all(animateTarget(visualElement, resolved, options))
21630          : () => Promise.resolve();
21631      /**
21632       * If we have children, create a callback that runs all their animations.
21633       * Otherwise, we resolve a Promise immediately for a composable no-op.
21634       */
21635      const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
21636          ? (forwardDelay = 0) => {
21637              const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
21638              return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
21639          }
21640          : () => Promise.resolve();
21641      /**
21642       * If the transition explicitly defines a "when" option, we need to resolve either
21643       * this animation or all children animations before playing the other.
21644       */
21645      const { when } = transition;
21646      if (when) {
21647          const [first, last] = when === "beforeChildren"
21648              ? [getAnimation, getChildAnimations]
21649              : [getChildAnimations, getAnimation];
21650          return first().then(() => last());
21651      }
21652      else {
21653          return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
21654      }
21655  }
21656  function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
21657      const animations = [];
21658      const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
21659      const generateStaggerDuration = staggerDirection === 1
21660          ? (i = 0) => i * staggerChildren
21661          : (i = 0) => maxStaggerDuration - i * staggerChildren;
21662      Array.from(visualElement.variantChildren)
21663          .sort(sortByTreeOrder)
21664          .forEach((child, i) => {
21665          child.notify("AnimationStart", variant);
21666          animations.push(animateVariant(child, variant, {
21667              ...options,
21668              delay: delayChildren + generateStaggerDuration(i),
21669          }).then(() => child.notify("AnimationComplete", variant)));
21670      });
21671      return Promise.all(animations);
21672  }
21673  function sortByTreeOrder(a, b) {
21674      return a.sortNodePosition(b);
21675  }
21676  
21677  
21678  
21679  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs
21680  
21681  
21682  
21683  
21684  function animateVisualElement(visualElement, definition, options = {}) {
21685      visualElement.notify("AnimationStart", definition);
21686      let animation;
21687      if (Array.isArray(definition)) {
21688          const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
21689          animation = Promise.all(animations);
21690      }
21691      else if (typeof definition === "string") {
21692          animation = animateVariant(visualElement, definition, options);
21693      }
21694      else {
21695          const resolvedDefinition = typeof definition === "function"
21696              ? resolveVariant(visualElement, definition, options.custom)
21697              : definition;
21698          animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
21699      }
21700      return animation.then(() => visualElement.notify("AnimationComplete", definition));
21701  }
21702  
21703  
21704  
21705  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/animation-state.mjs
21706  
21707  
21708  
21709  
21710  
21711  
21712  
21713  
21714  const reversePriorityOrder = [...variantPriorityOrder].reverse();
21715  const numAnimationTypes = variantPriorityOrder.length;
21716  function animateList(visualElement) {
21717      return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
21718  }
21719  function createAnimationState(visualElement) {
21720      let animate = animateList(visualElement);
21721      const state = createState();
21722      let isInitialRender = true;
21723      /**
21724       * This function will be used to reduce the animation definitions for
21725       * each active animation type into an object of resolved values for it.
21726       */
21727      const buildResolvedTypeValues = (acc, definition) => {
21728          const resolved = resolveVariant(visualElement, definition);
21729          if (resolved) {
21730              const { transition, transitionEnd, ...target } = resolved;
21731              acc = { ...acc, ...target, ...transitionEnd };
21732          }
21733          return acc;
21734      };
21735      /**
21736       * This just allows us to inject mocked animation functions
21737       * @internal
21738       */
21739      function setAnimateFunction(makeAnimator) {
21740          animate = makeAnimator(visualElement);
21741      }
21742      /**
21743       * When we receive new props, we need to:
21744       * 1. Create a list of protected keys for each type. This is a directory of
21745       *    value keys that are currently being "handled" by types of a higher priority
21746       *    so that whenever an animation is played of a given type, these values are
21747       *    protected from being animated.
21748       * 2. Determine if an animation type needs animating.
21749       * 3. Determine if any values have been removed from a type and figure out
21750       *    what to animate those to.
21751       */
21752      function animateChanges(options, changedActiveType) {
21753          const props = visualElement.getProps();
21754          const context = visualElement.getVariantContext(true) || {};
21755          /**
21756           * A list of animations that we'll build into as we iterate through the animation
21757           * types. This will get executed at the end of the function.
21758           */
21759          const animations = [];
21760          /**
21761           * Keep track of which values have been removed. Then, as we hit lower priority
21762           * animation types, we can check if they contain removed values and animate to that.
21763           */
21764          const removedKeys = new Set();
21765          /**
21766           * A dictionary of all encountered keys. This is an object to let us build into and
21767           * copy it without iteration. Each time we hit an animation type we set its protected
21768           * keys - the keys its not allowed to animate - to the latest version of this object.
21769           */
21770          let encounteredKeys = {};
21771          /**
21772           * If a variant has been removed at a given index, and this component is controlling
21773           * variant animations, we want to ensure lower-priority variants are forced to animate.
21774           */
21775          let removedVariantIndex = Infinity;
21776          /**
21777           * Iterate through all animation types in reverse priority order. For each, we want to
21778           * detect which values it's handling and whether or not they've changed (and therefore
21779           * need to be animated). If any values have been removed, we want to detect those in
21780           * lower priority props and flag for animation.
21781           */
21782          for (let i = 0; i < numAnimationTypes; i++) {
21783              const type = reversePriorityOrder[i];
21784              const typeState = state[type];
21785              const prop = props[type] !== undefined ? props[type] : context[type];
21786              const propIsVariant = isVariantLabel(prop);
21787              /**
21788               * If this type has *just* changed isActive status, set activeDelta
21789               * to that status. Otherwise set to null.
21790               */
21791              const activeDelta = type === changedActiveType ? typeState.isActive : null;
21792              if (activeDelta === false)
21793                  removedVariantIndex = i;
21794              /**
21795               * If this prop is an inherited variant, rather than been set directly on the
21796               * component itself, we want to make sure we allow the parent to trigger animations.
21797               *
21798               * TODO: Can probably change this to a !isControllingVariants check
21799               */
21800              let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
21801              /**
21802               *
21803               */
21804              if (isInherited &&
21805                  isInitialRender &&
21806                  visualElement.manuallyAnimateOnMount) {
21807                  isInherited = false;
21808              }
21809              /**
21810               * Set all encountered keys so far as the protected keys for this type. This will
21811               * be any key that has been animated or otherwise handled by active, higher-priortiy types.
21812               */
21813              typeState.protectedKeys = { ...encounteredKeys };
21814              // Check if we can skip analysing this prop early
21815              if (
21816              // If it isn't active and hasn't *just* been set as inactive
21817              (!typeState.isActive && activeDelta === null) ||
21818                  // If we didn't and don't have any defined prop for this animation type
21819                  (!prop && !typeState.prevProp) ||
21820                  // Or if the prop doesn't define an animation
21821                  isAnimationControls(prop) ||
21822                  typeof prop === "boolean") {
21823                  continue;
21824              }
21825              /**
21826               * As we go look through the values defined on this type, if we detect
21827               * a changed value or a value that was removed in a higher priority, we set
21828               * this to true and add this prop to the animation list.
21829               */
21830              const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
21831              let shouldAnimateType = variantDidChange ||
21832                  // If we're making this variant active, we want to always make it active
21833                  (type === changedActiveType &&
21834                      typeState.isActive &&
21835                      !isInherited &&
21836                      propIsVariant) ||
21837                  // If we removed a higher-priority variant (i is in reverse order)
21838                  (i > removedVariantIndex && propIsVariant);
21839              /**
21840               * As animations can be set as variant lists, variants or target objects, we
21841               * coerce everything to an array if it isn't one already
21842               */
21843              const definitionList = Array.isArray(prop) ? prop : [prop];
21844              /**
21845               * Build an object of all the resolved values. We'll use this in the subsequent
21846               * animateChanges calls to determine whether a value has changed.
21847               */
21848              let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
21849              if (activeDelta === false)
21850                  resolvedValues = {};
21851              /**
21852               * Now we need to loop through all the keys in the prev prop and this prop,
21853               * and decide:
21854               * 1. If the value has changed, and needs animating
21855               * 2. If it has been removed, and needs adding to the removedKeys set
21856               * 3. If it has been removed in a higher priority type and needs animating
21857               * 4. If it hasn't been removed in a higher priority but hasn't changed, and
21858               *    needs adding to the type's protectedKeys list.
21859               */
21860              const { prevResolvedValues = {} } = typeState;
21861              const allKeys = {
21862                  ...prevResolvedValues,
21863                  ...resolvedValues,
21864              };
21865              const markToAnimate = (key) => {
21866                  shouldAnimateType = true;
21867                  removedKeys.delete(key);
21868                  typeState.needsAnimating[key] = true;
21869              };
21870              for (const key in allKeys) {
21871                  const next = resolvedValues[key];
21872                  const prev = prevResolvedValues[key];
21873                  // If we've already handled this we can just skip ahead
21874                  if (encounteredKeys.hasOwnProperty(key))
21875                      continue;
21876                  /**
21877                   * If the value has changed, we probably want to animate it.
21878                   */
21879                  if (next !== prev) {
21880                      /**
21881                       * If both values are keyframes, we need to shallow compare them to
21882                       * detect whether any value has changed. If it has, we animate it.
21883                       */
21884                      if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
21885                          if (!shallowCompare(next, prev) || variantDidChange) {
21886                              markToAnimate(key);
21887                          }
21888                          else {
21889                              /**
21890                               * If it hasn't changed, we want to ensure it doesn't animate by
21891                               * adding it to the list of protected keys.
21892                               */
21893                              typeState.protectedKeys[key] = true;
21894                          }
21895                      }
21896                      else if (next !== undefined) {
21897                          // If next is defined and doesn't equal prev, it needs animating
21898                          markToAnimate(key);
21899                      }
21900                      else {
21901                          // If it's undefined, it's been removed.
21902                          removedKeys.add(key);
21903                      }
21904                  }
21905                  else if (next !== undefined && removedKeys.has(key)) {
21906                      /**
21907                       * If next hasn't changed and it isn't undefined, we want to check if it's
21908                       * been removed by a higher priority
21909                       */
21910                      markToAnimate(key);
21911                  }
21912                  else {
21913                      /**
21914                       * If it hasn't changed, we add it to the list of protected values
21915                       * to ensure it doesn't get animated.
21916                       */
21917                      typeState.protectedKeys[key] = true;
21918                  }
21919              }
21920              /**
21921               * Update the typeState so next time animateChanges is called we can compare the
21922               * latest prop and resolvedValues to these.
21923               */
21924              typeState.prevProp = prop;
21925              typeState.prevResolvedValues = resolvedValues;
21926              /**
21927               *
21928               */
21929              if (typeState.isActive) {
21930                  encounteredKeys = { ...encounteredKeys, ...resolvedValues };
21931              }
21932              if (isInitialRender && visualElement.blockInitialAnimation) {
21933                  shouldAnimateType = false;
21934              }
21935              /**
21936               * If this is an inherited prop we want to hard-block animations
21937               * TODO: Test as this should probably still handle animations triggered
21938               * by removed values?
21939               */
21940              if (shouldAnimateType && !isInherited) {
21941                  animations.push(...definitionList.map((animation) => ({
21942                      animation: animation,
21943                      options: { type, ...options },
21944                  })));
21945              }
21946          }
21947          /**
21948           * If there are some removed value that haven't been dealt with,
21949           * we need to create a new animation that falls back either to the value
21950           * defined in the style prop, or the last read value.
21951           */
21952          if (removedKeys.size) {
21953              const fallbackAnimation = {};
21954              removedKeys.forEach((key) => {
21955                  const fallbackTarget = visualElement.getBaseTarget(key);
21956                  if (fallbackTarget !== undefined) {
21957                      fallbackAnimation[key] = fallbackTarget;
21958                  }
21959              });
21960              animations.push({ animation: fallbackAnimation });
21961          }
21962          let shouldAnimate = Boolean(animations.length);
21963          if (isInitialRender &&
21964              props.initial === false &&
21965              !visualElement.manuallyAnimateOnMount) {
21966              shouldAnimate = false;
21967          }
21968          isInitialRender = false;
21969          return shouldAnimate ? animate(animations) : Promise.resolve();
21970      }
21971      /**
21972       * Change whether a certain animation type is active.
21973       */
21974      function setActive(type, isActive, options) {
21975          var _a;
21976          // If the active state hasn't changed, we can safely do nothing here
21977          if (state[type].isActive === isActive)
21978              return Promise.resolve();
21979          // Propagate active change to children
21980          (_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); });
21981          state[type].isActive = isActive;
21982          const animations = animateChanges(options, type);
21983          for (const key in state) {
21984              state[key].protectedKeys = {};
21985          }
21986          return animations;
21987      }
21988      return {
21989          animateChanges,
21990          setActive,
21991          setAnimateFunction,
21992          getState: () => state,
21993      };
21994  }
21995  function checkVariantsDidChange(prev, next) {
21996      if (typeof next === "string") {
21997          return next !== prev;
21998      }
21999      else if (Array.isArray(next)) {
22000          return !shallowCompare(next, prev);
22001      }
22002      return false;
22003  }
22004  function createTypeState(isActive = false) {
22005      return {
22006          isActive,
22007          protectedKeys: {},
22008          needsAnimating: {},
22009          prevResolvedValues: {},
22010      };
22011  }
22012  function createState() {
22013      return {
22014          animate: createTypeState(true),
22015          whileInView: createTypeState(),
22016          whileHover: createTypeState(),
22017          whileTap: createTypeState(),
22018          whileDrag: createTypeState(),
22019          whileFocus: createTypeState(),
22020          exit: createTypeState(),
22021      };
22022  }
22023  
22024  
22025  
22026  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/index.mjs
22027  
22028  
22029  
22030  
22031  class AnimationFeature extends Feature {
22032      /**
22033       * We dynamically generate the AnimationState manager as it contains a reference
22034       * to the underlying animation library. We only want to load that if we load this,
22035       * so people can optionally code split it out using the `m` component.
22036       */
22037      constructor(node) {
22038          super(node);
22039          node.animationState || (node.animationState = createAnimationState(node));
22040      }
22041      updateAnimationControlsSubscription() {
22042          const { animate } = this.node.getProps();
22043          this.unmount();
22044          if (isAnimationControls(animate)) {
22045              this.unmount = animate.subscribe(this.node);
22046          }
22047      }
22048      /**
22049       * Subscribe any provided AnimationControls to the component's VisualElement
22050       */
22051      mount() {
22052          this.updateAnimationControlsSubscription();
22053      }
22054      update() {
22055          const { animate } = this.node.getProps();
22056          const { animate: prevAnimate } = this.node.prevProps || {};
22057          if (animate !== prevAnimate) {
22058              this.updateAnimationControlsSubscription();
22059          }
22060      }
22061      unmount() { }
22062  }
22063  
22064  
22065  
22066  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs
22067  
22068  
22069  let id = 0;
22070  class ExitAnimationFeature extends Feature {
22071      constructor() {
22072          super(...arguments);
22073          this.id = id++;
22074      }
22075      update() {
22076          if (!this.node.presenceContext)
22077              return;
22078          const { isPresent, onExitComplete, custom } = this.node.presenceContext;
22079          const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
22080          if (!this.node.animationState || isPresent === prevIsPresent) {
22081              return;
22082          }
22083          const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
22084          if (onExitComplete && !isPresent) {
22085              exitAnimation.then(() => onExitComplete(this.id));
22086          }
22087      }
22088      mount() {
22089          const { register } = this.node.presenceContext || {};
22090          if (register) {
22091              this.unmount = register(this.id);
22092          }
22093      }
22094      unmount() { }
22095  }
22096  
22097  
22098  
22099  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animations.mjs
22100  
22101  
22102  
22103  const animations = {
22104      animation: {
22105          Feature: AnimationFeature,
22106      },
22107      exit: {
22108          Feature: ExitAnimationFeature,
22109      },
22110  };
22111  
22112  
22113  
22114  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/distance.mjs
22115  const distance = (a, b) => Math.abs(a - b);
22116  function distance2D(a, b) {
22117      // Multi-dimensional
22118      const xDelta = distance(a.x, b.x);
22119      const yDelta = distance(a.y, b.y);
22120      return Math.sqrt(xDelta ** 2 + yDelta ** 2);
22121  }
22122  
22123  
22124  
22125  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
22126  
22127  
22128  
22129  
22130  
22131  
22132  
22133  
22134  /**
22135   * @internal
22136   */
22137  class PanSession {
22138      constructor(event, handlers, { transformPagePoint } = {}) {
22139          /**
22140           * @internal
22141           */
22142          this.startEvent = null;
22143          /**
22144           * @internal
22145           */
22146          this.lastMoveEvent = null;
22147          /**
22148           * @internal
22149           */
22150          this.lastMoveEventInfo = null;
22151          /**
22152           * @internal
22153           */
22154          this.handlers = {};
22155          this.updatePoint = () => {
22156              if (!(this.lastMoveEvent && this.lastMoveEventInfo))
22157                  return;
22158              const info = getPanInfo(this.lastMoveEventInfo, this.history);
22159              const isPanStarted = this.startEvent !== null;
22160              // Only start panning if the offset is larger than 3 pixels. If we make it
22161              // any larger than this we'll want to reset the pointer history
22162              // on the first update to avoid visual snapping to the cursoe.
22163              const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
22164              if (!isPanStarted && !isDistancePastThreshold)
22165                  return;
22166              const { point } = info;
22167              const { timestamp } = frameData;
22168              this.history.push({ ...point, timestamp });
22169              const { onStart, onMove } = this.handlers;
22170              if (!isPanStarted) {
22171                  onStart && onStart(this.lastMoveEvent, info);
22172                  this.startEvent = this.lastMoveEvent;
22173              }
22174              onMove && onMove(this.lastMoveEvent, info);
22175          };
22176          this.handlePointerMove = (event, info) => {
22177              this.lastMoveEvent = event;
22178              this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
22179              // Throttle mouse move event to once per frame
22180              frame_frame.update(this.updatePoint, true);
22181          };
22182          this.handlePointerUp = (event, info) => {
22183              this.end();
22184              if (!(this.lastMoveEvent && this.lastMoveEventInfo))
22185                  return;
22186              const { onEnd, onSessionEnd } = this.handlers;
22187              const panInfo = getPanInfo(event.type === "pointercancel"
22188                  ? this.lastMoveEventInfo
22189                  : transformPoint(info, this.transformPagePoint), this.history);
22190              if (this.startEvent && onEnd) {
22191                  onEnd(event, panInfo);
22192              }
22193              onSessionEnd && onSessionEnd(event, panInfo);
22194          };
22195          // If we have more than one touch, don't start detecting this gesture
22196          if (!isPrimaryPointer(event))
22197              return;
22198          this.handlers = handlers;
22199          this.transformPagePoint = transformPagePoint;
22200          const info = extractEventInfo(event);
22201          const initialInfo = transformPoint(info, this.transformPagePoint);
22202          const { point } = initialInfo;
22203          const { timestamp } = frameData;
22204          this.history = [{ ...point, timestamp }];
22205          const { onSessionStart } = handlers;
22206          onSessionStart &&
22207              onSessionStart(event, getPanInfo(initialInfo, this.history));
22208          this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
22209      }
22210      updateHandlers(handlers) {
22211          this.handlers = handlers;
22212      }
22213      end() {
22214          this.removeListeners && this.removeListeners();
22215          cancelFrame(this.updatePoint);
22216      }
22217  }
22218  function transformPoint(info, transformPagePoint) {
22219      return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
22220  }
22221  function subtractPoint(a, b) {
22222      return { x: a.x - b.x, y: a.y - b.y };
22223  }
22224  function getPanInfo({ point }, history) {
22225      return {
22226          point,
22227          delta: subtractPoint(point, lastDevicePoint(history)),
22228          offset: subtractPoint(point, startDevicePoint(history)),
22229          velocity: PanSession_getVelocity(history, 0.1),
22230      };
22231  }
22232  function startDevicePoint(history) {
22233      return history[0];
22234  }
22235  function lastDevicePoint(history) {
22236      return history[history.length - 1];
22237  }
22238  function PanSession_getVelocity(history, timeDelta) {
22239      if (history.length < 2) {
22240          return { x: 0, y: 0 };
22241      }
22242      let i = history.length - 1;
22243      let timestampedPoint = null;
22244      const lastPoint = lastDevicePoint(history);
22245      while (i >= 0) {
22246          timestampedPoint = history[i];
22247          if (lastPoint.timestamp - timestampedPoint.timestamp >
22248              secondsToMilliseconds(timeDelta)) {
22249              break;
22250          }
22251          i--;
22252      }
22253      if (!timestampedPoint) {
22254          return { x: 0, y: 0 };
22255      }
22256      const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
22257      if (time === 0) {
22258          return { x: 0, y: 0 };
22259      }
22260      const currentVelocity = {
22261          x: (lastPoint.x - timestampedPoint.x) / time,
22262          y: (lastPoint.y - timestampedPoint.y) / time,
22263      };
22264      if (currentVelocity.x === Infinity) {
22265          currentVelocity.x = 0;
22266      }
22267      if (currentVelocity.y === Infinity) {
22268          currentVelocity.y = 0;
22269      }
22270      return currentVelocity;
22271  }
22272  
22273  
22274  
22275  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs
22276  
22277  
22278  function calcLength(axis) {
22279      return axis.max - axis.min;
22280  }
22281  function isNear(value, target = 0, maxDistance = 0.01) {
22282      return Math.abs(value - target) <= maxDistance;
22283  }
22284  function calcAxisDelta(delta, source, target, origin = 0.5) {
22285      delta.origin = origin;
22286      delta.originPoint = mix(source.min, source.max, delta.origin);
22287      delta.scale = calcLength(target) / calcLength(source);
22288      if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))
22289          delta.scale = 1;
22290      delta.translate =
22291          mix(target.min, target.max, delta.origin) - delta.originPoint;
22292      if (isNear(delta.translate) || isNaN(delta.translate))
22293          delta.translate = 0;
22294  }
22295  function calcBoxDelta(delta, source, target, origin) {
22296      calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
22297      calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
22298  }
22299  function calcRelativeAxis(target, relative, parent) {
22300      target.min = parent.min + relative.min;
22301      target.max = target.min + calcLength(relative);
22302  }
22303  function calcRelativeBox(target, relative, parent) {
22304      calcRelativeAxis(target.x, relative.x, parent.x);
22305      calcRelativeAxis(target.y, relative.y, parent.y);
22306  }
22307  function calcRelativeAxisPosition(target, layout, parent) {
22308      target.min = layout.min - parent.min;
22309      target.max = target.min + calcLength(layout);
22310  }
22311  function calcRelativePosition(target, layout, parent) {
22312      calcRelativeAxisPosition(target.x, layout.x, parent.x);
22313      calcRelativeAxisPosition(target.y, layout.y, parent.y);
22314  }
22315  
22316  
22317  
22318  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs
22319  
22320  
22321  
22322  
22323  
22324  /**
22325   * Apply constraints to a point. These constraints are both physical along an
22326   * axis, and an elastic factor that determines how much to constrain the point
22327   * by if it does lie outside the defined parameters.
22328   */
22329  function applyConstraints(point, { min, max }, elastic) {
22330      if (min !== undefined && point < min) {
22331          // If we have a min point defined, and this is outside of that, constrain
22332          point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
22333      }
22334      else if (max !== undefined && point > max) {
22335          // If we have a max point defined, and this is outside of that, constrain
22336          point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
22337      }
22338      return point;
22339  }
22340  /**
22341   * Calculate constraints in terms of the viewport when defined relatively to the
22342   * measured axis. This is measured from the nearest edge, so a max constraint of 200
22343   * on an axis with a max value of 300 would return a constraint of 500 - axis length
22344   */
22345  function calcRelativeAxisConstraints(axis, min, max) {
22346      return {
22347          min: min !== undefined ? axis.min + min : undefined,
22348          max: max !== undefined
22349              ? axis.max + max - (axis.max - axis.min)
22350              : undefined,
22351      };
22352  }
22353  /**
22354   * Calculate constraints in terms of the viewport when
22355   * defined relatively to the measured bounding box.
22356   */
22357  function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
22358      return {
22359          x: calcRelativeAxisConstraints(layoutBox.x, left, right),
22360          y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
22361      };
22362  }
22363  /**
22364   * Calculate viewport constraints when defined as another viewport-relative axis
22365   */
22366  function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
22367      let min = constraintsAxis.min - layoutAxis.min;
22368      let max = constraintsAxis.max - layoutAxis.max;
22369      // If the constraints axis is actually smaller than the layout axis then we can
22370      // flip the constraints
22371      if (constraintsAxis.max - constraintsAxis.min <
22372          layoutAxis.max - layoutAxis.min) {
22373          [min, max] = [max, min];
22374      }
22375      return { min, max };
22376  }
22377  /**
22378   * Calculate viewport constraints when defined as another viewport-relative box
22379   */
22380  function calcViewportConstraints(layoutBox, constraintsBox) {
22381      return {
22382          x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
22383          y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
22384      };
22385  }
22386  /**
22387   * Calculate a transform origin relative to the source axis, between 0-1, that results
22388   * in an asthetically pleasing scale/transform needed to project from source to target.
22389   */
22390  function constraints_calcOrigin(source, target) {
22391      let origin = 0.5;
22392      const sourceLength = calcLength(source);
22393      const targetLength = calcLength(target);
22394      if (targetLength > sourceLength) {
22395          origin = progress(target.min, target.max - sourceLength, source.min);
22396      }
22397      else if (sourceLength > targetLength) {
22398          origin = progress(source.min, source.max - targetLength, target.min);
22399      }
22400      return clamp_clamp(0, 1, origin);
22401  }
22402  /**
22403   * Rebase the calculated viewport constraints relative to the layout.min point.
22404   */
22405  function rebaseAxisConstraints(layout, constraints) {
22406      const relativeConstraints = {};
22407      if (constraints.min !== undefined) {
22408          relativeConstraints.min = constraints.min - layout.min;
22409      }
22410      if (constraints.max !== undefined) {
22411          relativeConstraints.max = constraints.max - layout.min;
22412      }
22413      return relativeConstraints;
22414  }
22415  const defaultElastic = 0.35;
22416  /**
22417   * Accepts a dragElastic prop and returns resolved elastic values for each axis.
22418   */
22419  function resolveDragElastic(dragElastic = defaultElastic) {
22420      if (dragElastic === false) {
22421          dragElastic = 0;
22422      }
22423      else if (dragElastic === true) {
22424          dragElastic = defaultElastic;
22425      }
22426      return {
22427          x: resolveAxisElastic(dragElastic, "left", "right"),
22428          y: resolveAxisElastic(dragElastic, "top", "bottom"),
22429      };
22430  }
22431  function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
22432      return {
22433          min: resolvePointElastic(dragElastic, minLabel),
22434          max: resolvePointElastic(dragElastic, maxLabel),
22435      };
22436  }
22437  function resolvePointElastic(dragElastic, label) {
22438      return typeof dragElastic === "number"
22439          ? dragElastic
22440          : dragElastic[label] || 0;
22441  }
22442  
22443  
22444  
22445  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/models.mjs
22446  const createAxisDelta = () => ({
22447      translate: 0,
22448      scale: 1,
22449      origin: 0,
22450      originPoint: 0,
22451  });
22452  const createDelta = () => ({
22453      x: createAxisDelta(),
22454      y: createAxisDelta(),
22455  });
22456  const createAxis = () => ({ min: 0, max: 0 });
22457  const createBox = () => ({
22458      x: createAxis(),
22459      y: createAxis(),
22460  });
22461  
22462  
22463  
22464  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs
22465  function eachAxis(callback) {
22466      return [callback("x"), callback("y")];
22467  }
22468  
22469  
22470  
22471  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs
22472  /**
22473   * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
22474   * it's easier to consider each axis individually. This function returns a bounding box
22475   * as a map of single-axis min/max values.
22476   */
22477  function convertBoundingBoxToBox({ top, left, right, bottom, }) {
22478      return {
22479          x: { min: left, max: right },
22480          y: { min: top, max: bottom },
22481      };
22482  }
22483  function convertBoxToBoundingBox({ x, y }) {
22484      return { top: y.min, right: x.max, bottom: y.max, left: x.min };
22485  }
22486  /**
22487   * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
22488   * provided by Framer to allow measured points to be corrected for device scaling. This is used
22489   * when measuring DOM elements and DOM event points.
22490   */
22491  function transformBoxPoints(point, transformPoint) {
22492      if (!transformPoint)
22493          return point;
22494      const topLeft = transformPoint({ x: point.left, y: point.top });
22495      const bottomRight = transformPoint({ x: point.right, y: point.bottom });
22496      return {
22497          top: topLeft.y,
22498          left: topLeft.x,
22499          bottom: bottomRight.y,
22500          right: bottomRight.x,
22501      };
22502  }
22503  
22504  
22505  
22506  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs
22507  function isIdentityScale(scale) {
22508      return scale === undefined || scale === 1;
22509  }
22510  function hasScale({ scale, scaleX, scaleY }) {
22511      return (!isIdentityScale(scale) ||
22512          !isIdentityScale(scaleX) ||
22513          !isIdentityScale(scaleY));
22514  }
22515  function hasTransform(values) {
22516      return (hasScale(values) ||
22517          has2DTranslate(values) ||
22518          values.z ||
22519          values.rotate ||
22520          values.rotateX ||
22521          values.rotateY);
22522  }
22523  function has2DTranslate(values) {
22524      return is2DTranslate(values.x) || is2DTranslate(values.y);
22525  }
22526  function is2DTranslate(value) {
22527      return value && value !== "0%";
22528  }
22529  
22530  
22531  
22532  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs
22533  
22534  
22535  
22536  /**
22537   * Scales a point based on a factor and an originPoint
22538   */
22539  function scalePoint(point, scale, originPoint) {
22540      const distanceFromOrigin = point - originPoint;
22541      const scaled = scale * distanceFromOrigin;
22542      return originPoint + scaled;
22543  }
22544  /**
22545   * Applies a translate/scale delta to a point
22546   */
22547  function applyPointDelta(point, translate, scale, originPoint, boxScale) {
22548      if (boxScale !== undefined) {
22549          point = scalePoint(point, boxScale, originPoint);
22550      }
22551      return scalePoint(point, scale, originPoint) + translate;
22552  }
22553  /**
22554   * Applies a translate/scale delta to an axis
22555   */
22556  function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {
22557      axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);
22558      axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);
22559  }
22560  /**
22561   * Applies a translate/scale delta to a box
22562   */
22563  function applyBoxDelta(box, { x, y }) {
22564      applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
22565      applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
22566  }
22567  /**
22568   * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
22569   * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
22570   *
22571   * This is the final nested loop within updateLayoutDelta for future refactoring
22572   */
22573  function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
22574      const treeLength = treePath.length;
22575      if (!treeLength)
22576          return;
22577      // Reset the treeScale
22578      treeScale.x = treeScale.y = 1;
22579      let node;
22580      let delta;
22581      for (let i = 0; i < treeLength; i++) {
22582          node = treePath[i];
22583          delta = node.projectionDelta;
22584          /**
22585           * TODO: Prefer to remove this, but currently we have motion components with
22586           * display: contents in Framer.
22587           */
22588          const instance = node.instance;
22589          if (instance &&
22590              instance.style &&
22591              instance.style.display === "contents") {
22592              continue;
22593          }
22594          if (isSharedTransition &&
22595              node.options.layoutScroll &&
22596              node.scroll &&
22597              node !== node.root) {
22598              transformBox(box, {
22599                  x: -node.scroll.offset.x,
22600                  y: -node.scroll.offset.y,
22601              });
22602          }
22603          if (delta) {
22604              // Incoporate each ancestor's scale into a culmulative treeScale for this component
22605              treeScale.x *= delta.x.scale;
22606              treeScale.y *= delta.y.scale;
22607              // Apply each ancestor's calculated delta into this component's recorded layout box
22608              applyBoxDelta(box, delta);
22609          }
22610          if (isSharedTransition && hasTransform(node.latestValues)) {
22611              transformBox(box, node.latestValues);
22612          }
22613      }
22614      /**
22615       * Snap tree scale back to 1 if it's within a non-perceivable threshold.
22616       * This will help reduce useless scales getting rendered.
22617       */
22618      treeScale.x = snapToDefault(treeScale.x);
22619      treeScale.y = snapToDefault(treeScale.y);
22620  }
22621  function snapToDefault(scale) {
22622      if (Number.isInteger(scale))
22623          return scale;
22624      return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;
22625  }
22626  function translateAxis(axis, distance) {
22627      axis.min = axis.min + distance;
22628      axis.max = axis.max + distance;
22629  }
22630  /**
22631   * Apply a transform to an axis from the latest resolved motion values.
22632   * This function basically acts as a bridge between a flat motion value map
22633   * and applyAxisDelta
22634   */
22635  function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
22636      const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
22637      const originPoint = mix(axis.min, axis.max, axisOrigin);
22638      // Apply the axis delta to the final axis
22639      applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
22640  }
22641  /**
22642   * The names of the motion values we want to apply as translation, scale and origin.
22643   */
22644  const xKeys = ["x", "scaleX", "originX"];
22645  const yKeys = ["y", "scaleY", "originY"];
22646  /**
22647   * Apply a transform to a box from the latest resolved motion values.
22648   */
22649  function transformBox(box, transform) {
22650      transformAxis(box.x, transform, xKeys);
22651      transformAxis(box.y, transform, yKeys);
22652  }
22653  
22654  
22655  
22656  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/measure.mjs
22657  
22658  
22659  
22660  function measureViewportBox(instance, transformPoint) {
22661      return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
22662  }
22663  function measurePageBox(element, rootProjectionNode, transformPagePoint) {
22664      const viewportBox = measureViewportBox(element, transformPagePoint);
22665      const { scroll } = rootProjectionNode;
22666      if (scroll) {
22667          translateAxis(viewportBox.x, scroll.offset.x);
22668          translateAxis(viewportBox.y, scroll.offset.y);
22669      }
22670      return viewportBox;
22671  }
22672  
22673  
22674  
22675  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs
22676  
22677  
22678  
22679  
22680  
22681  
22682  
22683  
22684  
22685  
22686  
22687  
22688  
22689  
22690  
22691  
22692  
22693  
22694  const elementDragControls = new WeakMap();
22695  /**
22696   *
22697   */
22698  // let latestPointerEvent: PointerEvent
22699  class VisualElementDragControls {
22700      constructor(visualElement) {
22701          // This is a reference to the global drag gesture lock, ensuring only one component
22702          // can "capture" the drag of one or both axes.
22703          // TODO: Look into moving this into pansession?
22704          this.openGlobalLock = null;
22705          this.isDragging = false;
22706          this.currentDirection = null;
22707          this.originPoint = { x: 0, y: 0 };
22708          /**
22709           * The permitted boundaries of travel, in pixels.
22710           */
22711          this.constraints = false;
22712          this.hasMutatedConstraints = false;
22713          /**
22714           * The per-axis resolved elastic values.
22715           */
22716          this.elastic = createBox();
22717          this.visualElement = visualElement;
22718      }
22719      start(originEvent, { snapToCursor = false } = {}) {
22720          /**
22721           * Don't start dragging if this component is exiting
22722           */
22723          const { presenceContext } = this.visualElement;
22724          if (presenceContext && presenceContext.isPresent === false)
22725              return;
22726          const onSessionStart = (event) => {
22727              // Stop any animations on both axis values immediately. This allows the user to throw and catch
22728              // the component.
22729              this.stopAnimation();
22730              if (snapToCursor) {
22731                  this.snapToCursor(extractEventInfo(event, "page").point);
22732              }
22733          };
22734          const onStart = (event, info) => {
22735              // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
22736              const { drag, dragPropagation, onDragStart } = this.getProps();
22737              if (drag && !dragPropagation) {
22738                  if (this.openGlobalLock)
22739                      this.openGlobalLock();
22740                  this.openGlobalLock = getGlobalLock(drag);
22741                  // If we don 't have the lock, don't start dragging
22742                  if (!this.openGlobalLock)
22743                      return;
22744              }
22745              this.isDragging = true;
22746              this.currentDirection = null;
22747              this.resolveConstraints();
22748              if (this.visualElement.projection) {
22749                  this.visualElement.projection.isAnimationBlocked = true;
22750                  this.visualElement.projection.target = undefined;
22751              }
22752              /**
22753               * Record gesture origin
22754               */
22755              eachAxis((axis) => {
22756                  let current = this.getAxisMotionValue(axis).get() || 0;
22757                  /**
22758                   * If the MotionValue is a percentage value convert to px
22759                   */
22760                  if (percent.test(current)) {
22761                      const { projection } = this.visualElement;
22762                      if (projection && projection.layout) {
22763                          const measuredAxis = projection.layout.layoutBox[axis];
22764                          if (measuredAxis) {
22765                              const length = calcLength(measuredAxis);
22766                              current = length * (parseFloat(current) / 100);
22767                          }
22768                      }
22769                  }
22770                  this.originPoint[axis] = current;
22771              });
22772              // Fire onDragStart event
22773              if (onDragStart) {
22774                  frame_frame.update(() => onDragStart(event, info), false, true);
22775              }
22776              const { animationState } = this.visualElement;
22777              animationState && animationState.setActive("whileDrag", true);
22778          };
22779          const onMove = (event, info) => {
22780              // latestPointerEvent = event
22781              const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
22782              // If we didn't successfully receive the gesture lock, early return.
22783              if (!dragPropagation && !this.openGlobalLock)
22784                  return;
22785              const { offset } = info;
22786              // Attempt to detect drag direction if directionLock is true
22787              if (dragDirectionLock && this.currentDirection === null) {
22788                  this.currentDirection = getCurrentDirection(offset);
22789                  // If we've successfully set a direction, notify listener
22790                  if (this.currentDirection !== null) {
22791                      onDirectionLock && onDirectionLock(this.currentDirection);
22792                  }
22793                  return;
22794              }
22795              // Update each point with the latest position
22796              this.updateAxis("x", info.point, offset);
22797              this.updateAxis("y", info.point, offset);
22798              /**
22799               * Ideally we would leave the renderer to fire naturally at the end of
22800               * this frame but if the element is about to change layout as the result
22801               * of a re-render we want to ensure the browser can read the latest
22802               * bounding box to ensure the pointer and element don't fall out of sync.
22803               */
22804              this.visualElement.render();
22805              /**
22806               * This must fire after the render call as it might trigger a state
22807               * change which itself might trigger a layout update.
22808               */
22809              onDrag && onDrag(event, info);
22810          };
22811          const onSessionEnd = (event, info) => this.stop(event, info);
22812          this.panSession = new PanSession(originEvent, {
22813              onSessionStart,
22814              onStart,
22815              onMove,
22816              onSessionEnd,
22817          }, { transformPagePoint: this.visualElement.getTransformPagePoint() });
22818      }
22819      stop(event, info) {
22820          const isDragging = this.isDragging;
22821          this.cancel();
22822          if (!isDragging)
22823              return;
22824          const { velocity } = info;
22825          this.startAnimation(velocity);
22826          const { onDragEnd } = this.getProps();
22827          if (onDragEnd) {
22828              frame_frame.update(() => onDragEnd(event, info));
22829          }
22830      }
22831      cancel() {
22832          this.isDragging = false;
22833          const { projection, animationState } = this.visualElement;
22834          if (projection) {
22835              projection.isAnimationBlocked = false;
22836          }
22837          this.panSession && this.panSession.end();
22838          this.panSession = undefined;
22839          const { dragPropagation } = this.getProps();
22840          if (!dragPropagation && this.openGlobalLock) {
22841              this.openGlobalLock();
22842              this.openGlobalLock = null;
22843          }
22844          animationState && animationState.setActive("whileDrag", false);
22845      }
22846      updateAxis(axis, _point, offset) {
22847          const { drag } = this.getProps();
22848          // If we're not dragging this axis, do an early return.
22849          if (!offset || !shouldDrag(axis, drag, this.currentDirection))
22850              return;
22851          const axisValue = this.getAxisMotionValue(axis);
22852          let next = this.originPoint[axis] + offset[axis];
22853          // Apply constraints
22854          if (this.constraints && this.constraints[axis]) {
22855              next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
22856          }
22857          axisValue.set(next);
22858      }
22859      resolveConstraints() {
22860          const { dragConstraints, dragElastic } = this.getProps();
22861          const { layout } = this.visualElement.projection || {};
22862          const prevConstraints = this.constraints;
22863          if (dragConstraints && isRefObject(dragConstraints)) {
22864              if (!this.constraints) {
22865                  this.constraints = this.resolveRefConstraints();
22866              }
22867          }
22868          else {
22869              if (dragConstraints && layout) {
22870                  this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
22871              }
22872              else {
22873                  this.constraints = false;
22874              }
22875          }
22876          this.elastic = resolveDragElastic(dragElastic);
22877          /**
22878           * If we're outputting to external MotionValues, we want to rebase the measured constraints
22879           * from viewport-relative to component-relative.
22880           */
22881          if (prevConstraints !== this.constraints &&
22882              layout &&
22883              this.constraints &&
22884              !this.hasMutatedConstraints) {
22885              eachAxis((axis) => {
22886                  if (this.getAxisMotionValue(axis)) {
22887                      this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
22888                  }
22889              });
22890          }
22891      }
22892      resolveRefConstraints() {
22893          const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
22894          if (!constraints || !isRefObject(constraints))
22895              return false;
22896          const constraintsElement = constraints.current;
22897          errors_invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
22898          const { projection } = this.visualElement;
22899          // TODO
22900          if (!projection || !projection.layout)
22901              return false;
22902          const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
22903          let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
22904          /**
22905           * If there's an onMeasureDragConstraints listener we call it and
22906           * if different constraints are returned, set constraints to that
22907           */
22908          if (onMeasureDragConstraints) {
22909              const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
22910              this.hasMutatedConstraints = !!userConstraints;
22911              if (userConstraints) {
22912                  measuredConstraints = convertBoundingBoxToBox(userConstraints);
22913              }
22914          }
22915          return measuredConstraints;
22916      }
22917      startAnimation(velocity) {
22918          const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
22919          const constraints = this.constraints || {};
22920          const momentumAnimations = eachAxis((axis) => {
22921              if (!shouldDrag(axis, drag, this.currentDirection)) {
22922                  return;
22923              }
22924              let transition = (constraints && constraints[axis]) || {};
22925              if (dragSnapToOrigin)
22926                  transition = { min: 0, max: 0 };
22927              /**
22928               * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
22929               * of spring animations so we should look into adding a disable spring option to `inertia`.
22930               * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
22931               * using the value of `dragElastic`.
22932               */
22933              const bounceStiffness = dragElastic ? 200 : 1000000;
22934              const bounceDamping = dragElastic ? 40 : 10000000;
22935              const inertia = {
22936                  type: "inertia",
22937                  velocity: dragMomentum ? velocity[axis] : 0,
22938                  bounceStiffness,
22939                  bounceDamping,
22940                  timeConstant: 750,
22941                  restDelta: 1,
22942                  restSpeed: 10,
22943                  ...dragTransition,
22944                  ...transition,
22945              };
22946              // If we're not animating on an externally-provided `MotionValue` we can use the
22947              // component's animation controls which will handle interactions with whileHover (etc),
22948              // otherwise we just have to animate the `MotionValue` itself.
22949              return this.startAxisValueAnimation(axis, inertia);
22950          });
22951          // Run all animations and then resolve the new drag constraints.
22952          return Promise.all(momentumAnimations).then(onDragTransitionEnd);
22953      }
22954      startAxisValueAnimation(axis, transition) {
22955          const axisValue = this.getAxisMotionValue(axis);
22956          return axisValue.start(animateMotionValue(axis, axisValue, 0, transition));
22957      }
22958      stopAnimation() {
22959          eachAxis((axis) => this.getAxisMotionValue(axis).stop());
22960      }
22961      /**
22962       * Drag works differently depending on which props are provided.
22963       *
22964       * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
22965       * - Otherwise, we apply the delta to the x/y motion values.
22966       */
22967      getAxisMotionValue(axis) {
22968          const dragKey = "_drag" + axis.toUpperCase();
22969          const props = this.visualElement.getProps();
22970          const externalMotionValue = props[dragKey];
22971          return externalMotionValue
22972              ? externalMotionValue
22973              : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0);
22974      }
22975      snapToCursor(point) {
22976          eachAxis((axis) => {
22977              const { drag } = this.getProps();
22978              // If we're not dragging this axis, do an early return.
22979              if (!shouldDrag(axis, drag, this.currentDirection))
22980                  return;
22981              const { projection } = this.visualElement;
22982              const axisValue = this.getAxisMotionValue(axis);
22983              if (projection && projection.layout) {
22984                  const { min, max } = projection.layout.layoutBox[axis];
22985                  axisValue.set(point[axis] - mix(min, max, 0.5));
22986              }
22987          });
22988      }
22989      /**
22990       * When the viewport resizes we want to check if the measured constraints
22991       * have changed and, if so, reposition the element within those new constraints
22992       * relative to where it was before the resize.
22993       */
22994      scalePositionWithinConstraints() {
22995          if (!this.visualElement.current)
22996              return;
22997          const { drag, dragConstraints } = this.getProps();
22998          const { projection } = this.visualElement;
22999          if (!isRefObject(dragConstraints) || !projection || !this.constraints)
23000              return;
23001          /**
23002           * Stop current animations as there can be visual glitching if we try to do
23003           * this mid-animation
23004           */
23005          this.stopAnimation();
23006          /**
23007           * Record the relative position of the dragged element relative to the
23008           * constraints box and save as a progress value.
23009           */
23010          const boxProgress = { x: 0, y: 0 };
23011          eachAxis((axis) => {
23012              const axisValue = this.getAxisMotionValue(axis);
23013              if (axisValue) {
23014                  const latest = axisValue.get();
23015                  boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
23016              }
23017          });
23018          /**
23019           * Update the layout of this element and resolve the latest drag constraints
23020           */
23021          const { transformTemplate } = this.visualElement.getProps();
23022          this.visualElement.current.style.transform = transformTemplate
23023              ? transformTemplate({}, "")
23024              : "none";
23025          projection.root && projection.root.updateScroll();
23026          projection.updateLayout();
23027          this.resolveConstraints();
23028          /**
23029           * For each axis, calculate the current progress of the layout axis
23030           * within the new constraints.
23031           */
23032          eachAxis((axis) => {
23033              if (!shouldDrag(axis, drag, null))
23034                  return;
23035              /**
23036               * Calculate a new transform based on the previous box progress
23037               */
23038              const axisValue = this.getAxisMotionValue(axis);
23039              const { min, max } = this.constraints[axis];
23040              axisValue.set(mix(min, max, boxProgress[axis]));
23041          });
23042      }
23043      addListeners() {
23044          if (!this.visualElement.current)
23045              return;
23046          elementDragControls.set(this.visualElement, this);
23047          const element = this.visualElement.current;
23048          /**
23049           * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
23050           */
23051          const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
23052              const { drag, dragListener = true } = this.getProps();
23053              drag && dragListener && this.start(event);
23054          });
23055          const measureDragConstraints = () => {
23056              const { dragConstraints } = this.getProps();
23057              if (isRefObject(dragConstraints)) {
23058                  this.constraints = this.resolveRefConstraints();
23059              }
23060          };
23061          const { projection } = this.visualElement;
23062          const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
23063          if (projection && !projection.layout) {
23064              projection.root && projection.root.updateScroll();
23065              projection.updateLayout();
23066          }
23067          measureDragConstraints();
23068          /**
23069           * Attach a window resize listener to scale the draggable target within its defined
23070           * constraints as the window resizes.
23071           */
23072          const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
23073          /**
23074           * If the element's layout changes, calculate the delta and apply that to
23075           * the drag gesture's origin point.
23076           */
23077          const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
23078              if (this.isDragging && hasLayoutChanged) {
23079                  eachAxis((axis) => {
23080                      const motionValue = this.getAxisMotionValue(axis);
23081                      if (!motionValue)
23082                          return;
23083                      this.originPoint[axis] += delta[axis].translate;
23084                      motionValue.set(motionValue.get() + delta[axis].translate);
23085                  });
23086                  this.visualElement.render();
23087              }
23088          }));
23089          return () => {
23090              stopResizeListener();
23091              stopPointerListener();
23092              stopMeasureLayoutListener();
23093              stopLayoutUpdateListener && stopLayoutUpdateListener();
23094          };
23095      }
23096      getProps() {
23097          const props = this.visualElement.getProps();
23098          const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
23099          return {
23100              ...props,
23101              drag,
23102              dragDirectionLock,
23103              dragPropagation,
23104              dragConstraints,
23105              dragElastic,
23106              dragMomentum,
23107          };
23108      }
23109  }
23110  function shouldDrag(direction, drag, currentDirection) {
23111      return ((drag === true || drag === direction) &&
23112          (currentDirection === null || currentDirection === direction));
23113  }
23114  /**
23115   * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
23116   * than the provided threshold, return `null`.
23117   *
23118   * @param offset - The x/y offset from origin.
23119   * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
23120   */
23121  function getCurrentDirection(offset, lockThreshold = 10) {
23122      let direction = null;
23123      if (Math.abs(offset.y) > lockThreshold) {
23124          direction = "y";
23125      }
23126      else if (Math.abs(offset.x) > lockThreshold) {
23127          direction = "x";
23128      }
23129      return direction;
23130  }
23131  
23132  
23133  
23134  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/index.mjs
23135  
23136  
23137  
23138  
23139  class DragGesture extends Feature {
23140      constructor(node) {
23141          super(node);
23142          this.removeGroupControls = noop_noop;
23143          this.removeListeners = noop_noop;
23144          this.controls = new VisualElementDragControls(node);
23145      }
23146      mount() {
23147          // If we've been provided a DragControls for manual control over the drag gesture,
23148          // subscribe this component to it on mount.
23149          const { dragControls } = this.node.getProps();
23150          if (dragControls) {
23151              this.removeGroupControls = dragControls.subscribe(this.controls);
23152          }
23153          this.removeListeners = this.controls.addListeners() || noop_noop;
23154      }
23155      unmount() {
23156          this.removeGroupControls();
23157          this.removeListeners();
23158      }
23159  }
23160  
23161  
23162  
23163  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/index.mjs
23164  
23165  
23166  
23167  
23168  
23169  
23170  const asyncHandler = (handler) => (event, info) => {
23171      if (handler) {
23172          frame_frame.update(() => handler(event, info));
23173      }
23174  };
23175  class PanGesture extends Feature {
23176      constructor() {
23177          super(...arguments);
23178          this.removePointerDownListener = noop_noop;
23179      }
23180      onPointerDown(pointerDownEvent) {
23181          this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
23182      }
23183      createPanHandlers() {
23184          const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
23185          return {
23186              onSessionStart: asyncHandler(onPanSessionStart),
23187              onStart: asyncHandler(onPanStart),
23188              onMove: onPan,
23189              onEnd: (event, info) => {
23190                  delete this.session;
23191                  if (onPanEnd) {
23192                      frame_frame.update(() => onPanEnd(event, info));
23193                  }
23194              },
23195          };
23196      }
23197      mount() {
23198          this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
23199      }
23200      update() {
23201          this.session && this.session.updateHandlers(this.createPanHandlers());
23202      }
23203      unmount() {
23204          this.removePointerDownListener();
23205          this.session && this.session.end();
23206      }
23207  }
23208  
23209  
23210  
23211  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
23212  
23213  
23214  
23215  /**
23216   * When a component is the child of `AnimatePresence`, it can use `usePresence`
23217   * to access information about whether it's still present in the React tree.
23218   *
23219   * ```jsx
23220   * import { usePresence } from "framer-motion"
23221   *
23222   * export const Component = () => {
23223   *   const [isPresent, safeToRemove] = usePresence()
23224   *
23225   *   useEffect(() => {
23226   *     !isPresent && setTimeout(safeToRemove, 1000)
23227   *   }, [isPresent])
23228   *
23229   *   return <div />
23230   * }
23231   * ```
23232   *
23233   * If `isPresent` is `false`, it means that a component has been removed the tree, but
23234   * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
23235   *
23236   * @public
23237   */
23238  function usePresence() {
23239      const context = (0,external_React_.useContext)(PresenceContext_PresenceContext);
23240      if (context === null)
23241          return [true, null];
23242      const { isPresent, onExitComplete, register } = context;
23243      // It's safe to call the following hooks conditionally (after an early return) because the context will always
23244      // either be null or non-null for the lifespan of the component.
23245      const id = (0,external_React_.useId)();
23246      (0,external_React_.useEffect)(() => register(id), []);
23247      const safeToRemove = () => onExitComplete && onExitComplete(id);
23248      return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
23249  }
23250  /**
23251   * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
23252   * There is no `safeToRemove` function.
23253   *
23254   * ```jsx
23255   * import { useIsPresent } from "framer-motion"
23256   *
23257   * export const Component = () => {
23258   *   const isPresent = useIsPresent()
23259   *
23260   *   useEffect(() => {
23261   *     !isPresent && console.log("I've been removed!")
23262   *   }, [isPresent])
23263   *
23264   *   return <div />
23265   * }
23266   * ```
23267   *
23268   * @public
23269   */
23270  function useIsPresent() {
23271      return isPresent(useContext(PresenceContext));
23272  }
23273  function isPresent(context) {
23274      return context === null ? true : context.isPresent;
23275  }
23276  
23277  
23278  
23279  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/state.mjs
23280  /**
23281   * This should only ever be modified on the client otherwise it'll
23282   * persist through server requests. If we need instanced states we
23283   * could lazy-init via root.
23284   */
23285  const globalProjectionState = {
23286      /**
23287       * Global flag as to whether the tree has animated since the last time
23288       * we resized the window
23289       */
23290      hasAnimatedSinceResize: true,
23291      /**
23292       * We set this to true once, on the first update. Any nodes added to the tree beyond that
23293       * update will be given a `data-projection-id` attribute.
23294       */
23295      hasEverUpdated: false,
23296  };
23297  
23298  
23299  
23300  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs
23301  
23302  
23303  function pixelsToPercent(pixels, axis) {
23304      if (axis.max === axis.min)
23305          return 0;
23306      return (pixels / (axis.max - axis.min)) * 100;
23307  }
23308  /**
23309   * We always correct borderRadius as a percentage rather than pixels to reduce paints.
23310   * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
23311   * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
23312   * borderRadius in both states. If we animate between the two in pixels that will trigger
23313   * a paint each time. If we animate between the two in percentage we'll avoid a paint.
23314   */
23315  const correctBorderRadius = {
23316      correct: (latest, node) => {
23317          if (!node.target)
23318              return latest;
23319          /**
23320           * If latest is a string, if it's a percentage we can return immediately as it's
23321           * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
23322           */
23323          if (typeof latest === "string") {
23324              if (px.test(latest)) {
23325                  latest = parseFloat(latest);
23326              }
23327              else {
23328                  return latest;
23329              }
23330          }
23331          /**
23332           * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
23333           * pixel value as a percentage of each axis
23334           */
23335          const x = pixelsToPercent(latest, node.target.x);
23336          const y = pixelsToPercent(latest, node.target.y);
23337          return `$x}% $y}%`;
23338      },
23339  };
23340  
23341  
23342  
23343  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs
23344  
23345  
23346  
23347  const correctBoxShadow = {
23348      correct: (latest, { treeScale, projectionDelta }) => {
23349          const original = latest;
23350          const shadow = complex.parse(latest);
23351          // TODO: Doesn't support multiple shadows
23352          if (shadow.length > 5)
23353              return original;
23354          const template = complex.createTransformer(latest);
23355          const offset = typeof shadow[0] !== "number" ? 1 : 0;
23356          // Calculate the overall context scale
23357          const xScale = projectionDelta.x.scale * treeScale.x;
23358          const yScale = projectionDelta.y.scale * treeScale.y;
23359          shadow[0 + offset] /= xScale;
23360          shadow[1 + offset] /= yScale;
23361          /**
23362           * Ideally we'd correct x and y scales individually, but because blur and
23363           * spread apply to both we have to take a scale average and apply that instead.
23364           * We could potentially improve the outcome of this by incorporating the ratio between
23365           * the two scales.
23366           */
23367          const averageScale = mix(xScale, yScale, 0.5);
23368          // Blur
23369          if (typeof shadow[2 + offset] === "number")
23370              shadow[2 + offset] /= averageScale;
23371          // Spread
23372          if (typeof shadow[3 + offset] === "number")
23373              shadow[3 + offset] /= averageScale;
23374          return template(shadow);
23375      },
23376  };
23377  
23378  
23379  
23380  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
23381  
23382  
23383  
23384  
23385  
23386  
23387  
23388  
23389  
23390  
23391  class MeasureLayoutWithContext extends external_React_.Component {
23392      /**
23393       * This only mounts projection nodes for components that
23394       * need measuring, we might want to do it for all components
23395       * in order to incorporate transforms
23396       */
23397      componentDidMount() {
23398          const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
23399          const { projection } = visualElement;
23400          addScaleCorrector(defaultScaleCorrectors);
23401          if (projection) {
23402              if (layoutGroup.group)
23403                  layoutGroup.group.add(projection);
23404              if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
23405                  switchLayoutGroup.register(projection);
23406              }
23407              projection.root.didUpdate();
23408              projection.addEventListener("animationComplete", () => {
23409                  this.safeToRemove();
23410              });
23411              projection.setOptions({
23412                  ...projection.options,
23413                  onExitComplete: () => this.safeToRemove(),
23414              });
23415          }
23416          globalProjectionState.hasEverUpdated = true;
23417      }
23418      getSnapshotBeforeUpdate(prevProps) {
23419          const { layoutDependency, visualElement, drag, isPresent } = this.props;
23420          const projection = visualElement.projection;
23421          if (!projection)
23422              return null;
23423          /**
23424           * TODO: We use this data in relegate to determine whether to
23425           * promote a previous element. There's no guarantee its presence data
23426           * will have updated by this point - if a bug like this arises it will
23427           * have to be that we markForRelegation and then find a new lead some other way,
23428           * perhaps in didUpdate
23429           */
23430          projection.isPresent = isPresent;
23431          if (drag ||
23432              prevProps.layoutDependency !== layoutDependency ||
23433              layoutDependency === undefined) {
23434              projection.willUpdate();
23435          }
23436          else {
23437              this.safeToRemove();
23438          }
23439          if (prevProps.isPresent !== isPresent) {
23440              if (isPresent) {
23441                  projection.promote();
23442              }
23443              else if (!projection.relegate()) {
23444                  /**
23445                   * If there's another stack member taking over from this one,
23446                   * it's in charge of the exit animation and therefore should
23447                   * be in charge of the safe to remove. Otherwise we call it here.
23448                   */
23449                  frame_frame.postRender(() => {
23450                      const stack = projection.getStack();
23451                      if (!stack || !stack.members.length) {
23452                          this.safeToRemove();
23453                      }
23454                  });
23455              }
23456          }
23457          return null;
23458      }
23459      componentDidUpdate() {
23460          const { projection } = this.props.visualElement;
23461          if (projection) {
23462              projection.root.didUpdate();
23463              queueMicrotask(() => {
23464                  if (!projection.currentAnimation && projection.isLead()) {
23465                      this.safeToRemove();
23466                  }
23467              });
23468          }
23469      }
23470      componentWillUnmount() {
23471          const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;
23472          const { projection } = visualElement;
23473          if (projection) {
23474              projection.scheduleCheckAfterUnmount();
23475              if (layoutGroup && layoutGroup.group)
23476                  layoutGroup.group.remove(projection);
23477              if (promoteContext && promoteContext.deregister)
23478                  promoteContext.deregister(projection);
23479          }
23480      }
23481      safeToRemove() {
23482          const { safeToRemove } = this.props;
23483          safeToRemove && safeToRemove();
23484      }
23485      render() {
23486          return null;
23487      }
23488  }
23489  function MeasureLayout(props) {
23490      const [isPresent, safeToRemove] = usePresence();
23491      const layoutGroup = (0,external_React_.useContext)(LayoutGroupContext);
23492      return (external_React_.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));
23493  }
23494  const defaultScaleCorrectors = {
23495      borderRadius: {
23496          ...correctBorderRadius,
23497          applyTo: [
23498              "borderTopLeftRadius",
23499              "borderTopRightRadius",
23500              "borderBottomLeftRadius",
23501              "borderBottomRightRadius",
23502          ],
23503      },
23504      borderTopLeftRadius: correctBorderRadius,
23505      borderTopRightRadius: correctBorderRadius,
23506      borderBottomLeftRadius: correctBorderRadius,
23507      borderBottomRightRadius: correctBorderRadius,
23508      boxShadow: correctBoxShadow,
23509  };
23510  
23511  
23512  
23513  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs
23514  
23515  
23516  
23517  
23518  
23519  
23520  const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
23521  const numBorders = borders.length;
23522  const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
23523  const isPx = (value) => typeof value === "number" || px.test(value);
23524  function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
23525      if (shouldCrossfadeOpacity) {
23526          target.opacity = mix(0, 
23527          // TODO Reinstate this if only child
23528          lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
23529          target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
23530      }
23531      else if (isOnlyMember) {
23532          target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
23533      }
23534      /**
23535       * Mix border radius
23536       */
23537      for (let i = 0; i < numBorders; i++) {
23538          const borderLabel = `border$borders[i]}Radius`;
23539          let followRadius = getRadius(follow, borderLabel);
23540          let leadRadius = getRadius(lead, borderLabel);
23541          if (followRadius === undefined && leadRadius === undefined)
23542              continue;
23543          followRadius || (followRadius = 0);
23544          leadRadius || (leadRadius = 0);
23545          const canMix = followRadius === 0 ||
23546              leadRadius === 0 ||
23547              isPx(followRadius) === isPx(leadRadius);
23548          if (canMix) {
23549              target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
23550              if (percent.test(leadRadius) || percent.test(followRadius)) {
23551                  target[borderLabel] += "%";
23552              }
23553          }
23554          else {
23555              target[borderLabel] = leadRadius;
23556          }
23557      }
23558      /**
23559       * Mix rotation
23560       */
23561      if (follow.rotate || lead.rotate) {
23562          target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
23563      }
23564  }
23565  function getRadius(values, radiusName) {
23566      return values[radiusName] !== undefined
23567          ? values[radiusName]
23568          : values.borderRadius;
23569  }
23570  // /**
23571  //  * We only want to mix the background color if there's a follow element
23572  //  * that we're not crossfading opacity between. For instance with switch
23573  //  * AnimateSharedLayout animations, this helps the illusion of a continuous
23574  //  * element being animated but also cuts down on the number of paints triggered
23575  //  * for elements where opacity is doing that work for us.
23576  //  */
23577  // if (
23578  //     !hasFollowElement &&
23579  //     latestLeadValues.backgroundColor &&
23580  //     latestFollowValues.backgroundColor
23581  // ) {
23582  //     /**
23583  //      * This isn't ideal performance-wise as mixColor is creating a new function every frame.
23584  //      * We could probably create a mixer that runs at the start of the animation but
23585  //      * the idea behind the crossfader is that it runs dynamically between two potentially
23586  //      * changing targets (ie opacity or borderRadius may be animating independently via variants)
23587  //      */
23588  //     leadState.backgroundColor = followState.backgroundColor = mixColor(
23589  //         latestFollowValues.backgroundColor as string,
23590  //         latestLeadValues.backgroundColor as string
23591  //     )(p)
23592  // }
23593  const easeCrossfadeIn = compress(0, 0.5, circOut);
23594  const easeCrossfadeOut = compress(0.5, 0.95, noop_noop);
23595  function compress(min, max, easing) {
23596      return (p) => {
23597          // Could replace ifs with clamp
23598          if (p < min)
23599              return 0;
23600          if (p > max)
23601              return 1;
23602          return easing(progress(min, max, p));
23603      };
23604  }
23605  
23606  
23607  
23608  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/copy.mjs
23609  /**
23610   * Reset an axis to the provided origin box.
23611   *
23612   * This is a mutative operation.
23613   */
23614  function copyAxisInto(axis, originAxis) {
23615      axis.min = originAxis.min;
23616      axis.max = originAxis.max;
23617  }
23618  /**
23619   * Reset a box to the provided origin box.
23620   *
23621   * This is a mutative operation.
23622   */
23623  function copyBoxInto(box, originBox) {
23624      copyAxisInto(box.x, originBox.x);
23625      copyAxisInto(box.y, originBox.y);
23626  }
23627  
23628  
23629  
23630  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs
23631  
23632  
23633  
23634  
23635  /**
23636   * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
23637   */
23638  function removePointDelta(point, translate, scale, originPoint, boxScale) {
23639      point -= translate;
23640      point = scalePoint(point, 1 / scale, originPoint);
23641      if (boxScale !== undefined) {
23642          point = scalePoint(point, 1 / boxScale, originPoint);
23643      }
23644      return point;
23645  }
23646  /**
23647   * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
23648   */
23649  function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
23650      if (percent.test(translate)) {
23651          translate = parseFloat(translate);
23652          const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
23653          translate = relativeProgress - sourceAxis.min;
23654      }
23655      if (typeof translate !== "number")
23656          return;
23657      let originPoint = mix(originAxis.min, originAxis.max, origin);
23658      if (axis === originAxis)
23659          originPoint -= translate;
23660      axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
23661      axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);
23662  }
23663  /**
23664   * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
23665   * and acts as a bridge between motion values and removeAxisDelta
23666   */
23667  function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
23668      removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
23669  }
23670  /**
23671   * The names of the motion values we want to apply as translation, scale and origin.
23672   */
23673  const delta_remove_xKeys = ["x", "scaleX", "originX"];
23674  const delta_remove_yKeys = ["y", "scaleY", "originY"];
23675  /**
23676   * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
23677   * and acts as a bridge between motion values and removeAxisDelta
23678   */
23679  function removeBoxTransforms(box, transforms, originBox, sourceBox) {
23680      removeAxisTransforms(box.x, transforms, delta_remove_xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
23681      removeAxisTransforms(box.y, transforms, delta_remove_yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
23682  }
23683  
23684  
23685  
23686  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/utils.mjs
23687  
23688  
23689  function isAxisDeltaZero(delta) {
23690      return delta.translate === 0 && delta.scale === 1;
23691  }
23692  function isDeltaZero(delta) {
23693      return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
23694  }
23695  function boxEquals(a, b) {
23696      return (a.x.min === b.x.min &&
23697          a.x.max === b.x.max &&
23698          a.y.min === b.y.min &&
23699          a.y.max === b.y.max);
23700  }
23701  function boxEqualsRounded(a, b) {
23702      return (Math.round(a.x.min) === Math.round(b.x.min) &&
23703          Math.round(a.x.max) === Math.round(b.x.max) &&
23704          Math.round(a.y.min) === Math.round(b.y.min) &&
23705          Math.round(a.y.max) === Math.round(b.y.max));
23706  }
23707  function aspectRatio(box) {
23708      return calcLength(box.x) / calcLength(box.y);
23709  }
23710  
23711  
23712  
23713  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/shared/stack.mjs
23714  
23715  
23716  class NodeStack {
23717      constructor() {
23718          this.members = [];
23719      }
23720      add(node) {
23721          addUniqueItem(this.members, node);
23722          node.scheduleRender();
23723      }
23724      remove(node) {
23725          removeItem(this.members, node);
23726          if (node === this.prevLead) {
23727              this.prevLead = undefined;
23728          }
23729          if (node === this.lead) {
23730              const prevLead = this.members[this.members.length - 1];
23731              if (prevLead) {
23732                  this.promote(prevLead);
23733              }
23734          }
23735      }
23736      relegate(node) {
23737          const indexOfNode = this.members.findIndex((member) => node === member);
23738          if (indexOfNode === 0)
23739              return false;
23740          /**
23741           * Find the next projection node that is present
23742           */
23743          let prevLead;
23744          for (let i = indexOfNode; i >= 0; i--) {
23745              const member = this.members[i];
23746              if (member.isPresent !== false) {
23747                  prevLead = member;
23748                  break;
23749              }
23750          }
23751          if (prevLead) {
23752              this.promote(prevLead);
23753              return true;
23754          }
23755          else {
23756              return false;
23757          }
23758      }
23759      promote(node, preserveFollowOpacity) {
23760          const prevLead = this.lead;
23761          if (node === prevLead)
23762              return;
23763          this.prevLead = prevLead;
23764          this.lead = node;
23765          node.show();
23766          if (prevLead) {
23767              prevLead.instance && prevLead.scheduleRender();
23768              node.scheduleRender();
23769              node.resumeFrom = prevLead;
23770              if (preserveFollowOpacity) {
23771                  node.resumeFrom.preserveOpacity = true;
23772              }
23773              if (prevLead.snapshot) {
23774                  node.snapshot = prevLead.snapshot;
23775                  node.snapshot.latestValues =
23776                      prevLead.animationValues || prevLead.latestValues;
23777              }
23778              if (node.root && node.root.isUpdating) {
23779                  node.isLayoutDirty = true;
23780              }
23781              const { crossfade } = node.options;
23782              if (crossfade === false) {
23783                  prevLead.hide();
23784              }
23785              /**
23786               * TODO:
23787               *   - Test border radius when previous node was deleted
23788               *   - boxShadow mixing
23789               *   - Shared between element A in scrolled container and element B (scroll stays the same or changes)
23790               *   - Shared between element A in transformed container and element B (transform stays the same or changes)
23791               *   - Shared between element A in scrolled page and element B (scroll stays the same or changes)
23792               * ---
23793               *   - Crossfade opacity of root nodes
23794               *   - layoutId changes after animation
23795               *   - layoutId changes mid animation
23796               */
23797          }
23798      }
23799      exitAnimationComplete() {
23800          this.members.forEach((node) => {
23801              const { options, resumingFrom } = node;
23802              options.onExitComplete && options.onExitComplete();
23803              if (resumingFrom) {
23804                  resumingFrom.options.onExitComplete &&
23805                      resumingFrom.options.onExitComplete();
23806              }
23807          });
23808      }
23809      scheduleRender() {
23810          this.members.forEach((node) => {
23811              node.instance && node.scheduleRender(false);
23812          });
23813      }
23814      /**
23815       * Clear any leads that have been removed this render to prevent them from being
23816       * used in future animations and to prevent memory leaks
23817       */
23818      removeLeadSnapshot() {
23819          if (this.lead && this.lead.snapshot) {
23820              this.lead.snapshot = undefined;
23821          }
23822      }
23823  }
23824  
23825  
23826  
23827  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/transform.mjs
23828  function buildProjectionTransform(delta, treeScale, latestTransform) {
23829      let transform = "";
23830      /**
23831       * The translations we use to calculate are always relative to the viewport coordinate space.
23832       * But when we apply scales, we also scale the coordinate space of an element and its children.
23833       * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
23834       * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
23835       */
23836      const xTranslate = delta.x.translate / treeScale.x;
23837      const yTranslate = delta.y.translate / treeScale.y;
23838      if (xTranslate || yTranslate) {
23839          transform = `translate3d($xTranslate}px, $yTranslate}px, 0) `;
23840      }
23841      /**
23842       * Apply scale correction for the tree transform.
23843       * This will apply scale to the screen-orientated axes.
23844       */
23845      if (treeScale.x !== 1 || treeScale.y !== 1) {
23846          transform += `scale($1 / treeScale.x}, $1 / treeScale.y}) `;
23847      }
23848      if (latestTransform) {
23849          const { rotate, rotateX, rotateY } = latestTransform;
23850          if (rotate)
23851              transform += `rotate($rotate}deg) `;
23852          if (rotateX)
23853              transform += `rotateX($rotateX}deg) `;
23854          if (rotateY)
23855              transform += `rotateY($rotateY}deg) `;
23856      }
23857      /**
23858       * Apply scale to match the size of the element to the size we want it.
23859       * This will apply scale to the element-orientated axes.
23860       */
23861      const elementScaleX = delta.x.scale * treeScale.x;
23862      const elementScaleY = delta.y.scale * treeScale.y;
23863      if (elementScaleX !== 1 || elementScaleY !== 1) {
23864          transform += `scale($elementScaleX}, $elementScaleY})`;
23865      }
23866      return transform || "none";
23867  }
23868  
23869  
23870  
23871  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs
23872  const compareByDepth = (a, b) => a.depth - b.depth;
23873  
23874  
23875  
23876  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs
23877  
23878  
23879  
23880  class FlatTree {
23881      constructor() {
23882          this.children = [];
23883          this.isDirty = false;
23884      }
23885      add(child) {
23886          addUniqueItem(this.children, child);
23887          this.isDirty = true;
23888      }
23889      remove(child) {
23890          removeItem(this.children, child);
23891          this.isDirty = true;
23892      }
23893      forEach(callback) {
23894          this.isDirty && this.children.sort(compareByDepth);
23895          this.isDirty = false;
23896          this.children.forEach(callback);
23897      }
23898  }
23899  
23900  
23901  
23902  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/delay.mjs
23903  
23904  
23905  /**
23906   * Timeout defined in ms
23907   */
23908  function delay(callback, timeout) {
23909      const start = performance.now();
23910      const checkElapsed = ({ timestamp }) => {
23911          const elapsed = timestamp - start;
23912          if (elapsed >= timeout) {
23913              cancelFrame(checkElapsed);
23914              callback(elapsed - timeout);
23915          }
23916      };
23917      frame_frame.read(checkElapsed, true);
23918      return () => cancelFrame(checkElapsed);
23919  }
23920  
23921  
23922  
23923  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/debug/record.mjs
23924  function record(data) {
23925      if (window.MotionDebug) {
23926          window.MotionDebug.record(data);
23927      }
23928  }
23929  
23930  
23931  
23932  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs
23933  function isSVGElement(element) {
23934      return element instanceof SVGElement && element.tagName !== "svg";
23935  }
23936  
23937  
23938  
23939  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs
23940  
23941  
23942  
23943  
23944  function animateSingleValue(value, keyframes, options) {
23945      const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
23946      motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
23947      return motionValue$1.animation;
23948  }
23949  
23950  
23951  
23952  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs
23953  
23954  
23955  
23956  
23957  
23958  
23959  
23960  
23961  
23962  
23963  
23964  
23965  
23966  
23967  
23968  
23969  
23970  
23971  
23972  
23973  
23974  
23975  
23976  
23977  
23978  
23979  const transformAxes = ["", "X", "Y", "Z"];
23980  /**
23981   * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
23982   * which has a noticeable difference in spring animations
23983   */
23984  const animationTarget = 1000;
23985  let create_projection_node_id = 0;
23986  /**
23987   * Use a mutable data object for debug data so as to not create a new
23988   * object every frame.
23989   */
23990  const projectionFrameData = {
23991      type: "projectionFrame",
23992      totalNodes: 0,
23993      resolvedTargetDeltas: 0,
23994      recalculatedProjection: 0,
23995  };
23996  function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
23997      return class ProjectionNode {
23998          constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
23999              /**
24000               * A unique ID generated for every projection node.
24001               */
24002              this.id = create_projection_node_id++;
24003              /**
24004               * An id that represents a unique session instigated by startUpdate.
24005               */
24006              this.animationId = 0;
24007              /**
24008               * A Set containing all this component's children. This is used to iterate
24009               * through the children.
24010               *
24011               * TODO: This could be faster to iterate as a flat array stored on the root node.
24012               */
24013              this.children = new Set();
24014              /**
24015               * Options for the node. We use this to configure what kind of layout animations
24016               * we should perform (if any).
24017               */
24018              this.options = {};
24019              /**
24020               * We use this to detect when its safe to shut down part of a projection tree.
24021               * We have to keep projecting children for scale correction and relative projection
24022               * until all their parents stop performing layout animations.
24023               */
24024              this.isTreeAnimating = false;
24025              this.isAnimationBlocked = false;
24026              /**
24027               * Flag to true if we think this layout has been changed. We can't always know this,
24028               * currently we set it to true every time a component renders, or if it has a layoutDependency
24029               * if that has changed between renders. Additionally, components can be grouped by LayoutGroup
24030               * and if one node is dirtied, they all are.
24031               */
24032              this.isLayoutDirty = false;
24033              /**
24034               * Flag to true if we think the projection calculations for this node needs
24035               * recalculating as a result of an updated transform or layout animation.
24036               */
24037              this.isProjectionDirty = false;
24038              /**
24039               * Flag to true if the layout *or* transform has changed. This then gets propagated
24040               * throughout the projection tree, forcing any element below to recalculate on the next frame.
24041               */
24042              this.isSharedProjectionDirty = false;
24043              /**
24044               * Flag transform dirty. This gets propagated throughout the whole tree but is only
24045               * respected by shared nodes.
24046               */
24047              this.isTransformDirty = false;
24048              /**
24049               * Block layout updates for instant layout transitions throughout the tree.
24050               */
24051              this.updateManuallyBlocked = false;
24052              this.updateBlockedByResize = false;
24053              /**
24054               * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`
24055               * call.
24056               */
24057              this.isUpdating = false;
24058              /**
24059               * If this is an SVG element we currently disable projection transforms
24060               */
24061              this.isSVG = false;
24062              /**
24063               * Flag to true (during promotion) if a node doing an instant layout transition needs to reset
24064               * its projection styles.
24065               */
24066              this.needsReset = false;
24067              /**
24068               * Flags whether this node should have its transform reset prior to measuring.
24069               */
24070              this.shouldResetTransform = false;
24071              /**
24072               * An object representing the calculated contextual/accumulated/tree scale.
24073               * This will be used to scale calculcated projection transforms, as these are
24074               * calculated in screen-space but need to be scaled for elements to layoutly
24075               * make it to their calculated destinations.
24076               *
24077               * TODO: Lazy-init
24078               */
24079              this.treeScale = { x: 1, y: 1 };
24080              /**
24081               *
24082               */
24083              this.eventHandlers = new Map();
24084              this.hasTreeAnimated = false;
24085              // Note: Currently only running on root node
24086              this.updateScheduled = false;
24087              this.checkUpdateFailed = () => {
24088                  if (this.isUpdating) {
24089                      this.isUpdating = false;
24090                      this.clearAllSnapshots();
24091                  }
24092              };
24093              /**
24094               * This is a multi-step process as shared nodes might be of different depths. Nodes
24095               * are sorted by depth order, so we need to resolve the entire tree before moving to
24096               * the next step.
24097               */
24098              this.updateProjection = () => {
24099                  /**
24100                   * Reset debug counts. Manually resetting rather than creating a new
24101                   * object each frame.
24102                   */
24103                  projectionFrameData.totalNodes =
24104                      projectionFrameData.resolvedTargetDeltas =
24105                          projectionFrameData.recalculatedProjection =
24106                              0;
24107                  this.nodes.forEach(propagateDirtyNodes);
24108                  this.nodes.forEach(resolveTargetDelta);
24109                  this.nodes.forEach(calcProjection);
24110                  this.nodes.forEach(cleanDirtyNodes);
24111                  record(projectionFrameData);
24112              };
24113              this.hasProjected = false;
24114              this.isVisible = true;
24115              this.animationProgress = 0;
24116              /**
24117               * Shared layout
24118               */
24119              // TODO Only running on root node
24120              this.sharedNodes = new Map();
24121              this.latestValues = latestValues;
24122              this.root = parent ? parent.root || parent : this;
24123              this.path = parent ? [...parent.path, parent] : [];
24124              this.parent = parent;
24125              this.depth = parent ? parent.depth + 1 : 0;
24126              for (let i = 0; i < this.path.length; i++) {
24127                  this.path[i].shouldResetTransform = true;
24128              }
24129              if (this.root === this)
24130                  this.nodes = new FlatTree();
24131          }
24132          addEventListener(name, handler) {
24133              if (!this.eventHandlers.has(name)) {
24134                  this.eventHandlers.set(name, new SubscriptionManager());
24135              }
24136              return this.eventHandlers.get(name).add(handler);
24137          }
24138          notifyListeners(name, ...args) {
24139              const subscriptionManager = this.eventHandlers.get(name);
24140              subscriptionManager && subscriptionManager.notify(...args);
24141          }
24142          hasListeners(name) {
24143              return this.eventHandlers.has(name);
24144          }
24145          /**
24146           * Lifecycles
24147           */
24148          mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
24149              if (this.instance)
24150                  return;
24151              this.isSVG = isSVGElement(instance);
24152              this.instance = instance;
24153              const { layoutId, layout, visualElement } = this.options;
24154              if (visualElement && !visualElement.current) {
24155                  visualElement.mount(instance);
24156              }
24157              this.root.nodes.add(this);
24158              this.parent && this.parent.children.add(this);
24159              if (isLayoutDirty && (layout || layoutId)) {
24160                  this.isLayoutDirty = true;
24161              }
24162              if (attachResizeListener) {
24163                  let cancelDelay;
24164                  const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
24165                  attachResizeListener(instance, () => {
24166                      this.root.updateBlockedByResize = true;
24167                      cancelDelay && cancelDelay();
24168                      cancelDelay = delay(resizeUnblockUpdate, 250);
24169                      if (globalProjectionState.hasAnimatedSinceResize) {
24170                          globalProjectionState.hasAnimatedSinceResize = false;
24171                          this.nodes.forEach(finishAnimation);
24172                      }
24173                  });
24174              }
24175              if (layoutId) {
24176                  this.root.registerSharedNode(layoutId, this);
24177              }
24178              // Only register the handler if it requires layout animation
24179              if (this.options.animate !== false &&
24180                  visualElement &&
24181                  (layoutId || layout)) {
24182                  this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
24183                      if (this.isTreeAnimationBlocked()) {
24184                          this.target = undefined;
24185                          this.relativeTarget = undefined;
24186                          return;
24187                      }
24188                      // TODO: Check here if an animation exists
24189                      const layoutTransition = this.options.transition ||
24190                          visualElement.getDefaultTransition() ||
24191                          defaultLayoutTransition;
24192                      const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
24193                      /**
24194                       * The target layout of the element might stay the same,
24195                       * but its position relative to its parent has changed.
24196                       */
24197                      const targetChanged = !this.targetLayout ||
24198                          !boxEqualsRounded(this.targetLayout, newLayout) ||
24199                          hasRelativeTargetChanged;
24200                      /**
24201                       * If the layout hasn't seemed to have changed, it might be that the
24202                       * element is visually in the same place in the document but its position
24203                       * relative to its parent has indeed changed. So here we check for that.
24204                       */
24205                      const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
24206                      if (this.options.layoutRoot ||
24207                          (this.resumeFrom && this.resumeFrom.instance) ||
24208                          hasOnlyRelativeTargetChanged ||
24209                          (hasLayoutChanged &&
24210                              (targetChanged || !this.currentAnimation))) {
24211                          if (this.resumeFrom) {
24212                              this.resumingFrom = this.resumeFrom;
24213                              this.resumingFrom.resumingFrom = undefined;
24214                          }
24215                          this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
24216                          const animationOptions = {
24217                              ...getValueTransition(layoutTransition, "layout"),
24218                              onPlay: onLayoutAnimationStart,
24219                              onComplete: onLayoutAnimationComplete,
24220                          };
24221                          if (visualElement.shouldReduceMotion ||
24222                              this.options.layoutRoot) {
24223                              animationOptions.delay = 0;
24224                              animationOptions.type = false;
24225                          }
24226                          this.startAnimation(animationOptions);
24227                      }
24228                      else {
24229                          /**
24230                           * If the layout hasn't changed and we have an animation that hasn't started yet,
24231                           * finish it immediately. Otherwise it will be animating from a location
24232                           * that was probably never commited to screen and look like a jumpy box.
24233                           */
24234                          if (!hasLayoutChanged) {
24235                              finishAnimation(this);
24236                          }
24237                          if (this.isLead() && this.options.onExitComplete) {
24238                              this.options.onExitComplete();
24239                          }
24240                      }
24241                      this.targetLayout = newLayout;
24242                  });
24243              }
24244          }
24245          unmount() {
24246              this.options.layoutId && this.willUpdate();
24247              this.root.nodes.remove(this);
24248              const stack = this.getStack();
24249              stack && stack.remove(this);
24250              this.parent && this.parent.children.delete(this);
24251              this.instance = undefined;
24252              cancelFrame(this.updateProjection);
24253          }
24254          // only on the root
24255          blockUpdate() {
24256              this.updateManuallyBlocked = true;
24257          }
24258          unblockUpdate() {
24259              this.updateManuallyBlocked = false;
24260          }
24261          isUpdateBlocked() {
24262              return this.updateManuallyBlocked || this.updateBlockedByResize;
24263          }
24264          isTreeAnimationBlocked() {
24265              return (this.isAnimationBlocked ||
24266                  (this.parent && this.parent.isTreeAnimationBlocked()) ||
24267                  false);
24268          }
24269          // Note: currently only running on root node
24270          startUpdate() {
24271              if (this.isUpdateBlocked())
24272                  return;
24273              this.isUpdating = true;
24274              this.nodes && this.nodes.forEach(resetRotation);
24275              this.animationId++;
24276          }
24277          getTransformTemplate() {
24278              const { visualElement } = this.options;
24279              return visualElement && visualElement.getProps().transformTemplate;
24280          }
24281          willUpdate(shouldNotifyListeners = true) {
24282              this.root.hasTreeAnimated = true;
24283              if (this.root.isUpdateBlocked()) {
24284                  this.options.onExitComplete && this.options.onExitComplete();
24285                  return;
24286              }
24287              !this.root.isUpdating && this.root.startUpdate();
24288              if (this.isLayoutDirty)
24289                  return;
24290              this.isLayoutDirty = true;
24291              for (let i = 0; i < this.path.length; i++) {
24292                  const node = this.path[i];
24293                  node.shouldResetTransform = true;
24294                  node.updateScroll("snapshot");
24295                  if (node.options.layoutRoot) {
24296                      node.willUpdate(false);
24297                  }
24298              }
24299              const { layoutId, layout } = this.options;
24300              if (layoutId === undefined && !layout)
24301                  return;
24302              const transformTemplate = this.getTransformTemplate();
24303              this.prevTransformTemplateValue = transformTemplate
24304                  ? transformTemplate(this.latestValues, "")
24305                  : undefined;
24306              this.updateSnapshot();
24307              shouldNotifyListeners && this.notifyListeners("willUpdate");
24308          }
24309          update() {
24310              this.updateScheduled = false;
24311              const updateWasBlocked = this.isUpdateBlocked();
24312              // When doing an instant transition, we skip the layout update,
24313              // but should still clean up the measurements so that the next
24314              // snapshot could be taken correctly.
24315              if (updateWasBlocked) {
24316                  this.unblockUpdate();
24317                  this.clearAllSnapshots();
24318                  this.nodes.forEach(clearMeasurements);
24319                  return;
24320              }
24321              if (!this.isUpdating) {
24322                  this.nodes.forEach(clearIsLayoutDirty);
24323              }
24324              this.isUpdating = false;
24325              /**
24326               * Write
24327               */
24328              this.nodes.forEach(resetTransformStyle);
24329              /**
24330               * Read ==================
24331               */
24332              // Update layout measurements of updated children
24333              this.nodes.forEach(updateLayout);
24334              /**
24335               * Write
24336               */
24337              // Notify listeners that the layout is updated
24338              this.nodes.forEach(notifyLayoutUpdate);
24339              this.clearAllSnapshots();
24340              /**
24341               * Manually flush any pending updates. Ideally
24342               * we could leave this to the following requestAnimationFrame but this seems
24343               * to leave a flash of incorrectly styled content.
24344               */
24345              const now = performance.now();
24346              frameData.delta = clamp_clamp(0, 1000 / 60, now - frameData.timestamp);
24347              frameData.timestamp = now;
24348              frameData.isProcessing = true;
24349              steps.update.process(frameData);
24350              steps.preRender.process(frameData);
24351              steps.render.process(frameData);
24352              frameData.isProcessing = false;
24353          }
24354          didUpdate() {
24355              if (!this.updateScheduled) {
24356                  this.updateScheduled = true;
24357                  queueMicrotask(() => this.update());
24358              }
24359          }
24360          clearAllSnapshots() {
24361              this.nodes.forEach(clearSnapshot);
24362              this.sharedNodes.forEach(removeLeadSnapshots);
24363          }
24364          scheduleUpdateProjection() {
24365              frame_frame.preRender(this.updateProjection, false, true);
24366          }
24367          scheduleCheckAfterUnmount() {
24368              /**
24369               * If the unmounting node is in a layoutGroup and did trigger a willUpdate,
24370               * we manually call didUpdate to give a chance to the siblings to animate.
24371               * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
24372               */
24373              frame_frame.postRender(() => {
24374                  if (this.isLayoutDirty) {
24375                      this.root.didUpdate();
24376                  }
24377                  else {
24378                      this.root.checkUpdateFailed();
24379                  }
24380              });
24381          }
24382          /**
24383           * Update measurements
24384           */
24385          updateSnapshot() {
24386              if (this.snapshot || !this.instance)
24387                  return;
24388              this.snapshot = this.measure();
24389          }
24390          updateLayout() {
24391              if (!this.instance)
24392                  return;
24393              // TODO: Incorporate into a forwarded scroll offset
24394              this.updateScroll();
24395              if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
24396                  !this.isLayoutDirty) {
24397                  return;
24398              }
24399              /**
24400               * When a node is mounted, it simply resumes from the prevLead's
24401               * snapshot instead of taking a new one, but the ancestors scroll
24402               * might have updated while the prevLead is unmounted. We need to
24403               * update the scroll again to make sure the layout we measure is
24404               * up to date.
24405               */
24406              if (this.resumeFrom && !this.resumeFrom.instance) {
24407                  for (let i = 0; i < this.path.length; i++) {
24408                      const node = this.path[i];
24409                      node.updateScroll();
24410                  }
24411              }
24412              const prevLayout = this.layout;
24413              this.layout = this.measure(false);
24414              this.layoutCorrected = createBox();
24415              this.isLayoutDirty = false;
24416              this.projectionDelta = undefined;
24417              this.notifyListeners("measure", this.layout.layoutBox);
24418              const { visualElement } = this.options;
24419              visualElement &&
24420                  visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
24421          }
24422          updateScroll(phase = "measure") {
24423              let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
24424              if (this.scroll &&
24425                  this.scroll.animationId === this.root.animationId &&
24426                  this.scroll.phase === phase) {
24427                  needsMeasurement = false;
24428              }
24429              if (needsMeasurement) {
24430                  this.scroll = {
24431                      animationId: this.root.animationId,
24432                      phase,
24433                      isRoot: checkIsScrollRoot(this.instance),
24434                      offset: measureScroll(this.instance),
24435                  };
24436              }
24437          }
24438          resetTransform() {
24439              if (!resetTransform)
24440                  return;
24441              const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
24442              const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
24443              const transformTemplate = this.getTransformTemplate();
24444              const transformTemplateValue = transformTemplate
24445                  ? transformTemplate(this.latestValues, "")
24446                  : undefined;
24447              const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
24448              if (isResetRequested &&
24449                  (hasProjection ||
24450                      hasTransform(this.latestValues) ||
24451                      transformTemplateHasChanged)) {
24452                  resetTransform(this.instance, transformTemplateValue);
24453                  this.shouldResetTransform = false;
24454                  this.scheduleRender();
24455              }
24456          }
24457          measure(removeTransform = true) {
24458              const pageBox = this.measurePageBox();
24459              let layoutBox = this.removeElementScroll(pageBox);
24460              /**
24461               * Measurements taken during the pre-render stage
24462               * still have transforms applied so we remove them
24463               * via calculation.
24464               */
24465              if (removeTransform) {
24466                  layoutBox = this.removeTransform(layoutBox);
24467              }
24468              roundBox(layoutBox);
24469              return {
24470                  animationId: this.root.animationId,
24471                  measuredBox: pageBox,
24472                  layoutBox,
24473                  latestValues: {},
24474                  source: this.id,
24475              };
24476          }
24477          measurePageBox() {
24478              const { visualElement } = this.options;
24479              if (!visualElement)
24480                  return createBox();
24481              const box = visualElement.measureViewportBox();
24482              // Remove viewport scroll to give page-relative coordinates
24483              const { scroll } = this.root;
24484              if (scroll) {
24485                  translateAxis(box.x, scroll.offset.x);
24486                  translateAxis(box.y, scroll.offset.y);
24487              }
24488              return box;
24489          }
24490          removeElementScroll(box) {
24491              const boxWithoutScroll = createBox();
24492              copyBoxInto(boxWithoutScroll, box);
24493              /**
24494               * Performance TODO: Keep a cumulative scroll offset down the tree
24495               * rather than loop back up the path.
24496               */
24497              for (let i = 0; i < this.path.length; i++) {
24498                  const node = this.path[i];
24499                  const { scroll, options } = node;
24500                  if (node !== this.root && scroll && options.layoutScroll) {
24501                      /**
24502                       * If this is a new scroll root, we want to remove all previous scrolls
24503                       * from the viewport box.
24504                       */
24505                      if (scroll.isRoot) {
24506                          copyBoxInto(boxWithoutScroll, box);
24507                          const { scroll: rootScroll } = this.root;
24508                          /**
24509                           * Undo the application of page scroll that was originally added
24510                           * to the measured bounding box.
24511                           */
24512                          if (rootScroll) {
24513                              translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
24514                              translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
24515                          }
24516                      }
24517                      translateAxis(boxWithoutScroll.x, scroll.offset.x);
24518                      translateAxis(boxWithoutScroll.y, scroll.offset.y);
24519                  }
24520              }
24521              return boxWithoutScroll;
24522          }
24523          applyTransform(box, transformOnly = false) {
24524              const withTransforms = createBox();
24525              copyBoxInto(withTransforms, box);
24526              for (let i = 0; i < this.path.length; i++) {
24527                  const node = this.path[i];
24528                  if (!transformOnly &&
24529                      node.options.layoutScroll &&
24530                      node.scroll &&
24531                      node !== node.root) {
24532                      transformBox(withTransforms, {
24533                          x: -node.scroll.offset.x,
24534                          y: -node.scroll.offset.y,
24535                      });
24536                  }
24537                  if (!hasTransform(node.latestValues))
24538                      continue;
24539                  transformBox(withTransforms, node.latestValues);
24540              }
24541              if (hasTransform(this.latestValues)) {
24542                  transformBox(withTransforms, this.latestValues);
24543              }
24544              return withTransforms;
24545          }
24546          removeTransform(box) {
24547              const boxWithoutTransform = createBox();
24548              copyBoxInto(boxWithoutTransform, box);
24549              for (let i = 0; i < this.path.length; i++) {
24550                  const node = this.path[i];
24551                  if (!node.instance)
24552                      continue;
24553                  if (!hasTransform(node.latestValues))
24554                      continue;
24555                  hasScale(node.latestValues) && node.updateSnapshot();
24556                  const sourceBox = createBox();
24557                  const nodeBox = node.measurePageBox();
24558                  copyBoxInto(sourceBox, nodeBox);
24559                  removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
24560              }
24561              if (hasTransform(this.latestValues)) {
24562                  removeBoxTransforms(boxWithoutTransform, this.latestValues);
24563              }
24564              return boxWithoutTransform;
24565          }
24566          setTargetDelta(delta) {
24567              this.targetDelta = delta;
24568              this.root.scheduleUpdateProjection();
24569              this.isProjectionDirty = true;
24570          }
24571          setOptions(options) {
24572              this.options = {
24573                  ...this.options,
24574                  ...options,
24575                  crossfade: options.crossfade !== undefined ? options.crossfade : true,
24576              };
24577          }
24578          clearMeasurements() {
24579              this.scroll = undefined;
24580              this.layout = undefined;
24581              this.snapshot = undefined;
24582              this.prevTransformTemplateValue = undefined;
24583              this.targetDelta = undefined;
24584              this.target = undefined;
24585              this.isLayoutDirty = false;
24586          }
24587          forceRelativeParentToResolveTarget() {
24588              if (!this.relativeParent)
24589                  return;
24590              /**
24591               * If the parent target isn't up-to-date, force it to update.
24592               * This is an unfortunate de-optimisation as it means any updating relative
24593               * projection will cause all the relative parents to recalculate back
24594               * up the tree.
24595               */
24596              if (this.relativeParent.resolvedRelativeTargetAt !==
24597                  frameData.timestamp) {
24598                  this.relativeParent.resolveTargetDelta(true);
24599              }
24600          }
24601          resolveTargetDelta(forceRecalculation = false) {
24602              var _a;
24603              /**
24604               * Once the dirty status of nodes has been spread through the tree, we also
24605               * need to check if we have a shared node of a different depth that has itself
24606               * been dirtied.
24607               */
24608              const lead = this.getLead();
24609              this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
24610              this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
24611              this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
24612              const isShared = Boolean(this.resumingFrom) || this !== lead;
24613              /**
24614               * We don't use transform for this step of processing so we don't
24615               * need to check whether any nodes have changed transform.
24616               */
24617              const canSkip = !(forceRecalculation ||
24618                  (isShared && this.isSharedProjectionDirty) ||
24619                  this.isProjectionDirty ||
24620                  ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
24621                  this.attemptToResolveRelativeTarget);
24622              if (canSkip)
24623                  return;
24624              const { layout, layoutId } = this.options;
24625              /**
24626               * If we have no layout, we can't perform projection, so early return
24627               */
24628              if (!this.layout || !(layout || layoutId))
24629                  return;
24630              this.resolvedRelativeTargetAt = frameData.timestamp;
24631              /**
24632               * If we don't have a targetDelta but do have a layout, we can attempt to resolve
24633               * a relativeParent. This will allow a component to perform scale correction
24634               * even if no animation has started.
24635               */
24636              // TODO If this is unsuccessful this currently happens every frame
24637              if (!this.targetDelta && !this.relativeTarget) {
24638                  // TODO: This is a semi-repetition of further down this function, make DRY
24639                  const relativeParent = this.getClosestProjectingParent();
24640                  if (relativeParent &&
24641                      relativeParent.layout &&
24642                      this.animationProgress !== 1) {
24643                      this.relativeParent = relativeParent;
24644                      this.forceRelativeParentToResolveTarget();
24645                      this.relativeTarget = createBox();
24646                      this.relativeTargetOrigin = createBox();
24647                      calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
24648                      copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
24649                  }
24650                  else {
24651                      this.relativeParent = this.relativeTarget = undefined;
24652                  }
24653              }
24654              /**
24655               * If we have no relative target or no target delta our target isn't valid
24656               * for this frame.
24657               */
24658              if (!this.relativeTarget && !this.targetDelta)
24659                  return;
24660              /**
24661               * Lazy-init target data structure
24662               */
24663              if (!this.target) {
24664                  this.target = createBox();
24665                  this.targetWithTransforms = createBox();
24666              }
24667              /**
24668               * If we've got a relative box for this component, resolve it into a target relative to the parent.
24669               */
24670              if (this.relativeTarget &&
24671                  this.relativeTargetOrigin &&
24672                  this.relativeParent &&
24673                  this.relativeParent.target) {
24674                  this.forceRelativeParentToResolveTarget();
24675                  calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
24676                  /**
24677                   * If we've only got a targetDelta, resolve it into a target
24678                   */
24679              }
24680              else if (this.targetDelta) {
24681                  if (Boolean(this.resumingFrom)) {
24682                      // TODO: This is creating a new object every frame
24683                      this.target = this.applyTransform(this.layout.layoutBox);
24684                  }
24685                  else {
24686                      copyBoxInto(this.target, this.layout.layoutBox);
24687                  }
24688                  applyBoxDelta(this.target, this.targetDelta);
24689              }
24690              else {
24691                  /**
24692                   * If no target, use own layout as target
24693                   */
24694                  copyBoxInto(this.target, this.layout.layoutBox);
24695              }
24696              /**
24697               * If we've been told to attempt to resolve a relative target, do so.
24698               */
24699              if (this.attemptToResolveRelativeTarget) {
24700                  this.attemptToResolveRelativeTarget = false;
24701                  const relativeParent = this.getClosestProjectingParent();
24702                  if (relativeParent &&
24703                      Boolean(relativeParent.resumingFrom) ===
24704                          Boolean(this.resumingFrom) &&
24705                      !relativeParent.options.layoutScroll &&
24706                      relativeParent.target &&
24707                      this.animationProgress !== 1) {
24708                      this.relativeParent = relativeParent;
24709                      this.forceRelativeParentToResolveTarget();
24710                      this.relativeTarget = createBox();
24711                      this.relativeTargetOrigin = createBox();
24712                      calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
24713                      copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
24714                  }
24715                  else {
24716                      this.relativeParent = this.relativeTarget = undefined;
24717                  }
24718              }
24719              /**
24720               * Increase debug counter for resolved target deltas
24721               */
24722              projectionFrameData.resolvedTargetDeltas++;
24723          }
24724          getClosestProjectingParent() {
24725              if (!this.parent ||
24726                  hasScale(this.parent.latestValues) ||
24727                  has2DTranslate(this.parent.latestValues)) {
24728                  return undefined;
24729              }
24730              if (this.parent.isProjecting()) {
24731                  return this.parent;
24732              }
24733              else {
24734                  return this.parent.getClosestProjectingParent();
24735              }
24736          }
24737          isProjecting() {
24738              return Boolean((this.relativeTarget ||
24739                  this.targetDelta ||
24740                  this.options.layoutRoot) &&
24741                  this.layout);
24742          }
24743          calcProjection() {
24744              var _a;
24745              const lead = this.getLead();
24746              const isShared = Boolean(this.resumingFrom) || this !== lead;
24747              let canSkip = true;
24748              /**
24749               * If this is a normal layout animation and neither this node nor its nearest projecting
24750               * is dirty then we can't skip.
24751               */
24752              if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
24753                  canSkip = false;
24754              }
24755              /**
24756               * If this is a shared layout animation and this node's shared projection is dirty then
24757               * we can't skip.
24758               */
24759              if (isShared &&
24760                  (this.isSharedProjectionDirty || this.isTransformDirty)) {
24761                  canSkip = false;
24762              }
24763              /**
24764               * If we have resolved the target this frame we must recalculate the
24765               * projection to ensure it visually represents the internal calculations.
24766               */
24767              if (this.resolvedRelativeTargetAt === frameData.timestamp) {
24768                  canSkip = false;
24769              }
24770              if (canSkip)
24771                  return;
24772              const { layout, layoutId } = this.options;
24773              /**
24774               * If this section of the tree isn't animating we can
24775               * delete our target sources for the following frame.
24776               */
24777              this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
24778                  this.currentAnimation ||
24779                  this.pendingAnimation);
24780              if (!this.isTreeAnimating) {
24781                  this.targetDelta = this.relativeTarget = undefined;
24782              }
24783              if (!this.layout || !(layout || layoutId))
24784                  return;
24785              /**
24786               * Reset the corrected box with the latest values from box, as we're then going
24787               * to perform mutative operations on it.
24788               */
24789              copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
24790              /**
24791               * Record previous tree scales before updating.
24792               */
24793              const prevTreeScaleX = this.treeScale.x;
24794              const prevTreeScaleY = this.treeScale.y;
24795              /**
24796               * Apply all the parent deltas to this box to produce the corrected box. This
24797               * is the layout box, as it will appear on screen as a result of the transforms of its parents.
24798               */
24799              applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
24800              /**
24801               * If this layer needs to perform scale correction but doesn't have a target,
24802               * use the layout as the target.
24803               */
24804              if (lead.layout &&
24805                  !lead.target &&
24806                  (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
24807                  lead.target = lead.layout.layoutBox;
24808              }
24809              const { target } = lead;
24810              if (!target) {
24811                  /**
24812                   * If we don't have a target to project into, but we were previously
24813                   * projecting, we want to remove the stored transform and schedule
24814                   * a render to ensure the elements reflect the removed transform.
24815                   */
24816                  if (this.projectionTransform) {
24817                      this.projectionDelta = createDelta();
24818                      this.projectionTransform = "none";
24819                      this.scheduleRender();
24820                  }
24821                  return;
24822              }
24823              if (!this.projectionDelta) {
24824                  this.projectionDelta = createDelta();
24825                  this.projectionDeltaWithTransform = createDelta();
24826              }
24827              const prevProjectionTransform = this.projectionTransform;
24828              /**
24829               * Update the delta between the corrected box and the target box before user-set transforms were applied.
24830               * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
24831               * for our layout reprojection, but still allow them to be scaled correctly by the user.
24832               * It might be that to simplify this we may want to accept that user-set scale is also corrected
24833               * and we wouldn't have to keep and calc both deltas, OR we could support a user setting
24834               * to allow people to choose whether these styles are corrected based on just the
24835               * layout reprojection or the final bounding box.
24836               */
24837              calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
24838              this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);
24839              if (this.projectionTransform !== prevProjectionTransform ||
24840                  this.treeScale.x !== prevTreeScaleX ||
24841                  this.treeScale.y !== prevTreeScaleY) {
24842                  this.hasProjected = true;
24843                  this.scheduleRender();
24844                  this.notifyListeners("projectionUpdate", target);
24845              }
24846              /**
24847               * Increase debug counter for recalculated projections
24848               */
24849              projectionFrameData.recalculatedProjection++;
24850          }
24851          hide() {
24852              this.isVisible = false;
24853              // TODO: Schedule render
24854          }
24855          show() {
24856              this.isVisible = true;
24857              // TODO: Schedule render
24858          }
24859          scheduleRender(notifyAll = true) {
24860              this.options.scheduleRender && this.options.scheduleRender();
24861              if (notifyAll) {
24862                  const stack = this.getStack();
24863                  stack && stack.scheduleRender();
24864              }
24865              if (this.resumingFrom && !this.resumingFrom.instance) {
24866                  this.resumingFrom = undefined;
24867              }
24868          }
24869          setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
24870              const snapshot = this.snapshot;
24871              const snapshotLatestValues = snapshot
24872                  ? snapshot.latestValues
24873                  : {};
24874              const mixedValues = { ...this.latestValues };
24875              const targetDelta = createDelta();
24876              if (!this.relativeParent ||
24877                  !this.relativeParent.options.layoutRoot) {
24878                  this.relativeTarget = this.relativeTargetOrigin = undefined;
24879              }
24880              this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
24881              const relativeLayout = createBox();
24882              const snapshotSource = snapshot ? snapshot.source : undefined;
24883              const layoutSource = this.layout ? this.layout.source : undefined;
24884              const isSharedLayoutAnimation = snapshotSource !== layoutSource;
24885              const stack = this.getStack();
24886              const isOnlyMember = !stack || stack.members.length <= 1;
24887              const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
24888                  !isOnlyMember &&
24889                  this.options.crossfade === true &&
24890                  !this.path.some(hasOpacityCrossfade));
24891              this.animationProgress = 0;
24892              let prevRelativeTarget;
24893              this.mixTargetDelta = (latest) => {
24894                  const progress = latest / 1000;
24895                  mixAxisDelta(targetDelta.x, delta.x, progress);
24896                  mixAxisDelta(targetDelta.y, delta.y, progress);
24897                  this.setTargetDelta(targetDelta);
24898                  if (this.relativeTarget &&
24899                      this.relativeTargetOrigin &&
24900                      this.layout &&
24901                      this.relativeParent &&
24902                      this.relativeParent.layout) {
24903                      calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
24904                      mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
24905                      /**
24906                       * If this is an unchanged relative target we can consider the
24907                       * projection not dirty.
24908                       */
24909                      if (prevRelativeTarget &&
24910                          boxEquals(this.relativeTarget, prevRelativeTarget)) {
24911                          this.isProjectionDirty = false;
24912                      }
24913                      if (!prevRelativeTarget)
24914                          prevRelativeTarget = createBox();
24915                      copyBoxInto(prevRelativeTarget, this.relativeTarget);
24916                  }
24917                  if (isSharedLayoutAnimation) {
24918                      this.animationValues = mixedValues;
24919                      mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
24920                  }
24921                  this.root.scheduleUpdateProjection();
24922                  this.scheduleRender();
24923                  this.animationProgress = progress;
24924              };
24925              this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
24926          }
24927          startAnimation(options) {
24928              this.notifyListeners("animationStart");
24929              this.currentAnimation && this.currentAnimation.stop();
24930              if (this.resumingFrom && this.resumingFrom.currentAnimation) {
24931                  this.resumingFrom.currentAnimation.stop();
24932              }
24933              if (this.pendingAnimation) {
24934                  cancelFrame(this.pendingAnimation);
24935                  this.pendingAnimation = undefined;
24936              }
24937              /**
24938               * Start the animation in the next frame to have a frame with progress 0,
24939               * where the target is the same as when the animation started, so we can
24940               * calculate the relative positions correctly for instant transitions.
24941               */
24942              this.pendingAnimation = frame_frame.update(() => {
24943                  globalProjectionState.hasAnimatedSinceResize = true;
24944                  this.currentAnimation = animateSingleValue(0, animationTarget, {
24945                      ...options,
24946                      onUpdate: (latest) => {
24947                          this.mixTargetDelta(latest);
24948                          options.onUpdate && options.onUpdate(latest);
24949                      },
24950                      onComplete: () => {
24951                          options.onComplete && options.onComplete();
24952                          this.completeAnimation();
24953                      },
24954                  });
24955                  if (this.resumingFrom) {
24956                      this.resumingFrom.currentAnimation = this.currentAnimation;
24957                  }
24958                  this.pendingAnimation = undefined;
24959              });
24960          }
24961          completeAnimation() {
24962              if (this.resumingFrom) {
24963                  this.resumingFrom.currentAnimation = undefined;
24964                  this.resumingFrom.preserveOpacity = undefined;
24965              }
24966              const stack = this.getStack();
24967              stack && stack.exitAnimationComplete();
24968              this.resumingFrom =
24969                  this.currentAnimation =
24970                      this.animationValues =
24971                          undefined;
24972              this.notifyListeners("animationComplete");
24973          }
24974          finishAnimation() {
24975              if (this.currentAnimation) {
24976                  this.mixTargetDelta && this.mixTargetDelta(animationTarget);
24977                  this.currentAnimation.stop();
24978              }
24979              this.completeAnimation();
24980          }
24981          applyTransformsToTarget() {
24982              const lead = this.getLead();
24983              let { targetWithTransforms, target, layout, latestValues } = lead;
24984              if (!targetWithTransforms || !target || !layout)
24985                  return;
24986              /**
24987               * If we're only animating position, and this element isn't the lead element,
24988               * then instead of projecting into the lead box we instead want to calculate
24989               * a new target that aligns the two boxes but maintains the layout shape.
24990               */
24991              if (this !== lead &&
24992                  this.layout &&
24993                  layout &&
24994                  shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
24995                  target = this.target || createBox();
24996                  const xLength = calcLength(this.layout.layoutBox.x);
24997                  target.x.min = lead.target.x.min;
24998                  target.x.max = target.x.min + xLength;
24999                  const yLength = calcLength(this.layout.layoutBox.y);
25000                  target.y.min = lead.target.y.min;
25001                  target.y.max = target.y.min + yLength;
25002              }
25003              copyBoxInto(targetWithTransforms, target);
25004              /**
25005               * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
25006               * This is the final box that we will then project into by calculating a transform delta and
25007               * applying it to the corrected box.
25008               */
25009              transformBox(targetWithTransforms, latestValues);
25010              /**
25011               * Update the delta between the corrected box and the final target box, after
25012               * user-set transforms are applied to it. This will be used by the renderer to
25013               * create a transform style that will reproject the element from its layout layout
25014               * into the desired bounding box.
25015               */
25016              calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
25017          }
25018          registerSharedNode(layoutId, node) {
25019              if (!this.sharedNodes.has(layoutId)) {
25020                  this.sharedNodes.set(layoutId, new NodeStack());
25021              }
25022              const stack = this.sharedNodes.get(layoutId);
25023              stack.add(node);
25024              const config = node.options.initialPromotionConfig;
25025              node.promote({
25026                  transition: config ? config.transition : undefined,
25027                  preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
25028                      ? config.shouldPreserveFollowOpacity(node)
25029                      : undefined,
25030              });
25031          }
25032          isLead() {
25033              const stack = this.getStack();
25034              return stack ? stack.lead === this : true;
25035          }
25036          getLead() {
25037              var _a;
25038              const { layoutId } = this.options;
25039              return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
25040          }
25041          getPrevLead() {
25042              var _a;
25043              const { layoutId } = this.options;
25044              return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
25045          }
25046          getStack() {
25047              const { layoutId } = this.options;
25048              if (layoutId)
25049                  return this.root.sharedNodes.get(layoutId);
25050          }
25051          promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
25052              const stack = this.getStack();
25053              if (stack)
25054                  stack.promote(this, preserveFollowOpacity);
25055              if (needsReset) {
25056                  this.projectionDelta = undefined;
25057                  this.needsReset = true;
25058              }
25059              if (transition)
25060                  this.setOptions({ transition });
25061          }
25062          relegate() {
25063              const stack = this.getStack();
25064              if (stack) {
25065                  return stack.relegate(this);
25066              }
25067              else {
25068                  return false;
25069              }
25070          }
25071          resetRotation() {
25072              const { visualElement } = this.options;
25073              if (!visualElement)
25074                  return;
25075              // If there's no detected rotation values, we can early return without a forced render.
25076              let hasRotate = false;
25077              /**
25078               * An unrolled check for rotation values. Most elements don't have any rotation and
25079               * skipping the nested loop and new object creation is 50% faster.
25080               */
25081              const { latestValues } = visualElement;
25082              if (latestValues.rotate ||
25083                  latestValues.rotateX ||
25084                  latestValues.rotateY ||
25085                  latestValues.rotateZ) {
25086                  hasRotate = true;
25087              }
25088              // If there's no rotation values, we don't need to do any more.
25089              if (!hasRotate)
25090                  return;
25091              const resetValues = {};
25092              // Check the rotate value of all axes and reset to 0
25093              for (let i = 0; i < transformAxes.length; i++) {
25094                  const key = "rotate" + transformAxes[i];
25095                  // Record the rotation and then temporarily set it to 0
25096                  if (latestValues[key]) {
25097                      resetValues[key] = latestValues[key];
25098                      visualElement.setStaticValue(key, 0);
25099                  }
25100              }
25101              // Force a render of this element to apply the transform with all rotations
25102              // set to 0.
25103              visualElement.render();
25104              // Put back all the values we reset
25105              for (const key in resetValues) {
25106                  visualElement.setStaticValue(key, resetValues[key]);
25107              }
25108              // Schedule a render for the next frame. This ensures we won't visually
25109              // see the element with the reset rotate value applied.
25110              visualElement.scheduleRender();
25111          }
25112          getProjectionStyles(styleProp = {}) {
25113              var _a, _b;
25114              // TODO: Return lifecycle-persistent object
25115              const styles = {};
25116              if (!this.instance || this.isSVG)
25117                  return styles;
25118              if (!this.isVisible) {
25119                  return { visibility: "hidden" };
25120              }
25121              else {
25122                  styles.visibility = "";
25123              }
25124              const transformTemplate = this.getTransformTemplate();
25125              if (this.needsReset) {
25126                  this.needsReset = false;
25127                  styles.opacity = "";
25128                  styles.pointerEvents =
25129                      resolveMotionValue(styleProp.pointerEvents) || "";
25130                  styles.transform = transformTemplate
25131                      ? transformTemplate(this.latestValues, "")
25132                      : "none";
25133                  return styles;
25134              }
25135              const lead = this.getLead();
25136              if (!this.projectionDelta || !this.layout || !lead.target) {
25137                  const emptyStyles = {};
25138                  if (this.options.layoutId) {
25139                      emptyStyles.opacity =
25140                          this.latestValues.opacity !== undefined
25141                              ? this.latestValues.opacity
25142                              : 1;
25143                      emptyStyles.pointerEvents =
25144                          resolveMotionValue(styleProp.pointerEvents) || "";
25145                  }
25146                  if (this.hasProjected && !hasTransform(this.latestValues)) {
25147                      emptyStyles.transform = transformTemplate
25148                          ? transformTemplate({}, "")
25149                          : "none";
25150                      this.hasProjected = false;
25151                  }
25152                  return emptyStyles;
25153              }
25154              const valuesToRender = lead.animationValues || lead.latestValues;
25155              this.applyTransformsToTarget();
25156              styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
25157              if (transformTemplate) {
25158                  styles.transform = transformTemplate(valuesToRender, styles.transform);
25159              }
25160              const { x, y } = this.projectionDelta;
25161              styles.transformOrigin = `$x.origin * 100}% $y.origin * 100}% 0`;
25162              if (lead.animationValues) {
25163                  /**
25164                   * If the lead component is animating, assign this either the entering/leaving
25165                   * opacity
25166                   */
25167                  styles.opacity =
25168                      lead === this
25169                          ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
25170                          : this.preserveOpacity
25171                              ? this.latestValues.opacity
25172                              : valuesToRender.opacityExit;
25173              }
25174              else {
25175                  /**
25176                   * Or we're not animating at all, set the lead component to its layout
25177                   * opacity and other components to hidden.
25178                   */
25179                  styles.opacity =
25180                      lead === this
25181                          ? valuesToRender.opacity !== undefined
25182                              ? valuesToRender.opacity
25183                              : ""
25184                          : valuesToRender.opacityExit !== undefined
25185                              ? valuesToRender.opacityExit
25186                              : 0;
25187              }
25188              /**
25189               * Apply scale correction
25190               */
25191              for (const key in scaleCorrectors) {
25192                  if (valuesToRender[key] === undefined)
25193                      continue;
25194                  const { correct, applyTo } = scaleCorrectors[key];
25195                  /**
25196                   * Only apply scale correction to the value if we have an
25197                   * active projection transform. Otherwise these values become
25198                   * vulnerable to distortion if the element changes size without
25199                   * a corresponding layout animation.
25200                   */
25201                  const corrected = styles.transform === "none"
25202                      ? valuesToRender[key]
25203                      : correct(valuesToRender[key], lead);
25204                  if (applyTo) {
25205                      const num = applyTo.length;
25206                      for (let i = 0; i < num; i++) {
25207                          styles[applyTo[i]] = corrected;
25208                      }
25209                  }
25210                  else {
25211                      styles[key] = corrected;
25212                  }
25213              }
25214              /**
25215               * Disable pointer events on follow components. This is to ensure
25216               * that if a follow component covers a lead component it doesn't block
25217               * pointer events on the lead.
25218               */
25219              if (this.options.layoutId) {
25220                  styles.pointerEvents =
25221                      lead === this
25222                          ? resolveMotionValue(styleProp.pointerEvents) || ""
25223                          : "none";
25224              }
25225              return styles;
25226          }
25227          clearSnapshot() {
25228              this.resumeFrom = this.snapshot = undefined;
25229          }
25230          // Only run on root
25231          resetTree() {
25232              this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
25233              this.root.nodes.forEach(clearMeasurements);
25234              this.root.sharedNodes.clear();
25235          }
25236      };
25237  }
25238  function updateLayout(node) {
25239      node.updateLayout();
25240  }
25241  function notifyLayoutUpdate(node) {
25242      var _a;
25243      const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
25244      if (node.isLead() &&
25245          node.layout &&
25246          snapshot &&
25247          node.hasListeners("didUpdate")) {
25248          const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
25249          const { animationType } = node.options;
25250          const isShared = snapshot.source !== node.layout.source;
25251          // TODO Maybe we want to also resize the layout snapshot so we don't trigger
25252          // animations for instance if layout="size" and an element has only changed position
25253          if (animationType === "size") {
25254              eachAxis((axis) => {
25255                  const axisSnapshot = isShared
25256                      ? snapshot.measuredBox[axis]
25257                      : snapshot.layoutBox[axis];
25258                  const length = calcLength(axisSnapshot);
25259                  axisSnapshot.min = layout[axis].min;
25260                  axisSnapshot.max = axisSnapshot.min + length;
25261              });
25262          }
25263          else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
25264              eachAxis((axis) => {
25265                  const axisSnapshot = isShared
25266                      ? snapshot.measuredBox[axis]
25267                      : snapshot.layoutBox[axis];
25268                  const length = calcLength(layout[axis]);
25269                  axisSnapshot.max = axisSnapshot.min + length;
25270                  /**
25271                   * Ensure relative target gets resized and rerendererd
25272                   */
25273                  if (node.relativeTarget && !node.currentAnimation) {
25274                      node.isProjectionDirty = true;
25275                      node.relativeTarget[axis].max =
25276                          node.relativeTarget[axis].min + length;
25277                  }
25278              });
25279          }
25280          const layoutDelta = createDelta();
25281          calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
25282          const visualDelta = createDelta();
25283          if (isShared) {
25284              calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
25285          }
25286          else {
25287              calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
25288          }
25289          const hasLayoutChanged = !isDeltaZero(layoutDelta);
25290          let hasRelativeTargetChanged = false;
25291          if (!node.resumeFrom) {
25292              const relativeParent = node.getClosestProjectingParent();
25293              /**
25294               * If the relativeParent is itself resuming from a different element then
25295               * the relative snapshot is not relavent
25296               */
25297              if (relativeParent && !relativeParent.resumeFrom) {
25298                  const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
25299                  if (parentSnapshot && parentLayout) {
25300                      const relativeSnapshot = createBox();
25301                      calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
25302                      const relativeLayout = createBox();
25303                      calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
25304                      if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
25305                          hasRelativeTargetChanged = true;
25306                      }
25307                      if (relativeParent.options.layoutRoot) {
25308                          node.relativeTarget = relativeLayout;
25309                          node.relativeTargetOrigin = relativeSnapshot;
25310                          node.relativeParent = relativeParent;
25311                      }
25312                  }
25313              }
25314          }
25315          node.notifyListeners("didUpdate", {
25316              layout,
25317              snapshot,
25318              delta: visualDelta,
25319              layoutDelta,
25320              hasLayoutChanged,
25321              hasRelativeTargetChanged,
25322          });
25323      }
25324      else if (node.isLead()) {
25325          const { onExitComplete } = node.options;
25326          onExitComplete && onExitComplete();
25327      }
25328      /**
25329       * Clearing transition
25330       * TODO: Investigate why this transition is being passed in as {type: false } from Framer
25331       * and why we need it at all
25332       */
25333      node.options.transition = undefined;
25334  }
25335  function propagateDirtyNodes(node) {
25336      /**
25337       * Increase debug counter for nodes encountered this frame
25338       */
25339      projectionFrameData.totalNodes++;
25340      if (!node.parent)
25341          return;
25342      /**
25343       * If this node isn't projecting, propagate isProjectionDirty. It will have
25344       * no performance impact but it will allow the next child that *is* projecting
25345       * but *isn't* dirty to just check its parent to see if *any* ancestor needs
25346       * correcting.
25347       */
25348      if (!node.isProjecting()) {
25349          node.isProjectionDirty = node.parent.isProjectionDirty;
25350      }
25351      /**
25352       * Propagate isSharedProjectionDirty and isTransformDirty
25353       * throughout the whole tree. A future revision can take another look at
25354       * this but for safety we still recalcualte shared nodes.
25355       */
25356      node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
25357          node.parent.isProjectionDirty ||
25358          node.parent.isSharedProjectionDirty));
25359      node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
25360  }
25361  function cleanDirtyNodes(node) {
25362      node.isProjectionDirty =
25363          node.isSharedProjectionDirty =
25364              node.isTransformDirty =
25365                  false;
25366  }
25367  function clearSnapshot(node) {
25368      node.clearSnapshot();
25369  }
25370  function clearMeasurements(node) {
25371      node.clearMeasurements();
25372  }
25373  function clearIsLayoutDirty(node) {
25374      node.isLayoutDirty = false;
25375  }
25376  function resetTransformStyle(node) {
25377      const { visualElement } = node.options;
25378      if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
25379          visualElement.notify("BeforeLayoutMeasure");
25380      }
25381      node.resetTransform();
25382  }
25383  function finishAnimation(node) {
25384      node.finishAnimation();
25385      node.targetDelta = node.relativeTarget = node.target = undefined;
25386      node.isProjectionDirty = true;
25387  }
25388  function resolveTargetDelta(node) {
25389      node.resolveTargetDelta();
25390  }
25391  function calcProjection(node) {
25392      node.calcProjection();
25393  }
25394  function resetRotation(node) {
25395      node.resetRotation();
25396  }
25397  function removeLeadSnapshots(stack) {
25398      stack.removeLeadSnapshot();
25399  }
25400  function mixAxisDelta(output, delta, p) {
25401      output.translate = mix(delta.translate, 0, p);
25402      output.scale = mix(delta.scale, 1, p);
25403      output.origin = delta.origin;
25404      output.originPoint = delta.originPoint;
25405  }
25406  function mixAxis(output, from, to, p) {
25407      output.min = mix(from.min, to.min, p);
25408      output.max = mix(from.max, to.max, p);
25409  }
25410  function mixBox(output, from, to, p) {
25411      mixAxis(output.x, from.x, to.x, p);
25412      mixAxis(output.y, from.y, to.y, p);
25413  }
25414  function hasOpacityCrossfade(node) {
25415      return (node.animationValues && node.animationValues.opacityExit !== undefined);
25416  }
25417  const defaultLayoutTransition = {
25418      duration: 0.45,
25419      ease: [0.4, 0, 0.1, 1],
25420  };
25421  const userAgentContains = (string) => typeof navigator !== "undefined" &&
25422      navigator.userAgent.toLowerCase().includes(string);
25423  /**
25424   * Measured bounding boxes must be rounded in Safari and
25425   * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements
25426   * can appear to jump.
25427   */
25428  const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
25429      ? Math.round
25430      : noop_noop;
25431  function roundAxis(axis) {
25432      // Round to the nearest .5 pixels to support subpixel layouts
25433      axis.min = roundPoint(axis.min);
25434      axis.max = roundPoint(axis.max);
25435  }
25436  function roundBox(box) {
25437      roundAxis(box.x);
25438      roundAxis(box.y);
25439  }
25440  function shouldAnimatePositionOnly(animationType, snapshot, layout) {
25441      return (animationType === "position" ||
25442          (animationType === "preserve-aspect" &&
25443              !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
25444  }
25445  
25446  
25447  
25448  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs
25449  
25450  
25451  
25452  const DocumentProjectionNode = createProjectionNode({
25453      attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
25454      measureScroll: () => ({
25455          x: document.documentElement.scrollLeft || document.body.scrollLeft,
25456          y: document.documentElement.scrollTop || document.body.scrollTop,
25457      }),
25458      checkIsScrollRoot: () => true,
25459  });
25460  
25461  
25462  
25463  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs
25464  
25465  
25466  
25467  const rootProjectionNode = {
25468      current: undefined,
25469  };
25470  const HTMLProjectionNode = createProjectionNode({
25471      measureScroll: (instance) => ({
25472          x: instance.scrollLeft,
25473          y: instance.scrollTop,
25474      }),
25475      defaultParent: () => {
25476          if (!rootProjectionNode.current) {
25477              const documentNode = new DocumentProjectionNode({});
25478              documentNode.mount(window);
25479              documentNode.setOptions({ layoutScroll: true });
25480              rootProjectionNode.current = documentNode;
25481          }
25482          return rootProjectionNode.current;
25483      },
25484      resetTransform: (instance, value) => {
25485          instance.style.transform = value !== undefined ? value : "none";
25486      },
25487      checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
25488  });
25489  
25490  
25491  
25492  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/drag.mjs
25493  
25494  
25495  
25496  
25497  
25498  const drag = {
25499      pan: {
25500          Feature: PanGesture,
25501      },
25502      drag: {
25503          Feature: DragGesture,
25504          ProjectionNode: HTMLProjectionNode,
25505          MeasureLayout: MeasureLayout,
25506      },
25507  };
25508  
25509  
25510  
25511  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs
25512  
25513  
25514  
25515  
25516  /**
25517   * Parse Framer's special CSS variable format into a CSS token and a fallback.
25518   *
25519   * ```
25520   * `var(--foo, #fff)` => [`--foo`, '#fff']
25521   * ```
25522   *
25523   * @param current
25524   */
25525  const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
25526  function parseCSSVariable(current) {
25527      const match = splitCSSVariableRegex.exec(current);
25528      if (!match)
25529          return [,];
25530      const [, token, fallback] = match;
25531      return [token, fallback];
25532  }
25533  const maxDepth = 4;
25534  function getVariableValue(current, element, depth = 1) {
25535      errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "$current}". This may indicate a circular fallback dependency.`);
25536      const [token, fallback] = parseCSSVariable(current);
25537      // No CSS variable detected
25538      if (!token)
25539          return;
25540      // Attempt to read this CSS variable off the element
25541      const resolved = window.getComputedStyle(element).getPropertyValue(token);
25542      if (resolved) {
25543          const trimmed = resolved.trim();
25544          return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
25545      }
25546      else if (isCSSVariableToken(fallback)) {
25547          // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
25548          return getVariableValue(fallback, element, depth + 1);
25549      }
25550      else {
25551          return fallback;
25552      }
25553  }
25554  /**
25555   * Resolve CSS variables from
25556   *
25557   * @internal
25558   */
25559  function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
25560      const element = visualElement.current;
25561      if (!(element instanceof Element))
25562          return { target, transitionEnd };
25563      // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
25564      // only if they change but I think this reads clearer and this isn't a performance-critical path.
25565      if (transitionEnd) {
25566          transitionEnd = { ...transitionEnd };
25567      }
25568      // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
25569      visualElement.values.forEach((value) => {
25570          const current = value.get();
25571          if (!isCSSVariableToken(current))
25572              return;
25573          const resolved = getVariableValue(current, element);
25574          if (resolved)
25575              value.set(resolved);
25576      });
25577      // Cycle through every target property and resolve CSS variables. Currently
25578      // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
25579      for (const key in target) {
25580          const current = target[key];
25581          if (!isCSSVariableToken(current))
25582              continue;
25583          const resolved = getVariableValue(current, element);
25584          if (!resolved)
25585              continue;
25586          // Clone target if it hasn't already been
25587          target[key] = resolved;
25588          if (!transitionEnd)
25589              transitionEnd = {};
25590          // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
25591          // CSS variable. This will ensure that after the animation the component will reflect
25592          // changes in the value of the CSS variable.
25593          if (transitionEnd[key] === undefined) {
25594              transitionEnd[key] = current;
25595          }
25596      }
25597      return { target, transitionEnd };
25598  }
25599  
25600  
25601  
25602  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs
25603  
25604  
25605  
25606  
25607  
25608  
25609  
25610  
25611  const positionalKeys = new Set([
25612      "width",
25613      "height",
25614      "top",
25615      "left",
25616      "right",
25617      "bottom",
25618      "x",
25619      "y",
25620      "translateX",
25621      "translateY",
25622  ]);
25623  const isPositionalKey = (key) => positionalKeys.has(key);
25624  const hasPositionalKey = (target) => {
25625      return Object.keys(target).some(isPositionalKey);
25626  };
25627  const isNumOrPxType = (v) => v === number || v === px;
25628  const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
25629  const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
25630      if (transform === "none" || !transform)
25631          return 0;
25632      const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
25633      if (matrix3d) {
25634          return getPosFromMatrix(matrix3d[1], pos3);
25635      }
25636      else {
25637          const matrix = transform.match(/^matrix\((.+)\)$/);
25638          if (matrix) {
25639              return getPosFromMatrix(matrix[1], pos2);
25640          }
25641          else {
25642              return 0;
25643          }
25644      }
25645  };
25646  const transformKeys = new Set(["x", "y", "z"]);
25647  const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
25648  function removeNonTranslationalTransform(visualElement) {
25649      const removedTransforms = [];
25650      nonTranslationalTransformKeys.forEach((key) => {
25651          const value = visualElement.getValue(key);
25652          if (value !== undefined) {
25653              removedTransforms.push([key, value.get()]);
25654              value.set(key.startsWith("scale") ? 1 : 0);
25655          }
25656      });
25657      // Apply changes to element before measurement
25658      if (removedTransforms.length)
25659          visualElement.render();
25660      return removedTransforms;
25661  }
25662  const positionalValues = {
25663      // Dimensions
25664      width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
25665      height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
25666      top: (_bbox, { top }) => parseFloat(top),
25667      left: (_bbox, { left }) => parseFloat(left),
25668      bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
25669      right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
25670      // Transform
25671      x: getTranslateFromMatrix(4, 13),
25672      y: getTranslateFromMatrix(5, 14),
25673  };
25674  // Alias translate longform names
25675  positionalValues.translateX = positionalValues.x;
25676  positionalValues.translateY = positionalValues.y;
25677  const convertChangedValueTypes = (target, visualElement, changedKeys) => {
25678      const originBbox = visualElement.measureViewportBox();
25679      const element = visualElement.current;
25680      const elementComputedStyle = getComputedStyle(element);
25681      const { display } = elementComputedStyle;
25682      const origin = {};
25683      // If the element is currently set to display: "none", make it visible before
25684      // measuring the target bounding box
25685      if (display === "none") {
25686          visualElement.setStaticValue("display", target.display || "block");
25687      }
25688      /**
25689       * Record origins before we render and update styles
25690       */
25691      changedKeys.forEach((key) => {
25692          origin[key] = positionalValues[key](originBbox, elementComputedStyle);
25693      });
25694      // Apply the latest values (as set in checkAndConvertChangedValueTypes)
25695      visualElement.render();
25696      const targetBbox = visualElement.measureViewportBox();
25697      changedKeys.forEach((key) => {
25698          // Restore styles to their **calculated computed style**, not their actual
25699          // originally set style. This allows us to animate between equivalent pixel units.
25700          const value = visualElement.getValue(key);
25701          value && value.jump(origin[key]);
25702          target[key] = positionalValues[key](targetBbox, elementComputedStyle);
25703      });
25704      return target;
25705  };
25706  const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
25707      target = { ...target };
25708      transitionEnd = { ...transitionEnd };
25709      const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
25710      // We want to remove any transform values that could affect the element's bounding box before
25711      // it's measured. We'll reapply these later.
25712      let removedTransformValues = [];
25713      let hasAttemptedToRemoveTransformValues = false;
25714      const changedValueTypeKeys = [];
25715      targetPositionalKeys.forEach((key) => {
25716          const value = visualElement.getValue(key);
25717          if (!visualElement.hasValue(key))
25718              return;
25719          let from = origin[key];
25720          let fromType = findDimensionValueType(from);
25721          const to = target[key];
25722          let toType;
25723          // TODO: The current implementation of this basically throws an error
25724          // if you try and do value conversion via keyframes. There's probably
25725          // a way of doing this but the performance implications would need greater scrutiny,
25726          // as it'd be doing multiple resize-remeasure operations.
25727          if (isKeyframesTarget(to)) {
25728              const numKeyframes = to.length;
25729              const fromIndex = to[0] === null ? 1 : 0;
25730              from = to[fromIndex];
25731              fromType = findDimensionValueType(from);
25732              for (let i = fromIndex; i < numKeyframes; i++) {
25733                  /**
25734                   * Don't allow wildcard keyframes to be used to detect
25735                   * a difference in value types.
25736                   */
25737                  if (to[i] === null)
25738                      break;
25739                  if (!toType) {
25740                      toType = findDimensionValueType(to[i]);
25741                      errors_invariant(toType === fromType ||
25742                          (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
25743                  }
25744                  else {
25745                      errors_invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
25746                  }
25747              }
25748          }
25749          else {
25750              toType = findDimensionValueType(to);
25751          }
25752          if (fromType !== toType) {
25753              // If they're both just number or px, convert them both to numbers rather than
25754              // relying on resize/remeasure to convert (which is wasteful in this situation)
25755              if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
25756                  const current = value.get();
25757                  if (typeof current === "string") {
25758                      value.set(parseFloat(current));
25759                  }
25760                  if (typeof to === "string") {
25761                      target[key] = parseFloat(to);
25762                  }
25763                  else if (Array.isArray(to) && toType === px) {
25764                      target[key] = to.map(parseFloat);
25765                  }
25766              }
25767              else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
25768                  (toType === null || toType === void 0 ? void 0 : toType.transform) &&
25769                  (from === 0 || to === 0)) {
25770                  // If one or the other value is 0, it's safe to coerce it to the
25771                  // type of the other without measurement
25772                  if (from === 0) {
25773                      value.set(toType.transform(from));
25774                  }
25775                  else {
25776                      target[key] = fromType.transform(to);
25777                  }
25778              }
25779              else {
25780                  // If we're going to do value conversion via DOM measurements, we first
25781                  // need to remove non-positional transform values that could affect the bbox measurements.
25782                  if (!hasAttemptedToRemoveTransformValues) {
25783                      removedTransformValues =
25784                          removeNonTranslationalTransform(visualElement);
25785                      hasAttemptedToRemoveTransformValues = true;
25786                  }
25787                  changedValueTypeKeys.push(key);
25788                  transitionEnd[key] =
25789                      transitionEnd[key] !== undefined
25790                          ? transitionEnd[key]
25791                          : target[key];
25792                  value.jump(to);
25793              }
25794          }
25795      });
25796      if (changedValueTypeKeys.length) {
25797          const scrollY = changedValueTypeKeys.indexOf("height") >= 0
25798              ? window.pageYOffset
25799              : null;
25800          const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
25801          // If we removed transform values, reapply them before the next render
25802          if (removedTransformValues.length) {
25803              removedTransformValues.forEach(([key, value]) => {
25804                  visualElement.getValue(key).set(value);
25805              });
25806          }
25807          // Reapply original values
25808          visualElement.render();
25809          // Restore scroll position
25810          if (is_browser_isBrowser && scrollY !== null) {
25811              window.scrollTo({ top: scrollY });
25812          }
25813          return { target: convertedTarget, transitionEnd };
25814      }
25815      else {
25816          return { target, transitionEnd };
25817      }
25818  };
25819  /**
25820   * Convert value types for x/y/width/height/top/left/bottom/right
25821   *
25822   * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
25823   *
25824   * @internal
25825   */
25826  function unitConversion(visualElement, target, origin, transitionEnd) {
25827      return hasPositionalKey(target)
25828          ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
25829          : { target, transitionEnd };
25830  }
25831  
25832  
25833  
25834  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs
25835  
25836  
25837  
25838  /**
25839   * Parse a DOM variant to make it animatable. This involves resolving CSS variables
25840   * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
25841   */
25842  const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
25843      const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
25844      target = resolved.target;
25845      transitionEnd = resolved.transitionEnd;
25846      return unitConversion(visualElement, target, origin, transitionEnd);
25847  };
25848  
25849  
25850  
25851  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
25852  // Does this device prefer reduced motion? Returns `null` server-side.
25853  const prefersReducedMotion = { current: null };
25854  const hasReducedMotionListener = { current: false };
25855  
25856  
25857  
25858  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
25859  
25860  
25861  
25862  function initPrefersReducedMotion() {
25863      hasReducedMotionListener.current = true;
25864      if (!is_browser_isBrowser)
25865          return;
25866      if (window.matchMedia) {
25867          const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
25868          const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
25869          motionMediaQuery.addListener(setReducedMotionPreferences);
25870          setReducedMotionPreferences();
25871      }
25872      else {
25873          prefersReducedMotion.current = false;
25874      }
25875  }
25876  
25877  
25878  
25879  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/motion-values.mjs
25880  
25881  
25882  
25883  
25884  
25885  function updateMotionValuesFromProps(element, next, prev) {
25886      const { willChange } = next;
25887      for (const key in next) {
25888          const nextValue = next[key];
25889          const prevValue = prev[key];
25890          if (isMotionValue(nextValue)) {
25891              /**
25892               * If this is a motion value found in props or style, we want to add it
25893               * to our visual element's motion value map.
25894               */
25895              element.addValue(key, nextValue);
25896              if (isWillChangeMotionValue(willChange)) {
25897                  willChange.add(key);
25898              }
25899              /**
25900               * Check the version of the incoming motion value with this version
25901               * and warn against mismatches.
25902               */
25903              if (false) {}
25904          }
25905          else if (isMotionValue(prevValue)) {
25906              /**
25907               * If we're swapping from a motion value to a static value,
25908               * create a new motion value from that
25909               */
25910              element.addValue(key, motionValue(nextValue, { owner: element }));
25911              if (isWillChangeMotionValue(willChange)) {
25912                  willChange.remove(key);
25913              }
25914          }
25915          else if (prevValue !== nextValue) {
25916              /**
25917               * If this is a flat value that has changed, update the motion value
25918               * or create one if it doesn't exist. We only want to do this if we're
25919               * not handling the value with our animation state.
25920               */
25921              if (element.hasValue(key)) {
25922                  const existingValue = element.getValue(key);
25923                  // TODO: Only update values that aren't being animated or even looked at
25924                  !existingValue.hasAnimated && existingValue.set(nextValue);
25925              }
25926              else {
25927                  const latestValue = element.getStaticValue(key);
25928                  element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
25929              }
25930          }
25931      }
25932      // Handle removed values
25933      for (const key in prev) {
25934          if (next[key] === undefined)
25935              element.removeValue(key);
25936      }
25937      return next;
25938  }
25939  
25940  
25941  
25942  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/store.mjs
25943  const visualElementStore = new WeakMap();
25944  
25945  
25946  
25947  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/VisualElement.mjs
25948  
25949  
25950  
25951  
25952  
25953  
25954  
25955  
25956  
25957  
25958  
25959  
25960  
25961  
25962  
25963  
25964  
25965  
25966  
25967  
25968  const featureNames = Object.keys(featureDefinitions);
25969  const numFeatures = featureNames.length;
25970  const propEventHandlers = [
25971      "AnimationStart",
25972      "AnimationComplete",
25973      "Update",
25974      "BeforeLayoutMeasure",
25975      "LayoutMeasure",
25976      "LayoutAnimationStart",
25977      "LayoutAnimationComplete",
25978  ];
25979  const numVariantProps = variantProps.length;
25980  /**
25981   * A VisualElement is an imperative abstraction around UI elements such as
25982   * HTMLElement, SVGElement, Three.Object3D etc.
25983   */
25984  class VisualElement {
25985      constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
25986          /**
25987           * A reference to the current underlying Instance, e.g. a HTMLElement
25988           * or Three.Mesh etc.
25989           */
25990          this.current = null;
25991          /**
25992           * A set containing references to this VisualElement's children.
25993           */
25994          this.children = new Set();
25995          /**
25996           * Determine what role this visual element should take in the variant tree.
25997           */
25998          this.isVariantNode = false;
25999          this.isControllingVariants = false;
26000          /**
26001           * Decides whether this VisualElement should animate in reduced motion
26002           * mode.
26003           *
26004           * TODO: This is currently set on every individual VisualElement but feels
26005           * like it could be set globally.
26006           */
26007          this.shouldReduceMotion = null;
26008          /**
26009           * A map of all motion values attached to this visual element. Motion
26010           * values are source of truth for any given animated value. A motion
26011           * value might be provided externally by the component via props.
26012           */
26013          this.values = new Map();
26014          /**
26015           * Cleanup functions for active features (hover/tap/exit etc)
26016           */
26017          this.features = {};
26018          /**
26019           * A map of every subscription that binds the provided or generated
26020           * motion values onChange listeners to this visual element.
26021           */
26022          this.valueSubscriptions = new Map();
26023          /**
26024           * A reference to the previously-provided motion values as returned
26025           * from scrapeMotionValuesFromProps. We use the keys in here to determine
26026           * if any motion values need to be removed after props are updated.
26027           */
26028          this.prevMotionValues = {};
26029          /**
26030           * An object containing a SubscriptionManager for each active event.
26031           */
26032          this.events = {};
26033          /**
26034           * An object containing an unsubscribe function for each prop event subscription.
26035           * For example, every "Update" event can have multiple subscribers via
26036           * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
26037           */
26038          this.propEventSubscriptions = {};
26039          this.notifyUpdate = () => this.notify("Update", this.latestValues);
26040          this.render = () => {
26041              if (!this.current)
26042                  return;
26043              this.triggerBuild();
26044              this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
26045          };
26046          this.scheduleRender = () => frame_frame.render(this.render, false, true);
26047          const { latestValues, renderState } = visualState;
26048          this.latestValues = latestValues;
26049          this.baseTarget = { ...latestValues };
26050          this.initialValues = props.initial ? { ...latestValues } : {};
26051          this.renderState = renderState;
26052          this.parent = parent;
26053          this.props = props;
26054          this.presenceContext = presenceContext;
26055          this.depth = parent ? parent.depth + 1 : 0;
26056          this.reducedMotionConfig = reducedMotionConfig;
26057          this.options = options;
26058          this.isControllingVariants = isControllingVariants(props);
26059          this.isVariantNode = isVariantNode(props);
26060          if (this.isVariantNode) {
26061              this.variantChildren = new Set();
26062          }
26063          this.manuallyAnimateOnMount = Boolean(parent && parent.current);
26064          /**
26065           * Any motion values that are provided to the element when created
26066           * aren't yet bound to the element, as this would technically be impure.
26067           * However, we iterate through the motion values and set them to the
26068           * initial values for this component.
26069           *
26070           * TODO: This is impure and we should look at changing this to run on mount.
26071           * Doing so will break some tests but this isn't neccessarily a breaking change,
26072           * more a reflection of the test.
26073           */
26074          const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});
26075          for (const key in initialMotionValues) {
26076              const value = initialMotionValues[key];
26077              if (latestValues[key] !== undefined && isMotionValue(value)) {
26078                  value.set(latestValues[key], false);
26079                  if (isWillChangeMotionValue(willChange)) {
26080                      willChange.add(key);
26081                  }
26082              }
26083          }
26084      }
26085      /**
26086       * This method takes React props and returns found MotionValues. For example, HTML
26087       * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
26088       *
26089       * This isn't an abstract method as it needs calling in the constructor, but it is
26090       * intended to be one.
26091       */
26092      scrapeMotionValuesFromProps(_props, _prevProps) {
26093          return {};
26094      }
26095      mount(instance) {
26096          this.current = instance;
26097          visualElementStore.set(instance, this);
26098          if (this.projection && !this.projection.instance) {
26099              this.projection.mount(instance);
26100          }
26101          if (this.parent && this.isVariantNode && !this.isControllingVariants) {
26102              this.removeFromVariantTree = this.parent.addVariantChild(this);
26103          }
26104          this.values.forEach((value, key) => this.bindToMotionValue(key, value));
26105          if (!hasReducedMotionListener.current) {
26106              initPrefersReducedMotion();
26107          }
26108          this.shouldReduceMotion =
26109              this.reducedMotionConfig === "never"
26110                  ? false
26111                  : this.reducedMotionConfig === "always"
26112                      ? true
26113                      : prefersReducedMotion.current;
26114          if (false) {}
26115          if (this.parent)
26116              this.parent.children.add(this);
26117          this.update(this.props, this.presenceContext);
26118      }
26119      unmount() {
26120          visualElementStore.delete(this.current);
26121          this.projection && this.projection.unmount();
26122          cancelFrame(this.notifyUpdate);
26123          cancelFrame(this.render);
26124          this.valueSubscriptions.forEach((remove) => remove());
26125          this.removeFromVariantTree && this.removeFromVariantTree();
26126          this.parent && this.parent.children.delete(this);
26127          for (const key in this.events) {
26128              this.events[key].clear();
26129          }
26130          for (const key in this.features) {
26131              this.features[key].unmount();
26132          }
26133          this.current = null;
26134      }
26135      bindToMotionValue(key, value) {
26136          const valueIsTransform = transformProps.has(key);
26137          const removeOnChange = value.on("change", (latestValue) => {
26138              this.latestValues[key] = latestValue;
26139              this.props.onUpdate &&
26140                  frame_frame.update(this.notifyUpdate, false, true);
26141              if (valueIsTransform && this.projection) {
26142                  this.projection.isTransformDirty = true;
26143              }
26144          });
26145          const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
26146          this.valueSubscriptions.set(key, () => {
26147              removeOnChange();
26148              removeOnRenderRequest();
26149          });
26150      }
26151      sortNodePosition(other) {
26152          /**
26153           * If these nodes aren't even of the same type we can't compare their depth.
26154           */
26155          if (!this.current ||
26156              !this.sortInstanceNodePosition ||
26157              this.type !== other.type) {
26158              return 0;
26159          }
26160          return this.sortInstanceNodePosition(this.current, other.current);
26161      }
26162      loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
26163          let ProjectionNodeConstructor;
26164          let MeasureLayout;
26165          /**
26166           * If we're in development mode, check to make sure we're not rendering a motion component
26167           * as a child of LazyMotion, as this will break the file-size benefits of using it.
26168           */
26169          if (false) {}
26170          for (let i = 0; i < numFeatures; i++) {
26171              const name = featureNames[i];
26172              const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
26173              if (ProjectionNode)
26174                  ProjectionNodeConstructor = ProjectionNode;
26175              if (isEnabled(renderedProps)) {
26176                  if (!this.features[name] && FeatureConstructor) {
26177                      this.features[name] = new FeatureConstructor(this);
26178                  }
26179                  if (MeasureLayoutComponent) {
26180                      MeasureLayout = MeasureLayoutComponent;
26181                  }
26182              }
26183          }
26184          if (!this.projection && ProjectionNodeConstructor) {
26185              this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);
26186              const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
26187              this.projection.setOptions({
26188                  layoutId,
26189                  layout,
26190                  alwaysMeasureLayout: Boolean(drag) ||
26191                      (dragConstraints && isRefObject(dragConstraints)),
26192                  visualElement: this,
26193                  scheduleRender: () => this.scheduleRender(),
26194                  /**
26195                   * TODO: Update options in an effect. This could be tricky as it'll be too late
26196                   * to update by the time layout animations run.
26197                   * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
26198                   * ensuring it gets called if there's no potential layout animations.
26199                   *
26200                   */
26201                  animationType: typeof layout === "string" ? layout : "both",
26202                  initialPromotionConfig: initialLayoutGroupConfig,
26203                  layoutScroll,
26204                  layoutRoot,
26205              });
26206          }
26207          return MeasureLayout;
26208      }
26209      updateFeatures() {
26210          for (const key in this.features) {
26211              const feature = this.features[key];
26212              if (feature.isMounted) {
26213                  feature.update();
26214              }
26215              else {
26216                  feature.mount();
26217                  feature.isMounted = true;
26218              }
26219          }
26220      }
26221      triggerBuild() {
26222          this.build(this.renderState, this.latestValues, this.options, this.props);
26223      }
26224      /**
26225       * Measure the current viewport box with or without transforms.
26226       * Only measures axis-aligned boxes, rotate and skew must be manually
26227       * removed with a re-render to work.
26228       */
26229      measureViewportBox() {
26230          return this.current
26231              ? this.measureInstanceViewportBox(this.current, this.props)
26232              : createBox();
26233      }
26234      getStaticValue(key) {
26235          return this.latestValues[key];
26236      }
26237      setStaticValue(key, value) {
26238          this.latestValues[key] = value;
26239      }
26240      /**
26241       * Make a target animatable by Popmotion. For instance, if we're
26242       * trying to animate width from 100px to 100vw we need to measure 100vw
26243       * in pixels to determine what we really need to animate to. This is also
26244       * pluggable to support Framer's custom value types like Color,
26245       * and CSS variables.
26246       */
26247      makeTargetAnimatable(target, canMutate = true) {
26248          return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
26249      }
26250      /**
26251       * Update the provided props. Ensure any newly-added motion values are
26252       * added to our map, old ones removed, and listeners updated.
26253       */
26254      update(props, presenceContext) {
26255          if (props.transformTemplate || this.props.transformTemplate) {
26256              this.scheduleRender();
26257          }
26258          this.prevProps = this.props;
26259          this.props = props;
26260          this.prevPresenceContext = this.presenceContext;
26261          this.presenceContext = presenceContext;
26262          /**
26263           * Update prop event handlers ie onAnimationStart, onAnimationComplete
26264           */
26265          for (let i = 0; i < propEventHandlers.length; i++) {
26266              const key = propEventHandlers[i];
26267              if (this.propEventSubscriptions[key]) {
26268                  this.propEventSubscriptions[key]();
26269                  delete this.propEventSubscriptions[key];
26270              }
26271              const listener = props["on" + key];
26272              if (listener) {
26273                  this.propEventSubscriptions[key] = this.on(key, listener);
26274              }
26275          }
26276          this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
26277          if (this.handleChildMotionValue) {
26278              this.handleChildMotionValue();
26279          }
26280      }
26281      getProps() {
26282          return this.props;
26283      }
26284      /**
26285       * Returns the variant definition with a given name.
26286       */
26287      getVariant(name) {
26288          return this.props.variants ? this.props.variants[name] : undefined;
26289      }
26290      /**
26291       * Returns the defined default transition on this component.
26292       */
26293      getDefaultTransition() {
26294          return this.props.transition;
26295      }
26296      getTransformPagePoint() {
26297          return this.props.transformPagePoint;
26298      }
26299      getClosestVariantNode() {
26300          return this.isVariantNode
26301              ? this
26302              : this.parent
26303                  ? this.parent.getClosestVariantNode()
26304                  : undefined;
26305      }
26306      getVariantContext(startAtParent = false) {
26307          if (startAtParent) {
26308              return this.parent ? this.parent.getVariantContext() : undefined;
26309          }
26310          if (!this.isControllingVariants) {
26311              const context = this.parent
26312                  ? this.parent.getVariantContext() || {}
26313                  : {};
26314              if (this.props.initial !== undefined) {
26315                  context.initial = this.props.initial;
26316              }
26317              return context;
26318          }
26319          const context = {};
26320          for (let i = 0; i < numVariantProps; i++) {
26321              const name = variantProps[i];
26322              const prop = this.props[name];
26323              if (isVariantLabel(prop) || prop === false) {
26324                  context[name] = prop;
26325              }
26326          }
26327          return context;
26328      }
26329      /**
26330       * Add a child visual element to our set of children.
26331       */
26332      addVariantChild(child) {
26333          const closestVariantNode = this.getClosestVariantNode();
26334          if (closestVariantNode) {
26335              closestVariantNode.variantChildren &&
26336                  closestVariantNode.variantChildren.add(child);
26337              return () => closestVariantNode.variantChildren.delete(child);
26338          }
26339      }
26340      /**
26341       * Add a motion value and bind it to this visual element.
26342       */
26343      addValue(key, value) {
26344          // Remove existing value if it exists
26345          if (value !== this.values.get(key)) {
26346              this.removeValue(key);
26347              this.bindToMotionValue(key, value);
26348          }
26349          this.values.set(key, value);
26350          this.latestValues[key] = value.get();
26351      }
26352      /**
26353       * Remove a motion value and unbind any active subscriptions.
26354       */
26355      removeValue(key) {
26356          this.values.delete(key);
26357          const unsubscribe = this.valueSubscriptions.get(key);
26358          if (unsubscribe) {
26359              unsubscribe();
26360              this.valueSubscriptions.delete(key);
26361          }
26362          delete this.latestValues[key];
26363          this.removeValueFromRenderState(key, this.renderState);
26364      }
26365      /**
26366       * Check whether we have a motion value for this key
26367       */
26368      hasValue(key) {
26369          return this.values.has(key);
26370      }
26371      getValue(key, defaultValue) {
26372          if (this.props.values && this.props.values[key]) {
26373              return this.props.values[key];
26374          }
26375          let value = this.values.get(key);
26376          if (value === undefined && defaultValue !== undefined) {
26377              value = motionValue(defaultValue, { owner: this });
26378              this.addValue(key, value);
26379          }
26380          return value;
26381      }
26382      /**
26383       * If we're trying to animate to a previously unencountered value,
26384       * we need to check for it in our state and as a last resort read it
26385       * directly from the instance (which might have performance implications).
26386       */
26387      readValue(key) {
26388          var _a;
26389          return this.latestValues[key] !== undefined || !this.current
26390              ? this.latestValues[key]
26391              : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
26392      }
26393      /**
26394       * Set the base target to later animate back to. This is currently
26395       * only hydrated on creation and when we first read a value.
26396       */
26397      setBaseTarget(key, value) {
26398          this.baseTarget[key] = value;
26399      }
26400      /**
26401       * Find the base target for a value thats been removed from all animation
26402       * props.
26403       */
26404      getBaseTarget(key) {
26405          var _a;
26406          const { initial } = this.props;
26407          const valueFromInitial = typeof initial === "string" || typeof initial === "object"
26408              ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
26409              : undefined;
26410          /**
26411           * If this value still exists in the current initial variant, read that.
26412           */
26413          if (initial && valueFromInitial !== undefined) {
26414              return valueFromInitial;
26415          }
26416          /**
26417           * Alternatively, if this VisualElement config has defined a getBaseTarget
26418           * so we can read the value from an alternative source, try that.
26419           */
26420          const target = this.getBaseTargetFromProps(this.props, key);
26421          if (target !== undefined && !isMotionValue(target))
26422              return target;
26423          /**
26424           * If the value was initially defined on initial, but it doesn't any more,
26425           * return undefined. Otherwise return the value as initially read from the DOM.
26426           */
26427          return this.initialValues[key] !== undefined &&
26428              valueFromInitial === undefined
26429              ? undefined
26430              : this.baseTarget[key];
26431      }
26432      on(eventName, callback) {
26433          if (!this.events[eventName]) {
26434              this.events[eventName] = new SubscriptionManager();
26435          }
26436          return this.events[eventName].add(callback);
26437      }
26438      notify(eventName, ...args) {
26439          if (this.events[eventName]) {
26440              this.events[eventName].notify(...args);
26441          }
26442      }
26443  }
26444  
26445  
26446  
26447  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
26448  
26449  
26450  
26451  
26452  class DOMVisualElement extends VisualElement {
26453      sortInstanceNodePosition(a, b) {
26454          /**
26455           * compareDocumentPosition returns a bitmask, by using the bitwise &
26456           * we're returning true if 2 in that bitmask is set to true. 2 is set
26457           * to true if b preceeds a.
26458           */
26459          return a.compareDocumentPosition(b) & 2 ? 1 : -1;
26460      }
26461      getBaseTargetFromProps(props, key) {
26462          return props.style ? props.style[key] : undefined;
26463      }
26464      removeValueFromRenderState(key, { vars, style }) {
26465          delete vars[key];
26466          delete style[key];
26467      }
26468      makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
26469          let origin = getOrigin(target, transition || {}, this);
26470          /**
26471           * If Framer has provided a function to convert `Color` etc value types, convert them
26472           */
26473          if (transformValues) {
26474              if (transitionEnd)
26475                  transitionEnd = transformValues(transitionEnd);
26476              if (target)
26477                  target = transformValues(target);
26478              if (origin)
26479                  origin = transformValues(origin);
26480          }
26481          if (isMounted) {
26482              checkTargetForNewValues(this, target, origin);
26483              const parsed = parseDomVariant(this, target, origin, transitionEnd);
26484              transitionEnd = parsed.transitionEnd;
26485              target = parsed.target;
26486          }
26487          return {
26488              transition,
26489              transitionEnd,
26490              ...target,
26491          };
26492      }
26493  }
26494  
26495  
26496  
26497  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
26498  
26499  
26500  
26501  
26502  
26503  
26504  
26505  
26506  
26507  
26508  function HTMLVisualElement_getComputedStyle(element) {
26509      return window.getComputedStyle(element);
26510  }
26511  class HTMLVisualElement extends DOMVisualElement {
26512      readValueFromInstance(instance, key) {
26513          if (transformProps.has(key)) {
26514              const defaultType = getDefaultValueType(key);
26515              return defaultType ? defaultType.default || 0 : 0;
26516          }
26517          else {
26518              const computedStyle = HTMLVisualElement_getComputedStyle(instance);
26519              const value = (isCSSVariableName(key)
26520                  ? computedStyle.getPropertyValue(key)
26521                  : computedStyle[key]) || 0;
26522              return typeof value === "string" ? value.trim() : value;
26523          }
26524      }
26525      measureInstanceViewportBox(instance, { transformPagePoint }) {
26526          return measureViewportBox(instance, transformPagePoint);
26527      }
26528      build(renderState, latestValues, options, props) {
26529          buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
26530      }
26531      scrapeMotionValuesFromProps(props, prevProps) {
26532          return scrapeMotionValuesFromProps(props, prevProps);
26533      }
26534      handleChildMotionValue() {
26535          if (this.childSubscription) {
26536              this.childSubscription();
26537              delete this.childSubscription;
26538          }
26539          const { children } = this.props;
26540          if (isMotionValue(children)) {
26541              this.childSubscription = children.on("change", (latest) => {
26542                  if (this.current)
26543                      this.current.textContent = `$latest}`;
26544              });
26545          }
26546      }
26547      renderInstance(instance, renderState, styleProp, projection) {
26548          renderHTML(instance, renderState, styleProp, projection);
26549      }
26550  }
26551  
26552  
26553  
26554  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
26555  
26556  
26557  
26558  
26559  
26560  
26561  
26562  
26563  
26564  
26565  
26566  class SVGVisualElement extends DOMVisualElement {
26567      constructor() {
26568          super(...arguments);
26569          this.isSVGTag = false;
26570      }
26571      getBaseTargetFromProps(props, key) {
26572          return props[key];
26573      }
26574      readValueFromInstance(instance, key) {
26575          if (transformProps.has(key)) {
26576              const defaultType = getDefaultValueType(key);
26577              return defaultType ? defaultType.default || 0 : 0;
26578          }
26579          key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
26580          return instance.getAttribute(key);
26581      }
26582      measureInstanceViewportBox() {
26583          return createBox();
26584      }
26585      scrapeMotionValuesFromProps(props, prevProps) {
26586          return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps);
26587      }
26588      build(renderState, latestValues, options, props) {
26589          buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
26590      }
26591      renderInstance(instance, renderState, styleProp, projection) {
26592          renderSVG(instance, renderState, styleProp, projection);
26593      }
26594      mount(instance) {
26595          this.isSVGTag = isSVGTag(instance.tagName);
26596          super.mount(instance);
26597      }
26598  }
26599  
26600  
26601  
26602  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
26603  
26604  
26605  
26606  
26607  const create_visual_element_createDomVisualElement = (Component, options) => {
26608      return isSVGComponent(Component)
26609          ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
26610          : new HTMLVisualElement(options, { enableHardwareAcceleration: true });
26611  };
26612  
26613  
26614  
26615  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout.mjs
26616  
26617  
26618  
26619  const layout = {
26620      layout: {
26621          ProjectionNode: HTMLProjectionNode,
26622          MeasureLayout: MeasureLayout,
26623      },
26624  };
26625  
26626  
26627  
26628  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion.mjs
26629  
26630  
26631  
26632  
26633  
26634  
26635  
26636  
26637  
26638  const preloadedFeatures = {
26639      ...animations,
26640      ...gestureAnimations,
26641      ...drag,
26642      ...layout,
26643  };
26644  /**
26645   * HTML & SVG components, optimised for use with gestures and animation. These can be used as
26646   * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
26647   *
26648   * @public
26649   */
26650  const motion = /*@__PURE__*/ createMotionProxy((Component, config) => create_config_createDomMotionConfig(Component, config, preloadedFeatures, create_visual_element_createDomVisualElement));
26651  /**
26652   * Create a DOM `motion` component with the provided string. This is primarily intended
26653   * as a full alternative to `motion` for consumers who have to support environments that don't
26654   * support `Proxy`.
26655   *
26656   * ```javascript
26657   * import { createDomMotionComponent } from "framer-motion"
26658   *
26659   * const motion = {
26660   *   div: createDomMotionComponent('div')
26661   * }
26662   * ```
26663   *
26664   * @public
26665   */
26666  function createDomMotionComponent(key) {
26667      return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));
26668  }
26669  
26670  
26671  
26672  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
26673  
26674  
26675  
26676  function useIsMounted() {
26677      const isMounted = (0,external_React_.useRef)(false);
26678      useIsomorphicLayoutEffect(() => {
26679          isMounted.current = true;
26680          return () => {
26681              isMounted.current = false;
26682          };
26683      }, []);
26684      return isMounted;
26685  }
26686  
26687  
26688  
26689  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-force-update.mjs
26690  
26691  
26692  
26693  
26694  function use_force_update_useForceUpdate() {
26695      const isMounted = useIsMounted();
26696      const [forcedRenderCount, setForcedRenderCount] = (0,external_React_.useState)(0);
26697      const forceRender = (0,external_React_.useCallback)(() => {
26698          isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
26699      }, [forcedRenderCount]);
26700      /**
26701       * Defer this to the end of the next animation frame in case there are multiple
26702       * synchronous calls.
26703       */
26704      const deferredForceRender = (0,external_React_.useCallback)(() => frame_frame.postRender(forceRender), [forceRender]);
26705      return [deferredForceRender, forcedRenderCount];
26706  }
26707  
26708  
26709  
26710  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
26711  
26712  
26713  
26714  /**
26715   * Measurement functionality has to be within a separate component
26716   * to leverage snapshot lifecycle.
26717   */
26718  class PopChildMeasure extends external_React_.Component {
26719      getSnapshotBeforeUpdate(prevProps) {
26720          const element = this.props.childRef.current;
26721          if (element && prevProps.isPresent && !this.props.isPresent) {
26722              const size = this.props.sizeRef.current;
26723              size.height = element.offsetHeight || 0;
26724              size.width = element.offsetWidth || 0;
26725              size.top = element.offsetTop;
26726              size.left = element.offsetLeft;
26727          }
26728          return null;
26729      }
26730      /**
26731       * Required with getSnapshotBeforeUpdate to stop React complaining.
26732       */
26733      componentDidUpdate() { }
26734      render() {
26735          return this.props.children;
26736      }
26737  }
26738  function PopChild({ children, isPresent }) {
26739      const id = (0,external_React_.useId)();
26740      const ref = (0,external_React_.useRef)(null);
26741      const size = (0,external_React_.useRef)({
26742          width: 0,
26743          height: 0,
26744          top: 0,
26745          left: 0,
26746      });
26747      /**
26748       * We create and inject a style block so we can apply this explicit
26749       * sizing in a non-destructive manner by just deleting the style block.
26750       *
26751       * We can't apply size via render as the measurement happens
26752       * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
26753       * styles directly on the DOM node, we might be overwriting
26754       * styles set via the style prop.
26755       */
26756      (0,external_React_.useInsertionEffect)(() => {
26757          const { width, height, top, left } = size.current;
26758          if (isPresent || !ref.current || !width || !height)
26759              return;
26760          ref.current.dataset.motionPopId = id;
26761          const style = document.createElement("style");
26762          document.head.appendChild(style);
26763          if (style.sheet) {
26764              style.sheet.insertRule(`
26765            [data-motion-pop-id="$id}"] {
26766              position: absolute !important;
26767              width: $width}px !important;
26768              height: $height}px !important;
26769              top: $top}px !important;
26770              left: $left}px !important;
26771            }
26772          `);
26773          }
26774          return () => {
26775              document.head.removeChild(style);
26776          };
26777      }, [isPresent]);
26778      return (external_React_.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, external_React_.cloneElement(children, { ref })));
26779  }
26780  
26781  
26782  
26783  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
26784  
26785  
26786  
26787  
26788  
26789  
26790  const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
26791      const presenceChildren = useConstant(newChildrenMap);
26792      const id = (0,external_React_.useId)();
26793      const context = (0,external_React_.useMemo)(() => ({
26794          id,
26795          initial,
26796          isPresent,
26797          custom,
26798          onExitComplete: (childId) => {
26799              presenceChildren.set(childId, true);
26800              for (const isComplete of presenceChildren.values()) {
26801                  if (!isComplete)
26802                      return; // can stop searching when any is incomplete
26803              }
26804              onExitComplete && onExitComplete();
26805          },
26806          register: (childId) => {
26807              presenceChildren.set(childId, false);
26808              return () => presenceChildren.delete(childId);
26809          },
26810      }), 
26811      /**
26812       * If the presence of a child affects the layout of the components around it,
26813       * we want to make a new context value to ensure they get re-rendered
26814       * so they can detect that layout change.
26815       */
26816      presenceAffectsLayout ? undefined : [isPresent]);
26817      (0,external_React_.useMemo)(() => {
26818          presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
26819      }, [isPresent]);
26820      /**
26821       * If there's no `motion` components to fire exit animations, we want to remove this
26822       * component immediately.
26823       */
26824      external_React_.useEffect(() => {
26825          !isPresent &&
26826              !presenceChildren.size &&
26827              onExitComplete &&
26828              onExitComplete();
26829      }, [isPresent]);
26830      if (mode === "popLayout") {
26831          children = external_React_.createElement(PopChild, { isPresent: isPresent }, children);
26832      }
26833      return (external_React_.createElement(PresenceContext_PresenceContext.Provider, { value: context }, children));
26834  };
26835  function newChildrenMap() {
26836      return new Map();
26837  }
26838  
26839  
26840  
26841  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
26842  
26843  
26844  function useUnmountEffect(callback) {
26845      return (0,external_React_.useEffect)(() => () => callback(), []);
26846  }
26847  
26848  
26849  
26850  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
26851  
26852  
26853  
26854  
26855  
26856  
26857  
26858  
26859  
26860  
26861  const getChildKey = (child) => child.key || "";
26862  function updateChildLookup(children, allChildren) {
26863      children.forEach((child) => {
26864          const key = getChildKey(child);
26865          allChildren.set(key, child);
26866      });
26867  }
26868  function onlyElements(children) {
26869      const filtered = [];
26870      // We use forEach here instead of map as map mutates the component key by preprending `.$`
26871      external_React_.Children.forEach(children, (child) => {
26872          if ((0,external_React_.isValidElement)(child))
26873              filtered.push(child);
26874      });
26875      return filtered;
26876  }
26877  /**
26878   * `AnimatePresence` enables the animation of components that have been removed from the tree.
26879   *
26880   * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
26881   *
26882   * Any `motion` components that have an `exit` property defined will animate out when removed from
26883   * the tree.
26884   *
26885   * ```jsx
26886   * import { motion, AnimatePresence } from 'framer-motion'
26887   *
26888   * export const Items = ({ items }) => (
26889   *   <AnimatePresence>
26890   *     {items.map(item => (
26891   *       <motion.div
26892   *         key={item.id}
26893   *         initial={{ opacity: 0 }}
26894   *         animate={{ opacity: 1 }}
26895   *         exit={{ opacity: 0 }}
26896   *       />
26897   *     ))}
26898   *   </AnimatePresence>
26899   * )
26900   * ```
26901   *
26902   * You can sequence exit animations throughout a tree using variants.
26903   *
26904   * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
26905   * once all `motion` components have finished animating out. Likewise, any components using
26906   * `usePresence` all need to call `safeToRemove`.
26907   *
26908   * @public
26909   */
26910  const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
26911      errors_invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
26912      // We want to force a re-render once all exiting animations have finished. We
26913      // either use a local forceRender function, or one from a parent context if it exists.
26914      const forceRender = (0,external_React_.useContext)(LayoutGroupContext).forceRender || use_force_update_useForceUpdate()[0];
26915      const isMounted = useIsMounted();
26916      // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
26917      const filteredChildren = onlyElements(children);
26918      let childrenToRender = filteredChildren;
26919      const exitingChildren = (0,external_React_.useRef)(new Map()).current;
26920      // Keep a living record of the children we're actually rendering so we
26921      // can diff to figure out which are entering and exiting
26922      const presentChildren = (0,external_React_.useRef)(childrenToRender);
26923      // A lookup table to quickly reference components by key
26924      const allChildren = (0,external_React_.useRef)(new Map()).current;
26925      // If this is the initial component render, just deal with logic surrounding whether
26926      // we play onMount animations or not.
26927      const isInitialRender = (0,external_React_.useRef)(true);
26928      useIsomorphicLayoutEffect(() => {
26929          isInitialRender.current = false;
26930          updateChildLookup(filteredChildren, allChildren);
26931          presentChildren.current = childrenToRender;
26932      });
26933      useUnmountEffect(() => {
26934          isInitialRender.current = true;
26935          allChildren.clear();
26936          exitingChildren.clear();
26937      });
26938      if (isInitialRender.current) {
26939          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)))));
26940      }
26941      // If this is a subsequent render, deal with entering and exiting children
26942      childrenToRender = [...childrenToRender];
26943      // Diff the keys of the currently-present and target children to update our
26944      // exiting list.
26945      const presentKeys = presentChildren.current.map(getChildKey);
26946      const targetKeys = filteredChildren.map(getChildKey);
26947      // Diff the present children with our target children and mark those that are exiting
26948      const numPresent = presentKeys.length;
26949      for (let i = 0; i < numPresent; i++) {
26950          const key = presentKeys[i];
26951          if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
26952              exitingChildren.set(key, undefined);
26953          }
26954      }
26955      // If we currently have exiting children, and we're deferring rendering incoming children
26956      // until after all current children have exiting, empty the childrenToRender array
26957      if (mode === "wait" && exitingChildren.size) {
26958          childrenToRender = [];
26959      }
26960      // Loop through all currently exiting components and clone them to overwrite `animate`
26961      // with any `exit` prop they might have defined.
26962      exitingChildren.forEach((component, key) => {
26963          // If this component is actually entering again, early return
26964          if (targetKeys.indexOf(key) !== -1)
26965              return;
26966          const child = allChildren.get(key);
26967          if (!child)
26968              return;
26969          const insertionIndex = presentKeys.indexOf(key);
26970          let exitingComponent = component;
26971          if (!exitingComponent) {
26972              const onExit = () => {
26973                  allChildren.delete(key);
26974                  exitingChildren.delete(key);
26975                  // Remove this child from the present children
26976                  const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
26977                  presentChildren.current.splice(removeIndex, 1);
26978                  // Defer re-rendering until all exiting children have indeed left
26979                  if (!exitingChildren.size) {
26980                      presentChildren.current = filteredChildren;
26981                      if (isMounted.current === false)
26982                          return;
26983                      forceRender();
26984                      onExitComplete && onExitComplete();
26985                  }
26986              };
26987              exitingComponent = (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
26988              exitingChildren.set(key, exitingComponent);
26989          }
26990          childrenToRender.splice(insertionIndex, 0, exitingComponent);
26991      });
26992      // Add `MotionContext` even to children that don't need it to ensure we're rendering
26993      // the same tree between renders
26994      childrenToRender = childrenToRender.map((child) => {
26995          const key = child.key;
26996          return exitingChildren.has(key) ? (child) : (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
26997      });
26998      if (false) {}
26999      return (external_React_.createElement(external_React_.Fragment, null, exitingChildren.size
27000          ? childrenToRender
27001          : childrenToRender.map((child) => (0,external_React_.cloneElement)(child))));
27002  };
27003  
27004  
27005  
27006  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/use-responsive-value.js
27007  /**
27008   * WordPress dependencies
27009   */
27010  
27011  const breakpoints = ['40em', '52em', '64em'];
27012  const useBreakpointIndex = (options = {}) => {
27013    const {
27014      defaultIndex = 0
27015    } = options;
27016    if (typeof defaultIndex !== 'number') {
27017      throw new TypeError(`Default breakpoint index should be a number. Got: $defaultIndex}, $typeof defaultIndex}`);
27018    } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
27019      throw new RangeError(`Default breakpoint index out of range. Theme has $breakpoints.length} breakpoints, got index $defaultIndex}`);
27020    }
27021    const [value, setValue] = (0,external_wp_element_namespaceObject.useState)(defaultIndex);
27022    (0,external_wp_element_namespaceObject.useEffect)(() => {
27023      const getIndex = () => breakpoints.filter(bp => {
27024        return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: $bp})`).matches : false;
27025      }).length;
27026      const onResize = () => {
27027        const newValue = getIndex();
27028        if (value !== newValue) {
27029          setValue(newValue);
27030        }
27031      };
27032      onResize();
27033      if (typeof window !== 'undefined') {
27034        window.addEventListener('resize', onResize);
27035      }
27036      return () => {
27037        if (typeof window !== 'undefined') {
27038          window.removeEventListener('resize', onResize);
27039        }
27040      };
27041    }, [value]);
27042    return value;
27043  };
27044  function useResponsiveValue(values, options = {}) {
27045    const index = useBreakpointIndex(options);
27046  
27047    // Allow calling the function with a "normal" value without having to check on the outside.
27048    if (!Array.isArray(values) && typeof values !== 'function') return values;
27049    const array = values || [];
27050  
27051    /* eslint-disable jsdoc/no-undefined-types */
27052    return /** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */
27053    index >= array.length ? array.length - 1 : index];
27054  }
27055  
27056  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/space.js
27057  /**
27058   * The argument value for the `space()` utility function.
27059   *
27060   * When this is a number or a numeric string, it will be interpreted as a
27061   * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
27062   *
27063   * Otherwise, it will be interpreted as a literal CSS length value. For example,
27064   * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
27065   */
27066  
27067  const GRID_BASE = '4px';
27068  
27069  /**
27070   * A function that handles numbers, numeric strings, and unit values.
27071   *
27072   * When given a number or a numeric string, it will return the grid-based
27073   * value as a factor of GRID_BASE, defined above.
27074   *
27075   * When given a unit value or one of the named CSS values like `auto`,
27076   * it will simply return the value back.
27077   *
27078   * @param value A number, numeric string, or a unit value.
27079   */
27080  function space(value) {
27081    if (typeof value === 'undefined') {
27082      return undefined;
27083    }
27084  
27085    // Handle empty strings, if it's the number 0 this still works.
27086    if (!value) {
27087      return '0';
27088    }
27089    const asInt = typeof value === 'number' ? value : Number(value);
27090  
27091    // 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.
27092    if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
27093      return value.toString();
27094    }
27095    return `calc($GRID_BASE} * $value})`;
27096  }
27097  
27098  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/styles.js
27099  function 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)."; }
27100  /**
27101   * External dependencies
27102   */
27103  
27104  const Flex =  true ? {
27105    name: "zjik7",
27106    styles: "display:flex"
27107  } : 0;
27108  const Item =  true ? {
27109    name: "qgaee5",
27110    styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0"
27111  } : 0;
27112  const block =  true ? {
27113    name: "82a6rk",
27114    styles: "flex:1"
27115  } : 0;
27116  
27117  /**
27118   * Workaround to optimize DOM rendering.
27119   * We'll enhance alignment with naive parent flex assumptions.
27120   *
27121   * Trade-off:
27122   * Far less DOM less. However, UI rendering is not as reliable.
27123   */
27124  
27125  /**
27126   * Improves stability of width/height rendering.
27127   * https://github.com/ItsJonQ/g2/pull/149
27128   */
27129  const ItemsColumn =  true ? {
27130    name: "13nosa1",
27131    styles: ">*{min-height:0;}"
27132  } : 0;
27133  const ItemsRow =  true ? {
27134    name: "1pwxzk4",
27135    styles: ">*{min-width:0;}"
27136  } : 0;
27137  
27138  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/hook.js
27139  /**
27140   * External dependencies
27141   */
27142  
27143  
27144  /**
27145   * WordPress dependencies
27146   */
27147  
27148  
27149  
27150  /**
27151   * Internal dependencies
27152   */
27153  
27154  
27155  
27156  
27157  
27158  
27159  function useDeprecatedProps(props) {
27160    const {
27161      isReversed,
27162      ...otherProps
27163    } = props;
27164    if (typeof isReversed !== 'undefined') {
27165      external_wp_deprecated_default()('Flex isReversed', {
27166        alternative: 'Flex direction="row-reverse" or "column-reverse"',
27167        since: '5.9'
27168      });
27169      return {
27170        ...otherProps,
27171        direction: isReversed ? 'row-reverse' : 'row'
27172      };
27173    }
27174    return otherProps;
27175  }
27176  function useFlex(props) {
27177    const {
27178      align,
27179      className,
27180      direction: directionProp = 'row',
27181      expanded = true,
27182      gap = 2,
27183      justify = 'space-between',
27184      wrap = false,
27185      ...otherProps
27186    } = useContextSystem(useDeprecatedProps(props), 'Flex');
27187    const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp];
27188    const direction = useResponsiveValue(directionAsArray);
27189    const isColumn = typeof direction === 'string' && !!direction.includes('column');
27190    const cx = useCx();
27191    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
27192      const base = /*#__PURE__*/emotion_react_browser_esm_css({
27193        alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center',
27194        flexDirection: direction,
27195        flexWrap: wrap ? 'wrap' : undefined,
27196        gap: space(gap),
27197        justifyContent: justify,
27198        height: isColumn && expanded ? '100%' : undefined,
27199        width: !isColumn && expanded ? '100%' : undefined
27200      },  true ? "" : 0,  true ? "" : 0);
27201      return cx(Flex, base, isColumn ? ItemsColumn : ItemsRow, className);
27202    }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);
27203    return {
27204      ...otherProps,
27205      className: classes,
27206      isColumn
27207    };
27208  }
27209  
27210  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/context.js
27211  /**
27212   * WordPress dependencies
27213   */
27214  
27215  const FlexContext = (0,external_wp_element_namespaceObject.createContext)({
27216    flexItemDisplay: undefined
27217  });
27218  const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext);
27219  
27220  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/component.js
27221  
27222  /**
27223   * External dependencies
27224   */
27225  
27226  /**
27227   * Internal dependencies
27228   */
27229  
27230  
27231  
27232  
27233  
27234  function UnconnectedFlex(props, forwardedRef) {
27235    const {
27236      children,
27237      isColumn,
27238      ...otherProps
27239    } = useFlex(props);
27240    return (0,external_React_.createElement)(FlexContext.Provider, {
27241      value: {
27242        flexItemDisplay: isColumn ? 'block' : undefined
27243      }
27244    }, (0,external_React_.createElement)(component, {
27245      ...otherProps,
27246      ref: forwardedRef
27247    }, children));
27248  }
27249  
27250  /**
27251   * `Flex` is a primitive layout component that adaptively aligns child content
27252   * horizontally or vertically. `Flex` powers components like `HStack` and
27253   * `VStack`.
27254   *
27255   * `Flex` is used with any of its two sub-components, `FlexItem` and
27256   * `FlexBlock`.
27257   *
27258   * ```jsx
27259   * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
27260   *
27261   * function Example() {
27262   *   return (
27263   *     <Flex>
27264   *       <FlexItem>
27265   *         <p>Code</p>
27266   *       </FlexItem>
27267   *       <FlexBlock>
27268   *         <p>Poetry</p>
27269   *       </FlexBlock>
27270   *     </Flex>
27271   *   );
27272   * }
27273   * ```
27274   */
27275  const component_Flex = contextConnect(UnconnectedFlex, 'Flex');
27276  /* harmony default export */ const flex_component = (component_Flex);
27277  
27278  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/hook.js
27279  /**
27280   * External dependencies
27281   */
27282  
27283  
27284  
27285  /**
27286   * Internal dependencies
27287   */
27288  
27289  
27290  
27291  
27292  
27293  function useFlexItem(props) {
27294    const {
27295      className,
27296      display: displayProp,
27297      isBlock = false,
27298      ...otherProps
27299    } = useContextSystem(props, 'FlexItem');
27300    const sx = {};
27301    const contextDisplay = useFlexContext().flexItemDisplay;
27302    sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
27303      display: displayProp || contextDisplay
27304    },  true ? "" : 0,  true ? "" : 0);
27305    const cx = useCx();
27306    const classes = cx(Item, sx.Base, isBlock && block, className);
27307    return {
27308      ...otherProps,
27309      className: classes
27310    };
27311  }
27312  
27313  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/hook.js
27314  /**
27315   * Internal dependencies
27316   */
27317  
27318  
27319  
27320  function useFlexBlock(props) {
27321    const otherProps = useContextSystem(props, 'FlexBlock');
27322    const flexItemProps = useFlexItem({
27323      isBlock: true,
27324      ...otherProps
27325    });
27326    return flexItemProps;
27327  }
27328  
27329  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js
27330  
27331  /**
27332   * External dependencies
27333   */
27334  
27335  /**
27336   * Internal dependencies
27337   */
27338  
27339  
27340  
27341  
27342  function UnconnectedFlexBlock(props, forwardedRef) {
27343    const flexBlockProps = useFlexBlock(props);
27344    return (0,external_React_.createElement)(component, {
27345      ...flexBlockProps,
27346      ref: forwardedRef
27347    });
27348  }
27349  
27350  /**
27351   * `FlexBlock` is a primitive layout component that adaptively resizes content
27352   * within layout containers like `Flex`.
27353   *
27354   * ```jsx
27355   * import { Flex, FlexBlock } from '@wordpress/components';
27356   *
27357   * function Example() {
27358   *   return (
27359   *     <Flex>
27360   *       <FlexBlock>...</FlexBlock>
27361   *     </Flex>
27362   *   );
27363   * }
27364   * ```
27365   */
27366  const FlexBlock = contextConnect(UnconnectedFlexBlock, 'FlexBlock');
27367  /* harmony default export */ const flex_block_component = (FlexBlock);
27368  
27369  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/rtl.js
27370  /**
27371   * External dependencies
27372   */
27373  
27374  
27375  /**
27376   * WordPress dependencies
27377   */
27378  
27379  const LOWER_LEFT_REGEXP = new RegExp(/-left/g);
27380  const LOWER_RIGHT_REGEXP = new RegExp(/-right/g);
27381  const UPPER_LEFT_REGEXP = new RegExp(/Left/g);
27382  const UPPER_RIGHT_REGEXP = new RegExp(/Right/g);
27383  
27384  /**
27385   * Flips a CSS property from left <-> right.
27386   *
27387   * @param {string} key The CSS property name.
27388   *
27389   * @return {string} The flipped CSS property name, if applicable.
27390   */
27391  function getConvertedKey(key) {
27392    if (key === 'left') {
27393      return 'right';
27394    }
27395    if (key === 'right') {
27396      return 'left';
27397    }
27398    if (LOWER_LEFT_REGEXP.test(key)) {
27399      return key.replace(LOWER_LEFT_REGEXP, '-right');
27400    }
27401    if (LOWER_RIGHT_REGEXP.test(key)) {
27402      return key.replace(LOWER_RIGHT_REGEXP, '-left');
27403    }
27404    if (UPPER_LEFT_REGEXP.test(key)) {
27405      return key.replace(UPPER_LEFT_REGEXP, 'Right');
27406    }
27407    if (UPPER_RIGHT_REGEXP.test(key)) {
27408      return key.replace(UPPER_RIGHT_REGEXP, 'Left');
27409    }
27410    return key;
27411  }
27412  
27413  /**
27414   * An incredibly basic ltr -> rtl converter for style properties
27415   *
27416   * @param {import('react').CSSProperties} ltrStyles
27417   *
27418   * @return {import('react').CSSProperties} Converted ltr -> rtl styles
27419   */
27420  const convertLTRToRTL = (ltrStyles = {}) => {
27421    return Object.fromEntries(Object.entries(ltrStyles).map(([key, value]) => [getConvertedKey(key), value]));
27422  };
27423  
27424  /**
27425   * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects.
27426   *
27427   * @param {import('react').CSSProperties} ltrStyles   Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
27428   * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided.
27429   *
27430   * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
27431   */
27432  function rtl(ltrStyles = {}, rtlStyles) {
27433    return () => {
27434      if (rtlStyles) {
27435        // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
27436        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);
27437      }
27438  
27439      // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css
27440      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);
27441    };
27442  }
27443  
27444  /**
27445   * Call this in the `useMemo` dependency array to ensure that subsequent renders will
27446   * cause rtl styles to update based on the `isRTL` return value even if all other dependencies
27447   * remain the same.
27448   *
27449   * @example
27450   * const styles = useMemo( () => {
27451   *   return css`
27452   *     ${ rtl( { marginRight: '10px' } ) }
27453   *   `;
27454   * }, [ rtl.watch() ] );
27455   */
27456  rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)();
27457  
27458  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/hook.js
27459  /**
27460   * External dependencies
27461   */
27462  
27463  
27464  /**
27465   * Internal dependencies
27466   */
27467  
27468  
27469  
27470  
27471  const isDefined = o => typeof o !== 'undefined' && o !== null;
27472  function useSpacer(props) {
27473    const {
27474      className,
27475      margin,
27476      marginBottom = 2,
27477      marginLeft,
27478      marginRight,
27479      marginTop,
27480      marginX,
27481      marginY,
27482      padding,
27483      paddingBottom,
27484      paddingLeft,
27485      paddingRight,
27486      paddingTop,
27487      paddingX,
27488      paddingY,
27489      ...otherProps
27490    } = useContextSystem(props, 'Spacer');
27491    const cx = useCx();
27492    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({
27493      marginLeft: space(marginLeft)
27494    })(), isDefined(marginRight) && rtl({
27495      marginRight: space(marginRight)
27496    })(), 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({
27497      paddingLeft: space(paddingLeft)
27498    })(), isDefined(paddingRight) && rtl({
27499      paddingRight: space(paddingRight)
27500    })(), className);
27501    return {
27502      ...otherProps,
27503      className: classes
27504    };
27505  }
27506  
27507  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/component.js
27508  
27509  /**
27510   * External dependencies
27511   */
27512  
27513  /**
27514   * Internal dependencies
27515   */
27516  
27517  
27518  
27519  
27520  function UnconnectedSpacer(props, forwardedRef) {
27521    const spacerProps = useSpacer(props);
27522    return (0,external_React_.createElement)(component, {
27523      ...spacerProps,
27524      ref: forwardedRef
27525    });
27526  }
27527  
27528  /**
27529   * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
27530   *
27531   * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props
27532   * can either be a number (which will act as a multiplier to the library's grid system base of 4px),
27533   * or a literal CSS value string.
27534   *
27535   * ```jsx
27536   * import { Spacer } from `@wordpress/components`
27537   *
27538   * function Example() {
27539   *   return (
27540   *     <View>
27541   *       <Spacer>
27542   *         <Heading>WordPress.org</Heading>
27543   *       </Spacer>
27544   *       <Text>
27545   *         Code is Poetry
27546   *       </Text>
27547   *     </View>
27548   *   );
27549   * }
27550   * ```
27551   */
27552  const Spacer = contextConnect(UnconnectedSpacer, 'Spacer');
27553  /* harmony default export */ const spacer_component = (Spacer);
27554  
27555  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js
27556  
27557  /**
27558   * WordPress dependencies
27559   */
27560  
27561  const plus = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
27562    xmlns: "http://www.w3.org/2000/svg",
27563    viewBox: "0 0 24 24"
27564  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
27565    d: "M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
27566  }));
27567  /* harmony default export */ const library_plus = (plus);
27568  
27569  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/reset.js
27570  
27571  /**
27572   * WordPress dependencies
27573   */
27574  
27575  const reset_reset = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
27576    xmlns: "http://www.w3.org/2000/svg",
27577    viewBox: "0 0 24 24"
27578  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
27579    d: "M7 11.5h10V13H7z"
27580  }));
27581  /* harmony default export */ const library_reset = (reset_reset);
27582  
27583  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js
27584  
27585  /**
27586   * External dependencies
27587   */
27588  
27589  /**
27590   * Internal dependencies
27591   */
27592  
27593  
27594  
27595  
27596  function UnconnectedFlexItem(props, forwardedRef) {
27597    const flexItemProps = useFlexItem(props);
27598    return (0,external_React_.createElement)(component, {
27599      ...flexItemProps,
27600      ref: forwardedRef
27601    });
27602  }
27603  
27604  /**
27605   * `FlexItem` is a primitive layout component that aligns content within layout
27606   * containers like `Flex`.
27607   *
27608   * ```jsx
27609   * import { Flex, FlexItem } from '@wordpress/components';
27610   *
27611   * function Example() {
27612   *   return (
27613   *     <Flex>
27614   *       <FlexItem>...</FlexItem>
27615   *     </Flex>
27616   *   );
27617   * }
27618   * ```
27619   */
27620  const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem');
27621  /* harmony default export */ const flex_item_component = (FlexItem);
27622  
27623  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/styles.js
27624  function 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)."; }
27625  /**
27626   * External dependencies
27627   */
27628  
27629  const Truncate =  true ? {
27630    name: "hdknak",
27631    styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
27632  } : 0;
27633  
27634  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/values.js
27635  /* eslint-disable jsdoc/valid-types */
27636  /**
27637   * Determines if a value is null or undefined.
27638   *
27639   * @template T
27640   *
27641   * @param {T} value The value to check.
27642   * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.
27643   */
27644  function isValueDefined(value) {
27645    return value !== undefined && value !== null;
27646  }
27647  /* eslint-enable jsdoc/valid-types */
27648  
27649  /* eslint-disable jsdoc/valid-types */
27650  /**
27651   * Determines if a value is empty, null, or undefined.
27652   *
27653   * @param {string | number | null | undefined} value The value to check.
27654   * @return {value is ("" | null | undefined)} Whether value is empty.
27655   */
27656  function isValueEmpty(value) {
27657    const isEmptyString = value === '';
27658    return !isValueDefined(value) || isEmptyString;
27659  }
27660  /* eslint-enable jsdoc/valid-types */
27661  
27662  /**
27663   * Get the first defined/non-null value from an array.
27664   *
27665   * @template T
27666   *
27667   * @param {Array<T | null | undefined>} values        Values to derive from.
27668   * @param {T}                           fallbackValue Fallback value if there are no defined values.
27669   * @return {T} A defined value or the fallback value.
27670   */
27671  function getDefinedValue(values = [], fallbackValue) {
27672    var _values$find;
27673    return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue;
27674  }
27675  
27676  /**
27677   * Converts a string to a number.
27678   *
27679   * @param {string} value
27680   * @return {number} String as a number.
27681   */
27682  const stringToNumber = value => {
27683    return parseFloat(value);
27684  };
27685  
27686  /**
27687   * Regardless of the input being a string or a number, returns a number.
27688   *
27689   * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
27690   *
27691   * @param {string | number} value
27692   * @return {number} The parsed number.
27693   */
27694  const ensureNumber = value => {
27695    return typeof value === 'string' ? stringToNumber(value) : value;
27696  };
27697  
27698  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/utils.js
27699  /**
27700   * Internal dependencies
27701   */
27702  
27703  const TRUNCATE_ELLIPSIS = '…';
27704  const TRUNCATE_TYPE = {
27705    auto: 'auto',
27706    head: 'head',
27707    middle: 'middle',
27708    tail: 'tail',
27709    none: 'none'
27710  };
27711  const TRUNCATE_DEFAULT_PROPS = {
27712    ellipsis: TRUNCATE_ELLIPSIS,
27713    ellipsizeMode: TRUNCATE_TYPE.auto,
27714    limit: 0,
27715    numberOfLines: 0
27716  };
27717  
27718  // Source
27719  // https://github.com/kahwee/truncate-middle
27720  function truncateMiddle(word, headLength, tailLength, ellipsis) {
27721    if (typeof word !== 'string') {
27722      return '';
27723    }
27724    const wordLength = word.length;
27725    // Setting default values
27726    // eslint-disable-next-line no-bitwise
27727    const frontLength = ~~headLength; // Will cast to integer
27728    // eslint-disable-next-line no-bitwise
27729    const backLength = ~~tailLength;
27730    /* istanbul ignore next */
27731    const truncateStr = isValueDefined(ellipsis) ? ellipsis : TRUNCATE_ELLIPSIS;
27732    if (frontLength === 0 && backLength === 0 || frontLength >= wordLength || backLength >= wordLength || frontLength + backLength >= wordLength) {
27733      return word;
27734    } else if (backLength === 0) {
27735      return word.slice(0, frontLength) + truncateStr;
27736    }
27737    return word.slice(0, frontLength) + truncateStr + word.slice(wordLength - backLength);
27738  }
27739  function truncateContent(words = '', props) {
27740    const mergedProps = {
27741      ...TRUNCATE_DEFAULT_PROPS,
27742      ...props
27743    };
27744    const {
27745      ellipsis,
27746      ellipsizeMode,
27747      limit
27748    } = mergedProps;
27749    if (ellipsizeMode === TRUNCATE_TYPE.none) {
27750      return words;
27751    }
27752    let truncateHead;
27753    let truncateTail;
27754    switch (ellipsizeMode) {
27755      case TRUNCATE_TYPE.head:
27756        truncateHead = 0;
27757        truncateTail = limit;
27758        break;
27759      case TRUNCATE_TYPE.middle:
27760        truncateHead = Math.floor(limit / 2);
27761        truncateTail = Math.floor(limit / 2);
27762        break;
27763      default:
27764        truncateHead = limit;
27765        truncateTail = 0;
27766    }
27767    const truncatedContent = ellipsizeMode !== TRUNCATE_TYPE.auto ? truncateMiddle(words, truncateHead, truncateTail, ellipsis) : words;
27768    return truncatedContent;
27769  }
27770  
27771  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/hook.js
27772  /**
27773   * External dependencies
27774   */
27775  
27776  
27777  /**
27778   * WordPress dependencies
27779   */
27780  
27781  
27782  /**
27783   * Internal dependencies
27784   */
27785  
27786  
27787  
27788  
27789  
27790  function useTruncate(props) {
27791    const {
27792      className,
27793      children,
27794      ellipsis = TRUNCATE_ELLIPSIS,
27795      ellipsizeMode = TRUNCATE_TYPE.auto,
27796      limit = 0,
27797      numberOfLines = 0,
27798      ...otherProps
27799    } = useContextSystem(props, 'Truncate');
27800    const cx = useCx();
27801    let childrenAsText;
27802    if (typeof children === 'string') {
27803      childrenAsText = children;
27804    } else if (typeof children === 'number') {
27805      childrenAsText = children.toString();
27806    }
27807    const truncatedContent = childrenAsText ? truncateContent(childrenAsText, {
27808      ellipsis,
27809      ellipsizeMode,
27810      limit,
27811      numberOfLines
27812    }) : children;
27813    const shouldTruncate = !!childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
27814    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
27815      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);
27816      return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && truncateLines, className);
27817    }, [className, cx, numberOfLines, shouldTruncate]);
27818    return {
27819      ...otherProps,
27820      className: classes,
27821      children: truncatedContent
27822    };
27823  }
27824  
27825  ;// CONCATENATED MODULE: ./node_modules/colord/index.mjs
27826  var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})};
27827  
27828  ;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs
27829  /* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])}
27830  
27831  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors.js
27832  /**
27833   * External dependencies
27834   */
27835  
27836  
27837  
27838  
27839  /** @type {HTMLDivElement} */
27840  let colorComputationNode;
27841  k([names]);
27842  
27843  /**
27844   * Generating a CSS compliant rgba() color value.
27845   *
27846   * @param {string} hexValue The hex value to convert to rgba().
27847   * @param {number} alpha    The alpha value for opacity.
27848   * @return {string} The converted rgba() color value.
27849   *
27850   * @example
27851   * rgba( '#000000', 0.5 )
27852   * // rgba(0, 0, 0, 0.5)
27853   */
27854  function colors_rgba(hexValue = '', alpha = 1) {
27855    return colord(hexValue).alpha(alpha).toRgbString();
27856  }
27857  
27858  /**
27859   * @return {HTMLDivElement | undefined} The HTML element for color computation.
27860   */
27861  function getColorComputationNode() {
27862    if (typeof document === 'undefined') return;
27863    if (!colorComputationNode) {
27864      // Create a temporary element for style computation.
27865      const el = document.createElement('div');
27866      el.setAttribute('data-g2-color-computation-node', '');
27867      // Inject for window computed style.
27868      document.body.appendChild(el);
27869      colorComputationNode = el;
27870    }
27871    return colorComputationNode;
27872  }
27873  
27874  /**
27875   * @param {string | unknown} value
27876   *
27877   * @return {boolean} Whether the value is a valid color.
27878   */
27879  function isColor(value) {
27880    if (typeof value !== 'string') return false;
27881    const test = w(value);
27882    return test.isValid();
27883  }
27884  
27885  /**
27886   * Retrieves the computed background color. This is useful for getting the
27887   * value of a CSS variable color.
27888   *
27889   * @param {string | unknown} backgroundColor The background color to compute.
27890   *
27891   * @return {string} The computed background color.
27892   */
27893  function _getComputedBackgroundColor(backgroundColor) {
27894    if (typeof backgroundColor !== 'string') return '';
27895    if (isColor(backgroundColor)) return backgroundColor;
27896    if (!backgroundColor.includes('var(')) return '';
27897    if (typeof document === 'undefined') return '';
27898  
27899    // Attempts to gracefully handle CSS variables color values.
27900    const el = getColorComputationNode();
27901    if (!el) return '';
27902    el.style.background = backgroundColor;
27903    // Grab the style.
27904    const computedColor = window?.getComputedStyle(el).background;
27905    // Reset.
27906    el.style.background = '';
27907    return computedColor || '';
27908  }
27909  const getComputedBackgroundColor = memize(_getComputedBackgroundColor);
27910  
27911  /**
27912   * Get the text shade optimized for readability, based on a background color.
27913   *
27914   * @param {string | unknown} backgroundColor The background color.
27915   *
27916   * @return {string} The optimized text color (black or white).
27917   */
27918  function getOptimalTextColor(backgroundColor) {
27919    const background = getComputedBackgroundColor(backgroundColor);
27920    return w(background).isLight() ? '#000000' : '#ffffff';
27921  }
27922  
27923  /**
27924   * Get the text shade optimized for readability, based on a background color.
27925   *
27926   * @param {string | unknown} backgroundColor The background color.
27927   *
27928   * @return {string} The optimized text shade (dark or light).
27929   */
27930  function getOptimalTextShade(backgroundColor) {
27931    const result = getOptimalTextColor(backgroundColor);
27932    return result === '#000000' ? 'dark' : 'light';
27933  }
27934  
27935  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/config-values.js
27936  /**
27937   * Internal dependencies
27938   */
27939  
27940  
27941  const CONTROL_HEIGHT = '36px';
27942  const CONTROL_PADDING_X = '12px';
27943  const CONTROL_PROPS = {
27944    controlSurfaceColor: COLORS.white,
27945    controlTextActiveColor: COLORS.theme.accent,
27946    controlPaddingX: CONTROL_PADDING_X,
27947    controlPaddingXLarge: `calc($CONTROL_PADDING_X} * 1.3334)`,
27948    controlPaddingXSmall: `calc($CONTROL_PADDING_X} / 1.3334)`,
27949    controlBackgroundColor: COLORS.white,
27950    controlBorderRadius: '2px',
27951    controlBoxShadow: 'transparent',
27952    controlBoxShadowFocus: `0 0 0 0.5px $COLORS.theme.accent}`,
27953    controlDestructiveBorderColor: COLORS.alert.red,
27954    controlHeight: CONTROL_HEIGHT,
27955    controlHeightXSmall: `calc( $CONTROL_HEIGHT} * 0.6 )`,
27956    controlHeightSmall: `calc( $CONTROL_HEIGHT} * 0.8 )`,
27957    controlHeightLarge: `calc( $CONTROL_HEIGHT} * 1.2 )`,
27958    controlHeightXLarge: `calc( $CONTROL_HEIGHT} * 1.4 )`
27959  };
27960  const TOGGLE_GROUP_CONTROL_PROPS = {
27961    toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
27962    toggleGroupControlBorderColor: COLORS.ui.border,
27963    toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
27964    toggleGroupControlBackdropBorderColor: COLORS.ui.border,
27965    toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
27966  };
27967  
27968  // Using Object.assign to avoid creating circular references when emitting
27969  // TypeScript type declarations.
27970  /* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
27971    colorDivider: 'rgba(0, 0, 0, 0.1)',
27972    colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
27973    colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
27974    colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
27975    elevationIntensity: 1,
27976    radiusBlockUi: '2px',
27977    borderWidth: '1px',
27978    borderWidthFocus: '1.5px',
27979    borderWidthTab: '4px',
27980    spinnerSize: 16,
27981    fontSize: '13px',
27982    fontSizeH1: 'calc(2.44 * 13px)',
27983    fontSizeH2: 'calc(1.95 * 13px)',
27984    fontSizeH3: 'calc(1.56 * 13px)',
27985    fontSizeH4: 'calc(1.25 * 13px)',
27986    fontSizeH5: '13px',
27987    fontSizeH6: 'calc(0.8 * 13px)',
27988    fontSizeInputMobile: '16px',
27989    fontSizeMobile: '15px',
27990    fontSizeSmall: 'calc(0.92 * 13px)',
27991    fontSizeXSmall: 'calc(0.75 * 13px)',
27992    fontLineHeightBase: '1.2',
27993    fontWeight: 'normal',
27994    fontWeightHeading: '600',
27995    gridBase: '4px',
27996    cardBorderRadius: '2px',
27997    cardPaddingXSmall: `$space(2)}`,
27998    cardPaddingSmall: `$space(4)}`,
27999    cardPaddingMedium: `$space(4)} $space(6)}`,
28000    cardPaddingLarge: `$space(6)} $space(8)}`,
28001    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)`,
28002    surfaceBackgroundColor: COLORS.white,
28003    surfaceBackgroundSubtleColor: '#F3F3F3',
28004    surfaceBackgroundTintColor: '#F5F5F5',
28005    surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
28006    surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
28007    surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
28008    surfaceBackgroundTertiaryColor: COLORS.white,
28009    surfaceColor: COLORS.white,
28010    transitionDuration: '200ms',
28011    transitionDurationFast: '160ms',
28012    transitionDurationFaster: '120ms',
28013    transitionDurationFastest: '100ms',
28014    transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
28015    transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
28016  }));
28017  
28018  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/styles.js
28019  function 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)."; }
28020  /**
28021   * External dependencies
28022   */
28023  
28024  
28025  /**
28026   * Internal dependencies
28027   */
28028  
28029  const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;" + ( true ? "" : 0),  true ? "" : 0);
28030  const styles_block =  true ? {
28031    name: "4zleql",
28032    styles: "display:block"
28033  } : 0;
28034  const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0),  true ? "" : 0);
28035  const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0),  true ? "" : 0);
28036  const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[700], ";" + ( true ? "" : 0),  true ? "" : 0);
28037  const 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);
28038  const upperCase =  true ? {
28039    name: "50zrmy",
28040    styles: "text-transform:uppercase"
28041  } : 0;
28042  
28043  // EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js
28044  var dist = __webpack_require__(9664);
28045  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/utils.js
28046  /**
28047   * External dependencies
28048   */
28049  
28050  
28051  
28052  /**
28053   * WordPress dependencies
28054   */
28055  
28056  
28057  /**
28058   * Source:
28059   * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
28060   */
28061  
28062  /**
28063   * @typedef Options
28064   * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
28065   * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
28066   * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
28067   * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
28068   * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
28069   * @property {string}                                                     children                  Children to highlight.
28070   * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
28071   * @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).
28072   * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
28073   * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
28074   * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
28075   * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
28076   * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
28077   * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
28078   */
28079  
28080  /**
28081   * Maps props to lowercase names.
28082   *
28083   * @param object Props to map.
28084   * @return The mapped props.
28085   */
28086  const lowercaseProps = object => {
28087    const mapped = {};
28088    for (const key in object) {
28089      mapped[key.toLowerCase()] = object[key];
28090    }
28091    return mapped;
28092  };
28093  const memoizedLowercaseProps = memize(lowercaseProps);
28094  
28095  /**
28096   * @param options
28097   * @param options.activeClassName
28098   * @param options.activeIndex
28099   * @param options.activeStyle
28100   * @param options.autoEscape
28101   * @param options.caseSensitive
28102   * @param options.children
28103   * @param options.findChunks
28104   * @param options.highlightClassName
28105   * @param options.highlightStyle
28106   * @param options.highlightTag
28107   * @param options.sanitize
28108   * @param options.searchWords
28109   * @param options.unhighlightClassName
28110   * @param options.unhighlightStyle
28111   */
28112  function createHighlighterText({
28113    activeClassName = '',
28114    activeIndex = -1,
28115    activeStyle,
28116    autoEscape,
28117    caseSensitive = false,
28118    children,
28119    findChunks,
28120    highlightClassName = '',
28121    highlightStyle = {},
28122    highlightTag = 'mark',
28123    sanitize,
28124    searchWords = [],
28125    unhighlightClassName = '',
28126    unhighlightStyle
28127  }) {
28128    if (!children) return null;
28129    if (typeof children !== 'string') return children;
28130    const textToHighlight = children;
28131    const chunks = (0,dist.findAll)({
28132      autoEscape,
28133      caseSensitive,
28134      findChunks,
28135      sanitize,
28136      searchWords,
28137      textToHighlight
28138    });
28139    const HighlightTag = highlightTag;
28140    let highlightIndex = -1;
28141    let highlightClassNames = '';
28142    let highlightStyles;
28143    const textContent = chunks.map((chunk, index) => {
28144      const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
28145      if (chunk.highlight) {
28146        highlightIndex++;
28147        let highlightClass;
28148        if (typeof highlightClassName === 'object') {
28149          if (!caseSensitive) {
28150            highlightClassName = memoizedLowercaseProps(highlightClassName);
28151            highlightClass = highlightClassName[text.toLowerCase()];
28152          } else {
28153            highlightClass = highlightClassName[text];
28154          }
28155        } else {
28156          highlightClass = highlightClassName;
28157        }
28158        const isActive = highlightIndex === +activeIndex;
28159        highlightClassNames = `$highlightClass} $isActive ? activeClassName : ''}`;
28160        highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
28161        const props = {
28162          children: text,
28163          className: highlightClassNames,
28164          key: index,
28165          style: highlightStyles
28166        };
28167  
28168        // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
28169        // Only pass through the highlightIndex attribute for custom components.
28170        if (typeof HighlightTag !== 'string') {
28171          props.highlightIndex = highlightIndex;
28172        }
28173        return (0,external_wp_element_namespaceObject.createElement)(HighlightTag, props);
28174      }
28175      return (0,external_wp_element_namespaceObject.createElement)('span', {
28176        children: text,
28177        className: unhighlightClassName,
28178        key: index,
28179        style: unhighlightStyle
28180      });
28181    });
28182    return textContent;
28183  }
28184  
28185  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-size.js
28186  /**
28187   * External dependencies
28188   */
28189  
28190  /**
28191   * Internal dependencies
28192   */
28193  
28194  const BASE_FONT_SIZE = 13;
28195  const PRESET_FONT_SIZES = {
28196    body: BASE_FONT_SIZE,
28197    caption: 10,
28198    footnote: 11,
28199    largeTitle: 28,
28200    subheadline: 12,
28201    title: 20
28202  };
28203  const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);
28204  function getFontSize(size = BASE_FONT_SIZE) {
28205    if (size in PRESET_FONT_SIZES) {
28206      return getFontSize(PRESET_FONT_SIZES[size]);
28207    }
28208    if (typeof size !== 'number') {
28209      const parsed = parseFloat(size);
28210      if (Number.isNaN(parsed)) return size;
28211      size = parsed;
28212    }
28213    const ratio = `($size} / $BASE_FONT_SIZE})`;
28214    return `calc($ratio} * $config_values.fontSize})`;
28215  }
28216  function getHeadingFontSize(size = 3) {
28217    if (!HEADING_FONT_SIZES.includes(size)) {
28218      return getFontSize(size);
28219    }
28220    const headingSize = `fontSizeH$size}`;
28221    return config_values[headingSize];
28222  }
28223  
28224  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/get-line-height.js
28225  /**
28226   * External dependencies
28227   */
28228  
28229  /**
28230   * Internal dependencies
28231   */
28232  
28233  
28234  
28235  function getLineHeight(adjustLineHeightForInnerControls, lineHeight) {
28236    if (lineHeight) return lineHeight;
28237    if (!adjustLineHeightForInnerControls) return;
28238    let value = `calc($config_values.controlHeight} + $space(2)})`;
28239    switch (adjustLineHeightForInnerControls) {
28240      case 'large':
28241        value = `calc($config_values.controlHeightLarge} + $space(2)})`;
28242        break;
28243      case 'small':
28244        value = `calc($config_values.controlHeightSmall} + $space(2)})`;
28245        break;
28246      case 'xSmall':
28247        value = `calc($config_values.controlHeightXSmall} + $space(2)})`;
28248        break;
28249      default:
28250        break;
28251    }
28252    return value;
28253  }
28254  
28255  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/hook.js
28256  function 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)."; }
28257  /**
28258   * External dependencies
28259   */
28260  
28261  
28262  
28263  /**
28264   * WordPress dependencies
28265   */
28266  
28267  
28268  /**
28269   * Internal dependencies
28270   */
28271  
28272  
28273  
28274  
28275  
28276  
28277  
28278  
28279  
28280  
28281  var hook_ref =  true ? {
28282    name: "50zrmy",
28283    styles: "text-transform:uppercase"
28284  } : 0;
28285  /**
28286   * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
28287   */
28288  function useText(props) {
28289    const {
28290      adjustLineHeightForInnerControls,
28291      align,
28292      children,
28293      className,
28294      color,
28295      ellipsizeMode,
28296      isDestructive = false,
28297      display,
28298      highlightEscape = false,
28299      highlightCaseSensitive = false,
28300      highlightWords,
28301      highlightSanitize,
28302      isBlock = false,
28303      letterSpacing,
28304      lineHeight: lineHeightProp,
28305      optimizeReadabilityFor,
28306      size,
28307      truncate = false,
28308      upperCase = false,
28309      variant,
28310      weight = config_values.fontWeight,
28311      ...otherProps
28312    } = useContextSystem(props, 'Text');
28313    let content = children;
28314    const isHighlighter = Array.isArray(highlightWords);
28315    const isCaption = size === 'caption';
28316    if (isHighlighter) {
28317      if (typeof children !== 'string') {
28318        throw new TypeError('`children` of `Text` must only be `string` types when `highlightWords` is defined');
28319      }
28320      content = createHighlighterText({
28321        autoEscape: highlightEscape,
28322        children,
28323        caseSensitive: highlightCaseSensitive,
28324        searchWords: highlightWords,
28325        sanitize: highlightSanitize
28326      });
28327    }
28328    const cx = useCx();
28329    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
28330      const sx = {};
28331      const lineHeight = getLineHeight(adjustLineHeightForInnerControls, lineHeightProp);
28332      sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
28333        color,
28334        display,
28335        fontSize: getFontSize(size),
28336        fontWeight: weight,
28337        lineHeight,
28338        letterSpacing,
28339        textAlign: align
28340      },  true ? "" : 0,  true ? "" : 0);
28341      sx.upperCase = hook_ref;
28342      sx.optimalTextColor = null;
28343      if (optimizeReadabilityFor) {
28344        const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark';
28345        sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({
28346          color: COLORS.gray[900]
28347        },  true ? "" : 0,  true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({
28348          color: COLORS.white
28349        },  true ? "" : 0,  true ? "" : 0);
28350      }
28351      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);
28352    }, [adjustLineHeightForInnerControls, align, className, color, cx, display, isBlock, isCaption, isDestructive, isHighlighter, letterSpacing, lineHeightProp, optimizeReadabilityFor, size, upperCase, variant, weight]);
28353    let finalEllipsizeMode;
28354    if (truncate === true) {
28355      finalEllipsizeMode = 'auto';
28356    }
28357    if (truncate === false) {
28358      finalEllipsizeMode = 'none';
28359    }
28360    const finalComponentProps = {
28361      ...otherProps,
28362      className: classes,
28363      children,
28364      ellipsizeMode: ellipsizeMode || finalEllipsizeMode
28365    };
28366    const truncateProps = useTruncate(finalComponentProps);
28367  
28368    /**
28369     * Enhance child `<Link />` components to inherit font size.
28370     */
28371    if (!truncate && Array.isArray(children)) {
28372      content = external_wp_element_namespaceObject.Children.map(children, child => {
28373        if (typeof child !== 'object' || child === null || !('props' in child)) {
28374          return child;
28375        }
28376        const isLink = hasConnectNamespace(child, ['Link']);
28377        if (isLink) {
28378          return (0,external_wp_element_namespaceObject.cloneElement)(child, {
28379            size: child.props.size || 'inherit'
28380          });
28381        }
28382        return child;
28383      });
28384    }
28385    return {
28386      ...truncateProps,
28387      children: truncate ? truncateProps.children : content
28388    };
28389  }
28390  
28391  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/component.js
28392  
28393  /**
28394   * Internal dependencies
28395   */
28396  
28397  
28398  
28399  
28400  /**
28401   * @param props
28402   * @param forwardedRef
28403   */
28404  function UnconnectedText(props, forwardedRef) {
28405    const textProps = useText(props);
28406    return (0,external_React_.createElement)(component, {
28407      as: "span",
28408      ...textProps,
28409      ref: forwardedRef
28410    });
28411  }
28412  
28413  /**
28414   * `Text` is a core component that renders text in the library, using the
28415   * library's typography system.
28416   *
28417   * `Text` can be used to render any text-content, like an HTML `p` or `span`.
28418   *
28419   * @example
28420   *
28421   * ```jsx
28422   * import { __experimentalText as Text } from `@wordpress/components`;
28423   *
28424   * function Example() {
28425   *     return <Text>Code is Poetry</Text>;
28426   * }
28427   * ```
28428   */
28429  const component_Text = contextConnect(UnconnectedText, 'Text');
28430  /* harmony default export */ const text_component = (component_Text);
28431  
28432  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/base-label.js
28433  function 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)."; }
28434  /**
28435   * External dependencies
28436   */
28437  
28438  
28439  // This is a very low-level mixin which you shouldn't have to use directly.
28440  // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
28441  const baseLabelTypography =  true ? {
28442    name: "9amh4a",
28443    styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase"
28444  } : 0;
28445  
28446  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js
28447  
28448  
28449  function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
28450  /**
28451   * External dependencies
28452   */
28453  
28454  
28455  
28456  
28457  
28458  
28459  var _ref2 =  true ? {
28460    name: "1739oy8",
28461    styles: "z-index:1"
28462  } : 0;
28463  const rootFocusedStyles = ({
28464    isFocused
28465  }) => {
28466    if (!isFocused) return '';
28467    return _ref2;
28468  };
28469  const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
28470    target: "em5sgkm7"
28471  } : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;", rootFocusedStyles, ";" + ( true ? "" : 0));
28472  const containerDisabledStyles = ({
28473    disabled
28474  }) => {
28475    const backgroundColor = disabled ? COLORS.ui.backgroundDisabled : COLORS.ui.background;
28476    return /*#__PURE__*/emotion_react_browser_esm_css({
28477      backgroundColor
28478    },  true ? "" : 0,  true ? "" : 0);
28479  };
28480  var input_control_styles_ref =  true ? {
28481    name: "1d3w5wq",
28482    styles: "width:100%"
28483  } : 0;
28484  const containerWidthStyles = ({
28485    __unstableInputWidth,
28486    labelPosition
28487  }) => {
28488    if (!__unstableInputWidth) return input_control_styles_ref;
28489    if (labelPosition === 'side') return '';
28490    if (labelPosition === 'edge') {
28491      return /*#__PURE__*/emotion_react_browser_esm_css({
28492        flex: `0 0 $__unstableInputWidth}`
28493      },  true ? "" : 0,  true ? "" : 0);
28494    }
28495    return /*#__PURE__*/emotion_react_browser_esm_css({
28496      width: __unstableInputWidth
28497    },  true ? "" : 0,  true ? "" : 0);
28498  };
28499  const Container = emotion_styled_base_browser_esm("div",  true ? {
28500    target: "em5sgkm6"
28501  } : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0));
28502  const disabledStyles = ({
28503    disabled
28504  }) => {
28505    if (!disabled) return '';
28506    return /*#__PURE__*/emotion_react_browser_esm_css({
28507      color: COLORS.ui.textDisabled
28508    },  true ? "" : 0,  true ? "" : 0);
28509  };
28510  const fontSizeStyles = ({
28511    inputSize: size
28512  }) => {
28513    const sizes = {
28514      default: '13px',
28515      small: '11px',
28516      compact: '13px',
28517      '__unstable-large': '13px'
28518    };
28519    const fontSize = sizes[size] || sizes.default;
28520    const fontSizeMobile = '16px';
28521    if (!fontSize) return '';
28522    return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0),  true ? "" : 0);
28523  };
28524  const getSizeConfig = ({
28525    inputSize: size,
28526    __next40pxDefaultSize
28527  }) => {
28528    // Paddings may be overridden by the custom paddings props.
28529    const sizes = {
28530      default: {
28531        height: 40,
28532        lineHeight: 1,
28533        minHeight: 40,
28534        paddingLeft: space(4),
28535        paddingRight: space(4)
28536      },
28537      small: {
28538        height: 24,
28539        lineHeight: 1,
28540        minHeight: 24,
28541        paddingLeft: space(2),
28542        paddingRight: space(2)
28543      },
28544      compact: {
28545        height: 32,
28546        lineHeight: 1,
28547        minHeight: 32,
28548        paddingLeft: space(2),
28549        paddingRight: space(2)
28550      },
28551      '__unstable-large': {
28552        height: 40,
28553        lineHeight: 1,
28554        minHeight: 40,
28555        paddingLeft: space(4),
28556        paddingRight: space(4)
28557      }
28558    };
28559    if (!__next40pxDefaultSize) {
28560      sizes.default = sizes.compact;
28561    }
28562    return sizes[size] || sizes.default;
28563  };
28564  const sizeStyles = props => {
28565    return /*#__PURE__*/emotion_react_browser_esm_css(getSizeConfig(props),  true ? "" : 0,  true ? "" : 0);
28566  };
28567  const customPaddings = ({
28568    paddingInlineStart,
28569    paddingInlineEnd
28570  }) => {
28571    return /*#__PURE__*/emotion_react_browser_esm_css({
28572      paddingInlineStart,
28573      paddingInlineEnd
28574    },  true ? "" : 0,  true ? "" : 0);
28575  };
28576  const dragStyles = ({
28577    isDragging,
28578    dragCursor
28579  }) => {
28580    let defaultArrowStyles;
28581    let activeDragCursorStyles;
28582    if (isDragging) {
28583      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);
28584    }
28585    if (isDragging && dragCursor) {
28586      activeDragCursorStyles = /*#__PURE__*/emotion_react_browser_esm_css("&:active{cursor:", dragCursor, ";}" + ( true ? "" : 0),  true ? "" : 0);
28587    }
28588    return /*#__PURE__*/emotion_react_browser_esm_css(defaultArrowStyles, " ", activeDragCursorStyles, ";" + ( true ? "" : 0),  true ? "" : 0);
28589  };
28590  
28591  // TODO: Resolve need to use &&& to increase specificity
28592  // https://github.com/WordPress/gutenberg/issues/18483
28593  
28594  const Input = emotion_styled_base_browser_esm("input",  true ? {
28595    target: "em5sgkm5"
28596  } : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.theme.foreground, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0));
28597  const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
28598    target: "em5sgkm4"
28599  } : 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));
28600  const Label = props => (0,external_React_.createElement)(BaseLabel, {
28601    ...props,
28602    as: "label"
28603  });
28604  const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component,  true ? {
28605    target: "em5sgkm3"
28606  } : 0)( true ? {
28607    name: "1b6uupn",
28608    styles: "max-width:calc( 100% - 10px )"
28609  } : 0);
28610  const backdropFocusedStyles = ({
28611    disabled,
28612    isBorderless,
28613    isFocused
28614  }) => {
28615    let borderColor = isBorderless ? 'transparent' : COLORS.ui.border;
28616    let boxShadow;
28617    let outline;
28618    let outlineOffset;
28619    if (isFocused) {
28620      borderColor = COLORS.ui.borderFocus;
28621      boxShadow = config_values.controlBoxShadowFocus;
28622      // Windows High Contrast mode will show this outline, but not the box-shadow.
28623      outline = `2px solid transparent`;
28624      outlineOffset = `-2px`;
28625    }
28626    if (disabled) {
28627      borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled;
28628    }
28629    return /*#__PURE__*/emotion_react_browser_esm_css({
28630      boxShadow,
28631      borderColor,
28632      borderStyle: 'solid',
28633      borderWidth: 1,
28634      outline,
28635      outlineOffset
28636    },  true ? "" : 0,  true ? "" : 0);
28637  };
28638  const BackdropUI = emotion_styled_base_browser_esm("div",  true ? {
28639    target: "em5sgkm2"
28640  } : 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({
28641    paddingLeft: 2
28642  }), ";}" + ( true ? "" : 0));
28643  const Prefix = emotion_styled_base_browser_esm("span",  true ? {
28644    target: "em5sgkm1"
28645  } : 0)( true ? {
28646    name: "pvvbxf",
28647    styles: "box-sizing:border-box;display:block"
28648  } : 0);
28649  const Suffix = emotion_styled_base_browser_esm("span",  true ? {
28650    target: "em5sgkm0"
28651  } : 0)( true ? {
28652    name: "jgf79h",
28653    styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex"
28654  } : 0);
28655  
28656  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/backdrop.js
28657  
28658  /**
28659   * WordPress dependencies
28660   */
28661  
28662  /**
28663   * Internal dependencies
28664   */
28665  
28666  function Backdrop({
28667    disabled = false,
28668    isBorderless = false,
28669    isFocused = false
28670  }) {
28671    return (0,external_React_.createElement)(BackdropUI, {
28672      "aria-hidden": "true",
28673      className: "components-input-control__backdrop",
28674      disabled: disabled,
28675      isBorderless: isBorderless,
28676      isFocused: isFocused
28677    });
28678  }
28679  const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop);
28680  /* harmony default export */ const backdrop = (MemoizedBackdrop);
28681  
28682  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/label.js
28683  
28684  /**
28685   * Internal dependencies
28686   */
28687  
28688  
28689  function label_Label({
28690    children,
28691    hideLabelFromVision,
28692    htmlFor,
28693    ...props
28694  }) {
28695    if (!children) return null;
28696    if (hideLabelFromVision) {
28697      return (0,external_React_.createElement)(visually_hidden_component, {
28698        as: "label",
28699        htmlFor: htmlFor
28700      }, children);
28701    }
28702    return (0,external_React_.createElement)(LabelWrapper, null, (0,external_React_.createElement)(Label, {
28703      htmlFor: htmlFor,
28704      ...props
28705    }, children));
28706  }
28707  
28708  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/use-deprecated-props.js
28709  function useDeprecated36pxDefaultSizeProp(props) {
28710    const {
28711      __next36pxDefaultSize,
28712      __next40pxDefaultSize,
28713      ...otherProps
28714    } = props;
28715    return {
28716      ...otherProps,
28717      __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize
28718    };
28719  }
28720  
28721  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-base.js
28722  
28723  /**
28724   * External dependencies
28725   */
28726  
28727  /**
28728   * WordPress dependencies
28729   */
28730  
28731  
28732  
28733  /**
28734   * Internal dependencies
28735   */
28736  
28737  
28738  
28739  
28740  
28741  function useUniqueId(idProp) {
28742    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase);
28743    const id = `input-base-control-$instanceId}`;
28744    return idProp || id;
28745  }
28746  
28747  // Adapter to map props for the new ui/flex component.
28748  function getUIFlexProps(labelPosition) {
28749    const props = {};
28750    switch (labelPosition) {
28751      case 'top':
28752        props.direction = 'column';
28753        props.expanded = false;
28754        props.gap = 0;
28755        break;
28756      case 'bottom':
28757        props.direction = 'column-reverse';
28758        props.expanded = false;
28759        props.gap = 0;
28760        break;
28761      case 'edge':
28762        props.justify = 'space-between';
28763        break;
28764    }
28765    return props;
28766  }
28767  function InputBase(props, ref) {
28768    const {
28769      __next40pxDefaultSize,
28770      __unstableInputWidth,
28771      children,
28772      className,
28773      disabled = false,
28774      hideLabelFromVision = false,
28775      labelPosition,
28776      id: idProp,
28777      isBorderless = false,
28778      isFocused = false,
28779      label,
28780      prefix,
28781      size = 'default',
28782      suffix,
28783      ...restProps
28784    } = useDeprecated36pxDefaultSizeProp(useContextSystem(props, 'InputBase'));
28785    const id = useUniqueId(idProp);
28786    const hideLabel = hideLabelFromVision || !label;
28787    const {
28788      paddingLeft,
28789      paddingRight
28790    } = getSizeConfig({
28791      inputSize: size,
28792      __next40pxDefaultSize
28793    });
28794    const prefixSuffixContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
28795      return {
28796        InputControlPrefixWrapper: {
28797          paddingLeft
28798        },
28799        InputControlSuffixWrapper: {
28800          paddingRight
28801        }
28802      };
28803    }, [paddingLeft, paddingRight]);
28804    return (
28805      // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
28806      (0,external_React_.createElement)(input_control_styles_Root, {
28807        ...restProps,
28808        ...getUIFlexProps(labelPosition),
28809        className: className,
28810        gap: 2,
28811        isFocused: isFocused,
28812        labelPosition: labelPosition,
28813        ref: ref
28814      }, (0,external_React_.createElement)(label_Label, {
28815        className: "components-input-control__label",
28816        hideLabelFromVision: hideLabelFromVision,
28817        labelPosition: labelPosition,
28818        htmlFor: id
28819      }, label), (0,external_React_.createElement)(Container, {
28820        __unstableInputWidth: __unstableInputWidth,
28821        className: "components-input-control__container",
28822        disabled: disabled,
28823        hideLabel: hideLabel,
28824        labelPosition: labelPosition
28825      }, (0,external_React_.createElement)(ContextSystemProvider, {
28826        value: prefixSuffixContextValue
28827      }, prefix && (0,external_React_.createElement)(Prefix, {
28828        className: "components-input-control__prefix"
28829      }, prefix), children, suffix && (0,external_React_.createElement)(Suffix, {
28830        className: "components-input-control__suffix"
28831      }, suffix)), (0,external_React_.createElement)(backdrop, {
28832        disabled: disabled,
28833        isBorderless: isBorderless,
28834        isFocused: isFocused
28835      })))
28836    );
28837  }
28838  /* harmony default export */ const input_base = (contextConnect(InputBase, 'InputBase'));
28839  
28840  ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js
28841  function maths_0ab39ae9_esm_clamp(v, min, max) {
28842    return Math.max(min, Math.min(v, max));
28843  }
28844  const V = {
28845    toVector(v, fallback) {
28846      if (v === undefined) v = fallback;
28847      return Array.isArray(v) ? v : [v, v];
28848    },
28849    add(v1, v2) {
28850      return [v1[0] + v2[0], v1[1] + v2[1]];
28851    },
28852    sub(v1, v2) {
28853      return [v1[0] - v2[0], v1[1] - v2[1]];
28854    },
28855    addTo(v1, v2) {
28856      v1[0] += v2[0];
28857      v1[1] += v2[1];
28858    },
28859    subTo(v1, v2) {
28860      v1[0] -= v2[0];
28861      v1[1] -= v2[1];
28862    }
28863  };
28864  function rubberband(distance, dimension, constant) {
28865    if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5);
28866    return distance * dimension * constant / (dimension + constant * distance);
28867  }
28868  function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) {
28869    if (constant === 0) return maths_0ab39ae9_esm_clamp(position, min, max);
28870    if (position < min) return -rubberband(min - position, max - min, constant) + min;
28871    if (position > max) return +rubberband(position - max, max - min, constant) + max;
28872    return position;
28873  }
28874  function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) {
28875    const [[X0, X1], [Y0, Y1]] = bounds;
28876    return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)];
28877  }
28878  
28879  
28880  
28881  ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-b1cc53c2.esm.js
28882  
28883  
28884  function _toPrimitive(input, hint) {
28885    if (typeof input !== "object" || input === null) return input;
28886    var prim = input[Symbol.toPrimitive];
28887    if (prim !== undefined) {
28888      var res = prim.call(input, hint || "default");
28889      if (typeof res !== "object") return res;
28890      throw new TypeError("@@toPrimitive must return a primitive value.");
28891    }
28892    return (hint === "string" ? String : Number)(input);
28893  }
28894  
28895  function _toPropertyKey(arg) {
28896    var key = _toPrimitive(arg, "string");
28897    return typeof key === "symbol" ? key : String(key);
28898  }
28899  
28900  function _defineProperty(obj, key, value) {
28901    key = _toPropertyKey(key);
28902    if (key in obj) {
28903      Object.defineProperty(obj, key, {
28904        value: value,
28905        enumerable: true,
28906        configurable: true,
28907        writable: true
28908      });
28909    } else {
28910      obj[key] = value;
28911    }
28912    return obj;
28913  }
28914  
28915  function ownKeys(object, enumerableOnly) {
28916    var keys = Object.keys(object);
28917    if (Object.getOwnPropertySymbols) {
28918      var symbols = Object.getOwnPropertySymbols(object);
28919      enumerableOnly && (symbols = symbols.filter(function (sym) {
28920        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
28921      })), keys.push.apply(keys, symbols);
28922    }
28923    return keys;
28924  }
28925  function _objectSpread2(target) {
28926    for (var i = 1; i < arguments.length; i++) {
28927      var source = null != arguments[i] ? arguments[i] : {};
28928      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
28929        _defineProperty(target, key, source[key]);
28930      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
28931        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
28932      });
28933    }
28934    return target;
28935  }
28936  
28937  const EVENT_TYPE_MAP = {
28938    pointer: {
28939      start: 'down',
28940      change: 'move',
28941      end: 'up'
28942    },
28943    mouse: {
28944      start: 'down',
28945      change: 'move',
28946      end: 'up'
28947    },
28948    touch: {
28949      start: 'start',
28950      change: 'move',
28951      end: 'end'
28952    },
28953    gesture: {
28954      start: 'start',
28955      change: 'change',
28956      end: 'end'
28957    }
28958  };
28959  function capitalize(string) {
28960    if (!string) return '';
28961    return string[0].toUpperCase() + string.slice(1);
28962  }
28963  const actionsWithoutCaptureSupported = ['enter', 'leave'];
28964  function hasCapture(capture = false, actionKey) {
28965    return capture && !actionsWithoutCaptureSupported.includes(actionKey);
28966  }
28967  function toHandlerProp(device, action = '', capture = false) {
28968    const deviceProps = EVENT_TYPE_MAP[device];
28969    const actionKey = deviceProps ? deviceProps[action] || action : action;
28970    return 'on' + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? 'Capture' : '');
28971  }
28972  const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture'];
28973  function parseProp(prop) {
28974    let eventKey = prop.substring(2).toLowerCase();
28975    const passive = !!~eventKey.indexOf('passive');
28976    if (passive) eventKey = eventKey.replace('passive', '');
28977    const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture';
28978    const capture = !!~eventKey.indexOf(captureKey);
28979    if (capture) eventKey = eventKey.replace('capture', '');
28980    return {
28981      device: eventKey,
28982      capture,
28983      passive
28984    };
28985  }
28986  function toDomEventType(device, action = '') {
28987    const deviceProps = EVENT_TYPE_MAP[device];
28988    const actionKey = deviceProps ? deviceProps[action] || action : action;
28989    return device + actionKey;
28990  }
28991  function isTouch(event) {
28992    return 'touches' in event;
28993  }
28994  function getPointerType(event) {
28995    if (isTouch(event)) return 'touch';
28996    if ('pointerType' in event) return event.pointerType;
28997    return 'mouse';
28998  }
28999  function getCurrentTargetTouchList(event) {
29000    return Array.from(event.touches).filter(e => {
29001      var _event$currentTarget, _event$currentTarget$;
29002      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));
29003    });
29004  }
29005  function getTouchList(event) {
29006    return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches;
29007  }
29008  function getValueEvent(event) {
29009    return isTouch(event) ? getTouchList(event)[0] : event;
29010  }
29011  function distanceAngle(P1, P2) {
29012    const dx = P2.clientX - P1.clientX;
29013    const dy = P2.clientY - P1.clientY;
29014    const cx = (P2.clientX + P1.clientX) / 2;
29015    const cy = (P2.clientY + P1.clientY) / 2;
29016    const distance = Math.hypot(dx, dy);
29017    const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
29018    const origin = [cx, cy];
29019    return {
29020      angle,
29021      distance,
29022      origin
29023    };
29024  }
29025  function touchIds(event) {
29026    return getCurrentTargetTouchList(event).map(touch => touch.identifier);
29027  }
29028  function touchDistanceAngle(event, ids) {
29029    const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier));
29030    return distanceAngle(P1, P2);
29031  }
29032  function pointerId(event) {
29033    const valueEvent = getValueEvent(event);
29034    return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId;
29035  }
29036  function pointerValues(event) {
29037    const valueEvent = getValueEvent(event);
29038    return [valueEvent.clientX, valueEvent.clientY];
29039  }
29040  const LINE_HEIGHT = 40;
29041  const PAGE_HEIGHT = 800;
29042  function wheelValues(event) {
29043    let {
29044      deltaX,
29045      deltaY,
29046      deltaMode
29047    } = event;
29048    if (deltaMode === 1) {
29049      deltaX *= LINE_HEIGHT;
29050      deltaY *= LINE_HEIGHT;
29051    } else if (deltaMode === 2) {
29052      deltaX *= PAGE_HEIGHT;
29053      deltaY *= PAGE_HEIGHT;
29054    }
29055    return [deltaX, deltaY];
29056  }
29057  function scrollValues(event) {
29058    var _ref, _ref2;
29059    const {
29060      scrollX,
29061      scrollY,
29062      scrollLeft,
29063      scrollTop
29064    } = event.currentTarget;
29065    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];
29066  }
29067  function getEventDetails(event) {
29068    const payload = {};
29069    if ('buttons' in event) payload.buttons = event.buttons;
29070    if ('shiftKey' in event) {
29071      const {
29072        shiftKey,
29073        altKey,
29074        metaKey,
29075        ctrlKey
29076      } = event;
29077      Object.assign(payload, {
29078        shiftKey,
29079        altKey,
29080        metaKey,
29081        ctrlKey
29082      });
29083    }
29084    return payload;
29085  }
29086  
29087  function call(v, ...args) {
29088    if (typeof v === 'function') {
29089      return v(...args);
29090    } else {
29091      return v;
29092    }
29093  }
29094  function actions_b1cc53c2_esm_noop() {}
29095  function actions_b1cc53c2_esm_chain(...fns) {
29096    if (fns.length === 0) return actions_b1cc53c2_esm_noop;
29097    if (fns.length === 1) return fns[0];
29098    return function () {
29099      let result;
29100      for (const fn of fns) {
29101        result = fn.apply(this, arguments) || result;
29102      }
29103      return result;
29104    };
29105  }
29106  function assignDefault(value, fallback) {
29107    return Object.assign({}, fallback, value || {});
29108  }
29109  
29110  const BEFORE_LAST_KINEMATICS_DELAY = 32;
29111  class Engine {
29112    constructor(ctrl, args, key) {
29113      this.ctrl = ctrl;
29114      this.args = args;
29115      this.key = key;
29116      if (!this.state) {
29117        this.state = {};
29118        this.computeValues([0, 0]);
29119        this.computeInitial();
29120        if (this.init) this.init();
29121        this.reset();
29122      }
29123    }
29124    get state() {
29125      return this.ctrl.state[this.key];
29126    }
29127    set state(state) {
29128      this.ctrl.state[this.key] = state;
29129    }
29130    get shared() {
29131      return this.ctrl.state.shared;
29132    }
29133    get eventStore() {
29134      return this.ctrl.gestureEventStores[this.key];
29135    }
29136    get timeoutStore() {
29137      return this.ctrl.gestureTimeoutStores[this.key];
29138    }
29139    get config() {
29140      return this.ctrl.config[this.key];
29141    }
29142    get sharedConfig() {
29143      return this.ctrl.config.shared;
29144    }
29145    get handler() {
29146      return this.ctrl.handlers[this.key];
29147    }
29148    reset() {
29149      const {
29150        state,
29151        shared,
29152        ingKey,
29153        args
29154      } = this;
29155      shared[ingKey] = state._active = state.active = state._blocked = state._force = false;
29156      state._step = [false, false];
29157      state.intentional = false;
29158      state._movement = [0, 0];
29159      state._distance = [0, 0];
29160      state._direction = [0, 0];
29161      state._delta = [0, 0];
29162      state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]];
29163      state.args = args;
29164      state.axis = undefined;
29165      state.memo = undefined;
29166      state.elapsedTime = 0;
29167      state.direction = [0, 0];
29168      state.distance = [0, 0];
29169      state.overflow = [0, 0];
29170      state._movementBound = [false, false];
29171      state.velocity = [0, 0];
29172      state.movement = [0, 0];
29173      state.delta = [0, 0];
29174      state.timeStamp = 0;
29175    }
29176    start(event) {
29177      const state = this.state;
29178      const config = this.config;
29179      if (!state._active) {
29180        this.reset();
29181        this.computeInitial();
29182        state._active = true;
29183        state.target = event.target;
29184        state.currentTarget = event.currentTarget;
29185        state.lastOffset = config.from ? call(config.from, state) : state.offset;
29186        state.offset = state.lastOffset;
29187      }
29188      state.startTime = state.timeStamp = event.timeStamp;
29189    }
29190    computeValues(values) {
29191      const state = this.state;
29192      state._values = values;
29193      state.values = this.config.transform(values);
29194    }
29195    computeInitial() {
29196      const state = this.state;
29197      state._initial = state._values;
29198      state.initial = state.values;
29199    }
29200    compute(event) {
29201      const {
29202        state,
29203        config,
29204        shared
29205      } = this;
29206      state.args = this.args;
29207      let dt = 0;
29208      if (event) {
29209        state.event = event;
29210        if (config.preventDefault && event.cancelable) state.event.preventDefault();
29211        state.type = event.type;
29212        shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size;
29213        shared.locked = !!document.pointerLockElement;
29214        Object.assign(shared, getEventDetails(event));
29215        shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0;
29216        dt = event.timeStamp - state.timeStamp;
29217        state.timeStamp = event.timeStamp;
29218        state.elapsedTime = state.timeStamp - state.startTime;
29219      }
29220      if (state._active) {
29221        const _absoluteDelta = state._delta.map(Math.abs);
29222        V.addTo(state._distance, _absoluteDelta);
29223      }
29224      if (this.axisIntent) this.axisIntent(event);
29225      const [_m0, _m1] = state._movement;
29226      const [t0, t1] = config.threshold;
29227      const {
29228        _step,
29229        values
29230      } = state;
29231      if (config.hasCustomTransform) {
29232        if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0];
29233        if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1];
29234      } else {
29235        if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0;
29236        if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1;
29237      }
29238      state.intentional = _step[0] !== false || _step[1] !== false;
29239      if (!state.intentional) return;
29240      const movement = [0, 0];
29241      if (config.hasCustomTransform) {
29242        const [v0, v1] = values;
29243        movement[0] = _step[0] !== false ? v0 - _step[0] : 0;
29244        movement[1] = _step[1] !== false ? v1 - _step[1] : 0;
29245      } else {
29246        movement[0] = _step[0] !== false ? _m0 - _step[0] : 0;
29247        movement[1] = _step[1] !== false ? _m1 - _step[1] : 0;
29248      }
29249      if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement);
29250      const previousOffset = state.offset;
29251      const gestureIsActive = state._active && !state._blocked || state.active;
29252      if (gestureIsActive) {
29253        state.first = state._active && !state.active;
29254        state.last = !state._active && state.active;
29255        state.active = shared[this.ingKey] = state._active;
29256        if (event) {
29257          if (state.first) {
29258            if ('bounds' in config) state._bounds = call(config.bounds, state);
29259            if (this.setup) this.setup();
29260          }
29261          state.movement = movement;
29262          this.computeOffset();
29263        }
29264      }
29265      const [ox, oy] = state.offset;
29266      const [[x0, x1], [y0, y1]] = state._bounds;
29267      state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0];
29268      state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false;
29269      state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false;
29270      const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0];
29271      state.offset = computeRubberband(state._bounds, state.offset, rubberband);
29272      state.delta = V.sub(state.offset, previousOffset);
29273      this.computeMovement();
29274      if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) {
29275        state.delta = V.sub(state.offset, previousOffset);
29276        const absoluteDelta = state.delta.map(Math.abs);
29277        V.addTo(state.distance, absoluteDelta);
29278        state.direction = state.delta.map(Math.sign);
29279        state._direction = state._delta.map(Math.sign);
29280        if (!state.first && dt > 0) {
29281          state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt];
29282        }
29283      }
29284    }
29285    emit() {
29286      const state = this.state;
29287      const shared = this.shared;
29288      const config = this.config;
29289      if (!state._active) this.clean();
29290      if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return;
29291      const memo = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, {
29292        [this.aliasKey]: state.values
29293      }));
29294      if (memo !== undefined) state.memo = memo;
29295    }
29296    clean() {
29297      this.eventStore.clean();
29298      this.timeoutStore.clean();
29299    }
29300  }
29301  
29302  function selectAxis([dx, dy], threshold) {
29303    const absDx = Math.abs(dx);
29304    const absDy = Math.abs(dy);
29305    if (absDx > absDy && absDx > threshold) {
29306      return 'x';
29307    }
29308    if (absDy > absDx && absDy > threshold) {
29309      return 'y';
29310    }
29311    return undefined;
29312  }
29313  class CoordinatesEngine extends Engine {
29314    constructor(...args) {
29315      super(...args);
29316      _defineProperty(this, "aliasKey", 'xy');
29317    }
29318    reset() {
29319      super.reset();
29320      this.state.axis = undefined;
29321    }
29322    init() {
29323      this.state.offset = [0, 0];
29324      this.state.lastOffset = [0, 0];
29325    }
29326    computeOffset() {
29327      this.state.offset = V.add(this.state.lastOffset, this.state.movement);
29328    }
29329    computeMovement() {
29330      this.state.movement = V.sub(this.state.offset, this.state.lastOffset);
29331    }
29332    axisIntent(event) {
29333      const state = this.state;
29334      const config = this.config;
29335      if (!state.axis && event) {
29336        const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold;
29337        state.axis = selectAxis(state._movement, threshold);
29338      }
29339      state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis;
29340    }
29341    restrictToAxis(v) {
29342      if (this.config.axis || this.config.lockDirection) {
29343        switch (this.state.axis) {
29344          case 'x':
29345            v[1] = 0;
29346            break;
29347          case 'y':
29348            v[0] = 0;
29349            break;
29350        }
29351      }
29352    }
29353  }
29354  
29355  const actions_b1cc53c2_esm_identity = v => v;
29356  const DEFAULT_RUBBERBAND = 0.15;
29357  const commonConfigResolver = {
29358    enabled(value = true) {
29359      return value;
29360    },
29361    eventOptions(value, _k, config) {
29362      return _objectSpread2(_objectSpread2({}, config.shared.eventOptions), value);
29363    },
29364    preventDefault(value = false) {
29365      return value;
29366    },
29367    triggerAllEvents(value = false) {
29368      return value;
29369    },
29370    rubberband(value = 0) {
29371      switch (value) {
29372        case true:
29373          return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND];
29374        case false:
29375          return [0, 0];
29376        default:
29377          return V.toVector(value);
29378      }
29379    },
29380    from(value) {
29381      if (typeof value === 'function') return value;
29382      if (value != null) return V.toVector(value);
29383    },
29384    transform(value, _k, config) {
29385      const transform = value || config.shared.transform;
29386      this.hasCustomTransform = !!transform;
29387      if (false) {}
29388      return transform || actions_b1cc53c2_esm_identity;
29389    },
29390    threshold(value) {
29391      return V.toVector(value, 0);
29392    }
29393  };
29394  if (false) {}
29395  
29396  const DEFAULT_AXIS_THRESHOLD = 0;
29397  const coordinatesConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
29398    axis(_v, _k, {
29399      axis
29400    }) {
29401      this.lockDirection = axis === 'lock';
29402      if (!this.lockDirection) return axis;
29403    },
29404    axisThreshold(value = DEFAULT_AXIS_THRESHOLD) {
29405      return value;
29406    },
29407    bounds(value = {}) {
29408      if (typeof value === 'function') {
29409        return state => coordinatesConfigResolver.bounds(value(state));
29410      }
29411      if ('current' in value) {
29412        return () => value.current;
29413      }
29414      if (typeof HTMLElement === 'function' && value instanceof HTMLElement) {
29415        return value;
29416      }
29417      const {
29418        left = -Infinity,
29419        right = Infinity,
29420        top = -Infinity,
29421        bottom = Infinity
29422      } = value;
29423      return [[left, right], [top, bottom]];
29424    }
29425  });
29426  
29427  const KEYS_DELTA_MAP = {
29428    ArrowRight: (displacement, factor = 1) => [displacement * factor, 0],
29429    ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0],
29430    ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor],
29431    ArrowDown: (displacement, factor = 1) => [0, displacement * factor]
29432  };
29433  class DragEngine extends CoordinatesEngine {
29434    constructor(...args) {
29435      super(...args);
29436      _defineProperty(this, "ingKey", 'dragging');
29437    }
29438    reset() {
29439      super.reset();
29440      const state = this.state;
29441      state._pointerId = undefined;
29442      state._pointerActive = false;
29443      state._keyboardActive = false;
29444      state._preventScroll = false;
29445      state._delayed = false;
29446      state.swipe = [0, 0];
29447      state.tap = false;
29448      state.canceled = false;
29449      state.cancel = this.cancel.bind(this);
29450    }
29451    setup() {
29452      const state = this.state;
29453      if (state._bounds instanceof HTMLElement) {
29454        const boundRect = state._bounds.getBoundingClientRect();
29455        const targetRect = state.currentTarget.getBoundingClientRect();
29456        const _bounds = {
29457          left: boundRect.left - targetRect.left + state.offset[0],
29458          right: boundRect.right - targetRect.right + state.offset[0],
29459          top: boundRect.top - targetRect.top + state.offset[1],
29460          bottom: boundRect.bottom - targetRect.bottom + state.offset[1]
29461        };
29462        state._bounds = coordinatesConfigResolver.bounds(_bounds);
29463      }
29464    }
29465    cancel() {
29466      const state = this.state;
29467      if (state.canceled) return;
29468      state.canceled = true;
29469      state._active = false;
29470      setTimeout(() => {
29471        this.compute();
29472        this.emit();
29473      }, 0);
29474    }
29475    setActive() {
29476      this.state._active = this.state._pointerActive || this.state._keyboardActive;
29477    }
29478    clean() {
29479      this.pointerClean();
29480      this.state._pointerActive = false;
29481      this.state._keyboardActive = false;
29482      super.clean();
29483    }
29484    pointerDown(event) {
29485      const config = this.config;
29486      const state = this.state;
29487      if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return;
29488      const ctrlIds = this.ctrl.setEventIds(event);
29489      if (config.pointerCapture) {
29490        event.target.setPointerCapture(event.pointerId);
29491      }
29492      if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return;
29493      this.start(event);
29494      this.setupPointer(event);
29495      state._pointerId = pointerId(event);
29496      state._pointerActive = true;
29497      this.computeValues(pointerValues(event));
29498      this.computeInitial();
29499      if (config.preventScrollAxis && getPointerType(event) !== 'mouse') {
29500        state._active = false;
29501        this.setupScrollPrevention(event);
29502      } else if (config.delay > 0) {
29503        this.setupDelayTrigger(event);
29504        if (config.triggerAllEvents) {
29505          this.compute(event);
29506          this.emit();
29507        }
29508      } else {
29509        this.startPointerDrag(event);
29510      }
29511    }
29512    startPointerDrag(event) {
29513      const state = this.state;
29514      state._active = true;
29515      state._preventScroll = true;
29516      state._delayed = false;
29517      this.compute(event);
29518      this.emit();
29519    }
29520    pointerMove(event) {
29521      const state = this.state;
29522      const config = this.config;
29523      if (!state._pointerActive) return;
29524      if (state.type === event.type && event.timeStamp === state.timeStamp) return;
29525      const id = pointerId(event);
29526      if (state._pointerId !== undefined && id !== state._pointerId) return;
29527      const _values = pointerValues(event);
29528      if (document.pointerLockElement === event.target) {
29529        state._delta = [event.movementX, event.movementY];
29530      } else {
29531        state._delta = V.sub(_values, state._values);
29532        this.computeValues(_values);
29533      }
29534      V.addTo(state._movement, state._delta);
29535      this.compute(event);
29536      if (state._delayed && state.intentional) {
29537        this.timeoutStore.remove('dragDelay');
29538        state.active = false;
29539        this.startPointerDrag(event);
29540        return;
29541      }
29542      if (config.preventScrollAxis && !state._preventScroll) {
29543        if (state.axis) {
29544          if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') {
29545            state._active = false;
29546            this.clean();
29547            return;
29548          } else {
29549            this.timeoutStore.remove('startPointerDrag');
29550            this.startPointerDrag(event);
29551            return;
29552          }
29553        } else {
29554          return;
29555        }
29556      }
29557      this.emit();
29558    }
29559    pointerUp(event) {
29560      this.ctrl.setEventIds(event);
29561      try {
29562        if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) {
29563          ;
29564          event.target.releasePointerCapture(event.pointerId);
29565        }
29566      } catch (_unused) {
29567        if (false) {}
29568      }
29569      const state = this.state;
29570      const config = this.config;
29571      if (!state._active || !state._pointerActive) return;
29572      const id = pointerId(event);
29573      if (state._pointerId !== undefined && id !== state._pointerId) return;
29574      this.state._pointerActive = false;
29575      this.setActive();
29576      this.compute(event);
29577      const [dx, dy] = state._distance;
29578      state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold;
29579      if (state.tap && config.filterTaps) {
29580        state._force = true;
29581      } else {
29582        const [dirx, diry] = state.direction;
29583        const [vx, vy] = state.velocity;
29584        const [mx, my] = state.movement;
29585        const [svx, svy] = config.swipe.velocity;
29586        const [sx, sy] = config.swipe.distance;
29587        const sdt = config.swipe.duration;
29588        if (state.elapsedTime < sdt) {
29589          if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx;
29590          if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry;
29591        }
29592      }
29593      this.emit();
29594    }
29595    pointerClick(event) {
29596      if (!this.state.tap && event.detail > 0) {
29597        event.preventDefault();
29598        event.stopPropagation();
29599      }
29600    }
29601    setupPointer(event) {
29602      const config = this.config;
29603      const device = config.device;
29604      if (false) {}
29605      if (config.pointerLock) {
29606        event.currentTarget.requestPointerLock();
29607      }
29608      if (!config.pointerCapture) {
29609        this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this));
29610        this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this));
29611        this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this));
29612      }
29613    }
29614    pointerClean() {
29615      if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) {
29616        document.exitPointerLock();
29617      }
29618    }
29619    preventScroll(event) {
29620      if (this.state._preventScroll && event.cancelable) {
29621        event.preventDefault();
29622      }
29623    }
29624    setupScrollPrevention(event) {
29625      this.state._preventScroll = false;
29626      persistEvent(event);
29627      const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), {
29628        passive: false
29629      });
29630      this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove);
29631      this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove);
29632      this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event);
29633    }
29634    setupDelayTrigger(event) {
29635      this.state._delayed = true;
29636      this.timeoutStore.add('dragDelay', () => {
29637        this.state._step = [0, 0];
29638        this.startPointerDrag(event);
29639      }, this.config.delay);
29640    }
29641    keyDown(event) {
29642      const deltaFn = KEYS_DELTA_MAP[event.key];
29643      if (deltaFn) {
29644        const state = this.state;
29645        const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
29646        this.start(event);
29647        state._delta = deltaFn(this.config.keyboardDisplacement, factor);
29648        state._keyboardActive = true;
29649        V.addTo(state._movement, state._delta);
29650        this.compute(event);
29651        this.emit();
29652      }
29653    }
29654    keyUp(event) {
29655      if (!(event.key in KEYS_DELTA_MAP)) return;
29656      this.state._keyboardActive = false;
29657      this.setActive();
29658      this.compute(event);
29659      this.emit();
29660    }
29661    bind(bindFunction) {
29662      const device = this.config.device;
29663      bindFunction(device, 'start', this.pointerDown.bind(this));
29664      if (this.config.pointerCapture) {
29665        bindFunction(device, 'change', this.pointerMove.bind(this));
29666        bindFunction(device, 'end', this.pointerUp.bind(this));
29667        bindFunction(device, 'cancel', this.pointerUp.bind(this));
29668        bindFunction('lostPointerCapture', '', this.pointerUp.bind(this));
29669      }
29670      if (this.config.keys) {
29671        bindFunction('key', 'down', this.keyDown.bind(this));
29672        bindFunction('key', 'up', this.keyUp.bind(this));
29673      }
29674      if (this.config.filterTaps) {
29675        bindFunction('click', '', this.pointerClick.bind(this), {
29676          capture: true,
29677          passive: false
29678        });
29679      }
29680    }
29681  }
29682  function persistEvent(event) {
29683    'persist' in event && typeof event.persist === 'function' && event.persist();
29684  }
29685  
29686  const actions_b1cc53c2_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement;
29687  function supportsTouchEvents() {
29688    return actions_b1cc53c2_esm_isBrowser && 'ontouchstart' in window;
29689  }
29690  function isTouchScreen() {
29691    return supportsTouchEvents() || actions_b1cc53c2_esm_isBrowser && window.navigator.maxTouchPoints > 1;
29692  }
29693  function supportsPointerEvents() {
29694    return actions_b1cc53c2_esm_isBrowser && 'onpointerdown' in window;
29695  }
29696  function supportsPointerLock() {
29697    return actions_b1cc53c2_esm_isBrowser && 'exitPointerLock' in window.document;
29698  }
29699  function supportsGestureEvents() {
29700    try {
29701      return 'constructor' in GestureEvent;
29702    } catch (e) {
29703      return false;
29704    }
29705  }
29706  const SUPPORT = {
29707    isBrowser: actions_b1cc53c2_esm_isBrowser,
29708    gesture: supportsGestureEvents(),
29709    touch: isTouchScreen(),
29710    touchscreen: isTouchScreen(),
29711    pointer: supportsPointerEvents(),
29712    pointerLock: supportsPointerLock()
29713  };
29714  
29715  const DEFAULT_PREVENT_SCROLL_DELAY = 250;
29716  const DEFAULT_DRAG_DELAY = 180;
29717  const DEFAULT_SWIPE_VELOCITY = 0.5;
29718  const DEFAULT_SWIPE_DISTANCE = 50;
29719  const DEFAULT_SWIPE_DURATION = 250;
29720  const DEFAULT_KEYBOARD_DISPLACEMENT = 10;
29721  const DEFAULT_DRAG_AXIS_THRESHOLD = {
29722    mouse: 0,
29723    touch: 0,
29724    pen: 8
29725  };
29726  const dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
29727    device(_v, _k, {
29728      pointer: {
29729        touch = false,
29730        lock = false,
29731        mouse = false
29732      } = {}
29733    }) {
29734      this.pointerLock = lock && SUPPORT.pointerLock;
29735      if (SUPPORT.touch && touch) return 'touch';
29736      if (this.pointerLock) return 'mouse';
29737      if (SUPPORT.pointer && !mouse) return 'pointer';
29738      if (SUPPORT.touch) return 'touch';
29739      return 'mouse';
29740    },
29741    preventScrollAxis(value, _k, {
29742      preventScroll
29743    }) {
29744      this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined;
29745      if (!SUPPORT.touchscreen || preventScroll === false) return undefined;
29746      return value ? value : preventScroll !== undefined ? 'y' : undefined;
29747    },
29748    pointerCapture(_v, _k, {
29749      pointer: {
29750        capture = true,
29751        buttons = 1,
29752        keys = true
29753      } = {}
29754    }) {
29755      this.pointerButtons = buttons;
29756      this.keys = keys;
29757      return !this.pointerLock && this.device === 'pointer' && capture;
29758    },
29759    threshold(value, _k, {
29760      filterTaps = false,
29761      tapsThreshold = 3,
29762      axis = undefined
29763    }) {
29764      const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0);
29765      this.filterTaps = filterTaps;
29766      this.tapsThreshold = tapsThreshold;
29767      return threshold;
29768    },
29769    swipe({
29770      velocity = DEFAULT_SWIPE_VELOCITY,
29771      distance = DEFAULT_SWIPE_DISTANCE,
29772      duration = DEFAULT_SWIPE_DURATION
29773    } = {}) {
29774      return {
29775        velocity: this.transform(V.toVector(velocity)),
29776        distance: this.transform(V.toVector(distance)),
29777        duration
29778      };
29779    },
29780    delay(value = 0) {
29781      switch (value) {
29782        case true:
29783          return DEFAULT_DRAG_DELAY;
29784        case false:
29785          return 0;
29786        default:
29787          return value;
29788      }
29789    },
29790    axisThreshold(value) {
29791      if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD;
29792      return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
29793    },
29794    keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) {
29795      return value;
29796    }
29797  });
29798  if (false) {}
29799  
29800  function clampStateInternalMovementToBounds(state) {
29801    const [ox, oy] = state.overflow;
29802    const [dx, dy] = state._delta;
29803    const [dirx, diry] = state._direction;
29804    if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
29805      state._movement[0] = state._movementBound[0];
29806    }
29807    if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
29808      state._movement[1] = state._movementBound[1];
29809    }
29810  }
29811  
29812  const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
29813  const PINCH_WHEEL_RATIO = 100;
29814  class PinchEngine extends Engine {
29815    constructor(...args) {
29816      super(...args);
29817      _defineProperty(this, "ingKey", 'pinching');
29818      _defineProperty(this, "aliasKey", 'da');
29819    }
29820    init() {
29821      this.state.offset = [1, 0];
29822      this.state.lastOffset = [1, 0];
29823      this.state._pointerEvents = new Map();
29824    }
29825    reset() {
29826      super.reset();
29827      const state = this.state;
29828      state._touchIds = [];
29829      state.canceled = false;
29830      state.cancel = this.cancel.bind(this);
29831      state.turns = 0;
29832    }
29833    computeOffset() {
29834      const {
29835        type,
29836        movement,
29837        lastOffset
29838      } = this.state;
29839      if (type === 'wheel') {
29840        this.state.offset = V.add(movement, lastOffset);
29841      } else {
29842        this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]];
29843      }
29844    }
29845    computeMovement() {
29846      const {
29847        offset,
29848        lastOffset
29849      } = this.state;
29850      this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]];
29851    }
29852    axisIntent() {
29853      const state = this.state;
29854      const [_m0, _m1] = state._movement;
29855      if (!state.axis) {
29856        const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1);
29857        if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale';
29858      }
29859    }
29860    restrictToAxis(v) {
29861      if (this.config.lockDirection) {
29862        if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0;
29863      }
29864    }
29865    cancel() {
29866      const state = this.state;
29867      if (state.canceled) return;
29868      setTimeout(() => {
29869        state.canceled = true;
29870        state._active = false;
29871        this.compute();
29872        this.emit();
29873      }, 0);
29874    }
29875    touchStart(event) {
29876      this.ctrl.setEventIds(event);
29877      const state = this.state;
29878      const ctrlTouchIds = this.ctrl.touchIds;
29879      if (state._active) {
29880        if (state._touchIds.every(id => ctrlTouchIds.has(id))) return;
29881      }
29882      if (ctrlTouchIds.size < 2) return;
29883      this.start(event);
29884      state._touchIds = Array.from(ctrlTouchIds).slice(0, 2);
29885      const payload = touchDistanceAngle(event, state._touchIds);
29886      this.pinchStart(event, payload);
29887    }
29888    pointerStart(event) {
29889      if (event.buttons != null && event.buttons % 2 !== 1) return;
29890      this.ctrl.setEventIds(event);
29891      event.target.setPointerCapture(event.pointerId);
29892      const state = this.state;
29893      const _pointerEvents = state._pointerEvents;
29894      const ctrlPointerIds = this.ctrl.pointerIds;
29895      if (state._active) {
29896        if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return;
29897      }
29898      if (_pointerEvents.size < 2) {
29899        _pointerEvents.set(event.pointerId, event);
29900      }
29901      if (state._pointerEvents.size < 2) return;
29902      this.start(event);
29903      const payload = distanceAngle(...Array.from(_pointerEvents.values()));
29904      this.pinchStart(event, payload);
29905    }
29906    pinchStart(event, payload) {
29907      const state = this.state;
29908      state.origin = payload.origin;
29909      this.computeValues([payload.distance, payload.angle]);
29910      this.computeInitial();
29911      this.compute(event);
29912      this.emit();
29913    }
29914    touchMove(event) {
29915      if (!this.state._active) return;
29916      const payload = touchDistanceAngle(event, this.state._touchIds);
29917      this.pinchMove(event, payload);
29918    }
29919    pointerMove(event) {
29920      const _pointerEvents = this.state._pointerEvents;
29921      if (_pointerEvents.has(event.pointerId)) {
29922        _pointerEvents.set(event.pointerId, event);
29923      }
29924      if (!this.state._active) return;
29925      const payload = distanceAngle(...Array.from(_pointerEvents.values()));
29926      this.pinchMove(event, payload);
29927    }
29928    pinchMove(event, payload) {
29929      const state = this.state;
29930      const prev_a = state._values[1];
29931      const delta_a = payload.angle - prev_a;
29932      let delta_turns = 0;
29933      if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a);
29934      this.computeValues([payload.distance, payload.angle - 360 * delta_turns]);
29935      state.origin = payload.origin;
29936      state.turns = delta_turns;
29937      state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]];
29938      this.compute(event);
29939      this.emit();
29940    }
29941    touchEnd(event) {
29942      this.ctrl.setEventIds(event);
29943      if (!this.state._active) return;
29944      if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) {
29945        this.state._active = false;
29946        this.compute(event);
29947        this.emit();
29948      }
29949    }
29950    pointerEnd(event) {
29951      const state = this.state;
29952      this.ctrl.setEventIds(event);
29953      try {
29954        event.target.releasePointerCapture(event.pointerId);
29955      } catch (_unused) {}
29956      if (state._pointerEvents.has(event.pointerId)) {
29957        state._pointerEvents.delete(event.pointerId);
29958      }
29959      if (!state._active) return;
29960      if (state._pointerEvents.size < 2) {
29961        state._active = false;
29962        this.compute(event);
29963        this.emit();
29964      }
29965    }
29966    gestureStart(event) {
29967      if (event.cancelable) event.preventDefault();
29968      const state = this.state;
29969      if (state._active) return;
29970      this.start(event);
29971      this.computeValues([event.scale, event.rotation]);
29972      state.origin = [event.clientX, event.clientY];
29973      this.compute(event);
29974      this.emit();
29975    }
29976    gestureMove(event) {
29977      if (event.cancelable) event.preventDefault();
29978      if (!this.state._active) return;
29979      const state = this.state;
29980      this.computeValues([event.scale, event.rotation]);
29981      state.origin = [event.clientX, event.clientY];
29982      const _previousMovement = state._movement;
29983      state._movement = [event.scale - 1, event.rotation];
29984      state._delta = V.sub(state._movement, _previousMovement);
29985      this.compute(event);
29986      this.emit();
29987    }
29988    gestureEnd(event) {
29989      if (!this.state._active) return;
29990      this.state._active = false;
29991      this.compute(event);
29992      this.emit();
29993    }
29994    wheel(event) {
29995      const modifierKey = this.config.modifierKey;
29996      if (modifierKey && !event[modifierKey]) return;
29997      if (!this.state._active) this.wheelStart(event);else this.wheelChange(event);
29998      this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
29999    }
30000    wheelStart(event) {
30001      this.start(event);
30002      this.wheelChange(event);
30003    }
30004    wheelChange(event) {
30005      const isR3f = ('uv' in event);
30006      if (!isR3f) {
30007        if (event.cancelable) {
30008          event.preventDefault();
30009        }
30010        if (false) {}
30011      }
30012      const state = this.state;
30013      state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
30014      V.addTo(state._movement, state._delta);
30015      clampStateInternalMovementToBounds(state);
30016      this.state.origin = [event.clientX, event.clientY];
30017      this.compute(event);
30018      this.emit();
30019    }
30020    wheelEnd() {
30021      if (!this.state._active) return;
30022      this.state._active = false;
30023      this.compute();
30024      this.emit();
30025    }
30026    bind(bindFunction) {
30027      const device = this.config.device;
30028      if (!!device) {
30029        bindFunction(device, 'start', this[device + 'Start'].bind(this));
30030        bindFunction(device, 'change', this[device + 'Move'].bind(this));
30031        bindFunction(device, 'end', this[device + 'End'].bind(this));
30032        bindFunction(device, 'cancel', this[device + 'End'].bind(this));
30033      }
30034      if (this.config.pinchOnWheel) {
30035        bindFunction('wheel', '', this.wheel.bind(this), {
30036          passive: false
30037        });
30038      }
30039    }
30040  }
30041  
30042  const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
30043    device(_v, _k, {
30044      shared,
30045      pointer: {
30046        touch = false
30047      } = {}
30048    }) {
30049      const sharedConfig = shared;
30050      if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture';
30051      if (SUPPORT.touch && touch) return 'touch';
30052      if (SUPPORT.touchscreen) {
30053        if (SUPPORT.pointer) return 'pointer';
30054        if (SUPPORT.touch) return 'touch';
30055      }
30056    },
30057    bounds(_v, _k, {
30058      scaleBounds = {},
30059      angleBounds = {}
30060    }) {
30061      const _scaleBounds = state => {
30062        const D = assignDefault(call(scaleBounds, state), {
30063          min: -Infinity,
30064          max: Infinity
30065        });
30066        return [D.min, D.max];
30067      };
30068      const _angleBounds = state => {
30069        const A = assignDefault(call(angleBounds, state), {
30070          min: -Infinity,
30071          max: Infinity
30072        });
30073        return [A.min, A.max];
30074      };
30075      if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()];
30076      return state => [_scaleBounds(state), _angleBounds(state)];
30077    },
30078    threshold(value, _k, config) {
30079      this.lockDirection = config.axis === 'lock';
30080      const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0);
30081      return threshold;
30082    },
30083    modifierKey(value) {
30084      if (value === undefined) return 'ctrlKey';
30085      return value;
30086    },
30087    pinchOnWheel(value = true) {
30088      return value;
30089    }
30090  });
30091  
30092  class MoveEngine extends CoordinatesEngine {
30093    constructor(...args) {
30094      super(...args);
30095      _defineProperty(this, "ingKey", 'moving');
30096    }
30097    move(event) {
30098      if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
30099      if (!this.state._active) this.moveStart(event);else this.moveChange(event);
30100      this.timeoutStore.add('moveEnd', this.moveEnd.bind(this));
30101    }
30102    moveStart(event) {
30103      this.start(event);
30104      this.computeValues(pointerValues(event));
30105      this.compute(event);
30106      this.computeInitial();
30107      this.emit();
30108    }
30109    moveChange(event) {
30110      if (!this.state._active) return;
30111      const values = pointerValues(event);
30112      const state = this.state;
30113      state._delta = V.sub(values, state._values);
30114      V.addTo(state._movement, state._delta);
30115      this.computeValues(values);
30116      this.compute(event);
30117      this.emit();
30118    }
30119    moveEnd(event) {
30120      if (!this.state._active) return;
30121      this.state._active = false;
30122      this.compute(event);
30123      this.emit();
30124    }
30125    bind(bindFunction) {
30126      bindFunction('pointer', 'change', this.move.bind(this));
30127      bindFunction('pointer', 'leave', this.moveEnd.bind(this));
30128    }
30129  }
30130  
30131  const moveConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
30132    mouseOnly: (value = true) => value
30133  });
30134  
30135  class ScrollEngine extends CoordinatesEngine {
30136    constructor(...args) {
30137      super(...args);
30138      _defineProperty(this, "ingKey", 'scrolling');
30139    }
30140    scroll(event) {
30141      if (!this.state._active) this.start(event);
30142      this.scrollChange(event);
30143      this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this));
30144    }
30145    scrollChange(event) {
30146      if (event.cancelable) event.preventDefault();
30147      const state = this.state;
30148      const values = scrollValues(event);
30149      state._delta = V.sub(values, state._values);
30150      V.addTo(state._movement, state._delta);
30151      this.computeValues(values);
30152      this.compute(event);
30153      this.emit();
30154    }
30155    scrollEnd() {
30156      if (!this.state._active) return;
30157      this.state._active = false;
30158      this.compute();
30159      this.emit();
30160    }
30161    bind(bindFunction) {
30162      bindFunction('scroll', '', this.scroll.bind(this));
30163    }
30164  }
30165  
30166  const scrollConfigResolver = coordinatesConfigResolver;
30167  
30168  class WheelEngine extends CoordinatesEngine {
30169    constructor(...args) {
30170      super(...args);
30171      _defineProperty(this, "ingKey", 'wheeling');
30172    }
30173    wheel(event) {
30174      if (!this.state._active) this.start(event);
30175      this.wheelChange(event);
30176      this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this));
30177    }
30178    wheelChange(event) {
30179      const state = this.state;
30180      state._delta = wheelValues(event);
30181      V.addTo(state._movement, state._delta);
30182      clampStateInternalMovementToBounds(state);
30183      this.compute(event);
30184      this.emit();
30185    }
30186    wheelEnd() {
30187      if (!this.state._active) return;
30188      this.state._active = false;
30189      this.compute();
30190      this.emit();
30191    }
30192    bind(bindFunction) {
30193      bindFunction('wheel', '', this.wheel.bind(this));
30194    }
30195  }
30196  
30197  const wheelConfigResolver = coordinatesConfigResolver;
30198  
30199  class HoverEngine extends CoordinatesEngine {
30200    constructor(...args) {
30201      super(...args);
30202      _defineProperty(this, "ingKey", 'hovering');
30203    }
30204    enter(event) {
30205      if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
30206      this.start(event);
30207      this.computeValues(pointerValues(event));
30208      this.compute(event);
30209      this.emit();
30210    }
30211    leave(event) {
30212      if (this.config.mouseOnly && event.pointerType !== 'mouse') return;
30213      const state = this.state;
30214      if (!state._active) return;
30215      state._active = false;
30216      const values = pointerValues(event);
30217      state._movement = state._delta = V.sub(values, state._values);
30218      this.computeValues(values);
30219      this.compute(event);
30220      state.delta = state.movement;
30221      this.emit();
30222    }
30223    bind(bindFunction) {
30224      bindFunction('pointer', 'enter', this.enter.bind(this));
30225      bindFunction('pointer', 'leave', this.leave.bind(this));
30226    }
30227  }
30228  
30229  const hoverConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigResolver), {}, {
30230    mouseOnly: (value = true) => value
30231  });
30232  
30233  const actions_b1cc53c2_esm_EngineMap = new Map();
30234  const ConfigResolverMap = new Map();
30235  function actions_b1cc53c2_esm_registerAction(action) {
30236    actions_b1cc53c2_esm_EngineMap.set(action.key, action.engine);
30237    ConfigResolverMap.set(action.key, action.resolver);
30238  }
30239  const actions_b1cc53c2_esm_dragAction = {
30240    key: 'drag',
30241    engine: DragEngine,
30242    resolver: dragConfigResolver
30243  };
30244  const actions_b1cc53c2_esm_hoverAction = {
30245    key: 'hover',
30246    engine: HoverEngine,
30247    resolver: hoverConfigResolver
30248  };
30249  const actions_b1cc53c2_esm_moveAction = {
30250    key: 'move',
30251    engine: MoveEngine,
30252    resolver: moveConfigResolver
30253  };
30254  const actions_b1cc53c2_esm_pinchAction = {
30255    key: 'pinch',
30256    engine: PinchEngine,
30257    resolver: pinchConfigResolver
30258  };
30259  const actions_b1cc53c2_esm_scrollAction = {
30260    key: 'scroll',
30261    engine: ScrollEngine,
30262    resolver: scrollConfigResolver
30263  };
30264  const actions_b1cc53c2_esm_wheelAction = {
30265    key: 'wheel',
30266    engine: WheelEngine,
30267    resolver: wheelConfigResolver
30268  };
30269  
30270  
30271  
30272  ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js
30273  
30274  
30275  
30276  function _objectWithoutPropertiesLoose(source, excluded) {
30277    if (source == null) return {};
30278    var target = {};
30279    var sourceKeys = Object.keys(source);
30280    var key, i;
30281    for (i = 0; i < sourceKeys.length; i++) {
30282      key = sourceKeys[i];
30283      if (excluded.indexOf(key) >= 0) continue;
30284      target[key] = source[key];
30285    }
30286    return target;
30287  }
30288  
30289  function _objectWithoutProperties(source, excluded) {
30290    if (source == null) return {};
30291    var target = _objectWithoutPropertiesLoose(source, excluded);
30292    var key, i;
30293    if (Object.getOwnPropertySymbols) {
30294      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
30295      for (i = 0; i < sourceSymbolKeys.length; i++) {
30296        key = sourceSymbolKeys[i];
30297        if (excluded.indexOf(key) >= 0) continue;
30298        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
30299        target[key] = source[key];
30300      }
30301    }
30302    return target;
30303  }
30304  
30305  const sharedConfigResolver = {
30306    target(value) {
30307      if (value) {
30308        return () => 'current' in value ? value.current : value;
30309      }
30310      return undefined;
30311    },
30312    enabled(value = true) {
30313      return value;
30314    },
30315    window(value = SUPPORT.isBrowser ? window : undefined) {
30316      return value;
30317    },
30318    eventOptions({
30319      passive = true,
30320      capture = false
30321    } = {}) {
30322      return {
30323        passive,
30324        capture
30325      };
30326    },
30327    transform(value) {
30328      return value;
30329    }
30330  };
30331  
30332  const _excluded = ["target", "eventOptions", "window", "enabled", "transform"];
30333  function resolveWith(config = {}, resolvers) {
30334    const result = {};
30335    for (const [key, resolver] of Object.entries(resolvers)) {
30336      switch (typeof resolver) {
30337        case 'function':
30338          if (false) {} else {
30339            result[key] = resolver.call(result, config[key], key, config);
30340          }
30341          break;
30342        case 'object':
30343          result[key] = resolveWith(config[key], resolver);
30344          break;
30345        case 'boolean':
30346          if (resolver) result[key] = config[key];
30347          break;
30348      }
30349    }
30350    return result;
30351  }
30352  function use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) {
30353    const _ref = newConfig,
30354      {
30355        target,
30356        eventOptions,
30357        window,
30358        enabled,
30359        transform
30360      } = _ref,
30361      rest = _objectWithoutProperties(_ref, _excluded);
30362    _config.shared = resolveWith({
30363      target,
30364      eventOptions,
30365      window,
30366      enabled,
30367      transform
30368    }, sharedConfigResolver);
30369    if (gestureKey) {
30370      const resolver = ConfigResolverMap.get(gestureKey);
30371      _config[gestureKey] = resolveWith(_objectSpread2({
30372        shared: _config.shared
30373      }, rest), resolver);
30374    } else {
30375      for (const key in rest) {
30376        const resolver = ConfigResolverMap.get(key);
30377        if (resolver) {
30378          _config[key] = resolveWith(_objectSpread2({
30379            shared: _config.shared
30380          }, rest[key]), resolver);
30381        } else if (false) {}
30382      }
30383    }
30384    return _config;
30385  }
30386  
30387  class EventStore {
30388    constructor(ctrl, gestureKey) {
30389      _defineProperty(this, "_listeners", new Set());
30390      this._ctrl = ctrl;
30391      this._gestureKey = gestureKey;
30392    }
30393    add(element, device, action, handler, options) {
30394      const listeners = this._listeners;
30395      const type = toDomEventType(device, action);
30396      const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {};
30397      const eventOptions = _objectSpread2(_objectSpread2({}, _options), options);
30398      element.addEventListener(type, handler, eventOptions);
30399      const remove = () => {
30400        element.removeEventListener(type, handler, eventOptions);
30401        listeners.delete(remove);
30402      };
30403      listeners.add(remove);
30404      return remove;
30405    }
30406    clean() {
30407      this._listeners.forEach(remove => remove());
30408      this._listeners.clear();
30409    }
30410  }
30411  
30412  class TimeoutStore {
30413    constructor() {
30414      _defineProperty(this, "_timeouts", new Map());
30415    }
30416    add(key, callback, ms = 140, ...args) {
30417      this.remove(key);
30418      this._timeouts.set(key, window.setTimeout(callback, ms, ...args));
30419    }
30420    remove(key) {
30421      const timeout = this._timeouts.get(key);
30422      if (timeout) window.clearTimeout(timeout);
30423    }
30424    clean() {
30425      this._timeouts.forEach(timeout => void window.clearTimeout(timeout));
30426      this._timeouts.clear();
30427    }
30428  }
30429  
30430  class Controller {
30431    constructor(handlers) {
30432      _defineProperty(this, "gestures", new Set());
30433      _defineProperty(this, "_targetEventStore", new EventStore(this));
30434      _defineProperty(this, "gestureEventStores", {});
30435      _defineProperty(this, "gestureTimeoutStores", {});
30436      _defineProperty(this, "handlers", {});
30437      _defineProperty(this, "config", {});
30438      _defineProperty(this, "pointerIds", new Set());
30439      _defineProperty(this, "touchIds", new Set());
30440      _defineProperty(this, "state", {
30441        shared: {
30442          shiftKey: false,
30443          metaKey: false,
30444          ctrlKey: false,
30445          altKey: false
30446        }
30447      });
30448      resolveGestures(this, handlers);
30449    }
30450    setEventIds(event) {
30451      if (isTouch(event)) {
30452        this.touchIds = new Set(touchIds(event));
30453        return this.touchIds;
30454      } else if ('pointerId' in event) {
30455        if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId);
30456        return this.pointerIds;
30457      }
30458    }
30459    applyHandlers(handlers, nativeHandlers) {
30460      this.handlers = handlers;
30461      this.nativeHandlers = nativeHandlers;
30462    }
30463    applyConfig(config, gestureKey) {
30464      this.config = use_gesture_core_esm_parse(config, gestureKey, this.config);
30465    }
30466    clean() {
30467      this._targetEventStore.clean();
30468      for (const key of this.gestures) {
30469        this.gestureEventStores[key].clean();
30470        this.gestureTimeoutStores[key].clean();
30471      }
30472    }
30473    effect() {
30474      if (this.config.shared.target) this.bind();
30475      return () => this._targetEventStore.clean();
30476    }
30477    bind(...args) {
30478      const sharedConfig = this.config.shared;
30479      const props = {};
30480      let target;
30481      if (sharedConfig.target) {
30482        target = sharedConfig.target();
30483        if (!target) return;
30484      }
30485      if (sharedConfig.enabled) {
30486        for (const gestureKey of this.gestures) {
30487          const gestureConfig = this.config[gestureKey];
30488          const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target);
30489          if (gestureConfig.enabled) {
30490            const Engine = actions_b1cc53c2_esm_EngineMap.get(gestureKey);
30491            new Engine(this, args, gestureKey).bind(bindFunction);
30492          }
30493        }
30494        const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
30495        for (const eventKey in this.nativeHandlers) {
30496          nativeBindFunction(eventKey, '', event => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
30497            event,
30498            args
30499          })), undefined, true);
30500        }
30501      }
30502      for (const handlerProp in props) {
30503        props[handlerProp] = actions_b1cc53c2_esm_chain(...props[handlerProp]);
30504      }
30505      if (!target) return props;
30506      for (const handlerProp in props) {
30507        const {
30508          device,
30509          capture,
30510          passive
30511        } = parseProp(handlerProp);
30512        this._targetEventStore.add(target, device, '', props[handlerProp], {
30513          capture,
30514          passive
30515        });
30516      }
30517    }
30518  }
30519  function setupGesture(ctrl, gestureKey) {
30520    ctrl.gestures.add(gestureKey);
30521    ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey);
30522    ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore();
30523  }
30524  function resolveGestures(ctrl, internalHandlers) {
30525    if (internalHandlers.drag) setupGesture(ctrl, 'drag');
30526    if (internalHandlers.wheel) setupGesture(ctrl, 'wheel');
30527    if (internalHandlers.scroll) setupGesture(ctrl, 'scroll');
30528    if (internalHandlers.move) setupGesture(ctrl, 'move');
30529    if (internalHandlers.pinch) setupGesture(ctrl, 'pinch');
30530    if (internalHandlers.hover) setupGesture(ctrl, 'hover');
30531  }
30532  const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => {
30533    var _options$capture, _options$passive;
30534    const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture;
30535    const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive;
30536    let handlerProp = isNative ? device : toHandlerProp(device, action, capture);
30537    if (withPassiveOption && passive) handlerProp += 'Passive';
30538    props[handlerProp] = props[handlerProp] || [];
30539    props[handlerProp].push(handler);
30540  };
30541  
30542  const RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/;
30543  function sortHandlers(_handlers) {
30544    const native = {};
30545    const handlers = {};
30546    const actions = new Set();
30547    for (let key in _handlers) {
30548      if (RE_NOT_NATIVE.test(key)) {
30549        actions.add(RegExp.lastMatch);
30550        handlers[key] = _handlers[key];
30551      } else {
30552        native[key] = _handlers[key];
30553      }
30554    }
30555    return [handlers, native, actions];
30556  }
30557  function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) {
30558    if (!actions.has(handlerKey)) return;
30559    if (!EngineMap.has(key)) {
30560      if (false) {}
30561      return;
30562    }
30563    const startKey = handlerKey + 'Start';
30564    const endKey = handlerKey + 'End';
30565    const fn = state => {
30566      let memo = undefined;
30567      if (state.first && startKey in handlers) handlers[startKey](state);
30568      if (handlerKey in handlers) memo = handlers[handlerKey](state);
30569      if (state.last && endKey in handlers) handlers[endKey](state);
30570      return memo;
30571    };
30572    internalHandlers[key] = fn;
30573    config[key] = config[key] || {};
30574  }
30575  function use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) {
30576    const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers);
30577    const internalHandlers = {};
30578    registerGesture(actions, handlers, 'onDrag', 'drag', internalHandlers, mergedConfig);
30579    registerGesture(actions, handlers, 'onWheel', 'wheel', internalHandlers, mergedConfig);
30580    registerGesture(actions, handlers, 'onScroll', 'scroll', internalHandlers, mergedConfig);
30581    registerGesture(actions, handlers, 'onPinch', 'pinch', internalHandlers, mergedConfig);
30582    registerGesture(actions, handlers, 'onMove', 'move', internalHandlers, mergedConfig);
30583    registerGesture(actions, handlers, 'onHover', 'hover', internalHandlers, mergedConfig);
30584    return {
30585      handlers: internalHandlers,
30586      config: mergedConfig,
30587      nativeHandlers
30588    };
30589  }
30590  
30591  
30592  
30593  ;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js
30594  
30595  
30596  
30597  
30598  
30599  
30600  
30601  function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
30602    const ctrl = external_React_default().useMemo(() => new Controller(handlers), []);
30603    ctrl.applyHandlers(handlers, nativeHandlers);
30604    ctrl.applyConfig(config, gestureKey);
30605    external_React_default().useEffect(ctrl.effect.bind(ctrl));
30606    external_React_default().useEffect(() => {
30607      return ctrl.clean.bind(ctrl);
30608    }, []);
30609    if (config.target === undefined) {
30610      return ctrl.bind.bind(ctrl);
30611    }
30612    return undefined;
30613  }
30614  
30615  function useDrag(handler, config) {
30616    actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_dragAction);
30617    return useRecognizers({
30618      drag: handler
30619    }, config || {}, 'drag');
30620  }
30621  
30622  function usePinch(handler, config) {
30623    registerAction(pinchAction);
30624    return useRecognizers({
30625      pinch: handler
30626    }, config || {}, 'pinch');
30627  }
30628  
30629  function useWheel(handler, config) {
30630    registerAction(wheelAction);
30631    return useRecognizers({
30632      wheel: handler
30633    }, config || {}, 'wheel');
30634  }
30635  
30636  function useScroll(handler, config) {
30637    registerAction(scrollAction);
30638    return useRecognizers({
30639      scroll: handler
30640    }, config || {}, 'scroll');
30641  }
30642  
30643  function useMove(handler, config) {
30644    registerAction(moveAction);
30645    return useRecognizers({
30646      move: handler
30647    }, config || {}, 'move');
30648  }
30649  
30650  function useHover(handler, config) {
30651    registerAction(hoverAction);
30652    return useRecognizers({
30653      hover: handler
30654    }, config || {}, 'hover');
30655  }
30656  
30657  function createUseGesture(actions) {
30658    actions.forEach(registerAction);
30659    return function useGesture(_handlers, _config) {
30660      const {
30661        handlers,
30662        nativeHandlers,
30663        config
30664      } = parseMergedHandlers(_handlers, _config || {});
30665      return useRecognizers(handlers, config, undefined, nativeHandlers);
30666    };
30667  }
30668  
30669  function useGesture(handlers, config) {
30670    const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]);
30671    return hook(handlers, config || {});
30672  }
30673  
30674  
30675  
30676  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/utils.js
30677  /**
30678   * External dependencies
30679   */
30680  
30681  /**
30682   * WordPress dependencies
30683   */
30684  
30685  
30686  /**
30687   * Internal dependencies
30688   */
30689  
30690  /**
30691   * Gets a CSS cursor value based on a drag direction.
30692   *
30693   * @param dragDirection The drag direction.
30694   * @return  The CSS cursor value.
30695   */
30696  function getDragCursor(dragDirection) {
30697    let dragCursor = 'ns-resize';
30698    switch (dragDirection) {
30699      case 'n':
30700      case 's':
30701        dragCursor = 'ns-resize';
30702        break;
30703      case 'e':
30704      case 'w':
30705        dragCursor = 'ew-resize';
30706        break;
30707    }
30708    return dragCursor;
30709  }
30710  
30711  /**
30712   * Custom hook that renders a drag cursor when dragging.
30713   *
30714   * @param {boolean} isDragging    The dragging state.
30715   * @param {string}  dragDirection The drag direction.
30716   *
30717   * @return {string} The CSS cursor value.
30718   */
30719  function useDragCursor(isDragging, dragDirection) {
30720    const dragCursor = getDragCursor(dragDirection);
30721    (0,external_wp_element_namespaceObject.useEffect)(() => {
30722      if (isDragging) {
30723        document.documentElement.style.cursor = dragCursor;
30724      } else {
30725        // @ts-expect-error
30726        document.documentElement.style.cursor = null;
30727      }
30728    }, [isDragging, dragCursor]);
30729    return dragCursor;
30730  }
30731  function useDraft(props) {
30732    const refPreviousValue = (0,external_wp_element_namespaceObject.useRef)(props.value);
30733    const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({});
30734    const value = draft.value !== undefined ? draft.value : props.value;
30735  
30736    // Determines when to discard the draft value to restore controlled status.
30737    // To do so, it tracks the previous value and marks the draft value as stale
30738    // after each render.
30739    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
30740      const {
30741        current: previousValue
30742      } = refPreviousValue;
30743      refPreviousValue.current = props.value;
30744      if (draft.value !== undefined && !draft.isStale) setDraft({
30745        ...draft,
30746        isStale: true
30747      });else if (draft.isStale && props.value !== previousValue) setDraft({});
30748    }, [props.value, draft]);
30749    const onChange = (nextValue, extra) => {
30750      // Mutates the draft value to avoid an extra effect run.
30751      setDraft(current => Object.assign(current, {
30752        value: nextValue,
30753        isStale: false
30754      }));
30755      props.onChange(nextValue, extra);
30756    };
30757    const onBlur = event => {
30758      setDraft({});
30759      props.onBlur?.(event);
30760    };
30761    return {
30762      value,
30763      onBlur,
30764      onChange
30765    };
30766  }
30767  
30768  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js
30769  /**
30770   * External dependencies
30771   */
30772  
30773  /**
30774   * Internal dependencies
30775   */
30776  
30777  const initialStateReducer = state => state;
30778  const initialInputControlState = {
30779    error: null,
30780    initialValue: '',
30781    isDirty: false,
30782    isDragEnabled: false,
30783    isDragging: false,
30784    isPressEnterToChange: false,
30785    value: ''
30786  };
30787  
30788  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js
30789  /**
30790   * External dependencies
30791   */
30792  
30793  /**
30794   * Internal dependencies
30795   */
30796  
30797  const CHANGE = 'CHANGE';
30798  const COMMIT = 'COMMIT';
30799  const CONTROL = 'CONTROL';
30800  const DRAG_END = 'DRAG_END';
30801  const DRAG_START = 'DRAG_START';
30802  const DRAG = 'DRAG';
30803  const INVALIDATE = 'INVALIDATE';
30804  const PRESS_DOWN = 'PRESS_DOWN';
30805  const PRESS_ENTER = 'PRESS_ENTER';
30806  const PRESS_UP = 'PRESS_UP';
30807  const RESET = 'RESET';
30808  
30809  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/reducer.js
30810  /**
30811   * External dependencies
30812   */
30813  
30814  /**
30815   * WordPress dependencies
30816   */
30817  
30818  
30819  /**
30820   * Internal dependencies
30821   */
30822  
30823  
30824  
30825  /**
30826   * Prepares initialState for the reducer.
30827   *
30828   * @param initialState The initial state.
30829   * @return Prepared initialState for the reducer
30830   */
30831  function mergeInitialState(initialState = initialInputControlState) {
30832    const {
30833      value
30834    } = initialState;
30835    return {
30836      ...initialInputControlState,
30837      ...initialState,
30838      initialValue: value
30839    };
30840  }
30841  
30842  /**
30843   * Creates the base reducer which may be coupled to a specializing reducer.
30844   * As its final step, for all actions other than CONTROL, the base reducer
30845   * passes the state and action on through the specializing reducer. The
30846   * exception for CONTROL actions is because they represent controlled updates
30847   * from props and no case has yet presented for their specialization.
30848   *
30849   * @param composedStateReducers A reducer to specialize state changes.
30850   * @return The reducer.
30851   */
30852  function inputControlStateReducer(composedStateReducers) {
30853    return (state, action) => {
30854      const nextState = {
30855        ...state
30856      };
30857      switch (action.type) {
30858        /*
30859         * Controlled updates
30860         */
30861        case CONTROL:
30862          nextState.value = action.payload.value;
30863          nextState.isDirty = false;
30864          nextState._event = undefined;
30865          // Returns immediately to avoid invoking additional reducers.
30866          return nextState;
30867  
30868        /**
30869         * Keyboard events
30870         */
30871        case PRESS_UP:
30872          nextState.isDirty = false;
30873          break;
30874        case PRESS_DOWN:
30875          nextState.isDirty = false;
30876          break;
30877  
30878        /**
30879         * Drag events
30880         */
30881        case DRAG_START:
30882          nextState.isDragging = true;
30883          break;
30884        case DRAG_END:
30885          nextState.isDragging = false;
30886          break;
30887  
30888        /**
30889         * Input events
30890         */
30891        case CHANGE:
30892          nextState.error = null;
30893          nextState.value = action.payload.value;
30894          if (state.isPressEnterToChange) {
30895            nextState.isDirty = true;
30896          }
30897          break;
30898        case COMMIT:
30899          nextState.value = action.payload.value;
30900          nextState.isDirty = false;
30901          break;
30902        case RESET:
30903          nextState.error = null;
30904          nextState.isDirty = false;
30905          nextState.value = action.payload.value || state.initialValue;
30906          break;
30907  
30908        /**
30909         * Validation
30910         */
30911        case INVALIDATE:
30912          nextState.error = action.payload.error;
30913          break;
30914      }
30915      nextState._event = action.payload.event;
30916  
30917      /**
30918       * Send the nextState + action to the composedReducers via
30919       * this "bridge" mechanism. This allows external stateReducers
30920       * to hook into actions, and modify state if needed.
30921       */
30922      return composedStateReducers(nextState, action);
30923    };
30924  }
30925  
30926  /**
30927   * A custom hook that connects and external stateReducer with an internal
30928   * reducer. This hook manages the internal state of InputControl.
30929   * However, by connecting an external stateReducer function, other
30930   * components can react to actions as well as modify state before it is
30931   * applied.
30932   *
30933   * This technique uses the "stateReducer" design pattern:
30934   * https://kentcdodds.com/blog/the-state-reducer-pattern/
30935   *
30936   * @param stateReducer    An external state reducer.
30937   * @param initialState    The initial state for the reducer.
30938   * @param onChangeHandler A handler for the onChange event.
30939   * @return State, dispatch, and a collection of actions.
30940   */
30941  function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {
30942    const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState));
30943    const createChangeEvent = type => (nextValue, event) => {
30944      dispatch({
30945        type,
30946        payload: {
30947          value: nextValue,
30948          event
30949        }
30950      });
30951    };
30952    const createKeyEvent = type => event => {
30953      dispatch({
30954        type,
30955        payload: {
30956          event
30957        }
30958      });
30959    };
30960    const createDragEvent = type => payload => {
30961      dispatch({
30962        type,
30963        payload
30964      });
30965    };
30966  
30967    /**
30968     * Actions for the reducer
30969     */
30970    const change = createChangeEvent(CHANGE);
30971    const invalidate = (error, event) => dispatch({
30972      type: INVALIDATE,
30973      payload: {
30974        error,
30975        event
30976      }
30977    });
30978    const reset = createChangeEvent(RESET);
30979    const commit = createChangeEvent(COMMIT);
30980    const dragStart = createDragEvent(DRAG_START);
30981    const drag = createDragEvent(DRAG);
30982    const dragEnd = createDragEvent(DRAG_END);
30983    const pressUp = createKeyEvent(PRESS_UP);
30984    const pressDown = createKeyEvent(PRESS_DOWN);
30985    const pressEnter = createKeyEvent(PRESS_ENTER);
30986    const currentState = (0,external_wp_element_namespaceObject.useRef)(state);
30987    const refProps = (0,external_wp_element_namespaceObject.useRef)({
30988      value: initialState.value,
30989      onChangeHandler
30990    });
30991  
30992    // Freshens refs to props and state so that subsequent effects have access
30993    // to their latest values without their changes causing effect runs.
30994    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
30995      currentState.current = state;
30996      refProps.current = {
30997        value: initialState.value,
30998        onChangeHandler
30999      };
31000    });
31001  
31002    // Propagates the latest state through onChange.
31003    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
31004      if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
31005        var _state$value;
31006        refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
31007          event: currentState.current._event
31008        });
31009      }
31010    }, [state.value, state.isDirty]);
31011  
31012    // Updates the state from props.
31013    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
31014      if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
31015        var _initialState$value;
31016        dispatch({
31017          type: CONTROL,
31018          payload: {
31019            value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''
31020          }
31021        });
31022      }
31023    }, [initialState.value]);
31024    return {
31025      change,
31026      commit,
31027      dispatch,
31028      drag,
31029      dragEnd,
31030      dragStart,
31031      invalidate,
31032      pressDown,
31033      pressEnter,
31034      pressUp,
31035      reset,
31036      state
31037    };
31038  }
31039  
31040  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-field.js
31041  
31042  /**
31043   * External dependencies
31044   */
31045  
31046  /**
31047   * WordPress dependencies
31048   */
31049  
31050  /**
31051   * Internal dependencies
31052   */
31053  
31054  
31055  
31056  
31057  const input_field_noop = () => {};
31058  function InputField({
31059    disabled = false,
31060    dragDirection = 'n',
31061    dragThreshold = 10,
31062    id,
31063    isDragEnabled = false,
31064    isFocused,
31065    isPressEnterToChange = false,
31066    onBlur = input_field_noop,
31067    onChange = input_field_noop,
31068    onDrag = input_field_noop,
31069    onDragEnd = input_field_noop,
31070    onDragStart = input_field_noop,
31071    onFocus = input_field_noop,
31072    onKeyDown = input_field_noop,
31073    onValidate = input_field_noop,
31074    size = 'default',
31075    setIsFocused,
31076    stateReducer = state => state,
31077    value: valueProp,
31078    type,
31079    ...props
31080  }, ref) {
31081    const {
31082      // State.
31083      state,
31084      // Actions.
31085      change,
31086      commit,
31087      drag,
31088      dragEnd,
31089      dragStart,
31090      invalidate,
31091      pressDown,
31092      pressEnter,
31093      pressUp,
31094      reset
31095    } = useInputControlStateReducer(stateReducer, {
31096      isDragEnabled,
31097      value: valueProp,
31098      isPressEnterToChange
31099    }, onChange);
31100    const {
31101      value,
31102      isDragging,
31103      isDirty
31104    } = state;
31105    const wasDirtyOnBlur = (0,external_wp_element_namespaceObject.useRef)(false);
31106    const dragCursor = useDragCursor(isDragging, dragDirection);
31107    const handleOnBlur = event => {
31108      onBlur(event);
31109      setIsFocused?.(false);
31110  
31111      /**
31112       * If isPressEnterToChange is set, this commits the value to
31113       * the onChange callback.
31114       */
31115      if (isDirty || !event.target.validity.valid) {
31116        wasDirtyOnBlur.current = true;
31117        handleOnCommit(event);
31118      }
31119    };
31120    const handleOnFocus = event => {
31121      onFocus(event);
31122      setIsFocused?.(true);
31123    };
31124    const handleOnChange = event => {
31125      const nextValue = event.target.value;
31126      change(nextValue, event);
31127    };
31128    const handleOnCommit = event => {
31129      const nextValue = event.currentTarget.value;
31130      try {
31131        onValidate(nextValue);
31132        commit(nextValue, event);
31133      } catch (err) {
31134        invalidate(err, event);
31135      }
31136    };
31137    const handleOnKeyDown = event => {
31138      const {
31139        key
31140      } = event;
31141      onKeyDown(event);
31142      switch (key) {
31143        case 'ArrowUp':
31144          pressUp(event);
31145          break;
31146        case 'ArrowDown':
31147          pressDown(event);
31148          break;
31149        case 'Enter':
31150          pressEnter(event);
31151          if (isPressEnterToChange) {
31152            event.preventDefault();
31153            handleOnCommit(event);
31154          }
31155          break;
31156        case 'Escape':
31157          if (isPressEnterToChange && isDirty) {
31158            event.preventDefault();
31159            reset(valueProp, event);
31160          }
31161          break;
31162      }
31163    };
31164    const dragGestureProps = useDrag(dragProps => {
31165      const {
31166        distance,
31167        dragging,
31168        event,
31169        target
31170      } = dragProps;
31171  
31172      // The `target` prop always references the `input` element while, by
31173      // default, the `dragProps.event.target` property would reference the real
31174      // event target (i.e. any DOM element that the pointer is hovering while
31175      // dragging). Ensuring that the `target` is always the `input` element
31176      // allows consumers of `InputControl` (or any higher-level control) to
31177      // check the input's validity by accessing `event.target.validity.valid`.
31178      dragProps.event = {
31179        ...dragProps.event,
31180        target
31181      };
31182      if (!distance) return;
31183      event.stopPropagation();
31184  
31185      /**
31186       * Quick return if no longer dragging.
31187       * This prevents unnecessary value calculations.
31188       */
31189      if (!dragging) {
31190        onDragEnd(dragProps);
31191        dragEnd(dragProps);
31192        return;
31193      }
31194      onDrag(dragProps);
31195      drag(dragProps);
31196      if (!isDragging) {
31197        onDragStart(dragProps);
31198        dragStart(dragProps);
31199      }
31200    }, {
31201      axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
31202      threshold: dragThreshold,
31203      enabled: isDragEnabled,
31204      pointer: {
31205        capture: false
31206      }
31207    });
31208    const dragProps = isDragEnabled ? dragGestureProps() : {};
31209    /*
31210     * Works around the odd UA (e.g. Firefox) that does not focus inputs of
31211     * type=number when their spinner arrows are pressed.
31212     */
31213    let handleOnMouseDown;
31214    if (type === 'number') {
31215      handleOnMouseDown = event => {
31216        props.onMouseDown?.(event);
31217        if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
31218          event.currentTarget.focus();
31219        }
31220      };
31221    }
31222    return (0,external_React_.createElement)(Input, {
31223      ...props,
31224      ...dragProps,
31225      className: "components-input-control__input",
31226      disabled: disabled,
31227      dragCursor: dragCursor,
31228      isDragging: isDragging,
31229      id: id,
31230      onBlur: handleOnBlur,
31231      onChange: handleOnChange,
31232      onFocus: handleOnFocus,
31233      onKeyDown: handleOnKeyDown,
31234      onMouseDown: handleOnMouseDown,
31235      ref: ref,
31236      inputSize: size
31237      // Fallback to `''` to avoid "uncontrolled to controlled" warning.
31238      // See https://github.com/WordPress/gutenberg/pull/47250 for details.
31239      ,
31240      value: value !== null && value !== void 0 ? value : '',
31241      type: type
31242    });
31243  }
31244  const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField);
31245  /* harmony default export */ const input_field = (ForwardedComponent);
31246  
31247  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-values.js
31248  /* harmony default export */ const font_values = ({
31249    'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
31250    'default.fontSize': '13px',
31251    'helpText.fontSize': '12px',
31252    mobileTextMinFontSize: '16px'
31253  });
31254  
31255  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font.js
31256  /**
31257   * Internal dependencies
31258   */
31259  
31260  
31261  /**
31262   *
31263   * @param {keyof FONT} value Path of value from `FONT`
31264   * @return {string} Font rule value
31265   */
31266  function font(value) {
31267    var _FONT$value;
31268    return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';
31269  }
31270  
31271  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/box-sizing.js
31272  function 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)."; }
31273  /**
31274   * External dependencies
31275   */
31276  
31277  const boxSizingReset =  true ? {
31278    name: "kv6lnz",
31279    styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
31280  } : 0;
31281  
31282  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js
31283  
31284  function 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)."; }
31285  /**
31286   * External dependencies
31287   */
31288  
31289  
31290  
31291  /**
31292   * Internal dependencies
31293   */
31294  
31295  
31296  const base_control_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
31297    target: "ej5x27r4"
31298  } : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0));
31299  const deprecatedMarginField = ({
31300    __nextHasNoMarginBottom = false
31301  }) => {
31302    return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0),  true ? "" : 0);
31303  };
31304  const StyledField = emotion_styled_base_browser_esm("div",  true ? {
31305    target: "ej5x27r3"
31306  } : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0));
31307  const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0),  true ? "" : 0);
31308  const StyledLabel = emotion_styled_base_browser_esm("label",  true ? {
31309    target: "ej5x27r2"
31310  } : 0)(labelStyles, ";" + ( true ? "" : 0));
31311  var base_control_styles_ref =  true ? {
31312    name: "11yad0w",
31313    styles: "margin-bottom:revert"
31314  } : 0;
31315  const deprecatedMarginHelp = ({
31316    __nextHasNoMarginBottom = false
31317  }) => {
31318    return !__nextHasNoMarginBottom && base_control_styles_ref;
31319  };
31320  const StyledHelp = emotion_styled_base_browser_esm("p",  true ? {
31321    target: "ej5x27r1"
31322  } : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + ( true ? "" : 0));
31323  const StyledVisualLabel = emotion_styled_base_browser_esm("span",  true ? {
31324    target: "ej5x27r0"
31325  } : 0)(labelStyles, ";" + ( true ? "" : 0));
31326  
31327  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/index.js
31328  
31329  /**
31330   * External dependencies
31331   */
31332  
31333  
31334  /**
31335   * Internal dependencies
31336   */
31337  
31338  
31339  
31340  
31341  
31342  /**
31343   * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
31344   *
31345   * ```jsx
31346   * import { BaseControl, useBaseControlProps } from '@wordpress/components';
31347   *
31348   * // Render a `BaseControl` for a textarea input
31349   * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
31350   *     // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
31351   *     // and the inner control itself. Namely, it takes care of generating a unique `id`,
31352   *     // properly associating it with the `label` and `help` elements.
31353   *     const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
31354   *
31355   *     return (
31356   *         <BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
31357   *             <textarea { ...controlProps }>
31358   *               { children }
31359   *             </textarea>
31360   *         </BaseControl>
31361   *     );
31362   * );
31363   * ```
31364   */
31365  const UnconnectedBaseControl = props => {
31366    const {
31367      __nextHasNoMarginBottom = false,
31368      id,
31369      label,
31370      hideLabelFromVision = false,
31371      help,
31372      className,
31373      children
31374    } = useContextSystem(props, 'BaseControl');
31375    return (0,external_React_.createElement)(base_control_styles_Wrapper, {
31376      className: className
31377    }, (0,external_React_.createElement)(StyledField, {
31378      className: "components-base-control__field"
31379      // TODO: Official deprecation for this should start after all internal usages have been migrated
31380      ,
31381      __nextHasNoMarginBottom: __nextHasNoMarginBottom
31382    }, label && id && (hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, {
31383      as: "label",
31384      htmlFor: id
31385    }, label) : (0,external_React_.createElement)(StyledLabel, {
31386      className: "components-base-control__label",
31387      htmlFor: id
31388    }, label)), label && !id && (hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, {
31389      as: "label"
31390    }, label) : (0,external_React_.createElement)(VisualLabel, null, label)), children), !!help && (0,external_React_.createElement)(StyledHelp, {
31391      id: id ? id + '__help' : undefined,
31392      className: "components-base-control__help",
31393      __nextHasNoMarginBottom: __nextHasNoMarginBottom
31394    }, help));
31395  };
31396  
31397  /**
31398   * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
31399   *
31400   * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
31401   * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
31402   * otherwise use if the `label` prop was passed.
31403   *
31404   * @example
31405   * import { BaseControl } from '@wordpress/components';
31406   *
31407   * const MyBaseControl = () => (
31408   *     <BaseControl help="This button is already accessibly labeled.">
31409   *         <BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
31410   *         <Button>Select an author</Button>
31411   *     </BaseControl>
31412   * );
31413   */
31414  const VisualLabel = ({
31415    className,
31416    children,
31417    ...props
31418  }) => {
31419    return (0,external_React_.createElement)(StyledVisualLabel, {
31420      ...props,
31421      className: classnames_default()('components-base-control__label', className)
31422    }, children);
31423  };
31424  const BaseControl = Object.assign(contextConnectWithoutRef(UnconnectedBaseControl, 'BaseControl'), {
31425    VisualLabel
31426  });
31427  /* harmony default export */ const base_control = (BaseControl);
31428  
31429  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/index.js
31430  
31431  /**
31432   * External dependencies
31433   */
31434  
31435  /**
31436   * WordPress dependencies
31437   */
31438  
31439  
31440  
31441  /**
31442   * Internal dependencies
31443   */
31444  
31445  
31446  
31447  
31448  
31449  
31450  const input_control_noop = () => {};
31451  function input_control_useUniqueId(idProp) {
31452    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl);
31453    const id = `inspector-input-control-$instanceId}`;
31454    return idProp || id;
31455  }
31456  function UnforwardedInputControl(props, ref) {
31457    const {
31458      __next40pxDefaultSize,
31459      __unstableStateReducer: stateReducer = state => state,
31460      __unstableInputWidth,
31461      className,
31462      disabled = false,
31463      help,
31464      hideLabelFromVision = false,
31465      id: idProp,
31466      isPressEnterToChange = false,
31467      label,
31468      labelPosition = 'top',
31469      onChange = input_control_noop,
31470      onValidate = input_control_noop,
31471      onKeyDown = input_control_noop,
31472      prefix,
31473      size = 'default',
31474      style,
31475      suffix,
31476      value,
31477      ...restProps
31478    } = useDeprecated36pxDefaultSizeProp(props);
31479    const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
31480    const id = input_control_useUniqueId(idProp);
31481    const classes = classnames_default()('components-input-control', className);
31482    const draftHookProps = useDraft({
31483      value,
31484      onBlur: restProps.onBlur,
31485      onChange
31486    });
31487  
31488    // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
31489    const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
31490    const helpProp = !!help ? {
31491      [helpPropName]: `$id}__help`
31492    } : {};
31493    return (0,external_React_.createElement)(base_control, {
31494      className: classes,
31495      help: help,
31496      id: id,
31497      __nextHasNoMarginBottom: true
31498    }, (0,external_React_.createElement)(input_base, {
31499      __next40pxDefaultSize: __next40pxDefaultSize,
31500      __unstableInputWidth: __unstableInputWidth,
31501      disabled: disabled,
31502      gap: 3,
31503      hideLabelFromVision: hideLabelFromVision,
31504      id: id,
31505      isFocused: isFocused,
31506      justify: "left",
31507      label: label,
31508      labelPosition: labelPosition,
31509      prefix: prefix,
31510      size: size,
31511      style: style,
31512      suffix: suffix
31513    }, (0,external_React_.createElement)(input_field, {
31514      ...restProps,
31515      ...helpProp,
31516      __next40pxDefaultSize: __next40pxDefaultSize,
31517      className: "components-input-control__input",
31518      disabled: disabled,
31519      id: id,
31520      isFocused: isFocused,
31521      isPressEnterToChange: isPressEnterToChange,
31522      onKeyDown: onKeyDown,
31523      onValidate: onValidate,
31524      paddingInlineStart: prefix ? space(2) : undefined,
31525      paddingInlineEnd: suffix ? space(2) : undefined,
31526      ref: ref,
31527      setIsFocused: setIsFocused,
31528      size: size,
31529      stateReducer: stateReducer,
31530      ...draftHookProps
31531    })));
31532  }
31533  
31534  /**
31535   * InputControl components let users enter and edit text. This is an experimental component
31536   * intended to (in time) merge with or replace `TextControl`.
31537   *
31538   * ```jsx
31539   * import { __experimentalInputControl as InputControl } from '@wordpress/components';
31540   * import { useState } from '@wordpress/compose';
31541   *
31542   * const Example = () => {
31543   *   const [ value, setValue ] = useState( '' );
31544   *
31545   *   return (
31546   *      <InputControl
31547   *          value={ value }
31548   *          onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
31549   *      />
31550   *   );
31551   * };
31552   * ```
31553   */
31554  const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl);
31555  /* harmony default export */ const input_control = (InputControl);
31556  
31557  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dashicon/index.js
31558  
31559  /**
31560   * @typedef OwnProps
31561   *
31562   * @property {import('./types').IconKey} icon        Icon name
31563   * @property {string}                    [className] Class name
31564   * @property {number}                    [size]      Size of the icon
31565   */
31566  
31567  /**
31568   * Internal dependencies
31569   */
31570  
31571  function Dashicon({
31572    icon,
31573    className,
31574    size = 20,
31575    style = {},
31576    ...extraProps
31577  }) {
31578    const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' ');
31579  
31580    // 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
31581    const sizeStyles =
31582    // using `!=` to catch both 20 and "20"
31583    // eslint-disable-next-line eqeqeq
31584    20 != size ? {
31585      fontSize: `$size}px`,
31586      width: `$size}px`,
31587      height: `$size}px`
31588    } : {};
31589    const styles = {
31590      ...sizeStyles,
31591      ...style
31592    };
31593    return (0,external_React_.createElement)("span", {
31594      className: iconClass,
31595      style: styles,
31596      ...extraProps
31597    });
31598  }
31599  /* harmony default export */ const dashicon = (Dashicon);
31600  
31601  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/icon/index.js
31602  /**
31603   * External dependencies
31604   */
31605  
31606  /**
31607   * WordPress dependencies
31608   */
31609  
31610  
31611  
31612  /**
31613   * Internal dependencies
31614   */
31615  
31616  function Icon({
31617    icon = null,
31618    size = 'string' === typeof icon ? 20 : 24,
31619    ...additionalProps
31620  }) {
31621    if ('string' === typeof icon) {
31622      return (0,external_wp_element_namespaceObject.createElement)(dashicon, {
31623        icon: icon,
31624        size: size,
31625        ...additionalProps
31626      });
31627    }
31628    if ((0,external_wp_element_namespaceObject.isValidElement)(icon) && dashicon === icon.type) {
31629      return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
31630        ...additionalProps
31631      });
31632    }
31633    if ('function' === typeof icon) {
31634      return (0,external_wp_element_namespaceObject.createElement)(icon, {
31635        size,
31636        ...additionalProps
31637      });
31638    }
31639    if (icon && (icon.type === 'svg' || icon.type === external_wp_primitives_namespaceObject.SVG)) {
31640      const appliedProps = {
31641        ...icon.props,
31642        width: size,
31643        height: size,
31644        ...additionalProps
31645      };
31646      return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
31647        ...appliedProps
31648      });
31649    }
31650    if ((0,external_wp_element_namespaceObject.isValidElement)(icon)) {
31651      return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
31652        // @ts-ignore Just forwarding the size prop along
31653        size,
31654        ...additionalProps
31655      });
31656    }
31657    return icon;
31658  }
31659  /* harmony default export */ const build_module_icon = (Icon);
31660  
31661  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/index.js
31662  
31663  /**
31664   * External dependencies
31665   */
31666  
31667  /**
31668   * WordPress dependencies
31669   */
31670  
31671  
31672  
31673  
31674  /**
31675   * Internal dependencies
31676   */
31677  
31678  
31679  
31680  
31681  const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];
31682  function button_useDeprecatedProps({
31683    isDefault,
31684    isPrimary,
31685    isSecondary,
31686    isTertiary,
31687    isLink,
31688    isPressed,
31689    isSmall,
31690    size,
31691    variant,
31692    ...otherProps
31693  }) {
31694    let computedSize = size;
31695    let computedVariant = variant;
31696    const newProps = {
31697      // @TODO Mark `isPressed` as deprecated
31698      'aria-pressed': isPressed
31699    };
31700    if (isSmall) {
31701      var _computedSize;
31702      (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small';
31703    }
31704    if (isPrimary) {
31705      var _computedVariant;
31706      (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary';
31707    }
31708    if (isTertiary) {
31709      var _computedVariant2;
31710      (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary';
31711    }
31712    if (isSecondary) {
31713      var _computedVariant3;
31714      (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary';
31715    }
31716    if (isDefault) {
31717      var _computedVariant4;
31718      external_wp_deprecated_default()('Button isDefault prop', {
31719        since: '5.4',
31720        alternative: 'variant="secondary"',
31721        version: '6.2'
31722      });
31723      (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary';
31724    }
31725    if (isLink) {
31726      var _computedVariant5;
31727      (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link';
31728    }
31729    return {
31730      ...newProps,
31731      ...otherProps,
31732      size: computedSize,
31733      variant: computedVariant
31734    };
31735  }
31736  function UnforwardedButton(props, ref) {
31737    const {
31738      __next40pxDefaultSize,
31739      isBusy,
31740      isDestructive,
31741      className,
31742      disabled,
31743      icon,
31744      iconPosition = 'left',
31745      iconSize,
31746      showTooltip,
31747      tooltipPosition,
31748      shortcut,
31749      label,
31750      children,
31751      size = 'default',
31752      text,
31753      variant,
31754      __experimentalIsFocusable: isFocusable,
31755      describedBy,
31756      ...buttonOrAnchorProps
31757    } = button_useDeprecatedProps(props);
31758    const {
31759      href,
31760      target,
31761      'aria-checked': ariaChecked,
31762      'aria-pressed': ariaPressed,
31763      'aria-selected': ariaSelected,
31764      ...additionalProps
31765    } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {
31766      href: undefined,
31767      target: undefined,
31768      ...buttonOrAnchorProps
31769    };
31770    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Button, 'components-button__description');
31771    const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&
31772    // Tooltip should not considered as a child
31773    children?.[0]?.props?.className !== 'components-tooltip';
31774    const truthyAriaPressedValues = [true, 'true', 'mixed'];
31775    const classes = classnames_default()('components-button', className, {
31776      'is-next-40px-default-size': __next40pxDefaultSize,
31777      'is-secondary': variant === 'secondary',
31778      'is-primary': variant === 'primary',
31779      'is-small': size === 'small',
31780      'is-compact': size === 'compact',
31781      'is-tertiary': variant === 'tertiary',
31782      'is-pressed': truthyAriaPressedValues.includes(ariaPressed),
31783      'is-pressed-mixed': ariaPressed === 'mixed',
31784      'is-busy': isBusy,
31785      'is-link': variant === 'link',
31786      'is-destructive': isDestructive,
31787      'has-text': !!icon && (hasChildren || text),
31788      'has-icon': !!icon
31789    });
31790    const trulyDisabled = disabled && !isFocusable;
31791    const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button';
31792    const buttonProps = Tag === 'button' ? {
31793      type: 'button',
31794      disabled: trulyDisabled,
31795      'aria-checked': ariaChecked,
31796      'aria-pressed': ariaPressed,
31797      'aria-selected': ariaSelected
31798    } : {};
31799    const anchorProps = Tag === 'a' ? {
31800      href,
31801      target
31802    } : {};
31803    if (disabled && isFocusable) {
31804      // In this case, the button will be disabled, but still focusable and
31805      // perceivable by screen reader users.
31806      buttonProps['aria-disabled'] = true;
31807      anchorProps['aria-disabled'] = true;
31808      for (const disabledEvent of disabledEventsOnDisabledButton) {
31809        additionalProps[disabledEvent] = event => {
31810          if (event) {
31811            event.stopPropagation();
31812            event.preventDefault();
31813          }
31814        };
31815      }
31816    }
31817  
31818    // Should show the tooltip if...
31819    const shouldShowTooltip = !trulyDisabled && (
31820    // An explicit tooltip is passed or...
31821    showTooltip && !!label ||
31822    // There's a shortcut or...
31823    !!shortcut ||
31824    // There's a label and...
31825    !!label &&
31826    // The children are empty and...
31827    !children?.length &&
31828    // The tooltip is not explicitly disabled.
31829    false !== showTooltip);
31830    const descriptionId = describedBy ? instanceId : undefined;
31831    const describedById = additionalProps['aria-describedby'] || descriptionId;
31832    const commonProps = {
31833      className: classes,
31834      'aria-label': additionalProps['aria-label'] || label,
31835      'aria-describedby': describedById,
31836      ref
31837    };
31838    const elementChildren = (0,external_React_.createElement)(external_React_.Fragment, null, icon && iconPosition === 'left' && (0,external_React_.createElement)(build_module_icon, {
31839      icon: icon,
31840      size: iconSize
31841    }), text && (0,external_React_.createElement)(external_React_.Fragment, null, text), icon && iconPosition === 'right' && (0,external_React_.createElement)(build_module_icon, {
31842      icon: icon,
31843      size: iconSize
31844    }), children);
31845    const element = Tag === 'a' ? (0,external_React_.createElement)("a", {
31846      ...anchorProps,
31847      ...additionalProps,
31848      ...commonProps
31849    }, elementChildren) : (0,external_React_.createElement)("button", {
31850      ...buttonProps,
31851      ...additionalProps,
31852      ...commonProps
31853    }, elementChildren);
31854  
31855    // In order to avoid some React reconciliation issues, we are always rendering
31856    // the `Tooltip` component even when `shouldShowTooltip` is `false`.
31857    // In order to make sure that the tooltip doesn't show when it shouldn't,
31858    // we don't pass the props to the `Tooltip` component.
31859    const tooltipProps = shouldShowTooltip ? {
31860      text: children?.length && describedBy ? describedBy : label,
31861      shortcut,
31862      placement: tooltipPosition &&
31863      // Convert legacy `position` values to be used with the new `placement` prop
31864      positionToPlacement(tooltipPosition)
31865    } : {};
31866    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(tooltip, {
31867      ...tooltipProps
31868    }, element), describedBy && (0,external_React_.createElement)(visually_hidden_component, null, (0,external_React_.createElement)("span", {
31869      id: descriptionId
31870    }, describedBy)));
31871  }
31872  
31873  /**
31874   * Lets users take actions and make choices with a single click or tap.
31875   *
31876   * ```jsx
31877   * import { Button } from '@wordpress/components';
31878   * const Mybutton = () => (
31879   *   <Button
31880   *     variant="primary"
31881   *     onClick={ handleClick }
31882   *   >
31883   *     Click here
31884   *   </Button>
31885   * );
31886   * ```
31887   */
31888  const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton);
31889  /* harmony default export */ const build_module_button = (Button);
31890  
31891  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/styles/number-control-styles.js
31892  
31893  function 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)."; }
31894  /**
31895   * External dependencies
31896   */
31897  
31898  /**
31899   * Internal dependencies
31900   */
31901  
31902  
31903  
31904  
31905  var number_control_styles_ref =  true ? {
31906    name: "euqsgg",
31907    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;}"
31908  } : 0;
31909  const htmlArrowStyles = ({
31910    hideHTMLArrows
31911  }) => {
31912    if (!hideHTMLArrows) {
31913      return ``;
31914    }
31915    return number_control_styles_ref;
31916  };
31917  const number_control_styles_Input = /*#__PURE__*/emotion_styled_base_browser_esm(input_control,  true ? {
31918    target: "ep09it41"
31919  } : 0)(htmlArrowStyles, ";" + ( true ? "" : 0));
31920  const SpinButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
31921    target: "ep09it40"
31922  } : 0)("&&&&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
31923  const smallSpinButtons = /*#__PURE__*/emotion_react_browser_esm_css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + ( true ? "" : 0),  true ? "" : 0);
31924  const styles = {
31925    smallSpinButtons
31926  };
31927  
31928  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/math.js
31929  /**
31930   * Parses and retrieves a number value.
31931   *
31932   * @param {unknown} value The incoming value.
31933   *
31934   * @return {number} The parsed number value.
31935   */
31936  function getNumber(value) {
31937    const number = Number(value);
31938    return isNaN(number) ? 0 : number;
31939  }
31940  
31941  /**
31942   * Safely adds 2 values.
31943   *
31944   * @param {Array<number|string>} args Values to add together.
31945   *
31946   * @return {number} The sum of values.
31947   */
31948  function add(...args) {
31949    return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
31950    (sum, arg) => sum + getNumber(arg), 0);
31951  }
31952  
31953  /**
31954   * Safely subtracts 2 values.
31955   *
31956   * @param {Array<number|string>} args Values to subtract together.
31957   *
31958   * @return {number} The difference of the values.
31959   */
31960  function subtract(...args) {
31961    return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
31962    (diff, arg, index) => {
31963      const value = getNumber(arg);
31964      return index === 0 ? value : diff - value;
31965    }, 0);
31966  }
31967  
31968  /**
31969   * Determines the decimal position of a number value.
31970   *
31971   * @param {number} value The number to evaluate.
31972   *
31973   * @return {number} The number of decimal places.
31974   */
31975  function getPrecision(value) {
31976    const split = (value + '').split('.');
31977    return split[1] !== undefined ? split[1].length : 0;
31978  }
31979  
31980  /**
31981   * Clamps a value based on a min/max range.
31982   *
31983   * @param {number} value The value.
31984   * @param {number} min   The minimum range.
31985   * @param {number} max   The maximum range.
31986   *
31987   * @return {number} The clamped value.
31988   */
31989  function math_clamp(value, min, max) {
31990    const baseValue = getNumber(value);
31991    return Math.max(min, Math.min(baseValue, max));
31992  }
31993  
31994  /**
31995   * Clamps a value based on a min/max range with rounding
31996   *
31997   * @param {number | string} value The value.
31998   * @param {number}          min   The minimum range.
31999   * @param {number}          max   The maximum range.
32000   * @param {number}          step  A multiplier for the value.
32001   *
32002   * @return {number} The rounded and clamped value.
32003   */
32004  function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) {
32005    const baseValue = getNumber(value);
32006    const stepValue = getNumber(step);
32007    const precision = getPrecision(step);
32008    const rounded = Math.round(baseValue / stepValue) * stepValue;
32009    const clampedValue = math_clamp(rounded, min, max);
32010    return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
32011  }
32012  
32013  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/utils.js
32014  /**
32015   * External dependencies
32016   */
32017  
32018  /**
32019   * Internal dependencies
32020   */
32021  
32022  
32023  const H_ALIGNMENTS = {
32024    bottom: {
32025      align: 'flex-end',
32026      justify: 'center'
32027    },
32028    bottomLeft: {
32029      align: 'flex-end',
32030      justify: 'flex-start'
32031    },
32032    bottomRight: {
32033      align: 'flex-end',
32034      justify: 'flex-end'
32035    },
32036    center: {
32037      align: 'center',
32038      justify: 'center'
32039    },
32040    edge: {
32041      align: 'center',
32042      justify: 'space-between'
32043    },
32044    left: {
32045      align: 'center',
32046      justify: 'flex-start'
32047    },
32048    right: {
32049      align: 'center',
32050      justify: 'flex-end'
32051    },
32052    stretch: {
32053      align: 'stretch'
32054    },
32055    top: {
32056      align: 'flex-start',
32057      justify: 'center'
32058    },
32059    topLeft: {
32060      align: 'flex-start',
32061      justify: 'flex-start'
32062    },
32063    topRight: {
32064      align: 'flex-start',
32065      justify: 'flex-end'
32066    }
32067  };
32068  const V_ALIGNMENTS = {
32069    bottom: {
32070      justify: 'flex-end',
32071      align: 'center'
32072    },
32073    bottomLeft: {
32074      justify: 'flex-end',
32075      align: 'flex-start'
32076    },
32077    bottomRight: {
32078      justify: 'flex-end',
32079      align: 'flex-end'
32080    },
32081    center: {
32082      justify: 'center',
32083      align: 'center'
32084    },
32085    edge: {
32086      justify: 'space-between',
32087      align: 'center'
32088    },
32089    left: {
32090      justify: 'center',
32091      align: 'flex-start'
32092    },
32093    right: {
32094      justify: 'center',
32095      align: 'flex-end'
32096    },
32097    stretch: {
32098      align: 'stretch'
32099    },
32100    top: {
32101      justify: 'flex-start',
32102      align: 'center'
32103    },
32104    topLeft: {
32105      justify: 'flex-start',
32106      align: 'flex-start'
32107    },
32108    topRight: {
32109      justify: 'flex-start',
32110      align: 'flex-end'
32111    }
32112  };
32113  function getAlignmentProps(alignment, direction = 'row') {
32114    if (!isValueDefined(alignment)) {
32115      return {};
32116    }
32117    const isVertical = direction === 'column';
32118    const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
32119    const alignmentProps = alignment in props ? props[alignment] : {
32120      align: alignment
32121    };
32122    return alignmentProps;
32123  }
32124  
32125  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/get-valid-children.js
32126  /**
32127   * External dependencies
32128   */
32129  
32130  /**
32131   * WordPress dependencies
32132   */
32133  
32134  
32135  /**
32136   * Gets a collection of available children elements from a React component's children prop.
32137   *
32138   * @param children
32139   *
32140   * @return An array of available children.
32141   */
32142  function getValidChildren(children) {
32143    if (typeof children === 'string') return [children];
32144    return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child));
32145  }
32146  
32147  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/hook.js
32148  
32149  /**
32150   * External dependencies
32151   */
32152  
32153  /**
32154   * Internal dependencies
32155   */
32156  
32157  
32158  
32159  
32160  
32161  function useHStack(props) {
32162    const {
32163      alignment = 'edge',
32164      children,
32165      direction,
32166      spacing = 2,
32167      ...otherProps
32168    } = useContextSystem(props, 'HStack');
32169    const align = getAlignmentProps(alignment, direction);
32170    const validChildren = getValidChildren(children);
32171    const clonedChildren = validChildren.map((child, index) => {
32172      const _isSpacer = hasConnectNamespace(child, ['Spacer']);
32173      if (_isSpacer) {
32174        const childElement = child;
32175        const _key = childElement.key || `hstack-$index}`;
32176        return (0,external_React_.createElement)(flex_item_component, {
32177          isBlock: true,
32178          key: _key,
32179          ...childElement.props
32180        });
32181      }
32182      return child;
32183    });
32184    const propsForFlex = {
32185      children: clonedChildren,
32186      direction,
32187      justify: 'center',
32188      ...align,
32189      ...otherProps,
32190      gap: spacing
32191    };
32192    const flexProps = useFlex(propsForFlex);
32193    return flexProps;
32194  }
32195  
32196  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js
32197  
32198  /**
32199   * Internal dependencies
32200   */
32201  
32202  
32203  
32204  
32205  function UnconnectedHStack(props, forwardedRef) {
32206    const hStackProps = useHStack(props);
32207    return (0,external_React_.createElement)(component, {
32208      ...hStackProps,
32209      ref: forwardedRef
32210    });
32211  }
32212  
32213  /**
32214   * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
32215   *
32216   * `HStack` can render anything inside.
32217   *
32218   * ```jsx
32219   * import {
32220   *     __experimentalHStack as HStack,
32221   *     __experimentalText as Text,
32222   * } from `@wordpress/components`;
32223   *
32224   * function Example() {
32225   *     return (
32226   *         <HStack>
32227   *             <Text>Code</Text>
32228   *             <Text>is</Text>
32229   *             <Text>Poetry</Text>
32230   *         </HStack>
32231   *     );
32232   * }
32233   * ```
32234   */
32235  const HStack = contextConnect(UnconnectedHStack, 'HStack');
32236  /* harmony default export */ const h_stack_component = (HStack);
32237  
32238  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/index.js
32239  
32240  /**
32241   * External dependencies
32242   */
32243  
32244  /**
32245   * WordPress dependencies
32246   */
32247  
32248  
32249  
32250  
32251  
32252  
32253  /**
32254   * Internal dependencies
32255   */
32256  
32257  
32258  
32259  
32260  
32261  
32262  
32263  
32264  const number_control_noop = () => {};
32265  function UnforwardedNumberControl(props, forwardedRef) {
32266    const {
32267      __unstableStateReducer: stateReducerProp,
32268      className,
32269      dragDirection = 'n',
32270      hideHTMLArrows = false,
32271      spinControls = hideHTMLArrows ? 'none' : 'native',
32272      isDragEnabled = true,
32273      isShiftStepEnabled = true,
32274      label,
32275      max = Infinity,
32276      min = -Infinity,
32277      required = false,
32278      shiftStep = 10,
32279      step = 1,
32280      spinFactor = 1,
32281      type: typeProp = 'number',
32282      value: valueProp,
32283      size = 'default',
32284      suffix,
32285      onChange = number_control_noop,
32286      ...restProps
32287    } = useDeprecated36pxDefaultSizeProp(props);
32288    if (hideHTMLArrows) {
32289      external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', {
32290        alternative: 'spinControls="none"',
32291        since: '6.2',
32292        version: '6.3'
32293      });
32294    }
32295    const inputRef = (0,external_wp_element_namespaceObject.useRef)();
32296    const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]);
32297    const isStepAny = step === 'any';
32298    const baseStep = isStepAny ? 1 : ensureNumber(step);
32299    const baseSpin = ensureNumber(spinFactor) * baseStep;
32300    const baseValue = roundClamp(0, min, max, baseStep);
32301    const constrainValue = (value, stepOverride) => {
32302      // When step is "any" clamp the value, otherwise round and clamp it.
32303      // Use '' + to convert to string for use in input value attribute.
32304      return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
32305    };
32306    const autoComplete = typeProp === 'number' ? 'off' : undefined;
32307    const classes = classnames_default()('components-number-control', className);
32308    const cx = useCx();
32309    const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons);
32310    const spinValue = (value, direction, event) => {
32311      event?.preventDefault();
32312      const shift = event?.shiftKey && isShiftStepEnabled;
32313      const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin;
32314      let nextValue = isValueEmpty(value) ? baseValue : value;
32315      if (direction === 'up') {
32316        nextValue = add(nextValue, delta);
32317      } else if (direction === 'down') {
32318        nextValue = subtract(nextValue, delta);
32319      }
32320      return constrainValue(nextValue, shift ? delta : undefined);
32321    };
32322  
32323    /**
32324     * "Middleware" function that intercepts updates from InputControl.
32325     * This allows us to tap into actions to transform the (next) state for
32326     * InputControl.
32327     *
32328     * @return The updated state to apply to InputControl
32329     */
32330    const numberControlStateReducer = (state, action) => {
32331      const nextState = {
32332        ...state
32333      };
32334      const {
32335        type,
32336        payload
32337      } = action;
32338      const event = payload.event;
32339      const currentValue = nextState.value;
32340  
32341      /**
32342       * Handles custom UP and DOWN Keyboard events
32343       */
32344      if (type === PRESS_UP || type === PRESS_DOWN) {
32345        nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event);
32346      }
32347  
32348      /**
32349       * Handles drag to update events
32350       */
32351      if (type === DRAG && isDragEnabled) {
32352        const [x, y] = payload.delta;
32353        const enableShift = payload.shiftKey && isShiftStepEnabled;
32354        const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;
32355        let directionModifier;
32356        let delta;
32357        switch (dragDirection) {
32358          case 'n':
32359            delta = y;
32360            directionModifier = -1;
32361            break;
32362          case 'e':
32363            delta = x;
32364            directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1;
32365            break;
32366          case 's':
32367            delta = y;
32368            directionModifier = 1;
32369            break;
32370          case 'w':
32371            delta = x;
32372            directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1;
32373            break;
32374        }
32375        if (delta !== 0) {
32376          delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
32377          const distance = delta * modifier * directionModifier;
32378          nextState.value = constrainValue(
32379          // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
32380          add(currentValue, distance), enableShift ? modifier : undefined);
32381        }
32382      }
32383  
32384      /**
32385       * Handles commit (ENTER key press or blur)
32386       */
32387      if (type === PRESS_ENTER || type === COMMIT) {
32388        const applyEmptyValue = required === false && currentValue === '';
32389        nextState.value = applyEmptyValue ? currentValue :
32390        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
32391        constrainValue(currentValue);
32392      }
32393      return nextState;
32394    };
32395    const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
32396      // Set event.target to the <input> so that consumers can use
32397      // e.g. event.target.validity.
32398      event: {
32399        ...event,
32400        target: inputRef.current
32401      }
32402    });
32403    return (0,external_React_.createElement)(number_control_styles_Input, {
32404      autoComplete: autoComplete,
32405      inputMode: "numeric",
32406      ...restProps,
32407      className: classes,
32408      dragDirection: dragDirection,
32409      hideHTMLArrows: spinControls !== 'native',
32410      isDragEnabled: isDragEnabled,
32411      label: label,
32412      max: max,
32413      min: min,
32414      ref: mergedRef,
32415      required: required,
32416      step: step,
32417      type: typeProp
32418      // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
32419      ,
32420      value: valueProp,
32421      __unstableStateReducer: (state, action) => {
32422        var _stateReducerProp;
32423        const baseState = numberControlStateReducer(state, action);
32424        return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
32425      },
32426      size: size,
32427      suffix: spinControls === 'custom' ? (0,external_React_.createElement)(external_React_.Fragment, null, suffix, (0,external_React_.createElement)(spacer_component, {
32428        marginBottom: 0,
32429        marginRight: 2
32430      }, (0,external_React_.createElement)(h_stack_component, {
32431        spacing: 1
32432      }, (0,external_React_.createElement)(SpinButton, {
32433        className: spinButtonClasses,
32434        icon: library_plus,
32435        size: "small",
32436        label: (0,external_wp_i18n_namespaceObject.__)('Increment'),
32437        onClick: buildSpinButtonClickHandler('up')
32438      }), (0,external_React_.createElement)(SpinButton, {
32439        className: spinButtonClasses,
32440        icon: library_reset,
32441        size: "small",
32442        label: (0,external_wp_i18n_namespaceObject.__)('Decrement'),
32443        onClick: buildSpinButtonClickHandler('down')
32444      })))) : suffix,
32445      onChange: onChange
32446    });
32447  }
32448  const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl);
32449  /* harmony default export */ const number_control = (NumberControl);
32450  
32451  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js
32452  
32453  function 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)."; }
32454  /**
32455   * External dependencies
32456   */
32457  
32458  /**
32459   * Internal dependencies
32460   */
32461  
32462  
32463  
32464  
32465  const CIRCLE_SIZE = 32;
32466  const INNER_CIRCLE_SIZE = 6;
32467  const CircleRoot = emotion_styled_base_browser_esm("div",  true ? {
32468    target: "eln3bjz3"
32469  } : 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));
32470  const CircleIndicatorWrapper = emotion_styled_base_browser_esm("div",  true ? {
32471    target: "eln3bjz2"
32472  } : 0)( true ? {
32473    name: "1r307gh",
32474    styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}"
32475  } : 0);
32476  const CircleIndicator = emotion_styled_base_browser_esm("div",  true ? {
32477    target: "eln3bjz1"
32478  } : 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));
32479  const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
32480    target: "eln3bjz0"
32481  } : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0));
32482  
32483  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js
32484  
32485  /**
32486   * WordPress dependencies
32487   */
32488  
32489  
32490  
32491  /**
32492   * Internal dependencies
32493   */
32494  
32495  function AngleCircle({
32496    value,
32497    onChange,
32498    ...props
32499  }) {
32500    const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null);
32501    const angleCircleCenter = (0,external_wp_element_namespaceObject.useRef)();
32502    const previousCursorValue = (0,external_wp_element_namespaceObject.useRef)();
32503    const setAngleCircleCenter = () => {
32504      if (angleCircleRef.current === null) {
32505        return;
32506      }
32507      const rect = angleCircleRef.current.getBoundingClientRect();
32508      angleCircleCenter.current = {
32509        x: rect.x + rect.width / 2,
32510        y: rect.y + rect.height / 2
32511      };
32512    };
32513    const changeAngleToPosition = event => {
32514      if (event === undefined) {
32515        return;
32516      }
32517  
32518      // Prevent (drag) mouse events from selecting and accidentally
32519      // triggering actions from other elements.
32520      event.preventDefault();
32521      // Input control needs to lose focus and by preventDefault above, it doesn't.
32522      event.target?.focus();
32523      if (angleCircleCenter.current !== undefined && onChange !== undefined) {
32524        const {
32525          x: centerX,
32526          y: centerY
32527        } = angleCircleCenter.current;
32528        onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
32529      }
32530    };
32531    const {
32532      startDrag,
32533      isDragging
32534    } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({
32535      onDragStart: event => {
32536        setAngleCircleCenter();
32537        changeAngleToPosition(event);
32538      },
32539      onDragMove: changeAngleToPosition,
32540      onDragEnd: changeAngleToPosition
32541    });
32542    (0,external_wp_element_namespaceObject.useEffect)(() => {
32543      if (isDragging) {
32544        if (previousCursorValue.current === undefined) {
32545          previousCursorValue.current = document.body.style.cursor;
32546        }
32547        document.body.style.cursor = 'grabbing';
32548      } else {
32549        document.body.style.cursor = previousCursorValue.current || '';
32550        previousCursorValue.current = undefined;
32551      }
32552    }, [isDragging]);
32553    return (0,external_React_.createElement)(CircleRoot, {
32554      ref: angleCircleRef,
32555      onMouseDown: startDrag,
32556      className: "components-angle-picker-control__angle-circle",
32557      ...props
32558    }, (0,external_React_.createElement)(CircleIndicatorWrapper, {
32559      style: value ? {
32560        transform: `rotate($value}deg)`
32561      } : undefined,
32562      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
32563      tabIndex: -1
32564    }, (0,external_React_.createElement)(CircleIndicator, {
32565      className: "components-angle-picker-control__angle-circle-indicator"
32566    })));
32567  }
32568  function getAngle(centerX, centerY, pointX, pointY) {
32569    const y = pointY - centerY;
32570    const x = pointX - centerX;
32571    const angleInRadians = Math.atan2(y, x);
32572    const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
32573    if (angleInDeg < 0) {
32574      return 360 + angleInDeg;
32575    }
32576    return angleInDeg;
32577  }
32578  /* harmony default export */ const angle_circle = (AngleCircle);
32579  
32580  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js
32581  
32582  /**
32583   * External dependencies
32584   */
32585  
32586  
32587  
32588  /**
32589   * WordPress dependencies
32590   */
32591  
32592  
32593  
32594  /**
32595   * Internal dependencies
32596   */
32597  
32598  
32599  
32600  
32601  
32602  function UnforwardedAnglePickerControl(props, ref) {
32603    const {
32604      className,
32605      label = (0,external_wp_i18n_namespaceObject.__)('Angle'),
32606      onChange,
32607      value,
32608      ...restProps
32609    } = props;
32610    const handleOnNumberChange = unprocessedValue => {
32611      if (onChange === undefined) {
32612        return;
32613      }
32614      const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
32615      onChange(inputValue);
32616    };
32617    const classes = classnames_default()('components-angle-picker-control', className);
32618    const unitText = (0,external_React_.createElement)(UnitText, null, "\xB0");
32619    const [prefixedUnitText, suffixedUnitText] = (0,external_wp_i18n_namespaceObject.isRTL)() ? [unitText, null] : [null, unitText];
32620    return (0,external_React_.createElement)(flex_component, {
32621      ...restProps,
32622      ref: ref,
32623      className: classes,
32624      gap: 2
32625    }, (0,external_React_.createElement)(flex_block_component, null, (0,external_React_.createElement)(number_control, {
32626      label: label,
32627      className: "components-angle-picker-control__input-field",
32628      max: 360,
32629      min: 0,
32630      onChange: handleOnNumberChange,
32631      size: "__unstable-large",
32632      step: "1",
32633      value: value,
32634      spinControls: "none",
32635      prefix: prefixedUnitText,
32636      suffix: suffixedUnitText
32637    })), (0,external_React_.createElement)(spacer_component, {
32638      marginBottom: "1",
32639      marginTop: "auto"
32640    }, (0,external_React_.createElement)(angle_circle, {
32641      "aria-hidden": "true",
32642      value: value,
32643      onChange: onChange
32644    })));
32645  }
32646  
32647  /**
32648   * `AnglePickerControl` is a React component to render a UI that allows users to
32649   * pick an angle. Users can choose an angle in a visual UI with the mouse by
32650   * dragging an angle indicator inside a circle or by directly inserting the
32651   * desired angle in a text field.
32652   *
32653   * ```jsx
32654   * import { useState } from '@wordpress/element';
32655   * import { AnglePickerControl } from '@wordpress/components';
32656   *
32657   * function Example() {
32658   *   const [ angle, setAngle ] = useState( 0 );
32659   *   return (
32660   *     <AnglePickerControl
32661   *       value={ angle }
32662   *       onChange={ setAngle }
32663   *     </>
32664   *   );
32665   * }
32666   * ```
32667   */
32668  const AnglePickerControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedAnglePickerControl);
32669  /* harmony default export */ const angle_picker_control = (AnglePickerControl);
32670  
32671  // EXTERNAL MODULE: ./node_modules/remove-accents/index.js
32672  var remove_accents = __webpack_require__(9681);
32673  var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents);
32674  ;// CONCATENATED MODULE: external ["wp","richText"]
32675  const external_wp_richText_namespaceObject = window["wp"]["richText"];
32676  ;// CONCATENATED MODULE: external ["wp","a11y"]
32677  const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
32678  ;// CONCATENATED MODULE: external ["wp","keycodes"]
32679  const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
32680  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/strings.js
32681  /**
32682   * External dependencies
32683   */
32684  
32685  
32686  const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[
32687  // - (hyphen-minus)
32688  '\u002d',
32689  // ~ (tilde)
32690  '\u007e',
32691  // ­ (soft hyphen)
32692  '\u00ad',
32693  // ֊ (armenian hyphen)
32694  '\u058a',
32695  // ־ (hebrew punctuation maqaf)
32696  '\u05be',
32697  // ᐀ (canadian syllabics hyphen)
32698  '\u1400',
32699  // ᠆ (mongolian todo soft hyphen)
32700  '\u1806',
32701  // ‐ (hyphen)
32702  '\u2010',
32703  // non-breaking hyphen)
32704  '\u2011',
32705  // ‒ (figure dash)
32706  '\u2012',
32707  // – (en dash)
32708  '\u2013',
32709  // — (em dash)
32710  '\u2014',
32711  // ― (horizontal bar)
32712  '\u2015',
32713  // ⁓ (swung dash)
32714  '\u2053',
32715  // superscript minus)
32716  '\u207b',
32717  // subscript minus)
32718  '\u208b',
32719  // − (minus sign)
32720  '\u2212',
32721  // ⸗ (double oblique hyphen)
32722  '\u2e17',
32723  // ⸺ (two-em dash)
32724  '\u2e3a',
32725  // ⸻ (three-em dash)
32726  '\u2e3b',
32727  // 〜 (wave dash)
32728  '\u301c',
32729  // 〰 (wavy dash)
32730  '\u3030',
32731  // ゠ (katakana-hiragana double hyphen)
32732  '\u30a0',
32733  // ︱ (presentation form for vertical em dash)
32734  '\ufe31',
32735  // ︲ (presentation form for vertical en dash)
32736  '\ufe32',
32737  // ﹘ (small em dash)
32738  '\ufe58',
32739  // ﹣ (small hyphen-minus)
32740  '\ufe63',
32741  // - (fullwidth hyphen-minus)
32742  '\uff0d'].join('')}]`, 'g');
32743  const normalizeTextString = value => {
32744    return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');
32745  };
32746  
32747  /**
32748   * Converts any string to kebab case.
32749   * Backwards compatible with Lodash's `_.kebabCase()`.
32750   * Backwards compatible with `_wp_to_kebab_case()`.
32751   *
32752   * @see https://lodash.com/docs/4.17.15#kebabCase
32753   * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
32754   *
32755   * @param str String to convert.
32756   * @return Kebab-cased string
32757   */
32758  function kebabCase(str) {
32759    var _str$toString;
32760    let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : '';
32761  
32762    // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
32763    input = input.replace(/['\u2019]/, '');
32764    return paramCase(input, {
32765      splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,
32766      // fooBar => foo-bar, 3Bar => 3-bar
32767      /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,
32768      // 3bar => 3-bar
32769      /([A-Za-z])([0-9])/g,
32770      // Foo3 => foo-3, foo3 => foo-3
32771      /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar
32772      ]
32773    });
32774  }
32775  
32776  /**
32777   * Escapes the RegExp special characters.
32778   *
32779   * @param string Input string.
32780   *
32781   * @return Regex-escaped string.
32782   */
32783  function escapeRegExp(string) {
32784    return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
32785  }
32786  
32787  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js
32788  /**
32789   * External dependencies
32790   */
32791  
32792  
32793  /**
32794   * WordPress dependencies
32795   */
32796  
32797  
32798  
32799  /**
32800   * Internal dependencies
32801   */
32802  
32803  function filterOptions(search, options = [], maxResults = 10) {
32804    const filtered = [];
32805    for (let i = 0; i < options.length; i++) {
32806      const option = options[i];
32807  
32808      // Merge label into keywords.
32809      let {
32810        keywords = []
32811      } = option;
32812      if ('string' === typeof option.label) {
32813        keywords = [...keywords, option.label];
32814      }
32815      const isMatch = keywords.some(keyword => search.test(remove_accents_default()(keyword)));
32816      if (!isMatch) {
32817        continue;
32818      }
32819      filtered.push(option);
32820  
32821      // Abort early if max reached.
32822      if (filtered.length === maxResults) {
32823        break;
32824      }
32825    }
32826    return filtered;
32827  }
32828  function getDefaultUseItems(autocompleter) {
32829    return filterValue => {
32830      const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]);
32831      /*
32832       * We support both synchronous and asynchronous retrieval of completer options
32833       * but internally treat all as async so we maintain a single, consistent code path.
32834       *
32835       * Because networks can be slow, and the internet is wonderfully unpredictable,
32836       * we don't want two promises updating the state at once. This ensures that only
32837       * the most recent promise will act on `optionsData`. This doesn't use the state
32838       * because `setState` is batched, and so there's no guarantee that setting
32839       * `activePromise` in the state would result in it actually being in `this.state`
32840       * before the promise resolves and we check to see if this is the active promise or not.
32841       */
32842      (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
32843        const {
32844          options,
32845          isDebounced
32846        } = autocompleter;
32847        const loadOptions = (0,external_wp_compose_namespaceObject.debounce)(() => {
32848          const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => {
32849            if (promise.canceled) {
32850              return;
32851            }
32852            const keyedOptions = optionsData.map((optionData, optionIndex) => ({
32853              key: `$autocompleter.name}-$optionIndex}`,
32854              value: optionData,
32855              label: autocompleter.getOptionLabel(optionData),
32856              keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [],
32857              isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false
32858            }));
32859  
32860            // Create a regular expression to filter the options.
32861            const search = new RegExp('(?:\\b|\\s|^)' + escapeRegExp(filterValue), 'i');
32862            setItems(filterOptions(search, keyedOptions));
32863          });
32864          return promise;
32865        }, isDebounced ? 250 : 0);
32866        const promise = loadOptions();
32867        return () => {
32868          loadOptions.cancel();
32869          if (promise) {
32870            promise.canceled = true;
32871          }
32872        };
32873      }, [filterValue]);
32874      return [items];
32875    };
32876  }
32877  
32878  ;// CONCATENATED MODULE: ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
32879  
32880  
32881  
32882  
32883  
32884  
32885  /**
32886   * Provides data to position an inner element of the floating element so that it
32887   * appears centered to the reference element.
32888   * This wraps the core `arrow` middleware to allow React refs as the element.
32889   * @see https://floating-ui.com/docs/arrow
32890   */
32891  const floating_ui_react_dom_arrow = options => {
32892    function isRef(value) {
32893      return {}.hasOwnProperty.call(value, 'current');
32894    }
32895    return {
32896      name: 'arrow',
32897      options,
32898      fn(state) {
32899        const {
32900          element,
32901          padding
32902        } = typeof options === 'function' ? options(state) : options;
32903        if (element && isRef(element)) {
32904          if (element.current != null) {
32905            return floating_ui_dom_arrow({
32906              element: element.current,
32907              padding
32908            }).fn(state);
32909          }
32910          return {};
32911        }
32912        if (element) {
32913          return floating_ui_dom_arrow({
32914            element,
32915            padding
32916          }).fn(state);
32917        }
32918        return {};
32919      }
32920    };
32921  };
32922  
32923  var index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
32924  
32925  // Fork of `fast-deep-equal` that only does the comparisons we need and compares
32926  // functions
32927  function deepEqual(a, b) {
32928    if (a === b) {
32929      return true;
32930    }
32931    if (typeof a !== typeof b) {
32932      return false;
32933    }
32934    if (typeof a === 'function' && a.toString() === b.toString()) {
32935      return true;
32936    }
32937    let length;
32938    let i;
32939    let keys;
32940    if (a && b && typeof a === 'object') {
32941      if (Array.isArray(a)) {
32942        length = a.length;
32943        if (length !== b.length) return false;
32944        for (i = length; i-- !== 0;) {
32945          if (!deepEqual(a[i], b[i])) {
32946            return false;
32947          }
32948        }
32949        return true;
32950      }
32951      keys = Object.keys(a);
32952      length = keys.length;
32953      if (length !== Object.keys(b).length) {
32954        return false;
32955      }
32956      for (i = length; i-- !== 0;) {
32957        if (!{}.hasOwnProperty.call(b, keys[i])) {
32958          return false;
32959        }
32960      }
32961      for (i = length; i-- !== 0;) {
32962        const key = keys[i];
32963        if (key === '_owner' && a.$$typeof) {
32964          continue;
32965        }
32966        if (!deepEqual(a[key], b[key])) {
32967          return false;
32968        }
32969      }
32970      return true;
32971    }
32972  
32973    // biome-ignore lint/suspicious/noSelfCompare: in source
32974    return a !== a && b !== b;
32975  }
32976  
32977  function getDPR(element) {
32978    if (typeof window === 'undefined') {
32979      return 1;
32980    }
32981    const win = element.ownerDocument.defaultView || window;
32982    return win.devicePixelRatio || 1;
32983  }
32984  
32985  function floating_ui_react_dom_roundByDPR(element, value) {
32986    const dpr = getDPR(element);
32987    return Math.round(value * dpr) / dpr;
32988  }
32989  
32990  function useLatestRef(value) {
32991    const ref = external_React_.useRef(value);
32992    index(() => {
32993      ref.current = value;
32994    });
32995    return ref;
32996  }
32997  
32998  /**
32999   * Provides data to position a floating element.
33000   * @see https://floating-ui.com/docs/useFloating
33001   */
33002  function useFloating(options) {
33003    if (options === void 0) {
33004      options = {};
33005    }
33006    const {
33007      placement = 'bottom',
33008      strategy = 'absolute',
33009      middleware = [],
33010      platform,
33011      elements: {
33012        reference: externalReference,
33013        floating: externalFloating
33014      } = {},
33015      transform = true,
33016      whileElementsMounted,
33017      open
33018    } = options;
33019    const [data, setData] = external_React_.useState({
33020      x: 0,
33021      y: 0,
33022      strategy,
33023      placement,
33024      middlewareData: {},
33025      isPositioned: false
33026    });
33027    const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware);
33028    if (!deepEqual(latestMiddleware, middleware)) {
33029      setLatestMiddleware(middleware);
33030    }
33031    const [_reference, _setReference] = external_React_.useState(null);
33032    const [_floating, _setFloating] = external_React_.useState(null);
33033    const setReference = external_React_.useCallback(node => {
33034      if (node !== referenceRef.current) {
33035        referenceRef.current = node;
33036        _setReference(node);
33037      }
33038    }, []);
33039    const setFloating = external_React_.useCallback(node => {
33040      if (node !== floatingRef.current) {
33041        floatingRef.current = node;
33042        _setFloating(node);
33043      }
33044    }, []);
33045    const referenceEl = externalReference || _reference;
33046    const floatingEl = externalFloating || _floating;
33047    const referenceRef = external_React_.useRef(null);
33048    const floatingRef = external_React_.useRef(null);
33049    const dataRef = external_React_.useRef(data);
33050    const hasWhileElementsMounted = whileElementsMounted != null;
33051    const whileElementsMountedRef = useLatestRef(whileElementsMounted);
33052    const platformRef = useLatestRef(platform);
33053    const update = external_React_.useCallback(() => {
33054      if (!referenceRef.current || !floatingRef.current) {
33055        return;
33056      }
33057      const config = {
33058        placement,
33059        strategy,
33060        middleware: latestMiddleware
33061      };
33062      if (platformRef.current) {
33063        config.platform = platformRef.current;
33064      }
33065      floating_ui_dom_computePosition(referenceRef.current, floatingRef.current, config).then(data => {
33066        const fullData = {
33067          ...data,
33068          isPositioned: true
33069        };
33070        if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
33071          dataRef.current = fullData;
33072          external_ReactDOM_namespaceObject.flushSync(() => {
33073            setData(fullData);
33074          });
33075        }
33076      });
33077    }, [latestMiddleware, placement, strategy, platformRef]);
33078    index(() => {
33079      if (open === false && dataRef.current.isPositioned) {
33080        dataRef.current.isPositioned = false;
33081        setData(data => ({
33082          ...data,
33083          isPositioned: false
33084        }));
33085      }
33086    }, [open]);
33087    const isMountedRef = external_React_.useRef(false);
33088    index(() => {
33089      isMountedRef.current = true;
33090      return () => {
33091        isMountedRef.current = false;
33092      };
33093    }, []);
33094  
33095    // biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included.
33096    index(() => {
33097      if (referenceEl) referenceRef.current = referenceEl;
33098      if (floatingEl) floatingRef.current = floatingEl;
33099      if (referenceEl && floatingEl) {
33100        if (whileElementsMountedRef.current) {
33101          return whileElementsMountedRef.current(referenceEl, floatingEl, update);
33102        }
33103        update();
33104      }
33105    }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
33106    const refs = external_React_.useMemo(() => ({
33107      reference: referenceRef,
33108      floating: floatingRef,
33109      setReference,
33110      setFloating
33111    }), [setReference, setFloating]);
33112    const elements = external_React_.useMemo(() => ({
33113      reference: referenceEl,
33114      floating: floatingEl
33115    }), [referenceEl, floatingEl]);
33116    const floatingStyles = external_React_.useMemo(() => {
33117      const initialStyles = {
33118        position: strategy,
33119        left: 0,
33120        top: 0
33121      };
33122      if (!elements.floating) {
33123        return initialStyles;
33124      }
33125      const x = floating_ui_react_dom_roundByDPR(elements.floating, data.x);
33126      const y = floating_ui_react_dom_roundByDPR(elements.floating, data.y);
33127      if (transform) {
33128        return {
33129          ...initialStyles,
33130          transform: "translate(" + x + "px, " + y + "px)",
33131          ...(getDPR(elements.floating) >= 1.5 && {
33132            willChange: 'transform'
33133          })
33134        };
33135      }
33136      return {
33137        position: strategy,
33138        left: x,
33139        top: y
33140      };
33141    }, [strategy, transform, elements.floating, data.x, data.y]);
33142    return external_React_.useMemo(() => ({
33143      ...data,
33144      update,
33145      refs,
33146      elements,
33147      floatingStyles
33148    }), [data, update, refs, elements, floatingStyles]);
33149  }
33150  
33151  
33152  
33153  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
33154  
33155  
33156  
33157  
33158  
33159  /**
33160   * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
33161   *
33162   * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
33163   * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
33164   *
33165   * It will actively respond to changes and re-render your components with the latest setting.
33166   *
33167   * ```jsx
33168   * export function Sidebar({ isOpen }) {
33169   *   const shouldReduceMotion = useReducedMotion()
33170   *   const closedX = shouldReduceMotion ? 0 : "-100%"
33171   *
33172   *   return (
33173   *     <motion.div animate={{
33174   *       opacity: isOpen ? 1 : 0,
33175   *       x: isOpen ? 0 : closedX
33176   *     }} />
33177   *   )
33178   * }
33179   * ```
33180   *
33181   * @return boolean
33182   *
33183   * @public
33184   */
33185  function useReducedMotion() {
33186      /**
33187       * Lazy initialisation of prefersReducedMotion
33188       */
33189      !hasReducedMotionListener.current && initPrefersReducedMotion();
33190      const [shouldReduceMotion] = (0,external_React_.useState)(prefersReducedMotion.current);
33191      if (false) {}
33192      /**
33193       * TODO See if people miss automatically updating shouldReduceMotion setting
33194       */
33195      return shouldReduceMotion;
33196  }
33197  
33198  
33199  
33200  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close.js
33201  
33202  /**
33203   * WordPress dependencies
33204   */
33205  
33206  const close_close = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
33207    xmlns: "http://www.w3.org/2000/svg",
33208    viewBox: "0 0 24 24"
33209  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
33210    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"
33211  }));
33212  /* harmony default export */ const library_close = (close_close);
33213  
33214  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scroll-lock/index.js
33215  /**
33216   * WordPress dependencies
33217   */
33218  
33219  
33220  /*
33221   * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.
33222   * Save scroll top so we can restore it after locking scroll.
33223   *
33224   * NOTE: It would be cleaner and possibly safer to find a localized solution such
33225   * as preventing default on certain touchmove events.
33226   */
33227  let previousScrollTop = 0;
33228  function setLocked(locked) {
33229    const scrollingElement = document.scrollingElement || document.body;
33230    if (locked) {
33231      previousScrollTop = scrollingElement.scrollTop;
33232    }
33233    const methodName = locked ? 'add' : 'remove';
33234    scrollingElement.classList[methodName]('lockscroll');
33235  
33236    // Adding the class to the document element seems to be necessary in iOS.
33237    document.documentElement.classList[methodName]('lockscroll');
33238    if (!locked) {
33239      scrollingElement.scrollTop = previousScrollTop;
33240    }
33241  }
33242  let lockCounter = 0;
33243  
33244  /**
33245   * ScrollLock is a content-free React component for declaratively preventing
33246   * scroll bleed from modal UI to the page body. This component applies a
33247   * `lockscroll` class to the `document.documentElement` and
33248   * `document.scrollingElement` elements to stop the body from scrolling. When it
33249   * is present, the lock is applied.
33250   *
33251   * ```jsx
33252   * import { ScrollLock, Button } from '@wordpress/components';
33253   * import { useState } from '@wordpress/element';
33254   *
33255   * const MyScrollLock = () => {
33256   *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
33257   *
33258   *   const toggleLock = () => {
33259   *     setIsScrollLocked( ( locked ) => ! locked ) );
33260   *   };
33261   *
33262   *   return (
33263   *     <div>
33264   *       <Button variant="secondary" onClick={ toggleLock }>
33265   *         Toggle scroll lock
33266   *       </Button>
33267   *       { isScrollLocked && <ScrollLock /> }
33268   *       <p>
33269   *         Scroll locked:
33270   *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
33271   *       </p>
33272   *     </div>
33273   *   );
33274   * };
33275   * ```
33276   */
33277  function ScrollLock() {
33278    (0,external_wp_element_namespaceObject.useEffect)(() => {
33279      if (lockCounter === 0) {
33280        setLocked(true);
33281      }
33282      ++lockCounter;
33283      return () => {
33284        if (lockCounter === 1) {
33285          setLocked(false);
33286        }
33287        --lockCounter;
33288      };
33289    }, []);
33290    return null;
33291  }
33292  /* harmony default export */ const scroll_lock = (ScrollLock);
33293  
33294  ;// CONCATENATED MODULE: ./node_modules/proxy-compare/dist/index.modern.js
33295  const index_modern_e=Symbol(),index_modern_t=Symbol(),index_modern_r=Symbol();let index_modern_n=(e,t)=>new Proxy(e,t);const index_modern_o=Object.getPrototypeOf,index_modern_s=new WeakMap,index_modern_c=e=>e&&(index_modern_s.has(e)?index_modern_s.get(e):index_modern_o(e)===Object.prototype||index_modern_o(e)===Array.prototype),index_modern_l=e=>"object"==typeof e&&null!==e,index_modern_a=new WeakMap,index_modern_f=e=>e[index_modern_r]||e,index_modern_i=(s,l,p)=>{if(!index_modern_c(s))return s;const y=index_modern_f(s),u=(e=>Object.isFrozen(e)||Object.values(Object.getOwnPropertyDescriptors(e)).some(e=>!e.writable))(y);let g=p&&p.get(y);return g&&g[1].f===u||(g=((n,o)=>{const s={f:o};let c=!1;const l=(t,r)=>{if(!c){let o=s.a.get(n);o||(o=new Set,s.a.set(n,o)),r&&o.has(index_modern_e)||o.add(t)}},a={get:(e,t)=>t===index_modern_r?n:(l(t),index_modern_i(e[t],s.a,s.c)),has:(e,r)=>r===index_modern_t?(c=!0,s.a.delete(n),!0):(l(r),r in e),getOwnPropertyDescriptor:(e,t)=>(l(t,!0),Object.getOwnPropertyDescriptor(e,t)),ownKeys:t=>(l(index_modern_e),Reflect.ownKeys(t))};return o&&(a.set=a.deleteProperty=()=>!1),[a,s]})(y,u),g[1].p=index_modern_n(u?(e=>{let t=index_modern_a.get(e);if(!t){if(Array.isArray(e))t=Array.from(e);else{const r=Object.getOwnPropertyDescriptors(e);Object.values(r).forEach(e=>{e.configurable=!0}),t=Object.create(index_modern_o(e),r)}index_modern_a.set(e,t)}return t})(y):y,g[0]),p&&p.set(y,g)),g[1].a=l,g[1].c=p,g[1].p},index_modern_p=(e,t)=>{const r=Reflect.ownKeys(e),n=Reflect.ownKeys(t);return r.length!==n.length||r.some((e,t)=>e!==n[t])},index_modern_y=(t,r,n,o)=>{if(Object.is(t,r))return!1;if(!index_modern_l(t)||!index_modern_l(r))return!0;const s=n.get(index_modern_f(t));if(!s)return!0;if(o){const e=o.get(t);if(e&&e.n===r)return e.g;o.set(t,{n:r,g:!1})}let c=null;for(const l of s){const s=l===index_modern_e?index_modern_p(t,r):index_modern_y(t[l],r[l],n,o);if(!0!==s&&!1!==s||(c=s),c)break}return null===c&&(c=!0),o&&o.set(t,{n:r,g:c}),c},index_modern_u=e=>!!index_modern_c(e)&&index_modern_t in e,index_modern_g=e=>index_modern_c(e)&&e[index_modern_r]||null,index_modern_b=(e,t=!0)=>{index_modern_s.set(e,t)},O=(e,t)=>{const r=[],n=new WeakSet,o=(e,s)=>{if(n.has(e))return;index_modern_l(e)&&n.add(e);const c=index_modern_l(e)&&t.get(index_modern_f(e));c?c.forEach(t=>{o(e[t],s?[...s,t]:[t])}):s&&r.push(s)};return o(e),r},index_modern_w=e=>{index_modern_n=e};
33296  
33297  ;// CONCATENATED MODULE: ./node_modules/valtio/esm/vanilla.js
33298  
33299  
33300  const vanilla_isObject = (x) => typeof x === "object" && x !== null;
33301  const refSet = /* @__PURE__ */ new WeakSet();
33302  const VERSION =  true ? Symbol("VERSION") : 0;
33303  const LISTENERS =  true ? Symbol("LISTENERS") : 0;
33304  const SNAPSHOT =  true ? Symbol("SNAPSHOT") : 0;
33305  const buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), canProxy = (x) => vanilla_isObject(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer), PROMISE_RESULT =  true ? Symbol("PROMISE_RESULT") : 0, PROMISE_ERROR =  true ? Symbol("PROMISE_ERROR") : 0, snapshotCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (version, target, receiver) => {
33306    const cache = snapshotCache.get(receiver);
33307    if ((cache == null ? void 0 : cache[0]) === version) {
33308      return cache[1];
33309    }
33310    const snapshot2 = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
33311    index_modern_b(snapshot2, true);
33312    snapshotCache.set(receiver, [version, snapshot2]);
33313    Reflect.ownKeys(target).forEach((key) => {
33314      const value = Reflect.get(target, key, receiver);
33315      if (refSet.has(value)) {
33316        index_modern_b(value, false);
33317        snapshot2[key] = value;
33318      } else if (value instanceof Promise) {
33319        if (PROMISE_RESULT in value) {
33320          snapshot2[key] = value[PROMISE_RESULT];
33321        } else {
33322          const errorOrPromise = value[PROMISE_ERROR] || value;
33323          Object.defineProperty(snapshot2, key, {
33324            get() {
33325              if (PROMISE_RESULT in value) {
33326                return value[PROMISE_RESULT];
33327              }
33328              throw errorOrPromise;
33329            }
33330          });
33331        }
33332      } else if (value == null ? void 0 : value[LISTENERS]) {
33333        snapshot2[key] = value[SNAPSHOT];
33334      } else {
33335        snapshot2[key] = value;
33336      }
33337    });
33338    return Object.freeze(snapshot2);
33339  }, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1], proxyFunction2 = (initialObject) => {
33340    if (!vanilla_isObject(initialObject)) {
33341      throw new Error("object required");
33342    }
33343    const found = proxyCache.get(initialObject);
33344    if (found) {
33345      return found;
33346    }
33347    let version = versionHolder[0];
33348    const listeners = /* @__PURE__ */ new Set();
33349    const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
33350      if (version !== nextVersion) {
33351        version = nextVersion;
33352        listeners.forEach((listener) => listener(op, nextVersion));
33353      }
33354    };
33355    const propListeners = /* @__PURE__ */ new Map();
33356    const getPropListener = (prop) => {
33357      let propListener = propListeners.get(prop);
33358      if (!propListener) {
33359        propListener = (op, nextVersion) => {
33360          const newOp = [...op];
33361          newOp[1] = [prop, ...newOp[1]];
33362          notifyUpdate(newOp, nextVersion);
33363        };
33364        propListeners.set(prop, propListener);
33365      }
33366      return propListener;
33367    };
33368    const popPropListener = (prop) => {
33369      const propListener = propListeners.get(prop);
33370      propListeners.delete(prop);
33371      return propListener;
33372    };
33373    const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
33374    const handler = {
33375      get(target, prop, receiver) {
33376        if (prop === VERSION) {
33377          return version;
33378        }
33379        if (prop === LISTENERS) {
33380          return listeners;
33381        }
33382        if (prop === SNAPSHOT) {
33383          return createSnapshot(version, target, receiver);
33384        }
33385        return Reflect.get(target, prop, receiver);
33386      },
33387      deleteProperty(target, prop) {
33388        const prevValue = Reflect.get(target, prop);
33389        const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS];
33390        if (childListeners) {
33391          childListeners.delete(popPropListener(prop));
33392        }
33393        const deleted = Reflect.deleteProperty(target, prop);
33394        if (deleted) {
33395          notifyUpdate(["delete", [prop], prevValue]);
33396        }
33397        return deleted;
33398      },
33399      set(target, prop, value, receiver) {
33400        var _a;
33401        const hasPrevValue = Reflect.has(target, prop);
33402        const prevValue = Reflect.get(target, prop, receiver);
33403        if (hasPrevValue && objectIs(prevValue, value)) {
33404          return true;
33405        }
33406        const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS];
33407        if (childListeners) {
33408          childListeners.delete(popPropListener(prop));
33409        }
33410        if (vanilla_isObject(value)) {
33411          value = index_modern_g(value) || value;
33412        }
33413        let nextValue;
33414        if ((_a = Object.getOwnPropertyDescriptor(target, prop)) == null ? void 0 : _a.set) {
33415          nextValue = value;
33416        } else if (value instanceof Promise) {
33417          nextValue = value.then((v) => {
33418            nextValue[PROMISE_RESULT] = v;
33419            notifyUpdate(["resolve", [prop], v]);
33420            return v;
33421          }).catch((e) => {
33422            nextValue[PROMISE_ERROR] = e;
33423            notifyUpdate(["reject", [prop], e]);
33424          });
33425        } else if (value == null ? void 0 : value[LISTENERS]) {
33426          nextValue = value;
33427          nextValue[LISTENERS].add(getPropListener(prop));
33428        } else if (canProxy(value)) {
33429          nextValue = vanilla_proxy(value);
33430          nextValue[LISTENERS].add(getPropListener(prop));
33431        } else {
33432          nextValue = value;
33433        }
33434        Reflect.set(target, prop, nextValue, receiver);
33435        notifyUpdate(["set", [prop], value, prevValue]);
33436        return true;
33437      }
33438    };
33439    const proxyObject = newProxy(baseObject, handler);
33440    proxyCache.set(initialObject, proxyObject);
33441    Reflect.ownKeys(initialObject).forEach((key) => {
33442      const desc = Object.getOwnPropertyDescriptor(
33443        initialObject,
33444        key
33445      );
33446      if (desc.get || desc.set) {
33447        Object.defineProperty(baseObject, key, desc);
33448      } else {
33449        proxyObject[key] = initialObject[key];
33450      }
33451    });
33452    return proxyObject;
33453  }) => [
33454    proxyFunction2,
33455    refSet,
33456    VERSION,
33457    LISTENERS,
33458    SNAPSHOT,
33459    objectIs,
33460    newProxy,
33461    canProxy,
33462    PROMISE_RESULT,
33463    PROMISE_ERROR,
33464    snapshotCache,
33465    createSnapshot,
33466    proxyCache,
33467    versionHolder
33468  ];
33469  const [proxyFunction] = buildProxyFunction();
33470  function vanilla_proxy(initialObject = {}) {
33471    return proxyFunction(initialObject);
33472  }
33473  function vanilla_getVersion(proxyObject) {
33474    return vanilla_isObject(proxyObject) ? proxyObject[VERSION] : void 0;
33475  }
33476  function vanilla_subscribe(proxyObject, callback, notifyInSync) {
33477    if ( true && !(proxyObject == null ? void 0 : proxyObject[LISTENERS])) {
33478      console.warn("Please use proxy object");
33479    }
33480    let promise;
33481    const ops = [];
33482    const listener = (op) => {
33483      ops.push(op);
33484      if (notifyInSync) {
33485        callback(ops.splice(0));
33486        return;
33487      }
33488      if (!promise) {
33489        promise = Promise.resolve().then(() => {
33490          promise = void 0;
33491          callback(ops.splice(0));
33492        });
33493      }
33494    };
33495    proxyObject[LISTENERS].add(listener);
33496    return () => {
33497      proxyObject[LISTENERS].delete(listener);
33498    };
33499  }
33500  function vanilla_snapshot(proxyObject) {
33501    if ( true && !(proxyObject == null ? void 0 : proxyObject[SNAPSHOT])) {
33502      console.warn("Please use proxy object");
33503    }
33504    return proxyObject[SNAPSHOT];
33505  }
33506  function vanilla_ref(obj) {
33507    refSet.add(obj);
33508    return obj;
33509  }
33510  const unstable_buildProxyFunction = (/* unused pure expression or super */ null && (buildProxyFunction));
33511  
33512  
33513  
33514  ;// CONCATENATED MODULE: ./node_modules/valtio/esm/index.js
33515  
33516  
33517  
33518  
33519  
33520  
33521  const { useSyncExternalStore: esm_useSyncExternalStore } = shim;
33522  const useAffectedDebugValue = (state, affected) => {
33523    const pathList = (0,external_React_.useRef)();
33524    (0,external_React_.useEffect)(() => {
33525      pathList.current = O(state, affected);
33526    });
33527    (0,external_React_.useDebugValue)(pathList.current);
33528  };
33529  function useSnapshot(proxyObject, options) {
33530    const notifyInSync = options == null ? void 0 : options.sync;
33531    const lastSnapshot = (0,external_React_.useRef)();
33532    const lastAffected = (0,external_React_.useRef)();
33533    let inRender = true;
33534    const currSnapshot = esm_useSyncExternalStore(
33535      (0,external_React_.useCallback)(
33536        (callback) => {
33537          const unsub = vanilla_subscribe(proxyObject, callback, notifyInSync);
33538          callback();
33539          return unsub;
33540        },
33541        [proxyObject, notifyInSync]
33542      ),
33543      () => {
33544        const nextSnapshot = vanilla_snapshot(proxyObject);
33545        try {
33546          if (!inRender && lastSnapshot.current && lastAffected.current && !index_modern_y(
33547            lastSnapshot.current,
33548            nextSnapshot,
33549            lastAffected.current,
33550            /* @__PURE__ */ new WeakMap()
33551          )) {
33552            return lastSnapshot.current;
33553          }
33554        } catch (e) {
33555        }
33556        return nextSnapshot;
33557      },
33558      () => vanilla_snapshot(proxyObject)
33559    );
33560    inRender = false;
33561    const currAffected = /* @__PURE__ */ new WeakMap();
33562    (0,external_React_.useEffect)(() => {
33563      lastSnapshot.current = currSnapshot;
33564      lastAffected.current = currAffected;
33565    });
33566    if (true) {
33567      useAffectedDebugValue(currSnapshot, currAffected);
33568    }
33569    const proxyCache = (0,external_React_.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
33570    return index_modern_i(currSnapshot, currAffected, proxyCache);
33571  }
33572  
33573  
33574  
33575  ;// CONCATENATED MODULE: ./node_modules/valtio/esm/utils.js
33576  
33577  
33578  function subscribeKey(proxyObject, key, callback, notifyInSync) {
33579    return subscribe(
33580      proxyObject,
33581      (ops) => {
33582        if (ops.some((op) => op[1][0] === key)) {
33583          callback(proxyObject[key]);
33584        }
33585      },
33586      notifyInSync
33587    );
33588  }
33589  
33590  let currentCleanups;
33591  function watch(callback, options) {
33592    let alive = true;
33593    const cleanups = /* @__PURE__ */ new Set();
33594    const subscriptions = /* @__PURE__ */ new Map();
33595    const cleanup = () => {
33596      if (alive) {
33597        alive = false;
33598        cleanups.forEach((clean) => clean());
33599        cleanups.clear();
33600        subscriptions.forEach((unsubscribe) => unsubscribe());
33601        subscriptions.clear();
33602      }
33603    };
33604    const revalidate = () => {
33605      if (!alive) {
33606        return;
33607      }
33608      cleanups.forEach((clean) => clean());
33609      cleanups.clear();
33610      const proxiesToSubscribe = /* @__PURE__ */ new Set();
33611      const parent = currentCleanups;
33612      currentCleanups = cleanups;
33613      try {
33614        const cleanupReturn = callback((proxyObject) => {
33615          proxiesToSubscribe.add(proxyObject);
33616          return proxyObject;
33617        });
33618        if (cleanupReturn) {
33619          cleanups.add(cleanupReturn);
33620        }
33621      } finally {
33622        currentCleanups = parent;
33623      }
33624      subscriptions.forEach((unsubscribe, proxyObject) => {
33625        if (proxiesToSubscribe.has(proxyObject)) {
33626          proxiesToSubscribe.delete(proxyObject);
33627        } else {
33628          subscriptions.delete(proxyObject);
33629          unsubscribe();
33630        }
33631      });
33632      proxiesToSubscribe.forEach((proxyObject) => {
33633        const unsubscribe = subscribe(proxyObject, revalidate, options == null ? void 0 : options.sync);
33634        subscriptions.set(proxyObject, unsubscribe);
33635      });
33636    };
33637    if (currentCleanups) {
33638      currentCleanups.add(cleanup);
33639    }
33640    revalidate();
33641    return cleanup;
33642  }
33643  
33644  const DEVTOOLS = Symbol();
33645  function devtools(proxyObject, options) {
33646    if (typeof options === "string") {
33647      console.warn(
33648        "string name option is deprecated, use { name }. https://github.com/pmndrs/valtio/pull/400"
33649      );
33650      options = { name: options };
33651    }
33652    const { enabled, name = "" } = options || {};
33653    let extension;
33654    try {
33655      extension = (enabled != null ? enabled : (/* unsupported import.meta.env */ undefined && 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
33656    } catch {
33657    }
33658    if (!extension) {
33659      if ( true && enabled) {
33660        console.warn("[Warning] Please install/enable Redux devtools extension");
33661      }
33662      return;
33663    }
33664    let isTimeTraveling = false;
33665    const devtools2 = extension.connect({ name });
33666    const unsub1 = subscribe(proxyObject, (ops) => {
33667      const action = ops.filter(([_, path]) => path[0] !== DEVTOOLS).map(([op, path]) => `$op}:$path.map(String).join(".")}`).join(", ");
33668      if (!action) {
33669        return;
33670      }
33671      if (isTimeTraveling) {
33672        isTimeTraveling = false;
33673      } else {
33674        const snapWithoutDevtools = Object.assign({}, snapshot(proxyObject));
33675        delete snapWithoutDevtools[DEVTOOLS];
33676        devtools2.send(
33677          {
33678            type: action,
33679            updatedAt: new Date().toLocaleString()
33680          },
33681          snapWithoutDevtools
33682        );
33683      }
33684    });
33685    const unsub2 = devtools2.subscribe((message) => {
33686      var _a, _b, _c, _d, _e, _f;
33687      if (message.type === "ACTION" && message.payload) {
33688        try {
33689          Object.assign(proxyObject, JSON.parse(message.payload));
33690        } catch (e) {
33691          console.error(
33692            "please dispatch a serializable value that JSON.parse() and proxy() support\n",
33693            e
33694          );
33695        }
33696      }
33697      if (message.type === "DISPATCH" && message.state) {
33698        if (((_a = message.payload) == null ? void 0 : _a.type) === "JUMP_TO_ACTION" || ((_b = message.payload) == null ? void 0 : _b.type) === "JUMP_TO_STATE") {
33699          isTimeTraveling = true;
33700          const state = JSON.parse(message.state);
33701          Object.assign(proxyObject, state);
33702        }
33703        proxyObject[DEVTOOLS] = message;
33704      } else if (message.type === "DISPATCH" && ((_c = message.payload) == null ? void 0 : _c.type) === "COMMIT") {
33705        devtools2.init(snapshot(proxyObject));
33706      } else if (message.type === "DISPATCH" && ((_d = message.payload) == null ? void 0 : _d.type) === "IMPORT_STATE") {
33707        const actions = (_e = message.payload.nextLiftedState) == null ? void 0 : _e.actionsById;
33708        const computedStates = ((_f = message.payload.nextLiftedState) == null ? void 0 : _f.computedStates) || [];
33709        isTimeTraveling = true;
33710        computedStates.forEach(({ state }, index) => {
33711          const action = actions[index] || "No action found";
33712          Object.assign(proxyObject, state);
33713          if (index === 0) {
33714            devtools2.init(snapshot(proxyObject));
33715          } else {
33716            devtools2.send(action, snapshot(proxyObject));
33717          }
33718        });
33719      }
33720    });
33721    devtools2.init(snapshot(proxyObject));
33722    return () => {
33723      unsub1();
33724      unsub2 == null ? void 0 : unsub2();
33725    };
33726  }
33727  
33728  const sourceObjectMap = /* @__PURE__ */ new WeakMap();
33729  const derivedObjectMap = /* @__PURE__ */ new WeakMap();
33730  const markPending = (sourceObject, callback) => {
33731    const sourceObjectEntry = sourceObjectMap.get(sourceObject);
33732    if (sourceObjectEntry) {
33733      sourceObjectEntry[0].forEach((subscription) => {
33734        const { d: derivedObject } = subscription;
33735        if (sourceObject !== derivedObject) {
33736          markPending(derivedObject);
33737        }
33738      });
33739      ++sourceObjectEntry[2];
33740      if (callback) {
33741        sourceObjectEntry[3].add(callback);
33742      }
33743    }
33744  };
33745  const checkPending = (sourceObject, callback) => {
33746    const sourceObjectEntry = sourceObjectMap.get(sourceObject);
33747    if (sourceObjectEntry == null ? void 0 : sourceObjectEntry[2]) {
33748      sourceObjectEntry[3].add(callback);
33749      return true;
33750    }
33751    return false;
33752  };
33753  const unmarkPending = (sourceObject) => {
33754    const sourceObjectEntry = sourceObjectMap.get(sourceObject);
33755    if (sourceObjectEntry) {
33756      --sourceObjectEntry[2];
33757      if (!sourceObjectEntry[2]) {
33758        sourceObjectEntry[3].forEach((callback) => callback());
33759        sourceObjectEntry[3].clear();
33760      }
33761      sourceObjectEntry[0].forEach((subscription) => {
33762        const { d: derivedObject } = subscription;
33763        if (sourceObject !== derivedObject) {
33764          unmarkPending(derivedObject);
33765        }
33766      });
33767    }
33768  };
33769  const addSubscription = (subscription) => {
33770    const { s: sourceObject, d: derivedObject } = subscription;
33771    let derivedObjectEntry = derivedObjectMap.get(derivedObject);
33772    if (!derivedObjectEntry) {
33773      derivedObjectEntry = [/* @__PURE__ */ new Set()];
33774      derivedObjectMap.set(subscription.d, derivedObjectEntry);
33775    }
33776    derivedObjectEntry[0].add(subscription);
33777    let sourceObjectEntry = sourceObjectMap.get(sourceObject);
33778    if (!sourceObjectEntry) {
33779      const subscriptions = /* @__PURE__ */ new Set();
33780      const unsubscribe = vanilla_subscribe(
33781        sourceObject,
33782        (ops) => {
33783          subscriptions.forEach((subscription2) => {
33784            const {
33785              d: derivedObject2,
33786              c: callback,
33787              n: notifyInSync,
33788              i: ignoreKeys
33789            } = subscription2;
33790            if (sourceObject === derivedObject2 && ops.every(
33791              (op) => op[1].length === 1 && ignoreKeys.includes(op[1][0])
33792            )) {
33793              return;
33794            }
33795            if (subscription2.p) {
33796              return;
33797            }
33798            markPending(sourceObject, callback);
33799            if (notifyInSync) {
33800              unmarkPending(sourceObject);
33801            } else {
33802              subscription2.p = Promise.resolve().then(() => {
33803                delete subscription2.p;
33804                unmarkPending(sourceObject);
33805              });
33806            }
33807          });
33808        },
33809        true
33810      );
33811      sourceObjectEntry = [subscriptions, unsubscribe, 0, /* @__PURE__ */ new Set()];
33812      sourceObjectMap.set(sourceObject, sourceObjectEntry);
33813    }
33814    sourceObjectEntry[0].add(subscription);
33815  };
33816  const removeSubscription = (subscription) => {
33817    const { s: sourceObject, d: derivedObject } = subscription;
33818    const derivedObjectEntry = derivedObjectMap.get(derivedObject);
33819    derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].delete(subscription);
33820    if ((derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].size) === 0) {
33821      derivedObjectMap.delete(derivedObject);
33822    }
33823    const sourceObjectEntry = sourceObjectMap.get(sourceObject);
33824    if (sourceObjectEntry) {
33825      const [subscriptions, unsubscribe] = sourceObjectEntry;
33826      subscriptions.delete(subscription);
33827      if (!subscriptions.size) {
33828        unsubscribe();
33829        sourceObjectMap.delete(sourceObject);
33830      }
33831    }
33832  };
33833  const listSubscriptions = (derivedObject) => {
33834    const derivedObjectEntry = derivedObjectMap.get(derivedObject);
33835    if (derivedObjectEntry) {
33836      return Array.from(derivedObjectEntry[0]);
33837    }
33838    return [];
33839  };
33840  const unstable_deriveSubscriptions = {
33841    add: addSubscription,
33842    remove: removeSubscription,
33843    list: listSubscriptions
33844  };
33845  function derive(derivedFns, options) {
33846    const proxyObject = (options == null ? void 0 : options.proxy) || proxy({});
33847    const notifyInSync = !!(options == null ? void 0 : options.sync);
33848    const derivedKeys = Object.keys(derivedFns);
33849    derivedKeys.forEach((key) => {
33850      if (Object.getOwnPropertyDescriptor(proxyObject, key)) {
33851        throw new Error("object property already defined");
33852      }
33853      const fn = derivedFns[key];
33854      let lastDependencies = null;
33855      const evaluate = () => {
33856        if (lastDependencies) {
33857          if (Array.from(lastDependencies).map(([p]) => checkPending(p, evaluate)).some((isPending) => isPending)) {
33858            return;
33859          }
33860          if (Array.from(lastDependencies).every(
33861            ([p, entry]) => getVersion(p) === entry.v
33862          )) {
33863            return;
33864          }
33865        }
33866        const dependencies = /* @__PURE__ */ new Map();
33867        const get = (p) => {
33868          dependencies.set(p, { v: getVersion(p) });
33869          return p;
33870        };
33871        const value = fn(get);
33872        const subscribeToDependencies = () => {
33873          dependencies.forEach((entry, p) => {
33874            var _a;
33875            const lastSubscription = (_a = lastDependencies == null ? void 0 : lastDependencies.get(p)) == null ? void 0 : _a.s;
33876            if (lastSubscription) {
33877              entry.s = lastSubscription;
33878            } else {
33879              const subscription = {
33880                s: p,
33881                d: proxyObject,
33882                k: key,
33883                c: evaluate,
33884                n: notifyInSync,
33885                i: derivedKeys
33886              };
33887              addSubscription(subscription);
33888              entry.s = subscription;
33889            }
33890          });
33891          lastDependencies == null ? void 0 : lastDependencies.forEach((entry, p) => {
33892            if (!dependencies.has(p) && entry.s) {
33893              removeSubscription(entry.s);
33894            }
33895          });
33896          lastDependencies = dependencies;
33897        };
33898        if (value instanceof Promise) {
33899          value.finally(subscribeToDependencies);
33900        } else {
33901          subscribeToDependencies();
33902        }
33903        proxyObject[key] = value;
33904      };
33905      evaluate();
33906    });
33907    return proxyObject;
33908  }
33909  function underive(proxyObject, options) {
33910    const keysToDelete = (options == null ? void 0 : options.delete) ? /* @__PURE__ */ new Set() : null;
33911    listSubscriptions(proxyObject).forEach((subscription) => {
33912      const { k: key } = subscription;
33913      if (!(options == null ? void 0 : options.keys) || options.keys.includes(key)) {
33914        removeSubscription(subscription);
33915        if (keysToDelete) {
33916          keysToDelete.add(key);
33917        }
33918      }
33919    });
33920    if (keysToDelete) {
33921      keysToDelete.forEach((key) => {
33922        delete proxyObject[key];
33923      });
33924    }
33925  }
33926  
33927  function addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject = proxyObject) {
33928    console.warn(
33929      "addComputed is deprecated. Please consider using `derive` or `proxyWithComputed` instead. Falling back to emulation with derive. https://github.com/pmndrs/valtio/pull/201"
33930    );
33931    const derivedFns = {};
33932    Object.keys(computedFns_FAKE).forEach((key) => {
33933      derivedFns[key] = (get) => computedFns_FAKE[key](get(proxyObject));
33934    });
33935    return derive(derivedFns, { proxy: targetObject });
33936  }
33937  
33938  function proxyWithComputed(initialObject, computedFns) {
33939    Object.keys(computedFns).forEach((key) => {
33940      if (Object.getOwnPropertyDescriptor(initialObject, key)) {
33941        throw new Error("object property already defined");
33942      }
33943      const computedFn = computedFns[key];
33944      const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn;
33945      const desc = {};
33946      desc.get = () => get(snapshot(proxyObject));
33947      if (set) {
33948        desc.set = (newValue) => set(proxyObject, newValue);
33949      }
33950      Object.defineProperty(initialObject, key, desc);
33951    });
33952    const proxyObject = proxy(initialObject);
33953    return proxyObject;
33954  }
33955  
33956  const utils_isObject = (x) => typeof x === "object" && x !== null;
33957  const deepClone = (obj) => {
33958    if (!utils_isObject(obj)) {
33959      return obj;
33960    }
33961    const baseObject = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj));
33962    Reflect.ownKeys(obj).forEach((key) => {
33963      baseObject[key] = deepClone(obj[key]);
33964    });
33965    return baseObject;
33966  };
33967  function proxyWithHistory(initialValue, skipSubscribe = false) {
33968    const proxyObject = proxy({
33969      value: initialValue,
33970      history: ref({
33971        wip: void 0,
33972        snapshots: [],
33973        index: -1
33974      }),
33975      canUndo: () => proxyObject.history.index > 0,
33976      undo: () => {
33977        if (proxyObject.canUndo()) {
33978          proxyObject.value = proxyObject.history.wip = deepClone(
33979            proxyObject.history.snapshots[--proxyObject.history.index]
33980          );
33981        }
33982      },
33983      canRedo: () => proxyObject.history.index < proxyObject.history.snapshots.length - 1,
33984      redo: () => {
33985        if (proxyObject.canRedo()) {
33986          proxyObject.value = proxyObject.history.wip = deepClone(
33987            proxyObject.history.snapshots[++proxyObject.history.index]
33988          );
33989        }
33990      },
33991      saveHistory: () => {
33992        proxyObject.history.snapshots.splice(proxyObject.history.index + 1);
33993        proxyObject.history.snapshots.push(snapshot(proxyObject).value);
33994        ++proxyObject.history.index;
33995      },
33996      subscribe: () => subscribe(proxyObject, (ops) => {
33997        if (ops.every(
33998          (op) => op[1][0] === "value" && (op[0] !== "set" || op[2] !== proxyObject.history.wip)
33999        )) {
34000          proxyObject.saveHistory();
34001        }
34002      })
34003    });
34004    proxyObject.saveHistory();
34005    if (!skipSubscribe) {
34006      proxyObject.subscribe();
34007    }
34008    return proxyObject;
34009  }
34010  
34011  function proxySet(initialValues) {
34012    const set = proxy({
34013      data: Array.from(new Set(initialValues)),
34014      has(value) {
34015        return this.data.indexOf(value) !== -1;
34016      },
34017      add(value) {
34018        let hasProxy = false;
34019        if (typeof value === "object" && value !== null) {
34020          hasProxy = this.data.indexOf(proxy(value)) !== -1;
34021        }
34022        if (this.data.indexOf(value) === -1 && !hasProxy) {
34023          this.data.push(value);
34024        }
34025        return this;
34026      },
34027      delete(value) {
34028        const index = this.data.indexOf(value);
34029        if (index === -1) {
34030          return false;
34031        }
34032        this.data.splice(index, 1);
34033        return true;
34034      },
34035      clear() {
34036        this.data.splice(0);
34037      },
34038      get size() {
34039        return this.data.length;
34040      },
34041      forEach(cb) {
34042        this.data.forEach((value) => {
34043          cb(value, value, this);
34044        });
34045      },
34046      get [Symbol.toStringTag]() {
34047        return "Set";
34048      },
34049      toJSON() {
34050        return {};
34051      },
34052      [Symbol.iterator]() {
34053        return this.data[Symbol.iterator]();
34054      },
34055      values() {
34056        return this.data.values();
34057      },
34058      keys() {
34059        return this.data.values();
34060      },
34061      entries() {
34062        return new Set(this.data).entries();
34063      }
34064    });
34065    Object.defineProperties(set, {
34066      data: {
34067        enumerable: false
34068      },
34069      size: {
34070        enumerable: false
34071      },
34072      toJSON: {
34073        enumerable: false
34074      }
34075    });
34076    Object.seal(set);
34077    return set;
34078  }
34079  
34080  function proxyMap(entries) {
34081    const map = vanilla_proxy({
34082      data: Array.from(entries || []),
34083      has(key) {
34084        return this.data.some((p) => p[0] === key);
34085      },
34086      set(key, value) {
34087        const record = this.data.find((p) => p[0] === key);
34088        if (record) {
34089          record[1] = value;
34090        } else {
34091          this.data.push([key, value]);
34092        }
34093        return this;
34094      },
34095      get(key) {
34096        var _a;
34097        return (_a = this.data.find((p) => p[0] === key)) == null ? void 0 : _a[1];
34098      },
34099      delete(key) {
34100        const index = this.data.findIndex((p) => p[0] === key);
34101        if (index === -1) {
34102          return false;
34103        }
34104        this.data.splice(index, 1);
34105        return true;
34106      },
34107      clear() {
34108        this.data.splice(0);
34109      },
34110      get size() {
34111        return this.data.length;
34112      },
34113      toJSON() {
34114        return {};
34115      },
34116      forEach(cb) {
34117        this.data.forEach((p) => {
34118          cb(p[1], p[0], this);
34119        });
34120      },
34121      keys() {
34122        return this.data.map((p) => p[0]).values();
34123      },
34124      values() {
34125        return this.data.map((p) => p[1]).values();
34126      },
34127      entries() {
34128        return new Map(this.data).entries();
34129      },
34130      get [Symbol.toStringTag]() {
34131        return "Map";
34132      },
34133      [Symbol.iterator]() {
34134        return this.entries();
34135      }
34136    });
34137    Object.defineProperties(map, {
34138      data: {
34139        enumerable: false
34140      },
34141      size: {
34142        enumerable: false
34143      },
34144      toJSON: {
34145        enumerable: false
34146      }
34147    });
34148    Object.seal(map);
34149    return map;
34150  }
34151  
34152  
34153  
34154  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js
34155  /**
34156   * External dependencies
34157   */
34158  
34159  /**
34160   * WordPress dependencies
34161   */
34162  
34163  
34164  /**
34165   * Internal dependencies
34166   */
34167  
34168  const initialContextValue = {
34169    slots: proxyMap(),
34170    fills: proxyMap(),
34171    registerSlot: () => {
34172       true ? external_wp_warning_default()('Components must be wrapped within `SlotFillProvider`. ' + 'See https://developer.wordpress.org/block-editor/components/slot-fill/') : 0;
34173    },
34174    updateSlot: () => {},
34175    unregisterSlot: () => {},
34176    registerFill: () => {},
34177    unregisterFill: () => {},
34178    // This helps the provider know if it's using the default context value or not.
34179    isDefault: true
34180  };
34181  const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue);
34182  /* harmony default export */ const slot_fill_context = (SlotFillContext);
34183  
34184  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js
34185  /**
34186   * External dependencies
34187   */
34188  
34189  
34190  /**
34191   * WordPress dependencies
34192   */
34193  
34194  
34195  /**
34196   * Internal dependencies
34197   */
34198  
34199  function useSlot(name) {
34200    const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
34201    const slots = useSnapshot(registry.slots, {
34202      sync: true
34203    });
34204    // The important bit here is that the `useSnapshot` call ensures that the
34205    // hook only causes a re-render if the slot with the given name changes,
34206    // not any other slot.
34207    const slot = slots.get(name);
34208    const api = (0,external_wp_element_namespaceObject.useMemo)(() => ({
34209      updateSlot: fillProps => registry.updateSlot(name, fillProps),
34210      unregisterSlot: ref => registry.unregisterSlot(name, ref),
34211      registerFill: ref => registry.registerFill(name, ref),
34212      unregisterFill: ref => registry.unregisterFill(name, ref)
34213    }), [name, registry]);
34214    return {
34215      ...slot,
34216      ...api
34217    };
34218  }
34219  
34220  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/context.js
34221  /**
34222   * WordPress dependencies
34223   */
34224  
34225  /**
34226   * Internal dependencies
34227   */
34228  
34229  const initialValue = {
34230    registerSlot: () => {},
34231    unregisterSlot: () => {},
34232    registerFill: () => {},
34233    unregisterFill: () => {},
34234    getSlot: () => undefined,
34235    getFills: () => [],
34236    subscribe: () => () => {}
34237  };
34238  const context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)(initialValue);
34239  /* harmony default export */ const context = (context_SlotFillContext);
34240  
34241  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/use-slot.js
34242  /**
34243   * WordPress dependencies
34244   */
34245  
34246  
34247  /**
34248   * Internal dependencies
34249   */
34250  
34251  /**
34252   * React hook returning the active slot given a name.
34253   *
34254   * @param name Slot name.
34255   * @return Slot object.
34256   */
34257  const use_slot_useSlot = name => {
34258    const {
34259      getSlot,
34260      subscribe
34261    } = (0,external_wp_element_namespaceObject.useContext)(context);
34262    return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name));
34263  };
34264  /* harmony default export */ const use_slot = (use_slot_useSlot);
34265  
34266  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/fill.js
34267  /**
34268   * WordPress dependencies
34269   */
34270  
34271  
34272  /**
34273   * Internal dependencies
34274   */
34275  
34276  
34277  function Fill({
34278    name,
34279    children
34280  }) {
34281    const {
34282      registerFill,
34283      unregisterFill
34284    } = (0,external_wp_element_namespaceObject.useContext)(context);
34285    const slot = use_slot(name);
34286    const ref = (0,external_wp_element_namespaceObject.useRef)({
34287      name,
34288      children
34289    });
34290    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34291      const refValue = ref.current;
34292      registerFill(name, refValue);
34293      return () => unregisterFill(name, refValue);
34294      // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
34295      // We'll leave them as-is until a more detailed investigation/refactor can be performed.
34296      // eslint-disable-next-line react-hooks/exhaustive-deps
34297    }, []);
34298    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34299      ref.current.children = children;
34300      if (slot) {
34301        slot.forceUpdate();
34302      }
34303      // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
34304      // We'll leave them as-is until a more detailed investigation/refactor can be performed.
34305      // eslint-disable-next-line react-hooks/exhaustive-deps
34306    }, [children]);
34307    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34308      if (name === ref.current.name) {
34309        // Ignore initial effect.
34310        return;
34311      }
34312      unregisterFill(ref.current.name, ref.current);
34313      ref.current.name = name;
34314      registerFill(name, ref.current);
34315      // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
34316      // We'll leave them as-is until a more detailed investigation/refactor can be performed.
34317      // eslint-disable-next-line react-hooks/exhaustive-deps
34318    }, [name]);
34319    return null;
34320  }
34321  
34322  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/slot.js
34323  
34324  /**
34325   * External dependencies
34326   */
34327  
34328  /**
34329   * WordPress dependencies
34330   */
34331  
34332  
34333  /**
34334   * Internal dependencies
34335   */
34336  
34337  /**
34338   * Whether the argument is a function.
34339   *
34340   * @param maybeFunc The argument to check.
34341   * @return True if the argument is a function, false otherwise.
34342   */
34343  function isFunction(maybeFunc) {
34344    return typeof maybeFunc === 'function';
34345  }
34346  class SlotComponent extends external_wp_element_namespaceObject.Component {
34347    constructor(props) {
34348      super(props);
34349      this.isUnmounted = false;
34350    }
34351    componentDidMount() {
34352      const {
34353        registerSlot
34354      } = this.props;
34355      this.isUnmounted = false;
34356      registerSlot(this.props.name, this);
34357    }
34358    componentWillUnmount() {
34359      const {
34360        unregisterSlot
34361      } = this.props;
34362      this.isUnmounted = true;
34363      unregisterSlot(this.props.name, this);
34364    }
34365    componentDidUpdate(prevProps) {
34366      const {
34367        name,
34368        unregisterSlot,
34369        registerSlot
34370      } = this.props;
34371      if (prevProps.name !== name) {
34372        unregisterSlot(prevProps.name, this);
34373        registerSlot(name, this);
34374      }
34375    }
34376    forceUpdate() {
34377      if (this.isUnmounted) {
34378        return;
34379      }
34380      super.forceUpdate();
34381    }
34382    render() {
34383      var _getFills;
34384      const {
34385        children,
34386        name,
34387        fillProps = {},
34388        getFills
34389      } = this.props;
34390      const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => {
34391        const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;
34392        return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => {
34393          if (!child || typeof child === 'string') {
34394            return child;
34395          }
34396          let childKey = childIndex;
34397          if (typeof child === 'object' && 'key' in child && child?.key) {
34398            childKey = child.key;
34399          }
34400          return (0,external_wp_element_namespaceObject.cloneElement)(child, {
34401            key: childKey
34402          });
34403        });
34404      }).filter(
34405      // In some cases fills are rendered only when some conditions apply.
34406      // This ensures that we only use non-empty fills when rendering, i.e.,
34407      // it allows us to render wrappers only when the fills are actually present.
34408      element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element));
34409      return (0,external_React_.createElement)(external_React_.Fragment, null, isFunction(children) ? children(fills) : fills);
34410    }
34411  }
34412  const Slot = props => (0,external_React_.createElement)(context.Consumer, null, ({
34413    registerSlot,
34414    unregisterSlot,
34415    getFills
34416  }) => (0,external_React_.createElement)(SlotComponent, {
34417    ...props,
34418    registerSlot: registerSlot,
34419    unregisterSlot: unregisterSlot,
34420    getFills: getFills
34421  }));
34422  /* harmony default export */ const slot = (Slot);
34423  
34424  ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/native.js
34425  const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
34426  /* harmony default export */ const esm_browser_native = ({
34427    randomUUID
34428  });
34429  ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/rng.js
34430  // Unique ID creation requires a high quality random # generator. In the browser we therefore
34431  // require the crypto API and do not support built-in fallback to lower quality random number
34432  // generators (like Math.random()).
34433  let getRandomValues;
34434  const rnds8 = new Uint8Array(16);
34435  function rng() {
34436    // lazy load so that environments that need to polyfill have a chance to do so
34437    if (!getRandomValues) {
34438      // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
34439      getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
34440  
34441      if (!getRandomValues) {
34442        throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
34443      }
34444    }
34445  
34446    return getRandomValues(rnds8);
34447  }
34448  ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/stringify.js
34449  
34450  /**
34451   * Convert array of 16 byte values to UUID string format of the form:
34452   * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
34453   */
34454  
34455  const byteToHex = [];
34456  
34457  for (let i = 0; i < 256; ++i) {
34458    byteToHex.push((i + 0x100).toString(16).slice(1));
34459  }
34460  
34461  function unsafeStringify(arr, offset = 0) {
34462    // Note: Be careful editing this code!  It's been tuned for performance
34463    // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
34464    return 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]];
34465  }
34466  
34467  function stringify_stringify(arr, offset = 0) {
34468    const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID.  If this throws, it's likely due to one
34469    // of the following:
34470    // - One or more input array values don't map to a hex octet (leading to
34471    // "undefined" in the uuid)
34472    // - Invalid input values for the RFC `version` or `variant` fields
34473  
34474    if (!validate(uuid)) {
34475      throw TypeError('Stringified UUID is invalid');
34476    }
34477  
34478    return uuid;
34479  }
34480  
34481  /* harmony default export */ const esm_browser_stringify = ((/* unused pure expression or super */ null && (stringify_stringify)));
34482  ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/v4.js
34483  
34484  
34485  
34486  
34487  function v4(options, buf, offset) {
34488    if (esm_browser_native.randomUUID && !buf && !options) {
34489      return esm_browser_native.randomUUID();
34490    }
34491  
34492    options = options || {};
34493    const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
34494  
34495    rnds[6] = rnds[6] & 0x0f | 0x40;
34496    rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
34497  
34498    if (buf) {
34499      offset = offset || 0;
34500  
34501      for (let i = 0; i < 16; ++i) {
34502        buf[offset + i] = rnds[i];
34503      }
34504  
34505      return buf;
34506    }
34507  
34508    return unsafeStringify(rnds);
34509  }
34510  
34511  /* harmony default export */ const esm_browser_v4 = (v4);
34512  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/style-provider/index.js
34513  
34514  /**
34515   * External dependencies
34516   */
34517  
34518  
34519  
34520  
34521  /**
34522   * Internal dependencies
34523   */
34524  
34525  const uuidCache = new Set();
34526  // Use a weak map so that when the container is detached it's automatically
34527  // dereferenced to avoid memory leak.
34528  const containerCacheMap = new WeakMap();
34529  const memoizedCreateCacheWithContainer = container => {
34530    if (containerCacheMap.has(container)) {
34531      return containerCacheMap.get(container);
34532    }
34533  
34534    // Emotion only accepts alphabetical and hyphenated keys so we just
34535    // strip the numbers from the UUID. It _should_ be fine.
34536    let key = esm_browser_v4().replace(/[0-9]/g, '');
34537    while (uuidCache.has(key)) {
34538      key = esm_browser_v4().replace(/[0-9]/g, '');
34539    }
34540    uuidCache.add(key);
34541    const cache = emotion_cache_browser_esm({
34542      container,
34543      key
34544    });
34545    containerCacheMap.set(container, cache);
34546    return cache;
34547  };
34548  function StyleProvider(props) {
34549    const {
34550      children,
34551      document
34552    } = props;
34553    if (!document) {
34554      return null;
34555    }
34556    const cache = memoizedCreateCacheWithContainer(document.head);
34557    return (0,external_React_.createElement)(CacheProvider, {
34558      value: cache
34559    }, children);
34560  }
34561  /* harmony default export */ const style_provider = (StyleProvider);
34562  
34563  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js
34564  
34565  /**
34566   * WordPress dependencies
34567   */
34568  
34569  
34570  /**
34571   * Internal dependencies
34572   */
34573  
34574  
34575  function fill_useForceUpdate() {
34576    const [, setState] = (0,external_wp_element_namespaceObject.useState)({});
34577    const mounted = (0,external_wp_element_namespaceObject.useRef)(true);
34578    (0,external_wp_element_namespaceObject.useEffect)(() => {
34579      mounted.current = true;
34580      return () => {
34581        mounted.current = false;
34582      };
34583    }, []);
34584    return () => {
34585      if (mounted.current) {
34586        setState({});
34587      }
34588    };
34589  }
34590  function fill_Fill(props) {
34591    var _slot$fillProps;
34592    const {
34593      name,
34594      children
34595    } = props;
34596    const {
34597      registerFill,
34598      unregisterFill,
34599      ...slot
34600    } = useSlot(name);
34601    const rerender = fill_useForceUpdate();
34602    const ref = (0,external_wp_element_namespaceObject.useRef)({
34603      rerender
34604    });
34605    (0,external_wp_element_namespaceObject.useEffect)(() => {
34606      // We register fills so we can keep track of their existence.
34607      // Some Slot implementations need to know if there're already fills
34608      // registered so they can choose to render themselves or not.
34609      registerFill(ref);
34610      return () => {
34611        unregisterFill(ref);
34612      };
34613    }, [registerFill, unregisterFill]);
34614    if (!slot.ref || !slot.ref.current) {
34615      return null;
34616    }
34617  
34618    // When using a `Fill`, the `children` will be rendered in the document of the
34619    // `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
34620    // to make sure we're referencing the right document/iframe (instead of the
34621    // context of the `Fill`'s parent).
34622    const wrappedChildren = (0,external_React_.createElement)(style_provider, {
34623      document: slot.ref.current.ownerDocument
34624    }, typeof children === 'function' ? children((_slot$fillProps = slot.fillProps) !== null && _slot$fillProps !== void 0 ? _slot$fillProps : {}) : children);
34625    return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current);
34626  }
34627  
34628  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js
34629  
34630  /**
34631   * External dependencies
34632   */
34633  
34634  /**
34635   * WordPress dependencies
34636   */
34637  
34638  
34639  
34640  /**
34641   * Internal dependencies
34642   */
34643  
34644  
34645  function slot_Slot(props, forwardedRef) {
34646    const {
34647      name,
34648      fillProps = {},
34649      as,
34650      // `children` is not allowed. However, if it is passed,
34651      // it will be displayed as is, so remove `children`.
34652      // @ts-ignore
34653      children,
34654      ...restProps
34655    } = props;
34656    const {
34657      registerSlot,
34658      unregisterSlot,
34659      ...registry
34660    } = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
34661    const ref = (0,external_wp_element_namespaceObject.useRef)(null);
34662    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34663      registerSlot(name, ref, fillProps);
34664      return () => {
34665        unregisterSlot(name, ref);
34666      };
34667      // Ignore reason: We don't want to unregister and register the slot whenever
34668      // `fillProps` change, which would cause the fill to be re-mounted. Instead,
34669      // we can just update the slot (see hook below).
34670      // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
34671      // eslint-disable-next-line react-hooks/exhaustive-deps
34672    }, [registerSlot, unregisterSlot, name]);
34673    // fillProps may be an update that interacts with the layout, so we
34674    // useLayoutEffect.
34675    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
34676      registry.updateSlot(name, fillProps);
34677    });
34678    return (0,external_React_.createElement)(component, {
34679      as: as,
34680      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]),
34681      ...restProps
34682    });
34683  }
34684  /* harmony default export */ const bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot));
34685  
34686  ;// CONCATENATED MODULE: external ["wp","isShallowEqual"]
34687  const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"];
34688  var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject);
34689  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js
34690  
34691  /**
34692   * External dependencies
34693   */
34694  
34695  
34696  
34697  /**
34698   * WordPress dependencies
34699   */
34700  
34701  
34702  
34703  /**
34704   * Internal dependencies
34705   */
34706  
34707  function createSlotRegistry() {
34708    const slots = proxyMap();
34709    const fills = proxyMap();
34710    const registerSlot = (name, ref, fillProps) => {
34711      const slot = slots.get(name);
34712      slots.set(name, vanilla_ref({
34713        ...slot,
34714        ref: ref || slot?.ref,
34715        fillProps: fillProps || slot?.fillProps || {}
34716      }));
34717    };
34718    const unregisterSlot = (name, ref) => {
34719      // Make sure we're not unregistering a slot registered by another element
34720      // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
34721      if (slots.get(name)?.ref === ref) {
34722        slots.delete(name);
34723      }
34724    };
34725    const updateSlot = (name, fillProps) => {
34726      const slot = slots.get(name);
34727      if (!slot) {
34728        return;
34729      }
34730      if (external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) {
34731        return;
34732      }
34733      slot.fillProps = fillProps;
34734      const slotFills = fills.get(name);
34735      if (slotFills) {
34736        // Force update fills.
34737        slotFills.forEach(fill => fill.current.rerender());
34738      }
34739    };
34740    const registerFill = (name, ref) => {
34741      fills.set(name, vanilla_ref([...(fills.get(name) || []), ref]));
34742    };
34743    const unregisterFill = (name, ref) => {
34744      const fillsForName = fills.get(name);
34745      if (!fillsForName) {
34746        return;
34747      }
34748      fills.set(name, vanilla_ref(fillsForName.filter(fillRef => fillRef !== ref)));
34749    };
34750    return {
34751      slots,
34752      fills,
34753      registerSlot,
34754      updateSlot,
34755      unregisterSlot,
34756      registerFill,
34757      unregisterFill
34758    };
34759  }
34760  function SlotFillProvider({
34761    children
34762  }) {
34763    const registry = (0,external_wp_element_namespaceObject.useMemo)(createSlotRegistry, []);
34764    return (0,external_React_.createElement)(slot_fill_context.Provider, {
34765      value: registry
34766    }, children);
34767  }
34768  
34769  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/provider.js
34770  
34771  /**
34772   * WordPress dependencies
34773   */
34774  
34775  
34776  
34777  /**
34778   * Internal dependencies
34779   */
34780  
34781  function provider_createSlotRegistry() {
34782    const slots = {};
34783    const fills = {};
34784    let listeners = [];
34785    function registerSlot(name, slot) {
34786      const previousSlot = slots[name];
34787      slots[name] = slot;
34788      triggerListeners();
34789  
34790      // Sometimes the fills are registered after the initial render of slot
34791      // But before the registerSlot call, we need to rerender the slot.
34792      forceUpdateSlot(name);
34793  
34794      // If a new instance of a slot is being mounted while another with the
34795      // same name exists, force its update _after_ the new slot has been
34796      // assigned into the instance, such that its own rendering of children
34797      // will be empty (the new Slot will subsume all fills for this name).
34798      if (previousSlot) {
34799        previousSlot.forceUpdate();
34800      }
34801    }
34802    function registerFill(name, instance) {
34803      fills[name] = [...(fills[name] || []), instance];
34804      forceUpdateSlot(name);
34805    }
34806    function unregisterSlot(name, instance) {
34807      // If a previous instance of a Slot by this name unmounts, do nothing,
34808      // as the slot and its fills should only be removed for the current
34809      // known instance.
34810      if (slots[name] !== instance) {
34811        return;
34812      }
34813      delete slots[name];
34814      triggerListeners();
34815    }
34816    function unregisterFill(name, instance) {
34817      var _fills$name$filter;
34818      fills[name] = (_fills$name$filter = fills[name]?.filter(fill => fill !== instance)) !== null && _fills$name$filter !== void 0 ? _fills$name$filter : [];
34819      forceUpdateSlot(name);
34820    }
34821    function getSlot(name) {
34822      return slots[name];
34823    }
34824    function getFills(name, slotInstance) {
34825      // Fills should only be returned for the current instance of the slot
34826      // in which they occupy.
34827      if (slots[name] !== slotInstance) {
34828        return [];
34829      }
34830      return fills[name];
34831    }
34832    function forceUpdateSlot(name) {
34833      const slot = getSlot(name);
34834      if (slot) {
34835        slot.forceUpdate();
34836      }
34837    }
34838    function triggerListeners() {
34839      listeners.forEach(listener => listener());
34840    }
34841    function subscribe(listener) {
34842      listeners.push(listener);
34843      return () => {
34844        listeners = listeners.filter(l => l !== listener);
34845      };
34846    }
34847    return {
34848      registerSlot,
34849      unregisterSlot,
34850      registerFill,
34851      unregisterFill,
34852      getSlot,
34853      getFills,
34854      subscribe
34855    };
34856  }
34857  function provider_SlotFillProvider({
34858    children
34859  }) {
34860    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(provider_createSlotRegistry, []);
34861    return (0,external_React_.createElement)(context.Provider, {
34862      value: contextValue
34863    }, children);
34864  }
34865  /* harmony default export */ const provider = (provider_SlotFillProvider);
34866  
34867  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/index.js
34868  
34869  /**
34870   * External dependencies
34871   */
34872  
34873  /**
34874   * WordPress dependencies
34875   */
34876  
34877  
34878  /**
34879   * Internal dependencies
34880   */
34881  
34882  
34883  
34884  
34885  
34886  
34887  
34888  
34889  
34890  function slot_fill_Fill(props) {
34891    // We're adding both Fills here so they can register themselves before
34892    // their respective slot has been registered. Only the Fill that has a slot
34893    // will render. The other one will return null.
34894    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Fill, {
34895      ...props
34896    }), (0,external_React_.createElement)(fill_Fill, {
34897      ...props
34898    }));
34899  }
34900  function UnforwardedSlot(props, ref) {
34901    const {
34902      bubblesVirtually,
34903      ...restProps
34904    } = props;
34905    if (bubblesVirtually) {
34906      return (0,external_React_.createElement)(bubbles_virtually_slot, {
34907        ...restProps,
34908        ref: ref
34909      });
34910    }
34911    return (0,external_React_.createElement)(slot, {
34912      ...restProps
34913    });
34914  }
34915  const slot_fill_Slot = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSlot);
34916  function Provider({
34917    children,
34918    passthrough = false
34919  }) {
34920    const parent = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
34921    if (!parent.isDefault && passthrough) {
34922      return (0,external_React_.createElement)(external_React_.Fragment, null, children);
34923    }
34924    return (0,external_React_.createElement)(provider, null, (0,external_React_.createElement)(SlotFillProvider, null, children));
34925  }
34926  function createSlotFill(key) {
34927    const baseName = typeof key === 'symbol' ? key.description : key;
34928    const FillComponent = props => (0,external_React_.createElement)(slot_fill_Fill, {
34929      name: key,
34930      ...props
34931    });
34932    FillComponent.displayName = `$baseName}Fill`;
34933    const SlotComponent = props => (0,external_React_.createElement)(slot_fill_Slot, {
34934      name: key,
34935      ...props
34936    });
34937    SlotComponent.displayName = `$baseName}Slot`;
34938    SlotComponent.__unstableName = key;
34939    return {
34940      Fill: FillComponent,
34941      Slot: SlotComponent
34942    };
34943  }
34944  const createPrivateSlotFill = name => {
34945    const privateKey = Symbol(name);
34946    const privateSlotFill = createSlotFill(privateKey);
34947    return {
34948      privateKey,
34949      ...privateSlotFill
34950    };
34951  };
34952  
34953  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/overlay-middlewares.js
34954  /**
34955   * External dependencies
34956   */
34957  
34958  
34959  function overlayMiddlewares() {
34960    return [{
34961      name: 'overlay',
34962      fn({
34963        rects
34964      }) {
34965        return rects.reference;
34966      }
34967    }, floating_ui_dom_size({
34968      apply({
34969        rects,
34970        elements
34971      }) {
34972        var _elements$floating;
34973        const {
34974          firstElementChild
34975        } = (_elements$floating = elements.floating) !== null && _elements$floating !== void 0 ? _elements$floating : {};
34976  
34977        // Only HTMLElement instances have the `style` property.
34978        if (!(firstElementChild instanceof HTMLElement)) return;
34979  
34980        // Reduce the height of the popover to the available space.
34981        Object.assign(firstElementChild.style, {
34982          width: `$rects.reference.width}px`,
34983          height: `$rects.reference.height}px`
34984        });
34985      }
34986    })];
34987  }
34988  
34989  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/index.js
34990  
34991  /**
34992   * External dependencies
34993   */
34994  
34995  
34996  
34997  // eslint-disable-next-line no-restricted-imports
34998  
34999  // eslint-disable-next-line no-restricted-imports
35000  
35001  
35002  /**
35003   * WordPress dependencies
35004   */
35005  
35006  
35007  
35008  
35009  
35010  
35011  /**
35012   * Internal dependencies
35013   */
35014  
35015  
35016  
35017  
35018  
35019  
35020  
35021  
35022  /**
35023   * Name of slot in which popover should fill.
35024   *
35025   * @type {string}
35026   */
35027  const SLOT_NAME = 'Popover';
35028  
35029  // An SVG displaying a triangle facing down, filled with a solid
35030  // color and bordered in such a way to create an arrow-like effect.
35031  // Keeping the SVG's viewbox squared simplify the arrow positioning
35032  // calculations.
35033  const ArrowTriangle = () => (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
35034    xmlns: "http://www.w3.org/2000/svg",
35035    viewBox: `0 0 100 100`,
35036    className: "components-popover__triangle",
35037    role: "presentation"
35038  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
35039    className: "components-popover__triangle-bg",
35040    d: "M 0 0 L 50 50 L 100 0"
35041  }), (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
35042    className: "components-popover__triangle-border",
35043    d: "M 0 0 L 50 50 L 100 0",
35044    vectorEffect: "non-scaling-stroke"
35045  }));
35046  const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
35047  const fallbackContainerClassname = 'components-popover__fallback-container';
35048  const getPopoverFallbackContainer = () => {
35049    let container = document.body.querySelector('.' + fallbackContainerClassname);
35050    if (!container) {
35051      container = document.createElement('div');
35052      container.className = fallbackContainerClassname;
35053      document.body.append(container);
35054    }
35055    return container;
35056  };
35057  const UnconnectedPopover = (props, forwardedRef) => {
35058    const {
35059      animate = true,
35060      headerTitle,
35061      constrainTabbing,
35062      onClose,
35063      children,
35064      className,
35065      noArrow = true,
35066      position,
35067      placement: placementProp = 'bottom-start',
35068      offset: offsetProp = 0,
35069      focusOnMount = 'firstElement',
35070      anchor,
35071      expandOnMobile,
35072      onFocusOutside,
35073      __unstableSlotName = SLOT_NAME,
35074      flip = true,
35075      resize = true,
35076      shift = false,
35077      inline = false,
35078      variant,
35079      // Deprecated props
35080      __unstableForcePosition,
35081      anchorRef,
35082      anchorRect,
35083      getAnchorRect,
35084      isAlternate,
35085      // Rest
35086      ...contentProps
35087    } = useContextSystem(props, 'Popover');
35088    let computedFlipProp = flip;
35089    let computedResizeProp = resize;
35090    if (__unstableForcePosition !== undefined) {
35091      external_wp_deprecated_default()('`__unstableForcePosition` prop in wp.components.Popover', {
35092        since: '6.1',
35093        version: '6.3',
35094        alternative: '`flip={ false }` and  `resize={ false }`'
35095      });
35096  
35097      // Back-compat, set the `flip` and `resize` props
35098      // to `false` to replicate `__unstableForcePosition`.
35099      computedFlipProp = !__unstableForcePosition;
35100      computedResizeProp = !__unstableForcePosition;
35101    }
35102    if (anchorRef !== undefined) {
35103      external_wp_deprecated_default()('`anchorRef` prop in wp.components.Popover', {
35104        since: '6.1',
35105        alternative: '`anchor` prop'
35106      });
35107    }
35108    if (anchorRect !== undefined) {
35109      external_wp_deprecated_default()('`anchorRect` prop in wp.components.Popover', {
35110        since: '6.1',
35111        alternative: '`anchor` prop'
35112      });
35113    }
35114    if (getAnchorRect !== undefined) {
35115      external_wp_deprecated_default()('`getAnchorRect` prop in wp.components.Popover', {
35116        since: '6.1',
35117        alternative: '`anchor` prop'
35118      });
35119    }
35120    const computedVariant = isAlternate ? 'toolbar' : variant;
35121    if (isAlternate !== undefined) {
35122      external_wp_deprecated_default()('`isAlternate` prop in wp.components.Popover', {
35123        since: '6.2',
35124        alternative: "`variant` prop with the `'toolbar'` value"
35125      });
35126    }
35127    const arrowRef = (0,external_wp_element_namespaceObject.useRef)(null);
35128    const [fallbackReferenceElement, setFallbackReferenceElement] = (0,external_wp_element_namespaceObject.useState)(null);
35129    const anchorRefFallback = (0,external_wp_element_namespaceObject.useCallback)(node => {
35130      setFallbackReferenceElement(node);
35131    }, []);
35132    const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<');
35133    const isExpanded = expandOnMobile && isMobileViewport;
35134    const hasArrow = !isExpanded && !noArrow;
35135    const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
35136    const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), offset(offsetProp), computedFlipProp && floating_ui_dom_flip(), computedResizeProp && floating_ui_dom_size({
35137      apply(sizeProps) {
35138        var _refs$floating$curren;
35139        const {
35140          firstElementChild
35141        } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {};
35142  
35143        // Only HTMLElement instances have the `style` property.
35144        if (!(firstElementChild instanceof HTMLElement)) return;
35145  
35146        // Reduce the height of the popover to the available space.
35147        Object.assign(firstElementChild.style, {
35148          maxHeight: `$sizeProps.availableHeight}px`,
35149          overflow: 'auto'
35150        });
35151      }
35152    }), shift && floating_ui_dom_shift({
35153      crossAxis: true,
35154      limiter: floating_ui_dom_limitShift(),
35155      padding: 1 // Necessary to avoid flickering at the edge of the viewport.
35156    }), floating_ui_react_dom_arrow({
35157      element: arrowRef
35158    })];
35159    const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName;
35160    const slot = useSlot(slotName);
35161    let onDialogClose;
35162    if (onClose || onFocusOutside) {
35163      onDialogClose = (type, event) => {
35164        // Ideally the popover should have just a single onClose prop and
35165        // not three props that potentially do the same thing.
35166        if (type === 'focus-outside' && onFocusOutside) {
35167          onFocusOutside(event);
35168        } else if (onClose) {
35169          onClose();
35170        }
35171      };
35172    }
35173    const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({
35174      constrainTabbing,
35175      focusOnMount,
35176      __unstableOnClose: onDialogClose,
35177      // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
35178      onClose: onDialogClose
35179    });
35180    const {
35181      // Positioning coordinates
35182      x,
35183      y,
35184      // Object with "regular" refs to both "reference" and "floating"
35185      refs,
35186      // Type of CSS position property to use (absolute or fixed)
35187      strategy,
35188      update,
35189      placement: computedPlacement,
35190      middlewareData: {
35191        arrow: arrowData
35192      }
35193    } = useFloating({
35194      placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps,
35195      middleware,
35196      whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, {
35197        layoutShift: false,
35198        animationFrame: true
35199      })
35200    });
35201    const arrowCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
35202      arrowRef.current = node;
35203      update();
35204    }, [update]);
35205  
35206    // When any of the possible anchor "sources" change,
35207    // recompute the reference element (real or virtual) and its owner document.
35208  
35209    const anchorRefTop = anchorRef?.top;
35210    const anchorRefBottom = anchorRef?.bottom;
35211    const anchorRefStartContainer = anchorRef?.startContainer;
35212    const anchorRefCurrent = anchorRef?.current;
35213    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
35214      const resultingReferenceElement = getReferenceElement({
35215        anchor,
35216        anchorRef,
35217        anchorRect,
35218        getAnchorRect,
35219        fallbackReferenceElement
35220      });
35221      refs.setReference(resultingReferenceElement);
35222    }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anchorRect, getAnchorRect, fallbackReferenceElement, refs]);
35223    const mergedFloatingRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]);
35224    const style = isExpanded ? undefined : {
35225      position: strategy,
35226      top: 0,
35227      left: 0,
35228      // `x` and `y` are framer-motion specific props and are shorthands
35229      // for `translateX` and `translateY`. Currently it is not possible
35230      // to use `translateX` and `translateY` because those values would
35231      // be overridden by the return value of the
35232      // `placementToMotionAnimationProps` function.
35233      x: computePopoverPosition(x),
35234      y: computePopoverPosition(y)
35235    };
35236    const shouldReduceMotion = useReducedMotion();
35237    const shouldAnimate = animate && !isExpanded && !shouldReduceMotion;
35238    const [animationFinished, setAnimationFinished] = (0,external_wp_element_namespaceObject.useState)(false);
35239    const {
35240      style: motionInlineStyles,
35241      ...otherMotionProps
35242    } = (0,external_wp_element_namespaceObject.useMemo)(() => placementToMotionAnimationProps(computedPlacement), [computedPlacement]);
35243    const animationProps = shouldAnimate ? {
35244      style: {
35245        ...motionInlineStyles,
35246        ...style
35247      },
35248      onAnimationComplete: () => setAnimationFinished(true),
35249      ...otherMotionProps
35250    } : {
35251      animate: false,
35252      style
35253    };
35254  
35255    // When Floating UI has finished positioning and Framer Motion has finished animating
35256    // the popover, add the `is-positioned` class to signal that all transitions have finished.
35257    const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null;
35258  
35259    // In case a `ColorPicker` component is rendered as a child of `Popover`,
35260    // the `Popover` component can be notified of when the user is dragging
35261    // parts of the `ColorPicker` UI (this is possible because the `ColorPicker`
35262    // component exposes the `onPickerDragStart` and `onPickerDragEnd` props
35263    // via internal context).
35264    // While the user is performing a pointer drag, the `Popover` will render
35265    // a transparent backdrop element that will serve as a "pointer events trap",
35266    // making sure that no pointer events reach any potential `iframe` element
35267    // underneath (like, for example, the editor canvas in the WordPress editor).
35268    const [showBackdrop, setShowBackdrop] = (0,external_wp_element_namespaceObject.useState)(false);
35269    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
35270      ColorPicker: {
35271        onPickerDragStart() {
35272          setShowBackdrop(true);
35273        },
35274        onPickerDragEnd() {
35275          setShowBackdrop(false);
35276        }
35277      }
35278    }), []);
35279    let content = (0,external_React_.createElement)(external_React_.Fragment, null, showBackdrop && (0,external_React_.createElement)("div", {
35280      className: "components-popover-pointer-events-trap",
35281      "aria-hidden": "true",
35282      onClick: () => setShowBackdrop(false)
35283    }), (0,external_React_.createElement)(motion.div, {
35284      className: classnames_default()('components-popover', className, {
35285        'is-expanded': isExpanded,
35286        'is-positioned': isPositioned,
35287        // Use the 'alternate' classname for 'toolbar' variant for back compat.
35288        [`is-$computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant
35289      }),
35290      ...animationProps,
35291      ...contentProps,
35292      ref: mergedFloatingRef,
35293      ...dialogProps,
35294      tabIndex: -1
35295    }, isExpanded && (0,external_React_.createElement)(scroll_lock, null), isExpanded && (0,external_React_.createElement)("div", {
35296      className: "components-popover__header"
35297    }, (0,external_React_.createElement)("span", {
35298      className: "components-popover__header-title"
35299    }, headerTitle), (0,external_React_.createElement)(build_module_button, {
35300      className: "components-popover__close",
35301      icon: library_close,
35302      onClick: onClose
35303    })), (0,external_React_.createElement)("div", {
35304      className: "components-popover__content"
35305    }, (0,external_React_.createElement)(ContextSystemProvider, {
35306      value: contextValue
35307    }, children)), hasArrow && (0,external_React_.createElement)("div", {
35308      ref: arrowCallbackRef,
35309      className: ['components-popover__arrow', `is-$computedPlacement.split('-')[0]}`].join(' '),
35310      style: {
35311        left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `$arrowData.x}px` : '',
35312        top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `$arrowData.y}px` : ''
35313      }
35314    }, (0,external_React_.createElement)(ArrowTriangle, null))));
35315    const shouldRenderWithinSlot = slot.ref && !inline;
35316    const hasAnchor = anchorRef || anchorRect || anchor;
35317    if (shouldRenderWithinSlot) {
35318      content = (0,external_React_.createElement)(slot_fill_Fill, {
35319        name: slotName
35320      }, content);
35321    } else if (!inline) {
35322      content = (0,external_wp_element_namespaceObject.createPortal)((0,external_React_.createElement)(StyleProvider, {
35323        document: document
35324      }, content), getPopoverFallbackContainer());
35325    }
35326    if (hasAnchor) {
35327      return content;
35328    }
35329    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)("span", {
35330      ref: anchorRefFallback
35331    }), content);
35332  };
35333  
35334  /**
35335   * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
35336   *
35337   * ```jsx
35338   * import { Button, Popover } from '@wordpress/components';
35339   * import { useState } from '@wordpress/element';
35340   *
35341   * const MyPopover = () => {
35342   *     const [ isVisible, setIsVisible ] = useState( false );
35343   *     const toggleVisible = () => {
35344   *         setIsVisible( ( state ) => ! state );
35345   *     };
35346   *
35347   *     return (
35348   *         <Button variant="secondary" onClick={ toggleVisible }>
35349   *             Toggle Popover!
35350   *             { isVisible && <Popover>Popover is toggled!</Popover> }
35351   *         </Button>
35352   *     );
35353   * };
35354   * ```
35355   *
35356   */
35357  const popover_Popover = contextConnect(UnconnectedPopover, 'Popover');
35358  function PopoverSlot({
35359    name = SLOT_NAME
35360  }, ref) {
35361    return (0,external_React_.createElement)(slot_fill_Slot, {
35362      bubblesVirtually: true,
35363      name: name,
35364      className: "popover-slot",
35365      ref: ref
35366    });
35367  }
35368  
35369  // @ts-expect-error For Legacy Reasons
35370  popover_Popover.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot);
35371  // @ts-expect-error For Legacy Reasons
35372  popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider;
35373  /* harmony default export */ const popover = (popover_Popover);
35374  
35375  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js
35376  
35377  /**
35378   * External dependencies
35379   */
35380  
35381  
35382  /**
35383   * WordPress dependencies
35384   */
35385  
35386  
35387  
35388  
35389  
35390  
35391  /**
35392   * Internal dependencies
35393   */
35394  
35395  
35396  
35397  
35398  
35399  function getAutoCompleterUI(autocompleter) {
35400    const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter);
35401    function AutocompleterUI({
35402      filterValue,
35403      instanceId,
35404      listBoxId,
35405      className,
35406      selectedIndex,
35407      onChangeOptions,
35408      onSelect,
35409      onReset,
35410      reset,
35411      contentRef
35412    }) {
35413      const [items] = useItems(filterValue);
35414      const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({
35415        editableContentElement: contentRef.current
35416      });
35417      const [needsA11yCompat, setNeedsA11yCompat] = (0,external_wp_element_namespaceObject.useState)(false);
35418      const popoverRef = (0,external_wp_element_namespaceObject.useRef)(null);
35419      const popoverRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([popoverRef, (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
35420        if (!contentRef.current) return;
35421  
35422        // If the popover is rendered in a different document than
35423        // the content, we need to duplicate the options list in the
35424        // content document so that it's available to the screen
35425        // readers, which check the DOM ID based aira-* attributes.
35426        setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
35427      }, [contentRef])]);
35428      useOnClickOutside(popoverRef, reset);
35429      const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
35430      function announce(options) {
35431        if (!debouncedSpeak) {
35432          return;
35433        }
35434        if (!!options.length) {
35435          if (filterValue) {
35436            debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
35437            (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');
35438          } else {
35439            debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
35440            (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');
35441          }
35442        } else {
35443          debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive');
35444        }
35445      }
35446      (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
35447        onChangeOptions(items);
35448        announce(items);
35449        // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
35450        // See https://github.com/WordPress/gutenberg/pull/41820
35451        // eslint-disable-next-line react-hooks/exhaustive-deps
35452      }, [items]);
35453      if (items.length === 0) {
35454        return null;
35455      }
35456      const ListBox = ({
35457        Component = 'div'
35458      }) => (0,external_React_.createElement)(Component, {
35459        id: listBoxId,
35460        role: "listbox",
35461        className: "components-autocomplete__results"
35462      }, items.map((option, index) => (0,external_React_.createElement)(build_module_button, {
35463        key: option.key,
35464        id: `components-autocomplete-item-$instanceId}-$option.key}`,
35465        role: "option",
35466        "aria-selected": index === selectedIndex,
35467        disabled: option.isDisabled,
35468        className: classnames_default()('components-autocomplete__result', className, {
35469          'is-selected': index === selectedIndex
35470        }),
35471        onClick: () => onSelect(option)
35472      }, option.label)));
35473      return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(popover, {
35474        focusOnMount: false,
35475        onClose: onReset,
35476        placement: "top-start",
35477        className: "components-autocomplete__popover",
35478        anchor: popoverAnchor,
35479        ref: popoverRefs
35480      }, (0,external_React_.createElement)(ListBox, null)), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)((0,external_React_.createElement)(ListBox, {
35481        Component: visually_hidden_component
35482      }), contentRef.current.ownerDocument.body));
35483    }
35484    return AutocompleterUI;
35485  }
35486  function useOnClickOutside(ref, handler) {
35487    (0,external_wp_element_namespaceObject.useEffect)(() => {
35488      const listener = event => {
35489        // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
35490        if (!ref.current || ref.current.contains(event.target)) {
35491          return;
35492        }
35493        handler(event);
35494      };
35495      document.addEventListener('mousedown', listener);
35496      document.addEventListener('touchstart', listener);
35497      return () => {
35498        document.removeEventListener('mousedown', listener);
35499        document.removeEventListener('touchstart', listener);
35500      };
35501      // Disable reason: `ref` is a ref object and should not be included in a
35502      // hook's dependency list.
35503      // eslint-disable-next-line react-hooks/exhaustive-deps
35504    }, [handler]);
35505  }
35506  
35507  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/index.js
35508  
35509  /**
35510   * External dependencies
35511   */
35512  
35513  
35514  /**
35515   * WordPress dependencies
35516   */
35517  
35518  
35519  
35520  
35521  
35522  
35523  /**
35524   * Internal dependencies
35525   */
35526  
35527  
35528  const getNodeText = node => {
35529    if (node === null) {
35530      return '';
35531    }
35532    switch (typeof node) {
35533      case 'string':
35534      case 'number':
35535        return node.toString();
35536        break;
35537      case 'boolean':
35538        return '';
35539        break;
35540      case 'object':
35541        {
35542          if (node instanceof Array) {
35543            return node.map(getNodeText).join('');
35544          }
35545          if ('props' in node) {
35546            return getNodeText(node.props.children);
35547          }
35548          break;
35549        }
35550      default:
35551        return '';
35552    }
35553    return '';
35554  };
35555  const EMPTY_FILTERED_OPTIONS = [];
35556  function useAutocomplete({
35557    record,
35558    onChange,
35559    onReplace,
35560    completers,
35561    contentRef
35562  }) {
35563    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(useAutocomplete);
35564    const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0);
35565    const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)(EMPTY_FILTERED_OPTIONS);
35566    const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)('');
35567    const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null);
35568    const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null);
35569    const backspacing = (0,external_wp_element_namespaceObject.useRef)(false);
35570    function insertCompletion(replacement) {
35571      if (autocompleter === null) {
35572        return;
35573      }
35574      const end = record.start;
35575      const start = end - autocompleter.triggerPrefix.length - filterValue.length;
35576      const toInsert = (0,external_wp_richText_namespaceObject.create)({
35577        html: (0,external_wp_element_namespaceObject.renderToString)(replacement)
35578      });
35579      onChange((0,external_wp_richText_namespaceObject.insert)(record, toInsert, start, end));
35580    }
35581    function select(option) {
35582      const {
35583        getOptionCompletion
35584      } = autocompleter || {};
35585      if (option.isDisabled) {
35586        return;
35587      }
35588      if (getOptionCompletion) {
35589        const completion = getOptionCompletion(option.value, filterValue);
35590        const isCompletionObject = obj => {
35591          return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined;
35592        };
35593        const completionObject = isCompletionObject(completion) ? completion : {
35594          action: 'insert-at-caret',
35595          value: completion
35596        };
35597        if ('replace' === completionObject.action) {
35598          onReplace([completionObject.value]);
35599          // When replacing, the component will unmount, so don't reset
35600          // state (below) on an unmounted component.
35601          return;
35602        } else if ('insert-at-caret' === completionObject.action) {
35603          insertCompletion(completionObject.value);
35604        }
35605      }
35606  
35607      // Reset autocomplete state after insertion rather than before
35608      // so insertion events don't cause the completion menu to redisplay.
35609      reset();
35610    }
35611    function reset() {
35612      setSelectedIndex(0);
35613      setFilteredOptions(EMPTY_FILTERED_OPTIONS);
35614      setFilterValue('');
35615      setAutocompleter(null);
35616      setAutocompleterUI(null);
35617    }
35618  
35619    /**
35620     * Load options for an autocompleter.
35621     *
35622     * @param {Array} options
35623     */
35624    function onChangeOptions(options) {
35625      setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);
35626      setFilteredOptions(options);
35627    }
35628    function handleKeyDown(event) {
35629      backspacing.current = event.key === 'Backspace';
35630      if (!autocompleter) {
35631        return;
35632      }
35633      if (filteredOptions.length === 0) {
35634        return;
35635      }
35636      if (event.defaultPrevented ||
35637      // Ignore keydowns from IMEs
35638      event.isComposing ||
35639      // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
35640      // is `isComposing=false`, even though it's technically still part of the composition.
35641      // These can only be detected by keyCode.
35642      event.keyCode === 229) {
35643        return;
35644      }
35645      switch (event.key) {
35646        case 'ArrowUp':
35647          {
35648            const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;
35649            setSelectedIndex(newIndex);
35650            // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
35651            if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
35652              (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
35653            }
35654            break;
35655          }
35656        case 'ArrowDown':
35657          {
35658            const newIndex = (selectedIndex + 1) % filteredOptions.length;
35659            setSelectedIndex(newIndex);
35660            if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) {
35661              (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive');
35662            }
35663            break;
35664          }
35665        case 'Escape':
35666          setAutocompleter(null);
35667          setAutocompleterUI(null);
35668          event.preventDefault();
35669          break;
35670        case 'Enter':
35671          select(filteredOptions[selectedIndex]);
35672          break;
35673        case 'ArrowLeft':
35674        case 'ArrowRight':
35675          reset();
35676          return;
35677        default:
35678          return;
35679      }
35680  
35681      // Any handled key should prevent original behavior. This relies on
35682      // the early return in the default case.
35683      event.preventDefault();
35684    }
35685  
35686    // textContent is a primitive (string), memoizing is not strictly necessary
35687    // but this is a preemptive performance improvement, since the autocompleter
35688    // is a potential bottleneck for the editor type metric.
35689    const textContent = (0,external_wp_element_namespaceObject.useMemo)(() => {
35690      if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) {
35691        return (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0));
35692      }
35693      return '';
35694    }, [record]);
35695    (0,external_wp_element_namespaceObject.useEffect)(() => {
35696      if (!textContent) {
35697        if (autocompleter) reset();
35698        return;
35699      }
35700  
35701      // Find the completer with the highest triggerPrefix index in the
35702      // textContent.
35703      const completer = completers.reduce((lastTrigger, currentCompleter) => {
35704        const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);
35705        const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;
35706        return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger;
35707      }, null);
35708      if (!completer) {
35709        if (autocompleter) reset();
35710        return;
35711      }
35712      const {
35713        allowContext,
35714        triggerPrefix
35715      } = completer;
35716      const triggerIndex = textContent.lastIndexOf(triggerPrefix);
35717      const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);
35718      const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
35719      // This is a final barrier to prevent the effect from completing with
35720      // an extremely long string, which causes the editor to slow-down
35721      // significantly. This could happen, for example, if `matchingWhileBackspacing`
35722      // is true and one of the "words" end up being too long. If that's the case,
35723      // it will be caught by this guard.
35724      if (tooDistantFromTrigger) return;
35725      const mismatch = filteredOptions.length === 0;
35726      const wordsFromTrigger = textWithoutTrigger.split(/\s/);
35727      // We need to allow the effect to run when not backspacing and if there
35728      // was a mismatch. i.e when typing a trigger + the match string or when
35729      // clicking in an existing trigger word on the page. We do that if we
35730      // detect that we have one word from trigger in the current textual context.
35731      //
35732      // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
35733      // allow the effect to run. It will run until there's a mismatch.
35734      const hasOneTriggerWord = wordsFromTrigger.length === 1;
35735      // This is used to allow the effect to run when backspacing and if
35736      // "touching" a word that "belongs" to a trigger. We consider a "trigger
35737      // word" any word up to the limit of 3 from the trigger character.
35738      // Anything beyond that is ignored if there's a mismatch. This allows
35739      // us to "escape" a mismatch when backspacing, but still imposing some
35740      // sane limits.
35741      //
35742      // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
35743      // if the user presses backspace here, it will show the completion popup again.
35744      const matchingWhileBackspacing = backspacing.current && wordsFromTrigger.length <= 3;
35745      if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
35746        if (autocompleter) reset();
35747        return;
35748      }
35749      const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length));
35750      if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {
35751        if (autocompleter) reset();
35752        return;
35753      }
35754      if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
35755        if (autocompleter) reset();
35756        return;
35757      }
35758      if (!/[\u0000-\uFFFF]*$/.test(textWithoutTrigger)) {
35759        if (autocompleter) reset();
35760        return;
35761      }
35762      const safeTrigger = escapeRegExp(completer.triggerPrefix);
35763      const text = remove_accents_default()(textContent);
35764      const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`$safeTrigger}([\u0000-\uFFFF]*)$`));
35765      const query = match && match[1];
35766      setAutocompleter(completer);
35767      setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
35768      setFilterValue(query === null ? '' : query);
35769      // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
35770      // See https://github.com/WordPress/gutenberg/pull/41820
35771      // eslint-disable-next-line react-hooks/exhaustive-deps
35772    }, [textContent]);
35773    const {
35774      key: selectedKey = ''
35775    } = filteredOptions[selectedIndex] || {};
35776    const {
35777      className
35778    } = autocompleter || {};
35779    const isExpanded = !!autocompleter && filteredOptions.length > 0;
35780    const listBoxId = isExpanded ? `components-autocomplete-listbox-$instanceId}` : undefined;
35781    const activeId = isExpanded ? `components-autocomplete-item-$instanceId}-$selectedKey}` : null;
35782    const hasSelection = record.start !== undefined;
35783    return {
35784      listBoxId,
35785      activeId,
35786      onKeyDown: handleKeyDown,
35787      popover: hasSelection && AutocompleterUI && (0,external_React_.createElement)(AutocompleterUI, {
35788        className: className,
35789        filterValue: filterValue,
35790        instanceId: instanceId,
35791        listBoxId: listBoxId,
35792        selectedIndex: selectedIndex,
35793        onChangeOptions: onChangeOptions,
35794        onSelect: select,
35795        value: record,
35796        contentRef: contentRef,
35797        reset: reset
35798      })
35799    };
35800  }
35801  function useLastDifferentValue(value) {
35802    const history = (0,external_wp_element_namespaceObject.useRef)(new Set());
35803    history.current.add(value);
35804  
35805    // Keep the history size to 2.
35806    if (history.current.size > 2) {
35807      history.current.delete(Array.from(history.current)[0]);
35808    }
35809    return Array.from(history.current)[0];
35810  }
35811  function useAutocompleteProps(options) {
35812    const ref = (0,external_wp_element_namespaceObject.useRef)(null);
35813    const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)();
35814    const {
35815      record
35816    } = options;
35817    const previousRecord = useLastDifferentValue(record);
35818    const {
35819      popover,
35820      listBoxId,
35821      activeId,
35822      onKeyDown
35823    } = useAutocomplete({
35824      ...options,
35825      contentRef: ref
35826    });
35827    onKeyDownRef.current = onKeyDown;
35828    const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
35829      function _onKeyDown(event) {
35830        onKeyDownRef.current?.(event);
35831      }
35832      element.addEventListener('keydown', _onKeyDown);
35833      return () => {
35834        element.removeEventListener('keydown', _onKeyDown);
35835      };
35836    }, [])]);
35837  
35838    // We only want to show the popover if the user has typed something.
35839    const didUserInput = record.text !== previousRecord?.text;
35840    if (!didUserInput) {
35841      return {
35842        ref: mergedRefs
35843      };
35844    }
35845    return {
35846      ref: mergedRefs,
35847      children: popover,
35848      'aria-autocomplete': listBoxId ? 'list' : undefined,
35849      'aria-owns': listBoxId,
35850      'aria-activedescendant': activeId
35851    };
35852  }
35853  function Autocomplete({
35854    children,
35855    isSelected,
35856    ...options
35857  }) {
35858    const {
35859      popover,
35860      ...props
35861    } = useAutocomplete(options);
35862    return (0,external_React_.createElement)(external_React_.Fragment, null, children(props), isSelected && popover);
35863  }
35864  
35865  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/hooks.js
35866  /**
35867   * WordPress dependencies
35868   */
35869  
35870  
35871  /**
35872   * Internal dependencies
35873   */
35874  
35875  /**
35876   * Generate props for the `BaseControl` and the inner control itself.
35877   *
35878   * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.
35879   *
35880   * @param props
35881   */
35882  function useBaseControlProps(props) {
35883    const {
35884      help,
35885      id: preferredId,
35886      ...restProps
35887    } = props;
35888    const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId);
35889  
35890    // ARIA descriptions can only contain plain text, so fall back to aria-details if not.
35891    const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
35892    return {
35893      baseControlProps: {
35894        id: uniqueId,
35895        help,
35896        ...restProps
35897      },
35898      controlProps: {
35899        id: uniqueId,
35900        ...(!!help ? {
35901          [helpPropName]: `$uniqueId}__help`
35902        } : {})
35903      }
35904    };
35905  }
35906  
35907  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js
35908  
35909  /**
35910   * WordPress dependencies
35911   */
35912  
35913  const link_link = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
35914    xmlns: "http://www.w3.org/2000/svg",
35915    viewBox: "0 0 24 24"
35916  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
35917    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"
35918  }));
35919  /* harmony default export */ const library_link = (link_link);
35920  
35921  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link-off.js
35922  
35923  /**
35924   * WordPress dependencies
35925   */
35926  
35927  const linkOff = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
35928    xmlns: "http://www.w3.org/2000/svg",
35929    viewBox: "0 0 24 24"
35930  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
35931    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"
35932  }));
35933  /* harmony default export */ const link_off = (linkOff);
35934  
35935  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/styles.js
35936  function 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)."; }
35937  /**
35938   * External dependencies
35939   */
35940  
35941  
35942  /**
35943   * Internal dependencies
35944   */
35945  
35946  const borderBoxControl = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
35947  const linkedBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1;", rtl({
35948    marginRight: '24px'
35949  })(), ";" + ( true ? "" : 0),  true ? "" : 0);
35950  const wrapper =  true ? {
35951    name: "bjn8wh",
35952    styles: "position:relative"
35953  } : 0;
35954  const borderBoxControlLinkedButton = size => {
35955    return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '8px' : '3px', ";", rtl({
35956      right: 0
35957    })(), " line-height:0;" + ( true ? "" : 0),  true ? "" : 0);
35958  };
35959  const borderBoxStyleWithFallback = border => {
35960    const {
35961      color = COLORS.gray[200],
35962      style = 'solid',
35963      width = config_values.borderWidth
35964    } = border || {};
35965    const clampedWidth = width !== config_values.borderWidth ? `clamp(1px, $width}, 10px)` : width;
35966    const hasVisibleBorder = !!width && width !== '0' || !!color;
35967    const borderStyle = hasVisibleBorder ? style || 'solid' : style;
35968    return `$color} $borderStyle} $clampedWidth}`;
35969  };
35970  const borderBoxControlVisualizer = (borders, size) => {
35971    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({
35972      borderLeft: borderBoxStyleWithFallback(borders?.left)
35973    })(), " ", rtl({
35974      borderRight: borderBoxStyleWithFallback(borders?.right)
35975    })(), ";" + ( true ? "" : 0),  true ? "" : 0);
35976  };
35977  const borderBoxControlSplitControls = size => /*#__PURE__*/emotion_react_browser_esm_css("position:relative;flex:1;width:", size === '__unstable-large' ? undefined : '80%', ";" + ( true ? "" : 0),  true ? "" : 0);
35978  const centeredBorderControl =  true ? {
35979    name: "1nwbfnf",
35980    styles: "grid-column:span 2;margin:0 auto"
35981  } : 0;
35982  const rightBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css(rtl({
35983    marginLeft: 'auto'
35984  })(), ";" + ( true ? "" : 0),  true ? "" : 0);
35985  
35986  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/hook.js
35987  /**
35988   * WordPress dependencies
35989   */
35990  
35991  
35992  /**
35993   * Internal dependencies
35994   */
35995  
35996  
35997  
35998  function useBorderBoxControlLinkedButton(props) {
35999    const {
36000      className,
36001      size = 'default',
36002      ...otherProps
36003    } = useContextSystem(props, 'BorderBoxControlLinkedButton');
36004  
36005    // Generate class names.
36006    const cx = useCx();
36007    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
36008      return cx(borderBoxControlLinkedButton(size), className);
36009    }, [className, cx, size]);
36010    return {
36011      ...otherProps,
36012      className: classes
36013    };
36014  }
36015  
36016  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js
36017  
36018  /**
36019   * WordPress dependencies
36020   */
36021  
36022  
36023  
36024  /**
36025   * Internal dependencies
36026   */
36027  
36028  
36029  
36030  
36031  
36032  const BorderBoxControlLinkedButton = (props, forwardedRef) => {
36033    const {
36034      className,
36035      isLinked,
36036      ...buttonProps
36037    } = useBorderBoxControlLinkedButton(props);
36038    const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
36039    return (0,external_React_.createElement)(tooltip, {
36040      text: label
36041    }, (0,external_React_.createElement)(component, {
36042      className: className
36043    }, (0,external_React_.createElement)(build_module_button, {
36044      ...buttonProps,
36045      size: "small",
36046      icon: isLinked ? library_link : link_off,
36047      iconSize: 24,
36048      "aria-label": label,
36049      ref: forwardedRef
36050    })));
36051  };
36052  const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
36053  /* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton);
36054  
36055  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/hook.js
36056  /**
36057   * WordPress dependencies
36058   */
36059  
36060  
36061  /**
36062   * Internal dependencies
36063   */
36064  
36065  
36066  
36067  function useBorderBoxControlVisualizer(props) {
36068    const {
36069      className,
36070      value,
36071      size = 'default',
36072      ...otherProps
36073    } = useContextSystem(props, 'BorderBoxControlVisualizer');
36074  
36075    // Generate class names.
36076    const cx = useCx();
36077    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
36078      return cx(borderBoxControlVisualizer(value, size), className);
36079    }, [cx, className, value, size]);
36080    return {
36081      ...otherProps,
36082      className: classes,
36083      value
36084    };
36085  }
36086  
36087  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js
36088  
36089  /**
36090   * WordPress dependencies
36091   */
36092  
36093  /**
36094   * Internal dependencies
36095   */
36096  
36097  
36098  
36099  const BorderBoxControlVisualizer = (props, forwardedRef) => {
36100    const {
36101      value,
36102      ...otherProps
36103    } = useBorderBoxControlVisualizer(props);
36104    return (0,external_React_.createElement)(component, {
36105      ...otherProps,
36106      ref: forwardedRef
36107    });
36108  };
36109  const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');
36110  /* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer);
36111  
36112  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close-small.js
36113  
36114  /**
36115   * WordPress dependencies
36116   */
36117  
36118  const closeSmall = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
36119    xmlns: "http://www.w3.org/2000/svg",
36120    viewBox: "0 0 24 24"
36121  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
36122    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"
36123  }));
36124  /* harmony default export */ const close_small = (closeSmall);
36125  
36126  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-solid.js
36127  
36128  /**
36129   * WordPress dependencies
36130   */
36131  
36132  const lineSolid = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
36133    xmlns: "http://www.w3.org/2000/svg",
36134    viewBox: "0 0 24 24"
36135  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
36136    d: "M5 11.25h14v1.5H5z"
36137  }));
36138  /* harmony default export */ const line_solid = (lineSolid);
36139  
36140  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dashed.js
36141  
36142  /**
36143   * WordPress dependencies
36144   */
36145  
36146  const lineDashed = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
36147    xmlns: "http://www.w3.org/2000/svg",
36148    viewBox: "0 0 24 24"
36149  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
36150    fillRule: "evenodd",
36151    d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z",
36152    clipRule: "evenodd"
36153  }));
36154  /* harmony default export */ const line_dashed = (lineDashed);
36155  
36156  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dotted.js
36157  
36158  /**
36159   * WordPress dependencies
36160   */
36161  
36162  const lineDotted = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
36163    xmlns: "http://www.w3.org/2000/svg",
36164    viewBox: "0 0 24 24"
36165  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
36166    fillRule: "evenodd",
36167    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",
36168    clipRule: "evenodd"
36169  }));
36170  /* harmony default export */ const line_dotted = (lineDotted);
36171  
36172  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs
36173  
36174  
36175  /**
36176   * Note: Still used by components generated by old versions of Framer
36177   *
36178   * @deprecated
36179   */
36180  const DeprecatedLayoutGroupContext = (0,external_React_.createContext)(null);
36181  
36182  
36183  
36184  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/group.mjs
36185  const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
36186  function nodeGroup() {
36187      const nodes = new Set();
36188      const subscriptions = new WeakMap();
36189      const dirtyAll = () => nodes.forEach(notify);
36190      return {
36191          add: (node) => {
36192              nodes.add(node);
36193              subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
36194          },
36195          remove: (node) => {
36196              nodes.delete(node);
36197              const unsubscribe = subscriptions.get(node);
36198              if (unsubscribe) {
36199                  unsubscribe();
36200                  subscriptions.delete(node);
36201              }
36202              dirtyAll();
36203          },
36204          dirty: dirtyAll,
36205      };
36206  }
36207  
36208  
36209  
36210  ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs
36211  
36212  
36213  
36214  
36215  
36216  
36217  
36218  const shouldInheritGroup = (inherit) => inherit === true;
36219  const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
36220  const LayoutGroup = ({ children, id, inherit = true }) => {
36221      const layoutGroupContext = (0,external_React_.useContext)(LayoutGroupContext);
36222      const deprecatedLayoutGroupContext = (0,external_React_.useContext)(DeprecatedLayoutGroupContext);
36223      const [forceRender, key] = use_force_update_useForceUpdate();
36224      const context = (0,external_React_.useRef)(null);
36225      const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
36226      if (context.current === null) {
36227          if (shouldInheritId(inherit) && upstreamId) {
36228              id = id ? upstreamId + "-" + id : upstreamId;
36229          }
36230          context.current = {
36231              id,
36232              group: shouldInheritGroup(inherit)
36233                  ? layoutGroupContext.group || nodeGroup()
36234                  : nodeGroup(),
36235          };
36236      }
36237      const memoizedContext = (0,external_React_.useMemo)(() => ({ ...context.current, forceRender }), [key]);
36238      return (external_React_.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
36239  };
36240  
36241  
36242  
36243  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/styles.js
36244  
36245  function 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)."; }
36246  /**
36247   * External dependencies
36248   */
36249  
36250  /**
36251   * Internal dependencies
36252   */
36253  
36254  const toggleGroupControl = ({
36255    isBlock,
36256    isDeselectable,
36257    size
36258  }) => /*#__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;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + ( true ? "" : 0),  true ? "" : 0);
36259  const enclosingBorders = isBlock => {
36260    const enclosingBorder = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.ui.border, ";" + ( true ? "" : 0),  true ? "" : 0);
36261    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);
36262  };
36263  var styles_ref =  true ? {
36264    name: "1aqh2c7",
36265    styles: "min-height:40px;padding:3px"
36266  } : 0;
36267  var styles_ref2 =  true ? {
36268    name: "1ndywgm",
36269    styles: "min-height:36px;padding:2px"
36270  } : 0;
36271  const toggleGroupControlSize = size => {
36272    const styles = {
36273      default: styles_ref2,
36274      '__unstable-large': styles_ref
36275    };
36276    return styles[size];
36277  };
36278  const toggle_group_control_styles_block =  true ? {
36279    name: "7whenc",
36280    styles: "display:flex;width:100%"
36281  } : 0;
36282  const VisualLabelWrapper = emotion_styled_base_browser_esm("div",  true ? {
36283    target: "eakva830"
36284  } : 0)( true ? {
36285    name: "zjik7",
36286    styles: "display:flex"
36287  } : 0);
36288  
36289  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/radio/radio-store.js
36290  "use client";
36291  
36292  
36293  
36294  
36295  
36296  
36297  
36298  
36299  // src/radio/radio-store.ts
36300  function createRadioStore(_a = {}) {
36301    var props = _4R3V3JGP_objRest(_a, []);
36302    var _a2;
36303    const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
36304    const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
36305      focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
36306    }));
36307    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), {
36308      value: defaultValue(
36309        props.value,
36310        syncState == null ? void 0 : syncState.value,
36311        props.defaultValue,
36312        null
36313      )
36314    });
36315    const radio = createStore(initialState, composite, props.store);
36316    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), radio), {
36317      setValue: (value) => radio.setState("value", value)
36318    });
36319  }
36320  
36321  
36322  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LEIRFLRL.js
36323  "use client";
36324  
36325  
36326  
36327  // src/radio/radio-store.ts
36328  
36329  function useRadioStoreProps(store, update, props) {
36330    store = useCompositeStoreProps(store, update, props);
36331    useStoreProps(store, props, "value", "setValue");
36332    return store;
36333  }
36334  function useRadioStore(props = {}) {
36335    const [store, update] = EKQEJRUF_useStore(createRadioStore, props);
36336    return useRadioStoreProps(store, update, props);
36337  }
36338  
36339  
36340  
36341  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XEV62JUQ.js
36342  "use client";
36343  
36344  
36345  
36346  // src/radio/radio-context.tsx
36347  var XEV62JUQ_ctx = createStoreContext(
36348    [CompositeContextProvider],
36349    [CompositeScopedContextProvider]
36350  );
36351  var useRadioContext = XEV62JUQ_ctx.useContext;
36352  var useRadioScopedContext = XEV62JUQ_ctx.useScopedContext;
36353  var useRadioProviderContext = XEV62JUQ_ctx.useProviderContext;
36354  var RadioContextProvider = XEV62JUQ_ctx.ContextProvider;
36355  var RadioScopedContextProvider = XEV62JUQ_ctx.ScopedContextProvider;
36356  
36357  
36358  
36359  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-group.js
36360  "use client";
36361  
36362  
36363  
36364  
36365  
36366  
36367  
36368  
36369  
36370  
36371  
36372  
36373  // src/radio/radio-group.tsx
36374  
36375  
36376  var useRadioGroup = createHook(
36377    (_a) => {
36378      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
36379      const context = useRadioProviderContext();
36380      store = store || context;
36381      invariant(
36382        store,
36383         false && 0
36384      );
36385      props = useWrapElement(
36386        props,
36387        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(RadioScopedContextProvider, { value: store, children: element }),
36388        [store]
36389      );
36390      props = _4R3V3JGP_spreadValues({
36391        role: "radiogroup"
36392      }, props);
36393      props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
36394      return props;
36395    }
36396  );
36397  var RadioGroup = createComponent((props) => {
36398    const htmlProps = useRadioGroup(props);
36399    return _3ORBWXWF_createElement("div", htmlProps);
36400  });
36401  if (false) {}
36402  
36403  
36404  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/context.js
36405  /**
36406   * WordPress dependencies
36407   */
36408  
36409  
36410  /**
36411   * Internal dependencies
36412   */
36413  
36414  const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({});
36415  const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext);
36416  /* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext);
36417  
36418  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/utils.js
36419  /**
36420   * WordPress dependencies
36421   */
36422  
36423  
36424  
36425  /**
36426   * Internal dependencies
36427   */
36428  
36429  /**
36430   * Used to determine, via an internal heuristics, whether an `undefined` value
36431   * received for the `value` prop should be interpreted as the component being
36432   * used in uncontrolled mode, or as an "empty" value for controlled mode.
36433   *
36434   * @param valueProp The received `value`
36435   */
36436  function useComputeControlledOrUncontrolledValue(valueProp) {
36437    const isInitialRender = (0,external_wp_element_namespaceObject.useRef)(true);
36438    const prevValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp);
36439    const prevIsControlled = (0,external_wp_element_namespaceObject.useRef)(false);
36440    (0,external_wp_element_namespaceObject.useEffect)(() => {
36441      if (isInitialRender.current) {
36442        isInitialRender.current = false;
36443      }
36444    }, []);
36445  
36446    // Assume the component is being used in controlled mode on the first re-render
36447    // that has a different `valueProp` from the previous render.
36448    const isControlled = prevIsControlled.current || !isInitialRender.current && prevValueProp !== valueProp;
36449    (0,external_wp_element_namespaceObject.useEffect)(() => {
36450      prevIsControlled.current = isControlled;
36451    }, [isControlled]);
36452    if (isControlled) {
36453      // When in controlled mode, use `''` instead of `undefined`
36454      return {
36455        value: valueProp !== null && valueProp !== void 0 ? valueProp : '',
36456        defaultValue: undefined
36457      };
36458    }
36459  
36460    // When in uncontrolled mode, the `value` should be intended as the initial value
36461    return {
36462      value: undefined,
36463      defaultValue: valueProp
36464    };
36465  }
36466  
36467  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js
36468  
36469  /**
36470   * External dependencies
36471   */
36472  
36473  // eslint-disable-next-line no-restricted-imports
36474  
36475  
36476  /**
36477   * WordPress dependencies
36478   */
36479  
36480  
36481  
36482  /**
36483   * Internal dependencies
36484   */
36485  
36486  
36487  
36488  function UnforwardedToggleGroupControlAsRadioGroup({
36489    children,
36490    isAdaptiveWidth,
36491    label,
36492    onChange: onChangeProp,
36493    size,
36494    value: valueProp,
36495    id: idProp,
36496    ...otherProps
36497  }, forwardedRef) {
36498    const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
36499    const baseId = idProp || generatedId;
36500  
36501    // Use a heuristic to understand if the component is being used in controlled
36502    // or uncontrolled mode, and consequently:
36503    // - when controlled, convert `undefined` values to `''` (ie. "no value")
36504    // - use the `value` prop as the `defaultValue` when uncontrolled
36505    const {
36506      value,
36507      defaultValue
36508    } = useComputeControlledOrUncontrolledValue(valueProp);
36509  
36510    // `useRadioStore`'s `setValue` prop can be called with `null`, while
36511    // the component's `onChange` prop only expects `undefined`
36512    const wrappedOnChangeProp = onChangeProp ? v => {
36513      onChangeProp(v !== null && v !== void 0 ? v : undefined);
36514    } : undefined;
36515    const radio = useRadioStore({
36516      defaultValue,
36517      value,
36518      setValue: wrappedOnChangeProp
36519    });
36520    const selectedValue = radio.useState('value');
36521    const setValue = radio.setValue;
36522    const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
36523      baseId,
36524      isBlock: !isAdaptiveWidth,
36525      size,
36526      value: selectedValue,
36527      setValue
36528    }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
36529    return (0,external_React_.createElement)(toggle_group_control_context.Provider, {
36530      value: groupContextValue
36531    }, (0,external_React_.createElement)(RadioGroup, {
36532      store: radio,
36533      "aria-label": label,
36534      render: (0,external_React_.createElement)(component, null),
36535      ...otherProps,
36536      id: baseId,
36537      ref: forwardedRef
36538    }, children));
36539  }
36540  const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
36541  
36542  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js
36543  /**
36544   * WordPress dependencies
36545   */
36546  
36547  /**
36548   * Simplified and improved implementation of useControlledState.
36549   *
36550   * @param props
36551   * @param props.defaultValue
36552   * @param props.value
36553   * @param props.onChange
36554   * @return The controlled value and the value setter.
36555   */
36556  function useControlledValue({
36557    defaultValue,
36558    onChange,
36559    value: valueProp
36560  }) {
36561    const hasValue = typeof valueProp !== 'undefined';
36562    const initialValue = hasValue ? valueProp : defaultValue;
36563    const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue);
36564    const value = hasValue ? valueProp : state;
36565    let setValue;
36566    if (hasValue && typeof onChange === 'function') {
36567      setValue = onChange;
36568    } else if (!hasValue && typeof onChange === 'function') {
36569      setValue = nextValue => {
36570        onChange(nextValue);
36571        setState(nextValue);
36572      };
36573    } else {
36574      setValue = setState;
36575    }
36576    return [value, setValue];
36577  }
36578  
36579  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js
36580  
36581  /**
36582   * WordPress dependencies
36583   */
36584  
36585  
36586  
36587  /**
36588   * Internal dependencies
36589   */
36590  
36591  
36592  
36593  
36594  function UnforwardedToggleGroupControlAsButtonGroup({
36595    children,
36596    isAdaptiveWidth,
36597    label,
36598    onChange,
36599    size,
36600    value: valueProp,
36601    id: idProp,
36602    ...otherProps
36603  }, forwardedRef) {
36604    const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
36605    const baseId = idProp || generatedId;
36606  
36607    // Use a heuristic to understand if the component is being used in controlled
36608    // or uncontrolled mode, and consequently:
36609    // - when controlled, convert `undefined` values to `''` (ie. "no value")
36610    // - use the `value` prop as the `defaultValue` when uncontrolled
36611    const {
36612      value,
36613      defaultValue
36614    } = useComputeControlledOrUncontrolledValue(valueProp);
36615    const [selectedValue, setSelectedValue] = useControlledValue({
36616      defaultValue,
36617      value,
36618      onChange
36619    });
36620    const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
36621      baseId,
36622      value: selectedValue,
36623      setValue: setSelectedValue,
36624      isBlock: !isAdaptiveWidth,
36625      isDeselectable: true,
36626      size
36627    }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
36628    return (0,external_React_.createElement)(toggle_group_control_context.Provider, {
36629      value: groupContextValue
36630    }, (0,external_React_.createElement)(component, {
36631      "aria-label": label,
36632      ...otherProps,
36633      ref: forwardedRef,
36634      role: "group"
36635    }, children));
36636  }
36637  const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
36638  
36639  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js
36640  
36641  /**
36642   * External dependencies
36643   */
36644  
36645  // eslint-disable-next-line no-restricted-imports
36646  
36647  
36648  /**
36649   * WordPress dependencies
36650   */
36651  
36652  
36653  
36654  /**
36655   * Internal dependencies
36656   */
36657  
36658  
36659  
36660  
36661  
36662  
36663  
36664  
36665  function UnconnectedToggleGroupControl(props, forwardedRef) {
36666    const {
36667      __nextHasNoMarginBottom = false,
36668      __next40pxDefaultSize = false,
36669      className,
36670      isAdaptiveWidth = false,
36671      isBlock = false,
36672      isDeselectable = false,
36673      label,
36674      hideLabelFromVision = false,
36675      help,
36676      onChange,
36677      size = 'default',
36678      value,
36679      children,
36680      ...otherProps
36681    } = useContextSystem(props, 'ToggleGroupControl');
36682    const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControl, 'toggle-group-control');
36683    const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
36684    const cx = useCx();
36685    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(toggleGroupControl({
36686      isBlock,
36687      isDeselectable,
36688      size: normalizedSize
36689    }), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
36690    const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
36691    return (0,external_React_.createElement)(base_control, {
36692      help: help,
36693      __nextHasNoMarginBottom: __nextHasNoMarginBottom
36694    }, !hideLabelFromVision && (0,external_React_.createElement)(VisualLabelWrapper, null, (0,external_React_.createElement)(base_control.VisualLabel, null, label)), (0,external_React_.createElement)(MainControl, {
36695      ...otherProps,
36696      className: classes,
36697      isAdaptiveWidth: isAdaptiveWidth,
36698      label: label,
36699      onChange: onChange,
36700      ref: forwardedRef,
36701      size: normalizedSize,
36702      value: value
36703    }, (0,external_React_.createElement)(LayoutGroup, {
36704      id: baseId
36705    }, children)));
36706  }
36707  
36708  /**
36709   * `ToggleGroupControl` is a form component that lets users choose options
36710   * represented in horizontal segments. To render options for this control use
36711   * `ToggleGroupControlOption` component.
36712   *
36713   * This component is intended for selecting a single persistent value from a set of options,
36714   * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
36715   * use a `TabPanel` instead.
36716   *
36717   * Only use this control when you know for sure the labels of items inside won't
36718   * wrap. For items with longer labels, you can consider a `SelectControl` or a
36719   * `CustomSelectControl` component instead.
36720   *
36721   * ```jsx
36722   * import {
36723   *   __experimentalToggleGroupControl as ToggleGroupControl,
36724   *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
36725   * } from '@wordpress/components';
36726   *
36727   * function Example() {
36728   *   return (
36729   *     <ToggleGroupControl label="my label" value="vertical" isBlock>
36730   *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
36731   *       <ToggleGroupControlOption value="vertical" label="Vertical" />
36732   *     </ToggleGroupControl>
36733   *   );
36734   * }
36735   * ```
36736   */
36737  const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');
36738  /* harmony default export */ const toggle_group_control_component = (ToggleGroupControl);
36739  
36740  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JL6IRDFK.js
36741  "use client";
36742  
36743  
36744  
36745  
36746  
36747  
36748  
36749  // src/radio/radio.ts
36750  
36751  
36752  function getIsChecked(value, storeValue) {
36753    if (storeValue === void 0)
36754      return;
36755    if (value != null && storeValue != null) {
36756      return storeValue === value;
36757    }
36758    return !!storeValue;
36759  }
36760  function isNativeRadio(tagName, type) {
36761    return tagName === "input" && (!type || type === "radio");
36762  }
36763  var useRadio = createHook(
36764    (_a) => {
36765      var _b = _a, { store, name, value, checked } = _b, props = __objRest(_b, ["store", "name", "value", "checked"]);
36766      const context = useRadioContext();
36767      store = store || context;
36768      const id = useId(props.id);
36769      const ref = (0,external_React_.useRef)(null);
36770      const isChecked = useStoreState(
36771        store,
36772        (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
36773      );
36774      (0,external_React_.useEffect)(() => {
36775        if (!id)
36776          return;
36777        if (!isChecked)
36778          return;
36779        const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
36780        if (isActiveItem)
36781          return;
36782        store == null ? void 0 : store.setActiveId(id);
36783      }, [store, isChecked, id]);
36784      const onChangeProp = props.onChange;
36785      const tagName = useTagName(ref, props.as || "input");
36786      const nativeRadio = isNativeRadio(tagName, props.type);
36787      const disabled = disabledFromProps(props);
36788      const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
36789      (0,external_React_.useEffect)(() => {
36790        const element = ref.current;
36791        if (!element)
36792          return;
36793        if (nativeRadio)
36794          return;
36795        if (isChecked !== void 0) {
36796          element.checked = isChecked;
36797        }
36798        if (name !== void 0) {
36799          element.name = name;
36800        }
36801        if (value !== void 0) {
36802          element.value = `$value}`;
36803        }
36804      }, [propertyUpdated, nativeRadio, isChecked, name, value]);
36805      const onChange = useEvent((event) => {
36806        if (disabled) {
36807          event.preventDefault();
36808          event.stopPropagation();
36809          return;
36810        }
36811        if (!nativeRadio) {
36812          event.currentTarget.checked = true;
36813          schedulePropertyUpdate();
36814        }
36815        onChangeProp == null ? void 0 : onChangeProp(event);
36816        if (event.defaultPrevented)
36817          return;
36818        store == null ? void 0 : store.setValue(value);
36819      });
36820      const onClickProp = props.onClick;
36821      const onClick = useEvent((event) => {
36822        onClickProp == null ? void 0 : onClickProp(event);
36823        if (event.defaultPrevented)
36824          return;
36825        if (nativeRadio)
36826          return;
36827        onChange(event);
36828      });
36829      const onFocusProp = props.onFocus;
36830      const onFocus = useEvent((event) => {
36831        onFocusProp == null ? void 0 : onFocusProp(event);
36832        if (event.defaultPrevented)
36833          return;
36834        if (!nativeRadio)
36835          return;
36836        if (!store)
36837          return;
36838        const { moves, activeId } = store.getState();
36839        if (!moves)
36840          return;
36841        if (id && activeId !== id)
36842          return;
36843        onChange(event);
36844      });
36845      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
36846        id,
36847        role: !nativeRadio ? "radio" : void 0,
36848        type: nativeRadio ? "radio" : void 0,
36849        "aria-checked": isChecked
36850      }, props), {
36851        ref: useMergeRefs(ref, props.ref),
36852        onChange,
36853        onClick,
36854        onFocus
36855      });
36856      props = useCompositeItem(_4R3V3JGP_spreadValues({ store, clickOnEnter: !nativeRadio }, props));
36857      return _4R3V3JGP_spreadValues({
36858        name: nativeRadio ? name : void 0,
36859        value: nativeRadio ? value : void 0,
36860        checked: isChecked
36861      }, props);
36862    }
36863  );
36864  var Radio = createMemoComponent((props) => {
36865    const htmlProps = useRadio(props);
36866    return _3ORBWXWF_createElement("input", htmlProps);
36867  });
36868  if (false) {}
36869  
36870  
36871  
36872  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js
36873  
36874  function 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)."; }
36875  /**
36876   * External dependencies
36877   */
36878  
36879  /**
36880   * Internal dependencies
36881   */
36882  
36883  const LabelView = emotion_styled_base_browser_esm("div",  true ? {
36884    target: "et6ln9s1"
36885  } : 0)( true ? {
36886    name: "sln1fl",
36887    styles: "display:inline-flex;max-width:100%;min-width:0;position:relative"
36888  } : 0);
36889  const labelBlock =  true ? {
36890    name: "82a6rk",
36891    styles: "flex:1"
36892  } : 0;
36893  const buttonView = ({
36894    isDeselectable,
36895    isIcon,
36896    isPressed,
36897    size
36898  }) => /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;", reduceMotion('transition'), " user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", config_values.toggleGroupControlBackgroundColor, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({
36899    size
36900  }), " ", isPressed && pressed, ";" + ( true ? "" : 0),  true ? "" : 0);
36901  const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0),  true ? "" : 0);
36902  const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.white, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0),  true ? "" : 0);
36903  const ButtonContentView = emotion_styled_base_browser_esm("div",  true ? {
36904    target: "et6ln9s0"
36905  } : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0));
36906  const isIconStyles = ({
36907    size = 'default'
36908  }) => {
36909    const iconButtonSizes = {
36910      default: '30px',
36911      '__unstable-large': '32px'
36912    };
36913    return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";height:", iconButtonSizes[size], ";aspect-ratio:1;padding-left:0;padding-right:0;" + ( true ? "" : 0),  true ? "" : 0);
36914  };
36915  const backdropView = /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.gray[900], ";border-radius:", config_values.controlBorderRadius, ";position:absolute;inset:0;z-index:1;outline:2px solid transparent;outline-offset:-3px;" + ( true ? "" : 0),  true ? "" : 0);
36916  
36917  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js
36918  
36919  /**
36920   * External dependencies
36921   */
36922  
36923  // eslint-disable-next-line no-restricted-imports
36924  
36925  // eslint-disable-next-line no-restricted-imports
36926  
36927  
36928  /**
36929   * WordPress dependencies
36930   */
36931  
36932  
36933  
36934  /**
36935   * Internal dependencies
36936   */
36937  
36938  
36939  
36940  
36941  
36942  
36943  const {
36944    ButtonContentView: component_ButtonContentView,
36945    LabelView: component_LabelView
36946  } = toggle_group_control_option_base_styles_namespaceObject;
36947  const REDUCED_MOTION_TRANSITION_CONFIG = {
36948    duration: 0
36949  };
36950  const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
36951  const WithToolTip = ({
36952    showTooltip,
36953    text,
36954    children
36955  }) => {
36956    if (showTooltip && text) {
36957      return (0,external_React_.createElement)(tooltip, {
36958        text: text,
36959        placement: "top"
36960      }, children);
36961    }
36962    return (0,external_React_.createElement)(external_React_.Fragment, null, children);
36963  };
36964  function ToggleGroupControlOptionBase(props, forwardedRef) {
36965    const shouldReduceMotion = useReducedMotion();
36966    const toggleGroupControlContext = useToggleGroupControlContext();
36967    const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
36968    const buttonProps = useContextSystem({
36969      ...props,
36970      id
36971    }, 'ToggleGroupControlOptionBase');
36972    const {
36973      isBlock = false,
36974      isDeselectable = false,
36975      size = 'default'
36976    } = toggleGroupControlContext;
36977    const {
36978      className,
36979      isIcon = false,
36980      value,
36981      children,
36982      showTooltip = false,
36983      onFocus: onFocusProp,
36984      ...otherButtonProps
36985    } = buttonProps;
36986    const isPressed = toggleGroupControlContext.value === value;
36987    const cx = useCx();
36988    const labelViewClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(isBlock && labelBlock), [cx, isBlock]);
36989    const itemClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(buttonView({
36990      isDeselectable,
36991      isIcon,
36992      isPressed,
36993      size
36994    }), className), [cx, isDeselectable, isIcon, isPressed, size, className]);
36995    const backdropClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(backdropView), [cx]);
36996    const buttonOnClick = () => {
36997      if (isDeselectable && isPressed) {
36998        toggleGroupControlContext.setValue(undefined);
36999      } else {
37000        toggleGroupControlContext.setValue(value);
37001      }
37002    };
37003    const commonProps = {
37004      ...otherButtonProps,
37005      className: itemClasses,
37006      'data-value': value,
37007      ref: forwardedRef
37008    };
37009    return (0,external_React_.createElement)(component_LabelView, {
37010      className: labelViewClasses
37011    }, (0,external_React_.createElement)(WithToolTip, {
37012      showTooltip: showTooltip,
37013      text: otherButtonProps['aria-label']
37014    }, isDeselectable ? (0,external_React_.createElement)("button", {
37015      ...commonProps,
37016      onFocus: onFocusProp,
37017      "aria-pressed": isPressed,
37018      type: "button",
37019      onClick: buttonOnClick
37020    }, (0,external_React_.createElement)(component_ButtonContentView, null, children)) : (0,external_React_.createElement)(Radio, {
37021      render: (0,external_React_.createElement)("button", {
37022        type: "button",
37023        ...commonProps,
37024        onFocus: event => {
37025          onFocusProp?.(event);
37026          if (event.defaultPrevented) return;
37027          toggleGroupControlContext.setValue(value);
37028        }
37029      }),
37030      value: value
37031    }, (0,external_React_.createElement)(component_ButtonContentView, null, children))), isPressed ? (0,external_React_.createElement)(motion.div, {
37032      className: backdropClasses,
37033      transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
37034      role: "presentation",
37035      layoutId: LAYOUT_ID
37036    }) : null);
37037  }
37038  
37039  /**
37040   * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
37041   * generic component for any children of `ToggleGroupControl`.
37042   *
37043   * @example
37044   * ```jsx
37045   * import {
37046   *   __experimentalToggleGroupControl as ToggleGroupControl,
37047   *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,
37048   * } from '@wordpress/components';
37049   *
37050   * function Example() {
37051   *   return (
37052   *     <ToggleGroupControl label="my label" value="vertical" isBlock>
37053   *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
37054   *       <ToggleGroupControlOption value="vertical" label="Vertical" />
37055   *     </ToggleGroupControl>
37056   *   );
37057   * }
37058   * ```
37059   */
37060  const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');
37061  /* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase);
37062  
37063  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js
37064  
37065  /**
37066   * External dependencies
37067   */
37068  
37069  /**
37070   * WordPress dependencies
37071   */
37072  
37073  
37074  /**
37075   * Internal dependencies
37076   */
37077  
37078  
37079  
37080  function UnforwardedToggleGroupControlOptionIcon(props, ref) {
37081    const {
37082      icon,
37083      label,
37084      ...restProps
37085    } = props;
37086    return (0,external_React_.createElement)(toggle_group_control_option_base_component, {
37087      ...restProps,
37088      isIcon: true,
37089      "aria-label": label,
37090      showTooltip: true,
37091      ref: ref
37092    }, (0,external_React_.createElement)(build_module_icon, {
37093      icon: icon
37094    }));
37095  }
37096  
37097  /**
37098   * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
37099   * child of `ToggleGroupControl` and displays an icon.
37100   *
37101   * ```jsx
37102   *
37103   * import {
37104   *    __experimentalToggleGroupControl as ToggleGroupControl,
37105   *    __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
37106   * from '@wordpress/components';
37107   * import { formatLowercase, formatUppercase } from '@wordpress/icons';
37108   *
37109   * function Example() {
37110   *    return (
37111   *        <ToggleGroupControl>
37112   *            <ToggleGroupControlOptionIcon
37113   *                value="uppercase"
37114   *                label="Uppercase"
37115   *                icon={ formatUppercase }
37116   *            />
37117   *            <ToggleGroupControlOptionIcon
37118   *                value="lowercase"
37119   *                label="Lowercase"
37120   *                icon={ formatLowercase }
37121   *            />
37122   *        </ToggleGroupControl>
37123   *    );
37124   * }
37125   * ```
37126   */
37127  const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon);
37128  /* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon);
37129  
37130  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js
37131  
37132  /**
37133   * WordPress dependencies
37134   */
37135  
37136  
37137  
37138  /**
37139   * Internal dependencies
37140   */
37141  
37142  
37143  const BORDER_STYLES = [{
37144    label: (0,external_wp_i18n_namespaceObject.__)('Solid'),
37145    icon: line_solid,
37146    value: 'solid'
37147  }, {
37148    label: (0,external_wp_i18n_namespaceObject.__)('Dashed'),
37149    icon: line_dashed,
37150    value: 'dashed'
37151  }, {
37152    label: (0,external_wp_i18n_namespaceObject.__)('Dotted'),
37153    icon: line_dotted,
37154    value: 'dotted'
37155  }];
37156  function UnconnectedBorderControlStylePicker({
37157    onChange,
37158    ...restProps
37159  }, forwardedRef) {
37160    return (0,external_React_.createElement)(toggle_group_control_component, {
37161      __nextHasNoMarginBottom: true,
37162      __next40pxDefaultSize: true,
37163      ref: forwardedRef,
37164      isDeselectable: true,
37165      onChange: value => {
37166        onChange?.(value);
37167      },
37168      ...restProps
37169    }, BORDER_STYLES.map(borderStyle => (0,external_React_.createElement)(toggle_group_control_option_icon_component, {
37170      key: borderStyle.value,
37171      value: borderStyle.value,
37172      icon: borderStyle.icon,
37173      label: borderStyle.label
37174    })));
37175  }
37176  const BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
37177  /* harmony default export */ const border_control_style_picker_component = (BorderControlStylePicker);
37178  
37179  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-indicator/index.js
37180  
37181  /**
37182   * External dependencies
37183   */
37184  
37185  /**
37186   * WordPress dependencies
37187   */
37188  
37189  
37190  /**
37191   * Internal dependencies
37192   */
37193  
37194  function UnforwardedColorIndicator(props, forwardedRef) {
37195    const {
37196      className,
37197      colorValue,
37198      ...additionalProps
37199    } = props;
37200    return (0,external_React_.createElement)("span", {
37201      className: classnames_default()('component-color-indicator', className),
37202      style: {
37203        background: colorValue
37204      },
37205      ref: forwardedRef,
37206      ...additionalProps
37207    });
37208  }
37209  
37210  /**
37211   * ColorIndicator is a React component that renders a specific color in a
37212   * circle. It's often used to summarize a collection of used colors in a child
37213   * component.
37214   *
37215   * ```jsx
37216   * import { ColorIndicator } from '@wordpress/components';
37217   *
37218   * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
37219   * ```
37220   */
37221  const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator);
37222  /* harmony default export */ const color_indicator = (ColorIndicator);
37223  
37224  ;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs
37225  var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}}
37226  
37227  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/index.js
37228  
37229  /**
37230   * External dependencies
37231   */
37232  
37233  /**
37234   * WordPress dependencies
37235   */
37236  
37237  
37238  
37239  
37240  /**
37241   * Internal dependencies
37242   */
37243  
37244  
37245  
37246  const UnconnectedDropdown = (props, forwardedRef) => {
37247    const {
37248      renderContent,
37249      renderToggle,
37250      className,
37251      contentClassName,
37252      expandOnMobile,
37253      headerTitle,
37254      focusOnMount,
37255      popoverProps,
37256      onClose,
37257      onToggle,
37258      style,
37259      open,
37260      defaultOpen,
37261      // Deprecated props
37262      position,
37263      // From context system
37264      variant
37265    } = useContextSystem(props, 'Dropdown');
37266    if (position !== undefined) {
37267      external_wp_deprecated_default()('`position` prop in wp.components.Dropdown', {
37268        since: '6.2',
37269        alternative: '`popoverProps.placement` prop',
37270        hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'
37271      });
37272    }
37273  
37274    // Use internal state instead of a ref to make sure that the component
37275    // re-renders when the popover's anchor updates.
37276    const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
37277    const containerRef = (0,external_wp_element_namespaceObject.useRef)();
37278    const [isOpen, setIsOpen] = useControlledValue({
37279      defaultValue: defaultOpen,
37280      value: open,
37281      onChange: onToggle
37282    });
37283  
37284    /**
37285     * Closes the popover when focus leaves it unless the toggle was pressed or
37286     * focus has moved to a separate dialog. The former is to let the toggle
37287     * handle closing the popover and the latter is to preserve presence in
37288     * case a dialog has opened, allowing focus to return when it's dismissed.
37289     */
37290    function closeIfFocusOutside() {
37291      if (!containerRef.current) {
37292        return;
37293      }
37294      const {
37295        ownerDocument
37296      } = containerRef.current;
37297      const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]');
37298      if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {
37299        close();
37300      }
37301    }
37302    function close() {
37303      onClose?.();
37304      setIsOpen(false);
37305    }
37306    const args = {
37307      isOpen: !!isOpen,
37308      onToggle: () => setIsOpen(!isOpen),
37309      onClose: close
37310    };
37311    const popoverPropsHaveAnchor = !!popoverProps?.anchor ||
37312    // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
37313    // be removed from `Popover` from WordPress 6.3
37314    !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;
37315    return (0,external_React_.createElement)("div", {
37316      className: className,
37317      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor])
37318      // Some UAs focus the closest focusable parent when the toggle is
37319      // clicked. Making this div focusable ensures such UAs will focus
37320      // it and `closeIfFocusOutside` can tell if the toggle was clicked.
37321      ,
37322      tabIndex: -1,
37323      style: style
37324    }, renderToggle(args), isOpen && (0,external_React_.createElement)(popover, {
37325      position: position,
37326      onClose: close,
37327      onFocusOutside: closeIfFocusOutside,
37328      expandOnMobile: expandOnMobile,
37329      headerTitle: headerTitle,
37330      focusOnMount: focusOnMount
37331      // This value is used to ensure that the dropdowns
37332      // align with the editor header by default.
37333      ,
37334      offset: 13,
37335      anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,
37336      variant: variant,
37337      ...popoverProps,
37338      className: classnames_default()('components-dropdown__content', popoverProps?.className, contentClassName)
37339    }, renderContent(args)));
37340  };
37341  
37342  /**
37343   * Renders a button that opens a floating content modal when clicked.
37344   *
37345   * ```jsx
37346   * import { Button, Dropdown } from '@wordpress/components';
37347   *
37348   * const MyDropdown = () => (
37349   *   <Dropdown
37350   *     className="my-container-class-name"
37351   *     contentClassName="my-dropdown-content-classname"
37352   *     popoverProps={ { placement: 'bottom-start' } }
37353   *     renderToggle={ ( { isOpen, onToggle } ) => (
37354   *       <Button
37355   *         variant="primary"
37356   *         onClick={ onToggle }
37357   *         aria-expanded={ isOpen }
37358   *       >
37359   *         Toggle Dropdown!
37360   *       </Button>
37361   *     ) }
37362   *     renderContent={ () => <div>This is the content of the dropdown.</div> }
37363   *   />
37364   * );
37365   * ```
37366   */
37367  const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown');
37368  /* harmony default export */ const dropdown = (Dropdown);
37369  
37370  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-suffix-wrapper.js
37371  
37372  /**
37373   * External dependencies
37374   */
37375  
37376  /**
37377   * Internal dependencies
37378   */
37379  
37380  
37381  function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
37382    const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper');
37383    return (0,external_React_.createElement)(spacer_component, {
37384      marginBottom: 0,
37385      ...derivedProps,
37386      ref: forwardedRef
37387    });
37388  }
37389  
37390  /**
37391   * A convenience wrapper for the `suffix` when you want to apply
37392   * standard padding in accordance with the size variant.
37393   *
37394   * ```jsx
37395   * import {
37396   *   __experimentalInputControl as InputControl,
37397   *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
37398   * } from '@wordpress/components';
37399   *
37400   * <InputControl
37401   *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
37402   * />
37403   * ```
37404   */
37405  const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
37406  /* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper);
37407  
37408  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js
37409  
37410  /**
37411   * External dependencies
37412   */
37413  
37414  /**
37415   * Internal dependencies
37416   */
37417  
37418  
37419  
37420  
37421  const select_control_styles_disabledStyles = ({
37422    disabled
37423  }) => {
37424    if (!disabled) return '';
37425    return /*#__PURE__*/emotion_react_browser_esm_css({
37426      color: COLORS.ui.textDisabled
37427    },  true ? "" : 0,  true ? "" : 0);
37428  };
37429  const select_control_styles_sizeStyles = ({
37430    __next40pxDefaultSize,
37431    multiple,
37432    selectSize = 'default'
37433  }) => {
37434    if (multiple) {
37435      // When `multiple`, just use the native browser styles
37436      // without setting explicit height.
37437      return;
37438    }
37439    const sizes = {
37440      default: {
37441        height: 40,
37442        minHeight: 40,
37443        paddingTop: 0,
37444        paddingBottom: 0
37445      },
37446      small: {
37447        height: 24,
37448        minHeight: 24,
37449        paddingTop: 0,
37450        paddingBottom: 0
37451      },
37452      compact: {
37453        height: 32,
37454        minHeight: 32,
37455        paddingTop: 0,
37456        paddingBottom: 0
37457      },
37458      '__unstable-large': {
37459        height: 40,
37460        minHeight: 40,
37461        paddingTop: 0,
37462        paddingBottom: 0
37463      }
37464    };
37465    if (!__next40pxDefaultSize) {
37466      sizes.default = sizes.compact;
37467    }
37468    const style = sizes[selectSize] || sizes.default;
37469    return /*#__PURE__*/emotion_react_browser_esm_css(style,  true ? "" : 0,  true ? "" : 0);
37470  };
37471  const chevronIconSize = 18;
37472  const sizePaddings = ({
37473    __next40pxDefaultSize,
37474    multiple,
37475    selectSize = 'default'
37476  }) => {
37477    const padding = {
37478      default: 16,
37479      small: 8,
37480      compact: 8,
37481      '__unstable-large': 16
37482    };
37483    if (!__next40pxDefaultSize) {
37484      padding.default = padding.compact;
37485    }
37486    const selectedPadding = padding[selectSize] || padding.default;
37487    return rtl({
37488      paddingLeft: selectedPadding,
37489      paddingRight: selectedPadding + chevronIconSize,
37490      ...(multiple ? {
37491        paddingTop: selectedPadding,
37492        paddingBottom: selectedPadding
37493      } : {})
37494    });
37495  };
37496  const overflowStyles = ({
37497    multiple
37498  }) => {
37499    return {
37500      overflow: multiple ? 'auto' : 'hidden'
37501    };
37502  };
37503  
37504  // TODO: Resolve need to use &&& to increase specificity
37505  // https://github.com/WordPress/gutenberg/issues/18483
37506  
37507  const Select = emotion_styled_base_browser_esm("select",  true ? {
37508    target: "e1mv6sxx2"
37509  } : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;width:100%;max-width:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;", select_control_styles_disabledStyles, ";", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0));
37510  const DownArrowWrapper = emotion_styled_base_browser_esm("div",  true ? {
37511    target: "e1mv6sxx1"
37512  } : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0));
37513  const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper,  true ? {
37514    target: "e1mv6sxx0"
37515  } : 0)("position:absolute;pointer-events:none;", rtl({
37516    right: 0
37517  }), ";" + ( true ? "" : 0));
37518  
37519  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js
37520  /**
37521   * WordPress dependencies
37522   */
37523  
37524  
37525  /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
37526  
37527  /**
37528   * Return an SVG icon.
37529   *
37530   * @param {IconProps}                                 props icon is the SVG component to render
37531   *                                                          size is a number specifiying the icon size in pixels
37532   *                                                          Other props will be passed to wrapped SVG component
37533   * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
37534   *
37535   * @return {JSX.Element}  Icon component
37536   */
37537  function icon_Icon({
37538    icon,
37539    size = 24,
37540    ...props
37541  }, ref) {
37542    return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
37543      width: size,
37544      height: size,
37545      ...props,
37546      ref
37547    });
37548  }
37549  /* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon));
37550  
37551  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js
37552  
37553  /**
37554   * WordPress dependencies
37555   */
37556  
37557  const chevronDown = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
37558    viewBox: "0 0 24 24",
37559    xmlns: "http://www.w3.org/2000/svg"
37560  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
37561    d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
37562  }));
37563  /* harmony default export */ const chevron_down = (chevronDown);
37564  
37565  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/chevron-down.js
37566  
37567  /**
37568   * WordPress dependencies
37569   */
37570  
37571  
37572  /**
37573   * Internal dependencies
37574   */
37575  
37576  const SelectControlChevronDown = () => {
37577    return (0,external_React_.createElement)(InputControlSuffixWrapperWithClickThrough, null, (0,external_React_.createElement)(DownArrowWrapper, null, (0,external_React_.createElement)(icons_build_module_icon, {
37578      icon: chevron_down,
37579      size: chevronIconSize
37580    })));
37581  };
37582  /* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown);
37583  
37584  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/index.js
37585  
37586  /**
37587   * External dependencies
37588   */
37589  
37590  
37591  /**
37592   * WordPress dependencies
37593   */
37594  
37595  
37596  
37597  /**
37598   * Internal dependencies
37599   */
37600  
37601  
37602  
37603  
37604  
37605  const select_control_noop = () => {};
37606  function select_control_useUniqueId(idProp) {
37607    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl);
37608    const id = `inspector-select-control-$instanceId}`;
37609    return idProp || id;
37610  }
37611  function UnforwardedSelectControl(props, ref) {
37612    const {
37613      className,
37614      disabled = false,
37615      help,
37616      hideLabelFromVision,
37617      id: idProp,
37618      label,
37619      multiple = false,
37620      onBlur = select_control_noop,
37621      onChange,
37622      onFocus = select_control_noop,
37623      options = [],
37624      size = 'default',
37625      value: valueProp,
37626      labelPosition = 'top',
37627      children,
37628      prefix,
37629      suffix,
37630      __next40pxDefaultSize = false,
37631      __nextHasNoMarginBottom = false,
37632      ...restProps
37633    } = useDeprecated36pxDefaultSizeProp(props);
37634    const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
37635    const id = select_control_useUniqueId(idProp);
37636    const helpId = help ? `$id}__help` : undefined;
37637  
37638    // Disable reason: A select with an onchange throws a warning.
37639    if (!options?.length && !children) return null;
37640    const handleOnBlur = event => {
37641      onBlur(event);
37642      setIsFocused(false);
37643    };
37644    const handleOnFocus = event => {
37645      onFocus(event);
37646      setIsFocused(true);
37647    };
37648    const handleOnChange = event => {
37649      if (props.multiple) {
37650        const selectedOptions = Array.from(event.target.options).filter(({
37651          selected
37652        }) => selected);
37653        const newValues = selectedOptions.map(({
37654          value
37655        }) => value);
37656        props.onChange?.(newValues, {
37657          event
37658        });
37659        return;
37660      }
37661      props.onChange?.(event.target.value, {
37662        event
37663      });
37664    };
37665    const classes = classnames_default()('components-select-control', className);
37666    return (0,external_React_.createElement)(base_control, {
37667      help: help,
37668      id: id,
37669      __nextHasNoMarginBottom: __nextHasNoMarginBottom
37670    }, (0,external_React_.createElement)(input_base, {
37671      className: classes,
37672      disabled: disabled,
37673      hideLabelFromVision: hideLabelFromVision,
37674      id: id,
37675      isFocused: isFocused,
37676      label: label,
37677      size: size,
37678      suffix: suffix || !multiple && (0,external_React_.createElement)(select_control_chevron_down, null),
37679      prefix: prefix,
37680      labelPosition: labelPosition,
37681      __next40pxDefaultSize: __next40pxDefaultSize
37682    }, (0,external_React_.createElement)(Select, {
37683      ...restProps,
37684      __next40pxDefaultSize: __next40pxDefaultSize,
37685      "aria-describedby": helpId,
37686      className: "components-select-control__input",
37687      disabled: disabled,
37688      id: id,
37689      multiple: multiple,
37690      onBlur: handleOnBlur,
37691      onChange: handleOnChange,
37692      onFocus: handleOnFocus,
37693      ref: ref,
37694      selectSize: size,
37695      value: valueProp
37696    }, children || options.map((option, index) => {
37697      const key = option.id || `$option.label}-$option.value}-$index}`;
37698      return (0,external_React_.createElement)("option", {
37699        key: key,
37700        value: option.value,
37701        disabled: option.disabled,
37702        hidden: option.hidden
37703      }, option.label);
37704    }))));
37705  }
37706  
37707  /**
37708   * `SelectControl` allows users to select from a single or multiple option menu.
37709   * It functions as a wrapper around the browser's native `<select>` element.
37710   *
37711   * ```jsx
37712   * import { SelectControl } from '@wordpress/components';
37713   * import { useState } from '@wordpress/element';
37714   *
37715   * const MySelectControl = () => {
37716   *   const [ size, setSize ] = useState( '50%' );
37717   *
37718   *   return (
37719   *     <SelectControl
37720   *       label="Size"
37721   *       value={ size }
37722   *       options={ [
37723   *         { label: 'Big', value: '100%' },
37724   *         { label: 'Medium', value: '50%' },
37725   *         { label: 'Small', value: '25%' },
37726   *       ] }
37727   *       onChange={ setSize }
37728   *     />
37729   *   );
37730   * };
37731   * ```
37732   */
37733  const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl);
37734  /* harmony default export */ const select_control = (SelectControl);
37735  
37736  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js
37737  /**
37738   * WordPress dependencies
37739   */
37740  
37741  
37742  /**
37743   * Internal dependencies
37744   */
37745  
37746  
37747  /**
37748   * @template T
37749   * @typedef Options
37750   * @property {T}      [initial] Initial value
37751   * @property {T | ""} fallback  Fallback value
37752   */
37753  
37754  /** @type {Readonly<{ initial: undefined, fallback: '' }>} */
37755  const defaultOptions = {
37756    initial: undefined,
37757    /**
37758     * Defaults to empty string, as that is preferred for usage with
37759     * <input />, <textarea />, and <select /> form elements.
37760     */
37761    fallback: ''
37762  };
37763  
37764  /**
37765   * Custom hooks for "controlled" components to track and consolidate internal
37766   * state and incoming values. This is useful for components that render
37767   * `input`, `textarea`, or `select` HTML elements.
37768   *
37769   * https://reactjs.org/docs/forms.html#controlled-components
37770   *
37771   * At first, a component using useControlledState receives an initial prop
37772   * value, which is used as initial internal state.
37773   *
37774   * This internal state can be maintained and updated without
37775   * relying on new incoming prop values.
37776   *
37777   * Unlike the basic useState hook, useControlledState's state can
37778   * be updated if a new incoming prop value is changed.
37779   *
37780   * @template T
37781   *
37782   * @param {T | undefined} currentState             The current value.
37783   * @param {Options<T>}    [options=defaultOptions] Additional options for the hook.
37784   *
37785   * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
37786   */
37787  function use_controlled_state_useControlledState(currentState, options = defaultOptions) {
37788    const {
37789      initial,
37790      fallback
37791    } = {
37792      ...defaultOptions,
37793      ...options
37794    };
37795    const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState);
37796    const hasCurrentState = isValueDefined(currentState);
37797  
37798    /*
37799     * Resets internal state if value every changes from uncontrolled <-> controlled.
37800     */
37801    (0,external_wp_element_namespaceObject.useEffect)(() => {
37802      if (hasCurrentState && internalState) {
37803        setInternalState(undefined);
37804      }
37805    }, [hasCurrentState, internalState]);
37806    const state = getDefinedValue([currentState, internalState, initial], fallback);
37807  
37808    /* eslint-disable jsdoc/no-undefined-types */
37809    /** @type {(nextState: T) => void} */
37810    const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => {
37811      if (!hasCurrentState) {
37812        setInternalState(nextState);
37813      }
37814    }, [hasCurrentState]);
37815    /* eslint-enable jsdoc/no-undefined-types */
37816  
37817    return [state, setState];
37818  }
37819  /* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState);
37820  
37821  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/utils.js
37822  /**
37823   * WordPress dependencies
37824   */
37825  
37826  
37827  /**
37828   * Internal dependencies
37829   */
37830  
37831  
37832  /**
37833   * A float supported clamp function for a specific value.
37834   *
37835   * @param value The value to clamp.
37836   * @param min   The minimum value.
37837   * @param max   The maximum value.
37838   *
37839   * @return A (float) number
37840   */
37841  function floatClamp(value, min, max) {
37842    if (typeof value !== 'number') {
37843      return null;
37844    }
37845    return parseFloat(`$math_clamp(value, min, max)}`);
37846  }
37847  
37848  /**
37849   * Hook to store a clamped value, derived from props.
37850   *
37851   * @param settings
37852   * @return The controlled value and the value setter.
37853   */
37854  function useControlledRangeValue(settings) {
37855    const {
37856      min,
37857      max,
37858      value: valueProp,
37859      initial
37860    } = settings;
37861    const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), {
37862      initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),
37863      fallback: null
37864    });
37865    const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
37866      if (nextValue === null) {
37867        setInternalState(null);
37868      } else {
37869        setInternalState(floatClamp(nextValue, min, max));
37870      }
37871    }, [min, max, setInternalState]);
37872  
37873    // `state` can't be an empty string because we specified a fallback value of
37874    // `null` in `useControlledState`
37875    return [state, setState];
37876  }
37877  
37878  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js
37879  
37880  function 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)."; }
37881  /**
37882   * External dependencies
37883   */
37884  
37885  /**
37886   * Internal dependencies
37887   */
37888  
37889  
37890  
37891  const rangeHeightValue = 30;
37892  const railHeight = 4;
37893  const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({
37894    height: rangeHeightValue,
37895    minHeight: rangeHeightValue
37896  },  true ? "" : 0,  true ? "" : 0);
37897  const thumbSize = 12;
37898  const deprecatedHeight = ({
37899    __next40pxDefaultSize
37900  }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({
37901    minHeight: rangeHeightValue
37902  },  true ? "" : 0,  true ? "" : 0);
37903  const range_control_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
37904    target: "e1epgpqk14"
37905  } : 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));
37906  const wrapperColor = ({
37907    color = COLORS.ui.borderFocus
37908  }) => /*#__PURE__*/emotion_react_browser_esm_css({
37909    color
37910  },  true ? "" : 0,  true ? "" : 0);
37911  const wrapperMargin = ({
37912    marks,
37913    __nextHasNoMarginBottom
37914  }) => {
37915    if (!__nextHasNoMarginBottom) {
37916      return /*#__PURE__*/emotion_react_browser_esm_css({
37917        marginBottom: marks ? 16 : undefined
37918      },  true ? "" : 0,  true ? "" : 0);
37919    }
37920    return '';
37921  };
37922  const range_control_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
37923    target: "e1epgpqk13"
37924  } : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0));
37925  const BeforeIconWrapper = emotion_styled_base_browser_esm("span",  true ? {
37926    target: "e1epgpqk12"
37927  } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({
37928    marginRight: 6
37929  }), ";" + ( true ? "" : 0));
37930  const AfterIconWrapper = emotion_styled_base_browser_esm("span",  true ? {
37931    target: "e1epgpqk11"
37932  } : 0)("display:flex;margin-top:", railHeight, "px;", rtl({
37933    marginLeft: 6
37934  }), ";" + ( true ? "" : 0));
37935  const railBackgroundColor = ({
37936    disabled,
37937    railColor
37938  }) => {
37939    let background = railColor || '';
37940    if (disabled) {
37941      background = COLORS.ui.backgroundDisabled;
37942    }
37943    return /*#__PURE__*/emotion_react_browser_esm_css({
37944      background
37945    },  true ? "" : 0,  true ? "" : 0);
37946  };
37947  const Rail = emotion_styled_base_browser_esm("span",  true ? {
37948    target: "e1epgpqk10"
37949  } : 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));
37950  const trackBackgroundColor = ({
37951    disabled,
37952    trackColor
37953  }) => {
37954    let background = trackColor || 'currentColor';
37955    if (disabled) {
37956      background = COLORS.gray[400];
37957    }
37958    return /*#__PURE__*/emotion_react_browser_esm_css({
37959      background
37960    },  true ? "" : 0,  true ? "" : 0);
37961  };
37962  const Track = emotion_styled_base_browser_esm("span",  true ? {
37963    target: "e1epgpqk9"
37964  } : 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));
37965  const MarksWrapper = emotion_styled_base_browser_esm("span",  true ? {
37966    target: "e1epgpqk8"
37967  } : 0)( true ? {
37968    name: "l7tjj5",
37969    styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none"
37970  } : 0);
37971  const markFill = ({
37972    disabled,
37973    isFilled
37974  }) => {
37975    let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[300];
37976    if (disabled) {
37977      backgroundColor = COLORS.gray[400];
37978    }
37979    return /*#__PURE__*/emotion_react_browser_esm_css({
37980      backgroundColor
37981    },  true ? "" : 0,  true ? "" : 0);
37982  };
37983  const Mark = emotion_styled_base_browser_esm("span",  true ? {
37984    target: "e1epgpqk7"
37985  } : 0)("height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0));
37986  const markLabelFill = ({
37987    isFilled
37988  }) => {
37989    return /*#__PURE__*/emotion_react_browser_esm_css({
37990      color: isFilled ? COLORS.gray[700] : COLORS.gray[300]
37991    },  true ? "" : 0,  true ? "" : 0);
37992  };
37993  const MarkLabel = emotion_styled_base_browser_esm("span",  true ? {
37994    target: "e1epgpqk6"
37995  } : 0)("color:", COLORS.gray[300], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0));
37996  const thumbColor = ({
37997    disabled
37998  }) => 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);
37999  const ThumbWrapper = emotion_styled_base_browser_esm("span",  true ? {
38000    target: "e1epgpqk5"
38001  } : 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({
38002    marginLeft: -10
38003  }), ";", rtl({
38004    transform: 'translateX( 4.5px )'
38005  }, {
38006    transform: 'translateX( -4.5px )'
38007  }), ";" + ( true ? "" : 0));
38008  const thumbFocus = ({
38009    isFocused
38010  }) => {
38011    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) : '';
38012  };
38013  const Thumb = emotion_styled_base_browser_esm("span",  true ? {
38014    target: "e1epgpqk4"
38015  } : 0)("align-items:center;border-radius:50%;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0));
38016  const InputRange = emotion_styled_base_browser_esm("input",  true ? {
38017    target: "e1epgpqk3"
38018  } : 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));
38019  const tooltipShow = ({
38020    show
38021  }) => {
38022    return /*#__PURE__*/emotion_react_browser_esm_css({
38023      opacity: show ? 1 : 0
38024    },  true ? "" : 0,  true ? "" : 0);
38025  };
38026  var range_control_styles_ref =  true ? {
38027    name: "1cypxip",
38028    styles: "top:-80%"
38029  } : 0;
38030  var range_control_styles_ref2 =  true ? {
38031    name: "1lr98c4",
38032    styles: "bottom:-80%"
38033  } : 0;
38034  const tooltipPosition = ({
38035    position
38036  }) => {
38037    const isBottom = position === 'bottom';
38038    if (isBottom) {
38039      return range_control_styles_ref2;
38040    }
38041    return range_control_styles_ref;
38042  };
38043  const range_control_styles_Tooltip = emotion_styled_base_browser_esm("span",  true ? {
38044    target: "e1epgpqk2"
38045  } : 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({
38046    transform: 'translateX(-50%)'
38047  }, {
38048    transform: 'translateX(50%)'
38049  }), ";" + ( true ? "" : 0));
38050  
38051  // @todo: Refactor RangeControl with latest HStack configuration
38052  // @see: packages/components/src/h-stack
38053  const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
38054    target: "e1epgpqk1"
38055  } : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({
38056    marginLeft: `$space(4)} !important`
38057  }), ";" + ( true ? "" : 0));
38058  const ActionRightWrapper = emotion_styled_base_browser_esm("span",  true ? {
38059    target: "e1epgpqk0"
38060  } : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({
38061    marginLeft: 8
38062  }), ";" + ( true ? "" : 0));
38063  
38064  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/input-range.js
38065  
38066  /**
38067   * WordPress dependencies
38068   */
38069  
38070  
38071  /**
38072   * Internal dependencies
38073   */
38074  
38075  function input_range_InputRange(props, ref) {
38076    const {
38077      describedBy,
38078      label,
38079      value,
38080      ...otherProps
38081    } = props;
38082    return (0,external_React_.createElement)(InputRange, {
38083      ...otherProps,
38084      "aria-describedby": describedBy,
38085      "aria-label": label,
38086      "aria-hidden": false,
38087      ref: ref,
38088      tabIndex: 0,
38089      type: "range",
38090      value: value
38091    });
38092  }
38093  const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange);
38094  /* harmony default export */ const input_range = (input_range_ForwardedComponent);
38095  
38096  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/mark.js
38097  
38098  /**
38099   * External dependencies
38100   */
38101  
38102  
38103  /**
38104   * Internal dependencies
38105   */
38106  
38107  function RangeMark(props) {
38108    const {
38109      className,
38110      isFilled = false,
38111      label,
38112      style = {},
38113      ...otherProps
38114    } = props;
38115    const classes = classnames_default()('components-range-control__mark', isFilled && 'is-filled', className);
38116    const labelClasses = classnames_default()('components-range-control__mark-label', isFilled && 'is-filled');
38117    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Mark, {
38118      ...otherProps,
38119      "aria-hidden": "true",
38120      className: classes,
38121      isFilled: isFilled,
38122      style: style
38123    }), label && (0,external_React_.createElement)(MarkLabel, {
38124      "aria-hidden": "true",
38125      className: labelClasses,
38126      isFilled: isFilled,
38127      style: style
38128    }, label));
38129  }
38130  
38131  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/rail.js
38132  
38133  /**
38134   * WordPress dependencies
38135   */
38136  
38137  
38138  /**
38139   * Internal dependencies
38140   */
38141  
38142  
38143  function RangeRail(props) {
38144    const {
38145      disabled = false,
38146      marks = false,
38147      min = 0,
38148      max = 100,
38149      step = 1,
38150      value = 0,
38151      ...restProps
38152    } = props;
38153    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(Rail, {
38154      disabled: disabled,
38155      ...restProps
38156    }), marks && (0,external_React_.createElement)(Marks, {
38157      disabled: disabled,
38158      marks: marks,
38159      min: min,
38160      max: max,
38161      step: step,
38162      value: value
38163    }));
38164  }
38165  function Marks(props) {
38166    const {
38167      disabled = false,
38168      marks = false,
38169      min = 0,
38170      max = 100,
38171      step: stepProp = 1,
38172      value = 0
38173    } = props;
38174    const step = stepProp === 'any' ? 1 : stepProp;
38175    const marksData = useMarks({
38176      marks,
38177      min,
38178      max,
38179      step,
38180      value
38181    });
38182    return (0,external_React_.createElement)(MarksWrapper, {
38183      "aria-hidden": "true",
38184      className: "components-range-control__marks"
38185    }, marksData.map(mark => (0,external_React_.createElement)(RangeMark, {
38186      ...mark,
38187      key: mark.key,
38188      "aria-hidden": "true",
38189      disabled: disabled
38190    })));
38191  }
38192  function useMarks({
38193    marks,
38194    min = 0,
38195    max = 100,
38196    step = 1,
38197    value = 0
38198  }) {
38199    if (!marks) {
38200      return [];
38201    }
38202    const range = max - min;
38203    if (!Array.isArray(marks)) {
38204      marks = [];
38205      const count = 1 + Math.round(range / step);
38206      while (count > marks.push({
38207        value: step * marks.length + min
38208      }));
38209    }
38210    const placedMarks = [];
38211    marks.forEach((mark, index) => {
38212      if (mark.value < min || mark.value > max) {
38213        return;
38214      }
38215      const key = `mark-$index}`;
38216      const isFilled = mark.value <= value;
38217      const offset = `${(mark.value - min) / range * 100}%`;
38218      const offsetStyle = {
38219        [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: offset
38220      };
38221      placedMarks.push({
38222        ...mark,
38223        isFilled,
38224        key,
38225        style: offsetStyle
38226      });
38227    });
38228    return placedMarks;
38229  }
38230  
38231  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/tooltip.js
38232  
38233  /**
38234   * External dependencies
38235   */
38236  
38237  
38238  /**
38239   * WordPress dependencies
38240   */
38241  
38242  
38243  /**
38244   * Internal dependencies
38245   */
38246  
38247  function SimpleTooltip(props) {
38248    const {
38249      className,
38250      inputRef,
38251      tooltipPosition,
38252      show = false,
38253      style = {},
38254      value = 0,
38255      renderTooltipContent = v => v,
38256      zIndex = 100,
38257      ...restProps
38258    } = props;
38259    const position = useTooltipPosition({
38260      inputRef,
38261      tooltipPosition
38262    });
38263    const classes = classnames_default()('components-simple-tooltip', className);
38264    const styles = {
38265      ...style,
38266      zIndex
38267    };
38268    return (0,external_React_.createElement)(range_control_styles_Tooltip, {
38269      ...restProps,
38270      "aria-hidden": show,
38271      className: classes,
38272      position: position,
38273      show: show,
38274      role: "tooltip",
38275      style: styles
38276    }, renderTooltipContent(value));
38277  }
38278  function useTooltipPosition({
38279    inputRef,
38280    tooltipPosition
38281  }) {
38282    const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)();
38283    const setTooltipPosition = (0,external_wp_element_namespaceObject.useCallback)(() => {
38284      if (inputRef && inputRef.current) {
38285        setPosition(tooltipPosition);
38286      }
38287    }, [tooltipPosition, inputRef]);
38288    (0,external_wp_element_namespaceObject.useEffect)(() => {
38289      setTooltipPosition();
38290    }, [setTooltipPosition]);
38291    (0,external_wp_element_namespaceObject.useEffect)(() => {
38292      window.addEventListener('resize', setTooltipPosition);
38293      return () => {
38294        window.removeEventListener('resize', setTooltipPosition);
38295      };
38296    });
38297    return position;
38298  }
38299  
38300  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/index.js
38301  
38302  /**
38303   * External dependencies
38304   */
38305  
38306  /**
38307   * WordPress dependencies
38308   */
38309  
38310  
38311  
38312  
38313  /**
38314   * Internal dependencies
38315   */
38316  
38317  
38318  
38319  
38320  
38321  
38322  
38323  
38324  
38325  
38326  
38327  const range_control_noop = () => {};
38328  function UnforwardedRangeControl(props, forwardedRef) {
38329    const {
38330      __nextHasNoMarginBottom = false,
38331      afterIcon,
38332      allowReset = false,
38333      beforeIcon,
38334      className,
38335      color: colorProp = COLORS.theme.accent,
38336      currentInput,
38337      disabled = false,
38338      help,
38339      hideLabelFromVision = false,
38340      initialPosition,
38341      isShiftStepEnabled = true,
38342      label,
38343      marks = false,
38344      max = 100,
38345      min = 0,
38346      onBlur = range_control_noop,
38347      onChange = range_control_noop,
38348      onFocus = range_control_noop,
38349      onMouseLeave = range_control_noop,
38350      onMouseMove = range_control_noop,
38351      railColor,
38352      renderTooltipContent = v => v,
38353      resetFallbackValue,
38354      __next40pxDefaultSize = false,
38355      shiftStep = 10,
38356      showTooltip: showTooltipProp,
38357      step = 1,
38358      trackColor,
38359      value: valueProp,
38360      withInputField = true,
38361      ...otherProps
38362    } = props;
38363    const [value, setValue] = useControlledRangeValue({
38364      min,
38365      max,
38366      value: valueProp !== null && valueProp !== void 0 ? valueProp : null,
38367      initial: initialPosition
38368    });
38369    const isResetPendent = (0,external_wp_element_namespaceObject.useRef)(false);
38370    let hasTooltip = showTooltipProp;
38371    let hasInputField = withInputField;
38372    if (step === 'any') {
38373      // The tooltip and number input field are hidden when the step is "any"
38374      // because the decimals get too lengthy to fit well.
38375      hasTooltip = false;
38376      hasInputField = false;
38377    }
38378    const [showTooltip, setShowTooltip] = (0,external_wp_element_namespaceObject.useState)(hasTooltip);
38379    const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
38380    const inputRef = (0,external_wp_element_namespaceObject.useRef)();
38381    const isCurrentlyFocused = inputRef.current?.matches(':focus');
38382    const isThumbFocused = !disabled && isFocused;
38383    const isValueReset = value === null;
38384    const currentValue = value !== undefined ? value : currentInput;
38385    const inputSliderValue = isValueReset ? '' : currentValue;
38386    const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;
38387    const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;
38388    const fillValueOffset = `$math_clamp(fillValue, 0, 100)}%`;
38389    const classes = classnames_default()('components-range-control', className);
38390    const wrapperClasses = classnames_default()('components-range-control__wrapper', !!marks && 'is-marked');
38391    const id = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control');
38392    const describedBy = !!help ? `$id}__help` : undefined;
38393    const enableTooltip = hasTooltip !== false && Number.isFinite(value);
38394    const handleOnRangeChange = event => {
38395      const nextValue = parseFloat(event.target.value);
38396      setValue(nextValue);
38397      onChange(nextValue);
38398    };
38399    const handleOnChange = next => {
38400      // @ts-expect-error TODO: Investigate if it's problematic for setValue() to
38401      // potentially receive a NaN when next is undefined.
38402      let nextValue = parseFloat(next);
38403      setValue(nextValue);
38404  
38405      /*
38406       * Calls onChange only when nextValue is numeric
38407       * otherwise may queue a reset for the blur event.
38408       */
38409      if (!isNaN(nextValue)) {
38410        if (nextValue < min || nextValue > max) {
38411          nextValue = floatClamp(nextValue, min, max);
38412        }
38413        onChange(nextValue);
38414        isResetPendent.current = false;
38415      } else if (allowReset) {
38416        isResetPendent.current = true;
38417      }
38418    };
38419    const handleOnInputNumberBlur = () => {
38420      if (isResetPendent.current) {
38421        handleOnReset();
38422        isResetPendent.current = false;
38423      }
38424    };
38425    const handleOnReset = () => {
38426      let resetValue = parseFloat(`$resetFallbackValue}`);
38427      let onChangeResetValue = resetValue;
38428      if (isNaN(resetValue)) {
38429        resetValue = null;
38430        onChangeResetValue = undefined;
38431      }
38432      setValue(resetValue);
38433  
38434      /**
38435       * Previously, this callback would always receive undefined as
38436       * an argument. This behavior is unexpected, specifically
38437       * when resetFallbackValue is defined.
38438       *
38439       * The value of undefined is not ideal. Passing it through
38440       * to internal <input /> elements would change it from a
38441       * controlled component to an uncontrolled component.
38442       *
38443       * For now, to minimize unexpected regressions, we're going to
38444       * preserve the undefined callback argument, except when a
38445       * resetFallbackValue is defined.
38446       */
38447      onChange(onChangeResetValue);
38448    };
38449    const handleShowTooltip = () => setShowTooltip(true);
38450    const handleHideTooltip = () => setShowTooltip(false);
38451    const handleOnBlur = event => {
38452      onBlur(event);
38453      setIsFocused(false);
38454      handleHideTooltip();
38455    };
38456    const handleOnFocus = event => {
38457      onFocus(event);
38458      setIsFocused(true);
38459      handleShowTooltip();
38460    };
38461    const offsetStyle = {
38462      [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset
38463    };
38464    return (0,external_React_.createElement)(base_control, {
38465      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
38466      className: classes,
38467      label: label,
38468      hideLabelFromVision: hideLabelFromVision,
38469      id: `$id}`,
38470      help: help
38471    }, (0,external_React_.createElement)(range_control_styles_Root, {
38472      className: "components-range-control__root",
38473      __next40pxDefaultSize: __next40pxDefaultSize
38474    }, beforeIcon && (0,external_React_.createElement)(BeforeIconWrapper, null, (0,external_React_.createElement)(build_module_icon, {
38475      icon: beforeIcon
38476    })), (0,external_React_.createElement)(range_control_styles_Wrapper, {
38477      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
38478      className: wrapperClasses,
38479      color: colorProp,
38480      marks: !!marks
38481    }, (0,external_React_.createElement)(input_range, {
38482      ...otherProps,
38483      className: "components-range-control__slider",
38484      describedBy: describedBy,
38485      disabled: disabled,
38486      id: `$id}`,
38487      label: label,
38488      max: max,
38489      min: min,
38490      onBlur: handleOnBlur,
38491      onChange: handleOnRangeChange,
38492      onFocus: handleOnFocus,
38493      onMouseMove: onMouseMove,
38494      onMouseLeave: onMouseLeave,
38495      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]),
38496      step: step,
38497      value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined
38498    }), (0,external_React_.createElement)(RangeRail, {
38499      "aria-hidden": true,
38500      disabled: disabled,
38501      marks: marks,
38502      max: max,
38503      min: min,
38504      railColor: railColor,
38505      step: step,
38506      value: rangeFillValue
38507    }), (0,external_React_.createElement)(Track, {
38508      "aria-hidden": true,
38509      className: "components-range-control__track",
38510      disabled: disabled,
38511      style: {
38512        width: fillValueOffset
38513      },
38514      trackColor: trackColor
38515    }), (0,external_React_.createElement)(ThumbWrapper, {
38516      className: "components-range-control__thumb-wrapper",
38517      style: offsetStyle,
38518      disabled: disabled
38519    }, (0,external_React_.createElement)(Thumb, {
38520      "aria-hidden": true,
38521      isFocused: isThumbFocused,
38522      disabled: disabled
38523    })), enableTooltip && (0,external_React_.createElement)(SimpleTooltip, {
38524      className: "components-range-control__tooltip",
38525      inputRef: inputRef,
38526      tooltipPosition: "bottom",
38527      renderTooltipContent: renderTooltipContent,
38528      show: isCurrentlyFocused || showTooltip,
38529      style: offsetStyle,
38530      value: value
38531    })), afterIcon && (0,external_React_.createElement)(AfterIconWrapper, null, (0,external_React_.createElement)(build_module_icon, {
38532      icon: afterIcon
38533    })), hasInputField && (0,external_React_.createElement)(InputNumber, {
38534      "aria-label": label,
38535      className: "components-range-control__number",
38536      disabled: disabled,
38537      inputMode: "decimal",
38538      isShiftStepEnabled: isShiftStepEnabled,
38539      max: max,
38540      min: min,
38541      onBlur: handleOnInputNumberBlur,
38542      onChange: handleOnChange,
38543      shiftStep: shiftStep,
38544      size: __next40pxDefaultSize ? '__unstable-large' : 'default',
38545      __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),
38546      step: step
38547      // @ts-expect-error TODO: Investigate if the `null` value is necessary
38548      ,
38549      value: inputSliderValue
38550    }), allowReset && (0,external_React_.createElement)(ActionRightWrapper, null, (0,external_React_.createElement)(build_module_button, {
38551      className: "components-range-control__reset",
38552      disabled: disabled || value === undefined,
38553      variant: "secondary",
38554      size: "small",
38555      onClick: handleOnReset
38556    }, (0,external_wp_i18n_namespaceObject.__)('Reset')))));
38557  }
38558  
38559  /**
38560   * RangeControls are used to make selections from a range of incremental values.
38561   *
38562   * ```jsx
38563   * import { RangeControl } from '@wordpress/components';
38564   * import { useState } from '@wordpress/element';
38565   *
38566   * const MyRangeControl = () => {
38567   *   const [ isChecked, setChecked ] = useState( true );
38568   *   return (
38569   *     <RangeControl
38570   *       help="Please select how transparent you would like this."
38571   *       initialPosition={50}
38572   *       label="Opacity"
38573   *       max={100}
38574   *       min={0}
38575   *       onChange={() => {}}
38576   *     />
38577   *   );
38578   * };
38579   * ```
38580   */
38581  const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl);
38582  /* harmony default export */ const range_control = (RangeControl);
38583  
38584  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/styles.js
38585  
38586  /**
38587   * External dependencies
38588   */
38589  
38590  /**
38591   * Internal dependencies
38592   */
38593  
38594  
38595  
38596  
38597  
38598  
38599  
38600  
38601  
38602  
38603  const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
38604    target: "ez9hsf47"
38605  } : 0)(Container, "{width:", space(24), ";}" + ( true ? "" : 0));
38606  const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control,  true ? {
38607    target: "ez9hsf46"
38608  } : 0)("margin-left:", space(-2), ";width:5em;select:not( :focus )~", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;}" + ( true ? "" : 0));
38609  const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control,  true ? {
38610    target: "ez9hsf45"
38611  } : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0));
38612  
38613  // Make the Hue circle picker not go out of the bar.
38614  const interactiveHueStyles = `
38615  .react-colorful__interactive {
38616      width: calc( 100% - $space(2)} );
38617      margin-left: $space(1)};
38618  }`;
38619  const AuxiliaryColorArtefactWrapper = emotion_styled_base_browser_esm("div",  true ? {
38620    target: "ez9hsf44"
38621  } : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0));
38622  const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
38623    target: "ez9hsf43"
38624  } : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0));
38625  const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
38626    target: "ez9hsf42"
38627  } : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0));
38628  const ColorfulWrapper = emotion_styled_base_browser_esm("div",  true ? {
38629    target: "ez9hsf41"
38630  } : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0));
38631  const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
38632    target: "ez9hsf40"
38633  } : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0));
38634  
38635  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy.js
38636  
38637  /**
38638   * WordPress dependencies
38639   */
38640  
38641  const copy_copy = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
38642    xmlns: "http://www.w3.org/2000/svg",
38643    viewBox: "0 0 24 24"
38644  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
38645    fillRule: "evenodd",
38646    clipRule: "evenodd",
38647    d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"
38648  }));
38649  /* harmony default export */ const library_copy = (copy_copy);
38650  
38651  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js
38652  
38653  /**
38654   * WordPress dependencies
38655   */
38656  
38657  
38658  
38659  
38660  
38661  /**
38662   * Internal dependencies
38663   */
38664  
38665  
38666  const ColorCopyButton = props => {
38667    const {
38668      color,
38669      colorType
38670    } = props;
38671    const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null);
38672    const copyTimer = (0,external_wp_element_namespaceObject.useRef)();
38673    const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => {
38674      switch (colorType) {
38675        case 'hsl':
38676          {
38677            return color.toHslString();
38678          }
38679        case 'rgb':
38680          {
38681            return color.toRgbString();
38682          }
38683        default:
38684        case 'hex':
38685          {
38686            return color.toHex();
38687          }
38688      }
38689    }, () => {
38690      if (copyTimer.current) {
38691        clearTimeout(copyTimer.current);
38692      }
38693      setCopiedColor(color.toHex());
38694      copyTimer.current = setTimeout(() => {
38695        setCopiedColor(null);
38696        copyTimer.current = undefined;
38697      }, 3000);
38698    });
38699    (0,external_wp_element_namespaceObject.useEffect)(() => {
38700      // Clear copyTimer on component unmount.
38701      return () => {
38702        if (copyTimer.current) {
38703          clearTimeout(copyTimer.current);
38704        }
38705      };
38706    }, []);
38707    return (0,external_React_.createElement)(tooltip, {
38708      delay: 0,
38709      hideOnClick: false,
38710      text: copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy')
38711    }, (0,external_React_.createElement)(CopyButton, {
38712      size: "small",
38713      ref: copyRef,
38714      icon: library_copy,
38715      showTooltip: false
38716    }));
38717  };
38718  
38719  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js
38720  
38721  /**
38722   * Internal dependencies
38723   */
38724  
38725  
38726  
38727  
38728  
38729  
38730  const InputWithSlider = ({
38731    min,
38732    max,
38733    label,
38734    abbreviation,
38735    onChange,
38736    value
38737  }) => {
38738    const onNumberControlChange = newValue => {
38739      if (!newValue) {
38740        onChange(0);
38741        return;
38742      }
38743      if (typeof newValue === 'string') {
38744        onChange(parseInt(newValue, 10));
38745        return;
38746      }
38747      onChange(newValue);
38748    };
38749    return (0,external_React_.createElement)(h_stack_component, {
38750      spacing: 4
38751    }, (0,external_React_.createElement)(NumberControlWrapper, {
38752      min: min,
38753      max: max,
38754      label: label,
38755      hideLabelFromVision: true,
38756      value: value,
38757      onChange: onNumberControlChange,
38758      prefix: (0,external_React_.createElement)(spacer_component, {
38759        as: text_component,
38760        paddingLeft: space(4),
38761        color: COLORS.theme.accent,
38762        lineHeight: 1
38763      }, abbreviation),
38764      spinControls: "none",
38765      size: "__unstable-large"
38766    }), (0,external_React_.createElement)(styles_RangeControl, {
38767      __nextHasNoMarginBottom: true,
38768      label: label,
38769      hideLabelFromVision: true,
38770      min: min,
38771      max: max,
38772      value: value
38773      // @ts-expect-error
38774      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
38775      ,
38776      onChange: onChange,
38777      withInputField: false
38778    }));
38779  };
38780  
38781  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js
38782  
38783  /**
38784   * External dependencies
38785   */
38786  
38787  
38788  /**
38789   * Internal dependencies
38790   */
38791  
38792  const RgbInput = ({
38793    color,
38794    onChange,
38795    enableAlpha
38796  }) => {
38797    const {
38798      r,
38799      g,
38800      b,
38801      a
38802    } = color.toRgb();
38803    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(InputWithSlider, {
38804      min: 0,
38805      max: 255,
38806      label: "Red",
38807      abbreviation: "R",
38808      value: r,
38809      onChange: nextR => onChange(w({
38810        r: nextR,
38811        g,
38812        b,
38813        a
38814      }))
38815    }), (0,external_React_.createElement)(InputWithSlider, {
38816      min: 0,
38817      max: 255,
38818      label: "Green",
38819      abbreviation: "G",
38820      value: g,
38821      onChange: nextG => onChange(w({
38822        r,
38823        g: nextG,
38824        b,
38825        a
38826      }))
38827    }), (0,external_React_.createElement)(InputWithSlider, {
38828      min: 0,
38829      max: 255,
38830      label: "Blue",
38831      abbreviation: "B",
38832      value: b,
38833      onChange: nextB => onChange(w({
38834        r,
38835        g,
38836        b: nextB,
38837        a
38838      }))
38839    }), enableAlpha && (0,external_React_.createElement)(InputWithSlider, {
38840      min: 0,
38841      max: 100,
38842      label: "Alpha",
38843      abbreviation: "A",
38844      value: Math.trunc(a * 100),
38845      onChange: nextA => onChange(w({
38846        r,
38847        g,
38848        b,
38849        a: nextA / 100
38850      }))
38851    }));
38852  };
38853  
38854  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js
38855  
38856  /**
38857   * External dependencies
38858   */
38859  
38860  
38861  /**
38862   * WordPress dependencies
38863   */
38864  
38865  
38866  /**
38867   * Internal dependencies
38868   */
38869  
38870  const HslInput = ({
38871    color,
38872    onChange,
38873    enableAlpha
38874  }) => {
38875    const colorPropHSLA = (0,external_wp_element_namespaceObject.useMemo)(() => color.toHsl(), [color]);
38876    const [internalHSLA, setInternalHSLA] = (0,external_wp_element_namespaceObject.useState)({
38877      ...colorPropHSLA
38878    });
38879    const isInternalColorSameAsReceivedColor = color.isEqual(w(internalHSLA));
38880    (0,external_wp_element_namespaceObject.useEffect)(() => {
38881      if (!isInternalColorSameAsReceivedColor) {
38882        // Keep internal HSLA color up to date with the received color prop
38883        setInternalHSLA(colorPropHSLA);
38884      }
38885    }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
38886  
38887    // If the internal color is equal to the received color prop, we can use the
38888    // HSLA values from the local state which, compared to the received color prop,
38889    // retain more details about the actual H and S values that the user selected,
38890    // and thus allow for better UX when interacting with the H and S sliders.
38891    const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
38892    const updateHSLAValue = partialNewValue => {
38893      const nextOnChangeValue = w({
38894        ...colorValue,
38895        ...partialNewValue
38896      });
38897  
38898      // Fire `onChange` only if the resulting color is different from the
38899      // current one.
38900      // Otherwise, update the internal HSLA color to cause a re-render.
38901      if (!color.isEqual(nextOnChangeValue)) {
38902        onChange(nextOnChangeValue);
38903      } else {
38904        setInternalHSLA(prevHSLA => ({
38905          ...prevHSLA,
38906          ...partialNewValue
38907        }));
38908      }
38909    };
38910    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(InputWithSlider, {
38911      min: 0,
38912      max: 359,
38913      label: "Hue",
38914      abbreviation: "H",
38915      value: colorValue.h,
38916      onChange: nextH => {
38917        updateHSLAValue({
38918          h: nextH
38919        });
38920      }
38921    }), (0,external_React_.createElement)(InputWithSlider, {
38922      min: 0,
38923      max: 100,
38924      label: "Saturation",
38925      abbreviation: "S",
38926      value: colorValue.s,
38927      onChange: nextS => {
38928        updateHSLAValue({
38929          s: nextS
38930        });
38931      }
38932    }), (0,external_React_.createElement)(InputWithSlider, {
38933      min: 0,
38934      max: 100,
38935      label: "Lightness",
38936      abbreviation: "L",
38937      value: colorValue.l,
38938      onChange: nextL => {
38939        updateHSLAValue({
38940          l: nextL
38941        });
38942      }
38943    }), enableAlpha && (0,external_React_.createElement)(InputWithSlider, {
38944      min: 0,
38945      max: 100,
38946      label: "Alpha",
38947      abbreviation: "A",
38948      value: Math.trunc(100 * colorValue.a),
38949      onChange: nextA => {
38950        updateHSLAValue({
38951          a: nextA / 100
38952        });
38953      }
38954    }));
38955  };
38956  
38957  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js
38958  
38959  /**
38960   * External dependencies
38961   */
38962  
38963  
38964  /**
38965   * WordPress dependencies
38966   */
38967  
38968  
38969  /**
38970   * Internal dependencies
38971   */
38972  
38973  
38974  
38975  
38976  
38977  const HexInput = ({
38978    color,
38979    onChange,
38980    enableAlpha
38981  }) => {
38982    const handleChange = nextValue => {
38983      if (!nextValue) return;
38984      const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
38985      onChange(w(hexValue));
38986    };
38987    const stateReducer = (state, action) => {
38988      const nativeEvent = action.payload?.event?.nativeEvent;
38989      if ('insertFromPaste' !== nativeEvent?.inputType) {
38990        return {
38991          ...state
38992        };
38993      }
38994      const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
38995      return {
38996        ...state,
38997        value
38998      };
38999    };
39000    return (0,external_React_.createElement)(InputControl, {
39001      prefix: (0,external_React_.createElement)(spacer_component, {
39002        as: text_component,
39003        marginLeft: space(4),
39004        color: COLORS.theme.accent,
39005        lineHeight: 1
39006      }, "#"),
39007      value: color.toHex().slice(1).toUpperCase(),
39008      onChange: handleChange,
39009      maxLength: enableAlpha ? 9 : 7,
39010      label: (0,external_wp_i18n_namespaceObject.__)('Hex color'),
39011      hideLabelFromVision: true,
39012      size: "__unstable-large",
39013      __unstableStateReducer: stateReducer,
39014      __unstableInputWidth: "9em"
39015    });
39016  };
39017  
39018  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-input.js
39019  
39020  /**
39021   * Internal dependencies
39022   */
39023  
39024  
39025  
39026  const ColorInput = ({
39027    colorType,
39028    color,
39029    onChange,
39030    enableAlpha
39031  }) => {
39032    const props = {
39033      color,
39034      onChange,
39035      enableAlpha
39036    };
39037    switch (colorType) {
39038      case 'hsl':
39039        return (0,external_React_.createElement)(HslInput, {
39040          ...props
39041        });
39042      case 'rgb':
39043        return (0,external_React_.createElement)(RgbInput, {
39044          ...props
39045        });
39046      default:
39047      case 'hex':
39048        return (0,external_React_.createElement)(HexInput, {
39049          ...props
39050        });
39051    }
39052  };
39053  
39054  ;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.mjs
39055  function dist_u(){return(dist_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function dist_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function dist_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var dist_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},dist_f=function(e){return"touches"in e},dist_v=function(e){return e&&e.ownerDocument.defaultView||self},dist_d=function(e,r,t){var n=e.getBoundingClientRect(),o=dist_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:dist_s((o.pageX-(n.left+dist_v(e).pageXOffset))/n.width),top:dist_s((o.pageY-(n.top+dist_v(e).pageYOffset))/n.height)}},dist_h=function(e){!dist_f(e)&&e.preventDefault()},dist_m=external_React_.memo(function(o){var a=o.onMove,l=o.onKey,s=dist_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=dist_i(a),p=dist_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){dist_h(e),(dist_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(dist_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=dist_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(dist_h(r),!function(e,r){return r&&!dist_f(e)}(r,_.current)&&n)){if(dist_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(dist_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_.createElement("div",dist_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),dist_g=function(e){return e.filter(Boolean).join(" ")},dist_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=dist_g(["react-colorful__pointer",r.className]);return external_React_.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},dist_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},dist_x=function(e){return L(C(e))},C=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?dist_b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?dist_b(parseInt(e.substring(6,8),16)/255,2):1}},dist_E=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},dist_H=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?dist_N({h:dist_E(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_M=dist_H,dist_N=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},dist_w=function(e){return K(dist_I(e))},dist_y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:dist_b(e.h),s:dist_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:dist_b(o/2),a:dist_b(n,2)}},q=function(e){var r=dist_y(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},dist_k=function(e){var r=dist_y(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},dist_I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:dist_b(255*[n,u,l,l,c,n][i]),g:dist_b(255*[c,n,n,u,l,l][i]),b:dist_b(255*[l,l,c,n,n,u][i]),a:dist_b(o,2)}},dist_O=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?A({h:dist_E(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},dist_j=dist_O,z=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?L({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=z,D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(dist_b(255*o)):"";return"#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:dist_b(60*(u<0?u+6:u)),s:dist_b(a?l/a*100:0),v:dist_b(a/255*100),a:o}},A=function(e){return{h:dist_b(e.h),s:dist_b(e.s),v:dist_b(e.v),a:dist_b(e.a,2)}},dist_S=external_React_.memo(function(r){var t=r.hue,n=r.onChange,o=dist_g(["react-colorful__hue",r.className]);return external_React_.createElement("div",{className:o},external_React_.createElement(dist_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:dist_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":dist_b(t),"aria-valuemax":"360","aria-valuemin":"0"},external_React_.createElement(dist_p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=external_React_.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return external_React_.createElement("div",{className:"react-colorful__saturation",style:o},external_React_.createElement(dist_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:dist_s(t.s+100*e.left,0,100),v:dist_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+dist_b(t.s)+"%, Brightness "+dist_b(t.v)+"%"},external_React_.createElement(dist_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},P=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=dist_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var R,dist_V="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,dist_$=function(){return R||( true?__webpack_require__.nc:0)},G=function(e){R=e},J=new Map,Q=function(e){dist_V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=dist_$();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:dist_x,fromHsva:function(e){return dist_w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return e.createElement(U,dist_u({},r,{colorModel:W}))},ee=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+dist_k(Object.assign({},n,{a:0}))+", "+dist_k(Object.assign({},n,{a:1}))+")"},l=dist_g(["react-colorful__alpha",t]),u=dist_b(100*n.a);return external_React_.createElement("div",{className:l},external_React_.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_.createElement(dist_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:dist_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},external_React_.createElement(dist_p,{className:"react-colorful__alpha-pointer",left:n.a,color:dist_k(n)})))},re=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=dist_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=dist_g(["react-colorful",n]);return external_React_.createElement("div",dist_u({},s,{ref:f,className:m}),external_React_.createElement(T,{hsva:d,onChange:h}),external_React_.createElement(dist_S,{hue:d.h,onChange:h}),external_React_.createElement(ee,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},te={defaultColor:"0001",toHsva:dist_x,fromHsva:dist_w,equal:X},ne=function(r){return e.createElement(re,dist_u({},r,{colorModel:te}))},oe={defaultColor:{h:0,s:0,l:0,a:1},toHsva:dist_N,fromHsva:dist_y,equal:F},ae=function(r){return e.createElement(re,dist_u({},r,{colorModel:oe}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:dist_H,fromHsva:dist_k,equal:P},ue=function(r){return e.createElement(re,dist_u({},r,{colorModel:le}))},ce={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return dist_N({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=dist_y(e)).h,s:r.s,l:r.l};var r},equal:F},ie=function(r){return e.createElement(U,dist_u({},r,{colorModel:ce}))},se={defaultColor:"hsl(0, 0%, 0%)",toHsva:dist_M,fromHsva:q,equal:P},fe=function(r){return e.createElement(U,dist_u({},r,{colorModel:se}))},ve={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:A,equal:F},de=function(r){return e.createElement(re,dist_u({},r,{colorModel:ve}))},he={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:dist_O,fromHsva:function(e){var r=A(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:P},me=function(r){return e.createElement(re,dist_u({},r,{colorModel:he}))},ge={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=A(e);return{h:r.h,s:r.s,v:r.v}},equal:F},pe=function(r){return e.createElement(U,dist_u({},r,{colorModel:ge}))},be={defaultColor:"hsv(0, 0%, 0%)",toHsva:dist_j,fromHsva:function(e){var r=A(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:P},_e=function(r){return e.createElement(U,dist_u({},r,{colorModel:be}))},xe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:L,fromHsva:dist_I,equal:F},Ce=function(r){return e.createElement(re,dist_u({},r,{colorModel:xe}))},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:z,fromHsva:function(e){var r=dist_I(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:P},He=function(r){return external_React_.createElement(re,dist_u({},r,{colorModel:Ee}))},Me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return L({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=dist_I(e)).r,g:r.g,b:r.b};var r},equal:F},Ne=function(r){return e.createElement(U,dist_u({},r,{colorModel:Me}))},we={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var r=dist_I(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:P},ye=function(r){return external_React_.createElement(U,dist_u({},r,{colorModel:we}))},qe=/^#?([0-9A-F]{3,8})$/i,ke=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=dist_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=dist_i(s),C=dist_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",dist_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Ie=function(e){return"#"+e},Oe=function(r){var t=r.prefixed,n=r.alpha,o=dist_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=qe.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(ke,dist_u({},o,{escape:l,format:t?Ie:void 0,process:Ie,validate:i}))};
39056  //# sourceMappingURL=index.module.js.map
39057  
39058  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/picker.js
39059  
39060  /**
39061   * External dependencies
39062   */
39063  
39064  
39065  
39066  /**
39067   * WordPress dependencies
39068   */
39069  
39070  /**
39071   * Internal dependencies
39072   */
39073  
39074  /**
39075   * Track the start and the end of drag pointer events related to controlling
39076   * the picker's saturation / hue / alpha, and fire the corresponding callbacks.
39077   * This is particularly useful to implement synergies like the one with the
39078   * `Popover` component, where a pointer events "trap" is rendered while
39079   * the user is dragging the pointer to avoid potential interference with iframe
39080   * elements.
39081   *
39082   * @param props
39083   * @param props.containerEl
39084   * @param props.onDragStart
39085   * @param props.onDragEnd
39086   */
39087  const useOnPickerDrag = ({
39088    containerEl,
39089    onDragStart,
39090    onDragEnd
39091  }) => {
39092    const isDragging = (0,external_wp_element_namespaceObject.useRef)(false);
39093    const leftWhileDragging = (0,external_wp_element_namespaceObject.useRef)(false);
39094    (0,external_wp_element_namespaceObject.useEffect)(() => {
39095      if (!containerEl || !onDragStart && !onDragEnd) {
39096        return;
39097      }
39098      const interactiveElements = [containerEl.querySelector('.react-colorful__saturation'), containerEl.querySelector('.react-colorful__hue'), containerEl.querySelector('.react-colorful__alpha')].filter(el => !!el);
39099      if (interactiveElements.length === 0) {
39100        return;
39101      }
39102      const doc = containerEl.ownerDocument;
39103      const onPointerUp = event => {
39104        isDragging.current = false;
39105        leftWhileDragging.current = false;
39106        onDragEnd?.(event);
39107      };
39108      const onPointerDown = event => {
39109        isDragging.current = true;
39110        onDragStart?.(event);
39111      };
39112      const onPointerLeave = () => {
39113        leftWhileDragging.current = isDragging.current;
39114      };
39115  
39116      // Try to detect if the user released the pointer while away from the
39117      // current window. If the check is successfull, the dragEnd callback will
39118      // called as soon as the pointer re-enters the window (better late than never)
39119      const onPointerEnter = event => {
39120        const noPointerButtonsArePressed = event.buttons === 0;
39121        if (leftWhileDragging.current && noPointerButtonsArePressed) {
39122          onPointerUp(event);
39123        }
39124      };
39125  
39126      // The pointerdown event is added on the interactive elements,
39127      // while the remaining events are added on the document object since
39128      // the pointer wouldn't necessarily be hovering the initial interactive
39129      // element at that point.
39130      interactiveElements.forEach(el => el.addEventListener('pointerdown', onPointerDown));
39131      doc.addEventListener('pointerup', onPointerUp);
39132      doc.addEventListener('pointerenter', onPointerEnter);
39133      doc.addEventListener('pointerleave', onPointerLeave);
39134      return () => {
39135        interactiveElements.forEach(el => el.removeEventListener('pointerdown', onPointerDown));
39136        doc.removeEventListener('pointerup', onPointerUp);
39137        doc.removeEventListener('pointerenter', onPointerEnter);
39138        doc.removeEventListener('pointerleave', onPointerUp);
39139      };
39140    }, [onDragStart, onDragEnd, containerEl]);
39141  };
39142  const Picker = ({
39143    color,
39144    enableAlpha,
39145    onChange,
39146    onDragStart,
39147    onDragEnd,
39148    containerEl
39149  }) => {
39150    const Component = enableAlpha ? He : ye;
39151    const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]);
39152    useOnPickerDrag({
39153      containerEl,
39154      onDragStart,
39155      onDragEnd
39156    });
39157    return (0,external_React_.createElement)(Component, {
39158      color: rgbColor,
39159      onChange: nextColor => {
39160        onChange(w(nextColor));
39161      }
39162    });
39163  };
39164  
39165  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/component.js
39166  
39167  /**
39168   * External dependencies
39169   */
39170  
39171  
39172  
39173  
39174  /**
39175   * WordPress dependencies
39176   */
39177  
39178  
39179  
39180  
39181  /**
39182   * Internal dependencies
39183   */
39184  
39185  
39186  
39187  
39188  
39189  
39190  k([names]);
39191  const options = [{
39192    label: 'RGB',
39193    value: 'rgb'
39194  }, {
39195    label: 'HSL',
39196    value: 'hsl'
39197  }, {
39198    label: 'Hex',
39199    value: 'hex'
39200  }];
39201  const UnconnectedColorPicker = (props, forwardedRef) => {
39202    const {
39203      enableAlpha = false,
39204      color: colorProp,
39205      onChange,
39206      defaultValue = '#fff',
39207      copyFormat,
39208      // Context
39209      onPickerDragStart,
39210      onPickerDragEnd,
39211      ...divProps
39212    } = useContextSystem(props, 'ColorPicker');
39213    const [containerEl, setContainerEl] = (0,external_wp_element_namespaceObject.useState)(null);
39214    const containerRef = node => {
39215      setContainerEl(node);
39216    };
39217  
39218    // Use a safe default value for the color and remove the possibility of `undefined`.
39219    const [color, setColor] = useControlledValue({
39220      onChange,
39221      value: colorProp,
39222      defaultValue
39223    });
39224    const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => {
39225      return w(color || '');
39226    }, [color]);
39227    const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor);
39228    const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
39229      debouncedSetColor(nextValue.toHex());
39230    }, [debouncedSetColor]);
39231    const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex');
39232    return (0,external_React_.createElement)(ColorfulWrapper, {
39233      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef]),
39234      ...divProps
39235    }, (0,external_React_.createElement)(Picker, {
39236      containerEl: containerEl,
39237      onChange: handleChange,
39238      color: safeColordColor,
39239      enableAlpha: enableAlpha,
39240      onDragStart: onPickerDragStart,
39241      onDragEnd: onPickerDragEnd
39242    }), (0,external_React_.createElement)(AuxiliaryColorArtefactWrapper, null, (0,external_React_.createElement)(AuxiliaryColorArtefactHStackHeader, {
39243      justify: "space-between"
39244    }, (0,external_React_.createElement)(styles_SelectControl, {
39245      __nextHasNoMarginBottom: true,
39246      options: options,
39247      value: colorType,
39248      onChange: nextColorType => setColorType(nextColorType),
39249      label: (0,external_wp_i18n_namespaceObject.__)('Color format'),
39250      hideLabelFromVision: true
39251    }), (0,external_React_.createElement)(ColorCopyButton, {
39252      color: safeColordColor,
39253      colorType: copyFormat || colorType
39254    })), (0,external_React_.createElement)(ColorInputWrapper, {
39255      direction: "column",
39256      gap: 2
39257    }, (0,external_React_.createElement)(ColorInput, {
39258      colorType: colorType,
39259      color: safeColordColor,
39260      onChange: handleChange,
39261      enableAlpha: enableAlpha
39262    }))));
39263  };
39264  const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
39265  /* harmony default export */ const color_picker_component = (ColorPicker);
39266  
39267  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js
39268  /**
39269   * External dependencies
39270   */
39271  
39272  
39273  
39274  /**
39275   * WordPress dependencies
39276   */
39277  
39278  
39279  /**
39280   * Internal dependencies
39281   */
39282  
39283  function isLegacyProps(props) {
39284    return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof props.color?.hex === 'string';
39285  }
39286  function getColorFromLegacyProps(color) {
39287    if (color === undefined) return;
39288    if (typeof color === 'string') return color;
39289    if (color.hex) return color.hex;
39290    return undefined;
39291  }
39292  const transformColorStringToLegacyColor = memize(color => {
39293    const colordColor = w(color);
39294    const hex = colordColor.toHex();
39295    const rgb = colordColor.toRgb();
39296    const hsv = colordColor.toHsv();
39297    const hsl = colordColor.toHsl();
39298    return {
39299      hex,
39300      rgb,
39301      hsv,
39302      hsl,
39303      source: 'hex',
39304      oldHue: hsl.h
39305    };
39306  });
39307  function use_deprecated_props_useDeprecatedProps(props) {
39308    const {
39309      onChangeComplete
39310    } = props;
39311    const legacyChangeHandler = (0,external_wp_element_namespaceObject.useCallback)(color => {
39312      onChangeComplete(transformColorStringToLegacyColor(color));
39313    }, [onChangeComplete]);
39314    if (isLegacyProps(props)) {
39315      return {
39316        color: getColorFromLegacyProps(props.color),
39317        enableAlpha: !props.disableAlpha,
39318        onChange: legacyChangeHandler
39319      };
39320    }
39321    return {
39322      ...props,
39323      color: props.color,
39324      enableAlpha: props.enableAlpha,
39325      onChange: props.onChange
39326    };
39327  }
39328  
39329  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js
39330  
39331  /**
39332   * Internal dependencies
39333   */
39334  
39335  
39336  const LegacyAdapter = props => {
39337    return (0,external_React_.createElement)(color_picker_component, {
39338      ...use_deprecated_props_useDeprecatedProps(props)
39339    });
39340  };
39341  
39342  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-context.js
39343  /**
39344   * WordPress dependencies
39345   */
39346  
39347  
39348  /**
39349   * Internal dependencies
39350   */
39351  
39352  const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({});
39353  
39354  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js
39355  
39356  /**
39357   * WordPress dependencies
39358   */
39359  
39360  const check = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
39361    xmlns: "http://www.w3.org/2000/svg",
39362    viewBox: "0 0 24 24"
39363  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
39364    d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
39365  }));
39366  /* harmony default export */ const library_check = (check);
39367  
39368  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option.js
39369  
39370  /**
39371   * External dependencies
39372   */
39373  
39374  /**
39375   * WordPress dependencies
39376   */
39377  
39378  
39379  
39380  
39381  /**
39382   * Internal dependencies
39383   */
39384  
39385  
39386  
39387  
39388  function UnforwardedOptionAsButton(props, forwardedRef) {
39389    const {
39390      isPressed,
39391      ...additionalProps
39392    } = props;
39393    return (0,external_React_.createElement)(build_module_button, {
39394      ...additionalProps,
39395      "aria-pressed": isPressed,
39396      ref: forwardedRef
39397    });
39398  }
39399  const OptionAsButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsButton);
39400  function UnforwardedOptionAsOption(props, forwardedRef) {
39401    const {
39402      id,
39403      isSelected,
39404      compositeStore,
39405      ...additionalProps
39406    } = props;
39407    const activeId = compositeStore.useState('activeId');
39408    if (isSelected && !activeId) {
39409      compositeStore.setActiveId(id);
39410    }
39411    return (0,external_React_.createElement)(CompositeItem, {
39412      render: (0,external_React_.createElement)(build_module_button, {
39413        ...additionalProps,
39414        role: "option",
39415        "aria-selected": !!isSelected,
39416        ref: forwardedRef
39417      }),
39418      store: compositeStore,
39419      id: id
39420    });
39421  }
39422  const OptionAsOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsOption);
39423  function Option({
39424    className,
39425    isSelected,
39426    selectedIconProps = {},
39427    tooltipText,
39428    ...additionalProps
39429  }) {
39430    const {
39431      baseId,
39432      compositeStore
39433    } = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext);
39434    const id = (0,external_wp_compose_namespaceObject.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
39435    const commonProps = {
39436      id,
39437      className: 'components-circular-option-picker__option',
39438      ...additionalProps
39439    };
39440    const optionControl = compositeStore ? (0,external_React_.createElement)(OptionAsOption, {
39441      ...commonProps,
39442      compositeStore: compositeStore,
39443      isSelected: isSelected
39444    }) : (0,external_React_.createElement)(OptionAsButton, {
39445      ...commonProps,
39446      isPressed: isSelected
39447    });
39448    return (0,external_React_.createElement)("div", {
39449      className: classnames_default()(className, 'components-circular-option-picker__option-wrapper')
39450    }, tooltipText ? (0,external_React_.createElement)(tooltip, {
39451      text: tooltipText
39452    }, optionControl) : optionControl, isSelected && (0,external_React_.createElement)(icons_build_module_icon, {
39453      icon: library_check,
39454      ...selectedIconProps
39455    }));
39456  }
39457  
39458  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-option-group.js
39459  
39460  /**
39461   * External dependencies
39462   */
39463  
39464  
39465  /**
39466   * Internal dependencies
39467   */
39468  
39469  function OptionGroup({
39470    className,
39471    options,
39472    ...additionalProps
39473  }) {
39474    const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined;
39475    return (0,external_React_.createElement)("div", {
39476      ...additionalProps,
39477      role: role,
39478      className: classnames_default()('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
39479    }, options);
39480  }
39481  
39482  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker-actions.js
39483  
39484  /**
39485   * External dependencies
39486   */
39487  
39488  
39489  /**
39490   * Internal dependencies
39491   */
39492  
39493  
39494  function DropdownLinkAction({
39495    buttonProps,
39496    className,
39497    dropdownProps,
39498    linkText
39499  }) {
39500    return (0,external_React_.createElement)(dropdown, {
39501      className: classnames_default()('components-circular-option-picker__dropdown-link-action', className),
39502      renderToggle: ({
39503        isOpen,
39504        onToggle
39505      }) => (0,external_React_.createElement)(build_module_button, {
39506        "aria-expanded": isOpen,
39507        "aria-haspopup": "true",
39508        onClick: onToggle,
39509        variant: "link",
39510        ...buttonProps
39511      }, linkText),
39512      ...dropdownProps
39513    });
39514  }
39515  function ButtonAction({
39516    className,
39517    children,
39518    ...additionalProps
39519  }) {
39520    return (0,external_React_.createElement)(build_module_button, {
39521      className: classnames_default()('components-circular-option-picker__clear', className),
39522      variant: "tertiary",
39523      ...additionalProps
39524    }, children);
39525  }
39526  
39527  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/circular-option-picker.js
39528  
39529  /**
39530   * External dependencies
39531   */
39532  
39533  
39534  /**
39535   * WordPress dependencies
39536   */
39537  
39538  
39539  
39540  /**
39541   * Internal dependencies
39542   */
39543  
39544  
39545  
39546  
39547  
39548  
39549  /**
39550   *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
39551   *
39552   * ```jsx
39553   * import { CircularOptionPicker } from '../circular-option-picker';
39554   * import { useState } from '@wordpress/element';
39555   *
39556   * const Example = () => {
39557   *     const [ currentColor, setCurrentColor ] = useState();
39558   *     const colors = [
39559   *         { color: '#f00', name: 'Red' },
39560   *         { color: '#0f0', name: 'Green' },
39561   *         { color: '#00f', name: 'Blue' },
39562   *     ];
39563   *     const colorOptions = (
39564   *         <>
39565   *             { colors.map( ( { color, name }, index ) => {
39566   *                 return (
39567   *                     <CircularOptionPicker.Option
39568   *                         key={ `${ color }-${ index }` }
39569   *                         tooltipText={ name }
39570   *                         style={ { backgroundColor: color, color } }
39571   *                         isSelected={ index === currentColor }
39572   *                         onClick={ () => setCurrentColor( index ) }
39573   *                         aria-label={ name }
39574   *                     />
39575   *                 );
39576   *             } ) }
39577   *         </>
39578   *     );
39579   *     return (
39580   *         <CircularOptionPicker
39581   *                 options={ colorOptions }
39582   *                 actions={
39583   *                     <CircularOptionPicker.ButtonAction
39584   *                         onClick={ () => setCurrentColor( undefined ) }
39585   *                     >
39586   *                         { 'Clear' }
39587   *                     </CircularOptionPicker.ButtonAction>
39588   *                 }
39589   *             />
39590   *     );
39591   * };
39592   * ```
39593   */
39594  
39595  function ListboxCircularOptionPicker(props) {
39596    const {
39597      actions,
39598      options,
39599      baseId,
39600      className,
39601      loop = true,
39602      children,
39603      ...additionalProps
39604    } = props;
39605    const compositeStore = useCompositeStore({
39606      focusLoop: loop,
39607      rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
39608    });
39609    const compositeContext = {
39610      baseId,
39611      compositeStore
39612    };
39613    return (0,external_React_.createElement)("div", {
39614      className: className
39615    }, (0,external_React_.createElement)(CircularOptionPickerContext.Provider, {
39616      value: compositeContext
39617    }, (0,external_React_.createElement)(Composite, {
39618      ...additionalProps,
39619      id: baseId,
39620      store: compositeStore,
39621      role: 'listbox'
39622    }, options), children, actions));
39623  }
39624  function ButtonsCircularOptionPicker(props) {
39625    const {
39626      actions,
39627      options,
39628      children,
39629      baseId,
39630      ...additionalProps
39631    } = props;
39632    return (0,external_React_.createElement)("div", {
39633      ...additionalProps,
39634      id: baseId
39635    }, (0,external_React_.createElement)(CircularOptionPickerContext.Provider, {
39636      value: {
39637        baseId
39638      }
39639    }, options, children, actions));
39640  }
39641  function CircularOptionPicker(props) {
39642    const {
39643      asButtons,
39644      actions: actionsProp,
39645      options: optionsProp,
39646      children,
39647      className,
39648      ...additionalProps
39649    } = props;
39650    const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);
39651    const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
39652    const actions = actionsProp ? (0,external_React_.createElement)("div", {
39653      className: "components-circular-option-picker__custom-clear-wrapper"
39654    }, actionsProp) : undefined;
39655    const options = (0,external_React_.createElement)("div", {
39656      className: 'components-circular-option-picker__swatches'
39657    }, optionsProp);
39658    return (0,external_React_.createElement)(OptionPickerImplementation, {
39659      ...additionalProps,
39660      baseId: baseId,
39661      className: classnames_default()('components-circular-option-picker', className),
39662      actions: actions,
39663      options: options
39664    }, children);
39665  }
39666  CircularOptionPicker.Option = Option;
39667  CircularOptionPicker.OptionGroup = OptionGroup;
39668  CircularOptionPicker.ButtonAction = ButtonAction;
39669  CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
39670  /* harmony default export */ const circular_option_picker = (CircularOptionPicker);
39671  
39672  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js
39673  /**
39674   * Internal dependencies
39675   */
39676  
39677  
39678  
39679  
39680  /* harmony default export */ const build_module_circular_option_picker = (circular_option_picker);
39681  
39682  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/hook.js
39683  /**
39684   * Internal dependencies
39685   */
39686  
39687  
39688  
39689  function useVStack(props) {
39690    const {
39691      expanded = false,
39692      alignment = 'stretch',
39693      ...otherProps
39694    } = useContextSystem(props, 'VStack');
39695    const hStackProps = useHStack({
39696      direction: 'column',
39697      expanded,
39698      alignment,
39699      ...otherProps
39700    });
39701    return hStackProps;
39702  }
39703  
39704  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/component.js
39705  
39706  /**
39707   * External dependencies
39708   */
39709  
39710  /**
39711   * Internal dependencies
39712   */
39713  
39714  
39715  
39716  
39717  function UnconnectedVStack(props, forwardedRef) {
39718    const vStackProps = useVStack(props);
39719    return (0,external_React_.createElement)(component, {
39720      ...vStackProps,
39721      ref: forwardedRef
39722    });
39723  }
39724  
39725  /**
39726   * `VStack` (or Vertical Stack) is a layout component that arranges child
39727   * elements in a vertical line.
39728   *
39729   * `VStack` can render anything inside.
39730   *
39731   * ```jsx
39732   * import {
39733   *     __experimentalText as Text,
39734   *     __experimentalVStack as VStack,
39735   * } from `@wordpress/components`;
39736   *
39737   * function Example() {
39738   *     return (
39739   *         <VStack>
39740   *             <Text>Code</Text>
39741   *             <Text>is</Text>
39742   *             <Text>Poetry</Text>
39743   *         </VStack>
39744   *     );
39745   * }
39746   * ```
39747   */
39748  const VStack = contextConnect(UnconnectedVStack, 'VStack');
39749  /* harmony default export */ const v_stack_component = (VStack);
39750  
39751  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/component.js
39752  
39753  /**
39754   * External dependencies
39755   */
39756  
39757  /**
39758   * Internal dependencies
39759   */
39760  
39761  
39762  
39763  
39764  function UnconnectedTruncate(props, forwardedRef) {
39765    const truncateProps = useTruncate(props);
39766    return (0,external_React_.createElement)(component, {
39767      as: "span",
39768      ...truncateProps,
39769      ref: forwardedRef
39770    });
39771  }
39772  
39773  /**
39774   * `Truncate` is a typography primitive that trims text content.
39775   * For almost all cases, it is recommended that `Text`, `Heading`, or
39776   * `Subheading` is used to render text content. However,`Truncate` is
39777   * available for custom implementations.
39778   *
39779   * ```jsx
39780   * import { __experimentalTruncate as Truncate } from `@wordpress/components`;
39781   *
39782   * function Example() {
39783   *     return (
39784   *         <Truncate>
39785   *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
39786   *             neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
39787   *             mollis mi. Morbi id elementum massa.
39788   *         </Truncate>
39789   *     );
39790   * }
39791   * ```
39792   */
39793  const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate');
39794  /* harmony default export */ const truncate_component = (component_Truncate);
39795  
39796  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/hook.js
39797  /**
39798   * Internal dependencies
39799   */
39800  
39801  
39802  
39803  
39804  
39805  function useHeading(props) {
39806    const {
39807      as: asProp,
39808      level = 2,
39809      color = COLORS.gray[900],
39810      isBlock = true,
39811      weight = config_values.fontWeightHeading,
39812      ...otherProps
39813    } = useContextSystem(props, 'Heading');
39814    const as = asProp || `h$level}`;
39815    const a11yProps = {};
39816    if (typeof as === 'string' && as[0] !== 'h') {
39817      // If not a semantic `h` element, add a11y props:
39818      a11yProps.role = 'heading';
39819      a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;
39820    }
39821    const textProps = useText({
39822      color,
39823      isBlock,
39824      weight,
39825      size: getHeadingFontSize(level),
39826      ...otherProps
39827    });
39828    return {
39829      ...textProps,
39830      ...a11yProps,
39831      as
39832    };
39833  }
39834  
39835  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/component.js
39836  
39837  /**
39838   * External dependencies
39839   */
39840  
39841  /**
39842   * Internal dependencies
39843   */
39844  
39845  
39846  
39847  
39848  function UnconnectedHeading(props, forwardedRef) {
39849    const headerProps = useHeading(props);
39850    return (0,external_React_.createElement)(component, {
39851      ...headerProps,
39852      ref: forwardedRef
39853    });
39854  }
39855  
39856  /**
39857   * `Heading` renders headings and titles using the library's typography system.
39858   *
39859   * ```jsx
39860   * import { __experimentalHeading as Heading } from "@wordpress/components";
39861   *
39862   * function Example() {
39863   *   return <Heading>Code is Poetry</Heading>;
39864   * }
39865   * ```
39866   */
39867  const Heading = contextConnect(UnconnectedHeading, 'Heading');
39868  /* harmony default export */ const heading_component = (Heading);
39869  
39870  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/styles.js
39871  
39872  function 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)."; }
39873  /**
39874   * External dependencies
39875   */
39876  
39877  /**
39878   * Internal dependencies
39879   */
39880  
39881  const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
39882    target: "ev9wop70"
39883  } : 0)( true ? {
39884    name: "13lxv2o",
39885    styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}"
39886  } : 0);
39887  
39888  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/styles.js
39889  
39890  /**
39891   * External dependencies
39892   */
39893  
39894  /**
39895   * Internal dependencies
39896   */
39897  
39898  const padding = ({
39899    paddingSize = 'small'
39900  }) => {
39901    if (paddingSize === 'none') return;
39902    const paddingValues = {
39903      small: space(2),
39904      medium: space(4)
39905    };
39906    return /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + ( true ? "" : 0),  true ? "" : 0);
39907  };
39908  const DropdownContentWrapperDiv = emotion_styled_base_browser_esm("div",  true ? {
39909    target: "eovvns30"
39910  } : 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));
39911  
39912  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/dropdown-content-wrapper.js
39913  
39914  /**
39915   * External dependencies
39916   */
39917  
39918  /**
39919   * Internal dependencies
39920   */
39921  
39922  
39923  
39924  function UnconnectedDropdownContentWrapper(props, forwardedRef) {
39925    const {
39926      paddingSize = 'small',
39927      ...derivedProps
39928    } = useContextSystem(props, 'DropdownContentWrapper');
39929    return (0,external_React_.createElement)(DropdownContentWrapperDiv, {
39930      ...derivedProps,
39931      paddingSize: paddingSize,
39932      ref: forwardedRef
39933    });
39934  }
39935  
39936  /**
39937   * A convenience wrapper for the `renderContent` when you want to apply
39938   * different padding. (Default is `paddingSize="small"`).
39939   *
39940   * ```jsx
39941   * import {
39942   *   Dropdown,
39943   *   __experimentalDropdownContentWrapper as DropdownContentWrapper,
39944   * } from '@wordpress/components';
39945   *
39946   * <Dropdown
39947   *   renderContent={ () => (
39948   *     <DropdownContentWrapper paddingSize="medium">
39949   *       My dropdown content
39950   *     </DropdownContentWrapper>
39951   * ) }
39952   * />
39953   * ```
39954   */
39955  const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');
39956  /* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper);
39957  
39958  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/utils.js
39959  /**
39960   * External dependencies
39961   */
39962  
39963  
39964  
39965  
39966  /**
39967   * WordPress dependencies
39968   */
39969  
39970  
39971  /**
39972   * Internal dependencies
39973   */
39974  
39975  k([names, a11y]);
39976  const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
39977    if (!currentValue) {
39978      return '';
39979    }
39980    const currentValueIsCssVariable = /^var\(/.test(currentValue);
39981    const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex();
39982  
39983    // Normalize format of `colors` to simplify the following loop
39984  
39985    const colorPalettes = showMultiplePalettes ? colors : [{
39986      colors: colors
39987    }];
39988    for (const {
39989      colors: paletteColors
39990    } of colorPalettes) {
39991      for (const {
39992        name: colorName,
39993        color: colorValue
39994      } of paletteColors) {
39995        const normalizedColorValue = currentValueIsCssVariable ? colorValue : w(colorValue).toHex();
39996        if (normalizedCurrentValue === normalizedColorValue) {
39997          return colorName;
39998        }
39999      }
40000    }
40001  
40002    // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
40003    return (0,external_wp_i18n_namespaceObject.__)('Custom');
40004  };
40005  
40006  // The PaletteObject type has a `colors` property (an array of ColorObject),
40007  // while the ColorObject type has a `color` property (the CSS color value).
40008  const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
40009  const isMultiplePaletteArray = arr => {
40010    return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
40011  };
40012  
40013  /**
40014   * Transform a CSS variable used as background color into the color value itself.
40015   *
40016   * @param value   The color value that may be a CSS variable.
40017   * @param element The element for which to get the computed style.
40018   * @return The background color value computed from a element.
40019   */
40020  const normalizeColorValue = (value, element) => {
40021    const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
40022    if (!currentValueIsCssVariable || element === null) {
40023      return value;
40024    }
40025    const {
40026      ownerDocument
40027    } = element;
40028    const {
40029      defaultView
40030    } = ownerDocument;
40031    const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;
40032    return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value;
40033  };
40034  
40035  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/index.js
40036  
40037  /**
40038   * External dependencies
40039   */
40040  
40041  
40042  
40043  
40044  
40045  
40046  /**
40047   * WordPress dependencies
40048   */
40049  
40050  
40051  
40052  
40053  /**
40054   * Internal dependencies
40055   */
40056  
40057  
40058  
40059  
40060  
40061  
40062  
40063  
40064  k([names, a11y]);
40065  function SinglePalette({
40066    className,
40067    clearColor,
40068    colors,
40069    onChange,
40070    value,
40071    ...additionalProps
40072  }) {
40073    const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
40074      return colors.map(({
40075        color,
40076        name
40077      }, index) => {
40078        const colordColor = w(color);
40079        const isSelected = value === color;
40080        return (0,external_React_.createElement)(build_module_circular_option_picker.Option, {
40081          key: `$color}-$index}`,
40082          isSelected: isSelected,
40083          selectedIconProps: isSelected ? {
40084            fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
40085          } : {},
40086          tooltipText: name ||
40087          // translators: %s: color hex code e.g: "#f00".
40088          (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color),
40089          style: {
40090            backgroundColor: color,
40091            color
40092          },
40093          onClick: isSelected ? clearColor : () => onChange(color, index),
40094          "aria-label": name ?
40095          // translators: %s: The name of the color e.g: "vivid red".
40096          (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) :
40097          // translators: %s: color hex code e.g: "#f00".
40098          (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color)
40099        });
40100      });
40101    }, [colors, value, onChange, clearColor]);
40102    return (0,external_React_.createElement)(build_module_circular_option_picker.OptionGroup, {
40103      className: className,
40104      options: colorOptions,
40105      ...additionalProps
40106    });
40107  }
40108  function MultiplePalettes({
40109    className,
40110    clearColor,
40111    colors,
40112    onChange,
40113    value,
40114    headingLevel
40115  }) {
40116    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette');
40117    if (colors.length === 0) {
40118      return null;
40119    }
40120    return (0,external_React_.createElement)(v_stack_component, {
40121      spacing: 3,
40122      className: className
40123    }, colors.map(({
40124      name,
40125      colors: colorPalette
40126    }, index) => {
40127      const id = `$instanceId}-$index}`;
40128      return (0,external_React_.createElement)(v_stack_component, {
40129        spacing: 2,
40130        key: index
40131      }, (0,external_React_.createElement)(ColorHeading, {
40132        id: id,
40133        level: headingLevel
40134      }, name), (0,external_React_.createElement)(SinglePalette, {
40135        clearColor: clearColor,
40136        colors: colorPalette,
40137        onChange: newColor => onChange(newColor, index),
40138        value: value,
40139        "aria-labelledby": id
40140      }));
40141    }));
40142  }
40143  function CustomColorPickerDropdown({
40144    isRenderedInSidebar,
40145    popoverProps: receivedPopoverProps,
40146    ...props
40147  }) {
40148    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
40149      shift: true,
40150      // Disabling resize as it would otherwise cause the popover to show
40151      // scrollbars while dragging the color picker's handle close to the
40152      // popover edge.
40153      resize: false,
40154      ...(isRenderedInSidebar ? {
40155        // When in the sidebar: open to the left (stacking),
40156        // leaving the same gap as the parent popover.
40157        placement: 'left-start',
40158        offset: 34
40159      } : {
40160        // Default behavior: open below the anchor
40161        placement: 'bottom',
40162        offset: 8
40163      }),
40164      ...receivedPopoverProps
40165    }), [isRenderedInSidebar, receivedPopoverProps]);
40166    return (0,external_React_.createElement)(dropdown, {
40167      contentClassName: "components-color-palette__custom-color-dropdown-content",
40168      popoverProps: popoverProps,
40169      ...props
40170    });
40171  }
40172  function UnforwardedColorPalette(props, forwardedRef) {
40173    const {
40174      asButtons,
40175      loop,
40176      clearable = true,
40177      colors = [],
40178      disableCustomColors = false,
40179      enableAlpha = false,
40180      onChange,
40181      value,
40182      __experimentalIsRenderedInSidebar = false,
40183      headingLevel = 2,
40184      'aria-label': ariaLabel,
40185      'aria-labelledby': ariaLabelledby,
40186      ...additionalProps
40187    } = props;
40188    const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value);
40189    const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]);
40190    const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {
40191      setNormalizedColorValue(normalizeColorValue(value, node));
40192    }, [value]);
40193    const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
40194    const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
40195    const renderCustomColorPicker = () => (0,external_React_.createElement)(dropdown_content_wrapper, {
40196      paddingSize: "none"
40197    }, (0,external_React_.createElement)(LegacyAdapter, {
40198      color: normalizedColorValue,
40199      onChange: color => onChange(color),
40200      enableAlpha: enableAlpha
40201    }));
40202    const isHex = value?.startsWith('#');
40203  
40204    // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
40205    const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
40206    const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)(
40207    // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
40208    (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.');
40209    const paletteCommonProps = {
40210      clearColor,
40211      onChange,
40212      value
40213    };
40214    const actions = !!clearable && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, {
40215      onClick: clearColor
40216    }, (0,external_wp_i18n_namespaceObject.__)('Clear'));
40217    let metaProps;
40218    if (asButtons) {
40219      metaProps = {
40220        asButtons: true
40221      };
40222    } else {
40223      const _metaProps = {
40224        asButtons: false,
40225        loop
40226      };
40227      if (ariaLabel) {
40228        metaProps = {
40229          ..._metaProps,
40230          'aria-label': ariaLabel
40231        };
40232      } else if (ariaLabelledby) {
40233        metaProps = {
40234          ..._metaProps,
40235          'aria-labelledby': ariaLabelledby
40236        };
40237      } else {
40238        metaProps = {
40239          ..._metaProps,
40240          'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
40241        };
40242      }
40243    }
40244    return (0,external_React_.createElement)(v_stack_component, {
40245      spacing: 3,
40246      ref: forwardedRef,
40247      ...additionalProps
40248    }, !disableCustomColors && (0,external_React_.createElement)(CustomColorPickerDropdown, {
40249      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
40250      renderContent: renderCustomColorPicker,
40251      renderToggle: ({
40252        isOpen,
40253        onToggle
40254      }) => (0,external_React_.createElement)(v_stack_component, {
40255        className: "components-color-palette__custom-color-wrapper",
40256        spacing: 0
40257      }, (0,external_React_.createElement)("button", {
40258        ref: customColorPaletteCallbackRef,
40259        className: "components-color-palette__custom-color-button",
40260        "aria-expanded": isOpen,
40261        "aria-haspopup": "true",
40262        onClick: onToggle,
40263        "aria-label": customColorAccessibleLabel,
40264        style: {
40265          background: value
40266        },
40267        type: "button"
40268      }), (0,external_React_.createElement)(v_stack_component, {
40269        className: "components-color-palette__custom-color-text-wrapper",
40270        spacing: 0.5
40271      }, (0,external_React_.createElement)(truncate_component, {
40272        className: "components-color-palette__custom-color-name"
40273      }, value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected')), (0,external_React_.createElement)(truncate_component, {
40274        className: classnames_default()('components-color-palette__custom-color-value', {
40275          'components-color-palette__custom-color-value--is-hex': isHex
40276        })
40277      }, displayValue)))
40278    }), (0,external_React_.createElement)(build_module_circular_option_picker, {
40279      ...metaProps,
40280      actions: actions,
40281      options: hasMultipleColorOrigins ? (0,external_React_.createElement)(MultiplePalettes, {
40282        ...paletteCommonProps,
40283        headingLevel: headingLevel,
40284        colors: colors,
40285        value: value
40286      }) : (0,external_React_.createElement)(SinglePalette, {
40287        ...paletteCommonProps,
40288        colors: colors,
40289        value: value
40290      })
40291    }));
40292  }
40293  
40294  /**
40295   * Allows the user to pick a color from a list of pre-defined color entries.
40296   *
40297   * ```jsx
40298   * import { ColorPalette } from '@wordpress/components';
40299   * import { useState } from '@wordpress/element';
40300   *
40301   * const MyColorPalette = () => {
40302   *   const [ color, setColor ] = useState ( '#f00' )
40303   *   const colors = [
40304   *     { name: 'red', color: '#f00' },
40305   *     { name: 'white', color: '#fff' },
40306   *     { name: 'blue', color: '#00f' },
40307   *   ];
40308   *   return (
40309   *     <ColorPalette
40310   *       colors={ colors }
40311   *       value={ color }
40312   *       onChange={ ( color ) => setColor( color ) }
40313   *     />
40314   *   );
40315   * } );
40316   * ```
40317   */
40318  const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette);
40319  /* harmony default export */ const color_palette = (ColorPalette);
40320  
40321  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/styles/unit-control-styles.js
40322  
40323  /**
40324   * External dependencies
40325   */
40326  
40327  /**
40328   * Internal dependencies
40329   */
40330  
40331  
40332  
40333  
40334  
40335  // Using `selectSize` instead of `size` to avoid a type conflict with the
40336  // `size` HTML attribute of the `select` element.
40337  
40338  // TODO: Resolve need to use &&& to increase specificity
40339  // https://github.com/WordPress/gutenberg/issues/18483
40340  
40341  const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
40342    target: "e1bagdl32"
40343  } : 0)("&&&{input{display:block;width:100%;}", BackdropUI, "{transition:box-shadow 0.1s linear;}}" + ( true ? "" : 0));
40344  const baseUnitLabelStyles = ({
40345    selectSize
40346  }) => {
40347    const sizes = {
40348      small: /*#__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),
40349      default: /*#__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)
40350    };
40351    return sizes[selectSize];
40352  };
40353  const UnitLabel = emotion_styled_base_browser_esm("div",  true ? {
40354    target: "e1bagdl31"
40355  } : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0));
40356  const unitSelectSizes = ({
40357    selectSize = 'default'
40358  }) => {
40359    const sizes = {
40360      small: /*#__PURE__*/emotion_react_browser_esm_css("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", rtl({
40361        borderTopLeftRadius: 0,
40362        borderBottomLeftRadius: 0
40363      })(), " &: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),
40364      default: /*#__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)
40365    };
40366    return sizes[selectSize];
40367  };
40368  const UnitSelect = emotion_styled_base_browser_esm("select",  true ? {
40369    target: "e1bagdl30"
40370  } : 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));
40371  
40372  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/styles.js
40373  function 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)."; }
40374  /**
40375   * External dependencies
40376   */
40377  
40378  
40379  /**
40380   * Internal dependencies
40381   */
40382  
40383  
40384  
40385  
40386  const styles_labelStyles =  true ? {
40387    name: "f3vz0n",
40388    styles: "font-weight:500"
40389  } : 0;
40390  const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0),  true ? "" : 0);
40391  const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0),  true ? "" : 0);
40392  const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0),  true ? "" : 0);
40393  
40394  /*
40395   * This style is only applied to the UnitControl wrapper when the border width
40396   * field should be a set width. Omitting this allows the UnitControl &
40397   * RangeControl to share the available width in a 40/60 split respectively.
40398   */
40399  const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0),  true ? "" : 0);
40400  const wrapperHeight = size => {
40401    return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0),  true ? "" : 0);
40402  };
40403  const borderControlDropdown = /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;", rtl({
40404    borderRadius: `2px 0 0 2px`
40405  }, {
40406    borderRadius: `0 2px 2px 0`
40407  })(), " 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);
40408  const colorIndicatorBorder = border => {
40409    const {
40410      color,
40411      style
40412    } = border || {};
40413    const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined;
40414    return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0),  true ? "" : 0);
40415  };
40416  const colorIndicatorWrapper = (border, size) => {
40417    const {
40418      style
40419    } = border || {};
40420    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);
40421  };
40422  
40423  // Must equal $color-palette-circle-size from:
40424  // @wordpress/components/src/circular-option-picker/style.scss
40425  const swatchSize = 28;
40426  const swatchGap = 12;
40427  const 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);
40428  const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
40429  const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
40430  const 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);
40431  const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({
40432    marginRight: space(3)
40433  })(), ";" + ( true ? "" : 0),  true ? "" : 0);
40434  
40435  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/utils.js
40436  /**
40437   * WordPress dependencies
40438   */
40439  
40440  
40441  
40442  /**
40443   * Internal dependencies
40444   */
40445  
40446  const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web';
40447  const allUnits = {
40448    px: {
40449      value: 'px',
40450      label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
40451      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'),
40452      step: 1
40453    },
40454    '%': {
40455      value: '%',
40456      label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'),
40457      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'),
40458      step: 0.1
40459    },
40460    em: {
40461      value: 'em',
40462      label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'),
40463      a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'),
40464      step: 0.01
40465    },
40466    rem: {
40467      value: 'rem',
40468      label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'),
40469      a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'),
40470      step: 0.01
40471    },
40472    vw: {
40473      value: 'vw',
40474      label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
40475      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'),
40476      step: 0.1
40477    },
40478    vh: {
40479      value: 'vh',
40480      label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
40481      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'),
40482      step: 0.1
40483    },
40484    vmin: {
40485      value: 'vmin',
40486      label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
40487      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'),
40488      step: 0.1
40489    },
40490    vmax: {
40491      value: 'vmax',
40492      label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
40493      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'),
40494      step: 0.1
40495    },
40496    ch: {
40497      value: 'ch',
40498      label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
40499      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'),
40500      step: 0.01
40501    },
40502    ex: {
40503      value: 'ex',
40504      label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
40505      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'),
40506      step: 0.01
40507    },
40508    cm: {
40509      value: 'cm',
40510      label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
40511      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'),
40512      step: 0.001
40513    },
40514    mm: {
40515      value: 'mm',
40516      label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
40517      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'),
40518      step: 0.1
40519    },
40520    in: {
40521      value: 'in',
40522      label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
40523      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'),
40524      step: 0.001
40525    },
40526    pc: {
40527      value: 'pc',
40528      label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
40529      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'),
40530      step: 1
40531    },
40532    pt: {
40533      value: 'pt',
40534      label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
40535      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'),
40536      step: 1
40537    },
40538    svw: {
40539      value: 'svw',
40540      label: isWeb ? 'svw' : (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'),
40541      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width (svw)'),
40542      step: 0.1
40543    },
40544    svh: {
40545      value: 'svh',
40546      label: isWeb ? 'svh' : (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'),
40547      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport height (svh)'),
40548      step: 0.1
40549    },
40550    svi: {
40551      value: 'svi',
40552      label: isWeb ? 'svi' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the inline direction (svi)'),
40553      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svi)'),
40554      step: 0.1
40555    },
40556    svb: {
40557      value: 'svb',
40558      label: isWeb ? 'svb' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest size in the block direction (svb)'),
40559      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport width or height (svb)'),
40560      step: 0.1
40561    },
40562    svmin: {
40563      value: 'svmin',
40564      label: isWeb ? 'svmin' : (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'),
40565      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport smallest dimension (svmin)'),
40566      step: 0.1
40567    },
40568    lvw: {
40569      value: 'lvw',
40570      label: isWeb ? 'lvw' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'),
40571      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width (lvw)'),
40572      step: 0.1
40573    },
40574    lvh: {
40575      value: 'lvh',
40576      label: isWeb ? 'lvh' : (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'),
40577      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport height (lvh)'),
40578      step: 0.1
40579    },
40580    lvi: {
40581      value: 'lvi',
40582      label: isWeb ? 'lvi' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'),
40583      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvi)'),
40584      step: 0.1
40585    },
40586    lvb: {
40587      value: 'lvb',
40588      label: isWeb ? 'lvb' : (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'),
40589      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport width or height (lvb)'),
40590      step: 0.1
40591    },
40592    lvmin: {
40593      value: 'lvmin',
40594      label: isWeb ? 'lvmin' : (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'),
40595      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport smallest dimension (lvmin)'),
40596      step: 0.1
40597    },
40598    dvw: {
40599      value: 'dvw',
40600      label: isWeb ? 'dvw' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'),
40601      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width (dvw)'),
40602      step: 0.1
40603    },
40604    dvh: {
40605      value: 'dvh',
40606      label: isWeb ? 'dvh' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'),
40607      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport height (dvh)'),
40608      step: 0.1
40609    },
40610    dvi: {
40611      value: 'dvi',
40612      label: isWeb ? 'dvi' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'),
40613      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvi)'),
40614      step: 0.1
40615    },
40616    dvb: {
40617      value: 'dvb',
40618      label: isWeb ? 'dvb' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'),
40619      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport width or height (dvb)'),
40620      step: 0.1
40621    },
40622    dvmin: {
40623      value: 'dvmin',
40624      label: isWeb ? 'dvmin' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'),
40625      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport smallest dimension (dvmin)'),
40626      step: 0.1
40627    },
40628    dvmax: {
40629      value: 'dvmax',
40630      label: isWeb ? 'dvmax' : (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'),
40631      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Dynamic viewport largest dimension (dvmax)'),
40632      step: 0.1
40633    },
40634    svmax: {
40635      value: 'svmax',
40636      label: isWeb ? 'svmax' : (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'),
40637      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Small viewport largest dimension (svmax)'),
40638      step: 0.1
40639    },
40640    lvmax: {
40641      value: 'lvmax',
40642      label: isWeb ? 'lvmax' : (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'),
40643      a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Large viewport largest dimension (lvmax)'),
40644      step: 0.1
40645    }
40646  };
40647  
40648  /**
40649   * An array of all available CSS length units.
40650   */
40651  const ALL_CSS_UNITS = Object.values(allUnits);
40652  
40653  /**
40654   * Units of measurements. `a11yLabel` is used by screenreaders.
40655   */
40656  const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh];
40657  const DEFAULT_UNIT = allUnits.px;
40658  
40659  /**
40660   * Handles legacy value + unit handling.
40661   * This component use to manage both incoming value and units separately.
40662   *
40663   * Moving forward, ideally the value should be a string that contains both
40664   * the value and unit, example: '10px'
40665   *
40666   * @param rawValue     The raw value as a string (may or may not contain the unit)
40667   * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
40668   * @param allowedUnits Units to derive from.
40669   * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
40670   * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
40671   * from the raw value could not be matched against the list of allowed units.
40672   */
40673  function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) {
40674    const initialValue = fallbackUnit ? `$rawValue !== null && rawValue !== void 0 ? rawValue : ''}$fallbackUnit}` : rawValue;
40675    return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits);
40676  }
40677  
40678  /**
40679   * Checks if units are defined.
40680   *
40681   * @param units List of units.
40682   * @return Whether the list actually contains any units.
40683   */
40684  function hasUnits(units) {
40685    // Although the `isArray` check shouldn't be necessary (given the signature of
40686    // this typed function), it's better to stay on the side of caution, since
40687    // this function may be called from un-typed environments.
40688    return Array.isArray(units) && !!units.length;
40689  }
40690  
40691  /**
40692   * Parses a quantity and unit from a raw string value, given a list of allowed
40693   * units and otherwise falling back to the default unit.
40694   *
40695   * @param rawValue     The raw value as a string (may or may not contain the unit)
40696   * @param allowedUnits Units to derive from.
40697   * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
40698   * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
40699   * from the raw value could not be matched against the list of allowed units.
40700   */
40701  function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) {
40702    let trimmedValue;
40703    let quantityToReturn;
40704    if (typeof rawValue !== 'undefined' || rawValue === null) {
40705      trimmedValue = `$rawValue}`.trim();
40706      const parsedQuantity = parseFloat(trimmedValue);
40707      quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity;
40708    }
40709    const unitMatch = trimmedValue?.match(/[\d.\-\+]*\s*(.*)/);
40710    const matchedUnit = unitMatch?.[1]?.toLowerCase();
40711    let unitToReturn;
40712    if (hasUnits(allowedUnits)) {
40713      const match = allowedUnits.find(item => item.value === matchedUnit);
40714      unitToReturn = match?.value;
40715    } else {
40716      unitToReturn = DEFAULT_UNIT.value;
40717    }
40718    return [quantityToReturn, unitToReturn];
40719  }
40720  
40721  /**
40722   * Parses quantity and unit from a raw value. Validates parsed value, using fallback
40723   * value if invalid.
40724   *
40725   * @param rawValue         The next value.
40726   * @param allowedUnits     Units to derive from.
40727   * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
40728   * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
40729   * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
40730   * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
40731   * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
40732   * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of
40733   * `allowedUnits` is passed empty.
40734   */
40735  function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) {
40736    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits);
40737  
40738    // The parsed value from `parseQuantityAndUnitFromRawValue` should now be
40739    // either a real number or undefined. If undefined, use the fallback value.
40740    const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity;
40741  
40742    // If no unit is parsed from the raw value, or if the fallback unit is not
40743    // defined, use the first value from the list of allowed units as fallback.
40744    let unitToReturn = parsedUnit || fallbackUnit;
40745    if (!unitToReturn && hasUnits(allowedUnits)) {
40746      unitToReturn = allowedUnits[0].value;
40747    }
40748    return [quantityToReturn, unitToReturn];
40749  }
40750  
40751  /**
40752   * Takes a unit value and finds the matching accessibility label for the
40753   * unit abbreviation.
40754   *
40755   * @param unit Unit value (example: `px`)
40756   * @return a11y label for the unit abbreviation
40757   */
40758  function getAccessibleLabelForUnit(unit) {
40759    const match = ALL_CSS_UNITS.find(item => item.value === unit);
40760    return match?.a11yLabel ? match?.a11yLabel : match?.value;
40761  }
40762  
40763  /**
40764   * Filters available units based on values defined a list of allowed unit values.
40765   *
40766   * @param allowedUnitValues Collection of allowed unit value strings.
40767   * @param availableUnits    Collection of available unit objects.
40768   * @return Filtered units.
40769   */
40770  function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) {
40771    // Although the `isArray` check shouldn't be necessary (given the signature of
40772    // this typed function), it's better to stay on the side of caution, since
40773    // this function may be called from un-typed environments.
40774    return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : [];
40775  }
40776  
40777  /**
40778   * Custom hook to retrieve and consolidate units setting from add_theme_support().
40779   * TODO: ideally this hook shouldn't be needed
40780   * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
40781   *
40782   * @param args                An object containing units, settingPath & defaultUnits.
40783   * @param args.units          Collection of all potentially available units.
40784   * @param args.availableUnits Collection of unit value strings for filtering available units.
40785   * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
40786   *
40787   * @return Filtered list of units, with their default values updated following the `defaultValues`
40788   * argument's property.
40789   */
40790  const useCustomUnits = ({
40791    units = ALL_CSS_UNITS,
40792    availableUnits = [],
40793    defaultValues
40794  }) => {
40795    const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units);
40796    if (defaultValues) {
40797      customUnitsToReturn.forEach((unit, i) => {
40798        if (defaultValues[unit.value]) {
40799          const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]);
40800          customUnitsToReturn[i].default = parsedDefaultValue;
40801        }
40802      });
40803    }
40804    return customUnitsToReturn;
40805  };
40806  
40807  /**
40808   * Get available units with the unit for the currently selected value
40809   * prepended if it is not available in the list of units.
40810   *
40811   * This is useful to ensure that the current value's unit is always
40812   * accurately displayed in the UI, even if the intention is to hide
40813   * the availability of that unit.
40814   *
40815   * @param rawValue   Selected value to parse.
40816   * @param legacyUnit Legacy unit value, if rawValue needs it appended.
40817   * @param units      List of available units.
40818   *
40819   * @return A collection of units containing the unit for the current value.
40820   */
40821  function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) {
40822    const unitsToReturn = Array.isArray(units) ? [...units] : [];
40823    const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS);
40824    if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) {
40825      if (allUnits[currentUnit]) {
40826        unitsToReturn.unshift(allUnits[currentUnit]);
40827      }
40828    }
40829    return unitsToReturn;
40830  }
40831  
40832  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/hook.js
40833  /**
40834   * WordPress dependencies
40835   */
40836  
40837  
40838  /**
40839   * Internal dependencies
40840   */
40841  
40842  
40843  
40844  
40845  function useBorderControlDropdown(props) {
40846    const {
40847      border,
40848      className,
40849      colors = [],
40850      enableAlpha = false,
40851      enableStyle = true,
40852      onChange,
40853      previousStyleSelection,
40854      size = 'default',
40855      __experimentalIsRenderedInSidebar = false,
40856      ...otherProps
40857    } = useContextSystem(props, 'BorderControlDropdown');
40858    const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width);
40859    const hasZeroWidth = widthValue === 0;
40860    const onColorChange = color => {
40861      const style = border?.style === 'none' ? previousStyleSelection : border?.style;
40862      const width = hasZeroWidth && !!color ? '1px' : border?.width;
40863      onChange({
40864        color,
40865        style,
40866        width
40867      });
40868    };
40869    const onStyleChange = style => {
40870      const width = hasZeroWidth && !!style ? '1px' : border?.width;
40871      onChange({
40872        ...border,
40873        style,
40874        width
40875      });
40876    };
40877    const onReset = () => {
40878      onChange({
40879        ...border,
40880        color: undefined,
40881        style: undefined
40882      });
40883    };
40884  
40885    // Generate class names.
40886    const cx = useCx();
40887    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
40888      return cx(borderControlDropdown, className);
40889    }, [className, cx]);
40890    const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
40891      return cx(borderColorIndicator);
40892    }, [cx]);
40893    const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
40894      return cx(colorIndicatorWrapper(border, size));
40895    }, [border, cx, size]);
40896    const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
40897      return cx(borderControlPopoverControls);
40898    }, [cx]);
40899    const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
40900      return cx(borderControlPopoverContent);
40901    }, [cx]);
40902    const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
40903      return cx(resetButton);
40904    }, [cx]);
40905    return {
40906      ...otherProps,
40907      border,
40908      className: classes,
40909      colors,
40910      enableAlpha,
40911      enableStyle,
40912      indicatorClassName,
40913      indicatorWrapperClassName,
40914      onColorChange,
40915      onStyleChange,
40916      onReset,
40917      popoverContentClassName,
40918      popoverControlsClassName,
40919      resetButtonClassName,
40920      size,
40921      __experimentalIsRenderedInSidebar
40922    };
40923  }
40924  
40925  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js
40926  
40927  /**
40928   * External dependencies
40929   */
40930  
40931  /**
40932   * WordPress dependencies
40933   */
40934  
40935  
40936  
40937  /**
40938   * Internal dependencies
40939   */
40940  
40941  
40942  
40943  
40944  
40945  
40946  
40947  
40948  
40949  
40950  
40951  
40952  const getAriaLabelColorValue = colorValue => {
40953    // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
40954    return colorValue.replace(/^var\((.+)\)$/, '$1');
40955  };
40956  const getColorObject = (colorValue, colors) => {
40957    if (!colorValue || !colors) {
40958      return;
40959    }
40960    if (isMultiplePaletteArray(colors)) {
40961      // Multiple origins
40962      let matchedColor;
40963      colors.some(origin => origin.colors.some(color => {
40964        if (color.color === colorValue) {
40965          matchedColor = color;
40966          return true;
40967        }
40968        return false;
40969      }));
40970      return matchedColor;
40971    }
40972  
40973    // Single origin
40974    return colors.find(color => color.color === colorValue);
40975  };
40976  const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
40977    if (isStyleEnabled) {
40978      if (colorObject) {
40979        const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
40980        return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
40981        // 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".
40982        '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)(
40983        // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
40984        'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
40985      }
40986      if (colorValue) {
40987        const ariaLabelValue = getAriaLabelColorValue(colorValue);
40988        return style ? (0,external_wp_i18n_namespaceObject.sprintf)(
40989        // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
40990        '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)(
40991        // translators: %1$s: The color's hex code e.g: "#f00".
40992        'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
40993      }
40994      return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.');
40995    }
40996    if (colorObject) {
40997      return (0,external_wp_i18n_namespaceObject.sprintf)(
40998      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
40999      'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
41000    }
41001    if (colorValue) {
41002      return (0,external_wp_i18n_namespaceObject.sprintf)(
41003      // translators: %1$s: The color's hex code e.g: "#f00".
41004      'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
41005    }
41006    return (0,external_wp_i18n_namespaceObject.__)('Border color picker.');
41007  };
41008  const BorderControlDropdown = (props, forwardedRef) => {
41009    const {
41010      __experimentalIsRenderedInSidebar,
41011      border,
41012      colors,
41013      disableCustomColors,
41014      enableAlpha,
41015      enableStyle,
41016      indicatorClassName,
41017      indicatorWrapperClassName,
41018      isStyleSettable,
41019      onReset,
41020      onColorChange,
41021      onStyleChange,
41022      popoverContentClassName,
41023      popoverControlsClassName,
41024      resetButtonClassName,
41025      showDropdownHeader,
41026      size,
41027      __unstablePopoverProps,
41028      ...otherProps
41029    } = useBorderControlDropdown(props);
41030    const {
41031      color,
41032      style
41033    } = border || {};
41034    const colorObject = getColorObject(color, colors);
41035    const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
41036    const showResetButton = color || style && style !== 'none';
41037    const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
41038    const renderToggle = ({
41039      onToggle
41040    }) => (0,external_React_.createElement)(build_module_button, {
41041      onClick: onToggle,
41042      variant: "tertiary",
41043      "aria-label": toggleAriaLabel,
41044      tooltipPosition: dropdownPosition,
41045      label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'),
41046      showTooltip: true,
41047      __next40pxDefaultSize: size === '__unstable-large' ? true : false
41048    }, (0,external_React_.createElement)("span", {
41049      className: indicatorWrapperClassName
41050    }, (0,external_React_.createElement)(color_indicator, {
41051      className: indicatorClassName,
41052      colorValue: color
41053    })));
41054    const renderContent = ({
41055      onClose
41056    }) => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(dropdown_content_wrapper, {
41057      paddingSize: "medium"
41058    }, (0,external_React_.createElement)(v_stack_component, {
41059      className: popoverControlsClassName,
41060      spacing: 6
41061    }, showDropdownHeader ? (0,external_React_.createElement)(h_stack_component, null, (0,external_React_.createElement)(StyledLabel, null, (0,external_wp_i18n_namespaceObject.__)('Border color')), (0,external_React_.createElement)(build_module_button, {
41062      size: "small",
41063      label: (0,external_wp_i18n_namespaceObject.__)('Close border color'),
41064      icon: close_small,
41065      onClick: onClose
41066    })) : undefined, (0,external_React_.createElement)(color_palette, {
41067      className: popoverContentClassName,
41068      value: color,
41069      onChange: onColorChange,
41070      colors,
41071      disableCustomColors,
41072      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
41073      clearable: false,
41074      enableAlpha: enableAlpha
41075    }), enableStyle && isStyleSettable && (0,external_React_.createElement)(border_control_style_picker_component, {
41076      label: (0,external_wp_i18n_namespaceObject.__)('Style'),
41077      value: style,
41078      onChange: onStyleChange
41079    }))), showResetButton && (0,external_React_.createElement)(dropdown_content_wrapper, {
41080      paddingSize: "none"
41081    }, (0,external_React_.createElement)(build_module_button, {
41082      className: resetButtonClassName,
41083      variant: "tertiary",
41084      onClick: () => {
41085        onReset();
41086        onClose();
41087      }
41088    }, (0,external_wp_i18n_namespaceObject.__)('Reset'))));
41089    return (0,external_React_.createElement)(dropdown, {
41090      renderToggle: renderToggle,
41091      renderContent: renderContent,
41092      popoverProps: {
41093        ...__unstablePopoverProps
41094      },
41095      ...otherProps,
41096      ref: forwardedRef
41097    });
41098  };
41099  const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
41100  /* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown);
41101  
41102  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js
41103  
41104  /**
41105   * External dependencies
41106   */
41107  
41108  /**
41109   * WordPress dependencies
41110   */
41111  
41112  
41113  /**
41114   * Internal dependencies
41115   */
41116  
41117  
41118  
41119  function UnitSelectControl({
41120    className,
41121    isUnitSelectTabbable: isTabbable = true,
41122    onChange,
41123    size = 'default',
41124    unit = 'px',
41125    units = CSS_UNITS,
41126    ...props
41127  }, ref) {
41128    if (!hasUnits(units) || units?.length === 1) {
41129      return (0,external_React_.createElement)(UnitLabel, {
41130        className: "components-unit-control__unit-label",
41131        selectSize: size
41132      }, unit);
41133    }
41134    const handleOnChange = event => {
41135      const {
41136        value: unitValue
41137      } = event.target;
41138      const data = units.find(option => option.value === unitValue);
41139      onChange?.(unitValue, {
41140        event,
41141        data
41142      });
41143    };
41144    const classes = classnames_default()('components-unit-control__select', className);
41145    return (0,external_React_.createElement)(UnitSelect, {
41146      ref: ref,
41147      className: classes,
41148      onChange: handleOnChange,
41149      selectSize: size,
41150      tabIndex: isTabbable ? undefined : -1,
41151      value: unit,
41152      ...props
41153    }, units.map(option => (0,external_React_.createElement)("option", {
41154      value: option.value,
41155      key: option.value
41156    }, option.label)));
41157  }
41158  /* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl));
41159  
41160  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/index.js
41161  
41162  /**
41163   * External dependencies
41164   */
41165  
41166  
41167  
41168  /**
41169   * WordPress dependencies
41170   */
41171  
41172  
41173  
41174  
41175  /**
41176   * Internal dependencies
41177   */
41178  
41179  
41180  
41181  
41182  
41183  
41184  
41185  function UnforwardedUnitControl(unitControlProps, forwardedRef) {
41186    const {
41187      __unstableStateReducer,
41188      autoComplete = 'off',
41189      // @ts-expect-error Ensure that children is omitted from restProps
41190      children,
41191      className,
41192      disabled = false,
41193      disableUnits = false,
41194      isPressEnterToChange = false,
41195      isResetValueOnUnitChange = false,
41196      isUnitSelectTabbable = true,
41197      label,
41198      onChange: onChangeProp,
41199      onUnitChange,
41200      size = 'default',
41201      unit: unitProp,
41202      units: unitsProp = CSS_UNITS,
41203      value: valueProp,
41204      onFocus: onFocusProp,
41205      ...props
41206    } = useDeprecated36pxDefaultSizeProp(unitControlProps);
41207    if ('unit' in unitControlProps) {
41208      external_wp_deprecated_default()('UnitControl unit prop', {
41209        since: '5.6',
41210        hint: 'The unit should be provided within the `value` prop.',
41211        version: '6.2'
41212      });
41213    }
41214  
41215    // The `value` prop, in theory, should not be `null`, but the following line
41216    // ensures it fallback to `undefined` in case a consumer of `UnitControl`
41217    // still passes `null` as a `value`.
41218    const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
41219    const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => {
41220      const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp);
41221      const [{
41222        value: firstUnitValue = ''
41223      } = {}, ...rest] = list;
41224      const firstCharacters = rest.reduce((carry, {
41225        value
41226      }) => {
41227        const first = escapeRegExp(value?.substring(0, 1) || '');
41228        return carry.includes(first) ? carry : `$carry}|$first}`;
41229      }, escapeRegExp(firstUnitValue.substring(0, 1)));
41230      return [list, new RegExp(`^(?:$firstCharacters})$`, 'i')];
41231    }, [nonNullValueProp, unitProp, unitsProp]);
41232    const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units);
41233    const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, {
41234      initial: parsedUnit,
41235      fallback: ''
41236    });
41237    (0,external_wp_element_namespaceObject.useEffect)(() => {
41238      if (parsedUnit !== undefined) {
41239        setUnit(parsedUnit);
41240      }
41241    }, [parsedUnit, setUnit]);
41242    const classes = classnames_default()('components-unit-control',
41243    // This class is added for legacy purposes to maintain it on the outer
41244    // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
41245    'components-unit-control-wrapper', className);
41246    const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
41247      if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
41248        onChangeProp?.('', changeProps);
41249        return;
41250      }
41251  
41252      /*
41253       * Customizing the onChange callback.
41254       * This allows as to broadcast a combined value+unit to onChange.
41255       */
41256      const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join('');
41257      onChangeProp?.(onChangeValue, changeProps);
41258    };
41259    const handleOnUnitChange = (nextUnitValue, changeProps) => {
41260      const {
41261        data
41262      } = changeProps;
41263      let nextValue = `$parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}$nextUnitValue}`;
41264      if (isResetValueOnUnitChange && data?.default !== undefined) {
41265        nextValue = `$data.default}$nextUnitValue}`;
41266      }
41267      onChangeProp?.(nextValue, changeProps);
41268      onUnitChange?.(nextUnitValue, changeProps);
41269      setUnit(nextUnitValue);
41270    };
41271    let handleOnKeyDown;
41272    if (!disableUnits && isUnitSelectTabbable && units.length) {
41273      handleOnKeyDown = event => {
41274        props.onKeyDown?.(event);
41275        // Unless the meta key was pressed (to avoid interfering with
41276        // shortcuts, e.g. pastes), moves focus to the unit select if a key
41277        // matches the first character of a unit.
41278        if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus();
41279      };
41280    }
41281    const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null);
41282    const inputSuffix = !disableUnits ? (0,external_React_.createElement)(unit_select_control, {
41283      ref: refInputSuffix,
41284      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'),
41285      disabled: disabled,
41286      isUnitSelectTabbable: isUnitSelectTabbable,
41287      onChange: handleOnUnitChange,
41288      size: ['small', 'compact'].includes(size) || size === 'default' && !props.__next40pxDefaultSize ? 'small' : 'default',
41289      unit: unit,
41290      units: units,
41291      onFocus: onFocusProp,
41292      onBlur: unitControlProps.onBlur
41293    }) : null;
41294    let step = props.step;
41295  
41296    /*
41297     * If no step prop has been passed, lookup the active unit and
41298     * try to get step from `units`, or default to a value of `1`
41299     */
41300    if (!step && units) {
41301      var _activeUnit$step;
41302      const activeUnit = units.find(option => option.value === unit);
41303      step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
41304    }
41305    return (0,external_React_.createElement)(ValueInput, {
41306      ...props,
41307      autoComplete: autoComplete,
41308      className: classes,
41309      disabled: disabled,
41310      spinControls: "none",
41311      isPressEnterToChange: isPressEnterToChange,
41312      label: label,
41313      onKeyDown: handleOnKeyDown,
41314      onChange: handleOnQuantityChange,
41315      ref: forwardedRef,
41316      size: size,
41317      suffix: inputSuffix,
41318      type: isPressEnterToChange ? 'text' : 'number',
41319      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
41320      step: step,
41321      onFocus: onFocusProp,
41322      __unstableStateReducer: __unstableStateReducer
41323    });
41324  }
41325  
41326  /**
41327   * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
41328   *
41329   *
41330   * ```jsx
41331   * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
41332   * import { useState } from '@wordpress/element';
41333   *
41334   * const Example = () => {
41335   *   const [ value, setValue ] = useState( '10px' );
41336   *
41337   *   return <UnitControl onChange={ setValue } value={ value } />;
41338   * };
41339   * ```
41340   */
41341  const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl);
41342  
41343  /* harmony default export */ const unit_control = (UnitControl);
41344  
41345  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js
41346  /**
41347   * WordPress dependencies
41348   */
41349  
41350  
41351  /**
41352   * Internal dependencies
41353   */
41354  
41355  
41356  
41357  
41358  // If either width or color are defined, the border is considered valid
41359  // and a border style can be set as well.
41360  const isValidBorder = border => {
41361    const hasWidth = border?.width !== undefined && border.width !== '';
41362    const hasColor = border?.color !== undefined;
41363    return hasWidth || hasColor;
41364  };
41365  function useBorderControl(props) {
41366    const {
41367      className,
41368      colors = [],
41369      isCompact,
41370      onChange,
41371      enableAlpha = true,
41372      enableStyle = true,
41373      shouldSanitizeBorder = true,
41374      size = 'default',
41375      value: border,
41376      width,
41377      __experimentalIsRenderedInSidebar = false,
41378      __next40pxDefaultSize,
41379      ...otherProps
41380    } = useContextSystem(props, 'BorderControl');
41381    const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
41382    const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
41383    const widthUnit = originalWidthUnit || 'px';
41384    const hadPreviousZeroWidth = widthValue === 0;
41385    const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)();
41386    const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)();
41387    const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
41388    const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => {
41389      if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
41390        onChange(undefined);
41391        return;
41392      }
41393      onChange(newBorder);
41394    }, [onChange, shouldSanitizeBorder]);
41395    const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => {
41396      const newWidthValue = newWidth === '' ? undefined : newWidth;
41397      const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
41398      const hasZeroWidth = parsedValue === 0;
41399      const updatedBorder = {
41400        ...border,
41401        width: newWidthValue
41402      };
41403  
41404      // Setting the border width explicitly to zero will also set the
41405      // border style to `none` and clear the border color.
41406      if (hasZeroWidth && !hadPreviousZeroWidth) {
41407        // Before clearing the color and style selections, keep track of
41408        // the current selections so they can be restored when the width
41409        // changes to a non-zero value.
41410        setColorSelection(border?.color);
41411        setStyleSelection(border?.style);
41412  
41413        // Clear the color and style border properties.
41414        updatedBorder.color = undefined;
41415        updatedBorder.style = 'none';
41416      }
41417  
41418      // Selection has changed from zero border width to non-zero width.
41419      if (!hasZeroWidth && hadPreviousZeroWidth) {
41420        // Restore previous border color and style selections if width
41421        // is now not zero.
41422        if (updatedBorder.color === undefined) {
41423          updatedBorder.color = colorSelection;
41424        }
41425        if (updatedBorder.style === 'none') {
41426          updatedBorder.style = styleSelection;
41427        }
41428      }
41429      onBorderChange(updatedBorder);
41430    }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
41431    const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => {
41432      onWidthChange(`$value}$widthUnit}`);
41433    }, [onWidthChange, widthUnit]);
41434  
41435    // Generate class names.
41436    const cx = useCx();
41437    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
41438      return cx(borderControl, className);
41439    }, [className, cx]);
41440    let wrapperWidth = width;
41441    if (isCompact) {
41442      // Widths below represent the minimum usable width for compact controls.
41443      // Taller controls contain greater internal padding, thus greater width.
41444      wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
41445    }
41446    const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
41447      const widthStyle = !!wrapperWidth && styles_wrapperWidth;
41448      const heightStyle = wrapperHeight(computedSize);
41449      return cx(innerWrapper(), widthStyle, heightStyle);
41450    }, [wrapperWidth, cx, computedSize]);
41451    const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
41452      return cx(borderSlider());
41453    }, [cx]);
41454    return {
41455      ...otherProps,
41456      className: classes,
41457      colors,
41458      enableAlpha,
41459      enableStyle,
41460      innerWrapperClassName,
41461      inputWidth: wrapperWidth,
41462      isStyleSettable,
41463      onBorderChange,
41464      onSliderChange,
41465      onWidthChange,
41466      previousStyleSelection: styleSelection,
41467      sliderClassName,
41468      value: border,
41469      widthUnit,
41470      widthValue,
41471      size: computedSize,
41472      __experimentalIsRenderedInSidebar,
41473      __next40pxDefaultSize
41474    };
41475  }
41476  
41477  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js
41478  
41479  /**
41480   * WordPress dependencies
41481   */
41482  
41483  
41484  /**
41485   * Internal dependencies
41486   */
41487  
41488  
41489  
41490  
41491  
41492  
41493  
41494  
41495  
41496  const BorderLabel = props => {
41497    const {
41498      label,
41499      hideLabelFromVision
41500    } = props;
41501    if (!label) {
41502      return null;
41503    }
41504    return hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, {
41505      as: "legend"
41506    }, label) : (0,external_React_.createElement)(StyledLabel, {
41507      as: "legend"
41508    }, label);
41509  };
41510  const UnconnectedBorderControl = (props, forwardedRef) => {
41511    const {
41512      __next40pxDefaultSize = false,
41513      colors,
41514      disableCustomColors,
41515      disableUnits,
41516      enableAlpha,
41517      enableStyle,
41518      hideLabelFromVision,
41519      innerWrapperClassName,
41520      inputWidth,
41521      isStyleSettable,
41522      label,
41523      onBorderChange,
41524      onSliderChange,
41525      onWidthChange,
41526      placeholder,
41527      __unstablePopoverProps,
41528      previousStyleSelection,
41529      showDropdownHeader,
41530      size,
41531      sliderClassName,
41532      value: border,
41533      widthUnit,
41534      widthValue,
41535      withSlider,
41536      __experimentalIsRenderedInSidebar,
41537      ...otherProps
41538    } = useBorderControl(props);
41539    return (0,external_React_.createElement)(component, {
41540      as: "fieldset",
41541      ...otherProps,
41542      ref: forwardedRef
41543    }, (0,external_React_.createElement)(BorderLabel, {
41544      label: label,
41545      hideLabelFromVision: hideLabelFromVision
41546    }), (0,external_React_.createElement)(h_stack_component, {
41547      spacing: 4,
41548      className: innerWrapperClassName
41549    }, (0,external_React_.createElement)(unit_control, {
41550      prefix: (0,external_React_.createElement)(border_control_dropdown_component, {
41551        border: border,
41552        colors: colors,
41553        __unstablePopoverProps: __unstablePopoverProps,
41554        disableCustomColors: disableCustomColors,
41555        enableAlpha: enableAlpha,
41556        enableStyle: enableStyle,
41557        isStyleSettable: isStyleSettable,
41558        onChange: onBorderChange,
41559        previousStyleSelection: previousStyleSelection,
41560        showDropdownHeader: showDropdownHeader,
41561        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
41562        size: size
41563      }),
41564      label: (0,external_wp_i18n_namespaceObject.__)('Border width'),
41565      hideLabelFromVision: true,
41566      min: 0,
41567      onChange: onWidthChange,
41568      value: border?.width || '',
41569      placeholder: placeholder,
41570      disableUnits: disableUnits,
41571      __unstableInputWidth: inputWidth,
41572      size: size
41573    }), withSlider && (0,external_React_.createElement)(range_control, {
41574      __nextHasNoMarginBottom: true,
41575      label: (0,external_wp_i18n_namespaceObject.__)('Border width'),
41576      hideLabelFromVision: true,
41577      className: sliderClassName,
41578      initialPosition: 0,
41579      max: 100,
41580      min: 0,
41581      onChange: onSliderChange,
41582      step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
41583      value: widthValue || undefined,
41584      withInputField: false,
41585      __next40pxDefaultSize: __next40pxDefaultSize
41586    })));
41587  };
41588  
41589  /**
41590   * The `BorderControl` brings together internal sub-components which allow users to
41591   * set the various properties of a border. The first sub-component, a
41592   * `BorderDropdown` contains options representing border color and style. The
41593   * border width is controlled via a `UnitControl` and an optional `RangeControl`.
41594   *
41595   * Border radius is not covered by this control as it may be desired separate to
41596   * color, style, and width. For example, the border radius may be absorbed under
41597   * a "shape" abstraction.
41598   *
41599   * ```jsx
41600   * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
41601   * import { __ } from '@wordpress/i18n';
41602   *
41603   * const colors = [
41604   *     { name: 'Blue 20', color: '#72aee6' },
41605   *     // ...
41606   * ];
41607   *
41608   * const MyBorderControl = () => {
41609   *     const [ border, setBorder ] = useState();
41610   *     const onChange = ( newBorder ) => setBorder( newBorder );
41611   *
41612   *     return (
41613   *         <BorderControl
41614   *             colors={ colors }
41615   *             label={ __( 'Border' ) }
41616   *             onChange={ onChange }
41617   *             value={ border }
41618   *         />
41619   *     );
41620   * };
41621   * ```
41622   */
41623  const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
41624  /* harmony default export */ const border_control_component = (BorderControl);
41625  
41626  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/utils.js
41627  /**
41628   * External dependencies
41629   */
41630  
41631  const utils_ALIGNMENTS = {
41632    bottom: {
41633      alignItems: 'flex-end',
41634      justifyContent: 'center'
41635    },
41636    bottomLeft: {
41637      alignItems: 'flex-start',
41638      justifyContent: 'flex-end'
41639    },
41640    bottomRight: {
41641      alignItems: 'flex-end',
41642      justifyContent: 'flex-end'
41643    },
41644    center: {
41645      alignItems: 'center',
41646      justifyContent: 'center'
41647    },
41648    spaced: {
41649      alignItems: 'center',
41650      justifyContent: 'space-between'
41651    },
41652    left: {
41653      alignItems: 'center',
41654      justifyContent: 'flex-start'
41655    },
41656    right: {
41657      alignItems: 'center',
41658      justifyContent: 'flex-end'
41659    },
41660    stretch: {
41661      alignItems: 'stretch'
41662    },
41663    top: {
41664      alignItems: 'flex-start',
41665      justifyContent: 'center'
41666    },
41667    topLeft: {
41668      alignItems: 'flex-start',
41669      justifyContent: 'flex-start'
41670    },
41671    topRight: {
41672      alignItems: 'flex-start',
41673      justifyContent: 'flex-end'
41674    }
41675  };
41676  function utils_getAlignmentProps(alignment) {
41677    const alignmentProps = alignment ? utils_ALIGNMENTS[alignment] : {};
41678    return alignmentProps;
41679  }
41680  
41681  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/hook.js
41682  /**
41683   * External dependencies
41684   */
41685  
41686  
41687  /**
41688   * WordPress dependencies
41689   */
41690  
41691  
41692  /**
41693   * Internal dependencies
41694   */
41695  
41696  
41697  
41698  
41699  
41700  
41701  function useGrid(props) {
41702    const {
41703      align,
41704      alignment,
41705      className,
41706      columnGap,
41707      columns = 2,
41708      gap = 3,
41709      isInline = false,
41710      justify,
41711      rowGap,
41712      rows,
41713      templateColumns,
41714      templateRows,
41715      ...otherProps
41716    } = useContextSystem(props, 'Grid');
41717    const columnsAsArray = Array.isArray(columns) ? columns : [columns];
41718    const column = useResponsiveValue(columnsAsArray);
41719    const rowsAsArray = Array.isArray(rows) ? rows : [rows];
41720    const row = useResponsiveValue(rowsAsArray);
41721    const gridTemplateColumns = templateColumns || !!columns && `repeat( $column}, 1fr )`;
41722    const gridTemplateRows = templateRows || !!rows && `repeat( $row}, 1fr )`;
41723    const cx = useCx();
41724    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
41725      const alignmentProps = utils_getAlignmentProps(alignment);
41726      const gridClasses = /*#__PURE__*/emotion_react_browser_esm_css({
41727        alignItems: align,
41728        display: isInline ? 'inline-grid' : 'grid',
41729        gap: `calc( $config_values.gridBase} * $gap} )`,
41730        gridTemplateColumns: gridTemplateColumns || undefined,
41731        gridTemplateRows: gridTemplateRows || undefined,
41732        gridRowGap: rowGap,
41733        gridColumnGap: columnGap,
41734        justifyContent: justify,
41735        verticalAlign: isInline ? 'middle' : undefined,
41736        ...alignmentProps
41737      },  true ? "" : 0,  true ? "" : 0);
41738      return cx(gridClasses, className);
41739    }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
41740    return {
41741      ...otherProps,
41742      className: classes
41743    };
41744  }
41745  
41746  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/component.js
41747  
41748  /**
41749   * External dependencies
41750   */
41751  
41752  /**
41753   * Internal dependencies
41754   */
41755  
41756  
41757  
41758  
41759  function UnconnectedGrid(props, forwardedRef) {
41760    const gridProps = useGrid(props);
41761    return (0,external_React_.createElement)(component, {
41762      ...gridProps,
41763      ref: forwardedRef
41764    });
41765  }
41766  
41767  /**
41768   * `Grid` is a primitive layout component that can arrange content in a grid configuration.
41769   *
41770   * ```jsx
41771   * import {
41772   *     __experimentalGrid as Grid,
41773   *     __experimentalText as Text
41774   * } from `@wordpress/components`;
41775   *
41776   * function Example() {
41777   *     return (
41778   *         <Grid columns={ 3 }>
41779   *             <Text>Code</Text>
41780   *             <Text>is</Text>
41781   *             <Text>Poetry</Text>
41782   *         </Grid>
41783   *     );
41784   * }
41785   * ```
41786   */
41787  const Grid = contextConnect(UnconnectedGrid, 'Grid');
41788  /* harmony default export */ const grid_component = (Grid);
41789  
41790  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js
41791  /**
41792   * WordPress dependencies
41793   */
41794  
41795  
41796  /**
41797   * Internal dependencies
41798   */
41799  
41800  
41801  
41802  function useBorderBoxControlSplitControls(props) {
41803    const {
41804      className,
41805      colors = [],
41806      enableAlpha = false,
41807      enableStyle = true,
41808      size = 'default',
41809      __experimentalIsRenderedInSidebar = false,
41810      ...otherProps
41811    } = useContextSystem(props, 'BorderBoxControlSplitControls');
41812  
41813    // Generate class names.
41814    const cx = useCx();
41815    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
41816      return cx(borderBoxControlSplitControls(size), className);
41817    }, [cx, className, size]);
41818    const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
41819      return cx(centeredBorderControl, className);
41820    }, [cx, className]);
41821    const rightAlignedClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
41822      return cx(rightBorderControl(), className);
41823    }, [cx, className]);
41824    return {
41825      ...otherProps,
41826      centeredClassName,
41827      className: classes,
41828      colors,
41829      enableAlpha,
41830      enableStyle,
41831      rightAlignedClassName,
41832      size,
41833      __experimentalIsRenderedInSidebar
41834    };
41835  }
41836  
41837  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js
41838  
41839  /**
41840   * WordPress dependencies
41841   */
41842  
41843  
41844  
41845  
41846  /**
41847   * Internal dependencies
41848   */
41849  
41850  
41851  
41852  
41853  
41854  const BorderBoxControlSplitControls = (props, forwardedRef) => {
41855    const {
41856      centeredClassName,
41857      colors,
41858      disableCustomColors,
41859      enableAlpha,
41860      enableStyle,
41861      onChange,
41862      popoverPlacement,
41863      popoverOffset,
41864      rightAlignedClassName,
41865      size = 'default',
41866      value,
41867      __experimentalIsRenderedInSidebar,
41868      ...otherProps
41869    } = useBorderBoxControlSplitControls(props);
41870  
41871    // Use internal state instead of a ref to make sure that the component
41872    // re-renders when the popover's anchor updates.
41873    const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
41874  
41875    // Memoize popoverProps to avoid returning a new object every time.
41876    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
41877      placement: popoverPlacement,
41878      offset: popoverOffset,
41879      anchor: popoverAnchor,
41880      shift: true
41881    } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
41882    const sharedBorderControlProps = {
41883      colors,
41884      disableCustomColors,
41885      enableAlpha,
41886      enableStyle,
41887      isCompact: true,
41888      __experimentalIsRenderedInSidebar,
41889      size
41890    };
41891    const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
41892    return (0,external_React_.createElement)(grid_component, {
41893      ...otherProps,
41894      ref: mergedRef,
41895      gap: 4
41896    }, (0,external_React_.createElement)(border_box_control_visualizer_component, {
41897      value: value,
41898      size: size
41899    }), (0,external_React_.createElement)(border_control_component, {
41900      className: centeredClassName,
41901      hideLabelFromVision: true,
41902      label: (0,external_wp_i18n_namespaceObject.__)('Top border'),
41903      onChange: newBorder => onChange(newBorder, 'top'),
41904      __unstablePopoverProps: popoverProps,
41905      value: value?.top,
41906      ...sharedBorderControlProps
41907    }), (0,external_React_.createElement)(border_control_component, {
41908      hideLabelFromVision: true,
41909      label: (0,external_wp_i18n_namespaceObject.__)('Left border'),
41910      onChange: newBorder => onChange(newBorder, 'left'),
41911      __unstablePopoverProps: popoverProps,
41912      value: value?.left,
41913      ...sharedBorderControlProps
41914    }), (0,external_React_.createElement)(border_control_component, {
41915      className: rightAlignedClassName,
41916      hideLabelFromVision: true,
41917      label: (0,external_wp_i18n_namespaceObject.__)('Right border'),
41918      onChange: newBorder => onChange(newBorder, 'right'),
41919      __unstablePopoverProps: popoverProps,
41920      value: value?.right,
41921      ...sharedBorderControlProps
41922    }), (0,external_React_.createElement)(border_control_component, {
41923      className: centeredClassName,
41924      hideLabelFromVision: true,
41925      label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'),
41926      onChange: newBorder => onChange(newBorder, 'bottom'),
41927      __unstablePopoverProps: popoverProps,
41928      value: value?.bottom,
41929      ...sharedBorderControlProps
41930    }));
41931  };
41932  const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
41933  /* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls);
41934  
41935  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/unit-values.js
41936  const 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|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
41937  
41938  /**
41939   * Parses a number and unit from a value.
41940   *
41941   * @param toParse Value to parse
41942   *
41943   * @return  The extracted number and unit.
41944   */
41945  function parseCSSUnitValue(toParse) {
41946    const value = toParse.trim();
41947    const matched = value.match(UNITED_VALUE_REGEX);
41948    if (!matched) {
41949      return [undefined, undefined];
41950    }
41951    const [, num, unit] = matched;
41952    let numParsed = parseFloat(num);
41953    numParsed = Number.isNaN(numParsed) ? undefined : numParsed;
41954    return [numParsed, unit];
41955  }
41956  
41957  /**
41958   * Combines a value and a unit into a unit value.
41959   *
41960   * @param value
41961   * @param unit
41962   *
41963   * @return The unit value.
41964   */
41965  function createCSSUnitValue(value, unit) {
41966    return `$value}$unit}`;
41967  }
41968  
41969  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/utils.js
41970  /**
41971   * External dependencies
41972   */
41973  
41974  /**
41975   * Internal dependencies
41976   */
41977  
41978  const utils_sides = ['top', 'right', 'bottom', 'left'];
41979  const borderProps = ['color', 'style', 'width'];
41980  const isEmptyBorder = border => {
41981    if (!border) {
41982      return true;
41983    }
41984    return !borderProps.some(prop => border[prop] !== undefined);
41985  };
41986  const isDefinedBorder = border => {
41987    // No border, no worries :)
41988    if (!border) {
41989      return false;
41990    }
41991  
41992    // If we have individual borders per side within the border object we
41993    // need to check whether any of those side borders have been set.
41994    if (hasSplitBorders(border)) {
41995      const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side]));
41996      return !allSidesEmpty;
41997    }
41998  
41999    // If we have a top-level border only, check if that is empty. e.g.
42000    // { color: undefined, style: undefined, width: undefined }
42001    // Border radius can still be set within the border object as it is
42002    // handled separately.
42003    return !isEmptyBorder(border);
42004  };
42005  const isCompleteBorder = border => {
42006    if (!border) {
42007      return false;
42008    }
42009    return borderProps.every(prop => border[prop] !== undefined);
42010  };
42011  const hasSplitBorders = (border = {}) => {
42012    return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1);
42013  };
42014  const hasMixedBorders = borders => {
42015    if (!hasSplitBorders(borders)) {
42016      return false;
42017    }
42018    const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side]));
42019    return !shorthandBorders.every(border => border === shorthandBorders[0]);
42020  };
42021  const getSplitBorders = border => {
42022    if (!border || isEmptyBorder(border)) {
42023      return undefined;
42024    }
42025    return {
42026      top: border,
42027      right: border,
42028      bottom: border,
42029      left: border
42030    };
42031  };
42032  const getBorderDiff = (original, updated) => {
42033    const diff = {};
42034    if (original.color !== updated.color) {
42035      diff.color = updated.color;
42036    }
42037    if (original.style !== updated.style) {
42038      diff.style = updated.style;
42039    }
42040    if (original.width !== updated.width) {
42041      diff.width = updated.width;
42042    }
42043    return diff;
42044  };
42045  const getCommonBorder = borders => {
42046    if (!borders) {
42047      return undefined;
42048    }
42049    const colors = [];
42050    const styles = [];
42051    const widths = [];
42052    utils_sides.forEach(side => {
42053      colors.push(borders[side]?.color);
42054      styles.push(borders[side]?.style);
42055      widths.push(borders[side]?.width);
42056    });
42057    const allColorsMatch = colors.every(value => value === colors[0]);
42058    const allStylesMatch = styles.every(value => value === styles[0]);
42059    const allWidthsMatch = widths.every(value => value === widths[0]);
42060    return {
42061      color: allColorsMatch ? colors[0] : undefined,
42062      style: allStylesMatch ? styles[0] : undefined,
42063      width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)
42064    };
42065  };
42066  const getShorthandBorderStyle = (border, fallbackBorder) => {
42067    if (isEmptyBorder(border)) {
42068      return fallbackBorder;
42069    }
42070    const {
42071      color: fallbackColor,
42072      style: fallbackStyle,
42073      width: fallbackWidth
42074    } = fallbackBorder || {};
42075    const {
42076      color = fallbackColor,
42077      style = fallbackStyle,
42078      width = fallbackWidth
42079    } = border;
42080    const hasVisibleBorder = !!width && width !== '0' || !!color;
42081    const borderStyle = hasVisibleBorder ? style || 'solid' : style;
42082    return [width, borderStyle, color].filter(Boolean).join(' ');
42083  };
42084  const getMostCommonUnit = values => {
42085    // Collect all the CSS units.
42086    const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`$value}`)[1]);
42087  
42088    // Return the most common unit out of only the defined CSS units.
42089    const filteredUnits = units.filter(value => value !== undefined);
42090    return mode(filteredUnits);
42091  };
42092  
42093  /**
42094   * Finds the mode value out of the array passed favouring the first value
42095   * as a tiebreaker.
42096   *
42097   * @param values Values to determine the mode from.
42098   *
42099   * @return The mode value.
42100   */
42101  function mode(values) {
42102    if (values.length === 0) {
42103      return undefined;
42104    }
42105    const map = {};
42106    let maxCount = 0;
42107    let currentMode;
42108    values.forEach(value => {
42109      map[value] = map[value] === undefined ? 1 : map[value] + 1;
42110      if (map[value] > maxCount) {
42111        currentMode = value;
42112        maxCount = map[value];
42113      }
42114    });
42115    return currentMode;
42116  }
42117  
42118  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js
42119  /**
42120   * WordPress dependencies
42121   */
42122  
42123  
42124  /**
42125   * Internal dependencies
42126   */
42127  
42128  
42129  
42130  
42131  function useBorderBoxControl(props) {
42132    const {
42133      className,
42134      colors = [],
42135      onChange,
42136      enableAlpha = false,
42137      enableStyle = true,
42138      size = 'default',
42139      value,
42140      __experimentalIsRenderedInSidebar = false,
42141      __next40pxDefaultSize,
42142      ...otherProps
42143    } = useContextSystem(props, 'BorderBoxControl');
42144    const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
42145    const mixedBorders = hasMixedBorders(value);
42146    const splitBorders = hasSplitBorders(value);
42147    const linkedValue = splitBorders ? getCommonBorder(value) : value;
42148    const splitValue = splitBorders ? value : getSplitBorders(value);
42149  
42150    // If no numeric width value is set, the unit select will be disabled.
42151    const hasWidthValue = !isNaN(parseFloat(`$linkedValue?.width}`));
42152    const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders);
42153    const toggleLinked = () => setIsLinked(!isLinked);
42154    const onLinkedChange = newBorder => {
42155      if (!newBorder) {
42156        return onChange(undefined);
42157      }
42158  
42159      // If we have all props defined on the new border apply it.
42160      if (!mixedBorders || isCompleteBorder(newBorder)) {
42161        return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);
42162      }
42163  
42164      // If we had mixed borders we might have had some shared border props
42165      // that we need to maintain. For example; we could have mixed borders
42166      // with all the same color but different widths. Then from the linked
42167      // control we change the color. We should keep the separate  widths.
42168      const changes = getBorderDiff(linkedValue, newBorder);
42169      const updatedBorders = {
42170        top: {
42171          ...value?.top,
42172          ...changes
42173        },
42174        right: {
42175          ...value?.right,
42176          ...changes
42177        },
42178        bottom: {
42179          ...value?.bottom,
42180          ...changes
42181        },
42182        left: {
42183          ...value?.left,
42184          ...changes
42185        }
42186      };
42187      if (hasMixedBorders(updatedBorders)) {
42188        return onChange(updatedBorders);
42189      }
42190      const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;
42191      onChange(filteredResult);
42192    };
42193    const onSplitChange = (newBorder, side) => {
42194      const updatedBorders = {
42195        ...splitValue,
42196        [side]: newBorder
42197      };
42198      if (hasMixedBorders(updatedBorders)) {
42199        onChange(updatedBorders);
42200      } else {
42201        onChange(newBorder);
42202      }
42203    };
42204    const cx = useCx();
42205    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
42206      return cx(borderBoxControl, className);
42207    }, [cx, className]);
42208    const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
42209      return cx(linkedBorderControl());
42210    }, [cx]);
42211    const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
42212      return cx(wrapper);
42213    }, [cx]);
42214    return {
42215      ...otherProps,
42216      className: classes,
42217      colors,
42218      disableUnits: mixedBorders && !hasWidthValue,
42219      enableAlpha,
42220      enableStyle,
42221      hasMixedBorders: mixedBorders,
42222      isLinked,
42223      linkedControlClassName,
42224      onLinkedChange,
42225      onSplitChange,
42226      toggleLinked,
42227      linkedValue,
42228      size: computedSize,
42229      splitValue,
42230      wrapperClassName,
42231      __experimentalIsRenderedInSidebar
42232    };
42233  }
42234  
42235  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js
42236  
42237  /**
42238   * WordPress dependencies
42239   */
42240  
42241  
42242  
42243  
42244  /**
42245   * Internal dependencies
42246   */
42247  
42248  
42249  
42250  
42251  
42252  
42253  
42254  
42255  const component_BorderLabel = props => {
42256    const {
42257      label,
42258      hideLabelFromVision
42259    } = props;
42260    if (!label) {
42261      return null;
42262    }
42263    return hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, {
42264      as: "label"
42265    }, label) : (0,external_React_.createElement)(StyledLabel, null, label);
42266  };
42267  const UnconnectedBorderBoxControl = (props, forwardedRef) => {
42268    const {
42269      className,
42270      colors,
42271      disableCustomColors,
42272      disableUnits,
42273      enableAlpha,
42274      enableStyle,
42275      hasMixedBorders,
42276      hideLabelFromVision,
42277      isLinked,
42278      label,
42279      linkedControlClassName,
42280      linkedValue,
42281      onLinkedChange,
42282      onSplitChange,
42283      popoverPlacement,
42284      popoverOffset,
42285      size,
42286      splitValue,
42287      toggleLinked,
42288      wrapperClassName,
42289      __experimentalIsRenderedInSidebar,
42290      ...otherProps
42291    } = useBorderBoxControl(props);
42292  
42293    // Use internal state instead of a ref to make sure that the component
42294    // re-renders when the popover's anchor updates.
42295    const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
42296  
42297    // Memoize popoverProps to avoid returning a new object every time.
42298    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {
42299      placement: popoverPlacement,
42300      offset: popoverOffset,
42301      anchor: popoverAnchor,
42302      shift: true
42303    } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
42304    const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]);
42305    return (0,external_React_.createElement)(component, {
42306      className: className,
42307      ...otherProps,
42308      ref: mergedRef
42309    }, (0,external_React_.createElement)(component_BorderLabel, {
42310      label: label,
42311      hideLabelFromVision: hideLabelFromVision
42312    }), (0,external_React_.createElement)(component, {
42313      className: wrapperClassName
42314    }, isLinked ? (0,external_React_.createElement)(border_control_component, {
42315      className: linkedControlClassName,
42316      colors: colors,
42317      disableUnits: disableUnits,
42318      disableCustomColors: disableCustomColors,
42319      enableAlpha: enableAlpha,
42320      enableStyle: enableStyle,
42321      onChange: onLinkedChange,
42322      placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined,
42323      __unstablePopoverProps: popoverProps,
42324      shouldSanitizeBorder: false // This component will handle that.
42325      ,
42326      value: linkedValue,
42327      withSlider: true,
42328      width: size === '__unstable-large' ? '116px' : '110px',
42329      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
42330      size: size
42331    }) : (0,external_React_.createElement)(border_box_control_split_controls_component, {
42332      colors: colors,
42333      disableCustomColors: disableCustomColors,
42334      enableAlpha: enableAlpha,
42335      enableStyle: enableStyle,
42336      onChange: onSplitChange,
42337      popoverPlacement: popoverPlacement,
42338      popoverOffset: popoverOffset,
42339      value: splitValue,
42340      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
42341      size: size
42342    }), (0,external_React_.createElement)(border_box_control_linked_button_component, {
42343      onClick: toggleLinked,
42344      isLinked: isLinked,
42345      size: size
42346    })));
42347  };
42348  
42349  /**
42350   * The `BorderBoxControl` effectively has two view states. The first, a "linked"
42351   * view, allows configuration of a flat border via a single `BorderControl`.
42352   * The second, a "split" view, contains a `BorderControl` for each side
42353   * as well as a visualizer for the currently selected borders. Each view also
42354   * contains a button to toggle between the two.
42355   *
42356   * When switching from the "split" view to "linked", if the individual side
42357   * borders are not consistent, the "linked" view will display any border
42358   * properties selections that are consistent while showing a mixed state for
42359   * those that aren't. For example, if all borders had the same color and style
42360   * but different widths, then the border dropdown in the "linked" view's
42361   * `BorderControl` would show that consistent color and style but the "linked"
42362   * view's width input would show "Mixed" placeholder text.
42363   *
42364   * ```jsx
42365   * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
42366   * import { __ } from '@wordpress/i18n';
42367   *
42368   * const colors = [
42369   *     { name: 'Blue 20', color: '#72aee6' },
42370   *     // ...
42371   * ];
42372   *
42373   * const MyBorderBoxControl = () => {
42374   *     const defaultBorder = {
42375   *         color: '#72aee6',
42376   *         style: 'dashed',
42377   *         width: '1px',
42378   *     };
42379   *     const [ borders, setBorders ] = useState( {
42380   *         top: defaultBorder,
42381   *         right: defaultBorder,
42382   *         bottom: defaultBorder,
42383   *         left: defaultBorder,
42384   *     } );
42385   *     const onChange = ( newBorders ) => setBorders( newBorders );
42386   *
42387   *     return (
42388   *         <BorderBoxControl
42389   *             colors={ colors }
42390   *             label={ __( 'Borders' ) }
42391   *             onChange={ onChange }
42392   *             value={ borders }
42393   *         />
42394   *     );
42395   * };
42396   * ```
42397   */
42398  const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
42399  /* harmony default export */ const border_box_control_component = (BorderBoxControl);
42400  
42401  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js
42402  
42403  function 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)."; }
42404  /**
42405   * External dependencies
42406   */
42407  
42408  const box_control_icon_styles_Root = emotion_styled_base_browser_esm("span",  true ? {
42409    target: "e1j5nr4z8"
42410  } : 0)( true ? {
42411    name: "1w884gc",
42412    styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px"
42413  } : 0);
42414  const Viewbox = emotion_styled_base_browser_esm("span",  true ? {
42415    target: "e1j5nr4z7"
42416  } : 0)( true ? {
42417    name: "i6vjox",
42418    styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%"
42419  } : 0);
42420  const strokeFocus = ({
42421    isFocused
42422  }) => {
42423    return /*#__PURE__*/emotion_react_browser_esm_css({
42424      backgroundColor: 'currentColor',
42425      opacity: isFocused ? 1 : 0.3
42426    },  true ? "" : 0,  true ? "" : 0);
42427  };
42428  const Stroke = emotion_styled_base_browser_esm("span",  true ? {
42429    target: "e1j5nr4z6"
42430  } : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0));
42431  const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke,  true ? {
42432    target: "e1j5nr4z5"
42433  } : 0)( true ? {
42434    name: "1k2w39q",
42435    styles: "bottom:3px;top:3px;width:2px"
42436  } : 0);
42437  const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke,  true ? {
42438    target: "e1j5nr4z4"
42439  } : 0)( true ? {
42440    name: "1q9b07k",
42441    styles: "height:2px;left:3px;right:3px"
42442  } : 0);
42443  const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke,  true ? {
42444    target: "e1j5nr4z3"
42445  } : 0)( true ? {
42446    name: "abcix4",
42447    styles: "top:0"
42448  } : 0);
42449  const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke,  true ? {
42450    target: "e1j5nr4z2"
42451  } : 0)( true ? {
42452    name: "1wf8jf",
42453    styles: "right:0"
42454  } : 0);
42455  const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke,  true ? {
42456    target: "e1j5nr4z1"
42457  } : 0)( true ? {
42458    name: "8tapst",
42459    styles: "bottom:0"
42460  } : 0);
42461  const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke,  true ? {
42462    target: "e1j5nr4z0"
42463  } : 0)( true ? {
42464    name: "1ode3cm",
42465    styles: "left:0"
42466  } : 0);
42467  
42468  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/icon.js
42469  
42470  /**
42471   * Internal dependencies
42472   */
42473  
42474  
42475  const BASE_ICON_SIZE = 24;
42476  function BoxControlIcon({
42477    size = 24,
42478    side = 'all',
42479    sides,
42480    ...props
42481  }) {
42482    const isSideDisabled = value => sides?.length && !sides.includes(value);
42483    const hasSide = value => {
42484      if (isSideDisabled(value)) {
42485        return false;
42486      }
42487      return side === 'all' || side === value;
42488    };
42489    const top = hasSide('top') || hasSide('vertical');
42490    const right = hasSide('right') || hasSide('horizontal');
42491    const bottom = hasSide('bottom') || hasSide('vertical');
42492    const left = hasSide('left') || hasSide('horizontal');
42493  
42494    // Simulates SVG Icon scaling.
42495    const scale = size / BASE_ICON_SIZE;
42496    return (0,external_React_.createElement)(box_control_icon_styles_Root, {
42497      style: {
42498        transform: `scale($scale})`
42499      },
42500      ...props
42501    }, (0,external_React_.createElement)(Viewbox, null, (0,external_React_.createElement)(TopStroke, {
42502      isFocused: top
42503    }), (0,external_React_.createElement)(RightStroke, {
42504      isFocused: right
42505    }), (0,external_React_.createElement)(BottomStroke, {
42506      isFocused: bottom
42507    }), (0,external_React_.createElement)(LeftStroke, {
42508      isFocused: left
42509    })));
42510  }
42511  
42512  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js
42513  
42514  function 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)."; }
42515  /**
42516   * External dependencies
42517   */
42518  
42519  /**
42520   * Internal dependencies
42521   */
42522  
42523  
42524  
42525  
42526  
42527  
42528  const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control,  true ? {
42529    target: "e1jovhle5"
42530  } : 0)( true ? {
42531    name: "1ejyr19",
42532    styles: "max-width:90px"
42533  } : 0);
42534  const InputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
42535    target: "e1jovhle4"
42536  } : 0)( true ? {
42537    name: "1j1lmoi",
42538    styles: "grid-column:1/span 3"
42539  } : 0);
42540  const ResetButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
42541    target: "e1jovhle3"
42542  } : 0)( true ? {
42543    name: "tkya7b",
42544    styles: "grid-area:1/2;justify-self:end"
42545  } : 0);
42546  const LinkedButtonWrapper = emotion_styled_base_browser_esm("div",  true ? {
42547    target: "e1jovhle2"
42548  } : 0)( true ? {
42549    name: "1dfa8al",
42550    styles: "grid-area:1/3;justify-self:end"
42551  } : 0);
42552  const FlexedBoxControlIcon = /*#__PURE__*/emotion_styled_base_browser_esm(BoxControlIcon,  true ? {
42553    target: "e1jovhle1"
42554  } : 0)( true ? {
42555    name: "ou8xsw",
42556    styles: "flex:0 0 auto"
42557  } : 0);
42558  const FlexedRangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control,  true ? {
42559    target: "e1jovhle0"
42560  } : 0)("width:100%;margin-inline-end:", space(2), ";" + ( true ? "" : 0));
42561  
42562  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/utils.js
42563  /**
42564   * WordPress dependencies
42565   */
42566  
42567  
42568  /**
42569   * Internal dependencies
42570   */
42571  
42572  const CUSTOM_VALUE_SETTINGS = {
42573    px: {
42574      max: 300,
42575      step: 1
42576    },
42577    '%': {
42578      max: 100,
42579      step: 1
42580    },
42581    vw: {
42582      max: 100,
42583      step: 1
42584    },
42585    vh: {
42586      max: 100,
42587      step: 1
42588    },
42589    em: {
42590      max: 10,
42591      step: 0.1
42592    },
42593    rm: {
42594      max: 10,
42595      step: 0.1
42596    },
42597    svw: {
42598      max: 100,
42599      step: 1
42600    },
42601    lvw: {
42602      max: 100,
42603      step: 1
42604    },
42605    dvw: {
42606      max: 100,
42607      step: 1
42608    },
42609    svh: {
42610      max: 100,
42611      step: 1
42612    },
42613    lvh: {
42614      max: 100,
42615      step: 1
42616    },
42617    dvh: {
42618      max: 100,
42619      step: 1
42620    },
42621    vi: {
42622      max: 100,
42623      step: 1
42624    },
42625    svi: {
42626      max: 100,
42627      step: 1
42628    },
42629    lvi: {
42630      max: 100,
42631      step: 1
42632    },
42633    dvi: {
42634      max: 100,
42635      step: 1
42636    },
42637    vb: {
42638      max: 100,
42639      step: 1
42640    },
42641    svb: {
42642      max: 100,
42643      step: 1
42644    },
42645    lvb: {
42646      max: 100,
42647      step: 1
42648    },
42649    dvb: {
42650      max: 100,
42651      step: 1
42652    },
42653    vmin: {
42654      max: 100,
42655      step: 1
42656    },
42657    svmin: {
42658      max: 100,
42659      step: 1
42660    },
42661    lvmin: {
42662      max: 100,
42663      step: 1
42664    },
42665    dvmin: {
42666      max: 100,
42667      step: 1
42668    },
42669    vmax: {
42670      max: 100,
42671      step: 1
42672    },
42673    svmax: {
42674      max: 100,
42675      step: 1
42676    },
42677    lvmax: {
42678      max: 100,
42679      step: 1
42680    },
42681    dvmax: {
42682      max: 100,
42683      step: 1
42684    }
42685  };
42686  const LABELS = {
42687    all: (0,external_wp_i18n_namespaceObject.__)('All sides'),
42688    top: (0,external_wp_i18n_namespaceObject.__)('Top side'),
42689    bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom side'),
42690    left: (0,external_wp_i18n_namespaceObject.__)('Left side'),
42691    right: (0,external_wp_i18n_namespaceObject.__)('Right side'),
42692    mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'),
42693    vertical: (0,external_wp_i18n_namespaceObject.__)('Top and bottom sides'),
42694    horizontal: (0,external_wp_i18n_namespaceObject.__)('Left and right sides')
42695  };
42696  const DEFAULT_VALUES = {
42697    top: undefined,
42698    right: undefined,
42699    bottom: undefined,
42700    left: undefined
42701  };
42702  const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
42703  
42704  /**
42705   * Gets an items with the most occurrence within an array
42706   * https://stackoverflow.com/a/20762713
42707   *
42708   * @param arr Array of items to check.
42709   * @return The item with the most occurrences.
42710   */
42711  function utils_mode(arr) {
42712    return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
42713  }
42714  
42715  /**
42716   * Gets the 'all' input value and unit from values data.
42717   *
42718   * @param values         Box values.
42719   * @param selectedUnits  Box units.
42720   * @param availableSides Available box sides to evaluate.
42721   *
42722   * @return A value + unit for the 'all' input.
42723   */
42724  function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) {
42725    const sides = normalizeSides(availableSides);
42726    const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side]));
42727    const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
42728      var _value$;
42729      return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
42730    });
42731    const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
42732    const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
42733  
42734    /**
42735     * The typeof === 'number' check is important. On reset actions, the incoming value
42736     * may be null or an empty string.
42737     *
42738     * Also, the value may also be zero (0), which is considered a valid unit value.
42739     *
42740     * typeof === 'number' is more specific for these cases, rather than relying on a
42741     * simple truthy check.
42742     */
42743    let commonUnit;
42744    if (typeof commonQuantity === 'number') {
42745      commonUnit = utils_mode(allParsedUnits);
42746    } else {
42747      var _getAllUnitFallback;
42748      // Set meaningful unit selection if no commonQuantity and user has previously
42749      // selected units without assigning values while controls were unlinked.
42750      commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : utils_mode(allParsedUnits);
42751    }
42752    return [commonQuantity, commonUnit].join('');
42753  }
42754  
42755  /**
42756   * Determine the most common unit selection to use as a fallback option.
42757   *
42758   * @param selectedUnits Current unit selections for individual sides.
42759   * @return  Most common unit selection.
42760   */
42761  function getAllUnitFallback(selectedUnits) {
42762    if (!selectedUnits || typeof selectedUnits !== 'object') {
42763      return undefined;
42764    }
42765    const filteredUnits = Object.values(selectedUnits).filter(Boolean);
42766    return utils_mode(filteredUnits);
42767  }
42768  
42769  /**
42770   * Checks to determine if values are mixed.
42771   *
42772   * @param values        Box values.
42773   * @param selectedUnits Box units.
42774   * @param sides         Available box sides to evaluate.
42775   *
42776   * @return Whether values are mixed.
42777   */
42778  function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) {
42779    const allValue = getAllValue(values, selectedUnits, sides);
42780    const isMixed = isNaN(parseFloat(allValue));
42781    return isMixed;
42782  }
42783  
42784  /**
42785   * Checks to determine if values are defined.
42786   *
42787   * @param values Box values.
42788   *
42789   * @return  Whether values are mixed.
42790   */
42791  function isValuesDefined(values) {
42792    return values !== undefined && Object.values(values).filter(
42793    // Switching units when input is empty causes values only
42794    // containing units. This gives false positive on mixed values
42795    // unless filtered.
42796    value => !!value && /\d/.test(value)).length > 0;
42797  }
42798  
42799  /**
42800   * Get initial selected side, factoring in whether the sides are linked,
42801   * and whether the vertical / horizontal directions are grouped via splitOnAxis.
42802   *
42803   * @param isLinked    Whether the box control's fields are linked.
42804   * @param splitOnAxis Whether splitting by horizontal or vertical axis.
42805   * @return The initial side.
42806   */
42807  function getInitialSide(isLinked, splitOnAxis) {
42808    let initialSide = 'all';
42809    if (!isLinked) {
42810      initialSide = splitOnAxis ? 'vertical' : 'top';
42811    }
42812    return initialSide;
42813  }
42814  
42815  /**
42816   * Normalizes provided sides configuration to an array containing only top,
42817   * right, bottom and left. This essentially just maps `horizontal` or `vertical`
42818   * to their appropriate sides to facilitate correctly determining value for
42819   * all input control.
42820   *
42821   * @param sides Available sides for box control.
42822   * @return Normalized sides configuration.
42823   */
42824  function normalizeSides(sides) {
42825    const filteredSides = [];
42826    if (!sides?.length) {
42827      return ALL_SIDES;
42828    }
42829    if (sides.includes('vertical')) {
42830      filteredSides.push(...['top', 'bottom']);
42831    } else if (sides.includes('horizontal')) {
42832      filteredSides.push(...['left', 'right']);
42833    } else {
42834      const newSides = ALL_SIDES.filter(side => sides.includes(side));
42835      filteredSides.push(...newSides);
42836    }
42837    return filteredSides;
42838  }
42839  
42840  /**
42841   * Applies a value to an object representing top, right, bottom and left sides
42842   * while taking into account any custom side configuration.
42843   *
42844   * @param currentValues The current values for each side.
42845   * @param newValue      The value to apply to the sides object.
42846   * @param sides         Array defining valid sides.
42847   *
42848   * @return Object containing the updated values for each side.
42849   */
42850  function applyValueToSides(currentValues, newValue, sides) {
42851    const newValues = {
42852      ...currentValues
42853    };
42854    if (sides?.length) {
42855      sides.forEach(side => {
42856        if (side === 'vertical') {
42857          newValues.top = newValue;
42858          newValues.bottom = newValue;
42859        } else if (side === 'horizontal') {
42860          newValues.left = newValue;
42861          newValues.right = newValue;
42862        } else {
42863          newValues[side] = newValue;
42864        }
42865      });
42866    } else {
42867      ALL_SIDES.forEach(side => newValues[side] = newValue);
42868    }
42869    return newValues;
42870  }
42871  
42872  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/all-input-control.js
42873  
42874  /**
42875   * WordPress dependencies
42876   */
42877  
42878  /**
42879   * Internal dependencies
42880   */
42881  
42882  
42883  
42884  
42885  
42886  const all_input_control_noop = () => {};
42887  function AllInputControl({
42888    __next40pxDefaultSize,
42889    onChange = all_input_control_noop,
42890    onFocus = all_input_control_noop,
42891    values,
42892    sides,
42893    selectedUnits,
42894    setSelectedUnits,
42895    ...props
42896  }) {
42897    var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
42898    const inputId = (0,external_wp_compose_namespaceObject.useInstanceId)(AllInputControl, 'box-control-input-all');
42899    const allValue = getAllValue(values, selectedUnits, sides);
42900    const hasValues = isValuesDefined(values);
42901    const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides);
42902    const allPlaceholder = isMixed ? LABELS.mixed : undefined;
42903    const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(allValue);
42904    const handleOnFocus = event => {
42905      onFocus(event, {
42906        side: 'all'
42907      });
42908    };
42909    const onValueChange = next => {
42910      const isNumeric = next !== undefined && !isNaN(parseFloat(next));
42911      const nextValue = isNumeric ? next : undefined;
42912      const nextValues = applyValueToSides(values, nextValue, sides);
42913      onChange(nextValues);
42914    };
42915    const sliderOnChange = next => {
42916      onValueChange(next !== undefined ? [next, parsedUnit].join('') : undefined);
42917    };
42918  
42919    // Set selected unit so it can be used as fallback by unlinked controls
42920    // when individual sides do not have a value containing a unit.
42921    const handleOnUnitChange = unit => {
42922      const newUnits = applyValueToSides(selectedUnits, unit, sides);
42923      setSelectedUnits(newUnits);
42924    };
42925    return (0,external_React_.createElement)(h_stack_component, null, (0,external_React_.createElement)(StyledUnitControl, {
42926      ...props,
42927      __next40pxDefaultSize: __next40pxDefaultSize,
42928      className: "component-box-control__unit-control",
42929      disableUnits: isMixed,
42930      id: inputId,
42931      isPressEnterToChange: true,
42932      value: allValue,
42933      onChange: onValueChange,
42934      onUnitChange: handleOnUnitChange,
42935      onFocus: handleOnFocus,
42936      placeholder: allPlaceholder,
42937      label: LABELS.all,
42938      hideLabelFromVision: true
42939    }), (0,external_React_.createElement)(FlexedRangeControl, {
42940      __nextHasNoMarginBottom: true,
42941      __next40pxDefaultSize: __next40pxDefaultSize,
42942      "aria-controls": inputId,
42943      label: LABELS.all,
42944      hideLabelFromVision: true,
42945      onChange: sliderOnChange,
42946      min: 0,
42947      max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
42948      step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
42949      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
42950      withInputField: false
42951    }));
42952  }
42953  
42954  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js
42955  
42956  /**
42957   * WordPress dependencies
42958   */
42959  
42960  /**
42961   * Internal dependencies
42962   */
42963  
42964  
42965  
42966  
42967  const input_controls_noop = () => {};
42968  function BoxInputControls({
42969    __next40pxDefaultSize,
42970    onChange = input_controls_noop,
42971    onFocus = input_controls_noop,
42972    values,
42973    selectedUnits,
42974    setSelectedUnits,
42975    sides,
42976    ...props
42977  }) {
42978    const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxInputControls, 'box-control-input');
42979    const createHandleOnFocus = side => event => {
42980      onFocus(event, {
42981        side
42982      });
42983    };
42984    const handleOnChange = nextValues => {
42985      onChange(nextValues);
42986    };
42987    const handleOnValueChange = (side, next, extra) => {
42988      const nextValues = {
42989        ...values
42990      };
42991      const isNumeric = next !== undefined && !isNaN(parseFloat(next));
42992      const nextValue = isNumeric ? next : undefined;
42993      nextValues[side] = nextValue;
42994  
42995      /**
42996       * Supports changing pair sides. For example, holding the ALT key
42997       * when changing the TOP will also update BOTTOM.
42998       */
42999      // @ts-expect-error - TODO: event.altKey is only present when the change event was
43000      // triggered by a keyboard event. Should this feature be implemented differently so
43001      // it also works with drag events?
43002      if (extra?.event.altKey) {
43003        switch (side) {
43004          case 'top':
43005            nextValues.bottom = nextValue;
43006            break;
43007          case 'bottom':
43008            nextValues.top = nextValue;
43009            break;
43010          case 'left':
43011            nextValues.right = nextValue;
43012            break;
43013          case 'right':
43014            nextValues.left = nextValue;
43015            break;
43016        }
43017      }
43018      handleOnChange(nextValues);
43019    };
43020    const createHandleOnUnitChange = side => next => {
43021      const newUnits = {
43022        ...selectedUnits
43023      };
43024      newUnits[side] = next;
43025      setSelectedUnits(newUnits);
43026    };
43027  
43028    // Filter sides if custom configuration provided, maintaining default order.
43029    const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
43030    return (0,external_React_.createElement)(external_React_.Fragment, null, filteredSides.map(side => {
43031      var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
43032      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
43033      const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
43034      const inputId = [generatedId, side].join('-');
43035      return (0,external_React_.createElement)(InputWrapper, {
43036        key: `box-control-$side}`,
43037        expanded: true
43038      }, (0,external_React_.createElement)(FlexedBoxControlIcon, {
43039        side: side,
43040        sides: sides
43041      }), (0,external_React_.createElement)(tooltip, {
43042        placement: "top-end",
43043        text: LABELS[side]
43044      }, (0,external_React_.createElement)(StyledUnitControl, {
43045        ...props,
43046        __next40pxDefaultSize: __next40pxDefaultSize,
43047        className: "component-box-control__unit-control",
43048        id: inputId,
43049        isPressEnterToChange: true,
43050        value: [parsedQuantity, computedUnit].join(''),
43051        onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),
43052        onUnitChange: createHandleOnUnitChange(side),
43053        onFocus: createHandleOnFocus(side),
43054        label: LABELS[side],
43055        hideLabelFromVision: true
43056      })), (0,external_React_.createElement)(FlexedRangeControl, {
43057        __nextHasNoMarginBottom: true,
43058        __next40pxDefaultSize: __next40pxDefaultSize,
43059        "aria-controls": inputId,
43060        label: LABELS[side],
43061        hideLabelFromVision: true,
43062        onChange: newValue => {
43063          handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
43064        },
43065        min: 0,
43066        max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
43067        step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
43068        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
43069        withInputField: false
43070      }));
43071    }));
43072  }
43073  
43074  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js
43075  
43076  /**
43077   * WordPress dependencies
43078   */
43079  
43080  /**
43081   * Internal dependencies
43082   */
43083  
43084  
43085  
43086  
43087  const groupedSides = ['vertical', 'horizontal'];
43088  function AxialInputControls({
43089    __next40pxDefaultSize,
43090    onChange,
43091    onFocus,
43092    values,
43093    selectedUnits,
43094    setSelectedUnits,
43095    sides,
43096    ...props
43097  }) {
43098    const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(AxialInputControls, `box-control-input`);
43099    const createHandleOnFocus = side => event => {
43100      if (!onFocus) {
43101        return;
43102      }
43103      onFocus(event, {
43104        side
43105      });
43106    };
43107    const handleOnValueChange = (side, next) => {
43108      if (!onChange) {
43109        return;
43110      }
43111      const nextValues = {
43112        ...values
43113      };
43114      const isNumeric = next !== undefined && !isNaN(parseFloat(next));
43115      const nextValue = isNumeric ? next : undefined;
43116      if (side === 'vertical') {
43117        nextValues.top = nextValue;
43118        nextValues.bottom = nextValue;
43119      }
43120      if (side === 'horizontal') {
43121        nextValues.left = nextValue;
43122        nextValues.right = nextValue;
43123      }
43124      onChange(nextValues);
43125    };
43126    const createHandleOnUnitChange = side => next => {
43127      const newUnits = {
43128        ...selectedUnits
43129      };
43130      if (side === 'vertical') {
43131        newUnits.top = next;
43132        newUnits.bottom = next;
43133      }
43134      if (side === 'horizontal') {
43135        newUnits.left = next;
43136        newUnits.right = next;
43137      }
43138      setSelectedUnits(newUnits);
43139    };
43140  
43141    // Filter sides if custom configuration provided, maintaining default order.
43142    const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
43143    return (0,external_React_.createElement)(external_React_.Fragment, null, filteredSides.map(side => {
43144      var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
43145      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left);
43146      const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
43147      const inputId = [generatedId, side].join('-');
43148      return (0,external_React_.createElement)(InputWrapper, {
43149        key: side
43150      }, (0,external_React_.createElement)(FlexedBoxControlIcon, {
43151        side: side,
43152        sides: sides
43153      }), (0,external_React_.createElement)(tooltip, {
43154        placement: "top-end",
43155        text: LABELS[side]
43156      }, (0,external_React_.createElement)(StyledUnitControl, {
43157        ...props,
43158        __next40pxDefaultSize: __next40pxDefaultSize,
43159        className: "component-box-control__unit-control",
43160        id: inputId,
43161        isPressEnterToChange: true,
43162        value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
43163        onChange: newValue => handleOnValueChange(side, newValue),
43164        onUnitChange: createHandleOnUnitChange(side),
43165        onFocus: createHandleOnFocus(side),
43166        label: LABELS[side],
43167        hideLabelFromVision: true,
43168        key: side
43169      })), (0,external_React_.createElement)(FlexedRangeControl, {
43170        __nextHasNoMarginBottom: true,
43171        __next40pxDefaultSize: __next40pxDefaultSize,
43172        "aria-controls": inputId,
43173        label: LABELS[side],
43174        hideLabelFromVision: true,
43175        onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),
43176        min: 0,
43177        max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
43178        step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
43179        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
43180        withInputField: false
43181      }));
43182    }));
43183  }
43184  
43185  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js
43186  
43187  /**
43188   * WordPress dependencies
43189   */
43190  
43191  
43192  
43193  /**
43194   * Internal dependencies
43195   */
43196  
43197  
43198  function LinkedButton({
43199    isLinked,
43200    ...props
43201  }) {
43202    const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');
43203    return (0,external_React_.createElement)(tooltip, {
43204      text: label
43205    }, (0,external_React_.createElement)(build_module_button, {
43206      ...props,
43207      className: "component-box-control__linked-button",
43208      size: "small",
43209      icon: isLinked ? library_link : link_off,
43210      iconSize: 24,
43211      "aria-label": label
43212    }));
43213  }
43214  
43215  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js
43216  
43217  /**
43218   * WordPress dependencies
43219   */
43220  
43221  
43222  
43223  
43224  /**
43225   * Internal dependencies
43226   */
43227  
43228  
43229  
43230  
43231  
43232  
43233  
43234  
43235  
43236  
43237  const defaultInputProps = {
43238    min: 0
43239  };
43240  const box_control_noop = () => {};
43241  function box_control_useUniqueId(idProp) {
43242    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control');
43243    return idProp || instanceId;
43244  }
43245  
43246  /**
43247   * BoxControl components let users set values for Top, Right, Bottom, and Left.
43248   * This can be used as an input control for values like `padding` or `margin`.
43249   *
43250   * ```jsx
43251   * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
43252   * import { useState } from '@wordpress/element';
43253   *
43254   * const Example = () => {
43255   *     const [ values, setValues ] = useState( {
43256   *         top: '50px',
43257   *         left: '10%',
43258   *         right: '10%',
43259   *         bottom: '50px',
43260   *     } );
43261   *
43262   *     return (
43263   *         <BoxControl
43264   *             values={ values }
43265   *             onChange={ ( nextValues ) => setValues( nextValues ) }
43266   *         />
43267   *     );
43268   * };
43269   * ```
43270   */
43271  function BoxControl({
43272    __next40pxDefaultSize = false,
43273    id: idProp,
43274    inputProps = defaultInputProps,
43275    onChange = box_control_noop,
43276    label = (0,external_wp_i18n_namespaceObject.__)('Box Control'),
43277    values: valuesProp,
43278    units,
43279    sides,
43280    splitOnAxis = false,
43281    allowReset = true,
43282    resetValues = DEFAULT_VALUES,
43283    onMouseOver,
43284    onMouseOut
43285  }) {
43286    const [values, setValues] = use_controlled_state(valuesProp, {
43287      fallback: DEFAULT_VALUES
43288    });
43289    const inputValues = values || DEFAULT_VALUES;
43290    const hasInitialValue = isValuesDefined(valuesProp);
43291    const hasOneSide = sides?.length === 1;
43292    const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue);
43293    const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
43294    const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis));
43295  
43296    // Tracking selected units via internal state allows filtering of CSS unit
43297    // only values from being saved while maintaining preexisting unit selection
43298    // behaviour. Filtering CSS only values prevents invalid style values.
43299    const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({
43300      top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
43301      right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
43302      bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],
43303      left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]
43304    });
43305    const id = box_control_useUniqueId(idProp);
43306    const headingId = `$id}-heading`;
43307    const toggleLinked = () => {
43308      setIsLinked(!isLinked);
43309      setSide(getInitialSide(!isLinked, splitOnAxis));
43310    };
43311    const handleOnFocus = (_event, {
43312      side: nextSide
43313    }) => {
43314      setSide(nextSide);
43315    };
43316    const handleOnChange = nextValues => {
43317      onChange(nextValues);
43318      setValues(nextValues);
43319      setIsDirty(true);
43320    };
43321    const handleOnReset = () => {
43322      onChange(resetValues);
43323      setValues(resetValues);
43324      setSelectedUnits(resetValues);
43325      setIsDirty(false);
43326    };
43327    const inputControlProps = {
43328      ...inputProps,
43329      onChange: handleOnChange,
43330      onFocus: handleOnFocus,
43331      isLinked,
43332      units,
43333      selectedUnits,
43334      setSelectedUnits,
43335      sides,
43336      values: inputValues,
43337      onMouseOver,
43338      onMouseOut,
43339      __next40pxDefaultSize
43340    };
43341    return (0,external_React_.createElement)(grid_component, {
43342      id: id,
43343      columns: 3,
43344      templateColumns: "1fr min-content min-content",
43345      role: "group",
43346      "aria-labelledby": headingId
43347    }, (0,external_React_.createElement)(BaseControl.VisualLabel, {
43348      id: headingId
43349    }, label), isLinked && (0,external_React_.createElement)(InputWrapper, null, (0,external_React_.createElement)(FlexedBoxControlIcon, {
43350      side: side,
43351      sides: sides
43352    }), (0,external_React_.createElement)(AllInputControl, {
43353      ...inputControlProps
43354    })), !hasOneSide && (0,external_React_.createElement)(LinkedButtonWrapper, null, (0,external_React_.createElement)(LinkedButton, {
43355      onClick: toggleLinked,
43356      isLinked: isLinked
43357    })), !isLinked && splitOnAxis && (0,external_React_.createElement)(AxialInputControls, {
43358      ...inputControlProps
43359    }), !isLinked && !splitOnAxis && (0,external_React_.createElement)(BoxInputControls, {
43360      ...inputControlProps
43361    }), allowReset && (0,external_React_.createElement)(ResetButton, {
43362      className: "component-box-control__reset-button",
43363      variant: "secondary",
43364      size: "small",
43365      onClick: handleOnReset,
43366      disabled: !isDirty
43367    }, (0,external_wp_i18n_namespaceObject.__)('Reset')));
43368  }
43369  
43370  /* harmony default export */ const box_control = (BoxControl);
43371  
43372  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button-group/index.js
43373  
43374  /**
43375   * External dependencies
43376   */
43377  
43378  /**
43379   * WordPress dependencies
43380   */
43381  
43382  
43383  /**
43384   * Internal dependencies
43385   */
43386  
43387  function UnforwardedButtonGroup(props, ref) {
43388    const {
43389      className,
43390      ...restProps
43391    } = props;
43392    const classes = classnames_default()('components-button-group', className);
43393    return (0,external_React_.createElement)("div", {
43394      ref: ref,
43395      role: "group",
43396      className: classes,
43397      ...restProps
43398    });
43399  }
43400  
43401  /**
43402   * ButtonGroup can be used to group any related buttons together. To emphasize
43403   * related buttons, a group should share a common container.
43404   *
43405   * ```jsx
43406   * import { Button, ButtonGroup } from '@wordpress/components';
43407   *
43408   * const MyButtonGroup = () => (
43409   *   <ButtonGroup>
43410   *     <Button variant="primary">Button 1</Button>
43411   *     <Button variant="primary">Button 2</Button>
43412   *   </ButtonGroup>
43413   * );
43414   * ```
43415   */
43416  const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup);
43417  /* harmony default export */ const button_group = (ButtonGroup);
43418  
43419  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/styles.js
43420  function 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)."; }
43421  /**
43422   * External dependencies
43423   */
43424  
43425  const Elevation =  true ? {
43426    name: "12ip69d",
43427    styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow"
43428  } : 0;
43429  
43430  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/hook.js
43431  /**
43432   * External dependencies
43433   */
43434  
43435  
43436  
43437  /**
43438   * WordPress dependencies
43439   */
43440  
43441  
43442  /**
43443   * Internal dependencies
43444   */
43445  
43446  
43447  
43448  
43449  
43450  
43451  function getBoxShadow(value) {
43452    const boxShadowColor = `rgba(0, 0, 0, $value / 20})`;
43453    const boxShadow = `0 $value}px $value * 2}px 0
43454      $boxShadowColor}`;
43455    return boxShadow;
43456  }
43457  function useElevation(props) {
43458    const {
43459      active,
43460      borderRadius = 'inherit',
43461      className,
43462      focus,
43463      hover,
43464      isInteractive = false,
43465      offset = 0,
43466      value = 0,
43467      ...otherProps
43468    } = useContextSystem(props, 'Elevation');
43469    const cx = useCx();
43470    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
43471      let hoverValue = isValueDefined(hover) ? hover : value * 2;
43472      let activeValue = isValueDefined(active) ? active : value / 2;
43473      if (!isInteractive) {
43474        hoverValue = isValueDefined(hover) ? hover : undefined;
43475        activeValue = isValueDefined(active) ? active : undefined;
43476      }
43477      const transition = `box-shadow $config_values.transitionDuration} $config_values.transitionTimingFunction}`;
43478      const sx = {};
43479      sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({
43480        borderRadius,
43481        bottom: offset,
43482        boxShadow: getBoxShadow(value),
43483        opacity: config_values.elevationIntensity,
43484        left: offset,
43485        right: offset,
43486        top: offset,
43487        transition
43488      }, reduceMotion('transition'),  true ? "" : 0,  true ? "" : 0);
43489      if (isValueDefined(hoverValue)) {
43490        sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0),  true ? "" : 0);
43491      }
43492      if (isValueDefined(activeValue)) {
43493        sx.active = /*#__PURE__*/emotion_react_browser_esm_css("*:active>&{box-shadow:", getBoxShadow(activeValue), ";}" + ( true ? "" : 0),  true ? "" : 0);
43494      }
43495      if (isValueDefined(focus)) {
43496        sx.focus = /*#__PURE__*/emotion_react_browser_esm_css("*:focus>&{box-shadow:", getBoxShadow(focus), ";}" + ( true ? "" : 0),  true ? "" : 0);
43497      }
43498      return cx(Elevation, sx.Base, sx.hover, sx.focus, sx.active, className);
43499    }, [active, borderRadius, className, cx, focus, hover, isInteractive, offset, value]);
43500    return {
43501      ...otherProps,
43502      className: classes,
43503      'aria-hidden': true
43504    };
43505  }
43506  
43507  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/component.js
43508  
43509  /**
43510   * External dependencies
43511   */
43512  
43513  /**
43514   * Internal dependencies
43515   */
43516  
43517  
43518  
43519  
43520  function UnconnectedElevation(props, forwardedRef) {
43521    const elevationProps = useElevation(props);
43522    return (0,external_React_.createElement)(component, {
43523      ...elevationProps,
43524      ref: forwardedRef
43525    });
43526  }
43527  
43528  /**
43529   * `Elevation` is a core component that renders shadow, using the component
43530   * system's shadow system.
43531   *
43532   * The shadow effect is generated using the `value` prop.
43533   *
43534   * ```jsx
43535   * import {
43536   *    __experimentalElevation as Elevation,
43537   *    __experimentalSurface as Surface,
43538   *    __experimentalText as Text,
43539   * } from '@wordpress/components';
43540   *
43541   * function Example() {
43542   *   return (
43543   *     <Surface>
43544   *       <Text>Code is Poetry</Text>
43545   *       <Elevation value={ 5 } />
43546   *     </Surface>
43547   *   );
43548   * }
43549   * ```
43550   */
43551  const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation');
43552  /* harmony default export */ const elevation_component = (component_Elevation);
43553  
43554  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/styles.js
43555  function 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)."; }
43556  /**
43557   * External dependencies
43558   */
43559  
43560  
43561  /**
43562   * Internal dependencies
43563   */
43564  
43565  
43566  // Since the border for `Card` is rendered via the `box-shadow` property
43567  // (as opposed to the `border` property), the value of the border radius needs
43568  // to be adjusted by removing 1px (this is because the `box-shadow` renders
43569  // as an "outer radius").
43570  const adjustedBorderRadius = `calc($config_values.cardBorderRadius} - 1px)`;
43571  const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0),  true ? "" : 0);
43572  const Header =  true ? {
43573    name: "1showjb",
43574    styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}"
43575  } : 0;
43576  const Footer =  true ? {
43577    name: "14n5oej",
43578    styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}"
43579  } : 0;
43580  const Content =  true ? {
43581    name: "13udsys",
43582    styles: "height:100%"
43583  } : 0;
43584  const Body =  true ? {
43585    name: "6ywzd",
43586    styles: "box-sizing:border-box;height:auto;max-height:100%"
43587  } : 0;
43588  const Media =  true ? {
43589    name: "dq805e",
43590    styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}"
43591  } : 0;
43592  const Divider =  true ? {
43593    name: "c990dr",
43594    styles: "box-sizing:border-box;display:block;width:100%"
43595  } : 0;
43596  const 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);
43597  const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0),  true ? "" : 0);
43598  const boxShadowless =  true ? {
43599    name: "1t90u8d",
43600    styles: "box-shadow:none"
43601  } : 0;
43602  const borderless =  true ? {
43603    name: "1e1ncky",
43604    styles: "border:none"
43605  } : 0;
43606  const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0),  true ? "" : 0);
43607  const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0);
43608  const cardPaddings = {
43609    large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0),  true ? "" : 0),
43610    medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0),  true ? "" : 0),
43611    small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
43612    xSmall: xSmallCardPadding,
43613    // The `extraSmall` size is not officially documented, but the following styles
43614    // are kept for legacy reasons to support older values of the `size` prop.
43615    extraSmall: xSmallCardPadding
43616  };
43617  const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0),  true ? "" : 0);
43618  
43619  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/styles.js
43620  /**
43621   * External dependencies
43622   */
43623  
43624  
43625  /**
43626   * Internal dependencies
43627   */
43628  
43629  const Surface = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceColor, ";color:", COLORS.gray[900], ";position:relative;" + ( true ? "" : 0),  true ? "" : 0);
43630  const background = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceBackgroundColor, ";" + ( true ? "" : 0),  true ? "" : 0);
43631  function getBorders({
43632    borderBottom,
43633    borderLeft,
43634    borderRight,
43635    borderTop
43636  }) {
43637    const borderStyle = `1px solid $config_values.surfaceBorderColor}`;
43638    return /*#__PURE__*/emotion_react_browser_esm_css({
43639      borderBottom: borderBottom ? borderStyle : undefined,
43640      borderLeft: borderLeft ? borderStyle : undefined,
43641      borderRight: borderRight ? borderStyle : undefined,
43642      borderTop: borderTop ? borderStyle : undefined
43643    },  true ? "" : 0,  true ? "" : 0);
43644  }
43645  const primary = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0,  true ? "" : 0);
43646  const secondary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTintColor, ";" + ( true ? "" : 0),  true ? "" : 0);
43647  const tertiary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTertiaryColor, ";" + ( true ? "" : 0),  true ? "" : 0);
43648  const customBackgroundSize = surfaceBackgroundSize => [surfaceBackgroundSize, surfaceBackgroundSize].join(' ');
43649  const dottedBackground1 = surfaceBackgroundSizeDotted => ['90deg', [config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(',');
43650  const dottedBackground2 = surfaceBackgroundSizeDotted => [[config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(',');
43651  const dottedBackgroundCombined = surfaceBackgroundSizeDotted => [`linear-gradient( $dottedBackground1(surfaceBackgroundSizeDotted)} ) center`, `linear-gradient( $dottedBackground2(surfaceBackgroundSizeDotted)} ) center`, config_values.surfaceBorderBoldColor].join(',');
43652  const getDotted = (surfaceBackgroundSize, surfaceBackgroundSizeDotted) => /*#__PURE__*/emotion_react_browser_esm_css("background:", dottedBackgroundCombined(surfaceBackgroundSizeDotted), ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0),  true ? "" : 0);
43653  const gridBackground1 = [`$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(',');
43654  const gridBackground2 = ['90deg', `$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(',');
43655  const gridBackgroundCombined = [`linear-gradient( $gridBackground1} )`, `linear-gradient( $gridBackground2} )`].join(',');
43656  const getGrid = surfaceBackgroundSize => {
43657    return /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundColor, ";background-image:", gridBackgroundCombined, ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0),  true ? "" : 0);
43658  };
43659  const getVariant = (variant, surfaceBackgroundSize, surfaceBackgroundSizeDotted) => {
43660    switch (variant) {
43661      case 'dotted':
43662        {
43663          return getDotted(surfaceBackgroundSize, surfaceBackgroundSizeDotted);
43664        }
43665      case 'grid':
43666        {
43667          return getGrid(surfaceBackgroundSize);
43668        }
43669      case 'primary':
43670        {
43671          return primary;
43672        }
43673      case 'secondary':
43674        {
43675          return secondary;
43676        }
43677      case 'tertiary':
43678        {
43679          return tertiary;
43680        }
43681    }
43682  };
43683  
43684  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/hook.js
43685  /**
43686   * WordPress dependencies
43687   */
43688  
43689  
43690  /**
43691   * Internal dependencies
43692   */
43693  
43694  
43695  
43696  function useSurface(props) {
43697    const {
43698      backgroundSize = 12,
43699      borderBottom = false,
43700      borderLeft = false,
43701      borderRight = false,
43702      borderTop = false,
43703      className,
43704      variant = 'primary',
43705      ...otherProps
43706    } = useContextSystem(props, 'Surface');
43707    const cx = useCx();
43708    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
43709      const sx = {
43710        borders: getBorders({
43711          borderBottom,
43712          borderLeft,
43713          borderRight,
43714          borderTop
43715        })
43716      };
43717      return cx(Surface, sx.borders, getVariant(variant, `$backgroundSize}px`, `$backgroundSize - 1}px`), className);
43718    }, [backgroundSize, borderBottom, borderLeft, borderRight, borderTop, className, cx, variant]);
43719    return {
43720      ...otherProps,
43721      className: classes
43722    };
43723  }
43724  
43725  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/hook.js
43726  /**
43727   * WordPress dependencies
43728   */
43729  
43730  
43731  
43732  /**
43733   * Internal dependencies
43734   */
43735  
43736  
43737  
43738  
43739  
43740  function hook_useDeprecatedProps({
43741    elevation,
43742    isElevated,
43743    ...otherProps
43744  }) {
43745    const propsToReturn = {
43746      ...otherProps
43747    };
43748    let computedElevation = elevation;
43749    if (isElevated) {
43750      var _computedElevation;
43751      external_wp_deprecated_default()('Card isElevated prop', {
43752        since: '5.9',
43753        alternative: 'elevation'
43754      });
43755      (_computedElevation = computedElevation) !== null && _computedElevation !== void 0 ? _computedElevation : computedElevation = 2;
43756    }
43757  
43758    // The `elevation` prop should only be passed when it's not `undefined`,
43759    // otherwise it will override the value that gets derived from `useContextSystem`.
43760    if (typeof computedElevation !== 'undefined') {
43761      propsToReturn.elevation = computedElevation;
43762    }
43763    return propsToReturn;
43764  }
43765  function useCard(props) {
43766    const {
43767      className,
43768      elevation = 0,
43769      isBorderless = false,
43770      isRounded = true,
43771      size = 'medium',
43772      ...otherProps
43773    } = useContextSystem(hook_useDeprecatedProps(props), 'Card');
43774    const cx = useCx();
43775    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
43776      return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className);
43777    }, [className, cx, isBorderless, isRounded]);
43778    const surfaceProps = useSurface({
43779      ...otherProps,
43780      className: classes
43781    });
43782    return {
43783      ...surfaceProps,
43784      elevation,
43785      isBorderless,
43786      isRounded,
43787      size
43788    };
43789  }
43790  
43791  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/component.js
43792  
43793  /**
43794   * External dependencies
43795   */
43796  
43797  /**
43798   * WordPress dependencies
43799   */
43800  
43801  
43802  /**
43803   * Internal dependencies
43804   */
43805  
43806  
43807  
43808  
43809  
43810  
43811  
43812  
43813  function UnconnectedCard(props, forwardedRef) {
43814    const {
43815      children,
43816      elevation,
43817      isBorderless,
43818      isRounded,
43819      size,
43820      ...otherProps
43821    } = useCard(props);
43822    const elevationBorderRadius = isRounded ? config_values.cardBorderRadius : 0;
43823    const cx = useCx();
43824    const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx( /*#__PURE__*/emotion_react_browser_esm_css({
43825      borderRadius: elevationBorderRadius
43826    },  true ? "" : 0,  true ? "" : 0)), [cx, elevationBorderRadius]);
43827    const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
43828      const contextProps = {
43829        size,
43830        isBorderless
43831      };
43832      return {
43833        CardBody: contextProps,
43834        CardHeader: contextProps,
43835        CardFooter: contextProps
43836      };
43837    }, [isBorderless, size]);
43838    return (0,external_React_.createElement)(ContextSystemProvider, {
43839      value: contextProviderValue
43840    }, (0,external_React_.createElement)(component, {
43841      ...otherProps,
43842      ref: forwardedRef
43843    }, (0,external_React_.createElement)(component, {
43844      className: cx(Content)
43845    }, children), (0,external_React_.createElement)(elevation_component, {
43846      className: elevationClassName,
43847      isInteractive: false,
43848      value: elevation ? 1 : 0
43849    }), (0,external_React_.createElement)(elevation_component, {
43850      className: elevationClassName,
43851      isInteractive: false,
43852      value: elevation
43853    })));
43854  }
43855  
43856  /**
43857   * `Card` provides a flexible and extensible content container.
43858   * `Card` also provides a convenient set of sub-components such as `CardBody`,
43859   * `CardHeader`, `CardFooter`, and more.
43860   *
43861   * ```jsx
43862   * import {
43863   *   Card,
43864   *   CardHeader,
43865   *   CardBody,
43866   *   CardFooter,
43867   *   __experimentalText as Text,
43868   *   __experimentalHeading as Heading,
43869   * } from `@wordpress/components`;
43870   *
43871   * function Example() {
43872   *   return (
43873   *     <Card>
43874   *       <CardHeader>
43875   *         <Heading level={ 4 }>Card Title</Heading>
43876   *       </CardHeader>
43877   *       <CardBody>
43878   *         <Text>Card Content</Text>
43879   *       </CardBody>
43880   *       <CardFooter>
43881   *         <Text>Card Footer</Text>
43882   *       </CardFooter>
43883   *     </Card>
43884   *   );
43885   * }
43886   * ```
43887   */
43888  const component_Card = contextConnect(UnconnectedCard, 'Card');
43889  /* harmony default export */ const card_component = (component_Card);
43890  
43891  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/styles.js
43892  function 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)."; }
43893  /**
43894   * External dependencies
43895   */
43896  
43897  
43898  /**
43899   * Internal dependencies
43900   */
43901  
43902  const 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);
43903  const Scrollable =  true ? {
43904    name: "13udsys",
43905    styles: "height:100%"
43906  } : 0;
43907  const styles_Content =  true ? {
43908    name: "bjn8wh",
43909    styles: "position:relative"
43910  } : 0;
43911  const styles_smoothScroll =  true ? {
43912    name: "7zq9w",
43913    styles: "scroll-behavior:smooth"
43914  } : 0;
43915  const scrollX =  true ? {
43916    name: "q33xhg",
43917    styles: "overflow-x:auto;overflow-y:hidden"
43918  } : 0;
43919  const scrollY =  true ? {
43920    name: "103x71s",
43921    styles: "overflow-x:hidden;overflow-y:auto"
43922  } : 0;
43923  const scrollAuto =  true ? {
43924    name: "umwchj",
43925    styles: "overflow-y:auto"
43926  } : 0;
43927  
43928  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/hook.js
43929  /**
43930   * WordPress dependencies
43931   */
43932  
43933  
43934  /**
43935   * Internal dependencies
43936   */
43937  
43938  
43939  
43940  
43941  function useScrollable(props) {
43942    const {
43943      className,
43944      scrollDirection = 'y',
43945      smoothScroll = false,
43946      ...otherProps
43947    } = useContextSystem(props, 'Scrollable');
43948    const cx = useCx();
43949    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]);
43950    return {
43951      ...otherProps,
43952      className: classes
43953    };
43954  }
43955  
43956  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/component.js
43957  
43958  /**
43959   * External dependencies
43960   */
43961  
43962  /**
43963   * Internal dependencies
43964   */
43965  
43966  
43967  
43968  
43969  function UnconnectedScrollable(props, forwardedRef) {
43970    const scrollableProps = useScrollable(props);
43971    return (0,external_React_.createElement)(component, {
43972      ...scrollableProps,
43973      ref: forwardedRef
43974    });
43975  }
43976  
43977  /**
43978   * `Scrollable` is a layout component that content in a scrollable container.
43979   *
43980   * ```jsx
43981   * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
43982   *
43983   * function Example() {
43984   *     return (
43985   *         <Scrollable style={ { maxHeight: 200 } }>
43986   *             <div style={ { height: 500 } }>...</div>
43987   *         </Scrollable>
43988   *     );
43989   * }
43990   * ```
43991   */
43992  const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable');
43993  /* harmony default export */ const scrollable_component = (component_Scrollable);
43994  
43995  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/hook.js
43996  /**
43997   * WordPress dependencies
43998   */
43999  
44000  
44001  /**
44002   * Internal dependencies
44003   */
44004  
44005  
44006  
44007  
44008  function useCardBody(props) {
44009    const {
44010      className,
44011      isScrollable = false,
44012      isShady = false,
44013      size = 'medium',
44014      ...otherProps
44015    } = useContextSystem(props, 'CardBody');
44016    const cx = useCx();
44017    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Body, borderRadius, cardPaddings[size], isShady && shady,
44018    // This classname is added for legacy compatibility reasons.
44019    'components-card__body', className), [className, cx, isShady, size]);
44020    return {
44021      ...otherProps,
44022      className: classes,
44023      isScrollable
44024    };
44025  }
44026  
44027  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/component.js
44028  
44029  /**
44030   * External dependencies
44031   */
44032  
44033  /**
44034   * Internal dependencies
44035   */
44036  
44037  
44038  
44039  
44040  
44041  function UnconnectedCardBody(props, forwardedRef) {
44042    const {
44043      isScrollable,
44044      ...otherProps
44045    } = useCardBody(props);
44046    if (isScrollable) {
44047      return (0,external_React_.createElement)(scrollable_component, {
44048        ...otherProps,
44049        ref: forwardedRef
44050      });
44051    }
44052    return (0,external_React_.createElement)(component, {
44053      ...otherProps,
44054      ref: forwardedRef
44055    });
44056  }
44057  
44058  /**
44059   * `CardBody` renders an optional content area for a `Card`.
44060   * Multiple `CardBody` components can be used within `Card` if needed.
44061   *
44062   * ```jsx
44063   * import { Card, CardBody } from `@wordpress/components`;
44064   *
44065   * <Card>
44066   *     <CardBody>
44067   *         ...
44068   *     </CardBody>
44069   * </Card>
44070   * ```
44071   */
44072  const CardBody = contextConnect(UnconnectedCardBody, 'CardBody');
44073  /* harmony default export */ const card_body_component = (CardBody);
44074  
44075  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YZEJGRDQ.js
44076  "use client";
44077  
44078  
44079  
44080  // src/separator/separator.ts
44081  var useSeparator = createHook(
44082    (_a) => {
44083      var _b = _a, { orientation = "horizontal" } = _b, props = __objRest(_b, ["orientation"]);
44084      props = _4R3V3JGP_spreadValues({
44085        role: "separator",
44086        "aria-orientation": orientation
44087      }, props);
44088      return props;
44089    }
44090  );
44091  var Separator = createComponent((props) => {
44092    const htmlProps = useSeparator(props);
44093    return _3ORBWXWF_createElement("hr", htmlProps);
44094  });
44095  if (false) {}
44096  
44097  
44098  
44099  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/styles.js
44100  
44101  function 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)."; }
44102  /**
44103   * External dependencies
44104   */
44105  
44106  
44107  
44108  /**
44109   * Internal dependencies
44110   */
44111  
44112  
44113  const MARGIN_DIRECTIONS = {
44114    vertical: {
44115      start: 'marginLeft',
44116      end: 'marginRight'
44117    },
44118    horizontal: {
44119      start: 'marginTop',
44120      end: 'marginBottom'
44121    }
44122  };
44123  
44124  // Renders the correct margins given the Divider's `orientation` and the writing direction.
44125  // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
44126  // the latter will take priority.
44127  const renderMargin = ({
44128    'aria-orientation': orientation = 'horizontal',
44129    margin,
44130    marginStart,
44131    marginEnd
44132  }) => /*#__PURE__*/emotion_react_browser_esm_css(rtl({
44133    [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin),
44134    [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin)
44135  })(),  true ? "" : 0,  true ? "" : 0);
44136  var divider_styles_ref =  true ? {
44137    name: "1u4hpl4",
44138    styles: "display:inline"
44139  } : 0;
44140  const renderDisplay = ({
44141    'aria-orientation': orientation = 'horizontal'
44142  }) => {
44143    return orientation === 'vertical' ? divider_styles_ref : undefined;
44144  };
44145  const renderBorder = ({
44146    'aria-orientation': orientation = 'horizontal'
44147  }) => {
44148    return /*#__PURE__*/emotion_react_browser_esm_css({
44149      [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor'
44150    },  true ? "" : 0,  true ? "" : 0);
44151  };
44152  const renderSize = ({
44153    'aria-orientation': orientation = 'horizontal'
44154  }) => /*#__PURE__*/emotion_react_browser_esm_css({
44155    height: orientation === 'vertical' ? 'auto' : 0,
44156    width: orientation === 'vertical' ? 0 : 'auto'
44157  },  true ? "" : 0,  true ? "" : 0);
44158  const DividerView = emotion_styled_base_browser_esm("hr",  true ? {
44159    target: "e19on6iw0"
44160  } : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0));
44161  
44162  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/component.js
44163  
44164  /**
44165   * External dependencies
44166   */
44167  // eslint-disable-next-line no-restricted-imports
44168  
44169  
44170  
44171  function UnconnectedDivider(props, forwardedRef) {
44172    const contextProps = useContextSystem(props, 'Divider');
44173    return (0,external_React_.createElement)(Separator, {
44174      render: (0,external_React_.createElement)(DividerView, null),
44175      ...contextProps,
44176      ref: forwardedRef
44177    });
44178  }
44179  
44180  /**
44181   * `Divider` is a layout component that separates groups of related content.
44182   *
44183   * ```js
44184   * import {
44185   *         __experimentalDivider as Divider,
44186   *         __experimentalText as Text,
44187   *         __experimentalVStack as VStack,
44188   * } from `@wordpress/components`;
44189   *
44190   * function Example() {
44191   *     return (
44192   *         <VStack spacing={4}>
44193   *             <Text>Some text here</Text>
44194   *             <Divider />
44195   *             <Text>Some more text here</Text>
44196   *         </VStack>
44197   *     );
44198   * }
44199   * ```
44200   */
44201  const component_Divider = contextConnect(UnconnectedDivider, 'Divider');
44202  /* harmony default export */ const divider_component = (component_Divider);
44203  
44204  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js
44205  /**
44206   * WordPress dependencies
44207   */
44208  
44209  
44210  /**
44211   * Internal dependencies
44212   */
44213  
44214  
44215  
44216  
44217  function useCardDivider(props) {
44218    const {
44219      className,
44220      ...otherProps
44221    } = useContextSystem(props, 'CardDivider');
44222    const cx = useCx();
44223    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Divider, borderColor,
44224    // This classname is added for legacy compatibility reasons.
44225    'components-card__divider', className), [className, cx]);
44226    return {
44227      ...otherProps,
44228      className: classes
44229    };
44230  }
44231  
44232  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/component.js
44233  
44234  /**
44235   * External dependencies
44236   */
44237  
44238  /**
44239   * Internal dependencies
44240   */
44241  
44242  
44243  
44244  
44245  function UnconnectedCardDivider(props, forwardedRef) {
44246    const dividerProps = useCardDivider(props);
44247    return (0,external_React_.createElement)(divider_component, {
44248      ...dividerProps,
44249      ref: forwardedRef
44250    });
44251  }
44252  
44253  /**
44254   * `CardDivider` renders an optional divider within a `Card`.
44255   * It is typically used to divide multiple `CardBody` components from each other.
44256   *
44257   * ```jsx
44258   * import { Card, CardBody, CardDivider } from `@wordpress/components`;
44259   *
44260   * <Card>
44261   *  <CardBody>...</CardBody>
44262   *  <CardDivider />
44263   *  <CardBody>...</CardBody>
44264   * </Card>
44265   * ```
44266   */
44267  const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider');
44268  /* harmony default export */ const card_divider_component = (CardDivider);
44269  
44270  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js
44271  /**
44272   * WordPress dependencies
44273   */
44274  
44275  
44276  /**
44277   * Internal dependencies
44278   */
44279  
44280  
44281  
44282  
44283  function useCardFooter(props) {
44284    const {
44285      className,
44286      justify,
44287      isBorderless = false,
44288      isShady = false,
44289      size = 'medium',
44290      ...otherProps
44291    } = useContextSystem(props, 'CardFooter');
44292    const cx = useCx();
44293    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Footer, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady,
44294    // This classname is added for legacy compatibility reasons.
44295    'components-card__footer', className), [className, cx, isBorderless, isShady, size]);
44296    return {
44297      ...otherProps,
44298      className: classes,
44299      justify
44300    };
44301  }
44302  
44303  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/component.js
44304  
44305  /**
44306   * External dependencies
44307   */
44308  
44309  /**
44310   * Internal dependencies
44311   */
44312  
44313  
44314  
44315  
44316  function UnconnectedCardFooter(props, forwardedRef) {
44317    const footerProps = useCardFooter(props);
44318    return (0,external_React_.createElement)(flex_component, {
44319      ...footerProps,
44320      ref: forwardedRef
44321    });
44322  }
44323  
44324  /**
44325   * `CardFooter` renders an optional footer within a `Card`.
44326   *
44327   * ```jsx
44328   * import { Card, CardBody, CardFooter } from `@wordpress/components`;
44329   *
44330   * <Card>
44331   *     <CardBody>...</CardBody>
44332   *     <CardFooter>...</CardFooter>
44333   * </Card>
44334   * ```
44335   */
44336  const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter');
44337  /* harmony default export */ const card_footer_component = (CardFooter);
44338  
44339  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/hook.js
44340  /**
44341   * WordPress dependencies
44342   */
44343  
44344  
44345  /**
44346   * Internal dependencies
44347   */
44348  
44349  
44350  
44351  
44352  function useCardHeader(props) {
44353    const {
44354      className,
44355      isBorderless = false,
44356      isShady = false,
44357      size = 'medium',
44358      ...otherProps
44359    } = useContextSystem(props, 'CardHeader');
44360    const cx = useCx();
44361    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Header, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady,
44362    // This classname is added for legacy compatibility reasons.
44363    'components-card__header', className), [className, cx, isBorderless, isShady, size]);
44364    return {
44365      ...otherProps,
44366      className: classes
44367    };
44368  }
44369  
44370  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/component.js
44371  
44372  /**
44373   * External dependencies
44374   */
44375  
44376  /**
44377   * Internal dependencies
44378   */
44379  
44380  
44381  
44382  
44383  function UnconnectedCardHeader(props, forwardedRef) {
44384    const headerProps = useCardHeader(props);
44385    return (0,external_React_.createElement)(flex_component, {
44386      ...headerProps,
44387      ref: forwardedRef
44388    });
44389  }
44390  
44391  /**
44392   * `CardHeader` renders an optional header within a `Card`.
44393   *
44394   * ```jsx
44395   * import { Card, CardBody, CardHeader } from `@wordpress/components`;
44396   *
44397   * <Card>
44398   *     <CardHeader>...</CardHeader>
44399   *     <CardBody>...</CardBody>
44400   * </Card>
44401   * ```
44402   */
44403  const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader');
44404  /* harmony default export */ const card_header_component = (CardHeader);
44405  
44406  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/hook.js
44407  /**
44408   * WordPress dependencies
44409   */
44410  
44411  
44412  /**
44413   * Internal dependencies
44414   */
44415  
44416  
44417  
44418  
44419  function useCardMedia(props) {
44420    const {
44421      className,
44422      ...otherProps
44423    } = useContextSystem(props, 'CardMedia');
44424    const cx = useCx();
44425    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Media, borderRadius,
44426    // This classname is added for legacy compatibility reasons.
44427    'components-card__media', className), [className, cx]);
44428    return {
44429      ...otherProps,
44430      className: classes
44431    };
44432  }
44433  
44434  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/component.js
44435  
44436  /**
44437   * External dependencies
44438   */
44439  
44440  /**
44441   * Internal dependencies
44442   */
44443  
44444  
44445  
44446  
44447  function UnconnectedCardMedia(props, forwardedRef) {
44448    const cardMediaProps = useCardMedia(props);
44449    return (0,external_React_.createElement)(component, {
44450      ...cardMediaProps,
44451      ref: forwardedRef
44452    });
44453  }
44454  
44455  /**
44456   * `CardMedia` provides a container for full-bleed content within a `Card`,
44457   * such as images, video, or even just a background color.
44458   *
44459   * @example
44460   * ```jsx
44461   * import { Card, CardBody, CardMedia } from '@wordpress/components';
44462   *
44463   * const Example = () => (
44464   *  <Card>
44465   *      <CardMedia>
44466   *          <img src="..." />
44467   *    </CardMedia>
44468   *    <CardBody>...</CardBody>
44469   *  </Card>
44470   * );
44471   * ```
44472   */
44473  const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia');
44474  /* harmony default export */ const card_media_component = (CardMedia);
44475  
44476  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/checkbox-control/index.js
44477  
44478  /**
44479   * External dependencies
44480   */
44481  
44482  /**
44483   * WordPress dependencies
44484   */
44485  
44486  
44487  
44488  
44489  
44490  /**
44491   * Internal dependencies
44492   */
44493  
44494  /**
44495   * Checkboxes allow the user to select one or more items from a set.
44496   *
44497   * ```jsx
44498   * import { CheckboxControl } from '@wordpress/components';
44499   * import { useState } from '@wordpress/element';
44500   *
44501   * const MyCheckboxControl = () => {
44502   *   const [ isChecked, setChecked ] = useState( true );
44503   *   return (
44504   *     <CheckboxControl
44505   *       label="Is author"
44506   *       help="Is the user a author or not?"
44507   *       checked={ isChecked }
44508   *       onChange={ setChecked }
44509   *     />
44510   *   );
44511   * };
44512   * ```
44513   */
44514  function CheckboxControl(props) {
44515    const {
44516      __nextHasNoMarginBottom,
44517      label,
44518      className,
44519      heading,
44520      checked,
44521      indeterminate,
44522      help,
44523      id: idProp,
44524      onChange,
44525      ...additionalProps
44526    } = props;
44527    if (heading) {
44528      external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', {
44529        alternative: 'a separate element to implement a heading',
44530        since: '5.8'
44531      });
44532    }
44533    const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false);
44534    const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false);
44535  
44536    // Run the following callback every time the `ref` (and the additional
44537    // dependencies) change.
44538    const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => {
44539      if (!node) {
44540        return;
44541      }
44542  
44543      // It cannot be set using an HTML attribute.
44544      node.indeterminate = !!indeterminate;
44545      setShowCheckedIcon(node.matches(':checked'));
44546      setShowIndeterminateIcon(node.matches(':indeterminate'));
44547    }, [checked, indeterminate]);
44548    const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp);
44549    const onChangeValue = event => onChange(event.target.checked);
44550    return (0,external_React_.createElement)(base_control, {
44551      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
44552      label: heading,
44553      id: id,
44554      help: help,
44555      className: classnames_default()('components-checkbox-control', className)
44556    }, (0,external_React_.createElement)("span", {
44557      className: "components-checkbox-control__input-container"
44558    }, (0,external_React_.createElement)("input", {
44559      ref: ref,
44560      id: id,
44561      className: "components-checkbox-control__input",
44562      type: "checkbox",
44563      value: "1",
44564      onChange: onChangeValue,
44565      checked: checked,
44566      "aria-describedby": !!help ? id + '__help' : undefined,
44567      ...additionalProps
44568    }), showIndeterminateIcon ? (0,external_React_.createElement)(icons_build_module_icon, {
44569      icon: library_reset,
44570      className: "components-checkbox-control__indeterminate",
44571      role: "presentation"
44572    }) : null, showCheckedIcon ? (0,external_React_.createElement)(icons_build_module_icon, {
44573      icon: library_check,
44574      className: "components-checkbox-control__checked",
44575      role: "presentation"
44576    }) : null), label && (0,external_React_.createElement)("label", {
44577      className: "components-checkbox-control__label",
44578      htmlFor: id
44579    }, label));
44580  }
44581  /* harmony default export */ const checkbox_control = (CheckboxControl);
44582  
44583  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/clipboard-button/index.js
44584  
44585  /**
44586   * External dependencies
44587   */
44588  
44589  
44590  /**
44591   * WordPress dependencies
44592   */
44593  
44594  
44595  
44596  
44597  /**
44598   * Internal dependencies
44599   */
44600  
44601  const TIMEOUT = 4000;
44602  function ClipboardButton({
44603    className,
44604    children,
44605    onCopy,
44606    onFinishCopy,
44607    text,
44608    ...buttonProps
44609  }) {
44610    external_wp_deprecated_default()('wp.components.ClipboardButton', {
44611      since: '5.8',
44612      alternative: 'wp.compose.useCopyToClipboard'
44613    });
44614    const timeoutId = (0,external_wp_element_namespaceObject.useRef)();
44615    const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => {
44616      onCopy();
44617      if (timeoutId.current) {
44618        clearTimeout(timeoutId.current);
44619      }
44620      if (onFinishCopy) {
44621        timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
44622      }
44623    });
44624    (0,external_wp_element_namespaceObject.useEffect)(() => {
44625      if (timeoutId.current) {
44626        clearTimeout(timeoutId.current);
44627      }
44628    }, []);
44629    const classes = classnames_default()('components-clipboard-button', className);
44630  
44631    // Workaround for inconsistent behavior in Safari, where <textarea> is not
44632    // the document.activeElement at the moment when the copy event fires.
44633    // This causes documentHasSelection() in the copy-handler component to
44634    // mistakenly override the ClipboardButton, and copy a serialized string
44635    // of the current block instead.
44636    const focusOnCopyEventTarget = event => {
44637      // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
44638      event.target.focus();
44639    };
44640    return (0,external_React_.createElement)(build_module_button, {
44641      ...buttonProps,
44642      className: classes,
44643      ref: ref,
44644      onCopy: focusOnCopyEventTarget
44645    }, children);
44646  }
44647  
44648  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js
44649  
44650  /**
44651   * WordPress dependencies
44652   */
44653  
44654  const moreVertical = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
44655    xmlns: "http://www.w3.org/2000/svg",
44656    viewBox: "0 0 24 24"
44657  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
44658    d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
44659  }));
44660  /* harmony default export */ const more_vertical = (moreVertical);
44661  
44662  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/styles.js
44663  function 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)."; }
44664  /**
44665   * External dependencies
44666   */
44667  
44668  
44669  /**
44670   * Internal dependencies
44671   */
44672  
44673  const unstyledButton = as => {
44674    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 ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0),  true ? "" : 0);
44675  };
44676  const itemWrapper =  true ? {
44677    name: "1bcj5ek",
44678    styles: "width:100%;display:block"
44679  } : 0;
44680  const item =  true ? {
44681    name: "150ruhm",
44682    styles: "box-sizing:border-box;width:100%;display:block;margin:0;color:inherit"
44683  } : 0;
44684  const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0),  true ? "" : 0);
44685  const 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);
44686  const styles_borderRadius = config_values.controlBorderRadius;
44687  const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0),  true ? "" : 0);
44688  const 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);
44689  const baseFontHeight = `calc($config_values.fontSize} * $config_values.fontLineHeightBase})`;
44690  
44691  /*
44692   * Math:
44693   * - Use the desired height as the base value
44694   * - Subtract the computed height of (default) text
44695   * - Subtract the effects of border
44696   * - Divide the calculated number by 2, in order to get an individual top/bottom padding
44697   */
44698  const paddingY = `calc(($config_values.controlHeight} - $baseFontHeight} - 2px) / 2)`;
44699  const paddingYSmall = `calc(($config_values.controlHeightSmall} - $baseFontHeight} - 2px) / 2)`;
44700  const paddingYLarge = `calc(($config_values.controlHeightLarge} - $baseFontHeight} - 2px) / 2)`;
44701  const itemSizes = {
44702    small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0),  true ? "" : 0),
44703    medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0),  true ? "" : 0),
44704    large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0),  true ? "" : 0)
44705  };
44706  
44707  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js
44708  /**
44709   * Internal dependencies
44710   */
44711  
44712  
44713  
44714  /**
44715   * Internal dependencies
44716   */
44717  
44718  
44719  function useItemGroup(props) {
44720    const {
44721      className,
44722      isBordered = false,
44723      isRounded = true,
44724      isSeparated = false,
44725      role = 'list',
44726      ...otherProps
44727    } = useContextSystem(props, 'ItemGroup');
44728    const cx = useCx();
44729    const classes = cx(isBordered && bordered, isSeparated && separated, isRounded && styles_rounded, className);
44730    return {
44731      isBordered,
44732      className: classes,
44733      role,
44734      isSeparated,
44735      ...otherProps
44736    };
44737  }
44738  
44739  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/context.js
44740  /**
44741   * WordPress dependencies
44742   */
44743  
44744  
44745  /**
44746   * Internal dependencies
44747   */
44748  
44749  const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({
44750    size: 'medium'
44751  });
44752  const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext);
44753  
44754  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js
44755  
44756  /**
44757   * External dependencies
44758   */
44759  
44760  /**
44761   * Internal dependencies
44762   */
44763  
44764  
44765  
44766  
44767  
44768  function UnconnectedItemGroup(props, forwardedRef) {
44769    const {
44770      isBordered,
44771      isSeparated,
44772      size: sizeProp,
44773      ...otherProps
44774    } = useItemGroup(props);
44775    const {
44776      size: contextSize
44777    } = useItemGroupContext();
44778    const spacedAround = !isBordered && !isSeparated;
44779    const size = sizeProp || contextSize;
44780    const contextValue = {
44781      spacedAround,
44782      size
44783    };
44784    return (0,external_React_.createElement)(ItemGroupContext.Provider, {
44785      value: contextValue
44786    }, (0,external_React_.createElement)(component, {
44787      ...otherProps,
44788      ref: forwardedRef
44789    }));
44790  }
44791  
44792  /**
44793   * `ItemGroup` displays a list of `Item`s grouped and styled together.
44794   *
44795   * ```jsx
44796   * import {
44797   *   __experimentalItemGroup as ItemGroup,
44798   *   __experimentalItem as Item,
44799   * } from '@wordpress/components';
44800   *
44801   * function Example() {
44802   *   return (
44803   *     <ItemGroup>
44804   *       <Item>Code</Item>
44805   *       <Item>is</Item>
44806   *       <Item>Poetry</Item>
44807   *     </ItemGroup>
44808   *   );
44809   * }
44810   * ```
44811   */
44812  const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup');
44813  /* harmony default export */ const item_group_component = (ItemGroup);
44814  
44815  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js
44816  const GRADIENT_MARKERS_WIDTH = 16;
44817  const INSERT_POINT_WIDTH = 16;
44818  const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
44819  const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
44820  const MINIMUM_SIGNIFICANT_MOVE = 5;
44821  const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
44822  const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
44823  
44824  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js
44825  /**
44826   * Internal dependencies
44827   */
44828  
44829  /**
44830   * Clamps a number between 0 and 100.
44831   *
44832   * @param value Value to clamp.
44833   *
44834   * @return Value clamped between 0 and 100.
44835   */
44836  function clampPercent(value) {
44837    return Math.max(0, Math.min(100, value));
44838  }
44839  
44840  /**
44841   * Check if a control point is overlapping with another.
44842   *
44843   * @param value        Array of control points.
44844   * @param initialIndex Index of the position to test.
44845   * @param newPosition  New position of the control point.
44846   * @param minDistance  Distance considered to be overlapping.
44847   *
44848   * @return True if the point is overlapping.
44849   */
44850  function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
44851    const initialPosition = value[initialIndex].position;
44852    const minPosition = Math.min(initialPosition, newPosition);
44853    const maxPosition = Math.max(initialPosition, newPosition);
44854    return value.some(({
44855      position
44856    }, index) => {
44857      return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
44858    });
44859  }
44860  
44861  /**
44862   * Adds a control point from an array and returns the new array.
44863   *
44864   * @param points   Array of control points.
44865   * @param position Position to insert the new point.
44866   * @param color    Color to update the control point at index.
44867   *
44868   * @return New array of control points.
44869   */
44870  function addControlPoint(points, position, color) {
44871    const nextIndex = points.findIndex(point => point.position > position);
44872    const newPoint = {
44873      color,
44874      position
44875    };
44876    const newPoints = points.slice();
44877    newPoints.splice(nextIndex - 1, 0, newPoint);
44878    return newPoints;
44879  }
44880  
44881  /**
44882   * Removes a control point from an array and returns the new array.
44883   *
44884   * @param points Array of control points.
44885   * @param index  Index to remove.
44886   *
44887   * @return New array of control points.
44888   */
44889  function removeControlPoint(points, index) {
44890    return points.filter((_point, pointIndex) => {
44891      return pointIndex !== index;
44892    });
44893  }
44894  /**
44895   * Updates a control point from an array and returns the new array.
44896   *
44897   * @param points   Array of control points.
44898   * @param index    Index to update.
44899   * @param newPoint New control point to replace the index.
44900   *
44901   * @return New array of control points.
44902   */
44903  function updateControlPoint(points, index, newPoint) {
44904    const newValue = points.slice();
44905    newValue[index] = newPoint;
44906    return newValue;
44907  }
44908  
44909  /**
44910   * Updates the position of a control point from an array and returns the new array.
44911   *
44912   * @param points      Array of control points.
44913   * @param index       Index to update.
44914   * @param newPosition Position to move the control point at index.
44915   *
44916   * @return New array of control points.
44917   */
44918  function updateControlPointPosition(points, index, newPosition) {
44919    if (isOverlapping(points, index, newPosition)) {
44920      return points;
44921    }
44922    const newPoint = {
44923      ...points[index],
44924      position: newPosition
44925    };
44926    return updateControlPoint(points, index, newPoint);
44927  }
44928  
44929  /**
44930   * Updates the position of a control point from an array and returns the new array.
44931   *
44932   * @param points   Array of control points.
44933   * @param index    Index to update.
44934   * @param newColor Color to update the control point at index.
44935   *
44936   * @return New array of control points.
44937   */
44938  function updateControlPointColor(points, index, newColor) {
44939    const newPoint = {
44940      ...points[index],
44941      color: newColor
44942    };
44943    return updateControlPoint(points, index, newPoint);
44944  }
44945  
44946  /**
44947   * Updates the position of a control point from an array and returns the new array.
44948   *
44949   * @param points   Array of control points.
44950   * @param position Position of the color stop.
44951   * @param newColor Color to update the control point at index.
44952   *
44953   * @return New array of control points.
44954   */
44955  function updateControlPointColorByPosition(points, position, newColor) {
44956    const index = points.findIndex(point => point.position === position);
44957    return updateControlPointColor(points, index, newColor);
44958  }
44959  
44960  /**
44961   * Gets the horizontal coordinate when dragging a control point with the mouse.
44962   *
44963   * @param mouseXcoordinate Horizontal coordinate of the mouse position.
44964   * @param containerElement Container for the gradient picker.
44965   *
44966   * @return Whole number percentage from the left.
44967   */
44968  
44969  function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {
44970    if (!containerElement) {
44971      return;
44972    }
44973    const {
44974      x,
44975      width
44976    } = containerElement.getBoundingClientRect();
44977    const absolutePositionValue = mouseXCoordinate - x;
44978    return Math.round(clampPercent(absolutePositionValue * 100 / width));
44979  }
44980  
44981  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js
44982  
44983  /**
44984   * External dependencies
44985   */
44986  
44987  
44988  
44989  /**
44990   * WordPress dependencies
44991   */
44992  
44993  
44994  
44995  
44996  
44997  /**
44998   * Internal dependencies
44999   */
45000  
45001  
45002  
45003  
45004  
45005  
45006  
45007  
45008  function ControlPointButton({
45009    isOpen,
45010    position,
45011    color,
45012    ...additionalProps
45013  }) {
45014    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton);
45015    const descriptionId = `components-custom-gradient-picker__control-point-button-description-$instanceId}`;
45016    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(build_module_button, {
45017      "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(
45018      // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
45019      (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
45020      "aria-describedby": descriptionId,
45021      "aria-haspopup": "true",
45022      "aria-expanded": isOpen,
45023      className: classnames_default()('components-custom-gradient-picker__control-point-button', {
45024        'is-active': isOpen
45025      }),
45026      ...additionalProps
45027    }), (0,external_React_.createElement)(visually_hidden_component, {
45028      id: descriptionId
45029    }, (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.')));
45030  }
45031  function GradientColorPickerDropdown({
45032    isRenderedInSidebar,
45033    className,
45034    ...props
45035  }) {
45036    // Open the popover below the gradient control/insertion point
45037    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
45038      placement: 'bottom',
45039      offset: 8,
45040      // Disabling resize as it would otherwise cause the popover to show
45041      // scrollbars while dragging the color picker's handle close to the
45042      // popover edge.
45043      resize: false
45044    }), []);
45045    const mergedClassName = classnames_default()('components-custom-gradient-picker__control-point-dropdown', className);
45046    return (0,external_React_.createElement)(CustomColorPickerDropdown, {
45047      isRenderedInSidebar: isRenderedInSidebar,
45048      popoverProps: popoverProps,
45049      className: mergedClassName,
45050      ...props
45051    });
45052  }
45053  function ControlPoints({
45054    disableRemove,
45055    disableAlpha,
45056    gradientPickerDomRef,
45057    ignoreMarkerPosition,
45058    value: controlPoints,
45059    onChange,
45060    onStartControlPointChange,
45061    onStopControlPointChange,
45062    __experimentalIsRenderedInSidebar
45063  }) {
45064    const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)();
45065    const onMouseMove = event => {
45066      if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
45067        return;
45068      }
45069      const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);
45070      const {
45071        initialPosition,
45072        index,
45073        significantMoveHappened
45074      } = controlPointMoveState.current;
45075      if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {
45076        controlPointMoveState.current.significantMoveHappened = true;
45077      }
45078      onChange(updateControlPointPosition(controlPoints, index, relativePosition));
45079    };
45080    const cleanEventListeners = () => {
45081      if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
45082        window.removeEventListener('mousemove', onMouseMove);
45083        window.removeEventListener('mouseup', cleanEventListeners);
45084        onStopControlPointChange();
45085        controlPointMoveState.current.listenersActivated = false;
45086      }
45087    };
45088  
45089    // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
45090    // This memoization would prevent the event listeners from being properly cleaned.
45091    // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
45092    const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)();
45093    cleanEventListenersRef.current = cleanEventListeners;
45094    (0,external_wp_element_namespaceObject.useEffect)(() => {
45095      return () => {
45096        cleanEventListenersRef.current?.();
45097      };
45098    }, []);
45099    return (0,external_React_.createElement)(external_React_.Fragment, null, controlPoints.map((point, index) => {
45100      const initialPosition = point?.position;
45101      return ignoreMarkerPosition !== initialPosition && (0,external_React_.createElement)(GradientColorPickerDropdown, {
45102        isRenderedInSidebar: __experimentalIsRenderedInSidebar,
45103        key: index,
45104        onClose: onStopControlPointChange,
45105        renderToggle: ({
45106          isOpen,
45107          onToggle
45108        }) => (0,external_React_.createElement)(ControlPointButton, {
45109          key: index,
45110          onClick: () => {
45111            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
45112              return;
45113            }
45114            if (isOpen) {
45115              onStopControlPointChange();
45116            } else {
45117              onStartControlPointChange();
45118            }
45119            onToggle();
45120          },
45121          onMouseDown: () => {
45122            if (window && window.addEventListener) {
45123              controlPointMoveState.current = {
45124                initialPosition,
45125                index,
45126                significantMoveHappened: false,
45127                listenersActivated: true
45128              };
45129              onStartControlPointChange();
45130              window.addEventListener('mousemove', onMouseMove);
45131              window.addEventListener('mouseup', cleanEventListeners);
45132            }
45133          },
45134          onKeyDown: event => {
45135            if (event.code === 'ArrowLeft') {
45136              // Stop propagation of the key press event to avoid focus moving
45137              // to another editor area.
45138              event.stopPropagation();
45139              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
45140            } else if (event.code === 'ArrowRight') {
45141              // Stop propagation of the key press event to avoid focus moving
45142              // to another editor area.
45143              event.stopPropagation();
45144              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
45145            }
45146          },
45147          isOpen: isOpen,
45148          position: point.position,
45149          color: point.color
45150        }),
45151        renderContent: ({
45152          onClose
45153        }) => (0,external_React_.createElement)(dropdown_content_wrapper, {
45154          paddingSize: "none"
45155        }, (0,external_React_.createElement)(LegacyAdapter, {
45156          enableAlpha: !disableAlpha,
45157          color: point.color,
45158          onChange: color => {
45159            onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString()));
45160          }
45161        }), !disableRemove && controlPoints.length > 2 && (0,external_React_.createElement)(h_stack_component, {
45162          className: "components-custom-gradient-picker__remove-control-point-wrapper",
45163          alignment: "center"
45164        }, (0,external_React_.createElement)(build_module_button, {
45165          onClick: () => {
45166            onChange(removeControlPoint(controlPoints, index));
45167            onClose();
45168          },
45169          variant: "link"
45170        }, (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')))),
45171        style: {
45172          left: `$point.position}%`,
45173          transform: 'translateX( -50% )'
45174        }
45175      });
45176    }));
45177  }
45178  function InsertPoint({
45179    value: controlPoints,
45180    onChange,
45181    onOpenInserter,
45182    onCloseInserter,
45183    insertPosition,
45184    disableAlpha,
45185    __experimentalIsRenderedInSidebar
45186  }) {
45187    const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false);
45188    return (0,external_React_.createElement)(GradientColorPickerDropdown, {
45189      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
45190      className: "components-custom-gradient-picker__inserter",
45191      onClose: () => {
45192        onCloseInserter();
45193      },
45194      renderToggle: ({
45195        isOpen,
45196        onToggle
45197      }) => (0,external_React_.createElement)(build_module_button, {
45198        "aria-expanded": isOpen,
45199        "aria-haspopup": "true",
45200        onClick: () => {
45201          if (isOpen) {
45202            onCloseInserter();
45203          } else {
45204            setAlreadyInsertedPoint(false);
45205            onOpenInserter();
45206          }
45207          onToggle();
45208        },
45209        className: "components-custom-gradient-picker__insert-point-dropdown",
45210        icon: library_plus
45211      }),
45212      renderContent: () => (0,external_React_.createElement)(dropdown_content_wrapper, {
45213        paddingSize: "none"
45214      }, (0,external_React_.createElement)(LegacyAdapter, {
45215        enableAlpha: !disableAlpha,
45216        onChange: color => {
45217          if (!alreadyInsertedPoint) {
45218            onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString()));
45219            setAlreadyInsertedPoint(true);
45220          } else {
45221            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString()));
45222          }
45223        }
45224      })),
45225      style: insertPosition !== null ? {
45226        left: `$insertPosition}%`,
45227        transform: 'translateX( -50% )'
45228      } : undefined
45229    });
45230  }
45231  ControlPoints.InsertPoint = InsertPoint;
45232  /* harmony default export */ const control_points = (ControlPoints);
45233  
45234  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js
45235  
45236  /**
45237   * External dependencies
45238   */
45239  
45240  
45241  /**
45242   * WordPress dependencies
45243   */
45244  
45245  
45246  /**
45247   * Internal dependencies
45248   */
45249  
45250  
45251  
45252  const customGradientBarReducer = (state, action) => {
45253    switch (action.type) {
45254      case 'MOVE_INSERTER':
45255        if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
45256          return {
45257            id: 'MOVING_INSERTER',
45258            insertPosition: action.insertPosition
45259          };
45260        }
45261        break;
45262      case 'STOP_INSERTER_MOVE':
45263        if (state.id === 'MOVING_INSERTER') {
45264          return {
45265            id: 'IDLE'
45266          };
45267        }
45268        break;
45269      case 'OPEN_INSERTER':
45270        if (state.id === 'MOVING_INSERTER') {
45271          return {
45272            id: 'INSERTING_CONTROL_POINT',
45273            insertPosition: state.insertPosition
45274          };
45275        }
45276        break;
45277      case 'CLOSE_INSERTER':
45278        if (state.id === 'INSERTING_CONTROL_POINT') {
45279          return {
45280            id: 'IDLE'
45281          };
45282        }
45283        break;
45284      case 'START_CONTROL_CHANGE':
45285        if (state.id === 'IDLE') {
45286          return {
45287            id: 'MOVING_CONTROL_POINT'
45288          };
45289        }
45290        break;
45291      case 'STOP_CONTROL_CHANGE':
45292        if (state.id === 'MOVING_CONTROL_POINT') {
45293          return {
45294            id: 'IDLE'
45295          };
45296        }
45297        break;
45298    }
45299    return state;
45300  };
45301  const customGradientBarReducerInitialState = {
45302    id: 'IDLE'
45303  };
45304  function CustomGradientBar({
45305    background,
45306    hasGradient,
45307    value: controlPoints,
45308    onChange,
45309    disableInserter = false,
45310    disableAlpha = false,
45311    __experimentalIsRenderedInSidebar = false
45312  }) {
45313    const gradientMarkersContainerDomRef = (0,external_wp_element_namespaceObject.useRef)(null);
45314    const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
45315    const onMouseEnterAndMove = event => {
45316      if (!gradientMarkersContainerDomRef.current) {
45317        return;
45318      }
45319      const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);
45320  
45321      // If the insert point is close to an existing control point don't show it.
45322      if (controlPoints.some(({
45323        position
45324      }) => {
45325        return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
45326      })) {
45327        if (gradientBarState.id === 'MOVING_INSERTER') {
45328          gradientBarStateDispatch({
45329            type: 'STOP_INSERTER_MOVE'
45330          });
45331        }
45332        return;
45333      }
45334      gradientBarStateDispatch({
45335        type: 'MOVE_INSERTER',
45336        insertPosition
45337      });
45338    };
45339    const onMouseLeave = () => {
45340      gradientBarStateDispatch({
45341        type: 'STOP_INSERTER_MOVE'
45342      });
45343    };
45344    const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
45345    const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
45346    return (0,external_React_.createElement)("div", {
45347      className: classnames_default()('components-custom-gradient-picker__gradient-bar', {
45348        'has-gradient': hasGradient
45349      }),
45350      onMouseEnter: onMouseEnterAndMove,
45351      onMouseMove: onMouseEnterAndMove,
45352      onMouseLeave: onMouseLeave
45353    }, (0,external_React_.createElement)("div", {
45354      className: "components-custom-gradient-picker__gradient-bar-background",
45355      style: {
45356        background,
45357        opacity: hasGradient ? 1 : 0.4
45358      }
45359    }), (0,external_React_.createElement)("div", {
45360      ref: gradientMarkersContainerDomRef,
45361      className: "components-custom-gradient-picker__markers-container"
45362    }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0,external_React_.createElement)(control_points.InsertPoint, {
45363      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45364      disableAlpha: disableAlpha,
45365      insertPosition: gradientBarState.insertPosition,
45366      value: controlPoints,
45367      onChange: onChange,
45368      onOpenInserter: () => {
45369        gradientBarStateDispatch({
45370          type: 'OPEN_INSERTER'
45371        });
45372      },
45373      onCloseInserter: () => {
45374        gradientBarStateDispatch({
45375          type: 'CLOSE_INSERTER'
45376        });
45377      }
45378    }), (0,external_React_.createElement)(control_points, {
45379      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45380      disableAlpha: disableAlpha,
45381      disableRemove: disableInserter,
45382      gradientPickerDomRef: gradientMarkersContainerDomRef,
45383      ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
45384      value: controlPoints,
45385      onChange: onChange,
45386      onStartControlPointChange: () => {
45387        gradientBarStateDispatch({
45388          type: 'START_CONTROL_CHANGE'
45389        });
45390      },
45391      onStopControlPointChange: () => {
45392        gradientBarStateDispatch({
45393          type: 'STOP_CONTROL_CHANGE'
45394        });
45395      }
45396    })));
45397  }
45398  
45399  // EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js
45400  var build_node = __webpack_require__(8924);
45401  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js
45402  /**
45403   * WordPress dependencies
45404   */
45405  
45406  const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
45407  const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
45408  const HORIZONTAL_GRADIENT_ORIENTATION = {
45409    type: 'angular',
45410    value: '90'
45411  };
45412  const GRADIENT_OPTIONS = [{
45413    value: 'linear-gradient',
45414    label: (0,external_wp_i18n_namespaceObject.__)('Linear')
45415  }, {
45416    value: 'radial-gradient',
45417    label: (0,external_wp_i18n_namespaceObject.__)('Radial')
45418  }];
45419  const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
45420    top: 0,
45421    'top right': 45,
45422    'right top': 45,
45423    right: 90,
45424    'right bottom': 135,
45425    'bottom right': 135,
45426    bottom: 180,
45427    'bottom left': 225,
45428    'left bottom': 225,
45429    left: 270,
45430    'top left': 315,
45431    'left top': 315
45432  };
45433  
45434  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js
45435  /**
45436   * External dependencies
45437   */
45438  
45439  function serializeGradientColor({
45440    type,
45441    value
45442  }) {
45443    if (type === 'literal') {
45444      return value;
45445    }
45446    if (type === 'hex') {
45447      return `#$value}`;
45448    }
45449    return `$type}($value.join(',')})`;
45450  }
45451  function serializeGradientPosition(position) {
45452    if (!position) {
45453      return '';
45454    }
45455    const {
45456      value,
45457      type
45458    } = position;
45459    return `$value}$type}`;
45460  }
45461  function serializeGradientColorStop({
45462    type,
45463    value,
45464    length
45465  }) {
45466    return `$serializeGradientColor({
45467      type,
45468      value
45469    })} $serializeGradientPosition(length)}`;
45470  }
45471  function serializeGradientOrientation(orientation) {
45472    if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {
45473      return;
45474    }
45475    return `$orientation.value}deg`;
45476  }
45477  function serializeGradient({
45478    type,
45479    orientation,
45480    colorStops
45481  }) {
45482    const serializedOrientation = serializeGradientOrientation(orientation);
45483    const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {
45484      const getNumericStopValue = colorStop => {
45485        return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);
45486      };
45487      return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);
45488    }).map(serializeGradientColorStop);
45489    return `$type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;
45490  }
45491  
45492  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js
45493  /**
45494   * External dependencies
45495   */
45496  
45497  
45498  
45499  
45500  /**
45501   * Internal dependencies
45502   */
45503  
45504  
45505  k([names]);
45506  function getLinearGradientRepresentation(gradientAST) {
45507    return serializeGradient({
45508      type: 'linear-gradient',
45509      orientation: HORIZONTAL_GRADIENT_ORIENTATION,
45510      colorStops: gradientAST.colorStops
45511    });
45512  }
45513  function hasUnsupportedLength(item) {
45514    return item.length === undefined || item.length.type !== '%';
45515  }
45516  function getGradientAstWithDefault(value) {
45517    // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
45518    // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
45519    let gradientAST;
45520    let hasGradient = !!value;
45521    const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT;
45522    try {
45523      gradientAST = build_node.parse(valueToParse)[0];
45524    } catch (error) {
45525      // eslint-disable-next-line no-console
45526      console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);
45527      gradientAST = build_node.parse(DEFAULT_GRADIENT)[0];
45528      hasGradient = false;
45529    }
45530    if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {
45531      gradientAST.orientation = {
45532        type: 'angular',
45533        value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()
45534      };
45535    }
45536    if (gradientAST.colorStops.some(hasUnsupportedLength)) {
45537      const {
45538        colorStops
45539      } = gradientAST;
45540      const step = 100 / (colorStops.length - 1);
45541      colorStops.forEach((stop, index) => {
45542        stop.length = {
45543          value: `$step * index}`,
45544          type: '%'
45545        };
45546      });
45547    }
45548    return {
45549      gradientAST,
45550      hasGradient
45551    };
45552  }
45553  function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
45554    return {
45555      ...gradientAST,
45556      colorStops: newControlPoints.map(({
45557        position,
45558        color
45559      }) => {
45560        const {
45561          r,
45562          g,
45563          b,
45564          a
45565        } = w(color).toRgb();
45566        return {
45567          length: {
45568            type: '%',
45569            value: position?.toString()
45570          },
45571          type: a < 1 ? 'rgba' : 'rgb',
45572          value: a < 1 ? [`$r}`, `$g}`, `$b}`, `$a}`] : [`$r}`, `$g}`, `$b}`]
45573        };
45574      })
45575    };
45576  }
45577  function getStopCssColor(colorStop) {
45578    switch (colorStop.type) {
45579      case 'hex':
45580        return `#$colorStop.value}`;
45581      case 'literal':
45582        return colorStop.value;
45583      case 'rgb':
45584      case 'rgba':
45585        return `$colorStop.type}($colorStop.value.join(',')})`;
45586      default:
45587        // Should be unreachable if passing an AST from gradient-parser.
45588        // See https://github.com/rafaelcaricio/gradient-parser#ast.
45589        return 'transparent';
45590    }
45591  }
45592  
45593  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js
45594  
45595  function 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)."; }
45596  /**
45597   * External dependencies
45598   */
45599  
45600  /**
45601   * Internal dependencies
45602   */
45603  
45604  const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
45605    target: "e10bzpgi1"
45606  } : 0)( true ? {
45607    name: "1gvx10y",
45608    styles: "flex-grow:5"
45609  } : 0);
45610  const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component,  true ? {
45611    target: "e10bzpgi0"
45612  } : 0)( true ? {
45613    name: "1gvx10y",
45614    styles: "flex-grow:5"
45615  } : 0);
45616  
45617  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js
45618  
45619  /**
45620   * External dependencies
45621   */
45622  
45623  /**
45624   * WordPress dependencies
45625   */
45626  
45627  
45628  /**
45629   * Internal dependencies
45630   */
45631  
45632  
45633  
45634  
45635  
45636  
45637  
45638  
45639  
45640  const GradientAnglePicker = ({
45641    gradientAST,
45642    hasGradient,
45643    onChange
45644  }) => {
45645    var _gradientAST$orientat;
45646    const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
45647    const onAngleChange = newAngle => {
45648      onChange(serializeGradient({
45649        ...gradientAST,
45650        orientation: {
45651          type: 'angular',
45652          value: `$newAngle}`
45653        }
45654      }));
45655    };
45656    return (0,external_React_.createElement)(angle_picker_control, {
45657      onChange: onAngleChange,
45658      value: hasGradient ? angle : ''
45659    });
45660  };
45661  const GradientTypePicker = ({
45662    gradientAST,
45663    hasGradient,
45664    onChange
45665  }) => {
45666    const {
45667      type
45668    } = gradientAST;
45669    const onSetLinearGradient = () => {
45670      onChange(serializeGradient({
45671        ...gradientAST,
45672        orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,
45673        type: 'linear-gradient'
45674      }));
45675    };
45676    const onSetRadialGradient = () => {
45677      const {
45678        orientation,
45679        ...restGradientAST
45680      } = gradientAST;
45681      onChange(serializeGradient({
45682        ...restGradientAST,
45683        type: 'radial-gradient'
45684      }));
45685    };
45686    const handleOnChange = next => {
45687      if (next === 'linear-gradient') {
45688        onSetLinearGradient();
45689      }
45690      if (next === 'radial-gradient') {
45691        onSetRadialGradient();
45692      }
45693    };
45694    return (0,external_React_.createElement)(select_control, {
45695      __nextHasNoMarginBottom: true,
45696      className: "components-custom-gradient-picker__type-picker",
45697      label: (0,external_wp_i18n_namespaceObject.__)('Type'),
45698      labelPosition: "top",
45699      onChange: handleOnChange,
45700      options: GRADIENT_OPTIONS,
45701      size: "__unstable-large",
45702      value: hasGradient ? type : undefined
45703    });
45704  };
45705  
45706  /**
45707   * CustomGradientPicker is a React component that renders a UI for specifying
45708   * linear or radial gradients. Radial gradients are displayed in the picker as
45709   * a slice of the gradient from the center to the outside.
45710   *
45711   * ```jsx
45712   * import { CustomGradientPicker } from '@wordpress/components';
45713   * import { useState } from '@wordpress/element';
45714   *
45715   * const MyCustomGradientPicker = () => {
45716   *   const [ gradient, setGradient ] = useState();
45717   *
45718   *   return (
45719   *     <CustomGradientPicker
45720   *            value={ gradient }
45721   *            onChange={ setGradient }
45722   *     />
45723   *   );
45724   * };
45725   * ```
45726   */
45727  function CustomGradientPicker({
45728    value,
45729    onChange,
45730    __experimentalIsRenderedInSidebar = false
45731  }) {
45732    const {
45733      gradientAST,
45734      hasGradient
45735    } = getGradientAstWithDefault(value);
45736  
45737    // On radial gradients the bar should display a linear gradient.
45738    // On radial gradients the bar represents a slice of the gradient from the center until the outside.
45739    // On liner gradients the bar represents the color stops from left to right independently of the angle.
45740    const background = getLinearGradientRepresentation(gradientAST);
45741  
45742    // Control points color option may be hex from presets, custom colors will be rgb.
45743    // The position should always be a percentage.
45744    const controlPoints = gradientAST.colorStops.map(colorStop => {
45745      return {
45746        color: getStopCssColor(colorStop),
45747        // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
45748        // TypeScript doesn't know that `colorStop.length` is not undefined here.
45749        // @ts-expect-error
45750        position: parseInt(colorStop.length.value)
45751      };
45752    });
45753    return (0,external_React_.createElement)(v_stack_component, {
45754      spacing: 4,
45755      className: "components-custom-gradient-picker"
45756    }, (0,external_React_.createElement)(CustomGradientBar, {
45757      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45758      background: background,
45759      hasGradient: hasGradient,
45760      value: controlPoints,
45761      onChange: newControlPoints => {
45762        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));
45763      }
45764    }), (0,external_React_.createElement)(flex_component, {
45765      gap: 3,
45766      className: "components-custom-gradient-picker__ui-line"
45767    }, (0,external_React_.createElement)(SelectWrapper, null, (0,external_React_.createElement)(GradientTypePicker, {
45768      gradientAST: gradientAST,
45769      hasGradient: hasGradient,
45770      onChange: onChange
45771    })), (0,external_React_.createElement)(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0,external_React_.createElement)(GradientAnglePicker, {
45772      gradientAST: gradientAST,
45773      hasGradient: hasGradient,
45774      onChange: onChange
45775    }))));
45776  }
45777  /* harmony default export */ const custom_gradient_picker = (CustomGradientPicker);
45778  
45779  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/gradient-picker/index.js
45780  
45781  /**
45782   * WordPress dependencies
45783   */
45784  
45785  
45786  
45787  
45788  /**
45789   * Internal dependencies
45790   */
45791  
45792  
45793  
45794  
45795  // The Multiple Origin Gradients have a `gradients` property (an array of
45796  // gradient objects), while Single Origin ones have a `gradient` property.
45797  const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);
45798  const isMultipleOriginArray = arr => {
45799    return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
45800  };
45801  function SingleOrigin({
45802    className,
45803    clearGradient,
45804    gradients,
45805    onChange,
45806    value,
45807    ...additionalProps
45808  }) {
45809    const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => {
45810      return gradients.map(({
45811        gradient,
45812        name,
45813        slug
45814      }, index) => (0,external_React_.createElement)(build_module_circular_option_picker.Option, {
45815        key: slug,
45816        value: gradient,
45817        isSelected: value === gradient,
45818        tooltipText: name ||
45819        // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
45820        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient),
45821        style: {
45822          color: 'rgba( 0,0,0,0 )',
45823          background: gradient
45824        },
45825        onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
45826        "aria-label": name ?
45827        // translators: %s: The name of the gradient e.g: "Angular red to blue".
45828        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) :
45829        // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
45830        (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient)
45831      }));
45832    }, [gradients, value, onChange, clearGradient]);
45833    return (0,external_React_.createElement)(build_module_circular_option_picker.OptionGroup, {
45834      className: className,
45835      options: gradientOptions,
45836      ...additionalProps
45837    });
45838  }
45839  function MultipleOrigin({
45840    className,
45841    clearGradient,
45842    gradients,
45843    onChange,
45844    value,
45845    headingLevel
45846  }) {
45847    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin);
45848    return (0,external_React_.createElement)(v_stack_component, {
45849      spacing: 3,
45850      className: className
45851    }, gradients.map(({
45852      name,
45853      gradients: gradientSet
45854    }, index) => {
45855      const id = `color-palette-$instanceId}-$index}`;
45856      return (0,external_React_.createElement)(v_stack_component, {
45857        spacing: 2,
45858        key: index
45859      }, (0,external_React_.createElement)(ColorHeading, {
45860        level: headingLevel,
45861        id: id
45862      }, name), (0,external_React_.createElement)(SingleOrigin, {
45863        clearGradient: clearGradient,
45864        gradients: gradientSet,
45865        onChange: gradient => onChange(gradient, index),
45866        value: value,
45867        "aria-labelledby": id
45868      }));
45869    }));
45870  }
45871  function gradient_picker_Component(props) {
45872    const {
45873      asButtons,
45874      loop,
45875      actions,
45876      headingLevel,
45877      'aria-label': ariaLabel,
45878      'aria-labelledby': ariaLabelledby,
45879      ...additionalProps
45880    } = props;
45881    const options = isMultipleOriginArray(props.gradients) ? (0,external_React_.createElement)(MultipleOrigin, {
45882      headingLevel: headingLevel,
45883      ...additionalProps
45884    }) : (0,external_React_.createElement)(SingleOrigin, {
45885      ...additionalProps
45886    });
45887    let metaProps;
45888    if (asButtons) {
45889      metaProps = {
45890        asButtons: true
45891      };
45892    } else {
45893      const _metaProps = {
45894        asButtons: false,
45895        loop
45896      };
45897      if (ariaLabel) {
45898        metaProps = {
45899          ..._metaProps,
45900          'aria-label': ariaLabel
45901        };
45902      } else if (ariaLabelledby) {
45903        metaProps = {
45904          ..._metaProps,
45905          'aria-labelledby': ariaLabelledby
45906        };
45907      } else {
45908        metaProps = {
45909          ..._metaProps,
45910          'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
45911        };
45912      }
45913    }
45914    return (0,external_React_.createElement)(build_module_circular_option_picker, {
45915      ...metaProps,
45916      actions: actions,
45917      options: options
45918    });
45919  }
45920  
45921  /**
45922   *  GradientPicker is a React component that renders a color gradient picker to
45923   * define a multi step gradient. There's either a _linear_ or a _radial_ type
45924   * available.
45925   *
45926   * ```jsx
45927   *import { GradientPicker } from '@wordpress/components';
45928   *import { useState } from '@wordpress/element';
45929   *
45930   *const myGradientPicker = () => {
45931   *    const [ gradient, setGradient ] = useState( null );
45932   *
45933   *    return (
45934   *        <GradientPicker
45935   *            value={ gradient }
45936   *            onChange={ ( currentGradient ) => setGradient( currentGradient ) }
45937   *            gradients={ [
45938   *                {
45939   *                    name: 'JShine',
45940   *                    gradient:
45941   *                        'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
45942   *                    slug: 'jshine',
45943   *                },
45944   *                {
45945   *                    name: 'Moonlit Asteroid',
45946   *                    gradient:
45947   *                        'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
45948   *                    slug: 'moonlit-asteroid',
45949   *                },
45950   *                {
45951   *                    name: 'Rastafarie',
45952   *                    gradient:
45953   *                        'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
45954   *                    slug: 'rastafari',
45955   *                },
45956   *            ] }
45957   *        />
45958   *    );
45959   *};
45960   *```
45961   *
45962   */
45963  function GradientPicker({
45964    className,
45965    gradients = [],
45966    onChange,
45967    value,
45968    clearable = true,
45969    disableCustomGradients = false,
45970    __experimentalIsRenderedInSidebar,
45971    headingLevel = 2,
45972    ...additionalProps
45973  }) {
45974    const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]);
45975    return (0,external_React_.createElement)(v_stack_component, {
45976      spacing: gradients.length ? 4 : 0
45977    }, !disableCustomGradients && (0,external_React_.createElement)(custom_gradient_picker, {
45978      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
45979      value: value,
45980      onChange: onChange
45981    }), (gradients.length > 0 || clearable) && (0,external_React_.createElement)(gradient_picker_Component, {
45982      ...additionalProps,
45983      className: className,
45984      clearGradient: clearGradient,
45985      gradients: gradients,
45986      onChange: onChange,
45987      value: value,
45988      actions: clearable && !disableCustomGradients && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, {
45989        onClick: clearGradient
45990      }, (0,external_wp_i18n_namespaceObject.__)('Clear')),
45991      headingLevel: headingLevel
45992    }));
45993  }
45994  /* harmony default export */ const gradient_picker = (GradientPicker);
45995  
45996  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/menu.js
45997  
45998  /**
45999   * WordPress dependencies
46000   */
46001  
46002  const menu = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
46003    xmlns: "http://www.w3.org/2000/svg",
46004    viewBox: "0 0 24 24"
46005  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
46006    d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"
46007  }));
46008  /* harmony default export */ const library_menu = (menu);
46009  
46010  ;// CONCATENATED MODULE: external ["wp","dom"]
46011  const external_wp_dom_namespaceObject = window["wp"]["dom"];
46012  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/container.js
46013  
46014  /**
46015   * External dependencies
46016   */
46017  
46018  /**
46019   * WordPress dependencies
46020   */
46021  
46022  
46023  
46024  /**
46025   * Internal dependencies
46026   */
46027  
46028  const container_noop = () => {};
46029  const MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox'];
46030  function cycleValue(value, total, offset) {
46031    const nextValue = value + offset;
46032    if (nextValue < 0) {
46033      return total + nextValue;
46034    } else if (nextValue >= total) {
46035      return nextValue - total;
46036    }
46037    return nextValue;
46038  }
46039  class NavigableContainer extends external_wp_element_namespaceObject.Component {
46040    constructor(args) {
46041      super(args);
46042      this.onKeyDown = this.onKeyDown.bind(this);
46043      this.bindContainer = this.bindContainer.bind(this);
46044      this.getFocusableContext = this.getFocusableContext.bind(this);
46045      this.getFocusableIndex = this.getFocusableIndex.bind(this);
46046    }
46047    componentDidMount() {
46048      if (!this.container) {
46049        return;
46050      }
46051  
46052      // We use DOM event listeners instead of React event listeners
46053      // because we want to catch events from the underlying DOM tree
46054      // The React Tree can be different from the DOM tree when using
46055      // portals. Block Toolbars for instance are rendered in a separate
46056      // React Trees.
46057      this.container.addEventListener('keydown', this.onKeyDown);
46058    }
46059    componentWillUnmount() {
46060      if (!this.container) {
46061        return;
46062      }
46063      this.container.removeEventListener('keydown', this.onKeyDown);
46064    }
46065    bindContainer(ref) {
46066      const {
46067        forwardedRef
46068      } = this.props;
46069      this.container = ref;
46070      if (typeof forwardedRef === 'function') {
46071        forwardedRef(ref);
46072      } else if (forwardedRef && 'current' in forwardedRef) {
46073        forwardedRef.current = ref;
46074      }
46075    }
46076    getFocusableContext(target) {
46077      if (!this.container) {
46078        return null;
46079      }
46080      const {
46081        onlyBrowserTabstops
46082      } = this.props;
46083      const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable;
46084      const focusables = finder.find(this.container);
46085      const index = this.getFocusableIndex(focusables, target);
46086      if (index > -1 && target) {
46087        return {
46088          index,
46089          target,
46090          focusables
46091        };
46092      }
46093      return null;
46094    }
46095    getFocusableIndex(focusables, target) {
46096      return focusables.indexOf(target);
46097    }
46098    onKeyDown(event) {
46099      if (this.props.onKeyDown) {
46100        this.props.onKeyDown(event);
46101      }
46102      const {
46103        getFocusableContext
46104      } = this;
46105      const {
46106        cycle = true,
46107        eventToOffset,
46108        onNavigate = container_noop,
46109        stopNavigationEvents
46110      } = this.props;
46111      const offset = eventToOffset(event);
46112  
46113      // eventToOffset returns undefined if the event is not handled by the component.
46114      if (offset !== undefined && stopNavigationEvents) {
46115        // Prevents arrow key handlers bound to the document directly interfering.
46116        event.stopImmediatePropagation();
46117  
46118        // When navigating a collection of items, prevent scroll containers
46119        // from scrolling. The preventDefault also prevents Voiceover from
46120        // 'handling' the event, as voiceover will try to use arrow keys
46121        // for highlighting text.
46122        const targetRole = event.target?.getAttribute('role');
46123        const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole);
46124        if (targetHasMenuItemRole) {
46125          event.preventDefault();
46126        }
46127      }
46128      if (!offset) {
46129        return;
46130      }
46131      const activeElement = event.target?.ownerDocument?.activeElement;
46132      if (!activeElement) {
46133        return;
46134      }
46135      const context = getFocusableContext(activeElement);
46136      if (!context) {
46137        return;
46138      }
46139      const {
46140        index,
46141        focusables
46142      } = context;
46143      const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset;
46144      if (nextIndex >= 0 && nextIndex < focusables.length) {
46145        focusables[nextIndex].focus();
46146        onNavigate(nextIndex, focusables[nextIndex]);
46147  
46148        // `preventDefault()` on tab to avoid having the browser move the focus
46149        // after this component has already moved it.
46150        if (event.code === 'Tab') {
46151          event.preventDefault();
46152        }
46153      }
46154    }
46155    render() {
46156      const {
46157        children,
46158        stopNavigationEvents,
46159        eventToOffset,
46160        onNavigate,
46161        onKeyDown,
46162        cycle,
46163        onlyBrowserTabstops,
46164        forwardedRef,
46165        ...restProps
46166      } = this.props;
46167      return (0,external_React_.createElement)("div", {
46168        ref: this.bindContainer,
46169        ...restProps
46170      }, children);
46171    }
46172  }
46173  const forwardedNavigableContainer = (props, ref) => {
46174    return (0,external_React_.createElement)(NavigableContainer, {
46175      ...props,
46176      forwardedRef: ref
46177    });
46178  };
46179  forwardedNavigableContainer.displayName = 'NavigableContainer';
46180  /* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer));
46181  
46182  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/menu.js
46183  
46184  /**
46185   * External dependencies
46186   */
46187  
46188  /**
46189   * WordPress dependencies
46190   */
46191  
46192  
46193  /**
46194   * Internal dependencies
46195   */
46196  
46197  function UnforwardedNavigableMenu({
46198    role = 'menu',
46199    orientation = 'vertical',
46200    ...rest
46201  }, ref) {
46202    const eventToOffset = evt => {
46203      const {
46204        code
46205      } = evt;
46206      let next = ['ArrowDown'];
46207      let previous = ['ArrowUp'];
46208      if (orientation === 'horizontal') {
46209        next = ['ArrowRight'];
46210        previous = ['ArrowLeft'];
46211      }
46212      if (orientation === 'both') {
46213        next = ['ArrowRight', 'ArrowDown'];
46214        previous = ['ArrowLeft', 'ArrowUp'];
46215      }
46216      if (next.includes(code)) {
46217        return 1;
46218      } else if (previous.includes(code)) {
46219        return -1;
46220      } else if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(code)) {
46221        // Key press should be handled, e.g. have event propagation and
46222        // default behavior handled by NavigableContainer but not result
46223        // in an offset.
46224        return 0;
46225      }
46226      return undefined;
46227    };
46228    return (0,external_React_.createElement)(container, {
46229      ref: ref,
46230      stopNavigationEvents: true,
46231      onlyBrowserTabstops: false,
46232      role: role,
46233      "aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined,
46234      eventToOffset: eventToOffset,
46235      ...rest
46236    });
46237  }
46238  
46239  /**
46240   * A container for a navigable menu.
46241   *
46242   *  ```jsx
46243   *  import {
46244   *    NavigableMenu,
46245   *    Button,
46246   *  } from '@wordpress/components';
46247   *
46248   *  function onNavigate( index, target ) {
46249   *    console.log( `Navigates to ${ index }`, target );
46250   *  }
46251   *
46252   *  const MyNavigableContainer = () => (
46253   *    <div>
46254   *      <span>Navigable Menu:</span>
46255   *      <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
46256   *        <Button variant="secondary">Item 1</Button>
46257   *        <Button variant="secondary">Item 2</Button>
46258   *        <Button variant="secondary">Item 3</Button>
46259   *      </NavigableMenu>
46260   *    </div>
46261   *  );
46262   *  ```
46263   */
46264  const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu);
46265  /* harmony default export */ const navigable_container_menu = (NavigableMenu);
46266  
46267  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js
46268  
46269  /**
46270   * External dependencies
46271   */
46272  
46273  
46274  /**
46275   * WordPress dependencies
46276   */
46277  
46278  
46279  /**
46280   * Internal dependencies
46281   */
46282  
46283  
46284  
46285  
46286  function dropdown_menu_mergeProps(defaultProps = {}, props = {}) {
46287    const mergedProps = {
46288      ...defaultProps,
46289      ...props
46290    };
46291    if (props.className && defaultProps.className) {
46292      mergedProps.className = classnames_default()(props.className, defaultProps.className);
46293    }
46294    return mergedProps;
46295  }
46296  function dropdown_menu_isFunction(maybeFunc) {
46297    return typeof maybeFunc === 'function';
46298  }
46299  function UnconnectedDropdownMenu(dropdownMenuProps) {
46300    const {
46301      children,
46302      className,
46303      controls,
46304      icon = library_menu,
46305      label,
46306      popoverProps,
46307      toggleProps,
46308      menuProps,
46309      disableOpenOnArrowDown = false,
46310      text,
46311      noIcons,
46312      open,
46313      defaultOpen,
46314      onToggle: onToggleProp,
46315      // Context
46316      variant
46317    } = useContextSystem(dropdownMenuProps, 'DropdownMenu');
46318    if (!controls?.length && !dropdown_menu_isFunction(children)) {
46319      return null;
46320    }
46321  
46322    // Normalize controls to nested array of objects (sets of controls)
46323    let controlSets;
46324    if (controls?.length) {
46325      // @ts-expect-error The check below is needed because `DropdownMenus`
46326      // rendered by `ToolBarGroup` receive controls as a nested array.
46327      controlSets = controls;
46328      if (!Array.isArray(controlSets[0])) {
46329        // This is not ideal, but at this point we know that `controls` is
46330        // not a nested array, even if TypeScript doesn't.
46331        controlSets = [controls];
46332      }
46333    }
46334    const mergedPopoverProps = dropdown_menu_mergeProps({
46335      className: 'components-dropdown-menu__popover',
46336      variant
46337    }, popoverProps);
46338    return (0,external_React_.createElement)(dropdown, {
46339      className: className,
46340      popoverProps: mergedPopoverProps,
46341      renderToggle: ({
46342        isOpen,
46343        onToggle
46344      }) => {
46345        var _toggleProps$showTool;
46346        const openOnArrowDown = event => {
46347          if (disableOpenOnArrowDown) {
46348            return;
46349          }
46350          if (!isOpen && event.code === 'ArrowDown') {
46351            event.preventDefault();
46352            onToggle();
46353          }
46354        };
46355        const {
46356          as: Toggle = build_module_button,
46357          ...restToggleProps
46358        } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
46359        const mergedToggleProps = dropdown_menu_mergeProps({
46360          className: classnames_default()('components-dropdown-menu__toggle', {
46361            'is-opened': isOpen
46362          })
46363        }, restToggleProps);
46364        return (0,external_React_.createElement)(Toggle, {
46365          ...mergedToggleProps,
46366          icon: icon,
46367          onClick: event => {
46368            onToggle();
46369            if (mergedToggleProps.onClick) {
46370              mergedToggleProps.onClick(event);
46371            }
46372          },
46373          onKeyDown: event => {
46374            openOnArrowDown(event);
46375            if (mergedToggleProps.onKeyDown) {
46376              mergedToggleProps.onKeyDown(event);
46377            }
46378          },
46379          "aria-haspopup": "true",
46380          "aria-expanded": isOpen,
46381          label: label,
46382          text: text,
46383          showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true
46384        }, mergedToggleProps.children);
46385      },
46386      renderContent: props => {
46387        const mergedMenuProps = dropdown_menu_mergeProps({
46388          'aria-label': label,
46389          className: classnames_default()('components-dropdown-menu__menu', {
46390            'no-icons': noIcons
46391          })
46392        }, menuProps);
46393        return (0,external_React_.createElement)(navigable_container_menu, {
46394          ...mergedMenuProps,
46395          role: "menu"
46396        }, dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_React_.createElement)(build_module_button, {
46397          key: [indexOfSet, indexOfControl].join(),
46398          onClick: event => {
46399            event.stopPropagation();
46400            props.onClose();
46401            if (control.onClick) {
46402              control.onClick();
46403            }
46404          },
46405          className: classnames_default()('components-dropdown-menu__menu-item', {
46406            'has-separator': indexOfSet > 0 && indexOfControl === 0,
46407            'is-active': control.isActive,
46408            'is-icon-only': !control.title
46409          }),
46410          icon: control.icon,
46411          label: control.label,
46412          "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
46413          role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
46414          disabled: control.isDisabled
46415        }, control.title))));
46416      },
46417      open: open,
46418      defaultOpen: defaultOpen,
46419      onToggle: onToggleProp
46420    });
46421  }
46422  
46423  /**
46424   *
46425   * The DropdownMenu displays a list of actions (each contained in a MenuItem,
46426   * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
46427   * after the user has interacted with an element (a button or icon) or when
46428   * they perform a specific action.
46429   *
46430   * Render a Dropdown Menu with a set of controls:
46431   *
46432   * ```jsx
46433   * import { DropdownMenu } from '@wordpress/components';
46434   * import {
46435   *     more,
46436   *     arrowLeft,
46437   *     arrowRight,
46438   *     arrowUp,
46439   *     arrowDown,
46440   * } from '@wordpress/icons';
46441   *
46442   * const MyDropdownMenu = () => (
46443   *     <DropdownMenu
46444   *         icon={ more }
46445   *         label="Select a direction"
46446   *         controls={ [
46447   *             {
46448   *                 title: 'Up',
46449   *                 icon: arrowUp,
46450   *                 onClick: () => console.log( 'up' ),
46451   *             },
46452   *             {
46453   *                 title: 'Right',
46454   *                 icon: arrowRight,
46455   *                 onClick: () => console.log( 'right' ),
46456   *             },
46457   *             {
46458   *                 title: 'Down',
46459   *                 icon: arrowDown,
46460   *                 onClick: () => console.log( 'down' ),
46461   *             },
46462   *             {
46463   *                 title: 'Left',
46464   *                 icon: arrowLeft,
46465   *                 onClick: () => console.log( 'left' ),
46466   *             },
46467   *         ] }
46468   *     />
46469   * );
46470   * ```
46471   *
46472   * Alternatively, specify a `children` function which returns elements valid for
46473   * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
46474   *
46475   * ```jsx
46476   * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
46477   * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
46478   *
46479   * const MyDropdownMenu = () => (
46480   *     <DropdownMenu icon={ more } label="Select a direction">
46481   *         { ( { onClose } ) => (
46482   *             <>
46483   *                 <MenuGroup>
46484   *                     <MenuItem icon={ arrowUp } onClick={ onClose }>
46485   *                         Move Up
46486   *                     </MenuItem>
46487   *                     <MenuItem icon={ arrowDown } onClick={ onClose }>
46488   *                         Move Down
46489   *                     </MenuItem>
46490   *                 </MenuGroup>
46491   *                 <MenuGroup>
46492   *                     <MenuItem icon={ trash } onClick={ onClose }>
46493   *                         Remove
46494   *                     </MenuItem>
46495   *                 </MenuGroup>
46496   *             </>
46497   *         ) }
46498   *     </DropdownMenu>
46499   * );
46500   * ```
46501   *
46502   */
46503  const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu');
46504  /* harmony default export */ const dropdown_menu = (DropdownMenu);
46505  
46506  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/styles.js
46507  
46508  function 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)."; }
46509  /**
46510   * External dependencies
46511   */
46512  
46513  
46514  
46515  /**
46516   * Internal dependencies
46517   */
46518  
46519  
46520  
46521  
46522  
46523  
46524  
46525  
46526  
46527  const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(color_indicator,  true ? {
46528    target: "e1lpqc909"
46529  } : 0)("&&{flex-shrink:0;width:", space(6), ";height:", space(6), ";}" + ( true ? "" : 0));
46530  const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control,  true ? {
46531    target: "e1lpqc908"
46532  } : 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));
46533  const buttonStyleReset = ({
46534    as
46535  }) => {
46536    if (as === 'button') {
46537      return /*#__PURE__*/emotion_react_browser_esm_css("display:flex;align-items:center;width:100%;appearance:none;background:transparent;border:none;border-radius:0;padding:0;cursor:pointer;&:hover{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0),  true ? "" : 0);
46538    }
46539    return null;
46540  };
46541  const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
46542    target: "e1lpqc907"
46543  } : 0)(buttonStyleReset, " padding-block:3px;padding-inline-start:", space(3), ";border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;font-size:", font('default.fontSize'), ";&:focus-visible{border-color:transparent;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";&+&{border-top-left-radius:0;border-top-right-radius:0;}&:last-child{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
46544  const NameContainer = emotion_styled_base_browser_esm("div",  true ? {
46545    target: "e1lpqc906"
46546  } : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;" + ( true ? "" : 0));
46547  const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
46548    target: "e1lpqc905"
46549  } : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0));
46550  const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
46551    target: "e1lpqc904"
46552  } : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0));
46553  const PaletteHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
46554    target: "e1lpqc903"
46555  } : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0));
46556  const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component,  true ? {
46557    target: "e1lpqc902"
46558  } : 0)( true ? {
46559    name: "u6wnko",
46560    styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}"
46561  } : 0);
46562  const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
46563    target: "e1lpqc901"
46564  } : 0)("&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0));
46565  const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
46566    target: "e1lpqc900"
46567  } : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0));
46568  
46569  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js
46570  
46571  /**
46572   * External dependencies
46573   */
46574  
46575  
46576  /**
46577   * WordPress dependencies
46578   */
46579  
46580  
46581  
46582  
46583  
46584  /**
46585   * Internal dependencies
46586   */
46587  
46588  
46589  
46590  
46591  
46592  
46593  
46594  
46595  
46596  
46597  
46598  
46599  
46600  
46601  
46602  const DEFAULT_COLOR = '#000';
46603  function NameInput({
46604    value,
46605    onChange,
46606    label
46607  }) {
46608    return (0,external_React_.createElement)(NameInputControl, {
46609      label: label,
46610      hideLabelFromVision: true,
46611      value: value,
46612      onChange: onChange
46613    });
46614  }
46615  
46616  /**
46617   * Returns a name for a palette item in the format "Color + id".
46618   * To ensure there are no duplicate ids, this function checks all slugs.
46619   * It expects slugs to be in the format: slugPrefix + color- + number.
46620   * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
46621   *
46622   * @param elements   An array of color palette items.
46623   * @param slugPrefix The slug prefix used to match the element slug.
46624   *
46625   * @return A unique name for a palette item.
46626   */
46627  function getNameForPosition(elements, slugPrefix) {
46628    const nameRegex = new RegExp(`^$slugPrefix}color-([\\d]+)$`);
46629    const position = elements.reduce((previousValue, currentValue) => {
46630      if (typeof currentValue?.slug === 'string') {
46631        const matches = currentValue?.slug.match(nameRegex);
46632        if (matches) {
46633          const id = parseInt(matches[1], 10);
46634          if (id >= previousValue) {
46635            return id + 1;
46636          }
46637        }
46638      }
46639      return previousValue;
46640    }, 1);
46641    return (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is an id for a custom color */
46642    (0,external_wp_i18n_namespaceObject.__)('Color %s'), position);
46643  }
46644  function ColorPickerPopover({
46645    isGradient,
46646    element,
46647    onChange,
46648    popoverProps: receivedPopoverProps,
46649    onClose = () => {}
46650  }) {
46651    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
46652      shift: true,
46653      offset: 20,
46654      // Disabling resize as it would otherwise cause the popover to show
46655      // scrollbars while dragging the color picker's handle close to the
46656      // popover edge.
46657      resize: false,
46658      placement: 'left-start',
46659      ...receivedPopoverProps,
46660      className: classnames_default()('components-palette-edit__popover', receivedPopoverProps?.className)
46661    }), [receivedPopoverProps]);
46662    return (0,external_React_.createElement)(popover, {
46663      ...popoverProps,
46664      onClose: onClose
46665    }, !isGradient && (0,external_React_.createElement)(LegacyAdapter, {
46666      color: element.color,
46667      enableAlpha: true,
46668      onChange: newColor => {
46669        onChange({
46670          ...element,
46671          color: newColor
46672        });
46673      }
46674    }), isGradient && (0,external_React_.createElement)("div", {
46675      className: "components-palette-edit__popover-gradient-picker"
46676    }, (0,external_React_.createElement)(custom_gradient_picker, {
46677      __experimentalIsRenderedInSidebar: true,
46678      value: element.gradient,
46679      onChange: newGradient => {
46680        onChange({
46681          ...element,
46682          gradient: newGradient
46683        });
46684      }
46685    })));
46686  }
46687  function palette_edit_Option({
46688    canOnlyChangeValues,
46689    element,
46690    onChange,
46691    isEditing,
46692    onStartEditing,
46693    onRemove,
46694    onStopEditing,
46695    popoverProps: receivedPopoverProps,
46696    slugPrefix,
46697    isGradient
46698  }) {
46699    const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onStopEditing);
46700    const value = isGradient ? element.gradient : element.color;
46701  
46702    // Use internal state instead of a ref to make sure that the component
46703    // re-renders when the popover's anchor updates.
46704    const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);
46705    const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
46706      ...receivedPopoverProps,
46707      // Use the custom palette color item as the popover anchor.
46708      anchor: popoverAnchor
46709    }), [popoverAnchor, receivedPopoverProps]);
46710    return (0,external_React_.createElement)(PaletteItem, {
46711      className: isEditing ? 'is-selected' : undefined,
46712      as: isEditing ? 'div' : 'button',
46713      onClick: onStartEditing,
46714      "aria-label": isEditing ? undefined : (0,external_wp_i18n_namespaceObject.sprintf)(
46715      // translators: %s is a color or gradient name, e.g. "Red".
46716      (0,external_wp_i18n_namespaceObject.__)('Edit: %s'), element.name.trim().length ? element.name : value),
46717      ref: setPopoverAnchor,
46718      ...(isEditing ? {
46719        ...focusOutsideProps
46720      } : {})
46721    }, (0,external_React_.createElement)(h_stack_component, {
46722      justify: "flex-start"
46723    }, (0,external_React_.createElement)(IndicatorStyled, {
46724      colorValue: value
46725    }), (0,external_React_.createElement)(flex_item_component, null, isEditing && !canOnlyChangeValues ? (0,external_React_.createElement)(NameInput, {
46726      label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'),
46727      value: element.name,
46728      onChange: nextName => onChange({
46729        ...element,
46730        name: nextName,
46731        slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')
46732      })
46733    }) : (0,external_React_.createElement)(NameContainer, null, element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
46734    '\u00A0')), isEditing && !canOnlyChangeValues && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(RemoveButton, {
46735      size: "small",
46736      icon: line_solid,
46737      label: (0,external_wp_i18n_namespaceObject.__)('Remove color'),
46738      onClick: onRemove
46739    }))), isEditing && (0,external_React_.createElement)(ColorPickerPopover, {
46740      isGradient: isGradient,
46741      onChange: onChange,
46742      element: element,
46743      popoverProps: popoverProps
46744    }));
46745  }
46746  function PaletteEditListView({
46747    elements,
46748    onChange,
46749    editingElement,
46750    setEditingElement,
46751    canOnlyChangeValues,
46752    slugPrefix,
46753    isGradient,
46754    popoverProps
46755  }) {
46756    // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
46757    const elementsReference = (0,external_wp_element_namespaceObject.useRef)();
46758    (0,external_wp_element_namespaceObject.useEffect)(() => {
46759      elementsReference.current = elements;
46760    }, [elements]);
46761    const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
46762    return (0,external_React_.createElement)(v_stack_component, {
46763      spacing: 3
46764    }, (0,external_React_.createElement)(item_group_component, {
46765      isRounded: true
46766    }, elements.map((element, index) => (0,external_React_.createElement)(palette_edit_Option, {
46767      isGradient: isGradient,
46768      canOnlyChangeValues: canOnlyChangeValues,
46769      key: index,
46770      element: element,
46771      onStartEditing: () => {
46772        if (editingElement !== index) {
46773          setEditingElement(index);
46774        }
46775      },
46776      onChange: newElement => {
46777        debounceOnChange(elements.map((currentElement, currentIndex) => {
46778          if (currentIndex === index) {
46779            return newElement;
46780          }
46781          return currentElement;
46782        }));
46783      },
46784      onRemove: () => {
46785        setEditingElement(null);
46786        const newElements = elements.filter((_currentElement, currentIndex) => {
46787          if (currentIndex === index) {
46788            return false;
46789          }
46790          return true;
46791        });
46792        onChange(newElements.length ? newElements : undefined);
46793      },
46794      isEditing: index === editingElement,
46795      onStopEditing: () => {
46796        if (index === editingElement) {
46797          setEditingElement(null);
46798        }
46799      },
46800      slugPrefix: slugPrefix,
46801      popoverProps: popoverProps
46802    }))));
46803  }
46804  const EMPTY_ARRAY = [];
46805  
46806  /**
46807   * Allows editing a palette of colors or gradients.
46808   *
46809   * ```jsx
46810   * import { PaletteEdit } from '@wordpress/components';
46811   * const MyPaletteEdit = () => {
46812   *   const [ controlledColors, setControlledColors ] = useState( colors );
46813   *
46814   *   return (
46815   *     <PaletteEdit
46816   *       colors={ controlledColors }
46817   *       onChange={ ( newColors?: Color[] ) => {
46818   *         setControlledColors( newColors );
46819   *       } }
46820   *       paletteLabel="Here is a label"
46821   *     />
46822   *   );
46823   * };
46824   * ```
46825   */
46826  function PaletteEdit({
46827    gradients,
46828    colors = EMPTY_ARRAY,
46829    onChange,
46830    paletteLabel,
46831    paletteLabelHeadingLevel = 2,
46832    emptyMessage,
46833    canOnlyChangeValues,
46834    canReset,
46835    slugPrefix = '',
46836    popoverProps
46837  }) {
46838    const isGradient = !!gradients;
46839    const elements = isGradient ? gradients : colors;
46840    const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false);
46841    const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null);
46842    const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
46843    const elementsLength = elements.length;
46844    const hasElements = elementsLength > 0;
46845    const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100);
46846    const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => {
46847      const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];
46848      const key = isGradient ? 'gradient' : 'color';
46849      // Ensures that the index returned matches a known element value.
46850      if (!!selectedElement && selectedElement[key] === value) {
46851        setEditingElement(newEditingElementIndex);
46852      } else {
46853        setIsEditing(true);
46854      }
46855    }, [isGradient, elements]);
46856    return (0,external_React_.createElement)(PaletteEditStyles, null, (0,external_React_.createElement)(PaletteHStackHeader, null, (0,external_React_.createElement)(PaletteHeading, {
46857      level: paletteLabelHeadingLevel
46858    }, paletteLabel), (0,external_React_.createElement)(PaletteActionsContainer, null, hasElements && isEditing && (0,external_React_.createElement)(DoneButton, {
46859      size: "small",
46860      onClick: () => {
46861        setIsEditing(false);
46862        setEditingElement(null);
46863      }
46864    }, (0,external_wp_i18n_namespaceObject.__)('Done')), !canOnlyChangeValues && (0,external_React_.createElement)(build_module_button, {
46865      size: "small",
46866      isPressed: isAdding,
46867      icon: library_plus,
46868      label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'),
46869      onClick: () => {
46870        const optionName = getNameForPosition(elements, slugPrefix);
46871        if (!!gradients) {
46872          onChange([...gradients, {
46873            gradient: DEFAULT_GRADIENT,
46874            name: optionName,
46875            slug: slugPrefix + kebabCase(optionName)
46876          }]);
46877        } else {
46878          onChange([...colors, {
46879            color: DEFAULT_COLOR,
46880            name: optionName,
46881            slug: slugPrefix + kebabCase(optionName)
46882          }]);
46883        }
46884        setIsEditing(true);
46885        setEditingElement(elements.length);
46886      }
46887    }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0,external_React_.createElement)(dropdown_menu, {
46888      icon: more_vertical,
46889      label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'),
46890      toggleProps: {
46891        isSmall: true
46892      }
46893    }, ({
46894      onClose
46895    }) => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(navigable_container_menu, {
46896      role: "menu"
46897    }, !isEditing && (0,external_React_.createElement)(build_module_button, {
46898      variant: "tertiary",
46899      onClick: () => {
46900        setIsEditing(true);
46901        onClose();
46902      },
46903      className: "components-palette-edit__menu-button"
46904    }, (0,external_wp_i18n_namespaceObject.__)('Show details')), !canOnlyChangeValues && (0,external_React_.createElement)(build_module_button, {
46905      variant: "tertiary",
46906      onClick: () => {
46907        setEditingElement(null);
46908        setIsEditing(false);
46909        onChange();
46910        onClose();
46911      },
46912      className: "components-palette-edit__menu-button"
46913    }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')), canReset && (0,external_React_.createElement)(build_module_button, {
46914      variant: "tertiary",
46915      onClick: () => {
46916        setEditingElement(null);
46917        onChange();
46918        onClose();
46919      }
46920    }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors'))))))), hasElements && (0,external_React_.createElement)(external_React_.Fragment, null, isEditing && (0,external_React_.createElement)(PaletteEditListView, {
46921      canOnlyChangeValues: canOnlyChangeValues,
46922      elements: elements
46923      // @ts-expect-error TODO: Don't know how to resolve
46924      ,
46925      onChange: onChange,
46926      editingElement: editingElement,
46927      setEditingElement: setEditingElement,
46928      slugPrefix: slugPrefix,
46929      isGradient: isGradient,
46930      popoverProps: popoverProps
46931    }), !isEditing && editingElement !== null && (0,external_React_.createElement)(ColorPickerPopover, {
46932      isGradient: isGradient,
46933      onClose: () => setEditingElement(null),
46934      onChange: newElement => {
46935        debounceOnChange(
46936        // @ts-expect-error TODO: Don't know how to resolve
46937        elements.map((currentElement, currentIndex) => {
46938          if (currentIndex === editingElement) {
46939            return newElement;
46940          }
46941          return currentElement;
46942        }));
46943      },
46944      element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
46945      popoverProps: popoverProps
46946    }), !isEditing && (isGradient ? (0,external_React_.createElement)(gradient_picker, {
46947      gradients: gradients,
46948      onChange: onSelectPaletteItem,
46949      clearable: false,
46950      disableCustomGradients: true
46951    }) : (0,external_React_.createElement)(color_palette, {
46952      colors: colors,
46953      onChange: onSelectPaletteItem,
46954      clearable: false,
46955      disableCustomColors: true
46956    }))), !hasElements && emptyMessage);
46957  }
46958  /* harmony default export */ const palette_edit = (PaletteEdit);
46959  
46960  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/styles.js
46961  
46962  /**
46963   * External dependencies
46964   */
46965  
46966  
46967  
46968  /**
46969   * Internal dependencies
46970   */
46971  
46972  
46973  const deprecatedDefaultSize = ({
46974    __next40pxDefaultSize
46975  }) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0),  true ? "" : 0);
46976  const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
46977    target: "evuatpg0"
46978  } : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0));
46979  
46980  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js
46981  
46982  /**
46983   * External dependencies
46984   */
46985  
46986  /**
46987   * WordPress dependencies
46988   */
46989  
46990  
46991  /**
46992   * Internal dependencies
46993   */
46994  
46995  function UnForwardedTokenInput(props, ref) {
46996    const {
46997      value,
46998      isExpanded,
46999      instanceId,
47000      selectedSuggestionIndex,
47001      className,
47002      onChange,
47003      onFocus,
47004      onBlur,
47005      ...restProps
47006    } = props;
47007    const [hasFocus, setHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);
47008    const size = value ? value.length + 1 : 0;
47009    const onChangeHandler = event => {
47010      if (onChange) {
47011        onChange({
47012          value: event.target.value
47013        });
47014      }
47015    };
47016    const onFocusHandler = e => {
47017      setHasFocus(true);
47018      onFocus?.(e);
47019    };
47020    const onBlurHandler = e => {
47021      setHasFocus(false);
47022      onBlur?.(e);
47023    };
47024    return (0,external_React_.createElement)("input", {
47025      ref: ref,
47026      id: `components-form-token-input-$instanceId}`,
47027      type: "text",
47028      ...restProps,
47029      value: value || '',
47030      onChange: onChangeHandler,
47031      onFocus: onFocusHandler,
47032      onBlur: onBlurHandler,
47033      size: size,
47034      className: classnames_default()(className, 'components-form-token-field__input'),
47035      autoComplete: "off",
47036      role: "combobox",
47037      "aria-expanded": isExpanded,
47038      "aria-autocomplete": "list",
47039      "aria-owns": isExpanded ? `components-form-token-suggestions-$instanceId}` : undefined,
47040      "aria-activedescendant":
47041      // Only add the `aria-activedescendant` attribute when:
47042      // - the user is actively interacting with the input (`hasFocus`)
47043      // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
47044      // - the list of suggestions are rendered in the DOM (`isExpanded`)
47045      hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-$instanceId}-$selectedSuggestionIndex}` : undefined,
47046      "aria-describedby": `components-form-token-suggestions-howto-$instanceId}`
47047    });
47048  }
47049  const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput);
47050  /* harmony default export */ const token_input = (TokenInput);
47051  
47052  // EXTERNAL MODULE: ./node_modules/dom-scroll-into-view/lib/index.js
47053  var lib = __webpack_require__(5428);
47054  var lib_default = /*#__PURE__*/__webpack_require__.n(lib);
47055  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js
47056  
47057  /**
47058   * External dependencies
47059   */
47060  
47061  
47062  /**
47063   * WordPress dependencies
47064   */
47065  
47066  
47067  
47068  /**
47069   * Internal dependencies
47070   */
47071  
47072  const handleMouseDown = e => {
47073    // By preventing default here, we will not lose focus of <input> when clicking a suggestion.
47074    e.preventDefault();
47075  };
47076  function SuggestionsList({
47077    selectedIndex,
47078    scrollIntoView,
47079    match,
47080    onHover,
47081    onSelect,
47082    suggestions = [],
47083    displayTransform,
47084    instanceId,
47085    __experimentalRenderItem
47086  }) {
47087    const [scrollingIntoView, setScrollingIntoView] = (0,external_wp_element_namespaceObject.useState)(false);
47088    const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => {
47089      // only have to worry about scrolling selected suggestion into view
47090      // when already expanded.
47091      let rafId;
47092      if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) {
47093        setScrollingIntoView(true);
47094        lib_default()(listNode.children[selectedIndex], listNode, {
47095          onlyScrollIfNeeded: true
47096        });
47097        rafId = requestAnimationFrame(() => {
47098          setScrollingIntoView(false);
47099        });
47100      }
47101      return () => {
47102        if (rafId !== undefined) {
47103          cancelAnimationFrame(rafId);
47104        }
47105      };
47106    }, [selectedIndex, scrollIntoView]);
47107    const handleHover = suggestion => {
47108      return () => {
47109        if (!scrollingIntoView) {
47110          onHover?.(suggestion);
47111        }
47112      };
47113    };
47114    const handleClick = suggestion => {
47115      return () => {
47116        onSelect?.(suggestion);
47117      };
47118    };
47119    const computeSuggestionMatch = suggestion => {
47120      const matchText = displayTransform(match).toLocaleLowerCase();
47121      if (matchText.length === 0) {
47122        return null;
47123      }
47124      const transformedSuggestion = displayTransform(suggestion);
47125      const indexOfMatch = transformedSuggestion.toLocaleLowerCase().indexOf(matchText);
47126      return {
47127        suggestionBeforeMatch: transformedSuggestion.substring(0, indexOfMatch),
47128        suggestionMatch: transformedSuggestion.substring(indexOfMatch, indexOfMatch + matchText.length),
47129        suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length)
47130      };
47131    };
47132    return (0,external_React_.createElement)("ul", {
47133      ref: listRef,
47134      className: "components-form-token-field__suggestions-list",
47135      id: `components-form-token-suggestions-$instanceId}`,
47136      role: "listbox"
47137    }, suggestions.map((suggestion, index) => {
47138      const matchText = computeSuggestionMatch(suggestion);
47139      const className = classnames_default()('components-form-token-field__suggestion', {
47140        'is-selected': index === selectedIndex
47141      });
47142      let output;
47143      if (typeof __experimentalRenderItem === 'function') {
47144        output = __experimentalRenderItem({
47145          item: suggestion
47146        });
47147      } else if (matchText) {
47148        output = (0,external_React_.createElement)("span", {
47149          "aria-label": displayTransform(suggestion)
47150        }, matchText.suggestionBeforeMatch, (0,external_React_.createElement)("strong", {
47151          className: "components-form-token-field__suggestion-match"
47152        }, matchText.suggestionMatch), matchText.suggestionAfterMatch);
47153      } else {
47154        output = displayTransform(suggestion);
47155      }
47156  
47157      /* eslint-disable jsx-a11y/click-events-have-key-events */
47158      return (0,external_React_.createElement)("li", {
47159        id: `components-form-token-suggestions-$instanceId}-$index}`,
47160        role: "option",
47161        className: className,
47162        key: typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion),
47163        onMouseDown: handleMouseDown,
47164        onClick: handleClick(suggestion),
47165        onMouseEnter: handleHover(suggestion),
47166        "aria-selected": index === selectedIndex
47167      }, output);
47168      /* eslint-enable jsx-a11y/click-events-have-key-events */
47169    }));
47170  }
47171  /* harmony default export */ const suggestions_list = (SuggestionsList);
47172  
47173  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js
47174  
47175  /**
47176   * WordPress dependencies
47177   */
47178  
47179  
47180  /* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => {
47181    const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined);
47182    const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
47183    return (0,external_React_.createElement)("div", {
47184      ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside)
47185    }, (0,external_React_.createElement)(WrappedComponent, {
47186      ref: bindFocusOutsideHandler,
47187      ...props
47188    }));
47189  }, 'withFocusOutside'));
47190  
47191  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js
47192  
47193  /**
47194   * External dependencies
47195   */
47196  
47197  
47198  /**
47199   * WordPress dependencies
47200   */
47201  
47202  
47203  
47204  
47205  
47206  
47207  /**
47208   * Internal dependencies
47209   */
47210  
47211  
47212  
47213  
47214  
47215  
47216  
47217  
47218  
47219  
47220  const combobox_control_noop = () => {};
47221  const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component {
47222    handleFocusOutside(event) {
47223      this.props.onFocusOutside(event);
47224    }
47225    render() {
47226      return this.props.children;
47227    }
47228  });
47229  const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);
47230  
47231  /**
47232   * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of
47233   * being able to search for options using a search input.
47234   *
47235   * ```jsx
47236   * import { ComboboxControl } from '@wordpress/components';
47237   * import { useState } from '@wordpress/element';
47238   *
47239   * const options = [
47240   *     {
47241   *         value: 'small',
47242   *         label: 'Small',
47243   *     },
47244   *     {
47245   *         value: 'normal',
47246   *         label: 'Normal',
47247   *     },
47248   *     {
47249   *         value: 'large',
47250   *         label: 'Large',
47251   *     },
47252   * ];
47253   *
47254   * function MyComboboxControl() {
47255   *     const [ fontSize, setFontSize ] = useState();
47256   *     const [ filteredOptions, setFilteredOptions ] = useState( options );
47257   *     return (
47258   *         <ComboboxControl
47259   *             label="Font Size"
47260   *             value={ fontSize }
47261   *             onChange={ setFontSize }
47262   *             options={ filteredOptions }
47263   *             onFilterValueChange={ ( inputValue ) =>
47264   *                 setFilteredOptions(
47265   *                     options.filter( ( option ) =>
47266   *                         option.label
47267   *                             .toLowerCase()
47268   *                             .startsWith( inputValue.toLowerCase() )
47269   *                     )
47270   *                 )
47271   *             }
47272   *         />
47273   *     );
47274   * }
47275   * ```
47276   */
47277  function ComboboxControl(props) {
47278    var _currentOption$label;
47279    const {
47280      __nextHasNoMarginBottom = false,
47281      __next40pxDefaultSize = false,
47282      value: valueProp,
47283      label,
47284      options,
47285      onChange: onChangeProp,
47286      onFilterValueChange = combobox_control_noop,
47287      hideLabelFromVision,
47288      help,
47289      allowReset = true,
47290      className,
47291      messages = {
47292        selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.')
47293      },
47294      __experimentalRenderItem
47295    } = useDeprecated36pxDefaultSizeProp(props);
47296    const [value, setValue] = useControlledValue({
47297      value: valueProp,
47298      onChange: onChangeProp
47299    });
47300    const currentOption = options.find(option => option.value === value);
47301    const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
47302    // Use a custom prefix when generating the `instanceId` to avoid having
47303    // duplicate input IDs when rendering this component and `FormTokenField`
47304    // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
47305    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl, 'combobox-control');
47306    const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null);
47307    const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
47308    const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false);
47309    const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)('');
47310    const inputContainer = (0,external_wp_element_namespaceObject.useRef)(null);
47311    const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => {
47312      const startsWithMatch = [];
47313      const containsMatch = [];
47314      const match = normalizeTextString(inputValue);
47315      options.forEach(option => {
47316        const index = normalizeTextString(option.label).indexOf(match);
47317        if (index === 0) {
47318          startsWithMatch.push(option);
47319        } else if (index > 0) {
47320          containsMatch.push(option);
47321        }
47322      });
47323      return startsWithMatch.concat(containsMatch);
47324    }, [inputValue, options]);
47325    const onSuggestionSelected = newSelectedSuggestion => {
47326      setValue(newSelectedSuggestion.value);
47327      (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive');
47328      setSelectedSuggestion(newSelectedSuggestion);
47329      setInputValue('');
47330      setIsExpanded(false);
47331    };
47332    const handleArrowNavigation = (offset = 1) => {
47333      const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);
47334      let nextIndex = index + offset;
47335      if (nextIndex < 0) {
47336        nextIndex = matchingSuggestions.length - 1;
47337      } else if (nextIndex >= matchingSuggestions.length) {
47338        nextIndex = 0;
47339      }
47340      setSelectedSuggestion(matchingSuggestions[nextIndex]);
47341      setIsExpanded(true);
47342    };
47343    const onKeyDown = event => {
47344      let preventDefault = false;
47345      if (event.defaultPrevented ||
47346      // Ignore keydowns from IMEs
47347      event.nativeEvent.isComposing ||
47348      // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
47349      // is `isComposing=false`, even though it's technically still part of the composition.
47350      // These can only be detected by keyCode.
47351      event.keyCode === 229) {
47352        return;
47353      }
47354      switch (event.code) {
47355        case 'Enter':
47356          if (selectedSuggestion) {
47357            onSuggestionSelected(selectedSuggestion);
47358            preventDefault = true;
47359          }
47360          break;
47361        case 'ArrowUp':
47362          handleArrowNavigation(-1);
47363          preventDefault = true;
47364          break;
47365        case 'ArrowDown':
47366          handleArrowNavigation(1);
47367          preventDefault = true;
47368          break;
47369        case 'Escape':
47370          setIsExpanded(false);
47371          setSelectedSuggestion(null);
47372          preventDefault = true;
47373          break;
47374        default:
47375          break;
47376      }
47377      if (preventDefault) {
47378        event.preventDefault();
47379      }
47380    };
47381    const onBlur = () => {
47382      setInputHasFocus(false);
47383    };
47384    const onFocus = () => {
47385      setInputHasFocus(true);
47386      setIsExpanded(true);
47387      onFilterValueChange('');
47388      setInputValue('');
47389    };
47390    const onFocusOutside = () => {
47391      setIsExpanded(false);
47392    };
47393    const onInputChange = event => {
47394      const text = event.value;
47395      setInputValue(text);
47396      onFilterValueChange(text);
47397      if (inputHasFocus) {
47398        setIsExpanded(true);
47399      }
47400    };
47401    const handleOnReset = () => {
47402      setValue(null);
47403      inputContainer.current?.focus();
47404    };
47405  
47406    // Update current selections when the filter input changes.
47407    (0,external_wp_element_namespaceObject.useEffect)(() => {
47408      const hasMatchingSuggestions = matchingSuggestions.length > 0;
47409      const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;
47410      if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
47411        // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
47412        setSelectedSuggestion(matchingSuggestions[0]);
47413      }
47414    }, [matchingSuggestions, selectedSuggestion]);
47415  
47416    // Announcements.
47417    (0,external_wp_element_namespaceObject.useEffect)(() => {
47418      const hasMatchingSuggestions = matchingSuggestions.length > 0;
47419      if (isExpanded) {
47420        const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
47421        (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.');
47422        (0,external_wp_a11y_namespaceObject.speak)(message, 'polite');
47423      }
47424    }, [matchingSuggestions, isExpanded]);
47425  
47426    // Disable reason: There is no appropriate role which describes the
47427    // input container intended accessible usability.
47428    // TODO: Refactor click detection to use blur to stop propagation.
47429    /* eslint-disable jsx-a11y/no-static-element-interactions */
47430    return (0,external_React_.createElement)(DetectOutside, {
47431      onFocusOutside: onFocusOutside
47432    }, (0,external_React_.createElement)(base_control, {
47433      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
47434      className: classnames_default()(className, 'components-combobox-control'),
47435      label: label,
47436      id: `components-form-token-input-$instanceId}`,
47437      hideLabelFromVision: hideLabelFromVision,
47438      help: help
47439    }, (0,external_React_.createElement)("div", {
47440      className: "components-combobox-control__suggestions-container",
47441      tabIndex: -1,
47442      onKeyDown: onKeyDown
47443    }, (0,external_React_.createElement)(InputWrapperFlex, {
47444      __next40pxDefaultSize: __next40pxDefaultSize
47445    }, (0,external_React_.createElement)(flex_block_component, null, (0,external_React_.createElement)(token_input, {
47446      className: "components-combobox-control__input",
47447      instanceId: instanceId,
47448      ref: inputContainer,
47449      value: isExpanded ? inputValue : currentLabel,
47450      onFocus: onFocus,
47451      onBlur: onBlur,
47452      isExpanded: isExpanded,
47453      selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
47454      onChange: onInputChange
47455    })), allowReset && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(build_module_button, {
47456      className: "components-combobox-control__reset",
47457      icon: close_small,
47458      disabled: !value,
47459      onClick: handleOnReset,
47460      label: (0,external_wp_i18n_namespaceObject.__)('Reset')
47461    }))), isExpanded && (0,external_React_.createElement)(suggestions_list, {
47462      instanceId: instanceId
47463      // The empty string for `value` here is not actually used, but is
47464      // just a quick way to satisfy the TypeScript requirements of SuggestionsList.
47465      // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
47466      ,
47467      match: {
47468        label: inputValue,
47469        value: ''
47470      },
47471      displayTransform: suggestion => suggestion.label,
47472      suggestions: matchingSuggestions,
47473      selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
47474      onHover: setSelectedSuggestion,
47475      onSelect: onSuggestionSelected,
47476      scrollIntoView: true,
47477      __experimentalRenderItem: __experimentalRenderItem
47478    }))));
47479    /* eslint-enable jsx-a11y/no-static-element-interactions */
47480  }
47481  /* harmony default export */ const combobox_control = (ComboboxControl);
47482  
47483  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3X3MDQGM.js
47484  "use client";
47485  
47486  // src/group/group-label-context.ts
47487  
47488  var GroupLabelContext = (0,external_React_.createContext)(void 0);
47489  
47490  
47491  
47492  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/R2QZ3KXH.js
47493  "use client";
47494  
47495  
47496  
47497  
47498  
47499  // src/group/group.tsx
47500  
47501  
47502  var useGroup = createHook((props) => {
47503    const [labelId, setLabelId] = (0,external_React_.useState)();
47504    props = useWrapElement(
47505      props,
47506      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(GroupLabelContext.Provider, { value: setLabelId, children: element }),
47507      []
47508    );
47509    props = _4R3V3JGP_spreadValues({
47510      role: "group",
47511      "aria-labelledby": labelId
47512    }, props);
47513    return props;
47514  });
47515  var Group = createComponent((props) => {
47516    const htmlProps = useGroup(props);
47517    return _3ORBWXWF_createElement("div", htmlProps);
47518  });
47519  if (false) {}
47520  
47521  
47522  
47523  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/636A7WVS.js
47524  "use client";
47525  
47526  
47527  
47528  
47529  // src/composite/composite-group.ts
47530  var useCompositeGroup = createHook(
47531    (_a) => {
47532      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
47533      props = useGroup(props);
47534      return props;
47535    }
47536  );
47537  var CompositeGroup = createComponent(
47538    (props) => {
47539      const htmlProps = useCompositeGroup(props);
47540      return _3ORBWXWF_createElement("div", htmlProps);
47541    }
47542  );
47543  if (false) {}
47544  
47545  
47546  
47547  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/composite/legacy/index.js
47548  
47549  /**
47550   * Composite is a component that may contain navigable items represented by
47551   * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
47552   * all the keyboard navigation mechanisms to ensure that there's only one
47553   * tab stop for the whole Composite element. This means that it can behave as
47554   * a roving tabindex or aria-activedescendant container.
47555   *
47556   * @see https://ariakit.org/components/composite
47557   */
47558  
47559  /**
47560   * WordPress dependencies
47561   */
47562  
47563  
47564  /**
47565   * Internal dependencies
47566   */
47567  
47568  
47569  function mapLegacyStatePropsToComponentProps(legacyProps) {
47570    // If a `state` prop is provided, we unpack that; otherwise,
47571    // the necessary props are provided directly in `legacyProps`.
47572    if (legacyProps.state) {
47573      const {
47574        state,
47575        ...rest
47576      } = legacyProps;
47577      const {
47578        store,
47579        ...props
47580      } = mapLegacyStatePropsToComponentProps(state);
47581      return {
47582        ...rest,
47583        ...props,
47584        store
47585      };
47586    }
47587    return legacyProps;
47588  }
47589  function proxyComposite(ProxiedComponent, propMap = {}) {
47590    const displayName = ProxiedComponent.displayName;
47591    const Component = legacyProps => {
47592      const {
47593        store,
47594        ...rest
47595      } = mapLegacyStatePropsToComponentProps(legacyProps);
47596      const props = rest;
47597      props.id = (0,external_wp_compose_namespaceObject.useInstanceId)(store, props.baseId, props.id);
47598      Object.entries(propMap).forEach(([from, to]) => {
47599        if (props.hasOwnProperty(from)) {
47600          Object.assign(props, {
47601            [to]: props[from]
47602          });
47603          delete props[from];
47604        }
47605      });
47606      delete props.baseId;
47607      return (0,external_React_.createElement)(ProxiedComponent, {
47608        ...props,
47609        store: store
47610      });
47611    };
47612    Component.displayName = displayName;
47613    return Component;
47614  }
47615  
47616  // The old `CompositeGroup` used to behave more like the current
47617  // `CompositeRow`, but this has been split into two different
47618  // components. We handle that difference by checking on the
47619  // provided role, and returning the appropriate component.
47620  const unproxiedCompositeGroup = (0,external_wp_element_namespaceObject.forwardRef)(({
47621    role,
47622    ...props
47623  }, ref) => {
47624    const Component = role === 'row' ? CompositeRow : CompositeGroup;
47625    return (0,external_React_.createElement)(Component, {
47626      ref: ref,
47627      role: role,
47628      ...props
47629    });
47630  });
47631  unproxiedCompositeGroup.displayName = 'CompositeGroup';
47632  const legacy_Composite = proxyComposite(Composite, {
47633    baseId: 'id'
47634  });
47635  const legacy_CompositeGroup = proxyComposite(unproxiedCompositeGroup);
47636  const legacy_CompositeItem = proxyComposite(CompositeItem, {
47637    focusable: 'accessibleWhenDisabled'
47638  });
47639  function useCompositeState(legacyStateOptions = {}) {
47640    const {
47641      baseId,
47642      currentId: defaultActiveId,
47643      orientation,
47644      rtl = false,
47645      loop: focusLoop = false,
47646      wrap: focusWrap = false,
47647      shift: focusShift = false,
47648      // eslint-disable-next-line camelcase
47649      unstable_virtual: virtualFocus
47650    } = legacyStateOptions;
47651    return {
47652      baseId: (0,external_wp_compose_namespaceObject.useInstanceId)(legacy_Composite, 'composite', baseId),
47653      store: useCompositeStore({
47654        defaultActiveId,
47655        rtl,
47656        orientation,
47657        focusLoop,
47658        focusShift,
47659        focusWrap,
47660        virtualFocus
47661      })
47662    };
47663  }
47664  
47665  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/aria-helper.js
47666  const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
47667  const hiddenElementsByDepth = [];
47668  
47669  /**
47670   * Hides all elements in the body element from screen-readers except
47671   * the provided element and elements that should not be hidden from
47672   * screen-readers.
47673   *
47674   * The reason we do this is because `aria-modal="true"` currently is bugged
47675   * in Safari, and support is spotty in other browsers overall. In the future
47676   * we should consider removing these helper functions in favor of
47677   * `aria-modal="true"`.
47678   *
47679   * @param modalElement The element that should not be hidden.
47680   */
47681  function modalize(modalElement) {
47682    const elements = Array.from(document.body.children);
47683    const hiddenElements = [];
47684    hiddenElementsByDepth.push(hiddenElements);
47685    for (const element of elements) {
47686      if (element === modalElement) continue;
47687      if (elementShouldBeHidden(element)) {
47688        element.setAttribute('aria-hidden', 'true');
47689        hiddenElements.push(element);
47690      }
47691    }
47692  }
47693  
47694  /**
47695   * Determines if the passed element should not be hidden from screen readers.
47696   *
47697   * @param element The element that should be checked.
47698   *
47699   * @return Whether the element should not be hidden from screen-readers.
47700   */
47701  function elementShouldBeHidden(element) {
47702    const role = element.getAttribute('role');
47703    return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
47704  }
47705  
47706  /**
47707   * Accessibly reveals the elements hidden by the latest modal.
47708   */
47709  function unmodalize() {
47710    const hiddenElements = hiddenElementsByDepth.pop();
47711    if (!hiddenElements) return;
47712    for (const element of hiddenElements) element.removeAttribute('aria-hidden');
47713  }
47714  
47715  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/index.js
47716  
47717  /**
47718   * External dependencies
47719   */
47720  
47721  /**
47722   * WordPress dependencies
47723   */
47724  
47725  
47726  
47727  
47728  
47729  
47730  /**
47731   * Internal dependencies
47732   */
47733  
47734  
47735  
47736  // Used to track and dismiss the prior modal when another opens unless nested.
47737  const ModalContext = (0,external_wp_element_namespaceObject.createContext)([]);
47738  
47739  // Used to track body class names applied while modals are open.
47740  const bodyOpenClasses = new Map();
47741  function UnforwardedModal(props, forwardedRef) {
47742    const {
47743      bodyOpenClassName = 'modal-open',
47744      role = 'dialog',
47745      title = null,
47746      focusOnMount = true,
47747      shouldCloseOnEsc = true,
47748      shouldCloseOnClickOutside = true,
47749      isDismissible = true,
47750      /* Accessibility. */
47751      aria = {
47752        labelledby: undefined,
47753        describedby: undefined
47754      },
47755      onRequestClose,
47756      icon,
47757      closeButtonLabel,
47758      children,
47759      style,
47760      overlayClassName,
47761      className,
47762      contentLabel,
47763      onKeyDown,
47764      isFullScreen = false,
47765      size,
47766      headerActions = null,
47767      __experimentalHideHeader = false
47768    } = props;
47769    const ref = (0,external_wp_element_namespaceObject.useRef)();
47770    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal);
47771    const headingId = title ? `components-modal-header-$instanceId}` : aria.labelledby;
47772  
47773    // The focus hook does not support 'firstContentElement' but this is a valid
47774    // value for the Modal's focusOnMount prop. The following code ensures the focus
47775    // hook will focus the first focusable node within the element to which it is applied.
47776    // When `firstContentElement` is passed as the value of the focusOnMount prop,
47777    // the focus hook is applied to the Modal's content element.
47778    // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
47779    // focus hook will focus the first element in the Modal's **content** when
47780    // `firstContentElement` is passed.
47781    const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);
47782    const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
47783    const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)();
47784    const contentRef = (0,external_wp_element_namespaceObject.useRef)(null);
47785    const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null);
47786    const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false);
47787    const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false);
47788    let sizeClass;
47789    if (isFullScreen || size === 'fill') {
47790      sizeClass = 'is-full-screen';
47791    } else if (size) {
47792      sizeClass = `has-size-$size}`;
47793    }
47794  
47795    // Determines whether the Modal content is scrollable and updates the state.
47796    const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => {
47797      if (!contentRef.current) {
47798        return;
47799      }
47800      const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollContainer)(contentRef.current);
47801      if (contentRef.current === closestScrollContainer) {
47802        setHasScrollableContent(true);
47803      } else {
47804        setHasScrollableContent(false);
47805      }
47806    }, [contentRef]);
47807  
47808    // Accessibly isolates/unisolates the modal.
47809    (0,external_wp_element_namespaceObject.useEffect)(() => {
47810      modalize(ref.current);
47811      return () => unmodalize();
47812    }, []);
47813  
47814    // Keeps a fresh ref for the subsequent effect.
47815    const refOnRequestClose = (0,external_wp_element_namespaceObject.useRef)();
47816    (0,external_wp_element_namespaceObject.useEffect)(() => {
47817      refOnRequestClose.current = onRequestClose;
47818    }, [onRequestClose]);
47819  
47820    // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
47821    // one should remain open at a time and the list enables closing prior ones.
47822    const dismissers = (0,external_wp_element_namespaceObject.useContext)(ModalContext);
47823    // Used for the tracking and dismissing any nested modals.
47824    const nestedDismissers = (0,external_wp_element_namespaceObject.useRef)([]);
47825  
47826    // Updates the stack tracking open modals at this level and calls
47827    // onRequestClose for any prior and/or nested modals as applicable.
47828    (0,external_wp_element_namespaceObject.useEffect)(() => {
47829      dismissers.push(refOnRequestClose);
47830      const [first, second] = dismissers;
47831      if (second) first?.current?.();
47832      const nested = nestedDismissers.current;
47833      return () => {
47834        nested[0]?.current?.();
47835        dismissers.shift();
47836      };
47837    }, [dismissers]);
47838  
47839    // Adds/removes the value of bodyOpenClassName to body element.
47840    (0,external_wp_element_namespaceObject.useEffect)(() => {
47841      var _bodyOpenClasses$get;
47842      const theClass = bodyOpenClassName;
47843      const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
47844      bodyOpenClasses.set(theClass, oneMore);
47845      document.body.classList.add(bodyOpenClassName);
47846      return () => {
47847        const oneLess = bodyOpenClasses.get(theClass) - 1;
47848        if (oneLess === 0) {
47849          document.body.classList.remove(theClass);
47850          bodyOpenClasses.delete(theClass);
47851        } else {
47852          bodyOpenClasses.set(theClass, oneLess);
47853        }
47854      };
47855    }, [bodyOpenClassName]);
47856  
47857    // Calls the isContentScrollable callback when the Modal children container resizes.
47858    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
47859      if (!window.ResizeObserver || !childrenContainerRef.current) {
47860        return;
47861      }
47862      const resizeObserver = new ResizeObserver(isContentScrollable);
47863      resizeObserver.observe(childrenContainerRef.current);
47864      isContentScrollable();
47865      return () => {
47866        resizeObserver.disconnect();
47867      };
47868    }, [isContentScrollable, childrenContainerRef]);
47869    function handleEscapeKeyDown(event) {
47870      if (
47871      // Ignore keydowns from IMEs
47872      event.nativeEvent.isComposing ||
47873      // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
47874      // is `isComposing=false`, even though it's technically still part of the composition.
47875      // These can only be detected by keyCode.
47876      event.keyCode === 229) {
47877        return;
47878      }
47879      if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
47880        event.preventDefault();
47881        if (onRequestClose) {
47882          onRequestClose(event);
47883        }
47884      }
47885    }
47886    const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => {
47887      var _e$currentTarget$scro;
47888      const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
47889      if (!hasScrolledContent && scrollY > 0) {
47890        setHasScrolledContent(true);
47891      } else if (hasScrolledContent && scrollY <= 0) {
47892        setHasScrolledContent(false);
47893      }
47894    }, [hasScrolledContent]);
47895    let pressTarget = null;
47896    const overlayPressHandlers = {
47897      onPointerDown: event => {
47898        if (event.target === event.currentTarget) {
47899          pressTarget = event.target;
47900          // Avoids focus changing so that focus return works as expected.
47901          event.preventDefault();
47902        }
47903      },
47904      // Closes the modal with two exceptions. 1. Opening the context menu on
47905      // the overlay. 2. Pressing on the overlay then dragging the pointer
47906      // over the modal and releasing. Due to the modal being a child of the
47907      // overlay, such a gesture is a `click` on the overlay and cannot be
47908      // excepted by a `click` handler. Thus the tactic of handling
47909      // `pointerup` and comparing its target to that of the `pointerdown`.
47910      onPointerUp: ({
47911        target,
47912        button
47913      }) => {
47914        const isSameTarget = target === pressTarget;
47915        pressTarget = null;
47916        if (button === 0 && isSameTarget) onRequestClose();
47917      }
47918    };
47919    const modal =
47920    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
47921    (0,external_React_.createElement)("div", {
47922      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]),
47923      className: classnames_default()('components-modal__screen-overlay', overlayClassName),
47924      onKeyDown: handleEscapeKeyDown,
47925      ...(shouldCloseOnClickOutside ? overlayPressHandlers : {})
47926    }, (0,external_React_.createElement)(style_provider, {
47927      document: document
47928    }, (0,external_React_.createElement)("div", {
47929      className: classnames_default()('components-modal__frame', sizeClass, className),
47930      style: style,
47931      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
47932      role: role,
47933      "aria-label": contentLabel,
47934      "aria-labelledby": contentLabel ? undefined : headingId,
47935      "aria-describedby": aria.describedby,
47936      tabIndex: -1,
47937      onKeyDown: onKeyDown
47938    }, (0,external_React_.createElement)("div", {
47939      className: classnames_default()('components-modal__content', {
47940        'hide-header': __experimentalHideHeader,
47941        'is-scrollable': hasScrollableContent,
47942        'has-scrolled-content': hasScrolledContent
47943      }),
47944      role: "document",
47945      onScroll: onContentContainerScroll,
47946      ref: contentRef,
47947      "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined,
47948      tabIndex: hasScrollableContent ? 0 : undefined
47949    }, !__experimentalHideHeader && (0,external_React_.createElement)("div", {
47950      className: "components-modal__header"
47951    }, (0,external_React_.createElement)("div", {
47952      className: "components-modal__header-heading-container"
47953    }, icon && (0,external_React_.createElement)("span", {
47954      className: "components-modal__icon-container",
47955      "aria-hidden": true
47956    }, icon), title && (0,external_React_.createElement)("h1", {
47957      id: headingId,
47958      className: "components-modal__header-heading"
47959    }, title)), headerActions, isDismissible && (0,external_React_.createElement)(build_module_button, {
47960      onClick: onRequestClose,
47961      icon: library_close,
47962      label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close')
47963    })), (0,external_React_.createElement)("div", {
47964      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null])
47965    }, children)))));
47966    return (0,external_wp_element_namespaceObject.createPortal)((0,external_React_.createElement)(ModalContext.Provider, {
47967      value: nestedDismissers.current
47968    }, modal), document.body);
47969  }
47970  
47971  /**
47972   * Modals give users information and choices related to a task they’re trying to
47973   * accomplish. They can contain critical information, require decisions, or
47974   * involve multiple tasks.
47975   *
47976   * ```jsx
47977   * import { Button, Modal } from '@wordpress/components';
47978   * import { useState } from '@wordpress/element';
47979   *
47980   * const MyModal = () => {
47981   *   const [ isOpen, setOpen ] = useState( false );
47982   *   const openModal = () => setOpen( true );
47983   *   const closeModal = () => setOpen( false );
47984   *
47985   *   return (
47986   *     <>
47987   *       <Button variant="secondary" onClick={ openModal }>
47988   *         Open Modal
47989   *       </Button>
47990   *       { isOpen && (
47991   *         <Modal title="This is my modal" onRequestClose={ closeModal }>
47992   *           <Button variant="secondary" onClick={ closeModal }>
47993   *             My custom close button
47994   *           </Button>
47995   *         </Modal>
47996   *       ) }
47997   *     </>
47998   *   );
47999   * };
48000   * ```
48001   */
48002  const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal);
48003  /* harmony default export */ const modal = (Modal);
48004  
48005  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js
48006  function 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)."; }
48007  /**
48008   * External dependencies
48009   */
48010  
48011  
48012  /**
48013   * The z-index for ConfirmDialog is being set here instead of in
48014   * packages/base-styles/_z-index.scss, because this component uses
48015   * emotion instead of sass.
48016   *
48017   * ConfirmDialog needs this higher z-index to ensure it renders on top of
48018   * any parent Popover component.
48019   */
48020  const styles_wrapper =  true ? {
48021    name: "7g5ii0",
48022    styles: "&&{z-index:1000001;}"
48023  } : 0;
48024  
48025  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js
48026  
48027  /**
48028   * WordPress dependencies
48029   */
48030  
48031  
48032  
48033  /**
48034   * Internal dependencies
48035   */
48036  
48037  
48038  
48039  
48040  
48041  
48042  
48043  
48044  const UnconnectedConfirmDialog = (props, forwardedRef) => {
48045    const {
48046      isOpen: isOpenProp,
48047      onConfirm,
48048      onCancel,
48049      children,
48050      confirmButtonText,
48051      cancelButtonText,
48052      ...otherProps
48053    } = useContextSystem(props, 'ConfirmDialog');
48054    const cx = useCx();
48055    const wrapperClassName = cx(styles_wrapper);
48056    const cancelButtonRef = (0,external_wp_element_namespaceObject.useRef)();
48057    const confirmButtonRef = (0,external_wp_element_namespaceObject.useRef)();
48058    const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)();
48059    const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)();
48060    (0,external_wp_element_namespaceObject.useEffect)(() => {
48061      // We only allow the dialog to close itself if `isOpenProp` is *not* set.
48062      // If `isOpenProp` is set, then it (probably) means it's controlled by a
48063      // parent component. In that case, `shouldSelfClose` might do more harm than
48064      // good, so we disable it.
48065      const isIsOpenSet = typeof isOpenProp !== 'undefined';
48066      setIsOpen(isIsOpenSet ? isOpenProp : true);
48067      setShouldSelfClose(!isIsOpenSet);
48068    }, [isOpenProp]);
48069    const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => {
48070      callback?.(event);
48071      if (shouldSelfClose) {
48072        setIsOpen(false);
48073      }
48074    }, [shouldSelfClose, setIsOpen]);
48075    const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => {
48076      // Avoid triggering the 'confirm' action when a button is focused,
48077      // as this can cause a double submission.
48078      const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
48079      if (!isConfirmOrCancelButton && event.key === 'Enter') {
48080        handleEvent(onConfirm)(event);
48081      }
48082    }, [handleEvent, onConfirm]);
48083    const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel');
48084    const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK');
48085    return (0,external_React_.createElement)(external_React_.Fragment, null, isOpen && (0,external_React_.createElement)(modal, {
48086      onRequestClose: handleEvent(onCancel),
48087      onKeyDown: handleEnter,
48088      closeButtonLabel: cancelLabel,
48089      isDismissible: true,
48090      ref: forwardedRef,
48091      overlayClassName: wrapperClassName,
48092      __experimentalHideHeader: true,
48093      ...otherProps
48094    }, (0,external_React_.createElement)(v_stack_component, {
48095      spacing: 8
48096    }, (0,external_React_.createElement)(text_component, null, children), (0,external_React_.createElement)(flex_component, {
48097      direction: "row",
48098      justify: "flex-end"
48099    }, (0,external_React_.createElement)(build_module_button, {
48100      __next40pxDefaultSize: true,
48101      ref: cancelButtonRef,
48102      variant: "tertiary",
48103      onClick: handleEvent(onCancel)
48104    }, cancelLabel), (0,external_React_.createElement)(build_module_button, {
48105      __next40pxDefaultSize: true,
48106      ref: confirmButtonRef,
48107      variant: "primary",
48108      onClick: handleEvent(onConfirm)
48109    }, confirmLabel)))));
48110  };
48111  
48112  /**
48113   * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)
48114   * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
48115   * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.
48116   * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by
48117   * clicking outside the dialog focus (i.e, the overlay).
48118   *
48119   * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.
48120   *
48121   * UnControlled:
48122   *
48123   * Allows the component to be used standalone, just by declaring it as part of another React's component render method:
48124   * -   It will be automatically open (displayed) upon mounting;
48125   * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
48126   * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
48127   *
48128   * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
48129   *
48130   * ```jsx
48131   * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
48132   *
48133   * function Example() {
48134   *     return (
48135   *         <ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>
48136   *             Are you sure? <strong>This action cannot be undone!</strong>
48137   *         </ConfirmDialog>
48138   *     );
48139   * }
48140   * ```
48141   *
48142   *
48143   * Controlled mode:
48144   *  Let the parent component control when the dialog is open/closed. It's activated when a
48145   * boolean value is passed to `isOpen`:
48146   * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
48147   * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
48148   * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
48149   *
48150   *```jsx
48151   * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
48152   * import { useState } from '@wordpress/element';
48153   *
48154   * function Example() {
48155   *     const [ isOpen, setIsOpen ] = useState( true );
48156   *
48157   *     const handleConfirm = () => {
48158   *         console.debug( 'Confirmed!' );
48159   *         setIsOpen( false );
48160   *     };
48161   *
48162   *     const handleCancel = () => {
48163   *         console.debug( 'Cancelled!' );
48164   *         setIsOpen( false );
48165   *     };
48166   *
48167   *     return (
48168   *         <ConfirmDialog
48169   *             isOpen={ isOpen }
48170   *             onConfirm={ handleConfirm }
48171   *             onCancel={ handleCancel }
48172   *         >
48173   *             Are you sure? <strong>This action cannot be undone!</strong>
48174   *         </ConfirmDialog>
48175   *     );
48176   * }
48177   * ```
48178   */
48179  const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');
48180  /* harmony default export */ const confirm_dialog_component = (ConfirmDialog);
48181  
48182  // EXTERNAL MODULE: ./node_modules/prop-types/index.js
48183  var prop_types = __webpack_require__(5826);
48184  var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
48185  // EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js
48186  var react_is = __webpack_require__(1915);
48187  ;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.mjs
48188  function dist_t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function dist_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function dist_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return dist_e(r.overflowY,n)||dist_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 dist_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}var compute_scroll_into_view_dist_i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!dist_t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;dist_t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&dist_n(m)&&!dist_n(document.documentElement)||null!=m&&dist_n(m,u)&&p.push(m)}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?dist_r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:dist_r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else{G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?dist_r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:dist_r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)))}T.push({el:B,top:G,left:J})}return T};
48189  //# sourceMappingURL=index.mjs.map
48190  
48191  ;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js
48192  
48193  
48194  
48195  
48196  
48197  
48198  let idCounter = 0;
48199  /**
48200   * Accepts a parameter and returns it if it's a function
48201   * or a noop function if it's not. This allows us to
48202   * accept a callback, but not worry about it if it's not
48203   * passed.
48204   * @param {Function} cb the callback
48205   * @return {Function} a function
48206   */
48207  
48208  function cbToCb(cb) {
48209    return typeof cb === 'function' ? cb : downshift_esm_noop;
48210  }
48211  
48212  function downshift_esm_noop() {}
48213  /**
48214   * Scroll node into view if necessary
48215   * @param {HTMLElement} node the element that should scroll into view
48216   * @param {HTMLElement} menuNode the menu element of the component
48217   */
48218  
48219  
48220  function scrollIntoView(node, menuNode) {
48221    if (!node) {
48222      return;
48223    }
48224  
48225    const actions = compute_scroll_into_view_dist_i(node, {
48226      boundary: menuNode,
48227      block: 'nearest',
48228      scrollMode: 'if-needed'
48229    });
48230    actions.forEach(_ref => {
48231      let {
48232        el,
48233        top,
48234        left
48235      } = _ref;
48236      el.scrollTop = top;
48237      el.scrollLeft = left;
48238    });
48239  }
48240  /**
48241   * @param {HTMLElement} parent the parent node
48242   * @param {HTMLElement} child the child node
48243   * @param {Window} environment The window context where downshift renders.
48244   * @return {Boolean} whether the parent is the child or the child is in the parent
48245   */
48246  
48247  
48248  function isOrContainsNode(parent, child, environment) {
48249    const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
48250    return result;
48251  }
48252  /**
48253   * Simple debounce implementation. Will call the given
48254   * function once after the time given has passed since
48255   * it was last called.
48256   * @param {Function} fn the function to call after the time
48257   * @param {Number} time the time to wait
48258   * @return {Function} the debounced function
48259   */
48260  
48261  
48262  function debounce(fn, time) {
48263    let timeoutId;
48264  
48265    function cancel() {
48266      if (timeoutId) {
48267        clearTimeout(timeoutId);
48268      }
48269    }
48270  
48271    function wrapper() {
48272      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
48273        args[_key] = arguments[_key];
48274      }
48275  
48276      cancel();
48277      timeoutId = setTimeout(() => {
48278        timeoutId = null;
48279        fn(...args);
48280      }, time);
48281    }
48282  
48283    wrapper.cancel = cancel;
48284    return wrapper;
48285  }
48286  /**
48287   * This is intended to be used to compose event handlers.
48288   * They are executed in order until one of them sets
48289   * `event.preventDownshiftDefault = true`.
48290   * @param {...Function} fns the event handler functions
48291   * @return {Function} the event handler to add to an element
48292   */
48293  
48294  
48295  function callAllEventHandlers() {
48296    for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
48297      fns[_key2] = arguments[_key2];
48298    }
48299  
48300    return function (event) {
48301      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
48302        args[_key3 - 1] = arguments[_key3];
48303      }
48304  
48305      return fns.some(fn => {
48306        if (fn) {
48307          fn(event, ...args);
48308        }
48309  
48310        return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
48311      });
48312    };
48313  }
48314  
48315  function handleRefs() {
48316    for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
48317      refs[_key4] = arguments[_key4];
48318    }
48319  
48320    return node => {
48321      refs.forEach(ref => {
48322        if (typeof ref === 'function') {
48323          ref(node);
48324        } else if (ref) {
48325          ref.current = node;
48326        }
48327      });
48328    };
48329  }
48330  /**
48331   * This generates a unique ID for an instance of Downshift
48332   * @return {String} the unique ID
48333   */
48334  
48335  
48336  function generateId() {
48337    return String(idCounter++);
48338  }
48339  /**
48340   * Resets idCounter to 0. Used for SSR.
48341   */
48342  
48343  
48344  function resetIdCounter() {
48345    idCounter = 0;
48346  }
48347  /**
48348   * Default implementation for status message. Only added when menu is open.
48349   * Will specify if there are results in the list, and if so, how many,
48350   * and what keys are relevant.
48351   *
48352   * @param {Object} param the downshift state and other relevant properties
48353   * @return {String} the a11y status message
48354   */
48355  
48356  
48357  function getA11yStatusMessage$1(_ref2) {
48358    let {
48359      isOpen,
48360      resultCount,
48361      previousResultCount
48362    } = _ref2;
48363  
48364    if (!isOpen) {
48365      return '';
48366    }
48367  
48368    if (!resultCount) {
48369      return 'No results are available.';
48370    }
48371  
48372    if (resultCount !== previousResultCount) {
48373      return `$resultCount} result$resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
48374    }
48375  
48376    return '';
48377  }
48378  /**
48379   * Takes an argument and if it's an array, returns the first item in the array
48380   * otherwise returns the argument
48381   * @param {*} arg the maybe-array
48382   * @param {*} defaultValue the value if arg is falsey not defined
48383   * @return {*} the arg or it's first item
48384   */
48385  
48386  
48387  function unwrapArray(arg, defaultValue) {
48388    arg = Array.isArray(arg) ?
48389    /* istanbul ignore next (preact) */
48390    arg[0] : arg;
48391  
48392    if (!arg && defaultValue) {
48393      return defaultValue;
48394    } else {
48395      return arg;
48396    }
48397  }
48398  /**
48399   * @param {Object} element (P)react element
48400   * @return {Boolean} whether it's a DOM element
48401   */
48402  
48403  
48404  function isDOMElement(element) {
48405  
48406  
48407    return typeof element.type === 'string';
48408  }
48409  /**
48410   * @param {Object} element (P)react element
48411   * @return {Object} the props
48412   */
48413  
48414  
48415  function getElementProps(element) {
48416  
48417    return element.props;
48418  }
48419  /**
48420   * Throws a helpful error message for required properties. Useful
48421   * to be used as a default in destructuring or object params.
48422   * @param {String} fnName the function name
48423   * @param {String} propName the prop name
48424   */
48425  
48426  
48427  function requiredProp(fnName, propName) {
48428    // eslint-disable-next-line no-console
48429    console.error(`The property "$propName}" is required in "$fnName}"`);
48430  }
48431  
48432  const stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type']));
48433  /**
48434   * @param {Object} state the state object
48435   * @return {Object} state that is relevant to downshift
48436   */
48437  
48438  function pickState(state) {
48439    if (state === void 0) {
48440      state = {};
48441    }
48442  
48443    const result = {};
48444    stateKeys.forEach(k => {
48445      if (state.hasOwnProperty(k)) {
48446        result[k] = state[k];
48447      }
48448    });
48449    return result;
48450  }
48451  /**
48452   * This will perform a shallow merge of the given state object
48453   * with the state coming from props
48454   * (for the controlled component scenario)
48455   * This is used in state updater functions so they're referencing
48456   * the right state regardless of where it comes from.
48457   *
48458   * @param {Object} state The state of the component/hook.
48459   * @param {Object} props The props that may contain controlled values.
48460   * @returns {Object} The merged controlled state.
48461   */
48462  
48463  
48464  function getState(state, props) {
48465    return Object.keys(state).reduce((prevState, key) => {
48466      prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
48467      return prevState;
48468    }, {});
48469  }
48470  /**
48471   * This determines whether a prop is a "controlled prop" meaning it is
48472   * state which is controlled by the outside of this component rather
48473   * than within this component.
48474   *
48475   * @param {Object} props The props that may contain controlled values.
48476   * @param {String} key the key to check
48477   * @return {Boolean} whether it is a controlled controlled prop
48478   */
48479  
48480  
48481  function isControlledProp(props, key) {
48482    return props[key] !== undefined;
48483  }
48484  /**
48485   * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
48486   * @param {Object} event a keyboardEvent object
48487   * @return {String} keyboard key
48488   */
48489  
48490  
48491  function normalizeArrowKey(event) {
48492    const {
48493      key,
48494      keyCode
48495    } = event;
48496    /* istanbul ignore next (ie) */
48497  
48498    if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
48499      return `Arrow$key}`;
48500    }
48501  
48502    return key;
48503  }
48504  /**
48505   * Simple check if the value passed is object literal
48506   * @param {*} obj any things
48507   * @return {Boolean} whether it's object literal
48508   */
48509  
48510  
48511  function downshift_esm_isPlainObject(obj) {
48512    return Object.prototype.toString.call(obj) === '[object Object]';
48513  }
48514  /**
48515   * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
48516   * it will wrap to either 0 or itemCount - 1.
48517   *
48518   * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
48519   * @param {number} baseIndex The initial position to move from.
48520   * @param {number} itemCount The total number of items.
48521   * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
48522   * @param {boolean} circular Specify if navigation is circular. Default is true.
48523   * @returns {number} The new index after the move.
48524   */
48525  
48526  
48527  function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
48528    if (circular === void 0) {
48529      circular = true;
48530    }
48531  
48532    if (itemCount === 0) {
48533      return -1;
48534    }
48535  
48536    const itemsLastIndex = itemCount - 1;
48537  
48538    if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
48539      baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
48540    }
48541  
48542    let newIndex = baseIndex + moveAmount;
48543  
48544    if (newIndex < 0) {
48545      newIndex = circular ? itemsLastIndex : 0;
48546    } else if (newIndex > itemsLastIndex) {
48547      newIndex = circular ? 0 : itemsLastIndex;
48548    }
48549  
48550    const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
48551  
48552    if (nonDisabledNewIndex === -1) {
48553      return baseIndex >= itemCount ? -1 : baseIndex;
48554    }
48555  
48556    return nonDisabledNewIndex;
48557  }
48558  /**
48559   * Returns the next index in the list of an item that is not disabled.
48560   *
48561   * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
48562   * @param {number} baseIndex The initial position to move from.
48563   * @param {number} itemCount The total number of items.
48564   * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
48565   * @param {boolean} circular Specify if navigation is circular. Default is true.
48566   * @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.
48567   */
48568  
48569  
48570  function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
48571    const currentElementNode = getItemNodeFromIndex(baseIndex);
48572  
48573    if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
48574      return baseIndex;
48575    }
48576  
48577    if (moveAmount > 0) {
48578      for (let index = baseIndex + 1; index < itemCount; index++) {
48579        if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
48580          return index;
48581        }
48582      }
48583    } else {
48584      for (let index = baseIndex - 1; index >= 0; index--) {
48585        if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
48586          return index;
48587        }
48588      }
48589    }
48590  
48591    if (circular) {
48592      return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
48593    }
48594  
48595    return -1;
48596  }
48597  /**
48598   * Checks if event target is within the downshift elements.
48599   *
48600   * @param {EventTarget} target Target to check.
48601   * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
48602   * @param {Window} environment The window context where downshift renders.
48603   * @param {boolean} checkActiveElement Whether to also check activeElement.
48604   *
48605   * @returns {boolean} Whether or not the target is within downshift elements.
48606   */
48607  
48608  
48609  function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
48610    if (checkActiveElement === void 0) {
48611      checkActiveElement = true;
48612    }
48613  
48614    return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
48615  } // eslint-disable-next-line import/no-mutable-exports
48616  
48617  
48618  let validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop));
48619  /* istanbul ignore next */
48620  
48621  if (false) {}
48622  
48623  const cleanupStatus = debounce(documentProp => {
48624    getStatusDiv(documentProp).textContent = '';
48625  }, 500);
48626  /**
48627   * @param {String} status the status message
48628   * @param {Object} documentProp document passed by the user.
48629   */
48630  
48631  function setStatus(status, documentProp) {
48632    const div = getStatusDiv(documentProp);
48633  
48634    if (!status) {
48635      return;
48636    }
48637  
48638    div.textContent = status;
48639    cleanupStatus(documentProp);
48640  }
48641  /**
48642   * Get the status node or create it if it does not already exist.
48643   * @param {Object} documentProp document passed by the user.
48644   * @return {HTMLElement} the status node.
48645   */
48646  
48647  
48648  function getStatusDiv(documentProp) {
48649    if (documentProp === void 0) {
48650      documentProp = document;
48651    }
48652  
48653    let statusDiv = documentProp.getElementById('a11y-status-message');
48654  
48655    if (statusDiv) {
48656      return statusDiv;
48657    }
48658  
48659    statusDiv = documentProp.createElement('div');
48660    statusDiv.setAttribute('id', 'a11y-status-message');
48661    statusDiv.setAttribute('role', 'status');
48662    statusDiv.setAttribute('aria-live', 'polite');
48663    statusDiv.setAttribute('aria-relevant', 'additions text');
48664    Object.assign(statusDiv.style, {
48665      border: '0',
48666      clip: 'rect(0 0 0 0)',
48667      height: '1px',
48668      margin: '-1px',
48669      overflow: 'hidden',
48670      padding: '0',
48671      position: 'absolute',
48672      width: '1px'
48673    });
48674    documentProp.body.appendChild(statusDiv);
48675    return statusDiv;
48676  }
48677  
48678  const unknown =  false ? 0 : 0;
48679  const mouseUp =  false ? 0 : 1;
48680  const itemMouseEnter =  false ? 0 : 2;
48681  const keyDownArrowUp =  false ? 0 : 3;
48682  const keyDownArrowDown =  false ? 0 : 4;
48683  const keyDownEscape =  false ? 0 : 5;
48684  const keyDownEnter =  false ? 0 : 6;
48685  const keyDownHome =  false ? 0 : 7;
48686  const keyDownEnd =  false ? 0 : 8;
48687  const clickItem =  false ? 0 : 9;
48688  const blurInput =  false ? 0 : 10;
48689  const changeInput =  false ? 0 : 11;
48690  const keyDownSpaceButton =  false ? 0 : 12;
48691  const clickButton =  false ? 0 : 13;
48692  const blurButton =  false ? 0 : 14;
48693  const controlledPropUpdatedSelectedItem =  false ? 0 : 15;
48694  const touchEnd =  false ? 0 : 16;
48695  
48696  var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
48697    __proto__: null,
48698    unknown: unknown,
48699    mouseUp: mouseUp,
48700    itemMouseEnter: itemMouseEnter,
48701    keyDownArrowUp: keyDownArrowUp,
48702    keyDownArrowDown: keyDownArrowDown,
48703    keyDownEscape: keyDownEscape,
48704    keyDownEnter: keyDownEnter,
48705    keyDownHome: keyDownHome,
48706    keyDownEnd: keyDownEnd,
48707    clickItem: clickItem,
48708    blurInput: blurInput,
48709    changeInput: changeInput,
48710    keyDownSpaceButton: keyDownSpaceButton,
48711    clickButton: clickButton,
48712    blurButton: blurButton,
48713    controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
48714    touchEnd: touchEnd
48715  });
48716  
48717  /* eslint camelcase:0 */
48718  
48719  const Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && ((() => {
48720    class Downshift extends Component {
48721      constructor(_props) {
48722        var _this;
48723  
48724        super(_props);
48725        _this = this;
48726        this.id = this.props.id || `downshift-$generateId()}`;
48727        this.menuId = this.props.menuId || `$this.id}-menu`;
48728        this.labelId = this.props.labelId || `$this.id}-label`;
48729        this.inputId = this.props.inputId || `$this.id}-input`;
48730  
48731        this.getItemId = this.props.getItemId || (index => `$this.id}-item-$index}`);
48732  
48733        this.input = null;
48734        this.items = [];
48735        this.itemCount = null;
48736        this.previousResultCount = 0;
48737        this.timeoutIds = [];
48738  
48739        this.internalSetTimeout = (fn, time) => {
48740          const id = setTimeout(() => {
48741            this.timeoutIds = this.timeoutIds.filter(i => i !== id);
48742            fn();
48743          }, time);
48744          this.timeoutIds.push(id);
48745        };
48746  
48747        this.setItemCount = count => {
48748          this.itemCount = count;
48749        };
48750  
48751        this.unsetItemCount = () => {
48752          this.itemCount = null;
48753        };
48754  
48755        this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
48756          if (highlightedIndex === void 0) {
48757            highlightedIndex = _this.props.defaultHighlightedIndex;
48758          }
48759  
48760          if (otherStateToSet === void 0) {
48761            otherStateToSet = {};
48762          }
48763  
48764          otherStateToSet = pickState(otherStateToSet);
48765  
48766          _this.internalSetState({
48767            highlightedIndex,
48768            ...otherStateToSet
48769          });
48770        };
48771  
48772        this.clearSelection = cb => {
48773          this.internalSetState({
48774            selectedItem: null,
48775            inputValue: '',
48776            highlightedIndex: this.props.defaultHighlightedIndex,
48777            isOpen: this.props.defaultIsOpen
48778          }, cb);
48779        };
48780  
48781        this.selectItem = (item, otherStateToSet, cb) => {
48782          otherStateToSet = pickState(otherStateToSet);
48783          this.internalSetState({
48784            isOpen: this.props.defaultIsOpen,
48785            highlightedIndex: this.props.defaultHighlightedIndex,
48786            selectedItem: item,
48787            inputValue: this.props.itemToString(item),
48788            ...otherStateToSet
48789          }, cb);
48790        };
48791  
48792        this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
48793          const item = this.items[itemIndex];
48794  
48795          if (item == null) {
48796            return;
48797          }
48798  
48799          this.selectItem(item, otherStateToSet, cb);
48800        };
48801  
48802        this.selectHighlightedItem = (otherStateToSet, cb) => {
48803          return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
48804        };
48805  
48806        this.internalSetState = (stateToSet, cb) => {
48807          let isItemSelected, onChangeArg;
48808          const onStateChangeArg = {};
48809          const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
48810          // so someone controlling the `inputValue` state gets notified of
48811          // the input change as soon as possible. This avoids issues with
48812          // preserving the cursor position.
48813          // See https://github.com/downshift-js/downshift/issues/217 for more info.
48814  
48815          if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
48816            this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
48817              ...stateToSet
48818            });
48819          }
48820  
48821          return this.setState(state => {
48822            state = this.getState(state);
48823            let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
48824  
48825            newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
48826            // what was selected before
48827            // used to determine if onSelect and onChange callbacks should be called
48828  
48829            isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
48830  
48831            const nextState = {}; // this is just used to tell whether the state changed
48832            // and we're trying to update that state. OR if the selection has changed and we're
48833            // trying to update the selection
48834  
48835            if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
48836              onChangeArg = newStateToSet.selectedItem;
48837            }
48838  
48839            newStateToSet.type = newStateToSet.type || unknown;
48840            Object.keys(newStateToSet).forEach(key => {
48841              // onStateChangeArg should only have the state that is
48842              // actually changing
48843              if (state[key] !== newStateToSet[key]) {
48844                onStateChangeArg[key] = newStateToSet[key];
48845              } // the type is useful for the onStateChangeArg
48846              // but we don't actually want to set it in internal state.
48847              // this is an undocumented feature for now... Not all internalSetState
48848              // calls support it and I'm not certain we want them to yet.
48849              // But it enables users controlling the isOpen state to know when
48850              // the isOpen state changes due to mouseup events which is quite handy.
48851  
48852  
48853              if (key === 'type') {
48854                return;
48855              }
48856  
48857              newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
48858  
48859              if (!isControlledProp(this.props, key)) {
48860                nextState[key] = newStateToSet[key];
48861              }
48862            }); // if stateToSet is a function, then we weren't able to call onInputValueChange
48863            // earlier, so we'll call it now that we know what the inputValue state will be.
48864  
48865            if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
48866              this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
48867                ...newStateToSet
48868              });
48869            }
48870  
48871            return nextState;
48872          }, () => {
48873            // call the provided callback if it's a function
48874            cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
48875            // we have relevant information to pass them.
48876  
48877            const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
48878  
48879            if (hasMoreStateThanType) {
48880              this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
48881            }
48882  
48883            if (isItemSelected) {
48884              this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
48885            }
48886  
48887            if (onChangeArg !== undefined) {
48888              this.props.onChange(onChangeArg, this.getStateAndHelpers());
48889            } // this is currently undocumented and therefore subject to change
48890            // We'll try to not break it, but just be warned.
48891  
48892  
48893            this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
48894          });
48895        };
48896  
48897        this.rootRef = node => this._rootNode = node;
48898  
48899        this.getRootProps = function (_temp, _temp2) {
48900          let {
48901            refKey = 'ref',
48902            ref,
48903            ...rest
48904          } = _temp === void 0 ? {} : _temp;
48905          let {
48906            suppressRefError = false
48907          } = _temp2 === void 0 ? {} : _temp2;
48908          // this is used in the render to know whether the user has called getRootProps.
48909          // It uses that to know whether to apply the props automatically
48910          _this.getRootProps.called = true;
48911          _this.getRootProps.refKey = refKey;
48912          _this.getRootProps.suppressRefError = suppressRefError;
48913  
48914          const {
48915            isOpen
48916          } = _this.getState();
48917  
48918          return {
48919            [refKey]: handleRefs(ref, _this.rootRef),
48920            role: 'combobox',
48921            'aria-expanded': isOpen,
48922            'aria-haspopup': 'listbox',
48923            'aria-owns': isOpen ? _this.menuId : null,
48924            'aria-labelledby': _this.labelId,
48925            ...rest
48926          };
48927        };
48928  
48929        this.keyDownHandlers = {
48930          ArrowDown(event) {
48931            event.preventDefault();
48932  
48933            if (this.getState().isOpen) {
48934              const amount = event.shiftKey ? 5 : 1;
48935              this.moveHighlightedIndex(amount, {
48936                type: keyDownArrowDown
48937              });
48938            } else {
48939              this.internalSetState({
48940                isOpen: true,
48941                type: keyDownArrowDown
48942              }, () => {
48943                const itemCount = this.getItemCount();
48944  
48945                if (itemCount > 0) {
48946                  const {
48947                    highlightedIndex
48948                  } = this.getState();
48949                  const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
48950                  this.setHighlightedIndex(nextHighlightedIndex, {
48951                    type: keyDownArrowDown
48952                  });
48953                }
48954              });
48955            }
48956          },
48957  
48958          ArrowUp(event) {
48959            event.preventDefault();
48960  
48961            if (this.getState().isOpen) {
48962              const amount = event.shiftKey ? -5 : -1;
48963              this.moveHighlightedIndex(amount, {
48964                type: keyDownArrowUp
48965              });
48966            } else {
48967              this.internalSetState({
48968                isOpen: true,
48969                type: keyDownArrowUp
48970              }, () => {
48971                const itemCount = this.getItemCount();
48972  
48973                if (itemCount > 0) {
48974                  const {
48975                    highlightedIndex
48976                  } = this.getState();
48977                  const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
48978                  this.setHighlightedIndex(nextHighlightedIndex, {
48979                    type: keyDownArrowUp
48980                  });
48981                }
48982              });
48983            }
48984          },
48985  
48986          Enter(event) {
48987            if (event.which === 229) {
48988              return;
48989            }
48990  
48991            const {
48992              isOpen,
48993              highlightedIndex
48994            } = this.getState();
48995  
48996            if (isOpen && highlightedIndex != null) {
48997              event.preventDefault();
48998              const item = this.items[highlightedIndex];
48999              const itemNode = this.getItemNodeFromIndex(highlightedIndex);
49000  
49001              if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
49002                return;
49003              }
49004  
49005              this.selectHighlightedItem({
49006                type: keyDownEnter
49007              });
49008            }
49009          },
49010  
49011          Escape(event) {
49012            event.preventDefault();
49013            this.reset({
49014              type: keyDownEscape,
49015              ...(!this.state.isOpen && {
49016                selectedItem: null,
49017                inputValue: ''
49018              })
49019            });
49020          }
49021  
49022        };
49023        this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
49024  
49025          ' '(event) {
49026            event.preventDefault();
49027            this.toggleMenu({
49028              type: keyDownSpaceButton
49029            });
49030          }
49031  
49032        };
49033        this.inputKeyDownHandlers = { ...this.keyDownHandlers,
49034  
49035          Home(event) {
49036            const {
49037              isOpen
49038            } = this.getState();
49039  
49040            if (!isOpen) {
49041              return;
49042            }
49043  
49044            event.preventDefault();
49045            const itemCount = this.getItemCount();
49046  
49047            if (itemCount <= 0 || !isOpen) {
49048              return;
49049            } // get next non-disabled starting downwards from 0 if that's disabled.
49050  
49051  
49052            const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
49053            this.setHighlightedIndex(newHighlightedIndex, {
49054              type: keyDownHome
49055            });
49056          },
49057  
49058          End(event) {
49059            const {
49060              isOpen
49061            } = this.getState();
49062  
49063            if (!isOpen) {
49064              return;
49065            }
49066  
49067            event.preventDefault();
49068            const itemCount = this.getItemCount();
49069  
49070            if (itemCount <= 0 || !isOpen) {
49071              return;
49072            } // get next non-disabled starting upwards from last index if that's disabled.
49073  
49074  
49075            const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
49076            this.setHighlightedIndex(newHighlightedIndex, {
49077              type: keyDownEnd
49078            });
49079          }
49080  
49081        };
49082  
49083        this.getToggleButtonProps = function (_temp3) {
49084          let {
49085            onClick,
49086            onPress,
49087            onKeyDown,
49088            onKeyUp,
49089            onBlur,
49090            ...rest
49091          } = _temp3 === void 0 ? {} : _temp3;
49092  
49093          const {
49094            isOpen
49095          } = _this.getState();
49096  
49097          const enabledEventHandlers = {
49098            onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
49099            onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
49100            onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
49101            onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
49102          };
49103          const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
49104          return {
49105            type: 'button',
49106            role: 'button',
49107            'aria-label': isOpen ? 'close menu' : 'open menu',
49108            'aria-haspopup': true,
49109            'data-toggle': true,
49110            ...eventHandlers,
49111            ...rest
49112          };
49113        };
49114  
49115        this.buttonHandleKeyUp = event => {
49116          // Prevent click event from emitting in Firefox
49117          event.preventDefault();
49118        };
49119  
49120        this.buttonHandleKeyDown = event => {
49121          const key = normalizeArrowKey(event);
49122  
49123          if (this.buttonKeyDownHandlers[key]) {
49124            this.buttonKeyDownHandlers[key].call(this, event);
49125          }
49126        };
49127  
49128        this.buttonHandleClick = event => {
49129          event.preventDefault(); // handle odd case for Safari and Firefox which
49130          // don't give the button the focus properly.
49131  
49132          /* istanbul ignore if (can't reasonably test this) */
49133  
49134          if (this.props.environment.document.activeElement === this.props.environment.document.body) {
49135            event.target.focus();
49136          } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
49137          // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
49138          // when building for production and should therefore have no impact on production code.
49139  
49140  
49141          if (false) {} else {
49142            // Ensure that toggle of menu occurs after the potential blur event in iOS
49143            this.internalSetTimeout(() => this.toggleMenu({
49144              type: clickButton
49145            }));
49146          }
49147        };
49148  
49149        this.buttonHandleBlur = event => {
49150          const blurTarget = event.target; // Save blur target for comparison with activeElement later
49151          // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
49152  
49153          this.internalSetTimeout(() => {
49154            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)
49155            ) {
49156              this.reset({
49157                type: blurButton
49158              });
49159            }
49160          });
49161        };
49162  
49163        this.getLabelProps = props => {
49164          return {
49165            htmlFor: this.inputId,
49166            id: this.labelId,
49167            ...props
49168          };
49169        };
49170  
49171        this.getInputProps = function (_temp4) {
49172          let {
49173            onKeyDown,
49174            onBlur,
49175            onChange,
49176            onInput,
49177            onChangeText,
49178            ...rest
49179          } = _temp4 === void 0 ? {} : _temp4;
49180          let onChangeKey;
49181          let eventHandlers = {};
49182          /* istanbul ignore next (preact) */
49183  
49184          {
49185            onChangeKey = 'onChange';
49186          }
49187  
49188          const {
49189            inputValue,
49190            isOpen,
49191            highlightedIndex
49192          } = _this.getState();
49193  
49194          if (!rest.disabled) {
49195            eventHandlers = {
49196              [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
49197              onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
49198              onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
49199            };
49200          }
49201  
49202          return {
49203            'aria-autocomplete': 'list',
49204            'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
49205            'aria-controls': isOpen ? _this.menuId : null,
49206            'aria-labelledby': _this.labelId,
49207            // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
49208            // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
49209            autoComplete: 'off',
49210            value: inputValue,
49211            id: _this.inputId,
49212            ...eventHandlers,
49213            ...rest
49214          };
49215        };
49216  
49217        this.inputHandleKeyDown = event => {
49218          const key = normalizeArrowKey(event);
49219  
49220          if (key && this.inputKeyDownHandlers[key]) {
49221            this.inputKeyDownHandlers[key].call(this, event);
49222          }
49223        };
49224  
49225        this.inputHandleChange = event => {
49226          this.internalSetState({
49227            type: changeInput,
49228            isOpen: true,
49229            inputValue: event.target.value,
49230            highlightedIndex: this.props.defaultHighlightedIndex
49231          });
49232        };
49233  
49234        this.inputHandleBlur = () => {
49235          // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
49236          this.internalSetTimeout(() => {
49237            const 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);
49238  
49239            if (!this.isMouseDown && !downshiftButtonIsActive) {
49240              this.reset({
49241                type: blurInput
49242              });
49243            }
49244          });
49245        };
49246  
49247        this.menuRef = node => {
49248          this._menuNode = node;
49249        };
49250  
49251        this.getMenuProps = function (_temp5, _temp6) {
49252          let {
49253            refKey = 'ref',
49254            ref,
49255            ...props
49256          } = _temp5 === void 0 ? {} : _temp5;
49257          let {
49258            suppressRefError = false
49259          } = _temp6 === void 0 ? {} : _temp6;
49260          _this.getMenuProps.called = true;
49261          _this.getMenuProps.refKey = refKey;
49262          _this.getMenuProps.suppressRefError = suppressRefError;
49263          return {
49264            [refKey]: handleRefs(ref, _this.menuRef),
49265            role: 'listbox',
49266            'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
49267            id: _this.menuId,
49268            ...props
49269          };
49270        };
49271  
49272        this.getItemProps = function (_temp7) {
49273          let {
49274            onMouseMove,
49275            onMouseDown,
49276            onClick,
49277            onPress,
49278            index,
49279            item =  true ?
49280            /* istanbul ignore next */
49281            undefined : 0,
49282            ...rest
49283          } = _temp7 === void 0 ? {} : _temp7;
49284  
49285          if (index === undefined) {
49286            _this.items.push(item);
49287  
49288            index = _this.items.indexOf(item);
49289          } else {
49290            _this.items[index] = item;
49291          }
49292  
49293          const onSelectKey = 'onClick';
49294          const customClickHandler = onClick;
49295          const enabledEventHandlers = {
49296            // onMouseMove is used over onMouseEnter here. onMouseMove
49297            // is only triggered on actual mouse movement while onMouseEnter
49298            // can fire on DOM changes, interrupting keyboard navigation
49299            onMouseMove: callAllEventHandlers(onMouseMove, () => {
49300              if (index === _this.getState().highlightedIndex) {
49301                return;
49302              }
49303  
49304              _this.setHighlightedIndex(index, {
49305                type: itemMouseEnter
49306              }); // We never want to manually scroll when changing state based
49307              // on `onMouseMove` because we will be moving the element out
49308              // from under the user which is currently scrolling/moving the
49309              // cursor
49310  
49311  
49312              _this.avoidScrolling = true;
49313  
49314              _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
49315            }),
49316            onMouseDown: callAllEventHandlers(onMouseDown, event => {
49317              // This prevents the activeElement from being changed
49318              // to the item so it can remain with the current activeElement
49319              // which is a more common use case.
49320              event.preventDefault();
49321            }),
49322            [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
49323              _this.selectItemAtIndex(index, {
49324                type: clickItem
49325              });
49326            })
49327          }; // Passing down the onMouseDown handler to prevent redirect
49328          // of the activeElement if clicking on disabled items
49329  
49330          const eventHandlers = rest.disabled ? {
49331            onMouseDown: enabledEventHandlers.onMouseDown
49332          } : enabledEventHandlers;
49333          return {
49334            id: _this.getItemId(index),
49335            role: 'option',
49336            'aria-selected': _this.getState().highlightedIndex === index,
49337            ...eventHandlers,
49338            ...rest
49339          };
49340        };
49341  
49342        this.clearItems = () => {
49343          this.items = [];
49344        };
49345  
49346        this.reset = function (otherStateToSet, cb) {
49347          if (otherStateToSet === void 0) {
49348            otherStateToSet = {};
49349          }
49350  
49351          otherStateToSet = pickState(otherStateToSet);
49352  
49353          _this.internalSetState(_ref => {
49354            let {
49355              selectedItem
49356            } = _ref;
49357            return {
49358              isOpen: _this.props.defaultIsOpen,
49359              highlightedIndex: _this.props.defaultHighlightedIndex,
49360              inputValue: _this.props.itemToString(selectedItem),
49361              ...otherStateToSet
49362            };
49363          }, cb);
49364        };
49365  
49366        this.toggleMenu = function (otherStateToSet, cb) {
49367          if (otherStateToSet === void 0) {
49368            otherStateToSet = {};
49369          }
49370  
49371          otherStateToSet = pickState(otherStateToSet);
49372  
49373          _this.internalSetState(_ref2 => {
49374            let {
49375              isOpen
49376            } = _ref2;
49377            return {
49378              isOpen: !isOpen,
49379              ...(isOpen && {
49380                highlightedIndex: _this.props.defaultHighlightedIndex
49381              }),
49382              ...otherStateToSet
49383            };
49384          }, () => {
49385            const {
49386              isOpen,
49387              highlightedIndex
49388            } = _this.getState();
49389  
49390            if (isOpen) {
49391              if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
49392                _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
49393              }
49394            }
49395  
49396            cbToCb(cb)();
49397          });
49398        };
49399  
49400        this.openMenu = cb => {
49401          this.internalSetState({
49402            isOpen: true
49403          }, cb);
49404        };
49405  
49406        this.closeMenu = cb => {
49407          this.internalSetState({
49408            isOpen: false
49409          }, cb);
49410        };
49411  
49412        this.updateStatus = debounce(() => {
49413          const state = this.getState();
49414          const item = this.items[state.highlightedIndex];
49415          const resultCount = this.getItemCount();
49416          const status = this.props.getA11yStatusMessage({
49417            itemToString: this.props.itemToString,
49418            previousResultCount: this.previousResultCount,
49419            resultCount,
49420            highlightedItem: item,
49421            ...state
49422          });
49423          this.previousResultCount = resultCount;
49424          setStatus(status, this.props.environment.document);
49425        }, 200);
49426        // fancy destructuring + defaults + aliases
49427        // this basically says each value of state should either be set to
49428        // the initial value or the default value if the initial value is not provided
49429        const {
49430          defaultHighlightedIndex,
49431          initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
49432          defaultIsOpen,
49433          initialIsOpen: _isOpen = defaultIsOpen,
49434          initialInputValue: _inputValue = '',
49435          initialSelectedItem: _selectedItem = null
49436        } = this.props;
49437  
49438        const _state = this.getState({
49439          highlightedIndex: _highlightedIndex,
49440          isOpen: _isOpen,
49441          inputValue: _inputValue,
49442          selectedItem: _selectedItem
49443        });
49444  
49445        if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
49446          _state.inputValue = this.props.itemToString(_state.selectedItem);
49447        }
49448  
49449        this.state = _state;
49450      }
49451  
49452      /**
49453       * Clear all running timeouts
49454       */
49455      internalClearTimeouts() {
49456        this.timeoutIds.forEach(id => {
49457          clearTimeout(id);
49458        });
49459        this.timeoutIds = [];
49460      }
49461      /**
49462       * Gets the state based on internal state or props
49463       * If a state value is passed via props, then that
49464       * is the value given, otherwise it's retrieved from
49465       * stateToMerge
49466       *
49467       * @param {Object} stateToMerge defaults to this.state
49468       * @return {Object} the state
49469       */
49470  
49471  
49472      getState(stateToMerge) {
49473        if (stateToMerge === void 0) {
49474          stateToMerge = this.state;
49475        }
49476  
49477        return getState(stateToMerge, this.props);
49478      }
49479  
49480      getItemCount() {
49481        // things read better this way. They're in priority order:
49482        // 1. `this.itemCount`
49483        // 2. `this.props.itemCount`
49484        // 3. `this.items.length`
49485        let itemCount = this.items.length;
49486  
49487        if (this.itemCount != null) {
49488          itemCount = this.itemCount;
49489        } else if (this.props.itemCount !== undefined) {
49490          itemCount = this.props.itemCount;
49491        }
49492  
49493        return itemCount;
49494      }
49495  
49496      getItemNodeFromIndex(index) {
49497        return this.props.environment.document.getElementById(this.getItemId(index));
49498      }
49499  
49500      scrollHighlightedItemIntoView() {
49501        /* istanbul ignore else (react-native) */
49502        {
49503          const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
49504          this.props.scrollIntoView(node, this._menuNode);
49505        }
49506      }
49507  
49508      moveHighlightedIndex(amount, otherStateToSet) {
49509        const itemCount = this.getItemCount();
49510        const {
49511          highlightedIndex
49512        } = this.getState();
49513  
49514        if (itemCount > 0) {
49515          const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
49516          this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
49517        }
49518      }
49519  
49520      getStateAndHelpers() {
49521        const {
49522          highlightedIndex,
49523          inputValue,
49524          selectedItem,
49525          isOpen
49526        } = this.getState();
49527        const {
49528          itemToString
49529        } = this.props;
49530        const {
49531          id
49532        } = this;
49533        const {
49534          getRootProps,
49535          getToggleButtonProps,
49536          getLabelProps,
49537          getMenuProps,
49538          getInputProps,
49539          getItemProps,
49540          openMenu,
49541          closeMenu,
49542          toggleMenu,
49543          selectItem,
49544          selectItemAtIndex,
49545          selectHighlightedItem,
49546          setHighlightedIndex,
49547          clearSelection,
49548          clearItems,
49549          reset,
49550          setItemCount,
49551          unsetItemCount,
49552          internalSetState: setState
49553        } = this;
49554        return {
49555          // prop getters
49556          getRootProps,
49557          getToggleButtonProps,
49558          getLabelProps,
49559          getMenuProps,
49560          getInputProps,
49561          getItemProps,
49562          // actions
49563          reset,
49564          openMenu,
49565          closeMenu,
49566          toggleMenu,
49567          selectItem,
49568          selectItemAtIndex,
49569          selectHighlightedItem,
49570          setHighlightedIndex,
49571          clearSelection,
49572          clearItems,
49573          setItemCount,
49574          unsetItemCount,
49575          setState,
49576          // props
49577          itemToString,
49578          // derived
49579          id,
49580          // state
49581          highlightedIndex,
49582          inputValue,
49583          isOpen,
49584          selectedItem
49585        };
49586      } //////////////////////////// ROOT
49587  
49588  
49589      componentDidMount() {
49590        /* istanbul ignore if (react-native) */
49591        if (false) {}
49592        /* istanbul ignore if (react-native) */
49593  
49594  
49595        {
49596          // this.isMouseDown helps us track whether the mouse is currently held down.
49597          // This is useful when the user clicks on an item in the list, but holds the mouse
49598          // down long enough for the list to disappear (because the blur event fires on the input)
49599          // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
49600          // trigger hiding the menu.
49601          const onMouseDown = () => {
49602            this.isMouseDown = true;
49603          };
49604  
49605          const onMouseUp = event => {
49606            this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
49607            // then we don't want to reset downshift
49608  
49609            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
49610  
49611            if (!contextWithinDownshift && this.getState().isOpen) {
49612              this.reset({
49613                type: mouseUp
49614              }, () => this.props.onOuterClick(this.getStateAndHelpers()));
49615            }
49616          }; // Touching an element in iOS gives focus and hover states, but touching out of
49617          // the element will remove hover, and persist the focus state, resulting in the
49618          // blur event not being triggered.
49619          // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
49620          // If the user taps outside of Downshift, the component should be reset,
49621          // but not if the user is swiping
49622  
49623  
49624          const onTouchStart = () => {
49625            this.isTouchMove = false;
49626          };
49627  
49628          const onTouchMove = () => {
49629            this.isTouchMove = true;
49630          };
49631  
49632          const onTouchEnd = event => {
49633            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
49634  
49635            if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
49636              this.reset({
49637                type: touchEnd
49638              }, () => this.props.onOuterClick(this.getStateAndHelpers()));
49639            }
49640          };
49641  
49642          const {
49643            environment
49644          } = this.props;
49645          environment.addEventListener('mousedown', onMouseDown);
49646          environment.addEventListener('mouseup', onMouseUp);
49647          environment.addEventListener('touchstart', onTouchStart);
49648          environment.addEventListener('touchmove', onTouchMove);
49649          environment.addEventListener('touchend', onTouchEnd);
49650  
49651          this.cleanup = () => {
49652            this.internalClearTimeouts();
49653            this.updateStatus.cancel();
49654            environment.removeEventListener('mousedown', onMouseDown);
49655            environment.removeEventListener('mouseup', onMouseUp);
49656            environment.removeEventListener('touchstart', onTouchStart);
49657            environment.removeEventListener('touchmove', onTouchMove);
49658            environment.removeEventListener('touchend', onTouchEnd);
49659          };
49660        }
49661      }
49662  
49663      shouldScroll(prevState, prevProps) {
49664        const {
49665          highlightedIndex: currentHighlightedIndex
49666        } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
49667        const {
49668          highlightedIndex: prevHighlightedIndex
49669        } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
49670        const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
49671        const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
49672        return scrollWhenOpen || scrollWhenNavigating;
49673      }
49674  
49675      componentDidUpdate(prevProps, prevState) {
49676        if (false) {}
49677  
49678        if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
49679          this.internalSetState({
49680            type: controlledPropUpdatedSelectedItem,
49681            inputValue: this.props.itemToString(this.props.selectedItem)
49682          });
49683        }
49684  
49685        if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
49686          this.scrollHighlightedItemIntoView();
49687        }
49688        /* istanbul ignore else (react-native) */
49689  
49690  
49691        {
49692          this.updateStatus();
49693        }
49694      }
49695  
49696      componentWillUnmount() {
49697        this.cleanup(); // avoids memory leak
49698      }
49699  
49700      render() {
49701        const children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children
49702        // we clear this out each render and it will be populated again as
49703        // getItemProps is called.
49704  
49705        this.clearItems(); // we reset this so we know whether the user calls getRootProps during
49706        // this render. If they do then we don't need to do anything,
49707        // if they don't then we need to clone the element they return and
49708        // apply the props for them.
49709  
49710        this.getRootProps.called = false;
49711        this.getRootProps.refKey = undefined;
49712        this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
49713  
49714        this.getMenuProps.called = false;
49715        this.getMenuProps.refKey = undefined;
49716        this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
49717  
49718        this.getLabelProps.called = false; // and something similar for getInputProps
49719  
49720        this.getInputProps.called = false;
49721        const element = unwrapArray(children(this.getStateAndHelpers()));
49722  
49723        if (!element) {
49724          return null;
49725        }
49726  
49727        if (this.getRootProps.called || this.props.suppressRefError) {
49728          if (false) {}
49729  
49730          return element;
49731        } else if (isDOMElement(element)) {
49732          // they didn't apply the root props, but we can clone
49733          // this and apply the props ourselves
49734          return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element)));
49735        }
49736        /* istanbul ignore else */
49737  
49738  
49739        if (false) {}
49740        /* istanbul ignore next */
49741  
49742  
49743        return undefined;
49744      }
49745  
49746    }
49747  
49748    Downshift.defaultProps = {
49749      defaultHighlightedIndex: null,
49750      defaultIsOpen: false,
49751      getA11yStatusMessage: getA11yStatusMessage$1,
49752      itemToString: i => {
49753        if (i == null) {
49754          return '';
49755        }
49756  
49757        if (false) {}
49758  
49759        return String(i);
49760      },
49761      onStateChange: downshift_esm_noop,
49762      onInputValueChange: downshift_esm_noop,
49763      onUserAction: downshift_esm_noop,
49764      onChange: downshift_esm_noop,
49765      onSelect: downshift_esm_noop,
49766      onOuterClick: downshift_esm_noop,
49767      selectedItemChanged: (prevItem, item) => prevItem !== item,
49768      environment:
49769      /* istanbul ignore next (ssr) */
49770      typeof window === 'undefined' ? {} : window,
49771      stateReducer: (state, stateToSet) => stateToSet,
49772      suppressRefError: false,
49773      scrollIntoView
49774    };
49775    Downshift.stateChangeTypes = stateChangeTypes$3;
49776    return Downshift;
49777  })()));
49778  
49779   false ? 0 : void 0;
49780  var Downshift$1 = (/* unused pure expression or super */ null && (Downshift));
49781  
49782  function validateGetMenuPropsCalledCorrectly(node, _ref3) {
49783    let {
49784      refKey
49785    } = _ref3;
49786  
49787    if (!node) {
49788      // eslint-disable-next-line no-console
49789      console.error(`downshift: The ref prop "$refKey}" from getMenuProps was not applied correctly on your menu element.`);
49790    }
49791  }
49792  
49793  function validateGetRootPropsCalledCorrectly(element, _ref4) {
49794    let {
49795      refKey
49796    } = _ref4;
49797    const refKeySpecified = refKey !== 'ref';
49798    const isComposite = !isDOMElement(element);
49799  
49800    if (isComposite && !refKeySpecified && !isForwardRef(element)) {
49801      // eslint-disable-next-line no-console
49802      console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
49803    } else if (!isComposite && refKeySpecified) {
49804      // eslint-disable-next-line no-console
49805      console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "$refKey}"`);
49806    }
49807  
49808    if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
49809      // eslint-disable-next-line no-console
49810      console.error(`downshift: You must apply the ref prop "$refKey}" from getRootProps onto your root element.`);
49811    }
49812  }
49813  
49814  const dropdownDefaultStateValues = {
49815    highlightedIndex: -1,
49816    isOpen: false,
49817    selectedItem: null,
49818    inputValue: ''
49819  };
49820  
49821  function callOnChangeProps(action, state, newState) {
49822    const {
49823      props,
49824      type
49825    } = action;
49826    const changes = {};
49827    Object.keys(state).forEach(key => {
49828      invokeOnChangeHandler(key, action, state, newState);
49829  
49830      if (newState[key] !== state[key]) {
49831        changes[key] = newState[key];
49832      }
49833    });
49834  
49835    if (props.onStateChange && Object.keys(changes).length) {
49836      props.onStateChange({
49837        type,
49838        ...changes
49839      });
49840    }
49841  }
49842  
49843  function invokeOnChangeHandler(key, action, state, newState) {
49844    const {
49845      props,
49846      type
49847    } = action;
49848    const handler = `on$capitalizeString(key)}Change`;
49849  
49850    if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
49851      props[handler]({
49852        type,
49853        ...newState
49854      });
49855    }
49856  }
49857  /**
49858   * Default state reducer that returns the changes.
49859   *
49860   * @param {Object} s state.
49861   * @param {Object} a action with changes.
49862   * @returns {Object} changes.
49863   */
49864  
49865  
49866  function stateReducer(s, a) {
49867    return a.changes;
49868  }
49869  /**
49870   * Returns a message to be added to aria-live region when item is selected.
49871   *
49872   * @param {Object} selectionParameters Parameters required to build the message.
49873   * @returns {string} The a11y message.
49874   */
49875  
49876  
49877  function getA11ySelectionMessage(selectionParameters) {
49878    const {
49879      selectedItem,
49880      itemToString: itemToStringLocal
49881    } = selectionParameters;
49882    return selectedItem ? `$itemToStringLocal(selectedItem)} has been selected.` : '';
49883  }
49884  /**
49885   * Debounced call for updating the a11y message.
49886   */
49887  
49888  
49889  const updateA11yStatus = debounce((getA11yMessage, document) => {
49890    setStatus(getA11yMessage(), document);
49891  }, 200); // istanbul ignore next
49892  
49893  const downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
49894  
49895  function useElementIds(_ref) {
49896    let {
49897      id = `downshift-$generateId()}`,
49898      labelId,
49899      menuId,
49900      getItemId,
49901      toggleButtonId,
49902      inputId
49903    } = _ref;
49904    const elementIdsRef = (0,external_React_.useRef)({
49905      labelId: labelId || `$id}-label`,
49906      menuId: menuId || `$id}-menu`,
49907      getItemId: getItemId || (index => `$id}-item-$index}`),
49908      toggleButtonId: toggleButtonId || `$id}-toggle-button`,
49909      inputId: inputId || `$id}-input`
49910    });
49911    return elementIdsRef.current;
49912  }
49913  
49914  function getItemIndex(index, item, items) {
49915    if (index !== undefined) {
49916      return index;
49917    }
49918  
49919    if (items.length === 0) {
49920      return -1;
49921    }
49922  
49923    return items.indexOf(item);
49924  }
49925  
49926  function itemToString(item) {
49927    return item ? String(item) : '';
49928  }
49929  
49930  function isAcceptedCharacterKey(key) {
49931    return /^\S{1}$/.test(key);
49932  }
49933  
49934  function capitalizeString(string) {
49935    return `$string.slice(0, 1).toUpperCase()}$string.slice(1)}`;
49936  }
49937  
49938  function downshift_esm_useLatestRef(val) {
49939    const ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
49940    // the value during render (so it's not idempotent). However, the places this
49941    // hook is used is to support memoizing callbacks which will be called
49942    // *during* render, so we need the latest values *during* render.
49943    // If not for this, then we'd probably want to use useLayoutEffect instead.
49944  
49945    ref.current = val;
49946    return ref;
49947  }
49948  /**
49949   * Computes the controlled state using a the previous state, props,
49950   * two reducers, one from downshift and an optional one from the user.
49951   * Also calls the onChange handlers for state values that have changed.
49952   *
49953   * @param {Function} reducer Reducer function from downshift.
49954   * @param {Object} initialState Initial state of the hook.
49955   * @param {Object} props The hook props.
49956   * @returns {Array} An array with the state and an action dispatcher.
49957   */
49958  
49959  
49960  function useEnhancedReducer(reducer, initialState, props) {
49961    const prevStateRef = (0,external_React_.useRef)();
49962    const actionRef = (0,external_React_.useRef)();
49963    const enhancedReducer = (0,external_React_.useCallback)((state, action) => {
49964      actionRef.current = action;
49965      state = getState(state, action.props);
49966      const changes = reducer(state, action);
49967      const newState = action.props.stateReducer(state, { ...action,
49968        changes
49969      });
49970      return newState;
49971    }, [reducer]);
49972    const [state, dispatch] = (0,external_React_.useReducer)(enhancedReducer, initialState);
49973    const propsRef = downshift_esm_useLatestRef(props);
49974    const dispatchWithProps = (0,external_React_.useCallback)(action => dispatch({
49975      props: propsRef.current,
49976      ...action
49977    }), [propsRef]);
49978    const action = actionRef.current;
49979    (0,external_React_.useEffect)(() => {
49980      if (action && prevStateRef.current && prevStateRef.current !== state) {
49981        callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
49982      }
49983  
49984      prevStateRef.current = state;
49985    }, [state, props, action]);
49986    return [state, dispatchWithProps];
49987  }
49988  /**
49989   * Wraps the useEnhancedReducer and applies the controlled prop values before
49990   * returning the new state.
49991   *
49992   * @param {Function} reducer Reducer function from downshift.
49993   * @param {Object} initialState Initial state of the hook.
49994   * @param {Object} props The hook props.
49995   * @returns {Array} An array with the state and an action dispatcher.
49996   */
49997  
49998  
49999  function useControlledReducer$1(reducer, initialState, props) {
50000    const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
50001    return [getState(state, props), dispatch];
50002  }
50003  
50004  const defaultProps$3 = {
50005    itemToString,
50006    stateReducer,
50007    getA11ySelectionMessage,
50008    scrollIntoView,
50009    circularNavigation: false,
50010    environment:
50011    /* istanbul ignore next (ssr) */
50012    typeof window === 'undefined' ? {} : window
50013  };
50014  
50015  function getDefaultValue$1(props, propKey, defaultStateValues) {
50016    if (defaultStateValues === void 0) {
50017      defaultStateValues = dropdownDefaultStateValues;
50018    }
50019  
50020    const defaultValue = props[`default$capitalizeString(propKey)}`];
50021  
50022    if (defaultValue !== undefined) {
50023      return defaultValue;
50024    }
50025  
50026    return defaultStateValues[propKey];
50027  }
50028  
50029  function getInitialValue$1(props, propKey, defaultStateValues) {
50030    if (defaultStateValues === void 0) {
50031      defaultStateValues = dropdownDefaultStateValues;
50032    }
50033  
50034    const value = props[propKey];
50035  
50036    if (value !== undefined) {
50037      return value;
50038    }
50039  
50040    const initialValue = props[`initial$capitalizeString(propKey)}`];
50041  
50042    if (initialValue !== undefined) {
50043      return initialValue;
50044    }
50045  
50046    return getDefaultValue$1(props, propKey, defaultStateValues);
50047  }
50048  
50049  function getInitialState$2(props) {
50050    const selectedItem = getInitialValue$1(props, 'selectedItem');
50051    const isOpen = getInitialValue$1(props, 'isOpen');
50052    const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
50053    const inputValue = getInitialValue$1(props, 'inputValue');
50054    return {
50055      highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
50056      isOpen,
50057      selectedItem,
50058      inputValue
50059    };
50060  }
50061  
50062  function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
50063    const {
50064      items,
50065      initialHighlightedIndex,
50066      defaultHighlightedIndex
50067    } = props;
50068    const {
50069      selectedItem,
50070      highlightedIndex
50071    } = state;
50072  
50073    if (items.length === 0) {
50074      return -1;
50075    } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
50076  
50077  
50078    if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
50079      return initialHighlightedIndex;
50080    }
50081  
50082    if (defaultHighlightedIndex !== undefined) {
50083      return defaultHighlightedIndex;
50084    }
50085  
50086    if (selectedItem) {
50087      if (offset === 0) {
50088        return items.indexOf(selectedItem);
50089      }
50090  
50091      return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
50092    }
50093  
50094    if (offset === 0) {
50095      return -1;
50096    }
50097  
50098    return offset < 0 ? items.length - 1 : 0;
50099  }
50100  /**
50101   * Reuse the movement tracking of mouse and touch events.
50102   *
50103   * @param {boolean} isOpen Whether the dropdown is open or not.
50104   * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
50105   * @param {Object} environment Environment where component/hook exists.
50106   * @param {Function} handleBlur Handler on blur from mouse or touch.
50107   * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
50108   */
50109  
50110  
50111  function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
50112    const mouseAndTouchTrackersRef = (0,external_React_.useRef)({
50113      isMouseDown: false,
50114      isTouchMove: false
50115    });
50116    (0,external_React_.useEffect)(() => {
50117      // The same strategy for checking if a click occurred inside or outside downsift
50118      // as in downshift.js.
50119      const onMouseDown = () => {
50120        mouseAndTouchTrackersRef.current.isMouseDown = true;
50121      };
50122  
50123      const onMouseUp = event => {
50124        mouseAndTouchTrackersRef.current.isMouseDown = false;
50125  
50126        if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
50127          handleBlur();
50128        }
50129      };
50130  
50131      const onTouchStart = () => {
50132        mouseAndTouchTrackersRef.current.isTouchMove = false;
50133      };
50134  
50135      const onTouchMove = () => {
50136        mouseAndTouchTrackersRef.current.isTouchMove = true;
50137      };
50138  
50139      const onTouchEnd = event => {
50140        if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
50141          handleBlur();
50142        }
50143      };
50144  
50145      environment.addEventListener('mousedown', onMouseDown);
50146      environment.addEventListener('mouseup', onMouseUp);
50147      environment.addEventListener('touchstart', onTouchStart);
50148      environment.addEventListener('touchmove', onTouchMove);
50149      environment.addEventListener('touchend', onTouchEnd);
50150      return function cleanup() {
50151        environment.removeEventListener('mousedown', onMouseDown);
50152        environment.removeEventListener('mouseup', onMouseUp);
50153        environment.removeEventListener('touchstart', onTouchStart);
50154        environment.removeEventListener('touchmove', onTouchMove);
50155        environment.removeEventListener('touchend', onTouchEnd);
50156      }; // eslint-disable-next-line react-hooks/exhaustive-deps
50157    }, [isOpen, environment]);
50158    return mouseAndTouchTrackersRef;
50159  }
50160  /* istanbul ignore next */
50161  // eslint-disable-next-line import/no-mutable-exports
50162  
50163  
50164  let useGetterPropsCalledChecker = () => downshift_esm_noop;
50165  /**
50166   * Custom hook that checks if getter props are called correctly.
50167   *
50168   * @param  {...any} propKeys Getter prop names to be handled.
50169   * @returns {Function} Setter function called inside getter props to set call information.
50170   */
50171  
50172  /* istanbul ignore next */
50173  
50174  
50175  if (false) {}
50176  
50177  function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
50178    let {
50179      isInitialMount,
50180      highlightedIndex,
50181      items,
50182      environment,
50183      ...rest
50184    } = _ref2;
50185    // Sets a11y status message on changes in state.
50186    (0,external_React_.useEffect)(() => {
50187      if (isInitialMount || false) {
50188        return;
50189      }
50190  
50191      updateA11yStatus(() => getA11yMessage({
50192        highlightedIndex,
50193        highlightedItem: items[highlightedIndex],
50194        resultCount: items.length,
50195        ...rest
50196      }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
50197    }, dependencyArray);
50198  }
50199  
50200  function useScrollIntoView(_ref3) {
50201    let {
50202      highlightedIndex,
50203      isOpen,
50204      itemRefs,
50205      getItemNodeFromIndex,
50206      menuElement,
50207      scrollIntoView: scrollIntoViewProp
50208    } = _ref3;
50209    // used not to scroll on highlight by mouse.
50210    const shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard.
50211  
50212    downshift_esm_useIsomorphicLayoutEffect(() => {
50213      if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
50214        return;
50215      }
50216  
50217      if (shouldScrollRef.current === false) {
50218        shouldScrollRef.current = true;
50219      } else {
50220        scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
50221      } // eslint-disable-next-line react-hooks/exhaustive-deps
50222  
50223    }, [highlightedIndex]);
50224    return shouldScrollRef;
50225  } // eslint-disable-next-line import/no-mutable-exports
50226  
50227  
50228  let useControlPropsValidator = downshift_esm_noop;
50229  /* istanbul ignore next */
50230  
50231  if (false) {}
50232  
50233  /* eslint-disable complexity */
50234  
50235  function downshiftCommonReducer(state, action, stateChangeTypes) {
50236    const {
50237      type,
50238      props
50239    } = action;
50240    let changes;
50241  
50242    switch (type) {
50243      case stateChangeTypes.ItemMouseMove:
50244        changes = {
50245          highlightedIndex: action.disabled ? -1 : action.index
50246        };
50247        break;
50248  
50249      case stateChangeTypes.MenuMouseLeave:
50250        changes = {
50251          highlightedIndex: -1
50252        };
50253        break;
50254  
50255      case stateChangeTypes.ToggleButtonClick:
50256      case stateChangeTypes.FunctionToggleMenu:
50257        changes = {
50258          isOpen: !state.isOpen,
50259          highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
50260        };
50261        break;
50262  
50263      case stateChangeTypes.FunctionOpenMenu:
50264        changes = {
50265          isOpen: true,
50266          highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
50267        };
50268        break;
50269  
50270      case stateChangeTypes.FunctionCloseMenu:
50271        changes = {
50272          isOpen: false
50273        };
50274        break;
50275  
50276      case stateChangeTypes.FunctionSetHighlightedIndex:
50277        changes = {
50278          highlightedIndex: action.highlightedIndex
50279        };
50280        break;
50281  
50282      case stateChangeTypes.FunctionSetInputValue:
50283        changes = {
50284          inputValue: action.inputValue
50285        };
50286        break;
50287  
50288      case stateChangeTypes.FunctionReset:
50289        changes = {
50290          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
50291          isOpen: getDefaultValue$1(props, 'isOpen'),
50292          selectedItem: getDefaultValue$1(props, 'selectedItem'),
50293          inputValue: getDefaultValue$1(props, 'inputValue')
50294        };
50295        break;
50296  
50297      default:
50298        throw new Error('Reducer called without proper action type.');
50299    }
50300  
50301    return { ...state,
50302      ...changes
50303    };
50304  }
50305  /* eslint-enable complexity */
50306  
50307  function getItemIndexByCharacterKey(_a) {
50308      var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
50309      var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
50310      for (var index = 0; index < items.length; index++) {
50311          var offsetIndex = (index + highlightedIndex + 1) % items.length;
50312          var item = items[offsetIndex];
50313          if (item !== undefined &&
50314              itemToString(item)
50315                  .toLowerCase()
50316                  .startsWith(lowerCasedKeysSoFar)) {
50317              var element = getItemNodeFromIndex(offsetIndex);
50318              if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
50319                  return offsetIndex;
50320              }
50321          }
50322      }
50323      return highlightedIndex;
50324  }
50325  var propTypes$2 = {
50326      items: (prop_types_default()).array.isRequired,
50327      itemToString: (prop_types_default()).func,
50328      getA11yStatusMessage: (prop_types_default()).func,
50329      getA11ySelectionMessage: (prop_types_default()).func,
50330      circularNavigation: (prop_types_default()).bool,
50331      highlightedIndex: (prop_types_default()).number,
50332      defaultHighlightedIndex: (prop_types_default()).number,
50333      initialHighlightedIndex: (prop_types_default()).number,
50334      isOpen: (prop_types_default()).bool,
50335      defaultIsOpen: (prop_types_default()).bool,
50336      initialIsOpen: (prop_types_default()).bool,
50337      selectedItem: (prop_types_default()).any,
50338      initialSelectedItem: (prop_types_default()).any,
50339      defaultSelectedItem: (prop_types_default()).any,
50340      id: (prop_types_default()).string,
50341      labelId: (prop_types_default()).string,
50342      menuId: (prop_types_default()).string,
50343      getItemId: (prop_types_default()).func,
50344      toggleButtonId: (prop_types_default()).string,
50345      stateReducer: (prop_types_default()).func,
50346      onSelectedItemChange: (prop_types_default()).func,
50347      onHighlightedIndexChange: (prop_types_default()).func,
50348      onStateChange: (prop_types_default()).func,
50349      onIsOpenChange: (prop_types_default()).func,
50350      environment: prop_types_default().shape({
50351          addEventListener: (prop_types_default()).func,
50352          removeEventListener: (prop_types_default()).func,
50353          document: prop_types_default().shape({
50354              getElementById: (prop_types_default()).func,
50355              activeElement: (prop_types_default()).any,
50356              body: (prop_types_default()).any
50357          })
50358      })
50359  };
50360  /**
50361   * Default implementation for status message. Only added when menu is open.
50362   * Will specift if there are results in the list, and if so, how many,
50363   * and what keys are relevant.
50364   *
50365   * @param {Object} param the downshift state and other relevant properties
50366   * @return {String} the a11y status message
50367   */
50368  function getA11yStatusMessage(_a) {
50369      var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
50370      if (!isOpen) {
50371          return '';
50372      }
50373      if (!resultCount) {
50374          return 'No results are available.';
50375      }
50376      if (resultCount !== previousResultCount) {
50377          return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
50378      }
50379      return '';
50380  }
50381  var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
50382  // eslint-disable-next-line import/no-mutable-exports
50383  var validatePropTypes$2 = downshift_esm_noop;
50384  /* istanbul ignore next */
50385  if (false) {}
50386  
50387  const MenuKeyDownArrowDown =  false ? 0 : 0;
50388  const MenuKeyDownArrowUp =  false ? 0 : 1;
50389  const MenuKeyDownEscape =  false ? 0 : 2;
50390  const MenuKeyDownHome =  false ? 0 : 3;
50391  const MenuKeyDownEnd =  false ? 0 : 4;
50392  const MenuKeyDownEnter =  false ? 0 : 5;
50393  const MenuKeyDownSpaceButton =  false ? 0 : 6;
50394  const MenuKeyDownCharacter =  false ? 0 : 7;
50395  const MenuBlur =  false ? 0 : 8;
50396  const MenuMouseLeave$1 =  false ? 0 : 9;
50397  const ItemMouseMove$1 =  false ? 0 : 10;
50398  const ItemClick$1 =  false ? 0 : 11;
50399  const ToggleButtonClick$1 =  false ? 0 : 12;
50400  const ToggleButtonKeyDownArrowDown =  false ? 0 : 13;
50401  const ToggleButtonKeyDownArrowUp =  false ? 0 : 14;
50402  const ToggleButtonKeyDownCharacter =  false ? 0 : 15;
50403  const FunctionToggleMenu$1 =  false ? 0 : 16;
50404  const FunctionOpenMenu$1 =  false ? 0 : 17;
50405  const FunctionCloseMenu$1 =  false ? 0 : 18;
50406  const FunctionSetHighlightedIndex$1 =  false ? 0 : 19;
50407  const FunctionSelectItem$1 =  false ? 0 : 20;
50408  const FunctionSetInputValue$1 =  false ? 0 : 21;
50409  const FunctionReset$2 =  false ? 0 : 22;
50410  
50411  var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
50412    __proto__: null,
50413    MenuKeyDownArrowDown: MenuKeyDownArrowDown,
50414    MenuKeyDownArrowUp: MenuKeyDownArrowUp,
50415    MenuKeyDownEscape: MenuKeyDownEscape,
50416    MenuKeyDownHome: MenuKeyDownHome,
50417    MenuKeyDownEnd: MenuKeyDownEnd,
50418    MenuKeyDownEnter: MenuKeyDownEnter,
50419    MenuKeyDownSpaceButton: MenuKeyDownSpaceButton,
50420    MenuKeyDownCharacter: MenuKeyDownCharacter,
50421    MenuBlur: MenuBlur,
50422    MenuMouseLeave: MenuMouseLeave$1,
50423    ItemMouseMove: ItemMouseMove$1,
50424    ItemClick: ItemClick$1,
50425    ToggleButtonClick: ToggleButtonClick$1,
50426    ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
50427    ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
50428    ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
50429    FunctionToggleMenu: FunctionToggleMenu$1,
50430    FunctionOpenMenu: FunctionOpenMenu$1,
50431    FunctionCloseMenu: FunctionCloseMenu$1,
50432    FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
50433    FunctionSelectItem: FunctionSelectItem$1,
50434    FunctionSetInputValue: FunctionSetInputValue$1,
50435    FunctionReset: FunctionReset$2
50436  });
50437  
50438  /* eslint-disable complexity */
50439  
50440  function downshiftSelectReducer(state, action) {
50441    const {
50442      type,
50443      props,
50444      shiftKey
50445    } = action;
50446    let changes;
50447  
50448    switch (type) {
50449      case ItemClick$1:
50450        changes = {
50451          isOpen: getDefaultValue$1(props, 'isOpen'),
50452          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
50453          selectedItem: props.items[action.index]
50454        };
50455        break;
50456  
50457      case ToggleButtonKeyDownCharacter:
50458        {
50459          const lowercasedKey = action.key;
50460          const inputValue = `$state.inputValue}$lowercasedKey}`;
50461          const itemIndex = getItemIndexByCharacterKey({
50462            keysSoFar: inputValue,
50463            highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
50464            items: props.items,
50465            itemToString: props.itemToString,
50466            getItemNodeFromIndex: action.getItemNodeFromIndex
50467          });
50468          changes = {
50469            inputValue,
50470            ...(itemIndex >= 0 && {
50471              selectedItem: props.items[itemIndex]
50472            })
50473          };
50474        }
50475        break;
50476  
50477      case ToggleButtonKeyDownArrowDown:
50478        changes = {
50479          highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
50480          isOpen: true
50481        };
50482        break;
50483  
50484      case ToggleButtonKeyDownArrowUp:
50485        changes = {
50486          highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
50487          isOpen: true
50488        };
50489        break;
50490  
50491      case MenuKeyDownEnter:
50492      case MenuKeyDownSpaceButton:
50493        changes = {
50494          isOpen: getDefaultValue$1(props, 'isOpen'),
50495          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
50496          ...(state.highlightedIndex >= 0 && {
50497            selectedItem: props.items[state.highlightedIndex]
50498          })
50499        };
50500        break;
50501  
50502      case MenuKeyDownHome:
50503        changes = {
50504          highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
50505        };
50506        break;
50507  
50508      case MenuKeyDownEnd:
50509        changes = {
50510          highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
50511        };
50512        break;
50513  
50514      case MenuKeyDownEscape:
50515        changes = {
50516          isOpen: false,
50517          highlightedIndex: -1
50518        };
50519        break;
50520  
50521      case MenuBlur:
50522        changes = {
50523          isOpen: false,
50524          highlightedIndex: -1
50525        };
50526        break;
50527  
50528      case MenuKeyDownCharacter:
50529        {
50530          const lowercasedKey = action.key;
50531          const inputValue = `$state.inputValue}$lowercasedKey}`;
50532          const highlightedIndex = getItemIndexByCharacterKey({
50533            keysSoFar: inputValue,
50534            highlightedIndex: state.highlightedIndex,
50535            items: props.items,
50536            itemToString: props.itemToString,
50537            getItemNodeFromIndex: action.getItemNodeFromIndex
50538          });
50539          changes = {
50540            inputValue,
50541            ...(highlightedIndex >= 0 && {
50542              highlightedIndex
50543            })
50544          };
50545        }
50546        break;
50547  
50548      case MenuKeyDownArrowDown:
50549        changes = {
50550          highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
50551        };
50552        break;
50553  
50554      case MenuKeyDownArrowUp:
50555        changes = {
50556          highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
50557        };
50558        break;
50559  
50560      case FunctionSelectItem$1:
50561        changes = {
50562          selectedItem: action.selectedItem
50563        };
50564        break;
50565  
50566      default:
50567        return downshiftCommonReducer(state, action, stateChangeTypes$2);
50568    }
50569  
50570    return { ...state,
50571      ...changes
50572    };
50573  }
50574  /* eslint-enable complexity */
50575  
50576  /* eslint-disable max-statements */
50577  useSelect.stateChangeTypes = stateChangeTypes$2;
50578  
50579  function useSelect(userProps) {
50580    if (userProps === void 0) {
50581      userProps = {};
50582    }
50583  
50584    validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
50585  
50586    const props = { ...defaultProps$2,
50587      ...userProps
50588    };
50589    const {
50590      items,
50591      scrollIntoView,
50592      environment,
50593      initialIsOpen,
50594      defaultIsOpen,
50595      itemToString,
50596      getA11ySelectionMessage,
50597      getA11yStatusMessage
50598    } = props; // Initial state depending on controlled props.
50599  
50600    const initialState = getInitialState$2(props);
50601    const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
50602    const {
50603      isOpen,
50604      highlightedIndex,
50605      selectedItem,
50606      inputValue
50607    } = state; // Element efs.
50608  
50609    const toggleButtonRef = (0,external_React_.useRef)(null);
50610    const menuRef = (0,external_React_.useRef)(null);
50611    const itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios.
50612  
50613    const shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders.
50614  
50615    const clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders.
50616  
50617    const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
50618  
50619    const previousResultCountRef = (0,external_React_.useRef)();
50620    const isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element.
50621  
50622    const latest = downshift_esm_useLatestRef({
50623      state,
50624      props
50625    }); // Some utils.
50626  
50627    const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
50628    // Sets a11y status message on changes in state.
50629  
50630    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
50631      isInitialMount: isInitialMountRef.current,
50632      previousResultCount: previousResultCountRef.current,
50633      items,
50634      environment,
50635      itemToString,
50636      ...state
50637    }); // Sets a11y status message on changes in selectedItem.
50638  
50639    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
50640      isInitialMount: isInitialMountRef.current,
50641      previousResultCount: previousResultCountRef.current,
50642      items,
50643      environment,
50644      itemToString,
50645      ...state
50646    }); // Scroll on highlighted item if change comes from keyboard.
50647  
50648    const shouldScrollRef = useScrollIntoView({
50649      menuElement: menuRef.current,
50650      highlightedIndex,
50651      isOpen,
50652      itemRefs,
50653      scrollIntoView,
50654      getItemNodeFromIndex
50655    }); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
50656  
50657    (0,external_React_.useEffect)(() => {
50658      // init the clean function here as we need access to dispatch.
50659      clearTimeoutRef.current = debounce(outerDispatch => {
50660        outerDispatch({
50661          type: FunctionSetInputValue$1,
50662          inputValue: ''
50663        });
50664      }, 500); // Cancel any pending debounced calls on mount
50665  
50666      return () => {
50667        clearTimeoutRef.current.cancel();
50668      };
50669    }, []); // Invokes the keysSoFar callback set up above.
50670  
50671    (0,external_React_.useEffect)(() => {
50672      if (!inputValue) {
50673        return;
50674      }
50675  
50676      clearTimeoutRef.current(dispatch);
50677    }, [dispatch, inputValue]);
50678    useControlPropsValidator({
50679      isInitialMount: isInitialMountRef.current,
50680      props,
50681      state
50682    });
50683    /* Controls the focus on the menu or the toggle button. */
50684  
50685    (0,external_React_.useEffect)(() => {
50686      // Don't focus menu on first render.
50687      if (isInitialMountRef.current) {
50688        // Unless it was initialised as open.
50689        if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
50690          menuRef.current.focus();
50691        }
50692  
50693        return;
50694      } // Focus menu on open.
50695  
50696  
50697      if (isOpen) {
50698        // istanbul ignore else
50699        if (menuRef.current) {
50700          menuRef.current.focus();
50701        }
50702  
50703        return;
50704      } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
50705  
50706  
50707      if (environment.document.activeElement === menuRef.current) {
50708        // istanbul ignore else
50709        if (toggleButtonRef.current) {
50710          shouldBlurRef.current = false;
50711          toggleButtonRef.current.focus();
50712        }
50713      } // eslint-disable-next-line react-hooks/exhaustive-deps
50714  
50715    }, [isOpen]);
50716    (0,external_React_.useEffect)(() => {
50717      if (isInitialMountRef.current) {
50718        return;
50719      }
50720  
50721      previousResultCountRef.current = items.length;
50722    }); // Add mouse/touch events to document.
50723  
50724    const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
50725      dispatch({
50726        type: MenuBlur
50727      });
50728    });
50729    const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
50730  
50731    (0,external_React_.useEffect)(() => {
50732      isInitialMountRef.current = false;
50733    }, []); // Reset itemRefs on close.
50734  
50735    (0,external_React_.useEffect)(() => {
50736      if (!isOpen) {
50737        itemRefs.current = {};
50738      }
50739    }, [isOpen]); // Event handler functions.
50740  
50741    const toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(() => ({
50742      ArrowDown(event) {
50743        event.preventDefault();
50744        dispatch({
50745          type: ToggleButtonKeyDownArrowDown,
50746          getItemNodeFromIndex,
50747          shiftKey: event.shiftKey
50748        });
50749      },
50750  
50751      ArrowUp(event) {
50752        event.preventDefault();
50753        dispatch({
50754          type: ToggleButtonKeyDownArrowUp,
50755          getItemNodeFromIndex,
50756          shiftKey: event.shiftKey
50757        });
50758      }
50759  
50760    }), [dispatch, getItemNodeFromIndex]);
50761    const menuKeyDownHandlers = (0,external_React_.useMemo)(() => ({
50762      ArrowDown(event) {
50763        event.preventDefault();
50764        dispatch({
50765          type: MenuKeyDownArrowDown,
50766          getItemNodeFromIndex,
50767          shiftKey: event.shiftKey
50768        });
50769      },
50770  
50771      ArrowUp(event) {
50772        event.preventDefault();
50773        dispatch({
50774          type: MenuKeyDownArrowUp,
50775          getItemNodeFromIndex,
50776          shiftKey: event.shiftKey
50777        });
50778      },
50779  
50780      Home(event) {
50781        event.preventDefault();
50782        dispatch({
50783          type: MenuKeyDownHome,
50784          getItemNodeFromIndex
50785        });
50786      },
50787  
50788      End(event) {
50789        event.preventDefault();
50790        dispatch({
50791          type: MenuKeyDownEnd,
50792          getItemNodeFromIndex
50793        });
50794      },
50795  
50796      Escape() {
50797        dispatch({
50798          type: MenuKeyDownEscape
50799        });
50800      },
50801  
50802      Enter(event) {
50803        event.preventDefault();
50804        dispatch({
50805          type: MenuKeyDownEnter
50806        });
50807      },
50808  
50809      ' '(event) {
50810        event.preventDefault();
50811        dispatch({
50812          type: MenuKeyDownSpaceButton
50813        });
50814      }
50815  
50816    }), [dispatch, getItemNodeFromIndex]); // Action functions.
50817  
50818    const toggleMenu = (0,external_React_.useCallback)(() => {
50819      dispatch({
50820        type: FunctionToggleMenu$1
50821      });
50822    }, [dispatch]);
50823    const closeMenu = (0,external_React_.useCallback)(() => {
50824      dispatch({
50825        type: FunctionCloseMenu$1
50826      });
50827    }, [dispatch]);
50828    const openMenu = (0,external_React_.useCallback)(() => {
50829      dispatch({
50830        type: FunctionOpenMenu$1
50831      });
50832    }, [dispatch]);
50833    const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
50834      dispatch({
50835        type: FunctionSetHighlightedIndex$1,
50836        highlightedIndex: newHighlightedIndex
50837      });
50838    }, [dispatch]);
50839    const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
50840      dispatch({
50841        type: FunctionSelectItem$1,
50842        selectedItem: newSelectedItem
50843      });
50844    }, [dispatch]);
50845    const reset = (0,external_React_.useCallback)(() => {
50846      dispatch({
50847        type: FunctionReset$2
50848      });
50849    }, [dispatch]);
50850    const setInputValue = (0,external_React_.useCallback)(newInputValue => {
50851      dispatch({
50852        type: FunctionSetInputValue$1,
50853        inputValue: newInputValue
50854      });
50855    }, [dispatch]); // Getter functions.
50856  
50857    const getLabelProps = (0,external_React_.useCallback)(labelProps => ({
50858      id: elementIds.labelId,
50859      htmlFor: elementIds.toggleButtonId,
50860      ...labelProps
50861    }), [elementIds]);
50862    const getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
50863      let {
50864        onMouseLeave,
50865        refKey = 'ref',
50866        onKeyDown,
50867        onBlur,
50868        ref,
50869        ...rest
50870      } = _temp === void 0 ? {} : _temp;
50871      let {
50872        suppressRefError = false
50873      } = _temp2 === void 0 ? {} : _temp2;
50874      const latestState = latest.current.state;
50875  
50876      const menuHandleKeyDown = event => {
50877        const key = normalizeArrowKey(event);
50878  
50879        if (key && menuKeyDownHandlers[key]) {
50880          menuKeyDownHandlers[key](event);
50881        } else if (isAcceptedCharacterKey(key)) {
50882          dispatch({
50883            type: MenuKeyDownCharacter,
50884            key,
50885            getItemNodeFromIndex
50886          });
50887        }
50888      };
50889  
50890      const menuHandleBlur = () => {
50891        // if the blur was a result of selection, we don't trigger this action.
50892        if (shouldBlurRef.current === false) {
50893          shouldBlurRef.current = true;
50894          return;
50895        }
50896  
50897        const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
50898        /* istanbul ignore else */
50899  
50900        if (shouldBlur) {
50901          dispatch({
50902            type: MenuBlur
50903          });
50904        }
50905      };
50906  
50907      const menuHandleMouseLeave = () => {
50908        dispatch({
50909          type: MenuMouseLeave$1
50910        });
50911      };
50912  
50913      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
50914      return {
50915        [refKey]: handleRefs(ref, menuNode => {
50916          menuRef.current = menuNode;
50917        }),
50918        id: elementIds.menuId,
50919        role: 'listbox',
50920        'aria-labelledby': elementIds.labelId,
50921        tabIndex: -1,
50922        ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
50923          'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
50924        }),
50925        onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
50926        onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
50927        onBlur: callAllEventHandlers(onBlur, menuHandleBlur),
50928        ...rest
50929      };
50930    }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
50931    const getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) {
50932      let {
50933        onClick,
50934        onKeyDown,
50935        refKey = 'ref',
50936        ref,
50937        ...rest
50938      } = _temp3 === void 0 ? {} : _temp3;
50939      let {
50940        suppressRefError = false
50941      } = _temp4 === void 0 ? {} : _temp4;
50942  
50943      const toggleButtonHandleClick = () => {
50944        dispatch({
50945          type: ToggleButtonClick$1
50946        });
50947      };
50948  
50949      const toggleButtonHandleKeyDown = event => {
50950        const key = normalizeArrowKey(event);
50951  
50952        if (key && toggleButtonKeyDownHandlers[key]) {
50953          toggleButtonKeyDownHandlers[key](event);
50954        } else if (isAcceptedCharacterKey(key)) {
50955          dispatch({
50956            type: ToggleButtonKeyDownCharacter,
50957            key,
50958            getItemNodeFromIndex
50959          });
50960        }
50961      };
50962  
50963      const toggleProps = {
50964        [refKey]: handleRefs(ref, toggleButtonNode => {
50965          toggleButtonRef.current = toggleButtonNode;
50966        }),
50967        id: elementIds.toggleButtonId,
50968        'aria-haspopup': 'listbox',
50969        'aria-expanded': latest.current.state.isOpen,
50970        'aria-labelledby': `$elementIds.labelId} $elementIds.toggleButtonId}`,
50971        ...rest
50972      };
50973  
50974      if (!rest.disabled) {
50975        toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
50976        toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
50977      }
50978  
50979      setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
50980      return toggleProps;
50981    }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
50982    const getItemProps = (0,external_React_.useCallback)(function (_temp5) {
50983      let {
50984        item,
50985        index,
50986        onMouseMove,
50987        onClick,
50988        refKey = 'ref',
50989        ref,
50990        disabled,
50991        ...rest
50992      } = _temp5 === void 0 ? {} : _temp5;
50993      const {
50994        state: latestState,
50995        props: latestProps
50996      } = latest.current;
50997  
50998      const itemHandleMouseMove = () => {
50999        if (index === latestState.highlightedIndex) {
51000          return;
51001        }
51002  
51003        shouldScrollRef.current = false;
51004        dispatch({
51005          type: ItemMouseMove$1,
51006          index,
51007          disabled
51008        });
51009      };
51010  
51011      const itemHandleClick = () => {
51012        dispatch({
51013          type: ItemClick$1,
51014          index
51015        });
51016      };
51017  
51018      const itemIndex = getItemIndex(index, item, latestProps.items);
51019  
51020      if (itemIndex < 0) {
51021        throw new Error('Pass either item or item index in getItemProps!');
51022      }
51023  
51024      const itemProps = {
51025        disabled,
51026        role: 'option',
51027        'aria-selected': `$itemIndex === latestState.highlightedIndex}`,
51028        id: elementIds.getItemId(itemIndex),
51029        [refKey]: handleRefs(ref, itemNode => {
51030          if (itemNode) {
51031            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
51032          }
51033        }),
51034        ...rest
51035      };
51036  
51037      if (!disabled) {
51038        itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
51039      }
51040  
51041      itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
51042      return itemProps;
51043    }, [dispatch, latest, shouldScrollRef, elementIds]);
51044    return {
51045      // prop getters.
51046      getToggleButtonProps,
51047      getLabelProps,
51048      getMenuProps,
51049      getItemProps,
51050      // actions.
51051      toggleMenu,
51052      openMenu,
51053      closeMenu,
51054      setHighlightedIndex,
51055      selectItem,
51056      reset,
51057      setInputValue,
51058      // state.
51059      highlightedIndex,
51060      isOpen,
51061      selectedItem,
51062      inputValue
51063    };
51064  }
51065  
51066  const InputKeyDownArrowDown =  false ? 0 : 0;
51067  const InputKeyDownArrowUp =  false ? 0 : 1;
51068  const InputKeyDownEscape =  false ? 0 : 2;
51069  const InputKeyDownHome =  false ? 0 : 3;
51070  const InputKeyDownEnd =  false ? 0 : 4;
51071  const InputKeyDownEnter =  false ? 0 : 5;
51072  const InputChange =  false ? 0 : 6;
51073  const InputBlur =  false ? 0 : 7;
51074  const MenuMouseLeave =  false ? 0 : 8;
51075  const ItemMouseMove =  false ? 0 : 9;
51076  const ItemClick =  false ? 0 : 10;
51077  const ToggleButtonClick =  false ? 0 : 11;
51078  const FunctionToggleMenu =  false ? 0 : 12;
51079  const FunctionOpenMenu =  false ? 0 : 13;
51080  const FunctionCloseMenu =  false ? 0 : 14;
51081  const FunctionSetHighlightedIndex =  false ? 0 : 15;
51082  const FunctionSelectItem =  false ? 0 : 16;
51083  const FunctionSetInputValue =  false ? 0 : 17;
51084  const FunctionReset$1 =  false ? 0 : 18;
51085  const ControlledPropUpdatedSelectedItem =  false ? 0 : 19;
51086  
51087  var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
51088    __proto__: null,
51089    InputKeyDownArrowDown: InputKeyDownArrowDown,
51090    InputKeyDownArrowUp: InputKeyDownArrowUp,
51091    InputKeyDownEscape: InputKeyDownEscape,
51092    InputKeyDownHome: InputKeyDownHome,
51093    InputKeyDownEnd: InputKeyDownEnd,
51094    InputKeyDownEnter: InputKeyDownEnter,
51095    InputChange: InputChange,
51096    InputBlur: InputBlur,
51097    MenuMouseLeave: MenuMouseLeave,
51098    ItemMouseMove: ItemMouseMove,
51099    ItemClick: ItemClick,
51100    ToggleButtonClick: ToggleButtonClick,
51101    FunctionToggleMenu: FunctionToggleMenu,
51102    FunctionOpenMenu: FunctionOpenMenu,
51103    FunctionCloseMenu: FunctionCloseMenu,
51104    FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
51105    FunctionSelectItem: FunctionSelectItem,
51106    FunctionSetInputValue: FunctionSetInputValue,
51107    FunctionReset: FunctionReset$1,
51108    ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
51109  });
51110  
51111  function getInitialState$1(props) {
51112    const initialState = getInitialState$2(props);
51113    const {
51114      selectedItem
51115    } = initialState;
51116    let {
51117      inputValue
51118    } = initialState;
51119  
51120    if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
51121      inputValue = props.itemToString(selectedItem);
51122    }
51123  
51124    return { ...initialState,
51125      inputValue
51126    };
51127  }
51128  
51129  const propTypes$1 = {
51130    items: (prop_types_default()).array.isRequired,
51131    itemToString: (prop_types_default()).func,
51132    getA11yStatusMessage: (prop_types_default()).func,
51133    getA11ySelectionMessage: (prop_types_default()).func,
51134    circularNavigation: (prop_types_default()).bool,
51135    highlightedIndex: (prop_types_default()).number,
51136    defaultHighlightedIndex: (prop_types_default()).number,
51137    initialHighlightedIndex: (prop_types_default()).number,
51138    isOpen: (prop_types_default()).bool,
51139    defaultIsOpen: (prop_types_default()).bool,
51140    initialIsOpen: (prop_types_default()).bool,
51141    selectedItem: (prop_types_default()).any,
51142    initialSelectedItem: (prop_types_default()).any,
51143    defaultSelectedItem: (prop_types_default()).any,
51144    inputValue: (prop_types_default()).string,
51145    defaultInputValue: (prop_types_default()).string,
51146    initialInputValue: (prop_types_default()).string,
51147    id: (prop_types_default()).string,
51148    labelId: (prop_types_default()).string,
51149    menuId: (prop_types_default()).string,
51150    getItemId: (prop_types_default()).func,
51151    inputId: (prop_types_default()).string,
51152    toggleButtonId: (prop_types_default()).string,
51153    stateReducer: (prop_types_default()).func,
51154    onSelectedItemChange: (prop_types_default()).func,
51155    onHighlightedIndexChange: (prop_types_default()).func,
51156    onStateChange: (prop_types_default()).func,
51157    onIsOpenChange: (prop_types_default()).func,
51158    onInputValueChange: (prop_types_default()).func,
51159    environment: prop_types_default().shape({
51160      addEventListener: (prop_types_default()).func,
51161      removeEventListener: (prop_types_default()).func,
51162      document: prop_types_default().shape({
51163        getElementById: (prop_types_default()).func,
51164        activeElement: (prop_types_default()).any,
51165        body: (prop_types_default()).any
51166      })
51167    })
51168  };
51169  /**
51170   * The useCombobox version of useControlledReducer, which also
51171   * checks if the controlled prop selectedItem changed between
51172   * renders. If so, it will also update inputValue with its
51173   * string equivalent. It uses the common useEnhancedReducer to
51174   * compute the rest of the state.
51175   *
51176   * @param {Function} reducer Reducer function from downshift.
51177   * @param {Object} initialState Initial state of the hook.
51178   * @param {Object} props The hook props.
51179   * @returns {Array} An array with the state and an action dispatcher.
51180   */
51181  
51182  function useControlledReducer(reducer, initialState, props) {
51183    const previousSelectedItemRef = (0,external_React_.useRef)();
51184    const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
51185  
51186    (0,external_React_.useEffect)(() => {
51187      if (isControlledProp(props, 'selectedItem')) {
51188        if (previousSelectedItemRef.current !== props.selectedItem) {
51189          dispatch({
51190            type: ControlledPropUpdatedSelectedItem,
51191            inputValue: props.itemToString(props.selectedItem)
51192          });
51193        }
51194  
51195        previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
51196      }
51197    });
51198    return [getState(state, props), dispatch];
51199  } // eslint-disable-next-line import/no-mutable-exports
51200  
51201  
51202  let validatePropTypes$1 = downshift_esm_noop;
51203  /* istanbul ignore next */
51204  
51205  if (false) {}
51206  
51207  const defaultProps$1 = { ...defaultProps$3,
51208    getA11yStatusMessage: getA11yStatusMessage$1,
51209    circularNavigation: true
51210  };
51211  
51212  /* eslint-disable complexity */
51213  
51214  function downshiftUseComboboxReducer(state, action) {
51215    const {
51216      type,
51217      props,
51218      shiftKey
51219    } = action;
51220    let changes;
51221  
51222    switch (type) {
51223      case ItemClick:
51224        changes = {
51225          isOpen: getDefaultValue$1(props, 'isOpen'),
51226          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
51227          selectedItem: props.items[action.index],
51228          inputValue: props.itemToString(props.items[action.index])
51229        };
51230        break;
51231  
51232      case InputKeyDownArrowDown:
51233        if (state.isOpen) {
51234          changes = {
51235            highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
51236          };
51237        } else {
51238          changes = {
51239            highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
51240            isOpen: props.items.length >= 0
51241          };
51242        }
51243  
51244        break;
51245  
51246      case InputKeyDownArrowUp:
51247        if (state.isOpen) {
51248          changes = {
51249            highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
51250          };
51251        } else {
51252          changes = {
51253            highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
51254            isOpen: props.items.length >= 0
51255          };
51256        }
51257  
51258        break;
51259  
51260      case InputKeyDownEnter:
51261        changes = { ...(state.isOpen && state.highlightedIndex >= 0 && {
51262            selectedItem: props.items[state.highlightedIndex],
51263            isOpen: getDefaultValue$1(props, 'isOpen'),
51264            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
51265            inputValue: props.itemToString(props.items[state.highlightedIndex])
51266          })
51267        };
51268        break;
51269  
51270      case InputKeyDownEscape:
51271        changes = {
51272          isOpen: false,
51273          highlightedIndex: -1,
51274          ...(!state.isOpen && {
51275            selectedItem: null,
51276            inputValue: ''
51277          })
51278        };
51279        break;
51280  
51281      case InputKeyDownHome:
51282        changes = {
51283          highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
51284        };
51285        break;
51286  
51287      case InputKeyDownEnd:
51288        changes = {
51289          highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
51290        };
51291        break;
51292  
51293      case InputBlur:
51294        changes = {
51295          isOpen: false,
51296          highlightedIndex: -1,
51297          ...(state.highlightedIndex >= 0 && action.selectItem && {
51298            selectedItem: props.items[state.highlightedIndex],
51299            inputValue: props.itemToString(props.items[state.highlightedIndex])
51300          })
51301        };
51302        break;
51303  
51304      case InputChange:
51305        changes = {
51306          isOpen: true,
51307          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
51308          inputValue: action.inputValue
51309        };
51310        break;
51311  
51312      case FunctionSelectItem:
51313        changes = {
51314          selectedItem: action.selectedItem,
51315          inputValue: props.itemToString(action.selectedItem)
51316        };
51317        break;
51318  
51319      case ControlledPropUpdatedSelectedItem:
51320        changes = {
51321          inputValue: action.inputValue
51322        };
51323        break;
51324  
51325      default:
51326        return downshiftCommonReducer(state, action, stateChangeTypes$1);
51327    }
51328  
51329    return { ...state,
51330      ...changes
51331    };
51332  }
51333  /* eslint-enable complexity */
51334  
51335  /* eslint-disable max-statements */
51336  useCombobox.stateChangeTypes = stateChangeTypes$1;
51337  
51338  function useCombobox(userProps) {
51339    if (userProps === void 0) {
51340      userProps = {};
51341    }
51342  
51343    validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
51344  
51345    const props = { ...defaultProps$1,
51346      ...userProps
51347    };
51348    const {
51349      initialIsOpen,
51350      defaultIsOpen,
51351      items,
51352      scrollIntoView,
51353      environment,
51354      getA11yStatusMessage,
51355      getA11ySelectionMessage,
51356      itemToString
51357    } = props; // Initial state depending on controlled props.
51358  
51359    const initialState = getInitialState$1(props);
51360    const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
51361    const {
51362      isOpen,
51363      highlightedIndex,
51364      selectedItem,
51365      inputValue
51366    } = state; // Element refs.
51367  
51368    const menuRef = (0,external_React_.useRef)(null);
51369    const itemRefs = (0,external_React_.useRef)({});
51370    const inputRef = (0,external_React_.useRef)(null);
51371    const toggleButtonRef = (0,external_React_.useRef)(null);
51372    const comboboxRef = (0,external_React_.useRef)(null);
51373    const isInitialMountRef = (0,external_React_.useRef)(true); // prevent id re-generation between renders.
51374  
51375    const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
51376  
51377    const previousResultCountRef = (0,external_React_.useRef)(); // utility callback to get item element.
51378  
51379    const latest = downshift_esm_useLatestRef({
51380      state,
51381      props
51382    });
51383    const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
51384    // Sets a11y status message on changes in state.
51385  
51386    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
51387      isInitialMount: isInitialMountRef.current,
51388      previousResultCount: previousResultCountRef.current,
51389      items,
51390      environment,
51391      itemToString,
51392      ...state
51393    }); // Sets a11y status message on changes in selectedItem.
51394  
51395    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
51396      isInitialMount: isInitialMountRef.current,
51397      previousResultCount: previousResultCountRef.current,
51398      items,
51399      environment,
51400      itemToString,
51401      ...state
51402    }); // Scroll on highlighted item if change comes from keyboard.
51403  
51404    const shouldScrollRef = useScrollIntoView({
51405      menuElement: menuRef.current,
51406      highlightedIndex,
51407      isOpen,
51408      itemRefs,
51409      scrollIntoView,
51410      getItemNodeFromIndex
51411    });
51412    useControlPropsValidator({
51413      isInitialMount: isInitialMountRef.current,
51414      props,
51415      state
51416    }); // Focus the input on first render if required.
51417  
51418    (0,external_React_.useEffect)(() => {
51419      const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
51420  
51421      if (focusOnOpen && inputRef.current) {
51422        inputRef.current.focus();
51423      } // eslint-disable-next-line react-hooks/exhaustive-deps
51424  
51425    }, []);
51426    (0,external_React_.useEffect)(() => {
51427      if (isInitialMountRef.current) {
51428        return;
51429      }
51430  
51431      previousResultCountRef.current = items.length;
51432    }); // Add mouse/touch events to document.
51433  
51434    const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, () => {
51435      dispatch({
51436        type: InputBlur,
51437        selectItem: false
51438      });
51439    });
51440    const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
51441  
51442    (0,external_React_.useEffect)(() => {
51443      isInitialMountRef.current = false;
51444    }, []); // Reset itemRefs on close.
51445  
51446    (0,external_React_.useEffect)(() => {
51447      if (!isOpen) {
51448        itemRefs.current = {};
51449      }
51450    }, [isOpen]);
51451    /* Event handler functions */
51452  
51453    const inputKeyDownHandlers = (0,external_React_.useMemo)(() => ({
51454      ArrowDown(event) {
51455        event.preventDefault();
51456        dispatch({
51457          type: InputKeyDownArrowDown,
51458          shiftKey: event.shiftKey,
51459          getItemNodeFromIndex
51460        });
51461      },
51462  
51463      ArrowUp(event) {
51464        event.preventDefault();
51465        dispatch({
51466          type: InputKeyDownArrowUp,
51467          shiftKey: event.shiftKey,
51468          getItemNodeFromIndex
51469        });
51470      },
51471  
51472      Home(event) {
51473        if (!latest.current.state.isOpen) {
51474          return;
51475        }
51476  
51477        event.preventDefault();
51478        dispatch({
51479          type: InputKeyDownHome,
51480          getItemNodeFromIndex
51481        });
51482      },
51483  
51484      End(event) {
51485        if (!latest.current.state.isOpen) {
51486          return;
51487        }
51488  
51489        event.preventDefault();
51490        dispatch({
51491          type: InputKeyDownEnd,
51492          getItemNodeFromIndex
51493        });
51494      },
51495  
51496      Escape(event) {
51497        const latestState = latest.current.state;
51498  
51499        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
51500          event.preventDefault();
51501          dispatch({
51502            type: InputKeyDownEscape
51503          });
51504        }
51505      },
51506  
51507      Enter(event) {
51508        const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
51509  
51510        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
51511        ) {
51512          return;
51513        }
51514  
51515        event.preventDefault();
51516        dispatch({
51517          type: InputKeyDownEnter,
51518          getItemNodeFromIndex
51519        });
51520      }
51521  
51522    }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
51523  
51524    const getLabelProps = (0,external_React_.useCallback)(labelProps => ({
51525      id: elementIds.labelId,
51526      htmlFor: elementIds.inputId,
51527      ...labelProps
51528    }), [elementIds]);
51529    const getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
51530      let {
51531        onMouseLeave,
51532        refKey = 'ref',
51533        ref,
51534        ...rest
51535      } = _temp === void 0 ? {} : _temp;
51536      let {
51537        suppressRefError = false
51538      } = _temp2 === void 0 ? {} : _temp2;
51539      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
51540      return {
51541        [refKey]: handleRefs(ref, menuNode => {
51542          menuRef.current = menuNode;
51543        }),
51544        id: elementIds.menuId,
51545        role: 'listbox',
51546        'aria-labelledby': elementIds.labelId,
51547        onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
51548          dispatch({
51549            type: MenuMouseLeave
51550          });
51551        }),
51552        ...rest
51553      };
51554    }, [dispatch, setGetterPropCallInfo, elementIds]);
51555    const getItemProps = (0,external_React_.useCallback)(function (_temp3) {
51556      let {
51557        item,
51558        index,
51559        refKey = 'ref',
51560        ref,
51561        onMouseMove,
51562        onMouseDown,
51563        onClick,
51564        onPress,
51565        disabled,
51566        ...rest
51567      } = _temp3 === void 0 ? {} : _temp3;
51568      const {
51569        props: latestProps,
51570        state: latestState
51571      } = latest.current;
51572      const itemIndex = getItemIndex(index, item, latestProps.items);
51573  
51574      if (itemIndex < 0) {
51575        throw new Error('Pass either item or item index in getItemProps!');
51576      }
51577  
51578      const onSelectKey = 'onClick';
51579      const customClickHandler = onClick;
51580  
51581      const itemHandleMouseMove = () => {
51582        if (index === latestState.highlightedIndex) {
51583          return;
51584        }
51585  
51586        shouldScrollRef.current = false;
51587        dispatch({
51588          type: ItemMouseMove,
51589          index,
51590          disabled
51591        });
51592      };
51593  
51594      const itemHandleClick = () => {
51595        dispatch({
51596          type: ItemClick,
51597          index
51598        });
51599      };
51600  
51601      const itemHandleMouseDown = e => e.preventDefault();
51602  
51603      return {
51604        [refKey]: handleRefs(ref, itemNode => {
51605          if (itemNode) {
51606            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
51607          }
51608        }),
51609        disabled,
51610        role: 'option',
51611        'aria-selected': `$itemIndex === latestState.highlightedIndex}`,
51612        id: elementIds.getItemId(itemIndex),
51613        ...(!disabled && {
51614          [onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
51615        }),
51616        onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
51617        onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
51618        ...rest
51619      };
51620    }, [dispatch, latest, shouldScrollRef, elementIds]);
51621    const getToggleButtonProps = (0,external_React_.useCallback)(function (_temp4) {
51622      let {
51623        onClick,
51624        onPress,
51625        refKey = 'ref',
51626        ref,
51627        ...rest
51628      } = _temp4 === void 0 ? {} : _temp4;
51629  
51630      const toggleButtonHandleClick = () => {
51631        dispatch({
51632          type: ToggleButtonClick
51633        });
51634  
51635        if (!latest.current.state.isOpen && inputRef.current) {
51636          inputRef.current.focus();
51637        }
51638      };
51639  
51640      return {
51641        [refKey]: handleRefs(ref, toggleButtonNode => {
51642          toggleButtonRef.current = toggleButtonNode;
51643        }),
51644        id: elementIds.toggleButtonId,
51645        tabIndex: -1,
51646        ...(!rest.disabled && { ...({
51647            onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
51648          })
51649        }),
51650        ...rest
51651      };
51652    }, [dispatch, latest, elementIds]);
51653    const getInputProps = (0,external_React_.useCallback)(function (_temp5, _temp6) {
51654      let {
51655        onKeyDown,
51656        onChange,
51657        onInput,
51658        onBlur,
51659        onChangeText,
51660        refKey = 'ref',
51661        ref,
51662        ...rest
51663      } = _temp5 === void 0 ? {} : _temp5;
51664      let {
51665        suppressRefError = false
51666      } = _temp6 === void 0 ? {} : _temp6;
51667      setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
51668      const latestState = latest.current.state;
51669  
51670      const inputHandleKeyDown = event => {
51671        const key = normalizeArrowKey(event);
51672  
51673        if (key && inputKeyDownHandlers[key]) {
51674          inputKeyDownHandlers[key](event);
51675        }
51676      };
51677  
51678      const inputHandleChange = event => {
51679        dispatch({
51680          type: InputChange,
51681          inputValue: event.target.value
51682        });
51683      };
51684  
51685      const inputHandleBlur = () => {
51686        /* istanbul ignore else */
51687        if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
51688          dispatch({
51689            type: InputBlur,
51690            selectItem: true
51691          });
51692        }
51693      };
51694      /* istanbul ignore next (preact) */
51695  
51696  
51697      const onChangeKey = 'onChange';
51698      let eventHandlers = {};
51699  
51700      if (!rest.disabled) {
51701        eventHandlers = {
51702          [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
51703          onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
51704          onBlur: callAllEventHandlers(onBlur, inputHandleBlur)
51705        };
51706      }
51707  
51708      return {
51709        [refKey]: handleRefs(ref, inputNode => {
51710          inputRef.current = inputNode;
51711        }),
51712        id: elementIds.inputId,
51713        'aria-autocomplete': 'list',
51714        'aria-controls': elementIds.menuId,
51715        ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
51716          'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
51717        }),
51718        'aria-labelledby': elementIds.labelId,
51719        // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
51720        // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
51721        autoComplete: 'off',
51722        value: latestState.inputValue,
51723        ...eventHandlers,
51724        ...rest
51725      };
51726    }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
51727    const getComboboxProps = (0,external_React_.useCallback)(function (_temp7, _temp8) {
51728      let {
51729        refKey = 'ref',
51730        ref,
51731        ...rest
51732      } = _temp7 === void 0 ? {} : _temp7;
51733      let {
51734        suppressRefError = false
51735      } = _temp8 === void 0 ? {} : _temp8;
51736      setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
51737      return {
51738        [refKey]: handleRefs(ref, comboboxNode => {
51739          comboboxRef.current = comboboxNode;
51740        }),
51741        role: 'combobox',
51742        'aria-haspopup': 'listbox',
51743        'aria-owns': elementIds.menuId,
51744        'aria-expanded': latest.current.state.isOpen,
51745        ...rest
51746      };
51747    }, [latest, setGetterPropCallInfo, elementIds]); // returns
51748  
51749    const toggleMenu = (0,external_React_.useCallback)(() => {
51750      dispatch({
51751        type: FunctionToggleMenu
51752      });
51753    }, [dispatch]);
51754    const closeMenu = (0,external_React_.useCallback)(() => {
51755      dispatch({
51756        type: FunctionCloseMenu
51757      });
51758    }, [dispatch]);
51759    const openMenu = (0,external_React_.useCallback)(() => {
51760      dispatch({
51761        type: FunctionOpenMenu
51762      });
51763    }, [dispatch]);
51764    const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
51765      dispatch({
51766        type: FunctionSetHighlightedIndex,
51767        highlightedIndex: newHighlightedIndex
51768      });
51769    }, [dispatch]);
51770    const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
51771      dispatch({
51772        type: FunctionSelectItem,
51773        selectedItem: newSelectedItem
51774      });
51775    }, [dispatch]);
51776    const setInputValue = (0,external_React_.useCallback)(newInputValue => {
51777      dispatch({
51778        type: FunctionSetInputValue,
51779        inputValue: newInputValue
51780      });
51781    }, [dispatch]);
51782    const reset = (0,external_React_.useCallback)(() => {
51783      dispatch({
51784        type: FunctionReset$1
51785      });
51786    }, [dispatch]);
51787    return {
51788      // prop getters.
51789      getItemProps,
51790      getLabelProps,
51791      getMenuProps,
51792      getInputProps,
51793      getComboboxProps,
51794      getToggleButtonProps,
51795      // actions.
51796      toggleMenu,
51797      openMenu,
51798      closeMenu,
51799      setHighlightedIndex,
51800      setInputValue,
51801      selectItem,
51802      reset,
51803      // state.
51804      highlightedIndex,
51805      isOpen,
51806      selectedItem,
51807      inputValue
51808    };
51809  }
51810  
51811  const defaultStateValues = {
51812    activeIndex: -1,
51813    selectedItems: []
51814  };
51815  /**
51816   * Returns the initial value for a state key in the following order:
51817   * 1. controlled prop, 2. initial prop, 3. default prop, 4. default
51818   * value from Downshift.
51819   *
51820   * @param {Object} props Props passed to the hook.
51821   * @param {string} propKey Props key to generate the value for.
51822   * @returns {any} The initial value for that prop.
51823   */
51824  
51825  function getInitialValue(props, propKey) {
51826    return getInitialValue$1(props, propKey, defaultStateValues);
51827  }
51828  /**
51829   * Returns the default value for a state key in the following order:
51830   * 1. controlled prop, 2. default prop, 3. default value from Downshift.
51831   *
51832   * @param {Object} props Props passed to the hook.
51833   * @param {string} propKey Props key to generate the value for.
51834   * @returns {any} The initial value for that prop.
51835   */
51836  
51837  
51838  function getDefaultValue(props, propKey) {
51839    return getDefaultValue$1(props, propKey, defaultStateValues);
51840  }
51841  /**
51842   * Gets the initial state based on the provided props. It uses initial, default
51843   * and controlled props related to state in order to compute the initial value.
51844   *
51845   * @param {Object} props Props passed to the hook.
51846   * @returns {Object} The initial state.
51847   */
51848  
51849  
51850  function getInitialState(props) {
51851    const activeIndex = getInitialValue(props, 'activeIndex');
51852    const selectedItems = getInitialValue(props, 'selectedItems');
51853    return {
51854      activeIndex,
51855      selectedItems
51856    };
51857  }
51858  /**
51859   * Returns true if dropdown keydown operation is permitted. Should not be
51860   * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
51861   * input element with text content that is either highlighted or selection
51862   * cursor is not at the starting position.
51863   *
51864   * @param {KeyboardEvent} event The event from keydown.
51865   * @returns {boolean} Whether the operation is allowed.
51866   */
51867  
51868  
51869  function isKeyDownOperationPermitted(event) {
51870    if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
51871      return false;
51872    }
51873  
51874    const element = event.target;
51875  
51876    if (element instanceof HTMLInputElement && // if element is a text input
51877    element.value !== '' && ( // and we have text in it
51878    // and cursor is either not at the start or is currently highlighting text.
51879    element.selectionStart !== 0 || element.selectionEnd !== 0)) {
51880      return false;
51881    }
51882  
51883    return true;
51884  }
51885  /**
51886   * Returns a message to be added to aria-live region when item is removed.
51887   *
51888   * @param {Object} selectionParameters Parameters required to build the message.
51889   * @returns {string} The a11y message.
51890   */
51891  
51892  
51893  function getA11yRemovalMessage(selectionParameters) {
51894    const {
51895      removedSelectedItem,
51896      itemToString: itemToStringLocal
51897    } = selectionParameters;
51898    return `$itemToStringLocal(removedSelectedItem)} has been removed.`;
51899  }
51900  
51901  const propTypes = {
51902    selectedItems: (prop_types_default()).array,
51903    initialSelectedItems: (prop_types_default()).array,
51904    defaultSelectedItems: (prop_types_default()).array,
51905    itemToString: (prop_types_default()).func,
51906    getA11yRemovalMessage: (prop_types_default()).func,
51907    stateReducer: (prop_types_default()).func,
51908    activeIndex: (prop_types_default()).number,
51909    initialActiveIndex: (prop_types_default()).number,
51910    defaultActiveIndex: (prop_types_default()).number,
51911    onActiveIndexChange: (prop_types_default()).func,
51912    onSelectedItemsChange: (prop_types_default()).func,
51913    keyNavigationNext: (prop_types_default()).string,
51914    keyNavigationPrevious: (prop_types_default()).string,
51915    environment: prop_types_default().shape({
51916      addEventListener: (prop_types_default()).func,
51917      removeEventListener: (prop_types_default()).func,
51918      document: prop_types_default().shape({
51919        getElementById: (prop_types_default()).func,
51920        activeElement: (prop_types_default()).any,
51921        body: (prop_types_default()).any
51922      })
51923    })
51924  };
51925  const defaultProps = {
51926    itemToString: defaultProps$3.itemToString,
51927    stateReducer: defaultProps$3.stateReducer,
51928    environment: defaultProps$3.environment,
51929    getA11yRemovalMessage,
51930    keyNavigationNext: 'ArrowRight',
51931    keyNavigationPrevious: 'ArrowLeft'
51932  }; // eslint-disable-next-line import/no-mutable-exports
51933  
51934  let validatePropTypes = downshift_esm_noop;
51935  /* istanbul ignore next */
51936  
51937  if (false) {}
51938  
51939  const SelectedItemClick =  false ? 0 : 0;
51940  const SelectedItemKeyDownDelete =  false ? 0 : 1;
51941  const SelectedItemKeyDownBackspace =  false ? 0 : 2;
51942  const SelectedItemKeyDownNavigationNext =  false ? 0 : 3;
51943  const SelectedItemKeyDownNavigationPrevious =  false ? 0 : 4;
51944  const DropdownKeyDownNavigationPrevious =  false ? 0 : 5;
51945  const DropdownKeyDownBackspace =  false ? 0 : 6;
51946  const DropdownClick =  false ? 0 : 7;
51947  const FunctionAddSelectedItem =  false ? 0 : 8;
51948  const FunctionRemoveSelectedItem =  false ? 0 : 9;
51949  const FunctionSetSelectedItems =  false ? 0 : 10;
51950  const FunctionSetActiveIndex =  false ? 0 : 11;
51951  const FunctionReset =  false ? 0 : 12;
51952  
51953  var stateChangeTypes = /*#__PURE__*/Object.freeze({
51954    __proto__: null,
51955    SelectedItemClick: SelectedItemClick,
51956    SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
51957    SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
51958    SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
51959    SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
51960    DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
51961    DropdownKeyDownBackspace: DropdownKeyDownBackspace,
51962    DropdownClick: DropdownClick,
51963    FunctionAddSelectedItem: FunctionAddSelectedItem,
51964    FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
51965    FunctionSetSelectedItems: FunctionSetSelectedItems,
51966    FunctionSetActiveIndex: FunctionSetActiveIndex,
51967    FunctionReset: FunctionReset
51968  });
51969  
51970  /* eslint-disable complexity */
51971  
51972  function downshiftMultipleSelectionReducer(state, action) {
51973    const {
51974      type,
51975      index,
51976      props,
51977      selectedItem
51978    } = action;
51979    const {
51980      activeIndex,
51981      selectedItems
51982    } = state;
51983    let changes;
51984  
51985    switch (type) {
51986      case SelectedItemClick:
51987        changes = {
51988          activeIndex: index
51989        };
51990        break;
51991  
51992      case SelectedItemKeyDownNavigationPrevious:
51993        changes = {
51994          activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
51995        };
51996        break;
51997  
51998      case SelectedItemKeyDownNavigationNext:
51999        changes = {
52000          activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
52001        };
52002        break;
52003  
52004      case SelectedItemKeyDownBackspace:
52005      case SelectedItemKeyDownDelete:
52006        {
52007          let newActiveIndex = activeIndex;
52008  
52009          if (selectedItems.length === 1) {
52010            newActiveIndex = -1;
52011          } else if (activeIndex === selectedItems.length - 1) {
52012            newActiveIndex = selectedItems.length - 2;
52013          }
52014  
52015          changes = {
52016            selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
52017            ...{
52018              activeIndex: newActiveIndex
52019            }
52020          };
52021          break;
52022        }
52023  
52024      case DropdownKeyDownNavigationPrevious:
52025        changes = {
52026          activeIndex: selectedItems.length - 1
52027        };
52028        break;
52029  
52030      case DropdownKeyDownBackspace:
52031        changes = {
52032          selectedItems: selectedItems.slice(0, selectedItems.length - 1)
52033        };
52034        break;
52035  
52036      case FunctionAddSelectedItem:
52037        changes = {
52038          selectedItems: [...selectedItems, selectedItem]
52039        };
52040        break;
52041  
52042      case DropdownClick:
52043        changes = {
52044          activeIndex: -1
52045        };
52046        break;
52047  
52048      case FunctionRemoveSelectedItem:
52049        {
52050          let newActiveIndex = activeIndex;
52051          const selectedItemIndex = selectedItems.indexOf(selectedItem);
52052  
52053          if (selectedItemIndex >= 0) {
52054            if (selectedItems.length === 1) {
52055              newActiveIndex = -1;
52056            } else if (selectedItemIndex === selectedItems.length - 1) {
52057              newActiveIndex = selectedItems.length - 2;
52058            }
52059  
52060            changes = {
52061              selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
52062              activeIndex: newActiveIndex
52063            };
52064          }
52065  
52066          break;
52067        }
52068  
52069      case FunctionSetSelectedItems:
52070        {
52071          const {
52072            selectedItems: newSelectedItems
52073          } = action;
52074          changes = {
52075            selectedItems: newSelectedItems
52076          };
52077          break;
52078        }
52079  
52080      case FunctionSetActiveIndex:
52081        {
52082          const {
52083            activeIndex: newActiveIndex
52084          } = action;
52085          changes = {
52086            activeIndex: newActiveIndex
52087          };
52088          break;
52089        }
52090  
52091      case FunctionReset:
52092        changes = {
52093          activeIndex: getDefaultValue(props, 'activeIndex'),
52094          selectedItems: getDefaultValue(props, 'selectedItems')
52095        };
52096        break;
52097  
52098      default:
52099        throw new Error('Reducer called without proper action type.');
52100    }
52101  
52102    return { ...state,
52103      ...changes
52104    };
52105  }
52106  
52107  useMultipleSelection.stateChangeTypes = stateChangeTypes;
52108  
52109  function useMultipleSelection(userProps) {
52110    if (userProps === void 0) {
52111      userProps = {};
52112    }
52113  
52114    validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
52115  
52116    const props = { ...defaultProps,
52117      ...userProps
52118    };
52119    const {
52120      getA11yRemovalMessage,
52121      itemToString,
52122      environment,
52123      keyNavigationNext,
52124      keyNavigationPrevious
52125    } = props; // Reducer init.
52126  
52127    const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
52128    const {
52129      activeIndex,
52130      selectedItems
52131    } = state; // Refs.
52132  
52133    const isInitialMountRef = (0,external_React_.useRef)(true);
52134    const dropdownRef = (0,external_React_.useRef)(null);
52135    const previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems);
52136    const selectedItemRefs = (0,external_React_.useRef)();
52137    selectedItemRefs.current = [];
52138    const latest = downshift_esm_useLatestRef({
52139      state,
52140      props
52141    }); // Effects.
52142  
52143    /* Sets a11y status message on changes in selectedItem. */
52144  
52145    (0,external_React_.useEffect)(() => {
52146      if (isInitialMountRef.current) {
52147        return;
52148      }
52149  
52150      if (selectedItems.length < previousSelectedItemsRef.current.length) {
52151        const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
52152        setStatus(getA11yRemovalMessage({
52153          itemToString,
52154          resultCount: selectedItems.length,
52155          removedSelectedItem,
52156          activeIndex,
52157          activeSelectedItem: selectedItems[activeIndex]
52158        }), environment.document);
52159      }
52160  
52161      previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
52162    }, [selectedItems.length]); // Sets focus on active item.
52163  
52164    (0,external_React_.useEffect)(() => {
52165      if (isInitialMountRef.current) {
52166        return;
52167      }
52168  
52169      if (activeIndex === -1 && dropdownRef.current) {
52170        dropdownRef.current.focus();
52171      } else if (selectedItemRefs.current[activeIndex]) {
52172        selectedItemRefs.current[activeIndex].focus();
52173      }
52174    }, [activeIndex]);
52175    useControlPropsValidator({
52176      isInitialMount: isInitialMountRef.current,
52177      props,
52178      state
52179    });
52180    const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
52181  
52182    (0,external_React_.useEffect)(() => {
52183      isInitialMountRef.current = false;
52184    }, []); // Event handler functions.
52185  
52186    const selectedItemKeyDownHandlers = (0,external_React_.useMemo)(() => ({
52187      [keyNavigationPrevious]() {
52188        dispatch({
52189          type: SelectedItemKeyDownNavigationPrevious
52190        });
52191      },
52192  
52193      [keyNavigationNext]() {
52194        dispatch({
52195          type: SelectedItemKeyDownNavigationNext
52196        });
52197      },
52198  
52199      Delete() {
52200        dispatch({
52201          type: SelectedItemKeyDownDelete
52202        });
52203      },
52204  
52205      Backspace() {
52206        dispatch({
52207          type: SelectedItemKeyDownBackspace
52208        });
52209      }
52210  
52211    }), [dispatch, keyNavigationNext, keyNavigationPrevious]);
52212    const dropdownKeyDownHandlers = (0,external_React_.useMemo)(() => ({
52213      [keyNavigationPrevious](event) {
52214        if (isKeyDownOperationPermitted(event)) {
52215          dispatch({
52216            type: DropdownKeyDownNavigationPrevious
52217          });
52218        }
52219      },
52220  
52221      Backspace(event) {
52222        if (isKeyDownOperationPermitted(event)) {
52223          dispatch({
52224            type: DropdownKeyDownBackspace
52225          });
52226        }
52227      }
52228  
52229    }), [dispatch, keyNavigationPrevious]); // Getter props.
52230  
52231    const getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) {
52232      let {
52233        refKey = 'ref',
52234        ref,
52235        onClick,
52236        onKeyDown,
52237        selectedItem,
52238        index,
52239        ...rest
52240      } = _temp === void 0 ? {} : _temp;
52241      const {
52242        state: latestState
52243      } = latest.current;
52244      const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
52245  
52246      if (itemIndex < 0) {
52247        throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
52248      }
52249  
52250      const selectedItemHandleClick = () => {
52251        dispatch({
52252          type: SelectedItemClick,
52253          index
52254        });
52255      };
52256  
52257      const selectedItemHandleKeyDown = event => {
52258        const key = normalizeArrowKey(event);
52259  
52260        if (key && selectedItemKeyDownHandlers[key]) {
52261          selectedItemKeyDownHandlers[key](event);
52262        }
52263      };
52264  
52265      return {
52266        [refKey]: handleRefs(ref, selectedItemNode => {
52267          if (selectedItemNode) {
52268            selectedItemRefs.current.push(selectedItemNode);
52269          }
52270        }),
52271        tabIndex: index === latestState.activeIndex ? 0 : -1,
52272        onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
52273        onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
52274        ...rest
52275      };
52276    }, [dispatch, latest, selectedItemKeyDownHandlers]);
52277    const getDropdownProps = (0,external_React_.useCallback)(function (_temp2, _temp3) {
52278      let {
52279        refKey = 'ref',
52280        ref,
52281        onKeyDown,
52282        onClick,
52283        preventKeyAction = false,
52284        ...rest
52285      } = _temp2 === void 0 ? {} : _temp2;
52286      let {
52287        suppressRefError = false
52288      } = _temp3 === void 0 ? {} : _temp3;
52289      setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
52290  
52291      const dropdownHandleKeyDown = event => {
52292        const key = normalizeArrowKey(event);
52293  
52294        if (key && dropdownKeyDownHandlers[key]) {
52295          dropdownKeyDownHandlers[key](event);
52296        }
52297      };
52298  
52299      const dropdownHandleClick = () => {
52300        dispatch({
52301          type: DropdownClick
52302        });
52303      };
52304  
52305      return {
52306        [refKey]: handleRefs(ref, dropdownNode => {
52307          if (dropdownNode) {
52308            dropdownRef.current = dropdownNode;
52309          }
52310        }),
52311        ...(!preventKeyAction && {
52312          onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
52313          onClick: callAllEventHandlers(onClick, dropdownHandleClick)
52314        }),
52315        ...rest
52316      };
52317    }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
52318  
52319    const addSelectedItem = (0,external_React_.useCallback)(selectedItem => {
52320      dispatch({
52321        type: FunctionAddSelectedItem,
52322        selectedItem
52323      });
52324    }, [dispatch]);
52325    const removeSelectedItem = (0,external_React_.useCallback)(selectedItem => {
52326      dispatch({
52327        type: FunctionRemoveSelectedItem,
52328        selectedItem
52329      });
52330    }, [dispatch]);
52331    const setSelectedItems = (0,external_React_.useCallback)(newSelectedItems => {
52332      dispatch({
52333        type: FunctionSetSelectedItems,
52334        selectedItems: newSelectedItems
52335      });
52336    }, [dispatch]);
52337    const setActiveIndex = (0,external_React_.useCallback)(newActiveIndex => {
52338      dispatch({
52339        type: FunctionSetActiveIndex,
52340        activeIndex: newActiveIndex
52341      });
52342    }, [dispatch]);
52343    const reset = (0,external_React_.useCallback)(() => {
52344      dispatch({
52345        type: FunctionReset
52346      });
52347    }, [dispatch]);
52348    return {
52349      getSelectedItemProps,
52350      getDropdownProps,
52351      addSelectedItem,
52352      removeSelectedItem,
52353      setSelectedItems,
52354      setActiveIndex,
52355      reset,
52356      selectedItems,
52357      activeIndex
52358    };
52359  }
52360  
52361  
52362  
52363  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/styles.js
52364  
52365  /**
52366   * External dependencies
52367   */
52368  
52369  /**
52370   * Internal dependencies
52371   */
52372  
52373  
52374  const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/emotion_react_browser_esm_css(Container, "{min-width:130px;}" + ( true ? "" : 0),  true ? "" : 0) : '';
52375  const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser_esm(input_base,  true ? {
52376    target: "eswuck60"
52377  } : 0)(backCompatMinWidth, ";" + ( true ? "" : 0));
52378  
52379  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/index.js
52380  
52381  // @ts-nocheck
52382  /**
52383   * External dependencies
52384   */
52385  
52386  
52387  
52388  /**
52389   * WordPress dependencies
52390   */
52391  
52392  
52393  
52394  
52395  
52396  /**
52397   * Internal dependencies
52398   */
52399  
52400  
52401  
52402  
52403  
52404  
52405  const custom_select_control_itemToString = item => item?.name;
52406  // This is needed so that in Windows, where
52407  // the menu does not necessarily open on
52408  // key up/down, you can still switch between
52409  // options with the menu closed.
52410  const custom_select_control_stateReducer = ({
52411    selectedItem
52412  }, {
52413    type,
52414    changes,
52415    props: {
52416      items
52417    }
52418  }) => {
52419    switch (type) {
52420      case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
52421        // If we already have a selected item, try to select the next one,
52422        // without circular navigation. Otherwise, select the first item.
52423        return {
52424          selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
52425        };
52426      case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
52427        // If we already have a selected item, try to select the previous one,
52428        // without circular navigation. Otherwise, select the last item.
52429        return {
52430          selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
52431        };
52432      default:
52433        return changes;
52434    }
52435  };
52436  function CustomSelectControl(props) {
52437    const {
52438      /** Start opting into the larger default height that will become the default size in a future version. */
52439      __next40pxDefaultSize = false,
52440      /** Start opting into the unconstrained width that will become the default in a future version. */
52441      __nextUnconstrainedWidth = false,
52442      className,
52443      hideLabelFromVision,
52444      label,
52445      describedBy,
52446      options: items,
52447      onChange: onSelectedItemChange,
52448      /** @type {import('../select-control/types').SelectControlProps.size} */
52449      size = 'default',
52450      value: _selectedItem,
52451      onMouseOver,
52452      onMouseOut,
52453      onFocus,
52454      onBlur,
52455      __experimentalShowSelectedHint = false
52456    } = useDeprecated36pxDefaultSizeProp(props);
52457    const {
52458      getLabelProps,
52459      getToggleButtonProps,
52460      getMenuProps,
52461      getItemProps,
52462      isOpen,
52463      highlightedIndex,
52464      selectedItem
52465    } = useSelect({
52466      initialSelectedItem: items[0],
52467      items,
52468      itemToString: custom_select_control_itemToString,
52469      onSelectedItemChange,
52470      ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
52471        selectedItem: _selectedItem
52472      } : undefined),
52473      stateReducer: custom_select_control_stateReducer
52474    });
52475    const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false);
52476    function handleOnFocus(e) {
52477      setIsFocused(true);
52478      onFocus?.(e);
52479    }
52480    function handleOnBlur(e) {
52481      setIsFocused(false);
52482      onBlur?.(e);
52483    }
52484    if (!__nextUnconstrainedWidth) {
52485      external_wp_deprecated_default()('Constrained width styles for wp.components.CustomSelectControl', {
52486        since: '6.1',
52487        version: '6.4',
52488        hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
52489      });
52490    }
52491    function getDescribedBy() {
52492      if (describedBy) {
52493        return describedBy;
52494      }
52495      if (!selectedItem) {
52496        return (0,external_wp_i18n_namespaceObject.__)('No selection');
52497      }
52498  
52499      // translators: %s: The selected option.
52500      return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name);
52501    }
52502    const menuProps = getMenuProps({
52503      className: 'components-custom-select-control__menu',
52504      'aria-hidden': !isOpen
52505    });
52506    const onKeyDownHandler = (0,external_wp_element_namespaceObject.useCallback)(e => {
52507      e.stopPropagation();
52508      menuProps?.onKeyDown?.(e);
52509    }, [menuProps]);
52510  
52511    // We need this here, because the null active descendant is not fully ARIA compliant.
52512    if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
52513      delete menuProps['aria-activedescendant'];
52514    }
52515    return (0,external_React_.createElement)("div", {
52516      className: classnames_default()('components-custom-select-control', className)
52517    }, hideLabelFromVision ? (0,external_React_.createElement)(visually_hidden_component, {
52518      as: "label",
52519      ...getLabelProps()
52520    }, label) : /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
52521    (0,external_React_.createElement)(StyledLabel, {
52522      ...getLabelProps({
52523        className: 'components-custom-select-control__label'
52524      })
52525    }, label), (0,external_React_.createElement)(InputBaseWithBackCompatMinWidth, {
52526      __next40pxDefaultSize: __next40pxDefaultSize,
52527      __nextUnconstrainedWidth: __nextUnconstrainedWidth,
52528      isFocused: isOpen || isFocused,
52529      __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
52530      labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
52531      size: size,
52532      suffix: (0,external_React_.createElement)(select_control_chevron_down, null)
52533    }, (0,external_React_.createElement)(Select, {
52534      onMouseOver: onMouseOver,
52535      onMouseOut: onMouseOut,
52536      as: "button",
52537      onFocus: handleOnFocus,
52538      onBlur: handleOnBlur,
52539      selectSize: size,
52540      __next40pxDefaultSize: __next40pxDefaultSize,
52541      ...getToggleButtonProps({
52542        // This is needed because some speech recognition software don't support `aria-labelledby`.
52543        'aria-label': label,
52544        'aria-labelledby': undefined,
52545        className: 'components-custom-select-control__button',
52546        describedBy: getDescribedBy()
52547      })
52548    }, custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0,external_React_.createElement)("span", {
52549      className: "components-custom-select-control__hint"
52550    }, selectedItem.__experimentalHint))), (0,external_React_.createElement)("ul", {
52551      ...menuProps,
52552      onKeyDown: onKeyDownHandler
52553    }, isOpen && items.map((item, index) =>
52554    // eslint-disable-next-line react/jsx-key
52555    (0,external_React_.createElement)("li", {
52556      ...getItemProps({
52557        item,
52558        index,
52559        key: item.key,
52560        className: classnames_default()(item.className, 'components-custom-select-control__item', {
52561          'is-highlighted': index === highlightedIndex,
52562          'has-hint': !!item.__experimentalHint,
52563          'is-next-40px-default-size': __next40pxDefaultSize
52564        }),
52565        style: item.style
52566      })
52567    }, item.name, item.__experimentalHint && (0,external_React_.createElement)("span", {
52568      className: "components-custom-select-control__item-hint"
52569    }, item.__experimentalHint), item === selectedItem && (0,external_React_.createElement)(icons_build_module_icon, {
52570      icon: library_check,
52571      className: "components-custom-select-control__item-icon"
52572    })))));
52573  }
52574  function StableCustomSelectControl(props) {
52575    return (0,external_React_.createElement)(CustomSelectControl, {
52576      ...props,
52577      __experimentalShowSelectedHint: false
52578    });
52579  }
52580  
52581  ;// CONCATENATED MODULE: ./node_modules/use-lilius/build/index.es.js
52582  
52583  
52584  function toInteger(dirtyNumber) {
52585    if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
52586      return NaN;
52587    }
52588  
52589    var number = Number(dirtyNumber);
52590  
52591    if (isNaN(number)) {
52592      return number;
52593    }
52594  
52595    return number < 0 ? Math.ceil(number) : Math.floor(number);
52596  }
52597  
52598  function requiredArgs(required, args) {
52599    if (args.length < required) {
52600      throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
52601    }
52602  }
52603  
52604  /**
52605   * @name toDate
52606   * @category Common Helpers
52607   * @summary Convert the given argument to an instance of Date.
52608   *
52609   * @description
52610   * Convert the given argument to an instance of Date.
52611   *
52612   * If the argument is an instance of Date, the function returns its clone.
52613   *
52614   * If the argument is a number, it is treated as a timestamp.
52615   *
52616   * If the argument is none of the above, the function returns Invalid Date.
52617   *
52618   * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
52619   *
52620   * @param {Date|Number} argument - the value to convert
52621   * @returns {Date} the parsed date in the local time zone
52622   * @throws {TypeError} 1 argument required
52623   *
52624   * @example
52625   * // Clone the date:
52626   * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
52627   * //=> Tue Feb 11 2014 11:30:30
52628   *
52629   * @example
52630   * // Convert the timestamp to date:
52631   * const result = toDate(1392098430000)
52632   * //=> Tue Feb 11 2014 11:30:30
52633   */
52634  
52635  function toDate(argument) {
52636    requiredArgs(1, arguments);
52637    var argStr = Object.prototype.toString.call(argument); // Clone the date
52638  
52639    if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
52640      // Prevent the date to lose the milliseconds when passed to new Date() in IE10
52641      return new Date(argument.getTime());
52642    } else if (typeof argument === 'number' || argStr === '[object Number]') {
52643      return new Date(argument);
52644    } else {
52645      if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
52646        // eslint-disable-next-line no-console
52647        console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console
52648  
52649        console.warn(new Error().stack);
52650      }
52651  
52652      return new Date(NaN);
52653    }
52654  }
52655  
52656  /**
52657   * @name addDays
52658   * @category Day Helpers
52659   * @summary Add the specified number of days to the given date.
52660   *
52661   * @description
52662   * Add the specified number of days to the given date.
52663   *
52664   * @param {Date|Number} date - the date to be changed
52665   * @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`.
52666   * @returns {Date} - the new date with the days added
52667   * @throws {TypeError} - 2 arguments required
52668   *
52669   * @example
52670   * // Add 10 days to 1 September 2014:
52671   * const result = addDays(new Date(2014, 8, 1), 10)
52672   * //=> Thu Sep 11 2014 00:00:00
52673   */
52674  
52675  function addDays(dirtyDate, dirtyAmount) {
52676    requiredArgs(2, arguments);
52677    var date = toDate(dirtyDate);
52678    var amount = toInteger(dirtyAmount);
52679  
52680    if (isNaN(amount)) {
52681      return new Date(NaN);
52682    }
52683  
52684    if (!amount) {
52685      // If 0 days, no-op to avoid changing times in the hour before end of DST
52686      return date;
52687    }
52688  
52689    date.setDate(date.getDate() + amount);
52690    return date;
52691  }
52692  
52693  /**
52694   * @name addMonths
52695   * @category Month Helpers
52696   * @summary Add the specified number of months to the given date.
52697   *
52698   * @description
52699   * Add the specified number of months to the given date.
52700   *
52701   * @param {Date|Number} date - the date to be changed
52702   * @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`.
52703   * @returns {Date} the new date with the months added
52704   * @throws {TypeError} 2 arguments required
52705   *
52706   * @example
52707   * // Add 5 months to 1 September 2014:
52708   * const result = addMonths(new Date(2014, 8, 1), 5)
52709   * //=> Sun Feb 01 2015 00:00:00
52710   */
52711  
52712  function addMonths(dirtyDate, dirtyAmount) {
52713    requiredArgs(2, arguments);
52714    var date = toDate(dirtyDate);
52715    var amount = toInteger(dirtyAmount);
52716  
52717    if (isNaN(amount)) {
52718      return new Date(NaN);
52719    }
52720  
52721    if (!amount) {
52722      // If 0 months, no-op to avoid changing times in the hour before end of DST
52723      return date;
52724    }
52725  
52726    var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for
52727    // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
52728    // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
52729    // want except that dates will wrap around the end of a month, meaning that
52730    // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
52731    // we'll default to the end of the desired month by adding 1 to the desired
52732    // month and using a date of 0 to back up one day to the end of the desired
52733    // month.
52734  
52735    var endOfDesiredMonth = new Date(date.getTime());
52736    endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
52737    var daysInMonth = endOfDesiredMonth.getDate();
52738  
52739    if (dayOfMonth >= daysInMonth) {
52740      // If we're already at the end of the month, then this is the correct date
52741      // and we're done.
52742      return endOfDesiredMonth;
52743    } else {
52744      // Otherwise, we now know that setting the original day-of-month value won't
52745      // cause an overflow, so set the desired day-of-month. Note that we can't
52746      // just set the date of `endOfDesiredMonth` because that object may have had
52747      // its time changed in the unusual case where where a DST transition was on
52748      // the last day of the month and its local time was in the hour skipped or
52749      // repeated next to a DST transition.  So we use `date` instead which is
52750      // guaranteed to still have the original time.
52751      date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
52752      return date;
52753    }
52754  }
52755  
52756  var index_es_defaultOptions = {};
52757  function getDefaultOptions() {
52758    return index_es_defaultOptions;
52759  }
52760  
52761  /**
52762   * @name startOfWeek
52763   * @category Week Helpers
52764   * @summary Return the start of a week for the given date.
52765   *
52766   * @description
52767   * Return the start of a week for the given date.
52768   * The result will be in the local timezone.
52769   *
52770   * @param {Date|Number} date - the original date
52771   * @param {Object} [options] - an object with options.
52772   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
52773   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
52774   * @returns {Date} the start of a week
52775   * @throws {TypeError} 1 argument required
52776   * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
52777   *
52778   * @example
52779   * // The start of a week for 2 September 2014 11:55:00:
52780   * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
52781   * //=> Sun Aug 31 2014 00:00:00
52782   *
52783   * @example
52784   * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
52785   * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
52786   * //=> Mon Sep 01 2014 00:00:00
52787   */
52788  
52789  function startOfWeek(dirtyDate, options) {
52790    var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
52791  
52792    requiredArgs(1, arguments);
52793    var defaultOptions = getDefaultOptions();
52794    var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
52795  
52796    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
52797      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
52798    }
52799  
52800    var date = toDate(dirtyDate);
52801    var day = date.getDay();
52802    var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
52803    date.setDate(date.getDate() - diff);
52804    date.setHours(0, 0, 0, 0);
52805    return date;
52806  }
52807  
52808  /**
52809   * @name startOfDay
52810   * @category Day Helpers
52811   * @summary Return the start of a day for the given date.
52812   *
52813   * @description
52814   * Return the start of a day for the given date.
52815   * The result will be in the local timezone.
52816   *
52817   * @param {Date|Number} date - the original date
52818   * @returns {Date} the start of a day
52819   * @throws {TypeError} 1 argument required
52820   *
52821   * @example
52822   * // The start of a day for 2 September 2014 11:55:00:
52823   * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
52824   * //=> Tue Sep 02 2014 00:00:00
52825   */
52826  
52827  function startOfDay(dirtyDate) {
52828    requiredArgs(1, arguments);
52829    var date = toDate(dirtyDate);
52830    date.setHours(0, 0, 0, 0);
52831    return date;
52832  }
52833  
52834  /**
52835   * @name addWeeks
52836   * @category Week Helpers
52837   * @summary Add the specified number of weeks to the given date.
52838   *
52839   * @description
52840   * Add the specified number of week to the given date.
52841   *
52842   * @param {Date|Number} date - the date to be changed
52843   * @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`.
52844   * @returns {Date} the new date with the weeks added
52845   * @throws {TypeError} 2 arguments required
52846   *
52847   * @example
52848   * // Add 4 weeks to 1 September 2014:
52849   * const result = addWeeks(new Date(2014, 8, 1), 4)
52850   * //=> Mon Sep 29 2014 00:00:00
52851   */
52852  
52853  function addWeeks(dirtyDate, dirtyAmount) {
52854    requiredArgs(2, arguments);
52855    var amount = toInteger(dirtyAmount);
52856    var days = amount * 7;
52857    return addDays(dirtyDate, days);
52858  }
52859  
52860  /**
52861   * @name addYears
52862   * @category Year Helpers
52863   * @summary Add the specified number of years to the given date.
52864   *
52865   * @description
52866   * Add the specified number of years to the given date.
52867   *
52868   * @param {Date|Number} date - the date to be changed
52869   * @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`.
52870   * @returns {Date} the new date with the years added
52871   * @throws {TypeError} 2 arguments required
52872   *
52873   * @example
52874   * // Add 5 years to 1 September 2014:
52875   * const result = addYears(new Date(2014, 8, 1), 5)
52876   * //=> Sun Sep 01 2019 00:00:00
52877   */
52878  
52879  function addYears(dirtyDate, dirtyAmount) {
52880    requiredArgs(2, arguments);
52881    var amount = toInteger(dirtyAmount);
52882    return addMonths(dirtyDate, amount * 12);
52883  }
52884  
52885  /**
52886   * @name endOfMonth
52887   * @category Month Helpers
52888   * @summary Return the end of a month for the given date.
52889   *
52890   * @description
52891   * Return the end of a month for the given date.
52892   * The result will be in the local timezone.
52893   *
52894   * @param {Date|Number} date - the original date
52895   * @returns {Date} the end of a month
52896   * @throws {TypeError} 1 argument required
52897   *
52898   * @example
52899   * // The end of a month for 2 September 2014 11:55:00:
52900   * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
52901   * //=> Tue Sep 30 2014 23:59:59.999
52902   */
52903  
52904  function endOfMonth(dirtyDate) {
52905    requiredArgs(1, arguments);
52906    var date = toDate(dirtyDate);
52907    var month = date.getMonth();
52908    date.setFullYear(date.getFullYear(), month + 1, 0);
52909    date.setHours(23, 59, 59, 999);
52910    return date;
52911  }
52912  
52913  /**
52914   * @name eachDayOfInterval
52915   * @category Interval Helpers
52916   * @summary Return the array of dates within the specified time interval.
52917   *
52918   * @description
52919   * Return the array of dates within the specified time interval.
52920   *
52921   * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
52922   * @param {Object} [options] - an object with options.
52923   * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1.
52924   * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end
52925   * @throws {TypeError} 1 argument required
52926   * @throws {RangeError} `options.step` must be a number greater than 1
52927   * @throws {RangeError} The start of an interval cannot be after its end
52928   * @throws {RangeError} Date in interval cannot be `Invalid Date`
52929   *
52930   * @example
52931   * // Each day between 6 October 2014 and 10 October 2014:
52932   * const result = eachDayOfInterval({
52933   *   start: new Date(2014, 9, 6),
52934   *   end: new Date(2014, 9, 10)
52935   * })
52936   * //=> [
52937   * //   Mon Oct 06 2014 00:00:00,
52938   * //   Tue Oct 07 2014 00:00:00,
52939   * //   Wed Oct 08 2014 00:00:00,
52940   * //   Thu Oct 09 2014 00:00:00,
52941   * //   Fri Oct 10 2014 00:00:00
52942   * // ]
52943   */
52944  
52945  function eachDayOfInterval(dirtyInterval, options) {
52946    var _options$step;
52947  
52948    requiredArgs(1, arguments);
52949    var interval = dirtyInterval || {};
52950    var startDate = toDate(interval.start);
52951    var endDate = toDate(interval.end);
52952    var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date`
52953  
52954    if (!(startDate.getTime() <= endTime)) {
52955      throw new RangeError('Invalid interval');
52956    }
52957  
52958    var dates = [];
52959    var currentDate = startDate;
52960    currentDate.setHours(0, 0, 0, 0);
52961    var step = Number((_options$step = options === null || options === void 0 ? void 0 : options.step) !== null && _options$step !== void 0 ? _options$step : 1);
52962    if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1');
52963  
52964    while (currentDate.getTime() <= endTime) {
52965      dates.push(toDate(currentDate));
52966      currentDate.setDate(currentDate.getDate() + step);
52967      currentDate.setHours(0, 0, 0, 0);
52968    }
52969  
52970    return dates;
52971  }
52972  
52973  /**
52974   * @name eachMonthOfInterval
52975   * @category Interval Helpers
52976   * @summary Return the array of months within the specified time interval.
52977   *
52978   * @description
52979   * Return the array of months within the specified time interval.
52980   *
52981   * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
52982   * @returns {Date[]} the array with starts of months from the month of the interval start to the month of the interval end
52983   * @throws {TypeError} 1 argument required
52984   * @throws {RangeError} The start of an interval cannot be after its end
52985   * @throws {RangeError} Date in interval cannot be `Invalid Date`
52986   *
52987   * @example
52988   * // Each month between 6 February 2014 and 10 August 2014:
52989   * const result = eachMonthOfInterval({
52990   *   start: new Date(2014, 1, 6),
52991   *   end: new Date(2014, 7, 10)
52992   * })
52993   * //=> [
52994   * //   Sat Feb 01 2014 00:00:00,
52995   * //   Sat Mar 01 2014 00:00:00,
52996   * //   Tue Apr 01 2014 00:00:00,
52997   * //   Thu May 01 2014 00:00:00,
52998   * //   Sun Jun 01 2014 00:00:00,
52999   * //   Tue Jul 01 2014 00:00:00,
53000   * //   Fri Aug 01 2014 00:00:00
53001   * // ]
53002   */
53003  
53004  function eachMonthOfInterval(dirtyInterval) {
53005    requiredArgs(1, arguments);
53006    var interval = dirtyInterval || {};
53007    var startDate = toDate(interval.start);
53008    var endDate = toDate(interval.end);
53009    var endTime = endDate.getTime();
53010    var dates = []; // Throw an exception if start date is after end date or if any date is `Invalid Date`
53011  
53012    if (!(startDate.getTime() <= endTime)) {
53013      throw new RangeError('Invalid interval');
53014    }
53015  
53016    var currentDate = startDate;
53017    currentDate.setHours(0, 0, 0, 0);
53018    currentDate.setDate(1);
53019  
53020    while (currentDate.getTime() <= endTime) {
53021      dates.push(toDate(currentDate));
53022      currentDate.setMonth(currentDate.getMonth() + 1);
53023    }
53024  
53025    return dates;
53026  }
53027  
53028  /**
53029   * @name eachWeekOfInterval
53030   * @category Interval Helpers
53031   * @summary Return the array of weeks within the specified time interval.
53032   *
53033   * @description
53034   * Return the array of weeks within the specified time interval.
53035   *
53036   * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval}
53037   * @param {Object} [options] - an object with options.
53038   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
53039   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
53040   * @returns {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end
53041   * @throws {TypeError} 1 argument required
53042   * @throws {RangeError} `options.weekStartsOn` must be 0, 1, ..., 6
53043   * @throws {RangeError} The start of an interval cannot be after its end
53044   * @throws {RangeError} Date in interval cannot be `Invalid Date`
53045   *
53046   * @example
53047   * // Each week within interval 6 October 2014 - 23 November 2014:
53048   * const result = eachWeekOfInterval({
53049   *   start: new Date(2014, 9, 6),
53050   *   end: new Date(2014, 10, 23)
53051   * })
53052   * //=> [
53053   * //   Sun Oct 05 2014 00:00:00,
53054   * //   Sun Oct 12 2014 00:00:00,
53055   * //   Sun Oct 19 2014 00:00:00,
53056   * //   Sun Oct 26 2014 00:00:00,
53057   * //   Sun Nov 02 2014 00:00:00,
53058   * //   Sun Nov 09 2014 00:00:00,
53059   * //   Sun Nov 16 2014 00:00:00,
53060   * //   Sun Nov 23 2014 00:00:00
53061   * // ]
53062   */
53063  
53064  function eachWeekOfInterval(dirtyInterval, options) {
53065    requiredArgs(1, arguments);
53066    var interval = dirtyInterval || {};
53067    var startDate = toDate(interval.start);
53068    var endDate = toDate(interval.end);
53069    var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date`
53070  
53071    if (!(startDate.getTime() <= endTime)) {
53072      throw new RangeError('Invalid interval');
53073    }
53074  
53075    var startDateWeek = startOfWeek(startDate, options);
53076    var endDateWeek = startOfWeek(endDate, options); // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet
53077  
53078    startDateWeek.setHours(15);
53079    endDateWeek.setHours(15);
53080    endTime = endDateWeek.getTime();
53081    var weeks = [];
53082    var currentWeek = startDateWeek;
53083  
53084    while (currentWeek.getTime() <= endTime) {
53085      currentWeek.setHours(0);
53086      weeks.push(toDate(currentWeek));
53087      currentWeek = addWeeks(currentWeek, 1);
53088      currentWeek.setHours(15);
53089    }
53090  
53091    return weeks;
53092  }
53093  
53094  /**
53095   * @name startOfMonth
53096   * @category Month Helpers
53097   * @summary Return the start of a month for the given date.
53098   *
53099   * @description
53100   * Return the start of a month for the given date.
53101   * The result will be in the local timezone.
53102   *
53103   * @param {Date|Number} date - the original date
53104   * @returns {Date} the start of a month
53105   * @throws {TypeError} 1 argument required
53106   *
53107   * @example
53108   * // The start of a month for 2 September 2014 11:55:00:
53109   * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
53110   * //=> Mon Sep 01 2014 00:00:00
53111   */
53112  
53113  function startOfMonth(dirtyDate) {
53114    requiredArgs(1, arguments);
53115    var date = toDate(dirtyDate);
53116    date.setDate(1);
53117    date.setHours(0, 0, 0, 0);
53118    return date;
53119  }
53120  
53121  /**
53122   * @name endOfWeek
53123   * @category Week Helpers
53124   * @summary Return the end of a week for the given date.
53125   *
53126   * @description
53127   * Return the end of a week for the given date.
53128   * The result will be in the local timezone.
53129   *
53130   * @param {Date|Number} date - the original date
53131   * @param {Object} [options] - an object with options.
53132   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
53133   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
53134   * @returns {Date} the end of a week
53135   * @throws {TypeError} 1 argument required
53136   * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
53137   *
53138   * @example
53139   * // The end of a week for 2 September 2014 11:55:00:
53140   * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))
53141   * //=> Sat Sep 06 2014 23:59:59.999
53142   *
53143   * @example
53144   * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:
53145   * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
53146   * //=> Sun Sep 07 2014 23:59:59.999
53147   */
53148  function endOfWeek(dirtyDate, options) {
53149    var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
53150  
53151    requiredArgs(1, arguments);
53152    var defaultOptions = getDefaultOptions();
53153    var weekStartsOn = toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
53154  
53155    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
53156      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
53157    }
53158  
53159    var date = toDate(dirtyDate);
53160    var day = date.getDay();
53161    var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
53162    date.setDate(date.getDate() + diff);
53163    date.setHours(23, 59, 59, 999);
53164    return date;
53165  }
53166  
53167  /**
53168   * @name getDaysInMonth
53169   * @category Month Helpers
53170   * @summary Get the number of days in a month of the given date.
53171   *
53172   * @description
53173   * Get the number of days in a month of the given date.
53174   *
53175   * @param {Date|Number} date - the given date
53176   * @returns {Number} the number of days in a month
53177   * @throws {TypeError} 1 argument required
53178   *
53179   * @example
53180   * // How many days are in February 2000?
53181   * const result = getDaysInMonth(new Date(2000, 1))
53182   * //=> 29
53183   */
53184  
53185  function getDaysInMonth(dirtyDate) {
53186    requiredArgs(1, arguments);
53187    var date = toDate(dirtyDate);
53188    var year = date.getFullYear();
53189    var monthIndex = date.getMonth();
53190    var lastDayOfMonth = new Date(0);
53191    lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
53192    lastDayOfMonth.setHours(0, 0, 0, 0);
53193    return lastDayOfMonth.getDate();
53194  }
53195  
53196  /**
53197   * @name isAfter
53198   * @category Common Helpers
53199   * @summary Is the first date after the second one?
53200   *
53201   * @description
53202   * Is the first date after the second one?
53203   *
53204   * @param {Date|Number} date - the date that should be after the other one to return true
53205   * @param {Date|Number} dateToCompare - the date to compare with
53206   * @returns {Boolean} the first date is after the second date
53207   * @throws {TypeError} 2 arguments required
53208   *
53209   * @example
53210   * // Is 10 July 1989 after 11 February 1987?
53211   * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
53212   * //=> true
53213   */
53214  
53215  function isAfter(dirtyDate, dirtyDateToCompare) {
53216    requiredArgs(2, arguments);
53217    var date = toDate(dirtyDate);
53218    var dateToCompare = toDate(dirtyDateToCompare);
53219    return date.getTime() > dateToCompare.getTime();
53220  }
53221  
53222  /**
53223   * @name isBefore
53224   * @category Common Helpers
53225   * @summary Is the first date before the second one?
53226   *
53227   * @description
53228   * Is the first date before the second one?
53229   *
53230   * @param {Date|Number} date - the date that should be before the other one to return true
53231   * @param {Date|Number} dateToCompare - the date to compare with
53232   * @returns {Boolean} the first date is before the second date
53233   * @throws {TypeError} 2 arguments required
53234   *
53235   * @example
53236   * // Is 10 July 1989 before 11 February 1987?
53237   * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
53238   * //=> false
53239   */
53240  
53241  function isBefore(dirtyDate, dirtyDateToCompare) {
53242    requiredArgs(2, arguments);
53243    var date = toDate(dirtyDate);
53244    var dateToCompare = toDate(dirtyDateToCompare);
53245    return date.getTime() < dateToCompare.getTime();
53246  }
53247  
53248  /**
53249   * @name isEqual
53250   * @category Common Helpers
53251   * @summary Are the given dates equal?
53252   *
53253   * @description
53254   * Are the given dates equal?
53255   *
53256   * @param {Date|Number} dateLeft - the first date to compare
53257   * @param {Date|Number} dateRight - the second date to compare
53258   * @returns {Boolean} the dates are equal
53259   * @throws {TypeError} 2 arguments required
53260   *
53261   * @example
53262   * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
53263   * const result = isEqual(
53264   *   new Date(2014, 6, 2, 6, 30, 45, 0),
53265   *   new Date(2014, 6, 2, 6, 30, 45, 500)
53266   * )
53267   * //=> false
53268   */
53269  
53270  function isEqual(dirtyLeftDate, dirtyRightDate) {
53271    requiredArgs(2, arguments);
53272    var dateLeft = toDate(dirtyLeftDate);
53273    var dateRight = toDate(dirtyRightDate);
53274    return dateLeft.getTime() === dateRight.getTime();
53275  }
53276  
53277  /**
53278   * @name setMonth
53279   * @category Month Helpers
53280   * @summary Set the month to the given date.
53281   *
53282   * @description
53283   * Set the month to the given date.
53284   *
53285   * @param {Date|Number} date - the date to be changed
53286   * @param {Number} month - the month of the new date
53287   * @returns {Date} the new date with the month set
53288   * @throws {TypeError} 2 arguments required
53289   *
53290   * @example
53291   * // Set February to 1 September 2014:
53292   * const result = setMonth(new Date(2014, 8, 1), 1)
53293   * //=> Sat Feb 01 2014 00:00:00
53294   */
53295  
53296  function setMonth(dirtyDate, dirtyMonth) {
53297    requiredArgs(2, arguments);
53298    var date = toDate(dirtyDate);
53299    var month = toInteger(dirtyMonth);
53300    var year = date.getFullYear();
53301    var day = date.getDate();
53302    var dateWithDesiredMonth = new Date(0);
53303    dateWithDesiredMonth.setFullYear(year, month, 15);
53304    dateWithDesiredMonth.setHours(0, 0, 0, 0);
53305    var daysInMonth = getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month
53306    // if the original date was the last day of the longer month
53307  
53308    date.setMonth(month, Math.min(day, daysInMonth));
53309    return date;
53310  }
53311  
53312  /**
53313   * @name set
53314   * @category Common Helpers
53315   * @summary Set date values to a given date.
53316   *
53317   * @description
53318   * Set date values to a given date.
53319   *
53320   * Sets time values to date from object `values`.
53321   * A value is not set if it is undefined or null or doesn't exist in `values`.
53322   *
53323   * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
53324   * to use native `Date#setX` methods. If you use this function, you may not want to include the
53325   * other `setX` functions that date-fns provides if you are concerned about the bundle size.
53326   *
53327   * @param {Date|Number} date - the date to be changed
53328   * @param {Object} values - an object with options
53329   * @param {Number} [values.year] - the number of years to be set
53330   * @param {Number} [values.month] - the number of months to be set
53331   * @param {Number} [values.date] - the number of days to be set
53332   * @param {Number} [values.hours] - the number of hours to be set
53333   * @param {Number} [values.minutes] - the number of minutes to be set
53334   * @param {Number} [values.seconds] - the number of seconds to be set
53335   * @param {Number} [values.milliseconds] - the number of milliseconds to be set
53336   * @returns {Date} the new date with options set
53337   * @throws {TypeError} 2 arguments required
53338   * @throws {RangeError} `values` must be an object
53339   *
53340   * @example
53341   * // Transform 1 September 2014 into 20 October 2015 in a single line:
53342   * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
53343   * //=> Tue Oct 20 2015 00:00:00
53344   *
53345   * @example
53346   * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
53347   * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
53348   * //=> Mon Sep 01 2014 12:23:45
53349   */
53350  function set(dirtyDate, values) {
53351    requiredArgs(2, arguments);
53352  
53353    if (typeof values !== 'object' || values === null) {
53354      throw new RangeError('values parameter must be an object');
53355    }
53356  
53357    var date = toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
53358  
53359    if (isNaN(date.getTime())) {
53360      return new Date(NaN);
53361    }
53362  
53363    if (values.year != null) {
53364      date.setFullYear(values.year);
53365    }
53366  
53367    if (values.month != null) {
53368      date = setMonth(date, values.month);
53369    }
53370  
53371    if (values.date != null) {
53372      date.setDate(toInteger(values.date));
53373    }
53374  
53375    if (values.hours != null) {
53376      date.setHours(toInteger(values.hours));
53377    }
53378  
53379    if (values.minutes != null) {
53380      date.setMinutes(toInteger(values.minutes));
53381    }
53382  
53383    if (values.seconds != null) {
53384      date.setSeconds(toInteger(values.seconds));
53385    }
53386  
53387    if (values.milliseconds != null) {
53388      date.setMilliseconds(toInteger(values.milliseconds));
53389    }
53390  
53391    return date;
53392  }
53393  
53394  /**
53395   * @name setYear
53396   * @category Year Helpers
53397   * @summary Set the year to the given date.
53398   *
53399   * @description
53400   * Set the year to the given date.
53401   *
53402   * @param {Date|Number} date - the date to be changed
53403   * @param {Number} year - the year of the new date
53404   * @returns {Date} the new date with the year set
53405   * @throws {TypeError} 2 arguments required
53406   *
53407   * @example
53408   * // Set year 2013 to 1 September 2014:
53409   * const result = setYear(new Date(2014, 8, 1), 2013)
53410   * //=> Sun Sep 01 2013 00:00:00
53411   */
53412  
53413  function setYear(dirtyDate, dirtyYear) {
53414    requiredArgs(2, arguments);
53415    var date = toDate(dirtyDate);
53416    var year = toInteger(dirtyYear); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
53417  
53418    if (isNaN(date.getTime())) {
53419      return new Date(NaN);
53420    }
53421  
53422    date.setFullYear(year);
53423    return date;
53424  }
53425  
53426  /**
53427   * @name startOfToday
53428   * @category Day Helpers
53429   * @summary Return the start of today.
53430   * @pure false
53431   *
53432   * @description
53433   * Return the start of today.
53434   *
53435   * > ⚠️ Please note that this function is not present in the FP submodule as
53436   * > it uses `Date.now()` internally hence impure and can't be safely curried.
53437   *
53438   * @returns {Date} the start of today
53439   *
53440   * @example
53441   * // If today is 6 October 2014:
53442   * const result = startOfToday()
53443   * //=> Mon Oct 6 2014 00:00:00
53444   */
53445  
53446  function startOfToday() {
53447    return startOfDay(Date.now());
53448  }
53449  
53450  /**
53451   * @name subMonths
53452   * @category Month Helpers
53453   * @summary Subtract the specified number of months from the given date.
53454   *
53455   * @description
53456   * Subtract the specified number of months from the given date.
53457   *
53458   * @param {Date|Number} date - the date to be changed
53459   * @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`.
53460   * @returns {Date} the new date with the months subtracted
53461   * @throws {TypeError} 2 arguments required
53462   *
53463   * @example
53464   * // Subtract 5 months from 1 February 2015:
53465   * const result = subMonths(new Date(2015, 1, 1), 5)
53466   * //=> Mon Sep 01 2014 00:00:00
53467   */
53468  
53469  function subMonths(dirtyDate, dirtyAmount) {
53470    requiredArgs(2, arguments);
53471    var amount = toInteger(dirtyAmount);
53472    return addMonths(dirtyDate, -amount);
53473  }
53474  
53475  /**
53476   * @name subYears
53477   * @category Year Helpers
53478   * @summary Subtract the specified number of years from the given date.
53479   *
53480   * @description
53481   * Subtract the specified number of years from the given date.
53482   *
53483   * @param {Date|Number} date - the date to be changed
53484   * @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`.
53485   * @returns {Date} the new date with the years subtracted
53486   * @throws {TypeError} 2 arguments required
53487   *
53488   * @example
53489   * // Subtract 5 years from 1 September 2014:
53490   * const result = subYears(new Date(2014, 8, 1), 5)
53491   * //=> Tue Sep 01 2009 00:00:00
53492   */
53493  
53494  function subYears(dirtyDate, dirtyAmount) {
53495    requiredArgs(2, arguments);
53496    var amount = toInteger(dirtyAmount);
53497    return addYears(dirtyDate, -amount);
53498  }
53499  
53500  var Month;
53501  (function (Month) {
53502      Month[Month["JANUARY"] = 0] = "JANUARY";
53503      Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
53504      Month[Month["MARCH"] = 2] = "MARCH";
53505      Month[Month["APRIL"] = 3] = "APRIL";
53506      Month[Month["MAY"] = 4] = "MAY";
53507      Month[Month["JUNE"] = 5] = "JUNE";
53508      Month[Month["JULY"] = 6] = "JULY";
53509      Month[Month["AUGUST"] = 7] = "AUGUST";
53510      Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER";
53511      Month[Month["OCTOBER"] = 9] = "OCTOBER";
53512      Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
53513      Month[Month["DECEMBER"] = 11] = "DECEMBER";
53514  })(Month || (Month = {}));
53515  var Day;
53516  (function (Day) {
53517      Day[Day["SUNDAY"] = 0] = "SUNDAY";
53518      Day[Day["MONDAY"] = 1] = "MONDAY";
53519      Day[Day["TUESDAY"] = 2] = "TUESDAY";
53520      Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
53521      Day[Day["THURSDAY"] = 4] = "THURSDAY";
53522      Day[Day["FRIDAY"] = 5] = "FRIDAY";
53523      Day[Day["SATURDAY"] = 6] = "SATURDAY";
53524  })(Day || (Day = {}));
53525  var inRange = function (date, min, max) {
53526      return (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max));
53527  };
53528  var clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); };
53529  var useLilius = function (_a) {
53530      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;
53531      var _g = (0,external_React_.useState)(initialViewing), viewing = _g[0], setViewing = _g[1];
53532      var viewToday = (0,external_React_.useCallback)(function () { return setViewing(startOfToday()); }, [setViewing]);
53533      var viewMonth = (0,external_React_.useCallback)(function (month) { return setViewing(function (v) { return setMonth(v, month); }); }, []);
53534      var viewPreviousMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subMonths(v, 1); }); }, []);
53535      var viewNextMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addMonths(v, 1); }); }, []);
53536      var viewYear = (0,external_React_.useCallback)(function (year) { return setViewing(function (v) { return setYear(v, year); }); }, []);
53537      var viewPreviousYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subYears(v, 1); }); }, []);
53538      var viewNextYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addYears(v, 1); }); }, []);
53539      var _h = (0,external_React_.useState)(initialSelected.map(clearTime)), selected = _h[0], setSelected = _h[1];
53540      var clearSelected = function () { return setSelected([]); };
53541      var isSelected = (0,external_React_.useCallback)(function (date) { return selected.findIndex(function (s) { return isEqual(s, date); }) > -1; }, [selected]);
53542      var select = (0,external_React_.useCallback)(function (date, replaceExisting) {
53543          if (replaceExisting) {
53544              setSelected(Array.isArray(date) ? date : [date]);
53545          }
53546          else {
53547              setSelected(function (selectedItems) { return selectedItems.concat(Array.isArray(date) ? date : [date]); });
53548          }
53549      }, []);
53550      var deselect = (0,external_React_.useCallback)(function (date) {
53551          return setSelected(function (selectedItems) {
53552              return Array.isArray(date)
53553                  ? selectedItems.filter(function (s) { return !date.map(function (d) { return d.getTime(); }).includes(s.getTime()); })
53554                  : selectedItems.filter(function (s) { return !isEqual(s, date); });
53555          });
53556      }, []);
53557      var toggle = (0,external_React_.useCallback)(function (date, replaceExisting) { return (isSelected(date) ? deselect(date) : select(date, replaceExisting)); }, [deselect, isSelected, select]);
53558      var selectRange = (0,external_React_.useCallback)(function (start, end, replaceExisting) {
53559          if (replaceExisting) {
53560              setSelected(eachDayOfInterval({ start: start, end: end }));
53561          }
53562          else {
53563              setSelected(function (selectedItems) { return selectedItems.concat(eachDayOfInterval({ start: start, end: end })); });
53564          }
53565      }, []);
53566      var deselectRange = (0,external_React_.useCallback)(function (start, end) {
53567          setSelected(function (selectedItems) {
53568              return selectedItems.filter(function (s) {
53569                  return !eachDayOfInterval({ start: start, end: end })
53570                      .map(function (d) { return d.getTime(); })
53571                      .includes(s.getTime());
53572              });
53573          });
53574      }, []);
53575      var calendar = (0,external_React_.useMemo)(function () {
53576          return eachMonthOfInterval({
53577              start: startOfMonth(viewing),
53578              end: endOfMonth(addMonths(viewing, numberOfMonths - 1)),
53579          }).map(function (month) {
53580              return eachWeekOfInterval({
53581                  start: startOfMonth(month),
53582                  end: endOfMonth(month),
53583              }, { weekStartsOn: weekStartsOn }).map(function (week) {
53584                  return eachDayOfInterval({
53585                      start: startOfWeek(week, { weekStartsOn: weekStartsOn }),
53586                      end: endOfWeek(week, { weekStartsOn: weekStartsOn }),
53587                  });
53588              });
53589          });
53590      }, [viewing, weekStartsOn, numberOfMonths]);
53591      return {
53592          clearTime: clearTime,
53593          inRange: inRange,
53594          viewing: viewing,
53595          setViewing: setViewing,
53596          viewToday: viewToday,
53597          viewMonth: viewMonth,
53598          viewPreviousMonth: viewPreviousMonth,
53599          viewNextMonth: viewNextMonth,
53600          viewYear: viewYear,
53601          viewPreviousYear: viewPreviousYear,
53602          viewNextYear: viewNextYear,
53603          selected: selected,
53604          setSelected: setSelected,
53605          clearSelected: clearSelected,
53606          isSelected: isSelected,
53607          select: select,
53608          deselect: deselect,
53609          toggle: toggle,
53610          selectRange: selectRange,
53611          deselectRange: deselectRange,
53612          calendar: calendar,
53613      };
53614  };
53615  
53616  
53617  
53618  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/requiredArgs/index.js
53619  function requiredArgs_requiredArgs(required, args) {
53620    if (args.length < required) {
53621      throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
53622    }
53623  }
53624  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/toDate/index.js
53625  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
53626  
53627  
53628  /**
53629   * @name toDate
53630   * @category Common Helpers
53631   * @summary Convert the given argument to an instance of Date.
53632   *
53633   * @description
53634   * Convert the given argument to an instance of Date.
53635   *
53636   * If the argument is an instance of Date, the function returns its clone.
53637   *
53638   * If the argument is a number, it is treated as a timestamp.
53639   *
53640   * If the argument is none of the above, the function returns Invalid Date.
53641   *
53642   * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
53643   *
53644   * @param {Date|Number} argument - the value to convert
53645   * @returns {Date} the parsed date in the local time zone
53646   * @throws {TypeError} 1 argument required
53647   *
53648   * @example
53649   * // Clone the date:
53650   * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
53651   * //=> Tue Feb 11 2014 11:30:30
53652   *
53653   * @example
53654   * // Convert the timestamp to date:
53655   * const result = toDate(1392098430000)
53656   * //=> Tue Feb 11 2014 11:30:30
53657   */
53658  
53659  function toDate_toDate(argument) {
53660    requiredArgs_requiredArgs(1, arguments);
53661    var argStr = Object.prototype.toString.call(argument); // Clone the date
53662  
53663    if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
53664      // Prevent the date to lose the milliseconds when passed to new Date() in IE10
53665      return new Date(argument.getTime());
53666    } else if (typeof argument === 'number' || argStr === '[object Number]') {
53667      return new Date(argument);
53668    } else {
53669      if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
53670        // eslint-disable-next-line no-console
53671        console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); // eslint-disable-next-line no-console
53672  
53673        console.warn(new Error().stack);
53674      }
53675  
53676      return new Date(NaN);
53677    }
53678  }
53679  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfDay/index.js
53680  
53681  
53682  /**
53683   * @name startOfDay
53684   * @category Day Helpers
53685   * @summary Return the start of a day for the given date.
53686   *
53687   * @description
53688   * Return the start of a day for the given date.
53689   * The result will be in the local timezone.
53690   *
53691   * @param {Date|Number} date - the original date
53692   * @returns {Date} the start of a day
53693   * @throws {TypeError} 1 argument required
53694   *
53695   * @example
53696   * // The start of a day for 2 September 2014 11:55:00:
53697   * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
53698   * //=> Tue Sep 02 2014 00:00:00
53699   */
53700  
53701  function startOfDay_startOfDay(dirtyDate) {
53702    requiredArgs_requiredArgs(1, arguments);
53703    var date = toDate_toDate(dirtyDate);
53704    date.setHours(0, 0, 0, 0);
53705    return date;
53706  }
53707  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/toInteger/index.js
53708  function toInteger_toInteger(dirtyNumber) {
53709    if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
53710      return NaN;
53711    }
53712  
53713    var number = Number(dirtyNumber);
53714  
53715    if (isNaN(number)) {
53716      return number;
53717    }
53718  
53719    return number < 0 ? Math.ceil(number) : Math.floor(number);
53720  }
53721  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMonths/index.js
53722  
53723  
53724  
53725  /**
53726   * @name addMonths
53727   * @category Month Helpers
53728   * @summary Add the specified number of months to the given date.
53729   *
53730   * @description
53731   * Add the specified number of months to the given date.
53732   *
53733   * @param {Date|Number} date - the date to be changed
53734   * @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`.
53735   * @returns {Date} the new date with the months added
53736   * @throws {TypeError} 2 arguments required
53737   *
53738   * @example
53739   * // Add 5 months to 1 September 2014:
53740   * const result = addMonths(new Date(2014, 8, 1), 5)
53741   * //=> Sun Feb 01 2015 00:00:00
53742   */
53743  
53744  function addMonths_addMonths(dirtyDate, dirtyAmount) {
53745    requiredArgs_requiredArgs(2, arguments);
53746    var date = toDate_toDate(dirtyDate);
53747    var amount = toInteger_toInteger(dirtyAmount);
53748  
53749    if (isNaN(amount)) {
53750      return new Date(NaN);
53751    }
53752  
53753    if (!amount) {
53754      // If 0 months, no-op to avoid changing times in the hour before end of DST
53755      return date;
53756    }
53757  
53758    var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for
53759    // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
53760    // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
53761    // want except that dates will wrap around the end of a month, meaning that
53762    // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
53763    // we'll default to the end of the desired month by adding 1 to the desired
53764    // month and using a date of 0 to back up one day to the end of the desired
53765    // month.
53766  
53767    var endOfDesiredMonth = new Date(date.getTime());
53768    endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
53769    var daysInMonth = endOfDesiredMonth.getDate();
53770  
53771    if (dayOfMonth >= daysInMonth) {
53772      // If we're already at the end of the month, then this is the correct date
53773      // and we're done.
53774      return endOfDesiredMonth;
53775    } else {
53776      // Otherwise, we now know that setting the original day-of-month value won't
53777      // cause an overflow, so set the desired day-of-month. Note that we can't
53778      // just set the date of `endOfDesiredMonth` because that object may have had
53779      // its time changed in the unusual case where where a DST transition was on
53780      // the last day of the month and its local time was in the hour skipped or
53781      // repeated next to a DST transition.  So we use `date` instead which is
53782      // guaranteed to still have the original time.
53783      date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
53784      return date;
53785    }
53786  }
53787  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMonths/index.js
53788  
53789  
53790  
53791  /**
53792   * @name subMonths
53793   * @category Month Helpers
53794   * @summary Subtract the specified number of months from the given date.
53795   *
53796   * @description
53797   * Subtract the specified number of months from the given date.
53798   *
53799   * @param {Date|Number} date - the date to be changed
53800   * @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`.
53801   * @returns {Date} the new date with the months subtracted
53802   * @throws {TypeError} 2 arguments required
53803   *
53804   * @example
53805   * // Subtract 5 months from 1 February 2015:
53806   * const result = subMonths(new Date(2015, 1, 1), 5)
53807   * //=> Mon Sep 01 2014 00:00:00
53808   */
53809  
53810  function subMonths_subMonths(dirtyDate, dirtyAmount) {
53811    requiredArgs_requiredArgs(2, arguments);
53812    var amount = toInteger_toInteger(dirtyAmount);
53813    return addMonths_addMonths(dirtyDate, -amount);
53814  }
53815  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isDate/index.js
53816  function isDate_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { isDate_typeof = function _typeof(obj) { return typeof obj; }; } else { isDate_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return isDate_typeof(obj); }
53817  
53818  
53819  /**
53820   * @name isDate
53821   * @category Common Helpers
53822   * @summary Is the given value a date?
53823   *
53824   * @description
53825   * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
53826   *
53827   * @param {*} value - the value to check
53828   * @returns {boolean} true if the given value is a date
53829   * @throws {TypeError} 1 arguments required
53830   *
53831   * @example
53832   * // For a valid date:
53833   * const result = isDate(new Date())
53834   * //=> true
53835   *
53836   * @example
53837   * // For an invalid date:
53838   * const result = isDate(new Date(NaN))
53839   * //=> true
53840   *
53841   * @example
53842   * // For some value:
53843   * const result = isDate('2014-02-31')
53844   * //=> false
53845   *
53846   * @example
53847   * // For an object:
53848   * const result = isDate({})
53849   * //=> false
53850   */
53851  
53852  function isDate(value) {
53853    requiredArgs_requiredArgs(1, arguments);
53854    return value instanceof Date || isDate_typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
53855  }
53856  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isValid/index.js
53857  
53858  
53859  
53860  /**
53861   * @name isValid
53862   * @category Common Helpers
53863   * @summary Is the given date valid?
53864   *
53865   * @description
53866   * Returns false if argument is Invalid Date and true otherwise.
53867   * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
53868   * Invalid Date is a Date, whose time value is NaN.
53869   *
53870   * Time value of Date: http://es5.github.io/#x15.9.1.1
53871   *
53872   * @param {*} date - the date to check
53873   * @returns {Boolean} the date is valid
53874   * @throws {TypeError} 1 argument required
53875   *
53876   * @example
53877   * // For the valid date:
53878   * const result = isValid(new Date(2014, 1, 31))
53879   * //=> true
53880   *
53881   * @example
53882   * // For the value, convertable into a date:
53883   * const result = isValid(1393804800000)
53884   * //=> true
53885   *
53886   * @example
53887   * // For the invalid date:
53888   * const result = isValid(new Date(''))
53889   * //=> false
53890   */
53891  
53892  function isValid(dirtyDate) {
53893    requiredArgs_requiredArgs(1, arguments);
53894  
53895    if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
53896      return false;
53897    }
53898  
53899    var date = toDate_toDate(dirtyDate);
53900    return !isNaN(Number(date));
53901  }
53902  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMilliseconds/index.js
53903  
53904  
53905  
53906  /**
53907   * @name addMilliseconds
53908   * @category Millisecond Helpers
53909   * @summary Add the specified number of milliseconds to the given date.
53910   *
53911   * @description
53912   * Add the specified number of milliseconds to the given date.
53913   *
53914   * @param {Date|Number} date - the date to be changed
53915   * @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`.
53916   * @returns {Date} the new date with the milliseconds added
53917   * @throws {TypeError} 2 arguments required
53918   *
53919   * @example
53920   * // Add 750 milliseconds to 10 July 2014 12:45:30.000:
53921   * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
53922   * //=> Thu Jul 10 2014 12:45:30.750
53923   */
53924  
53925  function addMilliseconds(dirtyDate, dirtyAmount) {
53926    requiredArgs_requiredArgs(2, arguments);
53927    var timestamp = toDate_toDate(dirtyDate).getTime();
53928    var amount = toInteger_toInteger(dirtyAmount);
53929    return new Date(timestamp + amount);
53930  }
53931  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMilliseconds/index.js
53932  
53933  
53934  
53935  /**
53936   * @name subMilliseconds
53937   * @category Millisecond Helpers
53938   * @summary Subtract the specified number of milliseconds from the given date.
53939   *
53940   * @description
53941   * Subtract the specified number of milliseconds from the given date.
53942   *
53943   * @param {Date|Number} date - the date to be changed
53944   * @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`.
53945   * @returns {Date} the new date with the milliseconds subtracted
53946   * @throws {TypeError} 2 arguments required
53947   *
53948   * @example
53949   * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000:
53950   * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
53951   * //=> Thu Jul 10 2014 12:45:29.250
53952   */
53953  
53954  function subMilliseconds(dirtyDate, dirtyAmount) {
53955    requiredArgs_requiredArgs(2, arguments);
53956    var amount = toInteger_toInteger(dirtyAmount);
53957    return addMilliseconds(dirtyDate, -amount);
53958  }
53959  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCDayOfYear/index.js
53960  
53961  
53962  var MILLISECONDS_IN_DAY = 86400000;
53963  function getUTCDayOfYear(dirtyDate) {
53964    requiredArgs_requiredArgs(1, arguments);
53965    var date = toDate_toDate(dirtyDate);
53966    var timestamp = date.getTime();
53967    date.setUTCMonth(0, 1);
53968    date.setUTCHours(0, 0, 0, 0);
53969    var startOfYearTimestamp = date.getTime();
53970    var difference = timestamp - startOfYearTimestamp;
53971    return Math.floor(difference / MILLISECONDS_IN_DAY) + 1;
53972  }
53973  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeek/index.js
53974  
53975  
53976  function startOfUTCISOWeek(dirtyDate) {
53977    requiredArgs_requiredArgs(1, arguments);
53978    var weekStartsOn = 1;
53979    var date = toDate_toDate(dirtyDate);
53980    var day = date.getUTCDay();
53981    var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
53982    date.setUTCDate(date.getUTCDate() - diff);
53983    date.setUTCHours(0, 0, 0, 0);
53984    return date;
53985  }
53986  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeekYear/index.js
53987  
53988  
53989  
53990  function getUTCISOWeekYear(dirtyDate) {
53991    requiredArgs_requiredArgs(1, arguments);
53992    var date = toDate_toDate(dirtyDate);
53993    var year = date.getUTCFullYear();
53994    var fourthOfJanuaryOfNextYear = new Date(0);
53995    fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4);
53996    fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0);
53997    var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear);
53998    var fourthOfJanuaryOfThisYear = new Date(0);
53999    fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4);
54000    fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0);
54001    var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear);
54002  
54003    if (date.getTime() >= startOfNextYear.getTime()) {
54004      return year + 1;
54005    } else if (date.getTime() >= startOfThisYear.getTime()) {
54006      return year;
54007    } else {
54008      return year - 1;
54009    }
54010  }
54011  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeekYear/index.js
54012  
54013  
54014  
54015  function startOfUTCISOWeekYear(dirtyDate) {
54016    requiredArgs_requiredArgs(1, arguments);
54017    var year = getUTCISOWeekYear(dirtyDate);
54018    var fourthOfJanuary = new Date(0);
54019    fourthOfJanuary.setUTCFullYear(year, 0, 4);
54020    fourthOfJanuary.setUTCHours(0, 0, 0, 0);
54021    var date = startOfUTCISOWeek(fourthOfJanuary);
54022    return date;
54023  }
54024  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeek/index.js
54025  
54026  
54027  
54028  
54029  var MILLISECONDS_IN_WEEK = 604800000;
54030  function getUTCISOWeek(dirtyDate) {
54031    requiredArgs_requiredArgs(1, arguments);
54032    var date = toDate_toDate(dirtyDate);
54033    var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime(); // Round the number of days to the nearest integer
54034    // because the number of milliseconds in a week is not constant
54035    // (e.g. it's different in the week of the daylight saving time clock shift)
54036  
54037    return Math.round(diff / MILLISECONDS_IN_WEEK) + 1;
54038  }
54039  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultOptions/index.js
54040  var defaultOptions_defaultOptions = {};
54041  function defaultOptions_getDefaultOptions() {
54042    return defaultOptions_defaultOptions;
54043  }
54044  function setDefaultOptions(newOptions) {
54045    defaultOptions_defaultOptions = newOptions;
54046  }
54047  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeek/index.js
54048  
54049  
54050  
54051  
54052  function startOfUTCWeek(dirtyDate, options) {
54053    var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
54054  
54055    requiredArgs_requiredArgs(1, arguments);
54056    var defaultOptions = defaultOptions_getDefaultOptions();
54057    var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
54058  
54059    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
54060      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
54061    }
54062  
54063    var date = toDate_toDate(dirtyDate);
54064    var day = date.getUTCDay();
54065    var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
54066    date.setUTCDate(date.getUTCDate() - diff);
54067    date.setUTCHours(0, 0, 0, 0);
54068    return date;
54069  }
54070  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeekYear/index.js
54071  
54072  
54073  
54074  
54075  
54076  function getUTCWeekYear(dirtyDate, options) {
54077    var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
54078  
54079    requiredArgs_requiredArgs(1, arguments);
54080    var date = toDate_toDate(dirtyDate);
54081    var year = date.getUTCFullYear();
54082    var defaultOptions = defaultOptions_getDefaultOptions();
54083    var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
54084  
54085    if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
54086      throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
54087    }
54088  
54089    var firstWeekOfNextYear = new Date(0);
54090    firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);
54091    firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);
54092    var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options);
54093    var firstWeekOfThisYear = new Date(0);
54094    firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);
54095    firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);
54096    var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options);
54097  
54098    if (date.getTime() >= startOfNextYear.getTime()) {
54099      return year + 1;
54100    } else if (date.getTime() >= startOfThisYear.getTime()) {
54101      return year;
54102    } else {
54103      return year - 1;
54104    }
54105  }
54106  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeekYear/index.js
54107  
54108  
54109  
54110  
54111  
54112  function startOfUTCWeekYear(dirtyDate, options) {
54113    var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
54114  
54115    requiredArgs_requiredArgs(1, arguments);
54116    var defaultOptions = defaultOptions_getDefaultOptions();
54117    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);
54118    var year = getUTCWeekYear(dirtyDate, options);
54119    var firstWeek = new Date(0);
54120    firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate);
54121    firstWeek.setUTCHours(0, 0, 0, 0);
54122    var date = startOfUTCWeek(firstWeek, options);
54123    return date;
54124  }
54125  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeek/index.js
54126  
54127  
54128  
54129  
54130  var getUTCWeek_MILLISECONDS_IN_WEEK = 604800000;
54131  function getUTCWeek(dirtyDate, options) {
54132    requiredArgs_requiredArgs(1, arguments);
54133    var date = toDate_toDate(dirtyDate);
54134    var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime(); // Round the number of days to the nearest integer
54135    // because the number of milliseconds in a week is not constant
54136    // (e.g. it's different in the week of the daylight saving time clock shift)
54137  
54138    return Math.round(diff / getUTCWeek_MILLISECONDS_IN_WEEK) + 1;
54139  }
54140  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/addLeadingZeros/index.js
54141  function addLeadingZeros(number, targetLength) {
54142    var sign = number < 0 ? '-' : '';
54143    var output = Math.abs(number).toString();
54144  
54145    while (output.length < targetLength) {
54146      output = '0' + output;
54147    }
54148  
54149    return sign + output;
54150  }
54151  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/lightFormatters/index.js
54152  
54153  /*
54154   * |     | Unit                           |     | Unit                           |
54155   * |-----|--------------------------------|-----|--------------------------------|
54156   * |  a  | AM, PM                         |  A* |                                |
54157   * |  d  | Day of month                   |  D  |                                |
54158   * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
54159   * |  m  | Minute                         |  M  | Month                          |
54160   * |  s  | Second                         |  S  | Fraction of second             |
54161   * |  y  | Year (abs)                     |  Y  |                                |
54162   *
54163   * Letters marked by * are not implemented but reserved by Unicode standard.
54164   */
54165  
54166  var formatters = {
54167    // Year
54168    y: function y(date, token) {
54169      // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens
54170      // | Year     |     y | yy |   yyy |  yyyy | yyyyy |
54171      // |----------|-------|----|-------|-------|-------|
54172      // | AD 1     |     1 | 01 |   001 |  0001 | 00001 |
54173      // | AD 12    |    12 | 12 |   012 |  0012 | 00012 |
54174      // | AD 123   |   123 | 23 |   123 |  0123 | 00123 |
54175      // | AD 1234  |  1234 | 34 |  1234 |  1234 | 01234 |
54176      // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 |
54177      var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript)
54178  
54179      var year = signedYear > 0 ? signedYear : 1 - signedYear;
54180      return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length);
54181    },
54182    // Month
54183    M: function M(date, token) {
54184      var month = date.getUTCMonth();
54185      return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2);
54186    },
54187    // Day of the month
54188    d: function d(date, token) {
54189      return addLeadingZeros(date.getUTCDate(), token.length);
54190    },
54191    // AM or PM
54192    a: function a(date, token) {
54193      var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am';
54194  
54195      switch (token) {
54196        case 'a':
54197        case 'aa':
54198          return dayPeriodEnumValue.toUpperCase();
54199  
54200        case 'aaa':
54201          return dayPeriodEnumValue;
54202  
54203        case 'aaaaa':
54204          return dayPeriodEnumValue[0];
54205  
54206        case 'aaaa':
54207        default:
54208          return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.';
54209      }
54210    },
54211    // Hour [1-12]
54212    h: function h(date, token) {
54213      return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length);
54214    },
54215    // Hour [0-23]
54216    H: function H(date, token) {
54217      return addLeadingZeros(date.getUTCHours(), token.length);
54218    },
54219    // Minute
54220    m: function m(date, token) {
54221      return addLeadingZeros(date.getUTCMinutes(), token.length);
54222    },
54223    // Second
54224    s: function s(date, token) {
54225      return addLeadingZeros(date.getUTCSeconds(), token.length);
54226    },
54227    // Fraction of second
54228    S: function S(date, token) {
54229      var numberOfDigits = token.length;
54230      var milliseconds = date.getUTCMilliseconds();
54231      var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3));
54232      return addLeadingZeros(fractionalSeconds, token.length);
54233    }
54234  };
54235  /* harmony default export */ const lightFormatters = (formatters);
54236  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/formatters/index.js
54237  
54238  
54239  
54240  
54241  
54242  
54243  
54244  var dayPeriodEnum = {
54245    am: 'am',
54246    pm: 'pm',
54247    midnight: 'midnight',
54248    noon: 'noon',
54249    morning: 'morning',
54250    afternoon: 'afternoon',
54251    evening: 'evening',
54252    night: 'night'
54253  };
54254  
54255  /*
54256   * |     | Unit                           |     | Unit                           |
54257   * |-----|--------------------------------|-----|--------------------------------|
54258   * |  a  | AM, PM                         |  A* | Milliseconds in day            |
54259   * |  b  | AM, PM, noon, midnight         |  B  | Flexible day period            |
54260   * |  c  | Stand-alone local day of week  |  C* | Localized hour w/ day period   |
54261   * |  d  | Day of month                   |  D  | Day of year                    |
54262   * |  e  | Local day of week              |  E  | Day of week                    |
54263   * |  f  |                                |  F* | Day of week in month           |
54264   * |  g* | Modified Julian day            |  G  | Era                            |
54265   * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
54266   * |  i! | ISO day of week                |  I! | ISO week of year               |
54267   * |  j* | Localized hour w/ day period   |  J* | Localized hour w/o day period  |
54268   * |  k  | Hour [1-24]                    |  K  | Hour [0-11]                    |
54269   * |  l* | (deprecated)                   |  L  | Stand-alone month              |
54270   * |  m  | Minute                         |  M  | Month                          |
54271   * |  n  |                                |  N  |                                |
54272   * |  o! | Ordinal number modifier        |  O  | Timezone (GMT)                 |
54273   * |  p! | Long localized time            |  P! | Long localized date            |
54274   * |  q  | Stand-alone quarter            |  Q  | Quarter                        |
54275   * |  r* | Related Gregorian year         |  R! | ISO week-numbering year        |
54276   * |  s  | Second                         |  S  | Fraction of second             |
54277   * |  t! | Seconds timestamp              |  T! | Milliseconds timestamp         |
54278   * |  u  | Extended year                  |  U* | Cyclic year                    |
54279   * |  v* | Timezone (generic non-locat.)  |  V* | Timezone (location)            |
54280   * |  w  | Local week of year             |  W* | Week of month                  |
54281   * |  x  | Timezone (ISO-8601 w/o Z)      |  X  | Timezone (ISO-8601)            |
54282   * |  y  | Year (abs)                     |  Y  | Local week-numbering year      |
54283   * |  z  | Timezone (specific non-locat.) |  Z* | Timezone (aliases)             |
54284   *
54285   * Letters marked by * are not implemented but reserved by Unicode standard.
54286   *
54287   * Letters marked by ! are non-standard, but implemented by date-fns:
54288   * - `o` modifies the previous token to turn it into an ordinal (see `format` docs)
54289   * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days,
54290   *   i.e. 7 for Sunday, 1 for Monday, etc.
54291   * - `I` is ISO week of year, as opposed to `w` which is local week of year.
54292   * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year.
54293   *   `R` is supposed to be used in conjunction with `I` and `i`
54294   *   for universal ISO week-numbering date, whereas
54295   *   `Y` is supposed to be used in conjunction with `w` and `e`
54296   *   for week-numbering date specific to the locale.
54297   * - `P` is long localized date format
54298   * - `p` is long localized time format
54299   */
54300  var formatters_formatters = {
54301    // Era
54302    G: function G(date, token, localize) {
54303      var era = date.getUTCFullYear() > 0 ? 1 : 0;
54304  
54305      switch (token) {
54306        // AD, BC
54307        case 'G':
54308        case 'GG':
54309        case 'GGG':
54310          return localize.era(era, {
54311            width: 'abbreviated'
54312          });
54313        // A, B
54314  
54315        case 'GGGGG':
54316          return localize.era(era, {
54317            width: 'narrow'
54318          });
54319        // Anno Domini, Before Christ
54320  
54321        case 'GGGG':
54322        default:
54323          return localize.era(era, {
54324            width: 'wide'
54325          });
54326      }
54327    },
54328    // Year
54329    y: function y(date, token, localize) {
54330      // Ordinal number
54331      if (token === 'yo') {
54332        var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript)
54333  
54334        var year = signedYear > 0 ? signedYear : 1 - signedYear;
54335        return localize.ordinalNumber(year, {
54336          unit: 'year'
54337        });
54338      }
54339  
54340      return lightFormatters.y(date, token);
54341    },
54342    // Local week-numbering year
54343    Y: function Y(date, token, localize, options) {
54344      var signedWeekYear = getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript)
54345  
54346      var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; // Two digit year
54347  
54348      if (token === 'YY') {
54349        var twoDigitYear = weekYear % 100;
54350        return addLeadingZeros(twoDigitYear, 2);
54351      } // Ordinal number
54352  
54353  
54354      if (token === 'Yo') {
54355        return localize.ordinalNumber(weekYear, {
54356          unit: 'year'
54357        });
54358      } // Padding
54359  
54360  
54361      return addLeadingZeros(weekYear, token.length);
54362    },
54363    // ISO week-numbering year
54364    R: function R(date, token) {
54365      var isoWeekYear = getUTCISOWeekYear(date); // Padding
54366  
54367      return addLeadingZeros(isoWeekYear, token.length);
54368    },
54369    // Extended year. This is a single number designating the year of this calendar system.
54370    // The main difference between `y` and `u` localizers are B.C. years:
54371    // | Year | `y` | `u` |
54372    // |------|-----|-----|
54373    // | AC 1 |   1 |   1 |
54374    // | BC 1 |   1 |   0 |
54375    // | BC 2 |   2 |  -1 |
54376    // Also `yy` always returns the last two digits of a year,
54377    // while `uu` pads single digit years to 2 characters and returns other years unchanged.
54378    u: function u(date, token) {
54379      var year = date.getUTCFullYear();
54380      return addLeadingZeros(year, token.length);
54381    },
54382    // Quarter
54383    Q: function Q(date, token, localize) {
54384      var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
54385  
54386      switch (token) {
54387        // 1, 2, 3, 4
54388        case 'Q':
54389          return String(quarter);
54390        // 01, 02, 03, 04
54391  
54392        case 'QQ':
54393          return addLeadingZeros(quarter, 2);
54394        // 1st, 2nd, 3rd, 4th
54395  
54396        case 'Qo':
54397          return localize.ordinalNumber(quarter, {
54398            unit: 'quarter'
54399          });
54400        // Q1, Q2, Q3, Q4
54401  
54402        case 'QQQ':
54403          return localize.quarter(quarter, {
54404            width: 'abbreviated',
54405            context: 'formatting'
54406          });
54407        // 1, 2, 3, 4 (narrow quarter; could be not numerical)
54408  
54409        case 'QQQQQ':
54410          return localize.quarter(quarter, {
54411            width: 'narrow',
54412            context: 'formatting'
54413          });
54414        // 1st quarter, 2nd quarter, ...
54415  
54416        case 'QQQQ':
54417        default:
54418          return localize.quarter(quarter, {
54419            width: 'wide',
54420            context: 'formatting'
54421          });
54422      }
54423    },
54424    // Stand-alone quarter
54425    q: function q(date, token, localize) {
54426      var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
54427  
54428      switch (token) {
54429        // 1, 2, 3, 4
54430        case 'q':
54431          return String(quarter);
54432        // 01, 02, 03, 04
54433  
54434        case 'qq':
54435          return addLeadingZeros(quarter, 2);
54436        // 1st, 2nd, 3rd, 4th
54437  
54438        case 'qo':
54439          return localize.ordinalNumber(quarter, {
54440            unit: 'quarter'
54441          });
54442        // Q1, Q2, Q3, Q4
54443  
54444        case 'qqq':
54445          return localize.quarter(quarter, {
54446            width: 'abbreviated',
54447            context: 'standalone'
54448          });
54449        // 1, 2, 3, 4 (narrow quarter; could be not numerical)
54450  
54451        case 'qqqqq':
54452          return localize.quarter(quarter, {
54453            width: 'narrow',
54454            context: 'standalone'
54455          });
54456        // 1st quarter, 2nd quarter, ...
54457  
54458        case 'qqqq':
54459        default:
54460          return localize.quarter(quarter, {
54461            width: 'wide',
54462            context: 'standalone'
54463          });
54464      }
54465    },
54466    // Month
54467    M: function M(date, token, localize) {
54468      var month = date.getUTCMonth();
54469  
54470      switch (token) {
54471        case 'M':
54472        case 'MM':
54473          return lightFormatters.M(date, token);
54474        // 1st, 2nd, ..., 12th
54475  
54476        case 'Mo':
54477          return localize.ordinalNumber(month + 1, {
54478            unit: 'month'
54479          });
54480        // Jan, Feb, ..., Dec
54481  
54482        case 'MMM':
54483          return localize.month(month, {
54484            width: 'abbreviated',
54485            context: 'formatting'
54486          });
54487        // J, F, ..., D
54488  
54489        case 'MMMMM':
54490          return localize.month(month, {
54491            width: 'narrow',
54492            context: 'formatting'
54493          });
54494        // January, February, ..., December
54495  
54496        case 'MMMM':
54497        default:
54498          return localize.month(month, {
54499            width: 'wide',
54500            context: 'formatting'
54501          });
54502      }
54503    },
54504    // Stand-alone month
54505    L: function L(date, token, localize) {
54506      var month = date.getUTCMonth();
54507  
54508      switch (token) {
54509        // 1, 2, ..., 12
54510        case 'L':
54511          return String(month + 1);
54512        // 01, 02, ..., 12
54513  
54514        case 'LL':
54515          return addLeadingZeros(month + 1, 2);
54516        // 1st, 2nd, ..., 12th
54517  
54518        case 'Lo':
54519          return localize.ordinalNumber(month + 1, {
54520            unit: 'month'
54521          });
54522        // Jan, Feb, ..., Dec
54523  
54524        case 'LLL':
54525          return localize.month(month, {
54526            width: 'abbreviated',
54527            context: 'standalone'
54528          });
54529        // J, F, ..., D
54530  
54531        case 'LLLLL':
54532          return localize.month(month, {
54533            width: 'narrow',
54534            context: 'standalone'
54535          });
54536        // January, February, ..., December
54537  
54538        case 'LLLL':
54539        default:
54540          return localize.month(month, {
54541            width: 'wide',
54542            context: 'standalone'
54543          });
54544      }
54545    },
54546    // Local week of year
54547    w: function w(date, token, localize, options) {
54548      var week = getUTCWeek(date, options);
54549  
54550      if (token === 'wo') {
54551        return localize.ordinalNumber(week, {
54552          unit: 'week'
54553        });
54554      }
54555  
54556      return addLeadingZeros(week, token.length);
54557    },
54558    // ISO week of year
54559    I: function I(date, token, localize) {
54560      var isoWeek = getUTCISOWeek(date);
54561  
54562      if (token === 'Io') {
54563        return localize.ordinalNumber(isoWeek, {
54564          unit: 'week'
54565        });
54566      }
54567  
54568      return addLeadingZeros(isoWeek, token.length);
54569    },
54570    // Day of the month
54571    d: function d(date, token, localize) {
54572      if (token === 'do') {
54573        return localize.ordinalNumber(date.getUTCDate(), {
54574          unit: 'date'
54575        });
54576      }
54577  
54578      return lightFormatters.d(date, token);
54579    },
54580    // Day of year
54581    D: function D(date, token, localize) {
54582      var dayOfYear = getUTCDayOfYear(date);
54583  
54584      if (token === 'Do') {
54585        return localize.ordinalNumber(dayOfYear, {
54586          unit: 'dayOfYear'
54587        });
54588      }
54589  
54590      return addLeadingZeros(dayOfYear, token.length);
54591    },
54592    // Day of week
54593    E: function E(date, token, localize) {
54594      var dayOfWeek = date.getUTCDay();
54595  
54596      switch (token) {
54597        // Tue
54598        case 'E':
54599        case 'EE':
54600        case 'EEE':
54601          return localize.day(dayOfWeek, {
54602            width: 'abbreviated',
54603            context: 'formatting'
54604          });
54605        // T
54606  
54607        case 'EEEEE':
54608          return localize.day(dayOfWeek, {
54609            width: 'narrow',
54610            context: 'formatting'
54611          });
54612        // Tu
54613  
54614        case 'EEEEEE':
54615          return localize.day(dayOfWeek, {
54616            width: 'short',
54617            context: 'formatting'
54618          });
54619        // Tuesday
54620  
54621        case 'EEEE':
54622        default:
54623          return localize.day(dayOfWeek, {
54624            width: 'wide',
54625            context: 'formatting'
54626          });
54627      }
54628    },
54629    // Local day of week
54630    e: function e(date, token, localize, options) {
54631      var dayOfWeek = date.getUTCDay();
54632      var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
54633  
54634      switch (token) {
54635        // Numerical value (Nth day of week with current locale or weekStartsOn)
54636        case 'e':
54637          return String(localDayOfWeek);
54638        // Padded numerical value
54639  
54640        case 'ee':
54641          return addLeadingZeros(localDayOfWeek, 2);
54642        // 1st, 2nd, ..., 7th
54643  
54644        case 'eo':
54645          return localize.ordinalNumber(localDayOfWeek, {
54646            unit: 'day'
54647          });
54648  
54649        case 'eee':
54650          return localize.day(dayOfWeek, {
54651            width: 'abbreviated',
54652            context: 'formatting'
54653          });
54654        // T
54655  
54656        case 'eeeee':
54657          return localize.day(dayOfWeek, {
54658            width: 'narrow',
54659            context: 'formatting'
54660          });
54661        // Tu
54662  
54663        case 'eeeeee':
54664          return localize.day(dayOfWeek, {
54665            width: 'short',
54666            context: 'formatting'
54667          });
54668        // Tuesday
54669  
54670        case 'eeee':
54671        default:
54672          return localize.day(dayOfWeek, {
54673            width: 'wide',
54674            context: 'formatting'
54675          });
54676      }
54677    },
54678    // Stand-alone local day of week
54679    c: function c(date, token, localize, options) {
54680      var dayOfWeek = date.getUTCDay();
54681      var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
54682  
54683      switch (token) {
54684        // Numerical value (same as in `e`)
54685        case 'c':
54686          return String(localDayOfWeek);
54687        // Padded numerical value
54688  
54689        case 'cc':
54690          return addLeadingZeros(localDayOfWeek, token.length);
54691        // 1st, 2nd, ..., 7th
54692  
54693        case 'co':
54694          return localize.ordinalNumber(localDayOfWeek, {
54695            unit: 'day'
54696          });
54697  
54698        case 'ccc':
54699          return localize.day(dayOfWeek, {
54700            width: 'abbreviated',
54701            context: 'standalone'
54702          });
54703        // T
54704  
54705        case 'ccccc':
54706          return localize.day(dayOfWeek, {
54707            width: 'narrow',
54708            context: 'standalone'
54709          });
54710        // Tu
54711  
54712        case 'cccccc':
54713          return localize.day(dayOfWeek, {
54714            width: 'short',
54715            context: 'standalone'
54716          });
54717        // Tuesday
54718  
54719        case 'cccc':
54720        default:
54721          return localize.day(dayOfWeek, {
54722            width: 'wide',
54723            context: 'standalone'
54724          });
54725      }
54726    },
54727    // ISO day of week
54728    i: function i(date, token, localize) {
54729      var dayOfWeek = date.getUTCDay();
54730      var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
54731  
54732      switch (token) {
54733        // 2
54734        case 'i':
54735          return String(isoDayOfWeek);
54736        // 02
54737  
54738        case 'ii':
54739          return addLeadingZeros(isoDayOfWeek, token.length);
54740        // 2nd
54741  
54742        case 'io':
54743          return localize.ordinalNumber(isoDayOfWeek, {
54744            unit: 'day'
54745          });
54746        // Tue
54747  
54748        case 'iii':
54749          return localize.day(dayOfWeek, {
54750            width: 'abbreviated',
54751            context: 'formatting'
54752          });
54753        // T
54754  
54755        case 'iiiii':
54756          return localize.day(dayOfWeek, {
54757            width: 'narrow',
54758            context: 'formatting'
54759          });
54760        // Tu
54761  
54762        case 'iiiiii':
54763          return localize.day(dayOfWeek, {
54764            width: 'short',
54765            context: 'formatting'
54766          });
54767        // Tuesday
54768  
54769        case 'iiii':
54770        default:
54771          return localize.day(dayOfWeek, {
54772            width: 'wide',
54773            context: 'formatting'
54774          });
54775      }
54776    },
54777    // AM or PM
54778    a: function a(date, token, localize) {
54779      var hours = date.getUTCHours();
54780      var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
54781  
54782      switch (token) {
54783        case 'a':
54784        case 'aa':
54785          return localize.dayPeriod(dayPeriodEnumValue, {
54786            width: 'abbreviated',
54787            context: 'formatting'
54788          });
54789  
54790        case 'aaa':
54791          return localize.dayPeriod(dayPeriodEnumValue, {
54792            width: 'abbreviated',
54793            context: 'formatting'
54794          }).toLowerCase();
54795  
54796        case 'aaaaa':
54797          return localize.dayPeriod(dayPeriodEnumValue, {
54798            width: 'narrow',
54799            context: 'formatting'
54800          });
54801  
54802        case 'aaaa':
54803        default:
54804          return localize.dayPeriod(dayPeriodEnumValue, {
54805            width: 'wide',
54806            context: 'formatting'
54807          });
54808      }
54809    },
54810    // AM, PM, midnight, noon
54811    b: function b(date, token, localize) {
54812      var hours = date.getUTCHours();
54813      var dayPeriodEnumValue;
54814  
54815      if (hours === 12) {
54816        dayPeriodEnumValue = dayPeriodEnum.noon;
54817      } else if (hours === 0) {
54818        dayPeriodEnumValue = dayPeriodEnum.midnight;
54819      } else {
54820        dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
54821      }
54822  
54823      switch (token) {
54824        case 'b':
54825        case 'bb':
54826          return localize.dayPeriod(dayPeriodEnumValue, {
54827            width: 'abbreviated',
54828            context: 'formatting'
54829          });
54830  
54831        case 'bbb':
54832          return localize.dayPeriod(dayPeriodEnumValue, {
54833            width: 'abbreviated',
54834            context: 'formatting'
54835          }).toLowerCase();
54836  
54837        case 'bbbbb':
54838          return localize.dayPeriod(dayPeriodEnumValue, {
54839            width: 'narrow',
54840            context: 'formatting'
54841          });
54842  
54843        case 'bbbb':
54844        default:
54845          return localize.dayPeriod(dayPeriodEnumValue, {
54846            width: 'wide',
54847            context: 'formatting'
54848          });
54849      }
54850    },
54851    // in the morning, in the afternoon, in the evening, at night
54852    B: function B(date, token, localize) {
54853      var hours = date.getUTCHours();
54854      var dayPeriodEnumValue;
54855  
54856      if (hours >= 17) {
54857        dayPeriodEnumValue = dayPeriodEnum.evening;
54858      } else if (hours >= 12) {
54859        dayPeriodEnumValue = dayPeriodEnum.afternoon;
54860      } else if (hours >= 4) {
54861        dayPeriodEnumValue = dayPeriodEnum.morning;
54862      } else {
54863        dayPeriodEnumValue = dayPeriodEnum.night;
54864      }
54865  
54866      switch (token) {
54867        case 'B':
54868        case 'BB':
54869        case 'BBB':
54870          return localize.dayPeriod(dayPeriodEnumValue, {
54871            width: 'abbreviated',
54872            context: 'formatting'
54873          });
54874  
54875        case 'BBBBB':
54876          return localize.dayPeriod(dayPeriodEnumValue, {
54877            width: 'narrow',
54878            context: 'formatting'
54879          });
54880  
54881        case 'BBBB':
54882        default:
54883          return localize.dayPeriod(dayPeriodEnumValue, {
54884            width: 'wide',
54885            context: 'formatting'
54886          });
54887      }
54888    },
54889    // Hour [1-12]
54890    h: function h(date, token, localize) {
54891      if (token === 'ho') {
54892        var hours = date.getUTCHours() % 12;
54893        if (hours === 0) hours = 12;
54894        return localize.ordinalNumber(hours, {
54895          unit: 'hour'
54896        });
54897      }
54898  
54899      return lightFormatters.h(date, token);
54900    },
54901    // Hour [0-23]
54902    H: function H(date, token, localize) {
54903      if (token === 'Ho') {
54904        return localize.ordinalNumber(date.getUTCHours(), {
54905          unit: 'hour'
54906        });
54907      }
54908  
54909      return lightFormatters.H(date, token);
54910    },
54911    // Hour [0-11]
54912    K: function K(date, token, localize) {
54913      var hours = date.getUTCHours() % 12;
54914  
54915      if (token === 'Ko') {
54916        return localize.ordinalNumber(hours, {
54917          unit: 'hour'
54918        });
54919      }
54920  
54921      return addLeadingZeros(hours, token.length);
54922    },
54923    // Hour [1-24]
54924    k: function k(date, token, localize) {
54925      var hours = date.getUTCHours();
54926      if (hours === 0) hours = 24;
54927  
54928      if (token === 'ko') {
54929        return localize.ordinalNumber(hours, {
54930          unit: 'hour'
54931        });
54932      }
54933  
54934      return addLeadingZeros(hours, token.length);
54935    },
54936    // Minute
54937    m: function m(date, token, localize) {
54938      if (token === 'mo') {
54939        return localize.ordinalNumber(date.getUTCMinutes(), {
54940          unit: 'minute'
54941        });
54942      }
54943  
54944      return lightFormatters.m(date, token);
54945    },
54946    // Second
54947    s: function s(date, token, localize) {
54948      if (token === 'so') {
54949        return localize.ordinalNumber(date.getUTCSeconds(), {
54950          unit: 'second'
54951        });
54952      }
54953  
54954      return lightFormatters.s(date, token);
54955    },
54956    // Fraction of second
54957    S: function S(date, token) {
54958      return lightFormatters.S(date, token);
54959    },
54960    // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
54961    X: function X(date, token, _localize, options) {
54962      var originalDate = options._originalDate || date;
54963      var timezoneOffset = originalDate.getTimezoneOffset();
54964  
54965      if (timezoneOffset === 0) {
54966        return 'Z';
54967      }
54968  
54969      switch (token) {
54970        // Hours and optional minutes
54971        case 'X':
54972          return formatTimezoneWithOptionalMinutes(timezoneOffset);
54973        // Hours, minutes and optional seconds without `:` delimiter
54974        // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
54975        // so this token always has the same output as `XX`
54976  
54977        case 'XXXX':
54978        case 'XX':
54979          // Hours and minutes without `:` delimiter
54980          return formatTimezone(timezoneOffset);
54981        // Hours, minutes and optional seconds with `:` delimiter
54982        // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
54983        // so this token always has the same output as `XXX`
54984  
54985        case 'XXXXX':
54986        case 'XXX': // Hours and minutes with `:` delimiter
54987  
54988        default:
54989          return formatTimezone(timezoneOffset, ':');
54990      }
54991    },
54992    // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
54993    x: function x(date, token, _localize, options) {
54994      var originalDate = options._originalDate || date;
54995      var timezoneOffset = originalDate.getTimezoneOffset();
54996  
54997      switch (token) {
54998        // Hours and optional minutes
54999        case 'x':
55000          return formatTimezoneWithOptionalMinutes(timezoneOffset);
55001        // Hours, minutes and optional seconds without `:` delimiter
55002        // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
55003        // so this token always has the same output as `xx`
55004  
55005        case 'xxxx':
55006        case 'xx':
55007          // Hours and minutes without `:` delimiter
55008          return formatTimezone(timezoneOffset);
55009        // Hours, minutes and optional seconds with `:` delimiter
55010        // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
55011        // so this token always has the same output as `xxx`
55012  
55013        case 'xxxxx':
55014        case 'xxx': // Hours and minutes with `:` delimiter
55015  
55016        default:
55017          return formatTimezone(timezoneOffset, ':');
55018      }
55019    },
55020    // Timezone (GMT)
55021    O: function O(date, token, _localize, options) {
55022      var originalDate = options._originalDate || date;
55023      var timezoneOffset = originalDate.getTimezoneOffset();
55024  
55025      switch (token) {
55026        // Short
55027        case 'O':
55028        case 'OO':
55029        case 'OOO':
55030          return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
55031        // Long
55032  
55033        case 'OOOO':
55034        default:
55035          return 'GMT' + formatTimezone(timezoneOffset, ':');
55036      }
55037    },
55038    // Timezone (specific non-location)
55039    z: function z(date, token, _localize, options) {
55040      var originalDate = options._originalDate || date;
55041      var timezoneOffset = originalDate.getTimezoneOffset();
55042  
55043      switch (token) {
55044        // Short
55045        case 'z':
55046        case 'zz':
55047        case 'zzz':
55048          return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
55049        // Long
55050  
55051        case 'zzzz':
55052        default:
55053          return 'GMT' + formatTimezone(timezoneOffset, ':');
55054      }
55055    },
55056    // Seconds timestamp
55057    t: function t(date, token, _localize, options) {
55058      var originalDate = options._originalDate || date;
55059      var timestamp = Math.floor(originalDate.getTime() / 1000);
55060      return addLeadingZeros(timestamp, token.length);
55061    },
55062    // Milliseconds timestamp
55063    T: function T(date, token, _localize, options) {
55064      var originalDate = options._originalDate || date;
55065      var timestamp = originalDate.getTime();
55066      return addLeadingZeros(timestamp, token.length);
55067    }
55068  };
55069  
55070  function formatTimezoneShort(offset, dirtyDelimiter) {
55071    var sign = offset > 0 ? '-' : '+';
55072    var absOffset = Math.abs(offset);
55073    var hours = Math.floor(absOffset / 60);
55074    var minutes = absOffset % 60;
55075  
55076    if (minutes === 0) {
55077      return sign + String(hours);
55078    }
55079  
55080    var delimiter = dirtyDelimiter || '';
55081    return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
55082  }
55083  
55084  function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
55085    if (offset % 60 === 0) {
55086      var sign = offset > 0 ? '-' : '+';
55087      return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
55088    }
55089  
55090    return formatTimezone(offset, dirtyDelimiter);
55091  }
55092  
55093  function formatTimezone(offset, dirtyDelimiter) {
55094    var delimiter = dirtyDelimiter || '';
55095    var sign = offset > 0 ? '-' : '+';
55096    var absOffset = Math.abs(offset);
55097    var hours = addLeadingZeros(Math.floor(absOffset / 60), 2);
55098    var minutes = addLeadingZeros(absOffset % 60, 2);
55099    return sign + hours + delimiter + minutes;
55100  }
55101  
55102  /* harmony default export */ const format_formatters = (formatters_formatters);
55103  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/longFormatters/index.js
55104  var dateLongFormatter = function dateLongFormatter(pattern, formatLong) {
55105    switch (pattern) {
55106      case 'P':
55107        return formatLong.date({
55108          width: 'short'
55109        });
55110  
55111      case 'PP':
55112        return formatLong.date({
55113          width: 'medium'
55114        });
55115  
55116      case 'PPP':
55117        return formatLong.date({
55118          width: 'long'
55119        });
55120  
55121      case 'PPPP':
55122      default:
55123        return formatLong.date({
55124          width: 'full'
55125        });
55126    }
55127  };
55128  
55129  var timeLongFormatter = function timeLongFormatter(pattern, formatLong) {
55130    switch (pattern) {
55131      case 'p':
55132        return formatLong.time({
55133          width: 'short'
55134        });
55135  
55136      case 'pp':
55137        return formatLong.time({
55138          width: 'medium'
55139        });
55140  
55141      case 'ppp':
55142        return formatLong.time({
55143          width: 'long'
55144        });
55145  
55146      case 'pppp':
55147      default:
55148        return formatLong.time({
55149          width: 'full'
55150        });
55151    }
55152  };
55153  
55154  var dateTimeLongFormatter = function dateTimeLongFormatter(pattern, formatLong) {
55155    var matchResult = pattern.match(/(P+)(p+)?/) || [];
55156    var datePattern = matchResult[1];
55157    var timePattern = matchResult[2];
55158  
55159    if (!timePattern) {
55160      return dateLongFormatter(pattern, formatLong);
55161    }
55162  
55163    var dateTimeFormat;
55164  
55165    switch (datePattern) {
55166      case 'P':
55167        dateTimeFormat = formatLong.dateTime({
55168          width: 'short'
55169        });
55170        break;
55171  
55172      case 'PP':
55173        dateTimeFormat = formatLong.dateTime({
55174          width: 'medium'
55175        });
55176        break;
55177  
55178      case 'PPP':
55179        dateTimeFormat = formatLong.dateTime({
55180          width: 'long'
55181        });
55182        break;
55183  
55184      case 'PPPP':
55185      default:
55186        dateTimeFormat = formatLong.dateTime({
55187          width: 'full'
55188        });
55189        break;
55190    }
55191  
55192    return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong));
55193  };
55194  
55195  var longFormatters = {
55196    p: timeLongFormatter,
55197    P: dateTimeLongFormatter
55198  };
55199  /* harmony default export */ const format_longFormatters = (longFormatters);
55200  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getTimezoneOffsetInMilliseconds/index.js
55201  /**
55202   * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
55203   * They usually appear for dates that denote time before the timezones were introduced
55204   * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
55205   * and GMT+01:00:00 after that date)
55206   *
55207   * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
55208   * which would lead to incorrect calculations.
55209   *
55210   * This function returns the timezone offset in milliseconds that takes seconds in account.
55211   */
55212  function getTimezoneOffsetInMilliseconds(date) {
55213    var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
55214    utcDate.setUTCFullYear(date.getFullYear());
55215    return date.getTime() - utcDate.getTime();
55216  }
55217  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/protectedTokens/index.js
55218  var protectedDayOfYearTokens = ['D', 'DD'];
55219  var protectedWeekYearTokens = ['YY', 'YYYY'];
55220  function isProtectedDayOfYearToken(token) {
55221    return protectedDayOfYearTokens.indexOf(token) !== -1;
55222  }
55223  function isProtectedWeekYearToken(token) {
55224    return protectedWeekYearTokens.indexOf(token) !== -1;
55225  }
55226  function throwProtectedError(token, format, input) {
55227    if (token === 'YYYY') {
55228      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"));
55229    } else if (token === 'YY') {
55230      throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md"));
55231    } else if (token === 'D') {
55232      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"));
55233    } else if (token === 'DD') {
55234      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"));
55235    }
55236  }
55237  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatDistance/index.js
55238  var formatDistanceLocale = {
55239    lessThanXSeconds: {
55240      one: 'less than a second',
55241      other: 'less than {{count}} seconds'
55242    },
55243    xSeconds: {
55244      one: '1 second',
55245      other: '{{count}} seconds'
55246    },
55247    halfAMinute: 'half a minute',
55248    lessThanXMinutes: {
55249      one: 'less than a minute',
55250      other: 'less than {{count}} minutes'
55251    },
55252    xMinutes: {
55253      one: '1 minute',
55254      other: '{{count}} minutes'
55255    },
55256    aboutXHours: {
55257      one: 'about 1 hour',
55258      other: 'about {{count}} hours'
55259    },
55260    xHours: {
55261      one: '1 hour',
55262      other: '{{count}} hours'
55263    },
55264    xDays: {
55265      one: '1 day',
55266      other: '{{count}} days'
55267    },
55268    aboutXWeeks: {
55269      one: 'about 1 week',
55270      other: 'about {{count}} weeks'
55271    },
55272    xWeeks: {
55273      one: '1 week',
55274      other: '{{count}} weeks'
55275    },
55276    aboutXMonths: {
55277      one: 'about 1 month',
55278      other: 'about {{count}} months'
55279    },
55280    xMonths: {
55281      one: '1 month',
55282      other: '{{count}} months'
55283    },
55284    aboutXYears: {
55285      one: 'about 1 year',
55286      other: 'about {{count}} years'
55287    },
55288    xYears: {
55289      one: '1 year',
55290      other: '{{count}} years'
55291    },
55292    overXYears: {
55293      one: 'over 1 year',
55294      other: 'over {{count}} years'
55295    },
55296    almostXYears: {
55297      one: 'almost 1 year',
55298      other: 'almost {{count}} years'
55299    }
55300  };
55301  
55302  var formatDistance = function formatDistance(token, count, options) {
55303    var result;
55304    var tokenValue = formatDistanceLocale[token];
55305  
55306    if (typeof tokenValue === 'string') {
55307      result = tokenValue;
55308    } else if (count === 1) {
55309      result = tokenValue.one;
55310    } else {
55311      result = tokenValue.other.replace('{{count}}', count.toString());
55312    }
55313  
55314    if (options !== null && options !== void 0 && options.addSuffix) {
55315      if (options.comparison && options.comparison > 0) {
55316        return 'in ' + result;
55317      } else {
55318        return result + ' ago';
55319      }
55320    }
55321  
55322    return result;
55323  };
55324  
55325  /* harmony default export */ const _lib_formatDistance = (formatDistance);
55326  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildFormatLongFn/index.js
55327  function buildFormatLongFn(args) {
55328    return function () {
55329      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
55330      // TODO: Remove String()
55331      var width = options.width ? String(options.width) : args.defaultWidth;
55332      var format = args.formats[width] || args.formats[args.defaultWidth];
55333      return format;
55334    };
55335  }
55336  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatLong/index.js
55337  
55338  var dateFormats = {
55339    full: 'EEEE, MMMM do, y',
55340    long: 'MMMM do, y',
55341    medium: 'MMM d, y',
55342    short: 'MM/dd/yyyy'
55343  };
55344  var timeFormats = {
55345    full: 'h:mm:ss a zzzz',
55346    long: 'h:mm:ss a z',
55347    medium: 'h:mm:ss a',
55348    short: 'h:mm a'
55349  };
55350  var dateTimeFormats = {
55351    full: "{{date}} 'at' {{time}}",
55352    long: "{{date}} 'at' {{time}}",
55353    medium: '{{date}}, {{time}}',
55354    short: '{{date}}, {{time}}'
55355  };
55356  var formatLong = {
55357    date: buildFormatLongFn({
55358      formats: dateFormats,
55359      defaultWidth: 'full'
55360    }),
55361    time: buildFormatLongFn({
55362      formats: timeFormats,
55363      defaultWidth: 'full'
55364    }),
55365    dateTime: buildFormatLongFn({
55366      formats: dateTimeFormats,
55367      defaultWidth: 'full'
55368    })
55369  };
55370  /* harmony default export */ const _lib_formatLong = (formatLong);
55371  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatRelative/index.js
55372  var formatRelativeLocale = {
55373    lastWeek: "'last' eeee 'at' p",
55374    yesterday: "'yesterday at' p",
55375    today: "'today at' p",
55376    tomorrow: "'tomorrow at' p",
55377    nextWeek: "eeee 'at' p",
55378    other: 'P'
55379  };
55380  
55381  var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
55382    return formatRelativeLocale[token];
55383  };
55384  
55385  /* harmony default export */ const _lib_formatRelative = (formatRelative);
55386  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildLocalizeFn/index.js
55387  function buildLocalizeFn(args) {
55388    return function (dirtyIndex, options) {
55389      var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
55390      var valuesArray;
55391  
55392      if (context === 'formatting' && args.formattingValues) {
55393        var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
55394        var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
55395        valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
55396      } else {
55397        var _defaultWidth = args.defaultWidth;
55398  
55399        var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
55400  
55401        valuesArray = args.values[_width] || args.values[_defaultWidth];
55402      }
55403  
55404      var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
55405  
55406      return valuesArray[index];
55407    };
55408  }
55409  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/localize/index.js
55410  
55411  var eraValues = {
55412    narrow: ['B', 'A'],
55413    abbreviated: ['BC', 'AD'],
55414    wide: ['Before Christ', 'Anno Domini']
55415  };
55416  var quarterValues = {
55417    narrow: ['1', '2', '3', '4'],
55418    abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
55419    wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
55420  }; // Note: in English, the names of days of the week and months are capitalized.
55421  // If you are making a new locale based on this one, check if the same is true for the language you're working on.
55422  // Generally, formatted dates should look like they are in the middle of a sentence,
55423  // e.g. in Spanish language the weekdays and months should be in the lowercase.
55424  
55425  var monthValues = {
55426    narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
55427    abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
55428    wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
55429  };
55430  var dayValues = {
55431    narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
55432    short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
55433    abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
55434    wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
55435  };
55436  var dayPeriodValues = {
55437    narrow: {
55438      am: 'a',
55439      pm: 'p',
55440      midnight: 'mi',
55441      noon: 'n',
55442      morning: 'morning',
55443      afternoon: 'afternoon',
55444      evening: 'evening',
55445      night: 'night'
55446    },
55447    abbreviated: {
55448      am: 'AM',
55449      pm: 'PM',
55450      midnight: 'midnight',
55451      noon: 'noon',
55452      morning: 'morning',
55453      afternoon: 'afternoon',
55454      evening: 'evening',
55455      night: 'night'
55456    },
55457    wide: {
55458      am: 'a.m.',
55459      pm: 'p.m.',
55460      midnight: 'midnight',
55461      noon: 'noon',
55462      morning: 'morning',
55463      afternoon: 'afternoon',
55464      evening: 'evening',
55465      night: 'night'
55466    }
55467  };
55468  var formattingDayPeriodValues = {
55469    narrow: {
55470      am: 'a',
55471      pm: 'p',
55472      midnight: 'mi',
55473      noon: 'n',
55474      morning: 'in the morning',
55475      afternoon: 'in the afternoon',
55476      evening: 'in the evening',
55477      night: 'at night'
55478    },
55479    abbreviated: {
55480      am: 'AM',
55481      pm: 'PM',
55482      midnight: 'midnight',
55483      noon: 'noon',
55484      morning: 'in the morning',
55485      afternoon: 'in the afternoon',
55486      evening: 'in the evening',
55487      night: 'at night'
55488    },
55489    wide: {
55490      am: 'a.m.',
55491      pm: 'p.m.',
55492      midnight: 'midnight',
55493      noon: 'noon',
55494      morning: 'in the morning',
55495      afternoon: 'in the afternoon',
55496      evening: 'in the evening',
55497      night: 'at night'
55498    }
55499  };
55500  
55501  var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
55502    var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
55503    // if they are different for different grammatical genders,
55504    // use `options.unit`.
55505    //
55506    // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
55507    // 'day', 'hour', 'minute', 'second'.
55508  
55509    var rem100 = number % 100;
55510  
55511    if (rem100 > 20 || rem100 < 10) {
55512      switch (rem100 % 10) {
55513        case 1:
55514          return number + 'st';
55515  
55516        case 2:
55517          return number + 'nd';
55518  
55519        case 3:
55520          return number + 'rd';
55521      }
55522    }
55523  
55524    return number + 'th';
55525  };
55526  
55527  var localize = {
55528    ordinalNumber: ordinalNumber,
55529    era: buildLocalizeFn({
55530      values: eraValues,
55531      defaultWidth: 'wide'
55532    }),
55533    quarter: buildLocalizeFn({
55534      values: quarterValues,
55535      defaultWidth: 'wide',
55536      argumentCallback: function argumentCallback(quarter) {
55537        return quarter - 1;
55538      }
55539    }),
55540    month: buildLocalizeFn({
55541      values: monthValues,
55542      defaultWidth: 'wide'
55543    }),
55544    day: buildLocalizeFn({
55545      values: dayValues,
55546      defaultWidth: 'wide'
55547    }),
55548    dayPeriod: buildLocalizeFn({
55549      values: dayPeriodValues,
55550      defaultWidth: 'wide',
55551      formattingValues: formattingDayPeriodValues,
55552      defaultFormattingWidth: 'wide'
55553    })
55554  };
55555  /* harmony default export */ const _lib_localize = (localize);
55556  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchFn/index.js
55557  function buildMatchFn(args) {
55558    return function (string) {
55559      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
55560      var width = options.width;
55561      var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
55562      var matchResult = string.match(matchPattern);
55563  
55564      if (!matchResult) {
55565        return null;
55566      }
55567  
55568      var matchedString = matchResult[0];
55569      var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
55570      var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
55571        return pattern.test(matchedString);
55572      }) : findKey(parsePatterns, function (pattern) {
55573        return pattern.test(matchedString);
55574      });
55575      var value;
55576      value = args.valueCallback ? args.valueCallback(key) : key;
55577      value = options.valueCallback ? options.valueCallback(value) : value;
55578      var rest = string.slice(matchedString.length);
55579      return {
55580        value: value,
55581        rest: rest
55582      };
55583    };
55584  }
55585  
55586  function findKey(object, predicate) {
55587    for (var key in object) {
55588      if (object.hasOwnProperty(key) && predicate(object[key])) {
55589        return key;
55590      }
55591    }
55592  
55593    return undefined;
55594  }
55595  
55596  function findIndex(array, predicate) {
55597    for (var key = 0; key < array.length; key++) {
55598      if (predicate(array[key])) {
55599        return key;
55600      }
55601    }
55602  
55603    return undefined;
55604  }
55605  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchPatternFn/index.js
55606  function buildMatchPatternFn(args) {
55607    return function (string) {
55608      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
55609      var matchResult = string.match(args.matchPattern);
55610      if (!matchResult) return null;
55611      var matchedString = matchResult[0];
55612      var parseResult = string.match(args.parsePattern);
55613      if (!parseResult) return null;
55614      var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
55615      value = options.valueCallback ? options.valueCallback(value) : value;
55616      var rest = string.slice(matchedString.length);
55617      return {
55618        value: value,
55619        rest: rest
55620      };
55621    };
55622  }
55623  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/match/index.js
55624  
55625  
55626  var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
55627  var parseOrdinalNumberPattern = /\d+/i;
55628  var matchEraPatterns = {
55629    narrow: /^(b|a)/i,
55630    abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
55631    wide: /^(before christ|before common era|anno domini|common era)/i
55632  };
55633  var parseEraPatterns = {
55634    any: [/^b/i, /^(a|c)/i]
55635  };
55636  var matchQuarterPatterns = {
55637    narrow: /^[1234]/i,
55638    abbreviated: /^q[1234]/i,
55639    wide: /^[1234](th|st|nd|rd)? quarter/i
55640  };
55641  var parseQuarterPatterns = {
55642    any: [/1/i, /2/i, /3/i, /4/i]
55643  };
55644  var matchMonthPatterns = {
55645    narrow: /^[jfmasond]/i,
55646    abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
55647    wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
55648  };
55649  var parseMonthPatterns = {
55650    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],
55651    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]
55652  };
55653  var matchDayPatterns = {
55654    narrow: /^[smtwf]/i,
55655    short: /^(su|mo|tu|we|th|fr|sa)/i,
55656    abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
55657    wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
55658  };
55659  var parseDayPatterns = {
55660    narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
55661    any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
55662  };
55663  var matchDayPeriodPatterns = {
55664    narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
55665    any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
55666  };
55667  var parseDayPeriodPatterns = {
55668    any: {
55669      am: /^a/i,
55670      pm: /^p/i,
55671      midnight: /^mi/i,
55672      noon: /^no/i,
55673      morning: /morning/i,
55674      afternoon: /afternoon/i,
55675      evening: /evening/i,
55676      night: /night/i
55677    }
55678  };
55679  var match_match = {
55680    ordinalNumber: buildMatchPatternFn({
55681      matchPattern: matchOrdinalNumberPattern,
55682      parsePattern: parseOrdinalNumberPattern,
55683      valueCallback: function valueCallback(value) {
55684        return parseInt(value, 10);
55685      }
55686    }),
55687    era: buildMatchFn({
55688      matchPatterns: matchEraPatterns,
55689      defaultMatchWidth: 'wide',
55690      parsePatterns: parseEraPatterns,
55691      defaultParseWidth: 'any'
55692    }),
55693    quarter: buildMatchFn({
55694      matchPatterns: matchQuarterPatterns,
55695      defaultMatchWidth: 'wide',
55696      parsePatterns: parseQuarterPatterns,
55697      defaultParseWidth: 'any',
55698      valueCallback: function valueCallback(index) {
55699        return index + 1;
55700      }
55701    }),
55702    month: buildMatchFn({
55703      matchPatterns: matchMonthPatterns,
55704      defaultMatchWidth: 'wide',
55705      parsePatterns: parseMonthPatterns,
55706      defaultParseWidth: 'any'
55707    }),
55708    day: buildMatchFn({
55709      matchPatterns: matchDayPatterns,
55710      defaultMatchWidth: 'wide',
55711      parsePatterns: parseDayPatterns,
55712      defaultParseWidth: 'any'
55713    }),
55714    dayPeriod: buildMatchFn({
55715      matchPatterns: matchDayPeriodPatterns,
55716      defaultMatchWidth: 'any',
55717      parsePatterns: parseDayPeriodPatterns,
55718      defaultParseWidth: 'any'
55719    })
55720  };
55721  /* harmony default export */ const _lib_match = (match_match);
55722  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/index.js
55723  
55724  
55725  
55726  
55727  
55728  
55729  /**
55730   * @type {Locale}
55731   * @category Locales
55732   * @summary English locale (United States).
55733   * @language English
55734   * @iso-639-2 eng
55735   * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
55736   * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
55737   */
55738  var locale = {
55739    code: 'en-US',
55740    formatDistance: _lib_formatDistance,
55741    formatLong: _lib_formatLong,
55742    formatRelative: _lib_formatRelative,
55743    localize: _lib_localize,
55744    match: _lib_match,
55745    options: {
55746      weekStartsOn: 0
55747      /* Sunday */
55748      ,
55749      firstWeekContainsDate: 1
55750    }
55751  };
55752  /* harmony default export */ const en_US = (locale);
55753  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultLocale/index.js
55754  
55755  /* harmony default export */ const defaultLocale = (en_US);
55756  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/format/index.js
55757  
55758  
55759  
55760  
55761  
55762  
55763  
55764  
55765  
55766  
55767   // This RegExp consists of three parts separated by `|`:
55768  // - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
55769  //   (one of the certain letters followed by `o`)
55770  // - (\w)\1* matches any sequences of the same letter
55771  // - '' matches two quote characters in a row
55772  // - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('),
55773  //   except a single quote symbol, which ends the sequence.
55774  //   Two quote characters do not end the sequence.
55775  //   If there is no matching single quote
55776  //   then the sequence will continue until the end of the string.
55777  // - . matches any single character unmatched by previous parts of the RegExps
55778  
55779  var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; // This RegExp catches symbols escaped by quotes, and also
55780  // sequences of symbols P, p, and the combinations like `PPPPPPPppppp`
55781  
55782  var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
55783  var escapedStringRegExp = /^'([^]*?)'?$/;
55784  var doubleQuoteRegExp = /''/g;
55785  var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
55786  /**
55787   * @name format
55788   * @category Common Helpers
55789   * @summary Format the date.
55790   *
55791   * @description
55792   * Return the formatted date string in the given format. The result may vary by locale.
55793   *
55794   * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
55795   * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
55796   *
55797   * The characters wrapped between two single quotes characters (') are escaped.
55798   * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
55799   * (see the last example)
55800   *
55801   * Format of the string is based on Unicode Technical Standard #35:
55802   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
55803   * with a few additions (see note 7 below the table).
55804   *
55805   * Accepted patterns:
55806   * | Unit                            | Pattern | Result examples                   | Notes |
55807   * |---------------------------------|---------|-----------------------------------|-------|
55808   * | Era                             | G..GGG  | AD, BC                            |       |
55809   * |                                 | GGGG    | Anno Domini, Before Christ        | 2     |
55810   * |                                 | GGGGG   | A, B                              |       |
55811   * | Calendar year                   | y       | 44, 1, 1900, 2017                 | 5     |
55812   * |                                 | yo      | 44th, 1st, 0th, 17th              | 5,7   |
55813   * |                                 | yy      | 44, 01, 00, 17                    | 5     |
55814   * |                                 | yyy     | 044, 001, 1900, 2017              | 5     |
55815   * |                                 | yyyy    | 0044, 0001, 1900, 2017            | 5     |
55816   * |                                 | yyyyy   | ...                               | 3,5   |
55817   * | Local week-numbering year       | Y       | 44, 1, 1900, 2017                 | 5     |
55818   * |                                 | Yo      | 44th, 1st, 1900th, 2017th         | 5,7   |
55819   * |                                 | YY      | 44, 01, 00, 17                    | 5,8   |
55820   * |                                 | YYY     | 044, 001, 1900, 2017              | 5     |
55821   * |                                 | YYYY    | 0044, 0001, 1900, 2017            | 5,8   |
55822   * |                                 | YYYYY   | ...                               | 3,5   |
55823   * | ISO week-numbering year         | R       | -43, 0, 1, 1900, 2017             | 5,7   |
55824   * |                                 | RR      | -43, 00, 01, 1900, 2017           | 5,7   |
55825   * |                                 | RRR     | -043, 000, 001, 1900, 2017        | 5,7   |
55826   * |                                 | RRRR    | -0043, 0000, 0001, 1900, 2017     | 5,7   |
55827   * |                                 | RRRRR   | ...                               | 3,5,7 |
55828   * | Extended year                   | u       | -43, 0, 1, 1900, 2017             | 5     |
55829   * |                                 | uu      | -43, 01, 1900, 2017               | 5     |
55830   * |                                 | uuu     | -043, 001, 1900, 2017             | 5     |
55831   * |                                 | uuuu    | -0043, 0001, 1900, 2017           | 5     |
55832   * |                                 | uuuuu   | ...                               | 3,5   |
55833   * | Quarter (formatting)            | Q       | 1, 2, 3, 4                        |       |
55834   * |                                 | Qo      | 1st, 2nd, 3rd, 4th                | 7     |
55835   * |                                 | QQ      | 01, 02, 03, 04                    |       |
55836   * |                                 | QQQ     | Q1, Q2, Q3, Q4                    |       |
55837   * |                                 | QQQQ    | 1st quarter, 2nd quarter, ...     | 2     |
55838   * |                                 | QQQQQ   | 1, 2, 3, 4                        | 4     |
55839   * | Quarter (stand-alone)           | q       | 1, 2, 3, 4                        |       |
55840   * |                                 | qo      | 1st, 2nd, 3rd, 4th                | 7     |
55841   * |                                 | qq      | 01, 02, 03, 04                    |       |
55842   * |                                 | qqq     | Q1, Q2, Q3, Q4                    |       |
55843   * |                                 | qqqq    | 1st quarter, 2nd quarter, ...     | 2     |
55844   * |                                 | qqqqq   | 1, 2, 3, 4                        | 4     |
55845   * | Month (formatting)              | M       | 1, 2, ..., 12                     |       |
55846   * |                                 | Mo      | 1st, 2nd, ..., 12th               | 7     |
55847   * |                                 | MM      | 01, 02, ..., 12                   |       |
55848   * |                                 | MMM     | Jan, Feb, ..., Dec                |       |
55849   * |                                 | MMMM    | January, February, ..., December  | 2     |
55850   * |                                 | MMMMM   | J, F, ..., D                      |       |
55851   * | Month (stand-alone)             | L       | 1, 2, ..., 12                     |       |
55852   * |                                 | Lo      | 1st, 2nd, ..., 12th               | 7     |
55853   * |                                 | LL      | 01, 02, ..., 12                   |       |
55854   * |                                 | LLL     | Jan, Feb, ..., Dec                |       |
55855   * |                                 | LLLL    | January, February, ..., December  | 2     |
55856   * |                                 | LLLLL   | J, F, ..., D                      |       |
55857   * | Local week of year              | w       | 1, 2, ..., 53                     |       |
55858   * |                                 | wo      | 1st, 2nd, ..., 53th               | 7     |
55859   * |                                 | ww      | 01, 02, ..., 53                   |       |
55860   * | ISO week of year                | I       | 1, 2, ..., 53                     | 7     |
55861   * |                                 | Io      | 1st, 2nd, ..., 53th               | 7     |
55862   * |                                 | II      | 01, 02, ..., 53                   | 7     |
55863   * | Day of month                    | d       | 1, 2, ..., 31                     |       |
55864   * |                                 | do      | 1st, 2nd, ..., 31st               | 7     |
55865   * |                                 | dd      | 01, 02, ..., 31                   |       |
55866   * | Day of year                     | D       | 1, 2, ..., 365, 366               | 9     |
55867   * |                                 | Do      | 1st, 2nd, ..., 365th, 366th       | 7     |
55868   * |                                 | DD      | 01, 02, ..., 365, 366             | 9     |
55869   * |                                 | DDD     | 001, 002, ..., 365, 366           |       |
55870   * |                                 | DDDD    | ...                               | 3     |
55871   * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
55872   * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
55873   * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
55874   * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
55875   * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
55876   * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
55877   * |                                 | ii      | 01, 02, ..., 07                   | 7     |
55878   * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
55879   * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
55880   * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
55881   * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
55882   * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
55883   * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
55884   * |                                 | ee      | 02, 03, ..., 01                   |       |
55885   * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
55886   * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
55887   * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
55888   * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
55889   * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
55890   * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
55891   * |                                 | cc      | 02, 03, ..., 01                   |       |
55892   * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
55893   * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
55894   * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
55895   * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
55896   * | AM, PM                          | a..aa   | AM, PM                            |       |
55897   * |                                 | aaa     | am, pm                            |       |
55898   * |                                 | aaaa    | a.m., p.m.                        | 2     |
55899   * |                                 | aaaaa   | a, p                              |       |
55900   * | AM, PM, noon, midnight          | b..bb   | AM, PM, noon, midnight            |       |
55901   * |                                 | bbb     | am, pm, noon, midnight            |       |
55902   * |                                 | bbbb    | a.m., p.m., noon, midnight        | 2     |
55903   * |                                 | bbbbb   | a, p, n, mi                       |       |
55904   * | Flexible day period             | B..BBB  | at night, in the morning, ...     |       |
55905   * |                                 | BBBB    | at night, in the morning, ...     | 2     |
55906   * |                                 | BBBBB   | at night, in the morning, ...     |       |
55907   * | Hour [1-12]                     | h       | 1, 2, ..., 11, 12                 |       |
55908   * |                                 | ho      | 1st, 2nd, ..., 11th, 12th         | 7     |
55909   * |                                 | hh      | 01, 02, ..., 11, 12               |       |
55910   * | Hour [0-23]                     | H       | 0, 1, 2, ..., 23                  |       |
55911   * |                                 | Ho      | 0th, 1st, 2nd, ..., 23rd          | 7     |
55912   * |                                 | HH      | 00, 01, 02, ..., 23               |       |
55913   * | Hour [0-11]                     | K       | 1, 2, ..., 11, 0                  |       |
55914   * |                                 | Ko      | 1st, 2nd, ..., 11th, 0th          | 7     |
55915   * |                                 | KK      | 01, 02, ..., 11, 00               |       |
55916   * | Hour [1-24]                     | k       | 24, 1, 2, ..., 23                 |       |
55917   * |                                 | ko      | 24th, 1st, 2nd, ..., 23rd         | 7     |
55918   * |                                 | kk      | 24, 01, 02, ..., 23               |       |
55919   * | Minute                          | m       | 0, 1, ..., 59                     |       |
55920   * |                                 | mo      | 0th, 1st, ..., 59th               | 7     |
55921   * |                                 | mm      | 00, 01, ..., 59                   |       |
55922   * | Second                          | s       | 0, 1, ..., 59                     |       |
55923   * |                                 | so      | 0th, 1st, ..., 59th               | 7     |
55924   * |                                 | ss      | 00, 01, ..., 59                   |       |
55925   * | Fraction of second              | S       | 0, 1, ..., 9                      |       |
55926   * |                                 | SS      | 00, 01, ..., 99                   |       |
55927   * |                                 | SSS     | 000, 001, ..., 999                |       |
55928   * |                                 | SSSS    | ...                               | 3     |
55929   * | Timezone (ISO-8601 w/ Z)        | X       | -08, +0530, Z                     |       |
55930   * |                                 | XX      | -0800, +0530, Z                   |       |
55931   * |                                 | XXX     | -08:00, +05:30, Z                 |       |
55932   * |                                 | XXXX    | -0800, +0530, Z, +123456          | 2     |
55933   * |                                 | XXXXX   | -08:00, +05:30, Z, +12:34:56      |       |
55934   * | Timezone (ISO-8601 w/o Z)       | x       | -08, +0530, +00                   |       |
55935   * |                                 | xx      | -0800, +0530, +0000               |       |
55936   * |                                 | xxx     | -08:00, +05:30, +00:00            | 2     |
55937   * |                                 | xxxx    | -0800, +0530, +0000, +123456      |       |
55938   * |                                 | xxxxx   | -08:00, +05:30, +00:00, +12:34:56 |       |
55939   * | Timezone (GMT)                  | O...OOO | GMT-8, GMT+5:30, GMT+0            |       |
55940   * |                                 | OOOO    | GMT-08:00, GMT+05:30, GMT+00:00   | 2     |
55941   * | Timezone (specific non-locat.)  | z...zzz | GMT-8, GMT+5:30, GMT+0            | 6     |
55942   * |                                 | zzzz    | GMT-08:00, GMT+05:30, GMT+00:00   | 2,6   |
55943   * | Seconds timestamp               | t       | 512969520                         | 7     |
55944   * |                                 | tt      | ...                               | 3,7   |
55945   * | Milliseconds timestamp          | T       | 512969520900                      | 7     |
55946   * |                                 | TT      | ...                               | 3,7   |
55947   * | Long localized date             | P       | 04/29/1453                        | 7     |
55948   * |                                 | PP      | Apr 29, 1453                      | 7     |
55949   * |                                 | PPP     | April 29th, 1453                  | 7     |
55950   * |                                 | PPPP    | Friday, April 29th, 1453          | 2,7   |
55951   * | Long localized time             | p       | 12:00 AM                          | 7     |
55952   * |                                 | pp      | 12:00:00 AM                       | 7     |
55953   * |                                 | ppp     | 12:00:00 AM GMT+2                 | 7     |
55954   * |                                 | pppp    | 12:00:00 AM GMT+02:00             | 2,7   |
55955   * | Combination of date and time    | Pp      | 04/29/1453, 12:00 AM              | 7     |
55956   * |                                 | PPpp    | Apr 29, 1453, 12:00:00 AM         | 7     |
55957   * |                                 | PPPppp  | April 29th, 1453 at ...           | 7     |
55958   * |                                 | PPPPpppp| Friday, April 29th, 1453 at ...   | 2,7   |
55959   * Notes:
55960   * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
55961   *    are the same as "stand-alone" units, but are different in some languages.
55962   *    "Formatting" units are declined according to the rules of the language
55963   *    in the context of a date. "Stand-alone" units are always nominative singular:
55964   *
55965   *    `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
55966   *
55967   *    `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
55968   *
55969   * 2. Any sequence of the identical letters is a pattern, unless it is escaped by
55970   *    the single quote characters (see below).
55971   *    If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`)
55972   *    the output will be the same as default pattern for this unit, usually
55973   *    the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units
55974   *    are marked with "2" in the last column of the table.
55975   *
55976   *    `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'`
55977   *
55978   *    `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'`
55979   *
55980   *    `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'`
55981   *
55982   *    `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'`
55983   *
55984   *    `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'`
55985   *
55986   * 3. Some patterns could be unlimited length (such as `yyyyyyyy`).
55987   *    The output will be padded with zeros to match the length of the pattern.
55988   *
55989   *    `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'`
55990   *
55991   * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
55992   *    These tokens represent the shortest form of the quarter.
55993   *
55994   * 5. The main difference between `y` and `u` patterns are B.C. years:
55995   *
55996   *    | Year | `y` | `u` |
55997   *    |------|-----|-----|
55998   *    | AC 1 |   1 |   1 |
55999   *    | BC 1 |   1 |   0 |
56000   *    | BC 2 |   2 |  -1 |
56001   *
56002   *    Also `yy` always returns the last two digits of a year,
56003   *    while `uu` pads single digit years to 2 characters and returns other years unchanged:
56004   *
56005   *    | Year | `yy` | `uu` |
56006   *    |------|------|------|
56007   *    | 1    |   01 |   01 |
56008   *    | 14   |   14 |   14 |
56009   *    | 376  |   76 |  376 |
56010   *    | 1453 |   53 | 1453 |
56011   *
56012   *    The same difference is true for local and ISO week-numbering years (`Y` and `R`),
56013   *    except local week-numbering years are dependent on `options.weekStartsOn`
56014   *    and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear}
56015   *    and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}).
56016   *
56017   * 6. Specific non-location timezones are currently unavailable in `date-fns`,
56018   *    so right now these tokens fall back to GMT timezones.
56019   *
56020   * 7. These patterns are not in the Unicode Technical Standard #35:
56021   *    - `i`: ISO day of week
56022   *    - `I`: ISO week of year
56023   *    - `R`: ISO week-numbering year
56024   *    - `t`: seconds timestamp
56025   *    - `T`: milliseconds timestamp
56026   *    - `o`: ordinal number modifier
56027   *    - `P`: long localized date
56028   *    - `p`: long localized time
56029   *
56030   * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
56031   *    You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
56032   *
56033   * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month.
56034   *    You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
56035   *
56036   * @param {Date|Number} date - the original date
56037   * @param {String} format - the string of tokens
56038   * @param {Object} [options] - an object with options.
56039   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
56040   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
56041   * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is
56042   * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
56043   *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
56044   * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
56045   *   see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
56046   * @returns {String} the formatted date string
56047   * @throws {TypeError} 2 arguments required
56048   * @throws {RangeError} `date` must not be Invalid Date
56049   * @throws {RangeError} `options.locale` must contain `localize` property
56050   * @throws {RangeError} `options.locale` must contain `formatLong` property
56051   * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
56052   * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7
56053   * @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
56054   * @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
56055   * @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
56056   * @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
56057   * @throws {RangeError} format string contains an unescaped latin alphabet character
56058   *
56059   * @example
56060   * // Represent 11 February 2014 in middle-endian format:
56061   * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy')
56062   * //=> '02/11/2014'
56063   *
56064   * @example
56065   * // Represent 2 July 2014 in Esperanto:
56066   * import { eoLocale } from 'date-fns/locale/eo'
56067   * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", {
56068   *   locale: eoLocale
56069   * })
56070   * //=> '2-a de julio 2014'
56071   *
56072   * @example
56073   * // Escape string by single quote characters:
56074   * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'")
56075   * //=> "3 o'clock"
56076   */
56077  
56078  function format(dirtyDate, dirtyFormatStr, options) {
56079    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;
56080  
56081    requiredArgs_requiredArgs(2, arguments);
56082    var formatStr = String(dirtyFormatStr);
56083    var defaultOptions = defaultOptions_getDefaultOptions();
56084    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;
56085    var firstWeekContainsDate = toInteger_toInteger((_ref2 = (_ref3 = (_ref4 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.firstWeekContainsDate) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : 1); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
56086  
56087    if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
56088      throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
56089    }
56090  
56091    var weekStartsOn = toInteger_toInteger((_ref5 = (_ref6 = (_ref7 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale3 = options.locale) === null || _options$locale3 === void 0 ? void 0 : (_options$locale3$opti = _options$locale3.options) === null || _options$locale3$opti === void 0 ? void 0 : _options$locale3$opti.weekStartsOn) !== null && _ref7 !== void 0 ? _ref7 : defaultOptions.weekStartsOn) !== null && _ref6 !== void 0 ? _ref6 : (_defaultOptions$local3 = defaultOptions.locale) === null || _defaultOptions$local3 === void 0 ? void 0 : (_defaultOptions$local4 = _defaultOptions$local3.options) === null || _defaultOptions$local4 === void 0 ? void 0 : _defaultOptions$local4.weekStartsOn) !== null && _ref5 !== void 0 ? _ref5 : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
56092  
56093    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
56094      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
56095    }
56096  
56097    if (!locale.localize) {
56098      throw new RangeError('locale must contain localize property');
56099    }
56100  
56101    if (!locale.formatLong) {
56102      throw new RangeError('locale must contain formatLong property');
56103    }
56104  
56105    var originalDate = toDate_toDate(dirtyDate);
56106  
56107    if (!isValid(originalDate)) {
56108      throw new RangeError('Invalid time value');
56109    } // Convert the date in system timezone to the same date in UTC+00:00 timezone.
56110    // This ensures that when UTC functions will be implemented, locales will be compatible with them.
56111    // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
56112  
56113  
56114    var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate);
56115    var utcDate = subMilliseconds(originalDate, timezoneOffset);
56116    var formatterOptions = {
56117      firstWeekContainsDate: firstWeekContainsDate,
56118      weekStartsOn: weekStartsOn,
56119      locale: locale,
56120      _originalDate: originalDate
56121    };
56122    var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) {
56123      var firstCharacter = substring[0];
56124  
56125      if (firstCharacter === 'p' || firstCharacter === 'P') {
56126        var longFormatter = format_longFormatters[firstCharacter];
56127        return longFormatter(substring, locale.formatLong);
56128      }
56129  
56130      return substring;
56131    }).join('').match(formattingTokensRegExp).map(function (substring) {
56132      // Replace two single quote characters with one single quote character
56133      if (substring === "''") {
56134        return "'";
56135      }
56136  
56137      var firstCharacter = substring[0];
56138  
56139      if (firstCharacter === "'") {
56140        return cleanEscapedString(substring);
56141      }
56142  
56143      var formatter = format_formatters[firstCharacter];
56144  
56145      if (formatter) {
56146        if (!(options !== null && options !== void 0 && options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(substring)) {
56147          throwProtectedError(substring, dirtyFormatStr, String(dirtyDate));
56148        }
56149  
56150        if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(substring)) {
56151          throwProtectedError(substring, dirtyFormatStr, String(dirtyDate));
56152        }
56153  
56154        return formatter(utcDate, substring, locale.localize, formatterOptions);
56155      }
56156  
56157      if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
56158        throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`');
56159      }
56160  
56161      return substring;
56162    }).join('');
56163    return result;
56164  }
56165  
56166  function cleanEscapedString(input) {
56167    var matched = input.match(escapedStringRegExp);
56168  
56169    if (!matched) {
56170      return input;
56171    }
56172  
56173    return matched[1].replace(doubleQuoteRegExp, "'");
56174  }
56175  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameMonth/index.js
56176  
56177  
56178  /**
56179   * @name isSameMonth
56180   * @category Month Helpers
56181   * @summary Are the given dates in the same month (and year)?
56182   *
56183   * @description
56184   * Are the given dates in the same month (and year)?
56185   *
56186   * @param {Date|Number} dateLeft - the first date to check
56187   * @param {Date|Number} dateRight - the second date to check
56188   * @returns {Boolean} the dates are in the same month (and year)
56189   * @throws {TypeError} 2 arguments required
56190   *
56191   * @example
56192   * // Are 2 September 2014 and 25 September 2014 in the same month?
56193   * const result = isSameMonth(new Date(2014, 8, 2), new Date(2014, 8, 25))
56194   * //=> true
56195   *
56196   * @example
56197   * // Are 2 September 2014 and 25 September 2015 in the same month?
56198   * const result = isSameMonth(new Date(2014, 8, 2), new Date(2015, 8, 25))
56199   * //=> false
56200   */
56201  
56202  function isSameMonth(dirtyDateLeft, dirtyDateRight) {
56203    requiredArgs_requiredArgs(2, arguments);
56204    var dateLeft = toDate_toDate(dirtyDateLeft);
56205    var dateRight = toDate_toDate(dirtyDateRight);
56206    return dateLeft.getFullYear() === dateRight.getFullYear() && dateLeft.getMonth() === dateRight.getMonth();
56207  }
56208  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isEqual/index.js
56209  
56210  
56211  /**
56212   * @name isEqual
56213   * @category Common Helpers
56214   * @summary Are the given dates equal?
56215   *
56216   * @description
56217   * Are the given dates equal?
56218   *
56219   * @param {Date|Number} dateLeft - the first date to compare
56220   * @param {Date|Number} dateRight - the second date to compare
56221   * @returns {Boolean} the dates are equal
56222   * @throws {TypeError} 2 arguments required
56223   *
56224   * @example
56225   * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
56226   * const result = isEqual(
56227   *   new Date(2014, 6, 2, 6, 30, 45, 0),
56228   *   new Date(2014, 6, 2, 6, 30, 45, 500)
56229   * )
56230   * //=> false
56231   */
56232  
56233  function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) {
56234    requiredArgs_requiredArgs(2, arguments);
56235    var dateLeft = toDate_toDate(dirtyLeftDate);
56236    var dateRight = toDate_toDate(dirtyRightDate);
56237    return dateLeft.getTime() === dateRight.getTime();
56238  }
56239  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameDay/index.js
56240  
56241  
56242  /**
56243   * @name isSameDay
56244   * @category Day Helpers
56245   * @summary Are the given dates in the same day (and year and month)?
56246   *
56247   * @description
56248   * Are the given dates in the same day (and year and month)?
56249   *
56250   * @param {Date|Number} dateLeft - the first date to check
56251   * @param {Date|Number} dateRight - the second date to check
56252   * @returns {Boolean} the dates are in the same day (and year and month)
56253   * @throws {TypeError} 2 arguments required
56254   *
56255   * @example
56256   * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
56257   * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
56258   * //=> true
56259   *
56260   * @example
56261   * // Are 4 September and 4 October in the same day?
56262   * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
56263   * //=> false
56264   *
56265   * @example
56266   * // Are 4 September, 2014 and 4 September, 2015 in the same day?
56267   * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
56268   * //=> false
56269   */
56270  
56271  function isSameDay(dirtyDateLeft, dirtyDateRight) {
56272    requiredArgs_requiredArgs(2, arguments);
56273    var dateLeftStartOfDay = startOfDay_startOfDay(dirtyDateLeft);
56274    var dateRightStartOfDay = startOfDay_startOfDay(dirtyDateRight);
56275    return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
56276  }
56277  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addDays/index.js
56278  
56279  
56280  
56281  /**
56282   * @name addDays
56283   * @category Day Helpers
56284   * @summary Add the specified number of days to the given date.
56285   *
56286   * @description
56287   * Add the specified number of days to the given date.
56288   *
56289   * @param {Date|Number} date - the date to be changed
56290   * @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`.
56291   * @returns {Date} - the new date with the days added
56292   * @throws {TypeError} - 2 arguments required
56293   *
56294   * @example
56295   * // Add 10 days to 1 September 2014:
56296   * const result = addDays(new Date(2014, 8, 1), 10)
56297   * //=> Thu Sep 11 2014 00:00:00
56298   */
56299  
56300  function addDays_addDays(dirtyDate, dirtyAmount) {
56301    requiredArgs_requiredArgs(2, arguments);
56302    var date = toDate_toDate(dirtyDate);
56303    var amount = toInteger_toInteger(dirtyAmount);
56304  
56305    if (isNaN(amount)) {
56306      return new Date(NaN);
56307    }
56308  
56309    if (!amount) {
56310      // If 0 days, no-op to avoid changing times in the hour before end of DST
56311      return date;
56312    }
56313  
56314    date.setDate(date.getDate() + amount);
56315    return date;
56316  }
56317  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addWeeks/index.js
56318  
56319  
56320  
56321  /**
56322   * @name addWeeks
56323   * @category Week Helpers
56324   * @summary Add the specified number of weeks to the given date.
56325   *
56326   * @description
56327   * Add the specified number of week to the given date.
56328   *
56329   * @param {Date|Number} date - the date to be changed
56330   * @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`.
56331   * @returns {Date} the new date with the weeks added
56332   * @throws {TypeError} 2 arguments required
56333   *
56334   * @example
56335   * // Add 4 weeks to 1 September 2014:
56336   * const result = addWeeks(new Date(2014, 8, 1), 4)
56337   * //=> Mon Sep 29 2014 00:00:00
56338   */
56339  
56340  function addWeeks_addWeeks(dirtyDate, dirtyAmount) {
56341    requiredArgs_requiredArgs(2, arguments);
56342    var amount = toInteger_toInteger(dirtyAmount);
56343    var days = amount * 7;
56344    return addDays_addDays(dirtyDate, days);
56345  }
56346  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subWeeks/index.js
56347  
56348  
56349  
56350  /**
56351   * @name subWeeks
56352   * @category Week Helpers
56353   * @summary Subtract the specified number of weeks from the given date.
56354   *
56355   * @description
56356   * Subtract the specified number of weeks from the given date.
56357   *
56358   * @param {Date|Number} date - the date to be changed
56359   * @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`.
56360   * @returns {Date} the new date with the weeks subtracted
56361   * @throws {TypeError} 2 arguments required
56362   *
56363   * @example
56364   * // Subtract 4 weeks from 1 September 2014:
56365   * const result = subWeeks(new Date(2014, 8, 1), 4)
56366   * //=> Mon Aug 04 2014 00:00:00
56367   */
56368  
56369  function subWeeks(dirtyDate, dirtyAmount) {
56370    requiredArgs_requiredArgs(2, arguments);
56371    var amount = toInteger_toInteger(dirtyAmount);
56372    return addWeeks_addWeeks(dirtyDate, -amount);
56373  }
56374  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfWeek/index.js
56375  
56376  
56377  
56378  
56379  /**
56380   * @name startOfWeek
56381   * @category Week Helpers
56382   * @summary Return the start of a week for the given date.
56383   *
56384   * @description
56385   * Return the start of a week for the given date.
56386   * The result will be in the local timezone.
56387   *
56388   * @param {Date|Number} date - the original date
56389   * @param {Object} [options] - an object with options.
56390   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
56391   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
56392   * @returns {Date} the start of a week
56393   * @throws {TypeError} 1 argument required
56394   * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
56395   *
56396   * @example
56397   * // The start of a week for 2 September 2014 11:55:00:
56398   * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
56399   * //=> Sun Aug 31 2014 00:00:00
56400   *
56401   * @example
56402   * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
56403   * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
56404   * //=> Mon Sep 01 2014 00:00:00
56405   */
56406  
56407  function startOfWeek_startOfWeek(dirtyDate, options) {
56408    var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
56409  
56410    requiredArgs_requiredArgs(1, arguments);
56411    var defaultOptions = defaultOptions_getDefaultOptions();
56412    var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
56413  
56414    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
56415      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
56416    }
56417  
56418    var date = toDate_toDate(dirtyDate);
56419    var day = date.getDay();
56420    var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
56421    date.setDate(date.getDate() - diff);
56422    date.setHours(0, 0, 0, 0);
56423    return date;
56424  }
56425  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/endOfWeek/index.js
56426  
56427  
56428  
56429  
56430  
56431  /**
56432   * @name endOfWeek
56433   * @category Week Helpers
56434   * @summary Return the end of a week for the given date.
56435   *
56436   * @description
56437   * Return the end of a week for the given date.
56438   * The result will be in the local timezone.
56439   *
56440   * @param {Date|Number} date - the original date
56441   * @param {Object} [options] - an object with options.
56442   * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
56443   * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
56444   * @returns {Date} the end of a week
56445   * @throws {TypeError} 1 argument required
56446   * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
56447   *
56448   * @example
56449   * // The end of a week for 2 September 2014 11:55:00:
56450   * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))
56451   * //=> Sat Sep 06 2014 23:59:59.999
56452   *
56453   * @example
56454   * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:
56455   * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
56456   * //=> Sun Sep 07 2014 23:59:59.999
56457   */
56458  function endOfWeek_endOfWeek(dirtyDate, options) {
56459    var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2;
56460  
56461    requiredArgs_requiredArgs(1, arguments);
56462    var defaultOptions = defaultOptions_getDefaultOptions();
56463    var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
56464  
56465    if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
56466      throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
56467    }
56468  
56469    var date = toDate_toDate(dirtyDate);
56470    var day = date.getDay();
56471    var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
56472    date.setDate(date.getDate() + diff);
56473    date.setHours(23, 59, 59, 999);
56474    return date;
56475  }
56476  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-right.js
56477  
56478  /**
56479   * WordPress dependencies
56480   */
56481  
56482  const arrowRight = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
56483    xmlns: "http://www.w3.org/2000/svg",
56484    viewBox: "0 0 24 24"
56485  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
56486    d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z"
56487  }));
56488  /* harmony default export */ const arrow_right = (arrowRight);
56489  
56490  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-left.js
56491  
56492  /**
56493   * WordPress dependencies
56494   */
56495  
56496  const arrowLeft = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
56497    xmlns: "http://www.w3.org/2000/svg",
56498    viewBox: "0 0 24 24"
56499  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
56500    d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z"
56501  }));
56502  /* harmony default export */ const arrow_left = (arrowLeft);
56503  
56504  ;// CONCATENATED MODULE: external ["wp","date"]
56505  const external_wp_date_namespaceObject = window["wp"]["date"];
56506  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date/styles.js
56507  
56508  function 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)."; }
56509  /**
56510   * External dependencies
56511   */
56512  
56513  /**
56514   * Internal dependencies
56515   */
56516  
56517  
56518  
56519  
56520  
56521  const styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
56522    target: "e105ri6r5"
56523  } : 0)( true ? {
56524    name: "1khn195",
56525    styles: "box-sizing:border-box"
56526  } : 0);
56527  const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
56528    target: "e105ri6r4"
56529  } : 0)("margin-bottom:", space(4), ";" + ( true ? "" : 0));
56530  const NavigatorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
56531    target: "e105ri6r3"
56532  } : 0)("font-size:", config_values.fontSize, ";font-weight:", config_values.fontWeight, ";strong{font-weight:", config_values.fontWeightHeading, ";}" + ( true ? "" : 0));
56533  const Calendar = emotion_styled_base_browser_esm("div",  true ? {
56534    target: "e105ri6r2"
56535  } : 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));
56536  const DayOfWeek = emotion_styled_base_browser_esm("div",  true ? {
56537    target: "e105ri6r1"
56538  } : 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));
56539  const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
56540    shouldForwardProp: prop => !['column', 'isSelected', 'isToday', 'hasEvents'].includes(prop),
56541    target: "e105ri6r0"
56542  } : 0)("grid-column:", props => props.column, ";position:relative;justify-content:center;", props => props.column === 1 && `
56543          justify-self: start;
56544          `, " ", props => props.column === 7 && `
56545          justify-self: end;
56546          `, " ", props => props.disabled && `
56547          pointer-events: none;
56548          `, " &&&{border-radius:100%;height:", space(8), ";width:", space(8), ";", props => props.isSelected && `
56549              background: $COLORS.theme.accent};
56550              color: $COLORS.white};
56551              `, " ", props => !props.isSelected && props.isToday && `
56552              background: $COLORS.gray[200]};
56553              `, ";}", props => props.hasEvents && `
56554          ::before {
56555              background: $props.isSelected ? COLORS.white : COLORS.theme.accent};
56556              border-radius: 2px;
56557              bottom: 2px;
56558              content: " ";
56559              height: 4px;
56560              left: 50%;
56561              margin-left: -2px;
56562              position: absolute;
56563              width: 4px;
56564          }
56565          `, ";" + ( true ? "" : 0));
56566  
56567  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/utils.js
56568  /**
56569   * External dependencies
56570   */
56571  
56572  
56573  /**
56574   * Like date-fn's toDate, but tries to guess the format when a string is
56575   * given.
56576   *
56577   * @param input Value to turn into a date.
56578   */
56579  function inputToDate(input) {
56580    if (typeof input === 'string') {
56581      return new Date(input);
56582    }
56583    return toDate_toDate(input);
56584  }
56585  
56586  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/constants.js
56587  const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
56588  
56589  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date/index.js
56590  
56591  /**
56592   * External dependencies
56593   */
56594  
56595  
56596  /**
56597   * WordPress dependencies
56598   */
56599  
56600  
56601  
56602  
56603  
56604  /**
56605   * Internal dependencies
56606   */
56607  
56608  
56609  
56610  
56611  
56612  
56613  /**
56614   * DatePicker is a React component that renders a calendar for date selection.
56615   *
56616   * ```jsx
56617   * import { DatePicker } from '@wordpress/components';
56618   * import { useState } from '@wordpress/element';
56619   *
56620   * const MyDatePicker = () => {
56621   *   const [ date, setDate ] = useState( new Date() );
56622   *
56623   *   return (
56624   *     <DatePicker
56625   *       currentDate={ date }
56626   *       onChange={ ( newDate ) => setDate( newDate ) }
56627   *     />
56628   *   );
56629   * };
56630   * ```
56631   */
56632  function DatePicker({
56633    currentDate,
56634    onChange,
56635    events = [],
56636    isInvalidDate,
56637    onMonthPreviewed,
56638    startOfWeek: weekStartsOn = 0
56639  }) {
56640    const date = currentDate ? inputToDate(currentDate) : new Date();
56641    const {
56642      calendar,
56643      viewing,
56644      setSelected,
56645      setViewing,
56646      isSelected,
56647      viewPreviousMonth,
56648      viewNextMonth
56649    } = useLilius({
56650      selected: [startOfDay_startOfDay(date)],
56651      viewing: startOfDay_startOfDay(date),
56652      weekStartsOn
56653    });
56654  
56655    // Used to implement a roving tab index. Tracks the day that receives focus
56656    // when the user tabs into the calendar.
56657    const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay_startOfDay(date));
56658  
56659    // Allows us to only programmatically focus() a day when focus was already
56660    // within the calendar. This stops us stealing focus from e.g. a TimePicker
56661    // input.
56662    const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0,external_wp_element_namespaceObject.useState)(false);
56663  
56664    // Update internal state when currentDate prop changes.
56665    const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate);
56666    if (currentDate !== prevCurrentDate) {
56667      setPrevCurrentDate(currentDate);
56668      setSelected([startOfDay_startOfDay(date)]);
56669      setViewing(startOfDay_startOfDay(date));
56670      setFocusable(startOfDay_startOfDay(date));
56671    }
56672    return (0,external_React_.createElement)(styles_Wrapper, {
56673      className: "components-datetime__date",
56674      role: "application",
56675      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar')
56676    }, (0,external_React_.createElement)(Navigator, null, (0,external_React_.createElement)(build_module_button, {
56677      icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left,
56678      variant: "tertiary",
56679      "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'),
56680      onClick: () => {
56681        viewPreviousMonth();
56682        setFocusable(subMonths_subMonths(focusable, 1));
56683        onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT));
56684      }
56685    }), (0,external_React_.createElement)(NavigatorHeading, {
56686      level: 3
56687    }, (0,external_React_.createElement)("strong", null, (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset())), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())), (0,external_React_.createElement)(build_module_button, {
56688      icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right,
56689      variant: "tertiary",
56690      "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'),
56691      onClick: () => {
56692        viewNextMonth();
56693        setFocusable(addMonths_addMonths(focusable, 1));
56694        onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT));
56695      }
56696    })), (0,external_React_.createElement)(Calendar, {
56697      onFocus: () => setIsFocusWithinCalendar(true),
56698      onBlur: () => setIsFocusWithinCalendar(false)
56699    }, calendar[0][0].map(day => (0,external_React_.createElement)(DayOfWeek, {
56700      key: day.toString()
56701    }, (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => {
56702      if (!isSameMonth(day, viewing)) {
56703        return null;
56704      }
56705      return (0,external_React_.createElement)(date_Day, {
56706        key: day.toString(),
56707        day: day,
56708        column: index + 1,
56709        isSelected: isSelected(day),
56710        isFocusable: isEqual_isEqual(day, focusable),
56711        isFocusAllowed: isFocusWithinCalendar,
56712        isToday: isSameDay(day, new Date()),
56713        isInvalid: isInvalidDate ? isInvalidDate(day) : false,
56714        numEvents: events.filter(event => isSameDay(event.date, day)).length,
56715        onClick: () => {
56716          setSelected([day]);
56717          setFocusable(day);
56718          onChange?.(format(
56719          // Don't change the selected date's time fields.
56720          new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT));
56721        },
56722        onKeyDown: event => {
56723          let nextFocusable;
56724          if (event.key === 'ArrowLeft') {
56725            nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1);
56726          }
56727          if (event.key === 'ArrowRight') {
56728            nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1);
56729          }
56730          if (event.key === 'ArrowUp') {
56731            nextFocusable = subWeeks(day, 1);
56732          }
56733          if (event.key === 'ArrowDown') {
56734            nextFocusable = addWeeks_addWeeks(day, 1);
56735          }
56736          if (event.key === 'PageUp') {
56737            nextFocusable = subMonths_subMonths(day, 1);
56738          }
56739          if (event.key === 'PageDown') {
56740            nextFocusable = addMonths_addMonths(day, 1);
56741          }
56742          if (event.key === 'Home') {
56743            nextFocusable = startOfWeek_startOfWeek(day);
56744          }
56745          if (event.key === 'End') {
56746            nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day));
56747          }
56748          if (nextFocusable) {
56749            event.preventDefault();
56750            setFocusable(nextFocusable);
56751            if (!isSameMonth(nextFocusable, viewing)) {
56752              setViewing(nextFocusable);
56753              onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT));
56754            }
56755          }
56756        }
56757      });
56758    }))));
56759  }
56760  function date_Day({
56761    day,
56762    column,
56763    isSelected,
56764    isFocusable,
56765    isFocusAllowed,
56766    isToday,
56767    isInvalid,
56768    numEvents,
56769    onClick,
56770    onKeyDown
56771  }) {
56772    const ref = (0,external_wp_element_namespaceObject.useRef)();
56773  
56774    // Focus the day when it becomes focusable, e.g. because an arrow key is
56775    // pressed. Only do this if focus is allowed - this stops us stealing focus
56776    // from e.g. a TimePicker input.
56777    (0,external_wp_element_namespaceObject.useEffect)(() => {
56778      if (ref.current && isFocusable && isFocusAllowed) {
56779        ref.current.focus();
56780      }
56781      // isFocusAllowed is not a dep as there is no point calling focus() on
56782      // an already focused element.
56783      // eslint-disable-next-line react-hooks/exhaustive-deps
56784    }, [isFocusable]);
56785    return (0,external_React_.createElement)(DayButton, {
56786      ref: ref,
56787      className: "components-datetime__date__day" // Unused, for backwards compatibility.
56788      ,
56789      disabled: isInvalid,
56790      tabIndex: isFocusable ? 0 : -1,
56791      "aria-label": getDayLabel(day, isSelected, numEvents),
56792      column: column,
56793      isSelected: isSelected,
56794      isToday: isToday,
56795      hasEvents: numEvents > 0,
56796      onClick: onClick,
56797      onKeyDown: onKeyDown
56798    }, (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset()));
56799  }
56800  function getDayLabel(date, isSelected, numEvents) {
56801    const {
56802      formats
56803    } = (0,external_wp_date_namespaceObject.getSettings)();
56804    const localizedDate = (0,external_wp_date_namespaceObject.dateI18n)(formats.date, date, -date.getTimezoneOffset());
56805    if (isSelected && numEvents > 0) {
56806      return (0,external_wp_i18n_namespaceObject.sprintf)(
56807      // translators: 1: The calendar date. 2: Number of events on the calendar date.
56808      (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);
56809    } else if (isSelected) {
56810      return (0,external_wp_i18n_namespaceObject.sprintf)(
56811      // translators: %s: The calendar date.
56812      (0,external_wp_i18n_namespaceObject.__)('%1$s. Selected'), localizedDate);
56813    } else if (numEvents > 0) {
56814      return (0,external_wp_i18n_namespaceObject.sprintf)(
56815      // translators: 1: The calendar date. 2: Number of events on the calendar date.
56816      (0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents);
56817    }
56818    return localizedDate;
56819  }
56820  /* harmony default export */ const date = (DatePicker);
56821  
56822  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfMinute/index.js
56823  
56824  
56825  /**
56826   * @name startOfMinute
56827   * @category Minute Helpers
56828   * @summary Return the start of a minute for the given date.
56829   *
56830   * @description
56831   * Return the start of a minute for the given date.
56832   * The result will be in the local timezone.
56833   *
56834   * @param {Date|Number} date - the original date
56835   * @returns {Date} the start of a minute
56836   * @throws {TypeError} 1 argument required
56837   *
56838   * @example
56839   * // The start of a minute for 1 December 2014 22:15:45.400:
56840   * const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400))
56841   * //=> Mon Dec 01 2014 22:15:00
56842   */
56843  
56844  function startOfMinute(dirtyDate) {
56845    requiredArgs_requiredArgs(1, arguments);
56846    var date = toDate_toDate(dirtyDate);
56847    date.setSeconds(0, 0);
56848    return date;
56849  }
56850  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/getDaysInMonth/index.js
56851  
56852  
56853  /**
56854   * @name getDaysInMonth
56855   * @category Month Helpers
56856   * @summary Get the number of days in a month of the given date.
56857   *
56858   * @description
56859   * Get the number of days in a month of the given date.
56860   *
56861   * @param {Date|Number} date - the given date
56862   * @returns {Number} the number of days in a month
56863   * @throws {TypeError} 1 argument required
56864   *
56865   * @example
56866   * // How many days are in February 2000?
56867   * const result = getDaysInMonth(new Date(2000, 1))
56868   * //=> 29
56869   */
56870  
56871  function getDaysInMonth_getDaysInMonth(dirtyDate) {
56872    requiredArgs_requiredArgs(1, arguments);
56873    var date = toDate_toDate(dirtyDate);
56874    var year = date.getFullYear();
56875    var monthIndex = date.getMonth();
56876    var lastDayOfMonth = new Date(0);
56877    lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
56878    lastDayOfMonth.setHours(0, 0, 0, 0);
56879    return lastDayOfMonth.getDate();
56880  }
56881  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setMonth/index.js
56882  
56883  
56884  
56885  
56886  /**
56887   * @name setMonth
56888   * @category Month Helpers
56889   * @summary Set the month to the given date.
56890   *
56891   * @description
56892   * Set the month to the given date.
56893   *
56894   * @param {Date|Number} date - the date to be changed
56895   * @param {Number} month - the month of the new date
56896   * @returns {Date} the new date with the month set
56897   * @throws {TypeError} 2 arguments required
56898   *
56899   * @example
56900   * // Set February to 1 September 2014:
56901   * const result = setMonth(new Date(2014, 8, 1), 1)
56902   * //=> Sat Feb 01 2014 00:00:00
56903   */
56904  
56905  function setMonth_setMonth(dirtyDate, dirtyMonth) {
56906    requiredArgs_requiredArgs(2, arguments);
56907    var date = toDate_toDate(dirtyDate);
56908    var month = toInteger_toInteger(dirtyMonth);
56909    var year = date.getFullYear();
56910    var day = date.getDate();
56911    var dateWithDesiredMonth = new Date(0);
56912    dateWithDesiredMonth.setFullYear(year, month, 15);
56913    dateWithDesiredMonth.setHours(0, 0, 0, 0);
56914    var daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month
56915    // if the original date was the last day of the longer month
56916  
56917    date.setMonth(month, Math.min(day, daysInMonth));
56918    return date;
56919  }
56920  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/set/index.js
56921  function set_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { set_typeof = function _typeof(obj) { return typeof obj; }; } else { set_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return set_typeof(obj); }
56922  
56923  
56924  
56925  
56926  
56927  
56928  /**
56929   * @name set
56930   * @category Common Helpers
56931   * @summary Set date values to a given date.
56932   *
56933   * @description
56934   * Set date values to a given date.
56935   *
56936   * Sets time values to date from object `values`.
56937   * A value is not set if it is undefined or null or doesn't exist in `values`.
56938   *
56939   * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts
56940   * to use native `Date#setX` methods. If you use this function, you may not want to include the
56941   * other `setX` functions that date-fns provides if you are concerned about the bundle size.
56942   *
56943   * @param {Date|Number} date - the date to be changed
56944   * @param {Object} values - an object with options
56945   * @param {Number} [values.year] - the number of years to be set
56946   * @param {Number} [values.month] - the number of months to be set
56947   * @param {Number} [values.date] - the number of days to be set
56948   * @param {Number} [values.hours] - the number of hours to be set
56949   * @param {Number} [values.minutes] - the number of minutes to be set
56950   * @param {Number} [values.seconds] - the number of seconds to be set
56951   * @param {Number} [values.milliseconds] - the number of milliseconds to be set
56952   * @returns {Date} the new date with options set
56953   * @throws {TypeError} 2 arguments required
56954   * @throws {RangeError} `values` must be an object
56955   *
56956   * @example
56957   * // Transform 1 September 2014 into 20 October 2015 in a single line:
56958   * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 })
56959   * //=> Tue Oct 20 2015 00:00:00
56960   *
56961   * @example
56962   * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00:
56963   * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 })
56964   * //=> Mon Sep 01 2014 12:23:45
56965   */
56966  function set_set(dirtyDate, values) {
56967    requiredArgs_requiredArgs(2, arguments);
56968  
56969    if (set_typeof(values) !== 'object' || values === null) {
56970      throw new RangeError('values parameter must be an object');
56971    }
56972  
56973    var date = toDate_toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date
56974  
56975    if (isNaN(date.getTime())) {
56976      return new Date(NaN);
56977    }
56978  
56979    if (values.year != null) {
56980      date.setFullYear(values.year);
56981    }
56982  
56983    if (values.month != null) {
56984      date = setMonth_setMonth(date, values.month);
56985    }
56986  
56987    if (values.date != null) {
56988      date.setDate(toInteger_toInteger(values.date));
56989    }
56990  
56991    if (values.hours != null) {
56992      date.setHours(toInteger_toInteger(values.hours));
56993    }
56994  
56995    if (values.minutes != null) {
56996      date.setMinutes(toInteger_toInteger(values.minutes));
56997    }
56998  
56999    if (values.seconds != null) {
57000      date.setSeconds(toInteger_toInteger(values.seconds));
57001    }
57002  
57003    if (values.milliseconds != null) {
57004      date.setMilliseconds(toInteger_toInteger(values.milliseconds));
57005    }
57006  
57007    return date;
57008  }
57009  ;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setHours/index.js
57010  
57011  
57012  
57013  /**
57014   * @name setHours
57015   * @category Hour Helpers
57016   * @summary Set the hours to the given date.
57017   *
57018   * @description
57019   * Set the hours to the given date.
57020   *
57021   * @param {Date|Number} date - the date to be changed
57022   * @param {Number} hours - the hours of the new date
57023   * @returns {Date} the new date with the hours set
57024   * @throws {TypeError} 2 arguments required
57025   *
57026   * @example
57027   * // Set 4 hours to 1 September 2014 11:30:00:
57028   * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)
57029   * //=> Mon Sep 01 2014 04:30:00
57030   */
57031  
57032  function setHours(dirtyDate, dirtyHours) {
57033    requiredArgs_requiredArgs(2, arguments);
57034    var date = toDate_toDate(dirtyDate);
57035    var hours = toInteger_toInteger(dirtyHours);
57036    date.setHours(hours);
57037    return date;
57038  }
57039  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/styles.js
57040  
57041  function time_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
57042  /**
57043   * External dependencies
57044   */
57045  
57046  
57047  
57048  /**
57049   * Internal dependencies
57050   */
57051  
57052  
57053  
57054  
57055  const time_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
57056    target: "evcr2319"
57057  } : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0));
57058  const Fieldset = emotion_styled_base_browser_esm("fieldset",  true ? {
57059    target: "evcr2318"
57060  } : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0));
57061  const TimeWrapper = emotion_styled_base_browser_esm("div",  true ? {
57062    target: "evcr2317"
57063  } : 0)( true ? {
57064    name: "pd0mhc",
57065    styles: "direction:ltr;display:flex"
57066  } : 0);
57067  const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{padding-left:", space(2), ";padding-right:", space(2), ";text-align:center;}" + ( true ? "" : 0),  true ? "" : 0);
57068  const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
57069    target: "evcr2316"
57070  } : 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));
57071  const TimeSeparator = emotion_styled_base_browser_esm("span",  true ? {
57072    target: "evcr2315"
57073  } : 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));
57074  const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
57075    target: "evcr2314"
57076  } : 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));
57077  
57078  // Ideally we wouldn't need a wrapper, but can't otherwise target the
57079  // <BaseControl> in <SelectControl>
57080  const MonthSelectWrapper = emotion_styled_base_browser_esm("div",  true ? {
57081    target: "evcr2313"
57082  } : 0)( true ? {
57083    name: "1ff36h2",
57084    styles: "flex-grow:1"
57085  } : 0);
57086  const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
57087    target: "evcr2312"
57088  } : 0)(baseInput, " width:", space(9), ";" + ( true ? "" : 0));
57089  const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control,  true ? {
57090    target: "evcr2311"
57091  } : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0));
57092  const TimeZone = emotion_styled_base_browser_esm("div",  true ? {
57093    target: "evcr2310"
57094  } : 0)( true ? {
57095    name: "ebu3jh",
57096    styles: "text-decoration:underline dotted"
57097  } : 0);
57098  
57099  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/timezone.js
57100  
57101  /**
57102   * WordPress dependencies
57103   */
57104  
57105  
57106  
57107  /**
57108   * Internal dependencies
57109   */
57110  
57111  
57112  
57113  /**
57114   * Displays timezone information when user timezone is different from site
57115   * timezone.
57116   */
57117  const timezone_TimeZone = () => {
57118    const {
57119      timezone
57120    } = (0,external_wp_date_namespaceObject.getSettings)();
57121  
57122    // Convert timezone offset to hours.
57123    const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60);
57124  
57125    // System timezone and user timezone match, nothing needed.
57126    // Compare as numbers because it comes over as string.
57127    if (Number(timezone.offset) === userTimezoneOffset) {
57128      return null;
57129    }
57130    const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
57131    const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC$offsetSymbol}$timezone.offsetFormatted}`;
57132  
57133    // Replace underscore with space in strings like `America/Costa_Rica`.
57134    const prettyTimezoneString = timezone.string.replace('_', ' ');
57135    const timezoneDetail = 'UTC' === timezone.string ? (0,external_wp_i18n_namespaceObject.__)('Coordinated Universal Time') : `($zoneAbbr}) $prettyTimezoneString}`;
57136  
57137    // When the prettyTimezoneString is empty, there is no additional timezone
57138    // detail information to show in a Tooltip.
57139    const hasNoAdditionalTimezoneDetail = prettyTimezoneString.trim().length === 0;
57140    return hasNoAdditionalTimezoneDetail ? (0,external_React_.createElement)(TimeZone, {
57141      className: "components-datetime__timezone"
57142    }, zoneAbbr) : (0,external_React_.createElement)(tooltip, {
57143      placement: "top",
57144      text: timezoneDetail
57145    }, (0,external_React_.createElement)(TimeZone, {
57146      className: "components-datetime__timezone"
57147    }, zoneAbbr));
57148  };
57149  /* harmony default export */ const timezone = (timezone_TimeZone);
57150  
57151  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time/index.js
57152  
57153  /**
57154   * External dependencies
57155   */
57156  
57157  
57158  /**
57159   * WordPress dependencies
57160   */
57161  
57162  
57163  
57164  /**
57165   * Internal dependencies
57166   */
57167  
57168  
57169  
57170  
57171  
57172  
57173  
57174  
57175  
57176  
57177  
57178  function from12hTo24h(hours, isPm) {
57179    return isPm ? (hours % 12 + 12) % 24 : hours % 12;
57180  }
57181  
57182  /**
57183   * Creates an InputControl reducer used to pad an input so that it is always a
57184   * given width. For example, the hours and minutes inputs are padded to 2 so
57185   * that '4' appears as '04'.
57186   *
57187   * @param pad How many digits the value should be.
57188   */
57189  function buildPadInputStateReducer(pad) {
57190    return (state, action) => {
57191      const nextState = {
57192        ...state
57193      };
57194      if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {
57195        if (nextState.value !== undefined) {
57196          nextState.value = nextState.value.toString().padStart(pad, '0');
57197        }
57198      }
57199      return nextState;
57200    };
57201  }
57202  
57203  /**
57204   * TimePicker is a React component that renders a clock for time selection.
57205   *
57206   * ```jsx
57207   * import { TimePicker } from '@wordpress/components';
57208   * import { useState } from '@wordpress/element';
57209   *
57210   * const MyTimePicker = () => {
57211   *   const [ time, setTime ] = useState( new Date() );
57212   *
57213   *   return (
57214   *     <TimePicker
57215   *       currentTime={ date }
57216   *       onChange={ ( newTime ) => setTime( newTime ) }
57217   *       is12Hour
57218   *     />
57219   *   );
57220   * };
57221   * ```
57222   */
57223  function TimePicker({
57224    is12Hour,
57225    currentTime,
57226    onChange
57227  }) {
57228    const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() =>
57229    // Truncate the date at the minutes, see: #15495.
57230    currentTime ? startOfMinute(inputToDate(currentTime)) : new Date());
57231  
57232    // Reset the state when currentTime changed.
57233    // TODO: useEffect() shouldn't be used like this, causes an unnecessary render
57234    (0,external_wp_element_namespaceObject.useEffect)(() => {
57235      setDate(currentTime ? startOfMinute(inputToDate(currentTime)) : new Date());
57236    }, [currentTime]);
57237    const {
57238      day,
57239      month,
57240      year,
57241      minutes,
57242      hours,
57243      am
57244    } = (0,external_wp_element_namespaceObject.useMemo)(() => ({
57245      day: format(date, 'dd'),
57246      month: format(date, 'MM'),
57247      year: format(date, 'yyyy'),
57248      minutes: format(date, 'mm'),
57249      hours: format(date, is12Hour ? 'hh' : 'HH'),
57250      am: format(date, 'a')
57251    }), [date, is12Hour]);
57252    const buildNumberControlChangeCallback = method => {
57253      const callback = (value, {
57254        event
57255      }) => {
57256        var _ownerDocument$defaul;
57257        // `instanceof` checks need to get the instance definition from the
57258        // corresponding window object — therefore, the following logic makes
57259        // the component work correctly even when rendered inside an iframe.
57260        const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
57261        if (!(event.target instanceof HTMLInputElementInstance)) {
57262          return;
57263        }
57264        if (!event.target.validity.valid) {
57265          return;
57266        }
57267  
57268        // We can safely assume value is a number if target is valid.
57269        let numberValue = Number(value);
57270  
57271        // If the 12-hour format is being used and the 'PM' period is
57272        // selected, then the incoming value (which ranges 1-12) should be
57273        // increased by 12 to match the expected 24-hour format.
57274        if (method === 'hours' && is12Hour) {
57275          numberValue = from12hTo24h(numberValue, am === 'PM');
57276        }
57277        const newDate = set_set(date, {
57278          [method]: numberValue
57279        });
57280        setDate(newDate);
57281        onChange?.(format(newDate, TIMEZONELESS_FORMAT));
57282      };
57283      return callback;
57284    };
57285    function buildAmPmChangeCallback(value) {
57286      return () => {
57287        if (am === value) {
57288          return;
57289        }
57290        const parsedHours = parseInt(hours, 10);
57291        const newDate = setHours(date, from12hTo24h(parsedHours, value === 'PM'));
57292        setDate(newDate);
57293        onChange?.(format(newDate, TIMEZONELESS_FORMAT));
57294      };
57295    }
57296    const dayField = (0,external_React_.createElement)(DayInput, {
57297      className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
57298      ,
57299      label: (0,external_wp_i18n_namespaceObject.__)('Day'),
57300      hideLabelFromVision: true,
57301      __next40pxDefaultSize: true,
57302      value: day,
57303      step: 1,
57304      min: 1,
57305      max: 31,
57306      required: true,
57307      spinControls: "none",
57308      isPressEnterToChange: true,
57309      isDragEnabled: false,
57310      isShiftStepEnabled: false,
57311      onChange: buildNumberControlChangeCallback('date')
57312    });
57313    const monthField = (0,external_React_.createElement)(MonthSelectWrapper, null, (0,external_React_.createElement)(select_control, {
57314      className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
57315      ,
57316      label: (0,external_wp_i18n_namespaceObject.__)('Month'),
57317      hideLabelFromVision: true,
57318      __next40pxDefaultSize: true,
57319      __nextHasNoMarginBottom: true,
57320      value: month,
57321      options: [{
57322        value: '01',
57323        label: (0,external_wp_i18n_namespaceObject.__)('January')
57324      }, {
57325        value: '02',
57326        label: (0,external_wp_i18n_namespaceObject.__)('February')
57327      }, {
57328        value: '03',
57329        label: (0,external_wp_i18n_namespaceObject.__)('March')
57330      }, {
57331        value: '04',
57332        label: (0,external_wp_i18n_namespaceObject.__)('April')
57333      }, {
57334        value: '05',
57335        label: (0,external_wp_i18n_namespaceObject.__)('May')
57336      }, {
57337        value: '06',
57338        label: (0,external_wp_i18n_namespaceObject.__)('June')
57339      }, {
57340        value: '07',
57341        label: (0,external_wp_i18n_namespaceObject.__)('July')
57342      }, {
57343        value: '08',
57344        label: (0,external_wp_i18n_namespaceObject.__)('August')
57345      }, {
57346        value: '09',
57347        label: (0,external_wp_i18n_namespaceObject.__)('September')
57348      }, {
57349        value: '10',
57350        label: (0,external_wp_i18n_namespaceObject.__)('October')
57351      }, {
57352        value: '11',
57353        label: (0,external_wp_i18n_namespaceObject.__)('November')
57354      }, {
57355        value: '12',
57356        label: (0,external_wp_i18n_namespaceObject.__)('December')
57357      }],
57358      onChange: value => {
57359        const newDate = setMonth_setMonth(date, Number(value) - 1);
57360        setDate(newDate);
57361        onChange?.(format(newDate, TIMEZONELESS_FORMAT));
57362      }
57363    }));
57364    return (0,external_React_.createElement)(time_styles_Wrapper, {
57365      className: "components-datetime__time" // Unused, for backwards compatibility.
57366    }, (0,external_React_.createElement)(Fieldset, null, (0,external_React_.createElement)(base_control.VisualLabel, {
57367      as: "legend",
57368      className: "components-datetime__time-legend" // Unused, for backwards compatibility.
57369    }, (0,external_wp_i18n_namespaceObject.__)('Time')), (0,external_React_.createElement)(h_stack_component, {
57370      className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
57371    }, (0,external_React_.createElement)(TimeWrapper, {
57372      className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
57373    }, (0,external_React_.createElement)(HoursInput, {
57374      className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
57375      ,
57376      label: (0,external_wp_i18n_namespaceObject.__)('Hours'),
57377      hideLabelFromVision: true,
57378      __next40pxDefaultSize: true,
57379      value: hours,
57380      step: 1,
57381      min: is12Hour ? 1 : 0,
57382      max: is12Hour ? 12 : 23,
57383      required: true,
57384      spinControls: "none",
57385      isPressEnterToChange: true,
57386      isDragEnabled: false,
57387      isShiftStepEnabled: false,
57388      onChange: buildNumberControlChangeCallback('hours'),
57389      __unstableStateReducer: buildPadInputStateReducer(2)
57390    }), (0,external_React_.createElement)(TimeSeparator, {
57391      className: "components-datetime__time-separator" // Unused, for backwards compatibility.
57392      ,
57393      "aria-hidden": "true"
57394    }, ":"), (0,external_React_.createElement)(MinutesInput, {
57395      className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
57396      ,
57397      label: (0,external_wp_i18n_namespaceObject.__)('Minutes'),
57398      hideLabelFromVision: true,
57399      __next40pxDefaultSize: true,
57400      value: minutes,
57401      step: 1,
57402      min: 0,
57403      max: 59,
57404      required: true,
57405      spinControls: "none",
57406      isPressEnterToChange: true,
57407      isDragEnabled: false,
57408      isShiftStepEnabled: false,
57409      onChange: buildNumberControlChangeCallback('minutes'),
57410      __unstableStateReducer: buildPadInputStateReducer(2)
57411    })), is12Hour && (0,external_React_.createElement)(button_group, {
57412      className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
57413    }, (0,external_React_.createElement)(build_module_button, {
57414      className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
57415      ,
57416      variant: am === 'AM' ? 'primary' : 'secondary',
57417      __next40pxDefaultSize: true,
57418      onClick: buildAmPmChangeCallback('AM')
57419    }, (0,external_wp_i18n_namespaceObject.__)('AM')), (0,external_React_.createElement)(build_module_button, {
57420      className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
57421      ,
57422      variant: am === 'PM' ? 'primary' : 'secondary',
57423      __next40pxDefaultSize: true,
57424      onClick: buildAmPmChangeCallback('PM')
57425    }, (0,external_wp_i18n_namespaceObject.__)('PM'))), (0,external_React_.createElement)(spacer_component, null), (0,external_React_.createElement)(timezone, null))), (0,external_React_.createElement)(Fieldset, null, (0,external_React_.createElement)(base_control.VisualLabel, {
57426      as: "legend",
57427      className: "components-datetime__time-legend" // Unused, for backwards compatibility.
57428    }, (0,external_wp_i18n_namespaceObject.__)('Date')), (0,external_React_.createElement)(h_stack_component, {
57429      className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
57430    }, is12Hour ? (0,external_React_.createElement)(external_React_.Fragment, null, monthField, dayField) : (0,external_React_.createElement)(external_React_.Fragment, null, dayField, monthField), (0,external_React_.createElement)(YearInput, {
57431      className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
57432      ,
57433      label: (0,external_wp_i18n_namespaceObject.__)('Year'),
57434      hideLabelFromVision: true,
57435      __next40pxDefaultSize: true,
57436      value: year,
57437      step: 1,
57438      min: 1,
57439      max: 9999,
57440      required: true,
57441      spinControls: "none",
57442      isPressEnterToChange: true,
57443      isDragEnabled: false,
57444      isShiftStepEnabled: false,
57445      onChange: buildNumberControlChangeCallback('year'),
57446      __unstableStateReducer: buildPadInputStateReducer(4)
57447    }))));
57448  }
57449  /* harmony default export */ const time = (TimePicker);
57450  
57451  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/styles.js
57452  
57453  function 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)."; }
57454  /**
57455   * External dependencies
57456   */
57457  
57458  /**
57459   * Internal dependencies
57460   */
57461  
57462  const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_stack_component,  true ? {
57463    target: "e1p5onf00"
57464  } : 0)( true ? {
57465    name: "1khn195",
57466    styles: "box-sizing:border-box"
57467  } : 0);
57468  
57469  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date-time/index.js
57470  
57471  /**
57472   * External dependencies
57473   */
57474  
57475  /**
57476   * WordPress dependencies
57477   */
57478  
57479  /**
57480   * Internal dependencies
57481   */
57482  
57483  
57484  
57485  
57486  const date_time_noop = () => {};
57487  function UnforwardedDateTimePicker({
57488    currentDate,
57489    is12Hour,
57490    isInvalidDate,
57491    onMonthPreviewed = date_time_noop,
57492    onChange,
57493    events,
57494    startOfWeek
57495  }, ref) {
57496    return (0,external_React_.createElement)(date_time_styles_Wrapper, {
57497      ref: ref,
57498      className: "components-datetime",
57499      spacing: 4
57500    }, (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(time, {
57501      currentTime: currentDate,
57502      onChange: onChange,
57503      is12Hour: is12Hour
57504    }), (0,external_React_.createElement)(date, {
57505      currentDate: currentDate,
57506      onChange: onChange,
57507      isInvalidDate: isInvalidDate,
57508      events: events,
57509      onMonthPreviewed: onMonthPreviewed,
57510      startOfWeek: startOfWeek
57511    })));
57512  }
57513  
57514  /**
57515   * DateTimePicker is a React component that renders a calendar and clock for
57516   * date and time selection. The calendar and clock components can be accessed
57517   * individually using the `DatePicker` and `TimePicker` components respectively.
57518   *
57519   * ```jsx
57520   * import { DateTimePicker } from '@wordpress/components';
57521   * import { useState } from '@wordpress/element';
57522   *
57523   * const MyDateTimePicker = () => {
57524   *   const [ date, setDate ] = useState( new Date() );
57525   *
57526   *   return (
57527   *     <DateTimePicker
57528   *       currentDate={ date }
57529   *       onChange={ ( newDate ) => setDate( newDate ) }
57530   *       is12Hour
57531   *     />
57532   *   );
57533   * };
57534   * ```
57535   */
57536  const DateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDateTimePicker);
57537  /* harmony default export */ const date_time = (DateTimePicker);
57538  
57539  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/index.js
57540  /**
57541   * Internal dependencies
57542   */
57543  
57544  
57545  
57546  
57547  /* harmony default export */ const build_module_date_time = (date_time);
57548  
57549  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/sizes.js
57550  /**
57551   * Sizes
57552   *
57553   * defines the sizes used in dimension controls
57554   * all hardcoded `size` values are based on the value of
57555   * the Sass variable `$block-padding` from
57556   * `packages/block-editor/src/components/dimension-control/sizes.js`.
57557   */
57558  
57559  /**
57560   * WordPress dependencies
57561   */
57562  
57563  
57564  /**
57565   * Internal dependencies
57566   */
57567  
57568  /**
57569   * Finds the correct size object from the provided sizes
57570   * table by size slug (eg: `medium`)
57571   *
57572   * @param sizes containing objects for each size definition.
57573   * @param slug  a string representation of the size (eg: `medium`).
57574   */
57575  const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug);
57576  /* harmony default export */ const dimension_control_sizes = ([{
57577    name: (0,external_wp_i18n_namespaceObject._x)('None', 'Size of a UI element'),
57578    slug: 'none'
57579  }, {
57580    name: (0,external_wp_i18n_namespaceObject._x)('Small', 'Size of a UI element'),
57581    slug: 'small'
57582  }, {
57583    name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Size of a UI element'),
57584    slug: 'medium'
57585  }, {
57586    name: (0,external_wp_i18n_namespaceObject._x)('Large', 'Size of a UI element'),
57587    slug: 'large'
57588  }, {
57589    name: (0,external_wp_i18n_namespaceObject._x)('Extra Large', 'Size of a UI element'),
57590    slug: 'xlarge'
57591  }]);
57592  
57593  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/index.js
57594  
57595  /**
57596   * External dependencies
57597   */
57598  
57599  
57600  /**
57601   * WordPress dependencies
57602   */
57603  
57604  
57605  /**
57606   * Internal dependencies
57607   */
57608  
57609  
57610  
57611  /**
57612   * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
57613   *
57614   * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
57615   *
57616   * ```jsx
57617   * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
57618   * import { useState } from '@wordpress/element';
57619   *
57620   * export default function MyCustomDimensionControl() {
57621   *     const [ paddingSize, setPaddingSize ] = useState( '' );
57622   *
57623   *     return (
57624   *         <DimensionControl
57625   *             label={ 'Padding' }
57626   *             icon={ 'desktop' }
57627   *             onChange={ ( value ) => setPaddingSize( value ) }
57628   *             value={ paddingSize }
57629   *         />
57630   *     );
57631   * }
57632   * ```
57633   */
57634  function DimensionControl(props) {
57635    const {
57636      __next40pxDefaultSize = false,
57637      label,
57638      value,
57639      sizes = dimension_control_sizes,
57640      icon,
57641      onChange,
57642      className = ''
57643    } = props;
57644    const onChangeSpacingSize = val => {
57645      const theSize = findSizeBySlug(sizes, val);
57646      if (!theSize || value === theSize.slug) {
57647        onChange?.(undefined);
57648      } else if (typeof onChange === 'function') {
57649        onChange(theSize.slug);
57650      }
57651    };
57652    const formatSizesAsOptions = theSizes => {
57653      const options = theSizes.map(({
57654        name,
57655        slug
57656      }) => ({
57657        label: name,
57658        value: slug
57659      }));
57660      return [{
57661        label: (0,external_wp_i18n_namespaceObject.__)('Default'),
57662        value: ''
57663      }, ...options];
57664    };
57665    const selectLabel = (0,external_React_.createElement)(external_React_.Fragment, null, icon && (0,external_React_.createElement)(build_module_icon, {
57666      icon: icon
57667    }), label);
57668    return (0,external_React_.createElement)(select_control, {
57669      __next40pxDefaultSize: __next40pxDefaultSize,
57670      className: classnames_default()(className, 'block-editor-dimension-control'),
57671      label: selectLabel,
57672      hideLabelFromVision: false,
57673      value: value,
57674      onChange: onChangeSpacingSize,
57675      options: formatSizesAsOptions(sizes)
57676    });
57677  }
57678  /* harmony default export */ const dimension_control = (DimensionControl);
57679  
57680  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/styles/disabled-styles.js
57681  function 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)."; }
57682  /**
57683   * External dependencies
57684   */
57685  
57686  const disabled_styles_disabledStyles =  true ? {
57687    name: "u2jump",
57688    styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}"
57689  } : 0;
57690  
57691  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/index.js
57692  
57693  /**
57694   * WordPress dependencies
57695   */
57696  
57697  
57698  /**
57699   * Internal dependencies
57700   */
57701  
57702  
57703  const Context = (0,external_wp_element_namespaceObject.createContext)(false);
57704  const {
57705    Consumer,
57706    Provider: disabled_Provider
57707  } = Context;
57708  
57709  /**
57710   * `Disabled` is a component which disables descendant tabbable elements and
57711   * prevents pointer interaction.
57712   *
57713   * _Note: this component may not behave as expected in browsers that don't
57714   * support the `inert` HTML attribute. We recommend adding the official WICG
57715   * polyfill when using this component in your project._
57716   *
57717   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
57718   *
57719   * ```jsx
57720   * import { Button, Disabled, TextControl } from '@wordpress/components';
57721   * import { useState } from '@wordpress/element';
57722   *
57723   * const MyDisabled = () => {
57724   *     const [ isDisabled, setIsDisabled ] = useState( true );
57725   *
57726   *     let input = <TextControl label="Input" onChange={ () => {} } />;
57727   *     if ( isDisabled ) {
57728   *         input = <Disabled>{ input }</Disabled>;
57729   *     }
57730   *
57731   *     const toggleDisabled = () => {
57732   *         setIsDisabled( ( state ) => ! state );
57733   *     };
57734   *
57735   *     return (
57736   *         <div>
57737   *             { input }
57738   *             <Button variant="primary" onClick={ toggleDisabled }>
57739   *                 Toggle Disabled
57740   *             </Button>
57741   *         </div>
57742   *     );
57743   * };
57744   * ```
57745   */
57746  function Disabled({
57747    className,
57748    children,
57749    isDisabled = true,
57750    ...props
57751  }) {
57752    const cx = useCx();
57753    return (0,external_React_.createElement)(disabled_Provider, {
57754      value: isDisabled
57755    }, (0,external_React_.createElement)("div", {
57756      // @ts-ignore Reason: inert is a recent HTML attribute
57757      inert: isDisabled ? 'true' : undefined,
57758      className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined,
57759      ...props
57760    }, children));
57761  }
57762  Disabled.Context = Context;
57763  Disabled.Consumer = Consumer;
57764  /* harmony default export */ const disabled = (Disabled);
57765  
57766  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disclosure/index.js
57767  
57768  /**
57769   * External dependencies
57770   */
57771  // eslint-disable-next-line no-restricted-imports
57772  
57773  
57774  /**
57775   * WordPress dependencies
57776   */
57777  
57778  
57779  /**
57780   * Internal dependencies
57781   */
57782  
57783  /**
57784   * Accessible Disclosure component that controls visibility of a section of
57785   * content. It follows the WAI-ARIA Disclosure Pattern.
57786   */
57787  const UnforwardedDisclosureContent = ({
57788    visible,
57789    children,
57790    ...props
57791  }, ref) => {
57792    const disclosure = useDisclosureStore({
57793      open: visible
57794    });
57795    return (0,external_React_.createElement)(DisclosureContent, {
57796      store: disclosure,
57797      ref: ref,
57798      ...props
57799    }, children);
57800  };
57801  const disclosure_DisclosureContent = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDisclosureContent);
57802  /* harmony default export */ const disclosure = ((/* unused pure expression or super */ null && (disclosure_DisclosureContent)));
57803  
57804  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/draggable/index.js
57805  
57806  /**
57807   * External dependencies
57808   */
57809  
57810  /**
57811   * WordPress dependencies
57812   */
57813  
57814  
57815  
57816  /**
57817   * Internal dependencies
57818   */
57819  
57820  const dragImageClass = 'components-draggable__invisible-drag-image';
57821  const cloneWrapperClass = 'components-draggable__clone';
57822  const clonePadding = 0;
57823  const bodyClass = 'is-dragging-components-draggable';
57824  
57825  /**
57826   * `Draggable` is a Component that provides a way to set up a cross-browser
57827   * (including IE) customizable drag image and the transfer data for the drag
57828   * event. It decouples the drag handle and the element to drag: use it by
57829   * wrapping the component that will become the drag handle and providing the DOM
57830   * ID of the element to drag.
57831   *
57832   * Note that the drag handle needs to declare the `draggable="true"` property
57833   * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event
57834   * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`
57835   * takes care of the logic to setup the drag image and the transfer data, but is
57836   * not concerned with creating an actual DOM element that is draggable.
57837   *
57838   * ```jsx
57839   * import { Draggable, Panel, PanelBody } from '@wordpress/components';
57840   * import { Icon, more } from '@wordpress/icons';
57841   *
57842   * const MyDraggable = () => (
57843   *   <div id="draggable-panel">
57844   *     <Panel header="Draggable panel">
57845   *       <PanelBody>
57846   *         <Draggable elementId="draggable-panel" transferData={ {} }>
57847   *           { ( { onDraggableStart, onDraggableEnd } ) => (
57848   *             <div
57849   *               className="example-drag-handle"
57850   *               draggable
57851   *               onDragStart={ onDraggableStart }
57852   *               onDragEnd={ onDraggableEnd }
57853   *             >
57854   *               <Icon icon={ more } />
57855   *             </div>
57856   *           ) }
57857   *         </Draggable>
57858   *       </PanelBody>
57859   *     </Panel>
57860   *   </div>
57861   * );
57862   * ```
57863   */
57864  function Draggable({
57865    children,
57866    onDragStart,
57867    onDragOver,
57868    onDragEnd,
57869    appendToOwnerDocument = false,
57870    cloneClassname,
57871    elementId,
57872    transferData,
57873    __experimentalTransferDataType: transferDataType = 'text',
57874    __experimentalDragComponent: dragComponent
57875  }) {
57876    const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null);
57877    const cleanup = (0,external_wp_element_namespaceObject.useRef)(() => {});
57878  
57879    /**
57880     * Removes the element clone, resets cursor, and removes drag listener.
57881     *
57882     * @param event The non-custom DragEvent.
57883     */
57884    function end(event) {
57885      event.preventDefault();
57886      cleanup.current();
57887      if (onDragEnd) {
57888        onDragEnd(event);
57889      }
57890    }
57891  
57892    /**
57893     * This method does a couple of things:
57894     *
57895     * - Clones the current element and spawns clone over original element.
57896     * - Adds a fake temporary drag image to avoid browser defaults.
57897     * - Sets transfer data.
57898     * - Adds dragover listener.
57899     *
57900     * @param event The non-custom DragEvent.
57901     */
57902    function start(event) {
57903      const {
57904        ownerDocument
57905      } = event.target;
57906      event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));
57907      const cloneWrapper = ownerDocument.createElement('div');
57908      // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.
57909      cloneWrapper.style.top = '0';
57910      cloneWrapper.style.left = '0';
57911      const dragImage = ownerDocument.createElement('div');
57912  
57913      // Set a fake drag image to avoid browser defaults. Remove from DOM
57914      // right after. event.dataTransfer.setDragImage is not supported yet in
57915      // IE, we need to check for its existence first.
57916      if ('function' === typeof event.dataTransfer.setDragImage) {
57917        dragImage.classList.add(dragImageClass);
57918        ownerDocument.body.appendChild(dragImage);
57919        event.dataTransfer.setDragImage(dragImage, 0, 0);
57920      }
57921      cloneWrapper.classList.add(cloneWrapperClass);
57922      if (cloneClassname) {
57923        cloneWrapper.classList.add(cloneClassname);
57924      }
57925      let x = 0;
57926      let y = 0;
57927      // If a dragComponent is defined, the following logic will clone the
57928      // HTML node and inject it into the cloneWrapper.
57929      if (dragComponentRef.current) {
57930        // Position dragComponent at the same position as the cursor.
57931        x = event.clientX;
57932        y = event.clientY;
57933        cloneWrapper.style.transform = `translate( $x}px, $y}px )`;
57934        const clonedDragComponent = ownerDocument.createElement('div');
57935        clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
57936        cloneWrapper.appendChild(clonedDragComponent);
57937  
57938        // Inject the cloneWrapper into the DOM.
57939        ownerDocument.body.appendChild(cloneWrapper);
57940      } else {
57941        const element = ownerDocument.getElementById(elementId);
57942  
57943        // Prepare element clone and append to element wrapper.
57944        const elementRect = element.getBoundingClientRect();
57945        const elementWrapper = element.parentNode;
57946        const elementTopOffset = elementRect.top;
57947        const elementLeftOffset = elementRect.left;
57948        cloneWrapper.style.width = `$elementRect.width + clonePadding * 2}px`;
57949        const clone = element.cloneNode(true);
57950        clone.id = `clone-$elementId}`;
57951  
57952        // Position clone right over the original element (20px padding).
57953        x = elementLeftOffset - clonePadding;
57954        y = elementTopOffset - clonePadding;
57955        cloneWrapper.style.transform = `translate( $x}px, $y}px )`;
57956  
57957        // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
57958        Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));
57959        cloneWrapper.appendChild(clone);
57960  
57961        // Inject the cloneWrapper into the DOM.
57962        if (appendToOwnerDocument) {
57963          ownerDocument.body.appendChild(cloneWrapper);
57964        } else {
57965          elementWrapper?.appendChild(cloneWrapper);
57966        }
57967      }
57968  
57969      // Mark the current cursor coordinates.
57970      let cursorLeft = event.clientX;
57971      let cursorTop = event.clientY;
57972      function over(e) {
57973        // Skip doing any work if mouse has not moved.
57974        if (cursorLeft === e.clientX && cursorTop === e.clientY) {
57975          return;
57976        }
57977        const nextX = x + e.clientX - cursorLeft;
57978        const nextY = y + e.clientY - cursorTop;
57979        cloneWrapper.style.transform = `translate( $nextX}px, $nextY}px )`;
57980        cursorLeft = e.clientX;
57981        cursorTop = e.clientY;
57982        x = nextX;
57983        y = nextY;
57984        if (onDragOver) {
57985          onDragOver(e);
57986        }
57987      }
57988  
57989      // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,
57990      // note that browsers may throttle raf below 60fps in certain conditions.
57991      // @ts-ignore
57992      const throttledDragOver = (0,external_wp_compose_namespaceObject.throttle)(over, 16);
57993      ownerDocument.addEventListener('dragover', throttledDragOver);
57994  
57995      // Update cursor to 'grabbing', document wide.
57996      ownerDocument.body.classList.add(bodyClass);
57997      if (onDragStart) {
57998        onDragStart(event);
57999      }
58000      cleanup.current = () => {
58001        // Remove drag clone.
58002        if (cloneWrapper && cloneWrapper.parentNode) {
58003          cloneWrapper.parentNode.removeChild(cloneWrapper);
58004        }
58005        if (dragImage && dragImage.parentNode) {
58006          dragImage.parentNode.removeChild(dragImage);
58007        }
58008  
58009        // Reset cursor.
58010        ownerDocument.body.classList.remove(bodyClass);
58011        ownerDocument.removeEventListener('dragover', throttledDragOver);
58012      };
58013    }
58014    (0,external_wp_element_namespaceObject.useEffect)(() => () => {
58015      cleanup.current();
58016    }, []);
58017    return (0,external_React_.createElement)(external_React_.Fragment, null, children({
58018      onDraggableStart: start,
58019      onDraggableEnd: end
58020    }), dragComponent && (0,external_React_.createElement)("div", {
58021      className: "components-draggable-drag-component-root",
58022      style: {
58023        display: 'none'
58024      },
58025      ref: dragComponentRef
58026    }, dragComponent));
58027  }
58028  /* harmony default export */ const draggable = (Draggable);
58029  
58030  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/upload.js
58031  
58032  /**
58033   * WordPress dependencies
58034   */
58035  
58036  const upload = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
58037    xmlns: "http://www.w3.org/2000/svg",
58038    viewBox: "0 0 24 24"
58039  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
58040    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"
58041  }));
58042  /* harmony default export */ const library_upload = (upload);
58043  
58044  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/index.js
58045  
58046  /**
58047   * External dependencies
58048   */
58049  
58050  
58051  /**
58052   * WordPress dependencies
58053   */
58054  
58055  
58056  
58057  
58058  
58059  
58060  /**
58061   * Internal dependencies
58062   */
58063  
58064  /**
58065   * `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.
58066   *
58067   * ```jsx
58068   * import { DropZone } from '@wordpress/components';
58069   * import { useState } from '@wordpress/element';
58070   *
58071   * const MyDropZone = () => {
58072   *   const [ hasDropped, setHasDropped ] = useState( false );
58073   *
58074   *   return (
58075   *     <div>
58076   *       { hasDropped ? 'Dropped!' : 'Drop something here' }
58077   *       <DropZone
58078   *         onFilesDrop={ () => setHasDropped( true ) }
58079   *         onHTMLDrop={ () => setHasDropped( true ) }
58080   *         onDrop={ () => setHasDropped( true ) }
58081   *       />
58082   *     </div>
58083   *   );
58084   * }
58085   * ```
58086   */
58087  function DropZoneComponent({
58088    className,
58089    label,
58090    onFilesDrop,
58091    onHTMLDrop,
58092    onDrop,
58093    ...restProps
58094  }) {
58095    const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)();
58096    const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)();
58097    const [type, setType] = (0,external_wp_element_namespaceObject.useState)();
58098    const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({
58099      onDrop(event) {
58100        const files = event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : [];
58101        const html = event.dataTransfer?.getData('text/html');
58102  
58103        /**
58104         * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
58105         * The order of the checks is important to recognise the HTML drop.
58106         */
58107        if (html && onHTMLDrop) {
58108          onHTMLDrop(html);
58109        } else if (files.length && onFilesDrop) {
58110          onFilesDrop(files);
58111        } else if (onDrop) {
58112          onDrop(event);
58113        }
58114      },
58115      onDragStart(event) {
58116        setIsDraggingOverDocument(true);
58117        let _type = 'default';
58118  
58119        /**
58120         * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
58121         * The order of the checks is important to recognise the HTML drop.
58122         */
58123        if (event.dataTransfer?.types.includes('text/html')) {
58124          _type = 'html';
58125        } else if (
58126        // Check for the types because sometimes the files themselves
58127        // are only available on drop.
58128        event.dataTransfer?.types.includes('Files') || (event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : []).length > 0) {
58129          _type = 'file';
58130        }
58131        setType(_type);
58132      },
58133      onDragEnd() {
58134        setIsDraggingOverDocument(false);
58135        setType(undefined);
58136      },
58137      onDragEnter() {
58138        setIsDraggingOverElement(true);
58139      },
58140      onDragLeave() {
58141        setIsDraggingOverElement(false);
58142      }
58143    });
58144    const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
58145    let children;
58146    const backdrop = {
58147      hidden: {
58148        opacity: 0
58149      },
58150      show: {
58151        opacity: 1,
58152        transition: {
58153          type: 'tween',
58154          duration: 0.2,
58155          delay: 0,
58156          delayChildren: 0.1
58157        }
58158      },
58159      exit: {
58160        opacity: 0,
58161        transition: {
58162          duration: 0.2,
58163          delayChildren: 0
58164        }
58165      }
58166    };
58167    const foreground = {
58168      hidden: {
58169        opacity: 0,
58170        scale: 0.9
58171      },
58172      show: {
58173        opacity: 1,
58174        scale: 1,
58175        transition: {
58176          duration: 0.1
58177        }
58178      },
58179      exit: {
58180        opacity: 0,
58181        scale: 0.9
58182      }
58183    };
58184    if (isDraggingOverElement) {
58185      children = (0,external_React_.createElement)(motion.div, {
58186        variants: backdrop,
58187        initial: disableMotion ? 'show' : 'hidden',
58188        animate: "show",
58189        exit: disableMotion ? 'show' : 'exit',
58190        className: "components-drop-zone__content"
58191        // Without this, when this div is shown,
58192        // Safari calls a onDropZoneLeave causing a loop because of this bug
58193        // https://bugs.webkit.org/show_bug.cgi?id=66547
58194        ,
58195        style: {
58196          pointerEvents: 'none'
58197        }
58198      }, (0,external_React_.createElement)(motion.div, {
58199        variants: foreground
58200      }, (0,external_React_.createElement)(icons_build_module_icon, {
58201        icon: library_upload,
58202        className: "components-drop-zone__content-icon"
58203      }), (0,external_React_.createElement)("span", {
58204        className: "components-drop-zone__content-text"
58205      }, label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload'))));
58206    }
58207    const classes = classnames_default()('components-drop-zone', className, {
58208      'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
58209      'is-dragging-over-document': isDraggingOverDocument,
58210      'is-dragging-over-element': isDraggingOverElement,
58211      [`is-dragging-$type}`]: !!type
58212    });
58213    return (0,external_React_.createElement)("div", {
58214      ...restProps,
58215      ref: ref,
58216      className: classes
58217    }, disableMotion ? children : (0,external_React_.createElement)(AnimatePresence, null, children));
58218  }
58219  /* harmony default export */ const drop_zone = (DropZoneComponent);
58220  
58221  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/provider.js
58222  /**
58223   * WordPress dependencies
58224   */
58225  
58226  function DropZoneProvider({
58227    children
58228  }) {
58229    external_wp_deprecated_default()('wp.components.DropZoneProvider', {
58230      since: '5.8',
58231      hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.'
58232    });
58233    return children;
58234  }
58235  
58236  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/swatch.js
58237  
58238  /**
58239   * WordPress dependencies
58240   */
58241  
58242  const swatch = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
58243    xmlns: "http://www.w3.org/2000/svg",
58244    viewBox: "0 0 24 24"
58245  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
58246    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"
58247  }));
58248  /* harmony default export */ const library_swatch = (swatch);
58249  
58250  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js
58251  /**
58252   * External dependencies
58253   */
58254  
58255  
58256  
58257  /**
58258   * Internal dependencies
58259   */
58260  
58261  k([names]);
58262  
58263  /**
58264   * Object representation for a color.
58265   *
58266   * @typedef {Object} RGBColor
58267   * @property {number} r Red component of the color in the range [0,1].
58268   * @property {number} g Green component of the color in the range [0,1].
58269   * @property {number} b Blue component of the color in the range [0,1].
58270   */
58271  
58272  /**
58273   * Calculate the brightest and darkest values from a color palette.
58274   *
58275   * @param palette Color palette for the theme.
58276   *
58277   * @return Tuple of the darkest color and brightest color.
58278   */
58279  function getDefaultColors(palette) {
58280    // A default dark and light color are required.
58281    if (!palette || palette.length < 2) return ['#000', '#fff'];
58282    return palette.map(({
58283      color
58284    }) => ({
58285      color,
58286      brightness: w(color).brightness()
58287    })).reduce(([min, max], current) => {
58288      return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
58289    }, [{
58290      brightness: 1,
58291      color: ''
58292    }, {
58293      brightness: 0,
58294      color: ''
58295    }]).map(({
58296      color
58297    }) => color);
58298  }
58299  
58300  /**
58301   * Generate a duotone gradient from a list of colors.
58302   *
58303   * @param colors CSS color strings.
58304   * @param angle  CSS gradient angle.
58305   *
58306   * @return  CSS gradient string for the duotone swatch.
58307   */
58308  function getGradientFromCSSColors(colors = [], angle = '90deg') {
58309    const l = 100 / colors.length;
58310    const stops = colors.map((c, i) => `$c} $i * l}%, $c} ${(i + 1) * l}%`).join(', ');
58311    return `linear-gradient( $angle}, $stops} )`;
58312  }
58313  
58314  /**
58315   * Convert a color array to an array of color stops.
58316   *
58317   * @param colors CSS colors array
58318   *
58319   * @return Color stop information.
58320   */
58321  function getColorStopsFromColors(colors) {
58322    return colors.map((color, i) => ({
58323      position: i * 100 / (colors.length - 1),
58324      color
58325    }));
58326  }
58327  
58328  /**
58329   * Convert a color stop array to an array colors.
58330   *
58331   * @param colorStops Color stop information.
58332   *
58333   * @return CSS colors array.
58334   */
58335  function getColorsFromColorStops(colorStops = []) {
58336    return colorStops.map(({
58337      color
58338    }) => color);
58339  }
58340  
58341  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js
58342  
58343  /**
58344   * WordPress dependencies
58345   */
58346  
58347  
58348  /**
58349   * Internal dependencies
58350   */
58351  
58352  
58353  
58354  function DuotoneSwatch({
58355    values
58356  }) {
58357    return values ? (0,external_React_.createElement)(color_indicator, {
58358      colorValue: getGradientFromCSSColors(values, '135deg')
58359    }) : (0,external_React_.createElement)(build_module_icon, {
58360      icon: library_swatch
58361    });
58362  }
58363  /* harmony default export */ const duotone_swatch = (DuotoneSwatch);
58364  
58365  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/color-list-picker/index.js
58366  
58367  /**
58368   * WordPress dependencies
58369   */
58370  
58371  
58372  
58373  
58374  /**
58375   * Internal dependencies
58376   */
58377  
58378  
58379  
58380  
58381  
58382  
58383  function ColorOption({
58384    label,
58385    value,
58386    colors,
58387    disableCustomColors,
58388    enableAlpha,
58389    onChange
58390  }) {
58391    const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false);
58392    const idRoot = (0,external_wp_compose_namespaceObject.useInstanceId)(ColorOption, 'color-list-picker-option');
58393    const labelId = `$idRoot}__label`;
58394    const contentId = `$idRoot}__content`;
58395    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(build_module_button, {
58396      className: "components-color-list-picker__swatch-button",
58397      onClick: () => setIsOpen(prev => !prev),
58398      "aria-expanded": isOpen,
58399      "aria-controls": contentId
58400    }, (0,external_React_.createElement)(h_stack_component, {
58401      justify: "flex-start",
58402      spacing: 2
58403    }, value ? (0,external_React_.createElement)(color_indicator, {
58404      colorValue: value,
58405      className: "components-color-list-picker__swatch-color"
58406    }) : (0,external_React_.createElement)(build_module_icon, {
58407      icon: library_swatch
58408    }), (0,external_React_.createElement)("span", {
58409      id: labelId
58410    }, label))), (0,external_React_.createElement)("div", {
58411      role: "group",
58412      id: contentId,
58413      "aria-labelledby": labelId,
58414      "aria-hidden": !isOpen
58415    }, isOpen && (0,external_React_.createElement)(color_palette, {
58416      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'),
58417      className: "components-color-list-picker__color-picker",
58418      colors: colors,
58419      value: value,
58420      clearable: false,
58421      onChange: onChange,
58422      disableCustomColors: disableCustomColors,
58423      enableAlpha: enableAlpha
58424    })));
58425  }
58426  function ColorListPicker({
58427    colors,
58428    labels,
58429    value = [],
58430    disableCustomColors,
58431    enableAlpha,
58432    onChange
58433  }) {
58434    return (0,external_React_.createElement)("div", {
58435      className: "components-color-list-picker"
58436    }, labels.map((label, index) => (0,external_React_.createElement)(ColorOption, {
58437      key: index,
58438      label: label,
58439      value: value[index],
58440      colors: colors,
58441      disableCustomColors: disableCustomColors,
58442      enableAlpha: enableAlpha,
58443      onChange: newColor => {
58444        const newColors = value.slice();
58445        newColors[index] = newColor;
58446        onChange(newColors);
58447      }
58448    })));
58449  }
58450  /* harmony default export */ const color_list_picker = (ColorListPicker);
58451  
58452  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js
58453  
58454  /**
58455   * Internal dependencies
58456   */
58457  
58458  
58459  const PLACEHOLDER_VALUES = ['#333', '#CCC'];
58460  function CustomDuotoneBar({
58461    value,
58462    onChange
58463  }) {
58464    const hasGradient = !!value;
58465    const values = hasGradient ? value : PLACEHOLDER_VALUES;
58466    const background = getGradientFromCSSColors(values);
58467    const controlPoints = getColorStopsFromColors(values);
58468    return (0,external_React_.createElement)(CustomGradientBar, {
58469      disableInserter: true,
58470      background: background,
58471      hasGradient: hasGradient,
58472      value: controlPoints,
58473      onChange: newColorStops => {
58474        const newValue = getColorsFromColorStops(newColorStops);
58475        onChange(newValue);
58476      }
58477    });
58478  }
58479  
58480  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js
58481  
58482  /**
58483   * External dependencies
58484   */
58485  
58486  
58487  /**
58488   * WordPress dependencies
58489   */
58490  
58491  
58492  
58493  /**
58494   * Internal dependencies
58495   */
58496  
58497  
58498  
58499  
58500  
58501  
58502  /**
58503   * ```jsx
58504   * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
58505   * import { useState } from '@wordpress/element';
58506   *
58507   * const DUOTONE_PALETTE = [
58508   *     { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
58509   *     { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
58510   * ];
58511   *
58512   * const COLOR_PALETTE = [
58513   *     { color: '#ff4747', name: 'Red', slug: 'red' },
58514   *     { color: '#fcff41', name: 'Yellow', slug: 'yellow' },
58515   *     { color: '#000097', name: 'Blue', slug: 'blue' },
58516   *     { color: '#8c00b7', name: 'Purple', slug: 'purple' },
58517   * ];
58518   *
58519   * const Example = () => {
58520   *     const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
58521   *     return (
58522   *         <>
58523   *             <DuotonePicker
58524   *                 duotonePalette={ DUOTONE_PALETTE }
58525   *                 colorPalette={ COLOR_PALETTE }
58526   *                 value={ duotone }
58527   *                 onChange={ setDuotone }
58528   *             />
58529   *             <DuotoneSwatch values={ duotone } />
58530   *         </>
58531   *     );
58532   * };
58533   * ```
58534   */
58535  function DuotonePicker({
58536    asButtons,
58537    loop,
58538    clearable = true,
58539    unsetable = true,
58540    colorPalette,
58541    duotonePalette,
58542    disableCustomColors,
58543    disableCustomDuotone,
58544    value,
58545    onChange,
58546    'aria-label': ariaLabel,
58547    'aria-labelledby': ariaLabelledby,
58548    ...otherProps
58549  }) {
58550    const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]);
58551    const isUnset = value === 'unset';
58552    const unsetOptionLabel = (0,external_wp_i18n_namespaceObject.__)('Unset');
58553    const unsetOption = (0,external_React_.createElement)(build_module_circular_option_picker.Option, {
58554      key: "unset",
58555      value: "unset",
58556      isSelected: isUnset,
58557      tooltipText: unsetOptionLabel,
58558      "aria-label": unsetOptionLabel,
58559      className: "components-duotone-picker__color-indicator",
58560      onClick: () => {
58561        onChange(isUnset ? undefined : 'unset');
58562      }
58563    });
58564    const duotoneOptions = duotonePalette.map(({
58565      colors,
58566      slug,
58567      name
58568    }) => {
58569      const style = {
58570        background: getGradientFromCSSColors(colors, '135deg'),
58571        color: 'transparent'
58572      };
58573      const tooltipText = name !== null && name !== void 0 ? name : (0,external_wp_i18n_namespaceObject.sprintf)(
58574      // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
58575      (0,external_wp_i18n_namespaceObject.__)('Duotone code: %s'), slug);
58576      const label = name ? (0,external_wp_i18n_namespaceObject.sprintf)(
58577      // translators: %s: The name of the option e.g: "Dark grayscale".
58578      (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText;
58579      const isSelected = es6_default()(colors, value);
58580      return (0,external_React_.createElement)(build_module_circular_option_picker.Option, {
58581        key: slug,
58582        value: colors,
58583        isSelected: isSelected,
58584        "aria-label": label,
58585        tooltipText: tooltipText,
58586        style: style,
58587        onClick: () => {
58588          onChange(isSelected ? undefined : colors);
58589        }
58590      });
58591    });
58592    let metaProps;
58593    if (asButtons) {
58594      metaProps = {
58595        asButtons: true
58596      };
58597    } else {
58598      const _metaProps = {
58599        asButtons: false,
58600        loop
58601      };
58602      if (ariaLabel) {
58603        metaProps = {
58604          ..._metaProps,
58605          'aria-label': ariaLabel
58606        };
58607      } else if (ariaLabelledby) {
58608        metaProps = {
58609          ..._metaProps,
58610          'aria-labelledby': ariaLabelledby
58611        };
58612      } else {
58613        metaProps = {
58614          ..._metaProps,
58615          'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')
58616        };
58617      }
58618    }
58619    const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
58620    return (0,external_React_.createElement)(build_module_circular_option_picker, {
58621      ...otherProps,
58622      ...metaProps,
58623      options: options,
58624      actions: !!clearable && (0,external_React_.createElement)(build_module_circular_option_picker.ButtonAction, {
58625        onClick: () => onChange(undefined)
58626      }, (0,external_wp_i18n_namespaceObject.__)('Clear'))
58627    }, (0,external_React_.createElement)(spacer_component, {
58628      paddingTop: options.length === 0 ? 0 : 4
58629    }, (0,external_React_.createElement)(v_stack_component, {
58630      spacing: 3
58631    }, !disableCustomColors && !disableCustomDuotone && (0,external_React_.createElement)(CustomDuotoneBar, {
58632      value: isUnset ? undefined : value,
58633      onChange: onChange
58634    }), !disableCustomDuotone && (0,external_React_.createElement)(color_list_picker, {
58635      labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')],
58636      colors: colorPalette,
58637      value: isUnset ? undefined : value,
58638      disableCustomColors: disableCustomColors,
58639      enableAlpha: true,
58640      onChange: newColors => {
58641        if (!newColors[0]) {
58642          newColors[0] = defaultDark;
58643        }
58644        if (!newColors[1]) {
58645          newColors[1] = defaultLight;
58646        }
58647        const newValue = newColors.length >= 2 ? newColors : undefined;
58648        // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
58649        // but it's currently typed as a string[].
58650        // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
58651        onChange(newValue);
58652      }
58653    }))));
58654  }
58655  /* harmony default export */ const duotone_picker = (DuotonePicker);
58656  
58657  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/external.js
58658  
58659  /**
58660   * WordPress dependencies
58661   */
58662  
58663  const external = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
58664    xmlns: "http://www.w3.org/2000/svg",
58665    viewBox: "0 0 24 24"
58666  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
58667    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"
58668  }));
58669  /* harmony default export */ const library_external = (external);
58670  
58671  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/styles/external-link-styles.js
58672  
58673  function external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
58674  /**
58675   * External dependencies
58676   */
58677  
58678  /**
58679   * WordPress dependencies
58680   */
58681  
58682  const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_module_icon,  true ? {
58683    target: "esh4a730"
58684  } : 0)( true ? {
58685    name: "rvs7bx",
58686    styles: "width:1em;height:1em;margin:0;vertical-align:middle;fill:currentColor"
58687  } : 0);
58688  
58689  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/index.js
58690  
58691  /**
58692   * External dependencies
58693   */
58694  
58695  /**
58696   * WordPress dependencies
58697   */
58698  
58699  
58700  
58701  
58702  /**
58703   * Internal dependencies
58704   */
58705  
58706  
58707  function UnforwardedExternalLink(props, ref) {
58708    const {
58709      href,
58710      children,
58711      className,
58712      rel = '',
58713      ...additionalProps
58714    } = props;
58715    const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');
58716    const classes = classnames_default()('components-external-link', className);
58717    /* Anchor links are perceived as external links.
58718    This constant helps check for on page anchor links,
58719    to prevent them from being opened in the editor. */
58720    const isInternalAnchor = !!href?.startsWith('#');
58721    const onClickHandler = event => {
58722      if (isInternalAnchor) {
58723        event.preventDefault();
58724      }
58725      if (props.onClick) {
58726        props.onClick(event);
58727      }
58728    };
58729    return /* eslint-disable react/jsx-no-target-blank */(
58730      (0,external_React_.createElement)("a", {
58731        ...additionalProps,
58732        className: classes,
58733        href: href,
58734        onClick: onClickHandler,
58735        target: "_blank",
58736        rel: optimizedRel,
58737        ref: ref
58738      }, children, (0,external_React_.createElement)(visually_hidden_component, {
58739        as: "span"
58740      }, /* translators: accessibility text */
58741      (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)')), (0,external_React_.createElement)(StyledIcon, {
58742        icon: library_external,
58743        className: "components-external-link__icon"
58744      }))
58745      /* eslint-enable react/jsx-no-target-blank */
58746    );
58747  }
58748  
58749  /**
58750   * Link to an external resource.
58751   *
58752   * ```jsx
58753   * import { ExternalLink } from '@wordpress/components';
58754   *
58755   * const MyExternalLink = () => (
58756   *   <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
58757   * );
58758   * ```
58759   */
58760  const ExternalLink = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedExternalLink);
58761  /* harmony default export */ const external_link = (ExternalLink);
58762  
58763  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/utils.js
58764  const INITIAL_BOUNDS = {
58765    width: 200,
58766    height: 170
58767  };
58768  const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv', 'webm', 'wmv'];
58769  
58770  /**
58771   * Gets the extension of a file name.
58772   *
58773   * @param filename The file name.
58774   * @return  The extension of the file name.
58775   */
58776  function getExtension(filename = '') {
58777    const parts = filename.split('.');
58778    return parts[parts.length - 1];
58779  }
58780  
58781  /**
58782   * Checks if a file is a video.
58783   *
58784   * @param filename The file name.
58785   * @return Whether the file is a video.
58786   */
58787  function isVideoType(filename = '') {
58788    if (!filename) return false;
58789    return filename.startsWith('data:video/') || VIDEO_EXTENSIONS.includes(getExtension(filename));
58790  }
58791  
58792  /**
58793   * Transforms a fraction value to a percentage value.
58794   *
58795   * @param fraction The fraction value.
58796   * @return A percentage value.
58797   */
58798  function fractionToPercentage(fraction) {
58799    return Math.round(fraction * 100);
58800  }
58801  
58802  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-picker-style.js
58803  
58804  function 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)."; }
58805  /**
58806   * External dependencies
58807   */
58808  
58809  /**
58810   * Internal dependencies
58811   */
58812  
58813  
58814  
58815  
58816  const MediaWrapper = emotion_styled_base_browser_esm("div",  true ? {
58817    target: "eeew7dm8"
58818  } : 0)( true ? {
58819    name: "jqnsxy",
58820    styles: "background-color:transparent;display:flex;text-align:center;width:100%"
58821  } : 0);
58822  const MediaContainer = emotion_styled_base_browser_esm("div",  true ? {
58823    target: "eeew7dm7"
58824  } : 0)("align-items:center;border-radius:", config_values.radiusBlockUi, ";cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;&:after{border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );content:'';left:0;pointer-events:none;position:absolute;right:0;top:0;}img,video{border-radius:inherit;box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" + ( true ? "" : 0));
58825  const MediaPlaceholder = emotion_styled_base_browser_esm("div",  true ? {
58826    target: "eeew7dm6"
58827  } : 0)("background:", COLORS.gray[100], ";border-radius:inherit;box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0));
58828  const focal_point_picker_style_StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control,  true ? {
58829    target: "eeew7dm5"
58830  } : 0)( true ? {
58831    name: "1d3w5wq",
58832    styles: "width:100%"
58833  } : 0);
58834  var focal_point_picker_style_ref2 =  true ? {
58835    name: "1mn7kwb",
58836    styles: "padding-bottom:1em"
58837  } : 0;
58838  const deprecatedBottomMargin = ({
58839    __nextHasNoMarginBottom
58840  }) => {
58841    return !__nextHasNoMarginBottom ? focal_point_picker_style_ref2 : undefined;
58842  };
58843  var focal_point_picker_style_ref =  true ? {
58844    name: "1mn7kwb",
58845    styles: "padding-bottom:1em"
58846  } : 0;
58847  const extraHelpTextMargin = ({
58848    hasHelpText = false
58849  }) => {
58850    return hasHelpText ? focal_point_picker_style_ref : undefined;
58851  };
58852  const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
58853    target: "eeew7dm4"
58854  } : 0)("max-width:320px;padding-top:1em;", extraHelpTextMargin, " ", deprecatedBottomMargin, ";" + ( true ? "" : 0));
58855  const GridView = emotion_styled_base_browser_esm("div",  true ? {
58856    target: "eeew7dm3"
58857  } : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 100ms linear;z-index:1;", reduceMotion('transition'), " opacity:", ({
58858    showOverlay
58859  }) => showOverlay ? 1 : 0, ";" + ( true ? "" : 0));
58860  const GridLine = emotion_styled_base_browser_esm("div",  true ? {
58861    target: "eeew7dm2"
58862  } : 0)( true ? {
58863    name: "1yzbo24",
58864    styles: "background:rgba( 255, 255, 255, 0.4 );backdrop-filter:blur( 16px ) saturate( 180% );position:absolute;transform:translateZ( 0 )"
58865  } : 0);
58866  const GridLineX = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine,  true ? {
58867    target: "eeew7dm1"
58868  } : 0)( true ? {
58869    name: "1sw8ur",
58870    styles: "height:1px;left:1px;right:1px"
58871  } : 0);
58872  const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine,  true ? {
58873    target: "eeew7dm0"
58874  } : 0)( true ? {
58875    name: "188vg4t",
58876    styles: "width:1px;top:1px;bottom:1px"
58877  } : 0);
58878  
58879  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js
58880  
58881  /**
58882   * WordPress dependencies
58883   */
58884  
58885  
58886  /**
58887   * Internal dependencies
58888   */
58889  
58890  
58891  const TEXTCONTROL_MIN = 0;
58892  const TEXTCONTROL_MAX = 100;
58893  const controls_noop = () => {};
58894  function FocalPointPickerControls({
58895    __nextHasNoMarginBottom,
58896    __next40pxDefaultSize,
58897    hasHelpText,
58898    onChange = controls_noop,
58899    point = {
58900      x: 0.5,
58901      y: 0.5
58902    }
58903  }) {
58904    const valueX = fractionToPercentage(point.x);
58905    const valueY = fractionToPercentage(point.y);
58906    const handleChange = (value, axis) => {
58907      if (value === undefined) return;
58908      const num = parseInt(value, 10);
58909      if (!isNaN(num)) {
58910        onChange({
58911          ...point,
58912          [axis]: num / 100
58913        });
58914      }
58915    };
58916    return (0,external_React_.createElement)(ControlWrapper, {
58917      className: "focal-point-picker__controls",
58918      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
58919      hasHelpText: hasHelpText,
58920      gap: 4
58921    }, (0,external_React_.createElement)(FocalPointUnitControl, {
58922      __next40pxDefaultSize: __next40pxDefaultSize,
58923      label: (0,external_wp_i18n_namespaceObject.__)('Left'),
58924      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'),
58925      value: [valueX, '%'].join(''),
58926      onChange: next => handleChange(next, 'x'),
58927      dragDirection: "e"
58928    }), (0,external_React_.createElement)(FocalPointUnitControl, {
58929      __next40pxDefaultSize: __next40pxDefaultSize,
58930      label: (0,external_wp_i18n_namespaceObject.__)('Top'),
58931      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'),
58932      value: [valueY, '%'].join(''),
58933      onChange: next => handleChange(next, 'y'),
58934      dragDirection: "s"
58935    }));
58936  }
58937  function FocalPointUnitControl(props) {
58938    return (0,external_React_.createElement)(focal_point_picker_style_StyledUnitControl, {
58939      className: "focal-point-picker__controls-position-unit-control",
58940      labelPosition: "top",
58941      max: TEXTCONTROL_MAX,
58942      min: TEXTCONTROL_MIN,
58943      units: [{
58944        value: '%',
58945        label: '%'
58946      }],
58947      ...props
58948    });
58949  }
58950  
58951  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-style.js
58952  
58953  /**
58954   * External dependencies
58955   */
58956  
58957  /**
58958   * Internal dependencies
58959   */
58960  
58961  const PointerCircle = emotion_styled_base_browser_esm("div",  true ? {
58962    target: "e19snlhg0"
58963  } : 0)("background-color:transparent;cursor:grab;height:40px;margin:-20px 0 0 -20px;position:absolute;user-select:none;width:40px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.4 );border:1px solid rgba( 255, 255, 255, 0.4 );border-radius:50%;backdrop-filter:blur( 16px ) saturate( 180% );box-shadow:rgb( 0 0 0 / 10% ) 0px 0px 8px;transition:transform 100ms linear;", reduceMotion('transition'), " ", ({
58964    isDragging
58965  }) => isDragging && `
58966              box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px;
58967              transform: scale( 1.1 );
58968              cursor: grabbing;
58969              `, ";" + ( true ? "" : 0));
58970  
58971  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js
58972  
58973  /**
58974   * Internal dependencies
58975   */
58976  
58977  
58978  /**
58979   * External dependencies
58980   */
58981  
58982  function FocalPoint({
58983    left = '50%',
58984    top = '50%',
58985    ...props
58986  }) {
58987    const classes = classnames_default()('components-focal-point-picker__icon_container');
58988    const style = {
58989      left,
58990      top
58991    };
58992    return (0,external_React_.createElement)(PointerCircle, {
58993      ...props,
58994      className: classes,
58995      style: style
58996    });
58997  }
58998  
58999  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js
59000  
59001  /**
59002   * Internal dependencies
59003   */
59004  
59005  function FocalPointPickerGrid({
59006    bounds,
59007    ...props
59008  }) {
59009    return (0,external_React_.createElement)(GridView, {
59010      ...props,
59011      className: "components-focal-point-picker__grid",
59012      style: {
59013        width: bounds.width,
59014        height: bounds.height
59015      }
59016    }, (0,external_React_.createElement)(GridLineX, {
59017      style: {
59018        top: '33%'
59019      }
59020    }), (0,external_React_.createElement)(GridLineX, {
59021      style: {
59022        top: '66%'
59023      }
59024    }), (0,external_React_.createElement)(GridLineY, {
59025      style: {
59026        left: '33%'
59027      }
59028    }), (0,external_React_.createElement)(GridLineY, {
59029      style: {
59030        left: '66%'
59031      }
59032    }));
59033  }
59034  
59035  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js
59036  
59037  /**
59038   * External dependencies
59039   */
59040  
59041  /**
59042   * Internal dependencies
59043   */
59044  
59045  
59046  function media_Media({
59047    alt,
59048    autoPlay,
59049    src,
59050    onLoad,
59051    mediaRef,
59052    // Exposing muted prop for test rendering purposes
59053    // https://github.com/testing-library/react-testing-library/issues/470
59054    muted = true,
59055    ...props
59056  }) {
59057    if (!src) {
59058      return (0,external_React_.createElement)(MediaPlaceholder, {
59059        className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
59060        ref: mediaRef,
59061        ...props
59062      });
59063    }
59064    const isVideo = isVideoType(src);
59065    return isVideo ? (0,external_React_.createElement)("video", {
59066      ...props,
59067      autoPlay: autoPlay,
59068      className: "components-focal-point-picker__media components-focal-point-picker__media--video",
59069      loop: true,
59070      muted: muted,
59071      onLoadedData: onLoad,
59072      ref: mediaRef,
59073      src: src
59074    }) : (0,external_React_.createElement)("img", {
59075      ...props,
59076      alt: alt,
59077      className: "components-focal-point-picker__media components-focal-point-picker__media--image",
59078      onLoad: onLoad,
59079      ref: mediaRef,
59080      src: src
59081    });
59082  }
59083  
59084  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js
59085  
59086  /**
59087   * External dependencies
59088   */
59089  
59090  
59091  /**
59092   * WordPress dependencies
59093   */
59094  
59095  
59096  
59097  
59098  /**
59099   * Internal dependencies
59100   */
59101  
59102  
59103  
59104  
59105  
59106  
59107  
59108  
59109  const GRID_OVERLAY_TIMEOUT = 600;
59110  
59111  /**
59112   * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
59113   *
59114   * This component addresses a specific problem: with large background images it is common to see undesirable crops,
59115   * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
59116   * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
59117   * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
59118   * focal point is never cropped out, regardless of viewport.
59119   *
59120   * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`
59121   * - Corresponding CSS: `background-position: 50% 10%;`
59122   *
59123   * ```jsx
59124   * import { FocalPointPicker } from '@wordpress/components';
59125   * import { useState } from '@wordpress/element';
59126   *
59127   * const Example = () => {
59128   *     const [ focalPoint, setFocalPoint ] = useState( {
59129   *         x: 0.5,
59130   *         y: 0.5,
59131   *     } );
59132   *
59133   *     const url = '/path/to/image';
59134   *
59135   *     // Example function to render the CSS styles based on Focal Point Picker value
59136   *     const style = {
59137   *         backgroundImage: `url(${ url })`,
59138   *         backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
59139   *     };
59140   *
59141   *     return (
59142   *         <>
59143   *             <FocalPointPicker
59144   *                 url={ url }
59145   *                 value={ focalPoint }
59146   *                 onDragStart={ setFocalPoint }
59147   *                 onDrag={ setFocalPoint }
59148   *                 onChange={ setFocalPoint }
59149   *             />
59150   *             <div style={ style } />
59151   *         </>
59152   *     );
59153   * };
59154   * ```
59155   */
59156  function FocalPointPicker({
59157    __nextHasNoMarginBottom,
59158    __next40pxDefaultSize = false,
59159    autoPlay = true,
59160    className,
59161    help,
59162    label,
59163    onChange,
59164    onDrag,
59165    onDragEnd,
59166    onDragStart,
59167    resolvePoint,
59168    url,
59169    value: valueProp = {
59170      x: 0.5,
59171      y: 0.5
59172    },
59173    ...restProps
59174  }) {
59175    const [point, setPoint] = (0,external_wp_element_namespaceObject.useState)(valueProp);
59176    const [showGridOverlay, setShowGridOverlay] = (0,external_wp_element_namespaceObject.useState)(false);
59177    const {
59178      startDrag,
59179      endDrag,
59180      isDragging
59181    } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({
59182      onDragStart: event => {
59183        dragAreaRef.current?.focus();
59184        const value = getValueWithinDragArea(event);
59185  
59186        // `value` can technically be undefined if getValueWithinDragArea() is
59187        // called before dragAreaRef is set, but this shouldn't happen in reality.
59188        if (!value) return;
59189        onDragStart?.(value, event);
59190        setPoint(value);
59191      },
59192      onDragMove: event => {
59193        // Prevents text-selection when dragging.
59194        event.preventDefault();
59195        const value = getValueWithinDragArea(event);
59196        if (!value) return;
59197        onDrag?.(value, event);
59198        setPoint(value);
59199      },
59200      onDragEnd: () => {
59201        onDragEnd?.();
59202        onChange?.(point);
59203      }
59204    });
59205  
59206    // Uses the internal point while dragging or else the value from props.
59207    const {
59208      x,
59209      y
59210    } = isDragging ? point : valueProp;
59211    const dragAreaRef = (0,external_wp_element_namespaceObject.useRef)(null);
59212    const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS);
59213    const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => {
59214      if (!dragAreaRef.current) return;
59215      const {
59216        clientWidth: width,
59217        clientHeight: height
59218      } = dragAreaRef.current;
59219      // Falls back to initial bounds if the ref has no size. Since styles
59220      // give the drag area dimensions even when the media has not loaded
59221      // this should only happen in unit tests (jsdom).
59222      setBounds(width > 0 && height > 0 ? {
59223        width,
59224        height
59225      } : {
59226        ...INITIAL_BOUNDS
59227      });
59228    });
59229    (0,external_wp_element_namespaceObject.useEffect)(() => {
59230      const updateBounds = refUpdateBounds.current;
59231      if (!dragAreaRef.current) return;
59232      const {
59233        defaultView
59234      } = dragAreaRef.current.ownerDocument;
59235      defaultView?.addEventListener('resize', updateBounds);
59236      return () => defaultView?.removeEventListener('resize', updateBounds);
59237    }, []);
59238  
59239    // Updates the bounds to cover cases of unspecified media or load failures.
59240    (0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
59241  
59242    // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
59243    // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
59244    const getValueWithinDragArea = ({
59245      clientX,
59246      clientY,
59247      shiftKey
59248    }) => {
59249      if (!dragAreaRef.current) return;
59250      const {
59251        top,
59252        left
59253      } = dragAreaRef.current.getBoundingClientRect();
59254      let nextX = (clientX - left) / bounds.width;
59255      let nextY = (clientY - top) / bounds.height;
59256      // Enables holding shift to jump values by 10%.
59257      if (shiftKey) {
59258        nextX = Math.round(nextX / 0.1) * 0.1;
59259        nextY = Math.round(nextY / 0.1) * 0.1;
59260      }
59261      return getFinalValue({
59262        x: nextX,
59263        y: nextY
59264      });
59265    };
59266    const getFinalValue = value => {
59267      var _resolvePoint;
59268      const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
59269      resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
59270      resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
59271      const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;
59272      return {
59273        x: roundToTwoDecimalPlaces(resolvedValue.x),
59274        y: roundToTwoDecimalPlaces(resolvedValue.y)
59275      };
59276    };
59277    const arrowKeyStep = event => {
59278      const {
59279        code,
59280        shiftKey
59281      } = event;
59282      if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
59283      event.preventDefault();
59284      const value = {
59285        x,
59286        y
59287      };
59288      const step = shiftKey ? 0.1 : 0.01;
59289      const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
59290      const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
59291      value[axis] = value[axis] + delta;
59292      onChange?.(getFinalValue(value));
59293    };
59294    const focalPointPosition = {
59295      left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
59296      top: y !== undefined ? y * bounds.height : 0.5 * bounds.height
59297    };
59298    const classes = classnames_default()('components-focal-point-picker-control', className);
59299    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker);
59300    const id = `inspector-focal-point-picker-control-$instanceId}`;
59301    use_update_effect(() => {
59302      setShowGridOverlay(true);
59303      const timeout = window.setTimeout(() => {
59304        setShowGridOverlay(false);
59305      }, GRID_OVERLAY_TIMEOUT);
59306      return () => window.clearTimeout(timeout);
59307    }, [x, y]);
59308    return (0,external_React_.createElement)(base_control, {
59309      ...restProps,
59310      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
59311      label: label,
59312      id: id,
59313      help: help,
59314      className: classes
59315    }, (0,external_React_.createElement)(MediaWrapper, {
59316      className: "components-focal-point-picker-wrapper"
59317    }, (0,external_React_.createElement)(MediaContainer, {
59318      className: "components-focal-point-picker",
59319      onKeyDown: arrowKeyStep,
59320      onMouseDown: startDrag,
59321      onBlur: () => {
59322        if (isDragging) endDrag();
59323      },
59324      ref: dragAreaRef,
59325      role: "button",
59326      tabIndex: -1
59327    }, (0,external_React_.createElement)(FocalPointPickerGrid, {
59328      bounds: bounds,
59329      showOverlay: showGridOverlay
59330    }), (0,external_React_.createElement)(media_Media, {
59331      alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'),
59332      autoPlay: autoPlay,
59333      onLoad: refUpdateBounds.current,
59334      src: url
59335    }), (0,external_React_.createElement)(FocalPoint, {
59336      ...focalPointPosition,
59337      isDragging: isDragging
59338    }))), (0,external_React_.createElement)(FocalPointPickerControls, {
59339      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
59340      __next40pxDefaultSize: __next40pxDefaultSize,
59341      hasHelpText: !!help,
59342      point: {
59343        x,
59344        y
59345      },
59346      onChange: value => {
59347        onChange?.(getFinalValue(value));
59348      }
59349    }));
59350  }
59351  /* harmony default export */ const focal_point_picker = (FocalPointPicker);
59352  
59353  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js
59354  
59355  /**
59356   * WordPress dependencies
59357   */
59358  
59359  
59360  /**
59361   * Internal dependencies
59362   */
59363  
59364  function FocusableIframe({
59365    iframeRef,
59366    ...props
59367  }) {
59368    const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]);
59369    external_wp_deprecated_default()('wp.components.FocusableIframe', {
59370      since: '5.9',
59371      alternative: 'wp.compose.useFocusableIframe'
59372    });
59373    // Disable reason: The rendered iframe is a pass-through component,
59374    // assigning props inherited from the rendering parent. It's the
59375    // responsibility of the parent to assign a title.
59376    // eslint-disable-next-line jsx-a11y/iframe-has-title
59377    return (0,external_React_.createElement)("iframe", {
59378      ref: ref,
59379      ...props
59380    });
59381  }
59382  
59383  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js
59384  
59385  /**
59386   * WordPress dependencies
59387   */
59388  
59389  const settings = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
59390    xmlns: "http://www.w3.org/2000/svg",
59391    viewBox: "0 0 24 24"
59392  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
59393    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"
59394  }), (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
59395    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"
59396  }));
59397  /* harmony default export */ const library_settings = (settings);
59398  
59399  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js
59400  /**
59401   * WordPress dependencies
59402   */
59403  
59404  /**
59405   * Internal dependencies
59406   */
59407  
59408  
59409  
59410  /**
59411   * Some themes use css vars for their font sizes, so until we
59412   * have the way of calculating them don't display them.
59413   *
59414   * @param value The value that is checked.
59415   * @return Whether the value is a simple css value.
59416   */
59417  function isSimpleCssValue(value) {
59418    const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
59419    return sizeRegex.test(String(value));
59420  }
59421  
59422  /**
59423   * If all of the given font sizes have the same unit (e.g. 'px'), return that
59424   * unit. Otherwise return null.
59425   *
59426   * @param fontSizes List of font sizes.
59427   * @return The common unit, or null.
59428   */
59429  function getCommonSizeUnit(fontSizes) {
59430    const [firstFontSize, ...otherFontSizes] = fontSizes;
59431    if (!firstFontSize) {
59432      return null;
59433    }
59434    const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size);
59435    const areAllSizesSameUnit = otherFontSizes.every(fontSize => {
59436      const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size);
59437      return unit === firstUnit;
59438    });
59439    return areAllSizesSameUnit ? firstUnit : null;
59440  }
59441  
59442  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/styles.js
59443  
59444  function 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)."; }
59445  /**
59446   * External dependencies
59447   */
59448  
59449  /**
59450   * Internal dependencies
59451   */
59452  
59453  
59454  
59455  
59456  
59457  const styles_Container = emotion_styled_base_browser_esm("fieldset",  true ? {
59458    target: "e8tqeku4"
59459  } : 0)( true ? {
59460    name: "1t1ytme",
59461    styles: "border:0;margin:0;padding:0"
59462  } : 0);
59463  const styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component,  true ? {
59464    target: "e8tqeku3"
59465  } : 0)("height:", space(4), ";" + ( true ? "" : 0));
59466  const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
59467    target: "e8tqeku2"
59468  } : 0)("margin-top:", space(-1), ";" + ( true ? "" : 0));
59469  const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel,  true ? {
59470    target: "e8tqeku1"
59471  } : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0));
59472  const HeaderHint = emotion_styled_base_browser_esm("span",  true ? {
59473    target: "e8tqeku0"
59474  } : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0));
59475  
59476  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js
59477  
59478  /**
59479   * WordPress dependencies
59480   */
59481  
59482  
59483  /**
59484   * Internal dependencies
59485   */
59486  
59487  
59488  
59489  const DEFAULT_OPTION = {
59490    key: 'default',
59491    name: (0,external_wp_i18n_namespaceObject.__)('Default'),
59492    value: undefined
59493  };
59494  const CUSTOM_OPTION = {
59495    key: 'custom',
59496    name: (0,external_wp_i18n_namespaceObject.__)('Custom')
59497  };
59498  const FontSizePickerSelect = props => {
59499    var _options$find;
59500    const {
59501      __next40pxDefaultSize,
59502      fontSizes,
59503      value,
59504      disableCustomFontSizes,
59505      size,
59506      onChange,
59507      onSelectCustom
59508    } = props;
59509    const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes);
59510    const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {
59511      let hint;
59512      if (areAllSizesSameUnit) {
59513        const [quantity] = parseQuantityAndUnitFromRawValue(fontSize.size);
59514        if (quantity !== undefined) {
59515          hint = String(quantity);
59516        }
59517      } else if (isSimpleCssValue(fontSize.size)) {
59518        hint = String(fontSize.size);
59519      }
59520      return {
59521        key: fontSize.slug,
59522        name: fontSize.name || fontSize.slug,
59523        value: fontSize.size,
59524        __experimentalHint: hint
59525      };
59526    }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
59527    const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
59528    return (0,external_React_.createElement)(CustomSelectControl, {
59529      __next40pxDefaultSize: __next40pxDefaultSize,
59530      __nextUnconstrainedWidth: true,
59531      className: "components-font-size-picker__select",
59532      label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
59533      hideLabelFromVision: true,
59534      describedBy: (0,external_wp_i18n_namespaceObject.sprintf)(
59535      // translators: %s: Currently selected font size.
59536      (0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name),
59537      options: options,
59538      value: selectedOption,
59539      __experimentalShowSelectedHint: true,
59540      onChange: ({
59541        selectedItem
59542      }) => {
59543        if (selectedItem === CUSTOM_OPTION) {
59544          onSelectCustom();
59545        } else {
59546          onChange(selectedItem.value);
59547        }
59548      },
59549      size: size
59550    });
59551  };
59552  /* harmony default export */ const font_size_picker_select = (FontSizePickerSelect);
59553  
59554  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js
59555  
59556  /**
59557   * External dependencies
59558   */
59559  
59560  /**
59561   * WordPress dependencies
59562   */
59563  
59564  
59565  /**
59566   * Internal dependencies
59567   */
59568  
59569  
59570  function UnforwardedToggleGroupControlOption(props, ref) {
59571    const {
59572      label,
59573      ...restProps
59574    } = props;
59575    const optionLabel = restProps['aria-label'] || label;
59576    return (0,external_React_.createElement)(toggle_group_control_option_base_component, {
59577      ...restProps,
59578      "aria-label": optionLabel,
59579      ref: ref
59580    }, label);
59581  }
59582  
59583  /**
59584   * `ToggleGroupControlOption` is a form component and is meant to be used as a
59585   * child of `ToggleGroupControl`.
59586   *
59587   * ```jsx
59588   * import {
59589   *   __experimentalToggleGroupControl as ToggleGroupControl,
59590   *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
59591   * } from '@wordpress/components';
59592   *
59593   * function Example() {
59594   *   return (
59595   *     <ToggleGroupControl label="my label" value="vertical" isBlock>
59596   *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
59597   *       <ToggleGroupControlOption value="vertical" label="Vertical" />
59598   *     </ToggleGroupControl>
59599   *   );
59600   * }
59601   * ```
59602   */
59603  const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption);
59604  /* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption);
59605  
59606  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/constants.js
59607  /**
59608   * WordPress dependencies
59609   */
59610  
59611  
59612  /**
59613   * List of T-shirt abbreviations.
59614   *
59615   * When there are 5 font sizes or fewer, we assume that the font sizes are
59616   * ordered by size and show T-shirt labels.
59617   */
59618  const T_SHIRT_ABBREVIATIONS = [/* translators: S stands for 'small' and is a size label. */
59619  (0,external_wp_i18n_namespaceObject.__)('S'), /* translators: M stands for 'medium' and is a size label. */
59620  (0,external_wp_i18n_namespaceObject.__)('M'), /* translators: L stands for 'large' and is a size label. */
59621  (0,external_wp_i18n_namespaceObject.__)('L'), /* translators: XL stands for 'extra large' and is a size label. */
59622  (0,external_wp_i18n_namespaceObject.__)('XL'), /* translators: XXL stands for 'extra extra large' and is a size label. */
59623  (0,external_wp_i18n_namespaceObject.__)('XXL')];
59624  
59625  /**
59626   * List of T-shirt names.
59627   *
59628   * When there are 5 font sizes or fewer, we assume that the font sizes are
59629   * ordered by size and show T-shirt labels.
59630   */
59631  const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')];
59632  
59633  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-toggle-group.js
59634  
59635  /**
59636   * WordPress dependencies
59637   */
59638  
59639  
59640  /**
59641   * Internal dependencies
59642   */
59643  
59644  
59645  const FontSizePickerToggleGroup = props => {
59646    const {
59647      fontSizes,
59648      value,
59649      __next40pxDefaultSize,
59650      size,
59651      onChange
59652    } = props;
59653    return (0,external_React_.createElement)(toggle_group_control_component, {
59654      __nextHasNoMarginBottom: true,
59655      __next40pxDefaultSize: __next40pxDefaultSize,
59656      label: (0,external_wp_i18n_namespaceObject.__)('Font size'),
59657      hideLabelFromVision: true,
59658      value: value,
59659      onChange: onChange,
59660      isBlock: true,
59661      size: size
59662    }, fontSizes.map((fontSize, index) => (0,external_React_.createElement)(toggle_group_control_option_component, {
59663      key: fontSize.slug,
59664      value: fontSize.size,
59665      label: T_SHIRT_ABBREVIATIONS[index],
59666      "aria-label": fontSize.name || T_SHIRT_NAMES[index],
59667      showTooltip: true
59668    })));
59669  };
59670  /* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup);
59671  
59672  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/index.js
59673  
59674  /**
59675   * External dependencies
59676   */
59677  
59678  /**
59679   * WordPress dependencies
59680   */
59681  
59682  
59683  
59684  
59685  /**
59686   * Internal dependencies
59687   */
59688  
59689  
59690  
59691  
59692  
59693  
59694  
59695  
59696  
59697  
59698  
59699  const UnforwardedFontSizePicker = (props, ref) => {
59700    const {
59701      __next40pxDefaultSize = false,
59702      fallbackFontSize,
59703      fontSizes = [],
59704      disableCustomFontSizes = false,
59705      onChange,
59706      size = 'default',
59707      units: unitsProp,
59708      value,
59709      withSlider = false,
59710      withReset = true
59711    } = props;
59712    const units = useCustomUnits({
59713      availableUnits: unitsProp || ['px', 'em', 'rem']
59714    });
59715    const shouldUseSelectControl = fontSizes.length > 5;
59716    const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
59717    const isCustomValue = !!value && !selectedFontSize;
59718    const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomFontSizes && isCustomValue);
59719    const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => {
59720      if (showCustomValueControl) {
59721        return (0,external_wp_i18n_namespaceObject.__)('Custom');
59722      }
59723      if (!shouldUseSelectControl) {
59724        if (selectedFontSize) {
59725          return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
59726        }
59727        return '';
59728      }
59729      const commonUnit = getCommonSizeUnit(fontSizes);
59730      if (commonUnit) {
59731        return `($commonUnit})`;
59732      }
59733      return '';
59734    }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
59735    if (fontSizes.length === 0 && disableCustomFontSizes) {
59736      return null;
59737    }
59738  
59739    // If neither the value or first font size is a string, then FontSizePicker
59740    // operates in a legacy "unitless" mode where UnitControl can only be used
59741    // to select px values and onChange() is always called with number values.
59742    const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string';
59743    const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
59744    const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
59745    const isDisabled = value === undefined;
59746    return (0,external_React_.createElement)(styles_Container, {
59747      ref: ref,
59748      className: "components-font-size-picker"
59749    }, (0,external_React_.createElement)(visually_hidden_component, {
59750      as: "legend"
59751    }, (0,external_wp_i18n_namespaceObject.__)('Font size')), (0,external_React_.createElement)(spacer_component, null, (0,external_React_.createElement)(styles_Header, {
59752      className: "components-font-size-picker__header"
59753    }, (0,external_React_.createElement)(HeaderLabel, {
59754      "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} $headerHint || ''}`
59755    }, (0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && (0,external_React_.createElement)(HeaderHint, {
59756      className: "components-font-size-picker__header__hint"
59757    }, headerHint)), !disableCustomFontSizes && (0,external_React_.createElement)(HeaderToggle, {
59758      label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'),
59759      icon: library_settings,
59760      onClick: () => {
59761        setShowCustomValueControl(!showCustomValueControl);
59762      },
59763      isPressed: showCustomValueControl,
59764      size: "small"
59765    }))), (0,external_React_.createElement)("div", null, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0,external_React_.createElement)(font_size_picker_select, {
59766      __next40pxDefaultSize: __next40pxDefaultSize,
59767      fontSizes: fontSizes,
59768      value: value,
59769      disableCustomFontSizes: disableCustomFontSizes,
59770      size: size,
59771      onChange: newValue => {
59772        if (newValue === undefined) {
59773          onChange?.(undefined);
59774        } else {
59775          onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
59776        }
59777      },
59778      onSelectCustom: () => setShowCustomValueControl(true)
59779    }), !shouldUseSelectControl && !showCustomValueControl && (0,external_React_.createElement)(font_size_picker_toggle_group, {
59780      fontSizes: fontSizes,
59781      value: value,
59782      __next40pxDefaultSize: __next40pxDefaultSize,
59783      size: size,
59784      onChange: newValue => {
59785        if (newValue === undefined) {
59786          onChange?.(undefined);
59787        } else {
59788          onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
59789        }
59790      }
59791    }), !disableCustomFontSizes && showCustomValueControl && (0,external_React_.createElement)(flex_component, {
59792      className: "components-font-size-picker__custom-size-control"
59793    }, (0,external_React_.createElement)(flex_item_component, {
59794      isBlock: true
59795    }, (0,external_React_.createElement)(unit_control, {
59796      __next40pxDefaultSize: __next40pxDefaultSize,
59797      label: (0,external_wp_i18n_namespaceObject.__)('Custom'),
59798      labelPosition: "top",
59799      hideLabelFromVision: true,
59800      value: value,
59801      onChange: newValue => {
59802        if (newValue === undefined) {
59803          onChange?.(undefined);
59804        } else {
59805          onChange?.(hasUnits ? newValue : parseInt(newValue, 10));
59806        }
59807      },
59808      size: size,
59809      units: hasUnits ? units : [],
59810      min: 0
59811    })), withSlider && (0,external_React_.createElement)(flex_item_component, {
59812      isBlock: true
59813    }, (0,external_React_.createElement)(spacer_component, {
59814      marginX: 2,
59815      marginBottom: 0
59816    }, (0,external_React_.createElement)(range_control, {
59817      __nextHasNoMarginBottom: true,
59818      __next40pxDefaultSize: __next40pxDefaultSize,
59819      className: "components-font-size-picker__custom-input",
59820      label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'),
59821      hideLabelFromVision: true,
59822      value: valueQuantity,
59823      initialPosition: fallbackFontSize,
59824      withInputField: false,
59825      onChange: newValue => {
59826        if (newValue === undefined) {
59827          onChange?.(undefined);
59828        } else if (hasUnits) {
59829          onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));
59830        } else {
59831          onChange?.(newValue);
59832        }
59833      },
59834      min: 0,
59835      max: isValueUnitRelative ? 10 : 100,
59836      step: isValueUnitRelative ? 0.1 : 1
59837    }))), withReset && (0,external_React_.createElement)(flex_item_component, null, (0,external_React_.createElement)(Button, {
59838      disabled: isDisabled,
59839      __experimentalIsFocusable: true,
59840      onClick: () => {
59841        onChange?.(undefined);
59842      },
59843      variant: "secondary",
59844      __next40pxDefaultSize: true,
59845      size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small'
59846    }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))));
59847  };
59848  const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker);
59849  /* harmony default export */ const font_size_picker = (FontSizePicker);
59850  
59851  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-file-upload/index.js
59852  
59853  /**
59854   * WordPress dependencies
59855   */
59856  
59857  
59858  /**
59859   * Internal dependencies
59860   */
59861  
59862  /**
59863   * FormFileUpload is a component that allows users to select files from their local device.
59864   *
59865   * ```jsx
59866   * import { FormFileUpload } from '@wordpress/components';
59867   *
59868   * const MyFormFileUpload = () => (
59869   *   <FormFileUpload
59870   *     accept="image/*"
59871   *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
59872   *   >
59873   *     Upload
59874   *   </FormFileUpload>
59875   * );
59876   * ```
59877   */
59878  function FormFileUpload({
59879    accept,
59880    children,
59881    multiple = false,
59882    onChange,
59883    onClick,
59884    render,
59885    ...props
59886  }) {
59887    const ref = (0,external_wp_element_namespaceObject.useRef)(null);
59888    const openFileDialog = () => {
59889      ref.current?.click();
59890    };
59891    const ui = render ? render({
59892      openFileDialog
59893    }) : (0,external_React_.createElement)(build_module_button, {
59894      onClick: openFileDialog,
59895      ...props
59896    }, children);
59897    return (0,external_React_.createElement)("div", {
59898      className: "components-form-file-upload"
59899    }, ui, (0,external_React_.createElement)("input", {
59900      type: "file",
59901      ref: ref,
59902      multiple: multiple,
59903      style: {
59904        display: 'none'
59905      },
59906      accept: accept,
59907      onChange: onChange,
59908      onClick: onClick,
59909      "data-testid": "form-file-upload-input"
59910    }));
59911  }
59912  /* harmony default export */ const form_file_upload = (FormFileUpload);
59913  
59914  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-toggle/index.js
59915  
59916  /**
59917   * External dependencies
59918   */
59919  
59920  
59921  /**
59922   * Internal dependencies
59923   */
59924  
59925  const form_toggle_noop = () => {};
59926  
59927  /**
59928   * FormToggle switches a single setting on or off.
59929   *
59930   * ```jsx
59931   * import { FormToggle } from '@wordpress/components';
59932   * import { useState } from '@wordpress/element';
59933   *
59934   * const MyFormToggle = () => {
59935   *   const [ isChecked, setChecked ] = useState( true );
59936   *
59937   *   return (
59938   *     <FormToggle
59939   *       checked={ isChecked }
59940   *       onChange={ () => setChecked( ( state ) => ! state ) }
59941   *     />
59942   *   );
59943   * };
59944   * ```
59945   */
59946  function FormToggle(props) {
59947    const {
59948      className,
59949      checked,
59950      id,
59951      disabled,
59952      onChange = form_toggle_noop,
59953      ...additionalProps
59954    } = props;
59955    const wrapperClasses = classnames_default()('components-form-toggle', className, {
59956      'is-checked': checked,
59957      'is-disabled': disabled
59958    });
59959    return (0,external_React_.createElement)("span", {
59960      className: wrapperClasses
59961    }, (0,external_React_.createElement)("input", {
59962      className: "components-form-toggle__input",
59963      id: id,
59964      type: "checkbox",
59965      checked: checked,
59966      onChange: onChange,
59967      disabled: disabled,
59968      ...additionalProps
59969    }), (0,external_React_.createElement)("span", {
59970      className: "components-form-toggle__track"
59971    }), (0,external_React_.createElement)("span", {
59972      className: "components-form-toggle__thumb"
59973    }));
59974  }
59975  /* harmony default export */ const form_toggle = (FormToggle);
59976  
59977  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token.js
59978  
59979  /**
59980   * External dependencies
59981   */
59982  
59983  
59984  /**
59985   * WordPress dependencies
59986   */
59987  
59988  
59989  
59990  
59991  /**
59992   * Internal dependencies
59993   */
59994  
59995  
59996  const token_noop = () => {};
59997  function Token({
59998    value,
59999    status,
60000    title,
60001    displayTransform,
60002    isBorderless = false,
60003    disabled = false,
60004    onClickRemove = token_noop,
60005    onMouseEnter,
60006    onMouseLeave,
60007    messages,
60008    termPosition,
60009    termsCount
60010  }) {
60011    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token);
60012    const tokenClasses = classnames_default()('components-form-token-field__token', {
60013      'is-error': 'error' === status,
60014      'is-success': 'success' === status,
60015      'is-validating': 'validating' === status,
60016      'is-borderless': isBorderless,
60017      'is-disabled': disabled
60018    });
60019    const onClick = () => onClickRemove({
60020      value
60021    });
60022    const transformedValue = displayTransform(value);
60023    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. */
60024    (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount);
60025    return (0,external_React_.createElement)("span", {
60026      className: tokenClasses,
60027      onMouseEnter: onMouseEnter,
60028      onMouseLeave: onMouseLeave,
60029      title: title
60030    }, (0,external_React_.createElement)("span", {
60031      className: "components-form-token-field__token-text",
60032      id: `components-form-token-field__token-text-$instanceId}`
60033    }, (0,external_React_.createElement)(visually_hidden_component, {
60034      as: "span"
60035    }, termPositionAndCount), (0,external_React_.createElement)("span", {
60036      "aria-hidden": "true"
60037    }, transformedValue)), (0,external_React_.createElement)(build_module_button, {
60038      className: "components-form-token-field__remove-token",
60039      icon: close_small,
60040      onClick: !disabled ? onClick : undefined,
60041      disabled: disabled,
60042      label: messages.remove,
60043      "aria-describedby": `components-form-token-field__token-text-$instanceId}`
60044    }));
60045  }
60046  
60047  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/styles.js
60048  
60049  /**
60050   * External dependencies
60051   */
60052  
60053  
60054  
60055  /**
60056   * Internal dependencies
60057   */
60058  
60059  
60060  
60061  const deprecatedPaddings = ({
60062    __next40pxDefaultSize,
60063    hasTokens
60064  }) => !__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);
60065  const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component,  true ? {
60066    target: "ehq8nmi0"
60067  } : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0));
60068  
60069  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/index.js
60070  
60071  /**
60072   * External dependencies
60073   */
60074  
60075  /**
60076   * WordPress dependencies
60077   */
60078  
60079  
60080  
60081  
60082  
60083  
60084  /**
60085   * Internal dependencies
60086   */
60087  
60088  
60089  
60090  
60091  
60092  
60093  
60094  
60095  const form_token_field_identity = value => value;
60096  
60097  /**
60098   * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
60099   * 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.
60100   *
60101   * 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).
60102   * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
60103   *
60104   * The `value` property is handled in a manner similar to controlled form components.
60105   * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
60106   */
60107  function FormTokenField(props) {
60108    const {
60109      autoCapitalize,
60110      autoComplete,
60111      maxLength,
60112      placeholder,
60113      label = (0,external_wp_i18n_namespaceObject.__)('Add item'),
60114      className,
60115      suggestions = [],
60116      maxSuggestions = 100,
60117      value = [],
60118      displayTransform = form_token_field_identity,
60119      saveTransform = token => token.trim(),
60120      onChange = () => {},
60121      onInputChange = () => {},
60122      onFocus = undefined,
60123      isBorderless = false,
60124      disabled = false,
60125      tokenizeOnSpace = false,
60126      messages = {
60127        added: (0,external_wp_i18n_namespaceObject.__)('Item added.'),
60128        removed: (0,external_wp_i18n_namespaceObject.__)('Item removed.'),
60129        remove: (0,external_wp_i18n_namespaceObject.__)('Remove item'),
60130        __experimentalInvalid: (0,external_wp_i18n_namespaceObject.__)('Invalid item')
60131      },
60132      __experimentalRenderItem,
60133      __experimentalExpandOnFocus = false,
60134      __experimentalValidateInput = () => true,
60135      __experimentalShowHowTo = true,
60136      __next40pxDefaultSize = false,
60137      __experimentalAutoSelectFirstMatch = false,
60138      __nextHasNoMarginBottom = false,
60139      tokenizeOnBlur = false
60140    } = useDeprecated36pxDefaultSizeProp(props);
60141    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FormTokenField);
60142  
60143    // We reset to these initial values again in the onBlur
60144    const [incompleteTokenValue, setIncompleteTokenValue] = (0,external_wp_element_namespaceObject.useState)('');
60145    const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0,external_wp_element_namespaceObject.useState)(0);
60146    const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false);
60147    const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false);
60148    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0,external_wp_element_namespaceObject.useState)(-1);
60149    const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0,external_wp_element_namespaceObject.useState)(false);
60150    const prevSuggestions = (0,external_wp_compose_namespaceObject.usePrevious)(suggestions);
60151    const prevValue = (0,external_wp_compose_namespaceObject.usePrevious)(value);
60152    const input = (0,external_wp_element_namespaceObject.useRef)(null);
60153    const tokensAndInput = (0,external_wp_element_namespaceObject.useRef)(null);
60154    const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500);
60155    (0,external_wp_element_namespaceObject.useEffect)(() => {
60156      // Make sure to focus the input when the isActive state is true.
60157      if (isActive && !hasFocus()) {
60158        focus();
60159      }
60160    }, [isActive]);
60161    (0,external_wp_element_namespaceObject.useEffect)(() => {
60162      const suggestionsDidUpdate = !external_wp_isShallowEqual_default()(suggestions, prevSuggestions || []);
60163      if (suggestionsDidUpdate || value !== prevValue) {
60164        updateSuggestions(suggestionsDidUpdate);
60165      }
60166  
60167      // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
60168      // eslint-disable-next-line react-hooks/exhaustive-deps
60169    }, [suggestions, prevSuggestions, value, prevValue]);
60170    (0,external_wp_element_namespaceObject.useEffect)(() => {
60171      updateSuggestions();
60172      // eslint-disable-next-line react-hooks/exhaustive-deps
60173    }, [incompleteTokenValue]);
60174    (0,external_wp_element_namespaceObject.useEffect)(() => {
60175      updateSuggestions();
60176      // eslint-disable-next-line react-hooks/exhaustive-deps
60177    }, [__experimentalAutoSelectFirstMatch]);
60178    if (disabled && isActive) {
60179      setIsActive(false);
60180      setIncompleteTokenValue('');
60181    }
60182    function focus() {
60183      input.current?.focus();
60184    }
60185    function hasFocus() {
60186      return input.current === input.current?.ownerDocument.activeElement;
60187    }
60188    function onFocusHandler(event) {
60189      // If focus is on the input or on the container, set the isActive state to true.
60190      if (hasFocus() || event.target === tokensAndInput.current) {
60191        setIsActive(true);
60192        setIsExpanded(__experimentalExpandOnFocus || isExpanded);
60193      } else {
60194        /*
60195         * Otherwise, focus is on one of the token "remove" buttons and we
60196         * set the isActive state to false to prevent the input to be
60197         * re-focused, see componentDidUpdate().
60198         */
60199        setIsActive(false);
60200      }
60201      if ('function' === typeof onFocus) {
60202        onFocus(event);
60203      }
60204    }
60205    function onBlur(event) {
60206      if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
60207        setIsActive(false);
60208        if (tokenizeOnBlur && inputHasValidValue()) {
60209          addNewToken(incompleteTokenValue);
60210        }
60211      } else {
60212        // Reset to initial state
60213        setIncompleteTokenValue('');
60214        setInputOffsetFromEnd(0);
60215        setIsActive(false);
60216        if (__experimentalExpandOnFocus) {
60217          // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
60218          // the user clicks on it (`tokensAndInput` will be the element that caused the blur).
60219          const hasFocusWithin = event.relatedTarget === tokensAndInput.current;
60220          setIsExpanded(hasFocusWithin);
60221        } else {
60222          // Else collapse the suggestion list. This will result in the suggestion list closing
60223          // after a suggestion has been submitted since that causes a blur.
60224          setIsExpanded(false);
60225        }
60226        setSelectedSuggestionIndex(-1);
60227        setSelectedSuggestionScroll(false);
60228      }
60229    }
60230    function onKeyDown(event) {
60231      let preventDefault = false;
60232      if (event.defaultPrevented ||
60233      // Ignore keydowns from IMEs
60234      event.nativeEvent.isComposing ||
60235      // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
60236      // is `isComposing=false`, even though it's technically still part of the composition.
60237      // These can only be detected by keyCode.
60238      event.keyCode === 229) {
60239        return;
60240      }
60241      switch (event.key) {
60242        case 'Backspace':
60243          preventDefault = handleDeleteKey(deleteTokenBeforeInput);
60244          break;
60245        case 'Enter':
60246          preventDefault = addCurrentToken();
60247          break;
60248        case 'ArrowLeft':
60249          preventDefault = handleLeftArrowKey();
60250          break;
60251        case 'ArrowUp':
60252          preventDefault = handleUpArrowKey();
60253          break;
60254        case 'ArrowRight':
60255          preventDefault = handleRightArrowKey();
60256          break;
60257        case 'ArrowDown':
60258          preventDefault = handleDownArrowKey();
60259          break;
60260        case 'Delete':
60261          preventDefault = handleDeleteKey(deleteTokenAfterInput);
60262          break;
60263        case 'Space':
60264          if (tokenizeOnSpace) {
60265            preventDefault = addCurrentToken();
60266          }
60267          break;
60268        case 'Escape':
60269          preventDefault = handleEscapeKey(event);
60270          break;
60271        default:
60272          break;
60273      }
60274      if (preventDefault) {
60275        event.preventDefault();
60276      }
60277    }
60278    function onKeyPress(event) {
60279      let preventDefault = false;
60280      switch (event.key) {
60281        case ',':
60282          preventDefault = handleCommaKey();
60283          break;
60284        default:
60285          break;
60286      }
60287      if (preventDefault) {
60288        event.preventDefault();
60289      }
60290    }
60291    function onContainerTouched(event) {
60292      // Prevent clicking/touching the tokensAndInput container from blurring
60293      // the input and adding the current token.
60294      if (event.target === tokensAndInput.current && isActive) {
60295        event.preventDefault();
60296      }
60297    }
60298    function onTokenClickRemove(event) {
60299      deleteToken(event.value);
60300      focus();
60301    }
60302    function onSuggestionHovered(suggestion) {
60303      const index = getMatchingSuggestions().indexOf(suggestion);
60304      if (index >= 0) {
60305        setSelectedSuggestionIndex(index);
60306        setSelectedSuggestionScroll(false);
60307      }
60308    }
60309    function onSuggestionSelected(suggestion) {
60310      addNewToken(suggestion);
60311    }
60312    function onInputChangeHandler(event) {
60313      const text = event.value;
60314      const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
60315      const items = text.split(separator);
60316      const tokenValue = items[items.length - 1] || '';
60317      if (items.length > 1) {
60318        addNewTokens(items.slice(0, -1));
60319      }
60320      setIncompleteTokenValue(tokenValue);
60321      onInputChange(tokenValue);
60322    }
60323    function handleDeleteKey(_deleteToken) {
60324      let preventDefault = false;
60325      if (hasFocus() && isInputEmpty()) {
60326        _deleteToken();
60327        preventDefault = true;
60328      }
60329      return preventDefault;
60330    }
60331    function handleLeftArrowKey() {
60332      let preventDefault = false;
60333      if (isInputEmpty()) {
60334        moveInputBeforePreviousToken();
60335        preventDefault = true;
60336      }
60337      return preventDefault;
60338    }
60339    function handleRightArrowKey() {
60340      let preventDefault = false;
60341      if (isInputEmpty()) {
60342        moveInputAfterNextToken();
60343        preventDefault = true;
60344      }
60345      return preventDefault;
60346    }
60347    function handleUpArrowKey() {
60348      setSelectedSuggestionIndex(index => {
60349        return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
60350      });
60351      setSelectedSuggestionScroll(true);
60352      return true; // PreventDefault.
60353    }
60354    function handleDownArrowKey() {
60355      setSelectedSuggestionIndex(index => {
60356        return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;
60357      });
60358      setSelectedSuggestionScroll(true);
60359      return true; // PreventDefault.
60360    }
60361    function handleEscapeKey(event) {
60362      if (event.target instanceof HTMLInputElement) {
60363        setIncompleteTokenValue(event.target.value);
60364        setIsExpanded(false);
60365        setSelectedSuggestionIndex(-1);
60366        setSelectedSuggestionScroll(false);
60367      }
60368      return true; // PreventDefault.
60369    }
60370    function handleCommaKey() {
60371      if (inputHasValidValue()) {
60372        addNewToken(incompleteTokenValue);
60373      }
60374      return true; // PreventDefault.
60375    }
60376    function moveInputToIndex(index) {
60377      setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);
60378    }
60379    function moveInputBeforePreviousToken() {
60380      setInputOffsetFromEnd(prevInputOffsetFromEnd => {
60381        return Math.min(prevInputOffsetFromEnd + 1, value.length);
60382      });
60383    }
60384    function moveInputAfterNextToken() {
60385      setInputOffsetFromEnd(prevInputOffsetFromEnd => {
60386        return Math.max(prevInputOffsetFromEnd - 1, 0);
60387      });
60388    }
60389    function deleteTokenBeforeInput() {
60390      const index = getIndexOfInput() - 1;
60391      if (index > -1) {
60392        deleteToken(value[index]);
60393      }
60394    }
60395    function deleteTokenAfterInput() {
60396      const index = getIndexOfInput();
60397      if (index < value.length) {
60398        deleteToken(value[index]);
60399        // Update input offset since it's the offset from the last token.
60400        moveInputToIndex(index);
60401      }
60402    }
60403    function addCurrentToken() {
60404      let preventDefault = false;
60405      const selectedSuggestion = getSelectedSuggestion();
60406      if (selectedSuggestion) {
60407        addNewToken(selectedSuggestion);
60408        preventDefault = true;
60409      } else if (inputHasValidValue()) {
60410        addNewToken(incompleteTokenValue);
60411        preventDefault = true;
60412      }
60413      return preventDefault;
60414    }
60415    function addNewTokens(tokens) {
60416      const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
60417      if (tokensToAdd.length > 0) {
60418        const newValue = [...value];
60419        newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);
60420        onChange(newValue);
60421      }
60422    }
60423    function addNewToken(token) {
60424      if (!__experimentalValidateInput(token)) {
60425        (0,external_wp_a11y_namespaceObject.speak)(messages.__experimentalInvalid, 'assertive');
60426        return;
60427      }
60428      addNewTokens([token]);
60429      (0,external_wp_a11y_namespaceObject.speak)(messages.added, 'assertive');
60430      setIncompleteTokenValue('');
60431      setSelectedSuggestionIndex(-1);
60432      setSelectedSuggestionScroll(false);
60433      setIsExpanded(!__experimentalExpandOnFocus);
60434      if (isActive && !tokenizeOnBlur) {
60435        focus();
60436      }
60437    }
60438    function deleteToken(token) {
60439      const newTokens = value.filter(item => {
60440        return getTokenValue(item) !== getTokenValue(token);
60441      });
60442      onChange(newTokens);
60443      (0,external_wp_a11y_namespaceObject.speak)(messages.removed, 'assertive');
60444    }
60445    function getTokenValue(token) {
60446      if ('object' === typeof token) {
60447        return token.value;
60448      }
60449      return token;
60450    }
60451    function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) {
60452      let match = _saveTransform(searchValue);
60453      const startsWithMatch = [];
60454      const containsMatch = [];
60455      const normalizedValue = _value.map(item => {
60456        if (typeof item === 'string') {
60457          return item;
60458        }
60459        return item.value;
60460      });
60461      if (match.length === 0) {
60462        _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));
60463      } else {
60464        match = match.toLocaleLowerCase();
60465        _suggestions.forEach(suggestion => {
60466          const index = suggestion.toLocaleLowerCase().indexOf(match);
60467          if (normalizedValue.indexOf(suggestion) === -1) {
60468            if (index === 0) {
60469              startsWithMatch.push(suggestion);
60470            } else if (index > 0) {
60471              containsMatch.push(suggestion);
60472            }
60473          }
60474        });
60475        _suggestions = startsWithMatch.concat(containsMatch);
60476      }
60477      return _suggestions.slice(0, _maxSuggestions);
60478    }
60479    function getSelectedSuggestion() {
60480      if (selectedSuggestionIndex !== -1) {
60481        return getMatchingSuggestions()[selectedSuggestionIndex];
60482      }
60483      return undefined;
60484    }
60485    function valueContainsToken(token) {
60486      return value.some(item => {
60487        return getTokenValue(token) === getTokenValue(item);
60488      });
60489    }
60490    function getIndexOfInput() {
60491      return value.length - inputOffsetFromEnd;
60492    }
60493    function isInputEmpty() {
60494      return incompleteTokenValue.length === 0;
60495    }
60496    function inputHasValidValue() {
60497      return saveTransform(incompleteTokenValue).length > 0;
60498    }
60499    function updateSuggestions(resetSelectedSuggestion = true) {
60500      const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
60501      const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
60502      const hasMatchingSuggestions = matchingSuggestions.length > 0;
60503      const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
60504      setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);
60505      if (resetSelectedSuggestion) {
60506        if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {
60507          setSelectedSuggestionIndex(0);
60508          setSelectedSuggestionScroll(true);
60509        } else {
60510          setSelectedSuggestionIndex(-1);
60511          setSelectedSuggestionScroll(false);
60512        }
60513      }
60514      if (inputHasMinimumChars) {
60515        const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
60516        (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.');
60517        debouncedSpeak(message, 'assertive');
60518      }
60519    }
60520    function renderTokensAndInput() {
60521      const components = value.map(renderToken);
60522      components.splice(getIndexOfInput(), 0, renderInput());
60523      return components;
60524    }
60525    function renderToken(token, index, tokens) {
60526      const _value = getTokenValue(token);
60527      const status = typeof token !== 'string' ? token.status : undefined;
60528      const termPosition = index + 1;
60529      const termsCount = tokens.length;
60530      return (0,external_React_.createElement)(flex_item_component, {
60531        key: 'token-' + _value
60532      }, (0,external_React_.createElement)(Token, {
60533        value: _value,
60534        status: status,
60535        title: typeof token !== 'string' ? token.title : undefined,
60536        displayTransform: displayTransform,
60537        onClickRemove: onTokenClickRemove,
60538        isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless,
60539        onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined,
60540        onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined,
60541        disabled: 'error' !== status && disabled,
60542        messages: messages,
60543        termsCount: termsCount,
60544        termPosition: termPosition
60545      }));
60546    }
60547    function renderInput() {
60548      const inputProps = {
60549        instanceId,
60550        autoCapitalize,
60551        autoComplete,
60552        placeholder: value.length === 0 ? placeholder : '',
60553        key: 'input',
60554        disabled,
60555        value: incompleteTokenValue,
60556        onBlur,
60557        isExpanded,
60558        selectedSuggestionIndex
60559      };
60560      return (0,external_React_.createElement)(token_input, {
60561        ...inputProps,
60562        onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
60563        ref: input
60564      });
60565    }
60566    const classes = classnames_default()(className, 'components-form-token-field__input-container', {
60567      'is-active': isActive,
60568      'is-disabled': disabled
60569    });
60570    let tokenFieldProps = {
60571      className: 'components-form-token-field',
60572      tabIndex: -1
60573    };
60574    const matchingSuggestions = getMatchingSuggestions();
60575    if (!disabled) {
60576      tokenFieldProps = Object.assign({}, tokenFieldProps, {
60577        onKeyDown,
60578        onKeyPress,
60579        onFocus: onFocusHandler
60580      });
60581    }
60582  
60583    // Disable reason: There is no appropriate role which describes the
60584    // input container intended accessible usability.
60585    // TODO: Refactor click detection to use blur to stop propagation.
60586    /* eslint-disable jsx-a11y/no-static-element-interactions */
60587    return (0,external_React_.createElement)("div", {
60588      ...tokenFieldProps
60589    }, (0,external_React_.createElement)(StyledLabel, {
60590      htmlFor: `components-form-token-input-$instanceId}`,
60591      className: "components-form-token-field__label"
60592    }, label), (0,external_React_.createElement)("div", {
60593      ref: tokensAndInput,
60594      className: classes,
60595      tabIndex: -1,
60596      onMouseDown: onContainerTouched,
60597      onTouchStart: onContainerTouched
60598    }, (0,external_React_.createElement)(TokensAndInputWrapperFlex, {
60599      justify: "flex-start",
60600      align: "center",
60601      gap: 1,
60602      wrap: true,
60603      __next40pxDefaultSize: __next40pxDefaultSize,
60604      hasTokens: !!value.length
60605    }, renderTokensAndInput()), isExpanded && (0,external_React_.createElement)(suggestions_list, {
60606      instanceId: instanceId,
60607      match: saveTransform(incompleteTokenValue),
60608      displayTransform: displayTransform,
60609      suggestions: matchingSuggestions,
60610      selectedIndex: selectedSuggestionIndex,
60611      scrollIntoView: selectedSuggestionScroll,
60612      onHover: onSuggestionHovered,
60613      onSelect: onSuggestionSelected,
60614      __experimentalRenderItem: __experimentalRenderItem
60615    })), !__nextHasNoMarginBottom && (0,external_React_.createElement)(spacer_component, {
60616      marginBottom: 2
60617    }), __experimentalShowHowTo && (0,external_React_.createElement)(StyledHelp, {
60618      id: `components-form-token-suggestions-howto-$instanceId}`,
60619      className: "components-form-token-field__help",
60620      __nextHasNoMarginBottom: __nextHasNoMarginBottom
60621    }, 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.')));
60622    /* eslint-enable jsx-a11y/no-static-element-interactions */
60623  }
60624  /* harmony default export */ const form_token_field = (FormTokenField);
60625  
60626  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/icons.js
60627  
60628  /**
60629   * WordPress dependencies
60630   */
60631  
60632  const PageControlIcon = () => (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
60633    width: "8",
60634    height: "8",
60635    fill: "none",
60636    xmlns: "http://www.w3.org/2000/svg"
60637  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Circle, {
60638    cx: "4",
60639    cy: "4",
60640    r: "4"
60641  }));
60642  
60643  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page-control.js
60644  
60645  /**
60646   * WordPress dependencies
60647   */
60648  
60649  
60650  /**
60651   * Internal dependencies
60652   */
60653  
60654  
60655  function PageControl({
60656    currentPage,
60657    numberOfPages,
60658    setCurrentPage
60659  }) {
60660    return (0,external_React_.createElement)("ul", {
60661      className: "components-guide__page-control",
60662      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls')
60663    }, Array.from({
60664      length: numberOfPages
60665    }).map((_, page) => (0,external_React_.createElement)("li", {
60666      key: page
60667      // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
60668      ,
60669      "aria-current": page === currentPage ? 'step' : undefined
60670    }, (0,external_React_.createElement)(build_module_button, {
60671      key: page,
60672      icon: (0,external_React_.createElement)(PageControlIcon, null),
60673      "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */
60674      (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
60675      onClick: () => setCurrentPage(page)
60676    }))));
60677  }
60678  
60679  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/index.js
60680  
60681  /**
60682   * External dependencies
60683   */
60684  
60685  
60686  /**
60687   * WordPress dependencies
60688   */
60689  
60690  
60691  
60692  
60693  /**
60694   * Internal dependencies
60695   */
60696  
60697  
60698  
60699  /**
60700   * `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.
60701   *
60702   * ```jsx
60703   * function MyTutorial() {
60704   *     const [ isOpen, setIsOpen ] = useState( true );
60705   *
60706   *     if ( ! isOpen ) {
60707   *         return null;
60708   *     }
60709   *
60710   *     return (
60711   *         <Guide
60712   *             onFinish={ () => setIsOpen( false ) }
60713   *             pages={ [
60714   *                 {
60715   *                     content: <p>Welcome to the ACME Store!</p>,
60716   *                 },
60717   *                 {
60718   *                     image: <img src="https://acmestore.com/add-to-cart.png" />,
60719   *                     content: (
60720   *                         <p>
60721   *                             Click <i>Add to Cart</i> to buy a product.
60722   *                         </p>
60723   *                     ),
60724   *                 },
60725   *             ] }
60726   *         />
60727   *     );
60728   * }
60729   * ```
60730   */
60731  function Guide({
60732    children,
60733    className,
60734    contentLabel,
60735    finishButtonText = (0,external_wp_i18n_namespaceObject.__)('Finish'),
60736    onFinish,
60737    pages = []
60738  }) {
60739    const ref = (0,external_wp_element_namespaceObject.useRef)(null);
60740    const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(0);
60741    (0,external_wp_element_namespaceObject.useEffect)(() => {
60742      // Place focus at the top of the guide on mount and when the page changes.
60743      const frame = ref.current?.querySelector('.components-guide');
60744      if (frame instanceof HTMLElement) {
60745        frame.focus();
60746      }
60747    }, [currentPage]);
60748    (0,external_wp_element_namespaceObject.useEffect)(() => {
60749      if (external_wp_element_namespaceObject.Children.count(children)) {
60750        external_wp_deprecated_default()('Passing children to <Guide>', {
60751          since: '5.5',
60752          alternative: 'the `pages` prop'
60753        });
60754      }
60755    }, [children]);
60756    if (external_wp_element_namespaceObject.Children.count(children)) {
60757      var _Children$map;
60758      pages = (_Children$map = external_wp_element_namespaceObject.Children.map(children, child => ({
60759        content: child
60760      }))) !== null && _Children$map !== void 0 ? _Children$map : [];
60761    }
60762    const canGoBack = currentPage > 0;
60763    const canGoForward = currentPage < pages.length - 1;
60764    const goBack = () => {
60765      if (canGoBack) {
60766        setCurrentPage(currentPage - 1);
60767      }
60768    };
60769    const goForward = () => {
60770      if (canGoForward) {
60771        setCurrentPage(currentPage + 1);
60772      }
60773    };
60774    if (pages.length === 0) {
60775      return null;
60776    }
60777    return (0,external_React_.createElement)(modal, {
60778      className: classnames_default()('components-guide', className),
60779      contentLabel: contentLabel,
60780      isDismissible: pages.length > 1,
60781      onRequestClose: onFinish,
60782      onKeyDown: event => {
60783        if (event.code === 'ArrowLeft') {
60784          goBack();
60785          // Do not scroll the modal's contents.
60786          event.preventDefault();
60787        } else if (event.code === 'ArrowRight') {
60788          goForward();
60789          // Do not scroll the modal's contents.
60790          event.preventDefault();
60791        }
60792      },
60793      ref: ref
60794    }, (0,external_React_.createElement)("div", {
60795      className: "components-guide__container"
60796    }, (0,external_React_.createElement)("div", {
60797      className: "components-guide__page"
60798    }, pages[currentPage].image, pages.length > 1 && (0,external_React_.createElement)(PageControl, {
60799      currentPage: currentPage,
60800      numberOfPages: pages.length,
60801      setCurrentPage: setCurrentPage
60802    }), pages[currentPage].content), (0,external_React_.createElement)("div", {
60803      className: "components-guide__footer"
60804    }, canGoBack && (0,external_React_.createElement)(build_module_button, {
60805      className: "components-guide__back-button",
60806      variant: "tertiary",
60807      onClick: goBack
60808    }, (0,external_wp_i18n_namespaceObject.__)('Previous')), canGoForward && (0,external_React_.createElement)(build_module_button, {
60809      className: "components-guide__forward-button",
60810      variant: "primary",
60811      onClick: goForward
60812    }, (0,external_wp_i18n_namespaceObject.__)('Next')), !canGoForward && (0,external_React_.createElement)(build_module_button, {
60813      className: "components-guide__finish-button",
60814      variant: "primary",
60815      onClick: onFinish
60816    }, finishButtonText))));
60817  }
60818  /* harmony default export */ const guide = (Guide);
60819  
60820  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page.js
60821  
60822  /**
60823   * WordPress dependencies
60824   */
60825  
60826  
60827  
60828  /**
60829   * Internal dependencies
60830   */
60831  
60832  function GuidePage(props) {
60833    (0,external_wp_element_namespaceObject.useEffect)(() => {
60834      external_wp_deprecated_default()('<GuidePage>', {
60835        since: '5.5',
60836        alternative: 'the `pages` prop in <Guide>'
60837      });
60838    }, []);
60839    return (0,external_React_.createElement)("div", {
60840      ...props
60841    });
60842  }
60843  
60844  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/deprecated.js
60845  
60846  /**
60847   * External dependencies
60848   */
60849  
60850  /**
60851   * WordPress dependencies
60852   */
60853  
60854  
60855  
60856  /**
60857   * Internal dependencies
60858   */
60859  
60860  function UnforwardedIconButton({
60861    label,
60862    labelPosition,
60863    size,
60864    tooltip,
60865    ...props
60866  }, ref) {
60867    external_wp_deprecated_default()('wp.components.IconButton', {
60868      since: '5.4',
60869      alternative: 'wp.components.Button',
60870      version: '6.2'
60871    });
60872    return (0,external_React_.createElement)(build_module_button, {
60873      ...props,
60874      ref: ref,
60875      tooltipPosition: labelPosition,
60876      iconSize: size,
60877      showTooltip: tooltip !== undefined ? !!tooltip : undefined,
60878      label: tooltip || label
60879    });
60880  }
60881  /* harmony default export */ const deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedIconButton));
60882  
60883  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/hook.js
60884  /**
60885   * External dependencies
60886   */
60887  
60888  /**
60889   * WordPress dependencies
60890   */
60891  
60892  
60893  /**
60894   * Internal dependencies
60895   */
60896  
60897  
60898  
60899  
60900  
60901  function useItem(props) {
60902    const {
60903      as: asProp,
60904      className,
60905      onClick,
60906      role = 'listitem',
60907      size: sizeProp,
60908      ...otherProps
60909    } = useContextSystem(props, 'Item');
60910    const {
60911      spacedAround,
60912      size: contextSize
60913    } = useItemGroupContext();
60914    const size = sizeProp || contextSize;
60915    const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div');
60916    const cx = useCx();
60917    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]);
60918    const wrapperClassName = cx(itemWrapper);
60919    return {
60920      as,
60921      className: classes,
60922      onClick,
60923      wrapperClassName,
60924      role,
60925      ...otherProps
60926    };
60927  }
60928  
60929  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/component.js
60930  
60931  /**
60932   * External dependencies
60933   */
60934  
60935  /**
60936   * Internal dependencies
60937   */
60938  
60939  
60940  
60941  
60942  function UnconnectedItem(props, forwardedRef) {
60943    const {
60944      role,
60945      wrapperClassName,
60946      ...otherProps
60947    } = useItem(props);
60948    return (0,external_React_.createElement)("div", {
60949      role: role,
60950      className: wrapperClassName
60951    }, (0,external_React_.createElement)(component, {
60952      ...otherProps,
60953      ref: forwardedRef
60954    }));
60955  }
60956  
60957  /**
60958   * `Item` is used in combination with `ItemGroup` to display a list of items
60959   * grouped and styled together.
60960   *
60961   * ```jsx
60962   * import {
60963   *   __experimentalItemGroup as ItemGroup,
60964   *   __experimentalItem as Item,
60965   * } from '@wordpress/components';
60966   *
60967   * function Example() {
60968   *   return (
60969   *     <ItemGroup>
60970   *       <Item>Code</Item>
60971   *       <Item>is</Item>
60972   *       <Item>Poetry</Item>
60973   *     </ItemGroup>
60974   *   );
60975   * }
60976   * ```
60977   */
60978  const component_Item = contextConnect(UnconnectedItem, 'Item');
60979  /* harmony default export */ const item_component = (component_Item);
60980  
60981  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-prefix-wrapper.js
60982  
60983  /**
60984   * External dependencies
60985   */
60986  
60987  /**
60988   * Internal dependencies
60989   */
60990  
60991  
60992  function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
60993    const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper');
60994    return (0,external_React_.createElement)(spacer_component, {
60995      marginBottom: 0,
60996      ...derivedProps,
60997      ref: forwardedRef
60998    });
60999  }
61000  
61001  /**
61002   * A convenience wrapper for the `prefix` when you want to apply
61003   * standard padding in accordance with the size variant.
61004   *
61005   * ```jsx
61006   * import {
61007   *   __experimentalInputControl as InputControl,
61008   *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
61009   * } from '@wordpress/components';
61010   *
61011   * <InputControl
61012   *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
61013   * />
61014   * ```
61015   */
61016  const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
61017  /* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper);
61018  
61019  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js
61020  
61021  /**
61022   * WordPress dependencies
61023   */
61024  
61025  
61026  
61027  /**
61028   * Internal dependencies
61029   */
61030  
61031  function KeyboardShortcut({
61032    target,
61033    callback,
61034    shortcut,
61035    bindGlobal,
61036    eventName
61037  }) {
61038    (0,external_wp_compose_namespaceObject.useKeyboardShortcut)(shortcut, callback, {
61039      bindGlobal,
61040      target,
61041      eventName
61042    });
61043    return null;
61044  }
61045  
61046  /**
61047   * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.
61048   *
61049   * 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.
61050   *
61051   * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.
61052   *
61053   * ```jsx
61054   * import { KeyboardShortcuts } from '@wordpress/components';
61055   * import { useState } from '@wordpress/element';
61056   *
61057   * const MyKeyboardShortcuts = () => {
61058   *     const [ isAllSelected, setIsAllSelected ] = useState( false );
61059   *     const selectAll = () => {
61060   *         setIsAllSelected( true );
61061   *     };
61062   *
61063   *     return (
61064   *         <div>
61065   *             <KeyboardShortcuts
61066   *                 shortcuts={ {
61067   *                     'mod+a': selectAll,
61068   *                 } }
61069   *             />
61070   *             [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
61071   *         </div>
61072   *     );
61073   * };
61074   * ```
61075   */
61076  function KeyboardShortcuts({
61077    children,
61078    shortcuts,
61079    bindGlobal,
61080    eventName
61081  }) {
61082    const target = (0,external_wp_element_namespaceObject.useRef)(null);
61083    const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => (0,external_React_.createElement)(KeyboardShortcut, {
61084      key: shortcut,
61085      shortcut: shortcut,
61086      callback: callback,
61087      bindGlobal: bindGlobal,
61088      eventName: eventName,
61089      target: target
61090    }));
61091  
61092    // Render as non-visual if there are no children pressed. Keyboard
61093    // events will be bound to the document instead.
61094    if (!external_wp_element_namespaceObject.Children.count(children)) {
61095      return (0,external_React_.createElement)(external_React_.Fragment, null, element);
61096    }
61097    return (0,external_React_.createElement)("div", {
61098      ref: target
61099    }, element, children);
61100  }
61101  /* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts);
61102  
61103  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-group/index.js
61104  
61105  /**
61106   * External dependencies
61107   */
61108  
61109  
61110  /**
61111   * WordPress dependencies
61112   */
61113  
61114  
61115  
61116  /**
61117   * Internal dependencies
61118   */
61119  
61120  /**
61121   * `MenuGroup` wraps a series of related `MenuItem` components into a common
61122   * section.
61123   *
61124   * ```jsx
61125   * import { MenuGroup, MenuItem } from '@wordpress/components';
61126   *
61127   * const MyMenuGroup = () => (
61128   *   <MenuGroup label="Settings">
61129   *     <MenuItem>Setting 1</MenuItem>
61130   *     <MenuItem>Setting 2</MenuItem>
61131   *   </MenuGroup>
61132   * );
61133   * ```
61134   */
61135  function MenuGroup(props) {
61136    const {
61137      children,
61138      className = '',
61139      label,
61140      hideSeparator
61141    } = props;
61142    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MenuGroup);
61143    if (!external_wp_element_namespaceObject.Children.count(children)) {
61144      return null;
61145    }
61146    const labelId = `components-menu-group-label-$instanceId}`;
61147    const classNames = classnames_default()(className, 'components-menu-group', {
61148      'has-hidden-separator': hideSeparator
61149    });
61150    return (0,external_React_.createElement)("div", {
61151      className: classNames
61152    }, label && (0,external_React_.createElement)("div", {
61153      className: "components-menu-group__label",
61154      id: labelId,
61155      "aria-hidden": "true"
61156    }, label), (0,external_React_.createElement)("div", {
61157      role: "group",
61158      "aria-labelledby": label ? labelId : undefined
61159    }, children));
61160  }
61161  /* harmony default export */ const menu_group = (MenuGroup);
61162  
61163  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-item/index.js
61164  
61165  /**
61166   * External dependencies
61167   */
61168  
61169  
61170  
61171  /**
61172   * WordPress dependencies
61173   */
61174  
61175  
61176  /**
61177   * Internal dependencies
61178   */
61179  
61180  
61181  
61182  function UnforwardedMenuItem(props, ref) {
61183    let {
61184      children,
61185      info,
61186      className,
61187      icon,
61188      iconPosition = 'right',
61189      shortcut,
61190      isSelected,
61191      role = 'menuitem',
61192      suffix,
61193      ...buttonProps
61194    } = props;
61195    className = classnames_default()('components-menu-item__button', className);
61196    if (info) {
61197      children = (0,external_React_.createElement)("span", {
61198        className: "components-menu-item__info-wrapper"
61199      }, (0,external_React_.createElement)("span", {
61200        className: "components-menu-item__item"
61201      }, children), (0,external_React_.createElement)("span", {
61202        className: "components-menu-item__info"
61203      }, info));
61204    }
61205    if (icon && typeof icon !== 'string') {
61206      icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, {
61207        className: classnames_default()('components-menu-items__item-icon', {
61208          'has-icon-right': iconPosition === 'right'
61209        })
61210      });
61211    }
61212    return (0,external_React_.createElement)(build_module_button, {
61213      ref: ref
61214      // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
61215      ,
61216      "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,
61217      role: role,
61218      icon: iconPosition === 'left' ? icon : undefined,
61219      className: className,
61220      ...buttonProps
61221    }, (0,external_React_.createElement)("span", {
61222      className: "components-menu-item__item"
61223    }, children), !suffix && (0,external_React_.createElement)(build_module_shortcut, {
61224      className: "components-menu-item__shortcut",
61225      shortcut: shortcut
61226    }), !suffix && icon && iconPosition === 'right' && (0,external_React_.createElement)(build_module_icon, {
61227      icon: icon
61228    }), suffix);
61229  }
61230  
61231  /**
61232   * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
61233   *
61234   * ```jsx
61235   * import { MenuItem } from '@wordpress/components';
61236   * import { useState } from '@wordpress/element';
61237   *
61238   * const MyMenuItem = () => {
61239   *     const [ isActive, setIsActive ] = useState( true );
61240   *
61241   *     return (
61242   *         <MenuItem
61243   *             icon={ isActive ? 'yes' : 'no' }
61244   *             isSelected={ isActive }
61245   *             role="menuitemcheckbox"
61246   *             onClick={ () => setIsActive( ( state ) => ! state ) }
61247   *         >
61248   *             Toggle
61249   *         </MenuItem>
61250   *     );
61251   * };
61252   * ```
61253   */
61254  const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedMenuItem);
61255  /* harmony default export */ const menu_item = (MenuItem);
61256  
61257  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js
61258  
61259  /**
61260   * WordPress dependencies
61261   */
61262  
61263  
61264  /**
61265   * Internal dependencies
61266   */
61267  
61268  const menu_items_choice_noop = () => {};
61269  
61270  /**
61271   * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.
61272   *
61273   *
61274   * ```jsx
61275   * import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
61276   * import { useState } from '@wordpress/element';
61277   *
61278   * const MyMenuItemsChoice = () => {
61279   *     const [ mode, setMode ] = useState( 'visual' );
61280   *     const choices = [
61281   *         {
61282   *             value: 'visual',
61283   *             label: 'Visual editor',
61284   *         },
61285   *         {
61286   *             value: 'text',
61287   *             label: 'Code editor',
61288   *         },
61289   *     ];
61290   *
61291   *     return (
61292   *         <MenuGroup label="Editor">
61293   *             <MenuItemsChoice
61294   *                 choices={ choices }
61295   *                 value={ mode }
61296   *                 onSelect={ ( newMode ) => setMode( newMode ) }
61297   *             />
61298   *         </MenuGroup>
61299   *     );
61300   * };
61301   * ```
61302   */
61303  function MenuItemsChoice({
61304    choices = [],
61305    onHover = menu_items_choice_noop,
61306    onSelect,
61307    value
61308  }) {
61309    return (0,external_React_.createElement)(external_React_.Fragment, null, choices.map(item => {
61310      const isSelected = value === item.value;
61311      return (0,external_React_.createElement)(menu_item, {
61312        key: item.value,
61313        role: "menuitemradio",
61314        disabled: item.disabled,
61315        icon: isSelected ? library_check : null,
61316        info: item.info,
61317        isSelected: isSelected,
61318        shortcut: item.shortcut,
61319        className: "components-menu-items-choice",
61320        onClick: () => {
61321          if (!isSelected) {
61322            onSelect(item.value);
61323          }
61324        },
61325        onMouseEnter: () => onHover(item.value),
61326        onMouseLeave: () => onHover(null),
61327        "aria-label": item['aria-label']
61328      }, item.label);
61329    }));
61330  }
61331  /* harmony default export */ const menu_items_choice = (MenuItemsChoice);
61332  
61333  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js
61334  
61335  /**
61336   * External dependencies
61337   */
61338  
61339  /**
61340   * WordPress dependencies
61341   */
61342  
61343  
61344  /**
61345   * Internal dependencies
61346   */
61347  
61348  function UnforwardedTabbableContainer({
61349    eventToOffset,
61350    ...props
61351  }, ref) {
61352    const innerEventToOffset = evt => {
61353      const {
61354        code,
61355        shiftKey
61356      } = evt;
61357      if ('Tab' === code) {
61358        return shiftKey ? -1 : 1;
61359      }
61360  
61361      // Allow custom handling of keys besides Tab.
61362      //
61363      // By default, TabbableContainer will move focus forward on Tab and
61364      // backward on Shift+Tab. The handler below will be used for all other
61365      // events. The semantics for `eventToOffset`'s return
61366      // values are the following:
61367      //
61368      // - +1: move focus forward
61369      // - -1: move focus backward
61370      // -  0: don't move focus, but acknowledge event and thus stop it
61371      // - undefined: do nothing, let the event propagate.
61372      if (eventToOffset) {
61373        return eventToOffset(evt);
61374      }
61375      return undefined;
61376    };
61377    return (0,external_React_.createElement)(container, {
61378      ref: ref,
61379      stopNavigationEvents: true,
61380      onlyBrowserTabstops: true,
61381      eventToOffset: innerEventToOffset,
61382      ...props
61383    });
61384  }
61385  
61386  /**
61387   * A container for tabbable elements.
61388   *
61389   *  ```jsx
61390   *  import {
61391   *    TabbableContainer,
61392   *    Button,
61393   *  } from '@wordpress/components';
61394   *
61395   *  function onNavigate( index, target ) {
61396   *    console.log( `Navigates to ${ index }`, target );
61397   *  }
61398   *
61399   *  const MyTabbableContainer = () => (
61400   *    <div>
61401   *      <span>Tabbable Container:</span>
61402   *      <TabbableContainer onNavigate={ onNavigate }>
61403   *        <Button variant="secondary" tabIndex="0">
61404   *          Section 1
61405   *        </Button>
61406   *        <Button variant="secondary" tabIndex="0">
61407   *          Section 2
61408   *        </Button>
61409   *        <Button variant="secondary" tabIndex="0">
61410   *          Section 3
61411   *        </Button>
61412   *        <Button variant="secondary" tabIndex="0">
61413   *          Section 4
61414   *        </Button>
61415   *      </TabbableContainer>
61416   *    </div>
61417   *  );
61418   *  ```
61419   */
61420  const TabbableContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabbableContainer);
61421  /* harmony default export */ const tabbable = (TabbableContainer);
61422  
61423  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/constants.js
61424  const ROOT_MENU = 'root';
61425  const SEARCH_FOCUS_DELAY = 100;
61426  
61427  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/context.js
61428  /**
61429   * WordPress dependencies
61430   */
61431  
61432  
61433  /**
61434   * Internal dependencies
61435   */
61436  
61437  const context_noop = () => {};
61438  const defaultIsEmpty = () => false;
61439  const defaultGetter = () => undefined;
61440  const NavigationContext = (0,external_wp_element_namespaceObject.createContext)({
61441    activeItem: undefined,
61442    activeMenu: ROOT_MENU,
61443    setActiveMenu: context_noop,
61444    navigationTree: {
61445      items: {},
61446      getItem: defaultGetter,
61447      addItem: context_noop,
61448      removeItem: context_noop,
61449      menus: {},
61450      getMenu: defaultGetter,
61451      addMenu: context_noop,
61452      removeMenu: context_noop,
61453      childMenu: {},
61454      traverseMenu: context_noop,
61455      isMenuEmpty: defaultIsEmpty
61456    }
61457  });
61458  const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext);
61459  
61460  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/styles/navigation-styles.js
61461  
61462  function 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)."; }
61463  /**
61464   * External dependencies
61465   */
61466  
61467  /**
61468   * WordPress dependencies
61469   */
61470  
61471  
61472  /**
61473   * Internal dependencies
61474   */
61475  
61476  
61477  
61478  
61479  
61480  
61481  const NavigationUI = emotion_styled_base_browser_esm("div",  true ? {
61482    target: "eeiismy11"
61483  } : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0));
61484  const MenuUI = emotion_styled_base_browser_esm("div",  true ? {
61485    target: "eeiismy10"
61486  } : 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));
61487  const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button,  true ? {
61488    target: "eeiismy9"
61489  } : 0)( true ? {
61490    name: "26l0q2",
61491    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;}}"
61492  } : 0);
61493  const MenuTitleUI = emotion_styled_base_browser_esm("div",  true ? {
61494    target: "eeiismy8"
61495  } : 0)( true ? {
61496    name: "1aubja5",
61497    styles: "overflow:hidden;width:100%"
61498  } : 0);
61499  const MenuTitleSearchControlWrapper = emotion_styled_base_browser_esm("div",  true ? {
61500    target: "eeiismy7"
61501  } : 0)( true ? {
61502    name: "rgorny",
61503    styles: "margin:11px 0;padding:1px"
61504  } : 0);
61505  const MenuTitleActionsUI = emotion_styled_base_browser_esm("span",  true ? {
61506    target: "eeiismy6"
61507  } : 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));
61508  const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component,  true ? {
61509    target: "eeiismy5"
61510  } : 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));
61511  const ItemBaseUI = emotion_styled_base_browser_esm("li",  true ? {
61512    target: "eeiismy4"
61513  } : 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({
61514    textAlign: 'left'
61515  }, {
61516    textAlign: 'right'
61517  }), " &: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));
61518  const ItemUI = emotion_styled_base_browser_esm("div",  true ? {
61519    target: "eeiismy3"
61520  } : 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));
61521  const ItemIconUI = emotion_styled_base_browser_esm("span",  true ? {
61522    target: "eeiismy2"
61523  } : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0));
61524  const ItemBadgeUI = emotion_styled_base_browser_esm("span",  true ? {
61525    target: "eeiismy1"
61526  } : 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));
61527  const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
61528    target: "eeiismy0"
61529  } : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0));
61530  
61531  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-navigation-tree-nodes.js
61532  /**
61533   * WordPress dependencies
61534   */
61535  
61536  function useNavigationTreeNodes() {
61537    const [nodes, setNodes] = (0,external_wp_element_namespaceObject.useState)({});
61538    const getNode = key => nodes[key];
61539    const addNode = (key, value) => {
61540      const {
61541        children,
61542        ...newNode
61543      } = value;
61544      return setNodes(original => ({
61545        ...original,
61546        [key]: newNode
61547      }));
61548    };
61549    const removeNode = key => {
61550      return setNodes(original => {
61551        const {
61552          [key]: removedNode,
61553          ...remainingNodes
61554        } = original;
61555        return remainingNodes;
61556      });
61557    };
61558    return {
61559      nodes,
61560      getNode,
61561      addNode,
61562      removeNode
61563    };
61564  }
61565  
61566  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-create-navigation-tree.js
61567  /**
61568   * WordPress dependencies
61569   */
61570  
61571  
61572  /**
61573   * Internal dependencies
61574   */
61575  
61576  const useCreateNavigationTree = () => {
61577    const {
61578      nodes: items,
61579      getNode: getItem,
61580      addNode: addItem,
61581      removeNode: removeItem
61582    } = useNavigationTreeNodes();
61583    const {
61584      nodes: menus,
61585      getNode: getMenu,
61586      addNode: addMenu,
61587      removeNode: removeMenu
61588    } = useNavigationTreeNodes();
61589  
61590    /**
61591     * Stores direct nested menus of menus
61592     * This makes it easy to traverse menu tree
61593     *
61594     * Key is the menu prop of the menu
61595     * Value is an array of menu keys
61596     */
61597    const [childMenu, setChildMenu] = (0,external_wp_element_namespaceObject.useState)({});
61598    const getChildMenu = menu => childMenu[menu] || [];
61599    const traverseMenu = (startMenu, callback) => {
61600      const visited = [];
61601      let queue = [startMenu];
61602      let current;
61603      while (queue.length > 0) {
61604        // Type cast to string is safe because of the `length > 0` check above.
61605        current = getMenu(queue.shift());
61606        if (!current || visited.includes(current.menu)) {
61607          continue;
61608        }
61609        visited.push(current.menu);
61610        queue = [...queue, ...getChildMenu(current.menu)];
61611        if (callback(current) === false) {
61612          break;
61613        }
61614      }
61615    };
61616    const isMenuEmpty = menuToCheck => {
61617      let isEmpty = true;
61618      traverseMenu(menuToCheck, current => {
61619        if (!current.isEmpty) {
61620          isEmpty = false;
61621          return false;
61622        }
61623        return undefined;
61624      });
61625      return isEmpty;
61626    };
61627    return {
61628      items,
61629      getItem,
61630      addItem,
61631      removeItem,
61632      menus,
61633      getMenu,
61634      addMenu: (key, value) => {
61635        setChildMenu(state => {
61636          const newState = {
61637            ...state
61638          };
61639          if (!value.parentMenu) {
61640            return newState;
61641          }
61642          if (!newState[value.parentMenu]) {
61643            newState[value.parentMenu] = [];
61644          }
61645          newState[value.parentMenu].push(key);
61646          return newState;
61647        });
61648        addMenu(key, value);
61649      },
61650      removeMenu,
61651      childMenu,
61652      traverseMenu,
61653      isMenuEmpty
61654    };
61655  };
61656  
61657  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/index.js
61658  
61659  /**
61660   * External dependencies
61661   */
61662  
61663  
61664  /**
61665   * WordPress dependencies
61666   */
61667  
61668  
61669  
61670  /**
61671   * Internal dependencies
61672   */
61673  
61674  
61675  
61676  
61677  
61678  const navigation_noop = () => {};
61679  
61680  /**
61681   * Render a navigation list with optional groupings and hierarchy.
61682   *
61683   * ```jsx
61684   * import {
61685   *   __experimentalNavigation as Navigation,
61686   *   __experimentalNavigationGroup as NavigationGroup,
61687   *   __experimentalNavigationItem as NavigationItem,
61688   *   __experimentalNavigationMenu as NavigationMenu,
61689   * } from '@wordpress/components';
61690   *
61691   * const MyNavigation = () => (
61692   *   <Navigation>
61693   *     <NavigationMenu title="Home">
61694   *       <NavigationGroup title="Group 1">
61695   *         <NavigationItem item="item-1" title="Item 1" />
61696   *         <NavigationItem item="item-2" title="Item 2" />
61697   *       </NavigationGroup>
61698   *       <NavigationGroup title="Group 2">
61699   *         <NavigationItem
61700   *           item="item-3"
61701   *           navigateToMenu="category"
61702   *           title="Category"
61703   *         />
61704   *       </NavigationGroup>
61705   *     </NavigationMenu>
61706   *
61707   *     <NavigationMenu
61708   *       backButtonLabel="Home"
61709   *       menu="category"
61710   *       parentMenu="root"
61711   *       title="Category"
61712   *     >
61713   *       <NavigationItem badge="1" item="child-1" title="Child 1" />
61714   *       <NavigationItem item="child-2" title="Child 2" />
61715   *     </NavigationMenu>
61716   *   </Navigation>
61717   * );
61718   * ```
61719   */
61720  function Navigation({
61721    activeItem,
61722    activeMenu = ROOT_MENU,
61723    children,
61724    className,
61725    onActivateMenu = navigation_noop
61726  }) {
61727    const [menu, setMenu] = (0,external_wp_element_namespaceObject.useState)(activeMenu);
61728    const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)();
61729    const navigationTree = useCreateNavigationTree();
61730    const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left';
61731    const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => {
61732      if (!navigationTree.getMenu(menuId)) {
61733        return;
61734      }
61735      setSlideOrigin(slideInOrigin);
61736      setMenu(menuId);
61737      onActivateMenu(menuId);
61738    };
61739  
61740    // Used to prevent the sliding animation on mount
61741    const isMounted = (0,external_wp_element_namespaceObject.useRef)(false);
61742    (0,external_wp_element_namespaceObject.useEffect)(() => {
61743      if (!isMounted.current) {
61744        isMounted.current = true;
61745      }
61746    }, []);
61747    (0,external_wp_element_namespaceObject.useEffect)(() => {
61748      if (activeMenu !== menu) {
61749        setActiveMenu(activeMenu);
61750      }
61751      // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
61752      // See https://github.com/WordPress/gutenberg/pull/41612 for context.
61753      // eslint-disable-next-line react-hooks/exhaustive-deps
61754    }, [activeMenu]);
61755    const context = {
61756      activeItem,
61757      activeMenu: menu,
61758      setActiveMenu,
61759      navigationTree
61760    };
61761    const classes = classnames_default()('components-navigation', className);
61762    const animateClassName = getAnimateClassName({
61763      type: 'slide-in',
61764      origin: slideOrigin
61765    });
61766    return (0,external_React_.createElement)(NavigationUI, {
61767      className: classes
61768    }, (0,external_React_.createElement)("div", {
61769      key: menu,
61770      className: animateClassName ? classnames_default()({
61771        [animateClassName]: isMounted.current && slideOrigin
61772      }) : undefined
61773    }, (0,external_React_.createElement)(NavigationContext.Provider, {
61774      value: context
61775    }, children)));
61776  }
61777  /* harmony default export */ const navigation = (Navigation);
61778  
61779  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js
61780  
61781  /**
61782   * WordPress dependencies
61783   */
61784  
61785  const chevronRight = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
61786    xmlns: "http://www.w3.org/2000/svg",
61787    viewBox: "0 0 24 24"
61788  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
61789    d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
61790  }));
61791  /* harmony default export */ const chevron_right = (chevronRight);
61792  
61793  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js
61794  
61795  /**
61796   * WordPress dependencies
61797   */
61798  
61799  const chevronLeft = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
61800    xmlns: "http://www.w3.org/2000/svg",
61801    viewBox: "0 0 24 24"
61802  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
61803    d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"
61804  }));
61805  /* harmony default export */ const chevron_left = (chevronLeft);
61806  
61807  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js
61808  
61809  /**
61810   * External dependencies
61811   */
61812  
61813  /**
61814   * WordPress dependencies
61815   */
61816  
61817  
61818  
61819  
61820  /**
61821   * Internal dependencies
61822   */
61823  
61824  
61825  function UnforwardedNavigationBackButton({
61826    backButtonLabel,
61827    className,
61828    href,
61829    onClick,
61830    parentMenu
61831  }, ref) {
61832    const {
61833      setActiveMenu,
61834      navigationTree
61835    } = useNavigationContext();
61836    const classes = classnames_default()('components-navigation__back-button', className);
61837    const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;
61838    const handleOnClick = event => {
61839      if (typeof onClick === 'function') {
61840        onClick(event);
61841      }
61842      const animationDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right';
61843      if (parentMenu && !event.defaultPrevented) {
61844        setActiveMenu(parentMenu, animationDirection);
61845      }
61846    };
61847    const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left;
61848    return (0,external_React_.createElement)(MenuBackButtonUI, {
61849      className: classes,
61850      href: href,
61851      variant: "tertiary",
61852      ref: ref,
61853      onClick: handleOnClick
61854    }, (0,external_React_.createElement)(icons_build_module_icon, {
61855      icon: icon
61856    }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back'));
61857  }
61858  const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton);
61859  /* harmony default export */ const back_button = (NavigationBackButton);
61860  
61861  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/context.js
61862  /**
61863   * WordPress dependencies
61864   */
61865  
61866  
61867  /**
61868   * Internal dependencies
61869   */
61870  
61871  const NavigationGroupContext = (0,external_wp_element_namespaceObject.createContext)({
61872    group: undefined
61873  });
61874  const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext);
61875  
61876  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/index.js
61877  
61878  /**
61879   * External dependencies
61880   */
61881  
61882  
61883  /**
61884   * WordPress dependencies
61885   */
61886  
61887  
61888  /**
61889   * Internal dependencies
61890   */
61891  
61892  
61893  
61894  let uniqueId = 0;
61895  function NavigationGroup({
61896    children,
61897    className,
61898    title
61899  }) {
61900    const [groupId] = (0,external_wp_element_namespaceObject.useState)(`group-${++uniqueId}`);
61901    const {
61902      navigationTree: {
61903        items
61904      }
61905    } = useNavigationContext();
61906    const context = {
61907      group: groupId
61908    };
61909  
61910    // Keep the children rendered to make sure invisible items are included in the navigation tree.
61911    if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
61912      return (0,external_React_.createElement)(NavigationGroupContext.Provider, {
61913        value: context
61914      }, children);
61915    }
61916    const groupTitleId = `components-navigation__group-title-$groupId}`;
61917    const classes = classnames_default()('components-navigation__group', className);
61918    return (0,external_React_.createElement)(NavigationGroupContext.Provider, {
61919      value: context
61920    }, (0,external_React_.createElement)("li", {
61921      className: classes
61922    }, title && (0,external_React_.createElement)(GroupTitleUI, {
61923      className: "components-navigation__group-title",
61924      id: groupTitleId,
61925      level: 3
61926    }, title), (0,external_React_.createElement)("ul", {
61927      "aria-labelledby": groupTitleId,
61928      role: "group"
61929    }, children)));
61930  }
61931  /* harmony default export */ const group = (NavigationGroup);
61932  
61933  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js
61934  
61935  /**
61936   * Internal dependencies
61937   */
61938  
61939  function NavigationItemBaseContent(props) {
61940    const {
61941      badge,
61942      title
61943    } = props;
61944    return (0,external_React_.createElement)(external_React_.Fragment, null, title && (0,external_React_.createElement)(ItemTitleUI, {
61945      className: "components-navigation__item-title",
61946      as: "span"
61947    }, title), badge && (0,external_React_.createElement)(ItemBadgeUI, {
61948      className: "components-navigation__item-badge"
61949    }, badge));
61950  }
61951  
61952  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/context.js
61953  /**
61954   * WordPress dependencies
61955   */
61956  
61957  
61958  /**
61959   * Internal dependencies
61960   */
61961  
61962  const NavigationMenuContext = (0,external_wp_element_namespaceObject.createContext)({
61963    menu: undefined,
61964    search: ''
61965  });
61966  const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext);
61967  
61968  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/utils.js
61969  /**
61970   * External dependencies
61971   */
61972  
61973  
61974  // @see packages/block-editor/src/components/inserter/search-items.js
61975  const normalizeInput = input => remove_accents_default()(input).replace(/^\//, '').toLowerCase();
61976  const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search));
61977  
61978  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/use-navigation-tree-item.js
61979  /**
61980   * WordPress dependencies
61981   */
61982  
61983  
61984  /**
61985   * Internal dependencies
61986   */
61987  
61988  
61989  
61990  
61991  const useNavigationTreeItem = (itemId, props) => {
61992    const {
61993      activeMenu,
61994      navigationTree: {
61995        addItem,
61996        removeItem
61997      }
61998    } = useNavigationContext();
61999    const {
62000      group
62001    } = useNavigationGroupContext();
62002    const {
62003      menu,
62004      search
62005    } = useNavigationMenuContext();
62006    (0,external_wp_element_namespaceObject.useEffect)(() => {
62007      const isMenuActive = activeMenu === menu;
62008      const isItemVisible = !search || props.title !== undefined && normalizedSearch(props.title, search);
62009      addItem(itemId, {
62010        ...props,
62011        group,
62012        menu,
62013        _isVisible: isMenuActive && isItemVisible
62014      });
62015      return () => {
62016        removeItem(itemId);
62017      };
62018      // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
62019      // eslint-disable-next-line react-hooks/exhaustive-deps
62020    }, [activeMenu, search]);
62021  };
62022  
62023  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base.js
62024  
62025  /**
62026   * External dependencies
62027   */
62028  
62029  
62030  /**
62031   * WordPress dependencies
62032   */
62033  
62034  
62035  /**
62036   * Internal dependencies
62037   */
62038  
62039  
62040  
62041  let base_uniqueId = 0;
62042  function NavigationItemBase(props) {
62043    // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
62044    const {
62045      children,
62046      className,
62047      title,
62048      href,
62049      ...restProps
62050    } = props;
62051    const [itemId] = (0,external_wp_element_namespaceObject.useState)(`item-${++base_uniqueId}`);
62052    useNavigationTreeItem(itemId, props);
62053    const {
62054      navigationTree
62055    } = useNavigationContext();
62056    if (!navigationTree.getItem(itemId)?._isVisible) {
62057      return null;
62058    }
62059    const classes = classnames_default()('components-navigation__item', className);
62060    return (0,external_React_.createElement)(ItemBaseUI, {
62061      className: classes,
62062      ...restProps
62063    }, children);
62064  }
62065  
62066  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/index.js
62067  
62068  /**
62069   * External dependencies
62070   */
62071  
62072  
62073  /**
62074   * WordPress dependencies
62075   */
62076  
62077  
62078  
62079  /**
62080   * Internal dependencies
62081   */
62082  
62083  
62084  
62085  
62086  
62087  const item_noop = () => {};
62088  function NavigationItem(props) {
62089    const {
62090      badge,
62091      children,
62092      className,
62093      href,
62094      item,
62095      navigateToMenu,
62096      onClick = item_noop,
62097      title,
62098      icon,
62099      hideIfTargetMenuEmpty,
62100      isText,
62101      ...restProps
62102    } = props;
62103    const {
62104      activeItem,
62105      setActiveMenu,
62106      navigationTree: {
62107        isMenuEmpty
62108      }
62109    } = useNavigationContext();
62110  
62111    // If hideIfTargetMenuEmpty prop is true
62112    // And the menu we are supposed to navigate to
62113    // Is marked as empty, then we skip rendering the item.
62114    if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) {
62115      return null;
62116    }
62117    const isActive = item && activeItem === item;
62118    const classes = classnames_default()(className, {
62119      'is-active': isActive
62120    });
62121    const onItemClick = event => {
62122      if (navigateToMenu) {
62123        setActiveMenu(navigateToMenu);
62124      }
62125      onClick(event);
62126    };
62127    const navigationIcon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right;
62128    const baseProps = children ? props : {
62129      ...props,
62130      onClick: undefined
62131    };
62132    const itemProps = isText ? restProps : {
62133      as: build_module_button,
62134      href,
62135      onClick: onItemClick,
62136      'aria-current': isActive ? 'page' : undefined,
62137      ...restProps
62138    };
62139    return (0,external_React_.createElement)(NavigationItemBase, {
62140      ...baseProps,
62141      className: classes
62142    }, children || (0,external_React_.createElement)(ItemUI, {
62143      ...itemProps
62144    }, icon && (0,external_React_.createElement)(ItemIconUI, null, (0,external_React_.createElement)(icons_build_module_icon, {
62145      icon: icon
62146    })), (0,external_React_.createElement)(NavigationItemBaseContent, {
62147      title: title,
62148      badge: badge
62149    }), navigateToMenu && (0,external_React_.createElement)(icons_build_module_icon, {
62150      icon: navigationIcon
62151    })));
62152  }
62153  /* harmony default export */ const navigation_item = (NavigationItem);
62154  
62155  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/use-navigation-tree-menu.js
62156  /**
62157   * WordPress dependencies
62158   */
62159  
62160  
62161  /**
62162   * Internal dependencies
62163   */
62164  
62165  
62166  const useNavigationTreeMenu = props => {
62167    const {
62168      navigationTree: {
62169        addMenu,
62170        removeMenu
62171      }
62172    } = useNavigationContext();
62173    const key = props.menu || ROOT_MENU;
62174    (0,external_wp_element_namespaceObject.useEffect)(() => {
62175      addMenu(key, {
62176        ...props,
62177        menu: key
62178      });
62179      return () => {
62180        removeMenu(key);
62181      };
62182      // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
62183      // eslint-disable-next-line react-hooks/exhaustive-deps
62184    }, []);
62185  };
62186  
62187  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/search.js
62188  
62189  /**
62190   * WordPress dependencies
62191   */
62192  
62193  const search = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
62194    xmlns: "http://www.w3.org/2000/svg",
62195    viewBox: "0 0 24 24"
62196  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
62197    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"
62198  }));
62199  /* harmony default export */ const library_search = (search);
62200  
62201  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js
62202  
62203  /**
62204   * WordPress dependencies
62205   */
62206  
62207  
62208  
62209  /** @typedef {import('react').ComponentType} ComponentType */
62210  
62211  /**
62212   * A Higher Order Component used to be provide speak and debounced speak
62213   * functions.
62214   *
62215   * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
62216   *
62217   * @param {ComponentType} Component The component to be wrapped.
62218   *
62219   * @return {ComponentType} The wrapped component.
62220   */
62221  /* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => (0,external_React_.createElement)(Component, {
62222    ...props,
62223    speak: external_wp_a11y_namespaceObject.speak,
62224    debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500)
62225  }), 'withSpokenMessages'));
62226  
62227  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/styles.js
62228  
62229  /**
62230   * External dependencies
62231   */
62232  
62233  /**
62234   * Internal dependencies
62235   */
62236  
62237  
62238  
62239  const inlinePadding = ({
62240    size
62241  }) => {
62242    return space(size === 'compact' ? 1 : 2);
62243  };
62244  const SuffixItemWrapper = emotion_styled_base_browser_esm("div",  true ? {
62245    target: "effl84m1"
62246  } : 0)("display:flex;padding-inline-end:", inlinePadding, ";svg{fill:currentColor;}" + ( true ? "" : 0));
62247  const StyledInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control,  true ? {
62248    target: "effl84m0"
62249  } : 0)("input[type='search']{&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}}&:not( :focus-within ){--wp-components-color-background:", COLORS.theme.gray[100], ";}" + ( true ? "" : 0));
62250  
62251  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/index.js
62252  
62253  /**
62254   * External dependencies
62255   */
62256  
62257  
62258  /**
62259   * WordPress dependencies
62260   */
62261  
62262  
62263  
62264  
62265  
62266  /**
62267   * Internal dependencies
62268   */
62269  
62270  
62271  
62272  function SuffixItem({
62273    searchRef,
62274    value,
62275    onChange,
62276    onClose
62277  }) {
62278    if (!onClose && !value) {
62279      return (0,external_React_.createElement)(icons_build_module_icon, {
62280        icon: library_search
62281      });
62282    }
62283    const onReset = () => {
62284      onChange('');
62285      searchRef.current?.focus();
62286    };
62287    return (0,external_React_.createElement)(build_module_button, {
62288      size: "small",
62289      icon: close_small,
62290      label: onClose ? (0,external_wp_i18n_namespaceObject.__)('Close search') : (0,external_wp_i18n_namespaceObject.__)('Reset search'),
62291      onClick: onClose !== null && onClose !== void 0 ? onClose : onReset
62292    });
62293  }
62294  function UnforwardedSearchControl({
62295    __nextHasNoMarginBottom = false,
62296    className,
62297    onChange,
62298    value,
62299    label = (0,external_wp_i18n_namespaceObject.__)('Search'),
62300    placeholder = (0,external_wp_i18n_namespaceObject.__)('Search'),
62301    hideLabelFromVision = true,
62302    onClose,
62303    size = 'default',
62304    ...restProps
62305  }, forwardedRef) {
62306    // @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
62307    // Work with the design team (@WordPress/gutenberg-design) if you need this feature.
62308    delete restProps.disabled;
62309    const searchRef = (0,external_wp_element_namespaceObject.useRef)(null);
62310    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl, 'components-search-control');
62311    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
62312      // Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
62313      // to provide backwards compatibile margin for SearchControl.
62314      // (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
62315      BaseControl: {
62316        _overrides: {
62317          __nextHasNoMarginBottom
62318        }
62319      },
62320      // `isBorderless` is still experimental and not a public prop for InputControl yet.
62321      InputBase: {
62322        isBorderless: true
62323      }
62324    }), [__nextHasNoMarginBottom]);
62325    return (0,external_React_.createElement)(ContextSystemProvider, {
62326      value: contextValue
62327    }, (0,external_React_.createElement)(StyledInputControl, {
62328      __next40pxDefaultSize: true,
62329      id: instanceId,
62330      hideLabelFromVision: hideLabelFromVision,
62331      label: label,
62332      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]),
62333      type: "search",
62334      size: size,
62335      className: classnames_default()('components-search-control', className),
62336      onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
62337      autoComplete: "off",
62338      placeholder: placeholder,
62339      value: value !== null && value !== void 0 ? value : '',
62340      suffix: (0,external_React_.createElement)(SuffixItemWrapper, {
62341        size: size
62342      }, (0,external_React_.createElement)(SuffixItem, {
62343        searchRef: searchRef,
62344        value: value,
62345        onChange: onChange,
62346        onClose: onClose
62347      })),
62348      ...restProps
62349    }));
62350  }
62351  
62352  /**
62353   * SearchControl components let users display a search control.
62354   *
62355   * ```jsx
62356   * import { SearchControl } from '@wordpress/components';
62357   * import { useState } from '@wordpress/element';
62358   *
62359   * function MySearchControl( { className, setState } ) {
62360   *   const [ searchInput, setSearchInput ] = useState( '' );
62361   *
62362   *   return (
62363   *     <SearchControl
62364   *       __nextHasNoMarginBottom
62365   *       value={ searchInput }
62366   *       onChange={ setSearchInput }
62367   *     />
62368   *   );
62369   * }
62370   * ```
62371   */
62372  const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSearchControl);
62373  /* harmony default export */ const search_control = (SearchControl);
62374  
62375  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js
62376  
62377  /**
62378   * WordPress dependencies
62379   */
62380  
62381  
62382  
62383  /**
62384   * Internal dependencies
62385   */
62386  
62387  
62388  
62389  
62390  
62391  
62392  function MenuTitleSearch({
62393    debouncedSpeak,
62394    onCloseSearch,
62395    onSearch,
62396    search,
62397    title
62398  }) {
62399    const {
62400      navigationTree: {
62401        items
62402      }
62403    } = useNavigationContext();
62404    const {
62405      menu
62406    } = useNavigationMenuContext();
62407    const inputRef = (0,external_wp_element_namespaceObject.useRef)(null);
62408  
62409    // Wait for the slide-in animation to complete before autofocusing the input.
62410    // This prevents scrolling to the input during the animation.
62411    (0,external_wp_element_namespaceObject.useEffect)(() => {
62412      const delayedFocus = setTimeout(() => {
62413        inputRef.current?.focus();
62414      }, SEARCH_FOCUS_DELAY);
62415      return () => {
62416        clearTimeout(delayedFocus);
62417      };
62418    }, []);
62419    (0,external_wp_element_namespaceObject.useEffect)(() => {
62420      if (!search) {
62421        return;
62422      }
62423      const count = Object.values(items).filter(item => item._isVisible).length;
62424      const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */
62425      (0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count);
62426      debouncedSpeak(resultsFoundMessage);
62427      // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
62428      // eslint-disable-next-line react-hooks/exhaustive-deps
62429    }, [items, search]);
62430    const onClose = () => {
62431      onSearch?.('');
62432      onCloseSearch();
62433    };
62434    const onKeyDown = event => {
62435      if (event.code === 'Escape' && !event.defaultPrevented) {
62436        event.preventDefault();
62437        onClose();
62438      }
62439    };
62440    const inputId = `components-navigation__menu-title-search-$menu}`;
62441    const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: placeholder for menu search box. %s: menu title */
62442    (0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim();
62443    return (0,external_React_.createElement)(MenuTitleSearchControlWrapper, null, (0,external_React_.createElement)(search_control, {
62444      __nextHasNoMarginBottom: true,
62445      className: "components-navigation__menu-search-input",
62446      id: inputId,
62447      onChange: value => onSearch?.(value),
62448      onKeyDown: onKeyDown,
62449      placeholder: placeholder,
62450      onClose: onClose,
62451      ref: inputRef,
62452      value: search
62453    }));
62454  }
62455  /* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch));
62456  
62457  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js
62458  
62459  /**
62460   * WordPress dependencies
62461   */
62462  
62463  
62464  
62465  
62466  /**
62467   * Internal dependencies
62468   */
62469  
62470  
62471  
62472  
62473  
62474  
62475  function NavigationMenuTitle({
62476    hasSearch,
62477    onSearch,
62478    search,
62479    title,
62480    titleAction
62481  }) {
62482    const [isSearching, setIsSearching] = (0,external_wp_element_namespaceObject.useState)(false);
62483    const {
62484      menu
62485    } = useNavigationMenuContext();
62486    const searchButtonRef = (0,external_wp_element_namespaceObject.useRef)(null);
62487    if (!title) {
62488      return null;
62489    }
62490    const onCloseSearch = () => {
62491      setIsSearching(false);
62492  
62493      // Wait for the slide-in animation to complete before focusing the search button.
62494      // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
62495      setTimeout(() => {
62496        searchButtonRef.current?.focus();
62497      }, SEARCH_FOCUS_DELAY);
62498    };
62499    const menuTitleId = `components-navigation__menu-title-$menu}`;
62500    /* translators: search button label for menu search box. %s: menu title */
62501    const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title);
62502    return (0,external_React_.createElement)(MenuTitleUI, {
62503      className: "components-navigation__menu-title"
62504    }, !isSearching && (0,external_React_.createElement)(GroupTitleUI, {
62505      as: "h2",
62506      className: "components-navigation__menu-title-heading",
62507      level: 3
62508    }, (0,external_React_.createElement)("span", {
62509      id: menuTitleId
62510    }, title), (hasSearch || titleAction) && (0,external_React_.createElement)(MenuTitleActionsUI, null, titleAction, hasSearch && (0,external_React_.createElement)(build_module_button, {
62511      size: "small",
62512      variant: "tertiary",
62513      label: searchButtonLabel,
62514      onClick: () => setIsSearching(true),
62515      ref: searchButtonRef
62516    }, (0,external_React_.createElement)(icons_build_module_icon, {
62517      icon: library_search
62518    })))), isSearching && (0,external_React_.createElement)("div", {
62519      className: getAnimateClassName({
62520        type: 'slide-in',
62521        origin: 'left'
62522      })
62523    }, (0,external_React_.createElement)(menu_title_search, {
62524      onCloseSearch: onCloseSearch,
62525      onSearch: onSearch,
62526      search: search,
62527      title: title
62528    })));
62529  }
62530  
62531  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js
62532  
62533  /**
62534   * WordPress dependencies
62535   */
62536  
62537  
62538  /**
62539   * Internal dependencies
62540   */
62541  
62542  
62543  function NavigationSearchNoResultsFound({
62544    search
62545  }) {
62546    const {
62547      navigationTree: {
62548        items
62549      }
62550    } = useNavigationContext();
62551    const resultsCount = Object.values(items).filter(item => item._isVisible).length;
62552    if (!search || !!resultsCount) {
62553      return null;
62554    }
62555    return (0,external_React_.createElement)(ItemBaseUI, null, (0,external_React_.createElement)(ItemUI, null, (0,external_wp_i18n_namespaceObject.__)('No results found.'), " "));
62556  }
62557  
62558  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/index.js
62559  
62560  /**
62561   * External dependencies
62562   */
62563  
62564  
62565  /**
62566   * WordPress dependencies
62567   */
62568  
62569  
62570  /**
62571   * Internal dependencies
62572   */
62573  
62574  
62575  
62576  
62577  
62578  
62579  
62580  
62581  
62582  function NavigationMenu(props) {
62583    const {
62584      backButtonLabel,
62585      children,
62586      className,
62587      hasSearch,
62588      menu = ROOT_MENU,
62589      onBackButtonClick,
62590      onSearch: setControlledSearch,
62591      parentMenu,
62592      search: controlledSearch,
62593      isSearchDebouncing,
62594      title,
62595      titleAction
62596    } = props;
62597    const [uncontrolledSearch, setUncontrolledSearch] = (0,external_wp_element_namespaceObject.useState)('');
62598    useNavigationTreeMenu(props);
62599    const {
62600      activeMenu
62601    } = useNavigationContext();
62602    const context = {
62603      menu,
62604      search: uncontrolledSearch
62605    };
62606  
62607    // Keep the children rendered to make sure invisible items are included in the navigation tree.
62608    if (activeMenu !== menu) {
62609      return (0,external_React_.createElement)(NavigationMenuContext.Provider, {
62610        value: context
62611      }, children);
62612    }
62613    const isControlledSearch = !!setControlledSearch;
62614    const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
62615    const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
62616    const menuTitleId = `components-navigation__menu-title-$menu}`;
62617    const classes = classnames_default()('components-navigation__menu', className);
62618    return (0,external_React_.createElement)(NavigationMenuContext.Provider, {
62619      value: context
62620    }, (0,external_React_.createElement)(MenuUI, {
62621      className: classes
62622    }, (parentMenu || onBackButtonClick) && (0,external_React_.createElement)(back_button, {
62623      backButtonLabel: backButtonLabel,
62624      parentMenu: parentMenu,
62625      onClick: onBackButtonClick
62626    }), title && (0,external_React_.createElement)(NavigationMenuTitle, {
62627      hasSearch: hasSearch,
62628      onSearch: onSearch,
62629      search: search,
62630      title: title,
62631      titleAction: titleAction
62632    }), (0,external_React_.createElement)(navigable_container_menu, null, (0,external_React_.createElement)("ul", {
62633      "aria-labelledby": menuTitleId
62634    }, children, search && !isSearchDebouncing && (0,external_React_.createElement)(NavigationSearchNoResultsFound, {
62635      search: search
62636    })))));
62637  }
62638  /* harmony default export */ const navigation_menu = (NavigationMenu);
62639  
62640  ;// CONCATENATED MODULE: ./node_modules/path-to-regexp/dist.es2015/index.js
62641  /**
62642   * Tokenize input string.
62643   */
62644  function lexer(str) {
62645      var tokens = [];
62646      var i = 0;
62647      while (i < str.length) {
62648          var char = str[i];
62649          if (char === "*" || char === "+" || char === "?") {
62650              tokens.push({ type: "MODIFIER", index: i, value: str[i++] });
62651              continue;
62652          }
62653          if (char === "\\") {
62654              tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] });
62655              continue;
62656          }
62657          if (char === "{") {
62658              tokens.push({ type: "OPEN", index: i, value: str[i++] });
62659              continue;
62660          }
62661          if (char === "}") {
62662              tokens.push({ type: "CLOSE", index: i, value: str[i++] });
62663              continue;
62664          }
62665          if (char === ":") {
62666              var name = "";
62667              var j = i + 1;
62668              while (j < str.length) {
62669                  var code = str.charCodeAt(j);
62670                  if (
62671                  // `0-9`
62672                  (code >= 48 && code <= 57) ||
62673                      // `A-Z`
62674                      (code >= 65 && code <= 90) ||
62675                      // `a-z`
62676                      (code >= 97 && code <= 122) ||
62677                      // `_`
62678                      code === 95) {
62679                      name += str[j++];
62680                      continue;
62681                  }
62682                  break;
62683              }
62684              if (!name)
62685                  throw new TypeError("Missing parameter name at ".concat(i));
62686              tokens.push({ type: "NAME", index: i, value: name });
62687              i = j;
62688              continue;
62689          }
62690          if (char === "(") {
62691              var count = 1;
62692              var pattern = "";
62693              var j = i + 1;
62694              if (str[j] === "?") {
62695                  throw new TypeError("Pattern cannot start with \"?\" at ".concat(j));
62696              }
62697              while (j < str.length) {
62698                  if (str[j] === "\\") {
62699                      pattern += str[j++] + str[j++];
62700                      continue;
62701                  }
62702                  if (str[j] === ")") {
62703                      count--;
62704                      if (count === 0) {
62705                          j++;
62706                          break;
62707                      }
62708                  }
62709                  else if (str[j] === "(") {
62710                      count++;
62711                      if (str[j + 1] !== "?") {
62712                          throw new TypeError("Capturing groups are not allowed at ".concat(j));
62713                      }
62714                  }
62715                  pattern += str[j++];
62716              }
62717              if (count)
62718                  throw new TypeError("Unbalanced pattern at ".concat(i));
62719              if (!pattern)
62720                  throw new TypeError("Missing pattern at ".concat(i));
62721              tokens.push({ type: "PATTERN", index: i, value: pattern });
62722              i = j;
62723              continue;
62724          }
62725          tokens.push({ type: "CHAR", index: i, value: str[i++] });
62726      }
62727      tokens.push({ type: "END", index: i, value: "" });
62728      return tokens;
62729  }
62730  /**
62731   * Parse a string for the raw tokens.
62732   */
62733  function dist_es2015_parse(str, options) {
62734      if (options === void 0) { options = {}; }
62735      var tokens = lexer(str);
62736      var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a;
62737      var defaultPattern = "[^".concat(escapeString(options.delimiter || "/#?"), "]+?");
62738      var result = [];
62739      var key = 0;
62740      var i = 0;
62741      var path = "";
62742      var tryConsume = function (type) {
62743          if (i < tokens.length && tokens[i].type === type)
62744              return tokens[i++].value;
62745      };
62746      var mustConsume = function (type) {
62747          var value = tryConsume(type);
62748          if (value !== undefined)
62749              return value;
62750          var _a = tokens[i], nextType = _a.type, index = _a.index;
62751          throw new TypeError("Unexpected ".concat(nextType, " at ").concat(index, ", expected ").concat(type));
62752      };
62753      var consumeText = function () {
62754          var result = "";
62755          var value;
62756          while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) {
62757              result += value;
62758          }
62759          return result;
62760      };
62761      while (i < tokens.length) {
62762          var char = tryConsume("CHAR");
62763          var name = tryConsume("NAME");
62764          var pattern = tryConsume("PATTERN");
62765          if (name || pattern) {
62766              var prefix = char || "";
62767              if (prefixes.indexOf(prefix) === -1) {
62768                  path += prefix;
62769                  prefix = "";
62770              }
62771              if (path) {
62772                  result.push(path);
62773                  path = "";
62774              }
62775              result.push({
62776                  name: name || key++,
62777                  prefix: prefix,
62778                  suffix: "",
62779                  pattern: pattern || defaultPattern,
62780                  modifier: tryConsume("MODIFIER") || "",
62781              });
62782              continue;
62783          }
62784          var value = char || tryConsume("ESCAPED_CHAR");
62785          if (value) {
62786              path += value;
62787              continue;
62788          }
62789          if (path) {
62790              result.push(path);
62791              path = "";
62792          }
62793          var open = tryConsume("OPEN");
62794          if (open) {
62795              var prefix = consumeText();
62796              var name_1 = tryConsume("NAME") || "";
62797              var pattern_1 = tryConsume("PATTERN") || "";
62798              var suffix = consumeText();
62799              mustConsume("CLOSE");
62800              result.push({
62801                  name: name_1 || (pattern_1 ? key++ : ""),
62802                  pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1,
62803                  prefix: prefix,
62804                  suffix: suffix,
62805                  modifier: tryConsume("MODIFIER") || "",
62806              });
62807              continue;
62808          }
62809          mustConsume("END");
62810      }
62811      return result;
62812  }
62813  /**
62814   * Compile a string to a template function for the path.
62815   */
62816  function dist_es2015_compile(str, options) {
62817      return tokensToFunction(dist_es2015_parse(str, options), options);
62818  }
62819  /**
62820   * Expose a method for transforming tokens into the path function.
62821   */
62822  function tokensToFunction(tokens, options) {
62823      if (options === void 0) { options = {}; }
62824      var reFlags = flags(options);
62825      var _a = options.encode, encode = _a === void 0 ? function (x) { return x; } : _a, _b = options.validate, validate = _b === void 0 ? true : _b;
62826      // Compile all the tokens into regexps.
62827      var matches = tokens.map(function (token) {
62828          if (typeof token === "object") {
62829              return new RegExp("^(?:".concat(token.pattern, ")$"), reFlags);
62830          }
62831      });
62832      return function (data) {
62833          var path = "";
62834          for (var i = 0; i < tokens.length; i++) {
62835              var token = tokens[i];
62836              if (typeof token === "string") {
62837                  path += token;
62838                  continue;
62839              }
62840              var value = data ? data[token.name] : undefined;
62841              var optional = token.modifier === "?" || token.modifier === "*";
62842              var repeat = token.modifier === "*" || token.modifier === "+";
62843              if (Array.isArray(value)) {
62844                  if (!repeat) {
62845                      throw new TypeError("Expected \"".concat(token.name, "\" to not repeat, but got an array"));
62846                  }
62847                  if (value.length === 0) {
62848                      if (optional)
62849                          continue;
62850                      throw new TypeError("Expected \"".concat(token.name, "\" to not be empty"));
62851                  }
62852                  for (var j = 0; j < value.length; j++) {
62853                      var segment = encode(value[j], token);
62854                      if (validate && !matches[i].test(segment)) {
62855                          throw new TypeError("Expected all \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
62856                      }
62857                      path += token.prefix + segment + token.suffix;
62858                  }
62859                  continue;
62860              }
62861              if (typeof value === "string" || typeof value === "number") {
62862                  var segment = encode(String(value), token);
62863                  if (validate && !matches[i].test(segment)) {
62864                      throw new TypeError("Expected \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
62865                  }
62866                  path += token.prefix + segment + token.suffix;
62867                  continue;
62868              }
62869              if (optional)
62870                  continue;
62871              var typeOfMessage = repeat ? "an array" : "a string";
62872              throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage));
62873          }
62874          return path;
62875      };
62876  }
62877  /**
62878   * Create path match function from `path-to-regexp` spec.
62879   */
62880  function dist_es2015_match(str, options) {
62881      var keys = [];
62882      var re = pathToRegexp(str, keys, options);
62883      return regexpToFunction(re, keys, options);
62884  }
62885  /**
62886   * Create a path match function from `path-to-regexp` output.
62887   */
62888  function regexpToFunction(re, keys, options) {
62889      if (options === void 0) { options = {}; }
62890      var _a = options.decode, decode = _a === void 0 ? function (x) { return x; } : _a;
62891      return function (pathname) {
62892          var m = re.exec(pathname);
62893          if (!m)
62894              return false;
62895          var path = m[0], index = m.index;
62896          var params = Object.create(null);
62897          var _loop_1 = function (i) {
62898              if (m[i] === undefined)
62899                  return "continue";
62900              var key = keys[i - 1];
62901              if (key.modifier === "*" || key.modifier === "+") {
62902                  params[key.name] = m[i].split(key.prefix + key.suffix).map(function (value) {
62903                      return decode(value, key);
62904                  });
62905              }
62906              else {
62907                  params[key.name] = decode(m[i], key);
62908              }
62909          };
62910          for (var i = 1; i < m.length; i++) {
62911              _loop_1(i);
62912          }
62913          return { path: path, index: index, params: params };
62914      };
62915  }
62916  /**
62917   * Escape a regular expression string.
62918   */
62919  function escapeString(str) {
62920      return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
62921  }
62922  /**
62923   * Get the flags for a regexp from the options.
62924   */
62925  function flags(options) {
62926      return options && options.sensitive ? "" : "i";
62927  }
62928  /**
62929   * Pull out keys from a regexp.
62930   */
62931  function regexpToRegexp(path, keys) {
62932      if (!keys)
62933          return path;
62934      var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g;
62935      var index = 0;
62936      var execResult = groupsRegex.exec(path.source);
62937      while (execResult) {
62938          keys.push({
62939              // Use parenthesized substring match if available, index otherwise
62940              name: execResult[1] || index++,
62941              prefix: "",
62942              suffix: "",
62943              modifier: "",
62944              pattern: "",
62945          });
62946          execResult = groupsRegex.exec(path.source);
62947      }
62948      return path;
62949  }
62950  /**
62951   * Transform an array into a regexp.
62952   */
62953  function arrayToRegexp(paths, keys, options) {
62954      var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; });
62955      return new RegExp("(?:".concat(parts.join("|"), ")"), flags(options));
62956  }
62957  /**
62958   * Create a path regexp from string input.
62959   */
62960  function stringToRegexp(path, keys, options) {
62961      return tokensToRegexp(dist_es2015_parse(path, options), keys, options);
62962  }
62963  /**
62964   * Expose a function for taking tokens and returning a RegExp.
62965   */
62966  function tokensToRegexp(tokens, keys, options) {
62967      if (options === void 0) { options = {}; }
62968      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;
62969      var endsWithRe = "[".concat(escapeString(endsWith), "]|$");
62970      var delimiterRe = "[".concat(escapeString(delimiter), "]");
62971      var route = start ? "^" : "";
62972      // Iterate over the tokens and create our regexp string.
62973      for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
62974          var token = tokens_1[_i];
62975          if (typeof token === "string") {
62976              route += escapeString(encode(token));
62977          }
62978          else {
62979              var prefix = escapeString(encode(token.prefix));
62980              var suffix = escapeString(encode(token.suffix));
62981              if (token.pattern) {
62982                  if (keys)
62983                      keys.push(token);
62984                  if (prefix || suffix) {
62985                      if (token.modifier === "+" || token.modifier === "*") {
62986                          var mod = token.modifier === "*" ? "?" : "";
62987                          route += "(?:".concat(prefix, "((?:").concat(token.pattern, ")(?:").concat(suffix).concat(prefix, "(?:").concat(token.pattern, "))*)").concat(suffix, ")").concat(mod);
62988                      }
62989                      else {
62990                          route += "(?:".concat(prefix, "(").concat(token.pattern, ")").concat(suffix, ")").concat(token.modifier);
62991                      }
62992                  }
62993                  else {
62994                      if (token.modifier === "+" || token.modifier === "*") {
62995                          route += "((?:".concat(token.pattern, ")").concat(token.modifier, ")");
62996                      }
62997                      else {
62998                          route += "(".concat(token.pattern, ")").concat(token.modifier);
62999                      }
63000                  }
63001              }
63002              else {
63003                  route += "(?:".concat(prefix).concat(suffix, ")").concat(token.modifier);
63004              }
63005          }
63006      }
63007      if (end) {
63008          if (!strict)
63009              route += "".concat(delimiterRe, "?");
63010          route += !options.endsWith ? "$" : "(?=".concat(endsWithRe, ")");
63011      }
63012      else {
63013          var endToken = tokens[tokens.length - 1];
63014          var isEndDelimited = typeof endToken === "string"
63015              ? delimiterRe.indexOf(endToken[endToken.length - 1]) > -1
63016              : endToken === undefined;
63017          if (!strict) {
63018              route += "(?:".concat(delimiterRe, "(?=").concat(endsWithRe, "))?");
63019          }
63020          if (!isEndDelimited) {
63021              route += "(?=".concat(delimiterRe, "|").concat(endsWithRe, ")");
63022          }
63023      }
63024      return new RegExp(route, flags(options));
63025  }
63026  /**
63027   * Normalize the given path string, returning a regular expression.
63028   *
63029   * An empty array can be passed in for the keys, which will hold the
63030   * placeholder key descriptions. For example, using `/user/:id`, `keys` will
63031   * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
63032   */
63033  function pathToRegexp(path, keys, options) {
63034      if (path instanceof RegExp)
63035          return regexpToRegexp(path, keys);
63036      if (Array.isArray(path))
63037          return arrayToRegexp(path, keys, options);
63038      return stringToRegexp(path, keys, options);
63039  }
63040  
63041  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/utils/router.js
63042  /**
63043   * External dependencies
63044   */
63045  
63046  
63047  /**
63048   * Internal dependencies
63049   */
63050  
63051  function matchPath(path, pattern) {
63052    const matchingFunction = dist_es2015_match(pattern, {
63053      decode: decodeURIComponent
63054    });
63055    return matchingFunction(path);
63056  }
63057  function patternMatch(path, screens) {
63058    for (const screen of screens) {
63059      const matched = matchPath(path, screen.path);
63060      if (matched) {
63061        return {
63062          params: matched.params,
63063          id: screen.id
63064        };
63065      }
63066    }
63067    return undefined;
63068  }
63069  function findParent(path, screens) {
63070    if (!path.startsWith('/')) {
63071      return undefined;
63072    }
63073    const pathParts = path.split('/');
63074    let parentPath;
63075    while (pathParts.length > 1 && parentPath === undefined) {
63076      pathParts.pop();
63077      const potentialParentPath = pathParts.join('/') === '' ? '/' : pathParts.join('/');
63078      if (screens.find(screen => {
63079        return matchPath(potentialParentPath, screen.path) !== false;
63080      })) {
63081        parentPath = potentialParentPath;
63082      }
63083    }
63084    return parentPath;
63085  }
63086  
63087  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/context.js
63088  /**
63089   * WordPress dependencies
63090   */
63091  
63092  
63093  /**
63094   * Internal dependencies
63095   */
63096  
63097  const context_initialContextValue = {
63098    location: {},
63099    goTo: () => {},
63100    goBack: () => {},
63101    goToParent: () => {},
63102    addScreen: () => {},
63103    removeScreen: () => {},
63104    params: {}
63105  };
63106  const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(context_initialContextValue);
63107  
63108  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/styles.js
63109  function navigator_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)."; }
63110  /**
63111   * External dependencies
63112   */
63113  
63114  const navigatorProviderWrapper =  true ? {
63115    name: "xpkswc",
63116    styles: "overflow-x:hidden;contain:content"
63117  } : 0;
63118  const fadeInFromRight = emotion_react_browser_esm_keyframes({
63119    '0%': {
63120      opacity: 0,
63121      transform: `translateX( 50px )`
63122    },
63123    '100%': {
63124      opacity: 1,
63125      transform: 'none'
63126    }
63127  });
63128  const fadeInFromLeft = emotion_react_browser_esm_keyframes({
63129    '0%': {
63130      opacity: 0,
63131      transform: `translateX( -50px )`
63132    },
63133    '100%': {
63134      opacity: 1,
63135      transform: 'none'
63136    }
63137  });
63138  const navigatorScreenAnimation = ({
63139    isInitial,
63140    isBack,
63141    isRTL
63142  }) => {
63143    if (isInitial && !isBack) {
63144      return;
63145    }
63146    const animationName = isRTL && isBack || !isRTL && !isBack ? fadeInFromRight : fadeInFromLeft;
63147    return /*#__PURE__*/emotion_react_browser_esm_css("animation-duration:0.14s;animation-timing-function:ease-in-out;will-change:transform,opacity;animation-name:", animationName, ";@media ( prefers-reduced-motion ){animation-duration:0s;}" + ( true ? "" : 0),  true ? "" : 0);
63148  };
63149  const navigatorScreen = props => /*#__PURE__*/emotion_react_browser_esm_css("overflow-x:auto;max-height:100%;", navigatorScreenAnimation(props), ";" + ( true ? "" : 0),  true ? "" : 0);
63150  
63151  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-provider/component.js
63152  
63153  /**
63154   * External dependencies
63155   */
63156  
63157  /**
63158   * WordPress dependencies
63159   */
63160  
63161  
63162  
63163  /**
63164   * Internal dependencies
63165   */
63166  
63167  
63168  
63169  
63170  
63171  
63172  
63173  const MAX_HISTORY_LENGTH = 50;
63174  function screensReducer(state = [], action) {
63175    switch (action.type) {
63176      case 'add':
63177        return [...state, action.screen];
63178      case 'remove':
63179        return state.filter(s => s.id !== action.screen.id);
63180    }
63181    return state;
63182  }
63183  function UnconnectedNavigatorProvider(props, forwardedRef) {
63184    const {
63185      initialPath,
63186      children,
63187      className,
63188      ...otherProps
63189    } = useContextSystem(props, 'NavigatorProvider');
63190    const [locationHistory, setLocationHistory] = (0,external_wp_element_namespaceObject.useState)([{
63191      path: initialPath
63192    }]);
63193    const currentLocationHistory = (0,external_wp_element_namespaceObject.useRef)([]);
63194    const [screens, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(screensReducer, []);
63195    const currentScreens = (0,external_wp_element_namespaceObject.useRef)([]);
63196    (0,external_wp_element_namespaceObject.useEffect)(() => {
63197      currentScreens.current = screens;
63198    }, [screens]);
63199    (0,external_wp_element_namespaceObject.useEffect)(() => {
63200      currentLocationHistory.current = locationHistory;
63201    }, [locationHistory]);
63202    const currentMatch = (0,external_wp_element_namespaceObject.useRef)();
63203    const matchedPath = (0,external_wp_element_namespaceObject.useMemo)(() => {
63204      let currentPath;
63205      if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) {
63206        currentMatch.current = undefined;
63207        return undefined;
63208      }
63209      const resolvePath = path => {
63210        const newMatch = patternMatch(path, screens);
63211  
63212        // If the new match is the same as the current match,
63213        // return the previous one for performance reasons.
63214        if (currentMatch.current && newMatch && external_wp_isShallowEqual_default()(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) {
63215          return currentMatch.current;
63216        }
63217        return newMatch;
63218      };
63219      const newMatch = resolvePath(currentPath);
63220      currentMatch.current = newMatch;
63221      return newMatch;
63222    }, [screens, locationHistory]);
63223    const addScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({
63224      type: 'add',
63225      screen
63226    }), []);
63227    const removeScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({
63228      type: 'remove',
63229      screen
63230    }), []);
63231    const goBack = (0,external_wp_element_namespaceObject.useCallback)(() => {
63232      setLocationHistory(prevLocationHistory => {
63233        if (prevLocationHistory.length <= 1) {
63234          return prevLocationHistory;
63235        }
63236        return [...prevLocationHistory.slice(0, -2), {
63237          ...prevLocationHistory[prevLocationHistory.length - 2],
63238          isBack: true,
63239          hasRestoredFocus: false
63240        }];
63241      });
63242    }, []);
63243    const goTo = (0,external_wp_element_namespaceObject.useCallback)((path, options = {}) => {
63244      const {
63245        focusTargetSelector,
63246        isBack = false,
63247        skipFocus = false,
63248        replace = false,
63249        ...restOptions
63250      } = options;
63251      const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path;
63252      if (isNavigatingToPreviousPath) {
63253        goBack();
63254        return;
63255      }
63256      setLocationHistory(prevLocationHistory => {
63257        const newLocation = {
63258          ...restOptions,
63259          path,
63260          isBack,
63261          hasRestoredFocus: false,
63262          skipFocus
63263        };
63264        if (prevLocationHistory.length === 0) {
63265          return replace ? [] : [newLocation];
63266        }
63267        const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
63268        if (!replace) {
63269          newLocationHistory.push(
63270          // Assign `focusTargetSelector` to the previous location in history
63271          // (the one we just navigated from).
63272          {
63273            ...prevLocationHistory[prevLocationHistory.length - 1],
63274            focusTargetSelector
63275          });
63276        }
63277        newLocationHistory.push(newLocation);
63278        return newLocationHistory;
63279      });
63280    }, [goBack]);
63281    const goToParent = (0,external_wp_element_namespaceObject.useCallback)((options = {}) => {
63282      const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path;
63283      if (currentPath === undefined) {
63284        return;
63285      }
63286      const parentPath = findParent(currentPath, currentScreens.current);
63287      if (parentPath === undefined) {
63288        return;
63289      }
63290      goTo(parentPath, {
63291        ...options,
63292        isBack: true
63293      });
63294    }, [goTo]);
63295    const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
63296      location: {
63297        ...locationHistory[locationHistory.length - 1],
63298        isInitial: locationHistory.length === 1
63299      },
63300      params: matchedPath ? matchedPath.params : {},
63301      match: matchedPath ? matchedPath.id : undefined,
63302      goTo,
63303      goBack,
63304      goToParent,
63305      addScreen,
63306      removeScreen
63307    }), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]);
63308    const cx = useCx();
63309    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorProviderWrapper, className), [className, cx]);
63310    return (0,external_React_.createElement)(component, {
63311      ref: forwardedRef,
63312      className: classes,
63313      ...otherProps
63314    }, (0,external_React_.createElement)(NavigatorContext.Provider, {
63315      value: navigatorContextValue
63316    }, children));
63317  }
63318  
63319  /**
63320   * The `NavigatorProvider` component allows rendering nested views/panels/menus
63321   * (via the `NavigatorScreen` component and navigate between these different
63322   * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
63323   * `useNavigator` hook).
63324   *
63325   * ```jsx
63326   * import {
63327   *   __experimentalNavigatorProvider as NavigatorProvider,
63328   *   __experimentalNavigatorScreen as NavigatorScreen,
63329   *   __experimentalNavigatorButton as NavigatorButton,
63330   *   __experimentalNavigatorBackButton as NavigatorBackButton,
63331   * } from '@wordpress/components';
63332   *
63333   * const MyNavigation = () => (
63334   *   <NavigatorProvider initialPath="/">
63335   *     <NavigatorScreen path="/">
63336   *       <p>This is the home screen.</p>
63337   *        <NavigatorButton path="/child">
63338   *          Navigate to child screen.
63339   *       </NavigatorButton>
63340   *     </NavigatorScreen>
63341   *
63342   *     <NavigatorScreen path="/child">
63343   *       <p>This is the child screen.</p>
63344   *       <NavigatorBackButton>
63345   *         Go back
63346   *       </NavigatorBackButton>
63347   *     </NavigatorScreen>
63348   *   </NavigatorProvider>
63349   * );
63350   * ```
63351   */
63352  const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
63353  /* harmony default export */ const navigator_provider_component = (NavigatorProvider);
63354  
63355  ;// CONCATENATED MODULE: external ["wp","escapeHtml"]
63356  const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
63357  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js
63358  
63359  /**
63360   * External dependencies
63361   */
63362  
63363  /**
63364   * WordPress dependencies
63365   */
63366  
63367  
63368  
63369  
63370  
63371  
63372  /**
63373   * Internal dependencies
63374   */
63375  
63376  
63377  
63378  
63379  
63380  
63381  function UnconnectedNavigatorScreen(props, forwardedRef) {
63382    const screenId = (0,external_wp_element_namespaceObject.useId)();
63383    const {
63384      children,
63385      className,
63386      path,
63387      ...otherProps
63388    } = useContextSystem(props, 'NavigatorScreen');
63389    const {
63390      location,
63391      match,
63392      addScreen,
63393      removeScreen
63394    } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
63395    const isMatch = match === screenId;
63396    const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null);
63397    (0,external_wp_element_namespaceObject.useEffect)(() => {
63398      const screen = {
63399        id: screenId,
63400        path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path)
63401      };
63402      addScreen(screen);
63403      return () => removeScreen(screen);
63404    }, [screenId, path, addScreen, removeScreen]);
63405    const isRTL = (0,external_wp_i18n_namespaceObject.isRTL)();
63406    const {
63407      isInitial,
63408      isBack
63409    } = location;
63410    const cx = useCx();
63411    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigatorScreen({
63412      isInitial,
63413      isBack,
63414      isRTL
63415    }), className), [className, cx, isInitial, isBack, isRTL]);
63416    const locationRef = (0,external_wp_element_namespaceObject.useRef)(location);
63417    (0,external_wp_element_namespaceObject.useEffect)(() => {
63418      locationRef.current = location;
63419    }, [location]);
63420  
63421    // Focus restoration
63422    const isInitialLocation = location.isInitial && !location.isBack;
63423    (0,external_wp_element_namespaceObject.useEffect)(() => {
63424      // Only attempt to restore focus:
63425      // - if the current location is not the initial one (to avoid moving focus on page load)
63426      // - when the screen becomes visible
63427      // - if the wrapper ref has been assigned
63428      // - if focus hasn't already been restored for the current location
63429      // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
63430      if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) {
63431        return;
63432      }
63433      const activeElement = wrapperRef.current.ownerDocument.activeElement;
63434  
63435      // If an element is already focused within the wrapper do not focus the
63436      // element. This prevents inputs or buttons from losing focus unnecessarily.
63437      if (wrapperRef.current.contains(activeElement)) {
63438        return;
63439      }
63440      let elementToFocus = null;
63441  
63442      // When navigating back, if a selector is provided, use it to look for the
63443      // target element (assumed to be a node inside the current NavigatorScreen)
63444      if (location.isBack && location?.focusTargetSelector) {
63445        elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector);
63446      }
63447  
63448      // If the previous query didn't run or find any element to focus, fallback
63449      // to the first tabbable element in the screen (or the screen itself).
63450      if (!elementToFocus) {
63451        const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current)[0];
63452        elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
63453      }
63454      locationRef.current.hasRestoredFocus = true;
63455      elementToFocus.focus();
63456    }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]);
63457    const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]);
63458    return isMatch ? (0,external_React_.createElement)(component, {
63459      ref: mergedWrapperRef,
63460      className: classes,
63461      ...otherProps
63462    }, children) : null;
63463  }
63464  
63465  /**
63466   * The `NavigatorScreen` component represents a single view/screen/panel and
63467   * should be used in combination with the `NavigatorProvider`, the
63468   * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
63469   * hook).
63470   *
63471   * @example
63472   * ```jsx
63473   * import {
63474   *   __experimentalNavigatorProvider as NavigatorProvider,
63475   *   __experimentalNavigatorScreen as NavigatorScreen,
63476   *   __experimentalNavigatorButton as NavigatorButton,
63477   *   __experimentalNavigatorBackButton as NavigatorBackButton,
63478   * } from '@wordpress/components';
63479   *
63480   * const MyNavigation = () => (
63481   *   <NavigatorProvider initialPath="/">
63482   *     <NavigatorScreen path="/">
63483   *       <p>This is the home screen.</p>
63484   *        <NavigatorButton path="/child">
63485   *          Navigate to child screen.
63486   *       </NavigatorButton>
63487   *     </NavigatorScreen>
63488   *
63489   *     <NavigatorScreen path="/child">
63490   *       <p>This is the child screen.</p>
63491   *       <NavigatorBackButton>
63492   *         Go back
63493   *       </NavigatorBackButton>
63494   *     </NavigatorScreen>
63495   *   </NavigatorProvider>
63496   * );
63497   * ```
63498   */
63499  const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen');
63500  /* harmony default export */ const navigator_screen_component = (NavigatorScreen);
63501  
63502  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/use-navigator.js
63503  /**
63504   * WordPress dependencies
63505   */
63506  
63507  
63508  /**
63509   * Internal dependencies
63510   */
63511  
63512  /**
63513   * Retrieves a `navigator` instance.
63514   */
63515  function useNavigator() {
63516    const {
63517      location,
63518      params,
63519      goTo,
63520      goBack,
63521      goToParent
63522    } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext);
63523    return {
63524      location,
63525      goTo,
63526      goBack,
63527      goToParent,
63528      params
63529    };
63530  }
63531  /* harmony default export */ const use_navigator = (useNavigator);
63532  
63533  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/hook.js
63534  /**
63535   * WordPress dependencies
63536   */
63537  
63538  
63539  
63540  /**
63541   * Internal dependencies
63542   */
63543  
63544  
63545  
63546  
63547  const cssSelectorForAttribute = (attrName, attrValue) => `[$attrName}="$attrValue}"]`;
63548  function useNavigatorButton(props) {
63549    const {
63550      path,
63551      onClick,
63552      as = build_module_button,
63553      attributeName = 'id',
63554      ...otherProps
63555    } = useContextSystem(props, 'NavigatorButton');
63556    const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path);
63557    const {
63558      goTo
63559    } = use_navigator();
63560    const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
63561      e.preventDefault();
63562      goTo(escapedPath, {
63563        focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
63564      });
63565      onClick?.(e);
63566    }, [goTo, onClick, attributeName, escapedPath]);
63567    return {
63568      as,
63569      onClick: handleClick,
63570      ...otherProps,
63571      [attributeName]: escapedPath
63572    };
63573  }
63574  
63575  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js
63576  
63577  /**
63578   * External dependencies
63579   */
63580  
63581  /**
63582   * Internal dependencies
63583   */
63584  
63585  
63586  
63587  
63588  function UnconnectedNavigatorButton(props, forwardedRef) {
63589    const navigatorButtonProps = useNavigatorButton(props);
63590    return (0,external_React_.createElement)(component, {
63591      ref: forwardedRef,
63592      ...navigatorButtonProps
63593    });
63594  }
63595  
63596  /**
63597   * The `NavigatorButton` component can be used to navigate to a screen and should
63598   * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
63599   * and the `NavigatorBackButton` components (or the `useNavigator` hook).
63600   *
63601   * @example
63602   * ```jsx
63603   * import {
63604   *   __experimentalNavigatorProvider as NavigatorProvider,
63605   *   __experimentalNavigatorScreen as NavigatorScreen,
63606   *   __experimentalNavigatorButton as NavigatorButton,
63607   *   __experimentalNavigatorBackButton as NavigatorBackButton,
63608   * } from '@wordpress/components';
63609   *
63610   * const MyNavigation = () => (
63611   *   <NavigatorProvider initialPath="/">
63612   *     <NavigatorScreen path="/">
63613   *       <p>This is the home screen.</p>
63614   *        <NavigatorButton path="/child">
63615   *          Navigate to child screen.
63616   *       </NavigatorButton>
63617   *     </NavigatorScreen>
63618   *
63619   *     <NavigatorScreen path="/child">
63620   *       <p>This is the child screen.</p>
63621   *       <NavigatorBackButton>
63622   *         Go back
63623   *       </NavigatorBackButton>
63624   *     </NavigatorScreen>
63625   *   </NavigatorProvider>
63626   * );
63627   * ```
63628   */
63629  const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton');
63630  /* harmony default export */ const navigator_button_component = (NavigatorButton);
63631  
63632  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/hook.js
63633  /**
63634   * WordPress dependencies
63635   */
63636  
63637  
63638  /**
63639   * Internal dependencies
63640   */
63641  
63642  
63643  
63644  
63645  function useNavigatorBackButton(props) {
63646    const {
63647      onClick,
63648      as = build_module_button,
63649      goToParent: goToParentProp = false,
63650      ...otherProps
63651    } = useContextSystem(props, 'NavigatorBackButton');
63652    const {
63653      goBack,
63654      goToParent
63655    } = use_navigator();
63656    const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => {
63657      e.preventDefault();
63658      if (goToParentProp) {
63659        goToParent();
63660      } else {
63661        goBack();
63662      }
63663      onClick?.(e);
63664    }, [goToParentProp, goToParent, goBack, onClick]);
63665    return {
63666      as,
63667      onClick: handleClick,
63668      ...otherProps
63669    };
63670  }
63671  
63672  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js
63673  
63674  /**
63675   * External dependencies
63676   */
63677  
63678  /**
63679   * Internal dependencies
63680   */
63681  
63682  
63683  
63684  
63685  function UnconnectedNavigatorBackButton(props, forwardedRef) {
63686    const navigatorBackButtonProps = useNavigatorBackButton(props);
63687    return (0,external_React_.createElement)(component, {
63688      ref: forwardedRef,
63689      ...navigatorBackButtonProps
63690    });
63691  }
63692  
63693  /**
63694   * The `NavigatorBackButton` component can be used to navigate to a screen and
63695   * should be used in combination with the `NavigatorProvider`, the
63696   * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
63697   * hook).
63698   *
63699   * @example
63700   * ```jsx
63701   * import {
63702   *   __experimentalNavigatorProvider as NavigatorProvider,
63703   *   __experimentalNavigatorScreen as NavigatorScreen,
63704   *   __experimentalNavigatorButton as NavigatorButton,
63705   *   __experimentalNavigatorBackButton as NavigatorBackButton,
63706   * } from '@wordpress/components';
63707   *
63708   * const MyNavigation = () => (
63709   *   <NavigatorProvider initialPath="/">
63710   *     <NavigatorScreen path="/">
63711   *       <p>This is the home screen.</p>
63712   *        <NavigatorButton path="/child">
63713   *          Navigate to child screen.
63714   *       </NavigatorButton>
63715   *     </NavigatorScreen>
63716   *
63717   *     <NavigatorScreen path="/child">
63718   *       <p>This is the child screen.</p>
63719   *       <NavigatorBackButton>
63720   *         Go back
63721   *       </NavigatorBackButton>
63722   *     </NavigatorScreen>
63723   *   </NavigatorProvider>
63724   * );
63725   * ```
63726   */
63727  const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
63728  /* harmony default export */ const navigator_back_button_component = (NavigatorBackButton);
63729  
63730  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-to-parent-button/component.js
63731  
63732  /**
63733   * External dependencies
63734   */
63735  
63736  /**
63737   * Internal dependencies
63738   */
63739  
63740  
63741  
63742  
63743  function UnconnectedNavigatorToParentButton(props, forwardedRef) {
63744    const navigatorToParentButtonProps = useNavigatorBackButton({
63745      ...props,
63746      goToParent: true
63747    });
63748    return (0,external_React_.createElement)(component, {
63749      ref: forwardedRef,
63750      ...navigatorToParentButtonProps
63751    });
63752  }
63753  
63754  /*
63755   * The `NavigatorToParentButton` component can be used to navigate to a screen and
63756   * should be used in combination with the `NavigatorProvider`, the
63757   * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
63758   * hook).
63759   *
63760   * @example
63761   * ```jsx
63762   * import {
63763   *   __experimentalNavigatorProvider as NavigatorProvider,
63764   *   __experimentalNavigatorScreen as NavigatorScreen,
63765   *   __experimentalNavigatorButton as NavigatorButton,
63766   *   __experimentalNavigatorToParentButton as NavigatorToParentButton,
63767   * } from '@wordpress/components';
63768   *
63769   * const MyNavigation = () => (
63770   *   <NavigatorProvider initialPath="/">
63771   *     <NavigatorScreen path="/">
63772   *       <p>This is the home screen.</p>
63773   *        <NavigatorButton path="/child">
63774   *          Navigate to child screen.
63775   *       </NavigatorButton>
63776   *     </NavigatorScreen>
63777   *
63778   *     <NavigatorScreen path="/child">
63779   *       <p>This is the child screen.</p>
63780   *       <NavigatorToParentButton>
63781   *         Go to parent
63782   *       </NavigatorToParentButton>
63783   *     </NavigatorScreen>
63784   *   </NavigatorProvider>
63785   * );
63786   * ```
63787   */
63788  const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'NavigatorToParentButton');
63789  /* harmony default export */ const navigator_to_parent_button_component = (NavigatorToParentButton);
63790  
63791  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/index.js
63792  
63793  /**
63794   * External dependencies
63795   */
63796  
63797  
63798  /**
63799   * WordPress dependencies
63800   */
63801  
63802  
63803  
63804  
63805  
63806  /**
63807   * Internal dependencies
63808   */
63809  
63810  
63811  const notice_noop = () => {};
63812  
63813  /**
63814   * Custom hook which announces the message with the given politeness, if a
63815   * valid message is provided.
63816   */
63817  function useSpokenMessage(message, politeness) {
63818    const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message);
63819    (0,external_wp_element_namespaceObject.useEffect)(() => {
63820      if (spokenMessage) {
63821        (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness);
63822      }
63823    }, [spokenMessage, politeness]);
63824  }
63825  function getDefaultPoliteness(status) {
63826    switch (status) {
63827      case 'success':
63828      case 'warning':
63829      case 'info':
63830        return 'polite';
63831      // The default will also catch the 'error' status.
63832      default:
63833        return 'assertive';
63834    }
63835  }
63836  function getStatusLabel(status) {
63837    switch (status) {
63838      case 'warning':
63839        return (0,external_wp_i18n_namespaceObject.__)('Warning notice');
63840      case 'info':
63841        return (0,external_wp_i18n_namespaceObject.__)('Information notice');
63842      case 'error':
63843        return (0,external_wp_i18n_namespaceObject.__)('Error notice');
63844      // The default will also catch the 'success' status.
63845      default:
63846        return (0,external_wp_i18n_namespaceObject.__)('Notice');
63847    }
63848  }
63849  
63850  /**
63851   * `Notice` is a component used to communicate feedback to the user.
63852   *
63853   *```jsx
63854   * import { Notice } from `@wordpress/components`;
63855   *
63856   * const MyNotice = () => (
63857   *   <Notice status="error">An unknown error occurred.</Notice>
63858   * );
63859   * ```
63860   */
63861  function Notice({
63862    className,
63863    status = 'info',
63864    children,
63865    spokenMessage = children,
63866    onRemove = notice_noop,
63867    isDismissible = true,
63868    actions = [],
63869    politeness = getDefaultPoliteness(status),
63870    __unstableHTML,
63871    // onDismiss is a callback executed when the notice is dismissed.
63872    // It is distinct from onRemove, which _looks_ like a callback but is
63873    // actually the function to call to remove the notice from the UI.
63874    onDismiss = notice_noop
63875  }) {
63876    useSpokenMessage(spokenMessage, politeness);
63877    const classes = classnames_default()(className, 'components-notice', 'is-' + status, {
63878      'is-dismissible': isDismissible
63879    });
63880    if (__unstableHTML && typeof children === 'string') {
63881      children = (0,external_React_.createElement)(external_wp_element_namespaceObject.RawHTML, null, children);
63882    }
63883    const onDismissNotice = () => {
63884      onDismiss();
63885      onRemove();
63886    };
63887    return (0,external_React_.createElement)("div", {
63888      className: classes
63889    }, (0,external_React_.createElement)(visually_hidden_component, null, getStatusLabel(status)), (0,external_React_.createElement)("div", {
63890      className: "components-notice__content"
63891    }, children, (0,external_React_.createElement)("div", {
63892      className: "components-notice__actions"
63893    }, actions.map(({
63894      className: buttonCustomClasses,
63895      label,
63896      isPrimary,
63897      variant,
63898      noDefaultClasses = false,
63899      onClick,
63900      url
63901    }, index) => {
63902      let computedVariant = variant;
63903      if (variant !== 'primary' && !noDefaultClasses) {
63904        computedVariant = !url ? 'secondary' : 'link';
63905      }
63906      if (typeof computedVariant === 'undefined' && isPrimary) {
63907        computedVariant = 'primary';
63908      }
63909      return (0,external_React_.createElement)(build_module_button, {
63910        key: index,
63911        href: url,
63912        variant: computedVariant,
63913        onClick: url ? undefined : onClick,
63914        className: classnames_default()('components-notice__action', buttonCustomClasses)
63915      }, label);
63916    }))), isDismissible && (0,external_React_.createElement)(build_module_button, {
63917      className: "components-notice__dismiss",
63918      icon: library_close,
63919      label: (0,external_wp_i18n_namespaceObject.__)('Close'),
63920      onClick: onDismissNotice
63921    }));
63922  }
63923  /* harmony default export */ const build_module_notice = (Notice);
63924  
63925  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/list.js
63926  
63927  /**
63928   * External dependencies
63929   */
63930  
63931  
63932  /**
63933   * Internal dependencies
63934   */
63935  
63936  const list_noop = () => {};
63937  
63938  /**
63939   * `NoticeList` is a component used to render a collection of notices.
63940   *
63941   *```jsx
63942   * import { Notice, NoticeList } from `@wordpress/components`;
63943   *
63944   * const MyNoticeList = () => {
63945   *    const [ notices, setNotices ] = useState( [
63946   *        {
63947   *            id: 'second-notice',
63948   *            content: 'second notice content',
63949   *        },
63950   *        {
63951   *            id: 'fist-notice',
63952   *            content: 'first notice content',
63953   *        },
63954   *    ] );
63955   *
63956   *    const removeNotice = ( id ) => {
63957   *        setNotices( notices.filter( ( notice ) => notice.id !== id ) );
63958   *    };
63959   *
63960   *    return <NoticeList notices={ notices } onRemove={ removeNotice } />;
63961   *};
63962   *```
63963   */
63964  function NoticeList({
63965    notices,
63966    onRemove = list_noop,
63967    className,
63968    children
63969  }) {
63970    const removeNotice = id => () => onRemove(id);
63971    className = classnames_default()('components-notice-list', className);
63972    return (0,external_React_.createElement)("div", {
63973      className: className
63974    }, children, [...notices].reverse().map(notice => {
63975      const {
63976        content,
63977        ...restNotice
63978      } = notice;
63979      return (0,external_React_.createElement)(build_module_notice, {
63980        ...restNotice,
63981        key: notice.id,
63982        onRemove: removeNotice(notice.id)
63983      }, notice.content);
63984    }));
63985  }
63986  /* harmony default export */ const list = (NoticeList);
63987  
63988  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/header.js
63989  
63990  /**
63991   * Internal dependencies
63992   */
63993  
63994  /**
63995   * `PanelHeader` renders the header for the `Panel`.
63996   * This is used by the `Panel` component under the hood,
63997   * so it does not typically need to be used.
63998   */
63999  function PanelHeader({
64000    label,
64001    children
64002  }) {
64003    return (0,external_React_.createElement)("div", {
64004      className: "components-panel__header"
64005    }, label && (0,external_React_.createElement)("h2", null, label), children);
64006  }
64007  /* harmony default export */ const panel_header = (PanelHeader);
64008  
64009  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/index.js
64010  
64011  /**
64012   * External dependencies
64013   */
64014  
64015  
64016  /**
64017   * WordPress dependencies
64018   */
64019  
64020  
64021  /**
64022   * Internal dependencies
64023   */
64024  
64025  function UnforwardedPanel({
64026    header,
64027    className,
64028    children
64029  }, ref) {
64030    const classNames = classnames_default()(className, 'components-panel');
64031    return (0,external_React_.createElement)("div", {
64032      className: classNames,
64033      ref: ref
64034    }, header && (0,external_React_.createElement)(panel_header, {
64035      label: header
64036    }), children);
64037  }
64038  
64039  /**
64040   * `Panel` expands and collapses multiple sections of content.
64041   *
64042   * ```jsx
64043   * import { Panel, PanelBody, PanelRow } from '@wordpress/components';
64044   * import { more } from '@wordpress/icons';
64045   *
64046   * const MyPanel = () => (
64047   *     <Panel header="My Panel">
64048   *         <PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
64049   *             <PanelRow>My Panel Inputs and Labels</PanelRow>
64050   *         </PanelBody>
64051   *     </Panel>
64052   * );
64053   * ```
64054   */
64055  const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanel);
64056  /* harmony default export */ const panel = (Panel);
64057  
64058  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-up.js
64059  
64060  /**
64061   * WordPress dependencies
64062   */
64063  
64064  const chevronUp = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
64065    viewBox: "0 0 24 24",
64066    xmlns: "http://www.w3.org/2000/svg"
64067  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
64068    d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
64069  }));
64070  /* harmony default export */ const chevron_up = (chevronUp);
64071  
64072  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/body.js
64073  
64074  /**
64075   * External dependencies
64076   */
64077  
64078  
64079  /**
64080   * WordPress dependencies
64081   */
64082  
64083  
64084  
64085  
64086  /**
64087   * Internal dependencies
64088   */
64089  
64090  
64091  
64092  
64093  const body_noop = () => {};
64094  function UnforwardedPanelBody(props, ref) {
64095    const {
64096      buttonProps = {},
64097      children,
64098      className,
64099      icon,
64100      initialOpen,
64101      onToggle = body_noop,
64102      opened,
64103      title,
64104      scrollAfterOpen = true
64105    } = props;
64106    const [isOpened, setIsOpened] = use_controlled_state(opened, {
64107      initial: initialOpen === undefined ? true : initialOpen,
64108      fallback: false
64109    });
64110    const nodeRef = (0,external_wp_element_namespaceObject.useRef)(null);
64111  
64112    // Defaults to 'smooth' scrolling
64113    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
64114    const scrollBehavior = (0,external_wp_compose_namespaceObject.useReducedMotion)() ? 'auto' : 'smooth';
64115    const handleOnToggle = event => {
64116      event.preventDefault();
64117      const next = !isOpened;
64118      setIsOpened(next);
64119      onToggle(next);
64120    };
64121  
64122    // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
64123    const scrollAfterOpenRef = (0,external_wp_element_namespaceObject.useRef)();
64124    scrollAfterOpenRef.current = scrollAfterOpen;
64125    // Runs after initial render.
64126    use_update_effect(() => {
64127      if (isOpened && scrollAfterOpenRef.current && nodeRef.current?.scrollIntoView) {
64128        /*
64129         * Scrolls the content into view when visible.
64130         * This improves the UX when there are multiple stacking <PanelBody />
64131         * components in a scrollable container.
64132         */
64133        nodeRef.current.scrollIntoView({
64134          inline: 'nearest',
64135          block: 'nearest',
64136          behavior: scrollBehavior
64137        });
64138      }
64139    }, [isOpened, scrollBehavior]);
64140    const classes = classnames_default()('components-panel__body', className, {
64141      'is-opened': isOpened
64142    });
64143    return (0,external_React_.createElement)("div", {
64144      className: classes,
64145      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref])
64146    }, (0,external_React_.createElement)(PanelBodyTitle, {
64147      icon: icon,
64148      isOpened: Boolean(isOpened),
64149      onClick: handleOnToggle,
64150      title: title,
64151      ...buttonProps
64152    }), typeof children === 'function' ? children({
64153      opened: Boolean(isOpened)
64154    }) : isOpened && children);
64155  }
64156  const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({
64157    isOpened,
64158    icon,
64159    title,
64160    ...props
64161  }, ref) => {
64162    if (!title) return null;
64163    return (0,external_React_.createElement)("h2", {
64164      className: "components-panel__body-title"
64165    }, (0,external_React_.createElement)(build_module_button, {
64166      className: "components-panel__body-toggle",
64167      "aria-expanded": isOpened,
64168      ref: ref,
64169      ...props
64170    }, (0,external_React_.createElement)("span", {
64171      "aria-hidden": "true"
64172    }, (0,external_React_.createElement)(build_module_icon, {
64173      className: "components-panel__arrow",
64174      icon: isOpened ? chevron_up : chevron_down
64175    })), title, icon && (0,external_React_.createElement)(build_module_icon, {
64176      icon: icon,
64177      className: "components-panel__icon",
64178      size: 20
64179    })));
64180  });
64181  const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody);
64182  /* harmony default export */ const body = (PanelBody);
64183  
64184  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/row.js
64185  
64186  /**
64187   * External dependencies
64188   */
64189  
64190  
64191  /**
64192   * WordPress dependencies
64193   */
64194  
64195  function UnforwardedPanelRow({
64196    className,
64197    children
64198  }, ref) {
64199    return (0,external_React_.createElement)("div", {
64200      className: classnames_default()('components-panel__row', className),
64201      ref: ref
64202    }, children);
64203  }
64204  
64205  /**
64206   * `PanelRow` is a generic container for rows within a `PanelBody`.
64207   * It is a flex container with a top margin for spacing.
64208   */
64209  const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelRow);
64210  /* harmony default export */ const row = (PanelRow);
64211  
64212  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/placeholder/index.js
64213  
64214  /**
64215   * External dependencies
64216   */
64217  
64218  
64219  /**
64220   * WordPress dependencies
64221   */
64222  
64223  
64224  
64225  
64226  
64227  /**
64228   * Internal dependencies
64229   */
64230  
64231  const PlaceholderIllustration = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
64232    className: "components-placeholder__illustration",
64233    fill: "none",
64234    xmlns: "http://www.w3.org/2000/svg",
64235    viewBox: "0 0 60 60",
64236    preserveAspectRatio: "none"
64237  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
64238    vectorEffect: "non-scaling-stroke",
64239    d: "M60 60 0 0"
64240  }));
64241  
64242  /**
64243   * Renders a placeholder. Normally used by blocks to render their empty state.
64244   *
64245   * ```jsx
64246   * import { Placeholder } from '@wordpress/components';
64247   * import { more } from '@wordpress/icons';
64248   *
64249   * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
64250   * ```
64251   */
64252  function Placeholder(props) {
64253    const {
64254      icon,
64255      children,
64256      label,
64257      instructions,
64258      className,
64259      notices,
64260      preview,
64261      isColumnLayout,
64262      withIllustration,
64263      ...additionalProps
64264    } = props;
64265    const [resizeListener, {
64266      width
64267    }] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
64268  
64269    // Since `useResizeObserver` will report a width of `null` until after the
64270    // first render, avoid applying any modifier classes until width is known.
64271    let modifierClassNames;
64272    if (typeof width === 'number') {
64273      modifierClassNames = {
64274        'is-large': width >= 480,
64275        'is-medium': width >= 160 && width < 480,
64276        'is-small': width < 160
64277      };
64278    }
64279    const classes = classnames_default()('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
64280    const fieldsetClasses = classnames_default()('components-placeholder__fieldset', {
64281      'is-column-layout': isColumnLayout
64282    });
64283    (0,external_wp_element_namespaceObject.useEffect)(() => {
64284      if (instructions) {
64285        (0,external_wp_a11y_namespaceObject.speak)(instructions);
64286      }
64287    }, [instructions]);
64288    return (0,external_React_.createElement)("div", {
64289      ...additionalProps,
64290      className: classes
64291    }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0,external_React_.createElement)("div", {
64292      className: "components-placeholder__preview"
64293    }, preview), (0,external_React_.createElement)("div", {
64294      className: "components-placeholder__label"
64295    }, (0,external_React_.createElement)(build_module_icon, {
64296      icon: icon
64297    }), label), !!instructions && (0,external_React_.createElement)("div", {
64298      className: "components-placeholder__instructions"
64299    }, instructions), (0,external_React_.createElement)("div", {
64300      className: fieldsetClasses
64301    }, children));
64302  }
64303  /* harmony default export */ const placeholder = (Placeholder);
64304  
64305  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/terms.js
64306  /**
64307   * Internal dependencies
64308   */
64309  
64310  const ensureParentsAreDefined = terms => {
64311    return terms.every(term => term.parent !== null);
64312  };
64313  /**
64314   * Returns terms in a tree form.
64315   *
64316   * @param flatTerms Array of terms in flat format.
64317   *
64318   * @return Terms in tree format.
64319   */
64320  function buildTermsTree(flatTerms) {
64321    const flatTermsWithParentAndChildren = flatTerms.map(term => ({
64322      children: [],
64323      parent: null,
64324      ...term,
64325      id: String(term.id)
64326    }));
64327  
64328    // We use a custom type guard here to ensure that the parent property is
64329    // defined on all terms. The type of the `parent` property is `number | null`
64330    // and we need to ensure that it is `number`. This is because we use the
64331    // `parent` property as a key in the `termsByParent` object.
64332    if (!ensureParentsAreDefined(flatTermsWithParentAndChildren)) {
64333      return flatTermsWithParentAndChildren;
64334    }
64335    const termsByParent = flatTermsWithParentAndChildren.reduce((acc, term) => {
64336      const {
64337        parent
64338      } = term;
64339      if (!acc[parent]) {
64340        acc[parent] = [];
64341      }
64342      acc[parent].push(term);
64343      return acc;
64344    }, {});
64345    const fillWithChildren = terms => {
64346      return terms.map(term => {
64347        const children = termsByParent[term.id];
64348        return {
64349          ...term,
64350          children: children && children.length ? fillWithChildren(children) : []
64351        };
64352      });
64353    };
64354    return fillWithChildren(termsByParent['0'] || []);
64355  }
64356  
64357  ;// CONCATENATED MODULE: external ["wp","htmlEntities"]
64358  const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"];
64359  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-select/index.js
64360  
64361  /**
64362   * WordPress dependencies
64363   */
64364  
64365  
64366  
64367  /**
64368   * Internal dependencies
64369   */
64370  
64371  
64372  function getSelectOptions(tree, level = 0) {
64373    return tree.flatMap(treeNode => [{
64374      value: treeNode.id,
64375      label: '\u00A0'.repeat(level * 3) + (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(treeNode.name)
64376    }, ...getSelectOptions(treeNode.children || [], level + 1)]);
64377  }
64378  
64379  /**
64380   * TreeSelect component is used to generate select input fields.
64381   *
64382   * ```jsx
64383   * import { TreeSelect } from '@wordpress/components';
64384   * import { useState } from '@wordpress/element';
64385   *
64386   * const MyTreeSelect = () => {
64387   *     const [ page, setPage ] = useState( 'p21' );
64388   *
64389   *     return (
64390   *         <TreeSelect
64391   *             label="Parent page"
64392   *             noOptionLabel="No parent page"
64393   *             onChange={ ( newPage ) => setPage( newPage ) }
64394   *             selectedId={ page }
64395   *             tree={ [
64396   *                 {
64397   *                     name: 'Page 1',
64398   *                     id: 'p1',
64399   *                     children: [
64400   *                         { name: 'Descend 1 of page 1', id: 'p11' },
64401   *                         { name: 'Descend 2 of page 1', id: 'p12' },
64402   *                     ],
64403   *                 },
64404   *                 {
64405   *                     name: 'Page 2',
64406   *                     id: 'p2',
64407   *                     children: [
64408   *                         {
64409   *                             name: 'Descend 1 of page 2',
64410   *                             id: 'p21',
64411   *                             children: [
64412   *                                 {
64413   *                                     name: 'Descend 1 of Descend 1 of page 2',
64414   *                                     id: 'p211',
64415   *                                 },
64416   *                             ],
64417   *                         },
64418   *                     ],
64419   *                 },
64420   *             ] }
64421   *         />
64422   *     );
64423   * }
64424   * ```
64425   */
64426  
64427  function TreeSelect(props) {
64428    const {
64429      label,
64430      noOptionLabel,
64431      onChange,
64432      selectedId,
64433      tree = [],
64434      ...restProps
64435    } = useDeprecated36pxDefaultSizeProp(props);
64436    const options = (0,external_wp_element_namespaceObject.useMemo)(() => {
64437      return [noOptionLabel && {
64438        value: '',
64439        label: noOptionLabel
64440      }, ...getSelectOptions(tree)].filter(option => !!option);
64441    }, [noOptionLabel, tree]);
64442    return (0,external_React_.createElement)(SelectControl, {
64443      label,
64444      options,
64445      onChange,
64446      value: selectedId,
64447      ...restProps
64448    });
64449  }
64450  /* harmony default export */ const tree_select = (TreeSelect);
64451  
64452  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/author-select.js
64453  
64454  /**
64455   * Internal dependencies
64456   */
64457  
64458  
64459  function AuthorSelect({
64460    __next40pxDefaultSize,
64461    label,
64462    noOptionLabel,
64463    authorList,
64464    selectedAuthorId,
64465    onChange: onChangeProp
64466  }) {
64467    if (!authorList) return null;
64468    const termsTree = buildTermsTree(authorList);
64469    return (0,external_React_.createElement)(tree_select, {
64470      label,
64471      noOptionLabel,
64472      onChange: onChangeProp,
64473      tree: termsTree,
64474      selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined,
64475      __nextHasNoMarginBottom: true,
64476      __next40pxDefaultSize: __next40pxDefaultSize
64477    });
64478  }
64479  
64480  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/category-select.js
64481  
64482  /**
64483   * Internal dependencies
64484   */
64485  
64486  
64487  
64488  /**
64489   * WordPress dependencies
64490   */
64491  
64492  function CategorySelect({
64493    __next40pxDefaultSize,
64494    label,
64495    noOptionLabel,
64496    categoriesList,
64497    selectedCategoryId,
64498    onChange: onChangeProp,
64499    ...props
64500  }) {
64501    const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => {
64502      return buildTermsTree(categoriesList);
64503    }, [categoriesList]);
64504    return (0,external_React_.createElement)(tree_select, {
64505      label,
64506      noOptionLabel,
64507      onChange: onChangeProp,
64508      tree: termsTree,
64509      selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,
64510      ...props,
64511      __nextHasNoMarginBottom: true,
64512      __next40pxDefaultSize: __next40pxDefaultSize
64513    });
64514  }
64515  
64516  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/index.js
64517  
64518  /**
64519   * WordPress dependencies
64520   */
64521  
64522  
64523  /**
64524   * Internal dependencies
64525   */
64526  
64527  
64528  
64529  
64530  
64531  
64532  const DEFAULT_MIN_ITEMS = 1;
64533  const DEFAULT_MAX_ITEMS = 100;
64534  const MAX_CATEGORIES_SUGGESTIONS = 20;
64535  function isSingleCategorySelection(props) {
64536    return 'categoriesList' in props;
64537  }
64538  function isMultipleCategorySelection(props) {
64539    return 'categorySuggestions' in props;
64540  }
64541  
64542  /**
64543   * Controls to query for posts.
64544   *
64545   * ```jsx
64546   * const MyQueryControls = () => (
64547   *   <QueryControls
64548   *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
64549   *     onOrderByChange={ ( newOrderBy ) => {
64550   *       updateQuery( { orderBy: newOrderBy } )
64551   *     }
64552   *     onOrderChange={ ( newOrder ) => {
64553   *       updateQuery( { order: newOrder } )
64554   *     }
64555   *     categoriesList={ categories }
64556   *     selectedCategoryId={ category }
64557   *     onCategoryChange={ ( newCategory ) => {
64558   *       updateQuery( { category: newCategory } )
64559   *     }
64560   *     onNumberOfItemsChange={ ( newNumberOfItems ) => {
64561   *       updateQuery( { numberOfItems: newNumberOfItems } )
64562   *     } }
64563   *   />
64564   * );
64565   * ```
64566   */
64567  function QueryControls({
64568    __next40pxDefaultSize = false,
64569    authorList,
64570    selectedAuthorId,
64571    numberOfItems,
64572    order,
64573    orderBy,
64574    maxItems = DEFAULT_MAX_ITEMS,
64575    minItems = DEFAULT_MIN_ITEMS,
64576    onAuthorChange,
64577    onNumberOfItemsChange,
64578    onOrderChange,
64579    onOrderByChange,
64580    // Props for single OR multiple category selection are not destructured here,
64581    // but instead are destructured inline where necessary.
64582    ...props
64583  }) {
64584    return (0,external_React_.createElement)(v_stack_component, {
64585      spacing: "4",
64586      className: "components-query-controls"
64587    }, [onOrderChange && onOrderByChange && (0,external_React_.createElement)(select_control, {
64588      __nextHasNoMarginBottom: true,
64589      __next40pxDefaultSize: __next40pxDefaultSize,
64590      key: "query-controls-order-select",
64591      label: (0,external_wp_i18n_namespaceObject.__)('Order by'),
64592      value: `$orderBy}/$order}`,
64593      options: [{
64594        label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'),
64595        value: 'date/desc'
64596      }, {
64597        label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'),
64598        value: 'date/asc'
64599      }, {
64600        /* translators: Label for ordering posts by title in ascending order. */
64601        label: (0,external_wp_i18n_namespaceObject.__)('A → Z'),
64602        value: 'title/asc'
64603      }, {
64604        /* translators: Label for ordering posts by title in descending order. */
64605        label: (0,external_wp_i18n_namespaceObject.__)('Z → A'),
64606        value: 'title/desc'
64607      }],
64608      onChange: value => {
64609        if (typeof value !== 'string') {
64610          return;
64611        }
64612        const [newOrderBy, newOrder] = value.split('/');
64613        if (newOrder !== order) {
64614          onOrderChange(newOrder);
64615        }
64616        if (newOrderBy !== orderBy) {
64617          onOrderByChange(newOrderBy);
64618        }
64619      }
64620    }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && (0,external_React_.createElement)(CategorySelect, {
64621      __next40pxDefaultSize: __next40pxDefaultSize,
64622      key: "query-controls-category-select",
64623      categoriesList: props.categoriesList,
64624      label: (0,external_wp_i18n_namespaceObject.__)('Category'),
64625      noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'categories'),
64626      selectedCategoryId: props.selectedCategoryId,
64627      onChange: props.onCategoryChange
64628    }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && (0,external_React_.createElement)(form_token_field, {
64629      __next40pxDefaultSize: __next40pxDefaultSize,
64630      __nextHasNoMarginBottom: true,
64631      key: "query-controls-categories-select",
64632      label: (0,external_wp_i18n_namespaceObject.__)('Categories'),
64633      value: props.selectedCategories && props.selectedCategories.map(item => ({
64634        id: item.id,
64635        // Keeping the fallback to `item.value` for legacy reasons,
64636        // even if items of `selectedCategories` should not have a
64637        // `value` property.
64638        // @ts-expect-error
64639        value: item.name || item.value
64640      })),
64641      suggestions: Object.keys(props.categorySuggestions),
64642      onChange: props.onCategoryChange,
64643      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
64644    }), onAuthorChange && (0,external_React_.createElement)(AuthorSelect, {
64645      __next40pxDefaultSize: __next40pxDefaultSize,
64646      key: "query-controls-author-select",
64647      authorList: authorList,
64648      label: (0,external_wp_i18n_namespaceObject.__)('Author'),
64649      noOptionLabel: (0,external_wp_i18n_namespaceObject._x)('All', 'authors'),
64650      selectedAuthorId: selectedAuthorId,
64651      onChange: onAuthorChange
64652    }), onNumberOfItemsChange && (0,external_React_.createElement)(range_control, {
64653      __nextHasNoMarginBottom: true,
64654      __next40pxDefaultSize: __next40pxDefaultSize,
64655      key: "query-controls-range-control",
64656      label: (0,external_wp_i18n_namespaceObject.__)('Number of items'),
64657      value: numberOfItems,
64658      onChange: onNumberOfItemsChange,
64659      min: minItems,
64660      max: maxItems,
64661      required: true
64662    })]);
64663  }
64664  /* harmony default export */ const query_controls = (QueryControls);
64665  
64666  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/context.js
64667  /**
64668   * External dependencies
64669   */
64670  // eslint-disable-next-line no-restricted-imports
64671  
64672  /**
64673   * WordPress dependencies
64674   */
64675  
64676  const RadioGroupContext = (0,external_wp_element_namespaceObject.createContext)({
64677    store: undefined,
64678    disabled: undefined
64679  });
64680  
64681  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/radio.js
64682  
64683  /**
64684   * WordPress dependencies
64685   */
64686  
64687  
64688  /**
64689   * External dependencies
64690   */
64691  // eslint-disable-next-line no-restricted-imports
64692  
64693  
64694  /**
64695   * Internal dependencies
64696   */
64697  
64698  
64699  function UnforwardedRadio({
64700    value,
64701    children,
64702    ...props
64703  }, ref) {
64704    const {
64705      store,
64706      disabled
64707    } = (0,external_wp_element_namespaceObject.useContext)(RadioGroupContext);
64708    const selectedValue = store?.useState('value');
64709    const isChecked = selectedValue !== undefined && selectedValue === value;
64710    return (0,external_React_.createElement)(Radio, {
64711      disabled: disabled,
64712      store: store,
64713      ref: ref,
64714      value: value,
64715      render: (0,external_React_.createElement)(build_module_button, {
64716        variant: isChecked ? 'primary' : 'secondary',
64717        ...props
64718      })
64719    }, children || value);
64720  }
64721  
64722  /**
64723   * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
64724   */
64725  const radio_Radio = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadio);
64726  /* harmony default export */ const radio_group_radio = (radio_Radio);
64727  
64728  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/index.js
64729  
64730  /**
64731   * External dependencies
64732   */
64733  // eslint-disable-next-line no-restricted-imports
64734  
64735  
64736  /**
64737   * WordPress dependencies
64738   */
64739  
64740  
64741  /**
64742   * Internal dependencies
64743   */
64744  
64745  
64746  function UnforwardedRadioGroup({
64747    label,
64748    checked,
64749    defaultChecked,
64750    disabled,
64751    onChange,
64752    children,
64753    ...props
64754  }, ref) {
64755    const radioStore = useRadioStore({
64756      value: checked,
64757      defaultValue: defaultChecked,
64758      setValue: newValue => {
64759        onChange?.(newValue !== null && newValue !== void 0 ? newValue : undefined);
64760      }
64761    });
64762    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
64763      store: radioStore,
64764      disabled
64765    }), [radioStore, disabled]);
64766    return (0,external_React_.createElement)(RadioGroupContext.Provider, {
64767      value: contextValue
64768    }, (0,external_React_.createElement)(RadioGroup, {
64769      store: radioStore,
64770      render: (0,external_React_.createElement)(button_group, null, children),
64771      "aria-label": label,
64772      ref: ref,
64773      ...props
64774    }));
64775  }
64776  
64777  /**
64778   * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
64779   */
64780  const radio_group_RadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRadioGroup);
64781  /* harmony default export */ const radio_group = (radio_group_RadioGroup);
64782  
64783  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-control/index.js
64784  
64785  /**
64786   * External dependencies
64787   */
64788  
64789  /**
64790   * WordPress dependencies
64791   */
64792  
64793  
64794  /**
64795   * Internal dependencies
64796   */
64797  
64798  
64799  
64800  /**
64801   * Render a user interface to select the user type using radio inputs.
64802   *
64803   * ```jsx
64804   * import { RadioControl } from '@wordpress/components';
64805   * import { useState } from '@wordpress/element';
64806   *
64807   * const MyRadioControl = () => {
64808   *   const [ option, setOption ] = useState( 'a' );
64809   *
64810   *   return (
64811   *     <RadioControl
64812   *       label="User type"
64813   *       help="The type of the current user"
64814   *       selected={ option }
64815   *       options={ [
64816   *         { label: 'Author', value: 'a' },
64817   *         { label: 'Editor', value: 'e' },
64818   *       ] }
64819   *       onChange={ ( value ) => setOption( value ) }
64820   *     />
64821   *   );
64822   * };
64823   * ```
64824   */
64825  function RadioControl(props) {
64826    const {
64827      label,
64828      className,
64829      selected,
64830      help,
64831      onChange,
64832      hideLabelFromVision,
64833      options = [],
64834      ...additionalProps
64835    } = props;
64836    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl);
64837    const id = `inspector-radio-control-$instanceId}`;
64838    const onChangeValue = event => onChange(event.target.value);
64839    if (!options?.length) {
64840      return null;
64841    }
64842    return (0,external_React_.createElement)(base_control, {
64843      __nextHasNoMarginBottom: true,
64844      label: label,
64845      id: id,
64846      hideLabelFromVision: hideLabelFromVision,
64847      help: help,
64848      className: classnames_default()(className, 'components-radio-control')
64849    }, (0,external_React_.createElement)(v_stack_component, {
64850      spacing: 1
64851    }, options.map((option, index) => (0,external_React_.createElement)("div", {
64852      key: `$id}-$index}`,
64853      className: "components-radio-control__option"
64854    }, (0,external_React_.createElement)("input", {
64855      id: `$id}-$index}`,
64856      className: "components-radio-control__input",
64857      type: "radio",
64858      name: id,
64859      value: option.value,
64860      onChange: onChangeValue,
64861      checked: option.value === selected,
64862      "aria-describedby": !!help ? `$id}__help` : undefined,
64863      ...additionalProps
64864    }), (0,external_React_.createElement)("label", {
64865      className: "components-radio-control__label",
64866      htmlFor: `$id}-$index}`
64867    }, option.label)))));
64868  }
64869  /* harmony default export */ const radio_control = (RadioControl);
64870  
64871  ;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/resizer.js
64872  var resizer_extends = (undefined && undefined.__extends) || (function () {
64873      var extendStatics = function (d, b) {
64874          extendStatics = Object.setPrototypeOf ||
64875              ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
64876              function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
64877          return extendStatics(d, b);
64878      };
64879      return function (d, b) {
64880          extendStatics(d, b);
64881          function __() { this.constructor = d; }
64882          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
64883      };
64884  })();
64885  var resizer_assign = (undefined && undefined.__assign) || function () {
64886      resizer_assign = Object.assign || function(t) {
64887          for (var s, i = 1, n = arguments.length; i < n; i++) {
64888              s = arguments[i];
64889              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
64890                  t[p] = s[p];
64891          }
64892          return t;
64893      };
64894      return resizer_assign.apply(this, arguments);
64895  };
64896  
64897  var rowSizeBase = {
64898      width: '100%',
64899      height: '10px',
64900      top: '0px',
64901      left: '0px',
64902      cursor: 'row-resize',
64903  };
64904  var colSizeBase = {
64905      width: '10px',
64906      height: '100%',
64907      top: '0px',
64908      left: '0px',
64909      cursor: 'col-resize',
64910  };
64911  var edgeBase = {
64912      width: '20px',
64913      height: '20px',
64914      position: 'absolute',
64915  };
64916  var resizer_styles = {
64917      top: resizer_assign(resizer_assign({}, rowSizeBase), { top: '-5px' }),
64918      right: resizer_assign(resizer_assign({}, colSizeBase), { left: undefined, right: '-5px' }),
64919      bottom: resizer_assign(resizer_assign({}, rowSizeBase), { top: undefined, bottom: '-5px' }),
64920      left: resizer_assign(resizer_assign({}, colSizeBase), { left: '-5px' }),
64921      topRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', top: '-10px', cursor: 'ne-resize' }),
64922      bottomRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', bottom: '-10px', cursor: 'se-resize' }),
64923      bottomLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', bottom: '-10px', cursor: 'sw-resize' }),
64924      topLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', top: '-10px', cursor: 'nw-resize' }),
64925  };
64926  var Resizer = /** @class */ (function (_super) {
64927      resizer_extends(Resizer, _super);
64928      function Resizer() {
64929          var _this = _super !== null && _super.apply(this, arguments) || this;
64930          _this.onMouseDown = function (e) {
64931              _this.props.onResizeStart(e, _this.props.direction);
64932          };
64933          _this.onTouchStart = function (e) {
64934              _this.props.onResizeStart(e, _this.props.direction);
64935          };
64936          return _this;
64937      }
64938      Resizer.prototype.render = function () {
64939          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));
64940      };
64941      return Resizer;
64942  }(external_React_.PureComponent));
64943  
64944  
64945  ;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/index.js
64946  var lib_extends = (undefined && undefined.__extends) || (function () {
64947      var extendStatics = function (d, b) {
64948          extendStatics = Object.setPrototypeOf ||
64949              ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
64950              function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
64951          return extendStatics(d, b);
64952      };
64953      return function (d, b) {
64954          extendStatics(d, b);
64955          function __() { this.constructor = d; }
64956          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
64957      };
64958  })();
64959  var lib_assign = (undefined && undefined.__assign) || function () {
64960      lib_assign = Object.assign || function(t) {
64961          for (var s, i = 1, n = arguments.length; i < n; i++) {
64962              s = arguments[i];
64963              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
64964                  t[p] = s[p];
64965          }
64966          return t;
64967      };
64968      return lib_assign.apply(this, arguments);
64969  };
64970  
64971  
64972  
64973  var DEFAULT_SIZE = {
64974      width: 'auto',
64975      height: 'auto',
64976  };
64977  var lib_clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); };
64978  var snap = function (n, size) { return Math.round(n / size) * size; };
64979  var hasDirection = function (dir, target) {
64980      return new RegExp(dir, 'i').test(target);
64981  };
64982  // INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`.
64983  var isTouchEvent = function (event) {
64984      return Boolean(event.touches && event.touches.length);
64985  };
64986  var isMouseEvent = function (event) {
64987      return Boolean((event.clientX || event.clientX === 0) &&
64988          (event.clientY || event.clientY === 0));
64989  };
64990  var findClosestSnap = function (n, snapArray, snapGap) {
64991      if (snapGap === void 0) { snapGap = 0; }
64992      var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0);
64993      var gap = Math.abs(snapArray[closestGapIndex] - n);
64994      return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
64995  };
64996  var getStringSize = function (n) {
64997      n = n.toString();
64998      if (n === 'auto') {
64999          return n;
65000      }
65001      if (n.endsWith('px')) {
65002          return n;
65003      }
65004      if (n.endsWith('%')) {
65005          return n;
65006      }
65007      if (n.endsWith('vh')) {
65008          return n;
65009      }
65010      if (n.endsWith('vw')) {
65011          return n;
65012      }
65013      if (n.endsWith('vmax')) {
65014          return n;
65015      }
65016      if (n.endsWith('vmin')) {
65017          return n;
65018      }
65019      return n + "px";
65020  };
65021  var getPixelSize = function (size, parentSize, innerWidth, innerHeight) {
65022      if (size && typeof size === 'string') {
65023          if (size.endsWith('px')) {
65024              return Number(size.replace('px', ''));
65025          }
65026          if (size.endsWith('%')) {
65027              var ratio = Number(size.replace('%', '')) / 100;
65028              return parentSize * ratio;
65029          }
65030          if (size.endsWith('vw')) {
65031              var ratio = Number(size.replace('vw', '')) / 100;
65032              return innerWidth * ratio;
65033          }
65034          if (size.endsWith('vh')) {
65035              var ratio = Number(size.replace('vh', '')) / 100;
65036              return innerHeight * ratio;
65037          }
65038      }
65039      return size;
65040  };
65041  var calculateNewMax = function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) {
65042      maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
65043      maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
65044      minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
65045      minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
65046      return {
65047          maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
65048          maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
65049          minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
65050          minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
65051      };
65052  };
65053  var definedProps = [
65054      'as',
65055      'style',
65056      'className',
65057      'grid',
65058      'snap',
65059      'bounds',
65060      'boundsByDirection',
65061      'size',
65062      'defaultSize',
65063      'minWidth',
65064      'minHeight',
65065      'maxWidth',
65066      'maxHeight',
65067      'lockAspectRatio',
65068      'lockAspectRatioExtraWidth',
65069      'lockAspectRatioExtraHeight',
65070      'enable',
65071      'handleStyles',
65072      'handleClasses',
65073      'handleWrapperStyle',
65074      'handleWrapperClass',
65075      'children',
65076      'onResizeStart',
65077      'onResize',
65078      'onResizeStop',
65079      'handleComponent',
65080      'scale',
65081      'resizeRatio',
65082      'snapGap',
65083  ];
65084  // HACK: This class is used to calculate % size.
65085  var baseClassName = '__resizable_base__';
65086  var Resizable = /** @class */ (function (_super) {
65087      lib_extends(Resizable, _super);
65088      function Resizable(props) {
65089          var _this = _super.call(this, props) || this;
65090          _this.ratio = 1;
65091          _this.resizable = null;
65092          // For parent boundary
65093          _this.parentLeft = 0;
65094          _this.parentTop = 0;
65095          // For boundary
65096          _this.resizableLeft = 0;
65097          _this.resizableRight = 0;
65098          _this.resizableTop = 0;
65099          _this.resizableBottom = 0;
65100          // For target boundary
65101          _this.targetLeft = 0;
65102          _this.targetTop = 0;
65103          _this.appendBase = function () {
65104              if (!_this.resizable || !_this.window) {
65105                  return null;
65106              }
65107              var parent = _this.parentNode;
65108              if (!parent) {
65109                  return null;
65110              }
65111              var element = _this.window.document.createElement('div');
65112              element.style.width = '100%';
65113              element.style.height = '100%';
65114              element.style.position = 'absolute';
65115              element.style.transform = 'scale(0, 0)';
65116              element.style.left = '0';
65117              element.style.flex = '0 0 100%';
65118              if (element.classList) {
65119                  element.classList.add(baseClassName);
65120              }
65121              else {
65122                  element.className += baseClassName;
65123              }
65124              parent.appendChild(element);
65125              return element;
65126          };
65127          _this.removeBase = function (base) {
65128              var parent = _this.parentNode;
65129              if (!parent) {
65130                  return;
65131              }
65132              parent.removeChild(base);
65133          };
65134          _this.ref = function (c) {
65135              if (c) {
65136                  _this.resizable = c;
65137              }
65138          };
65139          _this.state = {
65140              isResizing: false,
65141              width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined'
65142                  ? 'auto'
65143                  : _this.propsSize && _this.propsSize.width,
65144              height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined'
65145                  ? 'auto'
65146                  : _this.propsSize && _this.propsSize.height,
65147              direction: 'right',
65148              original: {
65149                  x: 0,
65150                  y: 0,
65151                  width: 0,
65152                  height: 0,
65153              },
65154              backgroundStyle: {
65155                  height: '100%',
65156                  width: '100%',
65157                  backgroundColor: 'rgba(0,0,0,0)',
65158                  cursor: 'auto',
65159                  opacity: 0,
65160                  position: 'fixed',
65161                  zIndex: 9999,
65162                  top: '0',
65163                  left: '0',
65164                  bottom: '0',
65165                  right: '0',
65166              },
65167              flexBasis: undefined,
65168          };
65169          _this.onResizeStart = _this.onResizeStart.bind(_this);
65170          _this.onMouseMove = _this.onMouseMove.bind(_this);
65171          _this.onMouseUp = _this.onMouseUp.bind(_this);
65172          return _this;
65173      }
65174      Object.defineProperty(Resizable.prototype, "parentNode", {
65175          get: function () {
65176              if (!this.resizable) {
65177                  return null;
65178              }
65179              return this.resizable.parentNode;
65180          },
65181          enumerable: false,
65182          configurable: true
65183      });
65184      Object.defineProperty(Resizable.prototype, "window", {
65185          get: function () {
65186              if (!this.resizable) {
65187                  return null;
65188              }
65189              if (!this.resizable.ownerDocument) {
65190                  return null;
65191              }
65192              return this.resizable.ownerDocument.defaultView;
65193          },
65194          enumerable: false,
65195          configurable: true
65196      });
65197      Object.defineProperty(Resizable.prototype, "propsSize", {
65198          get: function () {
65199              return this.props.size || this.props.defaultSize || DEFAULT_SIZE;
65200          },
65201          enumerable: false,
65202          configurable: true
65203      });
65204      Object.defineProperty(Resizable.prototype, "size", {
65205          get: function () {
65206              var width = 0;
65207              var height = 0;
65208              if (this.resizable && this.window) {
65209                  var orgWidth = this.resizable.offsetWidth;
65210                  var orgHeight = this.resizable.offsetHeight;
65211                  // HACK: Set position `relative` to get parent size.
65212                  //       This is because when re-resizable set `absolute`, I can not get base width correctly.
65213                  var orgPosition = this.resizable.style.position;
65214                  if (orgPosition !== 'relative') {
65215                      this.resizable.style.position = 'relative';
65216                  }
65217                  // INFO: Use original width or height if set auto.
65218                  width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;
65219                  height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;
65220                  // Restore original position
65221                  this.resizable.style.position = orgPosition;
65222              }
65223              return { width: width, height: height };
65224          },
65225          enumerable: false,
65226          configurable: true
65227      });
65228      Object.defineProperty(Resizable.prototype, "sizeStyle", {
65229          get: function () {
65230              var _this = this;
65231              var size = this.props.size;
65232              var getSize = function (key) {
65233                  if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') {
65234                      return 'auto';
65235                  }
65236                  if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) {
65237                      if (_this.state[key].toString().endsWith('%')) {
65238                          return _this.state[key].toString();
65239                      }
65240                      var parentSize = _this.getParentSize();
65241                      var value = Number(_this.state[key].toString().replace('px', ''));
65242                      var percent = (value / parentSize[key]) * 100;
65243                      return percent + "%";
65244                  }
65245                  return getStringSize(_this.state[key]);
65246              };
65247              var width = size && typeof size.width !== 'undefined' && !this.state.isResizing
65248                  ? getStringSize(size.width)
65249                  : getSize('width');
65250              var height = size && typeof size.height !== 'undefined' && !this.state.isResizing
65251                  ? getStringSize(size.height)
65252                  : getSize('height');
65253              return { width: width, height: height };
65254          },
65255          enumerable: false,
65256          configurable: true
65257      });
65258      Resizable.prototype.getParentSize = function () {
65259          if (!this.parentNode) {
65260              if (!this.window) {
65261                  return { width: 0, height: 0 };
65262              }
65263              return { width: this.window.innerWidth, height: this.window.innerHeight };
65264          }
65265          var base = this.appendBase();
65266          if (!base) {
65267              return { width: 0, height: 0 };
65268          }
65269          // INFO: To calculate parent width with flex layout
65270          var wrapChanged = false;
65271          var wrap = this.parentNode.style.flexWrap;
65272          if (wrap !== 'wrap') {
65273              wrapChanged = true;
65274              this.parentNode.style.flexWrap = 'wrap';
65275              // HACK: Use relative to get parent padding size
65276          }
65277          base.style.position = 'relative';
65278          base.style.minWidth = '100%';
65279          base.style.minHeight = '100%';
65280          var size = {
65281              width: base.offsetWidth,
65282              height: base.offsetHeight,
65283          };
65284          if (wrapChanged) {
65285              this.parentNode.style.flexWrap = wrap;
65286          }
65287          this.removeBase(base);
65288          return size;
65289      };
65290      Resizable.prototype.bindEvents = function () {
65291          if (this.window) {
65292              this.window.addEventListener('mouseup', this.onMouseUp);
65293              this.window.addEventListener('mousemove', this.onMouseMove);
65294              this.window.addEventListener('mouseleave', this.onMouseUp);
65295              this.window.addEventListener('touchmove', this.onMouseMove, {
65296                  capture: true,
65297                  passive: false,
65298              });
65299              this.window.addEventListener('touchend', this.onMouseUp);
65300          }
65301      };
65302      Resizable.prototype.unbindEvents = function () {
65303          if (this.window) {
65304              this.window.removeEventListener('mouseup', this.onMouseUp);
65305              this.window.removeEventListener('mousemove', this.onMouseMove);
65306              this.window.removeEventListener('mouseleave', this.onMouseUp);
65307              this.window.removeEventListener('touchmove', this.onMouseMove, true);
65308              this.window.removeEventListener('touchend', this.onMouseUp);
65309          }
65310      };
65311      Resizable.prototype.componentDidMount = function () {
65312          if (!this.resizable || !this.window) {
65313              return;
65314          }
65315          var computedStyle = this.window.getComputedStyle(this.resizable);
65316          this.setState({
65317              width: this.state.width || this.size.width,
65318              height: this.state.height || this.size.height,
65319              flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined,
65320          });
65321      };
65322      Resizable.prototype.componentWillUnmount = function () {
65323          if (this.window) {
65324              this.unbindEvents();
65325          }
65326      };
65327      Resizable.prototype.createSizeForCssProperty = function (newSize, kind) {
65328          var propsSize = this.propsSize && this.propsSize[kind];
65329          return this.state[kind] === 'auto' &&
65330              this.state.original[kind] === newSize &&
65331              (typeof propsSize === 'undefined' || propsSize === 'auto')
65332              ? 'auto'
65333              : newSize;
65334      };
65335      Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
65336          var boundsByDirection = this.props.boundsByDirection;
65337          var direction = this.state.direction;
65338          var widthByDirection = boundsByDirection && hasDirection('left', direction);
65339          var heightByDirection = boundsByDirection && hasDirection('top', direction);
65340          var boundWidth;
65341          var boundHeight;
65342          if (this.props.bounds === 'parent') {
65343              var parent_1 = this.parentNode;
65344              if (parent_1) {
65345                  boundWidth = widthByDirection
65346                      ? this.resizableRight - this.parentLeft
65347                      : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
65348                  boundHeight = heightByDirection
65349                      ? this.resizableBottom - this.parentTop
65350                      : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
65351              }
65352          }
65353          else if (this.props.bounds === 'window') {
65354              if (this.window) {
65355                  boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
65356                  boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
65357              }
65358          }
65359          else if (this.props.bounds) {
65360              boundWidth = widthByDirection
65361                  ? this.resizableRight - this.targetLeft
65362                  : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
65363              boundHeight = heightByDirection
65364                  ? this.resizableBottom - this.targetTop
65365                  : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
65366          }
65367          if (boundWidth && Number.isFinite(boundWidth)) {
65368              maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
65369          }
65370          if (boundHeight && Number.isFinite(boundHeight)) {
65371              maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
65372          }
65373          return { maxWidth: maxWidth, maxHeight: maxHeight };
65374      };
65375      Resizable.prototype.calculateNewSizeFromDirection = function (clientX, clientY) {
65376          var scale = this.props.scale || 1;
65377          var resizeRatio = this.props.resizeRatio || 1;
65378          var _a = this.state, direction = _a.direction, original = _a.original;
65379          var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
65380          var newWidth = original.width;
65381          var newHeight = original.height;
65382          var extraHeight = lockAspectRatioExtraHeight || 0;
65383          var extraWidth = lockAspectRatioExtraWidth || 0;
65384          if (hasDirection('right', direction)) {
65385              newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
65386              if (lockAspectRatio) {
65387                  newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
65388              }
65389          }
65390          if (hasDirection('left', direction)) {
65391              newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
65392              if (lockAspectRatio) {
65393                  newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
65394              }
65395          }
65396          if (hasDirection('bottom', direction)) {
65397              newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
65398              if (lockAspectRatio) {
65399                  newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
65400              }
65401          }
65402          if (hasDirection('top', direction)) {
65403              newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
65404              if (lockAspectRatio) {
65405                  newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
65406              }
65407          }
65408          return { newWidth: newWidth, newHeight: newHeight };
65409      };
65410      Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) {
65411          var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth;
65412          var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width;
65413          var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;
65414          var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height;
65415          var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;
65416          var extraHeight = lockAspectRatioExtraHeight || 0;
65417          var extraWidth = lockAspectRatioExtraWidth || 0;
65418          if (lockAspectRatio) {
65419              var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth;
65420              var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth;
65421              var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight;
65422              var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight;
65423              var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
65424              var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
65425              var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
65426              var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
65427              newWidth = lib_clamp(newWidth, lockedMinWidth, lockedMaxWidth);
65428              newHeight = lib_clamp(newHeight, lockedMinHeight, lockedMaxHeight);
65429          }
65430          else {
65431              newWidth = lib_clamp(newWidth, computedMinWidth, computedMaxWidth);
65432              newHeight = lib_clamp(newHeight, computedMinHeight, computedMaxHeight);
65433          }
65434          return { newWidth: newWidth, newHeight: newHeight };
65435      };
65436      Resizable.prototype.setBoundingClientRect = function () {
65437          // For parent boundary
65438          if (this.props.bounds === 'parent') {
65439              var parent_2 = this.parentNode;
65440              if (parent_2) {
65441                  var parentRect = parent_2.getBoundingClientRect();
65442                  this.parentLeft = parentRect.left;
65443                  this.parentTop = parentRect.top;
65444              }
65445          }
65446          // For target(html element) boundary
65447          if (this.props.bounds && typeof this.props.bounds !== 'string') {
65448              var targetRect = this.props.bounds.getBoundingClientRect();
65449              this.targetLeft = targetRect.left;
65450              this.targetTop = targetRect.top;
65451          }
65452          // For boundary
65453          if (this.resizable) {
65454              var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
65455              this.resizableLeft = left;
65456              this.resizableRight = right;
65457              this.resizableTop = top_1;
65458              this.resizableBottom = bottom;
65459          }
65460      };
65461      Resizable.prototype.onResizeStart = function (event, direction) {
65462          if (!this.resizable || !this.window) {
65463              return;
65464          }
65465          var clientX = 0;
65466          var clientY = 0;
65467          if (event.nativeEvent && isMouseEvent(event.nativeEvent)) {
65468              clientX = event.nativeEvent.clientX;
65469              clientY = event.nativeEvent.clientY;
65470          }
65471          else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) {
65472              clientX = event.nativeEvent.touches[0].clientX;
65473              clientY = event.nativeEvent.touches[0].clientY;
65474          }
65475          if (this.props.onResizeStart) {
65476              if (this.resizable) {
65477                  var startResize = this.props.onResizeStart(event, direction, this.resizable);
65478                  if (startResize === false) {
65479                      return;
65480                  }
65481              }
65482          }
65483          // Fix #168
65484          if (this.props.size) {
65485              if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {
65486                  this.setState({ height: this.props.size.height });
65487              }
65488              if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {
65489                  this.setState({ width: this.props.size.width });
65490              }
65491          }
65492          // For lockAspectRatio case
65493          this.ratio =
65494              typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height;
65495          var flexBasis;
65496          var computedStyle = this.window.getComputedStyle(this.resizable);
65497          if (computedStyle.flexBasis !== 'auto') {
65498              var parent_3 = this.parentNode;
65499              if (parent_3) {
65500                  var dir = this.window.getComputedStyle(parent_3).flexDirection;
65501                  this.flexDir = dir.startsWith('row') ? 'row' : 'column';
65502                  flexBasis = computedStyle.flexBasis;
65503              }
65504          }
65505          // For boundary
65506          this.setBoundingClientRect();
65507          this.bindEvents();
65508          var state = {
65509              original: {
65510                  x: clientX,
65511                  y: clientY,
65512                  width: this.size.width,
65513                  height: this.size.height,
65514              },
65515              isResizing: true,
65516              backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }),
65517              direction: direction,
65518              flexBasis: flexBasis,
65519          };
65520          this.setState(state);
65521      };
65522      Resizable.prototype.onMouseMove = function (event) {
65523          var _this = this;
65524          if (!this.state.isResizing || !this.resizable || !this.window) {
65525              return;
65526          }
65527          if (this.window.TouchEvent && isTouchEvent(event)) {
65528              try {
65529                  event.preventDefault();
65530                  event.stopPropagation();
65531              }
65532              catch (e) {
65533                  // Ignore on fail
65534              }
65535          }
65536          var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight;
65537          var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX;
65538          var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY;
65539          var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height;
65540          var parentSize = this.getParentSize();
65541          var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight);
65542          maxWidth = max.maxWidth;
65543          maxHeight = max.maxHeight;
65544          minWidth = max.minWidth;
65545          minHeight = max.minHeight;
65546          // Calculate new size
65547          var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth;
65548          // Calculate max size from boundary settings
65549          var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);
65550          if (this.props.snap && this.props.snap.x) {
65551              newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);
65552          }
65553          if (this.props.snap && this.props.snap.y) {
65554              newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);
65555          }
65556          // Calculate new size from aspect ratio
65557          var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight });
65558          newWidth = newSize.newWidth;
65559          newHeight = newSize.newHeight;
65560          if (this.props.grid) {
65561              var newGridWidth = snap(newWidth, this.props.grid[0]);
65562              var newGridHeight = snap(newHeight, this.props.grid[1]);
65563              var gap = this.props.snapGap || 0;
65564              newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
65565              newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
65566          }
65567          var delta = {
65568              width: newWidth - original.width,
65569              height: newHeight - original.height,
65570          };
65571          if (width && typeof width === 'string') {
65572              if (width.endsWith('%')) {
65573                  var percent = (newWidth / parentSize.width) * 100;
65574                  newWidth = percent + "%";
65575              }
65576              else if (width.endsWith('vw')) {
65577                  var vw = (newWidth / this.window.innerWidth) * 100;
65578                  newWidth = vw + "vw";
65579              }
65580              else if (width.endsWith('vh')) {
65581                  var vh = (newWidth / this.window.innerHeight) * 100;
65582                  newWidth = vh + "vh";
65583              }
65584          }
65585          if (height && typeof height === 'string') {
65586              if (height.endsWith('%')) {
65587                  var percent = (newHeight / parentSize.height) * 100;
65588                  newHeight = percent + "%";
65589              }
65590              else if (height.endsWith('vw')) {
65591                  var vw = (newHeight / this.window.innerWidth) * 100;
65592                  newHeight = vw + "vw";
65593              }
65594              else if (height.endsWith('vh')) {
65595                  var vh = (newHeight / this.window.innerHeight) * 100;
65596                  newHeight = vh + "vh";
65597              }
65598          }
65599          var newState = {
65600              width: this.createSizeForCssProperty(newWidth, 'width'),
65601              height: this.createSizeForCssProperty(newHeight, 'height'),
65602          };
65603          if (this.flexDir === 'row') {
65604              newState.flexBasis = newState.width;
65605          }
65606          else if (this.flexDir === 'column') {
65607              newState.flexBasis = newState.height;
65608          }
65609          // For v18, update state sync
65610          (0,external_ReactDOM_namespaceObject.flushSync)(function () {
65611              _this.setState(newState);
65612          });
65613          if (this.props.onResize) {
65614              this.props.onResize(event, direction, this.resizable, delta);
65615          }
65616      };
65617      Resizable.prototype.onMouseUp = function (event) {
65618          var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original;
65619          if (!isResizing || !this.resizable) {
65620              return;
65621          }
65622          var delta = {
65623              width: this.size.width - original.width,
65624              height: this.size.height - original.height,
65625          };
65626          if (this.props.onResizeStop) {
65627              this.props.onResizeStop(event, direction, this.resizable, delta);
65628          }
65629          if (this.props.size) {
65630              this.setState(this.props.size);
65631          }
65632          this.unbindEvents();
65633          this.setState({
65634              isResizing: false,
65635              backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: 'auto' }),
65636          });
65637      };
65638      Resizable.prototype.updateSize = function (size) {
65639          this.setState({ width: size.width, height: size.height });
65640      };
65641      Resizable.prototype.renderResizer = function () {
65642          var _this = this;
65643          var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
65644          if (!enable) {
65645              return null;
65646          }
65647          var resizers = Object.keys(enable).map(function (dir) {
65648              if (enable[dir] !== false) {
65649                  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));
65650              }
65651              return null;
65652          });
65653          // #93 Wrap the resize box in span (will not break 100% width/height)
65654          return (external_React_.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers));
65655      };
65656      Resizable.prototype.render = function () {
65657          var _this = this;
65658          var extendsProps = Object.keys(this.props).reduce(function (acc, key) {
65659              if (definedProps.indexOf(key) !== -1) {
65660                  return acc;
65661              }
65662              acc[key] = _this.props[key];
65663              return acc;
65664          }, {});
65665          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 });
65666          if (this.state.flexBasis) {
65667              style.flexBasis = this.state.flexBasis;
65668          }
65669          var Wrapper = this.props.as || 'div';
65670          return (external_React_.createElement(Wrapper, lib_assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps),
65671              this.state.isResizing && external_React_.createElement("div", { style: this.state.backgroundStyle }),
65672              this.props.children,
65673              this.renderResizer()));
65674      };
65675      Resizable.defaultProps = {
65676          as: 'div',
65677          onResizeStart: function () { },
65678          onResize: function () { },
65679          onResizeStop: function () { },
65680          enable: {
65681              top: true,
65682              right: true,
65683              bottom: true,
65684              left: true,
65685              topRight: true,
65686              bottomRight: true,
65687              bottomLeft: true,
65688              topLeft: true,
65689          },
65690          style: {},
65691          grid: [1, 1],
65692          lockAspectRatio: false,
65693          lockAspectRatioExtraWidth: 0,
65694          lockAspectRatioExtraHeight: 0,
65695          scale: 1,
65696          resizeRatio: 1,
65697          snapGap: 0,
65698      };
65699      return Resizable;
65700  }(external_React_.PureComponent));
65701  
65702  
65703  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js
65704  /**
65705   * WordPress dependencies
65706   */
65707  
65708  
65709  const utils_noop = () => {};
65710  const POSITIONS = {
65711    bottom: 'bottom',
65712    corner: 'corner'
65713  };
65714  /**
65715   * Custom hook that manages resize listener events. It also provides a label
65716   * based on current resize width x height values.
65717   *
65718   * @param props
65719   * @param props.axis        Only shows the label corresponding to the axis.
65720   * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
65721   * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
65722   * @param props.position    Adjusts label value.
65723   * @param props.showPx      Whether to add `PX` to the label.
65724   *
65725   * @return Properties for hook.
65726   */
65727  function useResizeLabel({
65728    axis,
65729    fadeTimeout = 180,
65730    onResize = utils_noop,
65731    position = POSITIONS.bottom,
65732    showPx = false
65733  }) {
65734    /*
65735     * The width/height values derive from this special useResizeObserver hook.
65736     * This custom hook uses the ResizeObserver API to listen for resize events.
65737     */
65738    const [resizeListener, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)();
65739  
65740    /*
65741     * Indicates if the x/y axis is preferred.
65742     * If set, we will avoid resetting the moveX and moveY values.
65743     * This will allow for the preferred axis values to persist in the label.
65744     */
65745    const isAxisControlled = !!axis;
65746  
65747    /*
65748     * The moveX and moveY values are used to track whether the label should
65749     * display width, height, or width x height.
65750     */
65751    const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false);
65752    const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false);
65753  
65754    /*
65755     * Cached dimension values to check for width/height updates from the
65756     * sizes property from useResizeAware()
65757     */
65758    const {
65759      width,
65760      height
65761    } = sizes;
65762    const heightRef = (0,external_wp_element_namespaceObject.useRef)(height);
65763    const widthRef = (0,external_wp_element_namespaceObject.useRef)(width);
65764  
65765    /*
65766     * This timeout is used with setMoveX and setMoveY to determine of
65767     * both width and height values have changed at (roughly) the same time.
65768     */
65769    const moveTimeoutRef = (0,external_wp_element_namespaceObject.useRef)();
65770    const debounceUnsetMoveXY = (0,external_wp_element_namespaceObject.useCallback)(() => {
65771      const unsetMoveXY = () => {
65772        /*
65773         * If axis is controlled, we will avoid resetting the moveX and moveY values.
65774         * This will allow for the preferred axis values to persist in the label.
65775         */
65776        if (isAxisControlled) return;
65777        setMoveX(false);
65778        setMoveY(false);
65779      };
65780      if (moveTimeoutRef.current) {
65781        window.clearTimeout(moveTimeoutRef.current);
65782      }
65783      moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
65784    }, [fadeTimeout, isAxisControlled]);
65785    (0,external_wp_element_namespaceObject.useEffect)(() => {
65786      /*
65787       * On the initial render of useResizeAware, the height and width values are
65788       * null. They are calculated then set using via an internal useEffect hook.
65789       */
65790      const isRendered = width !== null || height !== null;
65791      if (!isRendered) return;
65792      const didWidthChange = width !== widthRef.current;
65793      const didHeightChange = height !== heightRef.current;
65794      if (!didWidthChange && !didHeightChange) return;
65795  
65796      /*
65797       * After the initial render, the useResizeAware will set the first
65798       * width and height values. We'll sync those values with our
65799       * width and height refs. However, we shouldn't render our Tooltip
65800       * label on this first cycle.
65801       */
65802      if (width && !widthRef.current && height && !heightRef.current) {
65803        widthRef.current = width;
65804        heightRef.current = height;
65805        return;
65806      }
65807  
65808      /*
65809       * After the first cycle, we can track width and height changes.
65810       */
65811      if (didWidthChange) {
65812        setMoveX(true);
65813        widthRef.current = width;
65814      }
65815      if (didHeightChange) {
65816        setMoveY(true);
65817        heightRef.current = height;
65818      }
65819      onResize({
65820        width,
65821        height
65822      });
65823      debounceUnsetMoveXY();
65824    }, [width, height, onResize, debounceUnsetMoveXY]);
65825    const label = getSizeLabel({
65826      axis,
65827      height,
65828      moveX,
65829      moveY,
65830      position,
65831      showPx,
65832      width
65833    });
65834    return {
65835      label,
65836      resizeListener
65837    };
65838  }
65839  /**
65840   * Gets the resize label based on width and height values (as well as recent changes).
65841   *
65842   * @param props
65843   * @param props.axis     Only shows the label corresponding to the axis.
65844   * @param props.height   Height value.
65845   * @param props.moveX    Recent width (x axis) changes.
65846   * @param props.moveY    Recent width (y axis) changes.
65847   * @param props.position Adjusts label value.
65848   * @param props.showPx   Whether to add `PX` to the label.
65849   * @param props.width    Width value.
65850   *
65851   * @return The rendered label.
65852   */
65853  function getSizeLabel({
65854    axis,
65855    height,
65856    moveX = false,
65857    moveY = false,
65858    position = POSITIONS.bottom,
65859    showPx = false,
65860    width
65861  }) {
65862    if (!moveX && !moveY) return undefined;
65863  
65864    /*
65865     * Corner position...
65866     * We want the label to appear like width x height.
65867     */
65868    if (position === POSITIONS.corner) {
65869      return `$width} x $height}`;
65870    }
65871  
65872    /*
65873     * Other POSITIONS...
65874     * The label will combine both width x height values if both
65875     * values have recently been changed.
65876     *
65877     * Otherwise, only width or height will be displayed.
65878     * The `PX` unit will be added, if specified by the `showPx` prop.
65879     */
65880    const labelUnit = showPx ? ' px' : '';
65881    if (axis) {
65882      if (axis === 'x' && moveX) {
65883        return `$width}$labelUnit}`;
65884      }
65885      if (axis === 'y' && moveY) {
65886        return `$height}$labelUnit}`;
65887      }
65888    }
65889    if (moveX && moveY) {
65890      return `$width} x $height}`;
65891    }
65892    if (moveX) {
65893      return `$width}$labelUnit}`;
65894    }
65895    if (moveY) {
65896      return `$height}$labelUnit}`;
65897    }
65898    return undefined;
65899  }
65900  
65901  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
65902  
65903  function 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)."; }
65904  /**
65905   * External dependencies
65906   */
65907  
65908  /**
65909   * Internal dependencies
65910   */
65911  
65912  
65913  const resize_tooltip_styles_Root = emotion_styled_base_browser_esm("div",  true ? {
65914    target: "e1wq7y4k3"
65915  } : 0)( true ? {
65916    name: "1cd7zoc",
65917    styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0"
65918  } : 0);
65919  const TooltipWrapper = emotion_styled_base_browser_esm("div",  true ? {
65920    target: "e1wq7y4k2"
65921  } : 0)( true ? {
65922    name: "ajymcs",
65923    styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear"
65924  } : 0);
65925  const resize_tooltip_styles_Tooltip = emotion_styled_base_browser_esm("div",  true ? {
65926    target: "e1wq7y4k1"
65927  } : 0)("background:", COLORS.theme.foreground, ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0));
65928  
65929  // TODO: Resolve need to use &&& to increase specificity
65930  // https://github.com/WordPress/gutenberg/issues/18483
65931  
65932  const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component,  true ? {
65933    target: "e1wq7y4k0"
65934  } : 0)("&&&{color:", COLORS.theme.foregroundInverted, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0));
65935  
65936  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js
65937  
65938  /**
65939   * External dependencies
65940   */
65941  
65942  /**
65943   * WordPress dependencies
65944   */
65945  
65946  
65947  
65948  /**
65949   * Internal dependencies
65950   */
65951  
65952  
65953  
65954  const CORNER_OFFSET = 4;
65955  const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
65956  function resize_tooltip_label_Label({
65957    label,
65958    position = POSITIONS.corner,
65959    zIndex = 1000,
65960    ...props
65961  }, ref) {
65962    const showLabel = !!label;
65963    const isBottom = position === POSITIONS.bottom;
65964    const isCorner = position === POSITIONS.corner;
65965    if (!showLabel) return null;
65966    let style = {
65967      opacity: showLabel ? 1 : undefined,
65968      zIndex
65969    };
65970    let labelStyle = {};
65971    if (isBottom) {
65972      style = {
65973        ...style,
65974        position: 'absolute',
65975        bottom: CURSOR_OFFSET_TOP * -1,
65976        left: '50%',
65977        transform: 'translate(-50%, 0)'
65978      };
65979      labelStyle = {
65980        transform: `translate(0, 100%)`
65981      };
65982    }
65983    if (isCorner) {
65984      style = {
65985        ...style,
65986        position: 'absolute',
65987        top: CORNER_OFFSET,
65988        right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET,
65989        left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined
65990      };
65991    }
65992    return (0,external_React_.createElement)(TooltipWrapper, {
65993      "aria-hidden": "true",
65994      className: "components-resizable-tooltip__tooltip-wrapper",
65995      ref: ref,
65996      style: style,
65997      ...props
65998    }, (0,external_React_.createElement)(resize_tooltip_styles_Tooltip, {
65999      className: "components-resizable-tooltip__tooltip",
66000      style: labelStyle
66001    }, (0,external_React_.createElement)(LabelText, {
66002      as: "span"
66003    }, label)));
66004  }
66005  const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label);
66006  /* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent);
66007  
66008  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js
66009  
66010  /**
66011   * External dependencies
66012   */
66013  
66014  /**
66015   * WordPress dependencies
66016   */
66017  
66018  
66019  /**
66020   * Internal dependencies
66021   */
66022  
66023  
66024  
66025  const resize_tooltip_noop = () => {};
66026  function ResizeTooltip({
66027    axis,
66028    className,
66029    fadeTimeout = 180,
66030    isVisible = true,
66031    labelRef,
66032    onResize = resize_tooltip_noop,
66033    position = POSITIONS.bottom,
66034    showPx = true,
66035    zIndex = 1000,
66036    ...props
66037  }, ref) {
66038    const {
66039      label,
66040      resizeListener
66041    } = useResizeLabel({
66042      axis,
66043      fadeTimeout,
66044      onResize,
66045      showPx,
66046      position
66047    });
66048    if (!isVisible) return null;
66049    const classes = classnames_default()('components-resize-tooltip', className);
66050    return (0,external_React_.createElement)(resize_tooltip_styles_Root, {
66051      "aria-hidden": "true",
66052      className: classes,
66053      ref: ref,
66054      ...props
66055    }, resizeListener, (0,external_React_.createElement)(resize_tooltip_label, {
66056      "aria-hidden": props['aria-hidden'],
66057      label: label,
66058      position: position,
66059      ref: labelRef,
66060      zIndex: zIndex
66061    }));
66062  }
66063  const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip);
66064  /* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent);
66065  
66066  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/index.js
66067  
66068  /**
66069   * WordPress dependencies
66070   */
66071  
66072  
66073  /**
66074   * External dependencies
66075   */
66076  
66077  
66078  /**
66079   * Internal dependencies
66080   */
66081  
66082  const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
66083  const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
66084  const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
66085  const HANDLE_CLASSES = {
66086    top: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
66087    right: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
66088    bottom: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
66089    left: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
66090    topLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
66091    topRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
66092    bottomRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
66093    bottomLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
66094  };
66095  
66096  // Removes the inline styles in the drag handles.
66097  const HANDLE_STYLES_OVERRIDES = {
66098    width: undefined,
66099    height: undefined,
66100    top: undefined,
66101    right: undefined,
66102    bottom: undefined,
66103    left: undefined
66104  };
66105  const HANDLE_STYLES = {
66106    top: HANDLE_STYLES_OVERRIDES,
66107    right: HANDLE_STYLES_OVERRIDES,
66108    bottom: HANDLE_STYLES_OVERRIDES,
66109    left: HANDLE_STYLES_OVERRIDES,
66110    topLeft: HANDLE_STYLES_OVERRIDES,
66111    topRight: HANDLE_STYLES_OVERRIDES,
66112    bottomRight: HANDLE_STYLES_OVERRIDES,
66113    bottomLeft: HANDLE_STYLES_OVERRIDES
66114  };
66115  function UnforwardedResizableBox({
66116    className,
66117    children,
66118    showHandle = true,
66119    __experimentalShowTooltip: showTooltip = false,
66120    __experimentalTooltipProps: tooltipProps = {},
66121    ...props
66122  }, ref) {
66123    return (0,external_React_.createElement)(Resizable, {
66124      className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className),
66125      handleClasses: HANDLE_CLASSES,
66126      handleStyles: HANDLE_STYLES,
66127      ref: ref,
66128      ...props
66129    }, children, showTooltip && (0,external_React_.createElement)(resize_tooltip, {
66130      ...tooltipProps
66131    }));
66132  }
66133  const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox);
66134  /* harmony default export */ const resizable_box = (ResizableBox);
66135  
66136  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js
66137  
66138  /**
66139   * External dependencies
66140   */
66141  
66142  
66143  /**
66144   * WordPress dependencies
66145   */
66146  
66147  
66148  /**
66149   * Internal dependencies
66150   */
66151  
66152  /**
66153   * A wrapper component that maintains its aspect ratio when resized.
66154   *
66155   * ```jsx
66156   * import { ResponsiveWrapper } from '@wordpress/components';
66157   *
66158   * const MyResponsiveWrapper = () => (
66159   *     <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
66160   *         <img
66161   *             src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
66162   *             alt="WordPress"
66163   *         />
66164   *     </ResponsiveWrapper>
66165   * );
66166   * ```
66167   */
66168  function ResponsiveWrapper({
66169    naturalWidth,
66170    naturalHeight,
66171    children,
66172    isInline = false
66173  }) {
66174    if (external_wp_element_namespaceObject.Children.count(children) !== 1) {
66175      return null;
66176    }
66177    const TagName = isInline ? 'span' : 'div';
66178    let aspectRatio;
66179    if (naturalWidth && naturalHeight) {
66180      aspectRatio = `$naturalWidth} / $naturalHeight}`;
66181    }
66182    return (0,external_React_.createElement)(TagName, {
66183      className: "components-responsive-wrapper"
66184    }, (0,external_React_.createElement)("div", null, (0,external_wp_element_namespaceObject.cloneElement)(children, {
66185      className: classnames_default()('components-responsive-wrapper__content', children.props.className),
66186      style: {
66187        ...children.props.style,
66188        aspectRatio
66189      }
66190    })));
66191  }
66192  /* harmony default export */ const responsive_wrapper = (ResponsiveWrapper);
66193  
66194  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/sandbox/index.js
66195  
66196  /**
66197   * WordPress dependencies
66198   */
66199  
66200  
66201  
66202  /**
66203   * Internal dependencies
66204   */
66205  
66206  const observeAndResizeJS = function () {
66207    const {
66208      MutationObserver
66209    } = window;
66210    if (!MutationObserver || !document.body || !window.parent) {
66211      return;
66212    }
66213    function sendResize() {
66214      const clientBoundingRect = document.body.getBoundingClientRect();
66215      window.parent.postMessage({
66216        action: 'resize',
66217        width: clientBoundingRect.width,
66218        height: clientBoundingRect.height
66219      }, '*');
66220    }
66221    const observer = new MutationObserver(sendResize);
66222    observer.observe(document.body, {
66223      attributes: true,
66224      attributeOldValue: false,
66225      characterData: true,
66226      characterDataOldValue: false,
66227      childList: true,
66228      subtree: true
66229    });
66230    window.addEventListener('load', sendResize, true);
66231  
66232    // Hack: Remove viewport unit styles, as these are relative
66233    // the iframe root and interfere with our mechanism for
66234    // determining the unconstrained page bounds.
66235    function removeViewportStyles(ruleOrNode) {
66236      if (ruleOrNode.style) {
66237        ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {
66238          if (/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(ruleOrNode.style[style])) {
66239            ruleOrNode.style[style] = '';
66240          }
66241        });
66242      }
66243    }
66244    Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);
66245    Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {
66246      Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles);
66247    });
66248    document.body.style.position = 'absolute';
66249    document.body.style.width = '100%';
66250    document.body.setAttribute('data-resizable-iframe-connected', '');
66251    sendResize();
66252  
66253    // Resize events can change the width of elements with 100% width, but we don't
66254    // get an DOM mutations for that, so do the resize when the window is resized, too.
66255    window.addEventListener('resize', sendResize, true);
66256  };
66257  
66258  // TODO: These styles shouldn't be coupled with WordPress.
66259  const style = `
66260      body {
66261          margin: 0;
66262      }
66263      html,
66264      body,
66265      body > div {
66266          width: 100%;
66267      }
66268      html.wp-has-aspect-ratio,
66269      body.wp-has-aspect-ratio,
66270      body.wp-has-aspect-ratio > div,
66271      body.wp-has-aspect-ratio > div iframe {
66272          width: 100%;
66273          height: 100%;
66274          overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
66275      }
66276      body > div > * {
66277          margin-top: 0 !important; /* Has to have !important to override inline styles. */
66278          margin-bottom: 0 !important;
66279      }
66280  `;
66281  
66282  /**
66283   * This component provides an isolated environment for arbitrary HTML via iframes.
66284   *
66285   * ```jsx
66286   * import { SandBox } from '@wordpress/components';
66287   *
66288   * const MySandBox = () => (
66289   *     <SandBox html="<p>Content</p>" title="SandBox" type="embed" />
66290   * );
66291   * ```
66292   */
66293  function SandBox({
66294    html = '',
66295    title = '',
66296    type,
66297    styles = [],
66298    scripts = [],
66299    onFocus,
66300    tabIndex
66301  }) {
66302    const ref = (0,external_wp_element_namespaceObject.useRef)();
66303    const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0);
66304    const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(0);
66305    function isFrameAccessible() {
66306      try {
66307        return !!ref.current?.contentDocument?.body;
66308      } catch (e) {
66309        return false;
66310      }
66311    }
66312    function trySandBox(forceRerender = false) {
66313      if (!isFrameAccessible()) {
66314        return;
66315      }
66316      const {
66317        contentDocument,
66318        ownerDocument
66319      } = ref.current;
66320      if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {
66321        return;
66322      }
66323  
66324      // Put the html snippet into a html document, and then write it to the iframe's document
66325      // we can use this in the future to inject custom styles or scripts.
66326      // Scripts go into the body rather than the head, to support embedded content such as Instagram
66327      // that expect the scripts to be part of the body.
66328      const htmlDoc = (0,external_React_.createElement)("html", {
66329        lang: ownerDocument.documentElement.lang,
66330        className: type
66331      }, (0,external_React_.createElement)("head", null, (0,external_React_.createElement)("title", null, title), (0,external_React_.createElement)("style", {
66332        dangerouslySetInnerHTML: {
66333          __html: style
66334        }
66335      }), styles.map((rules, i) => (0,external_React_.createElement)("style", {
66336        key: i,
66337        dangerouslySetInnerHTML: {
66338          __html: rules
66339        }
66340      }))), (0,external_React_.createElement)("body", {
66341        "data-resizable-iframe-connected": "data-resizable-iframe-connected",
66342        className: type
66343      }, (0,external_React_.createElement)("div", {
66344        dangerouslySetInnerHTML: {
66345          __html: html
66346        }
66347      }), (0,external_React_.createElement)("script", {
66348        type: "text/javascript",
66349        dangerouslySetInnerHTML: {
66350          __html: `($observeAndResizeJS.toString()})();`
66351        }
66352      }), scripts.map(src => (0,external_React_.createElement)("script", {
66353        key: src,
66354        src: src
66355      }))));
66356  
66357      // Writing the document like this makes it act in the same way as if it was
66358      // loaded over the network, so DOM creation and mutation, script execution, etc.
66359      // all work as expected.
66360      contentDocument.open();
66361      contentDocument.write('<!DOCTYPE html>' + (0,external_wp_element_namespaceObject.renderToString)(htmlDoc));
66362      contentDocument.close();
66363    }
66364    (0,external_wp_element_namespaceObject.useEffect)(() => {
66365      trySandBox();
66366      function tryNoForceSandBox() {
66367        trySandBox(false);
66368      }
66369      function checkMessageForResize(event) {
66370        const iframe = ref.current;
66371  
66372        // Verify that the mounted element is the source of the message.
66373        if (!iframe || iframe.contentWindow !== event.source) {
66374          return;
66375        }
66376  
66377        // Attempt to parse the message data as JSON if passed as string.
66378        let data = event.data || {};
66379        if ('string' === typeof data) {
66380          try {
66381            data = JSON.parse(data);
66382          } catch (e) {}
66383        }
66384  
66385        // Update the state only if the message is formatted as we expect,
66386        // i.e. as an object with a 'resize' action.
66387        if ('resize' !== data.action) {
66388          return;
66389        }
66390        setWidth(data.width);
66391        setHeight(data.height);
66392      }
66393      const iframe = ref.current;
66394      const defaultView = iframe?.ownerDocument?.defaultView;
66395  
66396      // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
66397      // after reordering the containing block. See these two issues for more details:
66398      // https://github.com/WordPress/gutenberg/issues/6146
66399      // https://github.com/facebook/react/issues/18752
66400      iframe?.addEventListener('load', tryNoForceSandBox, false);
66401      defaultView?.addEventListener('message', checkMessageForResize);
66402      return () => {
66403        iframe?.removeEventListener('load', tryNoForceSandBox, false);
66404        defaultView?.removeEventListener('message', checkMessageForResize);
66405      };
66406      // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
66407      // See https://github.com/WordPress/gutenberg/pull/44378
66408      // eslint-disable-next-line react-hooks/exhaustive-deps
66409    }, []);
66410    (0,external_wp_element_namespaceObject.useEffect)(() => {
66411      trySandBox();
66412      // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
66413      // See https://github.com/WordPress/gutenberg/pull/44378
66414      // eslint-disable-next-line react-hooks/exhaustive-deps
66415    }, [title, styles, scripts]);
66416    (0,external_wp_element_namespaceObject.useEffect)(() => {
66417      trySandBox(true);
66418      // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
66419      // See https://github.com/WordPress/gutenberg/pull/44378
66420      // eslint-disable-next-line react-hooks/exhaustive-deps
66421    }, [html, type]);
66422    return (0,external_React_.createElement)("iframe", {
66423      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]),
66424      title: title,
66425      tabIndex: tabIndex,
66426      className: "components-sandbox",
66427      sandbox: "allow-scripts allow-same-origin allow-presentation",
66428      onFocus: onFocus,
66429      width: Math.ceil(width),
66430      height: Math.ceil(height)
66431    });
66432  }
66433  /* harmony default export */ const sandbox = (SandBox);
66434  
66435  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/index.js
66436  
66437  /**
66438   * External dependencies
66439   */
66440  
66441  
66442  
66443  /**
66444   * WordPress dependencies
66445   */
66446  
66447  
66448  
66449  
66450  
66451  /**
66452   * Internal dependencies
66453   */
66454  
66455  const NOTICE_TIMEOUT = 10000;
66456  
66457  /**
66458   * Custom hook which announces the message with the given politeness, if a
66459   * valid message is provided.
66460   *
66461   * @param message    Message to announce.
66462   * @param politeness Politeness to announce.
66463   */
66464  function snackbar_useSpokenMessage(message, politeness) {
66465    const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message);
66466    (0,external_wp_element_namespaceObject.useEffect)(() => {
66467      if (spokenMessage) {
66468        (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness);
66469      }
66470    }, [spokenMessage, politeness]);
66471  }
66472  function UnforwardedSnackbar({
66473    className,
66474    children,
66475    spokenMessage = children,
66476    politeness = 'polite',
66477    actions = [],
66478    onRemove,
66479    icon = null,
66480    explicitDismiss = false,
66481    // onDismiss is a callback executed when the snackbar is dismissed.
66482    // It is distinct from onRemove, which _looks_ like a callback but is
66483    // actually the function to call to remove the snackbar from the UI.
66484    onDismiss,
66485    listRef
66486  }, ref) {
66487    function dismissMe(event) {
66488      if (event && event.preventDefault) {
66489        event.preventDefault();
66490      }
66491  
66492      // Prevent focus loss by moving it to the list element.
66493      listRef?.current?.focus();
66494      onDismiss?.();
66495      onRemove?.();
66496    }
66497    function onActionClick(event, onClick) {
66498      event.stopPropagation();
66499      onRemove?.();
66500      if (onClick) {
66501        onClick(event);
66502      }
66503    }
66504    snackbar_useSpokenMessage(spokenMessage, politeness);
66505  
66506    // The `onDismiss/onRemove` can have unstable references,
66507    // trigger side-effect cleanup, and reset timers.
66508    const callbackRefs = (0,external_wp_element_namespaceObject.useRef)({
66509      onDismiss,
66510      onRemove
66511    });
66512    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
66513      callbackRefs.current = {
66514        onDismiss,
66515        onRemove
66516      };
66517    });
66518    (0,external_wp_element_namespaceObject.useEffect)(() => {
66519      // Only set up the timeout dismiss if we're not explicitly dismissing.
66520      const timeoutHandle = setTimeout(() => {
66521        if (!explicitDismiss) {
66522          callbackRefs.current.onDismiss?.();
66523          callbackRefs.current.onRemove?.();
66524        }
66525      }, NOTICE_TIMEOUT);
66526      return () => clearTimeout(timeoutHandle);
66527    }, [explicitDismiss]);
66528    const classes = classnames_default()(className, 'components-snackbar', {
66529      'components-snackbar-explicit-dismiss': !!explicitDismiss
66530    });
66531    if (actions && actions.length > 1) {
66532      // We need to inform developers that snackbar only accepts 1 action.
66533       true ? external_wp_warning_default()('Snackbar can only have one action. Use Notice if your message requires many actions.') : 0;
66534      // return first element only while keeping it inside an array
66535      actions = [actions[0]];
66536    }
66537    const snackbarContentClassnames = classnames_default()('components-snackbar__content', {
66538      'components-snackbar__content-with-icon': !!icon
66539    });
66540    return (0,external_React_.createElement)("div", {
66541      ref: ref,
66542      className: classes,
66543      onClick: !explicitDismiss ? dismissMe : undefined,
66544      tabIndex: 0,
66545      role: !explicitDismiss ? 'button' : '',
66546      onKeyPress: !explicitDismiss ? dismissMe : undefined,
66547      "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : ''
66548    }, (0,external_React_.createElement)("div", {
66549      className: snackbarContentClassnames
66550    }, icon && (0,external_React_.createElement)("div", {
66551      className: "components-snackbar__icon"
66552    }, icon), children, actions.map(({
66553      label,
66554      onClick,
66555      url
66556    }, index) => {
66557      return (0,external_React_.createElement)(build_module_button, {
66558        key: index,
66559        href: url,
66560        variant: "tertiary",
66561        onClick: event => onActionClick(event, onClick),
66562        className: "components-snackbar__action"
66563      }, label);
66564    }), explicitDismiss && (0,external_React_.createElement)("span", {
66565      role: "button",
66566      "aria-label": "Dismiss this notice",
66567      tabIndex: 0,
66568      className: "components-snackbar__dismiss-button",
66569      onClick: dismissMe,
66570      onKeyPress: dismissMe
66571    }, "\u2715")));
66572  }
66573  
66574  /**
66575   * A Snackbar displays a succinct message that is cleared out after a small delay.
66576   *
66577   * It can also offer the user options, like viewing a published post.
66578   * But these options should also be available elsewhere in the UI.
66579   *
66580   * ```jsx
66581   * const MySnackbarNotice = () => (
66582   *   <Snackbar>Post published successfully.</Snackbar>
66583   * );
66584   * ```
66585   */
66586  const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSnackbar);
66587  /* harmony default export */ const snackbar = (Snackbar);
66588  
66589  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/list.js
66590  
66591  /**
66592   * External dependencies
66593   */
66594  
66595  
66596  /**
66597   * WordPress dependencies
66598   */
66599  
66600  
66601  
66602  /**
66603   * Internal dependencies
66604   */
66605  
66606  
66607  const SNACKBAR_VARIANTS = {
66608    init: {
66609      height: 0,
66610      opacity: 0
66611    },
66612    open: {
66613      height: 'auto',
66614      opacity: 1,
66615      transition: {
66616        height: {
66617          type: 'tween',
66618          duration: 0.3,
66619          ease: [0, 0, 0.2, 1]
66620        },
66621        opacity: {
66622          type: 'tween',
66623          duration: 0.25,
66624          delay: 0.05,
66625          ease: [0, 0, 0.2, 1]
66626        }
66627      }
66628    },
66629    exit: {
66630      opacity: 0,
66631      transition: {
66632        type: 'tween',
66633        duration: 0.1,
66634        ease: [0, 0, 0.2, 1]
66635      }
66636    }
66637  };
66638  
66639  /**
66640   * Renders a list of notices.
66641   *
66642   * ```jsx
66643   * const MySnackbarListNotice = () => (
66644   *   <SnackbarList
66645   *     notices={ notices }
66646   *     onRemove={ removeNotice }
66647   *   />
66648   * );
66649   * ```
66650   */
66651  function SnackbarList({
66652    notices,
66653    className,
66654    children,
66655    onRemove
66656  }) {
66657    const listRef = (0,external_wp_element_namespaceObject.useRef)(null);
66658    const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)();
66659    className = classnames_default()('components-snackbar-list', className);
66660    const removeNotice = notice => () => onRemove?.(notice.id);
66661    return (0,external_React_.createElement)("div", {
66662      className: className,
66663      tabIndex: -1,
66664      ref: listRef
66665    }, children, (0,external_React_.createElement)(AnimatePresence, null, notices.map(notice => {
66666      const {
66667        content,
66668        ...restNotice
66669      } = notice;
66670      return (0,external_React_.createElement)(motion.div, {
66671        layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations
66672        ,
66673        initial: 'init',
66674        animate: 'open',
66675        exit: 'exit',
66676        key: notice.id,
66677        variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
66678      }, (0,external_React_.createElement)("div", {
66679        className: "components-snackbar-list__notice-container"
66680      }, (0,external_React_.createElement)(snackbar, {
66681        ...restNotice,
66682        onRemove: removeNotice(notice),
66683        listRef: listRef
66684      }, notice.content)));
66685    })));
66686  }
66687  /* harmony default export */ const snackbar_list = (SnackbarList);
66688  
66689  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/styles.js
66690  
66691  function 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)."; }
66692  /**
66693   * External dependencies
66694   */
66695  
66696  
66697  
66698  /**
66699   * Internal dependencies
66700   */
66701  
66702  const spinAnimation = emotion_react_browser_esm_keyframes`
66703      from {
66704          transform: rotate(0deg);
66705      }
66706      to {
66707          transform: rotate(360deg);
66708      }
66709   `;
66710  const StyledSpinner = emotion_styled_base_browser_esm("svg",  true ? {
66711    target: "ea4tfvq2"
66712  } : 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));
66713  const commonPathProps =  true ? {
66714    name: "9s4963",
66715    styles: "fill:transparent;stroke-width:1.5px"
66716  } : 0;
66717  const SpinnerTrack = emotion_styled_base_browser_esm("circle",  true ? {
66718    target: "ea4tfvq1"
66719  } : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0));
66720  const SpinnerIndicator = emotion_styled_base_browser_esm("path",  true ? {
66721    target: "ea4tfvq0"
66722  } : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0));
66723  
66724  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/index.js
66725  
66726  /**
66727   * External dependencies
66728   */
66729  
66730  /**
66731   * Internal dependencies
66732   */
66733  
66734  /**
66735   * WordPress dependencies
66736   */
66737  
66738  function UnforwardedSpinner({
66739    className,
66740    ...props
66741  }, forwardedRef) {
66742    return (0,external_React_.createElement)(StyledSpinner, {
66743      className: classnames_default()('components-spinner', className),
66744      viewBox: "0 0 100 100",
66745      width: "16",
66746      height: "16",
66747      xmlns: "http://www.w3.org/2000/svg",
66748      role: "presentation",
66749      focusable: "false",
66750      ...props,
66751      ref: forwardedRef
66752    }, (0,external_React_.createElement)(SpinnerTrack, {
66753      cx: "50",
66754      cy: "50",
66755      r: "50",
66756      vectorEffect: "non-scaling-stroke"
66757    }), (0,external_React_.createElement)(SpinnerIndicator, {
66758      d: "m 50 0 a 50 50 0 0 1 50 50",
66759      vectorEffect: "non-scaling-stroke"
66760    }));
66761  }
66762  /**
66763   * `Spinner` is a component used to notify users that their action is being processed.
66764   *
66765   * ```js
66766   *   import { Spinner } from '@wordpress/components';
66767   *
66768   *   function Example() {
66769   *     return <Spinner />;
66770   *   }
66771   * ```
66772   */
66773  const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner);
66774  /* harmony default export */ const spinner = (Spinner);
66775  
66776  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/component.js
66777  
66778  /**
66779   * External dependencies
66780   */
66781  
66782  /**
66783   * Internal dependencies
66784   */
66785  
66786  
66787  
66788  function UnconnectedSurface(props, forwardedRef) {
66789    const surfaceProps = useSurface(props);
66790    return (0,external_React_.createElement)(component, {
66791      ...surfaceProps,
66792      ref: forwardedRef
66793    });
66794  }
66795  
66796  /**
66797   * `Surface` is a core component that renders a primary background color.
66798   *
66799   * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode).
66800   *
66801   * ```jsx
66802   * import {
66803   *    __experimentalSurface as Surface,
66804   *    __experimentalText as Text,
66805   * } from '@wordpress/components';
66806   *
66807   * function Example() {
66808   *     return (
66809   *         <Surface>
66810   *             <Text>Code is Poetry</Text>
66811   *         </Surface>
66812   *     );
66813   * }
66814   * ```
66815   */
66816  const component_Surface = contextConnect(UnconnectedSurface, 'Surface');
66817  /* harmony default export */ const surface_component = (component_Surface);
66818  
66819  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tab/tab-store.js
66820  "use client";
66821  
66822  
66823  
66824  
66825  
66826  
66827  
66828  
66829  // src/tab/tab-store.ts
66830  function createTabStore(props = {}) {
66831    var _a;
66832    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
66833    const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
66834      orientation: defaultValue(
66835        props.orientation,
66836        syncState == null ? void 0 : syncState.orientation,
66837        "horizontal"
66838      ),
66839      focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
66840    }));
66841    const panels = createCollectionStore();
66842    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), {
66843      selectedId: defaultValue(
66844        props.selectedId,
66845        syncState == null ? void 0 : syncState.selectedId,
66846        props.defaultSelectedId,
66847        void 0
66848      ),
66849      selectOnMove: defaultValue(
66850        props.selectOnMove,
66851        syncState == null ? void 0 : syncState.selectOnMove,
66852        true
66853      )
66854    });
66855    const tab = createStore(initialState, composite, props.store);
66856    setup(
66857      tab,
66858      () => sync(tab, ["moves"], () => {
66859        const { activeId, selectOnMove } = tab.getState();
66860        if (!selectOnMove)
66861          return;
66862        if (!activeId)
66863          return;
66864        const tabItem = composite.item(activeId);
66865        if (!tabItem)
66866          return;
66867        if (tabItem.dimmed)
66868          return;
66869        if (tabItem.disabled)
66870          return;
66871        tab.setState("selectedId", tabItem.id);
66872      })
66873    );
66874    setup(
66875      tab,
66876      () => batch(
66877        tab,
66878        ["selectedId"],
66879        (state) => tab.setState("activeId", state.selectedId)
66880      )
66881    );
66882    setup(
66883      tab,
66884      () => sync(tab, ["selectedId", "renderedItems"], (state) => {
66885        if (state.selectedId !== void 0)
66886          return;
66887        const { activeId, renderedItems } = tab.getState();
66888        const tabItem = composite.item(activeId);
66889        if (tabItem && !tabItem.disabled && !tabItem.dimmed) {
66890          tab.setState("selectedId", tabItem.id);
66891        } else {
66892          const tabItem2 = renderedItems.find(
66893            (item) => !item.disabled && !item.dimmed
66894          );
66895          tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id);
66896        }
66897      })
66898    );
66899    setup(
66900      tab,
66901      () => sync(tab, ["renderedItems"], (state) => {
66902        const tabs = state.renderedItems;
66903        if (!tabs.length)
66904          return;
66905        return sync(panels, ["renderedItems"], (state2) => {
66906          const items = state2.renderedItems;
66907          const hasOrphanPanels = items.some((panel) => !panel.tabId);
66908          if (!hasOrphanPanels)
66909            return;
66910          items.forEach((panel, i) => {
66911            if (panel.tabId)
66912              return;
66913            const tabItem = tabs[i];
66914            if (!tabItem)
66915              return;
66916            panels.renderItem(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, panel), { tabId: tabItem.id }));
66917          });
66918        });
66919      })
66920    );
66921    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), tab), {
66922      panels,
66923      setSelectedId: (id) => tab.setState("selectedId", id),
66924      select: (id) => {
66925        tab.setState("selectedId", id);
66926        composite.move(id);
66927      }
66928    });
66929  }
66930  
66931  
66932  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CQMDBRG5.js
66933  "use client";
66934  
66935  
66936  
66937  
66938  
66939  // src/tab/tab-store.ts
66940  
66941  
66942  function useTabStoreProps(store, update, props) {
66943    store = useCompositeStoreProps(store, update, props);
66944    useStoreProps(store, props, "selectedId", "setSelectedId");
66945    useStoreProps(store, props, "selectOnMove");
66946    const [panels, updatePanels] = EKQEJRUF_useStore(() => store.panels, {});
66947    useUpdateEffect(updatePanels, [store, updatePanels]);
66948    return (0,external_React_.useMemo)(() => _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, store), { panels }), [store, panels]);
66949  }
66950  function useTabStore(props = {}) {
66951    const [store, update] = EKQEJRUF_useStore(createTabStore, props);
66952    return useTabStoreProps(store, update, props);
66953  }
66954  
66955  
66956  
66957  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4B73HROV.js
66958  "use client";
66959  
66960  
66961  
66962  // src/tab/tab-context.tsx
66963  var _4B73HROV_ctx = createStoreContext(
66964    [CompositeContextProvider],
66965    [CompositeScopedContextProvider]
66966  );
66967  var useTabContext = _4B73HROV_ctx.useContext;
66968  var useTabScopedContext = _4B73HROV_ctx.useScopedContext;
66969  var useTabProviderContext = _4B73HROV_ctx.useProviderContext;
66970  var TabContextProvider = _4B73HROV_ctx.ContextProvider;
66971  var TabScopedContextProvider = _4B73HROV_ctx.ScopedContextProvider;
66972  
66973  
66974  
66975  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-list.js
66976  "use client";
66977  
66978  
66979  
66980  
66981  
66982  
66983  
66984  
66985  
66986  
66987  
66988  
66989  // src/tab/tab-list.tsx
66990  
66991  
66992  var useTabList = createHook((_a) => {
66993    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
66994    const context = useTabProviderContext();
66995    store = store || context;
66996    invariant(
66997      store,
66998       false && 0
66999    );
67000    const orientation = store.useState(
67001      (state) => state.orientation === "both" ? void 0 : state.orientation
67002    );
67003    props = useWrapElement(
67004      props,
67005      (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabScopedContextProvider, { value: store, children: element }),
67006      [store]
67007    );
67008    props = _4R3V3JGP_spreadValues({
67009      role: "tablist",
67010      "aria-orientation": orientation
67011    }, props);
67012    props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
67013    return props;
67014  });
67015  var tab_list_TabList = createComponent((props) => {
67016    const htmlProps = useTabList(props);
67017    return _3ORBWXWF_createElement("div", htmlProps);
67018  });
67019  if (false) {}
67020  
67021  
67022  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab.js
67023  "use client";
67024  
67025  
67026  
67027  
67028  
67029  
67030  
67031  
67032  
67033  
67034  
67035  
67036  
67037  
67038  
67039  // src/tab/tab.ts
67040  
67041  
67042  var useTab = createHook(
67043    (_a) => {
67044      var _b = _a, {
67045        store,
67046        accessibleWhenDisabled = true,
67047        getItem: getItemProp
67048      } = _b, props = __objRest(_b, [
67049        "store",
67050        "accessibleWhenDisabled",
67051        "getItem"
67052      ]);
67053      const context = useTabScopedContext();
67054      store = store || context;
67055      invariant(
67056        store,
67057         false && 0
67058      );
67059      const defaultId = useId();
67060      const id = props.id || defaultId;
67061      const dimmed = disabledFromProps(props);
67062      const getItem = (0,external_React_.useCallback)(
67063        (item) => {
67064          const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), { dimmed });
67065          if (getItemProp) {
67066            return getItemProp(nextItem);
67067          }
67068          return nextItem;
67069        },
67070        [dimmed, getItemProp]
67071      );
67072      const onClickProp = props.onClick;
67073      const onClick = useEvent((event) => {
67074        onClickProp == null ? void 0 : onClickProp(event);
67075        if (event.defaultPrevented)
67076          return;
67077        store == null ? void 0 : store.setSelectedId(id);
67078      });
67079      const panelId = store.panels.useState(
67080        (state) => {
67081          var _a2;
67082          return (_a2 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a2.id;
67083        }
67084      );
67085      const selected = store.useState((state) => !!id && state.selectedId === id);
67086      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
67087        id,
67088        role: "tab",
67089        "aria-selected": selected,
67090        "aria-controls": panelId || void 0
67091      }, props), {
67092        onClick
67093      });
67094      props = useCompositeItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
67095        store
67096      }, props), {
67097        accessibleWhenDisabled,
67098        getItem,
67099        shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false
67100      }));
67101      return props;
67102    }
67103  );
67104  var Tab = createMemoComponent((props) => {
67105    const htmlProps = useTab(props);
67106    return _3ORBWXWF_createElement("button", htmlProps);
67107  });
67108  if (false) {}
67109  
67110  
67111  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js
67112  "use client";
67113  
67114  
67115  
67116  
67117  
67118  
67119  
67120  
67121  
67122  
67123  
67124  
67125  
67126  
67127  
67128  
67129  // src/tab/tab-panel.tsx
67130  
67131  
67132  
67133  
67134  var useTabPanel = createHook(
67135    (_a) => {
67136      var _b = _a, { store, tabId: tabIdProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "tabId", "getItem"]);
67137      const context = useTabProviderContext();
67138      store = store || context;
67139      invariant(
67140        store,
67141         false && 0
67142      );
67143      const ref = (0,external_React_.useRef)(null);
67144      const id = useId(props.id);
67145      const [hasTabbableChildren, setHasTabbableChildren] = (0,external_React_.useState)(false);
67146      (0,external_React_.useEffect)(() => {
67147        const element = ref.current;
67148        if (!element)
67149          return;
67150        const tabbable = getAllTabbableIn(element);
67151        setHasTabbableChildren(!!tabbable.length);
67152      }, []);
67153      const getItem = (0,external_React_.useCallback)(
67154        (item) => {
67155          const nextItem = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp });
67156          if (getItemProp) {
67157            return getItemProp(nextItem);
67158          }
67159          return nextItem;
67160        },
67161        [id, tabIdProp, getItemProp]
67162      );
67163      props = useWrapElement(
67164        props,
67165        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabScopedContextProvider, { value: store, children: element }),
67166        [store]
67167      );
67168      const tabId = store.panels.useState(
67169        () => {
67170          var _a2;
67171          return tabIdProp || ((_a2 = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a2.tabId);
67172        }
67173      );
67174      const open = store.useState(
67175        (state) => !!tabId && state.selectedId === tabId
67176      );
67177      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
67178        id,
67179        role: "tabpanel",
67180        "aria-labelledby": tabId || void 0
67181      }, props), {
67182        ref: useMergeRefs(ref, props.ref)
67183      });
67184      const disclosure = useDisclosureStore({ open });
67185      props = useFocusable(_4R3V3JGP_spreadValues({ focusable: !hasTabbableChildren }, props));
67186      props = useDisclosureContent(_4R3V3JGP_spreadValues({ store: disclosure }, props));
67187      props = useCollectionItem(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({ store: store.panels }, props), { getItem }));
67188      return props;
67189    }
67190  );
67191  var TabPanel = createComponent((props) => {
67192    const htmlProps = useTabPanel(props);
67193    return _3ORBWXWF_createElement("div", htmlProps);
67194  });
67195  if (false) {}
67196  
67197  
67198  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tab-panel/index.js
67199  
67200  /**
67201   * External dependencies
67202   */
67203  // eslint-disable-next-line no-restricted-imports
67204  
67205  
67206  /**
67207   * WordPress dependencies
67208   */
67209  
67210  
67211  
67212  /**
67213   * Internal dependencies
67214   */
67215  
67216  
67217  // Separate the actual tab name from the instance ID. This is
67218  // necessary because Ariakit internally uses the element ID when
67219  // a new tab is selected, but our implementation looks specifically
67220  // for the tab name to be passed to the `onSelect` callback.
67221  const extractTabName = id => {
67222    if (typeof id === 'undefined' || id === null) {
67223      return;
67224    }
67225    return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];
67226  };
67227  
67228  /**
67229   * TabPanel is an ARIA-compliant tabpanel.
67230   *
67231   * TabPanels organize content across different screens, data sets, and interactions.
67232   * It has two sections: a list of tabs, and the view to show when tabs are chosen.
67233   *
67234   * ```jsx
67235   * import { TabPanel } from '@wordpress/components';
67236   *
67237   * const onSelect = ( tabName ) => {
67238   *   console.log( 'Selecting tab', tabName );
67239   * };
67240   *
67241   * const MyTabPanel = () => (
67242   *   <TabPanel
67243   *     className="my-tab-panel"
67244   *     activeClass="active-tab"
67245   *     onSelect={ onSelect }
67246   *     tabs={ [
67247   *       {
67248   *         name: 'tab1',
67249   *         title: 'Tab 1',
67250   *         className: 'tab-one',
67251   *       },
67252   *       {
67253   *         name: 'tab2',
67254   *         title: 'Tab 2',
67255   *         className: 'tab-two',
67256   *       },
67257   *     ] }
67258   *   >
67259   *     { ( tab ) => <p>{ tab.title }</p> }
67260   *   </TabPanel>
67261   * );
67262   * ```
67263   */
67264  const UnforwardedTabPanel = ({
67265    className,
67266    children,
67267    tabs,
67268    selectOnMove = true,
67269    initialTabName,
67270    orientation = 'horizontal',
67271    activeClass = 'is-active',
67272    onSelect
67273  }, ref) => {
67274    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(tab_panel_TabPanel, 'tab-panel');
67275    const prependInstanceId = (0,external_wp_element_namespaceObject.useCallback)(tabName => {
67276      if (typeof tabName === 'undefined') {
67277        return;
67278      }
67279      return `$instanceId}-$tabName}`;
67280    }, [instanceId]);
67281    const tabStore = useTabStore({
67282      setSelectedId: newTabValue => {
67283        if (typeof newTabValue === 'undefined' || newTabValue === null) {
67284          return;
67285        }
67286        const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);
67287        if (newTab?.disabled || newTab === selectedTab) {
67288          return;
67289        }
67290        const simplifiedTabName = extractTabName(newTabValue);
67291        if (typeof simplifiedTabName === 'undefined') {
67292          return;
67293        }
67294        onSelect?.(simplifiedTabName);
67295      },
67296      orientation,
67297      selectOnMove,
67298      defaultSelectedId: prependInstanceId(initialTabName)
67299    });
67300    const selectedTabName = extractTabName(tabStore.useState('selectedId'));
67301    const setTabStoreSelectedId = (0,external_wp_element_namespaceObject.useCallback)(tabName => {
67302      tabStore.setState('selectedId', prependInstanceId(tabName));
67303    }, [prependInstanceId, tabStore]);
67304    const selectedTab = tabs.find(({
67305      name
67306    }) => name === selectedTabName);
67307    const previousSelectedTabName = (0,external_wp_compose_namespaceObject.usePrevious)(selectedTabName);
67308  
67309    // Ensure `onSelect` is called when the initial tab is selected.
67310    (0,external_wp_element_namespaceObject.useEffect)(() => {
67311      if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {
67312        onSelect?.(selectedTabName);
67313      }
67314    }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);
67315  
67316    // Handle selecting the initial tab.
67317    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
67318      // If there's a selected tab, don't override it.
67319      if (selectedTab) {
67320        return;
67321      }
67322      const initialTab = tabs.find(tab => tab.name === initialTabName);
67323      // Wait for the denoted initial tab to be declared before making a
67324      // selection. This ensures that if a tab is declared lazily it can
67325      // still receive initial selection.
67326      if (initialTabName && !initialTab) {
67327        return;
67328      }
67329      if (initialTab && !initialTab.disabled) {
67330        // Select the initial tab if it's not disabled.
67331        setTabStoreSelectedId(initialTab.name);
67332      } else {
67333        // Fallback to the first enabled tab when the initial tab is
67334        // disabled or it can't be found.
67335        const firstEnabledTab = tabs.find(tab => !tab.disabled);
67336        if (firstEnabledTab) {
67337          setTabStoreSelectedId(firstEnabledTab.name);
67338        }
67339      }
67340    }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);
67341  
67342    // Handle the currently selected tab becoming disabled.
67343    (0,external_wp_element_namespaceObject.useEffect)(() => {
67344      // This effect only runs when the selected tab is defined and becomes disabled.
67345      if (!selectedTab?.disabled) {
67346        return;
67347      }
67348      const firstEnabledTab = tabs.find(tab => !tab.disabled);
67349      // If the currently selected tab becomes disabled, select the first enabled tab.
67350      // (if there is one).
67351      if (firstEnabledTab) {
67352        setTabStoreSelectedId(firstEnabledTab.name);
67353      }
67354    }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);
67355    return (0,external_React_.createElement)("div", {
67356      className: className,
67357      ref: ref
67358    }, (0,external_React_.createElement)(tab_list_TabList, {
67359      store: tabStore,
67360      className: "components-tab-panel__tabs"
67361    }, tabs.map(tab => {
67362      return (0,external_React_.createElement)(Tab, {
67363        key: tab.name,
67364        id: prependInstanceId(tab.name),
67365        className: classnames_default()('components-tab-panel__tabs-item', tab.className, {
67366          [activeClass]: tab.name === selectedTabName
67367        }),
67368        disabled: tab.disabled,
67369        "aria-controls": `$prependInstanceId(tab.name)}-view`,
67370        render: (0,external_React_.createElement)(build_module_button, {
67371          icon: tab.icon,
67372          label: tab.icon && tab.title,
67373          showTooltip: !!tab.icon
67374        })
67375      }, !tab.icon && tab.title);
67376    })), selectedTab && (0,external_React_.createElement)(TabPanel, {
67377      id: `$prependInstanceId(selectedTab.name)}-view`,
67378      store: tabStore,
67379      tabId: prependInstanceId(selectedTab.name),
67380      className: 'components-tab-panel__tab-content'
67381    }, children(selectedTab)));
67382  };
67383  const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel);
67384  /* harmony default export */ const tab_panel = (tab_panel_TabPanel);
67385  
67386  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-control/index.js
67387  
67388  /**
67389   * External dependencies
67390   */
67391  
67392  
67393  
67394  /**
67395   * WordPress dependencies
67396   */
67397  
67398  
67399  
67400  /**
67401   * Internal dependencies
67402   */
67403  
67404  function UnforwardedTextControl(props, ref) {
67405    const {
67406      __nextHasNoMarginBottom,
67407      __next40pxDefaultSize = false,
67408      label,
67409      hideLabelFromVision,
67410      value,
67411      help,
67412      id: idProp,
67413      className,
67414      onChange,
67415      type = 'text',
67416      ...additionalProps
67417    } = props;
67418    const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp);
67419    const onChangeValue = event => onChange(event.target.value);
67420    return (0,external_React_.createElement)(base_control, {
67421      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
67422      label: label,
67423      hideLabelFromVision: hideLabelFromVision,
67424      id: id,
67425      help: help,
67426      className: className
67427    }, (0,external_React_.createElement)("input", {
67428      className: classnames_default()('components-text-control__input', {
67429        'is-next-40px-default-size': __next40pxDefaultSize
67430      }),
67431      type: type,
67432      id: id,
67433      value: value,
67434      onChange: onChangeValue,
67435      "aria-describedby": !!help ? id + '__help' : undefined,
67436      ref: ref,
67437      ...additionalProps
67438    }));
67439  }
67440  
67441  /**
67442   * TextControl components let users enter and edit text.
67443   *
67444   * ```jsx
67445   * import { TextControl } from '@wordpress/components';
67446   * import { useState } from '@wordpress/element';
67447   *
67448   * const MyTextControl = () => {
67449   *   const [ className, setClassName ] = useState( '' );
67450   *
67451   *   return (
67452   *     <TextControl
67453   *       label="Additional CSS Class"
67454   *       value={ className }
67455   *       onChange={ ( value ) => setClassName( value ) }
67456   *     />
67457   *   );
67458   * };
67459   * ```
67460   */
67461  const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextControl);
67462  /* harmony default export */ const text_control = (TextControl);
67463  
67464  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/base.js
67465  /**
67466   * External dependencies
67467   */
67468  
67469  
67470  /**
67471   * Internal dependencies
67472   */
67473  
67474  
67475  
67476  const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";" + ( true ? "" : 0),  true ? "" : 0);
67477  const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0),  true ? "" : 0);
67478  
67479  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js
67480  /* harmony default export */ const breakpoint_values = ({
67481    huge: '1440px',
67482    wide: '1280px',
67483    'x-large': '1080px',
67484    large: '960px',
67485    // admin sidebar auto folds
67486    medium: '782px',
67487    // Adminbar goes big.
67488    small: '600px',
67489    mobile: '480px',
67490    'zoomed-in': '280px'
67491  });
67492  
67493  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint.js
67494  /**
67495   * Internal dependencies
67496   */
67497  
67498  
67499  /**
67500   * @param {keyof breakpoints} point
67501   * @return {string} Media query declaration.
67502   */
67503  const breakpoint = point => `@media (min-width: $breakpoint_values[point]})`;
67504  
67505  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/input-control.js
67506  /**
67507   * External dependencies
67508   */
67509  
67510  
67511  /**
67512   * Internal dependencies
67513   */
67514  
67515  
67516  
67517  
67518  const 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);
67519  
67520  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/styles/textarea-control-styles.js
67521  
67522  /**
67523   * External dependencies
67524   */
67525  
67526  /**
67527   * Internal dependencies
67528   */
67529  
67530  const StyledTextarea = emotion_styled_base_browser_esm("textarea",  true ? {
67531    target: "e1w5nnrk0"
67532  } : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0));
67533  
67534  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/index.js
67535  
67536  /**
67537   * WordPress dependencies
67538   */
67539  
67540  
67541  
67542  /**
67543   * Internal dependencies
67544   */
67545  
67546  
67547  function UnforwardedTextareaControl(props, ref) {
67548    const {
67549      __nextHasNoMarginBottom,
67550      label,
67551      hideLabelFromVision,
67552      value,
67553      help,
67554      onChange,
67555      rows = 4,
67556      className,
67557      ...additionalProps
67558    } = props;
67559    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl);
67560    const id = `inspector-textarea-control-$instanceId}`;
67561    const onChangeValue = event => onChange(event.target.value);
67562    return (0,external_React_.createElement)(base_control, {
67563      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
67564      label: label,
67565      hideLabelFromVision: hideLabelFromVision,
67566      id: id,
67567      help: help,
67568      className: className
67569    }, (0,external_React_.createElement)(StyledTextarea, {
67570      className: "components-textarea-control__input",
67571      id: id,
67572      rows: rows,
67573      onChange: onChangeValue,
67574      "aria-describedby": !!help ? id + '__help' : undefined,
67575      value: value,
67576      ref: ref,
67577      ...additionalProps
67578    }));
67579  }
67580  
67581  /**
67582   * TextareaControls are TextControls that allow for multiple lines of text, and
67583   * wrap overflow text onto a new line. They are a fixed height and scroll
67584   * vertically when the cursor reaches the bottom of the field.
67585   *
67586   * ```jsx
67587   * import { TextareaControl } from '@wordpress/components';
67588   * import { useState } from '@wordpress/element';
67589   *
67590   * const MyTextareaControl = () => {
67591   *   const [ text, setText ] = useState( '' );
67592   *
67593   *   return (
67594   *     <TextareaControl
67595   *       label="Text"
67596   *       help="Enter some text"
67597   *       value={ text }
67598   *       onChange={ ( value ) => setText( value ) }
67599   *     />
67600   *   );
67601   * };
67602   * ```
67603   */
67604  const TextareaControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextareaControl);
67605  /* harmony default export */ const textarea_control = (TextareaControl);
67606  
67607  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-highlight/index.js
67608  
67609  /**
67610   * WordPress dependencies
67611   */
67612  
67613  
67614  /**
67615   * Internal dependencies
67616   */
67617  
67618  /**
67619   * Highlights occurrences of a given string within another string of text. Wraps
67620   * each match with a `<mark>` tag which provides browser default styling.
67621   *
67622   * ```jsx
67623   * import { TextHighlight } from '@wordpress/components';
67624   *
67625   * const MyTextHighlight = () => (
67626   *   <TextHighlight
67627   *     text="Why do we like Gutenberg? Because Gutenberg is the best!"
67628   *     highlight="Gutenberg"
67629   *   />
67630   * );
67631   * ```
67632   */
67633  const TextHighlight = props => {
67634    const {
67635      text = '',
67636      highlight = ''
67637    } = props;
67638    const trimmedHighlightText = highlight.trim();
67639    if (!trimmedHighlightText) {
67640      return (0,external_React_.createElement)(external_React_.Fragment, null, text);
67641    }
67642    const regex = new RegExp(`($escapeRegExp(trimmedHighlightText)})`, 'gi');
67643    return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
67644      mark: (0,external_React_.createElement)("mark", null)
67645    });
67646  };
67647  /* harmony default export */ const text_highlight = (TextHighlight);
67648  
67649  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/tip.js
67650  
67651  /**
67652   * WordPress dependencies
67653   */
67654  
67655  const tip = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
67656    xmlns: "http://www.w3.org/2000/svg",
67657    viewBox: "0 0 24 24"
67658  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
67659    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"
67660  }));
67661  /* harmony default export */ const library_tip = (tip);
67662  
67663  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tip/index.js
67664  
67665  /**
67666   * WordPress dependencies
67667   */
67668  
67669  
67670  /**
67671   * Internal dependencies
67672   */
67673  
67674  function Tip(props) {
67675    const {
67676      children
67677    } = props;
67678    return (0,external_React_.createElement)("div", {
67679      className: "components-tip"
67680    }, (0,external_React_.createElement)(icons_build_module_icon, {
67681      icon: library_tip
67682    }), (0,external_React_.createElement)("p", null, children));
67683  }
67684  /* harmony default export */ const build_module_tip = (Tip);
67685  
67686  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-control/index.js
67687  
67688  /**
67689   * External dependencies
67690   */
67691  
67692  
67693  
67694  /**
67695   * WordPress dependencies
67696   */
67697  
67698  
67699  /**
67700   * Internal dependencies
67701   */
67702  
67703  
67704  
67705  
67706  
67707  
67708  
67709  /**
67710   * ToggleControl is used to generate a toggle user interface.
67711   *
67712   * ```jsx
67713   * import { ToggleControl } from '@wordpress/components';
67714   * import { useState } from '@wordpress/element';
67715   *
67716   * const MyToggleControl = () => {
67717   *   const [ value, setValue ] = useState( false );
67718   *
67719   *   return (
67720   *     <ToggleControl
67721   *       label="Fixed Background"
67722   *       checked={ value }
67723   *       onChange={ () => setValue( ( state ) => ! state ) }
67724   *     />
67725   *   );
67726   * };
67727   * ```
67728   */
67729  function ToggleControl({
67730    __nextHasNoMarginBottom,
67731    label,
67732    checked,
67733    help,
67734    className,
67735    onChange,
67736    disabled
67737  }) {
67738    function onChangeToggle(event) {
67739      onChange(event.target.checked);
67740    }
67741    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleControl);
67742    const id = `inspector-toggle-control-$instanceId}`;
67743    const cx = useCx();
67744    const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css({
67745      marginBottom: space(3)
67746    },  true ? "" : 0,  true ? "" : 0));
67747    let describedBy, helpLabel;
67748    if (help) {
67749      if (typeof help === 'function') {
67750        // `help` as a function works only for controlled components where
67751        // `checked` is passed down from parent component. Uncontrolled
67752        // component can show only a static help label.
67753        if (checked !== undefined) {
67754          helpLabel = help(checked);
67755        }
67756      } else {
67757        helpLabel = help;
67758      }
67759      if (helpLabel) {
67760        describedBy = id + '__help';
67761      }
67762    }
67763    return (0,external_React_.createElement)(base_control, {
67764      id: id,
67765      help: helpLabel,
67766      className: classes,
67767      __nextHasNoMarginBottom: true
67768    }, (0,external_React_.createElement)(h_stack_component, {
67769      justify: "flex-start",
67770      spacing: 3
67771    }, (0,external_React_.createElement)(form_toggle, {
67772      id: id,
67773      checked: checked,
67774      onChange: onChangeToggle,
67775      "aria-describedby": describedBy,
67776      disabled: disabled
67777    }), (0,external_React_.createElement)(flex_block_component, {
67778      as: "label",
67779      htmlFor: id,
67780      className: "components-toggle-control__label"
67781    }, label)));
67782  }
67783  /* harmony default export */ const toggle_control = (ToggleControl);
67784  
67785  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SOK7T35T.js
67786  "use client";
67787  
67788  
67789  
67790  // src/toolbar/toolbar-context.tsx
67791  var SOK7T35T_ctx = createStoreContext(
67792    [CompositeContextProvider],
67793    [CompositeScopedContextProvider]
67794  );
67795  var useToolbarContext = SOK7T35T_ctx.useContext;
67796  var useToolbarScopedContext = SOK7T35T_ctx.useScopedContext;
67797  var useToolbarProviderContext = SOK7T35T_ctx.useProviderContext;
67798  var ToolbarContextProvider = SOK7T35T_ctx.ContextProvider;
67799  var ToolbarScopedContextProvider = SOK7T35T_ctx.ScopedContextProvider;
67800  
67801  
67802  
67803  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7NHUGSTF.js
67804  "use client";
67805  
67806  
67807  
67808  
67809  
67810  // src/toolbar/toolbar-item.ts
67811  var useToolbarItem = createHook(
67812    (_a) => {
67813      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
67814      const context = useToolbarContext();
67815      store = store || context;
67816      props = useCompositeItem(_4R3V3JGP_spreadValues({ store }, props));
67817      return props;
67818    }
67819  );
67820  var ToolbarItem = createMemoComponent((props) => {
67821    const htmlProps = useToolbarItem(props);
67822    return _3ORBWXWF_createElement("button", htmlProps);
67823  });
67824  if (false) {}
67825  
67826  
67827  
67828  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-context/index.js
67829  /**
67830   * External dependencies
67831   */
67832  // eslint-disable-next-line no-restricted-imports
67833  
67834  /**
67835   * WordPress dependencies
67836   */
67837  
67838  const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
67839  /* harmony default export */ const toolbar_context = (ToolbarContext);
67840  
67841  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-item/index.js
67842  
67843  /**
67844   * External dependencies
67845   */
67846  // eslint-disable-next-line no-restricted-imports
67847  
67848  /**
67849   * WordPress dependencies
67850   */
67851  
67852  
67853  
67854  /**
67855   * Internal dependencies
67856   */
67857  
67858  function toolbar_item_ToolbarItem({
67859    children,
67860    as: Component,
67861    ...props
67862  }, ref) {
67863    const accessibleToolbarStore = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
67864    const isRenderProp = typeof children === 'function';
67865    if (!isRenderProp && !Component) {
67866       true ? external_wp_warning_default()('`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' + 'See https://developer.wordpress.org/block-editor/components/toolbar-item/') : 0;
67867      return null;
67868    }
67869    const allProps = {
67870      ...props,
67871      ref,
67872      'data-toolbar-item': true
67873    };
67874    if (!accessibleToolbarStore) {
67875      if (Component) {
67876        return (0,external_React_.createElement)(Component, {
67877          ...allProps
67878        }, children);
67879      }
67880      if (!isRenderProp) {
67881        return null;
67882      }
67883      return children(allProps);
67884    }
67885    const render = isRenderProp ? children : Component && (0,external_React_.createElement)(Component, null, children);
67886    return (0,external_React_.createElement)(ToolbarItem, {
67887      ...allProps,
67888      store: accessibleToolbarStore,
67889      render: render
67890    });
67891  }
67892  /* harmony default export */ const toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem));
67893  
67894  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/toolbar-button-container.js
67895  
67896  /**
67897   * Internal dependencies
67898   */
67899  
67900  const ToolbarButtonContainer = ({
67901    children,
67902    className
67903  }) => (0,external_React_.createElement)("div", {
67904    className: className
67905  }, children);
67906  /* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer);
67907  
67908  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-button/index.js
67909  
67910  /**
67911   * External dependencies
67912   */
67913  
67914  /**
67915   * WordPress dependencies
67916   */
67917  
67918  
67919  /**
67920   * Internal dependencies
67921   */
67922  
67923  
67924  
67925  
67926  function UnforwardedToolbarButton({
67927    children,
67928    className,
67929    containerClassName,
67930    extraProps,
67931    isActive,
67932    isDisabled,
67933    title,
67934    ...props
67935  }, ref) {
67936    const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
67937    if (!accessibleToolbarState) {
67938      return (0,external_React_.createElement)(toolbar_button_container, {
67939        className: containerClassName
67940      }, (0,external_React_.createElement)(build_module_button, {
67941        ref: ref,
67942        icon: props.icon,
67943        label: title,
67944        shortcut: props.shortcut,
67945        "data-subscript": props.subscript,
67946        onClick: event => {
67947          event.stopPropagation();
67948          // TODO: Possible bug; maybe use onClick instead of props.onClick.
67949          if (props.onClick) {
67950            props.onClick(event);
67951          }
67952        },
67953        className: classnames_default()('components-toolbar__control', className),
67954        isPressed: isActive,
67955        disabled: isDisabled,
67956        "data-toolbar-item": true,
67957        ...extraProps,
67958        ...props
67959      }, children));
67960    }
67961  
67962    // ToobarItem will pass all props to the render prop child, which will pass
67963    // all props to Button. This means that ToolbarButton has the same API as
67964    // Button.
67965    return (0,external_React_.createElement)(toolbar_item, {
67966      className: classnames_default()('components-toolbar-button', className),
67967      ...extraProps,
67968      ...props,
67969      ref: ref
67970    }, toolbarItemProps => (0,external_React_.createElement)(build_module_button, {
67971      label: title,
67972      isPressed: isActive,
67973      disabled: isDisabled,
67974      ...toolbarItemProps
67975    }, children));
67976  }
67977  
67978  /**
67979   * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
67980   * or ToolbarGroup when used to create general interfaces.
67981   *
67982   * ```jsx
67983   * import { Toolbar, ToolbarButton } from '@wordpress/components';
67984   * import { edit } from '@wordpress/icons';
67985   *
67986   * function MyToolbar() {
67987   *   return (
67988   *        <Toolbar label="Options">
67989   *            <ToolbarButton
67990   *                icon={ edit }
67991   *                label="Edit"
67992   *                onClick={ () => alert( 'Editing' ) }
67993   *            />
67994   *        </Toolbar>
67995   *   );
67996   * }
67997   * ```
67998   */
67999  const ToolbarButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarButton);
68000  /* harmony default export */ const toolbar_button = (ToolbarButton);
68001  
68002  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-container.js
68003  
68004  /**
68005   * Internal dependencies
68006   */
68007  
68008  const ToolbarGroupContainer = ({
68009    className,
68010    children,
68011    ...props
68012  }) => (0,external_React_.createElement)("div", {
68013    className: className,
68014    ...props
68015  }, children);
68016  /* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer);
68017  
68018  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js
68019  
68020  /**
68021   * WordPress dependencies
68022   */
68023  
68024  
68025  /**
68026   * Internal dependencies
68027   */
68028  
68029  
68030  
68031  function ToolbarGroupCollapsed({
68032    controls = [],
68033    toggleProps,
68034    ...props
68035  }) {
68036    // It'll contain state if `ToolbarGroup` is being used within
68037    // `<Toolbar label="label" />`
68038    const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
68039    const renderDropdownMenu = internalToggleProps => (0,external_React_.createElement)(dropdown_menu, {
68040      controls: controls,
68041      toggleProps: {
68042        ...internalToggleProps,
68043        'data-toolbar-item': true
68044      },
68045      ...props
68046    });
68047    if (accessibleToolbarState) {
68048      return (0,external_React_.createElement)(toolbar_item, {
68049        ...toggleProps
68050      }, renderDropdownMenu);
68051    }
68052    return renderDropdownMenu(toggleProps);
68053  }
68054  /* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed);
68055  
68056  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-group/index.js
68057  
68058  /**
68059   * External dependencies
68060   */
68061  
68062  
68063  /**
68064   * WordPress dependencies
68065   */
68066  
68067  
68068  /**
68069   * Internal dependencies
68070   */
68071  
68072  
68073  
68074  
68075  function isNestedArray(arr) {
68076    return Array.isArray(arr) && Array.isArray(arr[0]);
68077  }
68078  
68079  /**
68080   * Renders a collapsible group of controls
68081   *
68082   * The `controls` prop accepts an array of sets. A set is an array of controls.
68083   * Controls have the following shape:
68084   *
68085   * ```
68086   * {
68087   *   icon: string,
68088   *   title: string,
68089   *   subscript: string,
68090   *   onClick: Function,
68091   *   isActive: boolean,
68092   *   isDisabled: boolean
68093   * }
68094   * ```
68095   *
68096   * For convenience it is also possible to pass only an array of controls. It is
68097   * then assumed this is the only set.
68098   *
68099   * Either `controls` or `children` is required, otherwise this components
68100   * renders nothing.
68101   *
68102   * @param props               Component props.
68103   * @param [props.controls]    The controls to render in this toolbar.
68104   * @param [props.children]    Any other things to render inside the toolbar besides the controls.
68105   * @param [props.className]   Class to set on the container div.
68106   * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
68107   * @param [props.title]       ARIA label for dropdown menu if is collapsed.
68108   */
68109  function ToolbarGroup({
68110    controls = [],
68111    children,
68112    className,
68113    isCollapsed,
68114    title,
68115    ...props
68116  }) {
68117    // It'll contain state if `ToolbarGroup` is being used within
68118    // `<Toolbar label="label" />`
68119    const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
68120    if ((!controls || !controls.length) && !children) {
68121      return null;
68122    }
68123    const finalClassName = classnames_default()(
68124    // Unfortunately, there's legacy code referencing to `.components-toolbar`
68125    // So we can't get rid of it
68126    accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className);
68127  
68128    // Normalize controls to nested array of objects (sets of controls)
68129    let controlSets;
68130    if (isNestedArray(controls)) {
68131      controlSets = controls;
68132    } else {
68133      controlSets = [controls];
68134    }
68135    if (isCollapsed) {
68136      return (0,external_React_.createElement)(toolbar_group_collapsed, {
68137        label: title,
68138        controls: controlSets,
68139        className: finalClassName,
68140        children: children,
68141        ...props
68142      });
68143    }
68144    return (0,external_React_.createElement)(toolbar_group_container, {
68145      className: finalClassName,
68146      ...props
68147    }, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_React_.createElement)(toolbar_button, {
68148      key: [indexOfSet, indexOfControl].join(),
68149      containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined,
68150      ...control
68151    }))), children);
68152  }
68153  /* harmony default export */ const toolbar_group = (ToolbarGroup);
68154  
68155  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js
68156  "use client";
68157  
68158  
68159  
68160  
68161  
68162  
68163  
68164  
68165  // src/toolbar/toolbar-store.ts
68166  function createToolbarStore(props = {}) {
68167    var _a;
68168    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
68169    return createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
68170      orientation: defaultValue(
68171        props.orientation,
68172        syncState == null ? void 0 : syncState.orientation,
68173        "horizontal"
68174      ),
68175      focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
68176    }));
68177  }
68178  
68179  
68180  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BPNXFCFY.js
68181  "use client";
68182  
68183  
68184  
68185  // src/toolbar/toolbar-store.ts
68186  
68187  function useToolbarStoreProps(store, update, props) {
68188    return useCompositeStoreProps(store, update, props);
68189  }
68190  function useToolbarStore(props = {}) {
68191    const [store, update] = EKQEJRUF_useStore(createToolbarStore, props);
68192    return useToolbarStoreProps(store, update, props);
68193  }
68194  
68195  
68196  
68197  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js
68198  "use client";
68199  
68200  
68201  
68202  
68203  
68204  
68205  
68206  
68207  
68208  
68209  
68210  
68211  
68212  
68213  
68214  
68215  // src/toolbar/toolbar.tsx
68216  
68217  var useToolbar = createHook(
68218    (_a) => {
68219      var _b = _a, {
68220        store: storeProp,
68221        orientation: orientationProp,
68222        virtualFocus,
68223        focusLoop,
68224        rtl
68225      } = _b, props = __objRest(_b, [
68226        "store",
68227        "orientation",
68228        "virtualFocus",
68229        "focusLoop",
68230        "rtl"
68231      ]);
68232      const context = useToolbarProviderContext();
68233      storeProp = storeProp || context;
68234      const store = useToolbarStore({
68235        store: storeProp,
68236        orientation: orientationProp,
68237        virtualFocus,
68238        focusLoop,
68239        rtl
68240      });
68241      const orientation = store.useState(
68242        (state) => state.orientation === "both" ? void 0 : state.orientation
68243      );
68244      props = useWrapElement(
68245        props,
68246        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(ToolbarScopedContextProvider, { value: store, children: element }),
68247        [store]
68248      );
68249      props = _4R3V3JGP_spreadValues({
68250        role: "toolbar",
68251        "aria-orientation": orientation
68252      }, props);
68253      props = useComposite(_4R3V3JGP_spreadValues({ store }, props));
68254      return props;
68255    }
68256  );
68257  var Toolbar = createComponent((props) => {
68258    const htmlProps = useToolbar(props);
68259    return _3ORBWXWF_createElement("div", htmlProps);
68260  });
68261  if (false) {}
68262  
68263  
68264  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/toolbar-container.js
68265  
68266  /**
68267   * External dependencies
68268   */
68269  // eslint-disable-next-line no-restricted-imports
68270  
68271  /**
68272   * WordPress dependencies
68273   */
68274  
68275  
68276  
68277  /**
68278   * Internal dependencies
68279   */
68280  
68281  function UnforwardedToolbarContainer({
68282    label,
68283    ...props
68284  }, ref) {
68285    const toolbarStore = useToolbarStore({
68286      focusLoop: true,
68287      rtl: (0,external_wp_i18n_namespaceObject.isRTL)()
68288    });
68289    return (
68290      // This will provide state for `ToolbarButton`'s
68291      (0,external_React_.createElement)(toolbar_context.Provider, {
68292        value: toolbarStore
68293      }, (0,external_React_.createElement)(Toolbar, {
68294        ref: ref,
68295        "aria-label": label,
68296        store: toolbarStore,
68297        ...props
68298      }))
68299    );
68300  }
68301  const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer);
68302  /* harmony default export */ const toolbar_container = (ToolbarContainer);
68303  
68304  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar/index.js
68305  
68306  /**
68307   * External dependencies
68308   */
68309  
68310  /**
68311   * WordPress dependencies
68312   */
68313  
68314  
68315  
68316  /**
68317   * Internal dependencies
68318   */
68319  
68320  
68321  
68322  function UnforwardedToolbar({
68323    className,
68324    label,
68325    variant,
68326    ...props
68327  }, ref) {
68328    const isVariantDefined = variant !== undefined;
68329    const contextSystemValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
68330      if (isVariantDefined) {
68331        return {};
68332      }
68333      return {
68334        DropdownMenu: {
68335          variant: 'toolbar'
68336        },
68337        Dropdown: {
68338          variant: 'toolbar'
68339        }
68340      };
68341    }, [isVariantDefined]);
68342    if (!label) {
68343      external_wp_deprecated_default()('Using Toolbar without label prop', {
68344        since: '5.6',
68345        alternative: 'ToolbarGroup component',
68346        link: 'https://developer.wordpress.org/block-editor/components/toolbar/'
68347      });
68348      // Extracting title from `props` because `ToolbarGroup` doesn't accept it.
68349      const {
68350        title: _title,
68351        ...restProps
68352      } = props;
68353      return (0,external_React_.createElement)(toolbar_group, {
68354        isCollapsed: false,
68355        ...restProps,
68356        className: className
68357      });
68358    }
68359    // `ToolbarGroup` already uses components-toolbar for compatibility reasons.
68360    const finalClassName = classnames_default()('components-accessible-toolbar', className, variant && `is-$variant}`);
68361    return (0,external_React_.createElement)(ContextSystemProvider, {
68362      value: contextSystemValue
68363    }, (0,external_React_.createElement)(toolbar_container, {
68364      className: finalClassName,
68365      label: label,
68366      ref: ref,
68367      ...props
68368    }));
68369  }
68370  
68371  /**
68372   * Renders a toolbar.
68373   *
68374   * To add controls, simply pass `ToolbarButton` components as children.
68375   *
68376   * ```jsx
68377   * import { Toolbar, ToolbarButton } from '@wordpress/components';
68378   * import { formatBold, formatItalic, link } from '@wordpress/icons';
68379   *
68380   * function MyToolbar() {
68381   *   return (
68382   *     <Toolbar label="Options">
68383   *       <ToolbarButton icon={ formatBold } label="Bold" />
68384   *       <ToolbarButton icon={ formatItalic } label="Italic" />
68385   *       <ToolbarButton icon={ link } label="Link" />
68386   *     </Toolbar>
68387   *   );
68388   * }
68389   * ```
68390   */
68391  const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbar);
68392  /* harmony default export */ const toolbar = (toolbar_Toolbar);
68393  
68394  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-dropdown-menu/index.js
68395  
68396  /**
68397   * WordPress dependencies
68398   */
68399  
68400  
68401  /**
68402   * External dependencies
68403   */
68404  
68405  /**
68406   * Internal dependencies
68407   */
68408  
68409  
68410  
68411  function ToolbarDropdownMenu(props, ref) {
68412    const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
68413    if (!accessibleToolbarState) {
68414      return (0,external_React_.createElement)(dropdown_menu, {
68415        ...props
68416      });
68417    }
68418  
68419    // ToolbarItem will pass all props to the render prop child, which will pass
68420    // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
68421    // has the same API as DropdownMenu.
68422    return (0,external_React_.createElement)(toolbar_item, {
68423      ref: ref,
68424      ...props.toggleProps
68425    }, toolbarItemProps => (0,external_React_.createElement)(dropdown_menu, {
68426      ...props,
68427      popoverProps: {
68428        ...props.popoverProps
68429      },
68430      toggleProps: toolbarItemProps
68431    }));
68432  }
68433  /* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu));
68434  
68435  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/styles.js
68436  
68437  function 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)."; }
68438  /**
68439   * External dependencies
68440   */
68441  
68442  
68443  
68444  /**
68445   * Internal dependencies
68446   */
68447  
68448  
68449  
68450  
68451  const toolsPanelGrid = {
68452    columns: columns => /*#__PURE__*/emotion_react_browser_esm_css("grid-template-columns:", `repeat( $columns}, minmax(0, 1fr) )`, ";" + ( true ? "" : 0),  true ? "" : 0),
68453    spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(2), ";row-gap:", space(4), ";" + ( true ? "" : 0),  true ? "" : 0),
68454    item: {
68455      fullWidth:  true ? {
68456        name: "18iuzk9",
68457        styles: "grid-column:1/-1"
68458      } : 0
68459    }
68460  };
68461  const 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);
68462  
68463  /**
68464   * Items injected into a ToolsPanel via a virtual bubbling slot will require
68465   * an inner dom element to be injected. The following rule allows for the
68466   * CSS grid display to be re-established.
68467   */
68468  
68469  const ToolsPanelWithInnerWrapper = columns => {
68470    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);
68471  };
68472  const ToolsPanelHiddenInnerWrapper =  true ? {
68473    name: "huufmu",
68474    styles: ">div:not( :first-of-type ){display:none;}"
68475  } : 0;
68476  const 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);
68477  const ToolsPanelHeading =  true ? {
68478    name: "1pmxm02",
68479    styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}"
68480  } : 0;
68481  const 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);
68482  const ToolsPanelItemPlaceholder =  true ? {
68483    name: "eivff4",
68484    styles: "display:none"
68485  } : 0;
68486  const styles_DropdownMenu =  true ? {
68487    name: "16gsvie",
68488    styles: "min-width:200px"
68489  } : 0;
68490  const ResetLabel = emotion_styled_base_browser_esm("span",  true ? {
68491    target: "ews648u0"
68492  } : 0)("color:", COLORS.theme.accentDarker10, ";font-size:11px;font-weight:500;line-height:1.4;", rtl({
68493    marginLeft: space(3)
68494  }), " text-transform:uppercase;" + ( true ? "" : 0));
68495  const 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);
68496  
68497  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/context.js
68498  /**
68499   * WordPress dependencies
68500   */
68501  
68502  
68503  /**
68504   * Internal dependencies
68505   */
68506  
68507  const tools_panel_context_noop = () => undefined;
68508  const ToolsPanelContext = (0,external_wp_element_namespaceObject.createContext)({
68509    menuItems: {
68510      default: {},
68511      optional: {}
68512    },
68513    hasMenuItems: false,
68514    isResetting: false,
68515    shouldRenderPlaceholderItems: false,
68516    registerPanelItem: tools_panel_context_noop,
68517    deregisterPanelItem: tools_panel_context_noop,
68518    flagItemCustomization: tools_panel_context_noop,
68519    registerResetAllFilter: tools_panel_context_noop,
68520    deregisterResetAllFilter: tools_panel_context_noop,
68521    areAllOptionalControlsHidden: true
68522  });
68523  const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext);
68524  
68525  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/hook.js
68526  /**
68527   * WordPress dependencies
68528   */
68529  
68530  
68531  /**
68532   * Internal dependencies
68533   */
68534  
68535  
68536  
68537  
68538  function useToolsPanelHeader(props) {
68539    const {
68540      className,
68541      headingLevel = 2,
68542      ...otherProps
68543    } = useContextSystem(props, 'ToolsPanelHeader');
68544    const cx = useCx();
68545    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
68546      return cx(ToolsPanelHeader, className);
68547    }, [className, cx]);
68548    const dropdownMenuClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
68549      return cx(styles_DropdownMenu);
68550    }, [cx]);
68551    const headingClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
68552      return cx(ToolsPanelHeading);
68553    }, [cx]);
68554    const defaultControlsItemClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {
68555      return cx(DefaultControlsItem);
68556    }, [cx]);
68557    const {
68558      menuItems,
68559      hasMenuItems,
68560      areAllOptionalControlsHidden
68561    } = useToolsPanelContext();
68562    return {
68563      ...otherProps,
68564      areAllOptionalControlsHidden,
68565      defaultControlsItemClassName,
68566      dropdownMenuClassName,
68567      hasMenuItems,
68568      headingClassName,
68569      headingLevel,
68570      menuItems,
68571      className: classes
68572    };
68573  }
68574  
68575  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js
68576  
68577  /**
68578   * External dependencies
68579   */
68580  
68581  /**
68582   * WordPress dependencies
68583   */
68584  
68585  
68586  
68587  
68588  /**
68589   * Internal dependencies
68590   */
68591  
68592  
68593  
68594  
68595  
68596  
68597  
68598  
68599  const DefaultControlsGroup = ({
68600    itemClassName,
68601    items,
68602    toggleItem
68603  }) => {
68604    if (!items.length) {
68605      return null;
68606    }
68607    const resetSuffix = (0,external_React_.createElement)(ResetLabel, {
68608      "aria-hidden": true
68609    }, (0,external_wp_i18n_namespaceObject.__)('Reset'));
68610    return (0,external_React_.createElement)(external_React_.Fragment, null, items.map(([label, hasValue]) => {
68611      if (hasValue) {
68612        return (0,external_React_.createElement)(menu_item, {
68613          key: label,
68614          className: itemClassName,
68615          role: "menuitem",
68616          label: (0,external_wp_i18n_namespaceObject.sprintf)(
68617          // translators: %s: The name of the control being reset e.g. "Padding".
68618          (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label),
68619          onClick: () => {
68620            toggleItem(label);
68621            (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
68622            // translators: %s: The name of the control being reset e.g. "Padding".
68623            (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive');
68624          },
68625          suffix: resetSuffix
68626        }, label);
68627      }
68628      return (0,external_React_.createElement)(menu_item, {
68629        key: label,
68630        icon: library_check,
68631        className: itemClassName,
68632        role: "menuitemcheckbox",
68633        isSelected: true,
68634        "aria-disabled": true
68635      }, label);
68636    }));
68637  };
68638  const OptionalControlsGroup = ({
68639    items,
68640    toggleItem
68641  }) => {
68642    if (!items.length) {
68643      return null;
68644    }
68645    return (0,external_React_.createElement)(external_React_.Fragment, null, items.map(([label, isSelected]) => {
68646      const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)(
68647      // translators: %s: The name of the control being hidden and reset e.g. "Padding".
68648      (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)(
68649      // translators: %s: The name of the control to display e.g. "Padding".
68650      (0,external_wp_i18n_namespaceObject.__)('Show %s'), label);
68651      return (0,external_React_.createElement)(menu_item, {
68652        key: label,
68653        icon: isSelected ? library_check : null,
68654        isSelected: isSelected,
68655        label: itemLabel,
68656        onClick: () => {
68657          if (isSelected) {
68658            (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
68659            // translators: %s: The name of the control being reset e.g. "Padding".
68660            (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive');
68661          } else {
68662            (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)(
68663            // translators: %s: The name of the control being reset e.g. "Padding".
68664            (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive');
68665          }
68666          toggleItem(label);
68667        },
68668        role: "menuitemcheckbox"
68669      }, label);
68670    }));
68671  };
68672  const component_ToolsPanelHeader = (props, forwardedRef) => {
68673    const {
68674      areAllOptionalControlsHidden,
68675      defaultControlsItemClassName,
68676      dropdownMenuClassName,
68677      hasMenuItems,
68678      headingClassName,
68679      headingLevel = 2,
68680      label: labelText,
68681      menuItems,
68682      resetAll,
68683      toggleItem,
68684      dropdownMenuProps,
68685      ...headerProps
68686    } = useToolsPanelHeader(props);
68687    if (!labelText) {
68688      return null;
68689    }
68690    const defaultItems = Object.entries(menuItems?.default || {});
68691    const optionalItems = Object.entries(menuItems?.optional || {});
68692    const dropDownMenuIcon = areAllOptionalControlsHidden ? library_plus : more_vertical;
68693    const dropDownMenuLabelText = (0,external_wp_i18n_namespaceObject.sprintf)(
68694    // translators: %s: The name of the tool e.g. "Color" or "Typography".
68695    (0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal tool panel options'), labelText);
68696    const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject.__)('All options are currently hidden') : undefined;
68697    const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);
68698    return (0,external_React_.createElement)(h_stack_component, {
68699      ...headerProps,
68700      ref: forwardedRef
68701    }, (0,external_React_.createElement)(heading_component, {
68702      level: headingLevel,
68703      className: headingClassName
68704    }, labelText), hasMenuItems && (0,external_React_.createElement)(dropdown_menu, {
68705      ...dropdownMenuProps,
68706      icon: dropDownMenuIcon,
68707      label: dropDownMenuLabelText,
68708      menuProps: {
68709        className: dropdownMenuClassName
68710      },
68711      toggleProps: {
68712        isSmall: true,
68713        describedBy: dropdownMenuDescriptionText
68714      }
68715    }, () => (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(menu_group, {
68716      label: labelText
68717    }, (0,external_React_.createElement)(DefaultControlsGroup, {
68718      items: defaultItems,
68719      toggleItem: toggleItem,
68720      itemClassName: defaultControlsItemClassName
68721    }), (0,external_React_.createElement)(OptionalControlsGroup, {
68722      items: optionalItems,
68723      toggleItem: toggleItem
68724    })), (0,external_React_.createElement)(menu_group, null, (0,external_React_.createElement)(menu_item, {
68725      "aria-disabled": !canResetAll
68726      // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
68727      // we should rename it and explicitly allow it as an official API. All the other Button variants
68728      // don't make sense in a MenuItem context, and should be disallowed.
68729      ,
68730      variant: 'tertiary',
68731      onClick: () => {
68732        if (canResetAll) {
68733          resetAll();
68734          (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive');
68735        }
68736      }
68737    }, (0,external_wp_i18n_namespaceObject.__)('Reset all'))))));
68738  };
68739  const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader');
68740  /* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader);
68741  
68742  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/hook.js
68743  /**
68744   * WordPress dependencies
68745   */
68746  
68747  
68748  /**
68749   * Internal dependencies
68750   */
68751  
68752  
68753  
68754  const DEFAULT_COLUMNS = 2;
68755  const generateMenuItems = ({
68756    panelItems,
68757    shouldReset,
68758    currentMenuItems,
68759    menuItemOrder
68760  }) => {
68761    const newMenuItems = {
68762      default: {},
68763      optional: {}
68764    };
68765    const menuItems = {
68766      default: {},
68767      optional: {}
68768    };
68769    panelItems.forEach(({
68770      hasValue,
68771      isShownByDefault,
68772      label
68773    }) => {
68774      const group = isShownByDefault ? 'default' : 'optional';
68775  
68776      // If a menu item for this label has already been flagged as customized
68777      // (for default controls), or toggled on (for optional controls), do not
68778      // overwrite its value as those controls would lose that state.
68779      const existingItemValue = currentMenuItems?.[group]?.[label];
68780      const value = existingItemValue ? existingItemValue : hasValue();
68781      newMenuItems[group][label] = shouldReset ? false : value;
68782    });
68783  
68784    // Loop the known, previously registered items first to maintain menu order.
68785    menuItemOrder.forEach(key => {
68786      if (newMenuItems.default.hasOwnProperty(key)) {
68787        menuItems.default[key] = newMenuItems.default[key];
68788      }
68789      if (newMenuItems.optional.hasOwnProperty(key)) {
68790        menuItems.optional[key] = newMenuItems.optional[key];
68791      }
68792    });
68793  
68794    // Loop newMenuItems object adding any that aren't in the known items order.
68795    Object.keys(newMenuItems.default).forEach(key => {
68796      if (!menuItems.default.hasOwnProperty(key)) {
68797        menuItems.default[key] = newMenuItems.default[key];
68798      }
68799    });
68800    Object.keys(newMenuItems.optional).forEach(key => {
68801      if (!menuItems.optional.hasOwnProperty(key)) {
68802        menuItems.optional[key] = newMenuItems.optional[key];
68803      }
68804    });
68805    return menuItems;
68806  };
68807  const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0;
68808  function useToolsPanel(props) {
68809    const {
68810      className,
68811      headingLevel = 2,
68812      resetAll,
68813      panelId,
68814      hasInnerWrapper = false,
68815      shouldRenderPlaceholderItems = false,
68816      __experimentalFirstVisibleItemClass,
68817      __experimentalLastVisibleItemClass,
68818      ...otherProps
68819    } = useContextSystem(props, 'ToolsPanel');
68820    const isResetting = (0,external_wp_element_namespaceObject.useRef)(false);
68821    const wasResetting = isResetting.current;
68822  
68823    // `isResetting` is cleared via this hook to effectively batch together
68824    // the resetAll task. Without this, the flag is cleared after the first
68825    // control updates and forces a rerender with subsequent controls then
68826    // believing they need to reset, unfortunately using stale data.
68827    (0,external_wp_element_namespaceObject.useEffect)(() => {
68828      if (wasResetting) {
68829        isResetting.current = false;
68830      }
68831    }, [wasResetting]);
68832  
68833    // Allow panel items to register themselves.
68834    const [panelItems, setPanelItems] = (0,external_wp_element_namespaceObject.useState)([]);
68835    const [menuItemOrder, setMenuItemOrder] = (0,external_wp_element_namespaceObject.useState)([]);
68836    const [resetAllFilters, setResetAllFilters] = (0,external_wp_element_namespaceObject.useState)([]);
68837    const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => {
68838      // Add item to panel items.
68839      setPanelItems(items => {
68840        const newItems = [...items];
68841        // If an item with this label has already been registered, remove it
68842        // first. This can happen when an item is moved between the default
68843        // and optional groups.
68844        const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label);
68845        if (existingIndex !== -1) {
68846          newItems.splice(existingIndex, 1);
68847        }
68848        return [...newItems, item];
68849      });
68850  
68851      // Track the initial order of item registration. This is used for
68852      // maintaining menu item order later.
68853      setMenuItemOrder(items => {
68854        if (items.includes(item.label)) {
68855          return items;
68856        }
68857        return [...items, item.label];
68858      });
68859    }, [setPanelItems, setMenuItemOrder]);
68860  
68861    // Panels need to deregister on unmount to avoid orphans in menu state.
68862    // This is an issue when panel items are being injected via SlotFills.
68863    const deregisterPanelItem = (0,external_wp_element_namespaceObject.useCallback)(label => {
68864      // When switching selections between components injecting matching
68865      // controls, e.g. both panels have a "padding" control, the
68866      // deregistration of the first panel doesn't occur until after the
68867      // registration of the next.
68868      setPanelItems(items => {
68869        const newItems = [...items];
68870        const index = newItems.findIndex(item => item.label === label);
68871        if (index !== -1) {
68872          newItems.splice(index, 1);
68873        }
68874        return newItems;
68875      });
68876    }, [setPanelItems]);
68877    const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(newFilter => {
68878      setResetAllFilters(filters => {
68879        return [...filters, newFilter];
68880      });
68881    }, [setResetAllFilters]);
68882    const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filterToRemove => {
68883      setResetAllFilters(filters => {
68884        return filters.filter(filter => filter !== filterToRemove);
68885      });
68886    }, [setResetAllFilters]);
68887  
68888    // Manage and share display state of menu items representing child controls.
68889    const [menuItems, setMenuItems] = (0,external_wp_element_namespaceObject.useState)({
68890      default: {},
68891      optional: {}
68892    });
68893  
68894    // Setup menuItems state as panel items register themselves.
68895    (0,external_wp_element_namespaceObject.useEffect)(() => {
68896      setMenuItems(prevState => {
68897        const items = generateMenuItems({
68898          panelItems,
68899          shouldReset: false,
68900          currentMenuItems: prevState,
68901          menuItemOrder
68902        });
68903        return items;
68904      });
68905    }, [panelItems, setMenuItems, menuItemOrder]);
68906  
68907    // Force a menu item to be checked.
68908    // This is intended for use with default panel items. They are displayed
68909    // separately to optional items and have different display states,
68910    // we need to update that when their value is customized.
68911    const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((label, group = 'default') => {
68912      setMenuItems(items => {
68913        const newState = {
68914          ...items,
68915          [group]: {
68916            ...items[group],
68917            [label]: true
68918          }
68919        };
68920        return newState;
68921      });
68922    }, [setMenuItems]);
68923  
68924    // Whether all optional menu items are hidden or not must be tracked
68925    // in order to later determine if the panel display is empty and handle
68926    // conditional display of a plus icon to indicate the presence of further
68927    // menu items.
68928    const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0,external_wp_element_namespaceObject.useState)(false);
68929    (0,external_wp_element_namespaceObject.useEffect)(() => {
68930      if (isMenuItemTypeEmpty(menuItems?.default) && !isMenuItemTypeEmpty(menuItems?.optional)) {
68931        const allControlsHidden = !Object.entries(menuItems.optional).some(([, isSelected]) => isSelected);
68932        setAreAllOptionalControlsHidden(allControlsHidden);
68933      }
68934    }, [menuItems, setAreAllOptionalControlsHidden]);
68935    const cx = useCx();
68936    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
68937      const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
68938      const emptyStyle = isMenuItemTypeEmpty(menuItems?.default) && areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper;
68939      return cx(ToolsPanel(DEFAULT_COLUMNS), wrapperStyle, emptyStyle, className);
68940    }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]);
68941  
68942    // Toggle the checked state of a menu item which is then used to determine
68943    // display of the item within the panel.
68944    const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => {
68945      const currentItem = panelItems.find(item => item.label === label);
68946      if (!currentItem) {
68947        return;
68948      }
68949      const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
68950      const newMenuItems = {
68951        ...menuItems,
68952        [menuGroup]: {
68953          ...menuItems[menuGroup],
68954          [label]: !menuItems[menuGroup][label]
68955        }
68956      };
68957      setMenuItems(newMenuItems);
68958    }, [menuItems, panelItems, setMenuItems]);
68959  
68960    // Resets display of children and executes resetAll callback if available.
68961    const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => {
68962      if (typeof resetAll === 'function') {
68963        isResetting.current = true;
68964        resetAll(resetAllFilters);
68965      }
68966  
68967      // Turn off display of all non-default items.
68968      const resetMenuItems = generateMenuItems({
68969        panelItems,
68970        menuItemOrder,
68971        shouldReset: true
68972      });
68973      setMenuItems(resetMenuItems);
68974    }, [panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder]);
68975  
68976    // Assist ItemGroup styling when there are potentially hidden placeholder
68977    // items by identifying first & last items that are toggled on for display.
68978    const getFirstVisibleItemLabel = items => {
68979      const optionalItems = menuItems.optional || {};
68980      const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]);
68981      return firstItem?.label;
68982    };
68983    const firstDisplayedItem = getFirstVisibleItemLabel(panelItems);
68984    const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse());
68985    const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({
68986      areAllOptionalControlsHidden,
68987      deregisterPanelItem,
68988      deregisterResetAllFilter,
68989      firstDisplayedItem,
68990      flagItemCustomization,
68991      hasMenuItems: !!panelItems.length,
68992      isResetting: isResetting.current,
68993      lastDisplayedItem,
68994      menuItems,
68995      panelId,
68996      registerPanelItem,
68997      registerResetAllFilter,
68998      shouldRenderPlaceholderItems,
68999      __experimentalFirstVisibleItemClass,
69000      __experimentalLastVisibleItemClass
69001    }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, panelItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
69002    return {
69003      ...otherProps,
69004      headingLevel,
69005      panelContext,
69006      resetAllItems,
69007      toggleItem,
69008      className: classes
69009    };
69010  }
69011  
69012  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js
69013  
69014  /**
69015   * External dependencies
69016   */
69017  
69018  /**
69019   * Internal dependencies
69020   */
69021  
69022  
69023  
69024  
69025  
69026  const UnconnectedToolsPanel = (props, forwardedRef) => {
69027    const {
69028      children,
69029      label,
69030      panelContext,
69031      resetAllItems,
69032      toggleItem,
69033      headingLevel,
69034      dropdownMenuProps,
69035      ...toolsPanelProps
69036    } = useToolsPanel(props);
69037    return (0,external_React_.createElement)(grid_component, {
69038      ...toolsPanelProps,
69039      columns: 2,
69040      ref: forwardedRef
69041    }, (0,external_React_.createElement)(ToolsPanelContext.Provider, {
69042      value: panelContext
69043    }, (0,external_React_.createElement)(tools_panel_header_component, {
69044      label: label,
69045      resetAll: resetAllItems,
69046      toggleItem: toggleItem,
69047      headingLevel: headingLevel,
69048      dropdownMenuProps: dropdownMenuProps
69049    }), children));
69050  };
69051  
69052  /**
69053   * The `ToolsPanel` is a container component that displays its children preceded
69054   * by a header. The header includes a dropdown menu which is automatically
69055   * generated from the panel's inner `ToolsPanelItems`.
69056   *
69057   * ```jsx
69058   * import { __ } from '@wordpress/i18n';
69059   * import {
69060   *   __experimentalToolsPanel as ToolsPanel,
69061   *   __experimentalToolsPanelItem as ToolsPanelItem,
69062   *   __experimentalUnitControl as UnitControl
69063   * } from '@wordpress/components';
69064   *
69065   * function Example() {
69066   *   const [ height, setHeight ] = useState();
69067   *   const [ width, setWidth ] = useState();
69068   *
69069   *   const resetAll = () => {
69070   *     setHeight();
69071   *     setWidth();
69072   *   }
69073   *
69074   *   return (
69075   *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
69076   *       <ToolsPanelItem
69077   *         hasValue={ () => !! height }
69078   *         label={ __( 'Height' ) }
69079   *         onDeselect={ () => setHeight() }
69080   *       >
69081   *         <UnitControl
69082   *           label={ __( 'Height' ) }
69083   *           onChange={ setHeight }
69084   *           value={ height }
69085   *         />
69086   *       </ToolsPanelItem>
69087   *       <ToolsPanelItem
69088   *         hasValue={ () => !! width }
69089   *         label={ __( 'Width' ) }
69090   *         onDeselect={ () => setWidth() }
69091   *       >
69092   *         <UnitControl
69093   *           label={ __( 'Width' ) }
69094   *           onChange={ setWidth }
69095   *           value={ width }
69096   *         />
69097   *       </ToolsPanelItem>
69098   *     </ToolsPanel>
69099   *   );
69100   * }
69101   * ```
69102   */
69103  const component_ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel');
69104  /* harmony default export */ const tools_panel_component = (component_ToolsPanel);
69105  
69106  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/hook.js
69107  /**
69108   * WordPress dependencies
69109   */
69110  
69111  
69112  
69113  /**
69114   * Internal dependencies
69115   */
69116  
69117  
69118  
69119  
69120  const hook_noop = () => {};
69121  function useToolsPanelItem(props) {
69122    const {
69123      className,
69124      hasValue,
69125      isShownByDefault = false,
69126      label,
69127      panelId,
69128      resetAllFilter = hook_noop,
69129      onDeselect,
69130      onSelect,
69131      ...otherProps
69132    } = useContextSystem(props, 'ToolsPanelItem');
69133    const {
69134      panelId: currentPanelId,
69135      menuItems,
69136      registerResetAllFilter,
69137      deregisterResetAllFilter,
69138      registerPanelItem,
69139      deregisterPanelItem,
69140      flagItemCustomization,
69141      isResetting,
69142      shouldRenderPlaceholderItems: shouldRenderPlaceholder,
69143      firstDisplayedItem,
69144      lastDisplayedItem,
69145      __experimentalFirstVisibleItemClass,
69146      __experimentalLastVisibleItemClass
69147    } = useToolsPanelContext();
69148  
69149    // hasValue is a new function on every render, so do not add it as a
69150    // dependency to the useCallback hook! If needed, we should use a ref.
69151    // eslint-disable-next-line react-hooks/exhaustive-deps
69152    const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId]);
69153    // resetAllFilter is a new function on every render, so do not add it as a
69154    // dependency to the useCallback hook! If needed, we should use a ref.
69155    // eslint-disable-next-line react-hooks/exhaustive-deps
69156    const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId]);
69157    const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId);
69158    const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
69159  
69160    // Registering the panel item allows the panel to include it in its
69161    // automatically generated menu and determine its initial checked status.
69162    //
69163    // This is performed in a layout effect to ensure that the panel item
69164    // is registered before it is rendered preventing a rendering glitch.
69165    // See: https://github.com/WordPress/gutenberg/issues/56470
69166    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
69167      if (hasMatchingPanel && previousPanelId !== null) {
69168        registerPanelItem({
69169          hasValue: hasValueCallback,
69170          isShownByDefault,
69171          label,
69172          panelId
69173        });
69174      }
69175      return () => {
69176        if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {
69177          deregisterPanelItem(label);
69178        }
69179      };
69180    }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);
69181    (0,external_wp_element_namespaceObject.useEffect)(() => {
69182      if (hasMatchingPanel) {
69183        registerResetAllFilter(resetAllFilterCallback);
69184      }
69185      return () => {
69186        if (hasMatchingPanel) {
69187          deregisterResetAllFilter(resetAllFilterCallback);
69188        }
69189      };
69190    }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);
69191  
69192    // Note: `label` is used as a key when building menu item state in
69193    // `ToolsPanel`.
69194    const menuGroup = isShownByDefault ? 'default' : 'optional';
69195    const isMenuItemChecked = menuItems?.[menuGroup]?.[label];
69196    const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked);
69197    const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;
69198    const isValueSet = hasValue();
69199    const wasValueSet = (0,external_wp_compose_namespaceObject.usePrevious)(isValueSet);
69200    const newValueSet = isValueSet && !wasValueSet;
69201  
69202    // Notify the panel when an item's value has been set.
69203    (0,external_wp_element_namespaceObject.useEffect)(() => {
69204      if (!newValueSet) {
69205        return;
69206      }
69207      flagItemCustomization(label, menuGroup);
69208    }, [newValueSet, menuGroup, label, flagItemCustomization]);
69209  
69210    // Determine if the panel item's corresponding menu is being toggled and
69211    // trigger appropriate callback if it is.
69212    (0,external_wp_element_namespaceObject.useEffect)(() => {
69213      // We check whether this item is currently registered as items rendered
69214      // via fills can persist through the parent panel being remounted.
69215      // See: https://github.com/WordPress/gutenberg/pull/45673
69216      if (!isRegistered || isResetting || !hasMatchingPanel) {
69217        return;
69218      }
69219      if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {
69220        onSelect?.();
69221      }
69222      if (!isMenuItemChecked && wasMenuItemChecked) {
69223        onDeselect?.();
69224      }
69225    }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);
69226  
69227    // The item is shown if it is a default control regardless of whether it
69228    // has a value. Optional items are shown when they are checked or have
69229    // a value.
69230    const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;
69231    const cx = useCx();
69232    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {
69233      const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;
69234      const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
69235      const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;
69236      return cx(ToolsPanelItem, shouldApplyPlaceholderStyles && ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle);
69237    }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);
69238    return {
69239      ...otherProps,
69240      isShown,
69241      shouldRenderPlaceholder,
69242      className: classes
69243    };
69244  }
69245  
69246  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js
69247  
69248  /**
69249   * External dependencies
69250   */
69251  
69252  /**
69253   * Internal dependencies
69254   */
69255  
69256  
69257  
69258  // This wraps controls to be conditionally displayed within a tools panel. It
69259  // prevents props being applied to HTML elements that would make them invalid.
69260  const UnconnectedToolsPanelItem = (props, forwardedRef) => {
69261    const {
69262      children,
69263      isShown,
69264      shouldRenderPlaceholder,
69265      ...toolsPanelItemProps
69266    } = useToolsPanelItem(props);
69267    if (!isShown) {
69268      return shouldRenderPlaceholder ? (0,external_React_.createElement)(component, {
69269        ...toolsPanelItemProps,
69270        ref: forwardedRef
69271      }) : null;
69272    }
69273    return (0,external_React_.createElement)(component, {
69274      ...toolsPanelItemProps,
69275      ref: forwardedRef
69276    }, children);
69277  };
69278  const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem');
69279  /* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem);
69280  
69281  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js
69282  /**
69283   * WordPress dependencies
69284   */
69285  
69286  const RovingTabIndexContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
69287  const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext);
69288  const RovingTabIndexProvider = RovingTabIndexContext.Provider;
69289  
69290  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js
69291  
69292  /**
69293   * WordPress dependencies
69294   */
69295  
69296  
69297  /**
69298   * Internal dependencies
69299   */
69300  
69301  
69302  /**
69303   * Provider for adding roving tab index behaviors to tree grid structures.
69304   *
69305   * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
69306   */
69307  function RovingTabIndex({
69308    children
69309  }) {
69310    const [lastFocusedElement, setLastFocusedElement] = (0,external_wp_element_namespaceObject.useState)();
69311  
69312    // Use `useMemo` to avoid creation of a new object for the providerValue
69313    // on every render. Only create a new object when the `lastFocusedElement`
69314    // value changes.
69315    const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
69316      lastFocusedElement,
69317      setLastFocusedElement
69318    }), [lastFocusedElement]);
69319    return (0,external_React_.createElement)(RovingTabIndexProvider, {
69320      value: providerValue
69321    }, children);
69322  }
69323  
69324  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/index.js
69325  
69326  /**
69327   * WordPress dependencies
69328   */
69329  
69330  
69331  
69332  
69333  /**
69334   * Internal dependencies
69335   */
69336  
69337  /**
69338   * Return focusables in a row element, excluding those from other branches
69339   * nested within the row.
69340   *
69341   * @param rowElement The DOM element representing the row.
69342   *
69343   * @return The array of focusables in the row.
69344   */
69345  function getRowFocusables(rowElement) {
69346    const focusablesInRow = external_wp_dom_namespaceObject.focus.focusable.find(rowElement, {
69347      sequential: true
69348    });
69349    return focusablesInRow.filter(focusable => {
69350      return focusable.closest('[role="row"]') === rowElement;
69351    });
69352  }
69353  
69354  /**
69355   * Renders both a table and tbody element, used to create a tree hierarchy.
69356   *
69357   */
69358  function UnforwardedTreeGrid({
69359    children,
69360    onExpandRow = () => {},
69361    onCollapseRow = () => {},
69362    onFocusRow = () => {},
69363    applicationAriaLabel,
69364    ...props
69365  }, /** A ref to the underlying DOM table element. */
69366  ref) {
69367    const onKeyDown = (0,external_wp_element_namespaceObject.useCallback)(event => {
69368      const {
69369        keyCode,
69370        metaKey,
69371        ctrlKey,
69372        altKey
69373      } = event;
69374  
69375      // The shift key is intentionally absent from the following list,
69376      // to enable shift + up/down to select items from the list.
69377      const hasModifierKeyPressed = metaKey || ctrlKey || altKey;
69378      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)) {
69379        return;
69380      }
69381  
69382      // The event will be handled, stop propagation.
69383      event.stopPropagation();
69384      const {
69385        activeElement
69386      } = document;
69387      const {
69388        currentTarget: treeGridElement
69389      } = event;
69390      if (!activeElement || !treeGridElement.contains(activeElement)) {
69391        return;
69392      }
69393  
69394      // Calculate the columnIndex of the active element.
69395      const activeRow = activeElement.closest('[role="row"]');
69396      if (!activeRow) {
69397        return;
69398      }
69399      const focusablesInRow = getRowFocusables(activeRow);
69400      const currentColumnIndex = focusablesInRow.indexOf(activeElement);
69401      const canExpandCollapse = 0 === currentColumnIndex;
69402      const cannotFocusNextColumn = canExpandCollapse && (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') && keyCode === external_wp_keycodes_namespaceObject.RIGHT;
69403      if ([external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT].includes(keyCode)) {
69404        // Calculate to the next element.
69405        let nextIndex;
69406        if (keyCode === external_wp_keycodes_namespaceObject.LEFT) {
69407          nextIndex = Math.max(0, currentColumnIndex - 1);
69408        } else {
69409          nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1);
69410        }
69411  
69412        // Focus is at the left most column.
69413        if (canExpandCollapse) {
69414          if (keyCode === external_wp_keycodes_namespaceObject.LEFT) {
69415            var _activeRow$getAttribu;
69416            // Left:
69417            // If a row is focused, and it is expanded, collapses the current row.
69418            if (activeRow.getAttribute('data-expanded') === 'true' || activeRow.getAttribute('aria-expanded') === 'true') {
69419              onCollapseRow(activeRow);
69420              event.preventDefault();
69421              return;
69422            }
69423            // If a row is focused, and it is collapsed, moves to the parent row (if there is one).
69424            const level = Math.max(parseInt((_activeRow$getAttribu = activeRow?.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : '1', 10) - 1, 1);
69425            const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
69426            let parentRow = activeRow;
69427            const currentRowIndex = rows.indexOf(activeRow);
69428            for (let i = currentRowIndex; i >= 0; i--) {
69429              const ariaLevel = rows[i].getAttribute('aria-level');
69430              if (ariaLevel !== null && parseInt(ariaLevel, 10) === level) {
69431                parentRow = rows[i];
69432                break;
69433              }
69434            }
69435            getRowFocusables(parentRow)?.[0]?.focus();
69436          }
69437          if (keyCode === external_wp_keycodes_namespaceObject.RIGHT) {
69438            // Right:
69439            // If a row is focused, and it is collapsed, expands the current row.
69440            if (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') {
69441              onExpandRow(activeRow);
69442              event.preventDefault();
69443              return;
69444            }
69445            // If a row is focused, and it is expanded, focuses the next cell in the row.
69446            const focusableItems = getRowFocusables(activeRow);
69447            if (focusableItems.length > 0) {
69448              focusableItems[nextIndex]?.focus();
69449            }
69450          }
69451          // Prevent key use for anything else. For example, Voiceover
69452          // will start reading text on continued use of left/right arrow
69453          // keys.
69454          event.preventDefault();
69455          return;
69456        }
69457  
69458        // 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.
69459        if (cannotFocusNextColumn) {
69460          return;
69461        }
69462        focusablesInRow[nextIndex].focus();
69463  
69464        // Prevent key use for anything else. This ensures Voiceover
69465        // doesn't try to handle key navigation.
69466        event.preventDefault();
69467      } else if ([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN].includes(keyCode)) {
69468        // Calculate the rowIndex of the next row.
69469        const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
69470        const currentRowIndex = rows.indexOf(activeRow);
69471        let nextRowIndex;
69472        if (keyCode === external_wp_keycodes_namespaceObject.UP) {
69473          nextRowIndex = Math.max(0, currentRowIndex - 1);
69474        } else {
69475          nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1);
69476        }
69477  
69478        // Focus is either at the top or bottom edge of the grid. Do nothing.
69479        if (nextRowIndex === currentRowIndex) {
69480          // Prevent key use for anything else. For example, Voiceover
69481          // will start navigating horizontally when reaching the vertical
69482          // bounds of a table.
69483          event.preventDefault();
69484          return;
69485        }
69486  
69487        // Get the focusables in the next row.
69488        const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]);
69489  
69490        // If for some reason there are no focusables in the next row, do nothing.
69491        if (!focusablesInNextRow || !focusablesInNextRow.length) {
69492          // Prevent key use for anything else. For example, Voiceover
69493          // will still focus text when using arrow keys, while this
69494          // component should limit navigation to focusables.
69495          event.preventDefault();
69496          return;
69497        }
69498  
69499        // Try to focus the element in the next row that's at a similar column to the activeElement.
69500        const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
69501        focusablesInNextRow[nextIndex].focus();
69502  
69503        // Let consumers know the row that was originally focused,
69504        // and the row that is now in focus.
69505        onFocusRow(event, activeRow, rows[nextRowIndex]);
69506  
69507        // Prevent key use for anything else. This ensures Voiceover
69508        // doesn't try to handle key navigation.
69509        event.preventDefault();
69510      } else if ([external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) {
69511        // Calculate the rowIndex of the next row.
69512        const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]'));
69513        const currentRowIndex = rows.indexOf(activeRow);
69514        let nextRowIndex;
69515        if (keyCode === external_wp_keycodes_namespaceObject.HOME) {
69516          nextRowIndex = 0;
69517        } else {
69518          nextRowIndex = rows.length - 1;
69519        }
69520  
69521        // Focus is either at the top or bottom edge of the grid. Do nothing.
69522        if (nextRowIndex === currentRowIndex) {
69523          // Prevent key use for anything else. For example, Voiceover
69524          // will start navigating horizontally when reaching the vertical
69525          // bounds of a table.
69526          event.preventDefault();
69527          return;
69528        }
69529  
69530        // Get the focusables in the next row.
69531        const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]);
69532  
69533        // If for some reason there are no focusables in the next row, do nothing.
69534        if (!focusablesInNextRow || !focusablesInNextRow.length) {
69535          // Prevent key use for anything else. For example, Voiceover
69536          // will still focus text when using arrow keys, while this
69537          // component should limit navigation to focusables.
69538          event.preventDefault();
69539          return;
69540        }
69541  
69542        // Try to focus the element in the next row that's at a similar column to the activeElement.
69543        const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1);
69544        focusablesInNextRow[nextIndex].focus();
69545  
69546        // Let consumers know the row that was originally focused,
69547        // and the row that is now in focus.
69548        onFocusRow(event, activeRow, rows[nextRowIndex]);
69549  
69550        // Prevent key use for anything else. This ensures Voiceover
69551        // doesn't try to handle key navigation.
69552        event.preventDefault();
69553      }
69554    }, [onExpandRow, onCollapseRow, onFocusRow]);
69555  
69556    /* Disable reason: A treegrid is implemented using a table element. */
69557    /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
69558    return (0,external_React_.createElement)(RovingTabIndex, null, (0,external_React_.createElement)("div", {
69559      role: "application",
69560      "aria-label": applicationAriaLabel
69561    }, (0,external_React_.createElement)("table", {
69562      ...props,
69563      role: "treegrid",
69564      onKeyDown: onKeyDown,
69565      ref: ref
69566    }, (0,external_React_.createElement)("tbody", null, children))));
69567    /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
69568  }
69569  
69570  /**
69571   * `TreeGrid` is used to create a tree hierarchy.
69572   * It is not a visually styled component, but instead helps with adding
69573   * keyboard navigation and roving tab index behaviors to tree grid structures.
69574   *
69575   * A tree grid is a hierarchical 2 dimensional UI component, for example it could be
69576   * used to implement a file system browser.
69577   *
69578   * A tree grid allows the user to navigate using arrow keys.
69579   * Up/down to navigate vertically across rows, and left/right to navigate horizontally
69580   * between focusables in a row.
69581   *
69582   * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used
69583   * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.
69584   *
69585   * ```jsx
69586   * function TreeMenu() {
69587   *     return (
69588   *         <TreeGrid>
69589   *             <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
69590   *                 <TreeGridCell>
69591   *                     { ( props ) => (
69592   *                         <Button onClick={ onSelect } { ...props }>Select</Button>
69593   *                     ) }
69594   *                 </TreeGridCell>
69595   *                 <TreeGridCell>
69596   *                     { ( props ) => (
69597   *                         <Button onClick={ onMove } { ...props }>Move</Button>
69598   *                     ) }
69599   *                 </TreeGridCell>
69600   *             </TreeGridRow>
69601   *             <TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
69602   *                 <TreeGridCell>
69603   *                     { ( props ) => (
69604   *                         <Button onClick={ onSelect } { ...props }>Select</Button>
69605   *                     ) }
69606   *                 </TreeGridCell>
69607   *                 <TreeGridCell>
69608   *                     { ( props ) => (
69609   *                         <Button onClick={ onMove } { ...props }>Move</Button>
69610   *                     ) }
69611   *                 </TreeGridCell>
69612   *             </TreeGridRow>
69613   *             <TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
69614   *                 <TreeGridCell>
69615   *                     { ( props ) => (
69616   *                         <Button onClick={ onSelect } { ...props }>Select</Button>
69617   *                     ) }
69618   *                 </TreeGridCell>
69619   *                 <TreeGridCell>
69620   *                     { ( props ) => (
69621   *                         <Button onClick={ onMove } { ...props }>Move</Button>
69622   *                     ) }
69623   *                 </TreeGridCell>
69624   *             </TreeGridRow>
69625   *         </TreeGrid>
69626   *     );
69627   * }
69628   * ```
69629   *
69630   * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
69631   */
69632  const TreeGrid = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGrid);
69633  /* harmony default export */ const tree_grid = (TreeGrid);
69634  
69635  
69636  
69637  
69638  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/row.js
69639  
69640  /**
69641   * WordPress dependencies
69642   */
69643  
69644  
69645  /**
69646   * Internal dependencies
69647   */
69648  
69649  function UnforwardedTreeGridRow({
69650    children,
69651    level,
69652    positionInSet,
69653    setSize,
69654    isExpanded,
69655    ...props
69656  }, ref) {
69657    return (0,external_React_.createElement)("tr", {
69658      ...props,
69659      ref: ref,
69660      role: "row",
69661      "aria-level": level,
69662      "aria-posinset": positionInSet,
69663      "aria-setsize": setSize,
69664      "aria-expanded": isExpanded
69665    }, children);
69666  }
69667  
69668  /**
69669   * `TreeGridRow` is used to create a tree hierarchy.
69670   * It is not a visually styled component, but instead helps with adding
69671   * keyboard navigation and roving tab index behaviors to tree grid structures.
69672   *
69673   * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
69674   */
69675  const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow);
69676  /* harmony default export */ const tree_grid_row = (TreeGridRow);
69677  
69678  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js
69679  
69680  /**
69681   * WordPress dependencies
69682   */
69683  
69684  
69685  /**
69686   * Internal dependencies
69687   */
69688  
69689  const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({
69690    children,
69691    as: Component,
69692    ...props
69693  }, forwardedRef) {
69694    const localRef = (0,external_wp_element_namespaceObject.useRef)();
69695    const ref = forwardedRef || localRef;
69696    // @ts-expect-error - We actually want to throw an error if this is undefined.
69697    const {
69698      lastFocusedElement,
69699      setLastFocusedElement
69700    } = useRovingTabIndexContext();
69701    let tabIndex;
69702    if (lastFocusedElement) {
69703      tabIndex = lastFocusedElement === (
69704      // TODO: The original implementation simply used `ref.current` here, assuming
69705      // that a forwarded ref would always be an object, which is not necessarily true.
69706      // This workaround maintains the original runtime behavior in a type-safe way,
69707      // but should be revisited.
69708      'current' in ref ? ref.current : undefined) ? 0 : -1;
69709    }
69710    const onFocus = event => setLastFocusedElement?.(event.target);
69711    const allProps = {
69712      ref,
69713      tabIndex,
69714      onFocus,
69715      ...props
69716    };
69717    if (typeof children === 'function') {
69718      return children(allProps);
69719    }
69720    if (!Component) return null;
69721    return (0,external_React_.createElement)(Component, {
69722      ...allProps
69723    }, children);
69724  });
69725  /* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem);
69726  
69727  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/item.js
69728  
69729  /**
69730   * WordPress dependencies
69731   */
69732  
69733  
69734  /**
69735   * Internal dependencies
69736   */
69737  
69738  function UnforwardedTreeGridItem({
69739    children,
69740    ...props
69741  }, ref) {
69742    return (0,external_React_.createElement)(roving_tab_index_item, {
69743      ref: ref,
69744      ...props
69745    }, children);
69746  }
69747  
69748  /**
69749   * `TreeGridItem` is used to create a tree hierarchy.
69750   * It is not a visually styled component, but instead helps with adding
69751   * keyboard navigation and roving tab index behaviors to tree grid structures.
69752   *
69753   * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
69754   */
69755  const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem);
69756  /* harmony default export */ const tree_grid_item = (TreeGridItem);
69757  
69758  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/cell.js
69759  
69760  /**
69761   * WordPress dependencies
69762   */
69763  
69764  
69765  /**
69766   * Internal dependencies
69767   */
69768  
69769  function UnforwardedTreeGridCell({
69770    children,
69771    withoutGridItem = false,
69772    ...props
69773  }, ref) {
69774    return (0,external_React_.createElement)("td", {
69775      ...props,
69776      role: "gridcell"
69777    }, withoutGridItem ? (0,external_React_.createElement)(external_React_.Fragment, null, children) : (0,external_React_.createElement)(tree_grid_item, {
69778      ref: ref
69779    }, children));
69780  }
69781  
69782  /**
69783   * `TreeGridCell` is used to create a tree hierarchy.
69784   * It is not a visually styled component, but instead helps with adding
69785   * keyboard navigation and roving tab index behaviors to tree grid structures.
69786   *
69787   * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
69788   */
69789  const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell);
69790  /* harmony default export */ const cell = (TreeGridCell);
69791  
69792  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js
69793  
69794  /**
69795   * External dependencies
69796   */
69797  
69798  /**
69799   * WordPress dependencies
69800   */
69801  
69802  
69803  function stopPropagation(event) {
69804    event.stopPropagation();
69805  }
69806  const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => {
69807    external_wp_deprecated_default()('wp.components.IsolatedEventContainer', {
69808      since: '5.7'
69809    });
69810  
69811    // Disable reason: this stops certain events from propagating outside of the component.
69812    // - onMouseDown is disabled as this can cause interactions with other DOM elements.
69813    /* eslint-disable jsx-a11y/no-static-element-interactions */
69814    return (0,external_React_.createElement)("div", {
69815      ...props,
69816      ref: ref,
69817      onMouseDown: stopPropagation
69818    });
69819    /* eslint-enable jsx-a11y/no-static-element-interactions */
69820  });
69821  /* harmony default export */ const isolated_event_container = (IsolatedEventContainer);
69822  
69823  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js
69824  /**
69825   * External dependencies
69826   */
69827  
69828  
69829  /**
69830   * WordPress dependencies
69831   */
69832  
69833  
69834  /**
69835   * Internal dependencies
69836   */
69837  
69838  function useSlotFills(name) {
69839    const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context);
69840    const fills = useSnapshot(registry.fills, {
69841      sync: true
69842    });
69843    // The important bit here is that this call ensures that the hook
69844    // only causes a re-render if the "fills" of a given slot name
69845    // change, not any fills.
69846    return fills.get(name);
69847  }
69848  
69849  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/styles.js
69850  
69851  function 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)."; }
69852  /**
69853   * External dependencies
69854   */
69855  
69856  const ZStackChildView = emotion_styled_base_browser_esm("div",  true ? {
69857    target: "ebn2ljm1"
69858  } : 0)("&:not( :first-of-type ){", ({
69859    offsetAmount
69860  }) => /*#__PURE__*/emotion_react_browser_esm_css({
69861    marginInlineStart: offsetAmount
69862  },  true ? "" : 0,  true ? "" : 0), ";}", ({
69863    zIndex
69864  }) => /*#__PURE__*/emotion_react_browser_esm_css({
69865    zIndex
69866  },  true ? "" : 0,  true ? "" : 0), ";" + ( true ? "" : 0));
69867  var z_stack_styles_ref =  true ? {
69868    name: "rs0gp6",
69869    styles: "grid-row-start:1;grid-column-start:1"
69870  } : 0;
69871  const ZStackView = emotion_styled_base_browser_esm("div",  true ? {
69872    target: "ebn2ljm0"
69873  } : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({
69874    isLayered
69875  }) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell
69876  z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0));
69877  
69878  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/component.js
69879  
69880  /**
69881   * External dependencies
69882   */
69883  
69884  /**
69885   * WordPress dependencies
69886   */
69887  
69888  
69889  /**
69890   * Internal dependencies
69891   */
69892  
69893  
69894  
69895  function UnconnectedZStack(props, forwardedRef) {
69896    const {
69897      children,
69898      className,
69899      isLayered = true,
69900      isReversed = false,
69901      offset = 0,
69902      ...otherProps
69903    } = useContextSystem(props, 'ZStack');
69904    const validChildren = getValidChildren(children);
69905    const childrenLastIndex = validChildren.length - 1;
69906    const clonedChildren = validChildren.map((child, index) => {
69907      const zIndex = isReversed ? childrenLastIndex - index : index;
69908      // Only when the component is layered, the offset needs to be multiplied by
69909      // the item's index, so that items can correctly stack at the right distance
69910      const offsetAmount = isLayered ? offset * index : offset;
69911      const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index;
69912      return (0,external_React_.createElement)(ZStackChildView, {
69913        offsetAmount: offsetAmount,
69914        zIndex: zIndex,
69915        key: key
69916      }, child);
69917    });
69918    return (0,external_React_.createElement)(ZStackView, {
69919      ...otherProps,
69920      className: className,
69921      isLayered: isLayered,
69922      ref: forwardedRef
69923    }, clonedChildren);
69924  }
69925  
69926  /**
69927   * `ZStack` allows you to stack things along the Z-axis.
69928   *
69929   * ```jsx
69930   * import { __experimentalZStack as ZStack } from '@wordpress/components';
69931   *
69932   * function Example() {
69933   *   return (
69934   *     <ZStack offset={ 20 } isLayered>
69935   *       <ExampleImage />
69936   *       <ExampleImage />
69937   *       <ExampleImage />
69938   *     </ZStack>
69939   *   );
69940   * }
69941   * ```
69942   */
69943  const ZStack = contextConnect(UnconnectedZStack, 'ZStack');
69944  /* harmony default export */ const z_stack_component = (ZStack);
69945  
69946  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js
69947  
69948  /**
69949   * WordPress dependencies
69950   */
69951  
69952  
69953  
69954  const defaultShortcuts = {
69955    previous: [{
69956      modifier: 'ctrlShift',
69957      character: '`'
69958    }, {
69959      modifier: 'ctrlShift',
69960      character: '~'
69961    }, {
69962      modifier: 'access',
69963      character: 'p'
69964    }],
69965    next: [{
69966      modifier: 'ctrl',
69967      character: '`'
69968    }, {
69969      modifier: 'access',
69970      character: 'n'
69971    }]
69972  };
69973  function useNavigateRegions(shortcuts = defaultShortcuts) {
69974    const ref = (0,external_wp_element_namespaceObject.useRef)(null);
69975    const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false);
69976    function focusRegion(offset) {
69977      var _ref$current$querySel;
69978      const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);
69979      if (!regions.length) {
69980        return;
69981      }
69982      let nextRegion = regions[0];
69983      // 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.
69984      const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]');
69985      const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;
69986      if (selectedIndex !== -1) {
69987        let nextIndex = selectedIndex + offset;
69988        nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
69989        nextIndex = nextIndex === regions.length ? 0 : nextIndex;
69990        nextRegion = regions[nextIndex];
69991      }
69992      nextRegion.focus();
69993      setIsFocusingRegions(true);
69994    }
69995    const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
69996      function onClick() {
69997        setIsFocusingRegions(false);
69998      }
69999      element.addEventListener('click', onClick);
70000      return () => {
70001        element.removeEventListener('click', onClick);
70002      };
70003    }, [setIsFocusingRegions]);
70004    return {
70005      ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]),
70006      className: isFocusingRegions ? 'is-focusing-regions' : '',
70007      onKeyDown(event) {
70008        if (shortcuts.previous.some(({
70009          modifier,
70010          character
70011        }) => {
70012          return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
70013        })) {
70014          focusRegion(-1);
70015        } else if (shortcuts.next.some(({
70016          modifier,
70017          character
70018        }) => {
70019          return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character);
70020        })) {
70021          focusRegion(1);
70022        }
70023      }
70024    };
70025  }
70026  
70027  /**
70028   * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
70029   * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region").
70030   * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,
70031   * these elements must be properly labelled to briefly describe the purpose of the content in the region.
70032   * For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)
70033   * and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).
70034   *
70035   * ```jsx
70036   * import { navigateRegions } from '@wordpress/components';
70037   *
70038   * const MyComponentWithNavigateRegions = navigateRegions( () => (
70039   *     <div>
70040   *         <div role="region" tabIndex="-1" aria-label="Header">
70041   *             Header
70042   *         </div>
70043   *         <div role="region" tabIndex="-1" aria-label="Content">
70044   *             Content
70045   *         </div>
70046   *         <div role="region" tabIndex="-1" aria-label="Sidebar">
70047   *             Sidebar
70048   *         </div>
70049   *     </div>
70050   * ) );
70051   * ```
70052   */
70053  /* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({
70054    shortcuts,
70055    ...props
70056  }) => (0,external_React_.createElement)("div", {
70057    ...useNavigateRegions(shortcuts)
70058  }, (0,external_React_.createElement)(Component, {
70059    ...props
70060  })), 'navigateRegions'));
70061  
70062  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js
70063  
70064  /**
70065   * WordPress dependencies
70066   */
70067  
70068  
70069  /**
70070   * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
70071   * adding the ability to constrain keyboard navigation with the Tab key within a component.
70072   * For accessibility reasons, some UI components need to constrain Tab navigation, for example
70073   * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
70074   * navigate away from the wrapped component is implemented by other means, usually by pressing
70075   * the Escape key or using a specific UI control, e.g. a "Close" button.
70076   */
70077  const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) {
70078    const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)();
70079    return (0,external_React_.createElement)("div", {
70080      ref: ref,
70081      tabIndex: -1
70082    }, (0,external_React_.createElement)(WrappedComponent, {
70083      ...props
70084    }));
70085  }, 'withConstrainedTabbing');
70086  /* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing);
70087  
70088  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js
70089  
70090  /**
70091   * External dependencies
70092   */
70093  
70094  
70095  /**
70096   * WordPress dependencies
70097   */
70098  
70099  
70100  /* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
70101    return class extends external_wp_element_namespaceObject.Component {
70102      constructor(props) {
70103        super(props);
70104        this.nodeRef = this.props.node;
70105        this.state = {
70106          fallbackStyles: undefined,
70107          grabStylesCompleted: false
70108        };
70109        this.bindRef = this.bindRef.bind(this);
70110      }
70111      bindRef(node) {
70112        if (!node) {
70113          return;
70114        }
70115        this.nodeRef = node;
70116      }
70117      componentDidMount() {
70118        this.grabFallbackStyles();
70119      }
70120      componentDidUpdate() {
70121        this.grabFallbackStyles();
70122      }
70123      grabFallbackStyles() {
70124        const {
70125          grabStylesCompleted,
70126          fallbackStyles
70127        } = this.state;
70128        if (this.nodeRef && !grabStylesCompleted) {
70129          const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);
70130          if (!es6_default()(newFallbackStyles, fallbackStyles)) {
70131            this.setState({
70132              fallbackStyles: newFallbackStyles,
70133              grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)
70134            });
70135          }
70136        }
70137      }
70138      render() {
70139        const wrappedComponent = (0,external_React_.createElement)(WrappedComponent, {
70140          ...this.props,
70141          ...this.state.fallbackStyles
70142        });
70143        return this.props.node ? wrappedComponent : (0,external_React_.createElement)("div", {
70144          ref: this.bindRef
70145        }, " ", wrappedComponent, " ");
70146      }
70147    };
70148  }, 'withFallbackStyles'));
70149  
70150  ;// CONCATENATED MODULE: external ["wp","hooks"]
70151  const external_wp_hooks_namespaceObject = window["wp"]["hooks"];
70152  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js
70153  
70154  /**
70155   * WordPress dependencies
70156   */
70157  
70158  
70159  
70160  const ANIMATION_FRAME_PERIOD = 16;
70161  
70162  /**
70163   * Creates a higher-order component which adds filtering capability to the
70164   * wrapped component. Filters get applied when the original component is about
70165   * to be mounted. When a filter is added or removed that matches the hook name,
70166   * the wrapped component re-renders.
70167   *
70168   * @param hookName Hook name exposed to be used by filters.
70169   *
70170   * @return Higher-order component factory.
70171   *
70172   * ```jsx
70173   * import { withFilters } from '@wordpress/components';
70174   * import { addFilter } from '@wordpress/hooks';
70175   *
70176   * const MyComponent = ( { title } ) => <h1>{ title }</h1>;
70177   *
70178   * const ComponentToAppend = () => <div>Appended component</div>;
70179   *
70180   * function withComponentAppended( FilteredComponent ) {
70181   *     return ( props ) => (
70182   *         <>
70183   *             <FilteredComponent { ...props } />
70184   *             <ComponentToAppend />
70185   *         </>
70186   *     );
70187   * }
70188   *
70189   * addFilter(
70190   *     'MyHookName',
70191   *     'my-plugin/with-component-appended',
70192   *     withComponentAppended
70193   * );
70194   *
70195   * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
70196   * ```
70197   */
70198  function withFilters(hookName) {
70199    return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => {
70200      const namespace = 'core/with-filters/' + hookName;
70201  
70202      /**
70203       * The component definition with current filters applied. Each instance
70204       * reuse this shared reference as an optimization to avoid excessive
70205       * calls to `applyFilters` when many instances exist.
70206       */
70207      let FilteredComponent;
70208  
70209      /**
70210       * Initializes the FilteredComponent variable once, if not already
70211       * assigned. Subsequent calls are effectively a noop.
70212       */
70213      function ensureFilteredComponent() {
70214        if (FilteredComponent === undefined) {
70215          FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent);
70216        }
70217      }
70218      class FilteredComponentRenderer extends external_wp_element_namespaceObject.Component {
70219        constructor(props) {
70220          super(props);
70221          ensureFilteredComponent();
70222        }
70223        componentDidMount() {
70224          FilteredComponentRenderer.instances.push(this);
70225  
70226          // If there were previously no mounted instances for components
70227          // filtered on this hook, add the hook handler.
70228          if (FilteredComponentRenderer.instances.length === 1) {
70229            (0,external_wp_hooks_namespaceObject.addAction)('hookRemoved', namespace, onHooksUpdated);
70230            (0,external_wp_hooks_namespaceObject.addAction)('hookAdded', namespace, onHooksUpdated);
70231          }
70232        }
70233        componentWillUnmount() {
70234          FilteredComponentRenderer.instances = FilteredComponentRenderer.instances.filter(instance => instance !== this);
70235  
70236          // If this was the last of the mounted components filtered on
70237          // this hook, remove the hook handler.
70238          if (FilteredComponentRenderer.instances.length === 0) {
70239            (0,external_wp_hooks_namespaceObject.removeAction)('hookRemoved', namespace);
70240            (0,external_wp_hooks_namespaceObject.removeAction)('hookAdded', namespace);
70241          }
70242        }
70243        render() {
70244          return (0,external_React_.createElement)(FilteredComponent, {
70245            ...this.props
70246          });
70247        }
70248      }
70249      FilteredComponentRenderer.instances = [];
70250  
70251      /**
70252       * Updates the FilteredComponent definition, forcing a render for each
70253       * mounted instance. This occurs a maximum of once per animation frame.
70254       */
70255      const throttledForceUpdate = (0,external_wp_compose_namespaceObject.debounce)(() => {
70256        // Recreate the filtered component, only after delay so that it's
70257        // computed once, even if many filters added.
70258        FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent);
70259  
70260        // Force each instance to render.
70261        FilteredComponentRenderer.instances.forEach(instance => {
70262          instance.forceUpdate();
70263        });
70264      }, ANIMATION_FRAME_PERIOD);
70265  
70266      /**
70267       * When a filter is added or removed for the matching hook name, each
70268       * mounted instance should re-render with the new filters having been
70269       * applied to the original component.
70270       *
70271       * @param updatedHookName Name of the hook that was updated.
70272       */
70273      function onHooksUpdated(updatedHookName) {
70274        if (updatedHookName === hookName) {
70275          throttledForceUpdate();
70276        }
70277      }
70278      return FilteredComponentRenderer;
70279    }, 'withFilters');
70280  }
70281  
70282  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js
70283  
70284  /**
70285   * WordPress dependencies
70286   */
70287  
70288  
70289  
70290  
70291  /**
70292   * Returns true if the given object is component-like. An object is component-
70293   * like if it is an instance of wp.element.Component, or is a function.
70294   *
70295   * @param object Object to test.
70296   *
70297   * @return Whether object is component-like.
70298   */
70299  function isComponentLike(object) {
70300    return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function';
70301  }
70302  /**
70303   * Higher Order Component used to be used to wrap disposable elements like
70304   * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
70305   * reference to the current active element so we know where to restore focus
70306   * when the component is unmounted.
70307   *
70308   * @param options The component to be enhanced with
70309   *                focus return behavior, or an object
70310   *                describing the component and the
70311   *                focus return characteristics.
70312   *
70313   * @return Higher Order Component with the focus restauration behaviour.
70314   */
70315  /* harmony default export */ const with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(
70316  // @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
70317  options => {
70318    const HoC = ({
70319      onFocusReturn
70320    } = {}) => WrappedComponent => {
70321      const WithFocusReturn = props => {
70322        const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn);
70323        return (0,external_React_.createElement)("div", {
70324          ref: ref
70325        }, (0,external_React_.createElement)(WrappedComponent, {
70326          ...props
70327        }));
70328      };
70329      return WithFocusReturn;
70330    };
70331    if (isComponentLike(options)) {
70332      const WrappedComponent = options;
70333      return HoC()(WrappedComponent);
70334    }
70335    return HoC(options);
70336  }, 'withFocusReturn'));
70337  const with_focus_return_Provider = ({
70338    children
70339  }) => {
70340    external_wp_deprecated_default()('wp.components.FocusReturnProvider component', {
70341      since: '5.7',
70342      hint: 'This provider is not used anymore. You can just remove it from your codebase'
70343    });
70344    return children;
70345  };
70346  
70347  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js
70348  
70349  /**
70350   * External dependencies
70351   */
70352  
70353  
70354  /**
70355   * WordPress dependencies
70356   */
70357  
70358  
70359  
70360  /**
70361   * Internal dependencies
70362   */
70363  
70364  /**
70365   * Override the default edit UI to include notices if supported.
70366   *
70367   * Wrapping the original component with `withNotices` encapsulates the component
70368   * with the additional props `noticeOperations` and `noticeUI`.
70369   *
70370   * ```jsx
70371   * import { withNotices, Button } from '@wordpress/components';
70372   *
70373   * const MyComponentWithNotices = withNotices(
70374   *     ( { noticeOperations, noticeUI } ) => {
70375   *         const addError = () =>
70376   *             noticeOperations.createErrorNotice( 'Error message' );
70377   *         return (
70378   *             <div>
70379   *                 { noticeUI }
70380   *                 <Button variant="secondary" onClick={ addError }>
70381   *                     Add error
70382   *                 </Button>
70383   *             </div>
70384   *         );
70385   *     }
70386   * );
70387   * ```
70388   *
70389   * @param OriginalComponent Original component.
70390   *
70391   * @return Wrapped component.
70392   */
70393  /* harmony default export */ const with_notices = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => {
70394    function Component(props, ref) {
70395      const [noticeList, setNoticeList] = (0,external_wp_element_namespaceObject.useState)([]);
70396      const noticeOperations = (0,external_wp_element_namespaceObject.useMemo)(() => {
70397        const createNotice = notice => {
70398          const noticeToAdd = notice.id ? notice : {
70399            ...notice,
70400            id: esm_browser_v4()
70401          };
70402          setNoticeList(current => [...current, noticeToAdd]);
70403        };
70404        return {
70405          createNotice,
70406          createErrorNotice: msg => {
70407            // @ts-expect-error TODO: Missing `id`, potentially a bug
70408            createNotice({
70409              status: 'error',
70410              content: msg
70411            });
70412          },
70413          removeNotice: id => {
70414            setNoticeList(current => current.filter(notice => notice.id !== id));
70415          },
70416          removeAllNotices: () => {
70417            setNoticeList([]);
70418          }
70419        };
70420      }, []);
70421      const propsOut = {
70422        ...props,
70423        noticeList,
70424        noticeOperations,
70425        noticeUI: noticeList.length > 0 && (0,external_React_.createElement)(list, {
70426          className: "components-with-notices-ui",
70427          notices: noticeList,
70428          onRemove: noticeOperations.removeNotice
70429        })
70430      };
70431      return isForwardRef ? (0,external_React_.createElement)(OriginalComponent, {
70432        ...propsOut,
70433        ref: ref
70434      }) : (0,external_React_.createElement)(OriginalComponent, {
70435        ...propsOut
70436      });
70437    }
70438    let isForwardRef;
70439    // @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().
70440    const {
70441      render
70442    } = OriginalComponent;
70443    // Returns a forwardRef if OriginalComponent appears to be a forwardRef.
70444    if (typeof render === 'function') {
70445      isForwardRef = true;
70446      return (0,external_wp_element_namespaceObject.forwardRef)(Component);
70447    }
70448    return Component;
70449  }, 'withNotices'));
70450  
70451  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/styles.js
70452  
70453  function progress_bar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
70454  /**
70455   * External dependencies
70456   */
70457  
70458  
70459  
70460  /**
70461   * Internal dependencies
70462   */
70463  
70464  const animateProgressBar = emotion_react_browser_esm_keyframes({
70465    '0%': {
70466      left: '-50%'
70467    },
70468    '100%': {
70469      left: '100%'
70470    }
70471  });
70472  
70473  // Width of the indicator for the indeterminate progress bar
70474  const INDETERMINATE_TRACK_WIDTH = 50;
70475  const styles_Track = emotion_styled_base_browser_esm("div",  true ? {
70476    target: "e15u147w2"
70477  } : 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));
70478  const Indicator = emotion_styled_base_browser_esm("div",  true ? {
70479    target: "e15u147w1"
70480  } : 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;", ({
70481    isIndeterminate,
70482    value
70483  }) => isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({
70484    animationDuration: '1.5s',
70485    animationTimingFunction: 'ease-in-out',
70486    animationIterationCount: 'infinite',
70487    animationName: animateProgressBar,
70488    width: `$INDETERMINATE_TRACK_WIDTH}%`
70489  },  true ? "" : 0,  true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({
70490    width: `$value}%`,
70491    transition: 'width 0.4s ease-in-out'
70492  },  true ? "" : 0,  true ? "" : 0), ";" + ( true ? "" : 0));
70493  const ProgressElement = emotion_styled_base_browser_esm("progress",  true ? {
70494    target: "e15u147w0"
70495  } : 0)( true ? {
70496    name: "11fb690",
70497    styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%"
70498  } : 0);
70499  
70500  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/progress-bar/index.js
70501  
70502  /**
70503   * External dependencies
70504   */
70505  
70506  /**
70507   * WordPress dependencies
70508   */
70509  
70510  
70511  
70512  /**
70513   * Internal dependencies
70514   */
70515  
70516  function UnforwardedProgressBar(props, ref) {
70517    const {
70518      className,
70519      value,
70520      ...progressProps
70521    } = props;
70522    const isIndeterminate = !Number.isFinite(value);
70523    return (0,external_React_.createElement)(styles_Track, {
70524      className: className
70525    }, (0,external_React_.createElement)(Indicator, {
70526      isIndeterminate: isIndeterminate,
70527      value: value
70528    }), (0,external_React_.createElement)(ProgressElement, {
70529      max: 100,
70530      value: value,
70531      "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading …'),
70532      ref: ref,
70533      ...progressProps
70534    }));
70535  }
70536  const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar);
70537  /* harmony default export */ const progress_bar = (ProgressBar);
70538  
70539  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/YGMEBI3A.js
70540  "use client";
70541  
70542  
70543  
70544  
70545  
70546  // src/menu/menu-context.ts
70547  
70548  var YGMEBI3A_menu = createStoreContext(
70549    [CompositeContextProvider, HovercardContextProvider],
70550    [CompositeScopedContextProvider, HovercardScopedContextProvider]
70551  );
70552  var useMenuContext = YGMEBI3A_menu.useContext;
70553  var useMenuScopedContext = YGMEBI3A_menu.useScopedContext;
70554  var useMenuProviderContext = YGMEBI3A_menu.useProviderContext;
70555  var MenuContextProvider = YGMEBI3A_menu.ContextProvider;
70556  var MenuScopedContextProvider = YGMEBI3A_menu.ScopedContextProvider;
70557  var useMenuBarContext = (/* unused pure expression or super */ null && (useMenubarContext));
70558  var useMenuBarScopedContext = (/* unused pure expression or super */ null && (useMenubarScopedContext));
70559  var useMenuBarProviderContext = (/* unused pure expression or super */ null && (useMenubarProviderContext));
70560  var MenuBarContextProvider = (/* unused pure expression or super */ null && (MenubarContextProvider));
70561  var MenuBarScopedContextProvider = (/* unused pure expression or super */ null && (MenubarScopedContextProvider));
70562  var MenuItemCheckedContext = (0,external_React_.createContext)(
70563    void 0
70564  );
70565  
70566  
70567  
70568  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6XBVQI3K.js
70569  "use client";
70570  
70571  // src/checkbox/checkbox-checked-context.ts
70572  
70573  var CheckboxCheckedContext = (0,external_React_.createContext)(false);
70574  
70575  
70576  
70577  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MW2F7SEA.js
70578  "use client";
70579  
70580  
70581  
70582  
70583  // src/checkbox/checkbox-check.tsx
70584  
70585  
70586  var checkmark = /* @__PURE__ */ (0,jsx_runtime.jsx)(
70587    "svg",
70588    {
70589      display: "block",
70590      fill: "none",
70591      stroke: "currentColor",
70592      strokeLinecap: "round",
70593      strokeLinejoin: "round",
70594      strokeWidth: "1.5pt",
70595      viewBox: "0 0 16 16",
70596      height: "1em",
70597      width: "1em",
70598      children: /* @__PURE__ */ (0,jsx_runtime.jsx)("polyline", { points: "4,8 7,12 12,4" })
70599    }
70600  );
70601  function getChildren(props) {
70602    if (props.checked) {
70603      return props.children || checkmark;
70604    }
70605    if (typeof props.children === "function") {
70606      return props.children;
70607    }
70608    return null;
70609  }
70610  var useCheckboxCheck = createHook(
70611    (_a) => {
70612      var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
70613      const context = (0,external_React_.useContext)(CheckboxCheckedContext);
70614      checked = checked != null ? checked : context;
70615      const children = getChildren({ checked, children: props.children });
70616      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
70617        "aria-hidden": true
70618      }, props), {
70619        children,
70620        style: _4R3V3JGP_spreadValues({
70621          width: "1em",
70622          height: "1em",
70623          pointerEvents: "none"
70624        }, props.style)
70625      });
70626      return props;
70627    }
70628  );
70629  var CheckboxCheck = createComponent((props) => {
70630    const htmlProps = useCheckboxCheck(props);
70631    return _3ORBWXWF_createElement("span", htmlProps);
70632  });
70633  if (false) {}
70634  
70635  
70636  
70637  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-check.js
70638  "use client";
70639  
70640  
70641  
70642  
70643  
70644  
70645  
70646  
70647  
70648  
70649  
70650  
70651  
70652  
70653  
70654  // src/menu/menu-item-check.ts
70655  
70656  var useMenuItemCheck = createHook(
70657    (_a) => {
70658      var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
70659      const context = (0,external_React_.useContext)(MenuItemCheckedContext);
70660      checked = checked != null ? checked : context;
70661      props = useCheckboxCheck(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { checked }));
70662      return props;
70663    }
70664  );
70665  var MenuItemCheck = createComponent((props) => {
70666    const htmlProps = useMenuItemCheck(props);
70667    return _3ORBWXWF_createElement("span", htmlProps);
70668  });
70669  if (false) {}
70670  
70671  
70672  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KA4GX64Z.js
70673  "use client";
70674  
70675  
70676  
70677  // src/menubar/menubar-context.ts
70678  
70679  var menubar = createStoreContext(
70680    [CompositeContextProvider],
70681    [CompositeScopedContextProvider]
70682  );
70683  var KA4GX64Z_useMenubarContext = menubar.useContext;
70684  var KA4GX64Z_useMenubarScopedContext = menubar.useScopedContext;
70685  var KA4GX64Z_useMenubarProviderContext = menubar.useProviderContext;
70686  var KA4GX64Z_MenubarContextProvider = menubar.ContextProvider;
70687  var KA4GX64Z_MenubarScopedContextProvider = menubar.ScopedContextProvider;
70688  var KA4GX64Z_MenuItemCheckedContext = (0,external_React_.createContext)(
70689    void 0
70690  );
70691  
70692  
70693  
70694  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/W76OTZCC.js
70695  "use client";
70696  
70697  
70698  
70699  
70700  // src/combobox/combobox-context.tsx
70701  
70702  var W76OTZCC_ctx = createStoreContext(
70703    [PopoverContextProvider, CompositeContextProvider],
70704    [PopoverScopedContextProvider, CompositeScopedContextProvider]
70705  );
70706  var useComboboxContext = W76OTZCC_ctx.useContext;
70707  var useComboboxScopedContext = W76OTZCC_ctx.useScopedContext;
70708  var useComboboxProviderContext = W76OTZCC_ctx.useProviderContext;
70709  var ComboboxContextProvider = W76OTZCC_ctx.ContextProvider;
70710  var ComboboxScopedContextProvider = W76OTZCC_ctx.ScopedContextProvider;
70711  var ComboboxItemValueContext = (0,external_React_.createContext)(
70712    void 0
70713  );
70714  var ComboboxItemCheckedContext = (0,external_React_.createContext)(false);
70715  
70716  
70717  
70718  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/menu/menu-store.js
70719  "use client";
70720  
70721  
70722  
70723  
70724  
70725  
70726  
70727  
70728  
70729  
70730  
70731  
70732  // src/menu/menu-store.ts
70733  function createMenuStore(_a = {}) {
70734    var _b = _a, {
70735      combobox,
70736      parent,
70737      menubar
70738    } = _b, props = _4R3V3JGP_objRest(_b, [
70739      "combobox",
70740      "parent",
70741      "menubar"
70742    ]);
70743    const parentIsMenubar = !!menubar && !parent;
70744    const store = mergeStore(
70745      props.store,
70746      pick2(parent, ["values"]),
70747      omit2(combobox, [
70748        "arrowElement",
70749        "anchorElement",
70750        "contentElement",
70751        "popoverElement",
70752        "disclosureElement"
70753      ])
70754    );
70755    throwOnConflictingProps(props, store);
70756    const syncState = store.getState();
70757    const composite = createCompositeStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
70758      store,
70759      orientation: defaultValue(
70760        props.orientation,
70761        syncState.orientation,
70762        "vertical"
70763      )
70764    }));
70765    const hovercard = createHovercardStore(_chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, props), {
70766      store,
70767      placement: defaultValue(
70768        props.placement,
70769        syncState.placement,
70770        "bottom-start"
70771      ),
70772      timeout: defaultValue(
70773        props.timeout,
70774        syncState.timeout,
70775        parentIsMenubar ? 0 : 150
70776      ),
70777      hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0)
70778    }));
70779    const initialState = _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite.getState()), hovercard.getState()), {
70780      initialFocus: defaultValue(syncState.initialFocus, "container"),
70781      values: defaultValue(
70782        props.values,
70783        syncState.values,
70784        props.defaultValues,
70785        {}
70786      )
70787    });
70788    const menu = createStore(initialState, composite, hovercard, store);
70789    setup(
70790      menu,
70791      () => sync(menu, ["mounted"], (state) => {
70792        if (state.mounted)
70793          return;
70794        menu.setState("activeId", null);
70795      })
70796    );
70797    setup(
70798      menu,
70799      () => sync(parent, ["orientation"], (state) => {
70800        menu.setState(
70801          "placement",
70802          state.orientation === "vertical" ? "right-start" : "bottom-start"
70803        );
70804      })
70805    );
70806    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues(_chunks_4R3V3JGP_spreadValues({}, composite), hovercard), menu), {
70807      combobox,
70808      parent,
70809      menubar,
70810      hideAll: () => {
70811        hovercard.hide();
70812        parent == null ? void 0 : parent.hideAll();
70813      },
70814      setInitialFocus: (value) => menu.setState("initialFocus", value),
70815      setValues: (values) => menu.setState("values", values),
70816      setValue: (name, value) => {
70817        if (name === "__proto__")
70818          return;
70819        if (name === "constructor")
70820          return;
70821        if (Array.isArray(name))
70822          return;
70823        menu.setState("values", (values) => {
70824          const prevValue = values[name];
70825          const nextValue = Y3OOHFCN_applyState(value, prevValue);
70826          if (nextValue === prevValue)
70827            return values;
70828          return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, values), {
70829            [name]: nextValue !== void 0 && nextValue
70830          });
70831        });
70832      }
70833    });
70834  }
70835  
70836  
70837  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/XJXP7ZSQ.js
70838  "use client";
70839  
70840  
70841  
70842  
70843  
70844  
70845  
70846  
70847  
70848  // src/menu/menu-store.ts
70849  
70850  function useMenuStoreProps(store, update, props) {
70851    useUpdateEffect(update, [props.combobox, props.parent, props.menubar]);
70852    store = useCompositeStoreProps(store, update, props);
70853    store = useHovercardStoreProps(store, update, props);
70854    useStoreProps(store, props, "values", "setValues");
70855    return Object.assign(store, {
70856      combobox: props.combobox,
70857      parent: props.parent,
70858      menubar: props.menubar
70859    });
70860  }
70861  function useMenuStore(props = {}) {
70862    const parent = useMenuContext();
70863    const menubar = KA4GX64Z_useMenubarContext();
70864    const combobox = useComboboxProviderContext();
70865    props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
70866      parent: props.parent !== void 0 ? props.parent : parent,
70867      menubar: props.menubar !== void 0 ? props.menubar : menubar,
70868      combobox: props.combobox !== void 0 ? props.combobox : combobox
70869    });
70870    const [store, update] = EKQEJRUF_useStore(createMenuStore, props);
70871    return useMenuStoreProps(store, update, props);
70872  }
70873  
70874  
70875  
70876  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/VDNZBO4W.js
70877  "use client";
70878  
70879  
70880  
70881  
70882  
70883  // src/button/button.ts
70884  
70885  
70886  var useButton = createHook((props) => {
70887    const ref = (0,external_React_.useRef)(null);
70888    const tagName = useTagName(ref, props.as || "button");
70889    const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)(
70890      () => !!tagName && isButton({ tagName, type: props.type })
70891    );
70892    (0,external_React_.useEffect)(() => {
70893      if (!ref.current)
70894        return;
70895      setIsNativeButton(isButton(ref.current));
70896    }, []);
70897    props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
70898      role: !isNativeButton && tagName !== "a" ? "button" : void 0
70899    }, props), {
70900      ref: useMergeRefs(ref, props.ref)
70901    });
70902    props = useCommand(props);
70903    return props;
70904  });
70905  var VDNZBO4W_Button = createComponent((props) => {
70906    const htmlProps = useButton(props);
70907    return _3ORBWXWF_createElement("button", htmlProps);
70908  });
70909  if (false) {}
70910  
70911  
70912  
70913  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BHEJ6NUH.js
70914  "use client";
70915  
70916  
70917  
70918  
70919  
70920  
70921  // src/disclosure/disclosure.ts
70922  
70923  
70924  var BHEJ6NUH_symbol = Symbol("disclosure");
70925  var useDisclosure = createHook(
70926    (_a) => {
70927      var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
70928      const context = useDisclosureProviderContext();
70929      store = store || context;
70930      invariant(
70931        store,
70932         false && 0
70933      );
70934      const ref = (0,external_React_.useRef)(null);
70935      const [expanded, setExpanded] = (0,external_React_.useState)(false);
70936      const disclosureElement = store.useState("disclosureElement");
70937      const open = store.useState("open");
70938      (0,external_React_.useEffect)(() => {
70939        let isCurrentDisclosure = disclosureElement === ref.current;
70940        if (!(disclosureElement == null ? void 0 : disclosureElement.isConnected)) {
70941          store == null ? void 0 : store.setDisclosureElement(ref.current);
70942          isCurrentDisclosure = true;
70943        }
70944        setExpanded(open && isCurrentDisclosure);
70945      }, [disclosureElement, store, open]);
70946      const onClickProp = props.onClick;
70947      const toggleOnClickProp = useBooleanEvent(toggleOnClick);
70948      const [isDuplicate, metadataProps] = useMetadataProps(props, BHEJ6NUH_symbol, true);
70949      const onClick = useEvent((event) => {
70950        onClickProp == null ? void 0 : onClickProp(event);
70951        if (event.defaultPrevented)
70952          return;
70953        if (isDuplicate)
70954          return;
70955        if (!toggleOnClickProp(event))
70956          return;
70957        store == null ? void 0 : store.setDisclosureElement(event.currentTarget);
70958        store == null ? void 0 : store.toggle();
70959      });
70960      const contentElement = store.useState("contentElement");
70961      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues(_4R3V3JGP_spreadValues({
70962        "aria-expanded": expanded,
70963        "aria-controls": contentElement == null ? void 0 : contentElement.id
70964      }, metadataProps), props), {
70965        ref: useMergeRefs(ref, props.ref),
70966        onClick
70967      });
70968      props = useButton(props);
70969      return props;
70970    }
70971  );
70972  var Disclosure = createComponent((props) => {
70973    const htmlProps = useDisclosure(props);
70974    return _3ORBWXWF_createElement("button", htmlProps);
70975  });
70976  if (false) {}
70977  
70978  
70979  
70980  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/H3TG2CZP.js
70981  "use client";
70982  
70983  
70984  
70985  
70986  
70987  // src/dialog/dialog-disclosure.ts
70988  
70989  
70990  var useDialogDisclosure = createHook(
70991    (_a) => {
70992      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
70993      const context = useDialogProviderContext();
70994      store = store || context;
70995      invariant(
70996        store,
70997         false && 0
70998      );
70999      const contentElement = store.useState("contentElement");
71000      props = _4R3V3JGP_spreadValues({
71001        "aria-haspopup": getPopupRole(contentElement, "dialog")
71002      }, props);
71003      props = useDisclosure(_4R3V3JGP_spreadValues({ store }, props));
71004      return props;
71005    }
71006  );
71007  var DialogDisclosure = createComponent(
71008    (props) => {
71009      const htmlProps = useDialogDisclosure(props);
71010      return _3ORBWXWF_createElement("button", htmlProps);
71011    }
71012  );
71013  if (false) {}
71014  
71015  
71016  
71017  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JCH6MLL2.js
71018  "use client";
71019  
71020  
71021  
71022  
71023  
71024  // src/popover/popover-anchor.ts
71025  var usePopoverAnchor = createHook(
71026    (_a) => {
71027      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
71028      const context = usePopoverProviderContext();
71029      store = store || context;
71030      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71031        ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref)
71032      });
71033      return props;
71034    }
71035  );
71036  var PopoverAnchor = createComponent((props) => {
71037    const htmlProps = usePopoverAnchor(props);
71038    return _3ORBWXWF_createElement("div", htmlProps);
71039  });
71040  if (false) {}
71041  
71042  
71043  
71044  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4ZEZYKUR.js
71045  "use client";
71046  
71047  
71048  
71049  
71050  
71051  
71052  
71053  // src/popover/popover-disclosure.tsx
71054  
71055  
71056  var usePopoverDisclosure = createHook(
71057    (_a) => {
71058      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
71059      const context = usePopoverProviderContext();
71060      store = store || context;
71061      invariant(
71062        store,
71063         false && 0
71064      );
71065      const onClickProp = props.onClick;
71066      const onClick = useEvent((event) => {
71067        store == null ? void 0 : store.setAnchorElement(event.currentTarget);
71068        onClickProp == null ? void 0 : onClickProp(event);
71069      });
71070      props = useWrapElement(
71071        props,
71072        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverScopedContextProvider, { value: store, children: element }),
71073        [store]
71074      );
71075      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71076        onClick
71077      });
71078      props = usePopoverAnchor(_4R3V3JGP_spreadValues({ store }, props));
71079      props = useDialogDisclosure(_4R3V3JGP_spreadValues({ store }, props));
71080      return props;
71081    }
71082  );
71083  var PopoverDisclosure = createComponent(
71084    (props) => {
71085      const htmlProps = usePopoverDisclosure(props);
71086      return _3ORBWXWF_createElement("button", htmlProps);
71087    }
71088  );
71089  if (false) {}
71090  
71091  
71092  
71093  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/346FK57L.js
71094  "use client";
71095  
71096  
71097  
71098  
71099  
71100  
71101  // src/composite/composite-typeahead.ts
71102  
71103  
71104  
71105  
71106  var chars = "";
71107  function clearChars() {
71108    chars = "";
71109  }
71110  function isValidTypeaheadEvent(event) {
71111    const target = event.target;
71112    if (target && DLOEKDPY_isTextField(target))
71113      return false;
71114    if (event.key === " " && chars.length)
71115      return true;
71116    return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
71117  }
71118  function isSelfTargetOrItem(event, items) {
71119    if (isSelfTarget(event))
71120      return true;
71121    const target = event.target;
71122    if (!target)
71123      return false;
71124    const isItem = items.some((item) => item.element === target);
71125    return isItem;
71126  }
71127  function _346FK57L_getEnabledItems(items) {
71128    return items.filter((item) => !item.disabled);
71129  }
71130  function itemTextStartsWith(item, text) {
71131    var _a;
71132    const itemText = ((_a = item.element) == null ? void 0 : _a.textContent) || item.children;
71133    if (!itemText)
71134      return false;
71135    return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase());
71136  }
71137  function getSameInitialItems(items, char, activeId) {
71138    if (!activeId)
71139      return items;
71140    const activeItem = items.find((item) => item.id === activeId);
71141    if (!activeItem)
71142      return items;
71143    if (!itemTextStartsWith(activeItem, char))
71144      return items;
71145    if (chars !== char && itemTextStartsWith(activeItem, chars))
71146      return items;
71147    chars = char;
71148    return flipItems(
71149      items.filter((item) => itemTextStartsWith(item, chars)),
71150      activeId
71151    ).filter((item) => item.id !== activeId);
71152  }
71153  var useCompositeTypeahead = createHook(
71154    (_a) => {
71155      var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]);
71156      const context = useCompositeContext();
71157      store = store || context;
71158      invariant(
71159        store,
71160         false && 0
71161      );
71162      const onKeyDownCaptureProp = props.onKeyDownCapture;
71163      const cleanupTimeoutRef = (0,external_React_.useRef)(0);
71164      const onKeyDownCapture = useEvent(
71165        (event) => {
71166          onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
71167          if (event.defaultPrevented)
71168            return;
71169          if (!typeahead)
71170            return;
71171          if (!store)
71172            return;
71173          const { items, activeId } = store.getState();
71174          if (!isValidTypeaheadEvent(event))
71175            return clearChars();
71176          let enabledItems = _346FK57L_getEnabledItems(items);
71177          if (!isSelfTargetOrItem(event, enabledItems))
71178            return clearChars();
71179          event.preventDefault();
71180          window.clearTimeout(cleanupTimeoutRef.current);
71181          cleanupTimeoutRef.current = window.setTimeout(() => {
71182            chars = "";
71183          }, 500);
71184          const char = event.key.toLowerCase();
71185          chars += char;
71186          enabledItems = getSameInitialItems(enabledItems, char, activeId);
71187          const item = enabledItems.find(
71188            (item2) => itemTextStartsWith(item2, chars)
71189          );
71190          if (item) {
71191            store.move(item.id);
71192          } else {
71193            clearChars();
71194          }
71195        }
71196      );
71197      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71198        onKeyDownCapture
71199      });
71200      return props;
71201    }
71202  );
71203  var CompositeTypeahead = createComponent(
71204    (props) => {
71205      const htmlProps = useCompositeTypeahead(props);
71206      return _3ORBWXWF_createElement("div", htmlProps);
71207    }
71208  );
71209  if (false) {}
71210  
71211  
71212  
71213  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-button.js
71214  "use client";
71215  
71216  
71217  
71218  
71219  
71220  
71221  
71222  
71223  
71224  
71225  
71226  
71227  
71228  
71229  
71230  
71231  
71232  
71233  
71234  
71235  
71236  
71237  
71238  
71239  
71240  
71241  // src/menu/menu-button.tsx
71242  
71243  
71244  
71245  
71246  function getInitialFocus(event, dir) {
71247    const keyMap = {
71248      ArrowDown: dir === "bottom" || dir === "top" ? "first" : false,
71249      ArrowUp: dir === "bottom" || dir === "top" ? "last" : false,
71250      ArrowRight: dir === "right" ? "first" : false,
71251      ArrowLeft: dir === "left" ? "first" : false
71252    };
71253    return keyMap[event.key];
71254  }
71255  function hasActiveItem(items, excludeElement) {
71256    return !!(items == null ? void 0 : items.some((item) => {
71257      if (!item.element)
71258        return false;
71259      if (item.element === excludeElement)
71260        return false;
71261      return item.element.getAttribute("aria-expanded") === "true";
71262    }));
71263  }
71264  var useMenuButton = createHook(
71265    (_a) => {
71266      var _b = _a, { store, focusable, accessibleWhenDisabled, showOnHover } = _b, props = __objRest(_b, ["store", "focusable", "accessibleWhenDisabled", "showOnHover"]);
71267      const context = useMenuProviderContext();
71268      store = store || context;
71269      invariant(
71270        store,
71271         false && 0
71272      );
71273      const ref = (0,external_React_.useRef)(null);
71274      const parentMenu = store.parent;
71275      const parentMenubar = store.menubar;
71276      const hasParentMenu = !!parentMenu;
71277      const parentIsMenubar = !!parentMenubar && !hasParentMenu;
71278      const disabled = disabledFromProps(props);
71279      const showMenu = () => {
71280        const trigger = ref.current;
71281        if (!trigger)
71282          return;
71283        store == null ? void 0 : store.setDisclosureElement(trigger);
71284        store == null ? void 0 : store.setAnchorElement(trigger);
71285        store == null ? void 0 : store.show();
71286      };
71287      const onFocusProp = props.onFocus;
71288      const onFocus = useEvent((event) => {
71289        onFocusProp == null ? void 0 : onFocusProp(event);
71290        if (disabled)
71291          return;
71292        if (event.defaultPrevented)
71293          return;
71294        store == null ? void 0 : store.setAutoFocusOnShow(false);
71295        store == null ? void 0 : store.setActiveId(null);
71296        if (!parentMenubar)
71297          return;
71298        if (!parentIsMenubar)
71299          return;
71300        const { items } = parentMenubar.getState();
71301        if (hasActiveItem(items, event.currentTarget)) {
71302          showMenu();
71303        }
71304      });
71305      const dir = store.useState(
71306        (state) => state.placement.split("-")[0]
71307      );
71308      const onKeyDownProp = props.onKeyDown;
71309      const onKeyDown = useEvent((event) => {
71310        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
71311        if (disabled)
71312          return;
71313        if (event.defaultPrevented)
71314          return;
71315        const initialFocus = getInitialFocus(event, dir);
71316        if (initialFocus) {
71317          event.preventDefault();
71318          showMenu();
71319          store == null ? void 0 : store.setAutoFocusOnShow(true);
71320          store == null ? void 0 : store.setInitialFocus(initialFocus);
71321        }
71322      });
71323      const onClickProp = props.onClick;
71324      const onClick = useEvent((event) => {
71325        onClickProp == null ? void 0 : onClickProp(event);
71326        if (event.defaultPrevented)
71327          return;
71328        if (!store)
71329          return;
71330        const isKeyboardClick = !event.detail;
71331        const { open } = store.getState();
71332        if (!open || isKeyboardClick) {
71333          if (!hasParentMenu || isKeyboardClick) {
71334            store.setAutoFocusOnShow(true);
71335          }
71336          store.setInitialFocus(isKeyboardClick ? "first" : "container");
71337        }
71338        if (hasParentMenu) {
71339          showMenu();
71340        }
71341      });
71342      props = useWrapElement(
71343        props,
71344        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuContextProvider, { value: store, children: element }),
71345        [store]
71346      );
71347      if (hasParentMenu) {
71348        props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71349          render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Role.div, { render: props.render })
71350        });
71351      }
71352      const id = useId(props.id);
71353      const parentContentElement = useStoreState(
71354        (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
71355        "contentElement"
71356      );
71357      const role = hasParentMenu || parentIsMenubar ? getPopupItemRole(parentContentElement, "menuitem") : void 0;
71358      const contentElement = store.useState("contentElement");
71359      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
71360        id,
71361        role,
71362        "aria-haspopup": getPopupRole(contentElement, "menu")
71363      }, props), {
71364        ref: useMergeRefs(ref, props.ref),
71365        onFocus,
71366        onKeyDown,
71367        onClick
71368      });
71369      props = useHovercardAnchor(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
71370        store,
71371        focusable,
71372        accessibleWhenDisabled
71373      }, props), {
71374        showOnHover: (event) => {
71375          const getShowOnHover = () => {
71376            if (typeof showOnHover === "function")
71377              return showOnHover(event);
71378            if (showOnHover != null)
71379              return showOnHover;
71380            if (hasParentMenu)
71381              return true;
71382            if (!parentMenubar)
71383              return false;
71384            const { items } = parentMenubar.getState();
71385            return parentIsMenubar && hasActiveItem(items);
71386          };
71387          const canShowOnHover = getShowOnHover();
71388          if (!canShowOnHover)
71389            return false;
71390          const parent = parentIsMenubar ? parentMenubar : parentMenu;
71391          if (!parent)
71392            return true;
71393          parent.setActiveId(event.currentTarget.id);
71394          return true;
71395        }
71396      }));
71397      props = usePopoverDisclosure(_4R3V3JGP_spreadValues({
71398        store,
71399        toggleOnClick: !hasParentMenu,
71400        focusable,
71401        accessibleWhenDisabled
71402      }, props));
71403      props = useCompositeTypeahead(_4R3V3JGP_spreadValues({
71404        store,
71405        typeahead: parentIsMenubar
71406      }, props));
71407      return props;
71408    }
71409  );
71410  var MenuButton = createComponent((props) => {
71411    const htmlProps = useMenuButton(props);
71412    return _3ORBWXWF_createElement("button", htmlProps);
71413  });
71414  if (false) {}
71415  
71416  
71417  ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right-small.js
71418  
71419  /**
71420   * WordPress dependencies
71421   */
71422  
71423  const chevronRightSmall = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
71424    xmlns: "http://www.w3.org/2000/svg",
71425    viewBox: "0 0 24 24"
71426  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Path, {
71427    d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z"
71428  }));
71429  /* harmony default export */ const chevron_right_small = (chevronRightSmall);
71430  
71431  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HHNFDKU2.js
71432  "use client";
71433  
71434  
71435  
71436  
71437  
71438  
71439  
71440  
71441  
71442  // src/menu/menu-list.tsx
71443  
71444  
71445  
71446  function useAriaLabelledBy(_a) {
71447    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
71448    const [id, setId] = (0,external_React_.useState)(void 0);
71449    const label = props["aria-label"];
71450    const disclosureElement = useStoreState(store, "disclosureElement");
71451    const contentElement = useStoreState(store, "contentElement");
71452    (0,external_React_.useEffect)(() => {
71453      const disclosure = disclosureElement;
71454      if (!disclosure)
71455        return;
71456      const menu = contentElement;
71457      if (!menu)
71458        return;
71459      const menuLabel = label || menu.hasAttribute("aria-label");
71460      if (menuLabel) {
71461        setId(void 0);
71462      } else if (disclosure.id) {
71463        setId(disclosure.id);
71464      }
71465    }, [label, disclosureElement, contentElement]);
71466    return id;
71467  }
71468  var useMenuList = createHook(
71469    (_a) => {
71470      var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
71471      const context = useMenuProviderContext();
71472      store = store || context;
71473      invariant(
71474        store,
71475         false && 0
71476      );
71477      const parentMenu = store.parent;
71478      const parentMenubar = store.menubar;
71479      const hasParentMenu = !!parentMenu;
71480      const id = useId(props.id);
71481      const onKeyDownProp = props.onKeyDown;
71482      const dir = store.useState(
71483        (state) => state.placement.split("-")[0]
71484      );
71485      const orientation = store.useState(
71486        (state) => state.orientation === "both" ? void 0 : state.orientation
71487      );
71488      const isHorizontal = orientation !== "vertical";
71489      const isMenubarHorizontal = useStoreState(
71490        parentMenubar,
71491        (state) => !!state && state.orientation !== "vertical"
71492      );
71493      const onKeyDown = useEvent((event) => {
71494        onKeyDownProp == null ? void 0 : onKeyDownProp(event);
71495        if (event.defaultPrevented)
71496          return;
71497        if (hasParentMenu || parentMenubar && !isHorizontal) {
71498          const hideMap = {
71499            ArrowRight: () => dir === "left" && !isHorizontal,
71500            ArrowLeft: () => dir === "right" && !isHorizontal,
71501            ArrowUp: () => dir === "bottom" && isHorizontal,
71502            ArrowDown: () => dir === "top" && isHorizontal
71503          };
71504          const action = hideMap[event.key];
71505          if (action == null ? void 0 : action()) {
71506            event.stopPropagation();
71507            event.preventDefault();
71508            return store == null ? void 0 : store.hide();
71509          }
71510        }
71511        if (parentMenubar) {
71512          const keyMap = {
71513            ArrowRight: () => {
71514              if (!isMenubarHorizontal)
71515                return;
71516              return parentMenubar.next();
71517            },
71518            ArrowLeft: () => {
71519              if (!isMenubarHorizontal)
71520                return;
71521              return parentMenubar.previous();
71522            },
71523            ArrowDown: () => {
71524              if (isMenubarHorizontal)
71525                return;
71526              return parentMenubar.next();
71527            },
71528            ArrowUp: () => {
71529              if (isMenubarHorizontal)
71530                return;
71531              return parentMenubar.previous();
71532            }
71533          };
71534          const action = keyMap[event.key];
71535          const id2 = action == null ? void 0 : action();
71536          if (id2 !== void 0) {
71537            event.stopPropagation();
71538            event.preventDefault();
71539            parentMenubar.move(id2);
71540          }
71541        }
71542      });
71543      props = useWrapElement(
71544        props,
71545        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuScopedContextProvider, { value: store, children: element }),
71546        [store]
71547      );
71548      const ariaLabelledBy = useAriaLabelledBy(_4R3V3JGP_spreadValues({ store }, props));
71549      const mounted = store.useState("mounted");
71550      const hidden = isHidden(mounted, props.hidden, alwaysVisible);
71551      const style = hidden ? _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props.style), { display: "none" }) : props.style;
71552      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
71553        id,
71554        "aria-labelledby": ariaLabelledBy,
71555        hidden
71556      }, props), {
71557        ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
71558        style,
71559        onKeyDown
71560      });
71561      const hasCombobox = !!store.combobox;
71562      composite = composite != null ? composite : !hasCombobox;
71563      if (composite) {
71564        props = _4R3V3JGP_spreadValues({
71565          role: "menu",
71566          "aria-orientation": orientation
71567        }, props);
71568      }
71569      props = useComposite(_4R3V3JGP_spreadValues({ store, composite }, props));
71570      props = useCompositeTypeahead(_4R3V3JGP_spreadValues({ store, typeahead: !hasCombobox }, props));
71571      return props;
71572    }
71573  );
71574  var MenuList = createComponent((props) => {
71575    const htmlProps = useMenuList(props);
71576    return _3ORBWXWF_createElement("div", htmlProps);
71577  });
71578  if (false) {}
71579  
71580  
71581  
71582  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu.js
71583  "use client";
71584  
71585  
71586  
71587  
71588  
71589  
71590  
71591  
71592  
71593  
71594  
71595  
71596  
71597  
71598  
71599  
71600  
71601  
71602  
71603  
71604  
71605  
71606  
71607  
71608  
71609  
71610  
71611  
71612  
71613  
71614  
71615  
71616  
71617  
71618  
71619  
71620  
71621  
71622  
71623  
71624  
71625  
71626  
71627  
71628  
71629  
71630  
71631  
71632  
71633  // src/menu/menu.tsx
71634  
71635  
71636  
71637  
71638  var useMenu = createHook(
71639    (_a) => {
71640      var _b = _a, {
71641        store,
71642        modal: modalProp = false,
71643        portal = !!modalProp,
71644        hideOnEscape = true,
71645        autoFocusOnShow = true,
71646        hideOnHoverOutside,
71647        alwaysVisible
71648      } = _b, props = __objRest(_b, [
71649        "store",
71650        "modal",
71651        "portal",
71652        "hideOnEscape",
71653        "autoFocusOnShow",
71654        "hideOnHoverOutside",
71655        "alwaysVisible"
71656      ]);
71657      const context = useMenuProviderContext();
71658      store = store || context;
71659      invariant(
71660        store,
71661         false && 0
71662      );
71663      const ref = (0,external_React_.useRef)(null);
71664      const parentMenu = store.parent;
71665      const parentMenubar = store.menubar;
71666      const hasParentMenu = !!parentMenu;
71667      const parentIsMenubar = !!parentMenubar && !hasParentMenu;
71668      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71669        ref: useMergeRefs(ref, props.ref)
71670      });
71671      const _a2 = useMenuList(
71672        _4R3V3JGP_spreadValues({ store, alwaysVisible }, props)
71673      ), { "aria-labelledby": ariaLabelledBy } = _a2, menuListProps = __objRest(_a2, ["aria-labelledby"]);
71674      props = menuListProps;
71675      const [initialFocusRef, setInitialFocusRef] = (0,external_React_.useState)();
71676      const autoFocusOnShowState = store.useState("autoFocusOnShow");
71677      const initialFocus = store.useState("initialFocus");
71678      const baseElement = store.useState("baseElement");
71679      const items = store.useState("renderedItems");
71680      (0,external_React_.useEffect)(() => {
71681        let cleaning = false;
71682        setInitialFocusRef((prevInitialFocusRef) => {
71683          var _a3, _b2, _c;
71684          if (cleaning)
71685            return;
71686          if (!autoFocusOnShowState)
71687            return;
71688          if ((_a3 = prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current) == null ? void 0 : _a3.isConnected)
71689            return prevInitialFocusRef;
71690          const ref2 = (0,external_React_.createRef)();
71691          switch (initialFocus) {
71692            case "first":
71693              ref2.current = ((_b2 = items.find((item) => !item.disabled && item.element)) == null ? void 0 : _b2.element) || null;
71694              break;
71695            case "last":
71696              ref2.current = ((_c = [...items].reverse().find((item) => !item.disabled && item.element)) == null ? void 0 : _c.element) || null;
71697              break;
71698            default:
71699              ref2.current = baseElement;
71700          }
71701          return ref2;
71702        });
71703        return () => {
71704          cleaning = true;
71705        };
71706      }, [store, autoFocusOnShowState, initialFocus, items, baseElement]);
71707      const modal = hasParentMenu ? false : modalProp;
71708      const mayAutoFocusOnShow = !!autoFocusOnShow;
71709      const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal;
71710      const contentElement = useStoreState(
71711        store.combobox || store,
71712        "contentElement"
71713      );
71714      const parentContentElement = useStoreState(
71715        (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
71716        "contentElement"
71717      );
71718      const preserveTabOrderAnchor = (0,external_React_.useMemo)(() => {
71719        if (!parentContentElement)
71720          return;
71721        if (!contentElement)
71722          return;
71723        const role = contentElement.getAttribute("role");
71724        const parentRole = parentContentElement.getAttribute("role");
71725        const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar";
71726        if (parentIsMenuOrMenubar && role === "menu")
71727          return;
71728        return parentContentElement;
71729      }, [contentElement, parentContentElement]);
71730      if (preserveTabOrderAnchor !== void 0) {
71731        props = _4R3V3JGP_spreadValues({
71732          preserveTabOrderAnchor
71733        }, props);
71734      }
71735      props = useHovercard(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
71736        store,
71737        alwaysVisible,
71738        initialFocus: initialFocusRef,
71739        autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!modal
71740      }, props), {
71741        hideOnEscape: (event) => {
71742          if (isFalsyBooleanCallback(hideOnEscape, event))
71743            return false;
71744          store == null ? void 0 : store.hideAll();
71745          return true;
71746        },
71747        hideOnHoverOutside: (event) => {
71748          const disclosureElement = store == null ? void 0 : store.getState().disclosureElement;
71749          const getHideOnHoverOutside = () => {
71750            if (typeof hideOnHoverOutside === "function") {
71751              return hideOnHoverOutside(event);
71752            }
71753            if (hideOnHoverOutside != null)
71754              return hideOnHoverOutside;
71755            if (hasParentMenu)
71756              return true;
71757            if (!parentIsMenubar)
71758              return false;
71759            if (!disclosureElement)
71760              return true;
71761            if (hasFocusWithin(disclosureElement))
71762              return false;
71763            return true;
71764          };
71765          if (!getHideOnHoverOutside())
71766            return false;
71767          if (event.defaultPrevented)
71768            return true;
71769          if (!hasParentMenu)
71770            return true;
71771          if (!disclosureElement)
71772            return true;
71773          fireEvent(disclosureElement, "mouseout", event);
71774          if (!hasFocusWithin(disclosureElement))
71775            return true;
71776          requestAnimationFrame(() => {
71777            if (hasFocusWithin(disclosureElement))
71778              return;
71779            store == null ? void 0 : store.hide();
71780          });
71781          return false;
71782        },
71783        modal,
71784        portal,
71785        backdrop: hasParentMenu ? false : props.backdrop
71786      }));
71787      props = _4R3V3JGP_spreadValues({
71788        "aria-labelledby": ariaLabelledBy
71789      }, props);
71790      return props;
71791    }
71792  );
71793  var Menu = createDialogComponent(
71794    createComponent((props) => {
71795      const htmlProps = useMenu(props);
71796      return _3ORBWXWF_createElement("div", htmlProps);
71797    }),
71798    useMenuProviderContext
71799  );
71800  if (false) {}
71801  
71802  
71803  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/G6ONQ5EH.js
71804  "use client";
71805  
71806  
71807  
71808  
71809  
71810  // src/composite/composite-hover.ts
71811  
71812  
71813  
71814  
71815  function getMouseDestination(event) {
71816    const relatedTarget = event.relatedTarget;
71817    if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
71818      return relatedTarget;
71819    }
71820    return null;
71821  }
71822  function hoveringInside(event) {
71823    const nextElement = getMouseDestination(event);
71824    if (!nextElement)
71825      return false;
71826    return contains(event.currentTarget, nextElement);
71827  }
71828  var G6ONQ5EH_symbol = Symbol("composite-hover");
71829  function movingToAnotherItem(event) {
71830    let dest = getMouseDestination(event);
71831    if (!dest)
71832      return false;
71833    do {
71834      if (Y3OOHFCN_hasOwnProperty(dest, G6ONQ5EH_symbol) && dest[G6ONQ5EH_symbol])
71835        return true;
71836      dest = dest.parentElement;
71837    } while (dest);
71838    return false;
71839  }
71840  var useCompositeHover = createHook(
71841    (_a) => {
71842      var _b = _a, {
71843        store,
71844        focusOnHover = true,
71845        blurOnHoverEnd = !!focusOnHover
71846      } = _b, props = __objRest(_b, [
71847        "store",
71848        "focusOnHover",
71849        "blurOnHoverEnd"
71850      ]);
71851      const context = useCompositeContext();
71852      store = store || context;
71853      invariant(
71854        store,
71855         false && 0
71856      );
71857      const isMouseMoving = useIsMouseMoving();
71858      const onMouseMoveProp = props.onMouseMove;
71859      const focusOnHoverProp = useBooleanEvent(focusOnHover);
71860      const onMouseMove = useEvent((event) => {
71861        onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
71862        if (event.defaultPrevented)
71863          return;
71864        if (!isMouseMoving())
71865          return;
71866        if (!focusOnHoverProp(event))
71867          return;
71868        if (!hasFocusWithin(event.currentTarget)) {
71869          const baseElement = store == null ? void 0 : store.getState().baseElement;
71870          if (baseElement && !hasFocus(baseElement)) {
71871            baseElement.focus();
71872          }
71873        }
71874        store == null ? void 0 : store.setActiveId(event.currentTarget.id);
71875      });
71876      const onMouseLeaveProp = props.onMouseLeave;
71877      const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
71878      const onMouseLeave = useEvent((event) => {
71879        var _a2;
71880        onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
71881        if (event.defaultPrevented)
71882          return;
71883        if (!isMouseMoving())
71884          return;
71885        if (hoveringInside(event))
71886          return;
71887        if (movingToAnotherItem(event))
71888          return;
71889        if (!focusOnHoverProp(event))
71890          return;
71891        if (!blurOnHoverEndProp(event))
71892          return;
71893        store == null ? void 0 : store.setActiveId(null);
71894        (_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
71895      });
71896      const ref = (0,external_React_.useCallback)((element) => {
71897        if (!element)
71898          return;
71899        element[G6ONQ5EH_symbol] = true;
71900      }, []);
71901      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), {
71902        ref: useMergeRefs(ref, props.ref),
71903        onMouseMove,
71904        onMouseLeave
71905      });
71906      return props;
71907    }
71908  );
71909  var CompositeHover = createMemoComponent(
71910    (props) => {
71911      const htmlProps = useCompositeHover(props);
71912      return _3ORBWXWF_createElement("div", htmlProps);
71913    }
71914  );
71915  if (false) {}
71916  
71917  
71918  
71919  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Y6467XPW.js
71920  "use client";
71921  
71922  
71923  
71924  
71925  
71926  
71927  
71928  
71929  
71930  // src/menu/menu-item.ts
71931  
71932  
71933  
71934  
71935  function menuHasFocus(baseElement, items, currentTarget) {
71936    var _a;
71937    if (!baseElement)
71938      return false;
71939    if (hasFocusWithin(baseElement))
71940      return true;
71941    const expandedItem = items == null ? void 0 : items.find((item) => {
71942      var _a2;
71943      if (item.element === currentTarget)
71944        return false;
71945      return ((_a2 = item.element) == null ? void 0 : _a2.getAttribute("aria-expanded")) === "true";
71946    });
71947    const expandedMenuId = (_a = expandedItem == null ? void 0 : expandedItem.element) == null ? void 0 : _a.getAttribute("aria-controls");
71948    if (!expandedMenuId)
71949      return false;
71950    const doc = DLOEKDPY_getDocument(baseElement);
71951    const expandedMenu = doc.getElementById(expandedMenuId);
71952    if (!expandedMenu)
71953      return false;
71954    if (hasFocusWithin(expandedMenu))
71955      return true;
71956    return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]");
71957  }
71958  var useMenuItem = createHook(
71959    (_a) => {
71960      var _b = _a, {
71961        store,
71962        hideOnClick = true,
71963        preventScrollOnKeyDown = true,
71964        focusOnHover,
71965        blurOnHoverEnd
71966      } = _b, props = __objRest(_b, [
71967        "store",
71968        "hideOnClick",
71969        "preventScrollOnKeyDown",
71970        "focusOnHover",
71971        "blurOnHoverEnd"
71972      ]);
71973      const menuContext = useMenuScopedContext(true);
71974      const menubarContext = KA4GX64Z_useMenubarScopedContext();
71975      store = store || menuContext || menubarContext;
71976      invariant(
71977        store,
71978         false && 0
71979      );
71980      const onClickProp = props.onClick;
71981      const hideOnClickProp = useBooleanEvent(hideOnClick);
71982      const hideMenu = "hideAll" in store ? store.hideAll : void 0;
71983      const isWithinMenu = !!hideMenu;
71984      const onClick = useEvent((event) => {
71985        onClickProp == null ? void 0 : onClickProp(event);
71986        if (event.defaultPrevented)
71987          return;
71988        if (isDownloading(event))
71989          return;
71990        if (isOpeningInNewTab(event))
71991          return;
71992        if (!hideMenu)
71993          return;
71994        const popupType = event.currentTarget.getAttribute("aria-haspopup");
71995        if (popupType === "menu")
71996          return;
71997        if (!hideOnClickProp(event))
71998          return;
71999        hideMenu();
72000      });
72001      const contentElement = useStoreState(
72002        store,
72003        (state) => "contentElement" in state ? state.contentElement : null
72004      );
72005      const role = getPopupItemRole(contentElement, "menuitem");
72006      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
72007        role
72008      }, props), {
72009        onClick
72010      });
72011      props = useCompositeItem(_4R3V3JGP_spreadValues({ store, preventScrollOnKeyDown }, props));
72012      props = useCompositeHover(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
72013        store
72014      }, props), {
72015        focusOnHover(event) {
72016          const getFocusOnHover = () => {
72017            if (typeof focusOnHover === "function")
72018              return focusOnHover(event);
72019            if (focusOnHover != null)
72020              return focusOnHover;
72021            return true;
72022          };
72023          if (!store)
72024            return false;
72025          if (!getFocusOnHover())
72026            return false;
72027          const { baseElement, items } = store.getState();
72028          if (isWithinMenu) {
72029            if (event.currentTarget.hasAttribute("aria-expanded")) {
72030              event.currentTarget.focus();
72031            }
72032            return true;
72033          }
72034          if (menuHasFocus(baseElement, items, event.currentTarget)) {
72035            event.currentTarget.focus();
72036            return true;
72037          }
72038          return false;
72039        },
72040        blurOnHoverEnd(event) {
72041          if (typeof blurOnHoverEnd === "function")
72042            return blurOnHoverEnd(event);
72043          if (blurOnHoverEnd != null)
72044            return blurOnHoverEnd;
72045          return isWithinMenu;
72046        }
72047      }));
72048      return props;
72049    }
72050  );
72051  var Y6467XPW_MenuItem = createMemoComponent((props) => {
72052    const htmlProps = useMenuItem(props);
72053    return _3ORBWXWF_createElement("div", htmlProps);
72054  });
72055  if (false) {}
72056  
72057  
72058  
72059  ;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/checkbox/checkbox-store.js
72060  "use client";
72061  
72062  
72063  
72064  
72065  // src/checkbox/checkbox-store.ts
72066  function createCheckboxStore(props = {}) {
72067    var _a;
72068    throwOnConflictingProps(props, props.store);
72069    const syncState = (_a = props.store) == null ? void 0 : _a.getState();
72070    const initialState = {
72071      value: defaultValue(
72072        props.value,
72073        syncState == null ? void 0 : syncState.value,
72074        props.defaultValue,
72075        false
72076      )
72077    };
72078    const checkbox = createStore(initialState, props.store);
72079    return _chunks_4R3V3JGP_spreadProps(_chunks_4R3V3JGP_spreadValues({}, checkbox), {
72080      setValue: (value) => checkbox.setState("value", value)
72081    });
72082  }
72083  
72084  
72085  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JIZ5C2JK.js
72086  "use client";
72087  
72088  
72089  
72090  // src/checkbox/checkbox-store.ts
72091  
72092  function useCheckboxStoreProps(store, update, props) {
72093    useUpdateEffect(update, [props.store]);
72094    useStoreProps(store, props, "value", "setValue");
72095    return store;
72096  }
72097  function useCheckboxStore(props = {}) {
72098    const [store, update] = EKQEJRUF_useStore(createCheckboxStore, props);
72099    return useCheckboxStoreProps(store, update, props);
72100  }
72101  
72102  
72103  
72104  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/VPR2WHQV.js
72105  "use client";
72106  
72107  
72108  // src/checkbox/checkbox-context.tsx
72109  var VPR2WHQV_ctx = createStoreContext();
72110  var useCheckboxContext = VPR2WHQV_ctx.useContext;
72111  var useCheckboxScopedContext = VPR2WHQV_ctx.useScopedContext;
72112  var useCheckboxProviderContext = VPR2WHQV_ctx.useProviderContext;
72113  var CheckboxContextProvider = VPR2WHQV_ctx.ContextProvider;
72114  var CheckboxScopedContextProvider = VPR2WHQV_ctx.ScopedContextProvider;
72115  
72116  
72117  
72118  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3AHQ6JCP.js
72119  "use client";
72120  
72121  
72122  
72123  
72124  
72125  
72126  
72127  
72128  // src/checkbox/checkbox.tsx
72129  
72130  
72131  
72132  function setMixed(element, mixed) {
72133    if (mixed) {
72134      element.indeterminate = true;
72135    } else if (element.indeterminate) {
72136      element.indeterminate = false;
72137    }
72138  }
72139  function isNativeCheckbox(tagName, type) {
72140    return tagName === "input" && (!type || type === "checkbox");
72141  }
72142  function getPrimitiveValue(value) {
72143    if (Array.isArray(value)) {
72144      return value.toString();
72145    }
72146    return value;
72147  }
72148  var useCheckbox = createHook(
72149    (_a) => {
72150      var _b = _a, {
72151        store,
72152        name,
72153        value: valueProp,
72154        checked: checkedProp,
72155        defaultChecked
72156      } = _b, props = __objRest(_b, [
72157        "store",
72158        "name",
72159        "value",
72160        "checked",
72161        "defaultChecked"
72162      ]);
72163      const context = useCheckboxContext();
72164      store = store || context;
72165      const [_checked, setChecked] = (0,external_React_.useState)(defaultChecked != null ? defaultChecked : false);
72166      const checked = useStoreState(store, (state) => {
72167        if (checkedProp !== void 0)
72168          return checkedProp;
72169        if ((state == null ? void 0 : state.value) === void 0)
72170          return _checked;
72171        if (valueProp != null) {
72172          if (Array.isArray(state.value)) {
72173            const primitiveValue = getPrimitiveValue(valueProp);
72174            return state.value.includes(primitiveValue);
72175          }
72176          return state.value === valueProp;
72177        }
72178        if (Array.isArray(state.value))
72179          return false;
72180        if (typeof state.value === "boolean")
72181          return state.value;
72182        return false;
72183      });
72184      const ref = (0,external_React_.useRef)(null);
72185      const tagName = useTagName(ref, props.as || "input");
72186      const nativeCheckbox = isNativeCheckbox(tagName, props.type);
72187      const mixed = checked ? checked === "mixed" : void 0;
72188      const isChecked = checked === "mixed" ? false : checked;
72189      const disabled = disabledFromProps(props);
72190      const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
72191      (0,external_React_.useEffect)(() => {
72192        const element = ref.current;
72193        if (!element)
72194          return;
72195        setMixed(element, mixed);
72196        if (nativeCheckbox)
72197          return;
72198        element.checked = isChecked;
72199        if (name !== void 0) {
72200          element.name = name;
72201        }
72202        if (valueProp !== void 0) {
72203          element.value = `$valueProp}`;
72204        }
72205      }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
72206      const onChangeProp = props.onChange;
72207      const onChange = useEvent((event) => {
72208        if (disabled) {
72209          event.stopPropagation();
72210          event.preventDefault();
72211          return;
72212        }
72213        setMixed(event.currentTarget, mixed);
72214        if (!nativeCheckbox) {
72215          event.currentTarget.checked = !event.currentTarget.checked;
72216          schedulePropertyUpdate();
72217        }
72218        onChangeProp == null ? void 0 : onChangeProp(event);
72219        if (event.defaultPrevented)
72220          return;
72221        const elementChecked = event.currentTarget.checked;
72222        setChecked(elementChecked);
72223        store == null ? void 0 : store.setValue((prevValue) => {
72224          if (valueProp == null)
72225            return elementChecked;
72226          const primitiveValue = getPrimitiveValue(valueProp);
72227          if (!Array.isArray(prevValue)) {
72228            return prevValue === primitiveValue ? false : primitiveValue;
72229          }
72230          if (elementChecked) {
72231            if (prevValue.includes(primitiveValue)) {
72232              return prevValue;
72233            }
72234            return [...prevValue, primitiveValue];
72235          }
72236          return prevValue.filter((v) => v !== primitiveValue);
72237        });
72238      });
72239      const onClickProp = props.onClick;
72240      const onClick = useEvent((event) => {
72241        onClickProp == null ? void 0 : onClickProp(event);
72242        if (event.defaultPrevented)
72243          return;
72244        if (nativeCheckbox)
72245          return;
72246        onChange(event);
72247      });
72248      props = useWrapElement(
72249        props,
72250        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
72251        [isChecked]
72252      );
72253      props = _4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({
72254        role: !nativeCheckbox ? "checkbox" : void 0,
72255        type: nativeCheckbox ? "checkbox" : void 0,
72256        "aria-checked": checked
72257      }, props), {
72258        ref: useMergeRefs(ref, props.ref),
72259        onChange,
72260        onClick
72261      });
72262      props = useCommand(_4R3V3JGP_spreadValues({ clickOnEnter: !nativeCheckbox }, props));
72263      return _4R3V3JGP_spreadValues({
72264        name: nativeCheckbox ? name : void 0,
72265        value: nativeCheckbox ? valueProp : void 0,
72266        checked: isChecked
72267      }, props);
72268    }
72269  );
72270  var Checkbox = createComponent((props) => {
72271    const htmlProps = useCheckbox(props);
72272    return _3ORBWXWF_createElement("input", htmlProps);
72273  });
72274  if (false) {}
72275  
72276  
72277  
72278  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-checkbox.js
72279  "use client";
72280  
72281  
72282  
72283  
72284  
72285  
72286  
72287  
72288  
72289  
72290  
72291  
72292  
72293  
72294  
72295  
72296  
72297  
72298  
72299  
72300  
72301  
72302  
72303  
72304  
72305  
72306  // src/menu/menu-item-checkbox.ts
72307  
72308  
72309  function menu_item_checkbox_getPrimitiveValue(value) {
72310    if (Array.isArray(value)) {
72311      return value.toString();
72312    }
72313    return value;
72314  }
72315  function getValue(storeValue, value, checked) {
72316    if (value === void 0) {
72317      if (Array.isArray(storeValue))
72318        return storeValue;
72319      return !!checked;
72320    }
72321    const primitiveValue = menu_item_checkbox_getPrimitiveValue(value);
72322    if (!Array.isArray(storeValue)) {
72323      if (checked) {
72324        return primitiveValue;
72325      }
72326      return storeValue === primitiveValue ? false : storeValue;
72327    }
72328    if (checked) {
72329      if (storeValue.includes(primitiveValue)) {
72330        return storeValue;
72331      }
72332      return [...storeValue, primitiveValue];
72333    }
72334    return storeValue.filter((v) => v !== primitiveValue);
72335  }
72336  var useMenuItemCheckbox = createHook(
72337    (_a) => {
72338      var _b = _a, {
72339        store,
72340        name,
72341        value,
72342        checked,
72343        defaultChecked: defaultCheckedProp,
72344        hideOnClick = false
72345      } = _b, props = __objRest(_b, [
72346        "store",
72347        "name",
72348        "value",
72349        "checked",
72350        "defaultChecked",
72351        "hideOnClick"
72352      ]);
72353      const context = useMenuScopedContext();
72354      store = store || context;
72355      invariant(
72356        store,
72357         false && 0
72358      );
72359      const defaultChecked = useInitialValue(defaultCheckedProp);
72360      (0,external_React_.useEffect)(() => {
72361        store == null ? void 0 : store.setValue(name, (prevValue = []) => {
72362          if (!defaultChecked)
72363            return prevValue;
72364          return getValue(prevValue, value, true);
72365        });
72366      }, [store, name, value, defaultChecked]);
72367      (0,external_React_.useEffect)(() => {
72368        if (checked === void 0)
72369          return;
72370        store == null ? void 0 : store.setValue(name, (prevValue) => {
72371          return getValue(prevValue, value, checked);
72372        });
72373      }, [store, name, value, checked]);
72374      const checkboxStore = useCheckboxStore({
72375        value: store.useState((state) => state.values[name]),
72376        setValue(internalValue) {
72377          store == null ? void 0 : store.setValue(name, () => {
72378            if (checked === void 0)
72379              return internalValue;
72380            const nextValue = getValue(internalValue, value, checked);
72381            if (!Array.isArray(nextValue))
72382              return nextValue;
72383            if (!Array.isArray(internalValue))
72384              return nextValue;
72385            if (shallowEqual(internalValue, nextValue))
72386              return internalValue;
72387            return nextValue;
72388          });
72389        }
72390      });
72391      props = _4R3V3JGP_spreadValues({
72392        role: "menuitemcheckbox"
72393      }, props);
72394      props = useCheckbox(_4R3V3JGP_spreadValues({
72395        store: checkboxStore,
72396        name,
72397        value,
72398        checked
72399      }, props));
72400      props = useMenuItem(_4R3V3JGP_spreadValues({ store, hideOnClick }, props));
72401      return props;
72402    }
72403  );
72404  var MenuItemCheckbox = createMemoComponent(
72405    (props) => {
72406      const htmlProps = useMenuItemCheckbox(props);
72407      return _3ORBWXWF_createElement("div", htmlProps);
72408    }
72409  );
72410  if (false) {}
72411  
72412  
72413  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-item-radio.js
72414  "use client";
72415  
72416  
72417  
72418  
72419  
72420  
72421  
72422  
72423  
72424  
72425  
72426  
72427  
72428  
72429  
72430  
72431  
72432  
72433  
72434  
72435  
72436  
72437  
72438  
72439  // src/menu/menu-item-radio.tsx
72440  
72441  
72442  
72443  function menu_item_radio_getValue(prevValue, value, checked) {
72444    if (checked === void 0)
72445      return prevValue;
72446    if (checked)
72447      return value;
72448    return prevValue;
72449  }
72450  var useMenuItemRadio = createHook(
72451    (_a) => {
72452      var _b = _a, {
72453        store,
72454        name,
72455        value,
72456        checked,
72457        onChange: onChangeProp,
72458        hideOnClick = false
72459      } = _b, props = __objRest(_b, [
72460        "store",
72461        "name",
72462        "value",
72463        "checked",
72464        "onChange",
72465        "hideOnClick"
72466      ]);
72467      const context = useMenuScopedContext();
72468      store = store || context;
72469      invariant(
72470        store,
72471         false && 0
72472      );
72473      const defaultChecked = useInitialValue(props.defaultChecked);
72474      (0,external_React_.useEffect)(() => {
72475        store == null ? void 0 : store.setValue(name, (prevValue = false) => {
72476          return menu_item_radio_getValue(prevValue, value, defaultChecked);
72477        });
72478      }, [store, name, value, defaultChecked]);
72479      (0,external_React_.useEffect)(() => {
72480        if (checked === void 0)
72481          return;
72482        store == null ? void 0 : store.setValue(name, (prevValue) => {
72483          return menu_item_radio_getValue(prevValue, value, checked);
72484        });
72485      }, [store, name, value, checked]);
72486      const isChecked = store.useState((state) => state.values[name] === value);
72487      props = useWrapElement(
72488        props,
72489        (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(MenuItemCheckedContext.Provider, { value: !!isChecked, children: element }),
72490        [isChecked]
72491      );
72492      props = _4R3V3JGP_spreadValues({
72493        role: "menuitemradio"
72494      }, props);
72495      props = useRadio(_4R3V3JGP_spreadValues({
72496        name,
72497        value,
72498        checked: isChecked,
72499        onChange: (event) => {
72500          onChangeProp == null ? void 0 : onChangeProp(event);
72501          if (event.defaultPrevented)
72502            return;
72503          const element = event.currentTarget;
72504          store == null ? void 0 : store.setValue(name, (prevValue) => {
72505            return menu_item_radio_getValue(prevValue, value, checked != null ? checked : element.checked);
72506          });
72507        }
72508      }, props));
72509      props = useMenuItem(_4R3V3JGP_spreadValues({ store, hideOnClick }, props));
72510      return props;
72511    }
72512  );
72513  var MenuItemRadio = createMemoComponent(
72514    (props) => {
72515      const htmlProps = useMenuItemRadio(props);
72516      return _3ORBWXWF_createElement("div", htmlProps);
72517    }
72518  );
72519  if (false) {}
72520  
72521  
72522  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-group.js
72523  "use client";
72524  
72525  
72526  
72527  
72528  
72529  
72530  
72531  
72532  // src/menu/menu-group.ts
72533  var useMenuGroup = createHook((props) => {
72534    props = useCompositeGroup(props);
72535    return props;
72536  });
72537  var menu_group_MenuGroup = createComponent((props) => {
72538    const htmlProps = useMenuGroup(props);
72539    return _3ORBWXWF_createElement("div", htmlProps);
72540  });
72541  if (false) {}
72542  
72543  
72544  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/ENRQQ6LK.js
72545  "use client";
72546  
72547  
72548  
72549  
72550  
72551  // src/composite/composite-separator.ts
72552  
72553  var useCompositeSeparator = createHook(
72554    (_a) => {
72555      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
72556      const context = useCompositeContext();
72557      store = store || context;
72558      invariant(
72559        store,
72560         false && 0
72561      );
72562      const orientation = store.useState(
72563        (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
72564      );
72565      props = useSeparator(_4R3V3JGP_spreadProps(_4R3V3JGP_spreadValues({}, props), { orientation }));
72566      return props;
72567    }
72568  );
72569  var CompositeSeparator = createComponent(
72570    (props) => {
72571      const htmlProps = useCompositeSeparator(props);
72572      return _3ORBWXWF_createElement("hr", htmlProps);
72573    }
72574  );
72575  if (false) {}
72576  
72577  
72578  
72579  ;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/menu/menu-separator.js
72580  "use client";
72581  
72582  
72583  
72584  
72585  
72586  
72587  
72588  
72589  
72590  
72591  
72592  
72593  
72594  
72595  
72596  // src/menu/menu-separator.ts
72597  var useMenuSeparator = createHook(
72598    (_a) => {
72599      var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
72600      const context = useMenuContext();
72601      store = store || context;
72602      props = useCompositeSeparator(_4R3V3JGP_spreadValues({ store }, props));
72603      return props;
72604    }
72605  );
72606  var MenuSeparator = createComponent((props) => {
72607    const htmlProps = useMenuSeparator(props);
72608    return _3ORBWXWF_createElement("hr", htmlProps);
72609  });
72610  if (false) {}
72611  
72612  
72613  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu-v2/styles.js
72614  
72615  function 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)."; }
72616  /**
72617   * External dependencies
72618   */
72619  // eslint-disable-next-line no-restricted-imports
72620  
72621  
72622  /**
72623   * Internal dependencies
72624   */
72625  
72626  
72627  
72628  
72629  const ANIMATION_PARAMS = {
72630    SLIDE_AMOUNT: '2px',
72631    DURATION: '400ms',
72632    EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )'
72633  };
72634  const CONTENT_WRAPPER_PADDING = space(1);
72635  const ITEM_PADDING_BLOCK = space(2);
72636  const ITEM_PADDING_INLINE = space(3);
72637  
72638  // TODO:
72639  // - those values are different from saved variables?
72640  // - should bring this into the config, and make themeable
72641  // - border color and divider color are different?
72642  const DEFAULT_BORDER_COLOR = COLORS.gray[300];
72643  const DIVIDER_COLOR = COLORS.gray[200];
72644  const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray['900'];
72645  const DEFAULT_BOX_SHADOW = `0 0 0 $config_values.borderWidth} $DEFAULT_BORDER_COLOR}, $config_values.popoverShadow}`;
72646  const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 $config_values.borderWidth} $TOOLBAR_VARIANT_BORDER_COLOR}`;
72647  const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
72648  const slideUpAndFade = emotion_react_browser_esm_keyframes({
72649    '0%': {
72650      opacity: 0,
72651      transform: `translateY($ANIMATION_PARAMS.SLIDE_AMOUNT})`
72652    },
72653    '100%': {
72654      opacity: 1,
72655      transform: 'translateY(0)'
72656    }
72657  });
72658  const slideRightAndFade = emotion_react_browser_esm_keyframes({
72659    '0%': {
72660      opacity: 0,
72661      transform: `translateX(-$ANIMATION_PARAMS.SLIDE_AMOUNT})`
72662    },
72663    '100%': {
72664      opacity: 1,
72665      transform: 'translateX(0)'
72666    }
72667  });
72668  const slideDownAndFade = emotion_react_browser_esm_keyframes({
72669    '0%': {
72670      opacity: 0,
72671      transform: `translateY(-$ANIMATION_PARAMS.SLIDE_AMOUNT})`
72672    },
72673    '100%': {
72674      opacity: 1,
72675      transform: 'translateY(0)'
72676    }
72677  });
72678  const slideLeftAndFade = emotion_react_browser_esm_keyframes({
72679    '0%': {
72680      opacity: 0,
72681      transform: `translateX($ANIMATION_PARAMS.SLIDE_AMOUNT})`
72682    },
72683    '100%': {
72684      opacity: 1,
72685      transform: 'translateX(0)'
72686    }
72687  });
72688  const dropdown_menu_v2_styles_DropdownMenu = /*#__PURE__*/emotion_styled_base_browser_esm(Menu,  true ? {
72689    target: "e1kdzosf12"
72690  } : 0)("position:relative;z-index:1000000;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";grid-template-rows:auto;box-sizing:border-box;min-width:160px;max-width:320px;max-height:var( --popover-available-height );padding:", CONTENT_WRAPPER_PADDING, ";background-color:", COLORS.ui.background, ";border-radius:4px;", props => /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", props.variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";" + ( true ? "" : 0),  true ? "" : 0), " overscroll-behavior:contain;overflow:auto;outline:2px solid transparent!important;animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";will-change:transform,opacity;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));
72691  const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;position:relative;min-height:", space(10), ";box-sizing:border-box;grid-column:1/-1;display:grid;grid-template-columns:", GRID_TEMPLATE_COLS, ";align-items:center;@supports ( grid-template-columns: subgrid ){grid-template-columns:subgrid;}font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.gray[900], ";border-radius:", config_values.radiusBlockUi, ";padding-block:", ITEM_PADDING_BLOCK, ";padding-inline:", ITEM_PADDING_INLINE, ";scroll-margin:", CONTENT_WRAPPER_PADDING, ";user-select:none;outline:none;&[aria-disabled='true']{color:", COLORS.ui.textDisabled, ";cursor:not-allowed;}&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t){background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";}&[data-focus-visible]{box-shadow:0 0 0 1.5px ", COLORS.theme.accent, ";outline:2px solid transparent;}&:active,&[data-active]{}", dropdown_menu_v2_styles_DropdownMenu, ":not(:focus) &:not(:focus)[aria-expanded=\"true\"]{background-color:", COLORS.gray[100], ";color:", COLORS.gray[900], ";}svg{fill:currentColor;}" + ( true ? "" : 0),  true ? "" : 0);
72692  const styles_DropdownMenuItem = /*#__PURE__*/emotion_styled_base_browser_esm(Y6467XPW_MenuItem,  true ? {
72693    target: "e1kdzosf11"
72694  } : 0)(baseItem, ";" + ( true ? "" : 0));
72695  const styles_DropdownMenuCheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemCheckbox,  true ? {
72696    target: "e1kdzosf10"
72697  } : 0)(baseItem, ";" + ( true ? "" : 0));
72698  const styles_DropdownMenuRadioItem = /*#__PURE__*/emotion_styled_base_browser_esm(MenuItemRadio,  true ? {
72699    target: "e1kdzosf9"
72700  } : 0)(baseItem, ";" + ( true ? "" : 0));
72701  const ItemPrefixWrapper = emotion_styled_base_browser_esm("span",  true ? {
72702    target: "e1kdzosf8"
72703  } : 0)("grid-column:1;", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&{min-width:", space(6), ";}", styles_DropdownMenuCheckboxItem, ">&,", styles_DropdownMenuRadioItem, ">&,&:not( :empty ){margin-inline-end:", space(2), ";}display:flex;align-items:center;justify-content:center;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] )>&,[aria-disabled='true']>&{color:inherit;}" + ( true ? "" : 0));
72704  const DropdownMenuItemContentWrapper = emotion_styled_base_browser_esm("div",  true ? {
72705    target: "e1kdzosf7"
72706  } : 0)("grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:", space(3), ";pointer-events:none;" + ( true ? "" : 0));
72707  const DropdownMenuItemChildrenWrapper = emotion_styled_base_browser_esm("div",  true ? {
72708    target: "e1kdzosf6"
72709  } : 0)("flex:1;display:inline-flex;flex-direction:column;gap:", space(1), ";" + ( true ? "" : 0));
72710  const ItemSuffixWrapper = emotion_styled_base_browser_esm("span",  true ? {
72711    target: "e1kdzosf5"
72712  } : 0)("flex:0 1 fit-content;min-width:0;width:fit-content;display:flex;align-items:center;justify-content:center;gap:", space(3), ";color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &,[aria-disabled='true'] *:not(", dropdown_menu_v2_styles_DropdownMenu, ") &{color:inherit;}" + ( true ? "" : 0));
72713  const styles_DropdownMenuGroup = /*#__PURE__*/emotion_styled_base_browser_esm(menu_group_MenuGroup,  true ? {
72714    target: "e1kdzosf4"
72715  } : 0)( true ? {
72716    name: "49aokf",
72717    styles: "display:contents"
72718  } : 0);
72719  const styles_DropdownMenuSeparator = /*#__PURE__*/emotion_styled_base_browser_esm(MenuSeparator,  true ? {
72720    target: "e1kdzosf3"
72721  } : 0)("grid-column:1/-1;border:none;height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DIVIDER_COLOR, ";margin-block:", space(2), ";margin-inline:", ITEM_PADDING_INLINE, ";outline:2px solid transparent;" + ( true ? "" : 0));
72722  const SubmenuChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon,  true ? {
72723    target: "e1kdzosf2"
72724  } : 0)("width:", space(1.5), ";", rtl({
72725    transform: `scaleX(1)`
72726  }, {
72727    transform: `scaleX(-1)`
72728  }), ";" + ( true ? "" : 0));
72729  const styles_DropdownMenuItemLabel = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component,  true ? {
72730    target: "e1kdzosf1"
72731  } : 0)("font-size:", font('default.fontSize'), ";line-height:20px;color:inherit;" + ( true ? "" : 0));
72732  const styles_DropdownMenuItemHelpText = /*#__PURE__*/emotion_styled_base_browser_esm(truncate_component,  true ? {
72733    target: "e1kdzosf0"
72734  } : 0)("font-size:", font('helpText.fontSize'), ";line-height:16px;color:", COLORS.gray['700'], ";[data-active-item]:not( [data-focus-visible] ) *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &,[aria-disabled='true'] *:not( ", dropdown_menu_v2_styles_DropdownMenu, " ) &{color:inherit;}" + ( true ? "" : 0));
72735  
72736  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu-v2/index.js
72737  
72738  /**
72739   * External dependencies
72740   */
72741  // eslint-disable-next-line no-restricted-imports
72742  
72743  
72744  /**
72745   * WordPress dependencies
72746   */
72747  
72748  
72749  
72750  
72751  
72752  /**
72753   * Internal dependencies
72754   */
72755  
72756  
72757  
72758  const DropdownMenuContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
72759  const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItem({
72760    prefix,
72761    suffix,
72762    children,
72763    hideOnClick = true,
72764    ...props
72765  }, ref) {
72766    const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72767    return (0,external_React_.createElement)(styles_DropdownMenuItem, {
72768      ref: ref,
72769      ...props,
72770      accessibleWhenDisabled: true,
72771      hideOnClick: hideOnClick,
72772      store: dropdownMenuContext?.store
72773    }, (0,external_React_.createElement)(ItemPrefixWrapper, null, prefix), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix)));
72774  });
72775  const DropdownMenuCheckboxItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuCheckboxItem({
72776    suffix,
72777    children,
72778    hideOnClick = false,
72779    ...props
72780  }, ref) {
72781    const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72782    return (0,external_React_.createElement)(styles_DropdownMenuCheckboxItem, {
72783      ref: ref,
72784      ...props,
72785      accessibleWhenDisabled: true,
72786      hideOnClick: hideOnClick,
72787      store: dropdownMenuContext?.store
72788    }, (0,external_React_.createElement)(MenuItemCheck, {
72789      store: dropdownMenuContext?.store,
72790      render: (0,external_React_.createElement)(ItemPrefixWrapper, null)
72791      // Override some ariakit inline styles
72792      ,
72793      style: {
72794        width: 'auto',
72795        height: 'auto'
72796      }
72797    }, (0,external_React_.createElement)(build_module_icon, {
72798      icon: library_check,
72799      size: 24
72800    })), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix)));
72801  });
72802  const radioCheck = (0,external_React_.createElement)(external_wp_primitives_namespaceObject.SVG, {
72803    xmlns: "http://www.w3.org/2000/svg",
72804    viewBox: "0 0 24 24"
72805  }, (0,external_React_.createElement)(external_wp_primitives_namespaceObject.Circle, {
72806    cx: 12,
72807    cy: 12,
72808    r: 3
72809  }));
72810  const DropdownMenuRadioItem = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuRadioItem({
72811    suffix,
72812    children,
72813    hideOnClick = false,
72814    ...props
72815  }, ref) {
72816    const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72817    return (0,external_React_.createElement)(styles_DropdownMenuRadioItem, {
72818      ref: ref,
72819      ...props,
72820      accessibleWhenDisabled: true,
72821      hideOnClick: hideOnClick,
72822      store: dropdownMenuContext?.store
72823    }, (0,external_React_.createElement)(MenuItemCheck, {
72824      store: dropdownMenuContext?.store,
72825      render: (0,external_React_.createElement)(ItemPrefixWrapper, null)
72826      // Override some ariakit inline styles
72827      ,
72828      style: {
72829        width: 'auto',
72830        height: 'auto'
72831      }
72832    }, (0,external_React_.createElement)(build_module_icon, {
72833      icon: radioCheck,
72834      size: 24
72835    })), (0,external_React_.createElement)(DropdownMenuItemContentWrapper, null, (0,external_React_.createElement)(DropdownMenuItemChildrenWrapper, null, children), suffix && (0,external_React_.createElement)(ItemSuffixWrapper, null, suffix)));
72836  });
72837  const DropdownMenuGroup = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuGroup(props, ref) {
72838    const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72839    return (0,external_React_.createElement)(styles_DropdownMenuGroup, {
72840      ref: ref,
72841      ...props,
72842      store: dropdownMenuContext?.store
72843    });
72844  });
72845  const dropdown_menu_v2_UnconnectedDropdownMenu = (props, ref) => {
72846    var _props$placement;
72847    const {
72848      // Store props
72849      open,
72850      defaultOpen = false,
72851      onOpenChange,
72852      placement,
72853      // Menu trigger props
72854      trigger,
72855      // Menu props
72856      gutter,
72857      children,
72858      shift,
72859      modal = true,
72860      // From internal components context
72861      variant,
72862      // Rest
72863      ...otherProps
72864    } = useContextSystem(props, 'DropdownMenu');
72865    const parentContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72866    const computedDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'rtl' : 'ltr';
72867  
72868    // If an explicit value for the `placement` prop is not passed,
72869    // apply a default placement of `bottom-start` for the root dropdown,
72870    // and of `right-start` for nested dropdowns.
72871    let computedPlacement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : parentContext?.store ? 'right-start' : 'bottom-start';
72872    // Swap left/right in case of RTL direction
72873    if (computedDirection === 'rtl') {
72874      if (/right/.test(computedPlacement)) {
72875        computedPlacement = computedPlacement.replace('right', 'left');
72876      } else if (/left/.test(computedPlacement)) {
72877        computedPlacement = computedPlacement.replace('left', 'right');
72878      }
72879    }
72880    const dropdownMenuStore = useMenuStore({
72881      parent: parentContext?.store,
72882      open,
72883      defaultOpen,
72884      placement: computedPlacement,
72885      focusLoop: true,
72886      setOpen(willBeOpen) {
72887        onOpenChange?.(willBeOpen);
72888      },
72889      rtl: computedDirection === 'rtl'
72890    });
72891    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
72892      store: dropdownMenuStore,
72893      variant
72894    }), [dropdownMenuStore, variant]);
72895  
72896    // Extract the side from the applied placement — useful for animations.
72897    const appliedPlacementSide = dropdownMenuStore.useState('placement').split('-')[0];
72898    if (dropdownMenuStore.parent && !((0,external_wp_element_namespaceObject.isValidElement)(trigger) && DropdownMenuItem === trigger.type)) {
72899      // eslint-disable-next-line no-console
72900      console.warn('For nested DropdownMenus, the `trigger` should always be a `DropdownMenuItem`.');
72901    }
72902    const hideOnEscape = (0,external_wp_element_namespaceObject.useCallback)(event => {
72903      // Pressing Escape can cause unexpected consequences (ie. exiting
72904      // full screen mode on MacOs, close parent modals...).
72905      event.preventDefault();
72906      // Returning `true` causes the menu to hide.
72907      return true;
72908    }, []);
72909    const wrapperProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({
72910      dir: computedDirection,
72911      style: {
72912        direction: computedDirection
72913      }
72914    }), [computedDirection]);
72915    return (0,external_React_.createElement)(external_React_.Fragment, null, (0,external_React_.createElement)(MenuButton, {
72916      ref: ref,
72917      store: dropdownMenuStore,
72918      render: dropdownMenuStore.parent ? (0,external_wp_element_namespaceObject.cloneElement)(trigger, {
72919        // Add submenu arrow, unless a `suffix` is explicitly specified
72920        suffix: (0,external_React_.createElement)(external_React_.Fragment, null, trigger.props.suffix, (0,external_React_.createElement)(SubmenuChevronIcon, {
72921          "aria-hidden": "true",
72922          icon: chevron_right_small,
72923          size: 24,
72924          preserveAspectRatio: "xMidYMid slice"
72925        }))
72926      }) : trigger
72927    }), (0,external_React_.createElement)(dropdown_menu_v2_styles_DropdownMenu, {
72928      ...otherProps,
72929      modal: modal,
72930      store: dropdownMenuStore
72931      // Root menu has an 8px distance from its trigger,
72932      // otherwise 0 (which causes the submenu to slightly overlap)
72933      ,
72934      gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8
72935      // Align nested menu by the same (but opposite) amount
72936      // as the menu container's padding.
72937      ,
72938      shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0,
72939      hideOnHoverOutside: false,
72940      "data-side": appliedPlacementSide,
72941      variant: variant,
72942      wrapperProps: wrapperProps,
72943      hideOnEscape: hideOnEscape,
72944      unmountOnHide: true
72945    }, (0,external_React_.createElement)(DropdownMenuContext.Provider, {
72946      value: contextValue
72947    }, children)));
72948  };
72949  const dropdown_menu_v2_DropdownMenu = contextConnect(dropdown_menu_v2_UnconnectedDropdownMenu, 'DropdownMenu');
72950  const DropdownMenuSeparator = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuSeparator(props, ref) {
72951    const dropdownMenuContext = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuContext);
72952    return (0,external_React_.createElement)(styles_DropdownMenuSeparator, {
72953      ref: ref,
72954      ...props,
72955      store: dropdownMenuContext?.store,
72956      variant: dropdownMenuContext?.variant
72957    });
72958  });
72959  const DropdownMenuItemLabel = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemLabel(props, ref) {
72960    return (0,external_React_.createElement)(styles_DropdownMenuItemLabel, {
72961      numberOfLines: 1,
72962      ref: ref,
72963      ...props
72964    });
72965  });
72966  const DropdownMenuItemHelpText = (0,external_wp_element_namespaceObject.forwardRef)(function DropdownMenuItemHelpText(props, ref) {
72967    return (0,external_React_.createElement)(styles_DropdownMenuItemHelpText, {
72968      numberOfLines: 2,
72969      ref: ref,
72970      ...props
72971    });
72972  });
72973  
72974  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/styles.js
72975  
72976  function theme_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)."; }
72977  /**
72978   * External dependencies
72979   */
72980  
72981  
72982  
72983  /**
72984   * Internal dependencies
72985   */
72986  
72987  const colorVariables = ({
72988    colors
72989  }) => {
72990    const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-$k}: $v};`).join('');
72991    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)];
72992  };
72993  const theme_styles_Wrapper = emotion_styled_base_browser_esm("div",  true ? {
72994    target: "e1krjpvb0"
72995  } : 0)( true ? {
72996    name: "1a3idx0",
72997    styles: "color:var( --wp-components-color-foreground, currentColor )"
72998  } : 0);
72999  
73000  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/color-algorithms.js
73001  /**
73002   * External dependencies
73003   */
73004  
73005  
73006  
73007  
73008  /**
73009   * WordPress dependencies
73010   */
73011  
73012  
73013  /**
73014   * Internal dependencies
73015   */
73016  
73017  
73018  k([names, a11y]);
73019  function generateThemeVariables(inputs) {
73020    validateInputs(inputs);
73021    const generatedColors = {
73022      ...generateAccentDependentColors(inputs.accent),
73023      ...generateBackgroundDependentColors(inputs.background)
73024    };
73025    warnContrastIssues(checkContrasts(inputs, generatedColors));
73026    return {
73027      colors: generatedColors
73028    };
73029  }
73030  function validateInputs(inputs) {
73031    for (const [key, value] of Object.entries(inputs)) {
73032      if (typeof value !== 'undefined' && !w(value).isValid()) {
73033         true ? external_wp_warning_default()(`wp.components.Theme: "$value}" is not a valid color value for the '$key}' prop.`) : 0;
73034      }
73035    }
73036  }
73037  function checkContrasts(inputs, outputs) {
73038    const background = inputs.background || COLORS.white;
73039    const accent = inputs.accent || '#3858e9';
73040    const foreground = outputs.foreground || COLORS.gray[900];
73041    const gray = outputs.gray || COLORS.gray;
73042    return {
73043      accent: w(background).isReadable(accent) ? undefined : `The background color ("$background}") does not have sufficient contrast against the accent color ("$accent}").`,
73044      foreground: w(background).isReadable(foreground) ? undefined : `The background color provided ("$background}") does not have sufficient contrast against the standard foreground colors.`,
73045      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.`
73046    };
73047  }
73048  function warnContrastIssues(issues) {
73049    for (const error of Object.values(issues)) {
73050      if (error) {
73051         true ? external_wp_warning_default()('wp.components.Theme: ' + error) : 0;
73052      }
73053    }
73054  }
73055  function generateAccentDependentColors(accent) {
73056    if (!accent) return {};
73057    return {
73058      accent,
73059      accentDarker10: w(accent).darken(0.1).toHex(),
73060      accentDarker20: w(accent).darken(0.2).toHex(),
73061      accentInverted: getForegroundForColor(accent)
73062    };
73063  }
73064  function generateBackgroundDependentColors(background) {
73065    if (!background) return {};
73066    const foreground = getForegroundForColor(background);
73067    return {
73068      background,
73069      foreground,
73070      foregroundInverted: getForegroundForColor(foreground),
73071      gray: generateShades(background, foreground)
73072    };
73073  }
73074  function getForegroundForColor(color) {
73075    return w(color).isDark() ? COLORS.white : COLORS.gray[900];
73076  }
73077  function generateShades(background, foreground) {
73078    // How much darkness you need to add to #fff to get the COLORS.gray[n] color
73079    const SHADES = {
73080      100: 0.06,
73081      200: 0.121,
73082      300: 0.132,
73083      400: 0.2,
73084      600: 0.42,
73085      700: 0.543,
73086      800: 0.821
73087    };
73088  
73089    // Darkness of COLORS.gray[ 900 ], relative to #fff
73090    const limit = 0.884;
73091    const direction = w(background).isDark() ? 'lighten' : 'darken';
73092  
73093    // Lightness delta between the background and foreground colors
73094    const range = Math.abs(w(background).toHsl().l - w(foreground).toHsl().l) / 100;
73095    const result = {};
73096    Object.entries(SHADES).forEach(([key, value]) => {
73097      result[parseInt(key)] = w(background)[direction](value / limit * range).toHex();
73098    });
73099    return result;
73100  }
73101  
73102  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/theme/index.js
73103  
73104  /**
73105   * WordPress dependencies
73106   */
73107  
73108  
73109  /**
73110   * Internal dependencies
73111   */
73112  
73113  
73114  
73115  
73116  
73117  /**
73118   * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
73119   *
73120   * Multiple `Theme` components can be nested in order to override specific theme variables.
73121   *
73122   *
73123   * ```jsx
73124   * const Example = () => {
73125   *   return (
73126   *     <Theme accent="red">
73127   *       <Button variant="primary">I'm red</Button>
73128   *       <Theme accent="blue">
73129   *         <Button variant="primary">I'm blue</Button>
73130   *       </Theme>
73131   *     </Theme>
73132   *   );
73133   * };
73134   * ```
73135   */
73136  function Theme({
73137    accent,
73138    background,
73139    className,
73140    ...props
73141  }) {
73142    const cx = useCx();
73143    const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(...colorVariables(generateThemeVariables({
73144      accent,
73145      background
73146    })), className), [accent, background, className, cx]);
73147    return (0,external_React_.createElement)(theme_styles_Wrapper, {
73148      className: classes,
73149      ...props
73150    });
73151  }
73152  /* harmony default export */ const theme = (Theme);
73153  
73154  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/context.js
73155  /**
73156   * WordPress dependencies
73157   */
73158  
73159  
73160  /**
73161   * Internal dependencies
73162   */
73163  
73164  const TabsContext = (0,external_wp_element_namespaceObject.createContext)(undefined);
73165  const useTabsContext = () => (0,external_wp_element_namespaceObject.useContext)(TabsContext);
73166  
73167  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/styles.js
73168  
73169  function tabs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
73170  /**
73171   * External dependencies
73172   */
73173  
73174  // eslint-disable-next-line no-restricted-imports
73175  
73176  
73177  /**
73178   * Internal dependencies
73179   */
73180  
73181  
73182  
73183  const TabListWrapper = emotion_styled_base_browser_esm("div",  true ? {
73184    target: "enfox0g2"
73185  } : 0)( true ? {
73186    name: "xbm4q1",
73187    styles: "display:flex;align-items:stretch;flex-direction:row;&[aria-orientation='vertical']{flex-direction:column;}"
73188  } : 0);
73189  const styles_Tab = /*#__PURE__*/emotion_styled_base_browser_esm(Tab,  true ? {
73190    target: "enfox0g1"
73191  } : 0)("&{display:inline-flex;align-items:center;position:relative;border-radius:0;height:", space(12), ";background:transparent;border:none;box-shadow:none;cursor:pointer;padding:3px ", space(4), ";margin-left:0;font-weight:500;&[aria-disabled='true']{cursor:default;opacity:0.3;}&:hover{color:", COLORS.theme.accent, ";}&:focus:not( :disabled ){position:relative;box-shadow:none;outline:none;}&::after{content:'';position:absolute;right:0;bottom:0;left:0;pointer-events:none;background:", COLORS.theme.accent, ";height:calc( 0 * var( --wp-admin-border-width-focus ) );border-radius:0;transition:all 0.1s linear;", reduceMotion('transition'), ";}&[aria-selected='true']::after{height:calc( 1 * var( --wp-admin-border-width-focus ) );outline:2px solid transparent;outline-offset:-1px;}&::before{content:'';position:absolute;top:", space(3), ";right:", space(3), ";bottom:", space(3), ";left:", space(3), ";pointer-events:none;box-shadow:0 0 0 0 transparent;border-radius:2px;transition:all 0.1s linear;", reduceMotion('transition'), ";}&:focus-visible::before{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;}}" + ( true ? "" : 0));
73192  const styles_TabPanel = /*#__PURE__*/emotion_styled_base_browser_esm(TabPanel,  true ? {
73193    target: "enfox0g0"
73194  } : 0)("&:focus{box-shadow:none;outline:none;}&:focus-visible{border-radius:2px;box-shadow:0 0 0 var( --wp-admin-border-width-focus ) ", COLORS.theme.accent, ";outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0));
73195  
73196  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tab.js
73197  
73198  /**
73199   * WordPress dependencies
73200   */
73201  
73202  
73203  
73204  /**
73205   * Internal dependencies
73206   */
73207  
73208  
73209  
73210  
73211  const tab_Tab = (0,external_wp_element_namespaceObject.forwardRef)(function Tab({
73212    children,
73213    tabId,
73214    disabled,
73215    render,
73216    ...otherProps
73217  }, ref) {
73218    const context = useTabsContext();
73219    if (!context) {
73220       true ? external_wp_warning_default()('`Tabs.Tab` must be wrapped in a `Tabs` component.') : 0;
73221      return null;
73222    }
73223    const {
73224      store,
73225      instanceId
73226    } = context;
73227    const instancedTabId = `$instanceId}-$tabId}`;
73228    return (0,external_React_.createElement)(styles_Tab, {
73229      ref: ref,
73230      store: store,
73231      id: instancedTabId,
73232      disabled: disabled,
73233      render: render,
73234      ...otherProps
73235    }, children);
73236  });
73237  
73238  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tablist.js
73239  
73240  /**
73241   * External dependencies
73242   */
73243  // eslint-disable-next-line no-restricted-imports
73244  
73245  
73246  /**
73247   * WordPress dependencies
73248   */
73249  
73250  
73251  
73252  /**
73253   * Internal dependencies
73254   */
73255  
73256  
73257  
73258  const TabList = (0,external_wp_element_namespaceObject.forwardRef)(function TabList({
73259    children,
73260    ...otherProps
73261  }, ref) {
73262    const context = useTabsContext();
73263    if (!context) {
73264       true ? external_wp_warning_default()('`Tabs.TabList` must be wrapped in a `Tabs` component.') : 0;
73265      return null;
73266    }
73267    const {
73268      store
73269    } = context;
73270    const {
73271      selectedId,
73272      activeId,
73273      selectOnMove
73274    } = store.useState();
73275    const {
73276      setActiveId
73277    } = store;
73278    const onBlur = () => {
73279      if (!selectOnMove) {
73280        return;
73281      }
73282  
73283      // When automatic tab selection is on, make sure that the active tab is up
73284      // to date with the selected tab when leaving the tablist. This makes sure
73285      // that the selected tab will receive keyboard focus when tabbing back into
73286      // the tablist.
73287      if (selectedId !== activeId) {
73288        setActiveId(selectedId);
73289      }
73290    };
73291    return (0,external_React_.createElement)(tab_list_TabList, {
73292      ref: ref,
73293      store: store,
73294      render: (0,external_React_.createElement)(TabListWrapper, null),
73295      onBlur: onBlur,
73296      ...otherProps
73297    }, children);
73298  });
73299  
73300  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/tabpanel.js
73301  
73302  /**
73303   * WordPress dependencies
73304   */
73305  
73306  
73307  
73308  /**
73309   * Internal dependencies
73310   */
73311  
73312  
73313  
73314  
73315  const tabpanel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(function TabPanel({
73316    children,
73317    tabId,
73318    focusable = true,
73319    ...otherProps
73320  }, ref) {
73321    const context = useTabsContext();
73322    if (!context) {
73323       true ? external_wp_warning_default()('`Tabs.TabPanel` must be wrapped in a `Tabs` component.') : 0;
73324      return null;
73325    }
73326    const {
73327      store,
73328      instanceId
73329    } = context;
73330    const instancedTabId = `$instanceId}-$tabId}`;
73331    const selectedId = store.useState(state => state.selectedId);
73332    return (0,external_React_.createElement)(styles_TabPanel, {
73333      ref: ref,
73334      store: store
73335      // For TabPanel, the id passed here is the id attribute of the DOM
73336      // element.
73337      // `tabId` is the id of the tab that controls this panel.
73338      ,
73339      id: `$instancedTabId}-view`,
73340      tabId: instancedTabId,
73341      focusable: focusable,
73342      ...otherProps
73343    }, selectedId === instancedTabId && children);
73344  });
73345  
73346  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tabs/index.js
73347  
73348  /**
73349   * External dependencies
73350   */
73351  // eslint-disable-next-line no-restricted-imports
73352  
73353  
73354  /**
73355   * WordPress dependencies
73356   */
73357  
73358  
73359  
73360  /**
73361   * Internal dependencies
73362   */
73363  
73364  
73365  
73366  
73367  
73368  function Tabs({
73369    selectOnMove = true,
73370    initialTabId,
73371    orientation = 'horizontal',
73372    onSelect,
73373    children,
73374    selectedTabId
73375  }) {
73376    const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Tabs, 'tabs');
73377    const store = useTabStore({
73378      selectOnMove,
73379      orientation,
73380      defaultSelectedId: initialTabId && `$instanceId}-$initialTabId}`,
73381      setSelectedId: selectedId => {
73382        const strippedDownId = typeof selectedId === 'string' ? selectedId.replace(`$instanceId}-`, '') : selectedId;
73383        onSelect?.(strippedDownId);
73384      },
73385      selectedId: selectedTabId && `$instanceId}-$selectedTabId}`
73386    });
73387    const isControlled = selectedTabId !== undefined;
73388    const {
73389      items,
73390      selectedId,
73391      activeId
73392    } = store.useState();
73393    const {
73394      setSelectedId,
73395      setActiveId
73396    } = store;
73397  
73398    // Keep track of whether tabs have been populated. This is used to prevent
73399    // certain effects from firing too early while tab data and relevant
73400    // variables are undefined during the initial render.
73401    const tabsHavePopulated = (0,external_wp_element_namespaceObject.useRef)(false);
73402    if (items.length > 0) {
73403      tabsHavePopulated.current = true;
73404    }
73405    const selectedTab = items.find(item => item.id === selectedId);
73406    const firstEnabledTab = items.find(item => {
73407      // Ariakit internally refers to disabled tabs as `dimmed`.
73408      return !item.dimmed;
73409    });
73410    const initialTab = items.find(item => item.id === `$instanceId}-$initialTabId}`);
73411  
73412    // Handle selecting the initial tab.
73413    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
73414      if (isControlled) {
73415        return;
73416      }
73417  
73418      // Wait for the denoted initial tab to be declared before making a
73419      // selection. This ensures that if a tab is declared lazily it can
73420      // still receive initial selection, as well as ensuring no tab is
73421      // selected if an invalid `initialTabId` is provided.
73422      if (initialTabId && !initialTab) {
73423        return;
73424      }
73425  
73426      // If the currently selected tab is missing (i.e. removed from the DOM),
73427      // fall back to the initial tab or the first enabled tab if there is
73428      // one. Otherwise, no tab should be selected.
73429      if (!items.find(item => item.id === selectedId)) {
73430        if (initialTab && !initialTab.dimmed) {
73431          setSelectedId(initialTab?.id);
73432          return;
73433        }
73434        if (firstEnabledTab) {
73435          setSelectedId(firstEnabledTab.id);
73436        } else if (tabsHavePopulated.current) {
73437          setSelectedId(null);
73438        }
73439      }
73440    }, [firstEnabledTab, initialTab, initialTabId, isControlled, items, selectedId, setSelectedId]);
73441  
73442    // Handle the currently selected tab becoming disabled.
73443    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
73444      if (!selectedTab?.dimmed) {
73445        return;
73446      }
73447  
73448      // In controlled mode, we trust that disabling tabs is done
73449      // intentionally, and don't select a new tab automatically.
73450      if (isControlled) {
73451        setSelectedId(null);
73452        return;
73453      }
73454  
73455      // If the currently selected tab becomes disabled, fall back to the
73456      // `initialTabId` if possible. Otherwise select the first
73457      // enabled tab (if there is one).
73458      if (initialTab && !initialTab.dimmed) {
73459        setSelectedId(initialTab.id);
73460        return;
73461      }
73462      if (firstEnabledTab) {
73463        setSelectedId(firstEnabledTab.id);
73464      }
73465    }, [firstEnabledTab, initialTab, isControlled, selectedTab?.dimmed, setSelectedId]);
73466  
73467    // Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
73468    (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
73469      if (!isControlled) {
73470        return;
73471      }
73472  
73473      // Once the tabs have populated, if the `selectedTabId` still can't be
73474      // found, clear the selection.
73475      if (tabsHavePopulated.current && !!selectedTabId && !selectedTab) {
73476        setSelectedId(null);
73477      }
73478    }, [isControlled, selectedTab, selectedTabId, setSelectedId]);
73479    (0,external_wp_element_namespaceObject.useEffect)(() => {
73480      if (!isControlled) {
73481        return;
73482      }
73483      requestAnimationFrame(() => {
73484        const focusedElement = items?.[0]?.element?.ownerDocument.activeElement;
73485        if (!focusedElement || !items.some(item => focusedElement === item.element)) {
73486          return; // Return early if no tabs are focused.
73487        }
73488  
73489        // If, after ariakit re-computes the active tab, that tab doesn't match
73490        // the currently focused tab, then we force an update to ariakit to avoid
73491        // any mismatches, especially when navigating to previous/next tab with
73492        // arrow keys.
73493        if (activeId !== focusedElement.id) {
73494          setActiveId(focusedElement.id);
73495        }
73496      });
73497    }, [activeId, isControlled, items, setActiveId]);
73498    const contextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({
73499      store,
73500      instanceId
73501    }), [store, instanceId]);
73502    return (0,external_React_.createElement)(TabsContext.Provider, {
73503      value: contextValue
73504    }, children);
73505  }
73506  Tabs.TabList = TabList;
73507  Tabs.Tab = tab_Tab;
73508  Tabs.TabPanel = tabpanel_TabPanel;
73509  Tabs.Context = TabsContext;
73510  /* harmony default export */ const tabs = (Tabs);
73511  
73512  ;// CONCATENATED MODULE: external ["wp","privateApis"]
73513  const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"];
73514  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/lock-unlock.js
73515  /**
73516   * WordPress dependencies
73517   */
73518  
73519  const {
73520    lock,
73521    unlock
73522  } = (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');
73523  
73524  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/private-apis.js
73525  /**
73526   * WordPress dependencies
73527   */
73528  
73529  /**
73530   * Internal dependencies
73531   */
73532  
73533  
73534  
73535  
73536  
73537  
73538  
73539  
73540  
73541  
73542  
73543  const privateApis = {};
73544  lock(privateApis, {
73545    CompositeV2: Composite,
73546    CompositeGroupV2: CompositeGroup,
73547    CompositeItemV2: CompositeItem,
73548    CompositeRowV2: CompositeRow,
73549    useCompositeStoreV2: useCompositeStore,
73550    CustomSelectControl: CustomSelectControl,
73551    __experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
73552    createPrivateSlotFill: createPrivateSlotFill,
73553    ComponentsContext: ComponentsContext,
73554    ProgressBar: progress_bar,
73555    Tabs: tabs,
73556    Theme: theme,
73557    DropdownMenuV2: dropdown_menu_v2_DropdownMenu,
73558    DropdownMenuGroupV2: DropdownMenuGroup,
73559    DropdownMenuItemV2: DropdownMenuItem,
73560    DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
73561    DropdownMenuRadioItemV2: DropdownMenuRadioItem,
73562    DropdownMenuSeparatorV2: DropdownMenuSeparator,
73563    DropdownMenuItemLabelV2: DropdownMenuItemLabel,
73564    DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
73565    kebabCase: kebabCase
73566  });
73567  
73568  ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/index.js
73569  // Primitives.
73570  
73571  
73572  // Components.
73573  
73574  
73575  
73576  
73577  
73578  
73579  
73580  
73581  
73582  
73583  
73584  
73585  
73586  
73587  
73588  
73589  
73590  
73591  
73592  
73593  
73594  
73595  
73596  
73597  
73598  
73599  
73600  
73601  
73602  
73603  
73604  
73605  
73606  
73607  
73608  
73609  
73610  
73611  
73612  
73613  
73614  
73615  
73616  
73617  
73618  
73619  
73620  
73621  
73622  
73623  
73624  
73625  
73626  
73627  
73628  
73629  
73630  
73631  
73632  
73633  
73634  
73635  
73636  
73637  
73638  
73639  
73640  
73641  
73642  
73643  
73644  
73645  
73646  
73647  
73648  
73649  
73650  
73651  
73652  
73653  
73654  
73655  
73656  
73657  
73658  
73659  
73660  
73661  
73662  
73663  
73664  
73665  
73666  
73667  
73668  
73669  
73670  
73671  
73672  
73673  
73674  
73675  
73676  
73677  
73678  
73679  
73680  
73681  
73682  
73683  
73684  
73685  
73686  
73687  
73688  
73689  
73690  
73691  // Higher-Order Components.
73692  
73693  
73694  
73695  
73696  
73697  
73698  
73699  
73700  
73701  // Private APIs.
73702  
73703  
73704  })();
73705  
73706  (window.wp = window.wp || {}).components = __webpack_exports__;
73707  /******/ })()
73708  ;


Generated : Thu Mar 28 08:20:01 2024 Cross-referenced by PHPXref