@cronocode/react-box 3.0.21 → 3.1.1

package/components/dropdown.cjs

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

package/components/dropdown.mjs

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

package/components/flex.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),l=require("react"),o=require("../box.cjs");function x(r,s){const{inline:t,...n}=r;return i.jsx(o.default,{ref:s,display:t?"inline-flex":"flex",...n})}const e=l.forwardRef(x);e.displayName="Flex";module.exports=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),s=require("react"),o=require("../box.cjs");function u(t,l){const{inline:r,...i}=t;return n.jsx(o.default,{ref:l,display:r?"inline-flex":"flex",...i})}const e=s.forwardRef(u);e.displayName="Flex";exports.default=e;

package/components/form.cjs

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

package/components/form.mjs

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as i, useCallback as p } from "react";
 import u from "../box.mjs";
-import { e as l } from "../core.mjs";
+import { d as l } from "../core.mjs";
 function c(o) {
   const { onSubmit: r, props: e } = o, t = i(null), n = p(
     (m) => {

package/components/grid.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),o=require("react"),d=require("../box.cjs");function c(e,i){const{inline:s,...t}=e;return n.jsx(d.default,{ref:i,display:s?"inline-grid":"grid",...t})}const r=o.forwardRef(c);r.displayName="Grid";module.exports=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),u=require("../box.cjs");function d(r,i){const{inline:t,...n}=r;return s.jsx(u.default,{ref:i,display:t?"inline-grid":"grid",...n})}const e=o.forwardRef(d);e.displayName="Grid";exports.default=e;

package/components/radioButton.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),r=require("react"),u=require("../box.cjs"),a=require("../core.cjs"),s=["name","onInput","onChange","value","autoFocus","readOnly","defaultChecked"];function i(o,c){const e=a.ObjectUtils.buildProps(o,s,{type:"radio"});return n.jsx(u.default,{tag:"input",component:"radioButton",...e})}const t=r.forwardRef(i);t.displayName="RadioButton";module.exports=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),r=require("react"),a=require("../box.cjs"),i=require("../core.cjs"),s=["name","onInput","onChange","value","autoFocus","readOnly","defaultChecked"];function c(t,o){const n=i.ObjectUtils.buildProps(t,s,{type:"radio"});return u.jsx(a.default,{ref:o,tag:"input",component:"radioButton",...n})}const e=r.forwardRef(c);e.displayName="RadioButton";exports.default=e;

package/components/radioButton.mjs

@@ -1,14 +1,14 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import a from "../box.mjs";
-import { O as e } from "../core.mjs";
-const i = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
-function p(o, d) {
-  const t = e.buildProps(o, i, { type: "radio" });
-  return /* @__PURE__ */ n(a, { tag: "input", component: "radioButton", ...t });
+import e from "../box.mjs";
+import { O as i } from "../core.mjs";
+const p = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
+function u(o, t) {
+  const n = i.buildProps(o, p, { type: "radio" });
+  return /* @__PURE__ */ a(e, { ref: t, tag: "input", component: "radioButton", ...n });
 }
-const u = r(p);
-u.displayName = "RadioButton";
+const d = r(u);
+d.displayName = "RadioButton";
 export {
-  u as default
+  d 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" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
-export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Label: SemanticComponentType<"label", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.cell" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
 export {};