@cronocode/react-box 1.6.1 → 1.6.3

package/components/dox.mjs

@@ -1,178 +1,235 @@
-import A, { useLayoutEffect as D, useMemo as E, forwardRef as F, useState as P } from "react";
-import { I as _, C as M } from "../utils/utils.mjs";
+import F, { useLayoutEffect as I, useMemo as E, forwardRef as _, useState as D } from "react";
+import { I as P, C as M } from "../utils/utils.mjs";
 import { useTheme as W } from "../theme.mjs";
-const G = ["H", "F", "A"], t = [
-  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
-], q = [
-  -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
-], r = [...t, ...q], L = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["auto", "hidden", "scroll", "visible"], V = [
-  "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"
-], y = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
 var e;
-((s) => {
-  function a(f, m) {
-    return `${m / 4}rem`;
-  }
-  s.rem = a;
-  function d(f, m) {
-    return `${m}px`;
-  }
-  s.px = d;
-  function i(f, m) {
-    const [b, c] = m.split("/");
-    return `${+b / +c * 100}%`;
-  }
-  s.fraction = i;
-  function n(f, m) {
-    switch (m) {
-      case "fit":
-        return "100%";
-      case "fit-screen":
-        return f.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
-      default:
-        return m;
+((a) => {
+  ((r) => {
+    function n(o, d) {
+      return `${o}${d.replace("/", "-")}`;
     }
-  }
-  s.widthHeight = n;
-  function p(f) {
-    return (m, b) => `var(--${f}${b});`;
-  }
-  s.variables = p;
+    r.fraction = n;
+    function v(o) {
+      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
+    }
+    r.svg = v;
+  })(a.ClassName || (a.ClassName = {})), ((r) => {
+    function n(u, l) {
+      return `${l / 4}rem`;
+    }
+    r.rem = n;
+    function v(u, l) {
+      return `${l}px`;
+    }
+    r.px = v;
+    function o(u, l) {
+      const [i, c] = l.split("/");
+      return `${+i / +c * 100}%`;
+    }
+    r.fraction = o;
+    function d(u, l) {
+      switch (l) {
+        case "fit":
+          return "100%";
+        case "fit-screen":
+          return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+        default:
+          return l;
+      }
+    }
+    r.widthHeight = d;
+    function g(u) {
+      return (l, i) => `var(--${u}${i});`;
+    }
+    r.variables = g;
+    function y(u) {
+      return (l, i) => `var(--${u}${i});`;
+    }
+    r.svgVariables = y;
+    function x(u, l) {
+      return `repeat(${l},minmax(0,1fr))`;
+    }
+    r.gridColumns = x;
+    function f(u, l) {
+      return l === "full-row" ? "1/-1" : `span ${l}/span ${l}`;
+    }
+    r.gridColumn = f;
+    function h(u, l) {
+      return `${l}ms`;
+    }
+    r.ms = h;
+    function V(u, l) {
+      return `${l}deg`;
+    }
+    r.rotate = V;
+    function b(u, l) {
+      return l === "xAxis" ? "-1 1" : "1 -1";
+    }
+    r.flip = b;
+  })(a.Value || (a.Value = {}));
 })(e || (e = {}));
-var h;
-((s) => {
-  function a(d, i) {
-    return `${d}${i.replace("/", "-")}`;
+const G = ["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 R = {
+  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") }
+}, j = {
+  fill: {
+    cssNames: ["fill"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  },
+  stroke: {
+    cssNames: ["stroke"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
   }
-  s.fraction = a;
-})(h || (h = {}));
-const j = {
-  shadow: { cssNames: ["box-shadow"], formatValue: e.variables("shadow") },
-  background: { cssNames: ["background"], formatValue: e.variables("background") },
-  color: { cssNames: ["color"], formatValue: e.variables("color") },
-  bgColor: { cssNames: ["background-color"], formatValue: e.variables("color") },
-  borderColor: { cssNames: ["border-color"], formatValue: e.variables("color") },
-  outlineColor: { cssNames: ["outline-color"], formatValue: e.variables("color") }
-}, l = {
+}, $ = {
+  hover: { className: "_h" },
+  focus: { className: "_f" }
+}, t = {
   display: {
     cssNames: ["display"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
@@ -187,39 +244,63 @@ const j = {
   },
   width: {
     cssNames: ["width"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: y, formatValue: e.widthHeight },
-    values2: { values: t, formatValue: e.rem },
-    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
+    values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
+    values2: { values: s.positiveSizes, formatValue: e.Value.rem },
+    values3: {
+      values: s.widthHeightFractions,
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
+    }
   },
   position: {
     cssNames: ["position"],
@@ -229,217 +310,217 @@ const j = {
   },
   top: {
     cssNames: ["top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: s.sizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   border: {
     cssNames: ["border-width"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: s.sizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: L },
+    values1: { values: s.borderAndOutlineStyles },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -498,19 +579,19 @@ const j = {
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: R },
+    values1: { values: s.overflows },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: R },
+    values1: { values: s.overflows },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: R },
+    values1: { values: s.overflows },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -522,7 +603,7 @@ const j = {
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -540,13 +621,13 @@ const j = {
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -635,91 +716,91 @@ const j = {
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: t, formatValue: e.rem },
+    values1: { values: s.positiveSizes, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: t },
+    values1: { values: s.positiveSizes },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: t },
+    values1: { values: s.positiveSizes },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: t },
+    values1: { values: s.positiveSizes },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
+    values1: { values: s.alignSelf },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
+    values1: { values: s.alignSelf },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: t, formatValue: (s, a) => `repeat(${a},minmax(0,1fr))` },
+    values1: { values: s.positiveSizes, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: t, formatValue: (s, a) => `span ${a}/span ${a}` },
-    values2: { values: ["full-row"], formatValue: (s, a) => "1/-1" },
+    values1: { values: s.positiveSizes, formatValue: e.Value.gridColumn },
+    values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: t, formatValue: (s, a) => `${a}` },
+    values1: { values: s.positiveSizes },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: t, formatValue: (s, a) => `${a}` },
+    values1: { values: s.positiveSizes },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: L },
+    values1: { values: s.borderAndOutlineStyles },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: t, formatValue: e.px },
+    values1: { values: s.positiveSizes, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -733,7 +814,7 @@ const j = {
     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: (s, a) => `${a}ms`
+      formatValue: e.Value.ms
     },
     values2: { values: [] },
     values3: { values: [] }
@@ -768,115 +849,155 @@ const j = {
     values2: { values: [] },
     values3: { values: [] }
   }
+}, C = {
+  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: [] }
+  }
 };
-Object.keys(j).forEach((s) => {
-  l[s] = j[s], l[s].isThemeStyle = !0;
+Object.keys(C).forEach((a) => {
+  t[a] = C[a];
+});
+Object.keys(R).forEach((a) => {
+  t[a] = R[a], t[a].isThemeStyle = !0;
 });
-const x = {
-  m: { ...l.margin, key: "margin" },
-  mx: { ...l.marginHorizontal, key: "marginHorizontal" },
-  my: { ...l.marginVertical, key: "marginVertical" },
-  mt: { ...l.marginTop, key: "marginTop" },
-  mr: { ...l.marginRight, key: "marginRight" },
-  mb: { ...l.marginBottom, key: "marginBottom" },
-  ml: { ...l.marginLeft, key: "marginLeft" },
-  p: { ...l.padding, key: "padding" },
-  px: { ...l.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...l.paddingVertical, key: "paddingVertical" },
-  pt: { ...l.paddingTop, key: "paddingTop" },
-  pr: { ...l.paddingRight, key: "paddingRight" },
-  pb: { ...l.paddingBottom, key: "paddingBottom" },
-  pl: { ...l.paddingLeft, key: "paddingLeft" },
-  b: { ...l.border, key: "border" },
-  bx: { ...l.borderHorizontal, key: "borderHorizontal" },
-  by: { ...l.borderVertical, key: "borderVertical" },
-  bt: { ...l.borderTop, key: "borderTop" },
-  br: { ...l.borderRight, key: "borderRight" },
-  bb: { ...l.borderBottom, key: "borderBottom" },
-  bl: { ...l.borderLeft, key: "borderLeft" },
-  jc: { ...l.justifyContent, key: "justifyContent" },
-  ai: { ...l.alignItems, key: "alignItems" },
-  ac: { ...l.alignContent, key: "alignContent" },
-  d: { ...l.flexDirection, key: "flexDirection" }
-}, U = Object.keys(l), X = Object.keys(x);
-G.forEach((s) => {
-  U.forEach((a) => {
-    l[`${a}${s}`] = { ...l[a] }, l[`${a}${s}`].pseudoSuffix = s;
-  }), X.forEach((a) => {
-    x[`${a}${s}`] = { ...x[a], key: `${x[a].key}${s}` }, x[`${a}${s}`].pseudoSuffix = s;
+Object.keys(j).forEach((a) => {
+  t[a] = j[a], t[a].isThemeStyle = !0;
+});
+const z = {
+  w: { ...t.width, key: "width" },
+  h: { ...t.height, key: "height" },
+  m: { ...t.margin, key: "margin" },
+  mx: { ...t.marginHorizontal, key: "marginHorizontal" },
+  my: { ...t.marginVertical, key: "marginVertical" },
+  mt: { ...t.marginTop, key: "marginTop" },
+  mr: { ...t.marginRight, key: "marginRight" },
+  mb: { ...t.marginBottom, key: "marginBottom" },
+  ml: { ...t.marginLeft, key: "marginLeft" },
+  p: { ...t.padding, key: "padding" },
+  px: { ...t.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...t.paddingVertical, key: "paddingVertical" },
+  pt: { ...t.paddingTop, key: "paddingTop" },
+  pr: { ...t.paddingRight, key: "paddingRight" },
+  pb: { ...t.paddingBottom, key: "paddingBottom" },
+  pl: { ...t.paddingLeft, key: "paddingLeft" },
+  b: { ...t.border, key: "border" },
+  bx: { ...t.borderHorizontal, key: "borderHorizontal" },
+  by: { ...t.borderVertical, key: "borderVertical" },
+  bt: { ...t.borderTop, key: "borderTop" },
+  br: { ...t.borderRight, key: "borderRight" },
+  bb: { ...t.borderBottom, key: "borderBottom" },
+  bl: { ...t.borderLeft, key: "borderLeft" },
+  jc: { ...t.justifyContent, key: "justifyContent" },
+  ai: { ...t.alignItems, key: "alignItems" },
+  ac: { ...t.alignContent, key: "alignContent" },
+  d: { ...t.flexDirection, key: "flexDirection" }
+}, q = Object.keys(t), U = Object.keys(z);
+G.forEach((a) => {
+  q.forEach((r) => {
+    t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
+  }), U.forEach((r) => {
+    z[`${r}${a}`] = { ...z[r], key: `${z[r].key}${a}` }, z[`${r}${a}`].pseudoSuffix = a;
   });
 });
 var w;
-((s) => {
-  const a = new _(), d = [...Object.keys(l), ...Object.keys(j)], i = z();
-  let n = !1;
-  const p = d.reduce((v, u) => (v[u] = /* @__PURE__ */ new Set(), v), {});
-  s.doxClassName = "_dox";
-  function f(v, u) {
-    if (v in l)
-      return b(v, u);
+((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;}}
+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}{width: 1.5rem;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, n = new P(), v = Object.keys(t), o = b();
+  let d = !1;
+  const g = v.reduce((u, l) => (u[l] = /* @__PURE__ */ new Set(), u), {});
+  function y(u, l) {
+    if (u in t)
+      return f(u, l);
+    if (u in $)
+      return $[u].className;
+    if (u in C)
+      return f(u, l);
   }
-  s.get = f;
-  function m() {
-    if (n) {
+  a.get = y;
+  function x() {
+    if (d) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      const v = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
-      let u = c([v]);
-      u = c(u, "H"), u = c(u, "F"), u = c(u, "A"), i.innerHTML = u.join(""), n = !1;
+      let u = h([r]);
+      u = h(u, "H"), u = h(u, "F"), u = h(u, "A"), o.innerHTML = u.join(""), d = !1;
     }
   }
-  s.flush = m;
-  function b(v, u) {
-    var $;
-    p[v].has(u) || (n = !0, p[v].add(u));
-    const o = k(v, u), g = (($ = o.formatClassName) == null ? void 0 : $.call(o, v, u)) ?? `${v}${u}`;
-    return `-${a.getIdentity(g)}`;
+  a.flush = x;
+  function f(u, l) {
+    var m;
+    g[u].has(l) || (d = !0, g[u].add(l));
+    const i = V(u, l), c = ((m = i.formatClassName) == null ? void 0 : m.call(i, u, l)) ?? `${u}${l}`;
+    return `-${n.getIdentity(c)}`;
   }
-  function c(v, u) {
-    return Object.entries(p).filter(([o]) => {
-      var g;
-      return ((g = l[o]) == null ? void 0 : g.pseudoSuffix) === u;
-    }).reduce((o, [g, $]) => ($.forEach((H) => {
+  function h(u, l) {
+    return Object.entries(g).filter(([c]) => {
+      var m;
+      return ((m = t[c]) == null ? void 0 : m.pseudoSuffix) === l;
+    }).reduce((c, [m, L]) => (L.forEach((k) => {
       var T;
-      let N = b(g, H);
-      u === "H" && (N = `${N}:hover`), u === "F" && (N = `${N}:focus-within`), u === "A" && (N = `${N}:active`);
-      const C = k(g, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, g, H)) ?? H, I = l[g].cssNames.map((O) => `${O}:${B};`).join("");
-      o.push(`.${N}{${I}}`);
-    }), o), v);
+      const p = V(m, k), N = `.${f(m, k)}`;
+      let S = [];
+      l ? l === "H" ? S = [
+        ...i(`${N}:hover`, p),
+        ...i(`.${$.hover.className}:hover>${N}`, p)
+      ] : l === "F" ? S = [
+        ...i(`${N}:focus-within`, p),
+        ...i(`.${$.focus.className}:focus-within>${N}`, p)
+      ] : l === "A" && (S = i(`${N}:active`, p)) : S = i(N, p);
+      const A = ((T = p.formatValue) == null ? void 0 : T.call(p, m, k)) ?? k, B = t[m].cssNames.map((O) => `${O}:${A};`).join("");
+      c.push(`${S.join(",")}{${B}}`);
+    }), c), u);
+    function i(c, m) {
+      return m.formatSelector ? m.formatSelector(c) : [c];
+    }
   }
-  function k(v, u) {
-    const o = l[v];
-    return o.isThemeStyle ? o : o.values1.values.includes(u) ? o.values1 : o.values2.values.includes(u) ? o.values2 : o.values3;
+  function V(u, l) {
+    const i = t[u];
+    return i.isThemeStyle ? i : i.values1.values.includes(l) ? i.values1 : i.values2.values.includes(l) ? i.values2 : i.values3;
   }
-  function z() {
-    const v = "crono-styles";
-    let u = document.getElementById(v);
-    return u || (u = document.createElement("style"), u.setAttribute("id", v), u.setAttribute("type", "text/css"), document.head.insertBefore(u, document.head.firstChild)), u;
+  function b() {
+    const u = "crono-styles";
+    let l = document.getElementById(u);
+    return l || (l = document.createElement("style"), l.setAttribute("id", u), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
   }
 })(w || (w = {}));
-function Y(s) {
-  const a = W(s);
-  return D(w.flush, [s]), E(() => {
-    const d = [w.doxClassName], i = a ? { ...S(a), ...S(s) } : S(s);
-    return Object.entries(i).forEach(([n, p]) => {
-      d.push(w.get(n, p));
-    }), d;
-  }, [s, a]);
+function X(a, r) {
+  const n = W(a);
+  return I(w.flush, [a]), E(() => {
+    const v = [r ? w.svgClassName : w.doxClassName], o = n ? { ...H(n), ...H(a) } : H(a);
+    return Object.entries(o).forEach(([d, g]) => {
+      v.push(w.get(d, g));
+    }), v;
+  }, [a, n]);
 }
-function S(s) {
-  const a = { ...s };
-  return Object.keys(a).forEach((i) => {
-    const n = x[i];
-    n && (n.key in a || (a[n.key] = a[i]), delete a[i]);
-  }), a;
+function H(a) {
+  const r = { ...a };
+  return Object.keys(r).forEach((v) => {
+    const o = z[v];
+    o && (o.key in r || (r[o.key] = r[v]), delete r[v]);
+  }), r;
 }
-function J(s, a) {
-  const { tag: d, children: i, props: n, className: p, style: f } = s, m = Y(s), b = E(() => M.classNames(p, m).join(" "), [s]), c = { ...n, className: b };
-  f && (c.style = f), a && (c.ref = a);
-  const [k, z] = P(!1), v = typeof i == "function";
-  return v && (c.onMouseEnter = () => z(!0), c.onMouseLeave = () => z(!1)), A.createElement(d || "div", c, v ? i({ isHover: k }) : i);
+function Y(a, r) {
+  const { tag: n, children: v, props: o, className: d, style: g } = a, y = X(a, n === "svg"), x = E(() => M.classNames(d, y).join(" "), [a]), f = { ...o, className: x };
+  g && (f.style = g), r && (f.ref = r);
+  const [h, V] = D(!1), b = typeof v == "function";
+  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), F.createElement(n || "div", f, b ? v({ isHover: h }) : v);
 }
-const se = F(J);
+const ee = _(Y);
 export {
-  se as default
+  ee as default
 };