@cronocode/react-box 3.0.6 → 3.0.7

package/array.d.ts

@@ -0,0 +1,6 @@
+export {};
+declare global {
+    interface Array<T> {
+        removeBy(predicate: (value: T) => boolean): Array<T>;
+    }
+}

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime");require("react");const i=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:t,columns:s}=d;return s.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(i,{component:"dataGrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[s.map((r,o)=>n.jsx(i,{style:{gridColumn:o+1},children:r.key.toString()},r.key.toString())),((e==null?void 0:e.length)??0)===0&&n.jsx(i,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((r,o)=>{const m=t?typeof t=="function"?t(r):r[t]:o;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:s.map((h,l)=>n.jsxs(i,{style:{gridColumn:l+1},children:["tes ",l]}))},m)})})]})})}module.exports=g;
+"use strict";const n=require("react/jsx-runtime");require("react");const o=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:r,columns:i}=d;return i.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(o,{component:"dataGrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[i.map((t,s)=>n.jsx(o,{style:{gridColumn:s+1},children:t.key.toString()},s)),((e==null?void 0:e.length)??0)===0&&n.jsx(o,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((t,s)=>{const m=r?typeof r=="function"?r(t):t[r]:s;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:i.map((h,l)=>n.jsxs(o,{style:{gridColumn:l+1},children:["tes ",l]},l))},m)})})]})})}module.exports=g;

package/components/dataGrid.mjs

@@ -1,18 +1,18 @@
-import { jsx as n, jsxs as d, Fragment as g } from "react/jsx-runtime";
+import { jsx as n, jsxs as c, Fragment as h } from "react/jsx-runtime";
 import "react";
-import o from "../box.mjs";
+import i from "../box.mjs";
 import s from "./grid.mjs";
-function x(c) {
-  const { data: r, def: u } = c, { rowKey: t, columns: i } = u;
-  return i.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(o, { component: "dataGrid", children: /* @__PURE__ */ d(s, { b: 1, borderRadius: 1, children: [
-    i.map((e, l) => /* @__PURE__ */ n(o, { style: { gridColumn: l + 1 }, children: e.key.toString() }, e.key.toString())),
-    ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(o, { children: "Empty table" }),
-    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(g, { children: r == null ? void 0 : r.map((e, l) => {
-      const p = t ? typeof t == "function" ? t(e) : e[t] : l;
-      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: i.map((h, m) => /* @__PURE__ */ d(o, { style: { gridColumn: m + 1 }, children: [
+function x(d) {
+  const { data: r, def: u } = d, { rowKey: e, columns: l } = u;
+  return l.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(i, { component: "dataGrid", children: /* @__PURE__ */ c(s, { b: 1, borderRadius: 1, children: [
+    l.map((o, t) => /* @__PURE__ */ n(i, { style: { gridColumn: t + 1 }, children: o.key.toString() }, t)),
+    ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(i, { children: "Empty table" }),
+    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(h, { children: r == null ? void 0 : r.map((o, t) => {
+      const p = e ? typeof e == "function" ? e(o) : o[e] : t;
+      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: l.map((f, m) => /* @__PURE__ */ c(i, { style: { gridColumn: m + 1 }, children: [
         "tes ",
         m
-      ] })) }, p);
+      ] }, m)) }, p);
     }) })
   ] }) });
 }

package/components/dropdown.cjs

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

package/components/dropdown.d.ts

@@ -1,25 +1,25 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface DropdownItemProps<TVal> extends BoxProps {
-    value: TVal;
-    onClick?: (e: React.MouseEvent) => void;
-}
 interface Props<TVal> extends BoxProps {
     name?: string;
-    children: React.ReactElement<DropdownItemProps<TVal>> | Array<React.ReactElement<DropdownItemProps<TVal>>>;
+    defaultValue?: TVal | TVal[];
+    multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
-    onChange?: (value: TVal) => void;
-    selectedValue?: TVal;
+    onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
+}
+interface DropdownItemProps<TVal> extends BoxProps {
+    value: TVal;
+}
+interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
+    children: (selectedValues: TVal[]) => React.ReactNode;
+}
+interface DropdownType {
+    <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
+    Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
+    UnselectItem: (props: BoxProps) => React.ReactNode;
+    EmptyItem: (props: BoxProps) => React.ReactNode;
+    Display: <TVal>(props: DropdownDisplayProps<TVal>) => React.ReactNode;
 }
-declare function DropdownImpl<TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
-declare function DropdownItem<TVal>(props: DropdownItemProps<TVal>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownNullItem<TVal>(props: Omit<DropdownItemProps<TVal>, 'value'>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownNoItems<TVal>(props: Omit<DropdownItemProps<TVal>, 'value'>): import("react/jsx-runtime").JSX.Element;
-type DropdownType = typeof DropdownImpl & {
-    Item: typeof DropdownItem;
-    NullItem: typeof DropdownNullItem;
-    NoItems: typeof DropdownNoItems;
-};
 declare const Dropdown: DropdownType;
 export default Dropdown;

package/components/dropdown.mjs

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

package/core/boxStyles.d.ts

@@ -701,6 +701,14 @@ export declare const cssStyles: {
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    fill: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+    }[];
+    stroke: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+    }[];
     bgImage: {
         values: readonly ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;

package/core.cjs

@@ -1,7 +1,7 @@
-"use strict";const E=require("react");function le(...e){return e.reduce((t,r)=>r?typeof r=="string"?(t.push(r),t):Array.isArray(r)?(t.push(...le(...r)),t):(Object.entries(r).forEach(([a,d])=>{d&&t.push(a)}),t):t,[])}var n;(e=>{(t=>{function r(d,s){return`${d}${s.replace("/","-")}`}t.fraction=r;function a(d){return[`${d} path`,`${d} circle`,`${d} rect`,`${d} 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 d(b,i){const[m,c]=i.split("/");return`${+m/+c*100}%`}t.fraction=d;function s(b,i){switch(i){case"fit":return"100%";case"fit-screen":return b.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return i}}t.widthHeight=s;function f(b){return(i,m)=>`var(--${b}${m});`}t.variables=f;function o(b){return(i,m)=>`var(--${b}${m});`}t.svgVariables=o;function u(b,i){return`repeat(${i},minmax(0,1fr))`}t.gridColumns=u;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={}))})(n||(n={}));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>")}")`},r={};let a={};function d(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=d;function s(){return Object.entries(r).map(([o,u])=>`--${o}: ${u};`).join("")}e.generateVariables=s;function f(o){a=o}e.setUserVariables=f})(W||(W={}));const C=W,j={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:n.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:n.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:n.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:n.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:n.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:n.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:n.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:n.Value.rem}],borderRadiusTop:[{values:0,styleName:["border-top-left-radius","border-top-right-radius"],valueFormat:n.Value.rem}],borderRadiusRight:[{values:0,styleName:["border-top-right-radius","border-bottom-right-radius"],valueFormat:n.Value.rem}],borderRadiusBottom:[{values:0,styleName:["border-bottom-left-radius","border-bottom-right-radius"],valueFormat:n.Value.rem}],borderRadiusLeft:[{values:0,styleName:["border-top-left-radius","border-bottom-left-radius"],valueFormat:n.Value.rem}],borderRadiusTopLeft:[{values:0,styleName:"border-top-left-radius",valueFormat:n.Value.rem}],borderRadiusTopRight:[{values:0,styleName:"border-top-right-radius",valueFormat:n.Value.rem}],borderRadiusBottomRight:[{values:0,styleName:"border-bottom-right-radius",valueFormat:n.Value.rem}],borderRadiusBottomLeft:[{values:0,styleName:"border-bottom-left-radius",valueFormat:n.Value.rem}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:n.Value.rem}],right:[{values:0,valueFormat:n.Value.rem}],bottom:[{values:0,valueFormat:n.Value.rem}],left:[{values:0,valueFormat:n.Value.rem}],inset:[{values:0,valueFormat:n.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:n.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:n.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:n.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:n.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:n.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:n.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:n.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:n.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:n.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:n.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:n.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:n.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:n.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:n.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:n.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:n.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(C.colors),valueFormat:(e,t)=>t(e)}],bgColor:[{values:Object.keys(C.colors),valueFormat:(e,t)=>t(e),styleName:"background-color"}],borderColor:[{values:Object.keys(C.colors),valueFormat:(e,t)=>t(e),styleName:"border-color"}],outlineColor:[{values:Object.keys(C.colors),valueFormat:(e,t)=>t(e),styleName:"outline-color"}],bgImage:[{values:["none","bg-img-checked","bg-img-indeterminate","bg-img-radio"],valueFormat:(e,t)=>t(e),styleName:"background-image"}]},ae={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])"},L={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]",selected:'[aria-selected="true"]'},Z={...ae,...L},se=Object.entries(Z).reduce((e,[t],r)=>(e[t]=Math.pow(2,r),e),{}),q=Object.entries(Z).reduce((e,[t])=>{const r=se[t];return Object.entries(e).forEach(([a,d])=>{e[+a+r]=[...d,t]}),e},{0:[]}),K={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var M;(e=>{function t(s,f,o){const u={...s},y=u.props||{};return f.forEach(l=>{l in u&&(y[l]=u[l],delete u[l])}),o&&Object.entries(o).forEach(([l,v])=>{y[l]=v}),u.props=y,u}e.buildProps=t;function r(s){return!!s&&typeof s=="object"}e.isObject=r;function a(...s){return s.reduce((f,o)=>(Object.keys(o??{}).forEach(u=>{const y=f[u],l=o[u];u in L&&typeof l=="boolean"||(u in L&&Array.isArray(l)?f[u]=a(y,l[1]??{}):Array.isArray(y)&&Array.isArray(l)?f[u]=y.concat(...l):r(y)&&r(l)?f[u]=a(y,l):f[u]=l)}),f),{})}e.mergeDeep=a;function d(s,f){return s in f}e.isKeyOf=d})(M||(M={}));const N=M;class de{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}=ce,d=t-r.length;if(d<0)return r[t];const s=Math.floor(d/a.length),f=d-s*a.length;return this.getByIndex(s)+a[f]}}const ce={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var T;(e=>{e.components={}})(T||(T={}));function fe(e){const{clean:t,theme:r,component:a}=e;return E.useMemo(()=>{var f;if(t)return;const d=a==null?void 0:a.split(".");if(!d)return;const s=d.reduce((o,u,y)=>{var l,v;return y===0?(l=T.components)==null?void 0:l[u]:(v=o==null?void 0:o.children)==null?void 0:v[u]},void 0);if(s)return r?N.mergeDeep(s.styles,((f=s.themes)==null?void 0:f[r])??{}):s.styles},[a,t,r])}const me=new de,ve=typeof window<"u"&&typeof window.document<"u";var oe;const ie=typeof process=="object"&&((oe=process.env)==null?void 0:oe.NODE_ENV)==="test",be=ve&&!ie?E.useLayoutEffect:E.useEffect,ne="_b",A="_s";function ye(e,t){be(_.flush,[e]);const r=fe(e);return E.useMemo(()=>{const a=[t?A:ne],d=r?N.mergeDeep(r,e):e;return _.addClassNames(d,a,[]),a},[e,t,r])}var _;(e=>{let t=!0,r={};function a(l,v,g,b,i){Object.entries(l).forEach(([m,c])=>{if(N.isKeyOf(m,j))f(m,c,v,g,b,i);else if(N.isKeyOf(m,ae))a(c,v,[...g,m],b,i);else if(N.isKeyOf(m,L)){if(Array.isArray(c)){const[w,x]=c;a(x,v,[...g,m],b,i)}N.isObject(c)&&a(c,v,[...g,m],b,i)}else N.isKeyOf(m,U)?a(c,v,g,m,i):N.isKeyOf(m,K)&&(typeof c=="string"?v.push(`${K[m]}-${c}`):Object.entries(c).forEach(([w,x])=>{a(x,v,[...g,K[m]],b,w)}))})}e.addClassNames=a;function d(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const l=Object.entries(j).reduce((m,[c],w)=>(m[c]=w,m),{}),v=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
+"use strict";const E=require("react");function le(...e){return e.reduce((t,r)=>r?typeof r=="string"?(t.push(r),t):Array.isArray(r)?(t.push(...le(...r)),t):(Object.entries(r).forEach(([a,u])=>{u&&t.push(a)}),t):t,[])}var n;(e=>{(t=>{function r(u,s){return`${u}${s.replace("/","-")}`}t.fraction=r;function a(u){return[`${u} path`,`${u} circle`,`${u} rect`,`${u} 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 u(b,i){const[m,d]=i.split("/");return`${+m/+d*100}%`}t.fraction=u;function s(b,i){switch(i){case"fit":return"100%";case"fit-screen":return b.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return i}}t.widthHeight=s;function c(b){return(i,m)=>`var(--${b}${m});`}t.variables=c;function o(b){return(i,m)=>`var(--${b}${m});`}t.svgVariables=o;function f(b,i){return`repeat(${i},minmax(0,1fr))`}t.gridColumns=f;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={}))})(n||(n={}));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>")}")`},r={};let a={};function u(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=u;function s(){return Object.entries(r).map(([o,f])=>`--${o}: ${f};`).join("")}e.generateVariables=s;function c(o){a=o}e.setUserVariables=c})(W||(W={}));const w=W,j={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:n.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:n.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:n.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:n.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:n.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:n.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:n.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:n.Value.rem}],borderRadiusTop:[{values:0,styleName:["border-top-left-radius","border-top-right-radius"],valueFormat:n.Value.rem}],borderRadiusRight:[{values:0,styleName:["border-top-right-radius","border-bottom-right-radius"],valueFormat:n.Value.rem}],borderRadiusBottom:[{values:0,styleName:["border-bottom-left-radius","border-bottom-right-radius"],valueFormat:n.Value.rem}],borderRadiusLeft:[{values:0,styleName:["border-top-left-radius","border-bottom-left-radius"],valueFormat:n.Value.rem}],borderRadiusTopLeft:[{values:0,styleName:"border-top-left-radius",valueFormat:n.Value.rem}],borderRadiusTopRight:[{values:0,styleName:"border-top-right-radius",valueFormat:n.Value.rem}],borderRadiusBottomRight:[{values:0,styleName:"border-bottom-right-radius",valueFormat:n.Value.rem}],borderRadiusBottomLeft:[{values:0,styleName:"border-bottom-left-radius",valueFormat:n.Value.rem}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:n.Value.rem}],right:[{values:0,valueFormat:n.Value.rem}],bottom:[{values:0,valueFormat:n.Value.rem}],left:[{values:0,valueFormat:n.Value.rem}],inset:[{values:0,valueFormat:n.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:n.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:n.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:n.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:n.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:n.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:n.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:n.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:n.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:n.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:n.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:n.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:n.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:n.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:n.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:n.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:n.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:n.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"}]},ae={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={...ae,...G},se=Object.entries(Z).reduce((e,[t],r)=>(e[t]=Math.pow(2,r),e),{}),q=Object.entries(Z).reduce((e,[t])=>{const r=se[t];return Object.entries(e).forEach(([a,u])=>{e[+a+r]=[...u,t]}),e},{0:[]}),K={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var M;(e=>{function t(s,c,o){const f={...s},y=f.props||{};return c.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(s){return!!s&&typeof s=="object"}e.isObject=r;function a(...s){return s.reduce((c,o)=>(Object.keys(o??{}).forEach(f=>{const y=c[f],l=o[f];f in G&&typeof l=="boolean"||(f in G&&Array.isArray(l)?c[f]=a(y,l[1]??{}):Array.isArray(y)&&Array.isArray(l)?c[f]=y.concat(...l):r(y)&&r(l)?c[f]=a(y,l):c[f]=l)}),c),{})}e.mergeDeep=a;function u(s,c){return s in c}e.isKeyOf=u})(M||(M={}));const F=M;class ce{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}=de,u=t-r.length;if(u<0)return r[t];const s=Math.floor(u/a.length),c=u-s*a.length;return this.getByIndex(s)+a[c]}}const de={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var I;(e=>{e.components={}})(I||(I={}));function fe(e){const{clean:t,theme:r,component:a}=e;return E.useMemo(()=>{var c;if(t)return;const u=a==null?void 0:a.split(".");if(!u)return;const s=u.reduce((o,f,y)=>{var l,v;return y===0?(l=I.components)==null?void 0:l[f]:(v=o==null?void 0:o.children)==null?void 0:v[f]},void 0);if(s)return r?F.mergeDeep(s.styles,((c=s.themes)==null?void 0:c[r])??{}):s.styles},[a,t,r])}const me=new ce,ve=typeof window<"u"&&typeof window.document<"u";var oe;const ie=typeof process=="object"&&((oe=process.env)==null?void 0:oe.NODE_ENV)==="test",be=ve&&!ie?E.useLayoutEffect:E.useEffect,ne="_b",S="_s";function ye(e,t){be(_.flush,[e]);const r=fe(e);return E.useMemo(()=>{const a=[t?S:ne],u=r?F.mergeDeep(r,e):e;return _.addClassNames(u,a,[]),a},[e,t,r])}var _;(e=>{let t=!0,r={};function a(l,v,g,b,i){Object.entries(l).forEach(([m,d])=>{if(F.isKeyOf(m,j))c(m,d,v,g,b,i);else if(F.isKeyOf(m,ae))a(d,v,[...g,m],b,i);else if(F.isKeyOf(m,G)){if(Array.isArray(d)){const[x,N]=d;a(N,v,[...g,m],b,i)}F.isObject(d)&&a(d,v,[...g,m],b,i)}else F.isKeyOf(m,U)?a(d,v,g,m,i):F.isKeyOf(m,K)&&(typeof d=="string"?v.push(`${K[m]}-${d}`):Object.entries(d).forEach(([x,N])=>{a(N,v,[...g,K[m]],b,x)}))})}e.addClassNames=a;function u(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const l=Object.entries(j).reduce((m,[d],x)=>(m[d]=x,m),{}),v=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${ne}{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],[c])=>(U[m]??0)-(U[c]??0));const b=g.reduce((m,[c,w])=>(c!=="normal"&&m.push(`@media(min-width: ${U[c]}px){`),Object.entries(w).forEach(([x,G])=>{const{__parents:P,...ue}=G,ee=Object.entries(ue);ee.sort(([F],[R])=>l[F]-l[R]),ee.forEach(([F,R])=>{R.forEach(V=>{var H,k;const h=j[F].find($=>Array.isArray($.values)?$.values.includes(V):typeof V==typeof $.values);if(!h)return;const z=o(F,V,+x,c),D=q[+x].map($=>Z[$]).join(""),p=((H=h.selector)==null?void 0:H.call(h,`.${z}`,D))??`.${z}${D}`,B=Array.isArray(h.styleName)?h.styleName:[h.styleName??F],S=((k=h.valueFormat)==null?void 0:k.call(h,V,C.getVariableValue))??V;m.push(`${p}{${B.map($=>`${$}:${S}`).join(";")}}`)})}),P&&Object.entries(P).forEach(([F,R])=>{const V=Object.entries(R);V.sort(([O],[h])=>l[O]-l[h]),V.forEach(([O,h])=>{h.forEach(z=>{var te,re;const p=j[O].find(I=>Array.isArray(I.values)?I.values.includes(z):typeof z==typeof I.values);if(!p)return;const B=o(O,z,+x,c,F),[S]=q[+x],H=((te=p.selector)==null?void 0:te.call(p,`.${S}-${F}:${S} .${B}`,""))??`.${S}-${F}:${S} .${B}`,k=Array.isArray(p.styleName)?p.styleName:[p.styleName??O],$=((re=p.valueFormat)==null?void 0:re.call(p,z,C.getVariableValue))??z;m.push(`${H}{${k.map(I=>`${I}:${$}`).join(";")}}`)})})})}),c!=="normal"&&m.push("}"),m),[v]);b.unshift(`:root{${C.generateVariables()}}`);const i=y();i.innerHTML=b.join(""),t=!1}e.flush=d;function s(){r={}}e.clear=s;function f(l,v,g,b,i="normal",m){if(v==null)return;const c=b.reduce((x,G)=>x+se[G],0);r[i]?r[i][c]?r[i][c][l]||(r[i][c][l]=new Set):r[i][c]={[l]:new Set}:r[i]={[c]:{[l]:new Set}},m?(r[i][c].__parents?r[i][c].__parents[m]?r[i][c].__parents[m][l]||(r[i][c].__parents[m][l]=new Set):r[i][c].__parents[m]={[l]:new Set}:r[i][c].__parents={[m]:{[l]:new Set}},r[i][c].__parents[m][l].has(v)||(r[i][c].__parents[m][l].add(v),t=!0)):r[i][c][l].has(v)||(r[i][c][l].add(v),t=!0);const w=o(l,v,c,i,m);g.push(w)}function o(l,v,g,b,i){const m=q[g],c=`${b==="normal"?"":`${b}-`}${m.map(w=>`${w}-`).join("")}${i?`${i}-`:""}${l}-${v}`;return ie?c:me.getIdentity(c)}const u="crono-styles";function y(){let l=document.getElementById(u);return l||(l=document.createElement("style"),l.setAttribute("id",u),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(_||(_={}));exports.StylesContext=void 0;(e=>{e.flush=_.flush,e.clear=_.clear})(exports.StylesContext||(exports.StylesContext={}));var X;(e=>{function t(r,a,d){return C.setUserVariables(r),Object.entries(a).forEach(([s,f])=>{j[s]=f}),Object.entries(d).forEach(([s,f])=>{const o=j[s];j[s]=o?[...f,...o]:f}),{extendedProps:a,extendedPropTypes:d}}e.extend=t})(X||(X={}));const ge=X;var Y;(e=>{const t={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:{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"}},item:{styles:{display:"flex",width:"fit",p:3,cursor:"pointer",lineHeight:20,borderRadius:1,hover:{bgColor:"violet-50"},focus:{bgColor:"violet-50"},selected:{bgColor:"violet-50",cursor:"default"}}},nullItem:{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"}}},noItems:{styles:{display:"flex",width:"fit",p:3,cursor:"default",lineHeight:20,borderRadius:1,color:"violet-400"}}}}};function r(a){const{components:d,...s}=a,f=d??{};Object.entries(s).forEach(([o,u])=>{f[o]=u}),T.components=N.mergeDeep(t,f)}e.setup=r,T.components={...t}})(Y||(Y={}));const he=Y,pe={selected:"aria-selected"};var J;(e=>{function t(r,a,d){r!==void 0&&r!=null&&(d[pe[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const we=J;function xe(){return E.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}function Ne(e=null){const[t,r]=E.useState(!1),a=E.useRef(null);return E.useEffect(()=>{function d(o){const u=e??a.current;(u==null?void 0:u.contains(o.target))===!1&&r(!1)}function s(){r(!1)}function f(o){o.key==="Escape"&&r(!1)}return t&&(window.addEventListener("mousedown",d),window.addEventListener("resize",s),window.addEventListener("keydown",f)),()=>{window.removeEventListener("mousedown",d),window.removeEventListener("resize",s),window.removeEventListener("keydown",f)}},[e,t]),[t,r,a]}var Q;(e=>{function t(a){const d=Array.from(a.elements).reduce((s,f)=>{const o=f.name;return o&&(s[o]||(s[o]=[]),s[o].push(f)),s},{});return Object.entries(d).reduce((s,[f,o])=>{if(o.length===1){const u=o[0];r(s,f,u.type==="checkbox"||u.type==="radio"?u.checked:u.value)}else{const u=o.reduce((y,l)=>(l.type==="checkbox"||l.type==="radio"?l.checked&&y.push(l.value):y.push(l.value),y),[]);r(s,f,u)}return s},{})}e.getFormEntries=t;function r(a,d,s){if(d.includes(".")){const f=d.split(".");let o=a;f.forEach((u,y)=>{if(f.length>y+1){const l=u.match(/^(.+)\[(\d)\]$/);if(l){const[,v,g]=l;o[v]=o[v]||[],o[v][g]=o[v][g]||{},o=o[v][g]}else o[u]=o[u]||{},o=o[u]}else o[u]=s})}else a[d]=s}})(Q||(Q={}));const Fe=Q;exports.BoxExtends=ge;exports.BoxUtils=we;exports.FormUtils=Fe;exports.ObjectUtils=N;exports.Theme=he;exports.Variables=C;exports.classNames=le;exports.usePortalContainer=xe;exports.useStyles=ye;exports.useVisibility=Ne;
+.${S}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${S} path,.${S} circle,.${S} rect,.${S} line {transition: all var(--svgTransitionTime);}
+`,g=Object.entries(r);g.sort(([m],[d])=>(U[m]??0)-(U[d]??0));const b=g.reduce((m,[d,x])=>(d!=="normal"&&m.push(`@media(min-width: ${U[d]}px){`),Object.entries(x).forEach(([N,L])=>{const{__parents:P,...ue}=L,ee=Object.entries(ue);ee.sort(([$],[R])=>l[$]-l[R]),ee.forEach(([$,R])=>{R.forEach(V=>{var k,H;const h=j[$].find(C=>Array.isArray(C.values)?C.values.includes(V):typeof V==typeof C.values);if(!h)return;const z=o($,V,+N,d),D=q[+N].map(C=>Z[C]).join(""),p=((k=h.selector)==null?void 0:k.call(h,`.${z}`,D))??`.${z}${D}`,T=Array.isArray(h.styleName)?h.styleName:[h.styleName??$],A=((H=h.valueFormat)==null?void 0:H.call(h,V,w.getVariableValue))??V;m.push(`${p}{${T.map(C=>`${C}:${A}`).join(";")}}`)})}),P&&Object.entries(P).forEach(([$,R])=>{const V=Object.entries(R);V.sort(([O],[h])=>l[O]-l[h]),V.forEach(([O,h])=>{h.forEach(z=>{var te,re;const p=j[O].find(B=>Array.isArray(B.values)?B.values.includes(z):typeof z==typeof B.values);if(!p)return;const T=o(O,z,+N,d,$),[A]=q[+N],k=((te=p.selector)==null?void 0:te.call(p,`.${A}-${$}:${A} .${T}`,""))??`.${A}-${$}:${A} .${T}`,H=Array.isArray(p.styleName)?p.styleName:[p.styleName??O],C=((re=p.valueFormat)==null?void 0:re.call(p,z,w.getVariableValue))??z;m.push(`${k}{${H.map(B=>`${B}:${C}`).join(";")}}`)})})})}),d!=="normal"&&m.push("}"),m),[v]);b.unshift(`:root{${w.generateVariables()}}`);const i=y();i.innerHTML=b.join(""),t=!1}e.flush=u;function s(){r={}}e.clear=s;function c(l,v,g,b,i="normal",m){if(v==null)return;const d=b.reduce((N,L)=>N+se[L],0);r[i]?r[i][d]?r[i][d][l]||(r[i][d][l]=new Set):r[i][d]={[l]:new Set}:r[i]={[d]:{[l]:new Set}},m?(r[i][d].__parents?r[i][d].__parents[m]?r[i][d].__parents[m][l]||(r[i][d].__parents[m][l]=new Set):r[i][d].__parents[m]={[l]:new Set}:r[i][d].__parents={[m]:{[l]:new Set}},r[i][d].__parents[m][l].has(v)||(r[i][d].__parents[m][l].add(v),t=!0)):r[i][d][l].has(v)||(r[i][d][l].add(v),t=!0);const x=o(l,v,d,i,m);g.push(x)}function o(l,v,g,b,i){const m=q[g],d=`${b==="normal"?"":`${b}-`}${m.map(x=>`${x}-`).join("")}${i?`${i}-`:""}${l}-${v}`;return ie?d:me.getIdentity(d)}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}})(_||(_={}));exports.StylesContext=void 0;(e=>{e.flush=_.flush,e.clear=_.clear})(exports.StylesContext||(exports.StylesContext={}));var X;(e=>{function t(r,a,u){return w.setUserVariables(r),Object.entries(a).forEach(([s,c])=>{j[s]=c}),Object.entries(u).forEach(([s,c])=>{const o=j[s];j[s]=o?[...c,...o]:c}),{extendedProps:a,extendedPropTypes:u}}e.extend=t})(X||(X={}));const ge=X;var Y;(e=>{const t={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:{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"}},item:{styles:{display:"flex",width:"fit",p:3,cursor:"pointer",borderRadius:1,hover:{bgColor:"gray-100"},focus:{bgColor:"violet-50"},selected:{bgColor:"violet-50",cursor:"default",hover:{bgColor:"violet-100"}}},themes:{multiple:{selected:{cursor:"pointer"}}}},unselectItem:{styles:{display:"flex",width:"fit",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"}}}}};function r(a){const{components:u,...s}=a,c=u??{};Object.entries(s).forEach(([o,f])=>{c[o]=f}),I.components=F.mergeDeep(t,c)}e.setup=r,I.components={...t}})(Y||(Y={}));const he=Y,pe={selected:"aria-selected"};var J;(e=>{function t(r,a,u){r!==void 0&&r!=null&&(u[pe[a]??a]=Array.isArray(r)?r[0]:r)}e.assignBooleanProp=t})(J||(J={}));const we=J;Array.prototype.removeBy||(Array.prototype.removeBy=function(e){return this.filter(e)});function xe(e=null){const[t,r]=E.useState(!1),a=E.useRef(null);return E.useEffect(()=>{function u(c){const o=e??a.current;(o==null?void 0:o.contains(c.target))===!1&&r(!1)}function s(c){c.key==="Escape"&&r(!1)}return t&&(window.addEventListener("mousedown",u),window.addEventListener("keydown",s)),()=>{window.removeEventListener("mousedown",u),window.removeEventListener("keydown",s)}},[e,t]),[t,r,a]}function Ne(){return E.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 u=Array.from(a.elements).reduce((s,c)=>{const o=c.name;return o&&(s[o]||(s[o]=[]),s[o].push(c)),s},{});return Object.entries(u).reduce((s,[c,o])=>{if(o.length===1){const f=o[0];r(s,c,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(s,c,f)}return s},{})}e.getFormEntries=t;function r(a,u,s){if(u.includes(".")){const c=u.split(".");let o=a;c.forEach((f,y)=>{if(c.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]=s})}else a[u]=s}})(Q||(Q={}));const Fe=Q;exports.BoxExtends=ge;exports.BoxUtils=we;exports.FormUtils=Fe;exports.ObjectUtils=F;exports.Theme=he;exports.Variables=w;exports.classNames=le;exports.usePortalContainer=Ne;exports.useStyles=ye;exports.useVisibility=xe;

package/core.mjs

@@ -1,18 +1,18 @@
 import { useMemo as Q, useLayoutEffect as ce, useEffect as le, useState as fe, useRef as me } from "react";
 function ve(...e) {
-  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ve(...r)), t) : (Object.entries(r).forEach(([l, d]) => {
-    d && t.push(l);
+  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ve(...r)), t) : (Object.entries(r).forEach(([l, u]) => {
+    u && t.push(l);
   }), t) : t, []);
 }
 var n;
 ((e) => {
   ((t) => {
-    function r(d, s) {
-      return `${d}${s.replace("/", "-")}`;
+    function r(u, s) {
+      return `${u}${s.replace("/", "-")}`;
     }
     t.fraction = r;
-    function l(d) {
-      return [`${d} path`, `${d} circle`, `${d} rect`, `${d} line`];
+    function l(u) {
+      return [`${u} path`, `${u} circle`, `${u} rect`, `${u} line`];
     }
     t.svg = l;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
@@ -24,11 +24,11 @@ var n;
       return `${b}px`;
     }
     t.px = l;
-    function d(b, i) {
+    function u(b, i) {
       const [m, c] = i.split("/");
       return `${+m / +c * 100}%`;
     }
-    t.fraction = d;
+    t.fraction = u;
     function s(b, i) {
       switch (i) {
         case "fit":
@@ -40,22 +40,22 @@ var n;
       }
     }
     t.widthHeight = s;
-    function f(b) {
+    function d(b) {
       return (i, m) => `var(--${b}${m});`;
     }
-    t.variables = f;
+    t.variables = d;
     function o(b) {
       return (i, m) => `var(--${b}${m});`;
     }
     t.svgVariables = o;
-    function u(b, i) {
+    function f(b, i) {
       return `repeat(${i},minmax(0,1fr))`;
     }
-    t.gridColumns = u;
-    function g(b, i) {
+    t.gridColumns = f;
+    function y(b, i) {
       return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
-    t.gridColumn = g;
+    t.gridColumn = y;
     function a(b, i) {
       return `${i}ms`;
     }
@@ -64,10 +64,10 @@ var n;
       return `${i}deg`;
     }
     t.rotate = v;
-    function y(b, i) {
+    function g(b, i) {
       return i === "xAxis" ? "-1 1" : "1 -1";
     }
-    t.flip = y;
+    t.flip = g;
   })(e.Value || (e.Value = {}));
 })(n || (n = {}));
 var W;
@@ -333,20 +333,20 @@ var W;
     "bg-img-radio": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><circle fill='#FFF' cx='10' cy='10' r='5'/></svg>")}")`
   }, r = {};
   let l = {};
-  function d(o) {
+  function u(o) {
     return o in l ? r[o] = l[o] : o in t ? r[o] = t[o] : o in e.colors ? r[o] = e.colors[o] : r[o] = o, `var(--${o})`;
   }
-  e.getVariableValue = d;
+  e.getVariableValue = u;
   function s() {
-    return Object.entries(r).map(([o, u]) => `--${o}: ${u};`).join("");
+    return Object.entries(r).map(([o, f]) => `--${o}: ${f};`).join("");
   }
   e.generateVariables = s;
-  function f(o) {
+  function d(o) {
     l = o;
   }
-  e.setUserVariables = f;
+  e.setUserVariables = d;
 })(W || (W = {}));
-const z = W, E = {
+const N = W, E = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -1469,31 +1469,43 @@ const z = W, E = {
   ],
   color: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e)
     }
   ],
   bgColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "background-color"
     }
   ],
   borderColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "border-color"
     }
   ],
   outlineColor: [
     {
-      values: Object.keys(z.colors),
+      values: Object.keys(N.colors),
       valueFormat: (e, t) => t(e),
       styleName: "outline-color"
     }
   ],
+  fill: [
+    {
+      values: Object.keys(N.colors),
+      valueFormat: (e, t) => t(e)
+    }
+  ],
+  stroke: [
+    {
+      values: Object.keys(N.colors),
+      valueFormat: (e, t) => t(e)
+    }
+  ],
   bgImage: [
     {
       values: ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"],
@@ -1514,20 +1526,20 @@ const z = W, E = {
   hasChecked: ":has(:checked)",
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])"
-}, L = {
+}, U = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]",
   selected: '[aria-selected="true"]'
-}, Z = { ...se, ...L }, ie = Object.entries(Z).reduce(
+}, Z = { ...se, ...U }, ie = Object.entries(Z).reduce(
   (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
 ), D = Object.entries(Z).reduce(
   (e, [t]) => {
     const r = ie[t];
-    return Object.entries(e).forEach(([l, d]) => {
-      e[+l + r] = [...d, t];
+    return Object.entries(e).forEach(([l, u]) => {
+      e[+l + r] = [...u, t];
     }), e;
   },
   { 0: [] }
@@ -1536,7 +1548,7 @@ const z = W, E = {
   focusGroup: "focus",
   activeGroup: "active",
   disabledGroup: "disabled"
-}, k = {
+}, H = {
   sm: 640,
   md: 768,
   lg: 1024,
@@ -1545,13 +1557,13 @@ const z = W, E = {
 };
 var q;
 ((e) => {
-  function t(s, f, o) {
-    const u = { ...s }, g = u.props || {};
-    return f.forEach((a) => {
-      a in u && (g[a] = u[a], delete u[a]);
+  function t(s, d, o) {
+    const f = { ...s }, y = f.props || {};
+    return d.forEach((a) => {
+      a in f && (y[a] = f[a], delete f[a]);
     }), o && Object.entries(o).forEach(([a, v]) => {
-      g[a] = v;
-    }), u.props = g, u;
+      y[a] = v;
+    }), f.props = y, f;
   }
   e.buildProps = t;
   function r(s) {
@@ -1559,18 +1571,18 @@ var q;
   }
   e.isObject = r;
   function l(...s) {
-    return s.reduce((f, o) => (Object.keys(o ?? {}).forEach((u) => {
-      const g = f[u], a = o[u];
-      u in L && typeof a == "boolean" || (u in L && Array.isArray(a) ? f[u] = l(g, a[1] ?? {}) : Array.isArray(g) && Array.isArray(a) ? f[u] = g.concat(...a) : r(g) && r(a) ? f[u] = l(g, a) : f[u] = a);
-    }), f), {});
+    return s.reduce((d, o) => (Object.keys(o ?? {}).forEach((f) => {
+      const y = d[f], a = o[f];
+      f in U && typeof a == "boolean" || (f in U && Array.isArray(a) ? d[f] = l(y, a[1] ?? {}) : Array.isArray(y) && Array.isArray(a) ? d[f] = y.concat(...a) : r(y) && r(a) ? d[f] = l(y, a) : d[f] = a);
+    }), d), {});
   }
   e.mergeDeep = l;
-  function d(s, f) {
-    return s in f;
+  function u(s, d) {
+    return s in d;
   }
-  e.isKeyOf = d;
+  e.isKeyOf = u;
 })(q || (q = {}));
-const $ = q;
+const C = q;
 class be {
   constructor() {
     this._index = 0, this._cache = {};
@@ -1579,14 +1591,14 @@ class be {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: r, next: l } = ge, d = t - r.length;
-    if (d < 0)
+    const { first: r, next: l } = ye, u = t - r.length;
+    if (u < 0)
       return r[t];
-    const s = Math.floor(d / l.length), f = d - s * l.length;
-    return this.getByIndex(s) + l[f];
+    const s = Math.floor(u / l.length), d = u - s * l.length;
+    return this.getByIndex(s) + l[d];
   }
 }
-const ge = {
+const ye = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
@@ -1594,19 +1606,19 @@ var I;
 ((e) => {
   e.components = {};
 })(I || (I = {}));
-function ye(e) {
+function ge(e) {
   const { clean: t, theme: r, component: l } = e;
   return Q(() => {
-    var f;
+    var d;
     if (t) return;
-    const d = l == null ? void 0 : l.split(".");
-    if (!d) return;
-    const s = d.reduce((o, u, g) => {
+    const u = l == null ? void 0 : l.split(".");
+    if (!u) return;
+    const s = u.reduce((o, f, y) => {
       var a, v;
-      return g === 0 ? (a = I.components) == null ? void 0 : a[u] : (v = o == null ? void 0 : o.children) == null ? void 0 : v[u];
+      return y === 0 ? (a = I.components) == null ? void 0 : a[f] : (v = o == null ? void 0 : o.children) == null ? void 0 : v[f];
     }, void 0);
     if (s)
-      return r ? $.mergeDeep(s.styles, ((f = s.themes) == null ? void 0 : f[r]) ?? {}) : s.styles;
+      return r ? C.mergeDeep(s.styles, ((d = s.themes) == null ? void 0 : d[r]) ?? {}) : s.styles;
   }, [l, t, r]);
 }
 const he = new be(), pe = typeof window < "u" && typeof window.document < "u";
@@ -1614,34 +1626,34 @@ var ae;
 const ne = typeof process == "object" && ((ae = process.env) == null ? void 0 : ae.NODE_ENV) === "test", we = pe && !ne ? ce : le, ue = "_b", A = "_s";
 function Fe(e, t) {
   we(S.flush, [e]);
-  const r = ye(e);
+  const r = ge(e);
   return Q(() => {
-    const l = [t ? A : ue], d = r ? $.mergeDeep(r, e) : e;
-    return S.addClassNames(d, l, []), l;
+    const l = [t ? A : ue], u = r ? C.mergeDeep(r, e) : e;
+    return S.addClassNames(u, l, []), l;
   }, [e, t, r]);
 }
 var S;
 ((e) => {
   let t = !0, r = {};
-  function l(a, v, y, b, i) {
+  function l(a, v, g, b, i) {
     Object.entries(a).forEach(([m, c]) => {
-      if ($.isKeyOf(m, E))
-        f(m, c, v, y, b, i);
-      else if ($.isKeyOf(m, se))
-        l(c, v, [...y, m], b, i);
-      else if ($.isKeyOf(m, L)) {
+      if (C.isKeyOf(m, E))
+        d(m, c, v, g, b, i);
+      else if (C.isKeyOf(m, se))
+        l(c, v, [...g, m], b, i);
+      else if (C.isKeyOf(m, U)) {
         if (Array.isArray(c)) {
           const [w, x] = c;
-          l(x, v, [...y, m], b, i);
+          l(x, v, [...g, m], b, i);
         }
-        $.isObject(c) && l(c, v, [...y, m], b, i);
-      } else $.isKeyOf(m, k) ? l(c, v, y, m, i) : $.isKeyOf(m, K) && (typeof c == "string" ? v.push(`${K[m]}-${c}`) : Object.entries(c).forEach(([w, x]) => {
-        l(x, v, [...y, K[m]], b, w);
+        C.isObject(c) && l(c, v, [...g, m], b, i);
+      } else C.isKeyOf(m, H) ? l(c, v, g, m, i) : C.isKeyOf(m, K) && (typeof c == "string" ? v.push(`${K[m]}-${c}`) : Object.entries(c).forEach(([w, x]) => {
+        l(x, v, [...g, K[m]], b, w);
       }));
     });
   }
   e.addClassNames = l;
-  function d() {
+  function u() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
     const a = Object.entries(E).reduce((m, [c], w) => (m[c] = w, m), {}), v = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
@@ -1650,60 +1662,60 @@ 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);}
-`, y = Object.entries(r);
-    y.sort(
-      ([m], [c]) => (k[m] ?? 0) - (k[c] ?? 0)
+`, g = Object.entries(r);
+    g.sort(
+      ([m], [c]) => (H[m] ?? 0) - (H[c] ?? 0)
     );
-    const b = y.reduce(
-      (m, [c, w]) => (c !== "normal" && m.push(`@media(min-width: ${k[c]}px){`), Object.entries(w).forEach(([x, U]) => {
-        const { __parents: P, ...de } = U, ee = Object.entries(de);
-        ee.sort(([N], [_]) => a[N] - a[_]), ee.forEach(([N, _]) => {
-          _.forEach((C) => {
-            var B, H;
-            const h = E[N].find((F) => Array.isArray(F.values) ? F.values.includes(C) : typeof C == typeof F.values);
+    const b = g.reduce(
+      (m, [c, w]) => (c !== "normal" && m.push(`@media(min-width: ${H[c]}px){`), Object.entries(w).forEach(([x, G]) => {
+        const { __parents: P, ...de } = G, ee = Object.entries(de);
+        ee.sort(([F], [_]) => a[F] - a[_]), ee.forEach(([F, _]) => {
+          _.forEach((V) => {
+            var B, k;
+            const h = E[F].find(($) => Array.isArray($.values) ? $.values.includes(V) : typeof V == typeof $.values);
             if (!h) return;
-            const V = o(N, C, +x, c), G = D[+x].map((F) => Z[F]).join(""), p = ((B = h.selector) == null ? void 0 : B.call(h, `.${V}`, G)) ?? `.${V}${G}`, T = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? N], O = ((H = h.valueFormat) == null ? void 0 : H.call(h, C, z.getVariableValue)) ?? C;
-            m.push(`${p}{${T.map((F) => `${F}:${O}`).join(";")}}`);
+            const z = o(F, V, +x, c), L = D[+x].map(($) => Z[$]).join(""), p = ((B = h.selector) == null ? void 0 : B.call(h, `.${z}`, L)) ?? `.${z}${L}`, T = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? F], O = ((k = h.valueFormat) == null ? void 0 : k.call(h, V, N.getVariableValue)) ?? V;
+            m.push(`${p}{${T.map(($) => `${$}:${O}`).join(";")}}`);
           });
-        }), P && Object.entries(P).forEach(([N, _]) => {
-          const C = Object.entries(_);
-          C.sort(([j], [h]) => a[j] - a[h]), C.forEach(([j, h]) => {
-            h.forEach((V) => {
+        }), P && Object.entries(P).forEach(([F, _]) => {
+          const V = Object.entries(_);
+          V.sort(([j], [h]) => a[j] - a[h]), V.forEach(([j, h]) => {
+            h.forEach((z) => {
               var te, re;
-              const p = E[j].find((R) => Array.isArray(R.values) ? R.values.includes(V) : typeof V == typeof R.values);
+              const p = E[j].find((R) => Array.isArray(R.values) ? R.values.includes(z) : typeof z == typeof R.values);
               if (!p) return;
-              const T = o(j, V, +x, c, N), [O] = D[+x], B = ((te = p.selector) == null ? void 0 : te.call(p, `.${O}-${N}:${O} .${T}`, "")) ?? `.${O}-${N}:${O} .${T}`, H = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], F = ((re = p.valueFormat) == null ? void 0 : re.call(p, V, z.getVariableValue)) ?? V;
-              m.push(`${B}{${H.map((R) => `${R}:${F}`).join(";")}}`);
+              const T = o(j, z, +x, c, F), [O] = D[+x], B = ((te = p.selector) == null ? void 0 : te.call(p, `.${O}-${F}:${O} .${T}`, "")) ?? `.${O}-${F}:${O} .${T}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], $ = ((re = p.valueFormat) == null ? void 0 : re.call(p, z, N.getVariableValue)) ?? z;
+              m.push(`${B}{${k.map((R) => `${R}:${$}`).join(";")}}`);
             });
           });
         });
       }), c !== "normal" && m.push("}"), m),
       [v]
     );
-    b.unshift(`:root{${z.generateVariables()}}`);
-    const i = g();
+    b.unshift(`:root{${N.generateVariables()}}`);
+    const i = y();
     i.innerHTML = b.join(""), t = !1;
   }
-  e.flush = d;
+  e.flush = u;
   function s() {
     r = {};
   }
   e.clear = s;
-  function f(a, v, y, b, i = "normal", m) {
+  function d(a, v, g, b, i = "normal", m) {
     if (v == null) return;
-    const c = b.reduce((x, U) => x + ie[U], 0);
+    const c = b.reduce((x, G) => x + ie[G], 0);
     r[i] ? r[i][c] ? r[i][c][a] || (r[i][c][a] = /* @__PURE__ */ new Set()) : r[i][c] = { [a]: /* @__PURE__ */ new Set() } : r[i] = { [c]: { [a]: /* @__PURE__ */ new Set() } }, m ? (r[i][c].__parents ? r[i][c].__parents[m] ? r[i][c].__parents[m][a] || (r[i][c].__parents[m][a] = /* @__PURE__ */ new Set()) : r[i][c].__parents[m] = { [a]: /* @__PURE__ */ new Set() } : r[i][c].__parents = { [m]: { [a]: /* @__PURE__ */ new Set() } }, r[i][c].__parents[m][a].has(v) || (r[i][c].__parents[m][a].add(v), t = !0)) : r[i][c][a].has(v) || (r[i][c][a].add(v), t = !0);
     const w = o(a, v, c, i, m);
-    y.push(w);
+    g.push(w);
   }
-  function o(a, v, y, b, i) {
-    const m = D[y], c = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${a}-${v}`;
+  function o(a, v, g, b, i) {
+    const m = D[g], c = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${a}-${v}`;
     return ne ? c : he.getIdentity(c);
   }
-  const u = "crono-styles";
-  function g() {
-    let a = document.getElementById(u);
-    return a || (a = document.createElement("style"), a.setAttribute("id", u), a.setAttribute("type", "text/css"), document.head.insertBefore(a, document.head.firstChild)), a;
+  const f = "crono-styles";
+  function y() {
+    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 oe;
@@ -1712,13 +1724,13 @@ var oe;
 })(oe || (oe = {}));
 var M;
 ((e) => {
-  function t(r, l, d) {
-    return z.setUserVariables(r), Object.entries(l).forEach(([s, f]) => {
-      E[s] = f;
-    }), Object.entries(d).forEach(([s, f]) => {
+  function t(r, l, u) {
+    return N.setUserVariables(r), Object.entries(l).forEach(([s, d]) => {
+      E[s] = d;
+    }), Object.entries(u).forEach(([s, d]) => {
       const o = E[s];
-      E[s] = o ? [...f, ...o] : f;
-    }), { extendedProps: l, extendedPropTypes: d };
+      E[s] = o ? [...d, ...o] : d;
+    }), { extendedProps: l, extendedPropTypes: u };
   }
   e.extend = t;
 })(M || (M = {}));
@@ -1925,21 +1937,30 @@ var X;
             width: "fit",
             p: 3,
             cursor: "pointer",
-            lineHeight: 20,
             borderRadius: 1,
             hover: {
-              bgColor: "violet-50"
+              bgColor: "gray-100"
             },
             focus: {
               bgColor: "violet-50"
             },
             selected: {
               bgColor: "violet-50",
-              cursor: "default"
+              cursor: "default",
+              hover: {
+                bgColor: "violet-100"
+              }
+            }
+          },
+          themes: {
+            multiple: {
+              selected: {
+                cursor: "pointer"
+              }
             }
           }
         },
-        nullItem: {
+        unselectItem: {
           styles: {
             display: "flex",
             width: "fit",
@@ -1960,7 +1981,7 @@ var X;
             }
           }
         },
-        noItems: {
+        emptyItem: {
           styles: {
             display: "flex",
             width: "fit",
@@ -1975,10 +1996,10 @@ var X;
     }
   };
   function r(l) {
-    const { components: d, ...s } = l, f = d ?? {};
-    Object.entries(s).forEach(([o, u]) => {
-      f[o] = u;
-    }), I.components = $.mergeDeep(t, f);
+    const { components: u, ...s } = l, d = u ?? {};
+    Object.entries(s).forEach(([o, f]) => {
+      d[o] = f;
+    }), I.components = C.mergeDeep(t, d);
   }
   e.setup = r, I.components = { ...t };
 })(X || (X = {}));
@@ -1987,89 +2008,89 @@ const Ce = X, xe = {
 };
 var Y;
 ((e) => {
-  function t(r, l, d) {
-    r !== void 0 && r != null && (d[xe[l] ?? l] = Array.isArray(r) ? r[0] : r);
+  function t(r, l, u) {
+    r !== void 0 && r != null && (u[xe[l] ?? l] = Array.isArray(r) ? r[0] : r);
   }
   e.assignBooleanProp = t;
 })(Y || (Y = {}));
 const Ve = Y;
-function ze() {
-  return Q(() => {
-    const e = "crono-box";
-    let t = document.getElementById(e);
-    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
-  }, []);
-}
-function Ee(e = null) {
+Array.prototype.removeBy || (Array.prototype.removeBy = function(e) {
+  return this.filter(e);
+});
+function ze(e = null) {
   const [t, r] = fe(!1), l = me(null);
   return le(() => {
-    function d(o) {
-      const u = e ?? l.current;
-      (u == null ? void 0 : u.contains(o.target)) === !1 && r(!1);
-    }
-    function s() {
-      r(!1);
+    function u(d) {
+      const o = e ?? l.current;
+      (o == null ? void 0 : o.contains(d.target)) === !1 && r(!1);
     }
-    function f(o) {
-      o.key === "Escape" && r(!1);
+    function s(d) {
+      d.key === "Escape" && r(!1);
     }
-    return t && (window.addEventListener("mousedown", d), window.addEventListener("resize", s), window.addEventListener("keydown", f)), () => {
-      window.removeEventListener("mousedown", d), window.removeEventListener("resize", s), window.removeEventListener("keydown", f);
+    return t && (window.addEventListener("mousedown", u), window.addEventListener("keydown", s)), () => {
+      window.removeEventListener("mousedown", u), window.removeEventListener("keydown", s);
     };
   }, [e, t]), [t, r, l];
 }
+function Ee() {
+  return Q(() => {
+    const e = "crono-box";
+    let t = document.getElementById(e);
+    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
+  }, []);
+}
 var J;
 ((e) => {
   function t(l) {
-    const d = Array.from(l.elements).reduce(
-      (s, f) => {
-        const o = f.name;
-        return o && (s[o] || (s[o] = []), s[o].push(f)), s;
+    const u = Array.from(l.elements).reduce(
+      (s, d) => {
+        const o = d.name;
+        return o && (s[o] || (s[o] = []), s[o].push(d)), s;
       },
       {}
     );
-    return Object.entries(d).reduce((s, [f, o]) => {
+    return Object.entries(u).reduce((s, [d, o]) => {
       if (o.length === 1) {
-        const u = o[0];
-        r(s, f, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
+        const f = o[0];
+        r(s, d, f.type === "checkbox" || f.type === "radio" ? f.checked : f.value);
       } else {
-        const u = o.reduce((g, a) => (a.type === "checkbox" || a.type === "radio" ? a.checked && g.push(a.value) : g.push(a.value), g), []);
-        r(s, f, u);
+        const f = o.reduce((y, a) => (a.type === "checkbox" || a.type === "radio" ? a.checked && y.push(a.value) : y.push(a.value), y), []);
+        r(s, d, f);
       }
       return s;
     }, {});
   }
   e.getFormEntries = t;
-  function r(l, d, s) {
-    if (d.includes(".")) {
-      const f = d.split(".");
+  function r(l, u, s) {
+    if (u.includes(".")) {
+      const d = u.split(".");
       let o = l;
-      f.forEach((u, g) => {
-        if (f.length > g + 1) {
-          const a = u.match(/^(.+)\[(\d)\]$/);
+      d.forEach((f, y) => {
+        if (d.length > y + 1) {
+          const a = f.match(/^(.+)\[(\d)\]$/);
           if (a) {
-            const [, v, y] = a;
-            o[v] = o[v] || [], o[v][y] = o[v][y] || {}, o = o[v][y];
+            const [, v, g] = a;
+            o[v] = o[v] || [], o[v][g] = o[v][g] || {}, o = o[v][g];
           } else
-            o[u] = o[u] || {}, o = o[u];
+            o[f] = o[f] || {}, o = o[f];
         } else
-          o[u] = s;
+          o[f] = s;
       });
     } else
-      l[d] = s;
+      l[u] = s;
   }
 })(J || (J = {}));
 const je = J;
 export {
   $e as B,
   je as F,
-  $ as O,
+  C as O,
   oe as S,
   Ce as T,
-  z as V,
+  N as V,
   Ve as a,
-  Ee as b,
+  ze as b,
   ve as c,
-  ze as d,
+  Ee as d,
   Fe as u
 };

package/package.json

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