@cronocode/react-box 1.7.7 → 1.7.8

package/core.mjs

@@ -1,4 +1,4 @@
-import { useMemo as D, useLayoutEffect as q, useEffect as U } from "react";
+import { useMemo as P, useLayoutEffect as U, useEffect as X } from "react";
 var e;
 ((l) => {
   ((u) => {
@@ -20,8 +20,8 @@ var e;
     }
     u.px = v;
     function s(t, a) {
-      const [d, g] = a.split("/");
-      return `${+d / +g * 100}%`;
+      const [r, b] = a.split("/");
+      return `${+r / +b * 100}%`;
     }
     u.fraction = s;
     function n(t, a) {
@@ -35,14 +35,14 @@ var e;
       }
     }
     u.widthHeight = n;
-    function f(t) {
-      return (a, d) => `var(--${t}${d});`;
+    function d(t) {
+      return (a, r) => `var(--${t}${r});`;
     }
-    u.variables = f;
-    function b(t) {
-      return (a, d) => `var(--${t}${d});`;
+    u.variables = d;
+    function f(t) {
+      return (a, r) => `var(--${t}${r});`;
     }
-    u.svgVariables = b;
+    u.svgVariables = f;
     function h(t, a) {
       return `repeat(${a},minmax(0,1fr))`;
     }
@@ -55,17 +55,17 @@ var e;
       return `${a}ms`;
     }
     u.ms = V;
-    function C(t, a) {
+    function N(t, a) {
       return `${a}deg`;
     }
-    u.rotate = C;
-    function i(t, a) {
+    u.rotate = N;
+    function T(t, a) {
       return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.flip = i;
+    u.flip = T;
   })(l.Value || (l.Value = {}));
 })(e || (e = {}));
-const r = [
+const i = [
   0,
   1,
   2,
@@ -117,7 +117,7 @@ const r = [
   92,
   96,
   100
-], X = [
+], Y = [
   -1,
   -2,
   -3,
@@ -163,7 +163,7 @@ const r = [
   -92,
   -96,
   -100
-], m = [...r, ...X], O = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], j = ["auto", "hidden", "scroll", "visible"], w = [
+], m = [...i, ...Y], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], x = [
   "1/2",
   "1/3",
   "2/3",
@@ -190,7 +190,7 @@ const r = [
   "9/12",
   "10/12",
   "11/12"
-], x = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], R = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
+], k = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], I = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
   /** 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"],
@@ -214,60 +214,60 @@ const r = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: x, formatValue: e.Value.widthHeight },
-    values2: { values: r, formatValue: e.Value.rem },
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: x,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -394,7 +394,7 @@ const r = [
   },
   border: {
     cssNames: ["border-width"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -436,61 +436,61 @@ const r = [
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: O },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -549,19 +549,19 @@ const r = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: j },
+    values1: { values: A },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: j },
+    values1: { values: A },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: j },
+    values1: { values: A },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -573,7 +573,7 @@ const r = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -591,13 +591,13 @@ const r = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -686,91 +686,91 @@ const r = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: r, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: r },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: r },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: r },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: R },
+    values1: { values: I },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: R },
+    values1: { values: I },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: r, formatValue: e.Value.gridColumns },
+    values1: { values: i, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: r, formatValue: e.Value.gridColumn },
+    values1: { values: i, formatValue: e.Value.gridColumn },
     values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: r },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: r },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: O },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: r, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -831,14 +831,14 @@ const r = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, I = {
+}, L = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
   color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
   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"),
@@ -849,17 +849,17 @@ const r = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, Y = ["H", "F", "A"], H = {
+}, J = ["H", "F", "A"], z = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(I).forEach((l) => {
-  o[l] = I[l], o[l].isThemeStyle = !0;
-});
 Object.keys(L).forEach((l) => {
   o[l] = L[l], o[l].isThemeStyle = !0;
 });
-const k = {
+Object.keys(_).forEach((l) => {
+  o[l] = _[l], o[l].isThemeStyle = !0;
+});
+const C = {
   w: { ...o.width, key: "width" },
   h: { ...o.height, key: "height" },
   m: { ...o.margin, key: "margin" },
@@ -887,15 +887,15 @@ const k = {
   ai: { ...o.alignItems, key: "alignItems" },
   ac: { ...o.alignContent, key: "alignContent" },
   d: { ...o.flexDirection, key: "flexDirection" }
-}, J = Object.keys(o), Q = Object.keys(k);
-Y.forEach((l) => {
-  J.forEach((u) => {
+}, Q = Object.keys(o), Z = Object.keys(C);
+J.forEach((l) => {
+  Q.forEach((u) => {
     o[`${u}${l}`] = { ...o[u] }, o[`${u}${l}`].pseudoSuffix = l;
-  }), Q.forEach((u) => {
-    k[`${u}${l}`] = { ...k[u], key: `${k[u].key}${l}` }, k[`${u}${l}`].pseudoSuffix = l;
+  }), Z.forEach((u) => {
+    C[`${u}${l}`] = { ...C[u], key: `${C[u].key}${l}` }, C[`${u}${l}`].pseudoSuffix = l;
   });
 });
-class Z {
+class K {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -903,18 +903,18 @@ class Z {
     return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
   }
   getByIndex(u) {
-    const { first: c, next: v } = K, s = u - c.length;
+    const { first: c, next: v } = ee, s = u - c.length;
     if (s < 0)
       return c[u];
-    const n = Math.floor(s / v.length), f = s - n * v.length;
-    return this.getByIndex(n) + v[f];
+    const n = Math.floor(s / v.length), d = s - n * v.length;
+    return this.getByIndex(n) + v[d];
   }
 }
-const K = {
+const ee = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var B;
+var E;
 ((l) => {
   l.boxClassName = "_box", l.svgClassName = "_svg", l.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;}}
@@ -923,68 +923,74 @@ body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${l.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;}
 .${l.svgClassName}{transition: all var(--svgTransitionTime);}.${l.svgClassName} path,.${l.svgClassName} circle,.${l.svgClassName} rect,.${l.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, c = new Z(), v = Object.keys(o);
-  let s = !1;
-  const n = v.reduce(
-    (i, t) => (i[t] = /* @__PURE__ */ new Set(), i),
+`, c = new K(), v = Object.keys(o);
+  let s = !1, n = v.reduce(
+    (t, a) => (t[a] = /* @__PURE__ */ new Set(), t),
     {}
   );
-  function f(i, t) {
-    if (i in o)
-      return h(i, t);
-    if (i in H)
-      return H[i].className;
+  function d(t, a) {
+    if (t in o)
+      return p(t, a);
+    if (t in z)
+      return z[t].className;
   }
-  l.get = f;
-  function b() {
+  l.get = d;
+  function f() {
     if (s) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let i = p([u]);
-      i = p(i, "H"), i = p(i, "F"), i = p(i, "A");
-      const t = C();
-      t.innerHTML = i.join(""), s = !1;
+      let t = V([u]);
+      t = V(t, "H"), t = V(t, "F"), t = V(t, "A");
+      const a = T();
+      a.innerHTML = t.join(""), s = !1;
     }
   }
-  l.flush = b;
-  function h(i, t) {
+  l.flush = f;
+  function h() {
+    n = v.reduce(
+      (t, a) => (t[a] = /* @__PURE__ */ new Set(), t),
+      {}
+    );
+  }
+  l.clear = h;
+  function p(t, a) {
     var g;
-    n[i].has(t) || (s = !0, n[i].add(t));
-    const a = V(i, t), d = ((g = a.formatClassName) == null ? void 0 : g.call(a, i, t)) ?? `${i}${t}`;
-    return c.getIdentity(d);
+    n[t].has(a) || (s = !0, n[t].add(a));
+    const r = N(t, a), b = ((g = r.formatClassName) == null ? void 0 : g.call(r, t, a)) ?? `${t}${a}`;
+    return c.getIdentity(b);
   }
-  function p(i, t) {
-    return Object.entries(n).filter(([d]) => {
+  function V(t, a) {
+    return Object.entries(n).filter(([b]) => {
       var g;
-      return ((g = o[d]) == null ? void 0 : g.pseudoSuffix) === t;
-    }).reduce((d, [g, P]) => (P.forEach(($) => {
-      var F;
-      const y = V(g, $), N = `.${h(g, $)}`;
-      let T = [];
-      t ? t === "H" ? T = [
-        ...a(`${N}:hover`, y),
-        ...a(`.${H.hover.className}:hover>${N}`, y)
-      ] : t === "F" ? T = [
-        ...a(`${N}:focus-within`, y),
-        ...a(`.${H.focus.className}:focus-within>${N}`, y)
-      ] : t === "A" && (T = a(`${N}:active`, y)) : T = a(N, y);
-      const W = ((F = y.formatValue) == null ? void 0 : F.call(y, g, $)) ?? $, G = o[g].cssNames.map((M) => `${M}:${W};`).join("");
-      d.push(`${T.join(",")}{${G}}`);
-    }), d), i);
-    function a(d, g) {
-      return g.formatSelector ? g.formatSelector(d) : [d];
+      return ((g = o[b]) == null ? void 0 : g.pseudoSuffix) === a;
+    }).reduce((b, [g, W]) => (W.forEach((H) => {
+      var O;
+      const y = N(g, H), w = `.${p(g, H)}`;
+      let $ = [];
+      a ? a === "H" ? $ = [
+        ...r(`${w}:hover`, y),
+        ...r(`.${z.hover.className}:hover>${w}`, y)
+      ] : a === "F" ? $ = [
+        ...r(`${w}:focus-within`, y),
+        ...r(`.${z.focus.className}:focus-within>${w}`, y)
+      ] : a === "A" && ($ = r(`${w}:active`, y)) : $ = r(w, y);
+      const G = ((O = y.formatValue) == null ? void 0 : O.call(y, g, H)) ?? H, M = o[g].cssNames.map((q) => `${q}:${G};`).join("");
+      b.push(`${$.join(",")}{${M}}`);
+    }), b), t);
+    function r(b, g) {
+      return g.formatSelector ? g.formatSelector(b) : [b];
     }
   }
-  function V(i, t) {
-    const a = o[i];
-    return a.isThemeStyle ? a : a.values1.values.includes(t) ? a.values1 : a.values2.values.includes(t) ? a.values2 : a.values3;
+  function N(t, a) {
+    const r = o[t];
+    return r.isThemeStyle ? r : r.values1.values.includes(a) ? r.values1 : r.values2.values.includes(a) ? r.values2 : r.values3;
   }
-  function C() {
-    const t = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let a = t.getElementById(l.cronoStylesElementId);
-    return a || (a = t.createElement("style"), a.setAttribute("id", l.cronoStylesElementId), a.setAttribute("type", "text/css"), t.head.insertBefore(a, t.head.firstChild)), a;
+  function T() {
+    const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let r = a.getElementById(l.cronoStylesElementId);
+    return r || (r = a.createElement("style"), r.setAttribute("id", l.cronoStylesElementId), r.setAttribute("type", "text/css"), a.head.insertBefore(r, a.head.firstChild)), r;
   }
-})(B || (B = {}));
-const z = B, S = {
+})(E || (E = {}));
+const S = E, j = {
   button: {
     styles: {
       display: "inline-block",
@@ -1027,25 +1033,25 @@ const z = B, S = {
     }
   }
 };
-var E;
+var F;
 ((l) => {
-  l.Styles = S;
+  l.Styles = j;
   function u(s) {
     l.Styles = s, v();
   }
   l.setup = u;
   function c(s, n) {
-    const f = Object.entries(s.colors).map(([a, d]) => `--color${a}: ${d};`).join(`
-  `), b = Object.entries(s.shadows).map(([a, d]) => `--shadow${a}: ${d};`).join(`
-  `), h = Object.entries(s.backgrounds).map(([a, d]) => `--background${a}: ${d};`).join(`
+    const d = Object.entries(s.colors).map(([a, r]) => `--color${a}: ${r};`).join(`
+  `), f = Object.entries(s.shadows).map(([a, r]) => `--shadow${a}: ${r};`).join(`
+  `), h = Object.entries(s.backgrounds).map(([a, r]) => `--background${a}: ${r};`).join(`
   `), p = [":root {"];
-    f && p.push(`  ${f}`), b && p.push(`  ${b}`), h && p.push(`  ${h}`), p.push("}");
-    const V = Object.keys(s.colors).map((a) => `'${a}'`).join(" | "), C = Object.keys(s.backgrounds).map((a) => `'${a}'`).join(" | "), i = Object.keys(s.shadows).map((a) => `'${a}'`).join(" | "), t = `import '@cronocode/react-box';
+    d && p.push(`  ${d}`), f && p.push(`  ${f}`), h && p.push(`  ${h}`), p.push("}");
+    const V = Object.keys(s.colors).map((a) => `'${a}'`).join(" | "), N = Object.keys(s.backgrounds).map((a) => `'${a}'`).join(" | "), T = Object.keys(s.shadows).map((a) => `'${a}'`).join(" | "), t = `import '@cronocode/react-box';
   
   declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
     type ColorType = ${V};
-    type BackgroundType = ${C};
-    type ShadowType = ${i};
+    type BackgroundType = ${N};
+    type ShadowType = ${T};
   
     namespace Augmented {
       interface BoxProps {
@@ -1096,51 +1102,51 @@ var E;
   }
   l.setupAugmentedProps = c;
   function v() {
-    Object.keys(S).forEach((n) => {
-      const f = l.Styles[n], b = S[n];
-      f ? (f.styles = { ...b.styles, ...f.styles }, f.disabled && b.disabled && (f.disabled = { ...b.disabled, ...f.disabled })) : l.Styles[n] = S[n];
+    Object.keys(j).forEach((n) => {
+      const d = l.Styles[n], f = j[n];
+      d ? (d.styles = { ...f.styles, ...d.styles }, d.disabled && f.disabled && (d.disabled = { ...f.disabled, ...d.disabled })) : l.Styles[n] = j[n];
     });
   }
-})(E || (E = {}));
-const _ = E;
-function ee(l) {
+})(F || (F = {}));
+const D = F;
+function se(l) {
   const { clean: u, disabled: c, theme: v, component: s } = l;
-  return D(() => {
-    var b, h, p;
+  return P(() => {
+    var f, h, p;
     if (u)
       return;
-    let n = _.Styles[s] ?? ((b = _.Styles.components) == null ? void 0 : b[s]);
+    let n = D.Styles[s] ?? ((f = D.Styles.components) == null ? void 0 : f[s]);
     if (!n)
       return;
-    let f = v ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[v].styles } : n.styles;
-    return c ? v ? { ...f, ...n.disabled, ...(p = n.themes) == null ? void 0 : p[v].disabled } : { ...f, ...n.disabled } : f;
+    let d = v ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[v].styles } : n.styles;
+    return c ? v ? { ...d, ...n.disabled, ...(p = n.themes) == null ? void 0 : p[v].disabled } : { ...d, ...n.disabled } : d;
   }, [s, u, c, v]);
 }
-const se = typeof window < "u" && typeof window.document < "u", ae = se ? q : U;
-function oe(l, u) {
-  const c = ee(l);
-  return ae(z.flush, [l]), D(() => {
-    const v = [u ? z.svgClassName : z.boxClassName], s = c ? { ...A(c), ...A(l) } : A(l);
-    return "inline" in s && (s.display === "block" || !s.display ? s.display = "inline-block" : s.display === "flex" ? s.display = "inline-flex" : s.display === "grid" && (s.display = "inline-grid"), delete s.inline), "inlineH" in s && (s.displayH === "block" || !s.displayH ? s.displayH = "inline-block" : s.displayH === "flex" ? s.displayH = "inline-flex" : s.displayH === "grid" && (s.displayH = "inline-grid"), delete s.inlineH), "inlineF" in s && (s.displayF === "block" || !s.displayF ? s.displayF = "inline-block" : s.displayF === "flex" ? s.displayF = "inline-flex" : s.displayF === "grid" && (s.displayF = "inline-grid"), delete s.inlineF), "inlineA" in s && (s.displayA === "block" || !s.displayA ? s.displayA = "inline-block" : s.displayA === "flex" ? s.displayA = "inline-flex" : s.displayA === "grid" && (s.displayA = "inline-grid"), delete s.inlineA), Object.entries(s).forEach(([n, f]) => {
-      v.push(z.get(n, f));
+const ae = typeof window < "u" && typeof window.document < "u", le = ae ? U : X;
+function re(l, u) {
+  const c = se(l);
+  return le(S.flush, [l]), P(() => {
+    const v = [u ? S.svgClassName : S.boxClassName], s = c ? { ...B(c), ...B(l) } : B(l);
+    return "inline" in s && (s.display === "block" || !s.display ? s.display = "inline-block" : s.display === "flex" ? s.display = "inline-flex" : s.display === "grid" && (s.display = "inline-grid"), delete s.inline), "inlineH" in s && (s.displayH === "block" || !s.displayH ? s.displayH = "inline-block" : s.displayH === "flex" ? s.displayH = "inline-flex" : s.displayH === "grid" && (s.displayH = "inline-grid"), delete s.inlineH), "inlineF" in s && (s.displayF === "block" || !s.displayF ? s.displayF = "inline-block" : s.displayF === "flex" ? s.displayF = "inline-flex" : s.displayF === "grid" && (s.displayF = "inline-grid"), delete s.inlineF), "inlineA" in s && (s.displayA === "block" || !s.displayA ? s.displayA = "inline-block" : s.displayA === "flex" ? s.displayA = "inline-flex" : s.displayA === "grid" && (s.displayA = "inline-grid"), delete s.inlineA), Object.entries(s).forEach(([n, d]) => {
+      v.push(S.get(n, d));
     }), v;
   }, [l, c]);
 }
-function A(l) {
+function B(l) {
   const u = { ...l };
   return Object.keys(u).forEach((v) => {
-    const s = k[v];
+    const s = C[v];
     s && (s.key in u || (u[s.key] = u[v]), delete u[v]);
   }), u;
 }
-function le(...l) {
-  return l.reduce((u, c) => c ? typeof c == "string" ? (u.push(c), u) : Array.isArray(c) ? (u.push(...le(...c)), u) : (Object.entries(c).forEach(([v, s]) => {
+function ue(...l) {
+  return l.reduce((u, c) => c ? typeof c == "string" ? (u.push(c), u) : Array.isArray(c) ? (u.push(...ue(...c)), u) : (Object.entries(c).forEach(([v, s]) => {
     s && u.push(v);
   }), u) : u, []);
 }
 export {
-  z as S,
-  _ as T,
-  le as c,
-  oe as u
+  S,
+  D as T,
+  ue as c,
+  re as u
 };