@redsift/design-system 10.3.0-muiv5-alpha.3 → 10.3.0-muiv5-alpha.5

package/index.js

@@ -5278,7 +5278,9 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       $isHovered: isHovered,
       $theme: theme
     }, children)
-  }, /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(StyledButton, _extends$1({
+    type: "button"
+  }, forwardedProps, {
     $color: color,
     $fullWidth: fullWidth,
     $isActive: isActive,
@@ -5376,7 +5378,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       $isHovered: isHovered,
       $theme: theme
     }, children)
-  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends$1({
+    type: "button"
+  }, forwardedProps, {
     $color: color,
     $isActive: isActive,
     $isDisabled: isDisabled,
@@ -7909,7 +7913,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends$1({
     as: as || 'a',
-    role: "link",
+    role: !isCurrent ? 'link' : undefined,
     tabIndex: !isDisabled && !isCurrent ? 0 : undefined
   }, forwardedProps, {
     $isCurrent: isCurrent,
@@ -11700,10 +11704,125 @@ const StyledPill = styled.div`
   }
 `;
 
-const _excluded$l = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
-const COMPONENT_NAME$k = 'Pill';
-const CLASSNAME$k = 'redsift-pill';
-const DEFAULT_PROPS$k = {};
+/**
+ * Component style.
+ */
+const StyledNumber = styled(StyledText)`
+  font-family: var(--redsift-typography-font-family-poppins);
+`;
+
+const _excluded$l = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "theme", "value", "variant"];
+const COMPONENT_NAME$k = 'Number';
+const CLASSNAME$k = 'redsift-number';
+const DEFAULT_PROPS$k = {
+  compactDisplay: 'short',
+  currencyDisplay: 'symbol',
+  currencySign: 'standard',
+  localeMatcher: 'best fit',
+  notation: 'standard',
+  signDisplay: 'auto',
+  type: 'decimal',
+  unitDisplay: 'short',
+  roundingMode: 'halfExpand',
+  roundingPriority: 'auto',
+  trailingZeroDisplay: 'auto'
+};
+
+/**
+ * The Number component.
+ */
+const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color,
+      compactDisplay,
+      currency,
+      currencyDisplay,
+      currencySign,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      localeMatcher,
+      maximumFractionDigits,
+      maximumSignificantDigits,
+      minimumFractionDigits,
+      minimumIntegerDigits,
+      minimumSignificantDigits,
+      notation,
+      noWrap,
+      numberingSystem,
+      roundingIncrement,
+      roundingMode,
+      roundingPriority,
+      signDisplay,
+      trailingZeroDisplay,
+      type,
+      unit,
+      unitDisplay,
+      useGrouping,
+      theme: propsTheme,
+      value,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+  const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    compactDisplay,
+    currency,
+    currencyDisplay,
+    currencySign,
+    localeMatcher
+  }, maximumFractionDigits !== undefined && {
+    maximumFractionDigits
+  }), maximumSignificantDigits !== undefined && {
+    maximumSignificantDigits
+  }), minimumFractionDigits !== undefined && {
+    minimumFractionDigits
+  }), minimumIntegerDigits !== undefined && {
+    minimumIntegerDigits
+  }), minimumSignificantDigits !== undefined && {
+    minimumSignificantDigits
+  }), {}, {
+    notation,
+    numberingSystem,
+    // @ts-ignore
+    roundingIncrement,
+    // @ts-ignore
+    roundingMode,
+    // @ts-ignore
+    roundingPriority,
+    signDisplay,
+    style: type,
+    // @ts-ignore
+    trailingZeroDisplay,
+    unit,
+    unitDisplay,
+    useGrouping
+  }));
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledNumber, _extends$1({
+    as: as
+  }, forwardedProps, {
+    $as: as,
+    className: classNames(Number$1.className, className),
+    ref: ref,
+    $color: color,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $noWrap: noWrap,
+    $theme: theme,
+    $variant: variant
+  }), formatter.format(value));
+});
+Number$1.className = CLASSNAME$k;
+Number$1.defaultProps = DEFAULT_PROPS$k;
+Number$1.displayName = COMPONENT_NAME$k;
+
+const _excluded$k = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
+const COMPONENT_NAME$j = 'Pill';
+const CLASSNAME$j = 'redsift-pill';
+const DEFAULT_PROPS$j = {};
 
 /**
  * The Pill component.
@@ -11721,7 +11840,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       size: propsSize,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const theme = useTheme(propsTheme);
   const color = propsColor || PresentationColorPalette.blue;
   const size = propsSize || PillSize.large;
@@ -11738,7 +11857,6 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       }));
     } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {
       var _key;
-      console.log(child.props.color, pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'));
       childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
         key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
         className: currentClassName,
@@ -11756,6 +11874,12 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
         key: index,
         className: currentClassName
       }, child));
+    } else if (typeof child === 'number') {
+      childArray.push( /*#__PURE__*/React__default.createElement(Number$1, {
+        key: index,
+        className: currentClassName,
+        value: child
+      }));
     } else {
       childArray.push(child);
     }
@@ -11773,9 +11897,9 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), childArray);
 });
-Pill.className = CLASSNAME$k;
-Pill.defaultProps = DEFAULT_PROPS$k;
-Pill.displayName = COMPONENT_NAME$k;
+Pill.className = CLASSNAME$j;
+Pill.defaultProps = DEFAULT_PROPS$j;
+Pill.displayName = COMPONENT_NAME$j;
 
 /**
  * Component style.
@@ -11807,10 +11931,10 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$k = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
-const COMPONENT_NAME$j = 'DetailedCardSectionItem';
-const CLASSNAME$j = 'redsift-detailed-card-section-item';
-const DEFAULT_PROPS$j = {};
+const _excluded$j = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME$i = 'DetailedCardSectionItem';
+const CLASSNAME$i = 'redsift-detailed-card-section-item';
+const DEFAULT_PROPS$i = {};
 
 /**
  * The DetailedCardSectionItems component.
@@ -11828,7 +11952,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       pillProps,
       shield
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSectionItem.className, className),
     ref: ref
@@ -11856,9 +11980,9 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${DetailedCardSectionItem.className}-header__pill`
   }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, descriptionProps, description) : description)) : null), children);
 });
-DetailedCardSectionItem.className = CLASSNAME$j;
-DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$j;
-DetailedCardSectionItem.displayName = COMPONENT_NAME$j;
+DetailedCardSectionItem.className = CLASSNAME$i;
+DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$i;
+DetailedCardSectionItem.displayName = COMPONENT_NAME$i;
 
 /*!
 * tabbable 6.1.2
@@ -15577,9 +15701,9 @@ const StyledTooltipContent = styled.div`
 }}
 `;
 
-const COMPONENT_NAME$i = 'TooltipContent';
-const CLASSNAME$i = 'redsift-tooltip-content';
-const DEFAULT_PROPS$i = {};
+const COMPONENT_NAME$h = 'TooltipContent';
+const CLASSNAME$h = 'redsift-tooltip-content';
+const DEFAULT_PROPS$h = {};
 
 /**
  * The TooltipContent component.
@@ -15644,13 +15768,13 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$i;
-TooltipContent.defaultProps = DEFAULT_PROPS$i;
-TooltipContent.displayName = COMPONENT_NAME$i;
+TooltipContent.className = CLASSNAME$h;
+TooltipContent.defaultProps = DEFAULT_PROPS$h;
+TooltipContent.displayName = COMPONENT_NAME$h;
 
-const COMPONENT_NAME$h = 'TooltipTrigger';
-const CLASSNAME$h = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$h = {};
+const COMPONENT_NAME$g = 'TooltipTrigger';
+const CLASSNAME$g = 'redsift-tooltip-trigger';
+const DEFAULT_PROPS$g = {};
 
 /**
  * The TooltipTrigger component.
@@ -15685,9 +15809,9 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$h;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$h;
-TooltipTrigger.displayName = COMPONENT_NAME$h;
+TooltipTrigger.className = CLASSNAME$g;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$g;
+TooltipTrigger.displayName = COMPONENT_NAME$g;
 
 function useTooltip(_ref) {
   let {
@@ -15754,9 +15878,9 @@ function useTooltip(_ref) {
   }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
-const COMPONENT_NAME$g = 'Tooltip';
-const CLASSNAME$g = 'redsift-tooltip';
-const DEFAULT_PROPS$g = {
+const COMPONENT_NAME$f = 'Tooltip';
+const CLASSNAME$f = 'redsift-tooltip';
+const DEFAULT_PROPS$f = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -15798,9 +15922,9 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
 };
-BaseTooltip.className = CLASSNAME$g;
-BaseTooltip.defaultProps = DEFAULT_PROPS$g;
-BaseTooltip.displayName = COMPONENT_NAME$g;
+BaseTooltip.className = CLASSNAME$f;
+BaseTooltip.defaultProps = DEFAULT_PROPS$f;
+BaseTooltip.displayName = COMPONENT_NAME$f;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -15814,10 +15938,10 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$j = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme"];
-const COMPONENT_NAME$f = 'DetailedCard';
-const CLASSNAME$f = 'redsift-detailed-card';
-const DEFAULT_PROPS$f = {
+const _excluded$i = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme"];
+const COMPONENT_NAME$e = 'DetailedCard';
+const CLASSNAME$e = 'redsift-detailed-card';
+const DEFAULT_PROPS$e = {
   isCollapsible: true,
   width: '400px'
 };
@@ -15858,7 +15982,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       shield,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages$4);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
@@ -15952,9 +16076,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     return child;
   })));
 });
-BaseDetailedCard.className = CLASSNAME$f;
-BaseDetailedCard.defaultProps = DEFAULT_PROPS$f;
-BaseDetailedCard.displayName = COMPONENT_NAME$f;
+BaseDetailedCard.className = CLASSNAME$e;
+BaseDetailedCard.defaultProps = DEFAULT_PROPS$e;
+BaseDetailedCard.displayName = COMPONENT_NAME$e;
 const DetailedCard = Object.assign(BaseDetailedCard, {
   Header: DetailedCardHeader,
   Section: DetailedCardSection,
@@ -16755,10 +16879,10 @@ const StyledGridItem = styled.div`
   ${baseInternalSpacing}
 `;
 
-const _excluded$i = ["children", "className"];
-const COMPONENT_NAME$e = 'GridItem';
-const CLASSNAME$e = 'redsift-grid-item';
-const DEFAULT_PROPS$e = {};
+const _excluded$h = ["children", "className"];
+const COMPONENT_NAME$d = 'GridItem';
+const CLASSNAME$d = 'redsift-grid-item';
+const DEFAULT_PROPS$d = {};
 
 /**
  * The GridItem component.
@@ -16768,20 +16892,20 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends$1({}, forwardedProps, {
     className: classNames(GridItem.className, className),
     ref: ref
   }), children);
 });
-GridItem.className = CLASSNAME$e;
-GridItem.defaultProps = DEFAULT_PROPS$e;
-GridItem.displayName = COMPONENT_NAME$e;
+GridItem.className = CLASSNAME$d;
+GridItem.defaultProps = DEFAULT_PROPS$d;
+GridItem.displayName = COMPONENT_NAME$d;
 
-const _excluded$h = ["children", "className", "divider", "gap", "theme"];
-const COMPONENT_NAME$d = 'Grid';
-const CLASSNAME$d = 'redsift-grid';
-const DEFAULT_PROPS$d = {};
+const _excluded$g = ["children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME$c = 'Grid';
+const CLASSNAME$c = 'redsift-grid';
+const DEFAULT_PROPS$c = {};
 
 /**
  * The Grid component.
@@ -16794,7 +16918,7 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
       gap,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {
@@ -16808,9 +16932,9 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
     $theme: theme
   }), children));
 });
-BaseGrid.className = CLASSNAME$d;
-BaseGrid.defaultProps = DEFAULT_PROPS$d;
-BaseGrid.displayName = COMPONENT_NAME$d;
+BaseGrid.className = CLASSNAME$c;
+BaseGrid.defaultProps = DEFAULT_PROPS$c;
+BaseGrid.displayName = COMPONENT_NAME$c;
 const Grid = Object.assign(BaseGrid, {
   Item: GridItem
 });
@@ -16829,7 +16953,6 @@ const StyledItem = styled.div`
   align-items: center;
   background: none;
   border: none;
-  border-radius: 4px;
   box-sizing: border-box;
   display: inline-flex;
 
@@ -17096,11 +17219,11 @@ function useMenuItem(props) {
   };
 }
 
-const _excluded$g = ["children", "className", "color", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "hasBorder", "hasCheckbox", "theme", "value"],
+const _excluded$f = ["children", "className", "color", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "hasBorder", "hasCheckbox", "theme", "value"],
   _excluded2 = ["children", "className", "color", "hasBorder", "id", "isActive", "isDisabled", "isHovered", "theme", "onClick"];
-const COMPONENT_NAME$c = 'Item';
-const CLASSNAME$c = 'redsift-item';
-const DEFAULT_PROPS$c = {};
+const COMPONENT_NAME$b = 'Item';
+const CLASSNAME$b = 'redsift-item';
+const DEFAULT_PROPS$b = {};
 const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -17117,7 +17240,7 @@ const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const id = propsId !== null && propsId !== void 0 ? propsId : value;
   const _ref = useRef();
   const divRef = ref !== null && ref !== void 0 ? ref : _ref;
@@ -17283,9 +17406,9 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
   }
   return null;
 });
-Item.className = CLASSNAME$c;
-Item.defaultProps = DEFAULT_PROPS$c;
-Item.displayName = COMPONENT_NAME$c;
+Item.className = CLASSNAME$b;
+Item.defaultProps = DEFAULT_PROPS$b;
+Item.displayName = COMPONENT_NAME$b;
 
 /**
  * Component style.
@@ -17327,10 +17450,10 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$f = ["as", "children", "className", "href", "isDisabled", "theme"];
-const COMPONENT_NAME$b = 'Link';
-const CLASSNAME$b = 'redsift-link';
-const DEFAULT_PROPS$b = {};
+const _excluded$e = ["as", "children", "className", "href", "isDisabled", "theme"];
+const COMPONENT_NAME$a = 'Link';
+const CLASSNAME$a = 'redsift-link';
+const DEFAULT_PROPS$a = {};
 
 /**
  * The Link is a semantic link that looks like a link.
@@ -17349,7 +17472,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: as,
@@ -17364,14 +17487,14 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }), children);
 });
-Link.className = CLASSNAME$b;
-Link.defaultProps = DEFAULT_PROPS$b;
-Link.displayName = COMPONENT_NAME$b;
+Link.className = CLASSNAME$a;
+Link.defaultProps = DEFAULT_PROPS$a;
+Link.displayName = COMPONENT_NAME$a;
 
-const _excluded$e = ["children", "className", "disabled", "isDisabled", "theme"];
-const COMPONENT_NAME$a = 'LinkButton';
-const CLASSNAME$a = 'redsift-link-button';
-const DEFAULT_PROPS$a = {};
+const _excluded$d = ["children", "className", "disabled", "isDisabled", "theme"];
+const COMPONENT_NAME$9 = 'LinkButton';
+const CLASSNAME$9 = 'redsift-link-button';
+const DEFAULT_PROPS$9 = {};
 
 /**
  * The LinkButton is a semantic button that looks like a link.
@@ -17389,7 +17512,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled: propsIsDisabled,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const isDisabled = propsIsDisabled || disabled;
   const theme = useTheme(propsTheme);
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
@@ -17405,11 +17528,11 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     ref: buttonRef
   }), children);
 });
-LinkButton.className = CLASSNAME$a;
-LinkButton.defaultProps = DEFAULT_PROPS$a;
-LinkButton.displayName = COMPONENT_NAME$a;
+LinkButton.className = CLASSNAME$9;
+LinkButton.defaultProps = DEFAULT_PROPS$9;
+LinkButton.displayName = COMPONENT_NAME$9;
 
-const _excluded$d = ["children", "id", "isDisabled", "context"];
+const _excluded$c = ["children", "id", "isDisabled", "context"];
 const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
   var _context$state$active;
   const {
@@ -17418,7 +17541,7 @@ const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       context
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const {
     activedescendant,
     handleKeyDown: handleFocusKeyDown,
@@ -17474,7 +17597,7 @@ const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
   }, children));
 });
 
-const _excluded$c = ["children", "id", "isDisabled", "context"];
+const _excluded$b = ["children", "id", "isDisabled", "context"];
 const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -17482,7 +17605,7 @@ const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       context
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React__default.createElement(Flexbox, _extends$1({
     flexDirection: "column",
     gap: "8px"
@@ -17575,10 +17698,10 @@ const ListboxReducer = (state, action) => {
   }
 };
 
-const _excluded$b = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
-const COMPONENT_NAME$9 = 'Listbox';
-const CLASSNAME$9 = 'redsift-listbox';
-const DEFAULT_PROPS$9 = {
+const _excluded$a = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME$8 = 'Listbox';
+const CLASSNAME$8 = 'redsift-listbox';
+const DEFAULT_PROPS$8 = {
   focusOnClick: false,
   focusType: 'roving-tabindex',
   selectionMode: 'single',
@@ -17609,7 +17732,7 @@ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
       values,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   const [_id] = useId$2();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const _ref = useRef();
@@ -17637,6 +17760,7 @@ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
   }, [state.selectedValues]);
+  warnIfNoAccessibleLabelFound(props, [label]);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends$1({
       flexDirection: "column",
@@ -17671,124 +17795,9 @@ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
     ref: divRef
   }), children)));
 });
-Listbox.className = CLASSNAME$9;
-Listbox.defaultProps = DEFAULT_PROPS$9;
-Listbox.displayName = COMPONENT_NAME$9;
-
-/**
- * Component style.
- */
-const StyledNumber = styled(StyledText)`
-  font-family: var(--redsift-typography-font-family-poppins);
-`;
-
-const _excluded$a = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "theme", "value", "variant"];
-const COMPONENT_NAME$8 = 'Number';
-const CLASSNAME$8 = 'redsift-number';
-const DEFAULT_PROPS$8 = {
-  compactDisplay: 'short',
-  currencyDisplay: 'symbol',
-  currencySign: 'standard',
-  localeMatcher: 'best fit',
-  notation: 'standard',
-  signDisplay: 'auto',
-  type: 'decimal',
-  unitDisplay: 'short',
-  roundingMode: 'halfExpand',
-  roundingPriority: 'auto',
-  trailingZeroDisplay: 'auto'
-};
-
-/**
- * The Number component.
- */
-const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      as,
-      className,
-      color,
-      compactDisplay,
-      currency,
-      currencyDisplay,
-      currencySign,
-      fontSize,
-      fontWeight,
-      lineHeight,
-      localeMatcher,
-      maximumFractionDigits,
-      maximumSignificantDigits,
-      minimumFractionDigits,
-      minimumIntegerDigits,
-      minimumSignificantDigits,
-      notation,
-      noWrap,
-      numberingSystem,
-      roundingIncrement,
-      roundingMode,
-      roundingPriority,
-      signDisplay,
-      trailingZeroDisplay,
-      type,
-      unit,
-      unitDisplay,
-      useGrouping,
-      theme: propsTheme,
-      value,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
-  const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-    compactDisplay,
-    currency,
-    currencyDisplay,
-    currencySign,
-    localeMatcher
-  }, maximumFractionDigits !== undefined && {
-    maximumFractionDigits
-  }), maximumSignificantDigits !== undefined && {
-    maximumSignificantDigits
-  }), minimumFractionDigits !== undefined && {
-    minimumFractionDigits
-  }), minimumIntegerDigits !== undefined && {
-    minimumIntegerDigits
-  }), minimumSignificantDigits !== undefined && {
-    minimumSignificantDigits
-  }), {}, {
-    notation,
-    numberingSystem,
-    // @ts-ignore
-    roundingIncrement,
-    // @ts-ignore
-    roundingMode,
-    // @ts-ignore
-    roundingPriority,
-    signDisplay,
-    style: type,
-    // @ts-ignore
-    trailingZeroDisplay,
-    unit,
-    unitDisplay,
-    useGrouping
-  }));
-  const theme = useTheme(propsTheme);
-  return /*#__PURE__*/React__default.createElement(StyledNumber, _extends$1({
-    as: as
-  }, forwardedProps, {
-    $as: as,
-    className: classNames(Number$1.className, className),
-    ref: ref,
-    $color: color,
-    $lineHeight: lineHeight,
-    $fontSize: fontSize,
-    $fontWeight: fontWeight,
-    $noWrap: noWrap,
-    $theme: theme,
-    $variant: variant
-  }), formatter.format(value));
-});
-Number$1.className = CLASSNAME$8;
-Number$1.defaultProps = DEFAULT_PROPS$8;
-Number$1.displayName = COMPONENT_NAME$8;
+Listbox.className = CLASSNAME$8;
+Listbox.defaultProps = DEFAULT_PROPS$8;
+Listbox.displayName = COMPONENT_NAME$8;
 
 /**
  * Component variant.
@@ -20965,6 +20974,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [value, setValue] = useState(defaultValue);
   const isControlled = propsValue !== null && propsValue !== undefined;
+  const [labelId] = useId$2();
   warnIfNoAccessibleLabelFound(props, [label], 'TextArea');
   const handleChange = useCallback(event => {
     if (isDisabled || isReadOnly) {
@@ -21022,7 +21032,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-disabled": isDisabled,
     "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
     "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
+    "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
     autoFocus: autoFocus,
@@ -21037,6 +21047,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": "true",
     className: `${TextArea.className}-text-area-wrapper__fieldset`
   }, /*#__PURE__*/React__default.createElement("legend", {
+    id: labelId,
     className: `${TextArea.className}-text-area-wrapper-fieldset__legend`
   }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null))));
 });