@cronocode/react-box 3.0.5 → 3.0.7

package/core.mjs

@@ -1,18 +1,18 @@
 import { useMemo as Q, useLayoutEffect as ce, useEffect as le, useState as fe, useRef as me } from "react";
 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(([l, d]) => {
-    d && t.push(l);
+  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(([l, u]) => {
+    u && t.push(l);
   }), t) : t, []);
 }
 var n;
 ((e) => {
   ((t) => {
-    function r(d, s) {
-      return `${d}${s.replace("/", "-")}`;
+    function r(u, s) {
+      return `${u}${s.replace("/", "-")}`;
     }
     t.fraction = r;
-    function l(d) {
-      return [`${d} path`, `${d} circle`, `${d} rect`, `${d} line`];
+    function l(u) {
+      return [`${u} path`, `${u} circle`, `${u} rect`, `${u} line`];
     }
     t.svg = l;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
@@ -24,11 +24,11 @@ var n;
       return `${b}px`;
     }
     t.px = l;
-    function d(b, i) {
+    function u(b, i) {
       const [m, c] = i.split("/");
       return `${+m / +c * 100}%`;
     }
-    t.fraction = d;
+    t.fraction = u;
     function s(b, i) {
       switch (i) {
         case "fit":
@@ -40,26 +40,26 @@ var n;
       }
     }
     t.widthHeight = s;
-    function f(b) {
+    function d(b) {
       return (i, m) => `var(--${b}${m});`;
     }
-    t.variables = f;
-    function a(b) {
+    t.variables = d;
+    function o(b) {
       return (i, m) => `var(--${b}${m});`;
     }
-    t.svgVariables = a;
-    function u(b, i) {
+    t.svgVariables = o;
+    function f(b, i) {
       return `repeat(${i},minmax(0,1fr))`;
     }
-    t.gridColumns = u;
+    t.gridColumns = f;
     function y(b, i) {
       return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
     t.gridColumn = y;
-    function o(b, i) {
+    function a(b, i) {
       return `${i}ms`;
     }
-    t.ms = o;
+    t.ms = a;
     function v(b, i) {
       return `${i}deg`;
     }
@@ -269,7 +269,6 @@ var W;
     "indigo-900": "#312e81",
     "indigo-950": "#1e1b4b",
     "violet-50": "#f5f3ff",
-    "violet-XX": "#9747FF",
     "violet-100": "#ede9fe",
     "violet-200": "#ddd6fe",
     "violet-300": "#c4b5fd",
@@ -334,20 +333,20 @@ var W;
     "bg-img-radio": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><circle fill='#FFF' cx='10' cy='10' r='5'/></svg>")}")`
   }, r = {};
   let l = {};
-  function d(a) {
-    return a in l ? r[a] = l[a] : a in t ? r[a] = t[a] : a in e.colors ? r[a] = e.colors[a] : r[a] = a, `var(--${a})`;
+  function u(o) {
+    return o in l ? r[o] = l[o] : o in t ? r[o] = t[o] : o in e.colors ? r[o] = e.colors[o] : r[o] = o, `var(--${o})`;
   }
-  e.getVariableValue = d;
+  e.getVariableValue = u;
   function s() {
-    return Object.entries(r).map(([a, u]) => `--${a}: ${u};`).join("");
+    return Object.entries(r).map(([o, f]) => `--${o}: ${f};`).join("");
   }
   e.generateVariables = s;
-  function f(a) {
-    l = a;
+  function d(o) {
+    l = o;
   }
-  e.setUserVariables = f;
+  e.setUserVariables = d;
 })(W || (W = {}));
-const z = W, E = {
+const N = W, E = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -1470,31 +1469,43 @@ const z = W, E = {
   ],
   color: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e)
     }
   ],
   bgColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "background-color"
     }
   ],
   borderColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "border-color"
     }
   ],
   outlineColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "outline-color"
     }
   ],
+  fill: [
+    {
+      values: Object.keys(N.colors),
+      valueFormat: (e, t) => t(e)
+    }
+  ],
+  stroke: [
+    {
+      values: Object.keys(N.colors),
+      valueFormat: (e, t) => t(e)
+    }
+  ],
   bgImage: [
     {
       values: ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"],
@@ -1515,19 +1526,20 @@ const z = W, E = {
   hasChecked: ":has(:checked)",
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])"
-}, L = {
+}, U = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
-  disabled: "[disabled]"
-}, Z = { ...se, ...L }, ie = Object.entries(Z).reduce(
+  disabled: "[disabled]",
+  selected: '[aria-selected="true"]'
+}, Z = { ...se, ...U }, ie = Object.entries(Z).reduce(
   (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
 ), D = Object.entries(Z).reduce(
   (e, [t]) => {
     const r = ie[t];
-    return Object.entries(e).forEach(([l, d]) => {
-      e[+l + r] = [...d, t];
+    return Object.entries(e).forEach(([l, u]) => {
+      e[+l + r] = [...u, t];
     }), e;
   },
   { 0: [] }
@@ -1545,13 +1557,13 @@ const z = W, E = {
 };
 var q;
 ((e) => {
-  function t(s, f, a) {
-    const u = { ...s }, y = u.props || {};
-    return f.forEach((o) => {
-      o in u && (y[o] = u[o], delete u[o]);
-    }), a && Object.entries(a).forEach(([o, v]) => {
-      y[o] = v;
-    }), u.props = y, u;
+  function t(s, d, o) {
+    const f = { ...s }, y = f.props || {};
+    return d.forEach((a) => {
+      a in f && (y[a] = f[a], delete f[a]);
+    }), o && Object.entries(o).forEach(([a, v]) => {
+      y[a] = v;
+    }), f.props = y, f;
   }
   e.buildProps = t;
   function r(s) {
@@ -1559,18 +1571,18 @@ var q;
   }
   e.isObject = r;
   function l(...s) {
-    return s.reduce((f, a) => (Object.keys(a ?? {}).forEach((u) => {
-      const y = f[u], o = a[u];
-      u in L && typeof o == "boolean" || (u in L && Array.isArray(o) ? f[u] = l(y, o[1] ?? {}) : Array.isArray(y) && Array.isArray(o) ? f[u] = y.concat(...o) : r(y) && r(o) ? f[u] = l(y, o) : f[u] = o);
-    }), f), {});
+    return s.reduce((d, o) => (Object.keys(o ?? {}).forEach((f) => {
+      const y = d[f], a = o[f];
+      f in U && typeof a == "boolean" || (f in U && Array.isArray(a) ? d[f] = l(y, a[1] ?? {}) : Array.isArray(y) && Array.isArray(a) ? d[f] = y.concat(...a) : r(y) && r(a) ? d[f] = l(y, a) : d[f] = a);
+    }), d), {});
   }
   e.mergeDeep = l;
-  function d(s, f) {
-    return s in f;
+  function u(s, d) {
+    return s in d;
   }
-  e.isKeyOf = d;
+  e.isKeyOf = u;
 })(q || (q = {}));
-const $ = q;
+const C = q;
 class be {
   constructor() {
     this._index = 0, this._cache = {};
@@ -1579,150 +1591,150 @@ class be {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: r, next: l } = ye, d = t - r.length;
-    if (d < 0)
+    const { first: r, next: l } = ye, u = t - r.length;
+    if (u < 0)
       return r[t];
-    const s = Math.floor(d / l.length), f = d - s * l.length;
-    return this.getByIndex(s) + l[f];
+    const s = Math.floor(u / l.length), d = u - s * l.length;
+    return this.getByIndex(s) + l[d];
   }
 }
 const ye = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var R;
+var I;
 ((e) => {
   e.components = {};
-})(R || (R = {}));
+})(I || (I = {}));
 function ge(e) {
   const { clean: t, theme: r, component: l } = e;
   return Q(() => {
-    var f;
+    var d;
     if (t) return;
-    const d = l == null ? void 0 : l.split(".");
-    if (!d) return;
-    const s = d.reduce((a, u, y) => {
-      var o, v;
-      return y === 0 ? (o = R.components) == null ? void 0 : o[u] : (v = a == null ? void 0 : a.children) == null ? void 0 : v[u];
+    const u = l == null ? void 0 : l.split(".");
+    if (!u) return;
+    const s = u.reduce((o, f, y) => {
+      var a, v;
+      return y === 0 ? (a = I.components) == null ? void 0 : a[f] : (v = o == null ? void 0 : o.children) == null ? void 0 : v[f];
     }, void 0);
     if (s)
-      return r ? $.mergeDeep(s.styles, ((f = s.themes) == null ? void 0 : f[r]) ?? {}) : s.styles;
+      return r ? C.mergeDeep(s.styles, ((d = s.themes) == null ? void 0 : d[r]) ?? {}) : s.styles;
   }, [l, t, r]);
 }
 const he = new be(), pe = typeof window < "u" && typeof window.document < "u";
-var oe;
-const ne = typeof process == "object" && ((oe = process.env) == null ? void 0 : oe.NODE_ENV) === "test", we = pe && !ne ? ce : le, ue = "_b", S = "_s";
-function Ne(e, t) {
-  we(A.flush, [e]);
+var ae;
+const ne = typeof process == "object" && ((ae = process.env) == null ? void 0 : ae.NODE_ENV) === "test", we = pe && !ne ? ce : le, ue = "_b", A = "_s";
+function Fe(e, t) {
+  we(S.flush, [e]);
   const r = ge(e);
   return Q(() => {
-    const l = [t ? S : ue], d = r ? $.mergeDeep(r, e) : e;
-    return A.addClassNames(d, l, []), l;
+    const l = [t ? A : ue], u = r ? C.mergeDeep(r, e) : e;
+    return S.addClassNames(u, l, []), l;
   }, [e, t, r]);
 }
-var A;
+var S;
 ((e) => {
   let t = !0, r = {};
-  function l(o, v, g, b, i) {
-    Object.entries(o).forEach(([m, c]) => {
-      if ($.isKeyOf(m, E))
-        f(m, c, v, g, b, i);
-      else if ($.isKeyOf(m, se))
+  function l(a, v, g, b, i) {
+    Object.entries(a).forEach(([m, c]) => {
+      if (C.isKeyOf(m, E))
+        d(m, c, v, g, b, i);
+      else if (C.isKeyOf(m, se))
         l(c, v, [...g, m], b, i);
-      else if ($.isKeyOf(m, L)) {
+      else if (C.isKeyOf(m, U)) {
         if (Array.isArray(c)) {
           const [w, x] = c;
           l(x, v, [...g, m], b, i);
         }
-        $.isObject(c) && l(c, v, [...g, m], b, i);
-      } else $.isKeyOf(m, H) ? l(c, v, g, m, i) : $.isKeyOf(m, K) && (typeof c == "string" ? v.push(`${K[m]}-${c}`) : Object.entries(c).forEach(([w, x]) => {
+        C.isObject(c) && l(c, v, [...g, m], b, i);
+      } else C.isKeyOf(m, H) ? l(c, v, g, m, i) : C.isKeyOf(m, K) && (typeof c == "string" ? v.push(`${K[m]}-${c}`) : Object.entries(c).forEach(([w, x]) => {
         l(x, v, [...g, K[m]], b, w);
       }));
     });
   }
   e.addClassNames = l;
-  function d() {
+  function u() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const o = Object.entries(E).reduce((m, [c], w) => (m[c] = w, m), {}), v = `: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;}
+    const a = Object.entries(E).reduce((m, [c], w) => (m[c] = w, m), {}), v = `: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;}
 .${ue}{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);}
+.${A}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${A} path,.${A} circle,.${A} rect,.${A} line {transition: all var(--svgTransitionTime);}
 `, g = Object.entries(r);
     g.sort(
       ([m], [c]) => (H[m] ?? 0) - (H[c] ?? 0)
     );
     const b = g.reduce(
-      (m, [c, w]) => (c !== "normal" && m.push(`@media(min-width: ${H[c]}px){`), Object.entries(w).forEach(([x, U]) => {
-        const { __parents: P, ...de } = U, ee = Object.entries(de);
-        ee.sort(([N], [_]) => o[N] - o[_]), ee.forEach(([N, _]) => {
-          _.forEach((C) => {
+      (m, [c, w]) => (c !== "normal" && m.push(`@media(min-width: ${H[c]}px){`), Object.entries(w).forEach(([x, G]) => {
+        const { __parents: P, ...de } = G, ee = Object.entries(de);
+        ee.sort(([F], [_]) => a[F] - a[_]), ee.forEach(([F, _]) => {
+          _.forEach((V) => {
             var B, k;
-            const h = E[N].find((F) => Array.isArray(F.values) ? F.values.includes(C) : typeof C == typeof F.values);
+            const h = E[F].find(($) => Array.isArray($.values) ? $.values.includes(V) : typeof V == typeof $.values);
             if (!h) return;
-            const V = a(N, C, +x, c), G = D[+x].map((F) => Z[F]).join(""), p = ((B = h.selector) == null ? void 0 : B.call(h, `.${V}`, G)) ?? `.${V}${G}`, I = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? N], O = ((k = h.valueFormat) == null ? void 0 : k.call(h, C, z.getVariableValue)) ?? C;
-            m.push(`${p}{${I.map((F) => `${F}:${O}`).join(";")}}`);
+            const z = o(F, V, +x, c), L = D[+x].map(($) => Z[$]).join(""), p = ((B = h.selector) == null ? void 0 : B.call(h, `.${z}`, L)) ?? `.${z}${L}`, T = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? F], O = ((k = h.valueFormat) == null ? void 0 : k.call(h, V, N.getVariableValue)) ?? V;
+            m.push(`${p}{${T.map(($) => `${$}:${O}`).join(";")}}`);
           });
-        }), P && Object.entries(P).forEach(([N, _]) => {
-          const C = Object.entries(_);
-          C.sort(([j], [h]) => o[j] - o[h]), C.forEach(([j, h]) => {
-            h.forEach((V) => {
+        }), P && Object.entries(P).forEach(([F, _]) => {
+          const V = Object.entries(_);
+          V.sort(([j], [h]) => a[j] - a[h]), V.forEach(([j, h]) => {
+            h.forEach((z) => {
               var te, re;
-              const p = E[j].find((T) => Array.isArray(T.values) ? T.values.includes(V) : typeof V == typeof T.values);
+              const p = E[j].find((R) => Array.isArray(R.values) ? R.values.includes(z) : typeof z == typeof R.values);
               if (!p) return;
-              const I = a(j, V, +x, c, N), [O] = D[+x], B = ((te = p.selector) == null ? void 0 : te.call(p, `.${O}-${N}:${O} .${I}`, "")) ?? `.${O}-${N}:${O} .${I}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], F = ((re = p.valueFormat) == null ? void 0 : re.call(p, V, z.getVariableValue)) ?? V;
-              m.push(`${B}{${k.map((T) => `${T}:${F}`).join(";")}}`);
+              const T = o(j, z, +x, c, F), [O] = D[+x], B = ((te = p.selector) == null ? void 0 : te.call(p, `.${O}-${F}:${O} .${T}`, "")) ?? `.${O}-${F}:${O} .${T}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((re = p.valueFormat) == null ? void 0 : re.call(p, z, N.getVariableValue)) ?? z;
+              m.push(`${B}{${k.map((R) => `${R}:${$}`).join(";")}}`);
             });
           });
         });
       }), c !== "normal" && m.push("}"), m),
       [v]
     );
-    b.unshift(`:root{${z.generateVariables()}}`);
+    b.unshift(`:root{${N.generateVariables()}}`);
     const i = y();
     i.innerHTML = b.join(""), t = !1;
   }
-  e.flush = d;
+  e.flush = u;
   function s() {
     r = {};
   }
   e.clear = s;
-  function f(o, v, g, b, i = "normal", m) {
+  function d(a, v, g, b, i = "normal", m) {
     if (v == null) return;
-    const c = b.reduce((x, U) => x + ie[U], 0);
-    r[i] ? r[i][c] ? r[i][c][o] || (r[i][c][o] = /* @__PURE__ */ new Set()) : r[i][c] = { [o]: /* @__PURE__ */ new Set() } : r[i] = { [c]: { [o]: /* @__PURE__ */ new Set() } }, m ? (r[i][c].__parents ? r[i][c].__parents[m] ? r[i][c].__parents[m][o] || (r[i][c].__parents[m][o] = /* @__PURE__ */ new Set()) : r[i][c].__parents[m] = { [o]: /* @__PURE__ */ new Set() } : r[i][c].__parents = { [m]: { [o]: /* @__PURE__ */ new Set() } }, r[i][c].__parents[m][o].has(v) || (r[i][c].__parents[m][o].add(v), t = !0)) : r[i][c][o].has(v) || (r[i][c][o].add(v), t = !0);
-    const w = a(o, v, c, i, m);
+    const c = b.reduce((x, G) => x + ie[G], 0);
+    r[i] ? r[i][c] ? r[i][c][a] || (r[i][c][a] = /* @__PURE__ */ new Set()) : r[i][c] = { [a]: /* @__PURE__ */ new Set() } : r[i] = { [c]: { [a]: /* @__PURE__ */ new Set() } }, m ? (r[i][c].__parents ? r[i][c].__parents[m] ? r[i][c].__parents[m][a] || (r[i][c].__parents[m][a] = /* @__PURE__ */ new Set()) : r[i][c].__parents[m] = { [a]: /* @__PURE__ */ new Set() } : r[i][c].__parents = { [m]: { [a]: /* @__PURE__ */ new Set() } }, r[i][c].__parents[m][a].has(v) || (r[i][c].__parents[m][a].add(v), t = !0)) : r[i][c][a].has(v) || (r[i][c][a].add(v), t = !0);
+    const w = o(a, v, c, i, m);
     g.push(w);
   }
-  function a(o, v, g, b, i) {
-    const m = D[g], c = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${o}-${v}`;
+  function o(a, v, g, b, i) {
+    const m = D[g], c = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${a}-${v}`;
     return ne ? c : he.getIdentity(c);
   }
-  const u = "crono-styles";
+  const f = "crono-styles";
   function y() {
-    let o = document.getElementById(u);
-    return o || (o = document.createElement("style"), o.setAttribute("id", u), o.setAttribute("type", "text/css"), document.head.insertBefore(o, document.head.firstChild)), o;
+    let a = document.getElementById(f);
+    return a || (a = document.createElement("style"), a.setAttribute("id", f), a.setAttribute("type", "text/css"), document.head.insertBefore(a, document.head.firstChild)), a;
   }
-})(A || (A = {}));
-var ae;
+})(S || (S = {}));
+var oe;
 ((e) => {
-  e.flush = A.flush, e.clear = A.clear;
-})(ae || (ae = {}));
+  e.flush = S.flush, e.clear = S.clear;
+})(oe || (oe = {}));
 var M;
 ((e) => {
-  function t(r, l, d) {
-    return z.setUserVariables(r), Object.entries(l).forEach(([s, f]) => {
-      E[s] = f;
-    }), Object.entries(d).forEach(([s, f]) => {
-      const a = E[s];
-      E[s] = a ? [...f, ...a] : f;
-    }), { extendedProps: l, extendedPropTypes: d };
+  function t(r, l, u) {
+    return N.setUserVariables(r), Object.entries(l).forEach(([s, d]) => {
+      E[s] = d;
+    }), Object.entries(u).forEach(([s, d]) => {
+      const o = E[s];
+      E[s] = o ? [...d, ...o] : d;
+    }), { extendedProps: l, extendedPropTypes: u };
   }
   e.extend = t;
 })(M || (M = {}));
-const Fe = M;
+const $e = M;
 var X;
 ((e) => {
   const t = {
@@ -1737,6 +1749,7 @@ var X;
         b: 1,
         borderRadius: 1,
         userSelect: "none",
+        lineHeight: 20,
         hover: {
           bgColor: "violet-600",
           borderColor: "violet-600"
@@ -1759,6 +1772,7 @@ var X;
         borderRadius: 1,
         p: 3,
         transition: "none",
+        lineHeight: 20,
         hover: {
           borderColor: "violet-300"
         },
@@ -1902,6 +1916,9 @@ var X;
       children: {
         items: {
           styles: {
+            display: "flex",
+            d: "column",
+            gap: 1,
             p: 1,
             b: 1,
             borderRadius: 1,
@@ -1915,6 +1932,35 @@ var X;
           }
         },
         item: {
+          styles: {
+            display: "flex",
+            width: "fit",
+            p: 3,
+            cursor: "pointer",
+            borderRadius: 1,
+            hover: {
+              bgColor: "gray-100"
+            },
+            focus: {
+              bgColor: "violet-50"
+            },
+            selected: {
+              bgColor: "violet-50",
+              cursor: "default",
+              hover: {
+                bgColor: "violet-100"
+              }
+            }
+          },
+          themes: {
+            multiple: {
+              selected: {
+                cursor: "pointer"
+              }
+            }
+          }
+        },
+        unselectItem: {
           styles: {
             display: "flex",
             width: "fit",
@@ -1922,111 +1968,129 @@ var X;
             cursor: "pointer",
             lineHeight: 20,
             borderRadius: 1,
+            color: "violet-400",
             hover: {
               bgColor: "violet-50"
             },
             focus: {
               bgColor: "violet-50"
+            },
+            selected: {
+              bgColor: "violet-50",
+              cursor: "default"
             }
           }
+        },
+        emptyItem: {
+          styles: {
+            display: "flex",
+            width: "fit",
+            p: 3,
+            cursor: "default",
+            lineHeight: 20,
+            borderRadius: 1,
+            color: "violet-400"
+          }
         }
       }
     }
   };
   function r(l) {
-    const { components: d, ...s } = l, f = d ?? {};
-    Object.entries(s).forEach(([a, u]) => {
-      f[a] = u;
-    }), R.components = $.mergeDeep(t, f);
+    const { components: u, ...s } = l, d = u ?? {};
+    Object.entries(s).forEach(([o, f]) => {
+      d[o] = f;
+    }), I.components = C.mergeDeep(t, d);
   }
-  e.setup = r, R.components = { ...t };
+  e.setup = r, I.components = { ...t };
 })(X || (X = {}));
-const $e = X;
+const Ce = X, xe = {
+  selected: "aria-selected"
+};
 var Y;
 ((e) => {
-  function t(r, l, d) {
-    r !== void 0 && r != null && (d[l] = Array.isArray(r) ? r[0] : r);
+  function t(r, l, u) {
+    r !== void 0 && r != null && (u[xe[l] ?? l] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
 })(Y || (Y = {}));
-const Ce = Y;
-function Ve() {
-  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;
-  }, []);
-}
+const Ve = Y;
+Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
+  return this.filter(e);
+});
 function ze(e = null) {
   const [t, r] = fe(!1), l = me(null);
   return le(() => {
-    function d(a) {
-      const u = e ?? l.current;
-      (u == null ? void 0 : u.contains(a.target)) === !1 && r(!1);
-    }
-    function s() {
-      r(!1);
+    function u(d) {
+      const o = e ?? l.current;
+      (o == null ? void 0 : o.contains(d.target)) === !1 && r(!1);
     }
-    function f(a) {
-      a.key === "Escape" && r(!1);
+    function s(d) {
+      d.key === "Escape" && r(!1);
     }
-    return t && (window.addEventListener("mousedown", d), window.addEventListener("resize", s), window.addEventListener("keydown", f)), () => {
-      window.removeEventListener("mousedown", d), window.removeEventListener("resize", s), window.removeEventListener("keydown", f);
+    return t && (window.addEventListener("mousedown", u), window.addEventListener("keydown", s)), () => {
+      window.removeEventListener("mousedown", u), window.removeEventListener("keydown", s);
     };
   }, [e, t]), [t, r, l];
 }
+function Ee() {
+  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;
+  }, []);
+}
 var J;
 ((e) => {
   function t(l) {
-    const d = Array.from(l.elements).reduce(
-      (s, f) => {
-        const a = f.name;
-        return a && (s[a] || (s[a] = []), s[a].push(f)), s;
+    const u = Array.from(l.elements).reduce(
+      (s, d) => {
+        const o = d.name;
+        return o && (s[o] || (s[o] = []), s[o].push(d)), s;
       },
       {}
     );
-    return Object.entries(d).reduce((s, [f, a]) => {
-      if (a.length === 1) {
-        const u = a[0];
-        r(s, f, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
+    return Object.entries(u).reduce((s, [d, o]) => {
+      if (o.length === 1) {
+        const f = o[0];
+        r(s, d, f.type === "checkbox" || f.type === "radio" ? f.checked : f.value);
       } else {
-        const u = a.reduce((y, o) => (o.type === "checkbox" || o.type === "radio" ? o.checked && y.push(o.value) : y.push(o.value), y), []);
-        r(s, f, u);
+        const f = o.reduce((y, a) => (a.type === "checkbox" || a.type === "radio" ? a.checked && y.push(a.value) : y.push(a.value), y), []);
+        r(s, d, f);
       }
       return s;
     }, {});
   }
   e.getFormEntries = t;
-  function r(l, d, s) {
-    if (d.includes(".")) {
-      const f = d.split(".");
-      let a = l;
-      f.forEach((u, y) => {
-        if (f.length > y + 1) {
-          const o = u.match(/^(.+)\[(\d)\]$/);
-          if (o) {
-            const [, v, g] = o;
-            a[v] = a[v] || [], a[v][g] = a[v][g] || {}, a = a[v][g];
+  function r(l, u, s) {
+    if (u.includes(".")) {
+      const d = u.split(".");
+      let o = l;
+      d.forEach((f, y) => {
+        if (d.length > y + 1) {
+          const a = f.match(/^(.+)\[(\d)\]$/);
+          if (a) {
+            const [, v, g] = a;
+            o[v] = o[v] || [], o[v][g] = o[v][g] || {}, o = o[v][g];
           } else
-            a[u] = a[u] || {}, a = a[u];
+            o[f] = o[f] || {}, o = o[f];
         } else
-          a[u] = s;
+          o[f] = s;
       });
     } else
-      l[d] = s;
+      l[u] = s;
   }
 })(J || (J = {}));
-const Ee = J;
+const je = J;
 export {
-  Fe as B,
-  Ee as F,
-  $ as O,
-  ae as S,
-  $e as T,
-  z as V,
-  Ce as a,
+  $e as B,
+  je as F,
+  C as O,
+  oe as S,
+  Ce as T,
+  N as V,
+  Ve as a,
   ze as b,
   ve as c,
-  Ve as d,
-  Ne as u
+  Ee as d,
+  Fe as u
 };