@7shifts/sous-chef 3.27.0 → 3.28.0

package/dist/index.js

@@ -4703,6 +4703,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 = {
@@ -6092,6 +6098,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, {
@@ -6100,7 +6145,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,
@@ -6113,24 +6158,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(reactRouterDom.Link, {
     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));
 };
 
@@ -6155,7 +6200,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',
@@ -6178,7 +6223,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
@@ -6204,7 +6249,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;
@@ -6233,7 +6278,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],
@@ -6305,7 +6350,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,
@@ -6320,7 +6365,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"
@@ -6329,21 +6374,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,
@@ -6358,15 +6403,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
@@ -6374,7 +6419,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',
@@ -6400,7 +6445,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
@@ -6408,15 +6453,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,
@@ -6426,7 +6471,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,
@@ -6436,18 +6481,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));
 };
 
@@ -6469,7 +6516,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,
@@ -6497,14 +6544,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,
@@ -6547,7 +6594,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;
@@ -6560,13 +6607,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) {
@@ -6605,7 +6654,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)));
@@ -6620,7 +6669,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",
@@ -6633,7 +6682,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(), {
@@ -6827,9 +6876,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);
     },
@@ -6894,7 +6943,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,
@@ -6924,7 +6973,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,
@@ -6937,12 +6986,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, {
@@ -6975,7 +7024,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"];
 
@@ -7029,22 +7078,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, {
@@ -7091,17 +7140,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,
@@ -7129,7 +7178,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
@@ -7144,7 +7193,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;
@@ -7193,7 +7242,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, {
@@ -7202,7 +7251,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",
@@ -7247,7 +7296,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;
@@ -7335,6 +7384,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 = React.useRef(null);
+
+  var _useState = React.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);
+    }
+  };
+
+  React.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 = React.useState(function () {
+    return getBrowserVersion();
+  }),
+      browserVersion = _useState[0];
+
+  if (!stickyColumns) {
+    return React__default.createElement(React.Fragment, null, children);
+  }
+
+  var noShadow = browserVersion.includes('Safari');
+  var containerClassName = 'data-table-sticky-columns-container';
+  return React__default.createElement(React.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;
@@ -7358,7 +7546,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 = React.useRef([]);
   var prevPaginationRef = React.useRef(false);
   var RowItem = itemComponent || DataTableDefaultItemComponent;
@@ -7433,6 +7622,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", {
@@ -7464,7 +7657,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));
 };
@@ -7564,7 +7757,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"];
 
@@ -7577,7 +7770,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(Select.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
     }
@@ -7747,7 +7940,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"];
 
@@ -7817,15 +8010,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.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",
@@ -8008,9 +8201,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',
@@ -8070,7 +8263,7 @@ var DateFilterDisplay = React.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
@@ -8078,7 +8271,7 @@ var DateFilterDisplay = React.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"
@@ -8089,7 +8282,7 @@ var DateFilterDisplay = React.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;
@@ -8124,7 +8317,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);
     }
@@ -8154,7 +8347,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, {
@@ -8196,7 +8389,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,
@@ -8213,7 +8406,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;
@@ -8224,16 +8417,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;
@@ -8245,14 +8438,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));
 };
 
@@ -8270,7 +8463,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;
@@ -8306,7 +8499,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
@@ -8348,12 +8541,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%';
@@ -8384,7 +8577,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,
@@ -8393,7 +8586,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 = React.useRef(null);
@@ -8471,7 +8664,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)) {
@@ -8505,7 +8698,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) {
@@ -8539,7 +8732,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
 
 var TextField = React.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,
@@ -8631,7 +8824,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,
@@ -8653,7 +8846,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));
   })));
 };
@@ -8701,9 +8894,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;
@@ -8721,7 +8914,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,
@@ -8732,7 +8925,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",
@@ -8741,13 +8934,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,
@@ -8767,7 +8960,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,
@@ -8778,11 +8971,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)));
@@ -8917,7 +9110,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, {
@@ -8930,9 +9123,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;
@@ -8940,7 +9133,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, {
@@ -9025,11 +9218,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",
@@ -9041,7 +9234,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",
@@ -9074,7 +9267,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 = React.useState(false),
+      isMenuInputFocus = _useState[0],
+      setIsMenuInputFocus = _useState[1];
+
+  var onMenuInputFocus = function onMenuInputFocus(isFocused) {
+    return setIsMenuInputFocus(isFocused);
+  };
+
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -9112,11 +9316,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 : Select.components.Option
+      Option: UserCustomOption ? CustomOption : Select.components.Option,
+      Menu: onCreate ? CustomMenu : Select.components.Menu
     },
     menuShouldScrollIntoView: menuShouldScrollIntoView,
     menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
@@ -9128,11 +9336,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"];
 
@@ -9151,7 +9360,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.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')))));
 };
 
@@ -9502,7 +9711,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"};
 
@@ -9560,9 +9769,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);
     },
@@ -9777,7 +9986,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",
@@ -10121,7 +10330,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
 var TimeField = React.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,
@@ -10227,7 +10436,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,
@@ -10406,7 +10615,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,
@@ -11278,7 +11487,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"};
 
@@ -11290,15 +11499,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"
@@ -11315,7 +11524,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)));
   }))));
 };
@@ -11401,7 +11610,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,
@@ -11412,17 +11621,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, "+", libphonenumberJs.getCountryCallingCode(selectedCountry))) : "+" + libphonenumberJs.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"];
 
@@ -11446,7 +11655,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));
@@ -11454,9 +11663,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = React.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,
@@ -11481,7 +11690,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
@@ -11550,7 +11759,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
     },
@@ -11563,7 +11772,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));
 };
 
@@ -11576,7 +11785,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;
@@ -11587,11 +11796,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',
@@ -11610,7 +11819,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);
 };
 
@@ -11620,9 +11829,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;
@@ -11640,7 +11849,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);
 };
 
@@ -11655,7 +11864,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,
@@ -11671,7 +11880,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"
@@ -11683,7 +11892,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;
@@ -11704,10 +11913,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, {
@@ -11716,7 +11925,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
@@ -11727,7 +11936,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),
@@ -11810,6 +12019,7 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$1;
 exports.COLORS = COLORS;
 exports.Calendar = Calendar;
+exports.CalloutCard = CalloutCard;
 exports.Card = Card;
 exports.CheckboxField = CheckboxField;
 exports.Chip = Chip;