@7shifts/sous-chef 4.12.0 → 4.12.1

package/dist/index.js

@@ -310,7 +310,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var styles$1K = {"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$1L = {"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,
@@ -429,7 +429,7 @@ var Flex = function Flex(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
-  var className = classnames__default["default"](styles$1K['flex'], extraClass, (_classNames = {}, _classNames[styles$1K['align-start']] = alignItems === 'flex-start', _classNames[styles$1K['align-end']] = alignItems === 'flex-end', _classNames[styles$1K['align-center']] = alignItems === 'center', _classNames[styles$1K['justify-start']] = justifyContent === 'start', _classNames[styles$1K['justify-end']] = justifyContent === 'end', _classNames[styles$1K['justify-center']] = justifyContent === 'center', _classNames[styles$1K['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1K['inline-flex']] = inlineFlex, _classNames));
+  var className = classnames__default["default"](styles$1L['flex'], extraClass, (_classNames = {}, _classNames[styles$1L['align-start']] = alignItems === 'flex-start', _classNames[styles$1L['align-end']] = alignItems === 'flex-end', _classNames[styles$1L['align-center']] = alignItems === 'center', _classNames[styles$1L['justify-start']] = justifyContent === 'start', _classNames[styles$1L['justify-end']] = justifyContent === 'end', _classNames[styles$1L['justify-center']] = justifyContent === 'center', _classNames[styles$1L['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1L['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({
@@ -445,7 +445,7 @@ var Flex = function Flex(_ref) {
     var _classNames2;
     return React__default["default"].createElement("div", {
       key: i,
-      className: classnames__default["default"](styles$1K['flex__item'], (_classNames2 = {}, _classNames2[styles$1K['flex__item--flexible']] = flexItems, _classNames2)),
+      className: classnames__default["default"](styles$1L['flex__item'], (_classNames2 = {}, _classNames2[styles$1L['flex__item--flexible']] = flexItems, _classNames2)),
       style: {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
       }
@@ -467,7 +467,7 @@ var Stack = function Stack(_ref) {
   }));
 };
 
-var styles$1J = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
+var styles$1K = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
 var _excluded$ep = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
@@ -490,7 +490,7 @@ var Toggle = function Toggle(_ref) {
   return React__default["default"].createElement(Stack, {
     space: 8
   }, React__default["default"].createElement("label", _extends({}, dataProps, {
-    className: styles$1J['toggle']
+    className: styles$1K['toggle']
   }), React__default["default"].createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -499,11 +499,11 @@ var Toggle = function Toggle(_ref) {
     id: id,
     "data-testid": testId
   }), React__default["default"].createElement("span", {
-    className: styles$1J['toggle__switch']
+    className: styles$1K['toggle__switch']
   }), label && React__default["default"].createElement("span", {
-    className: styles$1J['toggle__label']
+    className: styles$1K['toggle__label']
   }, label)), caption && React__default["default"].createElement("span", {
-    className: styles$1J['toggle__caption']
+    className: styles$1K['toggle__caption']
   }, caption));
 };
 
@@ -523,7 +523,7 @@ var SPINNER_THEMES = {
   PRIDE: 'pride'
 };
 
-var styles$1I = {"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$1J = {"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;
@@ -536,9 +536,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$1I['spinner--block']] = block, _classnames))
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1J['spinner--block']] = block, _classnames))
   }, React__default["default"].createElement("svg", {
-    className: styles$1I['spinner'],
+    className: styles$1J['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
@@ -613,7 +613,7 @@ var Spinner = function Spinner(_ref) {
     offset: "1",
     stopColor: "#760088"
   }))), React__default["default"].createElement("circle", {
-    className: classnames__default["default"](styles$1I['path'], styles$1I["path--" + theme]),
+    className: classnames__default["default"](styles$1J['path'], styles$1J["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -623,9 +623,9 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var styles$1H = {"tooltip":"_Ydu2O"};
+var styles$1I = {"tooltip":"_Ydu2O"};
 
-var styles$1G = {"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$1H = {"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',
@@ -824,15 +824,15 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames__default["default"](styles$1G['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1G['tooltip-overlay--visible']] = isVisible, _classnames[styles$1G['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1G['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
+    className: classnames__default["default"](styles$1H['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1H['tooltip-overlay--visible']] = isVisible, _classnames[styles$1H['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1H['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$1G['tooltip-overlay__header']
+    className: styles$1H['tooltip-overlay__header']
   }, header), children)), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1G['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1G['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1G['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1G['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1G['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1G['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
+    className: classnames__default["default"](styles$1H['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1H['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1H['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1H['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1H['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1H['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
     }),
@@ -950,7 +950,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     }), overlayElement);
   }
   return React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1H['tooltip'])
+    className: classnames__default["default"](styles$1I['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -963,7 +963,7 @@ var isTooltipCompatible = function isTooltipCompatible(element) {
   return React__default["default"].isValidElement(element) && typeof element.type === 'string';
 };
 
-var styles$1F = {"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$1G = {"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',
@@ -1058,7 +1058,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames__default["default"](styles$1F['button'], (_classnames = {}, _classnames[styles$1F['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1F['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1F['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1F['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1F['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1F['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1F['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1F['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1F['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1F['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1F['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1F['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1F['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1F['button--loading']] = loading, _classnames[styles$1F['button--icon-only']] = isIconOnly, _classnames[styles$1F['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1F['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    className: classnames__default["default"](styles$1G['button'], (_classnames = {}, _classnames[styles$1G['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1G['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1G['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1G['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1G['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1G['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1G['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1G['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1G['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1G['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1G['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1G['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1G['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1G['button--loading']] = loading, _classnames[styles$1G['button--icon-only']] = isIconOnly, _classnames[styles$1G['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1G['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -1071,7 +1071,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default["default"].createElement("div", {
-    className: styles$1F['button__spinner']
+    className: styles$1G['button__spinner']
   }, React__default["default"].createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1081,7 +1081,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default["default"].createElement("div", {
-      className: styles$1F['disabled-button-wrapper']
+      className: styles$1G['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -10363,9 +10363,9 @@ var IconGreatMonochromatic = React.forwardRef(function (_ref, ref) {
 });
 IconGreatMonochromatic.displayName = 'IconGreatMonochromatic';
 
-var styles$1E = {"pagination-controls":"_S1co-"};
+var styles$1F = {"pagination-controls":"_S1co-"};
 
-var styles$1D = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
+var styles$1E = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
   var _classNames;
@@ -10373,9 +10373,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$1D['keyboard-key'], (_classNames = {}, _classNames[styles$1D['keyboard-key--light']] = theme === 'light', _classNames))
+    className: classnames__default["default"](styles$1E['keyboard-key'], (_classNames = {}, _classNames[styles$1E['keyboard-key--light']] = theme === 'light', _classNames))
   }, React__default["default"].createElement("span", {
-    className: styles$1D['keyboard-key__character']
+    className: styles$1E['keyboard-key__character']
   }, children));
 };
 
@@ -10592,7 +10592,7 @@ var PaginationControls = function PaginationControls(_ref) {
     }
   });
   return React__default["default"].createElement("div", _extends({}, dataProps, {
-    className: styles$1E['pagination-controls'],
+    className: styles$1F['pagination-controls'],
     "data-testid": testId
   }), React__default["default"].createElement(Button, {
     disabled: !hasPrevious,
@@ -10622,7 +10622,7 @@ var LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1C = {"link":"_EiQ4c","link--contrast":"_weJDR"};
+var styles$1D = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 var _excluded$bq = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -10639,7 +10639,7 @@ var Link = function Link(_ref) {
     dataProps = _getDataProps.dataProps;
   var ref = React__default["default"].useRef(null);
   return React__default["default"].createElement("a", _extends({}, dataProps, {
-    className: classnames__default["default"](styles$1C['link'], (_classNames = {}, _classNames[styles$1C['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1C['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
+    className: classnames__default["default"](styles$1D['link'], (_classNames = {}, _classNames[styles$1D['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1D['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
     target: target,
     onClick: onClick,
@@ -10662,7 +10662,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default["default"].useContext(DropdownContext);
 };
 
-var styles$1B = {"dropdown-pane":"_sp-pT"};
+var styles$1C = {"dropdown-pane":"_sp-pT"};
 
 var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition$1 = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
@@ -10800,7 +10800,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$1B['dropdown-pane'], (_classNames = {}, _classNames[styles$1B['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
+    className: classnames__default["default"](styles$1C['dropdown-pane'], (_classNames = {}, _classNames[styles$1C['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -10829,7 +10829,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$1A = {"dropdown__trigger":"_AktVc"};
+var styles$1B = {"dropdown__trigger":"_AktVc"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -10840,7 +10840,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1z = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1A = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -10893,7 +10893,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default["default"].createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames__default["default"](styles$1z['label'], (_classNames = {}, _classNames[styles$1z['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames__default["default"](styles$1A['label'], (_classNames = {}, _classNames[styles$1A['label--truncate']] = shouldTruncate, _classNames))
   }, children);
   if (showTooltip) {
     return React__default["default"].createElement(Tooltip, {
@@ -10904,18 +10904,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$1y = {"caption":"_Qrxg5"};
+var styles$1z = {"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$1y['caption']
+    className: styles$1z['caption']
   }, children);
 };
 
-var styles$1x = {"error-message":"_eS4YO"};
+var styles$1y = {"error-message":"_eS4YO"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -10923,7 +10923,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     testId = _ref.testId;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$1x['error-message'],
+    className: styles$1y['error-message'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     space: 8,
@@ -10962,7 +10962,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$1w = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text__paragraph":"_T91Eo","text__tagline":"_uetB-","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$1x = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text__paragraph":"_T91Eo","text__tagline":"_uetB-","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$bp = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -10988,7 +10988,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$1w['text'], (_classnames = {}, _classnames[styles$1w['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1w['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1w['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1w['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1w['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1w['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1w['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1w['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1w['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1w['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1w['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1w['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1w['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1w['text__span']] = as === TEXT_TYPES.SPAN, _classnames[styles$1w['text__paragraph']] = as === TEXT_TYPES.PARAGRAPH, _classnames[styles$1w['text__tagline']] = as === TEXT_TYPES.TAGLINE, _classnames)),
+    className: classnames__default["default"](styles$1x['text'], (_classnames = {}, _classnames[styles$1x['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1x['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1x['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1x['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1x['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1x['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1x['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1x['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1x['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1x['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1x['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1x['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1x['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1x['text__span']] = as === TEXT_TYPES.SPAN, _classnames[styles$1x['text__paragraph']] = as === TEXT_TYPES.PARAGRAPH, _classnames[styles$1x['text__tagline']] = as === TEXT_TYPES.TAGLINE, _classnames)),
     'data-testid': testId
   }, dataProps, other, {
     ref: ref
@@ -11003,21 +11003,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$1w['text--bold'], styles$1w['text'])
+    className: classnames__default["default"](styles$1x['text--bold'], styles$1x['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1w['text--underline'], styles$1w['text'])
+    className: classnames__default["default"](styles$1x['text--underline'], styles$1x['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1w['text--italic'], styles$1w['text'])
+    className: classnames__default["default"](styles$1x['text--italic'], styles$1x['text'])
   }, children);
 };
 
@@ -11166,7 +11166,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$1v = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
+var styles$1w = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
 
 var _excluded$bn = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 var useTextField = function useTextField(_ref) {
@@ -11206,7 +11206,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1v['text-field'], (_classnames = {}, _classnames[styles$1v['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1w['text-field'], (_classnames = {}, _classnames[styles$1w['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -11236,7 +11236,7 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var styles$1u = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
+var styles$1v = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -11271,16 +11271,16 @@ var AffixContainer = function AffixContainer(_ref) {
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  var classes = classnames__default["default"](styles$1u['affix-container'], (_classnames = {}, _classnames[styles$1u['affix-container--prefixed']] = hasPrefix, _classnames[styles$1u['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames__default["default"](styles$1v['affix-container'], (_classnames = {}, _classnames[styles$1v['affix-container--prefixed']] = hasPrefix, _classnames[styles$1v['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$1u['prefix'],
+    className: styles$1v['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default["default"].createElement("div", {
-    className: styles$1u['suffix'],
+    className: styles$1v['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -11494,7 +11494,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$1A['dropdown__trigger'],
+    className: styles$1B['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default["default"].createElement(DropdownPane, {
@@ -11508,7 +11508,7 @@ var Dropdown = function Dropdown(_ref) {
   }, children));
 };
 
-var styles$1t = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
+var styles$1u = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -11673,14 +11673,14 @@ var updateIconSize = function updateIconSize(child) {
   }));
 };
 
-var styles$1s = {"dropdown-list-divider":"_ISJ4M"};
+var styles$1t = {"dropdown-list-divider":"_ISJ4M"};
 
-var styles$1r = {"dropdown-list-divider-line":"_GlMQ1"};
+var styles$1s = {"dropdown-list-divider-line":"_GlMQ1"};
 
 var DropdownListDividerLine = function DropdownListDividerLine(_ref) {
   var testId = _ref.testId;
   return React__default["default"].createElement("div", {
-    className: styles$1r['dropdown-list-divider-line'],
+    className: styles$1s['dropdown-list-divider-line'],
     "data-testid": testId
   });
 };
@@ -11695,14 +11695,14 @@ var DropdownListDivider = function DropdownListDivider(_ref) {
     });
   }
   return React__default["default"].createElement(React.Fragment, null, (line === 'top' || line === 'both') && React__default["default"].createElement(DropdownListDividerLine, null), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1s['dropdown-list-divider']),
+    className: classnames__default["default"](styles$1t['dropdown-list-divider']),
     "data-testid": testId
   }, children), (line === 'bottom' || line === 'both') && React__default["default"].createElement(DropdownListDividerLine, null));
 };
 
-var styles$1q = {"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","dropdown-list-item__suffix-button":"_rvaeI"};
+var styles$1r = {"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","dropdown-list-item__suffix-button":"_rvaeI"};
 
-var styles$1p = {"dropdown-submenu":"_X4fIx"};
+var styles$1q = {"dropdown-submenu":"_X4fIx"};
 
 var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -11721,7 +11721,7 @@ var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
     // so no keyboard handler is needed.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React__default["default"].createElement("div", {
-      className: styles$1p['dropdown-submenu'],
+      className: styles$1q['dropdown-submenu'],
       "data-submenu-direction": direction,
       style: position || DEFAULT_POSITION,
       onMouseEnter: openSubmenu,
@@ -11924,20 +11924,20 @@ var DropdownListItem = function DropdownListItem(_ref) {
     onClick && onClick(e);
   };
   var childrenContainer = React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__container']
+    className: styles$1r['dropdown-list-item__container']
   }, prefix && React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__prefix']
+    className: styles$1r['dropdown-list-item__prefix']
   }, prefix), React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__content']
+    className: styles$1r['dropdown-list-item__content']
   }, React__default["default"].createElement(Stack, {
     space: 0,
     flex: [1]
   }, children, caption && React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__caption']
+    className: styles$1r['dropdown-list-item__caption']
   }, caption))), (suffix || submenu) && React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__suffix']
+    className: styles$1r['dropdown-list-item__suffix']
   }, suffix && openSubmenuOnSuffixClick && submenu ? React__default["default"].createElement("button", {
-    className: styles$1q['dropdown-list-item__suffix-button'],
+    className: styles$1r['dropdown-list-item__suffix-button'],
     onClick: function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -11948,19 +11948,19 @@ var DropdownListItem = function DropdownListItem(_ref) {
     "aria-label": "Open submenu",
     disabled: disabled
   }, suffix) : suffix, submenu && !suffix && React__default["default"].createElement("div", {
-    className: styles$1q['dropdown-list-item__suffix-spot']
+    className: styles$1r['dropdown-list-item__suffix-spot']
   }), submenu && !openSubmenuOnSuffixClick && React__default["default"].createElement(IconChevronRight, {
     size: "small"
   })));
   var linkItem = href && (reloadDocument ? React__default["default"].createElement("a", {
     href: href,
-    className: styles$1q['dropdown-list-item__link'],
+    className: styles$1r['dropdown-list-item__link'],
     target: target,
     tabIndex: -1
   }, childrenContainer) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
     target: target,
-    className: styles$1q['dropdown-list-item__link'],
+    className: styles$1r['dropdown-list-item__link'],
     reloadDocument: false,
     tabIndex: -1,
     "data-testid": testId
@@ -11968,7 +11968,7 @@ 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$1q['dropdown-list-item'], (_classNames = {}, _classNames[styles$1q['dropdown-list-item--selected']] = selected, _classNames[styles$1q['dropdown-list-item--disabled']] = disabled, _classNames)),
+      className: classnames__default["default"](styles$1r['dropdown-list-item'], (_classNames = {}, _classNames[styles$1r['dropdown-list-item--selected']] = selected, _classNames[styles$1r['dropdown-list-item--disabled']] = disabled, _classNames)),
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
@@ -12110,7 +12110,7 @@ var DropdownList = function DropdownList(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightItemIndex]);
   return React__default["default"].createElement("ul", {
-    className: styles$1t['dropdown-list'],
+    className: styles$1u['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
@@ -12122,7 +12122,7 @@ var DropdownList = function DropdownList(_ref) {
     var divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$1t['dropdown-list__item'], (_classNames = {}, _classNames[styles$1t['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
+      className: classnames__default["default"](styles$1u['dropdown-list__item'], (_classNames = {}, _classNames[styles$1u['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
       onMouseEnter: divider ? undefined : function () {
         return setFocusOnItem(index);
       },
@@ -12148,7 +12148,7 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-var styles$1o = {"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$1p = {"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
@@ -12186,19 +12186,19 @@ var Card = function Card(_ref) {
       isCardMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1o['card']),
+    className: classnames__default["default"](styles$1p['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$1o['card__body'], styles$1o['card__body--interactive'], (_classnames = {}, _classnames[styles$1o['card__body--disabled']] = disabled, _classnames[styles$1o['card__body--focus']] = isSelected, _classnames[styles$1o['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames__default["default"](styles$1p['card__body'], styles$1p['card__body--interactive'], (_classnames = {}, _classnames[styles$1p['card__body--disabled']] = disabled, _classnames[styles$1p['card__body--focus']] = isSelected, _classnames[styles$1p['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$1o['card__body'], (_classnames2 = {}, _classnames2[styles$1o['card__body--disabled']] = disabled, _classnames2[styles$1o['card__body--focus']] = isSelected, _classnames2[styles$1o['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames__default["default"](styles$1p['card__body'], (_classnames2 = {}, _classnames2[styles$1p['card__body--disabled']] = disabled, _classnames2[styles$1p['card__body--focus']] = isSelected, _classnames2[styles$1p['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1o['card__kebab'], (_classnames3 = {}, _classnames3[styles$1o['card__kebab--disabled']] = disabled, _classnames3))
+    className: classnames__default["default"](styles$1p['card__kebab'], (_classnames3 = {}, _classnames3[styles$1p['card__kebab--disabled']] = disabled, _classnames3))
   }, React__default["default"].createElement(KebabMenu, {
     actions: onClose ? actions.concat({
       action: 'dismiss',
@@ -12206,14 +12206,14 @@ var Card = function Card(_ref) {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1o['card__close'], (_classnames4 = {}, _classnames4[styles$1o['card__close--disabled']] = disabled, _classnames4))
+    className: classnames__default["default"](styles$1p['card__close'], (_classnames4 = {}, _classnames4[styles$1p['card__close--disabled']] = disabled, _classnames4))
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
   }, React__default["default"].createElement(IconTimes, null)))));
 };
 
-var styles$1n = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
+var styles$1o = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
 
 /**
  * @deprecated Use `<EmptyState as='card' />` instead
@@ -12233,7 +12233,7 @@ var CalloutCard = function CalloutCard(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement("div", {
-    className: styles$1n['callout-card__header']
+    className: styles$1o['callout-card__header']
   }, React__default["default"].createElement(Text, {
     as: "body",
     color: "primary-color"
@@ -12248,7 +12248,7 @@ var CalloutCard = function CalloutCard(_ref) {
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default["default"].createElement("div", {
-    className: styles$1n['callout-card__close']
+    className: styles$1o['callout-card__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -12266,7 +12266,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$1m = {"breadcrumb-item":"_fo7-A"};
+var styles$1n = {"breadcrumb-item":"_fo7-A"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -12280,24 +12280,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$1m['breadcrumb-item'],
+    className: styles$1n['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
-    className: styles$1m['breadcrumb-item'],
+    className: styles$1n['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$1l = {"page-breadcrumbs":"_QjIgc"};
+var styles$1m = {"page-breadcrumbs":"_QjIgc"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default["default"].createElement("div", {
-    className: styles$1l['page-breadcrumbs']
+    className: styles$1m['page-breadcrumbs']
   }, React__default["default"].createElement(Breadcrumbs, null, items));
 };
 var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
@@ -12319,7 +12319,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$1k = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
+var styles$1l = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -12344,7 +12344,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$1k['page'], (_classNames = {}, _classNames[styles$1k['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$1k['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames__default["default"](styles$1l['page'], (_classNames = {}, _classNames[styles$1l['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$1l['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Stack, {
     space: 20
@@ -12364,22 +12364,23 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default["default"].createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$1j = {"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$1k = {"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$1i = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
+var styles$1j = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--with-badge":"_VudDE","menu-item__badge":"_vErBS"};
 
-var styles$1h = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
+var styles$1i = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
-var styles$1g = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B","overlay--draggable":"_6SSP8","content--draggable":"_5rHXj","draggable-inner":"_cq2CU"};
+var styles$1h = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B","content--with-tab-list":"_DMdi7","overlay--draggable":"_6SSP8","content--draggable":"_5rHXj","draggable-inner":"_cq2CU","draggable-inner--with-tab-list":"_V4Rz2"};
 
-var styles$1f = {"modal-header":"_VRlTj","modal-header__header":"_GH74U","modal-header__sub-header":"_OlX-6","modal-header--with-shadow":"_brFTl","modal-header__close-button":"_LTnd3","modal-header__top-bar":"_7V-hB","modal-header__top-bar--with-image":"_docda"};
+var styles$1g = {"modal-header":"_VRlTj","modal-header__header":"_GH74U","modal-header__sub-header":"_OlX-6","modal-header--with-shadow":"_brFTl","modal-header__close-button":"_LTnd3","modal-header__top-bar":"_7V-hB","modal-header__top-bar--with-image":"_docda"};
 
 var ModalContext = React.createContext({
   isModalMounted: false,
   modalBodyRef: {
     current: null
   },
-  draggable: false
+  draggable: false,
+  hasTabList: false
 });
 var useModalContext = function useModalContext() {
   var context = React.useContext(ModalContext);
@@ -12427,30 +12428,68 @@ var ModalHeader = function ModalHeader(_ref) {
     subHeader = _ref.subHeader,
     onClose = _ref.onClose,
     loading = _ref.loading,
-    imageSrc = _ref.imageSrc;
+    imageSrc = _ref.imageSrc,
+    iconBar = _ref.iconBar;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   var _useScrollDetector = useScrollDetector(modalBodyRef),
     hasScrollTop = _useScrollDetector.hasScrollTop;
+  var iconBarTheme = imageSrc ? 'link-contrast' : 'link-icon';
+  var themedIconBar = iconBar ? _injectButtonTheme(iconBar, iconBarTheme) : null;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['modal-header'], (_classNames = {}, _classNames[styles$1f['modal-header--with-shadow']] = hasScrollTop, _classNames))
+    className: classnames__default["default"](styles$1g['modal-header'], (_classNames = {}, _classNames[styles$1g['modal-header--with-shadow']] = hasScrollTop && !hasTabList, _classNames))
   }, React__default["default"].createElement(Stack, {
     space: 0
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1f['modal-header__top-bar'], (_classNames2 = {}, _classNames2[styles$1f['modal-header__top-bar--with-image']] = !!imageSrc, _classNames2)),
+    className: classnames__default["default"](styles$1g['modal-header__top-bar'], (_classNames2 = {}, _classNames2[styles$1g['modal-header__top-bar--with-image']] = !!imageSrc, _classNames2)),
     style: imageSrc ? {
       backgroundImage: "url(" + imageSrc + ")"
     } : undefined
-  }, onClose && React__default["default"].createElement(Button, {
+  }, themedIconBar, onClose && React__default["default"].createElement(Button, {
     theme: imageSrc ? 'link-contrast' : 'link-icon',
     onClick: onClose,
     disabled: loading
   }, React__default["default"].createElement(IconTimes, null))), header && React__default["default"].createElement("div", {
-    className: styles$1f['modal-header__header']
+    className: styles$1g['modal-header__header']
   }, header), subHeader && React__default["default"].createElement("div", {
-    className: styles$1f['modal-header__sub-header']
+    className: styles$1g['modal-header__sub-header']
   }, subHeader)));
 };
+var _injectButtonTheme = function injectButtonTheme(node, theme) {
+  if (Array.isArray(node)) {
+    return node.map(function (child) {
+      return _injectButtonTheme(child, theme);
+    });
+  }
+  if (!React__default["default"].isValidElement(node)) return node;
+  if (node.type === Button) {
+    return React__default["default"].cloneElement(node, {
+      theme: theme
+    });
+  }
+  if (node.type === React__default["default"].Fragment) {
+    var children = React__default["default"].Children.map(node.props.children, function (child) {
+      return _injectButtonTheme(child, theme);
+    });
+    return React__default["default"].cloneElement(node, {}, children);
+  }
+  return node;
+};
+
+var styles$1f = {"tab-zone":"_4hqPT","tab-zone--with-shadow":"_dorMR"};
+
+var ModalTabZone = function ModalTabZone(_ref) {
+  var _cx;
+  var children = _ref.children;
+  var _useModalContext = useModalContext(),
+    modalBodyRef = _useModalContext.modalBodyRef;
+  var _useScrollDetector = useScrollDetector(modalBodyRef),
+    hasScrollTop = _useScrollDetector.hasScrollTop;
+  return React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$1f['tab-zone'], (_cx = {}, _cx[styles$1f['tab-zone--with-shadow']] = hasScrollTop, _cx))
+  }, children);
+};
 
 var DEFAULT_WIDTH = 566;
 var DEFAULT_HEIGHT = 266;
@@ -12540,7 +12579,7 @@ function useDraggableModal(_ref) {
   };
 }
 
-var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "imageSrc", "draggable", "initialPosition"];
+var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "imageSrc", "draggable", "initialPosition", "tabList", "iconBar"];
 // react-draggable declares `props: DraggableProps` on the class instance, overriding
 // the `React.Component<Partial<DraggableProps>>` generic. This cast restores the
 // intended partial-props behaviour for JSX usage.
@@ -12550,6 +12589,7 @@ var DRAG_HANDLE_CLASS = 'modal-drag-handle';
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
 var Modal = function Modal(_ref) {
+  var _cx;
   var children = _ref.children,
     header = _ref.header,
     subHeader = _ref.subHeader,
@@ -12569,6 +12609,8 @@ var Modal = function Modal(_ref) {
     _ref$draggable = _ref.draggable,
     draggable = _ref$draggable === void 0 ? false : _ref$draggable,
     initialPosition = _ref.initialPosition,
+    tabList = _ref.tabList,
+    iconBar = _ref.iconBar,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$bk);
   var _useDraggableModal = useDraggableModal({
       width: width,
@@ -12603,27 +12645,24 @@ var Modal = function Modal(_ref) {
       removeDataPrefix: true
     }),
     dataProps = _getDataProps.dataProps;
-  var modalContent = React__default["default"].createElement(React.Fragment, null, draggable ? React__default["default"].createElement("div", {
-    className: DRAG_HANDLE_CLASS
-  }, React__default["default"].createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading,
-    imageSrc: imageSrc
-  })) : React__default["default"].createElement(ModalHeader, {
+  var modalHeader = React__default["default"].createElement(ModalHeader, {
     header: header,
     subHeader: subHeader,
     onClose: onClose,
     loading: loading,
-    imageSrc: imageSrc
-  }), React__default["default"].createElement(ModalContext.Provider, {
+    imageSrc: imageSrc,
+    iconBar: iconBar
+  });
+  var modalContent = React__default["default"].createElement(ModalContext.Provider, {
     value: {
       isModalMounted: true,
       modalBodyRef: modalBodyRef,
-      draggable: draggable
+      draggable: draggable,
+      hasTabList: !!tabList
     }
-  }, children));
+  }, draggable ? React__default["default"].createElement("div", {
+    className: DRAG_HANDLE_CLASS
+  }, modalHeader) : modalHeader, tabList && React__default["default"].createElement(ModalTabZone, null, tabList), children);
   return React__default["default"].createElement(ReactModal__default["default"], {
     isOpen: true,
     testId: testId,
@@ -12636,14 +12675,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: classnames__default["default"](styles$1g['overlay'], draggable && styles$1g['overlay--draggable']),
-      afterOpen: styles$1g['overlay--after-open'],
-      beforeClose: styles$1g['overlay--before-close']
+      base: classnames__default["default"](styles$1h['overlay'], draggable && styles$1h['overlay--draggable']),
+      afterOpen: styles$1h['overlay--after-open'],
+      beforeClose: styles$1h['overlay--before-close']
     },
     className: {
-      base: classnames__default["default"](styles$1g['content'], draggable && styles$1g['content--draggable']),
-      afterOpen: styles$1g['content--after-open'],
-      beforeClose: styles$1g['content--before-close']
+      base: classnames__default["default"](styles$1h['content'], draggable && styles$1h['content--draggable'], tabList && styles$1h['content--with-tab-list']),
+      afterOpen: styles$1h['content--after-open'],
+      beforeClose: styles$1h['content--before-close']
     },
     data: dataProps
   }, draggable ? React__default["default"].createElement(Draggable, {
@@ -12652,7 +12691,7 @@ var Modal = function Modal(_ref) {
     bounds: draggableBounds
   }, React__default["default"].createElement("div", {
     ref: draggableCallbackRef,
-    className: styles$1g['draggable-inner'],
+    className: classnames__default["default"](styles$1h['draggable-inner'], (_cx = {}, _cx[styles$1h['draggable-inner--with-tab-list']] = !!tabList, _cx)),
     style: {
       width: width,
       height: height,
@@ -12665,15 +12704,17 @@ Modal.setAppElement = function (rootElement) {
   ReactModal__default["default"].setAppElement(rootElement);
 };
 
-var styles$1e = {"modal-body":"_4YK4k"};
+var styles$1e = {"modal-body":"_4YK4k","modal-body--tab-mode":"_2-PSE"};
 
 var ModalBody = function ModalBody(_ref) {
+  var _classNames;
   var children = _ref.children,
     testId = _ref.testId;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1e['modal-body']),
+    className: classnames__default["default"](styles$1e['modal-body'], (_classNames = {}, _classNames[styles$1e['modal-body--tab-mode']] = hasTabList, _classNames)),
     "data-testid": testId,
     ref: modalBodyRef
   }, React__default["default"].createElement("div", {
@@ -12681,7 +12722,7 @@ var ModalBody = function ModalBody(_ref) {
   }, children));
 };
 
-var styles$1d = {"modal-footer":"_bezlP","modal-footer--with-shadow":"_hC4vb"};
+var styles$1d = {"modal-footer":"_bezlP","modal-footer--with-shadow":"_hC4vb","modal-footer--tab-mode":"_o1kk7"};
 
 var updateButtonProps$1 = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -12731,7 +12772,8 @@ var FooterContainer = function FooterContainer(_ref2) {
   var children = _ref2.children,
     testId = _ref2.testId;
   var _useModalContext = useModalContext(),
-    modalBodyRef = _useModalContext.modalBodyRef;
+    modalBodyRef = _useModalContext.modalBodyRef,
+    hasTabList = _useModalContext.hasTabList;
   var _useScrollDetector = useScrollDetector(modalBodyRef),
     hasScrollBottom = _useScrollDetector.hasScrollBottom;
   var childrenItens = React__default["default"].Children.toArray(children);
@@ -12740,7 +12782,7 @@ var FooterContainer = function FooterContainer(_ref2) {
     displayName: 'Inline'
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1d['modal-footer'], (_classNames = {}, _classNames[styles$1d['modal-footer--with-shadow']] = hasScrollBottom, _classNames)),
+    className: classnames__default["default"](styles$1d['modal-footer'], (_classNames = {}, _classNames[styles$1d['modal-footer--with-shadow']] = hasScrollBottom, _classNames[styles$1d['modal-footer--tab-mode']] = hasTabList, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: "end",
@@ -13615,7 +13657,7 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1h['badge'], (_classnames = {}, _classnames[styles$1h['badge--success']] = theme === 'success', _classnames[styles$1h['badge--danger']] = theme === 'danger', _classnames[styles$1h['badge--info']] = theme === 'info', _classnames[styles$1h['badge--warning']] = theme === 'warning', _classnames[styles$1h['badge--numeric']] = Number.isFinite(children), _classnames)),
+    className: classnames__default["default"](styles$1i['badge'], (_classnames = {}, _classnames[styles$1i['badge--success']] = theme === 'success', _classnames[styles$1i['badge--danger']] = theme === 'danger', _classnames[styles$1i['badge--info']] = theme === 'info', _classnames[styles$1i['badge--warning']] = theme === 'warning', _classnames[styles$1i['badge--numeric']] = Number.isFinite(children), _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -13629,23 +13671,23 @@ var MenuItem = function MenuItem(_ref) {
   var _classNames, _classNames2;
   var menu = _ref.menu;
   return React__default["default"].createElement("li", {
-    className: classnames__default["default"](styles$1i['menu-item'], (_classNames = {}, _classNames[styles$1i['menu-item--with-badge']] = !!menu.suffix, _classNames))
+    className: classnames__default["default"](styles$1j['menu-item'], (_classNames = {}, _classNames[styles$1j['menu-item--with-badge']] = !!menu.suffix, _classNames))
   }, menu.reloadDocument ? React__default["default"].createElement("a", {
     href: menu.to,
-    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$1i['menu-item--active']] = menu.isActive, _classNames2))
+    className: classnames__default["default"]((_classNames2 = {}, _classNames2[styles$1j['menu-item--active']] = menu.isActive, _classNames2))
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$1i['menu-item__badge']
+    className: styles$1j['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$1i['menu-item--active'],
+    activeClassName: styles$1j['menu-item--active'],
     className: function className(_ref2) {
       var isActive = _ref2.isActive;
-      return isActive ? styles$1i['menu-item--active'] : '';
+      return isActive ? styles$1j['menu-item--active'] : '';
     },
     exact: true
   }, menu.label, !!menu.suffix && React__default["default"].createElement("div", {
-    className: styles$1i['menu-item__badge']
+    className: styles$1j['menu-item__badge']
   }, React__default["default"].createElement(Badge, null, menu.suffix))));
 };
 
@@ -13655,9 +13697,9 @@ var PageLayout = function PageLayout(_ref) {
     menu = _ref.menu,
     sideNavContent = _ref.sideNavContent;
   return React__default["default"].createElement("div", {
-    className: styles$1j['page-layout']
+    className: styles$1k['page-layout']
   }, React__default["default"].createElement("div", {
-    className: styles$1j['page-layout__nav-container']
+    className: styles$1k['page-layout__nav-container']
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement(Text, {
@@ -13666,7 +13708,7 @@ var PageLayout = function PageLayout(_ref) {
     ml: 20,
     mr: 35
   }, title), React__default["default"].createElement("ul", {
-    className: styles$1j['page-layout__nav-list']
+    className: styles$1k['page-layout__nav-list']
   }, menu.filter(function (menu) {
     return !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true;
   }).map(function (menuItem, index) {
@@ -13675,9 +13717,9 @@ var PageLayout = function PageLayout(_ref) {
       menu: menuItem
     });
   })), sideNavContent && React__default["default"].createElement("div", {
-    className: styles$1j['page-layout__side-nav-content']
+    className: styles$1k['page-layout__side-nav-content']
   }, sideNavContent))), React__default["default"].createElement("div", {
-    className: styles$1j['page-layout__content']
+    className: styles$1k['page-layout__content']
   }, children));
 };
 
@@ -15353,6 +15395,7 @@ var AccordionItem = function AccordionItem(props) {
   return React__default["default"].createElement("div", {
     className: styles$P['accordion-item']
   }, React__default["default"].createElement("button", {
+    type: "button",
     className: styles$P['accordion-item__header'],
     onClick: function onClick() {
       if (isOpen) {
@@ -15907,7 +15950,7 @@ var CreateInputForm = function CreateInputForm(_ref) {
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$1v['text-field'], inputClassName),
+    className: classnames__default["default"](styles$1w['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -19207,7 +19250,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$1v['text-field'], (_classnames = {}, _classnames[styles$1v['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1w['text-field'], (_classnames = {}, _classnames[styles$1w['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     id: controllers.id,