@cfx-dev/ui-components 5.0.30 → 5.0.32

package/dist/components/Carousel/Carousel.d.ts

@@ -10,6 +10,7 @@ export interface CarouselProps {
     showControlsTop?: boolean;
     skipFirstItem?: boolean;
     controlsClassName?: string;
+    controlsRootClassName?: string;
     text?: string;
     showDots?: boolean;
     trackClassName?: string;
@@ -19,6 +20,6 @@ export interface CarouselProps {
     currentPage?: number;
     onPageChange?: (page: number) => void;
 }
-declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, controlsRootClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;
 export default _default;

package/dist/components/Carousel/Carousel.js

@@ -1,24 +1,25 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import G, { useMemo as H, useState as J, useCallback as B, useEffect as K } from "react";
-import { Dot as L } from "../Dot/Dot.js";
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
+import H, { useMemo as J, useState as K, useCallback as Q, useEffect as L } from "react";
+import { Dot as O } from "../Dot/Dot.js";
 import u from "../Flex/Flex.js";
-import { clsx as E } from "../../utils/clsx.js";
+import { clsx as h } from "../../utils/clsx.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContext.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
-import O from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
-import { useCarousel as U } from "../../utils/hooks/useCarousel.js";
-import { s as i, C as W } from "../../CarouselControls-CJ3tupLr.js";
-import X from "./CarouselItem.js";
-function F({
+import U from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
+import { useCarousel as W } from "../../utils/hooks/useCarousel.js";
+import { s as i, C as X } from "../../CarouselControls-CJ3tupLr.js";
+import Y from "./CarouselItem.js";
+function R({
   showDots: n = !1,
   pageCount: a,
   currentPage: t,
   onPageChange: o,
-  controlsClassName: m
+  controlsClassName: m,
+  controlsRootClassName: d
 }) {
-  return a <= 1 ? null : /* @__PURE__ */ p(u, { gap: 2, centered: !0, className: i.controls, children: [
-    n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((y, c) => /* @__PURE__ */ s(
-      L,
+  return a <= 1 ? null : /* @__PURE__ */ N(u, { gap: 2, centered: !0, className: h(i.controls, d), children: [
+    n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((p, c) => /* @__PURE__ */ s(
+      O,
       {
         className: i.dots,
         color: c === t ? "primary" : "secondary",
@@ -27,7 +28,7 @@ function F({
       c
     )) }),
     /* @__PURE__ */ s(
-      W,
+      X,
       {
         currentPage: t,
         pageCount: a,
@@ -37,89 +38,92 @@ function F({
     )
   ] });
 }
-function Y({
+function Z({
   items: n,
   ImageComponent: a,
   visibleItems: t = 4,
   onItemClick: o,
   showControlsBottom: m = !1,
-  showControlsTop: y = !1,
-  skipFirstItem: c = !1,
-  controlsClassName: N,
-  text: h,
-  showDots: S = !1,
-  trackClassName: Q,
-  className: V,
-  rootClassName: $,
-  headerClassName: q,
-  currentPage: d,
+  showControlsTop: d = !1,
+  skipFirstItem: p = !1,
+  controlsClassName: c,
+  controlsRootClassName: S,
+  text: x,
+  showDots: M = !1,
+  trackClassName: V,
+  className: $,
+  rootClassName: q,
+  headerClassName: w,
+  currentPage: y,
   onPageChange: l
 }) {
   const {
-    isMobile: x,
-    isTablet: M
-  } = O(), T = H(() => typeof t == "number" ? t : x ? t.mobile : M ? t.tablet : t.desktop, [t, x, M]), w = c ? n.slice(1) : n, j = Math.ceil(w.length / T), {
-    carouselRef: z,
+    isMobile: T,
+    isTablet: j
+  } = U(), _ = J(() => typeof t == "number" ? t : T ? t.mobile : j ? t.tablet : t.desktop, [t, T, j]), z = p ? n.slice(1) : n, b = Math.ceil(z.length / _), {
+    carouselRef: A,
     carouselApi: e
-  } = U({
-    slidesToScroll: T
-  }), [A, _] = J(0), b = d ?? A, R = B(
+  } = W({
+    slidesToScroll: _
+  }), [D, B] = K(0), E = y ?? D, F = Q(
     (r) => {
-      e == null || e.scrollTo(r), l == null || l(r), d == null && _(r);
+      e == null || e.scrollTo(r), l == null || l(r), y == null && B(r);
     },
-    [e, l, d]
-  ), D = B(
+    [e, l, y]
+  ), G = Q(
     (r) => {
       o == null || o(r);
     },
     [o]
   );
-  return K(() => {
+  return L(() => {
     if (!e)
       return;
     const r = () => {
       const f = e.selectedScrollSnap();
-      _(f), l == null || l(f);
+      B(f), l == null || l(f);
     };
     return e.on("select", r), e.on("reInit", r), () => {
       e.off("select", r), e.off("reInit", r);
     };
-  }, [e, l]), /* @__PURE__ */ p("div", { className: $, children: [
-    h && /* @__PURE__ */ p(u, { spaceBetween: !0, alignItems: "center", className: q, children: [
-      /* @__PURE__ */ s("span", { children: h }),
-      y && /* @__PURE__ */ s(
-        F,
+  }, [e, l]), /* @__PURE__ */ N("div", { className: q, children: [
+    x && /* @__PURE__ */ N(u, { spaceBetween: !0, alignItems: "center", className: w, children: [
+      /* @__PURE__ */ s("span", { children: x }),
+      d && /* @__PURE__ */ s(
+        R,
         {
-          showDots: S,
-          pageCount: j,
-          currentPage: b,
-          onPageChange: R,
-          controlsClassName: N
+          showDots: M,
+          pageCount: b,
+          currentPage: E,
+          onPageChange: F,
+          controlsClassName: c,
+          controlsRootClassName: S
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: E(i.carousel, V), ref: z, children: /* @__PURE__ */ s(u, { className: E(i.carouselTrack, Q), gap: 1, children: n.map((r, f) => f === 0 && c ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
-      X,
+    /* @__PURE__ */ s("div", { className: h(i.carousel, $), ref: A, children: /* @__PURE__ */ s(u, { className: h(i.carouselTrack, V), gap: 1, children: n.map((r, f) => f === 0 && p ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
+      Y,
       {
         index: f,
         item: r,
-        onClick: D,
+        onClick: G,
         ImageComponent: a
       }
     ) }, r.id)) }) }),
     m && /* @__PURE__ */ s(u, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
-      F,
+      R,
       {
-        showDots: S,
-        pageCount: j,
-        currentPage: b,
-        onPageChange: R,
-        controlsClassName: N
+        showDots: M,
+        pageCount: b,
+        currentPage: E,
+        onPageChange: F,
+        controlsClassName: c,
+        controlsRootClassName: S
       }
     ) })
   ] });
 }
-const lr = G.memo(Y);
+const or = H.memo(Z);
 export {
-  lr as default
+  or as default
 };

package/dist/main.d.ts

@@ -4,7 +4,7 @@ export { getValue } from './utils/getValue';
 export type { ValueOrGetter } from './utils/getValue';
 export { AnalyticsContext, AnalyticsProvider, useAnalytics, useSiteLinkClick, SITE_LINK_CLICK_EVENT_NAME, } from './utils/contexts/AnalyticsContext';
 export type { ParamsFromElementEventType, AnalyticsContextValue, AnalyticsEvent, } from './utils/contexts/AnalyticsContext';
-export { MediaQueryContext, MediaQueryContextProvider, useMediaQuery, } from './utils/contexts/MediaQueryContext';
+export { MediaQueryContext, MediaQueryContextProvider, useMediaQuery, DEFAULT_Q_SIZE, } from './utils/contexts/MediaQueryContext';
 export type { MediaQueryContextValueType } from './utils/contexts/MediaQueryContext';
 export { createStoreContext } from './utils/contexts/StoreContext';
 export type { StoreContextValueType, StoreSpliceType, } from './utils/contexts/StoreContext';

package/dist/main.js

@@ -5,286 +5,287 @@ import { default as x, SITE_LINK_CLICK_EVENT_NAME as l } from "./utils/contexts/
 import { AnalyticsProvider as u } from "./utils/contexts/AnalyticsContext/AnalyticsProvider.js";
 import { default as i } from "./utils/contexts/AnalyticsContext/useAnalytics.js";
 import { default as c } from "./utils/contexts/AnalyticsContext/useSiteLinkClick.js";
-import { default as C } from "./utils/contexts/MediaQueryContext/MediaQueryContext.js";
-import { default as E } from "./utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
-import { default as S } from "./utils/contexts/MediaQueryContext/useMediaQuery.js";
-import { default as R } from "./utils/contexts/StoreContext/StoreContext.js";
-import { formatBytes as _ } from "./utils/formatBytes.js";
+import { DEFAULT_Q_SIZE as C, default as I } from "./utils/contexts/MediaQueryContext/MediaQueryContext.js";
+import { default as L } from "./utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
+import { default as y } from "./utils/contexts/MediaQueryContext/useMediaQuery.js";
+import { default as g } from "./utils/contexts/StoreContext/StoreContext.js";
+import { formatBytes as A } from "./utils/formatBytes.js";
 import { truncateWithEllipsis as B } from "./utils/truncateWithEllipsis.js";
-import { usePopoverController as O } from "./utils/hooks/usePopoverController.js";
-import { useInstance as P } from "./utils/hooks/useInstance.js";
-import { useDynamicRef as F } from "./utils/hooks/useDynamicRef.js";
-import { useGlobalKeyboardEvent as h } from "./utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as N } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as V } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as z } from "./utils/hooks/useOutlet.js";
+import { usePopoverController as k } from "./utils/hooks/usePopoverController.js";
+import { useInstance as b } from "./utils/hooks/useInstance.js";
+import { useDynamicRef as M } from "./utils/hooks/useDynamicRef.js";
+import { useGlobalKeyboardEvent as v } from "./utils/hooks/useGlobalKeyboardEvent.js";
+import { useKeyboardClose as U } from "./utils/hooks/useKeyboardClose.js";
+import { useWindowResize as w } from "./utils/hooks/useWindowResize.js";
+import { useOutlet as K } from "./utils/hooks/useOutlet.js";
 import { CLIPBOARD_TITLE_APPEARANCE as W, useClipboardComponent as Y } from "./utils/hooks/useClipboardComponent.js";
-import { formatDate as G, formatLocaleDate as H, formatShortDate as X } from "./utils/formatDate.js";
-import { CURRENCY_MAP as J, FREE_PRICE_TEXT as Z, formatCurrency as q } from "./utils/formatCurrency.js";
-import { identity as ee, invoke as oe, noop as re, returnFalse as te, returnTrue as ae } from "./utils/functional.js";
-import { Linkify as me, LinkifyWithMD as pe, defaultLinkReplacer as xe, defaultLinkReplacerx as le, isExternalUrl as ne, linkify as ue, linkifyWithMD as se, linkifyx as ie, matchLinkNodes as de, matchLinks as ce } from "./utils/links.js";
-import { clamp as Ce, clamp01 as Ie, minmax as Ee } from "./utils/math.js";
-import { isFalseString as Se, isTrueString as ye, normalizeSlashes as Re, replaceRange as ge, splitByIndices as _e, unicodeCharAt as Ae } from "./utils/string.js";
-import { debounce as De, throttle as Oe } from "./utils/execution.js";
-import { getColor as Pe } from "./utils/color.js";
-import { ui as Fe } from "./utils/ui/ui.js";
-import { BorderRadiusEnum as he, ColorEnum as ve, MediaQueryEnum as Ne, MediaQueryValuesMap as Ue, OffsetEnum as Ve, SpacerEnum as we, SpacingEnum as ze, TextSizeEnum as Ke, ZIndexEnum as We } from "./utils/ui/ui.types.js";
-import { isInEnum as Qe } from "./utils/enum.js";
-import { joaat32 as He } from "./utils/joaat32.js";
+import { formatDate as H, formatLocaleDate as X, formatShortDate as Z } from "./utils/formatDate.js";
+import { CURRENCY_MAP as J, FREE_PRICE_TEXT as q, formatCurrency as $ } from "./utils/formatCurrency.js";
+import { identity as oe, invoke as re, noop as te, returnFalse as ae, returnTrue as fe } from "./utils/functional.js";
+import { Linkify as pe, LinkifyWithMD as xe, defaultLinkReplacer as le, defaultLinkReplacerx as ne, isExternalUrl as ue, linkify as se, linkifyWithMD as ie, linkifyx as de, matchLinkNodes as ce, matchLinks as Te } from "./utils/links.js";
+import { clamp as Ie, clamp01 as Ee, minmax as Le } from "./utils/math.js";
+import { isFalseString as ye, isTrueString as Re, normalizeSlashes as ge, replaceRange as _e, splitByIndices as Ae, unicodeCharAt as De } from "./utils/string.js";
+import { debounce as Oe, throttle as ke } from "./utils/execution.js";
+import { getColor as be } from "./utils/color.js";
+import { ui as Me } from "./utils/ui/ui.js";
+import { BorderRadiusEnum as ve, ColorEnum as Ne, MediaQueryEnum as Ue, MediaQueryValuesMap as Ve, OffsetEnum as we, SpacerEnum as ze, SpacingEnum as Ke, TextSizeEnum as Qe, ZIndexEnum as We } from "./utils/ui/ui.types.js";
+import { isInEnum as Ge } from "./utils/enum.js";
+import { joaat32 as Xe } from "./utils/joaat32.js";
 import { default as je } from "./components/IconButton/IconButton.js";
-import { Accordion as Ze, AccordionContent as qe, AccordionHeader as $e, AccordionItem as eo, AccordionTrigger as oo } from "./components/Accordion/Accordion.js";
-import { default as to } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as fo } from "./components/Checkbox/Checkbox.js";
-import { default as po, ButtonContent as xo, getButtonClassName as lo } from "./components/Button/Button.js";
-import { ButtonBar as uo } from "./components/Button/ButtonBar.js";
-import { LinkButton as io } from "./components/Button/LinkButton.js";
-import { BurgerMenuButton as To } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as Io } from "./components/BurgerMenu/BurgerMenu.js";
-import { default as Lo, getLinkClassName as So, getLinkStyles as yo } from "./components/Link/Link.js";
-import { default as go } from "./components/Link/ButtonLink.js";
-import { Avatar as Ao } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as Do, default as Oo } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as Po } from "./components/Badge/Badge.js";
-import { default as Fo } from "./components/Carousel/Carousel.js";
-import { C as ho } from "./CarouselControls-CJ3tupLr.js";
-import { default as No } from "./components/ControlBox/ControlBox.js";
-import { default as Vo } from "./components/Decorate/Decorate.js";
-import { Dot as zo } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as Wo, FLYOUT_ROOT_ID as Yo, FLYOUT_ROOT_SHRINK_CLASSNAME as Qo, Flyout as Go } from "./components/Flyout/Flyout.js";
-import { Logos as Xo } from "./components/Logos/index.js";
+import { Accordion as qe, AccordionContent as $e, AccordionHeader as eo, AccordionItem as oo, AccordionTrigger as ro } from "./components/Accordion/Accordion.js";
+import { default as ao } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as mo } from "./components/Checkbox/Checkbox.js";
+import { default as xo, ButtonContent as lo, getButtonClassName as no } from "./components/Button/Button.js";
+import { ButtonBar as so } from "./components/Button/ButtonBar.js";
+import { LinkButton as co } from "./components/Button/LinkButton.js";
+import { BurgerMenuButton as Co } from "./components/BurgerMenu/BurgerMenuButton.js";
+import { BurgerMenu as Eo } from "./components/BurgerMenu/BurgerMenu.js";
+import { default as So, getLinkClassName as yo, getLinkStyles as Ro } from "./components/Link/Link.js";
+import { default as _o } from "./components/Link/ButtonLink.js";
+import { Avatar as Do } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Oo, default as ko } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as bo } from "./components/Badge/Badge.js";
+import { default as Mo } from "./components/Carousel/Carousel.js";
+import { C as vo } from "./CarouselControls-CJ3tupLr.js";
+import { default as Uo } from "./components/ControlBox/ControlBox.js";
+import { default as wo } from "./components/Decorate/Decorate.js";
+import { Dot as Ko } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as Wo, FLYOUT_ROOT_ID as Yo, FLYOUT_ROOT_SHRINK_CLASSNAME as Go, Flyout as Ho } from "./components/Flyout/Flyout.js";
+import { Logos as Zo } from "./components/Logos/index.js";
 import { I as Jo } from "./cfxIcons-B2ocwAjm.js";
-import { I as qo } from "./cfxIconsXLarge-C9n01-rM.js";
-import { Icon as er } from "./components/Icon/Icon.js";
-import { Indicator as rr } from "./components/Indicator/Indicator.js";
-import { default as ar } from "./components/InfoPanel/InfoPanel.js";
-import { default as mr } from "./components/Input/Input.js";
-import { default as xr } from "./components/Input/RichInput.js";
-import { default as nr } from "./components/StyledInput/StyledInput.js";
-import { Interactive as sr } from "./components/Interactive/Interactive.js";
-import { Island as dr, IslandCorner as cr } from "./components/Island/Island.js";
-import { default as Cr } from "./components/Box/Box.js";
-import { stringPropFormater as Er } from "./components/RSC/Box/Box.js";
-import { Center as Sr } from "./components/Layout/Center/Center.js";
-import { default as Rr } from "./components/Flex/Flex.js";
-import { FlexAlignItemsEnum as _r, FlexDirectionEnum as Ar, FlexJustifyContentEnum as Br, FlexWrapEnum as Dr } from "./components/RSC/Flex/Flex.types.js";
-import { FlexRestricter as kr } from "./components/RSC/Flex/FlexRestricter.js";
-import { Pad as br } from "./components/Layout/Pad/Pad.js";
-import { Page as Mr } from "./components/Layout/Page/Page.js";
-import { R as vr } from "./Rail-CHFAf3wJ.js";
-import { Scrollable as Ur } from "./components/Scrollable/Scrollable.js";
-import { VirtualScrollable as wr } from "./components/Scrollable/VirtualScrollable.js";
-import { Loaf as Kr } from "./components/Loaf/Loaf.js";
+import { I as $o } from "./cfxIconsXLarge-C9n01-rM.js";
+import { Icon as or } from "./components/Icon/Icon.js";
+import { Indicator as tr } from "./components/Indicator/Indicator.js";
+import { default as fr } from "./components/InfoPanel/InfoPanel.js";
+import { default as pr } from "./components/Input/Input.js";
+import { default as lr } from "./components/Input/RichInput.js";
+import { default as ur } from "./components/StyledInput/StyledInput.js";
+import { Interactive as ir } from "./components/Interactive/Interactive.js";
+import { Island as cr, IslandCorner as Tr } from "./components/Island/Island.js";
+import { default as Ir } from "./components/Box/Box.js";
+import { stringPropFormater as Lr } from "./components/RSC/Box/Box.js";
+import { Center as yr } from "./components/Layout/Center/Center.js";
+import { default as gr } from "./components/Flex/Flex.js";
+import { FlexAlignItemsEnum as Ar, FlexDirectionEnum as Dr, FlexJustifyContentEnum as Br, FlexWrapEnum as Or } from "./components/RSC/Flex/Flex.types.js";
+import { FlexRestricter as Pr } from "./components/RSC/Flex/FlexRestricter.js";
+import { Pad as Fr } from "./components/Layout/Pad/Pad.js";
+import { Page as hr } from "./components/Layout/Page/Page.js";
+import { R as Nr } from "./Rail-CHFAf3wJ.js";
+import { Scrollable as Vr } from "./components/Scrollable/Scrollable.js";
+import { VirtualScrollable as zr } from "./components/Scrollable/VirtualScrollable.js";
+import { Loaf as Qr } from "./components/Loaf/Loaf.js";
 import { Modal as Yr } from "./components/Modal/Modal.js";
-import { NavList as Gr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Xr, Overlay as jr } from "./components/Overlay/Overlay.js";
-import { default as Zr } from "./components/Pagination/Pagination.js";
-import { Popover as $r } from "./components/Popover/Popover.js";
-import { PremiumBadge as ot } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as tt } from "./components/Prose/Prose.js";
-import { Radio as ft } from "./components/Radio/Radio.js";
-import { Select as pt } from "./components/Select/Select.js";
-import { DropdownSelect as lt } from "./components/DropdownSelect/DropdownSelect.js";
-import { default as ut } from "./components/DropdownMenu/DropdownMenu.js";
-import { Separator as it } from "./components/Separator/Separator.js";
-import { Shroud as ct } from "./components/Shroud/Shroud.js";
-import { Slider as Ct } from "./components/Slider/Slider.js";
-import { default as Et } from "./components/Range/Range.js";
-import { default as St } from "./components/Range/RangeInput.js";
-import { default as Rt } from "./components/Range/RangeWithInputs.js";
-import { Spacer as _t } from "./components/Spacer/Spacer.js";
-import { Style as Bt, useContextualStyle as Dt } from "./components/Style/Style.js";
-import { default as kt } from "./components/Switch/Switch.js";
-import { ToggleGroup as bt } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as Mt } from "./components/Tabular/Tabular.js";
-import { DataTable as vt, DataTableHeaderItem as Nt, DataTableRow as Ut } from "./components/DataTable/DataTable.js";
-import { Table as wt } from "./components/Table/index.js";
-import { default as Kt } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as Yt, TEXT_OPACITY_MAP as Qt, Text as Gt, TextBlock as Ht, getTextOpacity as Xt, lineHeightResponsiveValueFormatter as jt, textSizeResponsiveValueFormatter as Jt } from "./components/Text/Text.js";
-import { default as qt } from "./components/Label/Label.js";
-import { Textarea as ea } from "./components/Textarea/Textarea.js";
-import { default as ra } from "./components/StyledTextarea/StyledTextarea.js";
-import { TITLE_OUTLET_ID as aa, Title as fa, titleGetCoords as ma, titleGetCssStyle as pa } from "./components/Title/Title.js";
-import { default as la } from "./components/InputDropzone/InputDropzone.js";
-import { default as ua } from "./components/InputDropzone/ItemPreview.js";
-import { default as ia } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as ca } from "./components/OnScreenSensor.js";
-import { Symbols as Ca } from "./components/Symbols.js";
-import { default as Ea } from "./components/Table/TableIconButton.js";
+import { NavList as Hr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Zr, Overlay as jr } from "./components/Overlay/Overlay.js";
+import { default as qr } from "./components/Pagination/Pagination.js";
+import { Popover as et } from "./components/Popover/Popover.js";
+import { PremiumBadge as rt } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as at } from "./components/Prose/Prose.js";
+import { Radio as mt } from "./components/Radio/Radio.js";
+import { Select as xt } from "./components/Select/Select.js";
+import { DropdownSelect as nt } from "./components/DropdownSelect/DropdownSelect.js";
+import { default as st } from "./components/DropdownMenu/DropdownMenu.js";
+import { Separator as dt } from "./components/Separator/Separator.js";
+import { Shroud as Tt } from "./components/Shroud/Shroud.js";
+import { Slider as It } from "./components/Slider/Slider.js";
+import { default as Lt } from "./components/Range/Range.js";
+import { default as yt } from "./components/Range/RangeInput.js";
+import { default as gt } from "./components/Range/RangeWithInputs.js";
+import { Spacer as At } from "./components/Spacer/Spacer.js";
+import { Style as Bt, useContextualStyle as Ot } from "./components/Style/Style.js";
+import { default as Pt } from "./components/Switch/Switch.js";
+import { ToggleGroup as Ft } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as ht } from "./components/Tabular/Tabular.js";
+import { DataTable as Nt, DataTableHeaderItem as Ut, DataTableRow as Vt } from "./components/DataTable/DataTable.js";
+import { Table as zt } from "./components/Table/index.js";
+import { default as Qt } from "./components/TableResponsiveText/TableResponsiveText.js";
+import { DEFAULT_TEXT_COLOR as Yt, TEXT_OPACITY_MAP as Gt, Text as Ht, TextBlock as Xt, getTextOpacity as Zt, lineHeightResponsiveValueFormatter as jt, textSizeResponsiveValueFormatter as Jt } from "./components/Text/Text.js";
+import { default as $t } from "./components/Label/Label.js";
+import { Textarea as oa } from "./components/Textarea/Textarea.js";
+import { default as ta } from "./components/StyledTextarea/StyledTextarea.js";
+import { TITLE_OUTLET_ID as fa, Title as ma, titleGetCoords as pa, titleGetCssStyle as xa } from "./components/Title/Title.js";
+import { default as na } from "./components/InputDropzone/InputDropzone.js";
+import { default as sa } from "./components/InputDropzone/ItemPreview.js";
+import { default as da } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as Ta } from "./components/OnScreenSensor.js";
+import { Symbols as Ia } from "./components/Symbols.js";
+import { default as La } from "./components/Table/TableIconButton.js";
 export {
-  Ze as Accordion,
-  qe as AccordionContent,
-  $e as AccordionHeader,
-  eo as AccordionItem,
-  oo as AccordionTrigger,
+  qe as Accordion,
+  $e as AccordionContent,
+  eo as AccordionHeader,
+  oo as AccordionItem,
+  ro as AccordionTrigger,
   x as AnalyticsContext,
   u as AnalyticsProvider,
-  Ao as Avatar,
-  Do as BACKDROP_OUTLET_ID,
-  Oo as BackdropPortal,
-  Po as Badge,
-  he as BorderRadiusEnum,
-  Cr as Box,
-  Io as BurgerMenu,
-  To as BurgerMenuButton,
-  po as Button,
-  uo as ButtonBar,
-  xo as ButtonContent,
-  go as ButtonLink,
+  Do as Avatar,
+  Oo as BACKDROP_OUTLET_ID,
+  ko as BackdropPortal,
+  bo as Badge,
+  ve as BorderRadiusEnum,
+  Ir as Box,
+  Eo as BurgerMenu,
+  Co as BurgerMenuButton,
+  xo as Button,
+  so as ButtonBar,
+  lo as ButtonContent,
+  _o as ButtonLink,
   W as CLIPBOARD_TITLE_APPEARANCE,
   J as CURRENCY_MAP,
-  Fo as Carousel,
-  ho as CarouselControls,
-  Sr as Center,
-  fo as Checkbox,
-  to as ClipboardButton,
-  ve as ColorEnum,
-  No as ControlBox,
+  Mo as Carousel,
+  vo as CarouselControls,
+  yr as Center,
+  mo as Checkbox,
+  ao as ClipboardButton,
+  Ne as ColorEnum,
+  Uo as ControlBox,
+  C as DEFAULT_Q_SIZE,
   Yt as DEFAULT_TEXT_COLOR,
-  vt as DataTable,
-  Nt as DataTableHeaderItem,
-  Ut as DataTableRow,
-  Vo as Decorate,
-  zo as Dot,
-  ut as DropdownMenu,
-  lt as DropdownSelect,
-  ua as DropzoneItemPreview,
+  Nt as DataTable,
+  Ut as DataTableHeaderItem,
+  Vt as DataTableRow,
+  wo as Decorate,
+  Ko as Dot,
+  st as DropdownMenu,
+  nt as DropdownSelect,
+  sa as DropzoneItemPreview,
   Wo as FLYOUT_OUTLET_ID,
   Yo as FLYOUT_ROOT_ID,
-  Qo as FLYOUT_ROOT_SHRINK_CLASSNAME,
-  Z as FREE_PRICE_TEXT,
-  Rr as Flex,
-  _r as FlexAlignItemsEnum,
-  Ar as FlexDirectionEnum,
+  Go as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  q as FREE_PRICE_TEXT,
+  gr as Flex,
+  Ar as FlexAlignItemsEnum,
+  Dr as FlexDirectionEnum,
   Br as FlexJustifyContentEnum,
-  kr as FlexRestricter,
-  Dr as FlexWrapEnum,
-  Go as Flyout,
-  er as Icon,
+  Pr as FlexRestricter,
+  Or as FlexWrapEnum,
+  Ho as Flyout,
+  or as Icon,
   je as IconButton,
   Jo as Icons,
-  qo as IconsXLarge,
-  rr as Indicator,
-  ar as InfoPanel,
-  mr as Input,
-  la as InputDropzone,
-  sr as Interactive,
-  dr as Island,
-  cr as IslandCorner,
-  qt as Label,
-  Lo as Link,
-  io as LinkButton,
-  me as Linkify,
-  pe as LinkifyWithMD,
-  Kr as Loaf,
-  Xo as Logos,
-  C as MediaQueryContext,
-  E as MediaQueryContextProvider,
-  Ne as MediaQueryEnum,
-  Ue as MediaQueryValuesMap,
+  $o as IconsXLarge,
+  tr as Indicator,
+  fr as InfoPanel,
+  pr as Input,
+  na as InputDropzone,
+  ir as Interactive,
+  cr as Island,
+  Tr as IslandCorner,
+  $t as Label,
+  So as Link,
+  co as LinkButton,
+  pe as Linkify,
+  xe as LinkifyWithMD,
+  Qr as Loaf,
+  Zo as Logos,
+  I as MediaQueryContext,
+  L as MediaQueryContextProvider,
+  Ue as MediaQueryEnum,
+  Ve as MediaQueryValuesMap,
   Yr as Modal,
-  Gr as NavList,
-  Xr as OVERLAY_OUTLET_ID,
-  Ve as OffsetEnum,
-  ca as OnScreenSensor,
+  Hr as NavList,
+  Zr as OVERLAY_OUTLET_ID,
+  we as OffsetEnum,
+  Ta as OnScreenSensor,
   jr as Overlay,
-  br as Pad,
-  Mr as Page,
-  Zr as Pagination,
-  $r as Popover,
-  ot as PremiumBadge,
-  tt as Prose,
-  ft as Radio,
-  vr as Rail,
-  Et as Range,
-  St as RangeInput,
-  Rt as RangeWithInputs,
-  xr as RichInput,
+  Fr as Pad,
+  hr as Page,
+  qr as Pagination,
+  et as Popover,
+  rt as PremiumBadge,
+  at as Prose,
+  mt as Radio,
+  Nr as Rail,
+  Lt as Range,
+  yt as RangeInput,
+  gt as RangeWithInputs,
+  lr as RichInput,
   l as SITE_LINK_CLICK_EVENT_NAME,
-  Ur as Scrollable,
-  pt as Select,
-  it as Separator,
-  ct as Shroud,
-  ia as Skeleton,
-  Ct as Slider,
-  _t as Spacer,
-  we as SpacerEnum,
-  ze as SpacingEnum,
+  Vr as Scrollable,
+  xt as Select,
+  dt as Separator,
+  Tt as Shroud,
+  da as Skeleton,
+  It as Slider,
+  At as Spacer,
+  ze as SpacerEnum,
+  Ke as SpacingEnum,
   Bt as Style,
-  nr as StyledInput,
-  ra as StyledTextarea,
-  kt as Switch,
-  Ca as Symbols,
-  Qt as TEXT_OPACITY_MAP,
-  aa as TITLE_OUTLET_ID,
-  wt as Table,
-  Ea as TableIconButton,
-  Kt as TableResponsiveText,
-  Mt as Tabular,
-  Gt as Text,
-  Ht as TextBlock,
-  Ke as TextSizeEnum,
-  ea as Textarea,
-  fa as Title,
-  bt as ToggleGroup,
-  wr as VirtualScrollable,
+  ur as StyledInput,
+  ta as StyledTextarea,
+  Pt as Switch,
+  Ia as Symbols,
+  Gt as TEXT_OPACITY_MAP,
+  fa as TITLE_OUTLET_ID,
+  zt as Table,
+  La as TableIconButton,
+  Qt as TableResponsiveText,
+  ht as Tabular,
+  Ht as Text,
+  Xt as TextBlock,
+  Qe as TextSizeEnum,
+  oa as Textarea,
+  ma as Title,
+  Ft as ToggleGroup,
+  zr as VirtualScrollable,
   We as ZIndexEnum,
-  Ce as clamp,
-  Ie as clamp01,
+  Ie as clamp,
+  Ee as clamp01,
   a as clsx,
-  R as createStoreContext,
-  De as debounce,
-  xe as defaultLinkReplacer,
-  le as defaultLinkReplacerx,
-  _ as formatBytes,
-  q as formatCurrency,
-  G as formatDate,
-  H as formatLocaleDate,
-  X as formatShortDate,
-  lo as getButtonClassName,
-  Pe as getColor,
-  So as getLinkClassName,
-  yo as getLinkStyles,
-  Xt as getTextOpacity,
+  g as createStoreContext,
+  Oe as debounce,
+  le as defaultLinkReplacer,
+  ne as defaultLinkReplacerx,
+  A as formatBytes,
+  $ as formatCurrency,
+  H as formatDate,
+  X as formatLocaleDate,
+  Z as formatShortDate,
+  no as getButtonClassName,
+  be as getColor,
+  yo as getLinkClassName,
+  Ro as getLinkStyles,
+  Zt as getTextOpacity,
   m as getValue,
-  ee as identity,
-  oe as invoke,
-  ne as isExternalUrl,
-  Se as isFalseString,
-  Qe as isInEnum,
-  ye as isTrueString,
-  He as joaat32,
+  oe as identity,
+  re as invoke,
+  ue as isExternalUrl,
+  ye as isFalseString,
+  Ge as isInEnum,
+  Re as isTrueString,
+  Xe as joaat32,
   jt as lineHeightResponsiveValueFormatter,
-  ue as linkify,
-  se as linkifyWithMD,
-  ie as linkifyx,
-  de as matchLinkNodes,
-  ce as matchLinks,
+  se as linkify,
+  ie as linkifyWithMD,
+  de as linkifyx,
+  ce as matchLinkNodes,
+  Te as matchLinks,
   r as mergeRefs,
-  Ee as minmax,
-  re as noop,
-  Re as normalizeSlashes,
-  ge as replaceRange,
-  te as returnFalse,
-  ae as returnTrue,
-  _e as splitByIndices,
-  Er as stringPropFormater,
+  Le as minmax,
+  te as noop,
+  ge as normalizeSlashes,
+  _e as replaceRange,
+  ae as returnFalse,
+  fe as returnTrue,
+  Ae as splitByIndices,
+  Lr as stringPropFormater,
   Jt as textSizeResponsiveValueFormatter,
-  Oe as throttle,
-  ma as titleGetCoords,
-  pa as titleGetCssStyle,
+  ke as throttle,
+  pa as titleGetCoords,
+  xa as titleGetCssStyle,
   B as truncateWithEllipsis,
-  Fe as ui,
-  Ae as unicodeCharAt,
+  Me as ui,
+  De as unicodeCharAt,
   i as useAnalytics,
   Y as useClipboardComponent,
-  Dt as useContextualStyle,
-  F as useDynamicRef,
-  h as useGlobalKeyboardEvent,
-  P as useInstance,
-  N as useKeyboardClose,
-  S as useMediaQuery,
-  z as useOutlet,
-  O as usePopoverController,
+  Ot as useContextualStyle,
+  M as useDynamicRef,
+  v as useGlobalKeyboardEvent,
+  b as useInstance,
+  U as useKeyboardClose,
+  y as useMediaQuery,
+  K as useOutlet,
+  k as usePopoverController,
   c as useSiteLinkClick,
-  V as useWindowResize
+  w as useWindowResize
 };

package/dist/utils/contexts/MediaQueryContext/MediaQueryContext.d.ts

@@ -1,11 +1,13 @@
 import { default as React } from 'react';
 
+export declare const DEFAULT_Q_SIZE = 8;
 export interface MediaQueryContextValueType {
     isMobile: boolean | null;
     isTablet: boolean | null;
     isDesktop: boolean | null;
     isLDesktop: boolean | null;
     size: number | null;
+    qSize: number;
 }
 declare const MediaQueryContext: React.Context<MediaQueryContextValueType>;
 export default MediaQueryContext;

package/dist/utils/contexts/MediaQueryContext/MediaQueryContext.js

@@ -1,11 +1,13 @@
 import e from "react";
-const t = e.createContext({
+const t = 8, o = e.createContext({
   isMobile: null,
   isTablet: null,
   isDesktop: null,
   isLDesktop: null,
-  size: null
+  size: null,
+  qSize: t
 });
 export {
-  t as default
+  t as DEFAULT_Q_SIZE,
+  o as default
 };

package/dist/utils/contexts/MediaQueryContext/MediaQueryContextProvider.js

@@ -1,38 +1,40 @@
-import { jsx as a } from "react/jsx-runtime";
-import r from "react";
+import { jsx as c } from "react/jsx-runtime";
+import i from "react";
 import "../../ui/ui.js";
 import { MediaQueryValuesMap as t } from "../../ui/ui.types.js";
-import d from "./MediaQueryContext.js";
-function m(o) {
+import f, { DEFAULT_Q_SIZE as u } from "./MediaQueryContext.js";
+function p(s) {
   const {
-    children: u
-  } = o, i = r.useRef(null), [e, s] = r.useState(null);
-  r.useLayoutEffect(() => {
+    children: l
+  } = s, r = i.useRef(null), [e, a] = i.useState(null), [o, d] = i.useState(u);
+  i.useLayoutEffect(() => {
     const n = () => {
-      typeof window > "u" || (i.current && clearTimeout(i.current), i.current = setTimeout(() => {
-        s(window.innerWidth);
+      typeof window > "u" || (r.current && clearTimeout(r.current), r.current = setTimeout(() => {
+        a(window.innerWidth), d(parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.5);
       }, 250));
     };
     return window.addEventListener("resize", n), n(), () => {
       window.removeEventListener("resize", n);
     };
   }, []);
-  const l = r.useMemo(() => e === null ? {
+  const m = i.useMemo(() => e === null ? {
     size: null,
     isMobile: null,
     isTablet: null,
     isDesktop: null,
-    isLDesktop: null
+    isLDesktop: null,
+    qSize: u
   } : {
     size: e,
+    qSize: o,
     isMobile: e < t.medium,
     isTablet: e >= t.medium && e < t.large,
     isDesktop: e >= t.large && e < t.xlarge,
     isLDesktop: e >= t.xlarge
-  }, [e]);
-  return /* @__PURE__ */ a(d.Provider, { value: l, children: u });
+  }, [e, o]);
+  return /* @__PURE__ */ c(f.Provider, { value: m, children: l });
 }
-const M = r.memo(m);
+const v = i.memo(p);
 export {
-  M as default
+  v as default
 };

package/dist/utils/contexts/MediaQueryContext/index.d.ts

@@ -1,4 +1,4 @@
-export { default as MediaQueryContext } from './MediaQueryContext';
+export { default as MediaQueryContext, DEFAULT_Q_SIZE } from './MediaQueryContext';
 export { default as MediaQueryContextProvider } from './MediaQueryContextProvider';
 export { default as useMediaQuery } from './useMediaQuery';
 export type { MediaQueryContextValueType } from './MediaQueryContext';

package/dist/utils/contexts/MediaQueryContext/index.js

@@ -1,8 +1,9 @@
-import { default as t } from "./MediaQueryContext.js";
-import { default as o } from "./MediaQueryContextProvider.js";
-import { default as u } from "./useMediaQuery.js";
+import { DEFAULT_Q_SIZE as t, default as a } from "./MediaQueryContext.js";
+import { default as d } from "./MediaQueryContextProvider.js";
+import { default as f } from "./useMediaQuery.js";
 export {
-  t as MediaQueryContext,
-  o as MediaQueryContextProvider,
-  u as useMediaQuery
+  t as DEFAULT_Q_SIZE,
+  a as MediaQueryContext,
+  d as MediaQueryContextProvider,
+  f as useMediaQuery
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfx-dev/ui-components",
-  "version": "5.0.30",
+  "version": "5.0.32",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",