@eclass/ui-kit 1.5.5 → 1.5.6

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

@@ -19,30 +19,30 @@ var __spreadValues = (a, b2) => {
 var __spreadProps = (a, b2) => __defProps(a, __getOwnPropDescs(b2));
 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 } from "react";
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    return tag.sheet;
+function sheetForTag(tag2) {
+  if (tag2.sheet) {
+    return tag2.sheet;
   }
   for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
+    if (document.styleSheets[i].ownerNode === tag2) {
       return document.styleSheets[i];
     }
   }
 }
 function createStyleElement(options) {
-  var tag = document.createElement("style");
-  tag.setAttribute("data-emotion", options.key);
+  var tag2 = document.createElement("style");
+  tag2.setAttribute("data-emotion", options.key);
   if (options.nonce !== void 0) {
-    tag.setAttribute("nonce", options.nonce);
+    tag2.setAttribute("nonce", options.nonce);
   }
-  tag.appendChild(document.createTextNode(""));
-  tag.setAttribute("data-s", "");
-  return tag;
+  tag2.appendChild(document.createTextNode(""));
+  tag2.setAttribute("data-s", "");
+  return tag2;
 }
 var StyleSheet = /* @__PURE__ */ function() {
   function StyleSheet2(options) {
     var _this = this;
-    this._insertTag = function(tag) {
+    this._insertTag = function(tag2) {
       var before;
       if (_this.tags.length === 0) {
         if (_this.insertionPoint) {
@@ -55,8 +55,8 @@ var StyleSheet = /* @__PURE__ */ function() {
       } else {
         before = _this.tags[_this.tags.length - 1].nextSibling;
       }
-      _this.container.insertBefore(tag, before);
-      _this.tags.push(tag);
+      _this.container.insertBefore(tag2, before);
+      _this.tags.push(tag2);
     };
     this.isSpeedy = options.speedy === void 0 ? true : options.speedy;
     this.tags = [];
@@ -76,21 +76,21 @@ var StyleSheet = /* @__PURE__ */ function() {
     if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
       this._insertTag(createStyleElement(this));
     }
-    var tag = this.tags[this.tags.length - 1];
+    var tag2 = this.tags[this.tags.length - 1];
     if (this.isSpeedy) {
-      var sheet = sheetForTag(tag);
+      var sheet = sheetForTag(tag2);
       try {
         sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e2) {
       }
     } else {
-      tag.appendChild(document.createTextNode(rule));
+      tag2.appendChild(document.createTextNode(rule));
     }
     this.ctr++;
   };
   _proto.flush = function flush() {
-    this.tags.forEach(function(tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
+    this.tags.forEach(function(tag2) {
+      return tag2.parentNode && tag2.parentNode.removeChild(tag2);
     });
     this.tags = [];
     this.ctr = 0;
@@ -107,6 +107,7 @@ var IMPORT = "@import";
 var KEYFRAMES = "@keyframes";
 var abs = Math.abs;
 var from = String.fromCharCode;
+var assign = Object.assign;
 function hash(value, length2) {
   return (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3);
 }
@@ -149,8 +150,8 @@ var characters = "";
 function node(value, root2, parent, type, props, children, length2) {
   return { value, root: root2, parent, type, props, children, line, column, length: length2, return: "" };
 }
-function copy(value, root2, type) {
-  return node(value, root2.root, root2.parent, type, root2.props, root2.children, 0);
+function copy(root2, props) {
+  return assign(node("", null, null, "", null, null, 0), root2, { length: -root2.length }, props);
 }
 function char() {
   return character;
@@ -238,7 +239,9 @@ function delimiter(type) {
         return position$1;
       case 34:
       case 39:
-        return delimiter(type === 34 || type === 39 ? type : character);
+        if (type !== 34 && type !== 39)
+          delimiter(character);
+        break;
       case 40:
         if (type === 41)
           delimiter(type);
@@ -283,10 +286,15 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
   var characters2 = type;
   while (scanning)
     switch (previous = character2, character2 = next()) {
+      case 40:
+        if (previous != 108 && characters2.charCodeAt(length2 - 1) == 58) {
+          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f") != -1)
+            ampersand = -1;
+          break;
+        }
       case 34:
       case 39:
       case 91:
-      case 40:
         characters2 += delimit(character2);
         break;
       case 9:
@@ -336,7 +344,7 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
                     parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
                     break;
                   default:
-                    parse(characters2, reference, reference, reference, [""], children, length2, points, children);
+                    parse(characters2, reference, reference, reference, [""], children, 0, points, children);
                 }
         }
         index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
@@ -360,7 +368,7 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
           case 64:
             if (peek() === 45)
               characters2 += delimit(next());
-            atrule = peek(), offset = strlen(type = characters2 += identifier(caret())), character2++;
+            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
             break;
           case 45:
             if (previous === 45 && strlen(characters2) == 2)
@@ -513,6 +521,8 @@ function stringify(element, index, children, callback) {
       return element.return = element.return || element.value;
     case COMMENT:
       return "";
+    case KEYFRAMES:
+      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
     case RULESET:
       element.value = element.props.join(",");
   }
@@ -536,30 +546,32 @@ function rulesheet(callback) {
   };
 }
 function prefixer(element, index, children, callback) {
-  if (!element.return)
-    switch (element.type) {
-      case DECLARATION:
-        element.return = prefix(element.value, element.length);
-        break;
-      case KEYFRAMES:
-        return serialize([copy(replace(element.value, "@", "@" + WEBKIT), element, "")], callback);
-      case RULESET:
-        if (element.length)
-          return combine(element.props, function(value) {
-            switch (match(value, /(::plac\w+|:read-\w+)/)) {
-              case ":read-only":
-              case ":read-write":
-                return serialize([copy(replace(value, /:(read-\w+)/, ":" + MOZ + "$1"), element, "")], callback);
-              case "::placeholder":
-                return serialize([
-                  copy(replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1"), element, ""),
-                  copy(replace(value, /:(plac\w+)/, ":" + MOZ + "$1"), element, ""),
-                  copy(replace(value, /:(plac\w+)/, MS + "input-$1"), element, "")
-                ], callback);
-            }
-            return "";
-          });
-    }
+  if (element.length > -1) {
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length);
+          break;
+        case KEYFRAMES:
+          return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback);
+        case RULESET:
+          if (element.length)
+            return combine(element.props, function(value) {
+              switch (match(value, /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  return serialize([copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] })], callback);
+                case "::placeholder":
+                  return serialize([
+                    copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }),
+                    copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }),
+                    copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] })
+                  ], callback);
+              }
+              return "";
+            });
+      }
+  }
 }
 var weakMemoize = function weakMemoize2(func) {
   var cache = new WeakMap();
@@ -627,7 +639,7 @@ var getRules = function getRules2(value, points) {
 };
 var fixedElements = /* @__PURE__ */ new WeakMap();
 var compat = function compat2(element) {
-  if (element.type !== "rule" || !element.parent || !element.length) {
+  if (element.type !== "rule" || !element.parent || element.length < 1) {
     return;
   }
   var value = element.value, parent = element.parent;
@@ -1991,7 +2003,7 @@ var lodash_mergewith = { exports: {} };
     return baseIsNative(value) ? value : void 0;
   }
   function getRawTag(value) {
-    var isOwn = hasOwnProperty2.call(value, symToStringTag), tag = value[symToStringTag];
+    var isOwn = hasOwnProperty2.call(value, symToStringTag), tag2 = value[symToStringTag];
     try {
       value[symToStringTag] = void 0;
       var unmasked = true;
@@ -2000,7 +2012,7 @@ var lodash_mergewith = { exports: {} };
     var result = nativeObjectToString.call(value);
     if (unmasked) {
       if (isOwn) {
-        value[symToStringTag] = tag;
+        value[symToStringTag] = tag2;
       } else {
         delete value[symToStringTag];
       }
@@ -2122,8 +2134,8 @@ var lodash_mergewith = { exports: {} };
     if (!isObject2(value)) {
       return false;
     }
-    var tag = baseGetTag(value);
-    return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    var tag2 = baseGetTag(value);
+    return tag2 == funcTag || tag2 == genTag || tag2 == asyncTag || tag2 == proxyTag;
   }
   function isLength(value) {
     return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
@@ -2434,6 +2446,26 @@ var pipe = function pipe2() {
     }, v2);
   };
 };
+function flatten(target, maxDepth) {
+  if (maxDepth === void 0) {
+    maxDepth = Infinity;
+  }
+  if (!isObject(target) && !Array.isArray(target) || !maxDepth) {
+    return target;
+  }
+  return Object.entries(target).reduce(function(result, _ref) {
+    var key = _ref[0], value = _ref[1];
+    if (isObject(value) || isArray(value)) {
+      Object.entries(flatten(value, maxDepth - 1)).forEach(function(_ref2) {
+        var childKey = _ref2[0], childValue = _ref2[1];
+        result[key + "." + childKey] = childValue;
+      });
+    } else {
+      result[key] = value;
+    }
+    return result;
+  }, {});
+}
 function valueToPercent(value, min, max) {
   return (value - min) * 100 / (max - min);
 }
@@ -2458,26 +2490,6 @@ function mapResponsive(prop2, mapper) {
   }
   return null;
 }
-function walkObject(target, predicate) {
-  function inner(value, path) {
-    if (path === void 0) {
-      path = [];
-    }
-    if (isArray(value)) {
-      return value.map(function(item, index) {
-        return inner(item, [].concat(path, [String(index)]));
-      });
-    }
-    if (isObject(value)) {
-      return fromEntries(Object.entries(value).map(function(_ref) {
-        var key = _ref[0], child = _ref[1];
-        return [key, inner(child, [].concat(path, [key]))];
-      }));
-    }
-    return predicate(value, path);
-  }
-  return inner(target);
-}
 function createContext(options) {
   if (options === void 0) {
     options = {};
@@ -2504,22 +2516,15 @@ function getValidChildren(children) {
 }
 var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 var defaultIdContext = {
-  prefix: Math.round(Math.random() * 1e10),
-  current: 0
+  current: 1
 };
 var IdContext = /* @__PURE__ */ React.createContext(defaultIdContext);
 var IdProvider = /* @__PURE__ */ React.memo(function(_ref) {
   var children = _ref.children;
-  var currentContext = React.useContext(IdContext);
-  var isRoot = currentContext === defaultIdContext;
-  var context = React.useMemo(function() {
-    return {
-      prefix: isRoot ? 0 : ++currentContext.prefix,
-      current: 0
-    };
-  }, [isRoot, currentContext]);
   return /* @__PURE__ */ React.createElement(IdContext.Provider, {
-    value: context
+    value: {
+      current: 1
+    }
   }, children);
 });
 var reactDom_production_min = {};
@@ -9253,11 +9258,12 @@ function addListener(fn) {
 }
 var root = {
   get: function get2() {
-    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode") || document.documentElement.dataset.theme;
   },
   set: function set(mode2) {
     if (isBrowser) {
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode2);
+      document.documentElement.setAttribute("data-theme", mode2);
     }
   }
 };
@@ -9591,7 +9597,7 @@ function parseGradient(value, theme2) {
     var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" ");
     var key = "colors." + _color;
     var color2 = key in theme2.__cssMap ? theme2.__cssMap[key].varRef : _color;
-    return _stopOrFunc ? [color2, _stopOrFunc].join(" ") : color2;
+    return _stopOrFunc ? [color2].concat(Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]).join(" ") : color2;
   });
   return _type + "(" + _values.join(", ") + ")";
 }
@@ -9690,12 +9696,12 @@ var transformFunctions = {
   },
   flexDirection: function flexDirection(value) {
     var _flexDirectionTemplat;
-    var _ref = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {}, space3 = _ref.space, divide3 = _ref.divide;
+    var _ref = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {}, space2 = _ref.space, divide3 = _ref.divide;
     var result = {
       flexDirection: value
     };
-    if (space3)
-      result[space3] = 1;
+    if (space2)
+      result[space2] = 1;
     if (divide3)
       result[divide3] = 1;
     return result;
@@ -9971,7 +9977,10 @@ var flexbox = {
   order: true,
   placeItems: true,
   placeContent: true,
-  placeSelf: true
+  placeSelf: true,
+  gap: t.space("gap"),
+  rowGap: t.space("rowGap"),
+  columnGap: t.space("columnGap")
 };
 Object.assign(flexbox, {
   flexDir: flexbox.flexDirection
@@ -10049,7 +10058,7 @@ Object.assign(layout, {
   overscrollX: layout.overscrollBehaviorX,
   overscrollY: layout.overscrollBehaviorY
 });
-var list = {
+var list$1 = {
   listStyleType: true,
   listStylePosition: true,
   listStylePos: t.prop("listStylePosition"),
@@ -10120,7 +10129,7 @@ var position = {
   position: true,
   pos: t.prop("position"),
   zIndex: t.prop("zIndex", "zIndices"),
-  inset: t.spaceT(["top", "right", "bottom", "left"]),
+  inset: t.spaceT("inset"),
   insetX: t.spaceT(["left", "right"]),
   insetInline: t.spaceT("insetInline"),
   insetY: t.spaceT(["top", "bottom"]),
@@ -10236,7 +10245,7 @@ var transform8 = {
   scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
   rotate: t.degreeT("--chakra-rotate")
 };
-var transition$2 = {
+var transition$1 = {
   transition: true,
   transitionDelay: true,
   animation: true,
@@ -10280,6 +10289,26 @@ var typography$2 = {
     }
   }
 };
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -10321,40 +10350,53 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-var group = {
-  hover: function hover(selector2) {
-    return selector2 + ":hover &, " + selector2 + "[data-hover] &";
+var state = {
+  hover: function hover(str, post) {
+    return str + ":hover " + post + ", " + str + "[data-hover] " + post;
+  },
+  focus: function focus(str, post) {
+    return str + ":focus " + post + ", " + str + "[data-focus] " + post;
+  },
+  focusVisible: function focusVisible(str, post) {
+    return str + ":focus-visible " + post;
   },
-  focus: function focus(selector2) {
-    return selector2 + ":focus &, " + selector2 + "[data-focus] &";
+  focusWithin: function focusWithin(str, post) {
+    return str + ":focus-within " + post;
   },
-  focusVisible: function focusVisible(selector2) {
-    return selector2 + ":focus-visible &";
+  active: function active(str, post) {
+    return str + ":active " + post + ", " + str + "[data-active] " + post;
   },
-  active: function active(selector2) {
-    return selector2 + ":active &, " + selector2 + "[data-active] &";
+  disabled: function disabled(str, post) {
+    return str + ":disabled " + post + ", " + str + "[data-disabled] " + post;
   },
-  disabled: function disabled(selector2) {
-    return selector2 + ":disabled &, " + selector2 + "[data-disabled] &";
+  invalid: function invalid(str, post) {
+    return str + ":invalid " + post + ", " + str + "[data-invalid] " + post;
   },
-  invalid: function invalid(selector2) {
-    return selector2 + ":invalid &, " + selector2 + "[data-invalid] &";
+  checked: function checked(str, post) {
+    return str + ":checked " + post + ", " + str + "[data-checked] " + post;
   },
-  checked: function checked(selector2) {
-    return selector2 + ":checked &, " + selector2 + "[data-checked] &";
+  indeterminate: function indeterminate(str, post) {
+    return str + ":indeterminate " + post + ", " + str + "[aria-checked=mixed] " + post + ", " + str + "[data-indeterminate] " + post;
   },
-  indeterminate: function indeterminate(selector2) {
-    return selector2 + ":indeterminate &, " + selector2 + "[aria-checked=mixed] &, " + selector2 + "[data-indeterminate] &";
+  readOnly: function readOnly(str, post) {
+    return str + ":read-only " + post + ", " + str + "[readonly] " + post + ", " + str + "[data-read-only] " + post;
   },
-  readOnly: function readOnly(selector2) {
-    return selector2 + ":read-only &, " + selector2 + "[readonly] &, " + selector2 + "[data-read-only] &";
+  expanded: function expanded(str, post) {
+    return str + ":read-only " + post + ", " + str + "[aria-expanded=true] " + post + ", " + str + "[data-expanded] " + post;
   },
-  expanded: function expanded(selector2) {
-    return selector2 + ":read-only &, " + selector2 + "[aria-expanded=true] &, " + selector2 + "[data-expanded] &";
+  placeholderShown: function placeholderShown(str, post) {
+    return str + ":placeholder-shown " + post;
   }
 };
 var toGroup = function toGroup2(fn) {
-  return merge(fn, "[role=group]", "[data-group]", ".group");
+  return merge(function(v2) {
+    return fn(v2, "&");
+  }, "[role=group]", "[data-group]", ".group");
+};
+var toPeer = function toPeer2(fn) {
+  return merge(function(v2) {
+    return fn(v2, "~ &");
+  }, "[data-peer]", ".peer");
 };
 var merge = function merge2(fn) {
   for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -10394,23 +10436,36 @@ var pseudoSelectors = {
   _activeLink: "&[aria-current=page]",
   _activeStep: "&[aria-current=step]",
   _indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
-  _groupHover: toGroup(group.hover),
-  _groupFocus: toGroup(group.focus),
-  _groupFocusVisible: toGroup(group.focusVisible),
-  _groupActive: toGroup(group.active),
-  _groupDisabled: toGroup(group.disabled),
-  _groupInvalid: toGroup(group.invalid),
-  _groupChecked: toGroup(group.checked),
+  _groupHover: toGroup(state.hover),
+  _peerHover: toPeer(state.hover),
+  _groupFocus: toGroup(state.focus),
+  _peerFocus: toPeer(state.focus),
+  _groupFocusVisible: toGroup(state.focusVisible),
+  _peerFocusVisible: toPeer(state.focusVisible),
+  _groupActive: toGroup(state.active),
+  _peerActive: toPeer(state.active),
+  _groupDisabled: toGroup(state.disabled),
+  _peerDisabled: toPeer(state.disabled),
+  _groupInvalid: toGroup(state.invalid),
+  _peerInvalid: toPeer(state.invalid),
+  _groupChecked: toGroup(state.checked),
+  _peerChecked: toPeer(state.checked),
+  _groupFocusWithin: toGroup(state.focusWithin),
+  _peerFocusWithin: toPeer(state.focusWithin),
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
   _placeholder: "&::placeholder",
+  _placeholderShown: "&:placeholder-shown",
   _fullScreen: "&:fullscreen",
   _selection: "&::selection",
-  _rtl: "[dir=rtl] &",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
+  _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]"
 };
 var pseudoPropNames = objectKeys(pseudoSelectors);
-var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter2, ring2, interactivity, grid, others, position, effect, space, typography$2, textDecoration, transform8, list, transition$2);
+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);
@@ -10662,55 +10717,77 @@ function cssVar$1(name, fallback, cssVarPrefix) {
     reference: toVarReference(cssVariable, fallback)
   };
 }
-function createThemeVars(target, options) {
-  var context = {
-    cssMap: {},
-    cssVars: {}
-  };
-  walkObject(target, function(value, path) {
-    var _tokenHandlerMap$firs;
-    var firstKey = path[0];
-    var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler;
-    var _handler = handler(path, value, options), cssVars = _handler.cssVars, cssMap = _handler.cssMap;
-    Object.assign(context.cssVars, cssVars);
-    Object.assign(context.cssMap, cssMap);
-  });
-  return context;
-}
-var tokenHandlerMap = {
-  space: function space2(keys2, value, options) {
-    var _extends2;
-    var properties = tokenHandlerMap.defaultHandler(keys2, value, options);
-    var firstKey = keys2[0], referenceKeys = keys2.slice(1);
-    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-    var negativeVarKey = keys2.join("-");
-    var _cssVar = cssVar$1(negativeVarKey, void 0, options.cssVarPrefix), variable = _cssVar.variable, reference = _cssVar.reference;
-    var negativeValue = calc$1.negate(value);
-    var varRef = calc$1.negate(reference);
-    return {
-      cssVars: properties.cssVars,
-      cssMap: _extends$7({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = {
-        value: "" + negativeValue,
-        "var": "" + variable,
-        varRef
-      }, _extends2))
-    };
-  },
-  defaultHandler: function defaultHandler(keys2, value, options) {
-    var _cssVars, _cssMap;
-    var lookupKey = keys2.join(".");
-    var varKey = keys2.join("-");
-    var _cssVar2 = cssVar$1(varKey, void 0, options.cssVarPrefix), variable = _cssVar2.variable, reference = _cssVar2.reference;
-    return {
-      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
-      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
+function tokenToCssVar(token2, prefix2) {
+  return cssVar$1(String(token2).replace(/\./g, "-"), void 0, prefix2);
+}
+function createThemeVars(flatTokens, options) {
+  var cssVars = {};
+  var cssMap = {};
+  var _loop = function _loop2() {
+    var _Object$entries$_i = _Object$entries[_i], token2 = _Object$entries$_i[0], tokenValue = _Object$entries$_i[1];
+    var isSemantic = tokenValue.isSemantic, value = tokenValue.value;
+    var _tokenToCssVar = tokenToCssVar(token2, options == null ? void 0 : options.cssVarPrefix), variable = _tokenToCssVar.variable, reference = _tokenToCssVar.reference;
+    if (!isSemantic) {
+      if (token2.startsWith("space")) {
+        var keys2 = token2.split(".");
+        var firstKey = keys2[0], referenceKeys = keys2.slice(1);
+        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+        var negativeValue = calc$1.negate(value);
+        var negatedReference = calc$1.negate(reference);
+        cssMap[negativeLookupKey] = {
+          value: negativeValue,
+          "var": variable,
+          varRef: negatedReference
+        };
+      }
+      cssVars[variable] = value;
+      cssMap[token2] = {
         value,
         "var": variable,
         varRef: reference
-      }, _cssMap)
+      };
+      return "continue";
+    }
+    var lookupToken = function lookupToken2(maybeToken) {
+      var scale = String(token2).split(".")[0];
+      var withScale = [scale, maybeToken].join(".");
+      var resolvedTokenValue = flatTokens[withScale];
+      if (!resolvedTokenValue)
+        return maybeToken;
+      var _tokenToCssVar2 = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix), reference2 = _tokenToCssVar2.reference;
+      return reference2;
     };
+    var normalizedValue = isObject(value) ? value : {
+      "default": value
+    };
+    cssVars = mergeWith(cssVars, Object.entries(normalizedValue).reduce(function(acc, _ref) {
+      var _pseudoSelectors$cond, _acc$conditionSelecto;
+      var conditionAlias = _ref[0], conditionValue = _ref[1];
+      var maybeReference = lookupToken(conditionValue);
+      if (conditionAlias === "default") {
+        acc[variable] = maybeReference;
+        return acc;
+      }
+      var conditionSelector = (_pseudoSelectors$cond = pseudoSelectors == null ? void 0 : pseudoSelectors[conditionAlias]) != null ? _pseudoSelectors$cond : conditionAlias;
+      acc[conditionSelector] = (_acc$conditionSelecto = {}, _acc$conditionSelecto[variable] = maybeReference, _acc$conditionSelecto);
+      return acc;
+    }, {}));
+    cssMap[token2] = {
+      value: reference,
+      "var": variable,
+      varRef: reference
+    };
+  };
+  for (var _i = 0, _Object$entries = Object.entries(flatTokens); _i < _Object$entries.length; _i++) {
+    var _ret = _loop();
+    if (_ret === "continue")
+      continue;
   }
-};
+  return {
+    cssVars,
+    cssMap
+  };
+}
 function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null)
     return {};
@@ -10731,6 +10808,9 @@ function extractTokens(theme2) {
   var _tokens = tokens;
   return pick(theme2, _tokens);
 }
+function extractSemanticTokens(theme2) {
+  return theme2.semanticTokens;
+}
 function omitVars(rawTheme) {
   rawTheme.__cssMap;
   rawTheme.__cssVars;
@@ -10738,12 +10818,38 @@ function omitVars(rawTheme) {
   var cleanTheme = _objectWithoutPropertiesLoose$5(rawTheme, _excluded$b);
   return cleanTheme;
 }
+function flattenTokens(_ref) {
+  var _flatten, _flatten2;
+  var tokens2 = _ref.tokens, semanticTokens = _ref.semanticTokens;
+  var tokenEntries = Object.entries((_flatten = flatten(tokens2)) != null ? _flatten : {}).map(function(_ref2) {
+    var token2 = _ref2[0], value = _ref2[1];
+    var enhancedToken = {
+      isSemantic: false,
+      value
+    };
+    return [token2, enhancedToken];
+  });
+  var semanticTokenEntries = Object.entries((_flatten2 = flatten(semanticTokens, 1)) != null ? _flatten2 : {}).map(function(_ref3) {
+    var token2 = _ref3[0], value = _ref3[1];
+    var enhancedToken = {
+      isSemantic: true,
+      value
+    };
+    return [token2, enhancedToken];
+  });
+  return fromEntries([].concat(tokenEntries, semanticTokenEntries));
+}
 function toCSSVar(rawTheme) {
   var _theme$config;
   var theme2 = omitVars(rawTheme);
   var tokens2 = extractTokens(theme2);
+  var semanticTokens = extractSemanticTokens(theme2);
+  var flatTokens = flattenTokens({
+    tokens: tokens2,
+    semanticTokens
+  });
   var cssVarPrefix = (_theme$config = theme2.config) == null ? void 0 : _theme$config.cssVarPrefix;
-  var _createThemeVars = createThemeVars(tokens2, {
+  var _createThemeVars = createThemeVars(flatTokens, {
     cssVarPrefix
   }), cssMap = _createThemeVars.cssMap, cssVars = _createThemeVars.cssVars;
   var defaultCssVars = {
@@ -10860,40 +10966,40 @@ var testOmitPropsOnStringTag = isPropValid;
 var testOmitPropsOnComponent = function testOmitPropsOnComponent2(key) {
   return key !== "theme";
 };
-var getDefaultShouldForwardProp = function getDefaultShouldForwardProp2(tag) {
-  return typeof tag === "string" && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp2(tag2) {
+  return typeof tag2 === "string" && tag2.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
 };
-var composeShouldForwardProps = function composeShouldForwardProps2(tag, options, isReal) {
+var composeShouldForwardProps = function composeShouldForwardProps2(tag2, options, isReal) {
   var shouldForwardProp3;
   if (options) {
     var optionsShouldForwardProp = options.shouldForwardProp;
-    shouldForwardProp3 = tag.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
-      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    shouldForwardProp3 = tag2.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
+      return tag2.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
     } : optionsShouldForwardProp;
   }
   if (typeof shouldForwardProp3 !== "function" && isReal) {
-    shouldForwardProp3 = tag.__emotion_forwardProp;
+    shouldForwardProp3 = tag2.__emotion_forwardProp;
   }
   return shouldForwardProp3;
 };
 var Noop = function Noop2() {
   return null;
 };
-var createStyled = function createStyled2(tag, options) {
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
+var createStyled = function createStyled2(tag2, options) {
+  var isReal = tag2.__emotion_real === tag2;
+  var baseTag = isReal && tag2.__emotion_base || tag2;
   var identifierName;
   var targetClassName;
   if (options !== void 0) {
     identifierName = options.label;
     targetClassName = options.target;
   }
-  var shouldForwardProp3 = composeShouldForwardProps(tag, options, isReal);
+  var shouldForwardProp3 = composeShouldForwardProps(tag2, options, isReal);
   var defaultShouldForwardProp = shouldForwardProp3 || getDefaultShouldForwardProp(baseTag);
   var shouldUseAs = !defaultShouldForwardProp("as");
   return function() {
     var args = arguments;
-    var styles2 = isReal && tag.__emotion_styles !== void 0 ? tag.__emotion_styles.slice(0) : [];
+    var styles2 = isReal && tag2.__emotion_styles !== void 0 ? tag2.__emotion_styles.slice(0) : [];
     if (identifierName !== void 0) {
       styles2.push("label:" + identifierName + ";");
     }
@@ -10946,7 +11052,7 @@ var createStyled = function createStyled2(tag, options) {
       return /* @__PURE__ */ createElement(Fragment$1, null, possiblyStyleElement, ele);
     });
     Styled.displayName = identifierName !== void 0 ? identifierName : "Styled(" + (typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")";
-    Styled.defaultProps = tag.defaultProps;
+    Styled.defaultProps = tag2.defaultProps;
     Styled.__emotion_real = Styled;
     Styled.__emotion_base = baseTag;
     Styled.__emotion_styles = styles2;
@@ -11122,19 +11228,25 @@ function _extends$6() {
   return _extends$6.apply(this, arguments);
 }
 var ThemeProvider2 = function ThemeProvider3(props) {
-  var _props$cssVarsRoot = props.cssVarsRoot, cssVarsRoot = _props$cssVarsRoot === void 0 ? ":host, :root" : _props$cssVarsRoot, theme2 = props.theme, children = props.children;
+  var cssVarsRoot = props.cssVarsRoot, theme2 = props.theme, children = props.children;
   var computedTheme = React.useMemo(function() {
     return toCSSVar(theme2);
   }, [theme2]);
   return /* @__PURE__ */ React.createElement(ThemeProvider$1, {
     theme: computedTheme
-  }, /* @__PURE__ */ React.createElement(Global, {
-    styles: function styles2(theme3) {
-      var _ref;
-      return _ref = {}, _ref[cssVarsRoot] = theme3.__cssVars, _ref;
-    }
+  }, /* @__PURE__ */ React.createElement(CSSVars, {
+    root: cssVarsRoot
   }), children);
 };
+var CSSVars = function CSSVars2(_ref) {
+  var _ref$root = _ref.root, root2 = _ref$root === void 0 ? ":host, :root" : _ref$root;
+  return /* @__PURE__ */ React.createElement(Global, {
+    styles: function styles2(theme2) {
+      var _ref2;
+      return _ref2 = {}, _ref2[root2] = theme2.__cssVars, _ref2;
+    }
+  });
+};
 function useTheme() {
   var theme2 = React.useContext(ThemeContext);
   if (!theme2) {
@@ -11142,10 +11254,10 @@ function useTheme() {
   }
   return theme2;
 }
-var _createContext = createContext({
+createContext({
   name: "StylesContext",
   errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` "
-}), StylesProvider = _createContext[0], useStyles = _createContext[1];
+});
 var GlobalStyle = function GlobalStyle2() {
   var _useColorMode = useColorMode(), colorMode = _useColorMode.colorMode;
   return /* @__PURE__ */ React.createElement(Global, {
@@ -11218,8 +11330,8 @@ function styled(component, options) {
   return newStyled(component, styledOptions)(styleObject);
 }
 var chakra = styled;
-domElements.forEach(function(tag) {
-  chakra[tag] = chakra(tag);
+domElements.forEach(function(tag2) {
+  chakra[tag2] = chakra(tag2);
 });
 function forwardRef(component) {
   return /* @__PURE__ */ React.forwardRef(component);
@@ -11281,6 +11393,83 @@ var ChakraProvider$1 = function ChakraProvider(props) {
     zIndex: portalZIndex
   }, _children) : _children)));
 };
+var spacing = {
+  px: "1px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+};
+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) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$5.apply(this, arguments);
+}
+var largeSizes = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem"
+};
+var container$1 = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+};
+var sizes$l = _extends$5({}, spacing, largeSizes, {
+  container: container$1
+});
 function bound01(n2, max) {
   if (isOnePointZero(n2)) {
     n2 = "100%";
@@ -12498,8 +12687,8 @@ function orient(options) {
     return {};
   return orientation === "vertical" ? vertical : horizontal;
 }
-function _extends$5() {
-  _extends$5 = 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) {
@@ -12510,14 +12699,14 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$4.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$5({
+  return _extends$4({
     base: "0em"
   }, config2);
 };
@@ -12769,20 +12958,64 @@ var switchAnatomy = anatomy("switch").parts("container", "track", "thumb");
 var tableAnatomy = anatomy("table").parts("table", "thead", "tbody", "tr", "th", "td", "tfoot", "caption");
 var tabsAnatomy = anatomy("tabs").parts("root", "tab", "tablist", "tabpanel", "tabpanels", "indicator");
 var tagAnatomy = anatomy("tag").parts("container", "label", "closeButton");
-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) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
+var typography$1 = {
+  letterSpacings: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
+  },
+  lineHeights: {
+    normal: "normal",
+    none: 1,
+    shorter: 1.25,
+    "short": 1.375,
+    base: 1.5,
+    tall: 1.625,
+    taller: "2",
+    "3": ".75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem"
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  },
+  fonts: {
+    heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem"
+  }
+};
 var baseStyleContainer$3 = {
   borderTopWidth: "1px",
   borderColor: "inherit",
@@ -12821,7 +13054,7 @@ var baseStyle$D = {
   panel: baseStylePanel,
   icon: baseStyleIcon$5
 };
-var Accordion = {
+var accordion = {
   parts: accordionAnatomy.keys,
   baseStyle: baseStyle$D
 };
@@ -12909,76 +13142,12 @@ var defaultProps$n = {
   variant: "subtle",
   colorScheme: "blue"
 };
-var Alert = {
+var alert = {
   parts: alertAnatomy.keys,
   baseStyle: baseStyle$C,
   variants: variants$b,
   defaultProps: defaultProps$n
 };
-var spacing = {
-  px: "1px",
-  0.5: "0.125rem",
-  1: "0.25rem",
-  1.5: "0.375rem",
-  2: "0.5rem",
-  2.5: "0.625rem",
-  3: "0.75rem",
-  3.5: "0.875rem",
-  4: "1rem",
-  5: "1.25rem",
-  6: "1.5rem",
-  7: "1.75rem",
-  8: "2rem",
-  9: "2.25rem",
-  10: "2.5rem",
-  12: "3rem",
-  14: "3.5rem",
-  16: "4rem",
-  20: "5rem",
-  24: "6rem",
-  28: "7rem",
-  32: "8rem",
-  36: "9rem",
-  40: "10rem",
-  44: "11rem",
-  48: "12rem",
-  52: "13rem",
-  56: "14rem",
-  60: "15rem",
-  64: "16rem",
-  72: "18rem",
-  80: "20rem",
-  96: "24rem"
-};
-var largeSizes = {
-  max: "max-content",
-  min: "min-content",
-  full: "100%",
-  "3xs": "14rem",
-  "2xs": "16rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "8xl": "90rem"
-};
-var container = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-};
-var sizes$l = _extends$4({}, spacing, largeSizes, {
-  container
-});
-var sizes$m = sizes$l;
 var baseStyleBadge = function baseStyleBadge2(props) {
   return {
     transform: "translate(25%, 25%)",
@@ -13017,7 +13186,7 @@ var baseStyle$B = function baseStyle(props) {
   };
 };
 function getSize$3(size2) {
-  var themeSize = sizes$m[size2];
+  var themeSize = sizes$l[size2];
   return {
     container: {
       width: size2,
@@ -13047,7 +13216,7 @@ var sizes$k = {
 var defaultProps$m = {
   size: "md"
 };
-var Avatar = {
+var avatar = {
   parts: avatarAnatomy.keys,
   baseStyle: baseStyle$B,
   sizes: sizes$k,
@@ -13118,7 +13287,7 @@ var baseStyleLink = {
 var baseStyle$z = {
   link: baseStyleLink
 };
-var Breadcrumb = {
+var breadcrumb = {
   parts: breadcrumbAnatomy.keys,
   baseStyle: baseStyle$z
 };
@@ -13171,7 +13340,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$4({
+  return _extends$5({
     border: "1px solid",
     borderColor: c2 === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -13289,7 +13458,7 @@ var defaultProps$k = {
   size: "md",
   colorScheme: "gray"
 };
-var Button = {
+var button = {
   baseStyle: baseStyle$y,
   variants: variants$9,
   sizes: sizes$j,
@@ -13436,7 +13605,7 @@ var sizes$h = {
 var defaultProps$i = {
   size: "md"
 };
-var CloseButton = {
+var closeButton = {
   baseStyle: baseStyle$w,
   sizes: sizes$h,
   defaultProps: defaultProps$i
@@ -13448,7 +13617,7 @@ var baseStyle$v = {
   px: "0.2em",
   borderRadius: "sm"
 };
-var Code = {
+var code = {
   baseStyle: baseStyle$v,
   variants: variants$8,
   defaultProps: defaultProps$h
@@ -13459,7 +13628,7 @@ var baseStyle$u = {
   maxW: "60ch",
   px: "1rem"
 };
-var Container = {
+var container = {
   baseStyle: baseStyle$u
 };
 var baseStyle$t = {
@@ -13479,7 +13648,7 @@ var variants$7 = {
 var defaultProps$g = {
   variant: "solid"
 };
-var Divider = {
+var divider = {
   baseStyle: baseStyle$t,
   variants: variants$7,
   defaultProps: defaultProps$g
@@ -13510,7 +13679,7 @@ var baseStyleDialogContainer$1 = {
 };
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$4({}, isFullHeight && {
+  return _extends$5({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -13563,7 +13732,7 @@ var sizes$g = {
 var defaultProps$f = {
   size: "xs"
 };
-var Drawer = {
+var drawer = {
   parts: drawerAnatomy.keys,
   baseStyle: baseStyle$s,
   sizes: sizes$g,
@@ -13592,7 +13761,7 @@ var baseStyle$r = {
   preview: baseStylePreview,
   input: baseStyleInput
 };
-var Editable = {
+var editable = {
   parts: editableAnatomy.keys,
   baseStyle: baseStyle$r
 };
@@ -13620,11 +13789,35 @@ var baseStyle$q = function baseStyle5(props) {
     helperText: baseStyleHelperText(props)
   };
 };
-var Form = {
+var form = {
   parts: formAnatomy.keys,
   baseStyle: baseStyle$q
 };
-var baseStyle$p = {
+var baseStyleText = function baseStyleText2(props) {
+  return {
+    color: mode("red.500", "red.300")(props),
+    mt: 2,
+    fontSize: "sm",
+    lineHeight: "normal"
+  };
+};
+var baseStyleIcon$3 = function baseStyleIcon(props) {
+  return {
+    marginEnd: "0.5em",
+    color: mode("red.500", "red.300")(props)
+  };
+};
+var baseStyle$p = function baseStyle6(props) {
+  return {
+    text: baseStyleText(props),
+    icon: baseStyleIcon$3(props)
+  };
+};
+var formError = {
+  parts: formErrorAnatomy.keys,
+  baseStyle: baseStyle$p
+};
+var baseStyle$o = {
   fontSize: "md",
   marginEnd: 3,
   mb: 2,
@@ -13636,10 +13829,10 @@ var baseStyle$p = {
     opacity: 0.4
   }
 };
-var FormLabel = {
-  baseStyle: baseStyle$p
+var formLabel = {
+  baseStyle: baseStyle$o
 };
-var baseStyle$o = {
+var baseStyle$n = {
   fontFamily: "heading",
   fontWeight: "bold"
 };
@@ -13680,12 +13873,12 @@ var sizes$f = {
 var defaultProps$e = {
   size: "xl"
 };
-var Heading$1 = {
-  baseStyle: baseStyle$o,
+var heading = {
+  baseStyle: baseStyle$n,
   sizes: sizes$f,
   defaultProps: defaultProps$e
 };
-var baseStyle$n = {
+var baseStyle$m = {
   field: {
     width: "100%",
     minWidth: 0,
@@ -13873,12 +14066,12 @@ var defaultProps$d = {
 };
 var Input = {
   parts: inputAnatomy.keys,
-  baseStyle: baseStyle$n,
+  baseStyle: baseStyle$m,
   sizes: sizes$e,
   variants: variants$6,
   defaultProps: defaultProps$d
 };
-var baseStyle$m = function baseStyle6(props) {
+var baseStyle$l = function baseStyle7(props) {
   return {
     bg: mode("gray.100", "whiteAlpha")(props),
     borderRadius: "md",
@@ -13891,10 +14084,10 @@ var baseStyle$m = function baseStyle6(props) {
     whiteSpace: "nowrap"
   };
 };
-var Kbd = {
-  baseStyle: baseStyle$m
+var kbd = {
+  baseStyle: baseStyle$l
 };
-var baseStyle$l = {
+var baseStyle$k = {
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -13909,22 +14102,22 @@ var baseStyle$l = {
     boxShadow: "outline"
   }
 };
-var Link$1 = {
-  baseStyle: baseStyle$l
+var link = {
+  baseStyle: baseStyle$k
 };
-var baseStyleIcon$3 = {
+var baseStyleIcon$2 = {
   marginEnd: "0.5rem",
   display: "inline",
   verticalAlign: "text-bottom"
 };
-var baseStyle$k = {
+var baseStyle$j = {
   container: {},
   item: {},
-  icon: baseStyleIcon$3
+  icon: baseStyleIcon$2
 };
-var List$1 = {
+var list = {
   parts: listAnatomy.keys,
-  baseStyle: baseStyle$k
+  baseStyle: baseStyle$j
 };
 var baseStyleList = function baseStyleList2(props) {
   return {
@@ -13980,7 +14173,7 @@ var baseStyleButton = {
   transitionProperty: "common",
   transitionDuration: "normal"
 };
-var baseStyle$j = function baseStyle7(props) {
+var baseStyle$i = function baseStyle8(props) {
   return {
     button: baseStyleButton,
     list: baseStyleList(props),
@@ -13990,9 +14183,9 @@ var baseStyle$j = function baseStyle7(props) {
     divider: baseStyleDivider
   };
 };
-var Menu = {
+var menu = {
   parts: menuAnatomy.keys,
-  baseStyle: baseStyle$j
+  baseStyle: baseStyle$i
 };
 var baseStyleOverlay = {
   bg: "blackAlpha.600",
@@ -14044,7 +14237,7 @@ var baseStyleFooter$1 = {
   px: 6,
   py: 4
 };
-var baseStyle$i = function baseStyle8(props) {
+var baseStyle$h = function baseStyle9(props) {
   return {
     overlay: baseStyleOverlay,
     dialogContainer: baseStyleDialogContainer(props),
@@ -14061,6 +14254,9 @@ function getSize$1(value) {
       dialog: {
         maxW: "100vw",
         minH: "100vh",
+        "@supports(min-height: -webkit-fill-available)": {
+          minH: "-webkit-fill-available"
+        },
         my: 0
       }
     };
@@ -14087,71 +14283,12 @@ var sizes$d = {
 var defaultProps$c = {
   size: "md"
 };
-var Modal = {
+var modal = {
   parts: modalAnatomy.keys,
-  baseStyle: baseStyle$i,
+  baseStyle: baseStyle$h,
   sizes: sizes$d,
   defaultProps: defaultProps$c
 };
-var typography$1 = {
-  letterSpacings: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
-  },
-  lineHeights: {
-    normal: "normal",
-    none: 1,
-    shorter: 1.25,
-    "short": 1.375,
-    base: 1.5,
-    tall: 1.625,
-    taller: "2",
-    "3": ".75rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "7": "1.75rem",
-    "8": "2rem",
-    "9": "2.25rem",
-    "10": "2.5rem"
-  },
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900
-  },
-  fonts: {
-    heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
-  },
-  fontSizes: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    md: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem",
-    "7xl": "4.5rem",
-    "8xl": "6rem",
-    "9xl": "8rem"
-  }
-};
-var typography$1$1 = typography$1;
 var _baseStyleRoot, _Input$baseStyle$fiel, _Input$baseStyle;
 var variants$5 = Input.variants, defaultProps$b = Input.defaultProps;
 var $stepperWidth = cssVar("number-input-stepper-width");
@@ -14176,7 +14313,7 @@ var baseStyleStepper = function baseStyleStepper2(props) {
     }
   };
 };
-var baseStyle$h = function baseStyle9(props) {
+var baseStyle$g = function baseStyle10(props) {
   return {
     root: baseStyleRoot$1,
     field: baseStyleField$1,
@@ -14194,9 +14331,9 @@ function getSize(size2) {
     xs: "sm"
   };
   var _fontSize = (_sizeStyle$field$font = (_sizeStyle$field = sizeStyle.field) == null ? void 0 : _sizeStyle$field.fontSize) != null ? _sizeStyle$field$font : "md";
-  var fontSize = typography$1$1.fontSizes[_fontSize.toString()];
+  var fontSize = typography$1.fontSizes[_fontSize.toString()];
   return {
-    field: _extends$4({}, sizeStyle.field, {
+    field: _extends$5({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -14219,15 +14356,15 @@ var sizes$c = {
   md: getSize("md"),
   lg: getSize("lg")
 };
-var NumberInput = {
+var numberInput = {
   parts: numberInputAnatomy.keys,
-  baseStyle: baseStyle$h,
+  baseStyle: baseStyle$g,
   sizes: sizes$c,
   variants: variants$5,
   defaultProps: defaultProps$b
 };
 var _Input$variants$unsty$1;
-var baseStyle$g = _extends$4({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$5({}, Input.baseStyle.field, {
   textAlign: "center"
 });
 var sizes$b = {
@@ -14272,8 +14409,8 @@ var variants$4 = {
   unstyled: (_Input$variants$unsty$1 = Input.variants.unstyled.field) != null ? _Input$variants$unsty$1 : {}
 };
 var defaultProps$a = Input.defaultProps;
-var PinInput = {
-  baseStyle: baseStyle$g,
+var pinInput = {
+  baseStyle: baseStyle$f,
   sizes: sizes$b,
   variants: variants$4,
   defaultProps: defaultProps$a
@@ -14314,7 +14451,7 @@ var baseStyleCloseButton$1 = {
   insetEnd: 2,
   padding: 2
 };
-var baseStyle$f = function baseStyle10(props) {
+var baseStyle$e = function baseStyle11(props) {
   return {
     popper: baseStylePopper,
     content: baseStyleContent(props),
@@ -14325,9 +14462,9 @@ var baseStyle$f = function baseStyle10(props) {
     closeButton: baseStyleCloseButton$1
   };
 };
-var Popover = {
+var popover = {
   parts: popoverAnatomy.keys,
-  baseStyle: baseStyle$f
+  baseStyle: baseStyle$e
 };
 function filledStyle(props) {
   var c2 = props.colorScheme, t2 = props.theme, isIndeterminate = props.isIndeterminate, hasStripe = props.hasStripe;
@@ -14335,7 +14472,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$4({}, addStripe && stripeStyle, isIndeterminate ? {
+  return _extends$5({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor
@@ -14353,12 +14490,12 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
   };
 };
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$4({
+  return _extends$5({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
 };
-var baseStyle$e = function baseStyle11(props) {
+var baseStyle$d = function baseStyle12(props) {
   return {
     label: baseStyleLabel$2,
     filledTrack: baseStyleFilledTrack$1(props),
@@ -14391,17 +14528,17 @@ var defaultProps$9 = {
   size: "md",
   colorScheme: "blue"
 };
-var Progress$1 = {
+var progress = {
   parts: progressAnatomy.keys,
   sizes: sizes$a,
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$d,
   defaultProps: defaultProps$9
 };
 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$4({}, control, {
+  return _extends$5({}, control, {
     borderRadius: "full",
-    _checked: _extends$4({}, control["_checked"], {
+    _checked: _extends$5({}, control["_checked"], {
       _before: {
         content: '""',
         display: "inline-block",
@@ -14414,7 +14551,7 @@ var baseStyleControl2 = function baseStyleControl3(props) {
     })
   });
 };
-var baseStyle$d = function baseStyle12(props) {
+var baseStyle$c = function baseStyle13(props) {
   return {
     label: Checkbox.baseStyle(props).label,
     control: baseStyleControl2(props)
@@ -14453,14 +14590,14 @@ var defaultProps$8 = {
   size: "md",
   colorScheme: "blue"
 };
-var Radio = {
+var radio = {
   parts: radioAnatomy.keys,
-  baseStyle: baseStyle$d,
+  baseStyle: baseStyle$c,
   sizes: sizes$9,
   defaultProps: defaultProps$8
 };
 var baseStyleField = function baseStyleField2(props) {
-  return _extends$4({}, Input.baseStyle.field, {
+  return _extends$5({}, Input.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -14470,7 +14607,7 @@ var baseStyleField = function baseStyleField2(props) {
     }
   });
 };
-var baseStyleIcon$2 = {
+var baseStyleIcon$1 = {
   width: "1.5rem",
   height: "100%",
   insetEnd: "0.5rem",
@@ -14481,10 +14618,10 @@ var baseStyleIcon$2 = {
     opacity: 0.5
   }
 };
-var baseStyle$c = function baseStyle13(props) {
+var baseStyle$b = function baseStyle14(props) {
   return {
     field: baseStyleField(props),
-    icon: baseStyleIcon$2
+    icon: baseStyleIcon$1
   };
 };
 var iconSpacing = {
@@ -14507,9 +14644,9 @@ var sizes$8 = mergeWith({}, Input.sizes, {
     }
   }
 });
-var Select = {
+var select = {
   parts: selectAnatomy.keys,
-  baseStyle: baseStyle$c,
+  baseStyle: baseStyle$b,
   sizes: sizes$8,
   variants: Input.variants,
   defaultProps: Input.defaultProps
@@ -14526,7 +14663,7 @@ var fade = function fade2(startColor, endColor) {
     }
   });
 };
-var baseStyle$b = function baseStyle14(props) {
+var baseStyle$a = function baseStyle15(props) {
   var defaultStartColor = mode("gray.100", "gray.800")(props);
   var defaultEndColor = mode("gray.400", "gray.600")(props);
   var _props$startColor = props.startColor, startColor = _props$startColor === void 0 ? defaultStartColor : _props$startColor, _props$endColor = props.endColor, endColor = _props$endColor === void 0 ? defaultEndColor : _props$endColor, speed = props.speed, theme2 = props.theme;
@@ -14540,10 +14677,10 @@ var baseStyle$b = function baseStyle14(props) {
     animation: speed + "s linear infinite alternate " + fade(start, end)
   };
 };
-var Skeleton = {
-  baseStyle: baseStyle$b
+var skeleton = {
+  baseStyle: baseStyle$a
 };
-var baseStyle$a = function baseStyle15(props) {
+var baseStyle$9 = function baseStyle16(props) {
   return {
     borderRadius: "md",
     fontWeight: "semibold",
@@ -14557,8 +14694,8 @@ var baseStyle$a = function baseStyle15(props) {
     }
   };
 };
-var SkipLink = {
-  baseStyle: baseStyle$a
+var skipLink = {
+  baseStyle: baseStyle$9
 };
 function thumbOrientation(props) {
   return orient({
@@ -14581,7 +14718,7 @@ function thumbOrientation(props) {
 }
 var baseStyleContainer$1 = function baseStyleContainer2(props) {
   var orientation = props.orientation;
-  return _extends$4({
+  return _extends$5({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -14611,7 +14748,7 @@ var baseStyleTrack$1 = function baseStyleTrack2(props) {
   };
 };
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$4({
+  return _extends$5({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -14641,7 +14778,7 @@ var baseStyleFilledTrack2 = function baseStyleFilledTrack3(props) {
     bg: mode(c2 + ".500", c2 + ".200")(props)
   };
 };
-var baseStyle$9 = function baseStyle16(props) {
+var baseStyle$8 = function baseStyle17(props) {
   return {
     container: baseStyleContainer$1(props),
     track: baseStyleTrack$1(props),
@@ -14709,15 +14846,15 @@ var defaultProps$7 = {
   size: "md",
   colorScheme: "blue"
 };
-var Slider = {
+var slider = {
   parts: sliderAnatomy.keys,
   sizes: sizes$7,
-  baseStyle: baseStyle$9,
+  baseStyle: baseStyle$8,
   defaultProps: defaultProps$7
 };
 var _xs, _sm, _md, _lg, _xl;
 var $size = cssVar("spinner-size");
-var baseStyle$8 = {
+var baseStyle$7 = {
   width: [$size.reference],
   height: [$size.reference]
 };
@@ -14731,8 +14868,8 @@ var sizes$6 = {
 var defaultProps$6 = {
   size: "md"
 };
-var Spinner = {
-  baseStyle: baseStyle$8,
+var spinner = {
+  baseStyle: baseStyle$7,
   sizes: sizes$6,
   defaultProps: defaultProps$6
 };
@@ -14747,18 +14884,18 @@ var baseStyleNumber = {
   verticalAlign: "baseline",
   fontWeight: "semibold"
 };
-var baseStyleIcon$1 = {
+var baseStyleIcon2 = {
   marginEnd: 1,
   w: "14px",
   h: "14px",
   verticalAlign: "middle"
 };
-var baseStyle$7 = {
+var baseStyle$6 = {
   container: {},
   label: baseStyleLabel$1,
   helpText: baseStyleHelpText,
   number: baseStyleNumber,
-  icon: baseStyleIcon$1
+  icon: baseStyleIcon2
 };
 var sizes$5 = {
   md: {
@@ -14776,9 +14913,9 @@ var sizes$5 = {
 var defaultProps$5 = {
   size: "md"
 };
-var Stat = {
+var stat = {
   parts: statAnatomy.keys,
-  baseStyle: baseStyle$7,
+  baseStyle: baseStyle$6,
   sizes: sizes$5,
   defaultProps: defaultProps$5
 };
@@ -14821,7 +14958,7 @@ var baseStyleThumb2 = {
     transform: "translateX(" + $translateX.reference + ")"
   }
 };
-var baseStyle$6 = function baseStyle17(props) {
+var baseStyle$5 = function baseStyle18(props) {
   var _rtl, _container;
   return {
     container: (_container = {}, _container[$diff.variable] = diffValue, _container[$translateX.variable] = $diff.reference, _container._rtl = (_rtl = {}, _rtl[$translateX.variable] = calc($diff).negate().toString(), _rtl), _container),
@@ -14844,13 +14981,13 @@ var defaultProps$4 = {
   size: "md",
   colorScheme: "blue"
 };
-var Switch = {
+var _switch = {
   parts: switchAnatomy.keys,
-  baseStyle: baseStyle$6,
+  baseStyle: baseStyle$5,
   sizes: sizes$4,
   defaultProps: defaultProps$4
 };
-var baseStyle$5 = {
+var baseStyle$4 = {
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
     borderCollapse: "collapse",
@@ -14881,12 +15018,12 @@ var numericStyles = {
 var variantSimple = function variantSimple2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$4({
+    th: _extends$5({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$4({
+    td: _extends$5({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -14907,12 +15044,12 @@ var variantSimple = function variantSimple2(props) {
 var variantStripe = function variantStripe2(props) {
   var c2 = props.colorScheme;
   return {
-    th: _extends$4({
+    th: _extends$5({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
-    td: _extends$4({
+    td: _extends$5({
       borderBottom: "1px",
       borderColor: mode(c2 + ".100", c2 + ".700")(props)
     }, numericStyles),
@@ -15010,9 +15147,9 @@ var defaultProps$3 = {
   size: "md",
   colorScheme: "gray"
 };
-var Table = {
+var table = {
   parts: tableAnatomy.keys,
-  baseStyle: baseStyle$5,
+  baseStyle: baseStyle$4,
   variants: variants$3,
   sizes: sizes$3,
   defaultProps: defaultProps$3
@@ -15050,7 +15187,7 @@ var baseStyleTablist = function baseStyleTablist2(props) {
 var baseStyleTabpanel = {
   p: 4
 };
-var baseStyle$4 = function baseStyle18(props) {
+var baseStyle$3 = function baseStyle19(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -15189,9 +15326,9 @@ var defaultProps$2 = {
   variant: "line",
   colorScheme: "blue"
 };
-var Tabs = {
+var tabs = {
   parts: tabsAnatomy.keys,
-  baseStyle: baseStyle$4,
+  baseStyle: baseStyle$3,
   sizes: sizes$2,
   variants: variants$2,
   defaultProps: defaultProps$2
@@ -15232,7 +15369,7 @@ var baseStyleCloseButton = {
     opacity: 1
   }
 };
-var baseStyle$3 = {
+var baseStyle$2 = {
   container: baseStyleContainer3,
   label: baseStyleLabel,
   closeButton: baseStyleCloseButton
@@ -15292,15 +15429,15 @@ var defaultProps$1 = {
   variant: "subtle",
   colorScheme: "gray"
 };
-var Tag = {
+var tag = {
   parts: tagAnatomy.keys,
   variants: variants$1,
-  baseStyle: baseStyle$3,
+  baseStyle: baseStyle$2,
   sizes: sizes$1,
   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$2 = _extends$4({}, Input.baseStyle.field, {
+var baseStyle$1 = _extends$5({}, Input.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -15331,87 +15468,65 @@ var defaultProps = {
   size: "md",
   variant: "outline"
 };
-var Textarea = {
-  baseStyle: baseStyle$2,
+var textarea = {
+  baseStyle: baseStyle$1,
   sizes,
   variants,
   defaultProps
 };
 var $bg = cssVar("tooltip-bg");
 var $arrowBg = cssVar("popper-arrow-bg");
-var baseStyle$1 = function baseStyle19(props) {
+var baseStyle20 = function baseStyle21(props) {
   var _ref;
   var bg2 = mode("gray.700", "gray.300")(props);
   return _ref = {}, _ref[$bg.variable] = "colors." + bg2, _ref.px = "8px", _ref.py = "2px", _ref.bg = [$bg.reference], _ref[$arrowBg.variable] = [$bg.reference], _ref.color = mode("whiteAlpha.900", "gray.900")(props), _ref.borderRadius = "sm", _ref.fontWeight = "medium", _ref.fontSize = "sm", _ref.boxShadow = "md", _ref.maxW = "320px", _ref.zIndex = "tooltip", _ref;
 };
-var Tooltip = {
-  baseStyle: baseStyle$1
-};
-var baseStyleText = function baseStyleText2(props) {
-  return {
-    color: mode("red.500", "red.300")(props),
-    mt: 2,
-    fontSize: "sm"
-  };
-};
-var baseStyleIcon = function baseStyleIcon2(props) {
-  return {
-    marginEnd: "0.5em",
-    color: mode("red.500", "red.300")(props)
-  };
-};
-var baseStyle20 = function baseStyle21(props) {
-  return {
-    text: baseStyleText(props),
-    icon: baseStyleIcon(props)
-  };
-};
-var FormError = {
-  parts: formErrorAnatomy.keys,
+var tooltip = {
   baseStyle: baseStyle20
 };
-var components = {
-  Accordion,
-  Alert,
-  Avatar,
+var components = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  Accordion: accordion,
+  Alert: alert,
+  Avatar: avatar,
   Badge,
-  Breadcrumb,
-  Button,
+  Breadcrumb: breadcrumb,
+  Button: button,
   Checkbox,
-  CloseButton,
-  Code,
-  Container,
-  Divider,
-  Drawer,
-  Editable,
-  Form,
-  FormLabel,
-  Heading: Heading$1,
+  CloseButton: closeButton,
+  Code: code,
+  Container: container,
+  Divider: divider,
+  Drawer: drawer,
+  Editable: editable,
+  Form: form,
+  FormError: formError,
+  FormLabel: formLabel,
+  Heading: heading,
   Input,
-  Kbd,
-  Link: Link$1,
-  List: List$1,
-  Menu,
-  Modal,
-  NumberInput,
-  PinInput,
-  Popover,
-  Progress: Progress$1,
-  Radio,
-  Select,
-  Skeleton,
-  SkipLink,
-  Slider,
-  Spinner,
-  Stat,
-  Switch,
-  Table,
-  Tabs,
-  Tag,
-  Textarea,
-  Tooltip,
-  FormError
-};
+  Kbd: kbd,
+  Link: link,
+  List: list,
+  Menu: menu,
+  Modal: modal,
+  NumberInput: numberInput,
+  PinInput: pinInput,
+  Popover: popover,
+  Progress: progress,
+  Radio: radio,
+  Select: select,
+  Skeleton: skeleton,
+  SkipLink: skipLink,
+  Slider: slider,
+  Spinner: spinner,
+  Stat: stat,
+  Switch: _switch,
+  Table: table,
+  Tabs: tabs,
+  Tag: tag,
+  Textarea: textarea,
+  Tooltip: tooltip
+});
 var borders$1 = {
   none: 0,
   "1px": "1px solid",
@@ -15419,7 +15534,6 @@ var borders$1 = {
   "4px": "4px solid",
   "8px": "8px solid"
 };
-var borders$1$1 = borders$1;
 var breakpoints = createBreakpoints({
   sm: "30em",
   md: "48em",
@@ -15427,7 +15541,6 @@ var breakpoints = createBreakpoints({
   xl: "80em",
   "2xl": "96em"
 });
-var breakpoints$1 = breakpoints;
 var colors$1 = {
   transparent: "transparent",
   current: "currentColor",
@@ -15650,7 +15763,6 @@ var colors$1 = {
     900: "#003F5E"
   }
 };
-var colors$1$1 = colors$1;
 var radii$1 = {
   none: "0",
   sm: "0.125rem",
@@ -15662,7 +15774,6 @@ var radii$1 = {
   "3xl": "1.5rem",
   full: "9999px"
 };
-var radii$1$1 = radii$1;
 var shadows = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -15676,7 +15787,6 @@ var shadows = {
   none: "none",
   "dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
 };
-var shadows$1 = shadows;
 var transitionProperty = {
   common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
   colors: "background-color, border-color, color, fill, stroke",
@@ -15703,7 +15813,6 @@ var transition = {
   easing: transitionTimingFunction,
   duration: transitionDuration
 };
-var transition$1 = transition;
 var zIndices = {
   hide: -1,
   auto: "auto",
@@ -15719,7 +15828,6 @@ var zIndices = {
   toast: 1700,
   tooltip: 1800
 };
-var zIndices$1 = zIndices;
 var blur2 = {
   none: 0,
   sm: "4px",
@@ -15730,21 +15838,19 @@ var blur2 = {
   "2xl": "40px",
   "3xl": "64px"
 };
-var blur$1 = blur2;
-var foundations = _extends$4({
-  breakpoints: breakpoints$1,
-  zIndices: zIndices$1,
-  radii: radii$1$1,
-  blur: blur$1,
-  colors: colors$1$1
-}, typography$1$1, {
-  sizes: sizes$m,
-  shadows: shadows$1,
+var foundations = _extends$5({
+  breakpoints,
+  zIndices,
+  radii: radii$1,
+  blur: blur2,
+  colors: colors$1
+}, typography$1, {
+  sizes: sizes$l,
+  shadows,
   space: spacing,
-  borders: borders$1$1,
-  transition: transition$1
+  borders: borders$1,
+  transition
 });
-var foundations$1 = foundations;
 var styles$1 = {
   global: function global2(props) {
     return {
@@ -15782,9 +15888,9 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme$1 = _extends$4({
+var theme$1 = _extends$5({
   direction
-}, foundations$1, {
+}, foundations, {
   components,
   styles: styles$1$1,
   config
@@ -16068,6 +16174,10 @@ var Link = /* @__PURE__ */ forwardRef(function(props, ref) {
   }));
 });
 var _excluded$5 = ["children", "styleType", "stylePosition", "spacing"];
+var _createContext = createContext({
+  name: "StylesContext",
+  errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in a `<*List />` "
+}), StylesProvider = _createContext[0], useStyles = _createContext[1];
 var List = /* @__PURE__ */ forwardRef(function(props, ref) {
   var _ref;
   var styles2 = useMultiStyleConfig("List", props);
@@ -16186,7 +16296,7 @@ var StackItem = function StackItem2(props) {
 };
 var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
   var _ref;
-  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, divider = props.divider, className = props.className, shouldWrapChildren = props.shouldWrapChildren, rest = _objectWithoutPropertiesLoose$1(props, _excluded$3);
+  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$1(props, _excluded$3);
   var direction2 = isInline ? "row" : directionProp != null ? directionProp : "column";
   var styles2 = React.useMemo(function() {
     return getStackStyles({
@@ -16200,7 +16310,7 @@ var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
       direction: direction2
     });
   }, [spacing2, direction2]);
-  var hasDivider = !!divider;
+  var hasDivider = !!divider2;
   var shouldUseChildren = !shouldWrapChildren && !hasDivider;
   var validChildren = getValidChildren(children);
   var clones = shouldUseChildren ? validChildren : validChildren.map(function(child, index) {
@@ -16212,7 +16322,7 @@ var Stack = /* @__PURE__ */ forwardRef(function(props, ref) {
     var _child = shouldWrapChildren ? wrappedChild : child;
     if (!hasDivider)
       return _child;
-    var clonedDivider = /* @__PURE__ */ React.cloneElement(divider, {
+    var clonedDivider = /* @__PURE__ */ React.cloneElement(divider2, {
       __css: dividerStyle
     });
     var _divider = isLast ? null : clonedDivider;
@@ -16461,7 +16571,7 @@ var Shape = function Shape2(props) {
 var CircularProgress = function CircularProgress2(props) {
   var _progress$percent;
   var _props$size = props.size, size2 = _props$size === void 0 ? "48px" : _props$size, _props$max = props.max, max = _props$max === void 0 ? 100 : _props$max, _props$min = props.min, min = _props$min === void 0 ? 0 : _props$min, valueText = props.valueText, getValueText = props.getValueText, value = props.value, capIsRound = props.capIsRound, children = props.children, _props$thickness = props.thickness, thickness = _props$thickness === void 0 ? "10px" : _props$thickness, _props$color = props.color, color2 = _props$color === void 0 ? "#0078d4" : _props$color, _props$trackColor = props.trackColor, trackColor = _props$trackColor === void 0 ? "#edebe9" : _props$trackColor, isIndeterminate = props.isIndeterminate, rest = _objectWithoutPropertiesLoose(props, _excluded2$1);
-  var progress = getProgressProps({
+  var progress2 = getProgressProps({
     min,
     max,
     value,
@@ -16469,7 +16579,7 @@ var CircularProgress = function CircularProgress2(props) {
     getValueText,
     isIndeterminate
   });
-  var determinant = isIndeterminate ? void 0 : ((_progress$percent = progress.percent) != null ? _progress$percent : 0) * 2.64;
+  var determinant = isIndeterminate ? void 0 : ((_progress$percent = progress2.percent) != null ? _progress$percent : 0) * 2.64;
   var strokeDasharray = isUndefined(determinant) ? void 0 : determinant + " " + (264 - determinant);
   var indicatorProps = isIndeterminate ? {
     css: {
@@ -16490,7 +16600,7 @@ var CircularProgress = function CircularProgress2(props) {
   };
   return /* @__PURE__ */ React.createElement(chakra.div, _extends({
     className: "chakra-progress"
-  }, progress.bind, rest, {
+  }, progress2.bind, rest, {
     __css: rootStyles
   }), /* @__PURE__ */ React.createElement(Shape, {
     size: size2,
@@ -16504,7 +16614,7 @@ var CircularProgress = function CircularProgress2(props) {
     strokeWidth: thickness,
     className: "chakra-progress__indicator",
     strokeLinecap: capIsRound ? "round" : void 0,
-    opacity: progress.value === 0 && !isIndeterminate ? 0 : void 0
+    opacity: progress2.value === 0 && !isIndeterminate ? 0 : void 0
   }, indicatorProps))), children);
 };
 chakra("div", {
@@ -16756,9 +16866,9 @@ var createRipples = function(defaultProps2) {
         var left = pageX - (rect.left + window.scrollX);
         var top = pageY - (rect.top + window.scrollY);
         var size2 = Math.max(rect.width, rect.height);
-        _this.setState(function(state) {
+        _this.setState(function(state2) {
           return {
-            rippleStyle: __assign$1({}, state.rippleStyle, {
+            rippleStyle: __assign$1({}, state2.rippleStyle, {
               left,
               top,
               opacity: 1,
@@ -16769,9 +16879,9 @@ var createRipples = function(defaultProps2) {
           };
         }, function() {
           _this.timer = setTimeout(function() {
-            _this.setState(function(state) {
+            _this.setState(function(state2) {
               return {
-                rippleStyle: __assign$1({}, state.rippleStyle, { opacity: 0, transform: "scale(" + size2 / 9 + ")", transition: "all " + during + "ms" })
+                rippleStyle: __assign$1({}, state2.rippleStyle, { opacity: 0, transform: "scale(" + size2 / 9 + ")", transition: "all " + during + "ms" })
               };
             });
           }, 50);
@@ -17074,10 +17184,10 @@ function Section() {
     name,
     dateStatus,
     information,
-    progress,
+    progress: progress2,
     status
   } = React.useContext(CourseBoxContext);
-  if (progress == null) {
+  if (progress2 == null) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Box, {
@@ -17109,20 +17219,20 @@ function Section() {
       justify: "space-between",
       children: [/* @__PURE__ */ jsxs(Flex, {
         children: [/* @__PURE__ */ jsx(IconSelection, {
-          type: progress.icon,
-          progressValue: progress.progress
+          type: progress2.icon,
+          progressValue: progress2.progress
         }), /* @__PURE__ */ jsx(Text, {
           m: "0",
           ml: ".625rem",
           fontSize: ".875rem",
           lineHeight: "1.125rem",
-          children: progress == null ? void 0 : progress.label
+          children: progress2 == null ? void 0 : progress2.label
         })]
-      }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress == null ? void 0 : progress.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
+      }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress2 == null ? void 0 : progress2.finalGrade) && (progress2 == null ? void 0 : progress2.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
         size: "sm",
-        bg: progress.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
+        bg: progress2.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
         color: vars("colors-neutral-white"),
-        children: progress == null ? void 0 : progress.finalGrade
+        children: progress2 == null ? void 0 : progress2.finalGrade
       })]
     }), information != null && (information == null ? void 0 : information.length) > 0 && /* @__PURE__ */ jsx(List, {
       spacing: ".625rem",
@@ -17874,7 +17984,7 @@ function Footer() {
         href: action.href,
         color: vars("colors-main-deepSkyBlue"),
         fontWeight: "500",
-        mr: "1.5rem",
+        mr: action.hasIcon ? "1.5rem" : "0",
         lineHeight: "1.172rem",
         isExternal: action.targetBlank,
         children: action.text