@cronocode/react-box 1.8.3 → 1.8.5

package/core.mjs

@@ -1,71 +1,72 @@
-import { useMemo as P, useLayoutEffect as G, useEffect as M } from "react";
+import { useMemo as q, useLayoutEffect as M, useEffect as U } from "react";
+import { O as B } from "./utils.mjs";
 var e;
 ((u) => {
   ((r) => {
-    function m(a, b) {
-      return `${a}${b.replace("/", "-")}`;
+    function c(l, n) {
+      return `${l}${n.replace("/", "-")}`;
     }
-    r.fraction = m;
-    function n(a) {
-      return [`${a} path`, `${a} circle`, `${a} rect`, `${a} line`];
+    r.fraction = c;
+    function h(l) {
+      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
     }
-    r.svg = n;
+    r.svg = h;
   })(u.ClassName || (u.ClassName = {})), ((r) => {
-    function m(l, s) {
+    function c(a, s) {
       return `${s / 4}rem`;
     }
-    r.rem = m;
-    function n(l, s) {
+    r.rem = c;
+    function h(a, s) {
       return `${s}px`;
     }
-    r.px = n;
-    function a(l, s) {
-      const [t, V] = s.split("/");
-      return `${+t / +V * 100}%`;
+    r.px = h;
+    function l(a, s) {
+      const [t, N] = s.split("/");
+      return `${+t / +N * 100}%`;
     }
-    r.fraction = a;
-    function b(l, s) {
+    r.fraction = l;
+    function n(a, s) {
       switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return a.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
           return s;
       }
     }
-    r.widthHeight = b;
-    function y(l) {
-      return (s, t) => `var(--${l}${t});`;
+    r.widthHeight = n;
+    function m(a) {
+      return (s, t) => `var(--${a}${t});`;
     }
-    r.variables = y;
-    function $(l) {
-      return (s, t) => `var(--${l}${t});`;
+    r.variables = m;
+    function C(a) {
+      return (s, t) => `var(--${a}${t});`;
     }
-    r.svgVariables = $;
-    function v(l, s) {
+    r.svgVariables = C;
+    function i(a, s) {
       return `repeat(${s},minmax(0,1fr))`;
     }
-    r.gridColumns = v;
-    function d(l, s) {
+    r.gridColumns = i;
+    function p(a, s) {
       return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
-    r.gridColumn = d;
-    function c(l, s) {
+    r.gridColumn = p;
+    function f(a, s) {
       return `${s}ms`;
     }
-    r.ms = c;
-    function p(l, s) {
+    r.ms = f;
+    function b(a, s) {
       return `${s}deg`;
     }
-    r.rotate = p;
-    function g(l, s) {
+    r.rotate = b;
+    function V(a, s) {
       return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = g;
+    r.flip = V;
   })(u.Value || (u.Value = {}));
 })(e || (e = {}));
-const i = [
+const v = [
   0,
   1,
   2,
@@ -124,7 +125,7 @@ const i = [
   200,
   250,
   300
-], U = [
+], X = [
   -1,
   -2,
   -3,
@@ -170,7 +171,7 @@ const i = [
   -92,
   -96,
   -100
-], f = [...i, ...U], B = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], H = ["auto", "hidden", "scroll", "visible"], C = [
+], d = [...v, ...X], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], I = ["auto", "hidden", "scroll", "visible"], k = [
   "1/2",
   "1/3",
   "2/3",
@@ -197,7 +198,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], w = {
+], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], _ = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], x = {
   /** 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"],
@@ -222,9 +223,9 @@ const i = [
   width: {
     cssNames: ["width"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -232,9 +233,9 @@ const i = [
   minWidth: {
     cssNames: ["min-width"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -242,9 +243,9 @@ const i = [
   maxWidth: {
     cssNames: ["max-width"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -252,9 +253,9 @@ const i = [
   height: {
     cssNames: ["height"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -262,9 +263,9 @@ const i = [
   minHeight: {
     cssNames: ["min-height"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -272,9 +273,9 @@ const i = [
   maxHeight: {
     cssNames: ["max-height"],
     values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -287,217 +288,217 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, 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: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: B },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   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: [] }
   },
@@ -556,19 +557,19 @@ const i = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: H },
+    values1: { values: I },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: H },
+    values1: { values: I },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: H },
+    values1: { values: I },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -580,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: [] }
   },
@@ -598,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: [] }
   },
@@ -693,91 +694,91 @@ 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: F },
+    values1: { values: _ },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: F },
+    values1: { values: _ },
     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: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: B },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -838,7 +839,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, R = {
+}, D = {
   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") },
@@ -846,7 +847,7 @@ const i = [
   bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
   borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
   outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
-}, _ = {
+}, L = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -857,7 +858,7 @@ const i = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, X = ["H", "F", "A"], Y = [
+}, Y = [
   "H",
   "F",
   "A",
@@ -868,20 +869,20 @@ const i = [
   "Required",
   "Optional",
   "Disabled"
-], z = {
+], T = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(R).forEach((u) => {
-  w[u] = R[u], w[u].isThemeStyle = !0;
+Object.keys(D).forEach((u) => {
+  x[u] = D[u], x[u].isThemeStyle = !0;
 });
-Object.keys(_).forEach((u) => {
-  w[u] = _[u], w[u].isThemeStyle = !0;
+Object.keys(L).forEach((u) => {
+  x[u] = L[u], x[u].isThemeStyle = !0;
 });
-const J = Object.keys(w);
+const J = Object.keys(x);
 Y.forEach((u) => {
   J.forEach((r) => {
-    w[`${r}${u}`] = { ...w[r] }, w[`${r}${u}`].pseudoSuffix = u;
+    x[`${r}${u}`] = { ...x[r], pseudoSuffix: u };
   });
 });
 class Q {
@@ -892,18 +893,18 @@ class Q {
     return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
   getByIndex(r) {
-    const { first: m, next: n } = Z, a = r - m.length;
-    if (a < 0)
-      return m[r];
-    const b = Math.floor(a / n.length), y = a - b * n.length;
-    return this.getByIndex(b) + n[y];
+    const { first: c, next: h } = Z, l = r - c.length;
+    if (l < 0)
+      return c[r];
+    const n = Math.floor(l / h.length), m = l - n * h.length;
+    return this.getByIndex(n) + h[m];
   }
 }
 const Z = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var A;
+var E;
 ((u) => {
   u.boxClassName = "_box", u.svgClassName = "_svg", u.cronoStylesElementId = "crono-styles";
   const r = `: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;}}
@@ -912,73 +913,73 @@ body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${u.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;}
 .${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, m = new Q(), n = Object.keys(w);
-  let a = !0, b = n.reduce(
-    (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
+`, c = new Q(), h = Object.keys(x);
+  let l = !0, n = h.reduce(
+    (a, s) => (a[s] = /* @__PURE__ */ new Set(), a),
     {}
   );
-  function y(l, s) {
-    if (l in w)
-      return d(l, s);
-    if (l in z)
-      return z[l].className;
+  function m(a, s) {
+    if (a in x)
+      return p(a, s);
+    if (a in T && s)
+      return T[a].className;
   }
-  u.get = y;
-  function $() {
-    if (a) {
-      let l = c([r]);
-      l = c(l, "H"), l = c(l, "F"), l = c(l, "A"), l = c(l, "Checked"), l = c(l, "Indeterminate"), l = c(l, "Valid"), l = c(l, "Invalid"), l = c(l, "Required"), l = c(l, "Disabled");
-      const s = g();
-      s.innerHTML = l.join(""), a = !1;
+  u.get = m;
+  function C() {
+    if (l) {
+      let a = f([r]);
+      a = f(a, "H"), a = f(a, "F"), a = f(a, "A"), a = f(a, "Checked"), a = f(a, "Indeterminate"), a = f(a, "Valid"), a = f(a, "Invalid"), a = f(a, "Required"), a = f(a, "Disabled");
+      const s = V();
+      s.innerHTML = a.join(""), l = !1;
     }
   }
-  u.flush = $;
-  function v() {
-    b = n.reduce(
-      (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
+  u.flush = C;
+  function i() {
+    n = h.reduce(
+      (a, s) => (a[s] = /* @__PURE__ */ new Set(), a),
       {}
     );
   }
-  u.clear = v;
-  function d(l, s) {
-    var N;
-    b[l].has(s) || (a = !0, b[l].add(s));
-    const t = p(l, s), V = ((N = t.formatClassName) == null ? void 0 : N.call(t, l, s)) ?? `${l}${s}`;
-    return m.getIdentity(V);
+  u.clear = i;
+  function p(a, s) {
+    var y;
+    n[a].has(s) || (l = !0, n[a].add(s));
+    const t = b(a, s), N = ((y = t.formatClassName) == null ? void 0 : y.call(t, a, s)) ?? `${a}${s}`;
+    return c.getIdentity(N);
   }
-  function c(l, s) {
-    return Object.entries(b).filter(([V]) => {
-      var N;
-      return ((N = w[V]) == null ? void 0 : N.pseudoSuffix) === s;
-    }).reduce((V, [N, I]) => (I.forEach((k) => {
-      var E;
-      const o = p(N, k), h = `.${d(N, k)}`;
-      let x = [];
-      s ? s === "H" ? x = [
-        ...t(`${h}:hover`, o),
-        ...t(`.${z.hover.className}:hover>${h}`, o)
-      ] : s === "F" ? x = [
-        ...t(`${h}:focus-within`, o),
-        ...t(`.${z.focus.className}:focus-within>${h}`, o)
-      ] : s === "A" ? x = t(`${h}:active`, o) : s === "Checked" ? x = t(`${h}:checked`, o) : s === "Indeterminate" ? x = t(`${h}:indeterminate`, o) : s === "Valid" ? x = t(`${h}:valid`, o) : s === "Invalid" ? x = t(`${h}:invalid`, o) : s === "Required" ? x = t(`${h}:required`, o) : s === "Optional" ? x = t(`${h}:optional`, o) : s === "Disabled" && (x = t(`${h}:disabled`, o)) : x = t(h, o);
-      const L = ((E = o.formatValue) == null ? void 0 : E.call(o, N, k)) ?? k, q = w[N].cssNames.map((W) => `${W}:${L};`).join("");
-      V.push(`${x.join(",")}{${q}}`);
-    }), V), l);
-    function t(V, N) {
-      return N.formatSelector ? N.formatSelector(V) : [V];
+  function f(a, s) {
+    return Object.entries(n).filter(([N]) => {
+      var y;
+      return ((y = x[N]) == null ? void 0 : y.pseudoSuffix) === s;
+    }).reduce((N, [y, S]) => (S.forEach(($) => {
+      var H;
+      const o = b(y, $), g = `.${p(y, $)}`;
+      let w = [];
+      s ? s === "H" ? w = [
+        ...t(`${g}:hover`, o),
+        ...t(`.${T.hover.className}:hover>${g}`, o)
+      ] : s === "F" ? w = [
+        ...t(`${g}:focus-within`, o),
+        ...t(`.${T.focus.className}:focus-within>${g}`, o)
+      ] : s === "A" ? w = t(`${g}:active`, o) : s === "Checked" ? w = t(`${g}:checked`, o) : s === "Indeterminate" ? w = t(`${g}:indeterminate`, o) : s === "Valid" ? w = t(`${g}:valid`, o) : s === "Invalid" ? w = t(`${g}:invalid`, o) : s === "Required" ? w = t(`${g}:required`, o) : s === "Optional" ? w = t(`${g}:optional`, o) : s === "Disabled" && (w = t(`${g}:disabled`, o)) : w = t(g, o);
+      const F = ((H = o.formatValue) == null ? void 0 : H.call(o, y, $)) ?? $, W = x[y].cssNames.map((G) => `${G}:${F};`).join("");
+      N.push(`${w.join(",")}{${W}}`);
+    }), N), a);
+    function t(N, y) {
+      return y.formatSelector ? y.formatSelector(N) : [N];
     }
   }
-  function p(l, s) {
-    const t = w[l];
+  function b(a, s) {
+    const t = x[a];
     return t.isThemeStyle ? t : t.values1.values.includes(s) ? t.values1 : t.values2.values.includes(s) ? t.values2 : t.values3;
   }
-  function g() {
+  function V() {
     const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
     let t = s.getElementById(u.cronoStylesElementId);
     return t || (t = s.createElement("style"), t.setAttribute("id", u.cronoStylesElementId), t.setAttribute("type", "text/css"), s.head.insertBefore(t, s.head.firstChild)), t;
   }
-})(A || (A = {}));
-const S = A, T = {
+})(E || (E = {}));
+const O = E, z = {
   button: {
     styles: {
       display: "inline-block",
@@ -1020,41 +1021,42 @@ const S = A, T = {
     }
   }
 };
-var O;
+var A;
 ((u) => {
-  function r(v) {
-    b(v), $(v), u.Styles = v, a();
+  u.Styles = l(z);
+  function r(i) {
+    u.Styles = h(i);
   }
   u.setup = r;
-  function m(v, d) {
-    const c = Object.entries(v.colors).map(([o, h]) => `--color${o}: ${h};`).join(`
-  `), p = Object.entries(v.shadows).map(([o, h]) => `--shadow${o}: ${h};`).join(`
-  `), g = Object.entries(v.backgrounds).map(([o, h]) => `--background${o}: ${h};`).join(`
-  `), l = Object.entries(v.backgroundImages).map(([o, h]) => `--backgroundImage${o}: ${h};`).join(`
+  function c(i, p) {
+    const f = Object.entries(i.colors).map(([o, g]) => `--color${o}: ${g};`).join(`
+  `), b = Object.entries(i.shadows).map(([o, g]) => `--shadow${o}: ${g};`).join(`
+  `), V = Object.entries(i.backgrounds).map(([o, g]) => `--background${o}: ${g};`).join(`
+  `), a = Object.entries(i.backgroundImages).map(([o, g]) => `--backgroundImage${o}: ${g};`).join(`
   `), s = [":root {"];
-    c && s.push(`  ${c}`), p && s.push(`  ${p}`), g && s.push(`  ${g}`), l && s.push(`  ${l}`), s.push("}");
-    const t = Object.keys(v.colors).map((o) => `'${o}'`).join(" | "), V = Object.keys(v.backgrounds).map((o) => `'${o}'`).join(" | "), N = Object.keys(v.backgroundImages).map((o) => `'${o}'`).join(" | "), I = Object.keys(v.shadows).map((o) => `'${o}'`).join(" | "), k = `import '@cronocode/react-box';
+    f && s.push(`  ${f}`), b && s.push(`  ${b}`), V && s.push(`  ${V}`), a && s.push(`  ${a}`), s.push("}");
+    const t = Object.keys(i.colors).map((o) => `'${o}'`).join(" | "), N = Object.keys(i.backgrounds).map((o) => `'${o}'`).join(" | "), y = Object.keys(i.backgroundImages).map((o) => `'${o}'`).join(" | "), S = Object.keys(i.shadows).map((o) => `'${o}'`).join(" | "), $ = `import '@cronocode/react-box';
   
-  declare module '${(d == null ? void 0 : d.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+  declare module '${(p == null ? void 0 : p.namespacePath) ?? "@cronocode/react-box/core/types"}' {
     type ColorType = ${t};
-    type BackgroundType = ${V};
-    type BackgroundImageType = ${N};
-    type ShadowType = ${I};
+    type BackgroundType = ${N};
+    type BackgroundImageType = ${y};
+    type ShadowType = ${S};
   
     namespace Augmented {
       interface BoxProps {
-${n("color", "ColorType")}
-${n("bgColor", "ColorType")}
-${n("borderColor", "ColorType")}
-${n("outlineColor", "ColorType")}
-${n("background", "BackgroundType")}
-${n("backgroundImage", "BackgroundImageType")}
-${n("shadow", "ShadowType")}
+        color?: ColorType;
+        bgColor?: ColorType;
+        borderColor?: ColorType;
+        outlineColor?: ColorType;
+        background?: BackgroundType;
+        backgroundImage?: BackgroundImageType;
+        shadow?: ShadowType;
       }
   
       interface SvgProps {
-${n("fill", "ColorType")}
-${n("stroke", "ColorType")}
+        fill?: ColorType;
+        stroke?: ColorType;
       }
     }
   }
@@ -1062,91 +1064,100 @@ ${n("stroke", "ColorType")}
     return {
       variables: s.join(`
 `),
-      boxDts: k
+      boxDts: $
     };
   }
-  u.setupAugmentedProps = m;
-  function n(v, d) {
-    const c = X.map((p) => `        ${v}${p}?: ${d};`);
-    return c.unshift(`        ${v}?: ${d};`), c.join(`
-`);
+  u.setupAugmentedProps = c;
+  function h(i) {
+    const p = l(i);
+    return Object.keys(z).forEach((b) => {
+      const V = p[b], a = z[b];
+      V ? V.styles = { ...a.styles, ...V.styles } : p[b] = z[b];
+    }), p;
   }
-  function a() {
-    b(T), $(T), Object.keys(T).forEach((d) => {
-      const c = u.Styles[d], p = T[d];
-      c ? c.styles = { ...p.styles, ...c.styles } : u.Styles[d] = T[d];
-    });
+  function l(i) {
+    return n(i), C(i), i;
   }
-  function b(v) {
-    if (!v.components)
+  function n(i) {
+    if (!i.components)
       return;
-    const d = Object.keys(v.components);
-    for (const c of d) {
-      const p = v.components[c], g = y(c, p);
-      delete p.children;
-      for (const l of g) {
-        const [s, t] = l;
-        v.components[s] = t;
+    const p = Object.keys(i.components);
+    for (const f of p) {
+      const b = i.components[f], V = m(f, b);
+      delete b.children;
+      for (const a of V) {
+        const [s, t] = a;
+        i.components[s] = t;
       }
     }
   }
-  function y(v, d) {
-    if (!d.children)
+  function m(i, p) {
+    if (!p.children)
       return [];
-    const c = Object.keys(d.children), p = [];
-    for (const g of c) {
-      const l = `${v}.${g}`, s = d.children[g], t = y(l, s);
-      p.push(...t), delete s.children, p.push([l, s]);
+    const f = Object.keys(p.children), b = [];
+    for (const V of f) {
+      const a = `${i}.${V}`, s = p.children[V], t = m(a, s);
+      b.push(...t), delete s.children, b.push([a, s]);
     }
-    return p;
+    return b;
   }
-  function $(v) {
-    const { components: d, ...c } = v, p = Object.values(c);
-    d && p.push(...Object.values(d));
-    for (const g of p)
+  function C(i) {
+    const { components: p, ...f } = i, b = Object.values(f);
+    p && b.push(...Object.values(p));
+    for (const V of b)
       [
         ["disabled", "Disabled"],
         ["indeterminate", "Indeterminate"],
         ["checked", "Checked"]
-      ].forEach(([l, s]) => {
-        l in g.styles && (Object.entries(g.styles[l]).map(([t, V]) => {
-          g.styles[`${t}${s}`] = V;
-        }), delete g.styles[l]);
+      ].forEach(([a, s]) => {
+        a in V.styles && (Object.entries(V.styles[a]).map(([t, N]) => {
+          V.styles[`${t}${s}`] = N;
+        }), delete V.styles[a]);
       });
   }
-})(O || (O = {}));
-const D = O;
+})(A || (A = {}));
+const P = A;
 function K(u) {
-  const { clean: r, theme: m, component: n } = u;
-  return P(() => {
-    var b, y;
+  const { clean: r, theme: c, component: h } = u;
+  return q(() => {
+    var n, m;
     if (r)
       return;
-    let a = D.Styles[n] ?? ((b = D.Styles.components) == null ? void 0 : b[n]);
-    if (a)
-      return m ? { ...a.styles, ...(y = a.themes) == null ? void 0 : y[m].styles } : a.styles;
-  }, [n, r, m]);
+    let l = P.Styles[h] ?? ((n = P.Styles.components) == null ? void 0 : n[h]);
+    if (l)
+      return c ? { ...l.styles, ...(m = l.themes) == null ? void 0 : m[c].styles } : l.styles;
+  }, [h, r, c]);
 }
-const ee = typeof window < "u" && typeof window.document < "u", se = ee ? G : M;
-function te(u, r) {
-  const m = K(u);
-  return se(S.flush, [u]), P(() => {
-    const n = [r ? S.svgClassName : S.boxClassName], a = m ? { ...m, ...u } : { ...u };
-    return Array.isArray(a.disabled) && (Object.entries(a.disabled[1]).forEach(([b, y]) => {
-      a[`${b}Disabled`] = y;
-    }), delete a.disabled), "inline" in a && (a.display === "block" || !a.display ? a.display = "inline-block" : a.display === "flex" ? a.display = "inline-flex" : a.display === "grid" && (a.display = "inline-grid"), delete a.inline), "inlineH" in a && (a.displayH === "block" || !a.displayH ? a.displayH = "inline-block" : a.displayH === "flex" ? a.displayH = "inline-flex" : a.displayH === "grid" && (a.displayH = "inline-grid"), delete a.inlineH), "inlineF" in a && (a.displayF === "block" || !a.displayF ? a.displayF = "inline-block" : a.displayF === "flex" ? a.displayF = "inline-flex" : a.displayF === "grid" && (a.displayF = "inline-grid"), delete a.inlineF), "inlineA" in a && (a.displayA === "block" || !a.displayA ? a.displayA = "inline-block" : a.displayA === "flex" ? a.displayA = "inline-flex" : a.displayA === "grid" && (a.displayA = "inline-grid"), delete a.inlineA), Object.entries(a).forEach(([b, y]) => {
-      n.push(S.get(b, y));
-    }), n;
-  }, [u, m]);
+const ee = typeof window < "u" && typeof window.document < "u", se = ee ? M : U;
+function re(u, r) {
+  const c = K(u);
+  return se(O.flush, [u]), q(() => {
+    const h = [r ? O.svgClassName : O.boxClassName], l = c ? { ...c, ...u } : { ...u };
+    return Array.isArray(l.disabled) && (Object.entries(l.disabled[1]).forEach(([n, m]) => {
+      l[`${n}Disabled`] = m;
+    }), delete l.disabled), Array.isArray(l.hover) ? (Object.entries(l.hover[1]).forEach(([n, m]) => {
+      l[`${n}H`] = m;
+    }), l.hover = l.hover[0]) : B.isObject(l.hover) && (Object.entries(l.hover).forEach(([n, m]) => {
+      l[`${n}H`] = m;
+    }), delete l.hover), Array.isArray(l.focus) ? (Object.entries(l.focus[1]).forEach(([n, m]) => {
+      l[`${n}F`] = m;
+    }), l.focus = l.focus[0]) : B.isObject(l.focus) && (Object.entries(l.focus).forEach(([n, m]) => {
+      l[`${n}F`] = m;
+    }), delete l.focus), l.active && (Object.entries(l.active).forEach(([n, m]) => {
+      l[`${n}A`] = m;
+    }), delete l.active), "inline" in l && (l.display === "block" || !l.display ? l.display = "inline-block" : l.display === "flex" ? l.display = "inline-flex" : l.display === "grid" && (l.display = "inline-grid"), delete l.inline), Object.entries(l).forEach(([n, m]) => {
+      h.push(O.get(n, m));
+    }), h;
+  }, [u, c]);
 }
 function ae(...u) {
-  return u.reduce((r, m) => m ? typeof m == "string" ? (r.push(m), r) : Array.isArray(m) ? (r.push(...ae(...m)), r) : (Object.entries(m).forEach(([n, a]) => {
-    a && r.push(n);
+  return u.reduce((r, c) => c ? typeof c == "string" ? (r.push(c), r) : Array.isArray(c) ? (r.push(...ae(...c)), r) : (Object.entries(c).forEach(([h, l]) => {
+    l && r.push(h);
   }), r) : r, []);
 }
 export {
-  S,
-  D as T,
+  O as S,
+  P as T,
   ae as c,
-  te as u
+  re as u
 };