@cfx-dev/ui-components 4.2.23 → 4.3.0

package/dist/index-HDl8nGsm.js

@@ -0,0 +1,70 @@
+import * as a from "react";
+import { u as T, a as A } from "./index-BHuChyf5.js";
+function E(n, e) {
+  return a.useReducer((r, t) => e[r][t] ?? r, n);
+}
+var R = (n) => {
+  const { present: e, children: r } = n, t = P(e), o = typeof r == "function" ? r({ present: t.isPresent }) : a.Children.only(r), c = T(t.ref, v(o));
+  return typeof r == "function" || t.isPresent ? a.cloneElement(o, { ref: c }) : null;
+};
+R.displayName = "Presence";
+function P(n) {
+  const [e, r] = a.useState(), t = a.useRef(null), o = a.useRef(n), c = a.useRef("none"), p = n ? "mounted" : "unmounted", [N, s] = E(p, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  return a.useEffect(() => {
+    const i = l(t.current);
+    c.current = N === "mounted" ? i : "none";
+  }, [N]), A(() => {
+    const i = t.current, m = o.current;
+    if (m !== n) {
+      const f = c.current, u = l(i);
+      n ? s("MOUNT") : u === "none" || (i == null ? void 0 : i.display) === "none" ? s("UNMOUNT") : s(m && f !== u ? "ANIMATION_OUT" : "UNMOUNT"), o.current = n;
+    }
+  }, [n, s]), A(() => {
+    if (e) {
+      let i;
+      const m = e.ownerDocument.defaultView ?? window, d = (u) => {
+        const g = l(t.current).includes(u.animationName);
+        if (u.target === e && g && (s("ANIMATION_END"), !o.current)) {
+          const O = e.style.animationFillMode;
+          e.style.animationFillMode = "forwards", i = m.setTimeout(() => {
+            e.style.animationFillMode === "forwards" && (e.style.animationFillMode = O);
+          });
+        }
+      }, f = (u) => {
+        u.target === e && (c.current = l(t.current));
+      };
+      return e.addEventListener("animationstart", f), e.addEventListener("animationcancel", d), e.addEventListener("animationend", d), () => {
+        m.clearTimeout(i), e.removeEventListener("animationstart", f), e.removeEventListener("animationcancel", d), e.removeEventListener("animationend", d);
+      };
+    } else
+      s("ANIMATION_END");
+  }, [e, s]), {
+    isPresent: ["mounted", "unmountSuspended"].includes(N),
+    ref: a.useCallback((i) => {
+      t.current = i ? getComputedStyle(i) : null, r(i);
+    }, [])
+  };
+}
+function l(n) {
+  return (n == null ? void 0 : n.animationName) || "none";
+}
+function v(n) {
+  var t, o;
+  let e = (t = Object.getOwnPropertyDescriptor(n.props, "ref")) == null ? void 0 : t.get, r = e && "isReactWarning" in e && e.isReactWarning;
+  return r ? n.ref : (e = (o = Object.getOwnPropertyDescriptor(n, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? n.props.ref : n.props.ref || n.ref);
+}
+export {
+  R as P
+};

package/dist/main.d.ts

@@ -7,7 +7,7 @@ export type { OutletPosition, UseClipboardProps, } from './utils/hooks';
 export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
 export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';
 export type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
-export { clamp01, clamp, } from './utils/math';
+export { clamp01, clamp, minmax, } from './utils/math';
 export { unicodeCharAt, splitByIndices, replaceRange, normalizeSlashes, isTrueString, isFalseString, } from './utils/string';
 export { debounce, throttle, } from './utils/execution';
 export type { SetTimeoutReturn } from './utils/execution';
@@ -64,12 +64,12 @@ export { Interactive } from './components/Interactive';
 export type { InteractiveProps } from './components/Interactive';
 export { Island, IslandCorner } from './components/Island';
 export type { IslandProps } from './components/Island';
-export { Box, flexPropFormater } from './components/Layout/Box';
+export { Box, stringPropFormater } from './components/Layout/Box';
 export type { BoxProps } from './components/Layout/Box';
 export { Center } from './components/Layout/Center';
 export type { CenterProps } from './components/Layout/Center';
 export { Flex, FlexRestricter, FlexAlignItemsEnum, FlexDirectionEnum, FlexJustifyContentEnum, FlexWrapEnum, } from './components/Layout/Flex';
-export type { FlexType, FlexProps, FlexRestricterProps, FlexAlignItemsType, FlexDirectionType, FlexJustifyContentType, FlexWrapType, } from './components/Layout/Flex';
+export type { FlexProps, FlexRestricterProps, FlexAlignItemsType, FlexDirectionType, FlexJustifyContentType, FlexWrapType, } from './components/Layout/Flex';
 export { Pad } from './components/Layout/Pad';
 export type { PadProps } from './components/Layout/Pad';
 export { Page } from './components/Layout/Page';
@@ -112,8 +112,10 @@ export { ToggleGroup } from './components/ToggleGroup';
 export type { ToggleGroupOption, ToggleGroupProps } from './components/ToggleGroup';
 export { Tabular } from './components/Tabular';
 export type { TabularProps, TabularItem, TabularRootProps, } from './components/Tabular';
-export { Table, TableIconButton, TableHeaderItem, TableRow, } from './components/Table';
-export type { TableHeaderType, TableProps, TableRowType, TableDataContainerType, TableHeaderItemProps, TableRowProps, } from './components/Table';
+export { DataTable, DataTableHeaderItem, DataTableRow, } from './components/DataTable';
+export type { DataTableHeaderType, DataTableProps, DataTableRowType, DataTableContainerType, DataTableHeaderItemProps, DataTableRowProps, } from './components/DataTable';
+export { Table } from './components/Table';
+export type { TableRootProps, TableBodyProps, TableHeaderProps, TableCellProps, TableRowProps, } from './components/Table';
 export { TextSizeEnum, Text, TextBlock, getTextOpacity, DEFAULT_TEXT_COLOR, TEXT_OPACITY_MAP, textSizeResponsiveValueFormatter, } from './components/Text';
 export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, TextFamaly, } from './components/Text';
 export { Textarea } from './components/Textarea';

package/dist/main.js

@@ -1,6 +1,6 @@
 import { mergeRefs as e } from "./utils/mergeRefs.js";
-import { clsx as m } from "./utils/clsx.js";
-import { getValue as p } from "./utils/getValue.js";
+import { clsx as a } from "./utils/clsx.js";
+import { getValue as f } from "./utils/getValue.js";
 import { usePopoverController as x } from "./utils/hooks/usePopoverController.js";
 import { useInstance as l } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
@@ -9,213 +9,215 @@ import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
 import { useWindowResize as C } from "./utils/hooks/useWindowResize.js";
 import { useOutlet as E } from "./utils/hooks/useOutlet.js";
 import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
-import { identity as R, invoke as k, noop as A, returnFalse as O, returnTrue as P } from "./utils/functional.js";
-import { Linkify as D, defaultLinkReplacer as F, defaultLinkReplacerx as _, isExternalUrl as v, linkify as h, linkifyx as U, matchLinkNodes as z, matchLinks as w } from "./utils/links.js";
-import { clamp as N, clamp01 as G } from "./utils/math.js";
-import { isFalseString as K, isTrueString as Y, normalizeSlashes as H, replaceRange as W, splitByIndices as X, unicodeCharAt as J } from "./utils/string.js";
-import { debounce as Z, throttle as j } from "./utils/execution.js";
-import { getColor as $ } from "./utils/color.js";
-import { ui as ro } from "./utils/ui/ui.js";
-import { BorderRadiusEnum as to, ColorEnum as mo, MediaQueryEnum as fo, OffsetEnum as po, TextSizeEnum as ao, ZIndexEnum as xo } from "./utils/ui/ui.types.js";
-import { isInEnum as lo } from "./utils/enum.js";
-import { default as so } from "./components/IconButton/IconButton.js";
-import { Accordion as co, AccordionContent as To, AccordionHeader as Io, AccordionItem as Co, AccordionTrigger as Bo } from "./components/Accordion/Accordion.js";
-import { default as go } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as So } from "./components/Checkbox/Checkbox.js";
-import { Button as Ro, ButtonContent as ko, getButtonClassName as Ao } from "./components/Button/Button.js";
+import { identity as R, invoke as k, noop as A, returnFalse as D, returnTrue as O } from "./utils/functional.js";
+import { Linkify as b, defaultLinkReplacer as F, defaultLinkReplacerx as _, isExternalUrl as v, linkify as h, linkifyx as U, matchLinkNodes as z, matchLinks as w } from "./utils/links.js";
+import { clamp as N, clamp01 as G, minmax as V } from "./utils/math.js";
+import { isFalseString as Y, isTrueString as H, normalizeSlashes as W, replaceRange as X, splitByIndices as J, unicodeCharAt as Q } from "./utils/string.js";
+import { debounce as j, throttle as q } from "./utils/execution.js";
+import { getColor as oo } from "./utils/color.js";
+import { ui as eo } from "./utils/ui/ui.js";
+import { BorderRadiusEnum as ao, ColorEnum as mo, MediaQueryEnum as fo, OffsetEnum as po, TextSizeEnum as xo, ZIndexEnum as no } from "./utils/ui/ui.types.js";
+import { isInEnum as uo } from "./utils/enum.js";
+import { default as io } from "./components/IconButton/IconButton.js";
+import { Accordion as To, AccordionContent as Io, AccordionHeader as Co, AccordionItem as go, AccordionTrigger as Eo } from "./components/Accordion/Accordion.js";
+import { default as Lo } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as yo } from "./components/Checkbox/Checkbox.js";
+import { default as ko, ButtonContent as Ao, getButtonClassName as Do } from "./components/Button/Button.js";
 import { ButtonBar as Po } from "./components/Button/ButtonBar.js";
-import { LinkButton as Do } from "./components/Button/LinkButton.js";
-import { BurgerMenuButton as _o } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as ho } from "./components/BurgerMenu/BurgerMenu.js";
-import { default as zo, getLinkClassName as wo, getLinkStyles as Mo } from "./components/Link/Link.js";
-import { default as Go } from "./components/Link/ButtonLink.js";
-import { Avatar as Ko } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as Ho, default as Wo } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as Jo } from "./components/Badge/Badge.js";
-import { default as Zo } from "./components/ControlBox/ControlBox.js";
-import { default as qo } from "./components/CountryFlag/CountryFlag.js";
-import { default as or } from "./components/Decorate/Decorate.js";
-import { Dot as er } from "./components/Dot/Dot.js";
+import { LinkButton as Fo } from "./components/Button/LinkButton.js";
+import { BurgerMenuButton as vo } from "./components/BurgerMenu/BurgerMenuButton.js";
+import { BurgerMenu as Uo } from "./components/BurgerMenu/BurgerMenu.js";
+import { default as wo, getLinkClassName as Mo, getLinkStyles as No } from "./components/Link/Link.js";
+import { default as Vo } from "./components/Link/ButtonLink.js";
+import { Avatar as Yo } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Wo, default as Xo } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as Qo } from "./components/Badge/Badge.js";
+import { default as jo } from "./components/ControlBox/ControlBox.js";
+import { default as $o } from "./components/CountryFlag/CountryFlag.js";
+import { default as rr } from "./components/Decorate/Decorate.js";
+import { Dot as tr } from "./components/Dot/Dot.js";
 import { FLYOUT_OUTLET_ID as mr, Flyout as fr } from "./components/Flyout/Flyout.js";
-import { Logos as ar } from "./components/Logos/index.js";
-import { I as nr } from "./cfxIcons-BNd1WgpX.js";
-import { I as ur } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as ir } from "./components/Icon/Icon.js";
-import { IconBig as cr } from "./components/IconBig/IconBig.js";
-import { Indicator as Ir } from "./components/Indicator/Indicator.js";
-import { default as Br } from "./components/InfoPanel/InfoPanel.js";
-import { default as gr } from "./components/Input/Input.js";
-import { default as Sr } from "./components/Input/RichInput.js";
-import { Interactive as Rr } from "./components/Interactive/Interactive.js";
-import { Island as Ar, IslandCorner as Or } from "./components/Island/Island.js";
-import { Box as br, flexPropFormater as Dr } from "./components/Layout/Box/Box.js";
-import { Center as _r } from "./components/Layout/Center/Center.js";
-import { Flex as hr } from "./components/Layout/Flex/Flex.js";
-import { FlexAlignItemsEnum as zr, FlexDirectionEnum as wr, FlexJustifyContentEnum as Mr, FlexWrapEnum as Nr } from "./components/Layout/Flex/Flex.types.js";
-import { FlexRestricter as Vr } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as Yr } from "./components/Layout/Pad/Pad.js";
-import { Page as Wr } from "./components/Layout/Page/Page.js";
-import { R as Jr } from "./Rail-DcVowhML.js";
-import { Scrollable as Zr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as qr } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as oe } from "./components/Loaf/Loaf.js";
-import { Modal as ee } from "./components/Modal/Modal.js";
+import { Logos as xr } from "./components/Logos/index.js";
+import { I as lr } from "./cfxIcons-B9nzO6TW.js";
+import { I as sr } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Icon as dr } from "./components/Icon/Icon.js";
+import { IconBig as Tr } from "./components/IconBig/IconBig.js";
+import { Indicator as Cr } from "./components/Indicator/Indicator.js";
+import { default as Er } from "./components/InfoPanel/InfoPanel.js";
+import { default as Lr } from "./components/Input/Input.js";
+import { default as yr } from "./components/Input/RichInput.js";
+import { Interactive as kr } from "./components/Interactive/Interactive.js";
+import { Island as Dr, IslandCorner as Or } from "./components/Island/Island.js";
+import { default as br, stringPropFormater as Fr } from "./components/Layout/Box/Box.js";
+import { Center as vr } from "./components/Layout/Center/Center.js";
+import { default as Ur } from "./components/Layout/Flex/Flex.js";
+import { FlexAlignItemsEnum as wr, FlexDirectionEnum as Mr, FlexJustifyContentEnum as Nr, FlexWrapEnum as Gr } from "./components/Layout/Flex/Flex.types.js";
+import { FlexRestricter as Kr } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Hr } from "./components/Layout/Pad/Pad.js";
+import { Page as Xr } from "./components/Layout/Page/Page.js";
+import { R as Qr } from "./Rail-DcVowhML.js";
+import { Scrollable as jr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as $r } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as re } from "./components/Loaf/Loaf.js";
+import { Modal as te } from "./components/Modal/Modal.js";
 import { NavList as me } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as pe, Overlay as ae } from "./components/Overlay/Overlay.js";
-import { Popover as ne } from "./components/Popover/Popover.js";
-import { PremiumBadge as ue } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as ie } from "./components/Prose/Prose.js";
-import { Radio as ce } from "./components/Radio/Radio.js";
-import { Select as Ie } from "./components/Select/Select.js";
-import { DropdownSelect as Be } from "./components/DropdownSelect/DropdownSelect.js";
-import { Separator as ge } from "./components/Separator/Separator.js";
-import { Shroud as Se } from "./components/Shroud/Shroud.js";
-import { Slider as Re } from "./components/Slider/Slider.js";
-import { Spacer as Ae } from "./components/Spacer/Spacer.js";
+import { OVERLAY_OUTLET_ID as pe, Overlay as xe } from "./components/Overlay/Overlay.js";
+import { Popover as le } from "./components/Popover/Popover.js";
+import { PremiumBadge as se } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as de } from "./components/Prose/Prose.js";
+import { Radio as Te } from "./components/Radio/Radio.js";
+import { Select as Ce } from "./components/Select/Select.js";
+import { DropdownSelect as Ee } from "./components/DropdownSelect/DropdownSelect.js";
+import { Separator as Le } from "./components/Separator/Separator.js";
+import { Shroud as ye } from "./components/Shroud/Shroud.js";
+import { Slider as ke } from "./components/Slider/Slider.js";
+import { Spacer as De } from "./components/Spacer/Spacer.js";
 import { Style as Pe, useContextualStyle as be } from "./components/Style/Style.js";
-import { default as Fe } from "./components/Switch/Switch.js";
-import { ToggleGroup as ve } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as Ue } from "./components/Tabular/Tabular.js";
-import { Table as we, TableHeaderItem as Me, TableIconButton as Ne, TableRow as Ge } from "./components/Table/Table.js";
-import { DEFAULT_TEXT_COLOR as Ke, TEXT_OPACITY_MAP as Ye, Text as He, TextBlock as We, getTextOpacity as Xe, textSizeResponsiveValueFormatter as Je } from "./components/Text/Text.js";
-import { Textarea as Ze } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as qe, Title as $e, titleGetCoords as ot, titleGetCssStyle as rt } from "./components/Title/Title.js";
-import { default as tt } from "./components/InputDropzone/InputDropzone.js";
-import { default as ft } from "./components/InputDropzone/ItemPreview.js";
-import { default as at } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as nt } from "./components/OnScreenSensor.js";
-import { Symbols as ut } from "./components/Symbols.js";
+import { default as _e } from "./components/Switch/Switch.js";
+import { ToggleGroup as he } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as ze } from "./components/Tabular/Tabular.js";
+import { DataTable as Me, DataTableHeaderItem as Ne, DataTableRow as Ge } from "./components/DataTable/DataTable.js";
+import { Table as Ke } from "./components/Table/index.js";
+import { DEFAULT_TEXT_COLOR as He, TEXT_OPACITY_MAP as We, Text as Xe, TextBlock as Je, getTextOpacity as Qe, textSizeResponsiveValueFormatter as Ze } from "./components/Text/Text.js";
+import { Textarea as qe } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as ot, Title as rt, titleGetCoords as et, titleGetCssStyle as tt } from "./components/Title/Title.js";
+import { default as mt } from "./components/InputDropzone/InputDropzone.js";
+import { default as pt } from "./components/InputDropzone/ItemPreview.js";
+import { default as nt } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as ut } from "./components/OnScreenSensor.js";
+import { Symbols as it } from "./components/Symbols.js";
 export {
-  co as Accordion,
-  To as AccordionContent,
-  Io as AccordionHeader,
-  Co as AccordionItem,
-  Bo as AccordionTrigger,
-  Ko as Avatar,
-  Ho as BACKDROP_OUTLET_ID,
-  Wo as BackdropPortal,
-  Jo as Badge,
-  to as BorderRadiusEnum,
+  To as Accordion,
+  Io as AccordionContent,
+  Co as AccordionHeader,
+  go as AccordionItem,
+  Eo as AccordionTrigger,
+  Yo as Avatar,
+  Wo as BACKDROP_OUTLET_ID,
+  Xo as BackdropPortal,
+  Qo as Badge,
+  ao as BorderRadiusEnum,
   br as Box,
-  ho as BurgerMenu,
-  _o as BurgerMenuButton,
-  Ro as Button,
+  Uo as BurgerMenu,
+  vo as BurgerMenuButton,
+  ko as Button,
   Po as ButtonBar,
-  ko as ButtonContent,
-  Go as ButtonLink,
+  Ao as ButtonContent,
+  Vo as ButtonLink,
   L as CLIPBOARD_TITLE_APPEARANCE,
-  _r as Center,
-  So as Checkbox,
-  go as ClipboardButton,
+  vr as Center,
+  yo as Checkbox,
+  Lo as ClipboardButton,
   mo as ColorEnum,
-  Zo as ControlBox,
-  qo as CountryFlag,
-  Ke as DEFAULT_TEXT_COLOR,
-  or as Decorate,
-  er as Dot,
-  Be as DropdownSelect,
-  ft as DropzoneItemPreview,
+  jo as ControlBox,
+  $o as CountryFlag,
+  He as DEFAULT_TEXT_COLOR,
+  Me as DataTable,
+  Ne as DataTableHeaderItem,
+  Ge as DataTableRow,
+  rr as Decorate,
+  tr as Dot,
+  Ee as DropdownSelect,
+  pt as DropzoneItemPreview,
   mr as FLYOUT_OUTLET_ID,
-  hr as Flex,
-  zr as FlexAlignItemsEnum,
-  wr as FlexDirectionEnum,
-  Mr as FlexJustifyContentEnum,
-  Vr as FlexRestricter,
-  Nr as FlexWrapEnum,
+  Ur as Flex,
+  wr as FlexAlignItemsEnum,
+  Mr as FlexDirectionEnum,
+  Nr as FlexJustifyContentEnum,
+  Kr as FlexRestricter,
+  Gr as FlexWrapEnum,
   fr as Flyout,
-  ir as Icon,
-  cr as IconBig,
-  so as IconButton,
-  nr as Icons,
-  ur as IconsBig,
-  Ir as Indicator,
-  Br as InfoPanel,
-  gr as Input,
-  tt as InputDropzone,
-  Rr as Interactive,
-  Ar as Island,
+  dr as Icon,
+  Tr as IconBig,
+  io as IconButton,
+  lr as Icons,
+  sr as IconsBig,
+  Cr as Indicator,
+  Er as InfoPanel,
+  Lr as Input,
+  mt as InputDropzone,
+  kr as Interactive,
+  Dr as Island,
   Or as IslandCorner,
-  zo as Link,
-  Do as LinkButton,
-  D as Linkify,
-  oe as Loaf,
-  ar as Logos,
+  wo as Link,
+  Fo as LinkButton,
+  b as Linkify,
+  re as Loaf,
+  xr as Logos,
   fo as MediaQueryEnum,
-  ee as Modal,
+  te as Modal,
   me as NavList,
   pe as OVERLAY_OUTLET_ID,
   po as OffsetEnum,
-  nt as OnScreenSensor,
-  ae as Overlay,
-  Yr as Pad,
-  Wr as Page,
-  ne as Popover,
-  ue as PremiumBadge,
-  ie as Prose,
-  ce as Radio,
-  Jr as Rail,
-  Sr as RichInput,
-  Zr as Scrollable,
-  Ie as Select,
-  ge as Separator,
-  Se as Shroud,
-  at as Skeleton,
-  Re as Slider,
-  Ae as Spacer,
+  ut as OnScreenSensor,
+  xe as Overlay,
+  Hr as Pad,
+  Xr as Page,
+  le as Popover,
+  se as PremiumBadge,
+  de as Prose,
+  Te as Radio,
+  Qr as Rail,
+  yr as RichInput,
+  jr as Scrollable,
+  Ce as Select,
+  Le as Separator,
+  ye as Shroud,
+  nt as Skeleton,
+  ke as Slider,
+  De as Spacer,
   Pe as Style,
-  Fe as Switch,
-  ut as Symbols,
-  Ye as TEXT_OPACITY_MAP,
-  qe as TITLE_OUTLET_ID,
-  we as Table,
-  Me as TableHeaderItem,
-  Ne as TableIconButton,
-  Ge as TableRow,
-  Ue as Tabular,
-  He as Text,
-  We as TextBlock,
-  ao as TextSizeEnum,
-  Ze as Textarea,
-  $e as Title,
-  ve as ToggleGroup,
-  qr as VirtualScrollable,
-  xo as ZIndexEnum,
+  _e as Switch,
+  it as Symbols,
+  We as TEXT_OPACITY_MAP,
+  ot as TITLE_OUTLET_ID,
+  Ke as Table,
+  ze as Tabular,
+  Xe as Text,
+  Je as TextBlock,
+  xo as TextSizeEnum,
+  qe as Textarea,
+  rt as Title,
+  he as ToggleGroup,
+  $r as VirtualScrollable,
+  no as ZIndexEnum,
   N as clamp,
   G as clamp01,
-  m as clsx,
-  Z as debounce,
+  a as clsx,
+  j as debounce,
   F as defaultLinkReplacer,
   _ as defaultLinkReplacerx,
-  Dr as flexPropFormater,
-  Ao as getButtonClassName,
-  $ as getColor,
-  wo as getLinkClassName,
-  Mo as getLinkStyles,
-  Xe as getTextOpacity,
-  p as getValue,
+  Do as getButtonClassName,
+  oo as getColor,
+  Mo as getLinkClassName,
+  No as getLinkStyles,
+  Qe as getTextOpacity,
+  f as getValue,
   R as identity,
   k as invoke,
   v as isExternalUrl,
-  K as isFalseString,
-  lo as isInEnum,
-  Y as isTrueString,
+  Y as isFalseString,
+  uo as isInEnum,
+  H as isTrueString,
   h as linkify,
   U as linkifyx,
   z as matchLinkNodes,
   w as matchLinks,
   e as mergeRefs,
+  V as minmax,
   A as noop,
-  H as normalizeSlashes,
-  W as replaceRange,
-  O as returnFalse,
-  P as returnTrue,
-  X as splitByIndices,
-  Je as textSizeResponsiveValueFormatter,
-  j as throttle,
-  ot as titleGetCoords,
-  rt as titleGetCssStyle,
-  ro as ui,
-  J as unicodeCharAt,
+  W as normalizeSlashes,
+  X as replaceRange,
+  D as returnFalse,
+  O as returnTrue,
+  J as splitByIndices,
+  Fr as stringPropFormater,
+  Ze as textSizeResponsiveValueFormatter,
+  q as throttle,
+  et as titleGetCoords,
+  tt as titleGetCssStyle,
+  eo as ui,
+  Q as unicodeCharAt,
   S as useClipboardComponent,
   be as useContextualStyle,
   s as useDynamicRef,

package/dist/{medium-BA3EQDZW.js → medium-Bq5NvyU7.js}

@@ -1,6 +1,6 @@
 import * as l from "react";
 import { useState as g } from "react";
-import { _ as p } from "./tslib.es6-CBKHJX9H.js";
+import { _ as p } from "./tslib.es6-CtHwNPxX.js";
 function o(e, u) {
   return typeof e == "function" ? e(u) : e && (e.current = u), e;
 }

package/dist/styles-scss/global.scss

@@ -29,6 +29,7 @@ body {
 
   // responsive
   @include tokens.mp-tokens;
+  @include tokens.responsive-tokens('display');
   @include tokens.responsive-tokens('width');
   @include tokens.responsive-tokens('height');
   @include tokens.responsive-tokens('gap');

package/dist/tslib.es6-CtHwNPxX.js

@@ -0,0 +1,72 @@
+var i = function(e, n) {
+  return i = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(r, t) {
+    r.__proto__ = t;
+  } || function(r, t) {
+    for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (r[o] = t[o]);
+  }, i(e, n);
+};
+function _(e, n) {
+  if (typeof n != "function" && n !== null)
+    throw new TypeError("Class extends value " + String(n) + " is not a constructor or null");
+  i(e, n);
+  function r() {
+    this.constructor = e;
+  }
+  e.prototype = n === null ? Object.create(n) : (r.prototype = n.prototype, new r());
+}
+var s = function() {
+  return s = Object.assign || function(n) {
+    for (var r, t = 1, o = arguments.length; t < o; t++) {
+      r = arguments[t];
+      for (var c in r) Object.prototype.hasOwnProperty.call(r, c) && (n[c] = r[c]);
+    }
+    return n;
+  }, s.apply(this, arguments);
+};
+function O(e, n) {
+  var r = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, t = Object.getOwnPropertySymbols(e); o < t.length; o++)
+      n.indexOf(t[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[o]) && (r[t[o]] = e[t[o]]);
+  return r;
+}
+function h(e, n, r, t) {
+  function o(c) {
+    return c instanceof r ? c : new r(function(u) {
+      u(c);
+    });
+  }
+  return new (r || (r = Promise))(function(c, u) {
+    function l(a) {
+      try {
+        p(t.next(a));
+      } catch (f) {
+        u(f);
+      }
+    }
+    function y(a) {
+      try {
+        p(t.throw(a));
+      } catch (f) {
+        u(f);
+      }
+    }
+    function p(a) {
+      a.done ? c(a.value) : o(a.value).then(l, y);
+    }
+    p((t = t.apply(e, n || [])).next());
+  });
+}
+function d(e, n, r) {
+  if (r || arguments.length === 2) for (var t = 0, o = n.length, c; t < o; t++)
+    (c || !(t in n)) && (c || (c = Array.prototype.slice.call(n, 0, t)), c[t] = n[t]);
+  return e.concat(c || Array.prototype.slice.call(n));
+}
+export {
+  s as _,
+  h as a,
+  _ as b,
+  O as c,
+  d
+};

package/dist/utils/hooks/useClipboardComponent.d.ts

@@ -11,5 +11,5 @@ export declare function useClipboardComponent(props: UseClipboardProps): {
     handleClick: () => void;
     title: string | undefined;
     copied: boolean;
-    clipboardRef: React.MutableRefObject<Clipboard | null>;
+    clipboardRef: React.RefObject<Clipboard | null>;
 };

package/dist/utils/hooks/useOutlet.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import l from "react";
-import { R as i } from "../../index-2hJuj4UN.js";
+import { R as i } from "../../index-Cl_RnsqN.js";
 function m(t) {
   const {
     children: n

package/dist/utils/hooks/usePopoverController.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 
 export declare function usePopoverController(): {
     active: boolean;
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
     handleMouseDown: () => void;

package/dist/utils/links.js

@@ -1,5 +1,5 @@
 import { jsx as le, Fragment as Be } from "react/jsx-runtime";
-import { e as z, _ as C } from "../tslib.es6-CBKHJX9H.js";
+import { b as z, _ as C } from "../tslib.es6-CtHwNPxX.js";
 import De from "react";
 import { splitByIndices as Ee } from "./string.js";
 var ke = "3.16.2";