@cronocode/react-box 3.1.11 → 3.1.13

package/core.mjs

@@ -1,29 +1,29 @@
-import we, { useContext as xe, useState as de, useLayoutEffect as U, useMemo as le, useEffect as ge, useRef as Ne } from "react";
+import Ce, { useContext as we, useState as ge, useLayoutEffect as U, useMemo as ne, useEffect as fe, useRef as xe } from "react";
 import { jsx as S } from "react/jsx-runtime";
-import T 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]) => {
+import _ from "./components/baseSvg.mjs";
+import Ne from "./box.mjs";
+function me(...e) {
+  return e.reduce((r, a) => a ? typeof a == "string" ? (r.push(a), r) : Array.isArray(a) ? (r.push(...me(...a)), r) : (Object.entries(a).forEach(([o, t]) => {
     t && r.push(o);
   }), r) : r, []);
 }
-const Y = 4;
-var a;
+const Z = 4;
+var l;
 ((e) => {
   ((r) => {
-    function l(t, n) {
+    function a(t, n) {
       return `${t}${n.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(x) {
+      return `${x / Z}rem`;
     }
-    r.rem = l;
+    r.rem = a;
     function o(x) {
       return `${x}px`;
     }
@@ -73,8 +73,8 @@ var a;
     }
     r.flip = z;
   })(e.Value || (e.Value = {}));
-})(a || (a = {}));
-var Z;
+})(l || (l = {}));
+var Q;
 ((e) => {
   e.colors = {
     currentColor: "currentColor",
@@ -398,13 +398,13 @@ 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 s(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})`;
+    return y in o || (y in n ? (t[y] = n[y], o[y] = n[y]) : y in a ? (t[y] = a[y], o[y] = a[y]) : (t[y] = y, o[y] = y)), `var(--${y})`;
   }
   e.getVariableValue = s;
   function c() {
@@ -424,8 +424,8 @@ var Z;
     n = y;
   }
   e.setUserVariables = f;
-})(Z || (Z = {}));
-const i = Z, L = {
+})(Q || (Q = {}));
+const i = Q, B = {
   /** 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 i = Z, L = {
     {
       values: 0,
       styleName: "border-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's left and right border. */
@@ -445,7 +445,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-inline-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's top and bottom border. */
@@ -453,7 +453,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-block-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-top-width CSS property sets the width of the top border of an element. */
@@ -461,7 +461,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-top-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-right-width CSS property sets the width of the right border of an element. */
@@ -469,7 +469,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-right-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-bottom-width CSS property sets the width of the bottom border of an element. */
@@ -477,7 +477,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-width",
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-left-width CSS property sets the width of the left border of an element. */
@@ -485,7 +485,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "border-left-width",
-      valueFormat: a.Value.px
+      valueFormat: l.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 i = Z, L = {
     {
       styleName: "border-radius",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-top-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-right-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: ["border-bottom-left-radius", "border-bottom-right-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: ["border-top-left-radius", "border-bottom-left-radius"],
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: "border-top-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: "border-top-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-right-radius",
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
     {
       values: 0,
       styleName: "border-bottom-left-radius",
-      valueFormat: a.Value.rem
+      valueFormat: l.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 i = Z, L = {
   top: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString
@@ -595,15 +595,15 @@ const i = Z, L = {
   right: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString
@@ -613,15 +613,15 @@ const i = Z, L = {
   bottom: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString
@@ -631,15 +631,15 @@ const i = Z, L = {
   left: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.negativePercentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString
@@ -649,7 +649,7 @@ const i = Z, L = {
   inset: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentString
@@ -831,7 +831,7 @@ const i = 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 i = Z, L = {
   gap: [
     {
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentString
@@ -867,7 +867,7 @@ const i = Z, L = {
     {
       styleName: "row-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       styleName: "row-gap",
@@ -879,7 +879,7 @@ const i = Z, L = {
     {
       styleName: "column-gap",
       values: 0,
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       styleName: "column-gap",
@@ -895,7 +895,7 @@ const i = 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: l.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -906,7 +906,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -917,7 +917,7 @@ const i = 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: l.Value.rem },
     {
       styleName: "min-height",
       values: ["fit"],
@@ -931,7 +931,7 @@ const i = Z, L = {
     {
       styleName: "min-height",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       styleName: "min-height",
@@ -944,7 +944,7 @@ const i = 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: l.Value.rem },
     {
       styleName: "max-height",
       values: ["fit"],
@@ -958,7 +958,7 @@ const i = Z, L = {
     {
       styleName: "max-height",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       styleName: "max-height",
@@ -971,7 +971,7 @@ const i = 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: l.Value.rem },
     {
       values: ["fit"],
       valueFormat: () => "100%"
@@ -982,7 +982,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
@@ -993,7 +993,7 @@ const i = 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: l.Value.rem },
     {
       styleName: "min-width",
       values: ["fit"],
@@ -1007,7 +1007,7 @@ const i = Z, L = {
     {
       styleName: "min-width",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       styleName: "min-width",
@@ -1020,7 +1020,7 @@ const i = 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: l.Value.rem },
     {
       styleName: "max-width",
       values: ["fit"],
@@ -1034,7 +1034,7 @@ const i = Z, L = {
     {
       styleName: "max-width",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       styleName: "max-width",
@@ -1050,7 +1050,7 @@ const i = Z, L = {
     {
       styleName: "letter-spacing",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: l.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 i = Z, L = {
     {
       styleName: "line-height",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: l.Value.px
     },
     {
       styleName: "line-height",
@@ -1078,7 +1078,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1087,7 +1087,7 @@ const i = Z, L = {
     {
       styleName: "margin",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString,
@@ -1099,7 +1099,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-inline",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1108,7 +1108,7 @@ const i = Z, L = {
     {
       styleName: "margin-inline",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString,
@@ -1120,7 +1120,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-block",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1129,7 +1129,7 @@ const i = Z, L = {
     {
       styleName: "margin-block",
       values: i.percentages,
-      valueFormat: a.Value.fraction
+      valueFormat: l.Value.fraction
     },
     {
       values: i.percentString,
@@ -1141,7 +1141,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-top",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1149,7 +1149,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "margin-top"
     },
     {
@@ -1162,7 +1162,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-right",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1170,7 +1170,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "margin-right"
     },
     {
@@ -1183,7 +1183,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1191,7 +1191,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "margin-bottom"
     },
     {
@@ -1204,7 +1204,7 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "margin-left",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -1212,7 +1212,7 @@ const i = Z, L = {
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "margin-left"
     },
     {
@@ -1225,11 +1225,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding"
     },
     {
@@ -1242,11 +1242,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-inline",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-inline"
     },
     {
@@ -1259,11 +1259,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-block",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-block"
     },
     {
@@ -1276,11 +1276,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-top",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-top"
     },
     {
@@ -1293,11 +1293,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-right",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-right"
     },
     {
@@ -1310,11 +1310,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-bottom",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-bottom"
     },
     {
@@ -1327,11 +1327,11 @@ const i = Z, L = {
     {
       values: 0,
       styleName: "padding-left",
-      valueFormat: a.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: i.percentages,
-      valueFormat: a.Value.fraction,
+      valueFormat: l.Value.fraction,
       styleName: "padding-left"
     },
     {
@@ -1357,7 +1357,7 @@ const i = Z, L = {
     {
       styleName: "outline-width",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: l.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 i = Z, L = {
     {
       styleName: "outline-offset",
       values: 0,
-      valueFormat: a.Value.px
+      valueFormat: l.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 i = Z, L = {
   translateX: [
     {
       values: 0,
-      valueFormat: (e) => `translateX(${e / Y}rem)`,
+      valueFormat: (e) => `translateX(${e / Z}rem)`,
       styleName: "transform"
     },
     {
       values: i.percentages,
-      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateX(${l.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
       values: i.negativePercentages,
-      valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateX(${l.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
@@ -1673,17 +1673,17 @@ const i = Z, L = {
   translateY: [
     {
       values: 0,
-      valueFormat: (e) => `translateY(${e / Y}rem)`,
+      valueFormat: (e) => `translateY(${e / Z}rem)`,
       styleName: "transform"
     },
     {
       values: i.percentages,
-      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateY(${l.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
       values: i.negativePercentages,
-      valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
+      valueFormat: (e) => `translateY(${l.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
@@ -1705,7 +1705,7 @@ const i = Z, L = {
       styleName: "backdrop-filter"
     }
   ]
-}, me = {
+}, ye = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1719,23 +1719,24 @@ const i = Z, L = {
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])",
   before: "::before",
-  after: "::after"
+  after: "::after",
+  placeholderStyles: "::placeholder"
 }, W = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]",
   selected: '[aria-selected="true"]'
-}, Ve = {
+}, Fe = {
   theme: ""
-}, K = { ...me, ...W, ...Ve }, ye = Object.entries(K).reduce(
-  (e, [r], l) => (e[r] = Math.pow(2, l), e),
+}, K = { ...ye, ...W, ...Fe }, be = 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 = be[r];
     return Object.entries(e).forEach(([o, t]) => {
-      e[+o + l] = [...t, r];
+      e[+o + a] = [...t, r];
     }), e;
   },
   { 0: [] }
@@ -1745,7 +1746,7 @@ const i = Z, L = {
   activeGroup: "active",
   disabledGroup: "disabled",
   selectedGroup: "selected"
-}, ie = {
+}, se = {
   theme: "theme"
 }, P = {
   /** Styles applied for small screens and larger. >= 640 */
@@ -1759,7 +1760,7 @@ const i = Z, L = {
   /** Styles applied for 2x extra-large screens and larger. >= 1536 */
   xxl: 1536
 };
-var Q;
+var J;
 ((e) => {
   function r(n, s, c) {
     const u = { ...n }, m = u.props || {};
@@ -1770,14 +1771,14 @@ var Q;
     }), u.props = m, u;
   }
   e.buildProps = r;
-  function l(n) {
+  function a(n) {
     return !!n && typeof n == "object";
   }
-  e.isObject = l;
+  e.isObject = a;
   function o(...n) {
     return n.reduce((s, c) => (Object.keys(c ?? {}).forEach((u) => {
       const m = s[u], f = c[u];
-      l(f) && "clean" in f && f.clean ? s[u] = f : u in W && typeof f == "boolean" || (u in W && Array.isArray(f) ? s[u] = o(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? s[u] = m.concat(...f) : l(m) && l(f) ? s[u] = o(m, f) : s[u] = f);
+      a(f) && "clean" in f && f.clean ? s[u] = f : u in W && typeof f == "boolean" || (u in W && Array.isArray(f) ? s[u] = o(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? s[u] = m.concat(...f) : a(m) && a(f) ? s[u] = o(m, f) : s[u] = f);
     }), s), {});
   }
   e.mergeDeep = o;
@@ -1785,8 +1786,8 @@ var Q;
     return n in s;
   }
   e.isKeyOf = t;
-})(Q || (Q = {}));
-const k = Q, se = {
+})(J || (J = {}));
+const k = J, ue = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -2909,62 +2910,62 @@ const k = Q, se = {
     }
   }
 };
-function $e(e) {
+function Ve(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, ...s } = o;
-    r[l] = k.mergeDeep({}, t, s);
+    r[a] = k.mergeDeep({}, t, s);
   }
   return r;
 }
-var J;
+var ee;
 ((e) => {
   function r(o, t, n) {
     return i.setUserVariables(o), Object.entries(t).forEach(([s, c]) => {
-      L[s] = c;
+      B[s] = c;
     }), Object.entries(n).forEach(([s, c]) => {
-      const u = L[s];
-      L[s] = u ? [...c, ...u] : c;
+      const u = B[s];
+      B[s] = u ? [...c, ...u] : c;
     }), { extendedProps: t, extendedPropTypes: n };
   }
-  e.extend = r, e.componentsStyles = se;
-  function l(o) {
-    return e.componentsStyles = $e(k.mergeDeep(se, o)), o;
+  e.extend = r, e.componentsStyles = ue;
+  function a(o) {
+    return e.componentsStyles = Ve(k.mergeDeep(ue, o)), o;
   }
-  e.components = l;
-})(J || (J = {}));
-const Se = J, ee = we.createContext({ theme: "", setTheme: () => {
+  e.components = a;
+})(ee || (ee = {}));
+const $e = ee, re = Ce.createContext({ theme: "", setTheme: () => {
 } });
-function re(e) {
-  const { children: r, theme: l, use: o = "local" } = e, [t, n] = de(l ?? "light");
+function te(e) {
+  const { children: r, theme: a, use: o = "local" } = e, [t, n] = ge(a ?? "light");
   return U(() => {
-    if (l !== void 0) return;
+    if (a !== void 0) return;
     const s = window.matchMedia("(prefers-color-scheme: dark)");
     n(s.matches ? "dark" : "light");
     const c = (u) => {
       n(u.matches ? "dark" : "light");
     };
     return s.addEventListener("change", c), () => s.removeEventListener("change", c);
-  }, [l]), U(() => {
+  }, [a]), U(() => {
     if (o === "local") return;
     const s = document.documentElement;
     return s.classList.add(t), () => {
       s.classList.remove(t);
     };
-  }, [t, o]), o === "local" ? /* @__PURE__ */ S(ee.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ S(Fe, { className: t, children: r }) }) : /* @__PURE__ */ S(ee.Provider, { value: { theme: t, setTheme: n }, children: r });
+  }, [t, o]), o === "local" ? /* @__PURE__ */ S(re.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ S(Ne, { className: t, children: r }) }) : /* @__PURE__ */ S(re.Provider, { value: { theme: t, setTheme: n }, children: r });
 }
 ((e) => {
   function r() {
-    const { theme: l, setTheme: o } = xe(ee);
-    return [l, o];
+    const { theme: a, setTheme: o } = we(re);
+    return [a, o];
   }
   e.useTheme = r;
-})(re || (re = {}));
-const ze = re;
-class ke {
+})(te || (te = {}));
+const Se = te;
+class ze {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -2972,52 +2973,52 @@ 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 } = ke, t = r - a.length;
     if (t < 0)
-      return l[r];
+      return a[r];
     const n = Math.floor(t / o.length), s = t - n * o.length;
     return this.getByIndex(n) + o[s];
   }
 }
-const Re = {
+const ke = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-function Ae(e) {
-  const { clean: r, component: l, variant: o } = e;
-  return le(() => {
+function Re(e) {
+  const { clean: r, component: a, variant: o } = e;
+  return ne(() => {
     if (r) return;
-    const t = l?.split(".");
+    const t = a?.split(".");
     if (!t) return;
-    const n = t.reduce((u, m, f) => f === 0 ? Se.componentsStyles[m] : u?.children?.[m], void 0);
+    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 s = fe(o);
+    const s = me(o);
     if (s.length === 0) return n.styles;
     const c = k.mergeDeep(...s.map((u) => n.variants?.[u]));
     return n.styles ? k.mergeDeep(n.styles, c) : c;
-  }, [r, l, o]);
+  }, [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";
-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 Ae = new ze(), Oe = typeof window < "u" && typeof window.document < "u", M = typeof process == "object" && process.env?.NODE_ENV === "test", Ee = Oe && !M ? U : fe, he = "_b", L = "_s";
+function He(e, r) {
+  const a = Re(e), o = ne(() => a ? k.mergeDeep(a, e) : e, [e, a]), t = [r ? L : he];
+  return T.addClassNames(o, t, []), Ee(() => {
+    T.flush();
   }, [o]), t;
 }
-var B;
+var T;
 ((e) => {
-  let r = !0, l = !1;
+  let r = !0, a = !1;
   const o = /* @__PURE__ */ new Set(), t = [], n = [];
   let s = 0;
-  const c = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
+  const c = Object.keys(B).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))
+        if (k.isKeyOf(v, B))
           x(v, d, h, w, p, g);
-        else if (k.isKeyOf(v, me))
+        else if (k.isKeyOf(v, ye))
           m(d, h, [...w, v], p, g);
         else if (k.isKeyOf(v, W)) {
           if (Array.isArray(d)) {
@@ -3027,19 +3028,19 @@ var B;
           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, ie) && Object.entries(d).forEach(([N, F]) => {
-          const $ = [...w, ie[v]];
-          Object.entries(F).forEach(([V, O]) => {
-            k.isKeyOf(V, D) ? Object.entries(O).forEach(([M, E]) => {
+        }) : k.isKeyOf(v, se) && Object.entries(d).forEach(([N, F]) => {
+          const $ = [...w, se[v]];
+          Object.entries(F).forEach(([V, E]) => {
+            k.isKeyOf(V, D) ? Object.entries(E).forEach(([G, A]) => {
               m(
-                E,
+                A,
                 h,
                 [...$, D[V]],
                 p,
                 // Use | as separator to distinguish theme from group name
-                `${N}|${M}`
+                `${N}|${G}`
               );
-            }) : m({ [V]: O }, h, $, p, N);
+            }) : m({ [V]: E }, h, $, p, N);
           });
         });
     });
@@ -3050,10 +3051,10 @@ var B;
     if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
     const h = q(), w = h.sheet;
-    if (l) {
+    if (a) {
       if (i.hasPendingVariables()) {
         const p = i.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
-        if (w && !H)
+        if (w && !M)
           try {
             w.insertRule(g, 0), s++;
           } catch {
@@ -3073,11 +3074,11 @@ 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);}`
+        `.${he}{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)
+      if (w && !M)
         for (const g of p)
           try {
             w.insertRule(g, s), s++;
@@ -3086,10 +3087,10 @@ var B;
       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)
+      if (t.sort((p, g) => p[1] - g[1] || p[0] - g[0]), w && !M)
         for (const [p, g, v] of t) {
           const d = g * 1e5 + p;
           let N = n.length;
@@ -3112,7 +3113,7 @@ var B;
   }
   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);
+    const d = B[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, $ = C(
       b,
@@ -3122,26 +3123,32 @@ var B;
       g
     );
     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} .${$}`;
-      } else O ? A = `.${g} .${$}${E}` : A = `.${g}${E} .${$}`;
-      const he = d.selector?.(A, "") ?? A, ve = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], pe = d.valueFormat?.(h, i.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 };
+      const V = Y[w], E = V.includes("theme"), A = (E ? V.filter((O) => O !== "theme") : V).map((O) => K[O]).join(""), I = g.includes("|");
+      let j;
+      if (I) {
+        const [O, X] = g.split("|");
+        j = `.${O} .${X}${A} .${$}`;
+      } else E ? j = `.${g} .${$}${A}` : j = `.${g}${A} .${$}`;
+      const ve = d.selector?.(j, "") ?? j, pe = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], ie = `${ve}{${pe.map((O) => {
+        const X = d.valueFormat?.(h, i.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?.(`.${$}`, V) ?? `.${$}${V}`, M = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], E = d.valueFormat?.(h, i.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 V = Y[w].map((I) => K[I]).join(""), E = d.selector?.(`.${$}`, V) ?? `.${$}${V}`, G = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], A = `${E}{${G.map((I) => {
+        const j = d.valueFormat?.(h, i.getVariableValue, I) ?? h;
+        return `${I}:${j}`;
+      }).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, s = 0, l = !1;
+    u = {}, o.clear(), t.length = 0, n.length = 0, s = 0, a = !1;
   }
   e.clear = z;
   function x(b, h, w, p, g = "normal", v) {
     if (h == null) return;
-    const d = p.reduce(($, V) => $ + ye[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
+    const d = p.reduce(($, V) => $ + be[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
     if (!o.has(F)) {
       o.add(F);
       const $ = y(b, h, d, g, v);
@@ -3150,19 +3157,19 @@ var B;
     w.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);
+    const v = Y[w], d = `${p === "normal" ? "" : `${p}-`}${v.map((N) => `${N}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
+    return M ? d : Ae.getIdentity(d);
   }
   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;
+})(T || (T = {}));
+var ce;
 ((e) => {
-  e.flush = B.flush, e.clear = B.clear;
-})(ue || (ue = {}));
+  e.flush = T.flush, e.clear = T.clear;
+})(ce || (ce = {}));
 Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
   return this.filter((r) => !e(r));
 });
@@ -3174,7 +3181,7 @@ 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) => {
@@ -3192,8 +3199,8 @@ 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;
@@ -3202,15 +3209,15 @@ Array.prototype.toRecord || (Array.prototype.toRecord = function(e) {
   );
 });
 Array.prototype.groupBy || (Array.prototype.groupBy = function(e, r = !1) {
-  const l = this.reduce((o, t, n) => {
+  const a = this.reduce((o, t, n) => {
     const s = e(t, n);
     return r && typeof s != "number" && !s || (o.has(s) === !1 && o.set(s, []), o.get(s)?.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 ?? {}, [s, c] = de(!1), u = Ne(null);
-  return ge(() => {
+function Me(e) {
+  const { node: r = null, event: a = "click", hideOnScroll: o = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [s, c] = ge(!1), u = xe(null);
+  return fe(() => {
     function m(C) {
       (r ?? u.current)?.contains(C.target) === !1 && c(!1);
     }
@@ -3224,22 +3231,22 @@ function Ge(e) {
       C.key === "Escape" && c(!1);
     }
     const x = new AbortController();
-    return s && (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 })), () => {
+    return s && (window.addEventListener(a, 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();
     };
   }, [r, s]), [s, c, u];
 }
-const Ie = {
+const je = {
   selected: "aria-selected"
 };
-var ce;
+var de;
 ((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) {
+})(de || (de = {}));
+function Ge(e) {
   let r;
   return Object.defineProperty({
     clear() {
@@ -3249,22 +3256,22 @@ function De(e) {
     get: () => (r === void 0 && (r = e()), r)
   });
 }
-function Le(e, r) {
+function Ie(e, r) {
   if (!e) return { score: 1, matches: [] };
   if (!r) return null;
-  const l = e.toLowerCase(), o = r.toLowerCase();
+  const a = e.toLowerCase(), o = r.toLowerCase();
   let t = 0, n = 0;
   const s = [];
   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 && (s.push([c, n]), c = -1), m = 0), n++;
-  return c !== -1 && s.push([c, n]), t < l.length ? null : (u = u / r.length, { score: u, matches: s });
+  for (; t < a.length && n < o.length; )
+    a[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 && (s.push([c, n]), c = -1), m = 0), n++;
+  return c !== -1 && s.push([c, n]), t < a.length ? null : (u = u / r.length, { score: u, matches: s });
 }
-function Pe(e, r) {
-  return Le(e, r) !== null;
+function De(e, r) {
+  return Ie(e, r) !== null;
 }
-function Ue(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ S(
+function Pe(e) {
+  return /* @__PURE__ */ S(_, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ S(
     "path",
     {
       fillRule: "evenodd",
@@ -3273,43 +3280,43 @@ function Ue(e) {
     }
   ) });
 }
-var te;
+var oe;
 ((e) => {
-  function r(l, o = 300) {
+  function r(a, o = 300) {
     let t = !1, n;
     return (...s) => {
       if (t) {
         n = s;
         return;
       }
-      l(...s), t = !0, setTimeout(() => {
-        t = !1, n && l(...n);
+      a(...s), t = !0, setTimeout(() => {
+        t = !1, n && a(...n);
       }, o);
     };
   }
   e.throttle = r;
-})(te || (te = {}));
-const We = te, _ = /* @__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;
+})(oe || (oe = {}));
+const Ue = oe, H = /* @__PURE__ */ new Map();
+function We() {
+  const [e] = Se.useTheme(), r = ne(() => {
+    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(() => {
     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 = H.get(e) ?? 0;
+    return H.set(e, a + 1), a === 0 && r.classList.add(e), () => {
+      const t = (H.get(e) ?? 1) - 1;
+      t <= 0 ? (H.delete(e), r.classList.remove(e)) : H.set(e, t);
     };
   }, [r, e]), r;
 }
-function qe(e) {
-  return /* @__PURE__ */ S(T, { ...e, children: /* @__PURE__ */ S("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+function Ke(e) {
+  return /* @__PURE__ */ S(_, { ...e, children: /* @__PURE__ */ S("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
 }
-function Xe(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ S(
+function qe(e) {
+  return /* @__PURE__ */ S(_, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ S(
     "path",
     {
       strokeWidth: 4,
@@ -3317,24 +3324,24 @@ function Xe(e) {
     }
   ) });
 }
-function Ye(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ S("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
+function Xe(e) {
+  return /* @__PURE__ */ S(_, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ S("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
 }
-function Ze(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ S("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" }) });
+function Ye(e) {
+  return /* @__PURE__ */ S(_, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ S("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 ae;
 ((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;
-function Je(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ S("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" }) });
+})(ae || (ae = {}));
+const Ze = ae;
+function Qe(e) {
+  return /* @__PURE__ */ S(_, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ S("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 le;
 ((e) => {
   function r(o) {
     const t = Array.from(o.elements).reduce(
@@ -3347,16 +3354,16 @@ var ae;
     return Object.entries(t).reduce((n, [s, c]) => {
       if (c.length === 1) {
         const u = c[0];
-        l(n, s, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
+        a(n, s, u.type === "checkbox" || u.type === "radio" ? u.checked : u.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, s, u);
+        a(n, s, u);
       }
       return n;
     }, {});
   }
   e.getFormEntries = r;
-  function l(o, t, n) {
+  function a(o, t, n) {
     if (t.includes(".")) {
       const s = t.split(".");
       let c = o;
@@ -3374,28 +3381,28 @@ var ae;
     } else
       o[t] = n;
   }
-})(ae || (ae = {}));
-const er = ae;
+})(le || (le = {}));
+const Je = le;
 export {
-  ce as B,
-  Xe as D,
-  Ue as E,
-  We as F,
-  Ye as G,
+  de as B,
+  qe as D,
+  Pe as E,
+  Ue as F,
+  Xe as G,
   k as O,
-  Ze as P,
-  qe as S,
-  ze as T,
+  Ye as P,
+  Ke as S,
+  Se as T,
   i as V,
-  Se as a,
-  Ge as b,
-  fe as c,
-  Je as d,
-  er as e,
-  Pe as f,
-  Qe as g,
-  Ke as h,
-  ue as i,
-  De as m,
-  Me as u
+  $e as a,
+  Me as b,
+  me as c,
+  Qe as d,
+  Je as e,
+  De as f,
+  Ze as g,
+  We as h,
+  ce as i,
+  Ge as m,
+  He as u
 };