@cronocode/react-box 1.8.7 → 1.8.9

package/core.mjs

@@ -1,72 +1,72 @@
-import { useMemo as X, useLayoutEffect as J, useEffect as Q } from "react";
-import { O as Z } from "./utils.mjs";
-var s;
-((l) => {
+import { useMemo as X, useLayoutEffect as se, useEffect as ae } from "react";
+import { O as Y } from "./utils.mjs";
+var e;
+((a) => {
   ((u) => {
-    function i(o, h) {
-      return `${o}${h.replace("/", "-")}`;
+    function t(o, m) {
+      return `${o}${m.replace("/", "-")}`;
     }
-    u.fraction = i;
-    function m(o) {
+    u.fraction = t;
+    function n(o) {
       return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
     }
-    u.svg = m;
-  })(l.ClassName || (l.ClassName = {})), ((u) => {
-    function i(e, a) {
-      return `${a / 4}rem`;
+    u.svg = n;
+  })(a.ClassName || (a.ClassName = {})), ((u) => {
+    function t(l, s) {
+      return `${s / 4}rem`;
     }
-    u.rem = i;
-    function m(e, a) {
-      return `${a}px`;
+    u.rem = t;
+    function n(l, s) {
+      return `${s}px`;
     }
-    u.px = m;
-    function o(e, a) {
-      const [t, v] = a.split("/");
-      return `${+t / +v * 100}%`;
+    u.px = n;
+    function o(l, s) {
+      const [r, i] = s.split("/");
+      return `${+r / +i * 100}%`;
     }
     u.fraction = o;
-    function h(e, a) {
-      switch (a) {
+    function m(l, s) {
+      switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return e.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return a;
+          return s;
       }
     }
-    u.widthHeight = h;
-    function V(e) {
-      return (a, t) => `var(--${e}${t});`;
+    u.widthHeight = m;
+    function N(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
-    u.variables = V;
-    function T(e) {
-      return (a, t) => `var(--${e}${t});`;
+    u.variables = N;
+    function T(l) {
+      return (s, r) => `var(--${l}${r});`;
     }
     u.svgVariables = T;
-    function C(e, a) {
-      return `repeat(${a},minmax(0,1fr))`;
+    function S(l, s) {
+      return `repeat(${s},minmax(0,1fr))`;
     }
-    u.gridColumns = C;
-    function c(e, a) {
-      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
+    u.gridColumns = S;
+    function c(l, s) {
+      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
     u.gridColumn = c;
-    function r(e, a) {
-      return `${a}ms`;
+    function f(l, s) {
+      return `${s}ms`;
     }
-    u.ms = r;
-    function b(e, a) {
-      return `${a}deg`;
+    u.ms = f;
+    function b(l, s) {
+      return `${s}deg`;
     }
     u.rotate = b;
-    function f(e, a) {
-      return a === "xAxis" ? "-1 1" : "1 -1";
+    function d(l, s) {
+      return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.flip = f;
-  })(l.Value || (l.Value = {}));
-})(s || (s = {}));
-const n = [
+    u.flip = d;
+  })(a.Value || (a.Value = {}));
+})(e || (e = {}));
+const v = [
   0,
   1,
   2,
@@ -125,7 +125,7 @@ const n = [
   200,
   250,
   300
-], ee = [
+], le = [
   -1,
   -2,
   -3,
@@ -171,7 +171,7 @@ const n = [
   -92,
   -96,
   -100
-], d = [...n, ...ee], P = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], _ = ["auto", "hidden", "scroll", "visible"], S = [
+], h = [...v, ...le], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], G = ["auto", "hidden", "scroll", "visible"], E = [
   "1/2",
   "1/3",
   "2/3",
@@ -198,7 +198,7 @@ const n = [
   "9/12",
   "10/12",
   "11/12"
-], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], W = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], N = {
+], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], ue = {
   /** 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"],
@@ -222,61 +222,61 @@ const n = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: z, formatValue: s.Value.widthHeight },
-    values2: { values: n, formatValue: s.Value.rem },
+    values1: { values: z, formatValue: e.Value.widthHeight },
+    values2: { values: v, formatValue: e.Value.rem },
     values3: {
-      values: S,
-      formatValue: s.Value.fraction
+      values: E,
+      formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
@@ -288,217 +288,217 @@ const n = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: d, formatValue: s.Value.rem },
+    values1: { values: h, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   b: {
     cssNames: ["border-width"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: d, formatValue: s.Value.px },
+    values1: { values: h, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: P },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadius: {
     cssNames: ["border-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTop: {
     cssNames: ["border-top-left-radius", "border-top-right-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusRight: {
     cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottom: {
     cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusLeft: {
     cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopLeft: {
     cssNames: ["border-top-left-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusTopRight: {
     cssNames: ["border-top-right-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomLeft: {
     cssNames: ["border-bottom-left-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRadiusBottomRight: {
     cssNames: ["border-bottom-right-radius"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -557,19 +557,19 @@ const n = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: _ },
+    values1: { values: G },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: _ },
+    values1: { values: G },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: _ },
+    values1: { values: G },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -581,7 +581,7 @@ const n = [
   },
   fontSize: {
     cssNames: ["font-size"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["inherit"] },
     values3: { values: [] }
   },
@@ -599,13 +599,13 @@ const n = [
   },
   letterSpacing: {
     cssNames: ["letter-spacing"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   lineHeight: {
     cssNames: ["line-height"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: ["font-size"], formatValue: () => "1" },
     values3: { values: [] }
   },
@@ -694,91 +694,91 @@ const n = [
   },
   gap: {
     cssNames: ["gap"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   rowGap: {
     cssNames: ["row-gap"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   columnGap: {
     cssNames: ["column-gap"],
-    values1: { values: n, formatValue: s.Value.rem },
+    values1: { values: v, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   order: {
     cssNames: ["order"],
-    values1: { values: n },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexGrow: {
     cssNames: ["flex-grow"],
-    values1: { values: n },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   flexShrink: {
     cssNames: ["flex-shrink"],
-    values1: { values: n },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: W },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: W },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: n, formatValue: s.Value.gridColumns },
+    values1: { values: v, formatValue: e.Value.gridColumns },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: n, formatValue: s.Value.gridColumn },
-    values2: { values: ["full-row"], formatValue: s.Value.gridColumn },
+    values1: { values: v, formatValue: e.Value.gridColumn },
+    values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: n },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: n },
+    values1: { values: v },
     values2: { values: [] },
     values3: { values: [] }
   },
   outline: {
     cssNames: ["outline-width"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: P },
+    values1: { values: F },
     values2: { values: [] },
     values3: { values: [] }
   },
   outlineOffset: {
     cssNames: ["outline-offset"],
-    values1: { values: n, formatValue: s.Value.px },
+    values1: { values: v, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -792,7 +792,7 @@ const n = [
     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.Value.ms
+      formatValue: e.Value.ms
     },
     values2: { values: [] },
     values3: { values: [] }
@@ -829,39 +829,39 @@ const n = [
   },
   rotate: {
     cssNames: ["rotate"],
-    values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: s.Value.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: s.Value.flip },
+    values1: { values: ["xAxis", "yAxis"], formatValue: e.Value.flip },
     values2: { values: [] },
     values3: { values: [] }
   }
-}, M = {
-  shadow: { cssNames: ["box-shadow"], formatValue: s.Value.variables("shadow") },
-  background: { cssNames: ["background"], formatValue: s.Value.variables("background") },
-  backgroundImage: { cssNames: ["background-image"], formatValue: s.Value.variables("backgroundImage") },
-  color: { cssNames: ["color"], formatValue: s.Value.variables("color") },
-  bgColor: { cssNames: ["background-color"], formatValue: s.Value.variables("color") },
-  borderColor: { cssNames: ["border-color"], formatValue: s.Value.variables("color") },
-  outlineColor: { cssNames: ["outline-color"], formatValue: s.Value.variables("color") }
-}, G = {
+}, W = {
+  shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
+  background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
+  backgroundImage: { cssNames: ["background-image"], formatValue: e.Value.variables("backgroundImage") },
+  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") }
+}, K = {
   fill: {
     cssNames: ["fill"],
-    formatValue: s.Value.svgVariables("color"),
-    formatSelector: s.ClassName.svg
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
   },
   stroke: {
     cssNames: ["stroke"],
-    formatValue: s.Value.svgVariables("color"),
-    formatSelector: s.ClassName.svg
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
   }
-}, se = [
-  "H",
-  "F",
-  "A",
+}, P = [
+  "Hover",
+  "Focus",
+  "Active",
   "Checked",
   "Indeterminate",
   "Valid",
@@ -869,35 +869,47 @@ const n = [
   "Required",
   "Optional",
   "Disabled"
-], E = ["sm", "md", "lg", "xl", "xxl"], ae = {
+], A = ["sm", "md", "lg", "xl", "xxl"], te = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   xxl: 1536
-}, H = {
-  hover: { className: "_h" },
-  focus: { className: "_f" }
 };
-Object.keys(M).forEach((l) => {
-  N[l] = M[l], N[l].isThemeStyle = !0;
-});
-Object.keys(G).forEach((l) => {
-  N[l] = G[l], N[l].isThemeStyle = !0;
-});
-let F = Object.keys(N);
-se.forEach((l) => {
-  F.forEach((u) => {
-    N[`${u}${l}`] = { ...N[u], pseudoSuffix: l };
+function J() {
+  const a = { ...ue };
+  Object.keys(W).forEach((t) => {
+    a[t] = W[t], a[t].isThemeStyle = !0;
+  }), Object.keys(K).forEach((t) => {
+    a[t] = K[t], a[t].isThemeStyle = !0;
   });
-});
-F = Object.keys(N);
-E.forEach((l) => {
-  F.forEach((u) => {
-    N[`${l}${u}`] = { ...N[u], breakpoint: l };
-  });
-});
-class le {
+  let u = Object.keys(a);
+  return P.forEach((t) => {
+    u.forEach((n) => {
+      a[`${n}${t}`] = { ...a[n], pseudoSuffix: t };
+    });
+  }), u = Object.keys(a), A.forEach((t) => {
+    u.forEach((n) => {
+      a[`${t}${n}`] = { ...a[n], breakpoint: t };
+    });
+  }), a;
+}
+let C = J();
+function oe() {
+  C = J();
+}
+function re(a, u, t) {
+  const n = Object.entries(C).filter(
+    ([o, m]) => m.pseudoSuffix === a && !m.customPseudoSuffix && !(`${o}${u}` in C)
+  ).map(([o]) => o);
+  return n.forEach((o) => {
+    C[`${o}${u}`] = {
+      ...C[o],
+      customPseudoSuffix: t + u
+    };
+  }), n.map((o) => `${o}${u}`);
+}
+class ne {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -905,97 +917,100 @@ class le {
     return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
   }
   getByIndex(u) {
-    const { first: i, next: m } = ue, o = u - i.length;
+    const { first: t, next: n } = ve, o = u - t.length;
     if (o < 0)
-      return i[u];
-    const h = Math.floor(o / m.length), V = o - h * m.length;
-    return this.getByIndex(h) + m[V];
+      return t[u];
+    const m = Math.floor(o / n.length), N = o - m * n.length;
+    return this.getByIndex(m) + n[N];
   }
 }
-const ue = {
+const ve = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
 var D;
-((l) => {
-  l.boxClassName = "_box", l.svgClassName = "_svg", l.cronoStylesElementId = "crono-styles";
+((a) => {
+  a.boxClassName = "_box", a.svgClassName = "_svg", a.cronoStylesElementId = "crono-styles";
   const u = `: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;}
-.${l.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;}
-.${l.svgClassName}{transition: all var(--svgTransitionTime);}.${l.svgClassName} path,.${l.svgClassName} circle,.${l.svgClassName} rect,.${l.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, i = new le(), m = Object.keys(N);
-  let o = !0, h = m.reduce(
-    (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
-    {}
-  );
-  function V(e, a, t) {
-    if (e in N)
-      return c(e, a, t);
-    if (e in H && a)
-      return H[e].className;
+.${a.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;}
+.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, t = new ne();
+  let n = !0, o = {};
+  T();
+  function m(l, s, r) {
+    if (l in C)
+      return c(l, s, r);
+    if (["disabledGroup", "hoverGroup", "focusGroup", "activeGroup"].includes(l))
+      return l + s;
   }
-  l.get = V;
-  function T() {
-    if (o) {
-      let e = r([u]);
-      e = r(e, "H"), e = r(e, "F"), e = r(e, "A"), e = r(e, "Checked"), e = r(e, "Indeterminate"), e = r(e, "Valid"), e = r(e, "Invalid"), e = r(e, "Required"), e = r(e, "Disabled"), E.forEach((t) => {
-        e.push(`@media(min-width: ${ae[t]}px){`), e = r(e, void 0, t), e = r(e, "H", t), e = r(e, "F", t), e = r(e, "A", t), e = r(e, "Checked", t), e = r(e, "Indeterminate", t), e = r(e, "Valid", t), e = r(e, "Invalid", t), e = r(e, "Required", t), e = r(e, "Disabled", t), e.push("}");
+  a.get = m;
+  function N() {
+    if (n) {
+      let l = f([u]);
+      P.forEach((r) => {
+        l = f(l, r);
+      }), A.forEach((r) => {
+        l.push(`@media(min-width: ${te[r]}px){`), l = f(l, void 0, r), P.forEach((i) => {
+          l = f(l, i, r);
+        }), l.push("}");
       });
-      const a = f();
-      a.innerHTML = e.join(""), o = !1;
+      const s = d();
+      s.innerHTML = l.join(""), n = !1;
     }
   }
-  l.flush = T;
-  function C() {
-    h = m.reduce(
-      (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
+  a.flush = N;
+  function T() {
+    oe(), o = Object.keys(C).reduce(
+      (s, r) => (s[r] = /* @__PURE__ */ new Set(), s),
       {}
     );
   }
-  l.clear = C;
-  function c(e, a, t) {
-    const v = (t ?? "") + e;
-    h[v].has(a) || (o = !0, h[v].add(a));
-    const x = `${v}${a}`;
-    return i.getIdentity(x);
+  a.clear = T;
+  function S(l, s, r) {
+    re(l, s, r).forEach((p) => {
+      o[p] = /* @__PURE__ */ new Set();
+    });
+  }
+  a.addCustomPseudoClass = S;
+  function c(l, s, r) {
+    const i = (r ?? "") + l;
+    o[i].has(s) || (n = !0, o[i].add(s));
+    const p = `${i}${s}`;
+    return process.env.NODE_ENV === "test" ? p : t.getIdentity(p);
   }
-  function r(e, a, t) {
-    return Object.entries(h).filter(
-      ([x]) => {
-        var $, j;
-        return (($ = N[x]) == null ? void 0 : $.pseudoSuffix) === a && ((j = N[x]) == null ? void 0 : j.breakpoint) === t;
+  function f(l, s, r) {
+    return Object.entries(o).filter(
+      ([p, k]) => {
+        var w, $;
+        return ((w = C[p]) == null ? void 0 : w.pseudoSuffix) === s && (($ = C[p]) == null ? void 0 : $.breakpoint) === r && k.size > 0;
       }
-    ).reduce((x, [$, j]) => (j.forEach((O) => {
-      var L;
-      const g = b($, O), y = `.${c($, O)}`;
-      let w = [];
-      a ? a === "H" ? w = [
-        ...v(`${y}:hover`, g),
-        ...v(`.${H.hover.className}:hover>${y}`, g)
-      ] : a === "F" ? w = [
-        ...v(`${y}:focus-within`, g),
-        ...v(`.${H.focus.className}:focus-within>${y}`, g)
-      ] : a === "A" ? w = v(`${y}:active`, g) : a === "Checked" ? w = v(`${y}:checked`, g) : a === "Indeterminate" ? w = v(`${y}:indeterminate`, g) : a === "Valid" ? w = v(`${y}:valid`, g) : a === "Invalid" ? w = v(`${y}:invalid`, g) : a === "Required" ? w = v(`${y}:required`, g) : a === "Optional" ? w = v(`${y}:optional`, g) : a === "Disabled" && (w = v(`${y}:disabled`, g)) : w = v(y, g);
-      const B = ((L = g.formatValue) == null ? void 0 : L.call(g, $, O)) ?? O, k = N[$].cssNames.map((Y) => `${Y}:${B};`).join("");
-      x.push(`${w.join(",")}{${k}}`);
-    }), x), e);
-    function v(x, $) {
-      return $.formatSelector ? $.formatSelector(x) : [x];
+    ).reduce((p, [k, w]) => (w.forEach(($) => {
+      var q;
+      const g = C[k], y = b(g, $), j = `.${c(k, $)}`;
+      let x = [];
+      s ? s === "Hover" ? x = i(j, g, y, "hover") : s === "Focus" ? x = i(j, g, y, "focus-within") : s === "Active" ? x = i(j, g, y, "active") : s === "Checked" ? x = i(j, g, y, "checked") : s === "Indeterminate" ? x = i(j, g, y, "indeterminate") : s === "Valid" ? x = i(j, g, y, "valid") : s === "Invalid" ? x = i(j, g, y, "invalid") : s === "Required" ? x = i(j, g, y, "required") : s === "Optional" ? x = i(j, g, y, "optional") : s === "Disabled" && (x = i(j, g, y, "disabled")) : x = i(j, g, y);
+      const V = ((q = y.formatValue) == null ? void 0 : q.call(y, k, $)) ?? $, Z = C[k].cssNames.map((ee) => `${ee}:${V};`).join("");
+      p.push(`${x.join(",")}{${Z}}`);
+    }), p), l);
+    function i(p, k, w, $) {
+      let g = p;
+      return $ && (g = k.customPseudoSuffix ? `.${k.customPseudoSuffix}:${$} ${p}` : `${p}:${$}`), w.formatSelector ? w.formatSelector(g) : [g];
     }
   }
-  function b(e, a) {
-    const t = N[e];
-    return t.isThemeStyle ? t : t.values1.values.includes(a) ? t.values1 : t.values2.values.includes(a) ? t.values2 : t.values3;
+  function b(l, s) {
+    return l.isThemeStyle ? l : l.values1.values.includes(s) ? l.values1 : l.values2.values.includes(s) ? l.values2 : l.values3;
   }
-  function f() {
-    const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let t = a.getElementById(l.cronoStylesElementId);
-    return t || (t = a.createElement("style"), t.setAttribute("id", l.cronoStylesElementId), t.setAttribute("type", "text/css"), a.head.insertBefore(t, a.head.firstChild)), t;
+  function d() {
+    const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let r = s.getElementById(a.cronoStylesElementId);
+    return r || (r = s.createElement("style"), r.setAttribute("id", a.cronoStylesElementId), r.setAttribute("type", "text/css"), s.head.insertBefore(r, s.head.firstChild)), r;
   }
+  a.getElement = d;
 })(D || (D = {}));
-const I = D, A = {
+const I = D, H = {
   button: {
     styles: {
       display: "inline-block",
@@ -1036,10 +1051,10 @@ const I = D, A = {
       borderRadius: 1
     }
   }
-}, te = {
-  H: "hover",
-  F: "focus",
-  A: "active",
+}, ie = {
+  Hover: "hover",
+  Focus: "focus",
+  Active: "active",
   Checked: "checked",
   Indeterminate: "indeterminate",
   Valid: "valid",
@@ -1048,29 +1063,29 @@ const I = D, A = {
   Optional: "optional",
   Disabled: "disabled"
 };
-var q;
-((l) => {
-  l.Styles = {};
+var _;
+((a) => {
+  a.Styles = {};
   function u(c) {
-    l.Styles = o(A), l.Styles = m(c);
+    a.Styles = o(H), a.Styles = n(c);
   }
-  l.setup = u;
-  function i(c, r) {
-    const { colors: b = {}, shadows: f = {}, backgrounds: e = {}, backgroundImages: a = {} } = c;
-    b.none = "none", f.none = "none", e.none = "none", a.none = "none";
-    const t = Object.entries(b).map(([p, k]) => `--color${p}: ${k};`).join(`
-  `), v = Object.entries(f).map(([p, k]) => `--shadow${p}: ${k};`).join(`
-  `), x = Object.entries(e).map(([p, k]) => `--background${p}: ${k};`).join(`
-  `), $ = Object.entries(a).map(([p, k]) => `--backgroundImage${p}: ${k};`).join(`
-  `), j = [":root {"];
-    t && j.push(`  ${t}`), v && j.push(`  ${v}`), x && j.push(`  ${x}`), $ && j.push(`  ${$}`), j.push("}");
-    const O = Object.keys(b).map((p) => `'${p}'`).join(" | "), g = Object.keys(e).map((p) => `'${p}'`).join(" | "), y = Object.keys(a).map((p) => `'${p}'`).join(" | "), w = Object.keys(f).map((p) => `'${p}'`).join(" | "), B = `import '@cronocode/react-box';
+  a.setup = u;
+  function t(c, f) {
+    const { colors: b = {}, shadows: d = {}, backgrounds: l = {}, backgroundImages: s = {} } = c;
+    b.none = "none", d.none = "none", l.none = "none", s.none = "none";
+    const r = Object.entries(b).map(([V, O]) => `--color${V}: ${O};`).join(`
+  `), i = Object.entries(d).map(([V, O]) => `--shadow${V}: ${O};`).join(`
+  `), p = Object.entries(l).map(([V, O]) => `--background${V}: ${O};`).join(`
+  `), k = Object.entries(s).map(([V, O]) => `--backgroundImage${V}: ${O};`).join(`
+  `), w = [":root {"];
+    r && w.push(`  ${r}`), i && w.push(`  ${i}`), p && w.push(`  ${p}`), k && w.push(`  ${k}`), w.push("}");
+    const $ = Object.keys(b).map((V) => `'${V}'`).join(" | "), g = Object.keys(l).map((V) => `'${V}'`).join(" | "), y = Object.keys(s).map((V) => `'${V}'`).join(" | "), j = Object.keys(d).map((V) => `'${V}'`).join(" | "), x = `import '@cronocode/react-box';
   
-  declare module '${(r == null ? void 0 : r.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${O};
+  declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${$};
     type BackgroundType = ${g};
     type BackgroundImageType = ${y};
-    type ShadowType = ${w};
+    type ShadowType = ${j};
   
     namespace Augmented {
       interface BoxProps {
@@ -1091,121 +1106,129 @@ var q;
   }
   `;
     return {
-      variables: j.join(`
+      variables: w.join(`
 `),
-      boxDts: B
+      boxDts: x
     };
   }
-  l.setupAugmentedProps = i;
-  function m(c) {
-    const r = o(c);
-    return Object.keys(A).forEach((f) => {
-      const e = r[f], a = A[f];
-      e ? e.styles = { ...a.styles, ...e.styles } : r[f] = A[f];
-    }), r;
+  a.setupAugmentedProps = t;
+  function n(c) {
+    const f = o(c);
+    return Object.keys(H).forEach((d) => {
+      const l = f[d], s = H[d];
+      l ? l.styles = { ...s.styles, ...l.styles } : f[d] = H[d];
+    }), f;
   }
   function o(c) {
-    return h(c), T(c), c;
+    return m(c), T(c), c;
   }
-  function h(c) {
+  function m(c) {
     if (!c.components)
       return;
-    const r = Object.keys(c.components);
-    for (const b of r) {
-      const f = c.components[b], e = V(b, f);
-      delete f.children;
-      for (const a of e) {
-        const [t, v] = a;
-        c.components[t] = v;
+    const f = Object.keys(c.components);
+    for (const b of f) {
+      const d = c.components[b], l = N(b, d);
+      delete d.children;
+      for (const s of l) {
+        const [r, i] = s;
+        c.components[r] = i;
       }
     }
   }
-  function V(c, r) {
-    if (!r.children)
+  function N(c, f) {
+    if (!f.children)
       return [];
-    const b = Object.keys(r.children), f = [];
-    for (const e of b) {
-      const a = `${c}.${e}`, t = r.children[e], v = V(a, t);
-      f.push(...v), delete t.children, f.push([a, t]);
+    const b = Object.keys(f.children), d = [];
+    for (const l of b) {
+      const s = `${c}.${l}`, r = f.children[l], i = N(s, r);
+      d.push(...i), delete r.children, d.push([s, r]);
     }
-    return f;
+    return d;
   }
   function T(c) {
-    const { components: r, ...b } = c, f = Object.values(b);
-    r && f.push(...Object.values(r));
-    for (const e of f)
-      C(e.styles), E.forEach((a) => {
-        if (a in e.styles) {
-          const t = e.styles[a];
-          C(t);
+    const { components: f, ...b } = c, d = Object.values(b);
+    f && d.push(...Object.values(f));
+    for (const l of d)
+      S(l.styles), A.forEach((s) => {
+        if (s in l.styles) {
+          const r = l.styles[s];
+          S(r);
         }
-      }), e.themes && Object.values(e.themes).forEach((a) => {
-        C(a), E.forEach((t) => {
-          if (t in a) {
-            const v = a[t];
-            C(v);
+      }), l.themes && Object.values(l.themes).forEach((s) => {
+        S(s), A.forEach((r) => {
+          if (r in s) {
+            const i = s[r];
+            S(i);
           }
         });
       });
   }
-  function C(c) {
-    Object.entries(te).forEach(([r, b]) => {
+  function S(c) {
+    Object.entries(ie).forEach(([f, b]) => {
       if (b in c) {
-        const f = c[b];
-        Object.entries(f).map(([e, a]) => {
-          c[`${e}${r}`] = a;
+        const d = c[b];
+        Object.entries(d).map(([l, s]) => {
+          c[`${l}${f}`] = s;
         }), delete c[b];
       }
     });
   }
-})(q || (q = {}));
-const K = q;
-function re(l) {
-  const { clean: u, theme: i, component: m } = l;
+})(_ || (_ = {}));
+const M = _;
+function ce(a) {
+  const { clean: u, theme: t, component: n } = a;
   return X(() => {
-    var h, V;
+    var m, N;
     if (u)
       return;
-    let o = K.Styles[m] ?? ((h = K.Styles.components) == null ? void 0 : h[m]);
+    let o = M.Styles[n] ?? ((m = M.Styles.components) == null ? void 0 : m[n]);
     if (o)
-      return i ? { ...o.styles, ...(V = o.themes) == null ? void 0 : V[i] } : o.styles;
-  }, [m, u, i]);
+      return t ? { ...o.styles, ...(N = o.themes) == null ? void 0 : N[t] } : o.styles;
+  }, [n, u, t]);
 }
-const oe = typeof window < "u" && typeof window.document < "u", ne = oe ? J : Q;
-function me(l, u) {
-  const i = re(l);
-  return ne(I.flush, [l]), X(() => {
-    const m = [u ? I.svgClassName : I.boxClassName], o = i ? { ...i, ...l } : { ...l };
-    return U(o), E.forEach((h) => {
-      if (h in o) {
-        const V = o[h];
-        U(V), Object.entries(V).forEach(([T, C]) => {
-          m.push(I.get(T, C, h));
-        }), delete o[h];
+const me = typeof window < "u" && typeof window.document < "u", fe = me ? se : ae;
+function ge(a, u) {
+  const t = ce(a);
+  return fe(I.flush, [a]), X(() => {
+    const n = [u ? I.svgClassName : I.boxClassName], o = t ? { ...t, ...a } : { ...a };
+    return U(o), Object.entries(o).forEach(([m, N]) => {
+      n.push(I.get(m, N));
+    }), A.forEach((m) => {
+      if (m in o) {
+        const N = o[m];
+        U(N), Object.entries(N).forEach(([T, S]) => {
+          n.push(I.get(T, S, m));
+        }), delete o[m];
       }
-    }), Object.entries(o).forEach(([h, V]) => {
-      m.push(I.get(h, V));
-    }), m;
-  }, [l, i]);
+    }), n;
+  }, [a, t]);
+}
+function U(a) {
+  B(a, "hover", "Hover"), B(a, "focus", "Focus"), B(a, "active", "Active"), B(a, "disabled", "Disabled"), R(a, "hoverGroup", "Hover"), R(a, "focusGroup", "Focus"), R(a, "activeGroup", "Active"), R(a, "disabledGroup", "Disabled");
 }
-function U(l) {
-  R(l, "disabled", "Disabled"), R(l, "hover", "H"), R(l, "focus", "F"), R(l, "active", "A");
+function B(a, u, t) {
+  u in a && Q(a, u, t, a[u]);
+}
+function R(a, u, t) {
+  u in a && Y.isObject(a[u]) && Object.entries(a[u]).forEach(([n, o]) => {
+    I.addCustomPseudoClass(t, n, u), Q(a, u, t + n, o);
+  });
 }
-function R(l, u, i) {
-  u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([m, o]) => {
-    l[`${m}${i}`] = o;
-  }), l[u] = l[u][0]) : Z.isObject(l[u]) && (Object.entries(l[u]).forEach(([m, o]) => {
-    l[`${m}${i}`] = o;
-  }), delete l[u]));
+function Q(a, u, t, n) {
+  Array.isArray(n) ? (Object.entries(n[1]).forEach(([o, m]) => {
+    a[`${o}${t}`] = m;
+  }), a[u] = n[0]) : Y.isObject(n) && (Object.entries(n).forEach(([o, m]) => {
+    a[`${o}${t}`] = m;
+  }), delete a[u]);
 }
-function ve(...l) {
-  return l.reduce((u, i) => i ? typeof i == "string" ? (u.push(i), u) : Array.isArray(i) ? (u.push(...ve(...i)), u) : (Object.entries(i).forEach(([m, o]) => {
-    o && u.push(m);
+function de(...a) {
+  return a.reduce((u, t) => t ? typeof t == "string" ? (u.push(t), u) : Array.isArray(t) ? (u.push(...de(...t)), u) : (Object.entries(t).forEach(([n, o]) => {
+    o && u.push(n);
   }), u) : u, []);
 }
 export {
   I as S,
-  K as T,
-  ve as c,
-  me as u
+  M as T,
+  de as c,
+  ge as u
 };