@cronocode/react-box 1.8.6 → 1.8.8

package/core.mjs

@@ -1,72 +1,72 @@
-import { useMemo as X, useLayoutEffect as Q, useEffect as Z } from "react";
-import { O as ee } from "./utils.mjs";
-var s;
-((l) => {
-  ((u) => {
-    function i(r, f) {
-      return `${r}${f.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 c(r) {
-      return [`${r} path`, `${r} circle`, `${r} rect`, `${r} line`];
+    l.fraction = r;
+    function n(t) {
+      return [`${t} path`, `${t} circle`, `${t} rect`, `${t} line`];
     }
-    u.svg = c;
-  })(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 c(e, a) {
+    l.rem = r;
+    function n(o, a) {
       return `${a}px`;
     }
-    u.px = c;
-    function r(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 = r;
-    function f(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 = f;
-    function w(e) {
-      return (a, t) => `var(--${e}${t});`;
+    l.widthHeight = c;
+    function w(o) {
+      return (a, u) => `var(--${o}${u});`;
     }
-    u.variables = w;
-    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 d(e, a) {
+    l.svgVariables = E;
+    function C(o, a) {
       return `repeat(${a},minmax(0,1fr))`;
     }
-    u.gridColumns = d;
-    function g(e, a) {
+    l.gridColumns = C;
+    function f(o, a) {
       return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    u.gridColumn = g;
-    function o(e, a) {
+    l.gridColumn = f;
+    function b(o, a) {
       return `${a}ms`;
     }
-    u.ms = o;
-    function b(e, a) {
+    l.ms = b;
+    function g(o, a) {
       return `${a}deg`;
     }
-    u.rotate = b;
-    function h(e, a) {
+    l.rotate = g;
+    function h(o, a) {
       return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.flip = h;
-  })(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
-], se = [
+], le = [
   -1,
   -2,
   -3,
@@ -171,7 +171,7 @@ const n = [
   -92,
   -96,
   -100
-], m = [...n, ...se], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], B = ["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"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], x = {
+], 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,157 +288,157 @@ const n = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: m, formatValue: s.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: m, 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: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: m, formatValue: s.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -450,55 +450,55 @@ const n = [
   },
   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: B },
+    values1: { values: G },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: B },
+    values1: { values: G },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: B },
+    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,79 +694,79 @@ 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: [] }
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: L },
+    values1: { values: W },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: L },
+    values1: { values: W },
     values2: { values: [] },
     values3: { values: [] }
   },
   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: [] }
   },
@@ -778,7 +778,7 @@ const n = [
   },
   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: [] }
   }
-}, W = {
-  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") }
 }, M = {
+  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
   }
-}, ae = [
-  "H",
-  "F",
-  "A",
+}, P = [
+  "Hover",
+  "Focus",
+  "Active",
   "Checked",
   "Indeterminate",
   "Valid",
@@ -869,133 +869,148 @@ const n = [
   "Required",
   "Optional",
   "Disabled"
-], R = ["sm", "md", "lg", "xl", "xxl"], le = {
+], H = ["sm", "md", "lg", "xl", "xxl"], ue = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   xxl: 1536
-}, E = {
-  hover: { className: "_h" },
-  focus: { className: "_f" }
 };
-Object.keys(W).forEach((l) => {
-  x[l] = W[l], x[l].isThemeStyle = !0;
+Object.keys(M).forEach((s) => {
+  V[s] = M[s], V[s].isThemeStyle = !0;
 });
-Object.keys(M).forEach((l) => {
-  x[l] = M[l], x[l].isThemeStyle = !0;
+Object.keys(K).forEach((s) => {
+  V[s] = K[s], V[s].isThemeStyle = !0;
 });
-let q = Object.keys(x);
-ae.forEach((l) => {
-  q.forEach((u) => {
-    x[`${u}${l}`] = { ...x[u], pseudoSuffix: l };
+let L = Object.keys(V);
+P.forEach((s) => {
+  L.forEach((l) => {
+    V[`${l}${s}`] = { ...V[l], pseudoSuffix: s };
   });
 });
-q = Object.keys(x);
-R.forEach((l) => {
-  q.forEach((u) => {
-    x[`${l}${u}`] = { ...x[u], breakpoint: l };
+L = Object.keys(V);
+H.forEach((s) => {
+  L.forEach((l) => {
+    V[`${s}${l}`] = { ...V[l], breakpoint: s };
   });
 });
-class ue {
+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: c } = te, r = u - i.length;
-    if (r < 0)
-      return i[u];
-    const f = Math.floor(r / c.length), w = r - f * c.length;
-    return this.getByIndex(f) + c[w];
+  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 te = {
+const re = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var _;
-((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;}}
+var D;
+((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 ue(), c = Object.keys(x);
-  let r = !0, f = c.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 w(e, a, t) {
-    if (e in x)
-      return g(e, a, t);
-    if (e in E && a)
-      return E[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 = w;
-  function T() {
-    if (r) {
-      let e = o([u]);
-      e = o(e, "H"), e = o(e, "F"), e = o(e, "A"), e = o(e, "Checked"), e = o(e, "Indeterminate"), e = o(e, "Valid"), e = o(e, "Invalid"), e = o(e, "Required"), e = o(e, "Disabled"), R.forEach((t) => {
-        e.push(`@media(min-width: ${le[t]}px){`), e = o(e, void 0, t), e = o(e, "H", t), e = o(e, "F", t), e = o(e, "A", t), e = o(e, "Checked", t), e = o(e, "Indeterminate", t), e = o(e, "Valid", t), e = o(e, "Invalid", t), e = o(e, "Required", t), e = o(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 = h();
-      a.innerHTML = e.join(""), r = !1;
+      const u = o();
+      u.innerHTML = a.join(""), t = !1;
     }
   }
-  l.flush = T;
-  function d() {
-    f = c.reduce(
-      (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
+  s.flush = E;
+  function C() {
+    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 = d;
-  function g(e, a, t) {
-    const v = (t ?? "") + e;
-    f[v].has(a) || (r = !0, f[v].add(a));
-    const N = `${v}${a}`;
-    return i.getIdentity(N);
+  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 o(e, a, t) {
-    return Object.entries(f).filter(
-      ([N]) => {
-        var p, C;
-        return ((p = x[N]) == null ? void 0 : p.pseudoSuffix) === a && ((C = x[N]) == null ? void 0 : C.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((N, [p, C]) => (C.forEach((O) => {
-      var P;
-      const V = b(p, O), $ = `.${g(p, O)}`;
-      let j = [];
-      a ? a === "H" ? j = [
-        ...v(`${$}:hover`, V),
-        ...v(`.${E.hover.className}:hover>${$}`, V)
-      ] : a === "F" ? j = [
-        ...v(`${$}:focus-within`, V),
-        ...v(`.${E.focus.className}:focus-within>${$}`, V)
-      ] : a === "A" ? j = v(`${$}:active`, V) : a === "Checked" ? j = v(`${$}:checked`, V) : a === "Indeterminate" ? j = v(`${$}:indeterminate`, V) : a === "Valid" ? j = v(`${$}:valid`, V) : a === "Invalid" ? j = v(`${$}:invalid`, V) : a === "Required" ? j = v(`${$}:required`, V) : a === "Optional" ? j = v(`${$}:optional`, V) : a === "Disabled" && (j = v(`${$}:disabled`, V)) : j = v($, V);
-      const y = ((P = V.formatValue) == null ? void 0 : P.call(V, p, O)) ?? O, Y = x[p].cssNames.map((J) => `${J}:${y};`).join("");
-      N.push(`${j.join(",")}{${Y}}`);
-    }), N), e);
-    function v(N, p) {
-      return p.formatSelector ? p.formatSelector(N) : [N];
+    ).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 = x[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 h() {
-    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;
   }
-})(_ || (_ = {}));
-const I = _, H = {
+  s.getElement = o;
+})(D || (D = {}));
+const I = D, A = {
   button: {
     styles: {
       display: "inline-block",
@@ -1036,10 +1051,10 @@ const I = _, H = {
       borderRadius: 1
     }
   }
-}, G = {
-  H: "hover",
-  F: "focus",
-  A: "active",
+}, ne = {
+  Hover: "hover",
+  Focus: "focus",
+  Active: "active",
   Checked: "checked",
   Indeterminate: "indeterminate",
   Valid: "valid",
@@ -1048,28 +1063,28 @@ const I = _, H = {
   Optional: "optional",
   Disabled: "disabled"
 };
-var D;
-((l) => {
-  l.Styles = r(H);
-  function u(d) {
-    l.Styles = c(d);
+var _;
+((s) => {
+  s.Styles = {};
+  function l(f) {
+    s.Styles = t(A), s.Styles = n(f);
   }
-  l.setup = u;
-  function i(d, g) {
-    const { colors: o = {}, shadows: b = {}, backgrounds: h = {}, backgroundImages: e = {} } = d;
-    o.none = "none", b.none = "none", h.none = "none", e.none = "none";
-    const a = Object.entries(o).map(([y, k]) => `--color${y}: ${k};`).join(`
-  `), t = Object.entries(b).map(([y, k]) => `--shadow${y}: ${k};`).join(`
-  `), v = Object.entries(h).map(([y, k]) => `--background${y}: ${k};`).join(`
-  `), N = Object.entries(e).map(([y, k]) => `--backgroundImage${y}: ${k};`).join(`
-  `), p = [":root {"];
-    a && p.push(`  ${a}`), t && p.push(`  ${t}`), v && p.push(`  ${v}`), N && p.push(`  ${N}`), p.push("}");
-    const C = Object.keys(o).map((y) => `'${y}'`).join(" | "), O = Object.keys(h).map((y) => `'${y}'`).join(" | "), V = Object.keys(e).map((y) => `'${y}'`).join(" | "), $ = Object.keys(b).map((y) => `'${y}'`).join(" | "), j = `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 '${(g == null ? void 0 : g.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${C};
-    type BackgroundType = ${O};
-    type BackgroundImageType = ${V};
+  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 {
@@ -1091,118 +1106,129 @@ var D;
   }
   `;
     return {
-      variables: p.join(`
+      variables: x.join(`
 `),
-      boxDts: j
+      boxDts: k
     };
   }
-  l.setupAugmentedProps = i;
-  function c(d) {
-    const g = r(d);
-    return Object.keys(H).forEach((b) => {
-      const h = g[b], e = H[b];
-      h ? h.styles = { ...e.styles, ...h.styles } : g[b] = H[b];
-    }), g;
+  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 r(d) {
-    return f(d), T(d), d;
+  function t(f) {
+    return c(f), E(f), f;
   }
-  function f(d) {
-    if (!d.components)
+  function c(f) {
+    if (!f.components)
       return;
-    const g = Object.keys(d.components);
-    for (const o of g) {
-      const b = d.components[o], h = w(o, b);
-      delete b.children;
-      for (const e of h) {
-        const [a, t] = e;
-        d.components[a] = t;
+    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 w(d, g) {
-    if (!g.children)
+  function w(f, b) {
+    if (!b.children)
       return [];
-    const o = Object.keys(g.children), b = [];
-    for (const h of o) {
-      const e = `${d}.${h}`, a = g.children[h], t = w(e, a);
-      b.push(...t), delete a.children, b.push([e, a]);
+    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 b;
+    return h;
   }
-  function T(d) {
-    const { components: g, ...o } = d, b = Object.values(o);
-    g && b.push(...Object.values(g));
-    for (const h of b)
-      Object.entries(G).forEach(([e, a]) => {
-        if (a in h.styles) {
-          const t = h.styles[a];
-          Object.entries(t).map(([v, N]) => {
-            h.styles[`${v}${e}`] = N;
-          }), delete h.styles[a];
-        }
-      }), R.forEach((e) => {
-        if (e in h.styles) {
-          const a = h.styles[e];
-          Object.entries(G).forEach(([t, v]) => {
-            if (v in a) {
-              const N = a[v];
-              Object.entries(N).map(([p, C]) => {
-                a[`${p}${t}`] = C;
-              }), delete a[v];
-            }
-          });
+  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);
         }
+      }), o.themes && Object.values(o.themes).forEach((a) => {
+        C(a), H.forEach((u) => {
+          if (u in a) {
+            const v = a[u];
+            C(v);
+          }
+        });
       });
   }
-})(D || (D = {}));
-const K = D;
-function re(l) {
-  const { clean: u, theme: i, component: c } = l;
-  return X(() => {
-    var f, w;
-    if (u)
+  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];
+      }
+    });
+  }
+})(_ || (_ = {}));
+const U = _;
+function ve(s) {
+  const { clean: l, theme: r, component: n } = s;
+  return Y(() => {
+    var c, w;
+    if (l)
       return;
-    let r = K.Styles[c] ?? ((f = K.Styles.components) == null ? void 0 : f[c]);
-    if (r)
-      return i ? { ...r.styles, ...(w = r.themes) == null ? void 0 : w[i].styles } : r.styles;
-  }, [c, 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 ? Q : Z;
-function me(l, u) {
-  const i = re(l);
-  return ne(I.flush, [l]), X(() => {
-    const c = [u ? I.svgClassName : I.boxClassName], r = i ? { ...i, ...l } : { ...l };
-    return U(r), R.forEach((f) => {
-      if (f in r) {
-        const w = r[f];
-        U(w), Object.entries(w).forEach(([T, d]) => {
-          c.push(I.get(T, d, f));
-        }), delete r[f];
+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(r).forEach(([f, w]) => {
-      c.push(I.get(f, w));
-    }), c;
-  }, [l, i]);
+    }), n;
+  }, [s, r]);
+}
+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 U(l) {
-  A(l, "disabled", "Disabled"), A(l, "hover", "H"), A(l, "focus", "F"), A(l, "active", "A");
+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 A(l, u, i) {
-  u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([c, r]) => {
-    l[`${c}${i}`] = r;
-  }), l[u] = l[u][0]) : ee.isObject(l[u]) && (Object.entries(l[u]).forEach(([c, r]) => {
-    l[`${c}${i}`] = r;
-  }), 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(([c, r]) => {
-    r && u.push(c);
-  }), 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
 };