@cronocode/react-box 1.5.5 → 1.5.8

package/components/dox.mjs

@@ -0,0 +1,854 @@
+import E, { useEffect as I, useMemo as j, forwardRef as O, useState as A } from "react";
+import { I as D, C as W } from "../utils/utils.mjs";
+import { useTheme as _ } from "../theme.mjs";
+const F = ["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
+], M = [
+  -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, ...M], T = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], $ = ["auto", "hidden", "scroll", "visible"];
+var e;
+((s) => {
+  function l(d, n) {
+    return `${n / 4}rem`;
+  }
+  s.rem = l;
+  function c(d, n) {
+    return `${n}px`;
+  }
+  s.px = c;
+  function m(d, n) {
+    const [i, b] = n.split("/");
+    return `${+i / +b * 100}%`;
+  }
+  s.fraction = m;
+  function g(d, n) {
+    switch (n) {
+      case "fit":
+        return "100%";
+      case "fit-screen":
+        return d.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+      default:
+        return n;
+    }
+  }
+  s.heightWidth = g;
+  function p(d) {
+    return (n, i) => `var(--${d}${i});`;
+  }
+  s.variables = p;
+})(e || (e = {}));
+var C;
+((s) => {
+  function l(c, m) {
+    return `${c}${m.replace("/", "-")}`;
+  }
+  s.fraction = l;
+})(C || (C = {}));
+const R = {
+  shadow: { cssNames: ["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: ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"],
+      formatValue: e.heightWidth
+    },
+    values2: { values: t, formatValue: e.rem },
+    values3: {
+      values: [
+        "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"
+      ],
+      formatValue: e.fraction,
+      formatClassName: C.fraction
+    }
+  },
+  position: {
+    cssNames: ["position"],
+    values1: { values: ["static", "relative", "absolute", "fixed", "sticky"] },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  top: {
+    cssNames: ["top"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  right: {
+    cssNames: ["right"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  bottom: {
+    cssNames: ["bottom"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  left: {
+    cssNames: ["left"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  inset: {
+    cssNames: ["inset"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  margin: {
+    cssNames: ["margin"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginHorizontal: {
+    cssNames: ["margin-inline"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginVertical: {
+    cssNames: ["margin-block"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginTop: {
+    cssNames: ["margin-top"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginRight: {
+    cssNames: ["margin-right"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginBottom: {
+    cssNames: ["margin-bottom"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  marginLeft: {
+    cssNames: ["margin-left"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: ["auto"] },
+    values3: { values: [] }
+  },
+  padding: {
+    cssNames: ["padding"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingHorizontal: {
+    cssNames: ["padding-inline"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingVertical: {
+    cssNames: ["padding-block"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingTop: {
+    cssNames: ["padding-top"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingRight: {
+    cssNames: ["padding-right"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingBottom: {
+    cssNames: ["padding-bottom"],
+    values1: { values: r, formatValue: e.rem },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  paddingLeft: {
+    cssNames: ["padding-left"],
+    values1: { values: r, 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: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderVertical: {
+    cssNames: ["border-block-width"],
+    values1: { values: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderTop: {
+    cssNames: ["border-top-width"],
+    values1: { values: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderRight: {
+    cssNames: ["border-right-width"],
+    values1: { values: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderBottom: {
+    cssNames: ["border-bottom-width"],
+    values1: { values: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderLeft: {
+    cssNames: ["border-left-width"],
+    values1: { values: r, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  borderStyle: {
+    cssNames: ["border-style"],
+    values1: { values: T },
+    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: $ },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowX: {
+    cssNames: ["overflow-x"],
+    values1: { values: $ },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  overflowY: {
+    cssNames: ["overflow-y"],
+    values1: { values: $ },
+    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: [] }
+  },
+  flexSelf: {
+    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, l) => `repeat(${l},minmax(0,1fr))` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  colSpan: {
+    cssNames: ["grid-column"],
+    values1: { values: t, formatValue: (s, l) => `span ${l}/span ${l}` },
+    values2: { values: ["full-row"], formatValue: (s, l) => "1/-1" },
+    values3: { values: [] }
+  },
+  colStart: {
+    cssNames: ["grid-column-start"],
+    values1: { values: t, formatValue: (s, l) => `${l}` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  colEnd: {
+    cssNames: ["grid-column-end"],
+    values1: { values: t, formatValue: (s, l) => `${l}` },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outline: {
+    cssNames: ["outline-width"],
+    values1: { values: t, formatValue: e.px },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  outlineStyle: {
+    cssNames: ["outline-style"],
+    values1: { values: T },
+    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, l) => `${l}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(R).forEach((s) => {
+  a[s] = R[s], a[s].isThemeStyle = !0;
+});
+const h = {
+  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" }
+}, G = Object.keys(a), P = Object.keys(h);
+F.forEach((s) => {
+  G.forEach((l) => {
+    a[`${l}${s}`] = { ...a[l] }, a[`${l}${s}`].pseudoSuffix = s;
+  }), P.forEach((l) => {
+    h[`${l}${s}`] = { ...h[l], key: `${h[l].key}${s}` }, h[`${l}${s}`].pseudoSuffix = s;
+  });
+});
+var x;
+((s) => {
+  const l = new D(), c = [...Object.keys(a), ...Object.keys(R)], m = V();
+  let g = !1;
+  const p = c.reduce((v, u) => (v[u] = /* @__PURE__ */ new Set(), v), {});
+  s.doxClassName = "_dox";
+  function d(v, u) {
+    if (v in a)
+      return i(v, u);
+    if (v in h)
+      return i(h[v].key, u);
+  }
+  s.get = d;
+  function n() {
+    if (g) {
+      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 = b([v]);
+      u = b(u, "H"), u = b(u, "F"), u = b(u, "A"), m.innerHTML = u.join(""), g = !1;
+    }
+  }
+  s.flush = n;
+  function i(v, u) {
+    var w;
+    p[v].has(u) || (g = !0, p[v].add(u));
+    const o = y(v, u), f = ((w = o.formatClassName) == null ? void 0 : w.call(o, v, u)) ?? `${v}${u}`;
+    return `-${l.getIdentity(f)}`;
+  }
+  function b(v, u) {
+    return Object.entries(p).filter(([o]) => {
+      var f;
+      return ((f = a[o]) == null ? void 0 : f.pseudoSuffix) === u;
+    }).reduce((o, [f, w]) => (w.forEach((k) => {
+      var S;
+      let N = i(f, k);
+      u === "H" && (N = `${N}:hover`), u === "F" && (N = `${N}:focus-within`), u === "A" && (N = `${N}:active`);
+      const z = y(f, k), H = ((S = z.formatValue) == null ? void 0 : S.call(z, f, k)) ?? k, L = a[f].cssNames.map((B) => `${B}:${H};`).join("");
+      o.push(`.${N}{${L}}`);
+    }), o), v);
+  }
+  function y(v, u) {
+    const o = a[v];
+    return o.isThemeStyle ? o : o.values1.values.includes(u) ? o.values1 : o.values2.values.includes(u) ? o.values2 : o.values3;
+  }
+  function V() {
+    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;
+  }
+})(x || (x = {}));
+function q(s) {
+  const l = _(s);
+  return I(x.flush, [s]), j(() => {
+    const c = [x.doxClassName], m = l ? { ...l, ...s } : s;
+    return Object.entries(m).forEach(([g, p]) => {
+      c.push(x.get(g, p));
+    }), c;
+  }, [s, l]);
+}
+function U(s, l) {
+  const { tag: c, children: m, props: g, className: p } = s, d = q(s), n = j(() => W.classNames(p, d).join(" "), [s]), i = { ...g, className: n };
+  l && (i.ref = l);
+  const [b, y] = A(!1), V = typeof m == "function";
+  return V && (i.onMouseEnter = () => y(!0), i.onMouseLeave = () => y(!1)), E.createElement(c || "div", i, V ? m({ isHover: b }) : m);
+}
+const Z = O(U);
+export {
+  Z as default
+};