@cronocode/react-box 1.5.9 → 1.6.0

package/components/dox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),B=require("../utils/utils.cjs"),A=require("../theme.cjs"),D=["H","F","A"],t=[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],M=[-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],v=[...t,...M],L=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],S=["auto","hidden","scroll","visible"],y=["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"],x=["fit","fit-screen","auto","fit-content","max-content","min-content"];var e;(s=>{function u(c,i){return`${i/4}rem`}s.rem=u;function d(c,i){return`${i}px`}s.px=d;function m(c,i){const[p,n]=i.split("/");return`${+p/+n*100}%`}s.fraction=m;function g(c,i){switch(i){case"fit":return"100%";case"fit-screen":return c.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return i}}s.widthHeight=g;function b(c){return(i,p)=>`var(--${c}${p});`}s.variables=b})(e||(e={}));var h;(s=>{function u(d,m){return`${d}${m.replace("/","-")}`}s.fraction=u})(h||(h={}));const T={shadow:{cssNames:["box-shadow"],formatValue:e.variables("shadow")},background:{cssNames:["background"],formatValue:e.variables("background")},color:{cssNames:["color"],formatValue:e.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.variables("color")}},a={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},minWidth:{cssNames:["min-width"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},height:{cssNames:["height"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},minHeight:{cssNames:["min-height"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:x,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:y,formatValue:e.fraction,formatClassName:h.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:v,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:v,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:v,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:L},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:t,formatValue:e.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:S},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:S},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:S},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:t,formatValue:e.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:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:t,formatValue:e.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:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:t},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:t},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:t},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:["auto","flex-start","flex-end","center","baseline","stretch"]},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:["auto","flex-start","flex-end","center","baseline","stretch"]},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:t,formatValue:(s,u)=>`repeat(${u},minmax(0,1fr))`},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:t,formatValue:(s,u)=>`span ${u}/span ${u}`},values2:{values:["full-row"],formatValue:(s,u)=>"1/-1"},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:t,formatValue:(s,u)=>`${u}`},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:t,formatValue:(s,u)=>`${u}`},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:L},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:t,formatValue:e.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,u)=>`${u}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:[]}}};Object.keys(T).forEach(s=>{a[s]=T[s],a[s].isThemeStyle=!0});const V={m:{...a.margin,key:"margin"},mx:{...a.marginHorizontal,key:"marginHorizontal"},my:{...a.marginVertical,key:"marginVertical"},mt:{...a.marginTop,key:"marginTop"},mr:{...a.marginRight,key:"marginRight"},mb:{...a.marginBottom,key:"marginBottom"},ml:{...a.marginLeft,key:"marginLeft"},p:{...a.padding,key:"padding"},px:{...a.paddingHorizontal,key:"paddingHorizontal"},py:{...a.paddingVertical,key:"paddingVertical"},pt:{...a.paddingTop,key:"paddingTop"},pr:{...a.paddingRight,key:"paddingRight"},pb:{...a.paddingBottom,key:"paddingBottom"},pl:{...a.paddingLeft,key:"paddingLeft"},b:{...a.border,key:"border"},bx:{...a.borderHorizontal,key:"borderHorizontal"},by:{...a.borderVertical,key:"borderVertical"},bt:{...a.borderTop,key:"borderTop"},br:{...a.borderRight,key:"borderRight"},bb:{...a.borderBottom,key:"borderBottom"},bl:{...a.borderLeft,key:"borderLeft"},jc:{...a.justifyContent,key:"justifyContent"},ai:{...a.alignItems,key:"alignItems"},ac:{...a.alignContent,key:"alignContent"},d:{...a.flexDirection,key:"flexDirection"}},q=Object.keys(a),F=Object.keys(V);D.forEach(s=>{q.forEach(u=>{a[`${u}${s}`]={...a[u]},a[`${u}${s}`].pseudoSuffix=s}),F.forEach(u=>{V[`${u}${s}`]={...V[u],key:`${V[u].key}${s}`},V[`${u}${s}`].pseudoSuffix=s})});var k;(s=>{const u=new B.IdentityFactory,d=[...Object.keys(a),...Object.keys(T)],m=$();let g=!1;const b=d.reduce((r,l)=>(r[l]=new Set,r),{});s.doxClassName="_dox";function c(r,l){if(r in a)return p(r,l);if(r in V)return p(V[r].key,l)}s.get=c;function i(){if(g){console.info("%c💬Flush Dox Styles","color: #00ffff");const r=`.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;let l=n([r]);l=n(l,"H"),l=n(l,"F"),l=n(l,"A"),m.innerHTML=l.join(""),g=!1}}s.flush=i;function p(r,l){var H;b[r].has(l)||(g=!0,b[r].add(l));const o=z(r,l),f=((H=o.formatClassName)==null?void 0:H.call(o,r,l))??`${r}${l}`;return`-${u.getIdentity(f)}`}function n(r,l){return Object.entries(b).filter(([o])=>{var f;return((f=a[o])==null?void 0:f.pseudoSuffix)===l}).reduce((o,[f,H])=>(H.forEach(C=>{var j;let N=p(f,C);l==="H"&&(N=`${N}:hover`),l==="F"&&(N=`${N}:focus-within`),l==="A"&&(N=`${N}:active`);const R=z(f,C),E=((j=R.formatValue)==null?void 0:j.call(R,f,C))??C,O=a[f].cssNames.map(I=>`${I}:${E};`).join("");o.push(`.${N}{${O}}`)}),o),r)}function z(r,l){const o=a[r];return o.isThemeStyle?o:o.values1.values.includes(l)?o.values1:o.values2.values.includes(l)?o.values2:o.values3}function $(){const r="crono-styles";let l=document.getElementById(r);return l||(l=document.createElement("style"),l.setAttribute("id",r),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(k||(k={}));function _(s){const u=A.useTheme(s);return w.useEffect(k.flush,[s]),w.useMemo(()=>{const d=[k.doxClassName],m=u?{...u,...s}:s;return Object.entries(m).forEach(([g,b])=>{d.push(k.get(g,b))}),d},[s,u])}function P(s,u){const{tag:d,children:m,props:g,className:b,style:c}=s,i=_(s),p=w.useMemo(()=>B.ClassNameUtils.classNames(b,i).join(" "),[s]),n={...g,className:p};c&&(n.style=c),u&&(n.ref=u);const[z,$]=w.useState(!1),r=typeof m=="function";return r&&(n.onMouseEnter=()=>$(!0),n.onMouseLeave=()=>$(!1)),w.createElement(d||"div",n,r?m({isHover:z}):m)}const W=w.forwardRef(P);exports.default=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),B=require("../utils/utils.cjs"),D=require("../theme.cjs"),M=["H","F","A"],t=[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],P=[-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],r=[...t,...P],E=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],S=["auto","hidden","scroll","visible"],V=["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"],y=["fit","fit-screen","auto","fit-content","max-content","min-content"];var e;(s=>{function a(f,m){return`${m/4}rem`}s.rem=a;function d(f,m){return`${m}px`}s.px=d;function i(f,m){const[b,c]=m.split("/");return`${+b/+c*100}%`}s.fraction=i;function n(f,m){switch(m){case"fit":return"100%";case"fit-screen":return f.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return m}}s.widthHeight=n;function p(f){return(m,b)=>`var(--${f}${b});`}s.variables=p})(e||(e={}));var h;(s=>{function a(d,i){return`${d}${i.replace("/","-")}`}s.fraction=a})(h||(h={}));const T={shadow:{cssNames:["box-shadow"],formatValue:e.variables("shadow")},background:{cssNames:["background"],formatValue:e.variables("background")},color:{cssNames:["color"],formatValue:e.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.variables("color")}},l={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},minWidth:{cssNames:["min-width"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},height:{cssNames:["height"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},minHeight:{cssNames:["min-height"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:y,formatValue:e.widthHeight},values2:{values:t,formatValue:e.rem},values3:{values:V,formatValue:e.fraction,formatClassName:h.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:r,formatValue:e.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:r,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:r,formatValue:e.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:E},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:t,formatValue:e.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:S},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:S},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:S},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:t,formatValue:e.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:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:t,formatValue:e.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:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:t,formatValue:e.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:t},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:t},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:t},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:["auto","flex-start","flex-end","center","baseline","stretch"]},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:["auto","flex-start","flex-end","center","baseline","stretch"]},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:t,formatValue:(s,a)=>`repeat(${a},minmax(0,1fr))`},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:t,formatValue:(s,a)=>`span ${a}/span ${a}`},values2:{values:["full-row"],formatValue:(s,a)=>"1/-1"},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:t,formatValue:(s,a)=>`${a}`},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:t,formatValue:(s,a)=>`${a}`},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:t,formatValue:e.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:E},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:t,formatValue:e.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,a)=>`${a}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:[]}}};Object.keys(T).forEach(s=>{l[s]=T[s],l[s].isThemeStyle=!0});const x={m:{...l.margin,key:"margin"},mx:{...l.marginHorizontal,key:"marginHorizontal"},my:{...l.marginVertical,key:"marginVertical"},mt:{...l.marginTop,key:"marginTop"},mr:{...l.marginRight,key:"marginRight"},mb:{...l.marginBottom,key:"marginBottom"},ml:{...l.marginLeft,key:"marginLeft"},p:{...l.padding,key:"padding"},px:{...l.paddingHorizontal,key:"paddingHorizontal"},py:{...l.paddingVertical,key:"paddingVertical"},pt:{...l.paddingTop,key:"paddingTop"},pr:{...l.paddingRight,key:"paddingRight"},pb:{...l.paddingBottom,key:"paddingBottom"},pl:{...l.paddingLeft,key:"paddingLeft"},b:{...l.border,key:"border"},bx:{...l.borderHorizontal,key:"borderHorizontal"},by:{...l.borderVertical,key:"borderVertical"},bt:{...l.borderTop,key:"borderTop"},br:{...l.borderRight,key:"borderRight"},bb:{...l.borderBottom,key:"borderBottom"},bl:{...l.borderLeft,key:"borderLeft"},jc:{...l.justifyContent,key:"justifyContent"},ai:{...l.alignItems,key:"alignItems"},ac:{...l.alignContent,key:"alignContent"},d:{...l.flexDirection,key:"flexDirection"}},q=Object.keys(l),F=Object.keys(x);M.forEach(s=>{q.forEach(a=>{l[`${a}${s}`]={...l[a]},l[`${a}${s}`].pseudoSuffix=s}),F.forEach(a=>{x[`${a}${s}`]={...x[a],key:`${x[a].key}${s}`},x[`${a}${s}`].pseudoSuffix=s})});var k;(s=>{const a=new B.IdentityFactory,d=[...Object.keys(l),...Object.keys(T)],i=$();let n=!1;const p=d.reduce((v,u)=>(v[u]=new Set,v),{});s.doxClassName="_dox";function f(v,u){if(v in l)return b(v,u)}s.get=f;function m(){if(n){console.info("%c💬Flush Dox Styles","color: #00ffff");const v=`.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;let u=c([v]);u=c(u,"H"),u=c(u,"F"),u=c(u,"A"),i.innerHTML=u.join(""),n=!1}}s.flush=m;function b(v,u){var H;p[v].has(u)||(n=!0,p[v].add(u));const o=z(v,u),g=((H=o.formatClassName)==null?void 0:H.call(o,v,u))??`${v}${u}`;return`-${a.getIdentity(g)}`}function c(v,u){return Object.entries(p).filter(([o])=>{var g;return((g=l[o])==null?void 0:g.pseudoSuffix)===u}).reduce((o,[g,H])=>(H.forEach(C=>{var L;let N=b(g,C);u==="H"&&(N=`${N}:hover`),u==="F"&&(N=`${N}:focus-within`),u==="A"&&(N=`${N}:active`);const R=z(g,C),O=((L=R.formatValue)==null?void 0:L.call(R,g,C))??C,I=l[g].cssNames.map(A=>`${A}:${O};`).join("");o.push(`.${N}{${I}}`)}),o),v)}function z(v,u){const o=l[v];return o.isThemeStyle?o:o.values1.values.includes(u)?o.values1:o.values2.values.includes(u)?o.values2:o.values3}function $(){const v="crono-styles";let u=document.getElementById(v);return u||(u=document.createElement("style"),u.setAttribute("id",v),u.setAttribute("type","text/css"),document.head.insertBefore(u,document.head.firstChild)),u}})(k||(k={}));function _(s){const a=D.useTheme(s);return w.useEffect(k.flush,[s]),w.useMemo(()=>{const d=[k.doxClassName],i=a?{...j(a),...j(s)}:j(s);return Object.entries(i).forEach(([n,p])=>{d.push(k.get(n,p))}),d},[s,a])}function j(s){const a={...s};return Object.keys(a).forEach(i=>{const n=x[i];n&&(n.key in a||(a[n.key]=a[i]),delete a[i])}),a}function W(s,a){const{tag:d,children:i,props:n,className:p,style:f}=s,m=_(s),b=w.useMemo(()=>B.ClassNameUtils.classNames(p,m).join(" "),[s]),c={...n,className:b};f&&(c.style=f),a&&(c.ref=a);const[z,$]=w.useState(!1),v=typeof i=="function";return v&&(c.onMouseEnter=()=>$(!0),c.onMouseLeave=()=>$(!1)),w.createElement(d||"div",c,v?i({isHover:z}):i)}const G=w.forwardRef(W);exports.default=G;

package/components/dox.mjs

@@ -1,4 +1,4 @@
-import O, { useEffect as A, useMemo as L, forwardRef as D, useState as F } from "react";
+import A, { useEffect as D, useMemo as E, forwardRef as F, useState as P } from "react";
 import { I as _, C as M } from "../utils/utils.mjs";
 import { useTheme as W } from "../theme.mjs";
 const G = ["H", "F", "A"], t = [
@@ -53,7 +53,7 @@ const G = ["H", "F", "A"], t = [
   92,
   96,
   100
-], P = [
+], q = [
   -1,
   -2,
   -3,
@@ -99,7 +99,7 @@ const G = ["H", "F", "A"], t = [
   -92,
   -96,
   -100
-], v = [...t, ...P], j = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["auto", "hidden", "scroll", "visible"], x = [
+], r = [...t, ...q], L = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["auto", "hidden", "scroll", "visible"], V = [
   "1/2",
   "1/3",
   "2/3",
@@ -129,50 +129,50 @@ const G = ["H", "F", "A"], t = [
 ], y = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
 var e;
 ((s) => {
-  function u(c, i) {
-    return `${i / 4}rem`;
+  function a(f, m) {
+    return `${m / 4}rem`;
   }
-  s.rem = u;
-  function d(c, i) {
-    return `${i}px`;
+  s.rem = a;
+  function d(f, m) {
+    return `${m}px`;
   }
   s.px = d;
-  function m(c, i) {
-    const [b, n] = i.split("/");
-    return `${+b / +n * 100}%`;
+  function i(f, m) {
+    const [b, c] = m.split("/");
+    return `${+b / +c * 100}%`;
   }
-  s.fraction = m;
-  function g(c, i) {
-    switch (i) {
+  s.fraction = i;
+  function n(f, m) {
+    switch (m) {
       case "fit":
         return "100%";
       case "fit-screen":
-        return c.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+        return f.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
       default:
-        return i;
+        return m;
     }
   }
-  s.widthHeight = g;
-  function p(c) {
-    return (i, b) => `var(--${c}${b});`;
+  s.widthHeight = n;
+  function p(f) {
+    return (m, b) => `var(--${f}${b});`;
   }
   s.variables = p;
 })(e || (e = {}));
 var h;
 ((s) => {
-  function u(d, m) {
-    return `${d}${m.replace("/", "-")}`;
+  function a(d, i) {
+    return `${d}${i.replace("/", "-")}`;
   }
-  s.fraction = u;
+  s.fraction = a;
 })(h || (h = {}));
-const S = {
+const j = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.variables("background") },
   color: { cssNames: ["color"], formatValue: e.variables("color") },
   bgColor: { cssNames: ["background-color"], formatValue: e.variables("color") },
   borderColor: { cssNames: ["border-color"], formatValue: e.variables("color") },
   outlineColor: { cssNames: ["outline-color"], formatValue: e.variables("color") }
-}, a = {
+}, l = {
   display: {
     cssNames: ["display"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
@@ -189,37 +189,37 @@ const S = {
     cssNames: ["width"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   minWidth: {
     cssNames: ["min-width"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   maxWidth: {
     cssNames: ["max-width"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   height: {
     cssNames: ["height"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   minHeight: {
     cssNames: ["min-height"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   maxHeight: {
     cssNames: ["max-height"],
     values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+    values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
   },
   position: {
     cssNames: ["position"],
@@ -229,115 +229,115 @@ const S = {
   },
   top: {
     cssNames: ["top"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: v, formatValue: e.rem },
+    values1: { values: r, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -349,43 +349,43 @@ const S = {
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: v, formatValue: e.px },
+    values1: { values: r, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: j },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -683,25 +683,25 @@ const S = {
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: t, formatValue: (s, u) => `repeat(${u},minmax(0,1fr))` },
+    values1: { values: t, formatValue: (s, a) => `repeat(${a},minmax(0,1fr))` },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: t, formatValue: (s, u) => `span ${u}/span ${u}` },
-    values2: { values: ["full-row"], formatValue: (s, u) => "1/-1" },
+    values1: { values: t, formatValue: (s, a) => `span ${a}/span ${a}` },
+    values2: { values: ["full-row"], formatValue: (s, a) => "1/-1" },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: t, formatValue: (s, u) => `${u}` },
+    values1: { values: t, formatValue: (s, a) => `${a}` },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: t, formatValue: (s, u) => `${u}` },
+    values1: { values: t, formatValue: (s, a) => `${a}` },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -713,7 +713,7 @@ const S = {
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: j },
+    values1: { values: L },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -733,7 +733,7 @@ const S = {
     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, u) => `${u}ms`
+      formatValue: (s, a) => `${a}ms`
     },
     values2: { values: [] },
     values3: { values: [] }
@@ -769,109 +769,114 @@ const S = {
     values3: { values: [] }
   }
 };
-Object.keys(S).forEach((s) => {
-  a[s] = S[s], a[s].isThemeStyle = !0;
+Object.keys(j).forEach((s) => {
+  l[s] = j[s], l[s].isThemeStyle = !0;
 });
-const V = {
-  m: { ...a.margin, key: "margin" },
-  mx: { ...a.marginHorizontal, key: "marginHorizontal" },
-  my: { ...a.marginVertical, key: "marginVertical" },
-  mt: { ...a.marginTop, key: "marginTop" },
-  mr: { ...a.marginRight, key: "marginRight" },
-  mb: { ...a.marginBottom, key: "marginBottom" },
-  ml: { ...a.marginLeft, key: "marginLeft" },
-  p: { ...a.padding, key: "padding" },
-  px: { ...a.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...a.paddingVertical, key: "paddingVertical" },
-  pt: { ...a.paddingTop, key: "paddingTop" },
-  pr: { ...a.paddingRight, key: "paddingRight" },
-  pb: { ...a.paddingBottom, key: "paddingBottom" },
-  pl: { ...a.paddingLeft, key: "paddingLeft" },
-  b: { ...a.border, key: "border" },
-  bx: { ...a.borderHorizontal, key: "borderHorizontal" },
-  by: { ...a.borderVertical, key: "borderVertical" },
-  bt: { ...a.borderTop, key: "borderTop" },
-  br: { ...a.borderRight, key: "borderRight" },
-  bb: { ...a.borderBottom, key: "borderBottom" },
-  bl: { ...a.borderLeft, key: "borderLeft" },
-  jc: { ...a.justifyContent, key: "justifyContent" },
-  ai: { ...a.alignItems, key: "alignItems" },
-  ac: { ...a.alignContent, key: "alignContent" },
-  d: { ...a.flexDirection, key: "flexDirection" }
-}, q = Object.keys(a), U = Object.keys(V);
+const x = {
+  m: { ...l.margin, key: "margin" },
+  mx: { ...l.marginHorizontal, key: "marginHorizontal" },
+  my: { ...l.marginVertical, key: "marginVertical" },
+  mt: { ...l.marginTop, key: "marginTop" },
+  mr: { ...l.marginRight, key: "marginRight" },
+  mb: { ...l.marginBottom, key: "marginBottom" },
+  ml: { ...l.marginLeft, key: "marginLeft" },
+  p: { ...l.padding, key: "padding" },
+  px: { ...l.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...l.paddingVertical, key: "paddingVertical" },
+  pt: { ...l.paddingTop, key: "paddingTop" },
+  pr: { ...l.paddingRight, key: "paddingRight" },
+  pb: { ...l.paddingBottom, key: "paddingBottom" },
+  pl: { ...l.paddingLeft, key: "paddingLeft" },
+  b: { ...l.border, key: "border" },
+  bx: { ...l.borderHorizontal, key: "borderHorizontal" },
+  by: { ...l.borderVertical, key: "borderVertical" },
+  bt: { ...l.borderTop, key: "borderTop" },
+  br: { ...l.borderRight, key: "borderRight" },
+  bb: { ...l.borderBottom, key: "borderBottom" },
+  bl: { ...l.borderLeft, key: "borderLeft" },
+  jc: { ...l.justifyContent, key: "justifyContent" },
+  ai: { ...l.alignItems, key: "alignItems" },
+  ac: { ...l.alignContent, key: "alignContent" },
+  d: { ...l.flexDirection, key: "flexDirection" }
+}, U = Object.keys(l), X = Object.keys(x);
 G.forEach((s) => {
-  q.forEach((u) => {
-    a[`${u}${s}`] = { ...a[u] }, a[`${u}${s}`].pseudoSuffix = s;
-  }), U.forEach((u) => {
-    V[`${u}${s}`] = { ...V[u], key: `${V[u].key}${s}` }, V[`${u}${s}`].pseudoSuffix = s;
+  U.forEach((a) => {
+    l[`${a}${s}`] = { ...l[a] }, l[`${a}${s}`].pseudoSuffix = s;
+  }), X.forEach((a) => {
+    x[`${a}${s}`] = { ...x[a], key: `${x[a].key}${s}` }, x[`${a}${s}`].pseudoSuffix = s;
   });
 });
 var w;
 ((s) => {
-  const u = new _(), d = [...Object.keys(a), ...Object.keys(S)], m = z();
-  let g = !1;
-  const p = d.reduce((r, l) => (r[l] = /* @__PURE__ */ new Set(), r), {});
+  const a = new _(), d = [...Object.keys(l), ...Object.keys(j)], i = z();
+  let n = !1;
+  const p = d.reduce((v, u) => (v[u] = /* @__PURE__ */ new Set(), v), {});
   s.doxClassName = "_dox";
-  function c(r, l) {
-    if (r in a)
-      return b(r, l);
-    if (r in V)
-      return b(V[r].key, l);
+  function f(v, u) {
+    if (v in l)
+      return b(v, u);
   }
-  s.get = c;
-  function i() {
-    if (g) {
+  s.get = f;
+  function m() {
+    if (n) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      const r = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
-      let l = n([r]);
-      l = n(l, "H"), l = n(l, "F"), l = n(l, "A"), m.innerHTML = l.join(""), g = !1;
+      const v = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
+      let u = c([v]);
+      u = c(u, "H"), u = c(u, "F"), u = c(u, "A"), i.innerHTML = u.join(""), n = !1;
     }
   }
-  s.flush = i;
-  function b(r, l) {
+  s.flush = m;
+  function b(v, u) {
     var $;
-    p[r].has(l) || (g = !0, p[r].add(l));
-    const o = k(r, l), f = (($ = o.formatClassName) == null ? void 0 : $.call(o, r, l)) ?? `${r}${l}`;
-    return `-${u.getIdentity(f)}`;
+    p[v].has(u) || (n = !0, p[v].add(u));
+    const o = k(v, u), g = (($ = o.formatClassName) == null ? void 0 : $.call(o, v, u)) ?? `${v}${u}`;
+    return `-${a.getIdentity(g)}`;
   }
-  function n(r, l) {
+  function c(v, u) {
     return Object.entries(p).filter(([o]) => {
-      var f;
-      return ((f = a[o]) == null ? void 0 : f.pseudoSuffix) === l;
-    }).reduce((o, [f, $]) => ($.forEach((H) => {
+      var g;
+      return ((g = l[o]) == null ? void 0 : g.pseudoSuffix) === u;
+    }).reduce((o, [g, $]) => ($.forEach((H) => {
       var T;
-      let N = b(f, H);
-      l === "H" && (N = `${N}:hover`), l === "F" && (N = `${N}:focus-within`), l === "A" && (N = `${N}:active`);
-      const C = k(f, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, f, H)) ?? H, E = a[f].cssNames.map((I) => `${I}:${B};`).join("");
-      o.push(`.${N}{${E}}`);
-    }), o), r);
+      let N = b(g, H);
+      u === "H" && (N = `${N}:hover`), u === "F" && (N = `${N}:focus-within`), u === "A" && (N = `${N}:active`);
+      const C = k(g, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, g, H)) ?? H, I = l[g].cssNames.map((O) => `${O}:${B};`).join("");
+      o.push(`.${N}{${I}}`);
+    }), o), v);
   }
-  function k(r, l) {
-    const o = a[r];
-    return o.isThemeStyle ? o : o.values1.values.includes(l) ? o.values1 : o.values2.values.includes(l) ? o.values2 : o.values3;
+  function k(v, u) {
+    const o = l[v];
+    return o.isThemeStyle ? o : o.values1.values.includes(u) ? o.values1 : o.values2.values.includes(u) ? o.values2 : o.values3;
   }
   function z() {
-    const r = "crono-styles";
-    let l = document.getElementById(r);
-    return l || (l = document.createElement("style"), l.setAttribute("id", r), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
+    const v = "crono-styles";
+    let u = document.getElementById(v);
+    return u || (u = document.createElement("style"), u.setAttribute("id", v), u.setAttribute("type", "text/css"), document.head.insertBefore(u, document.head.firstChild)), u;
   }
 })(w || (w = {}));
-function X(s) {
-  const u = W(s);
-  return A(w.flush, [s]), L(() => {
-    const d = [w.doxClassName], m = u ? { ...u, ...s } : s;
-    return Object.entries(m).forEach(([g, p]) => {
-      d.push(w.get(g, p));
+function Y(s) {
+  const a = W(s);
+  return D(w.flush, [s]), E(() => {
+    const d = [w.doxClassName], i = a ? { ...S(a), ...S(s) } : S(s);
+    return Object.entries(i).forEach(([n, p]) => {
+      d.push(w.get(n, p));
     }), d;
-  }, [s, u]);
+  }, [s, a]);
 }
-function Y(s, u) {
-  const { tag: d, children: m, props: g, className: p, style: c } = s, i = X(s), b = L(() => M.classNames(p, i).join(" "), [s]), n = { ...g, className: b };
-  c && (n.style = c), u && (n.ref = u);
-  const [k, z] = F(!1), r = typeof m == "function";
-  return r && (n.onMouseEnter = () => z(!0), n.onMouseLeave = () => z(!1)), O.createElement(d || "div", n, r ? m({ isHover: k }) : m);
+function S(s) {
+  const a = { ...s };
+  return Object.keys(a).forEach((i) => {
+    const n = x[i];
+    n && (n.key in a || (a[n.key] = a[i]), delete a[i]);
+  }), a;
 }
-const ee = D(Y);
+function J(s, a) {
+  const { tag: d, children: i, props: n, className: p, style: f } = s, m = Y(s), b = E(() => M.classNames(p, m).join(" "), [s]), c = { ...n, className: b };
+  f && (c.style = f), a && (c.ref = a);
+  const [k, z] = P(!1), v = typeof i == "function";
+  return v && (c.onMouseEnter = () => z(!0), c.onMouseLeave = () => z(!1)), A.createElement(d || "div", c, v ? i({ isHover: k }) : i);
+}
+const se = F(J);
 export {
-  ee as default
+  se as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "main": "./box.cjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",