@cronocode/react-box 3.1.1 → 3.1.3

package/core.mjs

@@ -1,13 +1,13 @@
-import { jsx as h, jsxs as pe } from "react/jsx-runtime";
-import he, { useContext as we, useState as se, useLayoutEffect as ie, useMemo as J, useEffect as ne, useRef as xe } from "react";
-import Fe from "./box.mjs";
-import O from "./components/baseSvg.mjs";
-function ue(...e) {
-  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ue(...r)), t) : (Object.entries(r).forEach(([o, i]) => {
+import { jsx as h, jsxs as he } from "react/jsx-runtime";
+import we, { useContext as xe, useState as ie, useLayoutEffect as ne, useMemo as Q, useEffect as ue, useRef as Fe } from "react";
+import Ne from "./box.mjs";
+import B from "./components/baseSvg.mjs";
+function ce(...e) {
+  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ce(...r)), t) : (Object.entries(r).forEach(([o, i]) => {
     i && t.push(o);
   }), t) : t, []);
 }
-const U = 4;
+const G = 4;
 var a;
 ((e) => {
   ((t) => {
@@ -20,7 +20,7 @@ var a;
     }
     t.svg = o;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
-    function r(v, c, f = U) {
+    function r(v, c, f = G) {
       return `${v / f}rem`;
     }
     t.rem = r;
@@ -74,7 +74,7 @@ var a;
     t.flip = p;
   })(e.Value || (e.Value = {}));
 })(a || (a = {}));
-var G;
+var W;
 ((e) => {
   e.colors = {
     currentColor: "currentColor",
@@ -379,8 +379,8 @@ var G;
     o = s;
   }
   e.setUserVariables = u;
-})(G || (G = {}));
-const y = G, S = {
+})(W || (W = {}));
+const y = W, R = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -1471,7 +1471,7 @@ const y = G, S = {
   translateX: [
     {
       values: 0,
-      valueFormat: (e) => `translateX(${e / U}rem)`,
+      valueFormat: (e) => `translateX(${e / G}rem)`,
       styleName: "transform"
     }
   ],
@@ -1479,7 +1479,7 @@ const y = G, S = {
   translateY: [
     {
       values: 0,
-      valueFormat: (e) => `translateY(${e / U}rem)`,
+      valueFormat: (e) => `translateY(${e / G}rem)`,
       styleName: "transform"
     }
   ],
@@ -1490,7 +1490,7 @@ const y = G, S = {
       valueFormat: () => "''"
     }
   ]
-}, ce = {
+}, de = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1511,24 +1511,25 @@ const y = G, S = {
   required: ":required",
   disabled: "[disabled]",
   selected: '[aria-selected="true"]'
-}, Ne = {
+}, Ce = {
   theme: ""
-}, Q = { ...ce, ...k, ...Ne }, de = Object.entries(Q).reduce(
+}, M = { ...de, ...k, ...Ce }, fe = Object.entries(M).reduce(
   (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
-), D = Object.entries(Q).reduce(
+), I = Object.entries(M).reduce(
   (e, [t]) => {
-    const r = de[t];
+    const r = fe[t];
     return Object.entries(e).forEach(([o, i]) => {
       e[+o + r] = [...i, t];
     }), e;
   },
   { 0: [] }
-), re = {
+), ae = {
   hoverGroup: "hover",
   focusGroup: "focus",
   activeGroup: "active",
   disabledGroup: "disabled",
+  selectedGroup: "selected",
   theme: "theme"
 }, _ = {
   /** Styles applied for small screens and larger. >= 640 */
@@ -1542,7 +1543,7 @@ const y = G, S = {
   /** Styles applied for 2x extra-large screens and larger. >= 1536 */
   xxl: 1536
 };
-var W;
+var K;
 ((e) => {
   function t(n, u, s) {
     const d = { ...n }, b = d.props || {};
@@ -1568,8 +1569,8 @@ var W;
     return n in u;
   }
   e.isKeyOf = i;
-})(W || (W = {}));
-const C = W, ae = {
+})(K || (K = {}));
+const N = K, oe = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -1901,6 +1902,7 @@ const C = W, ae = {
   datagrid: {
     styles: {
       b: 1,
+      bgColor: "white",
       borderColor: "gray-400",
       overflow: "hidden",
       borderRadius: 1
@@ -2019,14 +2021,15 @@ const C = W, ae = {
               transition: "none"
             },
             variants: {
-              isRowNumber: {},
-              isRowSelection: {},
               isPinned: { position: "sticky", zIndex: 2, bgColor: "gray-200" },
               isFirstLeftPinned: {},
               isLastLeftPinned: { br: 1 },
               isFirstRightPinned: { bl: 1 },
               isLastRightPinned: {},
-              isSortable: { cursor: "pointer" }
+              isSortable: { cursor: "pointer" },
+              isRowSelected: {},
+              isRowSelection: {},
+              isRowNumber: { jc: "center" }
             },
             children: {
               contextMenu: {
@@ -2042,7 +2045,6 @@ const C = W, ae = {
                   jc: "center",
                   ai: "center",
                   transition: "none",
-                  bgColor: "gray-200",
                   hover: { bgColor: "gray-300" }
                 },
                 children: {
@@ -2102,23 +2104,28 @@ const C = W, ae = {
           }
         }
       },
-      cell: {
-        styles: {
-          bb: 1,
-          borderColor: "gray-400",
-          transition: "none",
-          ai: "center",
-          overflow: "hidden",
-          hoverGroup: { "grid-row": { bgColor: "gray-200" } }
-        },
-        variants: {
-          isRowNumber: { bgColor: "gray-200" },
-          isRowSelection: {},
-          isPinned: { position: "sticky", bgColor: "gray-100", zIndex: 1 },
-          isFirstLeftPinned: {},
-          isLastLeftPinned: { br: 1 },
-          isFirstRightPinned: { bl: 1 },
-          isLastRightPinned: {}
+      body: {
+        styles: {},
+        children: {
+          cell: {
+            styles: {
+              bb: 1,
+              borderColor: "gray-400",
+              transition: "none",
+              ai: "center",
+              hoverGroup: { "grid-row": { bgColor: "gray-200" } }
+            },
+            variants: {
+              isPinned: { position: "sticky", bgColor: "gray-100", zIndex: 1 },
+              isFirstLeftPinned: {},
+              isLastLeftPinned: { br: 1 },
+              isFirstRightPinned: { bl: 1 },
+              isLastRightPinned: {},
+              isRowNumber: { bgColor: "gray-200", jc: "right" },
+              isRowSelection: {},
+              isRowSelected: {}
+            }
+          }
         }
       },
       bottomBar: {
@@ -2133,43 +2140,43 @@ const C = W, ae = {
     }
   }
 };
-var K;
+var q;
 ((e) => {
   function t(o, i, n) {
     return y.setUserVariables(o), Object.entries(i).forEach(([u, s]) => {
-      S[u] = s;
+      R[u] = s;
     }), Object.entries(n).forEach(([u, s]) => {
-      const d = S[u];
-      S[u] = d ? [...s, ...d] : s;
+      const d = R[u];
+      R[u] = d ? [...s, ...d] : s;
     }), { extendedProps: i, extendedPropTypes: n };
   }
-  e.extend = t, e.componentsStyles = ae;
+  e.extend = t, e.componentsStyles = oe;
   function r(o) {
-    return e.componentsStyles = C.mergeDeep(ae, o), o;
+    return e.componentsStyles = N.mergeDeep(oe, o), o;
   }
   e.components = r;
-})(K || (K = {}));
-const Ce = K, q = he.createContext({ theme: "", setTheme: () => {
+})(q || (q = {}));
+const Ve = q, X = we.createContext({ theme: "", setTheme: () => {
 } });
-function X(e) {
-  const { children: t, theme: r, use: o = "local" } = e, [i, n] = se(r);
-  return ie(() => {
+function Z(e) {
+  const { children: t, theme: r, use: o = "local" } = e, [i, n] = ie(r);
+  return ne(() => {
     if (o === "local") return;
     const u = document.documentElement;
     return u.classList.add(i), () => {
       u.classList.remove(i);
     };
-  }, [i]), o === "local" ? /* @__PURE__ */ h(q.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ h(Fe, { className: i, children: t }) }) : /* @__PURE__ */ h(q.Provider, { value: { theme: i, setTheme: n }, children: t });
+  }, [i]), o === "local" ? /* @__PURE__ */ h(X.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ h(Ne, { className: i, children: t }) }) : /* @__PURE__ */ h(X.Provider, { value: { theme: i, setTheme: n }, children: t });
 }
 ((e) => {
   function t() {
-    const { theme: r, setTheme: o } = we(q);
+    const { theme: r, setTheme: o } = xe(X);
     return [r, o];
   }
   e.useTheme = t;
-})(X || (X = {}));
-const Le = X;
-class Ve {
+})(Z || (Z = {}));
+const Ie = Z;
+class ze {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -2177,58 +2184,58 @@ class Ve {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: r, next: o } = ze, i = t - r.length;
+    const { first: r, next: o } = $e, i = t - r.length;
     if (i < 0)
       return r[t];
     const n = Math.floor(i / o.length), u = i - n * o.length;
     return this.getByIndex(n) + o[u];
   }
 }
-const ze = {
+const $e = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-function $e(e) {
+function Ae(e) {
   const { clean: t, component: r, variant: o } = e;
-  return J(() => {
+  return Q(() => {
     if (t) return;
     const i = r?.split(".");
     if (!i) return;
-    const n = i.reduce((d, b, l) => l === 0 ? Ce.componentsStyles[b] : d?.children?.[b], void 0);
+    const n = i.reduce((d, b, l) => l === 0 ? Ve.componentsStyles[b] : d?.children?.[b], void 0);
     if (!n) return;
     if (!o) return n.styles;
-    const u = ue(o);
+    const u = ce(o);
     if (u.length === 0) return n.styles;
-    const s = C.mergeDeep(...u.map((d) => n.variants?.[d]));
-    return n.styles ? C.mergeDeep(n.styles, s) : s;
+    const s = N.mergeDeep(...u.map((d) => n.variants?.[d]));
+    return n.styles ? N.mergeDeep(n.styles, s) : s;
   }, [t, r, o]);
 }
-const Ae = new Ve(), Se = typeof window < "u" && typeof window.document < "u", fe = typeof process == "object" && process.env?.NODE_ENV === "test", Re = Se && !fe ? ie : ne, me = "_b", E = "_s";
-function Ie(e, t) {
-  Re(j.flush, [e]);
-  const r = $e(e);
-  return J(() => {
-    const o = [t ? E : me], i = r ? C.mergeDeep(r, e) : e;
-    return j.addClassNames(i, o, []), o;
+const Se = new ze(), Re = typeof window < "u" && typeof window.document < "u", me = typeof process == "object" && process.env?.NODE_ENV === "test", je = Re && !me ? ne : ue, ve = "_b", E = "_s";
+function _e(e, t) {
+  je(O.flush, [e]);
+  const r = Ae(e);
+  return Q(() => {
+    const o = [t ? E : ve], i = r ? N.mergeDeep(r, e) : e;
+    return O.addClassNames(i, o, []), o;
   }, [e, t, r]);
 }
-var j;
+var O;
 ((e) => {
   let t = !0, r = {};
   function o(l, g, p, v, c) {
     Object.entries(l).forEach(([f, m]) => {
-      if (C.isKeyOf(f, S))
+      if (N.isKeyOf(f, R))
         u(f, m, g, p, v, c);
-      else if (C.isKeyOf(f, ce))
+      else if (N.isKeyOf(f, de))
         o(m, g, [...p, f], v, c);
-      else if (C.isKeyOf(f, k)) {
+      else if (N.isKeyOf(f, k)) {
         if (Array.isArray(m)) {
-          const [w, x] = m;
-          o(x, g, [...p, f], v, c);
+          const [x, w] = m;
+          o(w, g, [...p, f], v, c);
         }
-        C.isObject(m) && o(m, g, [...p, f], v, c);
-      } else C.isKeyOf(f, _) ? o(m, g, p, f, c) : C.isKeyOf(f, re) && Object.entries(m).forEach(([w, x]) => {
-        o(x, g, [...p, re[f]], v, w);
+        N.isObject(m) && o(m, g, [...p, f], v, c);
+      } else N.isKeyOf(f, _) ? o(m, g, p, f, c) : N.isKeyOf(f, ae) && Object.entries(m).forEach(([x, w]) => {
+        o(w, g, [...p, ae[f]], v, x);
       });
     });
   }
@@ -2236,34 +2243,34 @@ var j;
   function i() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const l = Object.entries(S).reduce((f, [m], w) => (f[m] = w, f), {}), g = `: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;z-index:99999;}
+    const l = Object.entries(R).reduce((f, [m], x) => (f[m] = x, f), {}), g = `: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;z-index:99999;}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${me}{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;}
+.${ve}{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}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${E} path,.${E} circle,.${E} rect,.${E} line {transition: all var(--svgTransitionTime);}
 `, p = Object.entries(r);
     p.sort(
       ([f], [m]) => (_[f] ?? 0) - (_[m] ?? 0)
     );
     const v = p.reduce(
-      (f, [m, w]) => (m !== "normal" && f.push(`@media(min-width: ${_[m]}px){`), Object.entries(w).forEach(([x, M]) => {
-        const { __parents: ee, ...ve } = M, te = Object.entries(ve);
-        te.sort(([V], [B]) => l[V] - l[B]), te.forEach(([V, B]) => {
-          B.forEach((z) => {
-            const F = S[V].find((N) => Array.isArray(N.values) ? N.values.includes(z) : typeof z == typeof N.values);
+      (f, [m, x]) => (m !== "normal" && f.push(`@media(min-width: ${_[m]}px){`), Object.entries(x).forEach(([w, H]) => {
+        const { __parents: ee, ...ye } = H, te = Object.entries(ye);
+        te.sort(([C], [T]) => l[C] - l[T]), te.forEach(([C, T]) => {
+          T.forEach((z) => {
+            const F = R[C].find((V) => Array.isArray(V.values) ? V.values.includes(z) : typeof z == typeof V.values);
             if (!F) return;
-            const $ = s(V, z, +x, m), H = D[+x].map((N) => Q[N]).join(""), A = F.selector?.(`.${$}`, H) ?? `.${$}${H}`, L = Array.isArray(F.styleName) ? F.styleName : [F.styleName ?? V], I = F.valueFormat?.(z, y.getVariableValue) ?? z;
-            f.push(`${A}{${L.map((N) => `${N}:${I}`).join(";")}}`);
+            const $ = s(C, z, +w, m), U = I[+w].map((V) => M[V]).join(""), A = F.selector?.(`.${$}`, U) ?? `.${$}${U}`, L = Array.isArray(F.styleName) ? F.styleName : [F.styleName ?? C], D = F.valueFormat?.(z, y.getVariableValue) ?? z;
+            f.push(`${A}{${L.map((V) => `${V}:${D}`).join(";")}}`);
           });
-        }), ee && Object.entries(ee).forEach(([V, B]) => {
-          const z = Object.entries(B);
-          z.sort(([R], [F]) => l[R] - l[F]), z.forEach(([R, F]) => {
+        }), ee && Object.entries(ee).forEach(([C, T]) => {
+          const z = Object.entries(T);
+          z.sort(([j], [F]) => l[j] - l[F]), z.forEach(([j, F]) => {
             F.forEach(($) => {
-              const A = S[R].find((T) => Array.isArray(T.values) ? T.values.includes($) : typeof $ == typeof T.values);
+              const A = R[j].find((S) => Array.isArray(S.values) ? S.values.includes($) : typeof $ == typeof S.values);
               if (!A) return;
-              const L = s(R, $, +x, m, V), [I] = D[+x], N = I === "theme" ? `.${V} .${L}` : `.${V}:${I} .${L}`, ye = A.selector?.(N, "") ?? N, ge = Array.isArray(A.styleName) ? A.styleName : [A.styleName ?? R], be = A.valueFormat?.($, y.getVariableValue) ?? $;
-              f.push(`${ye}{${ge.map((T) => `${T}:${be}`).join(";")}}`);
+              const L = s(j, $, +w, m, C), [D] = I[+w], V = I[+w].map((S) => M[S]).join(""), re = D === "theme" ? `.${C} .${L}` : `.${C}${V} .${L}`, ge = A.selector?.(re, "") ?? re, be = Array.isArray(A.styleName) ? A.styleName : [A.styleName ?? j], pe = A.valueFormat?.($, y.getVariableValue) ?? $;
+              f.push(`${ge}{${be.map((S) => `${S}:${pe}`).join(";")}}`);
             });
           });
         });
@@ -2281,25 +2288,25 @@ a,ul{all: unset;}
   e.clear = n;
   function u(l, g, p, v, c = "normal", f) {
     if (g == null) return;
-    const m = v.reduce((x, M) => x + de[M], 0);
+    const m = v.reduce((w, H) => w + fe[H], 0);
     r[c] ? r[c][m] ? r[c][m][l] || (r[c][m][l] = /* @__PURE__ */ new Set()) : r[c][m] = { [l]: /* @__PURE__ */ new Set() } : r[c] = { [m]: { [l]: /* @__PURE__ */ new Set() } }, f ? (r[c][m].__parents ? r[c][m].__parents[f] ? r[c][m].__parents[f][l] || (r[c][m].__parents[f][l] = /* @__PURE__ */ new Set()) : r[c][m].__parents[f] = { [l]: /* @__PURE__ */ new Set() } : r[c][m].__parents = { [f]: { [l]: /* @__PURE__ */ new Set() } }, r[c][m].__parents[f][l].has(g) || (r[c][m].__parents[f][l].add(g), t = !0)) : r[c][m][l].has(g) || (r[c][m][l].add(g), t = !0);
-    const w = s(l, g, m, c, f);
-    p.push(w);
+    const x = s(l, g, m, c, f);
+    p.push(x);
   }
   function s(l, g, p, v, c) {
-    const f = D[p], m = `${v === "normal" ? "" : `${v}-`}${f.map((w) => `${w}-`).join("")}${c ? `${c}-` : ""}${l}-${g}`;
-    return fe ? m : Ae.getIdentity(m);
+    const f = I[p], m = `${v === "normal" ? "" : `${v}-`}${f.map((x) => `${x}-`).join("")}${c ? `${c}-` : ""}${l}-${g}`;
+    return me ? m : Se.getIdentity(m);
   }
   const d = "crono-styles";
   function b() {
     let l = document.getElementById(d);
     return l || (l = document.createElement("style"), l.setAttribute("id", d), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
   }
-})(j || (j = {}));
-var oe;
+})(O || (O = {}));
+var le;
 ((e) => {
-  e.flush = j.flush, e.clear = j.clear;
-})(oe || (oe = {}));
+  e.flush = O.flush, e.clear = O.clear;
+})(le || (le = {}));
 Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
   return this.filter((t) => !e(t));
 });
@@ -2345,9 +2352,9 @@ Array.prototype.groupBy || (Array.prototype.groupBy = function(e, t = !1) {
   }, /* @__PURE__ */ new Map());
   return Array.from(r, ([o, i]) => ({ key: o, values: i }));
 });
-function _e(e) {
-  const { node: t = null, event: r = "click", hideOnScroll: o = !1, hideOnResize: i = !1, hideOnEscape: n = !0 } = e ?? {}, [u, s] = se(!1), d = xe(null);
-  return ne(() => {
+function ke(e) {
+  const { node: t = null, event: r = "click", hideOnScroll: o = !1, hideOnResize: i = !1, hideOnEscape: n = !0 } = e ?? {}, [u, s] = ie(!1), d = Fe(null);
+  return ue(() => {
     function b(c) {
       (t ?? d.current)?.contains(c.target) === !1 && s(!1);
     }
@@ -2369,14 +2376,14 @@ function _e(e) {
 const Ee = {
   selected: "aria-selected"
 };
-var le;
+var se;
 ((e) => {
   function t(r, o, i) {
     r !== void 0 && r != null && (i[Ee[o] ?? o] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
-})(le || (le = {}));
-var Z;
+})(se || (se = {}));
+var Y;
 ((e) => {
   function t(r, o = 300) {
     let i = !1, n;
@@ -2391,9 +2398,9 @@ var Z;
     };
   }
   e.throttle = t;
-})(Z || (Z = {}));
-const ke = Z;
-function Me(e) {
+})(Y || (Y = {}));
+const Me = Y;
+function He(e) {
   let t;
   return Object.defineProperty({
     clear() {
@@ -2403,8 +2410,8 @@ function Me(e) {
     get: () => (t === void 0 && (t = e()), t)
   });
 }
-function He(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ h(
+function Ue(e) {
+  return /* @__PURE__ */ h(B, { viewBox: "4 2 16 18", width: "1rem", fill: "currentColor", ...e, children: /* @__PURE__ */ h(
     "path",
     {
       fillRule: "evenodd",
@@ -2414,7 +2421,10 @@ function He(e) {
   ) });
 }
 function De(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ h(B, { ...e, children: /* @__PURE__ */ h("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+}
+function Ge(e) {
+  return /* @__PURE__ */ h(B, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ h(
     "path",
     {
       strokeWidth: 4,
@@ -2422,8 +2432,8 @@ function De(e) {
     }
   ) });
 }
-function Ue(e) {
-  return /* @__PURE__ */ pe(O, { viewBox: "0 0 490.6 490.6", ...e, children: [
+function We(e) {
+  return /* @__PURE__ */ he(B, { viewBox: "0 0 490.6 490.6", ...e, children: [
     /* @__PURE__ */ h("path", { d: "M151.549 145.274c0 23.39 9.145 50.385 24.462 72.214 17.389 24.78 39.376 38.427 61.911 38.427 22.534 0 44.521-13.647 61.91-38.428 15.317-21.828 24.462-48.824 24.462-72.213 0-47.626-38.746-86.372-86.372-86.372s-86.373 38.746-86.373 86.372zm86.373-71.372c39.354 0 71.372 32.018 71.372 71.372 0 20.118-8.33 44.487-21.74 63.598-14.29 20.364-32.38 32.043-49.632 32.043-17.252 0-35.342-11.679-49.632-32.043-13.41-19.11-21.741-43.479-21.741-63.598 0-39.355 32.018-71.372 71.373-71.372z" }),
     /* @__PURE__ */ h("path", { d: "M302.372 239.167a7.502 7.502 0 0 0-8.52 1.461c-16.775 16.728-36.117 25.569-55.935 25.569-19.821 0-39.158-8.841-55.923-25.567a7.5 7.5 0 0 0-8.521-1.463c-25.254 12.022-46.628 30.829-61.811 54.388-15.596 24.2-23.84 52.277-23.84 81.195v.121c0 2.116.894 4.134 2.461 5.556 40.492 36.722 92.922 56.945 147.633 56.945s107.141-20.224 147.632-56.945a7.499 7.499 0 0 0 2.462-5.556v-.121c0-28.918-8.242-56.995-23.834-81.194-15.179-23.561-36.551-42.368-61.804-54.389zm-64.454 183.205c-49.861 0-97.685-18.023-135.057-50.827.583-24.896 7.956-48.986 21.411-69.865 12.741-19.77 30.322-35.823 51.058-46.676 18.746 17.157 40.285 26.193 62.588 26.193 22.3 0 43.842-9.035 62.598-26.193 20.734 10.853 38.313 26.906 51.053 46.676 13.452 20.877 20.823 44.968 21.406 69.865-37.373 32.804-85.197 50.827-135.057 50.827z" }),
     /* @__PURE__ */ h("path", { d: "M455.077 243.89c-13.23-20.532-31.856-36.923-53.864-47.399a7.501 7.501 0 0 0-8.52 1.461c-14.312 14.271-30.79 21.815-47.654 21.815-9.142 0-18.184-2.205-26.873-6.553a7.5 7.5 0 0 0-6.712 13.414c10.793 5.401 22.093 8.139 33.586 8.139 19.335 0 38.004-7.737 54.288-22.437a116.088 116.088 0 0 1 43.141 39.685c11.445 17.763 17.756 38.243 18.338 59.416-18.524 16.158-40.553 28.449-63.91 35.634a7.5 7.5 0 0 0 4.41 14.338c26.509-8.154 51.435-22.362 72.082-41.088a7.499 7.499 0 0 0 2.462-5.556v-.105c-.001-25.204-7.185-49.674-20.774-70.764zM130.493 210.473c7.93 0 15.841-1.934 23.516-5.748a7.5 7.5 0 0 0-6.675-13.433c-5.582 2.774-11.248 4.18-16.841 4.18-14.541 0-29.836-9.914-41.964-27.2-11.449-16.318-18.562-37.112-18.562-54.266 0-33.375 27.152-60.527 60.526-60.527 15.752 0 30.67 6.022 42.006 16.958a7.499 7.499 0 0 0 10.604-.19 7.499 7.499 0 0 0-.19-10.604c-14.146-13.647-32.763-21.163-52.42-21.163-41.646 0-75.526 33.881-75.526 75.527 0 20.38 7.957 43.887 21.283 62.881 15.195 21.657 34.459 33.585 54.243 33.585z" }),
@@ -2431,31 +2441,28 @@ function Ue(e) {
     /* @__PURE__ */ h("path", { d: "M83.698 351.005c.19.45-.18-.46 0 0zM303.345 70.438c11.336-10.936 26.254-16.958 42.006-16.958 33.374 0 60.526 27.152 60.526 60.527 0 17.154-7.112 37.947-18.563 54.266-12.128 17.286-27.424 27.2-41.964 27.2-5.593 0-11.259-1.406-16.841-4.18a7.5 7.5 0 0 0-6.676 13.433c7.675 3.814 15.587 5.748 23.517 5.748 19.783 0 39.048-11.927 54.243-33.585 13.327-18.994 21.283-42.501 21.283-62.881 0-41.646-33.881-75.527-75.526-75.527-19.657 0-38.273 7.516-52.42 21.163a7.5 7.5 0 0 0 10.415 10.794z" })
   ] });
 }
-function Ge(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ h("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
-}
-function We(e) {
-  return /* @__PURE__ */ h(O, { ...e, children: /* @__PURE__ */ h("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
+function Ke(e) {
+  return /* @__PURE__ */ h(B, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ h("path", { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" }) });
 }
-var Y;
+var P;
 ((e) => {
   function t(r) {
     return r.charAt(0).toUpperCase() + r.slice(1);
   }
   e.capitalize = t;
-})(Y || (Y = {}));
-const Ke = Y;
-function qe() {
-  return J(() => {
+})(P || (P = {}));
+const qe = P;
+function Xe() {
+  return Q(() => {
     const e = "crono-box";
     let t = document.getElementById(e);
     return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
   }, []);
 }
-function Xe(e) {
-  return /* @__PURE__ */ h(O, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ h("path", { d: "M4.238 2.988a1.25 1.25 0 0 0-.87 2.147L10.231 12l-6.87 6.87a1.251 1.251 0 1 0 1.769 1.769L12 13.768l6.865 6.865a1.25 1.25 0 1 0 1.768-1.768L13.768 12l6.857-6.857a1.25 1.25 0 1 0-1.768-1.768L12 10.232 5.135 3.367a1.25 1.25 0 0 0-.897-.379z" }) });
+function Ze(e) {
+  return /* @__PURE__ */ h(B, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ h("path", { d: "M4.238 2.988a1.25 1.25 0 0 0-.87 2.147L10.231 12l-6.87 6.87a1.251 1.251 0 1 0 1.769 1.769L12 13.768l6.865 6.865a1.25 1.25 0 1 0 1.768-1.768L13.768 12l6.857-6.857a1.25 1.25 0 1 0-1.768-1.768L12 10.232 5.135 3.367a1.25 1.25 0 0 0-.897-.379z" }) });
 }
-var P;
+var J;
 ((e) => {
   function t(o) {
     const i = Array.from(o.elements).reduce(
@@ -2495,27 +2502,27 @@ var P;
     } else
       o[i] = n;
   }
-})(P || (P = {}));
-const Ze = P;
+})(J || (J = {}));
+const Ye = J;
 export {
-  le as B,
-  Xe as C,
-  De as D,
-  He as E,
-  ke as F,
-  Ue as G,
-  C as O,
-  Ge as P,
-  We as S,
-  Le as T,
+  se as B,
+  Ze as C,
+  Ge as D,
+  Ue as E,
+  Me as F,
+  We as G,
+  N as O,
+  Ke as P,
+  De as S,
+  Ie as T,
   y as V,
-  Ce as a,
-  _e as b,
-  ue as c,
-  Ze as d,
-  Ke as e,
-  qe as f,
-  oe as g,
-  Me as m,
-  Ie as u
+  Ve as a,
+  ke as b,
+  ce as c,
+  Ye as d,
+  qe as e,
+  Xe as f,
+  le as g,
+  He as m,
+  _e as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "type": "module",
   "main": "./box.cjs",
   "module": "./box.mjs",
@@ -69,7 +69,9 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",

package/types.d.ts

@@ -25,7 +25,7 @@ type BoxPseudoClassesStyles2Nested = ExtractKeys<typeof pseudo2, BoxStylesWithPs
 type BoxPseudoClassesStyles2TopLevel = ExtractKeys<typeof pseudo2, boolean | [boolean, BoxStylesWithPseudoClasses]>;
 export interface BoxStylesWithPseudoClasses extends BoxStyles, BoxPseudoClassesStyles1, BoxPseudoClassesStyles2Nested {
 }
-type BoxPseudoGroupClassesStyles = ExtractKeys<typeof pseudoGroupClasses, Record<string, BoxStyles>>;
+type BoxPseudoGroupClassesStyles = ExtractKeys<typeof pseudoGroupClasses, Record<string, BoxStylesWithPseudoClasses>>;
 type BoxBreakpointsStyles = ExtractKeys<typeof breakpoints, BoxStylesWithPseudoClasses & BoxPseudoGroupClassesStyles>;
 type ExtractVariants<T> = T extends {
     variants?: infer Variants;