@cronocode/react-box 3.1.7 → 3.1.9

package/core.mjs

@@ -1,36 +1,36 @@
-import we, { useContext as xe, useState as de, useLayoutEffect as ae, useMemo as le, useEffect as ge, useRef as Fe } from "react";
-import { jsx as z } from "react/jsx-runtime";
+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 S } from "react/jsx-runtime";
 import T from "./components/baseSvg.mjs";
-import Ne from "./box.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(([a, t]) => {
-    t && r.push(a);
+  return e.reduce((r, a) => a ? typeof a == "string" ? (r.push(a), r) : Array.isArray(a) ? (r.push(...fe(...a)), r) : (Object.entries(a).forEach(([l, t]) => {
+    t && r.push(l);
   }), r) : r, []);
 }
-const X = 4;
+const Y = 4;
 var o;
 ((e) => {
   ((r) => {
-    function l(t, n) {
+    function a(t, n) {
       return `${t}${n.replace("/", "-")}`;
     }
-    r.fraction = l;
-    function a(t) {
+    r.fraction = a;
+    function l(t) {
       return [`${t} path`, `${t} circle`, `${t} rect`, `${t} line`];
     }
-    r.svg = a;
+    r.svg = l;
   })(e.ClassName || (e.ClassName = {})), ((r) => {
-    function l(x, C, R = X) {
-      return `${x / R}rem`;
+    function a(x, C, k = Y) {
+      return `${x / k}rem`;
     }
-    r.rem = l;
-    function a(x) {
+    r.rem = a;
+    function l(x) {
       return `${x}px`;
     }
-    r.px = a;
+    r.px = l;
     function t(x) {
-      const [C, R] = x.split("/");
-      return `${+C / +R * 100}%`;
+      const [C, k] = x.split("/");
+      return `${+C / +k * 100}%`;
     }
     r.fraction = t;
     function n(x, C) {
@@ -44,18 +44,18 @@ var o;
       }
     }
     r.widthHeight = n;
-    function s(x) {
-      return (C, R) => `var(--${x}${R});`;
-    }
-    r.variables = s;
     function u(x) {
-      return (C, R) => `var(--${x}${R});`;
+      return (C, k) => `var(--${x}${k});`;
+    }
+    r.variables = u;
+    function c(x) {
+      return (C, k) => `var(--${x}${k});`;
     }
-    r.svgVariables = u;
-    function i(x, C) {
+    r.svgVariables = c;
+    function s(x, C) {
       return `repeat(${C},minmax(0,1fr))`;
     }
-    r.gridColumns = i;
+    r.gridColumns = s;
     function m(x, C) {
       return C === "full-row" ? "1/-1" : `span ${C}/span ${C}`;
     }
@@ -68,13 +68,13 @@ var o;
       return `${C}deg`;
     }
     r.rotate = y;
-    function k(x, C) {
+    function z(x, C) {
       return C === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = k;
+    r.flip = z;
   })(e.Value || (e.Value = {}));
 })(o || (o = {}));
-var Y;
+var Z;
 ((e) => {
   e.colors = {
     currentColor: "currentColor",
@@ -397,25 +397,25 @@ var Y;
     "-9/12",
     "-10/12",
     "-11/12"
-  ];
-  const l = { ...{
+  ], e.percentString = "";
+  const a = { ...{
     inherit: "inherit",
     none: "none"
-  }, ...e.colors, ...e.bgImages, ...e.shadows }, a = {}, t = {};
+  }, ...e.colors, ...e.bgImages, ...e.shadows }, l = {}, t = {};
   let n = {};
-  function s(y) {
-    return y in a || (y in n ? (t[y] = n[y], a[y] = n[y]) : y in l ? (t[y] = l[y], a[y] = l[y]) : (t[y] = y, a[y] = y)), `var(--${y})`;
+  function u(y) {
+    return y in l || (y in n ? (t[y] = n[y], l[y] = n[y]) : y in a ? (t[y] = a[y], l[y] = a[y]) : (t[y] = y, l[y] = y)), `var(--${y})`;
   }
-  e.getVariableValue = s;
-  function u() {
-    return Object.entries(a).map(([y, k]) => `--${y}: ${k};`).join("");
+  e.getVariableValue = u;
+  function c() {
+    return Object.entries(l).map(([y, z]) => `--${y}: ${z};`).join("");
   }
-  e.generateVariables = u;
-  function i() {
+  e.generateVariables = c;
+  function s() {
     const y = { ...t };
-    return Object.keys(t).forEach((k) => delete t[k]), y;
+    return Object.keys(t).forEach((z) => delete t[z]), y;
   }
-  e.getPendingVariables = i;
+  e.getPendingVariables = s;
   function m() {
     return Object.keys(t).length > 0;
   }
@@ -424,8 +424,8 @@ var Y;
     n = y;
   }
   e.setUserVariables = f;
-})(Y || (Y = {}));
-const d = Y, L = {
+})(Z || (Z = {}));
+const i = Z, L = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -580,12 +580,15 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The right CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
@@ -595,12 +598,15 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements. */
@@ -610,12 +616,15 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
@@ -625,12 +634,15 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. */
@@ -638,6 +650,9 @@ const d = Y, L = {
     {
       values: 0,
       valueFormat: o.Value.rem
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
@@ -842,6 +857,9 @@ const d = Y, L = {
     {
       values: 0,
       valueFormat: o.Value.rem
+    },
+    {
+      values: i.percentString
     }
   ],
   /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
@@ -850,6 +868,10 @@ const d = Y, L = {
       styleName: "row-gap",
       values: 0,
       valueFormat: o.Value.rem
+    },
+    {
+      styleName: "row-gap",
+      values: i.percentString
     }
   ],
   /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
@@ -858,6 +880,10 @@ const d = Y, L = {
       styleName: "column-gap",
       values: 0,
       valueFormat: o.Value.rem
+    },
+    {
+      styleName: "column-gap",
+      values: i.percentString
     }
   ],
   /** The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0. */
@@ -879,11 +905,14 @@ const d = Y, L = {
       valueFormat: () => "100vh"
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      values: i.percentString
     }
   ],
   /** 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. */
@@ -901,12 +930,16 @@ const d = Y, L = {
     },
     {
       styleName: "min-height",
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       styleName: "min-height",
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      styleName: "min-height",
+      values: i.percentString
     }
   ],
   /** 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. */
@@ -924,12 +957,16 @@ const d = Y, L = {
     },
     {
       styleName: "max-height",
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       styleName: "max-height",
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      styleName: "max-height",
+      values: i.percentString
     }
   ],
   /** 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. */
@@ -944,11 +981,14 @@ const d = Y, L = {
       valueFormat: () => "100vw"
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      values: i.percentString
     }
   ],
   /** 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. */
@@ -966,12 +1006,16 @@ const d = Y, L = {
     },
     {
       styleName: "min-width",
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       styleName: "min-width",
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      styleName: "min-width",
+      values: i.percentString
     }
   ],
   /** 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. */
@@ -989,12 +1033,16 @@ const d = Y, L = {
     },
     {
       styleName: "max-width",
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: o.Value.fraction
     },
     {
       styleName: "max-width",
       values: ["auto", "fit-content", "max-content", "min-content"]
+    },
+    {
+      styleName: "max-width",
+      values: i.percentString
     }
   ],
   /** The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. */
@@ -1037,8 +1085,13 @@ const d = Y, L = {
       styleName: "margin"
     },
     {
-      values: d.percentages,
+      styleName: "margin",
+      values: i.percentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString,
+      styleName: "margin"
     }
   ],
   /** The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
@@ -1053,8 +1106,13 @@ const d = Y, L = {
       styleName: "margin-inline"
     },
     {
-      values: d.percentages,
+      styleName: "margin-inline",
+      values: i.percentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-inline"
     }
   ],
   /** The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
@@ -1069,8 +1127,13 @@ const d = Y, L = {
       styleName: "margin-block"
     },
     {
-      values: d.percentages,
+      styleName: "margin-block",
+      values: i.percentages,
       valueFormat: o.Value.fraction
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-block"
     }
   ],
   /** The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1085,8 +1148,13 @@ const d = Y, L = {
       styleName: "margin-top"
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "margin-top"
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-top"
     }
   ],
   /** The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1101,8 +1169,13 @@ const d = Y, L = {
       styleName: "margin-right"
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "margin-right"
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-right"
     }
   ],
   /** The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1117,8 +1190,13 @@ const d = Y, L = {
       styleName: "margin-bottom"
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "margin-bottom"
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-bottom"
     }
   ],
   /** The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
@@ -1133,8 +1211,13 @@ const d = Y, L = {
       styleName: "margin-left"
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "margin-left"
+    },
+    {
+      values: i.percentString,
+      styleName: "margin-left"
     }
   ],
   /** The padding CSS shorthand property sets the padding area on all four sides of an element at once. */
@@ -1145,8 +1228,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding"
     }
   ],
   /** The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -1157,8 +1245,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-inline"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-inline"
     }
   ],
   /** The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -1169,8 +1262,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-block"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-block"
     }
   ],
   /** The padding-top CSS property sets the height of the padding area on the top of an element. */
@@ -1181,8 +1279,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-top"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-top"
     }
   ],
   /** The padding-right CSS property sets the width of the padding area on the right of an element. */
@@ -1193,8 +1296,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-right"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-right"
     }
   ],
   /** The padding-bottom CSS property sets the height of the padding area on the bottom of an element. */
@@ -1205,8 +1313,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-bottom"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-bottom"
     }
   ],
   /** The padding-left CSS property sets the width of the padding area to the left of an element. */
@@ -1217,8 +1330,13 @@ const d = Y, L = {
       valueFormat: o.Value.rem
     },
     {
-      values: d.percentages,
-      valueFormat: o.Value.fraction
+      values: i.percentages,
+      valueFormat: o.Value.fraction,
+      styleName: "padding-left"
+    },
+    {
+      values: i.percentString,
+      styleName: "padding-left"
     }
   ],
   /** The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. */
@@ -1470,14 +1588,14 @@ const d = Y, L = {
   /** The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.  */
   color: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-color CSS property sets the background color of an element. */
   bgColor: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-color"
     }
@@ -1485,7 +1603,7 @@ const d = Y, L = {
   /** The border-color shorthand CSS property sets the color of an element's border. */
   borderColor: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "border-color"
     }
@@ -1493,7 +1611,7 @@ const d = Y, L = {
   /** The outline-color CSS property sets the color of an element's outline. */
   outlineColor: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "outline-color"
     }
@@ -1501,21 +1619,21 @@ const d = Y, L = {
   /** The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. */
   fill: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. */
   stroke: [
     {
-      values: d.colorValues,
+      values: i.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-image CSS property sets one or more background images on an element. */
   bgImage: [
     {
-      values: d.bgImageValues,
+      values: i.bgImageValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-image"
     }
@@ -1523,7 +1641,7 @@ const d = Y, L = {
   /** The box-shadow CSS property adds shadow effects around an element's frame */
   shadow: [
     {
-      values: d.shadowValues,
+      values: i.shadowValues,
       valueFormat: (e, r) => r(e),
       styleName: "box-shadow"
     }
@@ -1532,36 +1650,46 @@ const d = Y, L = {
   translateX: [
     {
       values: 0,
-      valueFormat: (e) => `translateX(${e / X}rem)`,
+      valueFormat: (e) => `translateX(${e / Y}rem)`,
       styleName: "transform"
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: (e) => `translateX(${o.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: (e) => `translateX(${o.Value.fraction(e)})`,
       styleName: "transform"
+    },
+    {
+      values: i.percentString,
+      valueFormat: (e) => `translateX(${e})`,
+      styleName: "transform"
     }
   ],
   /** The translateY() CSS function repositions an element vertically on the 2D plane. */
   translateY: [
     {
       values: 0,
-      valueFormat: (e) => `translateY(${e / X}rem)`,
+      valueFormat: (e) => `translateY(${e / Y}rem)`,
       styleName: "transform"
     },
     {
-      values: d.percentages,
+      values: i.percentages,
       valueFormat: (e) => `translateY(${o.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: d.negativePercentages,
+      values: i.negativePercentages,
       valueFormat: (e) => `translateY(${o.Value.fraction(e)})`,
       styleName: "transform"
+    },
+    {
+      values: i.percentString,
+      valueFormat: (e) => `translateY(${e})`,
+      styleName: "transform"
     }
   ],
   /** The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. */
@@ -1592,7 +1720,7 @@ const d = Y, L = {
   hasDisabled: ":has([disabled])",
   before: "::before",
   after: "::after"
-}, U = {
+}, W = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
@@ -1600,14 +1728,14 @@ const d = Y, L = {
   selected: '[aria-selected="true"]'
 }, Ve = {
   theme: ""
-}, W = { ...me, ...U, ...Ve }, ye = Object.entries(W).reduce(
-  (e, [r], l) => (e[r] = Math.pow(2, l), e),
+}, K = { ...me, ...W, ...Ve }, ye = Object.entries(K).reduce(
+  (e, [r], a) => (e[r] = Math.pow(2, a), e),
   {}
-), q = Object.entries(W).reduce(
+), X = Object.entries(K).reduce(
   (e, [r]) => {
-    const l = ye[r];
-    return Object.entries(e).forEach(([a, t]) => {
-      e[+a + l] = [...t, r];
+    const a = ye[r];
+    return Object.entries(e).forEach(([l, t]) => {
+      e[+l + a] = [...t, r];
     }), e;
   },
   { 0: [] }
@@ -1631,34 +1759,34 @@ const d = Y, L = {
   /** Styles applied for 2x extra-large screens and larger. >= 1536 */
   xxl: 1536
 };
-var Z;
+var Q;
 ((e) => {
-  function r(n, s, u) {
-    const i = { ...n }, m = i.props || {};
-    return s.forEach((f) => {
-      f in i && (m[f] = i[f], delete i[f]);
-    }), u && Object.entries(u).forEach(([f, y]) => {
+  function r(n, u, c) {
+    const s = { ...n }, m = s.props || {};
+    return u.forEach((f) => {
+      f in s && (m[f] = s[f], delete s[f]);
+    }), c && Object.entries(c).forEach(([f, y]) => {
       m[f] = y;
-    }), i.props = m, i;
+    }), s.props = m, s;
   }
   e.buildProps = r;
-  function l(n) {
+  function a(n) {
     return !!n && typeof n == "object";
   }
-  e.isObject = l;
-  function a(...n) {
-    return n.reduce((s, u) => (Object.keys(u ?? {}).forEach((i) => {
-      const m = s[i], f = u[i];
-      l(f) && "clean" in f && f.clean ? s[i] = f : i in U && typeof f == "boolean" || (i in U && Array.isArray(f) ? s[i] = a(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? s[i] = m.concat(...f) : l(m) && l(f) ? s[i] = a(m, f) : s[i] = f);
-    }), s), {});
+  e.isObject = a;
+  function l(...n) {
+    return n.reduce((u, c) => (Object.keys(c ?? {}).forEach((s) => {
+      const m = u[s], f = c[s];
+      a(f) && "clean" in f && f.clean ? u[s] = f : s in W && typeof f == "boolean" || (s in W && Array.isArray(f) ? u[s] = l(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? u[s] = m.concat(...f) : a(m) && a(f) ? u[s] = l(m, f) : u[s] = f);
+    }), u), {});
   }
-  e.mergeDeep = a;
-  function t(n, s) {
-    return n in s;
+  e.mergeDeep = l;
+  function t(n, u) {
+    return n in u;
   }
   e.isKeyOf = t;
-})(Z || (Z = {}));
-const S = Z, se = {
+})(Q || (Q = {}));
+const R = Q, se = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -2763,41 +2891,49 @@ const S = Z, se = {
 };
 var J;
 ((e) => {
-  function r(a, t, n) {
-    return d.setUserVariables(a), Object.entries(t).forEach(([s, u]) => {
-      L[s] = u;
-    }), Object.entries(n).forEach(([s, u]) => {
-      const i = L[s];
-      L[s] = i ? [...u, ...i] : u;
+  function r(l, t, n) {
+    return i.setUserVariables(l), Object.entries(t).forEach(([u, c]) => {
+      L[u] = c;
+    }), Object.entries(n).forEach(([u, c]) => {
+      const s = L[u];
+      L[u] = s ? [...c, ...s] : c;
     }), { extendedProps: t, extendedPropTypes: n };
   }
   e.extend = r, e.componentsStyles = se;
-  function l(a) {
-    return e.componentsStyles = S.mergeDeep(se, a), a;
+  function a(l) {
+    return e.componentsStyles = R.mergeDeep(se, l), l;
   }
-  e.components = l;
+  e.components = a;
 })(J || (J = {}));
-const $e = J, Q = we.createContext({ theme: "", setTheme: () => {
+const $e = J, ee = we.createContext({ theme: "", setTheme: () => {
 } });
-function ee(e) {
-  const { children: r, theme: l, use: a = "local" } = e, [t, n] = de(l);
-  return ae(() => {
-    if (a === "local") return;
-    const s = document.documentElement;
-    return s.classList.add(t), () => {
-      s.classList.remove(t);
+function re(e) {
+  const { children: r, theme: a, use: l = "local" } = e, [t, n] = de(a ?? "light");
+  return U(() => {
+    if (a !== void 0) return;
+    const u = window.matchMedia("(prefers-color-scheme: dark)");
+    n(u.matches ? "dark" : "light");
+    const c = (s) => {
+      n(s.matches ? "dark" : "light");
     };
-  }, [t, a]), a === "local" ? /* @__PURE__ */ z(Q.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ z(Ne, { className: t, children: r }) }) : /* @__PURE__ */ z(Q.Provider, { value: { theme: t, setTheme: n }, children: r });
+    return u.addEventListener("change", c), () => u.removeEventListener("change", c);
+  }, [a]), U(() => {
+    if (l === "local") return;
+    const u = document.documentElement;
+    return u.classList.add(t), () => {
+      u.classList.remove(t);
+    };
+  }, [t, l]), l === "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 });
 }
 ((e) => {
   function r() {
-    const { theme: l, setTheme: a } = xe(Q);
-    return [l, a];
+    const { theme: a, setTheme: l } = xe(ee);
+    return [a, l];
   }
   e.useTheme = r;
-})(ee || (ee = {}));
-const ze = ee;
-class ke {
+})(re || (re = {}));
+const Se = re;
+class ze {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -2805,89 +2941,89 @@ class ke {
     return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
   getByIndex(r) {
-    const { first: l, next: a } = Re, t = r - l.length;
+    const { first: a, next: l } = ke, t = r - a.length;
     if (t < 0)
-      return l[r];
-    const n = Math.floor(t / a.length), s = t - n * a.length;
-    return this.getByIndex(n) + a[s];
+      return a[r];
+    const n = Math.floor(t / l.length), u = t - n * l.length;
+    return this.getByIndex(n) + l[u];
   }
 }
-const Re = {
+const ke = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-function Se(e) {
-  const { clean: r, component: l, variant: a } = e;
+function Re(e) {
+  const { clean: r, component: a, variant: l } = e;
   return le(() => {
     if (r) return;
-    const t = l?.split(".");
+    const t = a?.split(".");
     if (!t) return;
-    const n = t.reduce((i, m, f) => f === 0 ? $e.componentsStyles[m] : i?.children?.[m], void 0);
+    const n = t.reduce((s, m, f) => f === 0 ? $e.componentsStyles[m] : s?.children?.[m], void 0);
     if (!n) return;
-    if (!a) return n.styles;
-    const s = fe(a);
-    if (s.length === 0) return n.styles;
-    const u = S.mergeDeep(...s.map((i) => n.variants?.[i]));
-    return n.styles ? S.mergeDeep(n.styles, u) : u;
-  }, [r, l, a]);
+    if (!l) return n.styles;
+    const u = fe(l);
+    if (u.length === 0) return n.styles;
+    const c = R.mergeDeep(...u.map((s) => n.variants?.[s]));
+    return n.styles ? R.mergeDeep(n.styles, c) : c;
+  }, [r, a, l]);
 }
-const Ae = new ke(), Oe = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", je = Oe && !H ? ae : ge, be = "_b", I = "_s";
+const Ae = new ze(), Oe = typeof window < "u" && typeof window.document < "u", H = typeof process == "object" && process.env?.NODE_ENV === "test", Ee = Oe && !H ? U : ge, be = "_b", I = "_s";
 function He(e, r) {
-  const l = Se(e), a = le(() => l ? S.mergeDeep(l, e) : e, [e, l]), t = [r ? I : be];
-  return B.addClassNames(a, t, []), je(() => {
+  const a = Re(e), l = le(() => a ? R.mergeDeep(a, e) : e, [e, a]), t = [r ? I : be];
+  return B.addClassNames(l, t, []), Ee(() => {
     B.flush();
-  }, [a]), t;
+  }, [l]), t;
 }
 var B;
 ((e) => {
-  let r = !0, l = !1;
-  const a = /* @__PURE__ */ new Set(), t = [], n = [];
-  let s = 0;
-  const u = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
-  let i = {};
+  let r = !0, a = !1;
+  const l = /* @__PURE__ */ new Set(), t = [], n = [];
+  let u = 0;
+  const c = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
+  let s = {};
   function m(b, h, w, p, g) {
-    Object.entries(b).forEach(([v, c]) => {
-      if (S.isKeyOf(v, L))
-        x(v, c, h, w, p, g);
-      else if (S.isKeyOf(v, me))
-        m(c, h, [...w, v], p, g);
-      else if (S.isKeyOf(v, U)) {
-        if (Array.isArray(c)) {
-          const [F, N] = c;
-          m(N, h, [...w, v], p, g);
+    Object.entries(b).forEach(([v, d]) => {
+      if (R.isKeyOf(v, L))
+        x(v, d, h, w, p, g);
+      else if (R.isKeyOf(v, me))
+        m(d, h, [...w, v], p, g);
+      else if (R.isKeyOf(v, W)) {
+        if (Array.isArray(d)) {
+          const [N, F] = d;
+          m(F, h, [...w, v], p, g);
         }
-        S.isObject(c) && m(c, h, [...w, v], p, g);
-      } else S.isKeyOf(v, D) ? m(c, h, w, v, g) : S.isKeyOf(v, P) ? Object.entries(c).forEach(([F, N]) => {
-        m(N, h, [...w, P[v]], p, F);
-      }) : S.isKeyOf(v, ie) && Object.entries(c).forEach(([F, N]) => {
+        R.isObject(d) && m(d, h, [...w, v], p, g);
+      } else R.isKeyOf(v, D) ? m(d, h, w, v, g) : R.isKeyOf(v, P) ? Object.entries(d).forEach(([N, F]) => {
+        m(F, h, [...w, P[v]], p, N);
+      }) : R.isKeyOf(v, ie) && Object.entries(d).forEach(([N, F]) => {
         const $ = [...w, ie[v]];
-        Object.entries(N).forEach(([V, O]) => {
-          S.isKeyOf(V, P) ? Object.entries(O).forEach(([G, j]) => {
+        Object.entries(F).forEach(([V, O]) => {
+          R.isKeyOf(V, P) ? Object.entries(O).forEach(([M, E]) => {
             m(
-              j,
+              E,
               h,
               [...$, P[V]],
               p,
               // Use | as separator to distinguish theme from group name
-              `${F}|${G}`
+              `${N}|${M}`
             );
-          }) : m({ [V]: O }, h, $, p, F);
+          }) : m({ [V]: O }, h, $, p, N);
         });
       });
     });
   }
   e.addClassNames = m;
   function f() {
-    const b = d.hasPendingVariables();
+    const b = i.hasPendingVariables();
     if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const h = K(), w = h.sheet;
-    if (l) {
-      if (d.hasPendingVariables()) {
-        const p = d.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, c]) => `--${v}: ${c};`).join("")}}`;
+    const h = q(), w = h.sheet;
+    if (a) {
+      if (i.hasPendingVariables()) {
+        const p = i.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
         if (w && !H)
           try {
-            w.insertRule(g, 0), s++;
+            w.insertRule(g, 0), u++;
           } catch {
           }
         else
@@ -2896,7 +3032,7 @@ var B;
       }
     } else {
       const p = [
-        `:root{${d.generateVariables()}}`,
+        `:root{${i.generateVariables()}}`,
         ":root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}",
         "#crono-box {position: absolute;top: 0;left: 0;height: 0;z-index:99999;}",
         "html{font-size: 16px;font-family: Arial, sans-serif;}",
@@ -2912,28 +3048,28 @@ var B;
       if (w && !H)
         for (const g of p)
           try {
-            w.insertRule(g, s), s++;
+            w.insertRule(g, 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 c = g * 1e5 + p;
-          let F = n.length;
-          for (let N = 0; N < n.length; N++)
-            if (c < n[N]) {
-              F = N;
+          const d = g * 1e5 + p;
+          let N = n.length;
+          for (let F = 0; F < n.length; F++)
+            if (d < n[F]) {
+              N = F;
               break;
             }
           try {
-            w.insertRule(v, s + F), n.splice(F, 0, c);
+            w.insertRule(v, u + N), n.splice(N, 0, d);
           } catch {
-            w.insertRule(v, w.cssRules.length), n.push(c);
+            w.insertRule(v, w.cssRules.length), n.push(d);
           }
         }
       else
@@ -2944,9 +3080,9 @@ var B;
   }
   e.flush = f;
   function y(b, h, w, p, g) {
-    const c = L[b].find((V) => Array.isArray(V.values) ? V.values.includes(h) : typeof h == typeof V.values);
-    if (!c) return null;
-    const F = u[b] ?? 0, N = D[p] ?? 0, $ = C(
+    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 = D[p] ?? 0, $ = C(
       b,
       h,
       w,
@@ -2954,41 +3090,41 @@ var B;
       g
     );
     if (g) {
-      const V = q[w], O = V.includes("theme"), j = (O ? V.filter((E) => E !== "theme") : V).map((E) => W[E]).join(""), M = g.includes("|");
+      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 (M) {
-        const [E, Ce] = g.split("|");
-        A = `.${E} .${Ce}${j} .${$}`;
-      } else O ? A = `.${g} .${$}${j}` : A = `.${g}${j} .${$}`;
-      const he = c.selector?.(A, "") ?? A, ve = Array.isArray(c.styleName) ? c.styleName : [c.styleName ?? b], pe = c.valueFormat?.(h, d.getVariableValue) ?? h, ne = `${he}{${ve.map((E) => `${E}:${pe}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${ne}}`, sortIndex: F, breakpointOrder: N } : { rule: ne, sortIndex: F, breakpointOrder: N };
+      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: ${D[p]}px){${ne}}`, sortIndex: N, breakpointOrder: F } : { rule: ne, sortIndex: N, breakpointOrder: F };
     } else {
-      const V = q[w].map((A) => W[A]).join(""), O = c.selector?.(`.${$}`, V) ?? `.${$}${V}`, G = Array.isArray(c.styleName) ? c.styleName : [c.styleName ?? b], j = c.valueFormat?.(h, d.getVariableValue) ?? h, M = `${O}{${G.map((A) => `${A}:${j}`).join(";")}}`;
-      return p !== "normal" ? { rule: `@media(min-width: ${D[p]}px){${M}}`, sortIndex: F, breakpointOrder: N } : { rule: M, sortIndex: F, breakpointOrder: N };
+      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: ${D[p]}px){${G}}`, sortIndex: N, breakpointOrder: F } : { rule: G, sortIndex: N, breakpointOrder: F };
     }
   }
-  function k() {
-    i = {}, a.clear(), t.length = 0, n.length = 0, s = 0, l = !1;
+  function z() {
+    s = {}, l.clear(), t.length = 0, n.length = 0, u = 0, a = !1;
   }
-  e.clear = k;
+  e.clear = z;
   function x(b, h, w, p, g = "normal", v) {
     if (h == null) return;
-    const c = p.reduce(($, V) => $ + ye[V], 0), F = C(b, h, c, g, v), N = `${g}-${c}-${b}-${h}-${v ?? ""}`;
-    if (!a.has(N)) {
-      a.add(N);
-      const $ = y(b, h, c, g, v);
-      $ && (t.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), i[g] ? i[g][c] ? i[g][c][b] || (i[g][c][b] = /* @__PURE__ */ new Set()) : i[g][c] = { [b]: /* @__PURE__ */ new Set() } : i[g] = { [c]: { [b]: /* @__PURE__ */ new Set() } }, v ? (i[g][c].__parents ? i[g][c].__parents[v] ? i[g][c].__parents[v][b] || (i[g][c].__parents[v][b] = /* @__PURE__ */ new Set()) : i[g][c].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : i[g][c].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, i[g][c].__parents[v][b].add(h)) : i[g][c][b].add(h);
+    const d = p.reduce(($, V) => $ + ye[V], 0), N = C(b, h, d, g, v), F = `${g}-${d}-${b}-${h}-${v ?? ""}`;
+    if (!l.has(F)) {
+      l.add(F);
+      const $ = y(b, h, d, g, v);
+      $ && (t.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), s[g] ? s[g][d] ? s[g][d][b] || (s[g][d][b] = /* @__PURE__ */ new Set()) : s[g][d] = { [b]: /* @__PURE__ */ new Set() } : s[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (s[g][d].__parents ? s[g][d].__parents[v] ? s[g][d].__parents[v][b] || (s[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : s[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : s[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, s[g][d].__parents[v][b].add(h)) : s[g][d][b].add(h);
     }
-    w.push(F);
+    w.push(N);
   }
   function C(b, h, w, p, g) {
-    const v = q[w], c = `${p === "normal" ? "" : `${p}-`}${v.map((F) => `${F}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
-    return H ? c : Ae.getIdentity(c);
+    const v = X[w], d = `${p === "normal" ? "" : `${p}-`}${v.map((N) => `${N}-`).join("")}${g ? `${g}-` : ""}${b}-${h}`;
+    return H ? d : Ae.getIdentity(d);
   }
-  const R = "crono-styles";
-  function K() {
-    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;
+  const k = "crono-styles";
+  function q() {
+    let b = document.getElementById(k);
+    return b || (b = document.createElement("style"), b.setAttribute("id", k), b.setAttribute("type", "text/css"), document.head.insertBefore(b, document.head.firstChild)), b;
   }
 })(B || (B = {}));
 var ue;
@@ -3006,12 +3142,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, a, t) => l + e(a, t), r);
+  return this.reduce((a, l, t) => a + e(l, t), r);
 });
 Array.prototype.sortBy || (Array.prototype.sortBy = function(e, r) {
-  return [...this].sort((a, t) => {
-    const n = e(a), s = e(t);
-    return n < s ? r === "DESC" ? 1 : -1 : n > s ? r === "DESC" ? -1 : 1 : 0;
+  return [...this].sort((l, t) => {
+    const n = e(l), u = e(t);
+    return n < u ? r === "DESC" ? 1 : -1 : n > u ? r === "DESC" ? -1 : 1 : 0;
   });
 });
 Array.prototype.maxBy || (Array.prototype.maxBy = function(e) {
@@ -3024,54 +3160,54 @@ Array.prototype.findOrThrow || (Array.prototype.findOrThrow = function(e) {
 });
 Array.prototype.toRecord || (Array.prototype.toRecord = function(e) {
   return this.reduce(
-    (r, l) => {
-      const a = e(l);
-      if (!a) return r;
-      const [t, n] = a;
+    (r, a) => {
+      const l = e(a);
+      if (!l) return r;
+      const [t, n] = l;
       return r[t] = n, r;
     },
     {}
   );
 });
 Array.prototype.groupBy || (Array.prototype.groupBy = function(e, r = !1) {
-  const l = this.reduce((a, t, n) => {
-    const s = e(t, n);
-    return r && typeof s != "number" && !s || (a.has(s) === !1 && a.set(s, []), a.get(s)?.push(t)), a;
+  const a = this.reduce((l, t, n) => {
+    const u = e(t, n);
+    return r && typeof u != "number" && !u || (l.has(u) === !1 && l.set(u, []), l.get(u)?.push(t)), l;
   }, /* @__PURE__ */ new Map());
-  return Array.from(l, ([a, t]) => ({ key: a, values: t }));
+  return Array.from(a, ([l, t]) => ({ key: l, values: t }));
 });
-function Ge(e) {
-  const { node: r = null, event: l = "click", hideOnScroll: a = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [s, u] = de(!1), i = Fe(null);
+function Me(e) {
+  const { node: r = null, event: a = "click", hideOnScroll: l = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [u, c] = de(!1), s = Ne(null);
   return ge(() => {
     function m(C) {
-      (r ?? i.current)?.contains(C.target) === !1 && u(!1);
+      (r ?? s.current)?.contains(C.target) === !1 && c(!1);
     }
     function f() {
-      u(!1);
+      c(!1);
     }
     function y(C) {
-      (r ?? i.current)?.contains(C.target) === !1 && u(!1);
+      (r ?? s.current)?.contains(C.target) === !1 && c(!1);
     }
-    function k(C) {
-      C.key === "Escape" && u(!1);
+    function z(C) {
+      C.key === "Escape" && c(!1);
     }
     const x = new AbortController();
-    return s && (window.addEventListener(l, m, x), n && window.addEventListener("keydown", k, x), t && window.addEventListener("resize", f, x), a && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
+    return u && (window.addEventListener(a, m, x), n && window.addEventListener("keydown", z, x), t && window.addEventListener("resize", f, x), l && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
       x.abort();
     };
-  }, [r, s]), [s, u, i];
+  }, [r, u]), [u, c, s];
 }
-const Ee = {
+const je = {
   selected: "aria-selected"
 };
 var ce;
 ((e) => {
-  function r(l, a, t) {
-    l !== void 0 && l != null && (t[Ee[a] ?? a] = Array.isArray(l) ? l[0] : l);
+  function r(a, l, t) {
+    a !== void 0 && a != null && (t[je[l] ?? l] = Array.isArray(a) ? a[0] : a);
   }
   e.assignBooleanProp = r;
 })(ce || (ce = {}));
-function Me(e) {
+function Ge(e) {
   let r;
   return Object.defineProperty({
     clear() {
@@ -3084,36 +3220,36 @@ function Me(e) {
 function Ie(e, r) {
   if (!e) return { score: 1, matches: [] };
   if (!r) return null;
-  const l = e.toLowerCase(), a = r.toLowerCase();
+  const a = e.toLowerCase(), l = r.toLowerCase();
   let t = 0, n = 0;
-  const s = [];
-  let u = -1, i = 0, m = 0;
-  for (; t < l.length && n < a.length; )
-    l[t] === a[n] ? (u === -1 && (u = n), t++, m++, i += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (i += 5), e[t - 1] === r[n] && (i += 1)) : (u !== -1 && (s.push([u, n]), u = -1), m = 0), n++;
-  return u !== -1 && s.push([u, n]), t < l.length ? null : (i = i / r.length, { score: i, matches: s });
+  const u = [];
+  let c = -1, s = 0, m = 0;
+  for (; t < a.length && n < l.length; )
+    a[t] === l[n] ? (c === -1 && (c = n), t++, m++, s += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (s += 5), e[t - 1] === r[n] && (s += 1)) : (c !== -1 && (u.push([c, n]), c = -1), m = 0), n++;
+  return c !== -1 && u.push([c, n]), t < a.length ? null : (s = s / r.length, { score: s, matches: u });
 }
 function Pe(e, r) {
   return Ie(e, r) !== null;
 }
-var re;
+var te;
 ((e) => {
-  function r(l, a = 300) {
+  function r(a, l = 300) {
     let t = !1, n;
-    return (...s) => {
+    return (...u) => {
       if (t) {
-        n = s;
+        n = u;
         return;
       }
-      l(...s), t = !0, setTimeout(() => {
-        t = !1, n && l(...n);
-      }, a);
+      a(...u), t = !0, setTimeout(() => {
+        t = !1, n && a(...n);
+      }, l);
     };
   }
   e.throttle = r;
-})(re || (re = {}));
-const De = re;
+})(te || (te = {}));
+const De = te;
 function Ue(e) {
-  return /* @__PURE__ */ z(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ S(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ S(
     "path",
     {
       fillRule: "evenodd",
@@ -3124,25 +3260,25 @@ function Ue(e) {
 }
 const _ = /* @__PURE__ */ new Map();
 function We() {
-  const [e] = ze.useTheme(), r = le(() => {
-    const l = "crono-box";
-    let a = document.getElementById(l);
-    return a || (a = document.createElement("div"), a.id = l, document.body.appendChild(a)), a;
+  const [e] = Se.useTheme(), r = le(() => {
+    const a = "crono-box";
+    let l = document.getElementById(a);
+    return l || (l = document.createElement("div"), l.id = a, document.body.appendChild(l)), l;
   }, []);
-  return ae(() => {
+  return U(() => {
     if (!e) return;
-    const l = _.get(e) ?? 0;
-    return _.set(e, l + 1), l === 0 && r.classList.add(e), () => {
+    const a = _.get(e) ?? 0;
+    return _.set(e, a + 1), a === 0 && r.classList.add(e), () => {
       const t = (_.get(e) ?? 1) - 1;
       t <= 0 ? (_.delete(e), r.classList.remove(e)) : _.set(e, t);
     };
   }, [r, e]), r;
 }
 function Ke(e) {
-  return /* @__PURE__ */ z(T, { ...e, children: /* @__PURE__ */ z("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+  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 qe(e) {
-  return /* @__PURE__ */ z(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ z(
+  return /* @__PURE__ */ S(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ S(
     "path",
     {
       strokeWidth: 4,
@@ -3151,84 +3287,84 @@ function qe(e) {
   ) });
 }
 function Xe(e) {
-  return /* @__PURE__ */ z(T, { 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" }) });
+  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 Ye(e) {
-  return /* @__PURE__ */ z(T, { 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" }) });
+  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" }) });
 }
-var te;
+var oe;
 ((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;
-})(te || (te = {}));
-const Ze = te;
-function Je(e) {
-  return /* @__PURE__ */ z(T, { 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" }) });
+})(oe || (oe = {}));
+const Ze = oe;
+function Qe(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" }) });
 }
-var oe;
+var ae;
 ((e) => {
-  function r(a) {
-    const t = Array.from(a.elements).reduce(
-      (n, s) => {
-        const u = s.name;
-        return u && (n[u] || (n[u] = []), n[u].push(s)), n;
+  function r(l) {
+    const t = Array.from(l.elements).reduce(
+      (n, u) => {
+        const c = u.name;
+        return c && (n[c] || (n[c] = []), n[c].push(u)), n;
       },
       {}
     );
-    return Object.entries(t).reduce((n, [s, u]) => {
-      if (u.length === 1) {
-        const i = u[0];
-        l(n, s, i.type === "checkbox" || i.type === "radio" ? i.checked : i.value);
+    return Object.entries(t).reduce((n, [u, c]) => {
+      if (c.length === 1) {
+        const s = c[0];
+        a(n, u, s.type === "checkbox" || s.type === "radio" ? s.checked : s.value);
       } else {
-        const i = u.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
-        l(n, s, i);
+        const s = c.reduce((m, f) => (f.type === "checkbox" || f.type === "radio" ? f.checked && m.push(f.value) : m.push(f.value), m), []);
+        a(n, u, s);
       }
       return n;
     }, {});
   }
   e.getFormEntries = r;
-  function l(a, t, n) {
+  function a(l, t, n) {
     if (t.includes(".")) {
-      const s = t.split(".");
-      let u = a;
-      s.forEach((i, m) => {
-        if (s.length > m + 1) {
-          const f = i.match(/^(.+)\[(\d)\]$/);
+      const u = t.split(".");
+      let c = l;
+      u.forEach((s, m) => {
+        if (u.length > m + 1) {
+          const f = s.match(/^(.+)\[(\d)\]$/);
           if (f) {
-            const [, y, k] = f;
-            u[y] = u[y] || [], u[y][k] = u[y][k] || {}, u = u[y][k];
+            const [, y, z] = f;
+            c[y] = c[y] || [], c[y][z] = c[y][z] || {}, c = c[y][z];
           } else
-            u[i] = u[i] || {}, u = u[i];
+            c[s] = c[s] || {}, c = c[s];
         } else
-          u[i] = n;
+          c[s] = n;
       });
     } else
-      a[t] = n;
+      l[t] = n;
   }
-})(oe || (oe = {}));
-const Qe = oe;
+})(ae || (ae = {}));
+const Je = ae;
 export {
   ce as B,
   qe as D,
   Ue as E,
   De as F,
   Xe as G,
-  S as O,
+  R as O,
   Ye as P,
   Ke as S,
-  ze as T,
-  d as V,
+  Se as T,
+  i as V,
   $e as a,
-  Ge as b,
+  Me as b,
   fe as c,
-  Je as d,
-  Qe as e,
+  Qe as d,
+  Je as e,
   Pe as f,
   Ze as g,
   We as h,
   ue as i,
-  Me as m,
+  Ge as m,
   He as u
 };