@7shifts/sous-chef 3.89.5 → 3.90.0

package/dist/index.js

@@ -276,7 +276,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"};
 
 var usePositionStyles = function usePositionStyles(_ref) {
   var m = _ref.m,
@@ -317,7 +317,7 @@ var kebabize = function kebabize(str) {
   });
 };
 
-var _excluded$31 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
+var _excluded$33 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
 var getPositionProps = function getPositionProps(_ref) {
   var m = _ref.m,
     margin = _ref.margin,
@@ -329,7 +329,7 @@ var getPositionProps = function getPositionProps(_ref) {
     marginBottom = _ref.marginBottom,
     ml = _ref.ml,
     marginLeft = _ref.marginLeft,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$31);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$33);
   return {
     positionProps: {
       m: m,
@@ -363,7 +363,7 @@ var getDataProps = function getDataProps(props, config) {
   });
 };
 
-var _excluded$30 = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
+var _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
  */
@@ -388,14 +388,14 @@ var Flex = function Flex(_ref) {
     flexGrow = _ref.flexGrow,
     testId = _ref.testId,
     extraClass = _ref.extraClass,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$30);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$32);
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
-  var className = classnames__default["default"](styles$1q['flex'], extraClass, (_classNames = {}, _classNames[styles$1q['align-start']] = alignItems === 'flex-start', _classNames[styles$1q['align-end']] = alignItems === 'flex-end', _classNames[styles$1q['align-center']] = alignItems === 'center', _classNames[styles$1q['justify-start']] = justifyContent === 'start', _classNames[styles$1q['justify-end']] = justifyContent === 'end', _classNames[styles$1q['justify-center']] = justifyContent === 'center', _classNames[styles$1q['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1q['inline-flex']] = inlineFlex, _classNames));
+  var className = classnames__default["default"](styles$1t['flex'], extraClass, (_classNames = {}, _classNames[styles$1t['align-start']] = alignItems === 'flex-start', _classNames[styles$1t['align-end']] = alignItems === 'flex-end', _classNames[styles$1t['align-center']] = alignItems === 'center', _classNames[styles$1t['justify-start']] = justifyContent === 'start', _classNames[styles$1t['justify-end']] = justifyContent === 'end', _classNames[styles$1t['justify-center']] = justifyContent === 'center', _classNames[styles$1t['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1t['inline-flex']] = inlineFlex, _classNames));
   var items = React__default["default"].Children.toArray(children).filter(Boolean);
   var gap = typeof space === 'object' ? space.row + "px " + space.column + "px" : space;
   return React__default["default"].createElement("div", _extends({
@@ -411,7 +411,7 @@ var Flex = function Flex(_ref) {
     var _classNames2;
     return React__default["default"].createElement("div", {
       key: i,
-      className: classnames__default["default"](styles$1q['flex__item'], (_classNames2 = {}, _classNames2[styles$1q['flex__item--flexible']] = flexItems, _classNames2)),
+      className: classnames__default["default"](styles$1t['flex__item'], (_classNames2 = {}, _classNames2[styles$1t['flex__item--flexible']] = flexItems, _classNames2)),
       style: {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
       }
@@ -419,23 +419,23 @@ var Flex = function Flex(_ref) {
   }));
 };
 
-var _excluded$2$ = ["alignItems"];
+var _excluded$31 = ["alignItems"];
 /**
  * Layout component to easily stack elements up in a column.
  */
 var Stack = function Stack(_ref) {
   var _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2$);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$31);
   return React__namespace.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"};
 
-var _excluded$2_ = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
+var _excluded$30 = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
  * Used when you want to allow the user to turn some information ON and OFF.
  *
@@ -450,13 +450,13 @@ var Toggle = function Toggle(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     id = _ref.id,
     testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2_);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$30);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   return React__default["default"].createElement(Stack, {
     space: 8
   }, React__default["default"].createElement("label", _extends({}, dataProps, {
-    className: styles$1p['toggle']
+    className: styles$1s['toggle']
   }), React__default["default"].createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -465,11 +465,11 @@ var Toggle = function Toggle(_ref) {
     id: id,
     "data-testid": testId
   }), React__default["default"].createElement("span", {
-    className: styles$1p['toggle__switch']
+    className: styles$1s['toggle__switch']
   }), label && React__default["default"].createElement("span", {
-    className: styles$1p['toggle__label']
+    className: styles$1s['toggle__label']
   }, label)), caption && React__default["default"].createElement("span", {
-    className: styles$1p['toggle__caption']
+    className: styles$1s['toggle__caption']
   }, caption));
 };
 
@@ -489,7 +489,7 @@ var 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"};
 
 var Spinner = function Spinner(_ref) {
   var _classnames;
@@ -502,9 +502,9 @@ var Spinner = function Spinner(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'spinner' : _ref$testId;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1o['spinner--block']] = block, _classnames))
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1r['spinner--block']] = block, _classnames))
   }, React__default["default"].createElement("svg", {
-    className: styles$1o['spinner'],
+    className: styles$1r['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
@@ -579,7 +579,7 @@ var Spinner = function Spinner(_ref) {
     offset: "1",
     stopColor: "#760088"
   }))), React__default["default"].createElement("circle", {
-    className: classnames__default["default"](styles$1o['path'], styles$1o["path--" + theme]),
+    className: classnames__default["default"](styles$1r['path'], styles$1r["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -589,9 +589,9 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-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"};
 
 var TOOLTIP_THEME = {
   BLACK: 'black',
@@ -790,15 +790,15 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames__default["default"](styles$1m['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1m['tooltip-overlay--visible']] = isVisible, _classnames[styles$1m['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1m['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
+    className: classnames__default["default"](styles$1p['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1p['tooltip-overlay--visible']] = isVisible, _classnames[styles$1p['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1p['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
     onMouseEnter: onFocusIn,
     onMouseLeave: onFocusOut
   }, React__default["default"].createElement(Stack, {
     space: 8
   }, header && React__default["default"].createElement("div", {
-    className: styles$1m['tooltip-overlay__header']
+    className: styles$1p['tooltip-overlay__header']
   }, header), children)), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1m['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1m['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1m['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1m['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1m['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1m['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
+    className: classnames__default["default"](styles$1p['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1p['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1p['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1p['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1p['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1p['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
     }),
@@ -916,7 +916,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     }), overlayElement);
   }
   return React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1n['tooltip'])
+    className: classnames__default["default"](styles$1q['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -926,7 +926,7 @@ var isTooltipCompatible = function isTooltipCompatible(element) {
   return React__default["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"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -979,7 +979,7 @@ var COMPONENT_NAMES = {
   BUTTON: 'BUTTON'
 };
 
-var _excluded$2Z = ["children", "type", "theme", "disabled", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "id", "loading", "title", "href", "target", "testId", "size"],
+var _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"];
 var ButtonComponent = function ButtonComponent(_ref, ref) {
   var _classnames;
@@ -1004,7 +1004,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     target = _ref$target === void 0 ? BUTTON_TARGETS.SELF : _ref$target,
     testId = _ref.testId,
     size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2$);
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
@@ -1021,7 +1021,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames__default["default"](styles$1l['button'], (_classnames = {}, _classnames[styles$1l['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1l['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1l['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1l['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1l['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1l['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1l['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1l['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1l['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1l['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1l['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1l['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1l['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1l['button--loading']] = loading, _classnames[styles$1l['button--icon-only']] = isIconOnly, _classnames[styles$1l['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1l['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    className: classnames__default["default"](styles$1o['button'], (_classnames = {}, _classnames[styles$1o['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1o['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1o['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1o['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1o['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1o['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1o['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1o['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1o['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1o['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1o['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1o['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1o['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1o['button--loading']] = loading, _classnames[styles$1o['button--icon-only']] = isIconOnly, _classnames[styles$1o['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1o['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -1034,7 +1034,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default["default"].createElement("div", {
-    className: styles$1l['button__spinner']
+    className: styles$1o['button__spinner']
   }, React__default["default"].createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1044,7 +1044,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default["default"].createElement("div", {
-      className: styles$1l['disabled-button-wrapper']
+      className: styles$1o['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -1128,14 +1128,14 @@ var useIsInsideComponent = function useIsInsideComponent(parentComponentName) {
   return componentName === parentComponentName;
 };
 
-var _excluded$2Y = ["testId", "size", "color", "style"];
+var _excluded$2_ = ["testId", "size", "color", "style"];
 var IconInfoCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-info-circle' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2_);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1158,14 +1158,14 @@ var IconInfoCircle = React.forwardRef(function (_ref, ref) {
 });
 IconInfoCircle.displayName = 'IconInfoCircle';
 
-var _excluded$2X = ["testId", "size", "color", "style"];
+var _excluded$2Z = ["testId", "size", "color", "style"];
 var IconAnalytics = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-analytics' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Z);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1188,14 +1188,14 @@ var IconAnalytics = React.forwardRef(function (_ref, ref) {
 });
 IconAnalytics.displayName = 'IconAnalytics';
 
-var _excluded$2W = ["testId", "size", "color", "style"];
+var _excluded$2Y = ["testId", "size", "color", "style"];
 var IconArrowDownWideShort = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-down-wide-short' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Y);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1216,14 +1216,14 @@ var IconArrowDownWideShort = React.forwardRef(function (_ref, ref) {
 });
 IconArrowDownWideShort.displayName = 'IconArrowDownWideShort';
 
-var _excluded$2V = ["testId", "size", "color", "style"];
+var _excluded$2X = ["testId", "size", "color", "style"];
 var IconArrowDown = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-down' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2V);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2X);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1246,14 +1246,14 @@ var IconArrowDown = React.forwardRef(function (_ref, ref) {
 });
 IconArrowDown.displayName = 'IconArrowDown';
 
-var _excluded$2U = ["testId", "size", "color", "style"];
+var _excluded$2W = ["testId", "size", "color", "style"];
 var IconArrowLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-left' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2W);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1276,14 +1276,14 @@ var IconArrowLeft = React.forwardRef(function (_ref, ref) {
 });
 IconArrowLeft.displayName = 'IconArrowLeft';
 
-var _excluded$2T = ["testId", "size", "color", "style"];
+var _excluded$2V = ["testId", "size", "color", "style"];
 var IconArrowRight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-right' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2V);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1306,14 +1306,14 @@ var IconArrowRight = React.forwardRef(function (_ref, ref) {
 });
 IconArrowRight.displayName = 'IconArrowRight';
 
-var _excluded$2S = ["testId", "size", "color", "style"];
+var _excluded$2U = ["testId", "size", "color", "style"];
 var IconArrowToTop = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-to-top' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2U);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1334,14 +1334,14 @@ var IconArrowToTop = React.forwardRef(function (_ref, ref) {
 });
 IconArrowToTop.displayName = 'IconArrowToTop';
 
-var _excluded$2R = ["testId", "size", "color", "style"];
+var _excluded$2T = ["testId", "size", "color", "style"];
 var IconArrowTurnDownRight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-turn-down-right' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2T);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1370,14 +1370,14 @@ var IconArrowTurnDownRight = React.forwardRef(function (_ref, ref) {
 });
 IconArrowTurnDownRight.displayName = 'IconArrowTurnDownRight';
 
-var _excluded$2Q = ["testId", "size", "color", "style"];
+var _excluded$2S = ["testId", "size", "color", "style"];
 var IconArrowUp = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-arrow-up' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2S);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1400,14 +1400,14 @@ var IconArrowUp = React.forwardRef(function (_ref, ref) {
 });
 IconArrowUp.displayName = 'IconArrowUp';
 
-var _excluded$2P = ["testId", "size", "color", "style"];
+var _excluded$2R = ["testId", "size", "color", "style"];
 var IconAward = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-award' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2R);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1430,14 +1430,14 @@ var IconAward = React.forwardRef(function (_ref, ref) {
 });
 IconAward.displayName = 'IconAward';
 
-var _excluded$2O = ["testId", "size", "color", "style"];
+var _excluded$2Q = ["testId", "size", "color", "style"];
 var IconAwfulMonochromatic = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-awful-monochromatic' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2O);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2Q);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1490,14 +1490,14 @@ var IconAwfulMonochromatic = React.forwardRef(function (_ref, ref) {
 });
 IconAwfulMonochromatic.displayName = 'IconAwfulMonochromatic';
 
-var _excluded$2N = ["testId", "size", "color", "style"];
+var _excluded$2P = ["testId", "size", "color", "style"];
 var IconAwful = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-awful' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2P);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1538,14 +1538,14 @@ var IconAwful = React.forwardRef(function (_ref, ref) {
 });
 IconAwful.displayName = 'IconAwful';
 
-var _excluded$2M = ["testId", "size", "color", "style"];
+var _excluded$2O = ["testId", "size", "color", "style"];
 var IconBadMonochromatic = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bad-monochromatic' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2M);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2O);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1584,14 +1584,14 @@ var IconBadMonochromatic = React.forwardRef(function (_ref, ref) {
 });
 IconBadMonochromatic.displayName = 'IconBadMonochromatic';
 
-var _excluded$2L = ["testId", "size", "color", "style"];
+var _excluded$2N = ["testId", "size", "color", "style"];
 var IconBad = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bad' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2N);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1618,14 +1618,14 @@ var IconBad = React.forwardRef(function (_ref, ref) {
 });
 IconBad.displayName = 'IconBad';
 
-var _excluded$2K = ["testId", "size", "color", "style"];
+var _excluded$2M = ["testId", "size", "color", "style"];
 var IconBalanceScaleLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-balance-scale-left' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2M);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1653,14 +1653,14 @@ var IconBalanceScaleLeft = React.forwardRef(function (_ref, ref) {
 });
 IconBalanceScaleLeft.displayName = 'IconBalanceScaleLeft';
 
-var _excluded$2J = ["testId", "size", "color", "style"];
+var _excluded$2L = ["testId", "size", "color", "style"];
 var IconBalanceScale = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-balance-scale' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2L);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1688,14 +1688,14 @@ var IconBalanceScale = React.forwardRef(function (_ref, ref) {
 });
 IconBalanceScale.displayName = 'IconBalanceScale';
 
-var _excluded$2I = ["testId", "size", "color", "style"];
+var _excluded$2K = ["testId", "size", "color", "style"];
 var IconBan = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-ban' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2K);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1716,14 +1716,14 @@ var IconBan = React.forwardRef(function (_ref, ref) {
 });
 IconBan.displayName = 'IconBan';
 
-var _excluded$2H = ["testId", "size", "color", "style"];
+var _excluded$2J = ["testId", "size", "color", "style"];
 var IconBarsH = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bars-h' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2J);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1746,14 +1746,14 @@ var IconBarsH = React.forwardRef(function (_ref, ref) {
 });
 IconBarsH.displayName = 'IconBarsH';
 
-var _excluded$2G = ["testId", "size", "color", "style"];
+var _excluded$2I = ["testId", "size", "color", "style"];
 var IconBarsV = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bars-v' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2I);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1774,14 +1774,14 @@ var IconBarsV = React.forwardRef(function (_ref, ref) {
 });
 IconBarsV.displayName = 'IconBarsV';
 
-var _excluded$2F = ["testId", "size", "color", "style"];
+var _excluded$2H = ["testId", "size", "color", "style"];
 var IconBell = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bell' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2H);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1804,14 +1804,14 @@ var IconBell = React.forwardRef(function (_ref, ref) {
 });
 IconBell.displayName = 'IconBell';
 
-var _excluded$2E = ["testId", "size", "color", "style"];
+var _excluded$2G = ["testId", "size", "color", "style"];
 var IconBirthdayCake = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-birthday-cake' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2G);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1832,14 +1832,14 @@ var IconBirthdayCake = React.forwardRef(function (_ref, ref) {
 });
 IconBirthdayCake.displayName = 'IconBirthdayCake';
 
-var _excluded$2D = ["testId", "size", "color", "style"];
+var _excluded$2F = ["testId", "size", "color", "style"];
 var IconBold = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bold' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2F);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1860,14 +1860,14 @@ var IconBold = React.forwardRef(function (_ref, ref) {
 });
 IconBold.displayName = 'IconBold';
 
-var _excluded$2C = ["testId", "size", "color", "style"];
+var _excluded$2E = ["testId", "size", "color", "style"];
 var IconBolt = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bolt' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2E);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1895,14 +1895,14 @@ var IconBolt = React.forwardRef(function (_ref, ref) {
 });
 IconBolt.displayName = 'IconBolt';
 
-var _excluded$2B = ["testId", "size", "color", "style"];
+var _excluded$2D = ["testId", "size", "color", "style"];
 var IconBook = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-book' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2D);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1925,14 +1925,14 @@ var IconBook = React.forwardRef(function (_ref, ref) {
 });
 IconBook.displayName = 'IconBook';
 
-var _excluded$2A = ["testId", "size", "color", "style"];
+var _excluded$2C = ["testId", "size", "color", "style"];
 var IconBriefcase = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-briefcase' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2C);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1953,14 +1953,14 @@ var IconBriefcase = React.forwardRef(function (_ref, ref) {
 });
 IconBriefcase.displayName = 'IconBriefcase';
 
-var _excluded$2z = ["testId", "size", "color", "style"];
+var _excluded$2B = ["testId", "size", "color", "style"];
 var IconBullseyeArrow = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-bullseye-arrow' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2B);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -1983,14 +1983,14 @@ var IconBullseyeArrow = React.forwardRef(function (_ref, ref) {
 });
 IconBullseyeArrow.displayName = 'IconBullseyeArrow';
 
-var _excluded$2y = ["testId", "size", "color", "style"];
+var _excluded$2A = ["testId", "size", "color", "style"];
 var IconCalculator = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calculator' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2A);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2013,14 +2013,14 @@ var IconCalculator = React.forwardRef(function (_ref, ref) {
 });
 IconCalculator.displayName = 'IconCalculator';
 
-var _excluded$2x = ["testId", "size", "color", "style"];
+var _excluded$2z = ["testId", "size", "color", "style"];
 var IconCalendarAlt = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-alt' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2z);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2043,14 +2043,14 @@ var IconCalendarAlt = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarAlt.displayName = 'IconCalendarAlt';
 
-var _excluded$2w = ["testId", "size", "color", "style"];
+var _excluded$2y = ["testId", "size", "color", "style"];
 var IconCalendarCheck = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-check' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2y);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2073,14 +2073,14 @@ var IconCalendarCheck = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarCheck.displayName = 'IconCalendarCheck';
 
-var _excluded$2v = ["testId", "size", "color", "style"];
+var _excluded$2x = ["testId", "size", "color", "style"];
 var IconCalendarDay = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-day' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2x);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2108,14 +2108,14 @@ var IconCalendarDay = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarDay.displayName = 'IconCalendarDay';
 
-var _excluded$2u = ["testId", "size", "color", "style"];
+var _excluded$2w = ["testId", "size", "color", "style"];
 var IconCalendarExclamation = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-exclamation' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2w);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2136,14 +2136,14 @@ var IconCalendarExclamation = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarExclamation.displayName = 'IconCalendarExclamation';
 
-var _excluded$2t = ["testId", "size", "color", "style"];
+var _excluded$2v = ["testId", "size", "color", "style"];
 var IconCalendarStar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-star' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2164,14 +2164,14 @@ var IconCalendarStar = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarStar.displayName = 'IconCalendarStar';
 
-var _excluded$2s = ["testId", "size", "color", "style"];
+var _excluded$2u = ["testId", "size", "color", "style"];
 var IconCalendarTomorrow = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar-tomorrow' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2u);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2201,14 +2201,14 @@ var IconCalendarTomorrow = React.forwardRef(function (_ref, ref) {
 });
 IconCalendarTomorrow.displayName = 'IconCalendarTomorrow';
 
-var _excluded$2r = ["testId", "size", "color", "style"];
+var _excluded$2t = ["testId", "size", "color", "style"];
 var IconCalendar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-calendar' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2t);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2231,14 +2231,14 @@ var IconCalendar = React.forwardRef(function (_ref, ref) {
 });
 IconCalendar.displayName = 'IconCalendar';
 
-var _excluded$2q = ["testId", "size", "color", "style"];
+var _excluded$2s = ["testId", "size", "color", "style"];
 var IconCameraSlash = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-camera-slash' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2s);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2262,14 +2262,14 @@ var IconCameraSlash = React.forwardRef(function (_ref, ref) {
 });
 IconCameraSlash.displayName = 'IconCameraSlash';
 
-var _excluded$2p = ["testId", "size", "color", "style"];
+var _excluded$2r = ["testId", "size", "color", "style"];
 var IconCamera = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-camera' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2r);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2290,14 +2290,14 @@ var IconCamera = React.forwardRef(function (_ref, ref) {
 });
 IconCamera.displayName = 'IconCamera';
 
-var _excluded$2o = ["testId", "size", "color", "style"];
+var _excluded$2q = ["testId", "size", "color", "style"];
 var IconCashRegister = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-cash-register' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2318,14 +2318,14 @@ var IconCashRegister = React.forwardRef(function (_ref, ref) {
 });
 IconCashRegister.displayName = 'IconCashRegister';
 
-var _excluded$2n = ["testId", "size", "color", "style"];
+var _excluded$2p = ["testId", "size", "color", "style"];
 var IconChartBar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-chart-bar' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2348,14 +2348,14 @@ var IconChartBar = React.forwardRef(function (_ref, ref) {
 });
 IconChartBar.displayName = 'IconChartBar';
 
-var _excluded$2m = ["testId", "size", "color", "style"];
+var _excluded$2o = ["testId", "size", "color", "style"];
 var IconCheckCircleIncomplete = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-check-circle-incomplete' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2376,14 +2376,42 @@ var IconCheckCircleIncomplete = React.forwardRef(function (_ref, ref) {
 });
 IconCheckCircleIncomplete.displayName = 'IconCheckCircleIncomplete';
 
-var _excluded$2l = ["testId", "size", "color", "style"];
+var _excluded$2n = ["testId", "size", "color", "style"];
+var IconCheckCircle = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-check-circle' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["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["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';
+
+var _excluded$2m = ["testId", "size", "color", "style"];
 var IconCheck = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-check' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2406,14 +2434,14 @@ var IconCheck = React.forwardRef(function (_ref, ref) {
 });
 IconCheck.displayName = 'IconCheck';
 
-var _excluded$2k = ["testId", "size", "color", "style"];
+var _excluded$2l = ["testId", "size", "color", "style"];
 var IconChevronDown = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-chevron-down' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2l);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2436,14 +2464,14 @@ var IconChevronDown = React.forwardRef(function (_ref, ref) {
 });
 IconChevronDown.displayName = 'IconChevronDown';
 
-var _excluded$2j = ["testId", "size", "color", "style"];
+var _excluded$2k = ["testId", "size", "color", "style"];
 var IconChevronLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-chevron-left' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2k);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2466,14 +2494,14 @@ var IconChevronLeft = React.forwardRef(function (_ref, ref) {
 });
 IconChevronLeft.displayName = 'IconChevronLeft';
 
-var _excluded$2i = ["testId", "size", "color", "style"];
+var _excluded$2j = ["testId", "size", "color", "style"];
 var IconChevronRight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-chevron-right' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2496,14 +2524,14 @@ var IconChevronRight = React.forwardRef(function (_ref, ref) {
 });
 IconChevronRight.displayName = 'IconChevronRight';
 
-var _excluded$2h = ["testId", "size", "color", "style"];
+var _excluded$2i = ["testId", "size", "color", "style"];
 var IconChevronUp = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'icon-chevron-up' : _ref$testId,
     size = _ref.size,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
   var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
   var styleProps = {
     size: !size && isInsideButton ? 'medium' : size,
@@ -2526,6 +2554,34 @@ var IconChevronUp = React.forwardRef(function (_ref, ref) {
 });
 IconChevronUp.displayName = 'IconChevronUp';
 
+var _excluded$2h = ["testId", "size", "color", "style"];
+var IconCircleHalfStroke = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-circle-half-stroke' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["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["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';
+
 var _excluded$2g = ["testId", "size", "color", "style"];
 var IconClipboardList = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
@@ -6151,9 +6207,9 @@ var IconWrench = React.forwardRef(function (_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"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
   var _classNames;
@@ -6161,9 +6217,9 @@ var KeyboardKey = function KeyboardKey(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1j['keyboard-key'], (_classNames = {}, _classNames[styles$1j['keyboard-key--light']] = theme === 'light', _classNames))
+    className: classnames__default["default"](styles$1m['keyboard-key'], (_classNames = {}, _classNames[styles$1m['keyboard-key--light']] = theme === 'light', _classNames))
   }, React__default["default"].createElement("span", {
-    className: styles$1j['keyboard-key__character']
+    className: styles$1m['keyboard-key__character']
   }, children));
 };
 
@@ -6369,7 +6425,7 @@ var PaginationControls = function PaginationControls(_ref) {
     }
   });
   return React__default["default"].createElement("div", _extends({}, dataProps, {
-    className: styles$1k['pagination-controls'],
+    className: styles$1n['pagination-controls'],
     "data-testid": testId
   }), React__default["default"].createElement(Button, {
     disabled: !hasPrevious,
@@ -6399,76 +6455,7 @@ var 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.
- */
-var useContainerBackgroundColorCheck = function useContainerBackgroundColorCheck(_ref) {
-  var ref = _ref.ref,
-    shouldCheck = _ref.shouldCheck;
-  var _useState = React.useState(),
-    background = _useState[0],
-    setBackground = _useState[1];
-  // Walk up the DOM tree to find the first ancestor with a
-  // non-transparent background color. Fallback to body color.
-  var getEffectiveBackgroundColor = function getEffectiveBackgroundColor(el) {
-    var node = el == null ? void 0 : el.parentElement;
-    while (node) {
-      var bg = window.getComputedStyle(node).getPropertyValue('background-color');
-      // "transparent" or rgba(..., 0) should be ignored
-      var 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;
-    }
-    var bodyBg = window.getComputedStyle(document.body).getPropertyValue('background-color');
-    return bodyBg;
-  };
-  React.useLayoutEffect(function () {
-    var element = ref.current;
-    if (!shouldCheck || !element) {
-      return;
-    }
-    var bg = getEffectiveBackgroundColor(element);
-    var rgb = bg.replace(/^rgba?\(|\s+|\)$/g, '').split(',').slice(0, 3).map(Number);
-    var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
-    setBackground(luminance < 128 ? 'dark' : 'light');
-  }, [ref, shouldCheck]);
-  return background;
-};
-
-var TIME_FORMAT = {
-  FORMAT_24H: '24h',
-  FORMAT_AMPM: 'ampm'
-};
-
-var 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,
-  // Default theme is light, but it will be overridden by the useTheme hook in the SousChefProvider
-  theme: 'light'
-};
-var ProviderConfigContext = React.createContext(initialValue$1);
-var useProviderConfig = function useProviderConfig() {
-  var context = React.useContext(ProviderConfigContext);
-  if (!context) {
-    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
-  }
-  return context;
-};
+var styles$1l = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 var _excluded$t = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -6476,28 +6463,16 @@ var Link = function Link(_ref) {
   var href = _ref.href,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? LINK_TARGET.BLANK : _ref$target,
-    theme = _ref.theme,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? LINK_THEME.PRIMARY : _ref$theme,
     onClick = _ref.onClick,
     children = _ref.children,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var ref = React__default["default"].useRef(null);
-  var _useProviderConfig = useProviderConfig(),
-    appTheme = _useProviderConfig.theme;
-  var background = useContainerBackgroundColorCheck({
-    ref: ref,
-    // It only needs to check the background when theme is not provided
-    shouldCheck: !theme
-  });
-  var defaultTheme = LINK_THEME.PRIMARY;
-  // If it is light mode and the background is dark we want to use the contrast theme to make sure the link is visible
-  if (appTheme === 'light' && background === 'dark') {
-    defaultTheme = LINK_THEME.CONTRAST;
-  }
-  var currentTheme = theme || defaultTheme;
   return React__default["default"].createElement("a", _extends({}, dataProps, {
-    className: classnames__default["default"](styles$1i['link'], (_classNames = {}, _classNames[styles$1i['link--primary']] = currentTheme === LINK_THEME.PRIMARY, _classNames[styles$1i['link--contrast']] = currentTheme === LINK_THEME.CONTRAST, _classNames)),
+    className: classnames__default["default"](styles$1l['link'], (_classNames = {}, _classNames[styles$1l['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1l['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
     target: target,
     onClick: onClick,
@@ -6520,7 +6495,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default["default"].useContext(DropdownContext);
 };
 
-var styles$1h = {"dropdown-pane":"_sp-pT"};
+var styles$1k = {"dropdown-pane":"_sp-pT"};
 
 var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
@@ -6658,7 +6633,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   useKeyPress(['Escape'], onToggleDropdown);
   var overflow = maxHeight ? 'auto' : undefined;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1h['dropdown-pane'], (_classNames = {}, _classNames[styles$1h['dropdown-pane--with-padding']] = true, _classNames)),
+    className: classnames__default["default"](styles$1k['dropdown-pane'], (_classNames = {}, _classNames[styles$1k['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -6687,7 +6662,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$1g = {"dropdown__trigger":"_AktVc"};
+var styles$1j = {"dropdown__trigger":"_AktVc"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -6698,7 +6673,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1f = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1i = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -6751,7 +6726,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default["default"].createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames__default["default"](styles$1f['label'], (_classNames = {}, _classNames[styles$1f['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames__default["default"](styles$1i['label'], (_classNames = {}, _classNames[styles$1i['label--truncate']] = shouldTruncate, _classNames))
   }, children);
   if (showTooltip) {
     return React__default["default"].createElement(Tooltip, {
@@ -6762,18 +6737,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$1e = {"caption":"_Qrxg5"};
+var styles$1h = {"caption":"_Qrxg5"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
     children = _ref.children;
   return React__default["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"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -6781,7 +6756,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     testId = _ref.testId;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$1d['error-message'],
+    className: styles$1g['error-message'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     space: 8,
@@ -6818,7 +6793,7 @@ var 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"};
 
 var _excluded$s = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -6844,7 +6819,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$1c['text'], (_classnames = {}, _classnames[styles$1c['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1c['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1c['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1c['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1c['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1c['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1c['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1c['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1c['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1c['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1c['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1c['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1c['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1c['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
+    className: classnames__default["default"](styles$1f['text'], (_classnames = {}, _classnames[styles$1f['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1f['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1f['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1f['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1f['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1f['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1f['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1f['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1f['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1f['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1f['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1f['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1f['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1f['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
     'data-testid': testId
   }, dataProps, other, {
     ref: ref
@@ -6859,21 +6834,21 @@ var Text = React.forwardRef(TextComponent);
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1c['text--bold'], styles$1c['text'])
+    className: classnames__default["default"](styles$1f['text--bold'], styles$1f['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1c['text--underline'], styles$1c['text'])
+    className: classnames__default["default"](styles$1f['text--underline'], styles$1f['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1c['text--italic'], styles$1c['text'])
+    className: classnames__default["default"](styles$1f['text--italic'], styles$1f['text'])
   }, children);
 };
 
@@ -7022,7 +6997,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
   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"};
 
 var _excluded$q = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 var useTextField = function useTextField(_ref) {
@@ -7062,7 +7037,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1b['text-field'], (_classnames = {}, _classnames[styles$1b['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1e['text-field'], (_classnames = {}, _classnames[styles$1e['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -7092,7 +7067,7 @@ var useTextField = function 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"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -7127,20 +7102,25 @@ var AffixContainer = function AffixContainer(_ref) {
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  var classes = classnames__default["default"](styles$1a['affix-container'], (_classnames = {}, _classnames[styles$1a['affix-container--prefixed']] = hasPrefix, _classnames[styles$1a['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames__default["default"](styles$1d['affix-container'], (_classnames = {}, _classnames[styles$1d['affix-container--prefixed']] = hasPrefix, _classnames[styles$1d['affix-container--suffixed']] = hasSuffix, _classnames));
   return React__default["default"].createElement("div", {
     className: classes,
     ref: container,
     "data-testid": testId
   }, hasPrefix && React__default["default"].createElement("div", {
-    className: styles$1a['prefix'],
+    className: styles$1d['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default["default"].createElement("div", {
-    className: styles$1a['suffix'],
+    className: styles$1d['suffix'],
     ref: suffixElement
   }, suffix));
 };
 
+var TIME_FORMAT = {
+  FORMAT_24H: '24h',
+  FORMAT_AMPM: 'ampm'
+};
+
 var TimeFieldInput = function TimeFieldInput(_ref) {
   var inputProps = _ref.inputProps,
     allOtherProps = _ref.allOtherProps,
@@ -7340,7 +7320,7 @@ var Dropdown = function Dropdown(_ref) {
       paneRef: paneRef
     }
   }, triggerIsKnownButton ? React__default["default"].cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default["default"].createElement("button", _extends({}, triggerProps, {
-    className: styles$1g['dropdown__trigger'],
+    className: styles$1j['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default["default"].createElement(DropdownPane, {
@@ -7354,7 +7334,7 @@ var Dropdown = function Dropdown(_ref) {
   }, 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"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -7401,16 +7381,16 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, li
   var _useState = React.useState(null),
     focusedItem = _useState[0],
     setFocusedItem = _useState[1];
-  var focusOnNextItem = function focusOnNextItem(callback) {
+  var focusOnNextItem = React.useCallback(function (callback) {
     var nextFocusItem = findNextActiveIndex(listItems, focusedItem);
     setFocusedItem(nextFocusItem);
     callback(nextFocusItem);
-  };
-  var focusOnPrevItem = function focusOnPrevItem(callback) {
+  }, [listItems, focusedItem]);
+  var focusOnPrevItem = React.useCallback(function (callback) {
     var prevFocusItem = findPreviousEnabledIndex(listItems, focusedItem || 0);
     setFocusedItem(prevFocusItem);
     callback(prevFocusItem);
-  };
+  }, [listItems, focusedItem]);
   var setFocusOnItem = function setFocusOnItem(index) {
     if (index < 0) {
       setFocusedItem(null);
@@ -7422,31 +7402,77 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, li
     setFocusedItem(index);
   };
   var handleKeyPress = React.useCallback(function (event) {
-    if (event.key === 'ArrowDown') {
+    var getSubmenuStatus = function getSubmenuStatus() {
+      var _listReference$curren;
+      if (focusedItem === null) {
+        return 'closed';
+      }
+      var 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';
+    };
+    var submenuStatus = getSubmenuStatus();
+    if (event.key === 'ArrowDown' && submenuStatus === 'closed') {
       focusOnNextItem(function (focusItem) {
         return actions == null || actions.onNavigate == null ? void 0 : actions.onNavigate(focusItem);
       });
     }
-    if (event.key === 'ArrowUp') {
+    if (event.key === 'ArrowUp' && submenuStatus === 'closed') {
       focusOnPrevItem(function (focusItem) {
         return actions == null || actions.onNavigate == null ? void 0 : actions.onNavigate(focusItem);
       });
     }
+    if (event.key === 'ArrowRight' && focusedItem !== null) {
+      var submenu = listItems[focusedItem].submenu;
+      if (submenu) {
+        var _listReference$curren2, _itemElement$firstEle;
+        var 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) {
+      var _submenu = listItems[focusedItem].submenu;
+      if (_submenu) {
+        var _listReference$curren3;
+        var _itemElement = (_listReference$curren3 = listReference.current) == null ? void 0 : _listReference$curren3.children.item(focusedItem);
+        var 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;
       var _listItems$focusedIte = listItems[focusedItem],
         onClick = _listItems$focusedIte.onClick,
-        href = _listItems$focusedIte.href;
+        href = _listItems$focusedIte.href,
+        _submenu2 = _listItems$focusedIte.submenu;
       onClick && onClick(event);
-      if (href && listReference.current) {
-        var _listReference$curren;
-        var linkItem = (_listReference$curren = listReference.current.children.item(focusedItem)) == null ? void 0 : _listReference$curren.querySelector('a');
-        linkItem && linkItem.click();
+      var _itemElement2 = (_listReference$curren4 = listReference.current) == null ? void 0 : _listReference$curren4.children.item(focusedItem);
+      if (_submenu2) {
+        var _itemElement2$firstEl;
+        _itemElement2 == null || (_itemElement2$firstEl = _itemElement2.firstElementChild) == null || _itemElement2$firstEl.click();
+      } else {
+        var _itemElement2$firstEl2;
+        if (href && listReference.current) {
+          var _listReference$curren5;
+          var linkItem = (_listReference$curren5 = listReference.current.children.item(focusedItem)) == null ? void 0 : _listReference$curren5.querySelector('a');
+          linkItem && linkItem.click();
+        }
+        if ((_itemElement2 == null || (_itemElement2$firstEl2 = _itemElement2.firstElementChild) == null ? void 0 : _itemElement2$firstEl2.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: focusedItem,
     setFocusOnItem: setFocusOnItem
@@ -7463,17 +7489,139 @@ var checkIsComponent = function checkIsComponent(element, config) {
   return isComponent;
 };
 
-var styles$18 = {"dropdown-list-divider":"_ISJ4M"};
+var styles$1b = {"dropdown-list-divider":"_ISJ4M"};
 
 var DropdownListDivider = function DropdownListDivider(_ref) {
   var testId = _ref.testId;
   return React__default["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"};
+
+var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    direction = _ref.direction,
+    openSubmenu = _ref.openSubmenu,
+    position = _ref.position;
+  var DEFAULT_POSITION = {
+    top: -9999,
+    left: -9999,
+    visibility: 'hidden'
+  };
+  return React__default["default"].createElement("div", {
+    className: styles$19['dropdown-submenu'],
+    "data-submenu-direction": direction,
+    style: position || DEFAULT_POSITION,
+    onMouseEnter: openSubmenu,
+    onFocus: openSubmenu,
+    ref: ref
+  }, children);
+});
+
+var useSubmenu = function useSubmenu(_ref) {
+  var hasSubmenu = _ref.hasSubmenu,
+    disabled = _ref.disabled;
+  var _useState = React.useState(false),
+    isSubmenuOpen = _useState[0],
+    setIsSubmenuOpen = _useState[1];
+  var _useState2 = React.useState('right'),
+    submenuDirection = _useState2[0],
+    setSubmenuDirection = _useState2[1];
+  var _useState3 = React.useState(null),
+    submenuPosition = _useState3[0],
+    setSubmenuPosition = _useState3[1];
+  var itemRef = React.useRef(null);
+  var submenuRef = React.useRef(null);
+  var closeSubmenuTimeoutRef = React.useRef(null);
+  var clearCloseSubmenuTimer = function clearCloseSubmenuTimer() {
+    if (closeSubmenuTimeoutRef.current !== null) {
+      window.clearTimeout(closeSubmenuTimeoutRef.current);
+      closeSubmenuTimeoutRef.current = null;
+    }
+  };
+  var scheduleCloseSubmenu = React.useCallback(function () {
+    clearCloseSubmenuTimer();
+    closeSubmenuTimeoutRef.current = window.setTimeout(function () {
+      setIsSubmenuOpen(false);
+    }, 120);
+  }, []);
+  var closePreviouslyOpenSubmenus = function closePreviouslyOpenSubmenus() {
+    var _itemRef$current;
+    var parent = (_itemRef$current = itemRef.current) == null || (_itemRef$current = _itemRef$current.parentElement) == null ? void 0 : _itemRef$current.parentElement;
+    if (!parent) {
+      return;
+    }
+    var openSubmenus = parent.querySelectorAll('[data-submenu-status="open"]');
+    if (openSubmenus.length > 0) {
+      var firstOpenSubmenu = openSubmenus[0];
+      firstOpenSubmenu.dispatchEvent(new CustomEvent('closeSubmenu', {
+        bubbles: false
+      }));
+    }
+  };
+  var setSubmenuOpen = function setSubmenuOpen() {
+    closePreviouslyOpenSubmenus();
+    if (!hasSubmenu || disabled) {
+      return;
+    }
+    clearCloseSubmenuTimer();
+    setIsSubmenuOpen(true);
+  };
+  var updateSubmenuPosition = React.useCallback(function () {
+    var _itemRef$current$pare;
+    if (!isSubmenuOpen || !itemRef.current || !submenuRef.current) {
+      return;
+    }
+    var VIEWPORT_PADDING = 8;
+    var SUBMENU_GAP = 16;
+    var itemRect = itemRef.current.getBoundingClientRect();
+    var submenuRect = submenuRef.current.getBoundingClientRect();
+    var 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');
+    var preferredDirection = inheritedDirection === 'left' ? 'left' : 'right';
+    var canOpenOnRight = itemRect.right + SUBMENU_GAP + submenuRect.width <= window.innerWidth - VIEWPORT_PADDING;
+    var canOpenOnLeft = itemRect.left - SUBMENU_GAP - submenuRect.width >= VIEWPORT_PADDING;
+    var shouldOpenOnRight = preferredDirection === 'right' ? canOpenOnRight : !canOpenOnLeft;
+    setSubmenuDirection(shouldOpenOnRight ? 'right' : 'left');
+    var left = shouldOpenOnRight ? itemRect.right + SUBMENU_GAP : Math.max(VIEWPORT_PADDING, itemRect.left - submenuRect.width - SUBMENU_GAP);
+    var maxTop = Math.max(VIEWPORT_PADDING, window.innerHeight - submenuRect.height - VIEWPORT_PADDING);
+    var top = Math.min(Math.max(VIEWPORT_PADDING, itemRect.top - VIEWPORT_PADDING), maxTop);
+    setSubmenuPosition({
+      top: top,
+      left: left
+    });
+  }, [isSubmenuOpen]);
+  React.useLayoutEffect(function () {
+    if (!isSubmenuOpen) {
+      return;
+    }
+    updateSubmenuPosition();
+    window.addEventListener('resize', updateSubmenuPosition);
+    window.addEventListener('scroll', updateSubmenuPosition, true);
+    return function () {
+      window.removeEventListener('resize', updateSubmenuPosition);
+      window.removeEventListener('scroll', updateSubmenuPosition, true);
+    };
+  }, [isSubmenuOpen, updateSubmenuPosition]);
+  React.useEffect(function () {
+    return function () {
+      clearCloseSubmenuTimer();
+    };
+  }, []);
+  return {
+    submenuPosition: submenuPosition,
+    submenuDirection: submenuDirection,
+    closeSubmenu: scheduleCloseSubmenu,
+    openSubmenu: setSubmenuOpen,
+    itemRef: itemRef,
+    submenuRef: submenuRef,
+    isOpen: isSubmenuOpen
+  };
+};
 
 var DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
@@ -7489,40 +7637,77 @@ var DropdownListItem = function DropdownListItem(_ref) {
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? LINK_TARGET.SELF : _ref$target,
     _ref$reloadDocument = _ref.reloadDocument,
-    reloadDocument = _ref$reloadDocument === void 0 ? false : _ref$reloadDocument;
+    reloadDocument = _ref$reloadDocument === void 0 ? false : _ref$reloadDocument,
+    submenu = _ref.submenu,
+    _ref$isSelectable = _ref.isSelectable,
+    isSelectable = _ref$isSelectable === void 0 ? false : _ref$isSelectable;
   var _useDropdownContext = useDropdownContext(),
     onToggleDropdown = _useDropdownContext.onToggleDropdown;
+  var _useSubmenu = useSubmenu({
+      hasSubmenu: !!submenu,
+      disabled: disabled
+    }),
+    closeSubmenu = _useSubmenu.closeSubmenu,
+    openSubmenu = _useSubmenu.openSubmenu,
+    submenuPosition = _useSubmenu.submenuPosition,
+    submenuDirection = _useSubmenu.submenuDirection,
+    itemRef = _useSubmenu.itemRef,
+    submenuRef = _useSubmenu.submenuRef,
+    isOpen = _useSubmenu.isOpen;
+  React.useEffect(function () {
+    var itemElement = itemRef.current;
+    if (!itemElement) {
+      return;
+    }
+    var handleCloseSubmenu = function handleCloseSubmenu() {
+      closeSubmenu();
+    };
+    itemElement.addEventListener('closeSubmenu', handleCloseSubmenu);
+    return function () {
+      itemElement.removeEventListener('closeSubmenu', handleCloseSubmenu);
+    };
+  }, [itemRef, closeSubmenu]);
   var handleClick = function handleClick(e) {
     e.stopPropagation();
     if (disabled) {
       return;
     }
-    onToggleDropdown();
+    if (!!submenu) {
+      openSubmenu();
+      return;
+    }
+    if (!isSelectable) {
+      onToggleDropdown();
+    }
     onClick && onClick(e);
   };
   var childrenContainer = React__default["default"].createElement("div", {
-    className: styles$17['dropdown-list-item__container']
+    className: styles$1a['dropdown-list-item__container']
   }, prefix && React__default["default"].createElement("div", {
-    className: styles$17['dropdown-list-item__prefix']
+    className: styles$1a['dropdown-list-item__prefix']
   }, prefix), React__default["default"].createElement("div", {
-    className: styles$17['dropdown-list-item__content']
+    className: styles$1a['dropdown-list-item__content']
   }, React__default["default"].createElement(Stack, {
-    space: 4,
+    space: 0,
     flex: [1]
   }, children, caption && React__default["default"].createElement("div", {
-    className: styles$17['dropdown-list-item__caption']
-  }, caption))), suffix && React__default["default"].createElement("div", {
-    className: styles$17['dropdown-list-item__suffix']
-  }, suffix));
+    className: styles$1a['dropdown-list-item__caption']
+  }, caption))), (suffix || submenu) && React__default["default"].createElement("div", {
+    className: styles$1a['dropdown-list-item__suffix']
+  }, suffix, submenu && !suffix && React__default["default"].createElement("div", {
+    className: styles$1a['dropdown-list-item__suffix-spot']
+  }), submenu && React__default["default"].createElement(IconChevronRight, {
+    size: "small"
+  })));
   var linkItem = href && (reloadDocument ? React__default["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["default"].createElement(reactRouterDom.Link, {
     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
@@ -7530,17 +7715,54 @@ var DropdownListItem = function DropdownListItem(_ref) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$17['dropdown-list-item'], (_classNames = {}, _classNames[styles$17['dropdown-list-item--selected']] = selected, _classNames[styles$17['dropdown-list-item--disabled']] = disabled, _classNames)),
+      className: classnames__default["default"](styles$1a['dropdown-list-item'], (_classNames = {}, _classNames[styles$1a['dropdown-list-item--selected']] = selected, _classNames[styles$1a['dropdown-list-item--disabled']] = disabled, _classNames)),
       onMouseDown: function onMouseDown(e) {
         return 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["default"].createElement(DropdownSubmenu, {
+      position: submenuPosition,
+      direction: submenuDirection,
+      openSubmenu: openSubmenu,
+      ref: submenuRef
+    }, submenu))
   );
 };
 
+var DropdownListItemSelectable = function DropdownListItemSelectable(_ref) {
+  var onClick = _ref.onClick,
+    caption = _ref.caption,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    testId = _ref.testId,
+    children = _ref.children;
+  return React__default["default"].createElement(DropdownListItem, {
+    onClick: onClick,
+    caption: caption,
+    selected: selected,
+    disabled: disabled,
+    testId: testId,
+    prefix: selected ? React__default["default"].createElement(IconCheckCircle, {
+      size: "medium",
+      color: COLORS['primary-color']
+    }) : React__default["default"].createElement("div", {
+      style: {
+        visibility: 'hidden'
+      }
+    }, React__default["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);
+};
+
 var canInteractWithItem = function canInteractWithItem(child) {
   var itemType = getItemType(child);
   if (itemType === 'DropdownListDivider') {
@@ -7557,13 +7779,20 @@ var getItemType = function getItemType(child) {
     component: DropdownListItem,
     displayName: 'DropdownListItem'
   });
+  var 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');
 };
 
 var DropdownList = function DropdownList(_ref) {
@@ -7579,7 +7808,8 @@ var DropdownList = function DropdownList(_ref) {
     return {
       disabled: !canInteractWithItem(child),
       onClick: child.props.onClick,
-      href: child.props.href
+      href: child.props.href,
+      submenu: child.props.submenu
     };
   });
   var listRef = React.useRef(null);
@@ -7588,7 +7818,13 @@ var DropdownList = function DropdownList(_ref) {
       // get the nth list item in the dropdown
       var element = listRef.current.querySelector(":nth-child(" + (newFocusItem + 1) + ")");
       var 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;
+      }
     }
   };
   var _useListKeyboardNavig = useListKeyboardNavigation(items, listRef, {
@@ -7604,16 +7840,16 @@ var DropdownList = function DropdownList(_ref) {
         scrollToItem(highlightItemIndex);
       }
     }
-  }, [highlightItemIndex]);
+  }, [highlightItemIndex, setFocusOnItem]);
   return React__default["default"].createElement("ul", {
-    className: styles$19['dropdown-list'],
+    className: styles$1c['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
     var _classNames;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$19['dropdown-list__item'], (_classNames = {}, _classNames[styles$19['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
+      className: classnames__default["default"](styles$1c['dropdown-list__item'], (_classNames = {}, _classNames[styles$1c['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
       onMouseEnter: function onMouseEnter() {
         return setFocusOnItem(index);
       },
@@ -7639,7 +7875,7 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-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"};
 
 var CardContext = React.createContext({
   isCardMounted: false
@@ -7674,19 +7910,19 @@ var Card = function Card(_ref) {
       isCardMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$16['card']),
+    className: classnames__default["default"](styles$18['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$16['card__body'], styles$16['card__body--interactive'], (_classnames = {}, _classnames[styles$16['card__body--disabled']] = disabled, _classnames[styles$16['card__body--focus']] = isSelected, _classnames[styles$16['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames__default["default"](styles$18['card__body'], styles$18['card__body--interactive'], (_classnames = {}, _classnames[styles$18['card__body--disabled']] = disabled, _classnames[styles$18['card__body--focus']] = isSelected, _classnames[styles$18['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick,
     disabled: disabled
   }, children) : React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$16['card__body'], (_classnames2 = {}, _classnames2[styles$16['card__body--disabled']] = disabled, _classnames2[styles$16['card__body--focus']] = isSelected, _classnames2[styles$16['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames__default["default"](styles$18['card__body'], (_classnames2 = {}, _classnames2[styles$18['card__body--disabled']] = disabled, _classnames2[styles$18['card__body--focus']] = isSelected, _classnames2[styles$18['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$16['card__kebab'], (_classnames3 = {}, _classnames3[styles$16['card__kebab--disabled']] = disabled, _classnames3))
+    className: classnames__default["default"](styles$18['card__kebab'], (_classnames3 = {}, _classnames3[styles$18['card__kebab--disabled']] = disabled, _classnames3))
   }, React__default["default"].createElement(KebabMenu, {
     actions: onClose ? actions.concat({
       action: 'dismiss',
@@ -7694,14 +7930,14 @@ var Card = function Card(_ref) {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$16['card__close'], (_classnames4 = {}, _classnames4[styles$16['card__close--disabled']] = disabled, _classnames4))
+    className: classnames__default["default"](styles$18['card__close'], (_classnames4 = {}, _classnames4[styles$18['card__close--disabled']] = disabled, _classnames4))
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
   }, React__default["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
@@ -7721,7 +7957,7 @@ var CalloutCard = function CalloutCard(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement("div", {
-    className: styles$15['callout-card__header']
+    className: styles$17['callout-card__header']
   }, React__default["default"].createElement(Text, {
     as: "body",
     color: "primary-color"
@@ -7736,7 +7972,7 @@ var CalloutCard = function CalloutCard(_ref) {
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default["default"].createElement("div", {
-    className: styles$15['callout-card__close']
+    className: styles$17['callout-card__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -7751,7 +7987,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$14 = {"breadcrumb-item":"_fo7-A"};
+var styles$16 = {"breadcrumb-item":"_fo7-A"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -7765,24 +8001,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   // This is neessary to support older versions of react-router-dom
   return reloadDocument ? React__default["default"].createElement("a", {
     href: href,
-    className: styles$14['breadcrumb-item'],
+    className: styles$16['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default["default"].createElement(reactRouterDom.Link, {
     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"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default["default"].createElement("div", {
-    className: styles$13['page-breadcrumbs']
+    className: styles$15['page-breadcrumbs']
   }, React__default["default"].createElement(Breadcrumbs, null, items));
 };
 var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
@@ -7804,7 +8040,7 @@ var getBreadbrumbItems = function 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"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -7826,7 +8062,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$12['page'], (_classNames = {}, _classNames[styles$12['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$12['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames__default["default"](styles$14['page'], (_classNames = {}, _classNames[styles$14['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$14['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Stack, {
     space: 20
@@ -7846,15 +8082,15 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default["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"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -7863,7 +8099,7 @@ var ModalHeader = function ModalHeader(_ref) {
     loading = _ref.loading;
   if (!header && !subHeader) {
     return onClose ? React__default["default"].createElement("div", {
-      className: styles$Z['header__close-button']
+      className: styles$$['header__close-button']
     }, React__default["default"].createElement(Button, {
       theme: "link-icon",
       onClick: onClose,
@@ -7879,13 +8115,13 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default["default"].createElement("span", {
-    className: styles$Z['header']
+    className: styles$$['header']
   }, header), onClose && React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose,
     disabled: loading
   }, React__default["default"].createElement(IconTimes, null))), subHeader && React__default["default"].createElement("div", {
-    className: styles$Z['sub-header']
+    className: styles$$['sub-header']
   }, subHeader));
 };
 
@@ -7942,14 +8178,14 @@ var Modal = function 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["default"].createElement(ModalHeader, {
@@ -7993,7 +8229,7 @@ var useScrollShadow = function 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"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -8003,15 +8239,15 @@ var ModalBody = function ModalBody(_ref) {
     ref = _useScrollShadow.ref,
     showScrollShadow = _useScrollShadow.showScrollShadow;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$Y['modal-body'], (_classNames = {}, _classNames[styles$Y['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames__default["default"](styles$_['modal-body'], (_classNames = {}, _classNames[styles$_['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
   }, React__default["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"};
 
 var updateButtonProps$1 = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -8046,7 +8282,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default["default"].createElement(Inline, {
       justifyContent: "space-between"
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$X['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$Z['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default["default"].createElement("div", null)), React__default["default"].createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -8062,7 +8298,7 @@ var FooterContainer = function FooterContainer(_ref2) {
     displayName: 'Inline'
   });
   return React__default["default"].createElement("div", {
-    className: styles$X['modal-footer'],
+    className: styles$Z['modal-footer'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: "end",
@@ -8075,7 +8311,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) {
   var parsed = dateFnsParse__default["default"](str, format, new Date(), {
@@ -8319,9 +8555,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -8383,7 +8619,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   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"};
 
 var _excluded$m = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
 /** CheckboxField form element. */
@@ -8416,7 +8652,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, otherProps), React__default["default"].createElement("div", {
-    className: styles$V['check-box-field']
+    className: styles$X['check-box-field']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
@@ -8429,12 +8665,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("span", {
-    className: styles$V['check-box-field__custom-input']
+    className: styles$X['check-box-field__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$V['check-box-field__caption']
+    className: styles$X['check-box-field__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default["default"].createElement(ErrorMessage, {
@@ -8474,7 +8710,7 @@ var useLocalStorage = function 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"};
 
 var _excluded$l = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus"];
 var HintModal = function HintModal(_ref) {
@@ -8539,22 +8775,22 @@ var HintModal = function 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["default"].createElement("div", {
-    className: styles$U['hint-modal__close-button']
+    className: styles$W['hint-modal__close-button']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: handleOnClose
   }, React__default["default"].createElement(IconTimes, null))), mediaUrl && React__default["default"].createElement("img", {
-    className: styles$U['hint-modal__image'],
+    className: styles$W['hint-modal__image'],
     src: mediaUrl,
     alt: String(header)
   }), React__default["default"].createElement("div", {
-    className: styles$U['hint-modal__body']
+    className: styles$W['hint-modal__body']
   }, React__default["default"].createElement(Stack, {
     justifyContent: "space-between"
   }, React__default["default"].createElement(Stack, {
@@ -8596,7 +8832,7 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$$['badge'], (_classnames = {}, _classnames[styles$$['badge--success']] = theme === 'success', _classnames[styles$$['badge--danger']] = theme === 'danger', _classnames[styles$$['badge--info']] = theme === 'info', _classnames[styles$$['badge--warning']] = theme === 'warning', _classnames[styles$$['badge--numeric']] = Number.isFinite(children), _classnames)),
+    className: classnames__default["default"](styles$11['badge'], (_classnames = {}, _classnames[styles$11['badge--success']] = theme === 'success', _classnames[styles$11['badge--danger']] = theme === 'danger', _classnames[styles$11['badge--info']] = theme === 'info', _classnames[styles$11['badge--warning']] = theme === 'warning', _classnames[styles$11['badge--numeric']] = Number.isFinite(children), _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -8607,23 +8843,23 @@ var MenuItem = function MenuItem(_ref) {
   var _classNames, _classNames2;
   var menu = _ref.menu;
   return React__default["default"].createElement("li", {
-    className: classnames__default["default"](styles$10['menu-item'], (_classNames = {}, _classNames[styles$10['menu-item--with-badge']] = !!menu.suffix, _classNames))
+    className: classnames__default["default"](styles$12['menu-item'], (_classNames = {}, _classNames[styles$12['menu-item--with-badge']] = !!menu.suffix, _classNames))
   }, menu.reloadDocument ? React__default["default"].createElement("a", {
     href: menu.to,
-    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$10['menu-item--active']] = menu.isActive, _classNames2))
+    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$12['menu-item--active']] = menu.isActive, _classNames2))
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$10['menu-item__badge']
+    className: styles$12['menu-item__badge']
   }, React__default["default"].createElement(Badge, null, menu.suffix))) : React__default["default"].createElement(reactRouterDom.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: function className(_ref2) {
       var isActive = _ref2.isActive;
-      return isActive ? styles$10['menu-item--active'] : '';
+      return isActive ? styles$12['menu-item--active'] : '';
     },
     exact: true
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$10['menu-item__badge']
+    className: styles$12['menu-item__badge']
   }, React__default["default"].createElement(Badge, null, menu.suffix))));
 };
 
@@ -8633,9 +8869,9 @@ var PageLayout = function PageLayout(_ref) {
     menu = _ref.menu,
     sideNavContent = _ref.sideNavContent;
   return React__default["default"].createElement("div", {
-    className: styles$11['page-layout']
+    className: styles$13['page-layout']
   }, React__default["default"].createElement("div", {
-    className: styles$11['page-layout__nav-container']
+    className: styles$13['page-layout__nav-container']
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement(Text, {
@@ -8644,7 +8880,7 @@ var PageLayout = function PageLayout(_ref) {
     ml: 20,
     mr: 35
   }, title), React__default["default"].createElement("ul", {
-    className: styles$11['page-layout__nav-list']
+    className: styles$13['page-layout__nav-list']
   }, menu.filter(function (menu) {
     return !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true;
   }).map(function (menuItem, index) {
@@ -8653,9 +8889,9 @@ var PageLayout = function PageLayout(_ref) {
       menu: menuItem
     });
   })), sideNavContent && React__default["default"].createElement("div", {
-    className: styles$11['page-layout__side-nav-content']
+    className: styles$13['page-layout__side-nav-content']
   }, sideNavContent))), React__default["default"].createElement("div", {
-    className: styles$11['page-layout__content']
+    className: styles$13['page-layout__content']
   }, children));
 };
 
@@ -8665,7 +8901,7 @@ var TOAST_THEME = {
 };
 var 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"};
 
 var toast = function toast(text, theme, options) {
   var _classNames;
@@ -8688,7 +8924,7 @@ var toast = function toast(text, theme, options) {
     onActionClick: onActionClick
   }) : text;
   reactToastify.toast(content, _extends({
-    className: classnames__default["default"](styles$T['toast'], (_classNames = {}, _classNames[styles$T['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
+    className: classnames__default["default"](styles$V['toast'], (_classNames = {}, _classNames[styles$V['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
     containerId: TOAST_CONTAINER_ID
   }, options));
 };
@@ -8716,7 +8952,7 @@ var ToastContainer = function ToastContainer(_ref3) {
   var _ref3$containerId = _ref3.containerId,
     containerId = _ref3$containerId === void 0 ? TOAST_CONTAINER_ID : _ref3$containerId;
   return React__default["default"].createElement(reactToastify.ToastContainer, {
-    bodyClassName: styles$T['toast__text'],
+    bodyClassName: styles$V['toast__text'],
     hideProgressBar: true,
     draggable: false,
     transition: reactToastify.Slide,
@@ -8727,6 +8963,23 @@ var ToastContainer = function ToastContainer(_ref3) {
   });
 };
 
+var 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,
+  // Default theme is light, but it will be overridden by the useTheme hook in the SousChefProvider
+  theme: 'light'
+};
+var ProviderConfigContext = React.createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = React.useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  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
@@ -8779,7 +9032,7 @@ var SousChefProvider = function SousChefProvider(_ref) {
   }, React__default["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"};
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -8959,7 +9212,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     },
     id: tableId + "-header"
   }, React__default["default"].createElement("tr", {
-    className: styles$S['data-table-header']
+    className: styles$U['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
   }).map(function (column) {
@@ -8969,7 +9222,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var isRightAligned = column.isRightAligned;
     var hasDescription = !!column.description;
     return React__default["default"].createElement("th", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$S['data-table-header__item']] = true, _classnames[styles$S['data-table-header__item--sortable']] = isSortable, _classnames)),
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$U['data-table-header__item']] = true, _classnames[styles$U['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
         flex: column.size || 1,
         backgroundColor: backgroundColor
@@ -8984,14 +9237,14 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$S['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$S['data-table-header__item-content--right-align']] = isRightAligned, _classnames2), (_classnames3 = {}, _classnames3[styles$S['data-table-header__item-content--has-description']] = hasDescription, _classnames3))
+      className: classnames__default["default"](styles$U['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$U['data-table-header__item-content--right-align']] = isRightAligned, _classnames2), (_classnames3 = {}, _classnames3[styles$U['data-table-header__item-content--has-description']] = hasDescription, _classnames3))
     }, wrapWithTooltip(column), isSortable && React__default["default"].createElement("span", {
-      className: styles$S['data-table-header__sort-icon']
+      className: styles$U['data-table-header__sort-icon']
     }, React__default["default"].createElement(HeaderSortIcon, {
       sortDirection: sortDir
     }))));
   }), showActionMenu && React__default["default"].createElement("th", {
-    className: classnames__default["default"](styles$S['data-table-header__item'], styles$S['data-table-header__item--action'])
+    className: classnames__default["default"](styles$U['data-table-header__item'], styles$U['data-table-header__item--action'])
   }))));
 };
 var wrapWithTooltip = function wrapWithTooltip(column) {
@@ -9005,9 +9258,9 @@ var wrapWithTooltip = function 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"};
 
 var useTableHeaderHeight = function useTableHeaderHeight(isShowingColumns) {
   var _useDataTableContext = useDataTableContext(),
@@ -9062,16 +9315,16 @@ var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var hasFixedScroll = useDetectFixedScroll();
   var backgroundColor = useBackgroundColor();
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$Q['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$Q['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$Q['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$Q['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
+    className: classnames__default["default"](styles$S['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$S['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$S['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$S['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
       top: placement === 'top' ? headerHeight : undefined
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$Q['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$Q['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$Q['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+    className: classnames__default["default"](styles$S['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$S['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$S['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$Q['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$Q['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$Q['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
+    className: classnames__default["default"](styles$S['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$S['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$S['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
     "data-background-color": "red"
   }));
 };
@@ -9088,7 +9341,7 @@ var 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*/
 var ButtonCTA$1 = function ButtonCTA(_ref) {
@@ -9109,7 +9362,7 @@ var ButtonCTA$1 = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$O = {"banner__caption":"_S--Ce"};
+var styles$Q = {"banner__caption":"_S--Ce"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -9140,7 +9393,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default["default"].createElement("div", {
-    className: styles$O['banner__caption']
+    className: styles$Q['banner__caption']
   }, caption));
 };
 
@@ -9180,13 +9433,13 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$P['banner'], (_classnames = {}, _classnames[styles$P['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$P['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$P['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$P['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$P['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$P['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames__default["default"](styles$R['banner'], (_classnames = {}, _classnames[styles$R['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$R['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$R['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$R['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$R['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$R['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default["default"].createElement(Inline, {
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$P['banner__icon'], (_classnames2 = {}, _classnames2[styles$P['banner__icon--multiline']] = multiLine, _classnames2))
+    className: classnames__default["default"](styles$R['banner__icon'], (_classnames2 = {}, _classnames2[styles$R['banner__icon--multiline']] = multiLine, _classnames2))
   }, icon != null ? icon : React__default["default"].createElement(InlineBannerIcon, {
     theme: theme
   })), React__default["default"].createElement(Layout, {
@@ -9196,9 +9449,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default["default"].createElement("div", {
-    className: styles$P['banner__title']
+    className: styles$R['banner__title']
   }, title), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$P['banner__body'], (_classnames3 = {}, _classnames3[styles$P['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames3))
+    className: classnames__default["default"](styles$R['banner__body'], (_classnames3 = {}, _classnames3[styles$R['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames3))
   }, children), primaryButton && React__default["default"].createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -9206,7 +9459,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default["default"].createElement("div", {
-    className: styles$P['banner__close']
+    className: styles$R['banner__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     type: "button",
@@ -9222,7 +9475,7 @@ var 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"};
 
 var MicroBannerIcon = function MicroBannerIcon(_ref) {
   var theme = _ref.theme;
@@ -9269,14 +9522,14 @@ var MicroBanner = function MicroBanner(_ref) {
     testId = _ref.testId,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var positionStyles = usePositionStyles(positionProps);
-  var themeClass = styles$N["micro-banner--" + theme];
-  var contentClass = classnames__default["default"](styles$N['micro-banner__content'], hideIcon && styles$N['micro-banner__content--no-icon'], !primaryButton && styles$N['micro-banner__content--no-button']);
+  var themeClass = styles$P["micro-banner--" + theme];
+  var contentClass = classnames__default["default"](styles$P['micro-banner__content'], hideIcon && styles$P['micro-banner__content--no-icon'], !primaryButton && styles$P['micro-banner__content--no-button']);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$N['micro-banner'], themeClass),
+    className: classnames__default["default"](styles$P['micro-banner'], themeClass),
     style: positionStyles
   }, !hideIcon && React__default["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["default"].createElement(MicroBannerIcon, {
     theme: theme
@@ -9287,7 +9540,7 @@ var MicroBanner = function MicroBanner(_ref) {
   }, title), React__default["default"].createElement(Text, {
     as: 'caption'
   }, children)), primaryButton && React__default["default"].createElement("div", {
-    className: styles$N['micro-banner__button']
+    className: styles$P['micro-banner__button']
   }, React__default["default"].createElement(ButtonCTA, {
     button: primaryButton,
     bannerTheme: theme
@@ -9301,7 +9554,7 @@ var 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"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -9333,7 +9586,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
     }, secondaryButton.props))));
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$M['persistent-banner'], (_classNames = {}, _classNames[styles$M['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$M['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$M['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$M['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames)),
+    className: classnames__default["default"](styles$O['persistent-banner'], (_classNames = {}, _classNames[styles$O['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$O['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$O['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$O['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default["default"].createElement(Inline, {
     flex: [1],
@@ -9400,7 +9653,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-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"};
 
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
@@ -9413,7 +9666,7 @@ var CircularProgress = function CircularProgress(_ref) {
     metric = _useProgress.metric;
   var determinant = metric.percentage * 2.79;
   return React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$L['circular-progress'],
+    className: styles$N['circular-progress'],
     "data-testid": testId
   }), React__default["default"].createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9422,21 +9675,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$L['circular-progress__track']
+    className: styles$N['circular-progress__track']
   }), React__default["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["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"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -9449,15 +9702,15 @@ var ProgressBar = function ProgressBar(_ref) {
     elementProps = _useProgress.elementProps,
     metric = _useProgress.metric;
   return React__default["default"].createElement(Stack, null, React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$K['progress-bar'],
+    className: styles$M['progress-bar'],
     "data-testid": testId
   }), React__default["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["default"].createElement("div", {
-    className: styles$K['progress-bar__steps']
+    className: styles$M['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default["default"].createElement(Text, {
       key: step
@@ -9465,7 +9718,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-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"};
 
 var SKELETON_COMPONENT = {
   AVATAR: 'avatar',
@@ -9488,7 +9741,7 @@ var Skeleton = function Skeleton(_ref) {
   var positioning = usePositionStyles(positionStyles);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$J['skeleton'], (_classnames = {}, _classnames[styles$J['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$J['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$J['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$J['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$J['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$J['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$J['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
+    className: classnames__default["default"](styles$L['skeleton'], (_classnames = {}, _classnames[styles$L['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$L['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$L['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$L['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$L['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$L['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$L['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
     style: _extends({}, positioning, {
       width: width,
       height: height
@@ -9496,11 +9749,11 @@ var Skeleton = function 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-"};
 
 var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _columns$columnIndex, _classnames, _classnames2, _classnames3;
@@ -9524,17 +9777,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$G['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$G['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$G['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+    className: classnames__default["default"](styles$I['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$I['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$I['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default["default"].createElement(IconTimesOctagon, {
     size: "medium",
     color: "danger-on-container-variant"
   }));
   var TableCell = React__default["default"].createElement("td", {
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$G['data-table-cell--invalid']] = hasError, _classnames2[styles$G['data-table-cell--no-padding']] = noPadding, _classnames2[styles$G['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$G['data-table-cell']),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$I['data-table-cell--invalid']] = hasError, _classnames2[styles$I['data-table-cell--no-padding']] = noPadding, _classnames2[styles$I['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$I['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$G['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$G['data-table-cell__content--with-error']] = hasError, _classnames3[styles$G['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$G['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
+    className: classnames__default["default"](styles$I['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$I['data-table-cell__content--with-error']] = hasError, _classnames3[styles$I['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$I['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default["default"].createElement(Tooltip, {
     overlay: errorMessage,
@@ -9559,7 +9812,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default["default"].createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default["default"].createElement("div", {
-    className: styles$H['actions'],
+    className: styles$J['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, state === 'SKELETON_LOADING' && React__default["default"].createElement(Skeleton, {
     width: 45
@@ -9574,7 +9827,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-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"};
 
 var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
   var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
@@ -9623,7 +9876,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$F['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$F['data-table-editable-cell']),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$H['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$H['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
@@ -9632,7 +9885,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$F['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$F['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$F['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$F['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$F['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$F['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$H['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$H['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$H['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$H['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$H['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$H['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": testId && testId + "-text-field",
@@ -9678,7 +9931,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var _useDataTableContext = useDataTableContext(),
     showActionMenu = _useDataTableContext.showActionMenu;
-  var styleNames = classnames__default["default"](styles$I['data-table-row'], (_classnames = {}, _classnames[styles$I['data-table-row--clickable']] = onClick, _classnames[styles$I['data-table-row--selected']] = isSelected, _classnames));
+  var styleNames = classnames__default["default"](styles$K['data-table-row'], (_classnames = {}, _classnames[styles$K['data-table-row--clickable']] = onClick, _classnames[styles$K['data-table-row--selected']] = isSelected, _classnames));
   var renderColumn = function renderColumn(columnElement, index) {
     var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement == null ? void 0 : columnElement.type) === DataTableCell;
     if (isUsingDataTableCell || !hasDefaultCell) {
@@ -9774,7 +10027,7 @@ var calculateScrollState = function 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"};
 
 var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   var scrollContainerRef = React.useRef(null);
@@ -9821,7 +10074,7 @@ var useDataTableScrollState = function 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"};
 
 var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
@@ -9840,7 +10093,7 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     return "calc(100% - " + headerHeight + ")";
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$D['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$D['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$D['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$D['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$D['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
+    className: classnames__default["default"](styles$F['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$F['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$F['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$F['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$F['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
@@ -9900,18 +10153,18 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     isShowingColumns: !!isShowingColumns,
     showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
   })), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$E[containerClassName], (_classNames = {}, _classNames[styles$E[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$E[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$E[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$E[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$E[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$E[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+    className: classnames__default["default"](styles$G[containerClassName], (_classNames = {}, _classNames[styles$G[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$G[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$G[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$G[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$G[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$G[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"
   }, 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"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -9928,7 +10181,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$A['empty-state-container-cta'], (_classNames = {}, _classNames[styles$A['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames__default["default"](styles$C['empty-state-container-cta'], (_classNames = {}, _classNames[styles$C['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -9951,7 +10204,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     testId = _ref.testId,
     mediaComponent = _ref.mediaComponent;
   return React__default["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["default"].createElement("img", {
     src: mediaUrl,
@@ -9968,7 +10221,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     as: "body",
     alignment: "center"
   }, title), React__default["default"].createElement("div", {
-    className: styles$B['empty-state-container-stack__body']
+    className: styles$D['empty-state-container-stack__body']
   }, children)), React__default["default"].createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -10079,7 +10332,7 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
     columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
     colSpan: colSpan
   }, React__default["default"].createElement("div", {
-    className: styles$C['data-table-empty-state']
+    className: styles$E['data-table-empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     mediaUrl: customImage,
     mediaComponent: customImage === '' ? React__default["default"].createElement(MagnifyingGlassIllustration, null) : undefined,
@@ -10167,7 +10420,7 @@ var DataTable = function DataTable(_ref) {
       return null;
     }
     return React__default["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["default"].createElement(PaginationControls, {
       hasPrevious: isLoading ? false : hasPrevious,
@@ -10190,7 +10443,7 @@ var DataTable = function DataTable(_ref) {
       tableId: tableId
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$R['data-table']),
+    className: classnames__default["default"](styles$T['data-table']),
     ref: tableRef,
     style: positionStyles
   }, React__default["default"].createElement(DataTableStickyColumnsContainer, {
@@ -10201,19 +10454,19 @@ var DataTable = function DataTable(_ref) {
     placement: "top",
     isShowingColumns: !!isShowingColumns
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$R['data-table__content'], (_classNames = {}, _classNames[styles$R['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
+    className: classnames__default["default"](styles$T['data-table__content'], (_classNames = {}, _classNames[styles$T['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles,
     id: tableId + "-content"
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default["default"].createElement("div", {
-    className: styles$R['data-table__background-loading']
+    className: styles$T['data-table__background-loading']
   }, React__default["default"].createElement(Spinner, null)), React__default["default"].createElement("table", _extends({
-    className: classnames__default["default"](styles$R['data-table__table'], (_classNames2 = {}, _classNames2[styles$R['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
+    className: classnames__default["default"](styles$T['data-table__table'], (_classNames2 = {}, _classNames2[styles$T['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
   }, dataProps), columns && isShowingColumns && React__default["default"].createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: isShowingContent && showActionMenu
   }), React__default["default"].createElement("tbody", {
-    className: classnames__default["default"](styles$R['data-table__body'], (_classNames3 = {}, _classNames3[styles$R['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
+    className: classnames__default["default"](styles$T['data-table__body'], (_classNames3 = {}, _classNames3[styles$T['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
     "data-testid": testId
   }, isShowingContent && content.map(function (item, index) {
     var _item$key;
@@ -10233,7 +10486,7 @@ var DataTable = function DataTable(_ref) {
       key: index
     });
   }))), isShowingFooter && isShowingContent && React__default["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["default"].createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
@@ -10241,7 +10494,7 @@ var DataTable = function DataTable(_ref) {
   })), React__default["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"};
 
 var AccordionItem = function AccordionItem(props) {
   var item = props.item,
@@ -10252,9 +10505,9 @@ var AccordionItem = function AccordionItem(props) {
     content = item.content;
   var isFocusedByClickRef = React__default["default"].useRef(false);
   return React__default["default"].createElement("div", {
-    className: styles$z['accordion-item']
+    className: styles$B['accordion-item']
   }, React__default["default"].createElement("button", {
-    className: styles$z['accordion-item__header'],
+    className: styles$B['accordion-item__header'],
     onClick: function onClick() {
       if (isOpen) {
         handleAccordionItemOpen(null);
@@ -10281,15 +10534,15 @@ var AccordionItem = function AccordionItem(props) {
   }, typeof title === 'string' ? React__default["default"].createElement(Text, {
     emphasis: "bold"
   }, title) : title, React__default["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["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["default"].createElement(Text, null, content)));
 };
 
-var styles$y = {"accordion":"_058SP"};
+var styles$A = {"accordion":"_058SP"};
 
 var _excluded$e = ["items", "onExpand", "defaultOpenId"];
 var Accordion = function Accordion(_ref) {
@@ -10316,7 +10569,7 @@ var Accordion = function Accordion(_ref) {
       isAccordionMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: styles$y['accordion']
+    className: styles$A['accordion']
   }, dataProps), items.map(function (item, index) {
     var id = item.id || index.toString();
     return React__default["default"].createElement(AccordionItem, {
@@ -10330,7 +10583,7 @@ var Accordion = function 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"};
 
 var ActionList = function ActionList(_ref) {
   var children = _ref.children,
@@ -10341,15 +10594,15 @@ var ActionList = function ActionList(_ref) {
   var translate = useTranslation('ActionList');
   var hasChildren = React__default["default"].Children.count(children) > 0;
   return React__default["default"].createElement("div", {
-    className: styles$x['action-list'],
+    className: styles$z['action-list'],
     "data-testid": testId,
     style: {
       maxHeight: maxHeight
     }
   }, title && React__default["default"].createElement("div", {
-    className: styles$x['action-list__title']
+    className: styles$z['action-list__title']
   }, title), hasChildren ? children : React__default["default"].createElement("div", {
-    className: styles$x['action-list__empty-state']
+    className: styles$z['action-list__empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     title: (emptyState == null ? void 0 : emptyState.title) || translate('emptyStateTitle'),
     mediaUrl: emptyState == null ? void 0 : emptyState.image,
@@ -10528,7 +10781,7 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$w = {"custom-control":"_pXQqq"};
+var styles$y = {"custom-control":"_pXQqq"};
 
 var _excluded$d = ["children"];
 function CustomControl(_ref) {
@@ -10538,7 +10791,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue[0];
   return React__default["default"].createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default["default"].createElement("div", {
-    className: styles$w['custom-control'],
+    className: styles$y['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -10726,9 +10979,9 @@ var CustomContainer = function 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.
@@ -10754,7 +11007,7 @@ var CreatableButton = function CreatableButton(_ref) {
   if (!button || typeof button === 'string') {
     var _classNames;
     return React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$u['creatable-button'], (_classNames = {}, _classNames[styles$u['creatable-button--align-left']] = alignLeft, _classNames))
+      className: classnames__default["default"](styles$w['creatable-button'], (_classNames = {}, _classNames[styles$w['creatable-button--align-left']] = alignLeft, _classNames))
     }, React__default["default"].createElement(Button, {
       theme: "link-primary",
       onClick: handleClick,
@@ -10778,7 +11031,7 @@ var CreatableButton = function CreatableButton(_ref) {
     overrideProps.theme = 'link-primary';
   }
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$u['creatable-button'], (_classNames2 = {}, _classNames2[styles$u['creatable-button--align-left']] = alignLeft, _classNames2))
+    className: classnames__default["default"](styles$w['creatable-button'], (_classNames2 = {}, _classNames2[styles$w['creatable-button--align-left']] = alignLeft, _classNames2))
   }, React__default["default"].cloneElement(button, overrideProps));
 };
 
@@ -10802,7 +11055,7 @@ var CreateInputForm = function CreateInputForm(_ref) {
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$1b['text-field'], inputClassName),
+    className: classnames__default["default"](styles$1e['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -10873,7 +11126,7 @@ function CustomMenu(_ref) {
   return React__default["default"].createElement(Select.components.Menu, _extends({}, props), React__default["default"].createElement("div", {
     ref: containerRef
   }, children, React__default["default"].createElement("hr", {
-    className: styles$v['custom-menu-hr']
+    className: styles$x['custom-menu-hr']
   }), !showFooter ? React__default["default"].createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: function onClick() {
@@ -10886,13 +11139,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) {
   var _props$selectProps$co = props.selectProps.componentsProps,
@@ -10929,7 +11182,7 @@ function CustomGroupWithCreate(props) {
   return React__default["default"].createElement("div", {
     ref: containerRef
   }, React__default["default"].createElement(Select.components.Group, _extends({}, props)), !isInputActive ? React__default["default"].createElement("div", {
-    className: styles$t['custom-group-with-create-button-wrapper']
+    className: styles$v['custom-group-with-create-button-wrapper']
   }, React__default["default"].createElement(CreatableButton, {
     creatableButton: creatableButton,
     onClick: function onClick() {
@@ -10943,8 +11196,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
   }));
 }
@@ -11062,7 +11315,7 @@ var useSelectField = function 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. */
 var SelectField = function SelectField(props) {
@@ -11071,7 +11324,7 @@ var SelectField = function SelectField(props) {
     selectProps = _useSelectField.selectProps;
   //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
   var suffixWithMargin = props.suffix ? React__default["default"].createElement("div", {
-    className: styles$s['select-field__suffix']
+    className: styles$u['select-field__suffix']
   }, props.suffix) : undefined;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
     prefix: props.prefix,
@@ -11114,9 +11367,9 @@ var ToolbarSelect = function 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"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -11169,7 +11422,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$q['date-filter-display'], (_classnames = {}, _classnames[styles$q['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames)),
+    className: classnames__default["default"](styles$s['date-filter-display'], (_classnames = {}, _classnames[styles$s['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -11177,7 +11430,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$q['date-filter-display__display-icon'])
+    className: classnames__default["default"](styles$s['date-filter-display__display-icon'])
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "flexible",
     color: "surface-on-color-subtle"
@@ -11188,7 +11441,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   })));
 });
 
-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"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -11217,7 +11470,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$p['date-stepper'], (_classnames = {}, _classnames[styles$p['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$p['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames__default["default"](styles$r['date-stepper'], (_classnames = {}, _classnames[styles$r['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$r['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -11286,9 +11539,9 @@ var CalendarMonth = function CalendarMonth(_ref) {
   }
   var MONTHS = [].concat(Array(12).keys());
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -11382,7 +11635,7 @@ var DateFilter = function DateFilter(_ref) {
   }, [setCalendarOpen]);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$r['date-filter'], (_classnames = {}, _classnames[styles$r['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames__default["default"](styles$t['date-filter'], (_classnames = {}, _classnames[styles$t['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: 0
   }, React__default["default"].createElement(DateFilterStepper, {
@@ -11428,7 +11681,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-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"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -11439,7 +11692,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return option === value;
   };
   return React__default["default"].createElement("div", {
-    className: styles$o['segmented-control'],
+    className: styles$q['segmented-control'],
     "data-testid": testId
   }, options.map(function (option) {
     var _classnames;
@@ -11449,14 +11702,14 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames__default["default"](styles$o['segmented-control__button'], (_classnames = {}, _classnames[styles$o['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames__default["default"](styles$q['segmented-control__button'], (_classnames = {}, _classnames[styles$q['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, 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"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -11470,12 +11723,12 @@ var FormSection = function FormSection(_ref) {
   var content = React__default["default"].createElement(Stack, null, (title || subtitle) && React__default["default"].createElement(Stack, {
     space: 8
   }, title && React__default["default"].createElement("h2", {
-    className: classnames__default["default"](styles$m['form-section__title'])
+    className: classnames__default["default"](styles$o['form-section__title'])
   }, title), subtitle && React__default["default"].createElement("h3", {
-    className: classnames__default["default"](styles$m['form-section__subtitle'])
+    className: classnames__default["default"](styles$o['form-section__subtitle'])
   }, subtitle)), children);
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$m['form-section'], (_classnames = {}, _classnames[styles$m['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames__default["default"](styles$o['form-section'], (_classnames = {}, _classnames[styles$o['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default["default"].createElement(Card, {
     testId: testId && testId + "-card"
@@ -11494,7 +11747,7 @@ var updateButtonProps = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$l = {"form-footer":"_4ksfB"};
+var styles$n = {"form-footer":"_4ksfB"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -11528,7 +11781,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default["default"].Children.count(children) === 1 && React__default["default"].isValidElement(children) && children.type === Inline;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$l['form-footer']),
+    className: classnames__default["default"](styles$n['form-footer']),
     "data-testid": testId
   }, actions && React__default["default"].createElement(FormFooterActions, {
     actions: actions
@@ -11567,12 +11820,12 @@ var Form = function Form(_ref) {
     }
   }, React__default["default"].createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik == null ? void 0 : formik.handleSubmit,
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$n['form--standard-size']] = !wide, _classnames)),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$p['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default["default"].createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$k = {"form-row":"_xX-RS"};
+var styles$m = {"form-row":"_xX-RS"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -11603,7 +11856,7 @@ var FormRow = function FormRow(_ref) {
     space: space,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$k['form-row']
+    extraClass: styles$m['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default["default"].createElement("span", {
       key: index,
@@ -11612,7 +11865,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-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"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -11685,7 +11938,7 @@ var TextAreaField = function TextAreaField(_ref) {
   return React__default["default"].createElement(Field, _extends({}, fieldProps, {
     characterCount: controllers.value !== undefined && maxLength ? maxLength - controllers.value.length : undefined
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames[styles$j['text-field--disabled']] = disabled, _classnames[styles$j['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames__default["default"](styles$l['text-field'], (_classnames = {}, _classnames[styles$l['text-field--invalid']] = hasError, _classnames[styles$l['text-field--disabled']] = disabled, _classnames[styles$l['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef == null ? void 0 : containerRef.current)) {
@@ -11718,7 +11971,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default["default"].createElement("div", {
-    className: styles$j['text-field__toolbar'],
+    className: styles$l['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -11749,7 +12002,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = React.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"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -11819,10 +12072,10 @@ var CreatableOption = function CreatableOption(_ref) {
   };
   return React__default["default"].createElement(React__default["default"].Fragment, null, !isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-create-option',
-    className: styles$i['pill-select-field']
+    className: styles$k['pill-select-field']
   }, React__default["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: function onClick() {
       setIsCreatingOption(true);
       setNewOptionLabel('');
@@ -11831,9 +12084,9 @@ var CreatableOption = function CreatableOption(_ref) {
     size: "small"
   }), createOptionLabel)), isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-creating-option',
-    className: styles$i['pill-select-field']
+    className: styles$k['pill-select-field']
   }, React__default["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",
@@ -11856,7 +12109,7 @@ var CreatableOption = function CreatableOption(_ref) {
       }
     }
   }), React__default["default"].createElement("span", {
-    className: styles$i['pill-select-field__creating-custom-input']
+    className: styles$k['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default["default"].createElement(Text, {
     as: "body",
     color: "surface-on-color-disabled"
@@ -11909,7 +12162,7 @@ var PillSelectField = function PillSelectField(_ref) {
       }
     };
     return React__default["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["default"].createElement(IconTimes, {
@@ -11928,7 +12181,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default["default"].createElement("div", {
       key: itemIdentifier,
-      className: styles$i['pill-select-field']
+      className: styles$k['pill-select-field']
     }, React__default["default"].createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -11948,7 +12201,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default["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["default"].createElement(RemoveButton, {
       option: option
     })));
@@ -11997,9 +12250,9 @@ var useRadioGroupFieldContext = function 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"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -12016,7 +12269,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default["default"].createElement("label", {
-    className: styles$g['radio-group-box-option']
+    className: styles$i['radio-group-box-option']
   }, React__default["default"].createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -12027,7 +12280,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$g['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$g['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames__default["default"](styles$i['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$i['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default["default"].createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -12036,13 +12289,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$g['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$g['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames__default["default"](styles$i['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$i['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$g['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$g['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames__default["default"](styles$i['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$i['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, 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. */
 var RadioGroupOption = function RadioGroupOption(_ref) {
@@ -12063,7 +12316,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$f['radio-group-option']
+    className: styles$h['radio-group-option']
   }, React__default["default"].createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -12074,11 +12327,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("span", {
-    className: styles$f['radio-group-option__custom-input']
+    className: styles$h['radio-group-option__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$f['radio-group-option__caption']
+    className: styles$h['radio-group-option__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -12215,7 +12468,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: space
   }, label && React__default["default"].createElement("div", {
-    className: styles$h['radio-group-field__label']
+    className: styles$j['radio-group-field__label']
   }, label), React__default["default"].createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default["default"].createElement(RadioOptions, {
@@ -12227,20 +12480,20 @@ var RadioGroupField = function RadioGroupField(_ref) {
     testId: testId,
     space: space
   }, children), caption && React__default["default"].createElement("div", {
-    className: styles$h['radio-group-caption']
+    className: styles$j['radio-group-caption']
   }, caption), controllers.error && React__default["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"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
   var met = _ref.met,
     children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$d['password-criteria'], (_classnames = {}, _classnames[styles$d['password-criteria--invalid']] = !met, _classnames))
+    className: classnames__default["default"](styles$f['password-criteria'], (_classnames = {}, _classnames[styles$f['password-criteria--invalid']] = !met, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default["default"].createElement(IconCheck, {
@@ -12319,11 +12572,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$e['password-container']
+    className: styles$g['password-container']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"](styles$e['text-field'], (_classnames = {}, _classnames[styles$e['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$g['text-field'], (_classnames = {}, _classnames[styles$g['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -12335,7 +12588,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$e['password-toggle'], (_classNames = {}, _classNames[styles$e['password-toggle--disabled']] = disabled, _classNames)),
+    className: classnames__default["default"](styles$g['password-toggle'], (_classNames = {}, _classNames[styles$g['password-toggle--disabled']] = disabled, _classNames)),
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -12447,7 +12700,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$c = {"custom-list":"_cSkvD"};
+var styles$e = {"custom-list":"_cSkvD"};
 
 var _excluded$7 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
@@ -12463,7 +12716,7 @@ var CustomList = function CustomList(_ref) {
   return React__default["default"].createElement(Select.components.MenuList, _extends({}, props), React__default["default"].createElement(React.Fragment, null, children, showFooter && props.options.length > 0 && React__default["default"].createElement(Inline, {
     justifyContent: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$c['custom-list']
+    className: styles$e['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
@@ -12782,7 +13035,7 @@ var getFormikError = function 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"};
 
@@ -12848,9 +13101,9 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   var DAYS = getDays(translate);
   var MONTH_NAMES = getMonths(translate);
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$W['calendar']
+    className: styles$Y['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$W['calendar__overlay'],
+    className: styles$Y['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -13056,7 +13309,7 @@ var DateRangeField = function DateRangeField(_ref) {
     start = _controllers$value.start,
     end = _controllers$value.end;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$b['date-range-field'], (_classnames = {}, _classnames[styles$b['date-range-field--invalid']] = hasError, _classnames[styles$b['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$d['date-range-field'], (_classnames = {}, _classnames[styles$d['date-range-field--invalid']] = hasError, _classnames[styles$d['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "medium",
@@ -13421,7 +13674,7 @@ var TimeRangeSelector = React.forwardRef(TimeFieldElement);
  */
 var TimeField = React.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"};
 
 var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
@@ -13539,7 +13792,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
     end: end
   }) : getDuration(end, start, subtractDuration);
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$a['time-range-field'], (_classnames = {}, _classnames[styles$a['time-range-field--invalid']] = hasError, _classnames[styles$a['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$c['time-range-field'], (_classnames = {}, _classnames[styles$c['time-range-field--invalid']] = hasError, _classnames[styles$c['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(TimeRangeStart, {
     startTime: startTime,
@@ -13570,7 +13823,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-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"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
@@ -13640,9 +13893,9 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       setShowMask(false);
       inputProps.onFocus(e);
     },
-    className: classnames__default["default"](inputProps.className, styles$9['currency-field'], (_classnames = {}, _classnames[styles$9['currency-field--with-mask']] = showMask && !!inputProps.value, _classnames))
+    className: classnames__default["default"](inputProps.className, styles$b['currency-field'], (_classnames = {}, _classnames[styles$b['currency-field--with-mask']] = showMask && !!inputProps.value, _classnames))
   }))), showMask && !!inputProps.value && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$9['currency-field__mask-display'], (_classnames2 = {}, _classnames2[styles$9['currency-field__mask-display--disabled']] = inputProps.disabled, _classnames2)),
+    className: classnames__default["default"](styles$b['currency-field__mask-display'], (_classnames2 = {}, _classnames2[styles$b['currency-field__mask-display--disabled']] = inputProps.disabled, _classnames2)),
     style: {
       marginLeft: displayPadding
     }
@@ -13767,7 +14020,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, 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"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -13909,7 +14162,7 @@ var usePhoneField = function usePhoneField(_ref) {
     'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     'aria-invalid': hasError,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1b['text-field'], (_classnames = {}, _classnames[styles$1b['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1e['text-field'], (_classnames = {}, _classnames[styles$1e['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     id: controllers.id,
@@ -14678,7 +14931,7 @@ var COUNTRIES = {
 };
 var 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"};
 
@@ -14689,15 +14942,15 @@ var CountrySelector = function CountrySelector(_ref) {
     hasError = _ref.hasError,
     disabled = _ref.disabled;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$7['country-selector'], (_classNames = {}, _classNames[styles$7['country-selector--with-error']] = hasError, _classNames[styles$7['country-selector--disabled']] = disabled, _classNames))
+    className: classnames__default["default"](styles$9['country-selector'], (_classNames = {}, _classNames[styles$9['country-selector--with-error']] = hasError, _classNames[styles$9['country-selector--disabled']] = disabled, _classNames))
   }, React__default["default"].createElement(Dropdown, {
     trigger: React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$7['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$7['country-selector__trigger--with-error']] = hasError, _classNames2[styles$7['country-selector__trigger--disabled']] = disabled, _classNames2))
+      className: classnames__default["default"](styles$9['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$9['country-selector__trigger--with-error']] = hasError, _classNames2[styles$9['country-selector__trigger--disabled']] = disabled, _classNames2))
     }, React__default["default"].createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$7['country-selector__trigger-flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$9['country-selector__trigger-flag'])
     }), React__default["default"].createElement(IconChevronDown, {
       color: "currentColor",
       size: "medium"
@@ -14714,7 +14967,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$7['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$9['country-selector__flag'])
     }), React__default["default"].createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -14787,7 +15040,7 @@ var PhoneField = function PhoneField(_ref) {
     }
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$8['phone-field']
+    className: styles$a['phone-field']
   }, !disabledCountry && React__default["default"].createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -14798,16 +15051,197 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$8['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$a['country-selector__flag'])
     }), React__default["default"].createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames__default["default"](inputProps.className, styles$8['phone-field__input'], (_classNames = {}, _classNames[styles$8['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames__default["default"](inputProps.className, styles$a['phone-field__input'], (_classNames = {}, _classNames[styles$a['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     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"};
+
+var 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'];
+
+var useColorKeyboardNavigation = function useColorKeyboardNavigation(selectedColor) {
+  var _useState = React.useState(null),
+    selectedColorIndex = _useState[0],
+    setSelectedColorIndex = _useState[1];
+  var amountOfColors = SEQUENTIAL_COLORS.length;
+  var handleArrowNavigation = function handleArrowNavigation(event) {
+    var keyPressed = event.key;
+    var currentIndex = selectedColorIndex !== null ? selectedColorIndex : SEQUENTIAL_COLORS.findIndex(function (color) {
+      return color === selectedColor;
+    });
+    switch (keyPressed) {
+      case 'ArrowRight':
+      case 'Tab':
+        var nextIndex = (currentIndex + 1) % amountOfColors;
+        setSelectedColorIndex(nextIndex);
+        break;
+      case 'ArrowLeft':
+        var prevIndex = (currentIndex - 1 + amountOfColors) % amountOfColors;
+        setSelectedColorIndex(prevIndex);
+        break;
+      case 'ArrowDown':
+        var downIndex = (currentIndex + 5) % amountOfColors;
+        setSelectedColorIndex(downIndex);
+        break;
+      case 'ArrowUp':
+        var upIndex = (currentIndex - 5 + amountOfColors) % amountOfColors;
+        setSelectedColorIndex(upIndex);
+        break;
+    }
+    event.preventDefault();
+  };
+  useKeyPress(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab'], handleArrowNavigation);
+  return {
+    selectedColorIndex: selectedColorIndex,
+    setSelectedColorIndex: setSelectedColorIndex
+  };
+};
+
+var ColorsOverlay = function ColorsOverlay(_ref) {
+  var _triggerRef$current;
+  var onClose = _ref.onClose,
+    triggerRef = _ref.triggerRef,
+    selectedColor = _ref.selectedColor,
+    onSelect = _ref.onSelect;
+  var overlayRef = React.useRef(null);
+  var GAP = 8; // Gap between the trigger and the overlay
+  var triggerRect = (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.getBoundingClientRect();
+  var overlayStyle = triggerRect ? {
+    top: triggerRect.bottom + window.scrollY + GAP,
+    left: triggerRect.left + window.scrollX
+  } : {
+    display: 'none'
+  };
+  var _useColorKeyboardNavi = useColorKeyboardNavigation(selectedColor || ''),
+    selectedColorIndex = _useColorKeyboardNavi.selectedColorIndex,
+    setSelectedColorIndex = _useColorKeyboardNavi.setSelectedColorIndex;
+  useOnClickOutside(overlayRef, onClose);
+  var selectedColorByIndex = selectedColorIndex !== null ? SEQUENTIAL_COLORS[selectedColorIndex] : undefined;
+  var handleEnterPress = React.useCallback(function () {
+    if (selectedColorByIndex) {
+      onSelect(selectedColorByIndex);
+    }
+  }, [selectedColorByIndex, onSelect]);
+  useKeyPress(['Escape'], onClose);
+  useKeyPress(['Enter'], handleEnterPress);
+  return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
+    style: overlayStyle,
+    ref: overlayRef,
+    className: styles$8['color-overlay'],
+    role: "dialog"
+  }, SEQUENTIAL_COLORS.map(function (color, index) {
+    return React__default["default"].createElement(ColorDisplay, {
+      key: color,
+      color: color,
+      isSelected: color === selectedColor,
+      isFocused: index === selectedColorIndex,
+      onClick: function onClick() {
+        return onSelect(color);
+      },
+      onHover: function onHover() {
+        return setSelectedColorIndex(null);
+      }
+    });
+  })));
+};
+var ColorDisplay = function ColorDisplay(_ref2) {
+  var _classNames;
+  var color = _ref2.color,
+    isSelected = _ref2.isSelected,
+    isFocused = _ref2.isFocused,
+    _onClick = _ref2.onClick,
+    onHover = _ref2.onHover;
+  return React__default["default"].createElement("button", {
+    className: styles$8['color-overlay__color-display-container'],
+    onClick: function onClick() {
+      return _onClick(color);
+    }
+  }, React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$8['color-overlay__color-display-circle'], (_classNames = {}, _classNames[styles$8['color-overlay__color-display-circle--selected']] = isSelected, _classNames[styles$8['color-overlay__color-display-circle--focused']] = isFocused, _classNames)),
+    onMouseEnter: onHover,
+    style: {
+      backgroundColor: COLORS[color]
+    }
+  }));
+};
+
+var styles$7 = {"color-swatch":"_UUuiJ"};
+
+var ColorSwatch = function ColorSwatch(_ref) {
+  var color = _ref.color;
+  return React__default["default"].createElement("div", {
+    className: styles$7['color-swatch'],
+    style: {
+      backgroundColor: color
+    }
+  });
+};
+
+var ColorFieldElement = function ColorFieldElement(props, ref) {
+  var _useTextField = useTextField(_extends({}, props, {
+      ref: ref
+    })),
+    inputProps = _useTextField.inputProps,
+    fieldProps = _useTextField.fieldProps;
+  var triggerRef = React.useRef(null);
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var colorKeys = Object.keys(COLORS);
+  var getCurrentColor = function getCurrentColor() {
+    if (inputProps.value && colorKeys.includes(inputProps.value)) {
+      return COLORS[inputProps.value];
+    }
+    return inputProps.value || 'transparent';
+  };
+  return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
+    prefix: React__default["default"].createElement(ColorSwatch, {
+      color: getCurrentColor()
+    }),
+    suffix: React__default["default"].createElement(IconChevronDown, {
+      size: "medium"
+    })
+  }, React__default["default"].createElement("input", _extends({}, inputProps, {
+    readOnly: true,
+    onClick: function onClick() {
+      if (triggerRef.current) {
+        setIsOpen(function (prev) {
+          return !prev;
+        });
+      }
+    },
+    ref: triggerRef,
+    value: "",
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' && !isOpen) {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+    }
+  })))), isOpen && React__default["default"].createElement(ColorsOverlay, {
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    triggerRef: triggerRef,
+    selectedColor: inputProps.value,
+    onSelect: function onSelect(color) {
+      inputProps.onChange({
+        target: {
+          value: color
+        }
+      });
+      setIsOpen(false);
+    }
+  }));
+};
+var ColorField = React.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"};
@@ -15281,6 +15715,7 @@ exports.Card = Card;
 exports.CheckboxField = CheckboxField;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
+exports.ColorField = ColorField;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
@@ -15338,11 +15773,13 @@ exports.IconCameraSlash = IconCameraSlash;
 exports.IconCashRegister = IconCashRegister;
 exports.IconChartBar = IconChartBar;
 exports.IconCheck = IconCheck;
+exports.IconCheckCircle = IconCheckCircle;
 exports.IconCheckCircleIncomplete = IconCheckCircleIncomplete;
 exports.IconChevronDown = IconChevronDown;
 exports.IconChevronLeft = IconChevronLeft;
 exports.IconChevronRight = IconChevronRight;
 exports.IconChevronUp = IconChevronUp;
+exports.IconCircleHalfStroke = IconCircleHalfStroke;
 exports.IconClipboardList = IconClipboardList;
 exports.IconClock = IconClock;
 exports.IconClockExclamation = IconClockExclamation;