@cronocode/react-box 2.0.3 → 2.0.6

package/core.mjs

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