@cronocode/react-box 3.0.13 → 3.0.15

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),L=require("./textbox.cjs"),G=require("./flex.cjs"),Q=require("../core.cjs"),X=require("./baseSvg.cjs"),Z=require("./tooltip.cjs"),K=require("./button.cjs");function ee(i,m){const{name:p,defaultValue:g,value:y,multiple:u,isSearchable:w,searchPlaceholder:B,children:A,hideArrow:H,onChange:s,...Y}=i,[J,j]=n.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in i?Array.isArray(y)?y:y?[y]:[]:J,[D,R]=n.useState(""),[a,U,b]=Q.useVisibility(),q=n.useRef(null),T=n.useRef(null),[V,W]=n.useState(0),I=n.useMemo(()=>V>window.innerHeight/2,[V]),$=n.useMemo(()=>{var e;return I?((e=b.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[I,b]),l=n.useMemo(()=>(Array.isArray(A)?A:[A]).flatMap(e=>e),[A]),_=n.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=n.useMemo(()=>_.filter(e=>w&&D?P(e).toLowerCase().includes(D.toLowerCase()):!0),[w,D,l]),v=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),O=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),N=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),C=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),z=n.useMemo(()=>{if(C)return C.props.children(c,a);const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>P(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:v==null?void 0:v.props.children)},[u,f,c,v,a]),k=n.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(M=>M!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=q.current)==null?void 0:o.focus()},0)):(U(!1),setTimeout(()=>{var o;return(o=b.current)==null?void 0:o.focus()},0))},[u,c,j]);n.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=q.current)==null||e.focus(),(o=(t=T.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):R("")},[a]);const E=O&&u&&f.length>c.length,F=v&&f.length>0&&!E;return r.jsxs(h,{width:"fit-content",children:[c.map(e=>r.jsx(L,{ref:m,name:p,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),r.jsxs(K,{ref:b,type:"button",component:"dropdown",onClick:()=>U(e=>!e),props:{tabIndex:0},...Y,children:[w&&r.jsx(L,{display:a&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:D,onChange:e=>R(e.target.value),ref:q,props:{onClick:e=>{a&&w&&e.stopPropagation()}}}),r.jsx(G,{component:"dropdown.display",display:a&&w?"none":"flex",children:z}),!H&&r.jsx(h,{children:r.jsx(X,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&r.jsx(Z,{ref:T,top:I?void 0:0,bottom:I?2:void 0,style:{transform:`translateY(-${$}px)`},onPositionChange:e=>W(e.top-window.scrollY),children:(f.length>0||N)&&r.jsxs(h,{component:"dropdown.items",children:[F&&r.jsx(h,{component:"dropdown.unselect",selected:c.length===0,...v.props,props:{onClick:e=>k(e)}}),E&&r.jsx(h,{component:"dropdown.selectAll",...O.props,props:{onClick:e=>k(e,..._)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return r.jsx(h,{component:"dropdown.item",variant:u?"multiple":void 0,selected:c.includes(t),...d,props:{onClick:M=>{o==null||o(M),k(M,e)}}},t)}),f.length===0&&N&&r.jsx(h,{component:"dropdown.emptyItem",...N.props})]})})]})}function S(i){const m=p=>null;return m.displayName=i,m}const x=n.forwardRef(ee);x.Item=S("DropdownItem");x.Unselect=S("DropdownUnselect");x.SelectAll=S("DropdownSelectAll");x.EmptyItem=S("DropdownEmptyItem");x.Display=S("DropdownDisplay");function P(i){var m;if(i==null)return"";if(typeof i=="object"){const p=(m=i.props)==null?void 0:m.children;return p==null?"":typeof p=="object"?(Array.isArray(p)?p:[p]).map(y=>P(y)).join(""):p.toString()}return i.toString()}module.exports=x;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),h=require("../box.cjs"),L=require("./textbox.cjs"),G=require("./flex.cjs"),Q=require("../core.cjs"),X=require("./baseSvg.cjs"),Z=require("./tooltip.cjs"),K=require("./button.cjs");function ee(i,m){const{name:p,defaultValue:g,value:y,multiple:u,isSearchable:w,searchPlaceholder:B,children:D,hideIcon:H,onChange:s,...Y}=i,[J,j]=n.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in i?Array.isArray(y)?y:y?[y]:[]:J,[I,U]=n.useState(""),[a,T,b]=Q.useVisibility(),N=n.useRef(null),V=n.useRef(null),[_,F]=n.useState(0),A=n.useMemo(()=>_>window.innerHeight/2,[_]),W=n.useMemo(()=>{var e;return A?((e=b.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[A,b]),l=n.useMemo(()=>(Array.isArray(D)?D:[D]).flatMap(e=>e),[D]),O=n.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=n.useMemo(()=>O.filter(e=>w&&I?R(e).toLowerCase().includes(I.toLowerCase()):!0),[w,I,l]),x=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),C=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),k=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),M=n.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),$=n.useMemo(()=>{if(M)return typeof M.props.children=="function"?M.props.children(c,a):M.props.children;const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>R(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:x==null?void 0:x.props.children)},[u,f,c,x,a]),P=n.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(q=>q!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=N.current)==null?void 0:o.focus()},0)):(T(!1),setTimeout(()=>{var o;return(o=b.current)==null?void 0:o.focus()},0))},[u,c,j]);n.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=N.current)==null||e.focus(),(o=(t=V.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):U("")},[a]);const E=C&&u&&f.length>c.length,z=x&&f.length>0&&!E;return r.jsxs(h,{width:"fit-content",children:[c.map(e=>r.jsx(L,{ref:m,name:p,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),r.jsxs(K,{ref:b,type:"button",component:"dropdown",onClick:()=>T(e=>!e),props:{tabIndex:0},...Y,children:[w&&r.jsx(L,{display:a&&w?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:I,onChange:e=>U(e.target.value),ref:N,props:{onClick:e=>{a&&w&&e.stopPropagation()}}}),r.jsx(G,{component:"dropdown.display",display:a&&w?"none":"flex",children:$??r.jsx(r.Fragment,{children:" "})}),!H&&r.jsx(h,{children:r.jsx(X,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&r.jsx(Z,{ref:V,top:A?void 0:0,bottom:A?2:void 0,style:{transform:`translateY(-${W}px)`},onPositionChange:e=>F(e.top-window.scrollY),children:(f.length>0||k)&&r.jsxs(h,{component:"dropdown.items",children:[z&&r.jsx(h,{component:"dropdown.unselect",selected:c.length===0,...x.props,props:{onClick:e=>P(e)}}),E&&r.jsx(h,{component:"dropdown.selectAll",...C.props,props:{onClick:e=>P(e,...O)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return r.jsx(h,{component:"dropdown.item",variant:u?"multiple":void 0,selected:c.includes(t),...d,props:{onClick:q=>{o==null||o(q),P(q,e)}}},t)}),f.length===0&&k&&r.jsx(h,{component:"dropdown.emptyItem",...k.props})]})})]})}function S(i){const m=p=>null;return m.displayName=i,m}const v=n.forwardRef(ee);v.Item=S("DropdownItem");v.Unselect=S("DropdownUnselect");v.SelectAll=S("DropdownSelectAll");v.EmptyItem=S("DropdownEmptyItem");v.Display=S("DropdownDisplay");function R(i){var m;if(i==null)return"";if(typeof i=="object"){const p=(m=i.props)==null?void 0:m.children;return p==null?"":typeof p=="object"?(Array.isArray(p)?p:[p]).map(y=>R(y)).join(""):p.toString()}return i.toString()}module.exports=v;

package/components/dropdown.d.ts

@@ -7,7 +7,7 @@ interface Props<TVal> extends BoxProps<'button'> {
     multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
-    hideArrow?: boolean;
+    hideIcon?: boolean;
     onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
 }
 interface DropdownItemProps<TVal> extends BoxProps {
@@ -15,7 +15,7 @@ interface DropdownItemProps<TVal> extends BoxProps {
     onClick?(e: React.MouseEvent): void;
 }
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
-    children: (selectedValues: TVal[], isOpen: boolean) => React.ReactNode;
+    children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
 }
 interface DropdownType {
     <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;

package/components/dropdown.mjs

@@ -1,42 +1,43 @@
-import { jsxs as U, jsx as l } from "react/jsx-runtime";
-import { forwardRef as Z, useState as B, useRef as M, useMemo as c, useCallback as K, useEffect as ee } from "react";
+import { jsxs as B, jsx as n, Fragment as Z } from "react/jsx-runtime";
+import { forwardRef as K, useState as V, useRef as J, useMemo as c, useCallback as ee, useEffect as te } from "react";
 import h from "../box.mjs";
-import q from "./textbox.mjs";
-import te from "./flex.mjs";
-import { b as oe } from "../core.mjs";
-import re from "./baseSvg.mjs";
-import ne from "./tooltip.mjs";
-import le from "./button.mjs";
-function se(s, m) {
-  const { name: p, defaultValue: g, value: y, multiple: a, isSearchable: w, searchPlaceholder: F, children: S, hideArrow: W, onChange: r, ..._ } = s, [$, x] = B(Array.isArray(g) ? g : g ? [g] : []), i = "value" in s ? Array.isArray(y) ? y : y ? [y] : [] : $, [I, O] = B(""), [d, R, b] = oe(), P = M(null), C = M(null), [E, z] = B(0), N = c(() => E > window.innerHeight / 2, [E]), G = c(() => {
+import M from "./textbox.mjs";
+import oe from "./flex.mjs";
+import { b as re } from "../core.mjs";
+import ne from "./baseSvg.mjs";
+import le from "./tooltip.mjs";
+import se from "./button.mjs";
+function pe(s, m) {
+  const { name: p, defaultValue: g, value: y, multiple: a, isSearchable: w, searchPlaceholder: q, children: S, hideIcon: W, onChange: r, ..._ } = s, [$, x] = V(Array.isArray(g) ? g : g ? [g] : []), i = "value" in s ? Array.isArray(y) ? y : y ? [y] : [] : $, [A, R] = V(""), [d, C, b] = re(), T = J(null), E = J(null), [L, z] = V(0), N = c(() => L > window.innerHeight / 2, [L]), G = c(() => {
     var e;
     return N ? ((e = b.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
-  }, [N, b]), n = c(
+  }, [N, b]), l = c(
     () => (Array.isArray(S) ? S : [S]).flatMap((e) => e),
     [S]
-  ), L = c(() => n.filter((e) => {
+  ), H = c(() => l.filter((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownItem";
-  }), [n]), f = c(() => L.filter((e) => w && I ? V(e).toLowerCase().includes(I.toLowerCase()) : !0), [w, I, n]), v = c(() => n.find((e) => {
+  }), [l]), f = c(() => H.filter((e) => w && A ? O(e).toLowerCase().includes(A.toLowerCase()) : !0), [w, A, l]), v = c(() => l.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownUnselect";
-  }), [n]), H = c(() => n.find((e) => {
+  }), [l]), Y = c(() => l.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownSelectAll";
-  }), [n]), T = c(() => n.find((e) => {
+  }), [l]), j = c(() => l.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownEmptyItem";
-  }), [n]), Y = c(() => n.find((e) => {
+  }), [l]), k = c(() => l.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownDisplay";
-  }), [n]), Q = c(() => {
-    if (Y) return Y.props.children(i, d);
+  }), [l]), Q = c(() => {
+    if (k)
+      return typeof k.props.children == "function" ? k.props.children(i, d) : k.props.children;
     const e = f.filter((o) => i.includes(o.props.value));
     if (a && e.length > 1)
-      return e.map((o) => V(o)).join(", ");
+      return e.map((o) => O(o)).join(", ");
     const t = e.at(0);
     return (t == null ? void 0 : t.props.children) ?? (t == null ? void 0 : t.props.value) ?? (a ? null : v == null ? void 0 : v.props.children);
-  }, [a, f, i, v, d]), j = K(
+  }, [a, f, i, v, d]), U = ee(
     (e, ...t) => {
       if (t.length === 0)
         x([]), r == null || r(void 0, []);
@@ -46,52 +47,52 @@ function se(s, m) {
       } else if (t.length === 1) {
         const o = t[0];
         if (a) {
-          const u = i.filter((k) => k !== o.props.value);
+          const u = i.filter((P) => P !== o.props.value);
           u.length === i.length && u.push(o.props.value), x(u), r == null || r(o.props.value, u);
         } else
           x([o.props.value]), r == null || r(o.props.value, [o.props.value]);
       }
       a ? (e.stopPropagation(), setTimeout(() => {
         var o;
-        return (o = P.current) == null ? void 0 : o.focus();
-      }, 0)) : (R(!1), setTimeout(() => {
+        return (o = T.current) == null ? void 0 : o.focus();
+      }, 0)) : (C(!1), setTimeout(() => {
         var o;
         return (o = b.current) == null ? void 0 : o.focus();
       }, 0));
     },
     [a, i, x]
   );
-  ee(() => {
+  te(() => {
     d ? setTimeout(() => {
       var e, t, o;
-      (e = P.current) == null || e.focus(), (o = (t = C.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || o.scrollIntoView({ block: "nearest" });
-    }, 0) : O("");
+      (e = T.current) == null || e.focus(), (o = (t = E.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || o.scrollIntoView({ block: "nearest" });
+    }, 0) : R("");
   }, [d]);
-  const J = H && a && f.length > i.length, X = v && f.length > 0 && !J;
-  return /* @__PURE__ */ U(h, { width: "fit-content", children: [
-    i.map((e) => /* @__PURE__ */ l(q, { ref: m, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
-    /* @__PURE__ */ U(
-      le,
+  const F = Y && a && f.length > i.length, X = v && f.length > 0 && !F;
+  return /* @__PURE__ */ B(h, { width: "fit-content", children: [
+    i.map((e) => /* @__PURE__ */ n(M, { ref: m, name: p, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
+    /* @__PURE__ */ B(
+      se,
       {
         ref: b,
         type: "button",
         component: "dropdown",
-        onClick: () => R((e) => !e),
+        onClick: () => C((e) => !e),
         props: { tabIndex: 0 },
         ..._,
         children: [
-          w && /* @__PURE__ */ l(
-            q,
+          w && /* @__PURE__ */ n(
+            M,
             {
               display: d && w ? "block" : "none",
               clean: !0,
               flex1: !0,
               width: 1,
               minHeight: 5,
-              placeholder: F,
-              value: I,
-              onChange: (e) => O(e.target.value),
-              ref: P,
+              placeholder: q,
+              value: A,
+              onChange: (e) => R(e.target.value),
+              ref: T,
               props: {
                 onClick: (e) => {
                   d && w && e.stopPropagation();
@@ -99,33 +100,33 @@ function se(s, m) {
               }
             }
           ),
-          /* @__PURE__ */ l(te, { component: "dropdown.display", display: d && w ? "none" : "flex", children: Q }),
-          !W && /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l(re, { viewBox: "0 0 10 6", width: "0.6rem", rotate: d ? 180 : 0, children: /* @__PURE__ */ l("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
+          /* @__PURE__ */ n(oe, { component: "dropdown.display", display: d && w ? "none" : "flex", children: Q ?? /* @__PURE__ */ n(Z, { children: " " }) }),
+          !W && /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(ne, { viewBox: "0 0 10 6", width: "0.6rem", rotate: d ? 180 : 0, children: /* @__PURE__ */ n("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
         ]
       }
     ),
-    d && /* @__PURE__ */ l(
-      ne,
+    d && /* @__PURE__ */ n(
+      le,
       {
-        ref: C,
+        ref: E,
         top: N ? void 0 : 0,
         bottom: N ? 2 : void 0,
         style: { transform: `translateY(-${G}px)` },
         onPositionChange: (e) => z(e.top - window.scrollY),
-        children: (f.length > 0 || T) && /* @__PURE__ */ U(h, { component: "dropdown.items", children: [
-          X && /* @__PURE__ */ l(
+        children: (f.length > 0 || j) && /* @__PURE__ */ B(h, { component: "dropdown.items", children: [
+          X && /* @__PURE__ */ n(
             h,
             {
               component: "dropdown.unselect",
               selected: i.length === 0,
               ...v.props,
-              props: { onClick: (e) => j(e) }
+              props: { onClick: (e) => U(e) }
             }
           ),
-          J && /* @__PURE__ */ l(h, { component: "dropdown.selectAll", ...H.props, props: { onClick: (e) => j(e, ...L) } }),
+          F && /* @__PURE__ */ n(h, { component: "dropdown.selectAll", ...Y.props, props: { onClick: (e) => U(e, ...H) } }),
           f.map((e) => {
             const { value: t, onClick: o, ...u } = e.props;
-            return /* @__PURE__ */ l(
+            return /* @__PURE__ */ n(
               h,
               {
                 component: "dropdown.item",
@@ -133,39 +134,39 @@ function se(s, m) {
                 selected: i.includes(t),
                 ...u,
                 props: {
-                  onClick: (k) => {
-                    o == null || o(k), j(k, e);
+                  onClick: (P) => {
+                    o == null || o(P), U(P, e);
                   }
                 }
               },
               t
             );
           }),
-          f.length === 0 && T && /* @__PURE__ */ l(h, { component: "dropdown.emptyItem", ...T.props })
+          f.length === 0 && j && /* @__PURE__ */ n(h, { component: "dropdown.emptyItem", ...j.props })
         ] })
       }
     )
   ] });
 }
-function A(s) {
+function D(s) {
   const m = (p) => null;
   return m.displayName = s, m;
 }
-const D = Z(se);
-D.Item = A("DropdownItem");
-D.Unselect = A("DropdownUnselect");
-D.SelectAll = A("DropdownSelectAll");
-D.EmptyItem = A("DropdownEmptyItem");
-D.Display = A("DropdownDisplay");
-function V(s) {
+const I = K(pe);
+I.Item = D("DropdownItem");
+I.Unselect = D("DropdownUnselect");
+I.SelectAll = D("DropdownSelectAll");
+I.EmptyItem = D("DropdownEmptyItem");
+I.Display = D("DropdownDisplay");
+function O(s) {
   var m;
   if (s == null) return "";
   if (typeof s == "object") {
     const p = (m = s.props) == null ? void 0 : m.children;
-    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((y) => V(y)).join("") : p.toString();
+    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((y) => O(y)).join("") : p.toString();
   }
   return s.toString();
 }
 export {
-  D as default
+  I as default
 };

package/components/form.mjs

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

package/components/semantics.d.ts

@@ -3,29 +3,29 @@ import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
 import { ComponentsAndVariants } from '../types';
 type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants = never> = (props: Omit<BoxProps<TTag, TKey>, 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
-export declare const Label: SemanticComponentType<"label", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Span: SemanticComponentType<"span", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Article: SemanticComponentType<"article", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Aside: SemanticComponentType<"aside", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Details: SemanticComponentType<"details", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Figure: SemanticComponentType<"figure", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Footer: SemanticComponentType<"footer", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Header: SemanticComponentType<"header", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Main: SemanticComponentType<"main", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Mark: SemanticComponentType<"mark", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Nav: SemanticComponentType<"nav", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Menu: SemanticComponentType<"menu", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Section: SemanticComponentType<"section", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Summary: SemanticComponentType<"summary", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Time: SemanticComponentType<"time", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const P: SemanticComponentType<"p", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H1: SemanticComponentType<"h1", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H2: SemanticComponentType<"h2", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H3: SemanticComponentType<"h3", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H4: SemanticComponentType<"h4", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H5: SemanticComponentType<"h5", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const H6: SemanticComponentType<"h6", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Link: SemanticComponentType<"a", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Img: SemanticComponentType<"img", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Label: SemanticComponentType<"label", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Span: SemanticComponentType<"span", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Article: SemanticComponentType<"article", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Aside: SemanticComponentType<"aside", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Details: SemanticComponentType<"details", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Figure: SemanticComponentType<"figure", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Footer: SemanticComponentType<"footer", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Header: SemanticComponentType<"header", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Main: SemanticComponentType<"main", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Mark: SemanticComponentType<"mark", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Nav: SemanticComponentType<"nav", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Menu: SemanticComponentType<"menu", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Section: SemanticComponentType<"section", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Summary: SemanticComponentType<"summary", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Time: SemanticComponentType<"time", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const P: SemanticComponentType<"p", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H1: SemanticComponentType<"h1", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H2: SemanticComponentType<"h2", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H3: SemanticComponentType<"h3", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H4: SemanticComponentType<"h4", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H5: SemanticComponentType<"h5", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H6: SemanticComponentType<"h6", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Link: SemanticComponentType<"a", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Img: SemanticComponentType<"img", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
 export {};

package/components/tooltip.cjs

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

package/components/tooltip.mjs

@@ -1,65 +1,61 @@
-import { jsxs as x, Fragment as b, jsx as a } from "react/jsx-runtime";
-import { createPortal as E } from "react-dom";
+import { jsxs as x, Fragment as C, jsx as a } from "react/jsx-runtime";
+import { createPortal as v } from "react-dom";
 import u from "../box.mjs";
-import { forwardRef as L, useRef as R, useState as g, useCallback as d, useLayoutEffect as z } from "react";
-import { d as C } from "../core.mjs";
+import { forwardRef as R, useRef as z, useState as A, useCallback as f, useLayoutEffect as D } from "react";
+import { f as E } from "../core.mjs";
 const i = 2;
-function D(f, p) {
-  const { onPositionChange: c } = f, s = R(null), [t, m] = g(), w = C(), h = d(
-    (o, e) => {
-      const r = (n) => {
-        n.target.contains(o) && e(o);
-      };
-      return document.addEventListener("scroll", r, { capture: !0 }), () => {
-        document.removeEventListener("scroll", r, { capture: !0 });
-      };
+function H(d, w) {
+  const { onPositionChange: l } = d, s = z(null), [t, m] = A(), b = E(), h = f(
+    (e, o) => {
+      const n = (p) => {
+        p.target.contains(e) && o(e);
+      }, r = new AbortController();
+      return document.addEventListener("scroll", n, { signal: r.signal, capture: !0 }), () => r.abort();
     },
     [t]
-  ), v = d(
-    (o, e) => {
-      const r = (n) => {
-        e(o);
-      };
-      return window.addEventListener("resize", r, { capture: !0 }), () => {
-        window.removeEventListener("resize", r, { capture: !0 });
-      };
+  ), g = f(
+    (e, o) => {
+      const n = (p) => {
+        o(e);
+      }, r = new AbortController();
+      return window.addEventListener("resize", n, { signal: r.signal, capture: !0 }), () => r.abort();
     },
     [t]
-  ), l = d(
-    (o) => {
-      const e = o.getBoundingClientRect(), r = Math.round((e.top + window.scrollY) * i) / i, n = Math.round((e.left + window.scrollX) * i) / i;
-      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), m({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
+  ), c = f(
+    (e) => {
+      const o = e.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, r = Math.round((o.left + window.scrollX) * i) / i;
+      ((t == null ? void 0 : t.top) !== n || (t == null ? void 0 : t.left) !== r) && (l == null || l({ top: n, left: r }), m({ top: n, left: r, width: o.width > 0 ? o.width : void 0 }));
     },
     [t]
   );
-  return z(() => {
+  return D(() => {
     if (s.current) {
-      l(s.current);
-      const o = h(s.current, l), e = v(s.current, l);
+      c(s.current);
+      const e = h(s.current, c), o = g(s.current, c);
       return () => {
-        o(), e();
+        e(), o();
       };
     }
-  }, [t]), /* @__PURE__ */ x(b, { children: [
+  }, [t]), /* @__PURE__ */ x(C, { children: [
     /* @__PURE__ */ a(u, { ref: s }),
-    t && E(
+    t && v(
       /* @__PURE__ */ a(
         u,
         {
-          ref: p,
+          ref: w,
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
           style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
-          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
+          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...d })
         }
       ),
-      w
+      b
     )
   ] });
 }
-const M = L(D);
+const M = R(H);
 export {
   M as default
 };

package/core/boxConstants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_REM_DIVIDER = 4;