@7shifts/sous-chef 4.12.0 → 4.12.1

package/dist/index.modern.js

@@ -274,7 +274,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"};
 
 const usePositionStyles = ({
   m,
@@ -390,15 +390,15 @@ const Flex = _ref => {
     dataProps
   } = getDataProps(otherProps);
   const positionStyles = usePositionStyles(positionProps);
-  const className = classnames(styles$1K['flex'], extraClass, {
-    [styles$1K['align-start']]: alignItems === 'flex-start',
-    [styles$1K['align-end']]: alignItems === 'flex-end',
-    [styles$1K['align-center']]: alignItems === 'center',
-    [styles$1K['justify-start']]: justifyContent === 'start',
-    [styles$1K['justify-end']]: justifyContent === 'end',
-    [styles$1K['justify-center']]: justifyContent === 'center',
-    [styles$1K['justify-space-between']]: justifyContent === 'space-between',
-    [styles$1K['inline-flex']]: inlineFlex
+  const className = classnames(styles$1L['flex'], extraClass, {
+    [styles$1L['align-start']]: alignItems === 'flex-start',
+    [styles$1L['align-end']]: alignItems === 'flex-end',
+    [styles$1L['align-center']]: alignItems === 'center',
+    [styles$1L['justify-start']]: justifyContent === 'start',
+    [styles$1L['justify-end']]: justifyContent === 'end',
+    [styles$1L['justify-center']]: justifyContent === 'center',
+    [styles$1L['justify-space-between']]: justifyContent === 'space-between',
+    [styles$1L['inline-flex']]: inlineFlex
   });
   const items = React__default.Children.toArray(children).filter(Boolean);
   const gap = typeof space === 'object' ? `${space.row}px ${space.column}px` : space;
@@ -413,8 +413,8 @@ const Flex = _ref => {
     "data-testid": testId
   }, dataProps), items.map((child, i) => React__default.createElement("div", {
     key: i,
-    className: classnames(styles$1K['flex__item'], {
-      [styles$1K['flex__item--flexible']]: flexItems
+    className: classnames(styles$1L['flex__item'], {
+      [styles$1L['flex__item--flexible']]: flexItems
     }),
     style: {
       flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
@@ -437,7 +437,7 @@ const 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"};
 
 const _excluded$ep = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
@@ -462,7 +462,7 @@ const Toggle = _ref => {
   return React__default.createElement(Stack, {
     space: 8
   }, React__default.createElement("label", _extends({}, dataProps, {
-    className: styles$1J['toggle']
+    className: styles$1K['toggle']
   }), React__default.createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -471,11 +471,11 @@ const Toggle = _ref => {
     id: id,
     "data-testid": testId
   }), React__default.createElement("span", {
-    className: styles$1J['toggle__switch']
+    className: styles$1K['toggle__switch']
   }), label && React__default.createElement("span", {
-    className: styles$1J['toggle__label']
+    className: styles$1K['toggle__label']
   }, label)), caption && React__default.createElement("span", {
-    className: styles$1J['toggle__caption']
+    className: styles$1K['toggle__caption']
   }, caption));
 };
 
@@ -493,7 +493,7 @@ const 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"};
 
 const Spinner = ({
   size: _size = 28,
@@ -503,10 +503,10 @@ const Spinner = ({
 }) => {
   return React__default.createElement("div", {
     className: classnames({
-      [styles$1I['spinner--block']]: _block
+      [styles$1J['spinner--block']]: _block
     })
   }, React__default.createElement("svg", {
-    className: styles$1I['spinner'],
+    className: styles$1J['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: _size,
     height: _size,
@@ -581,7 +581,7 @@ const Spinner = ({
     offset: "1",
     stopColor: "#760088"
   }))), React__default.createElement("circle", {
-    className: classnames(styles$1I['path'], styles$1I[`path--${_theme}`]),
+    className: classnames(styles$1J['path'], styles$1J[`path--${_theme}`]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -591,9 +591,9 @@ const Spinner = ({
   })));
 };
 
-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"};
 
 const TOOLTIP_THEME = {
   BLACK: 'black',
@@ -787,24 +787,24 @@ const TooltipOverlay = ({
       maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames(styles$1G['tooltip-overlay'], extraClass, {
-      [styles$1G['tooltip-overlay--visible']]: isVisible,
-      [styles$1G['tooltip-overlay--black-theme']]: theme === TOOLTIP_THEME.BLACK,
-      [styles$1G['tooltip-overlay--white-theme']]: theme === TOOLTIP_THEME.WHITE
+    className: classnames(styles$1H['tooltip-overlay'], extraClass, {
+      [styles$1H['tooltip-overlay--visible']]: isVisible,
+      [styles$1H['tooltip-overlay--black-theme']]: theme === TOOLTIP_THEME.BLACK,
+      [styles$1H['tooltip-overlay--white-theme']]: theme === TOOLTIP_THEME.WHITE
     }),
     onMouseEnter: onFocusIn,
     onMouseLeave: onFocusOut
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement("div", {
-    className: styles$1G['tooltip-overlay__header']
+    className: styles$1H['tooltip-overlay__header']
   }, header), children)), React__default.createElement("div", {
-    className: classnames(styles$1G['tooltip-overlay-arrow'], extraClass, {
-      [styles$1G['tooltip-overlay-arrow--visible']]: isVisible,
-      [styles$1G['tooltip-overlay-arrow--top']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP,
-      [styles$1G['tooltip-overlay-arrow--bottom']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM,
-      [styles$1G['tooltip-overlay-arrow--black-theme']]: theme === TOOLTIP_THEME.BLACK,
-      [styles$1G['tooltip-overlay-arrow--white-theme']]: theme === TOOLTIP_THEME.WHITE
+    className: classnames(styles$1H['tooltip-overlay-arrow'], extraClass, {
+      [styles$1H['tooltip-overlay-arrow--visible']]: isVisible,
+      [styles$1H['tooltip-overlay-arrow--top']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP,
+      [styles$1H['tooltip-overlay-arrow--bottom']]: position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM,
+      [styles$1H['tooltip-overlay-arrow--black-theme']]: theme === TOOLTIP_THEME.BLACK,
+      [styles$1H['tooltip-overlay-arrow--white-theme']]: theme === TOOLTIP_THEME.WHITE
     }),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
@@ -916,7 +916,7 @@ const TooltipElement = ({
     }), overlayElement);
   }
   return React__default.createElement("div", _extends({
-    className: classnames(styles$1H['tooltip'])
+    className: classnames(styles$1I['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -929,7 +929,7 @@ const isTooltipCompatible = element => {
   return React__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"};
 
 const BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -1024,24 +1024,24 @@ const ButtonComponent = (_ref, ref) => {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames(styles$1F['button'], {
-      [styles$1F['button--default']]: theme === BUTTON_THEMES.DEFAULT,
-      [styles$1F['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
-      [styles$1F['button--danger']]: theme === BUTTON_THEMES.DANGER,
-      [styles$1F['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
-      [styles$1F['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
-      [styles$1F['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
-      [styles$1F['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
-      [styles$1F['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
-      [styles$1F['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
-      [styles$1F['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
-      [styles$1F['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
-      [styles$1F['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
-      [styles$1F['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
-      [styles$1F['button--loading']]: loading,
-      [styles$1F['button--icon-only']]: isIconOnly,
-      [styles$1F['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
-      [styles$1F['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
+    className: classnames(styles$1G['button'], {
+      [styles$1G['button--default']]: theme === BUTTON_THEMES.DEFAULT,
+      [styles$1G['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
+      [styles$1G['button--danger']]: theme === BUTTON_THEMES.DANGER,
+      [styles$1G['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
+      [styles$1G['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
+      [styles$1G['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
+      [styles$1G['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
+      [styles$1G['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
+      [styles$1G['button--link-danger']]: theme === BUTTON_THEMES.LINK_DANGER,
+      [styles$1G['button--link-upsell']]: theme === BUTTON_THEMES.LINK_UPSELL,
+      [styles$1G['button--link-toolbar']]: theme === BUTTON_THEMES.LINK_TOOLBAR,
+      [styles$1G['button--link-contrast']]: theme === BUTTON_THEMES.LINK_CONTRAST,
+      [styles$1G['button--link-icon']]: theme === BUTTON_THEMES.LINK_ICON,
+      [styles$1G['button--loading']]: loading,
+      [styles$1G['button--icon-only']]: isIconOnly,
+      [styles$1G['button--size-min-width-100']]: size === BUTTON_SIZES.MIN_WIDTH_100,
+      [styles$1G['button--size-full-width']]: size === BUTTON_SIZES.FULL_WIDTH
     }),
     type: type,
     disabled: disabled || loading,
@@ -1055,7 +1055,7 @@ const ButtonComponent = (_ref, ref) => {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default.createElement("div", {
-    className: styles$1F['button__spinner']
+    className: styles$1G['button__spinner']
   }, React__default.createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1065,7 +1065,7 @@ const ButtonComponent = (_ref, ref) => {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default.createElement("div", {
-      className: styles$1F['disabled-button-wrapper']
+      className: styles$1G['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -10356,20 +10356,20 @@ const IconGreatMonochromatic = forwardRef((_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"};
 
 const KeyboardKey = ({
   children,
   theme: _theme = 'dark'
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1D['keyboard-key'], {
-      [styles$1D['keyboard-key--light']]: _theme === 'light'
+    className: classnames(styles$1E['keyboard-key'], {
+      [styles$1E['keyboard-key--light']]: _theme === 'light'
     })
   }, React__default.createElement("span", {
-    className: styles$1D['keyboard-key__character']
+    className: styles$1E['keyboard-key__character']
   }, children));
 };
 
@@ -10588,7 +10588,7 @@ const PaginationControls = _ref => {
     }
   });
   return React__default.createElement("div", _extends({}, dataProps, {
-    className: styles$1E['pagination-controls'],
+    className: styles$1F['pagination-controls'],
     "data-testid": testId
   }), React__default.createElement(Button, {
     disabled: !hasPrevious,
@@ -10618,7 +10618,7 @@ const LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1C = {"link":"_EiQ4c","link--contrast":"_weJDR"};
+var styles$1D = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 const _excluded$bq = ["href", "target", "theme", "onClick", "children"];
 const Link = _ref => {
@@ -10635,9 +10635,9 @@ const Link = _ref => {
   } = getDataProps(otherProps);
   const ref = React__default.useRef(null);
   return React__default.createElement("a", _extends({}, dataProps, {
-    className: classnames(styles$1C['link'], {
-      [styles$1C['link--primary']]: theme === LINK_THEME.PRIMARY,
-      [styles$1C['link--contrast']]: theme === LINK_THEME.CONTRAST
+    className: classnames(styles$1D['link'], {
+      [styles$1D['link--primary']]: theme === LINK_THEME.PRIMARY,
+      [styles$1D['link--contrast']]: theme === LINK_THEME.CONTRAST
     }),
     href: href,
     target: target,
@@ -10659,7 +10659,7 @@ const DropdownContext = React__default.createContext({
 });
 const useDropdownContext = () => React__default.useContext(DropdownContext);
 
-var styles$1B = {"dropdown-pane":"_sp-pT"};
+var styles$1C = {"dropdown-pane":"_sp-pT"};
 
 const DROPDOWN_PANE_PADDING = 14;
 const calculateOverlayPosition$1 = (triggerPosition, triggerOffsetHeight, panePosition, alignment) => {
@@ -10795,8 +10795,8 @@ const PaneOverlay = ({
   useKeyPress(['Escape'], onToggleDropdown);
   const overflow = maxHeight ? 'auto' : undefined;
   return React__default.createElement("div", {
-    className: classnames(styles$1B['dropdown-pane'], {
-      [styles$1B['dropdown-pane--with-padding']]: true,
+    className: classnames(styles$1C['dropdown-pane'], {
+      [styles$1C['dropdown-pane--with-padding']]: true,
       'dropdown-pane--custom-width': width !== undefined
     }),
     style: _extends({}, position, {
@@ -10827,7 +10827,7 @@ const getKeyboardFocusableElements = element => {
   });
 };
 
-var styles$1A = {"dropdown__trigger":"_AktVc"};
+var styles$1B = {"dropdown__trigger":"_AktVc"};
 
 const DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -10838,7 +10838,7 @@ const DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1z = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1A = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 const isEllipsisActive = e => {
   return e.offsetWidth < e.scrollWidth;
@@ -10887,8 +10887,8 @@ const Label = ({
   const LabelElement = React__default.createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames(styles$1z['label'], {
-      [styles$1z['label--truncate']]: shouldTruncate
+    className: classnames(styles$1A['label'], {
+      [styles$1A['label--truncate']]: shouldTruncate
     })
   }, children);
   if (showTooltip) {
@@ -10900,7 +10900,7 @@ const Label = ({
   return LabelElement;
 };
 
-var styles$1y = {"caption":"_Qrxg5"};
+var styles$1z = {"caption":"_Qrxg5"};
 
 const Caption = ({
   fieldId,
@@ -10908,11 +10908,11 @@ const Caption = ({
 }) => {
   return React__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"};
 
 const ErrorMessage = ({
   fieldId,
@@ -10921,7 +10921,7 @@ const ErrorMessage = ({
 }) => {
   return React__default.createElement("div", {
     id: fieldId && `${fieldId}-error-message`,
-    className: styles$1x['error-message'],
+    className: styles$1y['error-message'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     space: 8,
@@ -10960,7 +10960,7 @@ const 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"};
 
 const _excluded$bp = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 const TextComponent = (_ref, ref) => {
@@ -10988,23 +10988,23 @@ const TextComponent = (_ref, ref) => {
       color: getColor(color),
       textWrap
     }, positionStyles),
-    className: classnames(styles$1w['text'], {
-      [styles$1w['text--bold']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD),
-      [styles$1w['text--italic']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC),
-      [styles$1w['text--underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE),
-      [styles$1w['text--dotted-underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE),
-      [styles$1w['text--monospace']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE),
-      [styles$1w['text--line-through']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH),
-      [styles$1w['text--align-left']]: alignment === ALIGNMENTS.LEFT,
-      [styles$1w['text--align-right']]: alignment === ALIGNMENTS.RIGHT,
-      [styles$1w['text--align-center']]: alignment === ALIGNMENTS.CENTER,
-      [styles$1w['text--align-justify']]: alignment === ALIGNMENTS.JUSTIFY,
-      [styles$1w['text__body']]: as === TEXT_TYPES.BODY,
-      [styles$1w['text__insight']]: as === TEXT_TYPES.INSIGHT,
-      [styles$1w['text__caption']]: as === TEXT_TYPES.CAPTION,
-      [styles$1w['text__span']]: as === TEXT_TYPES.SPAN,
-      [styles$1w['text__paragraph']]: as === TEXT_TYPES.PARAGRAPH,
-      [styles$1w['text__tagline']]: as === TEXT_TYPES.TAGLINE
+    className: classnames(styles$1x['text'], {
+      [styles$1x['text--bold']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD),
+      [styles$1x['text--italic']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC),
+      [styles$1x['text--underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE),
+      [styles$1x['text--dotted-underline']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE),
+      [styles$1x['text--monospace']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE),
+      [styles$1x['text--line-through']]: emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH),
+      [styles$1x['text--align-left']]: alignment === ALIGNMENTS.LEFT,
+      [styles$1x['text--align-right']]: alignment === ALIGNMENTS.RIGHT,
+      [styles$1x['text--align-center']]: alignment === ALIGNMENTS.CENTER,
+      [styles$1x['text--align-justify']]: alignment === ALIGNMENTS.JUSTIFY,
+      [styles$1x['text__body']]: as === TEXT_TYPES.BODY,
+      [styles$1x['text__insight']]: as === TEXT_TYPES.INSIGHT,
+      [styles$1x['text__caption']]: as === TEXT_TYPES.CAPTION,
+      [styles$1x['text__span']]: as === TEXT_TYPES.SPAN,
+      [styles$1x['text__paragraph']]: as === TEXT_TYPES.PARAGRAPH,
+      [styles$1x['text__tagline']]: as === TEXT_TYPES.TAGLINE
     }),
     'data-testid': testId
   }, dataProps, other, {
@@ -11021,7 +11021,7 @@ const Bold = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1w['text--bold'], styles$1w['text'])
+    className: classnames(styles$1x['text--bold'], styles$1x['text'])
   }, children);
 };
 
@@ -11029,7 +11029,7 @@ const Underline = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1w['text--underline'], styles$1w['text'])
+    className: classnames(styles$1x['text--underline'], styles$1x['text'])
   }, children);
 };
 
@@ -11037,7 +11037,7 @@ const Italic = ({
   children
 }) => {
   return React__default.createElement("span", {
-    className: classnames(styles$1w['text--italic'], styles$1w['text'])
+    className: classnames(styles$1x['text--italic'], styles$1x['text'])
   }, children);
 };
 
@@ -11174,7 +11174,7 @@ const useFieldControllers = ({
   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"};
 
 const _excluded$bn = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 const useTextField = _ref => {
@@ -11215,8 +11215,8 @@ const useTextField = _ref => {
     'aria-invalid': hasError,
     autoComplete,
     autoFocus,
-    className: classnames(styles$1v['text-field'], {
-      [styles$1v['text-field--invalid']]: hasError
+    className: classnames(styles$1w['text-field'], {
+      [styles$1w['text-field--invalid']]: hasError
     }),
     'data-testid': testId,
     disabled,
@@ -11247,7 +11247,7 @@ const 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"};
 
 const AffixContainer = ({
   prefix,
@@ -11282,19 +11282,19 @@ const AffixContainer = ({
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  const classes = classnames(styles$1u['affix-container'], {
-    [styles$1u['affix-container--prefixed']]: hasPrefix,
-    [styles$1u['affix-container--suffixed']]: hasSuffix
+  const classes = classnames(styles$1v['affix-container'], {
+    [styles$1v['affix-container--prefixed']]: hasPrefix,
+    [styles$1v['affix-container--suffixed']]: hasSuffix
   });
   return React__default.createElement("div", {
     className: classes,
     ref: container,
     "data-testid": testId
   }, hasPrefix && React__default.createElement("div", {
-    className: styles$1u['prefix'],
+    className: styles$1v['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$1u['suffix'],
+    className: styles$1v['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -11506,7 +11506,7 @@ const Dropdown = ({
       paneRef
     }
   }, triggerIsKnownButton ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", _extends({}, triggerProps, {
-    className: styles$1A['dropdown__trigger'],
+    className: styles$1B['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default.createElement(DropdownPane, {
@@ -11520,7 +11520,7 @@ const Dropdown = ({
   }, 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"};
 
 const findNextActiveIndex = (items, startAt) => {
   let startIndex = 0;
@@ -11680,15 +11680,15 @@ const 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"};
 
 const DropdownListDividerLine = ({
   testId
 }) => {
   return React__default.createElement("div", {
-    className: styles$1r['dropdown-list-divider-line'],
+    className: styles$1s['dropdown-list-divider-line'],
     "data-testid": testId
   });
 };
@@ -11704,14 +11704,14 @@ const DropdownListDivider = ({
     });
   }
   return React__default.createElement(Fragment, null, (line === 'top' || line === 'both') && React__default.createElement(DropdownListDividerLine, null), React__default.createElement("div", {
-    className: classnames(styles$1s['dropdown-list-divider']),
+    className: classnames(styles$1t['dropdown-list-divider']),
     "data-testid": testId
   }, children), (line === 'bottom' || line === 'both') && React__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"};
 
 const DropdownSubmenu = forwardRef(({
   children,
@@ -11731,7 +11731,7 @@ const DropdownSubmenu = forwardRef(({
     // so no keyboard handler is needed.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React__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 @@ const DropdownListItem = ({
     onClick && onClick(e);
   };
   const childrenContainer = React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__container']
+    className: styles$1r['dropdown-list-item__container']
   }, prefix && React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__prefix']
+    className: styles$1r['dropdown-list-item__prefix']
   }, prefix), React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__content']
+    className: styles$1r['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
     space: 0,
     flex: [1]
   }, children, caption && React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__caption']
+    className: styles$1r['dropdown-list-item__caption']
   }, caption))), (suffix || submenu) && React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__suffix']
+    className: styles$1r['dropdown-list-item__suffix']
   }, suffix && _openSubmenuOnSuffixClick && submenu ? React__default.createElement("button", {
-    className: styles$1q['dropdown-list-item__suffix-button'],
+    className: styles$1r['dropdown-list-item__suffix-button'],
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
@@ -11948,19 +11948,19 @@ const DropdownListItem = ({
     "aria-label": "Open submenu",
     disabled: disabled
   }, suffix) : suffix, submenu && !suffix && React__default.createElement("div", {
-    className: styles$1q['dropdown-list-item__suffix-spot']
+    className: styles$1r['dropdown-list-item__suffix-spot']
   }), submenu && !_openSubmenuOnSuffixClick && React__default.createElement(IconChevronRight, {
     size: "small"
   })));
   const linkItem = href && (_reloadDocument ? React__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.createElement(Link$1, {
     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,9 +11968,9 @@ const DropdownListItem = ({
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
-      className: classnames(styles$1q['dropdown-list-item'], {
-        [styles$1q['dropdown-list-item--selected']]: selected,
-        [styles$1q['dropdown-list-item--disabled']]: disabled
+      className: classnames(styles$1r['dropdown-list-item'], {
+        [styles$1r['dropdown-list-item--selected']]: selected,
+        [styles$1r['dropdown-list-item--disabled']]: disabled
       }),
       onMouseDown: e => e.preventDefault(),
       onClick: handleClick,
@@ -12113,7 +12113,7 @@ const DropdownList = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightItemIndex]);
   return React__default.createElement("ul", {
-    className: styles$1t['dropdown-list'],
+    className: styles$1u['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.toArray(children).filter(Boolean).map((child, index) => {
@@ -12125,8 +12125,8 @@ const DropdownList = ({
     const divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default.createElement("li", {
       key: index,
-      className: classnames(styles$1t['dropdown-list__item'], {
-        [styles$1t['dropdown-list__item--hover']]: focusedItem === index && isInteractive
+      className: classnames(styles$1u['dropdown-list__item'], {
+        [styles$1u['dropdown-list__item--hover']]: focusedItem === index && isInteractive
       }),
       onMouseEnter: divider ? undefined : () => setFocusOnItem(index),
       role: divider ? 'separator' : 'menuitem'
@@ -12150,7 +12150,7 @@ const KebabMenu = ({
   }, action.label))));
 };
 
-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"};
 
 const CardContext = createContext({
   isCardMounted: false
@@ -12189,28 +12189,28 @@ const Card = _ref => {
       isCardMounted: true
     }
   }, React__default.createElement("div", _extends({
-    className: classnames(styles$1o['card']),
+    className: classnames(styles$1p['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default.createElement("button", {
-    className: classnames(styles$1o['card__body'], styles$1o['card__body--interactive'], {
-      [styles$1o['card__body--disabled']]: disabled,
-      [styles$1o['card__body--focus']]: isSelected,
-      [styles$1o['card__body--with-kebab']]: actions
+    className: classnames(styles$1p['card__body'], styles$1p['card__body--interactive'], {
+      [styles$1p['card__body--disabled']]: disabled,
+      [styles$1p['card__body--focus']]: isSelected,
+      [styles$1p['card__body--with-kebab']]: actions
     }),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick,
     disabled: disabled
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$1o['card__body'], {
-      [styles$1o['card__body--disabled']]: disabled,
-      [styles$1o['card__body--focus']]: isSelected,
-      [styles$1o['card__body--with-kebab']]: actions
+    className: classnames(styles$1p['card__body'], {
+      [styles$1p['card__body--disabled']]: disabled,
+      [styles$1p['card__body--focus']]: isSelected,
+      [styles$1p['card__body--with-kebab']]: actions
     }),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$1o['card__kebab'], {
-      [styles$1o['card__kebab--disabled']]: disabled
+    className: classnames(styles$1p['card__kebab'], {
+      [styles$1p['card__kebab--disabled']]: disabled
     })
   }, React__default.createElement(KebabMenu, {
     actions: onClose ? actions.concat({
@@ -12219,8 +12219,8 @@ const Card = _ref => {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default.createElement("div", {
-    className: classnames(styles$1o['card__close'], {
-      [styles$1o['card__close--disabled']]: disabled
+    className: classnames(styles$1p['card__close'], {
+      [styles$1p['card__close--disabled']]: disabled
     })
   }, React__default.createElement(Button, {
     theme: "link-icon",
@@ -12228,7 +12228,7 @@ const Card = _ref => {
   }, React__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
@@ -12249,7 +12249,7 @@ const CalloutCard = ({
   }, React__default.createElement(Stack, {
     space: 12
   }, React__default.createElement("div", {
-    className: styles$1n['callout-card__header']
+    className: styles$1o['callout-card__header']
   }, React__default.createElement(Text, {
     as: "body",
     color: "primary-color"
@@ -12264,7 +12264,7 @@ const CalloutCard = ({
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default.createElement("div", {
-    className: styles$1n['callout-card__close']
+    className: styles$1o['callout-card__close']
   }, React__default.createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -12283,7 +12283,7 @@ const Breadcrumbs = ({
   }, children);
 };
 
-var styles$1m = {"breadcrumb-item":"_fo7-A"};
+var styles$1n = {"breadcrumb-item":"_fo7-A"};
 
 const BreadcrumbItem = ({
   href,
@@ -12297,25 +12297,25 @@ const BreadcrumbItem = ({
   // This is neessary to support older versions of react-router-dom
   return _reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$1m['breadcrumb-item'],
+    className: styles$1n['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     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"};
 
 const PageBreadcrumbs = ({
   breadcrumbs
 }) => {
   const items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$1l['page-breadcrumbs']
+    className: styles$1m['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 const getBreadbrumbItems = breadcrumbs => {
@@ -12335,7 +12335,7 @@ const 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"};
 
 const PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -12359,9 +12359,9 @@ const Page = ({
   const hasHeader = title || actions;
   const hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$1k['page'], {
-      [styles$1k['page--restricted']]: _size === PAGE_SIZES.RESTRICTED,
-      [styles$1k['page--fullwidth']]: _size === PAGE_SIZES.FULL_WIDTH
+    className: classnames(styles$1l['page'], {
+      [styles$1l['page--restricted']]: _size === PAGE_SIZES.RESTRICTED,
+      [styles$1l['page--fullwidth']]: _size === PAGE_SIZES.FULL_WIDTH
     }),
     "data-testid": testId
   }, React__default.createElement(Stack, {
@@ -12382,22 +12382,23 @@ const Page = ({
   }, title), actions), subtitle && React__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"};
 
 const ModalContext = createContext({
   isModalMounted: false,
   modalBodyRef: {
     current: null
   },
-  draggable: false
+  draggable: false,
+  hasTabList: false
 });
 const useModalContext = () => {
   const context = useContext(ModalContext);
@@ -12440,37 +12441,75 @@ const ModalHeader = ({
   subHeader,
   onClose,
   loading,
-  imageSrc
+  imageSrc,
+  iconBar
 }) => {
   const {
-    modalBodyRef
+    modalBodyRef,
+    hasTabList
   } = useModalContext();
   const {
     hasScrollTop
   } = useScrollDetector(modalBodyRef);
+  const iconBarTheme = imageSrc ? 'link-contrast' : 'link-icon';
+  const themedIconBar = iconBar ? injectButtonTheme(iconBar, iconBarTheme) : null;
   return React__default.createElement("div", {
-    className: classnames(styles$1f['modal-header'], {
-      [styles$1f['modal-header--with-shadow']]: hasScrollTop
+    className: classnames(styles$1g['modal-header'], {
+      [styles$1g['modal-header--with-shadow']]: hasScrollTop && !hasTabList
     })
   }, React__default.createElement(Stack, {
     space: 0
   }, React__default.createElement("div", {
-    className: classnames(styles$1f['modal-header__top-bar'], {
-      [styles$1f['modal-header__top-bar--with-image']]: !!imageSrc
+    className: classnames(styles$1g['modal-header__top-bar'], {
+      [styles$1g['modal-header__top-bar--with-image']]: !!imageSrc
     }),
     style: imageSrc ? {
       backgroundImage: `url(${imageSrc})`
     } : undefined
-  }, onClose && React__default.createElement(Button, {
+  }, themedIconBar, onClose && React__default.createElement(Button, {
     theme: imageSrc ? 'link-contrast' : 'link-icon',
     onClick: onClose,
     disabled: loading
   }, React__default.createElement(IconTimes, null))), header && React__default.createElement("div", {
-    className: styles$1f['modal-header__header']
+    className: styles$1g['modal-header__header']
   }, header), subHeader && React__default.createElement("div", {
-    className: styles$1f['modal-header__sub-header']
+    className: styles$1g['modal-header__sub-header']
   }, subHeader)));
 };
+const injectButtonTheme = (node, theme) => {
+  if (Array.isArray(node)) {
+    return node.map(child => injectButtonTheme(child, theme));
+  }
+  if (!React__default.isValidElement(node)) return node;
+  if (node.type === Button) {
+    return React__default.cloneElement(node, {
+      theme
+    });
+  }
+  if (node.type === React__default.Fragment) {
+    const children = React__default.Children.map(node.props.children, child => injectButtonTheme(child, theme));
+    return React__default.cloneElement(node, {}, children);
+  }
+  return node;
+};
+
+var styles$1f = {"tab-zone":"_4hqPT","tab-zone--with-shadow":"_dorMR"};
+
+const ModalTabZone = ({
+  children
+}) => {
+  const {
+    modalBodyRef
+  } = useModalContext();
+  const {
+    hasScrollTop
+  } = useScrollDetector(modalBodyRef);
+  return React__default.createElement("div", {
+    className: classnames(styles$1f['tab-zone'], {
+      [styles$1f['tab-zone--with-shadow']]: hasScrollTop
+    })
+  }, children);
+};
 
 const DEFAULT_WIDTH = 566;
 const DEFAULT_HEIGHT = 266;
@@ -12553,7 +12592,7 @@ function useDraggableModal({
   };
 }
 
-const _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "imageSrc", "draggable", "initialPosition"];
+const _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.
@@ -12579,7 +12618,9 @@ const Modal = _ref => {
       testId,
       imageSrc,
       draggable = false,
-      initialPosition
+      initialPosition,
+      tabList,
+      iconBar
     } = _ref,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$bk);
   const {
@@ -12617,27 +12658,24 @@ const Modal = _ref => {
   } = getDataProps(otherProps, {
     removeDataPrefix: true
   });
-  const modalContent = React__default.createElement(Fragment, null, draggable ? React__default.createElement("div", {
-    className: DRAG_HANDLE_CLASS
-  }, React__default.createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading,
-    imageSrc: imageSrc
-  })) : React__default.createElement(ModalHeader, {
+  const modalHeader = React__default.createElement(ModalHeader, {
     header: header,
     subHeader: subHeader,
     onClose: onClose,
     loading: loading,
-    imageSrc: imageSrc
-  }), React__default.createElement(ModalContext.Provider, {
+    imageSrc: imageSrc,
+    iconBar: iconBar
+  });
+  const modalContent = React__default.createElement(ModalContext.Provider, {
     value: {
       isModalMounted: true,
       modalBodyRef,
-      draggable
+      draggable,
+      hasTabList: !!tabList
     }
-  }, children));
+  }, draggable ? React__default.createElement("div", {
+    className: DRAG_HANDLE_CLASS
+  }, modalHeader) : modalHeader, tabList && React__default.createElement(ModalTabZone, null, tabList), children);
   return React__default.createElement(ReactModal, {
     isOpen: true,
     testId: testId,
@@ -12650,14 +12688,14 @@ const Modal = _ref => {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: classnames(styles$1g['overlay'], draggable && styles$1g['overlay--draggable']),
-      afterOpen: styles$1g['overlay--after-open'],
-      beforeClose: styles$1g['overlay--before-close']
+      base: classnames(styles$1h['overlay'], draggable && styles$1h['overlay--draggable']),
+      afterOpen: styles$1h['overlay--after-open'],
+      beforeClose: styles$1h['overlay--before-close']
     },
     className: {
-      base: classnames(styles$1g['content'], draggable && styles$1g['content--draggable']),
-      afterOpen: styles$1g['content--after-open'],
-      beforeClose: styles$1g['content--before-close']
+      base: classnames(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.createElement(Draggable, {
@@ -12666,7 +12704,9 @@ const Modal = _ref => {
     bounds: draggableBounds
   }, React__default.createElement("div", {
     ref: draggableCallbackRef,
-    className: styles$1g['draggable-inner'],
+    className: classnames(styles$1h['draggable-inner'], {
+      [styles$1h['draggable-inner--with-tab-list']]: !!tabList
+    }),
     style: {
       width,
       height,
@@ -12679,17 +12719,20 @@ Modal.setAppElement = rootElement => {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$1e = {"modal-body":"_4YK4k"};
+var styles$1e = {"modal-body":"_4YK4k","modal-body--tab-mode":"_2-PSE"};
 
 const ModalBody = ({
   children,
   testId
 }) => {
   const {
-    modalBodyRef
+    modalBodyRef,
+    hasTabList
   } = useModalContext();
   return React__default.createElement("div", {
-    className: classnames(styles$1e['modal-body']),
+    className: classnames(styles$1e['modal-body'], {
+      [styles$1e['modal-body--tab-mode']]: hasTabList
+    }),
     "data-testid": testId,
     ref: modalBodyRef
   }, React__default.createElement("div", {
@@ -12697,7 +12740,7 @@ const ModalBody = ({
   }, 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"};
 
 const updateButtonProps$1 = (button, newProps) => {
   if (!button) {
@@ -12750,7 +12793,8 @@ const FooterContainer = ({
   testId
 }) => {
   const {
-    modalBodyRef
+    modalBodyRef,
+    hasTabList
   } = useModalContext();
   const {
     hasScrollBottom
@@ -12762,7 +12806,8 @@ const FooterContainer = ({
   });
   return React__default.createElement("div", {
     className: classnames(styles$1d['modal-footer'], {
-      [styles$1d['modal-footer--with-shadow']]: hasScrollBottom
+      [styles$1d['modal-footer--with-shadow']]: hasScrollBottom,
+      [styles$1d['modal-footer--tab-mode']]: hasTabList
     }),
     "data-testid": testId
   }, React__default.createElement(Inline, {
@@ -13606,12 +13651,12 @@ const BadgeElement = (_ref, forwardedRef) => {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", _extends({
-    className: classnames(styles$1h['badge'], {
-      [styles$1h['badge--success']]: theme === 'success',
-      [styles$1h['badge--danger']]: theme === 'danger',
-      [styles$1h['badge--info']]: theme === 'info',
-      [styles$1h['badge--warning']]: theme === 'warning',
-      [styles$1h['badge--numeric']]: Number.isFinite(children)
+    className: classnames(styles$1i['badge'], {
+      [styles$1i['badge--success']]: theme === 'success',
+      [styles$1i['badge--danger']]: theme === 'danger',
+      [styles$1i['badge--info']]: theme === 'info',
+      [styles$1i['badge--warning']]: theme === 'warning',
+      [styles$1i['badge--numeric']]: Number.isFinite(children)
     }),
     ref: ref,
     "data-testid": testId
@@ -13626,28 +13671,28 @@ const MenuItem = ({
   menu
 }) => {
   return React__default.createElement("li", {
-    className: classnames(styles$1i['menu-item'], {
-      [styles$1i['menu-item--with-badge']]: !!menu.suffix
+    className: classnames(styles$1j['menu-item'], {
+      [styles$1j['menu-item--with-badge']]: !!menu.suffix
     })
   }, menu.reloadDocument ? React__default.createElement("a", {
     href: menu.to,
     className: classnames({
-      [styles$1i['menu-item--active']]: menu.isActive
+      [styles$1j['menu-item--active']]: menu.isActive
     })
   }, menu.label, !!menu.suffix && React__default.createElement("div", {
-    className: styles$1i['menu-item__badge']
+    className: styles$1j['menu-item__badge']
   }, React__default.createElement(Badge, null, menu.suffix))) : React__default.createElement(NavLink, {
     to: menu.to,
     // @ts-expect-error This is only available on v5
-    activeClassName: styles$1i['menu-item--active'],
+    activeClassName: styles$1j['menu-item--active'],
     className: ({
       isActive
     }) => {
-      return isActive ? styles$1i['menu-item--active'] : '';
+      return isActive ? styles$1j['menu-item--active'] : '';
     },
     exact: true
   }, menu.label, !!menu.suffix && React__default.createElement("div", {
-    className: styles$1i['menu-item__badge']
+    className: styles$1j['menu-item__badge']
   }, React__default.createElement(Badge, null, menu.suffix))));
 };
 
@@ -13658,9 +13703,9 @@ const PageLayout = ({
   sideNavContent
 }) => {
   return React__default.createElement("div", {
-    className: styles$1j['page-layout']
+    className: styles$1k['page-layout']
   }, React__default.createElement("div", {
-    className: styles$1j['page-layout__nav-container']
+    className: styles$1k['page-layout__nav-container']
   }, React__default.createElement(Stack, {
     space: 12
   }, React__default.createElement(Text, {
@@ -13669,14 +13714,14 @@ const PageLayout = ({
     ml: 20,
     mr: 35
   }, title), React__default.createElement("ul", {
-    className: styles$1j['page-layout__nav-list']
+    className: styles$1k['page-layout__nav-list']
   }, menu.filter(menu => !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true).map((menuItem, index) => React__default.createElement(MenuItem, {
     key: menuItem.name || index,
     menu: menuItem
   }))), sideNavContent && React__default.createElement("div", {
-    className: styles$1j['page-layout__side-nav-content']
+    className: styles$1k['page-layout__side-nav-content']
   }, sideNavContent))), React__default.createElement("div", {
-    className: styles$1j['page-layout__content']
+    className: styles$1k['page-layout__content']
   }, children));
 };
 
@@ -15393,6 +15438,7 @@ const AccordionItem = props => {
   return React__default.createElement("div", {
     className: styles$P['accordion-item']
   }, React__default.createElement("button", {
+    type: "button",
     className: styles$P['accordion-item__header'],
     onClick: () => {
       if (isOpen) {
@@ -15946,7 +15992,7 @@ const CreateInputForm = ({
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$1v['text-field'], inputClassName),
+    className: classnames(styles$1w['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -19094,8 +19140,8 @@ const usePhoneField = ({
     'aria-describedby': hasError ? `${controllers.id}-error-message` : `${controllers.id}-describer`,
     'aria-invalid': hasError,
     autoFocus,
-    className: classnames(styles$1v['text-field'], {
-      [styles$1v['text-field--invalid']]: hasError
+    className: classnames(styles$1w['text-field'], {
+      [styles$1w['text-field--invalid']]: hasError
     }),
     'data-testid': testId,
     disabled,