@cronocode/react-box 1.8.0 → 1.8.2

package/core/boxStylesFormatters.d.ts

@@ -1,19 +1,19 @@
 export declare namespace BoxStylesFormatters {
     namespace ClassName {
-        function fraction(key: string, value: string | number | boolean): string;
+        function fraction(key: string, value: string): string;
         function svg(selector: string): string[];
     }
     namespace Value {
-        function rem(_key: string, value: string | number | boolean): string;
-        function px(_key: string, value: string | number | boolean): string;
-        function fraction(_key: string, value: string | number | boolean): string;
-        function widthHeight(key: string, value: string | number | boolean): string;
-        function variables(prefix: string): (key: string, value: string | number | boolean) => string;
-        function svgVariables(prefix: string): (key: string, value: string | number | boolean) => string;
-        function gridColumns(key: string, value: string | number | boolean): string;
-        function gridColumn(key: string, value: string | number | boolean): string;
-        function ms(key: string, value: string | number | boolean): string;
-        function rotate(key: string, value: string | number | boolean): string;
-        function flip(key: string, value: string | number | boolean): "-1 1" | "1 -1";
+        function rem(_key: string, value: number): string;
+        function px(_key: string, value: number): string;
+        function fraction(_key: string, value: string): string;
+        function widthHeight(key: string, value: string): string;
+        function variables(prefix: string): (key: string, value: string) => string;
+        function svgVariables(prefix: string): (key: string, value: string) => string;
+        function gridColumns(key: string, value: number): string;
+        function gridColumn(key: string, value: string | number): string;
+        function ms(key: string, value: number): string;
+        function rotate(key: string, value: number): string;
+        function flip(key: string, value: string): "-1 1" | "1 -1";
     }
 }

package/core/stylesContext.d.ts

@@ -2,7 +2,7 @@ declare namespace StylesContext {
     const boxClassName = "_box";
     const svgClassName = "_svg";
     const cronoStylesElementId = "crono-styles";
-    function get(key: string, value: string | number | boolean): string | undefined;
+    function get(key: string, value: unknown): string | undefined;
     function flush(): void;
     function clear(): void;
 }

package/core/theme.d.ts

@@ -1,27 +1,25 @@
 import { BoxStyleProps } from './types';
-export interface ThemeStyles {
-    styles: BoxStyleProps;
-    disabled?: BoxStyleProps;
+import { BoxThemeProps } from './types';
+export interface ThemeStyles<T> {
+    styles: T;
 }
-export interface ThemeComponentStyles {
-    styles: BoxStyleProps;
-    disabled?: BoxStyleProps;
+export interface ThemeComponentStyles<T = BoxStyleProps> extends ThemeStyles<T> {
     themes?: {
-        [name: string]: ThemeStyles;
+        [name: string]: ThemeStyles<T>;
     };
     children?: {
-        [name: string]: ThemeComponentStyles;
+        [name: string]: ThemeComponentStyles<T>;
     };
 }
-export interface ThemeSetup {
+export interface ThemeSetup<T = BoxStyleProps> {
     components?: {
-        [name: string]: ThemeComponentStyles;
+        [name: string]: ThemeComponentStyles<T>;
     };
-    button?: ThemeComponentStyles;
-    textbox?: ThemeComponentStyles;
-    textarea?: ThemeComponentStyles;
-    checkbox?: ThemeComponentStyles;
-    radioButton?: ThemeComponentStyles;
+    button?: ThemeComponentStyles<T>;
+    textbox?: ThemeComponentStyles<T>;
+    textarea?: ThemeComponentStyles<T>;
+    checkbox?: ThemeComponentStyles<T>;
+    radioButton?: ThemeComponentStyles<T>;
 }
 interface BoxAugmentedProps {
     colors: Record<string, string>;
@@ -30,8 +28,8 @@ interface BoxAugmentedProps {
     backgroundImages: Record<string, string>;
 }
 declare namespace Theme {
-    let Styles: ThemeSetup;
-    function setup(styles: ThemeSetup): void;
+    let Styles: ThemeSetup<BoxStyleProps>;
+    function setup(styles: ThemeSetup<BoxThemeProps>): void;
     function setupAugmentedProps(props: BoxAugmentedProps, options?: {
         namespacePath?: string;
     }): {

package/core/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PseudoClassSuffix, StyleItem, aliases, boxStyles } from './boxStyles';
+import { PseudoClassSuffix, StyleItem, boxStyles } from './boxStyles';
 import { ThemeComponentProps } from './useTheme';
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
@@ -15,16 +15,24 @@ export declare namespace Augmented {
 type BoxStyles<T extends Record<string, StyleItem>> = {
     [K in keyof T]?: T[K]['values1']['values'][number] | T[K]['values2']['values'][number] | T[K]['values3']['values'][number];
 };
-type BoxNormalStyles = BoxStyles<typeof boxStyles> & BoxStyles<typeof aliases>;
+type BoxNormalStyles = BoxStyles<typeof boxStyles> & Augmented.BoxProps;
 interface BoxPseudoClasses {
     hover?: boolean;
     focus?: boolean;
 }
-export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'> & PseudoClass<BoxNormalStyles, 'C'> & ThemeComponentProps & Augmented.BoxProps;
+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'>;
+interface BoxThemePseudoClassProps {
+    disabled?: BoxNormalStyles;
+}
+export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxPseudoClassStyles;
+export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & BoxPseudoClasses2 & BoxPseudoClassStyles & ThemeComponentProps;
 interface SvgNormalStyles {
     rotate?: BoxNormalStyles['rotate'];
     flip?: BoxNormalStyles['flip'];
     transitionDuration?: BoxNormalStyles['transitionDuration'];
 }
-export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & PseudoClass<SvgNormalStyles, 'C'> & ThemeComponentProps & Augmented.SvgProps;
+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 {};

package/core/useTheme.d.ts

@@ -3,7 +3,6 @@ import { BoxStyleProps } from './types';
 type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;
 export interface ThemeComponentProps {
     clean?: boolean;
-    disabled?: boolean;
     component?: ReservedComponentName;
     theme?: string;
 }

package/core.cjs

@@ -1,74 +1,38 @@
-"use strict";const I=require("react");var e;(a=>{(l=>{function c(s,d){return`${s}${d.replace("/","-")}`}l.fraction=c;function v(s){return[`${s} path`,`${s} circle`,`${s} rect`,`${s} line`]}l.svg=v})(a.ClassName||(a.ClassName={})),(l=>{function c(o,u){return`${u/4}rem`}l.rem=c;function v(o,u){return`${u}px`}l.px=v;function s(o,u){const[t,N]=u.split("/");return`${+t/+N*100}%`}l.fraction=s;function d(o,u){switch(u){case"fit":return"100%";case"fit-screen":return o.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return u}}l.widthHeight=d;function n(o){return(u,t)=>`var(--${o}${t});`}l.variables=n;function f(o){return(u,t)=>`var(--${o}${t});`}l.svgVariables=f;function g(o,u){return`repeat(${u},minmax(0,1fr))`}l.gridColumns=g;function p(o,u){return u==="full-row"?"1/-1":`span ${u}/span ${u}`}l.gridColumn=p;function y(o,u){return`${u}ms`}l.ms=y;function k(o,u){return`${u}deg`}l.rotate=k;function h(o,u){return u==="xAxis"?"-1 1":"1 -1"}l.flip=h})(a.Value||(a.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],X=[-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],m=[...i,...X],_=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],B=["auto","hidden","scroll","visible"],$=["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"],H=["fit","fit-screen","auto","fit-content","max-content","min-content"],D=["auto","flex-start","flex-end","center","baseline","stretch"],r={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:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:H,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:$,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:m,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:m,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:m,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:_},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:B},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:B},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:B},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:[]}},justifyContent:{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:[]}},alignItems:{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:[]}},flexDirection:{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:D},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:D},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:_},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:[]}}},P={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}},Y=["H","F","A","C"],A={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(P).forEach(a=>{r[a]=P[a],r[a].isThemeStyle=!0});Object.keys(q).forEach(a=>{r[a]=q[a],r[a].isThemeStyle=!0});const z={w:{...r.width,key:"width"},h:{...r.height,key:"height"},m:{...r.margin,key:"margin"},mx:{...r.marginHorizontal,key:"marginHorizontal"},my:{...r.marginVertical,key:"marginVertical"},mt:{...r.marginTop,key:"marginTop"},mr:{...r.marginRight,key:"marginRight"},mb:{...r.marginBottom,key:"marginBottom"},ml:{...r.marginLeft,key:"marginLeft"},p:{...r.padding,key:"padding"},px:{...r.paddingHorizontal,key:"paddingHorizontal"},py:{...r.paddingVertical,key:"paddingVertical"},pt:{...r.paddingTop,key:"paddingTop"},pr:{...r.paddingRight,key:"paddingRight"},pb:{...r.paddingBottom,key:"paddingBottom"},pl:{...r.paddingLeft,key:"paddingLeft"},b:{...r.border,key:"border"},bx:{...r.borderHorizontal,key:"borderHorizontal"},by:{...r.borderVertical,key:"borderVertical"},bt:{...r.borderTop,key:"borderTop"},br:{...r.borderRight,key:"borderRight"},bb:{...r.borderBottom,key:"borderBottom"},bl:{...r.borderLeft,key:"borderLeft"},jc:{...r.justifyContent,key:"justifyContent"},ai:{...r.alignItems,key:"alignItems"},ac:{...r.alignContent,key:"alignContent"},d:{...r.flexDirection,key:"flexDirection"}},J=Object.keys(r),Q=Object.keys(z);Y.forEach(a=>{J.forEach(l=>{r[`${l}${a}`]={...r[l]},r[`${l}${a}`].pseudoSuffix=a}),Q.forEach(l=>{z[`${l}${a}`]={...z[l],key:`${z[l].key}${a}`},z[`${l}${a}`].pseudoSuffix=a})});class Z{constructor(){this._index=0,this._cache={}}getIdentity(l){return this._cache[l]||(this._cache[l]=this.getByIndex(this._index++)),this._cache[l]}getByIndex(l){const{first:c,next:v}=K,s=l-c.length;if(s<0)return c[l];const d=Math.floor(s/v.length),n=s-d*v.length;return this.getByIndex(d)+v[n]}}const K={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var O;(a=>{a.boxClassName="_box",a.svgClassName="_svg",a.cronoStylesElementId="crono-styles";const l=`: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;(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;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${a.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;}
-.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`,c=new Z,v=Object.keys(r);let s=!0,d=v.reduce((o,u)=>(o[u]=new Set,o),{});function n(o,u){if(o in r)return p(o,u);if(o in A)return A[o].className}a.get=n;function f(){if(s){let o=y([l]);o=y(o,"H"),o=y(o,"F"),o=y(o,"A"),o=y(o,"C");const u=h();u.innerHTML=o.join(""),s=!1}}a.flush=f;function g(){d=v.reduce((o,u)=>(o[u]=new Set,o),{})}a.clear=g;function p(o,u){var V;d[o].has(u)||(s=!0,d[o].add(u));const t=k(o,u),N=((V=t.formatClassName)==null?void 0:V.call(t,o,u))??`${o}${u}`;return c.getIdentity(N)}function y(o,u){return Object.entries(d).filter(([N])=>{var V;return((V=r[N])==null?void 0:V.pseudoSuffix)===u}).reduce((N,[V,b])=>(b.forEach(w=>{var L;const x=k(V,w),C=`.${p(V,w)}`;let T=[];u?u==="H"?T=[...t(`${C}:hover`,x),...t(`.${A.hover.className}:hover>${C}`,x)]:u==="F"?T=[...t(`${C}:focus-within`,x),...t(`.${A.focus.className}:focus-within>${C}`,x)]:u==="A"?T=t(`${C}:active`,x):u==="C"&&(T=t(`${C}:checked`,x)):T=t(C,x);const W=((L=x.formatValue)==null?void 0:L.call(x,V,w))??w,G=r[V].cssNames.map(U=>`${U}:${W};`).join("");N.push(`${T.join(",")}{${G}}`)}),N),o);function t(N,V){return V.formatSelector?V.formatSelector(N):[N]}}function k(o,u){const t=r[o];return t.isThemeStyle?t:t.values1.values.includes(u)?t.values1:t.values2.values.includes(u)?t.values2:t.values3}function h(){const u=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let t=u.getElementById(a.cronoStylesElementId);return t||(t=u.createElement("style"),t.setAttribute("id",a.cronoStylesElementId),t.setAttribute("type","text/css"),u.head.insertBefore(t,u.head.firstChild)),t}})(O||(O={}));const S=O,j={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;(a=>{a.Styles=j;function l(n){s(n),a.Styles=n,v()}a.setup=l;function c(n,f){const g=Object.entries(n.colors).map(([b,w])=>`--color${b}: ${w};`).join(`
-  `),p=Object.entries(n.shadows).map(([b,w])=>`--shadow${b}: ${w};`).join(`
-  `),y=Object.entries(n.backgrounds).map(([b,w])=>`--background${b}: ${w};`).join(`
-  `),k=Object.entries(n.backgroundImages).map(([b,w])=>`--backgroundImage${b}: ${w};`).join(`
-  `),h=[":root {"];g&&h.push(`  ${g}`),p&&h.push(`  ${p}`),y&&h.push(`  ${y}`),k&&h.push(`  ${k}`),h.push("}");const o=Object.keys(n.colors).map(b=>`'${b}'`).join(" | "),u=Object.keys(n.backgrounds).map(b=>`'${b}'`).join(" | "),t=Object.keys(n.backgroundImages).map(b=>`'${b}'`).join(" | "),N=Object.keys(n.shadows).map(b=>`'${b}'`).join(" | "),V=`import '@cronocode/react-box';
+.${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';
   
-  declare module '${(f==null?void 0:f.namespacePath)??"@cronocode/react-box/core/types"}' {
-    type ColorType = ${o};
-    type BackgroundType = ${u};
-    type BackgroundImageType = ${t};
-    type ShadowType = ${N};
+  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};
   
     namespace Augmented {
       interface BoxProps {
-        color?: ColorType;
-        colorH?: ColorType;
-        colorF?: ColorType;
-        colorA?: ColorType;
-        colorC?: ColorType;
-        bgColor?: ColorType;
-        bgColorH?: ColorType;
-        bgColorF?: ColorType;
-        bgColorA?: ColorType;
-        bgColorC?: ColorType;
-        borderColor?: ColorType;
-        borderColorH?: ColorType;
-        borderColorF?: ColorType;
-        borderColorA?: ColorType;
-        borderColorC?: ColorType;
-        outlineColor?: ColorType;
-        outlineColorH?: ColorType;
-        outlineColorF?: ColorType;
-        outlineColorA?: ColorType;
-        outlineColorC?: ColorType;
-        background?: BackgroundType;
-        backgroundH?: BackgroundType;
-        backgroundF?: BackgroundType;
-        backgroundA?: BackgroundType;
-        backgroundC?: BackgroundType;
-        backgroundImage?: BackgroundImageType;
-        backgroundImageH?: BackgroundImageType;
-        backgroundImageF?: BackgroundImageType;
-        backgroundImageA?: BackgroundImageType;
-        backgroundImageC?: BackgroundImageType;
-        shadow?: ShadowType;
-        shadowH?: ShadowType;
-        shadowF?: ShadowType;
-        shadowF?: ShadowType;
-        shadowA?: ShadowType;
-        shadowC?: ShadowType;
+${n("color","ColorType")}
+${n("bgColor","ColorType")}
+${n("borderColor","ColorType")}
+${n("outlineColor","ColorType")}
+${n("background","BackgroundType")}
+${n("backgroundImage","BackgroundImageType")}
+${n("shadow","ShadowType")}
       }
   
       interface SvgProps {
-        fill?: ColorType;
-        fillH?: ColorType;
-        fillF?: ColorType;
-        fillA?: ColorType;
-        fillC?: ColorType;
-        stroke?: ColorType;
-        strokeH?: ColorType;
-        strokeF?: ColorType;
-        strokeA?: ColorType;
-        strokeC?: ColorType;
+${n("fill","ColorType")}
+${n("stroke","ColorType")}
       }
     }
   }
-  `;return{variables:h.join(`
-`),boxDts:V}}a.setupAugmentedProps=c;function v(){s(j),Object.keys(j).forEach(f=>{const g=a.Styles[f],p=j[f];g?(g.styles={...p.styles,...g.styles},g.disabled&&p.disabled&&(g.disabled={...p.disabled,...g.disabled})):a.Styles[f]=j[f]})}function s(n){if(!n.components)return;const f=Object.keys(n.components);for(const g of f){const p=n.components[g],y=d(g,p);delete p.children;for(const k of y){const[h,o]=k;n.components[h]=o}}}function d(n,f){if(!f.children)return[];const g=Object.keys(f.children),p=[];for(const y of g){const k=`${n}.${y}`,h=f.children[y],o=d(k,h);p.push(...o),delete h.children,p.push([k,h])}return p}})(E||(E={}));const R=E;function ee(a){const{clean:l,disabled:c,theme:v,component:s}=a;return I.useMemo(()=>{var f,g,p;if(l)return;let d=R.Styles[s]??((f=R.Styles.components)==null?void 0:f[s]);if(!d)return;let n=v?{...d.styles,...(g=d.themes)==null?void 0:g[v].styles}:d.styles;return c?v?{...n,...d.disabled,...(p=d.themes)==null?void 0:p[v].disabled}:{...n,...d.disabled}:n},[s,l,c,v])}const se=typeof window<"u"&&typeof window.document<"u",ae=se?I.useLayoutEffect:I.useEffect;function le(a,l){const c=ee(a);return ae(S.flush,[a]),I.useMemo(()=>{const v=[l?S.svgClassName:S.boxClassName],s=c?{...F(c),...F(a)}:F(a);return"inline"in s&&(s.display==="block"||!s.display?s.display="inline-block":s.display==="flex"?s.display="inline-flex":s.display==="grid"&&(s.display="inline-grid"),delete s.inline),"inlineH"in s&&(s.displayH==="block"||!s.displayH?s.displayH="inline-block":s.displayH==="flex"?s.displayH="inline-flex":s.displayH==="grid"&&(s.displayH="inline-grid"),delete s.inlineH),"inlineF"in s&&(s.displayF==="block"||!s.displayF?s.displayF="inline-block":s.displayF==="flex"?s.displayF="inline-flex":s.displayF==="grid"&&(s.displayF="inline-grid"),delete s.inlineF),"inlineA"in s&&(s.displayA==="block"||!s.displayA?s.displayA="inline-block":s.displayA==="flex"?s.displayA="inline-flex":s.displayA==="grid"&&(s.displayA="inline-grid"),delete s.inlineA),Object.entries(s).forEach(([d,n])=>{v.push(S.get(d,n))}),v},[a,c])}function F(a){const l={...a};return Object.keys(l).forEach(v=>{const s=z[v];s&&(s.key in l||(l[s.key]=l[v]),delete l[v])}),l}function M(...a){return a.reduce((l,c)=>c?typeof c=="string"?(l.push(c),l):Array.isArray(c)?(l.push(...M(...c)),l):(Object.entries(c).forEach(([v,s])=>{s&&l.push(v)}),l):l,[])}exports.StylesContext=S;exports.Theme=R;exports.classNames=M;exports.useStyles=le;
+  `;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;