@cronocode/react-box 1.8.5 → 1.8.7

package/core.mjs

@@ -1,72 +1,72 @@
-import { useMemo as q, useLayoutEffect as M, useEffect as U } from "react";
-import { O as B } from "./utils.mjs";
-var e;
-((u) => {
-  ((r) => {
-    function c(l, n) {
-      return `${l}${n.replace("/", "-")}`;
+import { useMemo as X, useLayoutEffect as J, useEffect as Q } from "react";
+import { O as Z } from "./utils.mjs";
+var s;
+((l) => {
+  ((u) => {
+    function i(o, h) {
+      return `${o}${h.replace("/", "-")}`;
     }
-    r.fraction = c;
-    function h(l) {
-      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
+    u.fraction = i;
+    function m(o) {
+      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
     }
-    r.svg = h;
-  })(u.ClassName || (u.ClassName = {})), ((r) => {
-    function c(a, s) {
-      return `${s / 4}rem`;
+    u.svg = m;
+  })(l.ClassName || (l.ClassName = {})), ((u) => {
+    function i(e, a) {
+      return `${a / 4}rem`;
     }
-    r.rem = c;
-    function h(a, s) {
-      return `${s}px`;
+    u.rem = i;
+    function m(e, a) {
+      return `${a}px`;
     }
-    r.px = h;
-    function l(a, s) {
-      const [t, N] = s.split("/");
-      return `${+t / +N * 100}%`;
+    u.px = m;
+    function o(e, a) {
+      const [t, v] = a.split("/");
+      return `${+t / +v * 100}%`;
     }
-    r.fraction = l;
-    function n(a, s) {
-      switch (s) {
+    u.fraction = o;
+    function h(e, a) {
+      switch (a) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return a.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return e.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return s;
+          return a;
       }
     }
-    r.widthHeight = n;
-    function m(a) {
-      return (s, t) => `var(--${a}${t});`;
+    u.widthHeight = h;
+    function V(e) {
+      return (a, t) => `var(--${e}${t});`;
     }
-    r.variables = m;
-    function C(a) {
-      return (s, t) => `var(--${a}${t});`;
+    u.variables = V;
+    function T(e) {
+      return (a, t) => `var(--${e}${t});`;
     }
-    r.svgVariables = C;
-    function i(a, s) {
-      return `repeat(${s},minmax(0,1fr))`;
+    u.svgVariables = T;
+    function C(e, a) {
+      return `repeat(${a},minmax(0,1fr))`;
     }
-    r.gridColumns = i;
-    function p(a, s) {
-      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
+    u.gridColumns = C;
+    function c(e, a) {
+      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    r.gridColumn = p;
-    function f(a, s) {
-      return `${s}ms`;
+    u.gridColumn = c;
+    function r(e, a) {
+      return `${a}ms`;
     }
-    r.ms = f;
-    function b(a, s) {
-      return `${s}deg`;
+    u.ms = r;
+    function b(e, a) {
+      return `${a}deg`;
     }
-    r.rotate = b;
-    function V(a, s) {
-      return s === "xAxis" ? "-1 1" : "1 -1";
+    u.rotate = b;
+    function f(e, a) {
+      return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = V;
-  })(u.Value || (u.Value = {}));
-})(e || (e = {}));
-const v = [
+    u.flip = f;
+  })(l.Value || (l.Value = {}));
+})(s || (s = {}));
+const n = [
   0,
   1,
   2,
@@ -125,7 +125,7 @@ const v = [
   200,
   250,
   300
-], X = [
+], ee = [
   -1,
   -2,
   -3,
@@ -171,7 +171,7 @@ const v = [
   -92,
   -96,
   -100
-], d = [...v, ...X], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], I = ["auto", "hidden", "scroll", "visible"], k = [
+], d = [...n, ...ee], P = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], _ = ["auto", "hidden", "scroll", "visible"], S = [
   "1/2",
   "1/3",
   "2/3",
@@ -198,7 +198,7 @@ const v = [
   "9/12",
   "10/12",
   "11/12"
-], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], _ = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], x = {
+], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], W = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], N = {
   /** 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"],
@@ -209,7 +209,7 @@ const v = [
   /** 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: [] }
   },
@@ -222,61 +222,61 @@ const v = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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: j, formatValue: e.Value.widthHeight },
-    values2: { values: v, 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,
     }
   },
@@ -288,217 +288,217 @@ const v = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: d, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   b: {
     cssNames: ["border-width"],
-    values1: { values: v, 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: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: d, formatValue: e.Value.px },
+    values1: { values: d, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: R },
+    values1: { values: P },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: v, 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: v, 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: v, 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: v, 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: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -557,19 +557,19 @@ const v = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: I },
+    values1: { values: _ },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: I },
+    values1: { values: _ },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: I },
+    values1: { values: _ },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -581,7 +581,7 @@ const v = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: v, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -599,13 +599,13 @@ const v = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: v, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: v, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -694,91 +694,91 @@ const v = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: v, formatValue: e.Value.rem },
+    values1: { values: n, formatValue: s.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: v },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: v },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: v },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: _ },
+    values1: { values: W },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: _ },
+    values1: { values: W },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: v, formatValue: e.Value.gridColumns },
+    values1: { values: n, formatValue: s.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: v, 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: v },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: v },
+    values1: { values: n },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: v, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: R },
+    values1: { values: P },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: v, formatValue: e.Value.px },
+    values1: { values: n, formatValue: s.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -792,7 +792,7 @@ const v = [
     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: [] }
@@ -829,36 +829,36 @@ const v = [
   },
   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: [] }
   }
-}, 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") }
-}, L = {
+}, M = {
+  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") }
+}, G = {
   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
   }
-}, Y = [
+}, se = [
   "H",
   "F",
   "A",
@@ -869,117 +869,133 @@ const v = [
   "Required",
   "Optional",
   "Disabled"
-], T = {
+], E = ["sm", "md", "lg", "xl", "xxl"], ae = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536
+}, H = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(D).forEach((u) => {
-  x[u] = D[u], x[u].isThemeStyle = !0;
+Object.keys(M).forEach((l) => {
+  N[l] = M[l], N[l].isThemeStyle = !0;
+});
+Object.keys(G).forEach((l) => {
+  N[l] = G[l], N[l].isThemeStyle = !0;
 });
-Object.keys(L).forEach((u) => {
-  x[u] = L[u], x[u].isThemeStyle = !0;
+let F = Object.keys(N);
+se.forEach((l) => {
+  F.forEach((u) => {
+    N[`${u}${l}`] = { ...N[u], pseudoSuffix: l };
+  });
 });
-const J = Object.keys(x);
-Y.forEach((u) => {
-  J.forEach((r) => {
-    x[`${r}${u}`] = { ...x[r], pseudoSuffix: u };
+F = Object.keys(N);
+E.forEach((l) => {
+  F.forEach((u) => {
+    N[`${l}${u}`] = { ...N[u], breakpoint: l };
   });
 });
-class Q {
+class le {
   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: c, next: h } = Z, l = r - c.length;
-    if (l < 0)
-      return c[r];
-    const n = Math.floor(l / h.length), m = l - n * h.length;
-    return this.getByIndex(n) + h[m];
+  getByIndex(u) {
+    const { first: i, next: m } = ue, o = u - i.length;
+    if (o < 0)
+      return i[u];
+    const h = Math.floor(o / m.length), V = o - h * m.length;
+    return this.getByIndex(h) + m[V];
   }
 }
-const Z = {
+const ue = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var E;
-((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;}}
+var D;
+((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;}
-.${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);}
-`, c = new Q(), h = Object.keys(x);
-  let l = !0, n = h.reduce(
-    (a, s) => (a[s] = /* @__PURE__ */ new Set(), a),
+.${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 le(), m = Object.keys(N);
+  let o = !0, h = m.reduce(
+    (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
     {}
   );
-  function m(a, s) {
-    if (a in x)
-      return p(a, s);
-    if (a in T && s)
-      return T[a].className;
+  function V(e, a, t) {
+    if (e in N)
+      return c(e, a, t);
+    if (e in H && a)
+      return H[e].className;
   }
-  u.get = m;
-  function C() {
-    if (l) {
-      let a = f([r]);
-      a = f(a, "H"), a = f(a, "F"), a = f(a, "A"), a = f(a, "Checked"), a = f(a, "Indeterminate"), a = f(a, "Valid"), a = f(a, "Invalid"), a = f(a, "Required"), a = f(a, "Disabled");
-      const s = V();
-      s.innerHTML = a.join(""), l = !1;
+  l.get = V;
+  function T() {
+    if (o) {
+      let e = r([u]);
+      e = r(e, "H"), e = r(e, "F"), e = r(e, "A"), e = r(e, "Checked"), e = r(e, "Indeterminate"), e = r(e, "Valid"), e = r(e, "Invalid"), e = r(e, "Required"), e = r(e, "Disabled"), E.forEach((t) => {
+        e.push(`@media(min-width: ${ae[t]}px){`), e = r(e, void 0, t), e = r(e, "H", t), e = r(e, "F", t), e = r(e, "A", t), e = r(e, "Checked", t), e = r(e, "Indeterminate", t), e = r(e, "Valid", t), e = r(e, "Invalid", t), e = r(e, "Required", t), e = r(e, "Disabled", t), e.push("}");
+      });
+      const a = f();
+      a.innerHTML = e.join(""), o = !1;
     }
   }
-  u.flush = C;
-  function i() {
-    n = h.reduce(
-      (a, s) => (a[s] = /* @__PURE__ */ new Set(), a),
+  l.flush = T;
+  function C() {
+    h = m.reduce(
+      (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
       {}
     );
   }
-  u.clear = i;
-  function p(a, s) {
-    var y;
-    n[a].has(s) || (l = !0, n[a].add(s));
-    const t = b(a, s), N = ((y = t.formatClassName) == null ? void 0 : y.call(t, a, s)) ?? `${a}${s}`;
-    return c.getIdentity(N);
+  l.clear = C;
+  function c(e, a, t) {
+    const v = (t ?? "") + e;
+    h[v].has(a) || (o = !0, h[v].add(a));
+    const x = `${v}${a}`;
+    return i.getIdentity(x);
   }
-  function f(a, s) {
-    return Object.entries(n).filter(([N]) => {
-      var y;
-      return ((y = x[N]) == null ? void 0 : y.pseudoSuffix) === s;
-    }).reduce((N, [y, S]) => (S.forEach(($) => {
-      var H;
-      const o = b(y, $), g = `.${p(y, $)}`;
+  function r(e, a, t) {
+    return Object.entries(h).filter(
+      ([x]) => {
+        var $, j;
+        return (($ = N[x]) == null ? void 0 : $.pseudoSuffix) === a && ((j = N[x]) == null ? void 0 : j.breakpoint) === t;
+      }
+    ).reduce((x, [$, j]) => (j.forEach((O) => {
+      var L;
+      const g = b($, O), y = `.${c($, O)}`;
       let w = [];
-      s ? s === "H" ? w = [
-        ...t(`${g}:hover`, o),
-        ...t(`.${T.hover.className}:hover>${g}`, o)
-      ] : s === "F" ? w = [
-        ...t(`${g}:focus-within`, o),
-        ...t(`.${T.focus.className}:focus-within>${g}`, o)
-      ] : s === "A" ? w = t(`${g}:active`, o) : s === "Checked" ? w = t(`${g}:checked`, o) : s === "Indeterminate" ? w = t(`${g}:indeterminate`, o) : s === "Valid" ? w = t(`${g}:valid`, o) : s === "Invalid" ? w = t(`${g}:invalid`, o) : s === "Required" ? w = t(`${g}:required`, o) : s === "Optional" ? w = t(`${g}:optional`, o) : s === "Disabled" && (w = t(`${g}:disabled`, o)) : w = t(g, o);
-      const F = ((H = o.formatValue) == null ? void 0 : H.call(o, y, $)) ?? $, W = x[y].cssNames.map((G) => `${G}:${F};`).join("");
-      N.push(`${w.join(",")}{${W}}`);
-    }), N), a);
-    function t(N, y) {
-      return y.formatSelector ? y.formatSelector(N) : [N];
+      a ? a === "H" ? w = [
+        ...v(`${y}:hover`, g),
+        ...v(`.${H.hover.className}:hover>${y}`, g)
+      ] : a === "F" ? w = [
+        ...v(`${y}:focus-within`, g),
+        ...v(`.${H.focus.className}:focus-within>${y}`, g)
+      ] : a === "A" ? w = v(`${y}:active`, g) : a === "Checked" ? w = v(`${y}:checked`, g) : a === "Indeterminate" ? w = v(`${y}:indeterminate`, g) : a === "Valid" ? w = v(`${y}:valid`, g) : a === "Invalid" ? w = v(`${y}:invalid`, g) : a === "Required" ? w = v(`${y}:required`, g) : a === "Optional" ? w = v(`${y}:optional`, g) : a === "Disabled" && (w = v(`${y}:disabled`, g)) : w = v(y, g);
+      const B = ((L = g.formatValue) == null ? void 0 : L.call(g, $, O)) ?? O, k = N[$].cssNames.map((Y) => `${Y}:${B};`).join("");
+      x.push(`${w.join(",")}{${k}}`);
+    }), x), e);
+    function v(x, $) {
+      return $.formatSelector ? $.formatSelector(x) : [x];
     }
   }
-  function b(a, s) {
-    const t = x[a];
-    return t.isThemeStyle ? t : t.values1.values.includes(s) ? t.values1 : t.values2.values.includes(s) ? t.values2 : t.values3;
+  function b(e, a) {
+    const t = N[e];
+    return t.isThemeStyle ? t : t.values1.values.includes(a) ? t.values1 : t.values2.values.includes(a) ? t.values2 : t.values3;
   }
-  function V() {
-    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;
+  function f() {
+    const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    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;
   }
-})(E || (E = {}));
-const O = E, z = {
+})(D || (D = {}));
+const I = D, A = {
   button: {
     styles: {
       display: "inline-block",
@@ -1020,28 +1036,41 @@ const O = E, z = {
       borderRadius: 1
     }
   }
+}, te = {
+  H: "hover",
+  F: "focus",
+  A: "active",
+  Checked: "checked",
+  Indeterminate: "indeterminate",
+  Valid: "valid",
+  Invalid: "invalid",
+  Required: "required",
+  Optional: "optional",
+  Disabled: "disabled"
 };
-var A;
-((u) => {
-  u.Styles = l(z);
-  function r(i) {
-    u.Styles = h(i);
+var q;
+((l) => {
+  l.Styles = {};
+  function u(c) {
+    l.Styles = o(A), l.Styles = m(c);
   }
-  u.setup = r;
-  function c(i, p) {
-    const f = Object.entries(i.colors).map(([o, g]) => `--color${o}: ${g};`).join(`
-  `), b = Object.entries(i.shadows).map(([o, g]) => `--shadow${o}: ${g};`).join(`
-  `), V = Object.entries(i.backgrounds).map(([o, g]) => `--background${o}: ${g};`).join(`
-  `), a = Object.entries(i.backgroundImages).map(([o, g]) => `--backgroundImage${o}: ${g};`).join(`
-  `), s = [":root {"];
-    f && s.push(`  ${f}`), b && s.push(`  ${b}`), V && s.push(`  ${V}`), a && s.push(`  ${a}`), s.push("}");
-    const t = Object.keys(i.colors).map((o) => `'${o}'`).join(" | "), N = Object.keys(i.backgrounds).map((o) => `'${o}'`).join(" | "), y = Object.keys(i.backgroundImages).map((o) => `'${o}'`).join(" | "), S = Object.keys(i.shadows).map((o) => `'${o}'`).join(" | "), $ = `import '@cronocode/react-box';
+  l.setup = u;
+  function i(c, r) {
+    const { colors: b = {}, shadows: f = {}, backgrounds: e = {}, backgroundImages: a = {} } = c;
+    b.none = "none", f.none = "none", e.none = "none", a.none = "none";
+    const t = Object.entries(b).map(([p, k]) => `--color${p}: ${k};`).join(`
+  `), v = Object.entries(f).map(([p, k]) => `--shadow${p}: ${k};`).join(`
+  `), x = Object.entries(e).map(([p, k]) => `--background${p}: ${k};`).join(`
+  `), $ = Object.entries(a).map(([p, k]) => `--backgroundImage${p}: ${k};`).join(`
+  `), j = [":root {"];
+    t && j.push(`  ${t}`), v && j.push(`  ${v}`), x && j.push(`  ${x}`), $ && j.push(`  ${$}`), j.push("}");
+    const O = Object.keys(b).map((p) => `'${p}'`).join(" | "), g = Object.keys(e).map((p) => `'${p}'`).join(" | "), y = Object.keys(a).map((p) => `'${p}'`).join(" | "), w = Object.keys(f).map((p) => `'${p}'`).join(" | "), B = `import '@cronocode/react-box';
   
-  declare module '${(p == null ? void 0 : p.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${t};
-    type BackgroundType = ${N};
+  declare module '${(r == null ? void 0 : r.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${O};
+    type BackgroundType = ${g};
     type BackgroundImageType = ${y};
-    type ShadowType = ${S};
+    type ShadowType = ${w};
   
     namespace Augmented {
       interface BoxProps {
@@ -1062,102 +1091,121 @@ var A;
   }
   `;
     return {
-      variables: s.join(`
+      variables: j.join(`
 `),
-      boxDts: $
+      boxDts: B
     };
   }
-  u.setupAugmentedProps = c;
-  function h(i) {
-    const p = l(i);
-    return Object.keys(z).forEach((b) => {
-      const V = p[b], a = z[b];
-      V ? V.styles = { ...a.styles, ...V.styles } : p[b] = z[b];
-    }), p;
+  l.setupAugmentedProps = i;
+  function m(c) {
+    const r = o(c);
+    return Object.keys(A).forEach((f) => {
+      const e = r[f], a = A[f];
+      e ? e.styles = { ...a.styles, ...e.styles } : r[f] = A[f];
+    }), r;
   }
-  function l(i) {
-    return n(i), C(i), i;
+  function o(c) {
+    return h(c), T(c), c;
   }
-  function n(i) {
-    if (!i.components)
+  function h(c) {
+    if (!c.components)
       return;
-    const p = Object.keys(i.components);
-    for (const f of p) {
-      const b = i.components[f], V = m(f, b);
-      delete b.children;
-      for (const a of V) {
-        const [s, t] = a;
-        i.components[s] = t;
+    const r = Object.keys(c.components);
+    for (const b of r) {
+      const f = c.components[b], e = V(b, f);
+      delete f.children;
+      for (const a of e) {
+        const [t, v] = a;
+        c.components[t] = v;
       }
     }
   }
-  function m(i, p) {
-    if (!p.children)
+  function V(c, r) {
+    if (!r.children)
       return [];
-    const f = Object.keys(p.children), b = [];
-    for (const V of f) {
-      const a = `${i}.${V}`, s = p.children[V], t = m(a, s);
-      b.push(...t), delete s.children, b.push([a, s]);
+    const b = Object.keys(r.children), f = [];
+    for (const e of b) {
+      const a = `${c}.${e}`, t = r.children[e], v = V(a, t);
+      f.push(...v), delete t.children, f.push([a, t]);
     }
-    return b;
+    return f;
   }
-  function C(i) {
-    const { components: p, ...f } = i, b = Object.values(f);
-    p && b.push(...Object.values(p));
-    for (const V of b)
-      [
-        ["disabled", "Disabled"],
-        ["indeterminate", "Indeterminate"],
-        ["checked", "Checked"]
-      ].forEach(([a, s]) => {
-        a in V.styles && (Object.entries(V.styles[a]).map(([t, N]) => {
-          V.styles[`${t}${s}`] = N;
-        }), delete V.styles[a]);
+  function T(c) {
+    const { components: r, ...b } = c, f = Object.values(b);
+    r && f.push(...Object.values(r));
+    for (const e of f)
+      C(e.styles), E.forEach((a) => {
+        if (a in e.styles) {
+          const t = e.styles[a];
+          C(t);
+        }
+      }), e.themes && Object.values(e.themes).forEach((a) => {
+        C(a), E.forEach((t) => {
+          if (t in a) {
+            const v = a[t];
+            C(v);
+          }
+        });
       });
   }
-})(A || (A = {}));
-const P = A;
-function K(u) {
-  const { clean: r, theme: c, component: h } = u;
-  return q(() => {
-    var n, m;
-    if (r)
+  function C(c) {
+    Object.entries(te).forEach(([r, b]) => {
+      if (b in c) {
+        const f = c[b];
+        Object.entries(f).map(([e, a]) => {
+          c[`${e}${r}`] = a;
+        }), delete c[b];
+      }
+    });
+  }
+})(q || (q = {}));
+const K = q;
+function re(l) {
+  const { clean: u, theme: i, component: m } = l;
+  return X(() => {
+    var h, V;
+    if (u)
       return;
-    let l = P.Styles[h] ?? ((n = P.Styles.components) == null ? void 0 : n[h]);
-    if (l)
-      return c ? { ...l.styles, ...(m = l.themes) == null ? void 0 : m[c].styles } : l.styles;
-  }, [h, r, c]);
+    let o = K.Styles[m] ?? ((h = K.Styles.components) == null ? void 0 : h[m]);
+    if (o)
+      return i ? { ...o.styles, ...(V = o.themes) == null ? void 0 : V[i] } : o.styles;
+  }, [m, u, i]);
+}
+const oe = typeof window < "u" && typeof window.document < "u", ne = oe ? J : Q;
+function me(l, u) {
+  const i = re(l);
+  return ne(I.flush, [l]), X(() => {
+    const m = [u ? I.svgClassName : I.boxClassName], o = i ? { ...i, ...l } : { ...l };
+    return U(o), E.forEach((h) => {
+      if (h in o) {
+        const V = o[h];
+        U(V), Object.entries(V).forEach(([T, C]) => {
+          m.push(I.get(T, C, h));
+        }), delete o[h];
+      }
+    }), Object.entries(o).forEach(([h, V]) => {
+      m.push(I.get(h, V));
+    }), m;
+  }, [l, i]);
+}
+function U(l) {
+  R(l, "disabled", "Disabled"), R(l, "hover", "H"), R(l, "focus", "F"), R(l, "active", "A");
 }
-const ee = typeof window < "u" && typeof window.document < "u", se = ee ? M : U;
-function re(u, r) {
-  const c = K(u);
-  return se(O.flush, [u]), q(() => {
-    const h = [r ? O.svgClassName : O.boxClassName], l = c ? { ...c, ...u } : { ...u };
-    return Array.isArray(l.disabled) && (Object.entries(l.disabled[1]).forEach(([n, m]) => {
-      l[`${n}Disabled`] = m;
-    }), delete l.disabled), Array.isArray(l.hover) ? (Object.entries(l.hover[1]).forEach(([n, m]) => {
-      l[`${n}H`] = m;
-    }), l.hover = l.hover[0]) : B.isObject(l.hover) && (Object.entries(l.hover).forEach(([n, m]) => {
-      l[`${n}H`] = m;
-    }), delete l.hover), Array.isArray(l.focus) ? (Object.entries(l.focus[1]).forEach(([n, m]) => {
-      l[`${n}F`] = m;
-    }), l.focus = l.focus[0]) : B.isObject(l.focus) && (Object.entries(l.focus).forEach(([n, m]) => {
-      l[`${n}F`] = m;
-    }), delete l.focus), l.active && (Object.entries(l.active).forEach(([n, m]) => {
-      l[`${n}A`] = m;
-    }), delete l.active), "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), Object.entries(l).forEach(([n, m]) => {
-      h.push(O.get(n, m));
-    }), h;
-  }, [u, c]);
+function R(l, u, i) {
+  u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([m, o]) => {
+    l[`${m}${i}`] = o;
+  }), l[u] = l[u][0]) : Z.isObject(l[u]) && (Object.entries(l[u]).forEach(([m, o]) => {
+    l[`${m}${i}`] = o;
+  }), delete l[u]));
 }
-function ae(...u) {
-  return u.reduce((r, c) => c ? typeof c == "string" ? (r.push(c), r) : Array.isArray(c) ? (r.push(...ae(...c)), r) : (Object.entries(c).forEach(([h, l]) => {
-    l && r.push(h);
-  }), 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(([m, o]) => {
+    o && u.push(m);
+  }), u) : u, []);
 }
 export {
-  O as S,
-  P as T,
-  ae as c,
-  re as u
+  I as S,
+  K as T,
+  ve as c,
+  me as u
 };