@eclass/ui-kit 1.5.6 → 1.6.0

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

@@ -574,7 +574,7 @@ function prefixer(element, index, children, callback) {
   }
 }
 var weakMemoize = function weakMemoize2(func) {
-  var cache = new WeakMap();
+  var cache = /* @__PURE__ */ new WeakMap();
   return function(arg) {
     if (cache.has(arg)) {
       return cache.get(arg);
@@ -585,7 +585,7 @@ var weakMemoize = function weakMemoize2(func) {
   };
 };
 function memoize$1(fn) {
-  var cache = Object.create(null);
+  var cache = /* @__PURE__ */ Object.create(null);
   return function(arg) {
     if (cache[arg] === void 0)
       cache[arg] = fn(arg);
@@ -739,8 +739,8 @@ var createCache = function createCache2(options) {
   cache.sheet.hydrate(nodesToHydrate);
   return cache;
 };
-function _extends$8() {
-  _extends$8 = Object.assign || function(target) {
+function _extends$a() {
+  _extends$a = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -751,7 +751,7 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var reactIs$1 = { exports: {} };
@@ -886,11 +886,15 @@ function getRegisteredStyles(registered, registeredStyles, classNames2) {
   });
   return rawClassName;
 }
-var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
+var registerStyles = function registerStyles2(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
   if ((isStringTag === false || isBrowser$1 === false) && cache.registered[className] === void 0) {
     cache.registered[className] = serialized.styles;
   }
+};
+var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
   if (cache.inserted[serialized.name] === void 0) {
     var current = serialized;
     do {
@@ -1147,7 +1151,7 @@ var getTheme = function getTheme2(outerTheme, theme2) {
     var mergedTheme = theme2(outerTheme);
     return mergedTheme;
   }
-  return _extends$8({}, outerTheme, theme2);
+  return _extends$a({}, outerTheme, theme2);
 };
 var createCacheWithTheme = /* @__PURE__ */ weakMemoize(function(outerTheme) {
   return weakMemoize(function(theme2) {
@@ -1163,13 +1167,14 @@ var ThemeProvider$1 = function ThemeProvider(props) {
     value: theme2
   }, props.children);
 };
+var useInsertionEffect$1 = React["useInsertionEffect"] ? React["useInsertionEffect"] : useLayoutEffect;
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
   var styles2 = props.styles;
   var serialized = serializeStyles([styles2], void 0, useContext(ThemeContext));
   var sheetRef = useRef();
-  useLayoutEffect(function() {
+  useInsertionEffect$1(function() {
     var key = cache.key + "-global";
-    var sheet = new StyleSheet({
+    var sheet = new cache.sheet.constructor({
       key,
       nonce: cache.sheet.nonce,
       container: cache.sheet.container,
@@ -1190,7 +1195,7 @@ var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
       sheet.flush();
     };
   }, [cache]);
-  useLayoutEffect(function() {
+  useInsertionEffect$1(function() {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0], rehydrating = sheetRefCurrent[1];
     if (rehydrating) {
@@ -2240,13 +2245,13 @@ function get(obj, path, fallback, index) {
   return obj === void 0 ? fallback : obj;
 }
 var memoize = function memoize2(fn) {
-  var cache = new WeakMap();
+  var cache = /* @__PURE__ */ new WeakMap();
   var memoizedFn = function memoizedFn2(obj, path, fallback, index) {
     if (typeof obj === "undefined") {
       return fn(obj, path, fallback);
     }
     if (!cache.has(obj)) {
-      cache.set(obj, new Map());
+      cache.set(obj, /* @__PURE__ */ new Map());
     }
     var map = cache.get(obj);
     if (map.has(path)) {
@@ -2325,13 +2330,11 @@ function subtract(value) {
   });
 }
 function queryString(min, max) {
-  var query = [];
+  var query = ["@media screen"];
   if (min)
-    query.push("@media screen and (min-width: " + px(min) + ")");
-  if (query.length > 0 && max)
-    query.push("and");
+    query.push("and", "(min-width: " + px(min) + ")");
   if (max)
-    query.push("@media screen and (max-width: " + px(max) + ")");
+    query.push("and", "(max-width: " + px(max) + ")");
   return query.join(" ");
 }
 function analyzeBreakpoints(breakpoints2) {
@@ -2401,6 +2404,9 @@ function canUseDOM() {
   return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 }
 var isBrowser = canUseDOM();
+var dataAttr = function dataAttr2(condition) {
+  return condition ? "" : void 0;
+};
 var cx = function cx2() {
   for (var _len = arguments.length, classNames2 = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames2[_key] = arguments[_key];
@@ -2527,6 +2533,37 @@ var IdProvider = /* @__PURE__ */ React.memo(function(_ref) {
     }
   }, children);
 });
+function assignRef(ref, value) {
+  if (ref == null)
+    return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch (error) {
+    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
+  }
+}
+function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return React.useMemo(function() {
+    if (refs.every(function(ref) {
+      return ref == null;
+    })) {
+      return null;
+    }
+    return function(node2) {
+      refs.forEach(function(ref) {
+        if (ref)
+          assignRef(ref, node2);
+      });
+    };
+  }, refs);
+}
 var reactDom_production_min = {};
 /*
 object-assign
@@ -2898,7 +2935,7 @@ function y(a) {
 }
 if (!aa)
   throw Error(y(227));
-var ba = new Set(), ca = {};
+var ba = /* @__PURE__ */ new Set(), ca = {};
 function da(a, b2) {
   ea(a, b2);
   ea(a + "Capture", b2);
@@ -3758,7 +3795,7 @@ function dc(a, b2) {
   }
   return false;
 }
-var ec, fc, gc, hc, ic = false, jc = [], kc = null, lc = null, mc = null, nc = new Map(), oc = new Map(), pc = [], qc = "mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");
+var ec, fc, gc, hc, ic = false, jc = [], kc = null, lc = null, mc = null, nc = /* @__PURE__ */ new Map(), oc = /* @__PURE__ */ new Map(), pc = [], qc = "mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");
 function rc(a, b2, c2, d2, e2) {
   return { blockedOn: a, domEventName: b2, eventSystemFlags: c2 | 16, nativeEvent: e2, targetContainers: [d2] };
 }
@@ -3915,7 +3952,7 @@ function Hc(a) {
       return Fc[a] = b2[c2];
   return a;
 }
-var Ic = Hc("animationend"), Jc = Hc("animationiteration"), Kc = Hc("animationstart"), Lc = Hc("transitionend"), Mc = new Map(), Nc = new Map(), Oc = [
+var Ic = Hc("animationend"), Jc = Hc("animationiteration"), Kc = Hc("animationstart"), Lc = Hc("transitionend"), Mc = /* @__PURE__ */ new Map(), Nc = /* @__PURE__ */ new Map(), Oc = [
   "abort",
   "abort",
   Ic,
@@ -5005,7 +5042,7 @@ function Db(a) {
 }
 function $e(a) {
   var b2 = a[yf];
-  b2 === void 0 && (b2 = a[yf] = new Set());
+  b2 === void 0 && (b2 = a[yf] = /* @__PURE__ */ new Set());
   return b2;
 }
 var zf = [], Af = -1;
@@ -5458,7 +5495,7 @@ function Sg(a) {
     return null;
   }
   function d2(a2, b3) {
-    for (a2 = new Map(); b3 !== null; )
+    for (a2 = /* @__PURE__ */ new Map(); b3 !== null; )
       b3.key !== null ? a2.set(b3.key, b3) : a2.set(b3.index, b3), b3 = b3.sibling;
     return a2;
   }
@@ -7043,7 +7080,7 @@ function Si(a, b2, c2) {
   }
   var f2 = a.stateNode;
   f2 !== null && typeof f2.componentDidCatch === "function" && (c2.callback = function() {
-    typeof d2 !== "function" && (Ti === null ? Ti = new Set([this]) : Ti.add(this), Ni(a, b2));
+    typeof d2 !== "function" && (Ti === null ? Ti = /* @__PURE__ */ new Set([this]) : Ti.add(this), Ni(a, b2));
     var c3 = b2.stack;
     this.componentDidCatch(b2.value, { componentStack: c3 !== null ? c3 : "" });
   });
@@ -7521,7 +7558,7 @@ function Jg(a, b2, c2) {
   $c(a, b2, c2);
   a === U && (Hi |= b2, V === 4 && Ii(a, W));
   var d2 = eg();
-  b2 === 1 ? (X & 8) !== 0 && (X & 48) === 0 ? Lj(a) : (Mj(a, c2), X === 0 && (wj(), ig())) : ((X & 4) === 0 || d2 !== 98 && d2 !== 99 || (Cj === null ? Cj = new Set([a]) : Cj.add(a)), Mj(a, c2));
+  b2 === 1 ? (X & 8) !== 0 && (X & 48) === 0 ? Lj(a) : (Mj(a, c2), X === 0 && (wj(), ig())) : ((X & 4) === 0 || d2 !== 98 && d2 !== 99 || (Cj === null ? Cj = /* @__PURE__ */ new Set([a]) : Cj.add(a)), Mj(a, c2));
   vj = a;
 }
 function Kj(a, b2) {
@@ -7819,7 +7856,7 @@ function Sj(a, b2) {
             if (C) {
               var z2 = p2.updateQueue;
               if (z2 === null) {
-                var u = new Set();
+                var u = /* @__PURE__ */ new Set();
                 u.add(l2);
                 p2.updateQueue = u;
               } else
@@ -7842,7 +7879,7 @@ function Sj(a, b2) {
               k2 = void 0;
               h = b2;
               var q2 = f2.pingCache;
-              q2 === null ? (q2 = f2.pingCache = new Oi(), k2 = new Set(), q2.set(l2, k2)) : (k2 = q2.get(l2), k2 === void 0 && (k2 = new Set(), q2.set(l2, k2)));
+              q2 === null ? (q2 = f2.pingCache = new Oi(), k2 = /* @__PURE__ */ new Set(), q2.set(l2, k2)) : (k2 = q2.get(l2), k2 === void 0 && (k2 = /* @__PURE__ */ new Set(), q2.set(l2, k2)));
               if (!k2.has(h)) {
                 k2.add(h);
                 var v2 = Yj.bind(null, f2, l2, h);
@@ -9023,10 +9060,10 @@ function checkDCE() {
 {
   checkDCE();
 }
-var _createContext$1 = createContext({
+var _createContext$1$1 = createContext({
   strict: false,
   name: "PortalManagerContext"
-}), PortalManagerContextProvider = _createContext$1[0];
+}), PortalManagerContextProvider = _createContext$1$1[0];
 function PortalManager(props) {
   var children = props.children, zIndex = props.zIndex;
   return /* @__PURE__ */ React.createElement(PortalManagerContextProvider, {
@@ -9366,8 +9403,8 @@ function ColorModeProvider(props) {
     value: context
   }, children);
 }
-function _extends$7() {
-  _extends$7 = Object.assign || function(target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9378,7 +9415,7 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 var tokenToCSSVar = function tokenToCSSVar2(scale, value) {
   return function(theme2) {
@@ -9515,7 +9552,7 @@ function _wrapRegExp() {
     return new BabelRegExp(re2, void 0, groups);
   };
   var _super = RegExp.prototype;
-  var _groups = new WeakMap();
+  var _groups = /* @__PURE__ */ new WeakMap();
   function BabelRegExp(re2, flags, groups) {
     var _this = new RegExp(re2, flags);
     _groups.set(_this, groups || _groups.get(re2));
@@ -9553,7 +9590,7 @@ function _wrapRegExp() {
     return Object.keys(g2).reduce(function(groups, name) {
       groups[name] = result[g2[name]];
       return groups;
-    }, Object.create(null));
+    }, /* @__PURE__ */ Object.create(null));
   }
   return _wrapRegExp.apply(this, arguments);
 }
@@ -9568,7 +9605,7 @@ var directionMap = {
   "to-tl": "to top left"
 };
 var valueSet = new Set(Object.values(directionMap));
-var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]);
+var globalSet = /* @__PURE__ */ new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]);
 var trimSpace = function trimSpace2(str) {
   return str.trim();
 };
@@ -9722,7 +9759,7 @@ var t = {
     };
   },
   prop: function prop(property, scale, transform10) {
-    return _extends$7({
+    return _extends$9({
       property,
       scale
     }, scale && {
@@ -10461,14 +10498,14 @@ var pseudoSelectors = {
   _ltr: "[dir=ltr] &, &[dir=ltr]",
   _mediaDark: "@media (prefers-color-scheme: dark)",
   _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
-  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
-  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]"
+  _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
+  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]"
 };
 var pseudoPropNames = objectKeys(pseudoSelectors);
 var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter2, ring2, interactivity, grid, others, position, effect, space, scroll, typography$2, textDecoration, transform8, list$1, transition$1);
 Object.assign({}, space, layout, flexbox, grid, position);
 var propNames = [].concat(objectKeys(systemProps), pseudoPropNames);
-var styleProps = _extends$7({}, systemProps, pseudoSelectors);
+var styleProps = _extends$9({}, systemProps, pseudoSelectors);
 var isStyleProp = function isStyleProp2(prop2) {
   return prop2 in styleProps;
 };
@@ -10788,7 +10825,7 @@ function createThemeVars(flatTokens, options) {
     cssMap
   };
 }
-function _objectWithoutPropertiesLoose$5(source, excluded) {
+function _objectWithoutPropertiesLoose$7(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -10802,7 +10839,7 @@ function _objectWithoutPropertiesLoose$5(source, excluded) {
   }
   return target;
 }
-var _excluded$b = ["__cssMap", "__cssVars", "__breakpoints"];
+var _excluded$c = ["__cssMap", "__cssVars", "__breakpoints"];
 var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 function extractTokens(theme2) {
   var _tokens = tokens;
@@ -10815,7 +10852,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
   rawTheme.__cssVars;
   rawTheme.__breakpoints;
-  var cleanTheme = _objectWithoutPropertiesLoose$5(rawTheme, _excluded$b);
+  var cleanTheme = _objectWithoutPropertiesLoose$7(rawTheme, _excluded$c);
   return cleanTheme;
 }
 function flattenTokens(_ref) {
@@ -10863,7 +10900,7 @@ function toCSSVar(rawTheme) {
     "--chakra-space-y-reverse": "0"
   };
   Object.assign(theme2, {
-    __cssVars: _extends$7({}, defaultCssVars, cssVars),
+    __cssVars: _extends$9({}, defaultCssVars, cssVars),
     __cssMap: cssMap,
     __breakpoints: analyzeBreakpoints(theme2.breakpoints)
   });
@@ -10958,7 +10995,7 @@ var reactFastCompare = function isEqual(a, b2) {
     throw error;
   }
 };
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
 var isPropValid = /* @__PURE__ */ memoize$1(function(prop2) {
   return reactPropsRegex.test(prop2) || prop2.charCodeAt(0) === 111 && prop2.charCodeAt(1) === 110 && prop2.charCodeAt(2) < 91;
 });
@@ -10982,7 +11019,18 @@ var composeShouldForwardProps = function composeShouldForwardProps2(tag2, option
   }
   return shouldForwardProp3;
 };
-var Noop = function Noop2() {
+var useInsertionEffect = React["useInsertionEffect"] ? React["useInsertionEffect"] : function useInsertionEffect2(create) {
+  create();
+};
+function useInsertionEffectMaybe(create) {
+  useInsertionEffect(create);
+}
+var Insertion = function Insertion2(_ref) {
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  useInsertionEffectMaybe(function() {
+    return insertStyles(cache, serialized, isStringTag);
+  });
   return null;
 };
 var createStyled = function createStyled2(tag2, options) {
@@ -11014,7 +11062,7 @@ var createStyled = function createStyled2(tag2, options) {
       }
     }
     var Styled = withEmotionCache(function(props, cache, ref) {
-      var finalTag = shouldUseAs && props.as || baseTag;
+      var FinalTag = shouldUseAs && props.as || baseTag;
       var className = "";
       var classInterpolations = [];
       var mergedProps = props;
@@ -11031,12 +11079,11 @@ var createStyled = function createStyled2(tag2, options) {
         className = props.className + " ";
       }
       var serialized = serializeStyles(styles2.concat(classInterpolations), cache.registered, mergedProps);
-      insertStyles(cache, serialized, typeof finalTag === "string");
       className += cache.key + "-" + serialized.name;
       if (targetClassName !== void 0) {
         className += " " + targetClassName;
       }
-      var finalShouldForwardProp = shouldUseAs && shouldForwardProp3 === void 0 ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp3 === void 0 ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
       var newProps = {};
       for (var _key in props) {
         if (shouldUseAs && _key === "as")
@@ -11047,9 +11094,11 @@ var createStyled = function createStyled2(tag2, options) {
       }
       newProps.className = className;
       newProps.ref = ref;
-      var ele = /* @__PURE__ */ createElement(finalTag, newProps);
-      var possiblyStyleElement = /* @__PURE__ */ createElement(Noop, null);
-      return /* @__PURE__ */ createElement(Fragment$1, null, possiblyStyleElement, ele);
+      return /* @__PURE__ */ createElement(Fragment$1, null, /* @__PURE__ */ createElement(Insertion, {
+        cache,
+        serialized,
+        isStringTag: typeof FinalTag === "string"
+      }), /* @__PURE__ */ createElement(FinalTag, newProps));
     });
     Styled.displayName = identifierName !== void 0 ? identifierName : "Styled(" + (typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")";
     Styled.defaultProps = tag2.defaultProps;
@@ -11066,7 +11115,7 @@ var createStyled = function createStyled2(tag2, options) {
       }
     });
     Styled.withComponent = function(nextTag, nextOptions) {
-      return createStyled2(nextTag, _extends$8({}, options, nextOptions, {
+      return createStyled2(nextTag, _extends$a({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles2);
     };
@@ -11213,8 +11262,8 @@ var newStyled = createStyled.bind();
 tags.forEach(function(tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
-function _extends$6() {
-  _extends$6 = Object.assign || function(target) {
+function _extends$8() {
+  _extends$8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11225,7 +11274,7 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 var ThemeProvider2 = function ThemeProvider3(props) {
   var cssVarsRoot = props.cssVarsRoot, theme2 = props.theme, children = props.children;
@@ -11240,10 +11289,11 @@ var ThemeProvider2 = function ThemeProvider3(props) {
 };
 var CSSVars = function CSSVars2(_ref) {
   var _ref$root = _ref.root, root2 = _ref$root === void 0 ? ":host, :root" : _ref$root;
+  var selector2 = [root2, "[data-theme]"].join(",");
   return /* @__PURE__ */ React.createElement(Global, {
     styles: function styles2(theme2) {
       var _ref2;
-      return _ref2 = {}, _ref2[root2] = theme2.__cssVars, _ref2;
+      return _ref2 = {}, _ref2[selector2] = theme2.__cssVars, _ref2;
     }
   });
 };
@@ -11274,18 +11324,17 @@ var GlobalStyle = function GlobalStyle2() {
     }
   });
 };
-var domElements = ["a", "b", "article", "aside", "blockquote", "button", "caption", "cite", "circle", "code", "dd", "div", "dl", "dt", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "img", "input", "kbd", "label", "li", "main", "mark", "nav", "ol", "p", "path", "pre", "q", "rect", "s", "svg", "section", "select", "strong", "small", "span", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "ul"];
 function omitThemingProps(props) {
   return omit(props, ["styleConfig", "size", "variant", "colorScheme"]);
 }
 function useChakra() {
   var colorModeResult = useColorMode();
   var theme2 = useTheme();
-  return _extends$6({}, colorModeResult, {
+  return _extends$8({}, colorModeResult, {
     theme: theme2
   });
 }
-function _objectWithoutPropertiesLoose$4(source, excluded) {
+function _objectWithoutPropertiesLoose$6(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11300,16 +11349,16 @@ function _objectWithoutPropertiesLoose$4(source, excluded) {
   return target;
 }
 var allPropNames = new Set([].concat(propNames, ["textStyle", "layerStyle", "apply", "isTruncated", "noOfLines", "focusBorderColor", "errorBorderColor", "as", "__css", "css", "sx"]));
-var validHTMLProps = new Set(["htmlWidth", "htmlHeight", "htmlSize"]);
+var validHTMLProps = /* @__PURE__ */ new Set(["htmlWidth", "htmlHeight", "htmlSize"]);
 var shouldForwardProp = function shouldForwardProp2(prop2) {
   return validHTMLProps.has(prop2) || !allPropNames.has(prop2);
 };
-var _excluded$1$1 = ["theme", "css", "__css", "sx"], _excluded2$3 = ["baseStyle"];
+var _excluded$1$2 = ["theme", "css", "__css", "sx"], _excluded2$3 = ["baseStyle"];
 var toCSSObject = function toCSSObject2(_ref) {
   var baseStyle22 = _ref.baseStyle;
   return function(props) {
     props.theme;
-    var cssProp = props.css, __css = props.__css, sx = props.sx, rest = _objectWithoutPropertiesLoose$4(props, _excluded$1$1);
+    var cssProp = props.css, __css = props.__css, sx = props.sx, rest = _objectWithoutPropertiesLoose$6(props, _excluded$1$2);
     var styleProps2 = objectFilter(rest, function(_, prop2) {
       return isStyleProp(prop2);
     });
@@ -11320,7 +11369,7 @@ var toCSSObject = function toCSSObject2(_ref) {
   };
 };
 function styled(component, options) {
-  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$4(_ref2, _excluded2$3);
+  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$6(_ref2, _excluded2$3);
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
   }
@@ -11329,14 +11378,10 @@ function styled(component, options) {
   });
   return newStyled(component, styledOptions)(styleObject);
 }
-var chakra = styled;
-domElements.forEach(function(tag2) {
-  chakra[tag2] = chakra(tag2);
-});
 function forwardRef(component) {
   return /* @__PURE__ */ React.forwardRef(component);
 }
-var _excluded$9 = ["styleConfig"];
+var _excluded$b = ["styleConfig"];
 function useStyleConfig(themeKey, props, opts) {
   var _styleConfig$defaultP;
   if (props === void 0) {
@@ -11345,7 +11390,7 @@ function useStyleConfig(themeKey, props, opts) {
   if (opts === void 0) {
     opts = {};
   }
-  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$4(_props, _excluded$9);
+  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$6(_props, _excluded$b);
   var _useChakra = useChakra(), theme2 = _useChakra.theme, colorMode = _useChakra.colorMode;
   var themeStyleConfig = memoizedGet(theme2, "components." + themeKey);
   var styleConfig = styleConfigProp || themeStyleConfig;
@@ -11378,6 +11423,21 @@ function useMultiStyleConfig(themeKey, props) {
     isMultiPart: true
   });
 }
+function factory() {
+  var cache = /* @__PURE__ */ new Map();
+  return new Proxy(styled, {
+    apply: function apply(target, thisArg, argArray) {
+      return styled.apply(void 0, argArray);
+    },
+    get: function get4(_, element) {
+      if (!cache.has(element)) {
+        cache.set(element, styled(element));
+      }
+      return cache.get(element);
+    }
+  });
+}
+var chakra = factory();
 var ChakraProvider$1 = function ChakraProvider(props) {
   var children = props.children, colorModeManager = props.colorModeManager, portalZIndex = props.portalZIndex, _props$resetCSS = props.resetCSS, resetCSS = _props$resetCSS === void 0 ? true : _props$resetCSS, _props$theme = props.theme, theme2 = _props$theme === void 0 ? {} : _props$theme, environment = props.environment, cssVarsRoot = props.cssVarsRoot;
   var _children = /* @__PURE__ */ React.createElement(EnvironmentProvider, {
@@ -11428,8 +11488,8 @@ var spacing = {
   80: "20rem",
   96: "24rem"
 };
-function _extends$5() {
-  _extends$5 = Object.assign || function(target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11440,7 +11500,7 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 var largeSizes = {
   max: "max-content",
@@ -11467,7 +11527,7 @@ var container$1 = {
   lg: "1024px",
   xl: "1280px"
 };
-var sizes$l = _extends$5({}, spacing, largeSizes, {
+var sizes$l = _extends$7({}, spacing, largeSizes, {
   container: container$1
 });
 function bound01(n2, max) {
@@ -12687,8 +12747,8 @@ function orient(options) {
     return {};
   return orientation === "vertical" ? vertical : horizontal;
 }
-function _extends$4() {
-  _extends$4 = Object.assign || function(target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -12699,14 +12759,14 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$6.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$4({
+  return _extends$6({
     base: "0em"
   }, config2);
 };
@@ -12931,7 +12991,7 @@ function getFallback(fallback) {
     return fallback;
   return fallback == null ? void 0 : fallback.reference;
 }
-var accordionAnatomy = anatomy("accordion").parts("container", "item", "button", "panel").extend("icon");
+var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
 var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon");
 var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
 var breadcrumbAnatomy = anatomy("breadcrumb").parts("link", "item", "container").extend("separator");
@@ -12939,7 +12999,7 @@ anatomy("button").parts();
 var checkboxAnatomy = anatomy("checkbox").parts("control", "icon", "container").extend("label");
 anatomy("progress").parts("track", "filledTrack").extend("label");
 var drawerAnatomy = anatomy("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
-var editableAnatomy = anatomy("editable").parts("preview", "input");
+var editableAnatomy = anatomy("editable").parts("preview", "input", "textarea");
 var formAnatomy = anatomy("form").parts("container", "requiredIndicator", "helperText");
 var formErrorAnatomy = anatomy("formError").parts("text", "icon");
 var inputAnatomy = anatomy("input").parts("addon", "field", "element");
@@ -13049,6 +13109,7 @@ var baseStyleIcon$5 = {
   fontSize: "1.25em"
 };
 var baseStyle$D = {
+  root: {},
   container: baseStyleContainer$3,
   button: baseStyleButton$1,
   panel: baseStylePanel,
@@ -13340,7 +13401,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$5({
+  return _extends$7({
     border: "1px solid",
     borderColor: c2 === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -13679,7 +13740,7 @@ var baseStyleDialogContainer$1 = {
 };
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$5({}, isFullHeight && {
+  return _extends$7({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -13757,9 +13818,23 @@ var baseStyleInput = {
     opacity: 0.6
   }
 };
+var baseStyleTextarea = {
+  borderRadius: "md",
+  py: "3px",
+  transitionProperty: "common",
+  transitionDuration: "normal",
+  width: "full",
+  _focus: {
+    boxShadow: "outline"
+  },
+  _placeholder: {
+    opacity: 0.6
+  }
+};
 var baseStyle$r = {
   preview: baseStylePreview,
-  input: baseStyleInput
+  input: baseStyleInput,
+  textarea: baseStyleTextarea
 };
 var editable = {
   parts: editableAnatomy.keys,
@@ -14333,7 +14408,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$5({}, sizeStyle.field, {
+    field: _extends$7({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -14364,7 +14439,7 @@ var numberInput = {
   defaultProps: defaultProps$b
 };
 var _Input$variants$unsty$1;
-var baseStyle$f = _extends$5({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$7({}, Input.baseStyle.field, {
   textAlign: "center"
 });
 var sizes$b = {
@@ -14472,7 +14547,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$5({}, addStripe && stripeStyle, isIndeterminate ? {
+  return _extends$7({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor
@@ -14490,7 +14565,7 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
   };
 };
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$5({
+  return _extends$7({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
@@ -14536,9 +14611,9 @@ var progress = {
 };
 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$5({}, control, {
+  return _extends$7({}, control, {
     borderRadius: "full",
-    _checked: _extends$5({}, control["_checked"], {
+    _checked: _extends$7({}, control["_checked"], {
       _before: {
         content: '""',
         display: "inline-block",
@@ -14597,7 +14672,7 @@ var radio = {
   defaultProps: defaultProps$8
 };
 var baseStyleField = function baseStyleField2(props) {
-  return _extends$5({}, Input.baseStyle.field, {
+  return _extends$7({}, Input.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -14718,7 +14793,7 @@ function thumbOrientation(props) {
 }
 var baseStyleContainer$1 = function baseStyleContainer2(props) {
   var orientation = props.orientation;
-  return _extends$5({
+  return _extends$7({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -14748,7 +14823,7 @@ var baseStyleTrack$1 = function baseStyleTrack2(props) {
   };
 };
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$5({
+  return _extends$7({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -15018,12 +15093,12 @@ var numericStyles = {
 var variantSimple = function variantSimple2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$5({
+    th: _extends$7({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$5({
+    td: _extends$7({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -15044,12 +15119,12 @@ var variantSimple = function variantSimple2(props) {
 var variantStripe = function variantStripe2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$5({
+    th: _extends$7({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$5({
+    td: _extends$7({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -15437,7 +15512,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$5({}, Input.baseStyle.field, {
+var baseStyle$1 = _extends$7({}, Input.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -15838,7 +15913,7 @@ var blur2 = {
   "2xl": "40px",
   "3xl": "64px"
 };
-var foundations = _extends$5({
+var foundations = _extends$7({
   breakpoints,
   zIndices,
   radii: radii$1,
@@ -15888,15 +15963,15 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme$1 = _extends$5({
+var theme$1 = _extends$7({
   direction
 }, foundations, {
   components,
   styles: styles$1$1,
   config
 });
-function _extends$3() {
-  _extends$3 = Object.assign || function(target) {
+function _extends$5() {
+  _extends$5 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -15907,9 +15982,9 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$3(source, excluded) {
+function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -15923,7 +15998,7 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   }
   return target;
 }
-var _excluded$7 = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
+var _excluded$9 = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
 var fallbackIcon = {
   path: /* @__PURE__ */ React.createElement("g", {
     stroke: "currentColor",
@@ -15946,9 +16021,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$3(props, _excluded$7);
+  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$5(props, _excluded$9);
   var _className = cx("chakra-icon", className);
-  var styles2 = _extends$3({
+  var styles2 = _extends$5({
     w: "1em",
     h: "1em",
     display: "inline-block",
@@ -15964,18 +16039,18 @@ 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$3({
+    return /* @__PURE__ */ React.createElement(chakra.svg, _extends$5({
       as: element
     }, shared, rest));
   }
   var _path = children != null ? children : fallbackIcon.path;
-  return /* @__PURE__ */ React.createElement(chakra.svg, _extends$3({
+  return /* @__PURE__ */ React.createElement(chakra.svg, _extends$5({
     verticalAlign: "middle",
     viewBox: _viewBox
   }, shared, rest), _path);
 });
-function _extends$2() {
-  _extends$2 = Object.assign || function(target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -15986,9 +16061,9 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose$4(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -16054,10 +16129,10 @@ function useImage(props) {
   }, [status, load, ignoreFallback]);
   return ignoreFallback ? "loaded" : status;
 }
-var _excluded$4 = ["htmlWidth", "htmlHeight", "alt"], _excluded2$2 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
+var _excluded$7 = ["htmlWidth", "htmlHeight", "alt"], _excluded2$2 = ["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$2(props, _excluded$4);
-  return /* @__PURE__ */ React.createElement("img", _extends$2({
+  var htmlWidth = props.htmlWidth, htmlHeight = props.htmlHeight, alt = props.alt, rest = _objectWithoutPropertiesLoose$4(props, _excluded$7);
+  return /* @__PURE__ */ React.createElement("img", _extends$4({
     width: htmlWidth,
     height: htmlHeight,
     ref,
@@ -16065,12 +16140,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$2(props, _excluded2$2);
+  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$4(props, _excluded2$2);
   var shouldIgnore = loading != null || ignoreFallback || fallbackSrc === void 0 && fallback === void 0;
-  var status = useImage(_extends$2({}, props, {
+  var status = useImage(_extends$4({}, props, {
     ignoreFallback: shouldIgnore
   }));
-  var shared = _extends$2({
+  var shared = _extends$4({
     ref,
     objectFit: fit,
     objectPosition: align
@@ -16078,13 +16153,13 @@ var Image$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
   if (status !== "loaded") {
     if (fallback)
       return fallback;
-    return /* @__PURE__ */ React.createElement(chakra.img, _extends$2({
+    return /* @__PURE__ */ React.createElement(chakra.img, _extends$4({
       as: NativeImage,
       className: "chakra-image__placeholder",
       src: fallbackSrc
     }, shared));
   }
-  return /* @__PURE__ */ React.createElement(chakra.img, _extends$2({
+  return /* @__PURE__ */ React.createElement(chakra.img, _extends$4({
     as: NativeImage,
     src,
     srcSet,
@@ -16093,6 +16168,227 @@ var Image$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
     className: "chakra-image"
   }, shared));
 });
+var visuallyHiddenStyle = {
+  border: "0px",
+  clip: "rect(0px, 0px, 0px, 0px)",
+  height: "1px",
+  width: "1px",
+  margin: "-1px",
+  padding: "0px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "absolute"
+};
+var VisuallyHidden = chakra("span", {
+  baseStyle: visuallyHiddenStyle
+});
+chakra("input", {
+  baseStyle: visuallyHiddenStyle
+});
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$3(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var _excluded$4 = ["label", "thickness", "speed", "emptyColor", "className"];
+var spin$1 = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
+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$3(_omitThemingProps, _excluded$4);
+  var _className = cx("chakra-spinner", className);
+  var spinnerStyles = _extends$3({
+    display: "inline-block",
+    borderColor: "currentColor",
+    borderStyle: "solid",
+    borderRadius: "99999px",
+    borderWidth: thickness,
+    borderBottomColor: emptyColor,
+    borderLeftColor: emptyColor,
+    animation: spin$1 + " " + speed + " linear infinite"
+  }, styles2);
+  return /* @__PURE__ */ React.createElement(chakra.div, _extends$3({
+    ref,
+    __css: spinnerStyles,
+    className: _className
+  }, rest), label && /* @__PURE__ */ React.createElement(VisuallyHidden, null, label));
+});
+function _objectWithoutPropertiesLoose$2(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _extends$2() {
+  _extends$2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+var _createContext$1 = createContext({
+  strict: false,
+  name: "ButtonGroupContext"
+}), useButtonGroup = _createContext$1[1];
+var _excluded$3$1 = ["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$2(props, _excluded$3$1);
+  var _className = cx("chakra-button__spinner", className);
+  var marginProp = placement === "start" ? "marginEnd" : "marginStart";
+  var spinnerStyles = React.useMemo(function() {
+    var _extends2;
+    return _extends$2((_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$2({
+    className: _className
+  }, rest, {
+    __css: spinnerStyles
+  }), children);
+};
+var _excluded$2$1 = ["children", "className"];
+var ButtonIcon = function ButtonIcon2(props) {
+  var children = props.children, className = props.className, rest = _objectWithoutPropertiesLoose$2(props, _excluded$2$1);
+  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$2({
+    display: "inline-flex",
+    alignSelf: "center",
+    flexShrink: 0
+  }, rest, {
+    className: _className
+  }), _children);
+};
+function useButtonType(value) {
+  var _React$useState = React.useState(!value), isButton = _React$useState[0], setIsButton = _React$useState[1];
+  var refCallback = React.useCallback(function(node2) {
+    if (!node2)
+      return;
+    setIsButton(node2.tagName === "BUTTON");
+  }, []);
+  var type = isButton ? "button" : void 0;
+  return {
+    ref: refCallback,
+    type
+  };
+}
+var _excluded$1$1 = ["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$2({}, group, props));
+  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$isD = _omitThemingProps.isDisabled, isDisabled = _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$2(_omitThemingProps, _excluded$1$1);
+  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$2({
+      display: "inline-flex",
+      appearance: "none",
+      alignItems: "center",
+      justifyContent: "center",
+      userSelect: "none",
+      position: "relative",
+      whiteSpace: "nowrap",
+      verticalAlign: "middle",
+      outline: "none",
+      width: isFullWidth ? "100%" : "auto"
+    }, styles2, !!group && {
+      _focus
+    });
+  }, [styles2, group, isFullWidth]);
+  var _useButtonType = useButtonType(as), _ref = _useButtonType.ref, defaultType = _useButtonType.type;
+  var contentProps = {
+    rightIcon,
+    leftIcon,
+    iconSpacing: iconSpacing2,
+    children
+  };
+  return /* @__PURE__ */ React.createElement(chakra.button, _extends$2({
+    disabled: isDisabled || isLoading,
+    ref: useMergeRefs(ref, _ref),
+    as,
+    type: type != null ? type : defaultType,
+    "data-active": dataAttr(isActive),
+    "data-loading": dataAttr(isLoading),
+    __css: buttonStyles,
+    className: cx("chakra-button", className)
+  }, rest), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ React.createElement(ButtonSpinner, {
+    className: "chakra-button__spinner--start",
+    label: loadingText,
+    placement: "start",
+    spacing: iconSpacing2
+  }, spinner2), isLoading ? loadingText || /* @__PURE__ */ React.createElement(chakra.span, {
+    opacity: 0
+  }, /* @__PURE__ */ React.createElement(ButtonContent, contentProps)) : /* @__PURE__ */ React.createElement(ButtonContent, contentProps), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ React.createElement(ButtonSpinner, {
+    className: "chakra-button__spinner--end",
+    label: loadingText,
+    placement: "end",
+    spacing: iconSpacing2
+  }, spinner2));
+});
+function ButtonContent(props) {
+  var leftIcon = props.leftIcon, rightIcon = props.rightIcon, children = props.children, iconSpacing2 = props.iconSpacing;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && /* @__PURE__ */ React.createElement(ButtonIcon, {
+    marginEnd: iconSpacing2
+  }, leftIcon), children, rightIcon && /* @__PURE__ */ React.createElement(ButtonIcon, {
+    marginStart: iconSpacing2
+  }, rightIcon));
+}
 function _extends$1() {
   _extends$1 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -16166,7 +16462,7 @@ var Link = /* @__PURE__ */ forwardRef(function(props, ref) {
   var _omitThemingProps = omitThemingProps(props), className = _omitThemingProps.className, isExternal = _omitThemingProps.isExternal, rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$6);
   return /* @__PURE__ */ React.createElement(chakra.a, _extends$1({
     target: isExternal ? "_blank" : void 0,
-    rel: isExternal ? "noopener noreferrer" : void 0,
+    rel: isExternal ? "noopener" : void 0,
     ref,
     className: cx("chakra-link", className)
   }, rest, {
@@ -16388,7 +16684,7 @@ var LinkOverlay = /* @__PURE__ */ forwardRef(function(props, ref) {
         position: "absolute",
         top: 0,
         left: 0,
-        zIndex: 0,
+        zIndex: 1,
         width: "100%",
         height: "100%"
       }
@@ -16403,7 +16699,7 @@ var LinkBox = /* @__PURE__ */ forwardRef(function(props, ref) {
   }, rest, {
     className: cx("chakra-linkbox", className),
     __css: {
-      "a[href]:not(.chakra-linkbox__overlay), abbr[title]": {
+      "a[href]:not(.chakra-linkbox__overlay), abbr[title], button": {
         position: "relative",
         zIndex: 1
       }
@@ -17964,12 +18260,17 @@ function maxWidthCoursesList(nCols = 4) {
     remValue: maxWidth
   };
 }
-function Footer() {
+function Footer({
+  onClick
+}) {
   var _a;
   const {
     action,
     Profile: Profile2
   } = React.useContext(CourseBoxContext);
+  const cssButton = {
+    backgroundColor: "transparent"
+  };
   if (action == null || (action == null ? void 0 : action.enabled) && ((_a = action.href) == null ? void 0 : _a.length) === 0) {
     return null;
   }
@@ -17980,7 +18281,20 @@ function Footer() {
     borderTop: "1px solid",
     borderTopColor: vars("colors-neutral-platinum"),
     children: isCourseActive(action.enabled, Profile2 == null ? void 0 : Profile2.id) ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(LinkOverlay, {
+      children: [onClick ? /* @__PURE__ */ jsx(Button, {
+        color: vars("colors-main-deepSkyBlue"),
+        backgroundColor: "transparent",
+        fontWeight: "500",
+        height: "auto",
+        mr: action.hasIcon ? "1.5rem" : "0",
+        lineHeight: "1.172rem",
+        p: "0",
+        onClick,
+        _hover: cssButton,
+        _focus: cssButton,
+        _active: cssButton,
+        children: action.text
+      }) : /* @__PURE__ */ jsx(LinkOverlay, {
         href: action.href,
         color: vars("colors-main-deepSkyBlue"),
         fontWeight: "500",
@@ -18013,7 +18327,8 @@ function WithRipples({
   });
 }
 function CourseBox({
-  data
+  data,
+  onClick
 }) {
   var _a, _b, _c;
   const cssActive = {
@@ -18039,7 +18354,9 @@ function CourseBox({
           h: "100%",
           children: [/* @__PURE__ */ jsxs(Box, {
             children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(Section, {})]
-          }), /* @__PURE__ */ jsx(Footer, {})]
+          }), /* @__PURE__ */ jsx(Footer, {
+            onClick
+          })]
         })
       })
     })
@@ -18050,7 +18367,8 @@ const columnGap = 1.25;
 const wCourse = 17.8125;
 function CourseList({
   courses,
-  m: m2 = "0 auto"
+  m: m2 = "0 auto",
+  onClick
 }) {
   if (courses === void 0) {
     return null;
@@ -18063,7 +18381,8 @@ function CourseList({
     m: m2,
     w: "100%",
     children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
-      data: course
+      data: course,
+      onClick
     }, course.id))
   });
 }