@cronocode/react-box 3.0.15 → 3.0.16

package/core.mjs

@@ -1,7 +1,7 @@
 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 x, jsxs as Ne } from "react/jsx-runtime";
+import { jsx as p, jsxs as Ne } from "react/jsx-runtime";
 import Ce from "./box.mjs";
-import M from "./components/baseSvg.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]) => {
     i && t.push(o);
@@ -20,8 +20,8 @@ var a;
     }
     t.svg = o;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
-    function r(v, c, f = W) {
-      return `${v / f}rem`;
+    function r(v, c, d = W) {
+      return `${v / d}rem`;
     }
     t.rem = r;
     function o(v) {
@@ -29,8 +29,8 @@ var a;
     }
     t.px = o;
     function i(v) {
-      const [c, f] = v.split("/");
-      return `${+c / +f * 100}%`;
+      const [c, d] = v.split("/");
+      return `${+c / +d * 100}%`;
     }
     t.fraction = i;
     function n(v, c) {
@@ -45,33 +45,33 @@ var a;
     }
     t.widthHeight = n;
     function u(v) {
-      return (c, f) => `var(--${v}${f});`;
+      return (c, d) => `var(--${v}${d});`;
     }
     t.variables = u;
     function l(v) {
-      return (c, f) => `var(--${v}${f});`;
+      return (c, d) => `var(--${v}${d});`;
     }
     t.svgVariables = l;
-    function d(v, c) {
+    function f(v, c) {
       return `repeat(${c},minmax(0,1fr))`;
     }
-    t.gridColumns = d;
-    function b(v, c) {
+    t.gridColumns = f;
+    function g(v, c) {
       return c === "full-row" ? "1/-1" : `span ${c}/span ${c}`;
     }
-    t.gridColumn = b;
+    t.gridColumn = g;
     function s(v, c) {
       return `${c}ms`;
     }
     t.ms = s;
-    function h(v, c) {
+    function b(v, c) {
       return `${c}deg`;
     }
-    t.rotate = h;
-    function g(v, c) {
+    t.rotate = b;
+    function h(v, c) {
       return c === "xAxis" ? "-1 1" : "1 -1";
     }
-    t.flip = g;
+    t.flip = h;
   })(e.Value || (e.Value = {}));
 })(a || (a = {}));
 var K;
@@ -372,7 +372,7 @@ var K;
   }
   e.getVariableValue = i;
   function n() {
-    return Object.entries(r).map(([l, d]) => `--${l}: ${d};`).join("");
+    return Object.entries(r).map(([l, f]) => `--${l}: ${f};`).join("");
   }
   e.generateVariables = n;
   function u(l) {
@@ -1473,7 +1473,7 @@ const y = K, E = {
   hasChecked: ":has(:checked)",
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])"
-}, H = {
+}, M = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
@@ -1481,7 +1481,7 @@ const y = K, E = {
   selected: '[aria-selected="true"]'
 }, Ve = {
   theme: ""
-}, te = { ...ve, ...H, ...Ve }, ye = Object.entries(te).reduce(
+}, te = { ...ve, ...M, ...Ve }, ye = Object.entries(te).reduce(
   (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
 ), G = Object.entries(te).reduce(
@@ -1498,7 +1498,7 @@ const y = K, E = {
   activeGroup: "active",
   disabledGroup: "disabled",
   theme: "theme"
-}, k = {
+}, H = {
   /** Styles applied for small screens and larger. >= 640 */
   sm: 640,
   /** Styles applied for medium screens and larger. >= 768 */
@@ -1513,12 +1513,12 @@ const y = K, E = {
 var q;
 ((e) => {
   function t(n, u, l) {
-    const d = { ...n }, b = d.props || {};
+    const f = { ...n }, g = f.props || {};
     return u.forEach((s) => {
-      s in d && (b[s] = d[s], delete d[s]);
-    }), l && Object.entries(l).forEach(([s, h]) => {
-      b[s] = h;
-    }), d.props = b, d;
+      s in f && (g[s] = f[s], delete f[s]);
+    }), l && Object.entries(l).forEach(([s, b]) => {
+      g[s] = b;
+    }), f.props = g, f;
   }
   e.buildProps = t;
   function r(n) {
@@ -1526,9 +1526,9 @@ var q;
   }
   e.isObject = r;
   function o(...n) {
-    return n.reduce((u, l) => (Object.keys(l ?? {}).forEach((d) => {
-      const b = u[d], s = l[d];
-      r(s) && "clean" in s && s.clean ? u[d] = s : d in H && typeof s == "boolean" || (d in H && Array.isArray(s) ? u[d] = o(b, s[1] ?? {}) : Array.isArray(b) && Array.isArray(s) ? u[d] = b.concat(...s) : r(b) && r(s) ? u[d] = o(b, s) : u[d] = s);
+    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);
     }), u), {});
   }
   e.mergeDeep = o;
@@ -1579,10 +1579,6 @@ const ze = {
         color: "gray-400",
         borderColor: "gray-300"
       }
-    },
-    variants: {
-      test: {},
-      test2: {}
     }
   },
   textbox: {
@@ -1855,6 +1851,42 @@ const ze = {
       borderRadius: 1
     },
     children: {
+      columnGroups: {
+        styles: {
+          p: 3,
+          bb: 1,
+          borderColor: "gray-400",
+          color: "gray-400",
+          gap: 2,
+          ai: "center",
+          height: 12
+        },
+        children: {
+          item: {
+            styles: {
+              gap: 2,
+              ai: "center",
+              b: 1,
+              borderColor: "gray-400",
+              bgColor: "gray-100",
+              borderRadius: 1,
+              py: 1,
+              pl: 2,
+              pr: 1,
+              color: "violet-950"
+            },
+            children: {
+              icon: {
+                styles: {
+                  width: 3,
+                  color: "gray-400",
+                  cursor: "pointer"
+                }
+              }
+            }
+          }
+        }
+      },
       header: {
         styles: {
           position: "sticky",
@@ -1921,8 +1953,8 @@ var X;
     return y.setUserVariables(o), Object.entries(i).forEach(([u, l]) => {
       E[u] = l;
     }), Object.entries(n).forEach(([u, l]) => {
-      const d = E[u];
-      E[u] = d ? [...l, ...d] : l;
+      const f = E[u];
+      E[u] = f ? [...l, ...f] : l;
     }), { extendedProps: i, extendedPropTypes: n };
   }
   e.extend = t, e.componentsStyles = ie;
@@ -1938,49 +1970,49 @@ function Ee(e) {
     if (t) return;
     const i = r == null ? void 0 : r.split(".");
     if (!i) return;
-    const n = i.reduce((d, b, s) => {
-      var h;
-      return s === 0 ? Ae.componentsStyles[b] : (h = d == null ? void 0 : d.children) == null ? void 0 : h[b];
+    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];
     }, void 0);
     if (!n) return;
     if (!o) return n.styles;
     const u = me(o);
     if (u.length === 0) return n.styles;
-    const l = C.mergeDeep(...u.map((d) => {
-      var b;
-      return (b = n.variants) == null ? void 0 : b[d];
+    const l = C.mergeDeep(...u.map((f) => {
+      var g;
+      return (g = n.variants) == null ? void 0 : g[f];
     }));
     return C.mergeDeep(n.styles, l);
   }, [t, r, o]);
 }
-const Oe = new $e(), je = typeof window < "u" && typeof window.document < "u";
+const Oe = new $e(), Se = typeof window < "u" && typeof window.document < "u";
 var ue;
-const he = typeof process == "object" && ((ue = process.env) == null ? void 0 : ue.NODE_ENV) === "test", Re = je && !he ? ce : de, be = "_b", j = "_s";
-function Le(e, t) {
-  Re(R.flush, [e]);
+const be = typeof process == "object" && ((ue = process.env) == null ? void 0 : ue.NODE_ENV) === "test", je = Se && !be ? ce : de, ge = "_b", S = "_s";
+function _e(e, t) {
+  je(j.flush, [e]);
   const r = Ee(e);
   return ee(() => {
-    const o = [t ? j : be], i = r ? C.mergeDeep(r, e) : e;
-    return R.addClassNames(i, o, []), o;
+    const o = [t ? S : ge], i = r ? C.mergeDeep(r, e) : e;
+    return j.addClassNames(i, o, []), o;
   }, [e, t, r]);
 }
-var R;
+var j;
 ((e) => {
   let t = !0, r = {};
-  function o(s, h, g, v, c) {
-    Object.entries(s).forEach(([f, m]) => {
-      if (C.isKeyOf(f, E))
-        u(f, m, h, g, v, c);
-      else if (C.isKeyOf(f, ve))
-        o(m, h, [...g, f], v, c);
-      else if (C.isKeyOf(f, H)) {
+  function o(s, b, h, v, c) {
+    Object.entries(s).forEach(([d, m]) => {
+      if (C.isKeyOf(d, E))
+        u(d, m, b, h, v, c);
+      else if (C.isKeyOf(d, ve))
+        o(m, b, [...h, d], v, c);
+      else if (C.isKeyOf(d, M)) {
         if (Array.isArray(m)) {
           const [F, N] = m;
-          o(N, h, [...g, f], v, c);
+          o(N, b, [...h, d], v, c);
         }
-        C.isObject(m) && o(m, h, [...g, f], v, c);
-      } else C.isKeyOf(f, k) ? o(m, h, g, f, c) : C.isKeyOf(f, se) && Object.entries(m).forEach(([F, N]) => {
-        o(N, h, [...g, se[f]], v, F);
+        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);
       });
     });
   }
@@ -1988,44 +2020,44 @@ var R;
   function i() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const s = Object.entries(E).reduce((f, [m], F) => (f[m] = F, f), {}), h = `: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(E).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;}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${be}{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;}
-.${j}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${j} path,.${j} circle,.${j} rect,.${j} line {transition: all var(--svgTransitionTime);}
-`, g = Object.entries(r);
-    g.sort(
-      ([f], [m]) => (k[f] ?? 0) - (k[m] ?? 0)
+.${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;}
+.${S}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${S} path,.${S} circle,.${S} rect,.${S} line {transition: all var(--svgTransitionTime);}
+`, h = Object.entries(r);
+    h.sort(
+      ([d], [m]) => (H[d] ?? 0) - (H[m] ?? 0)
     );
-    const v = g.reduce(
-      (f, [m, F]) => (m !== "normal" && f.push(`@media(min-width: ${k[m]}px){`), Object.entries(F).forEach(([N, D]) => {
-        const { __parents: re, ...ge } = D, ae = Object.entries(ge);
-        ae.sort(([V], [S]) => s[V] - s[S]), ae.forEach(([V, S]) => {
-          S.forEach((z) => {
-            var B, L;
-            const p = E[V].find(($) => Array.isArray($.values) ? $.values.includes(z) : typeof z == typeof $.values);
-            if (!p) return;
-            const A = l(V, z, +N, m), U = G[+N].map(($) => te[$]).join(""), w = ((B = p.selector) == null ? void 0 : B.call(p, `.${A}`, U)) ?? `.${A}${U}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? V], _ = ((L = p.valueFormat) == null ? void 0 : L.call(p, z, y.getVariableValue)) ?? z;
-            f.push(`${w}{${I.map(($) => `${$}:${_}`).join(";")}}`);
+    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]) => {
+          B.forEach((z) => {
+            var T, k;
+            const w = E[V].find(($) => Array.isArray($.values) ? $.values.includes(z) : typeof z == typeof $.values);
+            if (!w) return;
+            const A = l(V, z, +N, m), U = G[+N].map(($) => te[$]).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, z, y.getVariableValue)) ?? z;
+            d.push(`${x}{${L.map(($) => `${$}:${_}`).join(";")}}`);
           });
-        }), re && Object.entries(re).forEach(([V, S]) => {
-          const z = Object.entries(S);
-          z.sort(([O], [p]) => s[O] - s[p]), z.forEach(([O, p]) => {
-            p.forEach((A) => {
+        }), re && Object.entries(re).forEach(([V, B]) => {
+          const z = Object.entries(B);
+          z.sort(([O], [w]) => s[O] - s[w]), z.forEach(([O, w]) => {
+            w.forEach((A) => {
               var oe, le;
-              const w = E[O].find((T) => Array.isArray(T.values) ? T.values.includes(A) : typeof A == typeof T.values);
-              if (!w) return;
-              const I = l(O, A, +N, m, V), [_] = G[+N], B = _ === "theme" ? `.${V} .${I}` : `.${V}:${_} .${I}`, L = ((oe = w.selector) == null ? void 0 : oe.call(w, B, "")) ?? B, $ = Array.isArray(w.styleName) ? w.styleName : [w.styleName ?? O], pe = ((le = w.valueFormat) == null ? void 0 : le.call(w, A, y.getVariableValue)) ?? A;
-              f.push(`${L}{${$.map((T) => `${T}:${pe}`).join(";")}}`);
+              const x = E[O].find((I) => Array.isArray(I.values) ? I.values.includes(A) : typeof A == typeof I.values);
+              if (!x) return;
+              const L = l(O, A, +N, m, V), [_] = G[+N], T = _ === "theme" ? `.${V} .${L}` : `.${V}:${_} .${L}`, k = ((oe = x.selector) == null ? void 0 : oe.call(x, T, "")) ?? T, $ = Array.isArray(x.styleName) ? x.styleName : [x.styleName ?? O], pe = ((le = x.valueFormat) == null ? void 0 : le.call(x, A, y.getVariableValue)) ?? A;
+              d.push(`${k}{${$.map((I) => `${I}:${pe}`).join(";")}}`);
             });
           });
         });
-      }), m !== "normal" && f.push("}"), f),
-      [h]
+      }), m !== "normal" && d.push("}"), d),
+      [b]
     );
     v.unshift(`:root{${y.generateVariables()}}`);
-    const c = b();
+    const c = g();
     c.innerHTML = v.join(""), t = !1;
   }
   e.flush = i;
@@ -2033,26 +2065,26 @@ a,ul{all: unset;}
     r = {};
   }
   e.clear = n;
-  function u(s, h, g, v, c = "normal", f) {
-    if (h == null) return;
+  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() } }, f ? (r[c][m].__parents ? r[c][m].__parents[f] ? r[c][m].__parents[f][s] || (r[c][m].__parents[f][s] = /* @__PURE__ */ new Set()) : r[c][m].__parents[f] = { [s]: /* @__PURE__ */ new Set() } : r[c][m].__parents = { [f]: { [s]: /* @__PURE__ */ new Set() } }, r[c][m].__parents[f][s].has(h) || (r[c][m].__parents[f][s].add(h), t = !0)) : r[c][m][s].has(h) || (r[c][m][s].add(h), t = !0);
-    const F = l(s, h, m, c, f);
-    g.push(F);
+    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);
+    h.push(F);
   }
-  function l(s, h, g, v, c) {
-    const f = G[g], m = `${v === "normal" ? "" : `${v}-`}${f.map((F) => `${F}-`).join("")}${c ? `${c}-` : ""}${s}-${h}`;
-    return he ? m : Oe.getIdentity(m);
+  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 : Oe.getIdentity(m);
   }
-  const d = "crono-styles";
-  function b() {
-    let s = document.getElementById(d);
-    return s || (s = document.createElement("style"), s.setAttribute("id", d), s.setAttribute("type", "text/css"), document.head.insertBefore(s, document.head.firstChild)), s;
+  const f = "crono-styles";
+  function g() {
+    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;
   }
-})(R || (R = {}));
+})(j || (j = {}));
 var ne;
 ((e) => {
-  e.flush = R.flush, e.clear = R.clear;
+  e.flush = j.flush, e.clear = j.clear;
 })(ne || (ne = {}));
 const Y = we.createContext({ theme: "", setTheme: () => {
 } });
@@ -2064,7 +2096,7 @@ function Z(e) {
     return u.classList.add(i), () => {
       u.classList.remove(i);
     };
-  }, [i]), o === "local" ? /* @__PURE__ */ x(Y.Provider, { value: { theme: i, setTheme: n }, children: /* @__PURE__ */ x(Ce, { className: i, children: t }) }) : /* @__PURE__ */ x(Y.Provider, { value: { theme: i, setTheme: n }, children: t });
+  }, [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 });
 }
 ((e) => {
   function t() {
@@ -2073,13 +2105,13 @@ function Z(e) {
   }
   e.useTheme = t;
 })(Z || (Z = {}));
-const ke = Z, Se = {
+const ke = Z, Re = {
   selected: "aria-selected"
 };
 var P;
 ((e) => {
   function t(r, o, i) {
-    r !== void 0 && r != null && (i[Se[o] ?? o] = Array.isArray(r) ? r[0] : r);
+    r !== void 0 && r != null && (i[Re[o] ?? o] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
 })(P || (P = {}));
@@ -2158,39 +2190,33 @@ var J;
 })(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), d = Fe(null);
+  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 b(c) {
-      const f = t ?? d.current;
-      (f == null ? void 0 : f.contains(c.target)) === !1 && l(!1);
+    function g(c) {
+      const d = t ?? f.current;
+      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
     }
     function s() {
       l(!1);
     }
-    function h() {
-      l(!1);
+    function b(c) {
+      const d = t ?? f.current;
+      (d == null ? void 0 : d.contains(c.target)) === !1 && l(!1);
     }
-    function g(c) {
+    function h(c) {
       c.key === "Escape" && l(!1);
     }
     const v = new AbortController();
-    return u && (window.addEventListener(r, b, v), n && window.addEventListener("keydown", g, v), i && window.addEventListener("resize", s, v), o && window.addEventListener("scroll", h, v)), () => {
+    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, d];
+  }, [t, u]), [u, l, f];
 }
-function Ge() {
-  return ee(() => {
-    const e = "crono-box";
-    let t = document.getElementById(e);
-    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
-  }, []);
+function Ge(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) {
-  return /* @__PURE__ */ x(M, { ...e, children: /* @__PURE__ */ x("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }) });
-}
-function Ke(e) {
-  return /* @__PURE__ */ x(M, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ x(
+  return /* @__PURE__ */ p(R, { viewBox: "0 0 16 16", width: "18", ...e, children: /* @__PURE__ */ p(
     "path",
     {
       strokeWidth: 4,
@@ -2198,26 +2224,30 @@ function Ke(e) {
     }
   ) });
 }
+function Ke(e) {
+  return /* @__PURE__ */ Ne(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" }),
+    /* @__PURE__ */ p("path", { d: "M61.034 340.143a175.333 175.333 0 0 1-45.989-29.004c.582-21.112 6.875-41.53 18.291-59.243a115.795 115.795 0 0 1 43.01-39.566c16.239 14.662 34.856 22.376 54.139 22.376 11.587 0 22.969-2.785 33.829-8.277a7.501 7.501 0 0 0-6.77-13.386c-8.742 4.421-17.846 6.663-27.059 6.663-16.811 0-33.238-7.522-47.504-21.754a7.501 7.501 0 0 0-8.521-1.462c-21.954 10.451-40.534 26.8-53.733 47.28C7.167 264.811 0 289.221 0 314.362v.103c0 2.116.894 4.134 2.461 5.556 15.629 14.174 33.338 25.579 52.634 33.897a7.481 7.481 0 0 0 2.966.615 7.503 7.503 0 0 0 2.973-14.39zM69.854 351.003c-2.671 6.443 4.532 12.832 10.617 9.387 3.238-1.834 4.683-5.937 3.227-9.385-2.407-6.145-11.378-5.952-13.844-.002z" }),
+    /* @__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) {
-  return /* @__PURE__ */ x(M, { viewBox: "0 0 1024 1024", ...e, children: /* @__PURE__ */ x("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" }) });
+  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(e) {
-  return /* @__PURE__ */ Ne(M, { viewBox: "0 0 490.6 490.6", ...e, children: [
-    /* @__PURE__ */ x(
-      "path",
-      {
-        d: "M326.8 187.25c14.8 0 26.8-12 26.8-26.8v-117c0-14.8-12-26.8-26.8-26.8h-163c-14.8 0-26.8 12-26.8 26.8v117c0 14.8 12 26.8 26.8 26.8h71.6v22.4h-22.9c-5.5 0-9.9 4.4-9.9 9.9s4.4 9.9 9.9 9.9h65.6c5.5 0 9.9-4.4 9.9-9.9s-4.4-9.9-9.9-9.9h-22.9v-22.4h71.6zm-163-19.8c-3.9 0-7-3.1-7-7v-117c0-3.9 3.1-7 7-7h162.9c3.9 0 7 3.1 7 7v117c0 3.9-3.1 7-7 7H163.8zM189.8 261.15h-163c-14.8 0-26.8 12-26.8 26.8v117c0 14.8 12 26.8 26.8 26.8h71.6v22.4H75.5c-5.5 0-9.9 4.4-9.9 9.9s4.4 9.9 9.9 9.9h65.6c5.5 0 9.9-4.4 9.9-9.9s-4.4-9.9-9.9-9.9h-22.9v-22.4h71.6c14.8 0 26.8-12 26.8-26.8v-117c0-14.7-12.1-26.8-26.8-26.8zm7 143.9c0 3.9-3.1 7-7 7h-163c-3.9 0-7-3.1-7-7v-117c0-3.9 3.1-7 7-7h162.9c3.9 0 7 3.1 7 7v117h.1zM463.8 261.15h-163c-14.8 0-26.8 12-26.8 26.8v117c0 14.8 12 26.8 26.8 26.8h71.6v22.4h-22.9c-5.5 0-9.9 4.4-9.9 9.9s4.4 9.9 9.9 9.9h65.6c5.5 0 9.9-4.4 9.9-9.9s-4.4-9.9-9.9-9.9h-22.9v-22.4h71.6c14.8 0 26.8-12 26.8-26.8v-117c0-14.7-12.1-26.8-26.8-26.8zm7 143.9c0 3.9-3.1 7-7 7h-163c-3.9 0-7-3.1-7-7v-117c0-3.9 3.1-7 7-7h162.9c3.9 0 7 3.1 7 7v117h.1z",
-        fill: "#2c2f33"
-      }
-    ),
-    /* @__PURE__ */ x(
-      "path",
-      {
-        d: "M27.7 86.25v133.3c0 5.5 4.4 9.9 9.9 9.9s9.9-4.4 9.9-9.9V96.15h53.4c5.5 0 9.9-4.4 9.9-9.9s-4.4-9.9-9.9-9.9H37.6c-5.4 0-9.9 4.5-9.9 9.9zM453 229.55c5.5 0 9.9-4.4 9.9-9.9V86.25c0-5.5-4.4-9.9-9.9-9.9h-63.3c-5.5 0-9.9 4.4-9.9 9.9s4.4 9.9 9.9 9.9h53.4v123.4c0 5.5 4.4 10 9.9 10z",
-        fill: "#3c92ca"
-      }
-    )
-  ] });
+function Xe() {
+  return ee(() => {
+    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) {
+  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) {
+  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;
 ((e) => {
@@ -2231,11 +2261,11 @@ var Q;
     );
     return Object.entries(i).reduce((n, [u, l]) => {
       if (l.length === 1) {
-        const d = l[0];
-        r(n, u, d.type === "checkbox" || d.type === "radio" ? d.checked : d.value);
+        const f = l[0];
+        r(n, u, f.type === "checkbox" || f.type === "radio" ? f.checked : f.value);
       } else {
-        const d = l.reduce((b, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && b.push(s.value) : b.push(s.value), b), []);
-        r(n, u, d);
+        const f = l.reduce((g, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && g.push(s.value) : g.push(s.value), g), []);
+        r(n, u, f);
       }
       return n;
     }, {});
@@ -2245,39 +2275,41 @@ var Q;
     if (i.includes(".")) {
       const u = i.split(".");
       let l = o;
-      u.forEach((d, b) => {
-        if (u.length > b + 1) {
-          const s = d.match(/^(.+)\[(\d)\]$/);
+      u.forEach((f, g) => {
+        if (u.length > g + 1) {
+          const s = f.match(/^(.+)\[(\d)\]$/);
           if (s) {
-            const [, h, g] = s;
-            l[h] = l[h] || [], l[h][g] = l[h][g] || {}, l = l[h][g];
+            const [, b, h] = s;
+            l[b] = l[b] || [], l[b][h] = l[b][h] || {}, l = l[b][h];
           } else
-            l[d] = l[d] || {}, l = l[d];
+            l[f] = l[f] || {}, l = l[f];
         } else
-          l[d] = n;
+          l[f] = n;
       });
     } else
       o[i] = n;
   }
 })(Q || (Q = {}));
-const Ye = Q;
+const Pe = Q;
 export {
-  We as A,
+  Ge as A,
   Ae as B,
-  Ke as D,
+  Ye as C,
+  We as D,
   De as F,
-  Xe as G,
+  Ke as G,
   C as O,
   qe as P,
-  ne as S,
+  Ze as S,
   ke as T,
   y as V,
   He as a,
   Ue as b,
   me as c,
   W as d,
-  Ye as e,
-  Ge as f,
+  Pe as e,
+  Xe as f,
+  ne as g,
   Me as m,
-  Le as u
+  _e as u
 };

package/icons/searchIcon.d.ts

@@ -0,0 +1,2 @@
+import { BaseSvgProps } from '../components/baseSvg';
+export default function SearchIcon(props: BaseSvgProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "type": "module",
   "main": "./box.cjs",
   "module": "./box.mjs",

package/ssg.mjs

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