@cronocode/react-box 1.6.7 → 1.6.8

package/components/baseSvg.cjs

@@ -1 +1 @@
-"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;
+"use strict";require("./doxSvg.cjs");require("react/jsx-runtime");require("react");require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");

package/components/baseSvg.mjs

@@ -1,9 +1,6 @@
-import r from "./doxSvg.mjs";
+import "./doxSvg.mjs";
 import "react/jsx-runtime";
 import "react";
 import "./dox.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
-export {
-  r as default
-};

package/components/button.cjs

@@ -1 +1 @@
-"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;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),s=require("./dox.cjs"),u=require("../utils/utils.cjs");require("../theme.cjs");const i=["type","onClick","disabled"];function c(t,e){const o=u.ObjectUtils.buildProps(t,i);return r.jsx(s.default,{ref:e,tag:"button",component:"button",...o})}n.forwardRef(c);

package/components/button.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];

package/components/button.mjs

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

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("./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;
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),t=require("./dox.cjs"),c=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=c.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"})})})})]})}i.forwardRef(a);

package/components/checkbox.mjs

@@ -1,5 +1,5 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import t from "./dox.mjs";
 import { O as a } from "../utils/utils.mjs";
 import l from "./flex.mjs";
@@ -19,12 +19,9 @@ const p = [
 ];
 function m(o, r) {
   const { native: n } = o, i = a.buildProps(o, p, { type: "checkbox" });
-  return /* @__PURE__ */ c(l, { inline: !0, position: "relative", children: [
+  return /* @__PURE__ */ s(l, { inline: !0, position: "relative", children: [
     /* @__PURE__ */ e(t, { ref: r, tag: "input", component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
     !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", className: d._checkedIcon, 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" }) }) }) })
   ] });
 }
-const w = s(m);
-export {
-  w as default
-};
+c(m);

package/components/dataGrid/dataGridContract.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface GridCell<T> {
     key: keyof T;
     value: React.ReactNode;

package/components/dataGrid.cjs

@@ -1 +1 @@
-"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;
+"use strict";require("react/jsx-runtime");require("./dox.cjs");require("react");require("../utils/utils.cjs");require("../theme.cjs");

package/components/dataGrid.d.ts

@@ -1,5 +1,5 @@
 interface Props<T extends {}> {
     data?: T[];
 }
-export default function DataGrid<T extends {}>(props: Props<T>): JSX.Element;
+export default function DataGrid<T extends {}>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dataGrid.mjs

@@ -1,35 +1,5 @@
-import { jsx as o, Fragment as l, jsxs as u } from "react/jsx-runtime";
-import s from "./dox.mjs";
+import "react/jsx-runtime";
+import "./dox.mjs";
 import "react";
 import "../utils/utils.mjs";
 import "../theme.mjs";
-function c(e) {
-  if (!(e != null && e.length))
-    return {
-      rows: [],
-      columns: []
-    };
-  const i = Object.keys(e[0]);
-  return {
-    rows: e.map((r) => ({
-      dataRow: r,
-      cells: i.map((n) => ({
-        key: n,
-        value: r[n]
-      }))
-    })),
-    columns: i.map((r) => ({
-      key: r
-    }))
-  };
-}
-function 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())),
-    r.rows.map((n, t) => n.cells.map((m) => /* @__PURE__ */ o(s, { children: m.value }, m.key.toString() + t)))
-  ] }) });
-}
-export {
-  f as default
-};

package/components/dox/doxStyles.d.ts

@@ -1,6 +1,15 @@
 import { ThemeComponentProps } from '../../theme';
 import { Augmented } from '../../types';
 import { DoxStylesFormatters } from './doxStylesFormatters';
+type Hovered<T> = {
+    [K in keyof T as K extends string ? `${K}H` : never]: T[K];
+};
+type Focused<T> = {
+    [K in keyof T as K extends string ? `${K}F` : never]: T[K];
+};
+type Activated<T> = {
+    [K in keyof T as K extends string ? `${K}A` : never]: T[K];
+};
 export interface StyleValues {
     values: Readonly<Array<string | number | boolean>>;
     formatClassName?: (key: string, value: string | number | boolean) => string;

package/components/dox.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),E=require("../utils/utils.cjs"),I=require("../theme.cjs");var e;(a=>{(r=>{function m(l,d){return`${l}${d.replace("/","-")}`}r.fraction=m;function n(l){return[`${l} path`,`${l} circle`,`${l} rect`,`${l} line`]}r.svg=n})(a.ClassName||(a.ClassName={})),(r=>{function m(u,t){return`${t/4}rem`}r.rem=m;function n(u,t){return`${t}px`}r.px=n;function l(u,t){const[o,v]=t.split("/");return`${+o/+v*100}%`}r.fraction=l;function d(u,t){switch(t){case"fit":return"100%";case"fit-screen":return u.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return t}}r.widthHeight=d;function g(u){return(t,o)=>`var(--${u}${o});`}r.variables=g;function x(u){return(t,o)=>`var(--${u}${o});`}r.svgVariables=x;function S(u,t){return`repeat(${t},minmax(0,1fr))`}r.gridColumns=S;function f(u,t){return t==="full-row"?"1/-1":`span ${t}/span ${t}`}r.gridColumn=f;function h(u,t){return`${t}ms`}r.ms=h;function V(u,t){return`${t}deg`}r.rotate=V;function y(u,t){return t==="xAxis"?"-1 1":"1 -1"}r.flip=y})(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")}},A={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},$={hover:{className:"_h"},focus:{className:"_f"}},i={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=>{i[a]=T[a]});Object.keys(j).forEach(a=>{i[a]=j[a],i[a].isThemeStyle=!0});Object.keys(A).forEach(a=>{i[a]=A[a],i[a].isThemeStyle=!0});const z={w:{...i.width,key:"width"},h:{...i.height,key:"height"},m:{...i.margin,key:"margin"},mx:{...i.marginHorizontal,key:"marginHorizontal"},my:{...i.marginVertical,key:"marginVertical"},mt:{...i.marginTop,key:"marginTop"},mr:{...i.marginRight,key:"marginRight"},mb:{...i.marginBottom,key:"marginBottom"},ml:{...i.marginLeft,key:"marginLeft"},p:{...i.padding,key:"padding"},px:{...i.paddingHorizontal,key:"paddingHorizontal"},py:{...i.paddingVertical,key:"paddingVertical"},pt:{...i.paddingTop,key:"paddingTop"},pr:{...i.paddingRight,key:"paddingRight"},pb:{...i.paddingBottom,key:"paddingBottom"},pl:{...i.paddingLeft,key:"paddingLeft"},b:{...i.border,key:"border"},bx:{...i.borderHorizontal,key:"borderHorizontal"},by:{...i.borderVertical,key:"borderVertical"},bt:{...i.borderTop,key:"borderTop"},br:{...i.borderRight,key:"borderRight"},bb:{...i.borderBottom,key:"borderBottom"},bl:{...i.borderLeft,key:"borderLeft"},jc:{...i.justifyContent,key:"justifyContent"},ai:{...i.alignItems,key:"alignItems"},ac:{...i.alignContent,key:"alignContent"},d:{...i.flexDirection,key:"flexDirection"}},D=Object.keys(i),M=Object.keys(z);_.forEach(a=>{D.forEach(r=>{i[`${r}${a}`]={...i[r]},i[`${r}${a}`].pseudoSuffix=a}),M.forEach(r=>{z[`${r}${a}`]={...z[r],key:`${z[r].key}${a}`},z[`${r}${a}`].pseudoSuffix=a})});var b;(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 b=require("react"),E=require("../utils/utils.cjs"),I=require("../theme.cjs");var e;(a=>{(r=>{function m(l,d){return`${l}${d.replace("/","-")}`}r.fraction=m;function n(l){return[`${l} path`,`${l} circle`,`${l} rect`,`${l} line`]}r.svg=n})(a.ClassName||(a.ClassName={})),(r=>{function m(u,t){return`${t/4}rem`}r.rem=m;function n(u,t){return`${t}px`}r.px=n;function l(u,t){const[o,v]=t.split("/");return`${+o/+v*100}%`}r.fraction=l;function d(u,t){switch(t){case"fit":return"100%";case"fit-screen":return u.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return t}}r.widthHeight=d;function g(u){return(t,o)=>`var(--${u}${o});`}r.variables=g;function x(u){return(t,o)=>`var(--${u}${o});`}r.svgVariables=x;function S(u,t){return`repeat(${t},minmax(0,1fr))`}r.gridColumns=S;function f(u,t){return t==="full-row"?"1/-1":`span ${t}/span ${t}`}r.gridColumn=f;function h(u,t){return`${t}ms`}r.ms=h;function V(u,t){return`${t}deg`}r.rotate=V;function N(u,t){return t==="xAxis"?"-1 1":"1 -1"}r.flip=N})(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")}},A={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},$={hover:{className:"_h"},focus:{className:"_f"}},i={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=>{i[a]=T[a]});Object.keys(j).forEach(a=>{i[a]=j[a],i[a].isThemeStyle=!0});Object.keys(A).forEach(a=>{i[a]=A[a],i[a].isThemeStyle=!0});const w={w:{...i.width,key:"width"},h:{...i.height,key:"height"},m:{...i.margin,key:"margin"},mx:{...i.marginHorizontal,key:"marginHorizontal"},my:{...i.marginVertical,key:"marginVertical"},mt:{...i.marginTop,key:"marginTop"},mr:{...i.marginRight,key:"marginRight"},mb:{...i.marginBottom,key:"marginBottom"},ml:{...i.marginLeft,key:"marginLeft"},p:{...i.padding,key:"padding"},px:{...i.paddingHorizontal,key:"paddingHorizontal"},py:{...i.paddingVertical,key:"paddingVertical"},pt:{...i.paddingTop,key:"paddingTop"},pr:{...i.paddingRight,key:"paddingRight"},pb:{...i.paddingBottom,key:"paddingBottom"},pl:{...i.paddingLeft,key:"paddingLeft"},b:{...i.border,key:"border"},bx:{...i.borderHorizontal,key:"borderHorizontal"},by:{...i.borderVertical,key:"borderVertical"},bt:{...i.borderTop,key:"borderTop"},br:{...i.borderRight,key:"borderRight"},bb:{...i.borderBottom,key:"borderBottom"},bl:{...i.borderLeft,key:"borderLeft"},jc:{...i.justifyContent,key:"justifyContent"},ai:{...i.alignItems,key:"alignItems"},ac:{...i.alignContent,key:"alignContent"},d:{...i.flexDirection,key:"flexDirection"}},D=Object.keys(i),M=Object.keys(w);_.forEach(a=>{D.forEach(r=>{i[`${r}${a}`]={...i[r]},i[`${r}${a}`].pseudoSuffix=a}),M.forEach(r=>{w[`${r}${a}`]={...w[r],key:`${w[r].key}${a}`},w[`${r}${a}`].pseudoSuffix=a})});var z;(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;}}
 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}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`,m=new E.IdentityFactory,n=Object.keys(i),l=y();let d=!1;const g=n.reduce((u,t)=>(u[t]=new Set,u),{});function x(u,t){if(u in i)return f(u,t);if(u in $)return $[u].className;if(u in T)return f(u,t)}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"),l.innerHTML=u.join(""),d=!1}}a.flush=S;function f(u,t){var c;g[u].has(t)||(d=!0,g[u].add(t));const o=V(u,t),v=((c=o.formatClassName)==null?void 0:c.call(o,u,t))??`${u}${t}`;return`-${m.getIdentity(v)}`}function h(u,t){return Object.entries(g).filter(([v])=>{var c;return((c=i[v])==null?void 0:c.pseudoSuffix)===t}).reduce((v,[c,F])=>(F.forEach(H=>{var R;const p=V(c,H),w=`.${f(c,H)}`;let k=[];t?t==="H"?k=[...o(`${w}:hover`,p),...o(`.${$.hover.className}:hover>${w}`,p)]:t==="F"?k=[...o(`${w}:focus-within`,p),...o(`.${$.focus.className}:focus-within>${w}`,p)]:t==="A"&&(k=o(`${w}:active`,p)):k=o(w,p);const B=((R=p.formatValue)==null?void 0:R.call(p,c,H))??H,L=i[c].cssNames.map(O=>`${O}:${B};`).join("");v.push(`${k.join(",")}{${L}}`)}),v),u);function o(v,c){return c.formatSelector?c.formatSelector(v):[v]}}function V(u,t){const o=i[u];return o.isThemeStyle?o:o.values1.values.includes(t)?o.values1:o.values2.values.includes(t)?o.values2:o.values3}function y(){const u="crono-styles",o=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let v=o.getElementById(u);return v||(v=o.createElement("style"),v.setAttribute("id",u),v.setAttribute("type","text/css"),o.head.insertBefore(v,o.head.firstChild)),v}})(b||(b={}));const P=typeof window<"u"&&typeof window.document<"u",q=P?N.useLayoutEffect:N.useEffect;function W(a,r){const m=I.useTheme(a);return q(b.flush,[a]),N.useMemo(()=>{const n=[r?b.svgClassName:b.doxClassName],l=m?{...C(m),...C(a)}:C(a);return"inline"in l&&(l.display==="block"?l.display="inline-block":l.display==="flex"?l.display="inline-flex":l.display==="grid"&&(l.display="inline-grid"),delete l.inline),"inlineH"in l&&(l.displayH==="block"?l.displayH="inline-block":l.displayH==="flex"?l.displayH="inline-flex":l.displayH==="grid"&&(l.displayH="inline-grid"),delete l.inlineH),"inlineF"in l&&(l.displayF==="block"?l.displayF="inline-block":l.displayF==="flex"?l.displayF="inline-flex":l.displayF==="grid"&&(l.displayF="inline-grid"),delete l.inlineF),"inlineA"in l&&(l.displayA==="block"?l.displayA="inline-block":l.displayA==="flex"?l.displayA="inline-flex":l.displayA==="grid"&&(l.displayA="inline-grid"),delete l.inlineA),Object.entries(l).forEach(([d,g])=>{n.push(b.get(d,g))}),n},[a,m])}function C(a){const r={...a};return Object.keys(r).forEach(n=>{const l=z[n];l&&(l.key in r||(r[l.key]=r[n]),delete r[n])}),r}function G(a,r){const{tag:m="div",children:n,props:l,className:d,style:g}=a,x=W(a,m==="svg"),S=N.useMemo(()=>E.ClassNameUtils.classNames(d,x).join(" "),[a]),f={...l,className:S};g&&(f.style=g),r&&(f.ref=r);const[h,V]=N.useState(!1),y=typeof n=="function";return y&&(f.onMouseEnter=()=>V(!0),f.onMouseLeave=()=>V(!1)),N.createElement(m,f,y?n({isHover:h}):n)}const U=N.forwardRef(G),{flush:X}=b;exports.default=U;exports.flushStyles=X;
+`,m=new E.IdentityFactory,n=Object.keys(i),l=N();let d=!1;const g=n.reduce((u,t)=>(u[t]=new Set,u),{});function x(u,t){if(u in i)return f(u,t);if(u in $)return $[u].className;if(u in T)return f(u,t)}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"),l.innerHTML=u.join(""),d=!1}}a.flush=S;function f(u,t){var c;g[u].has(t)||(d=!0,g[u].add(t));const o=V(u,t),v=((c=o.formatClassName)==null?void 0:c.call(o,u,t))??`${u}${t}`;return`-${m.getIdentity(v)}`}function h(u,t){return Object.entries(g).filter(([v])=>{var c;return((c=i[v])==null?void 0:c.pseudoSuffix)===t}).reduce((v,[c,F])=>(F.forEach(H=>{var R;const p=V(c,H),y=`.${f(c,H)}`;let k=[];t?t==="H"?k=[...o(`${y}:hover`,p),...o(`.${$.hover.className}:hover>${y}`,p)]:t==="F"?k=[...o(`${y}:focus-within`,p),...o(`.${$.focus.className}:focus-within>${y}`,p)]:t==="A"&&(k=o(`${y}:active`,p)):k=o(y,p);const B=((R=p.formatValue)==null?void 0:R.call(p,c,H))??H,L=i[c].cssNames.map(O=>`${O}:${B};`).join("");v.push(`${k.join(",")}{${L}}`)}),v),u);function o(v,c){return c.formatSelector?c.formatSelector(v):[v]}}function V(u,t){const o=i[u];return o.isThemeStyle?o:o.values1.values.includes(t)?o.values1:o.values2.values.includes(t)?o.values2:o.values3}function N(){const u="crono-styles",o=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let v=o.getElementById(u);return v||(v=o.createElement("style"),v.setAttribute("id",u),v.setAttribute("type","text/css"),o.head.insertBefore(v,o.head.firstChild)),v}})(z||(z={}));const P=typeof window<"u"&&typeof window.document<"u",q=P?b.useLayoutEffect:b.useEffect;function W(a,r){const m=I.useTheme(a);return q(z.flush,[a]),b.useMemo(()=>{const n=[r?z.svgClassName:z.doxClassName],l=m?{...C(m),...C(a)}:C(a);return"inline"in l&&(l.display==="block"?l.display="inline-block":l.display==="flex"?l.display="inline-flex":l.display==="grid"&&(l.display="inline-grid"),delete l.inline),"inlineH"in l&&(l.displayH==="block"?l.displayH="inline-block":l.displayH==="flex"?l.displayH="inline-flex":l.displayH==="grid"&&(l.displayH="inline-grid"),delete l.inlineH),"inlineF"in l&&(l.displayF==="block"?l.displayF="inline-block":l.displayF==="flex"?l.displayF="inline-flex":l.displayF==="grid"&&(l.displayF="inline-grid"),delete l.inlineF),"inlineA"in l&&(l.displayA==="block"?l.displayA="inline-block":l.displayA==="flex"?l.displayA="inline-flex":l.displayA==="grid"&&(l.displayA="inline-grid"),delete l.inlineA),Object.entries(l).forEach(([d,g])=>{n.push(z.get(d,g))}),n},[a,m])}function C(a){const r={...a};return Object.keys(r).forEach(n=>{const l=w[n];l&&(l.key in r||(r[l.key]=r[n]),delete r[n])}),r}function G(a,r){const{tag:m="div",children:n,props:l,className:d,style:g}=a,x=W(a,m==="svg"),S=b.useMemo(()=>E.ClassNameUtils.classNames(d,x).join(" "),[a]),f={...l,className:S};g&&(f.style=g),r&&(f.ref=r);const[h,V]=b.useState(!1),N=typeof n=="function";return N&&(f.onMouseEnter=()=>V(!0),f.onMouseLeave=()=>V(!1)),b.createElement(m,f,N?n({isHover:h}):n)}const U=b.forwardRef(G);exports.default=U;

package/components/dox.d.ts

@@ -2,9 +2,11 @@ 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 {
+type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
+type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
+type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
+interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends DoxStyleProps {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
@@ -13,7 +15,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> & React.RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementType<React.JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
 export default _default;
 declare const flushStyles: typeof StylesContext.flush;
 export { flushStyles };

package/components/dox.mjs

@@ -61,10 +61,10 @@ var e;
       return `${t}deg`;
     }
     r.rotate = V;
-    function N(u, t) {
+    function b(u, t) {
       return t === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = N;
+    r.flip = b;
   })(a.Value || (a.Value = {}));
 })(e || (e = {}));
 const q = ["H", "F", "A"];
@@ -878,7 +878,7 @@ Object.keys(R).forEach((a) => {
 Object.keys(A).forEach((a) => {
   i[a] = A[a], i[a].isThemeStyle = !0;
 });
-const w = {
+const y = {
   w: { ...i.width, key: "width" },
   h: { ...i.height, key: "height" },
   m: { ...i.margin, key: "margin" },
@@ -906,15 +906,15 @@ const w = {
   ai: { ...i.alignItems, key: "alignItems" },
   ac: { ...i.alignContent, key: "alignContent" },
   d: { ...i.flexDirection, key: "flexDirection" }
-}, U = Object.keys(i), X = Object.keys(w);
+}, U = Object.keys(i), X = Object.keys(y);
 q.forEach((a) => {
   U.forEach((r) => {
     i[`${r}${a}`] = { ...i[r] }, i[`${r}${a}`].pseudoSuffix = a;
   }), X.forEach((r) => {
-    w[`${r}${a}`] = { ...w[r], key: `${w[r].key}${a}` }, w[`${r}${a}`].pseudoSuffix = a;
+    y[`${r}${a}`] = { ...y[r], key: `${y[r].key}${a}` }, y[`${r}${a}`].pseudoSuffix = a;
   });
 });
-var b;
+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;}}
@@ -923,7 +923,7 @@ 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}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, m = new M(), n = Object.keys(i), l = N();
+`, m = new M(), n = Object.keys(i), l = b();
   let d = !1;
   const g = n.reduce((u, t) => (u[t] = /* @__PURE__ */ new Set(), u), {});
   function z(u, t) {
@@ -955,15 +955,15 @@ a,ul{all: unset;}
       return ((c = i[v]) == null ? void 0 : c.pseudoSuffix) === t;
     }).reduce((v, [c, E]) => (E.forEach((k) => {
       var T;
-      const p = V(c, k), y = `.${f(c, k)}`;
+      const p = V(c, k), N = `.${f(c, k)}`;
       let S = [];
       t ? t === "H" ? S = [
-        ...o(`${y}:hover`, p),
-        ...o(`.${H.hover.className}:hover>${y}`, p)
+        ...o(`${N}:hover`, p),
+        ...o(`.${H.hover.className}:hover>${N}`, p)
       ] : t === "F" ? S = [
-        ...o(`${y}:focus-within`, p),
-        ...o(`.${H.focus.className}:focus-within>${y}`, p)
-      ] : t === "A" && (S = o(`${y}:active`, p)) : S = o(y, p);
+        ...o(`${N}:focus-within`, p),
+        ...o(`.${H.focus.className}:focus-within>${N}`, p)
+      ] : t === "A" && (S = o(`${N}:active`, p)) : S = o(N, p);
       const F = ((T = p.formatValue) == null ? void 0 : T.call(p, c, k)) ?? k, B = i[c].cssNames.map((L) => `${L}:${F};`).join("");
       v.push(`${S.join(",")}{${B}}`);
     }), v), u);
@@ -975,37 +975,36 @@ a,ul{all: unset;}
     const o = i[u];
     return o.isThemeStyle ? o : o.values1.values.includes(t) ? o.values1 : o.values2.values.includes(t) ? o.values2 : o.values3;
   }
-  function N() {
+  function b() {
     const u = "crono-styles", o = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
     let v = o.getElementById(u);
     return v || (v = o.createElement("style"), v.setAttribute("id", u), v.setAttribute("type", "text/css"), o.head.insertBefore(v, o.head.firstChild)), v;
   }
-})(b || (b = {}));
+})(w || (w = {}));
 const Y = typeof window < "u" && typeof window.document < "u", J = Y ? I : _;
 function Q(a, r) {
   const m = G(a);
-  return J(b.flush, [a]), j(() => {
-    const n = [r ? b.svgClassName : b.doxClassName], l = m ? { ...$(m), ...$(a) } : $(a);
+  return J(w.flush, [a]), j(() => {
+    const n = [r ? w.svgClassName : w.doxClassName], l = m ? { ...$(m), ...$(a) } : $(a);
     return "inline" in l && (l.display === "block" ? l.display = "inline-block" : l.display === "flex" ? l.display = "inline-flex" : l.display === "grid" && (l.display = "inline-grid"), delete l.inline), "inlineH" in l && (l.displayH === "block" ? l.displayH = "inline-block" : l.displayH === "flex" ? l.displayH = "inline-flex" : l.displayH === "grid" && (l.displayH = "inline-grid"), delete l.inlineH), "inlineF" in l && (l.displayF === "block" ? l.displayF = "inline-block" : l.displayF === "flex" ? l.displayF = "inline-flex" : l.displayF === "grid" && (l.displayF = "inline-grid"), delete l.inlineF), "inlineA" in l && (l.displayA === "block" ? l.displayA = "inline-block" : l.displayA === "flex" ? l.displayA = "inline-flex" : l.displayA === "grid" && (l.displayA = "inline-grid"), delete l.inlineA), Object.entries(l).forEach(([d, g]) => {
-      n.push(b.get(d, g));
+      n.push(w.get(d, g));
     }), n;
   }, [a, m]);
 }
 function $(a) {
   const r = { ...a };
   return Object.keys(r).forEach((n) => {
-    const l = w[n];
+    const l = y[n];
     l && (l.key in r || (r[l.key] = r[n]), delete r[n]);
   }), r;
 }
 function Z(a, r) {
   const { tag: m = "div", children: n, props: l, className: d, style: g } = a, z = Q(a, m === "svg"), x = j(() => W.classNames(d, z).join(" "), [a]), f = { ...l, className: x };
   g && (f.style = g), r && (f.ref = r);
-  const [h, V] = P(!1), N = typeof n == "function";
-  return N && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), O.createElement(m, f, N ? n({ isHover: h }) : n);
+  const [h, V] = P(!1), b = typeof n == "function";
+  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), O.createElement(m, f, b ? n({ isHover: h }) : n);
 }
-const le = D(Z), { flush: ue } = b;
+const le = D(Z);
 export {
-  le as default,
-  ue as flushStyles
+  le as default
 };

package/components/doxSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("react"),c=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function a(e,r){const{viewBox:t="0 0 24 24",width:o="1.5rem",height:s,props:i,...n}=e;return u.jsx(c.default,{tag:"svg",ref:r,props:{...i,viewBox:t,width:o,height:s,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...n})}const l=g.forwardRef(a);exports.default=l;
+"use strict";const u=require("react/jsx-runtime"),c=require("react"),g=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function p(r,e){const{viewBox:t="0 0 24 24",width:s="1.5rem",height:o,props:i,...n}=r;return u.jsx(g.default,{tag:"svg",ref:e,props:{...i,viewBox:t,width:s,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...n})}c.forwardRef(p);

package/components/doxSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Dox from './dox';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxSvgStyles } from './dox/doxStyles';

package/components/doxSvg.mjs

@@ -4,18 +4,15 @@ import g from "./dox.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
 function n(o, r) {
-  const { viewBox: t = "0 0 24 24", width: p = "1.5rem", height: s, props: i, ...m } = o;
+  const { viewBox: t = "0 0 24 24", width: p = "1.5rem", height: i, props: m, ...s } = o;
   return /* @__PURE__ */ e(
     g,
     {
       tag: "svg",
       ref: r,
-      props: { ...i, viewBox: t, width: p, height: s, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
-      ...m
+      props: { ...m, viewBox: t, width: p, height: i, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
+      ...s
     }
   );
 }
-const l = f(n);
-export {
-  l as default
-};
+f(n);

package/components/flex.d.ts

@@ -1,5 +1,7 @@
 import { RefAttributes } from 'react';
 import Box from '../box';
-type BoxProps<TTag extends keyof JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
+type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
+type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
+declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<import("react").JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
 export default _default;

package/components/form.cjs

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

package/components/form.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import Box from '../box';
 type BoxProps = React.ComponentProps<typeof Box<'form'>>;
 type BoxTagProps = Required<BoxProps>['props'];
@@ -6,5 +7,5 @@ interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
     props?: FormTagProps;
     onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
 }
-export default function Form<T>(props: Props<T>): JSX.Element;
+export default function Form<T>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/form.mjs

@@ -1,16 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as p, useCallback as u } from "react";
-import a from "./dox.mjs";
-import { F as c } from "../utils/utils.mjs";
+import "react/jsx-runtime";
+import "react";
+import "./dox.mjs";
+import "../utils/utils.mjs";
 import "../theme.mjs";
-function S(o) {
-  const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
-    t.preventDefault();
-    const f = c.getFormEntries(r.current);
-    m(f, t);
-  }, []), s = { ...n, onSubmit: e, ref: r };
-  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: s });
-}
-export {
-  S as default
-};

package/components/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),u=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function s(e,r){const{inline:i,...t}=e;return n.jsx(u.default,{ref:r,display:i?"inline-grid":"grid",...t})}const d=o.forwardRef(s);exports.default=d;
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),u=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function o(r,e){const{inline:i,...n}=r;return t.jsx(u.default,{ref:e,display:i?"inline-grid":"grid",...n})}s.forwardRef(o);

package/components/grid.d.ts

@@ -1,5 +1,7 @@
 import { RefAttributes } from 'react';
 import Box from '../box';
-type BoxProps<TTag extends keyof JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
+type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
+type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
+declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<import("react").JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
 export default _default;

package/components/grid.mjs

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

package/components/radioButton.cjs

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

package/components/radioButton.mjs

@@ -15,11 +15,8 @@ const d = [
   "checked",
   "defaultChecked"
 ];
-function u(o, t) {
+function p(o, t) {
   const r = i.buildProps(o, d, { type: "radio" });
   return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-const l = n(u);
-export {
-  l as default
-};
+n(p);

package/components/textarea.cjs

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