@cronocode/react-box 1.8.8 → 1.8.9

package/core.mjs

@@ -1,72 +1,72 @@
-import { useMemo as Y, useLayoutEffect as se, useEffect as ae } from "react";
-import { O as J } from "./utils.mjs";
+import { useMemo as X, useLayoutEffect as se, useEffect as ae } from "react";
+import { O as Y } from "./utils.mjs";
 var e;
-((s) => {
-  ((l) => {
-    function r(t, c) {
-      return `${t}${c.replace("/", "-")}`;
+((a) => {
+  ((u) => {
+    function t(o, m) {
+      return `${o}${m.replace("/", "-")}`;
     }
-    l.fraction = r;
-    function n(t) {
-      return [`${t} path`, `${t} circle`, `${t} rect`, `${t} line`];
+    u.fraction = t;
+    function n(o) {
+      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
     }
-    l.svg = n;
-  })(s.ClassName || (s.ClassName = {})), ((l) => {
-    function r(o, a) {
-      return `${a / 4}rem`;
+    u.svg = n;
+  })(a.ClassName || (a.ClassName = {})), ((u) => {
+    function t(l, s) {
+      return `${s / 4}rem`;
     }
-    l.rem = r;
-    function n(o, a) {
-      return `${a}px`;
+    u.rem = t;
+    function n(l, s) {
+      return `${s}px`;
     }
-    l.px = n;
-    function t(o, a) {
-      const [u, v] = a.split("/");
-      return `${+u / +v * 100}%`;
+    u.px = n;
+    function o(l, s) {
+      const [r, i] = s.split("/");
+      return `${+r / +i * 100}%`;
     }
-    l.fraction = t;
-    function c(o, a) {
-      switch (a) {
+    u.fraction = o;
+    function m(l, s) {
+      switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return a;
+          return s;
       }
     }
-    l.widthHeight = c;
-    function w(o) {
-      return (a, u) => `var(--${o}${u});`;
+    u.widthHeight = m;
+    function N(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
-    l.variables = w;
-    function E(o) {
-      return (a, u) => `var(--${o}${u});`;
+    u.variables = N;
+    function T(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
-    l.svgVariables = E;
-    function C(o, a) {
-      return `repeat(${a},minmax(0,1fr))`;
+    u.svgVariables = T;
+    function S(l, s) {
+      return `repeat(${s},minmax(0,1fr))`;
     }
-    l.gridColumns = C;
-    function f(o, a) {
-      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
+    u.gridColumns = S;
+    function c(l, s) {
+      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
-    l.gridColumn = f;
-    function b(o, a) {
-      return `${a}ms`;
+    u.gridColumn = c;
+    function f(l, s) {
+      return `${s}ms`;
     }
-    l.ms = b;
-    function g(o, a) {
-      return `${a}deg`;
+    u.ms = f;
+    function b(l, s) {
+      return `${s}deg`;
     }
-    l.rotate = g;
-    function h(o, a) {
-      return a === "xAxis" ? "-1 1" : "1 -1";
+    u.rotate = b;
+    function d(l, s) {
+      return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    l.flip = h;
-  })(s.Value || (s.Value = {}));
+    u.flip = d;
+  })(a.Value || (a.Value = {}));
 })(e || (e = {}));
-const i = [
+const v = [
   0,
   1,
   2,
@@ -171,7 +171,7 @@ const i = [
   -92,
   -96,
   -100
-], d = [...i, ...le], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], G = ["auto", "hidden", "scroll", "visible"], S = [
+], h = [...v, ...le], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], G = ["auto", "hidden", "scroll", "visible"], E = [
   "1/2",
   "1/3",
   "2/3",
@@ -198,7 +198,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], W = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], V = {
+], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], ue = {
   /** The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
   display: {
     cssNames: ["display"],
@@ -223,9 +223,9 @@ const i = [
   width: {
     cssNames: ["width"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -233,9 +233,9 @@ const i = [
   minWidth: {
     cssNames: ["min-width"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -243,9 +243,9 @@ const i = [
   maxWidth: {
     cssNames: ["max-width"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -253,9 +253,9 @@ const i = [
   height: {
     cssNames: ["height"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -263,9 +263,9 @@ const i = [
   minHeight: {
     cssNames: ["min-height"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -273,9 +273,9 @@ const i = [
   maxHeight: {
     cssNames: ["max-height"],
     values1: { values: z, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
+      values: E,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -288,157 +288,157 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   b: {
     cssNames: ["border-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -450,55 +450,55 @@ const i = [
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -581,7 +581,7 @@ const i = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -599,13 +599,13 @@ const i = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -694,79 +694,79 @@ const i = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: W },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: W },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: i, formatValue: e.Value.gridColumns },
+    values1: { values: v, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: i, formatValue: e.Value.gridColumn },
+    values1: { values: v, formatValue: e.Value.gridColumn },
     values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -778,7 +778,7 @@ const i = [
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -839,7 +839,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, M = {
+}, W = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
   backgroundImage: { cssNames: ["background-image"], formatValue: e.Value.variables("backgroundImage") },
@@ -869,148 +869,148 @@ const i = [
   "Required",
   "Optional",
   "Disabled"
-], H = ["sm", "md", "lg", "xl", "xxl"], ue = {
+], A = ["sm", "md", "lg", "xl", "xxl"], te = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   xxl: 1536
 };
-Object.keys(M).forEach((s) => {
-  V[s] = M[s], V[s].isThemeStyle = !0;
-});
-Object.keys(K).forEach((s) => {
-  V[s] = K[s], V[s].isThemeStyle = !0;
-});
-let L = Object.keys(V);
-P.forEach((s) => {
-  L.forEach((l) => {
-    V[`${l}${s}`] = { ...V[l], pseudoSuffix: s };
+function J() {
+  const a = { ...ue };
+  Object.keys(W).forEach((t) => {
+    a[t] = W[t], a[t].isThemeStyle = !0;
+  }), Object.keys(K).forEach((t) => {
+    a[t] = K[t], a[t].isThemeStyle = !0;
   });
-});
-L = Object.keys(V);
-H.forEach((s) => {
-  L.forEach((l) => {
-    V[`${s}${l}`] = { ...V[l], breakpoint: s };
-  });
-});
-function te(s, l, r) {
-  const n = Object.entries(V).filter(
-    ([t, c]) => c.pseudoSuffix === s && !c.customPseudoSuffix && !(`${t}${l}` in V)
-  ).map(([t]) => t);
-  return n.forEach((t) => {
-    V[`${t}${l}`] = {
-      ...V[t],
-      customPseudoSuffix: r + l
+  let u = Object.keys(a);
+  return P.forEach((t) => {
+    u.forEach((n) => {
+      a[`${n}${t}`] = { ...a[n], pseudoSuffix: t };
+    });
+  }), u = Object.keys(a), A.forEach((t) => {
+    u.forEach((n) => {
+      a[`${t}${n}`] = { ...a[n], breakpoint: t };
+    });
+  }), a;
+}
+let C = J();
+function oe() {
+  C = J();
+}
+function re(a, u, t) {
+  const n = Object.entries(C).filter(
+    ([o, m]) => m.pseudoSuffix === a && !m.customPseudoSuffix && !(`${o}${u}` in C)
+  ).map(([o]) => o);
+  return n.forEach((o) => {
+    C[`${o}${u}`] = {
+      ...C[o],
+      customPseudoSuffix: t + u
     };
-  }), n.map((t) => `${t}${l}`);
+  }), n.map((o) => `${o}${u}`);
 }
-class oe {
+class ne {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(l) {
-    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
+  getIdentity(u) {
+    return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
   }
-  getByIndex(l) {
-    const { first: r, next: n } = re, t = l - r.length;
-    if (t < 0)
-      return r[l];
-    const c = Math.floor(t / n.length), w = t - c * n.length;
-    return this.getByIndex(c) + n[w];
+  getByIndex(u) {
+    const { first: t, next: n } = ve, o = u - t.length;
+    if (o < 0)
+      return t[u];
+    const m = Math.floor(o / n.length), N = o - m * n.length;
+    return this.getByIndex(m) + n[N];
   }
 }
-const re = {
+const ve = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
 var D;
-((s) => {
-  s.boxClassName = "_box", s.svgClassName = "_svg", s.cronoStylesElementId = "crono-styles";
-  const l = `: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;}}
+((a) => {
+  a.boxClassName = "_box", a.svgClassName = "_svg", a.cronoStylesElementId = "crono-styles";
+  const u = `: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;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${s.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${s.svgClassName}{transition: all var(--svgTransitionTime);}.${s.svgClassName} path,.${s.svgClassName} circle,.${s.svgClassName} rect,.${s.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, r = new oe(), n = Object.keys(V);
-  let t = !0, c = n.reduce(
-    (a, u) => (a[u] = /* @__PURE__ */ new Set(), a),
-    {}
-  );
-  function w(a, u, v) {
-    if (a in V)
-      return b(a, u, v);
-    if (["disabledGroup", "hoverGroup", "focusGroup", "activeGroup"].includes(a))
-      return a + u;
+.${a.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
+.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, t = new ne();
+  let n = !0, o = {};
+  T();
+  function m(l, s, r) {
+    if (l in C)
+      return c(l, s, r);
+    if (["disabledGroup", "hoverGroup", "focusGroup", "activeGroup"].includes(l))
+      return l + s;
   }
-  s.get = w;
-  function E() {
-    if (t) {
-      let a = g([l]);
-      P.forEach((v) => {
-        a = g(a, v);
-      }), H.forEach((v) => {
-        a.push(`@media(min-width: ${ue[v]}px){`), a = g(a, void 0, v), P.forEach((p) => {
-          a = g(a, p, v);
-        }), a.push("}");
+  a.get = m;
+  function N() {
+    if (n) {
+      let l = f([u]);
+      P.forEach((r) => {
+        l = f(l, r);
+      }), A.forEach((r) => {
+        l.push(`@media(min-width: ${te[r]}px){`), l = f(l, void 0, r), P.forEach((i) => {
+          l = f(l, i, r);
+        }), l.push("}");
       });
-      const u = o();
-      u.innerHTML = a.join(""), t = !1;
+      const s = d();
+      s.innerHTML = l.join(""), n = !1;
     }
   }
-  s.flush = E;
-  function C() {
-    c = n.reduce(
-      (u, v) => (u[v] = /* @__PURE__ */ new Set(), u),
+  a.flush = N;
+  function T() {
+    oe(), o = Object.keys(C).reduce(
+      (s, r) => (s[r] = /* @__PURE__ */ new Set(), s),
       {}
     );
-    const a = o();
-    a.innerHTML = "";
   }
-  s.clear = C;
-  function f(a, u, v) {
-    te(a, u, v).forEach((y) => {
-      c[y] = /* @__PURE__ */ new Set();
+  a.clear = T;
+  function S(l, s, r) {
+    re(l, s, r).forEach((p) => {
+      o[p] = /* @__PURE__ */ new Set();
     });
   }
-  s.addCustomPseudoClass = f;
-  function b(a, u, v) {
-    const p = (v ?? "") + a;
-    c[p].has(u) || (t = !0, c[p].add(u));
-    const y = `${p}${u}`;
-    return process.env.NODE_ENV === "test" ? y : r.getIdentity(y);
+  a.addCustomPseudoClass = S;
+  function c(l, s, r) {
+    const i = (r ?? "") + l;
+    o[i].has(s) || (n = !0, o[i].add(s));
+    const p = `${i}${s}`;
+    return process.env.NODE_ENV === "test" ? p : t.getIdentity(p);
   }
-  function g(a, u, v) {
-    return Object.entries(c).filter(
-      ([y, x]) => {
-        var T, j;
-        return ((T = V[y]) == null ? void 0 : T.pseudoSuffix) === u && ((j = V[y]) == null ? void 0 : j.breakpoint) === v && x.size > 0;
+  function f(l, s, r) {
+    return Object.entries(o).filter(
+      ([p, k]) => {
+        var w, $;
+        return ((w = C[p]) == null ? void 0 : w.pseudoSuffix) === s && (($ = C[p]) == null ? void 0 : $.breakpoint) === r && k.size > 0;
       }
-    ).reduce((y, [x, T]) => (T.forEach((j) => {
+    ).reduce((p, [k, w]) => (w.forEach(($) => {
       var q;
-      const N = V[x], $ = h(N, j), k = `.${b(x, j)}`;
-      let m = [];
-      u ? u === "Hover" ? m = p(k, N, $, "hover") : u === "Focus" ? m = p(k, N, $, "focus-within") : u === "Active" ? m = p(k, N, $, "active") : u === "Checked" ? m = p(k, N, $, "checked") : u === "Indeterminate" ? m = p(k, N, $, "indeterminate") : u === "Valid" ? m = p(k, N, $, "valid") : u === "Invalid" ? m = p(k, N, $, "invalid") : u === "Required" ? m = p(k, N, $, "required") : u === "Optional" ? m = p(k, N, $, "optional") : u === "Disabled" && (m = p(k, N, $, "disabled")) : m = p(k, N, $);
-      const O = ((q = $.formatValue) == null ? void 0 : q.call($, x, j)) ?? j, Z = V[x].cssNames.map((ee) => `${ee}:${O};`).join("");
-      y.push(`${m.join(",")}{${Z}}`);
-    }), y), a);
-    function p(y, x, T, j) {
-      let N = y;
-      return j && (N = x.customPseudoSuffix ? `.${x.customPseudoSuffix}:${j} ${y}` : `${y}:${j}`), T.formatSelector ? T.formatSelector(N) : [N];
+      const g = C[k], y = b(g, $), j = `.${c(k, $)}`;
+      let x = [];
+      s ? s === "Hover" ? x = i(j, g, y, "hover") : s === "Focus" ? x = i(j, g, y, "focus-within") : s === "Active" ? x = i(j, g, y, "active") : s === "Checked" ? x = i(j, g, y, "checked") : s === "Indeterminate" ? x = i(j, g, y, "indeterminate") : s === "Valid" ? x = i(j, g, y, "valid") : s === "Invalid" ? x = i(j, g, y, "invalid") : s === "Required" ? x = i(j, g, y, "required") : s === "Optional" ? x = i(j, g, y, "optional") : s === "Disabled" && (x = i(j, g, y, "disabled")) : x = i(j, g, y);
+      const V = ((q = y.formatValue) == null ? void 0 : q.call(y, k, $)) ?? $, Z = C[k].cssNames.map((ee) => `${ee}:${V};`).join("");
+      p.push(`${x.join(",")}{${Z}}`);
+    }), p), l);
+    function i(p, k, w, $) {
+      let g = p;
+      return $ && (g = k.customPseudoSuffix ? `.${k.customPseudoSuffix}:${$} ${p}` : `${p}:${$}`), w.formatSelector ? w.formatSelector(g) : [g];
     }
   }
-  function h(a, u) {
-    return a.isThemeStyle ? a : a.values1.values.includes(u) ? a.values1 : a.values2.values.includes(u) ? a.values2 : a.values3;
+  function b(l, s) {
+    return l.isThemeStyle ? l : l.values1.values.includes(s) ? l.values1 : l.values2.values.includes(s) ? l.values2 : l.values3;
   }
-  function o() {
-    const u = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let v = u.getElementById(s.cronoStylesElementId);
-    return v || (v = u.createElement("style"), v.setAttribute("id", s.cronoStylesElementId), v.setAttribute("type", "text/css"), u.head.insertBefore(v, u.head.firstChild)), v;
+  function d() {
+    const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let r = s.getElementById(a.cronoStylesElementId);
+    return r || (r = s.createElement("style"), r.setAttribute("id", a.cronoStylesElementId), r.setAttribute("type", "text/css"), s.head.insertBefore(r, s.head.firstChild)), r;
   }
-  s.getElement = o;
+  a.getElement = d;
 })(D || (D = {}));
-const I = D, A = {
+const I = D, H = {
   button: {
     styles: {
       display: "inline-block",
@@ -1051,7 +1051,7 @@ const I = D, A = {
       borderRadius: 1
     }
   }
-}, ne = {
+}, ie = {
   Hover: "hover",
   Focus: "focus",
   Active: "active",
@@ -1064,28 +1064,28 @@ const I = D, A = {
   Disabled: "disabled"
 };
 var _;
-((s) => {
-  s.Styles = {};
-  function l(f) {
-    s.Styles = t(A), s.Styles = n(f);
+((a) => {
+  a.Styles = {};
+  function u(c) {
+    a.Styles = o(H), a.Styles = n(c);
   }
-  s.setup = l;
-  function r(f, b) {
-    const { colors: g = {}, shadows: h = {}, backgrounds: o = {}, backgroundImages: a = {} } = f;
-    g.none = "none", h.none = "none", o.none = "none", a.none = "none";
-    const u = Object.entries(g).map(([m, O]) => `--color${m}: ${O};`).join(`
-  `), v = Object.entries(h).map(([m, O]) => `--shadow${m}: ${O};`).join(`
-  `), p = Object.entries(o).map(([m, O]) => `--background${m}: ${O};`).join(`
-  `), y = Object.entries(a).map(([m, O]) => `--backgroundImage${m}: ${O};`).join(`
-  `), x = [":root {"];
-    u && x.push(`  ${u}`), v && x.push(`  ${v}`), p && x.push(`  ${p}`), y && x.push(`  ${y}`), x.push("}");
-    const T = Object.keys(g).map((m) => `'${m}'`).join(" | "), j = Object.keys(o).map((m) => `'${m}'`).join(" | "), N = Object.keys(a).map((m) => `'${m}'`).join(" | "), $ = Object.keys(h).map((m) => `'${m}'`).join(" | "), k = `import '@cronocode/react-box';
+  a.setup = u;
+  function t(c, f) {
+    const { colors: b = {}, shadows: d = {}, backgrounds: l = {}, backgroundImages: s = {} } = c;
+    b.none = "none", d.none = "none", l.none = "none", s.none = "none";
+    const r = Object.entries(b).map(([V, O]) => `--color${V}: ${O};`).join(`
+  `), i = Object.entries(d).map(([V, O]) => `--shadow${V}: ${O};`).join(`
+  `), p = Object.entries(l).map(([V, O]) => `--background${V}: ${O};`).join(`
+  `), k = Object.entries(s).map(([V, O]) => `--backgroundImage${V}: ${O};`).join(`
+  `), w = [":root {"];
+    r && w.push(`  ${r}`), i && w.push(`  ${i}`), p && w.push(`  ${p}`), k && w.push(`  ${k}`), w.push("}");
+    const $ = Object.keys(b).map((V) => `'${V}'`).join(" | "), g = Object.keys(l).map((V) => `'${V}'`).join(" | "), y = Object.keys(s).map((V) => `'${V}'`).join(" | "), j = Object.keys(d).map((V) => `'${V}'`).join(" | "), x = `import '@cronocode/react-box';
   
-  declare module '${(b == null ? void 0 : b.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${T};
-    type BackgroundType = ${j};
-    type BackgroundImageType = ${N};
-    type ShadowType = ${$};
+  declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${$};
+    type BackgroundType = ${g};
+    type BackgroundImageType = ${y};
+    type ShadowType = ${j};
   
     namespace Augmented {
       interface BoxProps {
@@ -1106,129 +1106,129 @@ var _;
   }
   `;
     return {
-      variables: x.join(`
+      variables: w.join(`
 `),
-      boxDts: k
+      boxDts: x
     };
   }
-  s.setupAugmentedProps = r;
-  function n(f) {
-    const b = t(f);
-    return Object.keys(A).forEach((h) => {
-      const o = b[h], a = A[h];
-      o ? o.styles = { ...a.styles, ...o.styles } : b[h] = A[h];
-    }), b;
+  a.setupAugmentedProps = t;
+  function n(c) {
+    const f = o(c);
+    return Object.keys(H).forEach((d) => {
+      const l = f[d], s = H[d];
+      l ? l.styles = { ...s.styles, ...l.styles } : f[d] = H[d];
+    }), f;
   }
-  function t(f) {
-    return c(f), E(f), f;
+  function o(c) {
+    return m(c), T(c), c;
   }
-  function c(f) {
-    if (!f.components)
+  function m(c) {
+    if (!c.components)
       return;
-    const b = Object.keys(f.components);
-    for (const g of b) {
-      const h = f.components[g], o = w(g, h);
-      delete h.children;
-      for (const a of o) {
-        const [u, v] = a;
-        f.components[u] = v;
+    const f = Object.keys(c.components);
+    for (const b of f) {
+      const d = c.components[b], l = N(b, d);
+      delete d.children;
+      for (const s of l) {
+        const [r, i] = s;
+        c.components[r] = i;
       }
     }
   }
-  function w(f, b) {
-    if (!b.children)
+  function N(c, f) {
+    if (!f.children)
       return [];
-    const g = Object.keys(b.children), h = [];
-    for (const o of g) {
-      const a = `${f}.${o}`, u = b.children[o], v = w(a, u);
-      h.push(...v), delete u.children, h.push([a, u]);
+    const b = Object.keys(f.children), d = [];
+    for (const l of b) {
+      const s = `${c}.${l}`, r = f.children[l], i = N(s, r);
+      d.push(...i), delete r.children, d.push([s, r]);
     }
-    return h;
+    return d;
   }
-  function E(f) {
-    const { components: b, ...g } = f, h = Object.values(g);
-    b && h.push(...Object.values(b));
-    for (const o of h)
-      C(o.styles), H.forEach((a) => {
-        if (a in o.styles) {
-          const u = o.styles[a];
-          C(u);
+  function T(c) {
+    const { components: f, ...b } = c, d = Object.values(b);
+    f && d.push(...Object.values(f));
+    for (const l of d)
+      S(l.styles), A.forEach((s) => {
+        if (s in l.styles) {
+          const r = l.styles[s];
+          S(r);
         }
-      }), o.themes && Object.values(o.themes).forEach((a) => {
-        C(a), H.forEach((u) => {
-          if (u in a) {
-            const v = a[u];
-            C(v);
+      }), l.themes && Object.values(l.themes).forEach((s) => {
+        S(s), A.forEach((r) => {
+          if (r in s) {
+            const i = s[r];
+            S(i);
           }
         });
       });
   }
-  function C(f) {
-    Object.entries(ne).forEach(([b, g]) => {
-      if (g in f) {
-        const h = f[g];
-        Object.entries(h).map(([o, a]) => {
-          f[`${o}${b}`] = a;
-        }), delete f[g];
+  function S(c) {
+    Object.entries(ie).forEach(([f, b]) => {
+      if (b in c) {
+        const d = c[b];
+        Object.entries(d).map(([l, s]) => {
+          c[`${l}${f}`] = s;
+        }), delete c[b];
       }
     });
   }
 })(_ || (_ = {}));
-const U = _;
-function ve(s) {
-  const { clean: l, theme: r, component: n } = s;
-  return Y(() => {
-    var c, w;
-    if (l)
+const M = _;
+function ce(a) {
+  const { clean: u, theme: t, component: n } = a;
+  return X(() => {
+    var m, N;
+    if (u)
       return;
-    let t = U.Styles[n] ?? ((c = U.Styles.components) == null ? void 0 : c[n]);
-    if (t)
-      return r ? { ...t.styles, ...(w = t.themes) == null ? void 0 : w[r] } : t.styles;
-  }, [n, l, r]);
+    let o = M.Styles[n] ?? ((m = M.Styles.components) == null ? void 0 : m[n]);
+    if (o)
+      return t ? { ...o.styles, ...(N = o.themes) == null ? void 0 : N[t] } : o.styles;
+  }, [n, u, t]);
 }
-const ie = typeof window < "u" && typeof window.document < "u", ce = ie ? se : ae;
-function be(s, l) {
-  const r = ve(s);
-  return ce(I.flush, [s]), Y(() => {
-    const n = [l ? I.svgClassName : I.boxClassName], t = r ? { ...r, ...s } : { ...s };
-    return X(t), Object.entries(t).forEach(([c, w]) => {
-      n.push(I.get(c, w));
-    }), H.forEach((c) => {
-      if (c in t) {
-        const w = t[c];
-        X(w), Object.entries(w).forEach(([E, C]) => {
-          n.push(I.get(E, C, c));
-        }), delete t[c];
+const me = typeof window < "u" && typeof window.document < "u", fe = me ? se : ae;
+function ge(a, u) {
+  const t = ce(a);
+  return fe(I.flush, [a]), X(() => {
+    const n = [u ? I.svgClassName : I.boxClassName], o = t ? { ...t, ...a } : { ...a };
+    return U(o), Object.entries(o).forEach(([m, N]) => {
+      n.push(I.get(m, N));
+    }), A.forEach((m) => {
+      if (m in o) {
+        const N = o[m];
+        U(N), Object.entries(N).forEach(([T, S]) => {
+          n.push(I.get(T, S, m));
+        }), delete o[m];
       }
     }), n;
-  }, [s, r]);
+  }, [a, t]);
 }
-function X(s) {
-  B(s, "hover", "Hover"), B(s, "focus", "Focus"), B(s, "active", "Active"), B(s, "disabled", "Disabled"), R(s, "hoverGroup", "Hover"), R(s, "focusGroup", "Focus"), R(s, "activeGroup", "Active"), R(s, "disabledGroup", "Disabled");
+function U(a) {
+  B(a, "hover", "Hover"), B(a, "focus", "Focus"), B(a, "active", "Active"), B(a, "disabled", "Disabled"), R(a, "hoverGroup", "Hover"), R(a, "focusGroup", "Focus"), R(a, "activeGroup", "Active"), R(a, "disabledGroup", "Disabled");
 }
-function B(s, l, r) {
-  l in s && Q(s, l, r, s[l]);
+function B(a, u, t) {
+  u in a && Q(a, u, t, a[u]);
 }
-function R(s, l, r) {
-  l in s && J.isObject(s[l]) && Object.entries(s[l]).forEach(([n, t]) => {
-    I.addCustomPseudoClass(r, n, l), Q(s, l, r + n, t);
+function R(a, u, t) {
+  u in a && Y.isObject(a[u]) && Object.entries(a[u]).forEach(([n, o]) => {
+    I.addCustomPseudoClass(t, n, u), Q(a, u, t + n, o);
   });
 }
-function Q(s, l, r, n) {
-  Array.isArray(n) ? (Object.entries(n[1]).forEach(([t, c]) => {
-    s[`${t}${r}`] = c;
-  }), s[l] = n[0]) : J.isObject(n) && (Object.entries(n).forEach(([t, c]) => {
-    s[`${t}${r}`] = c;
-  }), delete s[l]);
+function Q(a, u, t, n) {
+  Array.isArray(n) ? (Object.entries(n[1]).forEach(([o, m]) => {
+    a[`${o}${t}`] = m;
+  }), a[u] = n[0]) : Y.isObject(n) && (Object.entries(n).forEach(([o, m]) => {
+    a[`${o}${t}`] = m;
+  }), delete a[u]);
 }
-function me(...s) {
-  return s.reduce((l, r) => r ? typeof r == "string" ? (l.push(r), l) : Array.isArray(r) ? (l.push(...me(...r)), l) : (Object.entries(r).forEach(([n, t]) => {
-    t && l.push(n);
-  }), l) : l, []);
+function de(...a) {
+  return a.reduce((u, t) => t ? typeof t == "string" ? (u.push(t), u) : Array.isArray(t) ? (u.push(...de(...t)), u) : (Object.entries(t).forEach(([n, o]) => {
+    o && u.push(n);
+  }), u) : u, []);
 }
 export {
   I as S,
-  U as T,
-  me as c,
-  be as u
+  M as T,
+  de as c,
+  ge as u
 };