@cronocode/react-box 1.7.9 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/checkbox.cjs +1 -1
  2. package/components/checkbox.d.ts +0 -1
  3. package/components/checkbox.mjs +9 -13
  4. package/components/flex.mjs +4 -4
  5. package/core/boxStyles.d.ts +5 -1
  6. package/core/theme.d.ts +1 -0
  7. package/core/types.d.ts +5 -11
  8. package/core.cjs +27 -11
  9. package/core.mjs +231 -215
  10. package/package.json +1 -1
  11. package/core/boxTypes.d.ts +0 -3
package/components/checkbox.cjs CHANGED
@@ -1 +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;
1
+ "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 CHANGED
@@ -16,7 +16,6 @@ interface Props extends Omit<BoxProps, 'props'> {
16
16
  required?: boolean;
17
17
  checked?: boolean;
18
18
  defaultChecked?: boolean;
19
- native?: boolean;
20
19
  }
21
20
  declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
22
21
  export default _default;
package/components/checkbox.mjs CHANGED
@@ -1,10 +1,9 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { forwardRef as s } from "react";
3
- import t from "../box.mjs";
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as c } from "react";
3
+ import n from "../box.mjs";
4
4
  import { O as a } from "../utils.mjs";
5
- import d from "./flex.mjs";
6
5
  import "../core.mjs";
7
- const l = [
6
+ const p = [
8
7
  "name",
9
8
  "onInput",
10
9
  "onChange",
@@ -16,14 +15,11 @@ const l = [
16
15
  "checked",
17
16
  "defaultChecked"
18
17
  ];
19
- function p(o, r) {
20
- const { native: n } = o, i = a.buildProps(o, l, { type: "checkbox" });
21
- return /* @__PURE__ */ c(d, { inline: !0, position: "relative", children: [
22
- /* @__PURE__ */ e(t, { ref: r, tag: "input", component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
23
- !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" }) }) }) })
24
- ] });
18
+ function s(o, e) {
19
+ const t = a.buildProps(o, p, { type: "checkbox" });
20
+ return /* @__PURE__ */ r(n, { ref: e, tag: "input", component: "checkbox", ...t });
25
21
  }
26
- const v = s(p);
22
+ const b = c(s);
27
23
  export {
28
- v as default
24
+ b as default
29
25
  };
package/components/flex.mjs CHANGED
@@ -1,12 +1,12 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import { forwardRef as f } from "react";
1
+ import { jsx as f } from "react/jsx-runtime";
2
+ import { forwardRef as i } from "react";
3
3
  import n from "../box.mjs";
4
4
  import "../core.mjs";
5
5
  function l(o, r) {
6
6
  const { inline: e, ...t } = o;
7
- return /* @__PURE__ */ i(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });
7
+ return /* @__PURE__ */ f(n, { ref: r, display: e ? "inline-flex" : "flex", ...t });
8
8
  }
9
- const a = f(l);
9
+ const a = i(l);
10
10
  export {
11
11
  a as default
12
12
  };
package/core/boxStyles.d.ts CHANGED
@@ -1182,6 +1182,10 @@ export declare const boxThemeStyles: {
1182
1182
  cssNames: string[];
1183
1183
  formatValue: (key: string, value: string | number | boolean) => string;
1184
1184
  };
1185
+ backgroundImage: {
1186
+ cssNames: string[];
1187
+ formatValue: (key: string, value: string | number | boolean) => string;
1188
+ };
1185
1189
  color: {
1186
1190
  cssNames: string[];
1187
1191
  formatValue: (key: string, value: string | number | boolean) => string;
@@ -1211,7 +1215,7 @@ export declare const svgThemeStyles: {
1211
1215
  formatSelector: typeof BoxStylesFormatters.ClassName.svg;
1212
1216
  };
1213
1217
  };
1214
- export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
1218
+ export declare const pseudoClassSuffixes: readonly ["H", "F", "A", "C"];
1215
1219
  export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
1216
1220
  export declare const pseudoClassClassName: {
1217
1221
  hover: {
package/core/theme.d.ts CHANGED
@@ -27,6 +27,7 @@ interface BoxAugmentedProps {
27
27
  colors: Record<string, string>;
28
28
  shadows: Record<string, string>;
29
29
  backgrounds: Record<string, string>;
30
+ backgroundImages: Record<string, string>;
30
31
  }
31
32
  declare namespace Theme {
32
33
  let Styles: ThemeSetup;
package/core/types.d.ts CHANGED
@@ -1,16 +1,10 @@
1
1
  /// <reference types="react" />
2
- import { StyleItem, aliases, boxStyles } from './boxStyles';
2
+ import { PseudoClassSuffix, StyleItem, aliases, boxStyles } from './boxStyles';
3
3
  import { ThemeComponentProps } from './useTheme';
4
4
  export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
5
5
  export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
6
- export type Hovered<T> = {
7
- [K in keyof T as K extends string ? `${K}H` : never]: T[K];
8
- };
9
- export type Focused<T> = {
10
- [K in keyof T as K extends string ? `${K}F` : never]: T[K];
11
- };
12
- export type Activated<T> = {
13
- [K in keyof T as K extends string ? `${K}A` : never]: T[K];
6
+ export type PseudoClass<T, TSuffix extends PseudoClassSuffix> = {
7
+ [K in keyof T as K extends string ? `${K}${TSuffix}` : never]: T[K];
14
8
  };
15
9
  export declare namespace Augmented {
16
10
  interface BoxProps {
@@ -26,11 +20,11 @@ interface BoxPseudoClasses {
26
20
  hover?: boolean;
27
21
  focus?: boolean;
28
22
  }
29
- export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles> & ThemeComponentProps & Augmented.BoxProps;
23
+ export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & PseudoClass<BoxNormalStyles, 'H'> & PseudoClass<BoxNormalStyles, 'F'> & PseudoClass<BoxNormalStyles, 'A'> & PseudoClass<BoxNormalStyles, 'C'> & ThemeComponentProps & Augmented.BoxProps;
30
24
  interface SvgNormalStyles {
31
25
  rotate?: BoxNormalStyles['rotate'];
32
26
  flip?: BoxNormalStyles['flip'];
33
27
  transitionDuration?: BoxNormalStyles['transitionDuration'];
34
28
  }
35
- export type BoxSvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles> & Focused<SvgNormalStyles> & Activated<SvgNormalStyles> & ThemeComponentProps & Augmented.SvgProps;
29
+ export type BoxSvgStyles = SvgNormalStyles & PseudoClass<SvgNormalStyles, 'H'> & PseudoClass<SvgNormalStyles, 'F'> & PseudoClass<SvgNormalStyles, 'A'> & PseudoClass<SvgNormalStyles, 'C'> & ThemeComponentProps & Augmented.SvgProps;
36
30
  export {};
package/core.cjs CHANGED
@@ -1,18 +1,20 @@
1
- "use strict";const A=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(t,u){return`${u/4}rem`}l.rem=c;function v(t,u){return`${u}px`}l.px=v;function s(t,u){const[r,f]=u.split("/");return`${+r/+f*100}%`}l.fraction=s;function d(t,u){switch(u){case"fit":return"100%";case"fit-screen":return t.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return u}}l.widthHeight=d;function n(t){return(u,r)=>`var(--${t}${r});`}l.variables=n;function p(t){return(u,r)=>`var(--${t}${r});`}l.svgVariables=p;function g(t,u){return`repeat(${u},minmax(0,1fr))`}l.gridColumns=g;function b(t,u){return u==="full-row"?"1/-1":`span ${u}/span ${u}`}l.gridColumn=b;function V(t,u){return`${u}ms`}l.ms=V;function y(t,u){return`${u}deg`}l.rotate=y;function N(t,u){return u==="xAxis"?"-1 1":"1 -1"}l.flip=N})(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],L=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],B=["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"],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: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: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"],j={hover:{className:"_h"},focus:{className:"_f"}};Object.keys(D).forEach(a=>{o[a]=D[a],o[a].isThemeStyle=!0});Object.keys(P).forEach(a=>{o[a]=P[a],o[a].isThemeStyle=!0});const $={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($);Y.forEach(a=>{J.forEach(l=>{o[`${l}${a}`]={...o[l]},o[`${l}${a}`].pseudoSuffix=a}),Q.forEach(l=>{$[`${l}${a}`]={...$[l],key:`${$[l].key}${a}`},$[`${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 F;(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;}}
1
+ "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;}}
2
2
  html{font-size: 16px;font-family: Arial, sans-serif;}
3
3
  body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
4
4
  a,ul{all: unset;}
5
5
  .${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;}
6
6
  .${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
7
- `,c=new Z,v=Object.keys(o);let s=!0,d=v.reduce((t,u)=>(t[u]=new Set,t),{});function n(t,u){if(t in o)return b(t,u);if(t in j)return j[t].className}a.get=n;function p(){if(s){let t=V([l]);t=V(t,"H"),t=V(t,"F"),t=V(t,"A");const u=N();u.innerHTML=t.join(""),s=!1}}a.flush=p;function g(){d=v.reduce((t,u)=>(t[u]=new Set,t),{})}a.clear=g;function b(t,u){var h;d[t].has(u)||(s=!0,d[t].add(u));const r=y(t,u),f=((h=r.formatClassName)==null?void 0:h.call(r,t,u))??`${t}${u}`;return c.getIdentity(f)}function V(t,u){return Object.entries(d).filter(([f])=>{var h;return((h=o[f])==null?void 0:h.pseudoSuffix)===u}).reduce((f,[h,M])=>(M.forEach(S=>{var I;const w=y(h,S),x=`.${b(h,S)}`;let T=[];u?u==="H"?T=[...r(`${x}:hover`,w),...r(`.${j.hover.className}:hover>${x}`,w)]:u==="F"?T=[...r(`${x}:focus-within`,w),...r(`.${j.focus.className}:focus-within>${x}`,w)]:u==="A"&&(T=r(`${x}:active`,w)):T=r(x,w);const W=((I=w.formatValue)==null?void 0:I.call(w,h,S))??S,G=o[h].cssNames.map(U=>`${U}:${W};`).join("");f.push(`${T.join(",")}{${G}}`)}),f),t);function r(f,h){return h.formatSelector?h.formatSelector(f):[f]}}function y(t,u){const r=o[t];return r.isThemeStyle?r:r.values1.values.includes(u)?r.values1:r.values2.values.includes(u)?r.values2:r.values3}function N(){const u=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let r=u.getElementById(a.cronoStylesElementId);return r||(r=u.createElement("style"),r.setAttribute("id",a.cronoStylesElementId),r.setAttribute("type","text/css"),u.head.insertBefore(r,u.head.firstChild)),r}})(F||(F={}));const z=F,H={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;(a=>{a.Styles=H;function l(n){s(n),a.Styles=n,v()}a.setup=l;function c(n,p){const g=Object.entries(n.colors).map(([f,h])=>`--color${f}: ${h};`).join(`
8
- `),b=Object.entries(n.shadows).map(([f,h])=>`--shadow${f}: ${h};`).join(`
9
- `),V=Object.entries(n.backgrounds).map(([f,h])=>`--background${f}: ${h};`).join(`
10
- `),y=[":root {"];g&&y.push(` ${g}`),b&&y.push(` ${b}`),V&&y.push(` ${V}`),y.push("}");const N=Object.keys(n.colors).map(f=>`'${f}'`).join(" | "),t=Object.keys(n.backgrounds).map(f=>`'${f}'`).join(" | "),u=Object.keys(n.shadows).map(f=>`'${f}'`).join(" | "),r=`import '@cronocode/react-box';
7
+ `,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(`
8
+ `),p=Object.entries(n.shadows).map(([b,w])=>`--shadow${b}: ${w};`).join(`
9
+ `),y=Object.entries(n.backgrounds).map(([b,w])=>`--background${b}: ${w};`).join(`
10
+ `),k=Object.entries(n.backgroundImages).map(([b,w])=>`--backgroundImage${b}: ${w};`).join(`
11
+ `),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';
11
12
 
12
- declare module '${(p==null?void 0:p.namespacePath)??"@cronocode/react-box/core/types"}' {
13
- type ColorType = ${N};
14
- type BackgroundType = ${t};
15
- type ShadowType = ${u};
13
+ declare module '${(f==null?void 0:f.namespacePath)??"@cronocode/react-box/core/types"}' {
14
+ type ColorType = ${o};
15
+ type BackgroundType = ${u};
16
+ type BackgroundImageType = ${t};
17
+ type ShadowType = ${N};
16
18
 
17
19
  namespace Augmented {
18
20
  interface BoxProps {
@@ -20,26 +22,38 @@ a,ul{all: unset;}
20
22
  colorH?: ColorType;
21
23
  colorF?: ColorType;
22
24
  colorA?: ColorType;
25
+ colorC?: ColorType;
23
26
  bgColor?: ColorType;
24
27
  bgColorH?: ColorType;
25
28
  bgColorF?: ColorType;
26
29
  bgColorA?: ColorType;
30
+ bgColorC?: ColorType;
27
31
  borderColor?: ColorType;
28
32
  borderColorH?: ColorType;
29
33
  borderColorF?: ColorType;
30
34
  borderColorA?: ColorType;
35
+ borderColorC?: ColorType;
31
36
  outlineColor?: ColorType;
32
37
  outlineColorH?: ColorType;
33
38
  outlineColorF?: ColorType;
34
39
  outlineColorA?: ColorType;
40
+ outlineColorC?: ColorType;
35
41
  background?: BackgroundType;
36
42
  backgroundH?: BackgroundType;
37
43
  backgroundF?: BackgroundType;
38
44
  backgroundA?: BackgroundType;
45
+ backgroundC?: BackgroundType;
46
+ backgroundImage?: BackgroundImageType;
47
+ backgroundImageH?: BackgroundImageType;
48
+ backgroundImageF?: BackgroundImageType;
49
+ backgroundImageA?: BackgroundImageType;
50
+ backgroundImageC?: BackgroundImageType;
39
51
  shadow?: ShadowType;
40
52
  shadowH?: ShadowType;
41
53
  shadowF?: ShadowType;
54
+ shadowF?: ShadowType;
42
55
  shadowA?: ShadowType;
56
+ shadowC?: ShadowType;
43
57
  }
44
58
 
45
59
  interface SvgProps {
@@ -47,12 +61,14 @@ a,ul{all: unset;}
47
61
  fillH?: ColorType;
48
62
  fillF?: ColorType;
49
63
  fillA?: ColorType;
64
+ fillC?: ColorType;
50
65
  stroke?: ColorType;
51
66
  strokeH?: ColorType;
52
67
  strokeF?: ColorType;
53
68
  strokeA?: ColorType;
69
+ strokeC?: ColorType;
54
70
  }
55
71
  }
56
72
  }
57
- `;return{variables:y.join(`
58
- `),boxDts:r}}a.setupAugmentedProps=c;function v(){s(H),Object.keys(H).forEach(p=>{const g=a.Styles[p],b=H[p];g?(g.styles={...b.styles,...g.styles},g.disabled&&b.disabled&&(g.disabled={...b.disabled,...g.disabled})):a.Styles[p]=H[p]})}function s(n){if(!n.components)return;const p=Object.keys(n.components);for(const g of p){const b=n.components[g],V=d(g,b);delete b.children;for(const y of V){const[N,t]=y;n.components[N]=t}}}function d(n,p){if(!p.children)return[];const g=Object.keys(p.children),b=[];for(const V of g){const y=`${n}.${V}`,N=p.children[V],t=d(y,N);b.push(...t),delete N.children,b.push([y,N])}return b}})(O||(O={}));const R=O;function ee(a){const{clean:l,disabled:c,theme:v,component:s}=a;return A.useMemo(()=>{var p,g,b;if(l)return;let d=R.Styles[s]??((p=R.Styles.components)==null?void 0:p[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,...(b=d.themes)==null?void 0:b[v].disabled}:{...n,...d.disabled}:n},[s,l,c,v])}const se=typeof window<"u"&&typeof window.document<"u",ae=se?A.useLayoutEffect:A.useEffect;function le(a,l){const c=ee(a);return ae(z.flush,[a]),A.useMemo(()=>{const v=[l?z.svgClassName:z.boxClassName],s=c?{...E(c),...E(a)}:E(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(z.get(d,n))}),v},[a,c])}function E(a){const l={...a};return Object.keys(l).forEach(v=>{const s=$[v];s&&(s.key in l||(l[s.key]=l[v]),delete l[v])}),l}function q(...a){return a.reduce((l,c)=>c?typeof c=="string"?(l.push(c),l):Array.isArray(c)?(l.push(...q(...c)),l):(Object.entries(c).forEach(([v,s])=>{s&&l.push(v)}),l):l,[])}exports.StylesContext=z;exports.Theme=R;exports.classNames=q;exports.useStyles=le;
73
+ `;return{variables:h.join(`
74
+ `),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 CHANGED
@@ -1,69 +1,69 @@
1
- import { useMemo as P, useLayoutEffect as U, useEffect as X } from "react";
1
+ import { useMemo as W, useLayoutEffect as U, useEffect as X } from "react";
2
2
  var e;
3
- ((a) => {
3
+ ((s) => {
4
4
  ((l) => {
5
- function c(s, d) {
6
- return `${s}${d.replace("/", "-")}`;
5
+ function c(a, d) {
6
+ return `${a}${d.replace("/", "-")}`;
7
7
  }
8
8
  l.fraction = c;
9
- function v(s) {
10
- return [`${s} path`, `${s} circle`, `${s} rect`, `${s} line`];
9
+ function v(a) {
10
+ return [`${a} path`, `${a} circle`, `${a} rect`, `${a} line`];
11
11
  }
12
12
  l.svg = v;
13
- })(a.ClassName || (a.ClassName = {})), ((l) => {
14
- function c(t, u) {
13
+ })(s.ClassName || (s.ClassName = {})), ((l) => {
14
+ function c(o, u) {
15
15
  return `${u / 4}rem`;
16
16
  }
17
17
  l.rem = c;
18
- function v(t, u) {
18
+ function v(o, u) {
19
19
  return `${u}px`;
20
20
  }
21
21
  l.px = v;
22
- function s(t, u) {
23
- const [r, f] = u.split("/");
24
- return `${+r / +f * 100}%`;
22
+ function a(o, u) {
23
+ const [t, N] = u.split("/");
24
+ return `${+t / +N * 100}%`;
25
25
  }
26
- l.fraction = s;
27
- function d(t, u) {
26
+ l.fraction = a;
27
+ function d(o, u) {
28
28
  switch (u) {
29
29
  case "fit":
30
30
  return "100%";
31
31
  case "fit-screen":
32
- return t.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
32
+ return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
33
33
  default:
34
34
  return u;
35
35
  }
36
36
  }
37
37
  l.widthHeight = d;
38
- function n(t) {
39
- return (u, r) => `var(--${t}${r});`;
38
+ function n(o) {
39
+ return (u, t) => `var(--${o}${t});`;
40
40
  }
41
41
  l.variables = n;
42
- function p(t) {
43
- return (u, r) => `var(--${t}${r});`;
42
+ function f(o) {
43
+ return (u, t) => `var(--${o}${t});`;
44
44
  }
45
- l.svgVariables = p;
46
- function g(t, u) {
45
+ l.svgVariables = f;
46
+ function g(o, u) {
47
47
  return `repeat(${u},minmax(0,1fr))`;
48
48
  }
49
49
  l.gridColumns = g;
50
- function b(t, u) {
50
+ function p(o, u) {
51
51
  return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
52
52
  }
53
- l.gridColumn = b;
54
- function V(t, u) {
53
+ l.gridColumn = p;
54
+ function y(o, u) {
55
55
  return `${u}ms`;
56
56
  }
57
- l.ms = V;
58
- function y(t, u) {
57
+ l.ms = y;
58
+ function k(o, u) {
59
59
  return `${u}deg`;
60
60
  }
61
- l.rotate = y;
62
- function N(t, u) {
61
+ l.rotate = k;
62
+ function h(o, u) {
63
63
  return u === "xAxis" ? "-1 1" : "1 -1";
64
64
  }
65
- l.flip = N;
66
- })(a.Value || (a.Value = {}));
65
+ l.flip = h;
66
+ })(s.Value || (s.Value = {}));
67
67
  })(e || (e = {}));
68
68
  const i = [
69
69
  0,
@@ -163,7 +163,7 @@ const i = [
163
163
  -92,
164
164
  -96,
165
165
  -100
166
- ], m = [...i, ...Y], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], A = ["auto", "hidden", "scroll", "visible"], k = [
166
+ ], m = [...i, ...Y], R = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], I = ["auto", "hidden", "scroll", "visible"], $ = [
167
167
  "1/2",
168
168
  "1/3",
169
169
  "2/3",
@@ -190,7 +190,7 @@ const i = [
190
190
  "9/12",
191
191
  "10/12",
192
192
  "11/12"
193
- ], C = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], I = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], o = {
193
+ ], H = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], L = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"], r = {
194
194
  /** 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. */
195
195
  display: {
196
196
  cssNames: ["display"],
@@ -214,60 +214,60 @@ const i = [
214
214
  },
215
215
  width: {
216
216
  cssNames: ["width"],
217
- values1: { values: C, formatValue: e.Value.widthHeight },
217
+ values1: { values: H, formatValue: e.Value.widthHeight },
218
218
  values2: { values: i, formatValue: e.Value.rem },
219
219
  values3: {
220
- values: k,
220
+ values: $,
221
221
  formatValue: e.Value.fraction
222
222
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
223
223
  }
224
224
  },
225
225
  minWidth: {
226
226
  cssNames: ["min-width"],
227
- values1: { values: C, formatValue: e.Value.widthHeight },
227
+ values1: { values: H, formatValue: e.Value.widthHeight },
228
228
  values2: { values: i, formatValue: e.Value.rem },
229
229
  values3: {
230
- values: k,
230
+ values: $,
231
231
  formatValue: e.Value.fraction
232
232
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
233
233
  }
234
234
  },
235
235
  maxWidth: {
236
236
  cssNames: ["max-width"],
237
- values1: { values: C, formatValue: e.Value.widthHeight },
237
+ values1: { values: H, formatValue: e.Value.widthHeight },
238
238
  values2: { values: i, formatValue: e.Value.rem },
239
239
  values3: {
240
- values: k,
240
+ values: $,
241
241
  formatValue: e.Value.fraction
242
242
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
243
243
  }
244
244
  },
245
245
  height: {
246
246
  cssNames: ["height"],
247
- values1: { values: C, formatValue: e.Value.widthHeight },
247
+ values1: { values: H, formatValue: e.Value.widthHeight },
248
248
  values2: { values: i, formatValue: e.Value.rem },
249
249
  values3: {
250
- values: k,
250
+ values: $,
251
251
  formatValue: e.Value.fraction
252
252
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
253
253
  }
254
254
  },
255
255
  minHeight: {
256
256
  cssNames: ["min-height"],
257
- values1: { values: C, formatValue: e.Value.widthHeight },
257
+ values1: { values: H, formatValue: e.Value.widthHeight },
258
258
  values2: { values: i, formatValue: e.Value.rem },
259
259
  values3: {
260
- values: k,
260
+ values: $,
261
261
  formatValue: e.Value.fraction
262
262
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
263
263
  }
264
264
  },
265
265
  maxHeight: {
266
266
  cssNames: ["max-height"],
267
- values1: { values: C, formatValue: e.Value.widthHeight },
267
+ values1: { values: H, formatValue: e.Value.widthHeight },
268
268
  values2: { values: i, formatValue: e.Value.rem },
269
269
  values3: {
270
- values: k,
270
+ values: $,
271
271
  formatValue: e.Value.fraction
272
272
  // formatClassName: BoxStylesFormatters.ClassName.fraction,
273
273
  }
@@ -549,19 +549,19 @@ const i = [
549
549
  },
550
550
  overflow: {
551
551
  cssNames: ["overflow"],
552
- values1: { values: A },
552
+ values1: { values: I },
553
553
  values2: { values: [] },
554
554
  values3: { values: [] }
555
555
  },
556
556
  overflowX: {
557
557
  cssNames: ["overflow-x"],
558
- values1: { values: A },
558
+ values1: { values: I },
559
559
  values2: { values: [] },
560
560
  values3: { values: [] }
561
561
  },
562
562
  overflowY: {
563
563
  cssNames: ["overflow-y"],
564
- values1: { values: A },
564
+ values1: { values: I },
565
565
  values2: { values: [] },
566
566
  values3: { values: [] }
567
567
  },
@@ -722,13 +722,13 @@ const i = [
722
722
  },
723
723
  alignSelf: {
724
724
  cssNames: ["align-self"],
725
- values1: { values: I },
725
+ values1: { values: L },
726
726
  values2: { values: [] },
727
727
  values3: { values: [] }
728
728
  },
729
729
  justifySelf: {
730
730
  cssNames: ["justify-self"],
731
- values1: { values: I },
731
+ values1: { values: L },
732
732
  values2: { values: [] },
733
733
  values3: { values: [] }
734
734
  },
@@ -831,14 +831,15 @@ const i = [
831
831
  values2: { values: [] },
832
832
  values3: { values: [] }
833
833
  }
834
- }, L = {
834
+ }, _ = {
835
835
  shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
836
836
  background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
837
+ backgroundImage: { cssNames: ["background-image"], formatValue: e.Value.variables("backgroundImage") },
837
838
  color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
838
839
  bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
839
840
  borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
840
841
  outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
841
- }, _ = {
842
+ }, D = {
842
843
  fill: {
843
844
  cssNames: ["fill"],
844
845
  formatValue: e.Value.svgVariables("color"),
@@ -849,50 +850,50 @@ const i = [
849
850
  formatValue: e.Value.svgVariables("color"),
850
851
  formatSelector: e.ClassName.svg
851
852
  }
852
- }, J = ["H", "F", "A"], S = {
853
+ }, J = ["H", "F", "A", "C"], S = {
853
854
  hover: { className: "_h" },
854
855
  focus: { className: "_f" }
855
856
  };
856
- Object.keys(L).forEach((a) => {
857
- o[a] = L[a], o[a].isThemeStyle = !0;
857
+ Object.keys(_).forEach((s) => {
858
+ r[s] = _[s], r[s].isThemeStyle = !0;
858
859
  });
859
- Object.keys(_).forEach((a) => {
860
- o[a] = _[a], o[a].isThemeStyle = !0;
860
+ Object.keys(D).forEach((s) => {
861
+ r[s] = D[s], r[s].isThemeStyle = !0;
861
862
  });
862
- const T = {
863
- w: { ...o.width, key: "width" },
864
- h: { ...o.height, key: "height" },
865
- m: { ...o.margin, key: "margin" },
866
- mx: { ...o.marginHorizontal, key: "marginHorizontal" },
867
- my: { ...o.marginVertical, key: "marginVertical" },
868
- mt: { ...o.marginTop, key: "marginTop" },
869
- mr: { ...o.marginRight, key: "marginRight" },
870
- mb: { ...o.marginBottom, key: "marginBottom" },
871
- ml: { ...o.marginLeft, key: "marginLeft" },
872
- p: { ...o.padding, key: "padding" },
873
- px: { ...o.paddingHorizontal, key: "paddingHorizontal" },
874
- py: { ...o.paddingVertical, key: "paddingVertical" },
875
- pt: { ...o.paddingTop, key: "paddingTop" },
876
- pr: { ...o.paddingRight, key: "paddingRight" },
877
- pb: { ...o.paddingBottom, key: "paddingBottom" },
878
- pl: { ...o.paddingLeft, key: "paddingLeft" },
879
- b: { ...o.border, key: "border" },
880
- bx: { ...o.borderHorizontal, key: "borderHorizontal" },
881
- by: { ...o.borderVertical, key: "borderVertical" },
882
- bt: { ...o.borderTop, key: "borderTop" },
883
- br: { ...o.borderRight, key: "borderRight" },
884
- bb: { ...o.borderBottom, key: "borderBottom" },
885
- bl: { ...o.borderLeft, key: "borderLeft" },
886
- jc: { ...o.justifyContent, key: "justifyContent" },
887
- ai: { ...o.alignItems, key: "alignItems" },
888
- ac: { ...o.alignContent, key: "alignContent" },
889
- d: { ...o.flexDirection, key: "flexDirection" }
890
- }, Q = Object.keys(o), Z = Object.keys(T);
891
- J.forEach((a) => {
863
+ const z = {
864
+ w: { ...r.width, key: "width" },
865
+ h: { ...r.height, key: "height" },
866
+ m: { ...r.margin, key: "margin" },
867
+ mx: { ...r.marginHorizontal, key: "marginHorizontal" },
868
+ my: { ...r.marginVertical, key: "marginVertical" },
869
+ mt: { ...r.marginTop, key: "marginTop" },
870
+ mr: { ...r.marginRight, key: "marginRight" },
871
+ mb: { ...r.marginBottom, key: "marginBottom" },
872
+ ml: { ...r.marginLeft, key: "marginLeft" },
873
+ p: { ...r.padding, key: "padding" },
874
+ px: { ...r.paddingHorizontal, key: "paddingHorizontal" },
875
+ py: { ...r.paddingVertical, key: "paddingVertical" },
876
+ pt: { ...r.paddingTop, key: "paddingTop" },
877
+ pr: { ...r.paddingRight, key: "paddingRight" },
878
+ pb: { ...r.paddingBottom, key: "paddingBottom" },
879
+ pl: { ...r.paddingLeft, key: "paddingLeft" },
880
+ b: { ...r.border, key: "border" },
881
+ bx: { ...r.borderHorizontal, key: "borderHorizontal" },
882
+ by: { ...r.borderVertical, key: "borderVertical" },
883
+ bt: { ...r.borderTop, key: "borderTop" },
884
+ br: { ...r.borderRight, key: "borderRight" },
885
+ bb: { ...r.borderBottom, key: "borderBottom" },
886
+ bl: { ...r.borderLeft, key: "borderLeft" },
887
+ jc: { ...r.justifyContent, key: "justifyContent" },
888
+ ai: { ...r.alignItems, key: "alignItems" },
889
+ ac: { ...r.alignContent, key: "alignContent" },
890
+ d: { ...r.flexDirection, key: "flexDirection" }
891
+ }, Q = Object.keys(r), Z = Object.keys(z);
892
+ J.forEach((s) => {
892
893
  Q.forEach((l) => {
893
- o[`${l}${a}`] = { ...o[l] }, o[`${l}${a}`].pseudoSuffix = a;
894
+ r[`${l}${s}`] = { ...r[l] }, r[`${l}${s}`].pseudoSuffix = s;
894
895
  }), Z.forEach((l) => {
895
- T[`${l}${a}`] = { ...T[l], key: `${T[l].key}${a}` }, T[`${l}${a}`].pseudoSuffix = a;
896
+ z[`${l}${s}`] = { ...z[l], key: `${z[l].key}${s}` }, z[`${l}${s}`].pseudoSuffix = s;
896
897
  });
897
898
  });
898
899
  class K {
@@ -903,10 +904,10 @@ class K {
903
904
  return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
904
905
  }
905
906
  getByIndex(l) {
906
- const { first: c, next: v } = ee, s = l - c.length;
907
- if (s < 0)
907
+ const { first: c, next: v } = ee, a = l - c.length;
908
+ if (a < 0)
908
909
  return c[l];
909
- const d = Math.floor(s / v.length), n = s - d * v.length;
910
+ const d = Math.floor(a / v.length), n = a - d * v.length;
910
911
  return this.getByIndex(d) + v[n];
911
912
  }
912
913
  }
@@ -914,89 +915,90 @@ const ee = {
914
915
  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
915
916
  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
916
917
  };
917
- var E;
918
- ((a) => {
919
- a.boxClassName = "_box", a.svgClassName = "_svg", a.cronoStylesElementId = "crono-styles";
918
+ var F;
919
+ ((s) => {
920
+ s.boxClassName = "_box", s.svgClassName = "_svg", s.cronoStylesElementId = "crono-styles";
920
921
  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;}}
921
922
  html{font-size: 16px;font-family: Arial, sans-serif;}
922
923
  body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
923
924
  a,ul{all: unset;}
924
- .${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;}
925
- .${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
926
- `, c = new K(), v = Object.keys(o);
927
- let s = !0, d = v.reduce(
928
- (t, u) => (t[u] = /* @__PURE__ */ new Set(), t),
925
+ .${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;}
926
+ .${s.svgClassName}{transition: all var(--svgTransitionTime);}.${s.svgClassName} path,.${s.svgClassName} circle,.${s.svgClassName} rect,.${s.svgClassName} line {transition: all var(--svgTransitionTime);}
927
+ `, c = new K(), v = Object.keys(r);
928
+ let a = !0, d = v.reduce(
929
+ (o, u) => (o[u] = /* @__PURE__ */ new Set(), o),
929
930
  {}
930
931
  );
931
- function n(t, u) {
932
- if (t in o)
933
- return b(t, u);
934
- if (t in S)
935
- return S[t].className;
932
+ function n(o, u) {
933
+ if (o in r)
934
+ return p(o, u);
935
+ if (o in S)
936
+ return S[o].className;
936
937
  }
937
- a.get = n;
938
- function p() {
939
- if (s) {
940
- let t = V([l]);
941
- t = V(t, "H"), t = V(t, "F"), t = V(t, "A");
942
- const u = N();
943
- u.innerHTML = t.join(""), s = !1;
938
+ s.get = n;
939
+ function f() {
940
+ if (a) {
941
+ let o = y([l]);
942
+ o = y(o, "H"), o = y(o, "F"), o = y(o, "A"), o = y(o, "C");
943
+ const u = h();
944
+ u.innerHTML = o.join(""), a = !1;
944
945
  }
945
946
  }
946
- a.flush = p;
947
+ s.flush = f;
947
948
  function g() {
948
949
  d = v.reduce(
949
- (t, u) => (t[u] = /* @__PURE__ */ new Set(), t),
950
+ (o, u) => (o[u] = /* @__PURE__ */ new Set(), o),
950
951
  {}
951
952
  );
952
953
  }
953
- a.clear = g;
954
- function b(t, u) {
955
- var h;
956
- d[t].has(u) || (s = !0, d[t].add(u));
957
- const r = y(t, u), f = ((h = r.formatClassName) == null ? void 0 : h.call(r, t, u)) ?? `${t}${u}`;
958
- return c.getIdentity(f);
954
+ s.clear = g;
955
+ function p(o, u) {
956
+ var V;
957
+ d[o].has(u) || (a = !0, d[o].add(u));
958
+ const t = k(o, u), N = ((V = t.formatClassName) == null ? void 0 : V.call(t, o, u)) ?? `${o}${u}`;
959
+ return c.getIdentity(N);
959
960
  }
960
- function V(t, u) {
961
- return Object.entries(d).filter(([f]) => {
962
- var h;
963
- return ((h = o[f]) == null ? void 0 : h.pseudoSuffix) === u;
964
- }).reduce((f, [h, W]) => (W.forEach((z) => {
965
- var O;
966
- const w = y(h, z), x = `.${b(h, z)}`;
967
- let $ = [];
968
- u ? u === "H" ? $ = [
969
- ...r(`${x}:hover`, w),
970
- ...r(`.${S.hover.className}:hover>${x}`, w)
971
- ] : u === "F" ? $ = [
972
- ...r(`${x}:focus-within`, w),
973
- ...r(`.${S.focus.className}:focus-within>${x}`, w)
974
- ] : u === "A" && ($ = r(`${x}:active`, w)) : $ = r(x, w);
975
- const G = ((O = w.formatValue) == null ? void 0 : O.call(w, h, z)) ?? z, M = o[h].cssNames.map((q) => `${q}:${G};`).join("");
976
- f.push(`${$.join(",")}{${M}}`);
977
- }), f), t);
978
- function r(f, h) {
979
- return h.formatSelector ? h.formatSelector(f) : [f];
961
+ function y(o, u) {
962
+ return Object.entries(d).filter(([N]) => {
963
+ var V;
964
+ return ((V = r[N]) == null ? void 0 : V.pseudoSuffix) === u;
965
+ }).reduce((N, [V, b]) => (b.forEach((w) => {
966
+ var E;
967
+ const x = k(V, w), C = `.${p(V, w)}`;
968
+ let T = [];
969
+ u ? u === "H" ? T = [
970
+ ...t(`${C}:hover`, x),
971
+ ...t(`.${S.hover.className}:hover>${C}`, x)
972
+ ] : u === "F" ? T = [
973
+ ...t(`${C}:focus-within`, x),
974
+ ...t(`.${S.focus.className}:focus-within>${C}`, x)
975
+ ] : u === "A" ? T = t(`${C}:active`, x) : u === "C" && (T = t(`${C}:checked`, x)) : T = t(C, x);
976
+ const G = ((E = x.formatValue) == null ? void 0 : E.call(x, V, w)) ?? w, M = r[V].cssNames.map((q) => `${q}:${G};`).join("");
977
+ N.push(`${T.join(",")}{${M}}`);
978
+ }), N), o);
979
+ function t(N, V) {
980
+ return V.formatSelector ? V.formatSelector(N) : [N];
980
981
  }
981
982
  }
982
- function y(t, u) {
983
- const r = o[t];
984
- return r.isThemeStyle ? r : r.values1.values.includes(u) ? r.values1 : r.values2.values.includes(u) ? r.values2 : r.values3;
983
+ function k(o, u) {
984
+ const t = r[o];
985
+ return t.isThemeStyle ? t : t.values1.values.includes(u) ? t.values1 : t.values2.values.includes(u) ? t.values2 : t.values3;
985
986
  }
986
- function N() {
987
+ function h() {
987
988
  const u = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
988
- let r = u.getElementById(a.cronoStylesElementId);
989
- return r || (r = u.createElement("style"), r.setAttribute("id", a.cronoStylesElementId), r.setAttribute("type", "text/css"), u.head.insertBefore(r, u.head.firstChild)), r;
989
+ let t = u.getElementById(s.cronoStylesElementId);
990
+ return t || (t = u.createElement("style"), t.setAttribute("id", s.cronoStylesElementId), t.setAttribute("type", "text/css"), u.head.insertBefore(t, u.head.firstChild)), t;
990
991
  }
991
- })(E || (E = {}));
992
- const j = E, H = {
992
+ })(F || (F = {}));
993
+ const A = F, j = {
993
994
  button: {
994
995
  styles: {
995
996
  display: "inline-block",
996
997
  p: 3,
997
998
  cursor: "pointer",
998
999
  b: 1,
999
- borderRadius: 1
1000
+ borderRadius: 1,
1001
+ userSelect: "none"
1000
1002
  },
1001
1003
  disabled: {
1002
1004
  cursor: "default"
@@ -1004,9 +1006,7 @@ const j = E, H = {
1004
1006
  },
1005
1007
  checkbox: {
1006
1008
  styles: {
1007
- display: "inline-block",
1008
- b: 1,
1009
- p: 2
1009
+ display: "inline-block"
1010
1010
  }
1011
1011
  },
1012
1012
  radioButton: {
@@ -1032,25 +1032,27 @@ const j = E, H = {
1032
1032
  }
1033
1033
  }
1034
1034
  };
1035
- var F;
1036
- ((a) => {
1037
- a.Styles = H;
1035
+ var O;
1036
+ ((s) => {
1037
+ s.Styles = j;
1038
1038
  function l(n) {
1039
- s(n), a.Styles = n, v();
1039
+ a(n), s.Styles = n, v();
1040
1040
  }
1041
- a.setup = l;
1042
- function c(n, p) {
1043
- const g = Object.entries(n.colors).map(([f, h]) => `--color${f}: ${h};`).join(`
1044
- `), b = Object.entries(n.shadows).map(([f, h]) => `--shadow${f}: ${h};`).join(`
1045
- `), V = Object.entries(n.backgrounds).map(([f, h]) => `--background${f}: ${h};`).join(`
1046
- `), y = [":root {"];
1047
- g && y.push(` ${g}`), b && y.push(` ${b}`), V && y.push(` ${V}`), y.push("}");
1048
- const N = Object.keys(n.colors).map((f) => `'${f}'`).join(" | "), t = Object.keys(n.backgrounds).map((f) => `'${f}'`).join(" | "), u = Object.keys(n.shadows).map((f) => `'${f}'`).join(" | "), r = `import '@cronocode/react-box';
1041
+ s.setup = l;
1042
+ function c(n, f) {
1043
+ const g = Object.entries(n.colors).map(([b, w]) => `--color${b}: ${w};`).join(`
1044
+ `), p = Object.entries(n.shadows).map(([b, w]) => `--shadow${b}: ${w};`).join(`
1045
+ `), y = Object.entries(n.backgrounds).map(([b, w]) => `--background${b}: ${w};`).join(`
1046
+ `), k = Object.entries(n.backgroundImages).map(([b, w]) => `--backgroundImage${b}: ${w};`).join(`
1047
+ `), h = [":root {"];
1048
+ g && h.push(` ${g}`), p && h.push(` ${p}`), y && h.push(` ${y}`), k && h.push(` ${k}`), h.push("}");
1049
+ 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';
1049
1050
 
1050
- declare module '${(p == null ? void 0 : p.namespacePath) ?? "@cronocode/react-box/core/types"}' {
1051
- type ColorType = ${N};
1052
- type BackgroundType = ${t};
1053
- type ShadowType = ${u};
1051
+ declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
1052
+ type ColorType = ${o};
1053
+ type BackgroundType = ${u};
1054
+ type BackgroundImageType = ${t};
1055
+ type ShadowType = ${N};
1054
1056
 
1055
1057
  namespace Augmented {
1056
1058
  interface BoxProps {
@@ -1058,26 +1060,38 @@ var F;
1058
1060
  colorH?: ColorType;
1059
1061
  colorF?: ColorType;
1060
1062
  colorA?: ColorType;
1063
+ colorC?: ColorType;
1061
1064
  bgColor?: ColorType;
1062
1065
  bgColorH?: ColorType;
1063
1066
  bgColorF?: ColorType;
1064
1067
  bgColorA?: ColorType;
1068
+ bgColorC?: ColorType;
1065
1069
  borderColor?: ColorType;
1066
1070
  borderColorH?: ColorType;
1067
1071
  borderColorF?: ColorType;
1068
1072
  borderColorA?: ColorType;
1073
+ borderColorC?: ColorType;
1069
1074
  outlineColor?: ColorType;
1070
1075
  outlineColorH?: ColorType;
1071
1076
  outlineColorF?: ColorType;
1072
1077
  outlineColorA?: ColorType;
1078
+ outlineColorC?: ColorType;
1073
1079
  background?: BackgroundType;
1074
1080
  backgroundH?: BackgroundType;
1075
1081
  backgroundF?: BackgroundType;
1076
1082
  backgroundA?: BackgroundType;
1083
+ backgroundC?: BackgroundType;
1084
+ backgroundImage?: BackgroundImageType;
1085
+ backgroundImageH?: BackgroundImageType;
1086
+ backgroundImageF?: BackgroundImageType;
1087
+ backgroundImageA?: BackgroundImageType;
1088
+ backgroundImageC?: BackgroundImageType;
1077
1089
  shadow?: ShadowType;
1078
1090
  shadowH?: ShadowType;
1079
1091
  shadowF?: ShadowType;
1092
+ shadowF?: ShadowType;
1080
1093
  shadowA?: ShadowType;
1094
+ shadowC?: ShadowType;
1081
1095
  }
1082
1096
 
1083
1097
  interface SvgProps {
@@ -1085,90 +1099,92 @@ var F;
1085
1099
  fillH?: ColorType;
1086
1100
  fillF?: ColorType;
1087
1101
  fillA?: ColorType;
1102
+ fillC?: ColorType;
1088
1103
  stroke?: ColorType;
1089
1104
  strokeH?: ColorType;
1090
1105
  strokeF?: ColorType;
1091
1106
  strokeA?: ColorType;
1107
+ strokeC?: ColorType;
1092
1108
  }
1093
1109
  }
1094
1110
  }
1095
1111
  `;
1096
1112
  return {
1097
- variables: y.join(`
1113
+ variables: h.join(`
1098
1114
  `),
1099
- boxDts: r
1115
+ boxDts: V
1100
1116
  };
1101
1117
  }
1102
- a.setupAugmentedProps = c;
1118
+ s.setupAugmentedProps = c;
1103
1119
  function v() {
1104
- s(H), Object.keys(H).forEach((p) => {
1105
- const g = a.Styles[p], b = H[p];
1106
- g ? (g.styles = { ...b.styles, ...g.styles }, g.disabled && b.disabled && (g.disabled = { ...b.disabled, ...g.disabled })) : a.Styles[p] = H[p];
1120
+ a(j), Object.keys(j).forEach((f) => {
1121
+ const g = s.Styles[f], p = j[f];
1122
+ g ? (g.styles = { ...p.styles, ...g.styles }, g.disabled && p.disabled && (g.disabled = { ...p.disabled, ...g.disabled })) : s.Styles[f] = j[f];
1107
1123
  });
1108
1124
  }
1109
- function s(n) {
1125
+ function a(n) {
1110
1126
  if (!n.components)
1111
1127
  return;
1112
- const p = Object.keys(n.components);
1113
- for (const g of p) {
1114
- const b = n.components[g], V = d(g, b);
1115
- delete b.children;
1116
- for (const y of V) {
1117
- const [N, t] = y;
1118
- n.components[N] = t;
1128
+ const f = Object.keys(n.components);
1129
+ for (const g of f) {
1130
+ const p = n.components[g], y = d(g, p);
1131
+ delete p.children;
1132
+ for (const k of y) {
1133
+ const [h, o] = k;
1134
+ n.components[h] = o;
1119
1135
  }
1120
1136
  }
1121
1137
  }
1122
- function d(n, p) {
1123
- if (!p.children)
1138
+ function d(n, f) {
1139
+ if (!f.children)
1124
1140
  return [];
1125
- const g = Object.keys(p.children), b = [];
1126
- for (const V of g) {
1127
- const y = `${n}.${V}`, N = p.children[V], t = d(y, N);
1128
- b.push(...t), delete N.children, b.push([y, N]);
1141
+ const g = Object.keys(f.children), p = [];
1142
+ for (const y of g) {
1143
+ const k = `${n}.${y}`, h = f.children[y], o = d(k, h);
1144
+ p.push(...o), delete h.children, p.push([k, h]);
1129
1145
  }
1130
- return b;
1146
+ return p;
1131
1147
  }
1132
- })(F || (F = {}));
1133
- const D = F;
1134
- function se(a) {
1135
- const { clean: l, disabled: c, theme: v, component: s } = a;
1136
- return P(() => {
1137
- var p, g, b;
1148
+ })(O || (O = {}));
1149
+ const P = O;
1150
+ function ae(s) {
1151
+ const { clean: l, disabled: c, theme: v, component: a } = s;
1152
+ return W(() => {
1153
+ var f, g, p;
1138
1154
  if (l)
1139
1155
  return;
1140
- let d = D.Styles[s] ?? ((p = D.Styles.components) == null ? void 0 : p[s]);
1156
+ let d = P.Styles[a] ?? ((f = P.Styles.components) == null ? void 0 : f[a]);
1141
1157
  if (!d)
1142
1158
  return;
1143
1159
  let n = v ? { ...d.styles, ...(g = d.themes) == null ? void 0 : g[v].styles } : d.styles;
1144
- return c ? v ? { ...n, ...d.disabled, ...(b = d.themes) == null ? void 0 : b[v].disabled } : { ...n, ...d.disabled } : n;
1145
- }, [s, l, c, v]);
1160
+ return c ? v ? { ...n, ...d.disabled, ...(p = d.themes) == null ? void 0 : p[v].disabled } : { ...n, ...d.disabled } : n;
1161
+ }, [a, l, c, v]);
1146
1162
  }
1147
- const ae = typeof window < "u" && typeof window.document < "u", le = ae ? U : X;
1148
- function re(a, l) {
1149
- const c = se(a);
1150
- return le(j.flush, [a]), P(() => {
1151
- const v = [l ? j.svgClassName : j.boxClassName], s = c ? { ...B(c), ...B(a) } : B(a);
1152
- 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]) => {
1153
- v.push(j.get(d, n));
1163
+ const se = typeof window < "u" && typeof window.document < "u", le = se ? U : X;
1164
+ function te(s, l) {
1165
+ const c = ae(s);
1166
+ return le(A.flush, [s]), W(() => {
1167
+ const v = [l ? A.svgClassName : A.boxClassName], a = c ? { ...B(c), ...B(s) } : B(s);
1168
+ 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]) => {
1169
+ v.push(A.get(d, n));
1154
1170
  }), v;
1155
- }, [a, c]);
1171
+ }, [s, c]);
1156
1172
  }
1157
- function B(a) {
1158
- const l = { ...a };
1173
+ function B(s) {
1174
+ const l = { ...s };
1159
1175
  return Object.keys(l).forEach((v) => {
1160
- const s = T[v];
1161
- s && (s.key in l || (l[s.key] = l[v]), delete l[v]);
1176
+ const a = z[v];
1177
+ a && (a.key in l || (l[a.key] = l[v]), delete l[v]);
1162
1178
  }), l;
1163
1179
  }
1164
- function ue(...a) {
1165
- return a.reduce((l, c) => c ? typeof c == "string" ? (l.push(c), l) : Array.isArray(c) ? (l.push(...ue(...c)), l) : (Object.entries(c).forEach(([v, s]) => {
1166
- s && l.push(v);
1180
+ function ue(...s) {
1181
+ 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]) => {
1182
+ a && l.push(v);
1167
1183
  }), l) : l, []);
1168
1184
  }
1169
1185
  export {
1170
- j as S,
1171
- D as T,
1186
+ A as S,
1187
+ P as T,
1172
1188
  ue as c,
1173
- re as u
1189
+ te as u
1174
1190
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cronocode/react-box",
3
- "version": "1.7.9",
3
+ "version": "1.8.0",
4
4
  "type": "module",
5
5
  "main": "./box.cjs",
6
6
  "module": "./box.mjs",
package/core/boxTypes.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { boxStyles, pseudoClassSuffixes } from './boxStyles';
2
- export type StyleKey = keyof typeof boxStyles;
3
- export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];