@cronocode/react-box 1.8.0 → 1.8.2

package/core.mjs

@@ -1,69 +1,69 @@
-import { useMemo as W, useLayoutEffect as U, useEffect as X } from "react";
+import { useMemo as P, useLayoutEffect as G, useEffect as M } from "react";
 var e;
-((s) => {
-  ((l) => {
-    function c(a, d) {
-      return `${a}${d.replace("/", "-")}`;
+((u) => {
+  ((r) => {
+    function m(a, b) {
+      return `${a}${b.replace("/", "-")}`;
     }
-    l.fraction = c;
-    function v(a) {
+    r.fraction = m;
+    function n(a) {
       return [`${a} path`, `${a} circle`, `${a} rect`, `${a} line`];
     }
-    l.svg = v;
-  })(s.ClassName || (s.ClassName = {})), ((l) => {
-    function c(o, u) {
-      return `${u / 4}rem`;
+    r.svg = n;
+  })(u.ClassName || (u.ClassName = {})), ((r) => {
+    function m(l, s) {
+      return `${s / 4}rem`;
     }
-    l.rem = c;
-    function v(o, u) {
-      return `${u}px`;
+    r.rem = m;
+    function n(l, s) {
+      return `${s}px`;
     }
-    l.px = v;
-    function a(o, u) {
-      const [t, N] = u.split("/");
+    r.px = n;
+    function a(l, s) {
+      const [t, N] = s.split("/");
       return `${+t / +N * 100}%`;
     }
-    l.fraction = a;
-    function d(o, u) {
-      switch (u) {
+    r.fraction = a;
+    function b(l, s) {
+      switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return u;
+          return s;
       }
     }
-    l.widthHeight = d;
-    function n(o) {
-      return (u, t) => `var(--${o}${t});`;
+    r.widthHeight = b;
+    function V(l) {
+      return (s, t) => `var(--${l}${t});`;
     }
-    l.variables = n;
-    function f(o) {
-      return (u, t) => `var(--${o}${t});`;
+    r.variables = V;
+    function $(l) {
+      return (s, t) => `var(--${l}${t});`;
     }
-    l.svgVariables = f;
-    function g(o, u) {
-      return `repeat(${u},minmax(0,1fr))`;
+    r.svgVariables = $;
+    function v(l, s) {
+      return `repeat(${s},minmax(0,1fr))`;
     }
-    l.gridColumns = g;
-    function p(o, u) {
-      return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
+    r.gridColumns = v;
+    function d(l, s) {
+      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
-    l.gridColumn = p;
-    function y(o, u) {
-      return `${u}ms`;
+    r.gridColumn = d;
+    function c(l, s) {
+      return `${s}ms`;
     }
-    l.ms = y;
-    function k(o, u) {
-      return `${u}deg`;
+    r.ms = c;
+    function p(l, s) {
+      return `${s}deg`;
     }
-    l.rotate = k;
-    function h(o, u) {
-      return u === "xAxis" ? "-1 1" : "1 -1";
+    r.rotate = p;
+    function h(l, s) {
+      return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    l.flip = h;
-  })(s.Value || (s.Value = {}));
+    r.flip = h;
+  })(u.Value || (u.Value = {}));
 })(e || (e = {}));
 const i = [
   0,
@@ -116,8 +116,15 @@ const i = [
   88,
   92,
   96,
-  100
-], Y = [
+  100,
+  120,
+  140,
+  160,
+  180,
+  200,
+  250,
+  300
+], U = [
   -1,
   -2,
   -3,
@@ -163,7 +170,7 @@ const i = [
   -92,
   -96,
   -100
-], m = [...i, ...Y], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], I = ["auto", "hidden", "scroll", "visible"], $ = [
+], f = [...i, ...U], B = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], H = ["auto", "hidden", "scroll", "visible"], C = [
   "1/2",
   "1/3",
   "2/3",
@@ -190,7 +197,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], H = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], r = {
+], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], w = {
   /** 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 +221,60 @@ const i = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: H, formatValue: e.Value.widthHeight },
+    values1: { values: j, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: $,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -280,163 +287,163 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  margin: {
+  m: {
     cssNames: ["margin"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginHorizontal: {
+  mx: {
     cssNames: ["margin-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginVertical: {
+  my: {
     cssNames: ["margin-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginTop: {
+  mt: {
     cssNames: ["margin-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginRight: {
+  mr: {
     cssNames: ["margin-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginBottom: {
+  mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  marginLeft: {
+  ml: {
     cssNames: ["margin-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
-  padding: {
+  p: {
     cssNames: ["padding"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingHorizontal: {
+  px: {
     cssNames: ["padding-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingVertical: {
+  py: {
     cssNames: ["padding-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingTop: {
+  pt: {
     cssNames: ["padding-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingRight: {
+  pr: {
     cssNames: ["padding-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingBottom: {
+  pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  paddingLeft: {
+  pl: {
     cssNames: ["padding-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: f, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
-  border: {
+  b: {
     cssNames: ["border-width"],
     values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderHorizontal: {
+  bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderVertical: {
+  by: {
     cssNames: ["border-block-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderTop: {
+  bt: {
     cssNames: ["border-top-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderRight: {
+  br: {
     cssNames: ["border-right-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderBottom: {
+  bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
-  borderLeft: {
+  bl: {
     cssNames: ["border-left-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: f, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: R },
+    values1: { values: B },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -549,19 +556,19 @@ const i = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: I },
+    values1: { values: H },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: I },
+    values1: { values: H },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: I },
+    values1: { values: H },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -625,7 +632,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   },
-  justifyContent: {
+  jc: {
     cssNames: ["justify-content"],
     values1: {
       values: [
@@ -645,7 +652,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   },
-  alignItems: {
+  ai: {
     cssNames: ["align-items"],
     values1: {
       values: ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end", "self-start", "self-end"]
@@ -678,7 +685,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   },
-  flexDirection: {
+  d: {
     cssNames: ["flex-direction"],
     values1: { values: ["row", "row-reverse", "column", "column-reverse"] },
     values2: { values: [] },
@@ -722,13 +729,13 @@ const i = [
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: L },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: L },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -764,7 +771,7 @@ const i = [
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: R },
+    values1: { values: B },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -831,7 +838,7 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, _ = {
+}, R = {
   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") },
@@ -839,7 +846,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") }
-}, D = {
+}, _ = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -850,147 +857,128 @@ const i = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, J = ["H", "F", "A", "C"], S = {
+}, X = ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional"], Y = [
+  "H",
+  "F",
+  "A",
+  "Checked",
+  "Indeterminate",
+  "Valid",
+  "Invalid",
+  "Required",
+  "Optional",
+  "Disabled"
+], z = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(_).forEach((s) => {
-  r[s] = _[s], r[s].isThemeStyle = !0;
+Object.keys(R).forEach((u) => {
+  w[u] = R[u], w[u].isThemeStyle = !0;
 });
-Object.keys(D).forEach((s) => {
-  r[s] = D[s], r[s].isThemeStyle = !0;
+Object.keys(_).forEach((u) => {
+  w[u] = _[u], w[u].isThemeStyle = !0;
 });
-const z = {
-  w: { ...r.width, key: "width" },
-  h: { ...r.height, key: "height" },
-  m: { ...r.margin, key: "margin" },
-  mx: { ...r.marginHorizontal, key: "marginHorizontal" },
-  my: { ...r.marginVertical, key: "marginVertical" },
-  mt: { ...r.marginTop, key: "marginTop" },
-  mr: { ...r.marginRight, key: "marginRight" },
-  mb: { ...r.marginBottom, key: "marginBottom" },
-  ml: { ...r.marginLeft, key: "marginLeft" },
-  p: { ...r.padding, key: "padding" },
-  px: { ...r.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...r.paddingVertical, key: "paddingVertical" },
-  pt: { ...r.paddingTop, key: "paddingTop" },
-  pr: { ...r.paddingRight, key: "paddingRight" },
-  pb: { ...r.paddingBottom, key: "paddingBottom" },
-  pl: { ...r.paddingLeft, key: "paddingLeft" },
-  b: { ...r.border, key: "border" },
-  bx: { ...r.borderHorizontal, key: "borderHorizontal" },
-  by: { ...r.borderVertical, key: "borderVertical" },
-  bt: { ...r.borderTop, key: "borderTop" },
-  br: { ...r.borderRight, key: "borderRight" },
-  bb: { ...r.borderBottom, key: "borderBottom" },
-  bl: { ...r.borderLeft, key: "borderLeft" },
-  jc: { ...r.justifyContent, key: "justifyContent" },
-  ai: { ...r.alignItems, key: "alignItems" },
-  ac: { ...r.alignContent, key: "alignContent" },
-  d: { ...r.flexDirection, key: "flexDirection" }
-}, Q = Object.keys(r), Z = Object.keys(z);
-J.forEach((s) => {
-  Q.forEach((l) => {
-    r[`${l}${s}`] = { ...r[l] }, r[`${l}${s}`].pseudoSuffix = s;
-  }), Z.forEach((l) => {
-    z[`${l}${s}`] = { ...z[l], key: `${z[l].key}${s}` }, z[`${l}${s}`].pseudoSuffix = s;
+const J = Object.keys(w);
+Y.forEach((u) => {
+  J.forEach((r) => {
+    w[`${r}${u}`] = { ...w[r] }, w[`${r}${u}`].pseudoSuffix = u;
   });
 });
-class K {
+class Q {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(l) {
-    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
+  getIdentity(r) {
+    return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
-  getByIndex(l) {
-    const { first: c, next: v } = ee, a = l - c.length;
+  getByIndex(r) {
+    const { first: m, next: n } = Z, a = r - m.length;
     if (a < 0)
-      return c[l];
-    const d = Math.floor(a / v.length), n = a - d * v.length;
-    return this.getByIndex(d) + v[n];
+      return m[r];
+    const b = Math.floor(a / n.length), V = a - b * n.length;
+    return this.getByIndex(b) + n[V];
   }
 }
-const ee = {
+const Z = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var F;
-((s) => {
-  s.boxClassName = "_box", s.svgClassName = "_svg", s.cronoStylesElementId = "crono-styles";
-  const l = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
+var A;
+((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;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${s.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${s.svgClassName}{transition: all var(--svgTransitionTime);}.${s.svgClassName} path,.${s.svgClassName} circle,.${s.svgClassName} rect,.${s.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, c = new K(), v = Object.keys(r);
-  let a = !0, d = v.reduce(
-    (o, u) => (o[u] = /* @__PURE__ */ new Set(), o),
+.${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),
     {}
   );
-  function n(o, u) {
-    if (o in r)
-      return p(o, u);
-    if (o in S)
-      return S[o].className;
+  function V(l, s) {
+    if (l in w)
+      return d(l, s);
+    if (l in z)
+      return z[l].className;
   }
-  s.get = n;
-  function f() {
+  u.get = V;
+  function $() {
     if (a) {
-      let o = y([l]);
-      o = y(o, "H"), o = y(o, "F"), o = y(o, "A"), o = y(o, "C");
-      const u = h();
-      u.innerHTML = o.join(""), a = !1;
+      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 = h();
+      s.innerHTML = l.join(""), a = !1;
     }
   }
-  s.flush = f;
-  function g() {
-    d = v.reduce(
-      (o, u) => (o[u] = /* @__PURE__ */ new Set(), o),
+  u.flush = $;
+  function v() {
+    b = n.reduce(
+      (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
       {}
     );
   }
-  s.clear = g;
-  function p(o, u) {
-    var V;
-    d[o].has(u) || (a = !0, d[o].add(u));
-    const t = k(o, u), N = ((V = t.formatClassName) == null ? void 0 : V.call(t, o, u)) ?? `${o}${u}`;
-    return c.getIdentity(N);
+  u.clear = v;
+  function d(l, s) {
+    var y;
+    b[l].has(s) || (a = !0, b[l].add(s));
+    const t = p(l, s), N = ((y = t.formatClassName) == null ? void 0 : y.call(t, l, s)) ?? `${l}${s}`;
+    return m.getIdentity(N);
   }
-  function y(o, u) {
-    return Object.entries(d).filter(([N]) => {
-      var V;
-      return ((V = r[N]) == null ? void 0 : V.pseudoSuffix) === u;
-    }).reduce((N, [V, b]) => (b.forEach((w) => {
+  function c(l, s) {
+    return Object.entries(b).filter(([N]) => {
+      var y;
+      return ((y = w[N]) == null ? void 0 : y.pseudoSuffix) === s;
+    }).reduce((N, [y, I]) => (I.forEach((k) => {
       var E;
-      const x = k(V, w), C = `.${p(V, w)}`;
-      let T = [];
-      u ? u === "H" ? T = [
-        ...t(`${C}:hover`, x),
-        ...t(`.${S.hover.className}:hover>${C}`, x)
-      ] : u === "F" ? T = [
-        ...t(`${C}:focus-within`, x),
-        ...t(`.${S.focus.className}:focus-within>${C}`, x)
-      ] : u === "A" ? T = t(`${C}:active`, x) : u === "C" && (T = t(`${C}:checked`, x)) : T = t(C, x);
-      const G = ((E = x.formatValue) == null ? void 0 : E.call(x, V, w)) ?? w, M = r[V].cssNames.map((q) => `${q}:${G};`).join("");
-      N.push(`${T.join(",")}{${M}}`);
-    }), N), o);
-    function t(N, V) {
-      return V.formatSelector ? V.formatSelector(N) : [N];
+      const o = p(y, k), g = `.${d(y, k)}`;
+      let x = [];
+      s ? s === "H" ? x = [
+        ...t(`${g}:hover`, o),
+        ...t(`.${z.hover.className}:hover>${g}`, o)
+      ] : s === "F" ? x = [
+        ...t(`${g}:focus-within`, o),
+        ...t(`.${z.focus.className}:focus-within>${g}`, o)
+      ] : s === "A" ? x = t(`${g}:active`, o) : s === "Checked" ? x = t(`${g}:checked`, o) : s === "Indeterminate" ? x = t(`${g}:indeterminate`, o) : s === "Valid" ? x = t(`${g}:valid`, o) : s === "Invalid" ? x = t(`${g}:invalid`, o) : s === "Required" ? x = t(`${g}:required`, o) : s === "Optional" ? x = t(`${g}:optional`, o) : s === "Disabled" && (x = t(`${g}:disabled`, o)) : x = t(g, o);
+      const q = ((E = o.formatValue) == null ? void 0 : E.call(o, y, k)) ?? k, L = w[y].cssNames.map((W) => `${W}:${q};`).join("");
+      N.push(`${x.join(",")}{${L}}`);
+    }), N), l);
+    function t(N, y) {
+      return y.formatSelector ? y.formatSelector(N) : [N];
     }
   }
-  function k(o, u) {
-    const t = r[o];
-    return t.isThemeStyle ? t : t.values1.values.includes(u) ? t.values1 : t.values2.values.includes(u) ? t.values2 : t.values3;
+  function p(l, s) {
+    const t = w[l];
+    return t.isThemeStyle ? t : t.values1.values.includes(s) ? t.values1 : t.values2.values.includes(s) ? t.values2 : t.values3;
   }
   function h() {
-    const u = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let t = u.getElementById(s.cronoStylesElementId);
-    return t || (t = u.createElement("style"), t.setAttribute("id", s.cronoStylesElementId), t.setAttribute("type", "text/css"), u.head.insertBefore(t, u.head.firstChild)), t;
+    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;
   }
-})(F || (F = {}));
-const A = F, j = {
+})(A || (A = {}));
+const S = A, T = {
   button: {
     styles: {
       display: "inline-block",
@@ -998,10 +986,10 @@ const A = F, j = {
       cursor: "pointer",
       b: 1,
       borderRadius: 1,
-      userSelect: "none"
-    },
-    disabled: {
-      cursor: "default"
+      userSelect: "none",
+      disabled: {
+        cursor: "default"
+      }
     }
   },
   checkbox: {
@@ -1033,158 +1021,126 @@ const A = F, j = {
   }
 };
 var O;
-((s) => {
-  s.Styles = j;
-  function l(n) {
-    a(n), s.Styles = n, v();
+((u) => {
+  function r(v) {
+    b(v), $(v), u.Styles = v, a();
   }
-  s.setup = l;
-  function c(n, f) {
-    const g = Object.entries(n.colors).map(([b, w]) => `--color${b}: ${w};`).join(`
-  `), p = Object.entries(n.shadows).map(([b, w]) => `--shadow${b}: ${w};`).join(`
-  `), y = Object.entries(n.backgrounds).map(([b, w]) => `--background${b}: ${w};`).join(`
-  `), k = Object.entries(n.backgroundImages).map(([b, w]) => `--backgroundImage${b}: ${w};`).join(`
-  `), h = [":root {"];
-    g && h.push(`  ${g}`), p && h.push(`  ${p}`), y && h.push(`  ${y}`), k && h.push(`  ${k}`), h.push("}");
-    const o = Object.keys(n.colors).map((b) => `'${b}'`).join(" | "), u = Object.keys(n.backgrounds).map((b) => `'${b}'`).join(" | "), t = Object.keys(n.backgroundImages).map((b) => `'${b}'`).join(" | "), N = Object.keys(n.shadows).map((b) => `'${b}'`).join(" | "), V = `import '@cronocode/react-box';
+  u.setup = r;
+  function m(v, d) {
+    const c = Object.entries(v.colors).map(([o, g]) => `--color${o}: ${g};`).join(`
+  `), p = Object.entries(v.shadows).map(([o, g]) => `--shadow${o}: ${g};`).join(`
+  `), h = Object.entries(v.backgrounds).map(([o, g]) => `--background${o}: ${g};`).join(`
+  `), l = Object.entries(v.backgroundImages).map(([o, g]) => `--backgroundImage${o}: ${g};`).join(`
+  `), s = [":root {"];
+    c && s.push(`  ${c}`), p && s.push(`  ${p}`), h && s.push(`  ${h}`), l && s.push(`  ${l}`), s.push("}");
+    const t = Object.keys(v.colors).map((o) => `'${o}'`).join(" | "), N = Object.keys(v.backgrounds).map((o) => `'${o}'`).join(" | "), y = Object.keys(v.backgroundImages).map((o) => `'${o}'`).join(" | "), I = Object.keys(v.shadows).map((o) => `'${o}'`).join(" | "), k = `import '@cronocode/react-box';
   
-  declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${o};
-    type BackgroundType = ${u};
-    type BackgroundImageType = ${t};
-    type ShadowType = ${N};
+  declare module '${(d == null ? void 0 : d.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${t};
+    type BackgroundType = ${N};
+    type BackgroundImageType = ${y};
+    type ShadowType = ${I};
   
     namespace Augmented {
       interface BoxProps {
-        color?: ColorType;
-        colorH?: ColorType;
-        colorF?: ColorType;
-        colorA?: ColorType;
-        colorC?: ColorType;
-        bgColor?: ColorType;
-        bgColorH?: ColorType;
-        bgColorF?: ColorType;
-        bgColorA?: ColorType;
-        bgColorC?: ColorType;
-        borderColor?: ColorType;
-        borderColorH?: ColorType;
-        borderColorF?: ColorType;
-        borderColorA?: ColorType;
-        borderColorC?: ColorType;
-        outlineColor?: ColorType;
-        outlineColorH?: ColorType;
-        outlineColorF?: ColorType;
-        outlineColorA?: ColorType;
-        outlineColorC?: ColorType;
-        background?: BackgroundType;
-        backgroundH?: BackgroundType;
-        backgroundF?: BackgroundType;
-        backgroundA?: BackgroundType;
-        backgroundC?: BackgroundType;
-        backgroundImage?: BackgroundImageType;
-        backgroundImageH?: BackgroundImageType;
-        backgroundImageF?: BackgroundImageType;
-        backgroundImageA?: BackgroundImageType;
-        backgroundImageC?: BackgroundImageType;
-        shadow?: ShadowType;
-        shadowH?: ShadowType;
-        shadowF?: ShadowType;
-        shadowF?: ShadowType;
-        shadowA?: ShadowType;
-        shadowC?: ShadowType;
+${n("color", "ColorType")}
+${n("bgColor", "ColorType")}
+${n("borderColor", "ColorType")}
+${n("outlineColor", "ColorType")}
+${n("background", "BackgroundType")}
+${n("backgroundImage", "BackgroundImageType")}
+${n("shadow", "ShadowType")}
       }
   
       interface SvgProps {
-        fill?: ColorType;
-        fillH?: ColorType;
-        fillF?: ColorType;
-        fillA?: ColorType;
-        fillC?: ColorType;
-        stroke?: ColorType;
-        strokeH?: ColorType;
-        strokeF?: ColorType;
-        strokeA?: ColorType;
-        strokeC?: ColorType;
+${n("fill", "ColorType")}
+${n("stroke", "ColorType")}
       }
     }
   }
   `;
     return {
-      variables: h.join(`
+      variables: s.join(`
 `),
-      boxDts: V
+      boxDts: k
     };
   }
-  s.setupAugmentedProps = c;
-  function v() {
-    a(j), Object.keys(j).forEach((f) => {
-      const g = s.Styles[f], p = j[f];
-      g ? (g.styles = { ...p.styles, ...g.styles }, g.disabled && p.disabled && (g.disabled = { ...p.disabled, ...g.disabled })) : s.Styles[f] = j[f];
+  u.setupAugmentedProps = m;
+  function n(v, d) {
+    const c = X.map((p) => `        ${v}${p}?: ${d};`);
+    return c.unshift(`        ${v}?: ${d};`), c.join(`
+`);
+  }
+  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 a(n) {
-    if (!n.components)
+  function b(v) {
+    if (!v.components)
       return;
-    const f = Object.keys(n.components);
-    for (const g of f) {
-      const p = n.components[g], y = d(g, p);
+    const d = Object.keys(v.components);
+    for (const c of d) {
+      const p = v.components[c], h = V(c, p);
       delete p.children;
-      for (const k of y) {
-        const [h, o] = k;
-        n.components[h] = o;
+      for (const l of h) {
+        const [s, t] = l;
+        v.components[s] = t;
       }
     }
   }
-  function d(n, f) {
-    if (!f.children)
+  function V(v, d) {
+    if (!d.children)
       return [];
-    const g = Object.keys(f.children), p = [];
-    for (const y of g) {
-      const k = `${n}.${y}`, h = f.children[y], o = d(k, h);
-      p.push(...o), delete h.children, p.push([k, h]);
+    const c = Object.keys(d.children), p = [];
+    for (const h of c) {
+      const l = `${v}.${h}`, s = d.children[h], t = V(l, s);
+      p.push(...t), delete s.children, p.push([l, s]);
     }
     return p;
   }
+  function $(v) {
+    const { components: d, ...c } = v, p = Object.values(c);
+    d && p.push(...Object.values(d));
+    for (const h of p)
+      "disabled" in h.styles && (Object.entries(h.styles.disabled).map(([l, s]) => {
+        h.styles[`${l}Disabled`] = s;
+      }), delete h.styles.disabled);
+  }
 })(O || (O = {}));
-const P = O;
-function ae(s) {
-  const { clean: l, disabled: c, theme: v, component: a } = s;
-  return W(() => {
-    var f, g, p;
-    if (l)
+const D = O;
+function K(u) {
+  const { clean: r, theme: m, component: n } = u;
+  return P(() => {
+    var b, V;
+    if (r)
       return;
-    let d = P.Styles[a] ?? ((f = P.Styles.components) == null ? void 0 : f[a]);
-    if (!d)
-      return;
-    let n = v ? { ...d.styles, ...(g = d.themes) == null ? void 0 : g[v].styles } : d.styles;
-    return c ? v ? { ...n, ...d.disabled, ...(p = d.themes) == null ? void 0 : p[v].disabled } : { ...n, ...d.disabled } : n;
-  }, [a, l, c, v]);
-}
-const se = typeof window < "u" && typeof window.document < "u", le = se ? U : X;
-function te(s, l) {
-  const c = ae(s);
-  return le(A.flush, [s]), W(() => {
-    const v = [l ? A.svgClassName : A.boxClassName], a = c ? { ...B(c), ...B(s) } : B(s);
-    return "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(([d, n]) => {
-      v.push(A.get(d, n));
-    }), v;
-  }, [s, c]);
+    let a = D.Styles[n] ?? ((b = D.Styles.components) == null ? void 0 : b[n]);
+    if (a)
+      return m ? { ...a.styles, ...(V = a.themes) == null ? void 0 : V[m].styles } : a.styles;
+  }, [n, r, m]);
 }
-function B(s) {
-  const l = { ...s };
-  return Object.keys(l).forEach((v) => {
-    const a = z[v];
-    a && (a.key in l || (l[a.key] = l[v]), delete l[v]);
-  }), l;
+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, V]) => {
+      a[`${b}Disabled`] = V;
+    }), 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, V]) => {
+      n.push(S.get(b, V));
+    }), n;
+  }, [u, m]);
 }
-function ue(...s) {
-  return s.reduce((l, c) => c ? typeof c == "string" ? (l.push(c), l) : Array.isArray(c) ? (l.push(...ue(...c)), l) : (Object.entries(c).forEach(([v, a]) => {
-    a && l.push(v);
-  }), l) : l, []);
+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);
+  }), r) : r, []);
 }
 export {
-  A as S,
-  P as T,
-  ue as c,
+  S,
+  D as T,
+  ae as c,
   te as u
 };