@cronocode/react-box 1.7.3 → 1.7.5

package/box.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react"),u=require("./core.cjs");function d(t,n){const{tag:a="div",children:o,props:i,className:f,style:r}=t,m=u.useStyles(t,a==="svg"),v=s.useMemo(()=>u.classNames(m,f).join(" "),[t]),e={...i,className:v};r&&(e.style=r),n&&(e.ref=n);const[y,c]=s.useState(!1),l=typeof o=="function";return l&&(e.onMouseEnter=()=>c(!0),e.onMouseLeave=()=>c(!1)),s.createElement(a,e,l?o({isHover:y}):o)}const g=s.forwardRef(d);module.exports=g;

package/{box.js → box.mjs}

@@ -1,5 +1,5 @@
 import v, { forwardRef as d, useMemo as y, useState as g } from "react";
-import { u as p, c as N } from "./core.js";
+import { u as p, c as N } from "./core.mjs";
 function x(s, o) {
   const { tag: a = "div", children: t, props: l, className: f, style: n } = s, u = p(s, a === "svg"), i = y(() => N(u, f).join(" "), [s]), e = { ...l, className: i };
   n && (e.style = n), o && (e.ref = o);

package/components/baseSvg.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react/jsx-runtime"),g=require("react"),p=require("../box.cjs");require("../core.cjs");function u(e,r){const{viewBox:s="0 0 24 24",width:t="1.5rem",height:o,props:n,...i}=e;return c.jsx(p,{tag:"svg",ref:r,props:{...n,viewBox:s,width:t,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...i})}const w=g.forwardRef(u);module.exports=w;

package/components/{baseSvg.js → baseSvg.mjs}

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import g from "../box.js";
-import "../core.js";
+import g from "../box.mjs";
+import "../core.mjs";
 function n(o, r) {
   const { viewBox: t = "0 0 24 24", width: s = "1.5rem", height: p, props: e, ...i } = o;
   return /* @__PURE__ */ m(

package/components/button.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),u=require("../utils.cjs");require("../core.cjs");const c=["type","onClick","disabled"];function i(t,e){const o=u.ObjectUtils.buildProps(t,c);return n.jsx(s,{ref:e,tag:"button",component:"button",...o})}const b=r.forwardRef(i);module.exports=b;

package/components/{button.js → button.mjs}

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import s from "../box.js";
-import { O as i } from "../utils.js";
-import "../core.js";
+import s from "../box.mjs";
+import { O as i } from "../utils.mjs";
+import "../core.mjs";
 const m = ["type", "onClick", "disabled"];
 function e(o, t) {
   const r = i.buildProps(o, m);

package/components/checkbox.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),t=require("../box.cjs"),c=require("../utils.cjs"),u=require("./flex.cjs");require("../core.cjs");const l=["name","onInput","onChange","disabled","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,r){const{native:o}=n,s=c.ObjectUtils.buildProps(n,l,{type:"checkbox"});return e.jsxs(u,{inline:!0,position:"relative",children:[e.jsx(t,{ref:r,tag:"input",component:"checkbox",...s,appearance:o?void 0:"none"}),!o&&e.jsx(t,{position:"absolute",pointerEvents:"none",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",viewBox:"0 0 20 20",children:e.jsx("g",{fill:"none",fillRule:"evenodd",children:e.jsx("path",{stroke:"#000",strokeLinecap:"round",strokeLinejoin:"round",d:"M6 10.15L8.5 13 14 7"})})})})]})}const a=i.forwardRef(d);module.exports=a;

package/components/{checkbox.js → checkbox.mjs}

@@ -1,9 +1,9 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import t from "../box.js";
-import { O as a } from "../utils.js";
-import d from "./flex.js";
-import "../core.js";
+import t from "../box.mjs";
+import { O as a } from "../utils.mjs";
+import d from "./flex.mjs";
+import "../core.mjs";
 const l = [
   "name",
   "onInput",

package/components/dataGrid.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),u=require("../box.cjs");require("react");require("../core.cjs");function c(e){if(!(e!=null&&e.length))return{rows:[],columns:[]};const i=Object.keys(e[0]);return{rows:e.map(r=>({dataRow:r,cells:i.map(n=>({key:n,value:r[n]}))})),columns:i.map(r=>({key:r}))}}function l(e){const{data:i}=e,r=c(i);return s.jsx(u,{display:"grid",b:1,borderRadius:1,children:r.columns.length===0?s.jsx(s.Fragment,{children:"empty grid"}):s.jsxs(s.Fragment,{children:[r.columns.map((n,t)=>s.jsx(u,{style:{gridColumn:t+1},children:n.key.toString()},n.key.toString())),r.rows.map((n,t)=>n.cells.map(o=>s.jsx(u,{children:o.value},o.key.toString()+t)))]})})}module.exports=l;

package/components/{dataGrid.js → dataGrid.mjs}

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as m, jsxs as u } from "react/jsx-runtime";
-import s from "../box.js";
+import s from "../box.mjs";
 import "react";
-import "../core.js";
+import "../core.mjs";
 function c(e) {
   if (!(e != null && e.length))
     return {

package/components/flex.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),i=require("react"),o=require("../box.cjs");require("../core.cjs");function c(e,r){const{inline:n,...s}=e;return t.jsx(o,{ref:r,display:n?"inline-flex":"flex",...s})}const u=i.forwardRef(c);module.exports=u;

package/components/{flex.js → flex.mjs}

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import n from "../box.js";
-import "../core.js";
+import n from "../box.mjs";
+import "../core.mjs";
 function l(o, r) {
   const { inline: e, ...t } = o;
   return /* @__PURE__ */ i(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });

package/components/form.cjs

@@ -0,0 +1 @@
+"use strict";const m=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),f=require("../utils.cjs");require("../core.cjs");function l(r){const{onSubmit:s,props:n}=r,t=o.useRef(null),u=o.useCallback(e=>{e.preventDefault();const i=f.FormUtils.getFormEntries(t.current);s(i,e)},[]),c={...n,onSubmit:u,ref:t};return m.jsx(a,{tag:"form",...r,props:c})}module.exports=l;

package/components/{form.js → form.mjs}

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useRef as p, useCallback as u } from "react";
-import a from "../box.js";
-import { F as c } from "../utils.js";
-import "../core.js";
+import a from "../box.mjs";
+import { F as c } from "../utils.mjs";
+import "../core.mjs";
 function S(o) {
   const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
     t.preventDefault();

package/components/grid.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");require("../core.cjs");function c(r,e){const{inline:i,...n}=r;return s.jsx(o,{ref:e,display:i?"inline-grid":"grid",...n})}const u=t.forwardRef(c);module.exports=u;

package/components/{grid.js → grid.mjs}

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import e from "../box.js";
-import "../core.js";
+import e from "../box.mjs";
+import "../core.mjs";
 function f(r, i) {
   const { inline: o, ...t } = r;
   return /* @__PURE__ */ n(e, { ref: i, display: o ? "inline-grid" : "grid", ...t });

package/components/radioButton.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const i=["name","onInput","onChange","disabled","value","autoFocus","readOnly","required","checked","defaultChecked"];function c(e,t){const o=s.ObjectUtils.buildProps(e,i,{type:"radio"});return r.jsx(u,{ref:t,tag:"input",component:"radioButton",...o})}const a=n.forwardRef(c);module.exports=a;

package/components/{radioButton.js → radioButton.mjs}

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "../box.js";
-import { O as i } from "../utils.js";
-import "../core.js";
+import a from "../box.mjs";
+import { O as i } from "../utils.mjs";
+import "../core.mjs";
 const d = [
   "name",
   "onInput",

package/components/textarea.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const u=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function c(e,t){const r=s.ObjectUtils.buildProps(e,u);return n.jsx(a,{ref:t,tag:"textarea",component:"textarea",...r})}const i=o.forwardRef(c);module.exports=i;

package/components/{textarea.js → textarea.mjs}

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import n from "../box.js";
-import { O as s } from "../utils.js";
-import "../core.js";
+import n from "../box.mjs";
+import { O as s } from "../utils.mjs";
+import "../core.mjs";
 const m = [
   "name",
   "onInput",

package/components/textbox.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),u=require("../utils.cjs");require("../core.cjs");const a=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(e,t){const o=u.ObjectUtils.buildProps(e,a);return r.jsx(s,{ref:t,tag:"input",component:"textbox",...o})}const i=n.forwardRef(c);module.exports=i;

package/components/{textbox.js → textbox.mjs}

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "../box.js";
-import { O as p } from "../utils.js";
-import "../core.js";
+import a from "../box.mjs";
+import { O as p } from "../utils.mjs";
+import "../core.mjs";
 const s = [
   "name",
   "onInput",

package/components/tooltip.cjs

@@ -0,0 +1 @@
+"use strict";const l=require("react/jsx-runtime"),h=require("react-dom"),f=require("../box.cjs"),s=require("react");require("../core.cjs");function v(){return s.useMemo(()=>{const i="crono-box";let r=document.getElementById(i);return r||(r=document.createElement("div"),r.id=i,document.body.appendChild(r)),r},[])}const a=2;function x(i){const{onPositionChange:r}=i,u=s.useRef(null),[e,p]=s.useState(),m=v(),w=s.useCallback((o,t)=>{const n=c=>{c.target.contains(o)&&t(o)};return document.addEventListener("scroll",n,{capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},[e]),b=s.useCallback((o,t)=>{const n=c=>{t(o)};return window.addEventListener("resize",n,{capture:!0}),()=>{window.removeEventListener("resize",n,{capture:!0})}},[e]),d=s.useCallback(o=>{const t=o.getBoundingClientRect(),n=Math.round((t.top+window.scrollY)*a)/a,c=Math.round((t.left+window.scrollX)*a)/a;((e==null?void 0:e.top)!==n||(e==null?void 0:e.left)!==c)&&(r==null||r({top:n,left:c}),p({top:n,left:c,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(u.current){d(u.current);const o=w(u.current,d),t=b(u.current,d);return()=>{o(),t()}}},[e]),l.jsxs(l.Fragment,{children:[l.jsx(f,{ref:u}),e&&h.createPortal(l.jsx(f,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:l.jsx(f,{position:"absolute",width:"fit",...i})}),m)]})}module.exports=x;

package/components/{tooltip.js → tooltip.mjs}

@@ -1,8 +1,8 @@
 import { jsxs as v, Fragment as b, jsx as a } from "react/jsx-runtime";
 import { createPortal as x } from "react-dom";
-import d from "../box.js";
+import d from "../box.mjs";
 import { useMemo as E, useRef as C, useState as g, useCallback as f, useLayoutEffect as L } from "react";
-import "../core.js";
+import "../core.mjs";
 function y() {
   return E(() => {
     const i = "crono-box";

package/core.cjs

@@ -0,0 +1,58 @@
+"use strict";const j=require("react");var e;(u=>{(l=>{function m(s,n){return`${s}${n.replace("/","-")}`}l.fraction=m;function c(s){return[`${s} path`,`${s} circle`,`${s} rect`,`${s} line`]}l.svg=c})(u.ClassName||(u.ClassName={})),(l=>{function m(o,a){return`${a/4}rem`}l.rem=m;function c(o,a){return`${a}px`}l.px=c;function s(o,a){const[v,g]=a.split("/");return`${+v/+g*100}%`}l.fraction=s;function n(o,a){switch(a){case"fit":return"100%";case"fit-screen":return o.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return a}}l.widthHeight=n;function f(o){return(a,v)=>`var(--${o}${v});`}l.variables=f;function b(o){return(a,v)=>`var(--${o}${v});`}l.svgVariables=b;function h(o,a){return`repeat(${a},minmax(0,1fr))`}l.gridColumns=h;function p(o,a){return a==="full-row"?"1/-1":`span ${a}/span ${a}`}l.gridColumn=p;function V(o,a){return`${a}ms`}l.ms=V;function C(o,a){return`${a}deg`}l.rotate=C;function r(o,a){return a==="xAxis"?"-1 1":"1 -1"}l.flip=r})(u.Value||(u.Value={}))})(e||(e={}));const i=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,64,68,72,76,80,84,88,92,96,100],U=[-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-22,-24,-26,-28,-30,-32,-34,-36,-38,-40,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],d=[...i,...U],L=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],A=["auto","hidden","scroll","visible"],w=["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"],I=["auto","flex-start","flex-end","center","baseline","stretch"],t={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},inline:{cssNames:["display"],values1:{values:[!0]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:x,formatValue:e.Value.widthHeight},values2:{values:i,formatValue:e.Value.rem},values3:{values:w,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:d,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:d,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:L},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{values:["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:A},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:A},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:i,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:i,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},justifyContent:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},alignItems:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},flexDirection:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:i,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:i},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:i},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:I},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:I},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:i,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:i,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:i},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:i},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:L},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:i,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}},rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}},_={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},D={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},X=["H","F","A"],z={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(_).forEach(u=>{t[u]=_[u],t[u].isThemeStyle=!0});Object.keys(D).forEach(u=>{t[u]=D[u],t[u].isThemeStyle=!0});const k={w:{...t.width,key:"width"},h:{...t.height,key:"height"},m:{...t.margin,key:"margin"},mx:{...t.marginHorizontal,key:"marginHorizontal"},my:{...t.marginVertical,key:"marginVertical"},mt:{...t.marginTop,key:"marginTop"},mr:{...t.marginRight,key:"marginRight"},mb:{...t.marginBottom,key:"marginBottom"},ml:{...t.marginLeft,key:"marginLeft"},p:{...t.padding,key:"padding"},px:{...t.paddingHorizontal,key:"paddingHorizontal"},py:{...t.paddingVertical,key:"paddingVertical"},pt:{...t.paddingTop,key:"paddingTop"},pr:{...t.paddingRight,key:"paddingRight"},pb:{...t.paddingBottom,key:"paddingBottom"},pl:{...t.paddingLeft,key:"paddingLeft"},b:{...t.border,key:"border"},bx:{...t.borderHorizontal,key:"borderHorizontal"},by:{...t.borderVertical,key:"borderVertical"},bt:{...t.borderTop,key:"borderTop"},br:{...t.borderRight,key:"borderRight"},bb:{...t.borderBottom,key:"borderBottom"},bl:{...t.borderLeft,key:"borderLeft"},jc:{...t.justifyContent,key:"justifyContent"},ai:{...t.alignItems,key:"alignItems"},ac:{...t.alignContent,key:"alignContent"},d:{...t.flexDirection,key:"flexDirection"}},Y=Object.keys(t),J=Object.keys(k);X.forEach(u=>{Y.forEach(l=>{t[`${l}${u}`]={...t[l]},t[`${l}${u}`].pseudoSuffix=u}),J.forEach(l=>{k[`${l}${u}`]={...k[l],key:`${k[l].key}${u}`},k[`${l}${u}`].pseudoSuffix=u})});class Q{constructor(){this._index=0,this._cache={}}getIdentity(l){return this._cache[l]||(this._cache[l]=this.getByIndex(this._index++)),this._cache[l]}getByIndex(l){const{first:m,next:c}=Z,s=l-m.length;if(s<0)return m[l];const n=Math.floor(s/c.length),f=s-n*c.length;return this.getByIndex(n)+c[f]}}const Z={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var F;(u=>{u.boxClassName="_box",u.svgClassName="_svg";const l=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
+html{font-size: 16px;font-family: Arial, sans-serif;}
+body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
+a,ul{all: unset;}
+.${u.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
+.${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
+`,m=new Q,c=Object.keys(t);let s=!1;const n=c.reduce((r,o)=>(r[o]=new Set,r),{});function f(r,o){if(r in t)return h(r,o);if(r in z)return z[r].className}u.get=f;function b(){if(s){console.info("%c💬Flush Dox Styles","color: #00ffff");let r=p([l]);r=p(r,"H"),r=p(r,"F"),r=p(r,"A");const o=C();o.innerHTML=r.join(""),s=!1}}u.flush=b;function h(r,o){var g;n[r].has(o)||(s=!0,n[r].add(o));const a=V(r,o),v=((g=a.formatClassName)==null?void 0:g.call(a,r,o))??`${r}${o}`;return`-${m.getIdentity(v)}`}function p(r,o){return Object.entries(n).filter(([v])=>{var g;return((g=t[v])==null?void 0:g.pseudoSuffix)===o}).reduce((v,[g,M])=>(M.forEach(H=>{var O;const y=V(g,H),N=`.${h(g,H)}`;let T=[];o?o==="H"?T=[...a(`${N}:hover`,y),...a(`.${z.hover.className}:hover>${N}`,y)]:o==="F"?T=[...a(`${N}:focus-within`,y),...a(`.${z.focus.className}:focus-within>${N}`,y)]:o==="A"&&(T=a(`${N}:active`,y)):T=a(N,y);const W=((O=y.formatValue)==null?void 0:O.call(y,g,H))??H,q=t[g].cssNames.map(G=>`${G}:${W};`).join("");v.push(`${T.join(",")}{${q}}`)}),v),r);function a(v,g){return g.formatSelector?g.formatSelector(v):[v]}}function V(r,o){const a=t[r];return a.isThemeStyle?a:a.values1.values.includes(o)?a.values1:a.values2.values.includes(o)?a.values2:a.values3}function C(){const r="crono-styles",a=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let v=a.getElementById(r);return v||(v=a.createElement("style"),v.setAttribute("id",r),v.setAttribute("type","text/css"),a.head.insertBefore(v,a.head.firstChild)),v}})(F||(F={}));const $=F,S={button:{styles:{display:"inline-block",p:3,cursor:"pointer",b:1,borderRadius:1},disabled:{cursor:"default"}},checkbox:{styles:{display:"inline-block",b:1,p:2}},radioButton:{styles:{display:"inline-block",b:1,p:2}},textbox:{styles:{display:"inline-block",b:1,borderRadius:1,p:3}},textarea:{styles:{display:"inline-block",b:1,borderRadius:1}}};var R;(u=>{u.Styles=S;function l(s){u.Styles=s,c()}u.setup=l;function m(s,n){const f=Object.entries(s.colors).map(([a,v])=>`--color${a}: ${v};`).join(`
+  `),b=Object.entries(s.shadows).map(([a,v])=>`--shadow${a}: ${v};`).join(`
+  `),h=Object.entries(s.backgrounds).map(([a,v])=>`--background${a}: ${v};`).join(`
+  `),p=[":root {"];f&&p.push(`  ${f}`),b&&p.push(`  ${b}`),h&&p.push(`  ${h}`),p.push("}");const V=Object.keys(s.colors).map(a=>`'${a}'`).join(" | "),C=Object.keys(s.backgrounds).map(a=>`'${a}'`).join(" | "),r=Object.keys(s.shadows).map(a=>`'${a}'`).join(" | "),o=`import '@cronocode/react-box';
+  
+  declare module '${(n==null?void 0:n.namespacePath)??"@cronocode/react-box/core/types"}' {
+    type ColorType = ${V};
+    type BackgroundType = ${C};
+    type ShadowType = ${r};
+  
+    namespace Augmented {
+      interface BoxProps {
+        color?: ColorType;
+        colorH?: ColorType;
+        colorF?: ColorType;
+        colorA?: ColorType;
+        bgColor?: ColorType;
+        bgColorH?: ColorType;
+        bgColorF?: ColorType;
+        bgColorA?: ColorType;
+        borderColor?: ColorType;
+        borderColorH?: ColorType;
+        borderColorF?: ColorType;
+        borderColorA?: ColorType;
+        outlineColor?: ColorType;
+        outlineColorH?: ColorType;
+        outlineColorF?: ColorType;
+        outlineColorA?: ColorType;
+        background?: BackgroundType;
+        backgroundH?: BackgroundType;
+        backgroundF?: BackgroundType;
+        backgroundA?: BackgroundType;
+        shadow?: ShadowType;
+        shadowH?: ShadowType;
+        shadowF?: ShadowType;
+        shadowA?: ShadowType;
+      }
+  
+      interface SvgProps {
+        fill?: ColorType;
+        fillH?: ColorType;
+        fillF?: ColorType;
+        fillA?: ColorType;
+        stroke?: ColorType;
+        strokeH?: ColorType;
+        strokeF?: ColorType;
+        strokeA?: ColorType;
+      }
+    }
+  }
+  `;return{variables:p.join(`
+`),boxDts:o}}u.setupAugmentedProps=m;function c(){Object.keys(S).forEach(n=>{const f=u.Styles[n],b=S[n];f?(f.styles={...b.styles,...f.styles},f.disabled&&b.disabled&&(f.disabled={...b.disabled,...f.disabled})):u.Styles[n]=S[n]})}})(R||(R={}));const E=R;function K(u){const{clean:l,disabled:m,theme:c,component:s}=u;return j.useMemo(()=>{var b,h,p;if(l)return;let n=E.Styles[s]??((b=E.Styles.components)==null?void 0:b[s]);if(!n)return;let f=c?{...n.styles,...(h=n.themes)==null?void 0:h[c].styles}:n.styles;return m?c?{...f,...n.disabled,...(p=n.themes)==null?void 0:p[c].disabled}:{...f,...n.disabled}:f},[s,l,m,c])}const ee=typeof window<"u"&&typeof window.document<"u",se=ee?j.useLayoutEffect:j.useEffect;function ae(u,l){const m=K(u);return se($.flush,[u]),j.useMemo(()=>{const c=[l?$.svgClassName:$.boxClassName],s=m?{...B(m),...B(u)}:B(u);return"inline"in s&&(s.display==="block"?s.display="inline-block":s.display==="flex"?s.display="inline-flex":s.display==="grid"&&(s.display="inline-grid"),delete s.inline),"inlineH"in s&&(s.displayH==="block"?s.displayH="inline-block":s.displayH==="flex"?s.displayH="inline-flex":s.displayH==="grid"&&(s.displayH="inline-grid"),delete s.inlineH),"inlineF"in s&&(s.displayF==="block"?s.displayF="inline-block":s.displayF==="flex"?s.displayF="inline-flex":s.displayF==="grid"&&(s.displayF="inline-grid"),delete s.inlineF),"inlineA"in s&&(s.displayA==="block"?s.displayA="inline-block":s.displayA==="flex"?s.displayA="inline-flex":s.displayA==="grid"&&(s.displayA="inline-grid"),delete s.inlineA),Object.entries(s).forEach(([n,f])=>{c.push($.get(n,f))}),c},[u,m])}function B(u){const l={...u};return Object.keys(l).forEach(c=>{const s=k[c];s&&(s.key in l||(l[s.key]=l[c]),delete l[c])}),l}function P(...u){return u.reduce((l,m)=>m?typeof m=="string"?(l.push(m),l):Array.isArray(m)?(l.push(...P(...m)),l):(Object.entries(m).forEach(([c,s])=>{s&&l.push(c)}),l):l,[])}exports.StylesContext=$;exports.Theme=E;exports.classNames=P;exports.useStyles=ae;

package/{core.js → core.mjs}

@@ -1,68 +1,68 @@
-import { useMemo as P, useLayoutEffect as U, useEffect as X } from "react";
+import { useMemo as D, useLayoutEffect as q, useEffect as U } from "react";
 var e;
 ((u) => {
-  ((a) => {
-    function c(s, n) {
+  ((l) => {
+    function m(s, n) {
       return `${s}${n.replace("/", "-")}`;
     }
-    a.fraction = c;
-    function v(s) {
+    l.fraction = m;
+    function c(s) {
       return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
     }
-    a.svg = v;
-  })(u.ClassName || (u.ClassName = {})), ((a) => {
-    function c(t, l) {
-      return `${l / 4}rem`;
+    l.svg = c;
+  })(u.ClassName || (u.ClassName = {})), ((l) => {
+    function m(o, a) {
+      return `${a / 4}rem`;
     }
-    a.rem = c;
-    function v(t, l) {
-      return `${l}px`;
+    l.rem = m;
+    function c(o, a) {
+      return `${a}px`;
     }
-    a.px = v;
-    function s(t, l) {
-      const [r, f] = l.split("/");
-      return `${+r / +f * 100}%`;
+    l.px = c;
+    function s(o, a) {
+      const [v, g] = a.split("/");
+      return `${+v / +g * 100}%`;
     }
-    a.fraction = s;
-    function n(t, l) {
-      switch (l) {
+    l.fraction = s;
+    function n(o, a) {
+      switch (a) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return t.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return l;
+          return a;
       }
     }
-    a.widthHeight = n;
-    function d(t) {
-      return (l, r) => `var(--${t}${r});`;
+    l.widthHeight = n;
+    function f(o) {
+      return (a, v) => `var(--${o}${v});`;
     }
-    a.variables = d;
-    function p(t) {
-      return (l, r) => `var(--${t}${r});`;
+    l.variables = f;
+    function b(o) {
+      return (a, v) => `var(--${o}${v});`;
     }
-    a.svgVariables = p;
-    function h(t, l) {
-      return `repeat(${l},minmax(0,1fr))`;
+    l.svgVariables = b;
+    function h(o, a) {
+      return `repeat(${a},minmax(0,1fr))`;
     }
-    a.gridColumns = h;
-    function g(t, l) {
-      return l === "full-row" ? "1/-1" : `span ${l}/span ${l}`;
+    l.gridColumns = h;
+    function p(o, a) {
+      return a === "full-row" ? "1/-1" : `span ${a}/span ${a}`;
     }
-    a.gridColumn = g;
-    function V(t, l) {
-      return `${l}ms`;
+    l.gridColumn = p;
+    function V(o, a) {
+      return `${a}ms`;
     }
-    a.ms = V;
-    function N(t, l) {
-      return `${l}deg`;
+    l.ms = V;
+    function C(o, a) {
+      return `${a}deg`;
     }
-    a.rotate = N;
-    function T(t, l) {
-      return l === "xAxis" ? "-1 1" : "1 -1";
+    l.rotate = C;
+    function r(o, a) {
+      return a === "xAxis" ? "-1 1" : "1 -1";
     }
-    a.flip = T;
+    l.flip = r;
   })(u.Value || (u.Value = {}));
 })(e || (e = {}));
 const i = [
@@ -117,7 +117,7 @@ const i = [
   92,
   96,
   100
-], Y = [
+], X = [
   -1,
   -2,
   -3,
@@ -163,7 +163,7 @@ const i = [
   -92,
   -96,
   -100
-], m = [...i, ...Y], E = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], x = [
+], d = [...i, ...X], O = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], j = ["auto", "hidden", "scroll", "visible"], w = [
   "1/2",
   "1/3",
   "2/3",
@@ -190,7 +190,7 @@ const i = [
   "9/12",
   "10/12",
   "11/12"
-], k = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
+], x = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], R = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], t = {
   /** The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
   display: {
     cssNames: ["display"],
@@ -214,60 +214,60 @@ const i = [
   },
   width: {
     cssNames: ["width"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
     cssNames: ["min-width"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
     cssNames: ["max-width"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
     cssNames: ["height"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
     cssNames: ["min-height"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
     cssNames: ["max-height"],
-    values1: { values: k, formatValue: e.Value.widthHeight },
+    values1: { values: x, formatValue: e.Value.widthHeight },
     values2: { values: i, formatValue: e.Value.rem },
     values3: {
-      values: x,
+      values: w,
       formatValue: e.Value.fraction
       // formatClassName: BoxStylesFormatters.ClassName.fraction,
     }
@@ -280,115 +280,115 @@ const i = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: m, formatValue: e.Value.rem },
+    values1: { values: d, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -400,43 +400,43 @@ const i = [
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: m, formatValue: e.Value.px },
+    values1: { values: d, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: E },
+    values1: { values: O },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -549,19 +549,19 @@ const i = [
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: A },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: A },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: A },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -722,13 +722,13 @@ const i = [
   },
   alignSelf: {
     cssNames: ["align-self"],
-    values1: { values: L },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   justifySelf: {
     cssNames: ["justify-self"],
-    values1: { values: L },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -764,7 +764,7 @@ const i = [
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: E },
+    values1: { values: O },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -831,14 +831,14 @@ const i = [
     values2: { values: [] },
     values3: { values: [] }
   }
-}, I = {
+}, L = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
   color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
   bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
   borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
   outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
-}, _ = {
+}, I = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -849,140 +849,142 @@ const i = [
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, J = ["H", "F", "A"], z = {
+}, Y = ["H", "F", "A"], H = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 };
-Object.keys(I).forEach((u) => {
-  o[u] = I[u], o[u].isThemeStyle = !0;
+Object.keys(L).forEach((u) => {
+  t[u] = L[u], t[u].isThemeStyle = !0;
 });
-Object.keys(_).forEach((u) => {
-  o[u] = _[u], o[u].isThemeStyle = !0;
+Object.keys(I).forEach((u) => {
+  t[u] = I[u], t[u].isThemeStyle = !0;
 });
-const C = {
-  w: { ...o.width, key: "width" },
-  h: { ...o.height, key: "height" },
-  m: { ...o.margin, key: "margin" },
-  mx: { ...o.marginHorizontal, key: "marginHorizontal" },
-  my: { ...o.marginVertical, key: "marginVertical" },
-  mt: { ...o.marginTop, key: "marginTop" },
-  mr: { ...o.marginRight, key: "marginRight" },
-  mb: { ...o.marginBottom, key: "marginBottom" },
-  ml: { ...o.marginLeft, key: "marginLeft" },
-  p: { ...o.padding, key: "padding" },
-  px: { ...o.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...o.paddingVertical, key: "paddingVertical" },
-  pt: { ...o.paddingTop, key: "paddingTop" },
-  pr: { ...o.paddingRight, key: "paddingRight" },
-  pb: { ...o.paddingBottom, key: "paddingBottom" },
-  pl: { ...o.paddingLeft, key: "paddingLeft" },
-  b: { ...o.border, key: "border" },
-  bx: { ...o.borderHorizontal, key: "borderHorizontal" },
-  by: { ...o.borderVertical, key: "borderVertical" },
-  bt: { ...o.borderTop, key: "borderTop" },
-  br: { ...o.borderRight, key: "borderRight" },
-  bb: { ...o.borderBottom, key: "borderBottom" },
-  bl: { ...o.borderLeft, key: "borderLeft" },
-  jc: { ...o.justifyContent, key: "justifyContent" },
-  ai: { ...o.alignItems, key: "alignItems" },
-  ac: { ...o.alignContent, key: "alignContent" },
-  d: { ...o.flexDirection, key: "flexDirection" }
-}, Q = Object.keys(o), Z = Object.keys(C);
-J.forEach((u) => {
-  Q.forEach((a) => {
-    o[`${a}${u}`] = { ...o[a] }, o[`${a}${u}`].pseudoSuffix = u;
-  }), Z.forEach((a) => {
-    C[`${a}${u}`] = { ...C[a], key: `${C[a].key}${u}` }, C[`${a}${u}`].pseudoSuffix = u;
+const k = {
+  w: { ...t.width, key: "width" },
+  h: { ...t.height, key: "height" },
+  m: { ...t.margin, key: "margin" },
+  mx: { ...t.marginHorizontal, key: "marginHorizontal" },
+  my: { ...t.marginVertical, key: "marginVertical" },
+  mt: { ...t.marginTop, key: "marginTop" },
+  mr: { ...t.marginRight, key: "marginRight" },
+  mb: { ...t.marginBottom, key: "marginBottom" },
+  ml: { ...t.marginLeft, key: "marginLeft" },
+  p: { ...t.padding, key: "padding" },
+  px: { ...t.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...t.paddingVertical, key: "paddingVertical" },
+  pt: { ...t.paddingTop, key: "paddingTop" },
+  pr: { ...t.paddingRight, key: "paddingRight" },
+  pb: { ...t.paddingBottom, key: "paddingBottom" },
+  pl: { ...t.paddingLeft, key: "paddingLeft" },
+  b: { ...t.border, key: "border" },
+  bx: { ...t.borderHorizontal, key: "borderHorizontal" },
+  by: { ...t.borderVertical, key: "borderVertical" },
+  bt: { ...t.borderTop, key: "borderTop" },
+  br: { ...t.borderRight, key: "borderRight" },
+  bb: { ...t.borderBottom, key: "borderBottom" },
+  bl: { ...t.borderLeft, key: "borderLeft" },
+  jc: { ...t.justifyContent, key: "justifyContent" },
+  ai: { ...t.alignItems, key: "alignItems" },
+  ac: { ...t.alignContent, key: "alignContent" },
+  d: { ...t.flexDirection, key: "flexDirection" }
+}, J = Object.keys(t), Q = Object.keys(k);
+Y.forEach((u) => {
+  J.forEach((l) => {
+    t[`${l}${u}`] = { ...t[l] }, t[`${l}${u}`].pseudoSuffix = u;
+  }), Q.forEach((l) => {
+    k[`${l}${u}`] = { ...k[l], key: `${k[l].key}${u}` }, k[`${l}${u}`].pseudoSuffix = u;
   });
 });
-class K {
+class Z {
   constructor() {
     this._index = 0, this._cache = {};
   }
-  getIdentity(a) {
-    return this._cache[a] || (this._cache[a] = this.getByIndex(this._index++)), this._cache[a];
+  getIdentity(l) {
+    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
   }
-  getByIndex(a) {
-    const { first: c, next: v } = ee, s = a - c.length;
+  getByIndex(l) {
+    const { first: m, next: c } = K, s = l - m.length;
     if (s < 0)
-      return c[a];
-    const n = Math.floor(s / v.length), d = s - n * v.length;
-    return this.getByIndex(n) + v[d];
+      return m[l];
+    const n = Math.floor(s / c.length), f = s - n * c.length;
+    return this.getByIndex(n) + c[f];
   }
 }
-const ee = {
+const K = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var F;
+var B;
 ((u) => {
   u.boxClassName = "_box", u.svgClassName = "_svg";
-  const a = `: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;}}
+  const l = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${u.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
 .${u.svgClassName}{transition: all var(--svgTransitionTime);}.${u.svgClassName} path,.${u.svgClassName} circle,.${u.svgClassName} rect,.${u.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, c = new K(), v = Object.keys(o), s = T();
-  let n = !1;
-  const d = v.reduce(
-    (t, l) => (t[l] = /* @__PURE__ */ new Set(), t),
+`, m = new Z(), c = Object.keys(t);
+  let s = !1;
+  const n = c.reduce(
+    (r, o) => (r[o] = /* @__PURE__ */ new Set(), r),
     {}
   );
-  function p(t, l) {
-    if (t in o)
-      return g(t, l);
-    if (t in z)
-      return z[t].className;
+  function f(r, o) {
+    if (r in t)
+      return h(r, o);
+    if (r in H)
+      return H[r].className;
   }
-  u.get = p;
-  function h() {
-    if (n) {
+  u.get = f;
+  function b() {
+    if (s) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let t = V([a]);
-      t = V(t, "H"), t = V(t, "F"), t = V(t, "A"), s.innerHTML = t.join(""), n = !1;
+      let r = p([l]);
+      r = p(r, "H"), r = p(r, "F"), r = p(r, "A");
+      const o = C();
+      o.innerHTML = r.join(""), s = !1;
     }
   }
-  u.flush = h;
-  function g(t, l) {
-    var b;
-    d[t].has(l) || (n = !0, d[t].add(l));
-    const r = N(t, l), f = ((b = r.formatClassName) == null ? void 0 : b.call(r, t, l)) ?? `${t}${l}`;
-    return `-${c.getIdentity(f)}`;
+  u.flush = b;
+  function h(r, o) {
+    var g;
+    n[r].has(o) || (s = !0, n[r].add(o));
+    const a = V(r, o), v = ((g = a.formatClassName) == null ? void 0 : g.call(a, r, o)) ?? `${r}${o}`;
+    return `-${m.getIdentity(v)}`;
   }
-  function V(t, l) {
-    return Object.entries(d).filter(([f]) => {
-      var b;
-      return ((b = o[f]) == null ? void 0 : b.pseudoSuffix) === l;
-    }).reduce((f, [b, W]) => (W.forEach((H) => {
-      var R;
-      const y = N(b, H), w = `.${g(b, H)}`;
-      let $ = [];
-      l ? l === "H" ? $ = [
-        ...r(`${w}:hover`, y),
-        ...r(`.${z.hover.className}:hover>${w}`, y)
-      ] : l === "F" ? $ = [
-        ...r(`${w}:focus-within`, y),
-        ...r(`.${z.focus.className}:focus-within>${w}`, y)
-      ] : l === "A" && ($ = r(`${w}:active`, y)) : $ = r(w, y);
-      const G = ((R = y.formatValue) == null ? void 0 : R.call(y, b, H)) ?? H, M = o[b].cssNames.map((q) => `${q}:${G};`).join("");
-      f.push(`${$.join(",")}{${M}}`);
-    }), f), t);
-    function r(f, b) {
-      return b.formatSelector ? b.formatSelector(f) : [f];
+  function p(r, o) {
+    return Object.entries(n).filter(([v]) => {
+      var g;
+      return ((g = t[v]) == null ? void 0 : g.pseudoSuffix) === o;
+    }).reduce((v, [g, P]) => (P.forEach(($) => {
+      var E;
+      const y = V(g, $), N = `.${h(g, $)}`;
+      let T = [];
+      o ? o === "H" ? T = [
+        ...a(`${N}:hover`, y),
+        ...a(`.${H.hover.className}:hover>${N}`, y)
+      ] : o === "F" ? T = [
+        ...a(`${N}:focus-within`, y),
+        ...a(`.${H.focus.className}:focus-within>${N}`, y)
+      ] : o === "A" && (T = a(`${N}:active`, y)) : T = a(N, y);
+      const W = ((E = y.formatValue) == null ? void 0 : E.call(y, g, $)) ?? $, G = t[g].cssNames.map((M) => `${M}:${W};`).join("");
+      v.push(`${T.join(",")}{${G}}`);
+    }), v), r);
+    function a(v, g) {
+      return g.formatSelector ? g.formatSelector(v) : [v];
     }
   }
-  function N(t, l) {
-    const r = o[t];
-    return r.isThemeStyle ? r : r.values1.values.includes(l) ? r.values1 : r.values2.values.includes(l) ? r.values2 : r.values3;
+  function V(r, o) {
+    const a = t[r];
+    return a.isThemeStyle ? a : a.values1.values.includes(o) ? a.values1 : a.values2.values.includes(o) ? a.values2 : a.values3;
   }
-  function T() {
-    const t = "crono-styles", r = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let f = r.getElementById(t);
-    return f || (f = r.createElement("style"), f.setAttribute("id", t), f.setAttribute("type", "text/css"), r.head.insertBefore(f, r.head.firstChild)), f;
+  function C() {
+    const r = "crono-styles", a = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let v = a.getElementById(r);
+    return v || (v = a.createElement("style"), v.setAttribute("id", r), v.setAttribute("type", "text/css"), a.head.insertBefore(v, a.head.firstChild)), v;
   }
-})(F || (F = {}));
-const S = F, j = {
+})(B || (B = {}));
+const z = B, S = {
   button: {
     styles: {
       display: "inline-block",
@@ -1025,25 +1027,25 @@ const S = F, j = {
     }
   }
 };
-var O;
+var F;
 ((u) => {
-  u.Styles = j;
-  function a(s) {
-    u.Styles = s, v();
+  u.Styles = S;
+  function l(s) {
+    u.Styles = s, c();
   }
-  u.setup = a;
-  function c(s, n) {
-    const d = Object.entries(s.colors).map(([l, r]) => `--color${l}: ${r};`).join(`
-  `), p = Object.entries(s.shadows).map(([l, r]) => `--shadow${l}: ${r};`).join(`
-  `), h = Object.entries(s.backgrounds).map(([l, r]) => `--background${l}: ${r};`).join(`
-  `), g = [":root {"];
-    d && g.push(`  ${d}`), p && g.push(`  ${p}`), h && g.push(`  ${h}`), g.push("}");
-    const V = Object.keys(s.colors).map((l) => `'${l}'`).join(" | "), N = Object.keys(s.backgrounds).map((l) => `'${l}'`).join(" | "), T = Object.keys(s.shadows).map((l) => `'${l}'`).join(" | "), t = `import '@cronocode/react-box';
+  u.setup = l;
+  function m(s, n) {
+    const f = Object.entries(s.colors).map(([a, v]) => `--color${a}: ${v};`).join(`
+  `), b = Object.entries(s.shadows).map(([a, v]) => `--shadow${a}: ${v};`).join(`
+  `), h = Object.entries(s.backgrounds).map(([a, v]) => `--background${a}: ${v};`).join(`
+  `), p = [":root {"];
+    f && p.push(`  ${f}`), b && p.push(`  ${b}`), h && p.push(`  ${h}`), p.push("}");
+    const V = Object.keys(s.colors).map((a) => `'${a}'`).join(" | "), C = Object.keys(s.backgrounds).map((a) => `'${a}'`).join(" | "), r = Object.keys(s.shadows).map((a) => `'${a}'`).join(" | "), o = `import '@cronocode/react-box';
   
   declare module '${(n == null ? void 0 : n.namespacePath) ?? "@cronocode/react-box/core/types"}' {
     type ColorType = ${V};
-    type BackgroundType = ${N};
-    type ShadowType = ${T};
+    type BackgroundType = ${C};
+    type ShadowType = ${r};
   
     namespace Augmented {
       interface BoxProps {
@@ -1087,58 +1089,58 @@ var O;
   }
   `;
     return {
-      variables: g.join(`
+      variables: p.join(`
 `),
-      boxDts: t
+      boxDts: o
     };
   }
-  u.setupAugmentedProps = c;
-  function v() {
-    Object.keys(j).forEach((n) => {
-      const d = u.Styles[n], p = j[n];
-      d ? (d.styles = { ...p.styles, ...d.styles }, d.disabled && p.disabled && (d.disabled = { ...p.disabled, ...d.disabled })) : u.Styles[n] = j[n];
+  u.setupAugmentedProps = m;
+  function c() {
+    Object.keys(S).forEach((n) => {
+      const f = u.Styles[n], b = S[n];
+      f ? (f.styles = { ...b.styles, ...f.styles }, f.disabled && b.disabled && (f.disabled = { ...b.disabled, ...f.disabled })) : u.Styles[n] = S[n];
     });
   }
-})(O || (O = {}));
-const D = O;
-function se(u) {
-  const { clean: a, disabled: c, theme: v, component: s } = u;
-  return P(() => {
-    var p, h, g;
-    if (a)
+})(F || (F = {}));
+const _ = F;
+function ee(u) {
+  const { clean: l, disabled: m, theme: c, component: s } = u;
+  return D(() => {
+    var b, h, p;
+    if (l)
       return;
-    let n = D.Styles[s] ?? ((p = D.Styles.components) == null ? void 0 : p[s]);
+    let n = _.Styles[s] ?? ((b = _.Styles.components) == null ? void 0 : b[s]);
     if (!n)
       return;
-    let d = v ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[v].styles } : n.styles;
-    return c ? v ? { ...d, ...n.disabled, ...(g = n.themes) == null ? void 0 : g[v].disabled } : { ...d, ...n.disabled } : d;
-  }, [s, a, c, v]);
+    let f = c ? { ...n.styles, ...(h = n.themes) == null ? void 0 : h[c].styles } : n.styles;
+    return m ? c ? { ...f, ...n.disabled, ...(p = n.themes) == null ? void 0 : p[c].disabled } : { ...f, ...n.disabled } : f;
+  }, [s, l, m, c]);
 }
-const ae = typeof window < "u" && typeof window.document < "u", le = ae ? U : X;
-function re(u, a) {
-  const c = se(u);
-  return le(S.flush, [u]), P(() => {
-    const v = [a ? S.svgClassName : S.boxClassName], s = c ? { ...B(c), ...B(u) } : B(u);
-    return "inline" in s && (s.display === "block" ? s.display = "inline-block" : s.display === "flex" ? s.display = "inline-flex" : s.display === "grid" && (s.display = "inline-grid"), delete s.inline), "inlineH" in s && (s.displayH === "block" ? s.displayH = "inline-block" : s.displayH === "flex" ? s.displayH = "inline-flex" : s.displayH === "grid" && (s.displayH = "inline-grid"), delete s.inlineH), "inlineF" in s && (s.displayF === "block" ? s.displayF = "inline-block" : s.displayF === "flex" ? s.displayF = "inline-flex" : s.displayF === "grid" && (s.displayF = "inline-grid"), delete s.inlineF), "inlineA" in s && (s.displayA === "block" ? s.displayA = "inline-block" : s.displayA === "flex" ? s.displayA = "inline-flex" : s.displayA === "grid" && (s.displayA = "inline-grid"), delete s.inlineA), Object.entries(s).forEach(([n, d]) => {
-      v.push(S.get(n, d));
-    }), v;
-  }, [u, c]);
+const se = typeof window < "u" && typeof window.document < "u", ae = se ? q : U;
+function oe(u, l) {
+  const m = ee(u);
+  return ae(z.flush, [u]), D(() => {
+    const c = [l ? z.svgClassName : z.boxClassName], s = m ? { ...A(m), ...A(u) } : A(u);
+    return "inline" in s && (s.display === "block" ? s.display = "inline-block" : s.display === "flex" ? s.display = "inline-flex" : s.display === "grid" && (s.display = "inline-grid"), delete s.inline), "inlineH" in s && (s.displayH === "block" ? s.displayH = "inline-block" : s.displayH === "flex" ? s.displayH = "inline-flex" : s.displayH === "grid" && (s.displayH = "inline-grid"), delete s.inlineH), "inlineF" in s && (s.displayF === "block" ? s.displayF = "inline-block" : s.displayF === "flex" ? s.displayF = "inline-flex" : s.displayF === "grid" && (s.displayF = "inline-grid"), delete s.inlineF), "inlineA" in s && (s.displayA === "block" ? s.displayA = "inline-block" : s.displayA === "flex" ? s.displayA = "inline-flex" : s.displayA === "grid" && (s.displayA = "inline-grid"), delete s.inlineA), Object.entries(s).forEach(([n, f]) => {
+      c.push(z.get(n, f));
+    }), c;
+  }, [u, m]);
 }
-function B(u) {
-  const a = { ...u };
-  return Object.keys(a).forEach((v) => {
-    const s = C[v];
-    s && (s.key in a || (a[s.key] = a[v]), delete a[v]);
-  }), a;
+function A(u) {
+  const l = { ...u };
+  return Object.keys(l).forEach((c) => {
+    const s = k[c];
+    s && (s.key in l || (l[s.key] = l[c]), delete l[c]);
+  }), l;
 }
-function ue(...u) {
-  return u.reduce((a, c) => c ? typeof c == "string" ? (a.push(c), a) : Array.isArray(c) ? (a.push(...ue(...c)), a) : (Object.entries(c).forEach(([v, s]) => {
-    s && a.push(v);
-  }), a) : a, []);
+function le(...u) {
+  return u.reduce((l, m) => m ? typeof m == "string" ? (l.push(m), l) : Array.isArray(m) ? (l.push(...le(...m)), l) : (Object.entries(m).forEach(([c, s]) => {
+    s && l.push(c);
+  }), l) : l, []);
 }
 export {
-  S,
-  D as T,
-  ue as c,
-  re as u
+  z as S,
+  _ as T,
+  le as c,
+  oe as u
 };

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "type": "module",
-  "main": "./box.js",
-  "module": "./box.js",
+  "main": "./box.cjs",
+  "module": "./box.mjs",
   "types": "./box.d.ts",
   "exports": {
     ".": {
-      "import": "./box.js",
-      "require": "./box.js",
+      "import": "./box.mjs",
+      "require": "./box.cjs",
       "types": "./box.d.ts"
     },
     "./theme": {
-      "import": "./theme.js",
-      "require": "./theme.js",
+      "import": "./theme.mjs",
+      "require": "./theme.cjs",
       "types": "./theme.d.ts"
     },
     "./core/types": {
       "types": "./core/types.d.ts"
     },
     "./ssg": {
-      "import": "./ssg.js",
-      "require": "./ssg.js",
+      "import": "./ssg.mjs",
+      "require": "./ssg.cjs",
       "types": "./ssg.d.ts"
     },
     "./components/*": {
-      "import": "./components/*.js",
-      "require": "./components/*.js",
+      "import": "./components/*.mjs",
+      "require": "./components/*.cjs",
       "types": "./components/*.d.ts"
     }
   },

package/ssg.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core.cjs");require("react");const{flush:t}=e.StylesContext;exports.flushStyles=t;

package/{ssg.js → ssg.mjs}

@@ -1,4 +1,4 @@
-import { S as t } from "./core.js";
+import { S as t } from "./core.mjs";
 import "react";
 const { flush: e } = t;
 export {

package/theme.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./core.cjs");require("react");module.exports=e.Theme;

package/{theme.js → theme.mjs}

@@ -1,4 +1,4 @@
-import { T as m } from "./core.js";
+import { T as m } from "./core.mjs";
 import "react";
 export {
   m as default

package/utils.cjs

@@ -0,0 +1 @@
+"use strict";var a;(f=>{function l(c,...s){const e={...c},o={};return s.forEach(r=>{r in e&&(o[r]=e[r],delete e[r])}),[o,e]}f.moveToTagProps=l;function p(c,s,e){const o={...c},r=o.props||{};return s.forEach(t=>{if(t in o){if(r[t]=o[t],t==="disabled")return;delete o[t]}}),e&&Object.entries(e).forEach(([t,n])=>{r[t]=n}),o.props=r,o}f.buildProps=p})(a||(a={}));const m=a;var h;(f=>{function l(c){const s=Array.from(c.elements).reduce((e,o)=>{const r=o.name;return r&&(e[r]||(e[r]=[]),e[r].push(o)),e},{});return Object.entries(s).reduce((e,[o,r])=>{if(r.length===1){const t=r[0];p(e,o,t.type==="checkbox"||t.type==="radio"?t.checked:t.value)}else{const t=r.reduce((n,i)=>(i.type==="checkbox"||i.type==="radio"?i.checked&&n.push(i.value):n.push(i.value),n),[]);p(e,o,t)}return e},{})}f.getFormEntries=l;function p(c,s,e){if(s.includes(".")){const o=s.split(".");let r=c;o.forEach((t,n)=>{if(o.length>n+1){const i=t.match(/^(.+)\[(\d)\]$/);if(i){const[,u,d]=i;r[u]=r[u]||[],r[u][d]=r[u][d]||{},r=r[u][d]}else r[t]=r[t]||{},r=r[t]}else r[t]=e})}else c[s]=e}})(h||(h={}));const P=h;exports.FormUtils=P;exports.ObjectUtils=m;