@cronocode/react-box 1.7.2 → 1.7.4

package/{components/dox.js → core.js}

@@ -1,247 +1,211 @@
-import { useMemo as L, useLayoutEffect as O, useEffect as I } from "react";
-import { I as _ } from "../utils.js";
-import { u as D } from "../theme.js";
+import { useMemo as D, useLayoutEffect as q, useEffect as U } from "react";
 var e;
-((a) => {
-  ((r) => {
-    function c(l, d) {
-      return `${l}${d.replace("/", "-")}`;
+((u) => {
+  ((l) => {
+    function m(s, n) {
+      return `${s}${n.replace("/", "-")}`;
     }
-    r.fraction = c;
-    function m(l) {
-      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
+    l.fraction = m;
+    function c(s) {
+      return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
     }
-    r.svg = m;
-  })(a.ClassName || (a.ClassName = {})), ((r) => {
-    function c(u, i) {
-      return `${i / 4}rem`;
+    l.svg = c;
+  })(u.ClassName || (u.ClassName = {})), ((l) => {
+    function m(o, a) {
+      return `${a / 4}rem`;
     }
-    r.rem = c;
-    function m(u, i) {
-      return `${i}px`;
+    l.rem = m;
+    function c(o, a) {
+      return `${a}px`;
     }
-    r.px = m;
-    function l(u, i) {
-      const [o, v] = i.split("/");
-      return `${+o / +v * 100}%`;
+    l.px = c;
+    function s(o, a) {
+      const [v, g] = a.split("/");
+      return `${+v / +g * 100}%`;
     }
-    r.fraction = l;
-    function d(u, i) {
-      switch (i) {
+    l.fraction = s;
+    function n(o, a) {
+      switch (a) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return i;
+          return a;
       }
     }
-    r.widthHeight = d;
-    function g(u) {
-      return (i, o) => `var(--${u}${o});`;
+    l.widthHeight = n;
+    function f(o) {
+      return (a, v) => `var(--${o}${v});`;
     }
-    r.variables = g;
-    function S(u) {
-      return (i, o) => `var(--${u}${o});`;
+    l.variables = f;
+    function b(o) {
+      return (a, v) => `var(--${o}${v});`;
     }
-    r.svgVariables = S;
-    function k(u, i) {
-      return `repeat(${i},minmax(0,1fr))`;
+    l.svgVariables = b;
+    function h(o, a) {
+      return `repeat(${a},minmax(0,1fr))`;
     }
-    r.gridColumns = k;
-    function N(u, i) {
-      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
+    l.gridColumns = h;
+    function p(o, a) {
+      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    r.gridColumn = N;
-    function p(u, i) {
-      return `${i}ms`;
+    l.gridColumn = p;
+    function V(o, a) {
+      return `${a}ms`;
     }
-    r.ms = p;
-    function y(u, i) {
-      return `${i}deg`;
+    l.ms = V;
+    function C(o, a) {
+      return `${a}deg`;
     }
-    r.rotate = y;
-    function $(u, i) {
-      return i === "xAxis" ? "-1 1" : "1 -1";
+    l.rotate = C;
+    function r(o, a) {
+      return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = $;
-  })(a.Value || (a.Value = {}));
+    l.flip = r;
+  })(u.Value || (u.Value = {}));
 })(e || (e = {}));
-const W = ["H", "F", "A"];
-var s;
-((a) => {
-  a.positiveSizes = [
-    0,
-    1,
-    2,
-    3,
-    4,
-    5,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
-    13,
-    14,
-    15,
-    16,
-    17,
-    18,
-    19,
-    20,
-    22,
-    24,
-    26,
-    28,
-    30,
-    32,
-    34,
-    36,
-    38,
-    40,
-    42,
-    44,
-    46,
-    48,
-    50,
-    52,
-    54,
-    56,
-    58,
-    60,
-    64,
-    68,
-    72,
-    76,
-    80,
-    84,
-    88,
-    92,
-    96,
-    100
-  ], a.negativeSizes = [
-    -1,
-    -2,
-    -3,
-    -4,
-    -5,
-    -6,
-    -7,
-    -8,
-    -9,
-    -10,
-    -11,
-    -12,
-    -13,
-    -14,
-    -15,
-    -16,
-    -17,
-    -18,
-    -19,
-    -20,
-    -22,
-    -24,
-    -26,
-    -28,
-    -30,
-    -32,
-    -34,
-    -36,
-    -38,
-    -40,
-    -44,
-    -48,
-    -52,
-    -56,
-    -60,
-    -64,
-    -68,
-    -72,
-    -76,
-    -80,
-    -84,
-    -88,
-    -92,
-    -96,
-    -100
-  ], a.sizes = [...a.positiveSizes, ...a.negativeSizes], a.borderAndOutlineStyles = [
-    "solid",
-    "dashed",
-    "dotted",
-    "double",
-    "groove",
-    "ridge",
-    "inset",
-    "outset",
-    "none",
-    "hidden"
-  ], a.overflows = ["auto", "hidden", "scroll", "visible"], a.widthHeightFractions = [
-    "1/2",
-    "1/3",
-    "2/3",
-    "1/4",
-    "2/4",
-    "3/4",
-    "1/5",
-    "2/5",
-    "3/5",
-    "4/5",
-    "1/6",
-    "2/6",
-    "3/6",
-    "4/6",
-    "5/6",
-    "1/12",
-    "2/12",
-    "3/12",
-    "4/12",
-    "5/12",
-    "6/12",
-    "7/12",
-    "8/12",
-    "9/12",
-    "10/12",
-    "11/12"
-  ], a.widthHeightValues = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], a.alignSelf = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
-})(s || (s = {}));
-const A = {
-  shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
-  background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
-  color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
-  bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
-  borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
-  outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
-}, R = {
-  fill: {
-    cssNames: ["fill"],
-    formatValue: e.Value.svgVariables("color"),
-    formatSelector: e.ClassName.svg
-  },
-  stroke: {
-    cssNames: ["stroke"],
-    formatValue: e.Value.svgVariables("color"),
-    formatSelector: e.ClassName.svg
-  }
-}, x = {
-  hover: { className: "_h" },
-  focus: { className: "_f" }
-}, t = {
+const i = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  22,
+  24,
+  26,
+  28,
+  30,
+  32,
+  34,
+  36,
+  38,
+  40,
+  42,
+  44,
+  46,
+  48,
+  50,
+  52,
+  54,
+  56,
+  58,
+  60,
+  64,
+  68,
+  72,
+  76,
+  80,
+  84,
+  88,
+  92,
+  96,
+  100
+], X = [
+  -1,
+  -2,
+  -3,
+  -4,
+  -5,
+  -6,
+  -7,
+  -8,
+  -9,
+  -10,
+  -11,
+  -12,
+  -13,
+  -14,
+  -15,
+  -16,
+  -17,
+  -18,
+  -19,
+  -20,
+  -22,
+  -24,
+  -26,
+  -28,
+  -30,
+  -32,
+  -34,
+  -36,
+  -38,
+  -40,
+  -44,
+  -48,
+  -52,
+  -56,
+  -60,
+  -64,
+  -68,
+  -72,
+  -76,
+  -80,
+  -84,
+  -88,
+  -92,
+  -96,
+  -100
+], d = [...i, ...X], O = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], j = ["auto", "hidden", "scroll", "visible"], w = [
+  "1/2",
+  "1/3",
+  "2/3",
+  "1/4",
+  "2/4",
+  "3/4",
+  "1/5",
+  "2/5",
+  "3/5",
+  "4/5",
+  "1/6",
+  "2/6",
+  "3/6",
+  "4/6",
+  "5/6",
+  "1/12",
+  "2/12",
+  "3/12",
+  "4/12",
+  "5/12",
+  "6/12",
+  "7/12",
+  "8/12",
+  "9/12",
+  "10/12",
+  "11/12"
+], x = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], R = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], t = {
+  /** 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"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
     values2: { values: [] },
     values3: { values: [] }
   },
+  /** 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], formatValue: () => "inline-block" },
+    values1: { values: [!0] },
     values2: { values: [] },
     values3: { values: [] }
   },
+  /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
   boxSizing: {
     cssNames: ["box-sizing"],
     values1: { values: ["border-box", "content-box"] },
@@ -250,62 +214,62 @@ const A = {
   },
   width: {
     cssNames: ["width"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
-    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: x, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: s.widthHeightFractions,
+      values: w,
       formatValue: e.Value.fraction
-      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   position: {
@@ -316,217 +280,217 @@ const A = {
   },
   top: {
     cssNames: ["top"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: s.sizes, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   border: {
     cssNames: ["border-width"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: s.sizes, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: s.borderAndOutlineStyles },
+    values1: { values: O },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -585,19 +549,19 @@ const A = {
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: s.overflows },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: s.overflows },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: s.overflows },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -609,7 +573,7 @@ const A = {
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -627,13 +591,13 @@ const A = {
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -722,91 +686,91 @@ const A = {
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values1: { values: i, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: s.positiveSizes },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: s.positiveSizes },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: s.positiveSizes },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: s.alignSelf },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: s.alignSelf },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.gridColumns },
+    values1: { values: i, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.gridColumn },
+    values1: { values: i, formatValue: e.Value.gridColumn },
     values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: s.positiveSizes },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: s.positiveSizes },
+    values1: { values: i },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: s.borderAndOutlineStyles },
+    values1: { values: O },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: s.positiveSizes, formatValue: e.Value.px },
+    values1: { values: i, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -854,8 +818,7 @@ const A = {
     values1: { values: ["clip", "ellipsis"] },
     values2: { values: [] },
     values3: { values: [] }
-  }
-}, C = {
+  },
   rotate: {
     cssNames: ["rotate"],
     values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: e.Value.rotate },
@@ -868,17 +831,35 @@ const A = {
     values2: { values: [] },
     values3: { values: [] }
   }
+}, L = {
+  shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
+  background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
+  color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
+  bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
+  borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
+  outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
+}, I = {
+  fill: {
+    cssNames: ["fill"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  },
+  stroke: {
+    cssNames: ["stroke"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  }
+}, Y = ["H", "F", "A"], H = {
+  hover: { className: "_h" },
+  focus: { className: "_f" }
 };
-Object.keys(C).forEach((a) => {
-  t[a] = C[a];
-});
-Object.keys(A).forEach((a) => {
-  t[a] = A[a], t[a].isThemeStyle = !0;
+Object.keys(L).forEach((u) => {
+  t[u] = L[u], t[u].isThemeStyle = !0;
 });
-Object.keys(R).forEach((a) => {
-  t[a] = R[a], t[a].isThemeStyle = !0;
+Object.keys(I).forEach((u) => {
+  t[u] = I[u], t[u].isThemeStyle = !0;
 });
-const V = {
+const k = {
   w: { ...t.width, key: "width" },
   h: { ...t.height, key: "height" },
   m: { ...t.margin, key: "margin" },
@@ -906,99 +887,260 @@ const V = {
   ai: { ...t.alignItems, key: "alignItems" },
   ac: { ...t.alignContent, key: "alignContent" },
   d: { ...t.flexDirection, key: "flexDirection" }
-}, G = Object.keys(t), P = Object.keys(V);
-W.forEach((a) => {
-  G.forEach((r) => {
-    t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
-  }), P.forEach((r) => {
-    V[`${r}${a}`] = { ...V[r], key: `${V[r].key}${a}` }, V[`${r}${a}`].pseudoSuffix = a;
+}, J = Object.keys(t), Q = Object.keys(k);
+Y.forEach((u) => {
+  J.forEach((l) => {
+    t[`${l}${u}`] = { ...t[l] }, t[`${l}${u}`].pseudoSuffix = u;
+  }), Q.forEach((l) => {
+    k[`${l}${u}`] = { ...k[l], key: `${k[l].key}${u}` }, k[`${l}${u}`].pseudoSuffix = u;
   });
 });
-var b;
-((a) => {
-  a.doxClassName = "_dox", a.svgClassName = "_svg";
-  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;}}
+class Z {
+  constructor() {
+    this._index = 0, this._cache = {};
+  }
+  getIdentity(l) {
+    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
+  }
+  getByIndex(l) {
+    const { first: m, next: c } = K, s = l - m.length;
+    if (s < 0)
+      return m[l];
+    const n = Math.floor(s / c.length), f = s - n * c.length;
+    return this.getByIndex(n) + c[f];
+  }
+}
+const K = {
+  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+};
+var B;
+((u) => {
+  u.boxClassName = "_box", u.svgClassName = "_svg";
+  const l = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${a.doxClassName}{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 _(), m = Object.keys(t), l = $();
-  let d = !1;
-  const g = m.reduce((u, i) => (u[i] = /* @__PURE__ */ new Set(), u), {});
-  function S(u, i) {
-    if (u in t)
-      return N(u, i);
-    if (u in x)
-      return x[u].className;
-    if (u in C)
-      return N(u, i);
+.${u.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
+.${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, m = new Z(), c = Object.keys(t);
+  let s = !1;
+  const n = c.reduce(
+    (r, o) => (r[o] = /* @__PURE__ */ new Set(), r),
+    {}
+  );
+  function f(r, o) {
+    if (r in t)
+      return h(r, o);
+    if (r in H)
+      return H[r].className;
   }
-  a.get = S;
-  function k() {
-    if (d) {
+  u.get = f;
+  function b() {
+    if (s) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let u = p([r]);
-      u = p(u, "H"), u = p(u, "F"), u = p(u, "A"), l.innerHTML = u.join(""), d = !1;
+      let r = p([l]);
+      r = p(r, "H"), r = p(r, "F"), r = p(r, "A");
+      const o = C();
+      o.innerHTML = r.join(""), s = !1;
+    }
+  }
+  u.flush = b;
+  function h(r, o) {
+    var g;
+    n[r].has(o) || (s = !0, n[r].add(o));
+    const a = V(r, o), v = ((g = a.formatClassName) == null ? void 0 : g.call(a, r, o)) ?? `${r}${o}`;
+    return `-${m.getIdentity(v)}`;
+  }
+  function p(r, o) {
+    return Object.entries(n).filter(([v]) => {
+      var g;
+      return ((g = t[v]) == null ? void 0 : g.pseudoSuffix) === o;
+    }).reduce((v, [g, P]) => (P.forEach(($) => {
+      var E;
+      const y = V(g, $), N = `.${h(g, $)}`;
+      let T = [];
+      o ? o === "H" ? T = [
+        ...a(`${N}:hover`, y),
+        ...a(`.${H.hover.className}:hover>${N}`, y)
+      ] : o === "F" ? T = [
+        ...a(`${N}:focus-within`, y),
+        ...a(`.${H.focus.className}:focus-within>${N}`, y)
+      ] : o === "A" && (T = a(`${N}:active`, y)) : T = a(N, y);
+      const W = ((E = y.formatValue) == null ? void 0 : E.call(y, g, $)) ?? $, G = t[g].cssNames.map((M) => `${M}:${W};`).join("");
+      v.push(`${T.join(",")}{${G}}`);
+    }), v), r);
+    function a(v, g) {
+      return g.formatSelector ? g.formatSelector(v) : [v];
+    }
+  }
+  function V(r, o) {
+    const a = t[r];
+    return a.isThemeStyle ? a : a.values1.values.includes(o) ? a.values1 : a.values2.values.includes(o) ? a.values2 : a.values3;
+  }
+  function C() {
+    const r = "crono-styles", a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let v = a.getElementById(r);
+    return v || (v = a.createElement("style"), v.setAttribute("id", r), v.setAttribute("type", "text/css"), a.head.insertBefore(v, a.head.firstChild)), v;
+  }
+})(B || (B = {}));
+const z = B, S = {
+  button: {
+    styles: {
+      display: "inline-block",
+      p: 3,
+      cursor: "pointer",
+      b: 1,
+      borderRadius: 1
+    },
+    disabled: {
+      cursor: "default"
+    }
+  },
+  checkbox: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      p: 2
+    }
+  },
+  radioButton: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      p: 2
+    }
+  },
+  textbox: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      borderRadius: 1,
+      p: 3
+    }
+  },
+  textarea: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      borderRadius: 1
     }
   }
-  a.flush = k;
-  function N(u, i) {
-    var n;
-    g[u].has(i) || (d = !0, g[u].add(i));
-    const o = y(u, i), v = ((n = o.formatClassName) == null ? void 0 : n.call(o, u, i)) ?? `${u}${i}`;
-    return `-${c.getIdentity(v)}`;
+};
+var F;
+((u) => {
+  u.Styles = S;
+  function l(s) {
+    u.Styles = s, c();
   }
-  function p(u, i) {
-    return Object.entries(g).filter(([v]) => {
-      var n;
-      return ((n = t[v]) == null ? void 0 : n.pseudoSuffix) === i;
-    }).reduce((v, [n, j]) => (j.forEach((z) => {
-      var T;
-      const f = y(n, z), h = `.${N(n, z)}`;
-      let w = [];
-      i ? i === "H" ? w = [
-        ...o(`${h}:hover`, f),
-        ...o(`.${x.hover.className}:hover>${h}`, f)
-      ] : i === "F" ? w = [
-        ...o(`${h}:focus-within`, f),
-        ...o(`.${x.focus.className}:focus-within>${h}`, f)
-      ] : i === "A" && (w = o(`${h}:active`, f)) : w = o(h, f);
-      const F = ((T = f.formatValue) == null ? void 0 : T.call(f, n, z)) ?? z, B = t[n].cssNames.map((E) => `${E}:${F};`).join("");
-      v.push(`${w.join(",")}{${B}}`);
-    }), v), u);
-    function o(v, n) {
-      return n.formatSelector ? n.formatSelector(v) : [v];
+  u.setup = l;
+  function m(s, n) {
+    const f = Object.entries(s.colors).map(([a, v]) => `--color${a}: ${v};`).join(`
+  `), b = Object.entries(s.shadows).map(([a, v]) => `--shadow${a}: ${v};`).join(`
+  `), h = Object.entries(s.backgrounds).map(([a, v]) => `--background${a}: ${v};`).join(`
+  `), p = [":root {"];
+    f && p.push(`  ${f}`), b && p.push(`  ${b}`), h && p.push(`  ${h}`), p.push("}");
+    const V = Object.keys(s.colors).map((a) => `'${a}'`).join(" | "), C = Object.keys(s.backgrounds).map((a) => `'${a}'`).join(" | "), r = Object.keys(s.shadows).map((a) => `'${a}'`).join(" | "), o = `import '@cronocode/react-box';
+  
+  declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${V};
+    type BackgroundType = ${C};
+    type ShadowType = ${r};
+  
+    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;
+      }
+  
+      interface SvgProps {
+        fill?: ColorType;
+        fillH?: ColorType;
+        fillF?: ColorType;
+        fillA?: ColorType;
+        stroke?: ColorType;
+        strokeH?: ColorType;
+        strokeF?: ColorType;
+        strokeA?: ColorType;
+      }
     }
   }
-  function y(u, i) {
-    const o = t[u];
-    return o.isThemeStyle ? o : o.values1.values.includes(i) ? o.values1 : o.values2.values.includes(i) ? o.values2 : o.values3;
+  `;
+    return {
+      variables: p.join(`
+`),
+      boxDts: o
+    };
   }
-  function $() {
-    const u = "crono-styles", o = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let v = o.getElementById(u);
-    return v || (v = o.createElement("style"), v.setAttribute("id", u), v.setAttribute("type", "text/css"), o.head.insertBefore(v, o.head.firstChild)), v;
+  u.setupAugmentedProps = m;
+  function c() {
+    Object.keys(S).forEach((n) => {
+      const f = u.Styles[n], b = S[n];
+      f ? (f.styles = { ...b.styles, ...f.styles }, f.disabled && b.disabled && (f.disabled = { ...b.disabled, ...f.disabled })) : u.Styles[n] = S[n];
+    });
   }
-})(b || (b = {}));
-const q = typeof window < "u" && typeof window.document < "u", M = q ? O : I;
-function Q(a, r) {
-  const c = D(a);
-  return M(b.flush, [a]), L(() => {
-    const m = [r ? b.svgClassName : b.doxClassName], l = c ? { ...H(c), ...H(a) } : H(a);
-    return "inline" in l && (l.display === "block" ? 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 = "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 = "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 = "inline-block" : l.displayA === "flex" ? l.displayA = "inline-flex" : l.displayA === "grid" && (l.displayA = "inline-grid"), delete l.inlineA), Object.entries(l).forEach(([d, g]) => {
-      m.push(b.get(d, g));
-    }), m;
-  }, [a, c]);
+})(F || (F = {}));
+const _ = F;
+function ee(u) {
+  const { clean: l, disabled: m, theme: c, component: s } = u;
+  return D(() => {
+    var b, h, p;
+    if (l)
+      return;
+    let n = _.Styles[s] ?? ((b = _.Styles.components) == null ? void 0 : b[s]);
+    if (!n)
+      return;
+    let f = c ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[c].styles } : n.styles;
+    return m ? c ? { ...f, ...n.disabled, ...(p = n.themes) == null ? void 0 : p[c].disabled } : { ...f, ...n.disabled } : f;
+  }, [s, l, m, c]);
+}
+const se = typeof window < "u" && typeof window.document < "u", ae = se ? q : U;
+function oe(u, l) {
+  const m = ee(u);
+  return ae(z.flush, [u]), D(() => {
+    const c = [l ? z.svgClassName : z.boxClassName], s = m ? { ...A(m), ...A(u) } : A(u);
+    return "inline" in s && (s.display === "block" ? 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 = "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 = "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 = "inline-block" : s.displayA === "flex" ? s.displayA = "inline-flex" : s.displayA === "grid" && (s.displayA = "inline-grid"), delete s.inlineA), Object.entries(s).forEach(([n, f]) => {
+      c.push(z.get(n, f));
+    }), c;
+  }, [u, m]);
+}
+function A(u) {
+  const l = { ...u };
+  return Object.keys(l).forEach((c) => {
+    const s = k[c];
+    s && (s.key in l || (l[s.key] = l[c]), delete l[c]);
+  }), l;
 }
-function H(a) {
-  const r = { ...a };
-  return Object.keys(r).forEach((m) => {
-    const l = V[m];
-    l && (l.key in r || (r[l.key] = r[m]), delete r[m]);
-  }), r;
+function le(...u) {
+  return u.reduce((l, m) => m ? typeof m == "string" ? (l.push(m), l) : Array.isArray(m) ? (l.push(...le(...m)), l) : (Object.entries(m).forEach(([c, s]) => {
+    s && l.push(c);
+  }), l) : l, []);
 }
 export {
-  b as S,
-  Q as u
+  z as S,
+  _ as T,
+  le as c,
+  oe as u
 };