@cronocode/react-box 3.0.2 → 3.0.3

package/README.md

@@ -102,7 +102,7 @@ export const { extendedProps, extendedPropTypes } = Box.extend(
     color: [
       {
         values: ['dark', 'light'],
-        valueFormat: (value, useVariable) => useVariable(value),
+        valueFormat: (value, getVariableValue) => getVariableValue(value),
       },
     ],
   }

package/box.cjs

@@ -1 +1 @@
-"use strict";const s=require("react"),a=require("./core.cjs");function g(n,l){const{tag:d="div",children:c,props:p,className:x,style:m,disabled:t,required:r,checked:o}=n,v=a.useStyles(n,d==="svg"),i=s.useMemo(()=>{const h=a.classNames(v,x).join(" "),e={...p,className:h};return t&&(e.disabled=Array.isArray(t)?t[0]:t),r&&(e.required=Array.isArray(r)?r[0]:r),o&&(e.checked=Array.isArray(o)?o[0]:o),m&&(e.style=m),l&&(e.ref=l),e},[n]),[A,y]=s.useState(!1),f=typeof c=="function";return f&&(i.onMouseEnter=()=>y(!0),i.onMouseLeave=()=>y(!1)),s.createElement(d,i,f?c({isHover:A}):c)}const u=s.memo(s.forwardRef(g));u.extend=a.BoxExtends.extend;u.themeSetup=a.Theme.setup;module.exports=u;
+"use strict";const s=require("react"),t=require("./core.cjs");function b(c,u){const{tag:d="div",children:i,props:p,className:x,style:m,disabled:r,required:a,checked:o}=c,g=t.useStyles(c,d==="svg"),l=s.useMemo(()=>{const A=t.classNames(g,x).join(" "),e={...p,className:A};return r&&(e.disabled=Array.isArray(r)?r[0]:r),a&&(e.required=Array.isArray(a)?a[0]:a),o&&(e.checked=Array.isArray(o)?o[0]:o),m&&(e.style=m),u&&(e.ref=u),e},[c]),[v,y]=s.useState(!1),f=typeof i=="function";return f&&(l.onMouseEnter=()=>y(!0),l.onMouseLeave=()=>y(!1)),s.createElement(d,l,f?i({isHover:v}):i)}const n=s.memo(s.forwardRef(b));n.extend=t.BoxExtends.extend;n.themeSetup=t.Theme.setup;n.getVariableValue=t.Variables.getVariableValue;module.exports=n;

package/box.d.ts

@@ -4,6 +4,7 @@ import { ExtractElementFromTag } from './core/coreTypes';
 import { BoxStyleProps } from './types';
 import { default as BoxExtends } from './core/boxExtends';
 import { default as Theme } from './core/theme';
+import { default as Variables } from './core/variables';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled' | 'required' | 'checked'>;
 interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
@@ -20,6 +21,7 @@ interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     themeSetup: typeof Theme.setup;
+    getVariableValue: typeof Variables.getVariableValue;
 }
 declare const Box: BoxType;
 export default Box;

package/box.mjs

@@ -1,18 +1,19 @@
-import A, { memo as h, forwardRef as g, useMemo as B, useState as N } from "react";
-import { B as S, T as C, u as E, c as H } from "./core.mjs";
-function M(a, c) {
-  const { tag: i = "div", children: o, props: f, className: y, style: l, disabled: s, required: t, checked: r } = a, p = E(a, i === "svg"), n = B(() => {
-    const v = H(p, y).join(" "), e = {
+import v, { memo as A, forwardRef as V, useMemo as b, useState as h } from "react";
+import { B, T as N, V as S, u as C, c as E } from "./core.mjs";
+function H(r, c) {
+  const { tag: i = "div", children: o, props: f, className: y, style: u, disabled: s, required: a, checked: t } = r, p = C(r, i === "svg"), n = b(() => {
+    const g = E(p, y).join(" "), e = {
       ...f,
-      className: v
+      className: g
     };
-    return s && (e.disabled = Array.isArray(s) ? s[0] : s), t && (e.required = Array.isArray(t) ? t[0] : t), r && (e.checked = Array.isArray(r) ? r[0] : r), l && (e.style = l), c && (e.ref = c), e;
-  }, [a]), [x, u] = N(!1), d = typeof o == "function";
-  return d && (n.onMouseEnter = () => u(!0), n.onMouseLeave = () => u(!1)), A.createElement(i, n, d ? o({ isHover: x }) : o);
+    return s && (e.disabled = Array.isArray(s) ? s[0] : s), a && (e.required = Array.isArray(a) ? a[0] : a), t && (e.checked = Array.isArray(t) ? t[0] : t), u && (e.style = u), c && (e.ref = c), e;
+  }, [r]), [x, d] = h(!1), m = typeof o == "function";
+  return m && (n.onMouseEnter = () => d(!0), n.onMouseLeave = () => d(!1)), v.createElement(i, n, m ? o({ isHover: x }) : o);
 }
-const m = h(g(M));
-m.extend = S.extend;
-m.themeSetup = C.setup;
+const l = A(V(H));
+l.extend = B.extend;
+l.themeSetup = N.setup;
+l.getVariableValue = S.getVariableValue;
 export {
-  m as default
+  l as default
 };

package/core/boxStyles.d.ts

@@ -684,21 +684,21 @@ export declare const cssStyles: {
     }[];
     color: {
         values: Variables.ColorType[];
-        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
     }[];
     bgColor: {
         values: Variables.ColorType[];
-        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
     borderColor: {
         values: Variables.ColorType[];
-        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
     outlineColor: {
         values: Variables.ColorType[];
-        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
 };

package/core/coreTypes.d.ts

@@ -3,7 +3,7 @@ export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTML
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
 interface BoxStyleArrayString {
     values: ReadonlyArray<string>;
-    valueFormat?: (value: string, useVariable: (name: string) => string) => string;
+    valueFormat?: (value: string, getVariableValue: (name: string) => string) => string;
 }
 interface BoxStyleArrayBoolean {
     values: ReadonlyArray<boolean>;

package/core/variables.d.ts

@@ -249,7 +249,7 @@ declare namespace Variables {
         'rose-950': string;
     };
     type ColorType = keyof typeof colors;
-    function useVariable(name: string): string;
+    function getVariableValue(name: string): string;
     function generateVariables(): string;
     function setUserVariables(variables: Record<string, string>): void;
 }

package/core.cjs

@@ -1,7 +1,7 @@
-"use strict";const I=require("react");function re(...e){return e.reduce((t,a)=>a?typeof a=="string"?(t.push(a),t):Array.isArray(a)?(t.push(...re(...a)),t):(Object.entries(a).forEach(([u,d])=>{d&&t.push(u)}),t):t,[])}var n;(e=>{(t=>{function a(d,l){return`${d}${l.replace("/","-")}`}t.fraction=a;function u(d){return[`${d} path`,`${d} circle`,`${d} rect`,`${d} line`]}t.svg=u})(e.ClassName||(e.ClassName={})),(t=>{function a(y){return`${y/4}rem`}t.rem=a;function u(y){return`${y}px`}t.px=u;function d(y,o){const[c,f]=o.split("/");return`${+c/+f*100}%`}t.fraction=d;function l(y,o){switch(o){case"fit":return"100%";case"fit-screen":return y.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return o}}t.widthHeight=l;function s(y){return(o,c)=>`var(--${y}${c});`}t.variables=s;function i(y){return(o,c)=>`var(--${y}${c});`}t.svgVariables=i;function m(y,o){return`repeat(${o},minmax(0,1fr))`}t.gridColumns=m;function b(y,o){return o==="full-row"?"1/-1":`span ${o}/span ${o}`}t.gridColumn=b;function r(y,o){return`${o}ms`}t.ms=r;function v(y,o){return`${o}deg`}t.rotate=v;function h(y,o){return o==="xAxis"?"-1 1":"1 -1"}t.flip=h})(e.Value||(e.Value={}))})(n||(n={}));var M;(e=>{e.colors={inherit:"inherit",current:"currentColor",transparent:"transparent",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","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={};let a={};function u(s){return s in a?t[s]=a[s]:s in e.colors&&(t[s]=e.colors[s]),`var(--${s})`}e.useVariable=u;function d(){return Object.entries(t).map(([s,i])=>`--${s}: ${i};`).join("")}e.generateVariables=d;function l(s){a=s}e.setUserVariables=l})(M||(M={}));const E=M,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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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(E.colors),valueFormat:(e,t)=>t(e)}],bgColor:[{values:Object.keys(E.colors),valueFormat:(e,t)=>t(e),styleName:"background-color"}],borderColor:[{values:Object.keys(E.colors),valueFormat:(e,t)=>t(e),styleName:"border-color"}],outlineColor:[{values:Object.keys(E.colors),valueFormat:(e,t)=>t(e),styleName:"outline-color"}]},se={hover:":hover",focus:":focus-within",hasFocus:":has(:focus)",active:":active",valid:":user-valid",hasValid:":has(:valid)",invalid:":user-invalid",hasInvalid:":has(:user-invalid)",optional:":optional",hasChecked:":has(:checked)",hasRequired:":has(:required)",hasDisabled:":has([disabled])"},D={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]"},Q={...se,...D},le=Object.entries(Q).reduce((e,[t],a)=>(e[t]=Math.pow(2,a),e),{}),L=Object.entries(Q).reduce((e,[t])=>{const a=le[t];return Object.entries(e).forEach(([u,d])=>{e[+u+a]=[...d,t]}),e},{0:[]}),W={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var k;(e=>{function t(l,s,i){const m={...l},b=m.props||{};return s.forEach(r=>{r in m&&(b[r]=m[r],delete m[r])}),i&&Object.entries(i).forEach(([r,v])=>{b[r]=v}),m.props=b,m}e.buildProps=t;function a(l){return!!l&&typeof l=="object"}e.isObject=a;function u(...l){return l.reduce((s,i)=>(Object.keys(i).forEach(m=>{const b=s[m],r=i[m];m in D&&typeof r=="boolean"||(m in D&&Array.isArray(r)?s[m]=u(b,r[1]??{}):Array.isArray(b)&&Array.isArray(r)?s[m]=b.concat(...r):a(b)&&a(r)?s[m]=u(b,r):s[m]=r)}),s),{})}e.mergeDeep=u;function d(l,s){return l in s}e.isKeyOf=d})(k||(k={}));const w=k;class ue{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:a,next:u}=fe,d=t-a.length;if(d<0)return a[t];const l=Math.floor(d/u.length),s=d-l*u.length;return this.getByIndex(l)+u[s]}}const fe={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var q;(e=>{e.components={}})(q||(q={}));function ce(e){const{clean:t,theme:a,component:u}=e;return I.useMemo(()=>{var s;if(t)return;const d=u==null?void 0:u.split(".");if(!d)return;const l=d.reduce((i,m,b)=>{var r,v;return b===0?(r=q.components)==null?void 0:r[m]:(v=i==null?void 0:i.children)==null?void 0:v[m]},void 0);if(l)return a?w.mergeDeep(l.styles,((s=l.themes)==null?void 0:s[a])??{}):l.styles},[u,t,a])}const de=new ue,me=typeof window<"u"&&typeof window.document<"u";var ae;const oe=typeof process=="object"&&((ae=process.env)==null?void 0:ae.NODE_ENV)==="test",ve=me&&!oe?I.useLayoutEffect:I.useEffect,ne="_b",_="_s";function ye(e,t){ve(A.flush,[e]);const a=ce(e);return I.useMemo(()=>{var l;const u=[t?_:ne];(l=e.props)==null||l.name;const d=a?w.mergeDeep(a,e):e;return A.addClassNames(d,u,[]),u},[e,t,a])}var A;(e=>{let t=!0,a={};function u(r,v,h,y,o){Object.entries(r).forEach(([c,f])=>{if(w.isKeyOf(c,j))s(c,f,v,h,y,o);else if(w.isKeyOf(c,se))u(f,v,[...h,c],y,o);else if(w.isKeyOf(c,D)){if(Array.isArray(f)){const[x,N]=f;u(N,v,[...h,c],y,o)}w.isObject(f)&&u(f,v,[...h,c],y,o)}else w.isKeyOf(c,U)?u(f,v,h,c,o):w.isKeyOf(c,W)&&(typeof f=="string"?v.push(`${W[c]}-${f}`):Object.entries(f).forEach(([x,N])=>{u(N,v,[...h,W[c]],y,x)}))})}e.addClassNames=u;function d(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const r=Object.entries(j).reduce((c,[f],x)=>(c[f]=x,c),{}),v=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
+"use strict";const I=require("react");function re(...e){return e.reduce((t,a)=>a?typeof a=="string"?(t.push(a),t):Array.isArray(a)?(t.push(...re(...a)),t):(Object.entries(a).forEach(([u,d])=>{d&&t.push(u)}),t):t,[])}var n;(e=>{(t=>{function a(d,s){return`${d}${s.replace("/","-")}`}t.fraction=a;function u(d){return[`${d} path`,`${d} circle`,`${d} rect`,`${d} line`]}t.svg=u})(e.ClassName||(e.ClassName={})),(t=>{function a(y){return`${y/4}rem`}t.rem=a;function u(y){return`${y}px`}t.px=u;function d(y,o){const[c,f]=o.split("/");return`${+c/+f*100}%`}t.fraction=d;function s(y,o){switch(o){case"fit":return"100%";case"fit-screen":return y.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return o}}t.widthHeight=s;function l(y){return(o,c)=>`var(--${y}${c});`}t.variables=l;function i(y){return(o,c)=>`var(--${y}${c});`}t.svgVariables=i;function m(y,o){return`repeat(${o},minmax(0,1fr))`}t.gridColumns=m;function b(y,o){return o==="full-row"?"1/-1":`span ${o}/span ${o}`}t.gridColumn=b;function r(y,o){return`${o}ms`}t.ms=r;function v(y,o){return`${o}deg`}t.rotate=v;function h(y,o){return o==="xAxis"?"-1 1":"1 -1"}t.flip=h})(e.Value||(e.Value={}))})(n||(n={}));var M;(e=>{e.colors={inherit:"inherit",current:"currentColor",transparent:"transparent",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","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={};let a={};function u(l){return l in a?t[l]=a[l]:l in e.colors&&(t[l]=e.colors[l]),`var(--${l})`}e.getVariableValue=u;function d(){return Object.entries(t).map(([l,i])=>`--${l}: ${i};`).join("")}e.generateVariables=d;function s(l){a=l}e.setUserVariables=s})(M||(M={}));const V=M,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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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,a]=e.split("/");return`${+t/+a*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(V.colors),valueFormat:(e,t)=>t(e)}],bgColor:[{values:Object.keys(V.colors),valueFormat:(e,t)=>t(e),styleName:"background-color"}],borderColor:[{values:Object.keys(V.colors),valueFormat:(e,t)=>t(e),styleName:"border-color"}],outlineColor:[{values:Object.keys(V.colors),valueFormat:(e,t)=>t(e),styleName:"outline-color"}]},le={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])"},D={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]"},Q={...le,...D},se=Object.entries(Q).reduce((e,[t],a)=>(e[t]=Math.pow(2,a),e),{}),L=Object.entries(Q).reduce((e,[t])=>{const a=se[t];return Object.entries(e).forEach(([u,d])=>{e[+u+a]=[...d,t]}),e},{0:[]}),W={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},U={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var k;(e=>{function t(s,l,i){const m={...s},b=m.props||{};return l.forEach(r=>{r in m&&(b[r]=m[r],delete m[r])}),i&&Object.entries(i).forEach(([r,v])=>{b[r]=v}),m.props=b,m}e.buildProps=t;function a(s){return!!s&&typeof s=="object"}e.isObject=a;function u(...s){return s.reduce((l,i)=>(Object.keys(i).forEach(m=>{const b=l[m],r=i[m];m in D&&typeof r=="boolean"||(m in D&&Array.isArray(r)?l[m]=u(b,r[1]??{}):Array.isArray(b)&&Array.isArray(r)?l[m]=b.concat(...r):a(b)&&a(r)?l[m]=u(b,r):l[m]=r)}),l),{})}e.mergeDeep=u;function d(s,l){return s in l}e.isKeyOf=d})(k||(k={}));const w=k;class ue{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:a,next:u}=fe,d=t-a.length;if(d<0)return a[t];const s=Math.floor(d/u.length),l=d-s*u.length;return this.getByIndex(s)+u[l]}}const fe={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var q;(e=>{e.components={}})(q||(q={}));function ce(e){const{clean:t,theme:a,component:u}=e;return I.useMemo(()=>{var l;if(t)return;const d=u==null?void 0:u.split(".");if(!d)return;const s=d.reduce((i,m,b)=>{var r,v;return b===0?(r=q.components)==null?void 0:r[m]:(v=i==null?void 0:i.children)==null?void 0:v[m]},void 0);if(s)return a?w.mergeDeep(s.styles,((l=s.themes)==null?void 0:l[a])??{}):s.styles},[u,t,a])}const de=new ue,me=typeof window<"u"&&typeof window.document<"u";var ae;const oe=typeof process=="object"&&((ae=process.env)==null?void 0:ae.NODE_ENV)==="test",ve=me&&!oe?I.useLayoutEffect:I.useEffect,ne="_b",_="_s";function ye(e,t){ve(A.flush,[e]);const a=ce(e);return I.useMemo(()=>{var s;const u=[t?_:ne];(s=e.props)==null||s.name;const d=a?w.mergeDeep(a,e):e;return A.addClassNames(d,u,[]),u},[e,t,a])}var A;(e=>{let t=!0,a={};function u(r,v,h,y,o){Object.entries(r).forEach(([c,f])=>{if(w.isKeyOf(c,j))l(c,f,v,h,y,o);else if(w.isKeyOf(c,le))u(f,v,[...h,c],y,o);else if(w.isKeyOf(c,D)){if(Array.isArray(f)){const[x,N]=f;u(N,v,[...h,c],y,o)}w.isObject(f)&&u(f,v,[...h,c],y,o)}else w.isKeyOf(c,U)?u(f,v,h,c,o):w.isKeyOf(c,W)&&(typeof f=="string"?v.push(`${W[c]}-${f}`):Object.entries(f).forEach(([x,N])=>{u(N,v,[...h,W[c]],y,x)}))})}e.addClassNames=u;function d(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const r=Object.entries(j).reduce((c,[f],x)=>(c[f]=x,c),{}),v=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${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;}
 .${_}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${_} path,.${_} circle,.${_} rect,.${_} line {transition: all var(--svgTransitionTime);}
-`,h=Object.entries(a);h.sort(([c],[f])=>(U[c]??0)-(U[f]??0));const y=h.reduce((c,[f,x])=>(f!=="normal"&&c.push(`@media(min-width: ${U[f]}px){`),Object.entries(x).forEach(([N,H])=>{const{__parents:Z,...ie}=H,P=Object.entries(ie);P.sort(([F],[T])=>r[F]-r[T]),P.forEach(([F,T])=>{T.forEach(V=>{var R,G;const p=j[F].find($=>Array.isArray($.values)?$.values.includes(V):typeof V==typeof $.values);if(!p)return;const z=i(F,V,+N,f),K=L[+N].map($=>Q[$]).join(""),g=((R=p.selector)==null?void 0:R.call(p,`.${z}`,K))??`.${z}${K}`,B=Array.isArray(p.styleName)?p.styleName:[p.styleName??F],S=((G=p.valueFormat)==null?void 0:G.call(p,V,E.useVariable))??V;c.push(`${g}{${B.map($=>`${$}:${S}`).join(";")}}`)})}),Z&&Object.entries(Z).forEach(([F,T])=>{const V=Object.entries(T);V.sort(([O],[p])=>r[O]-r[p]),V.forEach(([O,p])=>{p.forEach(z=>{var ee,te;const g=j[O].find(C=>Array.isArray(C.values)?C.values.includes(z):typeof z==typeof C.values);if(!g)return;const B=i(O,z,+N,f,F),[S]=L[+N],R=((ee=g.selector)==null?void 0:ee.call(g,`.${S}-${F}:${S} .${B}`,""))??`.${S}-${F}:${S} .${B}`,G=Array.isArray(g.styleName)?g.styleName:[g.styleName??O],$=((te=g.valueFormat)==null?void 0:te.call(g,z,E.useVariable))??z;c.push(`${R}{${G.map(C=>`${C}:${$}`).join(";")}}`)})})})}),f!=="normal"&&c.push("}"),c),[v]);y.unshift(`:root{${E.generateVariables()}}`);const o=b();o.innerHTML=y.join(""),t=!1}e.flush=d;function l(){a={}}e.clear=l;function s(r,v,h,y,o="normal",c){if(v==null)return;const f=y.reduce((N,H)=>N+le[H],0);a[o]?a[o][f]?a[o][f][r]||(a[o][f][r]=new Set):a[o][f]={[r]:new Set}:a[o]={[f]:{[r]:new Set}},c?(a[o][f].__parents?a[o][f].__parents[c]?a[o][f].__parents[c][r]||(a[o][f].__parents[c][r]=new Set):a[o][f].__parents[c]={[r]:new Set}:a[o][f].__parents={[c]:{[r]:new Set}},a[o][f].__parents[c][r].has(v)||(a[o][f].__parents[c][r].add(v),t=!0)):a[o][f][r].has(v)||(a[o][f][r].add(v),t=!0);const x=i(r,v,f,o,c);h.push(x)}function i(r,v,h,y,o){const c=L[h],f=`${y==="normal"?"":`${y}-`}${c.map(x=>`${x}-`).join("")}${o?`${o}-`:""}${r}-${v}`;return oe?f:de.getIdentity(f)}const m="crono-styles";function b(){let r=document.getElementById(m);return r||(r=document.createElement("style"),r.setAttribute("id",m),r.setAttribute("type","text/css"),document.head.insertBefore(r,document.head.firstChild)),r}})(A||(A={}));exports.StylesContext=void 0;(e=>{e.flush=A.flush,e.clear=A.clear})(exports.StylesContext||(exports.StylesContext={}));var X;(e=>{function t(a,u,d){return E.setUserVariables(a),Object.entries(u).forEach(([l,s])=>{j[l]=s}),Object.entries(d).forEach(([l,s])=>{const i=j[l];j[l]=i?[...s,...i]:s}),{extendedProps:u,extendedPropTypes:d}}e.extend=t})(X||(X={}));const be=X;var Y;(e=>{const t={button:{styles:{display:"inline-block",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",disabled:{cursor:"default"}}},checkbox:{styles:{display:"inline-block"}},radioButton:{styles:{display:"inline-block",b:1,p:2}},textbox:{styles:{display:"inline-block",b:1,borderRadius:1,p:3}},textarea:{styles:{display:"inline-block",b:1,borderRadius:1}}};function a(u){const{components:d,...l}=u,s=d??{};Object.entries(l).forEach(([i,m])=>{s[i]=m}),q.components=w.mergeDeep(t,s)}e.setup=a})(Y||(Y={}));const he=Y;var J;(e=>{function t(u){const d=Array.from(u.elements).reduce((l,s)=>{const i=s.name;return i&&(l[i]||(l[i]=[]),l[i].push(s)),l},{});return Object.entries(d).reduce((l,[s,i])=>{if(i.length===1){const m=i[0];a(l,s,m.type==="checkbox"||m.type==="radio"?m.checked:m.value)}else{const m=i.reduce((b,r)=>(r.type==="checkbox"||r.type==="radio"?r.checked&&b.push(r.value):b.push(r.value),b),[]);a(l,s,m)}return l},{})}e.getFormEntries=t;function a(u,d,l){if(d.includes(".")){const s=d.split(".");let i=u;s.forEach((m,b)=>{if(s.length>b+1){const r=m.match(/^(.+)\[(\d)\]$/);if(r){const[,v,h]=r;i[v]=i[v]||[],i[v][h]=i[v][h]||{},i=i[v][h]}else i[m]=i[m]||{},i=i[m]}else i[m]=l})}else u[d]=l}})(J||(J={}));const pe=J;function ge(){return I.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}exports.BoxExtends=be;exports.FormUtils=pe;exports.ObjectUtils=w;exports.Theme=he;exports.classNames=re;exports.usePortalContainer=ge;exports.useStyles=ye;
+`,h=Object.entries(a);h.sort(([c],[f])=>(U[c]??0)-(U[f]??0));const y=h.reduce((c,[f,x])=>(f!=="normal"&&c.push(`@media(min-width: ${U[f]}px){`),Object.entries(x).forEach(([N,H])=>{const{__parents:Z,...ie}=H,P=Object.entries(ie);P.sort(([F],[T])=>r[F]-r[T]),P.forEach(([F,T])=>{T.forEach(z=>{var R,G;const p=j[F].find($=>Array.isArray($.values)?$.values.includes(z):typeof z==typeof $.values);if(!p)return;const E=i(F,z,+N,f),K=L[+N].map($=>Q[$]).join(""),g=((R=p.selector)==null?void 0:R.call(p,`.${E}`,K))??`.${E}${K}`,B=Array.isArray(p.styleName)?p.styleName:[p.styleName??F],S=((G=p.valueFormat)==null?void 0:G.call(p,z,V.getVariableValue))??z;c.push(`${g}{${B.map($=>`${$}:${S}`).join(";")}}`)})}),Z&&Object.entries(Z).forEach(([F,T])=>{const z=Object.entries(T);z.sort(([O],[p])=>r[O]-r[p]),z.forEach(([O,p])=>{p.forEach(E=>{var ee,te;const g=j[O].find(C=>Array.isArray(C.values)?C.values.includes(E):typeof E==typeof C.values);if(!g)return;const B=i(O,E,+N,f,F),[S]=L[+N],R=((ee=g.selector)==null?void 0:ee.call(g,`.${S}-${F}:${S} .${B}`,""))??`.${S}-${F}:${S} .${B}`,G=Array.isArray(g.styleName)?g.styleName:[g.styleName??O],$=((te=g.valueFormat)==null?void 0:te.call(g,E,V.getVariableValue))??E;c.push(`${R}{${G.map(C=>`${C}:${$}`).join(";")}}`)})})})}),f!=="normal"&&c.push("}"),c),[v]);y.unshift(`:root{${V.generateVariables()}}`);const o=b();o.innerHTML=y.join(""),t=!1}e.flush=d;function s(){a={}}e.clear=s;function l(r,v,h,y,o="normal",c){if(v==null)return;const f=y.reduce((N,H)=>N+se[H],0);a[o]?a[o][f]?a[o][f][r]||(a[o][f][r]=new Set):a[o][f]={[r]:new Set}:a[o]={[f]:{[r]:new Set}},c?(a[o][f].__parents?a[o][f].__parents[c]?a[o][f].__parents[c][r]||(a[o][f].__parents[c][r]=new Set):a[o][f].__parents[c]={[r]:new Set}:a[o][f].__parents={[c]:{[r]:new Set}},a[o][f].__parents[c][r].has(v)||(a[o][f].__parents[c][r].add(v),t=!0)):a[o][f][r].has(v)||(a[o][f][r].add(v),t=!0);const x=i(r,v,f,o,c);h.push(x)}function i(r,v,h,y,o){const c=L[h],f=`${y==="normal"?"":`${y}-`}${c.map(x=>`${x}-`).join("")}${o?`${o}-`:""}${r}-${v}`;return oe?f:de.getIdentity(f)}const m="crono-styles";function b(){let r=document.getElementById(m);return r||(r=document.createElement("style"),r.setAttribute("id",m),r.setAttribute("type","text/css"),document.head.insertBefore(r,document.head.firstChild)),r}})(A||(A={}));exports.StylesContext=void 0;(e=>{e.flush=A.flush,e.clear=A.clear})(exports.StylesContext||(exports.StylesContext={}));var X;(e=>{function t(a,u,d){return V.setUserVariables(a),Object.entries(u).forEach(([s,l])=>{j[s]=l}),Object.entries(d).forEach(([s,l])=>{const i=j[s];j[s]=i?[...l,...i]:l}),{extendedProps:u,extendedPropTypes:d}}e.extend=t})(X||(X={}));const be=X;var Y;(e=>{const t={button:{styles:{display:"inline-block",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",disabled:{cursor:"default"}}},checkbox:{styles:{display:"inline-block"}},radioButton:{styles:{display:"inline-block",b:1,p:2}},textbox:{styles:{display:"inline-block",b:1,borderRadius:1,p:3}},textarea:{styles:{display:"inline-block",b:1,borderRadius:1}}};function a(u){const{components:d,...s}=u,l=d??{};Object.entries(s).forEach(([i,m])=>{l[i]=m}),q.components=w.mergeDeep(t,l)}e.setup=a})(Y||(Y={}));const he=Y;var J;(e=>{function t(u){const d=Array.from(u.elements).reduce((s,l)=>{const i=l.name;return i&&(s[i]||(s[i]=[]),s[i].push(l)),s},{});return Object.entries(d).reduce((s,[l,i])=>{if(i.length===1){const m=i[0];a(s,l,m.type==="checkbox"||m.type==="radio"?m.checked:m.value)}else{const m=i.reduce((b,r)=>(r.type==="checkbox"||r.type==="radio"?r.checked&&b.push(r.value):b.push(r.value),b),[]);a(s,l,m)}return s},{})}e.getFormEntries=t;function a(u,d,s){if(d.includes(".")){const l=d.split(".");let i=u;l.forEach((m,b)=>{if(l.length>b+1){const r=m.match(/^(.+)\[(\d)\]$/);if(r){const[,v,h]=r;i[v]=i[v]||[],i[v][h]=i[v][h]||{},i=i[v][h]}else i[m]=i[m]||{},i=i[m]}else i[m]=s})}else u[d]=s}})(J||(J={}));const pe=J;function ge(){return I.useMemo(()=>{const e="crono-box";let t=document.getElementById(e);return t||(t=document.createElement("div"),t.id=e,document.body.appendChild(t)),t},[])}exports.BoxExtends=be;exports.FormUtils=pe;exports.ObjectUtils=w;exports.Theme=he;exports.Variables=V;exports.classNames=re;exports.usePortalContainer=ge;exports.useStyles=ye;

package/core.mjs

@@ -7,8 +7,8 @@ function ce(...e) {
 var n;
 ((e) => {
   ((t) => {
-    function a(d, l) {
-      return `${d}${l.replace("/", "-")}`;
+    function a(d, s) {
+      return `${d}${s.replace("/", "-")}`;
     }
     t.fraction = a;
     function u(d) {
@@ -29,7 +29,7 @@ var n;
       return `${+c / +f * 100}%`;
     }
     t.fraction = d;
-    function l(y, o) {
+    function s(y, o) {
       switch (o) {
         case "fit":
           return "100%";
@@ -39,11 +39,11 @@ var n;
           return o;
       }
     }
-    t.widthHeight = l;
-    function s(y) {
+    t.widthHeight = s;
+    function l(y) {
       return (o, c) => `var(--${y}${c});`;
     }
-    t.variables = s;
+    t.variables = l;
     function i(y) {
       return (o, c) => `var(--${y}${c});`;
     }
@@ -323,18 +323,18 @@ var W;
   };
   const t = {};
   let a = {};
-  function u(s) {
-    return s in a ? t[s] = a[s] : s in e.colors && (t[s] = e.colors[s]), `var(--${s})`;
+  function u(l) {
+    return l in a ? t[l] = a[l] : l in e.colors && (t[l] = e.colors[l]), `var(--${l})`;
   }
-  e.useVariable = u;
+  e.getVariableValue = u;
   function d() {
-    return Object.entries(t).map(([s, i]) => `--${s}: ${i};`).join("");
+    return Object.entries(t).map(([l, i]) => `--${l}: ${i};`).join("");
   }
   e.generateVariables = d;
-  function l(s) {
-    a = s;
+  function s(l) {
+    a = l;
   }
-  e.setUserVariables = l;
+  e.setUserVariables = s;
 })(W || (W = {}));
 const E = W, j = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
@@ -1484,7 +1484,7 @@ const E = W, j = {
       styleName: "outline-color"
     }
   ]
-}, se = {
+}, le = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1502,12 +1502,12 @@ const E = W, j = {
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]"
-}, Q = { ...se, ...D }, le = Object.entries(Q).reduce(
+}, Q = { ...le, ...D }, se = Object.entries(Q).reduce(
   (e, [t], a) => (e[t] = Math.pow(2, a), e),
   {}
 ), K = Object.entries(Q).reduce(
   (e, [t]) => {
-    const a = le[t];
+    const a = se[t];
     return Object.entries(e).forEach(([u, d]) => {
       e[+u + a] = [...d, t];
     }), e;
@@ -1527,28 +1527,28 @@ const E = W, j = {
 };
 var k;
 ((e) => {
-  function t(l, s, i) {
-    const m = { ...l }, b = m.props || {};
-    return s.forEach((r) => {
+  function t(s, l, i) {
+    const m = { ...s }, b = m.props || {};
+    return l.forEach((r) => {
       r in m && (b[r] = m[r], delete m[r]);
     }), i && Object.entries(i).forEach(([r, v]) => {
       b[r] = v;
     }), m.props = b, m;
   }
   e.buildProps = t;
-  function a(l) {
-    return !!l && typeof l == "object";
+  function a(s) {
+    return !!s && typeof s == "object";
   }
   e.isObject = a;
-  function u(...l) {
-    return l.reduce((s, i) => (Object.keys(i).forEach((m) => {
-      const b = s[m], r = i[m];
-      m in D && typeof r == "boolean" || (m in D && Array.isArray(r) ? s[m] = u(b, r[1] ?? {}) : Array.isArray(b) && Array.isArray(r) ? s[m] = b.concat(...r) : a(b) && a(r) ? s[m] = u(b, r) : s[m] = r);
-    }), s), {});
+  function u(...s) {
+    return s.reduce((l, i) => (Object.keys(i).forEach((m) => {
+      const b = l[m], r = i[m];
+      m in D && typeof r == "boolean" || (m in D && Array.isArray(r) ? l[m] = u(b, r[1] ?? {}) : Array.isArray(b) && Array.isArray(r) ? l[m] = b.concat(...r) : a(b) && a(r) ? l[m] = u(b, r) : l[m] = r);
+    }), l), {});
   }
   e.mergeDeep = u;
-  function d(l, s) {
-    return l in s;
+  function d(s, l) {
+    return s in l;
   }
   e.isKeyOf = d;
 })(k || (k = {}));
@@ -1564,8 +1564,8 @@ class de {
     const { first: a, next: u } = me, d = t - a.length;
     if (d < 0)
       return a[t];
-    const l = Math.floor(d / u.length), s = d - l * u.length;
-    return this.getByIndex(l) + u[s];
+    const s = Math.floor(d / u.length), l = d - s * u.length;
+    return this.getByIndex(s) + u[l];
   }
 }
 const me = {
@@ -1579,16 +1579,16 @@ var H;
 function ve(e) {
   const { clean: t, theme: a, component: u } = e;
   return J(() => {
-    var s;
+    var l;
     if (t) return;
     const d = u == null ? void 0 : u.split(".");
     if (!d) return;
-    const l = d.reduce((i, m, b) => {
+    const s = d.reduce((i, m, b) => {
       var r, v;
       return b === 0 ? (r = H.components) == null ? void 0 : r[m] : (v = i == null ? void 0 : i.children) == null ? void 0 : v[m];
     }, void 0);
-    if (l)
-      return a ? $.mergeDeep(l.styles, ((s = l.themes) == null ? void 0 : s[a]) ?? {}) : l.styles;
+    if (s)
+      return a ? $.mergeDeep(s.styles, ((l = s.themes) == null ? void 0 : l[a]) ?? {}) : s.styles;
   }, [u, t, a]);
 }
 const ye = new de(), be = typeof window < "u" && typeof window.document < "u";
@@ -1598,9 +1598,9 @@ function ge(e, t) {
   he(A.flush, [e]);
   const a = ve(e);
   return J(() => {
-    var l;
+    var s;
     const u = [t ? S : ne];
-    (l = e.props) == null || l.name;
+    (s = e.props) == null || s.name;
     const d = a ? $.mergeDeep(a, e) : e;
     return A.addClassNames(d, u, []), u;
   }, [e, t, a]);
@@ -1611,8 +1611,8 @@ var A;
   function u(r, v, h, y, o) {
     Object.entries(r).forEach(([c, f]) => {
       if ($.isKeyOf(c, j))
-        s(c, f, v, h, y, o);
-      else if ($.isKeyOf(c, se))
+        l(c, f, v, h, y, o);
+      else if ($.isKeyOf(c, le))
         u(f, v, [...h, c], y, o);
       else if ($.isKeyOf(c, D)) {
         if (Array.isArray(f)) {
@@ -1647,7 +1647,7 @@ a,ul{all: unset;}
             var B, R;
             const p = j[w].find((F) => Array.isArray(F.values) ? F.values.includes(V) : typeof V == typeof F.values);
             if (!p) return;
-            const z = i(w, V, +N, f), q = K[+N].map((F) => Q[F]).join(""), g = ((B = p.selector) == null ? void 0 : B.call(p, `.${z}`, q)) ?? `.${z}${q}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? w], _ = ((R = p.valueFormat) == null ? void 0 : R.call(p, V, E.useVariable)) ?? V;
+            const z = i(w, V, +N, f), q = K[+N].map((F) => Q[F]).join(""), g = ((B = p.selector) == null ? void 0 : B.call(p, `.${z}`, q)) ?? `.${z}${q}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? w], _ = ((R = p.valueFormat) == null ? void 0 : R.call(p, V, E.getVariableValue)) ?? V;
             c.push(`${g}{${I.map((F) => `${F}:${_}`).join(";")}}`);
           });
         }), Z && Object.entries(Z).forEach(([w, T]) => {
@@ -1657,7 +1657,7 @@ a,ul{all: unset;}
               var ee, te;
               const g = j[O].find((C) => Array.isArray(C.values) ? C.values.includes(z) : typeof z == typeof C.values);
               if (!g) return;
-              const I = i(O, z, +N, f, w), [_] = K[+N], B = ((ee = g.selector) == null ? void 0 : ee.call(g, `.${_}-${w}:${_} .${I}`, "")) ?? `.${_}-${w}:${_} .${I}`, R = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? O], F = ((te = g.valueFormat) == null ? void 0 : te.call(g, z, E.useVariable)) ?? z;
+              const I = i(O, z, +N, f, w), [_] = K[+N], B = ((ee = g.selector) == null ? void 0 : ee.call(g, `.${_}-${w}:${_} .${I}`, "")) ?? `.${_}-${w}:${_} .${I}`, R = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? O], F = ((te = g.valueFormat) == null ? void 0 : te.call(g, z, E.getVariableValue)) ?? z;
               c.push(`${B}{${R.map((C) => `${C}:${F}`).join(";")}}`);
             });
           });
@@ -1670,13 +1670,13 @@ a,ul{all: unset;}
     o.innerHTML = y.join(""), t = !1;
   }
   e.flush = d;
-  function l() {
+  function s() {
     a = {};
   }
-  e.clear = l;
-  function s(r, v, h, y, o = "normal", c) {
+  e.clear = s;
+  function l(r, v, h, y, o = "normal", c) {
     if (v == null) return;
-    const f = y.reduce((N, U) => N + le[U], 0);
+    const f = y.reduce((N, U) => N + se[U], 0);
     a[o] ? a[o][f] ? a[o][f][r] || (a[o][f][r] = /* @__PURE__ */ new Set()) : a[o][f] = { [r]: /* @__PURE__ */ new Set() } : a[o] = { [f]: { [r]: /* @__PURE__ */ new Set() } }, c ? (a[o][f].__parents ? a[o][f].__parents[c] ? a[o][f].__parents[c][r] || (a[o][f].__parents[c][r] = /* @__PURE__ */ new Set()) : a[o][f].__parents[c] = { [r]: /* @__PURE__ */ new Set() } : a[o][f].__parents = { [c]: { [r]: /* @__PURE__ */ new Set() } }, a[o][f].__parents[c][r].has(v) || (a[o][f].__parents[c][r].add(v), t = !0)) : a[o][f][r].has(v) || (a[o][f][r].add(v), t = !0);
     const x = i(r, v, f, o, c);
     h.push(x);
@@ -1698,11 +1698,11 @@ var ae;
 var M;
 ((e) => {
   function t(a, u, d) {
-    return E.setUserVariables(a), Object.entries(u).forEach(([l, s]) => {
-      j[l] = s;
-    }), Object.entries(d).forEach(([l, s]) => {
-      const i = j[l];
-      j[l] = i ? [...s, ...i] : s;
+    return E.setUserVariables(a), Object.entries(u).forEach(([s, l]) => {
+      j[s] = l;
+    }), Object.entries(d).forEach(([s, l]) => {
+      const i = j[s];
+      j[s] = i ? [...l, ...i] : l;
     }), { extendedProps: u, extendedPropTypes: d };
   }
   e.extend = t;
@@ -1769,10 +1769,10 @@ var X;
     // },
   };
   function a(u) {
-    const { components: d, ...l } = u, s = d ?? {};
-    Object.entries(l).forEach(([i, m]) => {
-      s[i] = m;
-    }), H.components = $.mergeDeep(t, s);
+    const { components: d, ...s } = u, l = d ?? {};
+    Object.entries(s).forEach(([i, m]) => {
+      l[i] = m;
+    }), H.components = $.mergeDeep(t, l);
   }
   e.setup = a;
 })(X || (X = {}));
@@ -1781,30 +1781,30 @@ var Y;
 ((e) => {
   function t(u) {
     const d = Array.from(u.elements).reduce(
-      (l, s) => {
-        const i = s.name;
-        return i && (l[i] || (l[i] = []), l[i].push(s)), l;
+      (s, l) => {
+        const i = l.name;
+        return i && (s[i] || (s[i] = []), s[i].push(l)), s;
       },
       {}
     );
-    return Object.entries(d).reduce((l, [s, i]) => {
+    return Object.entries(d).reduce((s, [l, i]) => {
       if (i.length === 1) {
         const m = i[0];
-        a(l, s, m.type === "checkbox" || m.type === "radio" ? m.checked : m.value);
+        a(s, l, m.type === "checkbox" || m.type === "radio" ? m.checked : m.value);
       } else {
         const m = i.reduce((b, r) => (r.type === "checkbox" || r.type === "radio" ? r.checked && b.push(r.value) : b.push(r.value), b), []);
-        a(l, s, m);
+        a(s, l, m);
       }
-      return l;
+      return s;
     }, {});
   }
   e.getFormEntries = t;
-  function a(u, d, l) {
+  function a(u, d, s) {
     if (d.includes(".")) {
-      const s = d.split(".");
+      const l = d.split(".");
       let i = u;
-      s.forEach((m, b) => {
-        if (s.length > b + 1) {
+      l.forEach((m, b) => {
+        if (l.length > b + 1) {
           const r = m.match(/^(.+)\[(\d)\]$/);
           if (r) {
             const [, v, h] = r;
@@ -1812,10 +1812,10 @@ var Y;
           } else
             i[m] = i[m] || {}, i = i[m];
         } else
-          i[m] = l;
+          i[m] = s;
       });
     } else
-      u[d] = l;
+      u[d] = s;
   }
 })(Y || (Y = {}));
 const we = Y;
@@ -1832,6 +1832,7 @@ export {
   $ as O,
   ae as S,
   Ne as T,
+  E as V,
   Fe as a,
   ce as c,
   ge as u

package/package.json

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