@cronocode/react-box 1.7.9 → 1.8.1

package/core.mjs

@@ -1,71 +1,71 @@
-import { useMemo as P, useLayoutEffect as U, useEffect as X } from "react";
+import { useMemo as q, useLayoutEffect as U, useEffect as X } from "react";
 var e;
-((a) => {
-  ((l) => {
-    function c(s, d) {
-      return `${s}${d.replace("/", "-")}`;
+((u) => {
+  ((t) => {
+    function d(a, p) {
+      return `${a}${p.replace("/", "-")}`;
     }
-    l.fraction = c;
-    function v(s) {
-      return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
+    t.fraction = d;
+    function i(a) {
+      return [`${a} path`, `${a} circle`, `${a} rect`, `${a} line`];
     }
-    l.svg = v;
-  })(a.ClassName || (a.ClassName = {})), ((l) => {
-    function c(t, u) {
-      return `${u / 4}rem`;
+    t.svg = i;
+  })(u.ClassName || (u.ClassName = {})), ((t) => {
+    function d(l, s) {
+      return `${s / 4}rem`;
     }
-    l.rem = c;
-    function v(t, u) {
-      return `${u}px`;
+    t.rem = d;
+    function i(l, s) {
+      return `${s}px`;
     }
-    l.px = v;
-    function s(t, u) {
-      const [r, f] = u.split("/");
-      return `${+r / +f * 100}%`;
+    t.px = i;
+    function a(l, s) {
+      const [r, w] = s.split("/");
+      return `${+r / +w * 100}%`;
     }
-    l.fraction = s;
-    function d(t, u) {
-      switch (u) {
+    t.fraction = a;
+    function p(l, s) {
+      switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return t.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return u;
+          return s;
       }
     }
-    l.widthHeight = d;
-    function n(t) {
-      return (u, r) => `var(--${t}${r});`;
+    t.widthHeight = p;
+    function y(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
-    l.variables = n;
-    function p(t) {
-      return (u, r) => `var(--${t}${r});`;
+    t.variables = y;
+    function $(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
-    l.svgVariables = p;
-    function g(t, u) {
-      return `repeat(${u},minmax(0,1fr))`;
+    t.svgVariables = $;
+    function c(l, s) {
+      return `repeat(${s},minmax(0,1fr))`;
     }
-    l.gridColumns = g;
-    function b(t, u) {
-      return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
+    t.gridColumns = c;
+    function f(l, s) {
+      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
-    l.gridColumn = b;
-    function V(t, u) {
-      return `${u}ms`;
+    t.gridColumn = f;
+    function m(l, s) {
+      return `${s}ms`;
     }
-    l.ms = V;
-    function y(t, u) {
-      return `${u}deg`;
+    t.ms = m;
+    function b(l, s) {
+      return `${s}deg`;
     }
-    l.rotate = y;
-    function N(t, u) {
-      return u === "xAxis" ? "-1 1" : "1 -1";
+    t.rotate = b;
+    function V(l, s) {
+      return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    l.flip = N;
-  })(a.Value || (a.Value = {}));
+    t.flip = V;
+  })(u.Value || (u.Value = {}));
 })(e || (e = {}));
-const i = [
+const v = [
   0,
   1,
   2,
@@ -163,7 +163,7 @@ const i = [
   -92,
   -96,
   -100
-], m = [...i, ...Y], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], k = [
+], g = [...v, ...Y], L = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], C = [
   "1/2",
   "1/3",
   "2/3",
@@ -190,7 +190,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], C = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], I = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
+], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["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 i = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: j, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: k,
+      values: C,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -280,217 +280,217 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: g, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   border: {
     cssNames: ["border-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: g, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: R },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -573,7 +573,7 @@ const i = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -591,13 +591,13 @@ const i = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -686,91 +686,91 @@ const i = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: I },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: I },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: i, formatValue: e.Value.gridColumns },
+    values1: { values: v, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: i, formatValue: e.Value.gridColumn },
+    values1: { values: v, formatValue: e.Value.gridColumn },
     values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: i },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: R },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -831,14 +831,15 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, L = {
+}, D = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
+  backgroundImage: { cssNames: ["background-image"], formatValue: e.Value.variables("backgroundImage") },
   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") }
-}, _ = {
+}, P = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -849,15 +850,26 @@ const i = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, J = ["H", "F", "A"], S = {
+}, J = ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional"], Q = [
+  "H",
+  "F",
+  "A",
+  "Checked",
+  "Indeterminate",
+  "Valid",
+  "Invalid",
+  "Required",
+  "Optional",
+  "Disabled"
+], H = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(L).forEach((a) => {
-  o[a] = L[a], o[a].isThemeStyle = !0;
+Object.keys(D).forEach((u) => {
+  o[u] = D[u], o[u].isThemeStyle = !0;
 });
-Object.keys(_).forEach((a) => {
-  o[a] = _[a], o[a].isThemeStyle = !0;
+Object.keys(P).forEach((u) => {
+  o[u] = P[u], o[u].isThemeStyle = !0;
 });
 const T = {
   w: { ...o.width, key: "width" },
@@ -887,126 +899,125 @@ const T = {
   ai: { ...o.alignItems, key: "alignItems" },
   ac: { ...o.alignContent, key: "alignContent" },
   d: { ...o.flexDirection, key: "flexDirection" }
-}, 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;
+}, Z = Object.keys(o), K = Object.keys(T);
+Q.forEach((u) => {
+  Z.forEach((t) => {
+    o[`${t}${u}`] = { ...o[t] }, o[`${t}${u}`].pseudoSuffix = u;
+  }), K.forEach((t) => {
+    T[`${t}${u}`] = { ...T[t], key: `${T[t].key}${u}` }, T[`${t}${u}`].pseudoSuffix = u;
   });
 });
-class K {
+class ee {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(l) {
-    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
+  getIdentity(t) {
+    return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
-  getByIndex(l) {
-    const { first: c, next: v } = ee, s = l - c.length;
-    if (s < 0)
-      return c[l];
-    const d = Math.floor(s / v.length), n = s - d * v.length;
-    return this.getByIndex(d) + v[n];
+  getByIndex(t) {
+    const { first: d, next: i } = se, a = t - d.length;
+    if (a < 0)
+      return d[t];
+    const p = Math.floor(a / i.length), y = a - p * i.length;
+    return this.getByIndex(p) + i[y];
   }
 }
-const ee = {
+const se = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-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;}}
+var B;
+((u) => {
+  u.boxClassName = "_box", u.svgClassName = "_svg", u.cronoStylesElementId = "crono-styles";
+  const t = `: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;}
-.${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),
+.${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);}
+`, d = new ee(), i = Object.keys(o);
+  let a = !0, p = i.reduce(
+    (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
     {}
   );
-  function n(t, u) {
-    if (t in o)
-      return b(t, u);
-    if (t in S)
-      return S[t].className;
+  function y(l, s) {
+    if (l in o)
+      return f(l, s);
+    if (l in H)
+      return H[l].className;
   }
-  a.get = n;
-  function p() {
-    if (s) {
-      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;
+  u.get = y;
+  function $() {
+    if (a) {
+      let l = m([t]);
+      l = m(l, "H"), l = m(l, "F"), l = m(l, "A"), l = m(l, "Checked"), l = m(l, "Indeterminate"), l = m(l, "Valid"), l = m(l, "Invalid"), l = m(l, "Required"), l = m(l, "Disabled");
+      const s = V();
+      s.innerHTML = l.join(""), a = !1;
     }
   }
-  a.flush = p;
-  function g() {
-    d = v.reduce(
-      (t, u) => (t[u] = /* @__PURE__ */ new Set(), t),
+  u.flush = $;
+  function c() {
+    p = i.reduce(
+      (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
       {}
     );
   }
-  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);
+  u.clear = c;
+  function f(l, s) {
+    var N;
+    p[l].has(s) || (a = !0, p[l].add(s));
+    const r = b(l, s), w = ((N = r.formatClassName) == null ? void 0 : N.call(r, l, s)) ?? `${l}${s}`;
+    return d.getIdentity(w);
   }
-  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 m(l, s) {
+    return Object.entries(p).filter(([w]) => {
+      var N;
+      return ((N = o[w]) == null ? void 0 : N.pseudoSuffix) === s;
+    }).reduce((w, [N, O]) => (O.forEach((x) => {
+      var R;
+      const n = b(N, x), h = `.${f(N, x)}`;
+      let k = [];
+      s ? s === "H" ? k = [
+        ...r(`${h}:hover`, n),
+        ...r(`.${H.hover.className}:hover>${h}`, n)
+      ] : s === "F" ? k = [
+        ...r(`${h}:focus-within`, n),
+        ...r(`.${H.focus.className}:focus-within>${h}`, n)
+      ] : s === "A" ? k = r(`${h}:active`, n) : s === "Checked" ? k = r(`${h}:checked`, n) : s === "Indeterminate" ? k = r(`${h}:indeterminate`, n) : s === "Valid" ? k = r(`${h}:valid`, n) : s === "Invalid" ? k = r(`${h}:invalid`, n) : s === "Required" ? k = r(`${h}:required`, n) : s === "Optional" ? k = r(`${h}:optional`, n) : s === "Disabled" && (k = r(`${h}:disabled`, n)) : k = r(h, n);
+      const W = ((R = n.formatValue) == null ? void 0 : R.call(n, N, x)) ?? x, G = o[N].cssNames.map((M) => `${M}:${W};`).join("");
+      w.push(`${k.join(",")}{${G}}`);
+    }), w), l);
+    function r(w, N) {
+      return N.formatSelector ? N.formatSelector(w) : [w];
     }
   }
-  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 b(l, s) {
+    const r = o[l];
+    return r.isThemeStyle ? r : r.values1.values.includes(s) ? r.values1 : r.values2.values.includes(s) ? r.values2 : r.values3;
   }
-  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;
+  function V() {
+    const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let r = s.getElementById(u.cronoStylesElementId);
+    return r || (r = s.createElement("style"), r.setAttribute("id", u.cronoStylesElementId), r.setAttribute("type", "text/css"), s.head.insertBefore(r, s.head.firstChild)), r;
   }
-})(E || (E = {}));
-const j = E, H = {
+})(B || (B = {}));
+const I = B, z = {
   button: {
     styles: {
       display: "inline-block",
       p: 3,
       cursor: "pointer",
       b: 1,
-      borderRadius: 1
-    },
-    disabled: {
-      cursor: "default"
+      borderRadius: 1,
+      userSelect: "none",
+      disabled: {
+        cursor: "default"
+      }
     }
   },
   checkbox: {
     styles: {
-      display: "inline-block",
-      b: 1,
-      p: 2
+      display: "inline-block"
     }
   },
   radioButton: {
@@ -1032,143 +1043,134 @@ const j = E, H = {
     }
   }
 };
-var F;
-((a) => {
-  a.Styles = H;
-  function l(n) {
-    s(n), a.Styles = n, v();
+var E;
+((u) => {
+  function t(c) {
+    p(c), $(c), u.Styles = c, a();
   }
-  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';
+  u.setup = t;
+  function d(c, f) {
+    const m = Object.entries(c.colors).map(([n, h]) => `--color${n}: ${h};`).join(`
+  `), b = Object.entries(c.shadows).map(([n, h]) => `--shadow${n}: ${h};`).join(`
+  `), V = Object.entries(c.backgrounds).map(([n, h]) => `--background${n}: ${h};`).join(`
+  `), l = Object.entries(c.backgroundImages).map(([n, h]) => `--backgroundImage${n}: ${h};`).join(`
+  `), s = [":root {"];
+    m && s.push(`  ${m}`), b && s.push(`  ${b}`), V && s.push(`  ${V}`), l && s.push(`  ${l}`), s.push("}");
+    const r = Object.keys(c.colors).map((n) => `'${n}'`).join(" | "), w = Object.keys(c.backgrounds).map((n) => `'${n}'`).join(" | "), N = Object.keys(c.backgroundImages).map((n) => `'${n}'`).join(" | "), O = Object.keys(c.shadows).map((n) => `'${n}'`).join(" | "), x = `import '@cronocode/react-box';
   
-  declare module '${(p == null ? void 0 : p.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${N};
-    type BackgroundType = ${t};
-    type ShadowType = ${u};
+  declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${r};
+    type BackgroundType = ${w};
+    type BackgroundImageType = ${N};
+    type ShadowType = ${O};
   
     namespace Augmented {
       interface BoxProps {
-        color?: ColorType;
-        colorH?: ColorType;
-        colorF?: ColorType;
-        colorA?: ColorType;
-        bgColor?: ColorType;
-        bgColorH?: ColorType;
-        bgColorF?: ColorType;
-        bgColorA?: ColorType;
-        borderColor?: ColorType;
-        borderColorH?: ColorType;
-        borderColorF?: ColorType;
-        borderColorA?: ColorType;
-        outlineColor?: ColorType;
-        outlineColorH?: ColorType;
-        outlineColorF?: ColorType;
-        outlineColorA?: ColorType;
-        background?: BackgroundType;
-        backgroundH?: BackgroundType;
-        backgroundF?: BackgroundType;
-        backgroundA?: BackgroundType;
-        shadow?: ShadowType;
-        shadowH?: ShadowType;
-        shadowF?: ShadowType;
-        shadowA?: ShadowType;
+${i("color", "ColorType")}
+${i("bgColor", "ColorType")}
+${i("borderColor", "ColorType")}
+${i("outlineColor", "ColorType")}
+${i("background", "BackgroundType")}
+${i("backgroundImage", "BackgroundImageType")}
+${i("shadow", "ShadowType")}
       }
   
       interface SvgProps {
-        fill?: ColorType;
-        fillH?: ColorType;
-        fillF?: ColorType;
-        fillA?: ColorType;
-        stroke?: ColorType;
-        strokeH?: ColorType;
-        strokeF?: ColorType;
-        strokeA?: ColorType;
+${i("fill", "ColorType")}
+${i("stroke", "ColorType")}
       }
     }
   }
   `;
     return {
-      variables: y.join(`
+      variables: s.join(`
 `),
-      boxDts: r
+      boxDts: x
     };
   }
-  a.setupAugmentedProps = c;
-  function v() {
-    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];
+  u.setupAugmentedProps = d;
+  function i(c, f) {
+    const m = J.map((b) => `        ${c}${b}?: ${f};`);
+    return m.unshift(`        ${c}?: ${f};`), m.join(`
+`);
+  }
+  function a() {
+    p(z), $(z), Object.keys(z).forEach((f) => {
+      const m = u.Styles[f], b = z[f];
+      m ? m.styles = { ...b.styles, ...m.styles } : u.Styles[f] = z[f];
     });
   }
-  function s(n) {
-    if (!n.components)
+  function p(c) {
+    if (!c.components)
       return;
-    const p = Object.keys(n.components);
-    for (const g of p) {
-      const b = n.components[g], V = d(g, b);
+    const f = Object.keys(c.components);
+    for (const m of f) {
+      const b = c.components[m], V = y(m, b);
       delete b.children;
-      for (const y of V) {
-        const [N, t] = y;
-        n.components[N] = t;
+      for (const l of V) {
+        const [s, r] = l;
+        c.components[s] = r;
       }
     }
   }
-  function d(n, p) {
-    if (!p.children)
+  function y(c, f) {
+    if (!f.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]);
+    const m = Object.keys(f.children), b = [];
+    for (const V of m) {
+      const l = `${c}.${V}`, s = f.children[V], r = y(l, s);
+      b.push(...r), delete s.children, b.push([l, s]);
     }
     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 d = D.Styles[s] ?? ((p = D.Styles.components) == null ? void 0 : p[s]);
-    if (!d)
+  function $(c) {
+    const { components: f, ...m } = c, b = Object.values(m);
+    f && b.push(...Object.values(f));
+    for (const V of b)
+      "disabled" in V.styles && (Object.entries(V.styles.disabled).map(([l, s]) => {
+        V.styles[`${l}Disabled`] = s;
+      }), delete V.styles.disabled);
+  }
+})(E || (E = {}));
+const _ = E;
+function ae(u) {
+  const { clean: t, theme: d, component: i } = u;
+  return q(() => {
+    var p, y;
+    if (t)
       return;
-    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]);
+    let a = _.Styles[i] ?? ((p = _.Styles.components) == null ? void 0 : p[i]);
+    if (a)
+      return d ? { ...a.styles, ...(y = a.themes) == null ? void 0 : y[d].styles } : a.styles;
+  }, [i, t, d]);
 }
-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;
-  }, [a, c]);
+const le = typeof window < "u" && typeof window.document < "u", ue = le ? U : X;
+function ie(u, t) {
+  const d = ae(u);
+  return ue(I.flush, [u]), q(() => {
+    const i = [t ? I.svgClassName : I.boxClassName], a = d ? { ...S(d), ...S(u) } : S(u);
+    return Array.isArray(a.disabled) && (Object.entries(a.disabled[1]).forEach(([p, y]) => {
+      a[`${p}Disabled`] = y;
+    }), delete a.disabled), "inline" in a && (a.display === "block" || !a.display ? a.display = "inline-block" : a.display === "flex" ? a.display = "inline-flex" : a.display === "grid" && (a.display = "inline-grid"), delete a.inline), "inlineH" in a && (a.displayH === "block" || !a.displayH ? a.displayH = "inline-block" : a.displayH === "flex" ? a.displayH = "inline-flex" : a.displayH === "grid" && (a.displayH = "inline-grid"), delete a.inlineH), "inlineF" in a && (a.displayF === "block" || !a.displayF ? a.displayF = "inline-block" : a.displayF === "flex" ? a.displayF = "inline-flex" : a.displayF === "grid" && (a.displayF = "inline-grid"), delete a.inlineF), "inlineA" in a && (a.displayA === "block" || !a.displayA ? a.displayA = "inline-block" : a.displayA === "flex" ? a.displayA = "inline-flex" : a.displayA === "grid" && (a.displayA = "inline-grid"), delete a.inlineA), Object.entries(a).forEach(([p, y]) => {
+      i.push(I.get(p, y));
+    }), i;
+  }, [u, d]);
 }
-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 S(u) {
+  const t = { ...u };
+  return Object.keys(t).forEach((i) => {
+    const a = T[i];
+    a && (a.key in t || (t[a.key] = t[i]), delete t[i]);
+  }), t;
 }
-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, []);
+function te(...u) {
+  return u.reduce((t, d) => d ? typeof d == "string" ? (t.push(d), t) : Array.isArray(d) ? (t.push(...te(...d)), t) : (Object.entries(d).forEach(([i, a]) => {
+    a && t.push(i);
+  }), t) : t, []);
 }
 export {
-  j as S,
-  D as T,
-  ue as c,
-  re as u
+  I as S,
+  _ as T,
+  te as c,
+  ie as u
 };