@cronocode/react-box 1.5.6 → 1.5.9

package/components/dox.mjs

@@ -0,0 +1,877 @@
+import O, { useEffect as A, useMemo as L, forwardRef as D, useState as F } from "react";
+import { I as _, 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
+], P = [
+  -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
+], v = [...t, ...P], j = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["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"
+], y = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
+var e;
+((s) => {
+  function u(c, i) {
+    return `${i / 4}rem`;
+  }
+  s.rem = u;
+  function d(c, i) {
+    return `${i}px`;
+  }
+  s.px = d;
+  function m(c, i) {
+    const [b, n] = i.split("/");
+    return `${+b / +n * 100}%`;
+  }
+  s.fraction = m;
+  function g(c, i) {
+    switch (i) {
+      case "fit":
+        return "100%";
+      case "fit-screen":
+        return c.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+      default:
+        return i;
+    }
+  }
+  s.widthHeight = g;
+  function p(c) {
+    return (i, b) => `var(--${c}${b});`;
+  }
+  s.variables = p;
+})(e || (e = {}));
+var h;
+((s) => {
+  function u(d, m) {
+    return `${d}${m.replace("/", "-")}`;
+  }
+  s.fraction = u;
+})(h || (h = {}));
+const S = {
+  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") }
+}, a = {
+  display: {
+    cssNames: ["display"],
+    values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  boxSizing: {
+    cssNames: ["box-sizing"],
+    values1: { values: ["border-box", "content-box"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  width: {
+    cssNames: ["width"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  minWidth: {
+    cssNames: ["min-width"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  maxWidth: {
+    cssNames: ["max-width"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  height: {
+    cssNames: ["height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  minHeight: {
+    cssNames: ["min-height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  maxHeight: {
+    cssNames: ["max-height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  position: {
+    cssNames: ["position"],
+    values1: { values: ["static", "relative", "absolute", "fixed", "sticky"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  top: {
+    cssNames: ["top"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  right: {
+    cssNames: ["right"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  bottom: {
+    cssNames: ["bottom"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  left: {
+    cssNames: ["left"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  inset: {
+    cssNames: ["inset"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  margin: {
+    cssNames: ["margin"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginHorizontal: {
+    cssNames: ["margin-inline"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginVertical: {
+    cssNames: ["margin-block"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginTop: {
+    cssNames: ["margin-top"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginRight: {
+    cssNames: ["margin-right"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginBottom: {
+    cssNames: ["margin-bottom"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginLeft: {
+    cssNames: ["margin-left"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  padding: {
+    cssNames: ["padding"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingHorizontal: {
+    cssNames: ["padding-inline"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingVertical: {
+    cssNames: ["padding-block"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingTop: {
+    cssNames: ["padding-top"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingRight: {
+    cssNames: ["padding-right"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingBottom: {
+    cssNames: ["padding-bottom"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingLeft: {
+    cssNames: ["padding-left"],
+    values1: { values: v, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  border: {
+    cssNames: ["border-width"],
+    values1: { values: t, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderHorizontal: {
+    cssNames: ["border-inline-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderVertical: {
+    cssNames: ["border-block-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderTop: {
+    cssNames: ["border-top-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRight: {
+    cssNames: ["border-right-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderBottom: {
+    cssNames: ["border-bottom-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderLeft: {
+    cssNames: ["border-left-width"],
+    values1: { values: v, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderStyle: {
+    cssNames: ["border-style"],
+    values1: { values: j },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadius: {
+    cssNames: ["border-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTop: {
+    cssNames: ["border-top-left-radius", "border-top-right-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusRight: {
+    cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottom: {
+    cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusLeft: {
+    cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTopLeft: {
+    cssNames: ["border-top-left-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusTopRight: {
+    cssNames: ["border-top-right-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottomLeft: {
+    cssNames: ["border-bottom-left-radius"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRadiusBottomRight: {
+    cssNames: ["border-bottom-right-radius"],
+    values1: { values: t, formatValue: e.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: R },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowX: {
+    cssNames: ["overflow-x"],
+    values1: { values: R },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowY: {
+    cssNames: ["overflow-y"],
+    values1: { values: R },
+    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: t, formatValue: e.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: t, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  lineHeight: {
+    cssNames: ["line-height"],
+    values1: { values: t, formatValue: e.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: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  rowGap: {
+    cssNames: ["row-gap"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  columnGap: {
+    cssNames: ["column-gap"],
+    values1: { values: t, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  order: {
+    cssNames: ["order"],
+    values1: { values: t },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexGrow: {
+    cssNames: ["flex-grow"],
+    values1: { values: t },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flexShrink: {
+    cssNames: ["flex-shrink"],
+    values1: { values: t },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  alignSelf: {
+    cssNames: ["align-self"],
+    values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  justifySelf: {
+    cssNames: ["justify-self"],
+    values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  gridColumns: {
+    cssNames: ["grid-template-columns"],
+    values1: { values: t, formatValue: (s, u) => `repeat(${u},minmax(0,1fr))` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  colSpan: {
+    cssNames: ["grid-column"],
+    values1: { values: t, formatValue: (s, u) => `span ${u}/span ${u}` },
+    values2: { values: ["full-row"], formatValue: (s, u) => "1/-1" },
+    values3: { values: [] }
+  },
+  colStart: {
+    cssNames: ["grid-column-start"],
+    values1: { values: t, formatValue: (s, u) => `${u}` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  colEnd: {
+    cssNames: ["grid-column-end"],
+    values1: { values: t, formatValue: (s, u) => `${u}` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outline: {
+    cssNames: ["outline-width"],
+    values1: { values: t, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outlineStyle: {
+    cssNames: ["outline-style"],
+    values1: { values: j },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outlineOffset: {
+    cssNames: ["outline-offset"],
+    values1: { values: t, formatValue: e.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: (s, u) => `${u}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: [] }
+  }
+};
+Object.keys(S).forEach((s) => {
+  a[s] = S[s], a[s].isThemeStyle = !0;
+});
+const V = {
+  m: { ...a.margin, key: "margin" },
+  mx: { ...a.marginHorizontal, key: "marginHorizontal" },
+  my: { ...a.marginVertical, key: "marginVertical" },
+  mt: { ...a.marginTop, key: "marginTop" },
+  mr: { ...a.marginRight, key: "marginRight" },
+  mb: { ...a.marginBottom, key: "marginBottom" },
+  ml: { ...a.marginLeft, key: "marginLeft" },
+  p: { ...a.padding, key: "padding" },
+  px: { ...a.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...a.paddingVertical, key: "paddingVertical" },
+  pt: { ...a.paddingTop, key: "paddingTop" },
+  pr: { ...a.paddingRight, key: "paddingRight" },
+  pb: { ...a.paddingBottom, key: "paddingBottom" },
+  pl: { ...a.paddingLeft, key: "paddingLeft" },
+  b: { ...a.border, key: "border" },
+  bx: { ...a.borderHorizontal, key: "borderHorizontal" },
+  by: { ...a.borderVertical, key: "borderVertical" },
+  bt: { ...a.borderTop, key: "borderTop" },
+  br: { ...a.borderRight, key: "borderRight" },
+  bb: { ...a.borderBottom, key: "borderBottom" },
+  bl: { ...a.borderLeft, key: "borderLeft" },
+  jc: { ...a.justifyContent, key: "justifyContent" },
+  ai: { ...a.alignItems, key: "alignItems" },
+  ac: { ...a.alignContent, key: "alignContent" },
+  d: { ...a.flexDirection, key: "flexDirection" }
+}, q = Object.keys(a), U = Object.keys(V);
+G.forEach((s) => {
+  q.forEach((u) => {
+    a[`${u}${s}`] = { ...a[u] }, a[`${u}${s}`].pseudoSuffix = s;
+  }), U.forEach((u) => {
+    V[`${u}${s}`] = { ...V[u], key: `${V[u].key}${s}` }, V[`${u}${s}`].pseudoSuffix = s;
+  });
+});
+var w;
+((s) => {
+  const u = new _(), d = [...Object.keys(a), ...Object.keys(S)], m = z();
+  let g = !1;
+  const p = d.reduce((r, l) => (r[l] = /* @__PURE__ */ new Set(), r), {});
+  s.doxClassName = "_dox";
+  function c(r, l) {
+    if (r in a)
+      return b(r, l);
+    if (r in V)
+      return b(V[r].key, l);
+  }
+  s.get = c;
+  function i() {
+    if (g) {
+      console.info("%c💬Flush Dox Styles", "color: #00ffff");
+      const r = `.${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 l = n([r]);
+      l = n(l, "H"), l = n(l, "F"), l = n(l, "A"), m.innerHTML = l.join(""), g = !1;
+    }
+  }
+  s.flush = i;
+  function b(r, l) {
+    var $;
+    p[r].has(l) || (g = !0, p[r].add(l));
+    const o = k(r, l), f = (($ = o.formatClassName) == null ? void 0 : $.call(o, r, l)) ?? `${r}${l}`;
+    return `-${u.getIdentity(f)}`;
+  }
+  function n(r, l) {
+    return Object.entries(p).filter(([o]) => {
+      var f;
+      return ((f = a[o]) == null ? void 0 : f.pseudoSuffix) === l;
+    }).reduce((o, [f, $]) => ($.forEach((H) => {
+      var T;
+      let N = b(f, H);
+      l === "H" && (N = `${N}:hover`), l === "F" && (N = `${N}:focus-within`), l === "A" && (N = `${N}:active`);
+      const C = k(f, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, f, H)) ?? H, E = a[f].cssNames.map((I) => `${I}:${B};`).join("");
+      o.push(`.${N}{${E}}`);
+    }), o), r);
+  }
+  function k(r, l) {
+    const o = a[r];
+    return o.isThemeStyle ? o : o.values1.values.includes(l) ? o.values1 : o.values2.values.includes(l) ? o.values2 : o.values3;
+  }
+  function z() {
+    const r = "crono-styles";
+    let l = document.getElementById(r);
+    return l || (l = document.createElement("style"), l.setAttribute("id", r), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
+  }
+})(w || (w = {}));
+function X(s) {
+  const u = W(s);
+  return A(w.flush, [s]), L(() => {
+    const d = [w.doxClassName], m = u ? { ...u, ...s } : s;
+    return Object.entries(m).forEach(([g, p]) => {
+      d.push(w.get(g, p));
+    }), d;
+  }, [s, u]);
+}
+function Y(s, u) {
+  const { tag: d, children: m, props: g, className: p, style: c } = s, i = X(s), b = L(() => M.classNames(p, i).join(" "), [s]), n = { ...g, className: b };
+  c && (n.style = c), u && (n.ref = u);
+  const [k, z] = F(!1), r = typeof m == "function";
+  return r && (n.onMouseEnter = () => z(!0), n.onMouseLeave = () => z(!1)), O.createElement(d || "div", n, r ? m({ isHover: k }) : m);
+}
+const ee = D(Y);
+export {
+  ee as default
+};