@cronocode/react-box 1.8.7 → 1.8.8

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