@cfx-dev/ui-components 4.5.1 → 4.5.4

package/dist/main.js

@@ -2,14 +2,14 @@ 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 l } from "./utils/hooks/useInstance.js";
+import { useInstance as n } 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 { formatDate as D, formatLocaleDate as y, formatShortDate as P } from "./utils/formatDate.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";
@@ -17,12 +17,12 @@ 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 lo } from "./utils/ui/ui.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 { default as So } from "./components/IconButton/IconButton.js";
-import { Accordion as yo, AccordionContent as Po, AccordionHeader as bo, AccordionItem as Ao, AccordionTrigger as ko } from "./components/Accordion/Accordion.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 Uo, ButtonContent as Mo, getButtonClassName as wo } from "./components/Button/Button.js";
@@ -36,7 +36,7 @@ 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 ne } from "./components/CountryFlag/CountryFlag.js";
+import { default as le } 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";
@@ -44,59 +44,61 @@ import { Logos as Ce } from "./components/Logos/index.js";
 import { I as ge } from "./cfxIcons-B9nzO6TW.js";
 import { I as Be } from "./cfxIconsBig-BLJjMT-Y.js";
 import { Icon as Se } from "./components/Icon/Icon.js";
-import { IconBig as ye } from "./components/IconBig/IconBig.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 { Interactive as Ue } from "./components/Interactive/Interactive.js";
-import { Island as we, IslandCorner as ze } from "./components/Island/Island.js";
-import { default as Ve } from "./components/Box/Box.js";
-import { stringPropFormater as Ye } from "./components/RSC/Box/Box.js";
-import { Center as Ke } from "./components/Layout/Center/Center.js";
-import { default as We } from "./components/Flex/Flex.js";
-import { FlexAlignItemsEnum as Je, FlexDirectionEnum as Qe, FlexJustifyContentEnum as Ze, FlexWrapEnum as qe } from "./components/RSC/Flex/Flex.types.js";
-import { FlexRestricter as or } from "./components/RSC/Flex/FlexRestricter.js";
-import { Pad as rr } from "./components/Layout/Pad/Pad.js";
-import { Page as ar } from "./components/Layout/Page/Page.js";
-import { R as mr } from "./Rail-CHFAf3wJ.js";
-import { Scrollable as xr } from "./components/Scrollable/Scrollable.js";
-import { VirtualScrollable as lr } from "./components/Scrollable/VirtualScrollable.js";
-import { Loaf as sr } from "./components/Loaf/Loaf.js";
-import { Modal as dr } from "./components/Modal/Modal.js";
-import { NavList as Tr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Cr, Overlay as Er } from "./components/Overlay/Overlay.js";
-import { default as Lr } from "./components/Pagination/Pagination.js";
-import { Popover as Rr } from "./components/Popover/Popover.js";
-import { PremiumBadge as Dr } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Pr } from "./components/Prose/Prose.js";
-import { Radio as Ar } from "./components/Radio/Radio.js";
-import { Select as _r } from "./components/Select/Select.js";
-import { DropdownSelect as Or } from "./components/DropdownSelect/DropdownSelect.js";
-import { default as hr } from "./components/DropdownMenu/DropdownMenu.js";
-import { Separator as Mr } from "./components/Separator/Separator.js";
-import { Shroud as zr } from "./components/Shroud/Shroud.js";
-import { Slider as Vr } from "./components/Slider/Slider.js";
-import { Spacer as Yr } from "./components/Spacer/Spacer.js";
-import { Style as Kr, useContextualStyle as Xr } from "./components/Style/Style.js";
-import { default as jr } from "./components/Switch/Switch.js";
-import { ToggleGroup as Qr } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as qr } from "./components/Tabular/Tabular.js";
-import { DataTable as ot, DataTableHeaderItem as et, DataTableRow as rt } from "./components/DataTable/DataTable.js";
-import { Table as at } from "./components/Table/index.js";
-import { default as mt } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as xt, TEXT_OPACITY_MAP as nt, Text as lt, TextBlock as ut, getTextOpacity as st, lineHeightResponsiveValueFormatter as it, textSizeResponsiveValueFormatter as dt } from "./components/Text/Text.js";
-import { default as Tt } from "./components/Label/Label.js";
-import { Textarea as Ct } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as gt, Title as Lt, titleGetCoords as Bt, titleGetCssStyle as Rt } from "./components/Title/Title.js";
-import { default as Dt } from "./components/InputDropzone/InputDropzone.js";
-import { default as Pt } from "./components/InputDropzone/ItemPreview.js";
-import { default as At } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as _t } from "./components/OnScreenSensor.js";
-import { Symbols as Ot } from "./components/Symbols.js";
-import { default as ht } from "./components/Table/TableIconButton.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 { 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 { 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 { 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 { 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";
 export {
-  yo as Accordion,
+  Do as Accordion,
   Po as AccordionContent,
   bo as AccordionHeader,
   Ao as AccordionItem,
@@ -106,7 +108,7 @@ export {
   te as BackdropPortal,
   fe as Badge,
   so as BorderRadiusEnum,
-  Ve as Box,
+  Ye as Box,
   Xo as BurgerMenu,
   Ho as BurgerMenuButton,
   Uo as Button,
@@ -115,87 +117,89 @@ export {
   qo as ButtonLink,
   B as CLIPBOARD_TITLE_APPEARANCE,
   A as CURRENCY_MAP,
-  Ke as Center,
+  We as Center,
   vo as Checkbox,
   Fo as ClipboardButton,
   io as ColorEnum,
   pe as ControlBox,
-  ne as CountryFlag,
-  xt as DEFAULT_TEXT_COLOR,
-  ot as DataTable,
-  et as DataTableHeaderItem,
-  rt as DataTableRow,
+  le as CountryFlag,
+  nt as DEFAULT_TEXT_COLOR,
+  rt as DataTable,
+  tt as DataTableHeaderItem,
+  at as DataTableRow,
   ue as Decorate,
   ie as Dot,
-  hr as DropdownMenu,
-  Or as DropdownSelect,
-  Pt as DropzoneItemPreview,
+  Mr as DropdownMenu,
+  hr as DropdownSelect,
+  _t as DropzoneItemPreview,
   ce as FLYOUT_OUTLET_ID,
   k as FREE_PRICE_TEXT,
-  We as Flex,
-  Je as FlexAlignItemsEnum,
-  Qe as FlexDirectionEnum,
-  Ze as FlexJustifyContentEnum,
-  or as FlexRestricter,
-  qe as FlexWrapEnum,
+  Je as Flex,
+  Ze as FlexAlignItemsEnum,
+  qe as FlexDirectionEnum,
+  $e as FlexJustifyContentEnum,
+  rr as FlexRestricter,
+  or as FlexWrapEnum,
   Te as Flyout,
   Se as Icon,
-  ye as IconBig,
+  De as IconBig,
   So as IconButton,
   ge as Icons,
   Be as IconsBig,
   be as Indicator,
   ke as InfoPanel,
   Fe as Input,
-  Dt as InputDropzone,
-  Ue as Interactive,
-  we as Island,
-  ze as IslandCorner,
-  Tt as Label,
+  At as InputDropzone,
+  we as Interactive,
+  Ne as Island,
+  Ve as IslandCorner,
+  Ct as Label,
   jo as Link,
   Go as LinkButton,
   z as Linkify,
-  sr as Loaf,
+  dr as Loaf,
   Ce as Logos,
   co as MediaQueryEnum,
-  dr as Modal,
-  Tr as NavList,
-  Cr as OVERLAY_OUTLET_ID,
+  Tr as Modal,
+  Cr as NavList,
+  gr as OVERLAY_OUTLET_ID,
   To as OffsetEnum,
-  _t as OnScreenSensor,
-  Er as Overlay,
-  rr as Pad,
-  ar as Page,
-  Lr as Pagination,
-  Rr as Popover,
-  Dr as PremiumBadge,
-  Pr as Prose,
-  Ar as Radio,
-  mr as Rail,
+  ht as OnScreenSensor,
+  Lr as Overlay,
+  ar as Pad,
+  mr as Page,
+  Rr as Pagination,
+  yr as Popover,
+  Pr as PremiumBadge,
+  Ar as Prose,
+  _r as Radio,
+  xr as Rail,
   ve as RichInput,
-  xr as Scrollable,
-  _r as Select,
-  Mr as Separator,
-  zr as Shroud,
-  At as Skeleton,
-  Vr as Slider,
-  Yr as Spacer,
-  Kr as Style,
-  jr as Switch,
-  Ot as Symbols,
-  nt as TEXT_OPACITY_MAP,
-  gt as TITLE_OUTLET_ID,
-  at as Table,
-  ht as TableIconButton,
-  mt as TableResponsiveText,
-  qr as Tabular,
-  lt as Text,
-  ut as TextBlock,
+  nr as Scrollable,
+  Or as Select,
+  zr as Separator,
+  Vr as Shroud,
+  Ot as Skeleton,
+  Yr as Slider,
+  Kr as Spacer,
+  Wr 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,
   Io as TextSizeEnum,
-  Ct as Textarea,
-  Lt as Title,
-  Qr as ToggleGroup,
-  lr as VirtualScrollable,
+  gt as Textarea,
+  yt as Title,
+  qr as ToggleGroup,
+  sr as VirtualScrollable,
   Co as ZIndexEnum,
   j as clamp,
   J as clamp01,
@@ -204,14 +208,14 @@ export {
   N as defaultLinkReplacer,
   V as defaultLinkReplacerx,
   _ as formatCurrency,
-  D as formatDate,
-  y as formatLocaleDate,
+  y as formatDate,
+  D as formatLocaleDate,
   P as formatShortDate,
   wo as getButtonClassName,
   xo as getColor,
   Jo as getLinkClassName,
   Qo as getLinkStyles,
-  st as getTextOpacity,
+  dt as getTextOpacity,
   m as getValue,
   O as identity,
   v as invoke,
@@ -220,7 +224,7 @@ export {
   go as isInEnum,
   $ as isTrueString,
   Bo as joaat32,
-  it as lineHeightResponsiveValueFormatter,
+  ct as lineHeightResponsiveValueFormatter,
   Y as linkify,
   H as linkifyx,
   K as matchLinkNodes,
@@ -233,18 +237,18 @@ export {
   U as returnFalse,
   M as returnTrue,
   ro as splitByIndices,
-  Ye as stringPropFormater,
-  dt as textSizeResponsiveValueFormatter,
+  Ke as stringPropFormater,
+  Tt as textSizeResponsiveValueFormatter,
   mo as throttle,
-  Bt as titleGetCoords,
-  Rt as titleGetCssStyle,
-  lo as ui,
+  Dt as titleGetCoords,
+  Pt as titleGetCssStyle,
+  no as ui,
   to as unicodeCharAt,
   R as useClipboardComponent,
-  Xr as useContextualStyle,
+  jr as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
-  l as useInstance,
+  n as useInstance,
   T as useKeyboardClose,
   g as useOutlet,
   x as usePopoverController,

package/dist/rsc.d.ts

@@ -2,3 +2,7 @@ export { Box, stringPropFormater, getBoxClassNames, getBoxStyles, } from './comp
 export type { BoxProps } from './components/RSC/Box';
 export { Flex, FlexRestricter, FlexAlignItemsEnum, FlexDirectionEnum, FlexJustifyContentEnum, FlexWrapEnum, } from './components/RSC/Flex';
 export type { FlexProps, FlexRestricterProps, FlexAlignItemsType, FlexDirectionType, FlexJustifyContentType, FlexWrapType, } from './components/RSC/Flex';
+export { StyledInput } from './components/StyledInput';
+export type { StyledInputProps } from './components/StyledInput';
+export { StyledTextarea } from './components/StyledTextarea';
+export type { StyledTextareaProps, TextareaResizeType } from './components/StyledTextarea';

package/dist/rsc.js

@@ -1,15 +1,19 @@
 import { default as r, getBoxClassNames as o, getBoxStyles as x, stringPropFormater as l } from "./components/RSC/Box/Box.js";
-import { default as s } from "./components/RSC/Flex/Flex.js";
-import { FlexAlignItemsEnum as a, FlexDirectionEnum as f, FlexJustifyContentEnum as u, FlexWrapEnum as F } from "./components/RSC/Flex/Flex.types.js";
-import { FlexRestricter as p } from "./components/RSC/Flex/FlexRestricter.js";
+import { default as m } from "./components/RSC/Flex/Flex.js";
+import { FlexAlignItemsEnum as f, FlexDirectionEnum as n, FlexJustifyContentEnum as u, FlexWrapEnum as p } from "./components/RSC/Flex/Flex.types.js";
+import { FlexRestricter as d } from "./components/RSC/Flex/FlexRestricter.js";
+import { default as g } from "./components/StyledInput/StyledInput.js";
+import { default as E } from "./components/StyledTextarea/StyledTextarea.js";
 export {
   r as Box,
-  s as Flex,
-  a as FlexAlignItemsEnum,
-  f as FlexDirectionEnum,
+  m as Flex,
+  f as FlexAlignItemsEnum,
+  n as FlexDirectionEnum,
   u as FlexJustifyContentEnum,
-  p as FlexRestricter,
-  F as FlexWrapEnum,
+  d as FlexRestricter,
+  p as FlexWrapEnum,
+  g as StyledInput,
+  E as StyledTextarea,
   o as getBoxClassNames,
   x as getBoxStyles,
   l as stringPropFormater

package/dist/styles-scss/global.scss

@@ -13,7 +13,6 @@ body {
   @include tokens.color-tokens;
   @include tokens.offset-tokens;
   @include tokens.control-tokens;
-  @include tokens.text-tokens;
   @include tokens.border-radius-tokens;
   @include tokens.switch-tokens;
   @include tokens.input-dropzone-tokens;
@@ -33,6 +32,7 @@ body {
   @include tokens.anchor-tokens;
   @include tokens.separator-tokens;
   @include tokens.zindex-tokens;
+  @include tokens.text-tokens;
 
   // initiat fonts
   @include typography.font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -52,6 +52,25 @@
   @include ui.define-font-size('xlarge', ui.q(4), 1.2);
   @include ui.define-font-size('xxlarge', ui.q(5), 1.2);
   @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
+  @include ui.def('font-weight-thin', 100);
+  @include ui.def('font-weight-small', 300);
+  @include ui.def('font-weight-normal', 400);
+  @include ui.def('font-weight-bold', 700);
+  @include ui.def('font-weight-bolder', 800);
+  @include ui.def('font-weight-boldest', 900);
+  @include ui.def('letter-spacing-normal', -0.025em);
+  @include ui.def('letter-spacing-large', 0);
+  @include ui.def('font-family-primary', 'HelveticaNowText');
+  @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
+  @include ui.define-color-token('text', ui.color('primary', 'pure'));
+  @include ui.def('text-opacity-10', 0.1);
+  @include ui.define-color-token('text-a10', ui.color('primary', $alpha: 0.1));
+  @include ui.def('text-opacity-25', 0.25);
+  @include ui.define-color-token('text-a25', ui.color('primary', $alpha: 0.25));
+  @include ui.def('text-opacity-50', 0.5);
+  @include ui.define-color-token('text-a50', ui.color('primary', $alpha: 0.5));
+  @include ui.def('text-opacity-75', 0.75);
+  @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
 
   @include ui.media-min('medium') {
     @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
@@ -91,26 +110,6 @@
     @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
     @include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
   }
-
-  @include ui.def('font-weight-thin', 100);
-  @include ui.def('font-weight-small', 300);
-  @include ui.def('font-weight-normal', 400);
-  @include ui.def('font-weight-bold', 700);
-  @include ui.def('font-weight-bolder', 800);
-  @include ui.def('font-weight-boldest', 900);
-  @include ui.def('letter-spacing-normal', -0.025em);
-  @include ui.def('letter-spacing-large', 0);
-  @include ui.def('font-family-primary', 'HelveticaNowText');
-  @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
-  @include ui.define-color-token('text', ui.color('primary', 'pure'));
-  @include ui.def('text-opacity-10', 0.1);
-  @include ui.define-color-token('text-a10', ui.color('primary', $alpha: 0.1));
-  @include ui.def('text-opacity-25', 0.25);
-  @include ui.define-color-token('text-a25', ui.color('primary', $alpha: 0.25));
-  @include ui.def('text-opacity-50', 0.5);
-  @include ui.define-color-token('text-a50', ui.color('primary', $alpha: 0.5));
-  @include ui.def('text-opacity-75', 0.75);
-  @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
 }
 
 @mixin offset-tokens() {

package/package.json

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