@cronocode/react-box 1.7.8 → 1.8.0

package/components/checkbox.cjs

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

package/components/checkbox.d.ts

@@ -16,7 +16,6 @@ interface Props extends Omit<BoxProps, 'props'> {
     required?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    native?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/checkbox.mjs

@@ -1,10 +1,9 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import t from "../box.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import n from "../box.mjs";
 import { O as a } from "../utils.mjs";
-import d from "./flex.mjs";
 import "../core.mjs";
-const l = [
+const p = [
   "name",
   "onInput",
   "onChange",
@@ -16,14 +15,11 @@ const l = [
   "checked",
   "defaultChecked"
 ];
-function p(o, r) {
-  const { native: n } = o, i = a.buildProps(o, l, { type: "checkbox" });
-  return /* @__PURE__ */ c(d, { inline: !0, position: "relative", children: [
-    /* @__PURE__ */ e(t, { ref: r, tag: "input", component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
-    !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 10.15L8.5 13 14 7" }) }) }) })
-  ] });
+function s(o, e) {
+  const t = a.buildProps(o, p, { type: "checkbox" });
+  return /* @__PURE__ */ r(n, { ref: e, tag: "input", component: "checkbox", ...t });
 }
-const v = s(p);
+const b = c(s);
 export {
-  v as default
+  b as default
 };

package/components/flex.mjs

@@ -1,12 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
 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 });
+  return /* @__PURE__ */ f(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });
 }
-const a = f(l);
+const a = i(l);
 export {
   a as default
 };

package/core/boxStyles.d.ts

@@ -1182,6 +1182,10 @@ export declare const boxThemeStyles: {
         cssNames: string[];
         formatValue: (key: string, value: string | number | boolean) => string;
     };
+    backgroundImage: {
+        cssNames: string[];
+        formatValue: (key: string, value: string | number | boolean) => string;
+    };
     color: {
         cssNames: string[];
         formatValue: (key: string, value: string | number | boolean) => string;
@@ -1211,7 +1215,7 @@ export declare const svgThemeStyles: {
         formatSelector: typeof BoxStylesFormatters.ClassName.svg;
     };
 };
-export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
+export declare const pseudoClassSuffixes: readonly ["H", "F", "A", "C"];
 export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
 export declare const pseudoClassClassName: {
     hover: {

package/core/theme.d.ts

@@ -9,6 +9,9 @@ export interface ThemeComponentStyles {
     themes?: {
         [name: string]: ThemeStyles;
     };
+    children?: {
+        [name: string]: ThemeComponentStyles;
+    };
 }
 export interface ThemeSetup {
     components?: {
@@ -24,6 +27,7 @@ interface BoxAugmentedProps {
     colors: Record<string, string>;
     shadows: Record<string, string>;
     backgrounds: Record<string, string>;
+    backgroundImages: Record<string, string>;
 }
 declare namespace Theme {
     let Styles: ThemeSetup;

package/core/types.d.ts

@@ -1,16 +1,10 @@
 /// <reference types="react" />
-import { StyleItem, aliases, boxStyles } from './boxStyles';
+import { PseudoClassSuffix, StyleItem, aliases, boxStyles } from './boxStyles';
 import { ThemeComponentProps } from './useTheme';
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
-export type Hovered<T> = {
-    [K in keyof T as K extends string ? `${K}H` : never]: T[K];
-};
-export type Focused<T> = {
-    [K in keyof T as K extends string ? `${K}F` : never]: T[K];
-};
-export type Activated<T> = {
-    [K in keyof T as K extends string ? `${K}A` : never]: T[K];
+export type PseudoClass<T, TSuffix extends PseudoClassSuffix> = {
+    [K in keyof T as K extends string ? `${K}${TSuffix}` : never]: T[K];
 };
 export declare namespace Augmented {
     interface BoxProps {
@@ -26,11 +20,11 @@ interface BoxPseudoClasses {
     hover?: boolean;
     focus?: boolean;
 }
-export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles> & ThemeComponentProps & Augmented.BoxProps;
+export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'> & PseudoClass<BoxNormalStyles, 'C'> & ThemeComponentProps & Augmented.BoxProps;
 interface SvgNormalStyles {
     rotate?: BoxNormalStyles['rotate'];
     flip?: BoxNormalStyles['flip'];
     transitionDuration?: BoxNormalStyles['transitionDuration'];
 }
-export type BoxSvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles> & Focused<SvgNormalStyles> & Activated<SvgNormalStyles> & ThemeComponentProps & Augmented.SvgProps;
+export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & PseudoClass<SvgNormalStyles, 'C'> & ThemeComponentProps & Augmented.SvgProps;
 export {};

package/core.cjs

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

package/core.mjs

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

package/package.json

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

package/core/boxTypes.d.ts

@@ -1,3 +0,0 @@
-import { boxStyles, pseudoClassSuffixes } from './boxStyles';
-export type StyleKey = keyof typeof boxStyles;
-export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];