@cronocode/react-box 1.8.2 → 1.8.4

package/components/textarea.d.ts

@@ -11,7 +11,6 @@ interface Props extends Omit<BoxProps, 'props'> {
     onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     placeholder?: string;
-    disabled?: boolean;
     value?: string;
     defaultValue?: string;
     rows?: number;

package/core/boxStyles.d.ts

@@ -1215,7 +1215,7 @@ export declare const svgThemeStyles: {
         formatSelector: typeof BoxStylesFormatters.ClassName.svg;
     };
 };
-export declare const pseudoClassSuffixes: readonly ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional"];
+export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
 export declare const pseudoClassSuffixesExtended: readonly ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional", "Disabled"];
 export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
 export type PseudoClassSuffixExtended = (typeof pseudoClassSuffixesExtended)[number];

package/core/types.d.ts

@@ -23,9 +23,11 @@ interface BoxPseudoClasses {
 interface BoxPseudoClasses2 {
     disabled?: boolean | [boolean, BoxNormalStyles];
 }
-type BoxPseudoClassStyles = PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'> & PseudoClass<BoxNormalStyles, 'Checked'> & PseudoClass<BoxNormalStyles, 'Indeterminate'> & PseudoClass<BoxNormalStyles, 'Valid'> & PseudoClass<BoxNormalStyles, 'Invalid'> & PseudoClass<BoxNormalStyles, 'Required'> & PseudoClass<BoxNormalStyles, 'Optional'>;
+type BoxPseudoClassStyles = PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'>;
 interface BoxThemePseudoClassProps {
     disabled?: BoxNormalStyles;
+    indeterminate?: BoxNormalStyles;
+    checked?: BoxNormalStyles;
 }
 export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxPseudoClassStyles;
 export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & BoxPseudoClasses2 & BoxPseudoClassStyles & ThemeComponentProps;
@@ -34,5 +36,5 @@ interface SvgNormalStyles {
     flip?: BoxNormalStyles['flip'];
     transitionDuration?: BoxNormalStyles['transitionDuration'];
 }
-export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & PseudoClass<SvgNormalStyles, 'Checked'> & PseudoClass<SvgNormalStyles, 'Indeterminate'> & PseudoClass<SvgNormalStyles, 'Valid'> & PseudoClass<SvgNormalStyles, 'Invalid'> & PseudoClass<SvgNormalStyles, 'Required'> & PseudoClass<SvgNormalStyles, 'Optional'> & ThemeComponentProps & Augmented.SvgProps;
+export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & ThemeComponentProps & Augmented.SvgProps;
 export {};

package/core.cjs

@@ -1,38 +1,38 @@
-"use strict";const I=require("react");var e;(u=>{(r=>{function m(a,b){return`${a}${b.replace("/","-")}`}r.fraction=m;function n(a){return[`${a} path`,`${a} circle`,`${a} rect`,`${a} line`]}r.svg=n})(u.ClassName||(u.ClassName={})),(r=>{function m(l,s){return`${s/4}rem`}r.rem=m;function n(l,s){return`${s}px`}r.px=n;function a(l,s){const[t,N]=s.split("/");return`${+t/+N*100}%`}r.fraction=a;function b(l,s){switch(s){case"fit":return"100%";case"fit-screen":return l.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return s}}r.widthHeight=b;function V(l){return(s,t)=>`var(--${l}${t});`}r.variables=V;function $(l){return(s,t)=>`var(--${l}${t});`}r.svgVariables=$;function v(l,s){return`repeat(${s},minmax(0,1fr))`}r.gridColumns=v;function d(l,s){return s==="full-row"?"1/-1":`span ${s}/span ${s}`}r.gridColumn=d;function c(l,s){return`${s}ms`}r.ms=c;function p(l,s){return`${s}deg`}r.rotate=p;function h(l,s){return s==="xAxis"?"-1 1":"1 -1"}r.flip=h})(u.Value||(u.Value={}))})(e||(e={}));const i=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,64,68,72,76,80,84,88,92,96,100,120,140,160,180,200,250,300],G=[-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-22,-24,-26,-28,-30,-32,-34,-36,-38,-40,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],f=[...i,...G],R=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],A=["auto","hidden","scroll","visible"],C=["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"],j=["fit","fit-screen","auto","fit-content","max-content","min-content"],_=["auto","flex-start","flex-end","center","baseline","stretch"],w={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},inline:{cssNames:["display"],values1:{values:[!0]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:j,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:C,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:f,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:f,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:f,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:R},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{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"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:A},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:i,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:i,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},jc:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},ai:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},d:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:i},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:_},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:_},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:i,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:i,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:i},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:i},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:R},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}},rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}},D={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:e.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},q={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},U=["H","F","A","Checked","Indeterminate","Valid","Invalid","Required","Optional"],X=["H","F","A","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],S={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(D).forEach(u=>{w[u]=D[u],w[u].isThemeStyle=!0});Object.keys(q).forEach(u=>{w[u]=q[u],w[u].isThemeStyle=!0});const Y=Object.keys(w);X.forEach(u=>{Y.forEach(r=>{w[`${r}${u}`]={...w[r]},w[`${r}${u}`].pseudoSuffix=u})});class J{constructor(){this._index=0,this._cache={}}getIdentity(r){return this._cache[r]||(this._cache[r]=this.getByIndex(this._index++)),this._cache[r]}getByIndex(r){const{first:m,next:n}=Q,a=r-m.length;if(a<0)return m[r];const b=Math.floor(a/n.length),V=a-b*n.length;return this.getByIndex(b)+n[V]}}const Q={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var O;(u=>{u.boxClassName="_box",u.svgClassName="_svg",u.cronoStylesElementId="crono-styles";const r=`: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");var e;(t=>{(r=>{function m(l,b){return`${l}${b.replace("/","-")}`}r.fraction=m;function v(l){return[`${l} path`,`${l} circle`,`${l} rect`,`${l} line`]}r.svg=v})(t.ClassName||(t.ClassName={})),(r=>{function m(s,a){return`${a/4}rem`}r.rem=m;function v(s,a){return`${a}px`}r.px=v;function l(s,a){const[u,p]=a.split("/");return`${+u/+p*100}%`}r.fraction=l;function b(s,a){switch(a){case"fit":return"100%";case"fit-screen":return s.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return a}}r.widthHeight=b;function N(s){return(a,u)=>`var(--${s}${u});`}r.variables=N;function x(s){return(a,u)=>`var(--${s}${u});`}r.svgVariables=x;function j(s,a){return`repeat(${a},minmax(0,1fr))`}r.gridColumns=j;function o(s,a){return a==="full-row"?"1/-1":`span ${a}/span ${a}`}r.gridColumn=o;function n(s,a){return`${a}ms`}r.ms=n;function g(s,a){return`${a}deg`}r.rotate=g;function f(s,a){return a==="xAxis"?"-1 1":"1 -1"}r.flip=f})(t.Value||(t.Value={}))})(e||(e={}));const i=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,64,68,72,76,80,84,88,92,96,100,120,140,160,180,200,250,300],G=[-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-22,-24,-26,-28,-30,-32,-34,-36,-38,-40,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],d=[...i,...G],R=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],A=["auto","hidden","scroll","visible"],k=["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"],C=["fit","fit-screen","auto","fit-content","max-content","min-content"],_=["auto","flex-start","flex-end","center","baseline","stretch"],w={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},inline:{cssNames:["display"],values1:{values:[!0]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:C,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:k,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:R},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{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"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:A},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:i,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:i,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},jc:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},ai:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},d:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:i},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:_},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:_},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:i,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:i,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:i},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:i},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:R},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}},rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}},D={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:e.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},P={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},U=["H","F","A"],X=["H","F","A","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],S={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(D).forEach(t=>{w[t]=D[t],w[t].isThemeStyle=!0});Object.keys(P).forEach(t=>{w[t]=P[t],w[t].isThemeStyle=!0});const Y=Object.keys(w);X.forEach(t=>{Y.forEach(r=>{w[`${r}${t}`]={...w[r],pseudoSuffix:t}})});class J{constructor(){this._index=0,this._cache={}}getIdentity(r){return this._cache[r]||(this._cache[r]=this.getByIndex(this._index++)),this._cache[r]}getByIndex(r){const{first:m,next:v}=Q,l=r-m.length;if(l<0)return m[r];const b=Math.floor(l/v.length),N=l-b*v.length;return this.getByIndex(b)+v[N]}}const Q={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var O;(t=>{t.boxClassName="_box",t.svgClassName="_svg",t.cronoStylesElementId="crono-styles";const r=`: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;}
-.${u.boxClassName}{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;}
-.${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
-`,m=new J,n=Object.keys(w);let a=!0,b=n.reduce((l,s)=>(l[s]=new Set,l),{});function V(l,s){if(l in w)return d(l,s);if(l in S)return S[l].className}u.get=V;function $(){if(a){let l=c([r]);l=c(l,"H"),l=c(l,"F"),l=c(l,"A"),l=c(l,"Checked"),l=c(l,"Indeterminate"),l=c(l,"Valid"),l=c(l,"Invalid"),l=c(l,"Required"),l=c(l,"Disabled");const s=h();s.innerHTML=l.join(""),a=!1}}u.flush=$;function v(){b=n.reduce((l,s)=>(l[s]=new Set,l),{})}u.clear=v;function d(l,s){var y;b[l].has(s)||(a=!0,b[l].add(s));const t=p(l,s),N=((y=t.formatClassName)==null?void 0:y.call(t,l,s))??`${l}${s}`;return m.getIdentity(N)}function c(l,s){return Object.entries(b).filter(([N])=>{var y;return((y=w[N])==null?void 0:y.pseudoSuffix)===s}).reduce((N,[y,H])=>(H.forEach(k=>{var F;const o=p(y,k),g=`.${d(y,k)}`;let x=[];s?s==="H"?x=[...t(`${g}:hover`,o),...t(`.${S.hover.className}:hover>${g}`,o)]:s==="F"?x=[...t(`${g}:focus-within`,o),...t(`.${S.focus.className}:focus-within>${g}`,o)]:s==="A"?x=t(`${g}:active`,o):s==="Checked"?x=t(`${g}:checked`,o):s==="Indeterminate"?x=t(`${g}:indeterminate`,o):s==="Valid"?x=t(`${g}:valid`,o):s==="Invalid"?x=t(`${g}:invalid`,o):s==="Required"?x=t(`${g}:required`,o):s==="Optional"?x=t(`${g}:optional`,o):s==="Disabled"&&(x=t(`${g}:disabled`,o)):x=t(g,o);const L=((F=o.formatValue)==null?void 0:F.call(o,y,k))??k,M=w[y].cssNames.map(W=>`${W}:${L};`).join("");N.push(`${x.join(",")}{${M}}`)}),N),l);function t(N,y){return y.formatSelector?y.formatSelector(N):[N]}}function p(l,s){const t=w[l];return t.isThemeStyle?t:t.values1.values.includes(s)?t.values1:t.values2.values.includes(s)?t.values2:t.values3}function h(){const s=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let t=s.getElementById(u.cronoStylesElementId);return t||(t=s.createElement("style"),t.setAttribute("id",u.cronoStylesElementId),t.setAttribute("type","text/css"),s.head.insertBefore(t,s.head.firstChild)),t}})(O||(O={}));const z=O,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}}};var E;(u=>{function r(v){b(v),$(v),u.Styles=v,a()}u.setup=r;function m(v,d){const c=Object.entries(v.colors).map(([o,g])=>`--color${o}: ${g};`).join(`
-  `),p=Object.entries(v.shadows).map(([o,g])=>`--shadow${o}: ${g};`).join(`
-  `),h=Object.entries(v.backgrounds).map(([o,g])=>`--background${o}: ${g};`).join(`
-  `),l=Object.entries(v.backgroundImages).map(([o,g])=>`--backgroundImage${o}: ${g};`).join(`
-  `),s=[":root {"];c&&s.push(`  ${c}`),p&&s.push(`  ${p}`),h&&s.push(`  ${h}`),l&&s.push(`  ${l}`),s.push("}");const t=Object.keys(v.colors).map(o=>`'${o}'`).join(" | "),N=Object.keys(v.backgrounds).map(o=>`'${o}'`).join(" | "),y=Object.keys(v.backgroundImages).map(o=>`'${o}'`).join(" | "),H=Object.keys(v.shadows).map(o=>`'${o}'`).join(" | "),k=`import '@cronocode/react-box';
+.${t.boxClassName}{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;}
+.${t.svgClassName}{transition: all var(--svgTransitionTime);}.${t.svgClassName} path,.${t.svgClassName} circle,.${t.svgClassName} rect,.${t.svgClassName} line {transition: all var(--svgTransitionTime);}
+`,m=new J,v=Object.keys(w);let l=!0,b=v.reduce((s,a)=>(s[a]=new Set,s),{});function N(s,a){if(s in w)return o(s,a);if(s in S)return S[s].className}t.get=N;function x(){if(l){let s=n([r]);s=n(s,"H"),s=n(s,"F"),s=n(s,"A"),s=n(s,"Checked"),s=n(s,"Indeterminate"),s=n(s,"Valid"),s=n(s,"Invalid"),s=n(s,"Required"),s=n(s,"Disabled");const a=f();a.innerHTML=s.join(""),l=!1}}t.flush=x;function j(){b=v.reduce((s,a)=>(s[a]=new Set,s),{})}t.clear=j;function o(s,a){var y;b[s].has(a)||(l=!0,b[s].add(a));const u=g(s,a),p=((y=u.formatClassName)==null?void 0:y.call(u,s,a))??`${s}${a}`;return m.getIdentity(p)}function n(s,a){return Object.entries(b).filter(([p])=>{var y;return((y=w[p])==null?void 0:y.pseudoSuffix)===a}).reduce((p,[y,H])=>(H.forEach($=>{var F;const V=g(y,$),c=`.${o(y,$)}`;let h=[];a?a==="H"?h=[...u(`${c}:hover`,V),...u(`.${S.hover.className}:hover>${c}`,V)]:a==="F"?h=[...u(`${c}:focus-within`,V),...u(`.${S.focus.className}:focus-within>${c}`,V)]:a==="A"?h=u(`${c}:active`,V):a==="Checked"?h=u(`${c}:checked`,V):a==="Indeterminate"?h=u(`${c}:indeterminate`,V):a==="Valid"?h=u(`${c}:valid`,V):a==="Invalid"?h=u(`${c}:invalid`,V):a==="Required"?h=u(`${c}:required`,V):a==="Optional"?h=u(`${c}:optional`,V):a==="Disabled"&&(h=u(`${c}:disabled`,V)):h=u(c,V);const L=((F=V.formatValue)==null?void 0:F.call(V,y,$))??$,M=w[y].cssNames.map(W=>`${W}:${L};`).join("");p.push(`${h.join(",")}{${M}}`)}),p),s);function u(p,y){return y.formatSelector?y.formatSelector(p):[p]}}function g(s,a){const u=w[s];return u.isThemeStyle?u:u.values1.values.includes(a)?u.values1:u.values2.values.includes(a)?u.values2:u.values3}function f(){const a=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let u=a.getElementById(t.cronoStylesElementId);return u||(u=a.createElement("style"),u.setAttribute("id",t.cronoStylesElementId),u.setAttribute("type","text/css"),a.head.insertBefore(u,a.head.firstChild)),u}})(O||(O={}));const T=O,z={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}}};var E;(t=>{t.Styles=b(z);function r(o){t.Styles=l(o)}t.setup=r;function m(o,n){const g=Object.entries(o.colors).map(([c,h])=>`--color${c}: ${h};`).join(`
+  `),f=Object.entries(o.shadows).map(([c,h])=>`--shadow${c}: ${h};`).join(`
+  `),s=Object.entries(o.backgrounds).map(([c,h])=>`--background${c}: ${h};`).join(`
+  `),a=Object.entries(o.backgroundImages).map(([c,h])=>`--backgroundImage${c}: ${h};`).join(`
+  `),u=[":root {"];g&&u.push(`  ${g}`),f&&u.push(`  ${f}`),s&&u.push(`  ${s}`),a&&u.push(`  ${a}`),u.push("}");const p=Object.keys(o.colors).map(c=>`'${c}'`).join(" | "),y=Object.keys(o.backgrounds).map(c=>`'${c}'`).join(" | "),H=Object.keys(o.backgroundImages).map(c=>`'${c}'`).join(" | "),$=Object.keys(o.shadows).map(c=>`'${c}'`).join(" | "),V=`import '@cronocode/react-box';
   
-  declare module '${(d==null?void 0:d.namespacePath)??"@cronocode/react-box/core/types"}' {
-    type ColorType = ${t};
-    type BackgroundType = ${N};
-    type BackgroundImageType = ${y};
-    type ShadowType = ${H};
+  declare module '${(n==null?void 0:n.namespacePath)??"@cronocode/react-box/core/types"}' {
+    type ColorType = ${p};
+    type BackgroundType = ${y};
+    type BackgroundImageType = ${H};
+    type ShadowType = ${$};
   
     namespace Augmented {
       interface BoxProps {
-${n("color","ColorType")}
-${n("bgColor","ColorType")}
-${n("borderColor","ColorType")}
-${n("outlineColor","ColorType")}
-${n("background","BackgroundType")}
-${n("backgroundImage","BackgroundImageType")}
-${n("shadow","ShadowType")}
+${v("color","ColorType")}
+${v("bgColor","ColorType")}
+${v("borderColor","ColorType")}
+${v("outlineColor","ColorType")}
+${v("background","BackgroundType")}
+${v("backgroundImage","BackgroundImageType")}
+${v("shadow","ShadowType")}
       }
   
       interface SvgProps {
-${n("fill","ColorType")}
-${n("stroke","ColorType")}
+${v("fill","ColorType")}
+${v("stroke","ColorType")}
       }
     }
   }
-  `;return{variables:s.join(`
-`),boxDts:k}}u.setupAugmentedProps=m;function n(v,d){const c=U.map(p=>`        ${v}${p}?: ${d};`);return c.unshift(`        ${v}?: ${d};`),c.join(`
-`)}function a(){b(T),$(T),Object.keys(T).forEach(d=>{const c=u.Styles[d],p=T[d];c?c.styles={...p.styles,...c.styles}:u.Styles[d]=T[d]})}function b(v){if(!v.components)return;const d=Object.keys(v.components);for(const c of d){const p=v.components[c],h=V(c,p);delete p.children;for(const l of h){const[s,t]=l;v.components[s]=t}}}function V(v,d){if(!d.children)return[];const c=Object.keys(d.children),p=[];for(const h of c){const l=`${v}.${h}`,s=d.children[h],t=V(l,s);p.push(...t),delete s.children,p.push([l,s])}return p}function $(v){const{components:d,...c}=v,p=Object.values(c);d&&p.push(...Object.values(d));for(const h of p)"disabled"in h.styles&&(Object.entries(h.styles.disabled).map(([l,s])=>{h.styles[`${l}Disabled`]=s}),delete h.styles.disabled)}})(E||(E={}));const B=E;function Z(u){const{clean:r,theme:m,component:n}=u;return I.useMemo(()=>{var b,V;if(r)return;let a=B.Styles[n]??((b=B.Styles.components)==null?void 0:b[n]);if(a)return m?{...a.styles,...(V=a.themes)==null?void 0:V[m].styles}:a.styles},[n,r,m])}const K=typeof window<"u"&&typeof window.document<"u",ee=K?I.useLayoutEffect:I.useEffect;function se(u,r){const m=Z(u);return ee(z.flush,[u]),I.useMemo(()=>{const n=[r?z.svgClassName:z.boxClassName],a=m?{...m,...u}:{...u};return Array.isArray(a.disabled)&&(Object.entries(a.disabled[1]).forEach(([b,V])=>{a[`${b}Disabled`]=V}),delete a.disabled),"inline"in a&&(a.display==="block"||!a.display?a.display="inline-block":a.display==="flex"?a.display="inline-flex":a.display==="grid"&&(a.display="inline-grid"),delete a.inline),"inlineH"in a&&(a.displayH==="block"||!a.displayH?a.displayH="inline-block":a.displayH==="flex"?a.displayH="inline-flex":a.displayH==="grid"&&(a.displayH="inline-grid"),delete a.inlineH),"inlineF"in a&&(a.displayF==="block"||!a.displayF?a.displayF="inline-block":a.displayF==="flex"?a.displayF="inline-flex":a.displayF==="grid"&&(a.displayF="inline-grid"),delete a.inlineF),"inlineA"in a&&(a.displayA==="block"||!a.displayA?a.displayA="inline-block":a.displayA==="flex"?a.displayA="inline-flex":a.displayA==="grid"&&(a.displayA="inline-grid"),delete a.inlineA),Object.entries(a).forEach(([b,V])=>{n.push(z.get(b,V))}),n},[u,m])}function P(...u){return u.reduce((r,m)=>m?typeof m=="string"?(r.push(m),r):Array.isArray(m)?(r.push(...P(...m)),r):(Object.entries(m).forEach(([n,a])=>{a&&r.push(n)}),r):r,[])}exports.StylesContext=z;exports.Theme=B;exports.classNames=P;exports.useStyles=se;
+  `;return{variables:u.join(`
+`),boxDts:V}}t.setupAugmentedProps=m;function v(o,n){const g=U.map(f=>`        ${o}${f}?: ${n};`);return g.unshift(`        ${o}?: ${n};`),g.join(`
+`)}function l(o){const n=b(o);return Object.keys(z).forEach(f=>{const s=n[f],a=z[f];s?s.styles={...a.styles,...s.styles}:n[f]=z[f]}),n}function b(o){return N(o),j(o),o}function N(o){if(!o.components)return;const n=Object.keys(o.components);for(const g of n){const f=o.components[g],s=x(g,f);delete f.children;for(const a of s){const[u,p]=a;o.components[u]=p}}}function x(o,n){if(!n.children)return[];const g=Object.keys(n.children),f=[];for(const s of g){const a=`${o}.${s}`,u=n.children[s],p=x(a,u);f.push(...p),delete u.children,f.push([a,u])}return f}function j(o){const{components:n,...g}=o,f=Object.values(g);n&&f.push(...Object.values(n));for(const s of f)[["disabled","Disabled"],["indeterminate","Indeterminate"],["checked","Checked"]].forEach(([a,u])=>{a in s.styles&&(Object.entries(s.styles[a]).map(([p,y])=>{s.styles[`${p}${u}`]=y}),delete s.styles[a])})}})(E||(E={}));const B=E;function Z(t){const{clean:r,theme:m,component:v}=t;return I.useMemo(()=>{var b,N;if(r)return;let l=B.Styles[v]??((b=B.Styles.components)==null?void 0:b[v]);if(l)return m?{...l.styles,...(N=l.themes)==null?void 0:N[m].styles}:l.styles},[v,r,m])}const K=typeof window<"u"&&typeof window.document<"u",ee=K?I.useLayoutEffect:I.useEffect;function se(t,r){const m=Z(t);return ee(T.flush,[t]),I.useMemo(()=>{const v=[r?T.svgClassName:T.boxClassName],l=m?{...m,...t}:{...t};return Array.isArray(l.disabled)&&(Object.entries(l.disabled[1]).forEach(([b,N])=>{l[`${b}Disabled`]=N}),delete l.disabled),"inline"in l&&(l.display==="block"||!l.display?l.display="inline-block":l.display==="flex"?l.display="inline-flex":l.display==="grid"&&(l.display="inline-grid"),delete l.inline),"inlineH"in l&&(l.displayH==="block"||!l.displayH?l.displayH="inline-block":l.displayH==="flex"?l.displayH="inline-flex":l.displayH==="grid"&&(l.displayH="inline-grid"),delete l.inlineH),"inlineF"in l&&(l.displayF==="block"||!l.displayF?l.displayF="inline-block":l.displayF==="flex"?l.displayF="inline-flex":l.displayF==="grid"&&(l.displayF="inline-grid"),delete l.inlineF),"inlineA"in l&&(l.displayA==="block"||!l.displayA?l.displayA="inline-block":l.displayA==="flex"?l.displayA="inline-flex":l.displayA==="grid"&&(l.displayA="inline-grid"),delete l.inlineA),Object.entries(l).forEach(([b,N])=>{v.push(T.get(b,N))}),v},[t,m])}function q(...t){return t.reduce((r,m)=>m?typeof m=="string"?(r.push(m),r):Array.isArray(m)?(r.push(...q(...m)),r):(Object.entries(m).forEach(([v,l])=>{l&&r.push(v)}),r):r,[])}exports.StylesContext=T;exports.Theme=B;exports.classNames=q;exports.useStyles=se;

package/core.mjs

@@ -1,69 +1,69 @@
 import { useMemo as P, useLayoutEffect as G, useEffect as M } from "react";
 var e;
-((u) => {
+((t) => {
   ((r) => {
-    function m(a, b) {
-      return `${a}${b.replace("/", "-")}`;
+    function m(l, b) {
+      return `${l}${b.replace("/", "-")}`;
     }
     r.fraction = m;
-    function n(a) {
-      return [`${a} path`, `${a} circle`, `${a} rect`, `${a} line`];
+    function v(l) {
+      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
     }
-    r.svg = n;
-  })(u.ClassName || (u.ClassName = {})), ((r) => {
-    function m(l, s) {
-      return `${s / 4}rem`;
+    r.svg = v;
+  })(t.ClassName || (t.ClassName = {})), ((r) => {
+    function m(s, a) {
+      return `${a / 4}rem`;
     }
     r.rem = m;
-    function n(l, s) {
-      return `${s}px`;
+    function v(s, a) {
+      return `${a}px`;
     }
-    r.px = n;
-    function a(l, s) {
-      const [t, N] = s.split("/");
-      return `${+t / +N * 100}%`;
+    r.px = v;
+    function l(s, a) {
+      const [u, p] = a.split("/");
+      return `${+u / +p * 100}%`;
     }
-    r.fraction = a;
-    function b(l, s) {
-      switch (s) {
+    r.fraction = l;
+    function b(s, a) {
+      switch (a) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return s.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return s;
+          return a;
       }
     }
     r.widthHeight = b;
-    function V(l) {
-      return (s, t) => `var(--${l}${t});`;
+    function N(s) {
+      return (a, u) => `var(--${s}${u});`;
     }
-    r.variables = V;
-    function $(l) {
-      return (s, t) => `var(--${l}${t});`;
+    r.variables = N;
+    function x(s) {
+      return (a, u) => `var(--${s}${u});`;
     }
-    r.svgVariables = $;
-    function v(l, s) {
-      return `repeat(${s},minmax(0,1fr))`;
+    r.svgVariables = x;
+    function j(s, a) {
+      return `repeat(${a},minmax(0,1fr))`;
     }
-    r.gridColumns = v;
-    function d(l, s) {
-      return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
+    r.gridColumns = j;
+    function o(s, a) {
+      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    r.gridColumn = d;
-    function c(l, s) {
-      return `${s}ms`;
+    r.gridColumn = o;
+    function n(s, a) {
+      return `${a}ms`;
     }
-    r.ms = c;
-    function p(l, s) {
-      return `${s}deg`;
+    r.ms = n;
+    function g(s, a) {
+      return `${a}deg`;
     }
-    r.rotate = p;
-    function h(l, s) {
-      return s === "xAxis" ? "-1 1" : "1 -1";
+    r.rotate = g;
+    function f(s, a) {
+      return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = h;
-  })(u.Value || (u.Value = {}));
+    r.flip = f;
+  })(t.Value || (t.Value = {}));
 })(e || (e = {}));
 const i = [
   0,
@@ -170,7 +170,7 @@ const i = [
   -92,
   -96,
   -100
-], f = [...i, ...U], B = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], H = ["auto", "hidden", "scroll", "visible"], C = [
+], d = [...i, ...U], B = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], H = ["auto", "hidden", "scroll", "visible"], k = [
   "1/2",
   "1/3",
   "2/3",
@@ -197,7 +197,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], j = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], w = {
+], C = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], F = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], w = {
   /** The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
   display: {
     cssNames: ["display"],
@@ -221,60 +221,60 @@ const i = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: j, formatValue: e.Value.widthHeight },
+    values1: { values: C, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: C,
+      values: k,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -287,115 +287,115 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: f, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -407,37 +407,37 @@ const i = [
   },
   bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: f, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -857,7 +857,7 @@ const i = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, X = ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional"], Y = [
+}, X = ["H", "F", "A"], Y = [
   "H",
   "F",
   "A",
@@ -868,20 +868,20 @@ const i = [
   "Required",
   "Optional",
   "Disabled"
-], z = {
+], T = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(R).forEach((u) => {
-  w[u] = R[u], w[u].isThemeStyle = !0;
+Object.keys(R).forEach((t) => {
+  w[t] = R[t], w[t].isThemeStyle = !0;
 });
-Object.keys(_).forEach((u) => {
-  w[u] = _[u], w[u].isThemeStyle = !0;
+Object.keys(_).forEach((t) => {
+  w[t] = _[t], w[t].isThemeStyle = !0;
 });
 const J = Object.keys(w);
-Y.forEach((u) => {
+Y.forEach((t) => {
   J.forEach((r) => {
-    w[`${r}${u}`] = { ...w[r] }, w[`${r}${u}`].pseudoSuffix = u;
+    w[`${r}${t}`] = { ...w[r], pseudoSuffix: t };
   });
 });
 class Q {
@@ -892,11 +892,11 @@ class Q {
     return this._cache[r] || (this._cache[r] = this.getByIndex(this._index++)), this._cache[r];
   }
   getByIndex(r) {
-    const { first: m, next: n } = Z, a = r - m.length;
-    if (a < 0)
+    const { first: m, next: v } = Z, l = r - m.length;
+    if (l < 0)
       return m[r];
-    const b = Math.floor(a / n.length), V = a - b * n.length;
-    return this.getByIndex(b) + n[V];
+    const b = Math.floor(l / v.length), N = l - b * v.length;
+    return this.getByIndex(b) + v[N];
   }
 }
 const Z = {
@@ -904,81 +904,81 @@ const Z = {
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
 var A;
-((u) => {
-  u.boxClassName = "_box", u.svgClassName = "_svg", u.cronoStylesElementId = "crono-styles";
+((t) => {
+  t.boxClassName = "_box", t.svgClassName = "_svg", t.cronoStylesElementId = "crono-styles";
   const r = `: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;}
-.${u.boxClassName}{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;}
-.${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, m = new Q(), n = Object.keys(w);
-  let a = !0, b = n.reduce(
-    (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
+.${t.boxClassName}{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;}
+.${t.svgClassName}{transition: all var(--svgTransitionTime);}.${t.svgClassName} path,.${t.svgClassName} circle,.${t.svgClassName} rect,.${t.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, m = new Q(), v = Object.keys(w);
+  let l = !0, b = v.reduce(
+    (s, a) => (s[a] = /* @__PURE__ */ new Set(), s),
     {}
   );
-  function V(l, s) {
-    if (l in w)
-      return d(l, s);
-    if (l in z)
-      return z[l].className;
+  function N(s, a) {
+    if (s in w)
+      return o(s, a);
+    if (s in T)
+      return T[s].className;
   }
-  u.get = V;
-  function $() {
-    if (a) {
-      let l = c([r]);
-      l = c(l, "H"), l = c(l, "F"), l = c(l, "A"), l = c(l, "Checked"), l = c(l, "Indeterminate"), l = c(l, "Valid"), l = c(l, "Invalid"), l = c(l, "Required"), l = c(l, "Disabled");
-      const s = h();
-      s.innerHTML = l.join(""), a = !1;
+  t.get = N;
+  function x() {
+    if (l) {
+      let s = n([r]);
+      s = n(s, "H"), s = n(s, "F"), s = n(s, "A"), s = n(s, "Checked"), s = n(s, "Indeterminate"), s = n(s, "Valid"), s = n(s, "Invalid"), s = n(s, "Required"), s = n(s, "Disabled");
+      const a = f();
+      a.innerHTML = s.join(""), l = !1;
     }
   }
-  u.flush = $;
-  function v() {
-    b = n.reduce(
-      (l, s) => (l[s] = /* @__PURE__ */ new Set(), l),
+  t.flush = x;
+  function j() {
+    b = v.reduce(
+      (s, a) => (s[a] = /* @__PURE__ */ new Set(), s),
       {}
     );
   }
-  u.clear = v;
-  function d(l, s) {
+  t.clear = j;
+  function o(s, a) {
     var y;
-    b[l].has(s) || (a = !0, b[l].add(s));
-    const t = p(l, s), N = ((y = t.formatClassName) == null ? void 0 : y.call(t, l, s)) ?? `${l}${s}`;
-    return m.getIdentity(N);
+    b[s].has(a) || (l = !0, b[s].add(a));
+    const u = g(s, a), p = ((y = u.formatClassName) == null ? void 0 : y.call(u, s, a)) ?? `${s}${a}`;
+    return m.getIdentity(p);
   }
-  function c(l, s) {
-    return Object.entries(b).filter(([N]) => {
+  function n(s, a) {
+    return Object.entries(b).filter(([p]) => {
       var y;
-      return ((y = w[N]) == null ? void 0 : y.pseudoSuffix) === s;
-    }).reduce((N, [y, I]) => (I.forEach((k) => {
+      return ((y = w[p]) == null ? void 0 : y.pseudoSuffix) === a;
+    }).reduce((p, [y, I]) => (I.forEach(($) => {
       var E;
-      const o = p(y, k), g = `.${d(y, k)}`;
-      let x = [];
-      s ? s === "H" ? x = [
-        ...t(`${g}:hover`, o),
-        ...t(`.${z.hover.className}:hover>${g}`, o)
-      ] : s === "F" ? x = [
-        ...t(`${g}:focus-within`, o),
-        ...t(`.${z.focus.className}:focus-within>${g}`, o)
-      ] : s === "A" ? x = t(`${g}:active`, o) : s === "Checked" ? x = t(`${g}:checked`, o) : s === "Indeterminate" ? x = t(`${g}:indeterminate`, o) : s === "Valid" ? x = t(`${g}:valid`, o) : s === "Invalid" ? x = t(`${g}:invalid`, o) : s === "Required" ? x = t(`${g}:required`, o) : s === "Optional" ? x = t(`${g}:optional`, o) : s === "Disabled" && (x = t(`${g}:disabled`, o)) : x = t(g, o);
-      const q = ((E = o.formatValue) == null ? void 0 : E.call(o, y, k)) ?? k, L = w[y].cssNames.map((W) => `${W}:${q};`).join("");
-      N.push(`${x.join(",")}{${L}}`);
-    }), N), l);
-    function t(N, y) {
-      return y.formatSelector ? y.formatSelector(N) : [N];
+      const V = g(y, $), c = `.${o(y, $)}`;
+      let h = [];
+      a ? a === "H" ? h = [
+        ...u(`${c}:hover`, V),
+        ...u(`.${T.hover.className}:hover>${c}`, V)
+      ] : a === "F" ? h = [
+        ...u(`${c}:focus-within`, V),
+        ...u(`.${T.focus.className}:focus-within>${c}`, V)
+      ] : a === "A" ? h = u(`${c}:active`, V) : a === "Checked" ? h = u(`${c}:checked`, V) : a === "Indeterminate" ? h = u(`${c}:indeterminate`, V) : a === "Valid" ? h = u(`${c}:valid`, V) : a === "Invalid" ? h = u(`${c}:invalid`, V) : a === "Required" ? h = u(`${c}:required`, V) : a === "Optional" ? h = u(`${c}:optional`, V) : a === "Disabled" && (h = u(`${c}:disabled`, V)) : h = u(c, V);
+      const L = ((E = V.formatValue) == null ? void 0 : E.call(V, y, $)) ?? $, q = w[y].cssNames.map((W) => `${W}:${L};`).join("");
+      p.push(`${h.join(",")}{${q}}`);
+    }), p), s);
+    function u(p, y) {
+      return y.formatSelector ? y.formatSelector(p) : [p];
     }
   }
-  function p(l, s) {
-    const t = w[l];
-    return t.isThemeStyle ? t : t.values1.values.includes(s) ? t.values1 : t.values2.values.includes(s) ? t.values2 : t.values3;
+  function g(s, a) {
+    const u = w[s];
+    return u.isThemeStyle ? u : u.values1.values.includes(a) ? u.values1 : u.values2.values.includes(a) ? u.values2 : u.values3;
   }
-  function h() {
-    const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let t = s.getElementById(u.cronoStylesElementId);
-    return t || (t = s.createElement("style"), t.setAttribute("id", u.cronoStylesElementId), t.setAttribute("type", "text/css"), s.head.insertBefore(t, s.head.firstChild)), t;
+  function f() {
+    const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let u = a.getElementById(t.cronoStylesElementId);
+    return u || (u = a.createElement("style"), u.setAttribute("id", t.cronoStylesElementId), u.setAttribute("type", "text/css"), a.head.insertBefore(u, a.head.firstChild)), u;
   }
 })(A || (A = {}));
-const S = A, T = {
+const z = A, S = {
   button: {
     styles: {
       display: "inline-block",
@@ -1021,125 +1021,136 @@ const S = A, T = {
   }
 };
 var O;
-((u) => {
-  function r(v) {
-    b(v), $(v), u.Styles = v, a();
+((t) => {
+  t.Styles = b(S);
+  function r(o) {
+    t.Styles = l(o);
   }
-  u.setup = r;
-  function m(v, d) {
-    const c = Object.entries(v.colors).map(([o, g]) => `--color${o}: ${g};`).join(`
-  `), p = Object.entries(v.shadows).map(([o, g]) => `--shadow${o}: ${g};`).join(`
-  `), h = Object.entries(v.backgrounds).map(([o, g]) => `--background${o}: ${g};`).join(`
-  `), l = Object.entries(v.backgroundImages).map(([o, g]) => `--backgroundImage${o}: ${g};`).join(`
-  `), s = [":root {"];
-    c && s.push(`  ${c}`), p && s.push(`  ${p}`), h && s.push(`  ${h}`), l && s.push(`  ${l}`), s.push("}");
-    const t = Object.keys(v.colors).map((o) => `'${o}'`).join(" | "), N = Object.keys(v.backgrounds).map((o) => `'${o}'`).join(" | "), y = Object.keys(v.backgroundImages).map((o) => `'${o}'`).join(" | "), I = Object.keys(v.shadows).map((o) => `'${o}'`).join(" | "), k = `import '@cronocode/react-box';
+  t.setup = r;
+  function m(o, n) {
+    const g = Object.entries(o.colors).map(([c, h]) => `--color${c}: ${h};`).join(`
+  `), f = Object.entries(o.shadows).map(([c, h]) => `--shadow${c}: ${h};`).join(`
+  `), s = Object.entries(o.backgrounds).map(([c, h]) => `--background${c}: ${h};`).join(`
+  `), a = Object.entries(o.backgroundImages).map(([c, h]) => `--backgroundImage${c}: ${h};`).join(`
+  `), u = [":root {"];
+    g && u.push(`  ${g}`), f && u.push(`  ${f}`), s && u.push(`  ${s}`), a && u.push(`  ${a}`), u.push("}");
+    const p = Object.keys(o.colors).map((c) => `'${c}'`).join(" | "), y = Object.keys(o.backgrounds).map((c) => `'${c}'`).join(" | "), I = Object.keys(o.backgroundImages).map((c) => `'${c}'`).join(" | "), $ = Object.keys(o.shadows).map((c) => `'${c}'`).join(" | "), V = `import '@cronocode/react-box';
   
-  declare module '${(d == null ? void 0 : d.namespacePath) ?? "@cronocode/react-box/core/types"}' {
-    type ColorType = ${t};
-    type BackgroundType = ${N};
-    type BackgroundImageType = ${y};
-    type ShadowType = ${I};
+  declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+    type ColorType = ${p};
+    type BackgroundType = ${y};
+    type BackgroundImageType = ${I};
+    type ShadowType = ${$};
   
     namespace Augmented {
       interface BoxProps {
-${n("color", "ColorType")}
-${n("bgColor", "ColorType")}
-${n("borderColor", "ColorType")}
-${n("outlineColor", "ColorType")}
-${n("background", "BackgroundType")}
-${n("backgroundImage", "BackgroundImageType")}
-${n("shadow", "ShadowType")}
+${v("color", "ColorType")}
+${v("bgColor", "ColorType")}
+${v("borderColor", "ColorType")}
+${v("outlineColor", "ColorType")}
+${v("background", "BackgroundType")}
+${v("backgroundImage", "BackgroundImageType")}
+${v("shadow", "ShadowType")}
       }
   
       interface SvgProps {
-${n("fill", "ColorType")}
-${n("stroke", "ColorType")}
+${v("fill", "ColorType")}
+${v("stroke", "ColorType")}
       }
     }
   }
   `;
     return {
-      variables: s.join(`
+      variables: u.join(`
 `),
-      boxDts: k
+      boxDts: V
     };
   }
-  u.setupAugmentedProps = m;
-  function n(v, d) {
-    const c = X.map((p) => `        ${v}${p}?: ${d};`);
-    return c.unshift(`        ${v}?: ${d};`), c.join(`
+  t.setupAugmentedProps = m;
+  function v(o, n) {
+    const g = X.map((f) => `        ${o}${f}?: ${n};`);
+    return g.unshift(`        ${o}?: ${n};`), g.join(`
 `);
   }
-  function a() {
-    b(T), $(T), Object.keys(T).forEach((d) => {
-      const c = u.Styles[d], p = T[d];
-      c ? c.styles = { ...p.styles, ...c.styles } : u.Styles[d] = T[d];
-    });
+  function l(o) {
+    const n = b(o);
+    return Object.keys(S).forEach((f) => {
+      const s = n[f], a = S[f];
+      s ? s.styles = { ...a.styles, ...s.styles } : n[f] = S[f];
+    }), n;
+  }
+  function b(o) {
+    return N(o), j(o), o;
   }
-  function b(v) {
-    if (!v.components)
+  function N(o) {
+    if (!o.components)
       return;
-    const d = Object.keys(v.components);
-    for (const c of d) {
-      const p = v.components[c], h = V(c, p);
-      delete p.children;
-      for (const l of h) {
-        const [s, t] = l;
-        v.components[s] = t;
+    const n = Object.keys(o.components);
+    for (const g of n) {
+      const f = o.components[g], s = x(g, f);
+      delete f.children;
+      for (const a of s) {
+        const [u, p] = a;
+        o.components[u] = p;
       }
     }
   }
-  function V(v, d) {
-    if (!d.children)
+  function x(o, n) {
+    if (!n.children)
       return [];
-    const c = Object.keys(d.children), p = [];
-    for (const h of c) {
-      const l = `${v}.${h}`, s = d.children[h], t = V(l, s);
-      p.push(...t), delete s.children, p.push([l, s]);
+    const g = Object.keys(n.children), f = [];
+    for (const s of g) {
+      const a = `${o}.${s}`, u = n.children[s], p = x(a, u);
+      f.push(...p), delete u.children, f.push([a, u]);
     }
-    return p;
+    return f;
   }
-  function $(v) {
-    const { components: d, ...c } = v, p = Object.values(c);
-    d && p.push(...Object.values(d));
-    for (const h of p)
-      "disabled" in h.styles && (Object.entries(h.styles.disabled).map(([l, s]) => {
-        h.styles[`${l}Disabled`] = s;
-      }), delete h.styles.disabled);
+  function j(o) {
+    const { components: n, ...g } = o, f = Object.values(g);
+    n && f.push(...Object.values(n));
+    for (const s of f)
+      [
+        ["disabled", "Disabled"],
+        ["indeterminate", "Indeterminate"],
+        ["checked", "Checked"]
+      ].forEach(([a, u]) => {
+        a in s.styles && (Object.entries(s.styles[a]).map(([p, y]) => {
+          s.styles[`${p}${u}`] = y;
+        }), delete s.styles[a]);
+      });
   }
 })(O || (O = {}));
 const D = O;
-function K(u) {
-  const { clean: r, theme: m, component: n } = u;
+function K(t) {
+  const { clean: r, theme: m, component: v } = t;
   return P(() => {
-    var b, V;
+    var b, N;
     if (r)
       return;
-    let a = D.Styles[n] ?? ((b = D.Styles.components) == null ? void 0 : b[n]);
-    if (a)
-      return m ? { ...a.styles, ...(V = a.themes) == null ? void 0 : V[m].styles } : a.styles;
-  }, [n, r, m]);
+    let l = D.Styles[v] ?? ((b = D.Styles.components) == null ? void 0 : b[v]);
+    if (l)
+      return m ? { ...l.styles, ...(N = l.themes) == null ? void 0 : N[m].styles } : l.styles;
+  }, [v, r, m]);
 }
 const ee = typeof window < "u" && typeof window.document < "u", se = ee ? G : M;
-function te(u, r) {
-  const m = K(u);
-  return se(S.flush, [u]), P(() => {
-    const n = [r ? S.svgClassName : S.boxClassName], a = m ? { ...m, ...u } : { ...u };
-    return Array.isArray(a.disabled) && (Object.entries(a.disabled[1]).forEach(([b, V]) => {
-      a[`${b}Disabled`] = V;
-    }), delete a.disabled), "inline" in a && (a.display === "block" || !a.display ? a.display = "inline-block" : a.display === "flex" ? a.display = "inline-flex" : a.display === "grid" && (a.display = "inline-grid"), delete a.inline), "inlineH" in a && (a.displayH === "block" || !a.displayH ? a.displayH = "inline-block" : a.displayH === "flex" ? a.displayH = "inline-flex" : a.displayH === "grid" && (a.displayH = "inline-grid"), delete a.inlineH), "inlineF" in a && (a.displayF === "block" || !a.displayF ? a.displayF = "inline-block" : a.displayF === "flex" ? a.displayF = "inline-flex" : a.displayF === "grid" && (a.displayF = "inline-grid"), delete a.inlineF), "inlineA" in a && (a.displayA === "block" || !a.displayA ? a.displayA = "inline-block" : a.displayA === "flex" ? a.displayA = "inline-flex" : a.displayA === "grid" && (a.displayA = "inline-grid"), delete a.inlineA), Object.entries(a).forEach(([b, V]) => {
-      n.push(S.get(b, V));
-    }), n;
-  }, [u, m]);
+function te(t, r) {
+  const m = K(t);
+  return se(z.flush, [t]), P(() => {
+    const v = [r ? z.svgClassName : z.boxClassName], l = m ? { ...m, ...t } : { ...t };
+    return Array.isArray(l.disabled) && (Object.entries(l.disabled[1]).forEach(([b, N]) => {
+      l[`${b}Disabled`] = N;
+    }), delete l.disabled), "inline" in l && (l.display === "block" || !l.display ? l.display = "inline-block" : l.display === "flex" ? l.display = "inline-flex" : l.display === "grid" && (l.display = "inline-grid"), delete l.inline), "inlineH" in l && (l.displayH === "block" || !l.displayH ? l.displayH = "inline-block" : l.displayH === "flex" ? l.displayH = "inline-flex" : l.displayH === "grid" && (l.displayH = "inline-grid"), delete l.inlineH), "inlineF" in l && (l.displayF === "block" || !l.displayF ? l.displayF = "inline-block" : l.displayF === "flex" ? l.displayF = "inline-flex" : l.displayF === "grid" && (l.displayF = "inline-grid"), delete l.inlineF), "inlineA" in l && (l.displayA === "block" || !l.displayA ? l.displayA = "inline-block" : l.displayA === "flex" ? l.displayA = "inline-flex" : l.displayA === "grid" && (l.displayA = "inline-grid"), delete l.inlineA), Object.entries(l).forEach(([b, N]) => {
+      v.push(z.get(b, N));
+    }), v;
+  }, [t, m]);
 }
-function ae(...u) {
-  return u.reduce((r, m) => m ? typeof m == "string" ? (r.push(m), r) : Array.isArray(m) ? (r.push(...ae(...m)), r) : (Object.entries(m).forEach(([n, a]) => {
-    a && r.push(n);
+function ae(...t) {
+  return t.reduce((r, m) => m ? typeof m == "string" ? (r.push(m), r) : Array.isArray(m) ? (r.push(...ae(...m)), r) : (Object.entries(m).forEach(([v, l]) => {
+    l && r.push(v);
   }), r) : r, []);
 }
 export {
-  S,
+  z as S,
   D as T,
   ae as c,
   te as u

package/package.json

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