@cronocode/react-box 3.1.12 → 3.2.0

package/core.mjs

@@ -1,80 +1,80 @@
-import we, { useContext as xe, useState as de, useLayoutEffect as U, useMemo as le, useEffect as ge, useRef as Ne } from "react";
-import { jsx as $ } from "react/jsx-runtime";
-import T from "./components/baseSvg.mjs";
+import we, { useContext as xe, useState as Z, useRef as fe, useCallback as Ne, useLayoutEffect as B, useMemo as se, useEffect as me } from "react";
+import { jsx as z } from "react/jsx-runtime";
+import H from "./components/baseSvg.mjs";
 import Fe from "./box.mjs";
-function fe(...e) {
-  return e.reduce((r, l) => l ? typeof l == "string" ? (r.push(l), r) : Array.isArray(l) ? (r.push(...fe(...l)), r) : (Object.entries(l).forEach(([o, t]) => {
+function ye(...e) {
+  return e.reduce((r, a) => a ? typeof a == "string" ? (r.push(a), r) : Array.isArray(a) ? (r.push(...ye(...a)), r) : (Object.entries(a).forEach(([o, t]) => {
     t && r.push(o);
   }), r) : r, []);
 }
-const Y = 4;
-var a;
+const Q = 4;
+var n;
 ((e) => {
   ((r) => {
-    function l(t, n) {
-      return `${t}${n.replace("/", "-")}`;
+    function a(t, l) {
+      return `${t}${l.replace("/", "-")}`;
     }
-    r.fraction = l;
+    r.fraction = a;
     function o(t) {
       return [`${t} path`, `${t} circle`, `${t} rect`, `${t} line`];
     }
     r.svg = o;
   })(e.ClassName || (e.ClassName = {})), ((r) => {
-    function l(x, C, R = Y) {
-      return `${x / R}rem`;
+    function a(C) {
+      return `${C / Q}rem`;
     }
-    r.rem = l;
-    function o(x) {
-      return `${x}px`;
+    r.rem = a;
+    function o(C) {
+      return `${C}px`;
     }
     r.px = o;
-    function t(x) {
-      const [C, R] = x.split("/");
-      return `${+C / +R * 100}%`;
+    function t(C) {
+      const [w, R] = C.split("/");
+      return `${+w / +R * 100}%`;
     }
     r.fraction = t;
-    function n(x, C) {
-      switch (C) {
+    function l(C, w) {
+      switch (w) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return x.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return C.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return C;
+          return w;
       }
     }
-    r.widthHeight = n;
-    function i(x) {
-      return (C, R) => `var(--${x}${R});`;
+    r.widthHeight = l;
+    function u(C) {
+      return (w, R) => `var(--${C}${R});`;
     }
-    r.variables = i;
-    function c(x) {
-      return (C, R) => `var(--${x}${R});`;
+    r.variables = u;
+    function c(C) {
+      return (w, R) => `var(--${C}${R});`;
     }
     r.svgVariables = c;
-    function u(x, C) {
-      return `repeat(${C},minmax(0,1fr))`;
+    function i(C, w) {
+      return `repeat(${w},minmax(0,1fr))`;
     }
-    r.gridColumns = u;
-    function m(x, C) {
-      return C === "full-row" ? "1/-1" : `span ${C}/span ${C}`;
+    r.gridColumns = i;
+    function m(C, w) {
+      return w === "full-row" ? "1/-1" : `span ${w}/span ${w}`;
     }
     r.gridColumn = m;
-    function f(x, C) {
-      return `${C}ms`;
+    function y(C, w) {
+      return `${w}ms`;
     }
-    r.ms = f;
-    function y(x, C) {
-      return `${C}deg`;
+    r.ms = y;
+    function d(C, w) {
+      return `${w}deg`;
     }
-    r.rotate = y;
-    function z(x, C) {
-      return C === "xAxis" ? "-1 1" : "1 -1";
+    r.rotate = d;
+    function V(C, w) {
+      return w === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = z;
+    r.flip = V;
   })(e.Value || (e.Value = {}));
-})(a || (a = {}));
-var Z;
+})(n || (n = {}));
+var J;
 ((e) => {
   e.colors = {
     currentColor: "currentColor",
@@ -398,34 +398,34 @@ var Z;
     "-10/12",
     "-11/12"
   ], e.percentString = "";
-  const l = { ...{
+  const a = { ...{
     inherit: "inherit",
     none: "none"
   }, ...e.colors, ...e.bgImages, ...e.shadows }, o = {}, t = {};
-  let n = {};
-  function i(y) {
-    return y in o || (y in n ? (t[y] = n[y], o[y] = n[y]) : y in l ? (t[y] = l[y], o[y] = l[y]) : (t[y] = y, o[y] = y)), `var(--${y})`;
+  let l = {};
+  function u(d) {
+    return d in o || (d in l ? (t[d] = l[d], o[d] = l[d]) : d in a ? (t[d] = a[d], o[d] = a[d]) : (t[d] = d, o[d] = d)), `var(--${d})`;
   }
-  e.getVariableValue = i;
+  e.getVariableValue = u;
   function c() {
-    return Object.entries(o).map(([y, z]) => `--${y}: ${z};`).join("");
+    return Object.entries(o).map(([d, V]) => `--${d}: ${V};`).join("");
   }
   e.generateVariables = c;
-  function u() {
-    const y = { ...t };
-    return Object.keys(t).forEach((z) => delete t[z]), y;
+  function i() {
+    const d = { ...t };
+    return Object.keys(t).forEach((V) => delete t[V]), d;
   }
-  e.getPendingVariables = u;
+  e.getPendingVariables = i;
   function m() {
     return Object.keys(t).length > 0;
   }
   e.hasPendingVariables = m;
-  function f(y) {
-    n = y;
+  function y(d) {
+    l = d;
   }
-  e.setUserVariables = f;
-})(Z || (Z = {}));
-const s = Z, L = {
+  e.setUserVariables = y;
+})(J || (J = {}));
+const s = J, T = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -437,7 +437,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's left and right border. */
@@ -445,7 +445,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-inline-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's top and bottom border. */
@@ -453,7 +453,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-block-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-top-width CSS property sets the width of the top border of an element. */
@@ -461,7 +461,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-top-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-right-width CSS property sets the width of the right border of an element. */
@@ -469,7 +469,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-right-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-bottom-width CSS property sets the width of the bottom border of an element. */
@@ -477,7 +477,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-left-width CSS property sets the width of the left border of an element. */
@@ -485,7 +485,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-left-width",
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The border-style shorthand CSS property sets the line style for all four sides of an element's border. */
@@ -500,7 +500,7 @@ const s = Z, L = {
     {
       styleName: "border-radius",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -508,7 +508,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-top-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -516,7 +516,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: ["border-top-right-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -524,7 +524,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: ["border-bottom-left-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -532,7 +532,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-bottom-left-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -540,7 +540,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-top-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -548,7 +548,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-top-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -556,7 +556,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
@@ -564,7 +564,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     }
   ],
   /** The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
@@ -577,15 +577,15 @@ const s = Z, L = {
   top: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString
@@ -595,15 +595,15 @@ const s = Z, L = {
   right: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString
@@ -613,15 +613,15 @@ const s = Z, L = {
   bottom: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString
@@ -631,15 +631,15 @@ const s = Z, L = {
   left: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString
@@ -649,7 +649,7 @@ const s = Z, L = {
   inset: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentString
@@ -831,7 +831,7 @@ const s = Z, L = {
     {
       styleName: "font-size",
       values: 0,
-      valueFormat: (e) => a.Value.rem(e, void 0, 16)
+      valueFormat: (e) => `${e / 16}rem`
     },
     {
       styleName: "font-size",
@@ -856,7 +856,7 @@ const s = Z, L = {
   gap: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentString
@@ -867,7 +867,7 @@ const s = Z, L = {
     {
       styleName: "row-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       styleName: "row-gap",
@@ -879,7 +879,7 @@ const s = Z, L = {
     {
       styleName: "column-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       styleName: "column-gap",
@@ -895,7 +895,7 @@ const s = Z, L = {
   ],
   /** The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. */
   height: [
-    { values: 0, valueFormat: a.Value.rem },
+    { values: 0, valueFormat: n.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -906,7 +906,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -917,7 +917,7 @@ const s = Z, L = {
   ],
   /** The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height. */
   minHeight: [
-    { styleName: "min-height", values: 0, valueFormat: a.Value.rem },
+    { styleName: "min-height", values: 0, valueFormat: n.Value.rem },
     {
       styleName: "min-height",
       values: ["fit"],
@@ -931,7 +931,7 @@ const s = Z, L = {
     {
       styleName: "min-height",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       styleName: "min-height",
@@ -944,7 +944,7 @@ const s = Z, L = {
   ],
   /** The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height. */
   maxHeight: [
-    { styleName: "max-height", values: 0, valueFormat: a.Value.rem },
+    { styleName: "max-height", values: 0, valueFormat: n.Value.rem },
     {
       styleName: "max-height",
       values: ["fit"],
@@ -958,7 +958,7 @@ const s = Z, L = {
     {
       styleName: "max-height",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       styleName: "max-height",
@@ -971,7 +971,7 @@ const s = Z, L = {
   ],
   /** The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. */
   width: [
-    { values: 0, valueFormat: a.Value.rem },
+    { values: 0, valueFormat: n.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -982,7 +982,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -993,7 +993,7 @@ const s = Z, L = {
   ],
   /** The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width. */
   minWidth: [
-    { styleName: "min-width", values: 0, valueFormat: a.Value.rem },
+    { styleName: "min-width", values: 0, valueFormat: n.Value.rem },
     {
       styleName: "min-width",
       values: ["fit"],
@@ -1007,7 +1007,7 @@ const s = Z, L = {
     {
       styleName: "min-width",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       styleName: "min-width",
@@ -1020,7 +1020,7 @@ const s = Z, L = {
   ],
   /** The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. */
   maxWidth: [
-    { styleName: "max-width", values: 0, valueFormat: a.Value.rem },
+    { styleName: "max-width", values: 0, valueFormat: n.Value.rem },
     {
       styleName: "max-width",
       values: ["fit"],
@@ -1034,7 +1034,7 @@ const s = Z, L = {
     {
       styleName: "max-width",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       styleName: "max-width",
@@ -1050,7 +1050,7 @@ const s = Z, L = {
     {
       styleName: "letter-spacing",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The line-height CSS property sets the height of a line box in horizontal writing modes. In vertical writing modes, it sets the width of a line box. It's commonly used to set the distance between lines of text. On block-level elements in horizontal writing modes, it specifies the preferred height of line boxes within the element, and on non-replaced inline elements, it specifies the height that is used to calculate line box height. */
@@ -1058,7 +1058,7 @@ const s = Z, L = {
     {
       styleName: "line-height",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     },
     {
       styleName: "line-height",
@@ -1078,7 +1078,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1087,7 +1087,7 @@ const s = Z, L = {
     {
       styleName: "margin",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString,
@@ -1099,7 +1099,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-inline",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1108,7 +1108,7 @@ const s = Z, L = {
     {
       styleName: "margin-inline",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString,
@@ -1120,7 +1120,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-block",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1129,7 +1129,7 @@ const s = Z, L = {
     {
       styleName: "margin-block",
       values: s.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: n.Value.fraction
     },
     {
       values: s.percentString,
@@ -1141,7 +1141,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-top",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1149,7 +1149,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "margin-top"
     },
     {
@@ -1162,7 +1162,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-right",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1170,7 +1170,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "margin-right"
     },
     {
@@ -1183,7 +1183,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1191,7 +1191,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "margin-bottom"
     },
     {
@@ -1204,7 +1204,7 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "margin-left",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: ["auto"],
@@ -1212,7 +1212,7 @@ const s = Z, L = {
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "margin-left"
     },
     {
@@ -1225,11 +1225,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding"
     },
     {
@@ -1242,11 +1242,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-inline",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-inline"
     },
     {
@@ -1259,11 +1259,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-block",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-block"
     },
     {
@@ -1276,11 +1276,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-top",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-top"
     },
     {
@@ -1293,11 +1293,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-right",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-right"
     },
     {
@@ -1310,11 +1310,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-bottom"
     },
     {
@@ -1327,11 +1327,11 @@ const s = Z, L = {
     {
       values: 0,
       styleName: "padding-left",
-      valueFormat: a.Value.rem
+      valueFormat: n.Value.rem
     },
     {
       values: s.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: n.Value.fraction,
       styleName: "padding-left"
     },
     {
@@ -1357,7 +1357,7 @@ const s = Z, L = {
     {
       styleName: "outline-width",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border. */
@@ -1372,7 +1372,7 @@ const s = Z, L = {
     {
       styleName: "outline-offset",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: n.Value.px
     }
   ],
   /** The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction. */
@@ -1650,17 +1650,17 @@ const s = Z, L = {
   translateX: [
     {
       values: 0,
-      valueFormat: (e) => `translateX(${e / Y}rem)`,
+      valueFormat: (e) => `translateX(${e / Q}rem)`,
       styleName: "transform"
     },
     {
       values: s.percentages,
-      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateX(${n.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
       values: s.negativePercentages,
-      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateX(${n.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
@@ -1673,17 +1673,17 @@ const s = Z, L = {
   translateY: [
     {
       values: 0,
-      valueFormat: (e) => `translateY(${e / Y}rem)`,
+      valueFormat: (e) => `translateY(${e / Q}rem)`,
       styleName: "transform"
     },
     {
       values: s.percentages,
-      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateY(${n.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
       values: s.negativePercentages,
-      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateY(${n.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
@@ -1705,7 +1705,7 @@ const s = Z, L = {
       styleName: "backdrop-filter"
     }
   ]
-}, me = {
+}, be = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1729,14 +1729,14 @@ const s = Z, L = {
   selected: '[aria-selected="true"]'
 }, Ve = {
   theme: ""
-}, K = { ...me, ...W, ...Ve }, ye = Object.entries(K).reduce(
-  (e, [r], l) => (e[r] = Math.pow(2, l), e),
+}, K = { ...be, ...W, ...Ve }, he = Object.entries(K).reduce(
+  (e, [r], a) => (e[r] = Math.pow(2, a), e),
   {}
-), X = Object.entries(K).reduce(
+), Y = Object.entries(K).reduce(
   (e, [r]) => {
-    const l = ye[r];
+    const a = he[r];
     return Object.entries(e).forEach(([o, t]) => {
-      e[+o + l] = [...t, r];
+      e[+o + a] = [...t, r];
     }), e;
   },
   { 0: [] }
@@ -1746,7 +1746,7 @@ const s = Z, L = {
   activeGroup: "active",
   disabledGroup: "disabled",
   selectedGroup: "selected"
-}, se = {
+}, ue = {
   theme: "theme"
 }, P = {
   /** Styles applied for small screens and larger. >= 640 */
@@ -1760,34 +1760,34 @@ const s = Z, L = {
   /** Styles applied for 2x extra-large screens and larger. >= 1536 */
   xxl: 1536
 };
-var Q;
+var ee;
 ((e) => {
-  function r(n, i, c) {
-    const u = { ...n }, m = u.props || {};
-    return i.forEach((f) => {
-      f in u && (m[f] = u[f], delete u[f]);
-    }), c && Object.entries(c).forEach(([f, y]) => {
-      m[f] = y;
-    }), u.props = m, u;
+  function r(l, u, c) {
+    const i = { ...l }, m = i.props || {};
+    return u.forEach((y) => {
+      y in i && (m[y] = i[y], delete i[y]);
+    }), c && Object.entries(c).forEach(([y, d]) => {
+      m[y] = d;
+    }), i.props = m, i;
   }
   e.buildProps = r;
-  function l(n) {
-    return !!n && typeof n == "object";
+  function a(l) {
+    return !!l && typeof l == "object";
   }
-  e.isObject = l;
-  function o(...n) {
-    return n.reduce((i, c) => (Object.keys(c ?? {}).forEach((u) => {
-      const m = i[u], f = c[u];
-      l(f) && "clean" in f && f.clean ? i[u] = f : u in W && typeof f == "boolean" || (u in W && Array.isArray(f) ? i[u] = o(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? i[u] = m.concat(...f) : l(m) && l(f) ? i[u] = o(m, f) : i[u] = f);
-    }), i), {});
+  e.isObject = a;
+  function o(...l) {
+    return l.reduce((u, c) => (Object.keys(c ?? {}).forEach((i) => {
+      const m = u[i], y = c[i];
+      a(y) && "clean" in y && y.clean ? u[i] = y : i in W && typeof y == "boolean" || (i in W && Array.isArray(y) ? u[i] = o(m, y[1] ?? {}) : Array.isArray(m) && Array.isArray(y) ? u[i] = m.concat(...y) : a(m) && a(y) ? u[i] = o(m, y) : u[i] = y);
+    }), u), {});
   }
   e.mergeDeep = o;
-  function t(n, i) {
-    return n in i;
+  function t(l, u) {
+    return l in u;
   }
   e.isKeyOf = t;
-})(Q || (Q = {}));
-const k = Q, ie = {
+})(ee || (ee = {}));
+const k = ee, ce = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -2912,59 +2912,91 @@ const k = Q, ie = {
 };
 function Se(e) {
   const r = { ...e };
-  for (const [l, o] of Object.entries(r)) {
+  for (const [a, o] of Object.entries(r)) {
     if (!o.extends) continue;
     const t = r[o.extends];
     if (!t) continue;
-    const { extends: n, ...i } = o;
-    r[l] = k.mergeDeep({}, t, i);
+    const { extends: l, ...u } = o;
+    r[a] = k.mergeDeep({}, t, u);
   }
   return r;
 }
-var J;
+var re;
 ((e) => {
-  function r(o, t, n) {
-    return s.setUserVariables(o), Object.entries(t).forEach(([i, c]) => {
-      L[i] = c;
-    }), Object.entries(n).forEach(([i, c]) => {
-      const u = L[i];
-      L[i] = u ? [...c, ...u] : c;
-    }), { extendedProps: t, extendedPropTypes: n };
+  function r(o, t, l) {
+    return s.setUserVariables(o), Object.entries(t).forEach(([u, c]) => {
+      T[u] = c;
+    }), Object.entries(l).forEach(([u, c]) => {
+      const i = T[u];
+      T[u] = i ? [...c, ...i] : c;
+    }), { extendedProps: t, extendedPropTypes: l };
   }
-  e.extend = r, e.componentsStyles = ie;
-  function l(o) {
-    return e.componentsStyles = Se(k.mergeDeep(ie, o)), o;
+  e.extend = r, e.componentsStyles = ce;
+  function a(o) {
+    return e.componentsStyles = Se(k.mergeDeep(ce, o)), o;
   }
-  e.components = l;
-})(J || (J = {}));
-const $e = J, ee = we.createContext({ theme: "", setTheme: () => {
+  e.components = a;
+})(re || (re = {}));
+const $e = re, te = we.createContext({ theme: "", setTheme: () => {
 } });
-function re(e) {
-  const { children: r, theme: l, use: o = "local" } = e, [t, n] = de(l ?? "light");
-  return U(() => {
-    if (l !== void 0) return;
-    const i = window.matchMedia("(prefers-color-scheme: dark)");
-    n(i.matches ? "dark" : "light");
-    const c = (u) => {
-      n(u.matches ? "dark" : "light");
+function oe(e) {
+  const { children: r, theme: a, use: o = "local", storageKey: t } = e, [l, u] = Z(a ?? "light"), [c, i] = Z(a !== void 0), m = fe(null), y = Ne(
+    (d) => {
+      if (d === null) {
+        if (t)
+          try {
+            localStorage.removeItem(t);
+          } catch {
+          }
+        i(!1);
+      } else {
+        if (t)
+          try {
+            localStorage.setItem(t, d);
+          } catch {
+          }
+        u(d), i(!0);
+      }
+    },
+    [t]
+  );
+  return B(() => {
+    a !== void 0 ? (u(a), i(!0)) : i(!1);
+  }, [a]), B(() => {
+    if (c) return;
+    if (t)
+      try {
+        const C = localStorage.getItem(t);
+        if (C) {
+          u(C), i(!0);
+          return;
+        }
+      } catch {
+      }
+    const d = window.matchMedia("(prefers-color-scheme: dark)");
+    u(d.matches ? "dark" : "light");
+    const V = (C) => {
+      u(C.matches ? "dark" : "light");
     };
-    return i.addEventListener("change", c), () => i.removeEventListener("change", c);
-  }, [l]), U(() => {
+    return d.addEventListener("change", V), () => d.removeEventListener("change", V);
+  }, [c, t]), B(() => {
     if (o === "local") return;
-    const i = document.documentElement;
-    return i.classList.add(t), () => {
-      i.classList.remove(t);
+    const d = document.documentElement;
+    return d.classList.add(l), d.setAttribute("data-theme", l), () => {
+      d.classList.remove(l), d.removeAttribute("data-theme");
     };
-  }, [t, o]), o === "local" ? /* @__PURE__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ $(Fe, { className: t, children: r }) }) : /* @__PURE__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: r });
+  }, [l, o]), B(() => {
+    o !== "local" || !m.current || m.current.setAttribute("data-theme", l);
+  }, [l, o]), o === "local" ? /* @__PURE__ */ z(te.Provider, { value: { theme: l, setTheme: y }, children: /* @__PURE__ */ z(Fe, { ref: m, className: l, children: r }) }) : /* @__PURE__ */ z(te.Provider, { value: { theme: l, setTheme: y }, children: r });
 }
 ((e) => {
   function r() {
-    const { theme: l, setTheme: o } = xe(ee);
-    return [l, o];
+    const { theme: a, setTheme: o } = xe(te);
+    return [a, o];
   }
   e.useTheme = r;
-})(re || (re = {}));
-const ze = re;
+})(oe || (oe = {}));
+const ze = oe;
 class ke {
   constructor() {
     this._index = 0, this._cache = {};
@@ -2973,11 +3005,11 @@ class ke {
     return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
   getByIndex(r) {
-    const { first: l, next: o } = Re, t = r - l.length;
+    const { first: a, next: o } = Re, t = r - a.length;
     if (t < 0)
-      return l[r];
-    const n = Math.floor(t / o.length), i = t - n * o.length;
-    return this.getByIndex(n) + o[i];
+      return a[r];
+    const l = Math.floor(t / o.length), u = t - l * o.length;
+    return this.getByIndex(l) + o[u];
   }
 }
 const Re = {
@@ -2985,82 +3017,82 @@ const Re = {
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
 function Ae(e) {
-  const { clean: r, component: l, variant: o } = e;
-  return le(() => {
+  const { clean: r, component: a, variant: o } = e;
+  return se(() => {
     if (r) return;
-    const t = l?.split(".");
+    const t = a?.split(".");
     if (!t) return;
-    const n = t.reduce((u, m, f) => f === 0 ? $e.componentsStyles[m] : u?.children?.[m], void 0);
-    if (!n) return;
-    if (!o) return n.styles;
-    const i = fe(o);
-    if (i.length === 0) return n.styles;
-    const c = k.mergeDeep(...i.map((u) => n.variants?.[u]));
-    return n.styles ? k.mergeDeep(n.styles, c) : c;
-  }, [r, l, o]);
+    const l = t.reduce((i, m, y) => y === 0 ? $e.componentsStyles[m] : i?.children?.[m], void 0);
+    if (!l) return;
+    if (!o) return l.styles;
+    const u = ye(o);
+    if (u.length === 0) return l.styles;
+    const c = k.mergeDeep(...u.map((i) => l.variants?.[i]));
+    return l.styles ? k.mergeDeep(l.styles, c) : c;
+  }, [r, a, o]);
 }
-const Oe = new ke(), Ee = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", je = Ee && !H ? U : ge, be = "_b", I = "_s";
+const Oe = new ke(), Ie = typeof window < "u" && typeof window.document < "u", G = typeof process == "object" && process.env?.NODE_ENV === "test", Ee = Ie && !G ? B : me, ve = "_b", L = "_s";
 function Me(e, r) {
-  const l = Ae(e), o = le(() => l ? k.mergeDeep(l, e) : e, [e, l]), t = [r ? I : be];
-  return B.addClassNames(o, t, []), je(() => {
-    B.flush();
+  const a = Ae(e), o = se(() => a ? k.mergeDeep(a, e) : e, [e, a]), t = [r ? L : ve];
+  return _.addClassNames(o, t, []), Ee(() => {
+    _.flush();
   }, [o]), t;
 }
-var B;
+var _;
 ((e) => {
-  let r = !0, l = !1;
-  const o = /* @__PURE__ */ new Set(), t = [], n = [];
-  let i = 0;
-  const c = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
-  let u = {};
-  function m(b, h, w, p, g) {
-    Object.entries(b).forEach(([v, d]) => {
-      if (d != null)
-        if (k.isKeyOf(v, L))
-          x(v, d, h, w, p, g);
-        else if (k.isKeyOf(v, me))
-          m(d, h, [...w, v], p, g);
+  let r = !0, a = !1;
+  const o = /* @__PURE__ */ new Set(), t = [], l = [];
+  let u = 0;
+  const c = Object.keys(T).reduce((b, h, x) => (b[h] = x, b), {});
+  let i = {};
+  function m(b, h, x, p, f) {
+    Object.entries(b).forEach(([v, g]) => {
+      if (g != null)
+        if (k.isKeyOf(v, T))
+          C(v, g, h, x, p, f);
+        else if (k.isKeyOf(v, be))
+          m(g, h, [...x, v], p, f);
         else if (k.isKeyOf(v, W)) {
-          if (Array.isArray(d)) {
-            const [N, F] = d;
-            m(F, h, [...w, v], p, g);
+          if (Array.isArray(g)) {
+            const [N, F] = g;
+            m(F, h, [...x, v], p, f);
           }
-          k.isObject(d) && m(d, h, [...w, v], p, g);
-        } else k.isKeyOf(v, P) ? m(d, h, w, v, g) : k.isKeyOf(v, D) ? Object.entries(d).forEach(([N, F]) => {
-          m(F, h, [...w, D[v]], p, N);
-        }) : k.isKeyOf(v, se) && Object.entries(d).forEach(([N, F]) => {
-          const S = [...w, se[v]];
-          Object.entries(F).forEach(([V, O]) => {
-            k.isKeyOf(V, D) ? Object.entries(O).forEach(([M, E]) => {
+          k.isObject(g) && m(g, h, [...x, v], p, f);
+        } else k.isKeyOf(v, P) ? m(g, h, x, v, f) : k.isKeyOf(v, D) ? Object.entries(g).forEach(([N, F]) => {
+          m(F, h, [...x, D[v]], p, N);
+        }) : k.isKeyOf(v, ue) && Object.entries(g).forEach(([N, F]) => {
+          const $ = [...x, ue[v]];
+          Object.entries(F).forEach(([S, I]) => {
+            k.isKeyOf(S, D) ? Object.entries(I).forEach(([U, A]) => {
               m(
-                E,
+                A,
                 h,
-                [...S, D[V]],
+                [...$, D[S]],
                 p,
                 // Use | as separator to distinguish theme from group name
-                `${N}|${M}`
+                `${N}|${U}`
               );
-            }) : m({ [V]: O }, h, S, p, N);
+            }) : m({ [S]: I }, h, $, p, N);
           });
         });
     });
   }
   e.addClassNames = m;
-  function f() {
+  function y() {
     const b = s.hasPendingVariables();
     if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const h = q(), w = h.sheet;
-    if (l) {
+    const h = q(), x = h.sheet;
+    if (a) {
       if (s.hasPendingVariables()) {
-        const p = s.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
-        if (w && !H)
+        const p = s.getPendingVariables(), f = `:root{${Object.entries(p).map(([v, g]) => `--${v}: ${g};`).join("")}}`;
+        if (x && !G)
           try {
-            w.insertRule(g, 0), i++;
+            x.insertRule(f, 0), u++;
           } catch {
           }
         else
-          h.textContent = g + `
+          h.textContent = f + `
 ` + h.textContent;
       }
     } else {
@@ -3074,35 +3106,35 @@ var B;
         "button{color: inherit;}",
         'input[type="number"]{-moz-appearance: textfield;}',
         'input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}',
-        `.${be}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}`,
-        `.${I}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}`,
-        `.${I} path,.${I} circle,.${I} rect,.${I} line {transition: all var(--svgTransitionTime);}`
+        `.${ve}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}`,
+        `.${L}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}`,
+        `.${L} path,.${L} circle,.${L} rect,.${L} line {transition: all var(--svgTransitionTime);}`
       ];
-      if (w && !H)
-        for (const g of p)
+      if (x && !G)
+        for (const f of p)
           try {
-            w.insertRule(g, i), i++;
+            x.insertRule(f, u), u++;
           } catch {
           }
       else
         h.textContent = p.join(`
 `);
-      l = !0;
+      a = !0;
     }
     if (t.length > 0) {
-      if (t.sort((p, g) => p[1] - g[1] || p[0] - g[0]), w && !H)
-        for (const [p, g, v] of t) {
-          const d = g * 1e5 + p;
-          let N = n.length;
-          for (let F = 0; F < n.length; F++)
-            if (d < n[F]) {
+      if (t.sort((p, f) => p[1] - f[1] || p[0] - f[0]), x && !G)
+        for (const [p, f, v] of t) {
+          const g = f * 1e5 + p;
+          let N = l.length;
+          for (let F = 0; F < l.length; F++)
+            if (g < l[F]) {
               N = F;
               break;
             }
           try {
-            w.insertRule(v, i + N), n.splice(N, 0, d);
+            x.insertRule(v, u + N), l.splice(N, 0, g);
           } catch {
-            w.insertRule(v, w.cssRules.length), n.push(d);
+            x.insertRule(v, x.cssRules.length), l.push(g);
           }
         }
       else
@@ -3111,59 +3143,65 @@ var B;
     }
     r = !1;
   }
-  e.flush = f;
-  function y(b, h, w, p, g) {
-    const d = L[b].find((V) => Array.isArray(V.values) ? V.values.includes(h) : typeof h == typeof V.values);
-    if (!d) return null;
-    const N = c[b] ?? 0, F = P[p] ?? 0, S = C(
+  e.flush = y;
+  function d(b, h, x, p, f) {
+    const g = T[b].find((S) => Array.isArray(S.values) ? S.values.includes(h) : typeof h == typeof S.values);
+    if (!g) return null;
+    const N = c[b] ?? 0, F = P[p] ?? 0, $ = w(
       b,
       h,
-      w,
+      x,
       p,
-      g
+      f
     );
-    if (g) {
-      const V = X[w], O = V.includes("theme"), E = (O ? V.filter((j) => j !== "theme") : V).map((j) => K[j]).join(""), G = g.includes("|");
-      let A;
-      if (G) {
-        const [j, Ce] = g.split("|");
-        A = `.${j} .${Ce}${E} .${S}`;
-      } else O ? A = `.${g} .${S}${E}` : A = `.${g}${E} .${S}`;
-      const he = d.selector?.(A, "") ?? A, ve = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], pe = d.valueFormat?.(h, s.getVariableValue) ?? h, ne = `${he}{${ve.map((j) => `${j}:${pe}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${ne}}`, sortIndex: N, breakpointOrder: F } : { rule: ne, sortIndex: N, breakpointOrder: F };
+    if (f) {
+      const S = Y[x], I = S.includes("theme"), A = (I ? S.filter((O) => O !== "theme") : S).map((O) => K[O]).join(""), j = f.includes("|");
+      let E;
+      if (j) {
+        const [O, X] = f.split("|");
+        E = `.${O} .${X}${A} .${$}`;
+      } else I ? E = `.${f} .${$}${A}` : E = `.${f}${A} .${$}`;
+      const pe = g.selector?.(E, "") ?? E, Ce = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? b], ie = `${pe}{${Ce.map((O) => {
+        const X = g.valueFormat?.(h, s.getVariableValue, O) ?? h;
+        return `${O}:${X}`;
+      }).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${ie}}`, sortIndex: N, breakpointOrder: F } : { rule: ie, sortIndex: N, breakpointOrder: F };
     } else {
-      const V = X[w].map((A) => K[A]).join(""), O = d.selector?.(`.${S}`, V) ?? `.${S}${V}`, M = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], E = d.valueFormat?.(h, s.getVariableValue) ?? h, G = `${O}{${M.map((A) => `${A}:${E}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${G}}`, sortIndex: N, breakpointOrder: F } : { rule: G, sortIndex: N, breakpointOrder: F };
+      const S = Y[x].map((j) => K[j]).join(""), I = g.selector?.(`.${$}`, S) ?? `.${$}${S}`, U = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? b], A = `${I}{${U.map((j) => {
+        const E = g.valueFormat?.(h, s.getVariableValue, j) ?? h;
+        return `${j}:${E}`;
+      }).join(";")}}`;
+      return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${A}}`, sortIndex: N, breakpointOrder: F } : { rule: A, sortIndex: N, breakpointOrder: F };
     }
   }
-  function z() {
-    u = {}, o.clear(), t.length = 0, n.length = 0, i = 0, l = !1;
+  function V() {
+    i = {}, o.clear(), t.length = 0, l.length = 0, u = 0, a = !1;
   }
-  e.clear = z;
-  function x(b, h, w, p, g = "normal", v) {
+  e.clear = V;
+  function C(b, h, x, p, f = "normal", v) {
     if (h == null) return;
-    const d = p.reduce((S, V) => S + ye[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
+    const g = p.reduce(($, S) => $ + he[S], 0), N = w(b, h, g, f, v), F = `${f}-${g}-${b}-${h}-${v ?? ""}`;
     if (!o.has(F)) {
       o.add(F);
-      const S = y(b, h, d, g, v);
-      S && (t.push([S.sortIndex, S.breakpointOrder, S.rule]), r = !0), u[g] ? u[g][d] ? u[g][d][b] || (u[g][d][b] = /* @__PURE__ */ new Set()) : u[g][d] = { [b]: /* @__PURE__ */ new Set() } : u[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (u[g][d].__parents ? u[g][d].__parents[v] ? u[g][d].__parents[v][b] || (u[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : u[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : u[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, u[g][d].__parents[v][b].add(h)) : u[g][d][b].add(h);
+      const $ = d(b, h, g, f, v);
+      $ && (t.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), i[f] ? i[f][g] ? i[f][g][b] || (i[f][g][b] = /* @__PURE__ */ new Set()) : i[f][g] = { [b]: /* @__PURE__ */ new Set() } : i[f] = { [g]: { [b]: /* @__PURE__ */ new Set() } }, v ? (i[f][g].__parents ? i[f][g].__parents[v] ? i[f][g].__parents[v][b] || (i[f][g].__parents[v][b] = /* @__PURE__ */ new Set()) : i[f][g].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : i[f][g].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, i[f][g].__parents[v][b].add(h)) : i[f][g][b].add(h);
     }
-    w.push(N);
+    x.push(N);
   }
-  function C(b, h, w, p, g) {
-    const v = X[w], d = `${p === "normal" ? "" : `${p}-`}${v.map((N) => `${N}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
-    return H ? d : Oe.getIdentity(d);
+  function w(b, h, x, p, f) {
+    const v = Y[x], g = `${p === "normal" ? "" : `${p}-`}${v.map((N) => `${N}-`).join("")}${f ? `${f}-` : ""}${b}-${h}`;
+    return G ? g : Oe.getIdentity(g);
   }
   const R = "crono-styles";
   function q() {
     let b = document.getElementById(R);
     return b || (b = document.createElement("style"), b.setAttribute("id", R), b.setAttribute("type", "text/css"), document.head.insertBefore(b, document.head.firstChild)), b;
   }
-})(B || (B = {}));
-var ue;
+})(_ || (_ = {}));
+var de;
 ((e) => {
-  e.flush = B.flush, e.clear = B.clear;
-})(ue || (ue = {}));
+  e.flush = _.flush, e.clear = _.clear;
+})(de || (de = {}));
 Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
   return this.filter((r) => !e(r));
 });
@@ -3175,12 +3213,12 @@ Array.prototype.add || (Array.prototype.add = function(...e) {
   return r.push(...e), r;
 });
 Array.prototype.sumBy || (Array.prototype.sumBy = function(e, r = 0) {
-  return this.reduce((l, o, t) => l + e(o, t), r);
+  return this.reduce((a, o, t) => a + e(o, t), r);
 });
 Array.prototype.sortBy || (Array.prototype.sortBy = function(e, r) {
   return [...this].sort((o, t) => {
-    const n = e(o), i = e(t);
-    return n < i ? r === "DESC" ? 1 : -1 : n > i ? r === "DESC" ? -1 : 1 : 0;
+    const l = e(o), u = e(t);
+    return l < u ? r === "DESC" ? 1 : -1 : l > u ? r === "DESC" ? -1 : 1 : 0;
   });
 });
 Array.prototype.maxBy || (Array.prototype.maxBy = function(e) {
@@ -3193,54 +3231,54 @@ Array.prototype.findOrThrow || (Array.prototype.findOrThrow = function(e) {
 });
 Array.prototype.toRecord || (Array.prototype.toRecord = function(e) {
   return this.reduce(
-    (r, l) => {
-      const o = e(l);
+    (r, a) => {
+      const o = e(a);
       if (!o) return r;
-      const [t, n] = o;
-      return r[t] = n, r;
+      const [t, l] = o;
+      return r[t] = l, r;
     },
     {}
   );
 });
 Array.prototype.groupBy || (Array.prototype.groupBy = function(e, r = !1) {
-  const l = this.reduce((o, t, n) => {
-    const i = e(t, n);
-    return r && typeof i != "number" && !i || (o.has(i) === !1 && o.set(i, []), o.get(i)?.push(t)), o;
+  const a = this.reduce((o, t, l) => {
+    const u = e(t, l);
+    return r && typeof u != "number" && !u || (o.has(u) === !1 && o.set(u, []), o.get(u)?.push(t)), o;
   }, /* @__PURE__ */ new Map());
-  return Array.from(l, ([o, t]) => ({ key: o, values: t }));
+  return Array.from(a, ([o, t]) => ({ key: o, values: t }));
 });
 function Ge(e) {
-  const { node: r = null, event: l = "click", hideOnScroll: o = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [i, c] = de(!1), u = Ne(null);
-  return ge(() => {
-    function m(C) {
-      (r ?? u.current)?.contains(C.target) === !1 && c(!1);
+  const { node: r = null, event: a = "click", hideOnScroll: o = !1, hideOnResize: t = !1, hideOnEscape: l = !0 } = e ?? {}, [u, c] = Z(!1), i = fe(null);
+  return me(() => {
+    function m(w) {
+      (r ?? i.current)?.contains(w.target) === !1 && c(!1);
     }
-    function f() {
+    function y() {
       c(!1);
     }
-    function y(C) {
-      (r ?? u.current)?.contains(C.target) === !1 && c(!1);
+    function d(w) {
+      (r ?? i.current)?.contains(w.target) === !1 && c(!1);
     }
-    function z(C) {
-      C.key === "Escape" && c(!1);
+    function V(w) {
+      w.key === "Escape" && c(!1);
     }
-    const x = new AbortController();
-    return i && (window.addEventListener(l, m, x), n && window.addEventListener("keydown", z, x), t && window.addEventListener("resize", f, x), o && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
-      x.abort();
+    const C = new AbortController();
+    return u && (window.addEventListener(a, m, C), l && window.addEventListener("keydown", V, C), t && window.addEventListener("resize", y, C), o && window.addEventListener("scroll", d, { signal: C.signal, capture: !0 })), () => {
+      C.abort();
     };
-  }, [r, i]), [i, c, u];
+  }, [r, u]), [u, c, i];
 }
-const Ie = {
+const je = {
   selected: "aria-selected"
 };
-var ce;
+var ge;
 ((e) => {
-  function r(l, o, t) {
-    l !== void 0 && l != null && (t[Ie[o] ?? o] = Array.isArray(l) ? l[0] : l);
+  function r(a, o, t) {
+    a !== void 0 && a != null && (t[je[o] ?? o] = Array.isArray(a) ? a[0] : a);
   }
   e.assignBooleanProp = r;
-})(ce || (ce = {}));
-function De(e) {
+})(ge || (ge = {}));
+function Ue(e) {
   let r;
   return Object.defineProperty({
     clear() {
@@ -3253,19 +3291,19 @@ function De(e) {
 function Le(e, r) {
   if (!e) return { score: 1, matches: [] };
   if (!r) return null;
-  const l = e.toLowerCase(), o = r.toLowerCase();
-  let t = 0, n = 0;
-  const i = [];
-  let c = -1, u = 0, m = 0;
-  for (; t < l.length && n < o.length; )
-    l[t] === o[n] ? (c === -1 && (c = n), t++, m++, u += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (u += 5), e[t - 1] === r[n] && (u += 1)) : (c !== -1 && (i.push([c, n]), c = -1), m = 0), n++;
-  return c !== -1 && i.push([c, n]), t < l.length ? null : (u = u / r.length, { score: u, matches: i });
+  const a = e.toLowerCase(), o = r.toLowerCase();
+  let t = 0, l = 0;
+  const u = [];
+  let c = -1, i = 0, m = 0;
+  for (; t < a.length && l < o.length; )
+    a[t] === o[l] ? (c === -1 && (c = l), t++, m++, i += m, (l === 0 || /\s|_|-/.test(r[l - 1])) && (i += 5), e[t - 1] === r[l] && (i += 1)) : (c !== -1 && (u.push([c, l]), c = -1), m = 0), l++;
+  return c !== -1 && u.push([c, l]), t < a.length ? null : (i = i / r.length, { score: i, matches: u });
 }
-function Pe(e, r) {
+function De(e, r) {
   return Le(e, r) !== null;
 }
-function Ue(e) {
-  return /* @__PURE__ */ $(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ $(
+function Pe(e) {
+  return /* @__PURE__ */ z(H, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ z(
     "path",
     {
       fillRule: "evenodd",
@@ -3274,43 +3312,43 @@ function Ue(e) {
     }
   ) });
 }
-var te;
+var ae;
 ((e) => {
-  function r(l, o = 300) {
-    let t = !1, n;
-    return (...i) => {
+  function r(a, o = 300) {
+    let t = !1, l;
+    return (...u) => {
       if (t) {
-        n = i;
+        l = u;
         return;
       }
-      l(...i), t = !0, setTimeout(() => {
-        t = !1, n && l(...n);
+      a(...u), t = !0, setTimeout(() => {
+        t = !1, l && a(...l);
       }, o);
     };
   }
   e.throttle = r;
-})(te || (te = {}));
-const We = te, _ = /* @__PURE__ */ new Map();
+})(ae || (ae = {}));
+const We = ae, M = /* @__PURE__ */ new Map();
 function Ke() {
-  const [e] = ze.useTheme(), r = le(() => {
-    const l = "crono-box";
-    let o = document.getElementById(l);
-    return o || (o = document.createElement("div"), o.id = l, document.body.appendChild(o)), o;
+  const [e] = ze.useTheme(), r = se(() => {
+    const a = "crono-box";
+    let o = document.getElementById(a);
+    return o || (o = document.createElement("div"), o.id = a, document.body.appendChild(o)), o;
   }, []);
-  return U(() => {
+  return B(() => {
     if (!e) return;
-    const l = _.get(e) ?? 0;
-    return _.set(e, l + 1), l === 0 && r.classList.add(e), () => {
-      const t = (_.get(e) ?? 1) - 1;
-      t <= 0 ? (_.delete(e), r.classList.remove(e)) : _.set(e, t);
+    const a = M.get(e) ?? 0;
+    return M.set(e, a + 1), a === 0 && r.classList.add(e), () => {
+      const t = (M.get(e) ?? 1) - 1;
+      t <= 0 ? (M.delete(e), r.classList.remove(e)) : M.set(e, t);
     };
   }, [r, e]), r;
 }
 function qe(e) {
-  return /* @__PURE__ */ $(T, { ...e, children: /* @__PURE__ */ $("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+  return /* @__PURE__ */ z(H, { ...e, children: /* @__PURE__ */ z("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
 }
 function Xe(e) {
-  return /* @__PURE__ */ $(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ $(
+  return /* @__PURE__ */ z(H, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ z(
     "path",
     {
       strokeWidth: 4,
@@ -3319,68 +3357,68 @@ function Xe(e) {
   ) });
 }
 function Ye(e) {
-  return /* @__PURE__ */ $(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ $("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
+  return /* @__PURE__ */ z(H, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ z("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
 }
 function Ze(e) {
-  return /* @__PURE__ */ $(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ $("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
+  return /* @__PURE__ */ z(H, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ z("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
 }
-var oe;
+var le;
 ((e) => {
-  function r(l) {
-    return l.charAt(0).toUpperCase() + l.slice(1);
+  function r(a) {
+    return a.charAt(0).toUpperCase() + a.slice(1);
   }
   e.capitalize = r;
-})(oe || (oe = {}));
-const Qe = oe;
+})(le || (le = {}));
+const Qe = le;
 function Je(e) {
-  return /* @__PURE__ */ $(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ $("path", { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" }) });
+  return /* @__PURE__ */ z(H, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ z("path", { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" }) });
 }
-var ae;
+var ne;
 ((e) => {
   function r(o) {
     const t = Array.from(o.elements).reduce(
-      (n, i) => {
-        const c = i.name;
-        return c && (n[c] || (n[c] = []), n[c].push(i)), n;
+      (l, u) => {
+        const c = u.name;
+        return c && (l[c] || (l[c] = []), l[c].push(u)), l;
       },
       {}
     );
-    return Object.entries(t).reduce((n, [i, c]) => {
+    return Object.entries(t).reduce((l, [u, c]) => {
       if (c.length === 1) {
-        const u = c[0];
-        l(n, i, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
+        const i = c[0];
+        a(l, u, i.type === "checkbox" || i.type === "radio" ? i.checked : i.value);
       } else {
-        const u = c.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
-        l(n, i, u);
+        const i = c.reduce((m, y) => (y.type === "checkbox" || y.type === "radio" ? y.checked && m.push(y.value) : m.push(y.value), m), []);
+        a(l, u, i);
       }
-      return n;
+      return l;
     }, {});
   }
   e.getFormEntries = r;
-  function l(o, t, n) {
+  function a(o, t, l) {
     if (t.includes(".")) {
-      const i = t.split(".");
+      const u = t.split(".");
       let c = o;
-      i.forEach((u, m) => {
-        if (i.length > m + 1) {
-          const f = u.match(/^(.+)\[(\d)\]$/);
-          if (f) {
-            const [, y, z] = f;
-            c[y] = c[y] || [], c[y][z] = c[y][z] || {}, c = c[y][z];
+      u.forEach((i, m) => {
+        if (u.length > m + 1) {
+          const y = i.match(/^(.+)\[(\d)\]$/);
+          if (y) {
+            const [, d, V] = y;
+            c[d] = c[d] || [], c[d][V] = c[d][V] || {}, c = c[d][V];
           } else
-            c[u] = c[u] || {}, c = c[u];
+            c[i] = c[i] || {}, c = c[i];
         } else
-          c[u] = n;
+          c[i] = l;
       });
     } else
-      o[t] = n;
+      o[t] = l;
   }
-})(ae || (ae = {}));
-const er = ae;
+})(ne || (ne = {}));
+const er = ne;
 export {
-  ce as B,
+  ge as B,
   Xe as D,
-  Ue as E,
+  Pe as E,
   We as F,
   Ye as G,
   k as O,
@@ -3390,13 +3428,13 @@ export {
   s as V,
   $e as a,
   Ge as b,
-  fe as c,
+  ye as c,
   Je as d,
   er as e,
-  Pe as f,
+  De as f,
   Qe as g,
   Ke as h,
-  ue as i,
-  De as m,
+  de as i,
+  Ue as m,
   Me as u
 };