@eclass/ui-kit 1.51.2 → 1.51.4

package/dist/eclass-ui-kit.es.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { forwardRef as forwardRef$1, useContext, createContext as createContext$1, createElement, useRef, useLayoutEffect, useState, useMemo, Fragment as Fragment$1, useEffect, useCallback, cloneElement, Children, isValidElement, PureComponent } from "react";
+import React__default, { forwardRef as forwardRef$1, useContext, createContext as createContext$1, createElement, useRef, useLayoutEffect, useState, useEffect, useMemo, Fragment as Fragment$1, useCallback, cloneElement, Children, isValidElement as isValidElement$1, PureComponent } from "react";
 var isDevelopment$1 = false;
 function sheetForTag(tag2) {
   if (tag2.sheet) {
@@ -729,15 +729,15 @@ var createCache = function createCache2(options) {
   cache.sheet.hydrate(nodesToHydrate);
   return cache;
 };
-function _extends$h() {
-  return _extends$h = Object.assign ? Object.assign.bind() : function(n2) {
+function _extends$k() {
+  return _extends$k = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
       var t2 = arguments[e2];
       for (var r2 in t2)
         ({}).hasOwnProperty.call(t2, r2) && (n2[r2] = t2[r2]);
     }
     return n2;
-  }, _extends$h.apply(null, arguments);
+  }, _extends$k.apply(null, arguments);
 }
 var weakMemoize = function weakMemoize2(func) {
   var cache = /* @__PURE__ */ new WeakMap();
@@ -1161,7 +1161,7 @@ var getTheme = function getTheme2(outerTheme, theme2) {
     var mergedTheme = theme2(outerTheme);
     return mergedTheme;
   }
-  return _extends$h({}, outerTheme, theme2);
+  return _extends$k({}, outerTheme, theme2);
 };
 var createCacheWithTheme = /* @__PURE__ */ weakMemoize(function(outerTheme) {
   return weakMemoize(function(theme2) {
@@ -2203,6 +2203,34 @@ function getLastItem(array) {
   var length2 = array == null ? 0 : array.length;
   return length2 ? array[length2 - 1] : void 0;
 }
+function getNextItemFromSearch(items, searchString, itemToString, currentItem) {
+  if (searchString == null) {
+    return currentItem;
+  }
+  if (!currentItem) {
+    var foundItem = items.find(function(item) {
+      return itemToString(item).toLowerCase().startsWith(searchString.toLowerCase());
+    });
+    return foundItem;
+  }
+  var matchingItems = items.filter(function(item) {
+    return itemToString(item).toLowerCase().startsWith(searchString.toLowerCase());
+  });
+  if (matchingItems.length > 0) {
+    var nextIndex;
+    if (matchingItems.includes(currentItem)) {
+      var currentIndex = matchingItems.indexOf(currentItem);
+      nextIndex = currentIndex + 1;
+      if (nextIndex === matchingItems.length) {
+        nextIndex = 0;
+      }
+      return matchingItems[nextIndex];
+    }
+    nextIndex = items.indexOf(matchingItems[0]);
+    return items[nextIndex];
+  }
+  return currentItem;
+}
 function isNumber(value) {
   return typeof value === "number";
 }
@@ -2416,20 +2444,24 @@ function analyzeBreakpoints(breakpoints2) {
     }
   };
 }
-function isElement$1(el) {
+function isElement$2(el) {
   return el != null && typeof el == "object" && "nodeType" in el && el.nodeType === Node.ELEMENT_NODE;
 }
 function isHTMLElement$1(el) {
   var _el$ownerDocument$def;
-  if (!isElement$1(el)) {
+  if (!isElement$2(el)) {
     return false;
   }
   var win2 = (_el$ownerDocument$def = el.ownerDocument.defaultView) != null ? _el$ownerDocument$def : window;
   return el instanceof win2.HTMLElement;
 }
+function getOwnerWindow(node2) {
+  var _getOwnerDocument$def, _getOwnerDocument;
+  return isElement$2(node2) ? (_getOwnerDocument$def = (_getOwnerDocument = getOwnerDocument(node2)) == null ? void 0 : _getOwnerDocument.defaultView) != null ? _getOwnerDocument$def : window : window;
+}
 function getOwnerDocument(node2) {
   var _node$ownerDocument;
-  return isElement$1(node2) ? (_node$ownerDocument = node2.ownerDocument) != null ? _node$ownerDocument : document : document;
+  return isElement$2(node2) ? (_node$ownerDocument = node2.ownerDocument) != null ? _node$ownerDocument : document : document;
 }
 function canUseDOM() {
   return !!(typeof window !== "undefined" && window.document && window.document.createElement);
@@ -2444,9 +2476,30 @@ var cx = function cx2() {
   }
   return classNames2.filter(Boolean).join(" ");
 };
+function getActiveElement(node2) {
+  var doc2 = getOwnerDocument(node2);
+  return doc2 == null ? void 0 : doc2.activeElement;
+}
+function contains$1(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || parent.contains(child);
+}
+function normalizeEventKey(event) {
+  var key = event.key, keyCode = event.keyCode;
+  var isArrowKey = keyCode >= 37 && keyCode <= 40 && key.indexOf("Arrow") !== 0;
+  var eventKey = isArrowKey ? "Arrow" + key : key;
+  return eventKey;
+}
+function isRightClick(event) {
+  return event.button !== 0;
+}
 var hasTabIndex = function hasTabIndex2(element) {
   return element.hasAttribute("tabindex");
 };
+var hasNegativeTabIndex = function hasNegativeTabIndex2(element) {
+  return hasTabIndex(element) && element.tabIndex === -1;
+};
 function isDisabled(element) {
   return Boolean(element.getAttribute("disabled")) === true || Boolean(element.getAttribute("aria-disabled")) === true;
 }
@@ -2492,6 +2545,11 @@ function isFocusable(element) {
     return true;
   return hasTabIndex(element);
 }
+function isTabbable(element) {
+  if (!element)
+    return false;
+  return isHTMLElement$1(element) && isFocusable(element) && !hasNegativeTabIndex(element);
+}
 var focusableElList = ["input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", "embed", "iframe", "object", "a[href]", "area[href]", "button:not([disabled])", "[tabindex]", "audio[controls]", "video[controls]", "*[tabindex]:not([aria-disabled])", "*[contenteditable]"];
 var focusableElSelector = focusableElList.join();
 function getAllFocusable(container2) {
@@ -2559,6 +2617,16 @@ function callAllHandlers() {
     });
   };
 }
+function callAll() {
+  for (var _len3 = arguments.length, fns = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    fns[_key3] = arguments[_key3];
+  }
+  return function mergedFn(arg) {
+    fns.forEach(function(fn6) {
+      fn6 == null ? void 0 : fn6(arg);
+    });
+  };
+}
 function once(fn6) {
   var result;
   return function func() {
@@ -2698,6 +2766,16 @@ function flatten(target, maxDepth) {
     return result;
   }, {});
 }
+function determineLazyBehavior(options) {
+  var hasBeenSelected = options.hasBeenSelected, isLazy = options.isLazy, isSelected = options.isSelected, _options$lazyBehavior = options.lazyBehavior, lazyBehavior = _options$lazyBehavior === void 0 ? "unmount" : _options$lazyBehavior;
+  if (!isLazy)
+    return true;
+  if (isSelected)
+    return true;
+  if (lazyBehavior === "keepMounted" && hasBeenSelected)
+    return true;
+  return false;
+}
 function valueToPercent(value, min2, max2) {
   return (value - min2) * 100 / (max2 - min2);
 }
@@ -2769,13 +2847,13 @@ function getValidChildren(children) {
     return /* @__PURE__ */ React.isValidElement(child);
   });
 }
-var useSafeLayoutEffect$1 = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
+var useSafeLayoutEffect$2 = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
 function useCallbackRef$1(fn6, deps) {
   if (deps === void 0) {
     deps = [];
   }
   var ref = React.useRef(fn6);
-  useSafeLayoutEffect$1(function() {
+  useSafeLayoutEffect$2(function() {
     ref.current = fn6;
   });
   return React.useCallback(function() {
@@ -2804,13 +2882,41 @@ function useEventListener(event, handler, env, options) {
     node2.removeEventListener(event, listener, options);
   };
 }
+function useAnimationState(props) {
+  var isOpen = props.isOpen, ref = props.ref;
+  var _useState = useState(isOpen), mounted = _useState[0], setMounted = _useState[1];
+  var _useState2 = useState(false), once2 = _useState2[0], setOnce = _useState2[1];
+  useEffect(function() {
+    if (!once2) {
+      setMounted(isOpen);
+      setOnce(true);
+    }
+  }, [isOpen, once2, mounted]);
+  useEventListener("animationend", function() {
+    setMounted(isOpen);
+  }, function() {
+    return ref.current;
+  });
+  var hidden = isOpen ? false : !mounted;
+  return {
+    present: !hidden,
+    onComplete: function onComplete() {
+      var _ref$current;
+      var win2 = getOwnerWindow(ref.current);
+      var evt = new win2.CustomEvent("animationend", {
+        bubbles: true
+      });
+      (_ref$current = ref.current) == null ? void 0 : _ref$current.dispatchEvent(evt);
+    }
+  };
+}
 function useControllableProp(prop2, state2) {
   var isControlled = prop2 !== void 0;
   var value = isControlled && typeof prop2 !== "undefined" ? prop2 : state2;
   return [isControlled, value];
 }
-function _extends$g() {
-  _extends$g = Object.assign || function(target) {
+function _extends$j() {
+  _extends$j = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -2821,7 +2927,7 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 var defaultIdContext = {
   current: 1
@@ -2895,7 +3001,7 @@ function useDisclosure(props) {
       if (props2 === void 0) {
         props2 = {};
       }
-      return _extends$g({}, props2, {
+      return _extends$j({}, props2, {
         "aria-expanded": "true",
         "aria-controls": id2,
         onClick: callAllHandlers(props2.onClick, onToggle)
@@ -2905,13 +3011,54 @@ function useDisclosure(props) {
       if (props2 === void 0) {
         props2 = {};
       }
-      return _extends$g({}, props2, {
+      return _extends$j({}, props2, {
         hidden: !isOpen,
         id: id2
       });
     }
   };
 }
+var useUpdateEffect = function useUpdateEffect2(effect5, deps) {
+  var mounted = React.useRef(false);
+  React.useEffect(function() {
+    if (mounted.current) {
+      return effect5();
+    }
+    mounted.current = true;
+    return void 0;
+  }, deps);
+  return mounted.current;
+};
+function preventReturnFocus(containerRef) {
+  var el = containerRef.current;
+  if (!el)
+    return false;
+  var activeElement = getActiveElement(el);
+  if (!activeElement)
+    return false;
+  if (contains$1(el, activeElement))
+    return false;
+  if (isTabbable(activeElement))
+    return true;
+  return false;
+}
+function useFocusOnHide(containerRef, options) {
+  var shouldFocusProp = options.shouldFocus, visible = options.visible, focusRef = options.focusRef;
+  var shouldFocus = shouldFocusProp && !visible;
+  useUpdateEffect(function() {
+    if (!shouldFocus)
+      return;
+    if (preventReturnFocus(containerRef)) {
+      return;
+    }
+    var el = (focusRef == null ? void 0 : focusRef.current) || containerRef.current;
+    if (el) {
+      focus(el, {
+        nextTick: true
+      });
+    }
+  }, [shouldFocus, containerRef, focusRef]);
+}
 function useUnmountEffect$1(fn6, deps) {
   if (deps === void 0) {
     deps = [];
@@ -2968,6 +3115,115 @@ function useMergeRefs$1() {
     };
   }, refs);
 }
+function useOutsideClick(props) {
+  var ref = props.ref, handler = props.handler, _props$enabled = props.enabled, enabled = _props$enabled === void 0 ? true : _props$enabled;
+  var savedHandler = useCallbackRef$1(handler);
+  var stateRef = useRef({
+    isPointerDown: false,
+    ignoreEmulatedMouseEvents: false
+  });
+  var state2 = stateRef.current;
+  useEffect(function() {
+    if (!enabled)
+      return;
+    var onPointerDown = function onPointerDown2(e2) {
+      if (isValidEvent(e2, ref)) {
+        state2.isPointerDown = true;
+      }
+    };
+    var onMouseUp = function onMouseUp2(event) {
+      if (state2.ignoreEmulatedMouseEvents) {
+        state2.ignoreEmulatedMouseEvents = false;
+        return;
+      }
+      if (state2.isPointerDown && handler && isValidEvent(event, ref)) {
+        state2.isPointerDown = false;
+        savedHandler(event);
+      }
+    };
+    var onTouchEnd = function onTouchEnd2(event) {
+      state2.ignoreEmulatedMouseEvents = true;
+      if (handler && state2.isPointerDown && isValidEvent(event, ref)) {
+        state2.isPointerDown = false;
+        savedHandler(event);
+      }
+    };
+    var doc2 = getOwnerDocument(ref.current);
+    doc2.addEventListener("mousedown", onPointerDown, true);
+    doc2.addEventListener("mouseup", onMouseUp, true);
+    doc2.addEventListener("touchstart", onPointerDown, true);
+    doc2.addEventListener("touchend", onTouchEnd, true);
+    return function() {
+      doc2.removeEventListener("mousedown", onPointerDown, true);
+      doc2.removeEventListener("mouseup", onMouseUp, true);
+      doc2.removeEventListener("touchstart", onPointerDown, true);
+      doc2.removeEventListener("touchend", onTouchEnd, true);
+    };
+  }, [handler, ref, savedHandler, state2, enabled]);
+}
+function isValidEvent(event, ref) {
+  var _ref$current;
+  var target = event.target;
+  if (event.button > 0)
+    return false;
+  if (target) {
+    var doc2 = getOwnerDocument(target);
+    if (!doc2.body.contains(target))
+      return false;
+  }
+  return !((_ref$current = ref.current) != null && _ref$current.contains(target));
+}
+function isPrintableCharacter(event) {
+  var key = event.key;
+  return key.length === 1 || key.length > 1 && /[^a-zA-Z0-9]/.test(key);
+}
+function useShortcut(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  var _props = props, _props$timeout = _props.timeout, timeout = _props$timeout === void 0 ? 300 : _props$timeout, _props$preventDefault = _props.preventDefault, preventDefault = _props$preventDefault === void 0 ? function() {
+    return true;
+  } : _props$preventDefault;
+  var _React$useState = React.useState([]), keys2 = _React$useState[0], setKeys = _React$useState[1];
+  var timeoutRef = React.useRef();
+  var flush = function flush2() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  var clearKeysAfterDelay = function clearKeysAfterDelay2() {
+    flush();
+    timeoutRef.current = setTimeout(function() {
+      setKeys([]);
+      timeoutRef.current = null;
+    }, timeout);
+  };
+  React.useEffect(function() {
+    return flush;
+  }, []);
+  function onKeyDown(fn6) {
+    return function(event) {
+      if (event.key === "Backspace") {
+        var keysCopy = [].concat(keys2);
+        keysCopy.pop();
+        setKeys(keysCopy);
+        return;
+      }
+      if (isPrintableCharacter(event)) {
+        var _keysCopy = keys2.concat(event.key);
+        if (preventDefault(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        setKeys(_keysCopy);
+        fn6(_keysCopy.join(""));
+        clearKeysAfterDelay();
+      }
+    };
+  }
+  return onKeyDown;
+}
 var reactDom = { exports: {} };
 var reactDom_production_min = {};
 /*
@@ -9526,8 +9782,8 @@ function PortalManager(props) {
     }
   }, children);
 }
-function _extends$f() {
-  _extends$f = Object.assign || function(target) {
+function _extends$i() {
+  _extends$i = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -9538,9 +9794,9 @@ function _extends$f() {
     }
     return target;
   };
-  return _extends$f.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$e(source, excluded) {
+function _objectWithoutPropertiesLoose$g(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -9555,10 +9811,10 @@ function _objectWithoutPropertiesLoose$e(source, excluded) {
   return target;
 }
 var _excluded$g = ["containerRef"];
-var _createContext$5 = createContext({
+var _createContext$7 = createContext({
   strict: false,
   name: "PortalContext"
-}), PortalContextProvider = _createContext$5[0], usePortalContext = _createContext$5[1];
+}), PortalContextProvider = _createContext$7[0], usePortalContext = _createContext$7[1];
 var PORTAL_CLASSNAME = "chakra-portal";
 var PORTAL_SELECTOR = ".chakra-portal";
 var Container = function Container2(props) {
@@ -9580,7 +9836,7 @@ var DefaultPortal = function DefaultPortal2(props) {
   var forceUpdate = useForceUpdate$1();
   var parentPortal = usePortalContext();
   var manager2 = usePortalManager();
-  useSafeLayoutEffect$1(function() {
+  useSafeLayoutEffect$2(function() {
     if (!tempNode.current)
       return;
     var doc2 = tempNode.current.ownerDocument;
@@ -9618,10 +9874,10 @@ var ContainerPortal = function ContainerPortal2(props) {
     return node2;
   }, [containerEl]);
   var forceUpdate = useForceUpdate$1();
-  useSafeLayoutEffect$1(function() {
+  useSafeLayoutEffect$2(function() {
     forceUpdate();
   }, []);
-  useSafeLayoutEffect$1(function() {
+  useSafeLayoutEffect$2(function() {
     if (!portal || !host)
       return;
     host.appendChild(portal);
@@ -9637,8 +9893,8 @@ var ContainerPortal = function ContainerPortal2(props) {
   return null;
 };
 function Portal(props) {
-  var containerRef = props.containerRef, rest = _objectWithoutPropertiesLoose$e(props, _excluded$g);
-  return containerRef ? /* @__PURE__ */ React.createElement(ContainerPortal, _extends$f({
+  var containerRef = props.containerRef, rest = _objectWithoutPropertiesLoose$g(props, _excluded$g);
+  return containerRef ? /* @__PURE__ */ React.createElement(ContainerPortal, _extends$i({
     containerRef
   }, rest)) : /* @__PURE__ */ React.createElement(DefaultPortal, rest);
 }
@@ -9974,8 +10230,8 @@ function ColorModeProvider(props) {
     value: context
   }, children);
 }
-function _extends$e() {
-  _extends$e = Object.assign || function(target) {
+function _extends$h() {
+  _extends$h = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -9986,7 +10242,7 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 var tokenToCSSVar = function tokenToCSSVar2(scale2, value) {
   return function(theme2) {
@@ -10330,7 +10586,7 @@ var t$1 = {
     };
   },
   prop: function prop(property, scale2, transform10) {
-    return _extends$e({
+    return _extends$h({
       property,
       scale: scale2
     }, scale2 && {
@@ -11076,7 +11332,7 @@ var pseudoPropNames = objectKeys(pseudoSelectors);
 var systemProps = mergeWith({}, background, border, color$1, flexbox, layout, filter$1, ring2, interactivity, grid, others, position, effect$3, space$1, scroll, typography$2, textDecoration, transform8, list$1, transition$1);
 Object.assign({}, space$1, layout, flexbox, grid, position);
 var propNames = [].concat(objectKeys(systemProps), pseudoPropNames);
-var styleProps = _extends$e({}, systemProps, pseudoSelectors);
+var styleProps = _extends$h({}, systemProps, pseudoSelectors);
 var isStyleProp = function isStyleProp2(prop2) {
   return prop2 in styleProps;
 };
@@ -11396,7 +11652,7 @@ function createThemeVars(flatTokens, options) {
     cssMap
   };
 }
-function _objectWithoutPropertiesLoose$d(source, excluded) {
+function _objectWithoutPropertiesLoose$f(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11423,7 +11679,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
   rawTheme.__cssVars;
   rawTheme.__breakpoints;
-  var cleanTheme = _objectWithoutPropertiesLoose$d(rawTheme, _excluded$f);
+  var cleanTheme = _objectWithoutPropertiesLoose$f(rawTheme, _excluded$f);
   return cleanTheme;
 }
 function flattenTokens(_ref2) {
@@ -11471,7 +11727,7 @@ function toCSSVar(rawTheme) {
     "--chakra-space-y-reverse": "0"
   };
   Object.assign(theme2, {
-    __cssVars: _extends$e({}, defaultCssVars, cssVars2),
+    __cssVars: _extends$h({}, defaultCssVars, cssVars2),
     __cssMap: cssMap,
     __breakpoints: analyzeBreakpoints(theme2.breakpoints)
   });
@@ -11688,7 +11944,7 @@ var createStyled = function createStyled2(tag2, options) {
       }
     });
     Styled.withComponent = function(nextTag, nextOptions) {
-      return createStyled2(nextTag, _extends$h({}, options, nextOptions, {
+      return createStyled2(nextTag, _extends$k({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles2);
     };
@@ -11835,8 +12091,8 @@ var newStyled = createStyled.bind();
 tags.forEach(function(tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
-function _extends$d() {
-  _extends$d = Object.assign || function(target) {
+function _extends$g() {
+  _extends$g = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -11847,7 +12103,7 @@ function _extends$d() {
     }
     return target;
   };
-  return _extends$d.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 var ThemeProvider2 = function ThemeProvider3(props) {
   var cssVarsRoot = props.cssVarsRoot, theme2 = props.theme, children = props.children;
@@ -11877,10 +12133,10 @@ function useTheme() {
   }
   return theme2;
 }
-var _createContext$4 = createContext({
+var _createContext$6 = createContext({
   name: "StylesContext",
   errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` "
-}), StylesProvider$1 = _createContext$4[0], useStyles$1 = _createContext$4[1];
+}), StylesProvider$1 = _createContext$6[0], useStyles$1 = _createContext$6[1];
 var GlobalStyle = function GlobalStyle2() {
   var _useColorMode = useColorMode(), colorMode = _useColorMode.colorMode;
   return /* @__PURE__ */ React.createElement(Global, {
@@ -11903,11 +12159,11 @@ function omitThemingProps(props) {
 function useChakra() {
   var colorModeResult = useColorMode();
   var theme2 = useTheme();
-  return _extends$d({}, colorModeResult, {
+  return _extends$g({}, colorModeResult, {
     theme: theme2
   });
 }
-function _objectWithoutPropertiesLoose$c(source, excluded) {
+function _objectWithoutPropertiesLoose$e(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11926,12 +12182,12 @@ var validHTMLProps = /* @__PURE__ */ new Set(["htmlWidth", "htmlHeight", "htmlSi
 var shouldForwardProp = function shouldForwardProp2(prop2) {
   return validHTMLProps.has(prop2) || !allPropNames.has(prop2);
 };
-var _excluded$1$4 = ["theme", "css", "__css", "sx"], _excluded2$4 = ["baseStyle"];
+var _excluded$1$5 = ["theme", "css", "__css", "sx"], _excluded2$5 = ["baseStyle"];
 var toCSSObject = function toCSSObject2(_ref2) {
   var baseStyle22 = _ref2.baseStyle;
   return function(props) {
     props.theme;
-    var cssProp = props.css, __css = props.__css, sx = props.sx, rest = _objectWithoutPropertiesLoose$c(props, _excluded$1$4);
+    var cssProp = props.css, __css = props.__css, sx = props.sx, rest = _objectWithoutPropertiesLoose$e(props, _excluded$1$5);
     var styleProps2 = objectFilter(rest, function(_2, prop2) {
       return isStyleProp(prop2);
     });
@@ -11942,7 +12198,7 @@ var toCSSObject = function toCSSObject2(_ref2) {
   };
 };
 function styled(component, options) {
-  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$c(_ref2, _excluded2$4);
+  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$e(_ref2, _excluded2$5);
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
   }
@@ -11963,7 +12219,7 @@ function useStyleConfig(themeKey, props, opts) {
   if (opts === void 0) {
     opts = {};
   }
-  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$c(_props, _excluded$e);
+  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$e(_props, _excluded$e);
   var _useChakra = useChakra(), theme2 = _useChakra.theme, colorMode = _useChakra.colorMode;
   var themeStyleConfig = memoizedGet(theme2, "components." + themeKey);
   var styleConfig = styleConfigProp || themeStyleConfig;
@@ -12061,8 +12317,8 @@ var spacing = {
   80: "20rem",
   96: "24rem"
 };
-function _extends$c() {
-  _extends$c = Object.assign || function(target) {
+function _extends$f() {
+  _extends$f = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -12073,7 +12329,7 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 var largeSizes = {
   max: "max-content",
@@ -12100,7 +12356,7 @@ var container$1 = {
   lg: "1024px",
   xl: "1280px"
 };
-var sizes$l = _extends$c({}, spacing, largeSizes, {
+var sizes$l = _extends$f({}, spacing, largeSizes, {
   container: container$1
 });
 function bound01(n2, max2) {
@@ -13332,8 +13588,8 @@ function orient(options) {
     return {};
   return orientation === "vertical" ? vertical : horizontal;
 }
-function _extends$b() {
-  _extends$b = Object.assign || function(target) {
+function _extends$e() {
+  _extends$e = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -13344,14 +13600,14 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 var createBreakpoints = function createBreakpoints2(config2) {
   warn({
     condition: true,
     message: ["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon", "simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")
   });
-  return _extends$b({
+  return _extends$e({
     base: "0em"
   }, config2);
 };
@@ -13986,7 +14242,7 @@ var variantGhost = function variantGhost2(props) {
 var variantOutline$1 = function variantOutline2(props) {
   var c2 = props.colorScheme;
   var borderColor = mode("gray.200", "whiteAlpha.300")(props);
-  return _extends$c({
+  return _extends$f({
     border: "1px solid",
     borderColor: c2 === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -14331,7 +14587,7 @@ var baseStyleDialogContainer$1 = {
 };
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$c({}, isFullHeight && {
+  return _extends$f({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -14999,7 +15255,7 @@ function getSize(size2) {
   var _fontSize = (_sizeStyle$field$font = (_sizeStyle$field = sizeStyle.field) == null ? void 0 : _sizeStyle$field.fontSize) != null ? _sizeStyle$field$font : "md";
   var fontSize = typography$1.fontSizes[_fontSize.toString()];
   return {
-    field: _extends$c({}, sizeStyle.field, {
+    field: _extends$f({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -15030,7 +15286,7 @@ var numberInput = {
   defaultProps: defaultProps$b
 };
 var _Input$variants$unsty$1;
-var baseStyle$f = _extends$c({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$f({}, Input.baseStyle.field, {
   textAlign: "center"
 });
 var sizes$b = {
@@ -15138,7 +15394,7 @@ function filledStyle(props) {
   var bgColor = mode(c2 + ".500", c2 + ".200")(props);
   var gradient = "linear-gradient(\n    to right,\n    transparent 0%,\n    " + getColor(t2, bgColor) + " 50%,\n    transparent 100%\n  )";
   var addStripe = !isIndeterminate && hasStripe;
-  return _extends$c({}, addStripe && stripeStyle, isIndeterminate ? {
+  return _extends$f({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor
@@ -15156,7 +15412,7 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
   };
 };
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$c({
+  return _extends$f({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
@@ -15202,9 +15458,9 @@ var progress$1 = {
 };
 var baseStyleControl2 = function baseStyleControl3(props) {
   var _Checkbox$baseStyle = Checkbox.baseStyle(props), _Checkbox$baseStyle$c = _Checkbox$baseStyle.control, control = _Checkbox$baseStyle$c === void 0 ? {} : _Checkbox$baseStyle$c;
-  return _extends$c({}, control, {
+  return _extends$f({}, control, {
     borderRadius: "full",
-    _checked: _extends$c({}, control["_checked"], {
+    _checked: _extends$f({}, control["_checked"], {
       _before: {
         content: '""',
         display: "inline-block",
@@ -15264,7 +15520,7 @@ var radio = {
   defaultProps: defaultProps$8
 };
 var baseStyleField = function baseStyleField2(props) {
-  return _extends$c({}, Input.baseStyle.field, {
+  return _extends$f({}, Input.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -15385,7 +15641,7 @@ function thumbOrientation(props) {
 }
 var baseStyleContainer$1 = function baseStyleContainer2(props) {
   var orientation = props.orientation;
-  return _extends$c({
+  return _extends$f({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -15415,7 +15671,7 @@ var baseStyleTrack$1 = function baseStyleTrack2(props) {
   };
 };
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$c({
+  return _extends$f({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -15685,12 +15941,12 @@ var numericStyles = {
 var variantSimple = function variantSimple2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$c({
+    th: _extends$f({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$c({
+    td: _extends$f({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -15711,12 +15967,12 @@ var variantSimple = function variantSimple2(props) {
 var variantStripe = function variantStripe2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$c({
+    th: _extends$f({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$c({
+    td: _extends$f({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -16104,7 +16360,7 @@ var tag = {
   defaultProps: defaultProps$1
 };
 var _Input$variants$unsty, _Input$sizes$xs$field, _Input$sizes$sm$field, _Input$sizes$md$field, _Input$sizes$lg$field;
-var baseStyle$1 = _extends$c({}, Input.baseStyle.field, {
+var baseStyle$1 = _extends$f({}, Input.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -16505,7 +16761,7 @@ var blur2 = {
   "2xl": "40px",
   "3xl": "64px"
 };
-var foundations = _extends$c({
+var foundations = _extends$f({
   breakpoints,
   zIndices,
   radii: radii$1,
@@ -16555,15 +16811,15 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme$1 = _extends$c({
+var theme$1 = _extends$f({
   direction
 }, foundations, {
   components,
   styles: styles$1$1,
   config
 });
-function _extends$a() {
-  _extends$a = Object.assign || function(target) {
+function _extends$d() {
+  _extends$d = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -16574,9 +16830,9 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$b(source, excluded) {
+function _objectWithoutPropertiesLoose$d(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -16613,9 +16869,9 @@ var fallbackIcon = {
   viewBox: "0 0 24 24"
 };
 var Icon = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var element = props.as, viewBox = props.viewBox, _props$color = props.color, color2 = _props$color === void 0 ? "currentColor" : _props$color, _props$focusable = props.focusable, focusable = _props$focusable === void 0 ? false : _props$focusable, children = props.children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$b(props, _excluded$d);
+  var element = props.as, viewBox = props.viewBox, _props$color = props.color, color2 = _props$color === void 0 ? "currentColor" : _props$color, _props$focusable = props.focusable, focusable = _props$focusable === void 0 ? false : _props$focusable, children = props.children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$d(props, _excluded$d);
   var _className = cx("chakra-icon", className);
-  var styles2 = _extends$a({
+  var styles2 = _extends$d({
     w: "1em",
     h: "1em",
     display: "inline-block",
@@ -16631,12 +16887,12 @@ var Icon = /* @__PURE__ */ forwardRef(function(props, ref) {
   };
   var _viewBox = viewBox != null ? viewBox : fallbackIcon.viewBox;
   if (element && typeof element !== "string") {
-    return /* @__PURE__ */ React.createElement(chakra.svg, _extends$a({
+    return /* @__PURE__ */ React.createElement(chakra.svg, _extends$d({
       as: element
     }, shared, rest));
   }
   var _path = children != null ? children : fallbackIcon.path;
-  return /* @__PURE__ */ React.createElement(chakra.svg, _extends$a({
+  return /* @__PURE__ */ React.createElement(chakra.svg, _extends$d({
     verticalAlign: "middle",
     viewBox: _viewBox
   }, shared, rest), _path);
@@ -22816,7 +23072,7 @@ function updateChildLookup(children, allChildren) {
 function onlyElements(children) {
   var filtered = [];
   Children.forEach(children, function(child) {
-    if (isValidElement(child))
+    if (isValidElement$1(child))
       filtered.push(child);
   });
   return filtered;
@@ -22894,7 +23150,7 @@ var AnimatePresence = function(_a) {
     return cloneElement(child);
   }));
 };
-function _objectWithoutPropertiesLoose$a(source, excluded) {
+function _objectWithoutPropertiesLoose$c(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -22908,8 +23164,8 @@ function _objectWithoutPropertiesLoose$a(source, excluded) {
   }
   return target;
 }
-function _extends$9() {
-  _extends$9 = Object.assign || function(target) {
+function _extends$c() {
+  _extends$c = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -22920,7 +23176,7 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 var TransitionEasings = {
   ease: [0.25, 0.1, 0.25, 1],
@@ -23070,12 +23326,12 @@ var TransitionDefaults = {
 };
 var withDelay = {
   enter: function enter(transition2, delay) {
-    return _extends$9({}, transition2, {
+    return _extends$c({}, transition2, {
       delay: isNumber(delay) ? delay : delay == null ? void 0 : delay["enter"]
     });
   },
   exit: function exit(transition2, delay) {
-    return _extends$9({}, transition2, {
+    return _extends$c({}, transition2, {
       delay: isNumber(delay) ? delay : delay == null ? void 0 : delay["exit"]
     });
   }
@@ -23110,13 +23366,13 @@ var variants$2 = {
   exit: function exit3(_ref2) {
     var _transition$exit;
     var reverse = _ref2.reverse, initialScale = _ref2.initialScale, transition2 = _ref2.transition, transitionEnd = _ref2.transitionEnd, delay = _ref2.delay;
-    return _extends$9({
+    return _extends$c({
       opacity: 0
     }, reverse ? {
       scale: initialScale,
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     } : {
-      transitionEnd: _extends$9({
+      transitionEnd: _extends$c({
         scale: initialScale
       }, transitionEnd == null ? void 0 : transitionEnd.exit)
     }, {
@@ -23140,7 +23396,7 @@ var scaleFadeConfig = {
   exit: "exit",
   variants: variants$2
 };
-var _excluded$1$3 = ["direction", "style", "unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
+var _excluded$1$4 = ["direction", "style", "unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
 var defaultTransition = {
   exit: {
     duration: 0.15,
@@ -23159,7 +23415,7 @@ var variants$1 = {
     var _slideTransition = slideTransition({
       direction: direction2
     }), exitStyles = _slideTransition.exit;
-    return _extends$9({}, exitStyles, {
+    return _extends$c({}, exitStyles, {
       transition: (_transition$exit = transition2 == null ? void 0 : transition2.exit) != null ? _transition$exit : withDelay.exit(defaultTransition.exit, delay),
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     });
@@ -23170,14 +23426,14 @@ var variants$1 = {
     var _slideTransition2 = slideTransition({
       direction: direction2
     }), enterStyles = _slideTransition2.enter;
-    return _extends$9({}, enterStyles, {
+    return _extends$c({}, enterStyles, {
       transition: (_transition$enter = transition2 == null ? void 0 : transition2.enter) != null ? _transition$enter : withDelay.enter(defaultTransition.enter, delay),
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
     });
   }
 };
 var Slide = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-  var _props$direction = props.direction, direction2 = _props$direction === void 0 ? "right" : _props$direction, style = props.style, unmountOnExit = props.unmountOnExit, isOpen = props["in"], className = props.className, transition2 = props.transition, transitionEnd = props.transitionEnd, delay = props.delay, rest = _objectWithoutPropertiesLoose$a(props, _excluded$1$3);
+  var _props$direction = props.direction, direction2 = _props$direction === void 0 ? "right" : _props$direction, style = props.style, unmountOnExit = props.unmountOnExit, isOpen = props["in"], className = props.className, transition2 = props.transition, transitionEnd = props.transitionEnd, delay = props.delay, rest = _objectWithoutPropertiesLoose$c(props, _excluded$1$4);
   var transitionStyles = slideTransition({
     direction: direction2
   });
@@ -23194,7 +23450,7 @@ var Slide = /* @__PURE__ */ React.forwardRef(function(props, ref) {
   };
   return /* @__PURE__ */ React.createElement(AnimatePresence, {
     custom
-  }, show && /* @__PURE__ */ React.createElement(motion.div, _extends$9({}, rest, {
+  }, show && /* @__PURE__ */ React.createElement(motion.div, _extends$c({}, rest, {
     ref,
     initial: "exit",
     className: cx("chakra-slide", className),
@@ -23235,13 +23491,13 @@ var variants = {
       x: offsetX,
       y: offsetY
     };
-    return _extends$9({
+    return _extends$c({
       opacity: 0,
       transition: (_transition$exit2 = transition2 == null ? void 0 : transition2.exit) != null ? _transition$exit2 : withDelay.exit(TransitionDefaults.exit, delay)
-    }, reverse ? _extends$9({}, offset2, {
+    }, reverse ? _extends$c({}, offset2, {
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     }) : {
-      transitionEnd: _extends$9({}, offset2, transitionEnd == null ? void 0 : transitionEnd.exit)
+      transitionEnd: _extends$c({}, offset2, transitionEnd == null ? void 0 : transitionEnd.exit)
     });
   }
 };
@@ -23251,8 +23507,8 @@ var slideFadeConfig = {
   exit: "exit",
   variants
 };
-function _extends$8() {
-  _extends$8 = Object.assign || function(target) {
+function _extends$b() {
+  _extends$b = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -23263,9 +23519,249 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$9(source, excluded) {
+function sortNodes(nodes) {
+  return nodes.sort(function(a2, b2) {
+    var compare = a2.compareDocumentPosition(b2);
+    if (compare & Node.DOCUMENT_POSITION_FOLLOWING || compare & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      return -1;
+    }
+    if (compare & Node.DOCUMENT_POSITION_PRECEDING || compare & Node.DOCUMENT_POSITION_CONTAINS) {
+      return 1;
+    }
+    if (compare & Node.DOCUMENT_POSITION_DISCONNECTED || compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) {
+      throw Error("Cannot sort the given nodes.");
+    } else {
+      return 0;
+    }
+  });
+}
+var isElement$1 = function isElement(el) {
+  return typeof el == "object" && "nodeType" in el && el.nodeType === Node.ELEMENT_NODE;
+};
+function getNextIndex(current, max2, loop) {
+  var next2 = current + 1;
+  if (loop && next2 >= max2)
+    next2 = 0;
+  return next2;
+}
+function getPrevIndex(current, max2, loop) {
+  var next2 = current - 1;
+  if (loop && next2 < 0)
+    next2 = max2;
+  return next2;
+}
+var useSafeLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var cast = function cast2(value) {
+  return value;
+};
+var DescendantsManager = function DescendantsManager2() {
+  var _this = this;
+  this.descendants = /* @__PURE__ */ new Map();
+  this.register = function(nodeOrOptions) {
+    if (nodeOrOptions == null)
+      return;
+    if (isElement$1(nodeOrOptions)) {
+      return _this.registerNode(nodeOrOptions);
+    }
+    return function(node2) {
+      _this.registerNode(node2, nodeOrOptions);
+    };
+  };
+  this.unregister = function(node2) {
+    _this.descendants["delete"](node2);
+    var sorted = sortNodes(Array.from(_this.descendants.keys()));
+    _this.assignIndex(sorted);
+  };
+  this.destroy = function() {
+    _this.descendants.clear();
+  };
+  this.assignIndex = function(descendants) {
+    _this.descendants.forEach(function(descendant) {
+      var index2 = descendants.indexOf(descendant.node);
+      descendant.index = index2;
+      descendant.node.dataset["index"] = descendant.index.toString();
+    });
+  };
+  this.count = function() {
+    return _this.descendants.size;
+  };
+  this.enabledCount = function() {
+    return _this.enabledValues().length;
+  };
+  this.values = function() {
+    var values = Array.from(_this.descendants.values());
+    return values.sort(function(a2, b2) {
+      return a2.index - b2.index;
+    });
+  };
+  this.enabledValues = function() {
+    return _this.values().filter(function(descendant) {
+      return !descendant.disabled;
+    });
+  };
+  this.item = function(index2) {
+    if (_this.count() === 0)
+      return void 0;
+    return _this.values()[index2];
+  };
+  this.enabledItem = function(index2) {
+    if (_this.enabledCount() === 0)
+      return void 0;
+    return _this.enabledValues()[index2];
+  };
+  this.first = function() {
+    return _this.item(0);
+  };
+  this.firstEnabled = function() {
+    return _this.enabledItem(0);
+  };
+  this.last = function() {
+    return _this.item(_this.descendants.size - 1);
+  };
+  this.lastEnabled = function() {
+    var lastIndex = _this.enabledValues().length - 1;
+    return _this.enabledItem(lastIndex);
+  };
+  this.indexOf = function(node2) {
+    var _this$descendants$get, _this$descendants$get2;
+    if (!node2)
+      return -1;
+    return (_this$descendants$get = (_this$descendants$get2 = _this.descendants.get(node2)) == null ? void 0 : _this$descendants$get2.index) != null ? _this$descendants$get : -1;
+  };
+  this.enabledIndexOf = function(node2) {
+    if (node2 == null)
+      return -1;
+    return _this.enabledValues().findIndex(function(i2) {
+      return i2.node.isSameNode(node2);
+    });
+  };
+  this.next = function(index2, loop) {
+    if (loop === void 0) {
+      loop = true;
+    }
+    var next2 = getNextIndex(index2, _this.count(), loop);
+    return _this.item(next2);
+  };
+  this.nextEnabled = function(index2, loop) {
+    if (loop === void 0) {
+      loop = true;
+    }
+    var item = _this.item(index2);
+    if (!item)
+      return;
+    var enabledIndex = _this.enabledIndexOf(item.node);
+    var nextEnabledIndex = getNextIndex(enabledIndex, _this.enabledCount(), loop);
+    return _this.enabledItem(nextEnabledIndex);
+  };
+  this.prev = function(index2, loop) {
+    if (loop === void 0) {
+      loop = true;
+    }
+    var prev2 = getPrevIndex(index2, _this.count() - 1, loop);
+    return _this.item(prev2);
+  };
+  this.prevEnabled = function(index2, loop) {
+    if (loop === void 0) {
+      loop = true;
+    }
+    var item = _this.item(index2);
+    if (!item)
+      return;
+    var enabledIndex = _this.enabledIndexOf(item.node);
+    var prevEnabledIndex = getPrevIndex(enabledIndex, _this.enabledCount() - 1, loop);
+    return _this.enabledItem(prevEnabledIndex);
+  };
+  this.registerNode = function(node2, options) {
+    if (!node2 || _this.descendants.has(node2))
+      return;
+    var keys2 = Array.from(_this.descendants.keys()).concat(node2);
+    var sorted = sortNodes(keys2);
+    if (options != null && options.disabled) {
+      options.disabled = !!options.disabled;
+    }
+    var descendant = _extends$b({
+      node: node2,
+      index: -1
+    }, options);
+    _this.descendants.set(node2, descendant);
+    _this.assignIndex(sorted);
+  };
+};
+function useDescendants() {
+  var descendants = useRef(new DescendantsManager());
+  useSafeLayoutEffect$1(function() {
+    return function() {
+      return descendants.current.destroy();
+    };
+  });
+  return descendants.current;
+}
+var _createContext$5 = createContext({
+  name: "DescendantsProvider",
+  errorMessage: "useDescendantsContext must be used within DescendantsProvider"
+}), DescendantsContextProvider = _createContext$5[0], useDescendantsContext = _createContext$5[1];
+function useDescendant(options) {
+  var descendants = useDescendantsContext();
+  var _useState = useState(-1), index2 = _useState[0], setIndex = _useState[1];
+  var ref = useRef(null);
+  useSafeLayoutEffect$1(function() {
+    return function() {
+      if (!ref.current)
+        return;
+      descendants.unregister(ref.current);
+    };
+  }, []);
+  useSafeLayoutEffect$1(function() {
+    if (!ref.current)
+      return;
+    var dataIndex = Number(ref.current.dataset["index"]);
+    if (index2 != dataIndex && !Number.isNaN(dataIndex)) {
+      setIndex(dataIndex);
+    }
+  });
+  var refCallback = options ? cast(descendants.register(options)) : cast(descendants.register);
+  return {
+    descendants,
+    index: index2,
+    enabledIndex: descendants.enabledIndexOf(ref.current),
+    register: mergeRefs(refCallback, ref)
+  };
+}
+function createDescendantContext() {
+  var ContextProvider = cast(DescendantsContextProvider);
+  var _useDescendantsContext = function _useDescendantsContext2() {
+    return cast(useDescendantsContext());
+  };
+  var _useDescendant = function _useDescendant2(options) {
+    return useDescendant(options);
+  };
+  var _useDescendants = function _useDescendants2() {
+    return useDescendants();
+  };
+  return [
+    ContextProvider,
+    _useDescendantsContext,
+    _useDescendants,
+    _useDescendant
+  ];
+}
+function _extends$a() {
+  _extends$a = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$a.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$b(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -23319,7 +23815,7 @@ function useImage(props) {
       imageRef.current = null;
     }
   };
-  useSafeLayoutEffect$1(function() {
+  useSafeLayoutEffect$2(function() {
     if (ignoreFallback)
       return void 0;
     if (status === "loading") {
@@ -23331,10 +23827,10 @@ function useImage(props) {
   }, [status, load, ignoreFallback]);
   return ignoreFallback ? "loaded" : status;
 }
-var _excluded$c = ["htmlWidth", "htmlHeight", "alt"], _excluded2$3 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
+var _excluded$c = ["htmlWidth", "htmlHeight", "alt"], _excluded2$4 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
 var NativeImage = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-  var htmlWidth = props.htmlWidth, htmlHeight = props.htmlHeight, alt = props.alt, rest = _objectWithoutPropertiesLoose$9(props, _excluded$c);
-  return /* @__PURE__ */ React.createElement("img", _extends$8({
+  var htmlWidth = props.htmlWidth, htmlHeight = props.htmlHeight, alt = props.alt, rest = _objectWithoutPropertiesLoose$b(props, _excluded$c);
+  return /* @__PURE__ */ React.createElement("img", _extends$a({
     width: htmlWidth,
     height: htmlHeight,
     ref,
@@ -23342,12 +23838,12 @@ var NativeImage = /* @__PURE__ */ React.forwardRef(function(props, ref) {
   }, rest));
 });
 var Image$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var fallbackSrc = props.fallbackSrc, fallback = props.fallback, src = props.src, srcSet = props.srcSet, align = props.align, fit = props.fit, loading = props.loading, ignoreFallback = props.ignoreFallback, crossOrigin = props.crossOrigin, rest = _objectWithoutPropertiesLoose$9(props, _excluded2$3);
+  var fallbackSrc = props.fallbackSrc, fallback = props.fallback, src = props.src, srcSet = props.srcSet, align = props.align, fit = props.fit, loading = props.loading, ignoreFallback = props.ignoreFallback, crossOrigin = props.crossOrigin, rest = _objectWithoutPropertiesLoose$b(props, _excluded2$4);
   var shouldIgnore = loading != null || ignoreFallback || fallbackSrc === void 0 && fallback === void 0;
-  var status = useImage(_extends$8({}, props, {
+  var status = useImage(_extends$a({}, props, {
     ignoreFallback: shouldIgnore
   }));
-  var shared = _extends$8({
+  var shared = _extends$a({
     ref,
     objectFit: fit,
     objectPosition: align
@@ -23355,13 +23851,13 @@ var Image$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
   if (status !== "loaded") {
     if (fallback)
       return fallback;
-    return /* @__PURE__ */ React.createElement(chakra.img, _extends$8({
+    return /* @__PURE__ */ React.createElement(chakra.img, _extends$a({
       as: NativeImage,
       className: "chakra-image__placeholder",
       src: fallbackSrc
     }, shared));
   }
-  return /* @__PURE__ */ React.createElement(chakra.img, _extends$8({
+  return /* @__PURE__ */ React.createElement(chakra.img, _extends$a({
     as: NativeImage,
     src,
     srcSet,
@@ -23387,8 +23883,8 @@ var VisuallyHidden = chakra("span", {
 chakra("input", {
   baseStyle: visuallyHiddenStyle
 });
-function _extends$7() {
-  _extends$7 = Object.assign || function(target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -23399,9 +23895,9 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$8(source, excluded) {
+function _objectWithoutPropertiesLoose$a(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -23426,9 +23922,9 @@ var spin$1 = keyframes$2({
 });
 var Spinner = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyleConfig("Spinner", props);
-  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$lab = _omitThemingProps.label, label = _omitThemingProps$lab === void 0 ? "Loading..." : _omitThemingProps$lab, _omitThemingProps$thi = _omitThemingProps.thickness, thickness = _omitThemingProps$thi === void 0 ? "2px" : _omitThemingProps$thi, _omitThemingProps$spe = _omitThemingProps.speed, speed = _omitThemingProps$spe === void 0 ? "0.45s" : _omitThemingProps$spe, _omitThemingProps$emp = _omitThemingProps.emptyColor, emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp, className = _omitThemingProps.className, rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$b);
+  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$lab = _omitThemingProps.label, label = _omitThemingProps$lab === void 0 ? "Loading..." : _omitThemingProps$lab, _omitThemingProps$thi = _omitThemingProps.thickness, thickness = _omitThemingProps$thi === void 0 ? "2px" : _omitThemingProps$thi, _omitThemingProps$spe = _omitThemingProps.speed, speed = _omitThemingProps$spe === void 0 ? "0.45s" : _omitThemingProps$spe, _omitThemingProps$emp = _omitThemingProps.emptyColor, emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp, className = _omitThemingProps.className, rest = _objectWithoutPropertiesLoose$a(_omitThemingProps, _excluded$b);
   var _className = cx("chakra-spinner", className);
-  var spinnerStyles = _extends$7({
+  var spinnerStyles = _extends$9({
     display: "inline-block",
     borderColor: "currentColor",
     borderStyle: "solid",
@@ -23438,13 +23934,13 @@ var Spinner = /* @__PURE__ */ forwardRef(function(props, ref) {
     borderLeftColor: emptyColor,
     animation: spin$1 + " " + speed + " linear infinite"
   }, styles2);
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$7({
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$9({
     ref,
     __css: spinnerStyles,
     className: _className
   }, rest), label && /* @__PURE__ */ React.createElement(VisuallyHidden, null, label));
 });
-function _objectWithoutPropertiesLoose$7(source, excluded) {
+function _objectWithoutPropertiesLoose$9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -23458,8 +23954,8 @@ function _objectWithoutPropertiesLoose$7(source, excluded) {
   }
   return target;
 }
-function _extends$6() {
-  _extends$6 = Object.assign || function(target) {
+function _extends$8() {
+  _extends$8 = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -23470,30 +23966,30 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
-var _createContext$3 = createContext({
+var _createContext$4 = createContext({
   strict: false,
   name: "ButtonGroupContext"
-}), useButtonGroup = _createContext$3[1];
+}), useButtonGroup = _createContext$4[1];
 var _excluded$3$2 = ["label", "placement", "spacing", "children", "className", "__css"];
 var ButtonSpinner = function ButtonSpinner2(props) {
   var label = props.label, placement = props.placement, _props$spacing = props.spacing, spacing2 = _props$spacing === void 0 ? "0.5rem" : _props$spacing, _props$children = props.children, children = _props$children === void 0 ? /* @__PURE__ */ React.createElement(Spinner, {
     color: "currentColor",
     width: "1em",
     height: "1em"
-  }) : _props$children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$7(props, _excluded$3$2);
+  }) : _props$children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$9(props, _excluded$3$2);
   var _className = cx("chakra-button__spinner", className);
   var marginProp = placement === "start" ? "marginEnd" : "marginStart";
   var spinnerStyles = React.useMemo(function() {
     var _extends2;
-    return _extends$6((_extends2 = {
+    return _extends$8((_extends2 = {
       display: "flex",
       alignItems: "center",
       position: label ? "relative" : "absolute"
     }, _extends2[marginProp] = label ? spacing2 : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
   }, [__css, label, marginProp, spacing2]);
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$6({
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$8({
     className: _className
   }, rest, {
     __css: spinnerStyles
@@ -23501,13 +23997,13 @@ var ButtonSpinner = function ButtonSpinner2(props) {
 };
 var _excluded$2$2 = ["children", "className"];
 var ButtonIcon = function ButtonIcon2(props) {
-  var children = props.children, className = props.className, rest = _objectWithoutPropertiesLoose$7(props, _excluded$2$2);
+  var children = props.children, className = props.className, rest = _objectWithoutPropertiesLoose$9(props, _excluded$2$2);
   var _children = /* @__PURE__ */ React.isValidElement(children) ? /* @__PURE__ */ React.cloneElement(children, {
     "aria-hidden": true,
     focusable: false
   }) : children;
   var _className = cx("chakra-button__icon", className);
-  return /* @__PURE__ */ React.createElement(chakra.span, _extends$6({
+  return /* @__PURE__ */ React.createElement(chakra.span, _extends$8({
     display: "inline-flex",
     alignSelf: "center",
     flexShrink: 0
@@ -23528,17 +24024,17 @@ function useButtonType(value) {
     type
   };
 }
-var _excluded$1$2 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
+var _excluded$1$3 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
 var Button = /* @__PURE__ */ forwardRef(function(props, ref) {
   var group = useButtonGroup();
-  var styles2 = useStyleConfig("Button", _extends$6({}, group, props));
-  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$isD = _omitThemingProps.isDisabled, isDisabled2 = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD, isLoading = _omitThemingProps.isLoading, isActive = _omitThemingProps.isActive, isFullWidth = _omitThemingProps.isFullWidth, children = _omitThemingProps.children, leftIcon = _omitThemingProps.leftIcon, rightIcon = _omitThemingProps.rightIcon, loadingText = _omitThemingProps.loadingText, _omitThemingProps$ico = _omitThemingProps.iconSpacing, iconSpacing2 = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico, type = _omitThemingProps.type, spinner2 = _omitThemingProps.spinner, _omitThemingProps$spi = _omitThemingProps.spinnerPlacement, spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi, className = _omitThemingProps.className, as = _omitThemingProps.as, rest = _objectWithoutPropertiesLoose$7(_omitThemingProps, _excluded$1$2);
+  var styles2 = useStyleConfig("Button", _extends$8({}, group, props));
+  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$isD = _omitThemingProps.isDisabled, isDisabled2 = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD, isLoading = _omitThemingProps.isLoading, isActive = _omitThemingProps.isActive, isFullWidth = _omitThemingProps.isFullWidth, children = _omitThemingProps.children, leftIcon = _omitThemingProps.leftIcon, rightIcon = _omitThemingProps.rightIcon, loadingText = _omitThemingProps.loadingText, _omitThemingProps$ico = _omitThemingProps.iconSpacing, iconSpacing2 = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico, type = _omitThemingProps.type, spinner2 = _omitThemingProps.spinner, _omitThemingProps$spi = _omitThemingProps.spinnerPlacement, spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi, className = _omitThemingProps.className, as = _omitThemingProps.as, rest = _objectWithoutPropertiesLoose$9(_omitThemingProps, _excluded$1$3);
   var buttonStyles = React.useMemo(function() {
     var _styles$_focus;
     var _focus = mergeWith({}, (_styles$_focus = styles2 == null ? void 0 : styles2["_focus"]) != null ? _styles$_focus : {}, {
       zIndex: 1
     });
-    return _extends$6({
+    return _extends$8({
       display: "inline-flex",
       appearance: "none",
       alignItems: "center",
@@ -23560,7 +24056,7 @@ var Button = /* @__PURE__ */ forwardRef(function(props, ref) {
     iconSpacing: iconSpacing2,
     children
   };
-  return /* @__PURE__ */ React.createElement(chakra.button, _extends$6({
+  return /* @__PURE__ */ React.createElement(chakra.button, _extends$8({
     disabled: isDisabled2 || isLoading,
     ref: useMergeRefs$1(ref, _ref2),
     as,
@@ -23591,7 +24087,7 @@ function ButtonContent(props) {
     marginStart: iconSpacing2
   }, rightIcon));
 }
-function _objectWithoutPropertiesLoose$6(source, excluded) {
+function _objectWithoutPropertiesLoose$8(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -23605,8 +24101,8 @@ function _objectWithoutPropertiesLoose$6(source, excluded) {
   }
   return target;
 }
-function _extends$5() {
-  _extends$5 = Object.assign || function(target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -23617,11 +24113,11 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 var _excluded$9 = ["children", "isDisabled", "__css"];
 var CloseIcon = function CloseIcon2(props) {
-  return /* @__PURE__ */ React.createElement(Icon, _extends$5({
+  return /* @__PURE__ */ React.createElement(Icon, _extends$7({
     focusable: "false",
     "aria-hidden": true
   }, props), /* @__PURE__ */ React.createElement("path", {
@@ -23631,7 +24127,7 @@ var CloseIcon = function CloseIcon2(props) {
 };
 var CloseButton = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyleConfig("CloseButton", props);
-  var _omitThemingProps = omitThemingProps(props), children = _omitThemingProps.children, isDisabled2 = _omitThemingProps.isDisabled, __css = _omitThemingProps.__css, rest = _objectWithoutPropertiesLoose$6(_omitThemingProps, _excluded$9);
+  var _omitThemingProps = omitThemingProps(props), children = _omitThemingProps.children, isDisabled2 = _omitThemingProps.isDisabled, __css = _omitThemingProps.__css, rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$9);
   var baseStyle22 = {
     outline: 0,
     display: "flex",
@@ -23639,19 +24135,19 @@ var CloseButton = /* @__PURE__ */ forwardRef(function(props, ref) {
     justifyContent: "center",
     flexShrink: 0
   };
-  return /* @__PURE__ */ React.createElement(chakra.button, _extends$5({
+  return /* @__PURE__ */ React.createElement(chakra.button, _extends$7({
     type: "button",
     "aria-label": "Close",
     ref,
     disabled: isDisabled2,
-    __css: _extends$5({}, baseStyle22, styles2, __css)
+    __css: _extends$7({}, baseStyle22, styles2, __css)
   }, rest), children || /* @__PURE__ */ React.createElement(CloseIcon, {
     width: "1em",
     height: "1em"
   }));
 });
-function _extends$4() {
-  _extends$4 = Object.assign || function(target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -23662,9 +24158,9 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$5(source, excluded) {
+function _objectWithoutPropertiesLoose$7(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -23688,7 +24184,7 @@ var Center = chakra("div", {
 });
 var _excluded$a = ["direction", "align", "justify", "wrap", "basis", "grow", "shrink"];
 var Flex = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var direction2 = props.direction, align = props.align, justify = props.justify, wrap3 = props.wrap, basis = props.basis, grow = props.grow, shrink = props.shrink, rest = _objectWithoutPropertiesLoose$5(props, _excluded$a);
+  var direction2 = props.direction, align = props.align, justify = props.justify, wrap3 = props.wrap, basis = props.basis, grow = props.grow, shrink = props.shrink, rest = _objectWithoutPropertiesLoose$7(props, _excluded$a);
   var styles2 = {
     display: "flex",
     flexDirection: direction2,
@@ -23699,7 +24195,7 @@ var Flex = /* @__PURE__ */ forwardRef(function(props, ref) {
     flexGrow: grow,
     flexShrink: shrink
   };
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$4({
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$6({
     ref,
     __css: styles2
   }, rest));
@@ -23709,19 +24205,19 @@ var Heading = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyleConfig("Heading", props);
   var _omitThemingProps = omitThemingProps(props);
   _omitThemingProps.className;
-  var rest = _objectWithoutPropertiesLoose$5(_omitThemingProps, _excluded$8);
-  return /* @__PURE__ */ React.createElement(chakra.h2, _extends$4({
+  var rest = _objectWithoutPropertiesLoose$7(_omitThemingProps, _excluded$8);
+  return /* @__PURE__ */ React.createElement(chakra.h2, _extends$6({
     ref,
     className: cx("chakra-heading", props.className)
   }, rest, {
     __css: styles2
   }));
 });
-var _excluded$6 = ["className", "isExternal"];
+var _excluded$6$1 = ["className", "isExternal"];
 var Link = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyleConfig("Link", props);
-  var _omitThemingProps = omitThemingProps(props), className = _omitThemingProps.className, isExternal = _omitThemingProps.isExternal, rest = _objectWithoutPropertiesLoose$5(_omitThemingProps, _excluded$6);
-  return /* @__PURE__ */ React.createElement(chakra.a, _extends$4({
+  var _omitThemingProps = omitThemingProps(props), className = _omitThemingProps.className, isExternal = _omitThemingProps.isExternal, rest = _objectWithoutPropertiesLoose$7(_omitThemingProps, _excluded$6$1);
+  return /* @__PURE__ */ React.createElement(chakra.a, _extends$6({
     target: isExternal ? "_blank" : void 0,
     rel: isExternal ? "noopener" : void 0,
     ref,
@@ -23730,15 +24226,15 @@ var Link = /* @__PURE__ */ forwardRef(function(props, ref) {
     __css: styles2
   }));
 });
-var _excluded$5 = ["children", "styleType", "stylePosition", "spacing"];
-var _createContext$2 = createContext({
+var _excluded$5$1 = ["children", "styleType", "stylePosition", "spacing"];
+var _createContext$3 = createContext({
   name: "StylesContext",
   errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in a `<*List />` "
-}), StylesProvider = _createContext$2[0], useStyles = _createContext$2[1];
+}), StylesProvider = _createContext$3[0], useStyles = _createContext$3[1];
 var List = /* @__PURE__ */ forwardRef(function(props, ref) {
   var _ref2;
   var styles2 = useMultiStyleConfig("List", props);
-  var _omitThemingProps = omitThemingProps(props), children = _omitThemingProps.children, _omitThemingProps$sty = _omitThemingProps.styleType, styleType = _omitThemingProps$sty === void 0 ? "none" : _omitThemingProps$sty, stylePosition = _omitThemingProps.stylePosition, spacing2 = _omitThemingProps.spacing, rest = _objectWithoutPropertiesLoose$5(_omitThemingProps, _excluded$5);
+  var _omitThemingProps = omitThemingProps(props), children = _omitThemingProps.children, _omitThemingProps$sty = _omitThemingProps.styleType, styleType = _omitThemingProps$sty === void 0 ? "none" : _omitThemingProps$sty, stylePosition = _omitThemingProps.stylePosition, spacing2 = _omitThemingProps.spacing, rest = _objectWithoutPropertiesLoose$7(_omitThemingProps, _excluded$5$1);
   var validChildren = getValidChildren(children);
   var selector2 = "& > *:not(style) ~ *:not(style)";
   var spacingStyle = spacing2 ? (_ref2 = {}, _ref2[selector2] = {
@@ -23746,17 +24242,17 @@ var List = /* @__PURE__ */ forwardRef(function(props, ref) {
   }, _ref2) : {};
   return /* @__PURE__ */ React.createElement(StylesProvider, {
     value: styles2
-  }, /* @__PURE__ */ React.createElement(chakra.ul, _extends$4({
+  }, /* @__PURE__ */ React.createElement(chakra.ul, _extends$6({
     ref,
     listStyleType: styleType,
     listStylePosition: stylePosition,
     role: "list",
-    __css: _extends$4({}, styles2.container, spacingStyle)
+    __css: _extends$6({}, styles2.container, spacingStyle)
   }, rest), validChildren));
 });
 var ListItem = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyles();
-  return /* @__PURE__ */ React.createElement(chakra.li, _extends$4({
+  return /* @__PURE__ */ React.createElement(chakra.li, _extends$6({
     ref
   }, props, {
     __css: styles2.item
@@ -23841,10 +24337,10 @@ function getDividerStyles(options) {
 }
 var _excluded$3$1 = ["isInline", "direction", "align", "justify", "spacing", "wrap", "children", "divider", "className", "shouldWrapChildren"];
 var StackItem = function StackItem2(props) {
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$4({
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$6({
     className: "chakra-stack__item"
   }, props, {
-    __css: _extends$4({
+    __css: _extends$6({
       display: "inline-block",
       flex: "0 0 auto",
       minWidth: 0
@@ -23853,7 +24349,7 @@ var StackItem = function StackItem2(props) {
 };
 var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
   var _ref2;
-  var isInline = props.isInline, directionProp = props.direction, align = props.align, justify = props.justify, _props$spacing = props.spacing, spacing2 = _props$spacing === void 0 ? "0.5rem" : _props$spacing, wrap3 = props.wrap, children = props.children, divider2 = props.divider, className = props.className, shouldWrapChildren = props.shouldWrapChildren, rest = _objectWithoutPropertiesLoose$5(props, _excluded$3$1);
+  var isInline = props.isInline, directionProp = props.direction, align = props.align, justify = props.justify, _props$spacing = props.spacing, spacing2 = _props$spacing === void 0 ? "0.5rem" : _props$spacing, wrap3 = props.wrap, children = props.children, divider2 = props.divider, className = props.className, shouldWrapChildren = props.shouldWrapChildren, rest = _objectWithoutPropertiesLoose$7(props, _excluded$3$1);
   var direction2 = isInline ? "row" : directionProp != null ? directionProp : "column";
   var styles2 = React.useMemo(function() {
     return getStackStyles({
@@ -23888,7 +24384,7 @@ var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
     }, _child, _divider);
   });
   var _className = cx("chakra-stack", className);
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$4({
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$6({
     ref,
     display: "flex",
     alignItems: align,
@@ -23900,7 +24396,7 @@ var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
   }, rest), clones);
 });
 var HStack = /* @__PURE__ */ forwardRef(function(props, ref) {
-  return /* @__PURE__ */ React.createElement(Stack, _extends$4({
+  return /* @__PURE__ */ React.createElement(Stack, _extends$6({
     align: "center"
   }, props, {
     direction: "row",
@@ -23915,23 +24411,23 @@ var Text = /* @__PURE__ */ forwardRef(function(props, ref) {
   _omitThemingProps.align;
   _omitThemingProps.decoration;
   _omitThemingProps.casing;
-  var rest = _objectWithoutPropertiesLoose$5(_omitThemingProps, _excluded$2$1);
+  var rest = _objectWithoutPropertiesLoose$7(_omitThemingProps, _excluded$2$1);
   var aliasedProps = filterUndefined({
     textAlign: props.align,
     textDecoration: props.decoration,
     textTransform: props.casing
   });
-  return /* @__PURE__ */ React.createElement(chakra.p, _extends$4({
+  return /* @__PURE__ */ React.createElement(chakra.p, _extends$6({
     ref,
     className: cx("chakra-text", props.className)
   }, aliasedProps, rest, {
     __css: styles2
   }));
 });
-var _excluded$7 = ["isExternal", "target", "rel", "className"], _excluded2$2 = ["className"];
+var _excluded$7 = ["isExternal", "target", "rel", "className"], _excluded2$3 = ["className"];
 var LinkOverlay = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var isExternal = props.isExternal, target = props.target, rel = props.rel, className = props.className, rest = _objectWithoutPropertiesLoose$5(props, _excluded$7);
-  return /* @__PURE__ */ React.createElement(chakra.a, _extends$4({}, rest, {
+  var isExternal = props.isExternal, target = props.target, rel = props.rel, className = props.className, rest = _objectWithoutPropertiesLoose$7(props, _excluded$7);
+  return /* @__PURE__ */ React.createElement(chakra.a, _extends$6({}, rest, {
     ref,
     className: cx("chakra-linkbox__overlay", className),
     rel: isExternal ? "noopener noreferrer" : rel,
@@ -23953,8 +24449,8 @@ var LinkOverlay = /* @__PURE__ */ forwardRef(function(props, ref) {
   }));
 });
 var LinkBox = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var className = props.className, rest = _objectWithoutPropertiesLoose$5(props, _excluded2$2);
-  return /* @__PURE__ */ React.createElement(chakra.div, _extends$4({
+  var className = props.className, rest = _objectWithoutPropertiesLoose$7(props, _excluded2$3);
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$6({
     ref,
     position: "relative"
   }, rest, {
@@ -24013,6 +24509,213 @@ function useMediaQuery(query) {
   }, []);
   return matches;
 }
+function _extends$5() {
+  _extends$5 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$5.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$6(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function useEventListeners() {
+  var listeners = React.useRef(/* @__PURE__ */ new Map());
+  var currentListeners = listeners.current;
+  var add4 = React.useCallback(function(el, type, listener, options) {
+    listeners.current.set(listener, {
+      type,
+      el,
+      options
+    });
+    el.addEventListener(type, listener, options);
+  }, []);
+  var remove2 = React.useCallback(function(el, type, listener, options) {
+    el.removeEventListener(type, listener, options);
+    listeners.current["delete"](listener);
+  }, []);
+  React.useEffect(function() {
+    return function() {
+      currentListeners.forEach(function(value, key) {
+        remove2(value.el, value.type, key, value.options);
+      });
+    };
+  }, [remove2, currentListeners]);
+  return {
+    add: add4,
+    remove: remove2
+  };
+}
+var _excluded$6 = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
+function isValidElement(event) {
+  var element = event.target;
+  var tagName = element.tagName, isContentEditable2 = element.isContentEditable;
+  return tagName !== "INPUT" && tagName !== "TEXTAREA" && isContentEditable2 !== true;
+}
+function useClickable(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  var _props = props, htmlRef = _props.ref, isDisabled2 = _props.isDisabled, isFocusable2 = _props.isFocusable, _props$clickOnEnter = _props.clickOnEnter, clickOnEnter = _props$clickOnEnter === void 0 ? true : _props$clickOnEnter, _props$clickOnSpace = _props.clickOnSpace, clickOnSpace = _props$clickOnSpace === void 0 ? true : _props$clickOnSpace, onMouseDown = _props.onMouseDown, onMouseUp = _props.onMouseUp, onClick = _props.onClick, onKeyDown = _props.onKeyDown, onKeyUp = _props.onKeyUp, tabIndexProp = _props.tabIndex, onMouseOver = _props.onMouseOver, onMouseLeave = _props.onMouseLeave, htmlProps = _objectWithoutPropertiesLoose$6(_props, _excluded$6);
+  var _React$useState = React.useState(true), isButton = _React$useState[0], setIsButton = _React$useState[1];
+  var _React$useState2 = React.useState(false), isPressed = _React$useState2[0], setIsPressed = _React$useState2[1];
+  var listeners = useEventListeners();
+  var refCallback = function refCallback2(node2) {
+    if (!node2)
+      return;
+    if (node2.tagName !== "BUTTON") {
+      setIsButton(false);
+    }
+  };
+  var tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
+  var trulyDisabled = isDisabled2 && !isFocusable2;
+  var handleClick = React.useCallback(function(event) {
+    if (isDisabled2) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+    var self2 = event.currentTarget;
+    self2.focus();
+    onClick == null ? void 0 : onClick(event);
+  }, [isDisabled2, onClick]);
+  var onDocumentKeyUp = React.useCallback(function(e2) {
+    if (isPressed && isValidElement(e2)) {
+      e2.preventDefault();
+      e2.stopPropagation();
+      setIsPressed(false);
+      listeners.remove(document, "keyup", onDocumentKeyUp, false);
+    }
+  }, [isPressed, listeners]);
+  var handleKeyDown = React.useCallback(function(event) {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (isDisabled2 || event.defaultPrevented || event.metaKey) {
+      return;
+    }
+    if (!isValidElement(event.nativeEvent) || isButton)
+      return;
+    var shouldClickOnEnter = clickOnEnter && event.key === "Enter";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
+    if (shouldClickOnSpace) {
+      event.preventDefault();
+      setIsPressed(true);
+    }
+    if (shouldClickOnEnter) {
+      event.preventDefault();
+      var self2 = event.currentTarget;
+      self2.click();
+    }
+    listeners.add(document, "keyup", onDocumentKeyUp, false);
+  }, [isDisabled2, isButton, onKeyDown, clickOnEnter, clickOnSpace, listeners, onDocumentKeyUp]);
+  var handleKeyUp = React.useCallback(function(event) {
+    onKeyUp == null ? void 0 : onKeyUp(event);
+    if (isDisabled2 || event.defaultPrevented || event.metaKey)
+      return;
+    if (!isValidElement(event.nativeEvent) || isButton)
+      return;
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
+    if (shouldClickOnSpace) {
+      event.preventDefault();
+      setIsPressed(false);
+      var self2 = event.currentTarget;
+      self2.click();
+    }
+  }, [clickOnSpace, isButton, isDisabled2, onKeyUp]);
+  var onDocumentMouseUp = React.useCallback(function(event) {
+    if (event.button !== 0)
+      return;
+    setIsPressed(false);
+    listeners.remove(document, "mouseup", onDocumentMouseUp, false);
+  }, [listeners]);
+  var handleMouseDown = React.useCallback(function(event) {
+    if (isRightClick(event))
+      return;
+    if (isDisabled2) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+    if (!isButton) {
+      setIsPressed(true);
+    }
+    var target = event.currentTarget;
+    target.focus({
+      preventScroll: true
+    });
+    listeners.add(document, "mouseup", onDocumentMouseUp, false);
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  }, [isDisabled2, isButton, onMouseDown, listeners, onDocumentMouseUp]);
+  var handleMouseUp = React.useCallback(function(event) {
+    if (isRightClick(event))
+      return;
+    if (!isButton) {
+      setIsPressed(false);
+    }
+    onMouseUp == null ? void 0 : onMouseUp(event);
+  }, [onMouseUp, isButton]);
+  var handleMouseOver = React.useCallback(function(event) {
+    if (isDisabled2) {
+      event.preventDefault();
+      return;
+    }
+    onMouseOver == null ? void 0 : onMouseOver(event);
+  }, [isDisabled2, onMouseOver]);
+  var handleMouseLeave = React.useCallback(function(event) {
+    if (isPressed) {
+      event.preventDefault();
+      setIsPressed(false);
+    }
+    onMouseLeave == null ? void 0 : onMouseLeave(event);
+  }, [isPressed, onMouseLeave]);
+  var ref = mergeRefs(htmlRef, refCallback);
+  if (isButton) {
+    return _extends$5({}, htmlProps, {
+      ref,
+      type: "button",
+      "aria-disabled": trulyDisabled ? void 0 : isDisabled2,
+      disabled: trulyDisabled,
+      onClick: handleClick,
+      onMouseDown,
+      onMouseUp,
+      onKeyUp,
+      onKeyDown,
+      onMouseOver,
+      onMouseLeave
+    });
+  }
+  return _extends$5({}, htmlProps, {
+    ref,
+    role: "button",
+    "data-active": dataAttr(isPressed),
+    "aria-disabled": isDisabled2 ? "true" : void 0,
+    tabIndex: trulyDisabled ? void 0 : tabIndex,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    onKeyUp: handleKeyUp,
+    onKeyDown: handleKeyDown,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  });
+}
 var top = "top";
 var bottom = "bottom";
 var right = "right";
@@ -24054,7 +24757,7 @@ function getWindow(node2) {
   }
   return node2;
 }
-function isElement(node2) {
+function isElement2(node2) {
   var OwnElement = getWindow(node2).Element;
   return node2 instanceof OwnElement || node2 instanceof Element;
 }
@@ -24167,7 +24870,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
     scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
     scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
-  var _ref2 = isElement(element) ? getWindow(element) : window, visualViewport = _ref2.visualViewport;
+  var _ref2 = isElement2(element) ? getWindow(element) : window, visualViewport = _ref2.visualViewport;
   var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
   var x2 = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
   var y2 = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
@@ -24223,7 +24926,7 @@ function isTableElement(element) {
   return ["table", "td", "th"].indexOf(getNodeName(element)) >= 0;
 }
 function getDocumentElement(element) {
-  return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;
+  return ((isElement2(element) ? element.ownerDocument : element.document) || window.document).documentElement;
 }
 function getParentNode(element) {
   if (getNodeName(element) === "html") {
@@ -24631,17 +25334,17 @@ function getInnerBoundingClientRect(element, strategy) {
   return rect;
 }
 function getClientRectFromMixedType(element, clippingParent, strategy) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement2(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 }
 function getClippingParents(element) {
   var clippingParents2 = listScrollParents(getParentNode(element));
   var canEscapeClipping = ["absolute", "fixed"].indexOf(getComputedStyle$1(element).position) >= 0;
   var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
-  if (!isElement(clipperElement)) {
+  if (!isElement2(clipperElement)) {
     return [];
   }
   return clippingParents2.filter(function(clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
+    return isElement2(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
   });
 }
 function getClippingRect(element, boundary, rootBoundary, strategy) {
@@ -24723,7 +25426,7 @@ function detectOverflow(state2, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state2.rects.popper;
   var element = state2.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state2.elements.popper), boundary, rootBoundary, strategy);
+  var clippingClientRect = getClippingRect(isElement2(element) ? element : element.contextElement || getDocumentElement(state2.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state2.elements.reference);
   var popperOffsets2 = computeOffsets({
     reference: referenceClientRect,
@@ -25240,7 +25943,7 @@ function popperGenerator(generatorOptions) {
         cleanupModifierEffects();
         state2.options = Object.assign({}, defaultOptions, state2.options, options2);
         state2.scrollParents = {
-          reference: isElement(reference2) ? listScrollParents(reference2) : reference2.contextElement ? listScrollParents(reference2.contextElement) : [],
+          reference: isElement2(reference2) ? listScrollParents(reference2) : reference2.contextElement ? listScrollParents(reference2.contextElement) : [],
           popper: listScrollParents(popper2)
         };
         var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers2, state2.options.modifiers)));
@@ -25332,7 +26035,7 @@ var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyS
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
-function _objectWithoutPropertiesLoose$4(source, excluded) {
+function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -25346,8 +26049,8 @@ function _objectWithoutPropertiesLoose$4(source, excluded) {
   }
   return target;
 }
-function _extends$3() {
-  _extends$3 = Object.assign || function(target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -25358,7 +26061,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 var toVar = function toVar2(value, fallback) {
   return {
@@ -25410,7 +26113,7 @@ function getEventListenerOptions(value) {
   if (typeof value === "object") {
     eventListeners2 = {
       enabled: true,
-      options: _extends$3({}, defaultEventListeners, value)
+      options: _extends$4({}, defaultEventListeners, value)
     };
   } else {
     eventListeners2 = {
@@ -25582,7 +26285,7 @@ function getPopperPlacement(placement, dir) {
     return value;
   return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
 }
-var _excluded$4 = ["size", "shadowColor", "bg", "style"];
+var _excluded$5 = ["size", "shadowColor", "bg", "style"];
 function usePopper(props) {
   if (props === void 0) {
     props = {};
@@ -25600,9 +26303,9 @@ function usePopper(props) {
     cleanup.current == null ? void 0 : cleanup.current();
     instance.current = createPopper(reference2.current, popper2.current, {
       placement,
-      modifiers: [innerArrow, positionArrow, transformOrigin, _extends$3({}, matchWidth, {
+      modifiers: [innerArrow, positionArrow, transformOrigin, _extends$4({}, matchWidth, {
         enabled: !!matchWidth$1
-      }), _extends$3({
+      }), _extends$4({
         name: "eventListeners"
       }, getEventListenerOptions(eventListeners2)), {
         name: "arrow",
@@ -25652,7 +26355,7 @@ function usePopper(props) {
     if (ref === void 0) {
       ref = null;
     }
-    return _extends$3({}, props2, {
+    return _extends$4({}, props2, {
       ref: mergeRefs(referenceRef, ref)
     });
   }, [referenceRef]);
@@ -25667,9 +26370,9 @@ function usePopper(props) {
     if (ref === void 0) {
       ref = null;
     }
-    return _extends$3({}, props2, {
+    return _extends$4({}, props2, {
       ref: mergeRefs(popperRef, ref),
-      style: _extends$3({}, props2.style, {
+      style: _extends$4({}, props2.style, {
         position: strategy,
         minWidth: "max-content",
         inset: "0 auto auto 0"
@@ -25688,8 +26391,8 @@ function usePopper(props) {
     _props2.shadowColor;
     _props2.bg;
     _props2.style;
-    var rest = _objectWithoutPropertiesLoose$4(_props2, _excluded$4);
-    return _extends$3({}, rest, {
+    var rest = _objectWithoutPropertiesLoose$5(_props2, _excluded$5);
+    return _extends$4({}, rest, {
       ref,
       "data-popper-arrow": "",
       style: getArrowStyle2(props2)
@@ -25702,7 +26405,7 @@ function usePopper(props) {
     if (ref === void 0) {
       ref = null;
     }
-    return _extends$3({}, props2, {
+    return _extends$4({}, props2, {
       ref,
       "data-popper-arrow-inner": ""
     });
@@ -25727,7 +26430,7 @@ function usePopper(props) {
 }
 function getArrowStyle2(props) {
   var size2 = props.size, shadowColor = props.shadowColor, bg2 = props.bg, style = props.style;
-  var computedStyle = _extends$3({}, style, {
+  var computedStyle = _extends$4({}, style, {
     position: "absolute"
   });
   if (size2) {
@@ -25741,6 +26444,579 @@ function getArrowStyle2(props) {
   }
   return computedStyle;
 }
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$4(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var _excluded$1$2 = ["id", "closeOnSelect", "closeOnBlur", "autoSelect", "isLazy", "isOpen", "defaultIsOpen", "onClose", "onOpen", "placement", "lazyBehavior", "direction", "computePositionOnMount"], _excluded2$1$2 = ["onMouseEnter", "onMouseMove", "onMouseLeave", "onClick", "isDisabled", "isFocusable", "closeOnSelect", "type"], _excluded3$1 = ["type", "isChecked"];
+var _createDescendantCont = createDescendantContext(), MenuDescendantsProvider = _createDescendantCont[0], useMenuDescendantsContext = _createDescendantCont[1], useMenuDescendants = _createDescendantCont[2], useMenuDescendant = _createDescendantCont[3];
+var _createContext$2 = createContext({
+  strict: false,
+  name: "MenuContext"
+}), MenuProvider = _createContext$2[0], useMenuContext = _createContext$2[1];
+function useMenu(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  var _props = props, id2 = _props.id, _props$closeOnSelect = _props.closeOnSelect, closeOnSelect = _props$closeOnSelect === void 0 ? true : _props$closeOnSelect, _props$closeOnBlur = _props.closeOnBlur, closeOnBlur = _props$closeOnBlur === void 0 ? true : _props$closeOnBlur, _props$autoSelect = _props.autoSelect, autoSelect = _props$autoSelect === void 0 ? true : _props$autoSelect, isLazy = _props.isLazy, isOpenProp = _props.isOpen, defaultIsOpen = _props.defaultIsOpen, onCloseProp = _props.onClose, onOpenProp = _props.onOpen, _props$placement = _props.placement, placement = _props$placement === void 0 ? "bottom-start" : _props$placement, _props$lazyBehavior = _props.lazyBehavior, lazyBehavior = _props$lazyBehavior === void 0 ? "unmount" : _props$lazyBehavior, direction2 = _props.direction, _props$computePositio = _props.computePositionOnMount, computePositionOnMount = _props$computePositio === void 0 ? false : _props$computePositio, popperProps = _objectWithoutPropertiesLoose$4(_props, _excluded$1$2);
+  var menuRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var descendants = useMenuDescendants();
+  var focusMenu = React.useCallback(function() {
+    focus(menuRef.current, {
+      nextTick: true,
+      selectTextIfInput: false
+    });
+  }, []);
+  var focusFirstItem = React.useCallback(function() {
+    var id3 = setTimeout(function() {
+      var first = descendants.firstEnabled();
+      if (first)
+        setFocusedIndex(first.index);
+    });
+    timeoutIds.current.add(id3);
+  }, [descendants]);
+  var focusLastItem = React.useCallback(function() {
+    var id3 = setTimeout(function() {
+      var last = descendants.lastEnabled();
+      if (last)
+        setFocusedIndex(last.index);
+    });
+    timeoutIds.current.add(id3);
+  }, [descendants]);
+  var onOpenInternal = React.useCallback(function() {
+    onOpenProp == null ? void 0 : onOpenProp();
+    if (autoSelect) {
+      focusFirstItem();
+    } else {
+      focusMenu();
+    }
+  }, [autoSelect, focusFirstItem, focusMenu, onOpenProp]);
+  var _useDisclosure = useDisclosure({
+    isOpen: isOpenProp,
+    defaultIsOpen,
+    onClose: onCloseProp,
+    onOpen: onOpenInternal
+  }), isOpen = _useDisclosure.isOpen, onOpen = _useDisclosure.onOpen, onClose = _useDisclosure.onClose, onToggle = _useDisclosure.onToggle;
+  useOutsideClick({
+    enabled: isOpen && closeOnBlur,
+    ref: menuRef,
+    handler: function handler(event) {
+      var _buttonRef$current;
+      if (!((_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target))) {
+        onClose();
+      }
+    }
+  });
+  var popper2 = usePopper(_extends$3({}, popperProps, {
+    enabled: isOpen || computePositionOnMount,
+    placement,
+    direction: direction2
+  }));
+  var _React$useState = React.useState(-1), focusedIndex = _React$useState[0], setFocusedIndex = _React$useState[1];
+  useUpdateEffect(function() {
+    if (!isOpen) {
+      setFocusedIndex(-1);
+    }
+  }, [isOpen]);
+  useFocusOnHide(menuRef, {
+    focusRef: buttonRef,
+    visible: isOpen,
+    shouldFocus: true
+  });
+  var animationState = useAnimationState({
+    isOpen,
+    ref: menuRef
+  });
+  var _useIds = useIds(id2, "menu-button", "menu-list"), buttonId = _useIds[0], menuId = _useIds[1];
+  var openAndFocusMenu = React.useCallback(function() {
+    onOpen();
+    focusMenu();
+  }, [onOpen, focusMenu]);
+  var timeoutIds = React.useRef(/* @__PURE__ */ new Set([]));
+  useUnmountEffect$1(function() {
+    timeoutIds.current.forEach(function(id3) {
+      return clearTimeout(id3);
+    });
+    timeoutIds.current.clear();
+  });
+  var openAndFocusFirstItem = React.useCallback(function() {
+    onOpen();
+    focusFirstItem();
+  }, [focusFirstItem, onOpen]);
+  var openAndFocusLastItem = React.useCallback(function() {
+    onOpen();
+    focusLastItem();
+  }, [onOpen, focusLastItem]);
+  var refocus = React.useCallback(function() {
+    var _menuRef$current, _descendants$item;
+    var doc2 = getOwnerDocument(menuRef.current);
+    var hasFocusWithin = (_menuRef$current = menuRef.current) == null ? void 0 : _menuRef$current.contains(doc2.activeElement);
+    var shouldRefocus = isOpen && !hasFocusWithin;
+    if (!shouldRefocus)
+      return;
+    var node2 = (_descendants$item = descendants.item(focusedIndex)) == null ? void 0 : _descendants$item.node;
+    if (node2) {
+      focus(node2, {
+        selectTextIfInput: false,
+        preventScroll: false
+      });
+    }
+  }, [isOpen, focusedIndex, descendants]);
+  return {
+    openAndFocusMenu,
+    openAndFocusFirstItem,
+    openAndFocusLastItem,
+    onTransitionEnd: refocus,
+    unstable__animationState: animationState,
+    descendants,
+    popper: popper2,
+    buttonId,
+    menuId,
+    forceUpdate: popper2.forceUpdate,
+    orientation: "vertical",
+    isOpen,
+    onToggle,
+    onOpen,
+    onClose,
+    menuRef,
+    buttonRef,
+    focusedIndex,
+    closeOnSelect,
+    closeOnBlur,
+    autoSelect,
+    setFocusedIndex,
+    isLazy,
+    lazyBehavior
+  };
+}
+function useMenuButton(props, externalRef) {
+  if (props === void 0) {
+    props = {};
+  }
+  if (externalRef === void 0) {
+    externalRef = null;
+  }
+  var menu2 = useMenuContext();
+  var onToggle = menu2.onToggle, popper2 = menu2.popper, openAndFocusFirstItem = menu2.openAndFocusFirstItem, openAndFocusLastItem = menu2.openAndFocusLastItem;
+  var onKeyDown = React.useCallback(function(event) {
+    var eventKey = normalizeEventKey(event);
+    var keyMap = {
+      Enter: openAndFocusFirstItem,
+      ArrowDown: openAndFocusFirstItem,
+      ArrowUp: openAndFocusLastItem
+    };
+    var action = keyMap[eventKey];
+    if (action) {
+      event.preventDefault();
+      event.stopPropagation();
+      action(event);
+    }
+  }, [openAndFocusFirstItem, openAndFocusLastItem]);
+  return _extends$3({}, props, {
+    ref: mergeRefs(menu2.buttonRef, externalRef, popper2.referenceRef),
+    id: menu2.buttonId,
+    "data-active": dataAttr(menu2.isOpen),
+    "aria-expanded": menu2.isOpen,
+    "aria-haspopup": "menu",
+    "aria-controls": menu2.menuId,
+    onClick: callAllHandlers(props.onClick, onToggle),
+    onKeyDown: callAllHandlers(props.onKeyDown, onKeyDown)
+  });
+}
+function isTargetMenuItem(target) {
+  var _target$getAttribute;
+  return isHTMLElement$1(target) && !!((_target$getAttribute = target.getAttribute("role")) != null && _target$getAttribute.startsWith("menuitem"));
+}
+function useMenuList(props, ref) {
+  if (props === void 0) {
+    props = {};
+  }
+  if (ref === void 0) {
+    ref = null;
+  }
+  var menu2 = useMenuContext();
+  if (!menu2) {
+    throw new Error("useMenuContext: context is undefined. Seems you forgot to wrap component within <Menu>");
+  }
+  var focusedIndex = menu2.focusedIndex, setFocusedIndex = menu2.setFocusedIndex, menuRef = menu2.menuRef, isOpen = menu2.isOpen, onClose = menu2.onClose, menuId = menu2.menuId, isLazy = menu2.isLazy, lazyBehavior = menu2.lazyBehavior, animated = menu2.unstable__animationState;
+  var descendants = useMenuDescendantsContext();
+  var createTypeaheadHandler = useShortcut({
+    preventDefault: function preventDefault(event) {
+      return event.key !== " " && isTargetMenuItem(event.target);
+    }
+  });
+  var onKeyDown = React.useCallback(function(event) {
+    var eventKey = normalizeEventKey(event);
+    var keyMap = {
+      Tab: function Tab(event2) {
+        return event2.preventDefault();
+      },
+      Escape: onClose,
+      ArrowDown: function ArrowDown() {
+        var next2 = descendants.nextEnabled(focusedIndex);
+        if (next2)
+          setFocusedIndex(next2.index);
+      },
+      ArrowUp: function ArrowUp() {
+        var prev2 = descendants.prevEnabled(focusedIndex);
+        if (prev2)
+          setFocusedIndex(prev2.index);
+      }
+    };
+    var fn6 = keyMap[eventKey];
+    if (fn6) {
+      event.preventDefault();
+      fn6(event);
+      return;
+    }
+    var onTypeahead = createTypeaheadHandler(function(character2) {
+      var nextItem = getNextItemFromSearch(descendants.values(), character2, function(item) {
+        var _item$node$textConten, _item$node;
+        return (_item$node$textConten = item == null ? void 0 : (_item$node = item.node) == null ? void 0 : _item$node.textContent) != null ? _item$node$textConten : "";
+      }, descendants.item(focusedIndex));
+      if (nextItem) {
+        var index2 = descendants.indexOf(nextItem.node);
+        setFocusedIndex(index2);
+      }
+    });
+    if (isTargetMenuItem(event.target)) {
+      onTypeahead(event);
+    }
+  }, [descendants, focusedIndex, createTypeaheadHandler, onClose, setFocusedIndex]);
+  var hasBeenOpened = React.useRef(false);
+  if (isOpen) {
+    hasBeenOpened.current = true;
+  }
+  var shouldRenderChildren = determineLazyBehavior({
+    hasBeenSelected: hasBeenOpened.current,
+    isLazy,
+    lazyBehavior,
+    isSelected: animated.present
+  });
+  return _extends$3({}, props, {
+    ref: mergeRefs(menuRef, ref),
+    children: shouldRenderChildren ? props.children : null,
+    tabIndex: -1,
+    role: "menu",
+    id: menuId,
+    style: _extends$3({}, props.style, {
+      transformOrigin: "var(--popper-transform-origin)"
+    }),
+    "aria-orientation": "vertical",
+    onKeyDown: callAllHandlers(props.onKeyDown, onKeyDown)
+  });
+}
+function useMenuPositioner(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  var _useMenuContext = useMenuContext(), popper2 = _useMenuContext.popper, isOpen = _useMenuContext.isOpen;
+  return popper2.getPopperProps(_extends$3({}, props, {
+    style: _extends$3({
+      visibility: isOpen ? "visible" : "hidden"
+    }, props.style)
+  }));
+}
+function useMenuItem(props, externalRef) {
+  if (props === void 0) {
+    props = {};
+  }
+  if (externalRef === void 0) {
+    externalRef = null;
+  }
+  var _props2 = props, onMouseEnterProp = _props2.onMouseEnter, onMouseMoveProp = _props2.onMouseMove, onMouseLeaveProp = _props2.onMouseLeave, onClickProp = _props2.onClick, isDisabled2 = _props2.isDisabled, isFocusable2 = _props2.isFocusable, closeOnSelect = _props2.closeOnSelect, typeProp = _props2.type, htmlProps = _objectWithoutPropertiesLoose$4(_props2, _excluded2$1$2);
+  var menu2 = useMenuContext();
+  var setFocusedIndex = menu2.setFocusedIndex, focusedIndex = menu2.focusedIndex, menuCloseOnSelect = menu2.closeOnSelect, onClose = menu2.onClose, menuRef = menu2.menuRef, isOpen = menu2.isOpen, menuId = menu2.menuId;
+  var ref = React.useRef(null);
+  var id2 = menuId + "-menuitem-" + useId$1();
+  var _useMenuDescendant = useMenuDescendant({
+    disabled: isDisabled2 && !isFocusable2
+  }), index2 = _useMenuDescendant.index, register = _useMenuDescendant.register;
+  var onMouseEnter = React.useCallback(function(event) {
+    onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
+    if (isDisabled2)
+      return;
+    setFocusedIndex(index2);
+  }, [setFocusedIndex, index2, isDisabled2, onMouseEnterProp]);
+  var onMouseMove = React.useCallback(function(event) {
+    onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
+    if (ref.current && !isActiveElement(ref.current)) {
+      onMouseEnter(event);
+    }
+  }, [onMouseEnter, onMouseMoveProp]);
+  var onMouseLeave = React.useCallback(function(event) {
+    onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
+    if (isDisabled2)
+      return;
+    setFocusedIndex(-1);
+  }, [setFocusedIndex, isDisabled2, onMouseLeaveProp]);
+  var onClick = React.useCallback(function(event) {
+    onClickProp == null ? void 0 : onClickProp(event);
+    if (!isTargetMenuItem(event.currentTarget))
+      return;
+    if (closeOnSelect != null ? closeOnSelect : menuCloseOnSelect) {
+      onClose();
+    }
+  }, [onClose, onClickProp, menuCloseOnSelect, closeOnSelect]);
+  var isFocused = index2 === focusedIndex;
+  var trulyDisabled = isDisabled2 && !isFocusable2;
+  useUpdateEffect(function() {
+    if (!isOpen)
+      return;
+    if (isFocused && !trulyDisabled && ref.current) {
+      focus(ref.current, {
+        nextTick: true,
+        selectTextIfInput: false,
+        preventScroll: false
+      });
+    } else if (menuRef.current && !isActiveElement(menuRef.current)) {
+      focus(menuRef.current, {
+        preventScroll: false
+      });
+    }
+  }, [isFocused, trulyDisabled, menuRef, isOpen]);
+  var clickableProps = useClickable({
+    onClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    ref: mergeRefs(register, ref, externalRef),
+    isDisabled: isDisabled2,
+    isFocusable: isFocusable2
+  });
+  return _extends$3({}, htmlProps, clickableProps, {
+    type: typeProp != null ? typeProp : clickableProps.type,
+    id: id2,
+    role: "menuitem",
+    tabIndex: isFocused ? 0 : -1
+  });
+}
+function useMenuOption(props, ref) {
+  if (props === void 0) {
+    props = {};
+  }
+  if (ref === void 0) {
+    ref = null;
+  }
+  var _props3 = props, _props3$type = _props3.type, type = _props3$type === void 0 ? "radio" : _props3$type, isChecked = _props3.isChecked, rest = _objectWithoutPropertiesLoose$4(_props3, _excluded3$1);
+  var ownProps = useMenuItem(rest, ref);
+  return _extends$3({}, ownProps, {
+    role: "menuitem" + type,
+    "aria-checked": isChecked
+  });
+}
+var _excluded$4 = ["descendants"], _excluded2$2 = ["children", "as"], _excluded3$2 = ["rootProps"], _excluded4$1 = ["type"], _excluded6$1 = ["icon", "iconSpacing"], _excluded8 = ["title", "children", "className"], _excluded9 = ["className", "children"];
+var Menu = function Menu2(props) {
+  var children = props.children;
+  var styles2 = useMultiStyleConfig("Menu", props);
+  var ownProps = omitThemingProps(props);
+  var _useTheme = useTheme(), direction2 = _useTheme.direction;
+  var _useMenu = useMenu(_extends$3({}, ownProps, {
+    direction: direction2
+  })), descendants = _useMenu.descendants, ctx = _objectWithoutPropertiesLoose$4(_useMenu, _excluded$4);
+  var context = React.useMemo(function() {
+    return ctx;
+  }, [ctx]);
+  var isOpen = context.isOpen, onClose = context.onClose, forceUpdate = context.forceUpdate;
+  return /* @__PURE__ */ React.createElement(MenuDescendantsProvider, {
+    value: descendants
+  }, /* @__PURE__ */ React.createElement(MenuProvider, {
+    value: context
+  }, /* @__PURE__ */ React.createElement(StylesProvider$1, {
+    value: styles2
+  }, runIfFn(children, {
+    isOpen,
+    onClose,
+    forceUpdate
+  }))));
+};
+var StyledMenuButton = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var styles2 = useStyles$1();
+  return /* @__PURE__ */ React.createElement(chakra.button, _extends$3({
+    ref
+  }, props, {
+    __css: _extends$3({
+      display: "inline-flex",
+      appearance: "none",
+      alignItems: "center",
+      outline: 0
+    }, styles2.button)
+  }));
+});
+var MenuButton = /* @__PURE__ */ forwardRef(function(props, ref) {
+  props.children;
+  var As = props.as, rest = _objectWithoutPropertiesLoose$4(props, _excluded2$2);
+  var buttonProps = useMenuButton(rest, ref);
+  var Element2 = As || StyledMenuButton;
+  return /* @__PURE__ */ React.createElement(Element2, _extends$3({}, buttonProps, {
+    className: cx("chakra-menu__menu-button", props.className)
+  }), /* @__PURE__ */ React.createElement(chakra.span, {
+    __css: {
+      pointerEvents: "none",
+      flex: "1 1 auto",
+      minW: 0
+    }
+  }, props.children));
+});
+var motionVariants = {
+  enter: {
+    visibility: "visible",
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  exit: {
+    transitionEnd: {
+      visibility: "hidden"
+    },
+    opacity: 0,
+    scale: 0.8,
+    transition: {
+      duration: 0.1,
+      easings: "easeOut"
+    }
+  }
+};
+function __motion(el) {
+  var m2 = motion;
+  if ("custom" in m2 && typeof m2.custom === "function") {
+    return m2.custom(el);
+  }
+  return m2(el);
+}
+var MenuTransition = __motion(chakra.div);
+var MenuList = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var _props$zIndex, _styles$list;
+  var rootProps = props.rootProps, rest = _objectWithoutPropertiesLoose$4(props, _excluded3$2);
+  var _useMenuContext = useMenuContext(), isOpen = _useMenuContext.isOpen, onTransitionEnd = _useMenuContext.onTransitionEnd, animated = _useMenuContext.unstable__animationState;
+  var ownProps = useMenuList(rest, ref);
+  var positionerProps = useMenuPositioner(rootProps);
+  var styles2 = useStyles$1();
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$3({}, positionerProps, {
+    __css: {
+      zIndex: (_props$zIndex = props.zIndex) != null ? _props$zIndex : (_styles$list = styles2.list) == null ? void 0 : _styles$list.zIndex
+    }
+  }), /* @__PURE__ */ React.createElement(MenuTransition, _extends$3({}, ownProps, {
+    onUpdate: onTransitionEnd,
+    onAnimationComplete: callAll(animated.onComplete, ownProps.onAnimationComplete),
+    className: cx("chakra-menu__menu-list", ownProps.className),
+    variants: motionVariants,
+    initial: false,
+    animate: isOpen ? "enter" : "exit",
+    __css: _extends$3({
+      outline: 0
+    }, styles2.list)
+  })));
+});
+var StyledMenuItem = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var type = props.type, rest = _objectWithoutPropertiesLoose$4(props, _excluded4$1);
+  var styles2 = useStyles$1();
+  var btnType = rest.as || type ? type != null ? type : void 0 : "button";
+  var buttonStyles = React.useMemo(function() {
+    return _extends$3({
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0
+    }, styles2.item);
+  }, [styles2.item]);
+  return /* @__PURE__ */ React.createElement(chakra.button, _extends$3({
+    ref,
+    type: btnType
+  }, rest, {
+    __css: buttonStyles
+  }));
+});
+var CheckIcon = function CheckIcon2(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$3({
+    viewBox: "0 0 14 14",
+    width: "1em",
+    height: "1em"
+  }, props), /* @__PURE__ */ React.createElement("polygon", {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }));
+};
+var MenuItemOption = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var icon = props.icon, _props$iconSpacing2 = props.iconSpacing, iconSpacing2 = _props$iconSpacing2 === void 0 ? "0.75rem" : _props$iconSpacing2, rest = _objectWithoutPropertiesLoose$4(props, _excluded6$1);
+  var optionProps = useMenuOption(rest, ref);
+  return /* @__PURE__ */ React.createElement(StyledMenuItem, _extends$3({}, optionProps, {
+    className: cx("chakra-menu__menuitem-option", rest.className)
+  }), icon !== null && /* @__PURE__ */ React.createElement(MenuIcon, {
+    fontSize: "0.8em",
+    marginEnd: iconSpacing2,
+    opacity: props.isChecked ? 1 : 0
+  }, icon || /* @__PURE__ */ React.createElement(CheckIcon, null)), /* @__PURE__ */ React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }, optionProps.children));
+});
+MenuItemOption.id = "MenuItemOption";
+var MenuGroup = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var title = props.title, children = props.children, className = props.className, rest = _objectWithoutPropertiesLoose$4(props, _excluded8);
+  var _className = cx("chakra-menu__group__title", className);
+  var styles2 = useStyles$1();
+  return /* @__PURE__ */ React.createElement("div", {
+    ref,
+    className: "chakra-menu__group",
+    role: "group"
+  }, title && /* @__PURE__ */ React.createElement(chakra.p, _extends$3({
+    className: _className
+  }, rest, {
+    __css: styles2.groupTitle
+  }), title), children);
+});
+var MenuIcon = function MenuIcon2(props) {
+  var className = props.className, children = props.children, rest = _objectWithoutPropertiesLoose$4(props, _excluded9);
+  var child = React.Children.only(children);
+  var clone = /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, {
+    focusable: "false",
+    "aria-hidden": true,
+    className: cx("chakra-menu__icon", child.props.className)
+  }) : null;
+  var _className = cx("chakra-menu__icon-wrapper", className);
+  return /* @__PURE__ */ React.createElement(chakra.span, _extends$3({
+    className: _className
+  }, rest, {
+    __css: {
+      flexShrink: 0
+    }
+  }), clone);
+};
 function _objectWithoutPropertiesLoose$3(r2, e2) {
   if (null == r2)
     return {};
@@ -26047,7 +27323,7 @@ var FocusLock$2 = /* @__PURE__ */ React.forwardRef(function FocusLockUI(props, p
       setObserved(newObserved);
     }
   }, []);
-  var lockProps = _extends$h((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled2 && "disabled", _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
+  var lockProps = _extends$k((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled2 && "disabled", _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== "tail";
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
@@ -26077,7 +27353,7 @@ var FocusLock$2 = /* @__PURE__ */ React.forwardRef(function FocusLockUI(props, p
     onActivation,
     onDeactivation,
     returnFocus
-  }), /* @__PURE__ */ React.createElement(Container3, _extends$h({
+  }), /* @__PURE__ */ React.createElement(Container3, _extends$k({
     ref: mergedRef
   }, lockProps, {
     className,
@@ -26790,7 +28066,7 @@ mediumEffect.assignMedium(function(cb2) {
 });
 var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
 var FocusLockCombination = /* @__PURE__ */ React.forwardRef(function FocusLockUICombination(props, ref) {
-  return /* @__PURE__ */ React.createElement(FocusLockUI2, _extends$h({
+  return /* @__PURE__ */ React.createElement(FocusLockUI2, _extends$k({
     sideCar: FocusTrap,
     ref
   }, props));
@@ -30030,7 +31306,7 @@ function UserWayCookie() {
   });
 }
 const STUDENT = 4;
-function Header() {
+function Header$1() {
   var _a;
   const {
     background: background2,
@@ -30111,7 +31387,7 @@ function Header() {
     })]
   });
 }
-Header.displayName = "Header";
+Header$1.displayName = "Header";
 function DateStatus({
   date
 }) {
@@ -31372,7 +32648,7 @@ function BoxTraditional({
             children: [!data.hasFinanzeFreezed && isCourseActive((_e = (_d = data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
               href: (_g = data.action) == null ? void 0 : _g.href,
               isExternal: (_h = data.action) == null ? void 0 : _h.targetBlank
-            }), /* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(Section, {})]
+            }), /* @__PURE__ */ jsx(Header$1, {}), /* @__PURE__ */ jsx(Section, {})]
           }), /* @__PURE__ */ jsx(Footer, {
             modalPaymentText
           })]
@@ -32200,7 +33476,7 @@ function ModalAlert({
   });
 }
 ModalAlert.displayName = "ModalAlert";
-const Calendar = ({
+const Calendar$1 = ({
   color: color2 = "white"
 }) => {
   return /* @__PURE__ */ jsxs(Icon, {
@@ -32233,7 +33509,7 @@ const Calendar = ({
     })]
   });
 };
-const Clock = ({
+const Clock$1 = ({
   color: color2 = "white"
 }) => {
   return /* @__PURE__ */ jsx(Icon, {
@@ -32310,7 +33586,7 @@ const LargeBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar, {
+              children: [/* @__PURE__ */ jsx(Calendar$1, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
@@ -32322,7 +33598,7 @@ const LargeBox = ({
                 m: "0px",
                 p: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock, {
+              }), /* @__PURE__ */ jsx(Clock$1, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
@@ -32411,14 +33687,14 @@ const SmallBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
+              children: [/* @__PURE__ */ jsx(Calendar$1, {}), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
                 m: "0px",
                 children: startDate
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
+              }), /* @__PURE__ */ jsx(Clock$1, {}), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: startTime
               })]
@@ -33633,5 +34909,883 @@ const Resources = ({
     })
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Eventos, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+const millisecondsInMinute = 6e4;
+const millisecondsInHour = 36e5;
+const constructFromSymbol = Symbol.for("constructDateFrom");
+function constructFrom(date, value) {
+  if (typeof date === "function")
+    return date(value);
+  if (date && typeof date === "object" && constructFromSymbol in date)
+    return date[constructFromSymbol](value);
+  if (date instanceof Date)
+    return new date.constructor(value);
+  return new Date(value);
+}
+function toDate(argument, context) {
+  return constructFrom(context || argument, argument);
+}
+function addDays(date, amount, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  if (isNaN(amount))
+    return constructFrom((options == null ? void 0 : options.in) || date, NaN);
+  if (!amount)
+    return _date;
+  _date.setDate(_date.getDate() + amount);
+  return _date;
+}
+function normalizeDates(context, ...dates) {
+  const normalize2 = constructFrom.bind(
+    null,
+    context || dates.find((date) => typeof date === "object")
+  );
+  return dates.map(normalize2);
+}
+function startOfDay(date, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function isSameDay(laterDate, earlierDate, options) {
+  const [dateLeft_, dateRight_] = normalizeDates(
+    options == null ? void 0 : options.in,
+    laterDate,
+    earlierDate
+  );
+  return +startOfDay(dateLeft_) === +startOfDay(dateRight_);
+}
+function isAfter(date, dateToCompare) {
+  return +toDate(date) > +toDate(dateToCompare);
+}
+function parseISO(argument, options) {
+  var _a;
+  const invalidDate = () => constructFrom(options == null ? void 0 : options.in, NaN);
+  const additionalDigits = (_a = options == null ? void 0 : options.additionalDigits) != null ? _a : 2;
+  const dateStrings = splitDateString(argument);
+  let date;
+  if (dateStrings.date) {
+    const parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(+date))
+    return invalidDate();
+  const timestamp = +date;
+  let time = 0;
+  let offset2;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time))
+      return invalidDate();
+  }
+  if (dateStrings.timezone) {
+    offset2 = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset2))
+      return invalidDate();
+  } else {
+    const tmpDate = new Date(timestamp + time);
+    const result = toDate(0, options == null ? void 0 : options.in);
+    result.setFullYear(
+      tmpDate.getUTCFullYear(),
+      tmpDate.getUTCMonth(),
+      tmpDate.getUTCDate()
+    );
+    result.setHours(
+      tmpDate.getUTCHours(),
+      tmpDate.getUTCMinutes(),
+      tmpDate.getUTCSeconds(),
+      tmpDate.getUTCMilliseconds()
+    );
+    return result;
+  }
+  return toDate(timestamp + time + offset2, options == null ? void 0 : options.in);
+}
+const patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+const dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+const timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+const timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  const dateStrings = {};
+  const array = dateString.split(patterns.dateTimeDelimiter);
+  let timeString;
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(
+        dateStrings.date.length,
+        dateString.length
+      );
+    }
+  }
+  if (timeString) {
+    const token2 = patterns.timezone.exec(timeString);
+    if (token2) {
+      dateStrings.time = timeString.replace(token2[1], "");
+      dateStrings.timezone = token2[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  const regex = new RegExp(
+    "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
+  );
+  const captures = dateString.match(regex);
+  if (!captures)
+    return { year: NaN, restDateString: "" };
+  const year = captures[1] ? parseInt(captures[1]) : null;
+  const century = captures[2] ? parseInt(captures[2]) : null;
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  if (year === null)
+    return new Date(NaN);
+  const captures = dateString.match(dateRegex);
+  if (!captures)
+    return new Date(NaN);
+  const isWeekDate = !!captures[4];
+  const dayOfYear = parseDateUnit(captures[1]);
+  const month = parseDateUnit(captures[2]) - 1;
+  const day = parseDateUnit(captures[3]);
+  const week = parseDateUnit(captures[4]);
+  const dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    const date = new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  const captures = timeString.match(timeRegex);
+  if (!captures)
+    return NaN;
+  const hours = parseTimeUnit(captures[1]);
+  const minutes = parseTimeUnit(captures[2]);
+  const seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1e3;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(",", ".")) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === "Z")
+    return 0;
+  const captures = timezoneString.match(timezoneRegex);
+  if (!captures)
+    return 0;
+  const sign = captures[1] === "+" ? -1 : 1;
+  const hours = parseInt(captures[2]);
+  const minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  const date = new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  const fourthOfJanuaryDay = date.getUTCDay() || 7;
+  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+const daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+const STORAGE_TODAY_EVENT = "todayEvents";
+const STORAGE_SEEN_EVENT = "seenEvents";
+const STORAGE_HAS_NEW = "hasNewEvents";
+const useParseEvents = (events, now) => {
+  const [todayEvents, setTodayEvents] = useState([]);
+  const [tomorrowEvents, setTomorrowEvents] = useState([]);
+  const [nextEvents, setNextEvents] = useState([]);
+  const [hasNew, setHasNew] = useState(false);
+  useEffect(() => {
+    var _a, _b;
+    const parseNow = parseISO(now);
+    const today = startOfDay(parseNow);
+    const tomorrow = addDays(today, 1);
+    const storedTodayEvent = JSON.parse((_a = localStorage.getItem(STORAGE_TODAY_EVENT)) != null ? _a : "[]");
+    const storedSeenEvent = JSON.parse((_b = localStorage.getItem(STORAGE_SEEN_EVENT)) != null ? _b : "[]");
+    let newEvents = false;
+    const todayList = [];
+    const tomorrowList = [];
+    const nextList = [];
+    events.forEach((event) => {
+      const eventStart = parseISO(event.start);
+      if (isSameDay(eventStart, today)) {
+        const seen = storedSeenEvent.includes(event.id);
+        if (!seen) {
+          newEvents = true;
+          if (!storedTodayEvent.includes(event.id)) {
+            storedTodayEvent.push(event.id);
+          }
+        }
+        todayList.push({ ...event, isNew: !seen });
+      } else if (isSameDay(eventStart, tomorrow)) {
+        tomorrowList.push(event);
+      } else if (isAfter(eventStart, today)) {
+        nextList.push(event);
+      }
+    });
+    setTodayEvents(todayList);
+    setTomorrowEvents(tomorrowList);
+    let next2 = [...nextList];
+    if (nextList.length > 5) {
+      next2 = next2.slice(0, 5);
+    }
+    setNextEvents(next2);
+    setHasNew(newEvents);
+    localStorage.setItem(STORAGE_TODAY_EVENT, JSON.stringify(storedTodayEvent));
+    localStorage.setItem(STORAGE_HAS_NEW, JSON.stringify(newEvents));
+  }, [events, now]);
+  const closeAndMarkSeen = () => {
+    var _a;
+    const storedSeenEvent = JSON.parse((_a = localStorage.getItem(STORAGE_SEEN_EVENT)) != null ? _a : "[]");
+    const updatedSeenEvents = Array.from(
+      /* @__PURE__ */ new Set([...storedSeenEvent, ...todayEvents.map((e2) => e2.id)])
+    );
+    localStorage.setItem(STORAGE_SEEN_EVENT, JSON.stringify(updatedSeenEvents));
+    localStorage.setItem(STORAGE_HAS_NEW, JSON.stringify(false));
+    setTimeout(() => {
+      setTodayEvents(todayEvents.map((el) => ({ ...el, isNew: false })));
+    }, 300);
+    setHasNew(false);
+  };
+  const empty = false;
+  return {
+    today: todayEvents,
+    tomorrow: tomorrowEvents,
+    next: nextEvents,
+    hasNew,
+    closeAndMarkSeen,
+    empty
+  };
+};
+const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: 16,
+  height: 16,
+  fill: "none",
+  children: [/* @__PURE__ */ jsx("path", {
+    fill: "#fff",
+    d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1 12H2V5h12v9Z"
+  }), /* @__PURE__ */ jsx("path", {
+    fill: "#fff",
+    d: "M6 7H4v2h2V7ZM9 7H7v2h2V7ZM6 10H4v2h2v-2ZM9 10H7v2h2v-2ZM12 7h-2v2h2V7ZM12 10h-2v2h2v-2Z"
+  })]
+});
+const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 8,
+  height: 9,
+  fill: "none",
+  className: "notification",
+  children: /* @__PURE__ */ jsx("circle", {
+    cx: 4,
+    cy: 4.5,
+    r: 4,
+    fill: "#FF7A14"
+  })
+});
+const GoToCalendar = ({
+  hasNew,
+  text,
+  tooltipDisabled
+}) => {
+  return /* @__PURE__ */ jsx(NewTooltip, {
+    label: text != null ? text : "Calendario",
+    m: "2px 0 0 0",
+    isDisabled: tooltipDisabled,
+    children: /* @__PURE__ */ jsxs(MenuButton, {
+      background: "#60798E",
+      border: "1px solid transparent",
+      borderRadius: "100%",
+      height: "30px",
+      width: "30px",
+      position: "relative",
+      sx: {
+        ">span": {
+          justifyItems: "center",
+          alignContent: "center"
+        },
+        ".notification": {
+          position: "absolute",
+          top: "-1px",
+          right: "-1px"
+        }
+      },
+      children: [/* @__PURE__ */ jsx(CalendarButtonIcon, {}), hasNew && /* @__PURE__ */ jsx(NotificationIcon, {})]
+    })
+  });
+};
+const Header = ({
+  text,
+  isMobile
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Box, {
+      as: "header",
+      bg: "#5C5C5C",
+      borderRadius: isMobile ? "none" : "10px 10px 0 0",
+      color: "#FFFFFF",
+      fontSize: "14px",
+      fontWeight: "500",
+      lineHeight: "normal",
+      padding: "16px",
+      position: "absolute",
+      width: isMobile ? "100vw" : "100%",
+      top: 0,
+      zIndex: "1",
+      children: text != null ? text : "Pr\xF3ximas fechas importantes de tus cursos"
+    }), /* @__PURE__ */ jsx(Box, {
+      className: "arrow",
+      "aria-hidden": true,
+      borderBottom: "12px solid #5C5C5C",
+      borderLeft: "14px solid transparent",
+      borderRight: "14px solid transparent",
+      display: isMobile ? "none" : "block",
+      height: "0",
+      position: "fixed",
+      right: isMobile ? "71px" : "-437px",
+      top: isMobile ? "54px" : "-9px",
+      width: "0"
+    })]
+  });
+};
+const NoEventsIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: 197,
+  height: 197,
+  fill: "none",
+  children: [/* @__PURE__ */ jsxs("g", {
+    clipPath: "url(#a)",
+    children: [/* @__PURE__ */ jsx("path", {
+      fill: "#F4F4F4",
+      d: "M98.5 197c54.4 0 98.5-44.1 98.5-98.5S152.9 0 98.5 0 0 44.1 0 98.5 44.1 197 98.5 197Z"
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 74,
+      height: 29,
+      x: 106,
+      y: 12,
+      fill: "#FF554D",
+      rx: 5
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 40,
+      height: 6,
+      x: 125,
+      y: 24,
+      fill: "#08044F",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 6,
+      height: 6,
+      x: 114,
+      y: 24,
+      fill: "#08044F",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 106,
+      height: 29,
+      x: 11,
+      y: 159,
+      fill: "#1EBDAF",
+      rx: 5
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 67,
+      height: 6,
+      x: 21,
+      y: 170,
+      fill: "#08044F",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 6,
+      height: 6,
+      x: 99,
+      y: 170,
+      fill: "#08044F",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 123,
+      height: 82,
+      x: 37,
+      y: 66,
+      fill: "#0189FF",
+      rx: 5
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 131,
+      y: 93,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 131,
+      y: 110,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("path", {
+      stroke: "#FFBC27",
+      strokeLinecap: "round",
+      strokeWidth: 13,
+      d: "M68.5 56.5v19M132.5 56.5v19"
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 50,
+      y: 93,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 50,
+      y: 110,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 50,
+      y: 127,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 77,
+      y: 93,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 104,
+      y: 93,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 104,
+      y: 110,
+      fill: "#F4F4F4",
+      rx: 3
+    }), /* @__PURE__ */ jsx("rect", {
+      width: 16,
+      height: 6,
+      x: 104,
+      y: 127,
+      fill: "#F4F4F4",
+      rx: 3
+    })]
+  }), /* @__PURE__ */ jsx("defs", {
+    children: /* @__PURE__ */ jsx("clipPath", {
+      id: "a",
+      children: /* @__PURE__ */ jsx("path", {
+        fill: "#fff",
+        d: "M0 0h197v197H0z"
+      })
+    })
+  })]
+});
+const Empty = ({
+  text
+}) => {
+  return /* @__PURE__ */ jsxs(Box, {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    padding: "104px 0px 64px",
+    children: [/* @__PURE__ */ jsx(NoEventsIcon, {}), /* @__PURE__ */ jsx(Box, {
+      fontSize: "20px",
+      fontWeight: 700,
+      color: "#2F2F2F",
+      children: text != null ? text : "A\xFAn no tienes eventos en tu calendario"
+    })]
+  });
+};
+function Calendar(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    title: "Calendar",
+    children: /* @__PURE__ */ jsxs("g", {
+      fill: "#B0CFE0",
+      children: [/* @__PURE__ */ jsx("path", {
+        fill: "#B0CFE0",
+        d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-1 12H2V5h12v9z"
+      }), /* @__PURE__ */ jsx("path", {
+        d: "M4 7h2v2H4zM7 7h2v2H7zM4 10h2v2H4zM7 10h2v2H7zM10 7h2v2h-2zM10 10h2v2h-2z"
+      })]
+    })
+  });
+}
+Calendar.displayName = "Calendar";
+function Clock(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    title: "Clock",
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "#B0CFE0",
+      d: "M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
+    })
+  });
+}
+Clock.displayName = "Clock";
+const EventsList = ({
+  hasNotification,
+  isDropdown,
+  name,
+  courseName,
+  color: color2,
+  text,
+  date,
+  hours
+}) => {
+  const border2 = "1px solid #E8E8E8";
+  const bgColor = color2 || "#82504A";
+  return /* @__PURE__ */ jsx(Box, {
+    className: "eventsList",
+    borderTop: border2,
+    padding: "16px 24px",
+    children: /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      children: [/* @__PURE__ */ jsxs(Box, {
+        lineHeight: "21px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: "16px",
+        children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
+      }), /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        lineHeight: "19px",
+        fontSize: "14px",
+        sx: {
+          svg: {
+            marginRight: "4px"
+          },
+          span: {
+            verticalAlign: "middle"
+          }
+        },
+        children: [/* @__PURE__ */ jsxs(Box, {
+          paddingRight: "8px",
+          borderRight: border2,
+          children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
+            children: date
+          })]
+        }), /* @__PURE__ */ jsxs(Box, {
+          paddingLeft: "8px",
+          children: [/* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx("span", {
+            children: hours
+          })]
+        })]
+      }), isDropdown && /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        lineHeight: "19px",
+        children: [/* @__PURE__ */ jsx(Box, {
+          h: "10px",
+          w: "10px",
+          bg: bgColor,
+          borderRadius: "50%",
+          display: "block",
+          alignSelf: "flex-start",
+          mt: "4px"
+        }), /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          color: "#808080",
+          fontSize: "14px",
+          children: [/* @__PURE__ */ jsxs("strong", {
+            children: [text != null ? text : "Curso", ":"]
+          }), " ", courseName]
+        })]
+      })]
+    })
+  });
+};
+const Events = ({
+  events,
+  text,
+  redirecToCalendar,
+  isMobile,
+  colors: colors2
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    today,
+    tomorrow,
+    next: next2
+  } = events;
+  return /* @__PURE__ */ jsxs(Box, {
+    borderRadius: "10px",
+    color: "#1C1818",
+    h: isMobile ? "auto" : "552px",
+    overflowY: "scroll",
+    pb: "32px",
+    sx: {
+      ".calendar-events-group": {
+        borderBottom: "1px solid #E8E8E8"
+      }
+    },
+    children: [redirecToCalendar && /* @__PURE__ */ jsx(Box, {
+      sx: {
+        button: {
+          p: "8px ",
+          fontSize: "14px",
+          lineHeight: "14px",
+          minW: "fit-content",
+          minH: "fit-content"
+        }
+      },
+      children: /* @__PURE__ */ jsx(BtnSecondary, {
+        onClick: redirecToCalendar,
+        m: "72px 0 0 24px",
+        children: (_a = text == null ? void 0 : text.buttonCalendar) != null ? _a : "Ir a Mi Calendario"
+      })
+    }), /* @__PURE__ */ jsx(EventsGroup, {
+      colors: colors2,
+      text: text.course,
+      title: (_c = (_b = text == null ? void 0 : text.events) == null ? void 0 : _b.today) != null ? _c : "Hoy",
+      events: today
+    }), /* @__PURE__ */ jsx(EventsGroup, {
+      colors: colors2,
+      text: text.course,
+      title: (_e = (_d = text == null ? void 0 : text.events) == null ? void 0 : _d.tomorrow) != null ? _e : "Ma\xF1ana",
+      events: tomorrow
+    }), /* @__PURE__ */ jsx(EventsGroup, {
+      colors: colors2,
+      text: text.course,
+      title: (_g = (_f = text == null ? void 0 : text.events) == null ? void 0 : _f.next) != null ? _g : "Pr\xF3ximos",
+      events: next2
+    })]
+  });
+};
+const EventsGroup = ({
+  title,
+  events,
+  text,
+  colors: colors2
+}) => {
+  if (!events || events && events.length === 0)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Box, {
+    className: "calendar-events-group",
+    _focus: {
+      background: "none !important",
+      border: "1px solid #0189FF"
+    },
+    sx: {
+      ".chakra-menu__menuitem > div": {
+        w: "100%"
+      }
+    },
+    children: /* @__PURE__ */ jsx(MenuGroup, {
+      title,
+      children: events.map((event) => {
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            bg: "#FFFFFF",
+            border: "none",
+            cursor: "default",
+            padding: "0",
+            _hover: {
+              boxShadow: "none !important",
+              cursor: "default !important",
+              bg: "none !important"
+            },
+            _focus: {
+              background: "none !important",
+              boxShadow: "none !important"
+            },
+            children: /* @__PURE__ */ jsx(EventsList, {
+              name: event.associated_resource.name || "",
+              courseName: event.course.name,
+              date: event.formatedDate.start,
+              hours: event.formatedDate.hours,
+              color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]),
+              text,
+              hasNotification: event.isNew,
+              isDropdown: true
+            }, event.id)
+          },
+          event.id
+        );
+      })
+    })
+  });
+};
+const CalendarDropdownContainer = ({
+  events,
+  loading,
+  text,
+  now,
+  redirectToCalendar,
+  courseColors: colors2
+}) => {
+  const [isMobile] = useMediaQuery("(max-width: 577px)");
+  const {
+    closeAndMarkSeen,
+    empty,
+    hasNew,
+    ...all
+  } = useParseEvents(events, now);
+  const [isTooltipDisabled, setTooltipDisabled] = useState(false);
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    if (isMenuOpen) {
+      setTooltipDisabled(true);
+    } else {
+      const timer = setTimeout(() => setTooltipDisabled(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isMenuOpen]);
+  const onClose = () => {
+    closeAndMarkSeen();
+    setMenuOpen(false);
+  };
+  return /* @__PURE__ */ jsx(Box, {
+    zIndex: 4,
+    className: "calendarDropdown",
+    mr: "24px",
+    position: "relative",
+    sx: {
+      ">div": {
+        position: isMobile ? "fixed !important" : "absolute",
+        left: isMobile ? "0 !important" : "auto",
+        top: isMobile ? "62px !important" : "auto",
+        transform: isMobile ? "none !important" : "translate3d(-409px, 38px, 0px) !important"
+      },
+      ".chakra-menu__menu-list": {
+        padding: "0",
+        position: "absolute",
+        width: isMobile ? "100vw" : "500px",
+        maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
+        overflowY: isMobile ? "auto" : "hidden",
+        borderRadius: isMobile ? "0" : "10px",
+        boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
+        animation: "none !important",
+        transition: "none !important",
+        transform: "none !important",
+        opacity: "1 !important"
+      },
+      ".chakra-menu__group__title": {
+        fontSize: "18px",
+        lineHeight: "31px",
+        margin: "32px 0 0",
+        padding: "0 0 8px 24px"
+      },
+      ".react-ripples": {
+        width: "inherit"
+      }
+    },
+    children: /* @__PURE__ */ jsx(Menu, {
+      autoSelect: false,
+      onOpen: () => setMenuOpen(true),
+      onClose,
+      children: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(GoToCalendar, {
+          hasNew: hasNew != null ? hasNew : false,
+          text: (text == null ? void 0 : text.tooltip) || "Ir a Mi Calendario",
+          tooltipDisabled: isTooltipDisabled
+        }), /* @__PURE__ */ jsxs(MenuList, {
+          children: [/* @__PURE__ */ jsx(Header, {
+            text: (text == null ? void 0 : text.header) || "Pr\xF3ximas fechas importantes de tus cursos",
+            isMobile
+          }), loading ? /* @__PURE__ */ jsx(Loading, {
+            text: (text == null ? void 0 : text.loading) || "Cargando"
+          }) : events.length === 0 || empty ? /* @__PURE__ */ jsx(Empty, {
+            text: (text == null ? void 0 : text.empty) || "A\xFAn no tienes eventos en tu calendario"
+          }) : /* @__PURE__ */ jsx(Events, {
+            colors: colors2,
+            events: all,
+            text,
+            redirecToCalendar: redirectToCalendar,
+            isMobile
+          })]
+        })]
+      })
+    })
+  });
+};
+const Loading = ({
+  text
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    children: text != null ? text : "Loading..."
+  });
+};
+const CalendarDropdown = ({
+  redirectToCalendar,
+  text,
+  courseColors,
+  now,
+  events,
+  loading
+}) => {
+  const date = new Date(now);
+  const isoDate = date.toISOString();
+  return /* @__PURE__ */ jsx(CalendarDropdownContainer, {
+    events,
+    loading,
+    now: isoDate,
+    courseColors,
+    redirectToCalendar,
+    text
+  });
+};
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map