@cronocode/react-box 1.7.2 → 1.7.3

package/core.js

@@ -0,0 +1,1144 @@
+import { useMemo as P, useLayoutEffect as U, useEffect as X } from "react";
+var e;
+((u) => {
+  ((a) => {
+    function c(s, n) {
+      return `${s}${n.replace("/", "-")}`;
+    }
+    a.fraction = c;
+    function v(s) {
+      return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
+    }
+    a.svg = v;
+  })(u.ClassName || (u.ClassName = {})), ((a) => {
+    function c(t, l) {
+      return `${l / 4}rem`;
+    }
+    a.rem = c;
+    function v(t, l) {
+      return `${l}px`;
+    }
+    a.px = v;
+    function s(t, l) {
+      const [r, f] = l.split("/");
+      return `${+r / +f * 100}%`;
+    }
+    a.fraction = s;
+    function n(t, l) {
+      switch (l) {
+        case "fit":
+          return "100%";
+        case "fit-screen":
+          return t.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+        default:
+          return l;
+      }
+    }
+    a.widthHeight = n;
+    function d(t) {
+      return (l, r) => `var(--${t}${r});`;
+    }
+    a.variables = d;
+    function p(t) {
+      return (l, r) => `var(--${t}${r});`;
+    }
+    a.svgVariables = p;
+    function h(t, l) {
+      return `repeat(${l},minmax(0,1fr))`;
+    }
+    a.gridColumns = h;
+    function g(t, l) {
+      return l === "full-row" ? "1/-1" : `span ${l}/span ${l}`;
+    }
+    a.gridColumn = g;
+    function V(t, l) {
+      return `${l}ms`;
+    }
+    a.ms = V;
+    function N(t, l) {
+      return `${l}deg`;
+    }
+    a.rotate = N;
+    function T(t, l) {
+      return l === "xAxis" ? "-1 1" : "1 -1";
+    }
+    a.flip = T;
+  })(u.Value || (u.Value = {}));
+})(e || (e = {}));
+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
+], Y = [
+  -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
+], m = [...i, ...Y], E = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], x = [
+  "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"
+], k = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
+  /** The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
+  display: {
+    cssNames: ["display"],
+    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] },
+    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"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  width: {
+    cssNames: ["width"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  minWidth: {
+    cssNames: ["min-width"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  maxWidth: {
+    cssNames: ["max-width"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  height: {
+    cssNames: ["height"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  minHeight: {
+    cssNames: ["min-height"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  maxHeight: {
+    cssNames: ["max-height"],
+    values1: { values: k, formatValue: e.Value.widthHeight },
+    values2: { values: i, formatValue: e.Value.rem },
+    values3: {
+      values: x,
+      formatValue: e.Value.fraction
+      // formatClassName: BoxStylesFormatters.ClassName.fraction,
+    }
+  },
+  position: {
+    cssNames: ["position"],
+    values1: { values: ["static", "relative", "absolute", "fixed", "sticky"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  top: {
+    cssNames: ["top"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  right: {
+    cssNames: ["right"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  bottom: {
+    cssNames: ["bottom"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  left: {
+    cssNames: ["left"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  inset: {
+    cssNames: ["inset"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  margin: {
+    cssNames: ["margin"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginHorizontal: {
+    cssNames: ["margin-inline"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginVertical: {
+    cssNames: ["margin-block"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginTop: {
+    cssNames: ["margin-top"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginRight: {
+    cssNames: ["margin-right"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginBottom: {
+    cssNames: ["margin-bottom"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginLeft: {
+    cssNames: ["margin-left"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  padding: {
+    cssNames: ["padding"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingHorizontal: {
+    cssNames: ["padding-inline"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingVertical: {
+    cssNames: ["padding-block"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingTop: {
+    cssNames: ["padding-top"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingRight: {
+    cssNames: ["padding-right"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingBottom: {
+    cssNames: ["padding-bottom"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingLeft: {
+    cssNames: ["padding-left"],
+    values1: { values: m, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  border: {
+    cssNames: ["border-width"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderHorizontal: {
+    cssNames: ["border-inline-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderVertical: {
+    cssNames: ["border-block-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderTop: {
+    cssNames: ["border-top-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRight: {
+    cssNames: ["border-right-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderBottom: {
+    cssNames: ["border-bottom-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderLeft: {
+    cssNames: ["border-left-width"],
+    values1: { values: m, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderStyle: {
+    cssNames: ["border-style"],
+    values1: { values: E },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadius: {
+    cssNames: ["border-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTop: {
+    cssNames: ["border-top-left-radius", "border-top-right-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusRight: {
+    cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottom: {
+    cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusLeft: {
+    cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTopLeft: {
+    cssNames: ["border-top-left-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTopRight: {
+    cssNames: ["border-top-right-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottomLeft: {
+    cssNames: ["border-bottom-left-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottomRight: {
+    cssNames: ["border-bottom-right-radius"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  cursor: {
+    cssNames: ["cursor"],
+    values1: {
+      values: [
+        "auto",
+        "default",
+        "none",
+        "context-menu",
+        "help",
+        "pointer",
+        "progress",
+        "wait",
+        "cell",
+        "crosshair",
+        "text",
+        "vertical-text",
+        "alias",
+        "copy",
+        "move",
+        "no-drop",
+        "not-allowed",
+        "e-resize",
+        "n-resize",
+        "ne-resize",
+        "nw-resize",
+        "s-resize",
+        "se-resize",
+        "sw-resize",
+        "w-resize",
+        "ew-resize",
+        "ns-resize",
+        "nesw-resize",
+        "nwse-resize",
+        "col-resize",
+        "row-resize",
+        "all-scroll",
+        "zoom-in",
+        "zoom-out",
+        "grab",
+        "grabbing"
+      ]
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  zIndex: {
+    cssNames: ["z-index"],
+    values1: {
+      values: [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 100, 101, 102, 103, 104, 105, 1e3, 1001, 1002, 1003, 1004, 1005]
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflow: {
+    cssNames: ["overflow"],
+    values1: { values: A },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowX: {
+    cssNames: ["overflow-x"],
+    values1: { values: A },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowY: {
+    cssNames: ["overflow-y"],
+    values1: { values: A },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  opacity: {
+    cssNames: ["opacity"],
+    values1: { values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  fontSize: {
+    cssNames: ["font-size"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: ["inherit"] },
+    values3: { values: [] }
+  },
+  fontStyle: {
+    cssNames: ["font-style"],
+    values1: { values: ["italic", "normal", "oblique"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  fontWeight: {
+    cssNames: ["font-weight"],
+    values1: { values: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  letterSpacing: {
+    cssNames: ["letter-spacing"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  lineHeight: {
+    cssNames: ["line-height"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: ["font-size"], formatValue: () => "1" },
+    values3: { values: [] }
+  },
+  textDecoration: {
+    cssNames: ["text-decoration"],
+    values1: { values: ["none", "underline", "overline", "line-through"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  textTransform: {
+    cssNames: ["text-transform"],
+    values1: { values: ["none", "capitalize", "lowercase", "uppercase"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  textAlign: {
+    cssNames: ["text-align"],
+    values1: { values: ["left", "right", "center", "justify"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexWrap: {
+    cssNames: ["flex-wrap"],
+    values1: { values: ["nowrap", "wrap", "wrap-reverse"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  justifyContent: {
+    cssNames: ["justify-content"],
+    values1: {
+      values: [
+        "start",
+        "end",
+        "flex-start",
+        "flex-end",
+        "center",
+        "left",
+        "right",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch"
+      ]
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  alignItems: {
+    cssNames: ["align-items"],
+    values1: {
+      values: ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end", "self-start", "self-end"]
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  alignContent: {
+    cssNames: ["align-content"],
+    values1: {
+      values: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "baseline"
+      ]
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flex1: {
+    cssNames: ["flex"],
+    values1: { values: [!0], formatValue: () => "1" },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexDirection: {
+    cssNames: ["flex-direction"],
+    values1: { values: ["row", "row-reverse", "column", "column-reverse"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  gap: {
+    cssNames: ["gap"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  rowGap: {
+    cssNames: ["row-gap"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  columnGap: {
+    cssNames: ["column-gap"],
+    values1: { values: i, formatValue: e.Value.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  order: {
+    cssNames: ["order"],
+    values1: { values: i },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexGrow: {
+    cssNames: ["flex-grow"],
+    values1: { values: i },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexShrink: {
+    cssNames: ["flex-shrink"],
+    values1: { values: i },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  alignSelf: {
+    cssNames: ["align-self"],
+    values1: { values: L },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  justifySelf: {
+    cssNames: ["justify-self"],
+    values1: { values: L },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  gridColumns: {
+    cssNames: ["grid-template-columns"],
+    values1: { values: i, formatValue: e.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 },
+    values3: { values: [] }
+  },
+  colStart: {
+    cssNames: ["grid-column-start"],
+    values1: { values: i },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  colEnd: {
+    cssNames: ["grid-column-end"],
+    values1: { values: i },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outline: {
+    cssNames: ["outline-width"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outlineStyle: {
+    cssNames: ["outline-style"],
+    values1: { values: E },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outlineOffset: {
+    cssNames: ["outline-offset"],
+    values1: { values: i, formatValue: e.Value.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  transition: {
+    cssNames: ["transition-property"],
+    values1: { values: ["none", "all"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  transitionDuration: {
+    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
+    },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  userSelect: {
+    cssNames: ["user-select"],
+    values1: { values: ["none", "auto", "text", "all"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  appearance: {
+    cssNames: ["appearance"],
+    values1: { values: ["none"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  pointerEvents: {
+    cssNames: ["pointer-events"],
+    values1: { values: ["none", "auto", "all"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  whiteSpace: {
+    cssNames: ["white-space"],
+    values1: { values: ["break-spaces", "normal", "nowrap", "pre", "pre-line", "pre-wrap"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  textOverflow: {
+    cssNames: ["text-overflow"],
+    values1: { values: ["clip", "ellipsis"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  rotate: {
+    cssNames: ["rotate"],
+    values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: e.Value.rotate },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flip: {
+    cssNames: ["scale"],
+    values1: { values: ["xAxis", "yAxis"], formatValue: e.Value.flip },
+    values2: { values: [] },
+    values3: { values: [] }
+  }
+}, I = {
+  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") }
+}, _ = {
+  fill: {
+    cssNames: ["fill"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  },
+  stroke: {
+    cssNames: ["stroke"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  }
+}, J = ["H", "F", "A"], z = {
+  hover: { className: "_h" },
+  focus: { className: "_f" }
+};
+Object.keys(I).forEach((u) => {
+  o[u] = I[u], o[u].isThemeStyle = !0;
+});
+Object.keys(_).forEach((u) => {
+  o[u] = _[u], o[u].isThemeStyle = !0;
+});
+const C = {
+  w: { ...o.width, key: "width" },
+  h: { ...o.height, key: "height" },
+  m: { ...o.margin, key: "margin" },
+  mx: { ...o.marginHorizontal, key: "marginHorizontal" },
+  my: { ...o.marginVertical, key: "marginVertical" },
+  mt: { ...o.marginTop, key: "marginTop" },
+  mr: { ...o.marginRight, key: "marginRight" },
+  mb: { ...o.marginBottom, key: "marginBottom" },
+  ml: { ...o.marginLeft, key: "marginLeft" },
+  p: { ...o.padding, key: "padding" },
+  px: { ...o.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...o.paddingVertical, key: "paddingVertical" },
+  pt: { ...o.paddingTop, key: "paddingTop" },
+  pr: { ...o.paddingRight, key: "paddingRight" },
+  pb: { ...o.paddingBottom, key: "paddingBottom" },
+  pl: { ...o.paddingLeft, key: "paddingLeft" },
+  b: { ...o.border, key: "border" },
+  bx: { ...o.borderHorizontal, key: "borderHorizontal" },
+  by: { ...o.borderVertical, key: "borderVertical" },
+  bt: { ...o.borderTop, key: "borderTop" },
+  br: { ...o.borderRight, key: "borderRight" },
+  bb: { ...o.borderBottom, key: "borderBottom" },
+  bl: { ...o.borderLeft, key: "borderLeft" },
+  jc: { ...o.justifyContent, key: "justifyContent" },
+  ai: { ...o.alignItems, key: "alignItems" },
+  ac: { ...o.alignContent, key: "alignContent" },
+  d: { ...o.flexDirection, key: "flexDirection" }
+}, Q = Object.keys(o), Z = Object.keys(C);
+J.forEach((u) => {
+  Q.forEach((a) => {
+    o[`${a}${u}`] = { ...o[a] }, o[`${a}${u}`].pseudoSuffix = u;
+  }), Z.forEach((a) => {
+    C[`${a}${u}`] = { ...C[a], key: `${C[a].key}${u}` }, C[`${a}${u}`].pseudoSuffix = u;
+  });
+});
+class K {
+  constructor() {
+    this._index = 0, this._cache = {};
+  }
+  getIdentity(a) {
+    return this._cache[a] || (this._cache[a] = this.getByIndex(this._index++)), this._cache[a];
+  }
+  getByIndex(a) {
+    const { first: c, next: v } = ee, s = a - c.length;
+    if (s < 0)
+      return c[a];
+    const n = Math.floor(s / v.length), d = s - n * v.length;
+    return this.getByIndex(n) + v[d];
+  }
+}
+const ee = {
+  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+};
+var F;
+((u) => {
+  u.boxClassName = "_box", u.svgClassName = "_svg";
+  const a = `: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 K(), v = Object.keys(o), s = T();
+  let n = !1;
+  const d = v.reduce(
+    (t, l) => (t[l] = /* @__PURE__ */ new Set(), t),
+    {}
+  );
+  function p(t, l) {
+    if (t in o)
+      return g(t, l);
+    if (t in z)
+      return z[t].className;
+  }
+  u.get = p;
+  function h() {
+    if (n) {
+      console.info("%c💬Flush Dox Styles", "color: #00ffff");
+      let t = V([a]);
+      t = V(t, "H"), t = V(t, "F"), t = V(t, "A"), s.innerHTML = t.join(""), n = !1;
+    }
+  }
+  u.flush = h;
+  function g(t, l) {
+    var b;
+    d[t].has(l) || (n = !0, d[t].add(l));
+    const r = N(t, l), f = ((b = r.formatClassName) == null ? void 0 : b.call(r, t, l)) ?? `${t}${l}`;
+    return `-${c.getIdentity(f)}`;
+  }
+  function V(t, l) {
+    return Object.entries(d).filter(([f]) => {
+      var b;
+      return ((b = o[f]) == null ? void 0 : b.pseudoSuffix) === l;
+    }).reduce((f, [b, W]) => (W.forEach((H) => {
+      var R;
+      const y = N(b, H), w = `.${g(b, H)}`;
+      let $ = [];
+      l ? l === "H" ? $ = [
+        ...r(`${w}:hover`, y),
+        ...r(`.${z.hover.className}:hover>${w}`, y)
+      ] : l === "F" ? $ = [
+        ...r(`${w}:focus-within`, y),
+        ...r(`.${z.focus.className}:focus-within>${w}`, y)
+      ] : l === "A" && ($ = r(`${w}:active`, y)) : $ = r(w, y);
+      const G = ((R = y.formatValue) == null ? void 0 : R.call(y, b, H)) ?? H, M = o[b].cssNames.map((q) => `${q}:${G};`).join("");
+      f.push(`${$.join(",")}{${M}}`);
+    }), f), t);
+    function r(f, b) {
+      return b.formatSelector ? b.formatSelector(f) : [f];
+    }
+  }
+  function N(t, l) {
+    const r = o[t];
+    return r.isThemeStyle ? r : r.values1.values.includes(l) ? r.values1 : r.values2.values.includes(l) ? r.values2 : r.values3;
+  }
+  function T() {
+    const t = "crono-styles", r = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let f = r.getElementById(t);
+    return f || (f = r.createElement("style"), f.setAttribute("id", t), f.setAttribute("type", "text/css"), r.head.insertBefore(f, r.head.firstChild)), f;
+  }
+})(F || (F = {}));
+const S = F, j = {
+  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
+    }
+  }
+};
+var O;
+((u) => {
+  u.Styles = j;
+  function a(s) {
+    u.Styles = s, v();
+  }
+  u.setup = a;
+  function c(s, n) {
+    const d = Object.entries(s.colors).map(([l, r]) => `--color${l}: ${r};`).join(`
+  `), p = Object.entries(s.shadows).map(([l, r]) => `--shadow${l}: ${r};`).join(`
+  `), h = Object.entries(s.backgrounds).map(([l, r]) => `--background${l}: ${r};`).join(`
+  `), g = [":root {"];
+    d && g.push(`  ${d}`), p && g.push(`  ${p}`), h && g.push(`  ${h}`), g.push("}");
+    const V = Object.keys(s.colors).map((l) => `'${l}'`).join(" | "), N = Object.keys(s.backgrounds).map((l) => `'${l}'`).join(" | "), T = Object.keys(s.shadows).map((l) => `'${l}'`).join(" | "), t = `import '@cronocode/react-box';
+  
+  declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${V};
+    type BackgroundType = ${N};
+    type ShadowType = ${T};
+  
+    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;
+      }
+    }
+  }
+  `;
+    return {
+      variables: g.join(`
+`),
+      boxDts: t
+    };
+  }
+  u.setupAugmentedProps = c;
+  function v() {
+    Object.keys(j).forEach((n) => {
+      const d = u.Styles[n], p = j[n];
+      d ? (d.styles = { ...p.styles, ...d.styles }, d.disabled && p.disabled && (d.disabled = { ...p.disabled, ...d.disabled })) : u.Styles[n] = j[n];
+    });
+  }
+})(O || (O = {}));
+const D = O;
+function se(u) {
+  const { clean: a, disabled: c, theme: v, component: s } = u;
+  return P(() => {
+    var p, h, g;
+    if (a)
+      return;
+    let n = D.Styles[s] ?? ((p = D.Styles.components) == null ? void 0 : p[s]);
+    if (!n)
+      return;
+    let d = v ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[v].styles } : n.styles;
+    return c ? v ? { ...d, ...n.disabled, ...(g = n.themes) == null ? void 0 : g[v].disabled } : { ...d, ...n.disabled } : d;
+  }, [s, a, c, v]);
+}
+const ae = typeof window < "u" && typeof window.document < "u", le = ae ? U : X;
+function re(u, a) {
+  const c = se(u);
+  return le(S.flush, [u]), P(() => {
+    const v = [a ? S.svgClassName : S.boxClassName], s = c ? { ...B(c), ...B(u) } : B(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, d]) => {
+      v.push(S.get(n, d));
+    }), v;
+  }, [u, c]);
+}
+function B(u) {
+  const a = { ...u };
+  return Object.keys(a).forEach((v) => {
+    const s = C[v];
+    s && (s.key in a || (a[s.key] = a[v]), delete a[v]);
+  }), a;
+}
+function ue(...u) {
+  return u.reduce((a, c) => c ? typeof c == "string" ? (a.push(c), a) : Array.isArray(c) ? (a.push(...ue(...c)), a) : (Object.entries(c).forEach(([v, s]) => {
+    s && a.push(v);
+  }), a) : a, []);
+}
+export {
+  S,
+  D as T,
+  ue as c,
+  re as u
+};