@cronocode/react-box 3.0.19 → 3.0.21

package/core.mjs

@@ -1,9 +1,9 @@
-import we, { useMemo as ee, useLayoutEffect as ce, useEffect as de, useState as fe, useContext as xe, useRef as Fe } from "react";
-import { jsx as p, jsxs as Ne } from "react/jsx-runtime";
-import Ce from "./box.mjs";
+import xe, { useMemo as te, useLayoutEffect as de, useEffect as fe, useState as me, useContext as Fe, useRef as Ne } from "react";
+import { jsx as p, jsxs as Ce } from "react/jsx-runtime";
+import Ve from "./box.mjs";
 import R from "./components/baseSvg.mjs";
-function me(...e) {
-  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...me(...r)), t) : (Object.entries(r).forEach(([o, i]) => {
+function ve(...e) {
+  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ve(...r)), t) : (Object.entries(r).forEach(([o, i]) => {
     i && t.push(o);
   }), t) : t, []);
 }
@@ -56,18 +56,18 @@ var a;
       return `repeat(${c},minmax(0,1fr))`;
     }
     t.gridColumns = f;
-    function g(v, c) {
+    function b(v, c) {
       return c === "full-row" ? "1/-1" : `span ${c}/span ${c}`;
     }
-    t.gridColumn = g;
+    t.gridColumn = b;
     function s(v, c) {
       return `${c}ms`;
     }
     t.ms = s;
-    function b(v, c) {
+    function g(v, c) {
       return `${c}deg`;
     }
-    t.rotate = b;
+    t.rotate = g;
     function h(v, c) {
       return c === "xAxis" ? "-1 1" : "1 -1";
     }
@@ -676,6 +676,12 @@ const y = K, S = {
       values: ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end", "self-start", "self-end"]
     }
   ],
+  placeContent: [
+    {
+      styleName: "place-content",
+      values: ["start", "end", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch"]
+    }
+  ],
   /** The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. */
   alignContent: [
     {
@@ -1460,7 +1466,7 @@ const y = K, S = {
       styleName: "transform"
     }
   ]
-}, ve = {
+}, ye = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1479,20 +1485,20 @@ const y = K, S = {
   required: ":required",
   disabled: "[disabled]",
   selected: '[aria-selected="true"]'
-}, Ve = {
+}, ze = {
   theme: ""
-}, te = { ...ve, ...M, ...Ve }, ye = Object.entries(te).reduce(
+}, re = { ...ye, ...M, ...ze }, ge = Object.entries(re).reduce(
   (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
-), G = Object.entries(te).reduce(
+), G = Object.entries(re).reduce(
   (e, [t]) => {
-    const r = ye[t];
+    const r = ge[t];
     return Object.entries(e).forEach(([o, i]) => {
       e[+o + r] = [...i, t];
     }), e;
   },
   { 0: [] }
-), se = {
+), ie = {
   hoverGroup: "hover",
   focusGroup: "focus",
   activeGroup: "active",
@@ -1513,12 +1519,12 @@ const y = K, S = {
 var q;
 ((e) => {
   function t(n, u, l) {
-    const f = { ...n }, g = f.props || {};
+    const f = { ...n }, b = f.props || {};
     return u.forEach((s) => {
-      s in f && (g[s] = f[s], delete f[s]);
-    }), l && Object.entries(l).forEach(([s, b]) => {
-      g[s] = b;
-    }), f.props = g, f;
+      s in f && (b[s] = f[s], delete f[s]);
+    }), l && Object.entries(l).forEach(([s, g]) => {
+      b[s] = g;
+    }), f.props = b, f;
   }
   e.buildProps = t;
   function r(n) {
@@ -1527,8 +1533,8 @@ var q;
   e.isObject = r;
   function o(...n) {
     return n.reduce((u, l) => (Object.keys(l ?? {}).forEach((f) => {
-      const g = u[f], s = l[f];
-      r(s) && "clean" in s && s.clean ? u[f] = s : f in M && typeof s == "boolean" || (f in M && Array.isArray(s) ? u[f] = o(g, s[1] ?? {}) : Array.isArray(g) && Array.isArray(s) ? u[f] = g.concat(...s) : r(g) && r(s) ? u[f] = o(g, s) : u[f] = s);
+      const b = u[f], s = l[f];
+      r(s) && "clean" in s && s.clean ? u[f] = s : f in M && typeof s == "boolean" || (f in M && Array.isArray(s) ? u[f] = o(b, s[1] ?? {}) : Array.isArray(b) && Array.isArray(s) ? u[f] = b.concat(...s) : r(b) && r(s) ? u[f] = o(b, s) : u[f] = s);
     }), u), {});
   }
   e.mergeDeep = o;
@@ -1538,7 +1544,7 @@ var q;
   e.isKeyOf = i;
 })(q || (q = {}));
 const C = q;
-class ze {
+class $e {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -1546,17 +1552,17 @@ class ze {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: r, next: o } = $e, i = t - r.length;
+    const { first: r, next: o } = Ae, 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 $e = {
+const Ae = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
-}, ie = {
+}, ne = {
   h1: {
     styles: { fontSize: 14 * 2.5 }
   },
@@ -1978,62 +1984,62 @@ var X;
       S[u] = f ? [...l, ...f] : l;
     }), { extendedProps: i, extendedPropTypes: n };
   }
-  e.extend = t, e.componentsStyles = ie;
+  e.extend = t, e.componentsStyles = ne;
   function r(o) {
-    return e.componentsStyles = C.mergeDeep(ie, o), o;
+    return e.componentsStyles = C.mergeDeep(ne, o), o;
   }
   e.components = r;
 })(X || (X = {}));
-const Ae = X;
-function Se(e) {
+const Se = X;
+function Ee(e) {
   const { clean: t, component: r, variant: o } = e;
-  return ee(() => {
+  return te(() => {
     if (t) return;
     const i = r == null ? void 0 : r.split(".");
     if (!i) return;
-    const n = i.reduce((f, g, s) => {
-      var b;
-      return s === 0 ? Ae.componentsStyles[g] : (b = f == null ? void 0 : f.children) == null ? void 0 : b[g];
+    const n = i.reduce((f, b, s) => {
+      var g;
+      return s === 0 ? Se.componentsStyles[b] : (g = f == null ? void 0 : f.children) == null ? void 0 : g[b];
     }, void 0);
     if (!n) return;
     if (!o) return n.styles;
-    const u = me(o);
+    const u = ve(o);
     if (u.length === 0) return n.styles;
     const l = C.mergeDeep(...u.map((f) => {
-      var g;
-      return (g = n.variants) == null ? void 0 : g[f];
+      var b;
+      return (b = n.variants) == null ? void 0 : b[f];
     }));
     return C.mergeDeep(n.styles, l);
   }, [t, r, o]);
 }
-const Ee = new ze(), Oe = typeof window < "u" && typeof window.document < "u";
-var ue;
-const be = typeof process == "object" && ((ue = process.env) == null ? void 0 : ue.NODE_ENV) === "test", je = Oe && !be ? ce : de, ge = "_b", O = "_s";
-function _e(e, t) {
-  je(j.flush, [e]);
-  const r = Se(e);
-  return ee(() => {
-    const o = [t ? O : ge], i = r ? C.mergeDeep(r, e) : e;
+const Oe = new $e(), je = typeof window < "u" && typeof window.document < "u";
+var ce;
+const be = typeof process == "object" && ((ce = process.env) == null ? void 0 : ce.NODE_ENV) === "test", Re = je && !be ? de : fe, he = "_b", O = "_s";
+function ke(e, t) {
+  Re(j.flush, [e]);
+  const r = Ee(e);
+  return te(() => {
+    const o = [t ? O : he], i = r ? C.mergeDeep(r, e) : e;
     return j.addClassNames(i, o, []), o;
   }, [e, t, r]);
 }
 var j;
 ((e) => {
   let t = !0, r = {};
-  function o(s, b, h, v, c) {
+  function o(s, g, h, v, c) {
     Object.entries(s).forEach(([d, m]) => {
       if (C.isKeyOf(d, S))
-        u(d, m, b, h, v, c);
-      else if (C.isKeyOf(d, ve))
-        o(m, b, [...h, d], v, c);
+        u(d, m, g, h, v, c);
+      else if (C.isKeyOf(d, ye))
+        o(m, g, [...h, d], v, c);
       else if (C.isKeyOf(d, M)) {
         if (Array.isArray(m)) {
           const [F, N] = m;
-          o(N, b, [...h, d], v, c);
+          o(N, g, [...h, d], v, c);
         }
-        C.isObject(m) && o(m, b, [...h, d], v, c);
-      } else C.isKeyOf(d, H) ? o(m, b, h, d, c) : C.isKeyOf(d, se) && Object.entries(m).forEach(([F, N]) => {
-        o(N, b, [...h, se[d]], v, F);
+        C.isObject(m) && o(m, g, [...h, d], v, c);
+      } else C.isKeyOf(d, H) ? o(m, g, h, d, c) : C.isKeyOf(d, ie) && Object.entries(m).forEach(([F, N]) => {
+        o(N, g, [...h, ie[d]], v, F);
       });
     });
   }
@@ -2041,44 +2047,44 @@ var j;
   function i() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const s = Object.entries(S).reduce((d, [m], F) => (d[m] = F, d), {}), b = `: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 s = Object.entries(S).reduce((d, [m], F) => (d[m] = F, d), {}), 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;}
-.${ge}{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;}
+.${he}{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;}
 .${O}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${O} path,.${O} circle,.${O} rect,.${O} line {transition: all var(--svgTransitionTime);}
 `, h = Object.entries(r);
     h.sort(
       ([d], [m]) => (H[d] ?? 0) - (H[m] ?? 0)
     );
     const v = h.reduce(
-      (d, [m, F]) => (m !== "normal" && d.push(`@media(min-width: ${H[m]}px){`), Object.entries(F).forEach(([N, D]) => {
-        const { __parents: re, ...he } = D, ae = Object.entries(he);
-        ae.sort(([V], [B]) => s[V] - s[B]), ae.forEach(([V, B]) => {
+      (d, [m, F]) => (m !== "normal" && d.push(`@media(min-width: ${H[m]}px){`), Object.entries(F).forEach(([N, U]) => {
+        const { __parents: ae, ...pe } = U, oe = Object.entries(pe);
+        oe.sort(([V], [B]) => s[V] - s[B]), oe.forEach(([V, B]) => {
           B.forEach(($) => {
             var T, k;
             const w = S[V].find((z) => Array.isArray(z.values) ? z.values.includes($) : typeof $ == typeof z.values);
             if (!w) return;
-            const A = l(V, $, +N, m), U = G[+N].map((z) => te[z]).join(""), x = ((T = w.selector) == null ? void 0 : T.call(w, `.${A}`, U)) ?? `.${A}${U}`, L = Array.isArray(w.styleName) ? w.styleName : [w.styleName ?? V], _ = ((k = w.valueFormat) == null ? void 0 : k.call(w, $, y.getVariableValue)) ?? $;
+            const A = l(V, $, +N, m), D = G[+N].map((z) => re[z]).join(""), x = ((T = w.selector) == null ? void 0 : T.call(w, `.${A}`, D)) ?? `.${A}${D}`, L = Array.isArray(w.styleName) ? w.styleName : [w.styleName ?? V], _ = ((k = w.valueFormat) == null ? void 0 : k.call(w, $, y.getVariableValue)) ?? $;
             d.push(`${x}{${L.map((z) => `${z}:${_}`).join(";")}}`);
           });
-        }), re && Object.entries(re).forEach(([V, B]) => {
+        }), ae && Object.entries(ae).forEach(([V, B]) => {
           const $ = Object.entries(B);
           $.sort(([E], [w]) => s[E] - s[w]), $.forEach(([E, w]) => {
             w.forEach((A) => {
-              var oe, le;
+              var le, se;
               const x = S[E].find((I) => Array.isArray(I.values) ? I.values.includes(A) : typeof A == typeof I.values);
               if (!x) return;
-              const L = l(E, A, +N, m, V), [_] = G[+N], T = _ === "theme" ? `.${V} .${L}` : `.${V}:${_} .${L}`, k = ((oe = x.selector) == null ? void 0 : oe.call(x, T, "")) ?? T, z = Array.isArray(x.styleName) ? x.styleName : [x.styleName ?? E], pe = ((le = x.valueFormat) == null ? void 0 : le.call(x, A, y.getVariableValue)) ?? A;
-              d.push(`${k}{${z.map((I) => `${I}:${pe}`).join(";")}}`);
+              const L = l(E, A, +N, m, V), [_] = G[+N], T = _ === "theme" ? `.${V} .${L}` : `.${V}:${_} .${L}`, k = ((le = x.selector) == null ? void 0 : le.call(x, T, "")) ?? T, z = Array.isArray(x.styleName) ? x.styleName : [x.styleName ?? E], we = ((se = x.valueFormat) == null ? void 0 : se.call(x, A, y.getVariableValue)) ?? A;
+              d.push(`${k}{${z.map((I) => `${I}:${we}`).join(";")}}`);
             });
           });
         });
       }), m !== "normal" && d.push("}"), d),
-      [b]
+      [g]
     );
     v.unshift(`:root{${y.generateVariables()}}`);
-    const c = g();
+    const c = b();
     c.innerHTML = v.join(""), t = !1;
   }
   e.flush = i;
@@ -2086,57 +2092,57 @@ a,ul{all: unset;}
     r = {};
   }
   e.clear = n;
-  function u(s, b, h, v, c = "normal", d) {
-    if (b == null) return;
-    const m = v.reduce((N, D) => N + ye[D], 0);
-    r[c] ? r[c][m] ? r[c][m][s] || (r[c][m][s] = /* @__PURE__ */ new Set()) : r[c][m] = { [s]: /* @__PURE__ */ new Set() } : r[c] = { [m]: { [s]: /* @__PURE__ */ new Set() } }, d ? (r[c][m].__parents ? r[c][m].__parents[d] ? r[c][m].__parents[d][s] || (r[c][m].__parents[d][s] = /* @__PURE__ */ new Set()) : r[c][m].__parents[d] = { [s]: /* @__PURE__ */ new Set() } : r[c][m].__parents = { [d]: { [s]: /* @__PURE__ */ new Set() } }, r[c][m].__parents[d][s].has(b) || (r[c][m].__parents[d][s].add(b), t = !0)) : r[c][m][s].has(b) || (r[c][m][s].add(b), t = !0);
-    const F = l(s, b, m, c, d);
+  function u(s, g, h, v, c = "normal", d) {
+    if (g == null) return;
+    const m = v.reduce((N, U) => N + ge[U], 0);
+    r[c] ? r[c][m] ? r[c][m][s] || (r[c][m][s] = /* @__PURE__ */ new Set()) : r[c][m] = { [s]: /* @__PURE__ */ new Set() } : r[c] = { [m]: { [s]: /* @__PURE__ */ new Set() } }, d ? (r[c][m].__parents ? r[c][m].__parents[d] ? r[c][m].__parents[d][s] || (r[c][m].__parents[d][s] = /* @__PURE__ */ new Set()) : r[c][m].__parents[d] = { [s]: /* @__PURE__ */ new Set() } : r[c][m].__parents = { [d]: { [s]: /* @__PURE__ */ new Set() } }, r[c][m].__parents[d][s].has(g) || (r[c][m].__parents[d][s].add(g), t = !0)) : r[c][m][s].has(g) || (r[c][m][s].add(g), t = !0);
+    const F = l(s, g, m, c, d);
     h.push(F);
   }
-  function l(s, b, h, v, c) {
-    const d = G[h], m = `${v === "normal" ? "" : `${v}-`}${d.map((F) => `${F}-`).join("")}${c ? `${c}-` : ""}${s}-${b}`;
-    return be ? m : Ee.getIdentity(m);
+  function l(s, g, h, v, c) {
+    const d = G[h], m = `${v === "normal" ? "" : `${v}-`}${d.map((F) => `${F}-`).join("")}${c ? `${c}-` : ""}${s}-${g}`;
+    return be ? m : Oe.getIdentity(m);
   }
   const f = "crono-styles";
-  function g() {
+  function b() {
     let s = document.getElementById(f);
     return s || (s = document.createElement("style"), s.setAttribute("id", f), s.setAttribute("type", "text/css"), document.head.insertBefore(s, document.head.firstChild)), s;
   }
 })(j || (j = {}));
-var ne;
+var ue;
 ((e) => {
   e.flush = j.flush, e.clear = j.clear;
-})(ne || (ne = {}));
-const Y = we.createContext({ theme: "", setTheme: () => {
+})(ue || (ue = {}));
+const Y = xe.createContext({ theme: "", setTheme: () => {
 } });
 function Z(e) {
-  const { children: t, theme: r, use: o = "local" } = e, [i, n] = fe(r);
-  return ce(() => {
+  const { children: t, theme: r, use: o = "local" } = e, [i, n] = me(r);
+  return de(() => {
     if (o === "local") return;
     const u = document.documentElement;
     return u.classList.add(i), () => {
       u.classList.remove(i);
     };
-  }, [i]), o === "local" ? /* @__PURE__ */ p(Y.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ p(Ce, { className: i, children: t }) }) : /* @__PURE__ */ p(Y.Provider, { value: { theme: i, setTheme: n }, children: t });
+  }, [i]), o === "local" ? /* @__PURE__ */ p(Y.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ p(Ve, { className: i, children: t }) }) : /* @__PURE__ */ p(Y.Provider, { value: { theme: i, setTheme: n }, children: t });
 }
 ((e) => {
   function t() {
-    const { theme: r, setTheme: o } = xe(Y);
+    const { theme: r, setTheme: o } = Fe(Y);
     return [r, o];
   }
   e.useTheme = t;
 })(Z || (Z = {}));
-const ke = Z, Re = {
+const He = Z, Be = {
   selected: "aria-selected"
 };
 var P;
 ((e) => {
   function t(r, o, i) {
-    r !== void 0 && r != null && (i[Re[o] ?? o] = Array.isArray(r) ? r[0] : r);
+    r !== void 0 && r != null && (i[Be[o] ?? o] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
 })(P || (P = {}));
-const He = P;
+const Me = P;
 Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
   return this.filter((t) => !e(t));
 });
@@ -2183,7 +2189,30 @@ Array.prototype.groupBy || (Array.prototype.groupBy = function(e, t = !1) {
   }, /* @__PURE__ */ new Map());
   return Array.from(r, ([o, i]) => ({ key: o, values: i }));
 });
-function Me(e) {
+function Ue(e) {
+  const { node: t = null, event: r = "click", hideOnScroll: o = !1, hideOnResize: i = !1, hideOnEscape: n = !0 } = e ?? {}, [u, l] = me(!1), f = Ne(null);
+  return fe(() => {
+    function b(c) {
+      const d = t ?? f.current;
+      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
+    }
+    function s() {
+      l(!1);
+    }
+    function g(c) {
+      const d = t ?? f.current;
+      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
+    }
+    function h(c) {
+      c.key === "Escape" && l(!1);
+    }
+    const v = new AbortController();
+    return u && (window.addEventListener(r, b, v), n && window.addEventListener("keydown", h, v), i && window.addEventListener("resize", s, v), o && window.addEventListener("scroll", g, { signal: v.signal, capture: !0 })), () => {
+      v.abort();
+    };
+  }, [t, u]), [u, l, f];
+}
+function De(e) {
   let t;
   return Object.defineProperty({
     clear() {
@@ -2209,34 +2238,11 @@ var J;
   }
   e.throttle = t;
 })(J || (J = {}));
-const De = J;
-function Ue(e) {
-  const { node: t = null, event: r = "click", hideOnScroll: o = !1, hideOnResize: i = !1, hideOnEscape: n = !0 } = e ?? {}, [u, l] = fe(!1), f = Fe(null);
-  return de(() => {
-    function g(c) {
-      const d = t ?? f.current;
-      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
-    }
-    function s() {
-      l(!1);
-    }
-    function b(c) {
-      const d = t ?? f.current;
-      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
-    }
-    function h(c) {
-      c.key === "Escape" && l(!1);
-    }
-    const v = new AbortController();
-    return u && (window.addEventListener(r, g, v), n && window.addEventListener("keydown", h, v), i && window.addEventListener("resize", s, v), o && window.addEventListener("scroll", b, { signal: v.signal, capture: !0 })), () => {
-      v.abort();
-    };
-  }, [t, u]), [u, l, f];
-}
-function Ge(e) {
+const Ge = J;
+function We(e) {
   return /* @__PURE__ */ p(R, { ...e, children: /* @__PURE__ */ p("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
 }
-function We(e) {
+function Ke(e) {
   return /* @__PURE__ */ p(R, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ p(
     "path",
     {
@@ -2245,8 +2251,8 @@ function We(e) {
     }
   ) });
 }
-function Ke(e) {
-  return /* @__PURE__ */ Ne(R, { viewBox: "0 0 490.6 490.6", ...e, children: [
+function qe(e) {
+  return /* @__PURE__ */ Ce(R, { viewBox: "0 0 490.6 490.6", ...e, children: [
     /* @__PURE__ */ p("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__ */ p("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__ */ p("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" }),
@@ -2254,20 +2260,20 @@ function Ke(e) {
     /* @__PURE__ */ p("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 qe(e) {
+function Xe(e) {
   return /* @__PURE__ */ p(R, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ p("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 Xe() {
-  return ee(() => {
+function Ye() {
+  return te(() => {
     const e = "crono-box";
     let t = document.getElementById(e);
     return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
   }, []);
 }
-function Ye(e) {
+function Ze(e) {
   return /* @__PURE__ */ p(R, { viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ p("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) {
+function Pe(e) {
   return /* @__PURE__ */ p(R, { viewBox: "0 0 488.4 488.4", ...e, children: /* @__PURE__ */ p("path", { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" }) });
 }
 var Q;
@@ -2285,7 +2291,7 @@ var Q;
         const f = l[0];
         r(n, u, f.type === "checkbox" || f.type === "radio" ? f.checked : f.value);
       } else {
-        const f = l.reduce((g, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && g.push(s.value) : g.push(s.value), g), []);
+        const f = l.reduce((b, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && b.push(s.value) : b.push(s.value), b), []);
         r(n, u, f);
       }
       return n;
@@ -2296,12 +2302,12 @@ var Q;
     if (i.includes(".")) {
       const u = i.split(".");
       let l = o;
-      u.forEach((f, g) => {
-        if (u.length > g + 1) {
+      u.forEach((f, b) => {
+        if (u.length > b + 1) {
           const s = f.match(/^(.+)\[(\d)\]$/);
           if (s) {
-            const [, b, h] = s;
-            l[b] = l[b] || [], l[b][h] = l[b][h] || {}, l = l[b][h];
+            const [, g, h] = s;
+            l[g] = l[g] || [], l[g][h] = l[g][h] || {}, l = l[g][h];
           } else
             l[f] = l[f] || {}, l = l[f];
         } else
@@ -2311,26 +2317,35 @@ var Q;
       o[i] = n;
   }
 })(Q || (Q = {}));
-const Pe = Q;
+const Je = Q;
+var ee;
+((e) => {
+  function t(r) {
+    return r.charAt(0).toUpperCase() + r.slice(1);
+  }
+  e.capitalize = t;
+})(ee || (ee = {}));
+const Qe = ee;
 export {
-  Ge as A,
-  Ae as B,
-  Ye as C,
-  We as D,
-  De as F,
-  Ke as G,
+  We as A,
+  Se as B,
+  Ze as C,
+  Ke as D,
+  Ge as F,
+  qe as G,
   C as O,
-  qe as P,
-  Ze as S,
-  ke as T,
+  Xe as P,
+  Pe as S,
+  He as T,
   y as V,
-  He as a,
+  Me as a,
   Ue as b,
-  me as c,
+  ve as c,
   W as d,
-  Pe as e,
-  Xe as f,
-  ne as g,
-  Me as m,
-  _e as u
+  Je as e,
+  Qe as f,
+  Ye as g,
+  ue as h,
+  De as m,
+  ke as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "type": "module",
   "main": "./box.cjs",
   "module": "./box.mjs",
@@ -57,6 +57,7 @@
   "devDependencies": {
     "@rollup/pluginutils": "^5.1.0",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.5.5",
     "@types/postcss-mixins": "^9.0.5",

package/ssg.mjs

@@ -1,4 +1,4 @@
-import { g as o } from "./core.mjs";
+import { h as o } from "./core.mjs";
 import a from "react-dom/server";
 const t = {
   innerHTML: ""

package/utils/string/stringUtils.d.ts

@@ -0,0 +1,4 @@
+declare namespace StringUtils {
+    function capitalize(str: string): string;
+}
+export default StringUtils;