@cronocode/react-box 3.0.0 → 3.0.1

package/box.d.ts

@@ -1,4 +1,4 @@
-import { default as React, RefAttributes } from 'react';
+import { default as React, Ref, RefAttributes } from 'react';
 import { ClassNameType } from './core/classNames';
 import { ExtractElementFromTag } from './core/coreTypes';
 import { BoxStyleProps } from './types';
@@ -15,6 +15,7 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
+declare function BoxComponent<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
 interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
@@ -22,5 +23,5 @@ interface BoxType {
 }
 declare const Box: BoxType;
 export default Box;
-export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof Box<TTag>>;
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof BoxComponent<TTag>>;
 export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];

package/components/button.d.ts

@@ -1,11 +1,11 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type ButtonProps = Omit<BoxProps<'button'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<ButtonProps>['props'];
 declare const tagProps: readonly ["type", "onClick"];
 type TagPropsType = (typeof tagProps)[number];
 type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<ButtonProps, 'props'> {
     props?: ButtonTagProps;
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/components/checkbox.d.ts

@@ -13,5 +13,5 @@ interface Props extends CheckboxProps {
     readOnly?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/flex.d.ts

@@ -1,6 +1,5 @@
 import { RefAttributes } from 'react';
-import { default as Box } from '../box';
+import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
 declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/form.d.ts

@@ -1,8 +1,7 @@
-import { default as Box } from '../box';
-type BoxProps = React.ComponentProps<typeof Box<'form'>>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type BoxTagProps = Required<BoxProps<'form'>>['props'];
 type FormTagProps = Omit<BoxTagProps, 'onSubmit' | 'ref'>;
-interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
+interface Props<T> extends Omit<BoxProps<'form'>, 'props' | 'tag'> {
     props?: FormTagProps;
     onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
 }

package/components/grid.d.ts

@@ -1,6 +1,5 @@
 import { RefAttributes } from 'react';
-import { default as Box } from '../box';
+import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
 declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/radioButton.d.ts

@@ -1,10 +1,10 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type RadioButtonProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<RadioButtonProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
 type RadioButtonTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<RadioButtonProps, 'props'> {
     name?: string;
     props?: RadioButtonTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/components/textarea.d.ts

@@ -1,10 +1,10 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type TextareaProps = Omit<BoxProps<'textarea'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<TextareaProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly"];
 type TagPropsType = (typeof tagProps)[number];
 type TextareaTagProps = Omit<BoxTagProps, TagPropsType>;
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<TextareaProps, 'props'> {
     name?: string;
     props?: TextareaTagProps;
     onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/components/textbox.d.ts

@@ -1,11 +1,11 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type TextareaProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<TextareaProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
 type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<TextareaProps, 'props'> {
     name?: string;
     props?: TextboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/components/tooltip.d.ts

@@ -1,6 +1,5 @@
-import { default as Box } from '../box';
-import { default as React } from 'react';
-interface Props extends React.ComponentProps<typeof Box> {
+import { BoxProps } from '../box';
+interface Props extends BoxProps {
     onPositionChange?(position: {
         top: number;
         left: number;

package/core/boxStyles.d.ts

@@ -60,50 +60,50 @@ export declare const cssStyles: {
     /** The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTop: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusRight: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottom: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusLeft: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTopLeft: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTopRight: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottomRight: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottomLeft: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
     position: {
@@ -728,6 +728,7 @@ export declare const pseudoGroupClasses: {
     hoverGroup: "hover";
     focusGroup: "focus";
     activeGroup: "active";
+    disabledGroup: "disabled";
 };
 export declare const breakpoints: {
     sm: number;

package/core/coreTypes.d.ts

@@ -23,7 +23,8 @@ interface BoxStyleString {
     valueFormat?: (value: string) => string;
 }
 export type BoxStyle = (BoxStyleArrayString | BoxStyleArrayBoolean | BoxStyleArrayNumber | BoxStyleNumber | BoxStyleString) & {
-    styleName?: string;
+    styleName?: string | string[];
+    selector?: (className: string, pseudoClass: string) => string;
 };
 export type ExtractKeys<T extends Record<string, unknown>, TT> = {
     [K in keyof T]?: TT;

package/core.cjs

@@ -1,7 +1,7 @@
-"use strict";const T=require("react");function k(...e){return e.reduce((t,s)=>s?typeof s=="string"?(t.push(s),t):Array.isArray(s)?(t.push(...k(...s)),t):(Object.entries(s).forEach(([u,m])=>{m&&t.push(u)}),t):t,[])}var c;(e=>{(t=>{function s(m,n){return`${m}${n.replace("/","-")}`}t.fraction=s;function u(m){return[`${m} path`,`${m} circle`,`${m} rect`,`${m} line`]}t.svg=u})(e.ClassName||(e.ClassName={})),(t=>{function s(h){return`${h/4}rem`}t.rem=s;function u(h){return`${h}px`}t.px=u;function m(h,r){const[i,l]=r.split("/");return`${+i/+l*100}%`}t.fraction=m;function n(h,r){switch(r){case"fit":return"100%";case"fit-screen":return h.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return r}}t.widthHeight=n;function d(h){return(r,i)=>`var(--${h}${i});`}t.variables=d;function o(h){return(r,i)=>`var(--${h}${i});`}t.svgVariables=o;function v(h,r){return`repeat(${r},minmax(0,1fr))`}t.gridColumns=v;function y(h,r){return r==="full-row"?"1/-1":`span ${r}/span ${r}`}t.gridColumn=y;function a(h,r){return`${r}ms`}t.ms=a;function f(h,r){return`${r}deg`}t.rotate=f;function p(h,r){return r==="xAxis"?"-1 1":"1 -1"}t.flip=p})(e.Value||(e.Value={}))})(c||(c={}));const _={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:c.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:c.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:c.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:c.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:c.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:c.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:c.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:c.Value.rem}],borderRadiusTop:[{values:0,styleName:"border-radius",valueFormat:e=>`${e/4}rem ${e/4}rem 0 0`}],borderRadiusRight:[{values:0,styleName:"border-radius",valueFormat:e=>`0 ${e/4}rem ${e/4}rem 0`}],borderRadiusBottom:[{values:0,styleName:"border-radius",valueFormat:e=>`0 0 ${e/4}rem ${e/4}rem`}],borderRadiusLeft:[{values:0,styleName:"border-radius",valueFormat:e=>`${e/4}rem 0 0 ${e/4}rem`}],borderRadiusTopLeft:[{values:0,styleName:"border-radius",valueFormat:e=>`${e/4}rem 0 0 0`}],borderRadiusTopRight:[{values:0,styleName:"border-radius",valueFormat:e=>`0 ${e/4}rem 0 0`}],borderRadiusBottomRight:[{values:0,styleName:"border-radius",valueFormat:e=>`0 0 ${e/4}rem 0`}],borderRadiusBottomLeft:[{values:0,styleName:"border-radius",valueFormat:e=>`0 0 0 ${e/4}rem`}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:c.Value.rem}],right:[{values:0,valueFormat:c.Value.rem}],bottom:[{values:0,valueFormat:c.Value.rem}],left:[{values:0,valueFormat:c.Value.rem}],inset:[{values:0,valueFormat:c.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:c.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:c.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:c.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:c.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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*100}%`}},{styleName:"max-width",values:["auto","fit-content","max-content","min-content"]}],letterSpacing:[{styleName:"letter-spacing",values:0,valueFormat:c.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:c.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:c.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:c.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:c.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:c.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:c.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:c.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:c.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:c.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:c.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:c.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:c.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"]}],gridColumn:[{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}]},ee={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])"},I={indeterminate:":indeterminate",checked:":checked",required:":required",disabled:"[disabled]"},M={...ee,...I},te=Object.entries(M).reduce((e,[t],s)=>(e[t]=Math.pow(2,s),e),{}),q=Object.entries(M).reduce((e,[t])=>{const s=te[t];return Object.entries(e).forEach(([u,m])=>{e[+u+s]=[...m,t]}),e},{0:[]}),H={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active"},C={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var K;(e=>{function t(n,d,o){const v={...n},y=v.props||{};return d.forEach(a=>{a in v&&(y[a]=v[a],delete v[a])}),o&&Object.entries(o).forEach(([a,f])=>{y[a]=f}),v.props=y,v}e.buildProps=t;function s(n){return!!n&&typeof n=="object"}e.isObject=s;function u(...n){return n.reduce((d,o)=>(Object.keys(o).forEach(v=>{const y=d[v],a=o[v];v in I&&typeof a=="boolean"||(v in I&&Array.isArray(a)?d[v]=u(y,a[1]??{}):Array.isArray(y)&&Array.isArray(a)?d[v]=y.concat(...a):s(y)&&s(a)?d[v]=u(y,a):d[v]=a)}),d),{})}e.mergeDeep=u;function m(n,d){return n in d}e.isKeyOf=m})(K||(K={}));const x=K;class ne{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:s,next:u}=ie,m=t-s.length;if(m<0)return s[t];const n=Math.floor(m/u.length),d=m-n*u.length;return this.getByIndex(n)+u[d]}}const ie={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var L;(e=>{let t="";function s(m,n){return t=Object.entries(m).map(([d,o])=>`--${d}: ${o};`).join(""),Object.entries(n).forEach(([d,o])=>{_[d]=o}),n}e.extend=s;function u(){return t}e.getVariables=u})(L||(L={}));const se=L;var R;(e=>{e.components={}})(R||(R={}));function oe(e){const{clean:t,theme:s,component:u}=e;return T.useMemo(()=>{var n,d;if(t)return;let m=(n=R.components)==null?void 0:n[u];if(m)return s?x.mergeDeep(m.styles,((d=m.themes)==null?void 0:d[s])??{}):m.styles},[u,t,s])}const ue=new ne,me=typeof window<"u"&&typeof window.document<"u";var P;const ae=typeof process=="object"&&((P=process.env)==null?void 0:P.NODE_ENV)==="test",ce=me&&!ae?T.useLayoutEffect:T.useEffect,re="_b",j="_s";function de(e,t){ce(O.flush,[e]);const s=oe(e);return T.useMemo(()=>{var n;const u=[t?j:re];(n=e.props)==null||n.name;const m=s?x.mergeDeep(s,e):e;return O.addClassNames(m,u,[]),u},[e,t,s])}var O;(e=>{let t=!0,s={};function u(a,f,p,h,r){Object.entries(a).forEach(([i,l])=>{if(x.isKeyOf(i,_))d(i,l,f,p,h,r);else if(x.isKeyOf(i,ee))u(l,f,[...p,i],h,r);else if(x.isKeyOf(i,I)){if(Array.isArray(l)){const[g,b]=l;u(b,f,[...p,i],h,r)}x.isObject(l)&&u(l,f,[...p,i],h,r)}else x.isKeyOf(i,C)?u(l,f,p,i,r):x.isKeyOf(i,H)&&(typeof l=="string"?f.push(`${H[i]}-${l}`):Object.entries(l).forEach(([g,b])=>{u(b,f,[...p,H[i]],h,g)}))})}e.addClassNames=u;function m(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const a=Object.entries(_).reduce((i,[l],g)=>(i[l]=g,i),{}),f=`:root{${se.getVariables()}--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 C=require("react");function te(...e){return e.reduce((t,s)=>s?typeof s=="string"?(t.push(s),t):Array.isArray(s)?(t.push(...te(...s)),t):(Object.entries(s).forEach(([m,c])=>{c&&t.push(m)}),t):t,[])}var l;(e=>{(t=>{function s(c,n){return`${c}${n.replace("/","-")}`}t.fraction=s;function m(c){return[`${c} path`,`${c} circle`,`${c} rect`,`${c} line`]}t.svg=m})(e.ClassName||(e.ClassName={})),(t=>{function s(y){return`${y/4}rem`}t.rem=s;function m(y){return`${y}px`}t.px=m;function c(y,r){const[i,o]=r.split("/");return`${+i/+o*100}%`}t.fraction=c;function n(y,r){switch(r){case"fit":return"100%";case"fit-screen":return y.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return r}}t.widthHeight=n;function d(y){return(r,i)=>`var(--${y}${i});`}t.variables=d;function u(y){return(r,i)=>`var(--${y}${i});`}t.svgVariables=u;function v(y,r){return`repeat(${r},minmax(0,1fr))`}t.gridColumns=v;function h(y,r){return r==="full-row"?"1/-1":`span ${r}/span ${r}`}t.gridColumn=h;function a(y,r){return`${r}ms`}t.ms=a;function f(y,r){return`${r}deg`}t.rotate=f;function p(y,r){return r==="xAxis"?"-1 1":"1 -1"}t.flip=p})(e.Value||(e.Value={}))})(l||(l={}));const T={appearance:[{values:["none","auto","menulist-button","textfield","button","checkbox"]}],b:[{values:0,styleName:"border-width",valueFormat:l.Value.px}],bx:[{values:0,styleName:"border-inline-width",valueFormat:l.Value.px}],by:[{values:0,styleName:"border-block-width",valueFormat:l.Value.px}],bt:[{values:0,styleName:"border-top-width",valueFormat:l.Value.px}],br:[{values:0,styleName:"border-right-width",valueFormat:l.Value.px}],bb:[{values:0,styleName:"border-bottom-width",valueFormat:l.Value.px}],bl:[{values:0,styleName:"border-left-width",valueFormat:l.Value.px}],borderStyle:[{styleName:"border-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],borderRadius:[{styleName:"border-radius",values:0,valueFormat:l.Value.rem}],borderRadiusTop:[{values:0,styleName:["border-top-left-radius","border-top-right-radius"],valueFormat:l.Value.rem}],borderRadiusRight:[{values:0,styleName:["border-top-right-radius","border-bottom-right-radius"],valueFormat:l.Value.rem}],borderRadiusBottom:[{values:0,styleName:["border-bottom-left-radius","border-bottom-right-radius"],valueFormat:l.Value.rem}],borderRadiusLeft:[{values:0,styleName:["border-top-left-radius","border-bottom-left-radius"],valueFormat:l.Value.rem}],borderRadiusTopLeft:[{values:0,styleName:"border-top-left-radius",valueFormat:l.Value.rem}],borderRadiusTopRight:[{values:0,styleName:"border-top-right-radius",valueFormat:l.Value.rem}],borderRadiusBottomRight:[{values:0,styleName:"border-bottom-right-radius",valueFormat:l.Value.rem}],borderRadiusBottomLeft:[{values:0,styleName:"border-bottom-left-radius",valueFormat:l.Value.rem}],position:[{values:["static","relative","absolute","fixed","sticky"]}],top:[{values:0,valueFormat:l.Value.rem}],right:[{values:0,valueFormat:l.Value.rem}],bottom:[{values:0,valueFormat:l.Value.rem}],left:[{values:0,valueFormat:l.Value.rem}],inset:[{values:0,valueFormat:l.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:l.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:l.Value.rem}],rowGap:[{styleName:"row-gap",values:0,valueFormat:l.Value.rem}],columnGap:[{styleName:"column-gap",values:0,valueFormat:l.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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*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,s]=e.split("/");return`${+t/+s*100}%`}},{styleName:"max-width",values:["auto","fit-content","max-content","min-content"]}],letterSpacing:[{styleName:"letter-spacing",values:0,valueFormat:l.Value.px}],lineHeight:[{styleName:"line-height",values:0,valueFormat:l.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:l.Value.rem},{values:["auto"],styleName:"margin"}],mx:[{values:0,styleName:"margin-inline",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-inline"}],my:[{values:0,styleName:"margin-block",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-block"}],mt:[{values:0,styleName:"margin-top",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-top"}],mr:[{values:0,styleName:"margin-right",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-right"}],mb:[{values:0,styleName:"margin-bottom",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-bottom"}],ml:[{values:0,styleName:"margin-left",valueFormat:l.Value.rem},{values:["auto"],styleName:"margin-left"}],p:[{values:0,styleName:"padding",valueFormat:l.Value.rem}],px:[{values:0,styleName:"padding-inline",valueFormat:l.Value.rem}],py:[{values:0,styleName:"padding-block",valueFormat:l.Value.rem}],pt:[{values:0,styleName:"padding-top",valueFormat:l.Value.rem}],pr:[{values:0,styleName:"padding-right",valueFormat:l.Value.rem}],pb:[{values:0,styleName:"padding-bottom",valueFormat:l.Value.rem}],pl:[{values:0,styleName:"padding-left",valueFormat:l.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:l.Value.px}],outlineStyle:[{styleName:"outline-style",values:["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"]}],outlineOffset:[{styleName:"outline-offset",values:0,valueFormat:l.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"]}],gridColumn:[{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}]},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]"},J={...se,...D},ae=Object.entries(J).reduce((e,[t],s)=>(e[t]=Math.pow(2,s),e),{}),L=Object.entries(J).reduce((e,[t])=>{const s=ae[t];return Object.entries(e).forEach(([m,c])=>{e[+m+s]=[...c,t]}),e},{0:[]}),U={hoverGroup:"hover",focusGroup:"focus",activeGroup:"active",disabledGroup:"disabled"},G={sm:640,md:768,lg:1024,xl:1280,xxl:1536};var W;(e=>{function t(n,d,u){const v={...n},h=v.props||{};return d.forEach(a=>{a in v&&(h[a]=v[a],delete v[a])}),u&&Object.entries(u).forEach(([a,f])=>{h[a]=f}),v.props=h,v}e.buildProps=t;function s(n){return!!n&&typeof n=="object"}e.isObject=s;function m(...n){return n.reduce((d,u)=>(Object.keys(u).forEach(v=>{const h=d[v],a=u[v];v in D&&typeof a=="boolean"||(v in D&&Array.isArray(a)?d[v]=m(h,a[1]??{}):Array.isArray(h)&&Array.isArray(a)?d[v]=h.concat(...a):s(h)&&s(a)?d[v]=m(h,a):d[v]=a)}),d),{})}e.mergeDeep=m;function c(n,d){return n in d}e.isKeyOf=c})(W||(W={}));const w=W;class ie{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:s,next:m}=ue,c=t-s.length;if(c<0)return s[t];const n=Math.floor(c/m.length),d=c-n*m.length;return this.getByIndex(n)+m[d]}}const ue={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var M;(e=>{let t="";function s(c,n){return t=Object.entries(c).map(([d,u])=>`--${d}: ${u};`).join(""),Object.entries(n).forEach(([d,u])=>{T[d]=u}),n}e.extend=s;function m(){return t}e.getVariables=m})(M||(M={}));const re=M;var q;(e=>{e.components={}})(q||(q={}));function me(e){const{clean:t,theme:s,component:m}=e;return C.useMemo(()=>{var n,d;if(t)return;let c=(n=q.components)==null?void 0:n[m];if(c)return s?w.mergeDeep(c.styles,((d=c.themes)==null?void 0:d[s])??{}):c.styles},[m,t,s])}const ce=new ie,de=typeof window<"u"&&typeof window.document<"u";var ee;const le=typeof process=="object"&&((ee=process.env)==null?void 0:ee.NODE_ENV)==="test",ve=de&&!le?C.useLayoutEffect:C.useEffect,oe="_b",O="_s";function fe(e,t){ve(S.flush,[e]);const s=me(e);return C.useMemo(()=>{var n;const m=[t?O:oe];(n=e.props)==null||n.name;const c=s?w.mergeDeep(s,e):e;return S.addClassNames(c,m,[]),m},[e,t,s])}var S;(e=>{let t=!0,s={};function m(a,f,p,y,r){Object.entries(a).forEach(([i,o])=>{if(w.isKeyOf(i,T))d(i,o,f,p,y,r);else if(w.isKeyOf(i,se))m(o,f,[...p,i],y,r);else if(w.isKeyOf(i,D)){if(Array.isArray(o)){const[x,N]=o;m(N,f,[...p,i],y,r)}w.isObject(o)&&m(o,f,[...p,i],y,r)}else w.isKeyOf(i,G)?m(o,f,p,i,r):w.isKeyOf(i,U)&&(typeof o=="string"?f.push(`${U[i]}-${o}`):Object.entries(o).forEach(([x,N])=>{m(N,f,[...p,U[i]],y,x)}))})}e.addClassNames=m;function c(){if(!t)return;console.debug("\x1B[36m%s\x1B[0m","[react-box]: flush");const a=Object.entries(T).reduce((i,[o],x)=>(i[o]=x,i),{}),f=`:root{${re.getVariables()}--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;}
-.${re}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${j}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${j} path,.${j} circle,.${j} rect,.${j} line {transition: all var(--svgTransitionTime);}
-`,p=Object.entries(s);p.sort(([i],[l])=>(C[i]??0)-(C[l]??0));const h=p.reduce((i,[l,g])=>(l!=="normal"&&i.push(`@media(min-width: ${C[l]}px){`),Object.entries(g).forEach(([b,B])=>{const{__parents:X,...le}=B,Y=Object.entries(le);Y.sort(([w],[S])=>a[w]-a[S]),Y.forEach(([w,S])=>{S.forEach(F=>{var A;const N=_[w].find(E=>Array.isArray(E.values)?E.values.includes(F):typeof F==typeof E.values);if(!N)return;const $=o(w,F,+b,l),J=N.styleName??w,V=((A=N.valueFormat)==null?void 0:A.call(N,F))??F,G=q[+b];i.push(`.${$}${G.map(E=>M[E]).join("")}{${J}:${V}}`)})}),X&&Object.entries(X).forEach(([w,S])=>{const F=Object.entries(S);F.sort(([z],[N])=>a[z]-a[N]),F.forEach(([z,N])=>{N.forEach($=>{var Z;const V=_[z].find(D=>Array.isArray(D.values)?D.values.includes($):typeof $==typeof D.values);if(!V)return;const G=o(z,$,+b,l,w),A=V.styleName??z,E=((Z=V.valueFormat)==null?void 0:Z.call(V,$))??$,[Q]=q[+b];i.push(`.${Q}-${w}:${Q} .${G}{${A}:${E}}`)})})})}),l!=="normal"&&i.push("}"),i),[f]),r=y();r.innerHTML=h.join(""),t=!1}e.flush=m;function n(){s={}}e.clear=n;function d(a,f,p,h,r="normal",i){if(f==null)return;const l=h.reduce((b,B)=>b+te[B],0);s[r]?s[r][l]?s[r][l][a]||(s[r][l][a]=new Set):s[r][l]={[a]:new Set}:s[r]={[l]:{[a]:new Set}},i?(s[r][l].__parents?s[r][l].__parents[i]?s[r][l].__parents[i][a]||(s[r][l].__parents[i][a]=new Set):s[r][l].__parents[i]={[a]:new Set}:s[r][l].__parents={[i]:{[a]:new Set}},s[r][l].__parents[i][a].has(f)||(s[r][l].__parents[i][a].add(f),t=!0)):s[r][l][a].has(f)||(s[r][l][a].add(f),t=!0);const g=o(a,f,l,r,i);p.push(g)}function o(a,f,p,h,r){const i=q[p],l=`${h==="normal"?"":`${h}-`}${i.map(g=>`${g}-`).join("")}${r?`${r}-`:""}${a}-${f}`;return ae?l:ue.getIdentity(l)}const v="crono-styles";function y(){let a=document.getElementById(v);return a||(a=document.createElement("style"),a.setAttribute("id",v),a.setAttribute("type","text/css"),document.head.insertBefore(a,document.head.firstChild)),a}})(O||(O={}));exports.StylesContext=void 0;(e=>{e.flush=O.flush,e.clear=O.clear})(exports.StylesContext||(exports.StylesContext={}));var U;(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 s(u){const{components:m,...n}=u,d=m??{};Object.entries(n).forEach(([o,v])=>{d[o]=v}),R.components=x.mergeDeep(t,d)}e.setup=s})(U||(U={}));const ve=U;var W;(e=>{function t(u){const m=Array.from(u.elements).reduce((n,d)=>{const o=d.name;return o&&(n[o]||(n[o]=[]),n[o].push(d)),n},{});return Object.entries(m).reduce((n,[d,o])=>{if(o.length===1){const v=o[0];s(n,d,v.type==="checkbox"||v.type==="radio"?v.checked:v.value)}else{const v=o.reduce((y,a)=>(a.type==="checkbox"||a.type==="radio"?a.checked&&y.push(a.value):y.push(a.value),y),[]);s(n,d,v)}return n},{})}e.getFormEntries=t;function s(u,m,n){if(m.includes(".")){const d=m.split(".");let o=u;d.forEach((v,y)=>{if(d.length>y+1){const a=v.match(/^(.+)\[(\d)\]$/);if(a){const[,f,p]=a;o[f]=o[f]||[],o[f][p]=o[f][p]||{},o=o[f][p]}else o[v]=o[v]||{},o=o[v]}else o[v]=n})}else u[m]=n}})(W||(W={}));const fe=W;function he(){return T.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=se;exports.FormUtils=fe;exports.ObjectUtils=x;exports.Theme=ve;exports.classNames=k;exports.usePortalContainer=he;exports.useStyles=de;
+.${oe}{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;}
+.${O}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${O} path,.${O} circle,.${O} rect,.${O} line {transition: all var(--svgTransitionTime);}
+`,p=Object.entries(s);p.sort(([i],[o])=>(G[i]??0)-(G[o]??0));const y=p.reduce((i,[o,x])=>(o!=="normal"&&i.push(`@media(min-width: ${G[o]}px){`),Object.entries(x).forEach(([N,H])=>{const{__parents:Q,...ne}=H,Z=Object.entries(ne);Z.sort(([F],[_])=>a[F]-a[_]),Z.forEach(([F,_])=>{_.forEach(V=>{var R,B;const b=T[F].find($=>Array.isArray($.values)?$.values.includes(V):typeof V==typeof $.values);if(!b)return;const E=u(F,V,+N,o),K=L[+N].map($=>J[$]).join(""),g=((R=b.selector)==null?void 0:R.call(b,`.${E}`,K))??`.${E}${K}`,I=Array.isArray(b.styleName)?b.styleName:[b.styleName??F],z=((B=b.valueFormat)==null?void 0:B.call(b,V))??V;i.push(`${g}{${I.map($=>`${$}:${z}`).join(";")}}`)})}),Q&&Object.entries(Q).forEach(([F,_])=>{const V=Object.entries(_);V.sort(([j],[b])=>a[j]-a[b]),V.forEach(([j,b])=>{b.forEach(E=>{var P,k;const g=T[j].find(A=>Array.isArray(A.values)?A.values.includes(E):typeof E==typeof A.values);if(!g)return;const I=u(j,E,+N,o,F),[z]=L[+N],R=((P=g.selector)==null?void 0:P.call(g,`.${z}-${F}:${z} .${I}`,""))??`.${z}-${F}:${z} .${I}`,B=Array.isArray(g.styleName)?g.styleName:[g.styleName??j],$=((k=g.valueFormat)==null?void 0:k.call(g,E))??E;i.push(`${R}{${B.map(A=>`${A}:${$}`).join(";")}}`)})})})}),o!=="normal"&&i.push("}"),i),[f]),r=h();r.innerHTML=y.join(""),t=!1}e.flush=c;function n(){s={}}e.clear=n;function d(a,f,p,y,r="normal",i){if(f==null)return;const o=y.reduce((N,H)=>N+ae[H],0);s[r]?s[r][o]?s[r][o][a]||(s[r][o][a]=new Set):s[r][o]={[a]:new Set}:s[r]={[o]:{[a]:new Set}},i?(s[r][o].__parents?s[r][o].__parents[i]?s[r][o].__parents[i][a]||(s[r][o].__parents[i][a]=new Set):s[r][o].__parents[i]={[a]:new Set}:s[r][o].__parents={[i]:{[a]:new Set}},s[r][o].__parents[i][a].has(f)||(s[r][o].__parents[i][a].add(f),t=!0)):s[r][o][a].has(f)||(s[r][o][a].add(f),t=!0);const x=u(a,f,o,r,i);p.push(x)}function u(a,f,p,y,r){const i=L[p],o=`${y==="normal"?"":`${y}-`}${i.map(x=>`${x}-`).join("")}${r?`${r}-`:""}${a}-${f}`;return le?o:ce.getIdentity(o)}const v="crono-styles";function h(){let a=document.getElementById(v);return a||(a=document.createElement("style"),a.setAttribute("id",v),a.setAttribute("type","text/css"),document.head.insertBefore(a,document.head.firstChild)),a}})(S||(S={}));exports.StylesContext=void 0;(e=>{e.flush=S.flush,e.clear=S.clear})(exports.StylesContext||(exports.StylesContext={}));var X;(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 s(m){const{components:c,...n}=m,d=c??{};Object.entries(n).forEach(([u,v])=>{d[u]=v}),q.components=w.mergeDeep(t,d)}e.setup=s})(X||(X={}));const ye=X;var Y;(e=>{function t(m){const c=Array.from(m.elements).reduce((n,d)=>{const u=d.name;return u&&(n[u]||(n[u]=[]),n[u].push(d)),n},{});return Object.entries(c).reduce((n,[d,u])=>{if(u.length===1){const v=u[0];s(n,d,v.type==="checkbox"||v.type==="radio"?v.checked:v.value)}else{const v=u.reduce((h,a)=>(a.type==="checkbox"||a.type==="radio"?a.checked&&h.push(a.value):h.push(a.value),h),[]);s(n,d,v)}return n},{})}e.getFormEntries=t;function s(m,c,n){if(c.includes(".")){const d=c.split(".");let u=m;d.forEach((v,h)=>{if(d.length>h+1){const a=v.match(/^(.+)\[(\d)\]$/);if(a){const[,f,p]=a;u[f]=u[f]||[],u[f][p]=u[f][p]||{},u=u[f][p]}else u[v]=u[v]||{},u=u[v]}else u[v]=n})}else m[c]=n}})(Y||(Y={}));const he=Y;function pe(){return C.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=re;exports.FormUtils=he;exports.ObjectUtils=w;exports.Theme=ye;exports.classNames=te;exports.usePortalContainer=pe;exports.useStyles=fe;

package/core.mjs

@@ -1,34 +1,34 @@
-import { useMemo as U, useLayoutEffect as le, useEffect as ne } from "react";
-function ie(...e) {
-  return e.reduce((t, a) => a ? typeof a == "string" ? (t.push(a), t) : Array.isArray(a) ? (t.push(...ie(...a)), t) : (Object.entries(a).forEach(([u, m]) => {
-    m && t.push(u);
+import { useMemo as Y, useLayoutEffect as ne, useEffect as ie } from "react";
+function ue(...e) {
+  return e.reduce((t, a) => a ? typeof a == "string" ? (t.push(a), t) : Array.isArray(a) ? (t.push(...ue(...a)), t) : (Object.entries(a).forEach(([m, c]) => {
+    c && t.push(m);
   }), t) : t, []);
 }
-var c;
+var l;
 ((e) => {
   ((t) => {
-    function a(m, n) {
-      return `${m}${n.replace("/", "-")}`;
+    function a(c, n) {
+      return `${c}${n.replace("/", "-")}`;
     }
     t.fraction = a;
-    function u(m) {
-      return [`${m} path`, `${m} circle`, `${m} rect`, `${m} line`];
+    function m(c) {
+      return [`${c} path`, `${c} circle`, `${c} rect`, `${c} line`];
     }
-    t.svg = u;
+    t.svg = m;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
     function a(h) {
       return `${h / 4}rem`;
     }
     t.rem = a;
-    function u(h) {
+    function m(h) {
       return `${h}px`;
     }
-    t.px = u;
-    function m(h, r) {
-      const [i, l] = r.split("/");
-      return `${+i / +l * 100}%`;
+    t.px = m;
+    function c(h, r) {
+      const [i, o] = r.split("/");
+      return `${+i / +o * 100}%`;
     }
-    t.fraction = m;
+    t.fraction = c;
     function n(h, r) {
       switch (r) {
         case "fit":
@@ -44,10 +44,10 @@ var c;
       return (r, i) => `var(--${h}${i});`;
     }
     t.variables = d;
-    function o(h) {
+    function u(h) {
       return (r, i) => `var(--${h}${i});`;
     }
-    t.svgVariables = o;
+    t.svgVariables = u;
     function v(h, r) {
       return `repeat(${r},minmax(0,1fr))`;
     }
@@ -69,8 +69,8 @@ var c;
     }
     t.flip = p;
   })(e.Value || (e.Value = {}));
-})(c || (c = {}));
-const S = {
+})(l || (l = {}));
+const T = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -82,7 +82,7 @@ const S = {
     {
       values: 0,
       styleName: "border-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's left and right border. */
@@ -90,7 +90,7 @@ const S = {
     {
       values: 0,
       styleName: "border-inline-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-width shorthand CSS property sets the width of an element's top and bottom border. */
@@ -98,7 +98,7 @@ const S = {
     {
       values: 0,
       styleName: "border-block-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-top-width CSS property sets the width of the top border of an element. */
@@ -106,7 +106,7 @@ const S = {
     {
       values: 0,
       styleName: "border-top-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-right-width CSS property sets the width of the right border of an element. */
@@ -114,7 +114,7 @@ const S = {
     {
       values: 0,
       styleName: "border-right-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-bottom-width CSS property sets the width of the bottom border of an element. */
@@ -122,7 +122,7 @@ const S = {
     {
       values: 0,
       styleName: "border-bottom-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-left-width CSS property sets the width of the left border of an element. */
@@ -130,7 +130,7 @@ const S = {
     {
       values: 0,
       styleName: "border-left-width",
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The border-style shorthand CSS property sets the line style for all four sides of an element's border. */
@@ -145,71 +145,71 @@ const S = {
     {
       styleName: "border-radius",
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusTop: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `${e / 4}rem ${e / 4}rem 0 0`
+      styleName: ["border-top-left-radius", "border-top-right-radius"],
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusRight: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `0 ${e / 4}rem ${e / 4}rem 0`
+      styleName: ["border-top-right-radius", "border-bottom-right-radius"],
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusBottom: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `0 0 ${e / 4}rem ${e / 4}rem`
+      styleName: ["border-bottom-left-radius", "border-bottom-right-radius"],
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusLeft: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `${e / 4}rem 0 0 ${e / 4}rem`
+      styleName: ["border-top-left-radius", "border-bottom-left-radius"],
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusTopLeft: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `${e / 4}rem 0 0 0`
+      styleName: "border-top-left-radius",
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusTopRight: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `0 ${e / 4}rem 0 0`
+      styleName: "border-top-right-radius",
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusBottomRight: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `0 0 ${e / 4}rem 0`
+      styleName: "border-bottom-right-radius",
+      valueFormat: l.Value.rem
     }
   ],
   /** The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
   borderRadiusBottomLeft: [
     {
       values: 0,
-      styleName: "border-radius",
-      valueFormat: (e) => `0 0 0 ${e / 4}rem`
+      styleName: "border-bottom-left-radius",
+      valueFormat: l.Value.rem
     }
   ],
   /** The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
@@ -222,35 +222,35 @@ const S = {
   top: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The right CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
   right: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements. */
   bottom: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
   left: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. */
   inset: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
@@ -423,7 +423,7 @@ const S = {
     {
       styleName: "font-size",
       values: 0,
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     },
     {
       styleName: "font-size",
@@ -448,7 +448,7 @@ const S = {
   gap: [
     {
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
@@ -456,7 +456,7 @@ const S = {
     {
       styleName: "row-gap",
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
@@ -464,7 +464,7 @@ const S = {
     {
       styleName: "column-gap",
       values: 0,
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0. */
@@ -789,7 +789,7 @@ const S = {
     {
       styleName: "letter-spacing",
       values: 0,
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The line-height CSS property sets the height of a line box in horizontal writing modes. In vertical writing modes, it sets the width of a line box. It's commonly used to set the distance between lines of text. On block-level elements in horizontal writing modes, it specifies the preferred height of line boxes within the element, and on non-replaced inline elements, it specifies the height that is used to calculate line box height. */
@@ -797,7 +797,7 @@ const S = {
     {
       styleName: "line-height",
       values: 0,
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     },
     {
       styleName: "line-height",
@@ -817,7 +817,7 @@ const S = {
     {
       values: 0,
       styleName: "margin",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -829,7 +829,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-inline",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -841,7 +841,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-block",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -853,7 +853,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-top",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -865,7 +865,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-right",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -877,7 +877,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-bottom",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -889,7 +889,7 @@ const S = {
     {
       values: 0,
       styleName: "margin-left",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     },
     {
       values: ["auto"],
@@ -901,7 +901,7 @@ const S = {
     {
       values: 0,
       styleName: "padding",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -909,7 +909,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-inline",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
@@ -917,7 +917,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-block",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-top CSS property sets the height of the padding area on the top of an element. */
@@ -925,7 +925,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-top",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-right CSS property sets the width of the padding area on the right of an element. */
@@ -933,7 +933,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-right",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-bottom CSS property sets the height of the padding area on the bottom of an element. */
@@ -941,7 +941,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-bottom",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The padding-left CSS property sets the width of the padding area to the left of an element. */
@@ -949,7 +949,7 @@ const S = {
     {
       values: 0,
       styleName: "padding-left",
-      valueFormat: c.Value.rem
+      valueFormat: l.Value.rem
     }
   ],
   /** The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. */
@@ -970,7 +970,7 @@ const S = {
     {
       styleName: "outline-width",
       values: 0,
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border. */
@@ -985,7 +985,7 @@ const S = {
     {
       styleName: "outline-offset",
       values: 0,
-      valueFormat: c.Value.px
+      valueFormat: l.Value.px
     }
   ],
   /** The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction. */
@@ -1191,7 +1191,7 @@ const S = {
       values: 0
     }
   ]
-}, ee = {
+}, ae = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1204,40 +1204,41 @@ const S = {
   hasChecked: ":has(:checked)",
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])"
-}, C = {
+}, G = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]"
-}, M = { ...ee, ...C }, te = Object.entries(M).reduce(
+}, J = { ...ae, ...G }, se = Object.entries(J).reduce(
   (e, [t], a) => (e[t] = Math.pow(2, a), e),
   {}
-), D = Object.entries(M).reduce(
+), K = Object.entries(J).reduce(
   (e, [t]) => {
-    const a = te[t];
-    return Object.entries(e).forEach(([u, m]) => {
-      e[+u + a] = [...m, t];
+    const a = se[t];
+    return Object.entries(e).forEach(([m, c]) => {
+      e[+m + a] = [...c, t];
     }), e;
   },
   { 0: [] }
-), H = {
+), L = {
   hoverGroup: "hover",
   focusGroup: "focus",
-  activeGroup: "active"
-}, A = {
+  activeGroup: "active",
+  disabledGroup: "disabled"
+}, R = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   xxl: 1536
 };
-var q;
+var W;
 ((e) => {
-  function t(n, d, o) {
+  function t(n, d, u) {
     const v = { ...n }, y = v.props || {};
     return d.forEach((s) => {
       s in v && (y[s] = v[s], delete v[s]);
-    }), o && Object.entries(o).forEach(([s, f]) => {
+    }), u && Object.entries(u).forEach(([s, f]) => {
       y[s] = f;
     }), v.props = y, v;
   }
@@ -1246,20 +1247,20 @@ var q;
     return !!n && typeof n == "object";
   }
   e.isObject = a;
-  function u(...n) {
-    return n.reduce((d, o) => (Object.keys(o).forEach((v) => {
-      const y = d[v], s = o[v];
-      v in C && typeof s == "boolean" || (v in C && Array.isArray(s) ? d[v] = u(y, s[1] ?? {}) : Array.isArray(y) && Array.isArray(s) ? d[v] = y.concat(...s) : a(y) && a(s) ? d[v] = u(y, s) : d[v] = s);
+  function m(...n) {
+    return n.reduce((d, u) => (Object.keys(u).forEach((v) => {
+      const y = d[v], s = u[v];
+      v in G && typeof s == "boolean" || (v in G && Array.isArray(s) ? d[v] = m(y, s[1] ?? {}) : Array.isArray(y) && Array.isArray(s) ? d[v] = y.concat(...s) : a(y) && a(s) ? d[v] = m(y, s) : d[v] = s);
     }), d), {});
   }
-  e.mergeDeep = u;
-  function m(n, d) {
+  e.mergeDeep = m;
+  function c(n, d) {
     return n in d;
   }
-  e.isKeyOf = m;
-})(q || (q = {}));
-const N = q;
-class oe {
+  e.isKeyOf = c;
+})(W || (W = {}));
+const $ = W;
+class me {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -1267,149 +1268,149 @@ class oe {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: a, next: u } = ue, m = t - a.length;
-    if (m < 0)
+    const { first: a, next: m } = ce, c = t - a.length;
+    if (c < 0)
       return a[t];
-    const n = Math.floor(m / u.length), d = m - n * u.length;
-    return this.getByIndex(n) + u[d];
+    const n = Math.floor(c / m.length), d = c - n * m.length;
+    return this.getByIndex(n) + m[d];
   }
 }
-const ue = {
+const ce = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var K;
+var U;
 ((e) => {
   let t = "";
-  function a(m, n) {
-    return t = Object.entries(m).map(([d, o]) => `--${d}: ${o};`).join(""), Object.entries(n).forEach(([d, o]) => {
-      S[d] = o;
+  function a(c, n) {
+    return t = Object.entries(c).map(([d, u]) => `--${d}: ${u};`).join(""), Object.entries(n).forEach(([d, u]) => {
+      T[d] = u;
     }), n;
   }
   e.extend = a;
-  function u() {
+  function m() {
     return t;
   }
-  e.getVariables = u;
-})(K || (K = {}));
-const me = K;
-var I;
+  e.getVariables = m;
+})(U || (U = {}));
+const de = U;
+var D;
 ((e) => {
   e.components = {};
-})(I || (I = {}));
-function ce(e) {
-  const { clean: t, theme: a, component: u } = e;
-  return U(() => {
+})(D || (D = {}));
+function ve(e) {
+  const { clean: t, theme: a, component: m } = e;
+  return Y(() => {
     var n, d;
     if (t) return;
-    let m = (n = I.components) == null ? void 0 : n[u];
-    if (m)
-      return a ? N.mergeDeep(m.styles, ((d = m.themes) == null ? void 0 : d[a]) ?? {}) : m.styles;
-  }, [u, t, a]);
+    let c = (n = D.components) == null ? void 0 : n[m];
+    if (c)
+      return a ? $.mergeDeep(c.styles, ((d = c.themes) == null ? void 0 : d[a]) ?? {}) : c.styles;
+  }, [m, t, a]);
 }
-const de = new oe(), ve = typeof window < "u" && typeof window.document < "u";
-var k;
-const ae = typeof process == "object" && ((k = process.env) == null ? void 0 : k.NODE_ENV) === "test", fe = ve && !ae ? le : ne, se = "_b", O = "_s";
-function ye(e, t) {
-  fe(j.flush, [e]);
-  const a = ce(e);
-  return U(() => {
+const fe = new me(), he = typeof window < "u" && typeof window.document < "u";
+var te;
+const re = typeof process == "object" && ((te = process.env) == null ? void 0 : te.NODE_ENV) === "test", ye = he && !re ? ne : ie, le = "_b", O = "_s";
+function be(e, t) {
+  ye(_.flush, [e]);
+  const a = ve(e);
+  return Y(() => {
     var n;
-    const u = [t ? O : se];
+    const m = [t ? O : le];
     (n = e.props) == null || n.name;
-    const m = a ? N.mergeDeep(a, e) : e;
-    return j.addClassNames(m, u, []), u;
+    const c = a ? $.mergeDeep(a, e) : e;
+    return _.addClassNames(c, m, []), m;
   }, [e, t, a]);
 }
-var j;
+var _;
 ((e) => {
   let t = !0, a = {};
-  function u(s, f, p, h, r) {
-    Object.entries(s).forEach(([i, l]) => {
-      if (N.isKeyOf(i, S))
-        d(i, l, f, p, h, r);
-      else if (N.isKeyOf(i, ee))
-        u(l, f, [...p, i], h, r);
-      else if (N.isKeyOf(i, C)) {
-        if (Array.isArray(l)) {
-          const [g, b] = l;
-          u(b, f, [...p, i], h, r);
+  function m(s, f, p, h, r) {
+    Object.entries(s).forEach(([i, o]) => {
+      if ($.isKeyOf(i, T))
+        d(i, o, f, p, h, r);
+      else if ($.isKeyOf(i, ae))
+        m(o, f, [...p, i], h, r);
+      else if ($.isKeyOf(i, G)) {
+        if (Array.isArray(o)) {
+          const [x, N] = o;
+          m(N, f, [...p, i], h, r);
         }
-        N.isObject(l) && u(l, f, [...p, i], h, r);
-      } else N.isKeyOf(i, A) ? u(l, f, p, i, r) : N.isKeyOf(i, H) && (typeof l == "string" ? f.push(`${H[i]}-${l}`) : Object.entries(l).forEach(([g, b]) => {
-        u(b, f, [...p, H[i]], h, g);
+        $.isObject(o) && m(o, f, [...p, i], h, r);
+      } else $.isKeyOf(i, R) ? m(o, f, p, i, r) : $.isKeyOf(i, L) && (typeof o == "string" ? f.push(`${L[i]}-${o}`) : Object.entries(o).forEach(([x, N]) => {
+        m(N, f, [...p, L[i]], h, x);
       }));
     });
   }
-  e.addClassNames = u;
-  function m() {
+  e.addClassNames = m;
+  function c() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const s = Object.entries(S).reduce((i, [l], g) => (i[l] = g, i), {}), f = `:root{${me.getVariables()}--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
+    const s = Object.entries(T).reduce((i, [o], x) => (i[o] = x, i), {}), f = `:root{${de.getVariables()}--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;}
-.${se}{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;}
+.${le}{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;}
 .${O}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${O} path,.${O} circle,.${O} rect,.${O} line {transition: all var(--svgTransitionTime);}
 `, p = Object.entries(a);
     p.sort(
-      ([i], [l]) => (A[i] ?? 0) - (A[l] ?? 0)
+      ([i], [o]) => (R[i] ?? 0) - (R[o] ?? 0)
     );
     const h = p.reduce(
-      (i, [l, g]) => (l !== "normal" && i.push(`@media(min-width: ${A[l]}px){`), Object.entries(g).forEach(([b, B]) => {
-        const { __parents: X, ...re } = B, Y = Object.entries(re);
-        Y.sort(([w], [_]) => s[w] - s[_]), Y.forEach(([w, _]) => {
-          _.forEach((F) => {
-            var T;
-            const x = S[w].find((E) => Array.isArray(E.values) ? E.values.includes(F) : typeof F == typeof E.values);
-            if (!x) return;
-            const $ = o(w, F, +b, l), J = x.styleName ?? w, V = ((T = x.valueFormat) == null ? void 0 : T.call(x, F)) ?? F, R = D[+b];
-            i.push(`.${$}${R.map((E) => M[E]).join("")}{${J}:${V}}`);
+      (i, [o, x]) => (o !== "normal" && i.push(`@media(min-width: ${R[o]}px){`), Object.entries(x).forEach(([N, H]) => {
+        const { __parents: Q, ...oe } = H, Z = Object.entries(oe);
+        Z.sort(([w], [A]) => s[w] - s[A]), Z.forEach(([w, A]) => {
+          A.forEach((V) => {
+            var I, B;
+            const b = T[w].find((F) => Array.isArray(F.values) ? F.values.includes(V) : typeof V == typeof F.values);
+            if (!b) return;
+            const E = u(w, V, +N, o), q = K[+N].map((F) => J[F]).join(""), g = ((I = b.selector) == null ? void 0 : I.call(b, `.${E}`, q)) ?? `.${E}${q}`, C = Array.isArray(b.styleName) ? b.styleName : [b.styleName ?? w], j = ((B = b.valueFormat) == null ? void 0 : B.call(b, V)) ?? V;
+            i.push(`${g}{${C.map((F) => `${F}:${j}`).join(";")}}`);
           });
-        }), X && Object.entries(X).forEach(([w, _]) => {
-          const F = Object.entries(_);
-          F.sort(([z], [x]) => s[z] - s[x]), F.forEach(([z, x]) => {
-            x.forEach(($) => {
-              var Z;
-              const V = S[z].find((G) => Array.isArray(G.values) ? G.values.includes($) : typeof $ == typeof G.values);
-              if (!V) return;
-              const R = o(z, $, +b, l, w), T = V.styleName ?? z, E = ((Z = V.valueFormat) == null ? void 0 : Z.call(V, $)) ?? $, [Q] = D[+b];
-              i.push(`.${Q}-${w}:${Q} .${R}{${T}:${E}}`);
+        }), Q && Object.entries(Q).forEach(([w, A]) => {
+          const V = Object.entries(A);
+          V.sort(([z], [b]) => s[z] - s[b]), V.forEach(([z, b]) => {
+            b.forEach((E) => {
+              var P, k;
+              const g = T[z].find((S) => Array.isArray(S.values) ? S.values.includes(E) : typeof E == typeof S.values);
+              if (!g) return;
+              const C = u(z, E, +N, o, w), [j] = K[+N], I = ((P = g.selector) == null ? void 0 : P.call(g, `.${j}-${w}:${j} .${C}`, "")) ?? `.${j}-${w}:${j} .${C}`, B = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? z], F = ((k = g.valueFormat) == null ? void 0 : k.call(g, E)) ?? E;
+              i.push(`${I}{${B.map((S) => `${S}:${F}`).join(";")}}`);
             });
           });
         });
-      }), l !== "normal" && i.push("}"), i),
+      }), o !== "normal" && i.push("}"), i),
       [f]
     ), r = y();
     r.innerHTML = h.join(""), t = !1;
   }
-  e.flush = m;
+  e.flush = c;
   function n() {
     a = {};
   }
   e.clear = n;
   function d(s, f, p, h, r = "normal", i) {
     if (f == null) return;
-    const l = h.reduce((b, B) => b + te[B], 0);
-    a[r] ? a[r][l] ? a[r][l][s] || (a[r][l][s] = /* @__PURE__ */ new Set()) : a[r][l] = { [s]: /* @__PURE__ */ new Set() } : a[r] = { [l]: { [s]: /* @__PURE__ */ new Set() } }, i ? (a[r][l].__parents ? a[r][l].__parents[i] ? a[r][l].__parents[i][s] || (a[r][l].__parents[i][s] = /* @__PURE__ */ new Set()) : a[r][l].__parents[i] = { [s]: /* @__PURE__ */ new Set() } : a[r][l].__parents = { [i]: { [s]: /* @__PURE__ */ new Set() } }, a[r][l].__parents[i][s].has(f) || (a[r][l].__parents[i][s].add(f), t = !0)) : a[r][l][s].has(f) || (a[r][l][s].add(f), t = !0);
-    const g = o(s, f, l, r, i);
-    p.push(g);
+    const o = h.reduce((N, H) => N + se[H], 0);
+    a[r] ? a[r][o] ? a[r][o][s] || (a[r][o][s] = /* @__PURE__ */ new Set()) : a[r][o] = { [s]: /* @__PURE__ */ new Set() } : a[r] = { [o]: { [s]: /* @__PURE__ */ new Set() } }, i ? (a[r][o].__parents ? a[r][o].__parents[i] ? a[r][o].__parents[i][s] || (a[r][o].__parents[i][s] = /* @__PURE__ */ new Set()) : a[r][o].__parents[i] = { [s]: /* @__PURE__ */ new Set() } : a[r][o].__parents = { [i]: { [s]: /* @__PURE__ */ new Set() } }, a[r][o].__parents[i][s].has(f) || (a[r][o].__parents[i][s].add(f), t = !0)) : a[r][o][s].has(f) || (a[r][o][s].add(f), t = !0);
+    const x = u(s, f, o, r, i);
+    p.push(x);
   }
-  function o(s, f, p, h, r) {
-    const i = D[p], l = `${h === "normal" ? "" : `${h}-`}${i.map((g) => `${g}-`).join("")}${r ? `${r}-` : ""}${s}-${f}`;
-    return ae ? l : de.getIdentity(l);
+  function u(s, f, p, h, r) {
+    const i = K[p], o = `${h === "normal" ? "" : `${h}-`}${i.map((x) => `${x}-`).join("")}${r ? `${r}-` : ""}${s}-${f}`;
+    return re ? o : fe.getIdentity(o);
   }
   const v = "crono-styles";
   function y() {
     let s = document.getElementById(v);
     return s || (s = document.createElement("style"), s.setAttribute("id", v), s.setAttribute("type", "text/css"), document.head.insertBefore(s, document.head.firstChild)), s;
   }
-})(j || (j = {}));
-var P;
+})(_ || (_ = {}));
+var ee;
 ((e) => {
-  e.flush = j.flush, e.clear = j.clear;
-})(P || (P = {}));
-var L;
+  e.flush = _.flush, e.clear = _.clear;
+})(ee || (ee = {}));
+var M;
 ((e) => {
   const t = {
     button: {
@@ -1453,71 +1454,71 @@ var L;
       }
     }
   };
-  function a(u) {
-    const { components: m, ...n } = u, d = m ?? {};
-    Object.entries(n).forEach(([o, v]) => {
-      d[o] = v;
-    }), I.components = N.mergeDeep(t, d);
+  function a(m) {
+    const { components: c, ...n } = m, d = c ?? {};
+    Object.entries(n).forEach(([u, v]) => {
+      d[u] = v;
+    }), D.components = $.mergeDeep(t, d);
   }
   e.setup = a;
-})(L || (L = {}));
-const pe = L;
-var W;
+})(M || (M = {}));
+const ge = M;
+var X;
 ((e) => {
-  function t(u) {
-    const m = Array.from(u.elements).reduce(
+  function t(m) {
+    const c = Array.from(m.elements).reduce(
       (n, d) => {
-        const o = d.name;
-        return o && (n[o] || (n[o] = []), n[o].push(d)), n;
+        const u = d.name;
+        return u && (n[u] || (n[u] = []), n[u].push(d)), n;
       },
       {}
     );
-    return Object.entries(m).reduce((n, [d, o]) => {
-      if (o.length === 1) {
-        const v = o[0];
+    return Object.entries(c).reduce((n, [d, u]) => {
+      if (u.length === 1) {
+        const v = u[0];
         a(n, d, v.type === "checkbox" || v.type === "radio" ? v.checked : v.value);
       } else {
-        const v = o.reduce((y, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && y.push(s.value) : y.push(s.value), y), []);
+        const v = u.reduce((y, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && y.push(s.value) : y.push(s.value), y), []);
         a(n, d, v);
       }
       return n;
     }, {});
   }
   e.getFormEntries = t;
-  function a(u, m, n) {
-    if (m.includes(".")) {
-      const d = m.split(".");
-      let o = u;
+  function a(m, c, n) {
+    if (c.includes(".")) {
+      const d = c.split(".");
+      let u = m;
       d.forEach((v, y) => {
         if (d.length > y + 1) {
           const s = v.match(/^(.+)\[(\d)\]$/);
           if (s) {
             const [, f, p] = s;
-            o[f] = o[f] || [], o[f][p] = o[f][p] || {}, o = o[f][p];
+            u[f] = u[f] || [], u[f][p] = u[f][p] || {}, u = u[f][p];
           } else
-            o[v] = o[v] || {}, o = o[v];
+            u[v] = u[v] || {}, u = u[v];
         } else
-          o[v] = n;
+          u[v] = n;
       });
     } else
-      u[m] = n;
+      m[c] = n;
   }
-})(W || (W = {}));
-const ge = W;
-function be() {
-  return U(() => {
+})(X || (X = {}));
+const xe = X;
+function Ne() {
+  return Y(() => {
     const e = "crono-box";
     let t = document.getElementById(e);
     return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
   }, []);
 }
 export {
-  me as B,
-  ge as F,
-  N as O,
-  P as S,
-  pe as T,
-  be as a,
-  ie as c,
-  ye as u
+  de as B,
+  xe as F,
+  $ as O,
+  ee as S,
+  ge as T,
+  Ne as a,
+  ue as c,
+  be as u
 };

package/package.json

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