@cronocode/react-box 1.6.6 → 1.6.8

package/components/dox.mjs

@@ -1,70 +1,70 @@
-import F, { useMemo as E, useLayoutEffect as I, useEffect as _, forwardRef as D, useState as P } from "react";
+import O, { useMemo as j, useLayoutEffect as I, useEffect as _, forwardRef as D, useState as P } from "react";
 import { I as M, C as W } from "../utils/utils.mjs";
 import { useTheme as G } from "../theme.mjs";
 var e;
 ((a) => {
   ((r) => {
-    function m(v, d) {
-      return `${v}${d.replace("/", "-")}`;
+    function m(l, d) {
+      return `${l}${d.replace("/", "-")}`;
     }
     r.fraction = m;
-    function n(v) {
-      return [`${v} path`, `${v} circle`, `${v} rect`, `${v} line`];
+    function n(l) {
+      return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
     }
     r.svg = n;
   })(a.ClassName || (a.ClassName = {})), ((r) => {
-    function m(l, u) {
-      return `${u / 4}rem`;
+    function m(u, t) {
+      return `${t / 4}rem`;
     }
     r.rem = m;
-    function n(l, u) {
-      return `${u}px`;
+    function n(u, t) {
+      return `${t}px`;
     }
     r.px = n;
-    function v(l, u) {
-      const [i, o] = u.split("/");
-      return `${+i / +o * 100}%`;
+    function l(u, t) {
+      const [o, v] = t.split("/");
+      return `${+o / +v * 100}%`;
     }
-    r.fraction = v;
-    function d(l, u) {
-      switch (u) {
+    r.fraction = l;
+    function d(u, t) {
+      switch (t) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return u;
+          return t;
       }
     }
     r.widthHeight = d;
-    function g(l) {
-      return (u, i) => `var(--${l}${i});`;
+    function g(u) {
+      return (t, o) => `var(--${u}${o});`;
     }
     r.variables = g;
-    function y(l) {
-      return (u, i) => `var(--${l}${i});`;
+    function z(u) {
+      return (t, o) => `var(--${u}${o});`;
     }
-    r.svgVariables = y;
-    function x(l, u) {
-      return `repeat(${u},minmax(0,1fr))`;
+    r.svgVariables = z;
+    function x(u, t) {
+      return `repeat(${t},minmax(0,1fr))`;
     }
     r.gridColumns = x;
-    function f(l, u) {
-      return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
+    function f(u, t) {
+      return t === "full-row" ? "1/-1" : `span ${t}/span ${t}`;
     }
     r.gridColumn = f;
-    function h(l, u) {
-      return `${u}ms`;
+    function h(u, t) {
+      return `${t}ms`;
     }
     r.ms = h;
-    function V(l, u) {
-      return `${u}deg`;
+    function V(u, t) {
+      return `${t}deg`;
     }
     r.rotate = V;
-    function N(l, u) {
-      return u === "xAxis" ? "-1 1" : "1 -1";
+    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"];
@@ -215,7 +215,7 @@ const R = {
   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") }
-}, j = {
+}, A = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -226,10 +226,10 @@ const R = {
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, $ = {
+}, H = {
   hover: { className: "_h" },
   focus: { className: "_f" }
-}, t = {
+}, i = {
   display: {
     cssNames: ["display"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
@@ -870,51 +870,51 @@ const R = {
   }
 };
 Object.keys(C).forEach((a) => {
-  t[a] = C[a];
+  i[a] = C[a];
 });
 Object.keys(R).forEach((a) => {
-  t[a] = R[a], t[a].isThemeStyle = !0;
+  i[a] = R[a], i[a].isThemeStyle = !0;
 });
-Object.keys(j).forEach((a) => {
-  t[a] = j[a], t[a].isThemeStyle = !0;
+Object.keys(A).forEach((a) => {
+  i[a] = A[a], i[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" }
-}, U = Object.keys(t), X = Object.keys(z);
+const y = {
+  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" }
+}, U = Object.keys(i), X = Object.keys(y);
 q.forEach((a) => {
   U.forEach((r) => {
-    t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
+    i[`${r}${a}`] = { ...i[r] }, i[`${r}${a}`].pseudoSuffix = a;
   }), X.forEach((r) => {
-    z[`${r}${a}`] = { ...z[r], key: `${z[r].key}${a}` }, z[`${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,89 +923,88 @@ 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(t), v = N();
+`, m = new M(), n = Object.keys(i), l = b();
   let d = !1;
-  const g = n.reduce((l, u) => (l[u] = /* @__PURE__ */ new Set(), l), {});
-  function y(l, u) {
-    if (l in t)
-      return f(l, u);
-    if (l in $)
-      return $[l].className;
-    if (l in C)
-      return f(l, u);
+  const g = n.reduce((u, t) => (u[t] = /* @__PURE__ */ new Set(), u), {});
+  function z(u, t) {
+    if (u in i)
+      return f(u, t);
+    if (u in H)
+      return H[u].className;
+    if (u in C)
+      return f(u, t);
   }
-  a.get = y;
+  a.get = z;
   function x() {
     if (d) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let l = h([r]);
-      l = h(l, "H"), l = h(l, "F"), l = h(l, "A"), v.innerHTML = l.join(""), d = !1;
+      let u = h([r]);
+      u = h(u, "H"), u = h(u, "F"), u = h(u, "A"), l.innerHTML = u.join(""), d = !1;
     }
   }
   a.flush = x;
-  function f(l, u) {
+  function f(u, t) {
     var c;
-    g[l].has(u) || (d = !0, g[l].add(u));
-    const i = V(l, u), o = ((c = i.formatClassName) == null ? void 0 : c.call(i, l, u)) ?? `${l}${u}`;
-    return `-${m.getIdentity(o)}`;
+    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(l, u) {
-    return Object.entries(g).filter(([o]) => {
+  function h(u, t) {
+    return Object.entries(g).filter(([v]) => {
       var c;
-      return ((c = t[o]) == null ? void 0 : c.pseudoSuffix) === u;
-    }).reduce((o, [c, B]) => (B.forEach((k) => {
+      return ((c = i[v]) == null ? void 0 : c.pseudoSuffix) === t;
+    }).reduce((v, [c, E]) => (E.forEach((k) => {
       var T;
-      const p = V(c, k), w = `.${f(c, k)}`;
+      const p = V(c, k), N = `.${f(c, k)}`;
       let S = [];
-      u ? u === "H" ? S = [
-        ...i(`${w}:hover`, p),
-        ...i(`.${$.hover.className}:hover>${w}`, p)
-      ] : u === "F" ? S = [
-        ...i(`${w}:focus-within`, p),
-        ...i(`.${$.focus.className}:focus-within>${w}`, p)
-      ] : u === "A" && (S = i(`${w}:active`, p)) : S = i(w, p);
-      const L = ((T = p.formatValue) == null ? void 0 : T.call(p, c, k)) ?? k, A = t[c].cssNames.map((O) => `${O}:${L};`).join("");
-      o.push(`${S.join(",")}{${A}}`);
-    }), o), l);
-    function i(o, c) {
-      return c.formatSelector ? c.formatSelector(o) : [o];
+      t ? t === "H" ? S = [
+        ...o(`${N}:hover`, p),
+        ...o(`.${H.hover.className}:hover>${N}`, p)
+      ] : t === "F" ? S = [
+        ...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);
+    function o(v, c) {
+      return c.formatSelector ? c.formatSelector(v) : [v];
     }
   }
-  function V(l, u) {
-    const i = t[l];
-    return i.isThemeStyle ? i : i.values1.values.includes(u) ? i.values1 : i.values2.values.includes(u) ? i.values2 : i.values3;
+  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 l = "crono-styles", i = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
-    let o = i.getElementById(l);
-    return o || (o = i.createElement("style"), o.setAttribute("id", l), o.setAttribute("type", "text/css"), i.head.insertBefore(o, i.head.firstChild)), o;
+  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]), E(() => {
-    const n = [r ? b.svgClassName : b.doxClassName], v = m ? { ...H(m), ...H(a) } : H(a);
-    return Object.entries(v).forEach(([d, g]) => {
-      n.push(b.get(d, g));
+  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(w.get(d, g));
     }), n;
   }, [a, m]);
 }
-function H(a) {
+function $(a) {
   const r = { ...a };
   return Object.keys(r).forEach((n) => {
-    const v = z[n];
-    v && (v.key in r || (r[v.key] = r[n]), delete r[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: v, className: d, style: g } = a, y = Q(a, m === "svg"), x = E(() => W.classNames(d, y).join(" "), [a]), f = { ...v, className: x };
+  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)), F.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);

package/components/textarea.mjs

@@ -1,9 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
 import n from "./dox.mjs";
-import { O as s } from "../utils/utils.mjs";
+import { O as m } from "../utils/utils.mjs";
 import "../theme.mjs";
-const m = [
+const s = [
   "name",
   "onInput",
   "onChange",
@@ -19,11 +19,8 @@ const m = [
   "readOnly",
   "required"
 ];
-function p(t, e) {
-  const o = s.buildProps(t, m);
-  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", ...o });
+function i(o, e) {
+  const r = m.buildProps(o, s);
+  return /* @__PURE__ */ t(n, { ref: e, tag: "textarea", component: "textarea", ...r });
 }
-const f = a(p);
-export {
-  f as default
-};
+a(i);

package/components/textbox.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"),a=require("../utils/utils.cjs");require("../theme.cjs");const s=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(e,t){const o=a.ObjectUtils.buildProps(e,s);return r.jsx(u.default,{ref:t,tag:"input",component:"textbox",...o})}const c=n.forwardRef(i);exports.default=c;
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),u=require("./dox.cjs"),s=require("../utils/utils.cjs");require("../theme.cjs");const a=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(e,t){const r=s.ObjectUtils.buildProps(e,a);return n.jsx(u.default,{ref:t,tag:"input",component:"textbox",...r})}o.forwardRef(i);

package/components/textbox.mjs

@@ -1,9 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import a from "./dox.mjs";
 import { O as p } from "../utils/utils.mjs";
 import "../theme.mjs";
-const s = [
+const i = [
   "name",
   "onInput",
   "onChange",
@@ -17,11 +17,8 @@ const s = [
   "value",
   "pattern"
 ];
-function u(o, t) {
-  const e = p.buildProps(o, s);
-  return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
+function m(o, t) {
+  const r = p.buildProps(o, i);
+  return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "textbox", ...r });
 }
-const x = n(u);
-export {
-  x as default
-};
+n(m);

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("react-dom"),d=require("./dox.cjs"),s=require("react"),h=require("../utils/utils.cjs");require("../theme.cjs");const l=2;function x(f){const{onPositionChange:u}=f,i=s.useRef(null),[e,p]=s.useState(),w=h.usePortalContainer(),m=s.useCallback((n,t)=>{const r=o=>{o.target.contains(n)&&t(n)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[e]),v=s.useCallback((n,t)=>{const r=o=>{t(n)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[e]),a=s.useCallback(n=>{const t=n.getBoundingClientRect(),r=Math.round((t.top+window.scrollY)*l)/l,o=Math.round((t.left+window.scrollX)*l)/l;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==o)&&(u==null||u({top:r,left:o}),p({top:r,left:o,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=m(i.current,a),t=v(i.current,a);return()=>{n(),t()}}},[e]),c.jsxs(c.Fragment,{children:[c.jsx(d.default,{ref:i}),e&&b.createPortal(c.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:c.jsx(d.default,{position:"absolute",width:"fit",...f})}),w)]})}exports.default=x;
+"use strict";require("react/jsx-runtime");require("react-dom");require("./dox.cjs");require("react");require("../utils/utils.cjs");require("../theme.cjs");

package/components/tooltip.d.ts

@@ -6,5 +6,5 @@ interface Props extends React.ComponentProps<typeof Box> {
         left: number;
     }): void;
 }
-export default function Tooltip(props: Props): JSX.Element;
+export default function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};