@cronocode/react-box 3.1.11 → 3.1.12

package/core.mjs

@@ -1,5 +1,5 @@
 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 { jsx as $ } from "react/jsx-runtime";
 import T from "./components/baseSvg.mjs";
 import Fe from "./box.mjs";
 function fe(...e) {
@@ -44,10 +44,10 @@ var a;
       }
     }
     r.widthHeight = n;
-    function s(x) {
+    function i(x) {
       return (C, R) => `var(--${x}${R});`;
     }
-    r.variables = s;
+    r.variables = i;
     function c(x) {
       return (C, R) => `var(--${x}${R});`;
     }
@@ -403,10 +403,10 @@ var Z;
     none: "none"
   }, ...e.colors, ...e.bgImages, ...e.shadows }, o = {}, t = {};
   let n = {};
-  function s(y) {
+  function i(y) {
     return y in o || (y in n ? (t[y] = n[y], o[y] = n[y]) : y in l ? (t[y] = l[y], o[y] = l[y]) : (t[y] = y, o[y] = y)), `var(--${y})`;
   }
-  e.getVariableValue = s;
+  e.getVariableValue = i;
   function c() {
     return Object.entries(o).map(([y, z]) => `--${y}: ${z};`).join("");
   }
@@ -425,7 +425,7 @@ var Z;
   }
   e.setUserVariables = f;
 })(Z || (Z = {}));
-const i = Z, L = {
+const s = 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,15 +580,15 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -598,15 +598,15 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -616,15 +616,15 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -634,15 +634,15 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -652,7 +652,7 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
@@ -859,7 +859,7 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
@@ -871,7 +871,7 @@ const i = Z, L = {
     },
     {
       styleName: "row-gap",
-      values: i.percentString
+      values: s.percentString
     }
   ],
   /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
@@ -883,7 +883,7 @@ const i = Z, L = {
     },
     {
       styleName: "column-gap",
-      values: i.percentString
+      values: s.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. */
@@ -905,14 +905,14 @@ const i = Z, L = {
       valueFormat: () => "100vh"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -930,7 +930,7 @@ const i = Z, L = {
     },
     {
       styleName: "min-height",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
@@ -939,7 +939,7 @@ const i = Z, L = {
     },
     {
       styleName: "min-height",
-      values: i.percentString
+      values: s.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. */
@@ -957,7 +957,7 @@ const i = Z, L = {
     },
     {
       styleName: "max-height",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
@@ -966,7 +966,7 @@ const i = Z, L = {
     },
     {
       styleName: "max-height",
-      values: i.percentString
+      values: s.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. */
@@ -981,14 +981,14 @@ const i = Z, L = {
       valueFormat: () => "100vw"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
       values: ["auto", "fit-content", "max-content", "min-content"]
     },
     {
-      values: i.percentString
+      values: s.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. */
@@ -1006,7 +1006,7 @@ const i = Z, L = {
     },
     {
       styleName: "min-width",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
@@ -1015,7 +1015,7 @@ const i = Z, L = {
     },
     {
       styleName: "min-width",
-      values: i.percentString
+      values: s.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. */
@@ -1033,7 +1033,7 @@ const i = Z, L = {
     },
     {
       styleName: "max-width",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
@@ -1042,7 +1042,7 @@ const i = Z, L = {
     },
     {
       styleName: "max-width",
-      values: i.percentString
+      values: s.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. */
@@ -1086,11 +1086,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin"
     }
   ],
@@ -1107,11 +1107,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin-inline",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-inline"
     }
   ],
@@ -1128,11 +1128,11 @@ const i = Z, L = {
     },
     {
       styleName: "margin-block",
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-block"
     }
   ],
@@ -1148,12 +1148,12 @@ const i = Z, L = {
       styleName: "margin-top"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "margin-top"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-top"
     }
   ],
@@ -1169,12 +1169,12 @@ const i = Z, L = {
       styleName: "margin-right"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "margin-right"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-right"
     }
   ],
@@ -1190,12 +1190,12 @@ const i = Z, L = {
       styleName: "margin-bottom"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "margin-bottom"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-bottom"
     }
   ],
@@ -1211,12 +1211,12 @@ const i = Z, L = {
       styleName: "margin-left"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "margin-left"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "margin-left"
     }
   ],
@@ -1228,12 +1228,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding"
     }
   ],
@@ -1245,12 +1245,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-inline"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-inline"
     }
   ],
@@ -1262,12 +1262,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-block"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-block"
     }
   ],
@@ -1279,12 +1279,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-top"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-top"
     }
   ],
@@ -1296,12 +1296,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-right"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-right"
     }
   ],
@@ -1313,12 +1313,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-bottom"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-bottom"
     }
   ],
@@ -1330,12 +1330,12 @@ const i = Z, L = {
       valueFormat: a.Value.rem
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: a.Value.fraction,
       styleName: "padding-left"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       styleName: "padding-left"
     }
   ],
@@ -1588,14 +1588,14 @@ const i = Z, 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: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-color CSS property sets the background color of an element. */
   bgColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-color"
     }
@@ -1603,7 +1603,7 @@ const i = Z, L = {
   /** The border-color shorthand CSS property sets the color of an element's border. */
   borderColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "border-color"
     }
@@ -1611,7 +1611,7 @@ const i = Z, L = {
   /** The outline-color CSS property sets the color of an element's outline. */
   outlineColor: [
     {
-      values: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e),
       styleName: "outline-color"
     }
@@ -1619,21 +1619,21 @@ const i = Z, 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: i.colorValues,
+      values: s.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: i.colorValues,
+      values: s.colorValues,
       valueFormat: (e, r) => r(e)
     }
   ],
   /** The background-image CSS property sets one or more background images on an element. */
   bgImage: [
     {
-      values: i.bgImageValues,
+      values: s.bgImageValues,
       valueFormat: (e, r) => r(e),
       styleName: "background-image"
     }
@@ -1641,7 +1641,7 @@ const i = Z, L = {
   /** The box-shadow CSS property adds shadow effects around an element's frame */
   shadow: [
     {
-      values: i.shadowValues,
+      values: s.shadowValues,
       valueFormat: (e, r) => r(e),
       styleName: "box-shadow"
     }
@@ -1654,17 +1654,17 @@ const i = Z, L = {
       styleName: "transform"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: (e) => `translateX(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       valueFormat: (e) => `translateX(${e})`,
       styleName: "transform"
     }
@@ -1677,17 +1677,17 @@ const i = Z, L = {
       styleName: "transform"
     },
     {
-      values: i.percentages,
+      values: s.percentages,
       valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.negativePercentages,
+      values: s.negativePercentages,
       valueFormat: (e) => `translateY(${a.Value.fraction(e)})`,
       styleName: "transform"
     },
     {
-      values: i.percentString,
+      values: s.percentString,
       valueFormat: (e) => `translateY(${e})`,
       styleName: "transform"
     }
@@ -1719,7 +1719,8 @@ const i = Z, L = {
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])",
   before: "::before",
-  after: "::after"
+  after: "::after",
+  placeholderStyles: "::placeholder"
 }, W = {
   indeterminate: ":indeterminate",
   checked: ":checked",
@@ -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 */
@@ -1761,9 +1762,9 @@ const i = Z, L = {
 };
 var Q;
 ((e) => {
-  function r(n, s, c) {
+  function r(n, i, c) {
     const u = { ...n }, m = u.props || {};
-    return s.forEach((f) => {
+    return i.forEach((f) => {
       f in u && (m[f] = u[f], delete u[f]);
     }), c && Object.entries(c).forEach(([f, y]) => {
       m[f] = y;
@@ -1775,18 +1776,18 @@ var Q;
   }
   e.isObject = l;
   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);
-    }), s), {});
+    return n.reduce((i, c) => (Object.keys(c ?? {}).forEach((u) => {
+      const m = i[u], f = c[u];
+      l(f) && "clean" in f && f.clean ? i[u] = f : u in W && typeof f == "boolean" || (u in W && Array.isArray(f) ? i[u] = o(m, f[1] ?? {}) : Array.isArray(m) && Array.isArray(f) ? i[u] = m.concat(...f) : l(m) && l(f) ? i[u] = o(m, f) : i[u] = f);
+    }), i), {});
   }
   e.mergeDeep = o;
-  function t(n, s) {
-    return n in s;
+  function t(n, i) {
+    return n in i;
   }
   e.isKeyOf = t;
 })(Q || (Q = {}));
-const k = Q, se = {
+const k = Q, ie = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -2909,52 +2910,52 @@ const k = Q, se = {
     }
   }
 };
-function $e(e) {
+function Se(e) {
   const r = { ...e };
   for (const [l, 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);
+    const { extends: n, ...i } = o;
+    r[l] = k.mergeDeep({}, t, i);
   }
   return r;
 }
 var J;
 ((e) => {
   function r(o, t, n) {
-    return i.setUserVariables(o), Object.entries(t).forEach(([s, c]) => {
-      L[s] = c;
-    }), Object.entries(n).forEach(([s, c]) => {
-      const u = L[s];
-      L[s] = u ? [...c, ...u] : c;
+    return s.setUserVariables(o), Object.entries(t).forEach(([i, c]) => {
+      L[i] = c;
+    }), Object.entries(n).forEach(([i, c]) => {
+      const u = L[i];
+      L[i] = u ? [...c, ...u] : c;
     }), { extendedProps: t, extendedPropTypes: n };
   }
-  e.extend = r, e.componentsStyles = se;
+  e.extend = r, e.componentsStyles = ie;
   function l(o) {
-    return e.componentsStyles = $e(k.mergeDeep(se, o)), o;
+    return e.componentsStyles = Se(k.mergeDeep(ie, o)), o;
   }
   e.components = l;
 })(J || (J = {}));
-const Se = J, ee = we.createContext({ theme: "", setTheme: () => {
+const $e = J, ee = we.createContext({ theme: "", setTheme: () => {
 } });
 function re(e) {
   const { children: r, theme: l, use: o = "local" } = e, [t, n] = de(l ?? "light");
   return U(() => {
     if (l !== void 0) return;
-    const s = window.matchMedia("(prefers-color-scheme: dark)");
-    n(s.matches ? "dark" : "light");
+    const i = window.matchMedia("(prefers-color-scheme: dark)");
+    n(i.matches ? "dark" : "light");
     const c = (u) => {
       n(u.matches ? "dark" : "light");
     };
-    return s.addEventListener("change", c), () => s.removeEventListener("change", c);
+    return i.addEventListener("change", c), () => i.removeEventListener("change", c);
   }, [l]), U(() => {
     if (o === "local") return;
-    const s = document.documentElement;
-    return s.classList.add(t), () => {
-      s.classList.remove(t);
+    const i = document.documentElement;
+    return i.classList.add(t), () => {
+      i.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__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: /* @__PURE__ */ $(Fe, { className: t, children: r }) }) : /* @__PURE__ */ $(ee.Provider, { value: { theme: t, setTheme: n }, children: r });
 }
 ((e) => {
   function r() {
@@ -2975,8 +2976,8 @@ class ke {
     const { first: l, next: o } = Re, t = r - l.length;
     if (t < 0)
       return l[r];
-    const n = Math.floor(t / o.length), s = t - n * o.length;
-    return this.getByIndex(n) + o[s];
+    const n = Math.floor(t / o.length), i = t - n * o.length;
+    return this.getByIndex(n) + o[i];
   }
 }
 const Re = {
@@ -2989,12 +2990,12 @@ function Ae(e) {
     if (r) return;
     const t = l?.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);
-    if (s.length === 0) return n.styles;
-    const c = k.mergeDeep(...s.map((u) => n.variants?.[u]));
+    const i = fe(o);
+    if (i.length === 0) return n.styles;
+    const c = k.mergeDeep(...i.map((u) => n.variants?.[u]));
     return n.styles ? k.mergeDeep(n.styles, c) : c;
   }, [r, l, o]);
 }
@@ -3009,7 +3010,7 @@ var B;
 ((e) => {
   let r = !0, l = !1;
   const o = /* @__PURE__ */ new Set(), t = [], n = [];
-  let s = 0;
+  let i = 0;
   const c = Object.keys(L).reduce((b, h, w) => (b[h] = w, b), {});
   let u = {};
   function m(b, h, w, p, g) {
@@ -3027,35 +3028,35 @@ 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]];
+        }) : k.isKeyOf(v, se) && Object.entries(d).forEach(([N, F]) => {
+          const S = [...w, se[v]];
           Object.entries(F).forEach(([V, O]) => {
             k.isKeyOf(V, D) ? Object.entries(O).forEach(([M, E]) => {
               m(
                 E,
                 h,
-                [...$, D[V]],
+                [...S, D[V]],
                 p,
                 // Use | as separator to distinguish theme from group name
                 `${N}|${M}`
               );
-            }) : m({ [V]: O }, h, $, p, N);
+            }) : m({ [V]: O }, h, S, p, N);
           });
         });
     });
   }
   e.addClassNames = m;
   function f() {
-    const b = i.hasPendingVariables();
+    const b = s.hasPendingVariables();
     if (!r && !b) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
     const h = q(), w = h.sheet;
     if (l) {
-      if (i.hasPendingVariables()) {
-        const p = i.getPendingVariables(), g = `:root{${Object.entries(p).map(([v, d]) => `--${v}: ${d};`).join("")}}`;
+      if (s.hasPendingVariables()) {
+        const p = s.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), i++;
           } catch {
           }
         else
@@ -3064,7 +3065,7 @@ var B;
       }
     } else {
       const p = [
-        `:root{${i.generateVariables()}}`,
+        `:root{${s.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;}",
@@ -3080,7 +3081,7 @@ var B;
       if (w && !H)
         for (const g of p)
           try {
-            w.insertRule(g, s), s++;
+            w.insertRule(g, i), i++;
           } catch {
           }
       else
@@ -3099,7 +3100,7 @@ var B;
               break;
             }
           try {
-            w.insertRule(v, s + N), n.splice(N, 0, d);
+            w.insertRule(v, i + N), n.splice(N, 0, d);
           } catch {
             w.insertRule(v, w.cssRules.length), n.push(d);
           }
@@ -3114,7 +3115,7 @@ var B;
   function y(b, h, w, p, g) {
     const d = L[b].find((V) => Array.isArray(V.values) ? V.values.includes(h) : typeof h == typeof V.values);
     if (!d) return null;
-    const N = c[b] ?? 0, F = P[p] ?? 0, $ = C(
+    const N = c[b] ?? 0, F = P[p] ?? 0, S = C(
       b,
       h,
       w,
@@ -3126,26 +3127,26 @@ var B;
       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(";")}}`;
+        A = `.${j} .${Ce}${E} .${S}`;
+      } else O ? A = `.${g} .${S}${E}` : A = `.${g}${E} .${S}`;
+      const he = d.selector?.(A, "") ?? A, ve = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], pe = d.valueFormat?.(h, s.getVariableValue) ?? h, ne = `${he}{${ve.map((j) => `${j}:${pe}`).join(";")}}`;
       return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${ne}}`, sortIndex: N, breakpointOrder: F } : { rule: ne, sortIndex: N, breakpointOrder: F };
     } 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(";")}}`;
+      const V = X[w].map((A) => K[A]).join(""), O = d.selector?.(`.${S}`, V) ?? `.${S}${V}`, M = Array.isArray(d.styleName) ? d.styleName : [d.styleName ?? b], E = d.valueFormat?.(h, s.getVariableValue) ?? h, G = `${O}{${M.map((A) => `${A}:${E}`).join(";")}}`;
       return p !== "normal" ? { rule: `@media(min-width: ${P[p]}px){${G}}`, sortIndex: N, breakpointOrder: F } : { rule: G, sortIndex: N, breakpointOrder: F };
     }
   }
   function z() {
-    u = {}, o.clear(), t.length = 0, n.length = 0, s = 0, l = !1;
+    u = {}, o.clear(), t.length = 0, n.length = 0, i = 0, l = !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((S, V) => S + ye[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);
-      $ && (t.push([$.sortIndex, $.breakpointOrder, $.rule]), r = !0), u[g] ? u[g][d] ? u[g][d][b] || (u[g][d][b] = /* @__PURE__ */ new Set()) : u[g][d] = { [b]: /* @__PURE__ */ new Set() } : u[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (u[g][d].__parents ? u[g][d].__parents[v] ? u[g][d].__parents[v][b] || (u[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : u[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : u[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, u[g][d].__parents[v][b].add(h)) : u[g][d][b].add(h);
+      const S = y(b, h, d, g, v);
+      S && (t.push([S.sortIndex, S.breakpointOrder, S.rule]), r = !0), u[g] ? u[g][d] ? u[g][d][b] || (u[g][d][b] = /* @__PURE__ */ new Set()) : u[g][d] = { [b]: /* @__PURE__ */ new Set() } : u[g] = { [d]: { [b]: /* @__PURE__ */ new Set() } }, v ? (u[g][d].__parents ? u[g][d].__parents[v] ? u[g][d].__parents[v][b] || (u[g][d].__parents[v][b] = /* @__PURE__ */ new Set()) : u[g][d].__parents[v] = { [b]: /* @__PURE__ */ new Set() } : u[g][d].__parents = { [v]: { [b]: /* @__PURE__ */ new Set() } }, u[g][d].__parents[v][b].add(h)) : u[g][d][b].add(h);
     }
     w.push(N);
   }
@@ -3178,8 +3179,8 @@ Array.prototype.sumBy || (Array.prototype.sumBy = function(e, r = 0) {
 });
 Array.prototype.sortBy || (Array.prototype.sortBy = function(e, r) {
   return [...this].sort((o, t) => {
-    const n = e(o), s = e(t);
-    return n < s ? r === "DESC" ? 1 : -1 : n > s ? r === "DESC" ? -1 : 1 : 0;
+    const n = e(o), i = e(t);
+    return n < i ? r === "DESC" ? 1 : -1 : n > i ? r === "DESC" ? -1 : 1 : 0;
   });
 });
 Array.prototype.maxBy || (Array.prototype.maxBy = function(e) {
@@ -3203,13 +3204,13 @@ 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 s = e(t, n);
-    return r && typeof s != "number" && !s || (o.has(s) === !1 && o.set(s, []), o.get(s)?.push(t)), o;
+    const i = e(t, n);
+    return r && typeof i != "number" && !i || (o.has(i) === !1 && o.set(i, []), o.get(i)?.push(t)), o;
   }, /* @__PURE__ */ new Map());
   return Array.from(l, ([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);
+  const { node: r = null, event: l = "click", hideOnScroll: o = !1, hideOnResize: t = !1, hideOnEscape: n = !0 } = e ?? {}, [i, c] = de(!1), u = Ne(null);
   return ge(() => {
     function m(C) {
       (r ?? u.current)?.contains(C.target) === !1 && c(!1);
@@ -3224,10 +3225,10 @@ 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 i && (window.addEventListener(l, m, x), n && window.addEventListener("keydown", z, x), t && window.addEventListener("resize", f, x), o && window.addEventListener("scroll", y, { signal: x.signal, capture: !0 })), () => {
       x.abort();
     };
-  }, [r, s]), [s, c, u];
+  }, [r, i]), [i, c, u];
 }
 const Ie = {
   selected: "aria-selected"
@@ -3254,17 +3255,17 @@ function Le(e, r) {
   if (!r) return null;
   const l = e.toLowerCase(), o = r.toLowerCase();
   let t = 0, n = 0;
-  const s = [];
+  const i = [];
   let c = -1, u = 0, m = 0;
   for (; t < l.length && n < o.length; )
-    l[t] === o[n] ? (c === -1 && (c = n), t++, m++, u += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (u += 5), e[t - 1] === r[n] && (u += 1)) : (c !== -1 && (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 });
+    l[t] === o[n] ? (c === -1 && (c = n), t++, m++, u += m, (n === 0 || /\s|_|-/.test(r[n - 1])) && (u += 5), e[t - 1] === r[n] && (u += 1)) : (c !== -1 && (i.push([c, n]), c = -1), m = 0), n++;
+  return c !== -1 && i.push([c, n]), t < l.length ? null : (u = u / r.length, { score: u, matches: i });
 }
 function Pe(e, r) {
   return Le(e, r) !== null;
 }
 function Ue(e) {
-  return /* @__PURE__ */ S(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ S(
+  return /* @__PURE__ */ $(T, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ $(
     "path",
     {
       fillRule: "evenodd",
@@ -3277,12 +3278,12 @@ var te;
 ((e) => {
   function r(l, o = 300) {
     let t = !1, n;
-    return (...s) => {
+    return (...i) => {
       if (t) {
-        n = s;
+        n = i;
         return;
       }
-      l(...s), t = !0, setTimeout(() => {
+      l(...i), t = !0, setTimeout(() => {
         t = !1, n && l(...n);
       }, o);
     };
@@ -3306,10 +3307,10 @@ function Ke() {
   }, [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" }) });
+  return /* @__PURE__ */ $(T, { ...e, children: /* @__PURE__ */ $("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(
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ $(
     "path",
     {
       strokeWidth: 4,
@@ -3318,10 +3319,10 @@ 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" }) });
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ $("path", { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" }) });
 }
 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" }) });
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ $("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
 }
 var oe;
 ((e) => {
@@ -3332,25 +3333,25 @@ var oe;
 })(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" }) });
+  return /* @__PURE__ */ $(T, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ $("path", { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" }) });
 }
 var ae;
 ((e) => {
   function r(o) {
     const t = Array.from(o.elements).reduce(
-      (n, s) => {
-        const c = s.name;
-        return c && (n[c] || (n[c] = []), n[c].push(s)), n;
+      (n, i) => {
+        const c = i.name;
+        return c && (n[c] || (n[c] = []), n[c].push(i)), n;
       },
       {}
     );
-    return Object.entries(t).reduce((n, [s, c]) => {
+    return Object.entries(t).reduce((n, [i, c]) => {
       if (c.length === 1) {
         const u = c[0];
-        l(n, s, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
+        l(n, i, 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);
+        l(n, i, u);
       }
       return n;
     }, {});
@@ -3358,10 +3359,10 @@ var ae;
   e.getFormEntries = r;
   function l(o, t, n) {
     if (t.includes(".")) {
-      const s = t.split(".");
+      const i = t.split(".");
       let c = o;
-      s.forEach((u, m) => {
-        if (s.length > m + 1) {
+      i.forEach((u, m) => {
+        if (i.length > m + 1) {
           const f = u.match(/^(.+)\[(\d)\]$/);
           if (f) {
             const [, y, z] = f;
@@ -3386,8 +3387,8 @@ export {
   Ze as P,
   qe as S,
   ze as T,
-  i as V,
-  Se as a,
+  s as V,
+  $e as a,
   Ge as b,
   fe as c,
   Je as d,