@cfx-dev/ui-components 4.5.16 → 4.5.17

package/dist/main.js

@@ -2,101 +2,104 @@ import { mergeRefs as r } from "./utils/mergeRefs.js";
 import { clsx as a } from "./utils/clsx.js";
 import { getValue as m } from "./utils/getValue.js";
 import { usePopoverController as x } from "./utils/hooks/usePopoverController.js";
-import { useInstance as n } from "./utils/hooks/useInstance.js";
+import { useInstance as l } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as C } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as g } from "./utils/hooks/useOutlet.js";
-import { CLIPBOARD_TITLE_APPEARANCE as B, useClipboardComponent as R } from "./utils/hooks/useClipboardComponent.js";
+import { useWindowResize as g } from "./utils/hooks/useWindowResize.js";
+import { useOutlet as E } from "./utils/hooks/useOutlet.js";
+import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as B } from "./utils/hooks/useClipboardComponent.js";
 import { formatDate as y, formatLocaleDate as D, formatShortDate as P } from "./utils/formatDate.js";
 import { CURRENCY_MAP as A, FREE_PRICE_TEXT as k, formatCurrency as _ } from "./utils/formatCurrency.js";
-import { identity as O, invoke as v, noop as h, returnFalse as U, returnTrue as M } from "./utils/functional.js";
-import { Linkify as z, defaultLinkReplacer as N, defaultLinkReplacerx as V, isExternalUrl as G, linkify as Y, linkifyx as H, matchLinkNodes as K, matchLinks as X } from "./utils/links.js";
+import { identity as O, invoke as h, noop as v, returnFalse as U, returnTrue as M } from "./utils/functional.js";
+import { Linkify as z, defaultLinkReplacer as N, defaultLinkReplacerx as V, isExternalUrl as G, linkify as Y, linkifyx as H, matchLinkNodes as K, matchLinks as W } from "./utils/links.js";
 import { clamp as j, clamp01 as J, minmax as Q } from "./utils/math.js";
 import { isFalseString as q, isTrueString as $, normalizeSlashes as oo, replaceRange as eo, splitByIndices as ro, unicodeCharAt as to } from "./utils/string.js";
 import { debounce as fo, throttle as mo } from "./utils/execution.js";
 import { getColor as xo } from "./utils/color.js";
-import { ui as no } from "./utils/ui/ui.js";
-import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, OffsetEnum as To, TextSizeEnum as Io, ZIndexEnum as Co } from "./utils/ui/ui.types.js";
-import { isInEnum as go } from "./utils/enum.js";
-import { joaat32 as Bo } from "./utils/joaat32.js";
+import { ui as lo } from "./utils/ui/ui.js";
+import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, OffsetEnum as To, TextSizeEnum as Io, ZIndexEnum as go } from "./utils/ui/ui.types.js";
+import { isInEnum as Eo } from "./utils/enum.js";
+import { joaat32 as Lo } from "./utils/joaat32.js";
 import { default as So } from "./components/IconButton/IconButton.js";
 import { Accordion as Do, AccordionContent as Po, AccordionHeader as bo, AccordionItem as Ao, AccordionTrigger as ko } from "./components/Accordion/Accordion.js";
 import { default as Fo } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as vo } from "./components/Checkbox/Checkbox.js";
+import { default as ho } from "./components/Checkbox/Checkbox.js";
 import { default as Uo, ButtonContent as Mo, getButtonClassName as wo } from "./components/Button/Button.js";
 import { ButtonBar as No } from "./components/Button/ButtonBar.js";
 import { LinkButton as Go } from "./components/Button/LinkButton.js";
 import { BurgerMenuButton as Ho } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as Xo } from "./components/BurgerMenu/BurgerMenu.js";
+import { BurgerMenu as Wo } from "./components/BurgerMenu/BurgerMenu.js";
 import { default as jo, getLinkClassName as Jo, getLinkStyles as Qo } from "./components/Link/Link.js";
 import { default as qo } from "./components/Link/ButtonLink.js";
 import { Avatar as oe } from "./components/Avatar/Avatar.js";
 import { BACKDROP_OUTLET_ID as re, default as te } from "./components/BackdropPortal/BackdropPortal.js";
 import { Badge as fe } from "./components/Badge/Badge.js";
 import { default as pe } from "./components/ControlBox/ControlBox.js";
-import { default as le } from "./components/CountryFlag/CountryFlag.js";
+import { default as ne } from "./components/CountryFlag/CountryFlag.js";
 import { default as ue } from "./components/Decorate/Decorate.js";
 import { Dot as ie } from "./components/Dot/Dot.js";
 import { FLYOUT_OUTLET_ID as ce, Flyout as Te } from "./components/Flyout/Flyout.js";
-import { Logos as Ce } from "./components/Logos/index.js";
-import { I as ge } from "./cfxIcons-B4SQ4Ljd.js";
-import { I as Be } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Logos as ge } from "./components/Logos/index.js";
+import { I as Ee } from "./cfxIcons-B4SQ4Ljd.js";
+import { I as Le } from "./cfxIconsBig-BLJjMT-Y.js";
 import { Icon as Se } from "./components/Icon/Icon.js";
 import { IconBig as De } from "./components/IconBig/IconBig.js";
 import { Indicator as be } from "./components/Indicator/Indicator.js";
 import { default as ke } from "./components/InfoPanel/InfoPanel.js";
 import { default as Fe } from "./components/Input/Input.js";
-import { default as ve } from "./components/Input/RichInput.js";
+import { default as he } from "./components/Input/RichInput.js";
 import { default as Ue } from "./components/StyledInput/StyledInput.js";
 import { Interactive as we } from "./components/Interactive/Interactive.js";
 import { Island as Ne, IslandCorner as Ve } from "./components/Island/Island.js";
 import { default as Ye } from "./components/Box/Box.js";
 import { stringPropFormater as Ke } from "./components/RSC/Box/Box.js";
-import { Center as We } from "./components/Layout/Center/Center.js";
+import { Center as Xe } from "./components/Layout/Center/Center.js";
 import { default as Je } from "./components/Flex/Flex.js";
 import { FlexAlignItemsEnum as Ze, FlexDirectionEnum as qe, FlexJustifyContentEnum as $e, FlexWrapEnum as or } from "./components/RSC/Flex/Flex.types.js";
 import { FlexRestricter as rr } from "./components/RSC/Flex/FlexRestricter.js";
 import { Pad as ar } from "./components/Layout/Pad/Pad.js";
 import { Page as mr } from "./components/Layout/Page/Page.js";
 import { R as xr } from "./Rail-CHFAf3wJ.js";
-import { Scrollable as nr } from "./components/Scrollable/Scrollable.js";
+import { Scrollable as lr } from "./components/Scrollable/Scrollable.js";
 import { VirtualScrollable as sr } from "./components/Scrollable/VirtualScrollable.js";
 import { Loaf as dr } from "./components/Loaf/Loaf.js";
 import { Modal as Tr } from "./components/Modal/Modal.js";
-import { NavList as Cr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as gr, Overlay as Lr } from "./components/Overlay/Overlay.js";
-import { default as Rr } from "./components/Pagination/Pagination.js";
+import { NavList as gr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Er, Overlay as Rr } from "./components/Overlay/Overlay.js";
+import { default as Br } from "./components/Pagination/Pagination.js";
 import { Popover as yr } from "./components/Popover/Popover.js";
 import { PremiumBadge as Pr } from "./components/PremiumBadge/PremiumBadge.js";
 import { Prose as Ar } from "./components/Prose/Prose.js";
 import { Radio as _r } from "./components/Radio/Radio.js";
 import { Select as Or } from "./components/Select/Select.js";
-import { DropdownSelect as hr } from "./components/DropdownSelect/DropdownSelect.js";
+import { DropdownSelect as vr } from "./components/DropdownSelect/DropdownSelect.js";
 import { default as Mr } from "./components/DropdownMenu/DropdownMenu.js";
 import { Separator as zr } from "./components/Separator/Separator.js";
 import { Shroud as Vr } from "./components/Shroud/Shroud.js";
 import { Slider as Yr } from "./components/Slider/Slider.js";
-import { Spacer as Kr } from "./components/Spacer/Spacer.js";
-import { Style as Wr, useContextualStyle as jr } from "./components/Style/Style.js";
-import { default as Qr } from "./components/Switch/Switch.js";
-import { ToggleGroup as qr } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as ot } from "./components/Tabular/Tabular.js";
-import { DataTable as rt, DataTableHeaderItem as tt, DataTableRow as at } from "./components/DataTable/DataTable.js";
-import { Table as mt } from "./components/Table/index.js";
-import { default as xt } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as nt, TEXT_OPACITY_MAP as ut, Text as st, TextBlock as it, getTextOpacity as dt, lineHeightResponsiveValueFormatter as ct, textSizeResponsiveValueFormatter as Tt } from "./components/Text/Text.js";
-import { default as Ct } from "./components/Label/Label.js";
-import { Textarea as gt } from "./components/Textarea/Textarea.js";
-import { default as Bt } from "./components/StyledTextarea/StyledTextarea.js";
-import { TITLE_OUTLET_ID as St, Title as yt, titleGetCoords as Dt, titleGetCssStyle as Pt } from "./components/Title/Title.js";
-import { default as At } from "./components/InputDropzone/InputDropzone.js";
-import { default as _t } from "./components/InputDropzone/ItemPreview.js";
-import { default as Ot } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as ht } from "./components/OnScreenSensor.js";
-import { Symbols as Mt } from "./components/Symbols.js";
-import { default as zt } from "./components/Table/TableIconButton.js";
+import { default as Kr } from "./components/Range/Range.js";
+import { default as Xr } from "./components/Range/RangeInput.js";
+import { default as Jr } from "./components/Range/RangeWithInputs.js";
+import { Spacer as Zr } from "./components/Spacer/Spacer.js";
+import { Style as $r, useContextualStyle as ot } from "./components/Style/Style.js";
+import { default as rt } from "./components/Switch/Switch.js";
+import { ToggleGroup as at } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as mt } from "./components/Tabular/Tabular.js";
+import { DataTable as xt, DataTableHeaderItem as nt, DataTableRow as lt } from "./components/DataTable/DataTable.js";
+import { Table as st } from "./components/Table/index.js";
+import { default as dt } from "./components/TableResponsiveText/TableResponsiveText.js";
+import { DEFAULT_TEXT_COLOR as Tt, TEXT_OPACITY_MAP as It, Text as gt, TextBlock as Ct, getTextOpacity as Et, lineHeightResponsiveValueFormatter as Rt, textSizeResponsiveValueFormatter as Lt } from "./components/Text/Text.js";
+import { default as St } from "./components/Label/Label.js";
+import { Textarea as Dt } from "./components/Textarea/Textarea.js";
+import { default as bt } from "./components/StyledTextarea/StyledTextarea.js";
+import { TITLE_OUTLET_ID as kt, Title as _t, titleGetCoords as Ft, titleGetCssStyle as Ot } from "./components/Title/Title.js";
+import { default as vt } from "./components/InputDropzone/InputDropzone.js";
+import { default as Mt } from "./components/InputDropzone/ItemPreview.js";
+import { default as zt } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as Vt } from "./components/OnScreenSensor.js";
+import { Symbols as Yt } from "./components/Symbols.js";
+import { default as Kt } from "./components/Table/TableIconButton.js";
 export {
   Do as Accordion,
   Po as AccordionContent,
@@ -109,29 +112,29 @@ export {
   fe as Badge,
   so as BorderRadiusEnum,
   Ye as Box,
-  Xo as BurgerMenu,
+  Wo as BurgerMenu,
   Ho as BurgerMenuButton,
   Uo as Button,
   No as ButtonBar,
   Mo as ButtonContent,
   qo as ButtonLink,
-  B as CLIPBOARD_TITLE_APPEARANCE,
+  L as CLIPBOARD_TITLE_APPEARANCE,
   A as CURRENCY_MAP,
-  We as Center,
-  vo as Checkbox,
+  Xe as Center,
+  ho as Checkbox,
   Fo as ClipboardButton,
   io as ColorEnum,
   pe as ControlBox,
-  le as CountryFlag,
-  nt as DEFAULT_TEXT_COLOR,
-  rt as DataTable,
-  tt as DataTableHeaderItem,
-  at as DataTableRow,
+  ne as CountryFlag,
+  Tt as DEFAULT_TEXT_COLOR,
+  xt as DataTable,
+  nt as DataTableHeaderItem,
+  lt as DataTableRow,
   ue as Decorate,
   ie as Dot,
   Mr as DropdownMenu,
-  hr as DropdownSelect,
-  _t as DropzoneItemPreview,
+  vr as DropdownSelect,
+  Mt as DropzoneItemPreview,
   ce as FLYOUT_OUTLET_ID,
   k as FREE_PRICE_TEXT,
   Je as Flex,
@@ -144,63 +147,66 @@ export {
   Se as Icon,
   De as IconBig,
   So as IconButton,
-  ge as Icons,
-  Be as IconsBig,
+  Ee as Icons,
+  Le as IconsBig,
   be as Indicator,
   ke as InfoPanel,
   Fe as Input,
-  At as InputDropzone,
+  vt as InputDropzone,
   we as Interactive,
   Ne as Island,
   Ve as IslandCorner,
-  Ct as Label,
+  St as Label,
   jo as Link,
   Go as LinkButton,
   z as Linkify,
   dr as Loaf,
-  Ce as Logos,
+  ge as Logos,
   co as MediaQueryEnum,
   Tr as Modal,
-  Cr as NavList,
-  gr as OVERLAY_OUTLET_ID,
+  gr as NavList,
+  Er as OVERLAY_OUTLET_ID,
   To as OffsetEnum,
-  ht as OnScreenSensor,
-  Lr as Overlay,
+  Vt as OnScreenSensor,
+  Rr as Overlay,
   ar as Pad,
   mr as Page,
-  Rr as Pagination,
+  Br as Pagination,
   yr as Popover,
   Pr as PremiumBadge,
   Ar as Prose,
   _r as Radio,
   xr as Rail,
-  ve as RichInput,
-  nr as Scrollable,
+  Kr as Range,
+  Xr as RangeInput,
+  Jr as RangeWithInputs,
+  he as RichInput,
+  lr as Scrollable,
   Or as Select,
   zr as Separator,
   Vr as Shroud,
-  Ot as Skeleton,
+  zt as Skeleton,
   Yr as Slider,
-  Kr as Spacer,
-  Wr as Style,
+  Zr as Spacer,
+  $r as Style,
   Ue as StyledInput,
-  Bt as StyledTextarea,
-  Qr as Switch,
-  Mt as Symbols,
-  ut as TEXT_OPACITY_MAP,
-  St as TITLE_OUTLET_ID,
-  mt as Table,
-  zt as TableIconButton,
-  xt as TableResponsiveText,
-  ot as Tabular,
-  st as Text,
-  it as TextBlock,
+  bt as StyledTextarea,
+  rt as Switch,
+  Yt as Symbols,
+  It as TEXT_OPACITY_MAP,
+  kt as TITLE_OUTLET_ID,
+  st as Table,
+  Kt as TableIconButton,
+  dt as TableResponsiveText,
+  mt as Tabular,
+  gt as Text,
+  Ct as TextBlock,
   Io as TextSizeEnum,
-  gt as Textarea,
-  yt as Title,
-  qr as ToggleGroup,
+  Dt as Textarea,
+  _t as Title,
+  at as ToggleGroup,
   sr as VirtualScrollable,
-  Co as ZIndexEnum,
+  go as ZIndexEnum,
   j as clamp,
   J as clamp01,
   a as clsx,
@@ -215,42 +221,42 @@ export {
   xo as getColor,
   Jo as getLinkClassName,
   Qo as getLinkStyles,
-  dt as getTextOpacity,
+  Et as getTextOpacity,
   m as getValue,
   O as identity,
-  v as invoke,
+  h as invoke,
   G as isExternalUrl,
   q as isFalseString,
-  go as isInEnum,
+  Eo as isInEnum,
   $ as isTrueString,
-  Bo as joaat32,
-  ct as lineHeightResponsiveValueFormatter,
+  Lo as joaat32,
+  Rt as lineHeightResponsiveValueFormatter,
   Y as linkify,
   H as linkifyx,
   K as matchLinkNodes,
-  X as matchLinks,
+  W as matchLinks,
   r as mergeRefs,
   Q as minmax,
-  h as noop,
+  v as noop,
   oo as normalizeSlashes,
   eo as replaceRange,
   U as returnFalse,
   M as returnTrue,
   ro as splitByIndices,
   Ke as stringPropFormater,
-  Tt as textSizeResponsiveValueFormatter,
+  Lt as textSizeResponsiveValueFormatter,
   mo as throttle,
-  Dt as titleGetCoords,
-  Pt as titleGetCssStyle,
-  no as ui,
+  Ft as titleGetCoords,
+  Ot as titleGetCssStyle,
+  lo as ui,
   to as unicodeCharAt,
-  R as useClipboardComponent,
-  jr as useContextualStyle,
+  B as useClipboardComponent,
+  ot as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
-  n as useInstance,
+  l as useInstance,
   T as useKeyboardClose,
-  g as useOutlet,
+  E as useOutlet,
   x as usePopoverController,
-  C as useWindowResize
+  g as useWindowResize
 };

package/dist/styles-scss/_ui.scss

@@ -37,6 +37,16 @@
   @return calc(var(--quant) * #{$multiplier});
 }
 
+$controlHeightsMap: (
+  'xxsmall': q(1.5),
+  'xsmall': q(3),
+  'small': q(4),
+  'normal': q(6),
+  'large': q(7),
+  'xlarge': q(10),
+  'xxlarge': q(12.5),
+);
+
 @function control-height($size: 'normal') {
   @return var(--control-height-#{$size});
 }
@@ -77,6 +87,15 @@
   line-height: var(--line-height-#{$size});
 }
 
+$borderRadiusMap: (
+  'none': 0px,
+  'xxsmall': q(0.25),
+  'xsmall': q(0.5),
+  'small': q(0.75),
+  'normal': q(1.5),
+  'pill': 9999px,
+);
+
 @function border-radius($size: 'normal') {
   @return var(--border-radius-#{$size});
 }
@@ -411,20 +430,3 @@ $mpMap: (
   pb: padding-bottom,
   pl: padding-left,
 );
-$controlHeightsMap: (
-  'xxsmall': q(1.5),
-  'xsmall': q(3),
-  'small': q(4),
-  'normal': q(6),
-  'large': q(7),
-  'xlarge': q(10),
-  'xxlarge': q(12.5),
-);
-$borderRadiusMap: (
-  'none': 0px,
-  'xxsmall': q(0.25),
-  'xsmall': q(0.5),
-  'small': q(0.75),
-  'normal': q(1.5),
-  'pill': 9999px,
-);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.5.16",
+  "version": "4.5.17",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",