@cronocode/react-box 1.7.7 → 1.7.9

package/core.mjs

@@ -1,71 +1,71 @@
-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) => {
-    function c(s, n) {
-      return `${s}${n.replace("/", "-")}`;
+((a) => {
+  ((l) => {
+    function c(s, d) {
+      return `${s}${d.replace("/", "-")}`;
     }
-    u.fraction = c;
+    l.fraction = c;
     function v(s) {
       return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
     }
-    u.svg = v;
-  })(l.ClassName || (l.ClassName = {})), ((u) => {
-    function c(t, a) {
-      return `${a / 4}rem`;
+    l.svg = v;
+  })(a.ClassName || (a.ClassName = {})), ((l) => {
+    function c(t, u) {
+      return `${u / 4}rem`;
     }
-    u.rem = c;
-    function v(t, a) {
-      return `${a}px`;
+    l.rem = c;
+    function v(t, u) {
+      return `${u}px`;
     }
-    u.px = v;
-    function s(t, a) {
-      const [d, g] = a.split("/");
-      return `${+d / +g * 100}%`;
+    l.px = v;
+    function s(t, u) {
+      const [r, f] = u.split("/");
+      return `${+r / +f * 100}%`;
     }
-    u.fraction = s;
-    function n(t, a) {
-      switch (a) {
+    l.fraction = s;
+    function d(t, u) {
+      switch (u) {
         case "fit":
           return "100%";
         case "fit-screen":
           return t.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return a;
+          return u;
       }
     }
-    u.widthHeight = n;
-    function f(t) {
-      return (a, d) => `var(--${t}${d});`;
+    l.widthHeight = d;
+    function n(t) {
+      return (u, r) => `var(--${t}${r});`;
     }
-    u.variables = f;
-    function b(t) {
-      return (a, d) => `var(--${t}${d});`;
+    l.variables = n;
+    function p(t) {
+      return (u, r) => `var(--${t}${r});`;
     }
-    u.svgVariables = b;
-    function h(t, a) {
-      return `repeat(${a},minmax(0,1fr))`;
+    l.svgVariables = p;
+    function g(t, u) {
+      return `repeat(${u},minmax(0,1fr))`;
     }
-    u.gridColumns = h;
-    function p(t, a) {
-      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
+    l.gridColumns = g;
+    function b(t, u) {
+      return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
     }
-    u.gridColumn = p;
-    function V(t, a) {
-      return `${a}ms`;
+    l.gridColumn = b;
+    function V(t, u) {
+      return `${u}ms`;
     }
-    u.ms = V;
-    function C(t, a) {
-      return `${a}deg`;
+    l.ms = V;
+    function y(t, u) {
+      return `${u}deg`;
     }
-    u.rotate = C;
-    function i(t, a) {
-      return a === "xAxis" ? "-1 1" : "1 -1";
+    l.rotate = y;
+    function N(t, u) {
+      return u === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.flip = i;
-  })(l.Value || (l.Value = {}));
+    l.flip = N;
+  })(a.Value || (a.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"], k = [
   "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 = {
+], C = ["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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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: C, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: w,
+      values: k,
       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"], S = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(I).forEach((l) => {
-  o[l] = I[l], o[l].isThemeStyle = !0;
+Object.keys(L).forEach((a) => {
+  o[a] = L[a], o[a].isThemeStyle = !0;
 });
-Object.keys(L).forEach((l) => {
-  o[l] = L[l], o[l].isThemeStyle = !0;
+Object.keys(_).forEach((a) => {
+  o[a] = _[a], o[a].isThemeStyle = !0;
 });
-const k = {
+const T = {
   w: { ...o.width, key: "width" },
   h: { ...o.height, key: "height" },
   m: { ...o.margin, key: "margin" },
@@ -887,104 +887,109 @@ 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) => {
-    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;
+}, Q = Object.keys(o), Z = Object.keys(T);
+J.forEach((a) => {
+  Q.forEach((l) => {
+    o[`${l}${a}`] = { ...o[l] }, o[`${l}${a}`].pseudoSuffix = a;
+  }), Z.forEach((l) => {
+    T[`${l}${a}`] = { ...T[l], key: `${T[l].key}${a}` }, T[`${l}${a}`].pseudoSuffix = a;
   });
 });
-class Z {
+class K {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(u) {
-    return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
+  getIdentity(l) {
+    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
   }
-  getByIndex(u) {
-    const { first: c, next: v } = K, s = u - c.length;
+  getByIndex(l) {
+    const { first: c, next: v } = ee, s = l - 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];
+      return c[l];
+    const d = Math.floor(s / v.length), n = s - d * v.length;
+    return this.getByIndex(d) + v[n];
   }
 }
-const K = {
+const ee = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var B;
-((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;}}
+var E;
+((a) => {
+  a.boxClassName = "_box", a.svgClassName = "_svg", a.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;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 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),
+.${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);}
+`, c = new K(), v = Object.keys(o);
+  let s = !0, d = v.reduce(
+    (t, u) => (t[u] = /* @__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 n(t, u) {
+    if (t in o)
+      return b(t, u);
+    if (t in S)
+      return S[t].className;
   }
-  l.get = f;
-  function b() {
+  a.get = n;
+  function p() {
     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([l]);
+      t = V(t, "H"), t = V(t, "F"), t = V(t, "A");
+      const u = N();
+      u.innerHTML = t.join(""), s = !1;
     }
   }
-  l.flush = b;
-  function h(i, t) {
-    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);
+  a.flush = p;
+  function g() {
+    d = v.reduce(
+      (t, u) => (t[u] = /* @__PURE__ */ new Set(), t),
+      {}
+    );
   }
-  function p(i, t) {
-    return Object.entries(n).filter(([d]) => {
-      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];
+  a.clear = g;
+  function b(t, u) {
+    var h;
+    d[t].has(u) || (s = !0, d[t].add(u));
+    const r = y(t, u), f = ((h = r.formatClassName) == null ? void 0 : h.call(r, t, u)) ?? `${t}${u}`;
+    return c.getIdentity(f);
+  }
+  function V(t, u) {
+    return Object.entries(d).filter(([f]) => {
+      var h;
+      return ((h = o[f]) == null ? void 0 : h.pseudoSuffix) === u;
+    }).reduce((f, [h, W]) => (W.forEach((z) => {
+      var O;
+      const w = y(h, z), x = `.${b(h, z)}`;
+      let $ = [];
+      u ? u === "H" ? $ = [
+        ...r(`${x}:hover`, w),
+        ...r(`.${S.hover.className}:hover>${x}`, w)
+      ] : u === "F" ? $ = [
+        ...r(`${x}:focus-within`, w),
+        ...r(`.${S.focus.className}:focus-within>${x}`, w)
+      ] : u === "A" && ($ = r(`${x}:active`, w)) : $ = r(x, w);
+      const G = ((O = w.formatValue) == null ? void 0 : O.call(w, h, z)) ?? z, M = o[h].cssNames.map((q) => `${q}:${G};`).join("");
+      f.push(`${$.join(",")}{${M}}`);
+    }), f), t);
+    function r(f, h) {
+      return h.formatSelector ? h.formatSelector(f) : [f];
     }
   }
-  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 y(t, u) {
+    const r = o[t];
+    return r.isThemeStyle ? r : r.values1.values.includes(u) ? r.values1 : r.values2.values.includes(u) ? 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 N() {
+    const u = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let r = u.getElementById(a.cronoStylesElementId);
+    return r || (r = u.createElement("style"), r.setAttribute("id", a.cronoStylesElementId), r.setAttribute("type", "text/css"), u.head.insertBefore(r, u.head.firstChild)), r;
   }
-})(B || (B = {}));
-const z = B, S = {
+})(E || (E = {}));
+const j = E, H = {
   button: {
     styles: {
       display: "inline-block",
@@ -1027,25 +1032,25 @@ const z = B, S = {
     }
   }
 };
-var E;
-((l) => {
-  l.Styles = S;
-  function u(s) {
-    l.Styles = s, v();
+var F;
+((a) => {
+  a.Styles = H;
+  function l(n) {
+    s(n), a.Styles = n, 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(`
-  `), 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';
+  a.setup = l;
+  function c(n, p) {
+    const g = Object.entries(n.colors).map(([f, h]) => `--color${f}: ${h};`).join(`
+  `), b = Object.entries(n.shadows).map(([f, h]) => `--shadow${f}: ${h};`).join(`
+  `), V = Object.entries(n.backgrounds).map(([f, h]) => `--background${f}: ${h};`).join(`
+  `), y = [":root {"];
+    g && y.push(`  ${g}`), b && y.push(`  ${b}`), V && y.push(`  ${V}`), y.push("}");
+    const N = Object.keys(n.colors).map((f) => `'${f}'`).join(" | "), t = Object.keys(n.backgrounds).map((f) => `'${f}'`).join(" | "), u = Object.keys(n.shadows).map((f) => `'${f}'`).join(" | "), r = `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};
+  declare module '${(p == null ? void 0 : p.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${N};
+    type BackgroundType = ${t};
+    type ShadowType = ${u};
   
     namespace Augmented {
       interface BoxProps {
@@ -1089,58 +1094,81 @@ var E;
   }
   `;
     return {
-      variables: p.join(`
+      variables: y.join(`
 `),
-      boxDts: t
+      boxDts: r
     };
   }
-  l.setupAugmentedProps = c;
+  a.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];
+    s(H), Object.keys(H).forEach((p) => {
+      const g = a.Styles[p], b = H[p];
+      g ? (g.styles = { ...b.styles, ...g.styles }, g.disabled && b.disabled && (g.disabled = { ...b.disabled, ...g.disabled })) : a.Styles[p] = H[p];
     });
   }
-})(E || (E = {}));
-const _ = E;
-function ee(l) {
-  const { clean: u, disabled: c, theme: v, component: s } = l;
-  return D(() => {
-    var b, h, p;
-    if (u)
+  function s(n) {
+    if (!n.components)
+      return;
+    const p = Object.keys(n.components);
+    for (const g of p) {
+      const b = n.components[g], V = d(g, b);
+      delete b.children;
+      for (const y of V) {
+        const [N, t] = y;
+        n.components[N] = t;
+      }
+    }
+  }
+  function d(n, p) {
+    if (!p.children)
+      return [];
+    const g = Object.keys(p.children), b = [];
+    for (const V of g) {
+      const y = `${n}.${V}`, N = p.children[V], t = d(y, N);
+      b.push(...t), delete N.children, b.push([y, N]);
+    }
+    return b;
+  }
+})(F || (F = {}));
+const D = F;
+function se(a) {
+  const { clean: l, disabled: c, theme: v, component: s } = a;
+  return P(() => {
+    var p, g, b;
+    if (l)
       return;
-    let n = _.Styles[s] ?? ((b = _.Styles.components) == null ? void 0 : b[s]);
-    if (!n)
+    let d = D.Styles[s] ?? ((p = D.Styles.components) == null ? void 0 : p[s]);
+    if (!d)
       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;
-  }, [s, u, c, v]);
+    let n = v ? { ...d.styles, ...(g = d.themes) == null ? void 0 : g[v].styles } : d.styles;
+    return c ? v ? { ...n, ...d.disabled, ...(b = d.themes) == null ? void 0 : b[v].disabled } : { ...n, ...d.disabled } : n;
+  }, [s, l, 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(a, l) {
+  const c = se(a);
+  return le(j.flush, [a]), P(() => {
+    const v = [l ? j.svgClassName : j.boxClassName], s = c ? { ...B(c), ...B(a) } : B(a);
+    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(([d, n]) => {
+      v.push(j.get(d, n));
     }), v;
-  }, [l, c]);
+  }, [a, c]);
 }
-function A(l) {
-  const u = { ...l };
-  return Object.keys(u).forEach((v) => {
-    const s = k[v];
-    s && (s.key in u || (u[s.key] = u[v]), delete u[v]);
-  }), u;
+function B(a) {
+  const l = { ...a };
+  return Object.keys(l).forEach((v) => {
+    const s = T[v];
+    s && (s.key in l || (l[s.key] = l[v]), delete l[v]);
+  }), l;
 }
-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]) => {
-    s && u.push(v);
-  }), u) : u, []);
+function ue(...a) {
+  return a.reduce((l, c) => c ? typeof c == "string" ? (l.push(c), l) : Array.isArray(c) ? (l.push(...ue(...c)), l) : (Object.entries(c).forEach(([v, s]) => {
+    s && l.push(v);
+  }), l) : l, []);
 }
 export {
-  z as S,
-  _ as T,
-  le as c,
-  oe as u
+  j as S,
+  D as T,
+  ue as c,
+  re as u
 };