@7shifts/sous-chef 3.89.4 → 3.90.0

package/dist/index.modern.js

@@ -244,7 +244,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var styles$1q = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
+var styles$1t = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
 
 const usePositionStyles = ({
   m,
@@ -282,7 +282,7 @@ const capitalizeFirstLetter = text => {
 };
 const kebabize = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 
-const _excluded$31 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
+const _excluded$33 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
 const getPositionProps = _ref => {
   let {
       m,
@@ -296,7 +296,7 @@ const getPositionProps = _ref => {
       ml,
       marginLeft
     } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$31);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$33);
   return {
     positionProps: {
       m,
@@ -332,7 +332,7 @@ const getDataProps = (props, config) => {
   });
 };
 
-const _excluded$30 = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
+const _excluded$32 = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
 /**
  * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef
  */
@@ -351,7 +351,7 @@ const Flex = _ref => {
       testId,
       extraClass
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$30);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$32);
   const {
     positionProps,
     otherProps
@@ -360,15 +360,15 @@ const Flex = _ref => {
     dataProps
   } = getDataProps(otherProps);
   const positionStyles = usePositionStyles(positionProps);
-  const className = classnames(styles$1q['flex'], extraClass, {
-    [styles$1q['align-start']]: alignItems === 'flex-start',
-    [styles$1q['align-end']]: alignItems === 'flex-end',
-    [styles$1q['align-center']]: alignItems === 'center',
-    [styles$1q['justify-start']]: justifyContent === 'start',
-    [styles$1q['justify-end']]: justifyContent === 'end',
-    [styles$1q['justify-center']]: justifyContent === 'center',
-    [styles$1q['justify-space-between']]: justifyContent === 'space-between',
-    [styles$1q['inline-flex']]: inlineFlex
+  const className = classnames(styles$1t['flex'], extraClass, {
+    [styles$1t['align-start']]: alignItems === 'flex-start',
+    [styles$1t['align-end']]: alignItems === 'flex-end',
+    [styles$1t['align-center']]: alignItems === 'center',
+    [styles$1t['justify-start']]: justifyContent === 'start',
+    [styles$1t['justify-end']]: justifyContent === 'end',
+    [styles$1t['justify-center']]: justifyContent === 'center',
+    [styles$1t['justify-space-between']]: justifyContent === 'space-between',
+    [styles$1t['inline-flex']]: inlineFlex
   });
   const items = React__default.Children.toArray(children).filter(Boolean);
   const gap = typeof space === 'object' ? `${space.row}px ${space.column}px` : space;
@@ -383,8 +383,8 @@ const Flex = _ref => {
     "data-testid": testId
   }, dataProps), items.map((child, i) => React__default.createElement("div", {
     key: i,
-    className: classnames(styles$1q['flex__item'], {
-      [styles$1q['flex__item--flexible']]: flexItems
+    className: classnames(styles$1t['flex__item'], {
+      [styles$1t['flex__item--flexible']]: flexItems
     }),
     style: {
       flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
@@ -392,7 +392,7 @@ const Flex = _ref => {
   }, child)));
 };
 
-const _excluded$2$ = ["alignItems"];
+const _excluded$31 = ["alignItems"];
 /**
  * Layout component to easily stack elements up in a column.
  */
@@ -400,16 +400,16 @@ const Stack = _ref => {
   let {
       alignItems = 'stretch'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2$);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$31);
   return React.createElement(Flex, _extends({}, props, {
     alignItems: alignItems,
     direction: "column"
   }));
 };
 
-var styles$1p = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
+var styles$1s = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
-const _excluded$2_ = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
+const _excluded$30 = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
  * Used when you want to allow the user to turn some information ON and OFF.
  *
@@ -425,14 +425,14 @@ const Toggle = _ref => {
       id,
       testId
     } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2_);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$30);
   const {
     dataProps
   } = getDataProps(otherProps);
   return React__default.createElement(Stack, {
     space: 8
   }, React__default.createElement("label", _extends({}, dataProps, {
-    className: styles$1p['toggle']
+    className: styles$1s['toggle']
   }), React__default.createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -441,11 +441,11 @@ const Toggle = _ref => {
     id: id,
     "data-testid": testId
   }), React__default.createElement("span", {
-    className: styles$1p['toggle__switch']
+    className: styles$1s['toggle__switch']
   }), label && React__default.createElement("span", {
-    className: styles$1p['toggle__label']
+    className: styles$1s['toggle__label']
   }, label)), caption && React__default.createElement("span", {
-    className: styles$1p['toggle__caption']
+    className: styles$1s['toggle__caption']
   }, caption));
 };
 
@@ -463,7 +463,7 @@ const SPINNER_THEMES = {
   PRIDE: 'pride'
 };
 
-var styles$1o = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
+var styles$1r = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
 
 const Spinner = ({
   size: _size = 28,
@@ -473,10 +473,10 @@ const Spinner = ({
 }) => {
   return React__default.createElement("div", {
     className: classnames({
-      [styles$1o['spinner--block']]: _block
+      [styles$1r['spinner--block']]: _block
     })
   }, React__default.createElement("svg", {
-    className: styles$1o['spinner'],
+    className: styles$1r['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: _size,
     height: _size,
@@ -551,7 +551,7 @@ const Spinner = ({
     offset: "1",
     stopColor: "#760088"
   }))), React__default.createElement("circle", {
-    className: classnames(styles$1o['path'], styles$1o[`path--${_theme}`]),
+    className: classnames(styles$1r['path'], styles$1r[`path--${_theme}`]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -561,9 +561,9 @@ const Spinner = ({
   })));
 };
 
-var styles$1n = {"tooltip":"_Ydu2O"};
+var styles$1q = {"tooltip":"_Ydu2O"};
 
-var styles$1m = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
+var styles$1p = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
 
 const TOOLTIP_THEME = {
   BLACK: 'black',
@@ -757,24 +757,24 @@ const TooltipOverlay = ({
       maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames(styles$1m['tooltip-overlay'], extraClass, {
-      [styles$1m['tooltip-overlay--visible']]: isVisible,
-      [styles$1m['tooltip-overlay--black-theme']]: theme === TOOLTIP_THEME.BLACK,
-      [styles$1m['tooltip-overlay--white-theme']]: theme === TOOLTIP_THEME.WHITE
+    className: classnames(styles$1p['tooltip-overlay'], extraClass, {
+      [styles$1p['tooltip-overlay--visible']]: isVisible,
+      [styles$1p['tooltip-overlay--black-theme']]: theme === TOOLTIP_THEME.BLACK,
+      [styles$1p['tooltip-overlay--white-theme']]: theme === TOOLTIP_THEME.WHITE
     }),
     onMouseEnter: onFocusIn,
     onMouseLeave: onFocusOut
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement("div", {
-    className: styles$1m['tooltip-overlay__header']
+    className: styles$1p['tooltip-overlay__header']
   }, header), children)), React__default.createElement("div", {
-    className: classnames(styles$1m['tooltip-overlay-arrow'], extraClass, {
-      [styles$1m['tooltip-overlay-arrow--visible']]: isVisible,
-      [styles$1m['tooltip-overlay-arrow--top']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP,
-      [styles$1m['tooltip-overlay-arrow--bottom']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM,
-      [styles$1m['tooltip-overlay-arrow--black-theme']]: theme === TOOLTIP_THEME.BLACK,
-      [styles$1m['tooltip-overlay-arrow--white-theme']]: theme === TOOLTIP_THEME.WHITE
+    className: classnames(styles$1p['tooltip-overlay-arrow'], extraClass, {
+      [styles$1p['tooltip-overlay-arrow--visible']]: isVisible,
+      [styles$1p['tooltip-overlay-arrow--top']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP,
+      [styles$1p['tooltip-overlay-arrow--bottom']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM,
+      [styles$1p['tooltip-overlay-arrow--black-theme']]: theme === TOOLTIP_THEME.BLACK,
+      [styles$1p['tooltip-overlay-arrow--white-theme']]: theme === TOOLTIP_THEME.WHITE
     }),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
@@ -886,7 +886,7 @@ const TooltipElement = ({
     }), overlayElement);
   }
   return React__default.createElement("div", _extends({
-    className: classnames(styles$1n['tooltip'])
+    className: classnames(styles$1q['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -896,7 +896,7 @@ const isTooltipCompatible = element => {
   return React__default.isValidElement(element) && typeof element.type === 'string';
 };
 
-var styles$1l = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
+var styles$1o = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 const BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -950,7 +950,7 @@ const COMPONENT_NAMES = {
   BUTTON: 'BUTTON'
 };
 
-const _excluded$2Z = ["children", "type", "theme", "disabled", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "id", "loading", "title", "href", "target", "testId", "size"],
+const _excluded$2$ = ["children", "type", "theme", "disabled", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "id", "loading", "title", "href", "target", "testId", "size"],
   _excluded2 = ["id", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "className", "type", "disabled", "href", "target", "children", "position", "dataProps"];
 const ButtonComponent = (_ref, ref) => {
   let {
@@ -972,7 +972,7 @@ const ButtonComponent = (_ref, ref) => {
       testId,
       size
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2$);
   const {
     positionProps,
     otherProps
@@ -991,24 +991,24 @@ const ButtonComponent = (_ref, ref) => {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames(styles$1l['button'], {
-      [styles$1l['button--default']]: theme === BUTTON_THEMES.DEFAULT,
-      [styles$1l['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
-      [styles$1l['button--danger']]: theme === BUTTON_THEMES.DANGER,
-      [styles$1l['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
-      [styles$1l['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
-      [styles$1l['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
-      [styles$1l['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
-      [styles$1l['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
-      [styles$1l['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
-      [styles$1l['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
-      [styles$1l['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
-      [styles$1l['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
-      [styles$1l['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
-      [styles$1l['button--loading']]: loading,
-      [styles$1l['button--icon-only']]: isIconOnly,
-      [styles$1l['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
-      [styles$1l['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
+    className: classnames(styles$1o['button'], {
+      [styles$1o['button--default']]: theme === BUTTON_THEMES.DEFAULT,
+      [styles$1o['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
+      [styles$1o['button--danger']]: theme === BUTTON_THEMES.DANGER,
+      [styles$1o['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
+      [styles$1o['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
+      [styles$1o['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
+      [styles$1o['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
+      [styles$1o['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
+      [styles$1o['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
+      [styles$1o['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
+      [styles$1o['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
+      [styles$1o['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
+      [styles$1o['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
+      [styles$1o['button--loading']]: loading,
+      [styles$1o['button--icon-only']]: isIconOnly,
+      [styles$1o['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
+      [styles$1o['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
     }),
     type: type,
     disabled: disabled || loading,
@@ -1022,7 +1022,7 @@ const ButtonComponent = (_ref, ref) => {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default.createElement("div", {
-    className: styles$1l['button__spinner']
+    className: styles$1o['button__spinner']
   }, React__default.createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1032,7 +1032,7 @@ const ButtonComponent = (_ref, ref) => {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default.createElement("div", {
-      className: styles$1l['disabled-button-wrapper']
+      className: styles$1o['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -1115,7 +1115,7 @@ const useIsInsideComponent = parentComponentName => {
   return componentName === parentComponentName;
 };
 
-const _excluded$2Y = ["testId", "size", "color", "style"];
+const _excluded$2_ = ["testId", "size", "color", "style"];
 const IconInfoCircle = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-info-circle',
@@ -1123,7 +1123,7 @@ const IconInfoCircle = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2_);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1146,7 +1146,7 @@ const IconInfoCircle = forwardRef((_ref, ref) => {
 });
 IconInfoCircle.displayName = 'IconInfoCircle';
 
-const _excluded$2X = ["testId", "size", "color", "style"];
+const _excluded$2Z = ["testId", "size", "color", "style"];
 const IconAnalytics = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-analytics',
@@ -1154,7 +1154,7 @@ const IconAnalytics = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1177,7 +1177,7 @@ const IconAnalytics = forwardRef((_ref, ref) => {
 });
 IconAnalytics.displayName = 'IconAnalytics';
 
-const _excluded$2W = ["testId", "size", "color", "style"];
+const _excluded$2Y = ["testId", "size", "color", "style"];
 const IconArrowDownWideShort = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-down-wide-short',
@@ -1185,7 +1185,7 @@ const IconArrowDownWideShort = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Y);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1206,7 +1206,7 @@ const IconArrowDownWideShort = forwardRef((_ref, ref) => {
 });
 IconArrowDownWideShort.displayName = 'IconArrowDownWideShort';
 
-const _excluded$2V = ["testId", "size", "color", "style"];
+const _excluded$2X = ["testId", "size", "color", "style"];
 const IconArrowDown = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-down',
@@ -1214,7 +1214,7 @@ const IconArrowDown = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2V);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2X);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1237,7 +1237,7 @@ const IconArrowDown = forwardRef((_ref, ref) => {
 });
 IconArrowDown.displayName = 'IconArrowDown';
 
-const _excluded$2U = ["testId", "size", "color", "style"];
+const _excluded$2W = ["testId", "size", "color", "style"];
 const IconArrowLeft = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-left',
@@ -1245,7 +1245,7 @@ const IconArrowLeft = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2W);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1268,7 +1268,7 @@ const IconArrowLeft = forwardRef((_ref, ref) => {
 });
 IconArrowLeft.displayName = 'IconArrowLeft';
 
-const _excluded$2T = ["testId", "size", "color", "style"];
+const _excluded$2V = ["testId", "size", "color", "style"];
 const IconArrowRight = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-right',
@@ -1276,7 +1276,7 @@ const IconArrowRight = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2V);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1299,7 +1299,7 @@ const IconArrowRight = forwardRef((_ref, ref) => {
 });
 IconArrowRight.displayName = 'IconArrowRight';
 
-const _excluded$2S = ["testId", "size", "color", "style"];
+const _excluded$2U = ["testId", "size", "color", "style"];
 const IconArrowToTop = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-to-top',
@@ -1307,7 +1307,7 @@ const IconArrowToTop = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2U);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1328,7 +1328,7 @@ const IconArrowToTop = forwardRef((_ref, ref) => {
 });
 IconArrowToTop.displayName = 'IconArrowToTop';
 
-const _excluded$2R = ["testId", "size", "color", "style"];
+const _excluded$2T = ["testId", "size", "color", "style"];
 const IconArrowTurnDownRight = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-turn-down-right',
@@ -1336,7 +1336,7 @@ const IconArrowTurnDownRight = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2T);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1365,7 +1365,7 @@ const IconArrowTurnDownRight = forwardRef((_ref, ref) => {
 });
 IconArrowTurnDownRight.displayName = 'IconArrowTurnDownRight';
 
-const _excluded$2Q = ["testId", "size", "color", "style"];
+const _excluded$2S = ["testId", "size", "color", "style"];
 const IconArrowUp = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-arrow-up',
@@ -1373,7 +1373,7 @@ const IconArrowUp = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2S);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1396,7 +1396,7 @@ const IconArrowUp = forwardRef((_ref, ref) => {
 });
 IconArrowUp.displayName = 'IconArrowUp';
 
-const _excluded$2P = ["testId", "size", "color", "style"];
+const _excluded$2R = ["testId", "size", "color", "style"];
 const IconAward = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-award',
@@ -1404,7 +1404,7 @@ const IconAward = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2R);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1427,7 +1427,7 @@ const IconAward = forwardRef((_ref, ref) => {
 });
 IconAward.displayName = 'IconAward';
 
-const _excluded$2O = ["testId", "size", "color", "style"];
+const _excluded$2Q = ["testId", "size", "color", "style"];
 const IconAwfulMonochromatic = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-awful-monochromatic',
@@ -1435,7 +1435,7 @@ const IconAwfulMonochromatic = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2O);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Q);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1488,7 +1488,7 @@ const IconAwfulMonochromatic = forwardRef((_ref, ref) => {
 });
 IconAwfulMonochromatic.displayName = 'IconAwfulMonochromatic';
 
-const _excluded$2N = ["testId", "size", "color", "style"];
+const _excluded$2P = ["testId", "size", "color", "style"];
 const IconAwful = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-awful',
@@ -1496,7 +1496,7 @@ const IconAwful = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2P);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1537,7 +1537,7 @@ const IconAwful = forwardRef((_ref, ref) => {
 });
 IconAwful.displayName = 'IconAwful';
 
-const _excluded$2M = ["testId", "size", "color", "style"];
+const _excluded$2O = ["testId", "size", "color", "style"];
 const IconBadMonochromatic = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bad-monochromatic',
@@ -1545,7 +1545,7 @@ const IconBadMonochromatic = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2M);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2O);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1584,7 +1584,7 @@ const IconBadMonochromatic = forwardRef((_ref, ref) => {
 });
 IconBadMonochromatic.displayName = 'IconBadMonochromatic';
 
-const _excluded$2L = ["testId", "size", "color", "style"];
+const _excluded$2N = ["testId", "size", "color", "style"];
 const IconBad = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bad',
@@ -1592,7 +1592,7 @@ const IconBad = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2N);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1619,7 +1619,7 @@ const IconBad = forwardRef((_ref, ref) => {
 });
 IconBad.displayName = 'IconBad';
 
-const _excluded$2K = ["testId", "size", "color", "style"];
+const _excluded$2M = ["testId", "size", "color", "style"];
 const IconBalanceScaleLeft = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-balance-scale-left',
@@ -1627,7 +1627,7 @@ const IconBalanceScaleLeft = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2M);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1655,7 +1655,7 @@ const IconBalanceScaleLeft = forwardRef((_ref, ref) => {
 });
 IconBalanceScaleLeft.displayName = 'IconBalanceScaleLeft';
 
-const _excluded$2J = ["testId", "size", "color", "style"];
+const _excluded$2L = ["testId", "size", "color", "style"];
 const IconBalanceScale = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-balance-scale',
@@ -1663,7 +1663,7 @@ const IconBalanceScale = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2L);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1691,7 +1691,7 @@ const IconBalanceScale = forwardRef((_ref, ref) => {
 });
 IconBalanceScale.displayName = 'IconBalanceScale';
 
-const _excluded$2I = ["testId", "size", "color", "style"];
+const _excluded$2K = ["testId", "size", "color", "style"];
 const IconBan = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-ban',
@@ -1699,7 +1699,7 @@ const IconBan = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1720,7 +1720,7 @@ const IconBan = forwardRef((_ref, ref) => {
 });
 IconBan.displayName = 'IconBan';
 
-const _excluded$2H = ["testId", "size", "color", "style"];
+const _excluded$2J = ["testId", "size", "color", "style"];
 const IconBarsH = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bars-h',
@@ -1728,7 +1728,7 @@ const IconBarsH = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1751,7 +1751,7 @@ const IconBarsH = forwardRef((_ref, ref) => {
 });
 IconBarsH.displayName = 'IconBarsH';
 
-const _excluded$2G = ["testId", "size", "color", "style"];
+const _excluded$2I = ["testId", "size", "color", "style"];
 const IconBarsV = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bars-v',
@@ -1759,7 +1759,7 @@ const IconBarsV = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1780,7 +1780,7 @@ const IconBarsV = forwardRef((_ref, ref) => {
 });
 IconBarsV.displayName = 'IconBarsV';
 
-const _excluded$2F = ["testId", "size", "color", "style"];
+const _excluded$2H = ["testId", "size", "color", "style"];
 const IconBell = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bell',
@@ -1788,7 +1788,7 @@ const IconBell = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1811,7 +1811,7 @@ const IconBell = forwardRef((_ref, ref) => {
 });
 IconBell.displayName = 'IconBell';
 
-const _excluded$2E = ["testId", "size", "color", "style"];
+const _excluded$2G = ["testId", "size", "color", "style"];
 const IconBirthdayCake = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-birthday-cake',
@@ -1819,7 +1819,7 @@ const IconBirthdayCake = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1840,7 +1840,7 @@ const IconBirthdayCake = forwardRef((_ref, ref) => {
 });
 IconBirthdayCake.displayName = 'IconBirthdayCake';
 
-const _excluded$2D = ["testId", "size", "color", "style"];
+const _excluded$2F = ["testId", "size", "color", "style"];
 const IconBold = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bold',
@@ -1848,7 +1848,7 @@ const IconBold = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1869,7 +1869,7 @@ const IconBold = forwardRef((_ref, ref) => {
 });
 IconBold.displayName = 'IconBold';
 
-const _excluded$2C = ["testId", "size", "color", "style"];
+const _excluded$2E = ["testId", "size", "color", "style"];
 const IconBolt = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bolt',
@@ -1877,7 +1877,7 @@ const IconBolt = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1905,7 +1905,7 @@ const IconBolt = forwardRef((_ref, ref) => {
 });
 IconBolt.displayName = 'IconBolt';
 
-const _excluded$2B = ["testId", "size", "color", "style"];
+const _excluded$2D = ["testId", "size", "color", "style"];
 const IconBook = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-book',
@@ -1913,7 +1913,7 @@ const IconBook = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1936,7 +1936,7 @@ const IconBook = forwardRef((_ref, ref) => {
 });
 IconBook.displayName = 'IconBook';
 
-const _excluded$2A = ["testId", "size", "color", "style"];
+const _excluded$2C = ["testId", "size", "color", "style"];
 const IconBriefcase = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-briefcase',
@@ -1944,7 +1944,7 @@ const IconBriefcase = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1965,7 +1965,7 @@ const IconBriefcase = forwardRef((_ref, ref) => {
 });
 IconBriefcase.displayName = 'IconBriefcase';
 
-const _excluded$2z = ["testId", "size", "color", "style"];
+const _excluded$2B = ["testId", "size", "color", "style"];
 const IconBullseyeArrow = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-bullseye-arrow',
@@ -1973,7 +1973,7 @@ const IconBullseyeArrow = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1996,7 +1996,7 @@ const IconBullseyeArrow = forwardRef((_ref, ref) => {
 });
 IconBullseyeArrow.displayName = 'IconBullseyeArrow';
 
-const _excluded$2y = ["testId", "size", "color", "style"];
+const _excluded$2A = ["testId", "size", "color", "style"];
 const IconCalculator = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calculator',
@@ -2004,7 +2004,7 @@ const IconCalculator = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2027,7 +2027,7 @@ const IconCalculator = forwardRef((_ref, ref) => {
 });
 IconCalculator.displayName = 'IconCalculator';
 
-const _excluded$2x = ["testId", "size", "color", "style"];
+const _excluded$2z = ["testId", "size", "color", "style"];
 const IconCalendarAlt = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-alt',
@@ -2035,7 +2035,7 @@ const IconCalendarAlt = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2058,7 +2058,7 @@ const IconCalendarAlt = forwardRef((_ref, ref) => {
 });
 IconCalendarAlt.displayName = 'IconCalendarAlt';
 
-const _excluded$2w = ["testId", "size", "color", "style"];
+const _excluded$2y = ["testId", "size", "color", "style"];
 const IconCalendarCheck = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-check',
@@ -2066,7 +2066,7 @@ const IconCalendarCheck = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2089,7 +2089,7 @@ const IconCalendarCheck = forwardRef((_ref, ref) => {
 });
 IconCalendarCheck.displayName = 'IconCalendarCheck';
 
-const _excluded$2v = ["testId", "size", "color", "style"];
+const _excluded$2x = ["testId", "size", "color", "style"];
 const IconCalendarDay = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-day',
@@ -2097,7 +2097,7 @@ const IconCalendarDay = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2125,7 +2125,7 @@ const IconCalendarDay = forwardRef((_ref, ref) => {
 });
 IconCalendarDay.displayName = 'IconCalendarDay';
 
-const _excluded$2u = ["testId", "size", "color", "style"];
+const _excluded$2w = ["testId", "size", "color", "style"];
 const IconCalendarExclamation = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-exclamation',
@@ -2133,7 +2133,7 @@ const IconCalendarExclamation = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2154,7 +2154,7 @@ const IconCalendarExclamation = forwardRef((_ref, ref) => {
 });
 IconCalendarExclamation.displayName = 'IconCalendarExclamation';
 
-const _excluded$2t = ["testId", "size", "color", "style"];
+const _excluded$2v = ["testId", "size", "color", "style"];
 const IconCalendarStar = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-star',
@@ -2162,7 +2162,7 @@ const IconCalendarStar = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2183,7 +2183,7 @@ const IconCalendarStar = forwardRef((_ref, ref) => {
 });
 IconCalendarStar.displayName = 'IconCalendarStar';
 
-const _excluded$2s = ["testId", "size", "color", "style"];
+const _excluded$2u = ["testId", "size", "color", "style"];
 const IconCalendarTomorrow = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar-tomorrow',
@@ -2191,7 +2191,7 @@ const IconCalendarTomorrow = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2221,7 +2221,7 @@ const IconCalendarTomorrow = forwardRef((_ref, ref) => {
 });
 IconCalendarTomorrow.displayName = 'IconCalendarTomorrow';
 
-const _excluded$2r = ["testId", "size", "color", "style"];
+const _excluded$2t = ["testId", "size", "color", "style"];
 const IconCalendar = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-calendar',
@@ -2229,7 +2229,7 @@ const IconCalendar = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2252,7 +2252,7 @@ const IconCalendar = forwardRef((_ref, ref) => {
 });
 IconCalendar.displayName = 'IconCalendar';
 
-const _excluded$2q = ["testId", "size", "color", "style"];
+const _excluded$2s = ["testId", "size", "color", "style"];
 const IconCameraSlash = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-camera-slash',
@@ -2260,7 +2260,7 @@ const IconCameraSlash = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2284,7 +2284,7 @@ const IconCameraSlash = forwardRef((_ref, ref) => {
 });
 IconCameraSlash.displayName = 'IconCameraSlash';
 
-const _excluded$2p = ["testId", "size", "color", "style"];
+const _excluded$2r = ["testId", "size", "color", "style"];
 const IconCamera = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-camera',
@@ -2292,7 +2292,7 @@ const IconCamera = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2313,7 +2313,7 @@ const IconCamera = forwardRef((_ref, ref) => {
 });
 IconCamera.displayName = 'IconCamera';
 
-const _excluded$2o = ["testId", "size", "color", "style"];
+const _excluded$2q = ["testId", "size", "color", "style"];
 const IconCashRegister = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-cash-register',
@@ -2321,7 +2321,7 @@ const IconCashRegister = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2342,7 +2342,7 @@ const IconCashRegister = forwardRef((_ref, ref) => {
 });
 IconCashRegister.displayName = 'IconCashRegister';
 
-const _excluded$2n = ["testId", "size", "color", "style"];
+const _excluded$2p = ["testId", "size", "color", "style"];
 const IconChartBar = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-chart-bar',
@@ -2350,7 +2350,7 @@ const IconChartBar = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2373,7 +2373,7 @@ const IconChartBar = forwardRef((_ref, ref) => {
 });
 IconChartBar.displayName = 'IconChartBar';
 
-const _excluded$2m = ["testId", "size", "color", "style"];
+const _excluded$2o = ["testId", "size", "color", "style"];
 const IconCheckCircleIncomplete = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-check-circle-incomplete',
@@ -2381,7 +2381,7 @@ const IconCheckCircleIncomplete = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2402,7 +2402,36 @@ const IconCheckCircleIncomplete = forwardRef((_ref, ref) => {
 });
 IconCheckCircleIncomplete.displayName = 'IconCheckCircleIncomplete';
 
-const _excluded$2l = ["testId", "size", "color", "style"];
+const _excluded$2n = ["testId", "size", "color", "style"];
+const IconCheckCircle = forwardRef((_ref, ref) => {
+  let {
+      testId = 'icon-check-circle',
+      size,
+      color,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+  const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  const styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color,
+    style
+  };
+  return React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default.createElement("path", {
+    fill: "currentColor",
+    d: "M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10Zm4.61-14.309a.937.937 0 0 0-1.31.207l-4.663 6.415-2.035-2.036a.937.937 0 0 0-1.324 1.324l2.812 2.813c.195.195.46.293.734.274a.923.923 0 0 0 .684-.383L14.816 7a.937.937 0 0 0-.207-1.309Z"
+  }));
+});
+IconCheckCircle.displayName = 'IconCheckCircle';
+
+const _excluded$2m = ["testId", "size", "color", "style"];
 const IconCheck = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-check',
@@ -2410,7 +2439,7 @@ const IconCheck = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2433,7 +2462,7 @@ const IconCheck = forwardRef((_ref, ref) => {
 });
 IconCheck.displayName = 'IconCheck';
 
-const _excluded$2k = ["testId", "size", "color", "style"];
+const _excluded$2l = ["testId", "size", "color", "style"];
 const IconChevronDown = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-chevron-down',
@@ -2441,7 +2470,7 @@ const IconChevronDown = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2464,7 +2493,7 @@ const IconChevronDown = forwardRef((_ref, ref) => {
 });
 IconChevronDown.displayName = 'IconChevronDown';
 
-const _excluded$2j = ["testId", "size", "color", "style"];
+const _excluded$2k = ["testId", "size", "color", "style"];
 const IconChevronLeft = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-chevron-left',
@@ -2472,7 +2501,7 @@ const IconChevronLeft = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2495,7 +2524,7 @@ const IconChevronLeft = forwardRef((_ref, ref) => {
 });
 IconChevronLeft.displayName = 'IconChevronLeft';
 
-const _excluded$2i = ["testId", "size", "color", "style"];
+const _excluded$2j = ["testId", "size", "color", "style"];
 const IconChevronRight = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-chevron-right',
@@ -2503,7 +2532,7 @@ const IconChevronRight = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2526,7 +2555,7 @@ const IconChevronRight = forwardRef((_ref, ref) => {
 });
 IconChevronRight.displayName = 'IconChevronRight';
 
-const _excluded$2h = ["testId", "size", "color", "style"];
+const _excluded$2i = ["testId", "size", "color", "style"];
 const IconChevronUp = forwardRef((_ref, ref) => {
   let {
       testId = 'icon-chevron-up',
@@ -2534,7 +2563,7 @@ const IconChevronUp = forwardRef((_ref, ref) => {
       color,
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
   const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   const styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2557,6 +2586,35 @@ const IconChevronUp = forwardRef((_ref, ref) => {
 });
 IconChevronUp.displayName = 'IconChevronUp';
 
+const _excluded$2h = ["testId", "size", "color", "style"];
+const IconCircleHalfStroke = forwardRef((_ref, ref) => {
+  let {
+      testId = 'icon-circle-half-stroke',
+      size,
+      color,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+  const isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  const styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color,
+    style
+  };
+  return React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default.createElement("path", {
+    fill: "currentColor",
+    d: "M17.5 10c0-4.14-3.36-7.5-7.5-7.5v15c4.14 0 7.5-3.36 7.5-7.5ZM0 10a10 10 0 1 1 20 0 10 10 0 0 1-20 0Z"
+  }));
+});
+IconCircleHalfStroke.displayName = 'IconCircleHalfStroke';
+
 const _excluded$2g = ["testId", "size", "color", "style"];
 const IconClipboardList = forwardRef((_ref, ref) => {
   let {
@@ -6296,20 +6354,20 @@ const IconWrench = forwardRef((_ref, ref) => {
 });
 IconWrench.displayName = 'IconWrench';
 
-var styles$1k = {"pagination-controls":"_S1co-"};
+var styles$1n = {"pagination-controls":"_S1co-"};
 
-var styles$1j = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
+var styles$1m = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
 
 const KeyboardKey = ({
   children,
   theme: _theme = 'dark'
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1j['keyboard-key'], {
-      [styles$1j['keyboard-key--light']]: _theme === 'light'
+    className: classnames(styles$1m['keyboard-key'], {
+      [styles$1m['keyboard-key--light']]: _theme === 'light'
     })
   }, React__default.createElement("span", {
-    className: styles$1j['keyboard-key__character']
+    className: styles$1m['keyboard-key__character']
   }, children));
 };
 
@@ -6517,7 +6575,7 @@ const PaginationControls = _ref => {
     }
   });
   return React__default.createElement("div", _extends({}, dataProps, {
-    className: styles$1k['pagination-controls'],
+    className: styles$1n['pagination-controls'],
     "data-testid": testId
   }), React__default.createElement(Button, {
     disabled: !hasPrevious,
@@ -6547,60 +6605,14 @@ const LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1i = {"link":"_EiQ4c","link--contrast":"_weJDR"};
-
-/**
- * This hook checks the background color of the container element
- * and determines if it's dark or light. It climbs up the DOM tree
- * to find the first ancestor with a non-transparent background color.
- *
- * NOTE: Use this hook only when necessary, as it involves DOM access
- * and may impact performance.
- */
-const useContainerBackgroundColorCheck = ({
-  ref,
-  shouldCheck
-}) => {
-  const [background, setBackground] = useState();
-  // Walk up the DOM tree to find the first ancestor with a
-  // non-transparent background color. Fallback to body color.
-  const getEffectiveBackgroundColor = el => {
-    let node = el == null ? void 0 : el.parentElement;
-    while (node) {
-      const bg = window.getComputedStyle(node).getPropertyValue('background-color');
-      // "transparent" or rgba(..., 0) should be ignored
-      const isTransparent = bg === 'transparent' || /rgba\([^)]*,\s*0\)/.test(bg);
-      if (!isTransparent) {
-        return bg;
-      }
-      // Stop climbing at <body> and use its color
-      if (node.tagName.toLowerCase() === 'body') {
-        break;
-      }
-      node = node.parentElement;
-    }
-    const bodyBg = window.getComputedStyle(document.body).getPropertyValue('background-color');
-    return bodyBg;
-  };
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!shouldCheck || !element) {
-      return;
-    }
-    const bg = getEffectiveBackgroundColor(element);
-    const rgb = bg.replace(/^rgba?\(|\s+|\)$/g, '').split(',').slice(0, 3).map(Number);
-    const luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
-    setBackground(luminance < 128 ? 'dark' : 'light');
-  }, [ref, shouldCheck]);
-  return background;
-};
+var styles$1l = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 const _excluded$t = ["href", "target", "theme", "onClick", "children"];
 const Link = _ref => {
   let {
       href,
       target = LINK_TARGET.BLANK,
-      theme,
+      theme = LINK_THEME.PRIMARY,
       onClick,
       children
     } = _ref,
@@ -6609,17 +6621,10 @@ const Link = _ref => {
     dataProps
   } = getDataProps(otherProps);
   const ref = React__default.useRef(null);
-  const background = useContainerBackgroundColorCheck({
-    ref,
-    // It only needs to check the background when theme is not provided
-    shouldCheck: !theme
-  });
-  // If there is no theme provided, determine it based on the container background
-  const currentTheme = theme || (background === 'dark' ? LINK_THEME.CONTRAST : LINK_THEME.PRIMARY);
   return React__default.createElement("a", _extends({}, dataProps, {
-    className: classnames(styles$1i['link'], {
-      [styles$1i['link--primary']]: currentTheme === LINK_THEME.PRIMARY,
-      [styles$1i['link--contrast']]: currentTheme === LINK_THEME.CONTRAST
+    className: classnames(styles$1l['link'], {
+      [styles$1l['link--primary']]: theme === LINK_THEME.PRIMARY,
+      [styles$1l['link--contrast']]: theme === LINK_THEME.CONTRAST
     }),
     href: href,
     target: target,
@@ -6641,7 +6646,7 @@ const DropdownContext = React__default.createContext({
 });
 const useDropdownContext = () => React__default.useContext(DropdownContext);
 
-var styles$1h = {"dropdown-pane":"_sp-pT"};
+var styles$1k = {"dropdown-pane":"_sp-pT"};
 
 const DROPDOWN_PANE_PADDING = 14;
 const calculateOverlayPosition = (triggerPosition, triggerOffsetHeight, panePosition, alignment) => {
@@ -6777,8 +6782,8 @@ const PaneOverlay = ({
   useKeyPress(['Escape'], onToggleDropdown);
   const overflow = maxHeight ? 'auto' : undefined;
   return React__default.createElement("div", {
-    className: classnames(styles$1h['dropdown-pane'], {
-      [styles$1h['dropdown-pane--with-padding']]: true
+    className: classnames(styles$1k['dropdown-pane'], {
+      [styles$1k['dropdown-pane--with-padding']]: true
     }),
     style: _extends({}, position, {
       width,
@@ -6808,7 +6813,7 @@ const getKeyboardFocusableElements = element => {
   });
 };
 
-var styles$1g = {"dropdown__trigger":"_AktVc"};
+var styles$1j = {"dropdown__trigger":"_AktVc"};
 
 const DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -6819,7 +6824,7 @@ const DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1f = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1i = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 const isEllipsisActive = e => {
   return e.offsetWidth < e.scrollWidth;
@@ -6868,8 +6873,8 @@ const Label = ({
   const LabelElement = React__default.createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames(styles$1f['label'], {
-      [styles$1f['label--truncate']]: shouldTruncate
+    className: classnames(styles$1i['label'], {
+      [styles$1i['label--truncate']]: shouldTruncate
     })
   }, children);
   if (showTooltip) {
@@ -6881,7 +6886,7 @@ const Label = ({
   return LabelElement;
 };
 
-var styles$1e = {"caption":"_Qrxg5"};
+var styles$1h = {"caption":"_Qrxg5"};
 
 const Caption = ({
   fieldId,
@@ -6889,11 +6894,11 @@ const Caption = ({
 }) => {
   return React__default.createElement("div", {
     id: fieldId && `${fieldId}-describer`,
-    className: styles$1e['caption']
+    className: styles$1h['caption']
   }, children);
 };
 
-var styles$1d = {"error-message":"_eS4YO"};
+var styles$1g = {"error-message":"_eS4YO"};
 
 const ErrorMessage = ({
   fieldId,
@@ -6902,7 +6907,7 @@ const ErrorMessage = ({
 }) => {
   return React__default.createElement("div", {
     id: fieldId && `${fieldId}-error-message`,
-    className: styles$1d['error-message'],
+    className: styles$1g['error-message'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     space: 8,
@@ -6939,7 +6944,7 @@ const ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$1c = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
+var styles$1f = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
 
 const _excluded$s = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 const TextComponent = (_ref, ref) => {
@@ -6967,21 +6972,21 @@ const TextComponent = (_ref, ref) => {
       color: getColor(color),
       textWrap
     }, positionStyles),
-    className: classnames(styles$1c['text'], {
-      [styles$1c['text--bold']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD),
-      [styles$1c['text--italic']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC),
-      [styles$1c['text--underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE),
-      [styles$1c['text--dotted-underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE),
-      [styles$1c['text--monospace']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE),
-      [styles$1c['text--line-through']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH),
-      [styles$1c['text--align-left']]: alignment === ALIGNMENTS.LEFT,
-      [styles$1c['text--align-right']]: alignment === ALIGNMENTS.RIGHT,
-      [styles$1c['text--align-center']]: alignment === ALIGNMENTS.CENTER,
-      [styles$1c['text--align-justify']]: alignment === ALIGNMENTS.JUSTIFY,
-      [styles$1c['text__body']]: as === TEXT_TYPES.BODY,
-      [styles$1c['text__insight']]: as === TEXT_TYPES.INSIGHT,
-      [styles$1c['text__caption']]: as === TEXT_TYPES.CAPTION,
-      [styles$1c['text__span']]: as === TEXT_TYPES.SPAN
+    className: classnames(styles$1f['text'], {
+      [styles$1f['text--bold']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD),
+      [styles$1f['text--italic']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC),
+      [styles$1f['text--underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE),
+      [styles$1f['text--dotted-underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE),
+      [styles$1f['text--monospace']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE),
+      [styles$1f['text--line-through']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH),
+      [styles$1f['text--align-left']]: alignment === ALIGNMENTS.LEFT,
+      [styles$1f['text--align-right']]: alignment === ALIGNMENTS.RIGHT,
+      [styles$1f['text--align-center']]: alignment === ALIGNMENTS.CENTER,
+      [styles$1f['text--align-justify']]: alignment === ALIGNMENTS.JUSTIFY,
+      [styles$1f['text__body']]: as === TEXT_TYPES.BODY,
+      [styles$1f['text__insight']]: as === TEXT_TYPES.INSIGHT,
+      [styles$1f['text__caption']]: as === TEXT_TYPES.CAPTION,
+      [styles$1f['text__span']]: as === TEXT_TYPES.SPAN
     }),
     'data-testid': testId
   }, dataProps, other, {
@@ -6998,7 +7003,7 @@ const Bold = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1c['text--bold'], styles$1c['text'])
+    className: classnames(styles$1f['text--bold'], styles$1f['text'])
   }, children);
 };
 
@@ -7006,7 +7011,7 @@ const Underline = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1c['text--underline'], styles$1c['text'])
+    className: classnames(styles$1f['text--underline'], styles$1f['text'])
   }, children);
 };
 
@@ -7014,7 +7019,7 @@ const Italic = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1c['text--italic'], styles$1c['text'])
+    className: classnames(styles$1f['text--italic'], styles$1f['text'])
   }, children);
 };
 
@@ -7151,7 +7156,7 @@ const useFieldControllers = ({
   return controllers;
 };
 
-var styles$1b = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
+var styles$1e = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
 
 const _excluded$q = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 const useTextField = _ref => {
@@ -7192,8 +7197,8 @@ const useTextField = _ref => {
     'aria-invalid': hasError,
     autoComplete,
     autoFocus,
-    className: classnames(styles$1b['text-field'], {
-      [styles$1b['text-field--invalid']]: hasError
+    className: classnames(styles$1e['text-field'], {
+      [styles$1e['text-field--invalid']]: hasError
     }),
     'data-testid': testId,
     disabled,
@@ -7224,7 +7229,7 @@ const useTextField = _ref => {
   };
 };
 
-var styles$1a = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
+var styles$1d = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
 
 const AffixContainer = ({
   prefix,
@@ -7259,19 +7264,19 @@ const AffixContainer = ({
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  const classes = classnames(styles$1a['affix-container'], {
-    [styles$1a['affix-container--prefixed']]: hasPrefix,
-    [styles$1a['affix-container--suffixed']]: hasSuffix
+  const classes = classnames(styles$1d['affix-container'], {
+    [styles$1d['affix-container--prefixed']]: hasPrefix,
+    [styles$1d['affix-container--suffixed']]: hasSuffix
   });
   return React__default.createElement("div", {
     className: classes,
     ref: container,
     "data-testid": testId
   }, hasPrefix && React__default.createElement("div", {
-    className: styles$1a['prefix'],
+    className: styles$1d['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$1a['suffix'],
+    className: styles$1d['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -7478,7 +7483,7 @@ const Dropdown = ({
       paneRef
     }
   }, triggerIsKnownButton ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", _extends({}, triggerProps, {
-    className: styles$1g['dropdown__trigger'],
+    className: styles$1j['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default.createElement(DropdownPane, {
@@ -7492,7 +7497,7 @@ const Dropdown = ({
   }, children));
 };
 
-var styles$19 = {"dropdown-list":"_91hvH","dropdown-list__item--hover":"_aMs9c"};
+var styles$1c = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
 
 const findNextActiveIndex = (items, startAt) => {
   let startIndex = 0;
@@ -7533,16 +7538,16 @@ const findPreviousEnabledIndex = (items, startAt) => {
 
 const useListKeyboardNavigation = (listItems, listReference, actions) => {
   const [focusedItem, setFocusedItem] = useState(null);
-  const focusOnNextItem = callback => {
+  const focusOnNextItem = useCallback(callback => {
     const nextFocusItem = findNextActiveIndex(listItems, focusedItem);
     setFocusedItem(nextFocusItem);
     callback(nextFocusItem);
-  };
-  const focusOnPrevItem = callback => {
+  }, [listItems, focusedItem]);
+  const focusOnPrevItem = useCallback(callback => {
     const prevFocusItem = findPreviousEnabledIndex(listItems, focusedItem || 0);
     setFocusedItem(prevFocusItem);
     callback(prevFocusItem);
-  };
+  }, [listItems, focusedItem]);
   const setFocusOnItem = index => {
     if (index < 0) {
       setFocusedItem(null);
@@ -7554,28 +7559,78 @@ const useListKeyboardNavigation = (listItems, listReference, actions) => {
     setFocusedItem(index);
   };
   const handleKeyPress = useCallback(event => {
-    if (event.key === 'ArrowDown') {
+    const getSubmenuStatus = () => {
+      var _listReference$curren;
+      if (focusedItem === null) {
+        return 'closed';
+      }
+      const itemElement = (_listReference$curren = listReference.current) == null || (_listReference$curren = _listReference$curren.children.item(focusedItem)) == null ? void 0 : _listReference$curren.firstElementChild;
+      if ((itemElement == null ? void 0 : itemElement.getAttribute('data-submenu-status')) === 'open') {
+        return 'open';
+      }
+      return 'closed';
+    };
+    const submenuStatus = getSubmenuStatus();
+    if (event.key === 'ArrowDown' && submenuStatus === 'closed') {
       focusOnNextItem(focusItem => actions == null || actions.onNavigate == null ? void 0 : actions.onNavigate(focusItem));
     }
-    if (event.key === 'ArrowUp') {
+    if (event.key === 'ArrowUp' && submenuStatus === 'closed') {
       focusOnPrevItem(focusItem => actions == null || actions.onNavigate == null ? void 0 : actions.onNavigate(focusItem));
     }
+    if (event.key === 'ArrowRight' && focusedItem !== null) {
+      const {
+        submenu
+      } = listItems[focusedItem];
+      if (submenu) {
+        var _listReference$curren2, _itemElement$firstEle;
+        const itemElement = (_listReference$curren2 = listReference.current) == null ? void 0 : _listReference$curren2.children.item(focusedItem);
+        itemElement == null || (_itemElement$firstEle = itemElement.firstElementChild) == null || _itemElement$firstEle.click();
+      }
+    }
+    if (event.key === 'ArrowLeft' && focusedItem !== null) {
+      const {
+        submenu
+      } = listItems[focusedItem];
+      if (submenu) {
+        var _listReference$curren3;
+        const itemElement = (_listReference$curren3 = listReference.current) == null ? void 0 : _listReference$curren3.children.item(focusedItem);
+        const openSubmenus = itemElement.querySelectorAll('[data-submenu-status="open"]');
+        // It should close the submenu if there is only one open submenu, otherwise it should focus on the parent item
+        if (openSubmenus.length === 1) {
+          var _itemElement$firstEle2;
+          itemElement == null || (_itemElement$firstEle2 = itemElement.firstElementChild) == null || _itemElement$firstEle2.dispatchEvent(new CustomEvent('closeSubmenu', {
+            bubbles: true
+          }));
+        }
+      }
+    }
     if (event.key === 'Enter' && focusedItem !== null) {
+      var _listReference$curren4;
       const {
         onClick,
-        href
+        href,
+        submenu
       } = listItems[focusedItem];
       onClick && onClick(event);
-      if (href && listReference.current) {
-        var _listReference$curren;
-        const linkItem = (_listReference$curren = listReference.current.children.item(focusedItem)) == null ? void 0 : _listReference$curren.querySelector('a');
-        linkItem && linkItem.click();
+      const itemElement = (_listReference$curren4 = listReference.current) == null ? void 0 : _listReference$curren4.children.item(focusedItem);
+      if (submenu) {
+        var _itemElement$firstEle3;
+        itemElement == null || (_itemElement$firstEle3 = itemElement.firstElementChild) == null || _itemElement$firstEle3.click();
+      } else {
+        var _itemElement$firstEle4;
+        if (href && listReference.current) {
+          var _listReference$curren5;
+          const linkItem = (_listReference$curren5 = listReference.current.children.item(focusedItem)) == null ? void 0 : _listReference$curren5.querySelector('a');
+          linkItem && linkItem.click();
+        }
+        if ((itemElement == null || (_itemElement$firstEle4 = itemElement.firstElementChild) == null ? void 0 : _itemElement$firstEle4.getAttribute('data-selectable')) === 'false') {
+          actions && (actions.onPressEnter == null ? void 0 : actions.onPressEnter());
+        }
       }
-      actions && (actions.onPressEnter == null ? void 0 : actions.onPressEnter());
     }
     event.preventDefault();
-  }, [focusedItem]);
-  useKeyPress(['ArrowDown', 'ArrowUp', 'Enter'], handleKeyPress);
+  }, [actions, focusOnNextItem, focusOnPrevItem, focusedItem, listItems, listReference]);
+  useKeyPress(['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Enter'], handleKeyPress);
   return {
     focusedItem,
     setFocusOnItem
@@ -7592,18 +7647,136 @@ const checkIsComponent = (element, config) => {
   return isComponent;
 };
 
-var styles$18 = {"dropdown-list-divider":"_ISJ4M"};
+var styles$1b = {"dropdown-list-divider":"_ISJ4M"};
 
 const DropdownListDivider = ({
   testId
 }) => {
   return React__default.createElement("div", {
-    className: styles$18['dropdown-list-divider'],
+    className: styles$1b['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$17 = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
+var styles$1a = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY","dropdown-list-item__suffix-spot":"_UA23u"};
+
+var styles$19 = {"dropdown-submenu":"_X4fIx"};
+
+const DropdownSubmenu = forwardRef(({
+  children,
+  direction,
+  openSubmenu,
+  position
+}, ref) => {
+  const DEFAULT_POSITION = {
+    top: -9999,
+    left: -9999,
+    visibility: 'hidden'
+  };
+  return React__default.createElement("div", {
+    className: styles$19['dropdown-submenu'],
+    "data-submenu-direction": direction,
+    style: position || DEFAULT_POSITION,
+    onMouseEnter: openSubmenu,
+    onFocus: openSubmenu,
+    ref: ref
+  }, children);
+});
+
+const useSubmenu = ({
+  hasSubmenu,
+  disabled
+}) => {
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+  const [submenuDirection, setSubmenuDirection] = useState('right');
+  const [submenuPosition, setSubmenuPosition] = useState(null);
+  const itemRef = useRef(null);
+  const submenuRef = useRef(null);
+  const closeSubmenuTimeoutRef = useRef(null);
+  const clearCloseSubmenuTimer = () => {
+    if (closeSubmenuTimeoutRef.current !== null) {
+      window.clearTimeout(closeSubmenuTimeoutRef.current);
+      closeSubmenuTimeoutRef.current = null;
+    }
+  };
+  const scheduleCloseSubmenu = useCallback(() => {
+    clearCloseSubmenuTimer();
+    closeSubmenuTimeoutRef.current = window.setTimeout(() => {
+      setIsSubmenuOpen(false);
+    }, 120);
+  }, []);
+  const closePreviouslyOpenSubmenus = () => {
+    var _itemRef$current;
+    const parent = (_itemRef$current = itemRef.current) == null || (_itemRef$current = _itemRef$current.parentElement) == null ? void 0 : _itemRef$current.parentElement;
+    if (!parent) {
+      return;
+    }
+    const openSubmenus = parent.querySelectorAll('[data-submenu-status="open"]');
+    if (openSubmenus.length > 0) {
+      const firstOpenSubmenu = openSubmenus[0];
+      firstOpenSubmenu.dispatchEvent(new CustomEvent('closeSubmenu', {
+        bubbles: false
+      }));
+    }
+  };
+  const setSubmenuOpen = () => {
+    closePreviouslyOpenSubmenus();
+    if (!hasSubmenu || disabled) {
+      return;
+    }
+    clearCloseSubmenuTimer();
+    setIsSubmenuOpen(true);
+  };
+  const updateSubmenuPosition = useCallback(() => {
+    var _itemRef$current$pare;
+    if (!isSubmenuOpen || !itemRef.current || !submenuRef.current) {
+      return;
+    }
+    const VIEWPORT_PADDING = 8;
+    const SUBMENU_GAP = 16;
+    const itemRect = itemRef.current.getBoundingClientRect();
+    const submenuRect = submenuRef.current.getBoundingClientRect();
+    const inheritedDirection = (_itemRef$current$pare = itemRef.current.parentElement) == null || (_itemRef$current$pare = _itemRef$current$pare.closest('[data-submenu-direction]')) == null ? void 0 : _itemRef$current$pare.getAttribute('data-submenu-direction');
+    const preferredDirection = inheritedDirection === 'left' ? 'left' : 'right';
+    const canOpenOnRight = itemRect.right + SUBMENU_GAP + submenuRect.width <= window.innerWidth - VIEWPORT_PADDING;
+    const canOpenOnLeft = itemRect.left - SUBMENU_GAP - submenuRect.width >= VIEWPORT_PADDING;
+    const shouldOpenOnRight = preferredDirection === 'right' ? canOpenOnRight : !canOpenOnLeft;
+    setSubmenuDirection(shouldOpenOnRight ? 'right' : 'left');
+    const left = shouldOpenOnRight ? itemRect.right + SUBMENU_GAP : Math.max(VIEWPORT_PADDING, itemRect.left - submenuRect.width - SUBMENU_GAP);
+    const maxTop = Math.max(VIEWPORT_PADDING, window.innerHeight - submenuRect.height - VIEWPORT_PADDING);
+    const top = Math.min(Math.max(VIEWPORT_PADDING, itemRect.top - VIEWPORT_PADDING), maxTop);
+    setSubmenuPosition({
+      top,
+      left
+    });
+  }, [isSubmenuOpen]);
+  useLayoutEffect(() => {
+    if (!isSubmenuOpen) {
+      return;
+    }
+    updateSubmenuPosition();
+    window.addEventListener('resize', updateSubmenuPosition);
+    window.addEventListener('scroll', updateSubmenuPosition, true);
+    return () => {
+      window.removeEventListener('resize', updateSubmenuPosition);
+      window.removeEventListener('scroll', updateSubmenuPosition, true);
+    };
+  }, [isSubmenuOpen, updateSubmenuPosition]);
+  useEffect(() => {
+    return () => {
+      clearCloseSubmenuTimer();
+    };
+  }, []);
+  return {
+    submenuPosition,
+    submenuDirection,
+    closeSubmenu: scheduleCloseSubmenu,
+    openSubmenu: setSubmenuOpen,
+    itemRef,
+    submenuRef,
+    isOpen: isSubmenuOpen
+  };
+};
 
 const DropdownListItem = ({
   onClick,
@@ -7616,42 +7789,80 @@ const DropdownListItem = ({
   children,
   href,
   target: _target = LINK_TARGET.SELF,
-  reloadDocument: _reloadDocument = false
+  reloadDocument: _reloadDocument = false,
+  submenu,
+  // @ts-expect-error - This is an internal prop used to determine if the DropdownListItem is being used within a DropdownListItemSelectable, it is not meant to be set by users of the component
+  isSelectable: _isSelectable = false
 }) => {
   const {
     onToggleDropdown
   } = useDropdownContext();
+  const {
+    closeSubmenu,
+    openSubmenu,
+    submenuPosition,
+    submenuDirection,
+    itemRef,
+    submenuRef,
+    isOpen
+  } = useSubmenu({
+    hasSubmenu: !!submenu,
+    disabled
+  });
+  useEffect(() => {
+    const itemElement = itemRef.current;
+    if (!itemElement) {
+      return;
+    }
+    const handleCloseSubmenu = () => {
+      closeSubmenu();
+    };
+    itemElement.addEventListener('closeSubmenu', handleCloseSubmenu);
+    return () => {
+      itemElement.removeEventListener('closeSubmenu', handleCloseSubmenu);
+    };
+  }, [itemRef, closeSubmenu]);
   const handleClick = e => {
     e.stopPropagation();
     if (disabled) {
       return;
     }
-    onToggleDropdown();
+    if (!!submenu) {
+      openSubmenu();
+      return;
+    }
+    if (!_isSelectable) {
+      onToggleDropdown();
+    }
     onClick && onClick(e);
   };
   const childrenContainer = React__default.createElement("div", {
-    className: styles$17['dropdown-list-item__container']
+    className: styles$1a['dropdown-list-item__container']
   }, prefix && React__default.createElement("div", {
-    className: styles$17['dropdown-list-item__prefix']
+    className: styles$1a['dropdown-list-item__prefix']
   }, prefix), React__default.createElement("div", {
-    className: styles$17['dropdown-list-item__content']
+    className: styles$1a['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
-    space: 4,
+    space: 0,
     flex: [1]
   }, children, caption && React__default.createElement("div", {
-    className: styles$17['dropdown-list-item__caption']
-  }, caption))), suffix && React__default.createElement("div", {
-    className: styles$17['dropdown-list-item__suffix']
-  }, suffix));
+    className: styles$1a['dropdown-list-item__caption']
+  }, caption))), (suffix || submenu) && React__default.createElement("div", {
+    className: styles$1a['dropdown-list-item__suffix']
+  }, suffix, submenu && !suffix && React__default.createElement("div", {
+    className: styles$1a['dropdown-list-item__suffix-spot']
+  }), submenu && React__default.createElement(IconChevronRight, {
+    size: "small"
+  })));
   const linkItem = href && (_reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$17['dropdown-list-item__link'],
+    className: styles$1a['dropdown-list-item__link'],
     target: _target,
     tabIndex: -1
   }, childrenContainer) : React__default.createElement(Link$1, {
     to: href,
     target: _target,
-    className: styles$17['dropdown-list-item__link'],
+    className: styles$1a['dropdown-list-item__link'],
     reloadDocument: false,
     tabIndex: -1,
     "data-testid": testId
@@ -7659,18 +7870,56 @@ const DropdownListItem = ({
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
-      className: classnames(styles$17['dropdown-list-item'], {
-        [styles$17['dropdown-list-item--selected']]: selected,
-        [styles$17['dropdown-list-item--disabled']]: disabled
+      className: classnames(styles$1a['dropdown-list-item'], {
+        [styles$1a['dropdown-list-item--selected']]: selected,
+        [styles$1a['dropdown-list-item--disabled']]: disabled
       }),
       onMouseDown: e => e.preventDefault(),
       onClick: handleClick,
       onKeyPress: handleClick,
-      "data-testid": testId
-    }, href ? linkItem : childrenContainer)
+      onMouseEnter: openSubmenu,
+      "data-testid": testId,
+      ref: itemRef,
+      "data-submenu-status": submenu && isOpen && !disabled ? 'open' : 'closed',
+      "data-selectable": _isSelectable ? 'true' : 'false'
+    }, href ? linkItem : childrenContainer, submenu && isOpen && !disabled && React__default.createElement(DropdownSubmenu, {
+      position: submenuPosition,
+      direction: submenuDirection,
+      openSubmenu: openSubmenu,
+      ref: submenuRef
+    }, submenu))
   );
 };
 
+const DropdownListItemSelectable = ({
+  onClick,
+  caption,
+  selected,
+  disabled,
+  testId,
+  children
+}) => {
+  return React__default.createElement(DropdownListItem, {
+    onClick: onClick,
+    caption: caption,
+    selected: selected,
+    disabled: disabled,
+    testId: testId,
+    prefix: selected ? React__default.createElement(IconCheckCircle, {
+      size: "medium",
+      color: COLORS['primary-color']
+    }) : React__default.createElement("div", {
+      style: {
+        visibility: 'hidden'
+      }
+    }, React__default.createElement(IconMinus, {
+      size: "medium"
+    })),
+    // @ts-expect-error - This is an internal prop used to determine if the DropdownListItem is being used within a DropdownListItemSelectable, it is not meant to be set by users of the component
+    isSelectable: true
+  }, children);
+};
+
 const canInteractWithItem = child => {
   const itemType = getItemType(child);
   if (itemType === 'DropdownListDivider') {
@@ -7687,13 +7936,20 @@ const getItemType = child => {
     component: DropdownListItem,
     displayName: 'DropdownListItem'
   });
+  const isDropdownListItemSelectable = checkIsComponent(child, {
+    component: DropdownListItemSelectable,
+    displayName: 'DropdownListItemSelectable'
+  });
   if (isDropdownListDivider) {
     return 'DropdownListDivider';
   }
   if (isDropdownListItem) {
     return 'DropdownListItem';
   }
-  throw new Error('DropdownList - dropdown items should be using DropdownListDivider or DropdownListItem components');
+  if (isDropdownListItemSelectable) {
+    return 'DropdownListItemSelectable';
+  }
+  throw new Error('DropdownList - dropdown items should be using DropdownListDivider, DropdownListItem or DropdownListItemSelectable components');
 };
 
 const DropdownList = ({
@@ -7711,7 +7967,8 @@ const DropdownList = ({
     return {
       disabled: !canInteractWithItem(child),
       onClick: child.props.onClick,
-      href: child.props.href
+      href: child.props.href,
+      submenu: child.props.submenu
     };
   });
   const listRef = useRef(null);
@@ -7720,7 +7977,13 @@ const DropdownList = ({
       // get the nth list item in the dropdown
       const element = listRef.current.querySelector(`:nth-child(${newFocusItem + 1})`);
       const parentList = listRef.current.parentNode;
-      parentList.scrollTo(0, element.offsetTop);
+      if (!element) return;
+      // JSDOM does not implement element.scrollTo; fall back to scrollTop.
+      if (typeof parentList.scrollTo === 'function') {
+        parentList.scrollTo(0, element.offsetTop);
+      } else {
+        parentList.scrollTop = element.offsetTop;
+      }
     }
   };
   const {
@@ -7737,16 +8000,16 @@ const DropdownList = ({
         scrollToItem(highlightItemIndex);
       }
     }
-  }, [highlightItemIndex]);
+  }, [highlightItemIndex, setFocusOnItem]);
   return React__default.createElement("ul", {
-    className: styles$19['dropdown-list'],
+    className: styles$1c['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.toArray(children).filter(Boolean).map((child, index) => {
     return React__default.createElement("li", {
       key: index,
-      className: classnames(styles$19['dropdown-list__item'], {
-        [styles$19['dropdown-list__item--hover']]: focusedItem === index
+      className: classnames(styles$1c['dropdown-list__item'], {
+        [styles$1c['dropdown-list__item--hover']]: focusedItem === index
       }),
       onMouseEnter: () => setFocusOnItem(index),
       role: "menuitem"
@@ -7770,7 +8033,7 @@ const KebabMenu = ({
   }, action.label))));
 };
 
-var styles$16 = {"card":"_TXXpM","card__body":"_C3waP","card__body--interactive":"_uc-GV","card--focus":"_ft0I1","card__body--focus":"_wx2MU","card__body--disabled":"_TQDZH","card__body--with-kebab":"_kkYit","card__kebab":"_xrEdS","card__kebab--disabled":"_0WiOn","card__close":"_yODES","card__close--disabled":"_Vqf6o"};
+var styles$18 = {"card":"_TXXpM","card__body":"_C3waP","card__body--interactive":"_uc-GV","card--focus":"_ft0I1","card__body--focus":"_wx2MU","card__body--disabled":"_TQDZH","card__body--with-kebab":"_kkYit","card__kebab":"_xrEdS","card__kebab--disabled":"_0WiOn","card__close":"_yODES","card__close--disabled":"_Vqf6o"};
 
 const CardContext = createContext({
   isCardMounted: false
@@ -7806,28 +8069,28 @@ const Card = _ref => {
       isCardMounted: true
     }
   }, React__default.createElement("div", _extends({
-    className: classnames(styles$16['card']),
+    className: classnames(styles$18['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default.createElement("button", {
-    className: classnames(styles$16['card__body'], styles$16['card__body--interactive'], {
-      [styles$16['card__body--disabled']]: disabled,
-      [styles$16['card__body--focus']]: isSelected,
-      [styles$16['card__body--with-kebab']]: actions
+    className: classnames(styles$18['card__body'], styles$18['card__body--interactive'], {
+      [styles$18['card__body--disabled']]: disabled,
+      [styles$18['card__body--focus']]: isSelected,
+      [styles$18['card__body--with-kebab']]: actions
     }),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick,
     disabled: disabled
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$16['card__body'], {
-      [styles$16['card__body--disabled']]: disabled,
-      [styles$16['card__body--focus']]: isSelected,
-      [styles$16['card__body--with-kebab']]: actions
+    className: classnames(styles$18['card__body'], {
+      [styles$18['card__body--disabled']]: disabled,
+      [styles$18['card__body--focus']]: isSelected,
+      [styles$18['card__body--with-kebab']]: actions
     }),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$16['card__kebab'], {
-      [styles$16['card__kebab--disabled']]: disabled
+    className: classnames(styles$18['card__kebab'], {
+      [styles$18['card__kebab--disabled']]: disabled
     })
   }, React__default.createElement(KebabMenu, {
     actions: onClose ? actions.concat({
@@ -7836,8 +8099,8 @@ const Card = _ref => {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default.createElement("div", {
-    className: classnames(styles$16['card__close'], {
-      [styles$16['card__close--disabled']]: disabled
+    className: classnames(styles$18['card__close'], {
+      [styles$18['card__close--disabled']]: disabled
     })
   }, React__default.createElement(Button, {
     theme: "link-icon",
@@ -7845,7 +8108,7 @@ const Card = _ref => {
   }, React__default.createElement(IconTimes, null)))));
 };
 
-var styles$15 = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
+var styles$17 = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
 
 /**
  * @deprecated Use `<EmptyState as='card' />` instead
@@ -7866,7 +8129,7 @@ const CalloutCard = ({
   }, React__default.createElement(Stack, {
     space: 12
   }, React__default.createElement("div", {
-    className: styles$15['callout-card__header']
+    className: styles$17['callout-card__header']
   }, React__default.createElement(Text, {
     as: "body",
     color: "primary-color"
@@ -7881,7 +8144,7 @@ const CalloutCard = ({
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default.createElement("div", {
-    className: styles$15['callout-card__close']
+    className: styles$17['callout-card__close']
   }, React__default.createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -7897,7 +8160,7 @@ const Breadcrumbs = ({
   }, children);
 };
 
-var styles$14 = {"breadcrumb-item":"_fo7-A"};
+var styles$16 = {"breadcrumb-item":"_fo7-A"};
 
 const BreadcrumbItem = ({
   href,
@@ -7911,25 +8174,25 @@ const BreadcrumbItem = ({
   // This is neessary to support older versions of react-router-dom
   return _reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$14['breadcrumb-item'],
+    className: styles$16['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$14['breadcrumb-item'],
+    className: styles$16['breadcrumb-item'],
     relative: "path",
     reloadDocument: _reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$13 = {"page-breadcrumbs":"_QjIgc"};
+var styles$15 = {"page-breadcrumbs":"_QjIgc"};
 
 const PageBreadcrumbs = ({
   breadcrumbs
 }) => {
   const items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$13['page-breadcrumbs']
+    className: styles$15['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 const getBreadbrumbItems = breadcrumbs => {
@@ -7949,7 +8212,7 @@ const getBreadbrumbItems = breadcrumbs => {
   }, breadcrumbs.label);
 };
 
-var styles$12 = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
+var styles$14 = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
 
 const PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -7970,9 +8233,9 @@ const Page = ({
   const hasHeader = title || actions;
   const hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$12['page'], {
-      [styles$12['page--restricted']]: _size === PAGE_SIZES.RESTRICTED,
-      [styles$12['page--fullwidth']]: _size === PAGE_SIZES.FULL_WIDTH
+    className: classnames(styles$14['page'], {
+      [styles$14['page--restricted']]: _size === PAGE_SIZES.RESTRICTED,
+      [styles$14['page--fullwidth']]: _size === PAGE_SIZES.FULL_WIDTH
     }),
     "data-testid": testId
   }, React__default.createElement(Stack, {
@@ -7993,15 +8256,15 @@ const Page = ({
   }, title), actions), subtitle && React__default.createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$11 = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70","page-layout__side-nav-content":"_vTMjp"};
+var styles$13 = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70","page-layout__side-nav-content":"_vTMjp"};
 
-var styles$10 = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
+var styles$12 = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
 
-var styles$$ = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
+var styles$11 = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
-var styles$_ = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
+var styles$10 = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
 
-var styles$Z = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
+var styles$$ = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
 
 const ModalHeader = ({
   header,
@@ -8011,7 +8274,7 @@ const ModalHeader = ({
 }) => {
   if (!header && !subHeader) {
     return onClose ? React__default.createElement("div", {
-      className: styles$Z['header__close-button']
+      className: styles$$['header__close-button']
     }, React__default.createElement(Button, {
       theme: "link-icon",
       onClick: onClose,
@@ -8027,13 +8290,13 @@ const ModalHeader = ({
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$Z['header']
+    className: styles$$['header']
   }, header), onClose && React__default.createElement(Button, {
     theme: "link-icon",
     onClick: onClose,
     disabled: loading
   }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$Z['sub-header']
+    className: styles$$['sub-header']
   }, subHeader));
 };
 
@@ -8091,14 +8354,14 @@ const Modal = _ref => {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$_['overlay'],
-      afterOpen: styles$_['overlay--after-open'],
-      beforeClose: styles$_['overlay--before-close']
+      base: styles$10['overlay'],
+      afterOpen: styles$10['overlay--after-open'],
+      beforeClose: styles$10['overlay--before-close']
     },
     className: {
-      base: styles$_['content'],
-      afterOpen: styles$_['content--after-open'],
-      beforeClose: styles$_['content--before-close']
+      base: styles$10['content'],
+      afterOpen: styles$10['content--after-open'],
+      beforeClose: styles$10['content--before-close']
     },
     data: dataProps
   }, React__default.createElement(ModalHeader, {
@@ -8140,7 +8403,7 @@ const useScrollShadow = () => {
   };
 };
 
-var styles$Y = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
+var styles$_ = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
 
 const ModalBody = ({
   children,
@@ -8151,17 +8414,17 @@ const ModalBody = ({
     showScrollShadow
   } = useScrollShadow();
   return React__default.createElement("div", {
-    className: classnames(styles$Y['modal-body'], {
-      [styles$Y['modal-body--with-scroll-shadow']]: showScrollShadow
+    className: classnames(styles$_['modal-body'], {
+      [styles$_['modal-body--with-scroll-shadow']]: showScrollShadow
     }),
     ref: ref,
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: styles$Y['modal-body__inner-div']
+    className: styles$_['modal-body__inner-div']
   }, children));
 };
 
-var styles$X = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
+var styles$Z = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
 
 const updateButtonProps$1 = (button, newProps) => {
   if (!button) {
@@ -8198,7 +8461,7 @@ const ModalFooter = ({
       justifyContent: "space-between"
     }, React__default.createElement("div", {
       className: classnames({
-        [styles$X['tertiary-container']]: tertiaryButton && tertiaryButton.props.theme.startsWith('link')
+        [styles$Z['tertiary-container']]: tertiaryButton && tertiaryButton.props.theme.startsWith('link')
       })
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
@@ -8216,7 +8479,7 @@ const FooterContainer = ({
     displayName: 'Inline'
   });
   return React__default.createElement("div", {
-    className: styles$X['modal-footer'],
+    className: styles$Z['modal-footer'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: "end",
@@ -8229,7 +8492,7 @@ var dayOverridesStyles = {"root":"_et9Fs","table":"_l7Mis","caption":"_XGu8K","h
 
 var weekOverridesStyles = {"root":"_QLSA6","table":"_96jgF","caption":"_4ySMr","head_cell":"_2AoB4","day_today":"_Snv-V","day_outside":"_Zf-6C","nav_button":"_iOY4h","day_range_middle":"_e0lOH","day_range_start":"_4N7l-","day_range_end":"_fMjHG","row":"_GqE-5"};
 
-var styles$W = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
+var styles$Y = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
 
 function parseDate(str, format, locale) {
   const parsed = dateFnsParse(str, format, new Date(), {
@@ -8465,9 +8728,9 @@ const Calendar = ({
     }
   };
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default.createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: ref => setCalendarRef(ref),
     style: _extends({}, calendarPosition, {
       zIndex: isInsideDropdown ? getZIndex('dropdown-level-2') : getZIndex('dropdown')
@@ -8525,7 +8788,7 @@ const useCheckBoxFieldControllers = ({
   return controllers;
 };
 
-var styles$V = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
+var styles$X = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
 
 const _excluded$m = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
 /** CheckboxField form element. */
@@ -8560,7 +8823,7 @@ const CheckboxField = _ref => {
     flexItems: true,
     flex: ['0 0 auto']
   }, otherProps), React__default.createElement("div", {
-    className: styles$V['check-box-field']
+    className: styles$X['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -8573,12 +8836,12 @@ const CheckboxField = _ref => {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$V['check-box-field__custom-input']
+    className: styles$X['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$V['check-box-field__caption']
+    className: styles$X['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -8616,7 +8879,7 @@ const useLocalStorage = (key, initialValue) => {
   return [storedValue, setValue];
 };
 
-var styles$U = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
+var styles$W = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
 const _excluded$l = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus"];
 const HintModal = _ref => {
@@ -8679,22 +8942,22 @@ const HintModal = _ref => {
     closeTimeoutMS: 200,
     contentLabel: "Modal",
     className: {
-      base: styles$U['hint-modal'],
-      afterOpen: styles$U['hint-modal--after-open'],
-      beforeClose: styles$U['hint-modal--before-close']
+      base: styles$W['hint-modal'],
+      afterOpen: styles$W['hint-modal--after-open'],
+      beforeClose: styles$W['hint-modal--before-close']
     },
-    overlayClassName: styles$U['hint-modal__overlay']
+    overlayClassName: styles$W['hint-modal__overlay']
   }, React__default.createElement("div", {
-    className: styles$U['hint-modal__close-button']
+    className: styles$W['hint-modal__close-button']
   }, React__default.createElement(Button, {
     theme: "link-icon",
     onClick: handleOnClose
   }, React__default.createElement(IconTimes, null))), mediaUrl && React__default.createElement("img", {
-    className: styles$U['hint-modal__image'],
+    className: styles$W['hint-modal__image'],
     src: mediaUrl,
     alt: String(header)
   }), React__default.createElement("div", {
-    className: styles$U['hint-modal__body']
+    className: styles$W['hint-modal__body']
   }, React__default.createElement(Stack, {
     justifyContent: "space-between"
   }, React__default.createElement(Stack, {
@@ -8735,12 +8998,12 @@ const BadgeElement = (_ref, forwardedRef) => {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", _extends({
-    className: classnames(styles$$['badge'], {
-      [styles$$['badge--success']]: theme === 'success',
-      [styles$$['badge--danger']]: theme === 'danger',
-      [styles$$['badge--info']]: theme === 'info',
-      [styles$$['badge--warning']]: theme === 'warning',
-      [styles$$['badge--numeric']]: Number.isFinite(children)
+    className: classnames(styles$11['badge'], {
+      [styles$11['badge--success']]: theme === 'success',
+      [styles$11['badge--danger']]: theme === 'danger',
+      [styles$11['badge--info']]: theme === 'info',
+      [styles$11['badge--warning']]: theme === 'warning',
+      [styles$11['badge--numeric']]: Number.isFinite(children)
     }),
     ref: ref,
     "data-testid": testId
@@ -8752,28 +9015,28 @@ const MenuItem = ({
   menu
 }) => {
   return React__default.createElement("li", {
-    className: classnames(styles$10['menu-item'], {
-      [styles$10['menu-item--with-badge']]: !!menu.suffix
+    className: classnames(styles$12['menu-item'], {
+      [styles$12['menu-item--with-badge']]: !!menu.suffix
     })
   }, menu.reloadDocument ? React__default.createElement("a", {
     href: menu.to,
     className: classnames({
-      [styles$10['menu-item--active']]: menu.isActive
+      [styles$12['menu-item--active']]: menu.isActive
     })
   }, menu.label, !!menu.suffix && React__default.createElement("div", {
-    className: styles$10['menu-item__badge']
+    className: styles$12['menu-item__badge']
   }, React__default.createElement(Badge, null, menu.suffix))) : React__default.createElement(NavLink, {
     to: menu.to,
     // @ts-expect-error This is only available on v5
-    activeClassName: styles$10['menu-item--active'],
+    activeClassName: styles$12['menu-item--active'],
     className: ({
       isActive
     }) => {
-      return isActive ? styles$10['menu-item--active'] : '';
+      return isActive ? styles$12['menu-item--active'] : '';
     },
     exact: true
   }, menu.label, !!menu.suffix && React__default.createElement("div", {
-    className: styles$10['menu-item__badge']
+    className: styles$12['menu-item__badge']
   }, React__default.createElement(Badge, null, menu.suffix))));
 };
 
@@ -8784,9 +9047,9 @@ const PageLayout = ({
   sideNavContent
 }) => {
   return React__default.createElement("div", {
-    className: styles$11['page-layout']
+    className: styles$13['page-layout']
   }, React__default.createElement("div", {
-    className: styles$11['page-layout__nav-container']
+    className: styles$13['page-layout__nav-container']
   }, React__default.createElement(Stack, {
     space: 12
   }, React__default.createElement(Text, {
@@ -8795,14 +9058,14 @@ const PageLayout = ({
     ml: 20,
     mr: 35
   }, title), React__default.createElement("ul", {
-    className: styles$11['page-layout__nav-list']
+    className: styles$13['page-layout__nav-list']
   }, menu.filter(menu => !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true).map((menuItem, index) => React__default.createElement(MenuItem, {
     key: menuItem.name || index,
     menu: menuItem
   }))), sideNavContent && React__default.createElement("div", {
-    className: styles$11['page-layout__side-nav-content']
+    className: styles$13['page-layout__side-nav-content']
   }, sideNavContent))), React__default.createElement("div", {
-    className: styles$11['page-layout__content']
+    className: styles$13['page-layout__content']
   }, children));
 };
 
@@ -8812,7 +9075,7 @@ const TOAST_THEME = {
 };
 const TOAST_CONTAINER_ID = 'sous-chef-toast';
 
-var styles$T = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
+var styles$V = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
 
 const toast = (text, theme = TOAST_THEME.DEFAULT, options = {}) => {
   if (typeof text !== 'string') {
@@ -8829,8 +9092,8 @@ const toast = (text, theme = TOAST_THEME.DEFAULT, options = {}) => {
     onActionClick: onActionClick
   }) : text;
   toast$1(content, _extends({
-    className: classnames(styles$T['toast'], {
-      [styles$T['toast--danger']]: theme === TOAST_THEME.DANGER
+    className: classnames(styles$V['toast'], {
+      [styles$V['toast--danger']]: theme === TOAST_THEME.DANGER
     }),
     containerId: TOAST_CONTAINER_ID
   }, options));
@@ -8856,7 +9119,7 @@ const ToastBodyWithAction = ({
 const ToastContainer = ({
   containerId: _containerId = TOAST_CONTAINER_ID
 }) => React__default.createElement(ToastContainer$1, {
-  bodyClassName: styles$T['toast__text'],
+  bodyClassName: styles$V['toast__text'],
   hideProgressBar: true,
   draggable: false,
   transition: Slide,
@@ -8870,7 +9133,9 @@ const initialValue$1 = {
   // This country prop is currently used to configure the phone number field
   country: 'US',
   // This timeFormat prop is currently used to configure the time format for time fields
-  timeFormat: TIME_FORMAT.FORMAT_AMPM
+  timeFormat: TIME_FORMAT.FORMAT_AMPM,
+  // Default theme is light, but it will be overridden by the useTheme hook in the SousChefProvider
+  theme: 'light'
 };
 const ProviderConfigContext = createContext(initialValue$1);
 const useProviderConfig = () => {
@@ -8881,16 +9146,46 @@ const useProviderConfig = () => {
   return context;
 };
 
+/**
+ * Don't use this hook directly. This is meant to be used internally by the SousChefProvider
+ * To access the current theme, use the useProviderConfig hook instead
+ */
+const useTheme = () => {
+  const [theme, setTheme] = useState(() => {
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    return isDark ? 'dark' : 'light';
+  });
+  useEffect(() => {
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.attributeName === 'class') {
+          const isDark = document.documentElement.classList.contains('theme-dark');
+          setTheme(isDark ? 'dark' : 'light');
+        }
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return theme;
+};
+
 const SousChefProvider = ({
   children,
   i18n: _i18n = en,
   country: _country = 'US',
   timeFormat: _timeFormat = TIME_FORMAT.FORMAT_AMPM
 }) => {
+  const theme = useTheme();
   return React__default.createElement(ProviderConfigContext.Provider, {
     value: {
       country: isSupportedCountry(_country) ? _country : 'US',
-      timeFormat: _timeFormat
+      timeFormat: _timeFormat,
+      theme
     }
   }, React__default.createElement(TranslationsContext.Provider, {
     value: {
@@ -8899,7 +9194,7 @@ const SousChefProvider = ({
   }, React__default.createElement(ToastContainer, null), children));
 };
 
-var styles$S = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__item-content--has-description":"_vgjHE","data-table-header__sort-icon":"_-xiIl"};
+var styles$U = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__item-content--has-description":"_vgjHE","data-table-header__sort-icon":"_-xiIl"};
 
 const SORT_ORDER = {
   ASC: 'asc',
@@ -9072,7 +9367,7 @@ const DataTableHeader = ({
     },
     id: `${tableId}-header`
   }, React__default.createElement("tr", {
-    className: styles$S['data-table-header']
+    className: styles$U['data-table-header']
   }, columns.filter(column => !column.hidden).map(column => {
     const isSortable = column.isSortable;
     const sortDir = column.currentSort;
@@ -9080,8 +9375,8 @@ const DataTableHeader = ({
     const hasDescription = !!column.description;
     return React__default.createElement("th", {
       className: classnames({
-        [styles$S['data-table-header__item']]: true,
-        [styles$S['data-table-header__item--sortable']]: isSortable
+        [styles$U['data-table-header__item']]: true,
+        [styles$U['data-table-header__item--sortable']]: isSortable
       }),
       style: {
         flex: column.size || 1,
@@ -9093,18 +9388,18 @@ const DataTableHeader = ({
       role: "columnheader",
       tabIndex: 0
     }, React__default.createElement("div", {
-      className: classnames(styles$S['data-table-header__item-content'], {
-        [styles$S['data-table-header__item-content--right-align']]: isRightAligned
+      className: classnames(styles$U['data-table-header__item-content'], {
+        [styles$U['data-table-header__item-content--right-align']]: isRightAligned
       }, {
-        [styles$S['data-table-header__item-content--has-description']]: hasDescription
+        [styles$U['data-table-header__item-content--has-description']]: hasDescription
       })
     }, wrapWithTooltip(column), isSortable && React__default.createElement("span", {
-      className: styles$S['data-table-header__sort-icon']
+      className: styles$U['data-table-header__sort-icon']
     }, React__default.createElement(HeaderSortIcon, {
       sortDirection: sortDir
     }))));
   }), showActionMenu && React__default.createElement("th", {
-    className: classnames(styles$S['data-table-header__item'], styles$S['data-table-header__item--action'])
+    className: classnames(styles$U['data-table-header__item'], styles$U['data-table-header__item--action'])
   }))));
 };
 const wrapWithTooltip = column => {
@@ -9118,9 +9413,9 @@ const wrapWithTooltip = column => {
   return column.label;
 };
 
-var styles$R = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
+var styles$T = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
 
-var styles$Q = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
+var styles$S = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
 
 const useTableHeaderHeight = isShowingColumns => {
   const {
@@ -9172,10 +9467,10 @@ const DataTableScrollFakeBorder = ({
   const hasFixedScroll = useDetectFixedScroll();
   const backgroundColor = useBackgroundColor();
   return React__default.createElement("div", {
-    className: classnames(styles$Q['data-table-scroll-fake-border'], {
-      [styles$Q['data-table-scroll-fake-border--top']]: placement === 'top',
-      [styles$Q['data-table-scroll-fake-border--bottom']]: placement === 'bottom',
-      [styles$Q['data-table-scroll-fake-border--fixed-scroll']]: hasFixedScroll
+    className: classnames(styles$S['data-table-scroll-fake-border'], {
+      [styles$S['data-table-scroll-fake-border--top']]: placement === 'top',
+      [styles$S['data-table-scroll-fake-border--bottom']]: placement === 'bottom',
+      [styles$S['data-table-scroll-fake-border--fixed-scroll']]: hasFixedScroll
     }),
     style: {
       // @ts-expect-error This difines a custom CSS variable
@@ -9183,14 +9478,14 @@ const DataTableScrollFakeBorder = ({
       top: placement === 'top' ? headerHeight : undefined
     }
   }, React__default.createElement("div", {
-    className: classnames(styles$Q['data-table-scroll-fake-border__left'], {
-      [styles$Q['data-table-scroll-fake-border__left--top']]: placement === 'top',
-      [styles$Q['data-table-scroll-fake-border__left--bottom']]: placement === 'bottom'
+    className: classnames(styles$S['data-table-scroll-fake-border__left'], {
+      [styles$S['data-table-scroll-fake-border__left--top']]: placement === 'top',
+      [styles$S['data-table-scroll-fake-border__left--bottom']]: placement === 'bottom'
     })
   }), React__default.createElement("div", {
-    className: classnames(styles$Q['data-table-scroll-fake-border__right'], {
-      [styles$Q['data-table-scroll-fake-border__right--top']]: placement === 'top',
-      [styles$Q['data-table-scroll-fake-border__right--bottom']]: placement === 'bottom'
+    className: classnames(styles$S['data-table-scroll-fake-border__right'], {
+      [styles$S['data-table-scroll-fake-border__right--top']]: placement === 'top',
+      [styles$S['data-table-scroll-fake-border__right--bottom']]: placement === 'bottom'
     }),
     "data-background-color": "red"
   }));
@@ -9208,7 +9503,7 @@ const BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$P = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner__icon--multiline":"_uJl2Y","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
+var styles$R = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner__icon--multiline":"_uJl2Y","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
 
 /** Infers theme prop for Sous Chef Button CTAs if not explicitly passed, default is hollow, primaryCTA is Upsell if banner theme is Upsell*/
 const ButtonCTA$1 = ({
@@ -9229,7 +9524,7 @@ const ButtonCTA$1 = ({
   }, button.props));
 };
 
-var styles$O = {"banner__caption":"_S--Ce"};
+var styles$Q = {"banner__caption":"_S--Ce"};
 
 const InlineBannerCTA = ({
   primaryButton,
@@ -9261,7 +9556,7 @@ const InlineBannerCTA = ({
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$O['banner__caption']
+    className: styles$Q['banner__caption']
   }, caption));
 };
 
@@ -9302,21 +9597,21 @@ const InlineBanner = _ref => {
   const Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$P['banner'], {
-      [styles$P['banner--info']]: theme === BANNER_THEME.INFO,
-      [styles$P['banner--warning']]: theme === BANNER_THEME.WARNING,
-      [styles$P['banner--success']]: theme === BANNER_THEME.SUCCESS,
-      [styles$P['banner--danger']]: theme === BANNER_THEME.DANGER,
-      [styles$P['banner--upsell']]: theme === BANNER_THEME.UPSELL,
-      [styles$P['banner--single-line']]: !multiLine
+    className: classnames(styles$R['banner'], {
+      [styles$R['banner--info']]: theme === BANNER_THEME.INFO,
+      [styles$R['banner--warning']]: theme === BANNER_THEME.WARNING,
+      [styles$R['banner--success']]: theme === BANNER_THEME.SUCCESS,
+      [styles$R['banner--danger']]: theme === BANNER_THEME.DANGER,
+      [styles$R['banner--upsell']]: theme === BANNER_THEME.UPSELL,
+      [styles$R['banner--single-line']]: !multiLine
     }),
     style: positionStyles
   }, React__default.createElement(Inline, {
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: classnames(styles$P['banner__icon'], {
-      [styles$P['banner__icon--multiline']]: multiLine
+    className: classnames(styles$R['banner__icon'], {
+      [styles$R['banner__icon--multiline']]: multiLine
     })
   }, icon != null ? icon : React__default.createElement(InlineBannerIcon, {
     theme: theme
@@ -9327,10 +9622,10 @@ const InlineBanner = _ref => {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$P['banner__title']
+    className: styles$R['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$P['banner__body'], {
-      [styles$P['banner__body--multilineCTA']]: primaryButton && multiLine
+    className: classnames(styles$R['banner__body'], {
+      [styles$R['banner__body--multilineCTA']]: primaryButton && multiLine
     })
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
@@ -9339,7 +9634,7 @@ const InlineBanner = _ref => {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$P['banner__close']
+    className: styles$R['banner__close']
   }, React__default.createElement(Button, {
     theme: "link-icon",
     type: "button",
@@ -9355,7 +9650,7 @@ const MICRO_BANNER_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$N = {"micro-banner":"_fRjhT","micro-banner__icon":"_UZMd0","micro-banner__content":"_mJAeX","micro-banner__content--no-icon":"_ZFsBE","micro-banner__content--no-button":"_UN43A","micro-banner__button":"_bTamw","micro-banner--info":"_ULD-f","micro-banner--success":"_5MitA","micro-banner--danger":"_8wmuB","micro-banner--warning":"_515OI","micro-banner--upsell":"_EfwcL"};
+var styles$P = {"micro-banner":"_fRjhT","micro-banner__icon":"_UZMd0","micro-banner__content":"_mJAeX","micro-banner__content--no-icon":"_ZFsBE","micro-banner__content--no-button":"_UN43A","micro-banner__button":"_bTamw","micro-banner--info":"_ULD-f","micro-banner--success":"_5MitA","micro-banner--danger":"_8wmuB","micro-banner--warning":"_515OI","micro-banner--upsell":"_EfwcL"};
 
 const MicroBannerIcon = ({
   theme
@@ -9405,14 +9700,14 @@ const MicroBanner = _ref => {
     } = _ref,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   const positionStyles = usePositionStyles(positionProps);
-  const themeClass = styles$N[`micro-banner--${theme}`];
-  const contentClass = classnames(styles$N['micro-banner__content'], hideIcon && styles$N['micro-banner__content--no-icon'], !primaryButton && styles$N['micro-banner__content--no-button']);
+  const themeClass = styles$P[`micro-banner--${theme}`];
+  const contentClass = classnames(styles$P['micro-banner__content'], hideIcon && styles$P['micro-banner__content--no-icon'], !primaryButton && styles$P['micro-banner__content--no-button']);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$N['micro-banner'], themeClass),
+    className: classnames(styles$P['micro-banner'], themeClass),
     style: positionStyles
   }, !hideIcon && React__default.createElement("div", {
-    className: styles$N['micro-banner__icon'],
+    className: styles$P['micro-banner__icon'],
     "data-testid": `${testId || 'micro-banner'}-icon`
   }, icon != null ? icon : React__default.createElement(MicroBannerIcon, {
     theme: theme
@@ -9423,7 +9718,7 @@ const MicroBanner = _ref => {
   }, title), React__default.createElement(Text, {
     as: 'caption'
   }, children)), primaryButton && React__default.createElement("div", {
-    className: styles$N['micro-banner__button']
+    className: styles$P['micro-banner__button']
   }, React__default.createElement(ButtonCTA, {
     button: primaryButton,
     bannerTheme: theme
@@ -9437,7 +9732,7 @@ const PERSISTENT_BANNER_THEME = {
   WARNING: 'warning'
 };
 
-var styles$M = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn"};
+var styles$O = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn"};
 
 const PersistentBanner = ({
   theme: _theme = PERSISTENT_BANNER_THEME.INFO,
@@ -9466,11 +9761,11 @@ const PersistentBanner = ({
     theme: _theme === PERSISTENT_BANNER_THEME.WARNING ? BUTTON_THEMES.LINK_PRIMARY : BUTTON_THEMES.LINK_CONTRAST
   }, secondaryButton.props))));
   return React__default.createElement("div", {
-    className: classnames(styles$M['persistent-banner'], {
-      [styles$M['persistent-banner--info']]: _theme === PERSISTENT_BANNER_THEME.INFO,
-      [styles$M['persistent-banner--danger']]: _theme === PERSISTENT_BANNER_THEME.DANGER,
-      [styles$M['persistent-banner--upsell']]: _theme === PERSISTENT_BANNER_THEME.UPSELL,
-      [styles$M['persistent-banner--warning']]: _theme === PERSISTENT_BANNER_THEME.WARNING
+    className: classnames(styles$O['persistent-banner'], {
+      [styles$O['persistent-banner--info']]: _theme === PERSISTENT_BANNER_THEME.INFO,
+      [styles$O['persistent-banner--danger']]: _theme === PERSISTENT_BANNER_THEME.DANGER,
+      [styles$O['persistent-banner--upsell']]: _theme === PERSISTENT_BANNER_THEME.UPSELL,
+      [styles$O['persistent-banner--warning']]: _theme === PERSISTENT_BANNER_THEME.WARNING
     }),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
@@ -9535,7 +9830,7 @@ const useProgress = (progress, maxValue, getMetric = getProgressMetric) => {
   };
 };
 
-var styles$L = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
+var styles$N = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
 
 const CircularProgress = ({
   progress,
@@ -9549,7 +9844,7 @@ const CircularProgress = ({
   } = useProgress(progress, _maxValue);
   const determinant = metric.percentage * 2.79;
   return React__default.createElement("div", _extends({}, elementProps, {
-    className: styles$L['circular-progress'],
+    className: styles$N['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9558,21 +9853,21 @@ const CircularProgress = ({
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$L['circular-progress__track']
+    className: styles$N['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$L['circular-progress__indicator'],
+    className: styles$N['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: `${determinant} ${279 - determinant}`
   })), React__default.createElement("div", {
-    className: styles$L['circular-progress__label']
+    className: styles$N['circular-progress__label']
   }, children || `${metric.progress}/${metric.maxValue}`));
 };
 
-var styles$K = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__steps":"_8kdeO"};
+var styles$M = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__steps":"_8kdeO"};
 
 const ProgressBar = ({
   progress,
@@ -9587,21 +9882,21 @@ const ProgressBar = ({
     metric
   } = useProgress(progress, inferedMaxValue || 100, isUsingStepsAsMaxValue ? getProgressMetricWithSteps : getProgressMetric);
   return React__default.createElement(Stack, null, React__default.createElement("div", _extends({}, elementProps, {
-    className: styles$K['progress-bar'],
+    className: styles$M['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$K['progress-bar__indicator'],
+    className: styles$M['progress-bar__indicator'],
     style: {
       width: `${metric.percentage}%`
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$K['progress-bar__steps']
+    className: styles$M['progress-bar__steps']
   }, steps.map(step => React__default.createElement(Text, {
     key: step
   }, step))));
 };
 
-var styles$J = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
+var styles$L = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
 
 const SKELETON_COMPONENT = {
   AVATAR: 'avatar',
@@ -9625,14 +9920,14 @@ const Skeleton = _ref => {
   const positioning = usePositionStyles(positionStyles);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$J['skeleton'], {
-      [styles$J['skeleton__avatar']]: as === SKELETON_COMPONENT.AVATAR,
-      [styles$J['skeleton__avatar--small']]: as === SKELETON_COMPONENT.AVATAR_SMALL,
-      [styles$J['skeleton__avatar--medium']]: as === SKELETON_COMPONENT.AVATAR_MEDIUM,
-      [styles$J['skeleton__avatar--large']]: as === SKELETON_COMPONENT.AVATAR_LARGE,
-      [styles$J['skeleton__avatar--xlarge']]: as === SKELETON_COMPONENT.AVATAR_XLARGE,
-      [styles$J['skeleton__button']]: as === SKELETON_COMPONENT.BUTTON,
-      [styles$J['skeleton__pill']]: as === SKELETON_COMPONENT.PILL
+    className: classnames(styles$L['skeleton'], {
+      [styles$L['skeleton__avatar']]: as === SKELETON_COMPONENT.AVATAR,
+      [styles$L['skeleton__avatar--small']]: as === SKELETON_COMPONENT.AVATAR_SMALL,
+      [styles$L['skeleton__avatar--medium']]: as === SKELETON_COMPONENT.AVATAR_MEDIUM,
+      [styles$L['skeleton__avatar--large']]: as === SKELETON_COMPONENT.AVATAR_LARGE,
+      [styles$L['skeleton__avatar--xlarge']]: as === SKELETON_COMPONENT.AVATAR_XLARGE,
+      [styles$L['skeleton__button']]: as === SKELETON_COMPONENT.BUTTON,
+      [styles$L['skeleton__pill']]: as === SKELETON_COMPONENT.PILL
     }),
     style: _extends({}, positioning, {
       width: width,
@@ -9641,11 +9936,11 @@ const Skeleton = _ref => {
   });
 };
 
-var styles$I = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
+var styles$K = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
 
-var styles$H = {"actions":"_ffXgN"};
+var styles$J = {"actions":"_ffXgN"};
 
-var styles$G = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
+var styles$I = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
 
 const DataTableCellElement = ({
   children,
@@ -9669,9 +9964,9 @@ const DataTableCellElement = ({
   const hasError = !!error;
   const errorMessage = error;
   const icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$G['data-table-cell__error-icon'], {
-      [styles$G['data-table-cell__error-icon--right-align']]: isRightAligned,
-      [styles$G['data-table-cell__error-icon--left-align']]: !isRightAligned
+    className: classnames(styles$I['data-table-cell__error-icon'], {
+      [styles$I['data-table-cell__error-icon--right-align']]: isRightAligned,
+      [styles$I['data-table-cell__error-icon--left-align']]: !isRightAligned
     })
   }, React__default.createElement(IconTimesOctagon, {
     size: "medium",
@@ -9679,17 +9974,17 @@ const DataTableCellElement = ({
   }));
   const TableCell = React__default.createElement("td", {
     className: classnames({
-      [styles$G['data-table-cell--invalid']]: hasError,
-      [styles$G['data-table-cell--no-padding']]: _noPadding,
-      [styles$G['data-table-cell--vertical-border']]: hasVerticalBorders
-    }, styles$G['data-table-cell']),
+      [styles$I['data-table-cell--invalid']]: hasError,
+      [styles$I['data-table-cell--no-padding']]: _noPadding,
+      [styles$I['data-table-cell--vertical-border']]: hasVerticalBorders
+    }, styles$I['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default.createElement("div", {
-    className: classnames(styles$G['data-table-cell__content'], {
-      [styles$G['data-table-cell__content--with-error']]: hasError,
-      [styles$G['data-table-cell__content--right-align']]: isRightAligned,
-      [styles$G['data-table-cell__content--loading']]: state === DATA_TABLE_STATES.BACKGROUND_LOADING
+    className: classnames(styles$I['data-table-cell__content'], {
+      [styles$I['data-table-cell__content--with-error']]: hasError,
+      [styles$I['data-table-cell__content--right-align']]: isRightAligned,
+      [styles$I['data-table-cell__content--loading']]: state === DATA_TABLE_STATES.BACKGROUND_LOADING
     })
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default.createElement(Tooltip, {
@@ -9713,7 +10008,7 @@ const DataTableRowActions = ({
   return React__default.createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default.createElement("div", {
-    className: styles$H['actions'],
+    className: styles$J['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, state === 'SKELETON_LOADING' && React__default.createElement(Skeleton, {
     width: 45
@@ -9726,7 +10021,7 @@ const DataTableRowActions = ({
   })));
 };
 
-var styles$F = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
+var styles$H = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
 
 const DataTableEditableCellElement = ({
   name,
@@ -9775,8 +10070,8 @@ const DataTableEditableCellElement = ({
   };
   const EditableCell = React__default.createElement("div", {
     className: classnames({
-      [styles$F['data-table-editable-cell--currency']]: _type === 'currency'
-    }, styles$F['data-table-editable-cell']),
+      [styles$H['data-table-editable-cell--currency']]: _type === 'currency'
+    }, styles$H['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
@@ -9786,12 +10081,12 @@ const DataTableEditableCellElement = ({
     name: name,
     id: controllers.id,
     className: classnames({
-      [styles$F['data-table-editable-cell--right-aligned']]: isRightAligned,
-      [styles$F['data-table-editable-cell--top-left']]: isTopLeftCell,
-      [styles$F['data-table-editable-cell--top-right']]: isTopRightCell,
-      [styles$F['data-table-editable-cell--bottom-left']]: isBottomLeftCell,
-      [styles$F['data-table-editable-cell--bottom-right']]: isBottomRightCell,
-      [styles$F['data-table-editable-cell--invalid']]: hasError
+      [styles$H['data-table-editable-cell--right-aligned']]: isRightAligned,
+      [styles$H['data-table-editable-cell--top-left']]: isTopLeftCell,
+      [styles$H['data-table-editable-cell--top-right']]: isTopRightCell,
+      [styles$H['data-table-editable-cell--bottom-left']]: isBottomLeftCell,
+      [styles$H['data-table-editable-cell--bottom-right']]: isBottomRightCell,
+      [styles$H['data-table-editable-cell--invalid']]: hasError
     }),
     type: _type === 'currency' ? 'number' : 'text',
     step: _type === 'currency' ? 'any' : '',
@@ -9836,9 +10131,9 @@ const DataTableRowComponent = (_ref, ref) => {
   const {
     showActionMenu
   } = useDataTableContext();
-  const styleNames = classnames(styles$I['data-table-row'], {
-    [styles$I['data-table-row--clickable']]: onClick,
-    [styles$I['data-table-row--selected']]: isSelected
+  const styleNames = classnames(styles$K['data-table-row'], {
+    [styles$K['data-table-row--clickable']]: onClick,
+    [styles$K['data-table-row--selected']]: isSelected
   });
   const renderColumn = (columnElement, index) => {
     const isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement == null ? void 0 : columnElement.type) === DataTableCell;
@@ -9929,7 +10224,7 @@ const calculateScrollState = scrollContainer => {
   return DATA_TABLE_SCROLL_STATES.NO_SCROLL;
 };
 
-var styles$E = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
+var styles$G = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
 
 const useDataTableScrollState = stickyColumns => {
   const scrollContainerRef = useRef(null);
@@ -9971,7 +10266,7 @@ const useDataTableScrollState = stickyColumns => {
   };
 };
 
-var styles$D = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
+var styles$F = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
 
 const DataTableCoverShadow = ({
   isShowingColumns,
@@ -9989,11 +10284,11 @@ const DataTableCoverShadow = ({
     return `calc(100% - ${headerHeight})`;
   };
   return React__default.createElement("div", {
-    className: classnames(styles$D['data-table-cover-shadow'], {
-      [styles$D['data-table-cover-shadow--left']]: direction === 'left',
-      [styles$D['data-table-cover-shadow--left-shadow']]: direction === 'left' && showShadow,
-      [styles$D['data-table-cover-shadow--right']]: direction === 'right',
-      [styles$D['data-table-cover-shadow--right-shadow']]: direction === 'right' && showShadow
+    className: classnames(styles$F['data-table-cover-shadow'], {
+      [styles$F['data-table-cover-shadow--left']]: direction === 'left',
+      [styles$F['data-table-cover-shadow--left-shadow']]: direction === 'left' && showShadow,
+      [styles$F['data-table-cover-shadow--right']]: direction === 'right',
+      [styles$F['data-table-cover-shadow--right-shadow']]: direction === 'right' && showShadow
     }),
     style: {
       // @ts-expect-error This difines a custom CSS variable
@@ -10055,13 +10350,13 @@ const DataTableStickyColumnsContainer = ({
     isShowingColumns: !!isShowingColumns,
     showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
   })), React__default.createElement("div", {
-    className: classnames(styles$E[containerClassName], {
-      [styles$E[`${containerClassName}--with-footer`]]: isShowingFooter,
-      [styles$E[`${containerClassName}--with-left-sticky-columns`]]: hasLeftColumnSticky,
-      [styles$E[`${containerClassName}--with-left-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false,
-      [styles$E[`${containerClassName}--with-right-sticky-columns`]]: hasRightColumnSticky,
-      [styles$E[`${containerClassName}--with-right-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false,
-      [styles$E[`${containerClassName}--no-shadow`]]: noShadow
+    className: classnames(styles$G[containerClassName], {
+      [styles$G[`${containerClassName}--with-footer`]]: isShowingFooter,
+      [styles$G[`${containerClassName}--with-left-sticky-columns`]]: hasLeftColumnSticky,
+      [styles$G[`${containerClassName}--with-left-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false,
+      [styles$G[`${containerClassName}--with-right-sticky-columns`]]: hasRightColumnSticky,
+      [styles$G[`${containerClassName}--with-right-sticky-columns-and-shadow`]]: state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false,
+      [styles$G[`${containerClassName}--no-shadow`]]: noShadow
     }),
     onScroll: onScroll,
     ref: scrollContainerRef,
@@ -10069,11 +10364,11 @@ const DataTableStickyColumnsContainer = ({
   }, children));
 };
 
-var styles$C = {"data-table-empty-state":"_fCHjG"};
+var styles$E = {"data-table-empty-state":"_fCHjG"};
 
-var styles$B = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
+var styles$D = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
 
-var styles$A = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
+var styles$C = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
 
 const EmptyStateContainerCTA = ({
   isPaywall,
@@ -10090,8 +10385,8 @@ const EmptyStateContainerCTA = ({
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: classnames(styles$A['empty-state-container-cta'], {
-      [styles$A['empty-state-container-cta--inside-modal']]: _isInsideModal
+    className: classnames(styles$C['empty-state-container-cta'], {
+      [styles$C['empty-state-container-cta--inside-modal']]: _isInsideModal
     })
   }, primaryButton, secondaryButton);
 };
@@ -10115,7 +10410,7 @@ const EmptyStateContainerStack = ({
   mediaComponent
 }) => {
   return React__default.createElement("div", {
-    className: styles$B['empty-state-container-stack'],
+    className: styles$D['empty-state-container-stack'],
     "data-testid": testId
   }, mediaComponent ? mediaComponent : mediaUrl && React__default.createElement("img", {
     src: mediaUrl,
@@ -10132,7 +10427,7 @@ const EmptyStateContainerStack = ({
     as: "body",
     alignment: "center"
   }, title), React__default.createElement("div", {
-    className: styles$B['empty-state-container-stack__body']
+    className: styles$D['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -10244,7 +10539,7 @@ const DataTableEmptyState = ({
     columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
     colSpan: colSpan
   }, React__default.createElement("div", {
-    className: styles$C['data-table-empty-state']
+    className: styles$E['data-table-empty-state']
   }, React__default.createElement(EmptyStateContainerStack, {
     mediaUrl: customImage,
     mediaComponent: customImage === '' ? React__default.createElement(MagnifyingGlassIllustration, null) : undefined,
@@ -10328,7 +10623,7 @@ const DataTable = _ref => {
       return null;
     }
     return React__default.createElement("div", {
-      className: styles$R['data-table__pagination-controls'],
+      className: styles$T['data-table__pagination-controls'],
       "data-testid": testId && `${testId}-pagination-controls`
     }, React__default.createElement(PaginationControls, {
       hasPrevious: isLoading ? false : hasPrevious,
@@ -10351,7 +10646,7 @@ const DataTable = _ref => {
       tableId
     }
   }, React__default.createElement("div", {
-    className: classnames(styles$R['data-table']),
+    className: classnames(styles$T['data-table']),
     ref: tableRef,
     style: positionStyles
   }, React__default.createElement(DataTableStickyColumnsContainer, {
@@ -10362,24 +10657,24 @@ const DataTable = _ref => {
     placement: "top",
     isShowingColumns: !!isShowingColumns
   }), React__default.createElement("div", {
-    className: classnames(styles$R['data-table__content'], {
-      [styles$R['data-table__content--with-scroll']]: isScrollableTable
+    className: classnames(styles$T['data-table__content'], {
+      [styles$T['data-table__content--with-scroll']]: isScrollableTable
     }),
     style: conditionalStyles,
     id: `${tableId}-content`
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default.createElement("div", {
-    className: styles$R['data-table__background-loading']
+    className: styles$T['data-table__background-loading']
   }, React__default.createElement(Spinner, null)), React__default.createElement("table", _extends({
-    className: classnames(styles$R['data-table__table'], {
-      [styles$R['data-table__table--no-columns']]: !isShowingColumns
+    className: classnames(styles$T['data-table__table'], {
+      [styles$T['data-table__table--no-columns']]: !isShowingColumns
     })
   }, dataProps), columns && isShowingColumns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: isShowingContent && showActionMenu
   }), React__default.createElement("tbody", {
-    className: classnames(styles$R['data-table__body'], {
-      [styles$R['data-table__body--no-bottom-radius']]: isShowingFooter && isShowingContent
+    className: classnames(styles$T['data-table__body'], {
+      [styles$T['data-table__body--no-bottom-radius']]: isShowingFooter && isShowingContent
     }),
     "data-testid": testId
   }, isShowingContent && content.map((item, index) => {
@@ -10398,7 +10693,7 @@ const DataTable = _ref => {
   }), state === DATA_TABLE_STATES.SKELETON_LOADING && React__default.createElement(React__default.Fragment, null, skeletonRows.map((_, index) => React__default.createElement(SkeletonRow, {
     key: index
   })))), isShowingFooter && isShowingContent && React__default.createElement("tfoot", {
-    className: styles$R['data-table__footer'],
+    className: styles$T['data-table__footer'],
     "data-testid": testId && `${testId}-footer`
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
@@ -10406,7 +10701,7 @@ const DataTable = _ref => {
   })), React__default.createElement(Pagination, null));
 };
 
-var styles$z = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
+var styles$B = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
 
 const AccordionItem = props => {
   const {
@@ -10421,9 +10716,9 @@ const AccordionItem = props => {
   } = item;
   const isFocusedByClickRef = React__default.useRef(false);
   return React__default.createElement("div", {
-    className: styles$z['accordion-item']
+    className: styles$B['accordion-item']
   }, React__default.createElement("button", {
-    className: styles$z['accordion-item__header'],
+    className: styles$B['accordion-item__header'],
     onClick: () => {
       if (isOpen) {
         handleAccordionItemOpen(null);
@@ -10450,15 +10745,15 @@ const AccordionItem = props => {
   }, typeof title === 'string' ? React__default.createElement(Text, {
     emphasis: "bold"
   }, title) : title, React__default.createElement(IconChevronDown, {
-    className: styles$z[`accordion-item__icon${isOpen ? '--active' : ''}`],
+    className: styles$B[`accordion-item__icon${isOpen ? '--active' : ''}`],
     color: 'surface-on-color-subtle'
   }))), React__default.createElement("div", {
     "data-testid": `${isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'}`,
-    className: styles$z[`accordion-item__content${isOpen ? '--active' : ''}`]
+    className: styles$B[`accordion-item__content${isOpen ? '--active' : ''}`]
   }, isOpen && React__default.createElement(Text, null, content)));
 };
 
-var styles$y = {"accordion":"_058SP"};
+var styles$A = {"accordion":"_058SP"};
 
 const _excluded$e = ["items", "onExpand", "defaultOpenId"];
 const Accordion = _ref => {
@@ -10486,7 +10781,7 @@ const Accordion = _ref => {
       isAccordionMounted: true
     }
   }, React__default.createElement("div", _extends({
-    className: styles$y['accordion']
+    className: styles$A['accordion']
   }, dataProps), items.map((item, index) => {
     const id = item.id || index.toString();
     return React__default.createElement(AccordionItem, {
@@ -10500,7 +10795,7 @@ const Accordion = _ref => {
   })));
 };
 
-var styles$x = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
+var styles$z = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
 
 const ActionList = ({
   children,
@@ -10512,15 +10807,15 @@ const ActionList = ({
   const translate = useTranslation('ActionList');
   const hasChildren = React__default.Children.count(children) > 0;
   return React__default.createElement("div", {
-    className: styles$x['action-list'],
+    className: styles$z['action-list'],
     "data-testid": testId,
     style: {
       maxHeight: maxHeight
     }
   }, title && React__default.createElement("div", {
-    className: styles$x['action-list__title']
+    className: styles$z['action-list__title']
   }, title), hasChildren ? children : React__default.createElement("div", {
-    className: styles$x['action-list__empty-state']
+    className: styles$z['action-list__empty-state']
   }, React__default.createElement(EmptyStateContainerStack, {
     title: (emptyState == null ? void 0 : emptyState.title) || translate('emptyStateTitle'),
     mediaUrl: emptyState == null ? void 0 : emptyState.image,
@@ -10698,7 +10993,7 @@ const useSelectFieldControllers = ({
   return controllers;
 };
 
-var styles$w = {"custom-control":"_pXQqq"};
+var styles$y = {"custom-control":"_pXQqq"};
 
 const _excluded$d = ["children"];
 function CustomControl(_ref) {
@@ -10712,7 +11007,7 @@ function CustomControl(_ref) {
   } = props.selectProps.componentsProps;
   const selectedOption = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$w['custom-control'],
+    className: styles$y['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -10779,6 +11074,11 @@ const getSelectStyles = ({
         } : 'none'
       });
     },
+    input: base => {
+      return Object.assign({}, base, {
+        color: COLORS['surface-on-color']
+      });
+    },
     indicatorSeparator: () => ({
       display: 'none'
     }),
@@ -10886,9 +11186,9 @@ const CustomContainer = props => {
   }));
 };
 
-var styles$v = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
+var styles$x = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
 
-var styles$u = {"creatable-button--align-left":"_Qw267","creatable-button":"_f9V5D"};
+var styles$w = {"creatable-button--align-left":"_Qw267","creatable-button":"_f9V5D"};
 
 /**
  * Shared creatable button component used in CustomMenu and CustomGroupWithCreate.
@@ -10912,8 +11212,8 @@ const CreatableButton = ({
   };
   if (!button || typeof button === 'string') {
     return React__default.createElement("div", {
-      className: classnames(styles$u['creatable-button'], {
-        [styles$u['creatable-button--align-left']]: _alignLeft
+      className: classnames(styles$w['creatable-button'], {
+        [styles$w['creatable-button--align-left']]: _alignLeft
       })
     }, React__default.createElement(Button, {
       theme: "link-primary",
@@ -10938,8 +11238,8 @@ const CreatableButton = ({
     overrideProps.theme = 'link-primary';
   }
   return React__default.createElement("div", {
-    className: classnames(styles$u['creatable-button'], {
-      [styles$u['creatable-button--align-left']]: _alignLeft
+    className: classnames(styles$w['creatable-button'], {
+      [styles$w['creatable-button--align-left']]: _alignLeft
     })
   }, React__default.cloneElement(button, overrideProps));
 };
@@ -10965,7 +11265,7 @@ const CreateInputForm = ({
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$1b['text-field'], inputClassName),
+    className: classnames(styles$1e['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -11031,7 +11331,7 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, _extends({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$v['custom-menu-hr']
+    className: styles$x['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: () => setShowFooter(true),
@@ -11042,13 +11342,13 @@ function CustomMenu(_ref) {
     onMenuInputFocus: onMenuInputFocus,
     onSubmit: onCreateButton,
     defaultValue: inputDefaultValue,
-    wrapperClassName: styles$v['custom-menu-div'],
-    inputClassName: styles$v['custom-menu-text-field'],
+    wrapperClassName: styles$x['custom-menu-div'],
+    inputClassName: styles$x['custom-menu-text-field'],
     testId: "select-create-option-input"
   })));
 }
 
-var styles$t = {"custom-group-with-create-text-field":"_JZG4r","custom-group-with-create-hr":"_04fIM","custom-group-with-create-input-wrapper":"_oJzDV","custom-group-with-create-button-wrapper":"_hLu2D"};
+var styles$v = {"custom-group-with-create-text-field":"_JZG4r","custom-group-with-create-hr":"_04fIM","custom-group-with-create-input-wrapper":"_oJzDV","custom-group-with-create-button-wrapper":"_hLu2D"};
 
 function CustomGroupWithCreate(props) {
   const {
@@ -11082,7 +11382,7 @@ function CustomGroupWithCreate(props) {
   return React__default.createElement("div", {
     ref: containerRef
   }, React__default.createElement(components.Group, _extends({}, props)), !isInputActive ? React__default.createElement("div", {
-    className: styles$t['custom-group-with-create-button-wrapper']
+    className: styles$v['custom-group-with-create-button-wrapper']
   }, React__default.createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: () => setActiveGroupLabel(groupLabel),
@@ -11094,8 +11394,8 @@ function CustomGroupWithCreate(props) {
     onMenuInputFocus: onMenuInputFocus,
     onSubmit: onCreateButton,
     defaultValue: inputDefaultValue,
-    wrapperClassName: styles$t['custom-group-with-create-input-wrapper'],
-    inputClassName: styles$t['custom-group-with-create-text-field'],
+    wrapperClassName: styles$v['custom-group-with-create-input-wrapper'],
+    inputClassName: styles$v['custom-group-with-create-text-field'],
     testId: `select-create-option-input-${groupLabel}`
   }));
 }
@@ -11204,7 +11504,7 @@ const useSelectField = _ref => {
   };
 };
 
-var styles$s = {"select-field__suffix":"_vqC1M"};
+var styles$u = {"select-field__suffix":"_vqC1M"};
 
 /** Component to make possible choose from a predefined options. */
 const SelectField = props => {
@@ -11214,7 +11514,7 @@ const SelectField = props => {
   } = useSelectField(props);
   //Select field has the chevron icon as suffix, so we need to add a margin to the suffix to avoid overlapping with the chevron icon
   const suffixWithMargin = props.suffix ? React__default.createElement("div", {
-    className: styles$s['select-field__suffix']
+    className: styles$u['select-field__suffix']
   }, props.suffix) : undefined;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: props.prefix,
@@ -11259,9 +11559,9 @@ const ToolbarSelect = _ref => {
   }, rest));
 };
 
-var styles$r = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
+var styles$t = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
 
-var styles$q = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
+var styles$s = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
 
 const DATE_FILTER_MODE = {
   DAY: 'day',
@@ -11315,8 +11615,8 @@ const DateFilterDisplay = forwardRef(({
   onClick
 }, ref) => {
   return React__default.createElement("button", {
-    className: classnames(styles$q['date-filter-display'], {
-      [styles$q['date-filter-display--wide']]: mode === DATE_FILTER_MODE.WEEK
+    className: classnames(styles$s['date-filter-display'], {
+      [styles$s['date-filter-display--wide']]: mode === DATE_FILTER_MODE.WEEK
     }),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
@@ -11325,7 +11625,7 @@ const DateFilterDisplay = forwardRef(({
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$q['date-filter-display__display-icon'])
+    className: classnames(styles$s['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: "surface-on-color-subtle"
@@ -11336,7 +11636,7 @@ const DateFilterDisplay = forwardRef(({
   })));
 });
 
-var styles$p = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
+var styles$r = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
 
 const handleDateStepper = (date, mode, stepDirection, onChange) => {
   const step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -11365,9 +11665,9 @@ const DateFilterStepper = ({
   date
 }) => {
   return React__default.createElement("button", {
-    className: classnames(styles$p['date-stepper'], {
-      [styles$p['date-stepper--backward']]: stepDirection === STEP_DIRECTION.BACKWARD,
-      [styles$p['date-stepper--forward']]: stepDirection === STEP_DIRECTION.FORWARD
+    className: classnames(styles$r['date-stepper'], {
+      [styles$r['date-stepper--backward']]: stepDirection === STEP_DIRECTION.BACKWARD,
+      [styles$r['date-stepper--forward']]: stepDirection === STEP_DIRECTION.FORWARD
     }),
     onClick: () => handleDateStepper(date, mode, stepDirection, onChange)
   }, children);
@@ -11432,9 +11732,9 @@ const CalendarMonth = ({
   }
   const MONTHS = [...Array(12).keys()];
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default.createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: ref => setCalendarRef(ref),
     style: _extends({}, calendarPosition, {
       zIndex: isInsideDropdown ? getZIndex('dropdown-level-2') : getZIndex('dropdown')
@@ -11511,8 +11811,8 @@ const DateFilter = ({
   const onClickOutside = useCallback(() => setCalendarOpen(false), [setCalendarOpen]);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$r['date-filter'], {
-      [styles$r['date-filter--wide']]: _mode === DATE_FILTER_MODE.WEEK
+    className: classnames(styles$t['date-filter'], {
+      [styles$t['date-filter--wide']]: _mode === DATE_FILTER_MODE.WEEK
     })
   }, React__default.createElement(Inline, {
     space: 0
@@ -11555,7 +11855,7 @@ const DateFilter = ({
   }));
 };
 
-var styles$o = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb"};
+var styles$q = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb"};
 
 const SegmentedControl = ({
   options,
@@ -11567,21 +11867,21 @@ const SegmentedControl = ({
     return option === value;
   };
   return React__default.createElement("div", {
-    className: styles$o['segmented-control'],
+    className: styles$q['segmented-control'],
     "data-testid": testId
   }, options.map(option => React__default.createElement(React__default.Fragment, {
     key: option
   }, React__default.createElement("button", {
     onClick: () => onChange(option),
-    className: classnames(styles$o['segmented-control__button'], {
-      [styles$o['segmented-control__button--selected']]: isSelected(option)
+    className: classnames(styles$q['segmented-control__button'], {
+      [styles$q['segmented-control__button--selected']]: isSelected(option)
     })
   }, option))));
 };
 
-var styles$n = {"form--standard-size":"_8-Ykj"};
+var styles$p = {"form--standard-size":"_8-Ykj"};
 
-var styles$m = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
+var styles$o = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
 
 const FormSection = ({
   children,
@@ -11594,13 +11894,13 @@ const FormSection = ({
   const content = React__default.createElement(Stack, null, (title || subtitle) && React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$m['form-section__title'])
+    className: classnames(styles$o['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$m['form-section__subtitle'])
+    className: classnames(styles$o['form-section__subtitle'])
   }, subtitle)), children);
   return React__default.createElement("div", {
-    className: classnames(styles$m['form-section'], {
-      [styles$m['form-section--no-margin']]: _noMargin || as === 'card'
+    className: classnames(styles$o['form-section'], {
+      [styles$o['form-section--no-margin']]: _noMargin || as === 'card'
     }),
     "data-testid": testId
   }, as === 'card' ? React__default.createElement(Card, {
@@ -11620,7 +11920,7 @@ const updateButtonProps = (child, newProps) => {
   }, newProps, child.props));
 };
 
-var styles$l = {"form-footer":"_4ksfB"};
+var styles$n = {"form-footer":"_4ksfB"};
 
 const FormFooterActions = ({
   actions
@@ -11656,7 +11956,7 @@ const FormFooter = ({
   });
   const isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$l['form-footer']),
+    className: classnames(styles$n['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -11694,13 +11994,13 @@ const Form = ({
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik == null ? void 0 : formik.handleSubmit,
     className: classnames({
-      [styles$n['form--standard-size']]: !_wide
+      [styles$p['form--standard-size']]: !_wide
     }),
     "data-testid": testId
   }, _stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$k = {"form-row":"_xX-RS"};
+var styles$m = {"form-row":"_xX-RS"};
 
 const SIZE_25_PERCENT = '25%';
 const SIZE_33_PERCENT = '33.333%';
@@ -11727,14 +12027,14 @@ const FormRow = ({
     space: _space,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$k['form-row']
+    extraClass: styles$m['form-row']
   }, children, additionalColumns.map((_, index) => React__default.createElement("span", {
     key: index,
     "data-testid": "empty-cell"
   })));
 };
 
-var styles$j = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
+var styles$l = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
 
 const useGrowTextAreaRef = (minHeight, maxHeight, autoGrow, forwardedRef) => {
   const textareaRef = useRef(null);
@@ -11803,10 +12103,10 @@ const TextAreaField = ({
   return React__default.createElement(Field, _extends({}, fieldProps, {
     characterCount: controllers.value !== undefined && maxLength ? maxLength - controllers.value.length : undefined
   }), React__default.createElement("div", {
-    className: classnames(styles$j['text-field'], {
-      [styles$j['text-field--invalid']]: hasError,
-      [styles$j['text-field--disabled']]: disabled,
-      [styles$j['text-field--focus']]: hasFocus
+    className: classnames(styles$l['text-field'], {
+      [styles$l['text-field--invalid']]: hasError,
+      [styles$l['text-field--disabled']]: disabled,
+      [styles$l['text-field--focus']]: hasFocus
     }),
     ref: containerRef,
     onClick: event => {
@@ -11838,7 +12138,7 @@ const TextAreaField = ({
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default.createElement("div", {
-    className: styles$j['text-field__toolbar'],
+    className: styles$l['text-field__toolbar'],
     id: `${controllers.id}-toolbar`,
     ref: toolbarRef,
     onClick: event => {
@@ -11872,7 +12172,7 @@ const TextFieldElement = (_ref, ref) => {
 };
 const TextField = forwardRef(TextFieldElement);
 
-var styles$i = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
+var styles$k = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
 
 const useMultiSelectFieldControllers = ({
   name,
@@ -11937,10 +12237,10 @@ const CreatableOption = ({
   };
   return React__default.createElement(React__default.Fragment, null, !isCreatingOption && React__default.createElement("div", {
     key: 'pill-select-field-create-option',
-    className: styles$i['pill-select-field']
+    className: styles$k['pill-select-field']
   }, React__default.createElement("button", {
     "data-testid": testId ? `${testId}-create-option` : undefined,
-    className: styles$i['pill-select-field__add-new-input'],
+    className: styles$k['pill-select-field__add-new-input'],
     onClick: () => {
       setIsCreatingOption(true);
       setNewOptionLabel('');
@@ -11949,9 +12249,9 @@ const CreatableOption = ({
     size: "small"
   }), createOptionLabel)), isCreatingOption && React__default.createElement("div", {
     key: 'pill-select-field-creating-option',
-    className: styles$i['pill-select-field']
+    className: styles$k['pill-select-field']
   }, React__default.createElement("input", {
-    className: styles$i['pill-select-field__creating-input'],
+    className: styles$k['pill-select-field__creating-input'],
     name: `${name}-pill-select-field-creating-option`,
     id: 'pill-select-field-creating-option',
     type: "text",
@@ -11972,7 +12272,7 @@ const CreatableOption = ({
       }
     }
   }), React__default.createElement("span", {
-    className: styles$i['pill-select-field__creating-custom-input']
+    className: styles$k['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default.createElement(Text, {
     as: "body",
     color: "surface-on-color-disabled"
@@ -12023,7 +12323,7 @@ const PillSelectField = ({
       }
     };
     return React__default.createElement("button", {
-      className: styles$i['pill-select-field__removable-icon'],
+      className: styles$k['pill-select-field__removable-icon'],
       onClick: handleClick,
       disabled: disabled
     }, React__default.createElement(IconTimes, {
@@ -12040,7 +12340,7 @@ const PillSelectField = ({
     const itemId = `${controllers.id}-${itemIdentifier}`;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$i['pill-select-field']
+      className: styles$k['pill-select-field']
     }, React__default.createElement("input", {
       name: `${name}-${itemIdentifier}`,
       id: itemId,
@@ -12060,7 +12360,7 @@ const PillSelectField = ({
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$i['pill-select-field__custom-input']
+      className: styles$k['pill-select-field__custom-input']
     }, option.label, option.isRemovable && React__default.createElement(RemoveButton, {
       option: option
     })));
@@ -12109,9 +12409,9 @@ const useRadioGroupFieldContext = () => {
   return context;
 };
 
-var styles$h = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
+var styles$j = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
 
-var styles$g = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
+var styles$i = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
 
 const RadioGroupBoxOption = ({
   value,
@@ -12128,7 +12428,7 @@ const RadioGroupBoxOption = ({
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$g['radio-group-box-option']
+    className: styles$i['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -12139,8 +12439,8 @@ const RadioGroupBoxOption = ({
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("div", {
-    className: classnames(styles$g['radio-group-box-option__box'], {
-      [styles$g['radio-group-box-option__box--disabled']]: radioGroupContext.disabled || disabled
+    className: classnames(styles$i['radio-group-box-option__box'], {
+      [styles$i['radio-group-box-option__box--disabled']]: radioGroupContext.disabled || disabled
     })
   }, React__default.createElement(Stack, {
     space: 16,
@@ -12150,17 +12450,17 @@ const RadioGroupBoxOption = ({
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: classnames(styles$g['radio-group-box-option__label'], {
-      [styles$g['radio-group-box-option__label--disabled']]: radioGroupContext.disabled || disabled
+    className: classnames(styles$i['radio-group-box-option__label'], {
+      [styles$i['radio-group-box-option__label--disabled']]: radioGroupContext.disabled || disabled
     })
   }, label), caption && React__default.createElement("div", {
-    className: classnames(styles$g['radio-group-box-option__caption'], {
-      [styles$g['radio-group-box-option__caption--disabled']]: radioGroupContext.disabled || disabled
+    className: classnames(styles$i['radio-group-box-option__caption'], {
+      [styles$i['radio-group-box-option__caption--disabled']]: radioGroupContext.disabled || disabled
     })
   }, caption)))));
 };
 
-var styles$f = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
+var styles$h = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
 
 /** RadioGroupField form element. */
 const RadioGroupOption = ({
@@ -12182,7 +12482,7 @@ const RadioGroupOption = ({
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$f['radio-group-option']
+    className: styles$h['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -12193,11 +12493,11 @@ const RadioGroupOption = ({
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("span", {
-    className: styles$f['radio-group-option__custom-input']
+    className: styles$h['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$f['radio-group-option__caption']
+    className: styles$h['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -12328,7 +12628,7 @@ const RadioGroupField = ({
   }, React__default.createElement(Stack, {
     space: _space
   }, label && React__default.createElement("div", {
-    className: styles$h['radio-group-field__label']
+    className: styles$j['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -12340,21 +12640,21 @@ const RadioGroupField = ({
     testId: testId,
     space: _space
   }, children), caption && React__default.createElement("div", {
-    className: styles$h['radio-group-caption']
+    className: styles$j['radio-group-caption']
   }, caption), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$e = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
+var styles$g = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
 
-var styles$d = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
+var styles$f = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
 
 const PasswordCriteria = ({
   met,
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$d['password-criteria'], {
-      [styles$d['password-criteria--invalid']]: !met
+    className: classnames(styles$f['password-criteria'], {
+      [styles$f['password-criteria--invalid']]: !met
     })
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
@@ -12427,12 +12727,12 @@ const PasswordField = ({
     error: controllers.error
   };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$e['password-container']
+    className: styles$g['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$e['text-field'], {
-      [styles$e['text-field--invalid']]: hasError
+    className: classnames(styles$g['text-field'], {
+      [styles$g['text-field--invalid']]: hasError
     }),
     type: type,
     "data-testid": testId,
@@ -12445,8 +12745,8 @@ const PasswordField = ({
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: classnames(styles$e['password-toggle'], {
-      [styles$e['password-toggle--disabled']]: disabled
+    className: classnames(styles$g['password-toggle'], {
+      [styles$g['password-toggle--disabled']]: disabled
     }),
     onClick: toggleType,
     onKeyPress: toggleType,
@@ -12548,7 +12848,7 @@ const MultiSelectField = ({
   })));
 };
 
-var styles$c = {"custom-list":"_cSkvD"};
+var styles$e = {"custom-list":"_cSkvD"};
 
 const _excluded$7 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 const CustomList = _ref => {
@@ -12566,7 +12866,7 @@ const CustomList = _ref => {
   return React__default.createElement(components.MenuList, _extends({}, props), React__default.createElement(Fragment, null, children, showFooter && props.options.length > 0 && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$c['custom-list']
+    className: styles$e['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -12859,7 +13159,7 @@ const getFormikError = error => {
   return undefined;
 };
 
-var styles$b = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
+var styles$d = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
 
 var calendarStyles = {"root":"_SsQ7L","table":"_Ar-fF","caption":"_Tp79k","head_cell":"_Ya6Zr","day_today":"_lFzs7","day_outside":"_TjttB","nav_button":"_cwiRM","day_range_middle":"_rJolM","day_range_start":"_nVIPx","day_range_end":"_Y50yT"};
 
@@ -12923,9 +13223,9 @@ const DateRangeCalendar = ({
   const DAYS = getDays(translate);
   const MONTH_NAMES = getMonths(translate);
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default.createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: ref => setCalendarRef(ref),
     style: _extends({}, calendarPosition, {
       zIndex: getZIndex('dropdown')
@@ -13116,9 +13416,9 @@ const DateRangeField = ({
     end
   } = controllers.value;
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$b['date-range-field'], {
-      [styles$b['date-range-field--invalid']]: hasError,
-      [styles$b['date-range-field--disabled']]: disabled
+    className: classnames(styles$d['date-range-field'], {
+      [styles$d['date-range-field--invalid']]: hasError,
+      [styles$d['date-range-field--disabled']]: disabled
     }),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
@@ -13440,7 +13740,7 @@ const TimeRangeSelector = forwardRef(TimeFieldElement);
  */
 const TimeField = forwardRef(TimeFieldElement);
 
-var styles$a = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
+var styles$c = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
 
 const TimeRangeEnd = ({
   startTime,
@@ -13561,9 +13861,9 @@ const TimeRangeField = ({
     end
   }) : getDuration(end, start, subtractDuration);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$a['time-range-field'], {
-      [styles$a['time-range-field--invalid']]: hasError,
-      [styles$a['time-range-field--disabled']]: disabled
+    className: classnames(styles$c['time-range-field'], {
+      [styles$c['time-range-field--invalid']]: hasError,
+      [styles$c['time-range-field--disabled']]: disabled
     }),
     "data-testid": testId
   }, React__default.createElement(TimeRangeStart, {
@@ -13591,7 +13891,7 @@ const TimeRangeField = ({
   })));
 };
 
-var styles$9 = {"currency-field":"_GyYnE","currency-field--with-mask":"_NfdKk","currency-field__mask-display":"_ddacu","currency-field__mask-display--disabled":"_o1-zA"};
+var styles$b = {"currency-field":"_GyYnE","currency-field--with-mask":"_NfdKk","currency-field__mask-display":"_ddacu","currency-field__mask-display--disabled":"_o1-zA"};
 
 const CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 const CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -13657,12 +13957,12 @@ const CurrencyFieldElement = (_ref, forwardedRef) => {
       setShowMask(false);
       inputProps.onFocus(e);
     },
-    className: classnames(inputProps.className, styles$9['currency-field'], {
-      [styles$9['currency-field--with-mask']]: showMask && !!inputProps.value
+    className: classnames(inputProps.className, styles$b['currency-field'], {
+      [styles$b['currency-field--with-mask']]: showMask && !!inputProps.value
     })
   }))), showMask && !!inputProps.value && React__default.createElement("div", {
-    className: classnames(styles$9['currency-field__mask-display'], {
-      [styles$9['currency-field__mask-display--disabled']]: inputProps.disabled
+    className: classnames(styles$b['currency-field__mask-display'], {
+      [styles$b['currency-field__mask-display--disabled']]: inputProps.disabled
     }),
     style: {
       marginLeft: displayPadding
@@ -13790,7 +14090,7 @@ const FormFeedback = ({
   }, children);
 };
 
-var styles$8 = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
+var styles$a = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
 
 const usePhoneFieldControllers = ({
   name,
@@ -13933,8 +14233,8 @@ const usePhoneField = ({
     'aria-describedby': hasError ? `${controllers.id}-error-message` : `${controllers.id}-describer`,
     'aria-invalid': hasError,
     autoFocus,
-    className: classnames(styles$1b['text-field'], {
-      [styles$1b['text-field--invalid']]: hasError
+    className: classnames(styles$1e['text-field'], {
+      [styles$1e['text-field--invalid']]: hasError
     }),
     'data-testid': testId,
     disabled,
@@ -14704,7 +15004,7 @@ const COUNTRIES = {
 };
 const COUNTRY_CODES = Object.keys(COUNTRIES);
 
-var styles$7 = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
+var styles$9 = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
 
 var flagIcons = {"fi":"_wEQeh","fis":"_Z-kfc","fi-ac":"_amiP8","fi-ad":"_-Nycw","fi-ae":"_5zcAZ","fi-af":"_x-kp7","fi-ag":"_cfoi1","fi-ai":"_xoMS-","fi-al":"_am975","fi-am":"_0p-gD","fi-ao":"_l245N","fi-ar":"_xigkX","fi-as":"_fSczv","fi-at":"_tTeMy","fi-au":"_nSXvc","fi-aw":"_J3Dgu","fi-ax":"_PnU0s","fi-az":"_Hevuf","fi-ba":"_V-NYg","fi-bb":"_rdxaV","fi-bd":"_W3w35","fi-be":"_HXWpo","fi-bf":"_-xCW2","fi-bg":"_UuyPh","fi-bh":"_qYHkT","fi-bi":"_sfFeO","fi-bj":"_HcoBc","fi-bl":"_VvU29","fi-bm":"_DCtD1","fi-bn":"_QdHY3","fi-bo":"_Ayx7f","fi-bq":"_VfZGH","fi-br":"_HigIg","fi-bs":"_PWr-E","fi-bt":"_uFlIS","fi-bw":"_Mmoqr","fi-by":"_MKO28","fi-bz":"_HBn3o","fi-ca":"_wB3xX","fi-cc":"_oJEC5","fi-cd":"_C3RR8","fi-cf":"_ZVOZZ","fi-cg":"_Nk7Zr","fi-ch":"_9qTmx","fi-ci":"_4-gxn","fi-ck":"_YEK3x","fi-cl":"_-iNl4","fi-cm":"_UozRb","fi-cn":"_KsOEH","fi-co":"_ptSEc","fi-cr":"_92iwJ","fi-cu":"_D0k3p","fi-cv":"_O5oBT","fi-cw":"_82pI2","fi-cx":"_Eqg1T","fi-cy":"_740E8","fi-cz":"_483Iy","fi-de":"_Wla8X","fi-dj":"_Jm9gH","fi-dk":"_5QJuz","fi-dm":"_4lh-K","fi-do":"_Zvttl","fi-dz":"_-5iKJ","fi-ec":"_XMC0f","fi-ee":"_tZDe6","fi-eg":"_5USxE","fi-eh":"_rpC1Z","fi-er":"_Rhm4A","fi-es":"_QN2si","fi-et":"_2ihBN","fi-fi":"_2Lctq","fi-fj":"_ljZXm","fi-fk":"_Um9-A","fi-fm":"_mXG-Y","fi-fo":"_SemMo","fi-fr":"_MGcxf","fi-ga":"_aPt7H","fi-gb":"_2tU39","fi-gd":"_CPs5V","fi-ge":"_09VJF","fi-gf":"_7STtr","fi-gg":"_CUbGJ","fi-gh":"_mgJbd","fi-gi":"_mxhe5","fi-gl":"_gXogr","fi-gm":"_JHzzB","fi-gn":"_XJqm4","fi-gp":"_YnrVE","fi-gq":"_J47-w","fi-gr":"_5YAwo","fi-gt":"_PWFl-","fi-gu":"_ItzVX","fi-gw":"_hiRJc","fi-gy":"_oitDt","fi-hk":"_18FzB","fi-hn":"_5ySTg","fi-hr":"_rzYuT","fi-ht":"_Pq7or","fi-hu":"_-u5Ze","fi-id":"_m8GwW","fi-ie":"_pPEAu","fi-il":"_Butse","fi-im":"_wLEYj","fi-in":"_XY7D8","fi-io":"_iKM6K","fi-iq":"_iwLoJ","fi-ir":"_L1Gd1","fi-is":"_6XPDX","fi-it":"_JXv9-","fi-je":"_Qwjxj","fi-jm":"_qzNME","fi-jo":"_JqYXz","fi-jp":"_CakOC","fi-ke":"_Czyy6","fi-kg":"_6Yydv","fi-kh":"_zhLEc","fi-ki":"_qJxPJ","fi-km":"_KDmv4","fi-kn":"_n3xy0","fi-kp":"_voM9e","fi-kr":"_sErX2","fi-kw":"_kJUFk","fi-ky":"_Ensoj","fi-kz":"_JVpyw","fi-la":"_eVzpD","fi-lb":"_f400B","fi-lc":"_vhHp5","fi-li":"_cP76d","fi-lk":"_NGSeL","fi-lr":"_yIHm7","fi-ls":"_Kj-GJ","fi-lt":"_VTK9E","fi-lu":"_N4PHA","fi-lv":"_d-ZWR","fi-ly":"_49dYi","fi-ma":"_Iqggh","fi-mc":"_QQY-Q","fi-md":"_e7v9L","fi-me":"_WqN7P","fi-mf":"_4Exh-","fi-mg":"_W-d9O","fi-mh":"_3xTQ7","fi-mk":"_O26qm","fi-ml":"_hiLpW","fi-mm":"_QGh12","fi-mn":"_KNLNH","fi-mo":"_Kdw-k","fi-mp":"_CTkAK","fi-mq":"_MzLKJ","fi-mr":"_sjQHJ","fi-ms":"_ENTOn","fi-mt":"_GoKtf","fi-mu":"_WLc98","fi-mv":"_08Tf4","fi-mw":"_MvAGM","fi-mx":"_FPDND","fi-my":"_1xoF6","fi-mz":"_ylwZy","fi-na":"_-pxPH","fi-nc":"_W-Ot-","fi-ne":"_EOA-X","fi-nf":"_W5Kl5","fi-ng":"_q76Cs","fi-ni":"_AuKsI","fi-nl":"_qLIaU","fi-no":"_xbcrX","fi-np":"_FQt4h","fi-nr":"_jJbHx","fi-nu":"_TSamx","fi-nz":"_AzsKY","fi-om":"_TUoW9","fi-pa":"_jCT-C","fi-pe":"_VMnoV","fi-pf":"_Gblvx","fi-pg":"_FLRnq","fi-ph":"_0RSGR","fi-pk":"_DfZCd","fi-pl":"_hv9I4","fi-pm":"_IDp3q","fi-pr":"_2MHj1","fi-ps":"_0FLpC","fi-pt":"_p--cH","fi-pw":"_VP-zx","fi-py":"_-Tnic","fi-qa":"_Dy7Il","fi-re":"_7N5ED","fi-ro":"_4AYwa","fi-rs":"_Y-a4O","fi-ru":"_OKa79","fi-rw":"_bBqN1","fi-sa":"_vFwuG","fi-sb":"_MMmc2","fi-sc":"_ZUM8E","fi-sd":"_9k8eB","fi-se":"_cX0c9","fi-sg":"_4-yWs","fi-sh":"_-vaPR","fi-si":"_9oJgu","fi-sj":"_J0R6u","fi-sk":"_1VxbX","fi-sl":"_RiBAA","fi-sm":"_rEaFc","fi-sn":"_PRwVO","fi-so":"_XKFdC","fi-sr":"_LtiS3","fi-ss":"_45mng","fi-st":"_OtIks","fi-sv":"_OonsM","fi-sx":"_NtzDE","fi-sy":"_Ail2H","fi-sz":"_8XRyD","fi-ta":"_GQvZn","fi-tc":"_SbD-E","fi-td":"_AnXAO","fi-tg":"_smamZ","fi-th":"_AVcL5","fi-tj":"_EqMlf","fi-tk":"_20VO7","fi-tl":"_jz9hm","fi-tm":"_kmmny","fi-tn":"_9aBQ-","fi-to":"_G63l0","fi-tr":"_6shnc","fi-tt":"_P5fq4","fi-tv":"_b7SpV","fi-tw":"_jwNjI","fi-tz":"_qtU8x","fi-ua":"_bNAHa","fi-ug":"_-G-iW","fi-us":"_xwz53","fi-uy":"_DpeX8","fi-uz":"_kSABK","fi-va":"_VOSWl","fi-vc":"_X-aU3","fi-ve":"_FiFnt","fi-vg":"_d66Ny","fi-vi":"_6kM5U","fi-vn":"_ikRJo","fi-vu":"_5XaHH","fi-wf":"_ZEJXX","fi-ws":"_IzR7c","fi-xk":"_88V52","fi-ye":"_2Dwap","fi-yt":"_kQ0fh","fi-za":"_XzYDs","fi-zm":"_mA8wn","fi-zw":"_iIsuB"};
 
@@ -14715,21 +15015,21 @@ const CountrySelector = ({
   disabled
 }) => {
   return React__default.createElement("div", {
-    className: classnames(styles$7['country-selector'], {
-      [styles$7['country-selector--with-error']]: hasError,
-      [styles$7['country-selector--disabled']]: disabled
+    className: classnames(styles$9['country-selector'], {
+      [styles$9['country-selector--with-error']]: hasError,
+      [styles$9['country-selector--disabled']]: disabled
     })
   }, React__default.createElement(Dropdown, {
     trigger: React__default.createElement("div", {
-      className: classnames(styles$7['country-selector__trigger'], {
-        [styles$7['country-selector__trigger--with-error']]: hasError,
-        [styles$7['country-selector__trigger--disabled']]: disabled
+      className: classnames(styles$9['country-selector__trigger'], {
+        [styles$9['country-selector__trigger--with-error']]: hasError,
+        [styles$9['country-selector__trigger--disabled']]: disabled
       })
     }, React__default.createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons[`fi-${country.toLocaleLowerCase()}`], styles$7['country-selector__trigger-flag'])
+      className: classnames(flagIcons['fi'], flagIcons[`fi-${country.toLocaleLowerCase()}`], styles$9['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
       color: "currentColor",
       size: "medium"
@@ -14743,7 +15043,7 @@ const CountrySelector = ({
     alignItems: "center",
     space: 12
   }, React__default.createElement("span", {
-    className: classnames(flagIcons['fi'], flagIcons[`fi-${countryCode.toLocaleLowerCase()}`], styles$7['country-selector__flag'])
+    className: classnames(flagIcons['fi'], flagIcons[`fi-${countryCode.toLocaleLowerCase()}`], styles$9['country-selector__flag'])
   }), React__default.createElement(Text, null, COUNTRIES[countryCode].countryName)))))));
 };
 
@@ -14816,7 +15116,7 @@ const PhoneField = _ref => {
     }
   };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
-    className: styles$8['phone-field']
+    className: styles$a['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -14827,18 +15127,186 @@ const PhoneField = _ref => {
       space: 4,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons[`fi-${selectedCountry.toLocaleLowerCase()}`], styles$8['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons[`fi-${selectedCountry.toLocaleLowerCase()}`], styles$a['country-selector__flag'])
     }), React__default.createElement("span", null, "+", getCountryCallingCode(selectedCountry))) : `+${getCountryCallingCode(selectedCountry)}`
   }, React__default.createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames(inputProps.className, styles$8['phone-field__input'], {
-      [styles$8['phone-field__input--with-square-borders']]: !disabledCountry
+    className: classnames(inputProps.className, styles$a['phone-field__input'], {
+      [styles$a['phone-field__input--with-square-borders']]: !disabledCountry
     }),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
+var styles$8 = {"color-overlay":"_LTVgG","color-overlay__color-display-container":"_R1mls","color-overlay__color-display-circle":"_M-8rP","color-overlay__color-display-circle--selected":"_o92fv","color-overlay__color-display-circle--focused":"_QBSCQ"};
+
+const SEQUENTIAL_COLORS = ['seq-18', 'seq-4', 'seq-7', 'seq-16', 'seq-12', 'seq-6', 'seq-9', 'seq-3', 'seq-11', 'seq-1', 'seq-13', 'seq-10', 'seq-14', 'seq-8', 'seq-19', 'seq-20', 'seq-2', 'seq-17', 'seq-15', 'seq-5'];
+
+const useColorKeyboardNavigation = selectedColor => {
+  const [selectedColorIndex, setSelectedColorIndex] = useState(null);
+  const amountOfColors = SEQUENTIAL_COLORS.length;
+  const handleArrowNavigation = event => {
+    const keyPressed = event.key;
+    const currentIndex = selectedColorIndex !== null ? selectedColorIndex : SEQUENTIAL_COLORS.findIndex(color => color === selectedColor);
+    switch (keyPressed) {
+      case 'ArrowRight':
+      case 'Tab':
+        const nextIndex = (currentIndex + 1) % amountOfColors;
+        setSelectedColorIndex(nextIndex);
+        break;
+      case 'ArrowLeft':
+        const prevIndex = (currentIndex - 1 + amountOfColors) % amountOfColors;
+        setSelectedColorIndex(prevIndex);
+        break;
+      case 'ArrowDown':
+        const downIndex = (currentIndex + 5) % amountOfColors;
+        setSelectedColorIndex(downIndex);
+        break;
+      case 'ArrowUp':
+        const upIndex = (currentIndex - 5 + amountOfColors) % amountOfColors;
+        setSelectedColorIndex(upIndex);
+        break;
+    }
+    event.preventDefault();
+  };
+  useKeyPress(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab'], handleArrowNavigation);
+  return {
+    selectedColorIndex,
+    setSelectedColorIndex
+  };
+};
+
+const ColorsOverlay = ({
+  onClose,
+  triggerRef,
+  selectedColor,
+  onSelect
+}) => {
+  var _triggerRef$current;
+  const overlayRef = useRef(null);
+  const GAP = 8; // Gap between the trigger and the overlay
+  const triggerRect = (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.getBoundingClientRect();
+  const overlayStyle = triggerRect ? {
+    top: triggerRect.bottom + window.scrollY + GAP,
+    left: triggerRect.left + window.scrollX
+  } : {
+    display: 'none'
+  };
+  const {
+    selectedColorIndex,
+    setSelectedColorIndex
+  } = useColorKeyboardNavigation(selectedColor || '');
+  useOnClickOutside(overlayRef, onClose);
+  const selectedColorByIndex = selectedColorIndex !== null ? SEQUENTIAL_COLORS[selectedColorIndex] : undefined;
+  const handleEnterPress = useCallback(() => {
+    if (selectedColorByIndex) {
+      onSelect(selectedColorByIndex);
+    }
+  }, [selectedColorByIndex, onSelect]);
+  useKeyPress(['Escape'], onClose);
+  useKeyPress(['Enter'], handleEnterPress);
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    style: overlayStyle,
+    ref: overlayRef,
+    className: styles$8['color-overlay'],
+    role: "dialog"
+  }, SEQUENTIAL_COLORS.map((color, index) => React__default.createElement(ColorDisplay, {
+    key: color,
+    color: color,
+    isSelected: color === selectedColor,
+    isFocused: index === selectedColorIndex,
+    onClick: () => onSelect(color),
+    onHover: () => setSelectedColorIndex(null)
+  }))));
+};
+const ColorDisplay = ({
+  color,
+  isSelected,
+  isFocused,
+  onClick,
+  onHover
+}) => React__default.createElement("button", {
+  className: styles$8['color-overlay__color-display-container'],
+  onClick: () => onClick(color)
+}, React__default.createElement("div", {
+  className: classnames(styles$8['color-overlay__color-display-circle'], {
+    [styles$8['color-overlay__color-display-circle--selected']]: isSelected,
+    [styles$8['color-overlay__color-display-circle--focused']]: isFocused
+  }),
+  onMouseEnter: onHover,
+  style: {
+    backgroundColor: COLORS[color]
+  }
+}));
+
+var styles$7 = {"color-swatch":"_UUuiJ"};
+
+const ColorSwatch = ({
+  color
+}) => {
+  return React__default.createElement("div", {
+    className: styles$7['color-swatch'],
+    style: {
+      backgroundColor: color
+    }
+  });
+};
+
+const ColorFieldElement = (props, ref) => {
+  const {
+    inputProps,
+    fieldProps
+  } = useTextField(_extends({}, props, {
+    ref
+  }));
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const colorKeys = Object.keys(COLORS);
+  const getCurrentColor = () => {
+    if (inputProps.value && colorKeys.includes(inputProps.value)) {
+      return COLORS[inputProps.value];
+    }
+    return inputProps.value || 'transparent';
+  };
+  return React__default.createElement(Fragment, null, React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: React__default.createElement(ColorSwatch, {
+      color: getCurrentColor()
+    }),
+    suffix: React__default.createElement(IconChevronDown, {
+      size: "medium"
+    })
+  }, React__default.createElement("input", _extends({}, inputProps, {
+    readOnly: true,
+    onClick: () => {
+      if (triggerRef.current) {
+        setIsOpen(prev => !prev);
+      }
+    },
+    ref: triggerRef,
+    value: "",
+    onKeyDown: e => {
+      if (e.key === 'Enter' && !isOpen) {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+    }
+  })))), isOpen && React__default.createElement(ColorsOverlay, {
+    onClose: () => setIsOpen(false),
+    triggerRef: triggerRef,
+    selectedColor: inputProps.value,
+    onSelect: color => {
+      inputProps.onChange({
+        target: {
+          value: color
+        }
+      });
+      setIsOpen(false);
+    }
+  }));
+};
+const ColorField = forwardRef(ColorFieldElement);
+
 var styles$6 = {"avatar":"_V1U8v","avatar__container":"_peAaI","avatar--small":"_9g-tn","avatar__badge":"_uViot","avatar--medium":"_vNXJW","avatar--large":"_9ZKAB","avatar--extra-large":"_uv14Y"};
 
 var styles$5 = {"avatar-image":"_iDN1j"};
@@ -15313,5 +15781,5 @@ const EmptyState = props => {
   return emptyStateContainer;
 };
 
-export { Accordion, ActionList, ActionListItem, AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar, CalloutCard, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconClockExclamation, IconClockRewind, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDollarSign, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFaceSmileRelaxed, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandHoldingDollar, IconHandPointRight, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMedal, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconSparkle, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconThumbsDown, IconThumbsUp, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, MicroBanner, Modal, ModalBody, ModalFooter, MultiSelectField, NumberField, Page, PageLayout, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
+export { Accordion, ActionList, ActionListItem, AsyncSelectField, Avatar, Badge, Bold, BreadcrumbItem, Breadcrumbs, Button, COLORS, Calendar, CalloutCard, Card, CheckboxField, Chip, CircularProgress, ColorField, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal, IconAnalytics, IconArrowDown, IconArrowDownWideShort, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircle, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleHalfStroke, IconClipboardList, IconClock, IconClockExclamation, IconClockRewind, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDollarSign, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFaceSmileRelaxed, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandHoldingDollar, IconHandPointRight, IconHandshake, IconHatChef, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMedal, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlateUtensils, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconSparkle, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconThumbsDown, IconThumbsUp, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, MicroBanner, Modal, ModalBody, ModalFooter, MultiSelectField, NumberField, Page, PageLayout, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
 //# sourceMappingURL=index.modern.mjs.map