@cronocode/react-box 1.8.4 → 1.8.6

package/box.cjs

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

package/box.mjs

@@ -1,12 +1,13 @@
-import y, { forwardRef as v, useMemo as g, useState as p } from "react";
+import y, { forwardRef as v, useMemo as p, useState as g } from "react";
 import { u as N, c as x } from "./core.mjs";
-function H(s, o) {
-  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: a } = s, f = N(s, r === "svg"), m = g(() => x(f, u).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(a) ? a[0] : a };
-  n && (e.style = n), o && (e.ref = o);
-  const [d, l] = p(!1), c = typeof t == "function";
+import "./utils.mjs";
+function H(s, a) {
+  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: o } = s, f = N(s, r === "svg"), m = p(() => x(f, u).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(o) ? o[0] : o };
+  n && (e.style = n), a && (e.ref = a);
+  const [d, l] = g(!1), c = typeof t == "function";
   return c && (e.onMouseEnter = () => l(!0), e.onMouseLeave = () => l(!1)), y.createElement(r, e, c ? t({ isHover: d }) : t);
 }
-const $ = v(H);
+const b = v(H);
 export {
-  $ as default
+  b as default
 };

package/components/baseSvg.cjs

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

package/components/baseSvg.mjs

@@ -2,6 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import g from "../box.mjs";
 import "../core.mjs";
+import "../utils.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(
@@ -14,7 +15,7 @@ function n(o, r) {
     }
   );
 }
-const h = f(n);
+const l = f(n);
 export {
-  h as default
+  l as default
 };

package/components/checkbox.cjs

@@ -1 +1 @@
-"use strict";const u=require("react/jsx-runtime"),c=require("react"),i=require("../box.cjs"),s=require("../utils.cjs");require("../core.cjs");const a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function l(o,e){const{indeterminate:n}=o,r=s.ObjectUtils.buildProps(o,a,{type:"checkbox"}),t=c.useRef(null);return c.useEffect(()=>{e&&typeof e!="function"&&e.current?e.current.indeterminate=!!n:t.current&&(t.current.indeterminate=!!n)},[e,t,n]),u.jsx(i,{tag:"input",ref:e||t,component:"checkbox",...r})}const d=c.forwardRef(l);module.exports=d;
+"use strict";const u=require("react/jsx-runtime"),t=require("react"),s=require("../box.cjs"),i=require("../utils.cjs");require("../core.cjs");const a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,c){const{indeterminate:r}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(c,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!r)},[e,r]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;

package/components/checkbox.mjs

@@ -1,16 +1,16 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i, useRef as u, useEffect as a } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u, useRef as a, useImperativeHandle as i, useEffect as f } from "react";
 import s from "../box.mjs";
 import { O as m } from "../utils.mjs";
 import "../core.mjs";
-const f = ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
-function p(n, e) {
-  const { indeterminate: t } = n, c = m.buildProps(n, f, { type: "checkbox" }), o = u(null);
-  return a(() => {
-    e && typeof e != "function" && e.current ? e.current.indeterminate = !!t : o.current && (o.current.indeterminate = !!t);
-  }, [e, o, t]), /* @__PURE__ */ r(s, { tag: "input", ref: e || o, component: "checkbox", ...c });
+const p = ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
+function d(o, r) {
+  const { indeterminate: t } = o, n = m.buildProps(o, p, { type: "checkbox" }), e = a(null);
+  return i(r, () => e.current), f(() => {
+    e.current && (e.current.indeterminate = !!t);
+  }, [e, t]), /* @__PURE__ */ c(s, { tag: "input", ref: e, component: "checkbox", ...n });
 }
-const k = i(p);
+const g = u(d);
 export {
-  k as default
+  g as default
 };

package/components/dataGrid.cjs

@@ -1 +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;
+"use strict";const s=require("react/jsx-runtime"),u=require("../box.cjs");require("react");require("../core.cjs");require("../utils.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.mjs

@@ -1,7 +1,8 @@
-import { jsx as o, Fragment as m, jsxs as u } from "react/jsx-runtime";
+import { jsx as o, Fragment as l, jsxs as u } from "react/jsx-runtime";
 import s from "../box.mjs";
 import "react";
 import "../core.mjs";
+import "../utils.mjs";
 function c(e) {
   if (!(e != null && e.length))
     return {
@@ -22,13 +23,13 @@ function c(e) {
     }))
   };
 }
-function y(e) {
+function f(e) {
   const { data: i } = e, r = c(i);
-  return /* @__PURE__ */ o(s, { display: "grid", b: 1, borderRadius: 1, children: r.columns.length === 0 ? /* @__PURE__ */ o(m, { children: "empty grid" }) : /* @__PURE__ */ u(m, { children: [
+  return /* @__PURE__ */ o(s, { display: "grid", b: 1, borderRadius: 1, children: r.columns.length === 0 ? /* @__PURE__ */ o(l, { children: "empty grid" }) : /* @__PURE__ */ u(l, { children: [
     r.columns.map((n, t) => /* @__PURE__ */ o(s, { style: { gridColumn: t + 1 }, children: n.key.toString() }, n.key.toString())),
-    r.rows.map((n, t) => n.cells.map((l) => /* @__PURE__ */ o(s, { children: l.value }, l.key.toString() + t)))
+    r.rows.map((n, t) => n.cells.map((m) => /* @__PURE__ */ o(s, { children: m.value }, m.key.toString() + t)))
   ] }) });
 }
 export {
-  y as default
+  f as default
 };

package/components/flex.cjs

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

package/components/flex.mjs

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

package/components/grid.cjs

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

package/components/grid.mjs

@@ -1,12 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import e from "../box.mjs";
+import { forwardRef as m } from "react";
+import p from "../box.mjs";
 import "../core.mjs";
-function f(r, i) {
+import "../utils.mjs";
+function d(r, i) {
   const { inline: o, ...t } = r;
-  return /* @__PURE__ */ n(e, { ref: i, display: o ? "inline-grid" : "grid", ...t });
+  return /* @__PURE__ */ n(p, { ref: i, display: o ? "inline-grid" : "grid", ...t });
 }
-const l = d(f);
+const c = m(d);
 export {
-  l as default
+  c as default
 };

package/components/tooltip.cjs

@@ -1 +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 c="crono-box";let r=document.getElementById(c);return r||(r=document.createElement("div"),r.id=c,document.body.appendChild(r)),r},[])}const a=2;function x(c){const{onPositionChange:r}=c,u=s.useRef(null),[e,p]=s.useState(),m=v(),w=s.useCallback((o,t)=>{const n=i=>{i.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=i=>{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,i=Math.round((t.left+window.scrollX)*a)/a;((e==null?void 0:e.top)!==n||(e==null?void 0:e.left)!==i)&&(r==null||r({top:n,left:i}),p({top:n,left:i,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",...c})}),m)]})}module.exports=x;
+"use strict";const l=require("react/jsx-runtime"),h=require("react-dom"),f=require("../box.cjs"),s=require("react");require("../core.cjs");require("../utils.cjs");function v(){return s.useMemo(()=>{const c="crono-box";let r=document.getElementById(c);return r||(r=document.createElement("div"),r.id=c,document.body.appendChild(r)),r},[])}const a=2;function x(c){const{onPositionChange:r}=c,u=s.useRef(null),[e,p]=s.useState(),m=v(),w=s.useCallback((o,t)=>{const n=i=>{i.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=i=>{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,i=Math.round((t.left+window.scrollX)*a)/a;((e==null?void 0:e.top)!==n||(e==null?void 0:e.left)!==i)&&(r==null||r({top:n,left:i}),p({top:n,left:i,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",...c})}),m)]})}module.exports=x;

package/components/tooltip.mjs

@@ -1,8 +1,9 @@
 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.mjs";
-import { useMemo as E, useRef as C, useState as g, useCallback as f, useLayoutEffect as L } from "react";
+import { useMemo as E, useRef as C, useState as g, useCallback as p, useLayoutEffect as L } from "react";
 import "../core.mjs";
+import "../utils.mjs";
 function y() {
   return E(() => {
     const i = "crono-box";
@@ -11,8 +12,8 @@ function y() {
   }, []);
 }
 const l = 2;
-function R(i) {
-  const { onPositionChange: r } = i, c = C(null), [t, p] = g(), m = y(), w = f(
+function j(i) {
+  const { onPositionChange: r } = i, c = C(null), [t, f] = g(), m = y(), w = p(
     (n, e) => {
       const o = (s) => {
         s.target.contains(n) && e(n);
@@ -22,7 +23,7 @@ function R(i) {
       };
     },
     [t]
-  ), h = f(
+  ), h = p(
     (n, e) => {
       const o = (s) => {
         e(n);
@@ -32,10 +33,10 @@ function R(i) {
       };
     },
     [t]
-  ), u = f(
+  ), u = p(
     (n) => {
       const e = n.getBoundingClientRect(), o = Math.round((e.top + window.scrollY) * l) / l, s = Math.round((e.left + window.scrollX) * l) / l;
-      ((t == null ? void 0 : t.top) !== o || (t == null ? void 0 : t.left) !== s) && (r == null || r({ top: o, left: s }), p({ top: o, left: s, width: e.width > 0 ? e.width : void 0 }));
+      ((t == null ? void 0 : t.top) !== o || (t == null ? void 0 : t.left) !== s) && (r == null || r({ top: o, left: s }), f({ top: o, left: s, width: e.width > 0 ? e.width : void 0 }));
     },
     [t]
   );
@@ -66,5 +67,5 @@ function R(i) {
   ] });
 }
 export {
-  R as default
+  j as default
 };

package/core/boxStyles.d.ts

@@ -1,13 +1,11 @@
 import { BoxStylesFormatters } from './boxStylesFormatters';
 export interface StyleValues {
     values: Readonly<Array<unknown>>;
-    formatClassName?: (key: string, value: any) => string;
     formatSelector?: (selector: string) => string[];
     formatValue?: (key: string, value: any) => string;
 }
 export interface ThemeItem {
     cssNames: string[];
-    formatClassName?: (key: string, value: any) => string;
     formatSelector?: (selector: string) => string[];
     formatValue?: (key: string, value: any) => string;
 }
@@ -17,6 +15,7 @@ export interface StyleItem {
     values2: StyleValues;
     values3: StyleValues;
     pseudoSuffix?: PseudoClassSuffix;
+    breakpoint?: BoxBreakpointsType;
     isThemeStyle?: boolean;
 }
 export declare const boxStyles: {
@@ -38,6 +37,7 @@ export declare const boxStyles: {
         cssNames: string[];
         values1: {
             values: readonly [true];
+            formatValue: () => string;
         };
         values2: {
             values: readonly [];
@@ -1215,10 +1215,11 @@ export declare const svgThemeStyles: {
         formatSelector: typeof BoxStylesFormatters.ClassName.svg;
     };
 };
-export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
 export declare const pseudoClassSuffixesExtended: readonly ["H", "F", "A", "Checked", "Indeterminate", "Valid", "Invalid", "Required", "Optional", "Disabled"];
-export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
-export type PseudoClassSuffixExtended = (typeof pseudoClassSuffixesExtended)[number];
+export type PseudoClassSuffix = (typeof pseudoClassSuffixesExtended)[number];
+export declare const boxBreakpoints: readonly ["sm", "md", "lg", "xl", "xxl"];
+export type BoxBreakpointsType = (typeof boxBreakpoints)[number];
+export declare const boxBreakpointsMinWidth: Record<BoxBreakpointsType, number>;
 export declare const pseudoClassClassName: {
     hover: {
         className: string;

package/core/stylesContext.d.ts

@@ -1,8 +1,9 @@
+import { BoxBreakpointsType } from './boxStyles';
 declare namespace StylesContext {
     const boxClassName = "_box";
     const svgClassName = "_svg";
     const cronoStylesElementId = "crono-styles";
-    function get(key: string, value: unknown): string | undefined;
+    function get(key: string, value: unknown, breakpoint?: BoxBreakpointsType): string | undefined;
     function flush(): void;
     function clear(): void;
 }

package/core/theme.d.ts

@@ -22,10 +22,10 @@ export interface ThemeSetup<T = BoxStyleProps> {
     radioButton?: ThemeComponentStyles<T>;
 }
 interface BoxAugmentedProps {
-    colors: Record<string, string>;
-    shadows: Record<string, string>;
-    backgrounds: Record<string, string>;
-    backgroundImages: Record<string, string>;
+    colors?: Record<string, string>;
+    shadows?: Record<string, string>;
+    backgrounds?: Record<string, string>;
+    backgroundImages?: Record<string, string>;
 }
 declare namespace Theme {
     let Styles: ThemeSetup<BoxStyleProps>;

package/core/types.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
-import { PseudoClassSuffix, StyleItem, boxStyles } from './boxStyles';
+import { StyleItem, boxStyles } from './boxStyles';
 import { ThemeComponentProps } from './useTheme';
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
-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 {
     }
@@ -17,24 +14,33 @@ type BoxStyles<T extends Record<string, StyleItem>> = {
 };
 type BoxNormalStyles = BoxStyles<typeof boxStyles> & Augmented.BoxProps;
 interface BoxPseudoClasses {
-    hover?: boolean;
-    focus?: boolean;
-}
-interface BoxPseudoClasses2 {
     disabled?: boolean | [boolean, BoxNormalStyles];
+    hover?: boolean | [boolean, BoxNormalStyles] | BoxNormalStyles;
+    focus?: boolean | [boolean, BoxNormalStyles] | BoxNormalStyles;
+    active?: BoxNormalStyles;
 }
-type BoxPseudoClassStyles = PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'>;
 interface BoxThemePseudoClassProps {
+    hover?: BoxNormalStyles;
+    focus?: BoxNormalStyles;
+    active?: BoxNormalStyles;
     disabled?: BoxNormalStyles;
     indeterminate?: BoxNormalStyles;
     checked?: BoxNormalStyles;
 }
-export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxPseudoClassStyles;
-export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & BoxPseudoClasses2 & BoxPseudoClassStyles & ThemeComponentProps;
+export interface BoxBreakpoints<T = BoxThemeProps> {
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    xxl?: T;
+}
+export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxBreakpoints;
+export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & ThemeComponentProps & BoxBreakpoints<BoxStyleProps>;
 interface SvgNormalStyles {
     rotate?: BoxNormalStyles['rotate'];
     flip?: BoxNormalStyles['flip'];
     transitionDuration?: BoxNormalStyles['transitionDuration'];
+    hover?: boolean | [boolean, BoxNormalStyles];
 }
-export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & ThemeComponentProps & Augmented.SvgProps;
+export type BoxSvgStyles = SvgNormalStyles & ThemeComponentProps & Augmented.SvgProps;
 export {};

package/core.cjs

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