@cronocode/react-box 1.6.4 → 1.6.6

package/box.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("./box.module.css.cjs"),d=require("./utils/utils.cjs"),j=require("./theme.cjs");function y(s,e){const{tag:t,children:o,props:n,className:u,style:b}=s,f=j.useTheme(s),$=a.useMemo(()=>{const i=u?d.ClassNameUtils.classNames(c.classes.box,u):[c.classes.box],T=f?{...m(f),...m(s)}:m(s);return Object.entries(T).forEach(([l,h])=>{const x=c.classes[l+h];x?i.push(x):l in d.themeClasses&&i.push(`${d.themeClasses[l]}${h}`)}),i.join(" ")},[s]),r={...n,className:$};b&&(r.style=b),e&&(r.ref=e);const[H,g]=a.useState(!1),p=typeof o=="function";return p&&(r.onMouseEnter=()=>g(!0),r.onMouseLeave=()=>g(!1)),a.createElement(t||"div",r,p?o({isHover:H}):o)}const C=a.forwardRef(y),N={m:"margin",mx:"marginHorizontal",my:"marginVertical",mt:"marginTop",mr:"marginRight",mb:"marginBottom",ml:"marginLeft",p:"padding",px:"paddingHorizontal",py:"paddingVertical",pt:"paddingTop",pr:"paddingRight",pb:"paddingBottom",pl:"paddingLeft",b:"border",bx:"borderHorizontal",by:"borderVertical",bt:"borderTop",br:"borderRight",bb:"borderBottom",bl:"borderLeft",jc:"justifyContent",ai:"alignItems",ac:"alignContent",d:"flexDirection"},P=Object.entries(N).reduce((s,[e,t])=>(s[e]=t,s[`${e}H`]=`${t}H`,s[`${e}F`]=`${t}F`,s[`${e}A`]=`${t}A`,s),{});function m(s){const e={...s};return Object.keys(e).forEach(o=>{const n=P[o];n&&(n in e||(e[n]=e[o]),delete e[o])}),e}exports.default=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/dox.cjs");require("react");require("./utils/utils.cjs");require("./theme.cjs");exports.default=e.default;

package/box.d.ts

@@ -1,18 +1,2 @@
-import React, { Ref } from 'react';
-import { BoxStyles } from './types';
-import ClassNameUtils from './utils/className/classNameUtils';
-import { ThemeComponentProps } from './theme';
-type AllProps<TTag extends keyof React.ReactHTML> = React.ComponentProps<TTag>;
-type TagPropsType<TTag extends keyof React.ReactHTML> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
-interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles, ThemeComponentProps {
-    children?: React.ReactNode | ((props: {
-        isHover: boolean;
-    }) => React.ReactNode);
-    tag?: TTag;
-    props?: TagPropsType<TTag>;
-    style?: React.ComponentProps<TTag>['style'];
-    className?: ClassNameUtils.ClassNameType;
-    ref?: Ref<HTMLElement>;
-}
-declare const _default: <TTag extends keyof React.ReactHTML = "div">(props: Props<TTag>) => JSX.Element;
-export default _default;
+import Dox from './components/dox';
+export default Dox;

package/box.mjs

@@ -1,53 +1,7 @@
-import T, { forwardRef as j, useMemo as C, useState as N } from "react";
-import { c as m } from "./box.module.css.mjs";
-import { C as y, a as h } from "./utils/utils.mjs";
-import { useTheme as B } from "./theme.mjs";
-function P(t, e) {
-  const { tag: s, children: o, props: n, className: c, style: d } = t, f = B(t), x = C(() => {
-    const a = c ? y.classNames(m.box, c) : [m.box], H = f ? { ...l(f), ...l(t) } : l(t);
-    return Object.entries(H).forEach(([i, p]) => {
-      const u = m[i + p];
-      u ? a.push(u) : i in h && a.push(`${h[i]}${p}`);
-    }), a.join(" ");
-  }, [t]), r = { ...n, className: x };
-  d && (r.style = d), e && (r.ref = e);
-  const [$, b] = N(!1), g = typeof o == "function";
-  return g && (r.onMouseEnter = () => b(!0), r.onMouseLeave = () => b(!1)), T.createElement(s || "div", r, g ? o({ isHover: $ }) : o);
-}
-const z = j(P), R = {
-  m: "margin",
-  mx: "marginHorizontal",
-  my: "marginVertical",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft",
-  p: "padding",
-  px: "paddingHorizontal",
-  py: "paddingVertical",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  b: "border",
-  bx: "borderHorizontal",
-  by: "borderVertical",
-  bt: "borderTop",
-  br: "borderRight",
-  bb: "borderBottom",
-  bl: "borderLeft",
-  jc: "justifyContent",
-  ai: "alignItems",
-  ac: "alignContent",
-  d: "flexDirection"
-}, v = Object.entries(R).reduce((t, [e, s]) => (t[e] = s, t[`${e}H`] = `${s}H`, t[`${e}F`] = `${s}F`, t[`${e}A`] = `${s}A`, t), {});
-function l(t) {
-  const e = { ...t };
-  return Object.keys(e).forEach((o) => {
-    const n = v[o];
-    n && (n in e || (e[n] = e[o]), delete e[o]);
-  }), e;
-}
+import r from "./components/dox.mjs";
+import "react";
+import "./utils/utils.mjs";
+import "./theme.mjs";
 export {
-  z as default
+  r as default
 };

package/components/baseSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),o=require("../utils/utils.cjs"),n=require("../baseSvg.module.css.cjs");function w(l){const{children:s,props:v,className:c,style:m,viewBox:h,width:d,height:S}=l,e=c?o.ClassNameUtils.classNames(c,n.classes.base):[n.classes.base];Object.entries(l).forEach(([a,u])=>{const f=n.classes[a+u];f?e.push(f):a in o.themeSvgClasses&&e.push(`${o.themeSvgClasses[a]}${u}`)});const t={...v,style:{...m,width:d,height:S},className:e.join(" "),viewBox:h||"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none"},[p,i]=g.useState(!1),r=typeof s=="function";return r&&(t.onMouseEnter=()=>i(!0),t.onMouseLeave=()=>i(!1)),g.createElement("svg",t,r?s({isHover:p}):s)}exports.default=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./doxSvg.cjs");require("react/jsx-runtime");require("react");require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");exports.default=e.default;

package/components/baseSvg.d.ts

@@ -1,19 +1,2 @@
-import React from 'react';
-import { SvgStyles } from '../types';
-import ClassNameUtils from '../utils/className/classNameUtils';
-type AllSvgProps = React.SVGProps<SVGElement>;
-type SvgPropsType = Omit<AllSvgProps, 'className' | 'style' | 'width' | 'height'>;
-type SvgStyleType = Omit<React.CSSProperties, 'width' | 'height'>;
-interface Props extends SvgStyles {
-    children?: React.ReactNode | ((props: {
-        isHover: boolean;
-    }) => React.ReactNode);
-    props?: SvgPropsType;
-    style?: SvgStyleType;
-    className?: ClassNameUtils.ClassNameType;
-    viewBox?: string;
-    width?: string;
-    height?: string;
-}
-export default function BaseSvg(props: Props): React.ReactSVGElement;
-export {};
+import DoxSvg from './doxSvg';
+export default DoxSvg;

package/components/baseSvg.mjs

@@ -1,22 +1,9 @@
-import d, { useState as N } from "react";
-import { C as x, t as m } from "../utils/utils.mjs";
-import { c as a } from "../baseSvg.module.css.mjs";
-function C(n) {
-  const { children: s, props: p, className: r, style: h, viewBox: u, width: v, height: g } = n, e = r ? x.classNames(r, a.base) : [a.base];
-  Object.entries(n).forEach(([o, l]) => {
-    const f = a[o + l];
-    f ? e.push(f) : o in m && e.push(`${m[o]}${l}`);
-  });
-  const t = {
-    ...p,
-    style: { ...h, width: v, height: g },
-    className: e.join(" "),
-    viewBox: u || "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none"
-  }, [w, c] = N(!1), i = typeof s == "function";
-  return i && (t.onMouseEnter = () => c(!0), t.onMouseLeave = () => c(!1)), d.createElement("svg", t, i ? s({ isHover: w }) : s);
-}
+import r from "./doxSvg.mjs";
+import "react/jsx-runtime";
+import "react";
+import "./dox.mjs";
+import "../utils/utils.mjs";
+import "../theme.mjs";
 export {
-  C as default
+  r as default
 };

package/components/button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const i=["type","onClick","disabled"];function c(t,e){const o=s.ObjectUtils.buildProps(t,i);return r.jsx(u.default,{ref:e,tag:"button",component:"button",...o})}const l=n.forwardRef(c);exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),u=require("./dox.cjs"),s=require("../utils/utils.cjs");require("../theme.cjs");const i=["type","onClick","disabled"];function c(t,e){const o=s.ObjectUtils.buildProps(t,i);return n.jsx(u.default,{ref:e,tag:"button",component:"button",...o})}const l=r.forwardRef(c);exports.default=l;

package/components/button.mjs

@@ -1,15 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import i from "../box.mjs";
-import { O as m } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
+import s from "./dox.mjs";
+import { O as i } from "../utils/utils.mjs";
 import "../theme.mjs";
-const s = ["type", "onClick", "disabled"];
+const m = ["type", "onClick", "disabled"];
 function e(o, t) {
-  const r = m.buildProps(o, s);
-  return /* @__PURE__ */ n(i, { ref: t, tag: "button", component: "button", ...r });
+  const r = i.buildProps(o, m);
+  return /* @__PURE__ */ n(s, { ref: t, tag: "button", component: "button", ...r });
 }
-const l = p(e);
+const d = p(e);
 export {
-  l as default
+  d as default
 };

package/components/checkbox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),t=require("../box.cjs"),i=require("../utils/utils.cjs"),u=require("./flex.cjs"),l=require("../box.module.css.cjs");require("../theme.cjs");const a=["name","onInput","onChange","disabled","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,s){const{native:o}=n,r=i.ObjectUtils.buildProps(n,a,{type:"checkbox"});return e.jsxs(u.default,{inline:!0,position:"relative",children:[e.jsx(t.default,{ref:s,tag:"input",component:"checkbox",...r,appearance:o?void 0:"none"}),!o&&e.jsx(t.default,{position:"absolute",pointerEvents:"none",className:l.classes._checkedIcon,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 x=c.forwardRef(d);exports.default=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),t=require("./dox.cjs"),i=require("../utils/utils.cjs"),u=require("./flex.cjs"),l=require("../box.module.css.cjs");require("../theme.cjs");const d=["name","onInput","onChange","disabled","autoFocus","readOnly","required","value","checked","defaultChecked"];function a(n,s){const{native:o}=n,r=i.ObjectUtils.buildProps(n,d,{type:"checkbox"});return e.jsxs(u.default,{inline:!0,position:"relative",children:[e.jsx(t.default,{ref:s,tag:"input",component:"checkbox",...r,appearance:o?void 0:"none"}),!o&&e.jsx(t.default,{position:"absolute",pointerEvents:"none",className:l.classes._checkedIcon,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 x=c.forwardRef(a);exports.default=x;

package/components/checkbox.mjs

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import t from "../box.mjs";
+import t from "./dox.mjs";
 import { O as a } from "../utils/utils.mjs";
 import l from "./flex.mjs";
 import { c as d } from "../box.module.css.mjs";

package/components/dataGrid.cjs

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

package/components/dataGrid.mjs

@@ -1,7 +1,6 @@
 import { jsx as o, Fragment as l, jsxs as u } from "react/jsx-runtime";
-import s from "../box.mjs";
+import s from "./dox.mjs";
 import "react";
-import "../box.module.css.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
 function c(e) {
@@ -24,7 +23,7 @@ function c(e) {
     }))
   };
 }
-function k(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(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())),
@@ -32,5 +31,5 @@ function k(e) {
   ] }) });
 }
 export {
-  k as default
+  f as default
 };

package/components/dox/doxStyles.d.ts

@@ -86,6 +86,19 @@ export declare const doxStyles: {
             values: readonly [];
         };
     };
+    inline: {
+        cssNames: string[];
+        values1: {
+            values: readonly [true];
+            formatValue: () => string;
+        };
+        values2: {
+            values: readonly [];
+        };
+        values3: {
+            values: readonly [];
+        };
+    };
     boxSizing: {
         cssNames: string[];
         values1: {

package/components/dox.cjs

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

package/components/dox.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { RefAttributes } from 'react';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxStyleProps } from './dox/doxStyles';
+import { StylesContext } from './dox/stylesContext';
 type AllProps<TTag extends keyof JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
 interface Props<TTag extends keyof JSX.IntrinsicElements> extends DoxStyleProps {
@@ -12,5 +13,7 @@ interface Props<TTag extends keyof JSX.IntrinsicElements> extends DoxStyleProps
     className?: ClassNameUtils.ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
-declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: Props<TTag>) => JSX.Element;
+declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
 export default _default;
+declare const flushStyles: typeof StylesContext.flush;
+export { flushStyles };