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

package/dist/index.js

@@ -8121,256 +8121,15 @@ 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$U = {"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$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',
-  DANGER: 'danger'
-};
-
-var styles$S = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR"};
-
-var PersistentBanner = function PersistentBanner(_ref) {
-  var _classNames;
-  var _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? PERSISTENT_BANNER_THEME.INFO : _ref$theme,
-    children = _ref.children,
-    primaryButton = _ref.primaryButton,
-    secondaryButton = _ref.secondaryButton,
-    onDismiss = _ref.onDismiss,
-    onLoad = _ref.onLoad,
-    testId = _ref.testId;
-  React.useEffect(function () {
-    onLoad == null || onLoad();
-  }, []);
-  var BannerContent = function BannerContent() {
-    return React__default["default"].createElement(Inline, {
-      justifyContent: "center",
-      alignItems: "center"
-    }, children, primaryButton && React__default["default"].cloneElement(primaryButton, _extends({
-      theme: BUTTON_THEMES.HOLLOW_CONTRAST
-    }, primaryButton.props)), secondaryButton && React__default["default"].cloneElement(secondaryButton, _extends({
-      theme: BUTTON_THEMES.LINK_CONTRAST
-    }, secondaryButton.props)));
-  };
-  return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$S['persistent-banner'], (_classNames = {}, _classNames[styles$S['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$S['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$S['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
-    "data-testid": testId
-  }, onDismiss ? React__default["default"].createElement(Inline, {
-    flex: [1],
-    alignItems: "center"
-  }, React__default["default"].createElement(BannerContent, null), React__default["default"].createElement(Button, {
-    theme: "link-contrast",
-    onClick: onDismiss
-  }, React__default["default"].createElement(IconTimes, null))) : React__default["default"].createElement(BannerContent, null));
-};
-
-var getProgressMetric = function getProgressMetric(progress, maxValue) {
-  var updatedMaxValue = maxValue > 0 ? maxValue : 100;
-  var updatedProgress = progress;
-  if (updatedProgress > updatedMaxValue) {
-    updatedProgress = updatedMaxValue;
-  }
-  if (updatedProgress < 0) {
-    updatedProgress = 0;
-  }
-  return {
-    progress: updatedProgress,
-    maxValue: updatedMaxValue
-  };
-};
-/**
- * This function calculates the progress bar so it can align in the center of each step
- */
-var getProgressMetricWithSteps = function getProgressMetricWithSteps(progress, amountOfSteps) {
-  var maxValue = amountOfSteps * 2;
-  var actualProgress = progress;
-  if (progress < 0) {
-    actualProgress = 0;
-  }
-  if (progress > 0) {
-    var previousProgress = (progress - 1) * 2;
-    actualProgress = previousProgress + 1;
-  }
-  if (actualProgress > maxValue) {
-    actualProgress = maxValue;
-  }
-  return {
-    progress: actualProgress,
-    maxValue: maxValue
-  };
-};
-
-var useProgress = function useProgress(progress, maxValue, getMetric) {
-  if (getMetric === void 0) {
-    getMetric = getProgressMetric;
-  }
-  var metric = getMetric(progress, maxValue);
-  var percentage = metric.progress / metric.maxValue * 100;
-  var elementProps = {
-    'aria-valuemax': metric.maxValue,
-    'aria-valuemin': 0,
-    'aria-valuenow': metric.progress,
-    role: 'progressbar'
-  };
-  return {
-    elementProps: elementProps,
-    metric: _extends({}, metric, {
-      percentage: percentage
-    })
-  };
-};
-
-var styles$R = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
-
-var CircularProgress = function CircularProgress(_ref) {
-  var progress = _ref.progress,
-    _ref$maxValue = _ref.maxValue,
-    maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
-    children = _ref.children,
-    testId = _ref.testId;
-  var _useProgress = useProgress(progress, maxValue),
-    elementProps = _useProgress.elementProps,
-    metric = _useProgress.metric;
-  var determinant = metric.percentage * 2.79;
-  return React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$R['circular-progress'],
-    "data-testid": testId
-  }), React__default["default"].createElement("svg", {
-    viewBox: "0 0 100 100"
-  }, React__default["default"].createElement("circle", {
-    cx: 50,
-    cy: 50,
-    r: 45,
-    strokeWidth: "10px",
-    className: styles$R['circular-progress__track']
-  }), React__default["default"].createElement("circle", {
-    cx: 50,
-    cy: 50,
-    r: 45,
-    strokeWidth: "10px",
-    className: styles$R['circular-progress__indicator'],
-    strokeDashoffset: "66",
-    strokeDasharray: determinant + " " + (279 - determinant)
-  })), React__default["default"].createElement("div", {
-    className: styles$R['circular-progress__label']
-  }, children || metric.progress + "/" + metric.maxValue));
-};
-
-var styles$Q = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__steps":"_8kdeO"};
-
-var ProgressBar = function ProgressBar(_ref) {
-  var progress = _ref.progress,
-    maxValue = _ref.maxValue,
-    testId = _ref.testId,
-    steps = _ref.steps;
-  var isUsingStepsAsMaxValue = !maxValue && steps && steps.length > 0;
-  var inferedMaxValue = !maxValue && steps && steps.length > 0 ? steps.length : maxValue;
-  var _useProgress = useProgress(progress, inferedMaxValue || 100, isUsingStepsAsMaxValue ? getProgressMetricWithSteps : getProgressMetric),
-    elementProps = _useProgress.elementProps,
-    metric = _useProgress.metric;
-  return React__default["default"].createElement(Stack, null, React__default["default"].createElement("div", _extends({}, elementProps, {
-    className: styles$Q['progress-bar'],
-    "data-testid": testId
-  }), React__default["default"].createElement("div", {
-    className: styles$Q['progress-bar__indicator'],
-    style: {
-      width: metric.percentage + "%"
-    }
-  })), steps && steps.length > 0 && React__default["default"].createElement("div", {
-    className: styles$Q['progress-bar__steps']
-  }, steps.map(function (step) {
-    return React__default["default"].createElement(Text, {
-      key: step
-    }, step);
-  })));
-};
-
-var styles$P = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
-
-var SKELETON_COMPONENT = {
-  AVATAR: 'avatar',
-  AVATAR_SMALL: 'avatar--small',
-  AVATAR_MEDIUM: 'avatar--medium',
-  AVATAR_LARGE: 'avatar--large',
-  AVATAR_XLARGE: 'avatar--xlarge',
-  BUTTON: 'button',
-  PILL: 'pill'
-};
+var styles$S = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
-var _excluded$j = ["as", "testId", "width", "height"];
-var Skeleton = function Skeleton(_ref) {
-  var _classnames;
-  var as = _ref.as,
-    testId = _ref.testId,
-    width = _ref.width,
-    height = _ref.height,
-    positionStyles = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  var positioning = usePositionStyles(positionStyles);
-  return React__default["default"].createElement("div", {
-    "data-testid": testId,
-    className: classnames__default["default"](styles$P['skeleton'], (_classnames = {}, _classnames[styles$P['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$P['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$P['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$P['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$P['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$P['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$P['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
-    style: _extends({}, positioning, {
-      width: width,
-      height: height
-    })
-  });
-};
+var styles$R = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
 
-var styles$O = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
-
-var styles$N = {"actions":"_ffXgN"};
-
-var styles$M = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
-
-var styles$L = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
-
-var styles$K = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
+var styles$Q = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -8379,7 +8138,7 @@ var ModalHeader = function ModalHeader(_ref) {
     loading = _ref.loading;
   if (!header && !subHeader) {
     return onClose ? React__default["default"].createElement("div", {
-      className: styles$K['header__close-button']
+      className: styles$Q['header__close-button']
     }, React__default["default"].createElement(Button, {
       theme: "link-icon",
       onClick: onClose,
@@ -8395,17 +8154,17 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default["default"].createElement("span", {
-    className: styles$K['header']
+    className: styles$Q['header']
   }, header), onClose && React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: onClose,
     disabled: loading
   }, React__default["default"].createElement(IconTimes, null))), subHeader && React__default["default"].createElement("div", {
-    className: styles$K['sub-header']
+    className: styles$Q['sub-header']
   }, subHeader));
 };
 
-var _excluded$i = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
+var _excluded$j = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
 var Modal = function Modal(_ref) {
   var children = _ref.children,
     header = _ref.header,
@@ -8422,7 +8181,7 @@ var Modal = function Modal(_ref) {
     _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
     shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var style = {
     content: {
       width: width,
@@ -8450,14 +8209,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$L['overlay'],
-      afterOpen: styles$L['overlay--after-open'],
-      beforeClose: styles$L['overlay--before-close']
+      base: styles$R['overlay'],
+      afterOpen: styles$R['overlay--after-open'],
+      beforeClose: styles$R['overlay--before-close']
     },
     className: {
-      base: styles$L['content'],
-      afterOpen: styles$L['content--after-open'],
-      beforeClose: styles$L['content--before-close']
+      base: styles$R['content'],
+      afterOpen: styles$R['content--after-open'],
+      beforeClose: styles$R['content--before-close']
     },
     data: dataProps
   }, React__default["default"].createElement(ModalHeader, {
@@ -8501,7 +8260,7 @@ var useScrollShadow = function useScrollShadow() {
   };
 };
 
-var styles$J = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
+var styles$P = {"modal-body":"_4YK4k","modal-body--with-scroll-shadow":"_wo1vv","modal-body__inner-div":"_9u6xC"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -8511,15 +8270,15 @@ var ModalBody = function ModalBody(_ref) {
     ref = _useScrollShadow.ref,
     showScrollShadow = _useScrollShadow.showScrollShadow;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$J['modal-body'], (_classNames = {}, _classNames[styles$J['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames__default["default"](styles$P['modal-body'], (_classNames = {}, _classNames[styles$P['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
   }, React__default["default"].createElement("div", {
-    className: styles$J['modal-body__inner-div']
+    className: styles$P['modal-body__inner-div']
   }, children));
 };
 
-var styles$I = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
+var styles$O = {"modal-footer":"_bezlP","tertiary-container":"_EdqHx"};
 
 var updateButtonProps$1 = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -8554,7 +8313,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default["default"].createElement(Inline, {
       justifyContent: "space-between"
     }, React__default["default"].createElement("div", {
-      className: classnames__default["default"]((_classnames = {}, _classnames[styles$I['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames__default["default"]((_classnames = {}, _classnames[styles$O['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default["default"].createElement("div", null)), React__default["default"].createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -8570,7 +8329,7 @@ var FooterContainer = function FooterContainer(_ref2) {
     displayName: 'Inline'
   });
   return React__default["default"].createElement("div", {
-    className: styles$I['modal-footer'],
+    className: styles$O['modal-footer'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     justifyContent: "end",
@@ -8583,7 +8342,7 @@ var dayOverridesStyles = {"root":"_et9Fs","table":"_l7Mis","caption":"_XGu8K","h
 
 var weekOverridesStyles = {"root":"_QLSA6","table":"_96jgF","caption":"_4ySMr","head_cell":"_2AoB4","day_today":"_Snv-V","day_outside":"_Zf-6C","nav_button":"_iOY4h","day_range_middle":"_e0lOH","day_range_start":"_4N7l-","day_range_end":"_fMjHG","row":"_GqE-5"};
 
-var styles$H = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
+var styles$N = {"calendar":"_YPyZ6","calendar__overlay":"_-cw0A"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse__default["default"](str, format, new Date(), {
@@ -8823,9 +8582,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$H['calendar']
+    className: styles$N['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$H['calendar__overlay'],
+    className: styles$N['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -8887,9 +8646,9 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$G = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
+var styles$M = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
 
-var _excluded$h = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
+var _excluded$i = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
 /** CheckboxField form element. */
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -8902,7 +8661,7 @@ var CheckboxField = function CheckboxField(_ref) {
     error = _ref.error,
     disabled = _ref.disabled,
     testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var controllers = useCheckBoxFieldControllers({
     name: name,
     id: inputId,
@@ -8920,7 +8679,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, otherProps), React__default["default"].createElement("div", {
-    className: styles$G['check-box-field']
+    className: styles$M['check-box-field']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
@@ -8933,12 +8692,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("span", {
-    className: styles$G['check-box-field__custom-input']
+    className: styles$M['check-box-field__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$G['check-box-field__caption']
+    className: styles$M['check-box-field__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default["default"].createElement(ErrorMessage, {
@@ -8978,9 +8737,9 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 };
 
-var styles$F = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
+var styles$L = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
-var _excluded$g = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId"];
+var _excluded$h = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId"];
 var HintModal = function HintModal(_ref) {
   var header = _ref.header,
     children = _ref.children,
@@ -8990,7 +8749,7 @@ var HintModal = function HintModal(_ref) {
     primaryButton = _ref.primaryButton,
     secondaryButton = _ref.secondaryButton,
     testId = _ref.testId,
-    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var __ = useTranslation('HintModal');
   var _useState = React.useState(false),
     doNotShowAgain = _useState[0],
@@ -9036,22 +8795,22 @@ var HintModal = function HintModal(_ref) {
     closeTimeoutMS: 200,
     contentLabel: "Modal",
     className: {
-      base: styles$F['hint-modal'],
-      afterOpen: styles$F['hint-modal--after-open'],
-      beforeClose: styles$F['hint-modal--before-close']
+      base: styles$L['hint-modal'],
+      afterOpen: styles$L['hint-modal--after-open'],
+      beforeClose: styles$L['hint-modal--before-close']
     },
-    overlayClassName: styles$F['hint-modal__overlay']
+    overlayClassName: styles$L['hint-modal__overlay']
   }, React__default["default"].createElement("div", {
-    className: styles$F['hint-modal__close-button']
+    className: styles$L['hint-modal__close-button']
   }, React__default["default"].createElement(Button, {
     theme: "link-icon",
     onClick: handleOnClose
   }, React__default["default"].createElement(IconTimes, null))), mediaUrl && React__default["default"].createElement("img", {
-    className: styles$F['hint-modal__image'],
+    className: styles$L['hint-modal__image'],
     src: mediaUrl,
     alt: String(header)
   }), React__default["default"].createElement("div", {
-    className: styles$F['hint-modal__body']
+    className: styles$L['hint-modal__body']
   }, React__default["default"].createElement(Stack, {
     justifyContent: "space-between"
   }, React__default["default"].createElement(Stack, {
@@ -9074,6 +8833,281 @@ var HintModal = function HintModal(_ref) {
   }, secondaryButtonUpdated, primaryButtonUpdated)))));
 };
 
+var _excluded$g = ["children", "theme", "title", "testId"];
+var BadgeElement = function BadgeElement(_ref, forwardedRef) {
+  var _classnames;
+  var children = _ref.children,
+    theme = _ref.theme,
+    title = _ref.title,
+    testId = _ref.testId,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  var internalRef = React.useRef(null);
+  var ref = forwardedRef || internalRef;
+  React.useLayoutEffect(function () {
+    if (typeof ref !== 'function' && ref.current && React__default["default"].isValidElement(children) && typeof (children == null ? void 0 : children.type) !== 'string' && typeof (children == null ? void 0 : children.type) !== 'number') {
+      ref.current.style.height = ref.current.offsetWidth + 'px';
+    }
+  });
+  return React__default["default"].createElement(Tooltip, {
+    overlay: title,
+    ref: ref
+  }, React__default["default"].createElement("div", _extends({
+    className: classnames__default["default"](styles$S['badge'], (_classnames = {}, _classnames[styles$S['badge--success']] = theme === 'success', _classnames[styles$S['badge--danger']] = theme === 'danger', _classnames[styles$S['badge--info']] = theme === 'info', _classnames[styles$S['badge--warning']] = theme === 'warning', _classnames[styles$S['badge--numeric']] = Number.isFinite(children), _classnames)),
+    ref: ref,
+    "data-testid": testId
+  }, otherProps), children));
+};
+var Badge = React.forwardRef(BadgeElement);
+
+var MenuItem = function MenuItem(_ref) {
+  var _classNames;
+  var menu = _ref.menu;
+  return React__default["default"].createElement("li", {
+    className: classnames__default["default"](styles$T['menu-item'])
+  }, menu.reloadDocument ? React__default["default"].createElement("a", {
+    href: menu.to,
+    className: classnames__default["default"]((_classNames = {}, _classNames[styles$T['menu-item--active']] = menu.isActive, _classNames))
+  }, menu.label, !!menu.badge && React__default["default"].createElement(Badge, null, menu.badge)) : React__default["default"].createElement(reactRouterDom.NavLink, {
+    to: menu.to,
+    // @ts-expect-error This is only available on v5
+    activeClassName: styles$T['menu-item--active'],
+    exact: true
+  }, menu.label, !!menu.badge && React__default["default"].createElement(Badge, null, menu.badge)));
+};
+
+var PageLayout = function PageLayout(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    menu = _ref.menu,
+    sideNavContent = _ref.sideNavContent;
+  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: "h5",
+    textWrap: "wrap",
+    ml: 20,
+    mr: 35
+  }, title), React__default["default"].createElement("ul", {
+    className: styles$U['page-layout__nav-list']
+  }, menu.filter(function (menu) {
+    return !('isVisible' in menu) || (menu == null ? void 0 : menu.isVisible) === true;
+  }).map(function (menuItem, index) {
+    return React__default["default"].createElement(MenuItem, {
+      key: index,
+      menu: menuItem
+    });
+  })), sideNavContent && React__default["default"].createElement("div", {
+    className: styles$U['page-layout__side-nav-content']
+  }, sideNavContent))), React__default["default"].createElement("div", {
+    className: styles$U['page-layout__content']
+  }, children));
+};
+
+var PERSISTENT_BANNER_THEME = {
+  UPSELL: 'upsell',
+  INFO: 'info',
+  DANGER: 'danger'
+};
+
+var styles$K = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR"};
+
+var PersistentBanner = function PersistentBanner(_ref) {
+  var _classNames;
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? PERSISTENT_BANNER_THEME.INFO : _ref$theme,
+    children = _ref.children,
+    primaryButton = _ref.primaryButton,
+    secondaryButton = _ref.secondaryButton,
+    onDismiss = _ref.onDismiss,
+    onLoad = _ref.onLoad,
+    testId = _ref.testId;
+  React.useEffect(function () {
+    onLoad == null || onLoad();
+  }, []);
+  var BannerContent = function BannerContent() {
+    return React__default["default"].createElement(Inline, {
+      justifyContent: "center",
+      alignItems: "center"
+    }, children, primaryButton && React__default["default"].cloneElement(primaryButton, _extends({
+      theme: BUTTON_THEMES.HOLLOW_CONTRAST
+    }, primaryButton.props)), secondaryButton && React__default["default"].cloneElement(secondaryButton, _extends({
+      theme: BUTTON_THEMES.LINK_CONTRAST
+    }, secondaryButton.props)));
+  };
+  return React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$K['persistent-banner'], (_classNames = {}, _classNames[styles$K['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$K['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$K['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    "data-testid": testId
+  }, onDismiss ? React__default["default"].createElement(Inline, {
+    flex: [1],
+    alignItems: "center"
+  }, React__default["default"].createElement(BannerContent, null), React__default["default"].createElement(Button, {
+    theme: "link-contrast",
+    onClick: onDismiss
+  }, React__default["default"].createElement(IconTimes, null))) : React__default["default"].createElement(BannerContent, null));
+};
+
+var getProgressMetric = function getProgressMetric(progress, maxValue) {
+  var updatedMaxValue = maxValue > 0 ? maxValue : 100;
+  var updatedProgress = progress;
+  if (updatedProgress > updatedMaxValue) {
+    updatedProgress = updatedMaxValue;
+  }
+  if (updatedProgress < 0) {
+    updatedProgress = 0;
+  }
+  return {
+    progress: updatedProgress,
+    maxValue: updatedMaxValue
+  };
+};
+/**
+ * This function calculates the progress bar so it can align in the center of each step
+ */
+var getProgressMetricWithSteps = function getProgressMetricWithSteps(progress, amountOfSteps) {
+  var maxValue = amountOfSteps * 2;
+  var actualProgress = progress;
+  if (progress < 0) {
+    actualProgress = 0;
+  }
+  if (progress > 0) {
+    var previousProgress = (progress - 1) * 2;
+    actualProgress = previousProgress + 1;
+  }
+  if (actualProgress > maxValue) {
+    actualProgress = maxValue;
+  }
+  return {
+    progress: actualProgress,
+    maxValue: maxValue
+  };
+};
+
+var useProgress = function useProgress(progress, maxValue, getMetric) {
+  if (getMetric === void 0) {
+    getMetric = getProgressMetric;
+  }
+  var metric = getMetric(progress, maxValue);
+  var percentage = metric.progress / metric.maxValue * 100;
+  var elementProps = {
+    'aria-valuemax': metric.maxValue,
+    'aria-valuemin': 0,
+    'aria-valuenow': metric.progress,
+    role: 'progressbar'
+  };
+  return {
+    elementProps: elementProps,
+    metric: _extends({}, metric, {
+      percentage: percentage
+    })
+  };
+};
+
+var styles$J = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
+
+var CircularProgress = function CircularProgress(_ref) {
+  var progress = _ref.progress,
+    _ref$maxValue = _ref.maxValue,
+    maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
+    children = _ref.children,
+    testId = _ref.testId;
+  var _useProgress = useProgress(progress, maxValue),
+    elementProps = _useProgress.elementProps,
+    metric = _useProgress.metric;
+  var determinant = metric.percentage * 2.79;
+  return React__default["default"].createElement("div", _extends({}, elementProps, {
+    className: styles$J['circular-progress'],
+    "data-testid": testId
+  }), React__default["default"].createElement("svg", {
+    viewBox: "0 0 100 100"
+  }, React__default["default"].createElement("circle", {
+    cx: 50,
+    cy: 50,
+    r: 45,
+    strokeWidth: "10px",
+    className: styles$J['circular-progress__track']
+  }), React__default["default"].createElement("circle", {
+    cx: 50,
+    cy: 50,
+    r: 45,
+    strokeWidth: "10px",
+    className: styles$J['circular-progress__indicator'],
+    strokeDashoffset: "66",
+    strokeDasharray: determinant + " " + (279 - determinant)
+  })), React__default["default"].createElement("div", {
+    className: styles$J['circular-progress__label']
+  }, children || metric.progress + "/" + metric.maxValue));
+};
+
+var styles$I = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__steps":"_8kdeO"};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var progress = _ref.progress,
+    maxValue = _ref.maxValue,
+    testId = _ref.testId,
+    steps = _ref.steps;
+  var isUsingStepsAsMaxValue = !maxValue && steps && steps.length > 0;
+  var inferedMaxValue = !maxValue && steps && steps.length > 0 ? steps.length : maxValue;
+  var _useProgress = useProgress(progress, inferedMaxValue || 100, isUsingStepsAsMaxValue ? getProgressMetricWithSteps : getProgressMetric),
+    elementProps = _useProgress.elementProps,
+    metric = _useProgress.metric;
+  return React__default["default"].createElement(Stack, null, React__default["default"].createElement("div", _extends({}, elementProps, {
+    className: styles$I['progress-bar'],
+    "data-testid": testId
+  }), React__default["default"].createElement("div", {
+    className: styles$I['progress-bar__indicator'],
+    style: {
+      width: metric.percentage + "%"
+    }
+  })), steps && steps.length > 0 && React__default["default"].createElement("div", {
+    className: styles$I['progress-bar__steps']
+  }, steps.map(function (step) {
+    return React__default["default"].createElement(Text, {
+      key: step
+    }, step);
+  })));
+};
+
+var styles$H = {"skeleton":"_oDnLM","pulse":"_McmEv","skeleton__button":"_jPXx6","skeleton__pill":"_sPHSZ","skeleton__avatar":"_3vEYT","skeleton__avatar--small":"_zneq9","skeleton__avatar--medium":"_TtfoO","skeleton__avatar--large":"_jhOqR","skeleton__avatar--xlarge":"_VgGfx"};
+
+var SKELETON_COMPONENT = {
+  AVATAR: 'avatar',
+  AVATAR_SMALL: 'avatar--small',
+  AVATAR_MEDIUM: 'avatar--medium',
+  AVATAR_LARGE: 'avatar--large',
+  AVATAR_XLARGE: 'avatar--xlarge',
+  BUTTON: 'button',
+  PILL: 'pill'
+};
+
+var _excluded$f = ["as", "testId", "width", "height"];
+var Skeleton = function Skeleton(_ref) {
+  var _classnames;
+  var as = _ref.as,
+    testId = _ref.testId,
+    width = _ref.width,
+    height = _ref.height,
+    positionStyles = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  var positioning = usePositionStyles(positionStyles);
+  return React__default["default"].createElement("div", {
+    "data-testid": testId,
+    className: classnames__default["default"](styles$H['skeleton'], (_classnames = {}, _classnames[styles$H['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$H['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$H['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$H['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$H['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$H['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$H['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
+    style: _extends({}, positioning, {
+      width: width,
+      height: height
+    })
+  });
+};
+
+var styles$G = {"data-table-row":"_hhDnr","data-table-row--clickable":"_ej5Ke","data-table-row--selected":"_qDTAh"};
+
+var styles$F = {"actions":"_ffXgN"};
+
+var styles$E = {"data-table-cell":"_cp8xi","data-table-cell--no-padding":"_gqbNb","data-table-cell--vertical-border":"_uHjkg","data-table-cell--invalid":"_ASOQd","data-table-cell__content":"_HjPNI","data-table-cell__content--right-align":"_BCVO6","data-table-cell__content--with-error":"_NqtPS","data-table-cell__content--loading":"_-rWoZ","data-table-cell__error-icon":"_txhua","data-table-cell__error-icon--right-align":"_fPzqj","data-table-cell__error-icon--left-align":"_L2-l-"};
+
 var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _columns$columnIndex, _classnames, _classnames2, _classnames3;
   var children = _ref.children,
@@ -9096,17 +9130,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$M['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$M['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$M['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+    className: classnames__default["default"](styles$E['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$E['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$E['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default["default"].createElement(IconTimesOctagon, {
     size: "medium",
     color: "radish-400"
   }));
   var TableCell = React__default["default"].createElement("td", {
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$M['data-table-cell--invalid']] = hasError, _classnames2[styles$M['data-table-cell--no-padding']] = noPadding, _classnames2[styles$M['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$M['data-table-cell']),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$E['data-table-cell--invalid']] = hasError, _classnames2[styles$E['data-table-cell--no-padding']] = noPadding, _classnames2[styles$E['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$E['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$M['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$M['data-table-cell__content--with-error']] = hasError, _classnames3[styles$M['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$M['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
+    className: classnames__default["default"](styles$E['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$E['data-table-cell__content--with-error']] = hasError, _classnames3[styles$E['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$E['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default["default"].createElement(Tooltip, {
     overlay: errorMessage,
@@ -9131,7 +9165,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default["default"].createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default["default"].createElement("div", {
-    className: styles$N['actions'],
+    className: styles$F['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, state === 'SKELETON_LOADING' && React__default["default"].createElement(Skeleton, {
     width: 45
@@ -9146,7 +9180,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-var styles$E = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
+var styles$D = {"data-table-editable-cell":"_jp9-G","data-table-editable-cell--right-aligned":"_BzPeH","data-table-editable-cell--currency":"_NhNG9","data-table-editable-cell--invalid":"_5HRwe","data-table-editable-cell--top-left":"_P--u2","data-table-editable-cell--top-right":"_EloAX","data-table-editable-cell--bottom-left":"_ZDCR9","data-table-editable-cell--bottom-right":"_Mc9YJ"};
 
 var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
   var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
@@ -9192,7 +9226,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$E['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$E['data-table-editable-cell']),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$D['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$D['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
@@ -9201,7 +9235,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$E['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$E['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$E['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$E['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$E['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$E['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$D['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$D['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$D['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$D['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$D['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$D['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": testId && testId + "-text-field",
@@ -9226,7 +9260,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
 };
 var DataTableEditableCell = React.forwardRef(DataTableEditableCellElement);
 
-var _excluded$f = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
+var _excluded$e = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
 var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _classnames;
   var children = _ref.children,
@@ -9238,10 +9272,10 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     _ref$hasDefaultCell = _ref.hasDefaultCell,
     hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
     testId = _ref.testId,
-    nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var _useDataTableContext = useDataTableContext(),
     showActionMenu = _useDataTableContext.showActionMenu;
-  var styleNames = classnames__default["default"](styles$O['data-table-row'], (_classnames = {}, _classnames[styles$O['data-table-row--clickable']] = onClick, _classnames[styles$O['data-table-row--selected']] = isSelected, _classnames));
+  var styleNames = classnames__default["default"](styles$G['data-table-row'], (_classnames = {}, _classnames[styles$G['data-table-row--clickable']] = onClick, _classnames[styles$G['data-table-row--selected']] = isSelected, _classnames));
   var renderColumn = function renderColumn(columnElement, index) {
     var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement == null ? void 0 : columnElement.type) === DataTableCell;
     if (isUsingDataTableCell || !hasDefaultCell) {
@@ -9337,7 +9371,7 @@ var calculateScrollState = function calculateScrollState(scrollContainer) {
   return DATA_TABLE_SCROLL_STATES.NO_SCROLL;
 };
 
-var styles$D = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
+var styles$C = {"data-table-sticky-columns-container":"_j5iVD","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_7dAEd","data-table-sticky-columns-container--no-shadow":"_rR4W3","fadein":"_b1-OB","data-table-sticky-columns-container--with-left-sticky-columns":"_qLE4I","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_B92Ir","data-table-sticky-columns-container--with-right-sticky-columns":"_ONjpl","data-table-sticky-columns-container--with-footer":"_DE3fh"};
 
 var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   var scrollContainerRef = React.useRef(null);
@@ -9384,7 +9418,7 @@ var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
   };
 };
 
-var styles$C = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
+var styles$B = {"data-table-cover-shadow":"_4XrxW","data-table-cover-shadow--left":"_k704p","data-table-cover-shadow--left-shadow":"_VXlf0","fadeinshadowleft":"_Fr-av","data-table-cover-shadow--right":"_wOust","data-table-cover-shadow--right-shadow":"_b3Rzx","fadeinshadowright":"_KgJaq"};
 
 var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
   var _classNames;
@@ -9403,7 +9437,7 @@ var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
     return "calc(100% - " + headerHeight + ")";
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$C['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$C['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$C['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$C['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$C['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
+    className: classnames__default["default"](styles$B['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$B['data-table-cover-shadow--left']] = direction === 'left', _classNames[styles$B['data-table-cover-shadow--left-shadow']] = direction === 'left' && showShadow, _classNames[styles$B['data-table-cover-shadow--right']] = direction === 'right', _classNames[styles$B['data-table-cover-shadow--right-shadow']] = direction === 'right' && showShadow, _classNames)),
     style: {
       // @ts-expect-error This difines a custom CSS variable
       '--corner-background-color': backgroundColor,
@@ -9463,18 +9497,18 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     isShowingColumns: !!isShowingColumns,
     showShadow: state === 'EMPTY' ? false : stickyColumns === 'left'
   })), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$D[containerClassName], (_classNames = {}, _classNames[styles$D[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$D[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$D[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$D[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$D[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$D[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+    className: classnames__default["default"](styles$C[containerClassName], (_classNames = {}, _classNames[styles$C[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$C[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$C[containerClassName + "--with-left-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasLeftColumnSticky && hasScrollOnLeft : false, _classNames[styles$C[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$C[containerClassName + "--with-right-sticky-columns-and-shadow"]] = state !== 'EMPTY' ? hasRightColumnSticky && hasScrollOnRight : false, _classNames[styles$C[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"
   }, children));
 };
 
-var styles$B = {"data-table-empty-state":"_fCHjG"};
+var styles$A = {"data-table-empty-state":"_fCHjG"};
 
-var styles$A = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
+var styles$z = {"empty-state-container-stack":"_4nO7T","empty-state-container-stack__content":"_KiEVo","empty-state-container-stack__content--full-page":"_ib04g","empty-state-container-stack__content--inline-horizontal":"_bSiJj","empty-state-container-stack__body":"_mi-dC"};
 
-var styles$z = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
+var styles$y = {"empty-state-container-cta":"_X-dEs","empty-state-container-cta--inside-modal":"_63-SX"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -9491,7 +9525,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$z['empty-state-container-cta'], (_classNames = {}, _classNames[styles$z['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames__default["default"](styles$y['empty-state-container-cta'], (_classNames = {}, _classNames[styles$y['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -9507,7 +9541,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     testId = _ref.testId,
     mediaComponent = _ref.mediaComponent;
   return React__default["default"].createElement("div", {
-    className: styles$A['empty-state-container-stack'],
+    className: styles$z['empty-state-container-stack'],
     "data-testid": testId
   }, mediaComponent ? mediaComponent : mediaUrl && React__default["default"].createElement("img", {
     src: mediaUrl,
@@ -9524,7 +9558,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     as: "body",
     alignment: "center"
   }, title), React__default["default"].createElement("div", {
-    className: styles$A['empty-state-container-stack__body']
+    className: styles$z['empty-state-container-stack__body']
   }, children)), React__default["default"].createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -9634,7 +9668,7 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
     columnIndex: shouldRenderStickyLeftCell ? 1 : 0,
     colSpan: colSpan
   }, React__default["default"].createElement("div", {
-    className: styles$B['data-table-empty-state']
+    className: styles$A['data-table-empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     mediaUrl: customImage,
     mediaComponent: customImage === '' ? React__default["default"].createElement(MagnifyingGlassIllustration, null) : undefined,
@@ -9646,7 +9680,7 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
   }, ''));
 };
 
-var _excluded$e = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns", "emptyState"];
+var _excluded$d = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns", "emptyState"];
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
   var items = _ref.items,
@@ -9671,7 +9705,7 @@ var DataTable = function DataTable(_ref) {
     skeletonRowLayout = _ref.skeletonRowLayout,
     stickyColumns = _ref.stickyColumns,
     emptyState = _ref.emptyState,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var prevItemsRef = React.useRef([]);
@@ -9791,7 +9825,7 @@ var DataTable = function DataTable(_ref) {
   })), React__default["default"].createElement(Pagination, null));
 };
 
-var styles$y = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
+var styles$x = {"accordion-item":"_8980Z","accordion-item__link":"_C-YV6","accordion-item__header":"_vk-N-","accordion-item__icon":"_LSVms","accordion-item__icon--active":"_hLMLR","accordion-item__content":"_KFyFh","accordion-item__content--active":"_kykXP"};
 
 var AccordionItem = function AccordionItem(props) {
   var item = props.item,
@@ -9802,9 +9836,9 @@ var AccordionItem = function AccordionItem(props) {
     content = item.content;
   var isFocusedByClickRef = React__default["default"].useRef(false);
   return React__default["default"].createElement("div", {
-    className: styles$y['accordion-item']
+    className: styles$x['accordion-item']
   }, React__default["default"].createElement("button", {
-    className: styles$y['accordion-item__header'],
+    className: styles$x['accordion-item__header'],
     onClick: function onClick() {
       if (isOpen) {
         handleAccordionItemOpen(null);
@@ -9832,17 +9866,17 @@ var AccordionItem = function AccordionItem(props) {
     color: "grey-500",
     emphasis: "bold"
   }, title), React__default["default"].createElement(IconChevronDown, {
-    className: styles$y["accordion-item__icon" + (isOpen ? '--active' : '')],
+    className: styles$x["accordion-item__icon" + (isOpen ? '--active' : '')],
     color: 'grey-400'
   }))), React__default["default"].createElement("div", {
     "data-testid": "" + (isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'),
-    className: styles$y["accordion-item__content" + (isOpen ? '--active' : '')]
+    className: styles$x["accordion-item__content" + (isOpen ? '--active' : '')]
   }, isOpen && React__default["default"].createElement(Text, {
     color: "grey-500"
   }, content)));
 };
 
-var styles$x = {"accordion":"_058SP"};
+var styles$w = {"accordion":"_058SP"};
 
 var Accordion = function Accordion(props) {
   var items = props.items,
@@ -9862,7 +9896,7 @@ var Accordion = function Accordion(props) {
       isAccordionMounted: true
     }
   }, React__default["default"].createElement("div", {
-    className: styles$x['accordion']
+    className: styles$w['accordion']
   }, items.map(function (item, index) {
     var id = item.id || index.toString();
     return React__default["default"].createElement(AccordionItem, {
@@ -9876,7 +9910,7 @@ var Accordion = function Accordion(props) {
   })));
 };
 
-var styles$w = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
+var styles$v = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
 
 var ActionList = function ActionList(_ref) {
   var children = _ref.children,
@@ -9886,15 +9920,15 @@ var ActionList = function ActionList(_ref) {
     maxHeight = _ref.maxHeight;
   var translate = useTranslation('ActionList');
   return React__default["default"].createElement("div", {
-    className: styles$w['action-list'],
+    className: styles$v['action-list'],
     "data-testid": testId,
     style: {
       maxHeight: maxHeight
     }
   }, title && React__default["default"].createElement("div", {
-    className: styles$w['action-list__title']
+    className: styles$v['action-list__title']
   }, title), children ? children : React__default["default"].createElement("div", {
-    className: styles$w['action-list__empty-state']
+    className: styles$v['action-list__empty-state']
   }, React__default["default"].createElement(EmptyStateContainerStack, {
     title: (emptyState == null ? void 0 : emptyState.title) || translate('emptyStateTitle'),
     mediaUrl: emptyState == null ? void 0 : emptyState.image,
@@ -10057,17 +10091,17 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$v = {"custom-control":"_pXQqq"};
+var styles$u = {"custom-control":"_pXQqq"};
 
-var _excluded$d = ["children"];
+var _excluded$c = ["children"];
 function CustomControl(_ref) {
   var _props$getValue;
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue[0];
   return React__default["default"].createElement(Select.components.Control, _extends({}, props), SelectedOptionPrefix && selectedOption ? React__default["default"].createElement("div", {
-    className: styles$v['custom-control'],
+    className: styles$u['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -10080,10 +10114,10 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$c = ["children"];
+var _excluded$b = ["children"];
 function CustomOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
   if (!UserCustomOption) {
     return null;
@@ -10238,12 +10272,12 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$u = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
+var styles$t = {"custom-menu-text-field":"_AAUjm","custom-menu-hr":"_mFLK9","custom-menu-div":"_1XpI4"};
 
-var _excluded$b = ["children"];
+var _excluded$a = ["children"];
 function CustomMenu(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _props$selectProps$co = props.selectProps.componentsProps,
     creatableButton = _props$selectProps$co.creatableButton,
     onMenuInputFocus = _props$selectProps$co.onMenuInputFocus,
@@ -10308,15 +10342,15 @@ function CustomMenu(_ref) {
   return React__default["default"].createElement(Select.components.Menu, _extends({}, props), React__default["default"].createElement("div", {
     ref: containerRef
   }, children, React__default["default"].createElement("hr", {
-    className: styles$u['custom-menu-hr']
+    className: styles$t['custom-menu-hr']
   }), !showFooter ? React__default["default"].createElement(CreatableButton, null) : React__default["default"].createElement("div", {
-    className: styles$u['custom-menu-div']
+    className: styles$t['custom-menu-div']
   }, React__default["default"].createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$12['text-field'], styles$u['custom-menu-text-field']),
+    className: classnames__default["default"](styles$12['text-field'], styles$t['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -10356,7 +10390,7 @@ function CustomMenu(_ref) {
   }, __('createButton'))))));
 }
 
-var _excluded$a = ["asToolbarFilter", "caption", "disabled", "error", "id", "isClearable", "label", "menuShouldScrollIntoView", "name", "noOptionsMessage", "options", "onBlur", "onChange", "placeholder", "value", "defaultValue", "CustomOption", "SelectedOptionPrefix", "testId", "creatableButton", "onCreate", "isSearchable", "autoFocus"];
+var _excluded$9 = ["asToolbarFilter", "caption", "disabled", "error", "id", "isClearable", "label", "menuShouldScrollIntoView", "name", "noOptionsMessage", "options", "onBlur", "onChange", "placeholder", "value", "defaultValue", "CustomOption", "SelectedOptionPrefix", "testId", "creatableButton", "onCreate", "isSearchable", "autoFocus"];
 var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
     asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
@@ -10385,7 +10419,7 @@ var useSelectField = function useSelectField(_ref) {
     _ref$isSearchable = _ref.isSearchable,
     isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
     autoFocus = _ref.autoFocus,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var _useState = React.useState(false),
     isMenuInputFocus = _useState[0],
     setIsMenuInputFocus = _useState[1];
@@ -10462,7 +10496,7 @@ var useSelectField = function useSelectField(_ref) {
   };
 };
 
-var styles$t = {"select-field__suffix":"_vqC1M"};
+var styles$s = {"select-field__suffix":"_vqC1M"};
 
 /** Component to make possible choose from a predefined options. */
 var SelectField = function SelectField(props) {
@@ -10471,7 +10505,7 @@ var SelectField = function SelectField(props) {
     selectProps = _useSelectField.selectProps;
   //Select field has the chevron icon as suffix, so we need to add a margin to the suffix to avoid overlapping with the chevron icon
   var suffixWithMargin = props.suffix ? React__default["default"].createElement("div", {
-    className: styles$t['select-field__suffix']
+    className: styles$s['select-field__suffix']
   }, props.suffix) : undefined;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(AffixContainer, {
     prefix: props.prefix,
@@ -10512,9 +10546,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$s = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
+var styles$r = {"date-filter":"_PyXfe","date-filter--wide":"_P6ttU"};
 
-var styles$r = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
+var styles$q = {"date-filter-display":"_N37zE","date-filter-display--non-interactive":"_42Bvz","date-filter-display--wide":"_h8n2w","date-filter-display__display-icon":"_i08yV"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -10567,7 +10601,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     weekStart = _ref.weekStart,
     onClick = _ref.onClick;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$r['date-filter-display'], (_classnames = {}, _classnames[styles$r['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$r['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames__default["default"](styles$q['date-filter-display'], (_classnames = {}, _classnames[styles$q['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$q['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -10575,7 +10609,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$r['date-filter-display__display-icon'])
+    className: classnames__default["default"](styles$q['date-filter-display__display-icon'])
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "flexible",
     color: "grey-400"
@@ -10586,7 +10620,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$q = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
+var styles$p = {"date-stepper":"_9wFtw","date-stepper--backward":"_OrtcR","date-stepper--forward":"_oYoUt"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -10615,7 +10649,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
     onChange = _ref.onChange,
     date = _ref.date;
   return React__default["default"].createElement("button", {
-    className: classnames__default["default"](styles$q['date-stepper'], (_classnames = {}, _classnames[styles$q['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$q['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames__default["default"](styles$p['date-stepper'], (_classnames = {}, _classnames[styles$p['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$p['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -10644,7 +10678,7 @@ var DateFilter = function DateFilter(_ref) {
   }, [setCalendarOpen]);
   return React__default["default"].createElement("div", {
     "data-testid": testId,
-    className: classnames__default["default"](styles$s['date-filter'], (_classnames = {}, _classnames[styles$s['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames__default["default"](styles$r['date-filter'], (_classnames = {}, _classnames[styles$r['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: 0
   }, React__default["default"].createElement(DateFilterStepper, {
@@ -10684,7 +10718,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$p = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb","segmented-control__divider":"_GEqG9"};
+var styles$o = {"segmented-control":"_RezMY","segmented-control__button":"_lehFG","segmented-control__button--selected":"_Fr5kb","segmented-control__divider":"_GEqG9"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -10698,7 +10732,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return index === options.length - 1;
   };
   return React__default["default"].createElement("div", {
-    className: styles$p['segmented-control'],
+    className: styles$o['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -10708,16 +10742,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames__default["default"](styles$p['segmented-control__button'], (_classnames = {}, _classnames[styles$p['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames__default["default"](styles$o['segmented-control__button'], (_classnames = {}, _classnames[styles$o['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$p['segmented-control__divider'])
+      className: classnames__default["default"](styles$o['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$o = {"form--standard-size":"_8-Ykj"};
+var styles$n = {"form--standard-size":"_8-Ykj"};
 
-var styles$n = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
+var styles$m = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -10731,12 +10765,12 @@ var FormSection = function FormSection(_ref) {
   var content = React__default["default"].createElement(Stack, null, (title || subtitle) && React__default["default"].createElement(Stack, {
     space: 8
   }, title && React__default["default"].createElement("h2", {
-    className: classnames__default["default"](styles$n['form-section__title'])
+    className: classnames__default["default"](styles$m['form-section__title'])
   }, title), subtitle && React__default["default"].createElement("h3", {
-    className: classnames__default["default"](styles$n['form-section__subtitle'])
+    className: classnames__default["default"](styles$m['form-section__subtitle'])
   }, subtitle)), children);
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$n['form-section'], (_classnames = {}, _classnames[styles$n['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
+    className: classnames__default["default"](styles$m['form-section'], (_classnames = {}, _classnames[styles$m['form-section--no-margin']] = noMargin || as === 'card', _classnames)),
     "data-testid": testId
   }, as === 'card' ? React__default["default"].createElement(Card, {
     testId: testId && testId + "-card"
@@ -10755,7 +10789,7 @@ var updateButtonProps = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$m = {"form-footer":"_4ksfB"};
+var styles$l = {"form-footer":"_4ksfB"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -10789,7 +10823,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default["default"].Children.count(children) === 1 && React__default["default"].isValidElement(children) && children.type === Inline;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$m['form-footer']),
+    className: classnames__default["default"](styles$l['form-footer']),
     "data-testid": testId
   }, actions && React__default["default"].createElement(FormFooterActions, {
     actions: actions
@@ -10828,12 +10862,12 @@ var Form = function Form(_ref) {
     }
   }, React__default["default"].createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik == null ? void 0 : formik.handleSubmit,
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$o['form--standard-size']] = !wide, _classnames)),
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$n['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default["default"].createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$l = {"form-row":"_xX-RS"};
+var styles$k = {"form-row":"_xX-RS"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -10864,7 +10898,7 @@ var FormRow = function FormRow(_ref) {
     space: space,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$l['form-row']
+    extraClass: styles$k['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default["default"].createElement("span", {
       key: index,
@@ -10873,7 +10907,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$k = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
+var styles$j = {"text-field":"_JaB08","text-field--focus":"_62RIR","text-field--disabled":"_CDt23","text-field--invalid":"_wf4XP","text-field__toolbar":"_7xVsj"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -10946,7 +10980,7 @@ var TextAreaField = function TextAreaField(_ref) {
   return React__default["default"].createElement(Field, _extends({}, fieldProps, {
     characterCount: controllers.value !== undefined && maxLength ? maxLength - controllers.value.length : undefined
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames[styles$k['text-field--disabled']] = disabled, _classnames[styles$k['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames__default["default"](styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames[styles$j['text-field--disabled']] = disabled, _classnames[styles$j['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef == null ? void 0 : containerRef.current)) {
@@ -10979,7 +11013,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default["default"].createElement("div", {
-    className: styles$k['text-field__toolbar'],
+    className: styles$j['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -10991,11 +11025,11 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var _excluded$9 = ["prefix", "suffix"];
+var _excluded$8 = ["prefix", "suffix"];
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
     suffix = _ref.suffix,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _useTextField = useTextField(_extends({}, props, {
       ref: ref
     })),
@@ -11010,7 +11044,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 };
 var TextField = React.forwardRef(TextFieldElement);
 
-var styles$j = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
+var styles$i = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -11080,10 +11114,10 @@ var CreatableOption = function CreatableOption(_ref) {
   };
   return React__default["default"].createElement(React__default["default"].Fragment, null, !isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-create-option',
-    className: styles$j['pill-select-field']
+    className: styles$i['pill-select-field']
   }, React__default["default"].createElement("button", {
     "data-testid": testId ? testId + "-create-option" : undefined,
-    className: styles$j['pill-select-field__add-new-input'],
+    className: styles$i['pill-select-field__add-new-input'],
     onClick: function onClick() {
       setIsCreatingOption(true);
       setNewOptionLabel('');
@@ -11092,9 +11126,9 @@ var CreatableOption = function CreatableOption(_ref) {
     size: "small"
   }), createOptionLabel)), isCreatingOption && React__default["default"].createElement("div", {
     key: 'pill-select-field-creating-option',
-    className: styles$j['pill-select-field']
+    className: styles$i['pill-select-field']
   }, React__default["default"].createElement("input", {
-    className: styles$j['pill-select-field__creating-input'],
+    className: styles$i['pill-select-field__creating-input'],
     name: name + "-pill-select-field-creating-option",
     id: 'pill-select-field-creating-option',
     type: "text",
@@ -11117,7 +11151,7 @@ var CreatableOption = function CreatableOption(_ref) {
       }
     }
   }), React__default["default"].createElement("span", {
-    className: styles$j['pill-select-field__creating-custom-input']
+    className: styles$i['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default["default"].createElement(Text, {
     as: "body",
     color: "grey-300"
@@ -11170,7 +11204,7 @@ var PillSelectField = function PillSelectField(_ref) {
       }
     };
     return React__default["default"].createElement("button", {
-      className: styles$j['pill-select-field__removable-icon'],
+      className: styles$i['pill-select-field__removable-icon'],
       onClick: handleClick
     }, React__default["default"].createElement(IconTimes, {
       size: "small"
@@ -11188,7 +11222,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default["default"].createElement("div", {
       key: itemIdentifier,
-      className: styles$j['pill-select-field']
+      className: styles$i['pill-select-field']
     }, React__default["default"].createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -11208,7 +11242,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default["default"].createElement("span", {
-      className: styles$j['pill-select-field__custom-input']
+      className: styles$i['pill-select-field__custom-input']
     }, option.label, option.isRemovable && React__default["default"].createElement(RemoveButton, {
       option: option
     })));
@@ -11257,9 +11291,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$i = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
+var styles$h = {"label":"_xzukU","label--truncate":"_iVWRB","caption":"_JNfQO","radio-group-field__label":"_2KvuU","radio-group-field__caption":"_ZeIOd"};
 
-var styles$h = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
+var styles$g = {"label":"_s7mjc","label--truncate":"_dZjDs","caption":"_JIw-5","radio-group-box-option":"_IIX-P","radio-group-box-option__box":"_P588B","radio-group-box-option__box--disabled":"_Ir3Og","radio-group-box-option__label":"_U--9r","radio-group-box-option__label--disabled":"_Lvxmy","radio-group-box-option__caption":"_NC-bO","radio-group-box-option__caption--disabled":"_04Cjp"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -11276,7 +11310,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default["default"].createElement("label", {
-    className: styles$h['radio-group-box-option']
+    className: styles$g['radio-group-box-option']
   }, React__default["default"].createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -11287,7 +11321,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$h['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$h['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames__default["default"](styles$g['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$g['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default["default"].createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -11296,13 +11330,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$h['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$h['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames__default["default"](styles$g['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$g['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$h['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$h['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames__default["default"](styles$g['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$g['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$g = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
+var styles$f = {"radio-group-option":"_7fVpn","radio-group-option__caption":"_VD7SO","radio-group-option__custom-input":"_Yfxkl"};
 
 /** RadioGroupField form element. */
 var RadioGroupOption = function RadioGroupOption(_ref) {
@@ -11323,7 +11357,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$g['radio-group-option']
+    className: styles$f['radio-group-option']
   }, React__default["default"].createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -11334,11 +11368,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default["default"].createElement("span", {
-    className: styles$g['radio-group-option__custom-input']
+    className: styles$f['radio-group-option__custom-input']
   })), label && React__default["default"].createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default["default"].createElement("div", {
-    className: styles$g['radio-group-option__caption']
+    className: styles$f['radio-group-option__caption']
   }, React__default["default"].createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -11475,7 +11509,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: space
   }, label && React__default["default"].createElement("div", {
-    className: styles$i['radio-group-field__label']
+    className: styles$h['radio-group-field__label']
   }, label), React__default["default"].createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default["default"].createElement(RadioOptions, {
@@ -11487,20 +11521,20 @@ var RadioGroupField = function RadioGroupField(_ref) {
     testId: testId,
     space: space
   }, children), caption && React__default["default"].createElement("div", {
-    className: styles$i['radio-group-caption']
+    className: styles$h['radio-group-caption']
   }, caption), controllers.error && React__default["default"].createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$f = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
+var styles$e = {"text-field":"_6Of1F","text-field--invalid":"_NQPNK","text-field--prefixed":"_BpQWQ","text-field--suffixed":"_cpYWb","password-container":"_pAoib","password-toggle":"_WVvS6","password-toggle--disabled":"_G29N3"};
 
-var styles$e = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
+var styles$d = {"password-criteria":"_1ruWK","password-criteria--invalid":"_xR7tb"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
   var met = _ref.met,
     children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$e['password-criteria'], (_classnames = {}, _classnames[styles$e['password-criteria--invalid']] = !met, _classnames))
+    className: classnames__default["default"](styles$d['password-criteria'], (_classnames = {}, _classnames[styles$d['password-criteria--invalid']] = !met, _classnames))
   }, React__default["default"].createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default["default"].createElement(IconCheck, {
@@ -11581,11 +11615,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$f['password-container']
+    className: styles$e['password-container']
   }, React__default["default"].createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames__default["default"](styles$f['text-field'], (_classnames = {}, _classnames[styles$f['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$e['text-field'], (_classnames = {}, _classnames[styles$e['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -11597,7 +11631,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$f['password-toggle'], (_classNames = {}, _classNames[styles$f['password-toggle--disabled']] = disabled, _classNames)),
+    className: classnames__default["default"](styles$e['password-toggle'], (_classNames = {}, _classNames[styles$e['password-toggle--disabled']] = disabled, _classNames)),
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -11702,14 +11736,14 @@ var MultiSelectField = function MultiSelectField(_ref) {
   })));
 };
 
-var styles$d = {"custom-list":"_cSkvD"};
+var styles$c = {"custom-list":"_cSkvD"};
 
-var _excluded$8 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$7 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
     hasMoreOptions = _ref.hasMoreOptions,
     hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var __ = useTranslation('AsyncSelectField');
   var showFooter = hasMoreOptions;
   if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
@@ -11718,18 +11752,18 @@ var CustomList = function CustomList(_ref) {
   return React__default["default"].createElement(Select.components.MenuList, _extends({}, props), React__default["default"].createElement(React.Fragment, null, children, showFooter && props.options.length > 0 && React__default["default"].createElement(Inline, {
     justifyContent: "center"
   }, React__default["default"].createElement("div", {
-    className: styles$d['custom-list']
+    className: styles$c['custom-list']
   }, __('moreOptionsPlaceholder')))));
 };
 
-var _excluded$7 = ["loadOptions"];
+var _excluded$6 = ["loadOptions"];
 /**
  * Component to make possible choose from async options. It looks exactly as the [SelectField](./?path=/docs/forms-selectfield--default) but, this one handles asynchronous options.
  * Instead of passing a `options` props, this component requires a `loadOptions` prop.
  * */
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useState = React.useState(false),
     hasMoreOptions = _useState[0],
     setHasMoreOptions = _useState[1];
@@ -12037,7 +12071,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$c = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
+var styles$b = {"text-field":"_6cH4X","date-range-field":"_DMb6M","text-field--invalid":"_eXIiZ","text-field--prefixed":"_Lc6QO","text-field--suffixed":"_VWrJD","date-range-field--invalid":"_ZJ2A5","date-range-field--disabled":"_WkaJQ"};
 
 var calendarStyles = {"root":"_SsQ7L","table":"_Ar-fF","caption":"_Tp79k","head_cell":"_Ya6Zr","day_today":"_lFzs7","day_outside":"_TjttB","nav_button":"_cwiRM","day_range_middle":"_rJolM","day_range_start":"_nVIPx","day_range_end":"_Y50yT"};
 
@@ -12103,9 +12137,9 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   var DAYS = getDays(translate);
   var MONTH_NAMES = getMonths(translate);
   return React__default["default"].createElement(Portal, null, React__default["default"].createElement("div", {
-    className: styles$H['calendar']
+    className: styles$N['calendar']
   }, React__default["default"].createElement("div", {
-    className: styles$H['calendar__overlay'],
+    className: styles$N['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -12311,7 +12345,7 @@ var DateRangeField = function DateRangeField(_ref) {
     start = _controllers$value.start,
     end = _controllers$value.end;
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$c['date-range-field'], (_classnames = {}, _classnames[styles$c['date-range-field--invalid']] = hasError, _classnames[styles$c['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$b['date-range-field'], (_classnames = {}, _classnames[styles$b['date-range-field--invalid']] = hasError, _classnames[styles$b['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "medium",
@@ -12602,7 +12636,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   })));
 };
 
-var _excluded$6 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration", "timeFormat"];
+var _excluded$5 = ["interval", "startTime", "prefix", "endField", "duration", "subtractDuration", "calculateDuration", "timeFormat"];
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 15 : _ref$interval,
@@ -12614,7 +12648,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
     subtractDuration = _ref.subtractDuration,
     calculateDuration = _ref.calculateDuration,
     timeFormat = _ref.timeFormat,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useProviderConfig = useProviderConfig(),
     globalTimeFormat = _useProviderConfig.timeFormat;
   var internalRef = React.useRef(null);
@@ -12676,7 +12710,7 @@ var TimeRangeSelector = React.forwardRef(TimeFieldElement);
  */
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var styles$b = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
+var styles$a = {"text-field":"_yV-BZ","time-range-field":"_9i8Lj","text-field--invalid":"_FJVdv","text-field--prefixed":"_B7q-i","text-field--suffixed":"_DvCJW","time-range-field--invalid":"_g2UhP","time-range-field--disabled":"_Yn4T4"};
 
 var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
@@ -12794,7 +12828,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
     end: end
   }) : getDuration(end, start, subtractDuration);
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$b['time-range-field'], (_classnames = {}, _classnames[styles$b['time-range-field--invalid']] = hasError, _classnames[styles$b['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames__default["default"](styles$a['time-range-field'], (_classnames = {}, _classnames[styles$a['time-range-field--invalid']] = hasError, _classnames[styles$a['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default["default"].createElement(TimeRangeStart, {
     startTime: startTime,
@@ -12825,18 +12859,18 @@ var TimeRangeField = function TimeRangeField(_ref) {
   })));
 };
 
-var styles$a = {"currency-field__mask-display":"_ddacu"};
+var styles$9 = {"currency-field__mask-display":"_ddacu"};
 
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
 
-var _excluded$5 = ["currencySymbol", "step"];
+var _excluded$4 = ["currencySymbol", "step"];
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
   var _ref$currencySymbol = _ref.currencySymbol,
     currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 0.01 : _ref$step,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _useState = React.useState(CURRENCY_DISPLAY_DEFAULT_MARGIN),
     displayPadding = _useState[0],
     setDisplayPadding = _useState[1];
@@ -12893,7 +12927,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
       inputProps.onFocus(e);
     }
   }))), showMask && !!inputProps.value && React__default["default"].createElement("div", {
-    className: styles$a['currency-field__mask-display'],
+    className: styles$9['currency-field__mask-display'],
     style: {
       marginLeft: displayPadding
     }
@@ -12906,7 +12940,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
  */
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$4 = ["max", "min", "precision", "stepSize", "prefix", "suffix"];
+var _excluded$3 = ["max", "min", "precision", "stepSize", "prefix", "suffix"];
 var NumberFieldElement = function NumberFieldElement(_ref, ref) {
   var max = _ref.max,
     _ref$min = _ref.min,
@@ -12917,7 +12951,7 @@ var NumberFieldElement = function NumberFieldElement(_ref, ref) {
     stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var _useTextField = useTextField(_extends({}, allOtherProps, {
       ref: ref
     })),
@@ -12991,11 +13025,11 @@ var NumberFieldElement = function NumberFieldElement(_ref, ref) {
  */
 var NumberField = React.forwardRef(NumberFieldElement);
 
-var _excluded$3 = ["max"];
+var _excluded$2 = ["max"];
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
     max = _ref$max === void 0 ? 100 : _ref$max,
-    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return React__default["default"].createElement(NumberField, _extends({}, allOtherProps, {
     suffix: "%",
     ref: ref,
@@ -13018,7 +13052,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$9 = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
+var styles$8 = {"phone-field":"_Q0GfJ","phone-field__flag":"_-uOqW","phone-field__input":"_Hes9b","phone-field__input--with-square-borders":"_TEU6N"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -13929,7 +13963,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-var styles$8 = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
+var styles$7 = {"country-selector":"_VYs4A","country-selector--with-error":"_oSxxZ","country-selector__trigger":"_jlyd4","country-selector--disabled":"_tNInT","country-selector__trigger--with-error":"_424HM","country-selector__trigger--disabled":"_0XOFf","country-selector__trigger-flag":"_RfPa1","country-selector__flag":"_uADOl"};
 
 var flagIcons = {"fi":"_wEQeh","fis":"_Z-kfc","fi-ac":"_amiP8","fi-ad":"_-Nycw","fi-ae":"_5zcAZ","fi-af":"_x-kp7","fi-ag":"_cfoi1","fi-ai":"_xoMS-","fi-al":"_am975","fi-am":"_0p-gD","fi-ao":"_l245N","fi-ar":"_xigkX","fi-as":"_fSczv","fi-at":"_tTeMy","fi-au":"_nSXvc","fi-aw":"_J3Dgu","fi-ax":"_PnU0s","fi-az":"_Hevuf","fi-ba":"_V-NYg","fi-bb":"_rdxaV","fi-bd":"_W3w35","fi-be":"_HXWpo","fi-bf":"_-xCW2","fi-bg":"_UuyPh","fi-bh":"_qYHkT","fi-bi":"_sfFeO","fi-bj":"_HcoBc","fi-bl":"_VvU29","fi-bm":"_DCtD1","fi-bn":"_QdHY3","fi-bo":"_Ayx7f","fi-bq":"_VfZGH","fi-br":"_HigIg","fi-bs":"_PWr-E","fi-bt":"_uFlIS","fi-bw":"_Mmoqr","fi-by":"_MKO28","fi-bz":"_HBn3o","fi-ca":"_wB3xX","fi-cc":"_oJEC5","fi-cd":"_C3RR8","fi-cf":"_ZVOZZ","fi-cg":"_Nk7Zr","fi-ch":"_9qTmx","fi-ci":"_4-gxn","fi-ck":"_YEK3x","fi-cl":"_-iNl4","fi-cm":"_UozRb","fi-cn":"_KsOEH","fi-co":"_ptSEc","fi-cr":"_92iwJ","fi-cu":"_D0k3p","fi-cv":"_O5oBT","fi-cw":"_82pI2","fi-cx":"_Eqg1T","fi-cy":"_740E8","fi-cz":"_483Iy","fi-de":"_Wla8X","fi-dj":"_Jm9gH","fi-dk":"_5QJuz","fi-dm":"_4lh-K","fi-do":"_Zvttl","fi-dz":"_-5iKJ","fi-ec":"_XMC0f","fi-ee":"_tZDe6","fi-eg":"_5USxE","fi-eh":"_rpC1Z","fi-er":"_Rhm4A","fi-es":"_QN2si","fi-et":"_2ihBN","fi-fi":"_2Lctq","fi-fj":"_ljZXm","fi-fk":"_Um9-A","fi-fm":"_mXG-Y","fi-fo":"_SemMo","fi-fr":"_MGcxf","fi-ga":"_aPt7H","fi-gb":"_2tU39","fi-gd":"_CPs5V","fi-ge":"_09VJF","fi-gf":"_7STtr","fi-gg":"_CUbGJ","fi-gh":"_mgJbd","fi-gi":"_mxhe5","fi-gl":"_gXogr","fi-gm":"_JHzzB","fi-gn":"_XJqm4","fi-gp":"_YnrVE","fi-gq":"_J47-w","fi-gr":"_5YAwo","fi-gt":"_PWFl-","fi-gu":"_ItzVX","fi-gw":"_hiRJc","fi-gy":"_oitDt","fi-hk":"_18FzB","fi-hn":"_5ySTg","fi-hr":"_rzYuT","fi-ht":"_Pq7or","fi-hu":"_-u5Ze","fi-id":"_m8GwW","fi-ie":"_pPEAu","fi-il":"_Butse","fi-im":"_wLEYj","fi-in":"_XY7D8","fi-io":"_iKM6K","fi-iq":"_iwLoJ","fi-ir":"_L1Gd1","fi-is":"_6XPDX","fi-it":"_JXv9-","fi-je":"_Qwjxj","fi-jm":"_qzNME","fi-jo":"_JqYXz","fi-jp":"_CakOC","fi-ke":"_Czyy6","fi-kg":"_6Yydv","fi-kh":"_zhLEc","fi-ki":"_qJxPJ","fi-km":"_KDmv4","fi-kn":"_n3xy0","fi-kp":"_voM9e","fi-kr":"_sErX2","fi-kw":"_kJUFk","fi-ky":"_Ensoj","fi-kz":"_JVpyw","fi-la":"_eVzpD","fi-lb":"_f400B","fi-lc":"_vhHp5","fi-li":"_cP76d","fi-lk":"_NGSeL","fi-lr":"_yIHm7","fi-ls":"_Kj-GJ","fi-lt":"_VTK9E","fi-lu":"_N4PHA","fi-lv":"_d-ZWR","fi-ly":"_49dYi","fi-ma":"_Iqggh","fi-mc":"_QQY-Q","fi-md":"_e7v9L","fi-me":"_WqN7P","fi-mf":"_4Exh-","fi-mg":"_W-d9O","fi-mh":"_3xTQ7","fi-mk":"_O26qm","fi-ml":"_hiLpW","fi-mm":"_QGh12","fi-mn":"_KNLNH","fi-mo":"_Kdw-k","fi-mp":"_CTkAK","fi-mq":"_MzLKJ","fi-mr":"_sjQHJ","fi-ms":"_ENTOn","fi-mt":"_GoKtf","fi-mu":"_WLc98","fi-mv":"_08Tf4","fi-mw":"_MvAGM","fi-mx":"_FPDND","fi-my":"_1xoF6","fi-mz":"_ylwZy","fi-na":"_-pxPH","fi-nc":"_W-Ot-","fi-ne":"_EOA-X","fi-nf":"_W5Kl5","fi-ng":"_q76Cs","fi-ni":"_AuKsI","fi-nl":"_qLIaU","fi-no":"_xbcrX","fi-np":"_FQt4h","fi-nr":"_jJbHx","fi-nu":"_TSamx","fi-nz":"_AzsKY","fi-om":"_TUoW9","fi-pa":"_jCT-C","fi-pe":"_VMnoV","fi-pf":"_Gblvx","fi-pg":"_FLRnq","fi-ph":"_0RSGR","fi-pk":"_DfZCd","fi-pl":"_hv9I4","fi-pm":"_IDp3q","fi-pr":"_2MHj1","fi-ps":"_0FLpC","fi-pt":"_p--cH","fi-pw":"_VP-zx","fi-py":"_-Tnic","fi-qa":"_Dy7Il","fi-re":"_7N5ED","fi-ro":"_4AYwa","fi-rs":"_Y-a4O","fi-ru":"_OKa79","fi-rw":"_bBqN1","fi-sa":"_vFwuG","fi-sb":"_MMmc2","fi-sc":"_ZUM8E","fi-sd":"_9k8eB","fi-se":"_cX0c9","fi-sg":"_4-yWs","fi-sh":"_-vaPR","fi-si":"_9oJgu","fi-sj":"_J0R6u","fi-sk":"_1VxbX","fi-sl":"_RiBAA","fi-sm":"_rEaFc","fi-sn":"_PRwVO","fi-so":"_XKFdC","fi-sr":"_LtiS3","fi-ss":"_45mng","fi-st":"_OtIks","fi-sv":"_OonsM","fi-sx":"_NtzDE","fi-sy":"_Ail2H","fi-sz":"_8XRyD","fi-ta":"_GQvZn","fi-tc":"_SbD-E","fi-td":"_AnXAO","fi-tg":"_smamZ","fi-th":"_AVcL5","fi-tj":"_EqMlf","fi-tk":"_20VO7","fi-tl":"_jz9hm","fi-tm":"_kmmny","fi-tn":"_9aBQ-","fi-to":"_G63l0","fi-tr":"_6shnc","fi-tt":"_P5fq4","fi-tv":"_b7SpV","fi-tw":"_jwNjI","fi-tz":"_qtU8x","fi-ua":"_bNAHa","fi-ug":"_-G-iW","fi-us":"_xwz53","fi-uy":"_DpeX8","fi-uz":"_kSABK","fi-va":"_VOSWl","fi-vc":"_X-aU3","fi-ve":"_FiFnt","fi-vg":"_d66Ny","fi-vi":"_6kM5U","fi-vn":"_ikRJo","fi-vu":"_5XaHH","fi-wf":"_ZEJXX","fi-ws":"_IzR7c","fi-xk":"_88V52","fi-ye":"_2Dwap","fi-yt":"_kQ0fh","fi-za":"_XzYDs","fi-zm":"_mA8wn","fi-zw":"_iIsuB"};
 
@@ -13940,15 +13974,15 @@ var CountrySelector = function CountrySelector(_ref) {
     hasError = _ref.hasError,
     disabled = _ref.disabled;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$8['country-selector'], (_classNames = {}, _classNames[styles$8['country-selector--with-error']] = hasError, _classNames[styles$8['country-selector--disabled']] = disabled, _classNames))
+    className: classnames__default["default"](styles$7['country-selector'], (_classNames = {}, _classNames[styles$7['country-selector--with-error']] = hasError, _classNames[styles$7['country-selector--disabled']] = disabled, _classNames))
   }, React__default["default"].createElement(Dropdown, {
     trigger: React__default["default"].createElement("div", {
-      className: classnames__default["default"](styles$8['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$8['country-selector__trigger--with-error']] = hasError, _classNames2[styles$8['country-selector__trigger--disabled']] = disabled, _classNames2))
+      className: classnames__default["default"](styles$7['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$7['country-selector__trigger--with-error']] = hasError, _classNames2[styles$7['country-selector__trigger--disabled']] = disabled, _classNames2))
     }, React__default["default"].createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$8['country-selector__trigger-flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$7['country-selector__trigger-flag'])
     }), React__default["default"].createElement(IconChevronDown, {
       color: "grey-400",
       size: "medium"
@@ -13965,17 +13999,17 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$8['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$7['country-selector__flag'])
     }), React__default["default"].createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
 
-var _excluded$2 = ["disabledCountry"];
+var _excluded$1 = ["disabledCountry"];
 var PhoneField = function PhoneField(_ref) {
   var _classNames;
   var _ref$disabledCountry = _ref.disabledCountry,
     disabledCountry = _ref$disabledCountry === void 0 ? false : _ref$disabledCountry,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var __ = useTranslation('PhoneField');
   var inputRef = React.useRef(null);
   var _usePhoneField = usePhoneField(_extends({}, props, {
@@ -14038,7 +14072,7 @@ var PhoneField = function PhoneField(_ref) {
     }
   };
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement("div", {
-    className: styles$9['phone-field']
+    className: styles$8['phone-field']
   }, !disabledCountry && React__default["default"].createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -14049,44 +14083,16 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default["default"].createElement("span", {
-      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$9['country-selector__flag'])
+      className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$8['country-selector__flag'])
     }), React__default["default"].createElement("span", null, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.getCountryCallingCode(selectedCountry)
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     type: "tel",
-    className: classnames__default["default"](inputProps.className, styles$9['phone-field__input'], (_classNames = {}, _classNames[styles$9['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames__default["default"](inputProps.className, styles$8['phone-field__input'], (_classNames = {}, _classNames[styles$8['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$7 = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
-
-var _excluded$1 = ["children", "theme", "title", "testId"];
-var BadgeElement = function BadgeElement(_ref, forwardedRef) {
-  var _classnames;
-  var children = _ref.children,
-    theme = _ref.theme,
-    title = _ref.title,
-    testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var internalRef = React.useRef(null);
-  var ref = forwardedRef || internalRef;
-  React.useLayoutEffect(function () {
-    if (typeof ref !== 'function' && ref.current && React__default["default"].isValidElement(children) && typeof (children == null ? void 0 : children.type) !== 'string' && typeof (children == null ? void 0 : children.type) !== 'number') {
-      ref.current.style.height = ref.current.offsetWidth + 'px';
-    }
-  });
-  return React__default["default"].createElement(Tooltip, {
-    overlay: title,
-    ref: ref
-  }, React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$7['badge'], (_classnames = {}, _classnames[styles$7['badge--success']] = theme === 'success', _classnames[styles$7['badge--danger']] = theme === 'danger', _classnames[styles$7['badge--info']] = theme === 'info', _classnames[styles$7['badge--warning']] = theme === 'warning', _classnames[styles$7['badge--numeric']] = Number.isFinite(children), _classnames)),
-    ref: ref,
-    "data-testid": testId
-  }, otherProps), children));
-};
-var Badge = React.forwardRef(BadgeElement);
-
 var styles$6 = {"avatar":"_V1U8v","avatar__container":"_peAaI","avatar--small":"_9g-tn","avatar__badge":"_uViot","avatar--medium":"_vNXJW","avatar--large":"_9ZKAB","avatar--extra-large":"_uv14Y"};
 
 var styles$5 = {"avatar-image":"_iDN1j"};