@cfx-dev/ui-components 4.3.2 → 4.3.3

package/dist/main.js

@@ -48,45 +48,46 @@ import { default as Lr } from "./components/Input/Input.js";
 import { default as yr } from "./components/Input/RichInput.js";
 import { Interactive as kr } from "./components/Interactive/Interactive.js";
 import { Island as Dr, IslandCorner as br } from "./components/Island/Island.js";
-import { default as Pr, stringPropFormater as Fr } from "./components/Layout/Box/Box.js";
-import { Center as vr } from "./components/Layout/Center/Center.js";
-import { default as Ur } from "./components/Layout/Flex/Flex.js";
-import { FlexAlignItemsEnum as wr, FlexDirectionEnum as Mr, FlexJustifyContentEnum as Nr, FlexWrapEnum as Gr } from "./components/Layout/Flex/Flex.types.js";
-import { FlexRestricter as Kr } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as Hr } from "./components/Layout/Pad/Pad.js";
-import { Page as Xr } from "./components/Layout/Page/Page.js";
-import { R as Qr } from "./Rail-DcVowhML.js";
-import { Scrollable as jr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as $r } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as re } from "./components/Loaf/Loaf.js";
-import { Modal as te } from "./components/Modal/Modal.js";
-import { NavList as fe } 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";
-import { Radio as Te } from "./components/Radio/Radio.js";
-import { Select as Ce } from "./components/Select/Select.js";
-import { DropdownSelect as Be } from "./components/DropdownSelect/DropdownSelect.js";
-import { Separator as Le } from "./components/Separator/Separator.js";
-import { Shroud as ye } from "./components/Shroud/Shroud.js";
-import { Slider as ke } from "./components/Slider/Slider.js";
-import { Spacer as De } from "./components/Spacer/Spacer.js";
-import { Style as Oe, useContextualStyle as Pe } 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 { 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 ft } from "./components/InputDropzone/InputDropzone.js";
-import { default as pt } from "./components/InputDropzone/ItemPreview.js";
-import { default as nt } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as ut } from "./components/OnScreenSensor.js";
-import { Symbols as it } from "./components/Symbols.js";
-import { default as ct } from "./components/Table/TableIconButton.js";
+import { default as Pr } from "./components/Box/Box.js";
+import { stringPropFormater as _r } from "./components/RSC/Box/Box.js";
+import { Center as hr } from "./components/Layout/Center/Center.js";
+import { default as zr } from "./components/Flex/Flex.js";
+import { FlexAlignItemsEnum as Mr, FlexDirectionEnum as Nr, FlexJustifyContentEnum as Gr, FlexWrapEnum as Vr } from "./components/RSC/Flex/Flex.types.js";
+import { FlexRestricter as Yr } from "./components/RSC/Flex/FlexRestricter.js";
+import { Pad as Wr } from "./components/Layout/Pad/Pad.js";
+import { Page as Jr } from "./components/Layout/Page/Page.js";
+import { R as Zr } from "./Rail-CHFAf3wJ.js";
+import { Scrollable as qr } from "./components/Scrollable/Scrollable.js";
+import { VirtualScrollable as oe } from "./components/Scrollable/VirtualScrollable.js";
+import { Loaf as ee } from "./components/Loaf/Loaf.js";
+import { Modal as ae } from "./components/Modal/Modal.js";
+import { NavList as me } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as xe, Overlay as ne } from "./components/Overlay/Overlay.js";
+import { Popover as ue } from "./components/Popover/Popover.js";
+import { PremiumBadge as ie } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as ce } from "./components/Prose/Prose.js";
+import { Radio as Ie } from "./components/Radio/Radio.js";
+import { Select as ge } from "./components/Select/Select.js";
+import { DropdownSelect as Ee } from "./components/DropdownSelect/DropdownSelect.js";
+import { Separator as Se } from "./components/Separator/Separator.js";
+import { Shroud as Re } from "./components/Shroud/Shroud.js";
+import { Slider as Ae } from "./components/Slider/Slider.js";
+import { Spacer as be } from "./components/Spacer/Spacer.js";
+import { Style as Pe, useContextualStyle as Fe } from "./components/Style/Style.js";
+import { default as ve } from "./components/Switch/Switch.js";
+import { ToggleGroup as Ue } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as we } from "./components/Tabular/Tabular.js";
+import { DataTable as Ne, DataTableHeaderItem as Ge, DataTableRow as Ve } from "./components/DataTable/DataTable.js";
+import { Table as Ye } from "./components/Table/index.js";
+import { DEFAULT_TEXT_COLOR as We, TEXT_OPACITY_MAP as Xe, Text as Je, TextBlock as Qe, getTextOpacity as Ze, textSizeResponsiveValueFormatter as je } from "./components/Text/Text.js";
+import { Textarea as $e } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as rt, Title as et, titleGetCoords as tt, titleGetCssStyle as at } from "./components/Title/Title.js";
+import { default as mt } from "./components/InputDropzone/InputDropzone.js";
+import { default as xt } from "./components/InputDropzone/ItemPreview.js";
+import { default as lt } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as st } from "./components/OnScreenSensor.js";
+import { Symbols as dt } from "./components/Symbols.js";
+import { default as Tt } from "./components/Table/TableIconButton.js";
 export {
   To as Accordion,
   Io as AccordionContent,
@@ -106,27 +107,27 @@ export {
   Ao as ButtonContent,
   Vo as ButtonLink,
   L as CLIPBOARD_TITLE_APPEARANCE,
-  vr as Center,
+  hr as Center,
   yo as Checkbox,
   Lo as ClipboardButton,
   fo as ColorEnum,
   jo as ControlBox,
   $o as CountryFlag,
-  He as DEFAULT_TEXT_COLOR,
-  Me as DataTable,
-  Ne as DataTableHeaderItem,
-  Ge as DataTableRow,
+  We as DEFAULT_TEXT_COLOR,
+  Ne as DataTable,
+  Ge as DataTableHeaderItem,
+  Ve as DataTableRow,
   rr as Decorate,
   tr as Dot,
-  Be as DropdownSelect,
-  pt as DropzoneItemPreview,
+  Ee as DropdownSelect,
+  xt as DropzoneItemPreview,
   fr as FLYOUT_OUTLET_ID,
-  Ur as Flex,
-  wr as FlexAlignItemsEnum,
-  Mr as FlexDirectionEnum,
-  Nr as FlexJustifyContentEnum,
-  Kr as FlexRestricter,
-  Gr as FlexWrapEnum,
+  zr as Flex,
+  Mr as FlexAlignItemsEnum,
+  Nr as FlexDirectionEnum,
+  Gr as FlexJustifyContentEnum,
+  Yr as FlexRestricter,
+  Vr as FlexWrapEnum,
   mr as Flyout,
   dr as Icon,
   Tr as IconBig,
@@ -136,52 +137,52 @@ export {
   Cr as Indicator,
   Br as InfoPanel,
   Lr as Input,
-  ft as InputDropzone,
+  mt as InputDropzone,
   kr as Interactive,
   Dr as Island,
   br as IslandCorner,
   wo as Link,
   Fo as LinkButton,
   P as Linkify,
-  re as Loaf,
+  ee as Loaf,
   xr as Logos,
   mo as MediaQueryEnum,
-  te as Modal,
-  fe as NavList,
-  pe as OVERLAY_OUTLET_ID,
+  ae as Modal,
+  me as NavList,
+  xe as OVERLAY_OUTLET_ID,
   po as OffsetEnum,
-  ut as OnScreenSensor,
-  xe as Overlay,
-  Hr as Pad,
-  Xr as Page,
-  le as Popover,
-  se as PremiumBadge,
-  de as Prose,
-  Te as Radio,
-  Qr as Rail,
+  st as OnScreenSensor,
+  ne as Overlay,
+  Wr as Pad,
+  Jr as Page,
+  ue as Popover,
+  ie as PremiumBadge,
+  ce as Prose,
+  Ie as Radio,
+  Zr as Rail,
   yr as RichInput,
-  jr as Scrollable,
-  Ce as Select,
-  Le as Separator,
-  ye as Shroud,
-  nt as Skeleton,
-  ke as Slider,
-  De as Spacer,
-  Oe as Style,
-  _e as Switch,
-  it as Symbols,
-  We as TEXT_OPACITY_MAP,
-  ot as TITLE_OUTLET_ID,
-  Ke as Table,
-  ct as TableIconButton,
-  ze as Tabular,
-  Xe as Text,
-  Je as TextBlock,
+  qr as Scrollable,
+  ge as Select,
+  Se as Separator,
+  Re as Shroud,
+  lt as Skeleton,
+  Ae as Slider,
+  be as Spacer,
+  Pe as Style,
+  ve as Switch,
+  dt as Symbols,
+  Xe as TEXT_OPACITY_MAP,
+  rt as TITLE_OUTLET_ID,
+  Ye as Table,
+  Tt as TableIconButton,
+  we as Tabular,
+  Je as Text,
+  Qe as TextBlock,
   xo as TextSizeEnum,
-  qe as Textarea,
-  rt as Title,
-  he as ToggleGroup,
-  $r as VirtualScrollable,
+  $e as Textarea,
+  et as Title,
+  Ue as ToggleGroup,
+  oe as VirtualScrollable,
   no as ZIndexEnum,
   N as clamp,
   G as clamp01,
@@ -193,7 +194,7 @@ export {
   oo as getColor,
   Mo as getLinkClassName,
   No as getLinkStyles,
-  Qe as getTextOpacity,
+  Ze as getTextOpacity,
   m as getValue,
   R as identity,
   k as invoke,
@@ -213,15 +214,15 @@ export {
   D as returnFalse,
   b as returnTrue,
   J as splitByIndices,
-  Fr as stringPropFormater,
-  Ze as textSizeResponsiveValueFormatter,
+  _r as stringPropFormater,
+  je as textSizeResponsiveValueFormatter,
   q as throttle,
-  et as titleGetCoords,
-  tt as titleGetCssStyle,
+  tt as titleGetCoords,
+  at as titleGetCssStyle,
   eo as ui,
   Q as unicodeCharAt,
   S as useClipboardComponent,
-  Pe as useContextualStyle,
+  Fe as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
   l as useInstance,

package/dist/rsc.d.ts

@@ -0,0 +1,4 @@
+export { Box, stringPropFormater, getBoxClassNames, getBoxStyles, } from './components/RSC/Box';
+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';

package/dist/rsc.js

@@ -0,0 +1,16 @@
+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";
+export {
+  r as Box,
+  s as Flex,
+  a as FlexAlignItemsEnum,
+  f as FlexDirectionEnum,
+  u as FlexJustifyContentEnum,
+  p as FlexRestricter,
+  F as FlexWrapEnum,
+  o as getBoxClassNames,
+  x as getBoxStyles,
+  l as stringPropFormater
+};

package/dist/styles-scss/_colors.scss

@@ -1,11 +1,17 @@
 @use "sass:math";
 @use "sass:list";
+@use "sass:map";
+@use "sass:color";
+
+@function get-channel($color, $channel) {
+  @return color.channel($color, $channel, $space: rgb);
+}
 
 @function get-luminance($color) {
   $colors: (
-    'red': red($color),
-    'green': green($color),
-    'blue': blue($color)
+    'red': get-channel($color, "red"),
+    'green': get-channel($color, "green"),
+    'blue': get-channel($color, "blue"),
   );
 
   @each $name, $value in $colors {
@@ -19,20 +25,19 @@
       $value: math.pow($value, 2.4);
     }
 
-    $colors: map-merge($colors, ($name: $value));
+    $colors: map.merge($colors, ($name: $value));
   }
 
-  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+  @return (map.get($colors, 'red') * .2126) + (map.get($colors, 'green') * .7152) + (map.get($colors, 'blue') * .0722);
 }
 
 @function interpolate($c1, $c2, $f) {
-  $c1r: red($c1);
-  $c1g: green($c1);
-  $c1b: blue($c1);
-
-  $c2r: red($c2);
-  $c2g: green($c2);
-  $c2b: blue($c2);
+  $c1r: get-channel($c1, "red");
+  $c1g: get-channel($c1, "green");
+  $c1b: get-channel($c1, "blue");
+  $c2r: get-channel($c2, "red");
+  $c2g: get-channel($c2, "green");
+  $c2b: get-channel($c2, "blue");
 
   @return rgb(
     $c1r + $f * ($c2r - $c1r),
@@ -43,8 +48,8 @@
 
 @function set-luminance($color, $lum) {
   $itersLeft: 20;
-  $low: rgb(0, 0, 0);
-  $high: rgb(255, 255, 255);
+  $low: rgb(0 0 0);
+  $high: rgb(255 255 255);
 
   @if get-luminance($color) > $lum {
     $high: $color;
@@ -55,9 +60,8 @@
   $mid: interpolate($low, $high, .5);
   $lm: get-luminance($mid);
 
-  @while math.abs($lum - $lm) >= 1e-7 and $itersLeft > 0 {
+  @while math.abs($lum - $lm) >= 1e - 7 and $itersLeft > 0 {
     $itersLeft: $itersLeft - 1;
-
     $mid: interpolate($low, $high, .5);
     $lm: get-luminance($mid);
 
@@ -72,7 +76,7 @@
 }
 
 @function color-triplet($color) {
-  @return #{red($color)}, #{green($color)}, #{blue($color)};
+  @return #{get-channel($color, "red")}, #{get-channel($color, "green")}, #{get-channel($color, "blue")};
 }
 
 
@@ -82,20 +86,22 @@ $_16OVER116: math.div(16, 116);
 $_1OVER2P4: math.div(1, 2.4);
 
 @function rgb2lab($color) {
-  $r: math.div(red($color), 255);
-  $g: math.div(green($color), 255);
-  $b: math.div(blue($color), 255);
+  $r: math.div(get-channel($color, "red"), 255);
+  $g: math.div(get-channel($color, "green"), 255);
+  $b: math.div(get-channel($color, "blue"), 255);
 
   @if $r > 0.04045 {
     $r: math.pow(math.div($r + 0.055, 1.055), 2.4);
   } @else {
     $r: math.div($r, 12.92);
   }
+
   @if $g > 0.04045 {
     $g: math.pow(math.div($g + 0.055, 1.055), 2.4);
   } @else {
     $g: math.div($g, 12.92);
   }
+
   @if $b > 0.04045 {
     $b: math.pow(math.div($b + 0.055, 1.055), 2.4);
   } @else {
@@ -111,11 +117,13 @@ $_1OVER2P4: math.div(1, 2.4);
   } @else {
     $x: (7.787 * $x) + $_16OVER116;
   }
+
   @if $y > 0.008856 {
     $y: math.pow($y, $oneThird);
   } @else {
     $y: (7.787 * $y) + $_16OVER116;
   }
+
   @if $z > 0.008856 {
     $z: math.pow($z, $oneThird);
   } @else {
@@ -130,10 +138,9 @@ $_1OVER2P4: math.div(1, 2.4);
 }
 
 @function lab2rgb($lab) {
-  $y: math.div(map-get($lab, 'L') + 16, 116);
-  $x: math.div(map-get($lab, 'a'), 500) + $y;
-  $z: $y - math.div(map-get($lab, 'b'), 200);
-
+  $y: math.div(map.get($lab, 'L') + 16, 116);
+  $x: math.div(map.get($lab, 'a'), 500) + $y;
+  $z: $y - math.div(map.get($lab, 'b'), 200);
   $x3: math.pow($x, 3);
   $y3: math.pow($y, 3);
   $z3: math.pow($z, 3);
@@ -143,11 +150,13 @@ $_1OVER2P4: math.div(1, 2.4);
   } @else {
     $x: math.div($x - $_16OVER116 , 7.787);
   }
+
   @if $y3 > 0.008856 {
     $y: $y3;
   } @else {
     $y: math.div($y - $_16OVER116 , 7.787);
   }
+
   @if $z3 > 0.008856 {
     $z: $z3;
   } @else {
@@ -157,21 +166,22 @@ $_1OVER2P4: math.div(1, 2.4);
   $x: $x * 0.95047;
   $y: $y * 1.00000;
   $z: $z * 1.08883;
-
-  $r: $x *  3.2406 + $y * -1.5372 + $z * -0.4986;
-  $g: $x * -0.9689 + $y *  1.8758 + $z *  0.0415;
-  $b: $x *  0.0557 + $y * -0.2040 + $z *  1.0570;
+  $r: $x * 3.2406 + $y * -1.5372 + $z * -0.4986;
+  $g: $x * -0.9689 + $y * 1.8758 + $z * 0.0415;
+  $b: $x * 0.0557 + $y * -0.2040 + $z * 1.0570;
 
   @if $r > 0.0031308 {
     $r: 1.055 * math.pow($r, $_1OVER2P4) - 0.055;
   } @else {
     $r: 12.92 * $r;
   }
+
   @if $g > 0.0031308 {
     $g: 1.055 * math.pow($g, $_1OVER2P4) - 0.055;
   } @else {
     $g: 12.92 * $g;
   }
+
   @if $b > 0.0031308 {
     $b: 1.055 * math.pow($b, $_1OVER2P4) - 0.055;
   } @else {
@@ -198,14 +208,13 @@ $_1OVER2P4: math.div(1, 2.4);
 @function lab-gradient-step($s, $e, $i, $stop) {
   $s: rgb2lab($s);
   $e: rgb2lab($e);
-
   $a: math.div($i, $stop - 1);
   $ia: 1 - $a;
 
   @return lab2rgb((
-    'L': $ia * map-get($s, 'L') + $a * map-get($e, 'L'),
-    'a': $ia * map-get($s, 'a') + $a * map-get($e, 'a'),
-    'b': $ia * map-get($s, 'b') + $a * map-get($e, 'b'),
+    'L': $ia * map.get($s, 'L') + $a * map.get($e, 'L'),
+    'a': $ia * map.get($s, 'a') + $a * map.get($e, 'a'),
+    'b': $ia * map.get($s, 'b') + $a * map.get($e, 'b'),
   ));
 }
 

package/dist/styles-scss/_typography.scss

@@ -8,7 +8,7 @@
   @font-face {
     font-style: normal;
     font-weight: 400;
-    font-family: "HelveticaNowDisplay";
+    font-family: HelveticaNowDisplay;
     src: url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplay.ttf") format("truetype");
@@ -17,7 +17,7 @@
   @font-face {
     font-style: normal;
     font-weight: 700;
-    font-family: "HelveticaNowDisplay";
+    font-family: HelveticaNowDisplay;
     src: url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.ttf") format("truetype");
@@ -26,7 +26,7 @@
   @font-face {
     font-style: normal;
     font-weight: 400;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowText.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowText.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowText.ttf") format("truetype");
@@ -35,7 +35,7 @@
   @font-face {
     font-style: normal;
     font-weight: 700;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextBold.ttf") format("truetype");
@@ -44,7 +44,7 @@
   @font-face {
     font-style: italic;
     font-weight: 400;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextIt.ttf") format("truetype");