@7shifts/sous-chef 3.27.0 → 3.28.0

package/dist/index.modern.js

@@ -4699,6 +4699,12 @@ var DATA_TABLE_STATES = {
   SKELETON_LOADING: 'SKELETON_LOADING',
   BACKGROUND_LOADING: 'BACKGROUND_LOADING'
 };
+var DATA_TABLE_SCROLL_STATES = {
+  NO_SCROLL: 'NO_SCROLL',
+  SCROLLABLE_CONTENT_ON_BOTH_SIDES: 'SCROLLABLE_CONTENT_ON_BOTH_SIDES',
+  SCROLLABLE_CONTENT_ON_LEFT: 'SCROLLABLE_CONTENT_ON_LEFT',
+  SCROLLABLE_CONTENT_ON_RIGHT: 'SCROLLABLE_CONTENT_ON_RIGHT'
+};
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
 var initialValue = {
@@ -6088,6 +6094,45 @@ var Card = function Card(_ref) {
   })));
 };
 
+var styles$r = {"callout-card__close":"_2qNmx","callout-card__header":"_2z7qG"};
+
+var CalloutCard = function CalloutCard(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      onClose = _ref.onClose,
+      actions = _ref.actions,
+      testId = _ref.testId;
+  return React__default.createElement(Card, {
+    testId: testId
+  }, React__default.createElement(Inline, null, React__default.createElement(Inline, {
+    alignItems: "center"
+  }, React__default.createElement(Stack, {
+    space: 12
+  }, React__default.createElement("div", {
+    className: styles$r['callout-card__header']
+  }, React__default.createElement(Text, {
+    as: "body",
+    color: "tangerine-400"
+  }, header)), React__default.createElement(Text, {
+    as: "h2"
+  }, title), React__default.createElement(Text, {
+    as: "h5"
+  }, children), React__default.createElement(Inline, {
+    space: 12
+  }, actions.primary, actions.secondary)), mediaUrl && React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title) + String(header),
+    width: "354px"
+  })), onClose && React__default.createElement("div", {
+    className: styles$r['callout-card__close']
+  }, React__default.createElement(Button$1, {
+    theme: "link-icon",
+    onClick: onClose
+  }, React__default.createElement(IconTimes, null)))));
+};
+
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children;
   return React__default.createElement(Inline, {
@@ -6096,7 +6141,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$r = {"breadcrumb-item":"_XFvYB"};
+var styles$s = {"breadcrumb-item":"_XFvYB"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -6109,24 +6154,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }), children);
   return reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$r['breadcrumb-item'],
+    className: styles$s['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$r['breadcrumb-item'],
+    className: styles$s['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$s = {"page-breadcrumbs":"_HAJCd"};
+var styles$t = {"page-breadcrumbs":"_HAJCd"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$s['page-breadcrumbs']
+    className: styles$t['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 
@@ -6151,7 +6196,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$t = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
+var styles$u = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -6174,7 +6219,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$t['page'], (_classNames = {}, _classNames[styles$t['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$t['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames(styles$u['page'], (_classNames = {}, _classNames[styles$u['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$u['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default.createElement(Stack, {
     space: 20
@@ -6200,7 +6245,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$u = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$v = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -6229,7 +6274,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$u['persistent-banner'], (_classNames = {}, _classNames[styles$u['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$u['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$u['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$v['persistent-banner'], (_classNames = {}, _classNames[styles$v['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$v['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$v['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -6301,7 +6346,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$v = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$w = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
 
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
@@ -6316,7 +6361,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$v['circular-progress'],
+    className: styles$w['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -6325,21 +6370,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$v['circular-progress__track']
+    className: styles$w['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$v['circular-progress__indicator'],
+    className: styles$w['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$v['circular-progress__label']
+    className: styles$w['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$w = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$x = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -6354,15 +6399,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$w['progress-bar'],
+    className: styles$x['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$w['progress-bar__indicator'],
+    className: styles$x['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$w['progress-bar__steps']
+    className: styles$x['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -6370,7 +6415,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$x = {"skeleton":"_3w7eX","pulse":"_28YKe","skeleton__button":"_pOgx2","skeleton__pill":"_2z4iF","skeleton__avatar":"_3FtIs","skeleton__avatar--small":"_3bCyy","skeleton__avatar--medium":"_2zQGs","skeleton__avatar--large":"_14IIB","skeleton__avatar--xlarge":"_1C4Xa"};
+var styles$y = {"skeleton":"_3w7eX","pulse":"_28YKe","skeleton__button":"_pOgx2","skeleton__pill":"_2z4iF","skeleton__avatar":"_3FtIs","skeleton__avatar--small":"_3bCyy","skeleton__avatar--medium":"_2zQGs","skeleton__avatar--large":"_14IIB","skeleton__avatar--xlarge":"_1C4Xa"};
 
 var SKELETON_COMPONENT = {
   AVATAR: 'avatar',
@@ -6396,7 +6441,7 @@ var Skeleton = function Skeleton(_ref) {
   var positioning = usePositionStyles(positionStyles);
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$x['skeleton'], (_classnames = {}, _classnames[styles$x['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$x['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$x['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$x['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$x['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$x['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$x['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
+    className: classnames(styles$y['skeleton'], (_classnames = {}, _classnames[styles$y['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$y['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$y['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$y['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$y['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames[styles$y['skeleton__button']] = as === SKELETON_COMPONENT.BUTTON, _classnames[styles$y['skeleton__pill']] = as === SKELETON_COMPONENT.PILL, _classnames)),
     style: _extends({}, positioning, {
       width: width,
       height: height
@@ -6404,15 +6449,15 @@ var Skeleton = function Skeleton(_ref) {
   });
 };
 
-var styles$y = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
+var styles$z = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
 
-var styles$z = {"actions":"_3Iab2"};
+var styles$A = {"actions":"_3Iab2"};
 
-var styles$A = {"data-table-cell":"_SpJZY","data-table-cell--no-padding":"_3R9X2","data-table-cell--vertical-border":"_6CjWl","data-table-cell--invalid":"_tvnPS","data-table-cell__content":"_2D9Do","data-table-cell__content--right-align":"_1HyJe","data-table-cell__content--with-error":"_3tEcf","data-table-cell__content--loading":"_33N-K","data-table-cell__error-icon":"_2ctV2","data-table-cell__error-icon--right-align":"_2QAov","data-table-cell__error-icon--left-align":"_AzpZE"};
+var styles$B = {"data-table-cell":"_SpJZY","data-table-cell--no-padding":"_3R9X2","data-table-cell--vertical-border":"_6CjWl","data-table-cell--invalid":"_tvnPS","data-table-cell__content":"_2D9Do","data-table-cell__content--right-align":"_1HyJe","data-table-cell__content--with-error":"_3tEcf","data-table-cell__content--loading":"_33N-K","data-table-cell__error-icon":"_2ctV2","data-table-cell__error-icon--right-align":"_2QAov","data-table-cell__error-icon--left-align":"_AzpZE"};
 
-var styles$B = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var styles$C = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-var styles$C = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
+var styles$D = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -6422,7 +6467,7 @@ var ModalHeader = function ModalHeader(_ref) {
 
   if (!header && !subHeader) {
     return onClose ? React__default.createElement("div", {
-      className: styles$C['header__close-button']
+      className: styles$D['header__close-button']
     }, React__default.createElement(Button$1, {
       theme: "link-icon",
       onClick: onClose,
@@ -6432,18 +6477,20 @@ var ModalHeader = function ModalHeader(_ref) {
 
   return React__default.createElement(Stack, {
     space: 12,
-    marginBottom: 24
+    marginBottom: 24,
+    marginLeft: 8,
+    marginRight: 8
   }, React__default.createElement(Inline, {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$C['header']
+    className: styles$D['header']
   }, header), onClose && React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose,
     disabled: loading
   }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$C['sub-header']
+    className: styles$D['sub-header']
   }, subHeader));
 };
 
@@ -6465,7 +6512,7 @@ var Modal = function Modal(_ref) {
       zIndex = _ref$zIndex === void 0 ? 'modal' : _ref$zIndex,
       rootElementId = _ref.rootElementId,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 500 : _ref$width,
+      width = _ref$width === void 0 ? 566 : _ref$width,
       height = _ref.height,
       maxWidth = _ref.maxWidth,
       _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
@@ -6493,14 +6540,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$B['overlay'],
-      afterOpen: styles$B['overlay--after-open'],
-      beforeClose: styles$B['overlay--before-close']
+      base: styles$C['overlay'],
+      afterOpen: styles$C['overlay--after-open'],
+      beforeClose: styles$C['overlay--before-close']
     },
     className: {
-      base: styles$B['content'],
-      afterOpen: styles$B['content--after-open'],
-      beforeClose: styles$B['content--before-close']
+      base: styles$C['content'],
+      afterOpen: styles$C['content--after-open'],
+      beforeClose: styles$C['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -6543,7 +6590,7 @@ var useScrollShadow = function useScrollShadow() {
   };
 };
 
-var styles$D = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
+var styles$E = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP","modal-body__inner-div":"_3NET7"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -6556,13 +6603,15 @@ var ModalBody = function ModalBody(_ref) {
       showScrollShadow = _useScrollShadow.showScrollShadow;
 
   return React__default.createElement("div", {
-    className: classnames(styles$D['modal-body'], (_classNames = {}, _classNames[styles$D['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames(styles$E['modal-body'], (_classNames = {}, _classNames[styles$E['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
-  }, children);
+  }, React__default.createElement("div", {
+    className: styles$E['modal-body__inner-div']
+  }, children));
 };
 
-var styles$E = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$F = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var updateButtonProps = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -6601,7 +6650,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$E['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$F['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -6616,7 +6665,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   var childrenItens = React__default.Children.toArray(children);
   var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
   return React__default.createElement("div", {
-    className: styles$E['modal-footer'],
+    className: styles$F['modal-footer'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: "end",
@@ -6629,7 +6678,7 @@ var dayOverridesStyles = {"root":"_80g2o","table":"_2cuMa","caption":"_1GZp_","h
 
 var weekOverridesStyles = {"root":"_2AJWd","table":"_3leOp","caption":"_2tmC5","head_cell":"_2TSWJ","day_today":"_H7oXZ","day_outside":"_3kzmn","nav_button":"_2K3wk","day_range_middle":"_1Rk3V","day_range_start":"_1LbGH","day_range_end":"_1Tc3l","row":"_2K0Y1"};
 
-var styles$F = {"calendar":"_3EOha","calendar__overlay":"_-UEzK"};
+var styles$G = {"calendar":"_3EOha","calendar__overlay":"_-UEzK"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
@@ -6823,9 +6872,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$F['calendar']
+    className: styles$G['calendar']
   }, React__default.createElement("div", {
-    className: styles$F['calendar__overlay'],
+    className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -6890,7 +6939,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$G = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$H = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -6920,7 +6969,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$G['check-box-field']
+    className: styles$H['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -6933,12 +6982,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$G['check-box-field__custom-input']
+    className: styles$H['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$G['check-box-field__caption']
+    className: styles$H['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -6971,7 +7020,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 };
 
-var styles$H = {"hint-modal":"_3hZEG","hint-modal--after-open":"_JvGIZ","hint-modal--before-close":"_2D_ak","hint-modal__overlay":"_1lmCk","hint-modal__image":"_A6js8","hint-modal__body":"_24heZ","hint-modal__close-button":"_5M3XV"};
+var styles$I = {"hint-modal":"_3hZEG","hint-modal--after-open":"_JvGIZ","hint-modal--before-close":"_2D_ak","hint-modal__overlay":"_1lmCk","hint-modal__image":"_A6js8","hint-modal__body":"_24heZ","hint-modal__close-button":"_5M3XV"};
 
 var _excluded$2p = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "testId"];
 
@@ -7025,22 +7074,22 @@ var HintModal = function HintModal(_ref) {
     closeTimeoutMS: 200,
     contentLabel: "Modal",
     className: {
-      base: styles$H['hint-modal'],
-      afterOpen: styles$H['hint-modal--after-open'],
-      beforeClose: styles$H['hint-modal--before-close']
+      base: styles$I['hint-modal'],
+      afterOpen: styles$I['hint-modal--after-open'],
+      beforeClose: styles$I['hint-modal--before-close']
     },
-    overlayClassName: styles$H['hint-modal__overlay']
+    overlayClassName: styles$I['hint-modal__overlay']
   }, React__default.createElement("div", {
-    className: styles$H['hint-modal__close-button']
+    className: styles$I['hint-modal__close-button']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: handleOnClose
   }, React__default.createElement(IconTimes, null))), mediaUrl && React__default.createElement("img", {
-    className: styles$H['hint-modal__image'],
+    className: styles$I['hint-modal__image'],
     src: mediaUrl,
     alt: String(header)
   }), React__default.createElement("div", {
-    className: styles$H['hint-modal__body']
+    className: styles$I['hint-modal__body']
   }, React__default.createElement(Stack, {
     justifyContent: "space-between"
   }, React__default.createElement(Stack, {
@@ -7087,17 +7136,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$A['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$A['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$A['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+    className: classnames(styles$B['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$B['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$B['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default.createElement(IconTimesOctagon, {
     size: "medium",
     color: "radish-400"
   }));
   var TableCell = React__default.createElement("td", {
-    className: classnames((_classnames2 = {}, _classnames2[styles$A['data-table-cell--invalid']] = hasError, _classnames2[styles$A['data-table-cell--no-padding']] = noPadding, _classnames2[styles$A['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$A['data-table-cell']),
+    className: classnames((_classnames2 = {}, _classnames2[styles$B['data-table-cell--invalid']] = hasError, _classnames2[styles$B['data-table-cell--no-padding']] = noPadding, _classnames2[styles$B['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$B['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default.createElement("div", {
-    className: classnames(styles$A['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$A['data-table-cell__content--with-error']] = hasError, _classnames3[styles$A['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$A['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
+    className: classnames(styles$B['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$B['data-table-cell__content--with-error']] = hasError, _classnames3[styles$B['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$B['data-table-cell__content--loading']] = state === DATA_TABLE_STATES.BACKGROUND_LOADING, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default.createElement(Tooltip$1, {
     overlay: errorMessage,
@@ -7125,7 +7174,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default.createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default.createElement("div", {
-    className: styles$z['actions'],
+    className: styles$A['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, state === 'SKELETON_LOADING' && React__default.createElement(Skeleton, {
     width: 45
@@ -7140,7 +7189,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-var styles$I = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
+var styles$J = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
 
 var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
   var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
@@ -7189,7 +7238,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$I['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$I['data-table-editable-cell']),
+    className: classnames((_classnames = {}, _classnames[styles$J['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$J['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
@@ -7198,7 +7247,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$I['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$I['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$I['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$I['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$I['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$I['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames((_classnames2 = {}, _classnames2[styles$J['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$J['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$J['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$J['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$J['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$J['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": testId && testId + "-text-field",
@@ -7243,7 +7292,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _useDataTableContext = useDataTableContext(),
       showActionMenu = _useDataTableContext.showActionMenu;
 
-  var styleNames = classnames(styles$y['item'], (_classnames = {}, _classnames[styles$y['clickable']] = onClick, _classnames[styles$y['selected']] = isSelected, _classnames));
+  var styleNames = classnames(styles$z['item'], (_classnames = {}, _classnames[styles$z['clickable']] = onClick, _classnames[styles$z['selected']] = isSelected, _classnames));
 
   var renderColumn = function renderColumn(columnElement, index) {
     var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableCell;
@@ -7331,6 +7380,145 @@ var getDataTableState = function getDataTableState(isLoading, amountOfItems) {
 
   return DATA_TABLE_STATES.BACKGROUND_LOADING;
 };
+var calculateScrollState = function calculateScrollState(scrollContainer) {
+  var hasScrollableContentOnLeft = scrollContainer.scrollLeft > 0;
+  var hasScrollableContentOnRight = scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth;
+
+  if (hasScrollableContentOnLeft && hasScrollableContentOnRight) {
+    return DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_BOTH_SIDES;
+  }
+
+  if (hasScrollableContentOnLeft) {
+    return DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_LEFT;
+  }
+
+  if (hasScrollableContentOnRight) {
+    return DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_RIGHT;
+  }
+
+  return DATA_TABLE_SCROLL_STATES.NO_SCROLL;
+};
+
+var styles$K = {"data-table-sticky-columns-container":"_25lPo","data-table-sticky-columns-container--with-left-sticky-columns-and-shadow":"_2S3Jq","data-table-sticky-columns-container--no-shadow":"_RfN1H","fadein":"_3FIb5","data-table-sticky-columns-container--with-left-sticky-columns":"_1Jszb","data-table-sticky-columns-container--with-right-sticky-columns-and-shadow":"_Zq6VQ","data-table-sticky-columns-container--with-right-sticky-columns":"_2riDu","data-table-sticky-columns-container--with-footer":"_1735l"};
+
+var useDataTableScrollState = function useDataTableScrollState(stickyColumns) {
+  var scrollContainerRef = useRef(null);
+
+  var _useState = useState(DATA_TABLE_SCROLL_STATES.NO_SCROLL),
+      scrollState = _useState[0],
+      setScrollState = _useState[1];
+
+  var onScroll = function onScroll() {
+    if (!stickyColumns) {
+      return;
+    }
+
+    if (!scrollContainerRef.current) {
+      return;
+    }
+
+    var newScrollState = calculateScrollState(scrollContainerRef.current);
+
+    if (newScrollState !== scrollState) {
+      setScrollState(newScrollState);
+    }
+  };
+
+  useLayoutEffect(function () {
+    onScroll();
+  }, []);
+  var hasScrollOnLeft = scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_LEFT || scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_BOTH_SIDES;
+  var hasScrollOnRight = scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_RIGHT || scrollState === DATA_TABLE_SCROLL_STATES.SCROLLABLE_CONTENT_ON_BOTH_SIDES;
+  var hasRightColumnSticky = stickyColumns === 'right' || stickyColumns === 'both';
+  var hasLeftColumnSticky = stickyColumns === 'left' || stickyColumns === 'both';
+  var showCoverShadowOnRight = stickyColumns === 'left' && hasScrollOnRight;
+  var showCoverShadowOnLeft = stickyColumns === 'right' && hasScrollOnLeft;
+  return {
+    scrollState: scrollState,
+    onScroll: onScroll,
+    scrollContainerRef: scrollContainerRef,
+    hasScrollOnLeft: hasScrollOnLeft,
+    hasScrollOnRight: hasScrollOnRight,
+    hasRightColumnSticky: hasRightColumnSticky,
+    hasLeftColumnSticky: hasLeftColumnSticky,
+    showCoverShadowOnRight: showCoverShadowOnRight,
+    showCoverShadowOnLeft: showCoverShadowOnLeft
+  };
+};
+
+var styles$L = {"data-table-cover-shadow":"_3S_6c","data-table-cover-shadow--no-columns":"_3Z4CV","data-table-cover-shadow--left":"_2Ww7z","fadeinshadowleft":"_22OAU","data-table-cover-shadow--right":"_3UwN8","fadeinshadowright":"_2i_F1"};
+
+var DataTableCoverShadow = function DataTableCoverShadow(_ref) {
+  var _classNames;
+
+  var showShadowOnLeft = _ref.showShadowOnLeft,
+      showShadowOnRight = _ref.showShadowOnRight,
+      isShowingColumns = _ref.isShowingColumns;
+  return React__default.createElement("div", {
+    className: classnames(styles$L['data-table-cover-shadow'], (_classNames = {}, _classNames[styles$L['data-table-cover-shadow--left']] = showShadowOnLeft, _classNames[styles$L['data-table-cover-shadow--right']] = showShadowOnRight, _classNames[styles$L['data-table-cover-shadow--no-columns']] = !isShowingColumns, _classNames))
+  });
+};
+
+var getBrowserVersion = function getBrowserVersion() {
+  var userAgent = navigator.userAgent;
+  var temporaryMatches;
+  var browserMatches = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+  if (/trident/i.test(browserMatches[1])) {
+    temporaryMatches = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
+    return 'IE ' + (temporaryMatches[1] || '');
+  }
+
+  if (browserMatches[1] === 'Chrome') {
+    temporaryMatches = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
+    if (temporaryMatches != null) return temporaryMatches.slice(1).join(' ').replace('OPR', 'Opera');
+  }
+
+  browserMatches = browserMatches[2] ? [browserMatches[1], browserMatches[2]] : [navigator.appName, navigator.appVersion, '-?'];
+  if ((temporaryMatches = userAgent.match(/version\/(\d+)/i)) != null) browserMatches.splice(1, 1, temporaryMatches[1]);
+  return browserMatches.join(' ');
+};
+
+var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_ref) {
+  var _classNames;
+
+  var children = _ref.children,
+      stickyColumns = _ref.stickyColumns,
+      isShowingColumns = _ref.isShowingColumns,
+      isShowingFooter = _ref.isShowingFooter;
+
+  var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
+      scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
+      onScroll = _useDataTableScrollSt.onScroll,
+      hasScrollOnLeft = _useDataTableScrollSt.hasScrollOnLeft,
+      hasScrollOnRight = _useDataTableScrollSt.hasScrollOnRight,
+      hasRightColumnSticky = _useDataTableScrollSt.hasRightColumnSticky,
+      hasLeftColumnSticky = _useDataTableScrollSt.hasLeftColumnSticky,
+      showCoverShadowOnRight = _useDataTableScrollSt.showCoverShadowOnRight,
+      showCoverShadowOnLeft = _useDataTableScrollSt.showCoverShadowOnLeft;
+
+  var _useState = useState(function () {
+    return getBrowserVersion();
+  }),
+      browserVersion = _useState[0];
+
+  if (!stickyColumns) {
+    return React__default.createElement(Fragment, null, children);
+  }
+
+  var noShadow = browserVersion.includes('Safari');
+  var containerClassName = 'data-table-sticky-columns-container';
+  return React__default.createElement(Fragment, null, (showCoverShadowOnRight || showCoverShadowOnLeft) && React__default.createElement(DataTableCoverShadow, {
+    showShadowOnLeft: hasScrollOnLeft && stickyColumns === 'right',
+    showShadowOnRight: hasScrollOnRight && stickyColumns === 'left',
+    isShowingColumns: !!isShowingColumns
+  }), React__default.createElement("div", {
+    className: classnames(styles$K[containerClassName], (_classNames = {}, _classNames[styles$K[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$K[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$K[containerClassName + "--with-left-sticky-columns-and-shadow"]] = hasLeftColumnSticky && hasScrollOnLeft, _classNames[styles$K[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$K[containerClassName + "--with-right-sticky-columns-and-shadow"]] = hasRightColumnSticky && hasScrollOnRight, _classNames[styles$K[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+    onScroll: onScroll,
+    ref: scrollContainerRef,
+    "data-testid": "sticky-columns-container"
+  }, children));
+};
 
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -7354,7 +7542,8 @@ var DataTable = function DataTable(_ref) {
       _ref$hasVerticalBorde = _ref.hasVerticalBorders,
       hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
       testId = _ref.testId,
-      skeletonRowLayout = _ref.skeletonRowLayout;
+      skeletonRowLayout = _ref.skeletonRowLayout,
+      stickyColumns = _ref.stickyColumns;
   var prevItemsRef = useRef([]);
   var prevPaginationRef = useRef(false);
   var RowItem = itemComponent || DataTableDefaultItemComponent;
@@ -7429,6 +7618,10 @@ var DataTable = function DataTable(_ref) {
   }, React__default.createElement("div", {
     className: classnames(styles$b['data-table']),
     ref: tableRef
+  }, React__default.createElement(DataTableStickyColumnsContainer, {
+    stickyColumns: stickyColumns,
+    isShowingColumns: !!isShowingColumns,
+    isShowingFooter: !!isShowingFooter
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top"
   }), React__default.createElement("div", {
@@ -7460,7 +7653,7 @@ var DataTable = function DataTable(_ref) {
   }))), isShowingFooter && React__default.createElement("tfoot", {
     className: styles$b['data-table__footer'],
     "data-testid": testId && testId + "-footer"
-  }, footerComponent))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
+  }, footerComponent)))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "bottom"
   })), React__default.createElement(Pagination, null));
 };
@@ -7560,7 +7753,7 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
-var styles$J = {"custom-control":"_1cDCR"};
+var styles$M = {"custom-control":"_1cDCR"};
 
 var _excluded$2r = ["children"];
 
@@ -7573,7 +7766,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$J['custom-control'],
+    className: styles$M['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -7743,7 +7936,7 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$K = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+var styles$N = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 
 var _excluded$2t = ["children"];
 
@@ -7813,15 +8006,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$K['custom-menu-hr']
+    className: styles$N['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$K['custom-menu-div']
+    className: styles$N['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(styles$k['text-field'], styles$K['custom-menu-text-field']),
+    className: classnames(styles$k['text-field'], styles$N['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -8004,9 +8197,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$L = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+var styles$O = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
 
-var styles$M = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
+var styles$P = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -8066,7 +8259,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
       weekStart = _ref.weekStart,
       onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$M['date-filter-display'], (_classnames = {}, _classnames[styles$M['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$M['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$P['date-filter-display'], (_classnames = {}, _classnames[styles$P['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$P['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
     ref: ref
@@ -8074,7 +8267,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$M['date-filter-display__display-icon'])
+    className: classnames(styles$P['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: "grey-400"
@@ -8085,7 +8278,7 @@ var DateFilterDisplay = forwardRef(function (_ref, ref) {
   })));
 });
 
-var styles$N = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
+var styles$Q = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -8120,7 +8313,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
       onChange = _ref.onChange,
       date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$N['date-stepper'], (_classnames = {}, _classnames[styles$N['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$N['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(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)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -8150,7 +8343,7 @@ var DateFilter = function DateFilter(_ref) {
 
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$L['date-filter'], (_classnames = {}, _classnames[styles$L['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$O['date-filter'], (_classnames = {}, _classnames[styles$O['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -8192,7 +8385,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$O = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var styles$R = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -8209,7 +8402,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$O['segmented-control'],
+    className: styles$R['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -8220,16 +8413,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$O['segmented-control__button'], (_classnames = {}, _classnames[styles$O['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$R['segmented-control__button'], (_classnames = {}, _classnames[styles$R['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$O['segmented-control__divider'])
+      className: classnames(styles$R['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$P = {"form--standard-size":"_3CaV0"};
+var styles$S = {"form--standard-size":"_3CaV0"};
 
-var styles$Q = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var styles$T = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -8241,14 +8434,14 @@ var FormSection = function FormSection(_ref) {
       noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: classnames(styles$Q['form-section'], (_classnames = {}, _classnames[styles$Q['form-section--no-margin']] = noMargin, _classnames)),
+    className: classnames(styles$T['form-section'], (_classnames = {}, _classnames[styles$T['form-section--no-margin']] = noMargin, _classnames)),
     "data-testid": testId
   }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$Q['form-section__title'])
+    className: classnames(styles$T['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$Q['form-section__subtitle'])
+    className: classnames(styles$T['form-section__subtitle'])
   }, subtitle)), children));
 };
 
@@ -8266,7 +8459,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$R = {"form-footer":"_3vVBF"};
+var styles$U = {"form-footer":"_3vVBF"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$primary2, _actions$secondary, _actions$tertiary;
@@ -8302,7 +8495,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$R['form-footer']),
+    className: classnames(styles$U['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -8344,12 +8537,12 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$P['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$S['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$S = {"form-row":"_2i-Ll"};
+var styles$V = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -8380,7 +8573,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$S['form-row']
+    extraClass: styles$V['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -8389,7 +8582,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$T = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$W = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
@@ -8467,7 +8660,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$T['text-field'], (_classnames = {}, _classnames[styles$T['text-field--invalid']] = hasError, _classnames[styles$T['text-field--disabled']] = disabled, _classnames[styles$T['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$W['text-field'], (_classnames = {}, _classnames[styles$W['text-field--invalid']] = hasError, _classnames[styles$W['text-field--disabled']] = disabled, _classnames[styles$W['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -8501,7 +8694,7 @@ var TextAreaField = function TextAreaField(_ref) {
     ref: textAreaRef,
     maxLength: maxLength
   }), toolbar && React__default.createElement("div", {
-    className: styles$T['text-field__toolbar'],
+    className: styles$W['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -8535,7 +8728,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 
 var TextField = forwardRef(TextFieldElement);
 
-var styles$U = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$X = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -8627,7 +8820,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$U['pill-select-field']
+      className: styles$X['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -8649,7 +8842,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$U['pill-select-field__custom-input']
+      className: styles$X['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -8697,9 +8890,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$V = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$Y = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var styles$W = {"label":"_1Tw96","label--truncate":"_1o8rK","caption":"_3LIBo","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__box--disabled":"_BoPCr","radio-group-box-option__label":"_1r-Wg","radio-group-box-option__label--disabled":"_3N9Vg","radio-group-box-option__caption":"_2083y","radio-group-box-option__caption--disabled":"_14Zxw"};
+var styles$Z = {"label":"_1Tw96","label--truncate":"_1o8rK","caption":"_3LIBo","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__box--disabled":"_BoPCr","radio-group-box-option__label":"_1r-Wg","radio-group-box-option__label--disabled":"_3N9Vg","radio-group-box-option__caption":"_2083y","radio-group-box-option__caption--disabled":"_14Zxw"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var _classNames, _classNames2, _classNames3;
@@ -8717,7 +8910,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$W['radio-group-box-option']
+    className: styles$Z['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -8728,7 +8921,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("div", {
-    className: classnames(styles$W['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$W['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
+    className: classnames(styles$Z['radio-group-box-option__box'], (_classNames = {}, _classNames[styles$Z['radio-group-box-option__box--disabled']] = radioGroupContext.disabled || disabled, _classNames))
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -8737,13 +8930,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: classnames(styles$W['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$W['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
+    className: classnames(styles$Z['radio-group-box-option__label'], (_classNames2 = {}, _classNames2[styles$Z['radio-group-box-option__label--disabled']] = radioGroupContext.disabled || disabled, _classNames2))
   }, label), caption && React__default.createElement("div", {
-    className: classnames(styles$W['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$W['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
+    className: classnames(styles$Z['radio-group-box-option__caption'], (_classNames3 = {}, _classNames3[styles$Z['radio-group-box-option__caption--disabled']] = radioGroupContext.disabled || disabled, _classNames3))
   }, caption)))));
 };
 
-var styles$X = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$_ = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -8763,7 +8956,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$X['radio-group-option']
+    className: styles$_['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -8774,11 +8967,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled || disabled
   }), React__default.createElement("span", {
-    className: styles$X['radio-group-option__custom-input']
+    className: styles$_['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$X['radio-group-option__caption']
+    className: styles$_['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -8913,7 +9106,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$V['radio-group-field__label']
+    className: styles$Y['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -8926,9 +9119,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$Y = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$$ = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$Z = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$10 = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -8936,7 +9129,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$Z['password-criteria'], (_classnames = {}, _classnames[styles$Z['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$10['password-criteria'], (_classnames = {}, _classnames[styles$10['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -9021,11 +9214,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$Y['password-container']
+    className: styles$$['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$Y['text-field'], (_classnames = {}, _classnames[styles$Y['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$$['text-field'], (_classnames = {}, _classnames[styles$$['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -9037,7 +9230,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$Y['password-toggle'],
+    className: styles$$['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -9070,7 +9263,18 @@ var MultiSelectField = function MultiSelectField(_ref) {
       menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll,
       testId = _ref.testId,
       _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable;
+      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
+      creatableButton = _ref.creatableButton,
+      onCreate = _ref.onCreate;
+
+  var _useState = useState(false),
+      isMenuInputFocus = _useState[0],
+      setIsMenuInputFocus = _useState[1];
+
+  var onMenuInputFocus = function onMenuInputFocus(isFocused) {
+    return setIsMenuInputFocus(isFocused);
+  };
+
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -9108,11 +9312,15 @@ var MultiSelectField = function MultiSelectField(_ref) {
     closeMenuOnSelect: closeOnSelect,
     componentsProps: {
       testId: testId,
-      UserCustomOption: UserCustomOption
+      UserCustomOption: UserCustomOption,
+      creatableButton: creatableButton,
+      onMenuInputFocus: onMenuInputFocus,
+      onCreate: onCreate
     },
     components: {
       SelectContainer: CustomContainer,
-      Option: UserCustomOption ? CustomOption : components.Option
+      Option: UserCustomOption ? CustomOption : components.Option,
+      Menu: onCreate ? CustomMenu : components.Menu
     },
     menuShouldScrollIntoView: menuShouldScrollIntoView,
     menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
@@ -9124,11 +9332,12 @@ var MultiSelectField = function MultiSelectField(_ref) {
 
       return !isScrollingTheSelectMenu(e.target);
     },
-    isSearchable: isSearchable
+    isSearchable: isSearchable,
+    menuIsOpen: isMenuInputFocus || undefined
   }));
 };
 
-var styles$_ = {"custom-list":"_uC4zU"};
+var styles$11 = {"custom-list":"_uC4zU"};
 
 var _excluded$2v = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -9147,7 +9356,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$_['custom-list']
+    className: styles$11['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
@@ -9498,7 +9707,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$$ = {"text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$12 = {"text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var calendarStyles = {"root":"_1TdXJ","table":"_1Jwhx","caption":"_E1HCI","head_cell":"_2qc6P","day_today":"_24aIE","day_outside":"_2t43r","nav_button":"_Rw5Pr","day_range_middle":"_EZ8v8","day_range_start":"_1wR4W","day_range_end":"_1Z8lJ"};
 
@@ -9556,9 +9765,9 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   };
   var datePickerProps = mode === 'start-date' ? startDateProps : endDateProps;
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$F['calendar']
+    className: styles$G['calendar']
   }, React__default.createElement("div", {
-    className: styles$F['calendar__overlay'],
+    className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
       return setCalendarRef(_ref2);
     },
@@ -9773,7 +9982,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$$['date-range-field'], (_classnames = {}, _classnames[styles$$['date-range-field--invalid']] = hasError, _classnames[styles$$['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$12['date-range-field'], (_classnames = {}, _classnames[styles$12['date-range-field--invalid']] = hasError, _classnames[styles$12['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -10117,7 +10326,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = forwardRef(TimeFieldElement);
 
-var styles$10 = {"text-field":"_1EJlZ","time-range-field":"_20_Q3","text-field--invalid":"_3vaZG","text-field--prefixed":"_2dh_z","text-field--suffixed":"_2iyg-","time-range-field--invalid":"_22G5J","time-range-field--disabled":"_1bvhh"};
+var styles$13 = {"text-field":"_1EJlZ","time-range-field":"_20_Q3","text-field--invalid":"_3vaZG","text-field--prefixed":"_2dh_z","text-field--suffixed":"_2iyg-","time-range-field--invalid":"_22G5J","time-range-field--disabled":"_1bvhh"};
 
 var TimeRangeEnd = function TimeRangeEnd(_ref) {
   var startTime = _ref.startTime,
@@ -10223,7 +10432,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
 
   var timeRangeDuration = getDuration(end, start);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$10['time-range-field'], (_classnames = {}, _classnames[styles$10['time-range-field--invalid']] = hasError, _classnames[styles$10['time-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$13['time-range-field'], (_classnames = {}, _classnames[styles$13['time-range-field--invalid']] = hasError, _classnames[styles$13['time-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(TimeRangeStart, {
     startTime: startTime,
@@ -10402,7 +10611,7 @@ var FormFeedback = function FormFeedback(_ref) {
   }, children);
 };
 
-var styles$11 = {"phone-field":"_3_9IU","phone-field__input--with-square-borders":"_2f6xJ","phone-field__flag":"_3Ncfq"};
+var styles$14 = {"phone-field":"_3_9IU","phone-field__input--with-square-borders":"_2f6xJ","phone-field__flag":"_3Ncfq"};
 
 var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
   var name = _ref.name,
@@ -11274,7 +11483,7 @@ var COUNTRIES = {
 };
 var COUNTRY_CODES = Object.keys(COUNTRIES);
 
-var styles$12 = {"country-selector":"_gcJSN","country-selector--with-error":"_2JsVM","country-selector__trigger":"_1BzM4","country-selector--disabled":"_1r-ET","country-selector__trigger--with-error":"_1Qo_N","country-selector__trigger--disabled":"_1JKhS","country-selector__trigger-flag":"_28mPX","country-selector__flag":"_eDPiU"};
+var styles$15 = {"country-selector":"_gcJSN","country-selector--with-error":"_2JsVM","country-selector__trigger":"_1BzM4","country-selector--disabled":"_1r-ET","country-selector__trigger--with-error":"_1Qo_N","country-selector__trigger--disabled":"_1JKhS","country-selector__trigger-flag":"_28mPX","country-selector__flag":"_eDPiU"};
 
 var flagIcons = {"fi":"_1YYli","fis":"_609Qc","fi-ac":"_bXDPE","fi-ad":"_glAoC","fi-ae":"_36hXF","fi-af":"_mJomW","fi-ag":"_4JgKU","fi-ai":"_q3puY","fi-al":"_OBfHV","fi-am":"_3VH9g","fi-ao":"_2h_BL","fi-ar":"__Yjvt","fi-as":"_raS66","fi-at":"_33upz","fi-au":"_1eSNe","fi-aw":"_3iZdb","fi-ax":"_3KHTT","fi-az":"_12obK","fi-ba":"_36wku","fi-bb":"_tpikD","fi-bd":"_3xteV","fi-be":"_2ZUUJ","fi-bf":"_3AaY1","fi-bg":"_3yhXw","fi-bh":"_NzGUO","fi-bi":"_v7rd1","fi-bj":"_3WVBu","fi-bl":"_3RFyT","fi-bm":"_2VrpL","fi-bn":"_1n9uB","fi-bo":"_2SO3z","fi-bq":"_2hagZ","fi-br":"_DMhf8","fi-bs":"_cfElj","fi-bt":"_2SvOJ","fi-bw":"_1ouU2","fi-by":"_2wLVV","fi-bz":"_1oCc1","fi-ca":"_3SFX7","fi-cc":"_2CSl2","fi-cd":"_2W-OZ","fi-cf":"_2TC6u","fi-cg":"_3ffuy","fi-ch":"_2Y-TM","fi-ci":"_9nlrW","fi-ck":"_2JSXc","fi-cl":"_Amx6V","fi-cm":"_2cXdG","fi-cn":"_1bKpb","fi-co":"_8kMJz","fi-cr":"_1vEEE","fi-cu":"_38WP0","fi-cv":"_2sb8Q","fi-cw":"_UagjE","fi-cx":"_3Jq1n","fi-cy":"_2TimC","fi-cz":"_2FR9w","fi-de":"_2eMG-","fi-dj":"_Bgbaq","fi-dk":"_3t-Ct","fi-dm":"_36Bw1","fi-do":"_3zlxA","fi-dz":"_1iuTa","fi-ec":"_2E1g0","fi-ee":"_2kCyp","fi-eg":"_38L97","fi-eh":"_3kvyg","fi-er":"_1-h22","fi-es":"_3BaK9","fi-et":"_3BN2J","fi-fi":"_H_So4","fi-fj":"_3sfC1","fi-fk":"_1SlXb","fi-fm":"_zxoR5","fi-fo":"_159KW","fi-fr":"_1EEuG","fi-ga":"_GiNrc","fi-gb":"_1fJm1","fi-gd":"_noXXr","fi-ge":"_3D-l2","fi-gf":"_F8_Rn","fi-gg":"_1_Imm","fi-gh":"_1_7Sb","fi-gi":"_2aYMh","fi-gl":"_2REfJ","fi-gm":"_2nElw","fi-gn":"_DfGrv","fi-gp":"_3vs-D","fi-gq":"_PEiOF","fi-gr":"_2YJIQ","fi-gt":"_1ChZE","fi-gu":"_2n4hK","fi-gw":"_1eZnt","fi-gy":"_2vx0N","fi-hk":"_3O9xd","fi-hn":"_2g391","fi-hr":"_w7zA_","fi-ht":"_3V_RQ","fi-hu":"_3Amvg","fi-id":"_1kO4z","fi-ie":"_3aXGX","fi-il":"_2-bP4","fi-im":"_2PUz4","fi-in":"_IaDYG","fi-io":"_3aGDi","fi-iq":"_uEwvt","fi-ir":"_2ota8","fi-is":"_MJ0cB","fi-it":"_22MKM","fi-je":"_2Bac5","fi-jm":"_2kMhj","fi-jo":"_3PAL8","fi-jp":"_1oTw6","fi-ke":"_1osD4","fi-kg":"_262re","fi-kh":"_2R_8Q","fi-ki":"_1ludn","fi-km":"_2KBBJ","fi-kn":"_2QWu7","fi-kp":"_2wEmR","fi-kr":"_3Vy3G","fi-kw":"_1zjOI","fi-ky":"_31LmO","fi-kz":"_3-Jmy","fi-la":"_3eP_k","fi-lb":"_8lqcq","fi-lc":"_3TVmu","fi-li":"_3rRK0","fi-lk":"_3HtAl","fi-lr":"_-4gYu","fi-ls":"_3EF0r","fi-lt":"_2Qszd","fi-lu":"_10Bou","fi-lv":"_gHYmY","fi-ly":"_2VJ1N","fi-ma":"_30VWO","fi-mc":"_7TCut","fi-md":"_o57Dy","fi-me":"_2isLQ","fi-mf":"_SLBgf","fi-mg":"_j5vKM","fi-mh":"_2NbcY","fi-mk":"_BGdKK","fi-ml":"_1bLA8","fi-mm":"_2KLt1","fi-mn":"_2gPtp","fi-mo":"_1kI8P","fi-mp":"_6NvM3","fi-mq":"_2AXVj","fi-mr":"_32aSH","fi-ms":"_2Yc6L","fi-mt":"_2KFxL","fi-mu":"_1aa0X","fi-mv":"_21h6j","fi-mw":"_2tS-e","fi-mx":"_q12B9","fi-my":"_2sLLl","fi-mz":"_3xDbK","fi-na":"_2hOmq","fi-nc":"_1IkVW","fi-ne":"_G52_8","fi-nf":"_1Ouhy","fi-ng":"_2WYCZ","fi-ni":"_Czqop","fi-nl":"_3fCKx","fi-no":"_1wQMZ","fi-np":"_1z12M","fi-nr":"_37Qnl","fi-nu":"_2vqE2","fi-nz":"_3UTci","fi-om":"_39HBm","fi-pa":"_1bfaE","fi-pe":"_1HG_h","fi-pf":"_3eHD-","fi-pg":"_12o7S","fi-ph":"_1lHL2","fi-pk":"_2QuA8","fi-pl":"_2_Ypo","fi-pm":"_3ngIl","fi-pr":"_2zNmC","fi-ps":"_mKTi1","fi-pt":"_36QJg","fi-pw":"_r1A7i","fi-py":"_2kzrw","fi-qa":"_1SPl8","fi-re":"_3xbiF","fi-ro":"_KPK1Q","fi-rs":"_2HsGH","fi-ru":"_1w34a","fi-rw":"_Zsl7k","fi-sa":"_Oh6dK","fi-sb":"_CQSlN","fi-sc":"_11vp6","fi-sd":"_LSrh0","fi-se":"_3Cwy9","fi-sg":"_1WT1o","fi-sh":"_1Es_o","fi-si":"_F8nFC","fi-sj":"_2zTDT","fi-sk":"_38MVZ","fi-sl":"_2DzKy","fi-sm":"_3XPhf","fi-sn":"_IvWgd","fi-so":"_iuuWf","fi-sr":"_2wswa","fi-ss":"_k-X9y","fi-st":"_1NLxw","fi-sv":"_2OVED","fi-sx":"_105st","fi-sy":"_24J0I","fi-sz":"_Zk-LQ","fi-ta":"_3M5Om","fi-tc":"_2yeoi","fi-td":"_1sQDI","fi-tg":"_ppF_i","fi-th":"_2b6WF","fi-tj":"_1-X7L","fi-tk":"_1MmHE","fi-tl":"_MUL-g","fi-tm":"_2ADYf","fi-tn":"_1WWpy","fi-to":"_2ZjxT","fi-tr":"_iox4C","fi-tt":"_2THSE","fi-tv":"_1_b_F","fi-tw":"_3EbKc","fi-tz":"_2oCdU","fi-ua":"_cKH10","fi-ug":"_bsKoD","fi-us":"_38RVE","fi-uy":"_3CMCD","fi-uz":"_ZyQq_","fi-va":"_2G4u0","fi-vc":"_3kQoa","fi-ve":"_pxUTp","fi-vg":"_2cfE_","fi-vi":"_3Sv2e","fi-vn":"_2uMK6","fi-vu":"_1NJWA","fi-wf":"_2Dwsg","fi-ws":"_2zXLB","fi-xk":"_JdpzM","fi-ye":"_1Q9vX","fi-yt":"_1mb2U","fi-za":"_1YFY6","fi-zm":"_1LDHZ","fi-zw":"_zXsKE"};
 
@@ -11286,15 +11495,15 @@ var CountrySelector = function CountrySelector(_ref) {
       hasError = _ref.hasError,
       disabled = _ref.disabled;
   return React__default.createElement("div", {
-    className: classnames(styles$12['country-selector'], (_classNames = {}, _classNames[styles$12['country-selector--with-error']] = hasError, _classNames[styles$12['country-selector--disabled']] = disabled, _classNames))
+    className: classnames(styles$15['country-selector'], (_classNames = {}, _classNames[styles$15['country-selector--with-error']] = hasError, _classNames[styles$15['country-selector--disabled']] = disabled, _classNames))
   }, React__default.createElement(Dropdown, {
     trigger: React__default.createElement("div", {
-      className: classnames(styles$12['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$12['country-selector__trigger--with-error']] = hasError, _classNames2[styles$12['country-selector__trigger--disabled']] = disabled, _classNames2))
+      className: classnames(styles$15['country-selector__trigger'], (_classNames2 = {}, _classNames2[styles$15['country-selector__trigger--with-error']] = hasError, _classNames2[styles$15['country-selector__trigger--disabled']] = disabled, _classNames2))
     }, React__default.createElement(Inline, {
       space: 8,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$12['country-selector__trigger-flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$15['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
       color: "grey-400",
       size: "medium"
@@ -11311,7 +11520,7 @@ var CountrySelector = function CountrySelector(_ref) {
       alignItems: "center",
       space: 12
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$12['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + countryCode.toLocaleLowerCase()], styles$15['country-selector__flag'])
     }), React__default.createElement(Text, null, COUNTRIES[countryCode].countryName)));
   }))));
 };
@@ -11397,7 +11606,7 @@ var PhoneField = function PhoneField(_ref) {
     }
   }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$11['phone-field']
+    className: styles$14['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
     country: selectedCountry,
     onChange: handleCountryChange,
@@ -11408,17 +11617,17 @@ var PhoneField = function PhoneField(_ref) {
       space: 4,
       alignItems: "center"
     }, React__default.createElement("span", {
-      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$11['country-selector__flag'])
+      className: classnames(flagIcons['fi'], flagIcons["fi-" + selectedCountry.toLocaleLowerCase()], styles$14['country-selector__flag'])
     }), React__default.createElement("span", null, "+", getCountryCallingCode(selectedCountry))) : "+" + getCountryCallingCode(selectedCountry)
   }, React__default.createElement("input", Object.assign({}, inputProps, {
     type: "tel",
-    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$11['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
+    className: classnames(inputProps.className, (_classNames = {}, _classNames[styles$14['phone-field__input--with-square-borders']] = !disabledCountry, _classNames)),
     onChange: handlePhoneChange,
     onBlur: handlePhoneBlur
   })))));
 };
 
-var styles$13 = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$16 = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$2B = ["children", "theme", "title", "testId"];
 
@@ -11442,7 +11651,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$13['badge'], (_classnames = {}, _classnames[styles$13['badge--success']] = theme === 'success', _classnames[styles$13['badge--danger']] = theme === 'danger', _classnames[styles$13['badge--info']] = theme === 'info', _classnames[styles$13['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$16['badge'], (_classnames = {}, _classnames[styles$16['badge--success']] = theme === 'success', _classnames[styles$16['badge--danger']] = theme === 'danger', _classnames[styles$16['badge--info']] = theme === 'info', _classnames[styles$16['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -11450,9 +11659,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$14 = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$17 = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$15 = {"avatar-image":"_GKL9P"};
+var styles$18 = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -11477,7 +11686,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$15['avatar-image']
+    className: styles$18['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -11546,7 +11755,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
   return React__default.createElement("div", {
-    className: classnames(styles$14['avatar'], (_classnames = {}, _classnames[styles$14['avatar--small']] = size === 'small', _classnames[styles$14['avatar--medium']] = size === 'medium', _classnames[styles$14['avatar--large']] = size === 'large', _classnames[styles$14['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$17['avatar'], (_classnames = {}, _classnames[styles$17['avatar--small']] = size === 'small', _classnames[styles$17['avatar--medium']] = size === 'medium', _classnames[styles$17['avatar--large']] = size === 'large', _classnames[styles$17['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -11559,7 +11768,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$14['avatar__badge']
+    className: styles$17['avatar__badge']
   }, badge));
 };
 
@@ -11572,7 +11781,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$16 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$19 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
 
 var Chip = function Chip(_ref) {
   var _classnames;
@@ -11583,11 +11792,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$16['chip'], (_classnames = {}, _classnames[styles$16['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$16['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$16['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$16['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$16['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$16['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$19['chip'], (_classnames = {}, _classnames[styles$19['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$19['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$19['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$19['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$19['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$19['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$17 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$1a = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -11606,7 +11815,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$17['pill'], (_classnames = {}, _classnames[styles$17['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$17['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$17['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$17['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$17['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$1a['pill'], (_classnames = {}, _classnames[styles$1a['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$1a['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$1a['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$1a['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$1a['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -11616,9 +11825,9 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$18 = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
+var styles$1b = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
 
-var styles$19 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
+var styles$1c = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -11636,7 +11845,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: classnames(styles$19['empty-state-container-cta'], (_classNames = {}, _classNames[styles$19['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames(styles$1c['empty-state-container-cta'], (_classNames = {}, _classNames[styles$1c['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -11651,7 +11860,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$18['empty-state-container-stack'],
+    className: styles$1b['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -11667,7 +11876,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$18['empty-state-container-stack__body']
+    className: styles$1b['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -11679,7 +11888,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-var styles$1a = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline--inside-modal":"_2sweG","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn","empty-state-container-inline__image":"_G2VtA"};
+var styles$1d = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline--inside-modal":"_2sweG","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn","empty-state-container-inline__image":"_G2VtA"};
 
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _classNames, _classnames;
@@ -11700,10 +11909,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       isInsideModal = _useModalContext.isModalMounted;
 
   return React__default.createElement("div", {
-    className: classnames(styles$1a['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1a['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$1d['empty-state-container-inline'], (_classNames = {}, _classNames[styles$1d['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: classnames(styles$1a['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1a['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1a['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+    className: classnames(styles$1d['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$1d['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$1d['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -11712,7 +11921,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$1a['empty-state-container-inline__body']
+    className: styles$1d['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -11723,7 +11932,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$1a['empty-state-container-inline__image']
+    className: styles$1d['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -11797,5 +12006,5 @@ var EmptyState = function EmptyState(_ref) {
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, COLORS, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, COLORS, Calendar, CalloutCard, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, HintModal, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconCheckCircleIncomplete, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconEnvelopeOpenDollar, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconRocket, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUnlock, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, PhoneField, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, Skeleton, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, ZINDEX, toast, useDataTableContext };
 //# sourceMappingURL=index.modern.js.map