@cronocode/react-box 3.0.9 → 3.0.11

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),E=require("./textbox.cjs"),z=require("./flex.cjs"),C=require("../core.cjs"),F=require("./baseSvg.cjs"),G=require("./tooltip.cjs"),Q=require("./button.cjs");function X(u,d){const{name:p,defaultValue:x,multiple:c,isSearchable:w,searchPlaceholder:H,children:D,onChange:r,...L}=u,[i,g]=n.useState(Array.isArray(x)?x:x?[x]:[]),[j,N]=n.useState(""),[m,P,I]=C.useVisibility(),S=n.useRef(null),R=n.useRef(null),[U,B]=n.useState(0),M=n.useMemo(()=>U>window.innerHeight/2,[U]),Y=n.useMemo(()=>{var e;return M?((e=I.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[M,I]),l=n.useMemo(()=>Array.isArray(D)?D:[D],[D]),V=n.useMemo(()=>l.filter(e=>{var o;return((o=e.type)==null?void 0:o.componentName)==="DropdownItem"}),[l]),f=n.useMemo(()=>V.filter(e=>w&&j?q(e).toLowerCase().includes(j.toLowerCase()):!0),[w,j,l]),_=n.useMemo(()=>l.find(e=>{var o;return((o=e.type)==null?void 0:o.componentName)==="DropdownUnselect"}),[l]),O=n.useMemo(()=>l.find(e=>{var o;return((o=e.type)==null?void 0:o.componentName)==="DropdownSelectAll"}),[l]),b=n.useMemo(()=>l.find(e=>{var o;return((o=e.type)==null?void 0:o.componentName)==="DropdownEmptyItem"}),[l]),T=n.useMemo(()=>l.find(e=>{var o;return((o=e.type)==null?void 0:o.componentName)==="DropdownDisplay"}),[l]),J=n.useMemo(()=>{if(T)return T.props.children(i);const e=f.filter(t=>i.includes(t.props.value));if(c&&e.length>1)return e.map(t=>q(t)).join(", ");const o=e.at(0);return(o==null?void 0:o.props.children)??(o==null?void 0:o.props.value)},[c,f,i]),A=n.useCallback((e,...o)=>{if(o.length===0)g([]),r==null||r(void 0,[]);else if(c&&o.length>1){const t=o.map(a=>a.props.value);g(t),r==null||r(void 0,t)}else if(o.length===1){const t=o[0];if(c){const a=i.filter($=>$!==t.props.value);a.length===i.length&&a.push(t.props.value),g(a),r==null||r(t.props.value,a)}else g([t.props.value]),r==null||r(t.props.value,[t.props.value])}c?(e.stopPropagation(),setTimeout(()=>{var t;return(t=S.current)==null?void 0:t.focus()},0)):(P(!1),setTimeout(()=>{var t;return(t=I.current)==null?void 0:t.focus()},0))},[c,i,g]);n.useEffect(()=>{m?setTimeout(()=>{var e,o,t;(e=S.current)==null||e.focus(),(t=(o=R.current)==null?void 0:o.querySelector('[aria-selected="true"]'))==null||t.scrollIntoView({block:"nearest"})},0):N("")},[m]);const k=O&&c&&f.length>i.length,W=_&&f.length>0&&!k;return s.jsxs(h,{width:"fit-content",children:[i.map(e=>s.jsx(E,{ref:d,name:p,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),s.jsxs(Q,{ref:I,component:"dropdown",...L,props:{onMouseDown:()=>P(e=>!e),tabIndex:0},children:[w&&s.jsx(E,{display:m&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:H,value:j,onChange:e=>N(e.target.value),ref:S,props:{onMouseDown:e=>{m&&w&&e.stopPropagation()}}}),s.jsx(z,{component:"dropdown.display",display:m&&w?"none":"flex",flex1:!0,minHeight:5,children:J}),s.jsx(h,{children:s.jsx(F,{viewBox:"0 0 10 6",width:"0.6rem",rotate:m?180:0,children:s.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),m&&s.jsx(G,{ref:R,top:M?void 0:0,bottom:M?2:void 0,style:{transform:`translateY(-${Y}px)`},onPositionChange:e=>B(e.top-window.scrollY),children:(f.length>0||b)&&s.jsxs(h,{component:"dropdown.items",children:[W&&s.jsx(h,{component:"dropdown.unselect",selected:i.length===0,..._.props,props:{onMouseDown:e=>A(e)}}),k&&s.jsx(h,{component:"dropdown.selectAll",...O.props,props:{onMouseDown:e=>A(e,...V)}}),f.map(e=>{const{value:o,...t}=e.props;return s.jsx(h,{component:"dropdown.item",theme:c?"multiple":"single",selected:i.includes(o),...t,props:{onMouseDown:a=>A(a,e)}},o)}),f.length===0&&b&&s.jsx(h,{component:"dropdown.emptyItem",...b.props})]})})]})}function v(u){const d=p=>null;return d.componentName=u,d}const y=n.forwardRef(X);y.Item=v("DropdownItem");y.Unselect=v("DropdownUnselect");y.SelectAll=v("DropdownSelectAll");y.EmptyItem=v("DropdownEmptyItem");y.Display=v("DropdownDisplay");function q(u){var d;if(u==null)return"";if(typeof u=="object"){const p=(d=u.props)==null?void 0:d.children;return p==null?"":typeof p=="object"?(Array.isArray(p)?p:[p]).map(c=>q(c)).join(""):p.toString()}return u.toString()}module.exports=y;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),L=require("./textbox.cjs"),G=require("./flex.cjs"),Q=require("../core.cjs"),X=require("./baseSvg.cjs"),Z=require("./tooltip.cjs"),K=require("./button.cjs");function ee(i,m){const{name:p,defaultValue:g,value:y,multiple:u,isSearchable:w,searchPlaceholder:B,children:A,hideArrow:H,onChange:s,...Y}=i,[J,j]=n.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in i?Array.isArray(y)?y:y?[y]:[]:J,[D,R]=n.useState(""),[a,U,I]=Q.useVisibility(),q=n.useRef(null),T=n.useRef(null),[V,W]=n.useState(0),b=n.useMemo(()=>V>window.innerHeight/2,[V]),$=n.useMemo(()=>{var e;return b?((e=I.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[b,I]),l=n.useMemo(()=>(Array.isArray(A)?A:[A]).flatMap(e=>e),[A]),_=n.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=n.useMemo(()=>_.filter(e=>w&&D?P(e).toLowerCase().includes(D.toLowerCase()):!0),[w,D,l]),x=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),O=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),N=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),C=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),z=n.useMemo(()=>{if(C)return C.props.children(c,a);const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>P(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:x==null?void 0:x.props.children)},[u,f,c,x,a]),k=n.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(M=>M!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=q.current)==null?void 0:o.focus()},0)):(U(!1),setTimeout(()=>{var o;return(o=I.current)==null?void 0:o.focus()},0))},[u,c,j]);n.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=q.current)==null||e.focus(),(o=(t=T.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):R("")},[a]);const E=O&&u&&f.length>c.length,F=x&&f.length>0&&!E;return r.jsxs(h,{width:"fit-content",children:[c.map(e=>r.jsx(L,{ref:m,name:p,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),r.jsxs(K,{ref:I,component:"dropdown",onClick:()=>U(e=>!e),props:{tabIndex:0},...Y,children:[w&&r.jsx(L,{display:a&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:D,onChange:e=>R(e.target.value),ref:q,props:{onClick:e=>{a&&w&&e.stopPropagation()}}}),r.jsx(G,{component:"dropdown.display",display:a&&w?"none":"flex",children:z}),!H&&r.jsx(h,{children:r.jsx(X,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&r.jsx(Z,{ref:T,top:b?void 0:0,bottom:b?2:void 0,style:{transform:`translateY(-${$}px)`},onPositionChange:e=>W(e.top-window.scrollY),children:(f.length>0||N)&&r.jsxs(h,{component:"dropdown.items",children:[F&&r.jsx(h,{component:"dropdown.unselect",selected:c.length===0,...x.props,props:{onClick:e=>k(e)}}),E&&r.jsx(h,{component:"dropdown.selectAll",...O.props,props:{onClick:e=>k(e,..._)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return r.jsx(h,{component:"dropdown.item",theme:u?"multiple":"single",selected:c.includes(t),...d,props:{onClick:M=>{o==null||o(M),k(M,e)}}},t)}),f.length===0&&N&&r.jsx(h,{component:"dropdown.emptyItem",...N.props})]})})]})}function S(i){const m=p=>null;return m.displayName=i,m}const v=n.forwardRef(ee);v.Item=S("DropdownItem");v.Unselect=S("DropdownUnselect");v.SelectAll=S("DropdownSelectAll");v.EmptyItem=S("DropdownEmptyItem");v.Display=S("DropdownDisplay");function P(i){var m;if(i==null)return"";if(typeof i=="object"){const p=(m=i.props)==null?void 0:m.children;return p==null?"":typeof p=="object"?(Array.isArray(p)?p:[p]).map(y=>P(y)).join(""):p.toString()}return i.toString()}module.exports=v;

package/components/dropdown.d.ts

@@ -1,18 +1,21 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface Props<TVal> extends BoxProps {
+interface Props<TVal> extends BoxProps<'button'> {
     name?: string;
     defaultValue?: TVal | TVal[];
+    value?: TVal | TVal[];
     multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
+    hideArrow?: boolean;
     onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
 }
 interface DropdownItemProps<TVal> extends BoxProps {
     value: TVal;
+    onClick?(e: React.MouseEvent): void;
 }
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
-    children: (selectedValues: TVal[]) => React.ReactNode;
+    children: (selectedValues: TVal[], isOpen: boolean) => React.ReactNode;
 }
 interface DropdownType {
     <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;

package/components/dropdown.mjs

@@ -1,159 +1,159 @@
-import { jsxs as j, jsx as s } from "react/jsx-runtime";
-import { forwardRef as G, useState as M, useRef as Y, useMemo as c, useCallback as Q, useEffect as X } from "react";
+import { jsxs as U, jsx as l } from "react/jsx-runtime";
+import { forwardRef as Z, useState as B, useRef as M, useMemo as c, useCallback as K, useEffect as ee } from "react";
 import h from "../box.mjs";
-import J from "./textbox.mjs";
-import Z from "./flex.mjs";
-import { b as K } from "../core.mjs";
-import ee from "./baseSvg.mjs";
-import oe from "./tooltip.mjs";
-import te from "./button.mjs";
-function ne(u, m) {
-  const { name: l, defaultValue: y, multiple: p, isSearchable: w, searchPlaceholder: q, children: x, onChange: n, ...F } = u, [i, g] = M(Array.isArray(y) ? y : y ? [y] : []), [I, B] = M(""), [d, U, S] = K(), b = Y(null), V = Y(null), [O, W] = M(0), A = c(() => O > window.innerHeight / 2, [O]), _ = c(() => {
+import q from "./textbox.mjs";
+import te from "./flex.mjs";
+import { b as oe } from "../core.mjs";
+import re from "./baseSvg.mjs";
+import ne from "./tooltip.mjs";
+import le from "./button.mjs";
+function se(s, m) {
+  const { name: p, defaultValue: g, value: y, multiple: a, isSearchable: w, searchPlaceholder: F, children: S, hideArrow: W, onChange: r, ..._ } = s, [$, x] = B(Array.isArray(g) ? g : g ? [g] : []), i = "value" in s ? Array.isArray(y) ? y : y ? [y] : [] : $, [I, O] = B(""), [d, R, b] = oe(), P = M(null), C = M(null), [E, z] = B(0), N = c(() => E > window.innerHeight / 2, [E]), G = c(() => {
     var e;
-    return A ? ((e = S.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
-  }, [A, S]), r = c(() => Array.isArray(x) ? x : [x], [x]), R = c(() => r.filter((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownItem";
-  }), [r]), f = c(() => R.filter((e) => w && I ? T(e).toLowerCase().includes(I.toLowerCase()) : !0), [w, I, r]), k = c(() => r.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownUnselect";
-  }), [r]), E = c(() => r.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownSelectAll";
-  }), [r]), N = c(() => r.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownEmptyItem";
-  }), [r]), H = c(() => r.find((e) => {
-    var o;
-    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownDisplay";
-  }), [r]), $ = c(() => {
-    if (H) return H.props.children(i);
-    const e = f.filter((t) => i.includes(t.props.value));
-    if (p && e.length > 1)
-      return e.map((t) => T(t)).join(", ");
-    const o = e.at(0);
-    return (o == null ? void 0 : o.props.children) ?? (o == null ? void 0 : o.props.value);
-  }, [p, f, i]), P = Q(
-    (e, ...o) => {
-      if (o.length === 0)
-        g([]), n == null || n(void 0, []);
-      else if (p && o.length > 1) {
-        const t = o.map((a) => a.props.value);
-        g(t), n == null || n(void 0, t);
-      } else if (o.length === 1) {
-        const t = o[0];
-        if (p) {
-          const a = i.filter((C) => C !== t.props.value);
-          a.length === i.length && a.push(t.props.value), g(a), n == null || n(t.props.value, a);
+    return N ? ((e = b.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
+  }, [N, b]), n = c(
+    () => (Array.isArray(S) ? S : [S]).flatMap((e) => e),
+    [S]
+  ), L = c(() => n.filter((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownItem";
+  }), [n]), f = c(() => L.filter((e) => w && I ? V(e).toLowerCase().includes(I.toLowerCase()) : !0), [w, I, n]), v = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownUnselect";
+  }), [n]), H = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownSelectAll";
+  }), [n]), T = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownEmptyItem";
+  }), [n]), Y = c(() => n.find((e) => {
+    var t;
+    return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownDisplay";
+  }), [n]), Q = c(() => {
+    if (Y) return Y.props.children(i, d);
+    const e = f.filter((o) => i.includes(o.props.value));
+    if (a && e.length > 1)
+      return e.map((o) => V(o)).join(", ");
+    const t = e.at(0);
+    return (t == null ? void 0 : t.props.children) ?? (t == null ? void 0 : t.props.value) ?? (a ? null : v == null ? void 0 : v.props.children);
+  }, [a, f, i, v, d]), j = K(
+    (e, ...t) => {
+      if (t.length === 0)
+        x([]), r == null || r(void 0, []);
+      else if (a && t.length > 1) {
+        const o = t.map((u) => u.props.value);
+        x(o), r == null || r(void 0, o);
+      } else if (t.length === 1) {
+        const o = t[0];
+        if (a) {
+          const u = i.filter((k) => k !== o.props.value);
+          u.length === i.length && u.push(o.props.value), x(u), r == null || r(o.props.value, u);
         } else
-          g([t.props.value]), n == null || n(t.props.value, [t.props.value]);
+          x([o.props.value]), r == null || r(o.props.value, [o.props.value]);
       }
-      p ? (e.stopPropagation(), setTimeout(() => {
-        var t;
-        return (t = b.current) == null ? void 0 : t.focus();
-      }, 0)) : (U(!1), setTimeout(() => {
-        var t;
-        return (t = S.current) == null ? void 0 : t.focus();
+      a ? (e.stopPropagation(), setTimeout(() => {
+        var o;
+        return (o = P.current) == null ? void 0 : o.focus();
+      }, 0)) : (R(!1), setTimeout(() => {
+        var o;
+        return (o = b.current) == null ? void 0 : o.focus();
       }, 0));
     },
-    [p, i, g]
+    [a, i, x]
   );
-  X(() => {
+  ee(() => {
     d ? setTimeout(() => {
-      var e, o, t;
-      (e = b.current) == null || e.focus(), (t = (o = V.current) == null ? void 0 : o.querySelector('[aria-selected="true"]')) == null || t.scrollIntoView({ block: "nearest" });
-    }, 0) : B("");
+      var e, t, o;
+      (e = P.current) == null || e.focus(), (o = (t = C.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || o.scrollIntoView({ block: "nearest" });
+    }, 0) : O("");
   }, [d]);
-  const L = E && p && f.length > i.length, z = k && f.length > 0 && !L;
-  return /* @__PURE__ */ j(h, { width: "fit-content", children: [
-    i.map((e) => /* @__PURE__ */ s(J, { ref: m, name: l, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
-    /* @__PURE__ */ j(te, { ref: S, component: "dropdown", ...F, props: { onMouseDown: () => U((e) => !e), tabIndex: 0 }, children: [
-      w && /* @__PURE__ */ s(
-        J,
+  const J = H && a && f.length > i.length, X = v && f.length > 0 && !J;
+  return /* @__PURE__ */ U(h, { width: "fit-content", children: [
+    i.map((e) => /* @__PURE__ */ l(q, { ref: m, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
+    /* @__PURE__ */ U(le, { ref: b, component: "dropdown", onClick: () => R((e) => !e), props: { tabIndex: 0 }, ..._, children: [
+      w && /* @__PURE__ */ l(
+        q,
         {
           display: d && w ? "block" : "none",
           clean: !0,
           flex1: !0,
           width: 1,
           minHeight: 5,
-          placeholder: q,
+          placeholder: F,
           value: I,
-          onChange: (e) => B(e.target.value),
-          ref: b,
+          onChange: (e) => O(e.target.value),
+          ref: P,
           props: {
-            onMouseDown: (e) => {
+            onClick: (e) => {
               d && w && e.stopPropagation();
             }
           }
         }
       ),
-      /* @__PURE__ */ s(Z, { component: "dropdown.display", display: d && w ? "none" : "flex", flex1: !0, minHeight: 5, children: $ }),
-      /* @__PURE__ */ s(h, { children: /* @__PURE__ */ s(ee, { viewBox: "0 0 10 6", width: "0.6rem", rotate: d ? 180 : 0, children: /* @__PURE__ */ s("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
+      /* @__PURE__ */ l(te, { component: "dropdown.display", display: d && w ? "none" : "flex", children: Q }),
+      !W && /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l(re, { viewBox: "0 0 10 6", width: "0.6rem", rotate: d ? 180 : 0, children: /* @__PURE__ */ l("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
     ] }),
-    d && /* @__PURE__ */ s(
-      oe,
+    d && /* @__PURE__ */ l(
+      ne,
       {
-        ref: V,
-        top: A ? void 0 : 0,
-        bottom: A ? 2 : void 0,
-        style: { transform: `translateY(-${_}px)` },
-        onPositionChange: (e) => W(e.top - window.scrollY),
-        children: (f.length > 0 || N) && /* @__PURE__ */ j(h, { component: "dropdown.items", children: [
-          z && /* @__PURE__ */ s(
+        ref: C,
+        top: N ? void 0 : 0,
+        bottom: N ? 2 : void 0,
+        style: { transform: `translateY(-${G}px)` },
+        onPositionChange: (e) => z(e.top - window.scrollY),
+        children: (f.length > 0 || T) && /* @__PURE__ */ U(h, { component: "dropdown.items", children: [
+          X && /* @__PURE__ */ l(
             h,
             {
               component: "dropdown.unselect",
               selected: i.length === 0,
-              ...k.props,
-              props: { onMouseDown: (e) => P(e) }
-            }
-          ),
-          L && /* @__PURE__ */ s(
-            h,
-            {
-              component: "dropdown.selectAll",
-              ...E.props,
-              props: { onMouseDown: (e) => P(e, ...R) }
+              ...v.props,
+              props: { onClick: (e) => j(e) }
             }
           ),
+          J && /* @__PURE__ */ l(h, { component: "dropdown.selectAll", ...H.props, props: { onClick: (e) => j(e, ...L) } }),
           f.map((e) => {
-            const { value: o, ...t } = e.props;
-            return /* @__PURE__ */ s(
+            const { value: t, onClick: o, ...u } = e.props;
+            return /* @__PURE__ */ l(
               h,
               {
                 component: "dropdown.item",
-                theme: p ? "multiple" : "single",
-                selected: i.includes(o),
-                ...t,
-                props: { onMouseDown: (a) => P(a, e) }
+                theme: a ? "multiple" : "single",
+                selected: i.includes(t),
+                ...u,
+                props: {
+                  onClick: (k) => {
+                    o == null || o(k), j(k, e);
+                  }
+                }
               },
-              o
+              t
             );
           }),
-          f.length === 0 && N && /* @__PURE__ */ s(h, { component: "dropdown.emptyItem", ...N.props })
+          f.length === 0 && T && /* @__PURE__ */ l(h, { component: "dropdown.emptyItem", ...T.props })
         ] })
       }
     )
   ] });
 }
-function v(u) {
-  const m = (l) => null;
-  return m.componentName = u, m;
+function A(s) {
+  const m = (p) => null;
+  return m.displayName = s, m;
 }
-const D = G(ne);
-D.Item = v("DropdownItem");
-D.Unselect = v("DropdownUnselect");
-D.SelectAll = v("DropdownSelectAll");
-D.EmptyItem = v("DropdownEmptyItem");
-D.Display = v("DropdownDisplay");
-function T(u) {
+const D = Z(se);
+D.Item = A("DropdownItem");
+D.Unselect = A("DropdownUnselect");
+D.SelectAll = A("DropdownSelectAll");
+D.EmptyItem = A("DropdownEmptyItem");
+D.Display = A("DropdownDisplay");
+function V(s) {
   var m;
-  if (u == null) return "";
-  if (typeof u == "object") {
-    const l = (m = u.props) == null ? void 0 : m.children;
-    return l == null ? "" : typeof l == "object" ? (Array.isArray(l) ? l : [l]).map((p) => T(p)).join("") : l.toString();
+  if (s == null) return "";
+  if (typeof s == "object") {
+    const p = (m = s.props) == null ? void 0 : m.children;
+    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((y) => V(y)).join("") : p.toString();
   }
-  return u.toString();
+  return s.toString();
 }
 export {
   D as default

package/components/semantics.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),r=require("../box.cjs");function t(e,n){return s.forwardRef((o,i)=>c.jsx(r,{tag:e,ref:i,component:e,...n,...o}))}const a=t("label"),m=t("article"),u=t("aside"),H=t("details"),f=t("figcaption"),l=t("figure"),S=t("footer"),g=t("header"),d=t("main"),h=t("mark"),M=t("nav"),b=t("menu"),p=t("section"),z=t("summary"),F=t("time"),k=t("p"),y=t("h1",{fontSize:14*2.5}),v=t("h2",{fontSize:14*2}),A=t("h3",{fontSize:14*1.75}),L=t("h4",{fontSize:14*1.5}),j=t("h5",{fontSize:14*1.25}),q=t("h6",{fontSize:14*1}),x=t("a"),P=t("img");exports.Article=m;exports.Aside=u;exports.Details=H;exports.Figcaption=f;exports.Figure=l;exports.Footer=S;exports.H1=y;exports.H2=v;exports.H3=A;exports.H4=L;exports.H5=j;exports.H6=q;exports.Header=g;exports.Img=P;exports.Label=a;exports.Link=x;exports.Main=d;exports.Mark=h;exports.Menu=b;exports.Nav=M;exports.P=k;exports.Section=p;exports.Summary=z;exports.Time=F;

package/components/semantics.d.ts

@@ -0,0 +1,29 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../core/coreTypes';
+type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements> = (props: Omit<BoxProps<TTag>, 'ref' | 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export declare const Label: SemanticComponentType<"label">;
+export declare const Article: SemanticComponentType<"article">;
+export declare const Aside: SemanticComponentType<"aside">;
+export declare const Details: SemanticComponentType<"details">;
+export declare const Figcaption: SemanticComponentType<"figcaption">;
+export declare const Figure: SemanticComponentType<"figure">;
+export declare const Footer: SemanticComponentType<"footer">;
+export declare const Header: SemanticComponentType<"header">;
+export declare const Main: SemanticComponentType<"main">;
+export declare const Mark: SemanticComponentType<"mark">;
+export declare const Nav: SemanticComponentType<"nav">;
+export declare const Menu: SemanticComponentType<"menu">;
+export declare const Section: SemanticComponentType<"section">;
+export declare const Summary: SemanticComponentType<"summary">;
+export declare const Time: SemanticComponentType<"time">;
+export declare const P: SemanticComponentType<"p">;
+export declare const H1: SemanticComponentType<"h1">;
+export declare const H2: SemanticComponentType<"h2">;
+export declare const H3: SemanticComponentType<"h3">;
+export declare const H4: SemanticComponentType<"h4">;
+export declare const H5: SemanticComponentType<"h5">;
+export declare const H6: SemanticComponentType<"h6">;
+export declare const Link: SemanticComponentType<"a">;
+export declare const Img: SemanticComponentType<"img">;
+export {};

package/components/semantics.mjs

@@ -0,0 +1,33 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import r from "../box.mjs";
+function o(t, n) {
+  return i((c, e) => /* @__PURE__ */ s(r, { tag: t, ref: e, component: t, ...n, ...c }));
+}
+const p = o("label"), u = o("article"), S = o("aside"), h = o("details"), l = o("figcaption"), H = o("figure"), d = o("footer"), g = o("header"), z = o("main"), k = o("mark"), x = o("nav"), F = o("menu"), M = o("section"), b = o("summary"), v = o("time"), y = o("p"), A = o("h1", { fontSize: 14 * 2.5 }), L = o("h2", { fontSize: 14 * 2 }), j = o("h3", { fontSize: 14 * 1.75 }), w = o("h4", { fontSize: 14 * 1.5 }), B = o("h5", { fontSize: 14 * 1.25 }), D = o("h6", { fontSize: 14 * 1 }), I = o("a"), P = o("img");
+export {
+  u as Article,
+  S as Aside,
+  h as Details,
+  l as Figcaption,
+  H as Figure,
+  d as Footer,
+  A as H1,
+  L as H2,
+  j as H3,
+  w as H4,
+  B as H5,
+  D as H6,
+  g as Header,
+  P as Img,
+  p as Label,
+  I as Link,
+  z as Main,
+  k as Mark,
+  F as Menu,
+  x as Nav,
+  y as P,
+  M as Section,
+  b as Summary,
+  v as Time
+};

package/core/boxStyles.d.ts

@@ -214,7 +214,7 @@ export declare const cssStyles: {
     fontSize: ({
         styleName: string;
         values: number;
-        valueFormat: typeof BoxStylesFormatters.Value.px;
+        valueFormat: (value: number) => string;
     } | {
         styleName: string;
         values: readonly ["inherit"];

package/core/boxStylesFormatters.d.ts

@@ -4,7 +4,7 @@ export declare namespace BoxStylesFormatters {
         function svg(selector: string): string[];
     }
     namespace Value {
-        function rem(value: number): string;
+        function rem(value: number, _fn?: Function, divider?: number): string;
         function px(value: number): string;
         function fraction(_key: string, value: string): string;
         function widthHeight(key: string, value: string): string;

package/core.cjs

@@ -1,7 +1,7 @@
-"use strict";const p=require("react"),ce=require("react/jsx-runtime");function ae(...e){return e.reduce((t,r)=>r?typeof r=="string"?(t.push(r),t):Array.isArray(r)?(t.push(...ae(...r)),t):(Object.entries(r).forEach(([a,s])=>{s&&t.push(a)}),t):t,[])}var u;(e=>{(t=>{function r(s,n){return`${s}${n.replace("/","-")}`}t.fraction=r;function a(s){return[`${s} path`,`${s} circle`,`${s} rect`,`${s} line`]}t.svg=a})(e.ClassName||(e.ClassName={})),(t=>{function r(b){return`${b/4}rem`}t.rem=r;function a(b){return`${b}px`}t.px=a;function s(b,i){const[m,f]=i.split("/");return`${+m/+f*100}%`}t.fraction=s;function n(b,i){switch(i){case"fit":return"100%";case"fit-screen":return b.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return i}}t.widthHeight=n;function d(b){return(i,m)=>`var(--${b}${m});`}t.variables=d;function o(b){return(i,m)=>`var(--${b}${m});`}t.svgVariables=o;function c(b,i){return`repeat(${i},minmax(0,1fr))`}t.gridColumns=c;function y(b,i){return i==="full-row"?"1/-1":`span ${i}/span ${i}`}t.gridColumn=y;function l(b,i){return`${i}ms`}t.ms=l;function v(b,i){return`${i}deg`}t.rotate=v;function g(b,i){return i==="xAxis"?"-1 1":"1 -1"}t.flip=g})(e.Value||(e.Value={}))})(u||(u={}));var W;(e=>{e.colors={currentColor:"currentColor",transparent:"transparent",green:"green",red:"red",blue:"blue",gray:"gray",black:"#000",white:"#fff","slate-50":"#f8fafc","slate-100":"#f1f5f9","slate-200":"#e2e8f0","slate-300":"#cbd5e1","slate-400":"#94a3b8","slate-500":"#64748b","slate-600":"#475569","slate-700":"#334155","slate-800":"#1e293b","slate-900":"#0f172a","slate-950":"#020617","gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-200":"#e5e7eb","gray-300":"#d1d5db","gray-400":"#9ca3af","gray-500":"#6b7280","gray-600":"#4b5563","gray-700":"#374151","gray-800":"#1f2937","gray-900":"#111827","gray-950":"#030712","zinc-50":"#fafafa","zinc-100":"#f4f4f5","zinc-200":"#e4e4e7","zinc-300":"#d4d4d8","zinc-400":"#a1a1aa","zinc-500":"#71717a","zinc-600":"#52525b","zinc-700":"#3f3f46","zinc-800":"#27272a","zinc-900":"#18181b","zinc-950":"#09090b","neutral-50":"#fafafa","neutral-100":"#f5f5f5","neutral-200":"#e5e5e5","neutral-300":"#d4d4d4","neutral-400":"#a3a3a3","neutral-500":"#737373","neutral-600":"#525252","neutral-700":"#404040","neutral-800":"#262626","neutral-900":"#171717","neutral-950":"#0a0a0a","stone-50":"#fafaf9","stone-100":"#f5f5f4","stone-200":"#e7e5e4","stone-300":"#d6d3d1","stone-400":"#a8a29e","stone-500":"#78716c","stone-600":"#57534e","stone-700":"#44403c","stone-800":"#292524","stone-900":"#1c1917","stone-950":"#0c0a09","red-50":"#fef2f2","red-100":"#fee2e2","red-200":"#fecaca","red-300":"#fca5a5","red-400":"#f87171","red-500":"#ef4444","red-600":"#dc2626","red-700":"#b91c1c","red-800":"#991b1b","red-900":"#7f1d1d","red-950":"#450a0a","orange-50":"#fff7ed","orange-100":"#ffedd5","orange-200":"#fed7aa","orange-300":"#fdba74","orange-400":"#fb923c","orange-500":"#f97316","orange-600":"#ea580c","orange-700":"#c2410c","orange-800":"#9a3412","orange-900":"#7c2d12","orange-950":"#431407","amber-50":"#fffbeb","amber-100":"#fef3c7","amber-200":"#fde68a","amber-300":"#fcd34d","amber-400":"#fbbf24","amber-500":"#f59e0b","amber-600":"#d97706","amber-700":"#b45309","amber-800":"#92400e","amber-900":"#78350f","amber-950":"#451a03","yellow-50":"#fefce8","yellow-100":"#fef9c3","yellow-200":"#fef08a","yellow-300":"#fde047","yellow-400":"#facc15","yellow-500":"#eab308","yellow-600":"#ca8a04","yellow-700":"#a16207","yellow-800":"#854d0e","yellow-900":"#713f12","yellow-950":"#422006","lime-50":"#f7fee7","lime-100":"#ecfccb","lime-200":"#d9f99d","lime-300":"#bef264","lime-400":"#a3e635","lime-500":"#84cc16","lime-600":"#65a30d","lime-700":"#4d7c0f","lime-800":"#3f6212","lime-900":"#365314","lime-950":"#1a2e05","green-50":"#f0fdf4","green-100":"#dcfce7","green-200":"#bbf7d0","green-300":"#86efac","green-400":"#4ade80","green-500":"#22c55e","green-600":"#16a34a","green-700":"#15803d","green-800":"#166534","green-900":"#14532d","green-950":"#052e16","emerald-50":"#ecfdf5","emerald-100":"#d1fae5","emerald-200":"#a7f3d0","emerald-300":"#6ee7b7","emerald-400":"#34d399","emerald-500":"#10b981","emerald-600":"#059669","emerald-700":"#047857","emerald-800":"#065f46","emerald-900":"#064e3b","emerald-950":"#022c22","teal-50":"#f0fdfa","teal-100":"#ccfbf1","teal-200":"#99f6e4","teal-300":"#5eead4","teal-400":"#2dd4bf","teal-500":"#14b8a6","teal-600":"#0d9488","teal-700":"#0f766e","teal-800":"#115e59","teal-900":"#134e4a","teal-950":"#042f2e","cyan-50":"#ecfeff","cyan-100":"#cffafe","cyan-200":"#a5f3fc","cyan-300":"#67e8f9","cyan-400":"#22d3ee","cyan-500":"#06b6d4","cyan-600":"#0891b2","cyan-700":"#0e7490","cyan-800":"#155e75","cyan-900":"#164e63","cyan-950":"#083344","sky-50":"#f0f9ff","sky-100":"#e0f2fe","sky-200":"#bae6fd","sky-300":"#7dd3fc","sky-400":"#38bdf8","sky-500":"#0ea5e9","sky-600":"#0284c7","sky-700":"#0369a1","sky-800":"#075985","sky-900":"#0c4a6e","sky-950":"#082f49","blue-50":"#eff6ff","blue-100":"#dbeafe","blue-200":"#bfdbfe","blue-300":"#93c5fd","blue-400":"#60a5fa","blue-500":"#3b82f6","blue-600":"#2563eb","blue-700":"#1d4ed8","blue-800":"#1e40af","blue-900":"#1e3a8a","blue-950":"#172554","indigo-50":"#eef2ff","indigo-100":"#e0e7ff","indigo-200":"#c7d2fe","indigo-300":"#a5b4fc","indigo-400":"#818cf8","indigo-500":"#6366f1","indigo-600":"#4f46e5","indigo-700":"#4338ca","indigo-800":"#3730a3","indigo-900":"#312e81","indigo-950":"#1e1b4b","violet-50":"#f5f3ff","violet-100":"#ede9fe","violet-200":"#ddd6fe","violet-300":"#c4b5fd","violet-400":"#a78bfa","violet-500":"#8b5cf6","violet-600":"#7c3aed","violet-700":"#6d28d9","violet-800":"#5b21b6","violet-900":"#4c1d95","violet-950":"#2e1065",vi:"#7949FF","purple-50":"#faf5ff","purple-100":"#f3e8ff","purple-200":"#e9d5ff","purple-300":"#d8b4fe","purple-400":"#c084fc","purple-500":"#a855f7","purple-600":"#9333ea","purple-700":"#7e22ce","purple-800":"#6b21a8","purple-900":"#581c87","purple-950":"#3b0764","fuchsia-50":"#fdf4ff","fuchsia-100":"#fae8ff","fuchsia-200":"#f5d0fe","fuchsia-300":"#f0abfc","fuchsia-400":"#e879f9","fuchsia-500":"#d946ef","fuchsia-600":"#c026d3","fuchsia-700":"#a21caf","fuchsia-800":"#86198f","fuchsia-900":"#701a75","fuchsia-950":"#4a044e","pink-50":"#fdf2f8","pink-100":"#fce7f3","pink-200":"#fbcfe8","pink-300":"#f9a8d4","pink-400":"#f472b6","pink-500":"#ec4899","pink-600":"#db2777","pink-700":"#be185d","pink-800":"#9d174d","pink-900":"#831843","pink-950":"#500724","rose-50":"#fff1f2","rose-100":"#ffe4e6","rose-200":"#fecdd3","rose-300":"#fda4af","rose-400":"#fb7185","rose-500":"#f43f5e","rose-600":"#e11d48","rose-700":"#be123c","rose-800":"#9f1239","rose-900":"#881337","rose-950":"#4c0519"};const t={inherit:"inherit",none:"none","bg-img-checked":`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>")}")`,"bg-img-indeterminate":`url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><line stroke='${e.colors["violet-400"]}' x1='4' y1='10' x2='16' y2='10' stroke-width='1' /></svg>`)}")`,"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>")}")`,"small-shadow":"rgba(0, 0, 0, 0.16) 0px 1px 4px","medium-shadow":"rgba(0, 0, 0, 0.24) 0px 3px 8px","large-shadow":"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px"},r={};let a={};function s(o){return o in a?r[o]=a[o]:o in t?r[o]=t[o]:o in e.colors?r[o]=e.colors[o]:r[o]=o,`var(--${o})`}e.getVariableValue=s;function n(){return Object.entries(r).map(([o,c])=>`--${o}: ${c};`).join("")}e.generateVariables=n;function d(o){a=o}e.setUserVariables=d})(W||(W={}));const w=W,z={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:u.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:u.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:u.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:u.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:u.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:u.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:u.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:u.Value.rem}],borderRadiusTop:[{values:0,styleName:["border-top-left-radius","border-top-right-radius"],valueFormat:u.Value.rem}],borderRadiusRight:[{values:0,styleName:["border-top-right-radius","border-bottom-right-radius"],valueFormat:u.Value.rem}],borderRadiusBottom:[{values:0,styleName:["border-bottom-left-radius","border-bottom-right-radius"],valueFormat:u.Value.rem}],borderRadiusLeft:[{values:0,styleName:["border-top-left-radius","border-bottom-left-radius"],valueFormat:u.Value.rem}],borderRadiusTopLeft:[{values:0,styleName:"border-top-left-radius",valueFormat:u.Value.rem}],borderRadiusTopRight:[{values:0,styleName:"border-top-right-radius",valueFormat:u.Value.rem}],borderRadiusBottomRight:[{values:0,styleName:"border-bottom-right-radius",valueFormat:u.Value.rem}],borderRadiusBottomLeft:[{values:0,styleName:"border-bottom-left-radius",valueFormat:u.Value.rem}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:u.Value.rem}],right:[{values:0,valueFormat:u.Value.rem}],bottom:[{values:0,valueFormat:u.Value.rem}],left:[{values:0,valueFormat:u.Value.rem}],inset:[{values:0,valueFormat:u.Value.rem}],boxSizing:[{values:["border-box","content-box"],styleName:"box-sizing"}],contentVisibility:[{values:["visible","hidden"],styleName:"content-visibility"}],cursor:[{values:["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]}],display:[{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]}],inline:[{values:[!0],styleName:"display",valueFormat:()=>"inline-block"}],jc:[{styleName:"justify-content",values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]}],ai:[{styleName:"align-items",values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]}],alignContent:[{styleName:"align-content",values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]}],flex1:[{styleName:"flex",values:[!0],valueFormat:()=>"1"}],d:[{styleName:"flex-direction",values:["row","row-reverse","column","column-reverse"]}],flexWrap:[{styleName:"flex-wrap",values:["nowrap","wrap","wrap-reverse"]}],flexGrow:[{styleName:"flex-grow",values:0}],flexShrink:[{styleName:"flex-shrink",values:0}],alignSelf:[{styleName:"align-self",values:["auto","flex-start","flex-end","center","baseline","stretch"]}],justifySelf:[{styleName:"justify-self",values:["auto","flex-start","flex-end","center","baseline","stretch"]}],fontSize:[{styleName:"font-size",values:0,valueFormat:u.Value.px},{styleName:"font-size",values:["inherit"]}],fontStyle:[{styleName:"font-style",values:["italic","normal","oblique"]}],fontWeight:[{styleName:"font-weight",values:[100,200,300,400,500,600,700,800,900]}],gap:[{values:0,valueFormat:u.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:u.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:u.Value.rem}],order:[{styleName:"order",values:0}],height:[{values:0,valueFormat:e=>`${e/4}rem`},{values:["fit"],valueFormat:()=>"100%"},{values:["fit-screen"],valueFormat:()=>"100vh"},{values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{values:["auto","fit-content","max-content","min-content"]}],minHeight:[{styleName:"min-height",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"min-height",values:["fit"],valueFormat:()=>"100%"},{styleName:"min-height",values:["fit-screen"],valueFormat:()=>"100vh"},{styleName:"min-height",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"min-height",values:["auto","fit-content","max-content","min-content"]}],maxHeight:[{styleName:"max-height",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"max-height",values:["fit"],valueFormat:()=>"100%"},{styleName:"max-height",values:["fit-screen"],valueFormat:()=>"100vh"},{styleName:"max-height",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"max-height",values:["auto","fit-content","max-content","min-content"]}],width:[{values:0,valueFormat:e=>`${e/4}rem`},{values:["fit"],valueFormat:()=>"100%"},{values:["fit-screen"],valueFormat:()=>"100vw"},{values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{values:["auto","fit-content","max-content","min-content"]}],minWidth:[{styleName:"min-width",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"min-width",values:["fit"],valueFormat:()=>"100%"},{styleName:"min-width",values:["fit-screen"],valueFormat:()=>"100vw"},{styleName:"min-width",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"min-width",values:["auto","fit-content","max-content","min-content"]}],maxWidth:[{styleName:"max-width",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"max-width",values:["fit"],valueFormat:()=>"100%"},{styleName:"max-width",values:["fit-screen"],valueFormat:()=>"100vw"},{styleName:"max-width",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"max-width",values:["auto","fit-content","max-content","min-content"]}],letterSpacing:[{styleName:"letter-spacing",values:0,valueFormat:u.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:u.Value.px},{styleName:"line-height",values:["font-size"],valueFormat:e=>"1"}],listStyle:[{styleName:"list-style",values:["square","inside","outside","none"]}],m:[{values:0,styleName:"margin",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:u.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:u.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:u.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:u.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:u.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:u.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:u.Value.rem}],objectFit:[{styleName:"object-fit",values:["fill","contain","cover","scale-down","none"]}],opacity:[{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]}],outline:[{styleName:"outline-width",values:0,valueFormat:u.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:u.Value.px}],overflow:[{values:["auto","hidden","scroll","visible"]}],overflowX:[{styleName:"overflow-x",values:["auto","hidden","scroll","visible"]}],overflowY:[{styleName:"overflow-y",values:["auto","hidden","scroll","visible"]}],pointerEvents:[{styleName:"pointer-events",values:["none","auto","all"]}],resize:[{values:["none","both","horizontal","vertical","block","inline"]}],rotate:[{values:[0,90,180,270,-90,-180,-270],valueFormat:e=>`${e}deg`}],flip:[{styleName:"scale",values:["xAxis","yAxis"],valueFormat:e=>e==="xAxis"?"-1 1":"1 -1"}],textAlign:[{styleName:"text-align",values:["left","right","center","justify"]}],textDecoration:[{styleName:"text-decoration",values:["none","underline","overline","line-through"]}],textOverflow:[{styleName:"text-overflow",values:["clip","ellipsis"]}],textTransform:[{styleName:"text-transform",values:["none","capitalize","lowercase","uppercase"]}],textWrap:[{styleName:"text-wrap",values:["wrap","nowrap","balance","pretty"]}],transition:[{styleName:"transition-property",values:["none","all"]}],transitionDuration:[{styleName:"transition-duration",values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],valueFormat:e=>`${e}ms`}],userSelect:[{styleName:"user-select",values:["none","auto","text","all"]}],visibility:[{styleName:"visibility",values:["visible","hidden","collapse"]}],whiteSpace:[{styleName:"white-space",values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]}],zIndex:[{styleName:"z-index",values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]}],gridTemplateColumns:[{styleName:"grid-template-columns",values:0,valueFormat:e=>`repeat(${e},minmax(0,1fr))`},{styleName:"grid-template-columns",values:["subgrid"]}],gridTemplateRows:[{styleName:"grid-template-rows",values:0,valueFormat:e=>`repeat(${e},minmax(0,1fr))`},{styleName:"grid-template-rows",values:["subgrid"]}],colSpan:[{styleName:"grid-column",values:0,valueFormat:e=>`span ${e}/span ${e}`},{styleName:"grid-column",values:["full-row"],valueFormat:()=>"1/-1"}],gridColumnStart:[{styleName:"grid-column-start",values:0}],gridColumnEnd:[{styleName:"grid-column-end",values:0}],gridRow:[{styleName:"grid-row",values:0,valueFormat:e=>`span ${e}/span ${e}`},{styleName:"grid-row",values:["full-column"],valueFormat:()=>"1/-1"}],gridRowStart:[{styleName:"grid-row-start",values:0}],gridRowEnd:[{styleName:"grid-row-end",values:0}],color:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],bgColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"background-color"}],borderColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"border-color"}],outlineColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"outline-color"}],fill:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],stroke:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],bgImage:[{values:["none","bg-img-checked","bg-img-indeterminate","bg-img-radio"],valueFormat:(e,t)=>t(e),styleName:"background-image"}],shadow:[{values:["small-shadow","medium-shadow","large-shadow"],valueFormat:(e,t)=>t(e),styleName:"box-shadow"}],translateX:[{values:0,valueFormat:e=>`translateX(${e/4}rem)`,styleName:"transform"}]},se={hover:":hover",focus:":focus-within",hasFocus:":has(:focus)",active:":active",valid:":user-valid",hasValid:":has(:valid)",invalid:":user-invalid",hasInvalid:":has(:user-invalid)",optional:":optional",hasChecked:":has(:checked)",hasRequired:":has(:required)",hasDisabled:":has([disabled])"},G={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]",selected:'[aria-selected="true"]'},Z={...se,...G},ie=Object.entries(Z).reduce((e,[t],r)=>(e[t]=Math.pow(2,r),e),{}),K=Object.entries(Z).reduce((e,[t])=>{const r=ie[t];return Object.entries(e).forEach(([a,s])=>{e[+a+r]=[...s,t]}),e},{0:[]}),M={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var X;(e=>{function t(n,d,o){const c={...n},y=c.props||{};return d.forEach(l=>{l in c&&(y[l]=c[l],delete c[l])}),o&&Object.entries(o).forEach(([l,v])=>{y[l]=v}),c.props=y,c}e.buildProps=t;function r(n){return!!n&&typeof n=="object"}e.isObject=r;function a(...n){return n.reduce((d,o)=>(Object.keys(o??{}).forEach(c=>{const y=d[c],l=o[c];c in G&&typeof l=="boolean"||(c in G&&Array.isArray(l)?d[c]=a(y,l[1]??{}):Array.isArray(y)&&Array.isArray(l)?d[c]=y.concat(...l):r(y)&&r(l)?d[c]=a(y,l):d[c]=l)}),d),{})}e.mergeDeep=a;function s(n,d){return n in d}e.isKeyOf=s})(X||(X={}));const $=X;class fe{constructor(){this._index=0,this._cache={}}getIdentity(t){return this._cache[t]||(this._cache[t]=this.getByIndex(this._index++)),this._cache[t]}getByIndex(t){const{first:r,next:a}=me,s=t-r.length;if(s<0)return r[t];const n=Math.floor(s/a.length),d=s-n*a.length;return this.getByIndex(n)+a[d]}}const me={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"},B={button:{styles:{display:"inline-flex",color:"white",bgColor:"violet-500",borderColor:"violet-500",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",lineHeight:20,hover:{bgColor:"violet-600",borderColor:"violet-600"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}}},textbox:{styles:{display:"inline-block",b:1,borderColor:"violet-200",bgColor:"violet-50",color:"violet-950",borderRadius:1,p:3,transition:"none",lineHeight:20,hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}}},textarea:{styles:{display:"inline-block",b:1,borderColor:"violet-200",bgColor:"violet-50",color:"violet-950",borderRadius:1,p:3,transition:"none",hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300",resize:"none"}}},checkbox:{styles:{display:"inline-block",appearance:"none",b:1,borderColor:"violet-300",borderRadius:1,p:2,cursor:"pointer",transition:"none",hover:{borderColor:"violet-500"},focus:{outline:2,outlineOffset:2,outlineColor:"violet-500"},checked:{bgColor:"violet-500",borderColor:"violet-500",bgImage:"bg-img-checked"},indeterminate:{color:"violet-500",bgImage:"bg-img-indeterminate"},disabled:{cursor:"not-allowed",bgColor:"violet-100",color:"gray-400",borderColor:"gray-300"}}},radioButton:{styles:{appearance:"none",b:1,borderColor:"violet-300",borderRadius:3,p:2,cursor:"pointer",transition:"none",hover:{borderColor:"violet-500"},focus:{outline:2,outlineOffset:2,outlineColor:"violet-500"},checked:{bgColor:"violet-500",borderColor:"violet-500",bgImage:"bg-img-radio"},disabled:{cursor:"not-allowed",bgColor:"violet-100",color:"gray-400",borderColor:"violet-200"}}},dropdown:{styles:{display:"inline-flex",ai:"center",gap:2,jc:"space-between",p:3,cursor:"pointer",bgColor:"violet-50",color:"violet-950",b:1,borderColor:"violet-200",borderRadius:1,userSelect:"none",lineHeight:20,minWidth:40,transition:"none",hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}},children:{display:{styles:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}},items:{styles:{display:"flex",d:"column",gap:1,p:1,b:1,borderRadius:1,position:"relative",top:1,bgColor:"white",overflow:"auto",maxHeight:62,borderColor:"violet-300",color:"violet-950",shadow:"medium-shadow"}},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"}}}},unselect:{styles:{display:"flex",width:"fit",p:3,cursor:"pointer",lineHeight:20,borderRadius:1,color:"violet-400",hover:{bgColor:"violet-50"},focus:{bgColor:"violet-50"},selected:{bgColor:"violet-50",cursor:"default"}}},selectAll:{styles:{display:"flex",width:"fit",p:3,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"}}}}},P=p.createContext({themeStyles:B,theme:"",setTheme:()=>{}});function ve(e){const{clean:t,theme:r,component:a}=e,{themeStyles:s}=p.useContext(P);return p.useMemo(()=>{var o;if(t)return;const n=a==null?void 0:a.split(".");if(!n)return;const d=n.reduce((c,y,l)=>{var v;return l===0?s==null?void 0:s[y]:(v=c==null?void 0:c.children)==null?void 0:v[y]},void 0);if(d)return r?$.mergeDeep(d.styles,((o=d.themes)==null?void 0:o[r])??{}):d.styles},[a,t,r,s])}const be=new fe,ye=typeof window<"u"&&typeof window.document<"u";var le;const ne=typeof process=="object"&&((le=process.env)==null?void 0:le.NODE_ENV)==="test",ge=ye&&!ne?p.useLayoutEffect:p.useEffect,ue="_b",A="_s";function he(e,t){ge(T.flush,[e]);const r=ve(e);return p.useMemo(()=>{const a=[t?A:ue],s=r?$.mergeDeep(r,e):e;return T.addClassNames(s,a,[]),a},[e,t,r])}var T;(e=>{let t=!0,r={};function a(l,v,g,b,i){Object.entries(l).forEach(([m,f])=>{if($.isKeyOf(m,z))d(m,f,v,g,b,i);else if($.isKeyOf(m,se))a(f,v,[...g,m],b,i);else if($.isKeyOf(m,G)){if(Array.isArray(f)){const[N,F]=f;a(F,v,[...g,m],b,i)}$.isObject(f)&&a(f,v,[...g,m],b,i)}else $.isKeyOf(m,U)?a(f,v,g,m,i):$.isKeyOf(m,M)&&(typeof f=="string"?v.push(`${M[m]}-${f}`):Object.entries(f).forEach(([N,F])=>{a(F,v,[...g,M[m]],b,N)}))})}e.addClassNames=a;function s(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const l=Object.entries(z).reduce((m,[f],N)=>(m[f]=N,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;}
+"use strict";const p=require("react"),ce=require("react/jsx-runtime");function ae(...e){return e.reduce((t,r)=>r?typeof r=="string"?(t.push(r),t):Array.isArray(r)?(t.push(...ae(...r)),t):(Object.entries(r).forEach(([a,i])=>{i&&t.push(a)}),t):t,[])}var u;(e=>{(t=>{function r(i,n){return`${i}${n.replace("/","-")}`}t.fraction=r;function a(i){return[`${i} path`,`${i} circle`,`${i} rect`,`${i} line`]}t.svg=a})(e.ClassName||(e.ClassName={})),(t=>{function r(b,s,c=4){return`${b/c}rem`}t.rem=r;function a(b){return`${b}px`}t.px=a;function i(b,s){const[c,m]=s.split("/");return`${+c/+m*100}%`}t.fraction=i;function n(b,s){switch(s){case"fit":return"100%";case"fit-screen":return b.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return s}}t.widthHeight=n;function d(b){return(s,c)=>`var(--${b}${c});`}t.variables=d;function o(b){return(s,c)=>`var(--${b}${c});`}t.svgVariables=o;function f(b,s){return`repeat(${s},minmax(0,1fr))`}t.gridColumns=f;function y(b,s){return s==="full-row"?"1/-1":`span ${s}/span ${s}`}t.gridColumn=y;function l(b,s){return`${s}ms`}t.ms=l;function v(b,s){return`${s}deg`}t.rotate=v;function g(b,s){return s==="xAxis"?"-1 1":"1 -1"}t.flip=g})(e.Value||(e.Value={}))})(u||(u={}));var W;(e=>{e.colors={currentColor:"currentColor",transparent:"transparent",green:"green",red:"red",blue:"blue",gray:"gray",black:"#000",white:"#fff","slate-50":"#f8fafc","slate-100":"#f1f5f9","slate-200":"#e2e8f0","slate-300":"#cbd5e1","slate-400":"#94a3b8","slate-500":"#64748b","slate-600":"#475569","slate-700":"#334155","slate-800":"#1e293b","slate-900":"#0f172a","slate-950":"#020617","gray-50":"#f9fafb","gray-100":"#f3f4f6","gray-200":"#e5e7eb","gray-300":"#d1d5db","gray-400":"#9ca3af","gray-500":"#6b7280","gray-600":"#4b5563","gray-700":"#374151","gray-800":"#1f2937","gray-900":"#111827","gray-950":"#030712","zinc-50":"#fafafa","zinc-100":"#f4f4f5","zinc-200":"#e4e4e7","zinc-300":"#d4d4d8","zinc-400":"#a1a1aa","zinc-500":"#71717a","zinc-600":"#52525b","zinc-700":"#3f3f46","zinc-800":"#27272a","zinc-900":"#18181b","zinc-950":"#09090b","neutral-50":"#fafafa","neutral-100":"#f5f5f5","neutral-200":"#e5e5e5","neutral-300":"#d4d4d4","neutral-400":"#a3a3a3","neutral-500":"#737373","neutral-600":"#525252","neutral-700":"#404040","neutral-800":"#262626","neutral-900":"#171717","neutral-950":"#0a0a0a","stone-50":"#fafaf9","stone-100":"#f5f5f4","stone-200":"#e7e5e4","stone-300":"#d6d3d1","stone-400":"#a8a29e","stone-500":"#78716c","stone-600":"#57534e","stone-700":"#44403c","stone-800":"#292524","stone-900":"#1c1917","stone-950":"#0c0a09","red-50":"#fef2f2","red-100":"#fee2e2","red-200":"#fecaca","red-300":"#fca5a5","red-400":"#f87171","red-500":"#ef4444","red-600":"#dc2626","red-700":"#b91c1c","red-800":"#991b1b","red-900":"#7f1d1d","red-950":"#450a0a","orange-50":"#fff7ed","orange-100":"#ffedd5","orange-200":"#fed7aa","orange-300":"#fdba74","orange-400":"#fb923c","orange-500":"#f97316","orange-600":"#ea580c","orange-700":"#c2410c","orange-800":"#9a3412","orange-900":"#7c2d12","orange-950":"#431407","amber-50":"#fffbeb","amber-100":"#fef3c7","amber-200":"#fde68a","amber-300":"#fcd34d","amber-400":"#fbbf24","amber-500":"#f59e0b","amber-600":"#d97706","amber-700":"#b45309","amber-800":"#92400e","amber-900":"#78350f","amber-950":"#451a03","yellow-50":"#fefce8","yellow-100":"#fef9c3","yellow-200":"#fef08a","yellow-300":"#fde047","yellow-400":"#facc15","yellow-500":"#eab308","yellow-600":"#ca8a04","yellow-700":"#a16207","yellow-800":"#854d0e","yellow-900":"#713f12","yellow-950":"#422006","lime-50":"#f7fee7","lime-100":"#ecfccb","lime-200":"#d9f99d","lime-300":"#bef264","lime-400":"#a3e635","lime-500":"#84cc16","lime-600":"#65a30d","lime-700":"#4d7c0f","lime-800":"#3f6212","lime-900":"#365314","lime-950":"#1a2e05","green-50":"#f0fdf4","green-100":"#dcfce7","green-200":"#bbf7d0","green-300":"#86efac","green-400":"#4ade80","green-500":"#22c55e","green-600":"#16a34a","green-700":"#15803d","green-800":"#166534","green-900":"#14532d","green-950":"#052e16","emerald-50":"#ecfdf5","emerald-100":"#d1fae5","emerald-200":"#a7f3d0","emerald-300":"#6ee7b7","emerald-400":"#34d399","emerald-500":"#10b981","emerald-600":"#059669","emerald-700":"#047857","emerald-800":"#065f46","emerald-900":"#064e3b","emerald-950":"#022c22","teal-50":"#f0fdfa","teal-100":"#ccfbf1","teal-200":"#99f6e4","teal-300":"#5eead4","teal-400":"#2dd4bf","teal-500":"#14b8a6","teal-600":"#0d9488","teal-700":"#0f766e","teal-800":"#115e59","teal-900":"#134e4a","teal-950":"#042f2e","cyan-50":"#ecfeff","cyan-100":"#cffafe","cyan-200":"#a5f3fc","cyan-300":"#67e8f9","cyan-400":"#22d3ee","cyan-500":"#06b6d4","cyan-600":"#0891b2","cyan-700":"#0e7490","cyan-800":"#155e75","cyan-900":"#164e63","cyan-950":"#083344","sky-50":"#f0f9ff","sky-100":"#e0f2fe","sky-200":"#bae6fd","sky-300":"#7dd3fc","sky-400":"#38bdf8","sky-500":"#0ea5e9","sky-600":"#0284c7","sky-700":"#0369a1","sky-800":"#075985","sky-900":"#0c4a6e","sky-950":"#082f49","blue-50":"#eff6ff","blue-100":"#dbeafe","blue-200":"#bfdbfe","blue-300":"#93c5fd","blue-400":"#60a5fa","blue-500":"#3b82f6","blue-600":"#2563eb","blue-700":"#1d4ed8","blue-800":"#1e40af","blue-900":"#1e3a8a","blue-950":"#172554","indigo-50":"#eef2ff","indigo-100":"#e0e7ff","indigo-200":"#c7d2fe","indigo-300":"#a5b4fc","indigo-400":"#818cf8","indigo-500":"#6366f1","indigo-600":"#4f46e5","indigo-700":"#4338ca","indigo-800":"#3730a3","indigo-900":"#312e81","indigo-950":"#1e1b4b","violet-50":"#f5f3ff","violet-100":"#ede9fe","violet-200":"#ddd6fe","violet-300":"#c4b5fd","violet-400":"#a78bfa","violet-500":"#8b5cf6","violet-600":"#7c3aed","violet-700":"#6d28d9","violet-800":"#5b21b6","violet-900":"#4c1d95","violet-950":"#2e1065",vi:"#7949FF","purple-50":"#faf5ff","purple-100":"#f3e8ff","purple-200":"#e9d5ff","purple-300":"#d8b4fe","purple-400":"#c084fc","purple-500":"#a855f7","purple-600":"#9333ea","purple-700":"#7e22ce","purple-800":"#6b21a8","purple-900":"#581c87","purple-950":"#3b0764","fuchsia-50":"#fdf4ff","fuchsia-100":"#fae8ff","fuchsia-200":"#f5d0fe","fuchsia-300":"#f0abfc","fuchsia-400":"#e879f9","fuchsia-500":"#d946ef","fuchsia-600":"#c026d3","fuchsia-700":"#a21caf","fuchsia-800":"#86198f","fuchsia-900":"#701a75","fuchsia-950":"#4a044e","pink-50":"#fdf2f8","pink-100":"#fce7f3","pink-200":"#fbcfe8","pink-300":"#f9a8d4","pink-400":"#f472b6","pink-500":"#ec4899","pink-600":"#db2777","pink-700":"#be185d","pink-800":"#9d174d","pink-900":"#831843","pink-950":"#500724","rose-50":"#fff1f2","rose-100":"#ffe4e6","rose-200":"#fecdd3","rose-300":"#fda4af","rose-400":"#fb7185","rose-500":"#f43f5e","rose-600":"#e11d48","rose-700":"#be123c","rose-800":"#9f1239","rose-900":"#881337","rose-950":"#4c0519"};const t={inherit:"inherit",none:"none","bg-img-checked":`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>")}")`,"bg-img-indeterminate":`url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><line stroke='${e.colors["violet-400"]}' x1='4' y1='10' x2='16' y2='10' stroke-width='1' /></svg>`)}")`,"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>")}")`,"small-shadow":"rgba(0, 0, 0, 0.16) 0px 1px 4px","medium-shadow":"rgba(0, 0, 0, 0.24) 0px 3px 8px","large-shadow":"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px"},r={};let a={};function i(o){return o in a?r[o]=a[o]:o in t?r[o]=t[o]:o in e.colors?r[o]=e.colors[o]:r[o]=o,`var(--${o})`}e.getVariableValue=i;function n(){return Object.entries(r).map(([o,f])=>`--${o}: ${f};`).join("")}e.generateVariables=n;function d(o){a=o}e.setUserVariables=d})(W||(W={}));const w=W,z={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:u.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:u.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:u.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:u.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:u.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:u.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:u.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:u.Value.rem}],borderRadiusTop:[{values:0,styleName:["border-top-left-radius","border-top-right-radius"],valueFormat:u.Value.rem}],borderRadiusRight:[{values:0,styleName:["border-top-right-radius","border-bottom-right-radius"],valueFormat:u.Value.rem}],borderRadiusBottom:[{values:0,styleName:["border-bottom-left-radius","border-bottom-right-radius"],valueFormat:u.Value.rem}],borderRadiusLeft:[{values:0,styleName:["border-top-left-radius","border-bottom-left-radius"],valueFormat:u.Value.rem}],borderRadiusTopLeft:[{values:0,styleName:"border-top-left-radius",valueFormat:u.Value.rem}],borderRadiusTopRight:[{values:0,styleName:"border-top-right-radius",valueFormat:u.Value.rem}],borderRadiusBottomRight:[{values:0,styleName:"border-bottom-right-radius",valueFormat:u.Value.rem}],borderRadiusBottomLeft:[{values:0,styleName:"border-bottom-left-radius",valueFormat:u.Value.rem}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:u.Value.rem}],right:[{values:0,valueFormat:u.Value.rem}],bottom:[{values:0,valueFormat:u.Value.rem}],left:[{values:0,valueFormat:u.Value.rem}],inset:[{values:0,valueFormat:u.Value.rem}],boxSizing:[{values:["border-box","content-box"],styleName:"box-sizing"}],contentVisibility:[{values:["visible","hidden"],styleName:"content-visibility"}],cursor:[{values:["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]}],display:[{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]}],inline:[{values:[!0],styleName:"display",valueFormat:()=>"inline-block"}],jc:[{styleName:"justify-content",values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]}],ai:[{styleName:"align-items",values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]}],alignContent:[{styleName:"align-content",values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]}],flex1:[{styleName:"flex",values:[!0],valueFormat:()=>"1"}],d:[{styleName:"flex-direction",values:["row","row-reverse","column","column-reverse"]}],flexWrap:[{styleName:"flex-wrap",values:["nowrap","wrap","wrap-reverse"]}],flexGrow:[{styleName:"flex-grow",values:0}],flexShrink:[{styleName:"flex-shrink",values:0}],alignSelf:[{styleName:"align-self",values:["auto","flex-start","flex-end","center","baseline","stretch"]}],justifySelf:[{styleName:"justify-self",values:["auto","flex-start","flex-end","center","baseline","stretch"]}],fontSize:[{styleName:"font-size",values:0,valueFormat:e=>u.Value.rem(e,void 0,16)},{styleName:"font-size",values:["inherit"]}],fontStyle:[{styleName:"font-style",values:["italic","normal","oblique"]}],fontWeight:[{styleName:"font-weight",values:[100,200,300,400,500,600,700,800,900]}],gap:[{values:0,valueFormat:u.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:u.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:u.Value.rem}],order:[{styleName:"order",values:0}],height:[{values:0,valueFormat:e=>`${e/4}rem`},{values:["fit"],valueFormat:()=>"100%"},{values:["fit-screen"],valueFormat:()=>"100vh"},{values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{values:["auto","fit-content","max-content","min-content"]}],minHeight:[{styleName:"min-height",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"min-height",values:["fit"],valueFormat:()=>"100%"},{styleName:"min-height",values:["fit-screen"],valueFormat:()=>"100vh"},{styleName:"min-height",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"min-height",values:["auto","fit-content","max-content","min-content"]}],maxHeight:[{styleName:"max-height",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"max-height",values:["fit"],valueFormat:()=>"100%"},{styleName:"max-height",values:["fit-screen"],valueFormat:()=>"100vh"},{styleName:"max-height",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"max-height",values:["auto","fit-content","max-content","min-content"]}],width:[{values:0,valueFormat:e=>`${e/4}rem`},{values:["fit"],valueFormat:()=>"100%"},{values:["fit-screen"],valueFormat:()=>"100vw"},{values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{values:["auto","fit-content","max-content","min-content"]}],minWidth:[{styleName:"min-width",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"min-width",values:["fit"],valueFormat:()=>"100%"},{styleName:"min-width",values:["fit-screen"],valueFormat:()=>"100vw"},{styleName:"min-width",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"min-width",values:["auto","fit-content","max-content","min-content"]}],maxWidth:[{styleName:"max-width",values:0,valueFormat:e=>`${e/4}rem`},{styleName:"max-width",values:["fit"],valueFormat:()=>"100%"},{styleName:"max-width",values:["fit-screen"],valueFormat:()=>"100vw"},{styleName:"max-width",values:["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],valueFormat:e=>{const[t,r]=e.split("/");return`${+t/+r*100}%`}},{styleName:"max-width",values:["auto","fit-content","max-content","min-content"]}],letterSpacing:[{styleName:"letter-spacing",values:0,valueFormat:u.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:u.Value.px},{styleName:"line-height",values:["font-size"],valueFormat:e=>"1"}],listStyle:[{styleName:"list-style",values:["square","inside","outside","none"]}],m:[{values:0,styleName:"margin",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:u.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:u.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:u.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:u.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:u.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:u.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:u.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:u.Value.rem}],objectFit:[{styleName:"object-fit",values:["fill","contain","cover","scale-down","none"]}],opacity:[{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]}],outline:[{styleName:"outline-width",values:0,valueFormat:u.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:u.Value.px}],overflow:[{values:["auto","hidden","scroll","visible"]}],overflowX:[{styleName:"overflow-x",values:["auto","hidden","scroll","visible"]}],overflowY:[{styleName:"overflow-y",values:["auto","hidden","scroll","visible"]}],pointerEvents:[{styleName:"pointer-events",values:["none","auto","all"]}],resize:[{values:["none","both","horizontal","vertical","block","inline"]}],rotate:[{values:[0,90,180,270,-90,-180,-270],valueFormat:e=>`${e}deg`}],flip:[{styleName:"scale",values:["xAxis","yAxis"],valueFormat:e=>e==="xAxis"?"-1 1":"1 -1"}],textAlign:[{styleName:"text-align",values:["left","right","center","justify"]}],textDecoration:[{styleName:"text-decoration",values:["none","underline","overline","line-through"]}],textOverflow:[{styleName:"text-overflow",values:["clip","ellipsis"]}],textTransform:[{styleName:"text-transform",values:["none","capitalize","lowercase","uppercase"]}],textWrap:[{styleName:"text-wrap",values:["wrap","nowrap","balance","pretty"]}],transition:[{styleName:"transition-property",values:["none","all"]}],transitionDuration:[{styleName:"transition-duration",values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],valueFormat:e=>`${e}ms`}],userSelect:[{styleName:"user-select",values:["none","auto","text","all"]}],visibility:[{styleName:"visibility",values:["visible","hidden","collapse"]}],whiteSpace:[{styleName:"white-space",values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]}],zIndex:[{styleName:"z-index",values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]}],gridTemplateColumns:[{styleName:"grid-template-columns",values:0,valueFormat:e=>`repeat(${e},minmax(0,1fr))`},{styleName:"grid-template-columns",values:["subgrid"]}],gridTemplateRows:[{styleName:"grid-template-rows",values:0,valueFormat:e=>`repeat(${e},minmax(0,1fr))`},{styleName:"grid-template-rows",values:["subgrid"]}],colSpan:[{styleName:"grid-column",values:0,valueFormat:e=>`span ${e}/span ${e}`},{styleName:"grid-column",values:["full-row"],valueFormat:()=>"1/-1"}],gridColumnStart:[{styleName:"grid-column-start",values:0}],gridColumnEnd:[{styleName:"grid-column-end",values:0}],gridRow:[{styleName:"grid-row",values:0,valueFormat:e=>`span ${e}/span ${e}`},{styleName:"grid-row",values:["full-column"],valueFormat:()=>"1/-1"}],gridRowStart:[{styleName:"grid-row-start",values:0}],gridRowEnd:[{styleName:"grid-row-end",values:0}],color:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],bgColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"background-color"}],borderColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"border-color"}],outlineColor:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e),styleName:"outline-color"}],fill:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],stroke:[{values:Object.keys(w.colors),valueFormat:(e,t)=>t(e)}],bgImage:[{values:["none","bg-img-checked","bg-img-indeterminate","bg-img-radio"],valueFormat:(e,t)=>t(e),styleName:"background-image"}],shadow:[{values:["small-shadow","medium-shadow","large-shadow"],valueFormat:(e,t)=>t(e),styleName:"box-shadow"}],translateX:[{values:0,valueFormat:e=>`translateX(${e/4}rem)`,styleName:"transform"}]},se={hover:":hover",focus:":focus-within",hasFocus:":has(:focus)",active:":active",valid:":user-valid",hasValid:":has(:valid)",invalid:":user-invalid",hasInvalid:":has(:user-invalid)",optional:":optional",hasChecked:":has(:checked)",hasRequired:":has(:required)",hasDisabled:":has([disabled])"},G={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]",selected:'[aria-selected="true"]'},Z={...se,...G},ie=Object.entries(Z).reduce((e,[t],r)=>(e[t]=Math.pow(2,r),e),{}),K=Object.entries(Z).reduce((e,[t])=>{const r=ie[t];return Object.entries(e).forEach(([a,i])=>{e[+a+r]=[...i,t]}),e},{0:[]}),M={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var X;(e=>{function t(n,d,o){const f={...n},y=f.props||{};return d.forEach(l=>{l in f&&(y[l]=f[l],delete f[l])}),o&&Object.entries(o).forEach(([l,v])=>{y[l]=v}),f.props=y,f}e.buildProps=t;function r(n){return!!n&&typeof n=="object"}e.isObject=r;function a(...n){return n.reduce((d,o)=>(Object.keys(o??{}).forEach(f=>{const y=d[f],l=o[f];f in G&&typeof l=="boolean"||(f in G&&Array.isArray(l)?d[f]=a(y,l[1]??{}):Array.isArray(y)&&Array.isArray(l)?d[f]=y.concat(...l):r(y)&&r(l)?d[f]=a(y,l):d[f]=l)}),d),{})}e.mergeDeep=a;function i(n,d){return n in d}e.isKeyOf=i})(X||(X={}));const $=X;class fe{constructor(){this._index=0,this._cache={}}getIdentity(t){return this._cache[t]||(this._cache[t]=this.getByIndex(this._index++)),this._cache[t]}getByIndex(t){const{first:r,next:a}=me,i=t-r.length;if(i<0)return r[t];const n=Math.floor(i/a.length),d=i-n*a.length;return this.getByIndex(n)+a[d]}}const me={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"},B={button:{styles:{display:"inline-flex",color:"white",bgColor:"violet-500",borderColor:"violet-500",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",lineHeight:20,hover:{bgColor:"violet-600",borderColor:"violet-600"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}}},textbox:{styles:{display:"inline-block",b:1,borderColor:"violet-200",bgColor:"violet-50",color:"violet-950",borderRadius:1,p:3,transition:"none",lineHeight:20,hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}}},textarea:{styles:{display:"inline-block",b:1,borderColor:"violet-200",bgColor:"violet-50",color:"violet-950",borderRadius:1,p:3,transition:"none",hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300",resize:"none"}}},checkbox:{styles:{display:"inline-block",appearance:"none",b:1,borderColor:"violet-300",borderRadius:1,p:2,cursor:"pointer",transition:"none",hover:{borderColor:"violet-500"},focus:{outline:2,outlineOffset:2,outlineColor:"violet-500"},checked:{bgColor:"violet-500",borderColor:"violet-500",bgImage:"bg-img-checked"},indeterminate:{color:"violet-500",bgImage:"bg-img-indeterminate"},disabled:{cursor:"not-allowed",bgColor:"violet-100",color:"gray-400",borderColor:"gray-300"}}},radioButton:{styles:{appearance:"none",b:1,borderColor:"violet-300",borderRadius:3,p:2,cursor:"pointer",transition:"none",hover:{borderColor:"violet-500"},focus:{outline:2,outlineOffset:2,outlineColor:"violet-500"},checked:{bgColor:"violet-500",borderColor:"violet-500",bgImage:"bg-img-radio"},disabled:{cursor:"not-allowed",bgColor:"violet-100",color:"gray-400",borderColor:"violet-200"}}},dropdown:{styles:{display:"inline-flex",ai:"center",gap:2,jc:"space-between",p:3,cursor:"pointer",bgColor:"violet-50",color:"violet-950",b:1,borderColor:"violet-200",borderRadius:1,userSelect:"none",lineHeight:20,minWidth:40,transition:"none",hover:{borderColor:"violet-300"},focus:{outline:1,borderColor:"violet-500",outlineColor:"violet-500"},disabled:{cursor:"not-allowed",bgColor:"violet-50",color:"gray-400",borderColor:"gray-300"}},children:{display:{styles:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}},items:{styles:{display:"flex",d:"column",gap:1,p:1,b:1,borderRadius:1,position:"relative",top:1,bgColor:"white",overflow:"auto",maxHeight:62,borderColor:"violet-300",color:"violet-950",shadow:"medium-shadow"}},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"}}}},unselect:{styles:{display:"flex",width:"fit",p:3,cursor:"pointer",lineHeight:20,borderRadius:1,color:"violet-400",hover:{bgColor:"violet-50"},focus:{bgColor:"violet-50"},selected:{bgColor:"violet-50",cursor:"default"}}},selectAll:{styles:{display:"flex",width:"fit",p:3,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"}}}}},P=p.createContext({themeStyles:B,theme:"",setTheme:()=>{}});function ve(e){const{clean:t,theme:r,component:a}=e,{themeStyles:i}=p.useContext(P);return p.useMemo(()=>{var o;if(t)return;const n=a==null?void 0:a.split(".");if(!n)return;const d=n.reduce((f,y,l)=>{var v;return l===0?i==null?void 0:i[y]:(v=f==null?void 0:f.children)==null?void 0:v[y]},void 0);if(d)return r?$.mergeDeep(d.styles,((o=d.themes)==null?void 0:o[r])??{}):d.styles},[a,t,r,i])}const be=new fe,ye=typeof window<"u"&&typeof window.document<"u";var le;const ne=typeof process=="object"&&((le=process.env)==null?void 0:le.NODE_ENV)==="test",ge=ye&&!ne?p.useLayoutEffect:p.useEffect,ue="_b",A="_s";function he(e,t){ge(T.flush,[e]);const r=ve(e);return p.useMemo(()=>{const a=[t?A:ue],i=r?$.mergeDeep(r,e):e;return T.addClassNames(i,a,[]),a},[e,t,r])}var T;(e=>{let t=!0,r={};function a(l,v,g,b,s){Object.entries(l).forEach(([c,m])=>{if($.isKeyOf(c,z))d(c,m,v,g,b,s);else if($.isKeyOf(c,se))a(m,v,[...g,c],b,s);else if($.isKeyOf(c,G)){if(Array.isArray(m)){const[N,F]=m;a(F,v,[...g,c],b,s)}$.isObject(m)&&a(m,v,[...g,c],b,s)}else $.isKeyOf(c,U)?a(m,v,g,c,s):$.isKeyOf(c,M)&&(typeof m=="string"?v.push(`${M[c]}-${m}`):Object.entries(m).forEach(([N,F])=>{a(F,v,[...g,M[c]],b,N)}))})}e.addClassNames=a;function i(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const l=Object.entries(z).reduce((c,[m],N)=>(c[m]=N,c),{}),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;}
 .${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],[f])=>(U[m]??0)-(U[f]??0));const b=g.reduce((m,[f,N])=>(f!=="normal"&&m.push(`@media(min-width: ${U[f]}px){`),Object.entries(N).forEach(([F,q])=>{const{__parents:ee,...de}=q,te=Object.entries(de);te.sort(([C],[R])=>l[C]-l[R]),te.forEach(([C,R])=>{R.forEach(E=>{var k,H;const h=z[C].find(V=>Array.isArray(V.values)?V.values.includes(E):typeof E==typeof V.values);if(!h)return;const j=o(C,E,+F,f),D=K[+F].map(V=>Z[V]).join(""),x=((k=h.selector)==null?void 0:k.call(h,`.${j}`,D))??`.${j}${D}`,I=Array.isArray(h.styleName)?h.styleName:[h.styleName??C],S=((H=h.valueFormat)==null?void 0:H.call(h,E,w.getVariableValue))??E;m.push(`${x}{${I.map(V=>`${V}:${S}`).join(";")}}`)})}),ee&&Object.entries(ee).forEach(([C,R])=>{const E=Object.entries(R);E.sort(([O],[h])=>l[O]-l[h]),E.forEach(([O,h])=>{h.forEach(j=>{var re,oe;const x=z[O].find(_=>Array.isArray(_.values)?_.values.includes(j):typeof j==typeof _.values);if(!x)return;const I=o(O,j,+F,f,C),[S]=K[+F],k=((re=x.selector)==null?void 0:re.call(x,`.${S}-${C}:${S} .${I}`,""))??`.${S}-${C}:${S} .${I}`,H=Array.isArray(x.styleName)?x.styleName:[x.styleName??O],V=((oe=x.valueFormat)==null?void 0:oe.call(x,j,w.getVariableValue))??j;m.push(`${k}{${H.map(_=>`${_}:${V}`).join(";")}}`)})})})}),f!=="normal"&&m.push("}"),m),[v]);b.unshift(`:root{${w.generateVariables()}}`);const i=y();i.innerHTML=b.join(""),t=!1}e.flush=s;function n(){r={}}e.clear=n;function d(l,v,g,b,i="normal",m){if(v==null)return;const f=b.reduce((F,q)=>F+ie[q],0);r[i]?r[i][f]?r[i][f][l]||(r[i][f][l]=new Set):r[i][f]={[l]:new Set}:r[i]={[f]:{[l]:new Set}},m?(r[i][f].__parents?r[i][f].__parents[m]?r[i][f].__parents[m][l]||(r[i][f].__parents[m][l]=new Set):r[i][f].__parents[m]={[l]:new Set}:r[i][f].__parents={[m]:{[l]:new Set}},r[i][f].__parents[m][l].has(v)||(r[i][f].__parents[m][l].add(v),t=!0)):r[i][f][l].has(v)||(r[i][f][l].add(v),t=!0);const N=o(l,v,f,i,m);g.push(N)}function o(l,v,g,b,i){const m=K[g],f=`${b==="normal"?"":`${b}-`}${m.map(N=>`${N}-`).join("")}${i?`${i}-`:""}${l}-${v}`;return ne?f:be.getIdentity(f)}const c="crono-styles";function y(){let l=document.getElementById(c);return l||(l=document.createElement("style"),l.setAttribute("id",c),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(T||(T={}));exports.StylesContext=void 0;(e=>{e.flush=T.flush,e.clear=T.clear})(exports.StylesContext||(exports.StylesContext={}));var Y;(e=>{function t(r,a,s){return w.setUserVariables(r),Object.entries(a).forEach(([n,d])=>{z[n]=d}),Object.entries(s).forEach(([n,d])=>{const o=z[n];z[n]=o?[...d,...o]:d}),{extendedProps:a,extendedPropTypes:s}}e.extend=t})(Y||(Y={}));const pe=Y;function L(e){const{children:t,theme:r}=e,[a,s]=p.useState(r),n=p.useMemo(()=>{var l;const d=(l=L.userThemes)==null?void 0:l[a];if(!d)return B;const{components:o,...c}=d,y=o??{};return Object.entries(c).forEach(([v,g])=>{y[v]=g}),Object.keys(y).forEach(v=>{y[v].clean&&v in B&&delete B[v]}),$.mergeDeep(B,y)},[a]);return ce.jsx(P.Provider,{value:{themeStyles:n,theme:a,setTheme:s},children:t})}(e=>{e.userThemes=void 0;function t(a){e.userThemes=a}e.setup=t;function r(){const{theme:a,setTheme:s}=p.useContext(P);return[a,s]}e.useTheme=r})(L||(L={}));const xe=L,we={selected:"aria-selected"};var J;(e=>{function t(r,a,s){r!==void 0&&r!=null&&(s[we[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const Ne=J;Array.prototype.removeBy||(Array.prototype.removeBy=function(e){return this.filter(e)});function Fe(e=null){const[t,r]=p.useState(!1),a=p.useRef(null);return p.useEffect(()=>{function s(d){const o=e??a.current;(o==null?void 0:o.contains(d.target))===!1&&r(!1)}function n(d){d.key==="Escape"&&r(!1)}return t&&(window.addEventListener("mousedown",s),window.addEventListener("keydown",n)),()=>{window.removeEventListener("mousedown",s),window.removeEventListener("keydown",n)}},[e,t]),[t,r,a]}function $e(){return p.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}var Q;(e=>{function t(a){const s=Array.from(a.elements).reduce((n,d)=>{const o=d.name;return o&&(n[o]||(n[o]=[]),n[o].push(d)),n},{});return Object.entries(s).reduce((n,[d,o])=>{if(o.length===1){const c=o[0];r(n,d,c.type==="checkbox"||c.type==="radio"?c.checked:c.value)}else{const c=o.reduce((y,l)=>(l.type==="checkbox"||l.type==="radio"?l.checked&&y.push(l.value):y.push(l.value),y),[]);r(n,d,c)}return n},{})}e.getFormEntries=t;function r(a,s,n){if(s.includes(".")){const d=s.split(".");let o=a;d.forEach((c,y)=>{if(d.length>y+1){const l=c.match(/^(.+)\[(\d)\]$/);if(l){const[,v,g]=l;o[v]=o[v]||[],o[v][g]=o[v][g]||{},o=o[v][g]}else o[c]=o[c]||{},o=o[c]}else o[c]=n})}else a[s]=n}})(Q||(Q={}));const Ce=Q;exports.BoxExtends=pe;exports.BoxUtils=Ne;exports.FormUtils=Ce;exports.ObjectUtils=$;exports.Theme=xe;exports.Variables=w;exports.classNames=ae;exports.usePortalContainer=$e;exports.useStyles=he;exports.useVisibility=Fe;
+`,g=Object.entries(r);g.sort(([c],[m])=>(U[c]??0)-(U[m]??0));const b=g.reduce((c,[m,N])=>(m!=="normal"&&c.push(`@media(min-width: ${U[m]}px){`),Object.entries(N).forEach(([F,q])=>{const{__parents:ee,...de}=q,te=Object.entries(de);te.sort(([C],[R])=>l[C]-l[R]),te.forEach(([C,R])=>{R.forEach(E=>{var I,H;const h=z[C].find(V=>Array.isArray(V.values)?V.values.includes(E):typeof E==typeof V.values);if(!h)return;const j=o(C,E,+F,m),D=K[+F].map(V=>Z[V]).join(""),x=((I=h.selector)==null?void 0:I.call(h,`.${j}`,D))??`.${j}${D}`,k=Array.isArray(h.styleName)?h.styleName:[h.styleName??C],S=((H=h.valueFormat)==null?void 0:H.call(h,E,w.getVariableValue))??E;c.push(`${x}{${k.map(V=>`${V}:${S}`).join(";")}}`)})}),ee&&Object.entries(ee).forEach(([C,R])=>{const E=Object.entries(R);E.sort(([O],[h])=>l[O]-l[h]),E.forEach(([O,h])=>{h.forEach(j=>{var re,oe;const x=z[O].find(_=>Array.isArray(_.values)?_.values.includes(j):typeof j==typeof _.values);if(!x)return;const k=o(O,j,+F,m,C),[S]=K[+F],I=((re=x.selector)==null?void 0:re.call(x,`.${S}-${C}:${S} .${k}`,""))??`.${S}-${C}:${S} .${k}`,H=Array.isArray(x.styleName)?x.styleName:[x.styleName??O],V=((oe=x.valueFormat)==null?void 0:oe.call(x,j,w.getVariableValue))??j;c.push(`${I}{${H.map(_=>`${_}:${V}`).join(";")}}`)})})})}),m!=="normal"&&c.push("}"),c),[v]);b.unshift(`:root{${w.generateVariables()}}`);const s=y();s.innerHTML=b.join(""),t=!1}e.flush=i;function n(){r={}}e.clear=n;function d(l,v,g,b,s="normal",c){if(v==null)return;const m=b.reduce((F,q)=>F+ie[q],0);r[s]?r[s][m]?r[s][m][l]||(r[s][m][l]=new Set):r[s][m]={[l]:new Set}:r[s]={[m]:{[l]:new Set}},c?(r[s][m].__parents?r[s][m].__parents[c]?r[s][m].__parents[c][l]||(r[s][m].__parents[c][l]=new Set):r[s][m].__parents[c]={[l]:new Set}:r[s][m].__parents={[c]:{[l]:new Set}},r[s][m].__parents[c][l].has(v)||(r[s][m].__parents[c][l].add(v),t=!0)):r[s][m][l].has(v)||(r[s][m][l].add(v),t=!0);const N=o(l,v,m,s,c);g.push(N)}function o(l,v,g,b,s){const c=K[g],m=`${b==="normal"?"":`${b}-`}${c.map(N=>`${N}-`).join("")}${s?`${s}-`:""}${l}-${v}`;return ne?m:be.getIdentity(m)}const f="crono-styles";function y(){let l=document.getElementById(f);return l||(l=document.createElement("style"),l.setAttribute("id",f),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(T||(T={}));exports.StylesContext=void 0;(e=>{e.flush=T.flush,e.clear=T.clear})(exports.StylesContext||(exports.StylesContext={}));var Y;(e=>{function t(r,a,i){return w.setUserVariables(r),Object.entries(a).forEach(([n,d])=>{z[n]=d}),Object.entries(i).forEach(([n,d])=>{const o=z[n];z[n]=o?[...d,...o]:d}),{extendedProps:a,extendedPropTypes:i}}e.extend=t})(Y||(Y={}));const pe=Y;function L(e){const{children:t,theme:r}=e,[a,i]=p.useState(r),n=p.useMemo(()=>{var l;const d=(l=L.userThemes)==null?void 0:l[a];if(!d)return B;const{components:o,...f}=d,y=o??{};return Object.entries(f).forEach(([v,g])=>{y[v]=g}),Object.keys(y).forEach(v=>{y[v].clean&&v in B&&delete B[v]}),$.mergeDeep(B,y)},[a]);return ce.jsx(P.Provider,{value:{themeStyles:n,theme:a,setTheme:i},children:t})}(e=>{e.userThemes=void 0;function t(a){e.userThemes=a}e.setup=t;function r(){const{theme:a,setTheme:i}=p.useContext(P);return[a,i]}e.useTheme=r})(L||(L={}));const xe=L,we={selected:"aria-selected"};var J;(e=>{function t(r,a,i){r!==void 0&&r!=null&&(i[we[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const Ne=J;Array.prototype.removeBy||(Array.prototype.removeBy=function(e){return this.filter(e)});function Fe(e=null){const[t,r]=p.useState(!1),a=p.useRef(null);return p.useEffect(()=>{function i(d){const o=e??a.current;(o==null?void 0:o.contains(d.target))===!1&&r(!1)}function n(d){d.key==="Escape"&&r(!1)}return t&&(window.addEventListener("click",i),window.addEventListener("keydown",n)),()=>{window.removeEventListener("click",i),window.removeEventListener("keydown",n)}},[e,t]),[t,r,a]}function $e(){return p.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}var Q;(e=>{function t(a){const i=Array.from(a.elements).reduce((n,d)=>{const o=d.name;return o&&(n[o]||(n[o]=[]),n[o].push(d)),n},{});return Object.entries(i).reduce((n,[d,o])=>{if(o.length===1){const f=o[0];r(n,d,f.type==="checkbox"||f.type==="radio"?f.checked:f.value)}else{const f=o.reduce((y,l)=>(l.type==="checkbox"||l.type==="radio"?l.checked&&y.push(l.value):y.push(l.value),y),[]);r(n,d,f)}return n},{})}e.getFormEntries=t;function r(a,i,n){if(i.includes(".")){const d=i.split(".");let o=a;d.forEach((f,y)=>{if(d.length>y+1){const l=f.match(/^(.+)\[(\d)\]$/);if(l){const[,v,g]=l;o[v]=o[v]||[],o[v][g]=o[v][g]||{},o=o[v][g]}else o[f]=o[f]||{},o=o[f]}else o[f]=n})}else a[i]=n}})(Q||(Q={}));const Ce=Q;exports.BoxExtends=pe;exports.BoxUtils=Ne;exports.FormUtils=Ce;exports.ObjectUtils=$;exports.Theme=xe;exports.Variables=w;exports.classNames=ae;exports.usePortalContainer=$e;exports.useStyles=he;exports.useVisibility=Fe;

package/core.mjs

@@ -1,72 +1,72 @@
 import ve, { useContext as se, useMemo as L, useLayoutEffect as be, useEffect as ie, useState as ne, useRef as ye } from "react";
 import { jsx as ge } from "react/jsx-runtime";
 function he(...e) {
-  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...he(...r)), t) : (Object.entries(r).forEach(([l, s]) => {
-    s && t.push(l);
+  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...he(...r)), t) : (Object.entries(r).forEach(([l, i]) => {
+    i && t.push(l);
   }), t) : t, []);
 }
 var u;
 ((e) => {
   ((t) => {
-    function r(s, n) {
-      return `${s}${n.replace("/", "-")}`;
+    function r(i, n) {
+      return `${i}${n.replace("/", "-")}`;
     }
     t.fraction = r;
-    function l(s) {
-      return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
+    function l(i) {
+      return [`${i} path`, `${i} circle`, `${i} rect`, `${i} line`];
     }
     t.svg = l;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
-    function r(b) {
-      return `${b / 4}rem`;
+    function r(b, s, c = 4) {
+      return `${b / c}rem`;
     }
     t.rem = r;
     function l(b) {
       return `${b}px`;
     }
     t.px = l;
-    function s(b, i) {
-      const [m, f] = i.split("/");
-      return `${+m / +f * 100}%`;
+    function i(b, s) {
+      const [c, m] = s.split("/");
+      return `${+c / +m * 100}%`;
     }
-    t.fraction = s;
-    function n(b, i) {
-      switch (i) {
+    t.fraction = i;
+    function n(b, s) {
+      switch (s) {
         case "fit":
           return "100%";
         case "fit-screen":
           return b.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return i;
+          return s;
       }
     }
     t.widthHeight = n;
     function d(b) {
-      return (i, m) => `var(--${b}${m});`;
+      return (s, c) => `var(--${b}${c});`;
     }
     t.variables = d;
     function o(b) {
-      return (i, m) => `var(--${b}${m});`;
+      return (s, c) => `var(--${b}${c});`;
     }
     t.svgVariables = o;
-    function c(b, i) {
-      return `repeat(${i},minmax(0,1fr))`;
+    function f(b, s) {
+      return `repeat(${s},minmax(0,1fr))`;
     }
-    t.gridColumns = c;
-    function y(b, i) {
-      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
+    t.gridColumns = f;
+    function y(b, s) {
+      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
     t.gridColumn = y;
-    function a(b, i) {
-      return `${i}ms`;
+    function a(b, s) {
+      return `${s}ms`;
     }
     t.ms = a;
-    function v(b, i) {
-      return `${i}deg`;
+    function v(b, s) {
+      return `${s}deg`;
     }
     t.rotate = v;
-    function g(b, i) {
-      return i === "xAxis" ? "-1 1" : "1 -1";
+    function g(b, s) {
+      return s === "xAxis" ? "-1 1" : "1 -1";
     }
     t.flip = g;
   })(e.Value || (e.Value = {}));
@@ -337,12 +337,12 @@ var M;
     "large-shadow": "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px"
   }, r = {};
   let l = {};
-  function s(o) {
+  function i(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 = s;
+  e.getVariableValue = i;
   function n() {
-    return Object.entries(r).map(([o, c]) => `--${o}: ${c};`).join("");
+    return Object.entries(r).map(([o, f]) => `--${o}: ${f};`).join("");
   }
   e.generateVariables = n;
   function d(o) {
@@ -703,7 +703,7 @@ const N = M, E = {
     {
       styleName: "font-size",
       values: 0,
-      valueFormat: u.Value.px
+      valueFormat: (e) => u.Value.rem(e, void 0, 16)
     },
     {
       styleName: "font-size",
@@ -1556,8 +1556,8 @@ const N = M, E = {
 ), W = Object.entries(Z).reduce(
   (e, [t]) => {
     const r = de[t];
-    return Object.entries(e).forEach(([l, s]) => {
-      e[+l + r] = [...s, t];
+    return Object.entries(e).forEach(([l, i]) => {
+      e[+l + r] = [...i, t];
     }), e;
   },
   { 0: [] }
@@ -1581,12 +1581,12 @@ const N = M, E = {
 var X;
 ((e) => {
   function t(n, d, o) {
-    const c = { ...n }, y = c.props || {};
+    const f = { ...n }, y = f.props || {};
     return d.forEach((a) => {
-      a in c && (y[a] = c[a], delete c[a]);
+      a in f && (y[a] = f[a], delete f[a]);
     }), o && Object.entries(o).forEach(([a, v]) => {
       y[a] = v;
-    }), c.props = y, c;
+    }), f.props = y, f;
   }
   e.buildProps = t;
   function r(n) {
@@ -1594,16 +1594,16 @@ var X;
   }
   e.isObject = r;
   function l(...n) {
-    return n.reduce((d, o) => (Object.keys(o ?? {}).forEach((c) => {
-      const y = d[c], a = o[c];
-      c in U && typeof a == "boolean" || (c in U && Array.isArray(a) ? d[c] = l(y, a[1] ?? {}) : Array.isArray(y) && Array.isArray(a) ? d[c] = y.concat(...a) : r(y) && r(a) ? d[c] = l(y, a) : d[c] = a);
+    return n.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 s(n, d) {
+  function i(n, d) {
     return n in d;
   }
-  e.isKeyOf = s;
+  e.isKeyOf = i;
 })(X || (X = {}));
 const C = X;
 class pe {
@@ -1614,17 +1614,17 @@ class pe {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: r, next: l } = we, s = t - r.length;
-    if (s < 0)
+    const { first: r, next: l } = we, i = t - r.length;
+    if (i < 0)
       return r[t];
-    const n = Math.floor(s / l.length), d = s - n * l.length;
+    const n = Math.floor(i / l.length), d = i - n * l.length;
     return this.getByIndex(n) + l[d];
   }
 }
 const we = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
-}, _ = {
+}, R = {
   button: {
     styles: {
       display: "inline-flex",
@@ -1910,22 +1910,22 @@ const we = {
       }
     }
   }
-}, P = ve.createContext({ themeStyles: _, theme: "", setTheme: () => {
+}, P = ve.createContext({ themeStyles: R, theme: "", setTheme: () => {
 } });
 function xe(e) {
-  const { clean: t, theme: r, component: l } = e, { themeStyles: s } = se(P);
+  const { clean: t, theme: r, component: l } = e, { themeStyles: i } = se(P);
   return L(() => {
     var o;
     if (t) return;
     const n = l == null ? void 0 : l.split(".");
     if (!n) return;
-    const d = n.reduce((c, y, a) => {
+    const d = n.reduce((f, y, a) => {
       var v;
-      return a === 0 ? s == null ? void 0 : s[y] : (v = c == null ? void 0 : c.children) == null ? void 0 : v[y];
+      return a === 0 ? i == null ? void 0 : i[y] : (v = f == null ? void 0 : f.children) == null ? void 0 : v[y];
     }, void 0);
     if (d)
       return r ? C.mergeDeep(d.styles, ((o = d.themes) == null ? void 0 : o[r]) ?? {}) : d.styles;
-  }, [l, t, r, s]);
+  }, [l, t, r, i]);
 }
 const Ne = new pe(), Fe = typeof window < "u" && typeof window.document < "u";
 var le;
@@ -1934,35 +1934,35 @@ function Ee(e, t) {
   $e(S.flush, [e]);
   const r = xe(e);
   return L(() => {
-    const l = [t ? A : fe], s = r ? C.mergeDeep(r, e) : e;
-    return S.addClassNames(s, l, []), l;
+    const l = [t ? A : fe], i = r ? C.mergeDeep(r, e) : e;
+    return S.addClassNames(i, l, []), l;
   }, [e, t, r]);
 }
 var S;
 ((e) => {
   let t = !0, r = {};
-  function l(a, v, g, b, i) {
-    Object.entries(a).forEach(([m, f]) => {
-      if (C.isKeyOf(m, E))
-        d(m, f, v, g, b, i);
-      else if (C.isKeyOf(m, ue))
-        l(f, v, [...g, m], b, i);
-      else if (C.isKeyOf(m, U)) {
-        if (Array.isArray(f)) {
-          const [w, x] = f;
-          l(x, v, [...g, m], b, i);
+  function l(a, v, g, b, s) {
+    Object.entries(a).forEach(([c, m]) => {
+      if (C.isKeyOf(c, E))
+        d(c, m, v, g, b, s);
+      else if (C.isKeyOf(c, ue))
+        l(m, v, [...g, c], b, s);
+      else if (C.isKeyOf(c, U)) {
+        if (Array.isArray(m)) {
+          const [w, x] = m;
+          l(x, v, [...g, c], b, s);
         }
-        C.isObject(f) && l(f, v, [...g, m], b, i);
-      } else C.isKeyOf(m, H) ? l(f, v, g, m, i) : C.isKeyOf(m, q) && (typeof f == "string" ? v.push(`${q[m]}-${f}`) : Object.entries(f).forEach(([w, x]) => {
-        l(x, v, [...g, q[m]], b, w);
+        C.isObject(m) && l(m, v, [...g, c], b, s);
+      } else C.isKeyOf(c, H) ? l(m, v, g, c, s) : C.isKeyOf(c, q) && (typeof m == "string" ? v.push(`${q[c]}-${m}`) : Object.entries(m).forEach(([w, x]) => {
+        l(x, v, [...g, q[c]], b, w);
       }));
     });
   }
   e.addClassNames = l;
-  function s() {
+  function i() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const a = Object.entries(E).reduce((m, [f], w) => (m[f] = 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((c, [m], w) => (c[m] = w, c), {}), 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;}
@@ -1970,58 +1970,58 @@ a,ul{all: unset;}
 .${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], [f]) => (H[m] ?? 0) - (H[f] ?? 0)
+      ([c], [m]) => (H[c] ?? 0) - (H[m] ?? 0)
     );
     const b = g.reduce(
-      (m, [f, w]) => (f !== "normal" && m.push(`@media(min-width: ${H[f]}px){`), Object.entries(w).forEach(([x, D]) => {
+      (c, [m, w]) => (m !== "normal" && c.push(`@media(min-width: ${H[m]}px){`), Object.entries(w).forEach(([x, D]) => {
         const { __parents: ee, ...me } = D, te = Object.entries(me);
         te.sort(([F], [T]) => a[F] - a[T]), te.forEach(([F, T]) => {
           T.forEach((V) => {
-            var I, k;
+            var k, I;
             const h = E[F].find(($) => Array.isArray($.values) ? $.values.includes(V) : typeof V == typeof $.values);
             if (!h) return;
-            const z = o(F, V, +x, f), K = W[+x].map(($) => Z[$]).join(""), p = ((I = h.selector) == null ? void 0 : I.call(h, `.${z}`, K)) ?? `.${z}${K}`, B = 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}{${B.map(($) => `${$}:${O}`).join(";")}}`);
+            const z = o(F, V, +x, m), K = W[+x].map(($) => Z[$]).join(""), p = ((k = h.selector) == null ? void 0 : k.call(h, `.${z}`, K)) ?? `.${z}${K}`, B = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? F], O = ((I = h.valueFormat) == null ? void 0 : I.call(h, V, N.getVariableValue)) ?? V;
+            c.push(`${p}{${B.map(($) => `${$}:${O}`).join(";")}}`);
           });
         }), ee && Object.entries(ee).forEach(([F, T]) => {
           const V = Object.entries(T);
           V.sort(([j], [h]) => a[j] - a[h]), V.forEach(([j, h]) => {
             h.forEach((z) => {
               var re, oe;
-              const p = E[j].find((R) => Array.isArray(R.values) ? R.values.includes(z) : typeof z == typeof R.values);
+              const p = E[j].find((_) => Array.isArray(_.values) ? _.values.includes(z) : typeof z == typeof _.values);
               if (!p) return;
-              const B = o(j, z, +x, f, F), [O] = W[+x], I = ((re = p.selector) == null ? void 0 : re.call(p, `.${O}-${F}:${O} .${B}`, "")) ?? `.${O}-${F}:${O} .${B}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((oe = p.valueFormat) == null ? void 0 : oe.call(p, z, N.getVariableValue)) ?? z;
-              m.push(`${I}{${k.map((R) => `${R}:${$}`).join(";")}}`);
+              const B = o(j, z, +x, m, F), [O] = W[+x], k = ((re = p.selector) == null ? void 0 : re.call(p, `.${O}-${F}:${O} .${B}`, "")) ?? `.${O}-${F}:${O} .${B}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((oe = p.valueFormat) == null ? void 0 : oe.call(p, z, N.getVariableValue)) ?? z;
+              c.push(`${k}{${I.map((_) => `${_}:${$}`).join(";")}}`);
             });
           });
         });
-      }), f !== "normal" && m.push("}"), m),
+      }), m !== "normal" && c.push("}"), c),
       [v]
     );
     b.unshift(`:root{${N.generateVariables()}}`);
-    const i = y();
-    i.innerHTML = b.join(""), t = !1;
+    const s = y();
+    s.innerHTML = b.join(""), t = !1;
   }
-  e.flush = s;
+  e.flush = i;
   function n() {
     r = {};
   }
   e.clear = n;
-  function d(a, v, g, b, i = "normal", m) {
+  function d(a, v, g, b, s = "normal", c) {
     if (v == null) return;
-    const f = b.reduce((x, D) => x + de[D], 0);
-    r[i] ? r[i][f] ? r[i][f][a] || (r[i][f][a] = /* @__PURE__ */ new Set()) : r[i][f] = { [a]: /* @__PURE__ */ new Set() } : r[i] = { [f]: { [a]: /* @__PURE__ */ new Set() } }, m ? (r[i][f].__parents ? r[i][f].__parents[m] ? r[i][f].__parents[m][a] || (r[i][f].__parents[m][a] = /* @__PURE__ */ new Set()) : r[i][f].__parents[m] = { [a]: /* @__PURE__ */ new Set() } : r[i][f].__parents = { [m]: { [a]: /* @__PURE__ */ new Set() } }, r[i][f].__parents[m][a].has(v) || (r[i][f].__parents[m][a].add(v), t = !0)) : r[i][f][a].has(v) || (r[i][f][a].add(v), t = !0);
-    const w = o(a, v, f, i, m);
+    const m = b.reduce((x, D) => x + de[D], 0);
+    r[s] ? r[s][m] ? r[s][m][a] || (r[s][m][a] = /* @__PURE__ */ new Set()) : r[s][m] = { [a]: /* @__PURE__ */ new Set() } : r[s] = { [m]: { [a]: /* @__PURE__ */ new Set() } }, c ? (r[s][m].__parents ? r[s][m].__parents[c] ? r[s][m].__parents[c][a] || (r[s][m].__parents[c][a] = /* @__PURE__ */ new Set()) : r[s][m].__parents[c] = { [a]: /* @__PURE__ */ new Set() } : r[s][m].__parents = { [c]: { [a]: /* @__PURE__ */ new Set() } }, r[s][m].__parents[c][a].has(v) || (r[s][m].__parents[c][a].add(v), t = !0)) : r[s][m][a].has(v) || (r[s][m][a].add(v), t = !0);
+    const w = o(a, v, m, s, c);
     g.push(w);
   }
-  function o(a, v, g, b, i) {
-    const m = W[g], f = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${a}-${v}`;
-    return ce ? f : Ne.getIdentity(f);
+  function o(a, v, g, b, s) {
+    const c = W[g], m = `${b === "normal" ? "" : `${b}-`}${c.map((w) => `${w}-`).join("")}${s ? `${s}-` : ""}${a}-${v}`;
+    return ce ? m : Ne.getIdentity(m);
   }
-  const c = "crono-styles";
+  const f = "crono-styles";
   function y() {
-    let a = document.getElementById(c);
-    return a || (a = document.createElement("style"), a.setAttribute("id", c), a.setAttribute("type", "text/css"), document.head.insertBefore(a, document.head.firstChild)), a;
+    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;
   }
 })(S || (S = {}));
 var ae;
@@ -2030,30 +2030,30 @@ var ae;
 })(ae || (ae = {}));
 var Y;
 ((e) => {
-  function t(r, l, s) {
+  function t(r, l, i) {
     return N.setUserVariables(r), Object.entries(l).forEach(([n, d]) => {
       E[n] = d;
-    }), Object.entries(s).forEach(([n, d]) => {
+    }), Object.entries(i).forEach(([n, d]) => {
       const o = E[n];
       E[n] = o ? [...d, ...o] : d;
-    }), { extendedProps: l, extendedPropTypes: s };
+    }), { extendedProps: l, extendedPropTypes: i };
   }
   e.extend = t;
 })(Y || (Y = {}));
 const je = Y;
 function G(e) {
-  const { children: t, theme: r } = e, [l, s] = ne(r), n = L(() => {
+  const { children: t, theme: r } = e, [l, i] = ne(r), n = L(() => {
     var a;
     const d = (a = G.userThemes) == null ? void 0 : a[l];
-    if (!d) return _;
-    const { components: o, ...c } = d, y = o ?? {};
-    return Object.entries(c).forEach(([v, g]) => {
+    if (!d) return R;
+    const { components: o, ...f } = d, y = o ?? {};
+    return Object.entries(f).forEach(([v, g]) => {
       y[v] = g;
     }), Object.keys(y).forEach((v) => {
-      y[v].clean && v in _ && delete _[v];
-    }), C.mergeDeep(_, y);
+      y[v].clean && v in R && delete R[v];
+    }), C.mergeDeep(R, y);
   }, [l]);
-  return /* @__PURE__ */ ge(P.Provider, { value: { themeStyles: n, theme: l, setTheme: s }, children: t });
+  return /* @__PURE__ */ ge(P.Provider, { value: { themeStyles: n, theme: l, setTheme: i }, children: t });
 }
 ((e) => {
   e.userThemes = void 0;
@@ -2062,8 +2062,8 @@ function G(e) {
   }
   e.setup = t;
   function r() {
-    const { theme: l, setTheme: s } = se(P);
-    return [l, s];
+    const { theme: l, setTheme: i } = se(P);
+    return [l, i];
   }
   e.useTheme = r;
 })(G || (G = {}));
@@ -2072,8 +2072,8 @@ const Oe = G, Ce = {
 };
 var J;
 ((e) => {
-  function t(r, l, s) {
-    r !== void 0 && r != null && (s[Ce[l] ?? l] = Array.isArray(r) ? r[0] : r);
+  function t(r, l, i) {
+    r !== void 0 && r != null && (i[Ce[l] ?? l] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
 })(J || (J = {}));
@@ -2084,15 +2084,15 @@ Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
 function Se(e = null) {
   const [t, r] = ne(!1), l = ye(null);
   return ie(() => {
-    function s(d) {
+    function i(d) {
       const o = e ?? l.current;
       (o == null ? void 0 : o.contains(d.target)) === !1 && r(!1);
     }
     function n(d) {
       d.key === "Escape" && r(!1);
     }
-    return t && (window.addEventListener("mousedown", s), window.addEventListener("keydown", n)), () => {
-      window.removeEventListener("mousedown", s), window.removeEventListener("keydown", n);
+    return t && (window.addEventListener("click", i), window.addEventListener("keydown", n)), () => {
+      window.removeEventListener("click", i), window.removeEventListener("keydown", n);
     };
   }, [e, t]), [t, r, l];
 }
@@ -2106,48 +2106,48 @@ function Te() {
 var Q;
 ((e) => {
   function t(l) {
-    const s = Array.from(l.elements).reduce(
+    const i = Array.from(l.elements).reduce(
       (n, d) => {
         const o = d.name;
         return o && (n[o] || (n[o] = []), n[o].push(d)), n;
       },
       {}
     );
-    return Object.entries(s).reduce((n, [d, o]) => {
+    return Object.entries(i).reduce((n, [d, o]) => {
       if (o.length === 1) {
-        const c = o[0];
-        r(n, d, c.type === "checkbox" || c.type === "radio" ? c.checked : c.value);
+        const f = o[0];
+        r(n, d, f.type === "checkbox" || f.type === "radio" ? f.checked : f.value);
       } else {
-        const c = o.reduce((y, a) => (a.type === "checkbox" || a.type === "radio" ? a.checked && y.push(a.value) : y.push(a.value), y), []);
-        r(n, d, c);
+        const f = o.reduce((y, a) => (a.type === "checkbox" || a.type === "radio" ? a.checked && y.push(a.value) : y.push(a.value), y), []);
+        r(n, d, f);
       }
       return n;
     }, {});
   }
   e.getFormEntries = t;
-  function r(l, s, n) {
-    if (s.includes(".")) {
-      const d = s.split(".");
+  function r(l, i, n) {
+    if (i.includes(".")) {
+      const d = i.split(".");
       let o = l;
-      d.forEach((c, y) => {
+      d.forEach((f, y) => {
         if (d.length > y + 1) {
-          const a = c.match(/^(.+)\[(\d)\]$/);
+          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
-            o[c] = o[c] || {}, o = o[c];
+            o[f] = o[f] || {}, o = o[f];
         } else
-          o[c] = n;
+          o[f] = n;
       });
     } else
-      l[s] = n;
+      l[i] = n;
   }
 })(Q || (Q = {}));
-const Re = Q;
+const _e = Q;
 export {
   je as B,
-  Re as F,
+  _e as F,
   C as O,
   ae as S,
   Oe as T,

package/package.json

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