@7shifts/sous-chef 3.75.0 → 3.76.0-beta.1

package/dist/index.js

@@ -148,7 +148,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-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 styles$1n = {"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,
@@ -267,7 +267,7 @@ var Flex = function Flex(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
-  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 className = classnames__default["default"](styles$1n['flex'], extraClass, (_classNames = {}, _classNames[styles$1n['align-start']] = alignItems === 'flex-start', _classNames[styles$1n['align-end']] = alignItems === 'flex-end', _classNames[styles$1n['align-center']] = alignItems === 'center', _classNames[styles$1n['justify-start']] = justifyContent === 'start', _classNames[styles$1n['justify-end']] = justifyContent === 'end', _classNames[styles$1n['justify-center']] = justifyContent === 'center', _classNames[styles$1n['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1n['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({
@@ -283,7 +283,7 @@ var Flex = function Flex(_ref) {
     var _classNames2;
     return React__default["default"].createElement("div", {
       key: i,
-      className: classnames__default["default"](styles$1l['flex__item'], (_classNames2 = {}, _classNames2[styles$1l['flex__item--flexible']] = flexItems, _classNames2)),
+      className: classnames__default["default"](styles$1n['flex__item'], (_classNames2 = {}, _classNames2[styles$1n['flex__item--flexible']] = flexItems, _classNames2)),
       style: {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
       }
@@ -305,7 +305,7 @@ var Stack = function Stack(_ref) {
   }));
 };
 
-var styles$1k = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
+var styles$1m = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
 var _excluded$2W = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
@@ -328,7 +328,7 @@ var Toggle = function Toggle(_ref) {
   return React__default["default"].createElement(Stack, {
     space: 8
   }, React__default["default"].createElement("label", _extends({}, dataProps, {
-    className: styles$1k['toggle']
+    className: styles$1m['toggle']
   }), React__default["default"].createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -337,11 +337,11 @@ var Toggle = function Toggle(_ref) {
     id: id,
     "data-testid": testId
   }), React__default["default"].createElement("span", {
-    className: styles$1k['toggle__switch']
+    className: styles$1m['toggle__switch']
   }), label && React__default["default"].createElement("span", {
-    className: styles$1k['toggle__label']
+    className: styles$1m['toggle__label']
   }, label)), caption && React__default["default"].createElement("span", {
-    className: styles$1k['toggle__caption']
+    className: styles$1m['toggle__caption']
   }, caption));
 };
 
@@ -361,7 +361,7 @@ var SPINNER_THEMES = {
   PRIDE: 'pride'
 };
 
-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 styles$1l = {"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;
@@ -374,9 +374,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$1j['spinner--block']] = block, _classnames))
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1l['spinner--block']] = block, _classnames))
   }, React__default["default"].createElement("svg", {
-    className: styles$1j['spinner'],
+    className: styles$1l['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
@@ -451,7 +451,7 @@ var Spinner = function Spinner(_ref) {
     offset: "1",
     stopColor: "#760088"
   }))), React__default["default"].createElement("circle", {
-    className: classnames__default["default"](styles$1j['path'], styles$1j["path--" + theme]),
+    className: classnames__default["default"](styles$1l['path'], styles$1l["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -461,9 +461,9 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var styles$1i = {"tooltip":"_Ydu2O"};
+var styles$1k = {"tooltip":"_Ydu2O"};
 
-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 styles$1j = {"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',
@@ -662,15 +662,15 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    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)),
+    className: classnames__default["default"](styles$1j['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1j['tooltip-overlay--visible']] = isVisible, _classnames[styles$1j['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1j['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$1h['tooltip-overlay__header']
+    className: styles$1j['tooltip-overlay__header']
   }, header), children)), React__default["default"].createElement("div", {
-    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)),
+    className: classnames__default["default"](styles$1j['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1j['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1j['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1j['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1j['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1j['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
     }),
@@ -787,7 +787,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     }), overlayElement);
   }
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1i['tooltip']),
+    className: classnames__default["default"](styles$1k['tooltip']),
     onMouseEnter: openTooltip,
     onMouseLeave: closeTooltipWithDelay,
     onFocus: openTooltip,
@@ -797,7 +797,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
 };
 var Tooltip = React.forwardRef(TooltipElement);
 
-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 styles$1i = {"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',
@@ -892,7 +892,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    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)),
+    className: classnames__default["default"](styles$1i['button'], (_classnames = {}, _classnames[styles$1i['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1i['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1i['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1i['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1i['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1i['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1i['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1i['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1i['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1i['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1i['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1i['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1i['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1i['button--loading']] = loading, _classnames[styles$1i['button--icon-only']] = isIconOnly, _classnames[styles$1i['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1i['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -905,7 +905,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default["default"].createElement("div", {
-    className: styles$1g['button__spinner']
+    className: styles$1i['button__spinner']
   }, React__default["default"].createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -915,7 +915,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default["default"].createElement("div", {
-      className: styles$1g['disabled-button-wrapper']
+      className: styles$1i['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -5994,9 +5994,9 @@ var IconWrench = React.forwardRef(function (_ref, ref) {
 });
 IconWrench.displayName = 'IconWrench';
 
-var styles$1f = {"pagination-controls":"_S1co-"};
+var styles$1h = {"pagination-controls":"_S1co-"};
 
-var styles$1e = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
+var styles$1g = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
   var _classNames;
@@ -6004,9 +6004,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$1e['keyboard-key'], (_classNames = {}, _classNames[styles$1e['keyboard-key--light']] = theme === 'light', _classNames))
+    className: classnames__default["default"](styles$1g['keyboard-key'], (_classNames = {}, _classNames[styles$1g['keyboard-key--light']] = theme === 'light', _classNames))
   }, React__default["default"].createElement("span", {
-    className: styles$1e['keyboard-key__character']
+    className: styles$1g['keyboard-key__character']
   }, children));
 };
 
@@ -6199,7 +6199,7 @@ var PaginationControls = function PaginationControls(_ref) {
     }
   });
   return React__default["default"].createElement("div", _extends({}, dataProps, {
-    className: styles$1f['pagination-controls'],
+    className: styles$1h['pagination-controls'],
     "data-testid": testId
   }), React__default["default"].createElement(Button, {
     disabled: !hasPrevious,
@@ -6229,7 +6229,7 @@ var LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1d = {"link":"_EiQ4c"};
+var styles$1f = {"link":"_EiQ4c"};
 
 var _excluded$q = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -6245,7 +6245,7 @@ var Link = function Link(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   return React__default["default"].createElement("a", _extends({}, dataProps, {
-    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)),
+    className: classnames__default["default"](styles$1f['link'], (_classNames = {}, _classNames[styles$1f['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1f['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
     target: target,
     onClick: onClick,
@@ -6259,7 +6259,7 @@ var TOAST_THEME = {
 };
 var TOAST_CONTAINER_ID = 'sous-chef-toast';
 
-var styles$1c = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
+var styles$1e = {"toast":"_iSC5P","toast--danger":"_OWpOG","toast__text":"_4JJwF"};
 
 var toast = function toast(text, theme, options) {
   var _classNames;
@@ -6273,7 +6273,7 @@ var toast = function toast(text, theme, options) {
     return;
   }
   reactToastify.toast(text, _extends({
-    className: classnames__default["default"](styles$1c['toast'], (_classNames = {}, _classNames[styles$1c['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
+    className: classnames__default["default"](styles$1e['toast'], (_classNames = {}, _classNames[styles$1e['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
     containerId: TOAST_CONTAINER_ID
   }, options));
 };
@@ -6288,7 +6288,7 @@ var ToastContainer = function ToastContainer(_ref2) {
   var _ref2$containerId = _ref2.containerId,
     containerId = _ref2$containerId === void 0 ? TOAST_CONTAINER_ID : _ref2$containerId;
   return React__default["default"].createElement(reactToastify.ToastContainer, {
-    bodyClassName: styles$1c['toast__text'],
+    bodyClassName: styles$1e['toast__text'],
     hideProgressBar: true,
     draggable: false,
     transition: reactToastify.Slide,
@@ -6339,7 +6339,7 @@ var SousChefProvider = function SousChefProvider(_ref) {
   }, React__default["default"].createElement(ToastContainer, null), children));
 };
 
-var styles$1b = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__sort-icon":"_-xiIl"};
+var styles$1d = {"data-table-header":"_F4U3o","data-table-header__item":"_KKljd","data-table-header__item--sortable":"_oKH7a","data-table-header__itemfocus":"_xrDya","data-table-header__item--action":"_RLGaD","data-table-header__item-content":"_3p3fm","data-table-header__item-content--right-align":"_rXid3","data-table-header__sort-icon":"_-xiIl"};
 
 var SORT_ORDER = {
   ASC: 'asc',
@@ -6535,7 +6535,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     },
     id: tableId + "-header"
   }, React__default["default"].createElement("tr", {
-    className: styles$1b['data-table-header']
+    className: styles$1d['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
   }).map(function (column) {
@@ -6544,7 +6544,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
     return React__default["default"].createElement("th", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$1b['data-table-header__item']] = true, _classnames[styles$1b['data-table-header__item--sortable']] = isSortable, _classnames)),
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$1d['data-table-header__item']] = true, _classnames[styles$1d['data-table-header__item--sortable']] = isSortable, _classnames)),
       style: {
         flex: column.size || 1,
         backgroundColor: backgroundColor
@@ -6559,20 +6559,20 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$1b['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$1b['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
+      className: classnames__default["default"](styles$1d['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$1d['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
     }, column.label, ' ', isSortable && React__default["default"].createElement("span", {
-      className: styles$1b['data-table-header__sort-icon']
+      className: styles$1d['data-table-header__sort-icon']
     }, React__default["default"].createElement(HeaderSortIcon, {
       sortDirection: sortDir
     }))));
   }), showActionMenu && React__default["default"].createElement("th", {
-    className: classnames__default["default"](styles$1b['data-table-header__item'], styles$1b['data-table-header__item--action'])
+    className: classnames__default["default"](styles$1d['data-table-header__item'], styles$1d['data-table-header__item--action'])
   }))));
 };
 
-var styles$1a = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
+var styles$1c = {"data-table":"_zEfoA","data-table__content":"_v-WNu","data-table__content--with-scroll":"_xI2-r","data-table__background-loading":"_ED7Nm","data-table__table":"_fnq34","data-table__table--no-columns":"_qSrJq","data-table__body":"_1SNLz","data-table__body--no-bottom-radius":"_zCIMD","data-table__footer":"_mp1Ok","data-table__pagination-controls":"_vdEZz"};
 
-var styles$19 = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
+var styles$1b = {"data-table-scroll-fake-border":"_wZ8Xg","data-table-scroll-fake-border--fixed-scroll":"_C5CU0","data-table-scroll-fake-border--top":"_L5fRB","data-table-scroll-fake-border--bottom":"_omhE4","data-table-scroll-fake-border__left":"_mpDFy","data-table-scroll-fake-border__left--top":"_G3b-p","data-table-scroll-fake-border__left--bottom":"_YUMxZ","data-table-scroll-fake-border__right":"_xUVcY","data-table-scroll-fake-border__right--top":"_BE0hn","data-table-scroll-fake-border__right--bottom":"_UtFdB"};
 
 var useTableHeaderHeight = function useTableHeaderHeight(isShowingColumns) {
   var _useDataTableContext = useDataTableContext(),
@@ -6627,16 +6627,16 @@ var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
   var hasFixedScroll = useDetectFixedScroll();
   var backgroundColor = useBackgroundColor();
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$19['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$19['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$19['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$19['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
+    className: classnames__default["default"](styles$1b['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$1b['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$1b['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames[styles$1b['data-table-scroll-fake-border--fixed-scroll']] = hasFixedScroll, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
       top: placement === 'top' ? headerHeight : undefined
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$19['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$19['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$19['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+    className: classnames__default["default"](styles$1b['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$1b['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$1b['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$19['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$19['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$19['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
+    className: classnames__default["default"](styles$1b['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$1b['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$1b['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3)),
     "data-background-color": "red"
   }));
 };
@@ -6653,7 +6653,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$18 = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
+var styles$1a = {"banner":"_omAUf","banner__title":"_8xIYW","banner__body":"_oA2J6","banner__body--multilineCTA":"_PLG8Z","banner--info":"_CRmFE","banner__icon":"_T80if","banner--success":"_PgpTw","banner--danger":"_O-lNW","banner--warning":"_fICdJ","banner--upsell":"_kUB2k","banner__close":"_P6nbA","banner--single-line":"_w-zAz"};
 
 /** Infers theme prop for Sous Chef Button CTAs if not explicitly passed, default is hollow, primaryCTA is Upsell if banner theme is Upsell*/
 var ButtonCTA = function ButtonCTA(_ref) {
@@ -6674,7 +6674,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$17 = {"banner__caption":"_S--Ce"};
+var styles$19 = {"banner__caption":"_S--Ce"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -6705,7 +6705,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default["default"].createElement("div", {
-    className: styles$17['banner__caption']
+    className: styles$19['banner__caption']
   }, caption));
 };
 
@@ -6744,14 +6744,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$18['banner'], (_classnames = {}, _classnames[styles$18['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$18['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$18['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$18['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$18['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$18['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames__default["default"](styles$1a['banner'], (_classnames = {}, _classnames[styles$1a['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$1a['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$1a['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$1a['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$1a['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$1a['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default["default"].createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default["default"].createElement("div", {
-    className: styles$18['banner__icon']
+    className: styles$1a['banner__icon']
   }, React__default["default"].createElement(InlineBannerIcon, {
     theme: theme
   })), React__default["default"].createElement(Layout, {
@@ -6761,9 +6761,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default["default"].createElement("div", {
-    className: styles$18['banner__title']
+    className: styles$1a['banner__title']
   }, title), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$18['banner__body'], (_classnames2 = {}, _classnames2[styles$18['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames__default["default"](styles$1a['banner__body'], (_classnames2 = {}, _classnames2[styles$1a['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default["default"].createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -6771,7 +6771,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default["default"].createElement("div", {
-    className: styles$18['banner__close']
+    className: styles$1a['banner__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     type: "button",
@@ -6793,7 +6793,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default["default"].useContext(DropdownContext);
 };
 
-var styles$16 = {"dropdown-pane":"_sp-pT"};
+var styles$18 = {"dropdown-pane":"_sp-pT"};
 
 var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
@@ -6931,7 +6931,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$16['dropdown-pane'], (_classNames = {}, _classNames[styles$16['dropdown-pane--with-padding']] = true, _classNames)),
+    className: classnames__default["default"](styles$18['dropdown-pane'], (_classNames = {}, _classNames[styles$18['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -6960,7 +6960,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$15 = {"dropdown__trigger":"_AktVc"};
+var styles$17 = {"dropdown__trigger":"_AktVc"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -6971,7 +6971,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$14 = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$16 = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -7024,7 +7024,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default["default"].createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames__default["default"](styles$14['label'], (_classNames = {}, _classNames[styles$14['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames__default["default"](styles$16['label'], (_classNames = {}, _classNames[styles$16['label--truncate']] = shouldTruncate, _classNames))
   }, children);
   if (showTooltip) {
     return React__default["default"].createElement(Tooltip, {
@@ -7035,18 +7035,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$13 = {"caption":"_Qrxg5"};
+var styles$15 = {"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$13['caption']
+    className: styles$15['caption']
   }, children);
 };
 
-var styles$12 = {"error-message":"_eS4YO"};
+var styles$14 = {"error-message":"_eS4YO"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -7054,7 +7054,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     testId = _ref.testId;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$12['error-message'],
+    className: styles$14['error-message'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     space: 8,
@@ -7091,7 +7091,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$11 = {"text":"_6SgoN","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--bold":"_i2LHD","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$13 = {"text":"_6SgoN","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text--bold":"_i2LHD","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$o = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -7116,7 +7116,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$11['text'], (_classnames = {}, _classnames[styles$11['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$11['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$11['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$11['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$11['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$11['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$11['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$11['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$11['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$11['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$11['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$11['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$11['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$11['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
+    className: classnames__default["default"](styles$13['text'], (_classnames = {}, _classnames[styles$13['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$13['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$13['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$13['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$13['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$13['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$13['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$13['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$13['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$13['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$13['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$13['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$13['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$13['text__span']] = as === TEXT_TYPES.SPAN, _classnames)),
     'data-testid': testId
   }, dataProps, {
     ref: ref
@@ -7131,21 +7131,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$11['text--bold'], styles$11['text'])
+    className: classnames__default["default"](styles$13['text--bold'], styles$13['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$11['text--underline'], styles$11['text'])
+    className: classnames__default["default"](styles$13['text--underline'], styles$13['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$11['text--italic'], styles$11['text'])
+    className: classnames__default["default"](styles$13['text--italic'], styles$13['text'])
   }, children);
 };
 
@@ -7294,7 +7294,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$10 = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
+var styles$12 = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
 
 var _excluded$m = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 var useTextField = function useTextField(_ref) {
@@ -7334,7 +7334,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$10['text-field'], (_classnames = {}, _classnames[styles$10['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$12['text-field'], (_classnames = {}, _classnames[styles$12['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -7364,7 +7364,7 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var styles$$ = {"affix-container":"_F8QOB","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi","prefix":"_yPPIy","suffix":"_Y3yFd"};
+var styles$11 = {"affix-container":"_F8QOB","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi","prefix":"_yPPIy","suffix":"_Y3yFd"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -7399,16 +7399,16 @@ var AffixContainer = function AffixContainer(_ref) {
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  var classes = classnames__default["default"](styles$$['affix-container'], (_classnames = {}, _classnames[styles$$['affix-container--prefixed']] = hasPrefix, _classnames[styles$$['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames__default["default"](styles$11['affix-container'], (_classnames = {}, _classnames[styles$11['affix-container--prefixed']] = hasPrefix, _classnames[styles$11['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$$['prefix'],
+    className: styles$11['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default["default"].createElement("div", {
-    className: styles$$['suffix'],
+    className: styles$11['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -7612,7 +7612,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$15['dropdown__trigger'],
+    className: styles$17['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default["default"].createElement(DropdownPane, {
@@ -7626,7 +7626,7 @@ var Dropdown = function Dropdown(_ref) {
   }, children));
 };
 
-var styles$_ = {"dropdown-list":"_91hvH","dropdown-list__item--hover":"_aMs9c"};
+var styles$10 = {"dropdown-list":"_91hvH","dropdown-list__item--hover":"_aMs9c"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -7735,17 +7735,17 @@ var checkIsComponent = function checkIsComponent(element, config) {
   return isComponent;
 };
 
-var styles$Z = {"dropdown-list-divider":"_ISJ4M"};
+var styles$$ = {"dropdown-list-divider":"_ISJ4M"};
 
 var DropdownListDivider = function DropdownListDivider(_ref) {
   var testId = _ref.testId;
   return React__default["default"].createElement("div", {
-    className: styles$Z['dropdown-list-divider'],
+    className: styles$$['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$Y = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
+var styles$_ = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
 
 var DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
@@ -7782,11 +7782,11 @@ var DropdownListItem = function DropdownListItem(_ref) {
     return undefined;
   };
   var childrenContainer = React__default["default"].createElement("div", {
-    className: styles$Y['dropdown-list-item__container']
+    className: styles$_['dropdown-list-item__container']
   }, prefix && React__default["default"].createElement("div", {
-    className: styles$Y['dropdown-list-item__prefix']
+    className: styles$_['dropdown-list-item__prefix']
   }, prefix), React__default["default"].createElement("div", {
-    className: styles$Y['dropdown-list-item__content']
+    className: styles$_['dropdown-list-item__content']
   }, React__default["default"].createElement(Stack, {
     space: 4,
     flex: [1]
@@ -7795,17 +7795,17 @@ var DropdownListItem = function DropdownListItem(_ref) {
     color: getCaptionColor(),
     textWrap: "wrap"
   }, caption))), suffix && React__default["default"].createElement("div", {
-    className: styles$Y['dropdown-list-item__suffix']
+    className: styles$_['dropdown-list-item__suffix']
   }, suffix));
   var linkItem = href && (reloadDocument ? React__default["default"].createElement("a", {
     href: href,
-    className: styles$Y['dropdown-list-item__link'],
+    className: styles$_['dropdown-list-item__link'],
     target: target,
     tabIndex: -1
   }, childrenContainer) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
     target: target,
-    className: styles$Y['dropdown-list-item__link'],
+    className: styles$_['dropdown-list-item__link'],
     reloadDocument: false,
     tabIndex: -1,
     "data-testid": testId
@@ -7813,7 +7813,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$Y['dropdown-list-item'], (_classNames = {}, _classNames[styles$Y['dropdown-list-item--selected']] = selected, _classNames[styles$Y['dropdown-list-item--disabled']] = disabled, _classNames)),
+      className: classnames__default["default"](styles$_['dropdown-list-item'], (_classNames = {}, _classNames[styles$_['dropdown-list-item--selected']] = selected, _classNames[styles$_['dropdown-list-item--disabled']] = disabled, _classNames)),
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
@@ -7889,14 +7889,14 @@ var DropdownList = function DropdownList(_ref) {
     }
   }, [highlightItemIndex]);
   return React__default["default"].createElement("ul", {
-    className: styles$_['dropdown-list'],
+    className: styles$10['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
     var _classNames;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$_['dropdown-list__item'], (_classNames = {}, _classNames[styles$_['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
+      className: classnames__default["default"](styles$10['dropdown-list__item'], (_classNames = {}, _classNames[styles$10['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
       onMouseEnter: function onMouseEnter() {
         return setFocusOnItem(index);
       },
@@ -7922,7 +7922,7 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-var styles$X = {"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$Z = {"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 _excluded$k = ["children", "onClick", "onClose", "isSelected", "disabled", "actions", "testId"];
 var Card = function Card(_ref) {
@@ -7949,19 +7949,19 @@ var Card = function Card(_ref) {
       isCardMounted: true
     }
   }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$X['card']),
+    className: classnames__default["default"](styles$Z['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$X['card__body'], styles$X['card__body--interactive'], (_classnames = {}, _classnames[styles$X['card__body--disabled']] = disabled, _classnames[styles$X['card__body--focus']] = isSelected, _classnames[styles$X['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames__default["default"](styles$Z['card__body'], styles$Z['card__body--interactive'], (_classnames = {}, _classnames[styles$Z['card__body--disabled']] = disabled, _classnames[styles$Z['card__body--focus']] = isSelected, _classnames[styles$Z['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$X['card__body'], (_classnames2 = {}, _classnames2[styles$X['card__body--disabled']] = disabled, _classnames2[styles$X['card__body--focus']] = isSelected, _classnames2[styles$X['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames__default["default"](styles$Z['card__body'], (_classnames2 = {}, _classnames2[styles$Z['card__body--disabled']] = disabled, _classnames2[styles$Z['card__body--focus']] = isSelected, _classnames2[styles$Z['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$X['card__kebab'], (_classnames3 = {}, _classnames3[styles$X['card__kebab--disabled']] = disabled, _classnames3))
+    className: classnames__default["default"](styles$Z['card__kebab'], (_classnames3 = {}, _classnames3[styles$Z['card__kebab--disabled']] = disabled, _classnames3))
   }, React__default["default"].createElement(KebabMenu, {
     actions: onClose ? actions.concat({
       action: 'dismiss',
@@ -7969,14 +7969,14 @@ var Card = function Card(_ref) {
       onAction: onClose
     }) : actions
   })), !actions && onClose && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$X['card__close'], (_classnames4 = {}, _classnames4[styles$X['card__close--disabled']] = disabled, _classnames4))
+    className: classnames__default["default"](styles$Z['card__close'], (_classnames4 = {}, _classnames4[styles$Z['card__close--disabled']] = disabled, _classnames4))
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
   }, React__default["default"].createElement(IconTimes, null)))));
 };
 
-var styles$W = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
+var styles$Y = {"callout-card__close":"_VxmQm","callout-card__header":"_3RrQI"};
 
 /**
  * @deprecated Use `<EmptyState as='card' />` instead
@@ -7996,7 +7996,7 @@ var CalloutCard = function CalloutCard(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: 12
   }, React__default["default"].createElement("div", {
-    className: styles$W['callout-card__header']
+    className: styles$Y['callout-card__header']
   }, React__default["default"].createElement(Text, {
     as: "body",
     color: "blackberry-400"
@@ -8011,7 +8011,7 @@ var CalloutCard = function CalloutCard(_ref) {
     alt: String(title) + String(header),
     width: "354px"
   })), onClose && React__default["default"].createElement("div", {
-    className: styles$W['callout-card__close']
+    className: styles$Y['callout-card__close']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose
@@ -8026,7 +8026,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$V = {"breadcrumb-item":"_fo7-A"};
+var styles$X = {"breadcrumb-item":"_fo7-A"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -8040,24 +8040,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$V['breadcrumb-item'],
+    className: styles$X['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default["default"].createElement(reactRouterDom.Link, {
     to: href,
-    className: styles$V['breadcrumb-item'],
+    className: styles$X['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$U = {"page-breadcrumbs":"_QjIgc"};
+var styles$W = {"page-breadcrumbs":"_QjIgc"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default["default"].createElement("div", {
-    className: styles$U['page-breadcrumbs']
+    className: styles$W['page-breadcrumbs']
   }, React__default["default"].createElement(Breadcrumbs, null, items));
 };
 var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
@@ -8079,7 +8079,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$T = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
+var styles$V = {"page":"_QB6yF","page--fullwidth":"_g7MTf","page--restricted":"_LRq4j"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -8101,7 +8101,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$T['page'], (_classNames = {}, _classNames[styles$T['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$T['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames__default["default"](styles$V['page'], (_classNames = {}, _classNames[styles$V['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$V['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default["default"].createElement(Stack, {
     space: 20
@@ -8121,6 +8121,52 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default["default"].createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
+var styles$U = {"page-layout":"_Scw7-","page-layout__nav-container":"_v--DF","page-layout__nav-list":"_dJeZe","page-layout__content":"_hHi70"};
+
+var styles$T = {"menu-item":"_SebbU","menu-item--active":"_CDEVl"};
+
+var MenuItem = function MenuItem(_ref) {
+  var _classNames2;
+  var menu = _ref.menu;
+  if (menu.reloadDocument) {
+    var _classNames;
+    return React__default["default"].createElement("li", {
+      className: classnames__default["default"](styles$T['menu-item'], (_classNames = {}, _classNames[styles$T['menu-item--active']] = menu.isActive, _classNames))
+    }, React__default["default"].createElement("a", {
+      href: menu.to
+    }, menu.label));
+  }
+  return React__default["default"].createElement("li", {
+    className: classnames__default["default"](styles$T['menu-item'], (_classNames2 = {}, _classNames2[styles$T['menu-item--active']] = menu.isActive, _classNames2))
+  }, React__default["default"].createElement(reactRouterDom.Link, {
+    to: menu.to
+  }, menu.label));
+};
+
+var PageLayout = function PageLayout(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    menu = _ref.menu;
+  return React__default["default"].createElement("div", {
+    className: styles$U['page-layout']
+  }, React__default["default"].createElement("div", {
+    className: styles$U['page-layout__nav-container']
+  }, React__default["default"].createElement(Stack, {
+    space: 12
+  }, React__default["default"].createElement(Text, {
+    as: "h3"
+  }, title), React__default["default"].createElement("ul", {
+    className: styles$U['page-layout__nav-list']
+  }, menu.map(function (menuItem, index) {
+    return React__default["default"].createElement(MenuItem, {
+      key: index,
+      menu: menuItem
+    });
+  })))), React__default["default"].createElement("div", {
+    className: styles$U['page-layout__content']
+  }, children));
+};
+
 var PERSISTENT_BANNER_THEME = {
   UPSELL: 'upsell',
   INFO: 'info',
@@ -9672,7 +9718,7 @@ var DataTable = function DataTable(_ref) {
       return null;
     }
     return React__default["default"].createElement("div", {
-      className: styles$1a['data-table__pagination-controls'],
+      className: styles$1c['data-table__pagination-controls'],
       "data-testid": testId && testId + "-pagination-controls"
     }, React__default["default"].createElement(PaginationControls, {
       hasPrevious: isLoading ? false : hasPrevious,
@@ -9695,7 +9741,7 @@ var DataTable = function DataTable(_ref) {
       tableId: tableId
     }
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1a['data-table']),
+    className: classnames__default["default"](styles$1c['data-table']),
     ref: tableRef
   }, React__default["default"].createElement(DataTableStickyColumnsContainer, {
     stickyColumns: stickyColumns,
@@ -9705,19 +9751,19 @@ var DataTable = function DataTable(_ref) {
     placement: "top",
     isShowingColumns: !!isShowingColumns
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1a['data-table__content'], (_classNames = {}, _classNames[styles$1a['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
+    className: classnames__default["default"](styles$1c['data-table__content'], (_classNames = {}, _classNames[styles$1c['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles,
     id: tableId + "-content"
   }, state === DATA_TABLE_STATES.BACKGROUND_LOADING && React__default["default"].createElement("div", {
-    className: styles$1a['data-table__background-loading']
+    className: styles$1c['data-table__background-loading']
   }, React__default["default"].createElement(Spinner, null)), React__default["default"].createElement("table", _extends({
-    className: classnames__default["default"](styles$1a['data-table__table'], (_classNames2 = {}, _classNames2[styles$1a['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
+    className: classnames__default["default"](styles$1c['data-table__table'], (_classNames2 = {}, _classNames2[styles$1c['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
   }, dataProps), columns && isShowingColumns && React__default["default"].createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: isShowingContent && showActionMenu
   }), React__default["default"].createElement("tbody", {
-    className: classnames__default["default"](styles$1a['data-table__body'], (_classNames3 = {}, _classNames3[styles$1a['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
+    className: classnames__default["default"](styles$1c['data-table__body'], (_classNames3 = {}, _classNames3[styles$1c['data-table__body--no-bottom-radius']] = isShowingFooter && isShowingContent, _classNames3)),
     "data-testid": testId
   }, isShowingContent && content.map(function (item, index) {
     var _item$key;
@@ -9737,7 +9783,7 @@ var DataTable = function DataTable(_ref) {
       key: index
     });
   }))), isShowingFooter && isShowingContent && React__default["default"].createElement("tfoot", {
-    className: styles$1a['data-table__footer'],
+    className: styles$1c['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default["default"].createElement(DataTableScrollFakeBorder, {
     placement: "bottom",
@@ -10270,7 +10316,7 @@ function CustomMenu(_ref) {
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$10['text-field'], styles$u['custom-menu-text-field']),
+    className: classnames__default["default"](styles$12['text-field'], styles$u['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -13114,7 +13160,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$10['text-field'], (_classnames = {}, _classnames[styles$10['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$12['text-field'], (_classnames = {}, _classnames[styles$12['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     id: controllers.id,
@@ -14662,6 +14708,7 @@ exports.ModalFooter = ModalFooter;
 exports.MultiSelectField = MultiSelectField;
 exports.NumberField = NumberField;
 exports.Page = Page;
+exports.PageLayout = PageLayout;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
 exports.Paywall = Paywall;