@cronocode/react-box 1.8.6 → 1.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/core/theme.d.ts +2 -3
  2. package/core.cjs +13 -13
  3. package/core.mjs +226 -223
  4. package/package.json +1 -1
package/core/theme.d.ts CHANGED
@@ -1,11 +1,10 @@
1
- import { BoxStyleProps } from './types';
2
- import { BoxThemeProps } from './types';
1
+ import { BoxStyleProps, BoxThemeProps } from './types';
3
2
  export interface ThemeStyles<T> {
4
3
  styles: T;
5
4
  }
6
5
  export interface ThemeComponentStyles<T = BoxStyleProps> extends ThemeStyles<T> {
7
6
  themes?: {
8
- [name: string]: ThemeStyles<T>;
7
+ [name: string]: T;
9
8
  };
10
9
  children?: {
11
10
  [name: string]: ThemeComponentStyles<T>;
package/core.cjs CHANGED
@@ -1,20 +1,20 @@
1
- "use strict";const R=require("react"),Z=require("./utils.cjs");var s;(l=>{(u=>{function i(r,f){return`${r}${f.replace("/","-")}`}u.fraction=i;function c(r){return[`${r} path`,`${r} circle`,`${r} rect`,`${r} line`]}u.svg=c})(l.ClassName||(l.ClassName={})),(u=>{function i(e,a){return`${a/4}rem`}u.rem=i;function c(e,a){return`${a}px`}u.px=c;function r(e,a){const[t,v]=a.split("/");return`${+t/+v*100}%`}u.fraction=r;function f(e,a){switch(a){case"fit":return"100%";case"fit-screen":return e.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return a}}u.widthHeight=f;function w(e){return(a,t)=>`var(--${e}${t});`}u.variables=w;function T(e){return(a,t)=>`var(--${e}${t});`}u.svgVariables=T;function d(e,a){return`repeat(${a},minmax(0,1fr))`}u.gridColumns=d;function g(e,a){return a==="full-row"?"1/-1":`span ${a}/span ${a}`}u.gridColumn=g;function o(e,a){return`${a}ms`}u.ms=o;function b(e,a){return`${a}deg`}u.rotate=b;function h(e,a){return a==="xAxis"?"-1 1":"1 -1"}u.flip=h})(l.Value||(l.Value={}))})(s||(s={}));const n=[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],ee=[-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=[...n,...ee],W=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],q=["auto","hidden","scroll","visible"],O=["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"],z=["fit","fit-screen","auto","fit-content","max-content","min-content"],M=["auto","flex-start","flex-end","center","baseline","stretch"],x={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],formatValue:()=>"inline-block"},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},height:{cssNames:["height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:O,formatValue:s.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:m,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:m,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:m,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:n,formatValue:s.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:q},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:q},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:q},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:n,formatValue:s.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:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:n,formatValue:s.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:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:n},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:n},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:n},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:M},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:M},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:n,formatValue:s.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:n,formatValue:s.Value.gridColumn},values2:{values:["full-row"],formatValue:s.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:n},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:n},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:n,formatValue:s.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:s.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:s.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:s.Value.flip},values2:{values:[]},values3:{values:[]}}},G={shadow:{cssNames:["box-shadow"],formatValue:s.Value.variables("shadow")},background:{cssNames:["background"],formatValue:s.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:s.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:s.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:s.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:s.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:s.Value.variables("color")}},K={fill:{cssNames:["fill"],formatValue:s.Value.svgVariables("color"),formatSelector:s.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:s.Value.svgVariables("color"),formatSelector:s.ClassName.svg}},se=["H","F","A","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],B=["sm","md","lg","xl","xxl"],ae={sm:640,md:768,lg:1024,xl:1280,xxl:1536},E={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(G).forEach(l=>{x[l]=G[l],x[l].isThemeStyle=!0});Object.keys(K).forEach(l=>{x[l]=K[l],x[l].isThemeStyle=!0});let F=Object.keys(x);se.forEach(l=>{F.forEach(u=>{x[`${u}${l}`]={...x[u],pseudoSuffix:l}})});F=Object.keys(x);B.forEach(l=>{F.forEach(u=>{x[`${l}${u}`]={...x[u],breakpoint:l}})});class le{constructor(){this._index=0,this._cache={}}getIdentity(u){return this._cache[u]||(this._cache[u]=this.getByIndex(this._index++)),this._cache[u]}getByIndex(u){const{first:i,next:c}=ue,r=u-i.length;if(r<0)return i[u];const f=Math.floor(r/c.length),w=r-f*c.length;return this.getByIndex(f)+c[w]}}const ue={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var _;(l=>{l.boxClassName="_box",l.svgClassName="_svg",l.cronoStylesElementId="crono-styles";const u=`: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;}}
1
+ "use strict";const B=require("react"),Q=require("./utils.cjs");var s;(l=>{(u=>{function i(o,h){return`${o}${h.replace("/","-")}`}u.fraction=i;function m(o){return[`${o} path`,`${o} circle`,`${o} rect`,`${o} line`]}u.svg=m})(l.ClassName||(l.ClassName={})),(u=>{function i(e,a){return`${a/4}rem`}u.rem=i;function m(e,a){return`${a}px`}u.px=m;function o(e,a){const[t,v]=a.split("/");return`${+t/+v*100}%`}u.fraction=o;function h(e,a){switch(a){case"fit":return"100%";case"fit-screen":return e.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return a}}u.widthHeight=h;function V(e){return(a,t)=>`var(--${e}${t});`}u.variables=V;function T(e){return(a,t)=>`var(--${e}${t});`}u.svgVariables=T;function C(e,a){return`repeat(${a},minmax(0,1fr))`}u.gridColumns=C;function c(e,a){return a==="full-row"?"1/-1":`span ${a}/span ${a}`}u.gridColumn=c;function r(e,a){return`${a}ms`}u.ms=r;function b(e,a){return`${a}deg`}u.rotate=b;function f(e,a){return a==="xAxis"?"-1 1":"1 -1"}u.flip=f})(l.Value||(l.Value={}))})(s||(s={}));const n=[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],Z=[-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=[...n,...Z],M=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],_=["auto","hidden","scroll","visible"],S=["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"],z=["fit","fit-screen","auto","fit-content","max-content","min-content"],G=["auto","flex-start","flex-end","center","baseline","stretch"],N={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],formatValue:()=>"inline-block"},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},height:{cssNames:["height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:z,formatValue:s.Value.widthHeight},values2:{values:n,formatValue:s.Value.rem},values3:{values:S,formatValue:s.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:d,formatValue:s.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:d,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:d,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:M},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:n,formatValue:s.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:_},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:_},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:_},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:n,formatValue:s.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:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:n,formatValue:s.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:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:n,formatValue:s.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:n},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:n},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:n},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:G},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:G},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:n,formatValue:s.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:n,formatValue:s.Value.gridColumn},values2:{values:["full-row"],formatValue:s.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:n},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:n},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:n,formatValue:s.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:M},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:n,formatValue:s.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:s.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:s.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:s.Value.flip},values2:{values:[]},values3:{values:[]}}},K={shadow:{cssNames:["box-shadow"],formatValue:s.Value.variables("shadow")},background:{cssNames:["background"],formatValue:s.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:s.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:s.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:s.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:s.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:s.Value.variables("color")}},U={fill:{cssNames:["fill"],formatValue:s.Value.svgVariables("color"),formatSelector:s.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:s.Value.svgVariables("color"),formatSelector:s.ClassName.svg}},ee=["H","F","A","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],E=["sm","md","lg","xl","xxl"],se={sm:640,md:768,lg:1024,xl:1280,xxl:1536},H={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(K).forEach(l=>{N[l]=K[l],N[l].isThemeStyle=!0});Object.keys(U).forEach(l=>{N[l]=U[l],N[l].isThemeStyle=!0});let P=Object.keys(N);ee.forEach(l=>{P.forEach(u=>{N[`${u}${l}`]={...N[u],pseudoSuffix:l}})});P=Object.keys(N);E.forEach(l=>{P.forEach(u=>{N[`${l}${u}`]={...N[u],breakpoint:l}})});class ae{constructor(){this._index=0,this._cache={}}getIdentity(u){return this._cache[u]||(this._cache[u]=this.getByIndex(this._index++)),this._cache[u]}getByIndex(u){const{first:i,next:m}=le,o=u-i.length;if(o<0)return i[u];const h=Math.floor(o/m.length),V=o-h*m.length;return this.getByIndex(h)+m[V]}}const le={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var D;(l=>{l.boxClassName="_box",l.svgClassName="_svg",l.cronoStylesElementId="crono-styles";const u=`: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;}}
2
2
  html{font-size: 16px;font-family: Arial, sans-serif;}
3
3
  body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
4
4
  a,ul{all: unset;}
5
5
  .${l.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;}
6
6
  .${l.svgClassName}{transition: all var(--svgTransitionTime);}.${l.svgClassName} path,.${l.svgClassName} circle,.${l.svgClassName} rect,.${l.svgClassName} line {transition: all var(--svgTransitionTime);}
7
- `,i=new le,c=Object.keys(x);let r=!0,f=c.reduce((e,a)=>(e[a]=new Set,e),{});function w(e,a,t){if(e in x)return g(e,a,t);if(e in E&&a)return E[e].className}l.get=w;function T(){if(r){let e=o([u]);e=o(e,"H"),e=o(e,"F"),e=o(e,"A"),e=o(e,"Checked"),e=o(e,"Indeterminate"),e=o(e,"Valid"),e=o(e,"Invalid"),e=o(e,"Required"),e=o(e,"Disabled"),B.forEach(t=>{e.push(`@media(min-width: ${ae[t]}px){`),e=o(e,void 0,t),e=o(e,"H",t),e=o(e,"F",t),e=o(e,"A",t),e=o(e,"Checked",t),e=o(e,"Indeterminate",t),e=o(e,"Valid",t),e=o(e,"Invalid",t),e=o(e,"Required",t),e=o(e,"Disabled",t),e.push("}")});const a=h();a.innerHTML=e.join(""),r=!1}}l.flush=T;function d(){f=c.reduce((e,a)=>(e[a]=new Set,e),{})}l.clear=d;function g(e,a,t){const v=(t??"")+e;f[v].has(a)||(r=!0,f[v].add(a));const N=`${v}${a}`;return i.getIdentity(N)}function o(e,a,t){return Object.entries(f).filter(([N])=>{var p,C;return((p=x[N])==null?void 0:p.pseudoSuffix)===a&&((C=x[N])==null?void 0:C.breakpoint)===t}).reduce((N,[p,C])=>(C.forEach(S=>{var L;const V=b(p,S),$=`.${g(p,S)}`;let j=[];a?a==="H"?j=[...v(`${$}:hover`,V),...v(`.${E.hover.className}:hover>${$}`,V)]:a==="F"?j=[...v(`${$}:focus-within`,V),...v(`.${E.focus.className}:focus-within>${$}`,V)]:a==="A"?j=v(`${$}:active`,V):a==="Checked"?j=v(`${$}:checked`,V):a==="Indeterminate"?j=v(`${$}:indeterminate`,V):a==="Valid"?j=v(`${$}:valid`,V):a==="Invalid"?j=v(`${$}:invalid`,V):a==="Required"?j=v(`${$}:required`,V):a==="Optional"?j=v(`${$}:optional`,V):a==="Disabled"&&(j=v(`${$}:disabled`,V)):j=v($,V);const y=((L=V.formatValue)==null?void 0:L.call(V,p,S))??S,J=x[p].cssNames.map(Q=>`${Q}:${y};`).join("");N.push(`${j.join(",")}{${J}}`)}),N),e);function v(N,p){return p.formatSelector?p.formatSelector(N):[N]}}function b(e,a){const t=x[e];return t.isThemeStyle?t:t.values1.values.includes(a)?t.values1:t.values2.values.includes(a)?t.values2:t.values3}function h(){const a=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let t=a.getElementById(l.cronoStylesElementId);return t||(t=a.createElement("style"),t.setAttribute("id",l.cronoStylesElementId),t.setAttribute("type","text/css"),a.head.insertBefore(t,a.head.firstChild)),t}})(_||(_={}));const I=_,H={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}}},U={H:"hover",F:"focus",A:"active",Checked:"checked",Indeterminate:"indeterminate",Valid:"valid",Invalid:"invalid",Required:"required",Optional:"optional",Disabled:"disabled"};var D;(l=>{l.Styles=r(H);function u(d){l.Styles=c(d)}l.setup=u;function i(d,g){const{colors:o={},shadows:b={},backgrounds:h={},backgroundImages:e={}}=d;o.none="none",b.none="none",h.none="none",e.none="none";const a=Object.entries(o).map(([y,k])=>`--color${y}: ${k};`).join(`
8
- `),t=Object.entries(b).map(([y,k])=>`--shadow${y}: ${k};`).join(`
9
- `),v=Object.entries(h).map(([y,k])=>`--background${y}: ${k};`).join(`
10
- `),N=Object.entries(e).map(([y,k])=>`--backgroundImage${y}: ${k};`).join(`
11
- `),p=[":root {"];a&&p.push(` ${a}`),t&&p.push(` ${t}`),v&&p.push(` ${v}`),N&&p.push(` ${N}`),p.push("}");const C=Object.keys(o).map(y=>`'${y}'`).join(" | "),S=Object.keys(h).map(y=>`'${y}'`).join(" | "),V=Object.keys(e).map(y=>`'${y}'`).join(" | "),$=Object.keys(b).map(y=>`'${y}'`).join(" | "),j=`import '@cronocode/react-box';
7
+ `,i=new ae,m=Object.keys(N);let o=!0,h=m.reduce((e,a)=>(e[a]=new Set,e),{});function V(e,a,t){if(e in N)return c(e,a,t);if(e in H&&a)return H[e].className}l.get=V;function T(){if(o){let e=r([u]);e=r(e,"H"),e=r(e,"F"),e=r(e,"A"),e=r(e,"Checked"),e=r(e,"Indeterminate"),e=r(e,"Valid"),e=r(e,"Invalid"),e=r(e,"Required"),e=r(e,"Disabled"),E.forEach(t=>{e.push(`@media(min-width: ${se[t]}px){`),e=r(e,void 0,t),e=r(e,"H",t),e=r(e,"F",t),e=r(e,"A",t),e=r(e,"Checked",t),e=r(e,"Indeterminate",t),e=r(e,"Valid",t),e=r(e,"Invalid",t),e=r(e,"Required",t),e=r(e,"Disabled",t),e.push("}")});const a=f();a.innerHTML=e.join(""),o=!1}}l.flush=T;function C(){h=m.reduce((e,a)=>(e[a]=new Set,e),{})}l.clear=C;function c(e,a,t){const v=(t??"")+e;h[v].has(a)||(o=!0,h[v].add(a));const x=`${v}${a}`;return i.getIdentity(x)}function r(e,a,t){return Object.entries(h).filter(([x])=>{var $,j;return(($=N[x])==null?void 0:$.pseudoSuffix)===a&&((j=N[x])==null?void 0:j.breakpoint)===t}).reduce((x,[$,j])=>(j.forEach(O=>{var W;const g=b($,O),y=`.${c($,O)}`;let w=[];a?a==="H"?w=[...v(`${y}:hover`,g),...v(`.${H.hover.className}:hover>${y}`,g)]:a==="F"?w=[...v(`${y}:focus-within`,g),...v(`.${H.focus.className}:focus-within>${y}`,g)]:a==="A"?w=v(`${y}:active`,g):a==="Checked"?w=v(`${y}:checked`,g):a==="Indeterminate"?w=v(`${y}:indeterminate`,g):a==="Valid"?w=v(`${y}:valid`,g):a==="Invalid"?w=v(`${y}:invalid`,g):a==="Required"?w=v(`${y}:required`,g):a==="Optional"?w=v(`${y}:optional`,g):a==="Disabled"&&(w=v(`${y}:disabled`,g)):w=v(y,g);const q=((W=g.formatValue)==null?void 0:W.call(g,$,O))??O,k=N[$].cssNames.map(J=>`${J}:${q};`).join("");x.push(`${w.join(",")}{${k}}`)}),x),e);function v(x,$){return $.formatSelector?$.formatSelector(x):[x]}}function b(e,a){const t=N[e];return t.isThemeStyle?t:t.values1.values.includes(a)?t.values1:t.values2.values.includes(a)?t.values2:t.values3}function f(){const a=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let t=a.getElementById(l.cronoStylesElementId);return t||(t=a.createElement("style"),t.setAttribute("id",l.cronoStylesElementId),t.setAttribute("type","text/css"),a.head.insertBefore(t,a.head.firstChild)),t}})(D||(D={}));const I=D,A={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}}},ue={H:"hover",F:"focus",A:"active",Checked:"checked",Indeterminate:"indeterminate",Valid:"valid",Invalid:"invalid",Required:"required",Optional:"optional",Disabled:"disabled"};var F;(l=>{l.Styles={};function u(c){l.Styles=o(A),l.Styles=m(c)}l.setup=u;function i(c,r){const{colors:b={},shadows:f={},backgrounds:e={},backgroundImages:a={}}=c;b.none="none",f.none="none",e.none="none",a.none="none";const t=Object.entries(b).map(([p,k])=>`--color${p}: ${k};`).join(`
8
+ `),v=Object.entries(f).map(([p,k])=>`--shadow${p}: ${k};`).join(`
9
+ `),x=Object.entries(e).map(([p,k])=>`--background${p}: ${k};`).join(`
10
+ `),$=Object.entries(a).map(([p,k])=>`--backgroundImage${p}: ${k};`).join(`
11
+ `),j=[":root {"];t&&j.push(` ${t}`),v&&j.push(` ${v}`),x&&j.push(` ${x}`),$&&j.push(` ${$}`),j.push("}");const O=Object.keys(b).map(p=>`'${p}'`).join(" | "),g=Object.keys(e).map(p=>`'${p}'`).join(" | "),y=Object.keys(a).map(p=>`'${p}'`).join(" | "),w=Object.keys(f).map(p=>`'${p}'`).join(" | "),q=`import '@cronocode/react-box';
12
12
 
13
- declare module '${(g==null?void 0:g.namespacePath)??"@cronocode/react-box/core/types"}' {
14
- type ColorType = ${C};
15
- type BackgroundType = ${S};
16
- type BackgroundImageType = ${V};
17
- type ShadowType = ${$};
13
+ declare module '${(r==null?void 0:r.namespacePath)??"@cronocode/react-box/core/types"}' {
14
+ type ColorType = ${O};
15
+ type BackgroundType = ${g};
16
+ type BackgroundImageType = ${y};
17
+ type ShadowType = ${w};
18
18
 
19
19
  namespace Augmented {
20
20
  interface BoxProps {
@@ -33,5 +33,5 @@ a,ul{all: unset;}
33
33
  }
34
34
  }
35
35
  }
36
- `;return{variables:p.join(`
37
- `),boxDts:j}}l.setupAugmentedProps=i;function c(d){const g=r(d);return Object.keys(H).forEach(b=>{const h=g[b],e=H[b];h?h.styles={...e.styles,...h.styles}:g[b]=H[b]}),g}function r(d){return f(d),T(d),d}function f(d){if(!d.components)return;const g=Object.keys(d.components);for(const o of g){const b=d.components[o],h=w(o,b);delete b.children;for(const e of h){const[a,t]=e;d.components[a]=t}}}function w(d,g){if(!g.children)return[];const o=Object.keys(g.children),b=[];for(const h of o){const e=`${d}.${h}`,a=g.children[h],t=w(e,a);b.push(...t),delete a.children,b.push([e,a])}return b}function T(d){const{components:g,...o}=d,b=Object.values(o);g&&b.push(...Object.values(g));for(const h of b)Object.entries(U).forEach(([e,a])=>{if(a in h.styles){const t=h.styles[a];Object.entries(t).map(([v,N])=>{h.styles[`${v}${e}`]=N}),delete h.styles[a]}}),B.forEach(e=>{if(e in h.styles){const a=h.styles[e];Object.entries(U).forEach(([t,v])=>{if(v in a){const N=a[v];Object.entries(N).map(([p,C])=>{a[`${p}${t}`]=C}),delete a[v]}})}})}})(D||(D={}));const P=D;function te(l){const{clean:u,theme:i,component:c}=l;return R.useMemo(()=>{var f,w;if(u)return;let r=P.Styles[c]??((f=P.Styles.components)==null?void 0:f[c]);if(r)return i?{...r.styles,...(w=r.themes)==null?void 0:w[i].styles}:r.styles},[c,u,i])}const re=typeof window<"u"&&typeof window.document<"u",oe=re?R.useLayoutEffect:R.useEffect;function ne(l,u){const i=te(l);return oe(I.flush,[l]),R.useMemo(()=>{const c=[u?I.svgClassName:I.boxClassName],r=i?{...i,...l}:{...l};return X(r),B.forEach(f=>{if(f in r){const w=r[f];X(w),Object.entries(w).forEach(([T,d])=>{c.push(I.get(T,d,f))}),delete r[f]}}),Object.entries(r).forEach(([f,w])=>{c.push(I.get(f,w))}),c},[l,i])}function X(l){A(l,"disabled","Disabled"),A(l,"hover","H"),A(l,"focus","F"),A(l,"active","A")}function A(l,u,i){u in l&&(Array.isArray(l[u])?(Object.entries(l[u][1]).forEach(([c,r])=>{l[`${c}${i}`]=r}),l[u]=l[u][0]):Z.ObjectUtils.isObject(l[u])&&(Object.entries(l[u]).forEach(([c,r])=>{l[`${c}${i}`]=r}),delete l[u]))}function Y(...l){return l.reduce((u,i)=>i?typeof i=="string"?(u.push(i),u):Array.isArray(i)?(u.push(...Y(...i)),u):(Object.entries(i).forEach(([c,r])=>{r&&u.push(c)}),u):u,[])}exports.StylesContext=I;exports.Theme=P;exports.classNames=Y;exports.useStyles=ne;
36
+ `;return{variables:j.join(`
37
+ `),boxDts:q}}l.setupAugmentedProps=i;function m(c){const r=o(c);return Object.keys(A).forEach(f=>{const e=r[f],a=A[f];e?e.styles={...a.styles,...e.styles}:r[f]=A[f]}),r}function o(c){return h(c),T(c),c}function h(c){if(!c.components)return;const r=Object.keys(c.components);for(const b of r){const f=c.components[b],e=V(b,f);delete f.children;for(const a of e){const[t,v]=a;c.components[t]=v}}}function V(c,r){if(!r.children)return[];const b=Object.keys(r.children),f=[];for(const e of b){const a=`${c}.${e}`,t=r.children[e],v=V(a,t);f.push(...v),delete t.children,f.push([a,t])}return f}function T(c){const{components:r,...b}=c,f=Object.values(b);r&&f.push(...Object.values(r));for(const e of f)C(e.styles),E.forEach(a=>{if(a in e.styles){const t=e.styles[a];C(t)}}),e.themes&&Object.values(e.themes).forEach(a=>{C(a),E.forEach(t=>{if(t in a){const v=a[t];C(v)}})})}function C(c){Object.entries(ue).forEach(([r,b])=>{if(b in c){const f=c[b];Object.entries(f).map(([e,a])=>{c[`${e}${r}`]=a}),delete c[b]}})}})(F||(F={}));const L=F;function te(l){const{clean:u,theme:i,component:m}=l;return B.useMemo(()=>{var h,V;if(u)return;let o=L.Styles[m]??((h=L.Styles.components)==null?void 0:h[m]);if(o)return i?{...o.styles,...(V=o.themes)==null?void 0:V[i]}:o.styles},[m,u,i])}const re=typeof window<"u"&&typeof window.document<"u",oe=re?B.useLayoutEffect:B.useEffect;function ne(l,u){const i=te(l);return oe(I.flush,[l]),B.useMemo(()=>{const m=[u?I.svgClassName:I.boxClassName],o=i?{...i,...l}:{...l};return X(o),E.forEach(h=>{if(h in o){const V=o[h];X(V),Object.entries(V).forEach(([T,C])=>{m.push(I.get(T,C,h))}),delete o[h]}}),Object.entries(o).forEach(([h,V])=>{m.push(I.get(h,V))}),m},[l,i])}function X(l){R(l,"disabled","Disabled"),R(l,"hover","H"),R(l,"focus","F"),R(l,"active","A")}function R(l,u,i){u in l&&(Array.isArray(l[u])?(Object.entries(l[u][1]).forEach(([m,o])=>{l[`${m}${i}`]=o}),l[u]=l[u][0]):Q.ObjectUtils.isObject(l[u])&&(Object.entries(l[u]).forEach(([m,o])=>{l[`${m}${i}`]=o}),delete l[u]))}function Y(...l){return l.reduce((u,i)=>i?typeof i=="string"?(u.push(i),u):Array.isArray(i)?(u.push(...Y(...i)),u):(Object.entries(i).forEach(([m,o])=>{o&&u.push(m)}),u):u,[])}exports.StylesContext=I;exports.Theme=L;exports.classNames=Y;exports.useStyles=ne;
package/core.mjs CHANGED
@@ -1,31 +1,31 @@
1
- import { useMemo as X, useLayoutEffect as Q, useEffect as Z } from "react";
2
- import { O as ee } from "./utils.mjs";
1
+ import { useMemo as X, useLayoutEffect as J, useEffect as Q } from "react";
2
+ import { O as Z } from "./utils.mjs";
3
3
  var s;
4
4
  ((l) => {
5
5
  ((u) => {
6
- function i(r, f) {
7
- return `${r}${f.replace("/", "-")}`;
6
+ function i(o, h) {
7
+ return `${o}${h.replace("/", "-")}`;
8
8
  }
9
9
  u.fraction = i;
10
- function c(r) {
11
- return [`${r} path`, `${r} circle`, `${r} rect`, `${r} line`];
10
+ function m(o) {
11
+ return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
12
12
  }
13
- u.svg = c;
13
+ u.svg = m;
14
14
  })(l.ClassName || (l.ClassName = {})), ((u) => {
15
15
  function i(e, a) {
16
16
  return `${a / 4}rem`;
17
17
  }
18
18
  u.rem = i;
19
- function c(e, a) {
19
+ function m(e, a) {
20
20
  return `${a}px`;
21
21
  }
22
- u.px = c;
23
- function r(e, a) {
22
+ u.px = m;
23
+ function o(e, a) {
24
24
  const [t, v] = a.split("/");
25
25
  return `${+t / +v * 100}%`;
26
26
  }
27
- u.fraction = r;
28
- function f(e, a) {
27
+ u.fraction = o;
28
+ function h(e, a) {
29
29
  switch (a) {
30
30
  case "fit":
31
31
  return "100%";
@@ -35,35 +35,35 @@ var s;
35
35
  return a;
36
36
  }
37
37
  }
38
- u.widthHeight = f;
39
- function w(e) {
38
+ u.widthHeight = h;
39
+ function V(e) {
40
40
  return (a, t) => `var(--${e}${t});`;
41
41
  }
42
- u.variables = w;
42
+ u.variables = V;
43
43
  function T(e) {
44
44
  return (a, t) => `var(--${e}${t});`;
45
45
  }
46
46
  u.svgVariables = T;
47
- function d(e, a) {
47
+ function C(e, a) {
48
48
  return `repeat(${a},minmax(0,1fr))`;
49
49
  }
50
- u.gridColumns = d;
51
- function g(e, a) {
50
+ u.gridColumns = C;
51
+ function c(e, a) {
52
52
  return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
53
53
  }
54
- u.gridColumn = g;
55
- function o(e, a) {
54
+ u.gridColumn = c;
55
+ function r(e, a) {
56
56
  return `${a}ms`;
57
57
  }
58
- u.ms = o;
58
+ u.ms = r;
59
59
  function b(e, a) {
60
60
  return `${a}deg`;
61
61
  }
62
62
  u.rotate = b;
63
- function h(e, a) {
63
+ function f(e, a) {
64
64
  return a === "xAxis" ? "-1 1" : "1 -1";
65
65
  }
66
- u.flip = h;
66
+ u.flip = f;
67
67
  })(l.Value || (l.Value = {}));
68
68
  })(s || (s = {}));
69
69
  const n = [
@@ -125,7 +125,7 @@ const n = [
125
125
  200,
126
126
  250,
127
127
  300
128
- ], se = [
128
+ ], ee = [
129
129
  -1,
130
130
  -2,
131
131
  -3,
@@ -171,7 +171,7 @@ const n = [
171
171
  -92,
172
172
  -96,
173
173
  -100
174
- ], m = [...n, ...se], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], B = ["auto", "hidden", "scroll", "visible"], S = [
174
+ ], d = [...n, ...ee], P = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], _ = ["auto", "hidden", "scroll", "visible"], S = [
175
175
  "1/2",
176
176
  "1/3",
177
177
  "2/3",
@@ -198,7 +198,7 @@ const n = [
198
198
  "9/12",
199
199
  "10/12",
200
200
  "11/12"
201
- ], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], x = {
201
+ ], z = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], W = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], N = {
202
202
  /** 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. */
203
203
  display: {
204
204
  cssNames: ["display"],
@@ -288,115 +288,115 @@ const n = [
288
288
  },
289
289
  top: {
290
290
  cssNames: ["top"],
291
- values1: { values: m, formatValue: s.Value.rem },
291
+ values1: { values: d, formatValue: s.Value.rem },
292
292
  values2: { values: [] },
293
293
  values3: { values: [] }
294
294
  },
295
295
  right: {
296
296
  cssNames: ["right"],
297
- values1: { values: m, formatValue: s.Value.rem },
297
+ values1: { values: d, formatValue: s.Value.rem },
298
298
  values2: { values: [] },
299
299
  values3: { values: [] }
300
300
  },
301
301
  bottom: {
302
302
  cssNames: ["bottom"],
303
- values1: { values: m, formatValue: s.Value.rem },
303
+ values1: { values: d, formatValue: s.Value.rem },
304
304
  values2: { values: [] },
305
305
  values3: { values: [] }
306
306
  },
307
307
  left: {
308
308
  cssNames: ["left"],
309
- values1: { values: m, formatValue: s.Value.rem },
309
+ values1: { values: d, formatValue: s.Value.rem },
310
310
  values2: { values: [] },
311
311
  values3: { values: [] }
312
312
  },
313
313
  inset: {
314
314
  cssNames: ["inset"],
315
- values1: { values: m, formatValue: s.Value.rem },
315
+ values1: { values: d, formatValue: s.Value.rem },
316
316
  values2: { values: [] },
317
317
  values3: { values: [] }
318
318
  },
319
319
  m: {
320
320
  cssNames: ["margin"],
321
- values1: { values: m, formatValue: s.Value.rem },
321
+ values1: { values: d, formatValue: s.Value.rem },
322
322
  values2: { values: ["auto"] },
323
323
  values3: { values: [] }
324
324
  },
325
325
  mx: {
326
326
  cssNames: ["margin-inline"],
327
- values1: { values: m, formatValue: s.Value.rem },
327
+ values1: { values: d, formatValue: s.Value.rem },
328
328
  values2: { values: ["auto"] },
329
329
  values3: { values: [] }
330
330
  },
331
331
  my: {
332
332
  cssNames: ["margin-block"],
333
- values1: { values: m, formatValue: s.Value.rem },
333
+ values1: { values: d, formatValue: s.Value.rem },
334
334
  values2: { values: ["auto"] },
335
335
  values3: { values: [] }
336
336
  },
337
337
  mt: {
338
338
  cssNames: ["margin-top"],
339
- values1: { values: m, formatValue: s.Value.rem },
339
+ values1: { values: d, formatValue: s.Value.rem },
340
340
  values2: { values: ["auto"] },
341
341
  values3: { values: [] }
342
342
  },
343
343
  mr: {
344
344
  cssNames: ["margin-right"],
345
- values1: { values: m, formatValue: s.Value.rem },
345
+ values1: { values: d, formatValue: s.Value.rem },
346
346
  values2: { values: ["auto"] },
347
347
  values3: { values: [] }
348
348
  },
349
349
  mb: {
350
350
  cssNames: ["margin-bottom"],
351
- values1: { values: m, formatValue: s.Value.rem },
351
+ values1: { values: d, formatValue: s.Value.rem },
352
352
  values2: { values: ["auto"] },
353
353
  values3: { values: [] }
354
354
  },
355
355
  ml: {
356
356
  cssNames: ["margin-left"],
357
- values1: { values: m, formatValue: s.Value.rem },
357
+ values1: { values: d, formatValue: s.Value.rem },
358
358
  values2: { values: ["auto"] },
359
359
  values3: { values: [] }
360
360
  },
361
361
  p: {
362
362
  cssNames: ["padding"],
363
- values1: { values: m, formatValue: s.Value.rem },
363
+ values1: { values: d, formatValue: s.Value.rem },
364
364
  values2: { values: [] },
365
365
  values3: { values: [] }
366
366
  },
367
367
  px: {
368
368
  cssNames: ["padding-inline"],
369
- values1: { values: m, formatValue: s.Value.rem },
369
+ values1: { values: d, formatValue: s.Value.rem },
370
370
  values2: { values: [] },
371
371
  values3: { values: [] }
372
372
  },
373
373
  py: {
374
374
  cssNames: ["padding-block"],
375
- values1: { values: m, formatValue: s.Value.rem },
375
+ values1: { values: d, formatValue: s.Value.rem },
376
376
  values2: { values: [] },
377
377
  values3: { values: [] }
378
378
  },
379
379
  pt: {
380
380
  cssNames: ["padding-top"],
381
- values1: { values: m, formatValue: s.Value.rem },
381
+ values1: { values: d, formatValue: s.Value.rem },
382
382
  values2: { values: [] },
383
383
  values3: { values: [] }
384
384
  },
385
385
  pr: {
386
386
  cssNames: ["padding-right"],
387
- values1: { values: m, formatValue: s.Value.rem },
387
+ values1: { values: d, formatValue: s.Value.rem },
388
388
  values2: { values: [] },
389
389
  values3: { values: [] }
390
390
  },
391
391
  pb: {
392
392
  cssNames: ["padding-bottom"],
393
- values1: { values: m, formatValue: s.Value.rem },
393
+ values1: { values: d, formatValue: s.Value.rem },
394
394
  values2: { values: [] },
395
395
  values3: { values: [] }
396
396
  },
397
397
  pl: {
398
398
  cssNames: ["padding-left"],
399
- values1: { values: m, formatValue: s.Value.rem },
399
+ values1: { values: d, formatValue: s.Value.rem },
400
400
  values2: { values: [] },
401
401
  values3: { values: [] }
402
402
  },
@@ -408,43 +408,43 @@ const n = [
408
408
  },
409
409
  bx: {
410
410
  cssNames: ["border-inline-width"],
411
- values1: { values: m, formatValue: s.Value.px },
411
+ values1: { values: d, formatValue: s.Value.px },
412
412
  values2: { values: [] },
413
413
  values3: { values: [] }
414
414
  },
415
415
  by: {
416
416
  cssNames: ["border-block-width"],
417
- values1: { values: m, formatValue: s.Value.px },
417
+ values1: { values: d, formatValue: s.Value.px },
418
418
  values2: { values: [] },
419
419
  values3: { values: [] }
420
420
  },
421
421
  bt: {
422
422
  cssNames: ["border-top-width"],
423
- values1: { values: m, formatValue: s.Value.px },
423
+ values1: { values: d, formatValue: s.Value.px },
424
424
  values2: { values: [] },
425
425
  values3: { values: [] }
426
426
  },
427
427
  br: {
428
428
  cssNames: ["border-right-width"],
429
- values1: { values: m, formatValue: s.Value.px },
429
+ values1: { values: d, formatValue: s.Value.px },
430
430
  values2: { values: [] },
431
431
  values3: { values: [] }
432
432
  },
433
433
  bb: {
434
434
  cssNames: ["border-bottom-width"],
435
- values1: { values: m, formatValue: s.Value.px },
435
+ values1: { values: d, formatValue: s.Value.px },
436
436
  values2: { values: [] },
437
437
  values3: { values: [] }
438
438
  },
439
439
  bl: {
440
440
  cssNames: ["border-left-width"],
441
- values1: { values: m, formatValue: s.Value.px },
441
+ values1: { values: d, formatValue: s.Value.px },
442
442
  values2: { values: [] },
443
443
  values3: { values: [] }
444
444
  },
445
445
  borderStyle: {
446
446
  cssNames: ["border-style"],
447
- values1: { values: F },
447
+ values1: { values: P },
448
448
  values2: { values: [] },
449
449
  values3: { values: [] }
450
450
  },
@@ -557,19 +557,19 @@ const n = [
557
557
  },
558
558
  overflow: {
559
559
  cssNames: ["overflow"],
560
- values1: { values: B },
560
+ values1: { values: _ },
561
561
  values2: { values: [] },
562
562
  values3: { values: [] }
563
563
  },
564
564
  overflowX: {
565
565
  cssNames: ["overflow-x"],
566
- values1: { values: B },
566
+ values1: { values: _ },
567
567
  values2: { values: [] },
568
568
  values3: { values: [] }
569
569
  },
570
570
  overflowY: {
571
571
  cssNames: ["overflow-y"],
572
- values1: { values: B },
572
+ values1: { values: _ },
573
573
  values2: { values: [] },
574
574
  values3: { values: [] }
575
575
  },
@@ -730,13 +730,13 @@ const n = [
730
730
  },
731
731
  alignSelf: {
732
732
  cssNames: ["align-self"],
733
- values1: { values: L },
733
+ values1: { values: W },
734
734
  values2: { values: [] },
735
735
  values3: { values: [] }
736
736
  },
737
737
  justifySelf: {
738
738
  cssNames: ["justify-self"],
739
- values1: { values: L },
739
+ values1: { values: W },
740
740
  values2: { values: [] },
741
741
  values3: { values: [] }
742
742
  },
@@ -772,7 +772,7 @@ const n = [
772
772
  },
773
773
  outlineStyle: {
774
774
  cssNames: ["outline-style"],
775
- values1: { values: F },
775
+ values1: { values: P },
776
776
  values2: { values: [] },
777
777
  values3: { values: [] }
778
778
  },
@@ -839,7 +839,7 @@ const n = [
839
839
  values2: { values: [] },
840
840
  values3: { values: [] }
841
841
  }
842
- }, W = {
842
+ }, M = {
843
843
  shadow: { cssNames: ["box-shadow"], formatValue: s.Value.variables("shadow") },
844
844
  background: { cssNames: ["background"], formatValue: s.Value.variables("background") },
845
845
  backgroundImage: { cssNames: ["background-image"], formatValue: s.Value.variables("backgroundImage") },
@@ -847,7 +847,7 @@ const n = [
847
847
  bgColor: { cssNames: ["background-color"], formatValue: s.Value.variables("color") },
848
848
  borderColor: { cssNames: ["border-color"], formatValue: s.Value.variables("color") },
849
849
  outlineColor: { cssNames: ["outline-color"], formatValue: s.Value.variables("color") }
850
- }, M = {
850
+ }, G = {
851
851
  fill: {
852
852
  cssNames: ["fill"],
853
853
  formatValue: s.Value.svgVariables("color"),
@@ -858,7 +858,7 @@ const n = [
858
858
  formatValue: s.Value.svgVariables("color"),
859
859
  formatSelector: s.ClassName.svg
860
860
  }
861
- }, ae = [
861
+ }, se = [
862
862
  "H",
863
863
  "F",
864
864
  "A",
@@ -869,35 +869,35 @@ const n = [
869
869
  "Required",
870
870
  "Optional",
871
871
  "Disabled"
872
- ], R = ["sm", "md", "lg", "xl", "xxl"], le = {
872
+ ], E = ["sm", "md", "lg", "xl", "xxl"], ae = {
873
873
  sm: 640,
874
874
  md: 768,
875
875
  lg: 1024,
876
876
  xl: 1280,
877
877
  xxl: 1536
878
- }, E = {
878
+ }, H = {
879
879
  hover: { className: "_h" },
880
880
  focus: { className: "_f" }
881
881
  };
882
- Object.keys(W).forEach((l) => {
883
- x[l] = W[l], x[l].isThemeStyle = !0;
884
- });
885
882
  Object.keys(M).forEach((l) => {
886
- x[l] = M[l], x[l].isThemeStyle = !0;
883
+ N[l] = M[l], N[l].isThemeStyle = !0;
884
+ });
885
+ Object.keys(G).forEach((l) => {
886
+ N[l] = G[l], N[l].isThemeStyle = !0;
887
887
  });
888
- let q = Object.keys(x);
889
- ae.forEach((l) => {
890
- q.forEach((u) => {
891
- x[`${u}${l}`] = { ...x[u], pseudoSuffix: l };
888
+ let F = Object.keys(N);
889
+ se.forEach((l) => {
890
+ F.forEach((u) => {
891
+ N[`${u}${l}`] = { ...N[u], pseudoSuffix: l };
892
892
  });
893
893
  });
894
- q = Object.keys(x);
895
- R.forEach((l) => {
896
- q.forEach((u) => {
897
- x[`${l}${u}`] = { ...x[u], breakpoint: l };
894
+ F = Object.keys(N);
895
+ E.forEach((l) => {
896
+ F.forEach((u) => {
897
+ N[`${l}${u}`] = { ...N[u], breakpoint: l };
898
898
  });
899
899
  });
900
- class ue {
900
+ class le {
901
901
  constructor() {
902
902
  this._index = 0, this._cache = {};
903
903
  }
@@ -905,18 +905,18 @@ class ue {
905
905
  return this._cache[u] || (this._cache[u] = this.getByIndex(this._index++)), this._cache[u];
906
906
  }
907
907
  getByIndex(u) {
908
- const { first: i, next: c } = te, r = u - i.length;
909
- if (r < 0)
908
+ const { first: i, next: m } = ue, o = u - i.length;
909
+ if (o < 0)
910
910
  return i[u];
911
- const f = Math.floor(r / c.length), w = r - f * c.length;
912
- return this.getByIndex(f) + c[w];
911
+ const h = Math.floor(o / m.length), V = o - h * m.length;
912
+ return this.getByIndex(h) + m[V];
913
913
  }
914
914
  }
915
- const te = {
915
+ const ue = {
916
916
  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
917
917
  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
918
918
  };
919
- var _;
919
+ var D;
920
920
  ((l) => {
921
921
  l.boxClassName = "_box", l.svgClassName = "_svg", l.cronoStylesElementId = "crono-styles";
922
922
  const u = `: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;}}
@@ -925,77 +925,77 @@ body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
925
925
  a,ul{all: unset;}
926
926
  .${l.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;}
927
927
  .${l.svgClassName}{transition: all var(--svgTransitionTime);}.${l.svgClassName} path,.${l.svgClassName} circle,.${l.svgClassName} rect,.${l.svgClassName} line {transition: all var(--svgTransitionTime);}
928
- `, i = new ue(), c = Object.keys(x);
929
- let r = !0, f = c.reduce(
928
+ `, i = new le(), m = Object.keys(N);
929
+ let o = !0, h = m.reduce(
930
930
  (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
931
931
  {}
932
932
  );
933
- function w(e, a, t) {
934
- if (e in x)
935
- return g(e, a, t);
936
- if (e in E && a)
937
- return E[e].className;
933
+ function V(e, a, t) {
934
+ if (e in N)
935
+ return c(e, a, t);
936
+ if (e in H && a)
937
+ return H[e].className;
938
938
  }
939
- l.get = w;
939
+ l.get = V;
940
940
  function T() {
941
- if (r) {
942
- let e = o([u]);
943
- e = o(e, "H"), e = o(e, "F"), e = o(e, "A"), e = o(e, "Checked"), e = o(e, "Indeterminate"), e = o(e, "Valid"), e = o(e, "Invalid"), e = o(e, "Required"), e = o(e, "Disabled"), R.forEach((t) => {
944
- e.push(`@media(min-width: ${le[t]}px){`), e = o(e, void 0, t), e = o(e, "H", t), e = o(e, "F", t), e = o(e, "A", t), e = o(e, "Checked", t), e = o(e, "Indeterminate", t), e = o(e, "Valid", t), e = o(e, "Invalid", t), e = o(e, "Required", t), e = o(e, "Disabled", t), e.push("}");
941
+ if (o) {
942
+ let e = r([u]);
943
+ e = r(e, "H"), e = r(e, "F"), e = r(e, "A"), e = r(e, "Checked"), e = r(e, "Indeterminate"), e = r(e, "Valid"), e = r(e, "Invalid"), e = r(e, "Required"), e = r(e, "Disabled"), E.forEach((t) => {
944
+ e.push(`@media(min-width: ${ae[t]}px){`), e = r(e, void 0, t), e = r(e, "H", t), e = r(e, "F", t), e = r(e, "A", t), e = r(e, "Checked", t), e = r(e, "Indeterminate", t), e = r(e, "Valid", t), e = r(e, "Invalid", t), e = r(e, "Required", t), e = r(e, "Disabled", t), e.push("}");
945
945
  });
946
- const a = h();
947
- a.innerHTML = e.join(""), r = !1;
946
+ const a = f();
947
+ a.innerHTML = e.join(""), o = !1;
948
948
  }
949
949
  }
950
950
  l.flush = T;
951
- function d() {
952
- f = c.reduce(
951
+ function C() {
952
+ h = m.reduce(
953
953
  (e, a) => (e[a] = /* @__PURE__ */ new Set(), e),
954
954
  {}
955
955
  );
956
956
  }
957
- l.clear = d;
958
- function g(e, a, t) {
957
+ l.clear = C;
958
+ function c(e, a, t) {
959
959
  const v = (t ?? "") + e;
960
- f[v].has(a) || (r = !0, f[v].add(a));
961
- const N = `${v}${a}`;
962
- return i.getIdentity(N);
960
+ h[v].has(a) || (o = !0, h[v].add(a));
961
+ const x = `${v}${a}`;
962
+ return i.getIdentity(x);
963
963
  }
964
- function o(e, a, t) {
965
- return Object.entries(f).filter(
966
- ([N]) => {
967
- var p, C;
968
- return ((p = x[N]) == null ? void 0 : p.pseudoSuffix) === a && ((C = x[N]) == null ? void 0 : C.breakpoint) === t;
964
+ function r(e, a, t) {
965
+ return Object.entries(h).filter(
966
+ ([x]) => {
967
+ var $, j;
968
+ return (($ = N[x]) == null ? void 0 : $.pseudoSuffix) === a && ((j = N[x]) == null ? void 0 : j.breakpoint) === t;
969
969
  }
970
- ).reduce((N, [p, C]) => (C.forEach((O) => {
971
- var P;
972
- const V = b(p, O), $ = `.${g(p, O)}`;
973
- let j = [];
974
- a ? a === "H" ? j = [
975
- ...v(`${$}:hover`, V),
976
- ...v(`.${E.hover.className}:hover>${$}`, V)
977
- ] : a === "F" ? j = [
978
- ...v(`${$}:focus-within`, V),
979
- ...v(`.${E.focus.className}:focus-within>${$}`, V)
980
- ] : a === "A" ? j = v(`${$}:active`, V) : a === "Checked" ? j = v(`${$}:checked`, V) : a === "Indeterminate" ? j = v(`${$}:indeterminate`, V) : a === "Valid" ? j = v(`${$}:valid`, V) : a === "Invalid" ? j = v(`${$}:invalid`, V) : a === "Required" ? j = v(`${$}:required`, V) : a === "Optional" ? j = v(`${$}:optional`, V) : a === "Disabled" && (j = v(`${$}:disabled`, V)) : j = v($, V);
981
- const y = ((P = V.formatValue) == null ? void 0 : P.call(V, p, O)) ?? O, Y = x[p].cssNames.map((J) => `${J}:${y};`).join("");
982
- N.push(`${j.join(",")}{${Y}}`);
983
- }), N), e);
984
- function v(N, p) {
985
- return p.formatSelector ? p.formatSelector(N) : [N];
970
+ ).reduce((x, [$, j]) => (j.forEach((O) => {
971
+ var L;
972
+ const g = b($, O), y = `.${c($, O)}`;
973
+ let w = [];
974
+ a ? a === "H" ? w = [
975
+ ...v(`${y}:hover`, g),
976
+ ...v(`.${H.hover.className}:hover>${y}`, g)
977
+ ] : a === "F" ? w = [
978
+ ...v(`${y}:focus-within`, g),
979
+ ...v(`.${H.focus.className}:focus-within>${y}`, g)
980
+ ] : a === "A" ? w = v(`${y}:active`, g) : a === "Checked" ? w = v(`${y}:checked`, g) : a === "Indeterminate" ? w = v(`${y}:indeterminate`, g) : a === "Valid" ? w = v(`${y}:valid`, g) : a === "Invalid" ? w = v(`${y}:invalid`, g) : a === "Required" ? w = v(`${y}:required`, g) : a === "Optional" ? w = v(`${y}:optional`, g) : a === "Disabled" && (w = v(`${y}:disabled`, g)) : w = v(y, g);
981
+ const B = ((L = g.formatValue) == null ? void 0 : L.call(g, $, O)) ?? O, k = N[$].cssNames.map((Y) => `${Y}:${B};`).join("");
982
+ x.push(`${w.join(",")}{${k}}`);
983
+ }), x), e);
984
+ function v(x, $) {
985
+ return $.formatSelector ? $.formatSelector(x) : [x];
986
986
  }
987
987
  }
988
988
  function b(e, a) {
989
- const t = x[e];
989
+ const t = N[e];
990
990
  return t.isThemeStyle ? t : t.values1.values.includes(a) ? t.values1 : t.values2.values.includes(a) ? t.values2 : t.values3;
991
991
  }
992
- function h() {
992
+ function f() {
993
993
  const a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
994
994
  let t = a.getElementById(l.cronoStylesElementId);
995
995
  return t || (t = a.createElement("style"), t.setAttribute("id", l.cronoStylesElementId), t.setAttribute("type", "text/css"), a.head.insertBefore(t, a.head.firstChild)), t;
996
996
  }
997
- })(_ || (_ = {}));
998
- const I = _, H = {
997
+ })(D || (D = {}));
998
+ const I = D, A = {
999
999
  button: {
1000
1000
  styles: {
1001
1001
  display: "inline-block",
@@ -1036,7 +1036,7 @@ const I = _, H = {
1036
1036
  borderRadius: 1
1037
1037
  }
1038
1038
  }
1039
- }, G = {
1039
+ }, te = {
1040
1040
  H: "hover",
1041
1041
  F: "focus",
1042
1042
  A: "active",
@@ -1048,29 +1048,29 @@ const I = _, H = {
1048
1048
  Optional: "optional",
1049
1049
  Disabled: "disabled"
1050
1050
  };
1051
- var D;
1051
+ var q;
1052
1052
  ((l) => {
1053
- l.Styles = r(H);
1054
- function u(d) {
1055
- l.Styles = c(d);
1053
+ l.Styles = {};
1054
+ function u(c) {
1055
+ l.Styles = o(A), l.Styles = m(c);
1056
1056
  }
1057
1057
  l.setup = u;
1058
- function i(d, g) {
1059
- const { colors: o = {}, shadows: b = {}, backgrounds: h = {}, backgroundImages: e = {} } = d;
1060
- o.none = "none", b.none = "none", h.none = "none", e.none = "none";
1061
- const a = Object.entries(o).map(([y, k]) => `--color${y}: ${k};`).join(`
1062
- `), t = Object.entries(b).map(([y, k]) => `--shadow${y}: ${k};`).join(`
1063
- `), v = Object.entries(h).map(([y, k]) => `--background${y}: ${k};`).join(`
1064
- `), N = Object.entries(e).map(([y, k]) => `--backgroundImage${y}: ${k};`).join(`
1065
- `), p = [":root {"];
1066
- a && p.push(` ${a}`), t && p.push(` ${t}`), v && p.push(` ${v}`), N && p.push(` ${N}`), p.push("}");
1067
- const C = Object.keys(o).map((y) => `'${y}'`).join(" | "), O = Object.keys(h).map((y) => `'${y}'`).join(" | "), V = Object.keys(e).map((y) => `'${y}'`).join(" | "), $ = Object.keys(b).map((y) => `'${y}'`).join(" | "), j = `import '@cronocode/react-box';
1058
+ function i(c, r) {
1059
+ const { colors: b = {}, shadows: f = {}, backgrounds: e = {}, backgroundImages: a = {} } = c;
1060
+ b.none = "none", f.none = "none", e.none = "none", a.none = "none";
1061
+ const t = Object.entries(b).map(([p, k]) => `--color${p}: ${k};`).join(`
1062
+ `), v = Object.entries(f).map(([p, k]) => `--shadow${p}: ${k};`).join(`
1063
+ `), x = Object.entries(e).map(([p, k]) => `--background${p}: ${k};`).join(`
1064
+ `), $ = Object.entries(a).map(([p, k]) => `--backgroundImage${p}: ${k};`).join(`
1065
+ `), j = [":root {"];
1066
+ t && j.push(` ${t}`), v && j.push(` ${v}`), x && j.push(` ${x}`), $ && j.push(` ${$}`), j.push("}");
1067
+ const O = Object.keys(b).map((p) => `'${p}'`).join(" | "), g = Object.keys(e).map((p) => `'${p}'`).join(" | "), y = Object.keys(a).map((p) => `'${p}'`).join(" | "), w = Object.keys(f).map((p) => `'${p}'`).join(" | "), B = `import '@cronocode/react-box';
1068
1068
 
1069
- declare module '${(g == null ? void 0 : g.namespacePath) ?? "@cronocode/react-box/core/types"}' {
1070
- type ColorType = ${C};
1071
- type BackgroundType = ${O};
1072
- type BackgroundImageType = ${V};
1073
- type ShadowType = ${$};
1069
+ declare module '${(r == null ? void 0 : r.namespacePath) ?? "@cronocode/react-box/core/types"}' {
1070
+ type ColorType = ${O};
1071
+ type BackgroundType = ${g};
1072
+ type BackgroundImageType = ${y};
1073
+ type ShadowType = ${w};
1074
1074
 
1075
1075
  namespace Augmented {
1076
1076
  interface BoxProps {
@@ -1091,113 +1091,116 @@ var D;
1091
1091
  }
1092
1092
  `;
1093
1093
  return {
1094
- variables: p.join(`
1094
+ variables: j.join(`
1095
1095
  `),
1096
- boxDts: j
1096
+ boxDts: B
1097
1097
  };
1098
1098
  }
1099
1099
  l.setupAugmentedProps = i;
1100
- function c(d) {
1101
- const g = r(d);
1102
- return Object.keys(H).forEach((b) => {
1103
- const h = g[b], e = H[b];
1104
- h ? h.styles = { ...e.styles, ...h.styles } : g[b] = H[b];
1105
- }), g;
1100
+ function m(c) {
1101
+ const r = o(c);
1102
+ return Object.keys(A).forEach((f) => {
1103
+ const e = r[f], a = A[f];
1104
+ e ? e.styles = { ...a.styles, ...e.styles } : r[f] = A[f];
1105
+ }), r;
1106
1106
  }
1107
- function r(d) {
1108
- return f(d), T(d), d;
1107
+ function o(c) {
1108
+ return h(c), T(c), c;
1109
1109
  }
1110
- function f(d) {
1111
- if (!d.components)
1110
+ function h(c) {
1111
+ if (!c.components)
1112
1112
  return;
1113
- const g = Object.keys(d.components);
1114
- for (const o of g) {
1115
- const b = d.components[o], h = w(o, b);
1116
- delete b.children;
1117
- for (const e of h) {
1118
- const [a, t] = e;
1119
- d.components[a] = t;
1113
+ const r = Object.keys(c.components);
1114
+ for (const b of r) {
1115
+ const f = c.components[b], e = V(b, f);
1116
+ delete f.children;
1117
+ for (const a of e) {
1118
+ const [t, v] = a;
1119
+ c.components[t] = v;
1120
1120
  }
1121
1121
  }
1122
1122
  }
1123
- function w(d, g) {
1124
- if (!g.children)
1123
+ function V(c, r) {
1124
+ if (!r.children)
1125
1125
  return [];
1126
- const o = Object.keys(g.children), b = [];
1127
- for (const h of o) {
1128
- const e = `${d}.${h}`, a = g.children[h], t = w(e, a);
1129
- b.push(...t), delete a.children, b.push([e, a]);
1126
+ const b = Object.keys(r.children), f = [];
1127
+ for (const e of b) {
1128
+ const a = `${c}.${e}`, t = r.children[e], v = V(a, t);
1129
+ f.push(...v), delete t.children, f.push([a, t]);
1130
1130
  }
1131
- return b;
1131
+ return f;
1132
1132
  }
1133
- function T(d) {
1134
- const { components: g, ...o } = d, b = Object.values(o);
1135
- g && b.push(...Object.values(g));
1136
- for (const h of b)
1137
- Object.entries(G).forEach(([e, a]) => {
1138
- if (a in h.styles) {
1139
- const t = h.styles[a];
1140
- Object.entries(t).map(([v, N]) => {
1141
- h.styles[`${v}${e}`] = N;
1142
- }), delete h.styles[a];
1143
- }
1144
- }), R.forEach((e) => {
1145
- if (e in h.styles) {
1146
- const a = h.styles[e];
1147
- Object.entries(G).forEach(([t, v]) => {
1148
- if (v in a) {
1149
- const N = a[v];
1150
- Object.entries(N).map(([p, C]) => {
1151
- a[`${p}${t}`] = C;
1152
- }), delete a[v];
1153
- }
1154
- });
1133
+ function T(c) {
1134
+ const { components: r, ...b } = c, f = Object.values(b);
1135
+ r && f.push(...Object.values(r));
1136
+ for (const e of f)
1137
+ C(e.styles), E.forEach((a) => {
1138
+ if (a in e.styles) {
1139
+ const t = e.styles[a];
1140
+ C(t);
1155
1141
  }
1142
+ }), e.themes && Object.values(e.themes).forEach((a) => {
1143
+ C(a), E.forEach((t) => {
1144
+ if (t in a) {
1145
+ const v = a[t];
1146
+ C(v);
1147
+ }
1148
+ });
1156
1149
  });
1157
1150
  }
1158
- })(D || (D = {}));
1159
- const K = D;
1151
+ function C(c) {
1152
+ Object.entries(te).forEach(([r, b]) => {
1153
+ if (b in c) {
1154
+ const f = c[b];
1155
+ Object.entries(f).map(([e, a]) => {
1156
+ c[`${e}${r}`] = a;
1157
+ }), delete c[b];
1158
+ }
1159
+ });
1160
+ }
1161
+ })(q || (q = {}));
1162
+ const K = q;
1160
1163
  function re(l) {
1161
- const { clean: u, theme: i, component: c } = l;
1164
+ const { clean: u, theme: i, component: m } = l;
1162
1165
  return X(() => {
1163
- var f, w;
1166
+ var h, V;
1164
1167
  if (u)
1165
1168
  return;
1166
- let r = K.Styles[c] ?? ((f = K.Styles.components) == null ? void 0 : f[c]);
1167
- if (r)
1168
- return i ? { ...r.styles, ...(w = r.themes) == null ? void 0 : w[i].styles } : r.styles;
1169
- }, [c, u, i]);
1169
+ let o = K.Styles[m] ?? ((h = K.Styles.components) == null ? void 0 : h[m]);
1170
+ if (o)
1171
+ return i ? { ...o.styles, ...(V = o.themes) == null ? void 0 : V[i] } : o.styles;
1172
+ }, [m, u, i]);
1170
1173
  }
1171
- const oe = typeof window < "u" && typeof window.document < "u", ne = oe ? Q : Z;
1174
+ const oe = typeof window < "u" && typeof window.document < "u", ne = oe ? J : Q;
1172
1175
  function me(l, u) {
1173
1176
  const i = re(l);
1174
1177
  return ne(I.flush, [l]), X(() => {
1175
- const c = [u ? I.svgClassName : I.boxClassName], r = i ? { ...i, ...l } : { ...l };
1176
- return U(r), R.forEach((f) => {
1177
- if (f in r) {
1178
- const w = r[f];
1179
- U(w), Object.entries(w).forEach(([T, d]) => {
1180
- c.push(I.get(T, d, f));
1181
- }), delete r[f];
1178
+ const m = [u ? I.svgClassName : I.boxClassName], o = i ? { ...i, ...l } : { ...l };
1179
+ return U(o), E.forEach((h) => {
1180
+ if (h in o) {
1181
+ const V = o[h];
1182
+ U(V), Object.entries(V).forEach(([T, C]) => {
1183
+ m.push(I.get(T, C, h));
1184
+ }), delete o[h];
1182
1185
  }
1183
- }), Object.entries(r).forEach(([f, w]) => {
1184
- c.push(I.get(f, w));
1185
- }), c;
1186
+ }), Object.entries(o).forEach(([h, V]) => {
1187
+ m.push(I.get(h, V));
1188
+ }), m;
1186
1189
  }, [l, i]);
1187
1190
  }
1188
1191
  function U(l) {
1189
- A(l, "disabled", "Disabled"), A(l, "hover", "H"), A(l, "focus", "F"), A(l, "active", "A");
1192
+ R(l, "disabled", "Disabled"), R(l, "hover", "H"), R(l, "focus", "F"), R(l, "active", "A");
1190
1193
  }
1191
- function A(l, u, i) {
1192
- u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([c, r]) => {
1193
- l[`${c}${i}`] = r;
1194
- }), l[u] = l[u][0]) : ee.isObject(l[u]) && (Object.entries(l[u]).forEach(([c, r]) => {
1195
- l[`${c}${i}`] = r;
1194
+ function R(l, u, i) {
1195
+ u in l && (Array.isArray(l[u]) ? (Object.entries(l[u][1]).forEach(([m, o]) => {
1196
+ l[`${m}${i}`] = o;
1197
+ }), l[u] = l[u][0]) : Z.isObject(l[u]) && (Object.entries(l[u]).forEach(([m, o]) => {
1198
+ l[`${m}${i}`] = o;
1196
1199
  }), delete l[u]));
1197
1200
  }
1198
1201
  function ve(...l) {
1199
- return l.reduce((u, i) => i ? typeof i == "string" ? (u.push(i), u) : Array.isArray(i) ? (u.push(...ve(...i)), u) : (Object.entries(i).forEach(([c, r]) => {
1200
- r && u.push(c);
1202
+ return l.reduce((u, i) => i ? typeof i == "string" ? (u.push(i), u) : Array.isArray(i) ? (u.push(...ve(...i)), u) : (Object.entries(i).forEach(([m, o]) => {
1203
+ o && u.push(m);
1201
1204
  }), u) : u, []);
1202
1205
  }
1203
1206
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cronocode/react-box",
3
- "version": "1.8.6",
3
+ "version": "1.8.7",
4
4
  "type": "module",
5
5
  "main": "./box.cjs",
6
6
  "module": "./box.mjs",