@cfx-dev/ui-components 4.2.24 → 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

@@ -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,21 +9,21 @@ 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 { 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 mo, ColorEnum as fo, MediaQueryEnum as po, OffsetEnum as ao, TextSizeEnum as xo, ZIndexEnum as no } from "./utils/ui/ui.types.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 Bo, AccordionTrigger as Eo } from "./components/Accordion/Accordion.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 { Button as ko, ButtonContent as Ao, getButtonClassName as Oo } from "./components/Button/Button.js";
-import { ButtonBar as bo } from "./components/Button/ButtonBar.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 Fo } from "./components/Button/LinkButton.js";
 import { BurgerMenuButton as vo } from "./components/BurgerMenu/BurgerMenuButton.js";
 import { BurgerMenu as Uo } from "./components/BurgerMenu/BurgerMenu.js";
@@ -36,9 +36,9 @@ 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 fr, Flyout as pr } from "./components/Flyout/Flyout.js";
+import { FLYOUT_OUTLET_ID as mr, Flyout as fr } from "./components/Flyout/Flyout.js";
 import { Logos as xr } from "./components/Logos/index.js";
-import { I as lr } from "./cfxIcons-BNd1WgpX.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";
@@ -47,10 +47,10 @@ 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 Or, IslandCorner as Pr } from "./components/Island/Island.js";
-import { Box as Dr, flexPropFormater as Fr } from "./components/Layout/Box/Box.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 { Flex as Ur } from "./components/Layout/Flex/Flex.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";
@@ -60,8 +60,8 @@ 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 fe } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as ae, Overlay as xe } from "./components/Overlay/Overlay.js";
+import { NavList as me } from "./components/NavList/NavList.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";
@@ -71,58 +71,62 @@ import { DropdownSelect as Ee } from "./components/DropdownSelect/DropdownSelect
 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 Oe } from "./components/Spacer/Spacer.js";
-import { Style as be, useContextualStyle as De } from "./components/Style/Style.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 _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 { Table as Me, TableHeaderItem as Ne, TableIconButton as Ge, TableRow as Ve } from "./components/Table/Table.js";
-import { DEFAULT_TEXT_COLOR as Ye, TEXT_OPACITY_MAP as He, Text as We, TextBlock as Xe, getTextOpacity as Je, textSizeResponsiveValueFormatter as Qe } from "./components/Text/Text.js";
-import { Textarea as je } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as $e, Title as ot, titleGetCoords as rt, titleGetCssStyle as et } from "./components/Title/Title.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 xt } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as lt } from "./components/OnScreenSensor.js";
-import { Symbols as st } from "./components/Symbols.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 {
   To as Accordion,
   Io as AccordionContent,
   Co as AccordionHeader,
-  Bo as AccordionItem,
+  go as AccordionItem,
   Eo as AccordionTrigger,
   Yo as Avatar,
   Wo as BACKDROP_OUTLET_ID,
   Xo as BackdropPortal,
   Qo as Badge,
-  mo as BorderRadiusEnum,
-  Dr as Box,
+  ao as BorderRadiusEnum,
+  br as Box,
   Uo as BurgerMenu,
   vo as BurgerMenuButton,
   ko as Button,
-  bo as ButtonBar,
+  Po as ButtonBar,
   Ao as ButtonContent,
   Vo as ButtonLink,
   L as CLIPBOARD_TITLE_APPEARANCE,
   vr as Center,
   yo as Checkbox,
   Lo as ClipboardButton,
-  fo as ColorEnum,
+  mo as ColorEnum,
   jo as ControlBox,
   $o as CountryFlag,
-  Ye as DEFAULT_TEXT_COLOR,
+  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,
-  fr as FLYOUT_OUTLET_ID,
+  mr as FLYOUT_OUTLET_ID,
   Ur as Flex,
   wr as FlexAlignItemsEnum,
   Mr as FlexDirectionEnum,
   Nr as FlexJustifyContentEnum,
   Kr as FlexRestricter,
   Gr as FlexWrapEnum,
-  pr as Flyout,
+  fr as Flyout,
   dr as Icon,
   Tr as IconBig,
   io as IconButton,
@@ -133,19 +137,19 @@ export {
   Lr as Input,
   mt as InputDropzone,
   kr as Interactive,
-  Or as Island,
-  Pr as IslandCorner,
+  Dr as Island,
+  Or as IslandCorner,
   wo as Link,
   Fo as LinkButton,
-  D as Linkify,
+  b as Linkify,
   re as Loaf,
   xr as Logos,
-  po as MediaQueryEnum,
+  fo as MediaQueryEnum,
   te as Modal,
-  fe as NavList,
-  ae as OVERLAY_OUTLET_ID,
-  ao as OffsetEnum,
-  lt as OnScreenSensor,
+  me as NavList,
+  pe as OVERLAY_OUTLET_ID,
+  po as OffsetEnum,
+  ut as OnScreenSensor,
   xe as Overlay,
   Hr as Pad,
   Xr as Page,
@@ -159,40 +163,36 @@ export {
   Ce as Select,
   Le as Separator,
   ye as Shroud,
-  xt as Skeleton,
+  nt as Skeleton,
   ke as Slider,
-  Oe as Spacer,
-  be as Style,
+  De as Spacer,
+  Pe as Style,
   _e as Switch,
-  st as Symbols,
-  He as TEXT_OPACITY_MAP,
-  $e as TITLE_OUTLET_ID,
-  Me as Table,
-  Ne as TableHeaderItem,
-  Ge as TableIconButton,
-  Ve as TableRow,
+  it as Symbols,
+  We as TEXT_OPACITY_MAP,
+  ot as TITLE_OUTLET_ID,
+  Ke as Table,
   ze as Tabular,
-  We as Text,
-  Xe as TextBlock,
+  Xe as Text,
+  Je as TextBlock,
   xo as TextSizeEnum,
-  je as Textarea,
-  ot as Title,
+  qe as Textarea,
+  rt as Title,
   he as ToggleGroup,
   $r as VirtualScrollable,
   no as ZIndexEnum,
   N as clamp,
   G as clamp01,
-  m as clsx,
+  a as clsx,
   j as debounce,
   F as defaultLinkReplacer,
   _ as defaultLinkReplacerx,
-  Fr as flexPropFormater,
-  Oo as getButtonClassName,
+  Do as getButtonClassName,
   oo as getColor,
   Mo as getLinkClassName,
   No as getLinkStyles,
-  Je as getTextOpacity,
-  p as getValue,
+  Qe as getTextOpacity,
+  f as getValue,
   R as identity,
   k as invoke,
   v as isExternalUrl,
@@ -208,17 +208,18 @@ export {
   A as noop,
   W as normalizeSlashes,
   X as replaceRange,
-  O as returnFalse,
-  P as returnTrue,
+  D as returnFalse,
+  O as returnTrue,
   J as splitByIndices,
-  Qe as textSizeResponsiveValueFormatter,
+  Fr as stringPropFormater,
+  Ze as textSizeResponsiveValueFormatter,
   q as throttle,
-  rt as titleGetCoords,
-  et as titleGetCssStyle,
+  et as titleGetCoords,
+  tt as titleGetCssStyle,
   eo as ui,
   Q as unicodeCharAt,
   S as useClipboardComponent,
-  De as useContextualStyle,
+  be as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
   l as useInstance,

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";

package/dist/utils/mergeRefs.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 
-export declare function mergeRefs<T = any>(...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]): React.RefCallback<T>;
+export declare function mergeRefs<T = unknown>(...refs: (React.RefCallback<T> | React.RefObject<T> | undefined | null)[]): React.RefCallback<T>;

package/dist/utils/mergeRefs.js

@@ -1,7 +1,7 @@
 function o(...e) {
   return (t) => {
     e.forEach((n) => {
-      typeof n == "function" ? n(t) : n != null && (n.current = t);
+      typeof n == "function" ? n(t) : n && (n.current = t);
     });
   };
 }

package/dist/utils/ui/ui.d.ts

@@ -35,6 +35,7 @@ export declare namespace ui {
     export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => import("react").CSSProperties;
     type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
     export function callAllMPProps<T extends object>(props: Partial<MPProps>, callback: CallbackType<T>): T;
+    export const optimizeMPProps: (props: Partial<MPProps>) => Partial<MPProps>;
     export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;
     export const getAllMPClassnames: (props: Partial<MPProps>) => string;
     export {};

package/dist/utils/ui/ui.js

@@ -1,68 +1,77 @@
-import { clsx as d } from "../clsx.js";
-var g;
+import { clsx as m } from "../clsx.js";
+var d;
 ((t) => {
-  function i(e = 1) {
+  function f(e = 1) {
     return `calc(var(--quant) * ${e})`;
   }
-  t.q = i;
-  function u(e) {
+  t.q = f;
+  function p(e) {
     return `var(--offset-${e})`;
   }
-  t.offset = u;
+  t.offset = p;
   function b(e = "normal") {
     return `var(--font-size-${e})`;
   }
   t.fontSize = b;
-  function m(e = "first") {
+  function y(e = "first") {
     return `var(--zindex-${e})`;
   }
-  t.zindex = m;
-  function y(e = "normal") {
+  t.zindex = y;
+  function g(e = "normal") {
     return `var(--line-height-${e})`;
   }
-  t.lineHeight = y;
-  function h(e = "normal") {
+  t.lineHeight = g;
+  function x(e = "normal") {
     return `var(--border-radius-${e})`;
   }
-  t.borderRadius = h;
-  function x(e, r, o = 1) {
+  t.borderRadius = x;
+  function h(e, r, o = 1) {
     let n = r;
     return n === "pure" && (n = ""), typeof n == "number" && (n = `${n}`), `rgba(var(--color-${e}${n ? `-${n}` : ""}), ${o})`;
   }
-  t.color = x, ((e) => {
+  t.color = h, ((e) => {
     e.fullWidth = "util-full-width", e.fullHeight = "util-full-height", e.flexGrow = "util-flex-grow", e.flexNoShrink = "util-flex-no-shrink", e.userSelectableText = "util-text-selectable", e.zIndex9000 = "util-z-index-9000";
   })(t.cls || (t.cls = {})), t.pc = (e) => `${e}%`, t.px = (e) => `${e}px`, t.ch = (e) => `${e}ch`, t.em = (e) => `${e}em`, t.rem = (e) => `${e}rem`, t.vh = (e) => `${e}vh`, t.vw = (e) => `${e}vw`, t.url = (e) => `url(${e})`;
-  function f(e) {
-    return e == null ? "" : typeof e == "number" ? i(e) : e.toString();
+  function l(e) {
+    return e == null ? "" : typeof e == "number" ? f(e) : e.toString();
   }
-  t.defaultResponsiveValueFormatter = f;
-  function $(e, r, o = f) {
-    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n[`--${e}-${s}`] = o(l), n), {}) : {
+  t.defaultResponsiveValueFormatter = l;
+  function u(e, r, o = l) {
+    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n[`--${e}-${i}`] = o(s), n), {}) : {
       [`--${e}-initial`]: o(r)
     };
   }
-  t.getResponsiveStyles = $;
-  function a(e, r) {
-    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? d(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
+  t.getResponsiveStyles = u;
+  function c(e, r) {
+    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? m(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
   }
-  t.getResponsiveClassnames = a;
-  function R(e, r, o = f) {
-    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n.push(`${e}-${s}-${o(l)}`), n), []) : [`${e}-initial-${o(r)}`];
+  t.getResponsiveClassnames = c;
+  function P(e, r, o = l) {
+    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n.push(`${e}-${i}-${o(s)}`), n), []) : [`${e}-initial-${o(r)}`];
   }
-  t.getResponsiveFlatClassnames = R;
-  function c(e) {
-    return typeof e == "number" ? i(e) : u(e);
+  t.getResponsiveFlatClassnames = P;
+  function $(e) {
+    return typeof e == "number" ? f(e) : p(e);
   }
-  t.offsetResponsiveValueFormatter = c, t.getOffsetStyles = (e, r) => $(e, r, c);
-  function p(e, r) {
-    return Object.entries(e).reduce((o, [n, s]) => (Object.assign(o, r(n, s)), o), {});
+  t.offsetResponsiveValueFormatter = $, t.getOffsetStyles = (e, r) => u(e, r, $);
+  function a(e, r) {
+    return Object.entries(e).reduce((o, [n, i]) => (Object.assign(o, r(n, i)), o), {});
   }
-  t.callAllMPProps = p, t.getAllMPStyles = (e) => p(e, t.getOffsetStyles), t.getAllMPClassnames = (e) => d(
-    Object.entries(e).map(
-      ([r, o]) => a(r, o)
+  t.callAllMPProps = a, t.optimizeMPProps = (e) => {
+    const {
+      px: r,
+      py: o,
+      mx: n,
+      my: i,
+      ...s
+    } = e;
+    return r && (s.pr = r, s.pl = r), o && (s.pt = o, s.pb = o), n && (s.mr = n, s.ml = n), i && (s.mt = i, s.mb = i), s;
+  }, t.getAllMPStyles = (e) => a((0, t.optimizeMPProps)(e), t.getOffsetStyles), t.getAllMPClassnames = (e) => m(
+    Object.entries((0, t.optimizeMPProps)(e)).map(
+      ([r, o]) => c(r, o)
     )
   );
-})(g || (g = {}));
+})(d || (d = {}));
 export {
-  g as ui
+  d as ui
 };

package/dist/utils/ui/ui.types.d.ts

@@ -78,9 +78,13 @@ export interface MPProps {
     mr?: ResponsiveOffsetType;
     mb?: ResponsiveOffsetType;
     ml?: ResponsiveOffsetType;
+    my?: ResponsiveOffsetType;
+    mx?: ResponsiveOffsetType;
     p?: ResponsiveOffsetType;
     pt?: ResponsiveOffsetType;
     pr?: ResponsiveOffsetType;
     pb?: ResponsiveOffsetType;
     pl?: ResponsiveOffsetType;
+    py?: ResponsiveOffsetType;
+    px?: ResponsiveOffsetType;
 }