@cronocode/react-box 1.8.4 → 1.8.6

package/core.mjs

@@ -1,71 +1,72 @@
-import { useMemo as P, useLayoutEffect as G, useEffect as M } from "react";
-var e;
-((t) => {
-  ((r) => {
-    function m(l, b) {
-      return `${l}${b.replace("/", "-")}`;
+import { useMemo as X, useLayoutEffect as Q, useEffect as Z } from "react";
+import { O as ee } from "./utils.mjs";
+var s;
+((l) => {
+  ((u) => {
+    function i(r, f) {
+      return `${r}${f.replace("/", "-")}`;
     }
-    r.fraction = m;
-    function v(l) {
-      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
+    u.fraction = i;
+    function c(r) {
+      return [`${r} path`, `${r} circle`, `${r} rect`, `${r} line`];
     }
-    r.svg = v;
-  })(t.ClassName || (t.ClassName = {})), ((r) => {
-    function m(s, a) {
+    u.svg = c;
+  })(l.ClassName || (l.ClassName = {})), ((u) => {
+    function i(e, a) {
       return `${a / 4}rem`;
     }
-    r.rem = m;
-    function v(s, a) {
+    u.rem = i;
+    function c(e, a) {
       return `${a}px`;
     }
-    r.px = v;
-    function l(s, a) {
-      const [u, p] = a.split("/");
-      return `${+u / +p * 100}%`;
+    u.px = c;
+    function r(e, a) {
+      const [t, v] = a.split("/");
+      return `${+t / +v * 100}%`;
     }
-    r.fraction = l;
-    function b(s, a) {
+    u.fraction = r;
+    function f(e, a) {
       switch (a) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return s.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return e.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
           return a;
       }
     }
-    r.widthHeight = b;
-    function N(s) {
-      return (a, u) => `var(--${s}${u});`;
+    u.widthHeight = f;
+    function w(e) {
+      return (a, t) => `var(--${e}${t});`;
     }
-    r.variables = N;
-    function x(s) {
-      return (a, u) => `var(--${s}${u});`;
+    u.variables = w;
+    function T(e) {
+      return (a, t) => `var(--${e}${t});`;
     }
-    r.svgVariables = x;
-    function j(s, a) {
+    u.svgVariables = T;
+    function d(e, a) {
       return `repeat(${a},minmax(0,1fr))`;
     }
-    r.gridColumns = j;
-    function o(s, a) {
+    u.gridColumns = d;
+    function g(e, a) {
       return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    r.gridColumn = o;
-    function n(s, a) {
+    u.gridColumn = g;
+    function o(e, a) {
       return `${a}ms`;
     }
-    r.ms = n;
-    function g(s, a) {
+    u.ms = o;
+    function b(e, a) {
       return `${a}deg`;
     }
-    r.rotate = g;
-    function f(s, a) {
+    u.rotate = b;
+    function h(e, a) {
       return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = f;
-  })(t.Value || (t.Value = {}));
-})(e || (e = {}));
-const i = [
+    u.flip = h;
+  })(l.Value || (l.Value = {}));
+})(s || (s = {}));
+const n = [
   0,
   1,
   2,
@@ -124,7 +125,7 @@ const i = [
   200,
   250,
   300
-], U = [
+], se = [
   -1,
   -2,
   -3,
@@ -170,7 +171,7 @@ const i = [
   -92,
   -96,
   -100
-], d = [...i, ...U], B = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], H = ["auto", "hidden", "scroll", "visible"], k = [
+], m = [...n, ...se], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], B = ["auto", "hidden", "scroll", "visible"], S = [
   "1/2",
   "1/3",
   "2/3",
@@ -197,7 +198,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], C = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], w = {
+], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], x = {
   /** The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
   display: {
     cssNames: ["display"],
@@ -208,7 +209,7 @@ const i = [
   /** The `inline` property is a shortcut to transform `block`, `flex` and `grid` value to `inline-block`, `inline-flex` and `inline-grid` respectively. */
   inline: {
     cssNames: ["display"],
-    values1: { values: [!0] },
+    values1: { values: [!0], formatValue: () => "inline-block" },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -221,61 +222,61 @@ const i = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: C, formatValue: e.Value.widthHeight },
-    values2: { values: i, formatValue: e.Value.rem },
+    values1: { values: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.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: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.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: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.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: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.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: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.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: z, formatValue: s.Value.widthHeight },
+    values2: { values: n, formatValue: s.Value.rem },
     values3: {
-      values: k,
-      formatValue: e.Value.fraction
+      values: S,
+      formatValue: s.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
@@ -287,217 +288,217 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: m, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   b: {
     cssNames: ["border-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: m, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: B },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.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: n, formatValue: s.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: n, formatValue: s.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: n, formatValue: s.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: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -556,19 +557,19 @@ const i = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: H },
+    values1: { values: B },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: H },
+    values1: { values: B },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: H },
+    values1: { values: B },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -580,7 +581,7 @@ const i = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -598,13 +599,13 @@ const i = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -693,91 +694,91 @@ const i = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: i, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: i },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: i },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: i },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: F },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: F },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: i, formatValue: e.Value.gridColumns },
+    values1: { values: n, formatValue: s.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: i, formatValue: e.Value.gridColumn },
-    values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
+    values1: { values: n, formatValue: s.Value.gridColumn },
+    values2: { values: ["full-row"], formatValue: s.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: i },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: i },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: B },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: i, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -791,7 +792,7 @@ const i = [
     cssNames: ["transition-duration"],
     values1: {
       values: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3],
-      formatValue: e.Value.ms
+      formatValue: s.Value.ms
     },
     values2: { values: [] },
     values3: { values: [] }
@@ -828,36 +829,36 @@ const i = [
   },
   rotate: {
     cssNames: ["rotate"],
-    values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: e.Value.rotate },
+    values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: s.Value.rotate },
     values2: { values: [] },
     values3: { values: [] }
   },
   flip: {
     cssNames: ["scale"],
-    values1: { values: ["xAxis", "yAxis"], formatValue: e.Value.flip },
+    values1: { values: ["xAxis", "yAxis"], formatValue: s.Value.flip },
     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") },
-  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") }
-}, _ = {
+}, W = {
+  shadow: { cssNames: ["box-shadow"], formatValue: s.Value.variables("shadow") },
+  background: { cssNames: ["background"], formatValue: s.Value.variables("background") },
+  backgroundImage: { cssNames: ["background-image"], formatValue: s.Value.variables("backgroundImage") },
+  color: { cssNames: ["color"], formatValue: s.Value.variables("color") },
+  bgColor: { cssNames: ["background-color"], formatValue: s.Value.variables("color") },
+  borderColor: { cssNames: ["border-color"], formatValue: s.Value.variables("color") },
+  outlineColor: { cssNames: ["outline-color"], formatValue: s.Value.variables("color") }
+}, M = {
   fill: {
     cssNames: ["fill"],
-    formatValue: e.Value.svgVariables("color"),
-    formatSelector: e.ClassName.svg
+    formatValue: s.Value.svgVariables("color"),
+    formatSelector: s.ClassName.svg
   },
   stroke: {
     cssNames: ["stroke"],
-    formatValue: e.Value.svgVariables("color"),
-    formatSelector: e.ClassName.svg
+    formatValue: s.Value.svgVariables("color"),
+    formatSelector: s.ClassName.svg
   }
-}, X = ["H", "F", "A"], Y = [
+}, ae = [
   "H",
   "F",
   "A",
@@ -868,117 +869,133 @@ const i = [
   "Required",
   "Optional",
   "Disabled"
-], T = {
+], R = ["sm", "md", "lg", "xl", "xxl"], le = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536
+}, E = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(R).forEach((t) => {
-  w[t] = R[t], w[t].isThemeStyle = !0;
+Object.keys(W).forEach((l) => {
+  x[l] = W[l], x[l].isThemeStyle = !0;
 });
-Object.keys(_).forEach((t) => {
-  w[t] = _[t], w[t].isThemeStyle = !0;
+Object.keys(M).forEach((l) => {
+  x[l] = M[l], x[l].isThemeStyle = !0;
 });
-const J = Object.keys(w);
-Y.forEach((t) => {
-  J.forEach((r) => {
-    w[`${r}${t}`] = { ...w[r], pseudoSuffix: t };
+let q = Object.keys(x);
+ae.forEach((l) => {
+  q.forEach((u) => {
+    x[`${u}${l}`] = { ...x[u], pseudoSuffix: l };
   });
 });
-class Q {
+q = Object.keys(x);
+R.forEach((l) => {
+  q.forEach((u) => {
+    x[`${l}${u}`] = { ...x[u], breakpoint: l };
+  });
+});
+class ue {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(r) {
-    return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
+  getIdentity(u) {
+    return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
   }
-  getByIndex(r) {
-    const { first: m, next: v } = Z, l = r - m.length;
-    if (l < 0)
-      return m[r];
-    const b = Math.floor(l / v.length), N = l - b * v.length;
-    return this.getByIndex(b) + v[N];
+  getByIndex(u) {
+    const { first: i, next: c } = te, r = u - i.length;
+    if (r < 0)
+      return i[u];
+    const f = Math.floor(r / c.length), w = r - f * c.length;
+    return this.getByIndex(f) + c[w];
   }
 }
-const Z = {
+const te = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var A;
-((t) => {
-  t.boxClassName = "_box", t.svgClassName = "_svg", t.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;}}
+var _;
+((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;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${t.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;}
-.${t.svgClassName}{transition: all var(--svgTransitionTime);}.${t.svgClassName} path,.${t.svgClassName} circle,.${t.svgClassName} rect,.${t.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, m = new Q(), v = Object.keys(w);
-  let l = !0, b = v.reduce(
-    (s, a) => (s[a] = /* @__PURE__ */ new Set(), s),
+.${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);}
+`, i = new ue(), c = Object.keys(x);
+  let r = !0, f = c.reduce(
+    (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
     {}
   );
-  function N(s, a) {
-    if (s in w)
-      return o(s, a);
-    if (s in T)
-      return T[s].className;
+  function w(e, a, t) {
+    if (e in x)
+      return g(e, a, t);
+    if (e in E && a)
+      return E[e].className;
   }
-  t.get = N;
-  function x() {
-    if (l) {
-      let s = n([r]);
-      s = n(s, "H"), s = n(s, "F"), s = n(s, "A"), s = n(s, "Checked"), s = n(s, "Indeterminate"), s = n(s, "Valid"), s = n(s, "Invalid"), s = n(s, "Required"), s = n(s, "Disabled");
-      const a = f();
-      a.innerHTML = s.join(""), l = !1;
+  l.get = w;
+  function T() {
+    if (r) {
+      let e = o([u]);
+      e = o(e, "H"), e = o(e, "F"), e = o(e, "A"), e = o(e, "Checked"), e = o(e, "Indeterminate"), e = o(e, "Valid"), e = o(e, "Invalid"), e = o(e, "Required"), e = o(e, "Disabled"), R.forEach((t) => {
+        e.push(`@media(min-width: ${le[t]}px){`), e = o(e, void 0, t), e = o(e, "H", t), e = o(e, "F", t), e = o(e, "A", t), e = o(e, "Checked", t), e = o(e, "Indeterminate", t), e = o(e, "Valid", t), e = o(e, "Invalid", t), e = o(e, "Required", t), e = o(e, "Disabled", t), e.push("}");
+      });
+      const a = h();
+      a.innerHTML = e.join(""), r = !1;
     }
   }
-  t.flush = x;
-  function j() {
-    b = v.reduce(
-      (s, a) => (s[a] = /* @__PURE__ */ new Set(), s),
+  l.flush = T;
+  function d() {
+    f = c.reduce(
+      (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
       {}
     );
   }
-  t.clear = j;
-  function o(s, a) {
-    var y;
-    b[s].has(a) || (l = !0, b[s].add(a));
-    const u = g(s, a), p = ((y = u.formatClassName) == null ? void 0 : y.call(u, s, a)) ?? `${s}${a}`;
-    return m.getIdentity(p);
+  l.clear = d;
+  function g(e, a, t) {
+    const v = (t ?? "") + e;
+    f[v].has(a) || (r = !0, f[v].add(a));
+    const N = `${v}${a}`;
+    return i.getIdentity(N);
   }
-  function n(s, a) {
-    return Object.entries(b).filter(([p]) => {
-      var y;
-      return ((y = w[p]) == null ? void 0 : y.pseudoSuffix) === a;
-    }).reduce((p, [y, I]) => (I.forEach(($) => {
-      var E;
-      const V = g(y, $), c = `.${o(y, $)}`;
-      let h = [];
-      a ? a === "H" ? h = [
-        ...u(`${c}:hover`, V),
-        ...u(`.${T.hover.className}:hover>${c}`, V)
-      ] : a === "F" ? h = [
-        ...u(`${c}:focus-within`, V),
-        ...u(`.${T.focus.className}:focus-within>${c}`, V)
-      ] : a === "A" ? h = u(`${c}:active`, V) : a === "Checked" ? h = u(`${c}:checked`, V) : a === "Indeterminate" ? h = u(`${c}:indeterminate`, V) : a === "Valid" ? h = u(`${c}:valid`, V) : a === "Invalid" ? h = u(`${c}:invalid`, V) : a === "Required" ? h = u(`${c}:required`, V) : a === "Optional" ? h = u(`${c}:optional`, V) : a === "Disabled" && (h = u(`${c}:disabled`, V)) : h = u(c, V);
-      const L = ((E = V.formatValue) == null ? void 0 : E.call(V, y, $)) ?? $, q = w[y].cssNames.map((W) => `${W}:${L};`).join("");
-      p.push(`${h.join(",")}{${q}}`);
-    }), p), s);
-    function u(p, y) {
-      return y.formatSelector ? y.formatSelector(p) : [p];
+  function o(e, a, t) {
+    return Object.entries(f).filter(
+      ([N]) => {
+        var p, C;
+        return ((p = x[N]) == null ? void 0 : p.pseudoSuffix) === a && ((C = x[N]) == null ? void 0 : C.breakpoint) === t;
+      }
+    ).reduce((N, [p, C]) => (C.forEach((O) => {
+      var P;
+      const V = b(p, O), $ = `.${g(p, O)}`;
+      let j = [];
+      a ? a === "H" ? j = [
+        ...v(`${$}:hover`, V),
+        ...v(`.${E.hover.className}:hover>${$}`, V)
+      ] : a === "F" ? j = [
+        ...v(`${$}:focus-within`, V),
+        ...v(`.${E.focus.className}:focus-within>${$}`, V)
+      ] : a === "A" ? j = v(`${$}:active`, V) : a === "Checked" ? j = v(`${$}:checked`, V) : a === "Indeterminate" ? j = v(`${$}:indeterminate`, V) : a === "Valid" ? j = v(`${$}:valid`, V) : a === "Invalid" ? j = v(`${$}:invalid`, V) : a === "Required" ? j = v(`${$}:required`, V) : a === "Optional" ? j = v(`${$}:optional`, V) : a === "Disabled" && (j = v(`${$}:disabled`, V)) : j = v($, V);
+      const y = ((P = V.formatValue) == null ? void 0 : P.call(V, p, O)) ?? O, Y = x[p].cssNames.map((J) => `${J}:${y};`).join("");
+      N.push(`${j.join(",")}{${Y}}`);
+    }), N), e);
+    function v(N, p) {
+      return p.formatSelector ? p.formatSelector(N) : [N];
     }
   }
-  function g(s, a) {
-    const u = w[s];
-    return u.isThemeStyle ? u : u.values1.values.includes(a) ? u.values1 : u.values2.values.includes(a) ? u.values2 : u.values3;
+  function b(e, a) {
+    const t = x[e];
+    return t.isThemeStyle ? t : t.values1.values.includes(a) ? t.values1 : t.values2.values.includes(a) ? t.values2 : t.values3;
   }
-  function f() {
+  function h() {
     const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let u = a.getElementById(t.cronoStylesElementId);
-    return u || (u = a.createElement("style"), u.setAttribute("id", t.cronoStylesElementId), u.setAttribute("type", "text/css"), a.head.insertBefore(u, a.head.firstChild)), u;
+    let t = a.getElementById(l.cronoStylesElementId);
+    return t || (t = a.createElement("style"), t.setAttribute("id", l.cronoStylesElementId), t.setAttribute("type", "text/css"), a.head.insertBefore(t, a.head.firstChild)), t;
   }
-})(A || (A = {}));
-const z = A, S = {
+})(_ || (_ = {}));
+const I = _, H = {
   button: {
     styles: {
       display: "inline-block",
@@ -1019,139 +1036,173 @@ const z = A, S = {
       borderRadius: 1
     }
   }
+}, G = {
+  H: "hover",
+  F: "focus",
+  A: "active",
+  Checked: "checked",
+  Indeterminate: "indeterminate",
+  Valid: "valid",
+  Invalid: "invalid",
+  Required: "required",
+  Optional: "optional",
+  Disabled: "disabled"
 };
-var O;
-((t) => {
-  t.Styles = b(S);
-  function r(o) {
-    t.Styles = l(o);
+var D;
+((l) => {
+  l.Styles = r(H);
+  function u(d) {
+    l.Styles = c(d);
   }
-  t.setup = r;
-  function m(o, n) {
-    const g = Object.entries(o.colors).map(([c, h]) => `--color${c}: ${h};`).join(`
-  `), f = Object.entries(o.shadows).map(([c, h]) => `--shadow${c}: ${h};`).join(`
-  `), s = Object.entries(o.backgrounds).map(([c, h]) => `--background${c}: ${h};`).join(`
-  `), a = Object.entries(o.backgroundImages).map(([c, h]) => `--backgroundImage${c}: ${h};`).join(`
-  `), u = [":root {"];
-    g && u.push(`  ${g}`), f && u.push(`  ${f}`), s && u.push(`  ${s}`), a && u.push(`  ${a}`), u.push("}");
-    const p = Object.keys(o.colors).map((c) => `'${c}'`).join(" | "), y = Object.keys(o.backgrounds).map((c) => `'${c}'`).join(" | "), I = Object.keys(o.backgroundImages).map((c) => `'${c}'`).join(" | "), $ = Object.keys(o.shadows).map((c) => `'${c}'`).join(" | "), V = `import '@cronocode/react-box';
+  l.setup = u;
+  function i(d, g) {
+    const { colors: o = {}, shadows: b = {}, backgrounds: h = {}, backgroundImages: e = {} } = d;
+    o.none = "none", b.none = "none", h.none = "none", e.none = "none";
+    const a = Object.entries(o).map(([y, k]) => `--color${y}: ${k};`).join(`
+  `), t = Object.entries(b).map(([y, k]) => `--shadow${y}: ${k};`).join(`
+  `), v = Object.entries(h).map(([y, k]) => `--background${y}: ${k};`).join(`
+  `), N = Object.entries(e).map(([y, k]) => `--backgroundImage${y}: ${k};`).join(`
+  `), p = [":root {"];
+    a && p.push(`  ${a}`), t && p.push(`  ${t}`), v && p.push(`  ${v}`), N && p.push(`  ${N}`), p.push("}");
+    const C = Object.keys(o).map((y) => `'${y}'`).join(" | "), O = Object.keys(h).map((y) => `'${y}'`).join(" | "), V = Object.keys(e).map((y) => `'${y}'`).join(" | "), $ = Object.keys(b).map((y) => `'${y}'`).join(" | "), j = `import '@cronocode/react-box';
   
-  declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${p};
-    type BackgroundType = ${y};
-    type BackgroundImageType = ${I};
+  declare module '${(g == null ? void 0 : g.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${C};
+    type BackgroundType = ${O};
+    type BackgroundImageType = ${V};
     type ShadowType = ${$};
   
     namespace Augmented {
       interface BoxProps {
-${v("color", "ColorType")}
-${v("bgColor", "ColorType")}
-${v("borderColor", "ColorType")}
-${v("outlineColor", "ColorType")}
-${v("background", "BackgroundType")}
-${v("backgroundImage", "BackgroundImageType")}
-${v("shadow", "ShadowType")}
+        color?: ColorType;
+        bgColor?: ColorType;
+        borderColor?: ColorType;
+        outlineColor?: ColorType;
+        background?: BackgroundType;
+        backgroundImage?: BackgroundImageType;
+        shadow?: ShadowType;
       }
   
       interface SvgProps {
-${v("fill", "ColorType")}
-${v("stroke", "ColorType")}
+        fill?: ColorType;
+        stroke?: ColorType;
       }
     }
   }
   `;
     return {
-      variables: u.join(`
+      variables: p.join(`
 `),
-      boxDts: V
+      boxDts: j
     };
   }
-  t.setupAugmentedProps = m;
-  function v(o, n) {
-    const g = X.map((f) => `        ${o}${f}?: ${n};`);
-    return g.unshift(`        ${o}?: ${n};`), g.join(`
-`);
+  l.setupAugmentedProps = i;
+  function c(d) {
+    const g = r(d);
+    return Object.keys(H).forEach((b) => {
+      const h = g[b], e = H[b];
+      h ? h.styles = { ...e.styles, ...h.styles } : g[b] = H[b];
+    }), g;
   }
-  function l(o) {
-    const n = b(o);
-    return Object.keys(S).forEach((f) => {
-      const s = n[f], a = S[f];
-      s ? s.styles = { ...a.styles, ...s.styles } : n[f] = S[f];
-    }), n;
+  function r(d) {
+    return f(d), T(d), d;
   }
-  function b(o) {
-    return N(o), j(o), o;
-  }
-  function N(o) {
-    if (!o.components)
+  function f(d) {
+    if (!d.components)
       return;
-    const n = Object.keys(o.components);
-    for (const g of n) {
-      const f = o.components[g], s = x(g, f);
-      delete f.children;
-      for (const a of s) {
-        const [u, p] = a;
-        o.components[u] = p;
+    const g = Object.keys(d.components);
+    for (const o of g) {
+      const b = d.components[o], h = w(o, b);
+      delete b.children;
+      for (const e of h) {
+        const [a, t] = e;
+        d.components[a] = t;
       }
     }
   }
-  function x(o, n) {
-    if (!n.children)
+  function w(d, g) {
+    if (!g.children)
       return [];
-    const g = Object.keys(n.children), f = [];
-    for (const s of g) {
-      const a = `${o}.${s}`, u = n.children[s], p = x(a, u);
-      f.push(...p), delete u.children, f.push([a, u]);
+    const o = Object.keys(g.children), b = [];
+    for (const h of o) {
+      const e = `${d}.${h}`, a = g.children[h], t = w(e, a);
+      b.push(...t), delete a.children, b.push([e, a]);
     }
-    return f;
+    return b;
   }
-  function j(o) {
-    const { components: n, ...g } = o, f = Object.values(g);
-    n && f.push(...Object.values(n));
-    for (const s of f)
-      [
-        ["disabled", "Disabled"],
-        ["indeterminate", "Indeterminate"],
-        ["checked", "Checked"]
-      ].forEach(([a, u]) => {
-        a in s.styles && (Object.entries(s.styles[a]).map(([p, y]) => {
-          s.styles[`${p}${u}`] = y;
-        }), delete s.styles[a]);
+  function T(d) {
+    const { components: g, ...o } = d, b = Object.values(o);
+    g && b.push(...Object.values(g));
+    for (const h of b)
+      Object.entries(G).forEach(([e, a]) => {
+        if (a in h.styles) {
+          const t = h.styles[a];
+          Object.entries(t).map(([v, N]) => {
+            h.styles[`${v}${e}`] = N;
+          }), delete h.styles[a];
+        }
+      }), R.forEach((e) => {
+        if (e in h.styles) {
+          const a = h.styles[e];
+          Object.entries(G).forEach(([t, v]) => {
+            if (v in a) {
+              const N = a[v];
+              Object.entries(N).map(([p, C]) => {
+                a[`${p}${t}`] = C;
+              }), delete a[v];
+            }
+          });
+        }
       });
   }
-})(O || (O = {}));
-const D = O;
-function K(t) {
-  const { clean: r, theme: m, component: v } = t;
-  return P(() => {
-    var b, N;
-    if (r)
+})(D || (D = {}));
+const K = D;
+function re(l) {
+  const { clean: u, theme: i, component: c } = l;
+  return X(() => {
+    var f, w;
+    if (u)
       return;
-    let l = D.Styles[v] ?? ((b = D.Styles.components) == null ? void 0 : b[v]);
-    if (l)
-      return m ? { ...l.styles, ...(N = l.themes) == null ? void 0 : N[m].styles } : l.styles;
-  }, [v, r, m]);
+    let r = K.Styles[c] ?? ((f = K.Styles.components) == null ? void 0 : f[c]);
+    if (r)
+      return i ? { ...r.styles, ...(w = r.themes) == null ? void 0 : w[i].styles } : r.styles;
+  }, [c, u, i]);
+}
+const oe = typeof window < "u" && typeof window.document < "u", ne = oe ? Q : Z;
+function me(l, u) {
+  const i = re(l);
+  return ne(I.flush, [l]), X(() => {
+    const c = [u ? I.svgClassName : I.boxClassName], r = i ? { ...i, ...l } : { ...l };
+    return U(r), R.forEach((f) => {
+      if (f in r) {
+        const w = r[f];
+        U(w), Object.entries(w).forEach(([T, d]) => {
+          c.push(I.get(T, d, f));
+        }), delete r[f];
+      }
+    }), Object.entries(r).forEach(([f, w]) => {
+      c.push(I.get(f, w));
+    }), c;
+  }, [l, i]);
+}
+function U(l) {
+  A(l, "disabled", "Disabled"), A(l, "hover", "H"), A(l, "focus", "F"), A(l, "active", "A");
 }
-const ee = typeof window < "u" && typeof window.document < "u", se = ee ? G : M;
-function te(t, r) {
-  const m = K(t);
-  return se(z.flush, [t]), P(() => {
-    const v = [r ? z.svgClassName : z.boxClassName], l = m ? { ...m, ...t } : { ...t };
-    return Array.isArray(l.disabled) && (Object.entries(l.disabled[1]).forEach(([b, N]) => {
-      l[`${b}Disabled`] = N;
-    }), delete l.disabled), "inline" in l && (l.display === "block" || !l.display ? l.display = "inline-block" : l.display === "flex" ? l.display = "inline-flex" : l.display === "grid" && (l.display = "inline-grid"), delete l.inline), "inlineH" in l && (l.displayH === "block" || !l.displayH ? l.displayH = "inline-block" : l.displayH === "flex" ? l.displayH = "inline-flex" : l.displayH === "grid" && (l.displayH = "inline-grid"), delete l.inlineH), "inlineF" in l && (l.displayF === "block" || !l.displayF ? l.displayF = "inline-block" : l.displayF === "flex" ? l.displayF = "inline-flex" : l.displayF === "grid" && (l.displayF = "inline-grid"), delete l.inlineF), "inlineA" in l && (l.displayA === "block" || !l.displayA ? l.displayA = "inline-block" : l.displayA === "flex" ? l.displayA = "inline-flex" : l.displayA === "grid" && (l.displayA = "inline-grid"), delete l.inlineA), Object.entries(l).forEach(([b, N]) => {
-      v.push(z.get(b, N));
-    }), v;
-  }, [t, m]);
+function A(l, u, i) {
+  u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([c, r]) => {
+    l[`${c}${i}`] = r;
+  }), l[u] = l[u][0]) : ee.isObject(l[u]) && (Object.entries(l[u]).forEach(([c, r]) => {
+    l[`${c}${i}`] = r;
+  }), delete l[u]));
 }
-function ae(...t) {
-  return t.reduce((r, m) => m ? typeof m == "string" ? (r.push(m), r) : Array.isArray(m) ? (r.push(...ae(...m)), r) : (Object.entries(m).forEach(([v, l]) => {
-    l && r.push(v);
-  }), r) : r, []);
+function ve(...l) {
+  return l.reduce((u, i) => i ? typeof i == "string" ? (u.push(i), u) : Array.isArray(i) ? (u.push(...ve(...i)), u) : (Object.entries(i).forEach(([c, r]) => {
+    r && u.push(c);
+  }), u) : u, []);
 }
 export {
-  z as S,
-  D as T,
-  ae as c,
-  te as u
+  I as S,
+  K as T,
+  ve as c,
+  me as u
 };